1、mdc模块实现各利用率图表页面功能并与后端进行联调 2、删除用户修改密码时的输入校验 3、删除用户管理冗余查询字段 4、调整DNC模块获取权限配置...

zhaowei

2025-04-01 725b0706937306c6341e5dddbcc4fd8de7b8f002

 src/views/mdc/base/GroupUtilizationRateCompareChart.vue

@@ -1,14 +1,38 @@
<template>
  <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="请选择中心">
                <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="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>
      </a-form>
    </div>

    <div style="display: flex;justify-content: space-between">
      <div id="chart-container-left" style="height: 700px;width: 48%"></div>
      <div id="chart-container-right" style="height: 700px;width: 48%"></div>
      <div id="chart-container-left" style="height: 700px;width: 30%"></div>
      <div id="chart-container-middle" style="height: 700px;width: 30%"></div>
      <div id="chart-container-right" style="height: 700px;width: 30%"></div>
    </div>
  </a-card>
</template>

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

export default {
@@ -18,64 +42,87 @@
  data() {
    return {
      disableMixinCreated: true,
      typeTree: '',
      queryParam: {},
      driveTypeList: [],
      centerList: [],
      chartsOptionList: [
        {
          position: 'left',
          title: '班组设备综合利用率（24h）',
          property: 'utilizationRateList'
        },
        {
          position: 'middle',
          title: '班组设备综合利用率（24h去除故障时间）',
          property: 'amendUtilizationRateList'
        },
        {
          position: 'right',
          title: '班组设备综合利用率（计划工作时间）',
          property: 'shiftUtilizationRateList'
        }
      ],
      leftChartContainer: null,
      rightChartContainer: null,
      url: {}
      middleChartContainer: null,
      rightChartContainer: null
    }
  },
  props: { nodeTree: '', Type: '', nodePeople: '' },
  created() {
  },

  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.getDriveTypeByApi()
    this.loadData()
    this.getCenterListByApi()
    this.handleWindowResize()
  },
  watch: {
    Type(valmath) {
      this.dataList = []
      this.queryParam.typeTree = valmath
    },
    nodeTree(val) { //监听currSelected 变化，将变化后的数值传递给 getCurrSelected 事件
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamEquip.parentId = ''
          this.queryParamEquip.equipmentId = val.equipmentId
        } else {
          this.queryParamEquip.parentId = val.key
          this.queryParamEquip.equipmentId = ''
        }
        this.searchQuery()
      }
    },
    nodePeople(val) {
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamPeople.parentId = val.equipmentId
          this.queryParamPeople.equipmentId = ''
        } else {
          this.queryParamPeople.parentId = val.key
          this.queryParamPeople.equipmentId = ''
        }
        this.searchQuery()
      }
    }
  },
  methods: {
    // 获取图表数据
    loadData() {
      this.initChart('left')
      this.initChart('right')
      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: position === 'left' ? '各班组24小时综合效率对比' : '各班组24小时综合效率对比（去除故障设备时间）',
          text: title,
          left: 'center',
          top: 0,
          textStyle: {
@@ -86,14 +133,13 @@
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '5%',
          bottom: '12%',
          containLabel: true
        },
        legend: {
          bottom: 0,
          bottom: '3%',
          right: 'center',
          itemGap: 20,
          data: ['数铣一班', '数铣二班', '数铣三班', '数车班']
          data: dataList.map(item => item.productionName)
        },
        tooltip: {
          show: true,
@@ -101,7 +147,7 @@
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          data: dateList
        },
        yAxis: [
          {
@@ -115,63 +161,57 @@
            }
          }
        ],
        series: [
          {
        series: dataList.map(item => {
          return {
            type: 'line',
            name: '数铣一班',
            yAxisIndex: 0,
            data: [85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24]
          },
          {
            type: 'line',
            name: '数铣二班',
            yAxisIndex: 0,
            data: [23, 42, 76, 54, 87, 34, 53, 76, 54, 87, 34, 53]
          },
          {
            type: 'line',
            name: '数铣三班',
            yAxisIndex: 0,
            data: [10, 84, 21, 42, 53, 57, 32, 21, 42, 53, 57, 32]
          },
          {
            type: 'line',
            name: '数车班',
            yAxisIndex: 0,
            data: [23, 32, 42, 35, 64, 53, 16, 42, 35, 64, 53, 16]
            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()
    },

    // 调用接口获取控制系统类型
    getDriveTypeByApi() {
      api.getDriveTypeApi().then((res) => {
        this.driveTypeList = res.result.map(item => item.value)
      })
    },

    /**
     * 联想输入框筛选功能
     * @param input 输入的内容
     * @param option 配置
     * @returns {boolean} 判断是否筛选
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      )
    // 获取中心列表
    getCenterListByApi() {
      mdcApi.getCenterOrGroupListApi()
        .then(res => {
          if (res.success) {
            this.centerList = res.result
            this.queryParam.productionId = res.result[0].value
            this.loadData()
          }
        })
    },

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

<style scoped lang="less">

</style>
</script>