update

2024-09-20 14:32:16 +08:00
parent ed5810611f
commit ed8fc6f8a6
1 changed files with 127 additions and 0 deletions
@@ -0,0 +1,127 @@
+<template>
+    <div class="common-card" :class="[themeType]">
+        <public-title title="体检数据" :themeType="themeType" />
+        <div class="inner">
+            <div class="type-time">
+                <span
+                    v-for="(item, index) in timeTab"
+                    :key="index"
+                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
+                    @click="handleSelect(index, item.value)"
+                    >{{ item.name }}</span
+                >
+            </div>
+            <div class="physical-container">
+                <a-spin :spinning="spinning" class="spin"></a-spin>
+                <div class="RadarCharts" ref="radarChartsRef"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { onMounted, ref, unref, watch } from 'vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
+    import * as echarts from 'echarts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+    import { getPhysicalData } from '/@/views/centralScreen/centralScreen.api.ts';
+
+    const props = defineProps({
+        refreshState: {
+            type: Boolean,
+        },
+        setting: Object,
+    });
+    const { themeType } = useTheme();
+    const { setSession, getSession } = useSession();
+    const { PHYSICAL_DATA } = caching;
+    const { setSpin, spinning } = useSpin();
+    const selectIndex = ref(0);
+    const selectVal = ref('2'); //本年
+    function handleSelect(index: number, value: string) {
+        selectIndex.value = index;
+        selectVal.value = value;
+        setSpin(true);
+        setTimeout(() => {
+            setSpin(false);
+        }, 1000);
+        getList();
+    }
+
+    onMounted(() => {
+        getList();
+    });
+
+    const { radarList, setRadarList, getRadarList } = useHospitalList();
+
+    async function getList() {
+        setSpin(true);
+        try {
+            const { code, result } = (await getPhysicalData({ dataType: props.setting.dataType, condition: selectVal.value })) || {};
+            setSpin(!spinning.value);
+            if (code != 200) {
+                return;
+            }
+            setSession(PHYSICAL_DATA, JSON.stringify(result));
+            setValue(result);
+        } catch {
+            const result = JSON.parse(getSession(PHYSICAL_DATA));
+            setValue(result);
+            setSpin(!spinning.value);
+        }
+    }
+
+    function setValue(result) {
+        setRadarList(result);
+        const everyEmpty = allValueEmpty('value', getRadarList());
+        everyEmpty && initChart();
+    }
+
+    const radarChartsRef = ref<HTMLElement>();
+
+    function initChart() {
+        const myChart = echarts.init(radarChartsRef.value);
+        let countList = radarList?.value.map((item) => item?.userCount);
+        if (countList.length < 1) return;
+        let max = Math.max(...countList);
+        const indicator = radarList?.value.map((item) => ({ name: item?.hospitalName, max: max }));
+        const option = radarCharts({ indicator, countList, theme: unref(themeType) });
+        myChart.setOption(option);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+
+    watch(
+        () => props.refreshState,
+        () => {
+            getList();
+        }
+    );
+</script>
+<style lang="less" scoped>
+    .inner {
+        height: calc(100% - 40px);
+
+        .physical-container {
+            width: 96%;
+            height: calc(100% - 35px);
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-around;
+            position: relative;
+
+            .spin {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+            }
+
+            .RadarCharts {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+</style>