119 lines
3.0 KiB
Vue
119 lines
3.0 KiB
Vue
|
||
<template>
|
||
<div v-loading="loading">
|
||
<!-- todo 判断条件是否需要更新-->
|
||
<div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
|
||
<div class="header">
|
||
<div class="header-title">{{item.systemName}}</div>
|
||
<div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
|
||
<div>当前温度：<span class="header-values">{{item.currentTemperature}}℃</span></div>
|
||
</div>
|
||
<div class="content">
|
||
<el-row>
|
||
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">{{tempDataItem.title}}：{{item[tempDataItem.attr]}}℃</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||
import {getCoolingDataList} from '@/api/ems/dzjk'
|
||
export default {
|
||
name:'DzjkSbjkYl',
|
||
mixins:[getQuerySiteId],
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
list:[],
|
||
tempData:[
|
||
{title:'制热开启点',attr:'heatingStartPoint'},
|
||
{title:'制冷开启点',attr:'coolingStartPoint'},
|
||
{title:'高温告警点',attr:'highTempAlarmPoint'},
|
||
{title:'制热停止点',attr:'heatingStopPoint'},
|
||
{title:'制冷停止点',attr:'coolingStopPoint'},
|
||
{title:'低温告警点',attr:'lowTempAlarmPoint'},
|
||
|
||
]
|
||
}
|
||
},
|
||
methods:{
|
||
init(){
|
||
this.loading = true
|
||
getCoolingDataList(this.siteId).then(response => {
|
||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||
}).finally(() => {this.loading = false})
|
||
}
|
||
},
|
||
mounted(){
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.yl-item-container{
|
||
border-radius: 5px;
|
||
background-color: #EBF6F6;
|
||
&:not(:last-child){
|
||
margin-bottom: 25px;
|
||
}
|
||
.header{
|
||
line-height: 40px;
|
||
font-size: 14px;
|
||
>div{
|
||
display: inline-block;
|
||
margin-right: 40px;
|
||
}
|
||
.header-title{
|
||
border-radius: 5px 0 5px 0;
|
||
color:#ffffff;
|
||
width: 120px;
|
||
height: 40px;
|
||
font-size: 16px;
|
||
background-color: #05AEA3;
|
||
text-align: center;
|
||
}
|
||
.header-values{
|
||
color: #05AEA3;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.content{
|
||
padding:25px;
|
||
.el-row{
|
||
background-color: #ffffff;
|
||
border:1px solid #eeeeee;
|
||
line-height: 14px;
|
||
color: #333333;
|
||
font-size: 12px;
|
||
.el-col{
|
||
padding:10px 0;
|
||
text-align: center;
|
||
}
|
||
.el-col:nth-child(-n+3){
|
||
border-bottom: 1px solid #eeeeee;
|
||
}
|
||
.el-col:not(:nth-child(3n)){
|
||
border-right: 1px solid #eeeeee;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.yl-warn-item-container{
|
||
background-color: #FFF1F0;
|
||
.header{
|
||
.header-title{
|
||
background-color: #FC6B69;
|
||
}
|
||
.header-values{
|
||
color: #FC6B69;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|