Merge remote-tracking branch 'origin/master'

cuilei

2025-06-24 a22a69946912221dab4d32987dda6c4c8ba3c5d8

 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>