<script setup lang="ts"> defineOptions({ name: "headDrank" }); import { ref, reactive, nextTick } from "vue"; import { useRouter } from "vue-router"; import radar from "@/components/echarts/radar.vue"; import barEcharts from "@/components/echarts/bar.vue"; import rankTable from "@/components/rankTable/draw.vue"; import personList from "@/components/personList/index.vue"; import qvanping from "@/assets/rank/qvanping@2x.png"; import seachData from "./componements/seach.vue"; import { getPersonDimensionChartsList, getPersonDimensionChartsRanking, getChartsList } from "@/api/draw"; import type { TabsPaneContext } from "element-plus"; const router = useRouter(); const value = ref(""); const radarRef = ref(); const rankTableRef = ref(); const activeName = ref("1"); const barEchartsRef = ref(); const barDimEchartsRef = ref(); const seachParams = ref(); // 排行榜 const showLength = ref(0); const chartList = ref([]); const getChartsListApi = async () => { const { code, data } = await getChartsList({ ...seachParams.value, type: 2 }); if (code == 200) { showLength.value = data.length; setTimeout(() => { nextTick(() => { if (rankTableRef.value) { rankTableRef.value.init(data, "医疗组"); } }); }, 500); } }; // 雷达图 const dataList = reactive({ dimName: [] }); const getPersonDimensionChartsListApiDimList = async () => { const { code, data } = await getPersonDimensionChartsList({ ...seachParams.value, type: 2 }); if (code == 200) { dataList.dimName = []; if (data.length > 0) { data.map(it => { it.dimensionList.map(item => { dataList.dimName.push({ name: item.dimName, id: item.dimId }); }); }); console.log("data", data); console.log("data", dataList.dimName); } } }; const getPersonDimensionChartsListApi = async ( dimensionName?: string, dimId?: number | string, index?: any ) => { let tabIndex = Number(index); const { code, data } = await getPersonDimensionChartsList({ ...seachParams.value, dimId, dimensionName, type: 2 }); if (code == 200) { if (data.length > 0) { if (dimensionName && dimId) { setTimeout(() => { nextTick(() => { personListRef.value[tabIndex - 1].init(data); }); }, 500); } else { setTimeout(() => { nextTick(() => { radarRef.value.initChart(data); }); }, 500); // rankTableRef.value.init(data, "医疗组"); } } } // console.log(res); }; // 柱状图 const getPersonDimensionChartsRankingApi = async ( dimensionName?: string, dimId?: number | string ) => { const { code, data } = await getPersonDimensionChartsRanking({ ...seachParams.value, dimId, dimensionName, type: 2 }); if (code == 200) { if (data.length > 0) { barEchartsRef.value.init(data); } } }; const init = (item, type) => { seachParams.value = item; if (Number(type)) { getPersonDimensionChartsListApi(); getPersonDimensionChartsRankingApi(); getPersonDimensionChartsListApiDimList(); getChartsListApi(); } setTimeout(() => { nextTick(() => { if (barDimEchartsRef.value) { // barDimEchartsRef.value[0].init(seachParams.value, 0); if (Array.isArray(barDimEchartsRef.value)) { dataList.dimName.map((it, id) => { barDimEchartsRef.value[id - 1].init(seachParams.value, 0); }); } else { barDimEchartsRef.value.init(seachParams.value, 0); } } }); }, 500); }; // 维度表格 const personListRef = ref(); const handleClick = (tab: TabsPaneContext, event: Event) => { if (tab.props.label == "总览") { getPersonDimensionChartsListApi(); getPersonDimensionChartsRankingApi(); getChartsListApi(); } else { getPersonDimensionChartsListApi(tab.props.label, tab.props.name, tab.index); getPersonDimensionChartsRankingApi(tab.props.label, tab.props.name); } // barEchartsRef.value.init(tab.props); }; const fullBig = (item: any) => { router.push({ path: "/fullBig", query: { title: item, ...seachParams.value, type: 2 } }); }; </script> <template> <div class="w-[100%]"> <div class="w-[100%]"> <seachData @handClick="init" /> <div v-if="showLength > 0"> <div class="flex mr-2"> <radar ref="radarRef" /> </div> <el-tabs v-model="activeName" class="demo-tabs" :lazy="true" @tab-click="handleClick" > <el-tab-pane label="总览" name="1"> <div class="flex mr-8"> <rankTable ref="rankTableRef" /> </div> <!-- 总得分 --> <div class="mt-5 pr-8 w-full h-60"> <barEcharts ref="barEchartsRef" :title="'总得分'" /> </div> <!-- 维度得分 --> <div v-for="(item, index) in dataList.dimName" :key="index" class="flex justify-between flex-wrap items-center" > <div class="mt-5 pr-8 w-1/2 h-60"> <barDimEcharts ref="barDimEchartsRef" :title="item.name" /> </div> </div> </el-tab-pane> <el-tab-pane v-for="(item, index) in dataList.dimName" :key="index" :label="item.name" :name="item.id" :lazy="true" > <div class="w-full"> <div class="flex justify-between"> <personList ref="personListRef" class="w-11/12" /> <div class="w-[30px] h-[30px] mr-10 cursor-pointer" @click="fullBig(item.name)" > <img class="w-full h-full" :src="qvanping" alt="" /> </div> </div> <div class="w-full h-60 mt-5 pr-8"> <barEcharts ref="barEchartsRef" :title="item.name" /> </div> </div> </el-tab-pane> </el-tabs> </div> </div> </div> </template>