调整样式

src/App.vue

@@ -1,144 +1,285 @@
 <template>
-    <div>
+	<div>
+		<el-table :data="tableData" size="mini" border :span-method="objectSpanMethod">
+			<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="100">
+				<template slot-scope="scope">
+					<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">
+				<template slot-scope="scope">
+					<span class="el-table-tag" :style="{'background': runModeMap[scope.row.runMode].color}">
+						{{ runModeMap[scope.row.runMode].label }}
+					</span>
+				</template>
+			</el-table-column>
 
-        <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>
+			<!-- 主机列 Begin -->
+			<el-table-column label="主机控制器" align="center" width="60">
+				<el-table-column prop="host_order" label="编号" align="center" width="60">
+					<template slot-scope="scope">
+						<span>{{ scope.row.host_order || '-' }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="host_connect_status" label="通讯状态" align="center" width="80">
+					<template slot-scope="scope">
+						<span>{{ connectStatMap[scope.row.host_connect_status] || '-' }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column prop="host_fault" label="故障" align="center" width="80" >
+					<template slot-scope="scope">
+						<span>{{ scope.row.host_fault || '-' }}</span>
+					</template>
+				</el-table-column>
+				<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 -->
 
-            <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>
+			<!-- 换热站列 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="120" />
+				<el-table-column prop="end_min_temp" label="最低室内温度(℃)" align="center" width="120" />
+				<el-table-column prop="end_min_humidity" label="最低室内湿度(℃)" align="center" width="120" />
+				<el-table-column prop="end_min_dew_point" label="最低室内露点(℃)" align="center" width="120" />
+				<el-table-column prop="end_max_temp" label="最高室内温度(℃)" align="center" width="120" />
+				<el-table-column prop="end_max_humidity" label="最高室内湿度(℃)" align="center" width="120" />
+				<el-table-column prop="end_max_dew_point" label="最高室内露点(℃)" align="center" width="120" />
+			</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];
-                    }
-                }
-            },
+import axios from 'axios';
+export default {
+	data() {
+		return {
+			queryParams: {
+				page_index: 1,
+				page_size: 10,
+				project_id: undefined,
+				box_id: undefined,
+				online_status: undefined,
+				run_mode: undefined
+			},
+			tableData: [],
+			total: 0,
+			runStatMap: {
+				0: { label: '离线', color: 'lightgray' },
+				1: { label: '在线', color: 'yellowgreen' },
+				2: { label: '未关联', color: 'lightgray' }
+			},
+			runModeMap: {
+				0: { label: '无', color: 'lightgray' },
+				1: { label: '制冷', color: 'darkgreen' },
+				2: { label: '采暖', color: 'orange' },
+				3: { label: '除湿', color: 'rgb(182, 172, 195)' },
+				4: { label: '预热', color: 'yellow' },
+				5: { label: '通风', color: 'rgb(182, 174, 227)' }
+			},
+			connectStatMap: {
+				0: '异常',
+				1: '正常',
+			},
+		};
+	},
+	created() {
+		this.getProjects();
+	},
+	methods: {
+		/** 获取项目列表 */
+		getProjects() {
+			var params =  {
+				page_index: Math.max(0, this.queryParams.page_index - 1),
+				page_size: this.queryParams.page_size,
+				project_id: this.queryParams.project_id,
+				box_id: this.queryParams.box_id,
+				online_status: this.queryParams.online_status,
+				run_mode: this.queryParams.run_mode
+			};
+			axios
+				.post('http://47.110.15.40:9001/proj/reportList', params)
+				.then(resp => {
+					let data = resp.data || {};
+					let result = data.result || {};
+					this.total = result.count;
+					// 展开所有项目下的设备及单机
+					this.tableData = this.expandAllNodes(result.data || []);
+					let dataSolve = this.mergeTableRow(this.tableData,["projectName","boxName","runStatus","",""]);
+					this.tableData = dataSolve;
+					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 = b.hostCtrl && i < b.hostCtrl.length ? b.hostCtrl[i] : {};
+							let dhStandalone = b.newTrendCtrl && i < b.newTrendCtrl.length ? b.newTrendCtrl[i] : {};
+							let hexStandalone = b.hex && i < b.hex.length ? b.hex[i] : {};
+							let cbStandalone = b.end &&  i < b.end.length ? b.end[i] : {};
 
-            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-                //1列
-                if (columnIndex === 0) {
-                    return {
-                        rowspan: 1,
-                        colspan: 1
-                    };
+							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();
+		},
+		// 合并表格
+		mergeTableRow(data,merge){
+			if(!merge || merge.length === 0) {
+				return data;
+			}
+			merge.forEach((m) => {
+				const mList = {};
+				let spliceLocation = merge.indexOf(m);
+				data = data.map((v,index) => {
+					const rowVal = v[m];
+					if(mList[rowVal] && mList[rowVal].newIndex === index){
+						let flag = false;
+						let mergeSolve = merge.slice(0, spliceLocation);
+						mergeSolve.slice(0, spliceLocation).forEach(mergeItem => {
+							if (data[index][mergeItem] == data[index - 1][mergeItem]) {
+								flag = true
+							}
+						})
+						if (m == merge[0]) {
+							flag = true;
+						}
+						if (flag) {
+							mList[rowVal]["num"]++;
+							mList[rowVal]["newIndex"]++;
+							data[mList[rowVal]["index"]][m + "-span"].rowspan++;
+							v[m + "-span"] = {
+								rowspan: 0,
+								colspan: 0,
+							};
+						} else {
+							mList[rowVal] = {
+								num: 1,
+								index: index,
+								newIndex: index + 1,
+							};
+							v[m + "-span"] = {
+								rowspan: 1,
+								colspan: 1,
+							};
+						}
+					}else {
+						mList[rowVal] = {
+							num: 1,
+							index: index,
+							newIndex: index + 1,
+						};
+						v[m + "-span"] = {
+							rowspan: 1,
+							colspan: 1,
+						};
+					}
+					return v;
+				});
+			});
+			return data;
+		},
 
-                }else if (columnIndex === 1){ //2列
-                    //第一行
-                    if (rowIndex == 0){
-                        return {
-                            rowspan: 2,
-                            colspan: 1
-                        };
-                    }else{
-                        return {
-                            rowspan: 0,
-                            colspan: 0
-                        };
-                    }
-                }
-            }
-        }
-    };
+		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+			const span = column["property"] + "-span";
+			if(row[span]) {
+				return row[span];
+			}
+		}
+	}
+};
 </script>
+
+<style>
+.el-table-tag {
+	/* width: 64px; */
+	padding: 4px 14px;
+	color: #333;
+	/* border-radius: 2px; */
+	font-size: 12px;
+}
+</style>

src/App6.vue

@@ -43,20 +43,27 @@
       </el-table-column>
       <el-table-column
           prop="name"
-          label="姓名">
+          label="项目">
       </el-table-column>
       <el-table-column
-          prop="amount1"
-          label="数值 1（元）">
-      </el-table-column>
-      <el-table-column
-          prop="amount2"
-          label="数值 2（元）">
+              prop="boxname"
+              label="盒子">
       </el-table-column>
-      <el-table-column
-          prop="amount3"
-          label="数值 3（元）">
+      <el-table-column label="主机控制器">
+        <el-table-column
+                prop="amount1"
+                label="编号">
+        </el-table-column>
+        <el-table-column
+                prop="amount2"
+                label="运行状态">
+        </el-table-column>
+        <el-table-column
+                prop="amount3"
+                label="故障">
+        </el-table-column>
       </el-table-column>
+
     </el-table>
   </div>
 </template>
@@ -67,61 +74,71 @@ export default {
     return {
       tableData: [{
         id: '12987122',
-        name: '王小虎',
+        name: '三恒1',
+        boxname:'北京中粮祥云1',
         amount1: '234',
         amount2: '3.2',
         amount3: 10
       }, {
         id: '12987123',
-        name: '王小虎',
+        name: '三恒1',
+        boxname:'北京中粮祥云1',
         amount1: '165',
         amount2: '4.43',
         amount3: 12
       }, {
         id: '12987124',
-        name: '王小虎',
+        name: '三恒1',
+        boxname:'北京中粮祥云1',
         amount1: '324',
         amount2: '1.9',
         amount3: 9
       }, {
         id: '12987125',
-        name: '王小虎',
+        name: '三恒1',
+        boxname:'北京中粮祥云1',
         amount1: '621',
         amount2: '2.2',
         amount3: 17
       }, {
         id: '12987126',
-        name: '王小虎',
+        boxname:'北京中粮祥云2',
+        name: '三恒1',
         amount1: '539',
         amount2: '4.1',
         amount3: 15
       },{
         id: '12987122',
-        name: '王小虎',
+        name: '三恒2',
+        boxname:'北京中粮祥云3',
         amount1: '234',
         amount2: '3.2',
         amount3: 10
       }, {
         id: '12987123',
-        name: '王小虎',
+        name: '三恒3',
+        boxname:'北京中粮祥云4',
         amount1: '165',
         amount2: '4.43',
         amount3: 12
       }, {
         id: '12987124',
-        name: '王小虎',
+        name: '三恒4',
+        boxname:'北京中粮祥云5',
         amount1: '324',
         amount2: '1.9',
         amount3: 9
       }, {
         id: '12987125',
-        name: '王小虎',
+        name: '三恒5',
+        boxname:'北京中粮祥云6',
         amount1: '621',
         amount2: '2.2',
         amount3: 17
       }, {
         id: '12987126',
-        name: '王小虎',
+        name: '三恒5',
+        boxname:'北京中粮祥云7',
         amount1: '539',
         amount2: '4.1',
         amount3: 15
@@ -140,19 +157,31 @@ export default {
     },
 
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 0) {
-        if (rowIndex % 2 === 0) {
-          return {
-            rowspan: 2,
-            colspan: 1
-          };
-        } else {
-          return {
-            rowspan: 0,
-            colspan: 0
-          };
-        }
-      }
+      // if (columnIndex == 1 && rowIndex==1){
+      //   return{
+      //     rowspan:2,
+      //     colspan:1
+      //   }
+      // }
+      // if (columnIndex == 3 && rowIndex == 1){
+      //   return{
+      //     rowspan:3,
+      //     colspan:1
+      //   }
+      // }
+      // if (columnIndex === 0) {
+      //   if (rowIndex % 2 === 0) {
+      //     return {
+      //       rowspan: 2,
+      //       colspan: 1
+      //     };
+      //   } else {
+      //     return {
+      //       rowspan: 0,
+      //       colspan: 0
+      //     };
+      //   }
+      // }
     }
   }
 };

src/App7.vue

@@ -0,0 +1,93 @@
+<template>
+    <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="Type" label="分类" align="center" width="120" />
+
+            <el-table-column prop="Name" label="名称" align="center" width="120" />
+
+            <el-table-column prop="RunMode" label="运行模式" align="center" width="120" />
+
+            <el-table-column prop="Threshold" label="阈值" align="center" width="120" />
+
+            <el-table-column prop="DefaultValue" label="默认阈值" align="center" width="120" />
+
+            <el-table-column label="操作">
+                <template slot-scope="scope">
+                    <el-button type="success" @click="edit(scope.row)">修改</el-button>
+                    <el-button type="warning" @click="set(scope.row)">恢复默认</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios';
+    export default {
+        data() {
+            return {
+                queryParams: {
+                    page_index: 1,
+                    page_size: 10,
+                    project_id: undefined,
+                    box_id: undefined,
+                    online_status: undefined,
+                    run_mode: undefined
+                },
+                tableData: [],
+                total: 0,
+            };
+        },
+        created() {
+            this.getProjects();
+        },
+        methods: {
+            edit(val){
+
+            },
+            set(val){
+
+            },
+            /** 获取项目列表 */
+            getProjects() {
+                var params =  {
+                    page_index: Math.max(0, this.queryParams.page_index - 1),
+                    page_size: this.queryParams.page_size,
+                    project_id: this.queryParams.project_id,
+                    box_id: this.queryParams.box_id,
+                    online_status: this.queryParams.online_status,
+                    run_mode: this.queryParams.run_mode
+                };
+                axios
+                    .get('http://47.110.15.40:9001/proj/args/list', params)
+                    .then(resp => {
+                        let data = resp.data || {};
+                        // let result = data.result || {};
+                        // this.total = result.count;
+                        // 展开所有项目下的设备及单机
+                        this.tableData = data.result;
+                    })
+                    .catch(err => {
+                        console.log('请求错误: ', err);
+                    });
+            },
+
+        }
+    };
+</script>
+
+<style>
+    .el-table-tag {
+        /* width: 64px; */
+        padding: 4px 14px;
+        color: #333;
+        /* border-radius: 2px; */
+        font-size: 12px;
+    }
+</style>

src/main.js

@@ -15,7 +15,7 @@ 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 App5 from "@/App7";
 
 
 Vue.use(ElementUI);