feat: 可视化

src/components/echarts/bar.vue

@@ -4,7 +4,7 @@ import { useDark, useECharts } from "@pureadmin/utils";
 import { reactive } from "vue";
 const props = defineProps({
   title: {
-    type: Object
+    type: String
   }
 });
 const dataProp = reactive({
@@ -20,121 +20,122 @@ let theme = computed(() => {
 // 初始化ECharts
 const chartRef = ref();
 const { setOptions } = useECharts(chartRef, { theme });
-
 // 根据配置项渲染ECharts
-// setOptions({
-//   title: {
-//     text: `${dataProp.data.title}Top10`
-//   },
-//   tooltip: {
-//     trigger: "axis",
-//     axisPointer: {
-//       type: "shadow"
-//     }
-//   },
-//   grid: {
-//     left: "3%",
-//     right: "4%",
-//     bottom: "3%",
-//     containLabel: true
-//   },
-//   xAxis: [
-//     {
-//       type: "category",
-//       data: [
-//         "张医生",
-//         "王医生",
-//         "李医生",
-//         "吴医生",
-//         "哈哈哈",
-//         "吼吼吼",
-//         "吴医生",
-//         "哈哈哈",
-//         "吼吼吼",
-//         "啊啊啊"
+// watch(
+//   () => props.title,
+//   newTitle => {
+//     dataProp.title = newTitle.title;
+//     setOptions({
+//       title: {
+//         text: `${dataProp.title}Top10`
+//       },
+//       tooltip: {
+//         trigger: "axis",
+//         axisPointer: {
+//           type: "shadow"
+//         }
+//       },
+//       grid: {
+//         left: "3%",
+//         right: "4%",
+//         bottom: "3%",
+//         containLabel: true
+//       },
+//       xAxis: [
+//         {
+//           type: "category",
+//           data: [
+//             "张医生",
+//             "王医生",
+//             "李医生",
+//             "吴医生",
+//             "哈哈哈",
+//             "吼吼吼",
+//             "吴医生",
+//             "哈哈哈",
+//             "吼吼吼",
+//             "啊啊啊"
+//           ],
+//           axisTick: {
+//             alignWithLabel: true
+//           }
+//         }
 //       ],
-//       axisTick: {
-//         alignWithLabel: true
-//       }
-//     }
-//   ],
-//   yAxis: [
-//     {
-//       type: "value"
-//     }
-//   ],
-//   series: [
-//     {
-//       name: "Direct",
-//       type: "bar",
-//       barWidth: "30%",
-//       data: [10, 52, 200, 334, 390, 330, 220, 52, 390, 330]
-//     }
-//   ]
-// });
-watch(
-  () => props.title,
-  newTitle => {
-    dataProp.title = newTitle.title;
-    setOptions({
-      title: {
-        text: `${dataProp.title}Top10`
-      },
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow"
-        }
-      },
-      grid: {
-        left: "3%",
-        right: "4%",
-        bottom: "3%",
-        containLabel: true
-      },
-      xAxis: [
-        {
-          type: "category",
-          data: [
-            "张医生",
-            "王医生",
-            "李医生",
-            "吴医生",
-            "哈哈哈",
-            "吼吼吼",
-            "吴医生",
-            "哈哈哈",
-            "吼吼吼",
-            "啊啊啊"
-          ],
-          axisTick: {
-            alignWithLabel: true
-          }
-        }
-      ],
-      yAxis: [
-        {
-          type: "value"
-        }
-      ],
-      series: [
-        {
-          name: "Direct",
-          type: "bar",
-          // barWidth: "30%",
-          barWidth: dataProp.title == "总得分" ? "30%" : "40%",
-          data: [10, 52, 200, 334, 390, 330, 220, 52, 390, 330]
-        }
-      ]
+//       yAxis: [
+//         {
+//           type: "value"
+//         }
+//       ],
+//       series: [
+//         {
+//           name: "Direct",
+//           type: "bar",
+//           // barWidth: "30%",
+//           barWidth: dataProp.title == "总得分" ? "30%" : "40%",
+//           data: [10, 52, 200, 334, 390, 330, 220, 52, 390, 330]
+//         }
+//       ]
+//     });
+//   },
+//   { immediate: true }
+// );
+const dataList = reactive({
+  title: [],
+  data: []
+});
+const init = item => {
+  if (item.length > 0) {
+    item.sort((a, b) => a.ranking - b.ranking);
+    item.map((it, id) => {
+      if (id < 10) {
+        dataList.title.push(it.assessmentObjectName);
+        dataList.data.push(it.totalScore);
+      }
     });
-  },
-  { immediate: true }
-);
-const dataList = item => {
-  console.log("item", item);
+  }
+  setOptions({
+    title: {
+      text: `${props.title}Top10`
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: dataList.title,
+        axisTick: {
+          alignWithLabel: true
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: "value"
+      }
+    ],
+    series: [
+      {
+        name: "Direct",
+        type: "bar",
+        // barWidth: "30%",
+        barWidth: props.title == "总得分" ? "30%" : "40%",
+        data: dataList.data
+      }
+    ]
+  });
 };
 defineExpose({
-  dataList
+  init
 });
 </script>
 

src/components/echarts/barDim.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import { useDark, useECharts } from "@pureadmin/utils";
+import { getPersonDimensionChartsRanking } from "@/api/draw";
+import { reactive } from "vue";
+const props = defineProps({
+  title: {
+    type: String
+  }
+});
+const dataProp = reactive({
+  title: "",
+  data: {}
+});
+onMounted(() => {});
+// 兼容dark主题
+const { isDark } = useDark();
+let theme = computed(() => {
+  return isDark.value ? "dark" : "default";
+});
+// 初始化ECharts
+const chartRef = ref();
+const { setOptions } = useECharts(chartRef, { theme });
+const dataList = reactive({
+  title: [],
+  data: []
+});
+const init = async (item, type?: number) => {
+  const { data, code } = await getPersonDimensionChartsRanking({
+    ...item,
+    type
+  });
+  let dataListInit;
+  if (code === 200) {
+    dataListInit = data.sort((a, b) => a.ranking - b.ranking);
+    dataListInit.map((it, id) => {
+      if (id < 10) {
+        dataList.title.push(it.assessmentObjectName);
+        dataList.data.push(it.totalScore);
+      }
+    });
+  }
+  setOptions({
+    title: {
+      text: `${props.title}Top10`
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: dataList.title,
+        axisTick: {
+          alignWithLabel: true
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: "value"
+      }
+    ],
+    series: [
+      {
+        name: "Direct",
+        type: "bar",
+        barWidth: props.title == "总得分" ? "30%" : "40%",
+        data: dataList.data
+      }
+    ]
+  });
+};
+
+defineExpose({
+  init
+});
+</script>
+
+<template>
+  <div ref="chartRef" class="w-full h-full" />
+</template>

src/components/echarts/big/fullBig.vue

@@ -2,49 +2,43 @@
 defineOptions({
   name: "full-big"
 });
-import { ref, reactive } from "vue";
-import { useRouter } from "vue-router";
-import barEcharts from "@/components/echarts/bar.vue";
+import { ref, reactive, onMounted } from "vue";
+import { getPersonDimensionChartsList } from "@/api/draw";
+import { useRouter, useRoute } from "vue-router";
+import barDimEcharts from "@/components/echarts/barDim.vue";
 import rankTable from "@/components/rankTable/index.vue";
 import personList from "@/components/personList/index.vue";
 import qvanping from "@/assets/rank/qvanping@2x.png";
 const router = useRouter();
+const route = useRoute();
+const params = ref({});
+const title = ref();
+onMounted(() => {
+  title.value = route.query.title;
+  Object.assign(params.value, route.query);
+  delete params.value.title;
+  barDimEchartsRef.value.init(params.value);
+  init();
+});
+
 // 柱状图
-const barEchartsRef = ref();
+const barDimEchartsRef = ref();
 // 维度表格
 const personListRef = ref();
-const barEchartsList = reactive({
-  zongfen: {
-    title: "总得分"
-  },
-  shuliang: {
-    title: "数量维度"
-  },
-  xiaolve: {
-    title: "效率维度"
-  },
-  zhiliang: {
-    title: "质量维度"
-  },
-  nandu: {
-    title: "难度维度"
-  },
-  qiandu: {
-    title: "强度维度"
-  },
-  jiaoxue: {
-    title: "教学维度"
-  },
-  keyan: {
-    title: "科研维度"
-  }
-});
 const fullSmall = () => {
   router.back();
 };
 const dataList = item => {
   console.log(item);
 };
+const init = async () => {
+  const { data, code } = await getPersonDimensionChartsList({
+    ...params.value
+  });
+  if (code == 200) {
+    personListRef.value.init(data);
+  }
+};
 defineExpose({
   dataList
 });
@@ -59,7 +53,7 @@ defineExpose({
       </div>
     </div>
     <div class="w-[1260px] h-[380px] mt-5">
-      <barEcharts ref="barEchartsRef" :title="barEchartsList.shuliang" />
+      <barDimEcharts ref="barDimEchartsRef" :title="title" />
     </div>
     <!-- :title="barEchartsList.shuliang" -->
   </div>

src/components/echarts/radar.vue

@@ -11,58 +11,59 @@ let theme = computed(() => {
 // 初始化ECharts
 const chartRef = ref();
 const { setOptions } = useECharts(chartRef, { theme });
-
+const rankName = ref([]);
+const rankValue = ref([]);
 // 根据配置项渲染ECharts
 const initChart = item => {
-  setOptions({
-    tooltip: {},
-    legend: {
-      // icon: "arrow",
-      itemWidth: 25,
-      itemHeight: 4,
-      data: ["得分率"],
-      top: 10,
-      left: "left"
-    },
-    radar: {
-      radius: "70%", // 调整半径以使雷达图更大
-      indicator: [
-        { name: "数量" },
-        { name: "科研" },
-        { name: "教学" },
-        { name: "强度" },
-        { name: "难度" },
-        { name: "质量" },
-        { name: "效率" }
-      ],
-      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: [30, 60, 90, 120, 150, 160, 10],
-            name: "支出"
-          }
-        ]
-      }
-    ]
-  });
+  if (item.length != 0) {
+    item.dimensionList.map(it => {
+      rankName.value.push({
+        name: it.dimName
+      });
+      rankValue.value.push(it.soreRate);
+    });
+    setOptions({
+      tooltip: {},
+      legend: {
+        // icon: "arrow",
+        itemWidth: 25,
+        itemHeight: 4,
+        data: ["得分率"],
+        top: 10,
+        left: "left"
+      },
+      radar: {
+        radius: "70%", // 调整半径以使雷达图更大
+        indicator: rankName.value,
+        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: "支出"
+            }
+          ]
+        }
+      ]
+    });
+  }
 };
 // initChart();
 defineExpose({ initChart });

src/components/personList/index.vue

@@ -3,31 +3,26 @@
     <el-table :data="tableData" style="width: 100%">
       <el-table-column prop="title" width="100">
         <template #default="scope">
-          <div class="text-black">{{ scope.row.title }}</div>
+          <div class="text-black">{{ scope.row.quotaName }}</div>
         </template>
       </el-table-column>
-      <el-table-column prop="date" label="完成值" />
-      <el-table-column prop="name" label="门槛值" />
-      <el-table-column prop="address" label="挑战值" />
-      <el-table-column prop="address" label="排名" />
-      <el-table-column prop="address" label="得分" />
+      <el-table-column prop="finalValue" label="完成值" />
+      <el-table-column prop="startValue" label="门槛值" />
+      <el-table-column prop="challengeValue" label="挑战值" />
+      <el-table-column prop="challengeValue" label="排名" />
+      <el-table-column prop="quotaScore" label="得分" />
     </el-table>
   </div>
 </template>
 
 <script lang="ts" setup>
-const tableData = [
-  {
-    title: "出院人次",
-    date: "2016-05-03",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles"
-  },
-  {
-    title: "手术人次",
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles"
-  }
-];
+import { ref } from "vue";
+const tableData = ref([]);
+const init = async data => {
+  // const {data,code}
+  tableData.value = data.dimensionList[0].quotaList;
+};
+defineExpose({
+  init
+});
 </script>

src/components/rankTable/draw.vue

@@ -3,104 +3,54 @@
     <el-table-column type="index" label="排名" width="80" fixed>
       <template #default="scope">
         <div v-if="scope.$index > 2" class="diamond">
-          {{ scope.$index + 1 }}
+          {{ scope.row.ranking }}
         </div>
         <div v-else class="text-center">
-          <img :src="RANK_IMG[scope.$index]" alt="" />
+          <img :src="RANK_IMG[scope.row.ranking - 1]" alt="" />
         </div>
       </template>
     </el-table-column>
-    <el-table-column prop="date" label="科室" fixed width="150" />
-    <el-table-column prop="date" label="姓名" fixed width="100" />
-    <el-table-column label="数量(5%)">
-      <el-table-column prop="state" label="出院人次(5%)" width="140" sortable />
-      <el-table-column prop="city" label="手术人次(15%)" width="140" />
-    </el-table-column>
+    <el-table-column prop="deptName" :label="deptName" fixed width="150" />
     <el-table-column
-      prop="date"
-      label="总分"
+      v-if="name"
+      prop="assessmentObjectName"
+      :label="name"
+      fixed
       width="100"
-      sortable
-      :header-cell-style="{ backgroundColor: '#CCEEE2' }"
     />
-    <el-table-column label="效率(5%)">
-      <el-table-column prop="state" label="平均住院日(5%)" width="150" />
-      <el-table-column prop="city" label="药品耗材比(5%)" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="质量(5%)">
-      <el-table-column prop="state" label="手术并发症发生率" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="难度(5%)">
-      <el-table-column prop="state" label="微创手术人次(5%)" width="150" />
-      <el-table-column prop="state" label="CMT值(5%)" width="100" />
-      <el-table-column prop="state" label="RW>2占比(5%)" width="130" />
-      <el-table-column prop="state" label="主刀四类手术(5%)" width="150" />
-      <el-table-column prop="state" label="主刀微创手术(5%)" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="强度(5%)">
-      <el-table-column prop="state" label="夜班数(10%)" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="教学(5%)">
-      <el-table-column
-        prop="state"
-        label="手术一助指导下医生(5%)"
-        width="200"
-      />
-      <el-table-column prop="date" label="教学积分(5%)" width="100" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="科研(5%)">
-      <el-table-column prop="state" label="科研积分(10%)" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column prop="date" label="总得分" width="100" />
+    <div v-for="(item, index) in tableData.dimensionList" :key="index">
+      <el-table-column :label="`${item.dimName}(${item.soreRate}%)`">
+        <el-table-column
+          v-for="(it, id) in item.quotaList"
+          :key="id"
+          :prop="it.quotaScore"
+          :label="`${it.quotaName}(${it.quotaWeight}%)`"
+          width="140"
+        />
+      </el-table-column>
+      <el-table-column :prop="item.totalSore" label="总分`" />
+    </div>
+    <el-table-column prop="allScore" label="总得分" fixed width="150" />
   </el-table>
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive } from "vue";
+import { computed, reactive, ref } from "vue";
 import rank1 from "@/assets/rank/rank1.png";
 import rank2 from "@/assets/rank/rank2.png";
 import rank3 from "@/assets/rank/rank3.png";
 const RANK_IMG = [rank1, rank2, rank3];
-const tableData = reactive([
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036"
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036"
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036"
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036"
-  }
-]);
+const tableData = ref([]);
+const deptName = ref("");
+const name = ref("");
+const init = (item, deptName, name) => {
+  tableData.value = item;
+  deptName.value = deptName;
+  name.value = name;
+};
+defineExpose({
+  init
+});
 </script>
 
 <style lang="scss" scoped>

src/components/rankTable/index.vue

@@ -27,97 +27,39 @@
         </div>
       </template>
     </el-table-column>
-    <el-table-column prop="date" label="科室" fixed width="150" />
-    <el-table-column prop="date" label="姓名" fixed width="100" />
-    <el-table-column label="数量(5%)">
-      <el-table-column prop="state" label="出院人次(5%)" width="140" sortable />
-      <el-table-column prop="city" label="手术人次(15%)" width="140" />
-    </el-table-column>
+    <el-table-column prop="deptName" :label="deptName" fixed width="150" />
     <el-table-column
-      prop="date"
-      label="总分"
+      v-if="name"
+      prop="assessmentObjectName"
+      :label="name"
+      fixed
       width="100"
-      sortable
-      :header-cell-style="{ backgroundColor: '#CCEEE2' }"
     />
-    <el-table-column label="效率(5%)">
-      <el-table-column prop="state" label="平均住院日(5%)" width="150" />
-      <el-table-column prop="city" label="药品耗材比(5%)" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="质量(5%)">
-      <el-table-column prop="state" label="手术并发症发生率" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="难度(5%)">
-      <el-table-column prop="state" label="微创手术人次(5%)" width="150" />
-      <el-table-column prop="state" label="CMT值(5%)" width="100" />
-      <el-table-column prop="state" label="RW>2占比(5%)" width="130" />
-      <el-table-column prop="state" label="主刀四类手术(5%)" width="150" />
-      <el-table-column prop="state" label="主刀微创手术(5%)" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="强度(5%)">
-      <el-table-column prop="state" label="夜班数(10%)" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="教学(5%)">
-      <el-table-column
-        prop="state"
-        label="手术一助指导下医生(5%)"
-        width="200"
-      />
-      <el-table-column prop="date" label="教学积分(5%)" width="100" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column label="科研(5%)">
-      <el-table-column prop="state" label="科研积分(10%)" width="150" />
-    </el-table-column>
-    <el-table-column prop="date" label="总分" width="100" />
-    <el-table-column prop="date" label="总得分" width="100" />
+    <div v-for="(item, index) in tableData.dimensionList" :key="index">
+      <el-table-column :label="`${item.dimName}(${item.soreRate}%)`">
+        <el-table-column
+          v-for="(it, id) in item.quotaList"
+          :key="id"
+          :prop="it.quotaScore"
+          :label="`${it.quotaName}(${it.soreRate}%)`"
+          width="140"
+        />
+      </el-table-column>
+      <el-table-column :prop="item.totalSore" label="总分`" />
+    </div>
+    <el-table-column prop="allScore" label="总得分" fixed width="150" />
   </el-table>
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive } from "vue";
+import { computed, reactive, ref } from "vue";
 import rank1 from "@/assets/rank/rank1.png";
 import rank2 from "@/assets/rank/rank2.png";
 import rank3 from "@/assets/rank/rank3.png";
 const RANK_IMG = [rank1, rank2, rank3];
-const tableData = reactive([
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036"
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036"
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036"
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036"
-  }
-]);
+const deptName = ref("");
+const name = ref("");
+const tableData = ref();
 const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
   // console.log("row", row);
   // console.log("column", column);
@@ -126,17 +68,12 @@ const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
   // return "background:	#F5F5F5; color:#000000;";
   return "aaaa";
 };
-const averageData = () => {
-  tableData.unshift({
-    date: "",
-    name: "",
-    state: "",
-    city: "",
-    address: "",
-    zip: ""
+const averageData = averageSore => {
+  tableData.value.unshift({
+    allScore: averageSore
   });
 };
-averageData();
+
 const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
   // 合并第一行的“排名”、“科室”和“姓名”
   if (rowIndex === 0) {
@@ -150,6 +87,15 @@ const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
   }
   return [1, 1]; // 其他单元格正常显示
 };
+const init = (item, deptName, name) => {
+  tableData.value = item;
+  averageData(item.averageSore);
+  deptName.value = deptName;
+  name.value = name;
+};
+defineExpose({
+  init
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -4,7 +4,8 @@ import { getTemplateInfoList } from "@/api/templateInfo";
 import { userPageWhitOrganization } from "@/api/userSetting";
 import { getAssessmentPageList } from "@/api/manage";
 import { postListTree } from "@/api/department";
-const value = ref("");
+const $emit = defineEmits(["handClick"]);
+
 const dataList = reactive({
   teplist: [],
   personList: [],
@@ -60,28 +61,43 @@ const postListTreeApi = async () => {
   console.log("await", data);
 };
 postListTreeApi();
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
+// ----------------------------
+const init = reactive({
+  assessmentName: "",
+  assessmentModelName: "",
+  deptName: "",
+  assessmentObjectName: "",
+  dimensionName: ""
+});
+const handClickInit1 = value => {
+  if (value) {
+    const selectedItem = dataList.magList.find(item => item.id === value);
+    init.assessmentName = selectedItem.name;
+  }
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
+const handClickInit2 = value => {
+  if (value) {
+    const selectedItem = dataList.teplist.find(item => item.id === value);
+    init.assessmentModelName = selectedItem.tpName;
   }
-];
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
+const handClickInit3 = value => {
+  if (value) {
+    init.deptName = value.deptName;
+  }
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
 </script>
 
 <template>
@@ -96,6 +112,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
+            @change="handClickInit1"
           >
             <el-option
               v-for="item in dataList.magList"
@@ -113,6 +130,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
+            @change="handClickInit2"
           >
             <el-option
               v-for="item in dataList.teplist"
@@ -136,6 +154,7 @@ const options = [
               children: 'childrenRes'
             }"
             style="width: 200px"
+            @change="handClickInit3"
           />
         </div>
       </div>

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

@@ -1,282 +1,163 @@
 <script setup lang="ts">
 defineOptions({
-  name: "workerDrak"
+  name: "departmentDrank"
 });
 import { ref, reactive } 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/index.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,
   getAssessmentList,
   getChartsList
 } from "@/api/draw";
 import type { TabsPaneContext } from "element-plus";
 const router = useRouter();
-const value = ref("");
 const activeName = ref("1");
 // 柱状图
 const barEchartsRef = ref();
-const params = reactive({
-  params: {
-    chartsQueryVo: {
-      assessmentName: "",
-      assessmentId: "",
-      assessmentModelName: "",
-      assessmentModelId: "",
-      assessmentObjectId: "",
-      assessmentObjectName: "",
-      dimId: "",
-      dimensionName: ""
+const radarRef = ref();
+const rankTableRef = ref();
+const barDimEchartsRef = ref();
+const dataList = reactive({
+  dimName: []
+});
+const seachParams = ref();
+const getPersonDimensionChartsListApi = async (
+  dimensionName?: string,
+  dimId?: number | string
+) => {
+  const { code, data } = await getPersonDimensionChartsList({
+    ...seachParams.value,
+    dimId,
+    dimensionName,
+    type: 1
+  });
+
+  if (code == 200) {
+    if (data.length > 0) {
+      data.dimensionList.map(item => {
+        dataList.dimName.push({
+          name: item.dimName,
+          id: item.dimId
+        });
+      });
+      if (dimensionName && dimId) {
+        personListRef.value.init(data);
+      } else {
+        radarRef.value.initChart(data);
+        rankTableRef.value.init(data, "科室");
+      }
     }
   }
-});
-const getPersonDimensionChartsListApi = async () => {
-  const { code, data } = await getPersonDimensionChartsList(params.params);
-  // barEchartsRef.value.setOption(data);
-  // console.log("data", data);
+
+  // 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.length > 0) {
+      barEchartsRef.value.init(data);
+    }
+  }
+};
+const init = item => {
+  seachParams.value = item;
+  getPersonDimensionChartsListApi();
+  getPersonDimensionChartsRankingApi();
+  barDimEchartsRef.value.init(seachParams.value, 1);
 };
 // 维度表格
 const personListRef = ref();
-const barEchartsList = reactive({
-  zongfen: {
-    title: "总得分"
-  },
-  shuliang: {
-    title: "数量维度"
-  },
-  xiaolve: {
-    title: "效率维度"
-  },
-  zhiliang: {
-    title: "质量维度"
-  },
-  nandu: {
-    title: "难度维度"
-  },
-  qiandu: {
-    title: "强度维度"
-  },
-  jiaoxue: {
-    title: "教学维度"
-  },
-  keyan: {
-    title: "科研维度"
-  }
-});
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
-  }
-];
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  // console.log(tab, event);
-  barEchartsRef.value.dataList(tab.props);
+  console.log(tab, event);
+  if (tab.props.label == "总览") {
+    getPersonDimensionChartsListApi();
+    getPersonDimensionChartsRankingApi();
+  } else {
+    getPersonDimensionChartsListApi(tab.props.label, tab.props.name);
+    getPersonDimensionChartsRankingApi(tab.props.label, tab.props.name);
+  }
+  barEchartsRef.value.init(tab.props);
 };
 const fullBig = (item: any) => {
-  console.log(item);
-  router.push({ path: "/fullBig", query: { ...item } });
+  router.push({
+    path: "/fullBig",
+    query: { title: item, ...seachParams.value, type: 1 }
+  });
 };
 </script>
 
 <template>
   <div class="w-[100%]">
     <div class="w-[100%]">
-      <seachData />
-      <div class="flex mr-2">
-        <radar />
-      </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 />
-          </div>
-          <!-- 总得分 -->
-          <div class="mt-5 pr-8 w-full h-60">
-            <barEcharts ref="barEchartsRef" :title="barEchartsList.zongfen" />
-          </div>
-          <!-- 维度得分 -->
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts :title="barEchartsList.shuliang" />
-            </div>
-            <div class="w-1/2 h-full">
-              <barEcharts :title="barEchartsList.xiaolve" />
-            </div>
-          </div>
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts
-                ref="barEchartsRef"
-                :title="barEchartsList.zhiliang"
-              />
-            </div>
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.nandu" />
-            </div>
-          </div>
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.qiandu" />
-            </div>
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.jiaoxue" />
-            </div>
-          </div>
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.keyan" />
-            </div>
-            <div class="w-1/2 h-full">
-              <!-- <barEcharts :title="barEchartsList.kexue" /> -->
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="数量" name="2" :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(barEchartsList.shuliang)"
-              >
-                <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="barEchartsList.shuliang"
-              />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="效率" name="3" :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(barEchartsList.xiaolve)"
-              >
-                <img class="w-full h-full" :src="qvanping" alt="" />
+      <seachData @handClick="init" />
+      <div v-if="dataList.dimName.length > 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>
-            <div class="w-full h-60 mt-5 pr-8">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.xiaolve" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="质量" name="4" :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(barEchartsList.zhiliang)"
-              >
-                <img class="w-full h-full" :src="qvanping" alt="" />
+          </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>
-            <div class="w-full h-60 mt-5 pr-8">
-              <barEcharts
-                ref="barEchartsRef"
-                :title="barEchartsList.zhiliang"
-              />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="难度" name="5" :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(barEchartsList.nandu)"
-              >
-                <img class="w-full h-full" :src="qvanping" alt="" />
+              <div class="w-full h-60 mt-5 pr-8">
+                <barEcharts ref="barEchartsRef" :title="item.name" />
               </div>
             </div>
-            <div class="w-full h-60 mt-5 pr-8">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.nandu" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="强度" name="6" :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(barEchartsList.qiandu)"
-              >
-                <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="barEchartsList.qiandu" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="教学" name="7" :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(barEchartsList.jiaoxue)"
-              >
-                <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="barEchartsList.jiaoxue" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="科研" name="8" :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(barEchartsList.keyan)"
-              >
-                <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="barEchartsList.keyan" />
-            </div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
     </div>
   </div>
 </template>

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

@@ -1,41 +1,39 @@
 <script setup lang="ts">
 defineOptions({
-  name: "workerRank"
+  name: "departmentRank"
 });
-import rankTableDraw from "@/components/rankTable/draw.vue";
+import rankTableDraw from "@/components/rankTable/index.vue";
 import seachData from "./componements/seach.vue";
+import { getPersonDimensionChartsList } from "@/api/draw";
 
 import { ref } from "vue";
-const value = ref("");
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
+const rankTableRef = ref();
+const seachParams = ref();
+const lengthData = ref();
+const getPersonDimensionChartsListApi = async () => {
+  const { code, data } = await getPersonDimensionChartsList({
+    ...seachParams.value,
+    type: 1
+  });
+
+  if (code == 200) {
+    if (data.length > 0) {
+      lengthData.value = data.length;
+      rankTableRef.value.init(data, "科室", "姓名");
+    }
   }
-];
+};
+const init = item => {
+  seachParams.value = item;
+  getPersonDimensionChartsListApi();
+};
 </script>
 
 <template>
   <div class="w-full">
     <div class="mb-2 flex gap-2 justify-between flex-wrap">
-      <seachData />
+      <seachData @handClick="init" />
     </div>
-    <rankTableDraw />
+    <rankTableDraw v-if="lengthData > 0" ref="rankTableRef" />
   </div>
 </template>

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

@@ -4,7 +4,8 @@ import { getTemplateInfoList } from "@/api/templateInfo";
 import { userPageWhitOrganization } from "@/api/userSetting";
 import { getAssessmentPageList } from "@/api/manage";
 import { postListTree } from "@/api/department";
-const value = ref("");
+const $emit = defineEmits(["handClick"]);
+
 const dataList = reactive({
   teplist: [],
   personList: [],
@@ -60,28 +61,43 @@ const postListTreeApi = async () => {
   console.log("await", data);
 };
 postListTreeApi();
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
+// ----------------------------
+const init = reactive({
+  assessmentName: "",
+  assessmentModelName: "",
+  deptName: "",
+  assessmentObjectName: "",
+  dimensionName: ""
+});
+const handClickInit1 = value => {
+  if (value) {
+    const selectedItem = dataList.magList.find(item => item.id === value);
+    init.assessmentName = selectedItem.name;
+  }
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
+const handClickInit2 = value => {
+  if (value) {
+    const selectedItem = dataList.teplist.find(item => item.id === value);
+    init.assessmentModelName = selectedItem.tpName;
   }
-];
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
+const handClickInit3 = value => {
+  if (value) {
+    init.deptName = value.deptName;
+  }
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
 </script>
 
 <template>
@@ -96,6 +112,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
+            @change="handClickInit1"
           >
             <el-option
               v-for="item in dataList.magList"
@@ -113,6 +130,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
+            @change="handClickInit2"
           >
             <el-option
               v-for="item in dataList.teplist"
@@ -136,6 +154,7 @@ const options = [
               children: 'childrenRes'
             }"
             style="width: 200px"
+            @change="handClickInit3"
           />
         </div>
       </div>

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

@@ -1,282 +1,163 @@
 <script setup lang="ts">
 defineOptions({
-  name: "workerDrak"
+  name: "healthDrank"
 });
 import { ref, reactive } 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/index.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,
   getAssessmentList,
   getChartsList
 } from "@/api/draw";
 import type { TabsPaneContext } from "element-plus";
 const router = useRouter();
-const value = ref("");
 const activeName = ref("1");
 // 柱状图
 const barEchartsRef = ref();
-const params = reactive({
-  params: {
-    chartsQueryVo: {
-      assessmentName: "",
-      assessmentId: "",
-      assessmentModelName: "",
-      assessmentModelId: "",
-      assessmentObjectId: "",
-      assessmentObjectName: "",
-      dimId: "",
-      dimensionName: ""
+const radarRef = ref();
+const rankTableRef = ref();
+const barDimEchartsRef = ref();
+const dataList = reactive({
+  dimName: []
+});
+const seachParams = ref();
+const getPersonDimensionChartsListApi = async (
+  dimensionName?: string,
+  dimId?: number | string
+) => {
+  const { code, data } = await getPersonDimensionChartsList({
+    ...seachParams.value,
+    dimId,
+    dimensionName,
+    type: 3
+  });
+
+  if (code == 200) {
+    if (data.length > 0) {
+      data.dimensionList.map(item => {
+        dataList.dimName.push({
+          name: item.dimName,
+          id: item.dimId
+        });
+      });
+      if (dimensionName && dimId) {
+        personListRef.value.init(data);
+      } else {
+        radarRef.value.initChart(data);
+        rankTableRef.value.init(data, "科室");
+      }
     }
   }
-});
-const getPersonDimensionChartsListApi = async () => {
-  const { code, data } = await getPersonDimensionChartsList(params.params);
-  // barEchartsRef.value.setOption(data);
-  // console.log("data", data);
+
+  // console.log(res);
+};
+const getPersonDimensionChartsRankingApi = async (
+  dimensionName?: string,
+  dimId?: number | string
+) => {
+  const { code, data } = await getPersonDimensionChartsRanking({
+    ...seachParams.value,
+    dimId,
+    dimensionName,
+    type: 3
+  });
+  if (code == 200) {
+    if (data.length > 0) {
+      barEchartsRef.value.init(data);
+    }
+  }
+};
+const init = item => {
+  seachParams.value = item;
+  getPersonDimensionChartsListApi();
+  getPersonDimensionChartsRankingApi();
+  barDimEchartsRef.value.init(seachParams.value, 0);
 };
 // 维度表格
 const personListRef = ref();
-const barEchartsList = reactive({
-  zongfen: {
-    title: "总得分"
-  },
-  shuliang: {
-    title: "数量维度"
-  },
-  xiaolve: {
-    title: "效率维度"
-  },
-  zhiliang: {
-    title: "质量维度"
-  },
-  nandu: {
-    title: "难度维度"
-  },
-  qiandu: {
-    title: "强度维度"
-  },
-  jiaoxue: {
-    title: "教学维度"
-  },
-  keyan: {
-    title: "科研维度"
-  }
-});
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
-  }
-];
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  // console.log(tab, event);
-  barEchartsRef.value.dataList(tab.props);
+  console.log(tab, event);
+  if (tab.props.label == "总览") {
+    getPersonDimensionChartsListApi();
+    getPersonDimensionChartsRankingApi();
+  } else {
+    getPersonDimensionChartsListApi(tab.props.label, tab.props.name);
+    getPersonDimensionChartsRankingApi(tab.props.label, tab.props.name);
+  }
+  barEchartsRef.value.init(tab.props);
 };
 const fullBig = (item: any) => {
-  console.log(item);
-  router.push({ path: "/fullBig", query: { ...item } });
+  router.push({
+    path: "/fullBig",
+    query: { title: item, ...seachParams.value, type: 3 }
+  });
 };
 </script>
 
 <template>
   <div class="w-[100%]">
     <div class="w-[100%]">
-      <seachData />
-      <div class="flex mr-2">
-        <radar />
-      </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 />
-          </div>
-          <!-- 总得分 -->
-          <div class="mt-5 pr-8 w-full h-60">
-            <barEcharts ref="barEchartsRef" :title="barEchartsList.zongfen" />
-          </div>
-          <!-- 维度得分 -->
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts :title="barEchartsList.shuliang" />
-            </div>
-            <div class="w-1/2 h-full">
-              <barEcharts :title="barEchartsList.xiaolve" />
-            </div>
-          </div>
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts
-                ref="barEchartsRef"
-                :title="barEchartsList.zhiliang"
-              />
-            </div>
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.nandu" />
-            </div>
-          </div>
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.qiandu" />
-            </div>
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.jiaoxue" />
-            </div>
-          </div>
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.keyan" />
-            </div>
-            <div class="w-1/2 h-full">
-              <!-- <barEcharts :title="barEchartsList.kexue" /> -->
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="数量" name="2" :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(barEchartsList.shuliang)"
-              >
-                <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="barEchartsList.shuliang"
-              />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="效率" name="3" :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(barEchartsList.xiaolve)"
-              >
-                <img class="w-full h-full" :src="qvanping" alt="" />
+      <seachData @handClick="init" />
+      <div v-if="dataList.dimName.length > 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>
-            <div class="w-full h-60 mt-5 pr-8">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.xiaolve" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="质量" name="4" :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(barEchartsList.zhiliang)"
-              >
-                <img class="w-full h-full" :src="qvanping" alt="" />
+          </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>
-            <div class="w-full h-60 mt-5 pr-8">
-              <barEcharts
-                ref="barEchartsRef"
-                :title="barEchartsList.zhiliang"
-              />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="难度" name="5" :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(barEchartsList.nandu)"
-              >
-                <img class="w-full h-full" :src="qvanping" alt="" />
+              <div class="w-full h-60 mt-5 pr-8">
+                <barEcharts ref="barEchartsRef" :title="item.name" />
               </div>
             </div>
-            <div class="w-full h-60 mt-5 pr-8">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.nandu" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="强度" name="6" :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(barEchartsList.qiandu)"
-              >
-                <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="barEchartsList.qiandu" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="教学" name="7" :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(barEchartsList.jiaoxue)"
-              >
-                <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="barEchartsList.jiaoxue" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="科研" name="8" :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(barEchartsList.keyan)"
-              >
-                <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="barEchartsList.keyan" />
-            </div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
     </div>
   </div>
 </template>

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

@@ -1,41 +1,39 @@
 <script setup lang="ts">
 defineOptions({
-  name: "workerRank"
+  name: "healthRank"
 });
 import rankTableDraw from "@/components/rankTable/draw.vue";
 import seachData from "./componements/seach.vue";
+import { getPersonDimensionChartsList } from "@/api/draw";
 
 import { ref } from "vue";
-const value = ref("");
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
+const rankTableRef = ref();
+const seachParams = ref();
+const lengthData = ref();
+const getPersonDimensionChartsListApi = async () => {
+  const { code, data } = await getPersonDimensionChartsList({
+    ...seachParams.value,
+    type: 3
+  });
+
+  if (code == 200) {
+    if (data.length > 0) {
+      lengthData.value = data.length;
+      rankTableRef.value.init(data, "科室", "姓名");
+    }
   }
-];
+};
+const init = item => {
+  seachParams.value = item;
+  getPersonDimensionChartsListApi();
+};
 </script>
 
 <template>
   <div class="w-full">
     <div class="mb-2 flex gap-2 justify-between flex-wrap">
-      <seachData />
+      <seachData @handClick="init" />
     </div>
-    <rankTableDraw />
+    <rankTableDraw v-if="lengthData > 0" ref="rankTableRef" />
   </div>
 </template>

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

@@ -5,7 +5,8 @@ import { userPageWhitOrganization } from "@/api/userSetting";
 import { getAssessmentPageList } from "@/api/manage";
 import { postListTree } from "@/api/department";
 import { postPageGroup } from "@/api/userGroup";
-const value = ref("");
+const $emit = defineEmits(["handClick"]);
+
 const dataList = reactive({
   teplist: [],
   userList: [],
@@ -52,28 +53,46 @@ const postPageGroupApi = async () => {
   }
 };
 postPageGroupApi();
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
+// -----------------------
+const init = reactive({
+  assessmentName: "",
+  assessmentModelName: "",
+  deptName: "",
+  assessmentObjectName: "",
+  dimensionName: ""
+});
+const handClickInit1 = value => {
+  if (value) {
+    const selectedItem = dataList.magList.find(item => item.id === value);
+    init.assessmentName = selectedItem.name;
+  }
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
+const handClickInit2 = value => {
+  if (value) {
+    const selectedItem = dataList.teplist.find(item => item.id === value);
+    init.assessmentModelName = selectedItem.tpName;
   }
-];
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
+const handClickInit3 = value => {
+  if (value) {
+    const selectedItem = dataList.magList.find(
+      item => item.groupCode === value
+    );
+    init.assessmentName = selectedItem.groupName;
+  }
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
 </script>
 
 <template>
@@ -88,6 +107,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
+            @change="handClickInit1"
           >
             <el-option
               v-for="item in dataList.magList"
@@ -105,6 +125,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
+            @change="handClickInit2"
           >
             <el-option
               v-for="item in dataList.teplist"
@@ -122,6 +143,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
+            @change="handClickInit3"
           >
             <el-option
               v-for="item in dataList.userList"

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

@@ -1,282 +1,163 @@
 <script setup lang="ts">
 defineOptions({
-  name: "workerDrak"
+  name: "headDrank"
 });
 import { ref, reactive } 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/index.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,
-  getAssessmentList,
-  getChartsList
+  getPersonDimensionChartsRanking
 } 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 params = reactive({
-  params: {
-    chartsQueryVo: {
-      assessmentName: "",
-      assessmentId: "",
-      assessmentModelName: "",
-      assessmentModelId: "",
-      assessmentObjectId: "",
-      assessmentObjectName: "",
-      dimId: "",
-      dimensionName: ""
+const barDimEchartsRef = ref();
+const seachParams = ref();
+// 雷达图
+const dataList = reactive({
+  dimName: []
+});
+const getPersonDimensionChartsListApi = async (
+  dimensionName?: string,
+  dimId?: number | string
+) => {
+  const { code, data } = await getPersonDimensionChartsList({
+    ...seachParams.value,
+    dimId,
+    dimensionName,
+    type: 2
+  });
+
+  if (code == 200) {
+    if (data.length > 0) {
+      data.dimensionList.map(item => {
+        dataList.dimName.push({
+          name: item.dimName,
+          id: item.dimId
+        });
+      });
+      if (dimensionName && dimId) {
+        personListRef.value.init(data);
+      } else {
+        radarRef.value.initChart(data);
+        rankTableRef.value.init(data, "医疗组");
+      }
     }
   }
-});
-const getPersonDimensionChartsListApi = async () => {
-  const { code, data } = await getPersonDimensionChartsList(params.params);
-  // barEchartsRef.value.setOption(data);
-  // console.log("data", 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 => {
+  seachParams.value = item;
+  getPersonDimensionChartsListApi();
+  getPersonDimensionChartsRankingApi();
+  barDimEchartsRef.value.init(seachParams.value, 0);
 };
 // 维度表格
 const personListRef = ref();
-const barEchartsList = reactive({
-  zongfen: {
-    title: "总得分"
-  },
-  shuliang: {
-    title: "数量维度"
-  },
-  xiaolve: {
-    title: "效率维度"
-  },
-  zhiliang: {
-    title: "质量维度"
-  },
-  nandu: {
-    title: "难度维度"
-  },
-  qiandu: {
-    title: "强度维度"
-  },
-  jiaoxue: {
-    title: "教学维度"
-  },
-  keyan: {
-    title: "科研维度"
-  }
-});
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
-  }
-];
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  // console.log(tab, event);
-  barEchartsRef.value.dataList(tab.props);
+  console.log(tab, event);
+  if (tab.props.label == "总览") {
+    getPersonDimensionChartsListApi();
+    getPersonDimensionChartsRankingApi();
+  } else {
+    getPersonDimensionChartsListApi(tab.props.label, tab.props.name);
+    getPersonDimensionChartsRankingApi(tab.props.label, tab.props.name);
+  }
+  barEchartsRef.value.init(tab.props);
 };
 const fullBig = (item: any) => {
-  console.log(item);
-  router.push({ path: "/fullBig", query: { ...item } });
+  router.push({
+    path: "/fullBig",
+    query: { title: item, ...seachParams.value, type: 2 }
+  });
 };
 </script>
 
 <template>
   <div class="w-[100%]">
     <div class="w-[100%]">
-      <seachData />
-      <div class="flex mr-2">
-        <radar />
-      </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 />
-          </div>
-          <!-- 总得分 -->
-          <div class="mt-5 pr-8 w-full h-60">
-            <barEcharts ref="barEchartsRef" :title="barEchartsList.zongfen" />
-          </div>
-          <!-- 维度得分 -->
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts :title="barEchartsList.shuliang" />
-            </div>
-            <div class="w-1/2 h-full">
-              <barEcharts :title="barEchartsList.xiaolve" />
-            </div>
-          </div>
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts
-                ref="barEchartsRef"
-                :title="barEchartsList.zhiliang"
-              />
-            </div>
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.nandu" />
-            </div>
-          </div>
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.qiandu" />
-            </div>
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.jiaoxue" />
-            </div>
-          </div>
-          <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-            <div class="w-1/2 h-full">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.keyan" />
-            </div>
-            <div class="w-1/2 h-full">
-              <!-- <barEcharts :title="barEchartsList.kexue" /> -->
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="数量" name="2" :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(barEchartsList.shuliang)"
-              >
-                <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="barEchartsList.shuliang"
-              />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="效率" name="3" :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(barEchartsList.xiaolve)"
-              >
-                <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="barEchartsList.xiaolve" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="质量" name="4" :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(barEchartsList.zhiliang)"
-              >
-                <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="barEchartsList.zhiliang"
-              />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="难度" name="5" :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(barEchartsList.nandu)"
-              >
-                <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="barEchartsList.nandu" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="强度" name="6" :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(barEchartsList.qiandu)"
-              >
-                <img class="w-full h-full" :src="qvanping" alt="" />
+      <seachData @handClick="init" />
+      <div v-if="dataList.dimName.length > 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>
-            <div class="w-full h-60 mt-5 pr-8">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.qiandu" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="教学" name="7" :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(barEchartsList.jiaoxue)"
-              >
-                <img class="w-full h-full" :src="qvanping" alt="" />
+          </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>
-            <div class="w-full h-60 mt-5 pr-8">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.jiaoxue" />
-            </div>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="科研" name="8" :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(barEchartsList.keyan)"
-              >
-                <img class="w-full h-full" :src="qvanping" alt="" />
+              <div class="w-full h-60 mt-5 pr-8">
+                <barEcharts ref="barEchartsRef" :title="item.name" />
               </div>
             </div>
-            <div class="w-full h-60 mt-5 pr-8">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.keyan" />
-            </div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
     </div>
   </div>
 </template>

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

@@ -1,41 +1,39 @@
 <script setup lang="ts">
 defineOptions({
-  name: "workerRank"
+  name: "headRank"
 });
 import rankTableDraw from "@/components/rankTable/draw.vue";
 import seachData from "./componements/seach.vue";
+import { getPersonDimensionChartsList } from "@/api/draw";
 
 import { ref } from "vue";
-const value = ref("");
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
+const rankTableRef = ref();
+const seachParams = ref();
+const lengthData = ref();
+const getPersonDimensionChartsListApi = async () => {
+  const { code, data } = await getPersonDimensionChartsList({
+    ...seachParams.value,
+    type: 2
+  });
+
+  if (code == 200) {
+    if (data.length > 0) {
+      lengthData.value = data.length;
+      rankTableRef.value.init(data, "科室", "姓名");
+    }
   }
-];
+};
+const init = item => {
+  seachParams.value = item;
+  getPersonDimensionChartsListApi();
+};
 </script>
 
 <template>
   <div class="w-full">
     <div class="mb-2 flex gap-2 justify-between flex-wrap">
-      <seachData />
+      <seachData @handClick="init" />
     </div>
-    <rankTableDraw />
+    <rankTableDraw v-if="lengthData > 0" ref="rankTableRef" />
   </div>
 </template>

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

@@ -18,11 +18,7 @@ const dataList = reactive({
     assessmentObjectId: ""
   }
 });
-const handClickInit = value => {
-  const selectedItem = dataList.magList.find(item => item.id === value);
-  console.log("selectedItem", selectedItem);
-  $emit("handClick", dataList.params);
-};
+
 // 搜索框----------------------------------------------------
 // 考核模板
 const getTemplateInfoListApi = async () => {
@@ -67,28 +63,56 @@ const postListTreeApi = async () => {
   console.log("await", data);
 };
 postListTreeApi();
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
+// -----------------------------------
+const init = reactive({
+  assessmentName: "",
+  assessmentModelName: "",
+  deptName: "",
+  assessmentObjectName: "",
+  dimensionName: ""
+});
+const handClickInit1 = value => {
+  if (value) {
+    const selectedItem = dataList.magList.find(item => item.id === value);
+    init.assessmentName = selectedItem.name;
+  }
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
+const handClickInit2 = value => {
+  if (value) {
+    const selectedItem = dataList.teplist.find(item => item.id === value);
+    init.assessmentModelName = selectedItem.tpName;
+  }
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
+const handClickInit3 = value => {
+  if (value) {
+    init.deptName = value.deptName;
   }
-];
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
+const handClickInit4 = value => {
+  if (value) {
+    const selectedItem = dataList.personList.find(
+      item => item.userCode === value
+    );
+    console.log("selectedItem", selectedItem);
+    init.assessmentObjectName = selectedItem.realName;
+  }
+  $emit("handClick", {
+    ...dataList.params,
+    ...init
+  });
+};
 </script>
 
 <template>
@@ -103,7 +127,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
-            @change="handClickInit"
+            @change="handClickInit1"
           >
             <el-option
               v-for="item in dataList.magList"
@@ -121,7 +145,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
-            @change="handClickInit"
+            @change="handClickInit2"
           >
             <el-option
               v-for="item in dataList.teplist"
@@ -145,7 +169,7 @@ const options = [
               children: 'childrenRes'
             }"
             style="width: 200px"
-            @change="handClickInit"
+            @node-click="handClickInit3"
           />
         </div>
         <div class="flex mr-2">
@@ -156,7 +180,7 @@ const options = [
             filterable
             placeholder="请选择"
             style="width: 200px"
-            @change="handClickInit"
+            @change="handClickInit4"
           >
             <el-option
               v-for="item in dataList.personList"

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

@@ -6,121 +6,109 @@ import { ref, reactive } 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/index.vue";
+import barDimEcharts from "@/components/echarts/barDim.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,
-  getAssessmentList,
-  getChartsList
+  getPersonDimensionChartsRanking
 } 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 params = reactive({
-  params: {
-    chartsQueryVo: {
-      assessmentName: "",
-      assessmentId: "",
-      assessmentModelName: "",
-      assessmentModelId: "",
-      assessmentObjectId: "",
-      assessmentObjectName: "",
-      dimId: "",
-      dimensionName: ""
+const barDimEchartsRef = ref();
+const seachParams = ref();
+// 雷达图
+const dataList = reactive({
+  dimName: []
+});
+const getPersonDimensionChartsListApi = async (
+  dimensionName?: string,
+  dimId?: number | string
+) => {
+  const { code, data } = await getPersonDimensionChartsList({
+    ...seachParams.value,
+    dimId,
+    dimensionName,
+    type: 0
+  });
+
+  if (code == 200) {
+    if (data.length > 0) {
+      data.dimensionList.map(item => {
+        dataList.dimName.push({
+          name: item.dimName,
+          id: item.dimId
+        });
+      });
+      if (dimensionName && dimId) {
+        personListRef.value.init(data);
+      } else {
+        radarRef.value.initChart(data);
+        rankTableRef.value.init(data, "科室", "姓名");
+      }
     }
   }
-});
-const getPersonDimensionChartsListApi = async () => {
-  const { code, data } = await getPersonDimensionChartsList(params.params);
+
+  // console.log(res);
 };
-// 雷达图
-// const drawRank = ref();
-const getPersonDimensionChartsRankingApi = async item => {
-  console.log("item", item);
+// 柱状图
+const getPersonDimensionChartsRankingApi = async (
+  dimensionName?: string,
+  dimId?: number | string
+) => {
   const { code, data } = await getPersonDimensionChartsRanking({
-    ...item,
+    ...seachParams.value,
+    dimId,
+    dimensionName,
     type: 0
   });
   if (code == 200) {
-    // drawRank.value = data;
-    rankTableRef.value.initChart(data);
+    if (data.length > 0) {
+      barEchartsRef.value.init(data);
+    }
   }
 };
-// getPersonDimensionChartsListApi();
+const init = item => {
+  seachParams.value = item;
+  getPersonDimensionChartsListApi();
+  getPersonDimensionChartsRankingApi();
+  barDimEchartsRef.value.init(seachParams.value, 0);
+};
 // 维度表格
 const personListRef = ref();
-const barEchartsList = reactive({
-  zongfen: {
-    title: "总得分"
-  },
-  shuliang: {
-    title: "数量维度"
-  },
-  xiaolve: {
-    title: "效率维度"
-  },
-  zhiliang: {
-    title: "质量维度"
-  },
-  nandu: {
-    title: "难度维度"
-  },
-  qiandu: {
-    title: "强度维度"
-  },
-  jiaoxue: {
-    title: "教学维度"
-  },
-  keyan: {
-    title: "科研维度"
-  }
-});
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
-  }
-];
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  // console.log(tab, event);
-  barEchartsRef.value.dataList(tab.props);
+  console.log(tab, event);
+  if (tab.props.label == "总览") {
+    getPersonDimensionChartsListApi();
+    getPersonDimensionChartsRankingApi();
+  } else {
+    getPersonDimensionChartsListApi(tab.props.label, tab.props.name);
+    getPersonDimensionChartsRankingApi(tab.props.label, tab.props.name);
+  }
+  barEchartsRef.value.init(tab.props);
 };
 const fullBig = (item: any) => {
-  console.log(item);
-  router.push({ path: "/fullBig", query: { ...item } });
+  router.push({
+    path: "/fullBig",
+    query: { title: item, ...seachParams.value, type: 0 }
+  });
 };
 </script>
 
 <template>
   <div class="w-[100%]">
     <div class="w-[100%]">
-      <seachData @handClick="getPersonDimensionChartsRankingApi" />
-      <div>
+      <seachData @handClick="init" />
+      <div v-if="dataList.dimName.length > 0">
         <div class="flex mr-2">
-          <radar ref="rankTableRef" />
+          <radar ref="radarRef" />
         </div>
         <el-tabs
           v-model="activeName"
@@ -130,179 +118,42 @@ const fullBig = (item: any) => {
         >
           <el-tab-pane label="总览" name="1">
             <div class="flex mr-8">
-              <rankTable />
+              <rankTable ref="rankTableRef" />
             </div>
             <!-- 总得分 -->
             <div class="mt-5 pr-8 w-full h-60">
-              <barEcharts ref="barEchartsRef" :title="barEchartsList.zongfen" />
+              <barEcharts ref="barEchartsRef" :title="'总得分'" />
             </div>
             <!-- 维度得分 -->
-            <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-              <div class="w-1/2 h-full">
-                <barEcharts :title="barEchartsList.shuliang" />
-              </div>
-              <div class="w-1/2 h-full">
-                <barEcharts :title="barEchartsList.xiaolve" />
-              </div>
-            </div>
-            <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-              <div class="w-1/2 h-full">
-                <barEcharts
-                  ref="barEchartsRef"
-                  :title="barEchartsList.zhiliang"
-                />
-              </div>
-              <div class="w-1/2 h-full">
-                <barEcharts ref="barEchartsRef" :title="barEchartsList.nandu" />
-              </div>
-            </div>
-            <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-              <div class="w-1/2 h-full">
-                <barEcharts
-                  ref="barEchartsRef"
-                  :title="barEchartsList.qiandu"
-                />
-              </div>
-              <div class="w-1/2 h-full">
-                <barEcharts
-                  ref="barEchartsRef"
-                  :title="barEchartsList.jiaoxue"
-                />
-              </div>
-            </div>
-            <div class="mt-5 pr-8 w-full h-60 flex justify-between item-center">
-              <div class="w-1/2 h-full">
-                <barEcharts ref="barEchartsRef" :title="barEchartsList.keyan" />
-              </div>
-              <div class="w-1/2 h-full">
-                <!-- <barEcharts :title="barEchartsList.kexue" /> -->
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="数量" name="2" :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(barEchartsList.shuliang)"
-                >
-                  <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="barEchartsList.shuliang"
-                />
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="效率" name="3" :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(barEchartsList.xiaolve)"
-                >
-                  <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="barEchartsList.xiaolve"
-                />
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="质量" name="4" :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(barEchartsList.zhiliang)"
-                >
-                  <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="barEchartsList.zhiliang"
-                />
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="难度" name="5" :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(barEchartsList.nandu)"
-                >
-                  <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="barEchartsList.nandu" />
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="强度" name="6" :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(barEchartsList.qiandu)"
-                >
-                  <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="barEchartsList.qiandu"
-                />
-              </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="教学" name="7" :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(barEchartsList.jiaoxue)"
-                >
-                  <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="barEchartsList.jiaoxue"
-                />
+            <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 label="科研" name="8" :lazy="true">
+          <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(barEchartsList.keyan)"
+                  @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="barEchartsList.keyan" />
+                <barEcharts ref="barEchartsRef" :title="item.name" />
               </div>
             </div>
           </el-tab-pane>

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

@@ -2,40 +2,39 @@
 defineOptions({
   name: "workerRank"
 });
-import rankTableDraw from "@/components/rankTable/draw.vue";
+import rankTableDraw from "@/components/rankTable/index.vue";
+import { getPersonDimensionChartsList } from "@/api/draw";
 import seachData from "./componements/seach.vue";
-
 import { ref } from "vue";
-const value = ref("");
-const options = [
-  {
-    value: "Option1",
-    label: "Option1"
-  },
-  {
-    value: "Option2",
-    label: "Option2"
-  },
-  {
-    value: "Option3",
-    label: "Option3"
-  },
-  {
-    value: "Option4",
-    label: "Option4"
-  },
-  {
-    value: "Option5",
-    label: "Option5"
+const rankTableRef = ref();
+const seachParams = ref();
+const lengthData = ref();
+const getPersonDimensionChartsListApi = async () => {
+  const { code, data } = await getPersonDimensionChartsList({
+    ...seachParams.value,
+    type: 0
+  });
+
+  if (code == 200) {
+    if (data.length > 0) {
+      lengthData.value = data.length;
+      rankTableRef.value.init(data, "科室", "姓名");
+    }
   }
-];
+
+  // console.log(res);
+};
+const init = item => {
+  seachParams.value = item;
+  getPersonDimensionChartsListApi();
+};
 </script>
 
 <template>
   <div class="w-full">
     <div class="mb-2 flex gap-2 justify-between flex-wrap">
-      <seachData />
+      <seachData @handClick="init" />
     </div>
-    <rankTableDraw />
+    <rankTableDraw v-if="lengthData > 0" ref="rankTableRef" />
   </div>
 </template>