幼儿园评价

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="bar-chart" ref="chart"></div>
+</template>
+
+<script>
+//   import echarts from 'echarts';
+
+export default {
+  name: "BarChart",
+  props: {
+    chartData: {
+      type: Array,
+      required: true
+    },
+    categories: {
+      type: Array,
+      required: true
+    }
+  },
+  mounted() {
+    this.renderChart();
+    var _this = this;
+    // window.addEventListener("resize", () => {
+    //     _this.renderChart();
+    // //  this.$forceUpdate();
+    // });
+  },
+  methods: {
+    renderChart() {
+      const chartContainer = this.$refs.chart;
+      const chart = this.$echarts.init(chartContainer);
+
+      const options = {
+        title: {
+          text: '平均分' // 设置标题
+        },
+        color: ['#5CBDF3'], // 设置柱状图的颜色
+        xAxis: {
+          type: "category",
+          data: this.categories
+        },
+        yAxis: {
+          type: "value",
+          max: "5"
+        },
+        series: [
+          {
+            data: this.chartData,
+            type: "bar"
+          }
+        ]
+      };
+
+      chart.setOption(options);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.bar-chart {
+  width: 100%;
+  height: 400px;
+}
+</style>

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

@@ -0,0 +1,202 @@
+<template>
+  <div class="popTable">
+    <!-- <div class="tit">
+      健康记录
+    </div> -->
+    <el-table
+      ref="multipleTable"
+      :data="tableData"
+      tooltip-effect="dark"
+      style="width: 100%"
+      border
+      header-align="center"
+      :header-cell-style="{
+        background: '#E0EAFB',
+        color: 'rgba(0, 0, 0, 0.90)'
+      }"
+    >
+      <el-table-column
+        prop="create_at"
+        label="创建时间"
+        align="center"
+        width="120"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="recordTit"
+        label="观察内容"
+        align="center"
+        width="120"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="place"
+        label="观察地点"
+        align="center"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="tname"
+        label="维度"
+        align="center"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="recordContent"
+        label="内容"
+        align="center"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      background
+      :page-size="4"
+      layout="prev, pager, next"
+      :total="total"
+      class="pagination"
+    >
+    </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;"
+        @click.stop="closeTab"
+      >
+        关闭
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    userid: {
+      type: String
+    },
+    year: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      //   txt: "c0f39c82-b34b-11ee-b534-005056b86db5",
+      // 表格数据
+      tableData: [],
+      // 总条数
+      total: 0,
+      // 当前页
+      page: 1
+    };
+  },
+  methods: {
+    closeTab() {
+      this.$emit("handleClose");
+    },
+    // 获取数据
+    getDataTab() {
+      let params = {
+        uid: this.userid,
+        year: this.year,
+        txt: "c0f39c82-b34b-11ee-b534-005056b86db5",
+        page: this.page
+      };
+      console.log('获取数据params',params);
+      this.ajax
+        .get(this.$store.state.api + "selectHealthRecord", params)
+        .then(res => {
+          console.log("获取关键证据数据popTable", res);
+          this.tableData = res.data[0];
+          this.total = res.data[1][0].total;
+        }); //
+    },
+    // 切换页
+    handleCurrentChange(val) {
+      //当页数发生改变的时候调用获取列表数据请求
+      // console.log(`当前页: ${val}`);
+      this.page = val;
+      this.getDataTab();
+    }
+  },
+  mounted() {
+    this.getDataTab();
+  }
+};
+</script>
+
+<style scoped>
+.popTable {
+  background-color: #fff;
+  width: 100%;
+  /* position: absolute; */
+  box-sizing: border-box;
+  padding: 15px;
+  /* top: 50%; */
+  /* left: 50%; */
+  /* transform: translate(-50%, -50%); */
+  /* box-shadow: 0 0 10px #ccc; */
+}
+/* 深度修改 */
+
+
+.tit {
+  width: 100%;
+  text-align: center;
+  margin: 20px 0;
+  color: rgba(0, 0, 0, 0.9);
+  text-align: center;
+  font-family: "Microsoft YaHei";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: bold;
+  line-height: 22px; /* 137.5% */
+}
+.dialog_diy {
+  box-sizing: border-box;
+  /* padding: 0 10px 10px 10px; */
+}
+.dialog_diy >>> .el-dialog {
+  /* height: 100%; */
+  margin: 10vh auto !important;
+}
+
+.dialog_diy >>> .el-dialog__header {
+  background: #454545 !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy >>> .el-dialog__body {
+  height: calc(100% - 124px);
+  box-sizing: border-box;
+  /* padding: 0px; */
+}
+
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: 20px;
+}
+</style>

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

@@ -1,128 +1,80 @@
 <template>
-  <div class="data_body">
-    <div style="width: 100%; height: 100%">
-      <div
-        ref="chartContainer"
-        class="echart"
-        style="width: 100%; height: 100%"
-      ></div>
-    </div>
-  </div>
+  <div ref="chart" style="width: 100%; height: 400px;"></div>
 </template>
 
 <script>
+import * as echarts from "echarts";
+
 export default {
+  name: "RadarChart",
   props: {
-    workNumList: {
-      type: Array
+    chartData: {
+      type: Array,
+      default: () => []
+    },
+    categories: {
+      type: Array,
+      default: () => []
     }
+
+    // title: {
+    //   type: String,
+    //   default: 'Radar Chart'
+    // }
   },
   data() {
-    return {};
+    return {
+      bLeg: [{ name: "第一次评估" }, { name: "第二次评估" }, { name: "第三次评估" }],
+      // bLeg: ["开学", "期中", "期末"],
+      chartObj:null
+    };
   },
-  methods: {},
   mounted() {
-    // 假设已经在Vue上挂载了echarts实例，命名为this.$echarts
-    const chart = this.$echarts.init(this.$refs.chartContainer);
+    console.log('this.categories',this.categories);
+    this.renderChart();
+    this.$forceUpdate();
 
-    // 数据示例
-    const dataSeries = [
-      {
-        name: "Series 1",
-        data: [
-          { name: "Category 1", value: 80 },
-          { name: "Category 2", value: 50 },
-          { name: "Category 3", value: 60 },
-          { name: "Category 4", value: 70 },
-          { name: "Category 5", value: 90 }
-        ],
-        lineStyle: {
-          width: 2,
-          color: "#0080FF"
-        }
-      },
-      {
-        name: "Series 2",
-        data: [
-          { name: "Category 1", value: 60 },
-          { name: "Category 2", value: 70 },
-          { name: "Category 3", value: 80 },
-          { name: "Category 4", value: 50 },
-          { name: "Category 5", value: 70 }
-        ],
-        lineStyle: {
-          width: 2,
-          color: "#FF0000"
-        }
-      },
-      {
-        name: "Series 3",
-        data: [
-          { name: "Category 1", value: 20 },
-          { name: "Category 2", value: 20 },
-          { name: "Category 3", value: 20 },
-          { name: "Category 4", value: 20 },
-          { name: "Category 5", value: 20 }
-        ],
-        lineStyle: {
-          width: 2,
-          color: "green"
-        }
-      }
-    ];
-
-    // 配置选项
-    const option = {
-      legend: {
-        data: dataSeries.map(series => series.name)
-      },
-      radar: {
-        indicator: dataSeries[0].data.map(item => ({
-          text: item.name,
-          max: 100
-        }))
-      },
-      series: dataSeries.map(series => ({
-        name: series.name,
-        type: "radar",
-        data: [
+    var _this = this;
+    // window.addEventListener("resize", () => {
+    //   _this.renderChart();
+    // //  this.$forceUpdate();
+    // });
+  },
+ 
+  methods: {
+    renderChart() {
+      this.chartObj = this.$echarts.init(this.$refs.chart);
+      const seriesData = this.chartData.map((values, index) => ({
+        value: values,
+        name: this.bLeg[index].name
+      }));
+      console.log("seriesData", seriesData);
+      const option = {
+        // title: {
+        //   text: this.title
+        // },
+        // hover状态
+        tooltip: {},
+        legend: {
+          data: this.bLeg.map(series => series.name),
+          bottom: 0 // 将图例显示在底部
+        },
+        // 标签渲染
+        radar: {
+          indicator: this.categories.map(category => ({
+            name: category,
+            max: 5
+          }))
+        },
+        series: [
           {
-            value: series.data.map(item => item.value),
-            areaStyle: {
-              opacity: 0.5
-            },
-            lineStyle: series.lineStyle,
-            label: {
-              show: true,
-              formatter: "{c}",
-              fontSize: 12,
-              color: "#000"
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 14
-              }
-            }
+            type: "radar",
+            data: seriesData
           }
         ]
-      }))
-    };
-
-    // 设置选项并渲染雷达图
-    chart.setOption(option);
+      };
+      this.chartObj.setOption(option);
+    }
   }
 };
 </script>
-
-<style scoped>
-.data_body {
-  height: 100%;
-  position: relative;
-  border-radius: 5px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 0;
-  width: 100%;
-}
-</style>

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

@@ -0,0 +1,71 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script>
+// import echarts from "echarts";
+
+export default {
+  name: "BarChart",
+  props: {
+    verChartData: {
+      type: Array,
+      required: true
+    },
+    verCategories: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+        bLeg: [ "第一次评估" ,  "第二次评估" ,  "第三次评估" ],
+    }
+  },
+  mounted() {
+    this.initializeChart();
+    var _this = this;
+    // window.addEventListener("resize", () => {
+    //     _this.renderChart();
+    // //    this.$forceUpdate();
+    // });
+  },
+  methods: {
+    initializeChart() {
+      const chart = this.$echarts.init(this.$refs.chart);
+
+      const options = {
+        xAxis: {
+          type: "value",
+          max: 5
+        },
+        tooltip: {},
+        legend: {
+          data: this.bLeg,
+          bottom: 0 // 将图例显示在底部
+        },
+        yAxis: {
+          type: "category",
+          data: this.verCategories
+        },
+        series: this.bLeg.map((legendItem, index) => ({
+          name: legendItem,
+          data: this.verChartData[index],
+          type: 'bar',
+          barCategoryGap: '30%'
+        }))
+        
+        // [
+        //   {
+        //     data: this.verChartData,
+        //     type: "bar",
+        //     barCategoryGap: "30%"
+        //   }
+        // ]
+      };
+
+      chart.setOption(options);
+    }
+  }
+};
+</script>

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

@@ -256,7 +256,7 @@ export default {
     handleCurrentChange(val) {
       //当页数发生改变的时候调用获取列表数据请求
       // console.log(`当前页: ${val}`);
-      this.Page = val;
+      this.page = val;
       this.getData();
     },
     //获取分类
@@ -327,7 +327,7 @@ export default {
     },
     // 获取数据
     getData() {
-      // 获取筛选框数据
+
       let params = {
         uid: this.userid,
         cid: this.cid,
@@ -443,19 +443,21 @@ export default {
       // var res = res.data[0];
       var res = this.multipleSelection;
 
+      // return console.log(res);
       //如果value的json字段的key值和想要的headers值不一致时，可做如下更改
       //将和下面的Object.fromEntries结合，将json字段的key值改变为要求的excel的header值
       var array = [];
       for (var i = 0; i < res.length; i++) {
         var _json = {};
-        _json["创建时间"] = res[i].create_at;
-        _json["班级"] = res[i].className;
         _json["记录时间"] = res[i].recordDate;
-        // _json["用户名"] = res[i].studentName;
-        // _json["用户名"] = res[i].studentName;
+        _json["班级"] = res[i].className;
+        _json["学期"] = res[i].semName;
+        _json["关联"] = res[i].constus;
+        _json["维度"] = res[i].tname;
         _json["观察地点"] = res[i].place;
         _json["观察内容"] = res[i].recordTit;
         _json["内容"] = res[i].recordContent;
+        _json["创建时间"] = res[i].create_at;
 
         array.push(_json);
       }
@@ -467,10 +469,14 @@ export default {
         //设置每一列的宽度
         { wch: 20 },
         { wch: 30 },
+        { wch: 20 },
+        { wch: 30 },
+        { wch: 30 },
         { wch: 30 },
         { wch: 30 },
         { wch: 30 },
-        { wch: 30 }
+        { wch: 30 },
+
       ];
       XLSX.utils.book_append_sheet(workbook, ws, "sheet1"); //把sheet添加到workbook里，第三个参数是sheet名
       XLSX.writeFile(workbook, "观察日记.xlsx");

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

@@ -5,12 +5,17 @@
     >
       <div class="top">
         <div style="width: 348px;height: 40px;flex-shrink: 0;">
-          <el-select v-model="value" style="width: 100%;" placeholder="请选择">
+          <el-select
+            v-model="year"
+            @change="getData"
+            style="width: 100%;"
+            placeholder="请选择"
+          >
             <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              v-for="item in termList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
             </el-option>
           </el-select>
@@ -21,68 +26,548 @@
           <div class="btn">分享报告</div>
         </div>
       </div>
-      <div style="margin: 20px 10px;">
-        学期综合表现
+      <div style="margin: 20px 10px;">学期综合表现</div>
+      <div
+        style="font-size: 20px;width: 100%;height: 200px;display: flex;justify-content: center;"
+        v-if="isShow"
+      >
+        暂无数据
       </div>
-      <div class="content">
-        <div class="conTitle">
+
+      <div class="content" v-if="!isShow">
+        <!-- <div class="conTitle" >
           <div>综合评价:</div>
           <div class="txt">表现优异，再接再厉!</div>
-        </div>
-        <div class="radarCss">
-          <radar></radar>
+        </div> -->
+        <div style="display: flex;width: 100%;justify-content: space-between;">
+          <div class="radarCss">
+            <radar
+              ref="radar"
+              :chartData="chartData"
+              :categories="categories"
+              :key="chartData.toString()"
+            ></radar>
+          </div>
+          <div class="radarCss">
+            <croColumnar
+              ref="cro"
+              :chartData="croColumnarData"
+              :categories="categories"
+              :key="croColumnarData.toString()"
+            ></croColumnar>
+          </div>
         </div>
       </div>
       <div></div>
     </div>
+
+    <div
+      style="background-color: #fff;width: 100%;height: 100%;box-sizing: border-box; padding: 15px;"
+    >
+      <div style="margin: 20px 10px;">
+        健康领域综合表现
+      </div>
+      <div class="content" v-if="!isShow">
+        <div
+          style="display: flex;width: 100%;justify-content: space-between;box-sizing: border-box;padding: 10px;"
+        >
+          <div class="radarCss">
+            <verColumnar
+              ref="cro"
+              :verChartData="healthCroData"
+              :verCategories="healthCategories"
+              :key="healthCroData.toString()"
+            ></verColumnar>
+          </div>
+          <div class="radarCss">
+            <croColumnar
+              ref="cro"
+              :chartData="healthVerData"
+              :categories="healthVerCategories"
+              :key="healthVerData.toString()"
+            ></croColumnar>
+          </div>
+        </div>
+        <div
+          style="display: flex;justify-content: flex-start;width: 100%;margin-top: 10px;margin-left: 30px;"
+        >
+          <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 healthEvidence"
+            >
+              {{ 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"
+      ></popTable>
+    </el-dialog>
+    <!--  -->
   </div>
 </template>
 
 <script>
 import radar from "./component/radar.vue";
+
+import croColumnar from "./component/croColumnar";
+import verColumnar from "./component/verColumnar";
+import popTable from "./component/popTable";
 export default {
   components: {
-    radar
+    radar,
+    croColumnar,
+    verColumnar,
+    popTable
+  },
+  props: {
+    userid: {
+      type: String
+    },
+    oid: {
+      type: String
+    },
+    org: {
+      type: String
+    }
   },
   data() {
     return {
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕"
-        }
-      ],
-      value: ""
+      year: "",
+      termList: [],
+      dialogVisible: false,
+      // 平均分柱状图数据
+      croColumnarData: [50],
+
+      // 雷达图数据
+      chartData: [], //数据
+      categories: ["1"], //标签    雷达图与平均分共用
+      // categories: ["Series"],
+      // chartTitle: "My Radar Chart",
+      value: "",
+
+      VeidooList: [], //大分类
+      VeidooJsonList: [], //小分类
+
+      // 健康横向柱状图数据
+      healthCroData: [],
+      healthCategories: [],
+
+      healthVerCategories: [],
+      healthVerData: [],
+
+      // 关键证据数据
+      healthEvidence: [],
+      // 后端获取的数据
+      radarData: [],
+
+      // 判断无数据的显示
+      isShow: false,
+      // 判断关键证据的显示
+      proofIsShow: false
     };
   },
   methods: {
-    getData(){
-      let params = { 
-        uid:this.$route.query.suid
+    proofJudge() {
+      // if (this.proofIsShow) return
+      this.proofIsShow = !this.proofIsShow;
+      // this.$refs.popTab.getDataTab()
+    },
+    proofBtn() {
+      this.dialogVisible = true;
+    },
+    handleClose() {
+      // done()
+      this.dialogVisible = false;
+    },
+    //获取分类
+    getVeidooType() {
+      let params = {
+        org: this.org,
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectSTEType", params)
+        .then(res => {
+          var ftype = res.data[0]; //公共父级分类
+          var stype = res.data[1]; //公共子级分类
+          var sctype = res.data[2]; //该学校子级分类
+          var fctype = res.data[3]; //该学校父级分类
+          var fotype = res.data[4]; //组织父级分类
+          var sotype = res.data[5]; //组织子级分类
+          var allfType = [];
+          var allsType = [];
+          if (fotype.length == 0 && sotype.length == 0) {
+            if (fctype.length == 0 && sctype.length == 0) {
+              for (var i = 0; i < ftype.length; i++) {
+                allfType.push(ftype[i]);
+              }
+              for (var i = 0; i < stype.length; i++) {
+                allsType.push(stype[[i]]);
+              }
+            } else {
+              for (var i = 0; i < fctype.length; i++) {
+                allfType.push(fctype[i]);
+              }
+              for (var i = 0; i < sctype.length; i++) {
+                allsType.push(sctype[[i]]);
+              }
+            }
+          } else {
+            for (var i = 0; i < fotype.length; i++) {
+              allfType.push(fotype[i]);
+            }
+            for (var i = 0; i < sotype.length; i++) {
+              allsType.push(sctysotypepe[[i]]);
+            }
+          }
+          var VeidooJson = {};
+          for (var i = 0; i < allfType.length; i++) {
+            this.ftypeId = allfType[0].id;
+            if (!VeidooJson[allfType[i].id]) {
+              VeidooJson[allfType[i].id] = [];
+            }
+            for (var j = 0; j < allsType.length; j++) {
+              if (allfType[i].id == allsType[j].pid) {
+                VeidooJson[allfType[i].id].push(allsType[j]); // 去除公共分类
+              }
+            }
+          }
+
+          this.VeidooList = allfType;
+          this.VeidooJsonList = VeidooJson;
+
+          // console.log("  allfType", allfType);
+          // console.log("  allsType", allsType);
+          // this.$forceUpdate();
+
+          let aaa = [];
+          // 大分类标签
+          allfType.forEach(e => {
+            // console.log(e.name);
+            aaa.push(e.name);
+          });
+          // 数据分类底部标签
+          this.categories = aaa;
+
+          // 雷达图数据
+          this.countRadar();
+
+          // 柱状图
+          this.countCro();
+
+          // 健康横向柱状图
+          this.healthCro();
+
+          // 健康纵向柱状图
+          this.healthVer(allfType);
+        })
+        .catch(err => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    // 获取学期
+    getYear() {
+      this.isLoading = true;
+      this.ajax
+        .get(this.$store.state.api + "selectTerm")
+        .then(res => {
+          this.isLoading = false;
+          var yearJuri = res.data[0];
+          for (var i = 0; i < yearJuri.length; i++) {
+            if (yearJuri[i].defaultC == 1) {
+              this.year = yearJuri[i].id;
+            }
+          }
+          this.termList = yearJuri;
+          this.getData();
+
+          this.getEvidence();
+        })
+        .catch(err => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    // 获取关键证据数据
+    getEvidence() {
+      // this.isLoading = true;
+      let params = {
+        uid: this.userid,
+        year: this.year,
+        txt: "c0f39c82-b34b-11ee-b534-005056b86db5",
+        page: 1
+      };
+
+      this.ajax
+        .get(this.$store.state.api + "selectHealthRecord", params)
+        .then(res => {
+          console.log("获取关键证据数据", res);
+          this.healthEvidence = res.data[0];
+        }); //
+    },
+    // 获取打分数据
+    getData() {
+      this.isLoading = true;
+
+      let params = {
+        uid: this.userid,
+        year: this.year
       };
+      console.log("params", params);
       this.ajax
         .get(this.$store.state.api + "selectMapStuScore", params)
         .then(res => {
-          console.log(res);
-          let data=res.data[0][0];
-          console.log(JSON.parse(data.json));
+          this.isLoading = false;
+          if (res.data[0].length == 0) {
+            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);
+          this.getVeidooType();
+          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 = [];
+    },
+
+    // 雷达图数据
+    countRadar() {
+      // console.log("数据？", this.radarData);
+      let raData = this.radarData;
+
+      // 将数据复制在大分类里面用child来存储
+      this.VeidooList.forEach(e => {
+        // console.log(e);
+        let fid = e.id;
+        e.child = raData[fid];
+        // console.log( raData[fid]);
+      });
+
+      // 将每个大分类下的小分类数据提取出来，在大分类下创建一个child2来存储
+      this.VeidooList.forEach((e, k) => {
+        e.child2 = [];
+        e.child.forEach((i, index) => {
+          e.child2.push(i[i.id]);
+        });
+      });
+
+      // 第三次提取，将每个小分类的数据进行相加再除以小分类的长度得到平均值，再将平均值存储在大分类的num中
+      let a = 0;
+      let b = 0;
+      let c = 0;
+      this.VeidooList.forEach((e, k) => {
+        e.num = [];
+        e.child2.forEach((i, index) => {
+          a = a + i[0];
+          b = b + i[1];
+          c = c + i[2];
+        });
+        a = a / e.child2.length;
+        b = b / e.child2.length;
+        c = c / e.child2.length;
+
+        e.num.push(a, b, c);
+        a = 0;
+        b = 0;
+        c = 0;
+      });
+
+      // 雷达图数据---- 最后把每个大分类下的num按照，第一次第二次第三次，存储到raDataCopy中，为
+      let raDataCopy = [[], [], []];
+      this.VeidooList.forEach((e, k) => {
+        raDataCopy[0].push(e.num[0]);
+        raDataCopy[1].push(e.num[1]);
+        raDataCopy[2].push(e.num[2]);
+      });
+      // console.log("旧raDataCopy", raDataCopy);
+      this.chartData = raDataCopy;
+    },
+    // 柱状图
+    countCro() {
+      // 平均分数柱状图数据----------
+      let croMapData = [];
+      this.chartData.forEach(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);
+      });
+
+      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 = [];
+
+      // 获取数组中的最大长度
+      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;
+    },
+    // 健康纵向柱状图
+    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 = [];
+
+      for (let i = 0; i < array2.length; i++) {
+        const sum = (array1[i] || 0) + array2[i];
+        result.push(sum);
+      }
+
+      return result;
     }
   },
-  mounted() {
-    this.getData()
-  },
-  created() {}
+  mounted() {},
+  created() {
+    this.getYear();
+  }
 };
 </script>
 
 <style scoped>
+/deep/ .el-dialog {
+  width: 1000px;
+}
+/deep/ .el-dialog__title {
+  color: rgba(0, 0, 0, 0.9);
+  text-align: center;
+  font-family: "Microsoft YaHei";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: bold;
+  line-height: 22px; /* 137.5% */
+}
 .report {
   box-sizing: border-box;
   padding: 15px;
   height: 100%;
+  overflow-y: scroll;
 }
 .top {
   display: flex;
@@ -116,6 +601,9 @@ export default {
   border-radius: 16px;
   border: 1px solid var(--bg3, #e7e7e7);
   background: #fff;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 .conTitle {
   width: 70%;
@@ -136,8 +624,48 @@ export default {
   box-sizing: border-box;
   padding: 0 15px;
 }
-.radarCss{
-  width: 400px;
+.radarCss {
+  width: 45%;
   height: 400px;
 }
+.proofCss {
+  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 {
+  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%;
+  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/reportDialog/index.vue

@@ -178,7 +178,7 @@ export default {
     handleCurrentChange(val) {
       //当页数发生改变的时候调用获取列表数据请求
       // console.log(`当前页: ${val}`);
-      this.Page = val;
+      this.page = val;
       this.getData();
     }
   },