loulijun2021
2023-01-05 79512a8d78a073742240082a3c4df815ea1ff5d0
src/views/kb/index.vue
@@ -4,7 +4,7 @@
    <div class="kb_body">
      <div class="kb_background" />
      <div class="kb_background2" />
      <div class="kb_head" style="height: 90px">脉链大数据分析平台</div>
      <div class="kb_head" style="height: 90px">未来工厂分析平台</div>
      <div class="kb_headerPic" />
      <div class="kb_flex" style="height: 660px">
        <div class="kb_flex_column">
@@ -21,17 +21,17 @@
          <div class="kb_center_block">
            <div style="display: flex;justify-content: center">
              <div class="kb_center_block_children">
                <div>43,256</div>
                <div style="font-size: 18px;">129,768</div>
                <div class="box02" />
                <div>周耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div>72,234</div>
                <div style="font-size: 18px;">228,702</div>
                <div class="box02" />
                <div>月耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div>122,345</div>
                <div style="font-size: 18px;">337,035</div>
                <div class="box02" />
                <div>季耗能</div>
              </div>
@@ -101,7 +101,7 @@
    setInterval(() => {
      this.value1 = Math.floor(Math.random() * 10000 + 5000)
      this.value2 = Math.floor(Math.random() * 10000 + 5000)
    }, 3000)
    }, 9000)
  },
  methods: {
@@ -147,39 +147,45 @@
        //   }
        // ]
        loadEcharts('pie1', pie1(pie1data))
      }, 10000)
      }, 20000)
      let bar1data1 = ['92', '90', '96', '98', '99']
      let bar1data1 = ['92', '90', '96', '98', '99', '97']
      let bar1data2 = ['70', '60', '50', '40', '30']
      //  加载左下
      loadEcharts('bar1', bar1(bar1data1, bar1data2))
      setInterval(() => {
        // bar1data1 = [1, 2, 3, 4, 5]
        // bar1data2 = [1, 2, 3, 4, 5]
        bar1data1 = [Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92)]
        bar1data1 = [Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92)]
        bar1data2 = [Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70)]
        loadEcharts('bar1', bar1(bar1data1, bar1data2))
      }, 9000)
      }, 15000)
      //  加载左中
      let dataY = ['200', '400', '500', '300', '400', '440', '330', '380', '400', '460', '390', '270']
      loadEcharts('line1', line1(dataY))
      // let dataY = ['200', '400', '500', '300', '400', '440', '330', '380', '400', '460', '390', '270']
      const dataY = [8101, 6382, 7541, 7279, 5288, 7562, 7163, 7541, 7541, 7000, 6000, 6500]
      const dataY2 = [5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000)]
      const dataY3 = [5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000)]
      const dataY4 = [3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000)]
      const dataY5 = [3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000)]
      loadEcharts('line1', line1(dataY, dataY2, dataY3, dataY4, dataY5))
      setInterval(() => {
        dataY = [
          Math.floor(Math.random() * 100 + 200),
          Math.floor(Math.random() * 100 + 400),
          Math.floor(Math.random() * 100 + 300),
          Math.floor(Math.random() * 100 + 400),
          Math.floor(Math.random() * 100 + 300),
          Math.floor(Math.random() * 100 + 300),
          Math.floor(Math.random() * 100 + 200),
          Math.floor(Math.random() * 100 + 400),
          Math.floor(Math.random() * 100 + 400),
          Math.floor(Math.random() * 100 + 300),
          Math.floor(Math.random() * 100 + 200),
          Math.floor(Math.random() * 100 + 400)
        ]
        loadEcharts('line1', line1(dataY))
      }, 8000)
        // dataY = [
        //   Math.floor(Math.random() * 100 + 200),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 200),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 200),
        //   Math.floor(Math.random() * 100 + 400)
        // ]
        loadEcharts('line1', line1(dataY, dataY2, dataY3, dataY4, dataY5))
      }, 18000)
      //  加载右下
      let scaleData1 = [
@@ -295,7 +301,7 @@
        ]
        loadEcharts('pie2', pie2('品质差异比列', scaleData1))
        loadEcharts('pie3', pie2('异常预警比列', scaleData2))
      }, 7000)
      }, 17000)
      let list = [500, 400, 300, 200, 100]
      //  加载左上
@@ -303,23 +309,23 @@
      setInterval(() => {
        list = [Math.floor(Math.random() * 100) + 500, Math.floor(Math.random() * 100) + 400, Math.floor(Math.random() * 100) + 300, Math.floor(Math.random() * 100) + 200, Math.floor(Math.random() * 100) + 100]
        loadEcharts('bar2', bar2(list))
      }, 6000)
      }, 26000)
      //  加载右上
      loadEcharts('bar3', bar3())
      setInterval(() => {
        loadEcharts('bar3', bar3())
      }, 5500)
      }, 22000)
      //  加载中下
      loadEcharts('bar4', bar4())
      setInterval(() => {
        loadEcharts('bar4', bar4())
      }, 6500)
      }, 16500)
      loadEcharts('barline1', barline1())
      setInterval(() => {
        loadEcharts('barline1', barline1())
      }, 7500)
      }, 17500)
    },
    // 加载右中(弃用)
    loadCustom1() {
@@ -611,7 +617,7 @@
          textStyle: {
            // color: '#fff',
            color: '#00ffff',
            fontSize: '18',
            fontSize: '20',
            fontWeight: 'bolder'
          }
        },
@@ -968,6 +974,7 @@
  z-index: 2;
  color: #09d8f2;
  letter-spacing: 2px;
  font-weight: bolder;
}
.kb_headerPic {