【进度】增加“用水异常”、“支付异常”，金额显示优化。

src/components/balance/Balance.vue

@@ -27,7 +27,7 @@
 						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
 					</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 prop="balance" label="余额（元）" :formatter="formatBalance" show-overflow-tooltip></el-table-column>
 					<el-table-column label="操作" align="center" width="280">
 						<el-button type="text" slot-scope="scope" @click="handleShowDialog(scope.$index, scope.row)">
 							查看记录
@@ -65,7 +65,7 @@
 						<el-table-column align="center" label="时间">
 							<template slot-scope="scope">{{ scope.row.re_time }}</template>
 						</el-table-column>
-						<el-table-column align="center" prop="account" label="金额" show-overflow-tooltip>
+						<el-table-column align="center" prop="account" label="金额" :formatter="formatBalance" show-overflow-tooltip>
 						</el-table-column>
 					</el-table>
 					<div slot="footer" class="dialog-footer">
@@ -115,6 +115,13 @@
 			this.get_amount_list(params)
 		},
 		methods: {
+			formatBalance: (row, column, cellValue, index) => {
+				// row: 行数据
+				// column: 列属性
+				// cellValue: 单元格数据值
+				// index: 行索引，注意：2.3.9版本以后才有。
+				return cellValue.toFixed(2)
+			},
 			/**
 			 * 获取当月，格式YYYY-MM
 			 */

src/components/shangjiaduizhang/shangjiaduizhang.css

@@ -270,4 +270,8 @@
 	text-indent: 2em;
 }
 
+.el-date-editor.el-input, .el-date-editor.el-input__inner {
+    width: 170px;
+}
+
 /* dev-mgr */

src/components/shangjiaduizhang/shangjiaduizhang.vue

@@ -45,7 +45,8 @@
 						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
 					</el-table-column>
 					<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 prop="use_amount" label="消费金额（元）" :formatter="formatDigit" 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>
@@ -160,7 +161,9 @@
 			 */
 			handleDownloadTable() {
 				var _this = this
-				var params = { data: {}}
+				var params = {
+					data: {}
+				}
 				if (_this.drom_options.label) {
 					params.data.build = _this.drom_options.label
 				}
@@ -368,6 +371,13 @@
 						_this.$message.error('【当日消费】请求异常: ' + err);
 					})
 			},
+			formatDigit: (row, column, cellValue, index) => {
+				// row: 行数据
+				// column: 列属性
+				// cellValue: 单元格数据值
+				// index: 行索引，注意：2.3.9版本以后才有。
+				return cellValue.toFixed(2)
+			},
 			/**
 			 * 获取楼栋号，填充下拉列表
 			 */

src/components/yongshuiyichang/yongshuiyichang.css

@@ -0,0 +1,320 @@
+/* yongshuiyichang */
+.first-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 50px;
+}
+
+.second-row {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 80px;
+	padding-top: 20px;
+}
+
+.third-row {
+	margin-top: 10px;
+}
+
+.tag {
+	width: 108px;
+	height: 40px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: bold;
+	color: #000000;
+	line-height: 54px;
+}
+
+>>>.demo-form-inline {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	align-items: center;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+>>>.el-form-item__label {
+	margin: 0;
+	padding: 0;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 40px;
+}
+
+.shuibiaoId>>>.el-input__inner {
+	width: 240px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+}
+
+.left-margin {
+	margin-left: 30px;
+}
+
+.water-total {
+	height: 40px;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 40px;
+	margin-left: 136px;
+}
+
+.show-detail {
+	height: 40px;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #298DEF;
+	line-height: 40px;
+	margin-left: 26px;
+	cursor: pointer;
+}
+
+.loudonghao>>>.el-input__inner {
+	width: 181px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+}
+
+.el-button {
+	margin: 0 60px 0 40px;
+	width: 100px;
+	height: 40px;
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 18px;
+}
+
+>>>.el-table__header {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+}
+
+>>>.el-table__header .cell {
+	color: #010101;
+}
+
+>>>.el-checkbox,
+>>>.el-checkbox__inner {
+	width: 24px;
+	height: 24px;
+}
+
+>>>.el-checkbox__inner::after {
+	margin: 3px 0 0 4px;
+	width: 4px;
+	height: 10px;
+}
+
+>>>.el-table__row .cell {
+	height: 35px;
+	line-height: 35px;
+	font-size: 18px;
+	color: #333333;
+}
+
+>>>.el-table__row .cell .el-button {
+	background: none;
+	margin: 0 20px 0 0;
+	width: 50px;
+	height: 35px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.el-icon {
+	width: 38px;
+	height: 38px;
+	line-height: 38px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.number,
+.el-pagination>>>.more {
+	margin: 0 5px;
+	width: 40px;
+	height: 40px;
+	line-height: 40px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.pages {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tip {
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #010101;
+}
+
+>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+>>>.el-dialog__title {
+	font-size: 24px;
+}
+
+>>>.el-form-item__label {
+	font-size: 20px;
+}
+
+>>>.el-dialog__body .el-input__inner {
+	font-size: 18px;
+}
+
+.dialog-footer>>>.el-button--default {
+	border: 1px solid #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #298DEF;
+	height: 46px;
+	background-color: #FFFFFF;
+}
+
+.dialog-footer>>>.el-button--primary {
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	height: 46px;
+}
+
+.my-dialog {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.forth-row .el-form {
+	margin-top: 10px;
+	white-space: nowrap;
+}
+
+.forth-row .el-form .el-select {
+	width: 130px;
+}
+
+.right-tip {
+	width: 300px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.dmy-btn {
+	width: 70px;
+	height: 35px;
+	line-height: 35px;
+	border-radius: 2px;
+	font-size: 18px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	margin-left: 10px;
+	background: #FFFFFF;
+	border: 1px solid #298DEF;
+	text-align: center;
+	cursor: pointer;
+}
+
+.my_active {
+	background: #298DEF;
+	color: #FFFFFF;
+}
+
+.dialog-pages {
+	display: flex;
+	justify-content: center;
+}
+
+.dialog-pages>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+.dialog-pages .el-pagination>>>.el-icon {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 16px;
+}
+
+.dialog-pages .el-pagination>>>.number,
+.dialog-pages .el-pagination>>>.more {
+	margin: 0 3px;
+	width: 30px;
+	height: 33px;
+	line-height: 33px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 14px;
+}
+
+.shuibiaoId>>>.el-input__inner,
+.my-select {
+	width: 170px;
+	word-spacing: normal;
+}
+
+.view-balance {
+	height: 54px;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+	text-indent: 2em;
+}
+
+.hygrometer {
+	height: 500px;
+	width: 100%;
+	border: 1px solid red;
+}
+
+.exception {
+	color: #010101;
+	cursor: default;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+/* yongshuiyichang */

src/components/yongshuiyichang/yongshuiyichang.vue

@@ -0,0 +1,253 @@
+<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>
+			</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="300">
+						<template slot-scope="scope">{{ scope.row.stu_number }}</template>
+					</el-table-column>
+					<el-table-column prop="user_name" label="宿舍号" align="center" width="400"></el-table-column>
+					<el-table-column prop="balance" label="消费金额（元）" align="center" show-overflow-tooltip></el-table-column>
+					<el-table-column label="操作" align="center" width="380">
+						<template slot-scope="scope">
+							<el-button type="text" v-if="handle?true:false"
+								@click="handleShowDialog(scope.$index, scope.row)">未处理</el-button>
+							<el-button type="text" v-if="handle?false:true" class="exception">已处理</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+				<div style="margin-top: 20px" class="table-footer">
+					<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>
+				</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="用水量" 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 {
+				drom_value: 0, // 楼栋号编码
+				drom: '', // 楼栋号
+				// 楼栋号下拉列表
+				drom_options: { // 下拉列表的数据绑定
+					builds: [{
+						value: 0,
+						label: '全部'
+					}],
+					value: 0,
+					label: ''
+				},
+				currentPage: 1, // 余额列表当前页
+				pageRows: 8, // 每页记录数
+				tableData: [], // 异常列表
+				rows_total: 0, // 总行数
+				// 详情对话框相关参数
+				detail_dialogFormVisible: false, // 控制详情对话框显示、隐藏
+				detail_userName: '', // 姓名用于查询
+				detail_tableData: [],
+				control_table: {
+					detail_current_page: 1,
+					detail_page_rows: 8,
+					detail_total_rows: 0
+				},
+				handle: true
+			}
+		},
+		created() {
+			// 填充楼栋号
+			this.getBuildsFillSelect()
+
+			// 获取余额列表
+			let params = {
+				page: this.currentPage,
+				rows: this.pageRows
+			}
+			// 异常列表
+			this.get_exception_list(params)
+		},
+		methods: {
+			/**
+			 * 列表改变页码
+			 * @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)
+			},
+			/**
+			 * 处理异常
+			 * @param {Object} index
+			 * @param {Object} row
+			 */
+			handleShowDialog(index, row) {
+				console.log(index, row)
+			},
+			/**
+			 * 获取余额列表
+			 */
+			get_exception_list(params) {
+				var _this = this
+				_this.tableData = []
+				// _this.rows_total = 0
+				this.$axios.get('/jxch-smartmp-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);
+					})
+			},
+			/**
+			 * 获取楼栋号，填充下拉列表
+			 */
+			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);
+					})
+			},
+			/**
+			 * 选择楼栋号
+			 */
+			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
+				// 获取楼栋号
+				this.drom = this.drom_options.label
+
+				// 共用部分
+				// this.updateData()
+			},
+			/**
+			 * 详情页面查找
+			 */
+			onSearch() {
+				this.control_table.detail_current_page = 1
+
+				// this.show_detail()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("yongshuiyichang.css");
+</style>

src/components/zhifuyichang/zhifuyichang.css

@@ -0,0 +1,320 @@
+/* yongshuiyichang */
+.first-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 50px;
+}
+
+.second-row {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 80px;
+	padding-top: 20px;
+}
+
+.third-row {
+	margin-top: 10px;
+}
+
+.tag {
+	width: 108px;
+	height: 40px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: bold;
+	color: #000000;
+	line-height: 54px;
+}
+
+>>>.demo-form-inline {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	align-items: center;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+>>>.el-form-item__label {
+	margin: 0;
+	padding: 0;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 40px;
+}
+
+.shuibiaoId>>>.el-input__inner {
+	width: 240px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+}
+
+.left-margin {
+	margin-left: 30px;
+}
+
+.water-total {
+	height: 40px;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 40px;
+	margin-left: 136px;
+}
+
+.show-detail {
+	height: 40px;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #298DEF;
+	line-height: 40px;
+	margin-left: 26px;
+	cursor: pointer;
+}
+
+.loudonghao>>>.el-input__inner {
+	width: 181px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+}
+
+.el-button {
+	margin: 0 60px 0 40px;
+	width: 100px;
+	height: 40px;
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 18px;
+}
+
+>>>.el-table__header {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+}
+
+>>>.el-table__header .cell {
+	color: #010101;
+}
+
+>>>.el-checkbox,
+>>>.el-checkbox__inner {
+	width: 24px;
+	height: 24px;
+}
+
+>>>.el-checkbox__inner::after {
+	margin: 3px 0 0 4px;
+	width: 4px;
+	height: 10px;
+}
+
+>>>.el-table__row .cell {
+	height: 35px;
+	line-height: 35px;
+	font-size: 18px;
+	color: #333333;
+}
+
+>>>.el-table__row .cell .el-button {
+	background: none;
+	margin: 0 20px 0 0;
+	width: 50px;
+	height: 35px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.el-icon {
+	width: 38px;
+	height: 38px;
+	line-height: 38px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.el-pagination>>>.number,
+.el-pagination>>>.more {
+	margin: 0 5px;
+	width: 40px;
+	height: 40px;
+	line-height: 40px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 18px;
+}
+
+.pages {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tip {
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #010101;
+}
+
+>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+>>>.el-dialog__title {
+	font-size: 24px;
+}
+
+>>>.el-form-item__label {
+	font-size: 20px;
+}
+
+>>>.el-dialog__body .el-input__inner {
+	font-size: 18px;
+}
+
+.dialog-footer>>>.el-button--default {
+	border: 1px solid #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #298DEF;
+	height: 46px;
+	background-color: #FFFFFF;
+}
+
+.dialog-footer>>>.el-button--primary {
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	height: 46px;
+}
+
+.my-dialog {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.forth-row .el-form {
+	margin-top: 10px;
+	white-space: nowrap;
+}
+
+.forth-row .el-form .el-select {
+	width: 130px;
+}
+
+.right-tip {
+	width: 300px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.dmy-btn {
+	width: 70px;
+	height: 35px;
+	line-height: 35px;
+	border-radius: 2px;
+	font-size: 18px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	margin-left: 10px;
+	background: #FFFFFF;
+	border: 1px solid #298DEF;
+	text-align: center;
+	cursor: pointer;
+}
+
+.my_active {
+	background: #298DEF;
+	color: #FFFFFF;
+}
+
+.dialog-pages {
+	display: flex;
+	justify-content: center;
+}
+
+.dialog-pages>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+.dialog-pages .el-pagination>>>.el-icon {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 16px;
+}
+
+.dialog-pages .el-pagination>>>.number,
+.dialog-pages .el-pagination>>>.more {
+	margin: 0 3px;
+	width: 30px;
+	height: 33px;
+	line-height: 33px;
+	border: 1px solid #626262;
+	border-radius: 2px;
+	font-size: 14px;
+}
+
+.shuibiaoId>>>.el-input__inner,
+.my-select {
+	width: 170px;
+	word-spacing: normal;
+}
+
+.view-balance {
+	height: 54px;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+	text-indent: 2em;
+}
+
+.hygrometer {
+	height: 500px;
+	width: 100%;
+	border: 1px solid red;
+}
+
+.exception {
+	color: #010101;
+	cursor: default;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+/* yongshuiyichang */

src/components/zhifuyichang/zhifuyichang.vue

@@ -0,0 +1,223 @@
+<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>
+			</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.stu_number }}</template>
+					</el-table-column>
+					<el-table-column prop="user_name" label="学号" align="center" width="200"></el-table-column>
+					<el-table-column prop="user_name" label="充值宿舍号" align="center" width="200"></el-table-column>
+					<el-table-column prop="balance" label="金额（元）" align="center" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="balance" label="时间" align="center" show-overflow-tooltip></el-table-column>
+					<el-table-column label="操作" align="center" width="380">
+						<template slot-scope="scope">
+							<el-button type="text" v-if="handle?true:false"
+								@click="handleShowDialog(scope.$index, scope.row)">未处理</el-button>
+							<el-button type="text" v-if="handle?false:true" class="exception">已处理</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+				<div style="margin-top: 20px" class="table-footer">
+					<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>
+				</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="用水量" 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 {
+				drom_value: 0, // 楼栋号编码
+				drom: '', // 楼栋号
+				// 楼栋号下拉列表
+				drom_options: { // 下拉列表的数据绑定
+					builds: [{
+						value: 0,
+						label: '电费'
+					},{
+						value: 1,
+						label: '水费'
+					}],
+					value: 0
+				},
+				currentPage: 1, // 余额列表当前页
+				pageRows: 8, // 每页记录数
+				tableData: [], // 异常列表
+				rows_total: 0, // 总行数
+				// 详情对话框相关参数
+				detail_dialogFormVisible: false, // 控制详情对话框显示、隐藏
+				detail_userName: '', // 姓名用于查询
+				detail_tableData: [],
+				control_table: {
+					detail_current_page: 1,
+					detail_page_rows: 8,
+					detail_total_rows: 0
+				},
+				handle: true
+			}
+		},
+		created() {
+			// 获取余额列表
+			let params = {
+				page: this.currentPage,
+				rows: this.pageRows
+			}
+			// 异常列表
+			this.get_exception_list(params)
+		},
+		methods: {
+			/**
+			 * 列表改变页码
+			 * @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)
+			},
+			/**
+			 * 处理异常
+			 * @param {Object} index
+			 * @param {Object} row
+			 */
+			handleShowDialog(index, row) {
+				console.log(index, row)
+			},
+			/**
+			 * 获取余额列表
+			 */
+			get_exception_list(params) {
+				var _this = this
+				_this.tableData = []
+				// _this.rows_total = 0
+				this.$axios.get('/jxch-smartmp-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);
+					})
+			},
+			/**
+			 * 选择楼栋号
+			 */
+			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
+				// 获取楼栋号
+				this.drom = this.drom_options.label
+
+				// 共用部分
+				// this.updateData()
+			},
+			/**
+			 * 详情页面查找
+			 */
+			onSearch() {
+				this.control_table.detail_current_page = 1
+
+				// this.show_detail()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("zhifuyichang.css");
+</style>

src/router/index.js

@@ -7,8 +7,8 @@ import Balance from '@/components/balance/Balance'  // 余额管理
 import SJDZ from '@/components/shangjiaduizhang/shangjiaduizhang' // 商家对账
 import YSFX from '@/components/yongshuifenxi/yongshuifenxi'  // 用水分析
 import FLSZ from '@/components/feilvset/feilvset' // 费率设置
-import YSYC from '@/components/zhuanghaoguanli/zhuanghaoguanli' // 用水异常
-import ZFYC from '@/components/zhuanghaoguanli/zhuanghaoguanli' // 支付异常
+import YSYC from '@/components/yongshuiyichang/yongshuiyichang' // 用水异常
+import ZFYC from '@/components/zhifuyichang/zhifuyichang' // 支付异常
 import ZHGL from '@/components/zhuanghaoguanli/zhuanghaoguanli' // 账户管理
 
 Vue.use(Router)