系统设置增加参数

src/views/index/index.vue

@@ -41,7 +41,7 @@
 		<el-row>
 			<el-col :span="8">
 				<div class="cell">
-					<el-card class="box-card" style="position: relative;">
+					<el-card class="box-card" style="position: relative; height: 465px;">
 						<div slot="header" class="clearfix">
 							<img src="../../icons/images/index/zoushi.png" alt="">
 							<span>用电消费走势图</span>
@@ -58,20 +58,26 @@
 					<el-card class="box-card">
 						<div slot="header" class="clearfix">
 							<img src="../../icons/images/index/yujing.png" alt="">
-							<span>超时预警</span>
+							<span class="title-btn" :style="time_out_warning ? 'background-color: #3965FF;color:#ffffff' : ''"
+								@click="time_out_warning_handle">超时预警</span>
+							<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"
-							:header-cell-style="header_cell_style" 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>
-							<el-table-column prop="durationUse" label="使用时长" align="center">
-							</el-table-column>
-							<el-table-column prop="contact" label="联系方式" align="center">
-							</el-table-column>
-							<el-table-column prop="operator" label="操作人" align="center">
-							</el-table-column>
+							: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>
+							<el-table-column prop="durationUse" label="使用时长" align="center"> </el-table-column>
+							<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"
+							: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>
 					</el-card>
 				</div>
@@ -82,15 +88,29 @@
 				<div class="cell">
 					<el-card class="box-card">
 						<div slot="header" class="clearfix">
-							<img src="../../icons/images/index/yewu.png" alt="">
-							<span>实时业务信息</span>
+							<div class="card-header-between">
+								<div class="card-title-left">
+									<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>
+							</div>
 						</div>
-						<el-table :data="yewu_tableData" height="350" stripe :cell-style="handle_cell_style" :header-cell-style="header_cell_style"
-							v-loading="realTimeBusinessInformation_loading" style="width: 100%" :show-header="false">
-							<el-table-column prop="desc" label="说明" align="left">
-							</el-table-column>
-							<el-table-column prop="dataTime" label="时间" align="right">
-							</el-table-column>
+						<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>
 					</el-card>
 				</div>
@@ -109,7 +129,7 @@
 								<div class="card-desc">A/B=已开机/总设备</div>
 							</div>
 						</div>
-						<el-table :data="zhuangtai_tableData" height="350" stripe :cell-style="cell_style" :header-cell-style="header_cell_style"
+						<el-table :data="zhuangtai_tableData" height="490" 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>
@@ -159,6 +179,58 @@
 	export default {
 		data() {
 			return {
+				// 弹出框表格
+				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,7 +324,9 @@
 						type: 'value'
 					},
 					series: []
-				}
+				},
+				time_out_warning: true,
+				off_line_warning: false
 			}
 		},
 		created() {
@@ -282,6 +356,14 @@
 			clearInterval(getRealTimeBusinessInformation);
 		},
 		methods: {
+			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;
+			},
 			/**
 			 * 实时业务信息，获取充值记录
 			 */
@@ -600,9 +682,9 @@
 				rowIndex,
 				columnIndex
 			}) {
-				if (columnIndex === 1) {
+				if (columnIndex === 1 || columnIndex === 2) {
 					// 指定列号
-					return "font-size:14px; color:#808080"
+					return "font-size:18px; color:#808080"
 				} else {
 					return "font-size:18px; color:#292B34"
 				}
@@ -744,6 +826,33 @@
 									font-size: 16px;
 									margin-left: 20px;
 								}
+
+								.pointer {
+									cursor: pointer;
+									color: #3965FF;
+									padding: 3px 5px;
+								}
+
+								.pointer:hover {
+									color: #FFFFFF;
+									background-color: #3965FF;
+								}
+								
+								.dialog-page {
+									margin-top: 10px;
+								}
+							}
+
+							.title-btn {
+								display: inline-block;
+								padding: 8px;
+								color: #3965FF;
+								cursor: pointer;
+							}
+
+							.title-btn:hover {
+								color: #FFFFFF;
+								background-color: #3965FF;
 							}
 						}
 
@@ -753,11 +862,12 @@
 							top: 68px;
 							width: 100px;
 							z-index: 1;
+							cursor: pointer;
 						}
 
 						.line-echart {
 							width: 450px;
-							height: 350px;
+							height: 370px;
 						}
 					}
 				}

src/views/systemSet/index.vue

@@ -10,15 +10,21 @@
 					</div>
 					<div class="cell-body">
 						<el-form ref="formData" :rules="formRules" :model="formData">
-							<!-- <el-form-item prop="one">
-								<span>空调开启每分钟为</span>
-								<el-input v-model="formData.one" maxlength="4" placeholder="请输入金额"></el-input>
-								<span>元</span>
+							<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>
+								<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-dialog>
+								<span>才可以开启空调</span>
+								<el-switch v-model="formData.open_air_condition" active-color="#13ce66" inactive-color="#cccccc"></el-switch>
 							</el-form-item>
-							<el-form-item prop="isauto">
-								<span>自动扣款</span>
-								<el-switch v-model="formData.isauto" active-color="#2B4CFE"></el-switch>
-							</el-form-item> -->
 							<el-form-item prop="start_tiao">
 								<span>账户余额少于</span>
 								<el-input v-model="formData.start_tiao" maxlength="4" placeholder="请输入金额"></el-input>
@@ -32,10 +38,9 @@
 								</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">
+										:picker-options="{selectableRange: '00:00:00 - 23:59:59'}" placeholder="请输入时间" :clearable="false">
 									</el-time-picker>
-									<span>为截止时间，系统自动发送通知给操作员</span>
+									<span>为截止时间</span>
 								</el-form-item>
 							</div>
 							<el-form-item prop="overtime">
@@ -43,15 +48,13 @@
 								<el-input v-model="formData.overtime" maxlength="2" placeholder="请输入小时数"></el-input>
 								<span>小时预警</span>
 							</el-form-item>
-							<!-- <el-form-item prop="end_jian">
-								<span>开启空调后</span>
-								<el-input v-model="formData.end_jian" maxlength="2" placeholder="请输入秒数"></el-input>
-								<span>秒可以关闭</span>
-							</el-form-item> -->
+							<el-form-item prop="send_start" style="display: inline-block;">
+								<span>离线预警信息推送</span>
+								<el-input v-model="formData.operator" placeholder="请输入姓名"></el-input>
+							</el-form-item>
 							<el-form-item prop="phone">
 								<span>使用问题联系方式</span>
-								<el-input v-model="formData.phone" placeholder="请输入手机号" maxlength="11"
-									class="phone-class"></el-input>
+								<el-input v-model="formData.phone" placeholder="请输入手机号" maxlength="11" class="phone-class"></el-input>
 							</el-form-item>
 							<el-form-item>
 								<el-button type="primary" round @click="handle_submit">确认提交</el-button>
@@ -159,24 +162,34 @@
 				}, 100);
 			}
 			return {
+				// 提交表单数据
 				formData: {
-					one: '', // 每分钟
-					isauto: true, // 自动扣款
+					month_range_value: '',
+					month_range: '',
+					temperature_range_value: [35, 40],
+					marks: {
+						'-5': '-5℃',
+						0: '0℃',
+						8: '8℃',
+						30: '30℃',
+						35: '35℃',
+						40: '40℃'
+					},
+					temperature_range: '',
+					temperatureDialogVisible: false,
+					open_air_condition: false,
 					start_tiao: '',
 					send_jian: '',
 					send_start: '',
 					phone: '',
 					state: 1,
-					end_jian: 12,
-					overtime: 6
+					overtime: 6,
+					operator: '陈斌'
 				},
 				currentPage: 1,
 				rows: 6,
 				// 校验规则
 				formRules: {
-					one: [{
-						validator: checkMoney
-					}],
 					start_tiao: [{
 						validator: checkMoney
 					}],
@@ -186,9 +199,6 @@
 					send_start: [{
 						validator: checkStart
 					}],
-					end_jian: [{
-						validator: checkSecond
-					}],
 					phone: [{
 						validator: checkPhone
 					}],
@@ -202,6 +212,25 @@
 			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 + '月';
+			},
 			/**
 			 * 获取配置数据
 			 */
@@ -214,14 +243,11 @@
 				getSet(params).then((res) => {
 					// console.log(res.rows[0]);
 					let r = res.rows[0]
-					this.formData.one = r.one.toFixed(2)
-					this.formData.isauto = r.isauto == 1 ? true : false
 					this.formData.start_tiao = r.start_tiao
 					this.formData.send_jian = r.send_jian + ''
 					this.formData.send_start = r.send_start
 					this.formData.phone = r.phone
 					this.formData.state = r.state
-					this.formData.end_jian = r.end_jian
 					this.formData.overtime = r.overtime
 				}).catch((err) => {
 					// console.log(err);
@@ -237,14 +263,11 @@
 						//form表单校验通过,可以进行下一步操作
 						const params = {
 							id: 1,
-							one: this.formData.one,
-							isauto: this.formData.isauto == true ? 1 : 0,
 							start_tiao: this.formData.start_tiao,
 							send_jian: this.formData.send_jian,
 							send_start: this.formData.send_start,
 							phone: this.formData.phone,
 							state: this.formData.state,
-							end_jian: this.formData.end_jian,
 							overtime: this.formData.overtime
 						}
 						// console.log(params);
@@ -305,6 +328,22 @@
 
 					.cell-body {
 						height: 630px;
+						padding-left: 30px;
+
+						.date-selet-range {
+							display: flex;
+							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 {
 							display: flex;
@@ -319,7 +358,7 @@
 
 							.el-input,
 							.el-input__inner {
-								width: 90px;
+								width: 200px;
 								text-align: center;
 								font-size: 18px;
 								font-family: Microsoft YaHei-3970(82674968);
@@ -374,3 +413,9 @@
 		}
 	}
 </style>
+
+<style>
+	.el-date-range-picker__header {
+		display: none;
+	}
+</style>