【进度】剩下费率和账号，其它全部完成。

src/components/balance/Balance.vue

@@ -8,12 +8,12 @@
 		<el-row>
 			<el-col :span="24" class="second-row">
 				<div class="total_balance">余额共计：{{total_amount}}元</div>
-				<el-form :inline="true" :model="formInline" class="demo-form-inline">
+				<el-form :inline="true" class="demo-form-inline">
 					<el-form-item label="姓名：" class="shuibiaoId">
-						<el-input v-model="formInline.user" placeholder="请输入姓名"></el-input>
+						<el-input v-model="searchformUser" placeholder="请输入姓名" maxlength="16"></el-input>
 					</el-form-item>
 					<el-form-item>
-						<el-button type="primary" @click="onSubmit">查找</el-button>
+						<el-button type="primary" @click="onSearch">查找</el-button>
 					</el-form-item>
 				</el-form>
 			</el-col>
@@ -22,51 +22,57 @@
 		<el-row>
 			<el-col :span="24" class="third-row">
 				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
-					@selection-change="handleSelectionChange" highlight-current-row>
+					highlight-current-row>
 					<el-table-column align="center" label="学号" width="260">
-						<template slot-scope="scope">{{ scope.row.id }}</template>
+						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
 					</el-table-column>
-					<el-table-column prop="stuName" label="姓名" align="center" width="400"></el-table-column>
+					<el-table-column prop="user_name" label="姓名" align="center" width="400"></el-table-column>
 					<el-table-column prop="balance" label="余额（元）" show-overflow-tooltip></el-table-column>
 					<el-table-column label="操作" align="center" width="280">
-						<el-button type="text" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">查看记录
+						<el-button type="text" slot-scope="scope" @click="handleShowDialog(scope.$index, scope.row)">
+							查看记录
 						</el-button>
 					</el-table-column>
 				</el-table>
 				<div style="margin-top: 20px" class="table-footer">
 					<div class="pages">
-						<el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
+						<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>
 				</div>
 			</el-col>
 		</el-row>
 		<el-row>
 			<el-col :span="24" class="forth-row">
-				<!-- 编辑对话框 -->
-				<el-dialog title="充值记录" :visible.sync="editdialogFormVisible" :close-on-click-modal="false"
+				<!-- 充值记录对话框 -->
+				<el-dialog title="充值记录" :visible.sync="viewdialogFormVisible" :close-on-click-modal="false"
 					:close-on-press-escape="false" width="640px" top="0vh" class="my-dialog">
 					<hr
 						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
-					<div class="right-tip">共计：14578元</div>
-					<el-form :inline="true" :model="formInline" class="demo-form-inline">
+					<div class="right-tip">共计：{{ view_total_amount }}元</div>
+					<el-form :inline="true" class="demo-form-inline">
 						<el-form-item label="筛选条件：">
-							<el-select v-model="formInline.region" placeholder="月份">
-								<el-option label="1月" value="shanghai"></el-option>
-								<el-option label="2月" value="beijing"></el-option>
-							</el-select>
+							<div class="block">
+								<el-date-picker v-model="select_month" value-format="yyyy-MM" type="month"
+									placeholder="选择月" @change="handleChangeMonth">
+								</el-date-picker>
+							</div>
 						</el-form-item>
 					</el-form>
-					<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
-						@selection-change="handleSelectionChange" highlight-current-row>
+					<el-table ref="multipleTable" :data="view_tableData" tooltip-effect="dark" style="width: 100%"
+						highlight-current-row>
 						<el-table-column align="center" label="时间">
-							<template slot-scope="scope">{{ scope.row.id }}</template>
+							<template slot-scope="scope">{{ scope.row.re_time }}</template>
 						</el-table-column>
-						<el-table-column align="center" prop="balance" label="金额" show-overflow-tooltip>
+						<el-table-column align="center" prop="account" 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>
+							<el-pagination layout="prev, pager, next" :current-page.sync="currentPage"
+								:hide-on-single-page="true" :page-size="pageRows" :total="view_rows_total"
+								@current-change="handleViewCurrentChange"></el-pagination>
 						</div>
 					</div>
 				</el-dialog>
@@ -79,117 +85,251 @@
 	export default {
 		data() {
 			return {
-				total_amount: 0.0.toFixed(2),
-				editdialogFormVisible: false,
-				delDialogVisible: false,
-				form: {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				},
+				total_amount: 0.0.toFixed(2), // 余额共计
+				view_total_amount: 0.0.toFixed(2), // 查看记录对话框中的余额共计
+				searchformUser: '', // 查找的姓名
+				viewdialogFormVisible: false, // 显示隐藏查看记录对话框
+				select_month: '', // 选择的月份
 				formLabelWidth: '120px',
-				formInline: {
-					user: '',
-					options: [{
-						value: '选项1',
-						label: '全部'
-					}, {
-						value: '选项2',
-						label: '黄金糕'
-					}],
-					value: '选项1'
-				},
-				tableData: [{
-					id: '20140309010103',
-					stuName: '吴亦凡',
-					balance: '188'
-				}, {
-					id: '20140309010103',
-					stuName: '吴亦凡',
-					balance: '188'
-				}, {
-					id: '20140309010103',
-					stuName: '吴亦凡',
-					balance: '188'
-				}, {
-					id: '20140309010103',
-					stuName: '吴亦凡',
-					balance: '188'
-				}, {
-					id: '20140309010103',
-					stuName: '吴亦凡',
-					balance: '188'
-				}, {
-					id: '20140309010103',
-					stuName: '吴亦凡',
-					balance: '188'
-				}, {
-					id: '20140309010103',
-					stuName: '吴亦凡',
-					balance: '188'
-				}, {
-					id: '20140309010103',
-					stuName: '吴亦凡',
-					balance: '188'
-				}],
-				multipleSelection: []
+				// 余额列表
+				tableData: [], // 余额列表
+				rows_total: 0, // 余额列表总记录数
+				currentPage: 1, // 余额列表当前页
+				// 查看记录
+				view_tableData: [], // 查看记录列表
+				view_rows_total: 0, // 查看记录列表总记录数
+				view_currentPage: 1, // 查看记录当前页
+
+				pageRows: 8, // 每页记录数
+				stu_number: '' // 学号
 			}
 		},
 		created() {
 			// 获取总金额
-			this.get_total_amount('/HotWaters/waterfindMoneyTotal.action')
+			this.get_total_amount()
+			// 获取余额列表
+			let params = {
+				page: this.currentPage,
+				rows: this.pageRows
+			}
+			this.get_amount_list(params)
 		},
 		methods: {
 			/**
+			 * 获取当月，格式YYYY-MM
+			 */
+			getNowFormatDate() {
+				var date = new Date();
+				var seperator1 = "-";
+				var year = date.getFullYear();
+				var month = date.getMonth() + 1;
+				var strDate = date.getDate();
+				if (month >= 1 && month <= 9) {
+					month = "0" + month;
+				}
+				if (strDate >= 0 && strDate <= 9) {
+					strDate = "0" + strDate;
+				}
+				var currentdate = year + seperator1 + month;
+				return currentdate;
+			},
+			/**
+			 * 获取余额列表
+			 */
+			get_amount_list(params) {
+				var _this = this
+				_this.tableData = []
+				// _this.rows_total = 0
+				this.$axios.get('/api/HotWaters/waterMoney.action', {
+						params: params
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
+							'{}') {
+							// _this.$message.success('数据加载成功！');
+							_this.tableData = res.data.rows
+							_this.rows_total = res.data.total
+						} else {
+							_this.$message.success('【获取余额列表】暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【获取余额列表】请求异常: ' + err);
+					})
+			},
+			/**
 			 * 获取总金额
-			 * @param {Object} url
 			 */
-			get_total_amount(url) {
+			get_total_amount() {
 				var _this = this
-				this.$axios.get('/api' + url)
+				this.$axios.get('/api/HotWaters/waterfindMoneyTotal.action')
 					.then(res => {
 						// console.log(res.data);
-						if (typeof(res.data.money) != 'undefined' && res.data.money != '' && JSON.stringify(res.data) !='{}') {
+						if (typeof(res.data.money) != 'undefined' && res.data.money != '' && JSON.stringify(res
+								.data) != '{}') {
 							// _this.$message.success('数据加载成功！');
 							let amount = res.data.money
 							_this.total_amount = parseFloat(amount).toFixed(2)
 						} else {
-							_this.$message.success('总金额暂无数据！');
+							_this.$message.success('【获取总金额】暂无数据！');
 						}
 					})
 					.catch(err => {
 						// console.log(err);
-						_this.$message.error('请求异常: ' + err);
+						_this.$message.error('【获取总金额】请求异常: ' + err);
 					})
 			},
-			onSubmit() {
-				console.log('submit!')
+			/**
+			 * 余额列表改变页码
+			 * @param {Object} val
+			 */
+			handleCurrentChange(val) {
+				// console.log(val);
+				this.currentPage = val
+				var params = {}
+				if (this.searchformUser != '' & typeof(this.searchformUser) != 'undefined') {
+					params = {
+						page: this.currentPage,
+						rows: this.pageRows,
+						user_name: this.searchformUser
+					}
+				} else {
+					params = {
+						page: this.currentPage,
+						rows: this.pageRows
+					}
+				}
+				// 获取余额列表
+				this.get_amount_list(params)
 			},
-			handleOpen(key, keyPath) {
-				console.log(key, keyPath)
+			/**
+			 * 查找姓名对应的 余额列表
+			 */
+			onSearch() {
+				// console.log(this.searchformUser);
+				this.currentPage = 1
+				this.handleCurrentChange(this.currentPage)
 			},
-			handleClose(key, keyPath) {
-				console.log(key, keyPath)
+			/**
+			 * 查看充值记录列表
+			 * @param {Object} index
+			 * @param {Object} row
+			 */
+			handleShowDialog(index, row) {
+				// console.log(index, row)
+				// 获取当月
+				this.select_month = this.getNowFormatDate();
+				this.stu_number = row.stu_number
+				// 显示查看充值记录对话框
+				this.viewdialogFormVisible = true
+				// 组合参数
+				let params = {
+					stu_number: this.stu_number,
+					time: this.select_month,
+					page: 1,
+					rows: this.pageRows
+				}
+
+				// 获取查看记录列表
+				this.get_view_list(params)
+
+				// 充值记录总计
+				this.get_view_total_amount()
 			},
-			toggleSelection(rows) {
-				if (rows) {
-					rows.forEach(row => {
-						this.$refs.multipleTable.toggleRowSelection(row)
+			/**
+			 * 充值记录总计
+			 */
+			get_view_total_amount() {
+				var _this = this
+				_this.view_total_amount = 0.0.toFixed(2)
+				this.$axios.get('/api/HotWaters/waterrechargeTotal.action', {
+						params: {
+							re_time: this.select_month,
+							stu_number: this.stu_number
+						}
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.money) != 'undefined' && res.data.money != '' && JSON.stringify(res
+								.data) != '{}') {
+							// _this.$message.success('数据加载成功！');
+							let amount = res.data.money
+							_this.view_total_amount = parseFloat(amount).toFixed(2)
+						} else {
+							_this.$message.success('【充值记录总计】暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【充值记录总计】请求异常: ' + err);
 					})
-				} else {
-					this.$refs.multipleTable.clearSelection()
-				}
 			},
-			handleSelectionChange(val) {
-				this.multipleSelection = val
+			/**
+			 * 选择月份，更新查看记录列表
+			 */
+			handleChangeMonth() {
+				// console.log(this.select_month);
+				this.currentPage = 1
+				// 组合参数
+				let params = {
+					stu_number: this.stu_number,
+					time: this.select_month,
+					page: this.currentPage,
+					rows: this.pageRows
+				}
+
+				// 获取查看记录列表
+				this.get_view_list(params)
+				
+				// 充值记录总计
+				this.get_view_total_amount()
 			},
-			handleEdit(index, row) {
-				this.editdialogFormVisible = true
-				console.log(index, row)
+			/**
+			 * 获取查看记录列表
+			 */
+			get_view_list(params) {
+				var _this = this
+				_this.view_tableData = []
+				// _this.view_rows_total = 0
+				this.$axios.get('/api/HotWaters/waterfindRecharge.action', {
+						params: params
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
+							'{}') {
+							// _this.$message.success('数据加载成功！');
+							_this.view_tableData = res.data.rows
+							_this.view_rows_total = res.data.total
+						} else {
+							_this.$message.success('【获取查看记录列表】暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【获取查看记录列表】请求异常: ' + err);
+					})
 			},
-			handleDelete(index, row) {
-				this.delDialogVisible = true
-				console.log(index, row)
+			/**
+			 * 查看记录对话框改变页码
+			 * @param {Object} val
+			 */
+			handleViewCurrentChange(val) {
+				// console.log(val);
+				this.view_currentPage = val
+
+				// 组合参数
+				let params = {
+					stu_number: this.stu_number,
+					time: this.select_month,
+					page: this.view_currentPage,
+					rows: this.pageRows
+				}
+
+				// 获取余额列表
+				this.get_view_list(params)
 			}
 		}
 	}

src/components/dev_mgr/DevMgr.vue

@@ -17,7 +17,7 @@
 			<el-col :span="24" class="second-row">
 				<el-form :inline="true" class="demo-form-inline">
 					<el-form-item label="水表ID:" class="shuibiaoId">
-						<el-input type="text" v-model="query_shuibiaoId" placeholder="请输入水表ID"
+						<el-input type="text" v-model="query_shuibiaoId" maxlength="13" placeholder="请输入水表ID"
 							@input="idInputChange($event)"></el-input>
 					</el-form-item>
 					<el-form-item>
@@ -32,7 +32,7 @@
 					</el-form-item>
 				</el-form>
 				<div class="btn-add">
-					<el-button type="primary" icon="el-icon-add">添加</el-button>
+					<el-button type="primary" icon="el-icon-add" @click="handleAdd">添加</el-button>
 				</div>
 			</el-col>
 		</el-row>
@@ -71,6 +71,27 @@
 		</el-row>
 		<el-row>
 			<el-col :span="24" class="forth-row">
+				<!-- 添加对话框 -->
+				<el-dialog title="添加" :visible.sync="adddialogFormVisible" width="500px" 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 :model="addform">
+						<el-form-item label="水表ID：" :label-width="formLabelWidth">
+							<el-input v-model="addform.user_id" autocomplete="off" maxlength="13"></el-input>
+						</el-form-item>
+						<el-form-item label="楼栋号：" :label-width="formLabelWidth">
+							<el-input v-model="addform.build" autocomplete="off" maxlength="4"></el-input>
+						</el-form-item>
+						<el-form-item label="宿舍号：" :label-width="formLabelWidth">
+							<el-input v-model="addform.dom" autocomplete="off" maxlength="6"></el-input>
+						</el-form-item>
+					</el-form>
+					<div slot="footer" class="dialog-footer">
+						<el-button @click="adddialogFormVisible = false">取 消</el-button>
+						<el-button type="primary" @click="handleAddRow">确 定</el-button>
+					</div>
+				</el-dialog>
 				<!-- 编辑对话框 -->
 				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog"
 					:close-on-click-modal="false" :close-on-press-escape="false">
@@ -113,17 +134,21 @@
 			return {
 				// fileList: [],
 				query_shuibiaoId: '', //  需要查找的水表id
+				adddialogFormVisible: false,
 				editdialogFormVisible: false, // 控制编辑框的显示隐藏
 				delDialogVisible: false, // 控制删除框的显示隐藏
 				delRowId: 0, // 删除行的id
-				currentPage: 1, // 当前所在页码
-				pageRows: 8, // 每页显示的行数
 				form: { // 编辑框的数据绑定
 					user_id: '',
 					build: '',
 					dom: '',
 					id: 0
 				},
+				addform: { // 添加框的数据绑定
+					user_id: '',
+					build: '',
+					dom: ''
+				},
 				formLabelWidth: '120px', //  表单的宽度
 				form_select: { // 下拉列表的数据绑定
 					builds: [{
@@ -134,6 +159,8 @@
 					label: ''
 				},
 				tableData: [], // 表格需要显示的数据
+				currentPage: 1, // 当前所在页码
+				pageRows: 8, // 每页显示的行数
 				rows_total: 0, // 总记录数
 				// multipleSelection: []  // 多选后，选择的所有行的数据数组
 			}
@@ -354,12 +381,18 @@
 					})
 			},
 			/**
+			 * 显示添加对话框
+			 */
+			handleAdd() {
+				this.adddialogFormVisible = true
+			},
+			/**
 			 * 显示编辑提示框，并获取对应的id等数据
 			 * @param {Object} index
 			 * @param {Object} row
 			 */
 			handleEdit(index, row) {
-				console.log(index, row);
+				// console.log(index, row);
 				this.form.user_id = row.user_id
 				this.form.build = row.build
 				this.form.dom = row.dom
@@ -367,6 +400,41 @@
 				this.editdialogFormVisible = true
 			},
 			/**
+			 * 添加一条水表信息
+			 */
+			handleAddRow() {
+				// console.log(this.addform);
+				var _this = this
+				this.$axios.get('/api/HotWaters/wateraddBuild.action', {
+						params: {
+							user_id: this.addform.user_id,
+							dom: this.addform.dom,
+							build: this.addform.build
+						}
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data.msg == '添加成功' && JSON
+							.stringify(res.data) != '{}') {
+							_this.$message.success('【数据添加】成功！');
+							let params = {
+								page: this.currentPage,
+								rows: this.pageRows
+							}
+							this.updateTable('/HotWaters/waterlist.action', params)
+							// 取得楼栋号，填充下拉列表
+							this.getBuildsFillSelect()
+						} else {
+							_this.$message.error('【数据添加】失败！');
+						}
+						this.adddialogFormVisible = false
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【数据添加】请求异常: ' + err);
+					})
+			},
+			/**
 			 * 更新指定的id所在的行
 			 */
 			handleEditRow() {
@@ -414,13 +482,15 @@
 			 */
 			searchBtnSubmit() {
 				// console.log(this.query_shuibiaoId);
+				this.currentPage = 1
+				
 				var params = {}
 				if (this.query_shuibiaoId.trim()) {
 					// 查询指定水表id的信息
 					if (this.form_select.value == 0) {
 						params = {
 							user_id: this.query_shuibiaoId,
-							page: 1,
+							page: this.currentPage,
 							rows: this.pageRows
 						}
 					} else {

src/components/shangjiaduizhang/shangjiaduizhang.vue

@@ -42,18 +42,20 @@
 					@selection-change="handleSelectionChange" highlight-current-row>
 					<el-table-column type="selection" label="全选" align="center" width="55"></el-table-column>
 					<el-table-column label="学号" align="center">
-						<template slot-scope="scope">{{ scope.row.id }}</template>
+						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
 					</el-table-column>
-					<el-table-column prop="stuName" label="姓名" align="center"></el-table-column>
-					<el-table-column prop="balance" label="消费金额（元）" align="center" show-overflow-tooltip>
+					<el-table-column prop="user_name" label="姓名" align="center"></el-table-column>
+					<el-table-column prop="use_amount" label="消费金额（元）" align="center" show-overflow-tooltip>
+					</el-table-column>
+					<el-table-column prop="build" label="楼栋号" align="center" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="dom" label="宿舍号" align="center" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="begin_time" label="消费时间" align="center" show-overflow-tooltip>
 					</el-table-column>
-					<el-table-column prop="drom" label="楼栋号" align="center" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="room" label="宿舍号" align="center" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="dt" label="消费时间" align="center" show-overflow-tooltip></el-table-column>
 				</el-table>
 				<div style="margin-top: 20px" class="table-footer">
 					<div class="pages">
-						<el-pagination :hide-on-single-page="true" layout="prev, pager, next" :total="rows_total">
+						<el-pagination :hide-on-single-page="true" layout="prev, pager, next"
+							:page-size="table.pageRows" :total="rows_total" @current-change="handleCurrentChange">
 						</el-pagination>
 					</div>
 					<div class="export-table">
@@ -146,7 +148,7 @@
 				}
 				// 获取当日消费列表
 				this.getTodayXiaofei(params)
-				// 1. 获取年月日，并获取消费总金额
+				// 获取年月日，并获取消费总金额
 				this.selectGetDate(myDate)
 				// 取得楼栋号，填充下拉列表
 				this.getBuildsFillSelect()
@@ -154,12 +156,22 @@
 		},
 		methods: {
 			/**
+			 * 改变页码
+			 * @param {Object} val
+			 */
+			handleCurrentChange(val) {
+				// console.log(val);
+				this.table.currentPage = val
+				// 组合参数，刷新消费表格
+				this.selectParams(val)
+			},
+			/**
 			 * 1. 获取日期下拉列表选择的日期
 			 * 2. 拆分到对于的变量中，便于根据
 			 * @param {Object} val
 			 */
 			selectGetDate(val) {
-				console.log(val);
+				// console.log(val);
 				this.select_riqi.select_year = ''
 				this.select_riqi.select_month = ''
 				this.select_riqi.select_day = ''
@@ -172,11 +184,18 @@
 					this.select_riqi.select_month = ""
 					this.select_riqi.select_day = ""
 				}
+				
+				this.table.currentPage = 1
 
 				// 获取年月日消费总金额
 				this.get_year_month_day_amount()
+
+				// 组合参数，刷新消费表格
+				this.selectParams()
 			},
-			//获取当前时间，格式YYYY-MM-DD
+			/**
+			 * 获取当前时间，格式YYYY-MM-DD
+			 */
 			getNowFormatDate() {
 				var date = new Date();
 				var seperator1 = "-";
@@ -204,7 +223,7 @@
 				}
 				this.$axios.get('/api/HotWaters/watergetdoms.action', params)
 					.then(res => {
-						console.log(res.data);
+						// console.log(res.data);
 						if (typeof(res.data.doms) != 'undefined' && res.data.doms != '' && JSON.stringify(res.data) !=
 							'{}') {
 							this.room_options.rooms = [{
@@ -239,9 +258,11 @@
 				obj = this.drom_options.builds.find((item) => {
 					return item.value === vId; //筛选出匹配数据
 				});
-				console.log(obj);
+				// console.log(obj);
 				this.drom_options.value = obj.value
 				this.drom_options.label = obj.label
+				
+				this.table.currentPage = 1
 
 				// 获取宿舍号，填充宿舍号下拉列表
 				this.getRooms()
@@ -259,10 +280,12 @@
 				obj = this.room_options.rooms.find((item) => {
 					return item.value === vId; //筛选出匹配数据
 				});
-				console.log(obj);
+				// console.log(obj);
 				this.room_options.room_value = obj.value
 				this.room_options.room_label = obj.label
 
+				this.table.currentPage = 1
+				
 				// 组合参数，刷新消费表格
 				this.selectParams()
 			},
@@ -272,7 +295,7 @@
 			 */
 			selectParams() {
 				var params = {}
-				params.page = 1
+				params.page = this.table.currentPage
 				params.rows = this.table.pageRows
 				if (this.drom_options.value != 0) {
 					params.build = this.drom_options.label
@@ -297,20 +320,12 @@
 					})
 					.then(res => {
 						// console.log(res.data);
+						this.tableData = []
+						_this.rows_total = 0
 						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !=
 							'{}') {
-							this.tableData = []
-							for (var i = 0; i < res.data.rows.length; i++) {
-								let tmp = {
-									id: res.data.rows[i].stu_number,
-									stuName: res.data.rows[i].user_name,
-									balance: res.data.rows[i].use_amount,
-									drom: '1栋',
-									room: '1101',
-									dt: res.data.rows[i].begin_time,
-								}
-								this.tableData.push(tmp)
-							}
+							_this.tableData = res.data.rows
+							_this.rows_total = res.data.total
 						} else {
 							_this.$message.success('【当日消费】暂无数据！');
 						}
@@ -321,7 +336,7 @@
 					})
 			},
 			/**
-			 * 取得楼栋号，填充下拉列表
+			 * 获取楼栋号，填充下拉列表
 			 */
 			getBuildsFillSelect() {
 				// 获取楼栋号，填充下拉列表
@@ -357,10 +372,13 @@
 			 */
 			get_year_month_day_amount() {
 				var _this = this
+				this.xiaofei.year_balance = 0.0.toFixed(2)
+				this.xiaofei.month_balance = 0.0.toFixed(2)
+				this.xiaofei.day_balance = 0.0.toFixed(2)
+				this.today_xiaofei = 0.0.toFixed(2)
+				// 年消费记录
 				this.$axios.get('/api/HotWaters/watertotalFeel.action', {
 						params: {
-							day: this.select_riqi.select_day,
-							month: this.select_riqi.select_month,
 							year: this.select_riqi.select_year
 						}
 					})
@@ -368,29 +386,58 @@
 						// console.log(res.data);
 						if (typeof(res.data) != 'undefined' && res.data != '' && JSON.stringify(res.data) != '{}') {
 							// _this.$message.success('数据加载成功！');
-							this.xiaofei.day_balance = parseFloat(res.data.money_day).toFixed(2)
-							this.xiaofei.month_balance = parseFloat(res.data.money_month).toFixed(2)
 							this.xiaofei.year_balance = parseFloat(res.data.money_year).toFixed(2)
+						} else {
+							_this.$message.success('【年消费】暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【年消费】请求异常: ' + err);
+					})
+
+				// 月消费记录
+				this.$axios.get('/api/HotWaters/watertotalFeel.action', {
+						params: {
+							month: this.select_riqi.select_month
+						}
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data) != 'undefined' && res.data != '' && JSON.stringify(res.data) != '{}') {
+							// _this.$message.success('数据加载成功！');
+							this.xiaofei.month_balance = parseFloat(res.data.money_month).toFixed(2)
+						} else {
+							_this.$message.success('【月消费】暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【月消费】请求异常: ' + err);
+					})
+
+				// 日消费记录
+				this.$axios.get('/api/HotWaters/watertotalFeel.action', {
+						params: {
+							day: this.select_riqi.select_day
+						}
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data) != 'undefined' && res.data != '' && JSON.stringify(res.data) != '{}') {
+							// _this.$message.success('数据加载成功！');
+							this.xiaofei.day_balance = parseFloat(res.data.money_day).toFixed(2)
 
 							this.today_xiaofei = parseFloat(res.data.money_day).toFixed(2)
 						} else {
-							_this.$message.success('【年/月消费】暂无数据！');
+							_this.$message.success('【日消费】暂无数据！');
 						}
 					})
 					.catch(err => {
 						// console.log(err);
-						_this.$message.error('【年/月消费】请求异常: ' + err);
+						_this.$message.error('【日消费】请求异常: ' + err);
 					})
 			},
-			onSubmit() {
-				console.log('submit!');
-			},
-			handleOpen(key, keyPath) {
-				console.log(key, keyPath);
-			},
-			handleClose(key, keyPath) {
-				console.log(key, keyPath);
-			},
 			toggleSelection(rows) {
 				if (rows) {
 					rows.forEach(row => {

src/components/yongshuifenxi/yongshuifenxi.vue

@@ -9,18 +9,21 @@
 			<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"
+						<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" clearable :disabled="room_select_disabled">
+						<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">用水总量：15898吨</div>
+				<div class="water-total">用水总量：{{yongshuizongliang}}吨</div>
 				<div class="show-detail" @click="show_detail">查看详情</div>
 			</el-col>
 		</el-row>
@@ -31,12 +34,14 @@
 					<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 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>
@@ -44,31 +49,35 @@
 		</el-row>
 		<el-row>
 			<el-col :span="24" class="forth-row">
-				<!-- 编辑对话框 -->
-				<el-dialog title="用水详情" :visible.sync="editdialogFormVisible" width="640px" top="0vh" class="my-dialog">
+				<!-- 详情对话框 -->
+				<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" :model="formInline" class="demo-form-inline">
+					<el-form :inline="true" class="demo-form-inline">
 						<el-form-item label="姓名：" class="shuibiaoId">
-							<el-input v-model="formInline.user" placeholder="请输入姓名"></el-input>
+							<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="tableData" tooltip-effect="dark" style="width: 100%"
+					<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.id }}</template>
+							<template slot-scope="scope">{{ scope.row.stu_number }}</template>
 						</el-table-column>
-						<el-table-column align="center" prop="stuName" label="姓名" show-overflow-tooltip>
+						<el-table-column align="center" prop="user_name" label="姓名" show-overflow-tooltip>
 						</el-table-column>
-						<el-table-column align="center" prop="yongShuiLiang" label="用水量" show-overflow-tooltip>
+						<el-table-column align="center" prop="use_amount" 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>
+							<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>
@@ -81,191 +90,332 @@
 	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',
+				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: '选项2',
-						label: '黄金糕'
 					}],
-					value: '选项1'
+					value: 0,
+					label: ''
 				},
-				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: [],
+				// 详情对话框相关参数
+				detail_dialogFormVisible: false, // 控制详情对话框显示、隐藏
+				detail_userName: '', // 姓名用于查询
+				detail_tableData: [],
+				control_table: {
+					detail_current_page: 1,
+					detail_page_rows: 8,
+					detail_total_rows: 0
+				}
 			}
 		},
-		mounted() {
-			var base = +new Date(1988, 9, 3);
-			var oneDay = 24 * 3600 * 1000;
+		created() {
+			// 填充楼栋号
+			this.getBuildsFillSelect()
 
-			var data = [
-				[base, Math.random() * 300]
-			];
+			// 获取用水总量
+			this.get_total_yongshuizongliang()
 
-			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])
-				]);
-			}
+			// 共用部分，更新图
+			this.updateData()
+		},
+		methods: {
+			/**
+			 * 改变页码
+			 * @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 = [];
 
-			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
-				}]
-			};
+				for (var i = 0; i < params_dt.length; i++) {
+					date.push(params_dt[i].replace(/-/g, '/'));
+					data.push(parseFloat(params_data[i]).toFixed(2));
+				}
 
-			this.$nextTick(function() {
-				this.charts = this.$echarts.init(document.getElementById('main'));
+				// console.log(data);
 
-				this.charts.setOption(option);
-			});
-		},
-		methods: {
+				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() {
+				var _this = this
+				this.$axios.get('/api/HotWaters/waterwaterTotal.action')
+					.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('/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 == '日') {
-					
-				} else if (riqi == '月') {
-					
-				} else if (riqi == '年') {
-					
+					// 查询日的数据
+					this.$axios.get('/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('/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('/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);
+						})
 				}
-				// 查询年、月、日的数据
-				
 			},
-			drom_change() {
+			/**
+			 * 选择楼栋号
+			 */
+			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
+				// 获取楼栋号
+				this.drom = this.drom_options.label
+
+				// 共用部分
+				this.updateData()
 			},
-			onSearch() {
-				console.log('onSearch!');
+			/**
+			 * 失去焦点更新数据
+			 * @param {Object} event
+			 */
+			updateData(event) {
+				if (this.show_active == '') {
+					this.show_active = '日'
+				}
+				// 查询对应的数据
+				this.change_riqi(this.show_active)
 			},
-			show_detail(e) {
-				this.editdialogFormVisible = true
-				console.log(e);
+			/**
+			 * 回车失去焦点
+			 * @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('/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()
 			}
 		}
 	}