完成

src/App.vue

@@ -5,8 +5,14 @@
 </template>
 
 <script>
+	let timmer = null //超时退出 定时器 必须放到全局，解决vue数据同步导致无法清除定时器
 	export default {
 		name: 'App',
+		data() {
+			return {
+				lastTime: null, //超时退出 最后时间
+			}
+		},
 		created() {
 			// 在页面加载时读取sessionStorage里的状态信息
 			if (sessionStorage.getItem('store')) {
@@ -17,12 +23,79 @@
 					)
 				)
 			}
-
 			// 在页面刷新时将vuex里的信息保存到sessionStorage里
 			// beforeunload事件在页面刷新时先触发
 			window.addEventListener('beforeunload', () => {
 				sessionStorage.setItem('store', JSON.stringify(this.$store.state))
+			});
+			// 超时退出 start
+			this.lastTime = new Date();
+
+			window.addEventListener('resize', () => {
+				if (timmer) {
+					clearTimeout(timmer);
+				}
+				timmer = setTimeout(() => {
+					if (this.$route.path != '/login') {
+						this.currentTime();
+					}
+				}, 3000)
+			})
+
+			window.addEventListener('click', () => {
+				if (timmer) {
+					clearTimeout(timmer);
+				}
+				timmer = setTimeout(() => {
+					if (this.$route.path != '/login') {
+						this.currentTime();
+					}
+				}, 3000)
 			})
+
+			window.addEventListener('scroll', () => {
+				if (timmer) {
+					clearTimeout(timmer);
+				}
+				timmer = setTimeout(() => {
+					if (this.$route.path != '/login') {
+						this.currentTime();
+					}
+				}, 3000)
+			}, true)
+
+			window.addEventListener('mousemove', () => {
+				if (timmer) {
+					clearTimeout(timmer);
+				}
+				timmer = setTimeout(() => {
+					if (this.$route.path != '/login') {
+						this.currentTime();
+					}
+				}, 3000)
+			}, true)
+			// 超时退出 end
+		},
+		methods: {
+			currentTime() { // 超时退出     
+				const currentTime = new Date();
+				if (currentTime - this.lastTime > 1000 * 60 * 20) {
+					this.lastTime = currentTime
+					if (this.$route.path != '/login') {
+						this.$message({
+							message: '登录超时，将返回登录页',
+							type: 'error',
+							duration: 1500
+						})
+						setTimeout(() => {
+							this.$store.dispatch('user/logout')
+							this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+						}, 2000)
+					}
+				} else {
+					this.lastTime = currentTime;
+				}
+			}
 		}
 	}
 </script>

src/views/index/index.vue

@@ -109,8 +109,7 @@
 						<el-table :data="zhuangtai_tableData" height="350" stripe :cell-style="cell_style"
 							:header-cell-style="header_cell_style" style="width: 100%"
 							v-loading="airRealTimeMonitor_loading">
-							<el-table-column v-for="col in cols" :prop="col.prop" :label="col.align"
-								:align="col.center">
+							<el-table-column v-for="col in cols" :prop="col.prop" :label="col.label" :align="col.align">
 							</el-table-column>
 						</el-table>
 					</el-card>
@@ -151,7 +150,7 @@
 		TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart,
 		CanvasRenderer
 	]);
-
+	var getAirRealTimeMonitor, getRealTimeBusinessInformation;
 	export default {
 		data() {
 			return {
@@ -198,7 +197,7 @@
 				header_cell_style: {
 					background: '#E6ECFE',
 					color: '#1A202B',
-					'font-size': '18px',
+					'font-size': '14px',
 					'font-family': 'Microsoft YaHei-3970(82674968)'
 				},
 				// 预警表格数据
@@ -206,14 +205,8 @@
 				// 业务表格数据
 				yewu_tableData: [],
 				// 状态表格数据
-				zhuangtai_tableData: [{
-					floor: '1F',
-					Building: '26/56',
-					teachBuilding: '26/56',
-					adminBuilding: '26/56',
-					stuCenter: '26/56',
-					library: '26/56'
-				}],
+				zhuangtai_tableData: [],
+				// 列
 				cols: [{
 					prop: 'floor',
 					label: '楼层',
@@ -268,18 +261,20 @@
 			this.getAirTimeoutWarning()
 			// 用电消费走势图
 			this.getChart()
-
 			// 空调实时监控
-			setInterval(() => {
+			this.getAirRealTimeMonitor()
+			getAirRealTimeMonitor = setInterval(() => {
 				this.getAirRealTimeMonitor()
-			}, 1500);
-
+			}, 1000 * 60);
 			// 实时业务信息，获取充值记录
-			setInterval(() => {
+			this.getRealTimeBusinessInformation()
+			getRealTimeBusinessInformation = setInterval(() => {
 				this.getRealTimeBusinessInformation()
-			}, 1500);
-			
-			// this.cols.push({prop: 'address', label: '地址'})
+			}, 1000 * 10);
+		},
+		beforeDestroy() {
+			clearInterval(getAirRealTimeMonitor);
+			clearInterval(getRealTimeBusinessInformation);
 		},
 		methods: {
 			/**
@@ -293,7 +288,7 @@
 					rows: 7
 				}
 				realTimeBusinessInformation(data).then((res) => {
-					console.log(res);
+					// console.log(res);
 					if (typeof res.code == 'undefined' || res.code == '') {
 						this.$message.error('返回数据格式问题，code未获取到！');
 						return;
@@ -331,7 +326,33 @@
 						return;
 					}
 					if (res.code == 200) {
-
+						// console.log(res.monthT);
+						let data = res.monthT;
+						let tmpData = [];
+						let rowData = {};
+						let columns = [{
+							prop: 'floor',
+							label: '楼层'
+						}];
+						for (var i = 0; i < data.length; i++) {
+							rowData = {
+								floor: data[i][0].floors
+							};
+							for (var j = 1; j < data[i].length; j++) {
+								rowData[`Build_${j}`] = data[i][j].per
+								if (columns.length == data[i].length) {
+									continue;
+								} else {
+									columns.push({
+										prop: `Build_${j}`,
+										label: data[i][j].build
+									});
+								}
+							}
+							tmpData.push(rowData);
+						}
+						this.cols = columns;
+						this.zhuangtai_tableData = tmpData;
 					} else {
 						// this.$message.error('空调实时监控返回的数据异常！');
 					}
@@ -358,9 +379,8 @@
 					}
 
 					if (res.code == 200) {
-						let tmp = res.monthT.sort((a, b) => {
-							return a.month.localeCompare(b.month)
-						});
+						// console.log(res.monthT);
+						let tmp = res.monthT.sort((a, b) => a.month.localeCompare(b.month));
 						let legend_data = []
 						let xAxis_data = []
 						let series = []
@@ -371,7 +391,7 @@
 								series.push({
 									name: tmp[i].air_config,
 									type: 'line',
-									stack: 'Total',
+									// smooth: true,
 									data: []
 								});
 							}
@@ -380,14 +400,29 @@
 								xAxis_data.push(tmp[i].month)
 							}
 						}
-
-						for (var i = 0; i < xAxis_data.length; i++) {
-							for (var j = 0; j < tmp.length; j++) {
-								for (var k = 0; k < series.length; k++) {
-									if (tmp[j].month == xAxis_data[i] && tmp[j].air_config == series[k].name) {
-										series[k].data.push(tmp[j].num)
+						// 一般方法，无法解决数据缺失
+						// for (var i = 0; i < series.length; i++) {
+						//     for (var j = 0; j < xAxis_data.length; j++) {
+						//         for (var k = 0; k < tmp.length; k++) {
+						//             if (series[i].name == tmp[k].air_config && xAxis_data[j] == tmp[k].month) {
+						//                 series[i].data.push(tmp[k].num);
+						//             }
+						//         }
+						//     }
+						// }
+						// 通用方法，可以解决数据缺失
+						for (var i = 0; i < series.length; i++) {
+							for (var j = 0; j < xAxis_data.length; j++) {
+								let tf = false;
+								for (var k = 0; k < tmp.length; k++) {
+									if (series[i].name == tmp[k].air_config && xAxis_data[j] == tmp[k].month) {
+										series[i].data.push(tmp[k].num);
+										tf = true;
 									}
 								}
+								if (tf == false) {
+									series[i].data.push(0.00);
+								}
 							}
 						}
 
@@ -398,11 +433,12 @@
 						this.option.legend.data = legend_data
 						this.option.xAxis.data = xAxis_data
 						this.option.series = series
+						// console.log(this.option);
 					} else {
 						this.option.legend.data = []
 						this.option.xAxis.data = []
 						this.option.series = []
-						this.$message.error('用电消费走势图返回的数据异常！');
+						this.$message.success('用电消费走势图 暂无数据！');
 					}
 					// 初始化图表
 					this.initCharts();

src/views/serveAC/index.vue

@@ -1389,7 +1389,9 @@
 					}
 				})
 			},
-			// 添加楼层对话框
+			/**
+			 * 添加楼层对话框
+			 */
 			dialog_add_louceng_click() {
 				this.$refs["add_louceng_form"].validate(validate => {
 					if (validate) {
@@ -1418,7 +1420,9 @@
 					}
 				})
 			},
-			// 添加房间对话框
+			/**
+			 * 添加房间对话框
+			 */
 			dialog_add_room_click() {
 				this.$refs["add_room_form"].validate(validate => {
 					if (validate) {
@@ -1451,7 +1455,9 @@
 					}
 				})
 			},
-			// 添加空调对话框
+			/**
+			 * 添加空调对话框
+			 */
 			dialog_add_air_click() {
 				this.$refs["add_device_form"].validate(validate => {
 					if (validate) {

src/views/systemSet/index.vue

@@ -29,6 +29,20 @@
 								<el-input v-model="formData.start_tiao" maxlength="2" placeholder="请输入金额"></el-input>
 								<span>元，不能开启空调</span>
 							</el-form-item>
+							<div style="white-space: nowrap;">
+								<el-form-item prop="send_jian" style="display: inline-block;">
+									<span>每隔</span>
+									<el-input v-model="formData.send_jian" maxlength="2" placeholder="请输入小时数"></el-input>
+									<span>小时　或　每天</span>
+								</el-form-item>
+								<el-form-item prop="send_start" style="display: inline-block;">
+									<el-time-picker :editable="false" v-model="formData.send_start" value-format="HH:mm:ss"
+										:picker-options="{selectableRange: '00:00:00 - 23:59:59'}" placeholder="请输入时间"
+										:clearable="false">
+									</el-time-picker>
+									<span>为截止时间，系统自动发送通知给操作员</span>
+								</el-form-item>
+							</div>
 							<el-form-item prop="overtime">
 								<span>空调使用超过</span>
 								<el-input v-model="formData.overtime" maxlength="2" placeholder="请输入小时数"></el-input>
@@ -39,19 +53,6 @@
 								<el-input v-model="formData.end_jian" maxlength="2" placeholder="请输入秒数"></el-input>
 								<span>秒可以关闭</span>
 							</el-form-item>
-							<el-form-item prop="send_jian">
-								<span>每隔</span>
-								<el-input v-model="formData.send_jian" maxlength="2" placeholder="请输入小时数"></el-input>
-								<span>小时，系统自动发送通知<span class="myRed">给操作员</span></span>
-							</el-form-item>
-							<el-form-item prop="send_start">
-								<span>每天</span>
-								<el-time-picker :editable="false" v-model="formData.send_start" value-format="HH:mm:ss"
-									:picker-options="{selectableRange: '00:00:00 - 23:59:59'}" placeholder="请输入时间"
-									:clearable="false">
-								</el-time-picker>
-								<span>为截止时间，系统自动发送通知<span class="myRed">给操作员</span></span>
-							</el-form-item>
 							<el-form-item prop="phone">
 								<span>使用问题联系方式</span>
 								<el-input v-model="formData.phone" placeholder="请输入手机号" maxlength="11"
@@ -324,12 +325,6 @@
 								font-size: 16px;
 								font-family: Microsoft YaHei-3970(82674968);
 								color: #46515E;
-								
-								.myRed {
-									color: red;
-									font-weight: bold;
-									font-size: 20px;
-								}
 							}
 
 							.el-input,