You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
9.7 KiB
310 lines
9.7 KiB
<template>
|
|
<div class="app-container home">
|
|
<el-button type="primary" :icon="Download">策略导入</el-button>
|
|
<div class="dev_control_wrapper">
|
|
<div class="dev_control_item">
|
|
<div class="item_header">
|
|
<span>电热锅炉</span>
|
|
<el-switch v-model="value1" 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="">
|
|
</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="进水温度："><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>
|
|
</el-form>
|
|
</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>
|
|
<div class="dev_control_table">
|
|
<div class="control_header"><span>调控日志</span></div>
|
|
<div class="control_table">
|
|
<el-table v-loading="loading" :data="controlList" @selection-change="handleSelectionChange">
|
|
<el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
|
|
<el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
|
|
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
|
|
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[3].visible" width="120" />
|
|
<el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
|
|
<template #default="scope">
|
|
<el-switch
|
|
v-model="scope.row.status"
|
|
active-value="0"
|
|
inactive-value="1"
|
|
@change="handleStatusChange(scope.row)"
|
|
></el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[4].visible" width="160">
|
|
<template #default="scope">
|
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="Index">
|
|
import { Share,Download } from '@element-plus/icons-vue' //element字体图标
|
|
import { ref,reactive } from 'vue'
|
|
|
|
|
|
const value1 = ref(true)
|
|
const value2 = ref(false)
|
|
const value3 = ref(false)
|
|
const value4 = ref(false)
|
|
const value5 = ref(false)
|
|
const value6 = ref(false)
|
|
const value7 = ref(false)
|
|
const form1 = reactive({
|
|
enter:'',
|
|
leave:'',
|
|
})
|
|
const form2 = reactive({
|
|
enter:'',
|
|
leave:'',
|
|
})
|
|
const form3 = reactive({
|
|
now:'',
|
|
})
|
|
|
|
const onSubmit1 = () => {
|
|
console.log('确定')
|
|
}
|
|
const onSubmit2 = () => {
|
|
console.log('确定')
|
|
}
|
|
const onSubmit3 = () => {
|
|
console.log('确定')
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.home {
|
|
height: calc(100vh - 118px);
|
|
.dev_control_wrapper{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
height: 50%;
|
|
overflow-y: auto;
|
|
.dev_control_item{
|
|
width: 24.46%;
|
|
height: 47%;
|
|
margin-right: 12px;
|
|
margin-bottom: 12px;
|
|
background-color: #2F3D8A;
|
|
overflow: hidden;
|
|
&:nth-child(4n){
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.item_header{
|
|
width: 100%;
|
|
height: 20%;
|
|
background-color: #374590;
|
|
padding: 0 10px;
|
|
span{
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: 37px;
|
|
}
|
|
.switch{
|
|
float: right;
|
|
line-height: 37px;
|
|
height: 37px;
|
|
}
|
|
}
|
|
.item_bottom{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 80%;
|
|
.item_bottom_img{
|
|
width: 40%;
|
|
height: 100%;
|
|
//border: 1px solid red;
|
|
padding: 10px;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.item_bottom_form{
|
|
width: 60%;
|
|
height: 100%;
|
|
//border: 1px solid red;
|
|
padding: 0 10px 0 0;
|
|
.green{
|
|
color: #00ff07;
|
|
}
|
|
.red{
|
|
color: #ff0000;
|
|
}
|
|
.submit{
|
|
padding: 3px 15px;
|
|
border-radius: 2px;
|
|
background-color: #2F8EED;
|
|
float: right;
|
|
margin-top: 8px;
|
|
cursor: pointer;
|
|
&:hover{
|
|
background-color: #5ba2f3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dev_control_table{
|
|
width: 100%;
|
|
height: 50%;
|
|
background-color: #2F3D8A;
|
|
.control_header{
|
|
width: 100%;
|
|
height: 10%;
|
|
background-color: #374590;
|
|
padding: 0 10px;
|
|
span{
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: 37px;
|
|
}
|
|
}
|
|
.control_table{
|
|
width: 100%;
|
|
height: 90%;
|
|
border: 1px solid red;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .el-button{
|
|
border-radius: 2px;
|
|
margin-bottom: 12px;
|
|
}
|
|
::v-deep .el-switch__core .el-switch__action{
|
|
top: 1px;
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
::v-deep .el-form-item--default{
|
|
margin-bottom: 3px;
|
|
}
|
|
::v-deep .el-input__inner{
|
|
color: #f3ffff;
|
|
}
|
|
</style>
|
|
|
|
|