|
@@ -2,7 +2,7 @@
|
|
|
defineOptions({
|
|
|
name: "workerDrak"
|
|
|
});
|
|
|
-import { ref, reactive, nextTick, onMounted } from "vue";
|
|
|
+import { ref, reactive, nextTick, onMounted, watch } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import radar from "@/components/echarts/radar.vue";
|
|
|
import barEcharts from "@/components/echarts/bar.vue";
|
|
@@ -27,7 +27,11 @@ const barDimEchartsRef = ref();
|
|
|
const seachParams = ref();
|
|
|
// 排行榜
|
|
|
const showLength = ref(0);
|
|
|
-const chartList = ref([]);
|
|
|
+const rankTableRefList = reactive({
|
|
|
+ data: [],
|
|
|
+ dept: "",
|
|
|
+ name: ""
|
|
|
+});
|
|
|
const getChartsListApi = async () => {
|
|
|
const { code, data } = await getChartsList({
|
|
|
...seachParams.value,
|
|
@@ -38,10 +42,14 @@ const getChartsListApi = async () => {
|
|
|
nextTick(() => {
|
|
|
if (data) {
|
|
|
showLength.value = data.length;
|
|
|
+ rankTableRefList.data = data;
|
|
|
+ rankTableRefList.dept = "科室";
|
|
|
+ rankTableRefList.name = "姓名";
|
|
|
}
|
|
|
- if (rankTableRef.value) {
|
|
|
- rankTableRef.value.init(data, "科室", "姓名");
|
|
|
- }
|
|
|
+ // console.log("排行榜", rankTableRef.value);
|
|
|
+ // if (rankTableRef.value) {
|
|
|
+ // rankTableRef.value.init(data, "科室", "姓名");
|
|
|
+ // }
|
|
|
});
|
|
|
}, 500);
|
|
|
}
|
|
@@ -57,7 +65,7 @@ const getPersonDimensionChartsListApiDimList = async () => {
|
|
|
});
|
|
|
if (code == 200) {
|
|
|
dataList.dimName = [];
|
|
|
- if (data.length > 0) {
|
|
|
+ if (data && data.length > 0) {
|
|
|
data.map(it => {
|
|
|
it.dimensionList.map(item => {
|
|
|
dataList.dimName.push({
|
|
@@ -66,11 +74,10 @@ const getPersonDimensionChartsListApiDimList = async () => {
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
- console.log("data", data);
|
|
|
- console.log("data", dataList.dimName);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
+const radarRefList = ref([]);
|
|
|
const getPersonDimensionChartsListApi = async (
|
|
|
dimensionName?: string,
|
|
|
dimId?: number | string,
|
|
@@ -96,9 +103,13 @@ const getPersonDimensionChartsListApi = async (
|
|
|
} else {
|
|
|
setTimeout(() => {
|
|
|
nextTick(() => {
|
|
|
- radarRef.value.initChart(data);
|
|
|
+ radarRefList.value = data;
|
|
|
+ // 组件加载过慢使用prop加载
|
|
|
+ // if (radarRef.value) {
|
|
|
+ // radarRef.value.initChart(data);
|
|
|
+ // }
|
|
|
});
|
|
|
- }, 500);
|
|
|
+ }, 0);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -122,9 +133,19 @@ const getPersonDimensionChartsRankingApi = async (
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
+const barDimEchartsList = reactive({
|
|
|
+ data: null,
|
|
|
+ type: null
|
|
|
+});
|
|
|
const init = (item, type) => {
|
|
|
seachParams.value = item;
|
|
|
+ barDimEchartsList.data = null;
|
|
|
+ barDimEchartsList.type = null;
|
|
|
if (Number(type)) {
|
|
|
+ nextTick(() => {
|
|
|
+ barDimEchartsList.data = item;
|
|
|
+ barDimEchartsList.type = 0;
|
|
|
+ });
|
|
|
getPersonDimensionChartsListApi();
|
|
|
getPersonDimensionChartsRankingApi();
|
|
|
getPersonDimensionChartsListApiDimList();
|
|
@@ -147,7 +168,6 @@ const init = (item, type) => {
|
|
|
// 维度表格
|
|
|
const personListRef = ref();
|
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|
|
- console.log(tab, event);
|
|
|
if (tab.props.label == "总览") {
|
|
|
getPersonDimensionChartsListApi();
|
|
|
getPersonDimensionChartsRankingApi();
|
|
@@ -156,24 +176,12 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|
|
getPersonDimensionChartsListApi(tab.props.label, tab.props.name, tab.index);
|
|
|
getPersonDimensionChartsRankingApi(tab.props.label, tab.props.name);
|
|
|
}
|
|
|
- // setTimeout(() => {
|
|
|
- // nextTick(() => {
|
|
|
- // if (barDimEchartsRef.value) {
|
|
|
- // if (Array.isArray(barDimEchartsRef.value)) {
|
|
|
- // barEchartsRef.value[tabIndex - 1]?.init(tab.props);
|
|
|
- // } else {
|
|
|
- // barEchartsRef.value?.init(tab.props);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // });
|
|
|
- // }, 500);
|
|
|
};
|
|
|
const fullBig = (item: any) => {
|
|
|
router.push({
|
|
|
path: "/fullBig",
|
|
|
query: {
|
|
|
- dimensionName: item.name,
|
|
|
- dimId: item.id,
|
|
|
+ ...item,
|
|
|
...seachParams.value,
|
|
|
type: 0
|
|
|
}
|
|
@@ -187,7 +195,7 @@ const fullBig = (item: any) => {
|
|
|
<seachData @handClick="init" />
|
|
|
<div v-if="showLength > 0">
|
|
|
<div class="flex mr-2">
|
|
|
- <radar ref="radarRef" />
|
|
|
+ <radar ref="radarRef" :radarRefList="radarRefList" />
|
|
|
</div>
|
|
|
<el-tabs
|
|
|
v-model="activeName"
|
|
@@ -197,24 +205,36 @@ const fullBig = (item: any) => {
|
|
|
>
|
|
|
<el-tab-pane label="总览" name="1">
|
|
|
<div class="flex mr-8">
|
|
|
- <rankTable ref="rankTableRef" />
|
|
|
+ <rankTable
|
|
|
+ ref="rankTableRef"
|
|
|
+ :rankTableRefList="rankTableRefList"
|
|
|
+ />
|
|
|
</div>
|
|
|
<!-- 总得分 -->
|
|
|
<div class="mt-5 pr-8 w-full h-60">
|
|
|
- <barEcharts ref="barEchartsRef" :title="'总得分'" />
|
|
|
+ <barEcharts
|
|
|
+ ref="barEchartsRef"
|
|
|
+ :title="'总得分'"
|
|
|
+ :barDimEchartsList="barDimEchartsList"
|
|
|
+ />
|
|
|
</div>
|
|
|
<!-- 维度得分 -->
|
|
|
<div class="flex justify-between flex-wrap items-center">
|
|
|
- <div v-for="(item, index) in dataList.dimName" :key="index">
|
|
|
+ <div v-for="item in dataList.dimName" :key="item.id">
|
|
|
<div class="mt-5 pr-8 h-60 w-[600px]">
|
|
|
- <barDimEcharts ref="barDimEchartsRef" :title="item.name" />
|
|
|
+ <barDimEcharts
|
|
|
+ ref="barDimEchartsRef"
|
|
|
+ :title="item.name"
|
|
|
+ :barDimEchartsList="barDimEchartsList"
|
|
|
+ :itemDim="item"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane
|
|
|
v-for="(item, index) in dataList.dimName"
|
|
|
- :key="index"
|
|
|
+ :key="item.id + index"
|
|
|
:label="item.name"
|
|
|
:name="item.id"
|
|
|
:lazy="true"
|
|
@@ -230,7 +250,12 @@ const fullBig = (item: any) => {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="w-full h-60 mt-5 pr-8">
|
|
|
- <barEcharts ref="barEchartsRef" :title="item.name" />
|
|
|
+ <barEcharts
|
|
|
+ ref="barEchartsRef"
|
|
|
+ :title="item.name"
|
|
|
+ :barDimEchartsList="barDimEchartsList"
|
|
|
+ :itemDim="item"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|