使用体验优化及bug修复

src/components/Camera/index.vue

@@ -35,10 +35,17 @@ import BaseVue from "@/types/baseVue";
 export default class Camera extends BaseVue {
   @Prop() private detail!: CameraItem[];
   @Prop() private cameraLocation!: string;
+  @Prop() private groupIndex!: number;
 
   showCarmera = true;
   activeId = "";
 
+  mounted() {
+    if (this.groupIndex === 0 && this.detail && this.detail.length > 0) {
+      this.activeId = this.detail[0].cameraId;
+    }
+  }
+
   hideCameras(): void {
     this.showCarmera = !this.showCarmera;
   }

src/components/DogInfo/data.d.ts

 
 export interface DogData {
-  id: string;
+  id: number;
   cameraId: string;
   startTimeInDay?: string;
   endTimeInDay?: string;

src/components/DogInfo/index.vue

@@ -81,7 +81,7 @@ import BaseVue from "@/types/baseVue";
 @Component({ components: { Icon } })
 export default class DogInfo extends BaseVue {
   @Prop() private dog: DogData;
-  @Prop() private isActive = false;
+  @Prop() private isActive!: boolean;
 
   play(): void {
     this.$emit("play", this.dog);

src/components/MyVideo/track/index.ts

@@ -49,6 +49,10 @@ class DogTrack extends Component {
     if (this.processing || this.trackData.length === 0 || !this.myel) return
     this.processing = true
     const currentTime = this.player_.currentTime() * 1000
+    const maxPlayTime = this.trackData[this.trackData.length - 1].FrameIndex * 40
+    if (currentTime > maxPlayTime) {
+      this.player_.pause()
+    }
     //假如调整的播放时间则初始数组索引
     if (currentTime - this.preCurrentTime <= 0) {
       this.dispose()
@@ -56,6 +60,7 @@ class DogTrack extends Component {
     //上次播放时间
     this.preCurrentTime = currentTime
     const firstFrameIndex = this.trackData[0].FrameIndex * 40
+
     for (let i = this.arrayIndex; i < this.trackData.length; i++) {
       const d = this.trackData[i]
       if (firstFrameIndex <= currentTime && currentTime <= d.FrameIndex * 40) {

src/service/CameraService.ts

@@ -45,7 +45,7 @@ export function pageDogInfo(data: any) {
 
 export function getLabelInfo(fileName: string) {
   return fetch(
-    `${api.skyNet}/video/getLabelInfo?path=${fileName}`,
+    `${api.skyNet}video/getLabelInfo?path=${fileName}`,
     { headers: { "Accept-Encoding": "gzip" } }
   )
     .then((response) => {

src/views/dashboard/index.vue

@@ -3,7 +3,7 @@
     <div class="camera-list">
       <div>
         <div class="title">摄像头选择</div>
-        <Search @search="queryCamera" @dateChange="handleDateChange" />
+        <Search @search="handleSearch" @dateChange="handleDateChange" />
       </div>
 
       <div class="cameras">
@@ -13,7 +13,8 @@
             :key="index"
             :cameraLocation="key"
             :detail="value"
-            @clickCamera="queryDogInfo"
+            :groupIndex="index"
+            @clickCamera="handleClickCamera"
           />
         </div>
         <div v-show="!cameras" class="no-data">
@@ -23,7 +24,7 @@
     </div>
     <div class="player" ref="player-container">
       <MyVideo
-        ref="myVideo"
+        ref="my-video"
         v-if="width > 0 && videoUrl"
         :src="videoUrl"
         :trackData="trackData"
@@ -49,7 +50,8 @@
       <div class="paging">
         <el-pagination
           background
-          layout="total,prev, pager, next,jumper"
+          small
+          layout="total,prev, pager, next"
           :current-page.sync="queryCameryParam.current"
           @current-change="handleCurrentChange"
           :total="dogTotal"
@@ -60,7 +62,7 @@
 </template>
 
 <script lang="ts">
-import { Component } from "vue-property-decorator";
+import { Component, Watch } from "vue-property-decorator";
 import Camera from "@/components/Camera/index.vue";
 import DogInfo from "@/components/DogInfo/index.vue";
 import Search from "@/components/Camera/search.vue";
@@ -96,10 +98,16 @@ export default class Dashboard extends BaseVue {
     size: 10,
   };
   dogTotal = 0;
-  currentDogId = "";
+  currentDogId = 0;
 
   async created(): Promise<void> {
-    this.queryCamera(this.queryCameryParam);
+    this.queryCamera();
+  }
+
+  @Watch("dogData")
+  dogDataChange(newValue) {
+    //初始第一条视频
+    this.handlePlay(newValue[0]);
   }
 
   mounted() {
@@ -113,45 +121,42 @@ export default class Dashboard extends BaseVue {
   }
 
   async handlePlay(dog: DogData): Promise<void> {
+    if (!dog) return;
     console.log("dogInfo", dog);
     this.currentDogId = dog.id;
     this.videoUrl = dog.fileName; //dog.videoUrl;
-    //play video
-    const myVideo = this.$refs["myVideo"];
-    //@ts-ignore
-    myVideo.onSrcChange(this.videoUrl);
-
-    const track = await getLabelInfo(dog.labelFileName);
-    console.log("track", track);
-    // // this.trackData = track.filter((d) => d.DogId === dog.id);
-    // // const aa = await getLabelInfo("6-CL006-det.res.txt");
-
-    // this.trackData = dogTrackData.filter((d) => d.DogId === dog.id);
-    // //@ts-ignore
-    // myVideo.onTrackDataChange(this.videoUrl, this.trackData);
+    const this_ = this;
+    //用异步是为了防止my-vidoe控件还没有挂载好
+    setTimeout(async () => {
+      //play video
+      const myVideo = this_.$refs["my-video"];
+      //@ts-ignore
+      myVideo.onSrcChange(this_.videoUrl);
+      // const track = await getLabelInfo(dog.labelFileName);
+      // this.trackData = track.filter((d) => d.DogId === dog.id);
+      this.trackData = dogTrackData.filter(
+        (d) => d.DogId === "1440845582095753223" //this.dogData[0].id
+      );
+      //@ts-ignore
+      myVideo.onTrackDataChange(this_.trackData);
+    }, 100);
   }
 
-  async queryDogInfo(query) {
+  async queryDogInfo() {
     const rp = await pageDogInfo({
       ...this.queryDogParam,
-      ...this.queryCameryParam,
-      ...query,
     });
     //@ts-ignore
     this.dogData = rp.data.records;
     this.dogTotal = rp.data.total;
-    //初始第一条视频
-    if (this.dogData && this.dogData.length > 0) {
-      this.videoUrl = this.dogData[0].fileName; //"1440845582095753223"
-      //todo:
-      this.trackData = dogTrackData.filter(
-        (d) => d.DogId === "1440845582095753223" //this.dogData[0].id
-      );
-    }
   }
-  async queryCamera(query) {
+  handleClickCamera({ cameraId }) {
+    this.queryDogParam.cameraId = cameraId;
+    this.queryDogInfo();
+  }
+  async queryCamera() {
     //查询摄像头数据
-    const data = await getCameraDogFormate({ ...query });
+    const data = await getCameraDogFormate({ ...this.queryCameryParam });
     this.cameras = data;
     if (!this.cameras) {
       this.dogData = [];
@@ -161,10 +166,8 @@ export default class Dashboard extends BaseVue {
     //默认查询第一个摄像头狗的数据
     for (const item in this.cameras) {
       if (this.cameras[item] && this.cameras[item].length > 0) {
-        await this.queryDogInfo({
-          ...query,
-          cameraId: this.cameras[item][0].cameraId,
-        });
+        this.queryDogParam.cameraId = this.cameras[item][0].cameraId;
+        await this.queryDogInfo();
         break;
       }
     }
@@ -175,7 +178,12 @@ export default class Dashboard extends BaseVue {
 
   handleCurrentChange(val) {
     this.queryDogParam.current = val;
-    this.queryDogInfo({});
+    this.queryDogInfo();
+  }
+
+  handleSearch(query) {
+    this.queryCameryParam = { ...this.queryCamera, ...query };
+    this.queryCamera();
   }
 }
 </script>
@@ -239,5 +247,9 @@ export default class Dashboard extends BaseVue {
     text-align: center;
     padding-top: 20px;
   }
+
+  .el-pagination__total {
+    color: #d7d7d7 !important;
+  }
 }
 </style>

src/views/sysSetting/components/search.vue

@@ -2,7 +2,7 @@
   <div :class="`${prefixCls}-search`">
     <div class="item">摄像头名称</div>
     <div class="item">
-      <el-input size="mini" v-model="queryData.name"></el-input>
+      <el-input size="mini" v-model="queryData.cameraName"></el-input>
     </div>
     <div class="item">分组</div>
     <div class="item">
@@ -26,7 +26,7 @@ export default class Search extends BaseVue {
   @Prop() private isDisabled!: boolean;
 
   queryData = {
-    name: "",
+    cameraName: "",
     groupName: "",
   };
 
@@ -34,7 +34,7 @@ export default class Search extends BaseVue {
     this.$emit("queryevent", { ...this.queryData });
   }
   handleClean(): void {
-    this.queryData.name = "";
+    this.queryData.cameraName = "";
     this.queryData.groupName = "";
     this.$emit("queryevent", { ...this.queryData });
   }

src/views/sysSetting/index.vue

@@ -36,7 +36,7 @@
             :class="{'odd-row':i % 2 === 1,'even-row':i % 2 === 0}"
           >
             <td>
-              <div>{{item.name}}</div>
+              <div>{{item.cameraName}}</div>
             </td>
             <td>
               <div>{{item.groupName}}</div>
@@ -72,7 +72,7 @@
     <el-dialog title="新增/编辑摄像头" :visible.sync="dialogVisible" width="500px">
       <el-form ref="form" :rules="formRules" :model="form" label-width="120px">
         <el-form-item label="摄像头名称" prop="name">
-          <el-input v-model="form.name"></el-input>
+          <el-input v-model="form.cameraName"></el-input>
         </el-form-item>
         <el-form-item label="分组" prop="groupName">
           <el-input v-model="form.groupName"></el-input>
@@ -135,11 +135,53 @@ export default class SysSetting extends BaseVue {
   currentId = "";
   total = 0;
   form: CameraData = {};
+  aaaa = "";
+
   formRules = {
-    name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+    cameraName: [
+      { required: true, message: "请输入摄像头名称", trigger: "blur" },
+    ],
     groupName: [{ required: true, message: "请输入分组", trigger: "blur" }],
-    longitude: [{ required: true, message: "经纬度不能为空", trigger: "blur" }],
-    latitude: [{ required: true, message: "请输入视频路径", trigger: "blur" }],
+    longitude: [
+      { required: true, message: "经度不能为空", trigger: "blur" },
+      {
+        validator: (rule, value, callback) => {
+          const n = value * 1;
+          setTimeout(() => {
+            if (!Number.isInteger(n)) {
+              callback(new Error("请输入数字值"));
+            } else {
+              if (n < -180 || n > 180) {
+                callback(new Error("经度范围是（-180~180）"));
+              } else {
+                callback();
+              }
+            }
+          }, 1000);
+        },
+        trigger: "blur",
+      },
+    ],
+    latitude: [
+      { required: true, message: "请输入视频路径", trigger: "blur" },
+      {
+        validator: (rule, value, callback) => {
+          const n = value * 1;
+          setTimeout(() => {
+            if (!Number.isInteger(n)) {
+              callback(new Error("请输入数字值"));
+            } else {
+              if (n < -85 || n > 85) {
+                callback(new Error("纬度范围是（-85~85）"));
+              } else {
+                callback();
+              }
+            }
+          }, 1000);
+        },
+        trigger: "blur",
+      },
+    ],
   };
   queryData = {
     current: 1,
@@ -338,6 +380,9 @@ export default class SysSetting extends BaseVue {
     .el-form-item__content {
       text-align: right;
     }
+    .el-pagination__total {
+      color: #d7d7d7;
+    }
   }
   .confirm-del {
     font-size: 16px;