初步完成界面设计，有待数据调试，后期对接口

src/icons/svg/example.svg

@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>

src/icons/svg/link.svg

@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>

src/router/index.js

@@ -42,21 +42,6 @@ export const constantRoutes = [{
 		hidden: true
 	},
 
-	// {
-	// 	path: '/',
-	// 	component: Layout,
-	// 	redirect: '/dashboard',
-	// 	children: [{
-	// 		path: 'dashboard',
-	// 		name: 'Dashboard',
-	// 		component: () => import('@/views/dashboard/index'),
-	// 		meta: {
-	// 			title: 'Dashboard',
-	// 			icon: 'dashboard'
-	// 		}
-	// 	}]
-	// },
-
 	{
 		path: '/',
 		component: Layout,
@@ -101,7 +86,7 @@ export const constantRoutes = [{
 			}
 		}]
 	},
-	
+
 	{
 		path: '/rechargeRecord',
 		component: Layout,
@@ -133,132 +118,36 @@ export const constantRoutes = [{
 	},
 
 	{
-		path: '/example',
-		component: Layout,
-		redirect: '/example/table',
-		name: 'Example',
-		meta: {
-			title: 'Example',
-			icon: 'el-icon-s-help'
-		},
-		children: [{
-				path: 'table',
-				name: 'Table',
-				component: () => import('@/views/table/index'),
-				meta: {
-					title: 'Table',
-					icon: 'table'
-				}
-			},
-			{
-				path: 'tree',
-				name: 'Tree',
-				component: () => import('@/views/tree/index'),
-				meta: {
-					title: 'Tree',
-					icon: 'tree'
-				}
-			}
-		]
-	},
-
-	{
-		path: '/form',
+		path: '/accountMgr',
 		component: Layout,
+		redirect: '/accountMgr',
 		children: [{
-			path: 'form',
-			name: 'Form',
-			component: () => import('@/views/form/index'),
+			path: 'accountMgr',
+			name: 'AccountMgr',
+			component: () => import('@/views/accountMgr/index'),
 			meta: {
-				title: 'Form',
-				icon: 'form'
+				title: '账号管理',
+				icon: 'accountMgr'
 			}
 		}]
 	},
-
-	{
-		path: '/nested',
-		component: Layout,
-		redirect: '/nested/menu1',
-		name: 'Nested',
-		meta: {
-			title: 'Nested',
-			icon: 'nested'
-		},
-		children: [{
-				path: 'menu1',
-				component: () => import('@/views/nested/menu1/index'), // Parent router-view
-				name: 'Menu1',
-				meta: {
-					title: 'Menu1'
-				},
-				children: [{
-						path: 'menu1-1',
-						component: () => import('@/views/nested/menu1/menu1-1'),
-						name: 'Menu1-1',
-						meta: {
-							title: 'Menu1-1'
-						}
-					},
-					{
-						path: 'menu1-2',
-						component: () => import('@/views/nested/menu1/menu1-2'),
-						name: 'Menu1-2',
-						meta: {
-							title: 'Menu1-2'
-						},
-						children: [{
-								path: 'menu1-2-1',
-								component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-								name: 'Menu1-2-1',
-								meta: {
-									title: 'Menu1-2-1'
-								}
-							},
-							{
-								path: 'menu1-2-2',
-								component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-								name: 'Menu1-2-2',
-								meta: {
-									title: 'Menu1-2-2'
-								}
-							}
-						]
-					},
-					{
-						path: 'menu1-3',
-						component: () => import('@/views/nested/menu1/menu1-3'),
-						name: 'Menu1-3',
-						meta: {
-							title: 'Menu1-3'
-						}
-					}
-				]
-			},
-			{
-				path: 'menu2',
-				component: () => import('@/views/nested/menu2/index'),
-				name: 'Menu2',
-				meta: {
-					title: 'menu2'
-				}
-			}
-		]
-	},
-
+	
 	{
-		path: 'external-link',
+		path: '/systemSet',
 		component: Layout,
+		redirect: '/systemSet',
 		children: [{
-			path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
+			path: 'systemSet',
+			name: 'SystemSet',
+			component: () => import('@/views/systemSet/index'),
 			meta: {
-				title: 'External Link',
-				icon: 'link'
+				title: '系统设置',
+				icon: 'systemSet'
 			}
 		}]
 	},
-
-	// 404 page must be placed at the end !!!
+	
+	// 404页面 必须放在最后!!
 	{
 		path: '*',
 		redirect: '/404',

src/views/accountMgr/index.vue

@@ -0,0 +1,514 @@
+<template>
+	<div class="app-container">
+		<el-row>
+			<el-col :span="24">
+				<div class="cell">
+					<div class="cell-title">
+						<div class="title-left">
+							<div class="title">账号管理</div>
+						</div>
+						<div class="title-right">
+							<el-button type="primary" @click="add_account">添加账号</el-button>
+						</div>
+					</div>
+					<div class="cell-body">
+						<el-table :data="tableData" height="560" style="width: 100%" :cell-style="cell_style"
+							:header-cell-style="header_cell_style">
+							<el-table-column label="序号" align="center" width="100">
+								<template slot-scope="scope">
+									<span>{{(pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1}}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="手机" align="center">
+								<template slot-scope="scope">
+									<span>{{ scope.row.phone }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="姓名" align="center">
+								<template slot-scope="scope">
+									<span>{{ scope.row.name }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="角色" align="center">
+								<template slot-scope="scope">
+									{{scope.row.role}}
+								</template>
+							</el-table-column>
+							<el-table-column label="备注" align="center" width="200">
+								<template slot-scope="scope">
+									<span>{{ scope.row.comment }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="操作" align="center">
+								<template slot-scope="scope">
+									<el-button size="mini" class="btn-table"
+										@click="edit_amount(scope.$index, scope.row)">修改</el-button>
+									<el-button size="mini" class="btn-table" type="danger"
+										@click="delete_amount(scope.$index, scope.row)">
+										删除</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+						<div class="pagination-table">
+							<el-pagination @current-change="currentPageChange"
+								:current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
+								layout="prev, pager, next, jumper" :total="pagination.total">
+							</el-pagination>
+						</div>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-dialog title="添加账号" :visible.sync="dialogAddAcountFormVisible" :close-on-click-modal="false"
+			:close-on-press-escape="false" @close="add_account_dialog_close">
+			<el-form :model="formAddAcount">
+				<el-form-item label="手机号：" :label-width="formLabelWidth" :required="true">
+					<el-input v-model="formAddAcount.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
+				</el-form-item>
+				<el-form-item label="用户名：" :label-width="formLabelWidth" :required="true">
+					<el-input v-model="formAddAcount.username" autocomplete="off" placeholder="请输入用户名"></el-input>
+				</el-form-item>
+				<el-form-item label="角　色：" :label-width="formLabelWidth" :required="true">
+					<el-checkbox-group v-model="formAddAcount.checkedRole" :min="0" :max="1">
+						<el-checkbox v-for="(role, index) in formAddAcount.roles" :label="role" :key="index">{{role}}
+						</el-checkbox>
+					</el-checkbox-group>
+				</el-form-item>
+				<el-form-item label="备　注：" :label-width="formLabelWidth">
+					<el-input type="textarea" v-model="formAddAcount.comment" placeholder="请输入备注信息"></el-input>
+				</el-form-item>
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button @click="dialogAddAcountFormVisible = false">取 消</el-button>
+				<el-button type="primary" @click="dialogAddAcountFormVisible = false">确 认</el-button>
+			</div>
+		</el-dialog>
+		<el-dialog title="修改账号" :visible.sync="dialogModifyAcountFormVisible" :close-on-click-modal="false"
+			:close-on-press-escape="false" @close="modify_account_dialog_close">
+			<el-form :model="formModifyAcount">
+				<el-form-item label="手机号：" :label-width="formLabelWidth" :required="true">
+					<el-input v-model="formModifyAcount.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
+				</el-form-item>
+				<el-form-item label="用户名：" :label-width="formLabelWidth" :required="true">
+					<el-input v-model="formModifyAcount.username" autocomplete="off" placeholder="请输入用户名"></el-input>
+				</el-form-item>
+				<el-form-item label="角　色：" :label-width="formLabelWidth" :required="true">
+					<el-checkbox-group v-model="formModifyAcount.checkedRole" :min="0" :max="1">
+						<el-checkbox v-for="(role, index) in formModifyAcount.roles" :label="role" :key="role">{{role}}
+						</el-checkbox>
+					</el-checkbox-group>
+				</el-form-item>
+				<el-form-item label="备　注：" :label-width="formLabelWidth">
+					<el-input type="textarea" v-model="formModifyAcount.comment" placeholder="请输入备注信息"></el-input>
+				</el-form-item>
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button @click="dialogModifyAcountFormVisible = false">取 消</el-button>
+				<el-button type="primary" @click="dialogModifyAcountFormVisible = false">确 认</el-button>
+			</div>
+		</el-dialog>
+		<el-dialog custom-class="el-dialog-delete-account" :visible.sync="dialog_delete_account"
+			:close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
+			<div slot="" class="del-account-body">
+				<img src="../../icons/serveAC/del_warning.png" alt="">
+				<div class="del-account-body-txt">是否确定将该【{{delete_account}}】从列表中移除？</div>
+			</div>
+			<div slot="footer" class="dialog-footer">
+				<el-button @click="dialog_delete_account = false"> 否 </el-button>
+				<el-button type="primary" @click="dialog_delete_account = false"> 是 </el-button>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	const roleOptions = ['管理员', '浏览员'];
+	export default {
+		data() {
+			return {
+				dialogAddAcountFormVisible: false, // 添加账号对话框显示与隐藏
+				formAddAcount: { // 添加账号对话框 数据
+					phone: '',
+					username: '',
+					comment: '',
+					checkedRole: [],
+					roles: roleOptions
+				},
+				dialogModifyAcountFormVisible: false, // 修改账号对话框显示与隐藏
+				formModifyAcount: { // 修改账号对话框 数据
+					phone: '',
+					username: '',
+					comment: '',
+					checkedRole: [],
+					roles: roleOptions
+				},
+				dialog_delete_account: false,
+				delete_account: '',
+				formLabelWidth: '120px',
+				// 表格单元格样式
+				cell_style: {
+					color: '#1A202B',
+					'font-size': '14px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				// 表格头部样式
+				header_cell_style: {
+					background: '#E6ECFE',
+					color: '#1A202B',
+					'font-size': '16px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				tableData: [{
+					name: '王小虎',
+					phone: '18988888888',
+					role: '管理员',
+					comment: '此处是备注内容'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					role: '浏览员',
+					comment: '此处是备注内容'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					role: '管理员',
+					comment: '此处是备注内容'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					role: '管理员',
+					comment: '此处是备注内容'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					role: '管理员',
+					comment: '此处是备注内容'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					role: '管理员',
+					comment: '此处是备注内容'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					role: '管理员',
+					comment: '此处是备注内容'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					role: '管理员',
+					comment: '此处是备注内容'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					role: '管理员',
+					comment: '此处是备注内容'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					role: '管理员',
+					comment: '此处是备注内容'
+				}],
+				// 分页参数
+				pagination: {
+					pageSize: 10,
+					currentPage: 1,
+					total: 100
+				}
+			}
+		},
+		mounted() {
+			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
+		},
+		methods: {
+			/**
+			 * 删除账号
+			 * @param {Object} index
+			 * @param {Object} row
+			 */
+			delete_amount(index, row) {
+				console.log(row);
+				this.delete_account = row.name
+				this.dialog_delete_account = true
+			},
+			/**
+			 * 修改账号
+			 * @param {Object} index
+			 * @param {Object} row
+			 */
+			edit_amount(index, row) {
+				this.dialogModifyAcountFormVisible = true
+				this.formModifyAcount.phone = row.phone
+				this.formModifyAcount.username = row.name
+				this.formModifyAcount.checkedRole.push(row.role)
+				this.formModifyAcount.comment = row.comment
+			},
+			/**
+			 * 添加账号
+			 */
+			add_account() {
+				this.dialogAddAcountFormVisible = true
+			},
+			/**
+			 * 添加账号对话框关闭时清理数据
+			 */
+			add_account_dialog_close() {
+				this.formAddAcount = {
+					phone: '',
+					username: '',
+					comment: '',
+					checkedRole: [],
+					roles: roleOptions
+				}
+			},
+			/**
+			 * 添加账号对话框关闭时清理数据
+			 */
+			modify_account_dialog_close() {
+				this.formModifyAcount = {
+					phone: '',
+					username: '',
+					comment: '',
+					checkedRole: [],
+					roles: roleOptions
+				}
+			},
+			/**
+			 * currentPage 改变时会触发
+			 * @param {Object} val
+			 */
+			currentPageChange(val) {
+				console.log('当前页:' + val);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.app-container {
+		background-color: #EFF2F7;
+		padding: 10px;
+
+		.el-row {
+
+			.el-col {
+				padding: 10px;
+
+				.cell {
+					padding: 30px;
+					border-radius: 10px;
+					background-color: #FFFFFF;
+
+					.cell-title {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-bottom: 30px;
+						padding-bottom: 30px;
+						border-bottom: 1px solid #CCCCCC;
+
+						.title-left {
+							display: flex;
+							align-items: center;
+
+							.title {
+								font-size: 22px;
+								font-family: Microsoft YaHei-3970(82674968);
+								font-weight: bold;
+								color: #1A202B;
+							}
+
+							.title-detail {
+								margin-left: 50px;
+								font-size: 18px;
+								font-family: Microsoft YaHei-3970(82674968);
+								color: #1A202B;
+							}
+						}
+
+						.title-right {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+
+							.el-button {
+								width: 110px;
+								height: 46px;
+								background: #2B4CFE;
+								font-size: 18px;
+								color: #FFFFFF;
+								font-family: Microsoft YaHei-3970(82674968);
+								border-radius: 5px;
+							}
+
+							.el-button--warning {
+								background: #F88A64;
+							}
+						}
+					}
+
+					.cell-body {
+
+						.btn-table {
+							border-radius: 15px !important;
+							border-color: #5488FE;
+							background: #FFFFFF;
+							color: #5488FE;
+						}
+
+						.pagination-table {
+							display: flex;
+							justify-content: flex-end;
+							align-items: center;
+							height: 30px;
+							margin-top: 20px;
+							padding-right: 100px;
+
+							::v-deep .el-pagination {
+								display: flex;
+								justify-content: flex-end;
+								align-items: center;
+							}
+
+							::v-deep .el-pagination ul {
+								display: flex;
+
+							}
+
+							::v-deep .el-pagination button,
+							::v-deep .el-pagination li {
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								width: 50px;
+								height: 36px;
+								border: 1px solid #626262;
+								border-radius: 3px;
+								font-size: 14px;
+								margin: 0 5px;
+							}
+
+							::v-deep .el-pagination span {
+								margin-left: 10px;
+							}
+
+							::v-deep .el-pagination .el-pagination__jump {
+								font-size: 16px;
+							}
+
+							::v-deep .el-pagination .el-pagination__editor {
+								width: 50px;
+								height: 36px;
+								margin: 0 5px;
+							}
+
+							::v-deep .el-pagination .el-input__inner {
+								width: 50px;
+								height: 36px;
+								border: 1px solid #626262;
+								margin: -4px 0 0 0;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		::v-deep .el-dialog {
+			margin: 0 !important;
+			width: 600px;
+			height: 460px;
+			background: #FFFFFF;
+			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
+			border-radius: 10px;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			.el-dialog__header {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				height: 58px;
+				padding: 30px;
+				background: #E6EBFE;
+				border-radius: 10px 10px 0px 0px;
+				font-weight: bold;
+			}
+
+			.el-dialog__body {
+				padding-bottom: 0;
+
+				.el-form-item__label,
+				.el-form-item__content {
+					font-size: 16px;
+					font-family: Microsoft YaHei-3970(82674968);
+					color: #53575A;
+				}
+
+				.el-input__inner {
+					width: 180px;
+				}
+			}
+
+			// 删除对话框的样式
+			.del-account-body {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				height: 180px;
+
+				img {
+					width: 72px;
+				}
+
+				.del-account-body-txt {
+					height: 58px;
+					line-height: 58px;
+					font-size: 18px;
+					font-family: Microsoft YaHei-3970(82674968);
+					color: #333333;
+				}
+			}
+
+			.el-dialog__footer {
+				padding-bottom: 0 !important;
+				text-align: center;
+
+				.el-button.el-button--default {
+					width: 75px;
+					height: 40px;
+					border: 1px solid #2B4CFE;
+					border-radius: 6px;
+					font-size: 16px;
+					font-family: Microsoft YaHei-3970(82674968);
+					color: #2B4CFE;
+				}
+
+				.el-button.el-button--primary {
+					width: 75px;
+					height: 40px;
+					background: #2B4CFE;
+					border-radius: 6px;
+					font-size: 16px;
+					font-family: Microsoft YaHei-3970(82674968);
+					color: #FFFFFF;
+					margin-left: 60px;
+				}
+			}
+		}
+	}
+</style>
+
+<style>
+	.el-dialog-delete-account {
+		height: 300px !important;
+		width: 460px !important;
+	}
+
+	.el-dialog-delete-account .el-dialog__header {
+		display: none !important;
+	}
+</style>

src/views/consumptionRecord/index.vue

@@ -111,25 +111,6 @@
 				</div>
 			</el-col>
 		</el-row>
-		<el-dialog :title="form.status + '详情'" :visible.sync="dialogFormVisible" @close="dialog_close">
-			<el-form :model="form">
-				<el-form-item label="姓　名：" :label-width="formLabelWidth">
-					<div>{{form.name}}</div>
-				</el-form-item>
-				<el-form-item label="楼　栋：" :label-width="formLabelWidth">
-					<div>{{form.building}}</div>
-				</el-form-item>
-				<el-form-item label="楼　层：" :label-width="formLabelWidth">
-					<div>{{form.floor}}</div>
-				</el-form-item>
-				<el-form-item label="房间号：" :label-width="formLabelWidth">
-					<div>{{form.room}}</div>
-				</el-form-item>
-				<el-form-item label="设　备：" :label-width="formLabelWidth">
-					<div>{{form.device}}</div>
-				</el-form-item>
-			</el-form>
-		</el-dialog>
 	</div>
 </template>
 
@@ -141,16 +122,6 @@
 				total_consumption: 0.0.toFixed(2), // 总消费
 				total_number: 0, // 总交易笔数
 				search_datatime: '',
-				// 弹出对话框数据
-				dialogFormVisible: false,
-				form: {
-					status: '',
-					name: '',
-					building: '',
-					floor: '',
-					room: '',
-					device: ''
-				},
 				formLabelWidth: '120px',
 				// 表格单元格样式
 				cell_style: {

src/views/dashboard/index.vue

@@ -1,33 +0,0 @@
-<template>
-	<div class="dashboard-container">
-		<div class="dashboard-text">name: {{ name }}</div>
-	</div>
-</template>
-
-<script>
-	import {
-		mapGetters
-	} from 'vuex'
-
-	export default {
-		name: 'Dashboard',
-		computed: {
-			...mapGetters([
-				'name'
-			])
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.dashboard {
-		&-container {
-			margin: 30px;
-		}
-
-		&-text {
-			font-size: 30px;
-			line-height: 46px;
-		}
-	}
-</style>

src/views/form/index.vue

@@ -1,85 +0,0 @@
-<template>
-	<div class="app-container">
-		<el-form ref="form" :model="form" label-width="120px">
-			<el-form-item label="Activity name">
-				<el-input v-model="form.name" />
-			</el-form-item>
-			<el-form-item label="Activity zone">
-				<el-select v-model="form.region" placeholder="please select your zone">
-					<el-option label="Zone one" value="shanghai" />
-					<el-option label="Zone two" value="beijing" />
-				</el-select>
-			</el-form-item>
-			<el-form-item label="Activity time">
-				<el-col :span="11">
-					<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
-				</el-col>
-				<el-col :span="2" class="line">-</el-col>
-				<el-col :span="11">
-					<el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time"
-						style="width: 100%;" />
-				</el-col>
-			</el-form-item>
-			<el-form-item label="Instant delivery">
-				<el-switch v-model="form.delivery" />
-			</el-form-item>
-			<el-form-item label="Activity type">
-				<el-checkbox-group v-model="form.type">
-					<el-checkbox label="Online activities" name="type" />
-					<el-checkbox label="Promotion activities" name="type" />
-					<el-checkbox label="Offline activities" name="type" />
-					<el-checkbox label="Simple brand exposure" name="type" />
-				</el-checkbox-group>
-			</el-form-item>
-			<el-form-item label="Resources">
-				<el-radio-group v-model="form.resource">
-					<el-radio label="Sponsor" />
-					<el-radio label="Venue" />
-				</el-radio-group>
-			</el-form-item>
-			<el-form-item label="Activity form">
-				<el-input v-model="form.desc" type="textarea" />
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" @click="onSubmit">Create</el-button>
-				<el-button @click="onCancel">Cancel</el-button>
-			</el-form-item>
-		</el-form>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				form: {
-					name: '',
-					region: '',
-					date1: '',
-					date2: '',
-					delivery: false,
-					type: [],
-					resource: '',
-					desc: ''
-				}
-			}
-		},
-		methods: {
-			onSubmit() {
-				this.$message('submit!')
-			},
-			onCancel() {
-				this.$message({
-					message: 'cancel!',
-					type: 'warning'
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.line {
-		text-align: center;
-	}
-</style>

src/views/nested/menu1/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1">
-      <router-view />
-    </el-alert>
-  </div>
-</template>

src/views/nested/menu1/menu1-1/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-1" type="success">
-      <router-view />
-    </el-alert>
-  </div>
-</template>

src/views/nested/menu1/menu1-2/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2" type="success">
-      <router-view />
-    </el-alert>
-  </div>
-</template>

src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
-  </div>
-</template>

src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
-  </div>
-</template>

src/views/nested/menu1/menu1-3/index.vue

@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-3" type="success" />
-  </div>
-</template>

src/views/nested/menu2/index.vue

@@ -1,5 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 2" />
-  </div>
-</template>

src/views/rechargeRecord/index.vue

@@ -35,34 +35,6 @@
 									<el-option label="员工" value="beijing"></el-option>
 								</el-select>
 							</el-form-item>
-							<el-form-item label="">
-								<el-select v-model="formInline.category" placeholder="操作状态">
-									<el-option label="学生" value="shanghai"></el-option>
-									<el-option label="教工" value="beijing"></el-option>
-									<el-option label="员工" value="beijing"></el-option>
-								</el-select>
-							</el-form-item>
-							<el-form-item label="">
-								<el-select v-model="formInline.category" placeholder="楼栋">
-									<el-option label="学生" value="shanghai"></el-option>
-									<el-option label="教工" value="beijing"></el-option>
-									<el-option label="员工" value="beijing"></el-option>
-								</el-select>
-							</el-form-item>
-							<el-form-item label="">
-								<el-select v-model="formInline.category" placeholder="楼层">
-									<el-option label="学生" value="shanghai"></el-option>
-									<el-option label="教工" value="beijing"></el-option>
-									<el-option label="员工" value="beijing"></el-option>
-								</el-select>
-							</el-form-item>
-							<el-form-item label="">
-								<el-select v-model="formInline.category" placeholder="房间号">
-									<el-option label="学生" value="shanghai"></el-option>
-									<el-option label="教工" value="beijing"></el-option>
-									<el-option label="员工" value="beijing"></el-option>
-								</el-select>
-							</el-form-item>
 						</el-form>
 						<el-table :data="tableData" height="510" style="width: 100%" :cell-style="cell_style"
 							:header-cell-style="header_cell_style">
@@ -83,12 +55,7 @@
 							</el-table-column>
 							<el-table-column label="操作状态" align="center" width="150">
 								<template slot-scope="scope">
-									<el-button v-if="scope.row.status == '消费'" size="mini" class="btn-cell-blue"
-										@click="recharge(scope.$index, scope.row)">{{scope.row.status}}
-									</el-button>
-									<el-button v-else size="mini" class="btn-cell-black"
-										@click="recharge(scope.$index, scope.row)">{{scope.row.status}}
-									</el-button>
+									{{scope.row.status}}
 								</template>
 							</el-table-column>
 							<el-table-column label="到账金额（元）" align="center" width="200">
@@ -129,25 +96,6 @@
 				</div>
 			</el-col>
 		</el-row>
-		<el-dialog :title="form.status + '详情'" :visible.sync="dialogFormVisible" @close="dialog_close">
-			<el-form :model="form">
-				<el-form-item label="姓　名：" :label-width="formLabelWidth">
-					<div>{{form.name}}</div>
-				</el-form-item>
-				<el-form-item label="楼　栋：" :label-width="formLabelWidth">
-					<div>{{form.building}}</div>
-				</el-form-item>
-				<el-form-item label="楼　层：" :label-width="formLabelWidth">
-					<div>{{form.floor}}</div>
-				</el-form-item>
-				<el-form-item label="房间号：" :label-width="formLabelWidth">
-					<div>{{form.room}}</div>
-				</el-form-item>
-				<el-form-item label="设　备：" :label-width="formLabelWidth">
-					<div>{{form.device}}</div>
-				</el-form-item>
-			</el-form>
-		</el-dialog>
 	</div>
 </template>
 
@@ -159,28 +107,18 @@
 				total_recharge: 0.0.toFixed(2), // 总充值
 				total_number: 0, // 总交易笔数
 				search_datatime: '',
-				// 弹出对话框数据
-				dialogFormVisible: false,
-				form: {
-					status: '',
-					name: '',
-					building: '',
-					floor: '',
-					room: '',
-					device: ''
-				},
 				formLabelWidth: '120px',
 				// 表格单元格样式
 				cell_style: {
 					color: '#1A202B',
-					'font-size': '16px',
+					'font-size': '14px',
 					'font-family': 'Microsoft YaHei-3970(82674968)'
 				},
 				// 表格头部样式
 				header_cell_style: {
 					background: '#E6ECFE',
 					color: '#1A202B',
-					'font-size': '18px',
+					'font-size': '16px',
 					'font-family': 'Microsoft YaHei-3970(82674968)'
 				},
 				// 表单数据
@@ -208,7 +146,7 @@
 					floor: '2F',
 					room: '201',
 					device: '2P',
-					status: '消费',
+					status: '充值',
 					arrivalAmount: 100.0.toFixed(2),
 					accountBalance: 100.01.toFixed(2),
 					payStatus: '支付失败',
@@ -234,7 +172,7 @@
 					floor: '2F',
 					room: '201',
 					device: '2P',
-					status: '消费',
+					status: '充值',
 					arrivalAmount: 100.0.toFixed(2),
 					accountBalance: 100.01.toFixed(2),
 					payStatus: '支付失败',
@@ -260,7 +198,7 @@
 					floor: '2F',
 					room: '201',
 					device: '2P',
-					status: '消费',
+					status: '充值',
 					arrivalAmount: 100.0.toFixed(2),
 					accountBalance: 100.01.toFixed(2),
 					payStatus: '支付失败',
@@ -286,7 +224,7 @@
 					floor: '2F',
 					room: '201',
 					device: '2P',
-					status: '消费',
+					status: '充值',
 					arrivalAmount: 100.0.toFixed(2),
 					accountBalance: 100.01.toFixed(2),
 					payStatus: '支付失败',
@@ -312,7 +250,7 @@
 					floor: '2F',
 					room: '201',
 					device: '2P',
-					status: '消费',
+					status: '充值',
 					arrivalAmount: 100.0.toFixed(2),
 					accountBalance: 100.01.toFixed(2),
 					payStatus: '支付失败',
@@ -334,17 +272,6 @@
 			btn_search() {
 				console.log('查询');
 			},
-			// 对话框初始化
-			recharge(index, row) {
-				// console.log(index, row);
-				this.dialogFormVisible = true
-				this.form.status = row.status
-				this.form.name = row.name
-				this.form.building = row.building
-				this.form.floor = row.floor
-				this.form.room = row.room
-				this.form.device = row.device
-			},
 			// 对话框关闭时清理数据
 			dialog_close() {
 				this.form = {}
@@ -458,12 +385,7 @@
 						}
 
 						.txt-cell-red {
-							margin: 0;
-							display: inline-block;
-							background: #F56C6C;
-							color: #FFFFFF;
-							padding: 5px 10px;
-							border-radius: 20px;
+							color: #F56C6C;
 							font-size: 16px;
 						}
 

src/views/systemSet/index.vue

@@ -0,0 +1,154 @@
+<template>
+	<div class="app-container">
+		<el-row>
+			<el-col :span="24">
+				<div class="cell">
+					<div class="cell-title">
+						<div class="title-left">
+							<div class="title">系统设置</div>
+						</div>
+					</div>
+					<div class="cell-body">
+						<el-row>
+							<el-col :span="24">
+								<div>空调开启半小时不足1小时为</div>
+								<el-input placeholder="请输入金额" v-model="less_than_an_hour"></el-input>
+								<div>元</div>
+							</el-col>
+						</el-row>
+						<el-row>
+							<el-col :span="24">
+								<div>空调开启每小时为</div>
+								<el-input placeholder="请输入金额" v-model="per_hour"></el-input>
+								<div>元</div>
+							</el-col>
+						</el-row>
+						<el-row>
+							<el-col :span="24">
+								<div>自动扣款</div>
+								<el-switch v-model="withhold" active-color="#2B4CFE">
+								</el-switch>
+							</el-col>
+						</el-row>
+						<el-row>
+							<el-col :span="24">
+								<div>账户余额少于</div>
+								<el-input placeholder="请输入金额" v-model="balance_less_than"></el-input>
+								<div>元，不能开启空调</div>
+							</el-col>
+						</el-row>
+						<el-row>
+							<el-col :span="24">
+								<div>每隔</div>
+								<el-input placeholder="请输入小时数" v-model="hour"></el-input>
+								<div>小时，系统自动发送通知给操作员</div>
+							</el-col>
+						</el-row>
+						<el-row>
+							<el-col :span="24">
+								<div>每天</div>
+								<el-input placeholder="请输入时间" v-model="every_day"></el-input>
+								<div>为截止时间，系统自动发送通知给操作员</div>
+							</el-col>
+						</el-row>
+						<el-row>
+							<el-col :span="24">
+								<div>使用问题联系方式</div>
+								<el-input class="contact-style" placeholder="请输入手机号" v-model="contact"></el-input>
+							</el-col>
+						</el-row>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				less_than_an_hour: 3, // 半小时不足1小时
+				per_hour: 5, // 每小时
+				withhold: true,
+				balance_less_than: 5,
+				hour: 1,
+				every_day: '19:00',
+				contact: '13677985689'
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.app-container {
+		background-color: #EFF2F7;
+		padding: 10px;
+
+		.el-row {
+
+			.el-col {
+				padding: 10px;
+
+				.cell {
+					padding: 30px;
+					border-radius: 10px;
+					background-color: #FFFFFF;
+
+					.cell-title {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-bottom: 30px;
+						padding-bottom: 30px;
+						border-bottom: 1px solid #CCCCCC;
+
+						.title {
+							font-size: 22px;
+							font-family: Microsoft YaHei-3970(82674968);
+							font-weight: bold;
+							color: #1A202B;
+						}
+					}
+
+					.cell-body {
+						height: 630px;
+
+						.el-row {
+
+							.el-col {
+								display: flex;
+								align-items: center;
+								white-space: nowrap;
+
+								::v-deep .el-input,
+								::v-deep .el-input__inner {
+									width: 90px;
+									text-align: center;
+									font-size: 18px;
+									font-family: Microsoft YaHei-3970(82674968);
+									color: #46515E;
+								}
+
+								::v-deep .el-input {
+									margin: 0 10px;
+								}
+
+								::v-deep .contact-style.el-input .el-input__inner {
+									width: 150px;
+								}
+
+								.el-switch {
+									margin: 0 10px;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

src/views/table/index.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-table
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="Loading"
-      border
-      fit
-      highlight-current-row
-    >
-      <el-table-column align="center" label="ID" width="95">
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="Status" width="110" align="center">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { getList } from '@/api/table'
-
-export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'gray',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listLoading: true
-    }
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    fetchData() {
-      this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
-    }
-  }
-}
-</script>

src/views/tree/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
-
-    <el-tree
-      ref="tree2"
-      :data="data2"
-      :props="defaultProps"
-      :filter-node-method="filterNode"
-      class="filter-tree"
-      default-expand-all
-    />
-
-  </div>
-</template>
-
-<script>
-export default {
-
-  data() {
-    return {
-      filterText: '',
-      data2: [{
-        id: 1,
-        label: 'Level one 1',
-        children: [{
-          id: 4,
-          label: 'Level two 1-1',
-          children: [{
-            id: 9,
-            label: 'Level three 1-1-1'
-          }, {
-            id: 10,
-            label: 'Level three 1-1-2'
-          }]
-        }]
-      }, {
-        id: 2,
-        label: 'Level one 2',
-        children: [{
-          id: 5,
-          label: 'Level two 2-1'
-        }, {
-          id: 6,
-          label: 'Level two 2-2'
-        }]
-      }, {
-        id: 3,
-        label: 'Level one 3',
-        children: [{
-          id: 7,
-          label: 'Level two 3-1'
-        }, {
-          id: 8,
-          label: 'Level two 3-2'
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      }
-    }
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree2.filter(val)
-    }
-  },
-
-  methods: {
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    }
-  }
-}
-</script>
-