添加末端信息弹窗

src/api/box.js

@@ -97,6 +97,11 @@ export function getBoxDetail(data) {
   return post(base + 'box/detail', data)
 }
 
+//获取盒子详情
+export function getBoxDetailById(data) {
+  return post(base + 'box/detailById', data)
+}
+
 //更新盒子信息
 export function updateBox(data) {
   return post(base + 'box/update', data)

src/styles/element-ui.scss

@@ -125,11 +125,9 @@
   width: 100%;
 }
 
-
-
-.el-input-number .el-input__inner {
-  text-align: left !important;
-}
+// .el-input-number .el-input__inner {
+//   text-align: left !important;
+// }
 
 .el-input-number--medium {
   width: 100% !important;

src/views/equip-management/report/PopEndInfo.vue

@@ -0,0 +1,233 @@
+<template>
+	<div class="end-popup">
+		<!-- 左侧区域与单机 -->
+		<div class="end-popup__left">
+			<div v-for="(area, section) in areaList" :key="section" class="end-area-section">
+				<div class="end-area-title">{{ area }}</div>
+				<div class="end-area-group">
+					<div class="end-area-item" :style="{
+						'background': item.selection ? '#007aff' : '',
+						'color': item.selection ? '#fff' : '#333'
+					}" v-for="(item, row) in areaMap[area]" :key="row"
+						@click="handleItemClick(section, row)">
+						<div>{{ item.cbName }}</div>
+						<div>{{ '通道: ' + item.cbMainComChan + '&nbsp;&nbsp;&nbsp;地址: ' + item.cbMainComAdd }}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 右侧末端信息 -->
+		<div class="end-popup__right">
+			<div 
+				class="end-prop-title" 
+				v-if="selection.cbOrder && selection.cbName"
+			>
+				{{ selection.cbName + '(' + selection.cbOrder + ')' }}
+			</div>
+			<div v-if="universal">
+				<div class="end-prop-item" v-for="(item, index) in universal" :key="index" v-if="item.name">
+					<div style="min-width: 40%;">{{ item.name }}:</div>
+					<div>{{ item.value }}</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getBoxDetailById } from "@/api/box";
+import { getRunState } from "@/api/box-debug";
+import { currentUserName } from "@/utils/trace";
+export default {
+	name: "PopEndInfo",
+	props: {
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+		data: {
+			type: Object,
+			default: () => { },
+		},
+	},
+	data() {
+		return {
+			areaList: [],
+			areaMap: {},
+			// 记录选中的位置
+			lastIndexPath: {
+				section: 0,
+				row: 0
+			},
+			// 所选设备信息
+			selection: {
+				id: undefined,
+				cbOrder: undefined,
+				cbName: undefined
+			},
+			// 属性
+			universal: [],
+		};
+	},
+	watch: {
+		visible(val) {
+			if (!val) {
+				return;
+			}
+			this.$nextTick(function () {
+				this.getBoxDetail();
+			});
+		},
+	},
+	methods: {
+		// 获取盒子信息
+		async getBoxDetail() {
+			const res = await getBoxDetailById({
+				box_id: this.data.boxId,
+				current_user_id: currentUserName(),
+			});
+			if (res.code === 200) {
+				this.areaList = [];
+				this.areaMap = {};
+				const data = JSON.parse(res.result);
+				const end = data.end || {};
+				const standalone = end.standalone || [];
+				// 房间分组排序
+				standalone.forEach((item, index) => {
+					// 默认选中第一个
+					item.selection = (index == 0);
+					// 房间名称放入数组，保证顺序
+					const areaIndex = this.areaList.findIndex((a) => a === item.area);
+					if (areaIndex < 0) {
+						this.areaList.push(item.area);
+					}
+					// 放入字典方便存取
+					let devices = this.areaMap[item.area];
+					if (!Array.isArray(devices) || !devices.length) {
+						devices = [];
+					}
+					devices.push(item);
+					this.areaMap[item.area] = devices;
+				});
+
+				// 获取实时数据
+				if (standalone.length > 0) {
+					const first = standalone[0];
+					this.selection.id = first.id;
+					this.selection.cbOrder = first.cbOrder;
+					this.selection.cbName = first.cbName;
+					this.getRunState();
+				}
+			}
+		},
+		// 获取实时数据
+		async getRunState() {
+			const res = await getRunState({ 
+				box_id: this.data.boxId, 
+				type: "endCtrl"
+			});
+			if (res.code === 200) {
+				const data = res.data || {};
+				const standalone = data.standalone || [];
+				for (let index = 0; index < standalone.length; index++) {
+					const element = standalone[index];
+					if (element.cbOrder == this.selection.cbOrder) {
+						this.universal = element.write_io.universal || [];
+						this.universal.push(element.read_io.universal || []);
+					}
+				}
+			}
+		},
+		// 点击
+		handleItemClick(section, row) {
+			if (section == this.lastIndexPath.section && row == this.lastIndexPath.row) {
+				return;
+			}
+			const lastArea = this.areaList[this.lastIndexPath.section];
+			const lastDevice = this.areaMap[lastArea][this.lastIndexPath.row];
+			lastDevice.selection = false;
+
+			const area = this.areaList[section];
+			const device = this.areaMap[area][row];
+			device.selection = true;
+
+			this.$forceUpdate();
+
+			this.selection.id = device.id;
+			this.selection.cbOrder = device.cbOrder;
+			this.selection.cbName = device.cbName;
+			this.getRunState();
+
+			this.lastIndexPath.section = section;
+			this.lastIndexPath.row = row;
+		}
+	},
+	created() {
+		this.getBoxDetail();
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.end-popup {
+	width: 100%;
+	padding: 8px 20px 0;
+	display: flex;
+	justify-content: space-between;
+
+	.end-popup__left {
+		height: 600px;
+		width: 40%;
+		padding-right: 24px;
+		overflow-y: auto;
+
+		.end-area-section {
+			margin-bottom: 24px;
+
+			.end-area-title {
+				font-size: 20px;
+				font-weight: 700;
+				margin-top: 6px;
+			}
+
+			.end-area-group {
+				margin-top: 12px;
+				border-radius: 5px;
+				border: 1px solid #d5d5d5;
+				padding: 10px;
+
+				.end-area-item {
+					font-size: 16px;
+					color: #333;
+					line-height: 36px;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+				}
+			}
+		}
+	}
+
+	.end-popup__right {
+		height: 600px;
+		width: 60%;
+		padding: 6px 24px 0;
+		overflow-y: auto;
+
+		.end-prop-title {
+			margin-top: 30px;
+			font-size: 24px;
+			font-weight: 700;
+			line-height: 66px;
+			margin-bottom: 15px;
+		}
+
+		.end-prop-item {
+			line-height: 40px;
+			font-size: 18px;
+			font-weight: 500;
+			display: flex;
+		}
+	}
+}
+</style>

src/views/equip-management/report/list.vue

@@ -1,77 +1,98 @@
 <template>
-	<div class="box-management-container">
-<!--		<div class="title">智能报表</div>-->
+	<div id="container" class="box-management-container">
+		<!--		<div class="title">智能报表</div>-->
 		<div class="bottom">
 			<div style="padding-top: 12px;">
 				<el-form :inline="true" :model="queryParams" ref="queryRef" v-show="true" label-width="60px">
 					<el-form-item label="" prop="province">
-						<el-select size="small" v-model="operateSubjectForm.province" @visible-change="getProvinceListFnc" placeholder="省"  @change="provinceChange" clearable>
-							<el-option v-for="(item, index) in provinceOption" :label="item.province" :value="item.province" :key="+new Date() + index"></el-option>
+						<el-select size="small" v-model="operateSubjectForm.province" @visible-change="getProvinceListFnc"
+							placeholder="省" @change="provinceChange" clearable>
+							<el-option v-for="(item, index) in provinceOption" :label="item.province" :value="item.province"
+								:key="+new Date() + index"></el-option>
 						</el-select></el-form-item>
 					<el-form-item>
-						<el-select size="small" v-model="operateSubjectForm.city" @visible-change="getCityListFnc" placeholder="市" @change="cityChange"  clearable>
-							<el-option v-for="(item, index) in cityOption" :label="item.city" :value="item.city" :key="+new Date() + index"></el-option>
+						<el-select size="small" v-model="operateSubjectForm.city" @visible-change="getCityListFnc" placeholder="市"
+							@change="cityChange" clearable>
+							<el-option v-for="(item, index) in cityOption" :label="item.city" :value="item.city"
+								:key="+new Date() + index"></el-option>
 						</el-select>
-						<!--				<el-select v-model="operateSubjectForm.area" @visible-change="getAreaListFunc" placeholder="请选择" @change="areaChange" :disabled="detailTypeComp" clearable>-->
-						<!--					<el-option v-for="(item, index) in areaOption" :label="item.area_cn" :value="item.area_cn" :key="item + index"></el-option>-->
-						<!--				</el-select>-->
-						<!--				<el-select v-model="operateSubjectForm.district" @visible-change="getDistrictListFunc" placeholder="请选择" :disabled="detailTypeComp" clearable>-->
-						<!--					<el-option v-for="(item, index) in districtOption" :label="item.district" :value="item.district" :key="item + index"></el-option>-->
-						<!--				</el-select>-->
+						<!-- <el-select v-model="operateSubjectForm.area" @visible-change="getAreaListFunc" placeholder="请选择" @change="areaChange" :disabled="detailTypeComp" clearable>
+							<el-option v-for="(item, index) in areaOption" :label="item.area_cn" :value="item.area_cn" :key="item + index"></el-option>
+						</el-select>
+						<el-select v-model="operateSubjectForm.district" @visible-change="getDistrictListFunc" placeholder="请选择" :disabled="detailTypeComp" clearable>
+							<el-option v-for="(item, index) in districtOption" :label="item.district" :value="item.district" :key="item + index"></el-option>
+						</el-select> -->
 					</el-form-item>
-<!--					<el-form-item>-->
-<!--						<el-input-->
-<!--								v-model="queryParams.project_name"-->
-<!--								placeholder="请输入项目名称"-->
-<!--								clearable-->
-<!--								size="small"-->
-<!--								@keyup.enter="handleQuery"-->
-<!--						/>-->
-<!--					</el-form-item>-->
-					<el-form-item>
+					<!-- <el-form-item>
 						<el-input
-								v-model="queryParams.box_name"
-								placeholder="请输入盒子名称"
-								clearable
-								size="small"
-								@keyup.enter="handleQuery"
+							v-model="queryParams.project_name"
+							placeholder="请输入项目名称"
+							clearable
+							size="small"
+							@keyup.enter="handleQuery"
 						/>
+					</el-form-item> -->
+					<el-form-item>
+						<el-input v-model="queryParams.box_name" placeholder="请输入盒子名称" clearable size="small"
+							@keyup.enter="handleQuery" />
 					</el-form-item>
 					<el-form-item>
 						<el-select v-model="queryParams.online_status" placeholder="请选择在线状态" clearable size="small">
-							<el-option
-									v-for="item in runStatOptions"
-									:key="item.value"
-									:label="item.label"
-									:value="item.value"
-							></el-option>
+							<el-option v-for="item in runStatOptions" :key="item.value" :label="item.label"
+								:value="item.value"></el-option>
 						</el-select>
 					</el-form-item>
 					<el-form-item>
 						<el-select v-model="queryParams.run_mode" placeholder="请选择运行模式" clearable size="small">
-							<el-option
-									v-for="item in runModeOptions"
-									:key="item.value"
-									:label="item.label"
-									:value="item.value"
-							></el-option>
+							<el-option v-for="item in runModeOptions" :key="item.value" :label="item.label"
+								:value="item.value"></el-option>
 						</el-select>
 					</el-form-item>
 					<el-form-item>
 						<el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
 						<el-button v-if="loading" type="success" size="small" :loding="loading">导出中...</el-button>
 						<el-button v-else type="success" size="small" :disabled="!selection.length" @click="handleDerive">导出</el-button>
-<!--						<el-button type="primary" size="mini" @click="handleArgs">阈值配置</el-button>-->
-
+						<!-- <el-button type="primary" size="mini" @click="handleArgs">阈值配置</el-button> -->
 					</el-form-item>
 				</el-form>
+				<div style="display: flex;align-items: center;flex-wrap: wrap;margin-bottom: 15px;">
+					<el-row style="width: 100%;">
+						<el-col :span="7">
+							<!-- 主机供水温度区间 -->
+							<div style="font-size: 14px;color: #666;display: flex;align-items: center;">
+								<span>主机供水温度： </span>
+								<el-input-number v-model="extraParams.hpSuTempMin" size="small"></el-input-number>
+								<div style="width: 24px;text-align: center;">-</div>
+								<el-input-number v-model="extraParams.hpSuTempMax" size="small"></el-input-number>
+							</div>
+						</el-col>
+						<el-col :span="7">
+							<!-- 新风送风露点区间 -->
+							<div style="font-size: 14px;color: #666;display: flex;align-items: center;">
+								<span>新风送风露点： </span>
+								<el-input-number v-model="extraParams.dhDewPointMin" size="small"></el-input-number>
+								<div style="width: 24px;text-align: center;">-</div>
+								<el-input-number v-model="extraParams.dhDewPointMax" size="small"></el-input-number>
+							</div>
+						</el-col>
+						<el-col :span="7">
+							<!-- 换热站供水温度区间 -->
+							<div style="font-size: 14px;color: #666;display: flex;align-items: center;">
+								<span>换热站供水温度： </span>
+								<el-input-number v-model="extraParams.hexSuTempMin" size="small"></el-input-number>
+								<div style="width: 24px;text-align: center;">-</div>
+								<el-input-number v-model="extraParams.hexSuTempMax" size="small"></el-input-number>
+							</div>
+						</el-col>
+					</el-row>
+				</div>
 				<el-table
-						:data="tableData"
-						@sort-change="changeSort"
-						border
-						:span-method="objectSpanMethod"
-						@selection-change="handleSelectionChange"
-						v-fixed-scroll="handleScroll"
+					:data="tableData" 
+					@sort-change="changeSort" 
+					:span-method="objectSpanMethod"
+					@selection-change="handleSelectionChange" 
+					v-fixed-scroll="handleScroll"
+					border
 				>
 					<el-table-column type="selection" width="60" align="center" fixed />
 					<el-table-column label="序号" width="60" align="center" fixed>
@@ -79,25 +100,24 @@
 							<span>{{ (queryParams.page_index - 1) * queryParams.page_size + scope.row.projectId }}</span>
 						</template>
 					</el-table-column>
-<!--					<el-table-column prop="projectName" label="项目名称" align="center" width="180" fixed sortable />-->
+					<!-- <el-table-column prop="projectName" label="项目名称" align="center" width="180" fixed sortable /> -->
 					<el-table-column prop="boxName" label="盒子名称" align="center" width="180" fixed sortable>
 						<template slot-scope="scope">
-							<span @click="debug(scope)">{{scope.row.boxName}}</span>
+							<span @click="debug(scope)">{{ scope.row.boxName }}</span>
 						</template>
 					</el-table-column>
 					<el-table-column prop="runStatus" label="在线状态" align="center" width="100" fixed sortable>
 						<template slot-scope="scope">
-							<span class="el-table-tag" :style="{ background: runStatMap[scope.row.runStatus].color }">{{ runStatMap[scope.row.runStatus].label }}</span>
+							<span class="el-table-tag" :style="{ background: runStatMap[scope.row.runStatus].color }">{{
+								runStatMap[scope.row.runStatus].label }}</span>
 						</template>
 					</el-table-column>
 					<el-table-column prop="runMode" label="运行模式" align="center" width="100" fixed>
 						<template slot-scope="scope">
-					<span
-							class="el-table-tag"
-							:style="{ background: scope.row.runStatus == 2 ? '' : runModeMap[scope.row.runMode].color }"
-					>
-						{{ scope.row.runStatus == 2 ? '/' : runModeMap[scope.row.runMode].label }}
-					</span>
+							<span class="el-table-tag"
+								:style="{ background: scope.row.runStatus == 2 ? '' : runModeMap[scope.row.runMode].color }">
+								{{ scope.row.runStatus == 2 ? '/' : runModeMap[scope.row.runMode].label }}
+							</span>
 						</template>
 					</el-table-column>
 
@@ -110,55 +130,46 @@
 						</el-table-column>
 						<el-table-column prop="host_connect_status" label="通讯状态" align="center" width="100">
 							<template slot-scope="scope">
-						<span
-								v-if="scope.row.host_connect_status != undefined && scope.row.host_connect_status != null"
-								class="el-table-tag"
-								:style="{ background: connectStatColor(scope.row, 'host_connect_status') }"
-						>
-							{{ connectStatText(scope.row, 'host_connect_status') }}
-						</span>
+								<span v-if="scope.row.host_connect_status != undefined && scope.row.host_connect_status != null"
+									class="el-table-tag" :style="{ background: connectStatColor(scope.row, 'host_connect_status') }">
+									{{ connectStatText(scope.row, 'host_connect_status') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="host_fault" label="故障" align="center" width="90">
 							<template slot-scope="scope">
-						<span
-								v-if="scope.row.host_fault != undefined && scope.row.host_fault != null"
-								class="el-table-tag"
-								:style="{ background: faultColor(scope.row, 'host_fault') }"
-						>
-							{{ faultText(scope.row, 'host_fault') }}
-						</span>
+								<span v-if="scope.row.host_fault != undefined && scope.row.host_fault != null" class="el-table-tag"
+									:style="{ background: faultColor(scope.row, 'host_fault') }">
+									{{ faultText(scope.row, 'host_fault') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="host_su_temp" label="供水水温(℃)" align="center" width="120">
 							<template slot-scope="scope">
-						<span v-if="scope.row.host_su_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ fixedVal(scope.row, 'host_su_temp') }}
-						</span>
+								<span v-if="scope.row.host_su_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
+									{{ fixedVal(scope.row, 'host_su_temp') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="host_re_temp" label="回水水温(℃)" align="center" width="120">
 							<template slot-scope="scope">
-						<span v-if="scope.row.host_re_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ fixedVal(scope.row, 'host_re_temp') }}
-						</span>
+								<span v-if="scope.row.host_re_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
+									{{ fixedVal(scope.row, 'host_re_temp') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="host_temp_diff" label="温差" align="center" width="100">
 							<template slot-scope="scope">
 								<div>
-							<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-								{{ fixedVal(scope.row, 'host_temp_diff') }}
-							</span>
-									<i
-											v-if="showMore(scope.row, 'hpCnt')"
-											class="el-icon-caret-bottom ml10"
-											@click.stop="handleClickMore(scope.row, 'host')"
-									></i>
+									<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
+										{{ fixedVal(scope.row, 'host_temp_diff') }}
+									</span>
+									<i v-if="showMore(scope.row, 'hpCnt')" class="el-icon-caret-bottom ml10"
+										@click.stop="handleClickMore(scope.row, 'host')"></i>
 								</div>
 							</template>
 						</el-table-column>
@@ -174,55 +185,46 @@
 						</el-table-column>
 						<el-table-column prop="nt_connect_status" label="通讯状态" align="center" width="100">
 							<template slot-scope="scope">
-						<span
-								v-if="scope.row.nt_connect_status != undefined && scope.row.nt_connect_status != null"
-								class="el-table-tag"
-								:style="{ background: connectStatColor(scope.row, 'nt_connect_status') }"
-						>
-							{{ connectStatText(scope.row, 'nt_connect_status') }}
-						</span>
+								<span v-if="scope.row.nt_connect_status != undefined && scope.row.nt_connect_status != null"
+									class="el-table-tag" :style="{ background: connectStatColor(scope.row, 'nt_connect_status') }">
+									{{ connectStatText(scope.row, 'nt_connect_status') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="nt_fault" label="故障" align="center" width="90">
 							<template slot-scope="scope">
-						<span
-								v-if="scope.row.nt_fault != undefined && scope.row.nt_fault != null"
-								class="el-table-tag"
-								:style="{ background: faultColor(scope.row, 'nt_fault') }"
-						>
-							{{ faultText(scope.row, 'nt_fault') }}
-						</span>
+								<span v-if="scope.row.nt_fault != undefined && scope.row.nt_fault != null" class="el-table-tag"
+									:style="{ background: faultColor(scope.row, 'nt_fault') }">
+									{{ faultText(scope.row, 'nt_fault') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="nt_in_temp" label="送风温度(℃)" align="center" width="120">
 							<template slot-scope="scope">
-						<span v-if="scope.row.nt_in_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ fixedVal(scope.row, 'nt_in_temp') }}
-						</span>
+								<span v-if="scope.row.nt_in_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
+									{{ fixedVal(scope.row, 'nt_in_temp') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="nt_in_humidity" label="送风湿度(%)" align="center" width="120">
 							<template slot-scope="scope">
-						<span v-if="scope.row.nt_in_humidity" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ fixedVal(scope.row, 'nt_in_humidity') }}
-						</span>
+								<span v-if="scope.row.nt_in_humidity" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
+									{{ fixedVal(scope.row, 'nt_in_humidity') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="nt_dew_point" label="露点(℃)" align="center" width="120">
 							<template slot-scope="scope">
 								<div v-if="scope.row.nt_dew_point">
-							<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-								{{ fixedVal(scope.row, 'nt_dew_point') }}
-							</span>
-									<i
-											v-if="showMore(scope.row, 'dhCnt')"
-											class="el-icon-caret-bottom ml10"
-											@click.stop="handleClickMore(scope.row, 'newTrend')"
-									></i>
+									<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
+										{{ fixedVal(scope.row, 'nt_dew_point') }}
+									</span>
+									<i v-if="showMore(scope.row, 'dhCnt')" class="el-icon-caret-bottom ml10"
+										@click.stop="handleClickMore(scope.row, 'newTrend')"></i>
 								</div>
 								<span v-else>/</span>
 							</template>
@@ -239,67 +241,55 @@
 						</el-table-column>
 						<el-table-column prop="hex_connect_status" label="通讯状态" align="center" width="100">
 							<template slot-scope="scope">
-						<span
-								v-if="scope.row.hex_connect_status != undefined && scope.row.hex_connect_status != null"
-								class="el-table-tag"
-								:style="{ background: connectStatColor(scope.row, 'hex_connect_status') }"
-						>
-							{{ connectStatText(scope.row, 'hex_connect_status')}}
-						</span>
+								<span v-if="scope.row.hex_connect_status != undefined && scope.row.hex_connect_status != null"
+									class="el-table-tag" :style="{ background: connectStatColor(scope.row, 'hex_connect_status') }">
+									{{ connectStatText(scope.row, 'hex_connect_status') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="hex_fault" label="故障" align="center" width="90">
 							<template slot-scope="scope">
-						<span
-								v-if="scope.row.hex_fault != undefined && scope.row.hex_fault != null"
-								class="el-table-tag"
-								:style="{ background: faultColor(scope.row, 'hex_fault') }"
-						>
-							{{ faultText(scope.row, 'hex_fault') }}
-						</span>
+								<span v-if="scope.row.hex_fault != undefined && scope.row.hex_fault != null" class="el-table-tag"
+									:style="{ background: faultColor(scope.row, 'hex_fault') }">
+									{{ faultText(scope.row, 'hex_fault') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="hex_su_temp" label="供水水温(℃)" align="center" width="120">
 							<template slot-scope="scope">
-						<span v-if="scope.row.hex_su_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ fixedVal(scope.row, 'hex_su_temp') }}
-						</span>
+								<span v-if="scope.row.hex_su_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
+									{{ fixedVal(scope.row, 'hex_su_temp') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="hex_re_temp" label="回水水温(℃)" align="center" width="120">
 							<template slot-scope="scope">
-						<span v-if="scope.row.hex_re_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ fixedVal(scope.row, 'hex_re_temp') }}
-						</span>
+								<span v-if="scope.row.hex_re_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
+									{{ fixedVal(scope.row, 'hex_re_temp') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="hex_temp_diff" label="温差(℃)" align="center" width="90">
 							<template slot-scope="scope">
-						<span
-								v-if="scope.row.hex_temp_diff != undefined && scope.row.hex_temp_diff != null"
-								class="el-table-tag"
-								:style="{ background: calcArgsColor(scope) }"
-						>
-							{{ fixedVal(scope.row, 'hex_temp_diff') }}
-						</span>
+								<span v-if="scope.row.hex_temp_diff != undefined && scope.row.hex_temp_diff != null" class="el-table-tag"
+									:style="{ background: calcArgsColor(scope) }">
+									{{ fixedVal(scope.row, 'hex_temp_diff') }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="hex_pump_status" label="水泵状态" align="center" width="100">
 							<template slot-scope="scope">
 								<div v-if="scope.row.hex_pump_status != undefined && scope.row.hex_pump_status != null">
-							<span class="el-table-tag" :style="{ background: hexPumpStateColor(scope.row) }">
-								{{ hexPumpStateText(scope.row) }}
-							</span>
-									<i
-											v-if="showMore(scope.row, 'hexCnt')"
-											class="el-icon-caret-bottom ml10"
-											@click.stop="handleClickMore(scope.row, 'heatExchange')"
-									></i>
+									<span class="el-table-tag" :style="{ background: hexPumpStateColor(scope.row) }">
+										{{ hexPumpStateText(scope.row) }}
+									</span>
+									<i v-if="showMore(scope.row, 'hexCnt')" class="el-icon-caret-bottom ml10"
+										@click.stop="handleClickMore(scope.row, 'heatExchange')"></i>
 								</div>
 								<span v-else>/</span>
 							</template>
@@ -312,96 +302,90 @@
 						<!-- <el-table-column prop="end_order" label="编号" align="center" width="60" /> -->
 						<el-table-column prop="end_exception_num" label="通讯异常数量" align="center" width="120">
 							<template slot-scope="scope">
-						<span
-								v-if="scope.row.end_exception_num != undefined && scope.row.end_exception_num != null"
-								class="el-table-tag"
-								:style="{ background: endExceptionNumColor(scope.row) }"
-						>
-							{{ scope.row.runStatus == 1 ? scope.row.end_exception_num : '/' }}
-						</span>
+								<span v-if="scope.row.end_exception_num != undefined && scope.row.end_exception_num != null"
+									class="el-table-tag" :style="{ background: endExceptionNumColor(scope.row) }">
+									{{ scope.row.runStatus == 1 ? scope.row.end_exception_num : '/' }}
+								</span>
 								<span v-else>/</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="end_min_temp" label="最低室内温度(℃)" align="center" width="140">
 							<template slot-scope="scope">
-						<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ scope.row.end_min_temp != 0 ? fixedVal(scope.row, 'end_min_temp') : '/' }}
-						</span>
+								<span id="end_min_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }"
+									@click="handleItemClick(scope)">
+									{{ scope.row.end_min_temp != 0 ? fixedVal(scope.row, 'end_min_temp') : '/' }}
+								</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="end_min_humidity" label="最低室内湿度(%)" align="center" width="140">
 							<template slot-scope="scope">
-						<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ scope.row.end_min_humidity != 0 ? fixedVal(scope.row, 'end_min_humidity') : '/' }}
-						</span>
+								<span id="end_min_humidity" class="el-table-tag" :style="{ background: calcArgsColor(scope) }"
+									@click="handleItemClick(scope)">
+									{{ scope.row.end_min_humidity != 0 ? fixedVal(scope.row, 'end_min_humidity') : '/' }}
+								</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="end_min_dew_point" label="最低室内露点(℃)" align="center" width="140">
 							<template slot-scope="scope">
-						<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ scope.row.end_min_dew_point != 0 ? fixedVal(scope.row, 'end_min_dew_point') : '/' }}
-						</span>
+								<span id="end_min_dew_point" class="el-table-tag" :style="{ background: calcArgsColor(scope) }"
+									@click="handleItemClick(scope)">
+									{{ scope.row.end_min_dew_point != 0 ? fixedVal(scope.row, 'end_min_dew_point') : '/' }}
+								</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="end_max_temp" label="最高室内温度(℃)" align="center" width="140">
 							<template slot-scope="scope">
-						<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ scope.row.end_max_temp != 0 ? fixedVal(scope.row, 'end_max_temp') : '/' }}
-						</span>
+								<span id="end_max_temp" class="el-table-tag" :style="{ background: calcArgsColor(scope) }"
+									@click="handleItemClick(scope)">
+									{{ scope.row.end_max_temp != 0 ? fixedVal(scope.row, 'end_max_temp') : '/' }}
+								</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="end_max_humidity" label="最高室内湿度(%)" align="center" width="140">
 							<template slot-scope="scope">
-						<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-							{{ scope.row.end_max_humidity != 0 ? fixedVal(scope.row, 'end_max_humidity') : '/' }}
-						</span>
+								<span id="end_max_humidity" class="el-table-tag" :style="{ background: calcArgsColor(scope) }"
+									@click="handleItemClick(scope)">
+									{{ scope.row.end_max_humidity != 0 ? fixedVal(scope.row, 'end_max_humidity') : '/' }}
+								</span>
 							</template>
 						</el-table-column>
 						<el-table-column prop="end_max_dew_point" label="最高室内露点(℃)" align="center" width="140">
 							<template slot-scope="scope">
 								<div>
-							<span class="el-table-tag" :style="{ background: calcArgsColor(scope) }">
-								{{ scope.row.end_max_dew_point != 0 ? fixedVal(scope.row, 'end_max_dew_point') : '/' }}
-							</span>
-									<!-- <i
-                                        v-if="scope.row.cbCnt > 1 && scope.row.runStatus == 1"
-                                        class="el-icon-caret-bottom ml10"
-                                        @click.stop="handleClickMore(scope.row, 'end')"
-                                    ></i> -->
+									<span id="end_max_dew_point" class="el-table-tag" :style="{ background: calcArgsColor(scope) }"
+										@click="handleItemClick(scope)">
+										{{ scope.row.end_max_dew_point != 0 ? fixedVal(scope.row, 'end_max_dew_point') : '/' }}
+									</span>
+									<i v-if="scope.row.cbCnt > 1 && scope.row.runStatus == 1" class="el-icon-caret-bottom ml10"
+										@click.stop="handleClickMore(scope.row, 'end')"></i>
 								</div>
 							</template>
 						</el-table-column>
 					</el-table-column>
 					<!-- 末端列 End -->
 				</el-table>
-				<el-pagination
-						class="mt10"
-						:current-page="queryParams.page_index"
-						:page-sizes="[10, 20, 30, 40]"
-						:page-size="queryParams.page_size"
-						layout="total, sizes, prev, pager, next, jumper"
-						:total="total"
-						align="right"
-						@size-change="handleSizeChange"
-						@current-change="handleCurrentChange"
-				></el-pagination>
+				<el-pagination class="mt10" :current-page="queryParams.page_index" :page-sizes="[10, 20, 30, 40]"
+					:page-size="queryParams.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total" align="right"
+					@size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
 				<!-- 更多信息对话框 -->
 				<el-dialog :title="dialog.title" :visible.sync="dialog.show" width="60%">
-					<pop-more-table :visible="dialog.show" :tableData="dialog.tableData" :columns="dialog.tableColumns"></pop-more-table>
+					<pop-more-table :visible="dialog.show" :tableData="dialog.tableData"
+						:columns="dialog.tableColumns"></pop-more-table>
 				</el-dialog>
-
 				<el-dialog :title="titleTxt" :visible.sync="showTitle" width="60%">
-<div style="margin: 20px">{{this.Title}}</div>
+					<div style="margin: 20px">{{ this.Title }}</div>
+				</el-dialog>
+				<el-dialog :title="endPop.title" :visible.sync="endPop.show" width="50%">
+					<pop-end-info :visible="endPop.show" :data="endPop.row"></pop-end-info>
 				</el-dialog>
 			</div>
 		</div>
-
 	</div>
-
 </template>
 
 <script>
 import PopMoreTable from '../../../components/PopMoreTable.vue';
+import PopEndInfo from './PopEndInfo.vue';
 
 import { listProjects, listArgs } from '../../../js/api.js';
 import { expandAllNodes, mergeTableRows } from '../../../js/merge.js';
@@ -411,80 +395,72 @@ import define from '../../../js/common.js';
 import Vue from 'vue';
 import ScrollBar from '../../../js/scrollbar.js';
 import "perfect-scrollbar/css/perfect-scrollbar.css";
-import {getAreaList, getCityList, getProvinceList} from "../../../js/api";
-import {getReportTitle} from "@/js/api";
+import { getAreaList, getCityList, getProvinceList } from "../../../js/api";
+import { getReportTitle } from "@/js/api";
 Vue.directive('fixed-scroll', ScrollBar);
 
 export default {
 	components: {
-		PopMoreTable
+		PopMoreTable,
+		PopEndInfo
 	},
 	computed: {
 		// detailTypeComp () {
 		// 	return this._props.operateType == "detail";
 		// },
 		connectStatColor() {
-			return function(row, prop) {
+			return function (row, prop) {
 				if (row.runStatus != 1) return '';
 				let state = row[prop];
 				return this.connectStatMap[state] ? this.connectStatMap[state].color : 'yellow';
 			}
 		},
 		connectStatText() {
-			return function(row, prop) {
+			return function (row, prop) {
 				if (row.runStatus != 1) return '/';
 				let state = row[prop];
 				return this.connectStatMap[state] ? this.connectStatMap[state].label : '异常'
 			}
 		},
 		faultColor() {
-			return function(row, prop) {
+			return function (row, prop) {
 				if (row.runStatus != 1) return '';
 				let state = row[prop];
 				return this.faultMap[state] ? this.faultMap[state].color : ''
 			}
 		},
 		faultText() {
-			return function(row, prop) {
+			return function (row, prop) {
 				if (row.runStatus != 1) return '/';
 				let state = row[prop];
 				return this.faultMap[state] ? this.faultMap[state].label : '/'
 			}
 		},
 		hexPumpStateColor() {
-			return function(row) {
+			return function (row) {
 				if (row.runStatus != 1) return '';
 				return this.hexPumpStatMap[row.hex_pump_status] ? this.hexPumpStatMap[row.hex_pump_status].color : ''
 			}
 		},
 		hexPumpStateText() {
-			return function(row) {
+			return function (row) {
 				if (row.runStatus != 1) return '/';
 				return this.hexPumpStatMap[row.hex_pump_status] ? this.hexPumpStatMap[row.hex_pump_status].label : '/'
 			}
 		},
 		endExceptionNumColor() {
-			return function(row) {
+			return function (row) {
 				if (row.runStatus != 1) return '';
 				return row.end_exception_num > 0 ? 'yellow' : 'yellowgreen';
 			}
 		},
 		calcArgsColor() {
-			return function(scope) {
-				if (scope.row.runStatus != 1) return '';
-				let prop = scope.column.property;
-				if (!prop) return '';
-				// 如果值为0需显示成'/', 此时不显示颜色
-				if (!scope.row[prop]) {
-					return '';
-				} else {
-					let argsItems = this.argsList.filter(a => a.En === prop);
-					return define.getArgsColor(argsItems, scope.row.runMode, scope.row[prop]);
-				}
+			return function (scope) {
+				return this.getItemBgColor(scope);
 			}
 		},
 		fixedVal() {
-			return function(row, prop) {
+			return function (row, prop) {
 				if (row.runStatus != 1) return '/';
 				let val = row[prop];
 				if (val != 0) {
@@ -512,7 +488,7 @@ export default {
 			};
 		},
 		showMore() {
-			return function(row, prop) {
+			return function (row, prop) {
 				// 当单机数量大于最大数量且当前运行状态为正常时，才需要在最后一行显示更多按钮
 				if (row[prop] > row.maxCnt && row.runStatus == 1) {
 					return (row.maxCnt > 1 && row.standaloneIndex > 0) || (row.maxCnt == 1 && row.standaloneIndex == 0);
@@ -529,10 +505,18 @@ export default {
 				project_name: undefined,
 				box_name: undefined,
 				online_status: undefined,
-				run_mode: undefined
+				run_mode: undefined,
 			},
-			prop:'',
-			order:'',
+			extraParams: {
+				hpSuTempMin: 0,
+				hpSuTempMax: 0,
+				dhDewPointMin: 0,
+				dhDewPointMax: 0,
+				hexSuTempMin: 0,
+				hexSuTempMax: 0,
+			},
+			prop: '',
+			order: '',
 			provinceOption: [],
 			cityOption: [],
 			areaOption: [],
@@ -583,15 +567,20 @@ export default {
 			faultMap: define.faultDict,
 			runStatOptions: define.runStatOpts,
 			runModeOptions: define.runModeOpts,
-			showTitle:false,
-			Title:'',
-			titleTxt:'',
+			showTitle: false,
+			Title: '',
+			titleTxt: '',
 			dialog: {
 				show: false,
 				title: '',
 				tableColumns: [],
 				tableData: []
 			},
+			endPop: {
+				show: false,
+				title: '',
+				row: {}
+			},
 			loading: false
 		};
 	},
@@ -608,71 +597,69 @@ export default {
 	// 	}
 	// },
 	methods: {
-		renderHeader(h, { column, $index }, type){
+		renderHeader(h, { column, $index }, type) {
 			let that = this;
 			return h(
-					'div',[
-						// 列名称
-						h('span', column.label),
-						// 按钮
-						h('el-button', {
-							props: {
-								type: 'text',
-								size: 'medium',
-							},
-							style: 'margin-left: 5px;',
-							on: {
-								click: async function () {
-									// that.clickButton(type);
-									const res = await getReportTitle({title:type});
-									if (res.code === 200) {
-										//this.provinceOption = res.result;
-										// alert(res.result.Content);
-										console.log(res.result.Content);
-										that.showTitle = true;
-										that.Title = res.result.Content;
-										that.titleTxt = type;
-									}
-									//alert(type);
-								}
+				'div', [
+				// 列名称
+				h('span', column.label),
+				// 按钮
+				h('el-button', {
+					props: {
+						type: 'text',
+						size: 'medium',
+					},
+					style: 'margin-left: 5px;',
+					on: {
+						click: async function () {
+							// that.clickButton(type);
+							const res = await getReportTitle({ title: type });
+							if (res.code === 200) {
+								//this.provinceOption = res.result;
+								// alert(res.result.Content);
+								console.log(res.result.Content);
+								that.showTitle = true;
+								that.Title = res.result.Content;
+								that.titleTxt = type;
 							}
-						}, type)
-					],
+							//alert(type);
+						}
+					}
+				}, type)
+			],
 			)
 		},
-		changeSort(val){
-			console.log('changeSort.val is:', val,val.prop,val.order)
-
+		changeSort(val) {
+			console.log('changeSort.val is:', val, val.prop, val.order)
 			this.prop = val.prop
 			this.order = val.order
 			this.getProjects();
 		},
-		debug(val){
-			console.log('val is',val)
+		debug(val) {
+			console.log('val is', val)
 			sessionStorage.setItem("currentDebugBoxIdRebuild", val.row.boxId);
 			this.$router.push({ name: "盒子调试 - 重构" });
-        },
-		provinceChange () {
+		},
+		provinceChange() {
 			this.operateSubjectForm.district = "";
 			this.operateSubjectForm.area = "";
 			this.operateSubjectForm.city = "";
 			this.operateSubjectForm.city_id = -1;
 		},
-		cityChange () {
+		cityChange() {
 			this.operateSubjectForm.district = "";
 			this.operateSubjectForm.area = "";
 		},
-		areaChange () {
+		areaChange() {
 			this.operateSubjectForm.district = "";
 		},
-
-		async getProvinceListFnc () {
+		async getProvinceListFnc() {
 			const res = await getProvinceList();
 			if (res.code === 200) {
 				this.provinceOption = res.result;
 			}
 		},
-		async getCityListFnc () {
+		async getCityListFnc() {
 			const res = await getCityList({
 				province: this.operateSubjectForm.province
 			});
@@ -697,7 +684,7 @@ export default {
 				this.cityOption = temp;
 			}
 		},
-		async getAreaListFunc () {
+		async getAreaListFunc() {
 			const res = await getAreaList({
 				city: this.operateSubjectForm.city
 			});
@@ -707,6 +694,13 @@ export default {
 		},
 		/** 获取项目列表 */
 		getProjects() {
+			const loading = this.$loading({
+				lock: true,
+				text: '拼命加载中...',
+				spinner: 'el-icon-loading',
+				background: 'rgba(0, 0, 0, 0.8)',
+				target: document.querySelector('#container')
+			});
 			var params = {
 				page_index: this.queryParams.page_index,
 				page_size: this.queryParams.page_size,
@@ -714,10 +708,10 @@ export default {
 				box_name: this.queryParams.box_name,
 				online_status: this.queryParams.online_status,
 				run_mode: this.queryParams.run_mode,
-				province:this.operateSubjectForm.province,
-				city:this.operateSubjectForm.city,
-				prop:this.prop,
-				order:this.order,
+				province: this.operateSubjectForm.province,
+				city: this.operateSubjectForm.city,
+				prop: this.prop,
+				order: this.order,
 			};
 			listProjects(params).then(resp => {
 				let data = resp.data || {};
@@ -729,6 +723,7 @@ export default {
 				let dataSolve = mergeTableRows(this.tableData, this.mergeColums);
 				this.tableData = dataSolve;
 				console.log('>>> tableData: ', this.tableData);
+				loading.close();
 			}).catch(err => {
 				console.log('[reportList]请求错误: ', err);
 			});
@@ -779,8 +774,21 @@ export default {
 				return box[prop];
 			}
 		},
+		/** 获取Item背景颜色 */
+		getItemBgColor(scope) {
+			if (scope.row.runStatus != 1) return '';
+			let prop = scope.column.property;
+			if (!prop) return '';
+			// 如果值为0需显示成'/', 此时不显示颜色
+			if (!scope.row[prop]) {
+				return '';
+			} else {
+				let argsItems = this.argsList.filter(a => a.En === prop);
+				return define.getArgsColor(argsItems, scope.row.runMode, scope.row[prop]);
+			}
+		},
 		/** 搜索 */
-		handleQuery(){
+		handleQuery() {
 			this.queryParams.page_index = 1;
 			this.getProjects();
 		},
@@ -788,11 +796,11 @@ export default {
 		handleDerive() {
 			var that = this;
 			that.loading = true;
-			exportToExcel(this.selection, function() {
+			exportToExcel(this.selection, function () {
 				that.loading = false;
 			});
 		},
-		handleArgs(){
+		handleArgs() {
 			this.$router.push("../report/args");
 		},
 		/** 多选 */
@@ -840,6 +848,15 @@ export default {
 		/** 横向滑动 */
 		handleScroll() {
 			console.log(`scroll bar update`);
+		},
+		/** 点击列 */
+		handleItemClick(scope) {
+			const argsColor = this.getItemBgColor(scope);
+			if (!argsColor.length) {
+				return;
+			}
+			this.endPop.show = true;
+			this.endPop.row = scope.row;
 		}
 	}
 };
@@ -856,13 +873,15 @@ export default {
 }
 
 .ps__rail-x {
-  display: block;
-  z-index: 99; /*大于fixed table 的z-index*/
+	display: block;
+	z-index: 99;
+	/*大于fixed table 的z-index*/
 }
 
 .ml10 {
 	margin-left: 10px;
 }
+
 .mt10 {
 	margin-top: 10px;
 }