From 38e08d2022ce95305638feab3cf3fdec8641e1ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E7=90=B3?= <1911390090@qq.com>
Date: Mon, 11 Nov 2024 17:31:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BE=B9=E5=9D=A1=E5=BC=B9=E7=AA=97=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=AD=97=E5=8F=B7=E8=B0=83=E6=95=B4=EF=BC=8C=E5=85=89?=
 =?UTF-8?q?=E4=BC=8F=E4=BF=9D=E7=95=99=E4=B8=A4=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialogs/RoadNetworkFacilities/index.vue   | 217 +++++++++---------
 .../maintenanceOperations/solar/index_v1.vue  |  30 +--
 2 files changed, 129 insertions(+), 118 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
index c215f432..e904469e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
@@ -1,57 +1,61 @@
 <template>
-  <Dialog 
-    v-model="obverseVisible" 
-    :title="dialogData._itemData && dialogData._itemData.title" 
-    @update:close="camClose"
-    :width="isCameraMap?'1300px':'500px'" top="10%">
+  <Dialog
+    v-model="obverseVisible"
+    :title="dialogData._itemData && dialogData._itemData.title"
+    :width="isCameraMap?'1300px':'500px'"
+    top="10%" @update:close="camClose">
     <div class="panelParent" style="display:flex;">
       <div class="RoadNetworkFacilities">
         <div class="header">
-          <Video :facilityType="dialogData.facilityType" ref="refVideo" class="video-stream" @nearload="bindNearLoad" :pileNum="dialogData.stakeMark" :rangeIndex="dialogData.facilityType === 1?'all':'upCamera'" :showHeader="false" />
+          <Video ref="refVideo" :facilityType="dialogData.facilityType" :pileNum="dialogData.stakeMark" :rangeIndex="dialogData.facilityType === 1?'all':'upCamera'"
+                 :showHeader="false" class="video-stream"
+                 @nearload="bindNearLoad"/>
         </div>
         <div class="SolarEnergy">
           <ElTabs v-model="activeName" class="tabs">
             <ElTabPane v-for="item in formList" :key="item.key" :label="item.name" :name="item.key">
-              <Descriptions :labelWidth="item.labelWidth" :list="item.list" :data="data" style="gap: 12px" column="6" />
+              <Descriptions :data="data" :labelWidth="item.labelWidth" :list="item.list" column="6" style="gap: 12px"/>
             </ElTabPane>
-            <ElTabPane label="边坡测点数据" v-if="dialogData.facilityType === 9">
-              <Table :data="bianpoData" height="200px" >
-                <ElTableColumn label="项目编号" prop="pro_code" width="80" ></ElTableColumn>
-                <ElTableColumn label="标段编号" prop="con_code" width="80" ></ElTableColumn>
-                <ElTableColumn label="测点名称" prop="meaPointName" width="80" ></ElTableColumn>
-                <ElTableColumn label="工程编号" prop="unit_code" ></ElTableColumn>
-              <ElTableColumn label="测点编号" prop="meaPointNum"  ></ElTableColumn>
-          </Table>
+            <ElTabPane v-if="dialogData.facilityType === 9" label="边坡测点数据">
+              <Table :data="bianpoData" height="200px">
+                <ElTableColumn label="项目编号" prop="pro_code" width="80"></ElTableColumn>
+                <ElTableColumn label="标段编号" prop="con_code" width="80"></ElTableColumn>
+                <ElTableColumn label="测点名称" prop="meaPointName" width="80"></ElTableColumn>
+                <ElTableColumn label="工程编号" prop="unit_code"></ElTableColumn>
+                <ElTableColumn label="测点编号" prop="meaPointNum"></ElTableColumn>
+              </Table>
             </ElTabPane>
-            <ElTabPane label="测点历史数据" v-if="dialogData.facilityType === 9">
-              <el-select v-model="bindpoSelecte" placeholder="" @change="bindListAsync" transfer="true"
-                  style="width: 240px;">
-                  <el-option v-for="item in bianpoOptions"
-                  :key="item.key" :label="item.label" 
-                  :value="item.key">
-                  </el-option>
+            <ElTabPane v-if="dialogData.facilityType === 9" label="测点历史数据">
+              <el-select v-model="bindpoSelecte" placeholder="" style="width: 240px;" transfer="true"
+                         @change="bindListAsync">
+                <el-option v-for="item in bianpoOptions"
+                           :key="item.key" :label="item.label"
+                           :value="item.key">
+                </el-option>
               </el-select>
-              <el-date-picker v-model="daterangeChangeTime" size="mini"
-                style="width: 190px;float:right;margin-bottom: 10px;" value-format="yyyy-MM-dd" type="daterange"
-                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-              <div class='chart LineChart' ref="chartRef" />
+              <el-date-picker v-model="daterangeChangeTime" end-placeholder="结束日期"
+                              range-separator="-" size="mini"
+                              start-placeholder="开始日期"
+                              style="width: 190px;float:right;margin-bottom: 10px;" type="daterange" value-format="yyyy-MM-dd"></el-date-picker>
+              <div ref="chartRef" class='chart LineChart'/>
             </ElTabPane>
-            <template  v-if="dialogData.facilityType === 1">
-              <ElTabPane :label="'UPS'+(index+1)" :key="'UPS_'+item" :name="'UPS_'+item"  v-for="(item,index) in upsList">
-                <Descriptions labelWidth="142px" :list="upsForm" :data="upsData" style="gap: 12px" column="6" />
+            <template v-if="dialogData.facilityType === 1">
+              <ElTabPane v-for="(item,index) in upsList" :key="'UPS_'+item" :label="'UPS'+(index+1)"
+                         :name="'UPS_'+item">
+                <Descriptions :data="upsData" :list="upsForm" column="6" labelWidth="142px" style="gap: 12px"/>
               </ElTabPane>
             </template>
 
           </ElTabs>
         </div>
       </div>
-      <div style="margin-left:20px" v-if="isCameraMap">
+      <div v-if="isCameraMap" style="margin-left:20px">
         <div :style="'background-image:url('+imgSrc+')'" class="cameraMap">
-          <img v-for="(item,index) of cameraMaps" :key="index" @click="showCamera(item)"
-          :style="'left:'+item.left+'px;top:'+item.top+'px'"
-          width="50px" height="50px" :src="item.status===0?item.iconUn:item.icon" />
+          <img v-for="(item,index) of cameraMaps" :key="index" :src="item.status===0?item.iconUn:item.icon"
+               :style="'left:'+item.left+'px;top:'+item.top+'px'"
+               height="50px" width="50px" @click="showCamera(item)"/>
         </div>
-    </div>
+      </div>
     </div>
   </Dialog>
 </template>
@@ -63,14 +67,15 @@ import Descriptions from "@screen/components/Descriptions.vue";
 import Video from "@screen/components/VideoMulti";
 // import Video from "@screen/components/Video";
 import request from "@/utils/request";
-import { dialogDelayVisible } from "./../mixin";
-import { tabList } from './data'
-import { DirectionTypes } from "@screen/utils/enum.js"
+import {dialogDelayVisible} from "./../mixin";
+import {tabList} from './data'
+import {DirectionTypes} from "@screen/utils/enum.js"
 import * as echarts from "echarts";
-import { chartOption } from "./chart"
+import {chartOption} from "./chart"
 import moment from "moment";
 
 import Table from "@screen/components/Table.vue";
+
 const icona = require(`@screen/images/layerb/路测设备/摄像机_active.svg`);// childType==='1-2 高清网络枪机
 const icona_f = require(`@screen/images/layerb/路测设备/摄像机_fault.svg`);
 const iconb = require(`@screen/images/deviceType/ballb_active.svg`); // childType==='1-2 高清网络球形摄像机
@@ -96,9 +101,9 @@ export default {
       tabList,
       activeName: "first",
       deviceControlVisible: false,
-      bianpoData:[],
-      bianpoOptions:[],
-      bindpoSelecte:"",
+      bianpoData: [],
+      bianpoOptions: [],
+      bindpoSelecte: "",
       data: {
         deviceType: "",
         deviceStation: "",
@@ -110,46 +115,46 @@ export default {
       formList: [],
       dateRange: [],
       daterangeChangeTime: [],
-      upsForm:[],
-      upsData:{},
+      upsForm: [],
+      upsData: {},
       // 收费站增加UPS
-      upsList:[],
+      upsList: [],
       // 收费站
-      isCameraMap:false,
-      imgSrc:'',
-      cameraMaps:[],
+      isCameraMap: false,
+      imgSrc: '',
+      cameraMaps: [],
     };
   },
   watch: {
-    obverseVisible:{
-      handler(val){
-        if(val === false){
-          if(this.$refs.refVideo.closeContrl){
+    obverseVisible: {
+      handler(val) {
+        if (val === false) {
+          if (this.$refs.refVideo.closeContrl) {
             this.$refs.refVideo.closeContrl()
           }
         }
       }
     },
-    
+
     daterangeChangeTime: {
       handler(val) {
-        if(this.dialogData.facilityType === 9){
+        if (this.dialogData.facilityType === 9) {
           this.dateRange = [moment(val[0]).valueOf(), moment(val[1]).valueOf()];
           this.bindListAsync();
         }
-        
+
       },
     },
-    activeName:{
-      handler(val){
-        if(val.indexOf('UPS_') !== -1){
+    activeName: {
+      handler(val) {
+        if (val.indexOf('UPS_') !== -1) {
           this.bindUPS(val.substr(4))
         }
       }
     }
   },
   async created() {
-    let dData = { ...this.dialogData };
+    let dData = {...this.dialogData};
     this.formList = tabList[dData.facilityType]
 
     if (dData.facilityType)
@@ -159,7 +164,7 @@ export default {
         if (dData.direction) {
           dData.direction = DirectionTypes[dData.direction]
         }
-        if(dData.facilityType === 9){
+        if (dData.facilityType === 9) {
           let resPointList = await request({
             url: `sideSlope/GetMeasurePointList`,
             method: "get",
@@ -167,10 +172,10 @@ export default {
           if (resPointList.code != 200) return Message.error(resPointList?.msg);
           this.bianpoData = resPointList.data.result;
           let _options = [];
-          for(let i of resPointList.data.result){
+          for (let i of resPointList.data.result) {
             _options.push({
-              key: i['pro_code']+'|'+i['unit_code']+'|'+i['meaPointNum'],
-              label: i['meaPointName']+' '+i['meaPointNum']
+              key: i['pro_code'] + '|' + i['unit_code'] + '|' + i['meaPointNum'],
+              label: i['meaPointName'] + ' ' + i['meaPointNum']
             })
           }
           console.log(_options)
@@ -179,70 +184,69 @@ export default {
           //获取历史数据echart
           this.daterangeChangeTime = [moment().startOf('months').format('YYYY-MM-DD'), moment().endOf('months').format('YYYY-MM-DD')]
         }
-        
+
         // let pointList = {};
         // if (resPointList.data && resPointList.data.result && resPointList.data.result.length > 0) {
         //   pointList = resPointList.data.result[0]
         // }
-        dData = { ...dData, ...otherConfig,}
+        dData = {...dData, ...otherConfig,}
         this.isCameraMap = false;
         this.cameraMaps = [];
-        if(dData.facilityType === 1){
+        if (dData.facilityType === 1) {
           // console.log('收费站单独处理图像')
-          if(dData.facilityName === '大学城收费站'){
+          if (dData.facilityName === '大学城收费站') {
             this.imgSrc = require('@screen/images/shoufeiz/大学城收费站.jpg')
             this.cameraMaps = [
-              {icon:icona,iconUn:icona_f,left:50,top:50,status:0,iotDeviceId:'57954'},
-              {icon:iconb,iconUn:iconb_f,left:500,top:50,status:0,iotDeviceId:'57939'},
-              {icon:iconc,iconUn:iconc_f,left:100,top:200,status:0,iotDeviceId:'57941'},
-              {icon:iconc,iconUn:iconc_f,left:600,top:500,status:0,iotDeviceId:'111111'},
-              {icon:icone,iconUn:icone_f,left:200,top:400,status:0,iotDeviceId:'222222'},
-              {icon:icona,iconUn:icona_f,left:30,top:30,status:0,iotDeviceId:'57953'}
+              {icon: icona, iconUn: icona_f, left: 50, top: 50, status: 0, iotDeviceId: '57954'},
+              {icon: iconb, iconUn: iconb_f, left: 500, top: 50, status: 0, iotDeviceId: '57939'},
+              {icon: iconc, iconUn: iconc_f, left: 100, top: 200, status: 0, iotDeviceId: '57941'},
+              {icon: iconc, iconUn: iconc_f, left: 600, top: 500, status: 0, iotDeviceId: '111111'},
+              {icon: icone, iconUn: icone_f, left: 200, top: 400, status: 0, iotDeviceId: '222222'},
+              {icon: icona, iconUn: icona_f, left: 30, top: 30, status: 0, iotDeviceId: '57953'}
             ]
             this.isCameraMap = true;
-          }
-          else if(dData.facilityName === '孝里收费站'){
+          } else if (dData.facilityName === '孝里收费站') {
             this.imgSrc = require('@screen/images/shoufeiz/孝里收费站.jpg')
             this.isCameraMap = true;
           }
         }
-        this.upsList=otherConfig.UPSList||[]
+        this.upsList = otherConfig.UPSList || []
       }
     this.data = dData;
   },
   methods: {
-    bindNearLoad(e){
-      for(let i of this.cameraMaps){
-        if(e.indexOf(i.iotDeviceId) !== -1){
+    bindNearLoad(e) {
+      for (let i of this.cameraMaps) {
+        if (e.indexOf(i.iotDeviceId) !== -1) {
           i.status = 1;
         }
       }
     },
-    camClose(){
-      if(this.$refs.refVideo.closeContrl){
+    camClose() {
+      if (this.$refs.refVideo.closeContrl) {
         this.$refs.refVideo.closeContrl()
       }
-      this.upsList =[]
-    },  
-    showCamera(item){
-      if(item.status === 1){
+      this.upsList = []
+    },
+    showCamera(item) {
+      if (item.status === 1) {
         this.$refs.refVideo.setCameraId(item.iotDeviceId)
       } else {
         this.$message.warning('设备离线')
       }
-      
+
     },
-    bindUPS(id){
+    bindUPS(id) {
       request({
         url: `business/device/properties/latest/${id}`,
         method: "get"
-      }).then(res=>{
+      }).then(res => {
         let _list = [];
         let _data = {};
-        
+
         if (res.code != 200) return Message.error(res?.msg);
         res.data.forEach(e => {
-          _list.push( {
+          _list.push({
             label: e.propertyName,
             key: e.propertyName,
             gridColumn: "3",
@@ -253,9 +257,9 @@ export default {
         this.upsData = _data;
       })
     },
-   
+
     async bindListAsync() {
-      let aryParam = _.find(this.bianpoOptions,{key:this.bindpoSelecte}).key.split('|')
+      let aryParam = _.find(this.bianpoOptions, {key: this.bindpoSelecte}).key.split('|')
       let res = await request({
         url: `sideSlope/GetPointDataListAsync`,
         method: "get",
@@ -286,15 +290,15 @@ export default {
       }
       res.data.forEach(e => {
         cdata.push((moment(e.measureTime).format('YYYY-MM-DD')))
-        if(title === ''){
+        if (title === '') {
           title = enum_title[e.data[0].type]
         }
         cseries1.push(e.data[0].value)
         cseries2.push(e.data[0].cum)
       });
       chartOption.xAxis.data = cdata;
-      chartOption.yAxis[0].name =title+'日计'
-      chartOption.yAxis[1].name =title+'累计'
+      chartOption.yAxis[0].name = title + '日计'
+      chartOption.yAxis[1].name = title + '累计'
       chartOption.series[0].data = cseries1;
       chartOption.series[1].data = cseries2;
       const chartIns = echarts.init(this.$refs.chartRef);
@@ -305,15 +309,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-table .cell {
+  font-size: 14px;
+}
+
 .LineChart {
   width: 450px !important;
   height: 160px;
   overflow: hidden;
 }
-.panelParent{
+
+.panelParent {
   display: flex;
   flex-direction: row;
 }
+
 .RoadNetworkFacilities {
   width: 452px;
   color: #fff;
@@ -336,7 +346,7 @@ export default {
     display: flex;
     justify-content: center;
 
-    >div.video-stream {
+    > div.video-stream {
       height: 286px;
     }
   }
@@ -365,22 +375,23 @@ export default {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }
   }
 }
 
-.cameraMap{
-  position:relative;
-  width:800px;
-  height:600px;
+.cameraMap {
+  position: relative;
+  width: 800px;
+  height: 600px;
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  img{
+
+  img {
     position: absolute;
     cursor: pointer;
   }
 }
-</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
index 33306214..609c8a2f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue
@@ -26,7 +26,7 @@
             <div id="charts2" class="chart"></div>
           </div>
           <div class="chartPanel">
-            
+
             <div class="clabel">
               <div>今日功率统计</div>
               <div>今日容量总计:{{chart1Total3}}千瓦</div>
@@ -42,7 +42,7 @@
             <ElTableColumn prop="state" width="140"  label="充电设备运行状态">
               <template slot-scope="scope">
                   <span>{{ scope.row.state==='1'?'正常':'异常' }}</span>
-                </template> 
+                </template>
             </ElTableColumn>
             <ElTableColumn prop="s1" width="160" label="放电设备运行状态"></ElTableColumn>
             <ElTableColumn prop="s2" width="120" label="充电状态"></ElTableColumn>
@@ -63,15 +63,15 @@
       </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: { 
+    components: {
       Table,
       Pagination,
     },
@@ -92,9 +92,9 @@
         chart1Total1:'-',
         chart1Total2:'-',
         chart1Total3:'-',
-        tableData:[],      
+        tableData:[],
         loading:false,
-        
+
         total:0,
         searchData: {
           pageSize: 10,
@@ -136,7 +136,7 @@
         //     this.loading = false;
         //     this.total = res.total;
         //     this.tableData = res.rows
-            
+
         //   }
         // })
       },
@@ -179,7 +179,7 @@
             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点'],                       
+                    '12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],
               axisLine:{
                 show:true,
                 lineStyle:{
@@ -250,7 +250,7 @@
             this.chart1.setOption(option1);
             this.chart1.resize();
           })
-          
+
           this.chart2 = echarts.init(document.getElementById("charts2"));
           let option2 = JSON.parse(JSON.stringify(_chartsOptions));
           request({
@@ -265,7 +265,8 @@
               const idx = parseInt(i.substr(11,2));
               data[idx] = result.data[i];
             }
-            this.chart1Total2 = total;
+            this.chart1Total2 = parseFloat(total.toFixed(2)); // 保留两位小数
+
             option2.series[0].data = data;
             this.chart2.setOption(option2);
             this.chart2.resize();
@@ -285,12 +286,12 @@
               const idx = parseInt(i.substr(11,2));
               data[idx] = result.data[i];
             }
-            this.chart1Total3 = total;
+            this.chart1Total3 = parseFloat(total.toFixed(2)); // 保留两位小数
             option3.series[0].data = data;
             this.chart3.setOption(option3);
             this.chart3.resize()
           })
-          
+
         }
         window.addEventListener("resize", () => {
           if(this.chart1){
@@ -303,7 +304,7 @@
     },
   };
   </script>
-  
+
   <style rel="stylesheet/scss" lang="scss" scoped>
     .solar{
       display: flex;
@@ -385,4 +386,3 @@
       }
     }
   </style>
-  
\ No newline at end of file