hwj_system
/
scmy
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11

Browse Source
master
wj 2 years ago
parent 67cd85bede
commit ae1843cf0d
4 changed files with 603 additions and 182 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      psdc-ui/src/api/bigview/bigview.js
  2. 6
      psdc-ui/src/api/control/manual.js
  3. 532
      psdc-ui/src/views/bigview/index.vue
  4. 241
      psdc-ui/src/views/control/manual/index.vue

6
psdc-ui/src/api/bigview/bigview.js
Unescape View File

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

6
psdc-ui/src/api/control/manual.js
Unescape View File

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

532
psdc-ui/src/views/bigview/index.vue
Unescape View File

@ -2,7 +2,7 @@
<div class="home"> <div class="home">
<div class="header"> <div class="header">
<h2>电能替代分布式控制试验平台</h2> <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>
<div class="main"> <div class="main">
<div class="left"> <div class="left">
@ -13,14 +13,14 @@
<img src="../../assets/images/dcgl.png" alt=""> <img src="../../assets/images/dcgl.png" alt="">
</div> </div>
<div class="dev_data"> <div class="dev_data">
<p>当前状态：<span class="now_tatus">开启</span></p> <p>当前状态：<span :class="{'green':dcglRunStatus === '开启','red':xrglRunStatus === '关闭'}">{{ dcglRunStatus }}</span></p>
<p>进水温度：<span class="enter_t"><span>25</span>℃</span></p> <p>进水温度：<span class="enter_t"><span>{{ dcglThermometerValueIn }}</span>℃</span></p>
<p>出水温度：<span class="leave_t"><span>85</span>℃</span></p> <p>出水温度：<span class="leave_t"><span>{{ dcglThermometerValueOut }}</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p> <p>今日能耗：<span class="today_tce"><span>{{ dcglTodayUseEnergy }}</span>kWh</span></p>
</div> </div>
</div> </div>
<div class="chart_box"> <div class="chart_box">
<div class="dev_chart"></div> <div class="dev_chart" id="dcglChart"></div>
</div> </div>
</div> </div>
<div class="left_bottom bgimg"> <div class="left_bottom bgimg">
@ -30,14 +30,14 @@
<img src="../../assets/images/蓄热锅炉.png" alt=""> <img src="../../assets/images/蓄热锅炉.png" alt="">
</div> </div>
<div class="dev_data"> <div class="dev_data">
<p>当前状态：<span class="now_tatus">开启</span></p> <p>当前状态：<span :class="{'green':xrglRunStatus === '开启','red':xrglRunStatus === '关闭'}">{{ xrglRunStatus }}</span></p>
<p>进水温度：<span class="enter_t"><span>25</span>℃</span></p> <p>进水温度：<span class="enter_t"><span>{{ xrglThermometerValueIn }}</span>℃</span></p>
<p>出水温度：<span class="leave_t"><span>85</span>℃</span></p> <p>出水温度：<span class="leave_t"><span>{{ xrglThermometerValueOut }}</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p> <p>今日能耗：<span class="today_tce"><span>{{ xrglTodayUseEnergy }}</span>kWh</span></p>
</div> </div>
</div> </div>
<div class="chart_box"> <div class="chart_box">
<div class="dev_chart"></div> <div class="dev_chart" id="xrglChart"></div>
</div> </div>
</div> </div>
</div> </div>
@ -58,50 +58,15 @@
</div> </div>
</div> </div>
<div class="middle_bottom"> <div class="middle_bottom">
<div class="chart_box bgimg"> <div class="chart_box2 bgimg">
<div class="title">当前功率</div> <div class="title">当前功率</div>
<div class="nowPower_chart"></div> <div class="nowPower_chart"></div>
</div> </div>
<div class="wendu_box"> <div class="wendu_box">
<div class="item"> <div class="item" v-for="item in wdcgqArr" :key="item.deviceId">
<div class="dev_name">温度传感器1</div> <div class="dev_name">{{ item.deviceName }}</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="line"></div> <div class="line"></div>
<div class="data">26℃</div> <div class="data">{{ item.thermometerValue }}℃</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> </div>
</div> </div>
</div> </div>
@ -121,7 +86,7 @@
</div> </div>
</div> </div>
<div class="chart_box"> <div class="chart_box">
<div class="dev_chart"></div> <div class="dev_chart" id="kqyrbChart"></div>
</div> </div>
</div> </div>
<div class="right_bottom bgimg"> <div class="right_bottom bgimg">
@ -137,7 +102,7 @@
</div> </div>
</div> </div>
<div class="chart_box"> <div class="chart_box">
<div class="dev_chart"></div> <div class="dev_chart" id="frdlChart"></div>
</div> </div>
</div> </div>
</div> </div>
@ -146,21 +111,448 @@
</template> </template>
<script setup name="Index"> <script setup name="Index">
// import {ref,reactive} from 'vue' import * as echarts from 'echarts'
import {getTemperature} from '../../api/bigview/bigview' 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) /** 8个温度传感器数据*/
function getWendu(){ const wdcgqArr = ref([])
console.log('请求接口') function getWenduFun(){
getTemperature().then((res)=>{ 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -183,12 +575,15 @@ function getWendu(){
} }
.back{ .back{
position: absolute; position: absolute;
top: 5px; top: 0px;
right: 20px; right: 30px;
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
padding: 8px 15px; padding: 9px 15px;
background-color: #2c3e50; border: 1px solid #dddddd00;
&:hover{
border: 1px solid #dddddd70;
}
} }
} }
.main{ .main{
@ -296,7 +691,7 @@ function getWendu(){
flex-wrap: nowrap; flex-wrap: nowrap;
height: 33%; height: 33%;
width: 100%; width: 100%;
.chart_box{ .chart_box2{
width: 49.5%; width: 49.5%;
height: 100%; height: 100%;
.nowPower_chart{ .nowPower_chart{
@ -394,9 +789,12 @@ function getWendu(){
font-size: 16px; font-size: 16px;
line-height: 40px; line-height: 40px;
} }
.now_tatus{ .green{
color: #14FF00; color: #14FF00;
} }
.red{
color: red;
}
.enter_t{ .enter_t{
color: #F5901A; color: #F5901A;
} }
@ -414,11 +812,11 @@ function getWendu(){
.chart_box{ .chart_box{
width: 100%; width: 100%;
height: 44%; height: 44%;
padding: 0 10px 10px 10px; padding: 10px 10px 10px 10px;
.dev_chart{ .dev_chart{
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #fff; //border: 1px solid #fff;
} }
} }
.bgimg{ .bgimg{

241
psdc-ui/src/views/control/manual/index.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save