1

src/components/pages/testPerson/examine/index.vue

@@ -478,7 +478,7 @@ export default {
 .testPersonExamine {
   width: 100%;
   min-width: calc(100px * 10);
-  height: 100%;
+  height: calc(100% - 20px);
   /* overflow-x: scroll; */
   /* overflow: auto; */
   display: flex;
@@ -486,6 +486,8 @@ export default {
   padding: 10px;
   box-sizing: border-box;
   background-color: #fff;
+	margin: 10px 0;
+	border-radius: 5px;
 }
 .tArea {
   /* box-sizing: border-box; */

src/components/pages/testPerson/index.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="tp_body">
-    <div class="tp_left">
+		<div class="tp_b_top">
+			<infoA :userid="userid" :oid="oid"></infoA>
+			<!-- <panelA :userid="userid" :oid="oid" :org="org"></panelA> -->
+		</div>
+		<div class="tp_b_bottom">
+			<testA :userid="userid" :oid="oid"></testA>
+		</div>
+    <!-- <div class="tp_left">
         <infoA :userid="userid" :oid="oid"></infoA>
         <panelA :userid="userid" :oid="oid" :org="org"></panelA>
-    </div>
-    <div class="tp_right">
+    </div> -->
+    <!-- <div class="tp_right">
         <testA :userid="userid" :oid="oid"></testA>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -41,14 +48,25 @@ export default {
         width: 100%;
         height: 100%;
         min-height: 820px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding:20px;
+        /* display: flex; */
+        /* justify-content: center; */
+        /* align-items: center; */
+        padding:0px;
         box-sizing: border-box;
     }
 
-    .tp_left{
+		.tp_b_top{
+			width: 100%;
+			height: 130px;
+		}
+
+		.tp_b_bottom{
+			width: 100%;
+			height: calc(100% - 130px);
+			overflow: auto;
+		}
+
+    /* .tp_left{
         width: 230px;
         height: 100%;
     }
@@ -56,6 +74,6 @@ export default {
         width: calc(100% - 230px - 10px);
         margin: 0 0 0 10px;
         height: 100%;
-    }
+    } */
 
 </style>

src/components/pages/testPerson/info/index.vue

@@ -1,6 +1,73 @@
 <template>
   <div class="i_body">
-    <div class="i_top">
+    <div class="i_b_left">
+      <img :src="info.headportrait ? info.headportrait : avator" alt="" />
+      <div>
+        <div>
+          {{ info.username
+          }}<span @click="openInfo()"
+            ><svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M2.5 3.125C2.5 2.77982 2.77982 2.5 3.125 2.5H10.625C10.9702 2.5 11.25 2.77982 11.25 3.125C11.25 3.47018 10.9702 3.75 10.625 3.75H3.75V16.25H16.25V10.625C16.25 10.2798 16.5298 10 16.875 10C17.2202 10 17.5 10.2798 17.5 10.625V16.875C17.5 17.2202 17.2202 17.5 16.875 17.5H3.125C2.77982 17.5 2.5 17.2202 2.5 16.875V3.125Z"
+                fill="black"
+                fill-opacity="0.9"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M17.3169 2.68306C17.561 2.92714 17.561 3.32286 17.3169 3.56694L9.81694 11.0669C9.57286 11.311 9.17714 11.311 8.93306 11.0669C8.68898 10.8229 8.68898 10.4271 8.93306 10.1831L16.4331 2.68306C16.6771 2.43898 17.0729 2.43898 17.3169 2.68306Z"
+                fill="black"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </span>
+        </div>
+        <span>{{ info.intro ? info.intro : "暂无简介" }}</span>
+      </div>
+    </div>
+    <div class="i_b_right">
+      <div>
+        <span>年级</span>
+        <div>{{ info.grade ? info.grade : "暂无" }}</div>
+      </div>
+
+      <span></span>
+
+      <div>
+        <span>学科</span>
+        <div>{{ info.subject ? info.subject : "暂无" }}</div>
+      </div>
+
+      <span></span>
+
+      <div>
+        <span>职务</span>
+        <div>{{ info.job ? info.job : "暂无" }}</div>
+      </div>
+
+      <span></span>
+
+      <div>
+        <span>教研室</span>
+        <div>{{ info.classname ? info.classname : "暂无" }}</div>
+      </div>
+
+      <span></span>
+
+      <div>
+        <span>学段</span>
+        <div>{{ info.stage ? info.stage : "暂无" }}</div>
+      </div>
+    </div>
+    <!-- <div class="i_top">
       <div class="img">
         <img :src="info.headportrait ? info.headportrait : avator" alt="">
       </div>
@@ -12,27 +79,26 @@
           <span>{{info.intro ? info.intro : '暂无简介'}}</span>
         </el-tooltip>
       </div>
-    </div>
-    <div class="i_bottom">
-        <!-- <div class="i_bottom_span">
+    </div> -->
+    <!-- <div class="i_bottom"> -->
+    <!-- <div class="i_bottom_span">
           <span>教研室</span>
           <el-tooltip :content="info.classname ? info.classname : '暂无'" placement="top" effect="dark">
             <span>{{info.classname ? info.classname : '暂无'}}</span>
           </el-tooltip>
         </div> -->
-        <div class="i_bottom_box">
+    <!-- <div class="i_bottom_box">
           <div class="i_bottom_span" v-for="item in teaType" :key="item.id">
             <span>
               {{ item.name + "：" }}
             </span>
-            <!-- <span>{{ item.value }}</span> -->
             <el-tooltip :content="getTypeC(item.child, item.value)" placement="top" effect="dark">
               <span>{{ getTypeC(item.child, item.value) }}</span>
             </el-tooltip>
           </div>
-        </div>
+        </div> -->
 
-        <!-- <div v-if="!oidArray.includes(oid)" class="i_bottom_span">
+    <!-- <div v-if="!oidArray.includes(oid)" class="i_bottom_span">
           <span>学科</span>
           <el-tooltip :content="info.subject ? info.subject : '暂无'" placement="top" effect="dark">
             <span>{{info.subject ? info.subject : '暂无'}}</span>
@@ -44,21 +110,25 @@
             <span>{{info.job ? info.job : '暂无'}}</span>
           </el-tooltip>
         </div> -->
-        <div class="i_bottom_btn" @click="openInfo()">
+    <!-- <div class="i_bottom_btn" @click="openInfo()">
           <span class="edit"></span>
           <span>编辑个人信息</span>
-        </div>
-    </div>
-    <infoDialog :dialogVisibleInfo.sync="dialogVisibleInfo" :userid="userid" :oid="oid"></infoDialog>
+        </div> -->
+    <!-- </div> -->
+    <infoDialog
+      :dialogVisibleInfo.sync="dialogVisibleInfo"
+      :userid="userid"
+      :oid="oid"
+    ></infoDialog>
   </div>
 </template>
 
 <script>
-import avator from '../../../../assets/icon/test/teacher.jpg'
-import infoDialog from './infoDialog/index.vue'
+import avator from "../../../../assets/icon/test/teacher.jpg";
+import infoDialog from "./infoDialog/index.vue";
 export default {
   components: {
-    infoDialog,
+    infoDialog
   },
   props: {
     userid: {
@@ -66,33 +136,33 @@ export default {
     },
     oid: {
       type: String
-    },
+    }
   },
   data() {
     return {
       avator: avator,
       info: {},
-      dialogVisibleInfo:false,
+      dialogVisibleInfo: false,
       oidArray: ["d67940a5-510c-40ea-9c9a-2631ab03013a"],
       teaType: []
-    }
+    };
   },
   watch: {
     dialogVisibleInfo(newValue, oldValue) {
-      this.getData()
+      this.getData();
     }
   },
   computed: {
     getTypeC() {
       return function(array, value) {
-        let name = []
-        for(var i = 0; i < array.length; i++) {
-          if(value.indexOf(array[i].id) != -1) {
-            name.push(array[i].name)
+        let name = [];
+        for (var i = 0; i < array.length; i++) {
+          if (value.indexOf(array[i].id) != -1) {
+            name.push(array[i].name);
           }
         }
-        return name.length ? name.join("/") : '暂无'
-      }
+        return name.length ? name.join("/") : "暂无";
+      };
     }
   },
   methods: {
@@ -118,72 +188,161 @@ export default {
       };
       this.ajax
         .get(this.$store.state.api + "selectPerInfoAllTea", params)
-        .then((res) => {
-          
+        .then(res => {
           this.teaType = res.data[0];
           let typeInfo = res.data[1];
 
-          this.teaType.forEach((e) => {
+          this.teaType.forEach(e => {
             e.child = [];
             e.value = [];
-            typeInfo.forEach((i) => {
+            typeInfo.forEach(i => {
               if (e.id == i.parentid) {
-                e.child.push({ id: i.id, name: i.name })
+                e.child.push({ id: i.id, name: i.name });
               }
-            })
-          })
+            });
+          });
           console.log(this.teaType, "teaType");
           // this.options = res.data[2];
           this.getData();
-
         })
-        .catch((err) => {
+        .catch(err => {
           console.error(err);
         });
     },
     getData() {
       let params = {
-        uid: this.userid,
+        uid: this.userid
       };
       this.ajax
         .get(this.$store.state.api + "selectTestUser", params)
-        .then((res) => {
-          this.info = res.data[0][0]
+        .then(res => {
+          this.info = res.data[0][0];
           // 用于存储归类后的数据的对象
-          this.teaType.forEach(e =>{
-            let array2 = []
+          this.teaType.forEach(e => {
+            let array2 = [];
             for (var i = 0; i < e.child.length; i++) {
-              array2.push(e.child[i].id)
+              array2.push(e.child[i].id);
             }
-            e.value = this.arrayToArray(this.info.cclassid.split(','), array2)
-          })
+            e.value = this.arrayToArray(this.info.cclassid.split(","), array2);
+          });
         })
-        .catch((err) => {
+        .catch(err => {
           console.error(err);
         });
     },
-    openInfo(){
-      this.dialogVisibleInfo = true
+    openInfo() {
+      this.dialogVisibleInfo = true;
     }
   },
-  mounted () {
+  mounted() {
     this.getTypeInfo();
-  },
-}
+  }
+};
 </script>
 
 <style scoped>
-    .i_body{
-        width: 100%;
-        height: calc(55% - 10px);
-        min-height: 420px;
-        background: #fff;
-        border-radius: 5px;
+.i_body {
+  width: 100%;
+  height: 130px;
+  min-height: 130px;
+  background: #fff;
+  border-bottom: 1px solid #e7e7e7;
+  box-sizing: border-box;
+  padding: 10px 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* border-radius: 5px;
         margin-bottom: 10px;
-        /* overflow: hidden; */
-        overflow: auto;
-    }
-    .i_top{
+        overflow: auto; */
+}
+
+.i_b_left {
+  width: auto;
+  height: 100%;
+  max-width: 50%;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+}
+
+.i_b_left > img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+}
+
+.i_b_left > div {
+  margin-left: 20px;
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.i_b_left > div > div {
+  font-size: 34px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.i_b_left > div > div > span {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  margin-left: 20px;
+}
+
+.i_b_left > div > div > span > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.i_b_left > div > span {
+  font-size: 16px;
+  color: #a1a1a1;
+}
+
+.i_b_right {
+  width: auto;
+  max-width: 50%;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+}
+
+.i_b_right > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: auto;
+  height: 60px;
+  justify-content: space-between;
+  padding: 0px 20px;
+	text-wrap: nowrap;
+}
+
+.i_b_right > div > div {
+  font-size: 18px;
+  font-weight: bold;
+	text-wrap: nowrap;
+}
+
+.i_b_right > div > span {
+  font-size: 18px;
+  color: #00000099;
+	text-wrap: nowrap;
+}
+
+.i_b_right > span {
+  width: 1px;
+  height: 50px;
+  margin: 0 20px;
+  background: #e7e7e7;
+}
+
+/* .i_top{
       height: 55%;
       width: calc(100% - 20px);
       margin: 0 auto;
@@ -227,7 +386,6 @@ export default {
     }
 
     .i_top > .detail > span{
-      /* display: block; */
       max-width: 90%;
       font-size: 12px;
       margin: 0 auto;
@@ -307,5 +465,5 @@ export default {
       background-size:100% 100%;
       background-image: url('../../../../assets/icon/test/edit-icon.png');
       margin-right: 10px;
-    }
-</style>
+    } */
+</style>

src/components/pages/testPerson/portrait/chordDiagramView.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%;align-items: center;justify-content: center;">
+      <!-- <div id="cateRank" class="echart" style="width: 100%; height: 100%"></div> -->
+      <highcharts :options="data" style="width: 100%; height: 95%;"></highcharts>
+    </div>
+  </div>
+</template>
+
+<script>
+import {Chart} from 'highcharts-vue'
+import HighCharts from 'highcharts'
+//和弦图的引入依赖
+import HC_sankey from 'highcharts/modules/sankey';
+import dependencywheel from 'highcharts/modules/dependency-wheel';
+import { data } from 'jquery';
+HC_sankey(HighCharts);
+dependencywheel(HighCharts);
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    data:{
+			type:Object,
+			default:()=>{}
+		}
+  },
+  data() {
+    return {
+      chartObj: null,
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        this.chartObj = Highcharts.chart('cateRank',this.data);
+      });
+			window.addEventListener("resize", () => {
+					this.chartObj.resize();
+      });
+    },
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.setChart();
+    })
+
+  },
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  /* background: #fff; */
+}
+</style>

src/components/pages/testPerson/portrait/eChartView.vue

@@ -0,0 +1,48 @@
+<template>
+	<div class="chart" id="charts_canvas" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+	props: {
+		data: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	data() {
+		return {
+			chartObj: null,
+			chartData: null,
+		};
+	},
+	watch: {
+		data() {
+			this.getChartData();
+		},
+	},
+	methods: {
+		getChartData() {
+			this.chartObj = echarts.init(this.$refs.chartRef);
+			this.chartObj.setOption(this.data);
+			window.addEventListener("resize", () => {
+					this.chartObj.resize();
+      });
+		},
+	},
+	mounted() {
+		// this.$nextTick(()=>{
+			this.getChartData();
+		// })
+	},
+};
+</script>
+
+<style scoped>
+.chart {
+	max-width: 100%;
+	width: 100%;
+	height: 100%;
+}
+</style>

src/components/pages/testPerson/portrait/index.vue

@@ -0,0 +1,873 @@
+<template>
+  <div class="portrait">
+    <div class="p_left">
+      <div class="p_l_top">
+        <div class="teachingActivity" v-loading="cardNumLoading">
+          <div>
+            <span>教学活动</span>
+            <el-tooltip
+              class="item"
+              effect="light"
+              content="教学活动"
+              placement="top"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.50562 11.9998V6.5H8.50562V11.9998H7.50562Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+                <path
+                  d="M8.59985 4H7.3999V5.19995H8.59985V4Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+                <path
+                  d="M1 8C1 11.866 4.13403 15 8 15C11.866 15 15 11.866 15 8C15 4.13403 11.866 1 8 1C4.13403 1 1 4.13403 1 8ZM2 8C2 4.68628 4.68628 2 8 2C11.3137 2 14 4.68628 14 8C14 11.3137 11.3137 14 8 14C4.68628 14 2 11.3137 2 8Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+              </svg>
+            </el-tooltip>
+          </div>
+          <span style="color: #3681FC;">{{ teachingActivityNum }}</span>
+        </div>
+        <div class="teachingAndResearchActivities" v-loading="cardNumLoading">
+          <div>
+            <span>教研活动</span>
+            <el-tooltip
+              class="item"
+              effect="light"
+              content="教研活动"
+              placement="top"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.50562 11.9998V6.5H8.50562V11.9998H7.50562Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+                <path
+                  d="M8.59985 4H7.3999V5.19995H8.59985V4Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+                <path
+                  d="M1 8C1 11.866 4.13403 15 8 15C11.866 15 15 11.866 15 8C15 4.13403 11.866 1 8 1C4.13403 1 1 4.13403 1 8ZM2 8C2 4.68628 4.68628 2 8 2C11.3137 2 14 4.68628 14 8C14 11.3137 11.3137 14 8 14C4.68628 14 2 11.3137 2 8Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+              </svg>
+            </el-tooltip>
+          </div>
+          <span style="color: #F2873B;">{{
+            teachingAndResearchActivitiesNum
+          }}</span>
+        </div>
+        <div
+          class="trainingActivity"
+          v-show="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'"
+          v-loading="cardNumLoading"
+        >
+          <div>
+            <span>培训活动</span>
+            <el-tooltip
+              class="item"
+              effect="light"
+              content="培训活动"
+              placement="top"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.50562 11.9998V6.5H8.50562V11.9998H7.50562Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+                <path
+                  d="M8.59985 4H7.3999V5.19995H8.59985V4Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+                <path
+                  d="M1 8C1 11.866 4.13403 15 8 15C11.866 15 15 11.866 15 8C15 4.13403 11.866 1 8 1C4.13403 1 1 4.13403 1 8ZM2 8C2 4.68628 4.68628 2 8 2C11.3137 2 14 4.68628 14 8C14 11.3137 11.3137 14 8 14C4.68628 14 2 11.3137 2 8Z"
+                  fill="black"
+                  fill-opacity="0.4"
+                />
+              </svg>
+            </el-tooltip>
+          </div>
+          <span style="color: #31B476;">{{ teachingActivityNum }}</span>
+        </div>
+      </div>
+      <div class="p_l_bottom">
+        <div class="p_title">
+          <span>教研活动</span>
+        </div>
+        <div class="p_eCharts" v-loading="eChartsLoading">
+          <eChartView
+            :data="teachingAndResearchActivitiesECharts"
+            v-if="!eChartsLoading"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="p_center"
+      v-if="ExamineBase.length > 0"
+      v-loading="annualAssessmentLoading"
+    >
+      <div class="p_title">
+        <span>年度考核</span>
+        <div>
+          <el-button-group>
+            <el-button
+              @click="changeAnnualAssessmentStatus(2)"
+              :type="annualAssessmentStatus === 2 ? 'primary' : ''"
+              >专任教师</el-button
+            >
+            <el-button
+              @click="changeAnnualAssessmentStatus(1)"
+              :type="annualAssessmentStatus === 1 ? 'primary' : ''"
+              >班主任</el-button
+            >
+          </el-button-group>
+        </div>
+      </div>
+      <div class="p_eCharts" v-if="!annualAssessmentLoading">
+        <eChartView
+          ref="annualAssessmentEChartsRef"
+          :data="annualAssessmentECharts"
+        />
+      </div>
+    </div>
+    <div class="p_right">
+      <div class="p_r_top">
+        <div class="p_title">
+          <span>教学活动</span>
+        </div>
+        <div class="p_eCharts" v-loading="eChartsLoading">
+          <eChartView :data="teachingActivityECharts" v-if="!eChartsLoading" />
+        </div>
+      </div>
+      <div class="p_r_bottom">
+        <div class="p_title">
+          <span>跨学科情况</span>
+        </div>
+        <div class="p_eCharts" v-loading="eChartsLoading">
+          <chordDiagramView
+            :data="interdisciplinarySituationECharts"
+            v-if="!eChartsLoading"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import eChartView from "./eChartView.vue";
+import chordDiagramView from "./chordDiagramView.vue";
+
+var OpenCC = require("opencc-js");
+let converter = OpenCC.Converter({
+  from: "hk",
+  to: "cn"
+});
+export default {
+  components: {
+    eChartView,
+    chordDiagramView
+  },
+  props: {
+    ExamineBase: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      teachingActivityNum: 0,
+      teachingAndResearchActivitiesNum: 0,
+      trainingActivityNum: 0,
+      cardNumLoading: true,
+      eChartsLoading: true,
+      annualAssessmentStatus: 2, //2专任教师 1班主任
+      teachingAndResearchActivitiesEChartsLoading: true,
+      teachingAndResearchActivitiesECharts: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: { type: "shadow" }
+        },
+        legend: {
+          data: ["我发布的", "我收到的"],
+          bottom: 0,
+          orient: "horizontal",
+          left: "center"
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "10%",
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["评论次数", "评课次数", "字数", "语音数"]
+          }
+        ],
+        yAxis: [
+          {
+            type: "value"
+          }
+        ],
+        series: []
+      },
+      annualAssessmentLoading: true,
+      annualAssessmentECharts: {
+        legend: {
+          data: ["自评得分率", "认定得分率", "全体教师平均得分率"],
+          bottom: 0
+        },
+        radar: {
+          // shape: 'circle',
+          indicator: []
+        },
+        series: [
+          {
+            name: "",
+            type: "radar",
+            data: []
+          }
+        ]
+      },
+      teachingActivityECharts: {
+        tooltip: {
+          trigger: "item"
+        },
+        // legend: {
+        //   orient: "vertical",
+        //   right: "5%",
+        //   top: "center",
+        //   itemGap: 20
+        // },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: true,
+              position: "outside",
+              formatter: "{b}: {c}"
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: "20",
+                fontWeight: "bold"
+              }
+            },
+            labelLine: {
+              show: true,
+              length: 15,
+              length2: 10
+            },
+            data: []
+          }
+        ]
+      },
+      interdisciplinarySituationECharts: {
+        title: {
+          text: null
+        },
+        chart: {
+          backgroundColor: "rgba(0,0,0,0)"
+        },
+        credits: {
+          enabled: false //不显示LOGO
+        },
+        tooltip: {
+          formatter: function() {
+            // 自定义弹窗内容的回调函数
+            var point = this.point;
+            if (point.from) {
+              var tooltipText =
+                "<b>" +
+                point.from +
+                "</b> - <b>" +
+                point.to +
+                "</b>: " +
+                point.weight;
+              return tooltipText;
+            } else {
+              var tooltipText = "<b>" + point.name + "</b>: " + point.sum;
+              return tooltipText;
+            }
+          }
+        },
+        series: [
+          {
+            keys: ["from", "to", "weight"],
+            data: [],
+            type: "dependencywheel",
+            name: "",
+            dataLabels: {
+              color: "#333",
+              textPath: {
+                enabled: true,
+                attributes: {
+                  dy: 5
+                }
+              },
+              distance: 10
+            },
+            size: "95%"
+          }
+        ]
+      },
+      userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      teacherName: ""
+    };
+  },
+  methods: {
+    changeAnnualAssessmentStatus(status) {
+      if (this.annualAssessmentLoading) return;
+      this.annualAssessmentStatus = status;
+      this.getAnnualAssessmentEChartsData();
+    },
+    getAnnualAssessmentEChartsData() {
+      this.annualAssessmentLoading = true;
+      let params = [
+        {
+          oid: this.oid,
+          org: this.org,
+          type: this.annualAssessmentStatus,
+          tname: this.teacherName
+        }
+      ];
+      // console.log(params);
+      this.ajax
+        .post(this.$store.state.api + "selectTestExaminePersonData2", params)
+        .then(res => {
+          let data = res.data[0];
+
+          data.forEach(e => {
+            e.json = JSON.parse(e.json);
+          });
+
+          data.forEach(e => {
+            e.evaSca = 0;
+            e.cogSco = 0;
+            e.step = 0;
+            e.allStep = 0;
+
+            e.json.forEach(i => {
+              i.evaScore = 0; // 自评
+              i.cogScore = 0; //考核
+              i.score = 0; //考核
+              i.children.forEach(k => {
+                e.evaSca = e.evaSca + k.sco1 * 1;
+                e.cogSco = e.cogSco + k.sco2 * 1;
+                i.evaScore = i.evaScore + k.sco1 * 1;
+                i.cogScore = i.cogScore + k.sco2 * 1;
+                i.score = i.score + k.score * 1;
+                e.allStep++;
+                if (!!k.sco2 * 1) {
+                  e.step++;
+                }
+              });
+            });
+          });
+
+          data.forEach(e => {
+            if (e.step == e.allStep) {
+              e.state = "已完成";
+            } else {
+              e.state = "未完成";
+            }
+            if (!e.tea) {
+              e.tea = "";
+            }
+            e.evaSca = e.evaSca.toFixed(0);
+            e.cogSco = e.cogSco.toFixed(0);
+          });
+          let _data = [];
+          let zongJson = {};
+          // zongJson.count = data.length
+          data.forEach((e, index) => {
+            _data[index] = {};
+            _data[index].username = e.username;
+            _data[index].evaSca = e.evaSca;
+            _data[index].cogSco = e.cogSco;
+            _data[index].json = [];
+
+            e.json.forEach((i, iindex) => {
+              if (
+                converter(i.name) == converter("科组评价") ||
+                converter(i.name) == converter("行政巡查")
+              ) {
+                return;
+              }
+              _data[index].json[iindex] = {};
+              _data[index].json[iindex].name = i.name;
+              let _evaScore = parseInt(
+                (i.evaScore * (100 / i.score)).toFixed(0)
+              );
+              let _cogScore = parseInt(
+                (i.cogScore * (100 / i.score)).toFixed(0)
+              );
+
+							// let _ideScore = parseInt(
+							// 	(i.score * (100 / i.score)).toFixed(0)
+							// );
+              _data[index].json[iindex].evaScore = _evaScore; // 自评
+              _data[index].json[iindex].cogScore = _cogScore; // 考核
+              zongJson[i.name] ? "" : (zongJson[i.name] = {});
+              zongJson[i.name].evaScore // 全体教师自评平均得分
+                ? (zongJson[i.name].evaScore += _evaScore)
+                : (zongJson[i.name].evaScore = _evaScore);
+              zongJson[i.name].cogScore // 全体教师考核平均得分
+                ? (zongJson[i.name].cogScore += _cogScore)
+                : (zongJson[i.name].cogScore = _cogScore);
+							if(e.userid == this.userid){
+								zongJson[i.name].selfEvaScore = _evaScore;
+								zongJson[i.name].selfCogScore = _cogScore;
+							}
+            });
+          });
+          let zongArray = Object.keys(zongJson);
+          for (var i = 0; i < zongArray.length; i++) {
+            zongJson[zongArray[i]].evaScore = (
+              zongJson[zongArray[i]].evaScore / data.length
+            ).toFixed(0);
+            zongJson[zongArray[i]].cogScore = (
+              zongJson[zongArray[i]].cogScore / data.length
+            ).toFixed(0);
+          }
+
+          this.annualAssessmentECharts.radar.indicator = Object.keys(
+            zongJson
+          ).map(item => {
+            return { name: item, max: 100 };
+          });
+
+          let _eChartsData = [
+            {
+              value: [],
+              name: "自评得分率",
+              label: {
+                show: true,
+                formatter: `{c}`,
+                fontSize: 12
+              }
+            },
+            {
+              value: [],
+              name: "认定得分率",
+              label: {
+                show: true,
+                formatter: `{c}`,
+                fontSize: 12
+              }
+            },
+            {
+              value: [],
+              name: "全体教师平均得分率",
+              label: {
+                show: true,
+                formatter: `{c}`,
+                fontSize: 12
+              }
+            }
+          ];
+					
+					let person = data.find(i=>i.userid == this.userid);
+					console.log('person',person);
+          zongArray.forEach(i => {
+						_eChartsData[0].value.push(zongJson[i].selfEvaScore);
+						_eChartsData[2].value.push(zongJson[i].selfCogScore);
+						_eChartsData[1].value.push(zongJson[i].cogScore)
+            // _eChartsData[0].value.push(zongJson[i].selfScore);
+            // _eChartsData[1].value.push(zongJson[i].evaScore);
+            // _eChartsData[2].value.push(zongJson[i].cogScore);
+          });
+					console.log(data)
+					console.log(zongJson)
+						console.log(_eChartsData)
+          this.annualAssessmentECharts.series[0].data = _eChartsData;
+          // this.$refs.annualAssessmentEChartsRef.setChart();
+          this.annualAssessmentLoading = false;
+        })
+        .catch(error => {
+          this.annualAssessmentLoading = false;
+          console.log(error);
+        });
+    },
+    getCardData() {
+      this.cardNumLoading = true;
+      let params = {
+        uid: this.userid,
+        oid: this.oid,
+        org: this.org
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTestUserY", params)
+        .then(res => {
+          (this.teachingActivityNum = res.data[4].length),
+            (this.teachingAndResearchActivitiesNum = res.data[5].length);
+          this.trainingActivityNum = res.data[3].length;
+          this.cardNumLoading = false;
+        })
+        .catch(err => {
+          this.cardNumLoading = false;
+          console.error(err);
+        });
+    },
+    getData() {
+      this.eChartsLoading = true;
+      let params = {
+        uid: this.userid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectPortraitData", params)
+        .then(res => {
+          let array1 = res.data[0];
+          let array2 = res.data[1];
+          let array3 = res.data[2];
+          let typeList = res.data[3];
+
+          let countCourse1 = [];
+          let wordCount1 = 0;
+          let audioCount1 = 0;
+          let courseArray1 = {};
+          let countCourse2 = [];
+          let wordCount2 = 0;
+          let audioCount2 = 0;
+          let courseArray2 = {};
+          // 我发布的
+          array1.forEach(element => {
+            if (!courseArray1[element.courseId]) {
+              courseArray1[element.courseId] = {
+                bool: false,
+                title: element.title,
+                type: element.type2,
+                name: element.creator,
+                array: []
+              };
+            }
+            courseArray1[element.courseId].array.push(element);
+            if (countCourse1.indexOf(element.courseId) == -1) {
+              countCourse1.push(element.courseId);
+            }
+            if (element.type == 1) {
+              wordCount1 += element.content.replace(/<[^>]+>/g, "").length;
+            }
+            if (element.type == 2) {
+              audioCount1++;
+            }
+          });
+
+          //我收到的
+          array2.forEach(element => {
+            if (!courseArray2[element.courseId]) {
+              courseArray2[element.courseId] = {
+                bool: false,
+                title: element.title,
+                type: element.type2,
+                name: element.creator,
+                array: []
+              };
+            }
+            courseArray2[element.courseId].array.push(element);
+            if (countCourse2.indexOf(element.courseId) == -1) {
+              countCourse2.push(element.courseId);
+            }
+            if (element.type == 1) {
+              wordCount2 += element.content.replace(/<[^>]+>/g, "").length;
+            }
+            if (element.type == 2) {
+              audioCount2++;
+            }
+          });
+
+          //2 1 3 4
+          let _eChartsData = [
+            {
+              name: "我发布的",
+              type: "bar",
+              data: [
+                array1.length,
+                countCourse1.length,
+                wordCount1,
+                audioCount1
+              ],
+              itemStyle: {
+                color: "#5470c6"
+              }
+            },
+            {
+              name: "我收到的",
+              type: "bar",
+              data: [
+                array2.length,
+                countCourse2.length,
+                wordCount2,
+                audioCount2
+              ],
+              itemStyle: {
+                color: "#91cc75"
+              }
+            }
+          ];
+
+          let _eChartsData2 = [];
+					let _eChartsData3 = [];
+          typeList.forEach(item => {
+            _eChartsData2.push({ value: 0, name: item.name, id: item.id });
+          });
+          array3.forEach(item => {
+            let type = item.type.split(",");
+						type.sort((a,b)=>a-b);
+            type.forEach(i => {
+              let _findIndex = _eChartsData2.findIndex(j => j.id == i);
+              if (_findIndex != -1) {
+                _eChartsData2[_findIndex].value += 1;
+              }
+            });
+          });
+
+          let resultSubject = [];
+          for (let i = 0; i < typeList.length - 1; i++) {
+            for (let j = i + 1; j < typeList.length; j++) {
+              resultSubject.push({
+                id: [typeList[i].id, typeList[j].id],
+                name: [typeList[i].name, typeList[j].name],
+                count: 0,
+              });
+            }
+          }
+
+          for (var i = 0; i < array3.length; i++) {
+            let array = array3[i].type.split(",");
+            for (var j = 0; j < resultSubject.length; j++) {
+              if (this.checkArrayInclusion(resultSubject[j].id, array)) {
+                resultSubject[j].count++;
+              }
+            }
+          }
+
+          let resultSubject2 = [];
+
+          for (var i = 0; i < resultSubject.length; i++) {
+            let el = resultSubject[i];
+            if (el.count > 0) {
+              resultSubject2.push([el.name[0], el.name[1], el.count]);
+            }
+          }
+					_eChartsData3 = resultSubject.filter(i=>i.count!==0).map(i=>([i.name[0],i.name[1],i.count]));
+					console.log(_eChartsData3)
+          _eChartsData2 = _eChartsData2.filter(i => i.value != 0);
+          this.teachingActivityECharts.series[0].data = _eChartsData2;
+          this.teachingAndResearchActivitiesECharts.series = _eChartsData;
+					this.interdisciplinarySituationECharts.series[0].data = _eChartsData3;
+          this.eChartsLoading = false;
+        })
+        .catch(err => {
+          this.eChartsLoading = false;
+          console.error(err);
+        });
+    },
+		checkArrayInclusion(arr1, arr2) {
+      return arr1.every((item) => arr2.includes(item));
+    },
+  },
+  mounted() {
+    this.getAnnualAssessmentEChartsData();
+    this.getData();
+    this.getCardData();
+  }
+};
+</script>
+
+<style scoped>
+.portrait {
+  width: 100%;
+  height: calc(100% - 20px);
+  margin: 10px 0;
+  display: flex;
+  overflow: auto;
+}
+
+.portrait > div {
+  margin: 0 10px;
+  /* background-color: #fff; */
+  border-radius: 5px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.p_left {
+  width: 28.5%;
+  display: flex;
+  flex-direction: column;
+  background-color: none;
+
+}
+
+.p_l_top {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.p_l_top > div {
+  flex: 1;
+  border-radius: 5px;
+  /* margin: 10px 0; */
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 30px;
+  position: relative;
+}
+
+.p_l_top > div > div {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.p_l_top > div > div > span {
+  font-size: 22px;
+  /* font-weight: bold; */
+}
+
+.p_l_top > div > div > svg {
+  width: 20px;
+  height: 20px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.p_l_top > div > span {
+  font-size: 2.6em;
+  font-weight: bold;
+}
+
+.p_l_top > div:not(:first-child):not(:last-child) {
+  margin: 20px 0;
+}
+
+.teachingActivity {
+  background: linear-gradient(
+    290deg,
+    rgba(231, 238, 254, 0.1) 0%,
+    #e7eefe 100%
+  );
+}
+
+.teachingAndResearchActivities {
+  background: linear-gradient(
+    290deg,
+    rgba(243, 254, 231, 0.1) 0%,
+    #fef2e7 100%
+  );
+}
+
+.trainingActivity {
+  background: linear-gradient(
+    290deg,
+    rgba(231, 254, 251, 0.1) 0%,
+    #e7feef 100%
+  );
+}
+
+.p_l_bottom {
+  flex: 1;
+  margin-top: 20px;
+  border-radius: 5px;
+  background-color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.p_center {
+  width: calc(100% - 57%);
+  background-color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+}
+
+.p_right {
+  width: 28.5%;
+  display: flex;
+  flex-direction: column;
+}
+
+.p_r_top {
+  flex: 1;
+  background-color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+
+.p_r_bottom {
+  flex: 1;
+  background-color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  margin-top: 20px;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+
+.p_title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.p_title > span {
+  font-size: 28px;
+}
+
+.p_eCharts {
+  width: 100%;
+  flex: 1;
+  margin-top: 10px;
+}
+</style>

src/components/pages/testPerson/test/index.vue

@@ -1,6 +1,194 @@
 <template>
   <div class="i_body">
-    <div class="i_body_title">
+    <div class="i_b_left">
+      <div class="i_b_l_top">
+        <div @click="checkType(5)" :class="{ i_b_l_t_active: type == 5 }">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g id="prefixIcon" opacity="0.9">
+              <g id="Union">
+                <path
+                  d="M10 11.25C11.9192 11.25 13.475 9.69419 13.475 7.775C13.475 5.85581 11.9192 4.3 10 4.3C8.08081 4.3 6.525 5.85581 6.525 7.775C6.525 9.69419 8.08081 11.25 10 11.25ZM10 10C8.77117 10 7.775 9.00383 7.775 7.775C7.775 6.54617 8.77117 5.55 10 5.55C11.2288 5.55 12.225 6.54617 12.225 7.775C12.225 9.00383 11.2288 10 10 10Z"
+                  fill-opacity="0.9"
+                />
+                <path
+                  d="M10 18.75C14.8325 18.75 18.75 14.8325 18.75 10C18.75 5.16751 14.8325 1.25 10 1.25C5.16751 1.25 1.25 5.16751 1.25 10C1.25 14.8325 5.16751 18.75 10 18.75ZM16.2443 14.1557C14.3435 13.0956 12.2319 12.5 9.99997 12.5C7.76802 12.5 5.65649 13.0956 3.75564 14.1557C2.96238 12.9661 2.5 11.5371 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10C17.5 11.5371 17.0376 12.9662 16.2443 14.1557ZM15.454 15.1482C14.0867 16.5963 12.1489 17.5 10 17.5C7.85112 17.5 5.91332 16.5963 4.54593 15.1482C6.22562 14.247 8.06603 13.75 9.99997 13.75C11.9339 13.75 13.7743 14.247 15.454 15.1482Z"
+                  fill-opacity="0.9"
+                />
+              </g>
+            </g>
+          </svg>
+
+          <span>教师画像</span>
+        </div>
+        <div
+          @click="checkType(6)"
+          v-if="ExamineBase.length > 0"
+          :class="{ i_b_l_t_active: type == 6 }"
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14.0625 2.1875C11.9914 2.1875 10.3125 3.86643 10.3125 5.9375C10.3125 8.00857 11.9914 9.6875 14.0625 9.6875C16.1336 9.6875 17.8125 8.00857 17.8125 5.9375C17.8125 3.86643 16.1336 2.1875 14.0625 2.1875ZM11.5625 5.9375C11.5625 4.55679 12.6818 3.4375 14.0625 3.4375C15.4432 3.4375 16.5625 4.55679 16.5625 5.9375C16.5625 7.31821 15.4432 8.4375 14.0625 8.4375C12.6818 8.4375 11.5625 7.31821 11.5625 5.9375Z"
+            />
+            <path
+              d="M2.5 3.75C2.5 3.05964 3.05964 2.5 3.75 2.5H8.125C8.81536 2.5 9.375 3.05964 9.375 3.75V8.125C9.375 8.81536 8.81536 9.375 8.125 9.375H3.75C3.05964 9.375 2.5 8.81536 2.5 8.125V3.75ZM3.75 3.75V8.125H8.125V3.75H3.75Z"
+            />
+            <path
+              d="M2.5 11.875C2.5 11.1846 3.05964 10.625 3.75 10.625H8.125C8.81536 10.625 9.375 11.1846 9.375 11.875V16.25C9.375 16.9404 8.81536 17.5 8.125 17.5H3.75C3.05964 17.5 2.5 16.9404 2.5 16.25V11.875ZM3.75 11.875V16.25H8.125V11.875H3.75Z"
+            />
+            <path
+              d="M10.625 11.875C10.625 11.1846 11.1846 10.625 11.875 10.625H16.25C16.9404 10.625 17.5 11.1846 17.5 11.875V16.25C17.5 16.9404 16.9404 17.5 16.25 17.5H11.875C11.1846 17.5 10.625 16.9404 10.625 16.25V11.875ZM11.875 16.25H16.25V11.875H11.875V16.25Z"
+            />
+          </svg>
+
+          <span>年度考核</span>
+        </div>
+        <div @click="checkType(1)" :class="{ i_b_l_t_active: type == 1 }">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g id="prefixIcon">
+              <g id="Union">
+                <path d="M8.75 6.5625H5V5.3125H8.75V6.5625Z" />
+                <path
+                  d="M1.87531 3.12517C1.87521 2.77993 2.15506 2.5 2.50031 2.5H17.5003C17.8454 2.5 18.1252 2.77972 18.1253 3.12483L18.1265 8.74985C18.1266 9.0951 17.8467 9.37502 17.5015 9.37502H2.50149C2.15638 9.37502 1.87659 9.0953 1.87649 8.75019L1.87531 3.12517ZM3.12632 8.12502H16.8763L16.8755 3.75H3.12547L3.12632 8.12502Z"
+                />
+                <path d="M5.00014 14.6875H8.75014V13.4375H5.00014V14.6875Z" />
+                <path
+                  d="M1.87666 11.25C1.87666 10.9048 2.15648 10.625 2.50166 10.625H17.5017C17.8468 10.625 18.1267 10.9048 18.1267 11.25V16.875C18.1267 17.2202 17.8468 17.5 17.5017 17.5H2.50166C2.15648 17.5 1.87666 17.2202 1.87666 16.875V11.25ZM3.12666 16.25H16.8767V11.875H3.12666V16.25Z"
+                />
+              </g>
+            </g>
+          </svg>
+          <span>资料提交</span>
+        </div>
+        <div
+          @click="checkType(2)"
+          :class="{ i_b_l_t_active: type == 2 }"
+          v-show="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'"
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g id="prefixIcon" opacity="0.9">
+              <g id="Union">
+                <path d="M5.625 6.25H14.375V7.5H5.625V6.25Z" />
+                <path d="M11.25 9.375H5.625V10.625H11.25V9.375Z" />
+                <path
+                  d="M3.75 2.5C3.05964 2.5 2.5 3.05964 2.5 3.75V16.25C2.5 16.9404 3.05964 17.5 3.75 17.5H16.25C16.9404 17.5 17.5 16.9404 17.5 16.25V3.75C17.5 3.05964 16.9404 2.5 16.25 2.5H3.75ZM16.25 3.75V16.25H3.75L3.75 3.75H16.25Z"
+                />
+              </g>
+            </g>
+          </svg>
+
+          <span>培训活动</span>
+        </div>
+        <div @click="checkType(3)" :class="{ i_b_l_t_active: type == 3 }">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g id="Frame 52">
+              <path
+                id="Union"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M3.75 3.125C3.40482 3.125 3.125 3.40482 3.125 3.75V16.25C3.125 17.2855 3.96447 18.125 5 18.125H17.5C17.7949 18.125 18.0496 17.9189 18.1112 17.6306C18.1728 17.3423 18.0246 17.0502 17.7556 16.9297L17.7554 16.9296L17.75 16.9271L17.72 16.9127C17.6926 16.8994 17.6515 16.8788 17.6016 16.8518C17.5001 16.797 17.3689 16.7199 17.2415 16.6276C17.1106 16.5328 17.0049 16.4374 16.9373 16.3511C16.8936 16.2953 16.8802 16.2623 16.8763 16.25C16.8802 16.2377 16.8936 16.2047 16.9373 16.1489C17.0049 16.0626 17.1106 15.9672 17.2415 15.8724C17.3689 15.7801 17.5001 15.703 17.6016 15.6482C17.6515 15.6212 17.6926 15.6006 17.72 15.5873L17.7488 15.5735C17.7868 15.557 17.8228 15.5369 17.8564 15.5135C17.9102 15.4762 17.957 15.4312 17.9958 15.3805C18.0612 15.2955 18.1052 15.1931 18.1197 15.0815C18.1236 15.0518 18.1254 15.0217 18.125 14.9914V3.75C18.125 3.40482 17.8452 3.125 17.5 3.125H3.75ZM16.875 14.375V4.375H4.375V14.375H5H16.875ZM15.7904 15.625H5C4.65482 15.625 4.375 15.9048 4.375 16.25C4.375 16.5952 4.65482 16.875 5 16.875H15.7904C15.6955 16.6993 15.625 16.489 15.625 16.25C15.625 16.011 15.6955 15.8007 15.7904 15.625ZM5.625 8.125C5.625 7.77982 5.90482 7.5 6.25 7.5H11.25C11.5952 7.5 11.875 7.77982 11.875 8.125C11.875 8.47018 11.5952 8.75 11.25 8.75H6.25C5.90482 8.75 5.625 8.47018 5.625 8.125ZM6.25 10.625C5.90482 10.625 5.625 10.9048 5.625 11.25C5.625 11.5952 5.90482 11.875 6.25 11.875H9.375C9.72018 11.875 10 11.5952 10 11.25C10 10.9048 9.72018 10.625 9.375 10.625H6.25Z"
+              />
+            </g>
+          </svg>
+
+          <span>教学活动</span>
+        </div>
+        <div @click="checkType(4)" :class="{ i_b_l_t_active: type == 4 }">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g id="prefixIcon" opacity="0.9">
+              <g id="Union">
+                <path
+                  d="M17.6652 6.18811L13.611 2.13388L14.4948 1.25L18.5491 5.30422L17.6652 6.18811Z"
+                />
+                <path
+                  d="M7.46495 16.3885L2.94875 17.2917C2.68636 17.3442 2.45501 17.1129 2.50749 16.8505L3.41073 12.3343L12.5327 3.21227L16.587 7.2665L7.46495 16.3885ZM14.8192 7.2665L12.5327 4.98004L4.56223 12.9505L3.99062 15.8086L6.84869 15.237L14.8192 7.2665Z"
+                />
+                <path d="M18.75 13.75H13.75V15H18.75V13.75Z" />
+                <path d="M18.75 16.25H10.625V17.5H18.75V16.25Z" />
+              </g>
+            </g>
+          </svg>
+
+          <span>教研活动</span>
+        </div>
+
+        <!-- <span>更多</span>
+        <div :class="{ i_b_l_t_active: type == 7 }">
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10.5968 9.37499L7.78958 6.56776L8.67346 5.68388L12.636 9.64644C12.8313 9.8417 12.8313 10.1583 12.636 10.3535L8.67346 14.3161L7.78958 13.4322L10.5968 10.625L1.25 10.625L1.25 9.37497L10.5968 9.37499Z"
+            />
+            <path
+              d="M5.00007 6.25V3.75H15.0001V16.25H5.00007V13.75H3.75007V16.875C3.75007 17.2202 4.02989 17.5 4.37507 17.5H15.6251C15.9702 17.5 16.2501 17.2202 16.2501 16.875V3.125C16.2501 2.77982 15.9702 2.5 15.6251 2.5H4.37507C4.02989 2.5 3.75007 2.77982 3.75007 3.125V6.25H5.00007Z"
+            />
+          </svg>
+
+          <span>个人资料库</span>
+        </div> -->
+      </div>
+
+      <div class="i_b_l_bottom">
+        <span>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M14 4.5H2V3.5H14V4.5Z" fill-opacity="0.9" />
+            <path d="M14 8.5H2V7.5H14V8.5Z" fill-opacity="0.9" />
+            <path d="M2 12.5H14V11.5H2V12.5Z" fill-opacity="0.9" />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div class="i_b_right">
+      <portrait :ExamineBase="ExamineBase" v-if="type == 5" />
+      <Test :oid="oid" :userid="userid" v-if="type == 1"></Test>
+      <TrainCourse v-if="type == 2"></TrainCourse>
+      <Course v-if="type == 3"></Course>
+      <trActivity v-if="type == 4" :oid="oid" :userid="userid"></trActivity>
+      <examine v-if="type == 6"></examine>
+    </div>
+    <!-- <div class="i_body_title">
       <div class="title_box">
         <span @click="checkType(1)" :class="{active:type == 1}">资料提交</span>
         <span @click="checkType(2)" :class="{active:type == 2}"  v-show="oid == '4c686762-1d0a-11ed-8c78-005056b86db5'">培训活动</span>
@@ -8,42 +196,51 @@
         <span @click="checkType(4)" :class="{active:type == 4}">教研活动</span>
       </div>
       <div>
-        <!-- <el-button type="primary" class="bgColor" @click="returnA()">表单中心</el-button> -->
+       
       </div>
-    </div>
-    <Test :oid="oid" :userid="userid" v-if="type == 1"></Test>
+    </div> -->
+    <!-- <el-button type="primary" class="bgColor" @click="returnA()">表单中心</el-button> -->
+    <!-- <Test :oid="oid" :userid="userid" v-if="type == 1"></Test>
     <TrainCourse v-if="type == 2"></TrainCourse>
     <Course v-if="type == 3"></Course>
-    <trActivity v-if="type == 4" :oid="oid" :userid="userid"></trActivity>
+    <trActivity v-if="type == 4" :oid="oid" :userid="userid"></trActivity> -->
   </div>
 </template>
 
 <script>
-import Test from './test.vue'
-import TrainCourse from '../../trainCourse/index.vue'
-import Course from '../../course/index.vue'
-import trActivity from './trActivity.vue'
+import Test from "./test.vue";
+import TrainCourse from "../../trainCourse/index.vue";
+import Course from "../../course/index.vue";
+import trActivity from "./trActivity.vue";
+import examine from "../examine/index";
+import portrait from "../portrait/index";
 export default {
   props: {
     userid: {
-      type: String,
+      type: String
     },
     oid: {
-      type: String,
-    },
+      type: String
+    }
   },
   components: {
-    Test,TrainCourse,Course,trActivity
+    Test,
+    TrainCourse,
+    Course,
+    trActivity,
+    examine,
+    portrait
   },
   data() {
     return {
-      type:1
-    }
+      type: 5,
+      ExamineBase: []
+    };
   },
   computed: {
     getNum() {
-      return function (array) {
-        let _array = JSON.parse(array)
+      return function(array) {
+        let _array = JSON.parse(array);
         let num = 0;
         _array.forEach(el => {
           if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
@@ -51,27 +248,27 @@ export default {
               if (item.ttype == 2 && item.array.length > 0) {
                 item.array.forEach(item2 => {
                   if (item2.ttype == 1 && item2.json) {
-                    num++
+                    num++;
                   }
-                })
+                });
               } else if (item.ttype == 1 && item.json) {
-                num++
+                num++;
               }
-            })
+            });
           } else if (el.ttype == 1 && el.json) {
-            num++
+            num++;
           }
-        })
+        });
         return num;
       };
     },
     getScore() {
-      return function (array) {
+      return function(array) {
         // let _array = JSON.parse(array)
         let _score = 0;
         let scoreArray = [];
         for (var i = 0; i < array.length; i++) {
-          let _array = JSON.parse(array[i].courseJson)
+          let _array = JSON.parse(array[i].courseJson);
           let score = 0;
           for (var j = 0; j < _array.length; j++) {
             let el = _array[j];
@@ -82,30 +279,30 @@ export default {
                   for (var z = 0; z < item.array.length; z++) {
                     let item2 = item.array[k];
                     if (item2.ttype == 1 && item2.json && item2.json.score2) {
-                      score += parseInt(item2.json.score2)
+                      score += parseInt(item2.json.score2);
                     }
                   }
                 } else if (item.ttype == 1 && item.json && item.json.score2) {
-                  score += parseInt(item.json.score2)
+                  score += parseInt(item.json.score2);
                 }
               }
             } else if (el.ttype == 1 && el.json && el.json.score2) {
-              score += parseInt(el.json.score2)
+              score += parseInt(el.json.score2);
             }
           }
-          scoreArray.push(score)
+          scoreArray.push(score);
         }
         scoreArray.forEach(el => {
-          _score += el
-        })
-        console.log(scoreArray)
-        return (_score ? _score / scoreArray.length : 0);
+          _score += el;
+        });
+        console.log(scoreArray);
+        return _score ? _score / scoreArray.length : 0;
       };
     },
     getImg() {
-      return function (array) {
-        let _array = JSON.parse(array)
-        let _img = '';
+      return function(array) {
+        let _array = JSON.parse(array);
+        let _img = "";
         s: for (var j = 0; j < _array.length; j++) {
           let el = _array[j];
           if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
@@ -114,31 +311,49 @@ export default {
               if (item.ttype == 2 && item.array.length > 0) {
                 for (var z = 0; z < item.array.length; z++) {
                   let item2 = item.array[k];
-                  if (item2.ttype == 1 && item2.type == 5 && item2.json && item2.json.file && item2.json.file.length > 0) {
+                  if (
+                    item2.ttype == 1 &&
+                    item2.type == 5 &&
+                    item2.json &&
+                    item2.json.file &&
+                    item2.json.file.length > 0
+                  ) {
                     for (var k = 0; k < item2.json.file.length; k++) {
                       let ik = item2.json.file[k];
                       if (ik.type == 3) {
-                        _img = ik.url
+                        _img = ik.url;
                         break s;
                       }
                     }
                   }
                 }
-              } else if (item.ttype == 1 && item.type == 5 && item.json && item.json.file && item.json.file.length > 0) {
+              } else if (
+                item.ttype == 1 &&
+                item.type == 5 &&
+                item.json &&
+                item.json.file &&
+                item.json.file.length > 0
+              ) {
                 for (var k = 0; k < item.json.file.length; k++) {
                   let ik = item.json.file[k];
                   if (ik.type == 3) {
-                    _img = ik.url
+                    _img = ik.url;
                     break s;
                   }
                 }
               }
             }
-          } else if (el.ttype == 1 && el.type == 5 && el.json && el.json.file && el.json.file.length > 0) {
+          } else if (
+            el.ttype == 1 &&
+            el.type == 5 &&
+            el.json &&
+            el.json.file &&
+            el.json.file.length > 0
+          ) {
             for (var k = 0; k < el.json.file.length; k++) {
               let ik = el.json.file[k];
               if (ik.type == 3) {
-                _img = ik.url
+                _img = ik.url;
                 break s;
               }
             }
@@ -146,23 +361,23 @@ export default {
         }
         return _img;
       };
-    },
+    }
   },
   methods: {
     checkType(type) {
-      this.type = type
-      this.getWorks()
+      this.type = type;
+      this.getWorks();
     },
     selectTestType() {
       let params = {
-        oid: this.oid,
+        oid: this.oid
       };
       this.ajax
         .get(this.$store.state.api + "selectTestType", params)
-        .then((res) => {
+        .then(res => {
           this.typeArray = res.data[0];
         })
-        .catch((err) => {
+        .catch(err => {
           console.error(err);
         });
     },
@@ -170,14 +385,14 @@ export default {
       this.loading = true;
       let params = {
         uid: this.userid,
-        typeid: this.type,
+        typeid: this.type
       };
       this.ajax
         .get(this.$store.state.api + "getTestWorksPerson", params)
-        .then((res) => {
+        .then(res => {
           this.loading = false;
-          let array = res.data[0]
-          let array2 = res.data[1]
+          let array = res.data[0];
+          let array2 = res.data[1];
           // 用于存储归类后的数据的对象
           let worksArray = {};
 
@@ -195,20 +410,20 @@ export default {
               array: []
             };
           });
-          worksArray = Object.values(worksArray)
+          worksArray = Object.values(worksArray);
           worksArray.forEach(el => {
             array.forEach(el2 => {
               if (el.courseid == el2.courseid) {
                 el.array.push(el2);
               }
-            })
-          })
+            });
+          });
           // worksArray[item.courseid].array.push(item);
 
           this.worksArray = worksArray;
           this.$forceUpdate();
         })
-        .catch((err) => {
+        .catch(err => {
           this.loading = false;
           console.error(err);
         });
@@ -216,125 +431,241 @@ export default {
     returnA() {
       this.$router.push(
         "/testStudent?userid=" +
-        this.userid +
-        "&oid=" +
-        this.oid +
-        "&org=" +
-        this.org +
-        "&role=" +
-        this.role
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org +
+          "&role=" +
+          this.role
       );
     },
     checkTest(cid, tid) {
       this.$router.push(
         "/checkTest?cid=" +
-        cid +
-        "&tid=" +
-        tid +
-        "&userid=" +
-        this.userid +
-        "&oid=" +
-        this.oid +
-        "&org=" +
-        this.org +
-        "&type=3" +
-        "&role=" +
-        this.role
+          cid +
+          "&tid=" +
+          tid +
+          "&userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org +
+          "&type=3" +
+          "&role=" +
+          this.role
       );
     },
     doTest(cid, tid) {
       this.$router.push(
         "/doTest?cid=" +
-        cid +
-        "&tid=" +
-        tid +
-        "&userid=" +
-        this.userid +
-        "&oid=" +
-        this.oid +
-        "&org=" +
-        this.org +
-        "&type=3" +
-        "&role=" +
-        this.role
+          cid +
+          "&tid=" +
+          tid +
+          "&userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org +
+          "&type=3" +
+          "&role=" +
+          this.role
       );
     },
     doTest2(cid) {
       this.$router.push(
         "/doTest?cid=" +
-        cid +
-        "&userid=" +
-        this.userid +
-        "&oid=" +
-        this.oid +
-        "&org=" +
-        this.org +
-        "&type=3" +
-        "&role=" +
-        this.role
+          cid +
+          "&userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org +
+          "&type=3" +
+          "&role=" +
+          this.role
       );
     },
     copyTest(tid) {
-      let params = [{
-        tid: tid,
-        uid: this.userid,
-      }];
+      let params = [
+        {
+          tid: tid,
+          uid: this.userid
+        }
+      ];
       this.ajax
         .post(this.$store.state.api + "copyTestWorks", params)
-        .then((res) => {
+        .then(res => {
           this.$message.success("复制成功");
           this.getWorks();
         })
-        .catch((err) => {
+        .catch(err => {
           console.error(err);
         });
     },
     deleteTest(tid) {
-      let _this = this
+      let _this = this;
       _this
         .$confirm("确定删除此提交的表单么？", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
-          type: "warning",
+          type: "warning"
         })
         .then(() => {
-          let params = [{
-            tid: tid,
-          }];
+          let params = [
+            {
+              tid: tid
+            }
+          ];
           _this.ajax
             .post(_this.$store.state.api + "deleteTestCourseWorks", params)
-            .then((res) => {
+            .then(res => {
               _this.$message.success("删除成功");
               _this.getWorks();
             })
-            .catch((err) => {
+            .catch(err => {
               console.error(err);
             });
         })
         .catch(() => {
           return;
         });
+    },
+    getPageBase() {
+      let params = {
+        typ: 1,
+        org: this.org,
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTestExamineBase", params)
+        .then(res => {
+          this.ExamineBase = res.data[0];
+          // console.log("selectTestExamineBase", res.data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
 
-    }
   },
   mounted() {
     this.selectTestType();
-    this.getWorks()
-  },
-}
+    this.getWorks();
+    this.getPageBase();
+  }
+};
 </script>
 
 <style scoped>
 .i_body {
   width: 100%;
-  height: calc(100%);
+  height: 100%;
   /* background: #fff; */
-  border-radius: 5px;
-  padding: 20px 10px;
+  /* padding: 20px 10px; */
+  box-sizing: border-box;
+  background: #efeff0;
+  display: flex;
+}
+
+.i_b_left {
+  width: 400px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.i_b_l_top {
+  width: 100%;
+  height: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 20px;
+  overflow: auto;
+}
+
+.i_b_l_top > div {
+  width: 100%;
+  height: 40px;
+  background-color: #fff;
+  margin-bottom: 15px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px 0 10px;
+  cursor: pointer;
+  color: #00000099;
+  box-sizing: border-box;
+  transition: all 0.2s;
+}
+
+.i_b_l_top > div:hover {
+  background-color: #f5f7fa;
+}
+
+.i_b_l_top > div.i_b_l_t_active {
+  background-color: #3681fc;
+  color: #fff;
+}
+
+.i_b_l_top > div.i_b_l_t_active > svg {
+  fill: #fff;
+}
+
+.i_b_l_top > div > span {
+  font-size: 18px;
+}
+
+.i_b_l_top > div > svg {
+  width: 20px;
+  height: 20px;
+  fill: #00000099;
+  margin-right: 15px;
+  margin-left: 10px;
+}
+
+.i_b_l_top > span {
+  margin: 15px 0 15px 20px;
+  font-size: 16px;
+  color: #00000066;
+}
+
+.i_b_l_bottom {
+  width: 100%;
+  height: 80px;
   box-sizing: border-box;
-  background: #fbfbfb;
+  padding: 0 30px;
+  display: flex;
+  align-items: center;
+  border-top: solid 1px #e7e7e7;
+}
+
+.i_b_l_bottom > span {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
+
+.i_b_l_bottom > span > svg {
+  fill: #000000;
+  width: 100%;
+  height: 100%;
 }
 
+.i_b_right {
+  flex: 1;
+  overflow: auto;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+/* 
 .i_body_title {
   font-size: 20px;
   height: 30px;
@@ -358,5 +689,5 @@ export default {
 .i_body_title > .title_box span.active{
   border-bottom: 2px solid rgb(12 125 255);
     color: rgb(12 125 255);
-}
-</style>
+} */
+</style>

src/components/pages/testPerson/test/test.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="i_body_box">
         <div class="check_nav">
-            <div class="nav all" v-show="this.ExamineBase.length > 0" :class="{ active: type == '1' }" @click="checkType('1')">
+            <!-- <div class="nav all" v-show="this.ExamineBase.length > 0" :class="{ active: type == '1' }" @click="checkType('1')">
                 年度考核
-            </div>
+            </div> -->
             <div class="nav all" :class="{ active: type == '' }" @click="checkType('')">
                 全部
             </div>
@@ -22,7 +22,7 @@
             </div>
         </div>
         <div class="check_box" v-loading="loading">
-            <examine v-if="type==1"></examine>
+            <!-- <examine v-if="type==1"></examine> -->
             <div class="noneData"  v-if="!worksArray.length && type!=1" style="text-align: center; margin-top: 20px;">
                 暂无数据
             </div>
@@ -120,7 +120,7 @@
 </template>
 
 <script>
-import examine from '../examine/index'
+// import examine from '../examine/index'
 export default {
     props: {
         userid: {
@@ -131,7 +131,7 @@ export default {
         },
     },
     components:{
-        examine
+        // examine
     },
     data() {
         return {
@@ -656,8 +656,8 @@ export default {
 
 <style scoped>
 .i_body_box {
-    height: calc(100% - 30px);
-    padding: 30px 0 0;
+    height: calc(100% - 10px);
+    padding: 10px 0 0;
     box-sizing: border-box;
 }
 

src/components/pages/testPerson/test/trActivity.vue

@@ -184,10 +184,13 @@ export default {
 
 <style scoped>
 .i_body_box {
-    height: calc(100% - 15px);
-    padding: 15px 0 0;
+    height: calc(100% - 20px);
+    padding: 15px 15px;
     box-sizing: border-box;
+		margin-top: 10px;
+		border-radius: 5px;
     overflow: auto;
+		background-color: #fff;
 }