【说明】界面初步完成

package-lock.json

@@ -1041,6 +1041,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.nlark.com/axios/download/axios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -6143,8 +6151,7 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555300559&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz",
-      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=",
-      "dev": true
+      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
     },
     "for-each": {
       "version": "0.3.3",

src/components/balance/Balance.css

@@ -0,0 +1,252 @@
+/* dev-mgr */
+.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;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+.total_balance {
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	margin-right: 106px;
+}
+
+>>>.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;
+}
+
+.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;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+>>>.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 {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 34px;
+	text-align: right;
+}
+
+.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;
+}
+/* dev-mgr */

src/components/balance/Balance.vue

@@ -0,0 +1,172 @@
+<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">
+				<div class="total_balance">余额共计：15898元</div>
+				<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="onSubmit">查找</el-button>
+					</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%"
+					@selection-change="handleSelectionChange" highlight-current-row>
+					<el-table-column align="center" label="学号" width="260">
+						<template slot-scope="scope">{{ scope.row.id }}</template>
+					</el-table-column>
+					<el-table-column prop="stuName" 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>
+					</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>
+					</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;">
+					<div class="right-tip">共计：14578元</div>
+					<el-form :inline="true" :model="formInline" 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>
+						</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-column align="center" label="时间">
+							<template slot-scope="scope">{{ scope.row.id }}</template>
+						</el-table-column>
+						<el-table-column align="center" prop="balance" 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 {
+				editdialogFormVisible: false,
+				delDialogVisible: false,
+				form: {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				},
+				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: []
+			}
+		},
+		methods: {
+			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 => {
+						this.$refs.multipleTable.toggleRowSelection(row);
+					});
+				} else {
+					this.$refs.multipleTable.clearSelection();
+				}
+			},
+			handleSelectionChange(val) {
+				this.multipleSelection = val;
+			},
+			handleEdit(index, row) {
+				this.editdialogFormVisible = true
+				console.log(index, row);
+			},
+			handleDelete(index, row) {
+				this.delDialogVisible = true
+				console.log(index, row);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("Balance.css");
+</style>

src/components/dev_mgr/DevMgr.css

@@ -0,0 +1,254 @@
+/* dev-mgr */
+.first-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 50px;
+}
+
+.second-row {
+	height: 80px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: 40px;
+}
+
+.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;
+}
+
+.right-btn .el-button {
+	margin-right: 30px;
+}
+
+.demo-form-inline {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+>>>.el-form-item__label {
+	height: 40px;
+	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;
+}
+
+.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;
+}
+
+.btn-add {
+	margin-top: -30px;
+}
+
+.btn-add .el-button {
+	width: 100px;
+	height: 40px;
+	background: #298DEF;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+}
+
+>>>.el-icon-add {
+	width: 22px;
+	height: 22px;
+	background: url(../../../static/images/add.png) center center no-repeat;
+	background-size: 18px 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;
+}
+
+.del-btn {
+	color: #333333 !important;
+}
+
+.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;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+.export-table {
+	width: 200px;
+	display: flex;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	line-height: 54px;
+}
+
+>>>.el-dialog__title {
+	font-size: 24px;
+}
+
+.el-dialog .el-form {
+	margin-top: 20px;
+}
+
+>>>.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;
+}
+
+.box-icon {
+	display: flex;
+	justify-content: center;
+	margin: 20px auto;
+	background: url(../../../static/images/info.png) no-repeat;
+	background-size: 107px 107px;
+	width: 107px;
+	height: 107px;
+}
+
+.del-msg {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+	text-align: center;
+}
+
+
+/* dev-mgr */

src/components/dev_mgr/DevMgr.vue

@@ -0,0 +1,195 @@
+<template>
+	<div>
+		<el-row>
+			<el-col :span="24" class="first-row">
+				<div class="tag">设备管理</div>
+				<span class="right-btn">
+					<el-button type="primary" size="small">表格导入</el-button>
+					<el-link type="primary">模板下载</el-link>
+				</span>
+			</el-col>
+		</el-row>
+		<el-row>
+			<el-col :span="24" class="second-row">
+				<el-form :inline="true" :model="formInline" class="demo-form-inline">
+					<el-form-item label="水表ID:" class="shuibiaoId">
+						<el-input v-model="formInline.user" placeholder="请输入水表ID"></el-input>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" @click="onSubmit">查找</el-button>
+					</el-form-item>
+					<el-form-item label="楼栋号:" class="loudonghao">
+						<el-select v-model="formInline.value">
+							<el-option v-for="item in formInline.options" :key="item.value" :label="item.label"
+								:value="item.value">
+							</el-option>
+						</el-select>
+					</el-form-item>
+				</el-form>
+				<div class="btn-add">
+					<el-button type="primary" icon="el-icon-add">添加</el-button>
+				</div>
+			</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%"
+					@selection-change="handleSelectionChange" highlight-current-row>
+					<el-table-column type="selection" label="全选" align="center" width="55"></el-table-column>
+					<el-table-column label="水表ID" width="260">
+						<template slot-scope="scope">{{ scope.row.id }}</template>
+					</el-table-column>
+					<el-table-column prop="drom" label="楼栋号" align="center" width="400"></el-table-column>
+					<el-table-column prop="room" label="宿舍号" show-overflow-tooltip></el-table-column>
+					<el-table-column label="操作" align="center" width="80">
+						<el-button type="text" class="del-btn" slot-scope="scope"
+							@click="handleDelete(scope.$index, scope.row)">删除
+						</el-button>
+					</el-table-column>
+					<el-table-column width="130">
+						<el-button type="text" slot-scope="scope" @click="handleEdit(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>
+					</div>
+					<div class="export-table">
+						<el-button type="primary" size="small" @click="toggleSelection()">表格导出</el-button>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-row>
+			<el-col :span="24" class="forth-row">
+				<!-- 编辑对话框 -->
+				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog">
+					<hr style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
+					<el-form :model="form">
+						<el-form-item label="水表ID：" :label-width="formLabelWidth">
+							<el-input v-model="form.id" autocomplete="off"></el-input>
+						</el-form-item>
+						<el-form-item label="楼栋号：" :label-width="formLabelWidth">
+							<el-input v-model="form.drom" autocomplete="off"></el-input>
+						</el-form-item>
+						<el-form-item label="宿舍号：" :label-width="formLabelWidth">
+							<el-input v-model="form.room" autocomplete="off"></el-input>
+						</el-form-item>
+					</el-form>
+					<div slot="footer" class="dialog-footer">
+						<el-button @click="editdialogFormVisible = false">取 消</el-button>
+						<el-button type="primary" @click="editdialogFormVisible = false">确 定</el-button>
+					</div>
+				</el-dialog>
+				<!-- 删除对话框 -->
+				<el-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog">
+					<div class="box-icon"></div>
+					<span class="del-msg">确定删除该学生信息吗？</span>
+					<span slot="footer" class="dialog-footer">
+						<el-button @click="delDialogVisible = false">取 消</el-button>
+						<el-button type="primary" @click="delDialogVisible = false">确 定</el-button>
+					</span>
+				</el-dialog>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				editdialogFormVisible: false,
+				delDialogVisible: false,
+				form: {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				},
+				formLabelWidth: '120px',
+				formInline: {
+					user: '',
+					options: [{
+						value: '选项1',
+						label: '全部'
+					}, {
+						value: '选项2',
+						label: '黄金糕'
+					}],
+					value: '选项1'
+				},
+				tableData: [{
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				}, {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				}, {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				}, {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				}, {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				}, {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				}, {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				}, {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				}],
+				multipleSelection: []
+			}
+		},
+		methods: {
+			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 => {
+						this.$refs.multipleTable.toggleRowSelection(row);
+					});
+				} else {
+					this.$refs.multipleTable.clearSelection();
+				}
+			},
+			handleSelectionChange(val) {
+				this.multipleSelection = val;
+			},
+			handleEdit(index, row) {
+				this.editdialogFormVisible = true
+				console.log(index, row);
+			},
+			handleDelete(index, row) {
+				this.delDialogVisible = true
+				console.log(index, row);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("DevMgr.css");
+</style>

src/components/feilvset/feilvset.css

@@ -0,0 +1,276 @@
+/* dev-mgr */
+.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: 0px;
+}
+
+.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 {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0;
+	margin: 80px 0 160px 0 !important;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+.total_balance {
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	margin-right: 30px;
+}
+
+.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;
+}
+
+.lsfl {
+	padding-top: 20px;
+	height: 50px;
+	line-height: 50px;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: bold;
+	color: #333333;
+}
+
+>>>.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: 150px;
+	height: 40px;
+	border: 1px solid #4D4D4D;
+	border-radius: 4px;
+	font-size: 20px;
+}
+
+.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;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+>>>.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 {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.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 {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 34px;
+	text-align: right;
+}
+
+.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;
+}
+
+.yuan {
+	height: 40px;
+	line-height: 40px;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+}
+/* dev-mgr */

src/components/feilvset/feilvset.vue

@@ -0,0 +1,154 @@
+<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">
+				<div class="total_balance">当前费率：3元/吨</div>
+				<div class="show-detail" @click="modify_feilv">修改费率</div>
+			</el-col>
+		</el-row>
+		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
+		<div class="lsfl">历史费率</div>
+		<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 :row-class-name="rowClassName">
+					<el-table-column prop="id" label="序号" width="300" align="center"></el-table-column>
+					<el-table-column prop="feilv" label="费率（元/吨）" align="center"></el-table-column>
+					<el-table-column prop="dt" label="时间" align="center"></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>
+					</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>
+							<div class="yuan">元/吨</div>
+						</el-form>
+						<div slot="footer" class="dialog-footer">
+							<el-button @click="editdialogFormVisible = false">取 消</el-button>
+							<el-button type="primary" @click="editdialogFormVisible = false">确 定</el-button>
+						</div>
+				</el-dialog>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				editdialogFormVisible: false,
+				delDialogVisible: false,
+				form: {
+					id: 'KB580002652',
+					drom: '18',
+					room: '118'
+				},
+				formLabelWidth: '120px',
+				formInline: {
+					user: '',
+					options: [{
+						value: '选项1',
+						label: '全部'
+					}, {
+						value: '选项2',
+						label: '黄金糕'
+					}],
+					value: '选项1'
+				},
+				tableData: [{
+					id: 1,
+					feilv: 0.8,
+					dt: '2021-01-01 ~ 2021-07-01'
+				}, {
+					id: 1,
+					feilv: 0.8,
+					dt: '2021-01-01 ~ 2021-07-01'
+				}, {
+					id: 1,
+					feilv: 0.8,
+					dt: '2021-01-01 ~ 2021-07-01'
+				}, {
+					id: 1,
+					feilv: 0.8,
+					dt: '2021-01-01 ~ 2021-07-01'
+				}, {
+					id: 1,
+					feilv: 0.8,
+					dt: '2021-01-01 ~ 2021-07-01'
+				}, {
+					id: 1,
+					feilv: 0.8,
+					dt: '2021-01-01 ~ 2021-07-01'
+				}, {
+					id: 1,
+					feilv: 0.8,
+					dt: '2021-01-01 ~ 2021-07-01'
+				}],
+				multipleSelection: []
+			}
+		},
+		methods: {
+			rowClassName({
+				row,
+				rowIndex
+			}) {
+				//把每一行的索引放进row.id
+				row.id = rowIndex + 1;
+			},
+			modify_feilv() {
+				this.editdialogFormVisible = true
+			},
+			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 => {
+						this.$refs.multipleTable.toggleRowSelection(row);
+					});
+				} else {
+					this.$refs.multipleTable.clearSelection();
+				}
+			},
+			handleSelectionChange(val) {
+				this.multipleSelection = val;
+			},
+			handleEdit(index, row) {
+				this.editdialogFormVisible = true
+				console.log(index, row);
+			},
+			handleDelete(index, row) {
+				this.delDialogVisible = true
+				console.log(index, row);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("feilvset.css");
+</style>

src/components/index/Index.css

@@ -0,0 +1,188 @@
+/* menu */
+.container {
+	width: 100%;
+	height: 100%;
+}
+
+.menu-left {
+	width: 340px;
+	height: 100%;
+	background: #1D3251;
+	overflow: hidden;
+}
+
+.logo-col,
+.title-col {
+	display: flex;
+	justify-content: center;
+}
+
+.logo {
+	margin-top: 34px;
+	width: 84px;
+	height: 84px;
+	background: url(../../../static/images/logo.png) 0 0 no-repeat;
+	background-size: 84px 84px;
+}
+
+.title {
+	margin-top: 26px;
+	width: 268px;
+	height: 34px;
+	line-height: 34px;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: bold;
+	color: #FFFFFF;
+}
+
+.menu-row {
+	margin-top: 39px;
+	width: 341px;
+}
+
+.el-menu-item {
+	padding-left: 50px !important;
+	height: 60px;
+}
+
+.el-menu-item:hover {
+	background: #134a7a !important;
+}
+
+.el-menu-item.is-active {
+	background: #298DEF !important;
+}
+
+.el-menu-item span {
+	height: 20px;
+	padding-left: 6px;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	line-height: 54px;
+}
+
+.el-menu-item .el-icon-sbgl {
+	width: 27px;
+	height: 27px;
+	background: url(../../../static/images/susheguanli.png) center center no-repeat;
+	background-size: cover;
+}
+
+.el-menu-item .el-icon-yue {
+	width: 27px;
+	height: 27px;
+	background: url(../../../static/images/yue.png) center center no-repeat;
+	background-size: cover;
+}
+
+.el-menu-item .el-icon-sjdz {
+	width: 27px;
+	height: 27px;
+	background: url(../../../static/images/duizhang.png) center center no-repeat;
+	background-size: cover;
+}
+
+.el-menu-item .el-icon-ysfx {
+	width: 27px;
+	height: 27px;
+	background: url(../../../static/images/yongshuifenxi.png) center center no-repeat;
+	background-size: cover;
+}
+
+.el-menu-item .el-icon-flsz {
+	width: 27px;
+	height: 27px;
+	background: url(../../../static/images/feilvshezhi.png) center center no-repeat;
+	background-size: cover;
+}
+
+.diwen {
+	position: fixed;
+	left: 76px;
+	bottom: 62px;
+	width: 176px;
+	height: 145px;
+	background: url(../../../static/images/diwen.png) no-repeat;
+	background-size: 176px 145px;
+	z-index: 9999;
+}
+
+/* menu */
+
+/* top */
+.right-top {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	height: 90px;
+	line-height: 90px;
+	background: #FFFFFF;
+}
+
+.wecome-text {
+	width: 130px;
+	height: 90px;
+	line-height: 90px;
+	font-size: 16px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	padding-left: 34px;
+}
+
+.right-items {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	padding-right: 51px;
+}
+
+.tx {
+	width: 54px;
+	height: 54px;
+	border-radius: 50%;
+	background: url(../../../static/images/touxiang.jpg) no-repeat;
+	background-size: 54px 54px;
+	border: 1px solid #EEEEEE;
+}
+
+.shuxian {
+	width: 1px;
+	height: 36px;
+	background: #CCCCCC;
+	margin: 0 21px 0 23px;
+}
+
+.user-name {
+	width: 80px;
+	height: 54px;
+	line-height: 54px;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	margin-left: 18px;
+	text-align: center;
+}
+
+.logout-btn {
+	width: 50px;
+	height: 90px;
+	background: url(../../../static/images/exit.png) center center no-repeat;
+	background-size: 29px 29px;
+	cursor: pointer;
+}
+/* top */
+
+/* main */
+.right-main {
+	margin: 20px 1px 0 20px;
+	padding: 20px 63px 28px 50px;
+	width: 1540px;
+	height: 790px;
+	background: #FFFFFF;
+}
+/* main */

src/components/index/Index.vue

@@ -0,0 +1,129 @@
+<template>
+	<el-row type="flex" class="container" justify="space-between">
+		<el-col :span="4" class="menu-left">
+			<el-row>
+				<el-col :span="24" class="logo-col">
+					<div class="logo"></div>
+				</el-col>
+			</el-row>
+			<el-row>
+				<el-col :span="24" class="title-col">
+					<div class="title">南昌交通学院热水管理系统</div>
+				</el-col>
+			</el-row>
+			<el-row class="menu-row">
+				<el-col :span="24">
+					<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen"
+						@close="handleClose" background-color="#1D3251" text-color="#fff" active-text-color="#fff">
+						<router-link to="devmgr">
+							<el-menu-item index="/index/devmgr">
+								<i class="el-icon-sbgl"></i>
+								<span slot="title">设备管理</span>
+							</el-menu-item>
+						</router-link>
+						<router-link to="balan">
+							<el-menu-item index="/index/balan">
+								<i class="el-icon-yue"></i>
+								<span slot="title">余额管理</span>
+							</el-menu-item>
+						</router-link>
+						<router-link to="sjdz">
+							<el-menu-item index="/index/sjdz">
+								<i class="el-icon-sjdz"></i>
+								<span slot="title">商家对账</span>
+							</el-menu-item>
+						</router-link>
+						<router-link to="ysfx">
+							<el-menu-item index="/index/ysfx">
+								<i class="el-icon-ysfx"></i>
+								<span slot="title">用水分析</span>
+							</el-menu-item>
+						</router-link>
+						<router-link to="flsz">
+							<el-menu-item index="/index/flsz">
+								<i class="el-icon-flsz"></i>
+								<span slot="title">费率设置</span>
+							</el-menu-item>
+						</router-link>
+						<router-link to="zhgl">
+							<el-menu-item index="/index/zhgl">
+								<i class="el-icon-zhgl"></i>
+								<span slot="title">账号管理</span>
+							</el-menu-item>
+						</router-link>
+					</el-menu>
+				</el-col>
+			</el-row>
+			<div class="diwen"></div>
+		</el-col>
+		<el-col :span="20">
+			<el-row>
+				<el-col :span="24" class="right-top">
+					<div class="wecome-text">您好，欢迎登陆！</div>
+					<div class="right-items">
+						<div class="tx"></div>
+						<div class="user-name">我是名称</div>
+						<div class="shuxian"></div>
+						<div class="logout-btn" @click="logout"></div>
+					</div>
+				</el-col>
+			</el-row>
+			<el-row class="right-main">
+				<el-col :span="24">
+					<router-view></router-view>
+				</el-col>
+			</el-row>
+		</el-col>
+	</el-row>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				formInline: {
+					user: '',
+					options: [{
+						value: '选项1',
+						label: '黄金糕'
+					}, {
+						value: '选项2',
+						label: '双皮奶'
+					}, {
+						value: '选项3',
+						label: '蚵仔煎'
+					}, {
+						value: '选项4',
+						label: '龙须面'
+					}, {
+						value: '选项5',
+						label: '北京烤鸭'
+					}],
+					value: '代发地方'
+				}
+			}
+		},
+		methods: {
+			onSubmit() {
+				console.log('submit!');
+			},
+			handleOpen(key, keyPath) {
+				console.log(key, keyPath);
+			},
+			handleClose(key, keyPath) {
+				console.log(key, keyPath);
+			},
+			logout(done) {
+				this.$confirm('确认退出？')
+					.then(_ => {
+						done();
+					})
+					.catch(_ => {});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("Index.css");
+</style>

src/components/login/Login.vue

@@ -0,0 +1,101 @@
+<template>
+	<div class="container">
+		<el-row>
+			<el-col :span="24">
+				<div id="login_form">
+					<div id="logo"></div>
+					<div id="title">南昌交通学院热水端管理后台</div>
+					<el-form label-width="0px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
+						class="demo-ruleForm">
+						<el-form-item prop="uname">
+							<el-input placeholder="请输入账号" maxlength="16" v-model="ruleForm.uname"
+								prefix-icon="el-icon-login-user"></el-input>
+						</el-form-item>
+						<el-form-item prop="upass">
+							<el-input placeholder="请输入密码" maxlength="16" type="password" v-model="ruleForm.upass"
+								prefix-icon="el-icon-login-pass"></el-input>
+						</el-form-item>
+						<el-form-item>
+							<el-button type="primary" @click="submitForm('ruleForm')">登 陆</el-button>
+						</el-form-item>
+					</el-form>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			var checkName = (rule, value, callback) => {
+				if (!value) {
+					return callback(new Error('请输入账号'));
+				}
+				setTimeout(() => {
+					if (value.length < 6) {
+						callback(new Error('账号长度不小于6位'));
+					} else {
+						callback();
+					}
+				}, 30);
+			};
+			var validatePass = (rule, value, callback) => {
+				if (value === '') {
+					callback(new Error('请输入密码'));
+				} else {
+					callback();
+				}
+			};
+			return {
+				ruleForm: {
+					uname: '',
+					upass: ''
+				},
+				rules: {
+					uname: [{
+						validator: checkName,
+						trigger: 'blur'
+					}],
+					upass: [{
+						validator: validatePass,
+						trigger: 'blur'
+					}]
+				}
+			};
+		},
+		methods: {
+			submitForm(formName) {
+				this.$refs[formName].validate((valid) => {
+					if (valid) {
+						// alert('submit!');
+						this.login()
+					} else {
+						console.log('error submit!!');
+						return false;
+					}
+				});
+			},
+			login() {
+				// axios({
+				// 	type: "get",
+				// 	url: "请求的接口路径",
+				// 	params: {
+				// 		username: this.phone,
+				// 		password: this.password
+				// 	}
+				// }).then(res => {
+				// 	console.log(res);
+				// 	localStorage.setItem("token", this.phone);
+				this.$router.push({
+					name: "DevMgr"
+				});
+				// });
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("./login.css");
+</style>

src/components/login/login.css

@@ -0,0 +1,87 @@
+.container {
+	width: 100%;
+	height: 100%;
+	min-width: 1900px;
+	min-height: 1080px;
+	max-width: 1920px;
+	max-height: 1080px;
+	background: url(../../../static/images/bg.png) no-repeat;
+	background-size: 100% 100%;
+	margin-bottom: 0;
+}
+
+#login_form {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: 230px 0 0 1015px;
+	width: 600px;
+}
+
+#logo {
+	width: 95px;
+	height: 95px;
+	background: url(../../../static/images/logo.png) 0 0 no-repeat;
+	background-size: 95px 95px;
+}
+
+#title {
+	width: 546px;
+	height: 42px;
+	line-height: 42px;
+	font-size: 42px;
+	font-family: Microsoft YaHei;
+	font-weight: bold;
+	color: #3CADFD;
+	margin-top: 19px;
+	background: linear-gradient(180deg, #4393F8 0%, #535EF0 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+.demo-ruleForm {
+	margin-top: 40px;
+	width: 400px;
+}
+
+.el-form-item {
+	margin-top: 30px;
+}
+
+>>> .el-form-item input {
+	padding-left: 60px;
+	height: 58px;
+	background: #F6F7FB;
+	border-radius: 29px;
+	font-size: 18px;
+}
+
+.el-form-item>>>.el-icon-login-user{
+	margin-left: 22px;
+    background: url(../../../static/images/yonghuming.png) center no-repeat;
+    background-size: contain;
+}
+
+.el-form-item>>>.el-icon-login-pass{
+	margin-left: 22px;
+    background: url(../../../static/images/mima.png) center no-repeat;
+    background-size: contain;
+}
+
+>>>.el-form-item button {
+	margin-top: 32px;
+	width: 400px;
+	height: 58px;
+	background: linear-gradient(180deg, #4393F8, #535EF0);
+	box-shadow: 1px 4px 16px 0px rgba(84, 136, 254, 0.25);
+	border-radius: 29px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+}
+
+>>> .el-form-item__error {
+	padding-left: 60px;
+}

src/components/shangjiaduizhang/shangjiaduizhang.css

@@ -0,0 +1,273 @@
+/* dev-mgr */
+.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;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.el-form-item {
+	margin-bottom: 0px;
+}
+
+.total_balance {
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+}
+
+.xiaofei {
+	margin: 0 85px 0 18px;
+	font-size: 22px;
+}
+
+>>>.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;
+}
+
+.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;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.pages {
+	width: 1000px;
+	display: flex;
+	justify-content: flex-end;
+}
+
+>>>.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 {
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 34px;
+	text-align: right;
+}
+
+.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;
+}
+
+/* dev-mgr */

src/components/shangjiaduizhang/shangjiaduizhang.vue

@@ -0,0 +1,240 @@
+<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">
+				<div class="total_balance">当日消费：14879元</div>
+				<el-link type="primary" class="xiaofei" @click="handleEdit()">年/月消费</el-link>
+				<el-form :inline="true" class="demo-form-inline">
+					<el-form-item label="楼栋号：" class="shuibiaoId">
+						<el-select v-model="drom_value" placeholder="请选择" class="my-select">
+							<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">
+						<el-select v-model="room_value" placeholder="请选择" class="my-select">
+							<el-option v-for="item in room_options" :key="item.value" :label="item.label"
+								:value="item.value">
+							</el-option>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="日期：" class="shuibiaoId">
+						<el-select v-model="date_value" placeholder="请选择" class="my-select">
+							<el-option v-for="item in date_options" :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%"
+					@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>
+					</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>
+					<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 layout="prev, pager, next" :total="9000"></el-pagination>
+					</div>
+					<div class="export-table">
+						<el-button type="primary" size="small" @click="toggleSelection()">表格导出</el-button>
+					</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;">
+						<div class="view-balance">当日消费：{{ day_balance }}元</div>
+						<div class="view-balance">当月消费：{{ month_balance }}元</div>
+						<div class="view-balance">当年消费：{{ year_balance }}元</div>
+						<div class="view-balance"></div>
+				</el-dialog>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				day_balance: 88888,
+				month_balance: 888888,
+				year_balance: 8888888,
+				drom_options: [{
+					value: '0',
+					label: '全部'
+				},{
+					value: '1',
+					label: '1栋'
+				}, {
+					value: '2',
+					label: '2栋'
+				}, {
+					value: '3',
+					label: '3栋'
+				}, {
+					value: '4',
+					label: '4栋'
+				}],
+				room_options: [{
+					value: '0',
+					label: '全部'
+				}, {
+					value: '1102',
+					label: '1102'
+				}, {
+					value: '1103',
+					label: '1103'
+				}, {
+					value: '1104',
+					label: '1104'
+				}],
+				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'
+				}],
+				drom_value: '0',
+				room_value: '0',
+				date_value: '0',
+				editdialogFormVisible: false,
+				delDialogVisible: false,
+				formLabelWidth: '120px',
+				formInline: {
+					user: '',
+					options: [{
+						value: '选项1',
+						label: '全部'
+					}, {
+						value: '选项2',
+						label: '黄金糕'
+					}],
+					value: '选项1'
+				},
+				tableData: [{
+					id: '20140309010103',
+					stuName: '吴亦凡',
+					balance: '188',
+					drom: '1栋',
+					room: '1101',
+					dt: '2021-01-01'
+				},{
+					id: '20140309010103',
+					stuName: '吴亦凡',
+					balance: '188',
+					drom: '1栋',
+					room: '1101',
+					dt: '2021-01-01'
+				},{
+					id: '20140309010103',
+					stuName: '吴亦凡',
+					balance: '188',
+					drom: '1栋',
+					room: '1101',
+					dt: '2021-01-01'
+				},{
+					id: '20140309010103',
+					stuName: '吴亦凡',
+					balance: '188',
+					drom: '1栋',
+					room: '1101',
+					dt: '2021-01-01'
+				},{
+					id: '20140309010103',
+					stuName: '吴亦凡',
+					balance: '188',
+					drom: '1栋',
+					room: '1101',
+					dt: '2021-01-01'
+				},{
+					id: '20140309010103',
+					stuName: '吴亦凡',
+					balance: '188',
+					drom: '1栋',
+					room: '1101',
+					dt: '2021-01-01'
+				},{
+					id: '20140309010103',
+					stuName: '吴亦凡',
+					balance: '188',
+					drom: '1栋',
+					room: '1101',
+					dt: '2021-01-01'
+				},{
+					id: '20140309010103',
+					stuName: '吴亦凡',
+					balance: '188',
+					drom: '1栋',
+					room: '1101',
+					dt: '2021-01-01'
+				}],
+				multipleSelection: []
+			}
+		},
+		methods: {
+			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 => {
+						this.$refs.multipleTable.toggleRowSelection(row);
+					});
+				} else {
+					this.$refs.multipleTable.clearSelection();
+				}
+			},
+			handleSelectionChange(val) {
+				this.multipleSelection = val;
+			},
+			handleEdit(index, row) {
+				this.editdialogFormVisible = true
+				console.log(index, row);
+			},
+			handleDelete(index, row) {
+				this.delDialogVisible = true
+				console.log(index, row);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("shangjiaduizhang.css");
+</style>

src/components/yongshuifenxi/yongshuifenxi.css

@@ -0,0 +1,309 @@
+/* dev-mgr */
+.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;
+}
+
+.day-btn {
+	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;
+}
+/* dev-mgr */

src/components/yongshuifenxi/yongshuifenxi.vue

@@ -0,0 +1,283 @@
+<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 day-btn">日</div>
+							<div class="dmy-btn month-btn">月</div>
+							<div class="dmy-btn year-btn">年</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="onSubmit">查找</el-button>
+						</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-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 {
+				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: {
+			show_detail() {
+
+			},
+			drom_change() {
+				if (this.drom_value != 0) {
+					this.room_select_disabled = false
+				} else {
+					this.room_select_disabled = true
+				}
+			},
+			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 => {
+						this.$refs.multipleTable.toggleRowSelection(row);
+					});
+				} else {
+					this.$refs.multipleTable.clearSelection();
+				}
+			},
+			show_detail(index, row) {
+				this.editdialogFormVisible = true
+				console.log(index, row);
+			},
+			handleDelete(index, row) {
+				this.delDialogVisible = true
+				console.log(index, row);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("yongshuifenxi.css");
+</style>

src/components/zhanghaoguanli/zhanghaoguanli.css

@@ -0,0 +1,238 @@
+/* dev-mgr */
+.first-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 50px;
+}
+
+.second-row {
+	height: 80px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: 40px;
+}
+
+.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 {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+>>>.el-form-item__label {
+	height: 40px;
+	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;
+}
+
+.el-button {
+	margin: 0 60px 0 40px;
+	width: 100px;
+	height: 40px;
+	background: #298DEF;
+	border-radius: 4px;
+	font-size: 18px;
+}
+
+.btn-add {
+	margin-top: -30px;
+}
+
+.btn-add .el-button {
+	width: 100px;
+	height: 40px;
+	background: #298DEF;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+}
+
+>>>.el-icon-add {
+	width: 22px;
+	height: 22px;
+	background: url(../../../static/images/add.png) center center no-repeat;
+	background-size: 18px 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;
+}
+
+.del-btn {
+	color: #333333 !important;
+}
+
+.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;
+}
+
+.table-footer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.pages {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+>>>.el-pager li.active {
+	color: #FFF;
+	font-weight: bold;
+	background-color: #298DEF
+}
+
+.export-table {
+	width: 200px;
+	display: flex;
+	font-size: 20px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #FFFFFF;
+	line-height: 54px;
+}
+
+>>>.el-dialog__title {
+	font-size: 24px;
+}
+
+.el-dialog .el-form {
+	margin-top: 20px;
+}
+
+>>>.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;
+}
+
+.box-icon {
+	display: flex;
+	justify-content: center;
+	margin: 20px auto;
+	background: url(../../../static/images/info.png) no-repeat;
+	background-size: 107px 107px;
+	width: 107px;
+	height: 107px;
+}
+
+.del-msg {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #333333;
+	line-height: 54px;
+	text-align: center;
+}
+
+
+/* dev-mgr */

src/components/zhanghaoguanli/zhanghaoguanli.vue

@@ -0,0 +1,183 @@
+<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" :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="onSubmit">查找</el-button>
+					</el-form-item>
+				</el-form>
+				<div class="btn-add">
+					<el-button type="primary" icon="el-icon-add">添加</el-button>
+				</div>
+			</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%"
+					@selection-change="handleSelectionChange" highlight-current-row>
+					<el-table-column label="昵称" align="center">
+						<template slot-scope="scope">{{ scope.row.id }}</template>
+					</el-table-column>
+					<el-table-column prop="account" label="账号" align="center"></el-table-column>
+					<el-table-column prop="pass" label="密码" show-overflow-tooltip></el-table-column>
+					<el-table-column label="操作" align="center" width="80">
+						<el-button type="text" class="del-btn" slot-scope="scope"
+							@click="handleDelete(scope.$index, scope.row)">删除
+						</el-button>
+					</el-table-column>
+					<el-table-column width="130">
+						<el-button type="text" slot-scope="scope" @click="handleEdit(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>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-row>
+			<el-col :span="24" class="forth-row">
+				<!-- 编辑对话框 -->
+				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog">
+					<hr style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
+					<el-form :model="form">
+						<el-form-item label="昵称" :label-width="formLabelWidth">
+							<el-input v-model="form.id" autocomplete="off"></el-input>
+						</el-form-item>
+						<el-form-item label="账号：" :label-width="formLabelWidth">
+							<el-input v-model="form.account" autocomplete="off"></el-input>
+						</el-form-item>
+						<el-form-item label="密码：" :label-width="formLabelWidth">
+							<el-input v-model="form.pass" autocomplete="off"></el-input>
+						</el-form-item>
+						<el-form-item label="确认密码：" :label-width="formLabelWidth">
+							<el-input v-model="form.pass" autocomplete="off"></el-input>
+						</el-form-item>
+					</el-form>
+					<div slot="footer" class="dialog-footer">
+						<el-button @click="editdialogFormVisible = false">取 消</el-button>
+						<el-button type="primary" @click="editdialogFormVisible = false">确 定</el-button>
+					</div>
+				</el-dialog>
+				<!-- 删除对话框 -->
+				<el-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog">
+					<div class="box-icon"></div>
+					<span class="del-msg">确定删除该学生信息吗？</span>
+					<span slot="footer" class="dialog-footer">
+						<el-button @click="delDialogVisible = false">取 消</el-button>
+						<el-button type="primary" @click="delDialogVisible = false">确 定</el-button>
+					</span>
+				</el-dialog>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				editdialogFormVisible: false,
+				delDialogVisible: false,
+				form: {
+					id: '随风飘荡',
+					account: 'admi123',
+					pass: '*******'
+				},
+				formLabelWidth: '120px',
+				formInline: {
+					user: '',
+					options: [{
+						value: '选项1',
+						label: '全部'
+					}, {
+						value: '选项2',
+						label: '黄金糕'
+					}],
+					value: '选项1'
+				},
+				tableData: [{
+					id: '随风飘荡',
+					account: 'admi123',
+					pass: '*******'
+				},{
+					id: '随风飘荡',
+					account: 'admi123',
+					pass: '*******'
+				},{
+					id: '随风飘荡',
+					account: 'admi123',
+					pass: '*******'
+				},{
+					id: '随风飘荡',
+					account: 'admi123',
+					pass: '*******'
+				},{
+					id: '随风飘荡',
+					account: 'admi123',
+					pass: '*******'
+				},{
+					id: '随风飘荡',
+					account: 'admi123',
+					pass: '*******'
+				},{
+					id: '随风飘荡',
+					account: 'admi123',
+					pass: '*******'
+				},{
+					id: '随风飘荡',
+					account: 'admi123',
+					pass: '*******'
+				}],
+				multipleSelection: []
+			}
+		},
+		methods: {
+			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 => {
+						this.$refs.multipleTable.toggleRowSelection(row);
+					});
+				} else {
+					this.$refs.multipleTable.clearSelection();
+				}
+			},
+			handleSelectionChange(val) {
+				this.multipleSelection = val;
+			},
+			handleEdit(index, row) {
+				this.editdialogFormVisible = true
+				console.log(index, row);
+			},
+			handleDelete(index, row) {
+				this.delDialogVisible = true
+				console.log(index, row);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("zhanghaoguanli.css");
+</style>

src/main.js

@@ -6,10 +6,13 @@ import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import axios from 'axios'; /* 引入axios进行地址访问*/
-
+import echarts from 'echarts'
 
 Vue.use(ElementUI);
+
+Vue.prototype.$echarts = echarts
 Vue.prototype.$axios = axios;
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */

src/router/index.js

@@ -3,6 +3,11 @@ import Router from 'vue-router'
 import Login from '@/components/login/Login'
 import Index from '@/components/index/Index'
 import DevMgr from '@/components/dev_mgr/DevMgr'
+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 ZHGL from '@/components/zhanghaoguanli/zhanghaoguanli'
 
 Vue.use(Router)
 
@@ -20,6 +25,26 @@ export default new Router({
 			path: 'devmgr',
 			name: 'DevMgr',
 			component: DevMgr
-		},]
+		},{
+			path: 'balan',
+			name: 'Balance',
+			component: Balance
+		},{
+			path: 'sjdz',
+			name: 'SJDZ',
+			component: SJDZ
+		},{
+			path: 'ysfx',
+			name: 'YSFX',
+			component: YSFX
+		},{
+			path: 'flsz',
+			name: 'FLSZ',
+			component: FLSZ
+		},{
+			path: 'zhgl',
+			name: 'ZHGL',
+			component: ZHGL
+		}]
 	}]
 })

src/store/index.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const key = 'user'
+const isLogin = 'isLogin'
+const store = new Vuex.Store({
+	state() {
+		return {
+			user: null,
+			isLogin: '0'
+		}
+	},
+	getters: {
+		getStorage: function(state) {
+			if (!state.user) {
+				state.user = JSON.parse(localStorage.getItem(key))
+				state.isLogin = localStorage.getItem(isLogin)
+			}
+			return state.user
+		}
+	},
+	mutations: {
+		$_setLogin(state, value) {
+			state.isLogin = value
+			localStorage.setItem(isLogin, value)
+		},
+		$_setStorage(state, value) {
+			state.user = value
+			localStorage.setItem(key, JSON.stringify(value))
+		},
+		$_removeStorage(state) {
+			state.user = null
+			localStorage.removeItem(key)
+		}
+	}
+})
+
+export default store