1、解决班组设备利用率以及配送小组利用率图表页面查询区域班组无法随中变化而变化问题 2、解决查询区域班组项与配送小组列表与勾选不一致问题

zhaowei

2025-06-23 78689c3fab03143d803712ab9d7c02072cecc67b

1、解决班组设备利用率以及配送小组利用率图表页面查询区域班组无法随中变化而变化问题
2、解决查询区域班组项与配送小组列表与勾选不一致问题

 src/views/mdc/base/DeliveryGroupUtilizationRateChart.vue

@@ -28,7 +28,7 @@

          <a-col :md="8" :sm="8">
            <a-form-item label="配送小组">
              <a-select v-model="teamCodes" placeholder="请选择配送小组" mode="multiple" :maxTagCount="3"
              <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>
@@ -45,7 +45,6 @@
          <a-col :md="2" :sm="2">
            <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>
@@ -57,271 +56,264 @@
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment/moment'
import mdcApi from '@api/mdc'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import moment from 'moment/moment'
  import mdcApi from '@api/mdc'

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) {
  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: '暂无数据'
                description: res.message
              })
              // 此处未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
          }
        ]
      }
      this.chartContainer.setOption(option, true)
      this.chartContainer.hideLoading()
    },

    // 获取中心列表
    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)
          }
        })
    },

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

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

            if (!isReduceSelectOption) return
            that.teamCodes.forEach((key, keyIndex, self) => {
              // 如果将唯一一组包含选中配送小组项的班组取消勾选后应将已勾选的配送小组一并取消勾选
              if (that.deliveryGroupList.findIndex(item => item.key === key) === -1) self.splice(keyIndex, 1)
          .catch(err => {
            that.$notification.error({
              message: '消息',
              description: err.message
            })
          }
        })
    },
          })
      },

    /**
     * 中心改变时触发
     * @param value 改变后的中心Id
     */
    handleCenterSelectChange(value) {
      if (this.productionIds.length > 0) {
      /**
       * 初始化图表
       * @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
            }
          ]
        }
        this.chartContainer.setOption(option, true)
        this.chartContainer.hideLoading()
      },

      // 获取中心列表
      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)
            }
          })
      },

      /**
       * 获取班组列表
       * @param productionId 中心Id
       * @param isInitLoad 是否为初始化加载
       */
      getGroupListByApi(productionId, isInitLoad = false) {
        this.groupList = []
        this.productionIds = []
        delete this.queryParam.productionIds
      }
      if (this.teamCodes.length > 0) {
        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()
            }
          })
      },

      /**
       * 获取配送小组列表
       * @param productionId 班组Id
       * @param isReduceSelectOption 是否减少班组选中项
       */
      getDeliveryGroupListByApi(productionId, isReduceSelectOption = false) {
        this.deliveryGroupList = []
        this.teamCodes = []
        delete this.queryParam.teamCodes
        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()
      }
      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.queryParam.teamCodes = value.join(',')
    },

    handleWindowResize() {
      if (this.chartContainer) this.chartContainer.resize()
    }
  }
}
</script>

 src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue

@@ -34,7 +34,6 @@
          <a-col :md="5" :sm="5">
            <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>
@@ -46,246 +45,237 @@
</template>

<script>
import mdcApi from '@api/mdc'
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import mdcApi from '@api/mdc'
  import moment from 'moment'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'GroupEquipmentUtilizationRateChart',
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      disableMixinCreated: true,
      productionIds: [],//班组
      centerList: [],
      groupList: [],
      queryParam: {
        month: moment().subtract('1', 'month').format('YYYYMM')
  export default {
    name: 'GroupEquipmentUtilizationRateChart',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        productionIds: [],//班组
        centerList: [],
        groupList: [],
        queryParam: {
          month: moment().subtract('1', 'month').format('YYYYMM')
        }
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.handleWindowResize()
    this.getCenterListByApi()
  },
  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.getGroupEquipmentChartDataApi(this.queryParam)
        .then(res => {
          if (res.success) {
            if (Object.keys(res.result).length === 0 || res.result.equipmentNameList.length === 0) {
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
      this.getCenterListByApi()
    },
    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.getGroupEquipmentChartDataApi(this.queryParam)
          .then(res => {
            if (res.success) {
              if (Object.keys(res.result).length === 0 || res.result.equipmentNameList.length === 0) {
                that.$notification.warning({
                  message: '消息',
                  description: '暂无数据'
                })
                // 此处未return是为保证图表数据能被清除并展示空图表
              }
              that.initChart(res.result)
            } else {
              that.$notification.warning({
                message: '消息',
                description: '暂无数据'
                description: res.message
              })
              // 此处未return是为保证图表数据能被清除并展示空图表
            }
            that.initChart(res.result)
          } else {
            that.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        })
        .catch(err => {
          that.$notification.error({
            message: '消息',
            description: err.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: ['立加u1000-3', '五轴125P', '五坐标加工中心GS1000', 'A轴1000PLUS', '梧州80P_2', '雕刻机800TE', '四坐标立加104V', '立加u1000-4', '立加GX710_1', '三坐标立加1350', '卧加H5000-1', '立加u1000-2', '立加1000HS_1', '立加1160_1', '立加GX710_2', '立加u1000-3', '五轴125P', '五坐标加工中心GS1000', 'A轴1000PLUS', '梧州80P_2', '雕刻机800TE', '四坐标立加104V', '立加u1000-4', '立加GX710_1', '三坐标立加1350', '卧加H5000-1', '立加u1000-2', '立加1000HS_1', '立加1160_1', '立加GX710_2', '立加u1000-3', '五轴125P', '五坐标加工中心GS1000', 'A轴1000PLUS', '梧州80P_2', '雕刻机800TE', '四坐标立加104V'],
          data: chartDataObj.equipmentNameList ? chartDataObj.equipmentNameList : [],
          axisLabel: {
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: 45, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 15, // 刻度标签与轴线之间的距离
            fontSize: 14,
            color: '#000'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '利用率(%)',
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}%'
      /**
       * 初始化图表
       * @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
            }
          }
        ],
        series: [
          {
            type: 'bar',
            name: '24h综合利用率',
            // data: [53.28, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
            data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.utilizationRate) : []
            // label: {
            //   show: true,
            //   position: 'top',
            //   formatter: '{c}%',
            //   avoidLabelOverlap: true
            // }
          },
          {
            type: 'bar',
            name: '24h去除故障',
            data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.amendUtilizationRate) : []
            // data: [53.28, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
          grid: {
            top: '12%',
            left: '1%',
            right: '1%',
            bottom: '8%',
            containLabel: true
          },
          {
            type: 'bar',
            name: '计划工作时间综合利用率',
            data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.shiftUtilizationRate) : []
            // data: [63.25, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
          }
        ],
        dataZoom: [
          {
            type: 'slider',
          legend: {
            top: '6%',
            right: 'center',
            itemGap: 20,
            data: ['24h综合利用率', '24h去除故障', '计划工作时间综合利用率']
          },
          tooltip: {
            show: true,
            xAxisIndex: 0,
            startValue: 0,
            endValue: 19,
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: 'empty',
            // 控制手柄的尺寸
            // handleSize: 0,
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLock: true,
            brushSelect: false
            trigger: 'axis'
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: 'inside',
            show: true,
            // 控制哪个轴，如果是number表示控制一个轴，
            xAxisIndex: 0,
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标移动能否触发平移
            moveOnMouseMove: true,
            // 鼠标滚轮能否触发平移
            moveOnMouseWheel: true
          }
        ]
          xAxis: {
            type: 'category',
            // data: ['立加u1000-3', '五轴125P', '五坐标加工中心GS1000', 'A轴1000PLUS', '梧州80P_2', '雕刻机800TE', '四坐标立加104V', '立加u1000-4', '立加GX710_1', '三坐标立加1350', '卧加H5000-1', '立加u1000-2', '立加1000HS_1', '立加1160_1', '立加GX710_2', '立加u1000-3', '五轴125P', '五坐标加工中心GS1000', 'A轴1000PLUS', '梧州80P_2', '雕刻机800TE', '四坐标立加104V', '立加u1000-4', '立加GX710_1', '三坐标立加1350', '卧加H5000-1', '立加u1000-2', '立加1000HS_1', '立加1160_1', '立加GX710_2', '立加u1000-3', '五轴125P', '五坐标加工中心GS1000', 'A轴1000PLUS', '梧州80P_2', '雕刻机800TE', '四坐标立加104V'],
            data: chartDataObj.equipmentNameList ? chartDataObj.equipmentNameList : [],
            axisLabel: {
              interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: 45, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // 刻度标签是否朝内，默认朝外
              margin: 15, // 刻度标签与轴线之间的距离
              fontSize: 14,
              color: '#000'
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '利用率(%)',
              axisLine: {
                show: true
              },
              axisLabel: {
                formatter: '{value}%'
              }
            }
          ],
          series: [
            {
              type: 'bar',
              name: '24h综合利用率',
              // data: [53.28, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
              data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.utilizationRate) : []
              // label: {
              //   show: true,
              //   position: 'top',
              //   formatter: '{c}%',
              //   avoidLabelOverlap: true
              // }
            },
            {
              type: 'bar',
              name: '24h去除故障',
              data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.amendUtilizationRate) : []
              // data: [53.28, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
            },
            {
              type: 'bar',
              name: '计划工作时间综合利用率',
              data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.shiftUtilizationRate) : []
              // data: [63.25, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
            }
          ],
          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
            }
          ]
        }
        this.chartContainer.setOption(option, true)
        this.chartContainer.hideLoading()
      },

      // 获取中心列表
      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)
            }
          })
      },

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

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

      /**
       * 班组发生改变时触发
       * @param value 改变后的班组Id
       */
      handleGroupSelectChange(value) {
        this.productionIds = value
        this.queryParam.productionIds = value.join(',')
      },

      handleWindowResize() {
        if (this.chartContainer) this.chartContainer.resize()
      }
      this.chartContainer.setOption(option, true)
      this.chartContainer.hideLoading()
    },

    // 获取中心列表
    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)
          }
        })
    },

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

    /**
     * 中心改变时触发
     * @param value 改变后的中心Id
     */
    handleCenterSelectChange(value) {
      if (this.productionIds.length > 0) {
        this.groupList = []
        this.productionIds = []
        delete this.queryParam.productionIds
      }
      this.getGroupListByApi(value)
    },

    /**
     * 班组发生改变时触发
     * @param value 改变后的班组Id
     */
    handleGroupSelectChange(value) {
      this.productionIds = value
      if (value.length === 0) {
        delete this.queryParam.productionIds
        return
      }
      this.queryParam.productionIds = value.join(',')
    },

    handleWindowResize() {
      if (this.chartContainer) this.chartContainer.resize()
    }
  }
}
</script>

 src/views/mdc/base/GroupUtilizationRateChart.vue

@@ -5,7 +5,7 @@
        <a-row :gutter="24">
          <a-col :md="3" :sm="3">
            <a-form-item label="中心">
              <a-select v-model="queryParam.productionId" placeholder="请选择中心">
              <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>
@@ -44,21 +44,9 @@
            </a-form-item>
          </a-col>


          <!--          <a-col :md="5" :sm="5">-->
          <!--            <a-form-item label="班次">-->
          <!--              <a-select v-model="queryParam.workTime" placeholder="请选择班次" mode="multiple" :maxTagCount="2">-->
          <!--                <a-select-option key="123">一班</a-select-option>-->
          <!--                <a-select-option key="234">二班</a-select-option>-->
          <!--                <a-select-option key="345">三班</a-select-option>-->
          <!--              </a-select>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <a-col :md="2" :sm="2">
            <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>
@@ -70,225 +58,237 @@
</template>

<script>
import mdcApi from '@api/mdc'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import mdcApi from '@api/mdc'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'GroupUtilizationRateChart',
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      disableMixinCreated: true,
      queryParam: {},
      productionIds: [],//班组
      centerList: [],
      groupList: [],
      equipmentTypeList: [],
      shiftList: []
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.handleWindowResize()
    this.getCenterListByApi()
    this.getEquipmentTypeListApi()
    this.getShiftListByApi()
  },
  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.getGroupChartDataApi(this.queryParam)
        .then(res => {
          if (res.success) {
            if (!res.result.dataList || (res.result.dataList && res.result.dataList.length === 0)) {
              that.$notification.warning({
                message: '消息',
                description: '暂无数据'
              })
            }
            that.initChart(res.result)
          }
        })
  export default {
    name: 'GroupUtilizationRateChart',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        queryParam: {},
        productionIds: [],//班组
        centerList: [],
        groupList: [],
        equipmentTypeList: [],
        shiftList: []
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
      this.getCenterListByApi()
      this.getEquipmentTypeListApi()
      this.getShiftListByApi()
    },
    methods: {
      // 获取数据
      loadData() {
        this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
        this.initChart({})
        this.chartContainer.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#0696e1'
        })
        const that = this

    /**
     * 初始化图表
     * @param dataList 图表数据源
     * @param dateList 日期列表
     * @param shiftSubList 班次标题列表
     * @param shiftDataList 班次数据列表
     */
    initChart({ dataList, dateList, shiftSubList, shiftDataList }) {
      const defaultLegendData = ['24小时', '24小时（去除故障时间）', '班次', '累计运行时间(h)']
      const defaultSeries = [
        {
          type: 'line',
          name: '24小时',
          yAxisIndex: 0,
          data: dataList ? dataList.map(item => item.utilizationRate) : []
        },
        {
          type: 'line',
          name: '24小时（去除故障时间）',
          yAxisIndex: 0,
          data: dataList ? dataList.map(item => item.amendUtilizationRate) : []
        },
        {
          type: 'line',
          name: '班次',
          yAxisIndex: 0,
          data: dataList ? dataList.map(item => item.shiftUtilizationRate) : []
        },
        {
          type: 'bar',
          name: '累计运行时间(h)',
          yAxisIndex: 1,
          barWidth: '30%',
          data: dataList ? dataList.map(item => item.processLong) : []
        }
      ]
      const option = {
        title: {
          text: '设备综合利用率',
          left: 'center',
          top: 0,
          textStyle: {
            fontSize: 22
          }
        },
        grid: {
          top: '12%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        legend: {
          top: '6%',
          right: 'center',
          itemGap: 20,
          data: defaultLegendData
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: dateList ? dateList : []
        },
        yAxis: [
          {
            type: 'value',
            name: '利用率(%)',
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}%'
        mdcApi.getGroupChartDataApi(this.queryParam)
          .then(res => {
            if (res.success) {
              if (!res.result.dataList || (res.result.dataList && res.result.dataList.length === 0)) {
                that.$notification.warning({
                  message: '消息',
                  description: '暂无数据'
                })
              }
              that.initChart(res.result)
            }
          })
      },

      /**
       * 初始化图表
       * @param dataList 图表数据源
       * @param dateList 日期列表
       * @param shiftSubList 班次标题列表
       * @param shiftDataList 班次数据列表
       */
      initChart({ dataList, dateList, shiftSubList, shiftDataList }) {
        const defaultLegendData = ['24小时', '24小时（去除故障时间）', '班次', '累计运行时间(h)']
        const defaultSeries = [
          {
            type: 'line',
            name: '24小时',
            yAxisIndex: 0,
            data: dataList ? dataList.map(item => item.utilizationRate) : []
          },
          {
            type: 'value',
            name: '运行时间(h)',
            axisLine: {
              show: true
            }
          }
        ],
        series: defaultSeries
      }
      if (shiftSubList) {
        option.legend.data = defaultLegendData.concat(shiftSubList)
        const newSeriesData = shiftDataList.map(item => {
          return {
            type: 'line',
            name: item.shiftSubName,
            name: '24小时（去除故障时间）',
            yAxisIndex: 0,
            data: item.dataList ? item.dataList.map(item => item.utilizationRate) : []
            data: dataList ? dataList.map(item => item.amendUtilizationRate) : []
          },
          {
            type: 'line',
            name: '班次',
            yAxisIndex: 0,
            data: dataList ? dataList.map(item => item.shiftUtilizationRate) : []
          },
          {
            type: 'bar',
            name: '累计运行时间(h)',
            yAxisIndex: 1,
            barWidth: '30%',
            data: dataList ? dataList.map(item => item.processLong) : []
          }
        })
        ]
        const option = {
          title: {
            text: '设备综合利用率',
            left: 'center',
            top: 0,
            textStyle: {
              fontSize: 22
            }
          },
          grid: {
            top: '12%',
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
          },
          legend: {
            top: '6%',
            right: 'center',
            itemGap: 20,
            data: defaultLegendData
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: dateList ? dateList : []
          },
          yAxis: [
            {
              type: 'value',
              name: '利用率(%)',
              axisLine: {
                show: true
              },
              axisLabel: {
                formatter: '{value}%'
              }
            },
            {
              type: 'value',
              name: '运行时间(h)',
              axisLine: {
                show: true
              }
            }
          ],
          series: defaultSeries
        }
        if (shiftSubList) {
          option.legend.data = defaultLegendData.concat(shiftSubList)
          const newSeriesData = shiftDataList.map(item => {
            return {
              type: 'line',
              name: item.shiftSubName,
              yAxisIndex: 0,
              data: item.dataList ? item.dataList.map(item => item.utilizationRate) : []
            }
          })

        option.series = defaultSeries.concat(newSeriesData)
          option.series = defaultSeries.concat(newSeriesData)
        }

        this.chartContainer.setOption(option, true)
        this.chartContainer.hideLoading()
      },

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

      /**
       * 获取班组列表
       * @param productionId 中心Id
       */
      getGroupListByApi(productionId, isInitLoad) {
        this.groupList = []
        const that = this
        mdcApi.getCenterOrGroupListApi(productionId)
          .then(res => {
            if (res.success) {
              that.groupList = res.result
              that.handleGroupSelectChange(res.result && res.result.length > 0 && isInitLoad ? [res.result[0].value] : [])
              if (!isInitLoad) return
              that.loadData()
            }
          })
      },

      /**
       * 中心发生改变时触发
       * @param value 改变后的值
       * @param isInitLoad 是否为初始化加载
       */
      handleCenterSelectChange(value, { isInitLoad }) {
        this.getGroupListByApi(value, isInitLoad)
      },

      /**
       * 班组发生改变时触发
       * @param value 改变后的值
       */
      handleGroupSelectChange(value) {
        this.productionIds = value
        this.queryParam.productionIds = value.join(',')
      },

      // 获取设备类型列表
      getEquipmentTypeListApi() {
        const that = this
        mdcApi.getEquipmentTypeListApi()
          .then(res => {
            if (res.success) {
              that.equipmentTypeList = res.result
            }
          })
      },

      // 获取班制列表
      getShiftListByApi() {
        const that = this
        mdcApi.getShiftListApi()
          .then(res => {
            if (res.success) {
              that.shiftList = res.result
            }
          })
      },

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

      this.chartContainer.setOption(option, true)
      this.chartContainer.hideLoading()
    },

    // 获取中心列表
    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)
          }
        })
    },

    /**
     * 获取班组列表
     * @param productionId 中心Id
     */
    getGroupListByApi(productionId) {
      const that = this
      mdcApi.getCenterOrGroupListApi(productionId)
        .then(res => {
          if (res.success) {
            that.groupList = res.result
            that.handleGroupSelectChange([res.result[0].value])
            that.loadData()
          }
        })
    },

    /**
     * 班组发生改变时触发
     * @param value 改变后的值
     */
    handleGroupSelectChange(value) {
      this.productionIds = value
      this.queryParam.productionIds = value.join(',')
    },

    // 获取设备类型列表
    getEquipmentTypeListApi() {
      const that = this
      mdcApi.getEquipmentTypeListApi()
        .then(res => {
          if (res.success) {
            that.equipmentTypeList = res.result
          }
        })
    },

    // 获取班制列表
    getShiftListByApi() {
      const that = this
      mdcApi.getShiftListApi()
        .then(res => {
          if (res.success) {
            that.shiftList = res.result
          }
        })
    },

    handleWindowResize() {
      if (this.chartContainer) this.chartContainer.resize()
    }
  }
}
</script>

 src/views/mdc/base/GroupUtilizationRateCompareChart.vue

@@ -16,7 +16,6 @@
          <a-col :md="5" :sm="5">
            <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>
@@ -32,186 +31,188 @@
</template>

<script>
import mdcApi from '@api/mdc'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import mdcApi from '@api/mdc'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'GroupUtilizationRateCompareChart',
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      disableMixinCreated: true,
      centerList: [],
      chartsOptionList: [
        {
          position: 'left',
          title: '班组设备综合利用率（24h）',
          property: 'utilizationRateList'
        },
        {
          position: 'middle',
          title: '班组设备综合利用率（24h去除故障时间）',
          property: 'amendUtilizationRateList'
        },
        {
          position: 'right',
          title: '班组设备综合利用率（计划工作时间）',
          property: 'shiftUtilizationRateList'
        }
      ],
      leftChartContainer: null,
      middleChartContainer: null,
      rightChartContainer: null
    }
  },

  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.getCenterListByApi()
    this.handleWindowResize()
  },
  methods: {
    // 获取图表数据
    loadData() {
      const that = this
      this.chartsOptionList.forEach(item => {
        that.initChart(item.position)
        that.chartSetOption(item.position, item.title, [], [], false)
      })
      mdcApi.getGroupRateCompareChartDataApi(this.queryParam.productionId)
        .then(res => {
          if (res.success) {
            that.chartsOptionList.forEach(item => this.chartSetOption(item.position, item.title, res.result[item.property], res.result.dateList))
          } else {
            that.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        })
        .catch(err => {
          that.$notification.error({
            message: '消息',
            description: err.message
          })
        })
    },

    /**
     * 初始化图表
     * @param position 图表位置 String
     */
    initChart(position) {
      this[position + 'ChartContainer'] = this.$echarts.init(document.getElementById(`chart-container-${position}`))
      this[position + 'ChartContainer'].showLoading({
        text: '数据加载中 ...',
        color: '#0696e1', // 加载动画颜色
        textColor: '#0696e1'
      })
    },

    /**
     * 设置图标选项
     * @param position 图表位置 String
     * @param title 图表标题 String
     * @param dataList 图表数据源 Array
     * @param dateList 图表横坐标月份 Array
     * @param isHideLoading 是否关闭加载图标 Boolean
     */
    chartSetOption(position, title, dataList, dateList, isHideLoading = true) {
      const option = {
        title: {
          text: title,
          left: 'center',
          top: 0,
          textStyle: {
            fontSize: 22
          }
        },
        grid: {
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '12%',
          containLabel: true
        },
        legend: {
          bottom: '3%',
          right: 'center',
          data: dataList.map(item => item.productionName)
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: dateList
        },
        yAxis: [
  export default {
    name: 'GroupUtilizationRateCompareChart',
    components: {},
    mixins: [JeecgListMixin],
    data() {
      return {
        disableMixinCreated: true,
        centerList: [],
        chartsOptionList: [
          {
            type: 'value',
            name: '利用率(%)',
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}%'
            }
            position: 'left',
            title: '班组设备综合利用率（24h）',
            property: 'utilizationRateList'
          },
          {
            position: 'middle',
            title: '班组设备综合利用率（24h去除故障时间）',
            property: 'amendUtilizationRateList'
          },
          {
            position: 'right',
            title: '班组设备综合利用率（计划工作时间）',
            property: 'shiftUtilizationRateList'
          }
        ],
        series: dataList.map(item => {
          return {
            type: 'line',
            name: item.productionName,
            data: item.dataList.map(item => item.utilizationRate)
          }
        })
        // series: [
        //   {
        //     type: 'line',
        //     name: '数铣一班',
        //     data: [85, 32, 23, 56, 24, 64]
        //   },
        //   {
        //     type: 'line',
        //     name: '数铣二班',
        //     data: [23, 42, 76, 54, 87, 34]
        //   },
        //   {
        //     type: 'line',
        //     name: '数铣三班',
        //     data: [10, 84, 21, 42, 53, 57]
        //   },
        //   {
        //     type: 'line',
        //     name: '数车班',
        //     data: [23, 32, 42, 35, 64, 53]
        //   }
        // ]
        leftChartContainer: null,
        middleChartContainer: null,
        rightChartContainer: null
      }
      this[position + 'ChartContainer'].setOption(option, true)
      if (isHideLoading) this[position + 'ChartContainer'].hideLoading()
    },

    // 获取中心列表
    getCenterListByApi() {
      mdcApi.getCenterOrGroupListApi()
        .then(res => {
          if (res.success) {
            this.centerList = res.result
            this.queryParam.productionId = res.result[0].value
            this.loadData()
          }
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.getCenterListByApi()
      this.handleWindowResize()
    },
    methods: {
      // 获取图表数据
      loadData() {
        const that = this
        this.chartsOptionList.forEach(item => {
          that.initChart(item.position)
          that.chartSetOption(item.position, item.title, [], [], false)
        })
    },
        mdcApi.getGroupRateCompareChartDataApi(this.queryParam.productionId)
          .then(res => {
            if (res.success) {
              that.chartsOptionList.forEach(item => this.chartSetOption(item.position, item.title, res.result[item.property], res.result.dateList))
            } else {
              that.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          })
          .catch(err => {
            that.$notification.error({
              message: '消息',
              description: err.message
            })
          })
      },

    handleWindowResize() {
      if (this.leftChartContainer) this.leftChartContainer.resize()
      if (this.middleChartContainer) this.middleChartContainer.resize()
      if (this.rightChartContainer) this.rightChartContainer.resize()
      /**
       * 初始化图表
       * @param position 图表位置 String
       */
      initChart(position) {
        this[position + 'ChartContainer'] = this.$echarts.init(document.getElementById(`chart-container-${position}`))
        this[position + 'ChartContainer'].showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#0696e1'
        })
      },

      /**
       * 设置图标选项
       * @param position 图表位置 String
       * @param title 图表标题 String
       * @param dataList 图表数据源 Array
       * @param dateList 图表横坐标月份 Array
       * @param isHideLoading 是否关闭加载图标 Boolean
       */
      chartSetOption(position, title, dataList, dateList, isHideLoading = true) {
        const option = {
          title: {
            text: title,
            left: 'center',
            top: 0,
            textStyle: {
              fontSize: 22
            }
          },
          grid: {
            top: '10%',
            left: '1%',
            right: '1%',
            bottom: '12%',
            containLabel: true
          },
          legend: {
            bottom: '3%',
            right: 'center',
            data: dataList.map(item => item.productionName)
          },
          tooltip: {
            show: true,
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: dateList
          },
          yAxis: [
            {
              type: 'value',
              name: '利用率(%)',
              axisLine: {
                show: true
              },
              axisLabel: {
                formatter: '{value}%'
              }
            }
          ],
          series: dataList.map(item => {
            return {
              type: 'line',
              name: item.productionName,
              data: item.dataList.map(item => item.utilizationRate)
            }
          })
          // series: [
          //   {
          //     type: 'line',
          //     name: '数铣一班',
          //     data: [85, 32, 23, 56, 24, 64]
          //   },
          //   {
          //     type: 'line',
          //     name: '数铣二班',
          //     data: [23, 42, 76, 54, 87, 34]
          //   },
          //   {
          //     type: 'line',
          //     name: '数铣三班',
          //     data: [10, 84, 21, 42, 53, 57]
          //   },
          //   {
          //     type: 'line',
          //     name: '数车班',
          //     data: [23, 32, 42, 35, 64, 53]
          //   }
          // ]
        }
        this[position + 'ChartContainer'].setOption(option, true)
        if (isHideLoading) this[position + 'ChartContainer'].hideLoading()
      },

      // 获取中心列表
      getCenterListByApi() {
        this.centerList = []
        const that = this
        mdcApi.getCenterOrGroupListApi()
          .then(res => {
            if (res.success) {
              that.centerList = res.result
              that.$set(that.queryParam, 'productionId', res.result[0].value)
              that.loadData()
            }
          })
      },

      handleWindowResize() {
        if (this.leftChartContainer) this.leftChartContainer.resize()
        if (this.middleChartContainer) this.middleChartContainer.resize()
        if (this.rightChartContainer) this.rightChartContainer.resize()
      }
    }
  }
}
</script>

 src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue

@@ -7,7 +7,7 @@
          <a-row :gutter="24">
            <a-col :md="5" :sm="5">
              <a-form-item label="设备">
                <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch"
                <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch" @click="deviceSearch"
                                placeholder='请选择设备'/>
              </a-form-item>
            </a-col>