qushaowei
2024-03-14 e055d2d93b516985fbc2df0f6f5a135f3230cccf
src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue
@@ -11,14 +11,14 @@
          </a-col>
          <a-col :md="4" :sm="4" :xs="4">
            <a-form-item label="日期">
              <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange"/>
              <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange" :allowClear="false"/>
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="3" :xs="3">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
          </a-col>
          <a-col :md="2" :sm="2" :xs="2">
            <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
@@ -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>
@@ -88,14 +88,9 @@
  import moment from 'moment'
  import { putAction, getAction } from '@/api/manage'
  import $ from 'jquery'
  import AFormItem from 'ant-design-vue/es/form/FormItem'
  import * as echarts from 'echarts'
  export default {
    name: 'StatisticalAnalysisMain',
    components:{
      AFormItem
    },
    props: { equip: {} },
    data(){
      return{
@@ -115,7 +110,7 @@
        dates: [],
        queryParam: {},
        queryParams:{
          collectTime:undefined,
          collectTime:null,
        },
        shiftSubList: [],
        shiftList: [],
@@ -127,16 +122,11 @@
      }
    },
    created(){
      let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
      this.queryParams.collectTime = collectTime;
      this.queryParams.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
      // let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
      this.queryParams.collectTime = moment().add(-1,'d').format('YYYY-MM-DD')
      this.queryParams.dateTime = moment().add(-1,'d').format('YYYYMMDD')
      this.initEquipmentNode()
      this.queryStatistical();
      // this.queryStatistical();
      // this.getTime(37800);
    },
@@ -169,13 +159,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 +256,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 +264,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 +311,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 +332,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 +362,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,
@@ -370,17 +379,20 @@
            name: '运行效率',
            type: 'pie',
            radius: '70%',
            center: ['55%', '55%'],
            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'
                  }
                }
              }
            },
@@ -392,7 +404,7 @@
      },
      queryStatistical(){
        getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{
          if(res.success){
          if(res.success) {
            // console.log(res);
            this.StatCharOpeningRate = res.result.openRate;
            //利用率
@@ -412,17 +424,20 @@
      },
      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)
            }
            // 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)
@@ -450,9 +465,13 @@
      },
      searchReset() {
        this.queryParam = {}
        this.queryParams = {}
        this.queryParams = {
          collectTime:moment().add(-1,'d').format('YYYY-MM-DD'),
          dateTime:moment().add(-1,'d').format('YYYYMMDD')
        }
        this.initEquipmentNode()
        // this.dates = []
        this.queryStatistical()
        // this.queryStatistical()
        // this.onClearSelected()
      },
      searchQuery(){
@@ -461,26 +480,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>