智能报表

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@table-merge/element-ui": "^1.0.1",
+    "axios": "^1.3.4",
     "core-js": "^3.6.4",
     "element-ui": "^2.15.12",
     "ex-table-column": "^1.1.2",

src/App.vue

@@ -1,144 +1,213 @@
 <template>
-    <div>
-
-        <el-table
-                :data="tableData"
-                :span-method="objectSpanMethod"
-                border
-                style="width: 100%; margin-top: 20px">
-            <el-table-column
-                    prop="autoid"
-                    label="序号"
-                    width="180">
-            </el-table-column>
-            <el-table-column
-                    prop="name"
-                    label="项目名称"
-                    width="180">
-            </el-table-column>
-            <el-table-column
-                    prop="boxname"
-                    label="盒子名称"
-                    width="180">
-            </el-table-column>
-            <el-table-column
-                    prop="id"
-                    label="在线状态"
-                    width="180">
-            </el-table-column>
-            <el-table-column
-                    prop="id"
-                    label="运行模式"
-                    width="180">
-            </el-table-column>
-
-
-            <el-table-column
-                    prop="id"
-                    label="状态"
-                    width="180">
-            </el-table-column>
-            <el-table-column
-                    prop="name"
-                    label="编号">
-            </el-table-column>
-            <el-table-column
-                    prop="amount1"
-                    label="通讯状态">
-            </el-table-column>
-            <el-table-column
-                    prop="amount2"
-                    label="故障">
-            </el-table-column>
-<!--            <el-table-column-->
-<!--                    prop="amount3"-->
-<!--                    label="数值 3（元）">-->
-<!--            </el-table-column>-->
-        </el-table>
-    </div>
+	<div>
+		<el-table :data="tableData" size="mini" border>
+			<el-table-column label="序号" width="60" align="center" fixed>
+				<template slot-scope="scope">
+					<span>{{ queryParams.page_index * queryParams.page_size + scope.$index + 1 }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="projectName" label="项目名称" align="center" width="200" show-overflow-tooltip fixed />
+			<el-table-column prop="boxName" label="盒子名称" align="center" width="180" show-overflow-tooltip fixed />
+			<el-table-column prop="runStatus" label="在线状态" align="center" width="80">
+				<template slot-scope="scope">
+					<span>{{ runStatMap[scope.row.runStatus] }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column prop="runMode" label="运行模式" align="center" width="80">
+				<template slot-scope="scope">
+					<span>{{ runModeMap[scope.row.runMode] }}</span>
+				</template>
+			</el-table-column>
+			
+			<!-- 主机列 Begin -->
+			<el-table-column label="主机控制器" align="center" width="60">
+				<el-table-column prop="host_order" label="编号" align="center" width="60" />
+				<el-table-column prop="host_connect_status" label="通讯状态" align="center" width="80" />
+				<el-table-column prop="host_fault" label="故障" align="center" width="80" />
+				<el-table-column prop="host_su_temp" label="供水水温(℃)" align="center" width="100" />
+				<el-table-column prop="host_re_temp" label="回水水温(℃)" align="center" width="100" />
+				<el-table-column prop="host_temp_diff" label="温差" align="center" width="80" />
+			</el-table-column>
+			<!-- 主机列 End -->
+			
+			<!-- 新风机列 Begin -->
+			<el-table-column label="新风机控制器" align="center" width="60">
+				<el-table-column prop="nt_order" label="编号" align="center" width="60" />
+				<el-table-column prop="nt_connect_status" label="通讯状态" align="center" width="80" />
+				<el-table-column prop="nt_fault" label="故障" align="center" width="80" />
+				<el-table-column prop="nt_in_temp" label="送风温度(℃)" align="center" width="100" />
+				<el-table-column prop="nt_in_humidity" label="送风湿度(℃)" align="center" width="100" />
+				<el-table-column prop="nt_dew_point" label="露点(℃)" align="center" width="80" />
+			</el-table-column>
+			<!-- 新风机列 End -->
+			
+			<!-- 换热站列 Begin -->
+			<el-table-column label="换热站控制器" align="center" width="60">
+				<el-table-column prop="hex_order" label="编号" align="center" width="60" />
+				<el-table-column prop="hex_connect_status" label="通讯状态" align="center" width="80" />
+				<el-table-column prop="hex_fault" label="故障" align="center" width="80" />
+				<el-table-column prop="hex_su_temp" label="供水水温(℃)" align="center" width="100" />
+				<el-table-column prop="hex_re_temp" label="回水水温(℃)" align="center" width="100" />
+				<el-table-column prop="hex_temp_diff" label="温差(℃)" align="center" width="80" />
+				<el-table-column prop="hex_pump_status" label="水泵状态" align="center" width="80" />
+				
+			</el-table-column>
+			<!-- 换热站列 End -->
+			
+			<!-- 末端列 Begin -->
+			<el-table-column label="末端控制器" align="center" width="60">
+				<el-table-column prop="end_order" label="编号" align="center" width="60" />
+				<el-table-column prop="end_exception_num" label="通讯异常数量" align="center" width="80" />
+				<el-table-column prop="end_min_temp" label="最低室内温度(℃)" align="center" width="80" />
+				<el-table-column prop="end_min_humidity" label="最低室内湿度(℃)" align="center" width="100" />
+				<el-table-column prop="end_min_dew_point" label="最低室内露点(℃)" align="center" width="100" />
+				<el-table-column prop="end_max_temp" label="最高室内温度(℃)" align="center" width="80" />
+				<el-table-column prop="end_max_humidity" label="最高室内湿度(℃)" align="center" width="80" />
+				<el-table-column prop="end_max_dew_point" label="最高室内露点(℃)" align="center" width="80" />
+			</el-table-column>
+			<!-- 末端列 End -->
+		</el-table>
+		<el-pagination
+			: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>
+	</div>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-                tableData: [{
-                    autoid:1,
-                    id: '正常',
-                    name: '天津温莎堡展厅',
-                    amount1: '234',
-                    amount2: '3.2',
-                    amount3: 10,
-                    boxname:'box1'
-                }, {
-                    autoid:2,
-                    id: '正常',
-                    name: '天津温莎堡展厅',
-                    amount1: '165',
-                    amount2: '4.43',
-                    amount3: 12,
-                    boxname:'box2'
-                }, {
-                    autoid:3,
-                    id: '正常',
-                    name: '滨江公寓',
-                    amount1: '324',
-                    amount2: '1.9',
-                    amount3: 9,
-                    boxname:'滨江公寓box'
-                }, {
-                    autoid:4,
-                    id: '正常',
-                    name: '九间堂75',
-                    amount1: '621',
-                    amount2: '2.2',
-                    amount3: 17,
-                    boxname:'九间堂75box'
-                }, {
-                    autoid:5,
-                    id: '正常',
-                    name: '涟城10-6',
-                    amount1: '539',
-                    amount2: '4.1',
-                    amount3: 15,
-                    boxname:'涟城10-6box'
-                }]
-            };
-        },
-        methods: {
-            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-                if (rowIndex % 2 === 0) {
-                    if (columnIndex === 0) {
-                        return [1, 2];
-                    } else if (columnIndex === 1) {
-                        return [0, 0];
-                    }
-                }
-            },
-
-            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-                //1列
-                if (columnIndex === 0) {
-                    return {
-                        rowspan: 1,
-                        colspan: 1
-                    };
-
-                }else if (columnIndex === 1){ //2列
-                    //第一行
-                    if (rowIndex == 0){
-                        return {
-                            rowspan: 2,
-                            colspan: 1
-                        };
-                    }else{
-                        return {
-                            rowspan: 0,
-                            colspan: 0
-                        };
-                    }
-                }
-            }
-        }
-    };
+import axios from 'axios';
+export default {
+	data() {
+		return {
+			queryParams: {
+				page_index: 0,
+				page_size: 10,
+				project_id: undefined,
+				box_id: undefined,
+				online_status: undefined,
+				run_mode: undefined
+			},
+			tableData: [],
+			total: 0,
+			runStatMap: {
+				0: '离线',
+				1: '在线',
+				2: '未关联'
+			},
+			runModeMap: {
+				0: '无',
+				1: '制冷',
+				2: '采暖',
+				3: '除湿',
+				4: '预热',
+				5: '通风'
+			}
+		};
+	},
+	created() {
+		this.getProjects();
+	},
+	methods: {
+		/** 获取项目列表 */
+		getProjects() {
+			axios
+				.post('http://47.110.15.40:9001/proj/reportList', this.queryParams)
+				.then(resp => {
+					let data = resp.data || {};
+					let result = data.result || {};
+					this.total = result.count;
+					// 展开所有项目下的设备及单机
+					this.tableData = this.expandAllNodes(result.data || []);
+					console.log('>>> tableData: ', this.tableData);
+				})
+				.catch(err => {
+					console.log('请求错误: ', err);
+				});
+		},
+		/** 展开属性结构所有数据 */
+		expandAllNodes(projects) {
+			let tableData = [];
+			projects.forEach(p => {
+				if (Array.isArray(p.boxList)) {
+					p.boxList.forEach(b => {
+						// 继续判断有多少单机，主机、新风机、换热站、末端单机数量取最大值
+						let maxCnt = this.calcMaxStandaloneCnt(b);
+						for (let i = 0; i < maxCnt; i++) {
+							let hpStandalone = i < b.hostCtrl && b.hostCtrl.length ? b.hostCtrl[i] : {};
+							let dhStandalone = i < b.newTrendCtrl && b.newTrendCtrl.length ? b.newTrendCtrl[i] : {};
+							let hexStandalone = i < b.hex && b.hex.length ? b.hex[i] : {};
+							let cbStandalone = i < b.end && b.end.length ? b.end[i] : {};
+							tableData.push({
+								projectId: p.project_auto_id,
+								projectName: p.projectName,
+								boxName: b.boxName,
+								runStatus: b.runStatus,
+								runMode: b.runMode,
+								...hpStandalone,
+								...dhStandalone,
+								...hexStandalone,
+								...cbStandalone
+							});
+						}
+					});
+				}
+			});
+			return tableData;
+		},
+		/** 取最大单机数 */
+		calcMaxStandaloneCnt(box) {
+			let hpStandaloneCnt = box.hostCtrl ? box.hostCtrl.length : 0;
+			let dhStandaloneCnt = box.newTrendCtrl ? box.newTrendCtrl.length : 0;
+			let hexStandaloneCnt = box.hex ? box.hex.length : 0;
+			let cbStandaloneCnt = box.end ? box.end.length : 0;
+			return Math.max(hpStandaloneCnt, dhStandaloneCnt, hexStandaloneCnt, cbStandaloneCnt);
+		},
+		handleSizeChange(val) {
+			this.queryParams.page_size = val;
+			this.getProjects();
+		},
+		handleCurrentChange(val) {
+			this.queryParams.page_index = val;
+			this.getProjects();
+		},
+		arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+			if (rowIndex % 2 === 0) {
+				if (columnIndex === 0) {
+					return [1, 2];
+				} else if (columnIndex === 1) {
+					return [0, 0];
+				}
+			}
+		},
+		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+			//1列
+			if (columnIndex === 0) {
+				return {
+					rowspan: 1,
+					colspan: 1
+				};
+			} else if (columnIndex === 1) {
+				//2列
+				//第一行
+				if (rowIndex == 0) {
+					return {
+						rowspan: 2,
+						colspan: 1
+					};
+				} else {
+					return {
+						rowspan: 0,
+						colspan: 0
+					};
+				}
+			}
+		}
+	}
+};
 </script>

src/main.js

@@ -14,13 +14,13 @@ import ExTableColumn from 'ex-table-column';
 Vue.component(ExTableColumn.name, ExTableColumn);
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import App from './Vue5.vue';
-import App5 from "@/App5";
+import App from './App.vue';
+// import App5 from "@/App5";
 
 
 Vue.use(ElementUI);
 
 new Vue({
   el: '#app',
-  render: h => h(App5)
+  render: h => h(App)
 });