From 7dba00a80cee072bc9e193d5d2a75c1f7cf72d28 Mon Sep 17 00:00:00 2001 From: gaoluyang <gaoluyang@rengu.cc> Date: 星期四, 04 七月 2024 10:51:41 +0800 Subject: [PATCH] 表格输入框转换为科学计数法 --- src/components/view/b4-inspection-item-statistics.vue | 104 ++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 80 insertions(+), 24 deletions(-) diff --git a/src/components/view/b4-inspection-item-statistics.vue b/src/components/view/b4-inspection-item-statistics.vue index 53f6155..6e2ddc1 100644 --- a/src/components/view/b4-inspection-item-statistics.vue +++ b/src/components/view/b4-inspection-item-statistics.vue @@ -1,5 +1,5 @@ <template> - <div class="inspection-main"> + <div class="inspection-main" v-loading="loading"> <div class="inspection-content" style="height:100%"> <!-- <p style="font-size: 16px;padding:19.5px 0px">妫�娴嬮」鐩粺璁�</p> --> <el-row :gutter="20"> @@ -7,10 +7,10 @@ <div class="inspection-card inspection-head"> <div class="inspection-head-left"> <h4>浠婃棩椤圭洰鎺ユ敹</h4> - <span >2453</span> + <span >{{ pageData.RECEVICE }}</span> <div class="inspection-head-left-info"> - <img src="../../../static/img/daliy-up.svg" alt=""> - <span :class="{active:false}" class="num"> 8.5% </span> + <img :src="`../../../static/img/daliy-${pageData.RECEIVE_RATIO<0?'down':'up'}.svg`" alt=""> + <span :class="{active:pageData.RECEIVE_RATIO<0}" class="num" v-html="` ${handleData(pageData.RECEIVE_RATIO)}% `"></span> <span style="font-size: 12px;">杈冩槰澶�</span> </div> </div> @@ -21,10 +21,10 @@ <div class="inspection-card inspection-head"> <div class="inspection-head-left"> <h4>浠婃棩椤圭洰瀹屾垚</h4> - <span >1687</span> + <span >{{ pageData.FINISHE }}</span> <div class="inspection-head-left-info"> - <img src="../../../static/img/daliy-up.svg" alt=""> - <span :class="{active:false}" class="num"> 8.5% </span> + <img :src="`../../../static/img/daliy-${pageData.FINISHE_RATIO<0?'down':'up'}.svg`" alt=""> + <span :class="{active:pageData.FINISHE_RATIO<0}" class="num" v-html="` ${handleData(pageData.FINISHE_RATIO)}% `"></span> <span style="font-size: 12px;">杈冩槰澶�</span> </div> </div> @@ -35,10 +35,10 @@ <div class="inspection-card inspection-head"> <div class="inspection-head-left"> <h4>浠婃棩椤圭洰鍓╀綑</h4> - <span >766</span> + <span >{{ pageData.SURPLUS }}</span> <div class="inspection-head-left-info"> - <img src="../../../static/img/daliy-down.svg" alt=""> - <span :class="{active:true}" class="num"> 8.5% </span> + <img :src="`../../../static/img/daliy-${pageData.SURPLUS_RATIO<0?'down':'up'}.svg`" alt=""> + <span :class="{active:pageData.SURPLUS_RATIO<0}" class="num" v-html="` ${handleData(pageData.SURPLUS_RATIO)}% `"></span> <span style="font-size: 12px;">杈冩槰澶�</span> </div> </div> @@ -95,11 +95,11 @@ type:'line' }, chartData0:{ - xData:['4-11','4-12','4-13','4-14','4-15','4-16','4-17','4-18','4-19','4-20'], + xData:[], yData:[ { title:'椤圭洰鎺ユ敹閲�', - data:[10,20,10,40,50,20,70,40,90,50] + data:[] } ] }, @@ -109,15 +109,15 @@ type:'bar' }, chartData1:{ - xData:['4-11','4-12','4-13','4-14','4-15','4-16','4-17','4-18','4-19','4-20'], + xData:[], yData:[ { title:'浠婃棩鎺ユ敹', - data:[10,20,10,40,50,20,70,40,90,50] + data:[] }, { title:'浠婃棩瀹屾垚', - data:[15,10,6,33,66,44,56,77,44,55] + data:[] }, ] }, @@ -129,16 +129,16 @@ }, chartData2:{ title:'浠婃棩椤圭洰鍚堟牸鐜�', - percentage:'68%', + percentage:'0', color:['#1CCAB8','#E1E4E8'], data:[ { name:'鍚堟牸', - value:'68' + value:'0' }, { name:'涓嶅悎鏍�', - value:'32' + value:'0' }, ] }, @@ -150,16 +150,16 @@ }, chartData3:{ title:'浠婃棩椤圭洰瀹屾垚鐜�', - percentage:'68%', + percentage:'0', color:['#FBB647','#E1E4E8'], data:[ { name:'瀹屾垚', - value:'68' + value:'0' }, { name:'鏈畬鎴�', - value:'32' + value:'0' }, ] }, @@ -171,20 +171,76 @@ }, chartData4:{ title:'浠婃棩椤瑰欢鏈熺巼', - percentage:'68%', + percentage:'0', color:['#FF3838','#E1E4E8'], data:[ { name:'寤舵湡', - value:'68' + value:'0' }, { name:'鏈欢鏈�', - value:'32' + value:'0' }, ] }, + loading:false, + pageData:{}, + timers:null } + }, + mounted(){ + this.init() + this.timers&&clearInterval(this.timers); + setInterval(this.init(),1000*60*5) + }, + methods:{ + init(){ + this.chartConfig0.isLoading = false + this.chartConfig1.isLoading = false + this.chartConfig2.isLoading = false + this.chartConfig3.isLoading = false + this.chartConfig4.isLoading = false + this.loading = true; + this.$axios.get(this.$api.report.testProductByDay).then(res => { + if (res.code == 201) return + this.pageData = this.HaveJson(res.data) + let xData = res.data.DAYS.map(m=>{ + let arr = m.split('-') + return `${arr[1]}-${arr[2]}` + }) + this.chartData0.xData = xData + this.chartData1.xData = xData + this.chartData0.yData[0].data = this.pageData.RECETENDAYS + this.chartData1.yData[0].data = this.pageData.RECETENDAYS + this.chartData1.yData[1].data = this.pageData.FINISHTENDAYS + this.chartData2.percentage = (this.pageData.ACCEPT_RATE_TODAY*100).tofixed(0)+'%' + this.chartData3.percentage = (this.pageData.FINISH_RATE_TODAY*100).tofixed(0)+'%' + this.chartData4.percentage = (this.pageData.DELAY_RATE_TODAY*100).tofixed(0)+'%' + this.chartData2.data[0].value = this.pageData.ACCEPT + this.chartData2.data[1].value = this.pageData.FINISHE - this.pageData.ACCEPT + this.loading = false; + this.chartData3.data[0].value = this.pageData.FINISHE + this.chartData3.data[1].value = this.pageData.RECEVICE - this.pageData.FINISHE + this.chartData4.data[0].value = this.pageData.SURPLUS + this.chartData4.data[1].value = this.pageData.RECEVICE - this.pageData.SURPLUS + this.chartConfig0.isLoading = true + this.chartConfig1.isLoading = true + this.chartConfig2.isLoading = true + this.chartConfig3.isLoading = true + this.chartConfig4.isLoading = true + }) + }, + handleData(val){ + if(val){ + return (Math.abs(val)*100).tofixed(0); + }else{ + return '0' + } + } + }, + deactivated(){ + this.timers&&clearInterval(this.timers); } } </script> -- Gitblit v1.9.3