查询狗优化

src/assets/scss/myVideo.scss

@@ -7,11 +7,11 @@
 
 .najiu-dog-track {
   position: absolute;
-  border: 2px solid #d7d7d7;
+  border: 2px solid #0079fe;
 }
 
 .najiu-dog-track-current {
   position: absolute;
-  border: 2px solid blue;
+  border: 2px solid #f95e5a;
   z-index: 100;
 }
\ No newline at end of file

src/components/DogInfo/index.vue

@@ -39,7 +39,7 @@
               <div class="col-left">是否牵狗绳</div>
             </td>
             <td>
-              <div>{{ `${dog.withRopeRatio*100}%` }}</div>
+              <div>{{ dog.withRopeRatio>0.1 ? "是" : "否" }}</div>
             </td>
           </tr>
           <tr>
@@ -104,7 +104,7 @@ export default class DogInfo extends BaseVue {
   }
   .active {
     background-color: #333333;
-    border: 1px solid blue;
+    border: 1px solid #f95e5a;
   }
   a {
     cursor: pointer;

src/components/MyVideo/track/index.ts

@@ -41,8 +41,8 @@ class DogTrack extends Component {
 
   update() {
     if (this.processing || this.trackData.length === 0) return
-    const now = new Date().getTime()
-    console.log("call", this.arrayIndex)
+    // const now = new Date().getTime()
+    // console.log("call", this.arrayIndex)
     this.processing = true
     const currentTime = this.player_.currentTime() * 1000
     //假如调整的播放时间则初始数组索引
@@ -59,7 +59,7 @@ class DogTrack extends Component {
     }
     for (let i = this.arrayIndex; i < this.trackData.length; i++) {
       const d = this.trackData[i]
-      console.log(i, currentTime, d[0] * 40)
+      // console.log(i, currentTime, d[0] * 40)
       if (firstFrameIndex <= currentTime && currentTime <= d[0] * 40) {
         this.arrayIndex = i
         this.trackDogs(d[1])
@@ -67,7 +67,7 @@ class DogTrack extends Component {
       }
     }
     this.processing = false
-    console.log("currentTime 循环耗时", new Date().getTime() - now)
+    // console.log("currentTime 循环耗时", new Date().getTime() - now)
   }
 
   trackDogs(dogs) {
@@ -81,7 +81,7 @@ class DogTrack extends Component {
         //跟踪框位置
         myel.style.top = `${value.y1 * this.defaultHeight}px`
         myel.style.left = `${value.x1 * this.defaultWidth}px`
-        console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.defaultWidth},screen-height:${this.defaultHeight},dogs:${JSON.stringify(value)}`)
+        // console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.defaultWidth},screen-height:${this.defaultHeight},dogs:${JSON.stringify(value)}`)
       } else {
         myel.style.width = `${(value.x2 - value.x1) * this.fullWidth}px`
         myel.style.height = `${(value.y2 - value.y1) * (this.fullHeight + 30)}px`
@@ -130,7 +130,9 @@ class DogTrack extends Component {
       const el = document.createElement("div")
       el.id = `dog_${key}`
       el.classList.add("display-none")
-      if (key === currentDogId) {
+      // console.log("dogId", `当前狗id：${currentDogId},遍历狗id:${key}`)
+      if (key == currentDogId) {
+        // console.log("currentDogId", currentDogId)
         el.classList.add("najiu-dog-track-current")
       } else {
         el.classList.add("najiu-dog-track")

src/views/dashboard/index.vue

@@ -46,7 +46,7 @@
           background
           small
           layout="total,prev, pager, next"
-          :current-page.sync="queryCameryParam.current"
+          :current-page.sync="queryDogParam.current"
           @current-change="handleCurrentChange"
           :total="dogTotal"
         ></el-pagination>
@@ -117,7 +117,7 @@ export default class Dashboard extends BaseVue {
 
   async handlePlay(dog: DogData): Promise<void> {
     if (!dog) return;
-    // console.log("dogInfo", dog);
+    console.log("dogInfo", dog);
     this.currentDogId = dog.id;
     this.videoUrl = dog.fileName; //dog.videoUrl;
     const this_ = this;
@@ -154,8 +154,15 @@ export default class Dashboard extends BaseVue {
   handleClickCamera({ cameraId }) {
     this.currentCameraId = cameraId;
     this.queryDogParam.cameraId = cameraId;
+    this.queryDogParam.current = 1;
     this.queryDogInfo();
   }
+  //深度监听对象属性变换
+  @Watch("queryDogParam", { deep: true })
+  pageChange(newValue) {
+    console.log("pageChange", newValue);
+  }
+
   async queryCamera() {
     //查询摄像头数据
     const data = await getCameraDogFormate({ ...this.queryCameryParam });
@@ -191,7 +198,7 @@ export default class Dashboard extends BaseVue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .#{$prefixCls}-dashboard {
   display: flex;
   max-width: 1905px;
@@ -254,5 +261,10 @@ export default class Dashboard extends BaseVue {
   .el-pagination__total {
     color: #d7d7d7 !important;
   }
+  ::v-deep {
+    .el-pagination.is-background .el-pager li:not(.disabled).active {
+      background-color: #0079fe;
+    }
+  }
 }
 </style>