hospital-project/src/views/draw/children/health/healthDrank.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 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 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>