camera name 长度问题处理

src/components/Camera/index.vue

@@ -15,7 +15,7 @@
       <div :class="{item:true,active:currentCameraId === item.cameraId}">
         <div class="item-name">
           <Icon name="camera" iconClass="icon-camera" />
-          <span>{{ item.cameraName }}</span>
+          <span>{{ handleCameraName(item.cameraName)}}</span>
         </div>
         <div class="item-total">
           <span>{{ item.number }}</span>
@@ -43,9 +43,20 @@ export default class Camera extends BaseVue {
     this.showCarmera = !this.showCarmera;
   }
 
+  mounted() {
+    console.log("groupName", this.detail);
+  }
+
   handleClickCamera(cameraId: string): void {
     this.$emit("clickCamera", { cameraId });
   }
+
+  handleCameraName(name: string) {
+    if (name && name.length > 20) {
+      return name.substr(0, 20) + "...";
+    }
+    return name;
+  }
 }
 </script>
 

src/components/DogInfo/index.vue

@@ -39,7 +39,7 @@
               <div class="col-left">是否牵狗绳</div>
             </td>
             <td>
-              <div>{{ dog.withRopeRatio }}</div>
+              <div>{{ `${dog.withRopeRatio*100}%` }}</div>
             </td>
           </tr>
           <tr>

src/components/MyVideo/index.vue

@@ -12,7 +12,7 @@ import videojs from "video.js";
 import "@/components/MyVideo/track/index";
 import "@/components/MyVideo/myContainer/index";
 import "@/assets/scss/myVideo.scss";
-import { TrackData } from "./data";
+// import { TrackData } from "./data";
 //先全局挂载vidoejs对象，以便语言包添加
 //@ts-ignore
 window.videojs = videojs;

src/service/CameraService.ts

@@ -26,7 +26,10 @@ export async function getCameraDogFormate(data: any) {
   //组装数据结构
   const ar = {}
   rp.data.forEach(d => {
-    if (!ar[d.groupName]) {
+    if (!d.groupName) {
+      ar[""] = [d]
+    }
+    else if (!ar[d.groupName]) {
       ar[d.groupName] = [d]
     } else {
       ar[d.groupName].push(d)

src/utils/timeHelper.ts

+export function convertmilliSecondToTime(milliSecond: number) {
+  //@ts-ignore
+  const second = Math.round(milliSecond / 1000, 0)
+  if (second < 1) return "00:00"
+  if (second <= 60)
+    return ""
+}
\ No newline at end of file

src/views/dashboard/index.vue

@@ -9,8 +9,8 @@
       <div class="cameras">
         <div v-show="cameras">
           <Camera
-            v-for="(value,key,index) in cameras"
-            :key="index"
+            v-for="(value,key) in cameras"
+            :key="key"
             :groupName="key"
             :detail="value"
             :currentCameraId="currentCameraId"
@@ -63,14 +63,14 @@ import Search from "@/components/Camera/search.vue";
 import BaseVue from "@/types/baseVue";
 import MyVideo from "@/components/MyVideo/index.vue";
 import { DogData } from "@/components/DogInfo/data";
-import { TrackData } from "@/components/MyVideo/data";
+// import { TrackData } from "@/components/MyVideo/data";
 import {
   getCameraDogFormate,
   pageDogInfo,
   getLabelInfo,
   convertLabelInfo,
 } from "@/service/CameraService";
-import dogTrackData from "@/mock/trackData";
+// import dogTrackData from "@/mock/trackData";
 
 @Component({ components: { Camera, DogInfo, Search, MyVideo } })
 export default class Dashboard extends BaseVue {
@@ -160,6 +160,7 @@ export default class Dashboard extends BaseVue {
     //查询摄像头数据
     const data = await getCameraDogFormate({ ...this.queryCameryParam });
     this.cameras = data;
+    console.log("aaa", this.cameras);
     if (!this.cameras) {
       this.dogData = [];
       this.dogTotal = 0;