雷达图修改

src/components/pages/kindStudentEva/test/component/croColumnar.vue

@@ -34,6 +34,7 @@ export default {
         title: {
           text: '平均分' // 设置标题
         },
+        tooltip: {},
         color: ['#5CBDF3'], // 设置柱状图的颜色
         xAxis: {
           type: "category",
@@ -60,6 +61,7 @@ export default {
 <style scoped>
 .bar-chart {
   width: 100%;
+  min-width: 400px;
   height: 400px;
 }
 </style>

src/components/pages/kindStudentEva/test/component/fieldMap.vue

@@ -0,0 +1,320 @@
+<template>
+  <!-- 健康的 -->
+  <div>
+    <div
+      style="background-color: #fff;width: 100%;height: 100%;box-sizing: border-box; padding: 15px;"
+    >
+      <div style="margin: 20px 10px;">{{ tit }}领域综合表现</div>
+      <div class="content">
+        <div
+          style="display: flex;width: 100%;justify-content: space-between;box-sizing: border-box;padding: 10px;"
+        >
+          <div class="radarCss">
+            <verColumnar
+              ref="cro"
+              :verChartData="croData"
+              :verCategories="bomCategories"
+              :key="croData.toString()"
+            ></verColumnar>
+          </div>
+          <div class="radarCss">
+            <croColumnar
+              ref="cro"
+              :chartData="verData"
+              :categories="bomCategories"
+              :key="verData.toString()"
+            ></croColumnar>
+          </div>
+        </div>
+        <div
+          style="display: flex;justify-content: flex-start;width: 100%;margin-top: 10px;margin-left: 30px;"
+          v-if="fieldEvidence.length"
+        >
+          <div
+            :class="[proofIsShow ? 'proofCss' : 'proofCss2']"
+            @click="proofJudge"
+          >
+            {{ proofIsShow ? "关键证据" : "点击查看关联证据" }}
+          </div>
+          <div class="proofCells" v-if="proofIsShow">
+            <div
+              class="proofCell"
+              @click="proofBtn"
+              v-for="(i, index) in fieldEvidence"
+            >
+              {{ i.recordDate }}-{{ i.recordTit }}-观察笔记
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      title="健康记录"
+      :visible.sync="dialogVisible"
+      :before-close="handleClose"
+      center
+    >
+      <popTable
+        ref="popTab"
+        @handleClose="handleClose"
+        :userid="userid"
+        :year="year"
+        :tid="tid"
+      ></popTable>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import croColumnar from "./croColumnar";
+import verColumnar from "./verColumnar";
+import popTable from "./popTable";
+export default {
+  components: {
+    croColumnar,
+    verColumnar,
+    popTable
+  },
+  props: {
+    tit: {
+      type: String,
+      default: ""
+    },
+    tid: {
+      type: String,
+      default: ""
+    },
+    radarData: {
+      type: Object,
+      default: () => {}
+    },
+    userid: {
+      type: String,
+      default: ""
+    },
+    year: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      proofIsShow: false,
+      dialogVisible: false,
+      croData: [],
+      verData: [],
+      bomCategories: [],
+      fieldEvidence: []
+    };
+  },
+  watch: {
+    radarData(newVal, oldVal) {
+      console.log("newVal", newVal);
+      this.radarData = newVal;
+      this.CroMap();
+      this.verMap();
+      this.getEvidence();
+    }
+  },
+  mounted() {
+    // console.log(this.radarData);
+    this.CroMap();
+    this.verMap();
+    this.getEvidence();
+  },
+  methods: {
+    proofJudge() {
+      this.proofIsShow = !this.proofIsShow;
+    },
+    proofBtn() {
+      this.dialogVisible = true;
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    // 获取关键证据数据
+    getEvidence() {
+      // this.isLoading = true;
+      let params = {
+        uid: this.userid,
+        year: this.year,
+        txt: this.tid,
+        page: 1
+      };
+
+      this.ajax
+        .get(this.$store.state.api + "selectHealthRecord", params)
+        .then(res => {
+          // console.log("获取关键证据数据", res);
+          this.fieldEvidence = res.data[0];
+        }); //
+    },
+    // 横向柱状图
+    CroMap() {
+      this.bomCategories = [];
+      let raData = this.radarData;
+      let healthData = raData[this.tid];
+      healthData.forEach(e => {
+        this.bomCategories.push(e.sname);
+      });
+
+      let croMapData = [];
+      healthData.forEach(e => {
+        croMapData.push(e[e.id]);
+      });
+      // console.log("croMapData", croMapData);
+
+      this.croData = this.combineArrays(croMapData);
+      // console.log("newArr",newArr);
+    },
+    // 纵向柱状图
+    verMap() {
+      let raData = this.radarData;
+      let healthData = raData[this.tid];
+      let croMapData = [];
+      healthData.forEach(e => {
+        croMapData.push(e[e.id]);
+      });
+      //   console.log("croMapData", croMapData);
+      let app = [];
+      croMapData.forEach(e => {
+        let a = e.reduce((pre, next, index) => {
+          return pre + next;
+          //pre+next=10+5=15
+        }, 0);
+        app.push(a);
+      });
+      //   console.log(app);
+      this.verData = app.map(e => {
+        return (e / 3).toFixed(1);
+      });
+      //   console.log("this.verData", this.verData);
+      // this.healthCroData = this.combineArrays(croMapData);
+    },
+    // 数据相同下标相加组成一个新数组
+    combineArrays(arrays) {
+      const result = [];
+
+      // 获取数组中的最大长度
+      const maxLength = Math.max(...arrays.map(arr => arr.length));
+
+      // 遍历每个下标
+      for (let i = 0; i < maxLength; i++) {
+        const combinedItem = [];
+
+        // 遍历每个数组
+        for (let j = 0; j < arrays.length; j++) {
+          const array = arrays[j];
+
+          // 检查当前下标是否存在于数组中
+          if (i < array.length) {
+            const item = array[i];
+
+            // 将当前下标的字段添加到组合数组中
+            combinedItem.push(item);
+          }
+        }
+
+        // 将组合数组添加到结果数组中
+        result.push(combinedItem);
+      }
+
+      return result;
+    },
+
+    // 数组相加
+    addArrays(array1, array2) {
+      const result = [];
+
+      for (let i = 0; i < array2.length; i++) {
+        const sum = (array1[i] || 0) + array2[i];
+        result.push(sum);
+      }
+
+      return result;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.content {
+  width: 100%;
+  height: 553px;
+  flex-shrink: 0;
+  border-radius: 16px;
+  border: 1px solid var(--bg3, #e7e7e7);
+  background: #fff;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.conTitle {
+  width: 70%;
+  margin: 20px auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.txt {
+  flex: 1;
+  width: 712px;
+  height: 40px;
+  line-height: 40px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  background: #f0f2f5;
+  margin-left: 5px;
+  box-sizing: border-box;
+  padding: 0 15px;
+}
+.radarCss {
+  width: 45%;
+  height: 400px;
+}
+.proofCss {
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.9);
+  font-family: "Microsoft YaHei";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 0.7px;
+  margin-right: 20px;
+}
+.proofCss2 {
+  cursor: pointer;
+  width: 200px;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 4px 20px;
+  color: rgba(0, 0, 0, 0.9);
+  background-color: #f0f2f5;
+  font-family: "Microsoft YaHei";
+  border-radius: 3px;
+  font-size: 14px;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: 0.7px;
+  margin-right: 20px;
+}
+.proofCells {
+  width: 600px;
+
+  /* background-color: aqua; */
+  display: flex;
+  flex-wrap: wrap;
+}
+.proofCells > .proofCell {
+  width: 45%;
+  cursor: pointer;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+  padding: 10px 15px;
+  border-radius: 8px;
+  background: var(--bg, #f0f2f5);
+}
+</style>

src/components/pages/kindStudentEva/test/component/popTable.vue

@@ -62,7 +62,7 @@
     </el-pagination>
     <div style="width: 100%;display: flex;justify-content: center;">
       <div
-        style="box-sizing: border-box;padding: 10px 30px;background-color: #3681FC;color: #fff;border-radius: 10px;"
+        style="cursor: pointer; box-sizing: border-box;padding: 10px 30px;background-color: #3681FC;color: #fff;border-radius: 10px;"
         @click.stop="closeTab"
       >
         关闭
@@ -79,6 +79,9 @@ export default {
     },
     year: {
       type: String
+    },
+    tid: {
+      type: String
     }
   },
   data() {
@@ -101,7 +104,7 @@ export default {
       let params = {
         uid: this.userid,
         year: this.year,
-        txt: "c0f39c82-b34b-11ee-b534-005056b86db5",
+        txt: this.tid,
         page: this.page
       };
       console.log('获取数据params',params);

src/components/pages/kindStudentEva/test/component/radar.vue

@@ -30,7 +30,7 @@ export default {
     };
   },
   mounted() {
-    console.log('this.categories',this.categories);
+    // console.log('this.categories',this.categories);
     this.renderChart();
     this.$forceUpdate();
 
@@ -48,7 +48,7 @@ export default {
         value: values,
         name: this.bLeg[index].name
       }));
-      console.log("seriesData", seriesData);
+      // console.log("seriesData", seriesData);
       const option = {
         // title: {
         //   text: this.title

src/components/pages/kindStudentEva/test/diary.vue

@@ -68,6 +68,7 @@
         tooltip-effect="dark"
         style="width: 100%"
         border
+        v-loading="isLoading"
         header-align="center"
         :header-cell-style="{
           background: '#E0EAFB',
@@ -201,6 +202,8 @@ export default {
       VeidooList: [],
       VeidooJson: {},
       VeidooListChild: [],
+      isLoading : true,
+
       // 默认选择项
       // VeidooValue:{},
       // 默认选择项
@@ -327,6 +330,7 @@ export default {
     },
     // 获取数据
     getData() {
+      this.isLoading = true;
 
       let params = {
         uid: this.userid,
@@ -556,6 +560,7 @@ export default {
   box-sizing: border-box;
   padding: 15px;
   height: 100%;
+  overflow-y: scroll;
 }
 .top {
   width: 100%;

src/components/pages/kindStudentEva/test/report.vue

@@ -21,10 +21,10 @@
           </el-select>
         </div>
 
-        <div class="topBtnS">
+        <!-- <div class="topBtnS">
           <div class="btn">生成pdf</div>
           <div class="btn">分享报告</div>
-        </div>
+        </div> -->
       </div>
       <div style="margin: 20px 10px;">学期综合表现</div>
       <div
@@ -61,7 +61,43 @@
       <div></div>
     </div>
 
-    <div
+    <!-- 健康的 -->
+    <!-- :croData="healthCroData"
+        :verData="healthVerData"
+        :bomCategories="healthCategories" -->
+    <!-- :tit="'健康'"
+        :fieldEvidence="healthEvidence"
+        :bigType="1" -->
+
+    <div v-if="!isShow">
+      <div v-for="(i, index) in VeidooList" :key="i.id">
+        <fieldMap
+          :tid="i.id"
+          :tit="i.name"
+          :userid="userid"
+          :year="year"
+          :radarData="radarData"
+          :key="radarData.toString()"
+        ></fieldMap>
+      </div>
+    </div>
+
+    <!-- 艺术的 -->
+    <!-- :croData="healthCroData" :verData="healthVerData"
+    :bomCategories="healthCategories" -->
+    <!-- <div>
+      <fieldMap
+        :tit="'艺术'"
+        :fieldEvidence="healthEvidence"
+        :userid="userid"
+        :year="year"
+        :bigType="1"
+        :radarData="radarData"
+      ></fieldMap>
+    </div> -->
+
+    <!-- 健康的 -->
+    <!-- <div
       style="background-color: #fff;width: 100%;height: 100%;box-sizing: border-box; padding: 15px;"
     >
       <div style="margin: 20px 10px;">
@@ -83,13 +119,14 @@
             <croColumnar
               ref="cro"
               :chartData="healthVerData"
-              :categories="healthVerCategories"
+              :categories="healthCategories"
               :key="healthVerData.toString()"
             ></croColumnar>
           </div>
         </div>
         <div
           style="display: flex;justify-content: flex-start;width: 100%;margin-top: 10px;margin-left: 30px;"
+          v-if="healthEvidence.length"
         >
           <div
             :class="[proofIsShow ? 'proofCss' : 'proofCss2']"
@@ -108,8 +145,9 @@
           </div>
         </div>
       </div>
-    </div>
-    <el-dialog
+    </div> -->
+
+    <!-- <el-dialog
       title="健康记录"
       :visible.sync="dialogVisible"
       :before-close="handleClose"
@@ -121,7 +159,7 @@
         :userid="userid"
         :year="year"
       ></popTable>
-    </el-dialog>
+    </el-dialog> -->
     <!--  -->
   </div>
 </template>
@@ -130,14 +168,16 @@
 import radar from "./component/radar.vue";
 
 import croColumnar from "./component/croColumnar";
-import verColumnar from "./component/verColumnar";
+// import verColumnar from "./component/verColumnar";
 import popTable from "./component/popTable";
+import fieldMap from "./component/fieldMap";
 export default {
   components: {
     radar,
     croColumnar,
-    verColumnar,
-    popTable
+    // verColumnar,
+    popTable,
+    fieldMap
   },
   props: {
     userid: {
@@ -153,37 +193,46 @@ export default {
   data() {
     return {
       year: "",
+      // 学期数组
       termList: [],
-      dialogVisible: false,
+      // dialogVisible: false,
       // 平均分柱状图数据
-      croColumnarData: [50],
+      croColumnarData: [1],
 
       // 雷达图数据
       chartData: [], //数据
       categories: ["1"], //标签    雷达图与平均分共用
-      // categories: ["Series"],
-      // chartTitle: "My Radar Chart",
+
       value: "",
 
       VeidooList: [], //大分类
       VeidooJsonList: [], //小分类
 
       // 健康横向柱状图数据
-      healthCroData: [],
-      healthCategories: [],
-
-      healthVerCategories: [],
-      healthVerData: [],
+      // healthCroData: [],
+      // healthCategories: [], // 横纵两个共用
+      // // 健康纵向柱状图数据
+      // // healthVerCategories: [],
+      // healthVerData: [],
+      // // 关键证据数据
+      // healthEvidence: [],
+
+      // // 健康横向柱状图数据
+      // artCroData: [],
+      // artCategories: [],
+      // // 健康纵向柱状图数据
+      // artVerCategories: [],
+      // artVerData: [],
+      // // 关键证据数据
+      // healthEvidence: [],
 
-      // 关键证据数据
-      healthEvidence: [],
       // 后端获取的数据
-      radarData: [],
+      radarData: {},
 
       // 判断无数据的显示
       isShow: false,
       // 判断关键证据的显示
-      proofIsShow: false
+      // proofIsShow: false
     };
   },
   methods: {
@@ -192,13 +241,13 @@ export default {
       this.proofIsShow = !this.proofIsShow;
       // this.$refs.popTab.getDataTab()
     },
-    proofBtn() {
-      this.dialogVisible = true;
-    },
-    handleClose() {
-      // done()
-      this.dialogVisible = false;
-    },
+    // proofBtn() {
+    //   this.dialogVisible = true;
+    // },
+    // handleClose() {
+    //   // done()
+    //   this.dialogVisible = false;
+    // },
     //获取分类
     getVeidooType() {
       let params = {
@@ -256,7 +305,7 @@ export default {
           this.VeidooList = allfType;
           this.VeidooJsonList = VeidooJson;
 
-          // console.log("  allfType", allfType);
+          console.log("  allfType", allfType);
           // console.log("  allsType", allsType);
           // this.$forceUpdate();
 
@@ -276,10 +325,10 @@ export default {
           this.countCro();
 
           // 健康横向柱状图
-          this.healthCro();
+          // this.healthCro();
 
           // 健康纵向柱状图
-          this.healthVer(allfType);
+          // this.healthVer(allfType);
         })
         .catch(err => {
           this.isLoading = false;
@@ -322,64 +371,67 @@ export default {
       this.ajax
         .get(this.$store.state.api + "selectHealthRecord", params)
         .then(res => {
-          console.log("获取关键证据数据", res);
+          // console.log("获取关键证据数据", res);
           this.healthEvidence = res.data[0];
         }); //
     },
     // 获取打分数据
     getData() {
-      this.isLoading = true;
+      // this.isLoading = true;
 
       let params = {
         uid: this.userid,
         year: this.year
       };
-      console.log("params", params);
+      // console.log("params", params);
       this.ajax
         .get(this.$store.state.api + "selectMapStuScore", params)
         .then(res => {
-          this.isLoading = false;
-          if (res.data[0].length == 0) {
-            this.clearRadarData();
-            return;
-          }
+          // console.log("获取打分数据", res);
+
+          // this.isLoading = false;
+          // if (!res.data[0].length) {
+          //   this.clearRadarData();
+          //   return;
+          // }
 
           this.isShow = false;
-          console.log("获取数据", res);
           let data = res.data[0][0];
           // console.log(JSON.parse(data.json));
           this.radarData = JSON.parse(data.json);
+
+          console.log("this.radarData", this.radarData);
           this.getVeidooType();
-          this.getEvidence();
+          // this.getEvidence();
 
           // console.log(JSON.s);
           // this.$emit("selectData");
         });
     },
-    // 查询不到数据，清除内容
-    clearRadarData() {
-      this.isShow = true;
-      // 平均分柱状图数据
-      this.croColumnarData = [];
-
-      // 雷达图数据
-      this.chartData = []; //数据
-      this.categories = []; //标签    雷达图与平均分共用
-      // categories: ["Series"],
-      // chartTitle: "My Radar Chart",
-
-      this.VeidooList = []; //大分类
-      this.VeidooJsonList = []; //小分类
-
-      // 健康横向柱状图数据
-      this.healthCroData = [];
-      this.healthCategories = [];
-
-      // 关键证据数据
-      this.healthEvidence = [];
-      // 后端获取的数据
-      this.radarData = [];
-    },
+    // // 查询不到数据，清除内容
+    // clearRadarData() {
+    //   this.isShow = true;
+    //   // 平均分柱状图数据
+    //   this.croColumnarData = [];
+
+    //   // 雷达图数据
+    //   this.chartData = []; //数据
+    //   this.categories = []; //标签    雷达图与平均分共用
+    //   // categories: ["Series"],
+    //   // chartTitle: "My Radar Chart",
+
+    //   this.VeidooList = []; //大分类
+    //   this.VeidooJsonList = []; //小分类
+
+    //   // 健康横向柱状图数据
+    //   this.healthCroData = [];
+    //   this.healthCategories = [];
+
+    //   // 关键证据数据
+    //   this.healthEvidence = [];
+    //   // 后端获取的数据
+    //   this.radarData = {};
+    // },
 
     // 雷达图数据
     countRadar() {
@@ -413,11 +465,13 @@ export default {
           b = b + i[1];
           c = c + i[2];
         });
-        a = a / e.child2.length;
-        b = b / e.child2.length;
-        c = c / e.child2.length;
+        a = (a / e.child2.length).toFixed(1);
+        b =( b / e.child2.length).toFixed(1);
+        c = (c / e.child2.length).toFixed(1);
 
-        e.num.push(a, b, c);
+        // 综合的柱状图，使用的是雷达图的数据再加工的数据。
+        //toFixed会把数字转换成字符串，所以要转换成数字，不然柱状没法用
+        e.num.push(a*1, b*1, c*1);
         a = 0;
         b = 0;
         c = 0;
@@ -438,36 +492,15 @@ export default {
       // 平均分数柱状图数据----------
       let croMapData = [];
       this.chartData.forEach(e => {
-        // console.log(e);
+        console.log(e);
         croMapData = this.addArrays(croMapData, e);
       });
 
       this.croColumnarData = croMapData.map(function(item) {
-        return item / 3;
-      });
-    },
-    // 健康横向柱状图
-    healthCro() {
-      this.healthCategories = [];
-      this.healthCroData = [];
-      // console.log("数据？", this.radarData);
-      let raData = this.radarData;
-
-      let healthData = raData["c0f39c82-b34b-11ee-b534-005056b86db5"];
-      // console.log('healthData',healthData);
-      healthData.forEach(e => {
-        this.healthCategories.push(e.sname);
+        return (item / 3).toFixed(1);
       });
-
-      let croMapData = [];
-      healthData.forEach(e => {
-        croMapData.push(e[e.id]);
-      });
-      // console.log("croMapData", croMapData);
-
-      this.healthCroData = this.combineArrays(croMapData);
-      // console.log("newArr",newArr);
     },
+  
     // 数据相同下标相加组成一个新数组
     combineArrays(arrays) {
       const result = [];
@@ -498,39 +531,7 @@ export default {
 
       return result;
     },
-    // 健康纵向柱状图
-    healthVer() {
-      this.healthVerCategories = [];
-      this.healthVerData = [];
-      // console.log("数据？", this.radarData);
-      let raData = this.radarData;
 
-      let healthData = raData["c0f39c82-b34b-11ee-b534-005056b86db5"];
-      console.log("healthData", healthData);
-      healthData.forEach(e => {
-        this.healthVerCategories.push(e.sname);
-      });
-
-      let croMapData = [];
-      healthData.forEach(e => {
-        croMapData.push(e[e.id]);
-      });
-      console.log("croMapData", croMapData);
-      let app=[]
-      croMapData.forEach(e => {
-        let a = e.reduce((pre, next, index) => {
-          return pre + next;
-          //pre+next=10+5=15
-        },0);
-        app.push(a)
-      });
-      console.log(app);
-      this.healthVerData=app.map(e=>{
-        return e/3
-      })
-      console.log('this.healthVerData',this.healthVerData);
-      // this.healthCroData = this.combineArrays(croMapData);
-    },
     // 数组相加
     addArrays(array1, array2) {
       const result = [];

src/components/pages/kindStudentEva/test/score.vue

@@ -153,6 +153,8 @@ export default {
   methods: {
     searchStudentScore() {
       this.isLoading = true;
+      this.scoreType = [];
+      this.scoreJson = {};
       let params = {
         uid: this.userid,
         oid: this.oid,