任务详情优化

src/views/workManagement/taskInfo.vue

@@ -52,7 +52,7 @@
 
         <div class="panel boxB">
             <div class="titlePanel">
-                <div class="titlePanelBor">仿真动画</div>
+                <div class="titlePanelBor">仿真详情</div>
             </div>
             <div class="contentBox">
                 <!-- <div class="content">
@@ -61,23 +61,66 @@
                         width="100%"
                     />
                 </div> -->
-                <div
+                <!-- <video controls="controls">
+                    <source :src="item" type="video/mp4">
+                </video> -->
+                <!-- <div
                     class="content"
                     v-for="item in videoUrl"
                     :key="item + Math.random()"
                 >
                     <video :src="item" controls="controls"></video>
-                    <!-- <video controls="controls">
-                        <source :src="item" type="video/mp4">
-                    </video> -->
+                </div> -->
+                <div class="content contentA">
+                    <video :src="videoSrc" controls="controls"></video>
+                </div>
+
+                <div class="content contentB">
+                    <div class="info">
+                        <span>里程(米):</span>
+                        <b>{{ getNumber(info.mileage) }}</b>
+                    </div>
+                    <div class="info">
+                        <span>平均速度(千米/小时):</span>
+                        <b>{{ getNumber(info.averageVelocity) }}</b>
+                    </div>
+                    <div class="info">
+                        <span>最大速度(千米/小时):</span>
+                        <b>{{ getNumber(info.maximunSpeed) }}</b>
+                    </div>
+                    <div class="info">
+                        <span>最小速度(千米/小时):</span>
+                        <b>{{ getNumber(info.minimunVelocity) }}</b>
+                    </div>
+                    <div class="info">
+                        <span>最大横摆角速度(弧度/秒):</span>
+                        <b>{{ getNumber(info.maximumSwingSpeed) }}</b>
+                    </div>
+                    <div class="info">
+                        <span>最大横向加速度(米/秒²):</span>
+                        <b>{{ getNumber(info.maximumAcceleration) }}</b>
+                    </div>
+                    <div class="info">
+                        <span>最大横向减速度(米/秒²):</span>
+                        <b>{{ getNumber(info.maximumDeceleration) }}</b>
+                    </div>
+                    <div class="info">
+                        <span>最大纵向加速度(米/秒²):</span>
+                        <b>{{ getNumber(info.maxLongitudinalAcceleration) }}</b>
+                    </div>
+                    <div class="info">
+                        <span>最大纵向减速度(米/秒²):</span>
+                        <b>{{ getNumber(info.minLongitudinalAcceleration) }}</b>
+                    </div>
                 </div>
             </div>
         </div>
 
-        <div class="panel boxC">
+        <!-- <div class="panel boxC">
             <div class="titlePanel">
                 <div class="titlePanelBor">基本数据</div>
             </div>
+            
             <div class="contentBox">
                 <div class="info">
                     <span>里程(米):</span>
@@ -116,9 +159,9 @@
                     <b>{{ getNumber(info.minLongitudinalAcceleration) }}</b>
                 </div>
             </div>
-        </div>
+        </div> -->
 
-        <div class="panel boxD">
+        <!-- <div class="panel boxD">
             <div class="titlePanel">
                 <div class="titlePanelBor">舒适性参数</div>
             </div>
@@ -148,7 +191,7 @@
                     </tableList>
                 </div>
             </div>
-        </div>
+        </div> -->
 
         <div class="panel boxE">
             <div class="titlePanel">
@@ -325,6 +368,7 @@ export default {
             yListG: [],
             yListH: [],
             videoUrl: [],
+            videoSrc: "",
         };
     },
 
@@ -368,10 +412,12 @@ export default {
                         this.yListE = res.info.curveData.throttle || [];
                         this.yListF = res.info.curveData.yaw_rate || [];
                         this.yListG = res.info.curveData.velocity || [];
-                        this.yListH = res.info.curveData.acceleration_longitudinal || [];
+                        this.yListH =
+                            res.info.curveData.acceleration_longitudinal || [];
                     }
 
                     this.videoUrl = res.info.videoUrl || [];
+                    this.videoSrc = this.videoUrl[0];
 
                     this.columnsB = res.info.sceneScoreLiTitle;
                     this.getDataWayB.data = res.info.sceneScoreLi;
@@ -436,8 +482,8 @@ export default {
     .boxE {
         .contentBox {
             display: flex;
-            justify-content: center;
-            align-items: center;
+            // justify-content: center;
+            // align-items: center;
             padding: 30px 0;
         }
     }
@@ -445,16 +491,46 @@ export default {
     .boxB {
         .contentBox {
             justify-content: space-around;
-            flex-wrap: wrap;
+            // flex-wrap: wrap;
 
             .content {
-                width: 45%;
-                margin-bottom: 30px;
+                // width: 48%;
+                // margin-bottom: 30px;
+                flex-wrap: wrap;
 
                 video {
                     width: 100%;
                 }
             }
+
+            .contentA {
+                width: calc(100% - 400px);
+            }
+
+            .contentB {
+                display: flex;
+                width: 400px;
+                padding-left: 45px;
+            }
+
+            .info {
+                display: flex;
+                width: 345px;
+                margin: 0 12px 15px 0;
+                word-break: break-all;
+
+                b {
+                    flex: 1;
+                    font-weight: normal;
+                }
+
+                span {
+                    display: block;
+                    width: 174px;
+                    padding-right: 10px;
+                    color: @gray;
+                }
+            }
         }
     }
 
@@ -545,5 +621,49 @@ export default {
             }
         }
     }
+
+    .boxF {
+        .contentBox {
+            position: relative;
+            padding: 30px 0;
+
+            .contentA {
+                margin-right: 50%;
+
+                video {
+                    width: 100%;
+                }
+            }
+
+            .contentB {
+                // display: flex;
+                // flex-wrap: wrap;
+                position: absolute;
+                top: 30px;
+                right: 0;
+                width: 48%;
+                padding-left: calc(25% - 120px);
+            }
+
+            .info {
+                display: flex;
+                width: 345px;
+                margin: 0 12px 15px 0;
+                word-break: break-all;
+
+                b {
+                    flex: 1;
+                    font-weight: normal;
+                }
+
+                span {
+                    display: block;
+                    width: 174px;
+                    padding-right: 10px;
+                    color: @gray;
+                }
+            }
+        }
+    }
 }
 </style>