1、调整导航栏为侧边模式时的项目标题 2、调整页面顶部栏颜色 3、解决设备报警页面由于缩放引起的组件遮挡文字问题 4、总控车间看板右侧图表调整为自动轮...

zhaowei

2024-10-12 f7cc97f27910c7d570f07df5d0dbd29d3f06049c

 src/views/mdc/base/MasterControlWorkshopSignage.vue

@@ -29,22 +29,32 @@
          <div>数字化车间智能管理系统</div>
        </div>
        <div class="workshop-bg">
          <div class="navigate-container" style="left: 5%;">
            <div @click="navigateTo(item)" v-for="(item,index) in navigateList" :key="index" class="navigate-item">
              <template v-if="index<5">
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-index">{{index+1}}</div>
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-label">
                  {{item.label}}
          <div class="navigate-container" style="top:0;left: 5%;">
            <div @click="navigateTo(item)" v-for="item in productionLineList" :key="item.id"
                 class="navigate-item">
              <template v-if="item.productionOrder<5">
                <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
                     class="navigate-item-index">
                  {{item.productionOrder+1}}
                </div>
                <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
                     class="navigate-item-label">
                  {{item.productionName}}
                </div>
              </template>
            </div>
          </div>
          <div class="navigate-container" style="bottom:5%;right: 5%;">
            <div @click="navigateTo(item)" v-for="(item,index) in navigateList" :key="index" class="navigate-item">
              <template v-if="index>=5">
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-index">{{index+1}}</div>
                <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-label">
                  {{item.label}}
          <div class="navigate-container" style="bottom:0;right: 5%;">
            <div @click="navigateTo(item)" v-for="item in productionLineList" :key="item.id"
                 class="navigate-item">
              <template v-if="item.productionOrder>=5">
                <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
                     class="navigate-item-index">
                  {{item.productionOrder+1}}
                </div>
                <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
                     class="navigate-item-label">
                  {{item.productionName}}
                </div>
              </template>
            </div>
@@ -80,6 +90,7 @@

<script>
  import * as echarts from 'echarts'
  import api from '@/api/mdc'

  export default {
    name: 'MasterControlWorkshopSignage',
@@ -90,56 +101,15 @@
        firstEnterDevicePixelRatio: null,
        currentDevicePixelRatio: null,
        leftColChart1: '',
        leftColChart1Data: '',
        leftColChart2: '',
        leftColChart2Data: '',
        leftColChart3: '',
        leftColChart3Data: '',
        leftColChart4: '',
        navigateList: [
          {
            label: '1024后箱加工线',
            id: '1',
            backgroundColor: '#0000FF'
          },
          {
            label: '1024前箱加工线',
            id: '2',
            backgroundColor: '#FF8E00'
          },
          {
            label: '前托架加工线',
            id: '3',
            backgroundColor: '#DE1439'
          },
          {
            label: '80传动壳体加工线',
            id: '4',
            backgroundColor: '#006500'
          },
          {
            label: '80减速器壳体加工线',
            id: '5',
            backgroundColor: '#0000FF'
          },
          {
            label: '箱体加工线',
            id: '6',
            backgroundColor: '#FF8E00'
          },
          {
            label: '差速器轴承座加工线',
            id: '7',
            backgroundColor: '#DE1439'
          },
          {
            label: '制动器活塞加工线',
            id: '8',
            backgroundColor: '#006500'
          },
          {
            label: '中小件加工线',
            id: '9',
            backgroundColor: '#0000FF'
          }
        ],
        leftColChart4Data: '',
        productionLineList: [],
        productionLineBackgroundColorList: ['#0000FF', '#FF8E00', '#DE1439', '#006500'],
        switchList: [
          {
            label: 'MES',
@@ -165,49 +135,103 @@
        rightColChart1: '',
        rightColChart2: '',
        rightColChart3: '',
        rightColChart2And3Data: '',
        rightColChart2CarouselTime: null,
        rightColChart3CarouselTime: null,
        rightColChart4: '',
        rightColChart4Data: '',
        rightColChart4CarouselTime: null
      }
    },
    mounted() {
      this.firstEnterDevicePixelRatio = window.devicePixelRatio
      window.addEventListener('resize', this.handleWindowResize)
      this.getProductionListByApi()
      this.getChartDataByApi()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
      if (this.rightColChart2CarouselTime) clearInterval(this.rightColChart2CarouselTime)
      if (this.rightColChart3CarouselTime) clearInterval(this.rightColChart3CarouselTime)
      if (this.rightColChart4CarouselTime) clearInterval(this.rightColChart4CarouselTime)
    },
    methods: {
      getProductionListByApi() {
        api.getProductionLineListApi()
          .then(res => {
            if (res.success) this.productionLineList = res.result
          })
      },

      getChartDataByApi() {
        this.getLeftColChart1DataByApi()
        this.getLeftColChart2DataByApi()
        this.getLeftColChart3DataByApi()
        this.getLeftColChart4DataByApi()
        // this.getRightColChart1DataByApi()
        this.getRightColChart2DataByApi()
        this.getRightColChart3DataByApi()
        this.getRightColChart2And3DataByApi()
        this.getRightColChart4DataByApi()
      },

      getLeftColChart1DataByApi() {
        this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
        this.drawLeftColChart1()
        api.getYesterdayOverviewApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.leftColChart1Data = [
                {
                  'name': '产品合格率',
                  'count': res.result.passRate ? res.result.passRate : 0
                },
                {
                  'name': '设备利用率',
                  'count': res.result.utilizationRate ? res.result.utilizationRate : 0
                },
                {
                  'name': '计划完成率',
                  'count': res.result.planCompleteRate ? res.result.planCompleteRate : 0
                }
              ]
              this.drawLeftColChart1()
            }
          })
      },

      getLeftColChart2DataByApi() {
        this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
        this.drawLeftColChart2()
        api.getTodayProductionProgressApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.leftColChart2Data = res.result
              this.drawLeftColChart2()
            }
          })
      },

      getLeftColChart3DataByApi() {
        this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
        this.drawLeftColChart3()
        api.getTodayProductPassRateApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.leftColChart3Data = res.result
              this.drawLeftColChart3()
            }
          })
      },

      getLeftColChart4DataByApi() {
        this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
        this.drawLeftColChart4()
        api.getTeamCompletionCountApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.leftColChart4Data = res.result
              this.drawLeftColChart4()
            }
          })
      },

      getRightColChart1DataByApi() {
@@ -215,46 +239,34 @@
        this.drawRightColChart1()
      },

      getRightColChart2DataByApi() {
      getRightColChart2And3DataByApi() {
        this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
        this.drawRightColChart2()
      },

      getRightColChart3DataByApi() {
        this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
        this.drawRightColChart3()
        api.getTodayEquipmentWorkEfficiencyApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.rightColChart2And3Data = res.result
              this.drawRightColChart2()
              this.drawRightColChart3()
            }
          })
      },

      getRightColChart4DataByApi() {
        this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
        this.drawRightColChart4()
        api.getMonthEquipmentUtilizationRateApi()
          .then(res => {
            // console.log('res', res)
            if (res.success) {
              this.rightColChart4Data = res.result
              this.drawRightColChart4()
            }
          })
      },

      /* 绘制左侧第一个图表 */
      drawLeftColChart1() {
        const data = [
          {
            'number': null,
            'name': '产品合格率',
            'count': 1,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': null,
            'name': '设备利用率',
            'count': 0.89,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': null,
            'name': '计划完成率',
            'count': 0.95,
            'planCount': null,
            'rateCount': null
          }
        ]
        const yAxisData = []
        const option = {
          radar: [
@@ -373,7 +385,7 @@

          ]
        }
        data.forEach((item, index) => {
        this.leftColChart1Data.forEach((item, index) => {
          yAxisData.push(parseFloat(item.count * 100 > 100 ? 100 : item.count * 100))
          option.radar[1].indicator[index].num = item.count * 100 > 100 ? 100 : item.count * 100
        })
@@ -383,101 +395,22 @@

      /* 绘制左侧第二个图表 */
      drawLeftColChart2() {
        const data1 = [
          {
            'number': 'A_1',
            'name': '前箱前',
            'count': 190
          },
          {
            'number': 'A_2',
            'name': '1024后箱',
            'count': 180
          },
          {
            'number': 'A_3',
            'name': '差速器',
            'count': 200
          },
          {
            'number': 'A_4',
            'name': '轴承座',
            'count': 100
          },
          {
            'number': 'A_5',
            'name': '80减',
            'count': 200
          },
          {
            'number': 'A_6',
            'name': '80传',
            'count': 90
          },
          {
            'number': 'A_7',
            'name': '1024前',
            'count': 200
          }
        ]
        const data2 = [
          {
            'number': 'A_1',
            'name': '前箱前',
            'count': 165
          },
          {
            'number': 'A_2',
            'name': '1024后箱',
            'count': 166
          },
          {
            'number': 'A_3',
            'name': '差速器',
            'count': 167
          },
          {
            'number': 'A_4',
            'name': '轴承座',
            'count': 90
          },
          {
            'number': 'A_5',
            'name': '80减',
            'count': 100
          },
          {
            'number': 'A_6',
            'name': '80传',
            'count': 55
          },
          {
            'number': 'A_7',
            'name': '1024前',
            'count': 171
          }
        ]
        const xAxisData = []
        const seriesData1 = []
        const seriesData2 = []
        data1.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData1.push({
            value: item.count == null ? '' : item.count,
            hostType: (item.number == null ? '' : item.number)
          })
        })
        data2.forEach(item => {
          seriesData2.push({
            value: item.count == null ? '' : item.count,
            hostType: (item.number == null ? '' : item.number)
          })
        this.leftColChart2Data.forEach(item => {
          xAxisData.push(item.productName == null ? '' : item.productName)
          seriesData1.push({ value: item.planCount == null ? '' : item.planCount })
          seriesData2.push({ value: item.completionCount == null ? '' : item.completionCount })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}件`
            trigger: 'axis',
            formatter: params => {
              // console.log('params', params)
              return params[0].name + '<br>' + `${params[0].seriesName}：${params[0].value}件` + '<br>' + `${params[1].seriesName}：${params[1].value}件`
            }
          },
          legend: {
            show: false,
@@ -544,7 +477,7 @@
          },
          series: [
            {
              name: '利用率',
              name: '计划量',
              type: 'bar',
              barWidth: '35%',//柱图宽度
              data: [],
@@ -579,7 +512,7 @@
              }
            },
            {
              name: '利用率',
              name: '完成量',
              type: 'bar',
              barWidth: '35%',//柱图宽度
              data: [],
@@ -675,11 +608,10 @@
        ]
        const xAxisData = []
        const seriesData = []
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
        this.leftColChart3Data.forEach(item => {
          xAxisData.push(item.productionName == null ? '' : item.productionName)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
            value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
          })
        })
        const option = {
@@ -884,65 +816,11 @@

      /* 绘制左侧第四个图表 */
      drawLeftColChart4() {
        const data = [
          {
            'number': 'A_1',
            'name': '前箱班',
            'count': 54,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_2',
            'name': '后箱班',
            'count': 55,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_3',
            'name': '80传班',
            'count': 56,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_4',
            'name': '80减班',
            'count': 57,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_5',
            'name': '托架班',
            'count': 58,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_6',
            'name': '轴承底座班',
            'count': 59,
            'planCount': null,
            'rateCount': null
          },
          {
            'number': 'A_7',
            'name': '差速器班',
            'count': 90,
            'planCount': null,
            'rateCount': null
          }
        ]
        const xAxisData = []
        const seriesData = []
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: item.count == null ? '' : item.count,
            hostType: (item.number == null ? '' : item.number)
          })
        this.leftColChart4Data.forEach(item => {
          xAxisData.push(item.clazz == null ? '' : item.clazz)
          seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
        })
        const option = {
          tooltip: {
@@ -1376,12 +1254,98 @@
        ]
        const xAxisData = []
        const seriesData = []
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
          })
        const colorList = [
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [

              { offset: 0, color: '#4A7DBD' },
              { offset: 1, color: '#31557B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#BD4D4A' },
              { offset: 1, color: '#7B3031' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#94AF52' },
              { offset: 1, color: '#637A39' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#7B61A4' },
              { offset: 1, color: '#52416B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#4AAAC6' },
              { offset: 1, color: '#29697B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#F79642' },
              { offset: 1, color: '#9C5D29' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [

              { offset: 0, color: '#4A7DBD' },
              { offset: 1, color: '#31557B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#BD4D4A' },
              { offset: 1, color: '#7B3031' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#94AF52' },
              { offset: 1, color: '#637A39' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#7B61A4' },
              { offset: 1, color: '#52416B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#4AAAC6' },
              { offset: 1, color: '#29697B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#F79642' },
              { offset: 1, color: '#9C5D29' }
            ]
          )
        ]

        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.openRate })
        })
        const option = {
          tooltip: {
@@ -1418,6 +1382,7 @@
              color: '#fff',
              // rotate: 45,
              margin: 15,
              interval: 0,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
@@ -1476,94 +1441,6 @@
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    )
                  ]
                  return colorList[params.dataIndex]
                  // build a color map as your need.

@@ -1576,11 +1453,27 @@
                }
              }
            }
          ],
          dataZoom: [
            {
              show: false,
              startValue: 0, // 从头开始。
              endValue: 9 // 一次性展示几个
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.rightColChart2.setOption(option, true)

        this.rightColChart2CarouselTime = setInterval(() => {
          xAxisData.push(xAxisData.shift())
          seriesData.push(seriesData.shift())
          colorList.push(colorList.shift())
          this.$nextTick(() => {
            this.rightColChart2.setOption(option, true)
          })
        }, 3000)
      },

      /* 绘制右侧第三个图表 */
@@ -1659,12 +1552,97 @@
        ]
        const xAxisData = []
        const seriesData = []
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
          })
        const colorList = [
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [

              { offset: 0, color: '#4A7DBD' },
              { offset: 1, color: '#31557B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#BD4D4A' },
              { offset: 1, color: '#7B3031' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#94AF52' },
              { offset: 1, color: '#637A39' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#7B61A4' },
              { offset: 1, color: '#52416B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#4AAAC6' },
              { offset: 1, color: '#29697B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#F79642' },
              { offset: 1, color: '#9C5D29' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [

              { offset: 0, color: '#4A7DBD' },
              { offset: 1, color: '#31557B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#BD4D4A' },
              { offset: 1, color: '#7B3031' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#94AF52' },
              { offset: 1, color: '#637A39' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#7B61A4' },
              { offset: 1, color: '#52416B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#4AAAC6' },
              { offset: 1, color: '#29697B' }
            ]
          ),
          new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              { offset: 0, color: '#F79642' },
              { offset: 1, color: '#9C5D29' }
            ]
          )
        ]
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.utilizationRate })
        })
        const option = {
          tooltip: {
@@ -1700,6 +1678,7 @@
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              interval: 0,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
@@ -1735,7 +1714,6 @@
              show: false
            }
          },

          series: [
            {
              name: '利用率',
@@ -1760,94 +1738,6 @@
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [

                        { offset: 0, color: '#4A7DBD' },
                        { offset: 1, color: '#31557B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#BD4D4A' },
                        { offset: 1, color: '#7B3031' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#94AF52' },
                        { offset: 1, color: '#637A39' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#7B61A4' },
                        { offset: 1, color: '#52416B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#4AAAC6' },
                        { offset: 1, color: '#29697B' }
                      ]
                    ),
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
                      [
                        { offset: 0, color: '#F79642' },
                        { offset: 1, color: '#9C5D29' }
                      ]
                    )
                  ]
                  return colorList[params.dataIndex]
                  // build a color map as your need.

@@ -1860,11 +1750,27 @@
                }
              }
            }
          ],
          dataZoom: [
            {
              show: false,
              startValue: 0, // 从头开始。
              endValue: 9 // 一次性展示几个
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.rightColChart3.setOption(option, true)

        this.rightColChart3CarouselTime = setInterval(() => {
          xAxisData.push(xAxisData.shift())
          seriesData.push(seriesData.shift())
          colorList.push(colorList.shift())
          this.$nextTick(() => {
            this.rightColChart3.setOption(option, true)
          })
        }, 3000)
      },

      /* 绘制右侧第四个图表 */
@@ -2111,12 +2017,9 @@
            ]
          )
        ]
        data.forEach(item => {
          xAxisData.push(item.name == null ? '' : item.name)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
            hostType: (item.number == null ? '' : item.number)
          })
        this.rightColChart4Data.forEach(item => {
          xAxisData.push(item.date == null ? '' : item.date)
          seriesData.push({ value: item.utilizationRate })
        })
        const option = {
          tooltip: {
@@ -2246,7 +2149,14 @@
      },

      navigateTo(record) {
        const url = this.$router.resolve(`/SubControlWorkshopSignage/${record.id}`).href
        const url = this.$router.resolve({
          path: '/SubControlWorkshopSignage',
          query: {
            productionId: record.id,
            productionName: record.productionName,
            productionOrder: record.productionOrder + 1
          }
        }).href
        window.open(url, '_blank')
      },

@@ -2321,7 +2231,7 @@
        .workshop-bg {
          position: relative;
          height: 60%;
          background-image: url("../../../assets/yt_background.jpg");
          background-image: url("../../../assets/yt_background.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;