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

zhaowei

2025-04-01 725b0706937306c6341e5dddbcc4fd8de7b8f002

 src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue

@@ -1,82 +1,291 @@
<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="10" :sm="10">
            <a-form-item label="班组">
              <a-select :value="productionIds" placeholder="请选择班组" mode="multiple" :maxTagCount="5"
                        @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="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="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 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/GroupEquipmentUtilizationRateChart/ChartComponent.vue'
import mdcApi from '@api/mdc'
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'GroupEquipmentUtilizationRateChart',
  components: {
    ChartComponent,
    BaseTree,
    DepartTree,
  },
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      activeKey: '1',
      selectEquipment: {},
      selectPeople: {},
      selectTypeTree: '',
      isDepartType: ''
      disableMixinCreated: true,
      productionIds: [],//班组
      centerList: [],
      groupList: [],
      queryParam: {
        month: moment().subtract('1', 'month').format('YYYYMM')
      }
    }
  },
  created() {
    this.queryTreeData()
  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.handleWindowResize()
    this.getCenterListByApi()
  },
  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
          })
        }
      }).finally(() => {
    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: res.message
            })
          }
        })
        .catch(err => {
          that.$notification.error({
            message: '消息',
            description: err.message
          })
        })
    },

    tabChange(val) {
      this.activeKey = val
      this.selectTypeTree = val
    /**
     * 初始化图表
     * @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}%'
            }
          }
        ],
        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()
    },

    changeSelectionNode(val) {
      this.selectEquipment = val
      this.selectTypeTree = '1'
    // 获取中心列表
    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)
          }
        })
    },

    changeSelectionNodedd(val) {
      this.selectPeople = val
      this.selectTypeTree = '2'
    /**
     * 获取班组列表
     * @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>
</script>