hospital-project/src/views/draw/children/worker/workerDrak.vue

<script setup lang="ts">
defineOptions({
  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 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
} from "@/api/draw";
import type { TabsPaneContext } from "element-plus";
const router = useRouter();
const value = ref("");
const radarRef = ref();
const rankTableRef = ref();
const activeName = ref("1");
const barEchartsRef = ref();
const barDimEchartsRef = ref();
const seachParams = ref();
// 雷达图
const 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, "科室", "姓名");
      }
    }
  }

  // console.log(res);
};
// 柱状图
const getPersonDimensionChartsRankingApi = async (
  dimensionName?: string,
  dimId?: number | string
) => {
  const { code, data } = await getPersonDimensionChartsRanking({
    ...seachParams.value,
    dimId,
    dimensionName,
    type: 0
  });
  if (code == 200) {
    if (data.length > 0) {
      barEchartsRef.value.init(data);
    }
  }
};
const init = item => {
  seachParams.value = item;
  getPersonDimensionChartsListApi();
  getPersonDimensionChartsRankingApi();
  barDimEchartsRef.value.init(seachParams.value, 0);
};
// 维度表格
const personListRef = ref();
const handleClick = (tab: TabsPaneContext, event: Event) => {
  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) => {
  router.push({
    path: "/fullBig",
    query: { title: item, ...seachParams.value, type: 0 }
  });
};
</script>

<template>
  <div class="w-[100%]">
    <div class="w-[100%]">
      <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>
          </el-tab-pane>
          <el-tab-pane
            v-for="(item, index) in dataList.dimName"
            :key="index"
            :label="item.name"
            :name="item.id"
            :lazy="true"
          >
            <div class="w-full">
              <div class="flex justify-between">
                <personList ref="personListRef" class="w-11/12" />
                <div
                  class="w-[30px] h-[30px] mr-10 cursor-pointer"
                  @click="fullBig(item.name)"
                >
                  <img class="w-full h-full" :src="qvanping" alt="" />
                </div>
              </div>
              <div class="w-full h-60 mt-5 pr-8">
                <barEcharts ref="barEchartsRef" :title="item.name" />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>