128 lines
4.0 KiB
Vue
128 lines
4.0 KiB
Vue
<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>
|