2022 3/3修改

ui/src/assets/styles/index.scss

@@ -298,7 +298,6 @@ aside {
         display: grid;
         grid-template-columns: repeat(2, 50%);
       }
-
       .frist-content-box {
         display: grid;
         grid-template-columns: 4fr 3fr 6fr 3fr;

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

@@ -5,7 +5,7 @@
         <span style="color:#5cd9e8">
           <icon name="chart-area"></icon>
         </span>
-        <div class="d-flex">
+        <div class="d-flex" id="weizhi">
           <span class="fs-xl text mx-2">天然气平衡</span>
           <div class="decoration2">
             <dv-decoration-2 :reverse="true" style="width:5px;height:480px;" />
@@ -35,6 +35,7 @@
       <div>
         <bottomRightChart />
       </div>
+
     </div>
   </div>
 </template>
@@ -53,14 +54,14 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 #bottomRight {
   padding: 0.2rem 0.2rem 0;
-  height: 6.5rem;
+  height: 1.5rem;
   min-width: 3.75rem;
   border-radius: 0.0625rem;
   .bg-color-black {
-    height: 6.1875rem;
+    height: 2.1875rem;
     border-radius: 0.125rem;
   }
   .text {
@@ -85,4 +86,5 @@ export default {
     position: relative;
   }
 }
+
 </style>

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

@@ -32,8 +32,8 @@
         <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.5rem;"></div>
+        <span class="fs-xl text mx-2 mb-1" style="display: none">每日能耗状态</span>
+          <div id="naturalGasChart" style="width:100%;height:2.5rem;"></div>
       </div>
       <div class="percent">
         <div class="item bg-color-black">
@@ -201,74 +201,74 @@ export default {
   mounted() {
     this.initChart();
   },
-  methods: {
-    initChart() {
-      // 基于准备好的dom，初始化echarts实例
-      this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
-
-      this.chart.setOption({
-        color: ['#00DDFF', '#37A2FF'],
-        tooltip: {
-          trigger: 'axis',
-          type: 'category',
-        },
-        /* 标识 */
-        legend: {
-          data: ['实际', '计划'],
-          textStyle:{
-            color: '#ffffff'//字体颜色
-          }
-        },
-        /* 周围边距 */
-        grid: {
-          left: '3%',
-          right: '3%',
-          bottom: '1%',
-          top: '13%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
-            axisLabel: {//x轴文字的配置
-              show: true,
-              textStyle: {
-                color: '#ffffff',
-              }
-            },
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            axisLabel: {
-              textStyle: {
-                fontSize: 10,
-                color: '#ffffffff',
-                margin: 15
-              },
-            }
-          }
-        ],
-        series: [
-          {
-            name: this.$t('实际'),
-            type: 'line',
-            symbol: "none",
-            data: [20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 40, 10, 20, 82, 11, 34, 20, 30, 10, 20, 82, 11, 34, 20, 40, 10]
-          },
-          {
-            name: this.$t('计划'),
-            type: 'line',
-            symbol: "none",
-            data: [20, 82, 11, 24, 20, 30, 10, 20, 82, 11, 24, 20, 10, 20, 20, 32, 21, 34, 10, 30, 20, 20, 32, 21, 34, 19, 13, 20]
-          },
-        ]
-      })
-    }
-  }
+  // methods: {
+  //   initChart() {
+  //     // 基于准备好的dom，初始化echarts实例
+  //     this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
+  //
+  //     this.chart.setOption({
+  //       color: ['#00DDFF', '#37A2FF'],
+  //       tooltip: {
+  //         trigger: 'axis',
+  //         type: 'category',
+  //       },
+  //       /* 标识 */
+  //       legend: {
+  //         data: ['实际', '计划'],
+  //         textStyle:{
+  //           color: '#ffffff'//字体颜色
+  //         }
+  //       },
+  //       /* 周围边距 */
+  //       grid: {
+  //         left: '3%',
+  //         right: '3%',
+  //         bottom: '1%',
+  //         top: '13%',
+  //         containLabel: true
+  //       },
+  //       xAxis: [
+  //         {
+  //           type: 'category',
+  //           boundaryGap: false,
+  //           data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+  //           axisLabel: {//x轴文字的配置
+  //             show: true,
+  //             textStyle: {
+  //               color: '#ffffff',
+  //             }
+  //           },
+  //         }
+  //       ],
+  //       yAxis: [
+  //         {
+  //           type: 'value',
+  //           axisLabel: {
+  //             textStyle: {
+  //               fontSize: 10,
+  //               color: '#ffffffff',
+  //               margin: 15
+  //             },
+  //           }
+  //         }
+  //       ],
+  //       series: [
+  //         {
+  //           name: this.$t('实际'),
+  //           type: 'line',
+  //           symbol: "none",
+  //           data: [20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 40, 10, 20, 82, 11, 34, 20, 30, 10, 20, 82, 11, 34, 20, 40, 10]
+  //         },
+  //         {
+  //           name: this.$t('计划'),
+  //           type: 'line',
+  //           symbol: "none",
+  //           data: [20, 82, 11, 24, 20, 30, 10, 20, 82, 11, 24, 20, 10, 20, 20, 32, 21, 34, 10, 30, 20, 20, 32, 21, 34, 19, 13, 20]
+  //         },
+  //       ]
+  //     })
+  //   }
+  // }
 };
 </script>
 

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
+    <div id="bottomRightChart" style="width:6rem;height:3rem;"></div>
   </div>
 </template>
 
@@ -51,151 +51,226 @@ export default {
 
       }
 
-      // 颜色设置
-      let color = {
-        linearYtoG: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 1,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0,
-              color: "#f5b44d"
-            },
-            {
-              offset: 1,
-              color: "#28f8de"
-            }
-          ]
-        },
-        linearGtoB: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 1,
-          y2: 0,
-          colorStops: [
-            {
-              offset: 0,
-              color: "#43dfa2"
-            },
-            {
-              offset: 1,
-              color: "#28f8de"
-            }
-          ]
-        },
-        linearBtoG: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 1,
-          y2: 0,
-          colorStops: [
-            {
-              offset: 0,
-              color: "#1c98e8"
-            },
-            {
-              offset: 1,
-              color: "#28f8de"
-            }
-          ]
-        },
-        areaBtoG: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0,
-              color: "rgba(35,184,210,.2)"
-            },
-            {
-              offset: 1,
-              color: "rgba(35,184,210,0)"
-            }
-          ]
-        }
-      };
+      // // 颜色设置
+      // let color = {
+      //   linearYtoG: {
+      //     type: "linear",
+      //     x: 0,
+      //     y: 0,
+      //     x2: 1,
+      //     y2: 1,
+      //     colorStops: [
+      //       {
+      //         offset: 0,
+      //         color: "#f5b44d"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "#28f8de"
+      //       }
+      //     ]
+      //   },
+      //   linearGtoB: {
+      //     type: "linear",
+      //     x: 0,
+      //     y: 0,
+      //     x2: 1,
+      //     y2: 0,
+      //     colorStops: [
+      //       {
+      //         offset: 0,
+      //         color: "#43dfa2"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "#28f8de"
+      //       }
+      //     ]
+      //   },
+      //   linearBtoG: {
+      //     type: "linear",
+      //     x: 0,
+      //     y: 0,
+      //     x2: 1,
+      //     y2: 0,
+      //     colorStops: [
+      //       {
+      //         offset: 0,
+      //         color: "#1c98e8"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "#28f8de"
+      //       }
+      //     ]
+      //   },
+      //   areaBtoG: {
+      //     type: "linear",
+      //     x: 0,
+      //     y: 0,
+      //     x2: 0,
+      //     y2: 1,
+      //     colorStops: [
+      //       {
+      //         offset: 0,
+      //         color: "rgba(35,184,210,.2)"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "rgba(35,184,210,0)"
+      //       }
+      //     ]
+      //   }
+      // };
+      // let option = {
+      //   tooltip: {
+      //     trigger: "item"
+      //   },
+      //   grid: {
+      //     left: 90,
+      //     right: 80,
+      //     bottom: 40,
+      //     top: "30%"
+      //   },
+      //   xAxis: {
+      //     type: "category",
+      //     position: "bottom",
+      //     axisLine: true,
+      //     axisLabel: {
+      //       color: "rgba(255,255,255,.8)",
+      //       fontSize: 12
+      //     },
+      //     data: weekCategory
+      //   },
+      //   // 下方Y轴
+      //   yAxis: {
+      //     name: "消耗",
+      //     nameLocation: "end",
+      //     nameGap: 24,
+      //     nameTextStyle: {
+      //       color: "rgba(255,255,255,.5)",
+      //       fontSize: 14
+      //     },
+      //     max: maxData,
+      //     splitNumber: 4,
+      //
+      //     axisLine: {
+      //       lineStyle: {
+      //         opacity: 0
+      //       }
+      //     },
+      //     splitLine: {
+      //       show: true,
+      //       lineStyle: {
+      //         color: "#fff",
+      //         opacity: 0.1
+      //       }
+      //     },
+      //     axisLabel: {
+      //       color: "rgba(255,255,255,.8)",
+      //       fontSize: 12
+      //     }
+      //   },
+      //   series: [
+      //     {
+      //       name: "",
+      //       type: "line",
+      //       smooth: true,
+      //       symbol: "emptyCircle",
+      //       symbolSize: 8,x`
+      //       itemStyle: {
+      //         normal: {
+      //           color: "#fff"
+      //         }
+      //       },
+      //       lineStyle: {
+      //         normal: {
+      //           color: "rgba(248,211,81,.7)",
+      //           width: 3
+      //         }
+      //       },
+      //       areaStyle: {
+      //         normal: {
+      //           color: color.areaBtoG
+      //         }
+      //       },
+      //       data: weekLineData,
+      //       lineSmooth: true,
+      //       markLine: {
+      //         silent: true,
+      //         data: [
+      //           {
+      //             type: "average",
+      //             name: "平均值"
+      //           }
+      //         ],
+      //         precision: 0,
+      //         label: {
+      //           normal: {
+      //             formatter: "平均值: \n {c}"
+      //           }
+      //         },
+      //         lineStyle: {
+      //           normal: {
+      //             color: "rgba(248,211,81,.7)"
+      //           }
+      //         }
+      //       },
+      //       tooltip: {
+      //         position: "top",
+      //         formatter: "{c} m",
+      //         backgroundColor: "rgba(28,152,232,.2)",
+      //         padding: 6
+      //       }
+      //     },
+      //     {
+      //       name: "占位背景",
+      //       type: "bar",
+      //       itemStyle: {
+      //         normal: {
+      //           show: true,
+      //           color: "#000",
+      //           opacity: 0
+      //         }
+      //       },
+      //       silent: true,
+      //       barWidth: "50%",
+      //       data: weekMaxData,
+      //       animation: false
+      //     }
+      //   ]
+      // };
       let option = {
         tooltip: {
           trigger: "item"
         },
-        grid: {
+          grid: {
           left: 90,
           right: 80,
           bottom: 40,
           top: "30%"
-        },
-        xAxis: {
-          type: "category",
-          position: "bottom",
-          axisLine: true,
-          axisLabel: {
-            color: "rgba(255,255,255,.8)",
-            fontSize: 12
           },
-          data: weekCategory
-        },
-        // 下方Y轴
-        yAxis: {
-          name: "消耗",
-          nameLocation: "end",
-          nameGap: 24,
-          nameTextStyle: {
-            color: "rgba(255,255,255,.5)",
-            fontSize: 14
+          xAxis: {
+            type: "category",
+            position: "bottom",
+            axisLine: true,
+            axisLabel: {
+              // color: "rgba(255,255,255,.8)",
+              fontSize: 12
+            },
+            data: weekCategory
           },
-          max: maxData,
-          splitNumber: 4,
 
-          axisLine: {
-            lineStyle: {
-              opacity: 0
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "#fff",
-              opacity: 0.1
-            }
-          },
-          axisLabel: {
-            color: "rgba(255,255,255,.8)",
-            fontSize: 12
-          }
+        yAxis: {
+          type: 'value'
         },
         series: [
           {
-            name: "",
-            type: "line",
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
             smooth: true,
-            symbol: "emptyCircle",
-            symbolSize: 8,
-            itemStyle: {
-              normal: {
-                color: "#fff"
-              }
-            },
-            lineStyle: {
-              normal: {
-                color: color.linearBtoG,
-                width: 3
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: color.areaBtoG
-              }
-            },
-            data: weekLineData,
-            lineSmooth: true,
+            symbolSize: 10,
+            color:"#28f8de",
             markLine: {
               silent: true,
               data: [
@@ -216,29 +291,9 @@ export default {
                 }
               }
             },
-            tooltip: {
-              position: "top",
-              formatter: "{c} m",
-              backgroundColor: "rgba(28,152,232,.2)",
-              padding: 6
-            }
-          },
-          {
-            name: "占位背景",
-            type: "bar",
-            itemStyle: {
-              normal: {
-                show: true,
-                color: "#000",
-                opacity: 0
-              }
-            },
-            silent: true,
-            barWidth: "50%",
-            data: weekMaxData,
-            animation: false
           }
         ]
+
       };
 
       this.chart.setOption(option);
@@ -248,6 +303,7 @@ export default {
     window.onresize = null;
   }
 };
+
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,131 @@
+<template>
+    <div>
+      <div id="bottomRightChart1" style="width:100%;height:2.5rem;">
+        <div class="bg-color-black">
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+  data() {
+    return {
+      chart:null
+    };
+  },
+  mixins: [echartMixins],
+  mounted() {
+    this.draw();
+  },
+  methods: {
+    draw() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('bottomRightChart1'))
+
+      let Option={
+        color: ['#00DDFF', '#37A2FF'],
+        tooltip: {
+          trigger: 'axis',
+          type: 'category',
+        },
+        /* 标识 */
+        legend: {
+          data: ['实际', '计划'],
+          textStyle:{
+            color: '#ffffff'//字体颜色
+          }
+        },
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+            axisLabel: {//x轴文字的配置
+              show: true,
+              textStyle: {
+                color: '#ffffff',
+              }
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              textStyle: {
+                fontSize: 10,
+                color: '#ffffffff',
+                margin: 15
+              },
+            }
+          }
+        ],
+        series: [
+          {
+            name: this.$t('实际'),
+            type: 'line',
+            symbol: "none",
+            data: [20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 40, 10, 20, 82, 11, 34, 20, 30, 10, 20, 82, 11, 34, 20, 40, 10]
+          },
+          {
+            name: this.$t('计划'),
+            type: 'line',
+            symbol: "none",
+            data: [20, 82, 11, 24, 20, 30, 10, 20, 82, 11, 24, 20, 10, 20, 20, 32, 21, 34, 10, 30, 20, 20, 32, 21, 34, 19, 13, 20]
+          },
+        ]
+      };
+      this.chart.setOption(Option);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+
+
+</script>
+
+<style lang="scss" scoped>
+#bottomRight1 {
+  padding: 0.2rem 0.2rem 0;
+  height: 6.5rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
+  .bg-color-black {
+    height: 6.1875rem;
+    border-radius: 0.125rem;
+  }
+  .text {
+    color: #c3cbde;
+  } //下滑线动态
+  .decoration2 {
+    position: absolute;
+    right: 0.125rem;
+  }
+  .chart-box {
+    margin-top: 0.2rem;
+    width: 2.125rem;
+    height: 2.125rem;
+    .active-ring-name {
+      padding-top: 0.125rem;
+    }
+  }
+  .naturalGasData {
+    display: flex;
+    justify-content: space-between;
+    float: right;
+    position: relative;
+  }
+}
+</style>

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

@@ -85,9 +85,22 @@
           <dv-border-box-13>
             <bottomLeft />
           </dv-border-box-13>
-          <dv-border-box-12>
-            <bottomRight />
-          </dv-border-box-12>
+          <div class="bototm-box1">
+            <dv-border-box-12>
+              <bottom-right />
+            </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.75rem;"><bottom-right1 /></div>
+                </div>
+              </dv-border-box-12>
+              <dv-border-box-12>
+              </dv-border-box-12>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -102,6 +115,7 @@ import centerRight2 from "./centerRight2";
 import center from "./center";
 import bottomLeft from "./bottomLeft";
 import bottomRight from "./bottomRight";
+import bottomRight1 from "./echart/bottom/bottomRightChart1"
 import '@/assets/styles/index.scss' // global css
 import '@/common/flexible.js';
 import dayjs from "dayjs";
@@ -125,7 +139,8 @@ export default {
     centerRight2,
     center,
     bottomLeft,
-    bottomRight
+    bottomRight,
+    bottomRight1
   },
   mounted() {
     this.timer = setInterval(()=>{
@@ -295,6 +310,17 @@ export default {
         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: 0.125rem;
+        display: grid;
+        grid-template-columns: repeat(2,50%);
       }
     }
   }