|
|
@@ -1,28 +1,504 @@
|
|
|
<template>
|
|
|
- <div id="app">
|
|
|
- <img alt="Vue logo" src="./assets/logo.png">
|
|
|
- <HelloWorld msg="Welcome to Your Vue.js App"/>
|
|
|
- </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ :cell-class-name="addClass"
|
|
|
+ style="width: 100%;color:black">
|
|
|
+ <el-table-column
|
|
|
+ label="序号"
|
|
|
+ width="50">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="prj_name"
|
|
|
+ label="项目名称"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="box_name"
|
|
|
+ label="盒子名称"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="online_status"
|
|
|
+ label="在线状态"
|
|
|
+ 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>-->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="running_mode"
|
|
|
+ label="运行模式"
|
|
|
+ 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>-->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="主机控制器">
|
|
|
+ <el-table-column
|
|
|
+ prop="host_connect_status"
|
|
|
+ label="通讯状态"
|
|
|
+ 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>-->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="host_fault"
|
|
|
+ label="故障"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="host_su_temp"
|
|
|
+ label="供水水温(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="host_re_temp"
|
|
|
+ label="回水水温(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="host_temp_diff"
|
|
|
+ label="温差"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="新风控制器">
|
|
|
+ <el-table-column
|
|
|
+ prop="nt_connect_status"
|
|
|
+ label="通讯状态"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="nt_fault"
|
|
|
+ label="故障"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="nt_in_temp"
|
|
|
+ label="送风温度(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="nt_in_humidity"
|
|
|
+ label="送风湿度(%)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="nt_dew_point"
|
|
|
+ label="露点(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="换热站控制器">
|
|
|
+ <el-table-column
|
|
|
+ prop="hex_connect_status"
|
|
|
+ label="通讯状态"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="hex_fault"
|
|
|
+ label="故障"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="hex_su_temp"
|
|
|
+ label="供水水温(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="hex_re_temp"
|
|
|
+ label="回水水温(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="hex_temp_diff"
|
|
|
+ label="温差(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="hex_pump_status"
|
|
|
+ label="水泵状态"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="末端控制器">
|
|
|
+ <el-table-column
|
|
|
+ prop="end_exception_num"
|
|
|
+ label="通讯异常数量"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="end_min_temp"
|
|
|
+ label="最低室内温度(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="end_min_humidity"
|
|
|
+ label="最低室内湿度(%)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="end_min_dew_point"
|
|
|
+ label="最低室内露点(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="end_max_temp"
|
|
|
+ label="最高室内温度(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="end_max_humidity"
|
|
|
+ label="最高室内湿度(%)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="end_max_dew_point"
|
|
|
+ label="最高室内露点(℃)"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import HelloWorld from './components/HelloWorld.vue'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'App',
|
|
|
- components: {
|
|
|
- HelloWorld
|
|
|
- }
|
|
|
-}
|
|
|
+ export default {
|
|
|
+ methods:{
|
|
|
+ addClass({row,column,rowIndex,columnIndex}){
|
|
|
+ // console.log(columnIndex)
|
|
|
+ // console.log(row,column,rowIndex)
|
|
|
+ if(columnIndex === 3){
|
|
|
+ if(row.online_status == '在线'){
|
|
|
+ return 'cell-green';
|
|
|
+ }else if(row.online_status == '离线'){
|
|
|
+ return 'cell-grey';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(columnIndex === 4){
|
|
|
+ if(row.running_mode == '制冷'){
|
|
|
+ return 'cell-green';
|
|
|
+ }else if(row.running_mode == '采暖'){
|
|
|
+ return 'cell-grey';
|
|
|
+ }else if(row.running_mode == '预热'){
|
|
|
+ return 'cell-grey';
|
|
|
+ }else if(row.running_mode == '通风'){
|
|
|
+ return 'cell-grey';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '在线',
|
|
|
+ running_mode: '制冷',
|
|
|
+ host_connect_status: '异常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ },{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '离线',
|
|
|
+ running_mode: '采暖',
|
|
|
+ host_connect_status: '异常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ },{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '在线',
|
|
|
+ running_mode: '预热',
|
|
|
+ host_connect_status: '正常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ },{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '离线',
|
|
|
+ running_mode: '通风',
|
|
|
+ host_connect_status: '正常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ },{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '在线',
|
|
|
+ running_mode: '制冷',
|
|
|
+ host_connect_status: '正常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ },{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '离线',
|
|
|
+ running_mode: '制冷',
|
|
|
+ host_connect_status: '异常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ },{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '在线',
|
|
|
+ running_mode: '制冷',
|
|
|
+ host_connect_status: '正常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ },{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '在线',
|
|
|
+ running_mode: '制冷',
|
|
|
+ host_connect_status: '正常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ },{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '离线',
|
|
|
+ running_mode: '制冷',
|
|
|
+ host_connect_status: '正常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ },{
|
|
|
+ prj_name: '滨江公寓',
|
|
|
+ box_name: '盒子',
|
|
|
+ online_status: '在线',
|
|
|
+ running_mode: '制冷',
|
|
|
+ host_connect_status: '正常',
|
|
|
+ host_fault: '有',
|
|
|
+ host_su_temp: '20.0',
|
|
|
+ host_re_temp: '22.0',
|
|
|
+ host_temp_diff: '2.0',
|
|
|
+ nt_connect_status: '正常',
|
|
|
+ nt_fault: '有',
|
|
|
+ nt_in_temp: '20.0',
|
|
|
+ nt_in_humidity: '91.0',
|
|
|
+ nt_dew_point: '12.0',
|
|
|
+ hex_connect_status: '正常',
|
|
|
+ hex_fault: '无',
|
|
|
+ hex_su_temp: '20.0',
|
|
|
+ hex_re_temp: '22.0',
|
|
|
+ hex_temp_diff: '2.0',
|
|
|
+ hex_pump_status: '运行',
|
|
|
+ end_exception_num: '11',
|
|
|
+ end_min_temp: '11.0',
|
|
|
+ end_min_humidity: '56',
|
|
|
+ end_min_dew_point: '7.0',
|
|
|
+ end_max_temp: '29',
|
|
|
+ end_max_humidity: '87',
|
|
|
+ end_max_dew_point: '9.0'
|
|
|
+ }, ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
-
|
|
|
<style>
|
|
|
-#app {
|
|
|
- font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
|
- -webkit-font-smoothing: antialiased;
|
|
|
- -moz-osx-font-smoothing: grayscale;
|
|
|
- text-align: center;
|
|
|
- color: #2c3e50;
|
|
|
- margin-top: 60px;
|
|
|
-}
|
|
|
+ .cell-green{
|
|
|
+ background: #6ea33f;
|
|
|
+ }
|
|
|
+ .cell-grey{
|
|
|
+ background: #9fa09f;
|
|
|
+ }
|
|
|
</style>
|
