1、优化查询时若无选择日期的提示信息 2、增加部分加载时间较长的数据的加载动画

zhuzhuanzhuan

2023-09-22 12fb4b8e4fb75347b25f3ba473b930408ed2ec05

 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>