src/views/3DOverview/components/DianChart.vue

@@ -36,11 +36,29 @@ export default {
     // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
     let data = [
       // 温度走势
-      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
+      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
+        let v = Math.floor(Math.random() * 100)
+        while (v < 30) {
+          v = Math.floor(Math.random() * 100)
+        }
+        return v
+      }),
       // 电流走势
-      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
+      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
+        let v = Math.floor(Math.random() * 100)
+        while (v < 30) {
+          v = Math.floor(Math.random() * 100)
+        }
+        return v
+      }),
       // 电压走势
-      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
+      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
+        let v = Math.floor(Math.random() * 100)
+        while (v < 30) {
+          v = Math.floor(Math.random() * 100)
+        }
+        return v
+      })
     ]
     let wendu = data[0]
     let dianliu = data[1]
@@ -52,6 +70,7 @@ export default {
         color: colors,
         legend: {
           top: 4,
+          right: 50,
           itemWidth: 8,
           itemHeight: 8,
           textStyle: {
@@ -85,10 +104,10 @@ export default {
             name: '电流/A',
             nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
             type: 'value',
-            splitNumber: 4,
+            splitNumber: 3,
             onZero: true,
             position: 'left',
-            offset: 42,
+            offset: 40,
             axisTick: { show: false },
             axisLine: {
               show: true,
@@ -112,7 +131,7 @@ export default {
             name: '电压/V',
             nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
             type: 'value',
-            splitNumber: 4,
+            splitNumber: 3,
             axisTick: { show: false },
             onZero: true,
             position: 'left',
@@ -147,7 +166,7 @@ export default {
               }
             },
             type: 'value',
-            splitNumber: 4,
+            splitNumber: 3,
             splitLine: {
               lineStyle: {
                 color: '#fff3'

src/views/3DOverview/components/LeftContentPublicConsume.vue

@@ -9,7 +9,7 @@
         <div class="content-part">
           <div class="row">
             <span class="name">纯 &nbsp;&nbsp;&nbsp;水</span>
-            <span class="diy-process-bar color-1" />
+            <span class="diy-process-bar bar-width-1 color-1" />
             <span class="amount">
               39m
               <sup>3</sup>
@@ -17,17 +17,17 @@
           </div>
           <div class="row">
             <span class="name">循环水</span>
-            <span class="diy-process-bar color-2" />
+            <span class="diy-process-bar bar-width-2 color-2" />
             <span class="amount">
-              239m
+              23m
               <sup>3</sup>
             </span>
           </div>
           <div class="row">
             <span class="name">自来水</span>
-            <span class="diy-process-bar color-3" />
+            <span class="diy-process-bar bar-width-3 color-3" />
             <span class="amount">
-              23m
+              239m
               <sup>3</sup>
             </span>
           </div>
@@ -44,25 +44,25 @@
         <div class="content-part">
           <div class="row">
             <span class="name">氧&nbsp;&nbsp;&nbsp;&nbsp;气</span>
-            <span class="diy-process-bar color-1" />
+            <span class="diy-process-bar bar-width-4 color-1" />
+            <span class="amount">
+              23Pa
+            </span>
+          </div>
+          <div class="row">
+            <span class="name">CDA</span>
+            <span class="diy-process-bar bar-width-5 color-2" />
             <span class="amount">
               39Pa
             </span>
           </div>
           <div class="row">
-            <span class="name">CDA</span>
+            <span class="name">天然气</span>
-            <span class="diy-process-bar color-2" />
+            <span class="diy-process-bar bar-width-6 color-3" />
             <span class="amount">
               239pa
             </span>
           </div>
-          <div class="row">
-            <span class="name">天然气</span>
-            <span class="diy-process-bar color-3" />
-            <span class="amount">
-              23Pa
-            </span>
-          </div>
         </div>
       </TechyBox>
     </div>
@@ -85,8 +85,9 @@
           <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
           <span>发电</span>
         </div>
-        <div style="height: 100%; flex: 1; padding: calc(8px * var(--beilv))">
+        <div style="height: 100%; flex: 1;  ">
-          <FadianChart />
+          <!-- <FadianChart /> -->
+          <DianChart />
         </div>
       </TechyBox>
     </div>
@@ -199,6 +200,25 @@ export default {
   height: 100%;
 }
 
+.bar-width-1::after {
+  width: 60%;
+}
+.bar-width-2::after {
+  width: 34%;
+}
+.bar-width-3::after {
+  width: 99%;
+}
+.bar-width-4::after {
+  width: 20%;
+}
+.bar-width-5::after {
+  width: 29%;
+}
+.bar-width-6::after {
+  width: 79%;
+}
+
 .diy-process-bar.color-1::after {
   background: linear-gradient(to right, #178be9, #67b3f2);
 }