Merge remote-tracking branch 'origin/master'

lyh

2025-06-23 266db48e639ce2cd84572c8586876d906b8ce6b8

 src/views/mdc/base/DeliveryGroupUtilizationRateChart.vue

@@ -1,82 +1,319 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
            <a-tab-pane v-if="isDepartType == 0" key="2" tab="部门层级">,
              <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <ChartComponent :nodePeople='selectPeople' :nodeTree='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>
  <a-card>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="3" :sm="3">
            <a-form-item label="中心">
              <a-select v-model="queryParam.productionId" placeholder="请选择中心" @change="handleCenterSelectChange">
                <a-select-option v-for="item in centerList" :key="item.key">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>


          <a-col :md="8" :sm="8">
            <a-form-item label="班组">
              <a-select :value="productionIds" placeholder="请选择班组" mode="multiple" :maxTagCount="3"
                        @change="handleGroupSelectChange" allowClear>
                <a-select-option v-for="item in groupList" :key="item.key">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>


          <a-col :md="8" :sm="8">
            <a-form-item label="配送小组">
              <a-select :value="teamCodes" placeholder="请选择配送小组" mode="multiple" :maxTagCount="3"
                        @change="handleDeliverGroupSelectChange" allowClear>
                <a-select-option v-for="item in deliveryGroupList" :key="item.key">{{ item.title }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="3" :sm="3">
            <a-form-item label="月份">
              <a-month-picker v-model="queryParam.month" style="width: 100%" value-format="YYYYMM" :allowClear="false"
                              placeholder="请选择月份"/>
            </a-form-item>
          </a-col>

          <a-col :md="2" :sm="2">
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div id="chart-container" style="height: 700px"></div>
  </a-card>
</template>

<script>
import BaseTree from '../common/BaseTree'
import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
import { mapActions } from 'vuex'
import ChartComponent from '@views/mdc/base/modules/DeliveryGroupUtilizationRateChart/ChartComponent.vue'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import moment from 'moment/moment'
  import mdcApi from '@api/mdc'

export default {
  name: 'DeliveryGroupUtilizationRateChart',
  components: {
    ChartComponent,
    BaseTree,
    DepartTree,
  },
  data() {
    return {
      activeKey: '1',
      selectEquipment: {},
      selectPeople: {},
      selectTypeTree: '',
      isDepartType: ''
    }
  },
  created() {
    this.queryTreeData()
  },
  methods: {
    ...mapActions(['QueryDepartTree']),

    queryTreeData() {
      this.QueryDepartTree().then(res => {
        if (res.success) {
          this.isDepartType = res.result[0].value
        } else {
          this.$notification.warning({
            message: '消息',
            description: res.message
  export default {
    name: 'DeliveryGroupUtilizationRateChart',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        queryParam: {
          month: moment().subtract('1', 'month').format('YYYYMM')
        },
        productionIds: [],//班组
        teamCodes: [],//配送小组
        centerList: [],//中心列表
        groupList: [],//班组列表
        deliveryGroupList: []//配送小组列表
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.getCenterListByApi()
      this.handleWindowResize()
    },
    methods: {
      loadData() {
        this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
        this.initChart({})
        this.chartContainer.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#0696e1'
        })
        const that = this
        mdcApi.getDeliveryGroupChartDataApi(this.queryParam)
          .then(res => {
            if (res.success) {
              if (Object.keys(res.result).length === 0 || res.result.teamCodeList.length === 0) {
                that.$notification.warning({
                  message: '消息',
                  description: '暂无数据'
                })
                // 此处未return是为保证图表数据能被清除并展示空图表
              }
              that.initChart(res.result)
            } else {
              that.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          })
          .catch(err => {
            that.$notification.error({
              message: '消息',
              description: err.message
            })
          })
      },

      /**
       * 初始化图表
       * @param chartDataObj 数据对象 Object
       */
      initChart(chartDataObj) {
        const option = {
          title: {
            text: (this.queryParam.month.slice(-2) >= 10 ? this.queryParam.month.slice(-2) : this.queryParam.month.slice(-1)) + '月配送小组综合利用率',
            left: 'center',
            top: 0,
            textStyle: {
              fontSize: 22
            }
          },
          grid: {
            top: '12%',
            left: '1%',
            right: '1%',
            bottom: '8%',
            containLabel: true
          },
          legend: {
            top: '6%',
            right: 'center',
            itemGap: 20,
            data: ['24h综合利用率', '去除故障设备时间24h综合利用率', '班次利用率']
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: chartDataObj.teamCodeList ? chartDataObj.teamCodeList : []
            // data: ['李有为组', '丁红燕组', '唐东组', '朱小磊组', '张奇组', '宋宇坤组', '罗军组', '张双进组', '常振勇组', '葛应龙组', '赵广涛组', '于华亭组', '陈峻组', '王继峰组', '王晓明组', '陈林组', '吴吉平组']
          },
          yAxis: [
            {
              type: 'value',
              name: '利用率(%)',
              axisLine: {
                show: true
              },
              axisLabel: {
                formatter: '{value}%'
              }
            }
          ],
          series: [
            {
              type: 'bar',
              name: '24h综合利用率',
              // barWidth: '40%',
              // data: [85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 63, 74, 11, 58]
              data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.utilizationRate) : []
            },
            {
              type: 'bar',
              name: '去除故障设备时间24h综合利用率',
              // barWidth: '40%',
              // data: [24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 54],
              data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.amendUtilizationRate) : []
            },
            {
              type: 'bar',
              name: '班次利用率',
              // barWidth: '40%',
              // data: [24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 54],
              data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.shiftUtilizationRate) : []
            }
          ],
          dataZoom: [
            {
              type: 'slider',
              show: true,
              xAxisIndex: 0,
              startValue: 0,
              endValue: 19,
              // 是否显示detail，即拖拽时候显示详细数值信息
              showDetail: false,
              // empty：当前数据窗口外的数据，被设置为空。
              // 即不会影响其他轴的数据范围
              filterMode: 'empty',
              // 控制手柄的尺寸
              // handleSize: 0,
              // 是否锁定选择区域（或叫做数据窗口）的大小
              zoomLock: true,
              brushSelect: false
            },
            {
              // 没有下面这块的话，只能拖动滚动条，
              // 鼠标滚轮在区域内不能控制外部滚动条
              type: 'inside',
              show: true,
              // 控制哪个轴，如果是number表示控制一个轴，
              xAxisIndex: 0,
              // 滚轮是否触发缩放
              zoomOnMouseWheel: false,
              // 鼠标移动能否触发平移
              moveOnMouseMove: true,
              // 鼠标滚轮能否触发平移
              moveOnMouseWheel: true
            }
          ]
        }
      }).finally(() => {
      })
    },
        this.chartContainer.setOption(option, true)
        this.chartContainer.hideLoading()
      },

    tabChange(val) {
      this.activeKey = val
      this.selectTypeTree = val
    },
      // 获取中心列表
      getCenterListByApi() {
        const that = this
        mdcApi.getCenterOrGroupListApi()
          .then(res => {
            if (res.success) {
              that.centerList = res.result
              that.queryParam.productionId = res.result[0].value
              that.getGroupListByApi(res.result[0].value, true)
            }
          })
      },

    changeSelectionNode(val) {
      this.selectEquipment = val
      this.selectTypeTree = '1'
    },
      /**
       * 获取班组列表
       * @param productionId 中心Id
       * @param isInitLoad 是否为初始化加载
       */
      getGroupListByApi(productionId, isInitLoad = false) {
        this.groupList = []
        const that = this
        mdcApi.getCenterOrGroupListApi(productionId)
          .then(res => {
            if (res.success) {
              that.groupList = res.result ? res.result : []
              that.handleGroupSelectChange(res.result && res.result.length > 0 && isInitLoad ? [res.result[0].value] : [])
              if (!isInitLoad) return
              that.loadData()
            }
          })
      },

    changeSelectionNodedd(val) {
      this.selectPeople = val
      this.selectTypeTree = '2'
      /**
       * 获取配送小组列表
       * @param productionId 班组Id
       * @param isReduceSelectOption 是否减少班组选中项
       */
      getDeliveryGroupListByApi(productionId, isReduceSelectOption = false) {
        this.deliveryGroupList = []
        const that = this
        mdcApi.getDeliveryGroupListApi(productionId)
          .then(res => {
            if (res.success) {
              that.deliveryGroupList = res.result ? res.result : []

              // 仅减少勾选项时才进行下一步
              if (!isReduceSelectOption) return
              // 保留改变后的配送小组列表中之前已勾选的配送小组
              const filterTeamCodes = that.teamCodes.filter(item => that.deliveryGroupList.map(item => item.key).includes(item))
              that.handleDeliverGroupSelectChange(filterTeamCodes)
            }
          })
      },

      /**
       * 中心改变时触发
       * @param value 改变后的中心Id
       */
      handleCenterSelectChange(value) {
        this.getGroupListByApi(value)
      },

      /**
       * 班组改变时触发
       * @param value 改变后的班组Id
       */
      handleGroupSelectChange(value) {
        let isReduceSelectOption
        if (value.length > this.productionIds.length) isReduceSelectOption = false //增加勾选项
        else isReduceSelectOption = true // 减少勾选项
        this.productionIds = value
        this.queryParam.productionIds = value.join(',')
        this.getDeliveryGroupListByApi(value.join(','), isReduceSelectOption)
      },

      /**
       * 配送小组发生改变时触发
       * @param value 改变后的配送小组Id
       */
      handleDeliverGroupSelectChange(value) {
        this.teamCodes = value
        this.queryParam.teamCodes = value.join(',')
      },

      handleWindowResize() {
        if (this.chartContainer) this.chartContainer.resize()
      }
    }
  }

}
</script>
</script>