对接离线预警，能耗top10接口

src/api/index.js

@@ -25,13 +25,30 @@ export function thisMonthConsume() {
 }
 
 // 空调超时预警
-export function airTimeoutWarning() {
+export function airTimeoutWarning(forData) {
+	let data = new FormData()
+	data.append('page', forData.page)
+	data.append('rows', forData.rows)
+	
 	return request({
 		url: '/airManage/firstqueryOverTime.action',
-		method: 'post'
+		method: 'post',
+		data
 	})
 }
 
+// 空调超时预警
+export function offlineTimeoutWarning(forData) {
+	let data = new FormData()
+	data.append('page', forData.page)
+	data.append('rows', forData.rows)
+	
+	return request({
+		url: '/airManage/firstqueryofflineTime.action',
+		method: 'post',
+		data
+	})
+}
 
 // 用电消费走势图
 export function getChart(forData) {
@@ -58,6 +75,19 @@ export function realTimeBusinessInformation(forData) {
 	})
 }
 
+// 办公室能耗排名分页数据
+export function officeEnergyConsumptionRanking(forData) {
+	let data = new FormData()
+	data.append('page', forData.page)
+	data.append('rows', forData.rows)
+
+	return request({
+		url: '/airManage/buildqueryEnergyRank.action',
+		method: 'post',
+		data
+	})
+}
+
 // 空调实时监控
 export function airRealTimeMonitor() {
 	return request({

src/views/index/index.vue

@@ -63,7 +63,7 @@
 							<span class="title-btn" :style="off_line_warning ? 'background-color: #3965FF;color:#ffffff' : ''"
 								@click="off_line_warning_handle">离线预警</span>
 						</div>
-						<el-table :data="yujing_tableData" height="350" stripe :cell-style="cell_style" v-loading="airTimeoutWarning_loading"
+						<el-table :data="caoshi_yujing_tableData" height="350" stripe :cell-style="cell_style" v-loading="caoshi_yujing_PageParam_loading"
 							:header-cell-style="header_cell_style" v-if="time_out_warning" style="width: 100%">
 							<el-table-column prop="deviceId" label="设备号" align="center"> </el-table-column>
 							<el-table-column prop="warningTime" label="告警时间" align="center"> </el-table-column>
@@ -71,14 +71,22 @@
 							<el-table-column prop="contact" label="联系方式" align="center"> </el-table-column>
 							<el-table-column prop="operator" label="操作人" align="center"> </el-table-column>
 						</el-table>
-						<el-table :data="yujing_tableData" height="350" stripe :cell-style="cell_style" v-loading="airTimeoutWarning_loading"
+						<el-pagination class="dialog-page" @current-change="caoshi_yujing_HandleCurrentChange" v-if="time_out_warning"
+							:current-page.sync="caoshi_yujing_PageParam.currentPage" :page-size="caoshi_yujing_PageParam.pageSize"
+							layout="prev, pager, next, jumper" :total="caoshi_yujing_PageParam.total">
+						</el-pagination>
+						<el-table :data="lixian_yujing_tableData" height="350" stripe :cell-style="cell_style" v-loading="lixian_yujing_loading"
 							:header-cell-style="header_cell_style" v-if="off_line_warning" style="width: 100%">
-							<el-table-column prop="deviceId" label="空调设备" align="center"> </el-table-column>
-							<el-table-column prop="room" label="房间号" align="center"> </el-table-column>
-							<el-table-column prop="floor" label="楼层" align="center"> </el-table-column>
-							<el-table-column prop="drom" label="楼栋" align="center"> </el-table-column>
-							<el-table-column prop="warningTime" label="告警时间" align="center"> </el-table-column>
+							<el-table-column prop="air_name" label="空调设备" align="center" width="100"> </el-table-column>
+							<el-table-column prop="dom" label="房间号" align="center"> </el-table-column>
+							<el-table-column prop="floors" label="楼层" align="center" width="80"> </el-table-column>
+							<el-table-column prop="build" label="楼栋" align="center"> </el-table-column>
+							<el-table-column prop="time" label="告警时间" align="center" width="200"> </el-table-column>
 						</el-table>
+						<el-pagination class="dialog-page" @current-change="lixian_yujing_HandleCurrentChange" v-if="off_line_warning"
+							:current-page.sync="lixian_yujing_PageParam.currentPage" :page-size="lixian_yujing_PageParam.pageSize"
+							layout="prev, pager, next, jumper" :total="lixian_yujing_PageParam.total">
+						</el-pagination>
 					</el-card>
 				</div>
 			</el-col>
@@ -93,24 +101,26 @@
 									<img src="../../icons/images/index/yewu.png" alt="">
 									<span>办公室能耗排名top10</span>
 								</div>
-								<span class="card-desc pointer" @click="dialogTableVisible = true">查看更多&gt;&gt;</span>
-								<el-dialog title="办公室能耗排名" :visible.sync="dialogTableVisible" width="530px" :close-on-click-modal="false">
-									<el-table :data="gridData" height="540">
-										<el-table-column property="date" label="房间号" align="center"></el-table-column>
-										<el-table-column property="name" label="能耗KWH" align="center"></el-table-column>
-										<el-table-column property="address" label="排名" align="center"></el-table-column>
-									</el-table>
-									<el-pagination class="dialog-page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3"
-										:page-size="10" layout="prev, pager, next, jumper" :total="1000">
-									</el-pagination>
-								</el-dialog>
+								<span class="card-desc pointer" @click="click_view_more">查看更多&gt;&gt;</span>
 							</div>
 						</div>
-						<el-table :data="yewu_tableData" height="490" stripe :cell-style="handle_cell_style" :header-cell-style="header_cell_style"
-							v-loading="realTimeBusinessInformation_loading" style="width: 100%" :show-header="true">
-							<el-table-column prop="desc" label="房间号" align="center"></el-table-column>
-							<el-table-column prop="desc" label="能耗KWH" align="center"></el-table-column>
-							<el-table-column prop="desc" label="排名" align="center"></el-table-column>
+						<el-table :data="yewu_tableData" height="530" stripe :cell-style="handle_cell_style" :header-cell-style="header_cell_style"
+							v-loading="officeEnergyConsumptionRanking_loading" style="width: 100%" :show-header="true">
+							<el-table-column label="房间号" align="center">
+								<template slot-scope="scope">
+									<span>{{scope.row.dom}}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="能耗KWH" align="center" width="100">
+								<template slot-scope="scope">
+									<span>{{scope.row.account}}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="排名" align="center" width="80">
+								<template slot-scope="scope">
+									<span>{{scope.row.num}}</span>
+								</template>
+							</el-table-column>
 						</el-table>
 					</el-card>
 				</div>
@@ -129,7 +139,7 @@
 								<div class="card-desc">A/B=已开机/总设备</div>
 							</div>
 						</div>
-						<el-table :data="zhuangtai_tableData" height="490" stripe :cell-style="cell_style" :header-cell-style="header_cell_style"
+						<el-table :data="zhuangtai_tableData" height="530" 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.label" :align="col.align" :width="col.width">
 							</el-table-column>
@@ -138,6 +148,28 @@
 				</div>
 			</el-col>
 		</el-row>
+		<el-dialog title="办公室能耗排名" :visible.sync="dialogTableVisible" width="600px" :close-on-click-modal="false">
+			<el-table :data="yewu_tableData_page" height="540">
+				<el-table-column label="房间号" align="center">
+					<template slot-scope="scope">
+						<span>{{scope.row.dom}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="能耗KWH" align="center" width="100">
+					<template slot-scope="scope">
+						<span>{{scope.row.account}}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="排名" align="center" width="80">
+					<template slot-scope="scope">
+						<span>{{scope.row.num}}</span>
+					</template>
+				</el-table-column>
+			</el-table>
+			<el-pagination class="dialog-page" @current-change="officeEnergyHandleCurrentChange" :current-page.sync="officeEnergy.currentPage"
+				:page-size="officeEnergy.pageSize" layout="prev, pager, next, jumper" :total="officeEnergy.total">
+			</el-pagination>
+		</el-dialog>
 	</div>
 </template>
 
@@ -147,8 +179,10 @@
 		thisMonthRecharge,
 		thisMonthConsume,
 		airTimeoutWarning,
+		offlineTimeoutWarning,
 		getChart,
 		airRealTimeMonitor,
+		officeEnergyConsumptionRanking,
 		realTimeBusinessInformation
 	} from '@/api/index';
 
@@ -175,62 +209,27 @@
 		TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart,
 		CanvasRenderer
 	]);
-	var getAirRealTimeMonitor, getRealTimeBusinessInformation;
+	var getAirRealTimeMonitor, getOfficeEnergyConsumptionRanking;
 	export default {
 		data() {
 			return {
+				officeEnergy: {
+					currentPage: 1,
+					pageSize: 10,
+					total: 0
+				},
+				caoshi_yujing_PageParam: {
+					currentPage: 1,
+					pageSize: 6,
+					total: 0
+				},
+				lixian_yujing_PageParam: {
+					currentPage: 1,
+					pageSize: 6,
+					total: 0
+				},
 				// 弹出框表格
 				dialogTableVisible: false,
-				// 弹出框表格
-				gridData: [{
-					date: '2016-05-02',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-04',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-01',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-03',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-02',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-04',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-01',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-03',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-02',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-04',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-01',
-					name: '王小虎',
-					address: '1518'
-				}, {
-					date: '2016-05-03',
-					name: '王小虎',
-					address: '1518'
-				}],
 				// 账户总余额
 				showTotalMoney: {
 					time: '0000/00/00 00:00:00',
@@ -252,11 +251,12 @@
 					loading: false
 				},
 				// 空调超时预警loading
-				airTimeoutWarning_loading: false,
+				caoshi_yujing_PageParam_loading: false,
+				lixian_yujing_loading: false,
 				// 空调实时监控loading
 				airRealTimeMonitor_loading: false,
 				// 实时业务信息，获取充值记录loading
-				realTimeBusinessInformation_loading: true,
+				officeEnergyConsumptionRanking_loading: true,
 				// 选择年份范围
 				pickerOptions: {
 					disabledDate(time) {
@@ -269,7 +269,7 @@
 				// 表格单元格样式
 				cell_style: {
 					color: '#1A202B',
-					'font-size': '16px',
+					'font-size': '14px',
 					'font-family': 'Microsoft YaHei-3970(82674968)'
 				},
 				// 表格头部样式
@@ -279,10 +279,14 @@
 					'font-size': '16px',
 					'font-family': 'Microsoft YaHei-3970(82674968)'
 				},
-				// 预警表格数据
-				yujing_tableData: [],
-				// 业务表格数据
+				// 超时预警表格数据
+				caoshi_yujing_tableData: [],
+				// 离线预警表格数据
+				lixian_yujing_tableData: [],
+				// 耗能表格数据
 				yewu_tableData: [],
+				// 耗能分页数据
+				yewu_tableData_page: [],
 				// 状态表格数据
 				zhuangtai_tableData: [],
 				air_on_total: 0,
@@ -331,74 +335,121 @@
 		},
 		created() {
 			// 获取总金额
-			this.getTotalMoney()
+			this.getTotalMoney();
 			// 本月充值
-			this.getThisMonthRecharge()
+			this.getThisMonthRecharge();
 			// 本月消费
-			this.getThisMonthConsume()
+			this.getThisMonthConsume();
 			// 空调超时预警
-			this.getAirTimeoutWarning()
+			this.getAirTimeoutWarning();
+			// 离线预警
+			this.getOfflineTimeoutWarning();
 			// 用电消费走势图
-			this.getChart()
+			this.getChart();
 			// 空调实时监控
-			this.getAirRealTimeMonitor()
+			this.getAirRealTimeMonitor();
 			getAirRealTimeMonitor = setInterval(() => {
-				this.getAirRealTimeMonitor()
+				this.getAirRealTimeMonitor();
 			}, 1000 * 60);
-			// 实时业务信息，获取充值记录
-			this.getRealTimeBusinessInformation()
-			getRealTimeBusinessInformation = setInterval(() => {
-				this.getRealTimeBusinessInformation()
+			// 办公室能耗排名分页数据
+			this.getOfficeEnergyConsumptionRanking();
+			getOfficeEnergyConsumptionRanking = setInterval(() => {
+				this.getOfficeEnergyConsumptionRanking();
 			}, 1000 * 10);
 		},
 		beforeDestroy() {
 			clearInterval(getAirRealTimeMonitor);
-			clearInterval(getRealTimeBusinessInformation);
+			clearInterval(getOfficeEnergyConsumptionRanking);
 		},
 		methods: {
+			/**
+			 * 超时预警页面改变
+			 */
+			caoshi_yujing_HandleCurrentChange() {
+				this.getAirTimeoutWarning();
+			},
+			/**
+			 * 离线预警页面改变
+			 */
+			lixian_yujing_HandleCurrentChange() {
+				this.getOfflineTimeoutWarning();
+			},
+			/**
+			 * 超时预警选项卡
+			 */
 			time_out_warning_handle() {
 				this.time_out_warning = true;
 				this.off_line_warning = false;
 			},
+			/**
+			 * 离线预警选项卡
+			 */
 			off_line_warning_handle() {
 				this.time_out_warning = false;
 				this.off_line_warning = true;
 			},
 			/**
-			 * 实时业务信息，获取充值记录
+			 * 办公室能耗排名查看更多
 			 */
-			getRealTimeBusinessInformation() {
-				this.realTimeBusinessInformation_loading = true
-
+			click_view_more() {
+				this.dialogTableVisible = true
+				this.officeEnergy.currentPage = 1
+			},
+			/**
+			 * 办公室能耗排名查看更多翻页
+			 */
+			officeEnergyHandleCurrentChange() {
+				this.getOfficeEnergyConsumptionRanking();
+			},
+			/**
+			 * 办公室能耗排名分页数据
+			 */
+			getOfficeEnergyConsumptionRanking() {
+				this.officeEnergyConsumptionRanking_loading = true
 				let data = {
-					page: 1,
-					rows: 7
+					page: this.officeEnergy.currentPage,
+					rows: this.officeEnergy.pageSize
 				}
-				realTimeBusinessInformation(data).then((res) => {
+
+				officeEnergyConsumptionRanking(data).then((res) => {
 					// console.log(res);
 					if (typeof res.code == 'undefined' || res.code == '') {
-						this.$message.error('返回数据格式问题，code未获取到！');
+						// this.$message.error('返回数据格式问题，code未获取到！');
 						return;
 					}
 					if (res.code == 200) {
-						this.yewu_tableData = [];
+						if (this.officeEnergy.currentPage == 1)
+							this.yewu_tableData = [];
+						this.yewu_tableData_page = [];
 						let tmp = []
 						for (var i = 0; i < res.rows.length; i++) {
-							tmp.push({
-								desc: res.rows[i].user_name + ' 充值',
-								dataTime: res.rows[i].time
-							});
+							if (this.officeEnergy.currentPage > 1) {
+								tmp.push({
+									num: res.rows[i].num + (this.officeEnergy.currentPage - 1) * this.officeEnergy.pageSize,
+									dom: res.rows[i].dom,
+									account: res.rows[i].account
+								});
+							} else {
+								tmp.push({
+									num: res.rows[i].num,
+									dom: res.rows[i].dom,
+									account: res.rows[i].account
+								});
+							}
 						}
-						this.yewu_tableData = tmp;
+						if (this.officeEnergy.currentPage == 1)
+							this.yewu_tableData = tmp;
+						this.yewu_tableData_page = tmp;
+						this.officeEnergy.total = res.total;
 					} else {
-						// this.$message.error('空调实时监控返回的数据异常！');
+						// this.$message.error('办公室能耗排名分页数据！');
 					}
 				}).catch((err) => {
 					// console.log(err);
 					this.$message.error(err.message)
 				});
 
-				this.realTimeBusinessInformation_loading = false
+				this.officeEnergyConsumptionRanking_loading = false
 			},
 			/**
 			 * 空调实时监控
@@ -409,7 +460,7 @@
 				airRealTimeMonitor().then((res) => {
 					// console.log(res);
 					if (typeof res.code == 'undefined' || res.code == '') {
-						this.$message.error('返回数据格式问题，code未获取到！');
+						// this.$message.error('返回数据格式问题，code未获取到！');
 						return;
 					}
 					if (res.code == 200) {
@@ -467,7 +518,7 @@
 				}).then((res) => {
 					// console.log(res);
 					if (typeof res.code == 'undefined' || res.code == '') {
-						this.$message.error('返回数据格式问题，code未获取到！');
+						// this.$message.error('返回数据格式问题，code未获取到！');
 						return;
 					}
 
@@ -493,16 +544,6 @@
 								xAxis_data.push(tmp[i].month)
 							}
 						}
-						// 一般方法，无法解决数据缺失
-						// 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++) {
@@ -550,121 +591,170 @@
 				this.getChart()
 			},
 			/**
+			 * 离线预警
+			 */
+			getOfflineTimeoutWarning() {
+				this.lixian_yujing_loading = true
+
+				let data = {
+					page: this.lixian_yujing_PageParam.currentPage,
+					rows: this.lixian_yujing_PageParam.pageSize
+				}
+
+				offlineTimeoutWarning(data).then((res) => {
+					// console.log('offlineTimeoutWarning', res);
+					if (typeof res.code == 'undefined' || res.code == '') {
+						// this.$message.error('返回数据格式问题，code未获取到！');
+						return;
+					}
+					if (res.code == 200) {
+						this.lixian_yujing_tableData = [];
+						for (var i = 0; i < res.rows.length; i++) {
+							this.lixian_yujing_tableData.push({
+								// id
+								// air_name
+								// time
+								// air_ip
+								// is_normal
+								build: res.rows[i].build,
+								floors: res.rows[i].floors,
+								dom: res.rows[i].dom,
+								air_name: res.rows[i].air_name,
+								time: res.rows[i].time
+							})
+						}
+						this.lixian_yujing_PageParam.total = res.total;
+					} else {
+						// this.$message.error('空调超时预警返回的数据异常！');
+					}
+				}).catch((err) => {
+					// console.log(err);
+					this.$message.error(err.message)
+				});
+
+				this.lixian_yujing_loading = false
+			},
+			/**
 			 * 空调超时预警
 			 */
 			getAirTimeoutWarning() {
-				this.airTimeoutWarning_loading = true
+				this.caoshi_yujing_PageParam_loading = true
 
-				airTimeoutWarning().then((res) => {
-					// console.log(res);
+				let data = {
+					page: this.caoshi_yujing_PageParam.currentPage,
+					rows: this.caoshi_yujing_PageParam.pageSize
+				}
+
+				airTimeoutWarning(data).then((res) => {
+					// console.log('airTimeoutWarning', res);
 					if (typeof res.code == 'undefined' || res.code == '') {
-						this.$message.error('返回数据格式问题，code未获取到！');
+						// this.$message.error('返回数据格式问题，code未获取到！');
 						return;
 					}
 					if (res.code == 200) {
-						this.yujing_tableData = [];
+						this.caoshi_yujing_tableData = [];
 						for (var i = 0; i < res.monthT.length; i++) {
-							this.yujing_tableData.push({
+							this.caoshi_yujing_tableData.push({
 								deviceId: res.monthT[i].dom + ' ' + res.monthT[i].air_name + ' ' + res.monthT[i].air_config,
 								warningTime: res.monthT[i].time,
 								operator: res.monthT[i].user_name,
 								durationUse: res.monthT[i].duration_use,
 								contact: res.monthT[i].phone
-							})
+							});
 						}
 					} else {
 						// this.$message.error('空调超时预警返回的数据异常！');
 					}
 				}).catch((err) => {
 					// console.log(err);
-					this.$message.error(err.message)
+					this.$message.error(err.message);
 				});
 
-				this.airTimeoutWarning_loading = false
+				this.caoshi_yujing_PageParam_loading = false;
 			},
 			/**
 			 * 本月消费
 			 */
 			getThisMonthConsume() {
-				this.showThisMonthConsume.loading = true
+				this.showThisMonthConsume.loading = true;
 
 				thisMonthConsume().then((res) => {
 					// console.log(res);
 					if (typeof res.code == 'undefined' || res.code == '') {
-						this.$message.error('返回数据格式问题，code未获取到！')
-						return
+						// this.$message.error('返回数据格式问题，code未获取到！');
+						return;
 					}
 
 					if (res.code == 200) {
-						this.showThisMonthConsume.time = res.time
-						this.showThisMonthConsume.amount = res.zongCo.tong
+						this.showThisMonthConsume.time = res.time;
+						this.showThisMonthConsume.amount = res.zongCo.tong;
 					} else {
-						this.$message.error(res.message)
+						this.$message.error(res.message);
 					}
 				}).catch((err) => {
 					// console.log(err);
-					this.$message.error(err.message)
+					this.$message.error(err.message);
 				});
 
-				this.showThisMonthConsume.loading = false
+				this.showThisMonthConsume.loading = false;
 			},
 			/**
 			 * 本月充值
 			 */
 			getThisMonthRecharge() {
-				this.showThisMonthRecharge.loading = true
+				this.showThisMonthRecharge.loading = true;
 
 				thisMonthRecharge().then((res) => {
-					// console.log(res);
+					// console.log('thisMonthRecharge' + res);
 					if (typeof res.code == 'undefined' || res.code == '') {
-						this.$message.error('返回数据格式问题，code未获取到！')
-						return
+						// this.$message.error('返回数据格式问题，code未获取到！');
+						return;
 					}
 
 					if (res.code == 200) {
-						this.showThisMonthRecharge.time = res.time
-						this.showThisMonthRecharge.online_amount = res.zongRe.tong // 线上充值
-						this.showThisMonthRecharge.offline_amount = res.zongRo.tong // 线下充值
-						this.showThisMonthRecharge.amount = res.zongRe.tong + res.zongRo.tong // 总充值
+						this.showThisMonthRecharge.time = res.time;
+						this.showThisMonthRecharge.online_amount = res.zongRe.tong; // 线上充值
+						this.showThisMonthRecharge.offline_amount = res.zongRo.tong; // 线下充值
+						this.showThisMonthRecharge.amount = res.zongRe.tong + res.zongRo.tong; // 总充值
 					} else if (res.code == 205) {
 						this.showThisMonthRecharge.time = getFormatDateTime('datetime');
-						this.$message.error('本月充值：' + res.message)
+						this.$message.error('本月充值：' + res.message);
 					} else {
 						this.showThisMonthRecharge.time = getFormatDateTime('datetime');
-						this.$message.error('本月充值：' + res.message)
+						this.$message.error('本月充值：' + res.message);
 					}
 				}).catch((err) => {
 					// console.log(err);
-					this.$message.error(err.message)
+					this.$message.error(err.message);
 				});
 
-				this.showThisMonthRecharge.loading = false
+				this.showThisMonthRecharge.loading = false;
 			},
 			/**
 			 * 获取总金额
 			 */
 			getTotalMoney() {
-				this.showTotalMoney.loading = true
+				this.showTotalMoney.loading = true;
 
 				totalMoney().then((res) => {
 					// console.log(res);
 					if (typeof res.code == 'undefined' || res.code == '') {
-						this.$message.error('返回数据格式问题，code未获取到！')
-						return
+						// this.$message.error('返回数据格式问题，code未获取到！');
+						return;
 					}
 
 					if (res.code == 200) {
-						this.showTotalMoney.time = res.time
-						this.showTotalMoney.amount = res.zongYu.tong
+						this.showTotalMoney.time = res.time;
+						this.showTotalMoney.amount = res.zongYu.tong;
 					} else {
-						this.$message.error(res.message)
+						this.$message.error(res.message);
 					}
 				}).catch((err) => {
 					// console.log(err);
-					this.$message.error(err.message)
+					this.$message.error(err.message);
 				});
 
-				this.showTotalMoney.loading = false
+				this.showTotalMoney.loading = false;
 			},
 			/**
 			 * 初始化折线图
@@ -684,9 +774,9 @@
 			}) {
 				if (columnIndex === 1 || columnIndex === 2) {
 					// 指定列号
-					return "font-size:18px; color:#808080"
+					return "font-size:14px; color:#808080;"
 				} else {
-					return "font-size:18px; color:#292B34"
+					return "font-size:14px; color:#292B34"
 				}
 			}
 		}
@@ -753,43 +843,30 @@
 							}
 						}
 
-						.rmb1 {
+						.rmb1,
+						.rmb2,
+						.rmb3 {
 							display: flex;
 							justify-content: center;
-							align-items: center;
 							width: 60px;
 							height: 60px;
-							border-radius: 30px;
+							border-radius: 50%;
+							padding-top: 5px;
 							font-size: 50px;
 							color: #FDFDFF;
-							background: linear-gradient(-45deg, #3965FF, #3055FE);
 							box-shadow: 0 0 8px #3660FF;
 						}
 
+						.rmb1 {
+							background: linear-gradient(-45deg, #3965FF, #3055FE);
+						}
+
 						.rmb2 {
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							width: 60px;
-							height: 60px;
-							border-radius: 30px;
-							font-size: 50px;
-							color: #FDFDFF;
 							background: linear-gradient(-45deg, #FFB977, #FF5C5C);
-							box-shadow: 0 0 8px #3660FF;
 						}
 
 						.rmb3 {
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							width: 60px;
-							height: 60px;
-							border-radius: 30px;
-							font-size: 50px;
-							color: #FDFDFF;
 							background: linear-gradient(-45deg, #9187F0, #7760F1);
-							box-shadow: 0 0 8px #3660FF;
 						}
 					}
 
@@ -837,7 +914,7 @@
 									color: #FFFFFF;
 									background-color: #3965FF;
 								}
-								
+
 								.dialog-page {
 									margin-top: 10px;
 								}
@@ -870,6 +947,36 @@
 							height: 370px;
 						}
 					}
+
+					.el-table__row .cell {
+						white-space: nowrap !important;
+					}
+
+					.el-table__row:nth-child(1) td:nth-child(3) .cell span,
+					.el-table__row:nth-child(2) td:nth-child(3) .cell span,
+					.el-table__row:nth-child(3) td:nth-child(3) .cell span {
+						display: block;
+						width: 20px;
+						height: 20px;
+						line-height: 20px;
+						text-align: center;
+						margin-left: 20px;
+						border-radius: 4px;
+						color: #FFFFFF !important;
+
+					}
+
+					.el-table__row:nth-child(1) td:nth-child(3) .cell span {
+						background-color: #f73131 !important;
+					}
+
+					.el-table__row:nth-child(2) td:nth-child(3) .cell span {
+						background-color: #f60 !important;
+					}
+
+					.el-table__row:nth-child(3) td:nth-child(3) .cell span {
+						background-color: #ffc20d !important;
+					}
 				}
 
 				.cell-row1 {

src/views/systemSet/index.vue

@@ -11,19 +11,24 @@
 					<div class="cell-body">
 						<el-form ref="formData" :rules="formRules" :model="formData">
 							<el-form-item prop="month_range" class="date-selet-range">
-								<el-input placeholder="请选择月份" suffix-icon="el-icon-date" @click.native="showDatePicker" v-model="formData.month_range_value">
-								</el-input>
-								<el-date-picker v-model="formData.month_range" format="M月" value-format="yyyy-MM" type="monthrange" range-separator="-"
-									start-placeholder="开始月份" end-placeholder="结束月份" @change="monthChange" ref="datePicker" class="date-selet-range-me">
-								</el-date-picker>
+								<span>在</span>
 								<el-input placeholder="请选择温度" v-model="formData.temperature_range" @click.native="formData.temperatureDialogVisible = true">
 								</el-input>
 								<el-dialog title="选择温度范围" top="30vh" :visible.sync="formData.temperatureDialogVisible" width="30%">
-									<el-slider v-model="formData.temperature_range_value" :marks="formData.marks" @change="temperature_change" range :min="-10"
-										:max="50"></el-slider>
+									<el-slider v-model="formData.temperature_range_value" :marks="formData.marks" @change="temperature_change" range
+										:min="formData.tempratureMin" :max="formData.tempratureMax"></el-slider>
 								</el-dialog>
-								<span>才可以开启空调</span>
-								<el-switch v-model="formData.open_air_condition" active-color="#13ce66" inactive-color="#cccccc"></el-switch>
+								<span>区间将不开启空调，是否启用？</span>
+								<span v-if="formData.open_air_condition">
+									<el-tooltip class="item" effect="dark" content="已启用" placement="top">
+										<el-switch v-model="formData.open_air_condition" active-color="#13ce66" inactive-color="#cccccc"></el-switch>
+									</el-tooltip>
+								</span>
+								<span v-else>
+									<el-tooltip class="item" effect="dark" content="未启用" placement="top">
+										<el-switch v-model="formData.open_air_condition" active-color="#13ce66" inactive-color="#cccccc"></el-switch>
+									</el-tooltip>
+								</span>
 							</el-form-item>
 							<el-form-item prop="start_tiao">
 								<span>账户余额少于</span>
@@ -164,18 +169,16 @@
 			return {
 				// 提交表单数据
 				formData: {
-					month_range_value: '',
-					month_range: '',
-					temperature_range_value: [35, 40],
+					temperature_range_value: [18, 28],
+					tempratureMin: 0,
+					tempratureMax: 35,
 					marks: {
-						'-5': '-5℃',
 						0: '0℃',
 						8: '8℃',
-						30: '30℃',
-						35: '35℃',
-						40: '40℃'
+						18: '18℃',
+						28: '28℃'
 					},
-					temperature_range: '',
+					temperature_range: '18℃ - 28℃',
 					temperatureDialogVisible: false,
 					open_air_condition: false,
 					start_tiao: '',
@@ -212,25 +215,13 @@
 			this.get_data()
 		},
 		methods: {
-			// 温度控件改变
+			/**
+			 * 温度控件改变
+			 */
 			temperature_change() {
 				var t = this.formData.temperature_range_value;
 				this.formData.temperature_range = t[0] + '℃ - ' + t[1] + '℃';
 			},
-			// 显示月份选择面板
-			showDatePicker() {
-				this.$refs.datePicker.showPicker();
-			},
-			/**
-			 * 选择月份范围
-			 */
-			monthChange() {
-				// 获取月份区间
-				var mr = this.formData.month_range
-				var smr = parseInt(mr[0].substr(5, 2));
-				var emr = parseInt(mr[1].substr(5, 2));
-				this.formData.month_range_value = smr + '月 - ' + emr + '月';
-			},
 			/**
 			 * 获取配置数据
 			 */
@@ -335,14 +326,6 @@
 							align-items: center;
 							position: relative;
 							white-space: nowrap;
-
-							.date-selet-range-me {
-								opacity: 0;
-								position: absolute;
-								left: 0;
-								top: 0;
-								width: 150px !important;
-							}
 						}
 
 						::v-deep .el-form-item {