智能检索静态页面

src/assets/iconfont/iconfont.css

@@ -40,3 +40,6 @@
 .icon-jinggao:before {
   content: "\e636";
 }
+.icon-filesearch:before {
+  content: "\e7b4";
+}

src/assets/scss/variable.scss

@@ -2,3 +2,4 @@ $prefixCls:'najiu';
 $item-background-color:#1A2332;
 $theme-background-color:rgba(51, 51, 51, 1);
 $border-color:1px solid #444d56;
+$theme-blue:#0079fe
\ No newline at end of file

src/components/DogInfo/index.vue

@@ -44,7 +44,7 @@
               <div class="col-left">是否牵狗绳</div>
             </td>
             <td>
-              <div>{{ dog.withRopeRatio>0.1 ? "是" : "否" }}</div>
+              <div>{{ isRope(dog.withRopeRatio) }}</div>
             </td>
           </tr>
           <tr>
@@ -84,7 +84,7 @@ import { Component, Prop } from "vue-property-decorator";
 import { DogData } from "./data";
 import Icon from "@/components/Icon/index.vue";
 import BaseVue from "@/types/baseVue";
-import { convertMilliSecondToTime } from "@/utils/timeHelper";
+import { convertMilliSecondToTime, isRope } from "@/utils/timeHelper";
 
 @Component({ components: { Icon } })
 export default class DogInfo extends BaseVue {
@@ -97,6 +97,10 @@ export default class DogInfo extends BaseVue {
   convertMilliSecondToTime(milliSecond) {
     return convertMilliSecondToTime(milliSecond);
   }
+
+  isRope(ratio) {
+    return isRope(ratio);
+  }
 }
 </script>
 

src/router/index.ts

@@ -16,6 +16,16 @@ const routes: Array<MyRouteConfig> = [
     },
     show: true,
   },
+  {
+    path: "/aiSearch",
+    name: "AiSearch",
+    component: () => import("@/views/aiSearch/index.vue"),
+    meta: {
+      title: "智能检索",
+      icon: "filesearch",
+    },
+    show: true,
+  },
   {
     path: "/dogHot",
     name: "DogHot",

src/utils/timeHelper.ts

@@ -16,3 +16,7 @@ export function convertMilliSecondToTime(milliSecond: number) {
   //小时暂不处理
   return ""
 }
+
+export function isRope(ratio: number) {
+  return ratio > 0.1 ? "是" : "否"
+}
\ No newline at end of file

src/views/aiSearch/index.vue

+<template>
+  <div :class="`${prefixCls}-ai-search`">
+    <div class="search-container">
+      <div class="search-title">检索条件</div>
+      <div class="search-content">
+        <p>仅支持精准查询，请至少输入一个条件。</p>
+        <div class="row">
+          <div class="col-label">时间起：</div>
+          <div>
+            <el-input v-model="queryData.beginDate"></el-input>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-label">时间止：</div>
+          <div>
+            <el-input v-model="queryData.endDate"></el-input>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-label">犬只品种：</div>
+          <div>
+            <el-input v-model="queryData.endDate"></el-input>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-label">犬只毛色：</div>
+          <div>
+            <el-input v-model="queryData.endDate"></el-input>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-label">犬只体型：</div>
+          <div>
+            <el-input v-model="queryData.endDate"></el-input>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-label">是否牵狗绳：</div>
+          <div>
+            <el-input v-model="queryData.endDate"></el-input>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-label">摄像头：</div>
+          <div>
+            <el-input v-model="queryData.endDate"></el-input>
+          </div>
+        </div>
+        <div class="btn-container">
+          <el-button class="btn" type="primary">查询</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="data-container">
+      <div class="result-title">检索结果</div>
+      <div class="table-container">
+        <el-table
+          :data="dogs"
+          height="750"
+          border
+          style="width: 100%"
+          :row-class-name="getTableRowClass"
+        >
+          <el-table-column prop="dogImageFileName" label="采样图" width="120">
+            <template slot-scope="scope">
+              <img :src="scope.row.dogImageFileName" alt />
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="摄像头名称" width="140"></el-table-column>
+          <el-table-column prop="startTimeInDay" label="源视频起始时间" width="180"></el-table-column>
+          <el-table-column prop="videoLen" label="识别时长" :formatter="formatterVideoLen" width="120"></el-table-column>
+          <el-table-column prop="dogBreeds" label="品种" width="120"></el-table-column>
+          <el-table-column label="体型" width="120"></el-table-column>
+          <el-table-column prop="dogColor" label="毛色" width="120"></el-table-column>
+          <el-table-column prop="withRopeRatio" :formatter="isRope" label="是否牵狗绳" width="120"></el-table-column>
+          <el-table-column label="操作">
+            <el-button type="text" @click="handleEdit(item)">播放</el-button>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pageing">
+        <el-pagination
+          background
+          layout="total,prev, pager, next,jumper"
+          :current-page.sync="queryData.current"
+          @current-change="handleCurrentChange"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import BaseVue from "@/types/baseVue";
+import { Component } from "vue-property-decorator";
+import { pageDogInfo } from "@/service/CameraService";
+import { convertMilliSecondToTime, isRope } from "@/utils/timeHelper";
+
+@Component({})
+export default class AiSearch extends BaseVue {
+  queryData = {
+    current: 1,
+    beginDate: "",
+    endDate: "",
+    size: 10,
+  };
+  dogs = [];
+  total = 0;
+  async created() {
+    const rp = await pageDogInfo({
+      ...this.queryData,
+    });
+
+    this.dogs = rp.data.records;
+    console.log("dogs", this.dogs);
+    this.total = rp.data.total;
+  }
+  handleCurrentChange() {
+    console.log("handleCurrentChange");
+  }
+  getTableRowClass({ rowIndex }) {
+    return rowIndex % 2 === 0 ? "even-row" : "odd-row";
+  }
+  formatterVideoLen(row: any) {
+    return convertMilliSecondToTime(row.videoLen);
+  }
+  isRope(row) {
+    return isRope(row.withRopeRatio);
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.#{$prefixCls}-ai-search {
+  display: grid;
+  grid-template-columns: 335px minmax(500px, 1fr);
+  color: #fff;
+  gap: 10px;
+  .row {
+    .col-label {
+      padding: 5px 0;
+    }
+  }
+
+  .search-container {
+    border: $border-color;
+    margin-top: 10px;
+    background-color: $item-background-color;
+    padding-bottom: 20px;
+    .search-title {
+      font-size: 15px;
+      padding: 5px 5px 5px 30px;
+      border-bottom: $border-color;
+    }
+    .search-content {
+      font-size: 14px;
+      padding: 0 20px;
+      p {
+        font-size: 13px;
+        color: $theme-blue;
+        padding: 15px 0;
+      }
+    }
+    .btn-container {
+      padding: 20px 0;
+      .btn {
+        width: 100%;
+      }
+    }
+  }
+  .data-container {
+    margin-top: 10px;
+    background-color: $item-background-color;
+    .result-title {
+      font-size: 15px;
+      padding: 5px 5px 5px 30px;
+      border-bottom: $border-color;
+    }
+    .img-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      img {
+        width: 100px;
+        height: 100px;
+      }
+    }
+    .table-container {
+      padding: 10px;
+    }
+  }
+  .confirm-del {
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .pageing {
+    display: flex;
+    justify-content: end;
+    align-items: flex-end;
+    padding: 10px;
+    background-color: $item-background-color;
+  }
+
+  ::v-deep {
+    .el-table {
+      color: #fff;
+      background-color: #333333;
+    }
+    .el-table .odd-row {
+      background-color: $item-background-color;
+    }
+    .el-table .even-row {
+      background-color: #000000;
+    }
+    .el-table thead {
+      color: #fff;
+    }
+    .el-input__inner {
+      color: #d7d7d7;
+      background-color: $item-background-color;
+    }
+    .el-button--primary {
+      background-color: $theme-blue;
+      border-color: $theme-blue;
+    }
+    .el-table .cell,
+    .el-table--border .el-table__cell:first-child .cell {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      img {
+        width: 100px;
+        height: 100px;
+      }
+    }
+    .el-table .el-table__cell {
+      padding: 0;
+    }
+    .el-table--border .el-table__cell,
+    .el-table__body-wrapper
+      .el-table--border.is-scrolling-left
+      ~ .el-table__fixed {
+      border-right: $border-color;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: $border-color;
+    }
+    .el-table th.el-table__cell {
+      background-color: $item-background-color;
+    }
+    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+      background-color: #333333;
+    }
+    .el-table__empty-block {
+      background-color: #333333;
+    }
+    .el-table__empty-text {
+      color: #fff;
+    }
+    .el-table--border::after,
+    .el-table--group::after,
+    .el-table::before {
+      background-color: #333333;
+    }
+    .el-table--border,
+    .el-table--group {
+      border: $border-color;
+    }
+  }
+}
+</style>