PortableDeviceAdmin/src/views/dashboard/workplace/components/channel-chart.vue

<template>
  <a-spin :loading="loading" style="width: 100%; height: 100%">
    <a-card
      class="general-card"
      :header-style="{ paddingBottom: '0' }"
      :body-style="{
        padding: '20px',
        height: 'calc(100% - 40px)',
      }"
      :style="{ height: '100%' }"
    >
      <template #title>
        {{ $t('workplace.channelChart') }}
      </template>
      <div class="chart-box" style="height: 100%">
        <Chart :option="chartOptionOne" />
        <!-- <Chart width="50%" :option="chartOptionTwo" /> -->
      </div>
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import useLoading from '@/hooks/loading';
  import useChartOption from '@/hooks/chart-option';
  import { ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { queryPolicyList, PolicyParams } from '@/api/list';

  const { t } = useI18n();

  const { loading, setLoading } = useLoading();

  const chartData1 = ref<number>(0);
  const chartData2 = ref<number>(0);
  const countSB = ref<number>(0);
  const countTD = ref<number>(0);
  const splitLineLength = '30%';
  const splitLineDistance = -2;
  const splitLineWidth = 10;
  function toPercentage(hold: number, total: number) {
    if (total === 0) {
      return 0; // 避免除以零的情况
    }
    return ((hold / total) * 100).toFixed(0); // 四舍五入保留两位小数
  }
  const chartOptionFn = (count: any, label: string, data: any) => {
    return (isDark: any) => {
      const fontColor = isDark ? '#ccc' : '#fff';
      return {
        title: {
          text: `{a|${toPercentage(data.value, count.value)}%}\n{b|${t(
            'workplace.zxs'
          )}: }{d|${data.value} }\n{c|${t(label)}: }{d|${count.value} }`,
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 30,
                color: fontColor,
                fontWeight: 'bold',
              },
              b: {
                fontSize: 12,
                color: fontColor,
                padding: [10, 0, 0, 0],
              },
              c: {
                fontSize: 12,
                color: fontColor,
                padding: [6, 0, 0, 0],
              },
              d: {
                fontSize: 12,
                color: 'rgb(51, 122, 183)',
                fontWeight: 'bold',
                padding: [6, 0, 0, 0],
              },
            },
          },
        },

        series: [
          {
            type: 'pie',
            radius: ['86%', '70%'],
            silent: true,
            clockwise: true,
            startAngle: -90,
            z: 0,
            zlevel: 0,

            data: [
              {
                value: data.value,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(89, 113, 196, 0.6)', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(89, 113, 196, 1)', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
                label: {
                  show: false,
                },
              },
              {
                value:
                  count.value - data.value === 0 ? 0 : count.value - data.value,
                label: {
                  show: false,
                },
                itemStyle: {
                  color: isDark ? 'rgba(197, 197, 197, 1)' : '#0c336b',
                },
              },
            ],
          },
          {
            name: '',
            type: 'gauge',
            radius: '95%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 360,
            splitNumber: 30,
            axisTick: {
              show: false,
            },
            splitLine: {
              length: splitLineLength,
              distance: splitLineDistance,
              lineStyle: {
                width: splitLineWidth,
                color: isDark ? 'rgba(35, 35, 36, 1)' : '#051F44',
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
      };
    };
  };

  const { chartOption: chartOptionOne } = useChartOption(
    chartOptionFn(countSB, 'workplace.zsb', chartData1)
  );
  // const { chartOption: chartOptionTwo } = useChartOption(
  //   chartOptionFn(countTD, 'workplace.ztd', chartData2)
  // );
  const fetchData = async (
    params: PolicyParams = {
      current: 1,
      pageSize: 20,
      Status: 'All',
    }
  ) => {
    setLoading(true);
    try {
      const { data } = await queryPolicyList(params);
      const res = Array.isArray(data) ? data : [];

      countSB.value = res.length;
      countTD.value = res.length;
      const zxs = res.filter((item) => item.status === 'Online').length;
      chartData1.value = zxs;
      chartData2.value = zxs;
      setLoading(false);
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  fetchData();
</script>

<style scoped lang="scss"></style>