loulijun2021
2022-10-03 d4410fbed6727ee5f05f933018c87ff854129278
src/views/kb/zhkb.vue
@@ -59,7 +59,7 @@
            </div>
            <div class="ckgl kb_block horn kb_flex_column">
              <div style="height: 60px" class="kb_flex_space_between">
                <div style="width: 50%;">
                <div style="width: 188px">
                  <div class="middle_title">
                    <div class="icon">
                      <svg-icon icon-class="zncc" class="svg_class" />
@@ -70,7 +70,7 @@
                    </div>
                  </div>
                </div>
                <div style="width: 50%;">
                <div style="width: 324px">
                  <div class="middle_title">
                    <div class="icon">
                      <svg-icon icon-class="zncc" class="svg_class" />
@@ -88,18 +88,20 @@
                <div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #fff">入库及时率
                </div>
                <div style="width: 320px;margin-left: 10px;align-items: center" class="kb_block kb_flex_space_between">
                  <div class="kb_flex_column" style="position: relative">
                <div
                  style="width: 320px;margin-left: 10px;align-items: center;padding: 10px 20px"
                  class="kb_block kb_flex_space_between"
                >
                  <div class="kb_flex_column" style="position: relative;margin-top: -5px;">
                    <div style="position: absolute;left: 42px;top: 20px">0.01%</div>
                    <div class="box03" />
                    <div style="text-align: center">退货率</div>
                    <div style="text-align: center;margin-top: 5px;">退货率</div>
                  </div>
                  <div class="kb_flex_column" style="position: relative">
                  <div class="kb_flex_column" style="position: relative;margin-top: -5px;">
                    <div style="position: absolute;left: 42px;top: 20px">0.02%</div>
                    <div class="box03" />
                    <div style="text-align: center">损坏率</div>
                    <div style="text-align: center;margin-top: 5px;">损坏率</div>
                  </div>
                </div>
              </div>
              <div style="height: 280px;position: relative" class="kb_flex_column">
@@ -203,7 +205,6 @@
import {
  loadEcharts,
  zhkb01,
  zhkb02,
  zhkb03,
  zhkb04,
  zhkb05,
@@ -211,7 +212,7 @@
  zhkb07,
  zhkb08,
  zhkb09,
  zhkb10, zhkb11, zhkb12
  zhkb10, zhkb11
} from '@/utils/myEcharts'
import '@/utils/echarts-liquidfill.min.js'
@@ -235,13 +236,19 @@
    this.getAllEcharts()
    this.getzhkb02()
    // setInterval(() => {
    //   this.getzhkb02()
    // }, 10000)
    setInterval(() => {
      this.getzhkb02()
    }, 1000 * 18)
    this.getzhkb12()
    setInterval(() => {
      this.getzhkb12()
    }, 1000 * 11)
    this.getzhkb13()
    setInterval(() => {
      this.getzhkb13()
    }, 1000 * 50)
  },
  methods: {
    getAllEcharts() {
@@ -262,6 +269,44 @@
      loadEcharts('zhkb09', zhkb09())
      loadEcharts('zhkb10', zhkb10())
      loadEcharts('zhkb11', zhkb11())
      setInterval(() => {
        loadEcharts('zhkb01', zhkb01())
      }, 1000 * 13)
      setInterval(() => {
        loadEcharts('zhkb03', zhkb03())
        loadEcharts('zhkb03_2', zhkb03())
      }, 1000 * 14)
      setInterval(() => {
        loadEcharts('zhkb04', zhkb04())
      }, 1000 * 15)
      setInterval(() => {
        loadEcharts('zhkb05', zhkb05())
      }, 1000 * 9)
      setInterval(() => {
        loadEcharts('zhkb06', zhkb06())
        loadEcharts('zhkb06_2', zhkb06())
      }, 1000 * 8)
      setInterval(() => {
        loadEcharts('zhkb07_1', zhkb07())
        loadEcharts('zhkb07_2', zhkb07())
        loadEcharts('zhkb07_3', zhkb07())
        loadEcharts('zhkb07_4', zhkb07())
        loadEcharts('zhkb07_5', zhkb07())
        loadEcharts('zhkb07_6', zhkb07())
      }, 1000 * 5)
      setInterval(() => {
        loadEcharts('zhkb08', zhkb08())
      }, 1000 * 6.5)
      setInterval(() => {
        loadEcharts('zhkb09', zhkb09())
      }, 1000 * 10.5)
      setInterval(() => {
        loadEcharts('zhkb10', zhkb10())
      }, 1000 * 7.5)
      setInterval(() => {
        loadEcharts('zhkb11', zhkb11())
      }, 1000 * 11.5)
    },
    getzhkb13() {
      const colorList = ['#47A2FF ', '#53C8D1', '#59CB74', '#FBD444', '#7F6AAD', '#585247', '#00FFFF', '#ff00ff', '#00ff00', '#ffff00', '#ff0000', '#0000ff']
@@ -809,6 +854,7 @@
        series: [
          // 主要展示层的
          {
            left: 150,
            radius: ['40%', '61%'],
            center: ['50%', '50%'],
@@ -928,7 +974,7 @@
      })
      let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      let changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
      const changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
      function highlightPie() { // 取消所有高亮并高亮当前图形
        // for (var idx in option.series[0].data) {