From 10e7ec7268df03db7c4a3475b806785c512a538c Mon Sep 17 00:00:00 2001
From: zwq <zwq229436@163.com>
Date: Thu, 24 Nov 2022 16:19:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A9=BE=E9=A9=B6=E8=88=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  18 +
 .../OperationalOverview/components/newPie.vue |  41 +-
 .../components/storageCockpitArea.vue         |  67 ++--
 .../OperationalOverview/storageCockpit.vue    | 368 ++++++++++++------
 4 files changed, 327 insertions(+), 167 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 13bde7b..70155a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,10 @@
+<!--
+ * @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 />
@@ -7,7 +14,18 @@
 <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>
diff --git a/src/views/OperationalOverview/components/newPie.vue b/src/views/OperationalOverview/components/newPie.vue
index de3f0e5..eccc111 100644
--- a/src/views/OperationalOverview/components/newPie.vue
+++ b/src/views/OperationalOverview/components/newPie.vue
@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-17 16:35:33
+ * @LastEditTime: 2022-11-24 16:17:09
  * @Description:
 -->
 <template>
@@ -171,7 +171,6 @@ export default {
         },
         // 默认的series配置
         series: {
-          center: ['50%', '55%'],
           radius: ['50%', '70%'],
           silent: true,
           avoidLabelOverlap: false,
@@ -196,8 +195,18 @@ export default {
     }
   },
   mounted() {
+    window.addEventListener('resize', () => {
+      if (this.chart) {
+        this.chart.resize()
+        this.$nextTick(() => {
+          // 重新绘制文本大小
+          this.initChart()
+        })
+      }
+    })
     this.$nextTick(() => {
       this.initChart()
+      this.chart.resize()
     })
   },
   beforeDestroy() {
@@ -213,23 +222,24 @@ export default {
       this.chart.setOption({
         title: this.showCenterTitle
           ? {
-            text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
-            subtext: '总共',
-            top: '48%',
-            left: '49%',
+            text: `${this.seriesData.reduce((pre, cur) => pre + cur.value, 0)}\n{name|总共}`,
+            top: 'center',
+            left: '48%',
             textAlign: 'center',
-            itemGap: 5,
             textStyle: {
               color: '#fff',
               fontSize: 26 * this.beilv,
               fontWeight: 400,
-              lineHeight: 15
-            },
-            subtextStyle: {
-              color: 'rgba(255, 255, 255, 0.7)',
-              fontWeight: 400,
-              fontSize: 14 * this.beilv,
-              lineHeight: 20
+              lineHeight: 15 * this.beilv,
+              rich: {
+                name: {
+                  color: 'rgba(255, 255, 255, 0.7)',
+                  fontWeight: 400,
+                  textAlign: 'center',
+                  fontSize: 14 * this.beilv,
+                  lineHeight: 20 * this.beilv
+                }
+              }
             }
           }
           : {},
@@ -262,7 +272,8 @@ export default {
               normal: {
                 label: {
                   show: true,
-                  fontSize: 14 * this.beilv,
+                  fontSize: 15 * this.beilv,
+                  lineHeight: 18,
                   formatter: '{d}%\n{name|{b}}',
                   rich: {
                     name: {
diff --git a/src/views/OperationalOverview/components/storageCockpitArea.vue b/src/views/OperationalOverview/components/storageCockpitArea.vue
index a769dd8..ec94dfe 100644
--- a/src/views/OperationalOverview/components/storageCockpitArea.vue
+++ b/src/views/OperationalOverview/components/storageCockpitArea.vue
@@ -2,13 +2,18 @@
  * @Author: zwq
  * @Date: 2020-12-29 16:37:56
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-17 16:39:20
+ * @LastEditTime: 2022-11-24 15:47:14
  * @Description:
 -->
 <template>
   <div class="container">
     <div>
-      <div v-for="i in areaArr" :key="i.title" :style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }" class="box">
+      <div
+        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"
@@ -25,10 +30,10 @@
             {{ i.subtitle }}
           </div>
           <div class="locationFlex">
-            <div v-for="j in 4" :key="j+'div1'" class="finished">
+            <div v-for="j in 4" :key="j + 'div1'" class="finished">
               <div
-                v-for="(l,index) in 19"
-                :key="l+'box1'"
+                v-for="(l, index) in 19"
+                :key="l + 'box1'"
                 :class="l > Math.round(Math.random() * 80) ? 'waring' : ''"
                 :style="{
                   marginRight: 2 * beilv + 'px',
@@ -40,7 +45,7 @@
                 }"
                 class="location"
               >
-                {{ j + 4*index }}
+                {{ j + 4 * index }}
               </div>
             </div>
           </div>
@@ -50,22 +55,19 @@
     <!-- 辅材库 -->
     <div
       v-for="i in areaArr1"
-      :key="i+'div2'"
-      :style="{ height: 135 * beilv + 'px', width: 730 * beilv + 'px',marginTop: 13 * beilv + 'px', }"
+      :key="i + 'div2'"
+      :style="{ width: 730 * beilv + 'px', padding: 9 * beilv + 'px' + ' 0' }"
       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">
-        <div v-for="j in 4" :key="j+'div3'" class="Auxiliary">
+      <div v-if="i === '辅材库'" class="locationFlex" style="margin-left:0">
+        <div v-for="j in 4" :key="j + 'div3'" class="Auxiliary">
           <div
-            v-for="(l,index) in 19"
-            :key="l+'box5'"
-            :class="[num.indexOf(j + 4*index)>0 ? 'waring' : '',l===10? 'interlayer' : '']"
+            v-for="(l, index) in 19"
+            :key="l + 'box5'"
+            :class="[num.indexOf(j + 4 * index) > 0 ? 'waring' : '', l === 10 ? 'interlayer' : '']"
             :style="{
               marginRight: 2 * beilv + 'px',
               marginTop: 2 * beilv + 'px',
@@ -75,16 +77,16 @@
             }"
             class="location"
           >
-            {{ j + 4*index }}
+            {{ j + 4 * index }}
           </div>
         </div>
       </div>
       <div v-else class="locationFlex" style="margin-left:0">
-        <div v-for="j in [3,2,1]" :key="j+'div4'">
+        <div v-for="j in [3, 2, 1]" :key="j + 'div4'">
           <div
             v-for="l in 20"
-            :key="l+'box9'"
-            :class="num.indexOf(l + 4*j)>0 ? 'waring' : ''"
+            :key="l + 'box9'"
+            :class="num.indexOf(l + 4 * j) > 0 ? 'waring' : ''"
             :style="{
               marginRight: 2 * beilv + 'px',
               marginTop: 2 * beilv + 'px',
@@ -152,12 +154,23 @@ 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;
@@ -221,7 +234,7 @@ export default {
 .waring {
   background: #ff5d6b;
 }
-.box2{
+.box2 {
   background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent);
   background-size: 100% 100%;
   border: 1px dotted rgba(94, 195, 216, 0.6);
@@ -230,13 +243,13 @@ export default {
   align-items: center;
   justify-content: left;
 }
-.finished:nth-child(2){
+.finished:nth-child(2) {
   margin-bottom: 8px;
 }
-.Auxiliary:nth-child(2){
+.Auxiliary:nth-child(2) {
   margin-bottom: 8px;
 }
-.interlayer{
+.interlayer {
   margin-left: 8px;
 }
 </style>
diff --git a/src/views/OperationalOverview/storageCockpit.vue b/src/views/OperationalOverview/storageCockpit.vue
index 27c2303..1efd8e9 100644
--- a/src/views/OperationalOverview/storageCockpit.vue
+++ b/src/views/OperationalOverview/storageCockpit.vue
@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zwq
- * @LastEditTime: 2022-11-17 16:04:14
+ * @LastEditTime: 2022-11-24 16:01:46
  * @Description:
 -->
 <template>
@@ -20,7 +20,7 @@
       <el-button
         type="text"
         class="title-button"
-        :style="{ right: 9 * beilv + 'px', top: 37 * beilv + 'px',fontSize: 35 * 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" />
@@ -29,77 +29,150 @@
     </el-row>
 
     <el-row class="container-main">
-      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
+      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv">
+
         <el-col :span="8">
           <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="{ 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">CP5651696250</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">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"><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">成品库D-D区-14</span></div></el-col>
-                  </el-row>
-                </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="background:rgba(14, 32, 62, 1);border-radius:5px">
-                  <base-table
-                    :limit="10"
-                    :beilv="beilv"
-                    :show-index="false"
-                    :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="{ 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">TCP203</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">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"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><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"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><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>
-            </el-col>
-            <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">
-                  <base-table
-                    :limit="10"
-                    :beilv="beilv"
-                    :show-index="false"
-                    :table-config="OutOfEachLine.tableProps"
-                    :table-data="OutOfEachLine.list"
-                  />
-                </div>
-              </base-container>
-            </el-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">
+                        <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">CP5651696250</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">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">
+                        <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">成品库D-D区-14</span>
+                        </div>
+                      </el-col>
+                    </el-row>
+                  </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="background:rgba(14, 32, 62, 1);border-radius:5px;opacity: 0.8;">
+                    <base-table
+                      :limit="10"
+                      :beilv="beilv"
+                      :show-index="false"
+                      :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="{ 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">TCP203</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">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">
+                        <div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
+                          <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">
+                        <div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
+                          <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>
+              </el-col>
+              <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;">
+                    <base-table
+                      :limit="10"
+                      :beilv="beilv"
+                      :show-index="false"
+                      :table-config="OutOfEachLine.tableProps"
+                      :table-data="OutOfEachLine.list"
+                    />
+                  </div>
+                </base-container>
+              </el-col>
+            </div>
           </el-row>
         </el-col>
 
@@ -107,7 +180,7 @@
           <!-- 中间栏 -->
           <el-row type="flex" class="h-full flex-col">
             <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
-              <base-container :beilv="beilv">
+              <base-container :beilv="beilv" :height="958">
                 <storage-cockpit-area :beilv="beilv" />
               </base-container>
             </el-col>
@@ -118,58 +191,77 @@
           <!-- 右边栏 设备工单管理 -->
           <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="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}">
-                  <span v-html="titleLeftSVG" />
-                  <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
-                    成品库存一览
-                  </span>
-                  <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
-                  <new-pie
-                    :id="'pie-chart1'"
-                    :show-center-title="true"
-                    :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
-                    :series-data="legendData1"
-                    :beilv="beilv"
-                    :height="226"
-                  />
-                </div>
-                <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; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
-                    辅材库存一览
-                  </span>
-                  <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
-                  <new-pie
-                    :id="'pie-chart2'"
-                    :show-center-title="true"
-                    :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
-                    :series-data="legendData2"
-                    :beilv="beilv"
-                    :height="226"
-                  />
-                  <!-- <new-bar
+              <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',
+                    }"
+                  >
+                    <span v-html="titleLeftSVG" />
+                    <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
+                      成品库存一览
+                    </span>
+                    <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
+                    <new-pie
+                      :id="'pie-chart1'"
+                      :show-center-title="true"
+                      :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
+                      :series-data="legendData1"
+                      :beilv="beilv"
+                      :height="226"
+                    />
+                  </div>
+                  <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' }">
+                      辅材库存一览
+                    </span>
+                    <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
+                    <new-pie
+                      :id="'pie-chart2'"
+                      :show-center-title="true"
+                      :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
+                      :series-data="legendData2"
+                      :beilv="beilv"
+                      :height="226"
+                    />
+                    <!-- <new-bar
                     :name-list="clNameList"
                     :data-list="clDataList"
                     :height="226"
                     :beilv="beilv"
                   />
                   <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" />
-                  <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
-                    备件库存一览
-                  </span>
-                  <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
-                  <new-pie
-                    :id="'pie-chart3'"
-                    :show-center-title="true"
-                    :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
-                    :series-data="legendData3"
-                    :beilv="beilv"
-                    :height="226"
-                  />
+                  </div>
+                  <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' }">
+                      备件库存一览
+                    </span>
+                    <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
+                    <new-pie
+                      :id="'pie-chart3'"
+                      :show-center-title="true"
+                      :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
+                      :series-data="legendData3"
+                      :beilv="beilv"
+                      :height="226"
+                    />
+                  </div>
                 </div>
               </base-container>
             </el-col>
@@ -691,7 +783,7 @@ export default {
     }
   }
   .container-main {
-    padding: 16px;
+    padding: 16px 8px;
   }
 }
 .inTest {
@@ -702,18 +794,44 @@ export default {
   background: url('../../assets/img/OperationalOverview/矩形@2x(1).png') no-repeat;
   background-size: 100% 100%;
 }
-.leftText{
+.leftText {
   display: inline-block;
   width: 40%;
   text-align: right;
 }
-.rightText{
-  color:rgba(255, 255, 255, 0.6)
+.rightText {
+  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;
 }
@@ -722,7 +840,7 @@ export default {
   opacity: 0.5;
   position: absolute;
   bottom: 40px;
-  left:55px;
+  left: 55px;
   transform: skewX(-30deg);
   background: linear-gradient(180deg, rgba(59, 76, 118, 0) 0%, #49fbd6 100%);
 }
@@ -797,7 +915,7 @@ export default {
 
 <style lang="scss" scoped>
 .h-full {
-  height: calc(100vh - 150px);
+  height: calc(100vh - 110px * var(--beilv));
 }
 
 .flex-col {
-- 
2.45.2