增加太阳能板页面

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/manage/index.vue

@@ -66,10 +66,9 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button v-hasPermi="['maintain:manage:update']"
+          <el-button v-hasPermi="['maintain:manage:update','device:protocol:edit']"
             type="text"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['device:protocol:edit']"
             >修改
           </el-button>
         </template>

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue

@@ -1,29 +1,350 @@
-
 <template>
-    <div class='comp_box'>
+    <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>
-</template>
+            <div id="charts3" class="chart"></div>
+          </div>
+        </div>
+        <div class="right">
+          <Table style="width:65vw" :data="tableData" v-loading="loading"  height="calc(100vh - 220px)" >
+            <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>
   
-<script>
-import request from "@/utils/request";
-export default {
-    name: 'Solar',
+  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,
     },
-    data(){
+    name: "Soler",
+    data() {
       return {
+        titles:[
+          {icon:'total.png',label:'当年累计发电量',unit:'万度',value:'-'},
+          {icon:'used.png',label:'当年累计用电量',unit:'万度',value:'-'},
+          {icon:'CO2.png',label:'CO₂减排',unit:'吨',value:'-'},
+          {icon:'tree.png',label:'等效植树',unit:'棵',value:'-'},
+          {icon:'coal.png',label:'节约标准煤',unit:'吨',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: {
+      
+      onSizeChange(pageSize) {
+        this.tableData = [];
+        this.searchData.pageSize = pageSize;
+        this.searchData.pageNum = 1;
+        this.initQueryTable();
+      },
+      initQueryTable() {
+        this.loading = true;
+        this.loading = false;
+        this.total = 1000;
+        this.tableData = [
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {stakeNumber:'1',state:1,s1:1,s2:1,s3:1,s4:1,s5:1,s6:1,s7:1,s8:1},
+          {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/deviceAnalysis',
+        //   method: 'post',
+        //   data:{
+        //     dateTime: this.date,
+        //     deviceType: item.deviceType,
+        //     deviceId: item.deviceId
+        //   }
+        // }).then(result => {})
+        this.titles[0].value='22.4512';
+        this.titles[1].value='22.4512';
+        this.titles[2].value='88.88';
+        this.titles[3].value='8888';
+        this.titles[4].value='8888';
+        this.titles[5].value='1';
+      },
+      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点', '2点', '4点', '6点', '8点', '10点', '12点', '14点', '16点', '18点', '20点', '22点'],                       
+              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));
+          this.chart1Total1 = 1212;
+          option1.series[0].data=[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934,832]
+          this.chart1.setOption(option1)//{..._chartsOptions,...{title:{text:'今日发电统计'}}});  
+          this.chart1.resize();
+  
+          this.chart2 = echarts.init(document.getElementById("charts2"));
+          let option2 = JSON.parse(JSON.stringify(_chartsOptions));
+          this.chart1Total2 = 1212;
+          option2.series[0].data=[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934,832]
+          this.chart2.setOption(option2)//{..._chartsOptions,...{title:{text:'今日发电统计'}}});  
+          this.chart2.resize();
   
+          this.chart3 = echarts.init(document.getElementById("charts3"));
+          let option3 = JSON.parse(JSON.stringify(_chartsOptions));
+          this.chart1Total3 = 1212;
+          option3.series[0].data=[820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934,832]
+          this.chart3.setOption(option3)//{..._chartsOptions,...{title:{text:'今日发电统计'}}});  
+          this.chart3.resize()
         }
-}
-</script>
+        window.addEventListener("resize", () => {
+          if(this.chart1){
+            this.chart1.resize();
+            this.chart2.resize();
+            this.chart3.resize();
+          }
+        });
+      }
+    },
+  };
+  </script>
   
-<style lang='scss' scoped>
-.solar {
+  <style rel="stylesheet/scss" lang="scss" scoped>
+    .solar{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .solarCont{
+        height:calc(100vh - 160px);
+        display: flex;
+        flex-direction: row;
+        gap:10px;
+        width:98%;
+        .left{
+          width:calc(33% + 10px);
+          display: flex;
+          flex-direction: column;
+          gap:10px;
+          .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>
   
-}
-</style>