longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善控制台

Browse Source
This commit is contained in:
龙运模 2024-07-09 18:53:44 +08:00
parent b47af5ae31
commit e47723b613
11 changed files with 5124 additions and 4868 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/layout/index.vue
View File

@ -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 }">

2
src/style/home.scss
View File

@ -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
View 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
View 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
View 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
View 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>

57
src/views/home/console/index.vue
View File

@ -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>

7
src/views/home/index.vue
View File

@ -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 {

4
src/views/home/widgets/index.vue
View File

@ -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;
})
},

4
src/views/setting/user/index.vue
View File

@ -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(){

9541
yarn.lock
View File

File diff suppressed because it is too large Load Diff