完善控制台
This commit is contained in:
龙运模
parent
b47af5ae31
commit
e47723b613
@ -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">-->
|
||||
<span>{{ $CONFIG.APP_NAME }}</span>
|
||||
<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">
|
||||
<!-- <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 }">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.cardBox{
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
113
src/views/home/console/components/bar.vue
Normal file
113
src/views/home/console/components/bar.vue
Normal file
@ -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>
|
||||
63
src/views/home/console/components/point.vue
Normal file
63
src/views/home/console/components/point.vue
Normal file
@ -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>
|
||||
109
src/views/home/console/components/progress.vue
Normal file
109
src/views/home/console/components/progress.vue
Normal file
@ -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>
|
||||
75
src/views/home/console/components/ring.vue
Normal file
75
src/views/home/console/components/ring.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
})
|
||||
},
|
||||
|
||||
@ -156,12 +156,16 @@
|
||||
},
|
||||
//删除
|
||||
async table_del(row){
|
||||
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("删除成功")
|
||||
}
|
||||
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(){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user