1.看板地图背景色变浅

loulijun2021

2022-11-26 4e87920494fd491b6ec584bbd208879dda6d0d00

 src/views/kb/zhkb.vue

@@ -238,7 +238,7 @@
    this.getzhkb02()
    setInterval(() => {
      this.getzhkb02()
    }, 1000 * 18)
    }, 1000 * 16)

    this.getzhkb12()
    setInterval(() => {
@@ -248,23 +248,241 @@
    this.getzhkb13()
    setInterval(() => {
      this.getzhkb13()
    }, 1000 * 50)
    }, 1000 * 19)

    // this.getzhkb11()
  },
  methods: {
    // 测试自动播放tooltip
    getzhkb11() {
      const option = {
        backgroundColor: 'transparent',
        // title: {
        //   text: '时段-进出港流量',
        //   left: '5%',
        //   top: '5%',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '18px'
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: [
          {
            icon: 'react',
            right: '0%',
            top: '0%',
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            itemGap: 30,
            itemWidth: 30,
            itemHeight: 4,
            data: ['设备利用率', '设备开机率']
          }
        ],
        grid: {
          top: '10%',
          right: '5%',
          left: '1%',
          bottom: '0%',
          containLabel: true
        },
        yAxis: [
          {
            type: 'category',
            data: ['冷镦车间', '热墩车间', '达克罗车间', '磷化车间', '注塑车间'],
            axisLine: {
              lineStyle: {
                color: '#4E84AC'
                // width: 2
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // margin: 10,
              color: '#09d8f2',
              textStyle: {
                fontSize: 16
              }
            }
          }
        ],
        xAxis: [
          {
            axisLabel: {
              formatter: '{value}',
              color: '#6895CA',
              textStyle: {
                fontSize: 16,
                color: this.colorX
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: '#4E84AC'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                // 使用深浅的间隔色
                color: '#184D9A'
              }
            }
          }
        ],
        series: [
          {
            name: '设备利用率',
            type: 'bar',
            barGap: '70%',
            data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
            barWidth: 12,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#00FFFF' //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: '#00FF00' //  100%  处的颜色
                    }
                  ],
                  global: false //  缺省为  false
                },
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4
              }
            },
            label: {
              normal: {
                show: true,
                // lineHeight: 20,
                // width: 80,
                // height: 20,
                verticalAlign: 'center',
                borderRadius: 200,
                position: 'right',
                color: '#00FF00',
                fontSize: 16
              }
            }
          },
          {
            name: '设备开机率',
            type: 'bar',
            data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
            barWidth: 12,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#00FFFF' //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FFFF00' //  100%  处的颜色
                    }
                  ],
                  global: false //  缺省为  false
                },
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4
              }
            },
            label: {
              normal: {
                show: true,
                // lineHeight: 20,
                // width: 80,
                // height: 20,
                borderRadius: 200,
                verticalAlign: 'center',
                // position: ['-0', '-20'],
                position: 'right',
                color: '#FFFF00',
                fontSize: 16
              }
            }
          }
        ]
      }

      const myChart = echarts.init(document.getElementById('zhkb11'))

      if (option.textStyle == null) {
        option.textStyle = {
          fontFamily: 'Microsoft YaHei',
          color: '#ffffff'
        }
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.clear()
      myChart.setOption(option, true)

      window.addEventListener('resize', function() {
        myChart.resize()
      })

      let index = 0
      setInterval(function() {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
        })
        index++
        if (index > 4) {
          index = 0
        }
      }, 2000)
    },
    getAllEcharts() {
      loadEcharts('zhkb01', zhkb01())
      loadEcharts('zhkb03', zhkb03())
      loadEcharts('zhkb03_2', zhkb03())
      loadEcharts('zhkb03', zhkb03('螺母投入产出率'))
      loadEcharts('zhkb03_2', zhkb03('螺杆投入产出率'))
      loadEcharts('zhkb04', zhkb04())
      loadEcharts('zhkb05', zhkb05())
      loadEcharts('zhkb06', zhkb06())
      loadEcharts('zhkb06_2', zhkb06())
      loadEcharts('zhkb07_1', zhkb07())
      loadEcharts('zhkb07_2', zhkb07())
      loadEcharts('zhkb07_3', zhkb07())
      loadEcharts('zhkb07_4', zhkb07())
      loadEcharts('zhkb07_5', zhkb07())
      loadEcharts('zhkb07_6', zhkb07())
      loadEcharts('zhkb06', zhkb06('检验及时率'))
      loadEcharts('zhkb06_2', zhkb06('成品合格率'))
      loadEcharts('zhkb07_1', zhkb07('钢材故障', 96))
      loadEcharts('zhkb07_2', zhkb07('冷镦', 96))
      loadEcharts('zhkb07_3', zhkb07('热墩', 96))
      loadEcharts('zhkb07_4', zhkb07('热处理', 95))
      loadEcharts('zhkb07_5', zhkb07('达克罗', 95))
      loadEcharts('zhkb07_6', zhkb07('镀锌', 95))
      loadEcharts('zhkb08', zhkb08())
      loadEcharts('zhkb09', zhkb09())
      loadEcharts('zhkb10', zhkb10())
@@ -272,21 +490,21 @@

      setInterval(() => {
        loadEcharts('zhkb01', zhkb01())
      }, 1000 * 13)
      }, 1000 * 10)
      setInterval(() => {
        loadEcharts('zhkb03', zhkb03())
        loadEcharts('zhkb03_2', zhkb03())
      }, 1000 * 14)
        loadEcharts('zhkb03', zhkb03('螺母投入产出率'))
        loadEcharts('zhkb03_2', zhkb03('螺杆投入产出率'))
      }, 1000 * 12)
      setInterval(() => {
        loadEcharts('zhkb04', zhkb04())
      }, 1000 * 15)
      }, 1000 * 14)
      setInterval(() => {
        loadEcharts('zhkb05', zhkb05())
      }, 1000 * 9)
      }, 1000 * 16)
      setInterval(() => {
        loadEcharts('zhkb06', zhkb06())
        loadEcharts('zhkb06_2', zhkb06())
      }, 1000 * 8)
        loadEcharts('zhkb06', zhkb06('检验及时率'))
        loadEcharts('zhkb06_2', zhkb06('成品合格率'))
      }, 1000 * 18)
      // setInterval(() => {
      //   loadEcharts('zhkb07_1', zhkb07())
      //   loadEcharts('zhkb07_2', zhkb07())
@@ -297,32 +515,32 @@
      // }, 1000 * 5)
      setInterval(() => {
        loadEcharts('zhkb08', zhkb08())
      }, 1000 * 9.5)
      }, 1000 * 20)
      setInterval(() => {
        loadEcharts('zhkb09', zhkb09())
      }, 1000 * 10.5)
      }, 1000 * 22)
      setInterval(() => {
        loadEcharts('zhkb10', zhkb10())
      }, 1000 * 7.5)
      }, 1000 * 24)
      setInterval(() => {
        loadEcharts('zhkb11', zhkb11())
      }, 1000 * 11.5)
      }, 1000 * 26)
    },
    getzhkb13() {
      const colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247', '#00FFFF', '#ff00ff', '#00ff00', '#ffff00', '#ff0000', '#0000ff']
      const data = [
        { name: '产品1', value: 100 },
        { name: '产品2', value: 200 },
        { name: '产品3', value: 300 },
        { name: '产品4', value: 400 },
        { name: '产品5', value: 500 },
        { name: '产品6', value: 550 },
        { name: '产品7', value: 570 },
        { name: '产品8', value: 570 },
        { name: '产品9', value: 570 },
        { name: '产品10', value: 570 },
        { name: '产品11', value: 570 },
        { name: '产品12', value: 570 }
        { name: 'LB01   100', value: 100 },
        { name: 'LB02   200', value: 200 },
        { name: 'LB03   300', value: 300 },
        { name: 'LB04   400', value: 400 },
        { name: 'LB05   500', value: 500 },
        { name: 'LB06   550', value: 550 },
        { name: 'LB07   570', value: 570 },
        { name: 'LB08   570', value: 570 },
        { name: 'LB09   570', value: 570 },
        { name: 'LB10   570', value: 570 },
        { name: 'LB11   570', value: 570 },
        { name: 'LB12   570', value: 570 }
      ]
      const option = {
        backgroundColor: 'transparent',
@@ -334,7 +552,7 @@
          containLabel: true
        },
        title: {
          text: '38%',
          text: 80 + Math.ceil(Math.random() * 10) + '%',
          // subtext: '3',
          textStyle: {
            fontSize: 26,
@@ -358,7 +576,7 @@
          left: '4%',
          top: '20%',
          itemGap: 20,
          // selectedMode: false,
          selectedMode: false,
          // icon: 'pin',
          icon: 'roundRect',
          data: data.map(r => r.name),
@@ -422,59 +640,59 @@
        myChart.resize()
      })

      var index = 0 // 播放所在下标
      var mTime = setInterval(function() {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
        })
        index++
        if (index > data.length - 1) {
          index = 0
        }
      }, 2000)
      // var index = 0 // 播放所在下标
      // var mTime = setInterval(function() {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: index
      //   })
      //   index++
      //   if (index > data.length - 1) {
      //     index = 0
      //   }
      // }, 2000)

      var currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器

      function highlightPie() { // 取消所有高亮并高亮当前图形
        // 遍历饼图数据，取消所有图形的高亮效果
        option.series[0].data.forEach((item, index) => {
          myChart.dispatchAction({
            type: 'downplay',
            // type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
          })
        })

        // // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }

      myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        clearInterval(changePieInterval)
        currentIndex = params.dataIndex
        highlightPie()
      })

      myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
        if (changePieInterval) {
          clearInterval(changePieInterval)
        }
        changePieInterval = setInterval(selectPie, 1000)
      })

      function selectPie() { // 高亮效果切换到下一个图形
        var dataLen = option.series[0].data.length
        currentIndex = (currentIndex + 1) % dataLen
        highlightPie()
      }
      // var currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      // var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
      //
      // function highlightPie() { // 取消所有高亮并高亮当前图形
      //   // 遍历饼图数据，取消所有图形的高亮效果
      //   option.series[0].data.forEach((item, index) => {
      //     myChart.dispatchAction({
      //       type: 'downplay',
      //       // type: 'showTip',
      //       seriesIndex: 0,
      //       dataIndex: index
      //     })
      //   })
      //
      //   // // 高亮当前图形
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   })
      // }
      //
      // myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
      //   clearInterval(changePieInterval)
      //   currentIndex = params.dataIndex
      //   highlightPie()
      // })
      //
      // myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
      //   if (changePieInterval) {
      //     clearInterval(changePieInterval)
      //   }
      //   changePieInterval = setInterval(selectPie, 1000)
      // })
      //
      // function selectPie() { // 高亮效果切换到下一个图形
      //   var dataLen = option.series[0].data.length
      //   currentIndex = (currentIndex + 1) % dataLen
      //   highlightPie()
      // }
    },
    getzhkb12() {
      const value1 = Math.ceil(Math.random() * 10 + 60)
@@ -851,6 +1069,7 @@
          orient: 'vertical',
          top: '30%',
          left: '5%',
          selectedMode: false,
          textStyle: {
            color: colorArr.map(r => r),
            fontSize: 16
@@ -984,53 +1203,53 @@
        myChart.resize()
      })

      let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器

      function highlightPie() { // 取消所有高亮并高亮当前图形
        // for (var idx in option.series[0].data) {
        //   // 遍历饼图数据，取消所有图形的高亮效果
        //   myChart.dispatchAction({
        //     type: 'downplay',
        //     seriesIndex: 0,
        //     dataIndex: idx
        //   })
        // }
        // 遍历饼图数据，取消所有图形的高亮效果
        option.series[0].data.forEach((item, index) => {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index
          })
        })

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }

      myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        clearInterval(changePieInterval)
        currentIndex = params.dataIndex
        highlightPie()
      })

      myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
        if (changePieInterval) {
          clearInterval(changePieInterval)
        }
        changePieInterval = setInterval(selectPie, 1000)
      })

      function selectPie() { // 高亮效果切换到下一个图形
        var dataLen = option.series[0].data.length
        currentIndex = (currentIndex + 1) % dataLen
        highlightPie()
      }
      // let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      // var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
      //
      // function highlightPie() { // 取消所有高亮并高亮当前图形
      //   // for (var idx in option.series[0].data) {
      //   //   // 遍历饼图数据，取消所有图形的高亮效果
      //   //   myChart.dispatchAction({
      //   //     type: 'downplay',
      //   //     seriesIndex: 0,
      //   //     dataIndex: idx
      //   //   })
      //   // }
      //   // 遍历饼图数据，取消所有图形的高亮效果
      //   option.series[0].data.forEach((item, index) => {
      //     myChart.dispatchAction({
      //       type: 'downplay',
      //       seriesIndex: 0,
      //       dataIndex: index
      //     })
      //   })
      //
      //   // 高亮当前图形
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: currentIndex
      //   })
      // }
      //
      // myChart.on('mouseover', (params) => { // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
      //   clearInterval(changePieInterval)
      //   currentIndex = params.dataIndex
      //   highlightPie()
      // })
      //
      // myChart.on('mouseout', (params) => { // 用户鼠标移出时，重新开始自动切换
      //   if (changePieInterval) {
      //     clearInterval(changePieInterval)
      //   }
      //   changePieInterval = setInterval(selectPie, 1000)
      // })
      //
      // function selectPie() { // 高亮效果切换到下一个图形
      //   var dataLen = option.series[0].data.length
      //   currentIndex = (currentIndex + 1) % dataLen
      //   highlightPie()
      // }

      // return myChart
    }
@@ -1051,7 +1270,8 @@
  flex-direction: column;
  //color: #09d8f2;
  color: $color01;
  //background-color: 'transparent';
  //background: repeating-radial-gradient(circle, #000000, #444444 100%, #666666 100%);

}

.kb_background {
@@ -1060,8 +1280,9 @@
  width: 1920px;
  height: 887px;
  background: url('../../assets/images/body.jpg') no-repeat;
  z-index: -1;
  //opacity: 0.9;
  //z-index: -1;
  //opacity: 0.4;
  filter: brightness(50%);
}

.kb_background2 {
@@ -1070,8 +1291,9 @@
  width: 1920px;
  height: 887px;
  background: url('../../assets/images/body.jpg') no-repeat;
  z-index: -1;
  //opacity: 0.9;
  filter: brightness(50%);
  //z-index: -1;
  //opacity: 0.4;
}

.kb_flex {
@@ -1115,6 +1337,7 @@
  display: flex;
  //padding: 20px;
  padding: 0 20px 20px 20px;
  z-index: 2;
}

.kb_content_left {