From 59041e96d88b7b8787740cec1a690285ad6ed10c Mon Sep 17 00:00:00 2001
From: little4 <360013221@qq.com>
Date: Fri, 18 Oct 2024 16:51:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=A4=AA=E9=98=B3=E8=83=BD?=
 =?UTF-8?q?=E6=9D=BF=E6=96=B0=E9=A1=B5=E9=9D=A2=E3=80=90=E6=9C=AA=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../maintenanceOperations/solar/index.vue     | 508 +++++-------------
 .../maintenanceOperations/solar/index_v1.vue  | 388 +++++++++++++
 2 files changed, 520 insertions(+), 376 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue
index 33306214..d382a839 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue
@@ -1,388 +1,144 @@
 <template>
-    <div class="solar">
-      <div class="top">
-        <div v-for="(item,index) of titles" class="titles">
-          <img :src="require('@screen/images/solar/'+item.icon)" />
-          <div class="cont">
-            <div style="text-align: right;">{{ item.label }}</div>
-            <div class="label"><span>{{ item.value }}</span><div class="unit">{{ item.unit }}</div></div>
+  <div class="solar">
+    <div class="solar_left">
+      <div>
+        <Bg2 class="content-l-t">
+          <div class="focuse-header">
+            <div class="title">重点数据</div>
           </div>
-        </div>
-      </div>
-      <div class="solarCont">
-        <div class="left">
-          <div class="chartPanel">
-            <div class="clabel">
-              <div>今日发电统计</div>
-              <div>今日发电总计:{{chart1Total1}}度</div>
-            </div>
-            <div id="charts1" class="chart"></div>
-          </div>
-          <div class="chartPanel">
-            <div class="clabel">
-              <div>今日用电统计</div>
-              <div>今日用电总计:{{chart1Total2}}度</div>
+          <div class="content-l-t-content">
+            <div class="content-k1">
+              <div>当前累计发电量</div>
+              <div class="content-kk"><div v-for="(item,index) in titles[0].value">{{item}}</div></div>
+              <div>万度</div>
             </div>
-            <div id="charts2" class="chart"></div>
-          </div>
-          <div class="chartPanel">
-            
-            <div class="clabel">
-              <div>今日功率统计</div>
-              <div>今日容量总计:{{chart1Total3}}千瓦</div>
-            </div>
-            <div id="charts3" class="chart"></div>
-          </div>
-        </div>
-        <div class="right">
-          <Table style="width:65vw" :data="tableData" v-loading="loading"  height="calc(100vh - 300px)" >
-            <el-table-column label="序号" type="index" :index="indexMethod" width="100" align="center"
-                header-align="center" />
-            <ElTableColumn prop="stakeNumber"  width="120" label="设备桩号"></ElTableColumn>
-            <ElTableColumn prop="state" width="140"  label="充电设备运行状态">
-              <template slot-scope="scope">
-                  <span>{{ scope.row.state==='1'?'正常':'异常' }}</span>
-                </template> 
-            </ElTableColumn>
-            <ElTableColumn prop="s1" width="160" label="放电设备运行状态"></ElTableColumn>
-            <ElTableColumn prop="s2" width="120" label="充电状态"></ElTableColumn>
-            <ElTableColumn prop="s3" width="120" label="蓄电池状态"></ElTableColumn>
-            <ElTableColumn prop="s4" width="120" label="输入过流"></ElTableColumn>
-            <ElTableColumn prop="s5" width="120" label="输入电压状态"></ElTableColumn>
-            <ElTableColumn prop="s6" width="120" label="当日累计用电量"></ElTableColumn>
-            <ElTableColumn prop="s7" width="120" label="当日累计充电量"></ElTableColumn>
-            <ElTableColumn prop="s8" width="150" label="当日最低蓄电池电压"></ElTableColumn>
-          </Table>
-          <div class="footer" style="display: flex;justify-content: center;margin-top: 20px;">
-            <Pagination @current-change="initQueryTable" @size-change="onSizeChange" width="'100%'"
-              :page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum"
-              layout="total, sizes, prev, pager, next" :total="total">
-            </Pagination>
           </div>
-        </div>
+        </Bg2>
       </div>
+      <div>2</div>
+      <div>3</div>
     </div>
-  </template>
-  
-  <script>
-  
-  import request from "@/utils/request";
-  import * as echarts from "echarts";
-  import Table from '@screen/components/Table.vue';
-  import Pagination from "@screen/components/Pagination.vue";
-  export default {
-    components: { 
-      Table,
-      Pagination,
-    },
-    name: "Soler",
-    data() {
-      return {
-        titles:[
-          {icon:'total.png',label:'当年累计发电量',unit:'度',value:'-'},
-          {icon:'used.png',label:'当年累计用电量',unit:'度',value:'-'},
-          {icon:'CO2.png',label:'CO₂减排',unit:'kg',value:'-'},
-          {icon:'tree.png',label:'等效植树',unit:'棵',value:'-'},
-          {icon:'coal.png',label:'节约标准煤',unit:'kg',value:'-'},
-          {icon:'error.png',label:'放电异常设备',unit:'个',value:'-'},
-        ],
-        chart1:null,
-        chart2:null,
-        chart3:null,
-        chart1Total1:'-',
-        chart1Total2:'-',
-        chart1Total3:'-',
-        tableData:[],      
-        loading:false,
-        
-        total:0,
-        searchData: {
-          pageSize: 10,
-          pageNum: 1
-        },
-      };
-    },
-    mounted() {
-      this.initTotal();
-      this.initChart();
-      this.initQueryTable();
-    },
-    methods: {
-        //翻页时不刷新序号
-        indexMethod(index) {
-          return (
-            index + (this.searchData.pageNum - 1) * this.searchData.pageSize + 1
-          );
-        },
-      onSizeChange(pageSize) {
-        this.tableData = [];
-        this.searchData.pageSize = pageSize;
-        this.searchData.pageNum = 1;
-        this.initQueryTable();
-      },
-      initQueryTable() {
-        this.loading = true;
-        this.loading = false;
-        this.total = 0;
-        this.tableData = [
-        ]
-        //{stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
-        // request({
-        //   url: "/system/status/tablist",
-        //   method: "get",
-        //   params:{}
-        // }).then((res) => {
-        //   if (res.code == 200) {
-        //     this.loading = false;
-        //     this.total = res.total;
-        //     this.tableData = res.rows
-            
-        //   }
-        // })
-      },
-      initTotal(){
-        request({
-          url: 'business/device/properties/latestOne',
-          method: 'get'
-        }).then(result => {
-          if (result.code != 200) return;
-          this.titles[0].value= result.data.theAccumulatedChargeOfTheYear;
-          this.titles[1].value= result.data.cumulativeElectricityConsumptionInTheYear;
-          this.titles[2].value= result.data.carbonEmissionReduction;
-          this.titles[3].value= result.data.equivalentTree;
-          this.titles[4].value= result.data.standardCoal;
-        })
-        request({
-          url: 'business/device/properties/solarDeviceStatistics',
-          method: 'get'
-        }).then(result => {
-          if (result.code != 200) return;
-          this.titles[5].value= result.data.count;
-        })
-      },
-      initChart(){
-        const _chartsOptions = {
-            color:['#00bead'],
-            title: {
-              text: '度',
-              textStyle:{
-                color:'#E5E7E8',
-                fontSize: 15,
-                fontStyle:'normal'
-              },
-              top:'10px',
-              left: '10px'
-            },
-            tooltip: {
-              trigger: 'axis'
-            },
-            xAxis: {
-              type: 'category',
-              data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点',
-                    '12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],                       
-              axisLine:{
-                show:true,
-                lineStyle:{
-                  color:'#fff'
-                }
-              },
-              axisLabel: {
-                align: "center",
-                rotate: "1",
-                margin: 20,
-                textStyle: {
-                  fontSize: 10,
-                  color: "#E5E7E8",
-                }
-              },
-            },
-            yAxis: {
-              type: 'value',
-              axisLabel: {
-                show: false,
-                color: "#E5E7E8",
-                textStyle: {
-                  fontSize: 10,
-                },
-              },
-              axisLine:{
-                show:true,
-                lineStyle:{
-                  color:'#fff'
-                }
-              },
-              splitLine: {
-                show: false
-              },
-            },
-            grid: {
-              left: "40px",
-              right: "20px",
-              top: "0px",
-              bottom: "10px",
-              containLabel: true,
-            },
-            series: [
-              {
-                data: [],
-                type: 'line',
-                smooth: true
-              }
-            ]
-        }
-        if(!this.chart1){
-          this.chart1 = echarts.init(document.getElementById("charts1"));
-          let option1 = JSON.parse(JSON.stringify(_chartsOptions));
-          request({
-            url: 'business/device/properties/history/oneDay/dailyAccumulatedCharge',
-            method: 'get'
-          }).then(result => {
-            if (result.code != 200) return;
-            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-            let total = 0;
-            for(let i in result.data){
-              total += result.data[i]
-              const idx = parseInt(i.substr(11,2));
-              data[idx] = result.data[i];
-            }
-            this.chart1Total1 = total;
-            option1.series[0].data = data;
-            this.chart1.setOption(option1);
-            this.chart1.resize();
-          })
-          
-          this.chart2 = echarts.init(document.getElementById("charts2"));
-          let option2 = JSON.parse(JSON.stringify(_chartsOptions));
-          request({
-            url: 'business/device/properties/history/oneDay/cumulativeElectricityConsumptionOnTheDay',
-            method: 'get'
-          }).then(result => {
-            if (result.code != 200) return;
-            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-            let total = 0;
-            for(let i in result.data){
-              total += result.data[i]
-              const idx = parseInt(i.substr(11,2));
-              data[idx] = result.data[i];
-            }
-            this.chart1Total2 = total;
-            option2.series[0].data = data;
-            this.chart2.setOption(option2);
-            this.chart2.resize();
-          })
-          // 发电功率
-          this.chart3 = echarts.init(document.getElementById("charts3"));
-          let option3 = JSON.parse(JSON.stringify(_chartsOptions));
-          request({
-            url: 'business/device/properties/history/oneDay/generatingPower',
-            method: 'get'
-          }).then(result => {
-            if (result.code != 200) return;
-            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-            let total = 0;
-            for(let i in result.data){
-              total += result.data[i]
-              const idx = parseInt(i.substr(11,2));
-              data[idx] = result.data[i];
-            }
-            this.chart1Total3 = total;
-            option3.series[0].data = data;
-            this.chart3.setOption(option3);
-            this.chart3.resize()
-          })
-          
-        }
-        window.addEventListener("resize", () => {
-          if(this.chart1){
-            this.chart1.resize();
-            this.chart2.resize();
-            this.chart3.resize();
-          }
-        });
-      }
-    },
-  };
-  </script>
-  
-  <style rel="stylesheet/scss" lang="scss" scoped>
-    .solar{
+    <div class="solar_right">
+      223
+    </div>
+  </div>
+</template>
+
+<script>
+
+import Bg2 from "@screen/components/Decorations/bg-2.vue"
+import request from "@/utils/request";
+import * as echarts from "echarts";
+export default {
+  components: { 
+    Bg2
+  },
+  name: "Soler",
+  data() {
+    return {
+      titles:[
+        {icon:'total.png',label:'当年累计发电量',unit:'度',value:'0022.4512'},
+        {icon:'used.png',label:'当年累计用电量',unit:'度',value:'-'},
+        {icon:'CO2.png',label:'CO₂减排',unit:'kg',value:'-'},
+        {icon:'tree.png',label:'等效植树',unit:'棵',value:'-'},
+        {icon:'coal.png',label:'节约标准煤',unit:'kg',value:'-'},
+        {icon:'error.png',label:'放电异常设备',unit:'个',value:'-'},
+      ],
+      chart1:null,
+      chart2:null,
+      chart3:null,
+      chart1Total1:'-',
+      chart1Total2:'-',
+      chart1Total3:'-', 
+      loading:false,
+      
+    };
+  },
+  mounted() {
+  },
+  methods: {
+   
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .solar{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    height: 100vh;
+    .solar_left{
+      width: 480px;
+      margin-left:20px;
+      margin-top: 20px;
+      overflow: hidden;
       display: flex;
       flex-direction: column;
-      align-items: center;
-      .solarCont{
-        display: flex;
+      overflow: hidden;
+      height: 100%;
+      gap: 10px;
+    }
+    .solar_right{
+      width: 480px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      overflow: hidden;
+      height: 100%;
+    }
+  }
+
+  .content-l-t {
+  ::v-deep {
+    .BackgroundClip.bg {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+    }
+  }
+  .focuse-header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .title {
+      font-size: 24px;
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      margin-left: 30px;
+      background-image: -webkit-linear-gradient(bottom,#217176,#34adb6,  #3fd6e1);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .content-l-t-content {
+    margin-top: 10px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px 15px;
+    // justify-content: center;
+    flex:1;
+    flex-wrap: wrap;
+    .content-k1{
+      display:flex;
+      flex-direction: row;
+      .content-kk{
+        display:flex;
         flex-direction: row;
-        gap:10px;
-        width:98%;
-        .left{
-          width:calc(33% + 10px);
-          display: flex;
-          flex-direction: column;
-          gap:10px;
-          height: calc(100vh - 300px);
-          .chartPanel{
-            flex:1;
-            background:  linear-gradient(to top, #064151, #042b34);
-            display: flex;
-            flex-direction: column;
-            .clabel{
-              display: flex;
-              padding:10px;
-              justify-content: space-between;
-            }
-            .chart{
-              flex:1;
-            }
-          }
-        }
-        .right{
-          width: 68%;
-          // background: #064151;
-        }
-      }
-      .top{
-        display: flex;
-        width:98%;
-        gap:10px;
-        margin:10px 0px;
-        .titles{
-          padding:30px 15px;
-          width:17%;
-          background:  linear-gradient(to top, #064151, #042b34);
-          display:flex;
-          flex-direction: row;
-          justify-content: center;
-          align-items: center;
-          img{
-            width:50px;
-            height:50px;
-            margin-right:40px;
-          }
-          .cont{
-            width:50%;
-            display: flex;
-            align-content: center;
-            justify-content: flex-end;
-            flex-direction: column;
-          }
-          .label{
-            margin-top:16px;
-            display: flex;
-            align-content: center;
-            justify-content: flex-end;
-            span{
-              color:#c0d918;
-              font-size:26px;
-              font-weight: bold;
-            }
-            .unit{
-              margin-left:5px;
-              opacity: .7;
-              margin-top:4px;
-            }
-          }
+        margin-left: 10px;
+        margin-right: 3px;
+        gap: 3px;
+        > div{
+          border: 1px solid #0c7f8a;
+          padding: 2px 5px;
         }
       }
     }
-  </style>
-  
\ No newline at end of file
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue
new file mode 100644
index 00000000..33306214
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue
@@ -0,0 +1,388 @@
+<template>
+    <div class="solar">
+      <div class="top">
+        <div v-for="(item,index) of titles" class="titles">
+          <img :src="require('@screen/images/solar/'+item.icon)" />
+          <div class="cont">
+            <div style="text-align: right;">{{ item.label }}</div>
+            <div class="label"><span>{{ item.value }}</span><div class="unit">{{ item.unit }}</div></div>
+          </div>
+        </div>
+      </div>
+      <div class="solarCont">
+        <div class="left">
+          <div class="chartPanel">
+            <div class="clabel">
+              <div>今日发电统计</div>
+              <div>今日发电总计:{{chart1Total1}}度</div>
+            </div>
+            <div id="charts1" class="chart"></div>
+          </div>
+          <div class="chartPanel">
+            <div class="clabel">
+              <div>今日用电统计</div>
+              <div>今日用电总计:{{chart1Total2}}度</div>
+            </div>
+            <div id="charts2" class="chart"></div>
+          </div>
+          <div class="chartPanel">
+            
+            <div class="clabel">
+              <div>今日功率统计</div>
+              <div>今日容量总计:{{chart1Total3}}千瓦</div>
+            </div>
+            <div id="charts3" class="chart"></div>
+          </div>
+        </div>
+        <div class="right">
+          <Table style="width:65vw" :data="tableData" v-loading="loading"  height="calc(100vh - 300px)" >
+            <el-table-column label="序号" type="index" :index="indexMethod" width="100" align="center"
+                header-align="center" />
+            <ElTableColumn prop="stakeNumber"  width="120" label="设备桩号"></ElTableColumn>
+            <ElTableColumn prop="state" width="140"  label="充电设备运行状态">
+              <template slot-scope="scope">
+                  <span>{{ scope.row.state==='1'?'正常':'异常' }}</span>
+                </template> 
+            </ElTableColumn>
+            <ElTableColumn prop="s1" width="160" label="放电设备运行状态"></ElTableColumn>
+            <ElTableColumn prop="s2" width="120" label="充电状态"></ElTableColumn>
+            <ElTableColumn prop="s3" width="120" label="蓄电池状态"></ElTableColumn>
+            <ElTableColumn prop="s4" width="120" label="输入过流"></ElTableColumn>
+            <ElTableColumn prop="s5" width="120" label="输入电压状态"></ElTableColumn>
+            <ElTableColumn prop="s6" width="120" label="当日累计用电量"></ElTableColumn>
+            <ElTableColumn prop="s7" width="120" label="当日累计充电量"></ElTableColumn>
+            <ElTableColumn prop="s8" width="150" label="当日最低蓄电池电压"></ElTableColumn>
+          </Table>
+          <div class="footer" style="display: flex;justify-content: center;margin-top: 20px;">
+            <Pagination @current-change="initQueryTable" @size-change="onSizeChange" width="'100%'"
+              :page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum"
+              layout="total, sizes, prev, pager, next" :total="total">
+            </Pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  
+  import request from "@/utils/request";
+  import * as echarts from "echarts";
+  import Table from '@screen/components/Table.vue';
+  import Pagination from "@screen/components/Pagination.vue";
+  export default {
+    components: { 
+      Table,
+      Pagination,
+    },
+    name: "Soler",
+    data() {
+      return {
+        titles:[
+          {icon:'total.png',label:'当年累计发电量',unit:'度',value:'-'},
+          {icon:'used.png',label:'当年累计用电量',unit:'度',value:'-'},
+          {icon:'CO2.png',label:'CO₂减排',unit:'kg',value:'-'},
+          {icon:'tree.png',label:'等效植树',unit:'棵',value:'-'},
+          {icon:'coal.png',label:'节约标准煤',unit:'kg',value:'-'},
+          {icon:'error.png',label:'放电异常设备',unit:'个',value:'-'},
+        ],
+        chart1:null,
+        chart2:null,
+        chart3:null,
+        chart1Total1:'-',
+        chart1Total2:'-',
+        chart1Total3:'-',
+        tableData:[],      
+        loading:false,
+        
+        total:0,
+        searchData: {
+          pageSize: 10,
+          pageNum: 1
+        },
+      };
+    },
+    mounted() {
+      this.initTotal();
+      this.initChart();
+      this.initQueryTable();
+    },
+    methods: {
+        //翻页时不刷新序号
+        indexMethod(index) {
+          return (
+            index + (this.searchData.pageNum - 1) * this.searchData.pageSize + 1
+          );
+        },
+      onSizeChange(pageSize) {
+        this.tableData = [];
+        this.searchData.pageSize = pageSize;
+        this.searchData.pageNum = 1;
+        this.initQueryTable();
+      },
+      initQueryTable() {
+        this.loading = true;
+        this.loading = false;
+        this.total = 0;
+        this.tableData = [
+        ]
+        //{stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+        // request({
+        //   url: "/system/status/tablist",
+        //   method: "get",
+        //   params:{}
+        // }).then((res) => {
+        //   if (res.code == 200) {
+        //     this.loading = false;
+        //     this.total = res.total;
+        //     this.tableData = res.rows
+            
+        //   }
+        // })
+      },
+      initTotal(){
+        request({
+          url: 'business/device/properties/latestOne',
+          method: 'get'
+        }).then(result => {
+          if (result.code != 200) return;
+          this.titles[0].value= result.data.theAccumulatedChargeOfTheYear;
+          this.titles[1].value= result.data.cumulativeElectricityConsumptionInTheYear;
+          this.titles[2].value= result.data.carbonEmissionReduction;
+          this.titles[3].value= result.data.equivalentTree;
+          this.titles[4].value= result.data.standardCoal;
+        })
+        request({
+          url: 'business/device/properties/solarDeviceStatistics',
+          method: 'get'
+        }).then(result => {
+          if (result.code != 200) return;
+          this.titles[5].value= result.data.count;
+        })
+      },
+      initChart(){
+        const _chartsOptions = {
+            color:['#00bead'],
+            title: {
+              text: '度',
+              textStyle:{
+                color:'#E5E7E8',
+                fontSize: 15,
+                fontStyle:'normal'
+              },
+              top:'10px',
+              left: '10px'
+            },
+            tooltip: {
+              trigger: 'axis'
+            },
+            xAxis: {
+              type: 'category',
+              data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点',
+                    '12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],                       
+              axisLine:{
+                show:true,
+                lineStyle:{
+                  color:'#fff'
+                }
+              },
+              axisLabel: {
+                align: "center",
+                rotate: "1",
+                margin: 20,
+                textStyle: {
+                  fontSize: 10,
+                  color: "#E5E7E8",
+                }
+              },
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                show: false,
+                color: "#E5E7E8",
+                textStyle: {
+                  fontSize: 10,
+                },
+              },
+              axisLine:{
+                show:true,
+                lineStyle:{
+                  color:'#fff'
+                }
+              },
+              splitLine: {
+                show: false
+              },
+            },
+            grid: {
+              left: "40px",
+              right: "20px",
+              top: "0px",
+              bottom: "10px",
+              containLabel: true,
+            },
+            series: [
+              {
+                data: [],
+                type: 'line',
+                smooth: true
+              }
+            ]
+        }
+        if(!this.chart1){
+          this.chart1 = echarts.init(document.getElementById("charts1"));
+          let option1 = JSON.parse(JSON.stringify(_chartsOptions));
+          request({
+            url: 'business/device/properties/history/oneDay/dailyAccumulatedCharge',
+            method: 'get'
+          }).then(result => {
+            if (result.code != 200) return;
+            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+            let total = 0;
+            for(let i in result.data){
+              total += result.data[i]
+              const idx = parseInt(i.substr(11,2));
+              data[idx] = result.data[i];
+            }
+            this.chart1Total1 = total;
+            option1.series[0].data = data;
+            this.chart1.setOption(option1);
+            this.chart1.resize();
+          })
+          
+          this.chart2 = echarts.init(document.getElementById("charts2"));
+          let option2 = JSON.parse(JSON.stringify(_chartsOptions));
+          request({
+            url: 'business/device/properties/history/oneDay/cumulativeElectricityConsumptionOnTheDay',
+            method: 'get'
+          }).then(result => {
+            if (result.code != 200) return;
+            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+            let total = 0;
+            for(let i in result.data){
+              total += result.data[i]
+              const idx = parseInt(i.substr(11,2));
+              data[idx] = result.data[i];
+            }
+            this.chart1Total2 = total;
+            option2.series[0].data = data;
+            this.chart2.setOption(option2);
+            this.chart2.resize();
+          })
+          // 发电功率
+          this.chart3 = echarts.init(document.getElementById("charts3"));
+          let option3 = JSON.parse(JSON.stringify(_chartsOptions));
+          request({
+            url: 'business/device/properties/history/oneDay/generatingPower',
+            method: 'get'
+          }).then(result => {
+            if (result.code != 200) return;
+            const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+            let total = 0;
+            for(let i in result.data){
+              total += result.data[i]
+              const idx = parseInt(i.substr(11,2));
+              data[idx] = result.data[i];
+            }
+            this.chart1Total3 = total;
+            option3.series[0].data = data;
+            this.chart3.setOption(option3);
+            this.chart3.resize()
+          })
+          
+        }
+        window.addEventListener("resize", () => {
+          if(this.chart1){
+            this.chart1.resize();
+            this.chart2.resize();
+            this.chart3.resize();
+          }
+        });
+      }
+    },
+  };
+  </script>
+  
+  <style rel="stylesheet/scss" lang="scss" scoped>
+    .solar{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .solarCont{
+        display: flex;
+        flex-direction: row;
+        gap:10px;
+        width:98%;
+        .left{
+          width:calc(33% + 10px);
+          display: flex;
+          flex-direction: column;
+          gap:10px;
+          height: calc(100vh - 300px);
+          .chartPanel{
+            flex:1;
+            background:  linear-gradient(to top, #064151, #042b34);
+            display: flex;
+            flex-direction: column;
+            .clabel{
+              display: flex;
+              padding:10px;
+              justify-content: space-between;
+            }
+            .chart{
+              flex:1;
+            }
+          }
+        }
+        .right{
+          width: 68%;
+          // background: #064151;
+        }
+      }
+      .top{
+        display: flex;
+        width:98%;
+        gap:10px;
+        margin:10px 0px;
+        .titles{
+          padding:30px 15px;
+          width:17%;
+          background:  linear-gradient(to top, #064151, #042b34);
+          display:flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          img{
+            width:50px;
+            height:50px;
+            margin-right:40px;
+          }
+          .cont{
+            width:50%;
+            display: flex;
+            align-content: center;
+            justify-content: flex-end;
+            flex-direction: column;
+          }
+          .label{
+            margin-top:16px;
+            display: flex;
+            align-content: center;
+            justify-content: flex-end;
+            span{
+              color:#c0d918;
+              font-size:26px;
+              font-weight: bold;
+            }
+            .unit{
+              margin-left:5px;
+              opacity: .7;
+              margin-top:4px;
+            }
+          }
+        }
+      }
+    }
+  </style>
+  
\ No newline at end of file