调整总控车间看板左侧第一个图表的数据格式

zhaowei

2024-11-07 22fdeabab45b88459857dd4b5750c541bedc56e2

 src/views/mdc/base/MasterControlWorkshopSignage.vue

@@ -23,14 +23,18 @@
        <div class="page-title">

          <div style="position: relative">
            <img src="../../../assets/image/logo.jpg">
            一拖大拖装配厂
            <img src="@/assets/logo-yt.png">
            <span style="cursor: pointer"
                  @dblclick="modalVisible=true">{{isFakeData?fakeData.title:'一拖大拖装配厂'}}</span>
          </div>
          <div>数字化车间智能管理系统</div>
          <div style="cursor: pointer" @dblclick="isFakeData = !isFakeData">
            {{isFakeData?fakeData.subheading:'数字化车间智能管理系统'}}
          </div>
        </div>

        <div class="workshop-bg">
          <div class="navigate-container" style="top:0;left: 5%;">
            <div @click="navigateTo(item)" v-for="item in productionLineList" :key="item.id"
            <div @click="navigateToSubWorkshopSignage(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]}"
@@ -45,7 +49,7 @@
            </div>
          </div>
          <div class="navigate-container" style="bottom:0;right: 5%;">
            <div @click="navigateTo(item)" v-for="item in productionLineList" :key="item.id"
            <div @click="navigateToSubWorkshopSignage(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]}"
@@ -60,11 +64,17 @@
            </div>
          </div>
        </div>

        <div class="switch-container">
          <div @click="activeIndex=index" class="switch-item" v-for="(item,index) in switchList" :key="index"
               :style="{backgroundColor:activeIndex===index?'#848284':'#6B6D6B',color:activeIndex==index?'#27A2DB':'#000'}">
            {{item.label}}
          <div class="switch-item" v-for="(item,index) in switchList" :key="index" @click="navigateToOthers(item,index)"
               :style="{color:activeIndex==index?'#27A2DB':'#000'}">
            <img src="@/assets/navigateImg.png">
            <span>{{item.label}}</span>
          </div>
        </div>

        <div class="page-description">
          {{isFakeData?fakeData.description:'一拖工材所 与 灵秀智能 联合开发'}}
        </div>
      </div>
      <div class="right-col">
@@ -85,19 +95,26 @@
        </div>
      </div>
    </div>

    <SignageModal :fakeData="fakeData" :modalVisible="modalVisible"
                  @closeModal="modalVisible=false" @reloadData="reloadData"></SignageModal>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import api from '@/api/mdc'
  import SignageModal from './modules/MasterControlWorkshopSignage/SignageModal'

  export default {
    name: 'MasterControlWorkshopSignage',
    components: {},
    components: { SignageModal },
    data() {
      return {
        activeIndex: 0,
        isFakeData: true,
        fakeData: {},
        modalVisible: false,
        activeIndex: null,
        firstEnterDevicePixelRatio: null,
        currentDevicePixelRatio: null,
        leftColChart1: '',
@@ -113,29 +130,48 @@
        switchList: [
          {
            label: 'MES',
            index: 0
            index: 0,
            isNavigateToWeb: true,
            webUrl: 'http://172.16.52.71:8081',
            batPath: ''
          },
          {
            label: '刀具管理',
            index: 1
            index: 1,
            isNavigateToWeb: true,
            webUrl: 'http://172.16.52.99/tms',
            batPath: ''
          },
          {
            label: '故障',
            index: 2
            label: '设备诊断',
            index: 2,
            isNavigateToWeb: false,
            webUrl: '',
            batPath: 'yituoSBZD://'
          },
          {
            label: '3D',
            index: 3
            label: '三维监控',
            index: 3,
            isNavigateToWeb: false,
            webUrl: '',
            batPath: 'yituoVR://'
          },
          {
            label: '安防',
            index: 4
            index: 4,
            isNavigateToWeb: false,
            webUrl: '',
            batPath: 'yituoAF://'
          }
        ],
        rightColChart1: '',
        rightColChart2: '',
        rightColChart3: '',
        rightColChart2Data: '',
        rightColChart3Data: '',
        rightColChart2And3Data: '',
        rightColChart2CarouselTime: null,
        rightColChart3CarouselTime: null,
        rightColChart4: '',
        rightColChart4Data: '',
        rightColChart4CarouselTime: null
@@ -145,11 +181,24 @@
      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)
    },
    watch: {
      isFakeData: {
        handler(value) {
          if (value) {
            this.getFakeDataByApi()
          } else {
            this.getChartDataByApi()
          }
        },
        immediate: true
      }
    },
    methods: {
      getProductionListByApi() {
@@ -157,6 +206,48 @@
          .then(res => {
            if (res.success) this.productionLineList = res.result
          })
      },

      getFakeDataByApi() {
        api.getFakeDataApi()
          .then(res => {
            console.log('res', res)
            if (res.success) this.fakeData = res.result
            this.leftColChart1Data = [
              {
                name: '产品合格率',
                count: res.result.passRate / 100
              },
              {
                name: '设备利用率',
                count: res.result.utilizationRate / 100
              },
              {
                name: '计划完成率',
                count: res.result.planCompleteRate / 100
              }
            ]
            this.leftColChart2Data = res.result.todayProductionList
            this.leftColChart3Data = res.result.todayPassRateList
            this.leftColChart4Data = res.result.todayShiftCountList
            this.rightColChart2Data = res.result.todayOpenRateList
            this.rightColChart3Data = res.result.todayUtilizationRateList
            this.rightColChart4Data = res.result.monthUtilizationRateList
            this.$nextTick(() => {
              this.drawLeftColChart1()
              this.drawLeftColChart2()
              this.drawLeftColChart3()
              this.drawLeftColChart4()
              this.drawRightColChart2()
              this.drawRightColChart3()
              this.drawRightColChart4()
            })
          })
      },

      reloadData() {
        this.modalVisible = false
        if (this.isFakeData) this.getFakeDataByApi()
      },

      getChartDataByApi() {
@@ -170,7 +261,6 @@
      },

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

      getLeftColChart2DataByApi() {
        this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
        api.getTodayProductionProgressApi()
          .then(res => {
            // console.log('res', res)
@@ -207,7 +296,6 @@
      },

      getLeftColChart3DataByApi() {
        this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
        api.getTodayProductPassRateApi()
          .then(res => {
            // console.log('res', res)
@@ -219,7 +307,6 @@
      },

      getLeftColChart4DataByApi() {
        this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
        api.getTeamCompletionCountApi()
          .then(res => {
            // console.log('res', res)
@@ -236,8 +323,6 @@
      },

      getRightColChart2And3DataByApi() {
        this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
        this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
        api.getTodayEquipmentWorkEfficiencyApi()
          .then(res => {
            // console.log('res', res)
@@ -250,7 +335,6 @@
      },

      getRightColChart4DataByApi() {
        this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
        api.getMonthEquipmentUtilizationRateApi()
          .then(res => {
            // console.log('res', res)
@@ -263,6 +347,9 @@

      /* 绘制左侧第一个图表 */
      drawLeftColChart1() {
        this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
        console.log('leftColChart1Data', this.leftColChart1Data)

        const yAxisData = []
        const option = {
          radar: [
@@ -391,14 +478,26 @@

      /* 绘制左侧第二个图表 */
      drawLeftColChart2() {
        this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
        const xAxisData = []
        const seriesData1 = []
        const seriesData2 = []
        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 })
        })
        if (this.isFakeData) {
          this.leftColChart2Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData1.push({ value: item.value1 == null ? '' : item.value1 })
              seriesData2.push({ value: item.value2 == null ? '' : item.value2 })
            }
          })
        } else {
          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,
@@ -551,6 +650,7 @@

      /* 绘制左侧第三个图表 */
      drawLeftColChart3() {
        this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
        const data = [
          {
            'number': 'A_1',
@@ -604,12 +704,24 @@
        ]
        const xAxisData = []
        const seriesData = []
        this.leftColChart3Data.forEach(item => {
          xAxisData.push(item.productionName == null ? '' : item.productionName)
          seriesData.push({
            value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
        if (this.isFakeData) {
          this.leftColChart3Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({
                value: this.toDecimal2NoZero(((item.value1 == null ? '' : item.value1) * 100) > 100 ? 100 : (((item.value1 == null ? '' : item.value1) * 100)))
              })
            }
          })
        })
        } else {
          this.leftColChart3Data.forEach(item => {
            xAxisData.push(item.productionName == null ? '' : item.productionName)
            seriesData.push({
              value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
            })
          })
        }

        const option = {
          tooltip: {
            show: true,
@@ -812,12 +924,22 @@

      /* 绘制左侧第四个图表 */
      drawLeftColChart4() {
        this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
        const xAxisData = []
        const seriesData = []
        this.leftColChart4Data.forEach(item => {
          xAxisData.push(item.clazz == null ? '' : item.clazz)
          seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
        })
        if (this.isFakeData) {
          this.leftColChart4Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({ value: item.value1 == null ? '' : item.value1 })
            }
          })
        } else {
          this.leftColChart4Data.forEach(item => {
            xAxisData.push(item.clazz == null ? '' : item.clazz)
            seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
          })
        }
        const option = {
          tooltip: {
            show: true,
@@ -1176,6 +1298,7 @@

      /* 绘制右侧第二个图表 */
      drawRightColChart2() {
        this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
        const data = [
          {
            'number': 'A_1',
@@ -1250,10 +1373,109 @@
        ]
        const xAxisData = []
        const seriesData = []
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.openRate })
        })
        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' }
            ]
          )
        ]

        if (this.isFakeData) {
          this.rightColChart2Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({ value: item.value1 })
            }
          })
        } else {
          this.rightColChart2And3Data.forEach(item => {
            xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
            seriesData.push({ value: item.openRate })
          })
        }

        const option = {
          tooltip: {
            show: true,
@@ -1289,6 +1511,7 @@
              color: '#fff',
              // rotate: 45,
              margin: 15,
              interval: 0,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
@@ -1347,94 +1570,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.

@@ -1446,16 +1581,34 @@
                  shadowColor: 'rgba(218,170, 58, 0.8)'
                }
              }
            }
          ],
          dataZoom: [
            {
              show: false,
              startValue: 0, // 从头开始。
              endValue: 9 // 一次性展示几个
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.rightColChart2.setOption(option, true)

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

      /* 绘制右侧第三个图表 */
      drawRightColChart3() {
        this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
        const data = [
          {
            'number': 'A_1',
@@ -1530,10 +1683,107 @@
        ]
        const xAxisData = []
        const seriesData = []
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.utilizationRate })
        })
        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' }
            ]
          )
        ]
        if (this.isFakeData) {
          this.rightColChart3Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({ value: item.value1 })
            }
          })
        } else {
          this.rightColChart2And3Data.forEach(item => {
            xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
            seriesData.push({ value: item.utilizationRate })
          })
        }
        const option = {
          tooltip: {
            show: true,
@@ -1568,6 +1818,7 @@
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              interval: 0,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
@@ -1603,7 +1854,6 @@
              show: false
            }
          },

          series: [
            {
              name: '利用率',
@@ -1628,94 +1878,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.

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

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

      /* 绘制右侧第四个图表 */
      drawRightColChart4() {
        this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
        const data = [
          {
            'number': 'A_1',
@@ -1979,10 +2159,19 @@
            ]
          )
        ]
        this.rightColChart4Data.forEach(item => {
          xAxisData.push(item.date == null ? '' : item.date)
          seriesData.push({ value: item.utilizationRate })
        })
        if (this.isFakeData) {
          this.rightColChart4Data.forEach(item => {
            if (item.label) {
              xAxisData.push(item.label == null ? '' : item.label)
              seriesData.push({ value: item.value1 })
            }
          })
        } else {
          this.rightColChart4Data.forEach(item => {
            xAxisData.push(item.date == null ? '' : item.date)
            seriesData.push({ value: item.utilizationRate })
          })
        }
        const option = {
          tooltip: {
            show: true,
@@ -2093,6 +2282,7 @@
        option.series[0].data = seriesData
        this.rightColChart4.setOption(option, true)

        clearInterval(this.rightColChart4CarouselTime)
        this.rightColChart4CarouselTime = setInterval(() => {
          xAxisData.push(xAxisData.shift())
          seriesData.push(seriesData.shift())
@@ -2110,7 +2300,7 @@
        return s
      },

      navigateTo(record) {
      navigateToSubWorkshopSignage(record) {
        const url = this.$router.resolve({
          path: '/SubControlWorkshopSignage',
          query: {
@@ -2121,6 +2311,16 @@
        }).href
        window.open(url, '_blank')
      },

      navigateToOthers(record, index) {
        this.activeIndex = index
        if (record.isNavigateToWeb && record.webUrl) {
          window.open(record.webUrl, '_blank')
        } else {
          window.location.href = record.batPath
        }
      },


      /**
       * 窗口尺寸变化时触发
@@ -2184,8 +2384,9 @@
          text-align: center;

          img {
            height: 100%;
            width: 10%;
            position: absolute;
            width: 12%;
            left: 12%;
          }
        }
@@ -2230,8 +2431,27 @@
            flex: 1;
            text-align: center;
            cursor: pointer;
            position: relative;

            span {
              position: relative;
              z-index: 1;
            }
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }

        .page-description {
          text-align: center;
          color: #fff;
          font-size: 0.7vw;
        }
      }

      .left-col, .right-col {