1、调整路由模式为hash模式以试图解决项目上线后刷新页面后无法正常跳转页面而出现JSON页面问题 2、首页设备级看板点击报修按钮跳转至故障报修页面并...

zhuzhuanzhuan

2024-04-28 221bb1704bb74b38655c2cd2413242885b5cc614

1、调整路由模式为hash模式以试图解决项目上线后刷新页面后无法正常跳转页面而出现JSON页面问题
2、首页设备级看板点击报修按钮跳转至故障报修页面并根据设备编号筛选页面对应数据

 src/api/signage.js

@@ -35,6 +35,14 @@
  getEquipmentAnnualEfficiencyStatisticsApi: equipmentId => getAction('/mdc/home/equipmentAnnualEfficiencyStatistics', { equipmentId }),
  // 工段级设备效率仪表盘
  getEquipmentLevelEfficiencyStatisticsApi: equipmentId => getAction('/mdc/home/equipmentLevelEfficiencyStatistics', { equipmentId }),
  // 设备级设备列表
  getEquipmentListApi: productionCode => getAction('/mdc/home/equipmentList', { productionCode })
  // 设备级设备列表（非操作工级进入）
  getEquipmentListApi: productionCode => getAction('/mdc/home/equipmentList', { productionCode }),
  // 设备级设备详细信息
  getEquipmentDetailsApi: equipmentId => getAction('/mdc/home/equipmentDetails', { equipmentId }),
  // 设备级设备列表（操作工级进入）
  getAllAreaEquipmentListApi: productionCode => getAction('/eam/calibrationOrder/getAllAreaEquipmentList', { productionCode }),
  // 设备级获取操作证信息
  getOperationCertificateApi: () => getAction('/eam/calibrationOrder/getOperationCertificate'),
  // 设备级设备信息和维护信息
  getEquipmentInfoApi: equipmentNum => getAction('/eam/calibrationOrder/getAreaEquipmentList', { equipmentNum })
}

 src/components/layouts/TabLayout.vue

@@ -433,9 +433,9 @@

    &.ant-tabs-card .ant-tabs-tab {

      padding: 0 20px 0 12px !important;
      padding: 0 20px 0 2px !important;
      background-color: white !important;
      margin-right: 10px !important;
      /*margin-right: 10px !important;*/

      .ant-tabs-close-x {
        width: 12px !important;

 src/mixins/JeecgListMixin.js

@@ -54,6 +54,9 @@
  created() {
      if(!this.disableMixinCreated){
        console.log(' -- mixin created -- ')
        // 此处需在loadData函数之前将参数设置为所需要的值，在组件中的created中无法设置，因为mixin的生命周期函数执行顺序优先于组件的生命周期函数
        const { equipmentId } = this.$route.params
        if(equipmentId) this.$set(this.queryParam,'equipmentNum',equipmentId)
        this.loadData();
        //初始化字典配置 在自己页面定义
        this.initDictConfig();

 src/router/index.js

@@ -19,7 +19,7 @@
}

export default new Router({
  mode: 'history',
  mode: 'hash',
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap

 src/views/dashboard/BranchFactorySignage.vue

@@ -434,7 +434,7 @@
            }
          },
          xAxis: {
            name: '单位',
            name: '',
            nameTextStyle: {
              color: '#fff'
            },
@@ -838,7 +838,7 @@
            interval: yAxisInterval,
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
              color: '#fff'
            },
            axisTick: {
              show: false

 src/views/dashboard/EquipmentSignage.vue

@@ -38,40 +38,40 @@
            <dv-border-box-11 title="设备信息" class="info-container" style="flex:5;">
              <a-descriptions :column="3">
                <a-descriptions-item label="统一编号">
                  {{equipmentInfo.equipmentId}}
                  {{equipmentInfo.num|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="ABC标识">
                  {{equipmentInfo.ABCSymbol}}
                  {{equipmentInfo.abc|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="设备名称">
                  {{equipmentInfo.equipmentName}}
                  {{equipmentInfo.name|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="型号">
                  {{equipmentInfo.equipmentType}}
                  {{equipmentInfo.model|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="设备分类">
                  {{equipmentInfo.equipmentCategory}}
                  {{equipmentInfo.equipmentCategoryName|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="工区">
                  {{equipmentInfo.workArea}}
                  {{equipmentInfo.areaName|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="操作系统">
                  {{equipmentInfo.driveType}}
                  {{equipmentInfo.system|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="规格">
                  {{equipmentInfo.standard}}
                  {{equipmentInfo.specification|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="维护部门">
                  {{equipmentInfo.depart}}
                  {{equipmentInfo.manageName|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="工段">
                  {{equipmentInfo.workshopSection}}
                  {{equipmentInfo.workShopName|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="操作工">
                  {{equipmentInfo.operator}}
                  {{operationCertificateInfo.realname|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="设备状态">
                  {{equipmentInfo.equipmentStatus}}
                  {{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}
                </a-descriptions-item>
              </a-descriptions>
            </dv-border-box-11>
@@ -79,16 +79,16 @@
            <dv-border-box-11 title="操作证信息" class="info-container" style="flex:2;">
              <a-descriptions :column="1">
                <a-descriptions-item label="操作证编号">
                  {{equipmentInfo.equipmentId}}
                  {{operationCertificateInfo.num|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="当前周期分数">
                  {{equipmentInfo.ABCSymbol}}
                  {{operationCertificateInfo.currentCycleScore|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="发证日期">
                  {{equipmentInfo.equipmentName}}
                  {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="周期截止日期">
                  {{equipmentInfo.equipmentType}}
                  {{operationCertificateInfo.endTime|equipmentInfoDisplay}}
                </a-descriptions-item>
              </a-descriptions>
            </dv-border-box-11>
@@ -96,29 +96,29 @@
            <dv-border-box-11 title="维护信息" class="info-container" style="flex:2;">
              <a-descriptions :column="1">
                <a-descriptions-item label="下次三保日期">
                  {{equipmentInfo.equipmentId}}
                  {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="下次二保日期">
                  {{equipmentInfo.ABCSymbol}}
                  {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="技术状态">
                  {{equipmentInfo.equipmentName}}
                  {{equipmentInfo.technology_status|equipmentInfoDisplay}}
                </a-descriptions-item>
              </a-descriptions>
            </dv-border-box-11>
          </div>

          <!--功能按钮区域-->
          <div style="display: flex;height: 30%;align-items: center;padding: 0 20px;color: #eee;">
          <div style="display: flex;height: 30%;align-items: center;padding: 0 20px;color: #fff;">
            <div style="display: flex;justify-content:space-evenly;flex: 1">
              <div style="width: 45%;" class="info-card-container">
                <div class="info-card-title">本月报修数量</div>
                <div class="info-card-value" style="color: #EAC910">20</div>
                <div class="info-card-title">本月报修次数</div>
                <div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}</div>
              </div>

              <div style="width: 45%;" class="info-card-container">
                <div class="info-card-title">设备状态（维修中等）</div>
                <div class="info-card-value">维修中</div>
                <div class="info-card-title">设备状态</div>
                <div class="info-card-value">{{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}</div>
              </div>
            </div>

@@ -133,39 +133,37 @@

        <!--右下各项数据图表区域-->
        <dv-border-box-12 style="height: 50%" class="right-bottom-row">
          <div style="display: flex;justify-content:space-evenly;height: 100%">
          <div style="display: flex;justify-content:space-evenly;height: 100%" v-show="isBelongToMdc">
            <div style="display: flex;flex-wrap: wrap;width: 30%;height: 100%">
              <div id="gauge_chart1" class="gauge-chart"></div>
              <div id="gauge_chart2" class="gauge-chart"></div>
              <div id="gauge_chart3" class="gauge-chart"></div>
              <div id="gauge_chart4" class="gauge-chart"></div>
            </div>
            <div id="line_chart" style="width:40%;height: 100%;"></div>
            <div style="width: 25%;height:100%;display: flex;align-items: center">
            <div id="line_chart" :style="{width:lineChartWidth,height: '100%'}"></div>
            <div v-show="isBelongToMdc&&isDisplayEquipmentDetails"
                 style="width: 25%;height:100%;display: flex;align-items: center">
              <a-descriptions :column="2">
                <a-descriptions-item label="运行模式">
                  {{equipmentInfo.equipmentId}}
                  {{equipmentDetails.runModble|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="程序号">
                  {{equipmentInfo.ABCSymbol}}
                  {{equipmentDetails.sequencenumber|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="主轴转速">
                  {{equipmentInfo.equipmentName}}
                  {{equipmentDetails.spindlespeed|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="主轴负荷">
                  {{equipmentInfo.equipmentType}}
                </a-descriptions-item>
                <a-descriptions-item label="主轴转速">
                  {{equipmentInfo.equipmentCategory}}
                  {{equipmentDetails.spindleload|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="主轴倍率">
                  {{equipmentInfo.workArea}}
                  {{equipmentDetails.spindlebeilv|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="进给倍率">
                  {{equipmentInfo.driveType}}
                  {{equipmentDetails.feedbeilv|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="报警信息">
                  {{equipmentInfo.standard}}
                  {{equipmentDetails.alrmstate|equipmentInfoDisplay}}
                </a-descriptions-item>
              </a-descriptions>
            </div>
@@ -199,20 +197,9 @@
      return {
        equipmentId: '',
        equipmentList: [],
        equipmentInfo: {
          equipmentId: '2511563154',
          ABCSymbol: '3312321421',
          equipmentName: '机械中心',
          equipmentType: 'CV4160',
          equipmentCategory: '轧机',
          workArea: 'A分区',
          driveType: 'JSOWJDF',
          standard: '无',
          depart: '轧机中心',
          workshopSection: '407一工段',
          operator: 'admin',
          equipmentStatus: 0
        },
        equipmentInfo: {},
        operationCertificateInfo: {},
        equipmentDetails: {},
        buttonList: [
          {
            label: '备件信息'
@@ -221,7 +208,8 @@
            label: '保养计划'
          },
          {
            label: '报修'
            label: '报修',
            pageName: 'eam-MalfunctionRepair'
          },
          {
            label: '设备班次',
@@ -229,6 +217,7 @@
          }
        ],
        lineChart: '',
        lineChartWidth: '40%',
        lineChartData: [],
        gaugeChart1: '',
        gaugeChart2: '',
@@ -240,7 +229,9 @@
          openRate: 0,
          overallEquipmentEfficiency: 0
        },
        hideLoadingDelayTime: 500
        hideLoadingDelayTime: 500,
        isDisplayEquipmentDetails: false,
        isBelongToMdc: true// 是否在mdc设备表中
      }
    },
    created() {
@@ -248,12 +239,38 @@
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.getEquipmentListByApi()
      this.getOperationCertificateByApi()
      // 操作工级用户进入时调用接口获取mes设备列表，其余情况获取mdc设备列表
      if (this.userType !== 1) this.getEquipmentListByApi()
      else this.getAllAreaEquipmentListByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    filters: {
      equipmentInfoDisplay(value) {
        return value ? value : '无'
      }
    },
    watch: {
      isDisplayEquipmentDetails: {
        handler(newVal) {
          if (newVal) this.lineChartWidth = '40%'
          else this.lineChartWidth = '65%'
          this.$nextTick(() => {
            this.lineChart.resize()
          })
        }
      }
    },
    methods: {
      getOperationCertificateByApi() {
        signageApi.getOperationCertificateApi()
          .then(res => {
            if (res.success && res.result.length > 0) this.operationCertificateInfo = res.result[0]
          })
      },

      getEquipmentListByApi() {
        // 首页一进入即设备级或工段级时，workshopSectionProductionCode为空，默认查询第一个车间中第一个工段下的设备列表
        signageApi.getEquipmentListApi(this.workshopSectionProductionCode)
@@ -264,22 +281,75 @@
            }
          })
          .finally(() => {
            // 此处为保证equipmentId正常赋值后再调用接口获取图表数据（异步）
            // 此处为保证equipmentId正常赋值后再调用接口获取图表数据以及设备详细信息（异步）
            this.getChartDataByApi()
            this.getEquipmentInfoByApi()
            this.getEquipmentDetailsByApi()
          })
      },

      getAllAreaEquipmentListByApi() {
        signageApi.getAllAreaEquipmentListApi(this.workshopSectionProductionCode)
          .then(res => {
            if (res.success) {
              this.equipmentList = res.result
              this.equipmentList.forEach(item => {
                item.equipmentId = item.num
                item.equipmentModel = item.model
              })
              if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
            }
          })
          .finally(() => {
            // 此处为保证equipmentId正常赋值后再调用接口获取设备信息和维护信息（异步）
            this.getEquipmentInfoByApi()
          })
      },

      // 获取右上角设备信息和维护信息
      getEquipmentInfoByApi() {
        signageApi.getEquipmentInfoApi(this.equipmentId)
          .then(res => {
            if (res.success && res.result.length > 0) this.equipmentInfo = res.result[0]
            else this.equipmentInfo = {}
          })
      },

      /* 获取右下角设备详细信息 */
      getEquipmentDetailsByApi() {
        signageApi.getEquipmentDetailsApi(this.equipmentId)
          .then(res => {
            if (res.success && res.result) {
              this.equipmentDetails = res.result
              this.isDisplayEquipmentDetails = true
            }
            else this.isDisplayEquipmentDetails = false
          })
      },

      /* 右下角图表数据获取汇总方法 */
      getChartDataByApi() {
        this.getGaugeChartDataByApi()
        this.getLineChartDataByApi()
      },

      /* 单击设备列表中的设备时触发 */
      selectEquipment(record) {
        // 避免点击相同设备重复发送请求
        if (record.equipmentId === this.equipmentId) return
        this.equipmentId = record.equipmentId
        this.getChartDataByApi()

        // 非操作工级时需要传入设备编号以查询图表及设备各项信息数据，操作工级时可将设备列表行信息直接赋值展示
        if (this.userType !== 1) {
          this.getChartDataByApi()
          this.getEquipmentDetailsByApi()
          this.getEquipmentInfoByApi()
        } else {
          this.equipmentInfo = record
        }
      },

      /* 单击右边导航栏后触发 */
      navigateToPage(record) {
        if (record.pageName) {
          this.$router.push({
@@ -322,8 +392,12 @@

        signageApi.getEquipmentLevelEfficiencyStatisticsApi(this.equipmentId)
          .then(res => {
            if (res.success) this.gaugeChartData = res.result
            this.drawGaugeChart()
            if (res.success && res.result) {
              this.gaugeChartData = res.result
              this.isBelongToMdc = true
              this.drawGaugeChart()
            }
            else this.isBelongToMdc = false
          })
      },

@@ -339,8 +413,12 @@

        signageApi.getEquipmentAnnualEfficiencyStatisticsApi(this.equipmentId)
          .then(res => {
            if (res.success) this.lineChartData = res.result
            this.drawLineChart()
            if (res.success && res.result) {
              this.lineChartData = res.result
              this.isBelongToMdc = true
              this.drawLineChart()
            }
            else this.isBelongToMdc = false
          })
      },

@@ -357,7 +435,6 @@
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1AD8DE',
              fontWeight: 'bold'
            }
          },
          tooltip: {
@@ -710,7 +787,7 @@

        .equipmentId-container {
          height: 100%;
          color: #eee;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;

 src/views/dashboard/WorkshopSectionSignage.vue

@@ -806,7 +806,6 @@
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1AD8DE',
              fontWeight: 'bold'
            }
          },
          tooltip: {
@@ -996,7 +995,6 @@
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1AD8DE',
              fontWeight: 'bold'
            }
          },
          tooltip: {

 src/views/eam/modules/malfunctionRepair/FaultDescriptionList.vue

@@ -32,7 +32,6 @@

export default {
  name: 'FaultDescriptionList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
  },
  data() {