bigScreen/src/views/pageOperation/leftTop/index.vue

<template>
  <div class="leftBox">
    <div class="echartsContainer" ref="echartsContainer"></div>
    <div class="bottomBox">
      <section class="top">
        <div class="flex">
          <img src="@/assets/svg/Operation/LeftTop/TrianglePurple.svg" />
          <div>总人数</div>
        </div>
        <p>
          <span class="panmen">{{ totalPopulation }}</span>人
        </p>
      </section>
      <section class="bottom">
        <template v-for="(item, index) in peopleData">
          <div :key="index">
            <div class="left">
              <img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" />
              <span>{{ item['itemName'] }}</span>
            </div>
            <div class="right">
              <span class="panmen">{{ item['itemVal'] }}</span>
              人
            </div>
          </div>
        </template>
      </section>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { GetMonitorOperationCount } from '@/api/monitor';
import dayjs from 'dayjs';
let chart = null;
export default {
  data() {
    return {
      chartOptions: {
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            max: 100,
            radius: '100%',
            center: ['50%', '50%'],
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#6551B4',
                    },
                    {
                      offset: 1,
                      color: '#ACA0DC',
                    },
                  ],
                  global: false,
                },
              },
            },
            axisLine: {
              lineStyle: {
                color: [[1, '#fff']],
                opacity: 0.7,
                width: 30,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 86,
                name: '首台准点率',
                title: {
                  offsetCenter: ['0%', '24%'],
                  fontSize: 22,
                  fontFamily: 'Microsoft YaHei',
                  color: '#5D49AF',
                  overflow: 'break',
                  lineHeight: 20,
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ['0%', '-15%'],
                  fontSize: 40,
                  fontFamily: 'panmen',
                  color: '#5D49AF',
                  formatter: `{value}%`,
                },
              },
            ],
          },
        ],
      },
      peopleData: [
        {
          itemName: '进行中',
          itemVal: '50',
        },
        {
          itemName: '待进行',
          itemVal: '300',
        },
      ],
      totalPopulation: 0,
      isLoading: true,
    };
  },
  methods: {
    onGetPageData() {
      let nowDay = dayjs().format('YYYY-MM-DD');
      if (this.$store.getters.isMock) {
        nowDay = '2024-06-06';
      }
      GetMonitorOperationCount(nowDay).then(res => {
        if (!res.data) {
          this.isLoading = false;
          return;
        }
        let fisrtRate = res['data']['firstPunctualityRate'];
        if (fisrtRate.includes('%')) {
          this.chartOptions['series'][0]['data'][0]['value'] = fisrtRate.slice(0, -1);
        } else {
          this.chartOptions['series'][0]['data'][0]['value'] = Number(fisrtRate);
        }

        this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
        this.peopleData[1]['itemVal'] = res['data']['patWating'];
        this.totalPopulation = res['data']['patCount'];
        chart.setOption(this.chartOptions);
        this.isLoading = false;
      });
    },
  },
  mounted() {
    chart = echarts.init(this.$refs.echartsContainer);
    this.onGetPageData();
    setInterval(() => {
      this.onGetPageData();
    }, this.$store.getters.intervalTime);
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>