更新驾驶舱

src/views/OperationalOverview/components/baseTable.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2020-12-14 09:07:03
- * @LastEditors: gtz
- * @LastEditTime: 2022-06-14 11:12:39
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-11-08 15:30:44
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
  * @Description:
 -->
@@ -9,7 +9,7 @@
   <div class="visual-base-table-container">
     <el-table
       v-loading="isLoading"
-      :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
+      :header-cell-style="{background:'rgba(32, 55, 96, 0.5)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
       :row-style="setRowStyle"
       :data="renderData"
       border
@@ -111,7 +111,7 @@ export default {
     setRowStyle(v) {
       if (v.rowIndex % 2 === 0) {
         return {
-          background: 'rgba(76,97,123,0.2)',
+          background: 'rgba(14, 32, 62, 0.5)',
           color: 'rgba(255,255,255,0.5)',
           height: 26 * this.beilv + 'px',
           lineHeight: 26 * this.beilv + 'px',
@@ -120,7 +120,7 @@ export default {
         }
       } else {
         return {
-          background: 'rgba(79,114,136,0.29)',
+          background: 'rgba(32, 55, 96, 0.5)',
           color: 'rgba(255,255,255,0.5)',
           height: 26 * this.beilv + 'px',
           lineHeight: 26 * this.beilv + 'px',

src/views/OperationalOverview/components/newBar.vue

@@ -175,7 +175,6 @@ export default {
       ]
     }
     this.$nextTick(() => {
-      console.log(this.series)
       this.initChart()
     })
   },

src/views/OperationalOverview/components/newPie.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-02 16:52:34
+ * @LastEditTime: 2022-11-08 15:09:11
  * @Description:
 -->
 <template>
@@ -112,14 +112,16 @@ export default {
             rich: {
               a: {
                 align: 'center',
-                fontSize: 10,
+                fontSize: 13,
                 color: 'rgba(255, 255, 255, 0.7)',
+                padding: [0, 4],
                 lineHeight: 16
               },
               b: {
                 // verticalAlign: 'top',
                 align: 'center',
-                fontSize: 10,
+                padding: [0, 4],
+                fontSize: 13,
                 color: 'rgba(255, 255, 255)'
               },
               c: {

src/views/OperationalOverview/components/storageCockpitArea.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2020-12-29 16:37:56
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-03 08:58:07
+ * @LastEditTime: 2022-11-08 16:06:39
  * @Description:
 -->
 <template>
@@ -10,20 +10,31 @@
     <div
       v-for="i in areaArr"
       :key="i"
-      :style="{ height: 135 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
+      :style="{ height: 135 * beilv + 'px',width: 730 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
       class="area"
     >
       <el-row>
-        <el-col :span="1"><div class="areaName">{{ i }}</div></el-col>
+        <el-col :span="1">
+          <div class="areaName" :style="{ fontSize: 24 * beilv + 'px',lineHeight: 40 * beilv + 'px', marginTop: 20 * beilv + 'px' }">{{ i }}</div>
+        </el-col>
         <el-col :span="23">
           <div class="locationFlex">
             <div
               v-for="l in 72"
               :key="l"
-              :class="l>Math.round(Math.random()*100)?'waring':''"
-              :style="{ marginRight: 6 * beilv + 'px',marginTop: 2 * beilv + 'px',marginBottom: 1 * beilv + 'px',width: 30 * beilv + 'px',height: 28 * beilv + 'px'}"
+              :class="l > Math.round(Math.random() * 100) ? 'waring' : ''"
+              :style="{
+                marginRight: 6 * beilv + 'px',
+                marginTop: 2 * beilv + 'px',
+                marginBottom: 1 * beilv + 'px',
+                height: 28 * beilv + 'px',
+                lineHeight: 28 * beilv + 'px',
+                fontSize: 12 * beilv + 'px'
+              }"
               class="location"
-            >{{ l }}</div>
+            >
+              {{ l }}
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -53,33 +64,29 @@ export default {
 
 <style scoped>
 .area {
-  background-image: linear-gradient(to right, rgba(59, 76, 118,0.6), transparent);
+  background-image: linear-gradient(to right, rgba(59, 76, 118, 0.6), transparent);
   background-size: 100% 100%;
   padding: 5px 0;
   padding-left: 15px;
   text-align: center;
   border-radius: 4px;
-  border: 1px dotted #5EC3D8;
+  border: 1px dotted #5ec3d8;
 }
 .areaName {
-  margin-top: 100%;
   font-weight: 600;
-  font-size: 24px;
-  line-height: 30px;
 }
-.locationFlex{
+.locationFlex {
   margin-left: 25px;
   display: flex;
   flex-wrap: wrap;
   align-content: space-between;
 }
-.location{
+.location {
   background: #63cf74;
+  width: 4.5%;
   border-radius: 4px;
-  font-size: 12px;
-  line-height: 25px;
 }
-.waring{
-  background: #FF5D6B;
+.waring {
+  background: #ff5d6b;
 }
 </style>

src/views/OperationalOverview/storageCockpit.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-03 16:03:03
+ * @LastEditTime: 2022-11-08 15:50:35
  * @Description:
 -->
 <template>
@@ -20,7 +20,7 @@
       <el-button
         type="text"
         class="title-button"
-        :style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
+        :style="{ right: 9 * beilv + 'px', top: 37 * beilv + 'px',fontSize: 35 * beilv + 'px' }"
         @click="changeFullScreen"
       >
         <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
@@ -126,7 +126,7 @@
                   <new-pie
                     :id="'pie-chart1'"
                     :show-center-title="true"
-                    :legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
+                    :legend-config="{ left: '2%', top: '30%', itemGap: 10 }"
                     :series-data="legendData1"
                     :beilv="beilv"
                     :height="226"
@@ -144,7 +144,7 @@
                     :height="226"
                     :beilv="beilv"
                   />
-                  <div class="barDiv" :style="{width: 345* beilv + 'px'}" />
+                  <div class="barDiv" :style="{width: 355* beilv + 'px'}" />
                 </div>
                 <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}">
                   <span v-html="titleLeftSVG" />
@@ -155,7 +155,7 @@
                   <new-pie
                     :id="'pie-chart3'"
                     :show-center-title="true"
-                    :legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
+                    :legend-config="{ left: '2%', top: '30%', itemGap: 10 }"
                     :series-data="legendData3"
                     :beilv="beilv"
                     :height="226"
@@ -616,7 +616,6 @@ export default {
     text-align: center;
     .title-button {
       color: #00fff0;
-      font-size: 32px;
       position: absolute;
     }
   }
@@ -634,7 +633,7 @@ export default {
 }
 .leftText{
   display: inline-block;
-  width: 100px;
+  width: 40%;
   text-align: right;
 }
 .rightText{
@@ -648,14 +647,13 @@ export default {
   border-radius: 4px;
 }
 .barDiv {
-  height: 46px;
+  height: 40px;
   opacity: 0.5;
   position: absolute;
   bottom: 40px;
   left:55px;
   transform: skewX(-30deg);
   background: linear-gradient(180deg, rgba(59, 76, 118, 0) 0%, #49fbd6 100%);
-  border: 1px solid #3c7080;
 }
 .now-team-title {
   margin: 0;