1、设备综合效率分析以及设备加工工件报表页面表格高度设置为页面进入时即可拖动水平滚动条的高度 2、首页 （1）OEE标题增加月份展示，利用率等效率标题...

zhuzhuanzhuan

2024-04-12 e081f232138b318338ffca07e7c9fcd941ac20b4

 src/views/dashboard/IndexSignage.vue

@@ -1,22 +1,15 @@
<template>
  <div class="page-container">
    <!--<div class="page-title">-->
    <!--<slot name="index_signage_nav"></slot>-->
    <!--&lt;!&ndash;<dv-decoration-11 class="workshop-nav" v-for="item in workshopList">&ndash;&gt;-->
    <!--&lt;!&ndash;{{item.workshopName}}&ndash;&gt;-->
    <!--&lt;!&ndash;</dv-decoration-11>&ndash;&gt;-->
    <!--</div>-->
    <div class="content-container">
      <div style="width: 25%" class="left-col">
        <dv-border-box-9 style="padding: 30px 20px 0">
          <!--<div class="first-title">M D C 入 网 总 数 : 6 0 3 台</div>-->
          <div id="running_state_chart" style="width:100%;height: 300px"></div>
          <div id="efficiency_chart" style="width: 100%;height: 465px"></div>
        </dv-border-box-9>
      </div>

      <div style="width: 42%" class="middle-col">
        <dv-border-box-9 style="padding: 30px 20px 0">
          <!--<div class="first-title">设 备 台 账 总 数 : 1 0 2 2 台</div>-->
          <div style="display: flex">
            <div id="tech_condition_chart" style="width:50%;height: 340px;"></div>
            <div id="warranty_malfunction_chart" style="width:50%;height: 340px;"></div>
@@ -64,6 +57,7 @@
          </div>
        </dv-border-box-9>
      </div>

      <div style="width: 32%">
        <dv-border-box-9 style="padding: 30px 0 20px">
          <div id="bar_chart" style="width:100%;height: 280px"></div>
@@ -93,7 +87,7 @@
          { value: '0', name: '运行' }
        ],
        efficiencyChart: '',
        efficiencyData:[],
        efficiencyData: [],
        techConditionChart: '',
        techConditionData: [
          { value: '0', name: '合格' },
@@ -112,7 +106,32 @@
        nextNextMonthMaintenancePlanNum: 0,
        twoMaintenanceChartData: [['-', '-', '-']],
        barChart: '',
        barChartData: [],
        barChartData: [
          {
            'value': '32',
            'name': '401',
            'productionCode': '125487318',
            'productionId': '1729419336207761409'
          },
          {
            'value': '23',
            'name': '406',
            'productionCode': '4212152142',
            'productionId': '1729419361201618945'
          },
          {
            'value': '11',
            'name': '407',
            'productionCode': '321321345',
            'productionId': '1729419381665628161'
          },
          {
            'value': '44',
            'name': '408',
            'productionCode': '536341343',
            'productionId': '1729670118396067842'
          }
        ],
        doubleBarChart: '',
        doubleBarChartData: {},
        efficiencyChartConfig: {},
@@ -136,7 +155,7 @@
        this.getWarrantyMalfunctionDataByApi()
        this.getMonthMaintenanceNumByApi()
        this.getTwoMaintenanceChartDataByApi()
        this.getBarChartDataByApi()
        // this.getBarChartDataByApi()
        this.getDoubleBarChartDataByApi()
      },

@@ -731,10 +750,11 @@
      /* 绘制单柱图 */
      drawBarChart() {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
        const option = {
          title: {
            show: true, // 是否显示标题，默认为true
            text: 'OEE车间', // 主标题文本
            text: '', // 主标题文本
            x: 'center', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
            y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
            textStyle: {
@@ -748,6 +768,10 @@
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%'
            },
            // backgroundColor: 'rgba(9, 24, 48, 0.5)',
            borderColor: 'rgba(75, 253, 238, 0.4)',
@@ -765,7 +789,7 @@
            nameLocation: 'middle',
            nameGap: 40, // x轴name与横坐标轴线的间距
            type: 'category',
            data: this.barChartData.map(item => item.name),
            data: this.barChartData.map(item => item.productionId),
            axisLine: {
              lineStyle: {
                color: '#FFFFFF'
@@ -776,7 +800,10 @@
              interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: this.barChartData.length >= 6 ? -30 : 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // 刻度标签是否朝内，默认朝外
              margin: 6 // 刻度标签与轴线之间的距离
              margin: 6, // 刻度标签与轴线之间的距离
              formatter: value => {
                return `${this.barChartData.find(item => item.productionId === value).name}`
              }
            },
            axisTick: {
              show: true,
@@ -784,9 +811,8 @@
            }
          }],
          yAxis: [{
            name: '数量',
            nameLocation: 'middle',
            nameGap: 30, // x轴name与横坐标轴线的间距
            name: '%',
            max: 100,
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
@@ -814,7 +840,7 @@
            itemStyle: {
              color: '#55D6A5'
            },
            showBackground: true,
            zlevel: 1,
            label: {
              show: true,
              lineHeight: 10,
@@ -828,9 +854,34 @@
                fontSize: 18
              }
            }
          }]
          },
            {
              name: '背景',
              type: 'bar',
              barWidth: '15%',
              barGap: '-100%',
              data: defaultData,
              itemStyle: {
                color: '#11294d'
              }
            }]
        }
        option.title.text = moment().subtract(1, 'months').format('M月') + `OEE车间`
        this.barChart.setOption(option, true)

        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 }
          })
        })
      },

      /* 绘制双柱图 */
@@ -1033,13 +1084,6 @@
      flex-wrap: wrap;
      color: #fff;
      margin-bottom: 10px;

      .workshop-nav {
        width: 120px;
        height: 40px;
        font-size: 12px;
        cursor: pointer;
      }
    }

    .content-container {
@@ -1047,23 +1091,7 @@
      display: flex;
      justify-content: space-between;

      .left-col {
        .first-title {
          color: #00A8AC;
          font-size: 20px;
          text-align: center;
          font-weight: bold;
        }
      }

      .middle-col {
        .first-title {
          color: #00A8AC;
          font-size: 20px;
          text-align: center;
          font-weight: bold;
        }

        .support-plan-container {
          display: flex;
          justify-content: space-around;