src/App.vue

@@ -1,10 +1,3 @@
-<!--
- * @Author: zwq
- * @Date: 2022-10-20 09:22:39
- * @LastEditors: zwq
- * @LastEditTime: 2022-11-24 10:37:57
- * @Description:
--->
 <template>
   <div id="app">
     <router-view />
@@ -14,18 +7,7 @@
 <script>
 export default {
   name: 'App',
-  data() {
-    return {
-      beilv: 1
-    }
-  },
   mounted() {
-    this.beilv = document.body.offsetWidth / 1920
-    document.documentElement.style.setProperty('--beilv', this.beilv)
-    window.addEventListener('resize', () => {
-      this.beilv = document.body.offsetWidth / 1920
-      document.documentElement.style.setProperty('--beilv', this.beilv)
-    })
   }
 }
 </script>

src/views/OperationalOverview/components/newPie.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-24 16:17:09
+ * @LastEditTime: 2022-11-17 16:35:33
  * @Description:
 -->
 <template>
@@ -171,6 +171,7 @@ export default {
         },
         // 默认的series配置
         series: {
+          center: ['50%', '55%'],
           radius: ['50%', '70%'],
           silent: true,
           avoidLabelOverlap: false,
@@ -195,18 +196,8 @@ export default {
     }
   },
   mounted() {
-    window.addEventListener('resize', () => {
-      if (this.chart) {
-        this.chart.resize()
-        this.$nextTick(() => {
-          // 重新绘制文本大小
-          this.initChart()
-        })
-      }
-    })
     this.$nextTick(() => {
       this.initChart()
-      this.chart.resize()
     })
   },
   beforeDestroy() {
@@ -222,24 +213,23 @@ export default {
       this.chart.setOption({
         title: this.showCenterTitle
           ? {
-            text: `${this.seriesData.reduce((pre, cur) => pre + cur.value, 0)}\n{name|总共}`,
+            text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
-            top: 'center',
+            subtext: '总共',
-            left: '48%',
+            top: '48%',
+            left: '49%',
             textAlign: 'center',
+            itemGap: 5,
             textStyle: {
               color: '#fff',
               fontSize: 26 * this.beilv,
               fontWeight: 400,
-              lineHeight: 15 * this.beilv,
+              lineHeight: 15
-              rich: {
+            },
-                name: {
+            subtextStyle: {
               color: 'rgba(255, 255, 255, 0.7)',
               fontWeight: 400,
-                  textAlign: 'center',
               fontSize: 14 * this.beilv,
-                  lineHeight: 20 * this.beilv
+              lineHeight: 20
-                }
-              }
             }
           }
           : {},
@@ -272,8 +262,7 @@ export default {
               normal: {
                 label: {
                   show: true,
-                  fontSize: 15 * this.beilv,
+                  fontSize: 14 * this.beilv,
-                  lineHeight: 18,
                   formatter: '{d}%\n{name|{b}}',
                   rich: {
                     name: {

src/views/OperationalOverview/components/storageCockpitArea.vue

@@ -2,18 +2,13 @@
  * @Author: zwq
  * @Date: 2020-12-29 16:37:56
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-24 15:47:14
+ * @LastEditTime: 2022-11-17 16:39:20
  * @Description:
 -->
 <template>
   <div class="container">
     <div>
-      <div
+      <div v-for="i in areaArr" :key="i.title" :style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }" class="box">
-        v-for="i in areaArr"
-        :key="i.title"
-        :style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }"
-        class="box"
-      >
         <div
           :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px' }"
           class="box-name title"
@@ -56,10 +51,13 @@
     <div
       v-for="i in areaArr1"
       :key="i+'div2'"
-      :style="{ width: 730 * beilv + 'px', padding: 9 * beilv + 'px' + ' 0' }"
+      :style="{ height: 135 * beilv + 'px', width: 730 * beilv + 'px',marginTop: 13 * beilv + 'px', }"
       class="box2"
     >
-      <div :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px', color: '#fff' }" class="box-name title">
+      <div
+        :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px',color: '#fff' }"
+        class="box-name title"
+      >
         {{ i }}
       </div>
       <div v-if="i==='辅材库'" class="locationFlex" style="margin-left:0">
@@ -154,23 +152,12 @@ export default {
       }
     }
   },
-  methods: {}
+  methods: {
+  }
 }
 </script>
 
 <style scoped>
-.container {
-  display: flex;
-  flex-flow: row wrap;
-  align-content: space-between;
-  margin: calc(16px * var(--beilv));
-  gap: calc(16px * var(--beilv));
-  position: absolute;
-  height: 95%;
-  top: 0;
-  left: 0;
-  overflow:hidden;
-}
 .box {
   border: 1px dotted rgba(94, 195, 216, 0.6);
   display: flex;

src/views/OperationalOverview/storageCockpit.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-24 16:01:46
+ * @LastEditTime: 2022-11-17 16:04:14
  * @Description:
 -->
 <template>
@@ -29,55 +29,23 @@
     </el-row>
 
     <el-row class="container-main">
-      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv">
+      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
-
         <el-col :span="8">
           <el-row type="flex" class="h-full flex-col">
-            <div class="div-box-left">
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
               <base-container :beilv="beilv" :height="190" :title="'成品入库作业'" :title-icon="'入库管理'">
                 <div :style="{ fontSize: 13 * beilv + 'px' }">
                   <el-row :style="{ marginBottom: 15 * beilv + 'px'}">
-                      <el-col :span="12">
+                    <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>
-                        <div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品编码:</span><span class="rightText">CP5651696250</span></div></el-col>
-                          <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">CP5651696250</span>
-                        </div>
-                      </el-col>
                   </el-row>
                   <el-row :style="{ marginBottom: 15 * beilv + 'px'}">
-                      <el-col :span="12">
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">入库作业号:</span><span class="rightText">RQ5055348160</span></div></el-col>
-                        <div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品规格:</span><span class="rightText">3.2-1033*2089</span></div></el-col>
-                          <span class="leftText">入库作业号:</span>
-                          <span class="rightText">RQ5055348160</span>
-                        </div>
-                      </el-col>
-                      <el-col :span="12">
-                        <div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
-                          <span class="leftText">成品规格:</span>
-                          <span class="rightText">3.2-1033*2089</span>
-                        </div>
-                      </el-col>
                   </el-row>
                   <el-row>
-                      <el-col :span="12">
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
-                        <div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
+                    <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">库位:</span><span class="rightText">成品库D-D区-14</span></div></el-col>
-                          <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">成品库D-D区-14</span>
-                        </div>
-                      </el-col>
                   </el-row>
                 </div>
               </base-container>
@@ -85,7 +53,7 @@
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
               <!-- 成品入库列队 -->
               <base-container :beilv="beilv" :height="190" :title="'成品入库列队'" :title-icon="'编组'">
-                  <div style="background:rgba(14, 32, 62, 1);border-radius:5px;opacity: 0.8;">
+                <div style="background:rgba(14, 32, 62, 1);border-radius:5px">
                   <base-table
                     :limit="10"
                     :beilv="beilv"
@@ -100,60 +68,20 @@
               <base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'">
                 <div :style="{ fontSize: 13 * beilv + 'px' }">
                   <el-row :style="{ marginBottom: 10 * beilv + 'px'}">
-                      <el-col :span="12">
+                    <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>
-                        <div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">ERP订单:</span><span class="rightText">TCP203</span></div></el-col>
-                          <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">TCP203</span>
-                        </div>
-                      </el-col>
                   </el-row>
                   <el-row :style="{ marginBottom: 10 * beilv + 'px'}">
-                      <el-col :span="12">
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">成品编码:</span><span class="rightText">CP3212128221</span></div></el-col>
-                        <div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">出库作业号:</span><span class="rightText">CQ3727367699</span></div></el-col>
-                          <span class="leftText">成品编码:</span>
-                          <span class="rightText">CP3212128221</span>
-                        </div>
-                      </el-col>
-                      <el-col :span="12">
-                        <div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
-                          <span class="leftText">出库作业号:</span>
-                          <span class="rightText">CQ3727367699</span>
-                        </div>
-                      </el-col>
                   </el-row>
                   <el-row :style="{ marginBottom: 10 * beilv + 'px'}">
-                      <el-col :span="12">
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">成品规格:</span><span class="rightText">3.2-1128*1716</span></div></el-col>
-                        <div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
-                          <span class="leftText">成品规格:</span>
-                          <span class="rightText">3.2-1128*1716</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">
+                    <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">库位:</span><span class="rightText">成品库C-C区-1</span></div></el-col>
-                        <div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
+                    <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>
-                          <span class="leftText">库位:</span>
-                          <span class="rightText">成品库C-C区-1</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>
@@ -161,7 +89,7 @@
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
               <!-- 成品出库列队 -->
               <base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'">
-                  <div style="background:rgba(14, 32, 62, 1);border-radius:5px;opacity: 0.8;">
+                <div style="background:rgba(14, 32, 62, 1);border-radius:5px">
                   <base-table
                     :limit="10"
                     :beilv="beilv"
@@ -172,7 +100,6 @@
                 </div>
               </base-container>
             </el-col>
-            </div>
           </el-row>
         </el-col>
 
@@ -180,7 +107,7 @@
           <!-- 中间栏 -->
           <el-row type="flex" class="h-full flex-col">
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
-              <base-container :beilv="beilv" :height="958">
+              <base-container :beilv="beilv">
                 <storage-cockpit-area :beilv="beilv" />
               </base-container>
             </el-col>
@@ -191,16 +118,8 @@
           <!-- 右边栏 设备工单管理 -->
           <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)'">
+              <base-container :beilv="beilv" :title="'设备工单管理'" :title-icon="'编组(1)'">
-                <div class="div-box-main">
+                <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}">
-                  <div
-                    class="div-box"
-                    :style="{
-                      textAlign: 'center',
-                      padding: 8 * beilv + 'px',
-                      paddingTop: 15 * beilv + 'px',
-                    }"
-                  >
                   <span v-html="titleLeftSVG" />
                   <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
                     成品库存一览
@@ -215,14 +134,7 @@
                     :height="226"
                   />
                 </div>
-                  <div
+                <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}">
-                    class="div-box"
-                    :style="{
-                      textAlign: 'center',
-                      padding: 8 * beilv + 'px',
-                      paddingTop: 15 * beilv + 'px',
-                    }"
-                  >
                   <span v-html="titleLeftSVG" />
                   <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
                     辅材库存一览
@@ -244,10 +156,7 @@
                   />
                   <div class="barDiv" :style="{width: 355* beilv + 'px'}" /> -->
                 </div>
-                  <div
+                <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}">
-                    class="div-box"
-                    :style="{ textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px' }"
-                  >
                   <span v-html="titleLeftSVG" />
                   <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
                     备件库存一览
@@ -262,7 +171,6 @@
                     :height="226"
                   />
                 </div>
-                </div>
               </base-container>
             </el-col>
           </el-row>
@@ -783,7 +691,7 @@ export default {
     }
   }
   .container-main {
-    padding: 16px 8px;
+    padding: 16px;
   }
 }
 .inTest {
@@ -800,38 +708,12 @@ export default {
   text-align: right;
 }
 .rightText{
-  color: rgba(255, 255, 255, 0.6);
+  color:rgba(255, 255, 255, 0.6)
-}
-.div-box-left{
-  display: flex;
-  flex-flow: row wrap;
-  align-content: space-between;
-  position: absolute;
-  height: 100%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow:hidden;
-}
-.div-box-main {
-  display: flex;
-  flex-flow: row wrap;
-  align-content: space-between;
-  margin: calc(16px * var(--beilv));
-  gap: calc(16px * var(--beilv));
-  padding-top: 4em;
-  position: absolute;
-  height: 95%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow:hidden;
 }
 .div-box {
   background: transparent;
   box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2);
+  display: inline-block;
   width: 100%;
   border-radius: 4px;
 }
@@ -915,7 +797,7 @@ export default {
 
 <style lang="scss" scoped>
 .h-full {
-  height: calc(100vh - 110px * var(--beilv));
+  height: calc(100vh - 150px);
 }
 
 .flex-col {