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

zhaowei

2024-10-12 f7cc97f27910c7d570f07df5d0dbd29d3f06049c

 src/views/mdc/base/MasterControlWorkshopSignage.vue

@@ -136,6 +136,8 @@
        rightColChart2: '',
        rightColChart3: '',
        rightColChart2And3Data: '',
        rightColChart2CarouselTime: null,
        rightColChart3CarouselTime: null,
        rightColChart4: '',
        rightColChart4Data: '',
        rightColChart4CarouselTime: null
@@ -149,6 +151,8 @@
    },
    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: {
@@ -1250,103 +1254,6 @@
        ]
        const xAxisData = []
        const seriesData = []
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.openRate })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
@@ -1435,6 +1342,105 @@
                      ]
                    )
                  ]

        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.openRate })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              interval: 0,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  return colorList[params.dataIndex]
                  // build a color map as your need.

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

      /* 绘制右侧第三个图表 */
@@ -1530,104 +1552,6 @@
        ]
        const xAxisData = []
        const seriesData = []
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.utilizationRate })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },

          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
@@ -1716,6 +1640,104 @@
                      ]
                    )
                  ]
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.utilizationRate })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              interval: 0,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  return colorList[params.dataIndex]
                  // build a color map as your need.

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

      /* 绘制右侧第四个图表 */