11

psdc-ui/src/api/emonitor/api.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+//总电表
+export function getData(data) {
+    return request.get('/monitor/db/index/sel1/'+data)
+}
+export function getZdb(data) {
+    return request.get('/monitor/db/index/sel2/'+data)
+}
+//电热锅炉
+export function getDrgl(data) {
+    return request.get('/monitor/drgl/index/sel1/'+data)
+}
+export function getDcgl(data) {
+    return request.get('/monitor/drgl/index/sel2/'+data)
+}
+//蓄热锅炉
+export function getXrgl(data) {
+    return request.get('/monitor/xrgl/index/sel1/'+data)
+}
+export function getXcgl(data) {
+    return request.get('/monitor/xrgl/index/sel2/'+data)
+}
+//空气热源泵
+export function getKqryb(data) {
+    return request.get('/monitor/kqyrb/index/sel1/'+data)
+}
+export function getKqyrb(data) {
+    return request.get('/monitor/kqyrb/index/sel2/'+data)
+}
+//发热电缆
+export function getFrdl(data) {
+    return request.get('/monitor/frdl/index/sel1/'+data)
+}
+export function getFrld(data) {
+    return request.get('/monitor/frdl/index/sel2/'+data)
+}
+//温度传感器
+export function getWdcgq(data) {
+    return request.get('/monitor/wdcgq/index/sel1/'+data)
+}

psdc-ui/src/main.js

@@ -45,6 +45,7 @@ import DictTag from '@/components/DictTag'
 const app = createApp(App)
 
 // 全局方法挂载
+app.config.warnHandler = () => null;
 app.config.globalProperties.useDict = useDict
 app.config.globalProperties.download = download
 app.config.globalProperties.parseTime = parseTime

psdc-ui/src/views/emonitor/db/index.vue

@@ -5,7 +5,7 @@
         <div>pic</div>
         <div>
           <p>当前功率</p>
-          <h2>0kW</h2>
+          <h2>{{data.num}}kW</h2>
         </div>
       </div>
       <div class="card">
@@ -56,16 +56,103 @@
 </template>
 
 <script  name="Index">
-import { onMounted ,onUnmounted } from "vue";
+import {getData , getZdb} from '../../../api/emonitor/api'
+import { onMounted ,onUnmounted ,reactive } from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "db",
   setup() {
+     let data = reactive({
+        num:666,
+         fdlData:'',
+         fdlXz:'',
+     })
+    // function getData() {
+    //   glData(13).then((res)=>{
+    //     console.log(res.data)
+    //   })
+    // }
+    // return{
+    //   getData
+    // },
 
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
-      echarts.init(document.getElementById("myEcharts1")).dispose()
-      let myChart1 = echarts.init(document.getElementById("myEcharts1"));
-      let option1 = {
+      getData(13).then((res)=>{
+        console.log(res)
+      })
+      getZdb(13).then((res)=>{
+        console.log(res)
+         let arr = []
+         let brr = []
+        for (let i in res.data){
+           arr.push(res.data[i].hour)
+          brr.push(res.data[i].useElectric)
+        }
+         data.fdlData=brr
+        data.fdlXz=arr
+        let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
+        if (myChart3){
+          myChart3.dispose()
+        }
+        myChart3 = echarts.init(document.getElementById("myEcharts3"));
+        myChart3.setOption({
+          title: {},
+          tooltip: {},
+          textStyle:{
+            color:'#BEC3DA'
+          },
+          xAxis: {
+            type:'category',
+            data:data.fdlXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            name: "kWh",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+          },
+          series: [
+            {
+              name: "今日用电量",
+              type: "bar",
+              data: [data.fdlData],
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart3.resize();
+        };
+      })
+
+
+
+      let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
+      if (myChart1){
+        myChart1.dispose()
+      }
+      myChart1 = echarts.init(document.getElementById("myEcharts1"));
+      myChart1.setOption({
         series: [
           {
             type: 'gauge',
@@ -117,15 +204,17 @@ export default {
             ]
           }
         ]
-      }
-      myChart1.setOption(option1);
+      });
       window.onresize = function () {//自适应大小
         myChart1.resize();
       };
 
-      echarts.init(document.getElementById("myEcharts2")).dispose()
-      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
-      // 绘制图表
+
+      let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
+      if (myChart2){
+        myChart2.dispose()
+      }
+      myChart2 = echarts.init(document.getElementById("myEcharts2"));
       myChart2.setOption({
         title: {},
         tooltip: {},
@@ -174,58 +263,14 @@ export default {
         myChart2.resize();
       };
 
-      echarts.init(document.getElementById("myEcharts3")).dispose()
-      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
-      myChart3.setOption({
-        title: {},
-        tooltip: {},
-        textStyle:{
-          color:'#BEC3DA'
-        },
-        xAxis: {
-          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
-          axisLine:{
-            lineStyle:{
-              color:'#BEC3DA',
-              type:'dashed'
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: "kWh",
-          splitLine:{
-            show:true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
-            }
-          },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
-            }
-          },
-        },
-        series: [
-          {
-            name: "今日用电量",
-            type: "bar",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
-            },
-          },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart3.resize();
-      };
 
-    });
+
+    })
+    return {
+      data
+    }
   },
+
   components: {},
   mounted() {},
 };

psdc-ui/src/views/emonitor/drgl/index.vue

@@ -42,7 +42,7 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div id="myEcharts" style="width: 100%; height: 86.7%"></div>
+        <div id="myEcharts1" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
@@ -67,22 +67,46 @@
 </template>
 
 <script  name="Index">
+import {getDrgl, getDcgl} from '../../../api/emonitor/api'
 import { onMounted } from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "drgl",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
-      echarts.init(document.getElementById("myEcharts")).dispose()
-      echarts.init(document.getElementById("myEcharts2")).dispose()
-      echarts.init(document.getElementById("myEcharts3")).dispose()
-      echarts.init(document.getElementById("myEcharts4")).dispose()
-      let myChart = echarts.init(document.getElementById("myEcharts"));
-      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
-      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
-      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      // getDrgl(1).then((res)=>{
+      //   console.log(res)
+      // })
+      getDcgl(1).then((res)=>{
+        console.log(res)
+      })
+
+
+      let myChart1 = echarts.getInstanceByDom(document.getElementById("myEcharts1"));
+      if (myChart1){
+        myChart1.dispose()
+      }
+       myChart1 = echarts.init(document.getElementById("myEcharts1"));
+
+      let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
+      if (myChart2){
+        myChart2.dispose()
+      }
+      myChart2 = echarts.init(document.getElementById("myEcharts2"));
+
+      let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
+      if (myChart3){
+        myChart3.dispose()
+      }
+      myChart3 = echarts.init(document.getElementById("myEcharts3"));
+
+      let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
+      if (myChart4){
+        myChart4.dispose()
+      }
+      myChart4 = echarts.init(document.getElementById("myEcharts4"));
       // 绘制图表
-      myChart.setOption({
+      myChart1.setOption({
         title: {},
         tooltip: {},
         textStyle:{

psdc-ui/src/views/emonitor/frdl/index.vue

@@ -63,20 +63,44 @@
 </template>
 
 <script name="Index">
+import {getFrdl, getFrld} from '../../../api/emonitor/api'
 import { onMounted } from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "frdl",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
-      echarts.init(document.getElementById("myEcharts")).dispose()
-      echarts.init(document.getElementById("myEcharts2")).dispose()
-      echarts.init(document.getElementById("myEcharts3")).dispose()
-      echarts.init(document.getElementById("myEcharts4")).dispose()
-      let myChart = echarts.init(document.getElementById("myEcharts"));
-      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
-      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
-      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      getFrld(4).then((res)=>{
+        console.log(res)
+      })
+      // getFrdl(4).then((res)=>{
+      //   console.log(res)
+      // })
+
+      let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
+      if (myChart){
+        myChart.dispose()
+      }
+      myChart = echarts.init(document.getElementById("myEcharts"));
+
+      let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
+      if (myChart2){
+        myChart2.dispose()
+      }
+      myChart2 = echarts.init(document.getElementById("myEcharts2"));
+
+      let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
+      if (myChart3){
+        myChart3.dispose()
+      }
+      myChart3 = echarts.init(document.getElementById("myEcharts3"));
+
+      let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
+      if (myChart4){
+        myChart4.dispose()
+      }
+      myChart4 = echarts.init(document.getElementById("myEcharts4"));
+
       // 绘制图表
       myChart.setOption({
         title: {},

psdc-ui/src/views/emonitor/kqyrb/index.vue

@@ -67,20 +67,43 @@
 </template>
 
 <script  name="Index">
+import {getKqryb, getKqyrb} from '../../../api/emonitor/api'
 import { onMounted } from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "kqyrb",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
-      echarts.init(document.getElementById("myEcharts")).dispose()
-      echarts.init(document.getElementById("myEcharts2")).dispose()
-      echarts.init(document.getElementById("myEcharts3")).dispose()
-      echarts.init(document.getElementById("myEcharts4")).dispose()
-      let myChart = echarts.init(document.getElementById("myEcharts"));
-      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
-      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
-      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      getKqyrb(3).then((res)=>{
+        console.log(res)
+      })
+      // getKqryb(3).then((res)=>{
+      //   console.log(res)
+      // })
+
+      let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
+      if (myChart){
+        myChart.dispose()
+      }
+      myChart = echarts.init(document.getElementById("myEcharts"));
+
+      let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
+      if (myChart2){
+        myChart2.dispose()
+      }
+      myChart2 = echarts.init(document.getElementById("myEcharts2"));
+
+      let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
+      if (myChart3){
+        myChart3.dispose()
+      }
+      myChart3 = echarts.init(document.getElementById("myEcharts3"));
+
+      let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
+      if (myChart4){
+        myChart4.dispose()
+      }
+      myChart4 = echarts.init(document.getElementById("myEcharts4"));
       // 绘制图表
       myChart.setOption({
         title: {},

psdc-ui/src/views/emonitor/wdcgq/index.vue

@@ -71,14 +71,22 @@
 </template>
 
 <script  name="Index">
+import {getWdcgq} from '../../../api/emonitor/api'
 import { onMounted } from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "wdcgq",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
-      echarts.init(document.getElementById("myEcharts")).dispose()
-      let myChart = echarts.init(document.getElementById("myEcharts"));
+      //温度传感器1-8  id 5-12
+
+
+
+      let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
+      if (myChart){
+        myChart.dispose()
+      }
+      myChart = echarts.init(document.getElementById("myEcharts"));
       // 绘制图表
       myChart.setOption({
         title: {},

psdc-ui/src/views/emonitor/xrgl/index.vue

@@ -5,14 +5,14 @@
         <div>pic</div>
         <div>
           <p>总用电量</p>
-          <h2>1641kWh</h2>
+          <h2>{{data.totwh}}kWh</h2>
         </div>
       </div>
       <div class="card">
         <div>pic</div>
         <div>
           <p>当前功率</p>
-          <h2>11kW</h2>
+          <h2>{{data.totp}}kW</h2>
         </div>
       </div>
       <div class="card">
@@ -20,11 +20,11 @@
         <div>
           <div style="display: flex; margin-bottom: 5px">
             <p>进水温度:</p>
-            <h2>25℃</h2>
+            <h2>{{data.tempIn}}℃</h2>
           </div>
           <div style="display: flex">
             <p>出水温度:</p>
-            <h2>85℃</h2>
+            <h2>{{data.tempOut}}℃</h2>
           </div>
         </div>
       </div>
@@ -32,7 +32,7 @@
         <div>pic</div>
         <div>
           <p>运行状态</p>
-          <h2 style="color: #1ab394">开启</h2>
+          <h2 style="color: #1ab394">{{data.runStatus}}</h2>
         </div>
       </div>
     </div>
@@ -67,20 +67,216 @@
 </template>
 
 <script name="Index">
-import { onMounted } from "vue";
+import {getXcgl, getXrgl} from '../../../api/emonitor/api'
+import { onMounted ,reactive} from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "xrgl",
   setup() {
+    let data = reactive({
+      totwh:'',
+      totp:'',
+      tempIn:'',
+      tempOut:'',
+      //1 开 2 关
+      runStatus:'',
+      glData:[],
+      glXz:[
+        "00:00",
+        "00:15",
+        "00:30",
+        "00:45",
+        "01:00",
+        "01:15",
+        "01:30",
+        "01:45",
+        "02:00",
+        "02:15",
+        "02:30",
+        "02:45",
+        "03:00",
+        "03:15",
+        "03:30",
+        "03:45",
+        "04:00",
+        "04:15",
+        "04:30",
+        "04:45",
+        "05:00",
+        "05:15",
+        "05:30",
+        "05:45",
+        "06:00",
+        "06:15",
+        "06:30",
+        "06:45",
+        "07:00",
+        "07:15",
+        "07:30",
+        "07:45",
+        "08:00",
+        "08:15",
+        "08:30",
+        "08:45",
+        "09:00",
+        "09:15",
+        "09:30",
+        "09:45",
+        "10:00",
+        "10:15",
+        "10:30",
+        "10:45",
+        "11:00",
+        "11:15",
+        "11:30",
+        "11:45",
+        "12:00",
+        "12:15",
+        "12:30",
+        "12:45",
+        "13:00",
+        "13:15",
+        "13:30",
+        "13:45",
+        "14:00",
+        "14:15",
+        "14:30",
+        "14:45",
+        "15:00",
+        "15:15",
+        "15:30",
+        "15:45",
+        "16:00",
+        "16:15",
+        "16:30",
+        "16:45",
+        "17:00",
+        "17:15",
+        "17:30",
+        "17:45",
+        "18:00",
+        "18:15",
+        "18:30",
+        "18:45",
+        "19:00",
+        "19:15",
+        "19:30",
+        "19:45",
+        "20:00",
+        "20:15",
+        "20:30",
+        "20:45",
+        "21:00",
+        "21:15",
+        "21:30",
+        "21:45",
+        "22:00",
+        "22:15",
+        "22:30",
+        "22:45",
+        "23:00",
+        "23:15",
+        "23:30",
+        "23:45"
+      ],
+    })
+
+
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
-      echarts.init(document.getElementById("myEcharts")).dispose()
-      echarts.init(document.getElementById("myEcharts2")).dispose()
-      echarts.init(document.getElementById("myEcharts3")).dispose()
-      echarts.init(document.getElementById("myEcharts4")).dispose()
-      let myChart = echarts.init(document.getElementById("myEcharts"));
-      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
-      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
-      let myChart4 = echarts.init(document.getElementById("myEcharts4"));
+      getXrgl(2).then((res)=>{
+        console.log('1',res)
+        data.tempIn=res.data.tempIn
+        data.tempOut=res.data.tempOut
+        data.totp = res.data.totp
+        data.totwh = res.data.totwh
+        if(res.data.runStatus==1){
+          data.runStatus = '开启'
+        }else if (res.data.runStatus==2){
+          data.runStatus = '关闭'
+        }
+        //gl
+        delete res.data.todayUsePowers.deviceId
+        delete res.data.todayUsePowers.samDate
+        let arr = Object.values(res.data.todayUsePowers)
+        data.glData=arr
+        let myChart3 = echarts.getInstanceByDom(document.getElementById("myEcharts3"));
+        if (myChart3){
+          myChart3.dispose()
+        }
+        myChart3 = echarts.init(document.getElementById("myEcharts3"));
+        myChart3.setOption({
+          title: {},
+          tooltip: {},
+          textStyle:{
+            color:'#BEC3DA'
+          },
+          xAxis: {
+            data: data.glXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            name: "kW",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+          },
+          series: [
+            {
+              name: "当前功率",
+              type: "line",
+              data: data.glData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart3.resize();
+        };
+      })
+      getXcgl(2).then((res)=>{
+        console.log(res)
+      })
+
+
+
+      let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
+      if (myChart){
+        myChart.dispose()
+      }
+      myChart = echarts.init(document.getElementById("myEcharts"));
+
+      let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
+      if (myChart2){
+        myChart2.dispose()
+      }
+      myChart2 = echarts.init(document.getElementById("myEcharts2"));
+
+
+
+      let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
+      if (myChart4){
+        myChart4.dispose()
+      }
+      myChart4 = echarts.init(document.getElementById("myEcharts4"));
       // 绘制图表
       myChart.setOption({
         title: {},
@@ -176,53 +372,7 @@ export default {
       window.onresize = function () {//自适应大小
         myChart2.resize();
       };
-      myChart3.setOption({
-        title: {},
-        tooltip: {},
-        textStyle:{
-          color:'#BEC3DA'
-        },
-        xAxis: {
-          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
-          axisLine:{
-            lineStyle:{
-              color:'#BEC3DA',
-              type:'dashed'
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: "kW",
-          splitLine:{
-            show:true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
-            }
-          },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
-            }
-          },
-        },
-        series: [
-          {
-            name: "当前功率",
-            type: "line",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
-            },
-          },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart3.resize();
-      };
+
       myChart4.setOption({
         title: {},
         tooltip: {},
@@ -287,6 +437,9 @@ export default {
         myChart4.resize();
       };
     });
+    return{
+      data
+    }
   },
   components: {},
   mounted() {},