修改录像诊断

src/views/iot/videoIntegrity/Calendar.vue

@@ -38,6 +38,11 @@ export default {
         {
           dot:{
             color:'green',
+            style:{
+              width:'16px',
+              height:'3px',
+              borderRadius:'0'
+            },
             contentClass:'italic',
           },
           dates:[ '2024-01-29','2024-01-31','2024-02-02','2024-02-03','2024-02-04','2024-02-05','2024-02-06','2024-02-07','2024-02-08','2024-02-09','2024-02-10','2024-02-11',],
@@ -45,6 +50,11 @@ export default {
         {
           dot:{
             color:'red',
+            style:{
+              width:'16px',
+              height:'3px',
+              borderRadius:'0'
+            },
             contentClass:'italic',
           },
           dates: '2024-01-30',
@@ -53,7 +63,10 @@ export default {
           dot:{
             color:'yellow',
             style:{
-              backgroundColor:'orange'
+              backgroundColor:'orange',
+              width:'16px',
+              height:'3px',
+              borderRadius:'0'
             },
             contentClass:'italic',
           },

src/views/iot/videoIntegrity/ProgressBar.vue

@@ -1,9 +1,11 @@
 <template>
     <div class="progress-box-bar" ref="progressbar">
+        <div class="bar-container1">
+          <div class="bar2"></div>
+        </div>
         <canvas draggable="false" id="procanvas" height="60" @contextmenu="contextMenuClick" @mousedown="mousedownFunc" @mouseup="mouseupFunc" @mousemove="mousemoveFunc" @mouseout="mouseoutFunc"></canvas>
         <div class="bar-container">
           <div class="bar1"></div>
-          <div class="bar2"></div>
           <div class="bar3"></div>
         </div>
     </div>
@@ -391,23 +393,30 @@ export default {
         background: green;
         z-index:2;
       }
-      .bar2{
-        width: 93%;
-        height: 100%;
-        position: absolute;
-        top:0;
-        left: 0;
-        background: rgb(0, 178, 255);
-        z-index:1;
-      }
       .bar3{
-        width: 10%;
+        width: 15%;
         height: 100%;
         position: absolute;
         top:0;
-        left: 30%;
+        left: 35%;
         background: red;
         z-index:3;
       }
     }
+    .bar-container1{
+      width: 100%;
+      height: 20px;
+      background-color: #eaeaea;
+      position: relative;
+      top:20px;
+      .bar2{
+        width: 80%;
+        height: 20px;
+        position: absolute;
+        top:0;
+        left: 0;
+        background: rgb(0, 178, 255);
+        z-index:1;
+      }
+    }
 </style>

src/views/iot/videoIntegrity/detail.vue

@@ -94,7 +94,7 @@
       </el-descriptions>
 
       <div class="time-line-box">
-        <div style="width: 100%;height: 20px;background-color: red; "></div>
+<!--        <div style="width: 100%;height: 20px;background-color: red; "></div>-->
         <progress-bar :timeCell="timeCells" :videoData="playVideoObj" :startTime="start_timestamp" ></progress-bar>
       </div>
       <div class="time-line">