1、登录页实现登录窗口响应式布局，同时限制最大最小宽高 2、除设备级看板其余看板中点击技术状态以及报修故障图表后打开对应弹窗，并实现与接口联动 3、设...

zhuzhuanzhuan

2024-05-31 bb654cea7b1666d5b3c04dbd81a074a5a502cc67

 src/views/dashboard/IndexSignage.vue

@@ -42,7 +42,7 @@
    </div>

    <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
                  :modalTableColumns="modalTableColumns"
                  :modalDataApiParams="modalDataApiParams"
                  @closeModal="modalVisible=false"/>
  </div>
</template>
@@ -82,41 +82,46 @@
          {
            planTime: '本月三保计划',
            planValueLabel: 'thisMonthMaintenancePlanNum',
            backgroundColor: '#5FE0AF'
            backgroundColor: '#5FE0AF',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList'
          },
          {
            planTime: '本月完成',
            planValueLabel: 'thisMonthMaintenanceRealNum',
            backgroundColor: '#409EFF'
            backgroundColor: '#409EFF',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList'
          },
          {
            planTime: '下月三保计划',
            planValueLabel: 'nextMonthMaintenancePlanNum',
            backgroundColor: '#D6BC52'
            backgroundColor: '#D6BC52',
            apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList'
          },
          {
            planTime: '下下月三保计划',
            planValueLabel: 'nextNextMonthMaintenancePlanNum',
            backgroundColor: '#58D9F9'
            backgroundColor: '#58D9F9',
            apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList'
          }
        ],
        thisMonthMaintenancePlanNum: 0,
        thisMonthMaintenanceRealNum: 0,
        nextMonthMaintenancePlanNum: 0,
        nextNextMonthMaintenancePlanNum: 0,
        twoMaintenanceChartData: [['-', '-', '-']],
        twoMaintenanceChartData: [],
        barChart: '',
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        workshopProblemChartData: [['-', '-', '-']],
        workshopProblemChartData: [],
        efficiencyChartConfig: {},
        maintenanceConfig: {},
        problemConfig: {},
        modalVisible: false,
        modalTitle: '',
        modalDataApiUrl: '',
        modalTableColumns: []
        modalTableColumns: [],
        modalDataApiParams: {}
      }
    },
    mounted() {
@@ -185,9 +190,9 @@
          .then(res => {
            if (res.success && res.result) {
              this.techConditionData = [
                { value: res.result[0].qualifiedCount, name: '合格' },
                { value: res.result[0].disabledCount, name: '禁用' },
                { value: res.result[0].limitedUseCount, name: '限用' }
                { value: res.result[0].qualifiedCount, name: '合格', technologyStatus: 'qualified' },
                { value: res.result[0].disabledCount, name: '禁用', technologyStatus: 'disabled' },
                { value: res.result[0].limitedUseCount, name: '限用', technologyStatus: 'limitedUse' }
              ]
            }
            this.drawTechConditionChart()
@@ -207,9 +212,9 @@
          .then(res => {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                { value: res.result[0].failurTotalCount, name: '报修' },
                { value: res.result[0].stopCount, name: '停机' },
                { value: res.result[0].noStopCount, name: '运行' }
                { value: res.result[0].failurTotalCount, name: '报修', isStop: '' },
                { value: res.result[0].stopCount, name: '停机', isStop: '2' },
                { value: res.result[0].noStopCount, name: '运行', isStop: '1' }
              ]
            }
            this.drawWarrantyMalfunctionChart()
@@ -281,11 +286,11 @@
      getWorkshopProblemChartDataByApi() {
        signageApi.getWorkshopProblemListApi()
          .then(res => {
            console.log('res', res.result)
            if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.content, item.createTime])
            this.drawWorkshopProblemChart()
          })
      },


      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart(productionId) {
@@ -580,7 +585,6 @@
          // 点击触发的为柱状体，除此除外是标题
          if (params.componentType === 'series') {
            // 柱状体跳转统计分析页面展示对应层级数据
            console.log('seriesParams===========', params)
            let productionId
            let tierName
            // 点击的是柱体的值，否则点击的为柱体背景阴影
@@ -591,13 +595,11 @@
              productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId
              tierName = this.efficiencyData.find(item => item.productionCode === params.name).name
            }
            console.log('productionId', productionId)
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: { isEquipment: false, productionId, tierName }
            })
          } else {
            console.log('yAxisParams===========', params)
            this.$emit('switchToNextSignage', { signageName: 'BranchFactory', productionCode: params.value })
          }
        })
@@ -681,49 +683,14 @@
        this.techConditionChart.setOption(option, true)
        this.techConditionChart.hideLoading()

        // this.techConditionChart.on('click', params => {
        //   console.log('params', params)
        //   this.modalTitle = '技术状态'
        //   this.modalTableColumns = [
        //     {
        //       title: '#',
        //       dataIndex: '',
        //       key: 'rowIndex',
        //       width: 60,
        //       align: 'center',
        //       customRender: function(t, r, index) {
        //         return parseInt(index) + 1
        //       }
        //     },
        //     {
        //       title: '设备编号',
        //       dataIndex: 'equipmentId',
        //       key: 'equipmentId'
        //     },
        //     {
        //       title: '设备名称',
        //       dataIndex: 'equipmentName',
        //       key: 'equipmentName'
        //     },
        //     {
        //       title: '设备型号',
        //       dataIndex: 'equipmentModel',
        //       key: 'equipmentModel'
        //     },
        //     {
        //       title: '设备类型',
        //       key: 'equipmentType',
        //       dataIndex: 'equipmentType'
        //     },
        //     {
        //       title: '驱动类型',
        //       key: 'driveType',
        //       dataIndex: 'driveType'
        //     }
        //   ]
        //   this.modalDataApiUrl = '/mdc/mdcEquipment/list'
        //   this.modalVisible = true
        // })
        this.techConditionChart.on('click', params => {
          this.modalTitle = `技术状态（${params.name}）`
          this.modalDataApiParams = {
            technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus
          }
          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByTechnologyStatus'
          this.modalVisible = true
        })
      },

      /* 绘制设备报修故障饼图 */
@@ -804,44 +771,14 @@
        this.warrantyMalfunctionChart.setOption(option, true)
        this.warrantyMalfunctionChart.hideLoading()

        // this.warrantyMalfunctionChart.on('click', params => {
        //   console.log('params', params)
        //   this.modalTitle = '报修故障'
        //   this.modalTableColumns = [
        //     {
        //       title: '#',
        //       dataIndex: '',
        //       key: 'rowIndex',
        //       width: 60,
        //       align: 'center',
        //       customRender: function(t, r, index) {
        //         return parseInt(index) + 1
        //       }
        //     },
        //     {
        //       title: '类型',
        //       align: 'center',
        //       dataIndex: 'planCloseType'
        //     },
        //     {
        //       title: '时间类型',
        //       align: 'center',
        //       dataIndex: 'planCloseTimeType'
        //     },
        //     {
        //       title: '时长（分钟）',
        //       align: 'center',
        //       dataIndex: 'planCloseTimeLong'
        //     },
        //     {
        //       title: '备注',
        //       align: 'center',
        //       dataIndex: 'remark'
        //     }
        //   ]
        //   this.modalDataApiUrl = '/mdc/mdcPlanClose/list'
        //   this.modalVisible = true
        // })
        this.warrantyMalfunctionChart.on('click', params => {
          this.modalTitle = `报修故障（${params.name}）`
          this.modalDataApiParams = {
            isStop: this.warrantyMalfunctionData.find(item => item.name === params.name).isStop
          }
          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByReportRepair'
          this.modalVisible = true
        })
      },

      /* 绘制车间保养滚动表 */
@@ -990,13 +927,11 @@
        this.barChart.hideLoading()

        this.barChart.on('click', params => {
          console.log('params', params)
          let productionId
          // 点击的是柱体的值，否则点击的为柱体背景阴影
          if (params.seriesIndex === 0) productionId = params.data.productionId
          else productionId = params.name

          console.log('productionId', productionId)
          this.$router.push({
            name: 'mdc-base-OEEAnalysis',
            params: { isEquipment: false, productionId }
@@ -1158,7 +1093,7 @@
      drawWorkshopProblemChart() {
        this.problemConfig = {
          indexHeader: '序号',
          header: [ '问题内容', '时间'],
          header: ['问题内容', '时间'],
          headerBGC: '#86D186',
          oddRowBGC: '#7CBF7C',
          evenRowBGC: '#7CBF7C',
@@ -1175,40 +1110,8 @@
       */
      openMaintenanceModal(record) {
        this.modalTitle = record.planTime
        this.modalTableColumns = [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '类型',
            align: 'center',
            dataIndex: 'planCloseType'
          },
          {
            title: '时间类型',
            align: 'center',
            dataIndex: 'planCloseTimeType'
          },
          {
            title: '时长（分钟）',
            align: 'center',
            dataIndex: 'planCloseTimeLong'
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark'
          }
        ]
        this.modalDataApiUrl = '/mdc/mdcPlanClose/list'
        // this.modalVisible = true
        this.modalDataApiUrl = record.apiUrl
        this.modalVisible = true
      },

      /**