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_value" placeholder="请选择" class="my-select" @change="drom_change">
							<el-option v-for="item in drom_options" :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" clearable :disabled="room_select_disabled">
						</el-input>
					</el-form-item>
				</el-form>
				<div class="water-total">用水总量：15898吨</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>
					<!-- <div class="hygrometer" ref="hygrometer"></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="editdialogFormVisible" width="640px" top="0vh" class="my-dialog">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item label="姓名：" class="shuibiaoId">
							<el-input v-model="formInline.user" placeholder="请输入姓名"></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="tableData" tooltip-effect="dark" style="width: 100%"
						highlight-current-row>
						<el-table-column align="center" label="学号">
							<template slot-scope="scope">{{ scope.row.id }}</template>
						</el-table-column>
						<el-table-column align="center" prop="stuName" label="姓名" show-overflow-tooltip>
						</el-table-column>
						<el-table-column align="center" prop="yongShuiLiang" label="用水量" show-overflow-tooltip>
						</el-table-column>
					</el-table>
					<div slot="footer" class="dialog-footer">
						<div class="dialog-pages">
							<el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
						</div>
					</div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show_active: '日',
				charts: "",
				opinionData: ["3", "2", "4", "4", "5"],
				room_select_disabled: true,
				day_balance: 88888,
				month_balance: 888888,
				year_balance: 8888888,
				drom_value: '0',
				room_value: '1201',
				date_value: '0',
				drom_options: [{
					value: '0',
					label: '全部'
				}, {
					value: '1',
					label: '1栋'
				}, {
					value: '2',
					label: '2栋'
				}, {
					value: '3',
					label: '3栋'
				}, {
					value: '4',
					label: '4栋'
				}],
				date_options: [{
					value: '0',
					label: '当天日期'
				}, {
					value: '2021-08-10',
					label: '2021-08-10'
				}, {
					value: '2021-09-20',
					label: '2021-09-20'
				}, {
					value: '2021-10-19',
					label: '2021-10-19'
				}],
				editdialogFormVisible: false,
				delDialogVisible: false,
				formLabelWidth: '120px',
				formInline: {
					user: '',
					options: [{
						value: '选项1',
						label: '全部'
					}, {
						value: '选项2',
						label: '黄金糕'
					}],
					value: '选项1'
				},
				tableData: [{
					id: '20140309010103',
					stuName: '吴亦凡',
					yongShuiLiang: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					yongShuiLiang: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					yongShuiLiang: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					yongShuiLiang: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					yongShuiLiang: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					yongShuiLiang: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					yongShuiLiang: '188'
				}, {
					id: '20140309010103',
					stuName: '吴亦凡',
					yongShuiLiang: '188'
				}],
				multipleSelection: [],
			}
		},
		mounted() {
			var base = +new Date(1988, 9, 3);
			var oneDay = 24 * 3600 * 1000;

			var data = [
				[base, Math.random() * 300]
			];

			for (var i = 1; i < 200; i++) {
				var now = new Date(base += oneDay);
				data.push([
					[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
					Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])
				]);
			}

			var option = {
				tooltip: {
					trigger: 'axis',
					position: function(pt) {
						return [pt[0], '10%'];
					}
				},
				title: {
					left: 'center',
					text: '大数据量面积图',
				},
				toolbox: {
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						restore: {},
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'time',
					boundaryGap: false
				},
				yAxis: {
					type: 'value',
					boundaryGap: [0, '100%']
				},
				dataZoom: [{
					type: 'inside',
					start: 0,
					end: 20
				}, {
					start: 0,
					end: 20
				}],
				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);
			});
		},
		methods: {
			change_riqi(riqi) {
				this.show_active = riqi
				// 获取查询年、月、日的数据的参数
				var params = {}
				if (riqi == '日') {
					
				} else if (riqi == '月') {
					
				} else if (riqi == '年') {
					
				}
				// 查询年、月、日的数据
				
			},
			drom_change() {
				if (this.drom_value != 0) {
					this.room_select_disabled = false
				} else {
					this.room_select_disabled = true
				}
			},
			onSearch() {
				console.log('onSearch!');
			},
			show_detail(e) {
				this.editdialogFormVisible = true
				console.log(e);
			}
		}
	}
</script>

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