hotWaterManagerWeb/src/components/yongshuifenxi/yongshuifenxi.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="shuibiaoId left-margin">
						<el-input placeholder="请输入宿舍号" v-model="room_value" @input="roomInputChange($event)"
							maxlength="6" @blur="updateData" @keyup.enter.native="enterBlur($event)" clearable
							:disabled="room_select_disabled">
						</el-input>
					</el-form-item>
				</el-form>
				<div class="water-total">用水总量：{{yongshuizongliang}}吨</div>
				<div class="show-detail" @click="show_detail">查看详情</div>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="24" class="third-row">
				<div style="margin-top: 20px">
					<div class="pages">
						<div class="tip">用水统计图</div>
						<div class="right-tip">
							<div class="dmy-btn" :class="{my_active:show_active == '日'}" @click="change_riqi('日')">日
							</div>
							<div class="dmy-btn" :class="{my_active:show_active == '月'}" @click="change_riqi('月')">月
							</div>
							<div class="dmy-btn" :class="{my_active:show_active == '年'}" @click="change_riqi('年')">年
							</div>
						</div>
					</div>
					<!--为echarts准备一个具备大小的容器dom-->
					<div id="main" style="width: 100%; height: 500px"></div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 详情对话框 -->
				<el-dialog title="用水详情" :visible.sync="detail_dialogFormVisible" width="640px" top="0vh"
					class="my-dialog" :close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item label="姓名：" class="shuibiaoId">
							<el-input v-model="detail_userName" placeholder="请输入姓名" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSearch">查找</el-button>
						</el-form-item>
					</el-form>
					<el-table ref="multipleTable" :data="detail_tableData" tooltip-effect="dark" style="width: 100%"
						highlight-current-row>
						<el-table-column align="center" label="学号">
							<template slot-scope="scope">{{ scope.row.stu_number }}</template>
						</el-table-column>
						<el-table-column align="center" prop="user_name" label="姓名" show-overflow-tooltip>
						</el-table-column>
						<el-table-column align="center" prop="use_amount" label="用水量" :formatter="formatDun"
							show-overflow-tooltip>
						</el-table-column>
					</el-table>
					<div slot="footer" class="dialog-footer">
						<div class="dialog-pages">
							<el-pagination layout="prev, pager, next"
								:current-page.sync="control_table.detail_current_page" :hide-on-single-page="true"
								:page-size="control_table.detail_page_rows" @current-change="handleCurrentChange"
								:total="control_table.detail_total_rows"></el-pagination>
						</div>
					</div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show_active: '', // 切换年、月、日
				charts: "", // 折线图
				room_select_disabled: true, // 控制宿舍号是否可以编辑
				drom_value: 0, // 楼栋号编码
				drom: '', // 楼栋号
				room_value: '', // 待搜索的宿舍号
				yongshuizongliang: 0.0.toFixed(2), // 用水总量
				// 楼栋号下拉列表
				drom_options: { // 下拉列表的数据绑定
					builds: [{
						value: 0,
						label: '全部'
					}],
					value: 0,
					label: ''
				},
				// 详情对话框相关参数
				detail_dialogFormVisible: false, // 控制详情对话框显示、隐藏
				detail_userName: '', // 姓名用于查询
				detail_tableData: [],
				control_table: {
					detail_current_page: 1,
					detail_page_rows: 8,
					detail_total_rows: 0
				}
			}
		},
		created() {
			// 填充楼栋号
			this.getBuildsFillSelect()

			// 获取用水总量
			this.get_total_yongshuizongliang()

			// 共用部分，更新图
			this.updateData()
		},
		methods: {
			formatDun(row, column, cellValue, index) {
				// row: 行数据
				// column: 列属性
				// cellValue: 单元格数据值
				// index: 行索引，注意：2.3.9版本以后才有。
				return cellValue.toFixed(2)
			},
			/**
			 * 改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				this.control_table.detail_current_page = val

				this.show_detail()
			},
			/**
			 * 显示面积图
			 */
			show_mianjitu(params_dt, params_data) {
				var date = [];
				var data = [];

				for (var i = 0; i < params_dt.length; i++) {
					date.push(params_dt[i].replace(/-/g, '/'));
					data.push(parseFloat(params_data[i]).toFixed(2));
				}

				// console.log(data);

				var option = {
					tooltip: {
						trigger: 'axis',
						position: function(pt) {
							return [pt[0], '10%'];
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: date
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%']
					},
					dataZoom: [{
						type: 'inside',
						start: 0,
						end: 100
					}, {
						start: 0,
						end: 100
					}],
					series: [{
						name: '用水量',
						type: 'line',
						smooth: true,
						symbol: 'none',
						areaStyle: {},
						data: data
					}]
				};

				this.$nextTick(function() {
					this.charts = this.$echarts.init(document.getElementById('main'));

					this.charts.setOption(option);
				});
			},
			/**
			 * 获取用水总量
			 */
			get_total_yongshuizongliang() {
				let params = {}
				if (this.drom) {
					params.build = this.drom
				}
				if (this.room_value) {
					dom: this.room_value
				}
				var _this = this
				this.$axios.get('/jxch-smartmp-api/HotWaters/waterwaterTotal.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.size) != 'undefined' && res.data.size != '' && JSON.stringify(res
								.data) != '{}') {
							this.yongshuizongliang = parseFloat(res.data.size).toFixed(2)
						} else {
							_this.$message.success('【获取用水总量】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取用水总量】请求异常: ' + err);
					})
			},
			/**
			 * 更新宿舍号输入框
			 * @param {Object} e
			 */
			roomInputChange(e) {
				// console.log(e);
				this.$forceUpdate()
			},
			/**
			 * 获取楼栋号，填充下拉列表
			 */
			getBuildsFillSelect() {
				// 获取楼栋号，填充下拉列表
				var _this = this
				this.$axios.get('/jxch-smartmp-api/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);
					})
			},
			/**
			 * 切换年、月、日，查询相关数据
			 * @param {Object} riqi
			 */
			change_riqi(riqi) {
				this.show_active = riqi
				// 获取查询年、月、日的数据的参数
				var _this = this
				var params = {}
				if (typeof(this.drom) != 'undefined' && this.drom != '' && this.drom) {
					params.build = this.drom
				}
				if (typeof(this.room_value) != 'undefined' && this.room_value != '' && this.room_value) {
					params.dom = this.room_value
				}
				// 日用水量
				if (riqi == '日') {
					// 查询日的数据
					this.$axios.get('/jxch-smartmp-api/HotWaters/waterdayTong.action', {
							params: params
						})
						.then(res => {
							// console.log(res.data);
							if (typeof(res.data.day) != 'undefined' && res.data.day != '' && JSON.stringify(res
									.data) != '{}') {
								// 显示面积图
								this.show_mianjitu(res.data.day, res.data.use_size)
							} else {
								_this.$message.success('【日用水】暂无数据！');
							}
						})
						.catch(err => {
							// console.log(err);
							_this.$message.error('【日用水】请求异常: ' + err);
						})
				} else if (riqi == '月') { // 月用水量
					// 查询月的数据
					this.$axios.get('/jxch-smartmp-api/HotWaters/watermonthTong.action', {
							params: params
						})
						.then(res => {
							// console.log(res.data);
							if (typeof(res.data.month) != 'undefined' && res.data.month != '' && JSON.stringify(res
									.data) != '{}') {
								// 显示面积图
								this.show_mianjitu(res.data.month, res.data.use_size)
							} else {
								_this.$message.success('【月用水】暂无数据！');
							}
						})
						.catch(err => {
							// console.log(err);
							_this.$message.error('【月用水】请求异常: ' + err);
						})
				} else if (riqi == '年') { // 年用水量
					// 查询年的数据
					this.$axios.get('/jxch-smartmp-api/HotWaters/wateryearTong.action', {
							params: params
						})
						.then(res => {
							// console.log(res.data);
							if (typeof(res.data.year) != 'undefined' && res.data.year != '' && JSON.stringify(res
									.data) != '{}') {
								// 显示面积图
								this.show_mianjitu(res.data.year, res.data.use_size)
							} else {
								_this.$message.success('【年用水】暂无数据！');
							}
						})
						.catch(err => {
							// console.log(err);
							_this.$message.error('【年用水】请求异常: ' + err);
						})
				}
			},
			/**
			 * 选择楼栋号
			 */
			selectGetBuild(vId) {
				// console.log(vId);
				this.drom_value = vId
				if (this.drom_value != 0) {
					this.room_select_disabled = false
				} else {
					this.room_select_disabled = true
					this.room_value = ''
				}
				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.updateData()

				// 获取用水总量
				this.get_total_yongshuizongliang()
			},
			/**
			 * 失去焦点更新数据
			 * @param {Object} event
			 */
			updateData(event) {
				if (this.show_active == '') {
					this.show_active = '日'
				}
				// 查询对应的数据
				this.change_riqi(this.show_active)
			},
			/**
			 * 回车失去焦点
			 * @param {Object} event
			 */
			enterBlur(event) {
				event.target.blur()
			},
			/**
			 * 打开详情对话框
			 * @param {Object} e
			 */
			show_detail() {
				var _this = this

				_this.detail_tableData = []

				this.detail_dialogFormVisible = true
				let params = {
					page: this.control_table.detail_current_page,
					rows: this.control_table.detail_page_rows
				}
				if (this.room_value != '' && typeof(this.room_value) != 'undefined') {
					params.dom = this.room_value
				}
				if (this.drom != '' && typeof(this.drom) != 'undefined') {
					params.build = this.drom
				}
				if (this.detail_userName != '' && typeof(this.detail_userName) != 'undefined') {
					params.username = this.detail_userName
				}
				// 显示详细列表
				this.$axios.get('/jxch-smartmp-api/HotWaters/waterdetailWater.action', {
						params: params
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res
								.data) != '{}') {
							_this.detail_tableData = res.data.rows
							_this.control_table.detail_total_rows = res.data.total
						} else {
							_this.$message.success('【用水详情】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【用水详情】请求异常: ' + err);
					})
			},
			/**
			 * 详情页面查找
			 */
			onSearch() {
				this.control_table.detail_current_page = 1
				this.show_detail()
			}
		}
	}
</script>

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