用户管理基本完成

src/styles/sidebar.scss

@@ -39,7 +39,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 50px);
+        height: calc(100% - 90px);
       }
     }
 
@@ -51,6 +51,7 @@
       display: inline-block;
       width: 100%;
       overflow: hidden;
+	  margin: 0 auto;
     }
 
     .svg-icon {
@@ -65,7 +66,8 @@
     .el-menu {
       border: none;
       height: 100%;
-      width: 100% !important;
+      width: 93% !important;
+	  margin: 0 auto;
 	  
 	  li {
 		  font-size: 20px;
@@ -97,11 +99,6 @@
 	  // border-radius: 10px !important;
 	  // background: linear-gradient(0deg, #2B4CFE, #3E6EFF) !important;
     }
-	// 添加
-	.is-active {
-		border-radius: 10px !important;
-		background: linear-gradient(0deg, #2B4CFE, #3E6EFF) !important;
-	}
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
@@ -112,6 +109,16 @@
         background-color: $subMenuHover !important;
       }
     }
+	// 添加
+	.router-link-exact-active.router-link-active {
+		border-radius: 10px !important;
+		background: linear-gradient(0deg, #2B4CFE, #3E6EFF) !important;
+		
+		.el-menu-item.is-active {
+			border-radius: 10px !important;
+			background: linear-gradient(0deg, #2B4CFE, #3E6EFF) !important;
+		}
+	}
   }
 
   .hideSidebar {

src/views/index/index.vue

@@ -13,7 +13,7 @@
 			</el-col>
 			<el-col :span="8">
 				<div class="cell cell-row1">
-					<div class="cell-title">账户余额</div>
+					<div class="cell-title">本月充值</div>
 					<div class="cell-time">截止时间为2022/06/22 17:20:20</div>
 					<div class="cell-bottom">
 						<div class="cell-bottom-amount">5869.00</div>
@@ -23,7 +23,7 @@
 			</el-col>
 			<el-col :span="8">
 				<div class="cell cell-row1">
-					<div class="cell-title">账户余额</div>
+					<div class="cell-title">本月消费</div>
 					<div class="cell-time">截止时间为2022/06/22 17:20:20</div>
 					<div class="cell-bottom">
 						<div class="cell-bottom-amount">5869.00</div>
@@ -35,12 +35,17 @@
 		<el-row>
 			<el-col :span="8">
 				<div class="cell">
-					<el-card class="box-card">
+					<el-card class="box-card" style="position: relative;">
 						<div slot="header" class="clearfix">
 							<img src="../../icons/images/index/zoushi.png" alt="">
 							<span>用电消费走势图</span>
 						</div>
-						<div id="main-line" class="line-echart"></div>
+						<el-select v-model="value" placeholder="请选择" class="select-year">
+							<el-option v-for="item in options" :key="item.value" :label="item.label"
+								:value="item.value">
+							</el-option>
+						</el-select>
+						<div id="main-echart" class="line-echart"></div>
 					</el-card>
 				</div>
 			</el-col>
@@ -51,9 +56,19 @@
 							<img src="../../icons/images/index/yujing.png" alt="">
 							<span>超时预警</span>
 						</div>
-						<div v-for="o in 4" :key="o" class="text item">
-							{{'列表内容 ' + o }}
-						</div>
+						<el-table :data="yujing_tableData" height="350" stripe :cell-style="cell_style"
+							:header-cell-style="header_cell_style" style="width: 100%">
+							<el-table-column prop="deviceId" label="设备号" align="center">
+							</el-table-column>
+							<el-table-column prop="warningTime" label="告警时间" align="center">
+							</el-table-column>
+							<el-table-column prop="serviceTime" label="使用时长" align="center">
+							</el-table-column>
+							<el-table-column prop="contact" label="联系方式" align="center">
+							</el-table-column>
+							<el-table-column prop="operator" label="操作人" align="center">
+							</el-table-column>
+						</el-table>
 					</el-card>
 				</div>
 			</el-col>
@@ -66,9 +81,13 @@
 							<img src="../../icons/images/index/yewu.png" alt="">
 							<span>实时业务信息</span>
 						</div>
-						<div v-for="o in 4" :key="o" class="text item">
-							{{'列表内容 ' + o }}
-						</div>
+						<el-table :data="yewu_tableData" height="350" stripe :cell-style="handle_cell_style"
+							:header-cell-style="header_cell_style" style="width: 100%" :show-header="false">
+							<el-table-column prop="desc" label="说明" align="left">
+							</el-table-column>
+							<el-table-column prop="dataTime" label="时间" align="right">
+							</el-table-column>
+						</el-table>
 					</el-card>
 				</div>
 			</el-col>
@@ -86,9 +105,21 @@
 								<div class="card-desc">A/B=已开机/总设备</div>
 							</div>
 						</div>
-						<div v-for="o in 4" :key="o" class="text item">
-							{{'列表内容 ' + o }}
-						</div>
+						<el-table :data="zhuangtai_tableData" height="350" stripe :cell-style="cell_style"
+							:header-cell-style="header_cell_style" style="width: 100%">
+							<el-table-column prop="floor" label="楼层" align="center">
+							</el-table-column>
+							<el-table-column prop="scienceBuilding" label="科技楼" align="center">
+							</el-table-column>
+							<el-table-column prop="teachBuilding" label="教学楼" align="center">
+							</el-table-column>
+							<el-table-column prop="adminBuilding" label="行政楼" align="center">
+							</el-table-column>
+							<el-table-column prop="stuCenter" label="大学生活动中心" align="center">
+							</el-table-column>
+							<el-table-column prop="library" label="图书馆" align="center">
+							</el-table-column>
+						</el-table>
 					</el-card>
 				</div>
 			</el-col>
@@ -111,50 +142,188 @@
 	} from 'echarts/charts';
 
 	import {
-		UniversalTransition
-	} from 'echarts/features';
-
-	import {
 		CanvasRenderer
 	} from 'echarts/renderers';
 
 	echarts.use([
-		TitleComponent,
-		ToolboxComponent,
-		TooltipComponent,
-		GridComponent,
-		LegendComponent,
-		LineChart,
-		CanvasRenderer,
-		UniversalTransition
+		TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart,
+		CanvasRenderer
 	]);
 
 	export default {
-		mounted() {
-			this.initCharts();
-		},
-		methods: {
-			initCharts() {
-				// 基于准备好的dom，初始化echarts实例
-				var myChart = echarts.init(document.getElementById('main-line'));
-				// 绘制图表
-				this.setOption(myChart)
-			},
-			setOption(myChart) {
-				myChart.setOption({
+		data() {
+			return {
+				// 表格单元格样式
+				cell_style: {
+					color: '#1A202B',
+					'font-size': '16px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				// 表格头部样式
+				header_cell_style: {
+					background: '#E6ECFE',
+					color: '#1A202B',
+					'font-size': '18px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				options: [{
+					value: '0',
+					label: '2022年'
+				}, {
+					value: '1',
+					label: '2021年'
+				}],
+				value: '0', // 下拉列表的值
+				// 预警表格数据
+				yujing_tableData: [{
+					deviceId: '1.5P挂机01',
+					warningTime: '2022-06-23 17:15:15',
+					operator: '朱秀平',
+					serviceTime: '05:25:26',
+					contact: '13688955689'
+				}, {
+					deviceId: '1.5P挂机01',
+					warningTime: '2022-06-23 17:15:15',
+					operator: '朱秀平',
+					serviceTime: '05:25:26',
+					contact: '13688955689'
+				}, {
+					deviceId: '1.5P挂机01',
+					warningTime: '2022-06-23 17:15:15',
+					operator: '朱秀平',
+					serviceTime: '05:25:26',
+					contact: '13688955689'
+				}, {
+					deviceId: '1.5P挂机01',
+					warningTime: '2022-06-23 17:15:15',
+					operator: '朱秀平',
+					serviceTime: '05:25:26',
+					contact: '13688955689'
+				}, {
+					deviceId: '1.5P挂机01',
+					warningTime: '2022-06-23 17:15:15',
+					operator: '朱秀平',
+					serviceTime: '05:25:26',
+					contact: '13688955689'
+				}, {
+					deviceId: '1.5P挂机01',
+					warningTime: '2022-06-23 17:15:15',
+					operator: '朱秀平',
+					serviceTime: '05:25:26',
+					contact: '13688955689'
+				}, {
+					deviceId: '1.5P挂机01',
+					warningTime: '2022-06-23 17:15:15',
+					operator: '朱秀平',
+					serviceTime: '05:25:26',
+					contact: '13688955689'
+				}],
+				// 业务表格数据
+				yewu_tableData: [{
+					desc: '朱秀平电费充值',
+					dataTime: '2022-06-23 17:15:15'
+				}, {
+					desc: '朱秀平电费充值',
+					dataTime: '2022-06-23 17:15:15'
+				}, {
+					desc: '朱秀平电费充值',
+					dataTime: '2022-06-23 17:15:15'
+				}, {
+					desc: '朱秀平电费充值',
+					dataTime: '2022-06-23 17:15:15'
+				}, {
+					desc: '朱秀平电费充值',
+					dataTime: '2022-06-23 17:15:15'
+				}, {
+					desc: '朱秀平电费充值',
+					dataTime: '2022-06-23 17:15:15'
+				}, {
+					desc: '朱秀平电费充值',
+					dataTime: '2022-06-23 17:15:15'
+				}, {
+					desc: '朱秀平电费充值',
+					dataTime: '2022-06-23 17:15:15'
+				}],
+				// 状态表格数据
+				zhuangtai_tableData: [{
+					floor: '1F',
+					scienceBuilding: '26/56',
+					teachBuilding: '26/56',
+					adminBuilding: '26/56',
+					stuCenter: '26/56',
+					library: '26/56'
+				}, {
+					floor: '1F',
+					scienceBuilding: '26/56',
+					teachBuilding: '26/56',
+					adminBuilding: '26/56',
+					stuCenter: '26/56',
+					library: '26/56'
+				}, {
+					floor: '1F',
+					scienceBuilding: '26/56',
+					teachBuilding: '26/56',
+					adminBuilding: '26/56',
+					stuCenter: '26/56',
+					library: '26/56'
+				}, {
+					floor: '1F',
+					scienceBuilding: '26/56',
+					teachBuilding: '26/56',
+					adminBuilding: '26/56',
+					stuCenter: '26/56',
+					library: '26/56'
+				}, {
+					floor: '1F',
+					scienceBuilding: '26/56',
+					teachBuilding: '26/56',
+					adminBuilding: '26/56',
+					stuCenter: '26/56',
+					library: '26/56'
+				}, {
+					floor: '1F',
+					scienceBuilding: '26/56',
+					teachBuilding: '26/56',
+					adminBuilding: '26/56',
+					stuCenter: '26/56',
+					library: '26/56'
+				}, {
+					floor: '1F',
+					scienceBuilding: '26/56',
+					teachBuilding: '26/56',
+					adminBuilding: '26/56',
+					stuCenter: '26/56',
+					library: '26/56'
+				}, {
+					floor: '1F',
+					scienceBuilding: '26/56',
+					teachBuilding: '26/56',
+					adminBuilding: '26/56',
+					stuCenter: '26/56',
+					library: '26/56'
+				}, {
+					floor: '1F',
+					scienceBuilding: '26/56',
+					teachBuilding: '26/56',
+					adminBuilding: '26/56',
+					stuCenter: '26/56',
+					library: '26/56'
+				}],
+				// 折线图数据
+				option: {
 					tooltip: {
 						trigger: 'axis'
 					},
 					legend: {
 						y: 'bottom',
 						x: 'center',
-						data: ['Email', 'Union Ads', 'Video Ads', 'Direct']
+						data: ['1.5P', '2P', '3P', '天花机']
 					},
 					grid: {
 						top: '10%',
 						left: '3%',
-						right: '4%',
-						bottom: '6%',
+						right: '3%',
+						bottom: '8%',
 						containLabel: true
 					},
 					toolbox: {
@@ -175,31 +344,67 @@
 						type: 'value'
 					},
 					series: [{
-							name: 'Email',
+							name: '1.5P',
 							type: 'line',
 							stack: 'Total',
 							data: [120, 132, 101, 134, 90, 230, 210]
 						},
 						{
-							name: 'Union Ads',
+							name: '2P',
 							type: 'line',
 							stack: 'Total',
 							data: [220, 182, 191, 234, 290, 330, 310]
 						},
 						{
-							name: 'Video Ads',
+							name: '3P',
 							type: 'line',
 							stack: 'Total',
 							data: [150, 232, 201, 154, 190, 330, 410]
 						},
 						{
-							name: 'Search Engine',
+							name: '天花机',
 							type: 'line',
 							stack: 'Total',
 							data: [820, 932, 901, 934, 1290, 1330, 1320]
 						}
 					]
-				});
+				},
+
+			}
+		},
+		mounted() {
+			this.initCharts();
+		},
+		methods: {
+			/**
+			 * 初始化折线图
+			 */
+			initCharts() {
+				// 基于准备好的dom，初始化echarts实例
+				var myChart = echarts.init(document.getElementById('main-echart'));
+				// 绘制图表
+				this.setOption(myChart)
+			},
+			/**
+			 * 向折线图赋值，开始展示数据
+			 * @param {Object} myChart
+			 */
+			setOption(myChart) {
+				myChart.setOption(this.option);
+			},
+			// 表格某些列样式改变
+			handle_cell_style({
+				row,
+				column,
+				rowIndex,
+				columnIndex
+			}) {
+				if (columnIndex === 1) {
+					// 指定列号
+					return "font-size:14px; color:#808080"
+				} else {
+					return "font-size:18px; color:#292B34"
+				}
 			}
 		}
 	}
@@ -325,6 +530,14 @@
 						}
 					}
 
+					.select-year {
+						position: absolute;
+						right: 20px;
+						top: 68px;
+						width: 100px;
+						z-index: 9999;
+					}
+
 					.line-echart {
 						width: 450px;
 						height: 350px;

src/views/login/index.vue

@@ -32,7 +32,7 @@
 
 				<el-button :loading="loading" type="primary" class="btn_submit" @click.native.prevent="handleLogin">登录
 				</el-button>
-				
+
 				<el-link type="primary" class="btn_link" :underline="false" href="#">修改密码</el-link>
 
 			</el-form>
@@ -246,7 +246,7 @@
 					font-size: 22px;
 					margin-top: 10px;
 				}
-				
+
 				.btn_link {
 					width: 100%;
 					margin-top: 10px;

src/views/user/index.vue

@@ -1,15 +1,323 @@
 <template>
 	<div class="app-container">
-		user
+		<el-row>
+			<el-col :span="24">
+				<div class="cell">
+					<div class="cell-title">
+						<div class="title">用户管理</div>
+						<div class="title-right">
+							<el-button type="primary">导出表单</el-button>
+							<el-button type="warning">新增用户</el-button>
+						</div>
+					</div>
+					<div class="cell-body">
+						<el-form :inline="true" :model="formInline" class="demo-form-inline">
+							<el-form-item label="关键字：">
+								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证"></el-input>
+							</el-form-item>
+							<el-form-item>
+								<el-button type="warning" @click="onSubmit">查询</el-button>
+							</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">
+							<el-table-column label="序号" align="center" width="100">
+								<template slot-scope="scope">
+									<span style="margin-left: 10px">{{scope.$index + 1}}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="姓名" align="center" width="100">
+								<template slot-scope="scope">
+									<span style="margin-left: 10px">{{ scope.row.name }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="手机" align="center" width="180">
+								<template slot-scope="scope">
+									<span style="margin-left: 10px">{{ scope.row.phone }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="身份证" align="center">
+								<template slot-scope="scope">
+									<span style="margin-left: 10px">{{ scope.row.identityCard }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="类别" align="center" width="100">
+								<template slot-scope="scope">
+									<span style="margin-left: 10px">{{ scope.row.category }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="年级" align="center" width="100">
+								<template slot-scope="scope">
+									<span style="margin-left: 10px">{{ scope.row.grade }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="账户余额（元）" align="center" width="180">
+								<template slot-scope="scope">
+									<span style="margin-left: 10px">{{ scope.row.accountBalance }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="备注" align="center">
+								<template slot-scope="scope">
+									<span style="margin-left: 10px">{{ 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="handleEdit(scope.$index, scope.row)">充值</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+						<div class="pagination-table">
+							<el-pagination @current-change="handleCurrentChange"
+								:current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
+								layout="prev, pager, next, jumper" :total="pagination.total">
+							</el-pagination>
+							<div class="ye">页</div>
+						</div>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
 	</div>
 </template>
 
 <script>
 	export default {
-		
+		data() {
+			return {
+				// 表格单元格样式
+				cell_style: {
+					color: '#1A202B',
+					'font-size': '16px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				// 表格头部样式
+				header_cell_style: {
+					background: '#E6ECFE',
+					color: '#1A202B',
+					'font-size': '18px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				// 表单数据
+				formInline: {
+					user: '',
+					category: ''
+				},
+				tableData: [{
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}, {
+					name: '王小虎',
+					phone: '18988888888',
+					identityCard: '360123456789012345',
+					category: '学生',
+					grade: '大一',
+					accountBalance: 100.01,
+					comment: '充值100元'
+				}],
+				// 分页参数
+				pagination: {
+					pageSize: 10,
+					currentPage: 1,
+					total: 100
+				}
+			}
+		},
+		mounted() {
+			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
+		},
+		methods: {
+			handleEdit(index, row) {
+				console.log(index, row);
+			},
+			// currentPage 改变时会触发
+			handleCurrentChange(val) {
+				console.log(`当前页: ${val}`);
+			}
+		}
 	}
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+	.app-container {
+		background-color: #EFF2F7;
+		padding: 10px;
 
-</style>
+		.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;
+					}
+
+					.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 {
+
+					.el-button--warning {
+						background: #F88A64;
+					}
+
+					.btn-table {
+						border-radius: 15px !important;
+						border-color: #5488FE;
+						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 button,
+						::v-deep .el-pagination li {
+							width: 33px;
+							height: 33px;
+							border: 1px solid #626262;
+							border-radius: 3px;
+							font-size: 14px;
+							margin: 5px;
+						}
+
+						::v-deep .el-pagination span {
+							margin-left: 10px;
+							padding-top: 8px;
+							font-size: 14px;
+						}
+
+						.ye {
+							font-size: 15px;
+							color: #808080;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>