From 12fb4b8e4fb75347b25f3ba473b930408ed2ec05 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 22 九月 2023 17:49:18 +0800
Subject: [PATCH] 1、优化查询时若无选择日期的提示信息 2、增加部分加载时间较长的数据的加载动画
---
src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue | 147 ++++++++++++++++++++++++++++---------------------
1 files changed, 84 insertions(+), 63 deletions(-)
diff --git a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
index 8370345..64d02ca 100644
--- a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
+++ b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
@@ -14,7 +14,7 @@
<a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange"/>
</a-form-item>
</a-col>
- <a-col :md="3" :sm="3" :xs="3">
+ <a-col :md="2" :sm="2" :xs="2">
<a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
</a-col>
<a-col :md="2" :sm="2" :xs="2">
@@ -41,7 +41,7 @@
<div class="PowerOnRate_text" style="width: 8%">
<table width="85px;" align="center">
<tr>
- <td align="right"><div style="width: 15px;height: 15px;background-color: #4169E1;position: static;"/></td>
+ <td align="right"><div style="width: 15px;height: 15px;background-color: #6496e9;position: static;"/></td>
<td align="left">寮�鏈�</td>
</tr>
<tr>
@@ -49,7 +49,7 @@
<td align="left">鍏虫満</td>
</tr>
<tr>
- <td align="right"><div style="width: 15px;height: 15px;background-color: #00ee00"/></td>
+ <td align="right"><div style="width: 15px;height: 15px;background-color: #4ecee1"/></td>
<td align="left">杩愯</td>
</tr>
<tr>
@@ -64,8 +64,8 @@
<div class="UtilizationStartup">
<div class="Utilization Line-box">
<div class="title">
- <div class="circle"></div>
- <div class="text">杩愯鏁堢巼</div>
+ <!--<div class="circle"></div>-->
+ <!--<div class="text"></div>-->
</div>
<div class="Utilization-box box-bottom">
<div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
@@ -73,8 +73,8 @@
</div>
<div class="Startup Line-box">
<div class="title">
- <div class="circle"></div>
- <div class="text">杩愯鏁堢巼</div>
+ <!--<div class="circle"></div>-->
+ <!--<div class="text"></div>-->
</div>
<div class="Startup-box box-bottom">
<div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
@@ -127,13 +127,8 @@
}
},
created(){
-
-
let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
-
-
this.queryParams.collectTime = collectTime;
-
this.queryParams.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
this.initEquipmentNode()
this.queryStatistical();
@@ -169,13 +164,13 @@
top: 60,
containLabel: true
},
- toolbox: {
- show : true,
- padding: 15,
- feature : {
- saveAsImage : {show: true,title:'淇濆瓨鍥剧墖',name :'璁惧鏁堢巼缁熻鎶ヨ〃'}
- }
- },
+ // toolbox: {
+ // show : true,
+ // padding: 15,
+ // feature : {
+ // saveAsImage : {show: true,title:'淇濆瓨鍥剧墖',name :'璁惧鏁堢巼缁熻鎶ヨ〃'}
+ // }
+ // },
xAxis :{
type : 'category',
data:['寮�鏈烘椂闀�','鍏虫満鏃堕暱','杩愯鏃堕暱','寰呮満鏃堕暱'],
@@ -266,6 +261,7 @@
name:'鏌辩姸鍥�',
type: 'bar',
data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
+ // data:[22,3,4,5],
barWidth: 25,
label:{
show:true,
@@ -273,16 +269,21 @@
textStyle:{
color:'#000',
},
- formatter:"鏃堕暱锛歿c}H"
+ // formatter:"鏃堕暱锛歿c}H",
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?`鏃堕暱锛�${value.slice(1)}H`:`鏃堕暱锛�${value}H`
+ }
},
itemStyle: {
normal: {
color: function(params) {
let colorList = [
["#6496e9","#6bded3"],
- ["#ffbb65","#fdc68b"],
+ ["#849db8","#b4b8cc"],
["#4fe1c5","#4ecee1"],
- ["#9978fa","#88a1fa"],
+ // ["#9978fa","#88a1fa"],
+ ["#ffbb65","#fdc68b"],
];
// return colorList[params.dataIndex];
let colorItem = colorList[params.dataIndex];
@@ -315,12 +316,16 @@
// },
tooltip: {
trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
+ // formatter: "{a} <br/>{b} : {c} ({d}%)"锛�
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?`${params.seriesName}<br/>${params.name}锛�${value.slice(1)}H锛�${params.percent}%锛塦:`${params.seriesName}<br/>${params.name}锛�${value}H锛�${params.percent}%锛塦
+ }
},
legend: {
orient: 'vertical',
- x: 'left',
- y: 'bottom',
+ x: '85%',
+ y: '50%',
data: ['寮�鏈烘椂闂�', '鍏虫満鏃堕棿']
},
calculable: true,
@@ -332,13 +337,18 @@
itemStyle: {
normal: {
color: function (params) {
- let colorList = ['#4169E1', '#A8A8A8'];
+ let colorList = [ '#6496e9','#849db8'];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
- formatter: '{b}\n{c}'
+ // formatter: '{b}\n{c}',
+ // formatter:params=>String(params.value).length==2?params.name+String(params.value).slice(1):params.name+String(params.value)
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H'
+ }
}
}
},
@@ -357,12 +367,16 @@
// },
tooltip: {
trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
+ // formatter: "{a} <br/>{b} : {c} ({d}%)",
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?`${params.seriesName}<br/>${params.name}锛�${value.slice(1)}H锛�${params.percent}%锛塦:`${params.seriesName}<br/>${params.name}锛�${value}H锛�${params.percent}%锛塦
+ }
},
legend: {
orient: 'vertical',
- x: 'left',
- y: 'bottom',
+ x: '85%',
+ y: '50%',
data: ['杩愯鏃堕棿', '寰呮満鏃堕棿']
},
calculable: true,
@@ -374,13 +388,17 @@
itemStyle: {
normal: {
color: function (params) {
- var colorList = ['#00ee00', '#FCCE10'];
+ var colorList = ['#4ecee1', '#FCCE10'];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
- formatter: '{b}\n{c}'
+ // formatter: '{b}\n{c}',
+ formatter:params=>{
+ const value=String(params.value)
+ return value.length==2&&value[0]==='0'?params.name+' '+value.slice(1)+'H':params.name+' '+value+'H'
+ }
}
}
},
@@ -391,38 +409,48 @@
StartupLine.setOption(statChartPieOption2);
},
queryStatistical(){
- getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{
- if(res.success){
- // console.log(res);
- this.StatCharOpeningRate = res.result.openRate;
- //鍒╃敤鐜�
- this.StatCharUsedRate = res.result.utilizationRate;
- //寮�鏈虹巼
- this.UtilizationHeight = res.result.openRate;
- this.StatCharUsedopeningRate = res.result.StartupHeight;
- this.StartupHeight = res.result.StartupHeight;
- this.openingLong = this.getTime(res.result.openLong)
- this.waitingLong = this.getTime(res.result.waitLong);
- this.processLong = this.getTime(res.result.processLong);
- this.closedLong = this.getTime(res.result.closeLong);
- this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong);
- this.draw();
- }
- })
+ if(this.queryParams.collectTime){
+ getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{
+ if(res.success) {
+ // console.log(res);
+ this.StatCharOpeningRate = res.result.openRate;
+ //鍒╃敤鐜�
+ this.StatCharUsedRate = res.result.utilizationRate;
+ //寮�鏈虹巼
+ this.UtilizationHeight = res.result.openRate;
+ this.StatCharUsedopeningRate = res.result.StartupHeight;
+ this.StartupHeight = res.result.StartupHeight;
+ this.openingLong = this.getTime(res.result.openLong)
+ this.waitingLong = this.getTime(res.result.waitLong);
+ this.processLong = this.getTime(res.result.processLong);
+ this.closedLong = this.getTime(res.result.closeLong);
+ this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong);
+ this.draw();
+ }
+ })
+ }else{
+ this.$notification.warning({
+ message:'娑堟伅',
+ description:'璇烽�夋嫨鏃堕棿'
+ })
+ }
},
dataChange(val) {
this.queryParam.collectTime1 = "";
- this.queryParams.dateTime = val.format('YYYYMMDD')
- this.queryParams.collectTime = val.format('YYYY-MM-DD');
-
+ if(val){
+ this.queryParams.dateTime = val.format('YYYYMMDD')
+ this.queryParams.collectTime = val.format('YYYY-MM-DD');
+ }
},
initEquipmentNode() {
let _this = this
getAction(this.url.getBaseTree).then((res) => {
if (res.success) {
+ if(res.result[0]){
+ _this.$set(this.queryParam, 'tierName', res.result[0].title)
+ _this.$set(this.queryParams, 'parentId', res.result[0].key)
+ _this.queryStatistical() }
// console.log(res.result[0].entity.tierName)
- _this.$set(this.queryParam, 'tierName', res.result[0].title)
- _this.$set(this.queryParams, 'parentId', res.result[0].key)
_this.queryStatistical()
} else {
// this.$message.warn(res.message)
@@ -452,7 +480,7 @@
this.queryParam = {}
this.queryParams = {}
// this.dates = []
- this.queryStatistical()
+ // this.queryStatistical()
// this.onClearSelected()
},
searchQuery(){
@@ -461,26 +489,19 @@
},
watch: {
equip(val) {
- // console.log(val);
if (val && val.equipmentId) {
this.$set(this.queryParam, 'tierName', val.title)
this.$set(this.queryParam, 'equipmentId', val.equipmentId)
this.queryParams.parentId = ''
this.queryParams.equipmentId = val.equipmentId
- this.searchQuery()
}else{
this.queryParams.parentId = val.key
this.queryParams.equipmentId = ''
this.$set(this.queryParam, 'tierName', val.title)
- this.searchQuery()
}
this.searchQuery()
}
- // this.searchQuery();
-
-
}
-
}
</script>
--
Gitblit v1.9.3