Merge remote-tracking branch 'origin/master'

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

@@ -1,6 +1,10 @@
 import request from '@/utils/request'
 
-//8个温度传感器接口
+/** 8个温度传感器接口*/
 export function getTemperature() {
     return request.get('/indexLook/8wd')
+}
+/**运行设备工作信息查询接口*/
+export function getDevicesInfo() {
+    return request.get('/indexLook/devicesInfo')
 }

psdc-ui/src/api/control/manual.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+/** 获取设备*/
+export function getDevice() {
+    return request.get('/control/manual/deviceStatusList')
+}

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/bigview/index.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <div class="header">
       <h2>电能替代分布式控制试验平台</h2>
-      <router-link :to="{path:'/control/manual'}" tag="div" class="back">返回后台</router-link>
+      <router-link :to="{path:'/control/manual'}" tag="div" class="back"><el-icon><HomeFilled /></el-icon></router-link>
     </div>
     <div class="main">
       <div class="left">
@@ -13,14 +13,14 @@
               <img src="../../assets/images/dcgl.png" alt="">
             </div>
             <div class="dev_data">
-              <p>当前状态：<span class="now_tatus">开启</span></p>
-              <p>进水温度：<span class="enter_t"><span>25</span>℃</span></p>
-              <p>出水温度：<span class="leave_t"><span>85</span>℃</span></p>
-              <p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
+              <p>当前状态：<span :class="{'green':dcglRunStatus === '开启','red':xrglRunStatus === '关闭'}">{{ dcglRunStatus }}</span></p>
+              <p>进水温度：<span class="enter_t"><span>{{ dcglThermometerValueIn }}</span>℃</span></p>
+              <p>出水温度：<span class="leave_t"><span>{{ dcglThermometerValueOut }}</span>℃</span></p>
+              <p>今日能耗：<span class="today_tce"><span>{{ dcglTodayUseEnergy }}</span>kWh</span></p>
             </div>
           </div>
           <div class="chart_box">
-            <div class="dev_chart"></div>
+            <div class="dev_chart" id="dcglChart"></div>
           </div>
         </div>
         <div class="left_bottom bgimg">
@@ -30,14 +30,14 @@
               <img src="../../assets/images/蓄热锅炉.png" alt="">
             </div>
             <div class="dev_data">
-              <p>当前状态：<span class="now_tatus">开启</span></p>
-              <p>进水温度：<span class="enter_t"><span>25</span>℃</span></p>
-              <p>出水温度：<span class="leave_t"><span>85</span>℃</span></p>
-              <p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
+              <p>当前状态：<span :class="{'green':xrglRunStatus === '开启','red':xrglRunStatus === '关闭'}">{{ xrglRunStatus }}</span></p>
+              <p>进水温度：<span class="enter_t"><span>{{ xrglThermometerValueIn }}</span>℃</span></p>
+              <p>出水温度：<span class="leave_t"><span>{{ xrglThermometerValueOut }}</span>℃</span></p>
+              <p>今日能耗：<span class="today_tce"><span>{{ xrglTodayUseEnergy }}</span>kWh</span></p>
             </div>
           </div>
           <div class="chart_box">
-            <div class="dev_chart"></div>
+            <div class="dev_chart" id="xrglChart"></div>
           </div>
         </div>
       </div>
@@ -58,50 +58,15 @@
             </div>
         </div>
         <div class="middle_bottom">
-          <div class="chart_box bgimg">
+          <div class="chart_box2 bgimg">
             <div class="title">当前功率</div>
             <div class="nowPower_chart"></div>
           </div>
           <div class="wendu_box">
-            <div class="item">
-              <div class="dev_name">温度传感器1</div>
-              <div class="line"></div>
-              <div class="data">26℃</div>
-            </div>
-            <div class="item">
-              <div class="dev_name">温度传感器2</div>
-              <div class="line"></div>
-              <div class="data">26℃</div>
-            </div>
-            <div class="item">
-              <div class="dev_name">温度传感器3</div>
-              <div class="line"></div>
-              <div class="data">26℃</div>
-            </div>
-            <div class="item">
-              <div class="dev_name">温度传感器4</div>
-              <div class="line"></div>
-              <div class="data">26℃</div>
-            </div>
-            <div class="item">
-              <div class="dev_name">温度传感器5</div>
-              <div class="line"></div>
-              <div class="data">26℃</div>
-            </div>
-            <div class="item">
-              <div class="dev_name">温度传感器6</div>
+            <div class="item" v-for="item in wdcgqArr" :key="item.deviceId">
+              <div class="dev_name">{{ item.deviceName }}</div>
               <div class="line"></div>
-              <div class="data">26℃</div>
-            </div>
-            <div class="item">
-              <div class="dev_name">温度传感器7</div>
-              <div class="line"></div>
-              <div class="data">26℃</div>
-            </div>
-            <div class="item">
-              <div class="dev_name">温度传感器8</div>
-              <div class="line"></div>
-              <div class="data">26℃</div>
+              <div class="data">{{ item.thermometerValue }}℃</div>
             </div>
           </div>
         </div>
@@ -121,7 +86,7 @@
             </div>
           </div>
           <div class="chart_box">
-            <div class="dev_chart"></div>
+            <div class="dev_chart" id="kqyrbChart"></div>
           </div>
         </div>
         <div class="right_bottom bgimg">
@@ -137,7 +102,7 @@
             </div>
           </div>
           <div class="chart_box">
-            <div class="dev_chart"></div>
+            <div class="dev_chart" id="frdlChart"></div>
           </div>
         </div>
       </div>
@@ -146,21 +111,448 @@
 </template>
 
 <script setup name="Index">
-// import {ref,reactive} from 'vue'
-import {getTemperature} from '../../api/bigview/bigview'
+import * as echarts from 'echarts'
+import {HomeFilled} from '@element-plus/icons-vue'
+import {ref,reactive,onMounted,onBeforeUnmount } from 'vue'
+import {getTemperature,getDevicesInfo} from '../../api/bigview/bigview'
 
-getWendu();
+/** 页面加载时*/
+onMounted(()=>{
+  dcglChartFun();
+  kqyrbChartFun();
+  frdlChartFun();
+  getWenduFun();
+  getDevicesInfoFun();
+  xrglChartFun();
+})
 
-const wendi1 = ref(0)
-function getWendu(){
-  console.log('请求接口')
+/** 8个温度传感器数据*/
+const wdcgqArr = ref([])
+function getWenduFun(){
   getTemperature().then((res)=>{
-    console.log(res.data)
+    wdcgqArr.value = res.data
   })
 }
 
+/**运行设备工作信息*/
+//蓄热锅炉运行数据
+const xrglRunStatus = ref()
+const xrglThermometerValueIn = ref()
+const xrglThermometerValueOut = ref()
+const xrglTodayUseEnergy = ref()
+//渲染蓄热锅炉折线图数据
+const xrglTimeList = ref([]);
+const xrglTempInTodayList = ref([]);
+const xrglTempOutTodayList = ref([]);
+function getDevicesInfoFun(){
+  getDevicesInfo().then((res)=>{
+    for(let i = 0;i < res.data.length;i++){
+      if(res.data[i].deviceId == 2){
+        // console.log('蓄热锅炉')
+        if(res.data[i].deviceRunStatus == 1){
+          xrglRunStatus.value = '开启'
+        }else{
+          xrglRunStatus.value = '关闭'
+        }
+        xrglThermometerValueIn.value = res.data[i].thermometerValueIn;
+        xrglThermometerValueOut.value = res.data[i].thermometerValueOut;
+        xrglTodayUseEnergy.value = res.data[i].todayUseEnergy;
+        xrglTimeList.value = res.data[i].timeList;
+        xrglTempInTodayList.value = res.data[i].tempInTodayList;
+        xrglTempOutTodayList.value = res.data[i].tempOutTodayList;
+        xrglChartFun();
+      }
+    }
+  })
+}
+
+let dcglChart;
+let xrglChart;
+let kqyrbChart;
+let frdlChart;
+function dcglChartFun(){
+  const chartDom = document.getElementById('dcglChart')
+  dcglChart = echarts.init(chartDom);
+  const option = {
+    legend: {
+      data: ["进水温度","出水温度"],
+      // selectedMode: 'single',
+      textStyle: {
+        color: "#f3ffff"
+      }
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}： {c0}次",
+      // borderColor: '#00fcff',
+      borderWidth: 1
+    },
+    grid:{
+      show: true,
+      top: '20%',
+      bottom:'15%',
+      left:'10%',
+      right:'3%',
+      borderWidth: 1,
+      borderColor: '#767da1',
+    },
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisLabel: {
+        textStyle: {
+          color: "#f3ffff"
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#767da1' // 设置x轴的线条颜色
+        }
+      },
+      axisTick: {
+        show: false // 去掉x轴刻度
+      },
+      splitArea: {
+        show: true,
+        interval:0,
+        areaStyle: {
+          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
+          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name:'℃',
+      nameTextStyle: {
+        color: "#f3ffff",
+        nameLocation: "start"
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#f3ffff"
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {color: "#767da1", type: "solid"} //dashed
+      } //s是否显示为虚线的条纹背景
+    },
+    series: [
+      {
+        name: "进水温度",
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: '#128dff',
+        }
+      },
+      {
+        name: "出水温度",
+        data: [520, 922, 501, 234, 690, 330, 620],
+        type: 'line',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: '#F5901A',
+        }
+      }
+    ]
+  };
+  option && dcglChart.setOption(option);
+};
+function xrglChartFun(){
+  const chartDom = document.getElementById('xrglChart')
+  xrglChart = echarts.init(chartDom);
+  const option = {
+    legend: {
+      data: ["进水温度","出水温度"],
+      // selectedMode: 'single',
+      textStyle: {
+        color: "#f3ffff"
+      }
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}： {c0}次",
+      // borderColor: '#00fcff',
+      borderWidth: 1
+    },
+    grid:{
+      show: true,
+      top: '20%',
+      bottom:'15%',
+      left:'10%',
+      right:'3%',
+      borderWidth: 1,
+      borderColor: '#767da1',
+    },
+    xAxis: {
+      type: 'category',
+      data: xrglTimeList.value,
+      axisLabel: {
+        textStyle: {
+          color: "#f3ffff"
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#767da1' // 设置x轴的线条颜色
+        }
+      },
+      axisTick: {
+        show: false // 去掉x轴刻度
+      },
+      splitArea: {
+        show: true,
+        interval:0,
+        areaStyle: {
+          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
+          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name:'℃',
+      nameTextStyle: {
+        color: "#f3ffff",
+        nameLocation: "start"
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#f3ffff"
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {color: "#767da1", type: "solid"} //dashed
+      } //s是否显示为虚线的条纹背景
+    },
+    series: [
+      {
+        name: "进水温度",
+        data: xrglTempInTodayList.value,
+        type: 'line',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: '#128dff',
+        }
+      },
+      {
+        name: "出水温度",
+        data: xrglTempOutTodayList.value,
+        type: 'line',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: '#F5901A',
+        }
+      }
+    ]
+  };
+  option && xrglChart.setOption(option);
+};
+function kqyrbChartFun(){
+  const chartDom = document.getElementById('kqyrbChart')
+  kqyrbChart = echarts.init(chartDom);
+  const option = {
+    legend: {
+      data: ["进水温度","出水温度"],
+      // selectedMode: 'single',
+      textStyle: {
+        color: "#f3ffff"
+      }
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}： {c0}次",
+      // borderColor: '#00fcff',
+      borderWidth: 1
+    },
+    grid:{
+      show: true,
+      top: '20%',
+      bottom:'15%',
+      left:'10%',
+      right:'3%',
+      borderWidth: 1,
+      borderColor: '#767da1',
+    },
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisLabel: {
+        textStyle: {
+          color: "#f3ffff"
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#767da1' // 设置x轴的线条颜色
+        }
+      },
+      axisTick: {
+        show: false // 去掉x轴刻度
+      },
+      splitArea: {
+        show: true,
+        interval:0,
+        areaStyle: {
+          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
+          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name:'℃',
+      nameTextStyle: {
+        color: "#f3ffff",
+        nameLocation: "start"
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#f3ffff"
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {color: "#767da1", type: "solid"} //dashed
+      } //s是否显示为虚线的条纹背景
+    },
+    series: [
+      {
+        name: "进水温度",
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: '#128dff',
+        }
+      },
+      {
+        name: "出水温度",
+        data: [520, 922, 501, 234, 690, 330, 620],
+        type: 'line',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: '#F5901A',
+        }
+      }
+    ]
+  };
+  option && kqyrbChart.setOption(option);
+};
+function frdlChartFun(){
+  const chartDom = document.getElementById('frdlChart')
+  frdlChart = echarts.init(chartDom);
+  const option = {
+    legend: {
+      data: ["进水温度","出水温度"],
+      // selectedMode: 'single',
+      textStyle: {
+        color: "#f3ffff"
+      }
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}： {c0}次",
+      // borderColor: '#00fcff',
+      borderWidth: 1
+    },
+    grid:{
+      show: true,
+      top: '20%',
+      bottom:'15%',
+      left:'10%',
+      right:'3%',
+      borderWidth: 1,
+      borderColor: '#767da1',
+    },
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisLabel: {
+        textStyle: {
+          color: "#f3ffff"
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#767da1' // 设置x轴的线条颜色
+        }
+      },
+      axisTick: {
+        show: false // 去掉x轴刻度
+      },
+      splitArea: {
+        show: true,
+        interval:0,
+        areaStyle: {
+          color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
+          //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name:'℃',
+      nameTextStyle: {
+        color: "#f3ffff",
+        nameLocation: "start"
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#f3ffff"
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {color: "#767da1", type: "solid"} //dashed
+      } //s是否显示为虚线的条纹背景
+    },
+    series: [
+      {
+        name: "进水温度",
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: '#128dff',
+        }
+      },
+      {
+        name: "出水温度",
+        data: [520, 922, 501, 234, 690, 330, 620],
+        type: 'line',
+        smooth: true,
+        symbol: "none", //去掉圆点
+        itemStyle: { //线条颜色
+          color: '#F5901A',
+        }
+      }
+    ]
+  };
+  option && frdlChart.setOption(option);
+};
+
 
 
+
+/** 页面销毁时*/
+onBeforeUnmount(() => {
+  dcglChart.dispose(); // 销毁实例，防止内存泄漏
+  xrglChart.dispose();
+  kqyrbChart.dispose();
+  frdlChart.dispose();
+});
 </script>
 
 <style scoped lang="scss">
@@ -183,12 +575,15 @@ function getWendu(){
     }
     .back{
       position: absolute;
-      top: 5px;
-      right: 20px;
+      top: 0px;
+      right: 30px;
       font-size: 16px;
       color: #fff;
-      padding: 8px 15px;
-      background-color: #2c3e50;
+      padding: 9px 15px;
+      border: 1px solid #dddddd00;
+      &:hover{
+        border: 1px solid #dddddd70;
+      }
     }
   }
   .main{
@@ -296,7 +691,7 @@ function getWendu(){
         flex-wrap: nowrap;
         height: 33%;
         width: 100%;
-        .chart_box{
+        .chart_box2{
           width: 49.5%;
           height: 100%;
           .nowPower_chart{
@@ -394,9 +789,12 @@ function getWendu(){
       font-size: 16px;
       line-height: 40px;
     }
-    .now_tatus{
+    .green{
       color: #14FF00;
     }
+    .red{
+      color: red;
+    }
     .enter_t{
       color: #F5901A;
     }
@@ -414,11 +812,11 @@ function getWendu(){
 .chart_box{
   width: 100%;
   height: 44%;
-  padding: 0 10px 10px 10px;
+  padding: 10px 10px 10px 10px;
   .dev_chart{
     width: 100%;
     height: 100%;
-    border: 1px solid #fff;
+    //border: 1px solid #fff;
   }
 }
 .bgimg{

psdc-ui/src/views/control/manual/index.vue

@@ -2,18 +2,18 @@
   <div class="app-container home">
     <el-button type="primary" :icon="Download" @click="drawerIshow = true">策略导入</el-button>
     <div class="dev_control_wrapper">
-      <div class="dev_control_item">
+      <div class="dev_control_item" v-for="item in deviceArr" :key="item.deviceId">
         <div class="item_header">
-          <span>电热锅炉</span>
-          <el-switch v-model="value1" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
+          <span>{{ item.deviceName}}</span>
+          <el-switch v-model="item.deviceId" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
         </div>
         <div class="item_bottom">
           <div class="item_bottom_img">
-            <img src="./src/assets/images/dcgl.png" alt="">
+            <img :src="item.photoUrl" alt="">
           </div>
           <div class="item_bottom_form">
             <el-form :model="form1">
-              <el-form-item label="当前状态："><span class="green">开启</span></el-form-item>
+              <el-form-item label="当前状态："><span :class="{'green':item.deviceRunstatus === '开启','red':item.deviceRunstatus === '关闭'}">{{ item.deviceRunstatus }}</span></el-form-item>
               <el-form-item label="进水温度："><el-input v-model="form1.enter" /></el-form-item>
               <el-form-item label="出水温度："><el-input v-model="form1.leave" /></el-form-item>
               <div class="submit" @click="onSubmit1">确定</div>
@@ -21,107 +21,107 @@
           </div>
         </div>
       </div>
-      <div class="dev_control_item">
-        <div class="item_header">
-          <span>空气源热泵</span>
-          <el-switch v-model="value2" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
-        </div>
-        <div class="item_bottom">
-          <div class="item_bottom_img">
-            <img src="./src/assets/images/空气源热泵.png" alt="">
-          </div>
-          <div class="item_bottom_form">
-            <el-form :model="form2">
-              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
-              <el-form-item label="进水温度："><el-input v-model="form2.enter" /></el-form-item>
-              <el-form-item label="出水温度："><el-input v-model="form2.leave" /></el-form-item>
-              <div class="submit" @click="onSubmit2">确定</div>
-            </el-form>
-          </div>
-        </div>
-      </div>
-      <div class="dev_control_item">
-        <div class="item_header">
-          <span>发热电缆</span>
-          <el-switch v-model="value3" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
-        </div>
-        <div class="item_bottom">
-          <div class="item_bottom_img">
-            <img src="./src/assets/images/发热电缆.png" alt="">
-          </div>
-          <div class="item_bottom_form">
-            <el-form :model="form3">
-              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
-              <el-form-item label="当前温度："><el-input v-model="form3.now" /></el-form-item>
-              <div class="submit" @click="onSubmit3">确定</div>
-            </el-form>
-          </div>
-        </div>
-      </div>
-      <div class="dev_control_item">
-        <div class="item_header">
-          <span>风机盘管</span>
-          <el-switch v-model="value4" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
-        </div>
-        <div class="item_bottom">
-          <div class="item_bottom_img">
-            <img src="./src/assets/images/风机盘管.png" alt="">
-          </div>
-          <div class="item_bottom_form">
-            <el-form>
-              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
-            </el-form>
-          </div>
-        </div>
-      </div>
-      <div class="dev_control_item">
-        <div class="item_header">
-          <span>水泵</span>
-          <el-switch v-model="value5" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
-        </div>
-        <div class="item_bottom">
-          <div class="item_bottom_img">
-            <img src="./src/assets/images/水泵.png" alt="">
-          </div>
-          <div class="item_bottom_form">
-            <el-form>
-              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
-            </el-form>
-          </div>
-        </div>
-      </div>
-      <div class="dev_control_item">
-        <div class="item_header">
-          <span>蓄热锅炉</span>
-          <el-switch v-model="value6" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
-        </div>
-        <div class="item_bottom">
-          <div class="item_bottom_img">
-            <img src="./src/assets/images/蓄热锅炉.png" alt="">
-          </div>
-          <div class="item_bottom_form">
-            <el-form>
-              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
-            </el-form>
-          </div>
-        </div>
-      </div>
-      <div class="dev_control_item">
-        <div class="item_header">
-          <span>沙盘</span>
-          <el-switch v-model="value7" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
-        </div>
-        <div class="item_bottom">
-          <div class="item_bottom_img">
-            <img src="./src/assets/images/沙盘.png" alt="">
-          </div>
-          <div class="item_bottom_form">
-            <el-form>
-              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>
-            </el-form>
-          </div>
-        </div>
-      </div>
+<!--      <div class="dev_control_item">-->
+<!--        <div class="item_header">-->
+<!--          <span>空气源热泵</span>-->
+<!--          <el-switch v-model="value2" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
+<!--        </div>-->
+<!--        <div class="item_bottom">-->
+<!--          <div class="item_bottom_img">-->
+<!--            <img src="./src/assets/images/空气源热泵.png" alt="">-->
+<!--          </div>-->
+<!--          <div class="item_bottom_form">-->
+<!--            <el-form :model="form2">-->
+<!--              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
+<!--              <el-form-item label="进水温度："><el-input v-model="form2.enter" /></el-form-item>-->
+<!--              <el-form-item label="出水温度："><el-input v-model="form2.leave" /></el-form-item>-->
+<!--              <div class="submit" @click="onSubmit2">确定</div>-->
+<!--            </el-form>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="dev_control_item">-->
+<!--        <div class="item_header">-->
+<!--          <span>发热电缆</span>-->
+<!--          <el-switch v-model="value3" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
+<!--        </div>-->
+<!--        <div class="item_bottom">-->
+<!--          <div class="item_bottom_img">-->
+<!--            <img src="./src/assets/images/发热电缆.png" alt="">-->
+<!--          </div>-->
+<!--          <div class="item_bottom_form">-->
+<!--            <el-form :model="form3">-->
+<!--              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
+<!--              <el-form-item label="当前温度："><el-input v-model="form3.now" /></el-form-item>-->
+<!--              <div class="submit" @click="onSubmit3">确定</div>-->
+<!--            </el-form>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="dev_control_item">-->
+<!--        <div class="item_header">-->
+<!--          <span>风机盘管</span>-->
+<!--          <el-switch v-model="value4" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
+<!--        </div>-->
+<!--        <div class="item_bottom">-->
+<!--          <div class="item_bottom_img">-->
+<!--            <img src="./src/assets/images/风机盘管.png" alt="">-->
+<!--          </div>-->
+<!--          <div class="item_bottom_form">-->
+<!--            <el-form>-->
+<!--              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
+<!--            </el-form>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="dev_control_item">-->
+<!--        <div class="item_header">-->
+<!--          <span>水泵</span>-->
+<!--          <el-switch v-model="value5" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
+<!--        </div>-->
+<!--        <div class="item_bottom">-->
+<!--          <div class="item_bottom_img">-->
+<!--            <img src="./src/assets/images/水泵.png" alt="">-->
+<!--          </div>-->
+<!--          <div class="item_bottom_form">-->
+<!--            <el-form>-->
+<!--              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
+<!--            </el-form>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="dev_control_item">-->
+<!--        <div class="item_header">-->
+<!--          <span>蓄热锅炉</span>-->
+<!--          <el-switch v-model="value6" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
+<!--        </div>-->
+<!--        <div class="item_bottom">-->
+<!--          <div class="item_bottom_img">-->
+<!--            <img src="./src/assets/images/蓄热锅炉.png" alt="">-->
+<!--          </div>-->
+<!--          <div class="item_bottom_form">-->
+<!--            <el-form>-->
+<!--              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
+<!--            </el-form>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="dev_control_item">-->
+<!--        <div class="item_header">-->
+<!--          <span>沙盘</span>-->
+<!--          <el-switch v-model="value7" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
+<!--        </div>-->
+<!--        <div class="item_bottom">-->
+<!--          <div class="item_bottom_img">-->
+<!--            <img src="./src/assets/images/沙盘.png" alt="">-->
+<!--          </div>-->
+<!--          <div class="item_bottom_form">-->
+<!--            <el-form>-->
+<!--              <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
+<!--            </el-form>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
     </div>
     <div class="dev_control_table">
       <div class="control_header"><span>调控日志</span></div>
@@ -164,12 +164,25 @@
 </template>
 
 <script setup name="Index">
-import { Share,Download } from '@element-plus/icons-vue'  //element字体图标
-import { ref,reactive } from 'vue'
+import { Download } from '@element-plus/icons-vue'  //element字体图标
+import { ref,reactive,onMounted } from 'vue'
 import { ElMessageBox } from 'element-plus'
+import { getDevice } from '@/api/control/manual'
 
+onMounted(()=>{
+  getDeviceFun();
+})
+
+/** 获取所有设备*/
+const deviceArr = ref([])
+function getDeviceFun(){
+  getDevice().then((res)=>{
+    console.log(res.data)
+    deviceArr.value = res.data
+  })
+}
 
-//设备控制处理
+/** 设备控制处理*/
 const value1 = ref(true)
 const value2 = ref(false)
 const value3 = ref(false)
@@ -198,7 +211,7 @@ const onSubmit3 = () => {
   console.log('确定')
 }
 
-//数据表格处理
+/** 数据表格处理*/
 const controlList = reactive([
     {
       devName:'11',
@@ -241,7 +254,7 @@ const handleCurrentChange = (val) => {
   console.log(`current page: ${val}`)
 }
 
-//策略导入处理
+/** 策略导入处理*/
 const drawerIshow = ref(false)
 const radio = ref()
 function confirmClick() {
@@ -264,7 +277,7 @@ function confirmClick() {
     height: 50%;
     overflow-y: auto;
     .dev_control_item{
-      width: 24.46%;
+      width: 24.45%;
       height: 47%;
       margin-right: 12px;
       margin-bottom: 12px;
@@ -310,10 +323,10 @@ function confirmClick() {
           //border: 1px solid red;
           padding: 0 10px 0 0;
           .green{
-            color: #00ff07;
+            color: #14FF00;
           }
           .red{
-            color: #ff0000;
+            color: red;
           }
           .submit{
             padding: 3px 15px;

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() {},