|
@@ -12,12 +12,14 @@ 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 rankTableRef = ref();
|
|
|
const activeName = ref("1");
|
|
|
// 柱状图
|
|
|
const barEchartsRef = ref();
|
|
@@ -37,10 +39,21 @@ const params = reactive({
|
|
|
});
|
|
|
const getPersonDimensionChartsListApi = async () => {
|
|
|
const { code, data } = await getPersonDimensionChartsList(params.params);
|
|
|
- // barEchartsRef.value.setOption(data);
|
|
|
- // console.log("data", data);
|
|
|
};
|
|
|
-getPersonDimensionChartsListApi();
|
|
|
+// 雷达图
|
|
|
+// const drawRank = ref();
|
|
|
+const getPersonDimensionChartsRankingApi = async item => {
|
|
|
+ console.log("item", item);
|
|
|
+ const { code, data } = await getPersonDimensionChartsRanking({
|
|
|
+ ...item,
|
|
|
+ type: 0
|
|
|
+ });
|
|
|
+ if (code == 200) {
|
|
|
+ // drawRank.value = data;
|
|
|
+ rankTableRef.value.initChart(data);
|
|
|
+ }
|
|
|
+};
|
|
|
+// getPersonDimensionChartsListApi();
|
|
|
// 维度表格
|
|
|
const personListRef = ref();
|
|
|
const barEchartsList = reactive({
|
|
@@ -104,180 +117,197 @@ const fullBig = (item: any) => {
|
|
|
<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" />
|
|
|
+ <seachData @handClick="getPersonDimensionChartsRankingApi" />
|
|
|
+ <div>
|
|
|
+ <div class="flex mr-2">
|
|
|
+ <radar ref="rankTableRef" />
|
|
|
+ </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="w-1/2 h-full">
|
|
|
- <barEcharts ref="barEchartsRef" :title="barEchartsList.jiaoxue" />
|
|
|
+ <!-- 总得分 -->
|
|
|
+ <div class="mt-5 pr-8 w-full h-60">
|
|
|
+ <barEcharts ref="barEchartsRef" :title="barEchartsList.zongfen" />
|
|
|
</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 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>
|
|
|
- <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 class="w-1/2 h-full">
|
|
|
+ <barEcharts :title="barEchartsList.xiaolve" />
|
|
|
</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 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="w-full h-60 mt-5 pr-8">
|
|
|
- <barEcharts
|
|
|
- ref="barEchartsRef"
|
|
|
- :title="barEchartsList.zhiliang"
|
|
|
- />
|
|
|
+ <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>
|
|
|
- </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="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>
|
|
|
- <div class="w-full h-60 mt-5 pr-8">
|
|
|
- <barEcharts ref="barEchartsRef" :title="barEchartsList.nandu" />
|
|
|
+ </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>
|
|
|
- </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="" />
|
|
|
+ </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>
|
|
|
- <div class="w-full h-60 mt-5 pr-8">
|
|
|
- <barEcharts ref="barEchartsRef" :title="barEchartsList.qiandu" />
|
|
|
+ </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>
|
|
|
- </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 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>
|
|
|
- <div class="w-full h-60 mt-5 pr-8">
|
|
|
- <barEcharts ref="barEchartsRef" :title="barEchartsList.jiaoxue" />
|
|
|
+ </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>
|
|
|
- </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="" />
|
|
|
+ </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>
|
|
|
- <div class="w-full h-60 mt-5 pr-8">
|
|
|
- <barEcharts ref="barEchartsRef" :title="barEchartsList.keyan" />
|
|
|
+ </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>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|