hotWaterManagerWeb/src/components/yongshuiyichang/yongshuiyichang.vue

<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">用水异常</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="楼栋号：" class="shuibiaoId">
						<el-select v-model="drom_options.value" placeholder="请选择" class="my-select"
							@change="selectGetBuild(drom_options.value)">
							<el-option v-for="item in drom_options.builds" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="起止时间：" class="shijian">
						<el-date-picker v-model="select_datetime" type="daterange" align="center" unlink-panels
							range-separator="至" :start-placeholder="startTime" :end-placeholder="endTime"
							@change="dateChange" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
							class="shijian_plus">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="时间段消费总金额：">
						<el-input-number v-model="num" @change="change_num" :precision="2" :step="0.1" :max="1000"
							class="rijunxiaofei_input"></el-input-number>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					highlight-current-row>
					<el-table-column align="center" label="楼栋号" width="200">
						<template slot-scope="scope">{{ scope.row.build }}</template>
					</el-table-column>
					<el-table-column prop="dom" label="宿舍号" align="center" width="200"></el-table-column>
					<el-table-column prop="use_amount" label="消费金额（元）" align="center"></el-table-column>
					<el-table-column prop="begin_time" :formatter="formatDateTime" label="日期" align="center">
					</el-table-column>
				</el-table>
				<div class="pages">
					<el-pagination layout="prev, pager, next" :current-page.sync="currentPage"
						:hide-on-single-page="true" :page-size="pageRows" :total="rows_total"
						@current-change="handleCurrentChange"></el-pagination>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				drom_value: 0, // 楼栋号编码
				drom: '', // 楼栋号
				// 楼栋号下拉列表
				drom_options: { // 下拉列表的数据绑定
					builds: [{
						value: 0,
						label: '全部'
					}],
					value: 0,
					label: ''
				},
				currentPage: 1, // 余额列表当前页
				pageRows: 8, // 每页记录数
				tableData: [], // 异常列表
				rows_total: 0, // 总行数
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				select_datetime: [], // 选择的时间范围
				startTime: '',
				endTime: '',
				num: 0.00
			}
		},
		created() {
			// 填充楼栋号
			this.getBuildsFillSelect()
			// 初始化日期为昨天 至 今天
			this.initDate()
		},
		methods: {
			formatDateTime(row, column) {
				// console.log(row.begin_time);
				var dt = row.begin_time;
				return dt.split(' ')[0];
			},
			/**
			 * 初始化日期时间
			 */
			initDate() {
				//当前设定的日期时间
				let d = new Date;
				var year1 = d.getFullYear(); // 获取当前年份
				var mon1 = d.getMonth() + 1; // 获取当前月份
				var day1 = d.getDate(); // 获取当前日

				//前一天设定的日期时间
				d.setTime(d.getTime() - 24 * 60 * 60 * 1000);
				var year2 = d.getFullYear(); // 获取当前年份
				var mon2 = d.getMonth() + 1; // 获取当前月份
				var day2 = d.getDate(); // 获取当前日

				this.startTime = this.getDate(year2, mon2, day2)
				this.endTime = this.getDate(year1, mon1, day1)
				
				this.select_datetime.push(this.startTime)
				this.select_datetime.push(this.endTime)
				
				this.handleCurrentChange(1)
			},
			/**
			 * 获取指定格式 年、月、日
			 * @param {Object} y
			 * @param {Object} m
			 * @param {Object} d
			 */
			getDate(y, m, d) {
				m = m > 9 ? m : '0' + m;
				d = d > 9 ? d : '0' + d;
				
				return y + "-" + m + "-" + d;
			},
			/**
			 * 选择起止日期
			 * @param {Object} val
			 */
			dateChange(val) {
				this.startTime = val[0]
				this.endTime = val[1]

				if (this.startTime == this.endTime) {
					this.$message.error('起止日期不能为同一天！')
				} else {
					this.handleCurrentChange(1)
				}
			},
			/**
			 * 改变日消费金额
			 * @param {Object} currentValue
			 * @param {Object} oldValue
			 */
			change_num(currentValue, oldValue) {
				// console.log(currentValue, oldValue);
				this.num = currentValue

				this.handleCurrentChange(1)
			},
			/**
			 * 列表改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				// console.log(val);
				this.currentPage = val
				var params = {
					page: this.currentPage,
					rows: this.pageRows
				}
				if (this.drom != '' & typeof(this.drom) != 'undefined') {
					params.build = this.drom
				}

				if (this.startTime != '' & typeof(this.startTime) != 'undefined') {
					params.begin_time = this.startTime
				}

				if (this.endTime != '' & typeof(this.endTime) != 'undefined') {
					params.end_time = this.endTime
				}

				if (parseFloat(this.num) > 0.00) {
					params.use_amount = this.num
				}

				// 用水异常列表
				this.get_use_water_exception_list(params)
			},
			/**
			 * 用水异常列表
			 */
			get_use_water_exception_list(params) {
				var _this = this
				// _this.tableData = []
				// _this.rows_total = 0
				this.$axios.get('/shuidian/HotWaters/waterqueryErrorWater.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
							'{}') {
							_this.tableData = res.data.rows
							_this.rows_total = res.data.total
						} else {
							_this.$message.success('【用水异常】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【用水异常】请求异常: ' + err);
					})
			},
			/**
			 * 获取楼栋号，填充下拉列表
			 */
			getBuildsFillSelect() {
				// 获取楼栋号，填充下拉列表
				var _this = this
				this.$axios.get('/shuidian/HotWaters/watergetBuilds.action')
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.builds) != 'undefined' && res.data.builds != '' && JSON.stringify(res
								.data) != '{}') {
							this.drom_options.builds = [{
								value: 0,
								label: '全部'
							}]
							for (var i = 0; i < res.data.builds.length; i++) {
								let tmp = {
									value: i + 1,
									label: res.data.builds[i]
								}
								this.drom_options.builds.push(tmp)
							}
						} else {
							_this.$message.success('【楼栋号】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【楼栋号】请求异常: ' + err);
					})
			},
			/**
			 * 选择楼栋号
			 */
			selectGetBuild(vId) {
				// console.log(vId);
				this.drom_value = vId
				let obj = {};
				obj = this.drom_options.builds.find((item) => {
					return item.value === vId; //筛选出匹配数据
				});
				// console.log(obj);
				this.drom_options.value = obj.value
				this.drom_options.label = obj.label
				if (this.drom_options.label != '全部') {
					// 获取楼栋号
					this.drom = this.drom_options.label
				} else {
					this.drom = ''
				}

				// 共用部分
				this.handleCurrentChange(1)
			}
		}
	}
</script>

<style scoped>
	@import url("yongshuiyichang.css");
</style>