首页车间级和设备级看板仪表盘图表根据不同类型设置不同仪表盘颜色以及数值范围

zhuzhuanzhuan

2024-05-15 b00ebd6ccb2acb975437af523f00e1f3ea881305

 src/views/dashboard/EquipmentSignage.vue

@@ -67,9 +67,6 @@
                <a-descriptions-item label="工段">
                  {{equipmentInfo.workShopName|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="操作工">
                  {{operationCertificateInfo.realname|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="设备状态">
                  {{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}
                </a-descriptions-item>
@@ -79,16 +76,26 @@
            <dv-border-box-11 title="操作证信息" class="info-container" style="flex:2;">
              <a-descriptions :column="1">
                <a-descriptions-item label="操作证编号">
                  {{operationCertificateInfo.num|equipmentInfoDisplay}}
                  <a-tooltip>
                    <template slot="title">
                      {{operationCertificateInfo.num|equipmentInfoDisplay}}
                    </template>
                    {{operationCertificateInfo.num|equipmentInfoDisplay}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="当前周期分数">
                  {{operationCertificateInfo.currentCycleScore|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="发证日期">
                  {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}
                <a-descriptions-item label="发证/截止日期">
                  <a-tooltip>
                    <template slot="title" v-if="operationCertificateInfo.issueDate||operationCertificateInfo.endTime">
                      {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
                    </template>
                    {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="周期截止日期">
                  {{operationCertificateInfo.endTime|equipmentInfoDisplay}}
                <a-descriptions-item label="操作工">
                  {{operationCertificateInfo.realname|equipmentInfoDisplay}}
                </a-descriptions-item>
              </a-descriptions>
            </dv-border-box-11>
@@ -96,10 +103,20 @@
            <dv-border-box-11 title="维护信息" class="info-container" style="flex:2;">
              <a-descriptions :column="1">
                <a-descriptions-item label="下次三保日期">
                  {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
                  <a-tooltip>
                    <template slot="title" v-if="equipmentInfo.nextThirdMaintenanceTime">
                      {{equipmentInfo.nextThirdMaintenanceTime}}
                    </template>
                    {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="下次二保日期">
                  {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
                  <a-tooltip>
                    <template slot="title" v-if="equipmentInfo.nextSecondMaintenanceTime">
                      {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
                    </template>
                    {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="技术状态">
                  {{equipmentInfo.technology_status|equipmentInfoDisplay}}
@@ -113,7 +130,8 @@
            <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">{{equipmentInfo.repairCount|equipmentInfoDisplay}}</div>
                <div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}
                </div>
              </div>

              <div style="width: 45%;" class="info-card-container">
@@ -434,7 +452,7 @@
              // 主标题文本样式
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1AD8DE',
              color: '#1AD8DE'
            }
          },
          tooltip: {
@@ -516,11 +534,21 @@
      /* 绘制利用率仪表盘图表 */
      drawGaugeChart1(opt) {
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '利用率'
        option.series[0].name = '利用率'
        option.series[0].data = [this.gaugeChartData.utilizationRate]
        this.gaugeChart1.setOption(option, true)
        setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)

        signageApi.getGaugeColorByTypeApi('lyl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
              option.series[0].axisLine.lineStyle.color = colorRange
            }
          })
          .finally(() => {
            option.title.text = moment().subtract(1, 'days').format('M月D日') + '利用率'
            option.series[0].name = '利用率'
            option.series[0].data = [this.gaugeChartData.utilizationRate]
            this.gaugeChart1.setOption(option, true)
            setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)
          })

        this.gaugeChart1.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -540,11 +568,21 @@
      /* 绘制开动率仪表盘图表 */
      drawGaugeChart2(opt) {
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率'
        option.series[0].name = '开动率'
        option.series[0].data = [this.gaugeChartData.startRate]
        this.gaugeChart2.setOption(option, true)
        setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)

        signageApi.getGaugeColorByTypeApi('lyl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
              option.series[0].axisLine.lineStyle.color = colorRange
            }
          })
          .finally(() => {
            option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率'
            option.series[0].name = '开动率'
            option.series[0].data = [this.gaugeChartData.startRate]
            this.gaugeChart2.setOption(option, true)
            setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)
          })

        this.gaugeChart2.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -564,11 +602,21 @@
      /* 绘制开机率仪表盘图表 */
      drawGaugeChart3(opt) {
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率'
        option.series[0].name = '开机率'
        option.series[0].data = [this.gaugeChartData.openRate]
        this.gaugeChart3.setOption(option, true)
        setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)

        signageApi.getGaugeColorByTypeApi('lyl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
              option.series[0].axisLine.lineStyle.color = colorRange
            }
          })
          .finally(() => {
            option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率'
            option.series[0].name = '开机率'
            option.series[0].data = [this.gaugeChartData.openRate]
            this.gaugeChart3.setOption(option, true)
            setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)
          })

        this.gaugeChart3.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -588,11 +636,21 @@
      /* 绘制OEE仪表盘图表 */
      drawGaugeChart4(opt) {
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
        option.series[0].name = 'OEE'
        option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
        this.gaugeChart4.setOption(option, true)
        setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)

        signageApi.getGaugeColorByTypeApi('lyl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
              option.series[0].axisLine.lineStyle.color = colorRange
            }
          })
          .finally(() => {
            option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
            option.series[0].name = 'OEE'
            option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
            this.gaugeChart4.setOption(option, true)
            setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)
          })

        this.gaugeChart4.getZr().on('click', params => {
          // 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
@@ -875,8 +933,6 @@
    padding-bottom: 25px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }

  /deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {