完善控制台

src/layout/index.vue

@@ -55,8 +55,8 @@
 		<header class="adminui-header">
 			<div class="adminui-header-left">
 				<div class="logo-bar">
-<!--					<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">-->
+					<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">
-					<span>{{ $CONFIG.APP_NAME }}</span>
+<!--					<span>{{ $CONFIG.APP_NAME }}</span>-->
 				</div>
 				<Topbar v-if="!ismobile"></Topbar>
 			</div>
@@ -79,7 +79,6 @@
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
 			<div class="aminui-body el-container">
-<!--				<Topbar v-if="!ismobile"></Topbar>-->
 <!--				<Tags v-if="!ismobile && layoutTags"></Tags>-->
 				<div class="adminui-main" id="adminui-main">
 					<router-view v-slot="{ Component }">

src/style/home.scss

@@ -1,7 +1,7 @@
 .cardBox{
 	background: #fff;
 	height: 100%;
-	border-radius: 8px;
+	border-radius: 6px;
 	padding: 12px;
 	box-sizing: border-box;
 	display: flex;

src/views/home/console/components/bar.vue

@@ -0,0 +1,113 @@
+<template>
+	<div class="barBox">
+		<scEcharts ref="c2" :option="option"></scEcharts>
+	</div>
+</template>
+
+<script>
+import scEcharts from '@/components/scEcharts';
+export default {
+	name: "barBox",
+	components:{
+		scEcharts
+	},
+	data(){
+		return{
+			option:{
+				tooltip: {
+					trigger: 'axis'
+				},
+				grid: {
+					left: '1%',
+					right: '5%',
+					bottom: '3%',
+					top: "3%",
+					containLabel: true
+				},
+				xAxis: {
+					boundaryGap: true,
+					type: 'category',
+					axisLine:{
+						show:true,
+						lineStyle:{
+							color:['rgba(255,255,255,0.9)']
+						}
+					},
+					axisTick:{
+						show:false,
+					},
+					data:['周一','周二','周三','周四','周四','周五','周六','周日']
+				},
+				yAxis: [{
+					type: 'value',
+					name: '',
+					axisLine:{
+						show:true,
+						lineStyle:{
+							color:['rgba(255,255,255,0.9)']
+						}
+					},
+					axisLabel:{
+						show:true,
+						color:'#fff',
+					},
+					axisTick:{
+						show:false,
+					},
+					splitLine:{
+						show:true,
+						lineStyle:{
+							color:['rgba(255,255,255,0.06)']
+						}
+					}
+
+				}],
+				series: [
+					{
+						name: '用电',
+						type: 'bar',
+						smooth:true,
+						symbol: 'none',
+						labelLine:{
+							show:false,
+							smooth:false,
+						},
+						lineStyle: {
+							width: 2,
+						},
+						areaStyle: {
+							opacity: 0.4,
+						},
+						data: [123,646,577,323,687,189,263,462]
+					},
+					{
+						name: '用气',
+						type: 'bar',
+						smooth:'true',
+						symbol: 'none',
+						labelLine:{
+						},
+						lineStyle: {
+							width: 2,
+						},
+						areaStyle: {
+							opacity: 0.4,
+						},
+						data: [123,246,577,623,267,189,563,246]
+					},
+				],
+			},
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.barBox{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
+</style>

src/views/home/console/components/point.vue

@@ -0,0 +1,63 @@
+<template>
+	<view class="pointBox">
+		<scEcharts ref="c4" :option="option"></scEcharts>
+	</view>
+</template>
+
+<script>
+import scEcharts from '@/components/scEcharts';
+export default {
+	name: "point",
+	components:{
+		scEcharts
+	},
+	data(){
+		return{
+			option:{
+				xAxis: {},
+				yAxis: {},
+				series: [
+					{
+						symbolSize: 20,
+						data: [
+							[10.0, 8.04],
+							[8.07, 6.95],
+							[13.0, 7.58],
+							[9.05, 8.81],
+							[11.0, 8.33],
+							[14.0, 7.66],
+							[13.4, 6.81],
+							[10.0, 6.33],
+							[14.0, 8.96],
+							[12.5, 6.82],
+							[9.15, 7.2],
+							[11.5, 7.2],
+							[3.03, 4.23],
+							[12.2, 7.83],
+							[2.02, 4.47],
+							[1.05, 3.33],
+							[4.05, 4.96],
+							[6.03, 7.24],
+							[12.0, 6.26],
+							[12.0, 8.84],
+							[7.08, 5.82],
+							[5.02, 5.68]
+						],
+						type: 'scatter'
+					}
+				]
+			}
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.pointBox{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
+</style>

src/views/home/console/components/progress.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="gaugeView">
+		<scEcharts ref="c1" :option="option"></scEcharts>
+	</div>
+</template>
+
+<script>
+import scEcharts from '@/components/scEcharts';
+export default {
+	name: "progressBox",
+	components:{
+		scEcharts
+	},
+	data(){
+		return{
+			option:{
+				series: [
+					{
+						type: 'gauge',
+						startAngle: 90,
+						endAngle: -270,
+						radius: '86%',
+						pointer: {
+							show: false
+						},
+						progress: {
+							show: true,
+							overlap: false,
+							roundCap: true,
+							clip: false,
+							itemStyle: {
+								borderWidth: 1,
+							}
+						},
+						axisLine: {
+							show:true,
+							lineStyle: {
+								width: 12,
+							}
+						},
+						splitLine: {
+							show: false,
+							distance: 0,
+							length: 10
+						},
+						axisTick: {
+							show: false
+						},
+						axisLabel: {
+							show: false,
+							distance: 50
+						},
+						itemStyle:{
+							color:{
+								type: 'linear',
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								colorStops: [{
+									offset: 0,
+									color: '#1367C1'
+								}, {
+									offset: 1,
+									color: 'rgba(19,103,193,0.3)'
+								}],
+								global: false
+							},
+							shadowColor:'rgba(19,103,193,0.3)'
+						},
+						data: [
+							{
+								value: 46,
+								name: '',
+								detail: {
+									valueAnimation: true,
+									offsetCenter: ['0%', '0']
+								}
+							},
+						],
+						title: {
+							fontSize: 14
+						},
+						detail: {
+							fontSize: 18,
+							color: "#1367C1",
+							borderColor: '#ddd',
+							borderRadius: 20,
+							borderWidth: 0,
+							formatter: '{value}%'
+						}
+					}
+				]
+			},
+
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.gaugeView{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
+</style>

src/views/home/console/components/ring.vue

@@ -0,0 +1,75 @@
+<template>
+	<div class="ringBox">
+		<scEcharts ref="c3" :option="option"></scEcharts>
+	</div>
+</template>
+
+<script>
+import scEcharts from '@/components/scEcharts';
+export default {
+	name: "ring",
+	components:{
+		scEcharts
+	},
+	data(){
+		return{
+			option:{
+				tooltip: {
+					trigger: 'item'
+				},
+				grid: {
+
+				},
+				legend: {
+					bottom: '2%',
+					left: 'center'
+				},
+				series: [
+					{
+						name: 'Access From',
+						type: 'pie',
+						radius: ['40%', '70%'],
+						avoidLabelOverlap: false,
+						itemStyle: {
+							borderRadius: 10,
+							borderColor: '#fff',
+							borderWidth: 2
+						},
+						label: {
+							show: false,
+							position: 'center'
+						},
+						emphasis: {
+							label: {
+								show: true,
+								fontSize: 20,
+								fontWeight: 'bold'
+							}
+						},
+						labelLine: {
+							show: false
+						},
+						data: [
+							{ value: 1048, name: 'Search Engine' },
+							{ value: 735, name: 'Direct' },
+							{ value: 580, name: 'Email' },
+							{ value: 484, name: 'Union Ads' },
+							{ value: 300, name: 'Video Ads' }
+						]
+					}
+				]
+			}
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.ringBox{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
+</style>

src/views/home/console/index.vue

@@ -3,7 +3,7 @@
 		<div class="consoleView">
 			<div class="headerBox">
 				<el-row class="colRow" :gutter="20">
-					<el-col :span="10" :md="10" :sm="24" :xs="24">
+					<el-col class="leftCol" :span="10" :md="10" :sm="24" :xs="24">
 						<div class="cardBox">
 							<div class="cardTitle">快捷功能入口</div>
 							<div class="cardBody inletView">
@@ -24,7 +24,7 @@
 							</div>
 						</div>
 					</el-col>
-					<el-col :span="10" :md="10" :sm="24" :xs="24">
+					<el-col class="middleCol" :span="10" :md="10" :sm="24" :xs="24">
 						<div class="cardBox">
 							<div class="cardTitle">待办消息</div>
 							<div class="cardBody">
@@ -42,11 +42,11 @@
 							</div>
 						</div>
 					</el-col>
-					<el-col :span="4" :md="4" :sm="24" :xs="24">
+					<el-col class="rightCol" :span="4" :md="4" :sm="24" :xs="24">
 						<div class="cardBox">
 							<div class="cardTitle">不良率</div>
 							<div class="cardBody">
-
+								<progressBox />
 							</div>
 						</div>
 					</el-col>
@@ -54,7 +54,7 @@
 			</div>
 			<div class="middleBox">
 				<el-row class="colRow" :gutter="20">
-					<el-col :span="16" :md="16" :sm="24" :xs="24">
+					<el-col class="leftCol" :span="16" :md="16" :sm="24" :xs="24">
 						<div class="cardBox">
 							<div class="cardTitle">数据简报</div>
 							<div class="cardBody briefing">
@@ -73,11 +73,11 @@
 							</div>
 						</div>
 					</el-col>
-					<el-col :span="8" :md="8" :sm="24" :xs="24">
+					<el-col class="rightCol" :span="8" :md="8" :sm="24" :xs="24">
 						<div class="cardBox">
 							<div class="cardTitle">占位</div>
 							<div class="cardBody">
-
+								<pointBox />
 							</div>
 						</div>
 					</el-col>
@@ -85,27 +85,27 @@
 			</div>
 			<div class="footerBox">
 				<el-row class="colRow" :gutter="20">
-					<el-col :span="8" :md="8" :sm="24" :xs="24">
+					<el-col class="leftCol" :span="8" :md="8" :sm="24" :xs="24">
 						<div class="cardBox">
 							<div class="cardTitle">实时数据</div>
 							<div class="cardBody">
-
+								<barBox />
 							</div>
 						</div>
 					</el-col>
-					<el-col :span="8" :md="8" :sm="24" :xs="24">
+					<el-col class="middleCol" :span="8" :md="8" :sm="24" :xs="24">
 						<div class="cardBox">
 							<div class="cardTitle">占位</div>
 							<div class="cardBody">
-
+								<ringBox />
 							</div>
 						</div>
 					</el-col>
-					<el-col :span="8" :md="8" :sm="24" :xs="24">
+					<el-col class="rightCol" :span="8" :md="8" :sm="24" :xs="24">
 						<div class="cardBox">
 							<div class="cardTitle">占位</div>
 							<div class="cardBody">
-
+								<pointBox />
 							</div>
 						</div>
 					</el-col>
@@ -116,8 +116,18 @@
 </template>
 
 <script>
+import progressBox from "./components/progress";
+import barBox from "./components/bar";
+import ringBox from "./components/ring";
+import pointBox from "./components/point";
 export default {
 	name: "index",
+	components:{
+		progressBox,
+		barBox,
+		ringBox,
+		pointBox
+	},
 	data(){
 		return{
 			inletList:[
@@ -151,7 +161,7 @@ export default {
 		}
 	},
 	mounted() {
-
+		this.$emit('on-mounted')
 	},
 	methods:{
 
@@ -167,12 +177,20 @@ export default {
 		.headerBox{
 			flex: 2;
 			overflow: hidden;
+			padding-bottom: 5px;
 		}
 		.middleBox{
 			flex: 3;
+			padding: 5px 0;
 		}
 		.footerBox{
 			flex: 5;
+			padding-top: 5px;
+		}
+		.colRow{
+			.leftCol{padding-right: 5px !important;}
+			.middleCol{padding: 0 5px !important;}
+			.rightCol{padding-left: 5px !important;}
 		}
 	}
 	.colRow{
@@ -180,9 +198,10 @@ export default {
 		padding: 0 !important;
 		margin: 0 !important;
 		.el-col{
-			padding: 7px !important;
 			box-sizing: border-box;
 			height: 100%;
+			padding-left: 0 !important;
+			padding-right: 0 !important;
 		}
 	}
 
@@ -191,6 +210,14 @@ export default {
 		.consoleView{
 			display: block;
 			height: 100%;
+			.headerBox{padding: 0;}
+			.middleBox{padding: 0;}
+			.footerBox{padding: 0;}
+			.colRow{
+				.leftCol{padding: 5px 0 !important;}
+				.middleCol{padding: 5px 0 !important;}
+				.rightCol{padding: 5px 0 !important;}
+			}
 		}
 	}
 </style>

src/views/home/index.vue

@@ -9,7 +9,8 @@
 			</el-card>
 		</el-main>
 	</div>
-	<work v-if="dashboard=='1'" @on-mounted="onMounted"></work>
+	<console v-if="dashboard=='1'" @on-mounted="onMounted"></console>
+	<work v-else-if="dashboard=='2'" @on-mounted="onMounted"></work>
 	<widgets v-else @on-mounted="onMounted"></widgets>
 
 </template>
@@ -18,12 +19,14 @@
 	import { defineAsyncComponent } from 'vue';
 	const work = defineAsyncComponent(() => import('./work'));
 	const widgets = defineAsyncComponent(() => import('./widgets'));
+	const console = defineAsyncComponent(() => import('./console'));
 
 	export default {
 		name: "dashboard",
 		components: {
 			work,
-			widgets
+			widgets,
+			console
 		},
 		data(){
 			return {

src/views/home/widgets/index.vue

@@ -168,9 +168,9 @@
 			},
 			//隐藏组件
 			remove(item){
-				var newCopmsList = this.grid.copmsList
+				const newCopmsList = this.grid.copmsList;
 				newCopmsList.forEach((obj, index) => {
-					var newObj = obj.filter(o=>o!=item)
+					const newObj = obj.filter(o => o != item);
 					newCopmsList[index] = newObj;
 				})
 			},

src/views/setting/user/index.vue

@@ -156,12 +156,16 @@
 			},
 			//删除
 			async table_del(row){
+				this.$confirm(`确定删除 ${row.login_name} 吗？`, '提示', {
+					type: 'warning'
+				}).then(async () => {
 					const reqData = {ids: [row.id]};
 					const res = await this.$API.system.user.delete.post(reqData);
 					if(res.code == 200){
 						this.$refs.table.refresh();
 						this.$message.success("删除成功")
 					}
+				}).catch(()=>{})
 			},
 			//批量删除
 			async batch_del(){