优化数据面板

src/directives/number.js

@@ -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('.');
+}

src/scui.js

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

src/style/home.scss

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

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

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

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

@@ -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%']
 								}

src/views/home/console/index.vue

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