68 lines
2.3 KiB
Vue
68 lines
2.3 KiB
Vue
<template>
|
|
<div class="common-card" :class="themeType">
|
|
<public-title title="长庆油田大病人数" :themeType="themeType" />
|
|
<div class="inner" ref="healthChart"></div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, unref, onMounted } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import PublicTitle from '/@/components/publicTitle.vue';
|
|
import { getHealthDataList } from '/@/components/body-d-right/right.api';
|
|
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
|
import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
|
|
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
|
|
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
|
|
|
const props = defineProps({
|
|
setting: Object,
|
|
});
|
|
const { themeType } = useTheme();
|
|
const { setSession, getSession } = useSession();
|
|
const { RIGHT_KEY2 } = caching;
|
|
const { setSpin, spinning } = useSpin();
|
|
const healthChart = ref<HTMLElement>();
|
|
onMounted(() => {
|
|
init();
|
|
});
|
|
const { healthData, getValue, setHealth } = useHealth();
|
|
|
|
async function init() {
|
|
try {
|
|
const { code, result } = await getHealthDataList({ dataType: props.setting?.dataType, orgCode: props.setting?.orgCode });
|
|
setSpin(true);
|
|
if (code != 200) {
|
|
return;
|
|
}
|
|
setSession(RIGHT_KEY2, JSON.stringify(result));
|
|
setValue(result);
|
|
} catch {
|
|
const result = JSON.parse(getSession(RIGHT_KEY2));
|
|
setValue(result);
|
|
}
|
|
}
|
|
|
|
function setValue(result) {
|
|
setHealth(result);
|
|
const yData = unref(getValue);
|
|
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
|
initChart(unref(healthData), total);
|
|
}
|
|
|
|
function initChart(chartData, total) {
|
|
let myChart = echarts.init(healthChart.value);
|
|
let options = ringOption(chartData, total, unref(themeType));
|
|
myChart.setOption(options);
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.inner {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: calc(100% - 40px);
|
|
}
|
|
</style>
|