feat: 可视化

src/api/draw.ts

@@ -44,12 +44,8 @@ type quotaList = {
   msg: string;
 };
 // 所有考核
-export const getAssessmentList = params => {
-  return http.request<addDeptList>(
-    "get",
-    "/specialPortrait/getAssessmentList",
-    { params }
-  );
+export const getAssessmentList = () => {
+  return http.request<addDeptList>("get", "/specialPortrait/getAssessmentList");
 };
 // 排名专题画像
 export const getChartsList = params => {

src/api/userSetting.ts

@@ -51,3 +51,9 @@ export const getDeleteUserApi = async (userCode, pageList) => {
 export const postUpdateUserInfo = data => {
   return http.request<addDept>("post", "/user/updateUserInfo", { data });
 };
+// 查看用户数据包含用户部门，用户组
+export const userPageWhitOrganization = data => {
+  return http.request<addDept>("post", "/user/userPageWhitOrganization", {
+    data
+  });
+};

src/components/rankTable/draw.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column type="index" label="排名" width="80" fixed>
+      <template #default="scope">
+        <div v-if="scope.$index > 2" class="diamond">
+          {{ scope.$index + 1 }}
+        </div>
+        <div v-else class="text-center">
+          <img :src="RANK_IMG[scope.$index]" 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="date"
+      label="总分"
+      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" />
+  </el-table>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive } 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"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.diamond {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px; /* 菱形宽度 */
+  height: 25px; /* 菱形高度 */
+  padding-top: 1px;
+  margin: auto;
+  clip-path: polygon(
+    50% 0%,
+    100% 25%,
+    100% 75%,
+    50% 100%,
+    0% 75%,
+    0% 25%
+  ); /* 定义六边形的形状 */
+
+  font-size: 12px;
+  color: white;
+  background-color: #d3e8f0; /* 背景颜色 */
+}
+</style>

src/components/rankTable/index.vue

@@ -1,10 +1,17 @@
 <template>
   <el-table
     :data="tableData"
+    class="mytTable"
     style="width: 100%"
     :span-method="arraySpanMethod"
   >
-    <el-table-column type="index" label="排名" width="80" fixed>
+    <el-table-column
+      type="index"
+      label="排名"
+      width="80"
+      fixed
+      header-row-style="background-color: #F5F7FA;"
+    >
       <template #default="scope">
         <div
           v-if="scope.$index === 0"
@@ -111,6 +118,14 @@ const tableData = reactive([
     zip: "CA 90036"
   }
 ]);
+const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
+  // console.log("row", row);
+  // console.log("column", column);
+  // console.log("rowIndex", rowIndex);
+  // console.log("columnIndex", columnIndex);
+  // return "background:	#F5F5F5; color:#000000;";
+  return "aaaa";
+};
 const averageData = () => {
   tableData.unshift({
     date: "",
@@ -159,4 +174,15 @@ const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
   color: white;
   background-color: #d3e8f0; /* 背景颜色 */
 }
+
+.mytTable ::v-deep .el-table th.el-table__cell,
+::v-deep .el-table th,
+::v-deep .el-table tr {
+  color: white;
+  background-color: transparent !important;
+}
+
+.aaaa {
+  background-color: black !important;
+}
 </style>

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

@@ -0,0 +1,144 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { getTemplateInfoList } from "@/api/templateInfo";
+import { userPageWhitOrganization } from "@/api/userSetting";
+import { getAssessmentPageList } from "@/api/manage";
+import { postListTree } from "@/api/department";
+const value = ref("");
+const dataList = reactive({
+  teplist: [],
+  personList: [],
+  magList: [],
+  deptList: [],
+  params: {
+    assessmentId: "",
+    assessmentModelId: "",
+    deptCode: "",
+    assessmentObjectId: ""
+  }
+});
+// 考核模板
+const getTemplateInfoListApi = async () => {
+  const { data, code } = await getTemplateInfoList({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.teplist = data.records;
+  }
+};
+getTemplateInfoListApi();
+// 员工
+const userPageWhitOrganizationApi = async () => {
+  const { data, code } = await userPageWhitOrganization({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.personList = data.records;
+  }
+};
+userPageWhitOrganizationApi();
+// 考核活动
+const getAssessmentPageListApi = async () => {
+  const { data, code } = await getAssessmentPageList({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.magList = data.records;
+  }
+  console.log("await", data);
+};
+getAssessmentPageListApi();
+// 部门
+const postListTreeApi = async () => {
+  const { data, code } = await postListTree();
+  if (code === 200) {
+    dataList.deptList = data;
+  }
+  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"
+  }
+];
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-2 flex gap-2 justify-between flex-wrap">
+      <div class="w-[100%] flex mt-2">
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核活动</div>
+          <el-select
+            v-model="dataList.params.assessmentId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.magList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核模板</div>
+          <el-select
+            v-model="dataList.params.assessmentModelId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.teplist"
+              :key="item.id"
+              :label="item.tpName"
+              :value="item.id"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">科室</div>
+          <el-tree-select
+            v-model="dataList.params.deptCode"
+            :data="dataList.deptList"
+            check-strictly
+            filterable
+            clearable
+            :props="{
+              label: 'deptName',
+              value: 'deptCode',
+              children: 'childrenRes'
+            }"
+            style="width: 200px"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -1,9 +1,282 @@
 <script setup lang="ts">
 defineOptions({
-  name: "departmentDrank"
+  name: "workerDrak"
 });
+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 personList from "@/components/personList/index.vue";
+import qvanping from "@/assets/rank/qvanping@2x.png";
+import seachData from "./componements/seach.vue";
+import {
+  getPersonDimensionChartsList,
+  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 getPersonDimensionChartsListApi = async () => {
+  const { code, data } = await getPersonDimensionChartsList(params.params);
+  // barEchartsRef.value.setOption(data);
+  // console.log("data", data);
+};
+// 维度表格
+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);
+};
+const fullBig = (item: any) => {
+  console.log(item);
+  router.push({ path: "/fullBig", query: { ...item } });
+};
 </script>
 
 <template>
-  <div>科室画像</div>
+  <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="" />
+              </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>
+    </div>
+  </div>
 </template>

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

@@ -1,9 +1,41 @@
 <script setup lang="ts">
 defineOptions({
-  name: "departmentDrank"
+  name: "workerRank"
 });
+import rankTableDraw from "@/components/rankTable/draw.vue";
+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"
+  }
+];
 </script>
 
 <template>
-  <div>科室排行</div>
+  <div class="w-full">
+    <div class="mb-2 flex gap-2 justify-between flex-wrap">
+      <seachData />
+    </div>
+    <rankTableDraw />
+  </div>
 </template>

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

@@ -0,0 +1,144 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { getTemplateInfoList } from "@/api/templateInfo";
+import { userPageWhitOrganization } from "@/api/userSetting";
+import { getAssessmentPageList } from "@/api/manage";
+import { postListTree } from "@/api/department";
+const value = ref("");
+const dataList = reactive({
+  teplist: [],
+  personList: [],
+  magList: [],
+  deptList: [],
+  params: {
+    assessmentId: "",
+    assessmentModelId: "",
+    deptCode: "",
+    assessmentObjectId: ""
+  }
+});
+// 考核模板
+const getTemplateInfoListApi = async () => {
+  const { data, code } = await getTemplateInfoList({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.teplist = data.records;
+  }
+};
+getTemplateInfoListApi();
+// 员工
+const userPageWhitOrganizationApi = async () => {
+  const { data, code } = await userPageWhitOrganization({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.personList = data.records;
+  }
+};
+userPageWhitOrganizationApi();
+// 考核活动
+const getAssessmentPageListApi = async () => {
+  const { data, code } = await getAssessmentPageList({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.magList = data.records;
+  }
+  console.log("await", data);
+};
+getAssessmentPageListApi();
+// 部门
+const postListTreeApi = async () => {
+  const { data, code } = await postListTree();
+  if (code === 200) {
+    dataList.deptList = data;
+  }
+  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"
+  }
+];
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-2 flex gap-2 justify-between flex-wrap">
+      <div class="w-[100%] flex mt-2">
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核活动</div>
+          <el-select
+            v-model="dataList.params.assessmentId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.magList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核模板</div>
+          <el-select
+            v-model="dataList.params.assessmentModelId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.teplist"
+              :key="item.id"
+              :label="item.tpName"
+              :value="item.id"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">科室</div>
+          <el-tree-select
+            v-model="dataList.params.deptCode"
+            :data="dataList.deptList"
+            check-strictly
+            filterable
+            clearable
+            :props="{
+              label: 'deptName',
+              value: 'deptCode',
+              children: 'childrenRes'
+            }"
+            style="width: 200px"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -1,9 +1,282 @@
 <script setup lang="ts">
 defineOptions({
-  name: "headDrank"
+  name: "workerDrak"
 });
+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 personList from "@/components/personList/index.vue";
+import qvanping from "@/assets/rank/qvanping@2x.png";
+import seachData from "./componements/seach.vue";
+import {
+  getPersonDimensionChartsList,
+  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 getPersonDimensionChartsListApi = async () => {
+  const { code, data } = await getPersonDimensionChartsList(params.params);
+  // barEchartsRef.value.setOption(data);
+  // console.log("data", data);
+};
+// 维度表格
+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);
+};
+const fullBig = (item: any) => {
+  console.log(item);
+  router.push({ path: "/fullBig", query: { ...item } });
+};
 </script>
 
 <template>
-  <div>科室主任画像</div>
+  <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="" />
+              </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>
+    </div>
+  </div>
 </template>

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

@@ -1,9 +1,41 @@
 <script setup lang="ts">
 defineOptions({
-  name: "headRank"
+  name: "workerRank"
 });
+import rankTableDraw from "@/components/rankTable/draw.vue";
+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"
+  }
+];
 </script>
 
 <template>
-  <div>科室主任排行</div>
+  <div class="w-full">
+    <div class="mb-2 flex gap-2 justify-between flex-wrap">
+      <seachData />
+    </div>
+    <rankTableDraw />
+  </div>
 </template>

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

@@ -0,0 +1,137 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { getTemplateInfoList } from "@/api/templateInfo";
+import { userPageWhitOrganization } from "@/api/userSetting";
+import { getAssessmentPageList } from "@/api/manage";
+import { postListTree } from "@/api/department";
+import { postPageGroup } from "@/api/userGroup";
+const value = ref("");
+const dataList = reactive({
+  teplist: [],
+  userList: [],
+  magList: [],
+  params: {
+    assessmentId: "",
+    assessmentModelId: "",
+    deptCode: "",
+    assessmentObjectId: ""
+  }
+});
+// 考核模板
+const getTemplateInfoListApi = async () => {
+  const { data, code } = await getTemplateInfoList({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.teplist = data.records;
+  }
+};
+getTemplateInfoListApi();
+
+// 考核活动
+const getAssessmentPageListApi = async () => {
+  const { data, code } = await getAssessmentPageList({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.magList = data.records;
+  }
+  console.log("await", data);
+};
+getAssessmentPageListApi();
+// 用户组-用户组-医疗组
+const postPageGroupApi = async () => {
+  const { data, code } = await postPageGroup({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.userList = data.records;
+  }
+};
+postPageGroupApi();
+const options = [
+  {
+    value: "Option1",
+    label: "Option1"
+  },
+  {
+    value: "Option2",
+    label: "Option2"
+  },
+  {
+    value: "Option3",
+    label: "Option3"
+  },
+  {
+    value: "Option4",
+    label: "Option4"
+  },
+  {
+    value: "Option5",
+    label: "Option5"
+  }
+];
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-2 flex gap-2 justify-between flex-wrap">
+      <div class="w-[100%] flex mt-2">
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核活动</div>
+          <el-select
+            v-model="dataList.params.assessmentId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.magList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核模板</div>
+          <el-select
+            v-model="dataList.params.assessmentModelId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.teplist"
+              :key="item.id"
+              :label="item.tpName"
+              :value="item.id"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">医疗组</div>
+          <el-select
+            v-model="dataList.params.assessmentModelId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.userList"
+              :key="item.groupCode"
+              :label="item.groupName"
+              :value="item.groupCode"
+            />
+          </el-select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -1,9 +1,282 @@
 <script setup lang="ts">
 defineOptions({
-  name: "healthDrank"
+  name: "workerDrak"
 });
+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 personList from "@/components/personList/index.vue";
+import qvanping from "@/assets/rank/qvanping@2x.png";
+import seachData from "./componements/seach.vue";
+import {
+  getPersonDimensionChartsList,
+  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 getPersonDimensionChartsListApi = async () => {
+  const { code, data } = await getPersonDimensionChartsList(params.params);
+  // barEchartsRef.value.setOption(data);
+  // console.log("data", data);
+};
+// 维度表格
+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);
+};
+const fullBig = (item: any) => {
+  console.log(item);
+  router.push({ path: "/fullBig", query: { ...item } });
+};
 </script>
 
 <template>
-  <div>医疗画像</div>
+  <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="" />
+              </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>
+    </div>
+  </div>
 </template>

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

@@ -1,9 +1,41 @@
 <script setup lang="ts">
 defineOptions({
-  name: "healthRank"
+  name: "workerRank"
 });
+import rankTableDraw from "@/components/rankTable/draw.vue";
+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"
+  }
+];
 </script>
 
 <template>
-  <div>医疗排行</div>
+  <div class="w-full">
+    <div class="mb-2 flex gap-2 justify-between flex-wrap">
+      <seachData />
+    </div>
+    <rankTableDraw />
+  </div>
 </template>

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

@@ -0,0 +1,161 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { getTemplateInfoList } from "@/api/templateInfo";
+import { userPageWhitOrganization } from "@/api/userSetting";
+import { getAssessmentPageList } from "@/api/manage";
+import { postListTree } from "@/api/department";
+const value = ref("");
+const dataList = reactive({
+  teplist: [],
+  personList: [],
+  magList: [],
+  deptList: [],
+  params: {
+    assessmentId: "",
+    assessmentModelId: "",
+    deptCode: "",
+    assessmentObjectId: ""
+  }
+});
+// 考核模板
+const getTemplateInfoListApi = async () => {
+  const { data, code } = await getTemplateInfoList({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.teplist = data.records;
+  }
+};
+getTemplateInfoListApi();
+// 员工
+const userPageWhitOrganizationApi = async () => {
+  const { data, code } = await userPageWhitOrganization({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.personList = data.records;
+  }
+};
+userPageWhitOrganizationApi();
+// 考核活动
+const getAssessmentPageListApi = async () => {
+  const { data, code } = await getAssessmentPageList({
+    pageNumber: 1,
+    pageSize: 1000
+  });
+  if (code === 200) {
+    dataList.magList = data.records;
+  }
+  console.log("await", data);
+};
+getAssessmentPageListApi();
+// 部门
+const postListTreeApi = async () => {
+  const { data, code } = await postListTree();
+  if (code === 200) {
+    dataList.deptList = data;
+  }
+  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"
+  }
+];
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-2 flex gap-2 justify-between flex-wrap">
+      <div class="w-[100%] flex mt-2">
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核活动</div>
+          <el-select
+            v-model="dataList.params.assessmentId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.magList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">考核模板</div>
+          <el-select
+            v-model="dataList.params.assessmentModelId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.teplist"
+              :key="item.id"
+              :label="item.tpName"
+              :value="item.id"
+            />
+          </el-select>
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">科室</div>
+          <el-tree-select
+            v-model="dataList.params.deptCode"
+            :data="dataList.deptList"
+            check-strictly
+            filterable
+            clearable
+            :props="{
+              label: 'deptName',
+              value: 'deptCode',
+              children: 'childrenRes'
+            }"
+            style="width: 200px"
+          />
+        </div>
+        <div class="flex mr-2">
+          <div class="text-sm leading-8 mr-3">员工</div>
+          <el-select
+            v-model="dataList.params.assessmentObjectId"
+            clearable
+            filterable
+            placeholder="请选择"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in dataList.personList"
+              :key="item.userCode"
+              :label="item.realName"
+              :value="item.userCode"
+            />
+          </el-select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -9,7 +9,12 @@ import barEcharts from "@/components/echarts/bar.vue";
 import rankTable from "@/components/rankTable/index.vue";
 import personList from "@/components/personList/index.vue";
 import qvanping from "@/assets/rank/qvanping@2x.png";
-import { getPersonDimensionChartsList } from "@/api/draw";
+import seachData from "./componements/seach.vue";
+import {
+  getPersonDimensionChartsList,
+  getAssessmentList,
+  getChartsList
+} from "@/api/draw";
 import type { TabsPaneContext } from "element-plus";
 const router = useRouter();
 const value = ref("");
@@ -33,9 +38,8 @@ const params = reactive({
 const getPersonDimensionChartsListApi = async () => {
   const { code, data } = await getPersonDimensionChartsList(params.params);
   // barEchartsRef.value.setOption(data);
-  console.log("data", data);
+  // console.log("data", data);
 };
-getPersonDimensionChartsListApi();
 // 维度表格
 const personListRef = ref();
 const barEchartsList = reactive({
@@ -99,74 +103,7 @@ const fullBig = (item: any) => {
 <template>
   <div class="w-[100%]">
     <div class="w-[100%]">
-      <div class="mb-2 flex gap-2 justify-between flex-wrap">
-        <div class="w-[100%] flex mt-2">
-          <div class="flex mr-2">
-            <div class="text-sm leading-8 mr-3">考核活动</div>
-            <el-select
-              v-model="value"
-              clearable
-              placeholder="请选择"
-              style="width: 150px"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </div>
-          <div class="flex mr-2">
-            <div class="text-sm leading-8 mr-3">考核模板</div>
-            <el-select
-              v-model="value"
-              clearable
-              placeholder="请选择"
-              style="width: 150px"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </div>
-          <div class="flex mr-2">
-            <div class="text-sm leading-8 mr-3">科室</div>
-            <el-select
-              v-model="value"
-              clearable
-              placeholder="请选择"
-              style="width: 150px"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </div>
-          <div class="flex mr-2">
-            <div class="text-sm leading-8 mr-3">员工</div>
-            <el-select
-              v-model="value"
-              clearable
-              placeholder="请选择"
-              style="width: 150px"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </div>
-        </div>
-      </div>
+      <seachData />
       <div class="flex mr-2">
         <radar />
       </div>

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

@@ -2,6 +2,9 @@
 defineOptions({
   name: "workerRank"
 });
+import rankTableDraw from "@/components/rankTable/draw.vue";
+import seachData from "./componements/seach.vue";
+
 import { ref } from "vue";
 const value = ref("");
 const options = [
@@ -31,72 +34,8 @@ const options = [
 <template>
   <div class="w-full">
     <div class="mb-2 flex gap-2 justify-between flex-wrap">
-      <div class="w-[100%] flex mt-2">
-        <div class="flex mr-2">
-          <div class="text-sm leading-8 mr-3">考核活动</div>
-          <el-select
-            v-model="value"
-            clearable
-            placeholder="请选择"
-            style="width: 150px"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-        <div class="flex mr-2">
-          <div class="text-sm leading-8 mr-3">考核模板</div>
-          <el-select
-            v-model="value"
-            clearable
-            placeholder="请选择"
-            style="width: 150px"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-        <div class="flex mr-2">
-          <div class="text-sm leading-8 mr-3">科室</div>
-          <el-select
-            v-model="value"
-            clearable
-            placeholder="请选择"
-            style="width: 150px"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-        <div class="flex mr-2">
-          <div class="text-sm leading-8 mr-3">员工</div>
-          <el-select
-            v-model="value"
-            clearable
-            placeholder="请选择"
-            style="width: 150px"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-      </div>
+      <seachData />
     </div>
+    <rankTableDraw />
   </div>
 </template>