改造

src/components/echart/bottom/bottomRightBar.vue

@@ -44,13 +44,13 @@ export default {
         },
         dataZoom: [
           {
-            show: true,
+            show: data.aisleList[0].length > 8 ? true : false,
             type: 'slider',
             height: 20,//组件高度
             realtime: true,
             bottom: '32px',
-            start: data.aisleList[0].length > 10 ? 10 : 0,
-            end:  data.aisleList[0].length > 10 ? 16 : 50,
+            start: data.aisleList[0].length > 8 ? 10 : 0,
+            end:  data.aisleList[0].length > 8 ? 40 : 100,
             moveHandleStyle: {
               color: '#6680FF',
               borderColor: '#6680FF',

src/components/echart/center/centerChartLine.vue

 <template>
-  <div id="centerChartLine" style="width: 100%;height: 45%;"></div>
+  <div id="centerChartLine" style="width: 100%;"></div>
 </template>
 
 <script>

src/views/bottomLeft.vue

 <template>
-  <div id="bottomLeft">
-    <div>
+  <div id="bottomLeft" style="flex: 1">
+    <div style="height: 100%;">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
           <icon name="chart-bar"></icon>
@@ -9,7 +9,7 @@
           <span class="fs-xl text mx-2 headerTitle">发物计划列表</span>
         </div>
       </div>
-      <dv-scroll-board :config="config" style="width: 100%;height: 4.44rem;margin-top: 10px;" />
+      <dv-scroll-board :config="config" style="width: 100%;margin-top: 10px;height: 90%;" />
     </div>
   </div>
 </template>

src/views/center.vue

 <template>
   <div id="center">
     <div class="up">
-      <div class="item" style="height: 2.2rem;display: flex;justify-content: space-evenly">
+      <div class="item" style="display: flex;justify-content: space-evenly">
         <div>
-          <span style="font-size: 0.3875rem">库存物资总数</span>
+          <span style="font-size: 30px">库存物资总数</span>
           <dv-decoration-12 style="width: 2rem;height: 2rem;margin-top: 15px;color: #fff" :color="['#046DB5', '#046DB5']">
-            <span style="font-size: 0.6rem;color: rgb(61,231,201)">{{ amount }}</span><span style="color: rgb(61,231,201);font-size: 0.56rem;margin-left: 10px;">件</span></dv-decoration-12>
+            <span style="font-size: 32px;color: rgb(61,231,201)">{{ amount }}</span><span style="color: rgb(61,231,201);font-size: 32px;margin-left: 10px;">件</span></dv-decoration-12>
         </div>
         <div>
-          <span style="font-size: 0.3875rem;">品种总数</span>
-          <dv-border-box-8 style="width: 2rem;height: 2rem;margin-top: 15px;color: #fff;" >
-            <div style="font-size: 0.6rem;color: rgb(61,231,201);height: 100%;width: 100%;display: flex;justify-content: center;align-items: center">
+          <span style="font-size: 30px;">品种总数</span>
+          <dv-border-box-8 style="width: 100%;height: 2rem;margin-top: 15px;color: #fff;" >
+            <div style="font-size: 32px;color: rgb(61,231,201);height: 100%;width: 140px;display: flex;justify-content: center;align-items: center">
               {{ categoryAmount }} 种
             </div>
           </dv-border-box-8>
         </div>
 
       </div>
-      <div class="item" style="height: 1.2rem;margin-top: 0.30rem;">
-        <span style="font-size: 0.3075rem;display: block;margin-top: 20px">本年度收发总数</span>
-        <div style="display: flex;">
-          <span style="font-size: 0.3075rem;margin-top: 45px;display: block;width: 20%;text-align: center;">收物:</span>
-          <dv-digital-flop :config="inAmount" style="height:1.325rem;width: 30%" />
-          <span style="font-size: 0.3075rem;margin-top: 45px;display: block;width: 20%;text-align: center;">发物:</span>
-          <dv-digital-flop :config="outAmount" style="height:1.325rem;width: 30%" />
+      <div class="item">
+        <span style="font-size: 30px;display: block;margin-top: 10px">本年度收发总数</span>
+        <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px">
+          <span style="font-size: 30px;display: block;width: 20%;text-align: center;">收物:</span>
+          <dv-digital-flop :config="inAmount" style="height:70px;width: 30%" />
+          <span style="font-size: 30px;display: block;width: 20%;text-align: center;">发物:</span>
+          <dv-digital-flop :config="outAmount" style="height:70px;width: 30%" />
         </div>
 
       </div>
     </div>
-    <div class="extra" style="margin-top: 0.35rem;">
-      <div class="item">
-      <span style="font-size: 0.22rem;">垛位总数</span>
-      <span style="margin-left: 38px;color: #03a9f4;font-size: 0.22rem;font-weight: 700;">{{ rackAmount }}</span>
+    <div class="extra" style="margin-top: 8px;height: 50px;">
+      <div class="item" style="display: flex;align-items: center;">
+      <span style="font-size: 24px;margin-left: 0.14rem">垛位总数</span>
+      <span style="margin-left: 30px;color: #03a9f4;font-size: 24px;font-weight: 700;">{{ rackAmount }}</span>
       </div>
     </div>
     <div class="down">
       <div class="leftNm" style="flex:0.8">
         <div class="item">
           <span>工作垛位</span>
-          <span style="margin-left: 45px;font-size: 0.22rem;color: #03a9f4;">{{ workRackAmount }}</span>
+          <span style="margin-left: 45px;font-size: 24px;color: #03a9f4;">{{ workRackAmount }}</span>
         </div>
         <div class="item">
           <span>有货垛位</span>
-          <span style="margin-left: 45px;font-size: 0.22rem;color: #03a9f4;">{{ usedRackAmount }}</span>
+          <span style="margin-left: 45px;font-size: 24px;color: #03a9f4;">{{ usedRackAmount }}</span>
         </div>
         <div class="item">
           <span>无货垛位</span>
-          <span style="margin-left: 45px;font-size: 0.22rem;color: #03a9f4;">{{ nullRackAmount }}</span>
+          <span style="margin-left: 45px;font-size: 24px;color: #03a9f4;">{{ nullRackAmount }}</span>
         </div>
       </div>
       <div class="percent" style="flex:1.2">
@@ -103,7 +103,7 @@ export default {
           number: [res.data.stockVo.inAmount],
           content: "{nt}件",
           style: {
-            fontSize: 20,
+            fontSize: 22,
             fill: '#3de7c9'
           }
         }
@@ -111,7 +111,7 @@ export default {
           number: [res.data.stockVo.outAmount],
           content: "{nt}件",
           style: {
-            fontSize: 20,
+            fontSize: 22,
             fill: '#3de7c9'
           }
         }
@@ -171,7 +171,7 @@ export default {
         width: 100%;
         // height: 15%;
         div {
-          font-size: 0.3rem;
+          font-size: 28px;
           line-height: 30px;
           margin-left: 0.14rem;
         }
@@ -197,7 +197,7 @@ export default {
       width: 100%;
       height: 20%;
       span {
-        font-size: 0.25rem;
+        font-size: 20px;
         line-height: 0.8rem;
         margin-left: 0.14rem;
       }

src/views/centerLeft1.vue

 <template>
-  <div id="centreLeft1">
-    <div>
+  <div id="centreLeft1" style="flex: 1">
+    <div style="height: 100%;">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
           <icon name="chart-line"></icon>
@@ -9,8 +9,7 @@
           <span class="fs-xl text mx-2 headerTitle">收物计划列表</span>
         </div>
       </div>
-      <dv-scroll-board :config="config" style="width: 100%;height: 4.44rem;margin-top: 10px;" />
-      <dv-decoration-2 style="height:10px;" />
+      <dv-scroll-board :config="config" ref="scrollBoard" style="width: 100%;margin-top: 10px;height: 90%;" />
     </div>
   </div>
 </template>

src/views/centerLeft2.vue

 <template>
-  <div id="centreLeft2">
+  <div id="centreLeft2" style="display: flex;flex-direction: column;">
     <div class="percent">
       <div class="poItem">
         <span v-if="currentData && currentData.length > 0">{{currentData[0].name}}</span>
@@ -30,7 +30,7 @@
         <dv-water-level-pond :config="water2" style="width: 1.5rem; height: 1.5rem;margin-left: 30px;" />
       </div>
     </div>
-    <centerChartLine ref="ccl" style="margin-top: 10px;"/>
+    <centerChartLine ref="ccl" style="margin-top: 10px;flex-grow: 1;"/>
   </div>
 </template>
 

src/views/centerRight1.vue

 <template>
-  <div id="centreRight1">
-    <div>
+  <div id="centreRight1" style="flex: 1">
+    <div style="height: 100%;">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
           <icon name="chart-line"></icon>
@@ -9,12 +9,9 @@
           <span class="fs-xl text mx-2 headerTitle">作业队列管理</span>
         </div>
       </div>
-      <div class="d-flex jc-center body-box">
-        <dv-scroll-board :config="config" style="width: 100%;height: 3.2rem"/>
+      <dv-scroll-board :config="config" style="width: 100%;height: 90%;"/>
     </div>
   </div>
-    <dv-decoration-2 style="height:10px;" />
-  </div>
 </template>
 
 <script>
@@ -54,7 +51,7 @@ export default {
           oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行
           evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行
           index: false,
-          columnWidth: [100,100,150],
+          columnWidth: [100,100,100],
           align: ["center"]
         }
       }) 

src/views/centerRight2.vue

 <template>
-  <div id="centreRight2">
-    <div>
+  <div id="centreRight2" style="flex: 1">
+    <div style="height: 100%;">
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
           <icon name="align-left"></icon>
         </span>
         <span class="fs-xl text mx-2 headerTitle">库内物资排行</span>
       </div>
-      <dv-capsule-chart :config="config"  style="width: 90%;height: 3.4rem" />
+      <dv-capsule-chart :config="config"  style="width: 90%;height: 90%;" />
     </div>
   </div>
 </template>

src/views/index.vue

@@ -28,13 +28,14 @@
 
           <dv-border-box-1 class="main-container">
             <dv-border-box-10 class="left-chart-container">
-              <div style="cursor: pointer;font-size: 0.5rem;width: 5.1rem;height: 1.225rem;line-height: 0.645rem; text-align: center;">
+              <div style="cursor: pointer;font-size: 0.5rem;height: 1.225rem;line-height: 0.645rem; text-align: center !important;">
                 <span class="react-before"></span>
                 <span class="text" style="display: block;">{{dateYear}}</span>
                 <span class="text" style="display: block;">{{dateDay}}</span>
               </div>
               <dv-decoration-2 style="height:10px;" />
               <centerLeft1 />
+              <dv-decoration-2 style="height:10px;" />
               <bottomLeft />
             </dv-border-box-10>
 
@@ -52,6 +53,7 @@
                 <div class="rmctc-right-container" style="flex:1">
                   <dv-border-box-10 class="rmctc-chart-1">
                     <centerRight1 />
+                    <dv-decoration-2 style="height:10px;" />
                     <centerRight2 />
                   </dv-border-box-10>
                 </div>