更新驾驶舱

src/views/OperationalOverview/components/newBar.vue

@@ -31,8 +31,8 @@ export default {
       default: 1
     },
     height: {
-      type: String,
-      default: '300px'
+      type: Number,
+      default: 300
     },
     showLegend: {
       type: Boolean,

src/views/OperationalOverview/components/newPie.vue

@@ -2,11 +2,11 @@
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
  * @LastEditors: zwq
- * @LastEditTime: 2022-10-25 09:30:47
+ * @LastEditTime: 2022-11-02 16:52:34
  * @Description:
 -->
 <template>
-  <div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
+  <div :id="id" :class="className" :style="{ height: height * beilv + 'px', width: width }" />
 </template>
 
 <script>
@@ -35,8 +35,8 @@ export default {
       default: 1
     },
     height: {
-      type: String,
-      default: '300px'
+      type: Number,
+      default: 300
     },
     showCenterTitle: {
       type: Boolean,

src/views/OperationalOverview/components/storageCockpitArea.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2020-12-29 16:37:56
  * @LastEditors: zwq
- * @LastEditTime: 2022-10-25 16:39:57
+ * @LastEditTime: 2022-11-03 08:58:07
  * @Description:
 -->
 <template>
@@ -10,7 +10,7 @@
     <div
       v-for="i in areaArr"
       :key="i"
-      :style="{ height: 135 * beilv + 'px', margin: 8 * beilv + 'px' + ' 0' }"
+      :style="{ height: 135 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
       class="area"
     >
       <el-row>
@@ -53,13 +53,13 @@ export default {
 
 <style scoped>
 .area {
-  background: url('../../../assets/img/OperationalOverview/编组36.png') no-repeat;
+  background-image: linear-gradient(to right, rgba(59, 76, 118,0.6), transparent);
   background-size: 100% 100%;
-  padding: 5px 10px;
-  margin: 3px 0;
+  padding: 5px 0;
+  padding-left: 15px;
   text-align: center;
   border-radius: 4px;
-  background-color: rgb(0, 0, 0, 0.5);
+  border: 1px dotted #5EC3D8;
 }
 .areaName {
   margin-top: 100%;
@@ -68,7 +68,7 @@ export default {
   line-height: 30px;
 }
 .locationFlex{
-  margin-left: 15px;
+  margin-left: 25px;
   display: flex;
   flex-wrap: wrap;
   align-content: space-between;

src/views/OperationalOverview/storageCockpit.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zwq
- * @LastEditTime: 2022-10-26 09:57:19
+ * @LastEditTime: 2022-11-03 10:06:28
  * @Description:
 -->
 <template>
@@ -34,14 +34,18 @@
           <el-row type="flex" class="h-full flex-col">
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
               <base-container :beilv="beilv" :height="190" :title="'成品入库作业'" :title-icon="'入库管理'">
-                <div style="width:100%">
+                <div :style="{ fontSize: 13 * beilv + 'px' }">
+                  <el-row :style="{ marginBottom: 15 * beilv + 'px'}">
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品编码:</span><span class="rightText">34394233442</span></div></el-col>
+                  </el-row>
+                  <el-row :style="{ marginBottom: 15 * beilv + 'px'}">
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">入库作业号:</span><span class="rightText">347384734</span></div></el-col>
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品规格:</span><span class="rightText">234*345*34</span></div></el-col>
+                  </el-row>
                   <el-row>
-                    <el-col :span="12"><div class="inTest"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
-                    <el-col :span="12"><div class="inTest"><span class="leftText">成品编码:</span><span class="rightText">34394233442</span></div></el-col>
-                    <el-col :span="12"><div class="inTest"><span class="leftText">入库作业号:</span><span class="rightText">347384734</span></div></el-col>
-                    <el-col :span="12"><div class="inTest"><span class="leftText">成品规格:</span><span class="rightText">234*345*34</span></div></el-col>
-                    <el-col :span="12"><div class="inTest"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
-                    <el-col :span="12"><div class="inTest"><span class="leftText">库位:</span><span class="rightText">A区34货位3层</span></div></el-col>
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">库位:</span><span class="rightText">A区34货位3层</span></div></el-col>
                   </el-row>
                 </div>
               </base-container>
@@ -49,26 +53,34 @@
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
               <!-- 成品入库列队 -->
               <base-container :beilv="beilv" :height="190" :title="'成品入库列队'" :title-icon="'编组'">
-                <base-table
-                  :limit="10"
-                  :beilv="beilv"
-                  :table-config="inAndOutOfEachLine.tableProps"
-                  :table-data="inAndOutOfEachLine.list"
-                />
+                <div style="background:rgba(14, 32, 62, 1);border-radius:5px">
+                  <base-table
+                    :limit="10"
+                    :beilv="beilv"
+                    :table-config="inAndOutOfEachLine.tableProps"
+                    :table-data="inAndOutOfEachLine.list"
+                  />
+                </div>
               </base-container>
             </el-col>
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
               <base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'">
-                <div style="width:100%">
+                <div :style="{ fontSize: 13 * beilv + 'px' }">
+                  <el-row :style="{ marginBottom: 10 * beilv + 'px'}">
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">ERP订单:</span><span class="rightText">34394233442</span></div></el-col>
+                  </el-row>
+                  <el-row :style="{ marginBottom: 10 * beilv + 'px'}">
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">成品编码:</span><span class="rightText">34394233442</span></div></el-col>
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">出库作业号:</span><span class="rightText">347384734</span></div></el-col>
+                  </el-row>
+                  <el-row :style="{ marginBottom: 10 * beilv + 'px'}">
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">成品规格:</span><span class="rightText">234*345*34</span></div></el-col>
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
+                  </el-row>
                   <el-row>
-                    <el-col :span="12"><div class="outTest"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
-                    <el-col :span="12"><div class="outTest"><span class="leftText">ERP订单:</span><span class="rightText">34394233442</span></div></el-col>
-                    <el-col :span="12"><div class="outTest"><span class="leftText">成品编码:</span><span class="rightText">34394233442</span></div></el-col>
-                    <el-col :span="12"><div class="outTest"><span class="leftText">出库作业号:</span><span class="rightText">347384734</span></div></el-col>
-                    <el-col :span="12"><div class="outTest"><span class="leftText">成品规格:</span><span class="rightText">234*345*34</span></div></el-col>
-                    <el-col :span="12"><div class="outTest"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
-                    <el-col :span="12"><div class="outTest"><span class="leftText">库位:</span><span class="rightText">A区34货位3层</span></div></el-col>
-                    <el-col :span="12"><div class="outTest"><span class="leftText">库位前置区:</span><span class="rightText">A区34货位3层</span></div></el-col>
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">库位:</span><span class="rightText">A区34货位3层</span></div></el-col>
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">库位前置区:</span><span class="rightText">A区34货位3层</span></div></el-col>
                   </el-row>
                 </div>
               </base-container>
@@ -76,12 +88,14 @@
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
               <!-- 成品入库列队 -->
               <base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'">
-                <base-table
-                  :limit="10"
-                  :beilv="beilv"
-                  :table-config="inAndOutOfEachLine.tableProps"
-                  :table-data="inAndOutOfEachLine.list"
-                />
+                <div style="background:rgba(14, 32, 62, 1);border-radius:5px">
+                  <base-table
+                    :limit="10"
+                    :beilv="beilv"
+                    :table-config="inAndOutOfEachLine.tableProps"
+                    :table-data="inAndOutOfEachLine.list"
+                  />
+                </div>
               </base-container>
             </el-col>
           </el-row>
@@ -103,9 +117,9 @@
           <el-row type="flex" class="h-full flex-col">
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
               <base-container :beilv="beilv" :title="'设备工单管理'" :title-icon="'编组(1)'">
-                <div class="div-box" style="text-align: center;">
+                <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}">
                   <span v-html="titleLeftSVG" />
-                  <span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
+                  <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
                     成品库存一览1
                   </span>
                   <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
@@ -115,26 +129,26 @@
                     :legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
                     :series-data="legendData1"
                     :beilv="beilv"
-                    :height="'220'"
+                    :height="226"
                   />
                 </div>
-                <div class="div-box" style="text-align: center;position:relative">
+                <div class="div-box" :style="{textAlign: 'center', position: 'relative', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}">
                   <span v-html="titleLeftSVG" />
-                  <span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
+                  <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
                     成品库存一览2
                   </span>
                   <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
                   <new-bar
                     :name-list="clNameList"
                     :data-list="clDataList"
-                    :height="'220'"
+                    :height="226"
                     :beilv="beilv"
                   />
-                  <div class="barDiv" :style="{width: 340* beilv + 'px'}" />
+                  <div class="barDiv" :style="{width: 345* beilv + 'px'}" />
                 </div>
-                <div class="div-box" style="text-align: center;">
+                <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}">
                   <span v-html="titleLeftSVG" />
-                  <span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
+                  <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
                     成品库存一览3
                   </span>
                   <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
@@ -144,7 +158,7 @@
                     :legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
                     :series-data="legendData3"
                     :beilv="beilv"
-                    :height="'220'"
+                    :height="226"
                   />
                 </div>
               </base-container>
@@ -596,13 +610,13 @@ export default {
   background-size: cover;
   .container-title {
     width: 100%;
-    background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
+    background: url('../../assets/img/OperationalOverview/title (2).png') no-repeat;
     background-size: 100% 100%;
-    color: #00fff0;
+    color: #fff;
     text-align: center;
     .title-button {
       color: #00fff0;
-      font-size: 20px;
+      font-size: 32px;
       position: absolute;
     }
   }
@@ -611,18 +625,12 @@ export default {
   }
 }
 .inTest {
-  font-size: 1.2em;
   background: url('../../assets/img/OperationalOverview/矩形@2x.png') no-repeat;
   background-size: 100% 100%;
-  padding: 5px 10px;
-  margin-bottom: 10px;
 }
 .outTest {
-  font-size: 1.2em;
   background: url('../../assets/img/OperationalOverview/矩形@2x(1).png') no-repeat;
   background-size: 100% 100%;
-  padding: 5px 10px;
-  margin-bottom: 10px;
 }
 .leftText{
   display: inline-block;
@@ -636,10 +644,8 @@ export default {
   background: transparent;
   box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
   display: inline-block;
-  padding: 10px;
   width: 100%;
   border-radius: 4px;
-  margin-bottom: 10px;
 }
 .barDiv {
   height: 46px;