chem_mes/mes-ui/mes-echarts/src/views/center.vue

<template>
  <div id="center">
    <!-- <div class="up">
      <div v-for="item in titleItem" :key="item.title" class="bg-color-black item">
        <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
        <div>
          <dv-digital-flop class="dv-dig-flop ml-1 mt-2 pl-3" :config="item.number" />
        </div>
      </div>   
    </div> -->
    <div class="down">
      <div  class="percent">
        <div class="item bg-color-black">
          <span>订单达成率</span>
          <dv-water-level-pond :key="componentKey" :config="config" style="width:100px;height:100px" />
        </div>
        <div class="item bg-color-black">
          <span>订单合格率</span>
          <dv-water-level-pond :key="componentKey1" :config="config1" style="width:100px;height:100px" />
        </div>
      </div>
      <!-- <div v-if="!this.hasDate" class="percent">
        <div class="item bg-color-black" style="width: 100% !important;">
          <span style="margin-left: 28%;">订单达成率</span>
          <dv-water-level-pond :key="componentKey" :config="config" style="width:100px;height:100px;margin-left: 25%;" />
        </div>
      </div> -->
      <div class="ranking bg-color-black">
        <span>7日产量</span>
        <BottomLeftChart />
      </div>

    </div>
  </div>
</template>

<script>
// import CenterChart from '@/components/echart/center/centerChartRate/index'
import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart/index'
import { request } from '@/utils/request.js'

export default {
  components: {
    // CenterChart,
    BottomLeftChart
  },
  data() {
    return {
      componentKey: 0.0000001,
      componentKey1: 0.0000001,
      config: {
        data: [95.44],
        shape: 'round',
        waveHeight: 10,
        waveNum: 2
        // colors: ['#003366', 'FFE4C4']
      },
      hasDate : false,
      config1: {
        data: [97],
        shape: 'round',
        waveHeight: 10,
        waveNum: 2
        // colors: ['#003366', 'FFE4C4']
      },
      water: {
        data: [24, 45],
        shape: 'roundRect',
        formatter: '{value}%',
        waveNum: 3
      },
      // 通过率和达标率的组件复用数据
      rate: [
        {
          id: 'centerRate1',
          tips: 60,
          colorData: {
            textStyle: '#3fc0fb',
            series: {
              color: ['#00bcd44a', 'transparent'],
              dataColor: {
                normal: '#03a9f4',
                shadowColor: '#97e2f5'
              }
            }
          }
        },
        {
          id: 'centerRate2',
          tips: 40,
          colorData: {
            textStyle: '#67e0e3',
            series: {
              color: ['#faf3a378', 'transparent'],
              dataColor: {
                normal: '#ff9800',
                shadowColor: '#fcebad'
              }
            }
          }
        }
      ]
    }
  },
  created() {
    this.setInterval()
    this.configs()
  },
  mounted() {},
  methods: {
    setInterval() {
      const _this = this
      // 应通过接口获取配置时间，暂时写死10s
      const time = 5 * 1000
      if (this.intervalId !== null) {
        clearInterval(this.intervalId)
      }
      this.intervalId = setInterval(() => {
        _this.configs()
      }, time)
    },
    refreshComponent() {
      this.componentKey += 0.0000001
      this.componentKey1 += 0.00000001
    },
    configs() {
      // 使用 localStorage.getItem 通过键名获取存储的值
      const storedString = localStorage.getItem('myStoredArray')
      // 检查存储的值是否存在
      if (storedString !== null) {
        // 使用 JSON.parse 将字符串反序列化回数组
        this.retrievedArray = JSON.parse(storedString)
        this.retrievedArray.filter((item) => {
          if (item.type === 'ProductionOrderState') {
            if (item.openMock === 1) {
              var datalist = JSON.parse(item.mockData)
              this.config.data = [datalist[0] * 1]
              this.config1.data = [datalist[1] * 1]
              this.config = { ...this.config }
              this.config1 = { ...this.config1 }
            } else {
              var datas = JSON.parse(item.data)
              this.config.data = [datas[0] * 1]
              if (datas[1] == null) {
                this.config1.data = [100]
                this.config1.formatter = ''
              } else {
                this.config1.data = [100 - datas[1] * 1]
              }

              this.config = { ...this.config }
              this.config1 = { ...this.config1 }
            }
            this.refreshComponent()
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
      height: 70px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
    }
  }
  .down {
    margin: 10px;
    padding: 10px;
    width: 100%;
    display: flex;
    height: 245px;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 5px;
    }
    .ranking {
      padding: 15px;
      width: 59%;
      text-align: center;
      padding-bottom: 10px;
      .dv-scr-rank-board {
        height: 180px;
      }
      span {
        margin-top: 20px;
      }
    }

    .percent {
      width: 40%;
      display: flex;
      flex-wrap: wrap;
      .item {
        padding-left: 35px;
        width: 50%;
        height: 225px;
        span {
          // margin:30px 10px 40px 30px;
          margin-top: 15px;
          margin-left: 10px;
          margin-bottom: 50px;
          font-size: 16px;
          display: flex;
          /*justify-content: center;*/
        }
      }
      .water {
        width: 100%;

        .dv-wa-le-po {
          height: 120px;
        }
      }
    }
  }
}
</style>