diff --git a/psdc-ui/src/api/emonitor/api.js b/psdc-ui/src/api/emonitor/api.js
index 99a166c..12013d7 100644
--- a/psdc-ui/src/api/emonitor/api.js
+++ b/psdc-ui/src/api/emonitor/api.js
@@ -35,6 +35,6 @@ export function getFrld(data) {
     return request.get('/monitor/frdl/index/sel2/'+data)
 }
 //温度传感器
-export function getWdcgq(data) {
-    return request.get('/monitor/wdcgq/index/sel1/'+data)
+export function getWdcgq() {
+    return request.get('/monitor/wdcgq/index/sel1')
 }
diff --git a/psdc-ui/src/views/emonitor/db/index.vue b/psdc-ui/src/views/emonitor/db/index.vue
index 2e4395f..160350b 100644
--- a/psdc-ui/src/views/emonitor/db/index.vue
+++ b/psdc-ui/src/views/emonitor/db/index.vue
@@ -2,28 +2,28 @@
   <div class="app-container home">
     <div class="top">
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/功率.png"></div>
         <div>
           <p>当前功率</p>
           <h2>{{data.totp}}kW</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/用电量.png"></div>
         <div>
           <p>日用电量</p>
           <h2>{{data.eday}}kWh</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/用电量.png"></div>
         <div>
           <p>月用电量</p>
           <h2>{{data.emonth}}kWh</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/用电量.png"></div>
         <div>
           <p>累计用电量</p>
           <h2>{{data.totwh}}kWh</h2>
diff --git a/psdc-ui/src/views/emonitor/drgl/index.vue b/psdc-ui/src/views/emonitor/drgl/index.vue
index 863f906..6f5ad1c 100644
--- a/psdc-ui/src/views/emonitor/drgl/index.vue
+++ b/psdc-ui/src/views/emonitor/drgl/index.vue
@@ -2,37 +2,37 @@
   <div class="app-container home">
     <div class="top">
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/用电量.png"></div>
         <div>
           <p>总用电量</p>
-          <h2>1641kWh</h2>
+          <h2>{{data.totwh}}kWh</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/功率.png"></div>
         <div>
           <p>当前功率</p>
-          <h2>11kW</h2>
+          <h2>{{data.totp}}kW</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/温度.png"></div>
         <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>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/温度传感器.png"></div>
         <div>
           <p>运行状态</p>
-          <h2 style="color: #1ab394">开启</h2>
+          <h2 style="color: #1ab394">{{data.runStatus}}</h2>
         </div>
       </div>
     </div>
@@ -42,7 +42,7 @@
         <div class="bottom1-1">
           日用电量
         </div>
-        <div id="myEcharts1" style="width: 100%; height: 86.7%"></div>
+        <div id="myEcharts" style="width: 100%; height: 86.7%"></div>
       </div>
       <div class="bottom1">
         <div class="bottom1-1">
@@ -68,249 +68,434 @@
 
 <script  name="Index">
 import {getDrgl, getDcgl} from '../../../api/emonitor/api'
-import { onMounted } from "vue";
+import {onMounted, reactive} from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "drgl",
   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"
+      ],
+      dayData:[],
+      dayXz:[],
+      emonthData:[],
+      emonthXz:[
+        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],
+      temIn:'',
+      temOut:'',
+      time:'',
+    })
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
       // 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"));
-      // 绘制图表
-      myChart1.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'
-            }
+        //日用电量
+        let arr = []
+        let brr = []
+        for(let i in res.dcglqhour){
+          arr.push(res.dcglqhour[i].useElectric)
+          brr.push(res.dcglqhour[i].hour)
+        }
+        data.dayData=arr
+        data.dayXz=brr
+        let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
+        if (myChart){
+          myChart.dispose()
+        }
+        myChart = echarts.init(document.getElementById("myEcharts"));
+        myChart.setOption({
+          title: {},
+          tooltip: {},
+          textStyle:{
+            color:'#BEC3DA'
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.dayXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-          },
-        series: [
-          {
-            name: "日用电量",
-            type: "bar",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "kWh",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart.resize();
-      };
-      myChart2.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'
-            }
+          series: [
+            {
+              name: "日用电量",
+              type: "bar",
+              data: data.dayData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart.resize();
+        };
+
+        //月用电量
+        let crr = []
+        for(let i in res.dcglqday){
+          crr.push(res.dcglqday[i].useElectric)
+        }
+        data.emonthData=crr
+        let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
+        if (myChart2){
+          myChart2.dispose()
+        }
+        myChart2 = echarts.init(document.getElementById("myEcharts2"));
+
+        myChart2.setOption({
+          title: {},
+          tooltip: {},
+          textStyle:{
+            color:'#BEC3DA'
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.emonthXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: "月用电量",
-            type: "bar",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "kWh",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      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',
+          series: [
+            {
+              name: "月用电量",
+              type: "bar",
+              data: data.emonthData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart2.resize();
+        };
+
+        //进出水温度
+        data.time=res.times
+        data.temIn=res.tempIn
+        data.temOut=res.tempOut
+
+        let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
+        if (myChart4){
+          myChart4.dispose()
+        }
+        myChart4 = echarts.init(document.getElementById("myEcharts4"));
+        myChart4.setOption({
+          title: {},
+          tooltip: {},
+          legend: {
+            data: ['进水', '出水'],
+            textStyle:{
               color:'#BEC3DA'
             }
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          textStyle:{
+            color:'#BEC3DA'
+          },
+          xAxis: {
+            data: data.time,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: "当前功率",
-            type: "line",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "℃",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart3.resize();
-      };
-      myChart4.setOption({
-        title: {},
-        tooltip: {},
-        legend: {
-          data: ['进水', '出水'],
+          series: [
+            {
+              name: '进水',
+              type: 'line',
+              stack: 'Total',
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+              data: data.temIn
+            },
+            {
+              name: '出水',
+              type: 'line',
+              stack: 'Total',
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+              data: data.temOut
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart4.resize();
+        };
+      })
+      getDrgl(1).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
+        delete res.data.todayUsePowers.userId
+        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'
-          }
-        },
-        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: "℃",
-          splitLine:{
-            show:true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
-            }
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.glXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: '进水',
-            type: 'line',
-            stack: 'Total',
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "kW",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: '出水',
-            type: 'line',
-            stack: 'Total',
-            itemStyle:{
-              color:'#2F8EE0'
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
-            data: [220, 182, 191, 234, 290, 330, 310]
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart4.resize();
-      };
+          series: [
+            {
+              name: "当前功率",
+              type: "line",
+              data: data.glData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart3.resize();
+        };
+      })
+
+
     });
+    return {
+      data
+    }
   },
   components: {},
   mounted() {},
diff --git a/psdc-ui/src/views/emonitor/frdl/index.vue b/psdc-ui/src/views/emonitor/frdl/index.vue
index 706f69b..066566a 100644
--- a/psdc-ui/src/views/emonitor/frdl/index.vue
+++ b/psdc-ui/src/views/emonitor/frdl/index.vue
@@ -2,21 +2,21 @@
   <div class="app-container home">
     <div class="top">
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/用电量.png"></div>
         <div>
           <p>总用电量</p>
           <h2>1641kWh</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/功率.png"></div>
         <div>
           <p>当前功率</p>
           <h2>11kW</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/温度.png"></div>
         <div>
           <div>
             <p>当前温度</p>
@@ -25,7 +25,7 @@
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/温度传感器.png"></div>
         <div>
           <p>运行状态</p>
           <h2 style="color: #1ab394">开启</h2>
@@ -64,234 +64,414 @@
 
 <script name="Index">
 import {getFrdl, getFrld} from '../../../api/emonitor/api'
-import { onMounted } from "vue";
+import {onMounted, reactive} from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "frdl",
   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"
+      ],
+      dayData:[],
+      dayXz:[],
+      emonthData:[],
+      emonthXz:[
+        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],
+      tem:'',
+      time:'',
+    })
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
-      getFrld(4).then((res)=>{
+      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: {},
-        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'
-            }
+        //日用电量
+        let arr = []
+        let brr = []
+        for(let i in res.frdlqhour){
+          arr.push(res.frdlqhour[i].useElectric)
+          brr.push(res.frdlqhour[i].hour)
+        }
+        data.dayData=arr
+        data.dayXz=brr
+        let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
+        if (myChart){
+          myChart.dispose()
+        }
+        myChart = echarts.init(document.getElementById("myEcharts"));
+        myChart.setOption({
+          title: {},
+          tooltip: {},
+          textStyle:{
+            color:'#BEC3DA'
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.dayXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: "日用电量",
-            type: "bar",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "kWh",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart.resize();
-      };
-      myChart2.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'
-            }
+          series: [
+            {
+              name: "日用电量",
+              type: "bar",
+              data: data.dayData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart.resize();
+        };
+
+        //月用电量
+        let crr = []
+        for(let i in res.frdlqday){
+          crr.push(res.frdlqday[i].useElectric)
+        }
+        data.emonthData=crr
+        let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
+        if (myChart2){
+          myChart2.dispose()
+        }
+        myChart2 = echarts.init(document.getElementById("myEcharts2"));
+
+        myChart2.setOption({
+          title: {},
+          tooltip: {},
+          textStyle:{
+            color:'#BEC3DA'
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.emonthXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: "月用电量",
-            type: "bar",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "kWh",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      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'
-            }
+          series: [
+            {
+              name: "月用电量",
+              type: "bar",
+              data: data.emonthData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart2.resize();
+        };
+
+        //进出水温度
+        data.time=res.times
+        data.tem=res.temps
+
+
+        let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
+        if (myChart4){
+          myChart4.dispose()
+        }
+        myChart4 = echarts.init(document.getElementById("myEcharts4"));
+        myChart4.setOption({
+          title: {},
+          tooltip: {},
+          textStyle:{
+            color:'#BEC3DA'
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.time,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: "当前功率",
-            type: "line",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "℃",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart3.resize();
-      };
-      myChart4.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: "℃",
-          splitLine:{
-            show:true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
-            }
+          series: [
+            {
+              name: '当前温度',
+              type: 'line',
+              stack: 'Total',
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+              data: data.tem
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart4.resize();
+        };
+      })
+      getFrdl(4).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
+        delete res.data.todayUsePowers.userId
+        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'
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.glXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: '当前温度',
-            type: 'line',
-            stack: 'Total',
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "kW",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
-            data: [120, 132, 101, 134, 90, 230, 210]
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart4.resize();
-      };
-    });
+          series: [
+            {
+              name: "当前功率",
+              type: "line",
+              data: data.glData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart3.resize();
+        };
+      })
+
+    })
+    return{
+      data
+    }
   },
   components: {},
   mounted() {},
diff --git a/psdc-ui/src/views/emonitor/kqyrb/index.vue b/psdc-ui/src/views/emonitor/kqyrb/index.vue
index 214c012..4fa2746 100644
--- a/psdc-ui/src/views/emonitor/kqyrb/index.vue
+++ b/psdc-ui/src/views/emonitor/kqyrb/index.vue
@@ -2,37 +2,37 @@
   <div class="app-container home">
     <div class="top">
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/用电量.png"></div>
         <div>
           <p>总用电量</p>
-          <h2>1641kWh</h2>
+          <h2>{{data.totwh}}kWh</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/功率.png"></div>
         <div>
           <p>当前功率</p>
-          <h2>11kW</h2>
+          <h2>{{data.totp}}kW</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/温度.png"></div>
         <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>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/温度传感器.png"></div>
         <div>
           <p>运行状态</p>
-          <h2 style="color: #1ab394">开启</h2>
+          <h2 style="color: #1ab394">{{data.runStatus}}</h2>
         </div>
       </div>
     </div>
@@ -68,248 +68,431 @@
 
 <script  name="Index">
 import {getKqryb, getKqyrb} from '../../../api/emonitor/api'
-import { onMounted } from "vue";
+import {onMounted, reactive} from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "kqyrb",
   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"
+      ],
+      dayData:[],
+      dayXz:[],
+      emonthData:[],
+      emonthXz:[
+        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],
+      temIn:'',
+      temOut:'',
+      time:'',
+    })
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
       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: {},
-        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'
-            }
+        //日用电量
+        let arr = []
+        let brr = []
+        for(let i in res.kqyrbqhour){
+          arr.push(res.kqyrbqhour[i].useElectric)
+          brr.push(res.kqyrbqhour[i].hour)
+        }
+        data.dayData=arr
+        data.dayXz=brr
+        let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
+        if (myChart){
+          myChart.dispose()
+        }
+        myChart = echarts.init(document.getElementById("myEcharts"));
+        myChart.setOption({
+          title: {},
+          tooltip: {},
+          textStyle:{
+            color:'#BEC3DA'
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.dayXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: "日用电量",
-            type: "bar",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "kWh",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart.resize();
-      };
-      myChart2.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'
-            }
+          series: [
+            {
+              name: "日用电量",
+              type: "bar",
+              data: data.dayData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart.resize();
+        };
+
+        //月用电量
+        let crr = []
+        for(let i in res.kqyrbqday){
+          crr.push(res.kqyrbqday[i].useElectric)
+        }
+        data.emonthData=crr
+        let myChart2 = echarts.getInstanceByDom(document.getElementById("myEcharts2"));
+        if (myChart2){
+          myChart2.dispose()
+        }
+        myChart2 = echarts.init(document.getElementById("myEcharts2"));
+
+        myChart2.setOption({
+          title: {},
+          tooltip: {},
+          textStyle:{
+            color:'#BEC3DA'
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.emonthXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: "月用电量",
-            type: "bar",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "kWh",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      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',
+          series: [
+            {
+              name: "月用电量",
+              type: "bar",
+              data: data.emonthData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart2.resize();
+        };
+
+        //进出水温度
+        data.time=res.times
+        data.temIn=res.tempIn
+        data.temOut=res.tempOut
+
+        let myChart4 = echarts.getInstanceByDom(document.getElementById("myEcharts4"));
+        if (myChart4){
+          myChart4.dispose()
+        }
+        myChart4 = echarts.init(document.getElementById("myEcharts4"));
+        myChart4.setOption({
+          title: {},
+          tooltip: {},
+          legend: {
+            data: ['进水', '出水'],
+            textStyle:{
               color:'#BEC3DA'
             }
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          textStyle:{
+            color:'#BEC3DA'
+          },
+          xAxis: {
+            data: data.time,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: "当前功率",
-            type: "line",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "℃",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart3.resize();
-      };
-      myChart4.setOption({
-        title: {},
-        tooltip: {},
-        legend: {
-          data: ['进水', '出水'],
+          series: [
+            {
+              name: '进水',
+              type: 'line',
+              stack: 'Total',
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+              data: data.temIn
+            },
+            {
+              name: '出水',
+              type: 'line',
+              stack: 'Total',
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+              data: data.temOut
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart4.resize();
+        };
+      })
+      getKqryb(3).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
+        delete res.data.todayUsePowers.userId
+        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'
-          }
-        },
-        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: "℃",
-          splitLine:{
-            show:true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
-            }
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          xAxis: {
+            data: data.glXz,
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: '进水',
-            type: 'line',
-            stack: 'Total',
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "kW",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: '出水',
-            type: 'line',
-            stack: 'Total',
-            itemStyle:{
-              color:'#2F8EE0'
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
-            data: [220, 182, 191, 234, 290, 330, 310]
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart4.resize();
-      };
+          series: [
+            {
+              name: "当前功率",
+              type: "line",
+              data: data.glData,
+              itemStyle:{
+                color:'#2F8EE0'
+              },
+            },
+          ],
+        });
+        window.onresize = function () {//自适应大小
+          myChart3.resize();
+        };
+      })
+
+
     });
+    return{
+      data
+    }
   },
   components: {},
   mounted() {},
diff --git a/psdc-ui/src/views/emonitor/wdcgq/index.vue b/psdc-ui/src/views/emonitor/wdcgq/index.vue
index b6757ee..124795a 100644
--- a/psdc-ui/src/views/emonitor/wdcgq/index.vue
+++ b/psdc-ui/src/views/emonitor/wdcgq/index.vue
@@ -1,60 +1,11 @@
 <template>
   <div class="app-container home">
     <div class="top">
-      <div class="card">
-        <div>pic</div>
+      <div class="card" v-for="(item,index) in data.info ">
+        <div><img src="../../../assets/images/温度.png"></div>
         <div>
-          <p>温度传感器1</p>
-          <h2>40℃</h2>
-        </div>
-      </div>
-      <div class="card">
-        <div>pic</div>
-        <div>
-          <p>温度传感器2</p>
-          <h2>41℃</h2>
-        </div>
-      </div>
-      <div class="card">
-        <div>pic</div>
-        <div>
-          <p>温度传感器3</p>
-          <h2>33℃</h2>
-        </div>
-      </div>
-      <div class="card">
-        <div>pic</div>
-        <div>
-          <p>温度传感器4</p>
-          <h2>36℃</h2>
-        </div>
-      </div>
-      <div class="card">
-        <div>pic</div>
-        <div>
-          <p>温度传感器5</p>
-          <h2>35℃</h2>
-        </div>
-      </div>
-      <div class="card">
-        <div>pic</div>
-        <div>
-          <p>温度传感器6</p>
-          <h2>37℃</h2>
-        </div>
-      </div>
-      <div class="card">
-        <div>pic</div>
-        <div>
-          <p>温度传感器7</p>
-          <h2>38℃</h2>
-        </div>
-      </div>
-      <div class="card">
-        <div>pic</div>
-        <div>
-          <p>温度传感器8</p>
-          <h2>32℃</h2>
+          <p>{{item.name}}</p>
+          <h2>{{item.temp}}℃</h2>
         </div>
       </div>
     </div>
@@ -72,76 +23,203 @@
 
 <script  name="Index">
 import {getWdcgq} from '../../../api/emonitor/api'
-import { onMounted } from "vue";
+import {onMounted, reactive} from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "wdcgq",
   setup() {
+    let data = reactive({
+      info:[],
+      xinfo:[],
+      infos: [
+        {
+          name: "温度传感器1",
+          type: "line",
+          data: [5, 20, 36, 10, 10, 20],
+          itemStyle:{
+            color:'#2F8EE0'
+          },
+        },
+        {
+          name: "温度传感器2",
+          type: "line",
+          data: [25, 40, 66, 80, 120, 50],
+          itemStyle:{
+            color:'#2F8EE0'
+          },
+        },
+      ],
+    })
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
       //温度传感器1-8  id 5-12
+      getWdcgq().then((res)=>{
+        console.log(res)
+        let arr = []
+        let brr = []
+        let crr = []
+        for (let i in res.data){
+          arr.push({name:res.data[i].deviceName,temp:res.data[i].deviceTemp})
+          brr.push({name:res.data[i].deviceName,type: "line",data:res.data[i].temps,itemStyle:{color:'#2F8EE0'}})
+          crr.push(res.data[i].times)
+        }
+   console.log(crr)
+         data.info=arr
+        data.infos=brr
+        data.xinfo=crr
 
-
-
-      let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
-      if (myChart){
-        myChart.dispose()
-      }
-      myChart = echarts.init(document.getElementById("myEcharts"));
-      // 绘制图表
-      myChart.setOption({
-        title: {},
-        tooltip: {},
-        legend: {
-          data: ['温度传感器1','温度传感器2'],
-          textStyle:{
-            color:'#BEC3DA'
-          }
-        },
-        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: "℃",
-          splitLine:{
-            show:true,
-            lineStyle:{
-              type:'dashed',
+        let myChart = echarts.getInstanceByDom(document.getElementById("myEcharts"));
+        if (myChart){
+          myChart.dispose()
+        }
+        myChart = echarts.init(document.getElementById("myEcharts"));
+        // 绘制图表
+        myChart.setOption({
+          title: {},
+          tooltip: {},
+          legend: {
+            selectedMode: 'single',
+            textStyle:{
               color:'#BEC3DA'
             }
           },
-          axisLine: {
-            show: true,
-            lineStyle:{
-              type:'dashed',
-              color:'#BEC3DA'
+          textStyle:{
+            color:'#BEC3DA'
+          },
+          xAxis: {
+            data: [
+              "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"
+            ],
+            axisLine:{
+              lineStyle:{
+                color:'#BEC3DA',
+                type:'dashed'
+              }
             }
           },
-        },
-        series: [
-          {
-            name: "温度传感器1",
-            type: "line",
-            data: [5, 20, 36, 10, 10, 20],
-            itemStyle:{
-              color:'#2F8EE0'
+          yAxis: {
+            type: 'value',
+            name: "℃",
+            splitLine:{
+              show:true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                type:'dashed',
+                color:'#BEC3DA'
+              }
             },
           },
-        ],
-      });
-      window.onresize = function () {//自适应大小
-        myChart.resize();
-      };
+          series:data.infos,
+        });
+        window.onresize = function () {//自适应大小
+          myChart.resize();
+        };
+      })
+
     });
+    return{
+      data
+    }
   },
   components: {},
   mounted() {},
diff --git a/psdc-ui/src/views/emonitor/xrgl/index.vue b/psdc-ui/src/views/emonitor/xrgl/index.vue
index 5f73a26..39f5ece 100644
--- a/psdc-ui/src/views/emonitor/xrgl/index.vue
+++ b/psdc-ui/src/views/emonitor/xrgl/index.vue
@@ -2,21 +2,21 @@
   <div class="app-container home">
     <div class="top">
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/用电量.png"></div>
         <div>
           <p>总用电量</p>
           <h2>{{data.totwh}}kWh</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/功率.png"></div>
         <div>
           <p>当前功率</p>
           <h2>{{data.totp}}kW</h2>
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/温度.png"></div>
         <div>
           <div style="display: flex; margin-bottom: 5px">
             <p>进水温度:</p>
@@ -29,7 +29,7 @@
         </div>
       </div>
       <div class="card">
-        <div>pic</div>
+        <div><img src="../../../assets/images/温度传感器.png"></div>
         <div>
           <p>运行状态</p>
           <h2 style="color: #1ab394">{{data.runStatus}}</h2>
@@ -429,7 +429,6 @@ export default {
           title: {},
           tooltip: {},
           legend: {
-            data: ['进水', '出水'],
             textStyle:{
               color:'#BEC3DA'
             }
@@ -490,14 +489,6 @@ export default {
         };
       })
 
-
-
-
-
-
-
-
-
     });
     return{
       data