11

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/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;