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-10-17 22:49:20 +08:00
parent 1d3dbf3487
commit deb3e33f09
6 changed files with 86 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/directives/number.js Normal file
View File

@ -0,0 +1,27 @@
export default {
mounted(el, binding) {
const value = binding.value;
if (value !== undefined && value !== null) {
el.textContent = formatNumber(value);
}
},
updated(el, binding){
const value = binding.value;
if (value !== undefined && value !== null) {
el.textContent = formatNumber(value);
}
},
unmounted(el){
el.removeEventListener('click', el.handler)
}
}
function formatNumber(num) {
if (num === null || num === undefined) {
return '';
}
const parts = num.toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return parts.join('.');
}

2
src/scui.js
View File

@ -40,6 +40,7 @@ import authsAll from './directives/authsAll'
import role from './directives/role'
import time from './directives/time'
import copy from './directives/copy'
import number from './directives/number'
import errorHandler from './utils/errorHandler'
import * as elIcons from '@element-plus/icons-vue'
@ -94,6 +95,7 @@ export default {
app.directive('role', role)
app.directive('time', time)
app.directive('copy', copy)
app.directive('number', number)
//统一注册el-icon图标
for(let icon in elIcons){

2
src/style/home.scss
View File

@ -19,7 +19,7 @@
background: #F4F5F9;
border-radius: 4px;
.btnItem{
padding: 3px 16px;
padding: 4px 18px;
color: #444;font-size: 12px;font-weight: initial;
cursor: pointer;
}

18
src/views/home/console/components/bar.vue
View File

@ -103,16 +103,30 @@ export default {
reqParams:{
page:1,
pageSize:30,
date_type:'month',
date_type:this.dataType,
dateSelect:[],
start:'',
end:'',
}
}
},
mounted() {
props:{
dataType:{
type:String
}
},
watch:{
dataType:{
handler(val){
this.reqParams.date_type = val;
this.getData();
},
immediate:true
}
},
mounted() {
// this.getData();
},
methods:{
async getData() {
this.loading = true;

7
src/views/home/console/components/progress.vue
View File

@ -22,7 +22,7 @@ export default {
immediate:true,
handler(val){
let option = this.$TOOL.objCopy(this.option);
option.series[0].data[0].value = val.value;
option.series[0].data[0].value = val.value==0?20:90;
option.series[0].data[0].name = val.title;
this.option = option;
}
@ -46,7 +46,7 @@ export default {
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 1,
borderWidth: 12,
}
},
axisLine: {
@ -90,10 +90,11 @@ export default {
value: 0,
name: '',
title: {
fontSize:12,
offsetCenter: ['0%', '30%']
},
detail: {
fontSize:25,
fontSize:30,
valueAnimation: true,
offsetCenter: ['0%', '-10%']
}

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

@ -9,7 +9,7 @@
<div class="cardBody workOrderView">
<div class="item" v-for="(item,index) in workOrder" :key="index">
<div class="cardContent">
<div class="num">{{item.value}}</div>
<div class="num" v-number="item.value" :style="{color:item.title_color!=''?item.title_color:''} ">{{item.value}}</div>
<div class="name">{{item.title}}</div>
</div>
</div>
@ -21,7 +21,6 @@
<!-- <div class="cardTitle">占位</div>-->
<!-- <div class="cardBody">-->
<!-- <el-scrollbar>-->
<!-- </el-scrollbar>-->
<!-- </div>-->
<!-- </div>-->
@ -32,7 +31,7 @@
<div class="cardBody spareParts">
<div class="item" v-for="(item,index) in spareParts" :key="index">
<el-icon class="icon"><component :is="item.icon" /></el-icon>
<div class="num">{{item.value}}</div>
<div class="num" v-number="item.value">{{item.value}}</div>
<div class="name">{{item.title}}</div>
</div>
</div>
@ -48,7 +47,7 @@
<div class="cardBody briefing">
<div class="item" v-for="(item,index) in briefing" :key="index">
<div class="comMain">
<div class="num">
<div class="num" v-number="item.num">
{{item.num}}
<text class="unit">条</text>
</div>
@ -86,9 +85,14 @@
<el-row class="colRow" :gutter="20">
<el-col class="leftCol" :span="16" :md="16" :sm="24" :xs="24">
<div class="cardBox chartView">
<div class="cardTitle">成本汇总</div>
<div class="cardTitle cardTitleFlex">
<span class="name">成本汇总</span>
<div class="titleBtnView">
<div class="btnItem" v-for="(item,index) in dataTypeList" :key="index" :class="item.date_type==dataType?'trueItem':''" @click="dateTypeClick(item)">{{item.label}}</div>
</div>
</div>
<div class="cardBody">
<barBox />
<barBox :dataType="dataType" />
</div>
</div>
</el-col>
@ -133,16 +137,17 @@ export default {
data(){
return{
workOrder:[
{title:"总工单数",value:2340,icon:''},
{title:"已维修数",value:560,icon:''},
{title:"待维修数",value:460,icon:''},
{title:"0BD 数",value:560,icon:''},
{title:"1BD 数",value:703,icon:''},
{title:"当前预约数",value:180,icon:''},
{title:"总工单数",value:0,icon:''},
{title:"已维修数",value:0,icon:''},
{title:"待维修数",value:0,icon:''},
{title:"超期工单数",value:0,icon:''},
{title:"0BD 数",value:0,icon:''},
{title:"1BD 数",value:0,icon:''},
{title:"当前预约数",value:0,icon:''},
],
spareParts:[
{title:"维保库存数",value:45,icon:'sc-icon-HomeInventory'},
{title:"预警库存MPN数",value:20,icon:'sc-icon-EarlyWarnBj'},
{title:"维保库存数",value:0,icon:'sc-icon-HomeInventory'},
{title:"预警库存MPN数",value:0,icon:'sc-icon-EarlyWarnBj'},
],
reachStandard:[
{title:"国内SLA 月达标率",value:0},
@ -152,13 +157,20 @@ export default {
],
reachShow:true,
briefing:[
{num:9376,name:'待提交数',icon:'sc-icon-Gather'},
{num:126,name:'计划维修数',icon:'sc-icon-HomeSetup'},
{num:756,name:'正在维修数',icon:'sc-icon-Repaired'},
{num:662,name:'待审核数',icon:'sc-icon-EarlyWarn'},
{num:3553,name:'个人中心',icon:'sc-icon-HomeUser'},
{num:253,name:'个人中心',icon:'sc-icon-HomeChart'},
{num:0,name:'待提交数',icon:'sc-icon-Gather'},
{num:0,name:'计划维修数',icon:'sc-icon-HomeSetup'},
{num:0,name:'正在维修数',icon:'sc-icon-Repaired'},
{num:0,name:'待审核数',icon:'sc-icon-EarlyWarn'},
{num:0,name:'占位',icon:'sc-icon-HomeUser'},
{num:0,name:'占位',icon:'sc-icon-HomeChart'},
],
dataTypeList:[
{date_type:'hour',label:'按时'},
{date_type:'day',label:'按天'},
{date_type:'month',label:'按月'},
{date_type:'year',label:'按年'},
],
dataType:"month"
}
},
mounted() {
@ -197,7 +209,10 @@ export default {
this.reachStandard = res.data.count
}
}
}
},
dateTypeClick(item){
this.dataType = item.date_type
},
}
}
</script>
@ -239,7 +254,6 @@ export default {
}
}
@media (max-width: 992px){
.consoleView{
display: block;