106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<template>
|
|
<div class="pie-container self">
|
|
<public-title title="步数" :theme-type="themeType" />
|
|
<div class="inner" ref="healthChart"></div>
|
|
<div class="count">
|
|
<div class="t">总人数</div>
|
|
<div class="v">{{ total }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import PublicTitle from '/@/components/publicTitle.vue';
|
|
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
|
import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
|
import { screenPie } from '/@/components/item-d/pieCharts.ts';
|
|
import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
|
|
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
|
|
|
const props = defineProps({
|
|
orgCode: String,
|
|
type: String,
|
|
themeType: String,
|
|
});
|
|
const { setSession, getSession } = useSession();
|
|
const { PAGE2_RIGHT2 } = caching;
|
|
watch(
|
|
props,
|
|
() => {
|
|
init();
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
const healthChart = ref<HTMLElement>();
|
|
const { total, setStep, getStepData } = useStep();
|
|
|
|
async function init() {
|
|
try {
|
|
const params = {
|
|
orgCode: props.orgCode,
|
|
type: props.type,
|
|
};
|
|
const { code, result } = await getStep(params);
|
|
if (code == 200) {
|
|
setValue(result);
|
|
setSession(PAGE2_RIGHT2, JSON.stringify(result));
|
|
}
|
|
} catch {
|
|
const result = JSON.parse(getSession(PAGE2_RIGHT2));
|
|
setValue(result);
|
|
}
|
|
}
|
|
|
|
function setValue(result) {
|
|
setStep(result);
|
|
initChart(getStepData());
|
|
}
|
|
|
|
function initChart(chartData) {
|
|
let myChart = echarts.init(healthChart.value);
|
|
let options = screenPie(chartData);
|
|
myChart.setOption(options);
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.inner {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
height: calc(100% - 40px);
|
|
}
|
|
|
|
.pie-container.self {
|
|
position: relative;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.count {
|
|
position: absolute;
|
|
width: 71%;
|
|
top: 51%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
|
|
> div {
|
|
width: 80px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.t {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
</style>
|