fix: 画像接口调用优化

src/components/echarts/radar.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, computed, nextTick, onMounted, watch } from "vue";
 import { useDark, useECharts } from "@pureadmin/utils";
-import { getPersonDimensionChartsList } from "@/api/draw";
 const $props = defineProps({
   radarRefList: {
-    type: Object
+    type: Array,
+    default: () => []
   }
 });
 onMounted(() => {
@@ -34,68 +34,64 @@ const rankValue = ref([]);
 const initChart = async (item?: any) => {
   rankName.value = [];
   rankValue.value = [];
-  const { data, code } = await getPersonDimensionChartsList({ ...item });
-  // console.log("雷达图", data);
-  if (data && data.length != 0) {
-    data.map(itx => {
-      itx.dimensionList.map(it => {
-        rankName.value.push({
-          name: it.dimName
-        });
-        rankValue.value.push(it.soreRate);
+  const data = item || [];
+  data.map(itx => {
+    itx.dimensionList.map(it => {
+      rankName.value.push({
+        name: it.dimName
       });
+      rankValue.value.push(it.soreRate);
     });
-    console.log("rankName", rankName.value);
-    rankName.value.forEach(item => {
-      if (item.name.length > 5) {
-        item.name = item.name.slice(0, 5) + "..."; // 截取前5个字符并加上 "..."
+  });
+  rankName.value.forEach(item => {
+    if (item.name && item.name.length > 5) {
+      item.name = item.name.slice(0, 5) + "..."; // 截取前5个字符并加上 "..."
+    }
+  });
+  setOptions({
+    tooltip: {},
+    legend: {
+      // icon: "arrow",
+      itemWidth: 25,
+      itemHeight: 4,
+      data: ["得分率"],
+      top: 10,
+      left: "left"
+    },
+    radar: {
+      radius: "65%", // 调整半径以使雷达图更大
+      indicator: rankName.value.map((item, index) => ({
+        name: item.name,
+        max: 1 // 设置每个维度的最大值为 1，确保得分率的满分为 1
+      })),
+      axisName: {
+        color: "black"
       }
-    });
-    setOptions({
-      tooltip: {},
-      legend: {
-        // icon: "arrow",
-        itemWidth: 25,
-        itemHeight: 4,
-        data: ["得分率"],
-        top: 10,
-        left: "left"
-      },
-      radar: {
-        radius: "65%", // 调整半径以使雷达图更大
-        indicator: rankName.value.map((item, index) => ({
-          name: item.name,
-          max: 1 // 设置每个维度的最大值为 1，确保得分率的满分为 1
-        })),
-        axisName: {
-          color: "black"
-        }
-      },
-      series: [
-        {
-          name: "得分率",
-          type: "radar",
-          areaStyle: {
-            normal: {
-              color: "rgba(0, 128, 255, 0.2)" // 设置内部填充颜色和透明度
-            }
-          },
-          lineStyle: {
-            normal: {
-              width: 1, // 设置线条宽度为 1
-              color: "rgba(0, 128, 255, 1)" // 设置线条颜色
-            }
-          },
-          data: [
-            {
-              value: rankValue.value
-              // name: "支出"
-            }
-          ]
-        }
-      ]
-    });
-  }
+    },
+    series: [
+      {
+        name: "得分率",
+        type: "radar",
+        areaStyle: {
+          normal: {
+            color: "rgba(0, 128, 255, 0.2)" // 设置内部填充颜色和透明度
+          }
+        },
+        lineStyle: {
+          normal: {
+            width: 1, // 设置线条宽度为 1
+            color: "rgba(0, 128, 255, 1)" // 设置线条颜色
+          }
+        },
+        data: [
+          {
+            value: rankValue.value
+            // name: "支出"
+          }
+        ]
+      }
+    ]
+  });
 };
 defineExpose({ initChart });
 </script>

src/components/personList/index.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: zhanghaifeng
+ * @Date: 2024-11-27 15:44:12
+ * @LastEditors: zhanghaifeng
+ * @LastEditTime: 2025-06-24 17:11:05
+ * @Description:
+ * @FilePath: /hospital-project/src/components/personList/index.vue
+-->
 <template>
   <div class="mr-8">
     <el-table :data="tableData" style="width: 100%">
@@ -44,35 +52,22 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, watch, onMounted } from "vue";
-import { getPersonDimensionChartsList } from "@/api/draw";
+import { ref, nextTick, watch } from "vue";
 const tableData = ref([]);
 const showList = ref();
 const watchData = ref();
 const props = defineProps({
   paramsIndex: {
     type: Object
-  }
-});
-const params = ref({});
-const getPersonDimensionChartsApi = async () => {
-  const { code, data } = await getPersonDimensionChartsList(params.value);
-  if (code == 200) {
-    showList.value = data[0]?.dimensionList[0];
-    tableData.value = data[0]?.dimensionList[0]?.quotaList;
-  }
-};
-onMounted(() => {
-  if (props.paramsIndex) {
-    Object.assign(params.value, props.paramsIndex);
-    if (props.paramsIndex) {
-      getPersonDimensionChartsApi();
-    }
+  },
+  detailData: {
+    type: Array,
+    default: () => []
   }
 });
 watch(props, newVal => {
-  Object.assign(params.value, newVal.paramsIndex);
-  getPersonDimensionChartsApi();
+  showList.value = newVal.detailData[0]?.dimensionList[0];
+  tableData.value = newVal.detailData[0]?.dimensionList[0]?.quotaList;
 });
 const init = (data?: any, id?: any) => {
   if (data) {

src/views/draw/children/department/componements/seachOld.vue

@@ -128,7 +128,8 @@ const handClickInit3 = value => {
       ...dataList.params,
       ...init
     },
-    1
+    1,
+    value
   );
 };
 

src/views/draw/children/department/departmentDrank.vue

@@ -11,12 +11,7 @@ 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/seachOld.vue";
-import {
-  getPersonDimensionChartsList,
-  getPersonDimensionChartsRanking,
-  getAssessmentList,
-  getChartsList
-} from "@/api/draw";
+import { getPersonDimensionChartsList, getChartsList } from "@/api/draw";
 import type { TabsPaneContext } from "element-plus";
 const router = useRouter();
 const activeName = ref("1");
@@ -54,6 +49,7 @@ const getPersonDimensionChartsListApiDimList = async () => {
     type: 1
   });
   if (code == 200) {
+    radarRefList.value = data;
     dataList.dimName = [];
     if (data && data.length > 0) {
       data.map(it => {
@@ -67,79 +63,26 @@ const getPersonDimensionChartsListApiDimList = async () => {
         }
       });
     }
-    console.log(dataList.dimName, "====");
   }
 };
 const radarRefList = ref([]);
-const getPersonDimensionChartsListApi = async (
-  dimensionName?: string,
-  dimId?: number | string,
-  index?: any
-) => {
-  const { code, data } = await getPersonDimensionChartsList({
-    ...seachParams.value,
-    dimId,
-    dimensionName,
-    type: 1
-  });
-  let tabIndex = Number(index);
-  if (code == 200) {
-    if (data && data.length > 0) {
-      console.log(data);
-      if (dimensionName && dimId) {
-        setTimeout(() => {
-          nextTick(() => {
-            if (personListRef.value) {
-              // personListRef?.value[tabIndex - 1]?.init(data);
-            }
-          });
-        }, 500);
-      } else {
-        setTimeout(() => {
-          nextTick(() => {
-            // radarRefList.value = data;
-            // radarRef.value.initChart(data);
-          });
-        }, 500);
-      }
-    }
-  }
-
-  // console.log(res);
-};
-const getPersonDimensionChartsRankingApi = async (
-  dimensionName?: string,
-  dimId?: number | string
-) => {
-  const { code, data } = await getPersonDimensionChartsRanking({
-    ...seachParams.value,
-    dimId,
-    dimensionName,
-    type: 1
-  });
-  if (code == 200) {
-    if (data && data.length > 0) {
-      // barEchartsRef.value.init(data);
-    }
-  }
-};
 const barDimEchartsList = reactive({
   data: null,
   type: null
 });
-const init = (item, type) => {
+const init = (item, type, val) => {
   seachParams.value = item;
   barDimEchartsList.data = null;
   barDimEchartsList.type = null;
   if (Number(type)) {
     nextTick(() => {
-      console.log(item, type, "=====");
-      radarRefList.value = { ...seachParams.value, type: 1 };
       barDimEchartsList.data = item;
       barDimEchartsList.type = 1;
-      // getPersonDimensionChartsListApi();
-      getPersonDimensionChartsListApiDimList();
-      getPersonDimensionChartsRankingApi();
+      if (val) {
+        getPersonDimensionChartsListApiDimList();
+      } else {
+        radarRefList.value = [];
+      }
       getChartsListApi();
       activeName.value = "1";
     });
@@ -147,11 +90,6 @@ const init = (item, type) => {
     showLength.value = 0;
     return;
   }
-  // setTimeout(() => {
-  //   nextTick(() => {
-  //     //
-  //   });
-  // }, 500);
 };
 // 维度表格
 const paramsIndex = ref({});
@@ -159,12 +97,7 @@ const personListRef = ref();
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   loading.value = true;
   if (tab.props.label == "总览") {
-    getPersonDimensionChartsListApi();
-    getPersonDimensionChartsRankingApi();
     getChartsListApi();
-  } else {
-    getPersonDimensionChartsListApi(tab.props.label, tab.props.name, tab.index);
-    getPersonDimensionChartsRankingApi(tab.props.label, tab.props.name);
   }
   nextTick(() => {
     Object.assign(paramsIndex.value, {
@@ -177,7 +110,6 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   setTimeout(() => {
     loading.value = false;
   }, 1000);
-  // barEchartsRef.value.init(tab.props);
 };
 const fullBig = (item: any) => {
   console.log(item);
@@ -247,6 +179,7 @@ const loading = ref(false);
                   ref="personListRef"
                   class="w-11/12"
                   :paramsIndex="paramsIndex"
+                  :detailData="radarRefList"
                 />
                 <div
                   class="w-[30px] h-[30px] mr-10 cursor-pointer"

src/views/draw/children/head/componements/seachOld.vue

@@ -140,7 +140,8 @@ const handClickInit3 = value => {
       ...dataList.params,
       ...init
     },
-    "1"
+    "1",
+    value
   );
 };
 

src/views/draw/children/head/headDrank.vue

@@ -11,23 +11,12 @@ 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/seachOld.vue";
-import {
-  getPersonDimensionChartsList,
-  getPersonDimensionChartsRanking,
-  getAssessmentList,
-  getChartsList
-} from "@/api/draw";
+import { getPersonDimensionChartsList, getChartsList } from "@/api/draw";
 import type { TabsPaneContext } from "element-plus";
 const router = useRouter();
 const activeName = ref("1");
 // 排行榜
 const showLength = ref(0);
-const chartList = ref([]);
-const rankTableRefList = reactive({
-  data: [],
-  dept: "",
-  name: ""
-});
 const getChartsListApi = async () => {
   const { code, data } = await getChartsList({
     ...seachParams.value,
@@ -59,6 +48,7 @@ const getPersonDimensionChartsListApiDimList = async () => {
     type: 3
   });
   if (code == 200) {
+    radarRefList.value = data;
     if (data && data.length > 0) {
       dataList.dimName = [];
       data.map(it => {
@@ -73,81 +63,21 @@ const getPersonDimensionChartsListApiDimList = async () => {
   }
 };
 const radarRefList = ref([]);
-const getPersonDimensionChartsListApi = async (
-  dimensionName?: string,
-  dimId?: number | string,
-  index?: any
-) => {
-  const { code, data } = await getPersonDimensionChartsList({
-    ...seachParams.value,
-    dimId,
-    dimensionName,
-    type: 3
-  });
-  let tabIndex = Number(index);
-
-  if (code == 200) {
-    if (data && data.length > 0) {
-      if (dimensionName && dimId) {
-        setTimeout(() => {
-          nextTick(() => {
-            // personListRef?.value[tabIndex - 1]?.init(data);
-          });
-        }, 500);
-      } else {
-        setTimeout(() => {
-          nextTick(() => {
-            // radarRefList.value = data;
-            // radarRef.value.initChart(data);
-            // rankTableRef.value.init(data, "科室");
-          });
-        }, 500);
-      }
-    }
-  }
-
-  // console.log(res);
-};
-const getPersonDimensionChartsRankingApi = async (
-  dimensionName?: string,
-  dimId?: number | string,
-  index?: any
-) => {
-  const { code, data } = await getPersonDimensionChartsRanking({
-    ...seachParams.value,
-    dimId,
-    dimensionName,
-    type: 3
-  });
-  if (code == 200) {
-    // if (data && data.length > 0) {
-    //   nextTick(() => {
-    //     if (Array.isArray(barEchartsRef?.value)) {
-    //       barEchartsRef?.value[Number(index - 1)]?.init(seachParams.value, 3, {
-    //         id: dimId,
-    //         name: dimensionName
-    //       });
-    //     } else {
-    //       barEchartsRef?.value?.init(data);
-    //     }
-    //   });
-    // }
-  }
-};
 const barDimEchartsList = reactive({
   data: null,
   type: null
 });
-const init = (item, type) => {
+const init = (item, type, val) => {
   seachParams.value = item;
   if (Number(type)) {
     nextTick(() => {
-      radarRefList.value = { ...seachParams.value, type: 3 };
       barDimEchartsList.data = item;
       barDimEchartsList.type = 3;
-      getPersonDimensionChartsListApi();
-      getPersonDimensionChartsRankingApi();
-      getPersonDimensionChartsListApiDimList();
+      if (val) {
+        getPersonDimensionChartsListApiDimList();
+      } else {
+        radarRefList.value = [];
+      }
       getChartsListApi();
       activeName.value = "1";
     });
@@ -175,19 +105,11 @@ const personListRef = ref();
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   loading.value = true;
   if (tab.props.label == "总览") {
-    getPersonDimensionChartsListApi();
-    getPersonDimensionChartsRankingApi();
     getChartsListApi();
     setTimeout(() => {
       loading.value = false;
     }, 1000);
   } else {
-    getPersonDimensionChartsListApi(tab.props.label, tab.props.name, tab.index);
-    getPersonDimensionChartsRankingApi(
-      tab.props.label,
-      tab.props.name,
-      tab.index
-    );
     setTimeout(() => {
       loading.value = false;
     }, 1000);
@@ -269,6 +191,7 @@ const loading = ref(false);
                   ref="personListRef"
                   class="w-11/12"
                   :paramsIndex="paramsIndex"
+                  :detailData="radarRefList"
                 />
                 <div
                   class="w-[30px] h-[30px] mr-10 cursor-pointer"

src/views/draw/children/health/componements/seachOld.vue

@@ -123,7 +123,8 @@ const handClickInit3 = value => {
       ...dataList.params,
       ...init
     },
-    "1"
+    "1",
+    value
   );
 };
 

src/views/draw/children/health/healthDrank.vue

@@ -11,14 +11,9 @@ 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/seachOld.vue";
-import {
-  getPersonDimensionChartsList,
-  getPersonDimensionChartsRanking,
-  getChartsList
-} from "@/api/draw";
+import { getPersonDimensionChartsList, 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");
@@ -27,12 +22,6 @@ const barDimEchartsRef = ref();
 const seachParams = ref();
 // 排行榜
 const showLength = ref(0);
-const rankTableRefList = reactive({
-  data: [],
-  dept: "",
-  name: ""
-});
-const chartList = ref([]);
 const getChartsListApi = async () => {
   const { code, data } = await getChartsList({
     ...seachParams.value,
@@ -61,6 +50,7 @@ const getPersonDimensionChartsListApiDimList = async () => {
     type: 2
   });
   if (code == 200) {
+    radarRefList.value = data;
     dataList.dimName = [];
     if (data && data.length > 0) {
       data.map(it => {
@@ -75,70 +65,21 @@ const getPersonDimensionChartsListApiDimList = async () => {
   }
 };
 const radarRefList = ref([]);
-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 && data.length > 0) {
-      if (dimensionName && dimId) {
-        setTimeout(() => {
-          nextTick(() => {
-            // personListRef?.value[tabIndex - 1]?.init(data);
-          });
-        }, 500);
-      } else {
-        setTimeout(() => {
-          nextTick(() => {
-            // radarRefList.value = data;
-            // radarRef.value.initChart(data);
-          });
-        }, 500);
-      }
-    }
-  }
-
-  // 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) {
-  //   }
-  // }
-};
 const barDimEchartsList = reactive({
   data: null,
   type: null
 });
-const init = (item, type) => {
+const init = (item, type, val) => {
   seachParams.value = item;
   if (Number(type)) {
     nextTick(() => {
-      radarRefList.value = { ...seachParams.value, type: 2 };
       barDimEchartsList.data = item;
       barDimEchartsList.type = 2;
-      getPersonDimensionChartsListApi();
-      getPersonDimensionChartsRankingApi();
-      getPersonDimensionChartsListApiDimList();
+      if (val) {
+        getPersonDimensionChartsListApiDimList();
+      } else {
+        radarRefList.value = [];
+      }
       getChartsListApi();
       activeName.value = "1";
     });
@@ -168,12 +109,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   loading.value = true;
 
   if (tab.props.label == "总览") {
-    getPersonDimensionChartsListApi();
-    getPersonDimensionChartsRankingApi();
     getChartsListApi();
-  } else {
-    getPersonDimensionChartsListApi(tab.props.label, tab.props.name, tab.index);
-    getPersonDimensionChartsRankingApi(tab.props.label, tab.props.name);
   }
   nextTick(() => {
     Object.assign(paramsIndex.value, {
@@ -264,6 +200,7 @@ const loading = ref(false);
                   ref="personListRef"
                   class="w-11/12"
                   :paramsIndex="paramsIndex"
+                  :detailData="radarRefList"
                 />
                 <div
                   class="w-[30px] h-[30px] mr-10 cursor-pointer"

src/views/draw/children/worker/componements/seachOld.vue

@@ -176,7 +176,8 @@ const handClickInit4 = value => {
       ...dataList.params,
       ...init
     },
-    "1"
+    "1",
+    value
   );
 };
 const route = useRoute();

src/views/draw/children/worker/workerDrak.vue

@@ -11,11 +11,7 @@ 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/seachOld.vue";
-import {
-  getPersonDimensionChartsList,
-  getPersonDimensionChartsRanking,
-  getChartsList
-} from "@/api/draw";
+import { getPersonDimensionChartsList, getChartsList } from "@/api/draw";
 import type { TabsPaneContext } from "element-plus";
 const router = useRouter();
 const value = ref("");
@@ -58,6 +54,7 @@ const getPersonDimensionChartsListApiDimList = async () => {
     type: 0
   });
   if (code == 200) {
+    radarRefList.value = data;
     dataList.dimName = [];
     if (data && data.length > 0) {
       data.map(it => {
@@ -72,76 +69,24 @@ const getPersonDimensionChartsListApiDimList = async () => {
   }
 };
 const radarRefList = ref();
-const getPersonDimensionChartsListApi = async (
-  dimensionName?: string,
-  dimId?: number | string,
-  index?: any
-) => {
-  const { code, data } = await getPersonDimensionChartsList({
-    ...seachParams.value,
-    dimId,
-    dimensionName,
-    type: 0
-  });
-  let tabIndex = Number(index);
-  setTimeout(() => {
-    nextTick(() => {
-      // radarRefList.value = data;
-      // 组件加载过慢使用prop加载
-      // if (radarRef.value) {
-      //   radarRef.value.initChart(data);
-      // }
-    });
-  }, 0);
-  if (code == 200) {
-    if (dimensionName && dimId) {
-      setTimeout(() => {
-        nextTick(() => {
-          if (personListRef.value) {
-            // personListRef?.value[tabIndex - 1]?.init(data);
-          }
-        });
-      }, 0);
-    } else {
-    }
-  }
-};
-
-// console.log(res);
 
-// 柱状图
-// const getPersonDimensionChartsRankingApi = async (
-//   dimensionName?: string,
-//   dimId?: number | string
-// ) => {
-//   const { code, data } = await getPersonDimensionChartsRanking({
-//     ...seachParams.value,
-//     dimId,
-//     dimensionName,
-//     type: 0
-//   });
-//   if (code == 200) {
-//     if (data && data.length > 0) {
-//       // barEchartsRef?.value?.init(data);
-//     }
-//   }
-// };
 const barDimEchartsList = reactive({
   data: null,
   type: null
 });
-const init = (item: any, type: any) => {
+const init = (item: any, type: any, val: any) => {
   seachParams.value = item;
   barDimEchartsList.data = null;
   barDimEchartsList.type = null;
   if (Number(type)) {
     nextTick(() => {
-      radarRefList.value = { ...seachParams.value, type: 0 };
       barDimEchartsList.data = item;
       barDimEchartsList.type = 0;
-      getPersonDimensionChartsListApi();
-      // getPersonDimensionChartsRankingApi();
-      getPersonDimensionChartsListApiDimList();
+      if (val) {
+        getPersonDimensionChartsListApiDimList();
+      } else {
+        radarRefList.value = [];
+      }
       getChartsListApi();
       activeName.value = "1";
     });
@@ -169,12 +114,8 @@ const personListRef = ref();
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   loading.value = true;
   if (tab.props.label == "总览") {
-    getPersonDimensionChartsListApi();
-    // getPersonDimensionChartsRankingApi();
     getChartsListApi();
   } else {
-    getPersonDimensionChartsListApi(tab.props.label, tab.props.name, tab.index);
-    // getPersonDimensionChartsRankingApi(tab.props.label, tab.props.name);
     nextTick(() => {
       Object.assign(paramsIndex.value, {
         ...seachParams.value,
@@ -259,6 +200,7 @@ const loading = ref(false);
                   ref="personListRef"
                   class="w-11/12"
                   :paramsIndex="paramsIndex"
+                  :detailData="radarRefList"
                 />
                 <div
                   class="w-[30px] h-[30px] mr-10 cursor-pointer"