1、点检工单预览 2、技术鉴定工单变更 3、调整样式

zhaowei

6 天以前 48d85187a16a313c5244a830862db5e672e6997d

 src/views/dashboard/EquipmentSignage.vue

@@ -21,9 +21,10 @@
              <th>设备编号</th>
              <th>型号</th>
            </tr>
            <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)">
            <tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)"
                :style="{backgroundColor:equipmentId===item.equipmentId?'#1D94D4':''}">
              <td>{{item.equipmentId}}</td>
              <td>{{item.equipmentType}}</td>
              <td>{{item.equipmentModel}}</td>
            </tr>
          </table>
        </div>
@@ -37,40 +38,37 @@
            <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}}
                </a-descriptions-item>
                <a-descriptions-item label="操作工">
                  {{equipmentInfo.operator}}
                  {{equipmentInfo.workShopName|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="设备状态">
                  {{equipmentInfo.equipmentStatus}}
                  {{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}
                </a-descriptions-item>
              </a-descriptions>
            </dv-border-box-11>
@@ -78,16 +76,26 @@
            <dv-border-box-11 title="操作证信息" class="info-container" style="flex:2;">
              <a-descriptions :column="1">
                <a-descriptions-item label="操作证编号">
                  {{equipmentInfo.equipmentId}}
                  <a-tooltip>
                    <template slot="title">
                      {{operationCertificateInfo.num|equipmentInfoDisplay}}
                    </template>
                    {{operationCertificateInfo.num|equipmentInfoDisplay}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="当前周期分数">
                  {{equipmentInfo.ABCSymbol}}
                  {{operationCertificateInfo.currentCycleScore|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="发证日期">
                  {{equipmentInfo.equipmentName}}
                <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="周期截止日期">
                  {{equipmentInfo.equipmentType}}
                <a-descriptions-item label="操作工">
                  {{operationCertificateInfo.realname|equipmentInfoDisplay}}
                </a-descriptions-item>
              </a-descriptions>
            </dv-border-box-11>
@@ -95,34 +103,45 @@
            <dv-border-box-11 title="维护信息" class="info-container" style="flex:2;">
              <a-descriptions :column="1">
                <a-descriptions-item label="下次三保日期">
                  {{equipmentInfo.equipmentId}}
                  <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.ABCSymbol}}
                  <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.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>

            <div style="display: flex;justify-content: space-evenly;font-size: 20px;padding: 0 50px">
              <div v-for="(item,index) in buttonList" :key="index" @click="click(item)"
              <div v-for="(item,index) in buttonList" :key="index" @click="navigateToPage(item)"
                   style="width: 200px;height: 70px;margin: 0 10px;cursor: pointer">
                <dv-decoration-11>{{item.label}}</dv-decoration-11>
              </div>
@@ -132,39 +151,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>
@@ -172,17 +189,28 @@
        </dv-border-box-12>
      </div>
    </div>

    <SignageModal ref="modalRef" :modalVisible="modalVisible" :modalWidth="modalWidth" :modalTitle=modalTitle
                  :modalDataApiUrl="modalDataApiUrl"
                  :modalDataApiParams="modalDataApiParams"
                  @closeModal="modalVisible=false"/>
  </div>
</template>

<script>
  import signageApi from '@/api/signage'
  import moment from 'moment'
  import SignageModal from './modules/SignageModal'

  export default {
    name: 'EquipmentSignage',
    components: { SignageModal },
    props: {
      productionCode: {
        type: String,
        default: ''
      },
      workshopSectionProductionCode: {
        type: String,
        default: ''
      },
@@ -192,126 +220,304 @@
    },
    data() {
      return {
        equipmentId: '2140223',
        equipmentList: [
          {
            equipmentId: '2140223',
            equipmentType: 'CV4160'
          },
          {
            equipmentId: '2140224',
            equipmentType: 'CV4161'
          },
          {
            equipmentId: '2140225',
            equipmentType: 'CV4162'
          },
          {
            equipmentId: '2140226',
            equipmentType: 'CV4163'
          },
          {
            equipmentId: '2140227',
            equipmentType: 'CV4164'
          },
          {
            equipmentId: '2140227',
            equipmentType: 'CV4165'
          },
          {
            equipmentId: '2140228',
            equipmentType: 'CV4166'
          },
          {
            equipmentId: '2140229',
            equipmentType: 'CV4167'
          },
          {
            equipmentId: '2140230',
            equipmentType: 'CV4168'
          },
          {
            equipmentId: '2140231',
            equipmentType: 'CV4169'
          },
          {
            equipmentId: '2140232',
            equipmentType: 'CV4170'
          },
          {
            equipmentId: '2140233',
            equipmentType: 'CV4171'
          }
        ],
        equipmentInfo: {
          equipmentId: '2511563154',
          ABCSymbol: '3312321421',
          equipmentName: '机械中心',
          equipmentType: 'CV4160',
          equipmentCategory: '轧机',
          workArea: 'A分区',
          driveType: 'JSOWJDF',
          standard: '无',
          depart: '轧机中心',
          workshopSection: '407一工段',
          operator: 'admin',
          equipmentStatus: 0
        },
        equipmentId: '',
        equipmentList: [],
        equipmentInfo: {},
        operationCertificateInfo: {},
        equipmentDetails: {},
        buttonList: [
          {
            label: '备件信息'
            label: '备件信息',
            pageName: '',
            modalDataApiUrl: ''
          },
          {
            label: '保养计划'
            label: '保养计划',
            pageName: '',
            modalDataApiUrl: '/eam/equipment/list'
          },
          {
            label: '报修'
            label: '报修',
            pageName: 'eam-MalfunctionRepair',
            modalDataApiUrl: ''
          },
          {
            label: '设备班次'
            label: '设备班次',
            pageName: 'mdc-base-DeviceCalendar',
            modalDataApiUrl: ''
          }
        ],
        lineChart: '',
        lineChartWidth: '40%',
        lineChartData: [],
        gaugeChart1: '',
        gaugeChart2: '',
        gaugeChart3: '',
        gaugeChart4: '',
        gaugeChartData1: [],
        gaugeChartData2: [],
        gaugeChartData3: [],
        gaugeChartData4: []
        gaugeChartData: {
          utilizationRate: 0,
          startRate: 0,
          openRate: 0,
          overallEquipmentEfficiency: 0
        },
        hideLoadingDelayTime: 500,
        isDisplayEquipmentDetails: false,
        isBelongToMdc: true,// 是否在mdc设备表中
        modalVisible: false,
        modalWidth: 1048,
        modalTitle: '',
        modalDataApiUrl: '',
        modalTableColumns: [],
        modalDataApiParams: {}
      }
    },
    created() {
      console.log('触发重新创建')
      this.equipmentId = this.productionCode
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.drawCharts()
      this.getChartDataByApi()
      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(() => {
            if (this.lineChart) this.lineChart.resize()
          })
        },
        immediate: true
      }
    },
    methods: {
      selectEquipment(record) {
        this.equipmentId = record.equipmentId
      getOperationCertificateByApi() {
        signageApi.getOperationCertificateApi()
          .then(res => {
            if (res.success && res.result.length > 0) this.operationCertificateInfo = res.result[0]
          })
      },

      click(record) {
        window.alert(record.label)
      getEquipmentListByApi() {
        // 首页一进入即设备级或工段级时，workshopSectionProductionCode为空，默认查询第一个车间中第一个工段下的设备列表
        signageApi.getEquipmentListApi(this.workshopSectionProductionCode)
          .then(res => {
            if (res.success) {
              this.equipmentList = res.result
              if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
            }
          })
          .finally(() => {
            // 此处为保证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()
      },

      /* 绘制图表汇总方法 */
      drawCharts() {
        this.drawGaugeChart()
        this.drawLineChart()
      /* 单击设备列表中的设备时触发 */
      selectEquipment(record) {
        // 避免点击相同设备重复发送请求
        if (record.equipmentId === this.equipmentId) return
        this.equipmentId = record.equipmentId

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

      /* 单击右边导航栏后触发 */
      navigateToPage(record) {
        if (record.pageName) {
          this.$router.push({
            name: record.pageName,
            params: { equipmentId: this.equipmentId }
          })
        } else {
          this.$refs.modalRef.modalTableColumns = [
            {
              title: '#',
              dataIndex: '',
              key: 'rowIndex',
              width: 60,
              align: 'center',
              customRender: function(t, r, index) {
                return parseInt(index) + 1
              }
            },
            {
              width: 150,
              align: 'center',
              title: '设备编号',
              dataIndex: 'num',
              key: 'num'
            },
            {
              width: 200,
              align: 'center',
              title: '设备名称',
              dataIndex: 'name',
              key: 'name'
            },
            {
              width: 200,
              align: 'center',
              title: '设备型号',
              dataIndex: 'model',
              key: 'model'
            },
            {
              width: 250,
              align: 'center',
              title: '规格',
              key: 'specification',
              dataIndex: 'specification'
            },
            {
              width: 170,
              align: 'center',
              title: '下次二保时间',
              key: 'nextSecondMaintenanceTime',
              dataIndex: 'nextSecondMaintenanceTime'
            },
            {
              width: 170,
              align: 'center',
              title: '下次三保时间',
              key: 'nextThirdMaintenanceTime',
              dataIndex: 'nextThirdMaintenanceTime'
            }
          ]
          this.modalWidth = 1248
          this.modalTitle = record.label
          this.modalDataApiParams = { num: this.equipmentId }
          this.modalDataApiUrl = record.modalDataApiUrl
          this.modalVisible = true
        }
      },

      /* 调用接口获取设备效率统计 */
      getGaugeChartDataByApi() {
        this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
        this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
        this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
        this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
        this.gaugeChart1.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart2.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart3.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })
        this.gaugeChart4.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })

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

      /* 调用接口获取整年度利用率 */
      getLineChartDataByApi() {
        this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
        this.lineChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#fff',
          maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
        })

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

      /* 绘制仪表盘图表 */
@@ -326,8 +532,7 @@
              // 主标题文本样式
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1AD8DE',
              fontWeight: 'bold'
              color: '#1AD8DE'
            }
          },
          tooltip: {
@@ -408,64 +613,155 @@

      /* 绘制利用率仪表盘图表 */
      drawGaugeChart1(opt) {
        this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '利用率'
        option.series[0].name = '利用率'
        option.series[0].data = [56]
        this.gaugeChart1.setOption(option, true)

        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日') + 'TEEP'
            option.series[0].name = 'TEEP'
            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
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: true,
                productionId: this.equipmentId,
                tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
              }
            })
          }
        })
      },

      /* 绘制开动率仪表盘图表 */
      drawGaugeChart2(opt) {
        this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率'
        option.series[0].name = '开动率'
        option.series[0].data = [23]
        this.gaugeChart2.setOption(option, true)

        signageApi.getGaugeColorByTypeApi('kdl')
          .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
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: true,
                productionId: this.equipmentId,
                tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
              }
            })
          }
        })
      },

      /* 绘制开机率仪表盘图表 */
      drawGaugeChart3(opt) {
        this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率'
        option.series[0].name = '开机率'
        option.series[0].data = [44]
        this.gaugeChart3.setOption(option, true)

        signageApi.getGaugeColorByTypeApi('kdl')
          .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
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: {
                isEquipment: true,
                productionId: this.equipmentId,
                tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
              }
            })
          }
        })
      },

      /* 绘制OEE仪表盘图表 */
      drawGaugeChart4(opt) {
        this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
        const option = Object.assign({}, opt)
        option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
        option.series[0].name = 'OEE'
        option.series[0].data = [78]
        this.gaugeChart4.setOption(option, true)

        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
          if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
            this.$router.push({
              name: 'mdc-base-OEEAnalysis',
              params: { isEquipment: true, productionId: this.equipmentId }
            })
          }
        })
      },

      /* 绘制折线图 */
      drawLineChart() {
        this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
        const newData = {
          xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          xAxis: this.lineChartData.dateList,
          yAxis: [
            {
              name: '利用率',
              value: [20, 60, 50, 60, 20, 50, 60, 70, 23, 40, 60, 70]
              name: 'TEEP',
              value: this.lineChartData.dataList.map(item => item.utilizationRate)
            },
            {
              name: '开动率',
              value: [23, 60, 44, 40, 74, 80, 60, 90, 70, 40, 70, 40]
              value: this.lineChartData.dataList.map(item => item.startRate)
            },
            {
              name: 'OEE',
              value: [90, 70, 40, 70, 80, 60, 73, 60, 70, 90, 40, 65]
              value: this.lineChartData.dataList.map(item => item.overallEquipmentEfficiency)
            }
          ],
          yAxisName: '整年度利用率(%)'
          yAxisName: '整年度TEEP(%)'
        }
        let legendData = []
        let seriesData = []
@@ -479,6 +775,13 @@
            symbolSize: 8,
            itemStyle: {
              color: colorArr[index1]
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'inherit'
              }
            },
            lineStyle: {
              width: 2
@@ -528,7 +831,7 @@
            axisLabel: {
              interval: 0,
              show: true,
              fontSize: 12,
              fontSize: 14,
              color: '#fff'
              // rotate: -30,
            },
@@ -549,7 +852,7 @@
              nameTextStyle: {
                color: '#1AD8DE',
                fontSize: 18,
                padding: [0, 0, 0, 110]
                padding: [0, 0, 0, 120]
              },
              nameGap: 25,
              type: 'value',
@@ -572,11 +875,13 @@
            },
            {
              type: 'value',
              position: 'right',
              position: 'left',
              splitNumber: 5,
              max: 100,
              axisLabel: {
                show: true,
                color: '#fff'
                color: '#fff',
                fontSize:14
              },
              axisLine: {
                show: true,
@@ -598,6 +903,7 @@
          series: seriesData
        }
        this.lineChart.setOption(option, true)
        setTimeout(() => this.lineChart.hideLoading(), this.hideLoadingDelayTime)
      },

      /**
@@ -627,7 +933,7 @@

        .equipmentId-container {
          height: 100%;
          color: #eee;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
@@ -715,8 +1021,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 {