hospital-project/src/views/draw/children/department/departmentDrank.vue

<script setup lang="ts">
defineOptions({
  name: "departmentDrank"
});
import { ref, reactive, nextTick, watch } 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/seachOld.vue";
import { getPersonDimensionChartsList, getChartsList } from "@/api/draw";
import type { TabsPaneContext } from "element-plus";
const router = useRouter();
const activeName = ref("1");
// 排行榜
const rankTableRef = ref();
const chartList = ref([]);
const showLength = ref(0);
const getChartsListApi = async () => {
  const { code, data } = await getChartsList({
    ...seachParams.value,
    type: 1
  });
  if (code == 200) {
    if (data && data.length > 0) {
      showLength.value = data?.length;
      nextTick(() => {
        setTimeout(() => {
          rankTableRef.value.init(data, "科室", "姓名");
        }, 500);
      });
    }
  }
};
// 柱状图
const barEchartsRef = ref();
const radarRef = ref();
const barDimEchartsRef = ref();
const dataList = reactive({
  dimName: []
});
const seachParams = ref();
const getPersonDimensionChartsListApiDimList = async () => {
  const { code, data } = await getPersonDimensionChartsList({
    ...seachParams.value,
    type: 1
  });
  if (code == 200) {
    radarRefList.value = data;
    dataList.dimName = [];
    if (data && data.length > 0) {
      data.map(it => {
        if (it.dimensionList.length > 0) {
          it.dimensionList.map((item, index) => {
            dataList.dimName.push({
              name: item.dimName,
              id: item.dimId
            });
          });
        }
      });
    }
  }
};
const radarRefList = ref([]);
const barDimEchartsList = reactive({
  data: null,
  type: null
});
const init = (item, type, val) => {
  seachParams.value = item;
  barDimEchartsList.data = null;
  barDimEchartsList.type = null;
  if (Number(type)) {
    nextTick(() => {
      barDimEchartsList.data = item;
      barDimEchartsList.type = 1;
      if (val) {
        getPersonDimensionChartsListApiDimList();
      } else {
        radarRefList.value = [];
      }
      getChartsListApi();
      activeName.value = "1";
    });
  } else {
    showLength.value = 0;
    return;
  }
};
// 维度表格
const paramsIndex = ref({});
const personListRef = ref();
const radarRefList2 = ref([]);
const handleClick = (tab: TabsPaneContext, event: Event) => {
  loading.value = true;
  if (tab.props.label == "总览") {
    getChartsListApi();
  } else {
    nextTick(() => {
      Object.assign(paramsIndex.value, {
        ...seachParams.value,
        dimId: tab.props.name,
        dimensionName: tab.props.label,
        type: 1
      });
      radarRefList2.value = [];
      setTimeout(() => {
        const data = [];
        const lists = [...radarRefList.value];
        lists.forEach(el => {
          data.push({ ...el });
        });
        data[0].dimensionList = data[0].dimensionList.filter(item => {
          if (item.dimId === tab.props.name) {
            return true;
          }
        });
        radarRefList2.value = data;
      }, 1000);
    });
  }
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};
const fullBig = (item: any) => {
  console.log(item);
  router.push({
    path: "/fullBig",
    query: {
      ...item,
      ...seachParams.value,
      type: 1
    }
  });
};
const loading = ref(false);
</script>

<template>
  <div class="w-[100%]">
    <div class="w-[100%]">
      <seachData @handClick="init" />
      <div v-if="showLength > 0">
        <div class="flex mr-2">
          <radar ref="radarRef" :radarRefList="radarRefList" />
        </div>
        <el-tabs
          v-model="activeName"
          v-loading="loading"
          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 w-full pr-8 h-60">
              <barEcharts
                ref="barEchartsRef"
                :title="'总得分'"
                :barDimEchartsList="barDimEchartsList"
              />
            </div>
            <!-- 维度得分 -->
            <div class="flex justify-between flex-wrap items-center">
              <div v-for="(item, index) in dataList.dimName" :key="index">
                <div class="mt-5 pr-8 h-60 w-[600px]">
                  <barDimEcharts
                    ref="barDimEchartsRef"
                    :title="item.name"
                    :barDimEchartsList="barDimEchartsList"
                    :itemDim="item"
                  />
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            v-for="(item, index) in dataList.dimName"
            :key="index"
            :label="item.name"
            :name="item.id"
            :lazy="true"
          >
            <div class="w-full">
              <div class="flex justify-between">
                <personList
                  ref="personListRef"
                  :key="item.id + index"
                  class="w-11/12"
                  :paramsIndex="paramsIndex"
                  :detailData="radarRefList2"
                />
                <div
                  class="w-[30px] h-[30px] mr-10 cursor-pointer"
                  @click="fullBig(item)"
                >
                  <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"
                  :barDimEchartsList="barDimEchartsList"
                  :itemDim="item"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>