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 | 182 ++++++++++++++++++++++++++-------------------
1 files changed, 106 insertions(+), 76 deletions(-)
diff --git a/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue b/src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
index d9e79f6..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>
@@ -63,19 +63,19 @@
<!--鍒╃敤鐜囧拰寮�鍔ㄧ巼-->
<div class="UtilizationStartup">
<div class="Utilization Line-box">
- <!--<div class="title">-->
+ <div class="title">
<!--<div class="circle"></div>-->
- <!--<div class="text">寮�鏈虹巼</div>-->
- <!--</div>-->
+ <!--<div class="text"></div>-->
+ </div>
<div class="Utilization-box box-bottom">
<div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
</div>
</div>
<div class="Startup Line-box">
- <!--<div class="title">-->
+ <div class="title">
<!--<div class="circle"></div>-->
- <!--<div class="text">寮�鍔ㄧ巼</div>-->
- <!--</div>-->
+ <!--<div class="text"></div>-->
+ </div>
<div class="Startup-box box-bottom">
<div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
</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];
@@ -304,18 +305,27 @@
//寮�鏈烘椂闂碶鍏虫満鏃堕棿
let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons');
let statChartPieOption1 = {
- title: {
- x: 'left',
- subtext: '寮�鏈烘晥鐜�'
- },
+ // title: {
+ // x: 'left',
+ // subtext: '寮�鏈烘晥鐜�',
+ // textStyle: {
+ // color: '#268e80',
+ // fontSize: 20,
+ //
+ // },
+ // },
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,
@@ -327,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'
+ }
}
}
},
@@ -346,18 +361,22 @@
//杩愯鏃堕棿\寰呮満鏃堕棿
let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons');
let statChartPieOption2 = {
- title: {
- x: 'left',
- subtext: '杩愯鏁堢巼'
- },
+ // title: {
+ // x: 'left',
+ // subtext: '杩愯鏁堢巼'
+ // },
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,
@@ -369,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'
+ }
}
}
},
@@ -386,41 +409,55 @@
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)
+ // this.$message.warn(res.message)
+ this.$notification.warning({
+ message:'娑堟伅',
+ description:res.message
+ });
}
}).finally(() => {
this.loading = false
@@ -443,7 +480,7 @@
this.queryParam = {}
this.queryParams = {}
// this.dates = []
- this.queryStatistical()
+ // this.queryStatistical()
// this.onClearSelected()
},
searchQuery(){
@@ -452,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.equipmentIds = val.equipmentId
- this.searchQuery()
+ this.queryParams.equipmentId = val.equipmentId
}else{
this.queryParams.parentId = val.key
- this.queryParams.equipmentIds = ''
+ this.queryParams.equipmentId = ''
this.$set(this.queryParam, 'tierName', val.title)
- this.searchQuery()
}
this.searchQuery()
}
- // this.searchQuery();
-
-
}
-
}
</script>
--
Gitblit v1.9.3