李扬

ui/src/views/monitor/elec/bottomRight.vue

@@ -5,6 +5,7 @@
         <span style="color:#5cd9e8">
           <icon name="chart-area"></icon>
         </span>
+
         <div class="d-flex">
           <span class="fs-xl text mx-2">天然气平衡</span>
           <div class="decoration2">
@@ -12,30 +13,38 @@
           </div>
         </div>
       </div>
-      <div class="naturalGasData">
-        <div>
-          <p class="ml-3 colorBlue fw-b">电厂</p>
-          <div>
-            <div class="fontElec">853.0</div>
+      <div style="display:flex;flex-direction:row">
+        <div style="flex: 3">
+          <bottomRightChart />
+        </div>
+      <div class="naturalGasData" style="flex: 1">
+        <div style="">
+          <div style="display:flex;flex-direction:row; margin-bottom: 30px">
+            <p class="ml-3 colorBlue fw-b">电厂</p>
+            <div class="fontElec1">853.0</div>
           </div>
         </div>
-        <div>
+        <div style="display:flex;flex-direction:row; margin-bottom: 30px">
           <p class="ml-3 colorBlue fw-b">合成器</p>
           <div>
-            <div class="fontElec">53.0</div>
+            <div class="fontElec1">53.0</div>
           </div>
         </div>
-        <div>
+        <div style="display:flex;flex-direction:row; margin-bottom: 30px">
           <p class="ml-3 colorBlue fw-b">剩余U2</p>
           <div>
-            <div class="fontElec">145.0</div>
+            <div class="fontElec1">145.0</div>
+          </div>
+        </div>
+        <div style="display:flex;flex-direction:row; margin-bottom: 30px">
+          <p class="ml-3 colorBlue fw-b">剩余量</p>
+          <div style="float: top">
+            <div class="fontElec1">15.0</div>
           </div>
         </div>
-      </div>
-      <div>
-        <bottomRightChart />
       </div>
 
+      </div>
     </div>
   </div>
 </template>
@@ -57,11 +66,11 @@ export default {
 <style lang="scss" scoped>
 #bottomRight {
   padding: 0rem 0rem 0rem;
-  height: 1.5rem;
+  height: 3.5rem;
   min-width: 3.75rem;
   border-radius: 0.0625rem;
-  top:-50 !important;
-  left:-40 !important;
+  //top:-50 !important;
+  //left:-40 !important;
   .bg-color-black {
     height: 3.1875rem;
     border-radius: 0.125rem;
@@ -75,18 +84,24 @@ export default {
   }
   .chart-box {
     margin-top: 0.2rem;
-    width: 2.125rem;
+    width: 4.125rem;
     height: 2.125rem;
     .active-ring-name {
       padding-top: 0.125rem;
     }
   }
   .naturalGasData {
-    display: flex;
     justify-content: space-between;
     float: right;
     position: relative;
   }
+  .fontElec1 {
+    width:100px;
+    margin-left: 0.3rem;
+    color: #cfe5ea;
+    font:30px/15px 'ds-digitalbold';
+    text-align:center;
+  }
 }
 
 </style>

ui/src/views/monitor/elec/center.vue

@@ -29,13 +29,28 @@
       <centerChart class="percentNum" :id="rate[4].id" :tips="rate[4].tips" :colorObj="rate[4].colorData" />
     </div>
     <div class="down">
+<!--      <div class="ranking bg-color-black">-->
+<!--        <span style="color:#5cd9e8">-->
+<!--          <icon name="align-left"></icon>-->
+<!--        </span>-->
+<!--        <span class="fs-xl text mx-2 mb-1" style="display:block">每日能耗状态</span>-->
+<!--          <div id="naturalGasChart" style="width:100%;height:2.5rem;"></div>-->
+<!--      </div>-->
+
       <div class="ranking bg-color-black">
-        <span style="color:#5cd9e8">
-          <icon name="align-left"></icon>
-        </span>
-        <span class="fs-xl text mx-2 mb-1" style="display:block">每日能耗状态</span>
+        <div class="d-flex pt-2 pl-2">
+                <span style="color:#5cd9e8">
+                  <icon name="chart-bar"></icon>
+                </span>
+          <div class="d-flex">
+            <span class="fs-xl text mx-2">每日能耗状态</span>
+          </div>
+        </div>
+        <div>
           <div id="naturalGasChart" style="width:100%;height:2.5rem;"></div>
+        </div>
       </div>
+
       <div class="percent">
         <div class="item bg-color-black">
           <svg-icon icon-class="alarm" class="alarmIcon" />

ui/src/views/monitor/elec/echart/bottom/bottomRightChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="bottomRightChart" style="width:6rem;height:3rem;"></div>
+    <div id="bottomRightChart" style="width:100%;height:3.5rem;top: -20px"></div>
   </div>
 </template>
 

ui/src/views/monitor/elec/echart/bottom/bottomRightChart1.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-      <div id="bottomRightChart1" style="width:100%;height:2.5rem;">
+      <div id="bottomRightChart1" style="width:100%;height:2.6rem;">
       </div>
     </div>
 </template>

ui/src/views/monitor/elec/echart/bottom/bottomRightChart2.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="bottomRightChart2" style="width:100%;height:2.5rem;">
+    <div id="bottomRightChart2" style="width:100%;height:3.2rem;">
     </div>
   </div>
 </template>

ui/src/views/monitor/elec/elecindex.vue

@@ -96,17 +96,33 @@
             </dv-border-box-12>
             <div class="bototm-box2">
               <dv-border-box-12>
-                <div class="ranking bg-color-black">
-                  <span style="color:#5cd9e8"><icon name="align-left"></icon></span>
-                  <span class="fs-xl text mx-2 mb-1">天然气日消耗情况</span>
-                  <div id="naturalGasChart" style="width:100%;height:2.9rem;"><bottom-right1 /></div>
+                <div class="bg-color-black">
+                  <div class="d-flex pt-2 pl-2">
+                <span style="color:#5cd9e8">
+                  <icon name="chart-bar"></icon>
+                </span>
+                    <div class="d-flex">
+                      <span class="fs-xl text mx-2">天然气日消耗情况</span>
+                    </div>
+                  </div>
+                  <div>
+                      <bottom-right1 />
+                  </div>
                 </div>
               </dv-border-box-12>
               <dv-border-box-12>
-                <div class="ranking bg-color-black">
-                  <span style="color:#5cd9e8"><icon name="align-left"></icon></span>
-                  <span class="fs-xl text mx-2 mb-1">瞬时值</span>
-                  <div id="naturalGasChart1" style="width:100%;height:2.9rem;"><bottom-right2 /></div>
+                <div class="bg-color-black">
+                  <div class="d-flex pt-2 pl-2">
+                <span style="color:#5cd9e8">
+                  <icon name="chart-bar"></icon>
+                </span>
+                    <div class="d-flex">
+                      <span class="fs-xl text mx-2">瞬时值</span>
+                    </div>
+                  </div>
+                  <div>
+                    <bottom-right2 />
+                  </div>
                 </div>
               </dv-border-box-12>
             </div>
@@ -123,7 +139,6 @@
         <div>
           <front-elec-three></front-elec-three>
         </div>
-
       </div>
     </div>
   </div>
@@ -166,8 +181,7 @@ export default {
     bottomLeft,
     bottomRight,
     bottomRight1,
-    bottomRight2
-    bottomRight1,
+    bottomRight2,
     frontElecTwo,
     frontElecThree
   },
@@ -345,18 +359,15 @@ export default {
       }
       // 底部数据
       .bototm-box {
-        margin-top: 0.125rem;
         display: grid;
         grid-template-columns: repeat(2, 50%);
         grid-template-rows: repeat(2,100%);
       }
       .bototm-box1 {
-        margin-top: 0.125rem;
         display: grid;
         grid-template-rows: repeat(2,50%);
       }
       .bototm-box2 {
-        margin-top: 0rem;
         display: grid;
         grid-template-columns: repeat(2,50%);
       }