统计图表界面的绘制和接口调取，渲染，调整

zhuzhuanzhuan

2023-07-20 3c4c3b60f42e0ee32d6a95e0b94e4f80a20c7866

统计图表界面的绘制和接口调取，渲染，调整

 src/views/mdc/base/StatisticalAnalysis.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,45 @@
<template>
  <a-card :bordered="false">
    <div style="width: 100%; height: 100%;overflow: hidden">
      <a-row type="flex" :gutter="16">
        <a-col :md="5" :sm="24">
          <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
        </a-col>
        <a-col :md="24-5" :sm="24">
          <statistical-analysis-main :equip="selectEquementnode"></statistical-analysis-main>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script>
  import BaseTree from '../common/BaseTree'
  import StatisticalAnalysisMain from './modules/StatisticalAnalysis/StatisticalAnalysisMain'
  export default {
    name: 'StatisticalAnalysis',
    components:{
      BaseTree,
      StatisticalAnalysisMain
    },
    data() {
      return {
        description: '设备信息',
        selectEquementnode:{},
        equipmentStatisticsInfo:{},
        url:{
          equipmentStatistics:"/mdc/equipment/equipmentStatistics"
        }
      }
    },
    methods: {
      changeSelectionNode(val){
        this.selectEquementnode = val
      }
    }
  }
</script>

<style scoped>

</style>

 src/views/mdc/base/modules/StatisticalAnalysis/StatisticalAnalysisMain.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,648 @@
<template>
  <div id="StatisticsLegend" style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; height: 44px; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="5" :sm="5" :xs="5">
            <a-form-item label="名称">
              <a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParam.tierName"></a-input>
            </a-form-item>
          </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-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-col>
        </a-row>
      </a-form>
    </div>
    <!--开机率-->
    <div class="PowerOnRate  Line-box">
      <!--<div class="title">-->
        <!--<div class="circle"></div>-->
        <!--<div class="text">利用率</div>-->
      <!--</div>-->
      <div class="PowerOnRate-box box-bottom">
        <!--<div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>-->
        <div class="PowerOnRate_text" style="width: 8%;">
          <p>开机率</p>
          <p>{{UtilizationHeight}}%</p>
          <p>利用率</p>
          <p>{{StatCharUsedRate}}%</p>
        </div>
        <div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
        <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="left">开机</td>
            </tr>
            <tr>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/></td>
              <td align="left">关机</td>
            </tr>
            <tr>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #00ee00"/></td>
              <td align="left">运行</td>
            </tr>
            <tr>
              <td align="right"><div style="width: 15px;height: 15px;background-color: #FCCE10"/></td>
              <td align="left">待机</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <!--利用率和开动率-->
    <div class="UtilizationStartup">
      <div class="Utilization Line-box">
        <!--<div class="title">-->
          <!--<div class="circle"></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="circle"></div>-->
          <!--<div class="text">开动率</div>-->
        <!--</div>-->
        <div class="Startup-box box-bottom">
          <div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  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{
        readOnly:true,
        showday:true,
        StatCharOpeningRate:0,
        StatCharUsedRate:0,
        StatCharUsedopeningRate:0,
        openingLong:0,
        waitingLong:0,
        processLong:0,
        closedLong:0,
        totalLong:0,
        UtilizationHeight:0,
        StartupHeight:0,
        quip:{},
        dates: [],
        queryParam: {},
        queryParams:{
          collectTime:undefined,
        },
        shiftSubList: [],
        shiftList: [],
        url: {
          getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
          dayStatisticalRate:'/mdc/efficiencyReport/dayStatisticalRate',
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
        },
      }
    },
    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('-1')
      this.queryStatistical();
      // this.getTime(37800);
    },

    methods:{
      disabledDate(current){
        //Can not slect days before today and today
        return current && current > moment().subtract('days', 1);
      },
      //把秒计算成对应的时分秒的函数
      getTime(time){
        //转换为时分秒
        let h = Math.round(time / 60 / 60)
        h = h <10 ? '0' + h : h
        //作为返回值返回
        // console.log(h);
        return h;
      },
      moment,
      draw(){
        //开始时间\关机时间\运行时间\待机时间
        let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons');
        let PowerOnRateLine_option = {
          tooltip:{
            trigger: 'axis',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: 60,
            containLabel: true
          },
          toolbox: {
            show : true,
            padding: 15,
            feature : {
              saveAsImage : {show: true,title:'保存图片',name :'设备效率统计报表'}
            }
          },
          xAxis :{
            type : 'category',
            data:['开机时长','关机时长','运行时长','待机时长'],
            axisLabel:{          //坐标轴字体颜色
              textStyle:{
                color: '#000'
              }
            },
            axisLine:{
              lineStyle:{
                color:"#e5e5e5"
              }
            },
            axisTick:{       //y轴刻度线
              show:false
            },
            splitLine:{    //网格
              show: false,
            },
            boundaryGap: true,
          },
          yAxis :{
            name: '时间/小时',
            type : 'value',
            axisLabel:{        //坐标轴字体颜色
              textStyle:{
                color: '#000'
              }
            },
            axisLine:{
              show:false,
            },
            axisTick:{       //y轴刻度线
              show:false
            },
            splitLine:{    //网格
              show: true,
              color:'#dadde4',
              lineStyle:{
                type:"dashed"
              }
            }
          },
          series:[
            // {
            //   name:'曲线',
            //   type: 'line',
            //   smooth:true,
            //   symbol: 'circle',
            //   symbolSize: 8,
            //   label:{
            //     show:true,
            //     position:"top",
            //     textStyle:{
            //       color:'#000',
            //     },
            //     formatter:"时长：{c}H"
            //   },
            //   itemStyle: {
            //     color: "rgb(87, 120, 225)",
            //     borderColor: "#fff",
            //     borderWidth: 2,
            //     shadowColor: 'rgba(0, 0, 0, .3)',
            //   },
            //   lineStyle: {
            //     normal: {
            //       color:"rgb(87, 120, 225)",
            //       shadowColor: 'rgba(87, 120, 225, .4)',
            //       shadowBlur: 8,
            //       shadowOffsetY: 10,
            //       shadowOffsetX: 0,
            //     },
            //   },
            //   areaStyle: {
            //     normal: {
            //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //         offset: 0,
            //         color: 'rgba(87, 120, 225, .6)'
            //       }, {
            //         offset: 1,
            //         color: 'rgba(87, 120, 225, .3)'
            //       }]),
            //     }
            //   },
            //   data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
            // },
            {
              name:'柱状图',
              type: 'bar',
              data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
              barWidth: 25,
              label:{
                show:true,
                position:"top",
                textStyle:{
                  color:'#000',
                },
                formatter:"时长：{c}H"
              },
              itemStyle: {
                normal: {
                  color: function(params) {
                    let colorList = [
                      ["#6496e9","#6bded3"],
                      ["#ffbb65","#fdc68b"],
                      ["#4fe1c5","#4ecee1"],
                      ["#9978fa","#88a1fa"],
                    ];
                    // return colorList[params.dataIndex];
                    let colorItem = colorList[params.dataIndex];
                    return new echarts.graphic.LinearGradient(0,0,0,1,[{
                      offset:0,
                      color:colorItem[0]
                    },
                      {
                        offset:1,
                        color:colorItem[1]
                      }],false)
                  },
                  barBorderRadius: [5, 5, 0, 0],
                }
              },
            }]
        }
        PowerOnRateLine.setOption(PowerOnRateLine_option);
        //开机时间\关机时间
        let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons');
        let  statChartPieOption1 = {
          title: {
            x: 'left',
            subtext: '开机效率'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            y: 'bottom',
            data: ['开机时间', '关机时间']
          },
          calculable: true,
          series: [{
            name: '开机效率',
            type: 'pie',
            radius: '70%',
            /*center: ['55%', '55%'],*/
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#4169E1', '#A8A8A8'];
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}'
                }
              }
            },
            data: [{value: this.openingLong, name: '开机时间'},
              {value: this.closedLong, name: '关机时间'}]
          }]
        };
        UtilizationLine.setOption(statChartPieOption1);

        //运行时间\待机时间
        let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons');
        let statChartPieOption2 = {
          title: {
            x: 'left',
            subtext: '运行效率'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            y: 'bottom',
            data: ['运行时间', '待机时间']
          },
          calculable: true,
          series: [{
            name: '运行效率',
            type: 'pie',
            radius: '70%',
            center: ['55%', '55%'],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#00ee00', '#FCCE10'];
                  return colorList[params.dataIndex]
                },
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}'
                }
              }
            },
            data: [{value: this.processLong, name: '运行时间'},
              {value: this.waitingLong, name: '待机时间'}]
          }]
        };
        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();
          }
        })
      },
      dataChange(val) {
        this.queryParam.collectTime1 = "";
        this.queryParams.dateTime = val.format('YYYYMMDD')
        this.queryParams.collectTime = val.format('YYYY-MM-DD');

      },
      initEquipmentNode(id) {
        let _this = this
        getAction(this.url.getBaseTree).then((res) => {
          if (res.success) {
            // console.log(res.result[0].entity.tierName)
            _this.$set(this.queryParam, 'tierName', res.result[0].title)
          } else {
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
        // getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => {
        //   if (res.success) {
        //     if (res.result) {
        //       _this.$set(this.queryParam, 'tierName', res.result.tierName)
        //       _this.$set(this.queryParam, 'equipmentId', res.result.equipmentId)
        //       // _this.quip = res.result
        //       _this.searchQuery()
        //     } else {
        //       _this.$message.warning('请配置设备！')
        //     }
        //   }
        // })
      },
      searchReset() {
        this.queryParam = {}
        this.queryParams = {}
        // this.dates = []
        this.queryStatistical()
        // this.onClearSelected()
      },
      searchQuery(){
        this.queryStatistical();
      }
    },
    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()
        }else{
          this.queryParams.parentId = val.key
          this.queryParams.equipmentIds = ''
          this.$set(this.queryParam, 'tierName', val.title)
          this.searchQuery()
        }
        this.searchQuery()
      }
      // this.searchQuery();


    }

  }
</script>

<style scoped>
  .charContent{
    display: flex;
  }
  @media screen and (min-width: 1920px){
    #StatisticsLegend{
      height: 748px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    #StatisticsLegend{
      height: 748px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    #StatisticsLegend{
      height: 600px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    #StatisticsLegend{
      height: 501px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    #StatisticsLegend{
      height: 501px!important;
      overflow: scroll;
    }
  }
  #StatisticsLegend .PowerOnRate{
    flex: 1;
    margin-bottom: 15px;
    background-color: #fff;
  }
  #StatisticsLegend .UtilizationStartup{
    flex: 1;
    display: flex;
  }
  #StatisticsLegend .UtilizationStartup>div{
    flex: 1;
    background-color: #fff;
  }
  #StatisticsLegend .UtilizationStartup .Utilization{
    margin-right: 15px;
  }
  .title{
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-top: 5px;
  }
  .title .circle{
    width: 15px;
    height: 15px;
    background-color: #7282ec;
    border-radius: 100%;
    margin-right: 10px;
  }
  .title .text{
    font-size: 2vh;
  }
  .Line-box{
    display: flex;
    flex-direction: column;
  }
  .Line-box .box-bottom{
    flex: 1;
  }
  .PowerOnRate-box{
    display: flex;
  }
  .PowerOnRate-box .PowerOnRate-left{
    width: 25%;
  }
  .PowerOnRate-box .PowerOnRate_text{
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 800;
  }
  .PowerOnRate-box .PowerOnRate-right{
    flex: 1;
  }
  .Utilization-box{
    display: flex;
  }
  .Utilization-box .Utilization-left{
    width: 25%;
  }
  .Utilization-box .Utilization-right{
    flex: 1;
  }
  .Startup-box{
    display: flex;
  }
  .Startup-box .Startup-left{
    width: 25%;
  }
  .Startup-box .Startup-right{
    flex: 1;
  }
  .left{
    display: flex;
    align-items: center;
  }
  .left .left-box{
    width: 65%;
    height: 60%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;

    /*border: 6px solid red;*/
    /*!*background-color: yellow;*!*/
    /*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
  }
  .left-box-con{
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    border: 6px solid red;
    /*background-color: yellow;*/
    border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
  }
  .left .left-box .Rate-box-kong{
    width: 100%;
    background: -moz-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
    background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%,#b5dec2), color-stop(100%,#f4f5ba));
    background: -webkit-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%);
    background: -o-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%);
    background: -ms-linear-gradient(bottom, #b5dec2 0%,#f4f5ba 100%);
    background: linear-gradient(to top, #b5dec2 0%,#f4f5ba 100%);
  }
  .left .left-box .Rate-box{
    position: absolute;
    text-align: center;
    bottom: 0;
    width: 100%;
    height: 89%;
    /*background-color: green;*/
    background: -moz-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
    background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%,#06a8f8), color-stop(100%,#2bf3c7));
    background: -webkit-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%);
    background: -o-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%);
    background: -ms-linear-gradient(bottom, #06a8f8 0%,#2bf3c7 100%);
    background: linear-gradient(to top, #06a8f8 0%,#2bf3c7 100%);
  }
  .left .left-box .Rate-box p{
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
    text-align: center;
  }
  .con-left{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  .con-left>span{
    flex: 1;
  }
</style>