From 7e50f935e34342a6fc446b22a4af719395b2c529 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 21 May 2024 13:41:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=94=B5=E8=80=97=E6=8A=A5=E8=A1=A8?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/enm_energy/day_base.vue   | 296 +++++++++++++++++++---------
 src/views/enm_energy/hour_base.vue  | 183 ++++++++++++-----
 src/views/enm_energy/month_base.vue | 137 +++++++++++--
 3 files changed, 465 insertions(+), 151 deletions(-)

diff --git a/src/views/enm_energy/day_base.vue b/src/views/enm_energy/day_base.vue
index 1eac85c1..4432583d 100644
--- a/src/views/enm_energy/day_base.vue
+++ b/src/views/enm_energy/day_base.vue
@@ -1,7 +1,7 @@
 <!-- 全厂电量统计 -->
 <template>
-	<div class="app-container">
-		<el-header>
+	<div class="app-container" id="app-container" style="height: 100%">
+		<el-header id="app-header">
 			<div class="left-panel">
 				<el-date-picker
 					v-model="search_date"
@@ -26,99 +26,152 @@
 				<el-button type="primary" @click="handlePrint">打印 </el-button>
 			</div>
 		</el-header>
-		<el-card style="margin-top: 5px">
-			<div class="printWrap">
-				<div ref="print" id="myReport" class="printContainer">
-					<table
-						border="1"
-						:width="tableWidth"
-						cellspacing="0"
-						:key="timeStamp"
-						id="myTable"
-						class="myTable"
-					>
-						<thead class="myTableHead">
-							<tr>
-								<th :colspan="headerLength">电量消耗日报表</th>
+		<el-main>
+			<el-card>
+				<div>
+					<div ref="print" id="myReport">
+						<!-- <table
+							border="1"
+							:width="tableWidth"
+							cellspacing="0"
+							:key="timeStamp"
+							id="myTable"
+							class="myTable"
+						>
+							<thead class="myTableHead">
+								<tr>
+									<th :colspan="headerLength">
+										电量消耗日报表
+									</th>
+								</tr>
+								<tr>
+									<th>工段</th>
+									<th>设备</th>
+									<th>单位</th>
+									<th v-for="item in this.days" :key="item">
+										{{ item }}日
+									</th>
+									<th>本月合计</th>
+								</tr>
+							</thead>
+							<tr
+								v-for="(item, index) in tableDatas"
+								:key="index"
+							>
+								<td
+									class="numCell"
+									v-if="index == 0"
+									rowspan="4"
+								>
+									{{ item[0] }}
+								</td>
+								<td
+									class="numCell"
+									v-else-if="index == 4"
+									rowspan="5"
+								>
+									{{ item[0] }}
+								</td>
+								<td
+									class="numCell"
+									v-else-if="index == 9"
+									rowspan="5"
+								>
+									{{ item[0] }}
+								</td>
+								<td
+									class="numCell"
+									v-else-if="index == 14"
+									rowspan="4"
+								>
+									{{ item[0] }}
+								</td>
+								<td
+									class="numCell"
+									v-else-if="index == 18"
+									rowspan="3"
+								>
+									{{ item[0] }}
+								</td>
+								<td
+									class="numCell"
+									v-else-if="index == 21"
+									rowspan="5"
+								>
+									{{ item[0] }}
+								</td>
+								<td
+									class="numCell"
+									v-else-if="
+										index == 26 ||
+										index == 27 ||
+										index == 28 ||
+										index == 29
+									"
+								>
+									{{ item[0] }}
+								</td>
+								<td class="numCell">{{ item[1] }}</td>
+								<td class="numCell">{{ item[2] }}</td>
+								<td
+									v-for="day in days"
+									:key="day"
+									class="numCell"
+									@click="itemClick(item, index)"
+								>
+									{{ item[2 + day] }}
+								</td>
+								<td class="numCell">
+									{{ item[headerLength - 1] }}
+								</td>
 							</tr>
-							<tr>
-								<th>工段</th>
-								<th>设备</th>
-								<th>单位</th>
-								<th v-for="item in this.days" :key="item">
-									{{ item }}日
-								</th>
-								<th>本月合计</th>
-							</tr>
-						</thead>
-						<tr v-for="(item, index) in tableDatas" :key="index">
-							<td class="numCell" v-if="index == 0" rowspan="4">
-								{{ item[0] }}
-							</td>
-							<td
-								class="numCell"
-								v-else-if="index == 4"
-								rowspan="5"
+						</table> -->
+						<el-table
+							id="hourBaseTable"
+							:data="tableDatas2"
+							style="width: 100%"
+							border
+							:height="tableHeight"
+							:span-method="objectSpanMethod"
+							@cell-click="handleCellClick"
+						>
+							<el-table-column
+								label="工段"
+								prop="mgroupName"
+								width="100"
+								fixed
 							>
-								{{ item[0] }}
-							</td>
-							<td
-								class="numCell"
-								v-else-if="index == 9"
-								rowspan="5"
+							</el-table-column>
+							<el-table-column
+								label="设备"
+								prop="nickname"
+								width="110"
+								fixed
 							>
-								{{ item[0] }}
-							</td>
-							<td
-								class="numCell"
-								v-else-if="index == 14"
-								rowspan="4"
+							</el-table-column>
+							<el-table-column label="单位" prop="unit" fixed>
+							</el-table-column>
+							<el-table-column
+								v-for="item in xAxisData"
+								:key="item"
+								:label="item"
+								:prop="item"
+								width="100"
 							>
-								{{ item[0] }}
-							</td>
-							<td
-								class="numCell"
-								v-else-if="index == 18"
-								rowspan="3"
+							</el-table-column>
+							<el-table-column
+								label="合计"
+								prop="sum"
+								width="100"
+								fixed="right"
 							>
-								{{ item[0] }}
-							</td>
-							<td
-								class="numCell"
-								v-else-if="index == 21"
-								rowspan="5"
-							>
-								{{ item[0] }}
-							</td>
-							<td
-								class="numCell"
-								v-else-if="
-									index == 26 ||
-									index == 27 ||
-									index == 28 ||
-									index == 29
-								"
-							>
-								{{ item[0] }}
-							</td>
-							<td class="numCell">{{ item[1] }}</td>
-							<td class="numCell">{{ item[2] }}</td>
-							<td
-								v-for="day in days"
-								:key="day"
-								class="numCell"
-								@click="itemClick(item, index)"
-							>
-								{{ item[2 + day] }}
-							</td>
-							<td class="numCell">
-								{{ item[headerLength - 1] }}
-							</td>
-						</tr>
-					</table>
+							</el-table-column>
+						</el-table>
+					</div>
 				</div>
-			</div>
-		</el-card>
+			</el-card>
+		</el-main>
+
 		<el-dialog v-model="itemVisible" :title="tableName">
 			<scEcharts
 				height="400px"
@@ -139,20 +192,25 @@ export default {
 	},
 	data() {
 		return {
+			days: 30,
 			year: "",
 			month: "",
 			myChart: null,
 			search_date: "",
 			headerLength: 33,
+			tableHeight: 600,
 			itemVisible: false,
 			xAxisData: [],
+			indexList: [],
 			mpointList: [],
 			tableDatas: [],
+			tableDatas2: [],
 			timeStamp: null,
 			tableWidth: "3300",
 			itemChartTitle: "",
 			tableName: "全厂电量日统计",
 			sourceData: {},
+			mgroupObj: {},
 			option: {
 				title: {
 					text: "全厂电量日统计",
@@ -264,8 +322,30 @@ export default {
 			that.xAxisData.push(n + "日");
 		}
 		this.getMPoints();
+		let heightContainer =
+			document.getElementById("app-container").clientHeight;
+		let heightHeader = document.getElementById("app-header").clientHeight;
+		let heightTable = heightContainer - heightHeader - 35;
+		that.tableHeight = heightTable;
 	},
 	methods: {
+		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+			let that = this;
+			if (columnIndex == 0) {
+				if (that.indexList.indexOf(rowIndex) > -1) {
+					let rowspans = that.mgroupObj[row.mgroupName];
+					return {
+						rowspan: rowspans,
+						colspan: 1,
+					};
+				} else {
+					return {
+						rowspan: 1,
+						colspan: 0,
+					};
+				}
+			}
+		},
 		dateChange(e) {
 			let that = this;
 			let arr = e.split("-");
@@ -295,7 +375,23 @@ export default {
 		dataLoop() {
 			let that = this;
 			that.tableDatas = [];
+			let _mgroup = [],
+				_nameLength = [],
+				indexList = [];
+			let mgroupObj = {};
 			that.mpointList.forEach((item, index) => {
+				let indexs = _mgroup.indexOf(item.mgroup_name);
+				if (indexs > -1) {
+					_nameLength[indexs] += 1;
+				} else {
+					_mgroup.push(item.mgroup_name);
+					_nameLength.push(1);
+					indexList.push(index);
+				}
+
+				for (let i = 0; i < _mgroup.length; i++) {
+					mgroupObj[_mgroup[i]] = _nameLength[i];
+				}
 				let arr = [];
 				arr[0] =
 					item.mgroup_name != null
@@ -309,8 +405,17 @@ export default {
 					arr[i + 3] = 0;
 				}
 				that.tableDatas.push(arr);
+				let obj = {};
+				obj.mgroupName =
+					item.mgroup_name != null ? item.mgroup_name : item.name;
+				obj.nickname =
+					item.nickname != null ? item.nickname : item.name;
+				obj.unit = item.unit;
+				that.tableDatas2.push(obj);
 				that.getData(item.id, index);
 			});
+			that.mgroupObj = mgroupObj;
+			that.indexList = indexList;
 		},
 		getData(id, index) {
 			let that = this;
@@ -327,6 +432,8 @@ export default {
 					let ind = item.day + 2;
 					that.tableDatas[index][ind] = item.val;
 					sum += Number(item.val);
+					let keyName = item.day + "日";
+					that.tableDatas2[index][keyName] = item.val;
 				});
 				sum = sum * 100;
 				sum = Math.round(sum);
@@ -334,9 +441,20 @@ export default {
 				let dayss = 0;
 				dayss = this.days + 3;
 				that.tableDatas[index][dayss] = sum.toFixed(2);
+				that.tableDatas2[index].sum = sum.toFixed(2);
 				that.$forceUpdate();
 			});
 		},
+		handleCellClick(row, column, cell, event) {
+			let that = this;
+
+			let index = that.tableDatas2.indexOf(row);
+			console.log(index, "index");
+			let lineData = that.tableDatas[index].slice(3, that.days + 3);
+			that.option.xAxis.data = that.xAxisData;
+			that.option.series[0].data = lineData;
+			this.itemVisible = true;
+		},
 		itemClick(item, index) {
 			let that = this;
 			let lineData = that.tableDatas[index].slice(3, that.headerLength);
diff --git a/src/views/enm_energy/hour_base.vue b/src/views/enm_energy/hour_base.vue
index aed208ef..a76a562d 100644
--- a/src/views/enm_energy/hour_base.vue
+++ b/src/views/enm_energy/hour_base.vue
@@ -1,7 +1,7 @@
 <!-- 全厂电量统计 -->
 <template>
-	<div class="app-container">
-		<el-header>
+	<div class="app-container" id="app-container" style="height: 100%">
+		<el-header id="app-header">
 			<div class="left-panel">
 				<el-date-picker
 					v-model="search_date"
@@ -26,10 +26,12 @@
 				<el-button type="primary" @click="handlePrint">打印 </el-button>
 			</div>
 		</el-header>
-		<el-card style="margin-top: 5px">
-			<div class="printWrap">
-				<div ref="print" id="myReport" class="printContainer">
-					<table
+		<el-main>
+			<el-card>
+				<div>
+					<!-- <div ref="print" id="myReport" class="printContainer"> -->
+					<div ref="print" id="myReport" class="printContainer">
+						<!-- <table
 						border="1"
 						width="2700"
 						cellspacing="0"
@@ -114,10 +116,52 @@
 							</td>
 							<td class="numCell">{{ item[27] }}</td>
 						</tr>
-					</table>
+					</table> -->
+						<el-table
+							id="hourBaseTable"
+							:data="tableDatas2"
+							style="width: 100%"
+							border
+							:height="tableHeight"
+							:span-method="objectSpanMethod"
+							@cell-click="handleCellClick"
+						>
+							<el-table-column
+								label="工段"
+								prop="mgroupName"
+								width="100"
+								fixed
+							>
+							</el-table-column>
+							<el-table-column
+								label="设备"
+								prop="nickname"
+								width="110"
+								fixed
+							>
+							</el-table-column>
+							<el-table-column label="单位" prop="unit" fixed>
+							</el-table-column>
+							<el-table-column
+								v-for="(item, index) in 24"
+								:key="item"
+								:label="index + '时'"
+								:prop="index + '时'"
+								width="100"
+							>
+							</el-table-column>
+							<el-table-column
+								label="合计"
+								prop="sum"
+								width="100"
+								fixed="right"
+							>
+							</el-table-column>
+						</el-table>
+					</div>
 				</div>
-			</div>
-		</el-card>
+			</el-card>
+		</el-main>
 		<el-dialog v-model="itemVisible" :title="itemChartTitle">
 			<scEcharts
 				height="400px"
@@ -142,39 +186,11 @@ export default {
 			year: "",
 			month: "",
 			search_date: "",
-			tableDatas1: [
-				["石灰石破碎", "破碎机", "kw.h"], //0
-				["石灰石破碎", "堆取料机", "kw.h"],
-				["石灰石破碎", "低压变压器柜", "kw.h"],
-				["石灰石破碎", "石灰石破碎合计", "kw.h"],
-				["原料磨", "循环风机", "kw.h"],
-				["原料磨", "辊压机", "kw.h"],
-				["原料磨", "调配变压器", "kw.h"],
-				["原料磨", "低压变压器柜器", "kw.h"],
-				["原料磨", "原料磨系统合计", "kw.h"],
-				["回转窑", "尾排风机", "kw.h"],
-				["回转窑", "高温风机", "kw.h"],
-				["回转窑", "头排风机", "kw.h"],
-				["回转窑", "低压变压器柜", "kw.h"],
-				["回转窑", "回转窑烧成系统合计", "kw.h"],
-				["煤磨", "煤磨主电机", "kw.h"],
-				["煤磨", "煤磨排风机", "kw.h"],
-				["煤磨", "低压变压器柜", "kw.h"],
-				["煤磨", "煤磨系统合计", "kw.h"],
-				["余热发电", "余热发电量", "kw.h"],
-				["余热发电", "余热发电自用电量", "kw.h"],
-				["余热发电", "余热供电量", "kw.h"],
-				["空压机", "1#空压机", "kw.h"],
-				["空压机", "2#空压机", "kw.h"],
-				["空压机", "3#空压机", "kw.h"],
-				["空压机", "4#空压机", "kw.h"],
-				["空压机", "空压机合计", "kw.h"],
-				["富氧燃烧系统", "富氧燃烧耗电设备", "kw.h"],
-				["生产总耗电量", "生产部分总耗电", "kw.h"],
-				["全厂进线", "全厂耗电量", "kw.h"],
-			],
+			mgroupObj: {},
+			indexList: [],
 			mpointList: [],
 			tableDatas: [],
+			tableDatas2: [],
 			hours: [
 				1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
 				19, 20, 21, 22, 23, 24,
@@ -190,6 +206,7 @@ export default {
 				"生产总耗电量",
 				"全厂进线",
 			],
+			tableHeight: 600,
 			mgroup: "石灰石破碎",
 			itemChartTitle: "",
 			itemChartData: [],
@@ -302,19 +319,41 @@ export default {
 		that.year = year;
 		that.month = month;
 		that.search_date = year + "-" + month_s + "-" + day_s;
-		for (let i = 0; i < that.tableDatas.length; i++) {
-			for (let j = 0; j < 24; j++) {
-				let k = 3 + j;
-				that.tableDatas[i][k] = 0;
-				this.$forceUpdate();
-			}
-		}
+		// for (let i = 0; i < that.tableDatas.length; i++) {
+		// 	for (let j = 0; j < 24; j++) {
+		// 		let k = 3 + j;
+		// 		that.tableDatas[i][k] = 0;
+		// 		this.$forceUpdate();
+		// 	}
+		// }
 		for (let n = 0; n < 24; n++) {
 			that.xAxisData.push(n + "时");
 		}
 		this.getMPoints();
+		let heightContainer =
+			document.getElementById("app-container").clientHeight;
+		let heightHeader = document.getElementById("app-header").clientHeight;
+		let heightTable = heightContainer - heightHeader - 35;
+		that.tableHeight = heightTable;
 	},
 	methods: {
+		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+			let that = this;
+			if (columnIndex == 0) {
+				if (that.indexList.indexOf(rowIndex) > -1) {
+					let rowspans = that.mgroupObj[row.mgroupName];
+					return {
+						rowspan: rowspans,
+						colspan: 1,
+					};
+				} else {
+					return {
+						rowspan: 1,
+						colspan: 0,
+					};
+				}
+			}
+		},
 		dateChange(e) {
 			let that = this;
 			that.tableDatas = [];
@@ -331,7 +370,7 @@ export default {
 			// }
 			let nowDate = new Date();
 			that.timeStamp = nowDate.getTime();
-			that.getLengthData();
+			// that.getLengthData();
 			that.dataLoop();
 		},
 		getMPoints() {
@@ -346,7 +385,6 @@ export default {
 					query: "{ id, name, nickname, mgroup_name, unit }",
 				})
 				.then((res) => {
-					// let data = res.slice(3);
 					that.mpointList = res;
 					that.dataLoop();
 				});
@@ -363,7 +401,23 @@ export default {
 		dataLoop() {
 			let that = this;
 			that.tableDatas = [];
+			let _mgroup = [],
+				_nameLength = [],
+				indexList = [];
+			let mgroupObj = {};
 			that.mpointList.forEach((item, index) => {
+				let indexs = _mgroup.indexOf(item.mgroup_name);
+				if (indexs > -1) {
+					_nameLength[indexs] += 1;
+				} else {
+					_mgroup.push(item.mgroup_name);
+					_nameLength.push(1);
+					indexList.push(index);
+				}
+
+				for (let i = 0; i < _mgroup.length; i++) {
+					mgroupObj[_mgroup[i]] = _nameLength[i];
+				}
 				let arr = [];
 				arr[0] =
 					item.mgroup_name != null ? item.mgroup_name : item.name;
@@ -373,8 +427,17 @@ export default {
 					arr[i + 3] = 0;
 				}
 				that.tableDatas.push(arr);
+				let obj = {};
+				obj.mgroupName =
+					item.mgroup_name != null ? item.mgroup_name : item.name;
+				obj.nickname =
+					item.nickname != null ? item.nickname : item.name;
+				obj.unit = item.unit;
+				that.tableDatas2.push(obj);
 				that.getData(item.id, index);
 			});
+			that.mgroupObj = mgroupObj;
+			that.indexList = indexList;
 		},
 		getData(id, index) {
 			let that = this;
@@ -386,17 +449,20 @@ export default {
 			obj.mpoint = id;
 			obj.page = 0;
 			this.$API.enm.mpoint.stat.req(obj).then((res) => {
-				console.log(res);
+				// console.log(res);
 				let sum = 0;
 				res.forEach((item) => {
 					let ind = item.hour + 3;
 					that.tableDatas[index][ind] = item.val;
 					sum += Number(item.val);
+					let keyName = item.hour + "时";
+					that.tableDatas2[index][keyName] = item.val;
 				});
 				sum = sum * 100;
 				sum = Math.round(sum);
 				sum = sum / 100;
 				that.tableDatas[index][27] = sum.toFixed(2);
+				that.tableDatas2[index].sum = sum.toFixed(2);
 				that.$forceUpdate();
 			});
 		},
@@ -426,6 +492,18 @@ export default {
 				}
 			}
 		},
+		handleCellClick(row, column, cell, event) {
+			let that = this;
+			console.log("row", row);
+			console.log("column", column);
+			console.log("cell", cell);
+			let index = that.tableDatas2.indexOf(row);
+			console.log(index, "index");
+			let lineData = that.tableDatas[index].slice(3, 27);
+			that.option.xAxis.data = that.xAxisData;
+			that.option.series[0].data = lineData;
+			this.itemVisible = true;
+		},
 		itemClick(item, index) {
 			let that = this;
 			let lineData = that.tableDatas[index].slice(3, that.headerLength);
@@ -435,7 +513,7 @@ export default {
 		},
 		exportExcel() {
 			this.exportLoading = true;
-			this.$XLSX("#myTable", this.tableName);
+			this.$XLSX("#hourBaseTable", this.tableName);
 			this.exportLoading = false;
 		},
 		handlePrint() {
@@ -449,4 +527,7 @@ export default {
 	width: 100%;
 	overflow-x: scroll;
 }
+.printContainer {
+	width: 100%;
+}
 </style>
diff --git a/src/views/enm_energy/month_base.vue b/src/views/enm_energy/month_base.vue
index 5e8421e5..85c05716 100644
--- a/src/views/enm_energy/month_base.vue
+++ b/src/views/enm_energy/month_base.vue
@@ -1,7 +1,7 @@
 <!-- 全厂电量统计 -->
 <template>
-	<div class="app-container">
-		<el-header>
+	<div class="app-container" id="app-container" style="height: 100%">
+		<el-header id="app-header">
 			<div class="left-panel">
 				<el-date-picker
 					v-model="search_date"
@@ -26,10 +26,11 @@
 				<el-button type="primary" @click="handlePrint">打印 </el-button>
 			</div>
 		</el-header>
-		<el-card style="margin-top: 5px">
-			<div class="printWrap">
-				<div ref="print" id="myReport" class="printContainer">
-					<table
+		<el-main>
+			<el-card>
+				<div>
+					<div ref="print" id="myReport" class="printContainer">
+						<!-- <table
 						border="1"
 						width="1600"
 						cellspacing="0"
@@ -113,10 +114,52 @@
 							</td>
 							<td class="numCell">{{ item[15] }}</td>
 						</tr>
-					</table>
+					</table> -->
+						<el-table
+							id="hourBaseTable"
+							:data="tableDatas2"
+							style="width: 100%"
+							border
+							:height="tableHeight"
+							:span-method="objectSpanMethod"
+							@cell-click="handleCellClick"
+						>
+							<el-table-column
+								label="工段"
+								prop="mgroupName"
+								width="100"
+								fixed
+							>
+							</el-table-column>
+							<el-table-column
+								label="设备"
+								prop="nickname"
+								width="110"
+								fixed
+							>
+							</el-table-column>
+							<el-table-column label="单位" prop="unit" fixed>
+							</el-table-column>
+							<el-table-column
+								v-for="item in months"
+								:key="item"
+								:label="item + '月'"
+								:prop="item + '月'"
+							>
+							</el-table-column>
+							<el-table-column
+								label="合计"
+								prop="sum"
+								width="100"
+								fixed="right"
+							>
+							</el-table-column>
+						</el-table>
+					</div>
 				</div>
-			</div>
-		</el-card>
+			</el-card>
+		</el-main>
+
 		<el-dialog v-model="itemVisible" :title="tableName">
 			<scEcharts
 				height="400px"
@@ -139,10 +182,14 @@ export default {
 		return {
 			year: "",
 			search_date: "",
+			mgroupObj: {},
+			indexList: [],
 			mpointList: [],
 			tableDatas: [],
+			tableDatas2: [],
 			timeStamp: null,
 			itemVisible: false,
+			tableHeight: 600,
 			months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
 			tableName: "全厂电量月统计",
 			sourceData: {},
@@ -252,9 +299,34 @@ export default {
 		that.year = nowDate.getFullYear();
 		that.search_date = that.year;
 		that.timeStamp = nowDate.getTime();
+		for (let n = 1; n < 13; n++) {
+			that.xAxisData.push(n + "月");
+		}
 		this.getMPoints();
+		let heightContainer =
+			document.getElementById("app-container").clientHeight;
+		let heightHeader = document.getElementById("app-header").clientHeight;
+		let heightTable = heightContainer - heightHeader - 35;
+		that.tableHeight = heightTable;
 	},
 	methods: {
+		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+			let that = this;
+			if (columnIndex == 0) {
+				if (that.indexList.indexOf(rowIndex) > -1) {
+					let rowspans = that.mgroupObj[row.mgroupName];
+					return {
+						rowspan: rowspans,
+						colspan: 1,
+					};
+				} else {
+					return {
+						rowspan: 1,
+						colspan: 0,
+					};
+				}
+			}
+		},
 		dateChange() {
 			let that = this;
 			that.tableDatas = [];
@@ -275,7 +347,6 @@ export default {
 					query: "{ id, name, nickname, mgroup_name, unit }",
 				})
 				.then((res) => {
-					// let data = res.slice(3);
 					that.mpointList = res;
 					that.dataLoop();
 				});
@@ -283,7 +354,23 @@ export default {
 		dataLoop() {
 			let that = this;
 			that.tableDatas = [];
+			let _mgroup = [],
+				_nameLength = [],
+				indexList = [];
+			let mgroupObj = {};
 			that.mpointList.forEach((item, index) => {
+				let indexs = _mgroup.indexOf(item.mgroup_name);
+				if (indexs > -1) {
+					_nameLength[indexs] += 1;
+				} else {
+					_mgroup.push(item.mgroup_name);
+					_nameLength.push(1);
+					indexList.push(index);
+				}
+
+				for (let i = 0; i < _mgroup.length; i++) {
+					mgroupObj[_mgroup[i]] = _nameLength[i];
+				}
 				let arr = [];
 				arr[0] =
 					item.mgroup_name != null ? item.mgroup_name : item.name;
@@ -293,8 +380,17 @@ export default {
 					arr[i + 3] = 0;
 				}
 				that.tableDatas.push(arr);
+				let obj = {};
+				obj.mgroupName =
+					item.mgroup_name != null ? item.mgroup_name : item.name;
+				obj.nickname =
+					item.nickname != null ? item.nickname : item.name;
+				obj.unit = item.unit;
+				that.tableDatas2.push(obj);
 				that.getData(item.id, index);
 			});
+			that.mgroupObj = mgroupObj;
+			that.indexList = indexList;
 		},
 		getData(id, index) {
 			let that = this;
@@ -310,14 +406,30 @@ export default {
 					let ind = item.month + 2;
 					that.tableDatas[index][ind] = item.val;
 					sum += Number(item.val);
+					let keyName = item.month + "月";
+					that.tableDatas2[index][keyName] = item.val;
 				});
 				sum = sum * 100;
 				sum = Math.round(sum);
 				sum = sum / 100;
 				that.tableDatas[index][15] = sum.toFixed(2);
+				that.tableDatas2[index].sum = sum.toFixed(2);
 				that.$forceUpdate();
 			});
 		},
+		handleCellClick(row, column, cell, event) {
+			let that = this;
+			console.log("row", row);
+			console.log("column", column);
+			console.log("cell", cell);
+			let index = that.tableDatas2.indexOf(row);
+			console.log(index, "index");
+			//获取图数据
+			let lineData = that.tableDatas[index].slice(3, 14);
+			that.option.xAxis.data = that.xAxisData;
+			that.option.series[0].data = lineData;
+			this.itemVisible = true;
+		},
 		itemClick(item, index) {
 			let that = this;
 			let lineData = that.tableDatas[index].slice(3, that.headerLength);
@@ -327,7 +439,7 @@ export default {
 		},
 		exportExcel() {
 			this.exportLoading = true;
-			this.$XLSX("#myTable", this.tableName);
+			this.$XLSX("#hourBaseTable", this.tableName);
 			this.exportLoading = false;
 		},
 		handlePrint() {
@@ -341,4 +453,7 @@ export default {
 	width: 100%;
 	overflow-x: scroll;
 }
+.printContainer {
+	width: 100%;
+}
 </style>