|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div>
|
|
|
- <input type="text" placeholder="请输入项目名称" v-model="projectName" />
|
|
|
- <input type="text" placeholder="请输入盒子名称" v-model="boxName" />
|
|
|
+ <el-input type="text" placeholder="请输入项目名称" v-model="projectName" style="width: 150px;"/>
|
|
|
+ <el-input type="text" placeholder="请输入盒子名称" v-model="boxName" style="width: 150px;"/>
|
|
|
<el-select v-model="online" placeholder="请选择在线状态">
|
|
|
<el-option
|
|
|
v-for="item in onlineOptions"
|
|
|
@@ -21,7 +21,8 @@
|
|
|
</el-select>
|
|
|
<el-button>搜 索</el-button>
|
|
|
</div>
|
|
|
- <el-table
|
|
|
+ <el-table :header-cell-style="{backgroundColor: '#ccc'}"
|
|
|
+ :resizable="true"
|
|
|
class="el-table"
|
|
|
:data="tableData"
|
|
|
:cell-class-name="addClass"
|
|
|
@@ -48,89 +49,146 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="online_status"
|
|
|
- label="在线状态"
|
|
|
+ label="在线状态" align="center"
|
|
|
width="120">
|
|
|
- <!-- <template slot-scope="scope">-->
|
|
|
- <!-- <div style="background:yellowgreen;color: black"-->
|
|
|
- <!-- v-if="scope.row.online_status === '在线'">{{scope.row.online_status}}</div>-->
|
|
|
- <!-- <div style="background:grey;color: black"-->
|
|
|
- <!-- v-else>{{scope.row.online_status}}</div>-->
|
|
|
- <!-- </template>-->
|
|
|
+
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center"
|
|
|
+ v-if="scope.row.online_status === '在线'">{{scope.row.online_status}}</div>
|
|
|
+ <div style="background:lightgrey;color: black;text-align: center"
|
|
|
+ v-else>{{scope.row.online_status}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="running_mode"
|
|
|
- label="运行模式"
|
|
|
+ label="运行模式" align="center"
|
|
|
width="100">
|
|
|
- <!-- <template slot-scope="scope">-->
|
|
|
- <!-- <div style="background:darkgreen;color: black"-->
|
|
|
- <!-- v-if="scope.row.running_mode === '制冷'">{{scope.row.running_mode}}</div>-->
|
|
|
- <!-- <div style="background:orange;color: black"-->
|
|
|
- <!-- v-if="scope.row.running_mode === '采暖'">{{scope.row.running_mode}}</div>-->
|
|
|
- <!-- <div style="background:yellow;color: black"-->
|
|
|
- <!-- v-if="scope.row.running_mode === '预热'">{{scope.row.running_mode}}</div>-->
|
|
|
- <!-- <div style="background:#b6aee3;color: black"-->
|
|
|
- <!-- v-if="scope.row.running_mode === '通风'">{{scope.row.running_mode}}</div>-->
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:darkgreen;color: black;text-align: center"
|
|
|
+ v-if="scope.row.running_mode === '制冷'">{{scope.row.running_mode}}</div>
|
|
|
+ <div style="background:orange;color: black;text-align: center"
|
|
|
+ v-if="scope.row.running_mode === '采暖'">{{scope.row.running_mode}}</div>
|
|
|
+ <div style="background:yellow;color: black;text-align: center"
|
|
|
+ v-if="scope.row.running_mode === '预热'">{{scope.row.running_mode}}</div>
|
|
|
+ <div style="background:#b6aee3;color: black;text-align: center"
|
|
|
+ v-if="scope.row.running_mode === '通风'">{{scope.row.running_mode}}</div>
|
|
|
|
|
|
- <!-- </template>-->
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="主机控制器">
|
|
|
+ <el-table-column label="主机控制器" align="center">
|
|
|
<el-table-column
|
|
|
prop="host_connect_status"
|
|
|
- label="通讯状态"
|
|
|
+ label="通讯状态" align="center"
|
|
|
width="120">
|
|
|
- <!-- <template slot-scope="scope">-->
|
|
|
- <!-- <div style="background:darkgreen;color: black"-->
|
|
|
- <!-- v-if="scope.row.host_connect_status === '正常'">{{scope.row.host_connect_status}}</div>-->
|
|
|
- <!-- <div style="background:orange;color: black"-->
|
|
|
- <!-- v-if="scope.row.host_connect_status === '异常'">{{scope.row.host_connect_status}}</div>-->
|
|
|
- <!-- </template>-->
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.host_connect_status === '正常'">{{scope.row.host_connect_status}}</div>
|
|
|
+ <div style="background:yellow;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.host_connect_status === '异常'">{{scope.row.host_connect_status}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="host_fault"
|
|
|
+ prop="host_fault" align="center"
|
|
|
label="故障"
|
|
|
width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellow;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.host_fault === '有'">{{scope.row.host_fault}}</div>
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.host_fault === '无'">{{scope.row.host_fault}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="host_su_temp"
|
|
|
+ prop="host_su_temp" align="center"
|
|
|
label="供水水温(℃)"
|
|
|
width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellow;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.host_su_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.host_su_temp}}</div>
|
|
|
+
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center;"
|
|
|
+ v-else>{{scope.row.host_su_temp}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="host_re_temp"
|
|
|
+ prop="host_re_temp" align="center"
|
|
|
label="回水水温(℃)"
|
|
|
width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellow;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.host_re_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.host_re_temp}}</div>
|
|
|
+
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center;"
|
|
|
+ v-else>{{scope.row.host_re_temp}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="host_temp_diff"
|
|
|
- label="温差"
|
|
|
+ label="温差" align="center"
|
|
|
width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellow;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.host_temp_diff >5">{{scope.row.host_temp_diff}}</div>
|
|
|
+
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center;"
|
|
|
+ v-else>{{scope.row.host_temp_diff}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="新风控制器">
|
|
|
<el-table-column
|
|
|
- prop="nt_connect_status"
|
|
|
+ prop="nt_connect_status" align="center"
|
|
|
label="通讯状态"
|
|
|
width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.nt_connect_status === '正常'">{{scope.row.nt_connect_status}}</div>
|
|
|
+ <div style="background:yellow;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.nt_connect_status === '异常'">{{scope.row.nt_connect_status}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="nt_fault"
|
|
|
+ prop="nt_fault" align="center"
|
|
|
label="故障"
|
|
|
width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellow;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.nt_fault === '有'">{{scope.row.nt_fault}}</div>
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.nt_fault === '无'">{{scope.row.nt_fault}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="nt_in_temp"
|
|
|
+ prop="nt_in_temp" align="center"
|
|
|
label="送风温度(℃)"
|
|
|
width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellow;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.nt_in_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_temp}}</div>
|
|
|
+
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center;"
|
|
|
+ v-else>{{scope.row.nt_in_temp}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="nt_in_humidity"
|
|
|
+ prop="nt_in_humidity" align="center"
|
|
|
label="送风湿度(%)"
|
|
|
width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="background:yellow;color: black;text-align: center;"
|
|
|
+ v-if="scope.row.nt_in_humidity <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.nt_in_humidity}}</div>
|
|
|
+
|
|
|
+ <div style="background:yellowgreen;color: black;text-align: center;"
|
|
|
+ v-else>{{scope.row.nt_in_humidity}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="nt_dew_point"
|
|
|
+ prop="nt_dew_point" align="center"
|
|
|
label="露点(℃)"
|
|
|
width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="text-align: center;">{{scope.row.nt_dew_point}}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
</el-table-column>
|
|
|
|
|
|
@@ -313,8 +371,8 @@
|
|
|
],
|
|
|
tableData: [{
|
|
|
id:1,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '铂睿思雨花展厅',
|
|
|
+ box_name: '铂睿思雨花展厅',
|
|
|
online_status: '在线',
|
|
|
running_mode: '制冷',
|
|
|
host_connect_status: '异常',
|
|
|
@@ -343,8 +401,8 @@
|
|
|
|
|
|
},{
|
|
|
id:2,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '北京中粮祥云',
|
|
|
+ box_name: '北京中粮祥云',
|
|
|
online_status: '离线',
|
|
|
running_mode: '采暖',
|
|
|
host_connect_status: '异常',
|
|
|
@@ -372,8 +430,8 @@
|
|
|
end_max_dew_point: '9.0'
|
|
|
},{
|
|
|
id:3,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '天津温莎堡展厅',
|
|
|
+ box_name: '天津温莎堡展厅',
|
|
|
online_status: '在线',
|
|
|
running_mode: '预热',
|
|
|
host_connect_status: '正常',
|
|
|
@@ -460,8 +518,8 @@
|
|
|
}]
|
|
|
},{
|
|
|
id:4,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '御江金城2-107',
|
|
|
+ box_name: '御江金城2-107',
|
|
|
online_status: '离线',
|
|
|
running_mode: '通风',
|
|
|
host_connect_status: '正常',
|
|
|
@@ -489,8 +547,8 @@
|
|
|
end_max_dew_point: '9.0'
|
|
|
},{
|
|
|
id:5,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '国华印象15-102',
|
|
|
+ box_name: '国华印象15-102',
|
|
|
online_status: '在线',
|
|
|
running_mode: '制冷',
|
|
|
host_connect_status: '正常',
|
|
|
@@ -518,8 +576,8 @@
|
|
|
end_max_dew_point: '9.0'
|
|
|
},{
|
|
|
id:6,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '无庶3-102',
|
|
|
+ box_name: '无庶3-102',
|
|
|
online_status: '离线',
|
|
|
running_mode: '制冷',
|
|
|
host_connect_status: '异常',
|
|
|
@@ -547,8 +605,8 @@
|
|
|
end_max_dew_point: '9.0'
|
|
|
},{
|
|
|
id:7,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '揽江府1-14-6',
|
|
|
+ box_name: '揽江府1-14-6',
|
|
|
online_status: '在线',
|
|
|
running_mode: '制冷',
|
|
|
host_connect_status: '正常',
|
|
|
@@ -576,8 +634,8 @@
|
|
|
end_max_dew_point: '9.0'
|
|
|
},{
|
|
|
id:8,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '颐和美地美嘉苑14-4',
|
|
|
+ box_name: '颐和美地美嘉苑14-4',
|
|
|
online_status: '在线',
|
|
|
running_mode: '制冷',
|
|
|
host_connect_status: '正常',
|
|
|
@@ -605,8 +663,8 @@
|
|
|
end_max_dew_point: '9.0'
|
|
|
},{
|
|
|
id:9,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '九间堂75',
|
|
|
+ box_name: '九间堂75',
|
|
|
online_status: '离线',
|
|
|
running_mode: '制冷',
|
|
|
host_connect_status: '正常',
|
|
|
@@ -634,8 +692,8 @@
|
|
|
end_max_dew_point: '9.0'
|
|
|
},{
|
|
|
id:10,
|
|
|
- prj_name: '滨江公寓',
|
|
|
- box_name: '盒子',
|
|
|
+ prj_name: '涟城10-6',
|
|
|
+ box_name: '涟城10-6',
|
|
|
online_status: '在线',
|
|
|
running_mode: '制冷',
|
|
|
host_connect_status: '正常',
|
|
|
@@ -668,10 +726,10 @@
|
|
|
</script>
|
|
|
<style>
|
|
|
.cell-green{
|
|
|
- background: #6ea33f;
|
|
|
+ /*background: #6ea33f;*/
|
|
|
}
|
|
|
.cell-grey{
|
|
|
- background: #9fa09f;
|
|
|
+ /*background: #9fa09f;*/
|
|
|
}
|
|
|
/* el-table样式 */
|
|
|
.el-table {
|
