@ued_fpi/data-visual 1.2.0 → 1.2.2

package/dist/es/wgms/src/PollutionSourceControl/index.vue.mjs

@@ -1,7 +1,7 @@
 import { ElScrollbar } from 'element-plus/es';
 import 'element-plus/es/components/base/style/css';
 import 'element-plus/es/components/scrollbar/style/css';
-import { defineComponent, reactive, ref, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, toDisplayString, normalizeStyle } from 'vue';
+import { defineComponent, reactive, ref, watch, computed, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, toDisplayString, normalizeStyle } from 'vue';
 import { maxBy } from 'lodash-es';
 import dayjs from 'dayjs';
 import { pollutionSourcePieOptions } from '../../utils/echarts/echartsOptions.mjs';
@@ -10,7 +10,7 @@ import _sfc_main$2 from '../common/ProgressBar.vue.mjs';
 import '../common/ProgressBar.vue2.mjs';
 import _sfc_main$1 from '../common/select-panel.vue.mjs';
 import '../common/select-panel.vue2.mjs';
-import { pomsAlarm, portToRiver, pomsFactorAlarmHandle, pomsFactorAlarmAuto } from './api/index.mjs';
+import { pomsAlarm, portToRiver, pomsFactorAlarm } from './api/index.mjs';
 
 const _hoisted_1 = { class: "dv-wgms-pollution-source" };
 const _hoisted_2 = { class: "dv-wgms-key-source" };
@@ -59,7 +59,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: Number,
       default: dayjs().endOf("year").valueOf()
     },
-    factorCodes: {
+    defaultSelectFactor: {
       type: String,
       default: ""
     },
@@ -71,13 +71,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: [Number, String],
       default: "zaoleishougong"
     },
-    longitude: {
-      type: Number,
-      default: 120.011044
-    },
-    latitude: {
-      type: Number,
-      default: 30.284025
+    stationCode: {
+      type: [Number, String],
+      default: 1
     },
     timeType: {
       type: String,
@@ -90,22 +86,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     isLazy: {
       type: Boolean,
       default: false
+    },
+    data: {
+      type: Array,
+      default: void 0
     }
   },
   emits: ["factorChange"],
   setup(__props, { expose: __expose, emit: emits }) {
     const props = __props;
     const data = reactive({
-      keySelectList: [],
       companyList: [],
-      curSelectFactor: props.factorCodes,
-      defaultValue: props.factorCodes,
-      alarmMax: 0,
-      keySourseData: [
-        { factorIndexCode: "w21003", standardUnitName: null, factorName: "氮超标", rank: 1, total: 0, proportion: 0 },
-        { factorIndexCode: "w21011", standardUnitName: null, factorName: "磷超标", rank: 2, total: 0, proportion: 0 },
-        { factorIndexCode: "w01009", standardUnitName: null, factorName: "其他 ", rank: 3, total: 0, proportion: 0 }
-      ],
+      curSelectFactor: props.defaultSelectFactor,
+      overCountMax: 0,
       chartDetail: [],
       colorList: ["#F84439", "#0062FF", "#2AC94F"],
       nh3OverNum: 0,
@@ -113,23 +106,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       totalCount: 0
     });
     const statChart = ref(null);
-    watch([() => props.beginTime, () => props.endTime, () => props.distance, () => props.siteCode, () => props.factorCodes], () => {
-      data.defaultValue = props.factorCodes;
-      data.curSelectFactor = props.factorCodes;
+    watch(() => props.defaultSelectFactor, (defaultSelectFactor) => {
+      data.curSelectFactor = defaultSelectFactor;
       if (props.isLazy)
         return;
       keyPollutionData();
     });
-    watch([() => props.beginTime, () => props.endTime, () => props.distance, () => props.longitude, () => props.latitude], () => {
+    watch([
+      () => props.beginTime,
+      () => props.endTime,
+      () => props.distance,
+      () => props.siteCode,
+      () => props.stationCode,
+      () => props.timeType,
+      () => props.isHandle
+    ], () => {
+      data.curSelectFactor = props.defaultSelectFactor;
       if (props.isLazy)
         return;
+      keyPollutionData();
       getPortData();
-    });
-    watch([() => props.beginTime, () => props.endTime, () => props.distance, () => props.timeType, () => props.siteCode], () => {
-      if (props.isLazy)
-        return;
       keyPollutionStatistic();
     });
+    const keySelectList = computed(() => {
+      return [
+        { label: "所有因子", value: "" },
+        ...props.factorList
+      ];
+    });
     const keyFactorsCheck = (item, index) => {
       if (data.curSelectFactor === item.code)
         return;
@@ -145,97 +149,72 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       keyPollutionStatistic();
     });
     const keyPollutionData = async () => {
-      data.keySelectList = [
-        { label: "所有因子", value: "" },
-        ...props.factorList
-      ];
       const res = await pomsAlarm({
+        distance: props.distance,
+        dataType: props.isHandle ? 1 : 0,
         startTime: props.beginTime,
         endTime: props.endTime,
-        distance: props.distance,
         siteCode: props.siteCode,
-        factorCodes: data.curSelectFactor
+        factorCodes: data.curSelectFactor,
+        stationCode: props.stationCode,
+        timeType: props.timeType
       });
       if (res.data?.length) {
         data.companyList = res.data.slice(0, 3);
-        data.companyList.forEach((item) => {
-          item.alarmNum = Number(item.alarmNum);
-        });
-        const maxObj = maxBy(data.companyList, "alarmNum");
-        data.alarmMax = maxObj.alarmNum;
+        const maxObj = maxBy(data.companyList, "overCount");
+        data.overCountMax = maxObj.overCount;
       } else {
         data.companyList = [];
       }
     };
     const getPortData = async () => {
       const res = await portToRiver({
-        longitude: props.longitude,
-        latitude: props.latitude,
+        distance: props.distance,
+        dataType: props.isHandle ? 1 : 0,
         startTime: props.beginTime,
         endTime: props.endTime,
-        distance: props.distance
+        siteCode: props.siteCode,
+        factorCodes: "",
+        stationCode: props.stationCode,
+        timeType: props.timeType
       });
-      data.nh3OverNum = res.data?.nh3OverNum ?? 0;
-      data.tpOverNum = res.data?.tpOverNum ?? 0;
+      data.nh3OverNum = res.data?.noverCount ?? 0;
+      data.tpOverNum = res.data?.poverCount ?? 0;
     };
     const keyPollutionStatistic = async () => {
-      const res = await (props.isHandle ? pomsFactorAlarmHandle : pomsFactorAlarmAuto)({
-        timeType: props.timeType,
+      const res = await pomsFactorAlarm({
+        distance: props.distance,
+        dataType: props.isHandle ? 1 : 0,
         startTime: props.beginTime,
         endTime: props.endTime,
-        distance: props.distance,
-        siteCode: props.siteCode
+        siteCode: props.siteCode,
+        factorCodes: "",
+        stationCode: props.stationCode,
+        timeType: props.timeType
       });
-      const total = res.data?.total ?? 0;
+      const resData = res.data;
+      const total = resData?.totalCount ?? 0;
       data.totalCount = total;
-      const dataList = res?.data?.data ?? [];
-      let N = 0;
-      let P = 0;
-      dataList.forEach((item) => {
-        if (item.w21003)
-          N = item.w21003;
-        else if (item.w21011)
-          P = item.w21011;
-      });
-      data.keySourseData.forEach((item) => {
-        if (item.factorIndexCode === "w21003") {
-          item.proportion = N;
-          item.total = total === 0 ? "" : (100 * N / total).toFixed(1);
-        } else if (item.factorIndexCode === "w21011") {
-          item.proportion = P;
-          item.total = total === 0 ? "" : (100 * P / total).toFixed(1);
-        } else {
-          item.proportion = total - P - N;
-          item.total = total === 0 ? "" : (100 * (total - P - N) / total).toFixed(1);
-        }
-      });
-      let otherCount = 0;
+      const dataList = [
+        { name: "氮超标", value: resData?.ncount ?? "--", percent: resData?.npercent ?? "--" },
+        { name: "磷超标", value: resData?.pcount ?? "--", percent: resData?.ppercent ?? "--" },
+        { name: "其他", value: resData?.otherCount ?? "--", percent: resData?.otherPercent ?? "--" }
+      ];
       const colors = ["#35aded", "#ff9902", "#00fc83"];
-      const details = [];
-      data.keySourseData.forEach((item, index) => {
-        otherCount -= item.proportion;
-        details.push({
-          value: item.proportion,
-          rate: item.total,
-          name: item.factorName,
+      data.chartDetail = dataList.map((item, index) => {
+        return {
+          ...item,
           itemStyle: { color: colors[index] }
-        });
+        };
       });
-      data.chartDetail = details;
       const seriesData = [
-        ...data.chartDetail,
-        {
-          value: otherCount,
-          rate: otherCount,
-          name: "其他",
-          itemStyle: { color: "#00fc83" }
-        }
+        ...data.chartDetail
       ];
       const chart = echarts.init(statChart.value);
       const lineOptions = pollutionSourcePieOptions(seriesData);
       chart.setOption(lineOptions);
     };
-    const { keySelectList, companyList, colorList, nh3OverNum, tpOverNum, totalCount, chartDetail, alarmMax, defaultValue } = toRefs(data);
+    const { companyList, colorList, nh3OverNum, tpOverNum, totalCount, chartDetail, overCountMax, curSelectFactor } = toRefs(data);
     __expose({
       keyPollutionData,
       getPortData,
@@ -250,7 +229,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_5, [
               createVNode(_sfc_main$1, {
                 option: unref(keySelectList),
-                "default-value": unref(defaultValue),
+                "default-value": unref(curSelectFactor),
                 onChange: keyFactorsCheck
               }, null, 8, ["option", "default-value"])
             ])
@@ -265,15 +244,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createElementVNode("div", _hoisted_6, [
                     createElementVNode("div", _hoisted_7, [
                       createElementVNode("span", null, toDisplayString(item.rank), 1),
-                      createElementVNode("span", null, toDisplayString(item.siteName), 1)
+                      createElementVNode("span", null, toDisplayString(item.pomsName), 1)
                     ]),
-                    createElementVNode("div", _hoisted_8, toDisplayString(item.alarmNum), 1)
+                    createElementVNode("div", _hoisted_8, toDisplayString(item.overCount), 1)
                   ]),
                   createElementVNode("div", _hoisted_9, [
                     createVNode(_sfc_main$2, {
                       "active-color": "linear-gradient(270deg, #F84439 0%, rgba(248,68,57,0.35) 100%)",
                       "handle-style": { background: "#F84439" },
-                      percentage: item.alarmNum / unref(alarmMax) * 100
+                      percentage: item.overCount / unref(overCountMax) * 100
                     }, null, 8, ["percentage"])
                   ])
                 ]);
@@ -310,9 +289,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     createElementVNode("div", _hoisted_19, toDisplayString(item.name || "--"), 1)
                   ]),
                   createElementVNode("div", _hoisted_20, [
-                    createElementVNode("span", null, toDisplayString(item.value || "--"), 1),
+                    createElementVNode("span", null, toDisplayString(item.value ?? "--"), 1),
                     _hoisted_21,
-                    createElementVNode("span", null, toDisplayString(item.rate || "--") + "%", 1)
+                    createElementVNode("span", null, toDisplayString(item.percent ?? "--") + "%", 1)
                   ])
                 ]);
               }), 128))

package/dist/es/wgms/src/SevenDayKline/index.vue.mjs

@@ -209,10 +209,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           axisPointer: {
             type: "shadow"
           },
-          textStyle: {
-            color: "#b9cfe2",
-            fontFamily: "PingFang SC"
-          },
           formatter(param) {
             param = param[0];
             if (param.axisIndex === 0) {

package/dist/es/wgms/src/SewageOutletsOnlineMonitor/api/index.d.ts

@@ -0,0 +1,6 @@
+import type { OUTLETS_ONLINE_RES } from './types';
+export declare const getOutletsOnlineData: (params: OUTLETS_ONLINE_RES.ParamsRequest) => Promise<{
+    code: number;
+    data: OUTLETS_ONLINE_RES.DataResponse | null;
+    message: string;
+}>;

package/dist/es/wgms/src/SewageOutletsOnlineMonitor/api/index.mjs

@@ -0,0 +1,12 @@
+import requestControl from '../../../service/request.mjs';
+
+const getOutletsOnlineData = (params) => {
+  return requestControl({
+    url: "/api/v1/screen/outlet-online-statistic",
+    server: "wgmsScreenServer",
+    method: "get",
+    params
+  });
+};
+
+export { getOutletsOnlineData };

package/dist/es/wgms/src/SewageOutletsOnlineMonitor/api/types.d.ts

@@ -0,0 +1,15 @@
+export declare namespace OUTLETS_ONLINE_RES {
+    interface ParamsRequest {
+        outletType: '0' | '1';
+        regionCode: string;
+    }
+    interface DataResponse {
+        outletOnlineDetailList: {
+            name: string;
+            onlineCount: number;
+            percent: number;
+            value: number;
+        }[];
+        total: number;
+    }
+}

package/dist/es/wgms/src/SewageOutletsOnlineMonitor/index.d.ts

@@ -4,6 +4,10 @@ export declare const DvWgmsSewageOutletsOnlineMonitor: {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
+            params?: {
+                regionCode: string;
+            } | undefined;
+            colorArr?: string[] | undefined;
             key?: string | number | symbol | undefined;
             style?: unknown;
             ref?: import("vue").VNodeRef | undefined;
@@ -62,7 +66,29 @@ export declare const DvWgmsSewageOutletsOnlineMonitor: {
         $parent: globalThis.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & {
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            params: {
+                type: globalThis.PropType<{
+                    regionCode: string;
+                }>;
+                required: true;
+            } & {
+                default: () => {
+                    regionCode: string;
+                };
+            };
+            colorArr: {
+                type: globalThis.PropType<string[]>;
+                required: true;
+            } & {
+                default: () => string[];
+            };
+        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            params: {
+                regionCode: string;
+            };
+            colorArr: string[];
+        }, {}, string, {}> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -82,9 +108,48 @@ export declare const DvWgmsSewageOutletsOnlineMonitor: {
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    } & Readonly<import("vue").ExtractPropTypes<{
+        params: {
+            type: globalThis.PropType<{
+                regionCode: string;
+            }>;
+            required: true;
+        } & {
+            default: () => {
+                regionCode: string;
+            };
+        };
+        colorArr: {
+            type: globalThis.PropType<string[]>;
+            required: true;
+        } & {
+            default: () => string[];
+        };
+    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    params: {
+        type: globalThis.PropType<{
+            regionCode: string;
+        }>;
+        required: true;
+    } & {
+        default: () => {
+            regionCode: string;
+        };
+    };
+    colorArr: {
+        type: globalThis.PropType<string[]>;
+        required: true;
+    } & {
+        default: () => string[];
+    };
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    params: {
+        regionCode: string;
+    };
+    colorArr: string[];
+}, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;
 export default _SewageOutletsOnlineMonitor;

package/dist/es/wgms/src/SewageOutletsOnlineMonitor/index.vue.d.ts

@@ -1,2 +1,41 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    params: {
+        regionCode: string;
+    };
+    colorArr: string[];
+}>, {
+    params: () => {
+        regionCode: string;
+    };
+    colorArr: () => string[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    params: {
+        regionCode: string;
+    };
+    colorArr: string[];
+}>, {
+    params: () => {
+        regionCode: string;
+    };
+    colorArr: () => string[];
+}>>>, {
+    params: {
+        regionCode: string;
+    };
+    colorArr: string[];
+}, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/dist/es/wgms/src/SewageOutletsOnlineMonitor/index.vue.mjs

@@ -1,109 +1,126 @@
-import { defineComponent, reactive, ref, onMounted, nextTick, toRefs, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, unref, toDisplayString, normalizeStyle } from 'vue';
+import { defineComponent, reactive, ref, onMounted, watch, nextTick, toRefs, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, normalizeClass, toDisplayString, normalizeStyle } from 'vue';
 import echarts from '../../utils/echarts/index.mjs';
 import { getPie3D } from '../../utils/echarts/3dChartOptions.mjs';
+import { getOutletsOnlineData } from './api/index.mjs';
 
-const _hoisted_1 = { class: "outlet-online" };
-const _hoisted_2 = { class: "toggle-list flex-between-center" };
+const _hoisted_1 = { class: "dv-wgms-outlet-online" };
+const _hoisted_2 = { class: "toggle-list dv-wgms-flex-between-center" };
 const _hoisted_3 = ["onClick"];
-const _hoisted_4 = { class: "chart-content flex-between-center" };
+const _hoisted_4 = { class: "chart-content dv-wgms-flex-between-center" };
 const _hoisted_5 = { class: "left" };
-const _hoisted_6 = /* @__PURE__ */ createElementVNode("div", { class: "total" }, [
-  /* @__PURE__ */ createElementVNode("span", null, "总数："),
-  /* @__PURE__ */ createElementVNode("span", null, "982")
-], -1);
-const _hoisted_7 = { class: "legend" };
-const _hoisted_8 = { class: "left-c flex-left-center" };
-const _hoisted_9 = { class: "name" };
-const _hoisted_10 = { class: "righ-c flex-left-center" };
-const _hoisted_11 = { class: "num" };
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { class: "split" }, " / ", -1);
-const _hoisted_13 = { class: "rate" };
+const _hoisted_6 = { class: "total" };
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", null, "总数：", -1);
+const _hoisted_8 = { class: "legend" };
+const _hoisted_9 = { class: "left-c dv-wgms-flex-left-center" };
+const _hoisted_10 = { class: "name" };
+const _hoisted_11 = { class: "righ-c dv-wgms-flex-left-center" };
+const _hoisted_12 = { class: "num" };
+const _hoisted_13 = /* @__PURE__ */ createElementVNode("div", { class: "split" }, " / ", -1);
+const _hoisted_14 = { class: "rate" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
+  props: {
+    params: { default: () => {
+      return {
+        regionCode: "3301"
+      };
+    } },
+    colorArr: { default: () => {
+      return ["#F84439", "#FDBD00", "#15F3A3", "#00DEFF", "#1976D2", "#F2BE32", "#00E87E"];
+    } }
+  },
   setup(__props) {
-    const toggleList = [
-      { label: "入河排污口", value: "0" },
-      { label: "入海排污口", value: "1" }
-    ];
-    const data = reactive({
+    const props = __props;
+    const wgmsData = reactive({
+      toggleList: [
+        { label: "入河排污口", value: "0" },
+        { label: "入海排污口", value: "1" }
+      ],
       activeIndex: 0,
-      colorArr: ["#F84439", "#FDBD00", "#15F3A3", "#00DEFF"],
-      total: 982,
-      optionData: [
-        {
-          name: "雨水排口",
-          value: 47
-        },
-        {
-          name: "工业排污口",
-          value: 91
-        },
-        {
-          name: "城镇污水处理厂排污口",
-          value: 12
-        },
-        {
-          name: "其他排口",
-          value: 832
-        }
-      ]
+      total: 0,
+      optionData: []
     });
     const pieChart = ref();
     onMounted(async () => {
       await import('echarts-gl');
-      await nextTick();
-      initChart();
+      getResData();
     });
+    watch(() => props.params, () => {
+      getResData();
+    }, { deep: true });
+    const getResData = async () => {
+      const { data: res } = await getOutletsOnlineData({
+        ...props.params,
+        outletType: wgmsData.toggleList[wgmsData.activeIndex].value
+      });
+      if (res) {
+        wgmsData.total = res.total;
+        if (res.outletOnlineDetailList && res.outletOnlineDetailList.length) {
+          wgmsData.optionData = res.outletOnlineDetailList.map((item) => {
+            return {
+              ...item,
+              value: item.onlineCount
+            };
+          });
+          await nextTick();
+          initChart();
+        }
+      }
+    };
     const initChart = () => {
-      const options = getPie3D(data.optionData, data.colorArr, 0.6, 185, 38, 15, 0.5);
+      const options = getPie3D(wgmsData.optionData, props.colorArr, 0.6, 185, 38, 15, 0.5);
       echarts.draw(pieChart.value, options);
     };
     const changeList = (index) => {
-      data.activeIndex = index;
+      wgmsData.activeIndex = index;
+      getResData();
     };
     const {
+      toggleList,
       activeIndex,
       total,
-      optionData,
-      colorArr
-    } = toRefs(data);
+      optionData
+    } = toRefs(wgmsData);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
-          (openBlock(), createElementBlock(Fragment, null, renderList(toggleList, (item, index) => {
-            return createElementVNode("div", {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(toggleList), (item, index) => {
+            return openBlock(), createElementBlock("div", {
               key: index,
-              class: normalizeClass([unref(activeIndex) === index ? "active" : "", "list-one flex-center-center"]),
+              class: normalizeClass([unref(activeIndex) === index ? "active" : "", "list-one dv-wgms-flex-center-center"]),
               onClick: ($event) => changeList(index)
             }, toDisplayString(item.label), 11, _hoisted_3);
-          }), 64))
+          }), 128))
         ]),
         createElementVNode("div", _hoisted_4, [
           createElementVNode("div", _hoisted_5, [
-            _hoisted_6,
+            createElementVNode("div", _hoisted_6, [
+              _hoisted_7,
+              createElementVNode("span", null, toDisplayString(unref(total)), 1)
+            ]),
             createElementVNode("div", {
               ref_key: "pieChart",
               ref: pieChart,
               class: "pie-chart"
             }, null, 512)
           ]),
-          createElementVNode("div", _hoisted_7, [
+          createElementVNode("div", _hoisted_8, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(optionData), (item, index) => {
               return openBlock(), createElementBlock("div", {
                 key: index,
-                class: "legend-one flex-between-center"
+                class: "legend-one dv-wgms-flex-between-center"
               }, [
-                createElementVNode("div", _hoisted_8, [
+                createElementVNode("div", _hoisted_9, [
                   createElementVNode("div", {
                     class: "circle",
-                    style: normalizeStyle({ background: unref(colorArr)[index] })
+                    style: normalizeStyle({ background: _ctx.colorArr[index] })
                   }, null, 4),
-                  createElementVNode("div", _hoisted_9, toDisplayString(item.name), 1)
+                  createElementVNode("div", _hoisted_10, toDisplayString(item.name), 1)
                 ]),
-                createElementVNode("div", _hoisted_10, [
-                  createElementVNode("div", _hoisted_11, toDisplayString(item.value), 1),
-                  _hoisted_12,
-                  createElementVNode("div", _hoisted_13, toDisplayString((item.value / unref(total) * 100).toFixed(2)) + "% ", 1)
+                createElementVNode("div", _hoisted_11, [
+                  createElementVNode("div", _hoisted_12, toDisplayString(item.value), 1),
+                  _hoisted_13,
+                  createElementVNode("div", _hoisted_14, toDisplayString((item.value / unref(total) * 100).toFixed(2)) + "% ", 1)
                 ])
               ]);
             }), 128))