显示格式优化

src/components/Camera/index.vue

@@ -15,6 +15,15 @@
       <div :class="{item:true,active:currentCameraId === item.cameraId}">
         <div class="item-name">
           <Icon name="camera" iconClass="icon-camera" />
+          <!-- <el-popover
+            placement="top-start"
+            title="标题"
+            width="200"
+            trigger="hover"
+            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
+          >
+            <el-button slot="reference">hover 激活</el-button>
+          </el-popover>-->
           <span>{{ handleCameraName(item.cameraName)}}</span>
         </div>
         <div class="item-total">
@@ -43,17 +52,13 @@ 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) + "...";
+    if (name && name.length > 14) {
+      return name.substr(0, 14) + "...";
     }
     return name;
   }

src/components/DogInfo/index.vue

@@ -31,7 +31,7 @@
               <div class="col-left">识别时长</div>
             </td>
             <td>
-              <div>{{ dog.videoLen }}</div>
+              <div>{{ convertMilliSecondToTime(dog.videoLen) }}</div>
             </td>
           </tr>
           <tr>
@@ -47,7 +47,7 @@
               <div class="col-left">品种</div>
             </td>
             <td>
-              <div>{{ dog.dogBreeds }}</div>
+              <div>{{ dog.dogBreeds?dog.dogBreeds:"未知" }}</div>
             </td>
           </tr>
           <tr>
@@ -55,7 +55,7 @@
               <div class="col-left">毛色</div>
             </td>
             <td>
-              <div>{{ dog.dogColor }}</div>
+              <div>{{ dog.dogColor?dog.dogColor:"未知" }}</div>
             </td>
           </tr>
           <tr>
@@ -79,6 +79,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";
 
 @Component({ components: { Icon } })
 export default class DogInfo extends BaseVue {
@@ -88,6 +89,9 @@ export default class DogInfo extends BaseVue {
   play(): void {
     this.$emit("play", this.dog);
   }
+  convertMilliSecondToTime(milliSecond) {
+    return convertMilliSecondToTime(milliSecond);
+  }
 }
 </script>
 

src/components/MyVideo/track/index.ts

@@ -22,6 +22,9 @@ class DogTrack extends Component {
     this.defaultWidth = player.el_.offsetWidth
     this.defaultHeight = player.el_.offsetHeight
 
+    player.on("loadedmetadata", () => {
+      console.log("视频时长单位秒", player.duration())
+    })
     player.on("timeupdate", () => this.update())
     player.on("fullscreenchange", (e) => this.fullScreenChange.call(this_, e, player))
     player.on("ended", () => {

src/main.ts

@@ -3,7 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "@/utils/rem";
-import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination, Loading, DatePicker, Empty } from 'element-ui';
+import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination, Loading, DatePicker, Empty, Popover } from 'element-ui';
 
 Vue.config.productionTip = false;
 
@@ -19,6 +19,7 @@ Vue.use(Pagination);
 Vue.use(DatePicker)
 Vue.use(Loading);
 Vue.use(Empty)
+Vue.use(Popover)
 
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$message = Message;

src/utils/timeHelper.ts

-export function convertmilliSecondToTime(milliSecond: number) {
+export function convertMilliSecondToTime(milliSecond: number) {
   //@ts-ignore
   const second = Math.round(milliSecond / 1000, 0)
   if (second < 1) return "00:00"
   if (second <= 60)
-    return ""
+    return second > 9 ? `00:${second}` : `00:0${second}`
+  const minute = second / 60
+  if (minute < 60) {
+    const rd = second % 60
+    const frd = rd > 9 ? rd : `0${rd}`
+    const intMinute = parseInt(minute.toString())
+    const fMinute = intMinute > 9 ? intMinute : `0${intMinute}`
+    return `${fMinute}:${frd}`
+
+  }
+  //小时暂不处理
+  return ""
 }
\ No newline at end of file

src/views/dashboard/index.vue

@@ -160,7 +160,6 @@ 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;