学情报告

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "echarts": "^5.5.0",
     "element-ui": "^2.15.13",
     "image-conversion": "^2.1.1",
     "js-audio-recorder": "^1.0.7",

src/api/eva.js

@@ -141,6 +141,36 @@ export function selectSTEPlace(params) {
   })
 }
 
+// 获取雷达图数据
+export function selectMapStuScore(params) {
+  return request({
+    url: '/selectMapStuScore',
+    method: 'get',
+    params,
+    hideloading: false
+  })
+}
+// 获取班级平均
+export function selectClaAvaScore(params) {
+  return request({
+    url: '/selectClaAvaScore',
+    method: 'get',
+    params,
+    hideloading: false
+  })
+}
+
+
+// 图表循环获取记录数据
+export function selectHealthRecord(params) {
+  return request({
+    url: '/selectHealthRecord',
+    method: 'get',
+    params,
+    hideloading: false
+  })
+}
+
 // 获取学期选项
 // export function selectTermRecord(params) {
 //   return request({

src/main.js

@@ -34,7 +34,8 @@ Vue.use(VideoPlayer)
 // 引入本地存储
 import { storage, sessionStorage } from '@/utils/storage'
 import hevueImgPreview from '@/components/hevue-img-preview'
-
+const echarts = require('echarts');
+Vue.prototype.$echarts = echarts
 import '@/permission' // permission control
 Vue.prototype.$storage = storage
 Vue.prototype.$sessionStorage = sessionStorage

src/permission.js

@@ -6,7 +6,7 @@ import 'nprogress/nprogress.css' // progress bar style
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login', '/resetpassword', '/help'] // no redirect whitelist
+const whiteList = ['/login', '/resetpassword', '/help', '/echarts'] // no redirect whitelist
 
 // eslint-disable-next-line prettier/prettier
 router.beforeEach(async(to, from, next) => {

src/router/router.config.js

@@ -138,14 +138,14 @@ export const constantRouterMap = [
       keepAlive: false
     }
   },
-  {
-    path: '/searchstuDetail',
-    component: () => import('@/views/eva/searchstuDetail'),
-    meta: {
-      title: '学生记录2',
-      keepAlive: false
-    }
-  },
+  // {
+  //   path: '/searchstuDetail',
+  //   component: () => import('@/views/eva/searchstuDetail'),
+  //   meta: {
+  //     title: '学生记录2',
+  //     keepAlive: false
+  //   }
+  // },
   {
     path: '/studentEvaluate',
     component: () => import('@/views/eva/studentEvaluate'),
@@ -155,13 +155,21 @@ export const constantRouterMap = [
     }
   },
   {
-    path: '/searchStudentEva',
-    component: () => import('@/views/eva/searchStudentEva'),
+    path: '/echarts',
+    component: () => import('@/views/eva/echarts'),
     meta: {
       title: '学生评价',
       keepAlive: false
     }
   },
+  // {
+  //   path: '/searchStudentEva',
+  //   component: () => import('@/views/eva/searchStudentEva'),
+  //   meta: {
+  //     title: '学生评价',
+  //     keepAlive: false
+  //   }
+  // },
   {
     path: '/testDetail',
     component: () => import('@/views/testDetail/index'),

src/views/eva/components/croColumnar.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="bar-chart"  style="width: 100%; height: 250px;font-size: 10px;" ref="chart"></div>
+</template>
+
+<script>
+//   import echarts from 'echarts';
+
+export default {
+  name: "BarChart",
+  props: {
+    chartData: {
+      type: Array,
+      required: true
+    },
+    categories: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      bLeg: ["我的", "班级平均"]
+    };
+  },
+  mounted() {
+    this.renderChart();
+    // console.log("x", this.chartData, this.categories);
+    // 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: "平均分" // 设置标题
+        // },
+        tooltip: {},
+        legend: {
+          data: this.bLeg,
+          bottom: 0, // 将图例显示在底部 
+          icon: 'circle' // 修改图例项的形状为圆形
+        },
+        // color: ["#FD9588",'#F5B763'], // 设置柱状图的颜色
+        xAxis: {
+          type: "category",
+          data: this.categories
+        },
+        yAxis: {
+          type: "value",
+          max: "5"
+        },
+        series: this.bLeg.map((legendItem, index) => ({
+          name: legendItem,
+          data: this.chartData[index],
+          type: "bar"
+          // barCategoryGap: "30%"
+        }))
+        // series: [
+        //   {
+        //     data: this.chartData,
+        //     type: "bar"
+        //   }
+        // ]
+      };
+
+      chart.setOption(options);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.bar-chart {
+  width: 100%;
+  height: 250px;
+}
+</style>

src/views/eva/components/fieldMap.vue

@@ -0,0 +1,378 @@
+<template>
+  <!-- 健康的 -->
+  <div>
+    <div class="synthesize">
+      <div class="synthesizeTit">{{ tit }}领域综合表现</div>
+      <verColumnar
+        ref="cro"
+        :verChartData="croData"
+        :verCategories="bomCategories"
+        :key="croData.toString() + 'b'"
+      ></verColumnar>
+      <croColumnar ref="cro" :chartData="verData" :categories="bomCategories" :key="verData.toString()"></croColumnar>
+
+      <div class="FTit" v-if="fieldEvidence.length">
+        关键证据:
+      </div>
+      <div class="proofCell" v-for="(i, index) in fieldEvidence">
+        {{ i.recordDate }}-{{ i.recordTit }}-观察笔记
+      </div>
+      <!-- <div class="content"> -->
+      <!-- <div
+          style="display: flex;width: 100%;justify-content: space-between;box-sizing: border-box;padding: 10px;"
+        >
+          <div class="radarCss">
+           
+          </div>
+          <div class="radarCss">
+          
+          </div>
+        </div> -->
+      <!-- <div
+          style="display: flex;justify-content: flex-start;width: 100%;margin-top: 10px;margin-left: 30px;"
+          v-if="fieldEvidence.length && !isPdf"
+        >
+        </div> -->
+      <!-- </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+
+import { selectHealthRecord } from '@/api/eva'
+
+import croColumnar from './croColumnar'
+import verColumnar from './verColumnar'
+// import popTable from "./popTable";
+// import { number } from "echarts";
+export default {
+  components: {
+    croColumnar,
+    verColumnar
+  },
+  props: {
+    tit: {
+      type: String,
+      default: ''
+    },
+    tid: {
+      type: String,
+      default: ''
+    },
+    radarData: {
+      type: Object,
+      default: () => {}
+    },
+    classScoreData: {
+      type: Array,
+      default: () => []
+    },
+    claStuNum: {
+      type: Number,
+      default: 0
+    },
+    userid: {
+      type: String,
+      default: ''
+    },
+    year: {
+      type: String,
+      default: ''
+    },
+    isPdf: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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 = true
+      this.dialogVisible = true
+    },
+    // proofBtn() {
+
+    // },
+    handleClose() {
+      this.dialogVisible = false
+      this.proofIsShow = false
+    },
+    // 获取关键证据数据
+    getEvidence() {
+      // this.isLoading = true;
+      let params = {
+        uid: this.userid,
+        year: this.year,
+        txt: this.tid,
+        page: 1
+      }
+
+      selectHealthRecord(params).then(res => {
+        console.log("获取关键证据数据", res);
+        this.fieldEvidence = res[0]
+      }) //
+    },
+    // 横向柱状图
+    CroMap() {
+      // console.log(this.classScoreData);
+      // console.log(this.tid);
+
+      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("this.croData",this.croData);
+    },
+    // 纵向柱状图
+    verMap() {
+      // 班级平均数据开始
+      let newArr = []
+      this.classScoreData.forEach(e => {
+        for (let i in e) {
+          if (i == this.tid) {
+            newArr.push(e[i])
+          }
+        }
+      })
+      // console.log(newArr);
+      // 整合学生小分类数据
+      let AvaArr = []
+      newArr.forEach(e => {
+        AvaArr.push(e.child)
+      })
+
+      let AvaArr2 = []
+      AvaArr2 = this.combineArrays(AvaArr)
+      let _that = this
+
+      let att = []
+      AvaArr2.forEach((e, index) => {
+        att[index] = []
+        e.forEach(k => {
+          att[index] = _that.addArrays(att[index], k)
+        })
+      })
+      // console.log("AvaArr", AvaArr);
+
+      let lastData = []
+      att.forEach((e, index) => {
+        let k = 0
+        k = e.reduce((per, cur) => {
+          return per + cur
+        }, 0)
+        lastData.push(((k / 3 / this.claStuNum) * 1).toFixed(1))
+      })
+      // console.log("lastData", lastData);
+      // 班级平均数据结束
+
+      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)
+      })
+      this.verData = [this.verData, lastData]
+      // 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 lang="scss">
+.synthesize {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+  background-color: #fff;
+  margin: 10px 0;
+  border-radius: 10px;
+  .synthesizeTit {
+    font-size: 16px;
+    font-weight: bold;
+    border-left: 3px #3681fc solid;
+    padding-left: 10px;
+    display: flex;
+    align-items: center;
+  }
+}
+.FTit{
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.proofCell {
+  width: 100%;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  box-sizing: border-box;
+  padding: 10px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-wrap: nowrap;
+  border-radius: 8px;
+  background: var(--bg, #f0f2f5);
+}
+.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;
+}
+
+</style>

src/views/eva/components/radar.vue

@@ -0,0 +1,72 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 250px;font-size: 10px;"></div>
+</template>
+
+<script>
+
+export default {
+  name: "RadarChart",
+  props: {
+    chartData: {
+      type: Array,
+      default: () => []
+    },
+    categories: {
+      type: Array,
+      default: () => []
+    }
+
+    // title: {
+    //   type: String,
+    //   default: 'Radar Chart'
+    // }
+  },
+  data() {
+    return {
+      bLeg: [{ name: "第一次评估" }, { name: "第二次评估" }, { name: "第三次评估" }],
+      // bLeg: ["开学", "期中", "期末"],
+      chartObj:null
+    };
+  },
+  mounted() {
+    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: [
+          {
+            type: "radar",
+            data: seriesData
+          }
+        ]
+      };
+      this.chartObj.setOption(option);
+    }
+  }
+};
+</script>

src/views/eva/components/verColumnar.vue

@@ -0,0 +1,76 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 300px;font-size: 10px;"></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();
+    // console.log('y', this.verChartData, this.verCategories);
+
+    // 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 // 将图例显示在底部
+        },
+        grid: {
+          containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。
+        },
+        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/views/eva/echarts.vue

@@ -0,0 +1,533 @@
+<template>
+  <div class="echart">
+    <div class="top">
+      <img
+        class="img"
+        width="50"
+        src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/Rectangle%20192301712643054648.png"
+        alt=""
+      />
+      <div class="userName">{{ studentInfo.name }}</div>
+      <div class="vla">班级： {{ studentInfo.cname }}</div>
+      <van-dropdown-menu>
+        <van-dropdown-item @change="getClassAva" v-model="year" title="学期" :options="termList" />
+      </van-dropdown-menu>
+    </div>
+
+    <div class="synthesize" v-if="chartData.length">
+      <div class="synthesizeTit">学期综合表现</div>
+      <radar ref="radar" :chartData="chartData" :categories="categories" :key="chartData.toString()"></radar>
+      <croColumnar
+        ref="cro"
+        :chartData="croColumnarData"
+        :categories="categories"
+        :key="croColumnarData.toString() + 'a'"
+      ></croColumnar>
+    </div>
+
+    <div v-if="chartData.length">
+      <div v-for="(i, index) in VeidooList" :key="i.id + 'c'">
+        <fieldMap
+          :tid="i.id"
+          :tit="i.name"
+          :userid="userid"
+          :classScoreData="classScoreData"
+          :claStuNum="claStuNum"
+          :year="year"
+          :radarData="radarData"
+          :key="radarData.toString()"
+        ></fieldMap>
+      </div>
+    </div>
+    <div class="noData" v-if="!chartData.length">
+      暂未评分
+    </div>
+  </div>
+</template>
+
+<script>
+import { selectTerm } from '@/api/eva'
+import { selectMapStuScore } from '@/api/eva'
+import { selectSTEType } from '@/api/eva'
+import { selectClaAvaScore } from '@/api/eva'
+import { selectStudentDetail } from '@/api/eva'
+
+import radar from './components/radar'
+import croColumnar from './components/croColumnar'
+import fieldMap from './components/fieldMap'
+
+export default {
+  name: 'PblAppExcher',
+  components: {
+    radar,
+    croColumnar,
+    fieldMap
+  },
+  data() {
+    return {
+      studentInfo: {},
+
+      // 学期列表
+      termList: [],
+      // 单个班级学生人数
+      claStuNum: 0,
+      // 班级分数数据
+      classScoreData: [],
+      classAvaScoreData: [],
+      // 雷达图数据
+      chartData: [], //数据
+      categories: [], //标签    雷达图与平均分共用
+      value: '',
+      VeidooList: [], //大分类
+      VeidooJsonList: [], //小分类
+
+      // 平均分柱状图数据
+      croColumnarData: [],
+      // 后端获取的数据
+      radarData: {},
+      year: '',
+      // userid: '698ab9e3-4017-11ee-91d8-005056b86db5',
+      userid: '',
+      oid: '',
+      org: '',
+      cid: ''
+    }
+  },
+
+  methods: {
+    selTerm() {
+      this.termList = []
+      selectTerm().then(res => {
+        console.log('获取学期筛选框', res[0])
+        res[0].forEach(e => {
+          if (e.defaultC === 1) {
+            this.termData = e.id
+            this.year = e.id
+          }
+          const a = { value: '', text: '' }
+          a.value = e.id
+          a.text = e.name
+          this.termList.push(a)
+
+          // this.getEvidence()
+        })
+        this.getClassAva()
+      })
+    },
+    // 获取打分数据
+    getData() {
+      this.chartData = [] //数据
+      this.categories = [] //标签    雷达图与平均分共用
+
+      let params = {
+        uid: this.userid,
+        year: this.year
+      }
+      console.log('params', params)
+      selectMapStuScore(params).then(res => {
+        // console.log('获取打分数据', res)
+        if (!res[0].length) return (this.radarData = [])
+        let data = res[0][0]
+        this.radarData = JSON.parse(data.json)
+        this.getVeidooType()
+      })
+    },
+    getUserInfo() {
+      const stuData = {
+        uid: this.userid
+      }
+      selectStudentDetail(stuData).then(res => {
+        this.studentInfo = res[0][0]
+        console.log('获取学生信息', this.studentInfo)
+
+        // // 获取班学生列表
+        // const data2 = {
+        //   cid: this.studentInfo.classid,
+        //   uid: localStorage.getItem('userId')
+        // }
+        // // console.log('获取班学生列表', data2)
+        // selectManyClassStudent(data2).then(res => {
+        //   this.studentList = res[0].filter(i => {
+        //     return i.id !== localStorage.getItem('userId')
+        //   })
+        //   console.log('班级同学列表', this.studentList)
+        // })
+      })
+    },
+    //获取分类
+    getVeidooType() {
+      let params = {
+        org: this.org,
+        oid: this.oid
+      }
+      selectSTEType(params)
+        .then(res => {
+          var ftype = res[0] //公共父级分类
+          var stype = res[1] //公共子级分类
+          var sctype = res[2] //该学校子级分类
+          var fctype = res[3] //该学校父级分类
+          var fotype = res[4] //组织父级分类
+          var sotype = res[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
+          console.log(this.categories)
+          // 处理数据数据
+          this.countRadar()
+          // console.log(222);
+
+          // 柱状图
+          this.countCro()
+
+          // 健康横向柱状图
+          // this.healthCro();
+
+          // 健康纵向柱状图
+          // this.healthVer(allfType);
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+    countRadar() {
+      // 分数数据并进行处理
+      // 个人平均分数据开始
+      let raData = this.radarData
+      console.log('raData', raData)
+      console.log('this.VeidooList', this.VeidooList)
+      // 分数与分类是两个数组
+      // 将分数数据复制在大分类里面用child来存储
+      this.VeidooList.forEach(e => {
+        // console.log(e);
+        let fid = e.id
+        e.child = raData[fid]
+      })
+
+      // 将每个大分类下的小分类数据提取出来，在大分类下创建一个child2来存储
+      this.VeidooList.forEach((e, k) => {
+        e.child2 = []
+        e.child.forEach((i, index) => {
+          e.child2.push(i[i.id])
+        })
+      })
+      console.log('iiiiiiiiiiiii')
+
+      // 第三次提取，将每个小分类的数据进行相加再除以小分类的长度得到平均值，再将平均值存储在大分类的num中
+
+      this.VeidooList.forEach((e, k) => {
+        let stockpile = []
+        e.child2.forEach((i, index) => {
+          stockpile = this.addArrays(stockpile, i)
+        })
+
+        e.num = stockpile.map(item => {
+          return (item / e.child2.length).toFixed(1)
+        })
+      })
+      // 个人平均分数据结束
+
+      // 班级平均分数据开始
+      // console.log("????", this.classScoreData);
+      // 先将每个学生的小分类整理好，放在child里面
+      // console.log('this.classScoreData',this.classScoreData);
+
+      this.classScoreData.forEach(i => {
+        for (let j in i) {
+          i[j].child = []
+          // console.log(i[j]);
+          for (let k in i[j]) {
+            if (k != 'child') {
+              i[j].child.push(i[j][k][i[j][k].id])
+            }
+          }
+        }
+      })
+      console.log(' this.classScoreData', this.classScoreData)
+
+      // 将学生每个大分类的平均分整合
+      this.classScoreData.forEach(i => {
+        for (let j in i) {
+          // console.log(i[j]);
+          let arr = []
+          i[j].child2 = []
+          i[j].child.forEach(e => {
+            arr = this.addArrays(arr, e)
+          })
+          // console.log(i[j].child);
+          i[j].child2 = arr.map(item => {
+            return ((item * 1) / i[j].child.length).toFixed(1)
+          })
+        }
+      })
+      // console.log(444);
+
+      // 获取学生大分类平均分
+      this.classScoreData.forEach(i => {
+        i.arr = []
+        for (let j in i) {
+          if (j != 'arr') {
+            let new1 = 0
+            new1 = i[j].child2.reduce((pre, cur) => {
+              return pre * 1 + cur * 1
+            }, 0)
+            i.arr.push((new1 / 3).toFixed(1))
+          }
+        }
+      })
+
+      // 获取大分类班级平均数
+      let ClaAvaArr = []
+      this.classScoreData.forEach(i => {
+        ClaAvaArr.push(i.arr)
+      })
+      // console.log(ClaAvaArr);
+
+      let AvaArrItem = []
+      ClaAvaArr.forEach((i, index) => {
+        AvaArrItem = this.addArrays(AvaArrItem, i)
+      })
+      AvaArrItem = AvaArrItem.map(item => {
+        return (item / this.claStuNum).toFixed(1)
+      })
+      this.classAvaScoreData = AvaArrItem
+
+      console.log('AvaArr', this.classAvaScoreData)
+
+      // console.log("this.classScoreData", this.classScoreData);
+
+      // 班级平均分数据结束
+
+      // 雷达图数据---- 最后把每个大分类下的num按照，第一次第二次第三次，存储到raDataCopy中，为
+      let raDataCopy = [[], [], []]
+      // console.log("VeidooList", this.VeidooList);
+      this.VeidooList.forEach((e, k) => {
+        raDataCopy[0].push(e.num[0])
+        raDataCopy[1].push(e.num[1])
+        raDataCopy[2].push(e.num[2])
+      })
+      this.chartData = raDataCopy
+
+      console.log('raDataCopy', raDataCopy)
+    },
+    // 获取班级平均
+    getClassAva() {
+      ;(this.claStuNum = 0),
+        // 班级分数数据
+        // this.classScoreData= []
+        (this.classScoreData = []) //数据
+      let params = {
+        cid: this.cid,
+        trm: this.year
+      }
+      // console.log("params", params);
+      selectClaAvaScore(params).then(res => {
+        this.claStuNum = res[0].length > 0 ? res[0][0].num : 0
+        let AvaData = res[0]
+        AvaData.forEach((item, index) => {
+          this.classScoreData.push(JSON.parse(item.json))
+        })
+        // console.log('this.classScoreData',JSON.parse(JSON.stringify(this.classScoreData)) );
+        // 第一次渲染，要放在这里，不然没有办法循环班级平均数
+        this.getData()
+
+        // console.log("班级平均数据1", this.classScoreData);
+      })
+    },
+    // 柱状图
+    countCro() {
+      // 平均分数柱状图数据----------
+      let croMapData = []
+      this.chartData.forEach(e => {
+        croMapData = this.addArrays(croMapData, e)
+      })
+      let _this = this
+      this.croColumnarData = croMapData.map(function(item) {
+        return (item / _this.chartData.length).toFixed(1)
+      })
+
+      let k = [this.croColumnarData, this.classAvaScoreData]
+
+      this.croColumnarData = k
+      console.log('this.croColumnarData', this.croColumnarData)
+    },
+    // 数组相加
+    addArrays(array1, array2) {
+      const result = []
+
+      for (let i = 0; i < array2.length; i++) {
+        const sum = (array1[i] || 0) + array2[i] * 1
+        result.push(sum)
+      }
+
+      return result
+    }
+  },
+  created() {},
+  mounted() {
+    const url = window.location.href
+    const paramRegex = /[?&]([^=#]+)=([^&#]*)/g
+    const params = {}
+    let match
+
+    while ((match = paramRegex.exec(url)) !== null) {
+      const paramName = decodeURIComponent(match[1])
+      const paramValue = decodeURIComponent(match[2])
+      params[paramName] = paramValue
+    }
+    // console.log('jaajaj',params)
+    this.userid = params.userid
+    this.oid = params.oid
+    this.org = params.org
+    this.cid = params.cid
+
+    this.selTerm()
+    this.getUserInfo()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.echart {
+  box-sizing: border-box;
+  padding: 15px;
+  min-height: 100vh;
+  background-image: linear-gradient(to bottom, #005ccd 8vh, #00c6fb 25vh, #f6f5f8 30vh);
+}
+.top {
+  height: 25vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  color: #fff;
+  .img {
+    margin: 0 auto;
+  }
+  .userName {
+    font-size: 16px;
+    padding: 6px 0;
+  }
+  .vla {
+    padding-bottom: 10px;
+  }
+}
+.synthesize {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+  background-color: #fff;
+  // box-shadow: 0 0 5px 0px #ccc;
+  margin: 10px 0;
+  border-radius: 10px;
+  .synthesizeTit {
+    font-size: 16px;
+    font-weight: bold;
+    border-left: 3px #3681fc solid;
+    padding-left: 10px;
+    display: flex;
+    align-items: center;
+  }
+}
+.noData {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 30px;
+  font-weight: bold;
+}
+/deep/.van-dropdown-menu__bar {
+  box-shadow: none;
+  // background: none;
+  border-radius: 10px;
+  height: 1rem;
+}
+
+/deep/ .van-dropdown-item__content {
+  border-radius: 0 0 10px 10px;
+}
+// /deep/ .van-overlay {
+//   box-sizing: border-box;
+// }
+
+/deep/ .van-ellipsis {
+  font-size: 14px;
+  // color: #fff;
+  font-size: 16px;
+}
+/deep/ .van-dropdown-menu__title::after {
+  border-color: transparent transparent #000 #000;
+  opacity: 0.5;
+}
+/deep/ .van-dropdown-menu__title--active::after {
+  border-color: transparent transparent currentColor currentColor;
+}
+/deep/ .van-cell__title,
+.van-cell__value {
+  font-weight: normal;
+}
+
+/deep/ .van-dropdown-item__option--active .van-dropdown-item__icon {
+  color: #3b84fc;
+}
+/deep/ .van-dropdown-item__option--active {
+  color: #3b84fc;
+}
+/deep/ .van-dropdown-menu__title {
+  padding-left: 0;
+}
+/deep/ .van-dropdown-menu__title--active {
+  color: #3b84fc;
+}
+</style>

src/views/eva/searchStudentEva.vue

@@ -1,752 +0,0 @@
-<template>
-  <!-- 学生评价 -->
-  <div class="studentEvaluate" @click="col">
-    <bar :tit="'学生评价'" :num="1">
-      <template v-slot:btn>
-        <div v-if="!shareShow" @click="save">发布</div>
-        <div v-else @click="amend">修改</div>
-      </template>
-    </bar>
-
-    <div style="height: 50px;z-index: 30;overflow: hidden;"></div>
-
-    <!-- <div class="bigBlock"> -->
-    <div class="bigBlock" style="">
-      <div class="claName">
-        <div class="tit">学生</div>
-        <div class="studentName">{{ studentInfo.name }}</div>
-      </div>
-      <div class="claName">
-        <div class="tit">班级</div>
-        <div class="studentName">{{ studentInfo.cname }}</div>
-      </div>
-
-      <div class="claName">
-        <!-- <div class="relevanceStudent"> -->
-        <div class="tit">关联</div>
-        <div class="studentName">
-          <selects ref="StuSel" :listContent="studentList" :tit="'请选择关联学生'" :choosePer="selectSData"></selects>
-        </div>
-        <!-- </div> -->
-      </div>
-      <div class="claName">
-        <div class="tit">学期</div>
-        <div class="studentName" style="position: relative;">
-          <radioSelect ref="claSel" :listCont="termList" :tit="'请选择学期'" :choose="termData"></radioSelect>
-          <div v-show="term" style="position: absolute;bottom: -100%; color: red;font-size: 10px;">请选择学期</div>
-        </div>
-      </div>
-      <div v-show="term" style="height: 10px;"></div>
-
-      <div class="claName">
-        <div class="tit">维度</div>
-        <div class="studentName" style="position: relative;">
-          <selects ref="WeiSel" :listContent="weiList" :tit="'请选择评价维度'" :choosePer="selectWData"></selects>
-          <div v-show="wei" style="position: absolute;bottom: -100%; color: red;font-size: 10px;">请选择评价维度</div>
-        </div>
-      </div>
-      <div v-show="wei" style="height: 10px;"></div>
-
-      <div class="claName" style="position: relative;">
-        <div class="tit">时间</div>
-
-        <div class="studentName2">
-          <van-field
-            class="xx"
-            clickable
-            name="datetimePicker"
-            label=""
-            placeholder="请选择时间"
-            @click="choseTime"
-            input-align="left"
-            :value="visitTime"
-            :rules="[{ required: true, message: '' }]"
-            readonly
-          >
-          </van-field>
-          <van-popup v-model="showPicker" position="bottom">
-            <van-datetime-picker
-              @cancel="cancel"
-              @confirm="onConfirm"
-              v-model="currentDate"
-              type="datetime"
-              :min-date="minDate"
-              :max-date="maxDate"
-            />
-          </van-popup>
-        </div>
-        <img class="rl" src="../../assets/images/eva/rl.png" alt="" />
-        <div
-          v-show="tim"
-          style="position: absolute;bottom: 0%;transform: translate(0,100%); left: 40px; color: red;font-size: 10px;"
-        >
-          请设置时间
-        </div>
-      </div>
-      <div v-show="tim" style="height: 10px;"></div>
-
-      <div class="claName">
-        <div class="tit">地点</div>
-        <div class="inpBlock studentName">
-          <input type="text" v-model="place" class="inp" placeholder="请输入" />
-        </div>
-      </div>
-      <div class="claName">
-        <div style="width: 70px;">观察内容</div>
-        <div class="inpBlock studentName">
-          <input type="text" v-model="observeCon" class="inp" placeholder="请输入" />
-        </div>
-      </div>
-      <div class="claName">
-        观察记录
-      </div>
-      <div class="EvaluateTxt">
-        <textarea name="" id="" style="width: 100%;height: 100%;border: none;" v-model="recordCon"></textarea>
-      </div>
-
-      <!-- 上传图片开始 -->
-      <div class="uploadImgTit">
-        <div>图片上传</div>
-        <div>{{ imgList.length }}/10</div>
-      </div>
-      <div class="uploadImg">
-        <image-component @getImage="getImage" :imgList.sync="imgList"></image-component>
-      </div>
-      <!-- 上传图片结束 -->
-    </div>
-    <!-- </div> -->
-    <!-- 按钮 -->
-    <div class="submitBtn">
-      <!-- <div class="btn" @click="isShowMask = true">删除</div> -->
-      <!-- <div class="btn" @click="isShowMask = true">重复添加</div>
-      <div class="btn">添加新记录</div> -->
-      <div class="btn" v-if="!shareShow" @click="save">发布并返回</div>
-      <div class="btn" v-else @click="amend">修改并返回</div>
-    </div>
-
-    <pop v-show="isShowMask">
-      <template v-slot:tit>确定</template>
-      <template v-slot:con>确定{{ shareShow ? '修改' : '发布' }}吗</template>
-      <template v-slot:btn1>
-        <div class="btn" style="color: rgba(136,136,136,1);" @click="isShowMask = false">取消</div>
-      </template>
-      <template v-slot:btn2>
-        <div class="btn" v-if="!shareShow" style="color: rgba(251,67,25,1);" @click="uploadRecord">确认</div>
-        <div class="btn" v-else style="color: rgba(251,67,25,1);" @click="updateRecord">确认</div>
-      </template>
-    </pop>
-  </div>
-</template>
-
-<script>
-// 导航栏组件
-import bar from './components/bar.vue'
-// 多选框组件
-import selects from './components/selects.vue'
-// 单选
-import radioSelect from './components/radioSelect.vue'
-
-// 上传图片组件
-import imageComponent from './components/ImageComponent.vue'
-// 弹窗组件
-import pop from './components/pop.vue'
-
-import { insertRecord } from '@/api/eva'
-import { selectManyClassStudent } from '@/api/eva'
-import { selectVeiDoo } from '@/api/eva'
-import { selectRecordDetail } from '@/api/eva'
-import { updateRecordData } from '@/api/eva'
-import { selectTerm } from '@/api/eva'
-import { selectStudentDetail } from '@/api/eva'
-
-import '@/utils/aws-sdk-2.235.1.min.js'
-
-export default {
-  components: {
-    bar,
-    selects,
-    imageComponent,
-    pop,
-    radioSelect
-  },
-
-  data() {
-    return {
-      studentInfo: {},
-      // 学生信息
-      stuName: {},
-      // 关联选项
-      studentList: [],
-      // 纬度选项
-      weiList: [],
-      termList: [],
-      // 所选数据
-      // 学生
-      selectSData: [],
-      // 纬度
-      selectWData: [],
-      // 学期
-      termData: [],
-      // 格式化后记录时间
-      visitTime: '',
-      // 地点
-      place: '',
-      // 观察内容
-      observeCon: '',
-      // 观察记录
-      recordCon: '',
-      // 图片列表
-      imgList: [],
-
-      isShowMask: false, // 控制删除弹框的显示与隐藏
-      isShowMask2: false, // 控制保存弹框的显示与隐藏
-      // 是否显示分享和继续记录按钮
-      shareShow: 0,
-      // 未格式化的时间
-      currentDate: new Date(),
-      // 时间弹出框
-      showPicker: false,
-      minDate: '',
-      maxDate: '',
-
-      wei: false,
-      tim: false,
-      term: false
-    }
-  },
-
-  methods: {
-    getData() {
-      // 获取学生信息
-      const stuData = {
-        uid: localStorage.getItem('userId')
-      }
-
-      selectStudentDetail(stuData).then(res => {
-        this.studentInfo = res[0][0]
-        console.log('获取学生信息', this.studentInfo)
-
-        // 获取班学生列表
-        const data2 = {
-          cid: this.studentInfo.classid,
-          uid: localStorage.getItem('userId')
-        }
-        console.log('获取班学生列表', data2)
-        selectManyClassStudent(data2).then(res => {
-          // res[0].forEach(e => {
-          //   if (e.id === this.$route.query.uid) {
-          //     this.stuName = e
-          //   } else {
-          //     this.studentList.push(e)
-          //   }
-          // })
-          this.studentList = res[0]
-
-          console.log('this.studentList', this.studentList)
-        })
-      })
-      // 获取纬度筛选框
-      const data = {
-        oid: this.$store.state.user.userinfo.organizeid,
-        cla: 0
-      }
-      selectVeiDoo(data).then(res => {
-        this.weiList = res[0]
-        console.log('this.weiList', this.weiList)
-      })
-
-      // 获取学期筛选框
-      selectTerm().then(res => {
-        console.log('获取学期筛选框', res)
-        res[0].forEach(e => {
-          //   console.log(e)
-          if (e.defaultC === 1) {
-            this.termData.push(e.id)
-          }
-        })
-        // console.log('this.termData', this.termData)
-        this.termList = res[0]
-        // console.log('this.termList', this.termList)
-      })
-    },
-    // 调用子元素selects中的方法隐藏选项列表
-    col() {
-      this.$refs.StuSel.fuClick()
-      this.$refs.WeiSel.fuClick()
-      this.$refs.claSel.fuClick()
-    },
-    // 选择照片
-    getImage(imgList) {
-      // console.log('哒哒哒啊啊的', imgList)
-
-      this.imgList = imgList
-      this.$forceUpdate()
-    },
-    save() {
-      let isOk = 0
-
-      if (this.selectWData.length === 0) {
-        this.wei = true
-        isOk = 1
-      }
-      if (this.visitTime === '') {
-        this.tim = true
-        isOk = 1
-      }
-      if (isOk === 1) return
-
-      this.isShowMask = true
-    },
-    amend() {
-      let isOk = 0
-
-      if (this.selectWData.length === 0) {
-        this.wei = true
-        isOk = 1
-      }
-      if (this.visitTime === '') {
-        this.tim = true
-        isOk = 1
-      }
-      if (isOk === 1) return
-
-      this.isShowMask = true
-    },
-    // 上传评价
-    uploadRecord() {
-      const data = [
-        {
-          uid: localStorage.getItem('userId'),
-          tid: this.$store.state.user.userinfo.userid,
-          contact: this.selectSData.join(','),
-          type: this.selectWData.join(','),
-          timing: this.visitTime,
-          place: this.place,
-          observeCon: this.observeCon,
-          recordCon: this.recordCon,
-          imgList: this.imgList.join(','),
-          term: this.termData[0]
-        }
-      ]
-      this.isShowMask = false
-
-      // return console.log(data)
-
-      insertRecord(data).then(res => {
-        console.log(res)
-        if (res === 1) {
-          this.$toast({
-            message: '发布成功',
-            type: 'success'
-          })
-          setTimeout(() => {
-            this.$router.replace('/searchstuDetail')
-
-            // if (this.$route.query.ser || 0) {
-            //   this.$router.replace(`/searchstuDetail?cid=${this.$route.query.cid}&cName=${this.$route.query.CName}`)
-            // } else {
-            //   this.$router.replace(`/searchstuDetail?cid=${this.$route.query.cid}&cName=${this.$route.query.CName}`)
-            // }
-          }, 1000)
-        }
-      })
-      // console.log('上传评价', data)
-    },
-    // 修改评价
-    updateRecord() {
-      const data = [
-        {
-          rid: this.$route.query.rid,
-          tid: this.$store.state.user.userinfo.userid,
-          contact: this.selectSData.join(','),
-          type: this.selectWData.join(','),
-          timing: this.visitTime,
-          place: this.place,
-          observeCon: this.observeCon,
-          recordCon: this.recordCon,
-          imgList: this.imgList.join(','),
-          term: this.termData[0]
-        }
-      ]
-      updateRecordData(data).then(res => {
-        console.log(res)
-        if (res === 1) {
-          this.$toast({
-            message: '修改成功',
-            type: 'success'
-          })
-          setTimeout(() => {
-            this.$router.replace('/searchstuDetail')
-          }, 1000)
-        }
-      })
-    },
-    // 填写页面数据
-    getRecord() {
-      const data = {
-        id: this.$route.query.rid
-      }
-      console.log('getRecord', this.$route.query.rid)
-      selectRecordDetail(data).then(res => {
-        console.log('获取单个学生记录详情', res[0][0])
-        const allData = res[0][0]
-        if (allData.contact !== '') {
-          this.selectSData = allData.contact.split(',')
-        }
-        if (allData.type !== '') {
-          this.selectWData = allData.type.split(',')
-        }
-        // this.selectWData = allData.type.split(',')
-        this.visitTime = allData.recordDate
-        this.place = allData.place
-        this.recordCon = allData.recordCon
-        this.observeCon = allData.recordTit
-        this.recordCon = allData.recordContent
-        if (allData.recordImg !== '') {
-          this.imgList = allData.recordImg.split(',')
-        }
-        this.termData = [allData.term]
-        // console.log('selectWData', this.selectWData)
-      })
-    },
-
-    onConfirm() {
-      this.showPicker = false
-
-      // this.currentDate是选中的时间，赋值给date
-      var date = this.currentDate
-      var seperator1 = '-'
-      var seperator2 = ':'
-      var month = date.getMonth() + 1
-      var strDate = date.getDate()
-      if (month >= 1 && month <= 9) {
-        month = '0' + month
-      }
-      if (strDate >= 0 && strDate <= 9) {
-        strDate = '0' + strDate
-      }
-      var h = date
-        .getHours()
-        .toString()
-        .padStart(2, '0')
-      var m = date
-        .getMinutes()
-        .toString()
-        .padStart(2, '0')
-
-      this.currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + ' ' + h + seperator2 + m
-
-      // 把格式化后的日期赋值给visitTime，就会显示到页面
-      this.visitTime = this.currentdate
-    },
-    cancel() {
-      this.showPicker = false
-      this.currentDate = new Date()
-    },
-    choseTime() {
-      this.showPicker = true
-      // 日期选择的最小日期
-      this.minDate = new Date(2020, 0, 1)
-      // 日期选择的最大日期
-      this.maxDate = new Date(2099, 11, 1)
-    }
-  },
-  watch: {
-    selectWData(val) {
-      // console.log('val', val)
-      if (val.length === 0) {
-        this.wei = true
-      } else {
-        this.wei = false
-      }
-    },
-    termData(val) {
-      if (val === '') {
-        this.term = true
-      } else {
-        this.term = false
-      }
-    },
-    visitTime(val) {
-      console.log('val', val)
-      if (val === '') {
-        this.tim = true
-      } else {
-        this.tim = false
-      }
-    }
-  },
-
-  created() {
-    // 是否显示分享和继续记录按钮。添加按钮进来不显示
-    this.shareShow = this.$route.query.shareShow * 1
-    console.log(this.shareShow)
-    if (this.$route.query.shareShow * 1 === 1) {
-      // console.log('aaaaaaaaaaaaaaaaaaaaa')
-      this.getRecord()
-    }
-    this.getData()
-    // console.log(this.$route.query)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.studentEvaluate {
-  font-size: 14px;
-  z-index: 1;
-  // min-height: 100vh;
-  background-image: linear-gradient(to bottom, #005ccd 1%, #005ccd 12%, #f6f5f8 35%, #f6f5f8 100%);
-  .rl {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    right: 0px;
-    width: 25px;
-    height: 25px;
-  }
-  .bigBlock {
-    width: 90%;
-    margin: 0 auto;
-    margin-top: 10px;
-    background-color: #fff;
-    border-radius: 15px;
-    position: relative;
-    z-index: 1;
-    // scroll-behavior: auto;
-    overflow-y: scroll;
-    box-sizing: border-box;
-    padding: 10px;
-  }
-  // 弹窗样式
-  .mask {
-    position: absolute;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 80%;
-    height: 169.42px;
-    border-radius: 8px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: center;
-    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
-    font-family: Roboto;
-    display: flex;
-    flex-direction: column;
-    .maskTit {
-      flex: 1;
-      display: flex;
-      align-items: center;
-    }
-    .maskCon {
-      flex: 1;
-      display: flex;
-      align-items: center;
-    }
-    .maskBtn {
-      width: 100%;
-      height: 50px;
-      display: flex;
-      .btn {
-        width: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-  .claName {
-    width: 100%;
-    min-height: 40px;
-    margin: 7px auto;
-    color: #101010;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .tit {
-      width: 40px;
-      min-height: 40px;
-      display: flex;
-      align-items: center;
-    }
-    .studentName {
-      flex: 1;
-      width: 100%;
-      min-height: 40px;
-      line-height: 40px;
-      // display: flex;
-      // align-items: center;
-      border-bottom: 1px solid #e7e7e7;
-    }
-    .studentName2 {
-      flex: 1;
-      width: 100%;
-      min-height: 40px;
-      line-height: 40px;
-      display: flex;
-      align-items: center;
-      border-bottom: 1px solid #e7e7e7;
-    }
-    /deep/ .van-cell {
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      border: none;
-      flex: 1;
-    }
-    .shareBtn {
-      width: 80px;
-      height: 30px;
-      line-height: 30px;
-      border-radius: 4px;
-      background-color: rgba(164, 173, 179, 1);
-      color: rgba(255, 255, 255, 1);
-      font-size: 14px;
-      text-align: center;
-      font-family: Microsoft Yahei;
-    }
-    .inpBlock {
-      // border: 1px solid rgba(187, 187, 187, 1);
-      height: 100%;
-      flex: 1;
-      .inp {
-        box-sizing: border-box;
-        height: 100%;
-        border: none;
-        margin: 0;
-        padding: 0 5px;
-        outline: none;
-        width: 100%;
-      }
-    }
-  }
-  .student {
-    height: 30px;
-    line-height: 30px;
-    display: flex;
-    justify-content: space-between;
-    .studentName {
-      width: 35%;
-      flex-shrink: 0;
-      color: rgba(0, 0, 0, 0.9);
-      font-family: Microsoft YaHei;
-      font-size: 28px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 40px; /* 142.857% */
-      border-bottom: 1px solid #e7e7e7;
-    }
-    .relevanceStudent {
-      flex: 1;
-      display: flex;
-      .relevanceName {
-        width: 70px;
-      }
-    }
-  }
-  //   观察记录
-  .EvaluateTxt {
-    box-sizing: border-box;
-    padding: 10px;
-    height: 137px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    font-family: Roboto;
-    border-radius: 10px;
-    border: 1px solid #dcdcdc;
-  }
-  //   上传图片
-  .uploadImgTit {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    box-sizing: border-box;
-    align-items: center;
-    padding: 15px 0px;
-    padding-bottom: 0;
-    color: rgba(0, 0, 0, 0.7);
-    font-family: Microsoft YaHei;
-  }
-  .uploadImg {
-    width: 100%;
-    // border-bottom: 1px solid rgba(245, 245, 245, 1);
-    .imgCon {
-      margin: 10px 0px;
-      margin-right: 3%;
-      width: 74.46px;
-      height: 66.13px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 3px;
-      background-color: rgba(255, 255, 255, 1);
-      color: rgba(16, 16, 16, 1);
-      font-size: 14px;
-      text-align: center;
-      font-family: Roboto;
-      border: 2px solid rgba(242, 241, 242, 1);
-    }
-  }
-
-  //   按钮
-  .submitBtn {
-    width: 100%;
-    height: 70px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0px 20px;
-    .btn {
-      display: inline-flex;
-      padding: 4px 5px;
-      margin-left: 5px;
-      border-radius: 6px;
-      background: #0061ff;
-      color: rgba(255, 255, 255, 1);
-    }
-  }
-  //继续记录
-  .continueXie {
-    width: 345px;
-    height: 47px;
-    line-height: 47px;
-    border-radius: 4px;
-    background-color: rgba(164, 173, 179, 1);
-    color: rgba(255, 255, 255, 1);
-    font-size: 14px;
-    text-align: center;
-    font-family: Microsoft Yahei;
-  }
-  .recordTime {
-    display: flex;
-    height: 30px;
-    align-items: center;
-    /deep/ .van-cell {
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      align-items: center;
-      border: none;
-      // width: 200px;
-      flex: 1;
-      // background-color: aqua;
-    }
-    /deep/.van-field__label {
-      width: 32px;
-    }
-    .tit {
-      width: 43.2px;
-    }
-    .cell {
-      flex: 1;
-      height: 30px;
-      border: 1px solid rgba(187, 187, 187, 1);
-    }
-  }
-}
-</style>

src/views/eva/searchstuDetail.vue

@@ -1,680 +0,0 @@
-<template>
-  <!-- 学生详情 -->
-  <div class="studentDetail" ref="tabs">
-    <bar :tit="'学生记录'" :backPage="1"></bar>
-    <div style="height: 50px;"></div>
-    <!-- 顶部学生信息开始 -->
-    <div class="top">
-      <div class="UserInfo" style="flex: 1;">
-        <div class="sInfo">
-          <div class="userName">{{ studentInfo.name }}</div>
-        </div>
-        <div class="cla">{{ studentInfo.cname }}</div>
-        <div class="backPage" v-if="isSelectShow" @click="fuClick1"></div>
-
-        <selectStyle
-          ref="claSel"
-          @shadeIsShow="shadeIsShow"
-          @update-search="handleUpdateSearch"
-          :listCont="termList"
-          :tit="'请选择学期'"
-          :choose="termData"
-        ></selectStyle>
-
-        <div class="dataNum">本学期共计{{ TermRecord.length }} 条记录</div>
-      </div>
-    </div>
-    <!-- 顶部学生信息结束 -->
-
-    <!-- 观察记录开始 -->
-    <div style="position: relative;top: -15px;">
-      <div class="observe_tit">
-        <div class="left">
-          <img class="img" src="../../assets/images/eva/Frame (4).png" alt="" />
-          <div>观察记录</div>
-        </div>
-        <img class="img" src="../../assets/images/eva/Frame (5).png" alt="" />
-      </div>
-      <div class="observe_box">
-        <div
-          class="observe_boxCon"
-          v-for="(i, index) in filtrate"
-          @click="addFil(i.id, index)"
-          :class="{ active: activeItem === index }"
-          :key="index"
-          @touchstart="touchStart(index)"
-          @touchend="touchend(index)"
-          @touchmove="gtouchmove()"
-        >
-          <div class="txt">{{ i.name }}</div>
-          <div ref="loop" class="loopList">
-            {{ i.name }}
-          </div>
-        </div>
-        <!-- </div> -->
-      </div>
-      <!-- 观察内容开始 -->
-      <van-swipe-cell
-        :swipeable="true"
-        v-show="conList.length"
-        v-for="(i, index) in conList"
-        :key="index"
-        @touchmove.stop="handleTouchMove"
-      >
-        <div class="observe_content" @click="recordContinue(i.rid)">
-          <div class="observe_contentTit">
-            <!-- {{ i.recordTit }} -->
-            观察内容
-          </div>
-          <div class="observe_contentBir">
-            <div>{{ i.username }}</div>
-            <div>{{ i.recordDate }}</div>
-          </div>
-          <div class="observe_contentTxt">
-            {{ i.recordContent }}
-          </div>
-        </div>
-        <template #right>
-          <div class="observe_contentDel" @click="delPop(i.rid)">
-            <img src="../../assets/images/eva/del.png" style="width: 20px;height: 20px;" alt="" />
-          </div>
-          <!-- <van-button square text="删除" type="danger" class="delete-button" /> -->
-        </template>
-      </van-swipe-cell>
-      <div v-show="!conList.length" style="width: 100%;height: 10px;background-color: #F0F2F5;"></div>
-      <div v-show="!conList.length" class="observe_content observe_content2">
-        <img src="../../assets//images/eva/rqq.png" alt="" />
-        <div class="tit">暂无内容</div>
-        <div class="tit2" @click="addRecord">快去添加新记录吧 ></div>
-      </div>
-
-      <!-- 观察内容结束 -->
-    </div>
-
-    <!-- 观察记录结束 -->
-
-    <pop v-show="isShowMask">
-      <template v-slot:tit>确定</template>
-      <template v-slot:con>确定删除吗</template>
-      <template v-slot:btn1>
-        <div class="btn" style="color: rgba(136,136,136,1);" @click="isShowMask = false">取消</div>
-      </template>
-      <template v-slot:btn2>
-        <div class="btn" style="color: rgba(251,67,25,1);" @click="delCon">确认</div>
-      </template>
-    </pop>
-
-    <!-- 添加记录按钮开始 -->
-    <div class="addRecord" @click="addRecord">
-      <img src="../../assets/images/eva/add.png" alt="" />
-    </div>
-    <!-- 添加记录按钮结束 -->
-  </div>
-</template>
-
-<script>
-import { selectStudentDetail } from '@/api/eva'
-// import { selectClassStudent } from '@/api/eva'
-import { selectVeiDoo } from '@/api/eva'
-import { selectRecord } from '@/api/eva'
-import { selectTerm } from '@/api/eva'
-// import { selectStuClass } from '@/api/eva'
-
-import { updateRecord } from '@/api/eva'
-// 单选
-import selectStyle from './components/selectStyle.vue'
-import bar from './components/bar.vue'
-// 弹窗组件
-import pop from './components/pop.vue'
-export default {
-  components: {
-    bar,
-    pop,
-    selectStyle
-  },
-  data() {
-    return {
-      // 遮罩层
-      isSelectShow: false,
-      activeItem: null,
-      // 观察记录数组
-      conList: [],
-      // 筛选项
-      filtrate: [],
-      // 学生信息
-      studentInfo: {},
-
-      // 请求筛选条件
-      fil: [],
-
-      // 班级学生列表
-      stuList: [],
-      // 学生id
-      stuId: '',
-      // 传参班级数据
-      classInfo: this.$route.query,
-      num: null,
-
-      // 弹窗的
-      isShowMask: false,
-      delRid: '',
-
-      termList: [],
-      termData: [],
-
-      TermRecord: [],
-      timeOutEvent: 0,
-      scorllTaps: null
-    }
-  },
-  methods: {
-    handleTouchMove(event) {
-      event.preventDefault()
-    },
-    touchStart(e) {
-      this.timeOutEvent = setTimeout(() => {
-        this.timeOutEvent = 0
-        const target = this.$refs.loop[e]
-        target.style.display = 'block'
-        if (e % 4 !== 0) {
-          console.log(0)
-          target.style.right = '0'
-        }
-      }, 500)
-      return false
-    },
-    // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
-    gtouchmove() {
-      clearTimeout(this.timeOutEvent) // 清除定时器
-      this.timeOutEvent = 0
-      // alert('取消了')
-    },
-    touchend(e) {
-      // 清除定时器
-      clearTimeout(this.timeOutEvent)
-      if (this.timeOutEvent !== 0) {
-        // 这里写要执行的内容（尤如onclick事件）
-        console.log('你这是点击，不是长按')
-      } else {
-        setTimeout(() => {
-          const target = this.$refs.loop[e]
-          target.style.display = 'none'
-        }, 1000)
-      }
-    },
-    // 获取基础数据
-    getData() {
-      // 获取学生信息
-      const data = {
-        uid: this.stuId,
-        trm: this.termData[0]
-      }
-      console.log(data)
-      selectStudentDetail(data).then(res => {
-        this.studentInfo = res[0][0]
-        console.log('获取学生信息', this.studentInfo)
-      })
-
-      // 获取所有学生记录
-      const data4 = {
-        uid: this.stuId,
-        trm: this.termData[0],
-        txt: ''
-      }
-      selectRecord(data4).then(res => {
-        console.log('获取所有学生记录', res[0])
-        this.conList = res[0]
-      })
-
-      // 获取筛选框
-      const data3 = {
-        oid: this.$store.state.user.userinfo.organizeid
-      }
-      selectVeiDoo(data3).then(res => {
-        this.filtrate = res[0]
-      })
-    },
-    selTerm() {
-      // 获取学期筛选框
-      selectTerm().then(res => {
-        console.log('获取学期筛选框', res)
-        res[0].forEach(e => {
-          if (e.defaultC === 1) {
-            this.termData.push(e.id)
-          }
-        })
-        // console.log('this.termData', this.termData)
-        this.termList = res[0]
-        this.getData()
-        this.getTermRecord()
-
-        // console.log('this.termList', this.termList)
-      })
-    },
-    // 删除弹框显示
-    delPop(e) {
-      this.delRid = e
-      this.isShowMask = true
-    },
-    // 删除数据
-    delCon() {
-      const data = [{ rid: this.delRid }]
-      updateRecord(data).then(res => {
-        if (res === 1) {
-          this.$toast({
-            message: '删除成功',
-            type: 'success'
-          })
-          this.isShowMask = false
-          this.getTermRecord()
-
-          setTimeout(() => {
-            this.getData()
-          }, 500)
-        } else {
-          this.$toast({
-            message: '删除失败',
-            type: 'fail'
-          })
-        }
-      })
-    },
-    // 筛选按钮
-    addFil(e, index) {
-      // 同一个点击第二次时取消选择
-      if (this.activeItem === index) {
-        this.activeItem = null
-        e = ''
-      } else {
-        this.activeItem = index
-      }
-
-      // this.fil.push(e)
-      const data4 = {
-        uid: localStorage.getItem('userId'),
-        trm: this.termData[0],
-        txt: e
-      }
-      // console.log(data4)
-      selectRecord(data4).then(res => {
-        console.log('获取所有学生记录', res)
-        this.conList = res[0]
-      })
-    },
-    fuClick1() {
-      this.isSelectShow = false
-      this.$refs.claSel.close()
-    },
-    shadeIsShow() {
-      console.log(11111)
-      this.isSelectShow = true
-    },
-    // 获取学期学生记录
-    getTermRecord() {
-      const data4 = {
-        uid: localStorage.getItem('userId'),
-        trm: this.termData[0],
-        txt: ''
-      }
-      // console.log(' 获取所有学生记录aaaaaaaaaaaaaaaaaaaaaaa', data4)
-      selectRecord(data4).then(res => {
-        console.log('获取所有学生记录', res)
-        this.TermRecord = res[0]
-      })
-    },
-    // 子组件调用父组件方法
-    handleUpdateSearch(e) {
-      this.isSelectShow = false
-
-      // console.log(e)
-      // 获取筛选学期所有学生记录
-      const data4 = {
-        uid: this.stuId,
-        trm: this.termData[0],
-        txt: ''
-      }
-      // console.log('data4', data4)
-      selectRecord(data4).then(res => {
-        console.log('获取所有学生记录', res[0])
-        this.conList = res[0]
-      })
-      this.getTermRecord()
-    },
-    // 添加记录按钮跳转
-    addRecord() {
-      this.$router.push(`/searchStudentEva?shareShow=${0}&isSea=${0}`)
-
-      // this.$router.push(`/searchStudentEva?shareShow=${0}&cid=${this.classInfo.cid}&CName=${this.classInfo.cName}`)
-    },
-    // 已经写过的记录卡片点击跳转
-    recordContinue(e) {
-      this.$router.push(`/searchStudentEva?shareShow=${1}&rid=${e}&isSea=${0}`)
-      // this.$router.push(
-      //   `/searchStudentEva?shareShow=${1}&cid=${this.classInfo.cid}&CName=${this.classInfo.cName}&rid=${e}`
-      // )
-    }
-  },
-  beforeRouteEnter(to, from, next) {
-    document.addEventListener(
-      'touchmove',
-      function(event) {
-        event.preventDefault()
-      },
-      false
-    )
-    next(vm => {})
-  },
-  mounted() {},
-  created() {
-    this.stuId = localStorage.getItem('userId')
-    this.selTerm()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.goods-card {
-  margin: 0;
-  background-color: #fff;
-}
-.loopList {
-  height: 20px;
-  line-height: 20px;
-  display: none;
-  position: absolute;
-  // min-width: 120px;
-  text-wrap: nowrap;
-  font-size: 12px;
-  border-radius: 5px;
-  padding: 0 5px;
-  background-color: #309cd6;
-  top: -80%;
-  color: #fff;
-  // left: 0;
-  // right: 0;
-}
-.loopList:nth-child(4n) {
-  background-color: #e0eafb;
-}
-.backPage {
-  // background-color: aquamarine;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 90vh;
-  z-index: 99;
-}
-.delete-button {
-  height: 100%;
-}
-.observe_contentDel {
-  width: 50px;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: red;
-}
-
-.observe_content {
-  // margin: 0 10px;
-  width: 100%;
-  min-height: 95px;
-  // max-height: 95px;
-  border-bottom: 1px solid #e7e7e7;
-  box-sizing: border-box;
-  padding: 0 10px;
-  overflow: hidden;
-  background-color: #fff;
-
-  .observe_contentTit {
-    //   line-height: 20px;
-    box-sizing: border-box;
-    padding: 8px 0;
-    font-weight: 550;
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: left;
-    font-family: PingFangSC-regular;
-  }
-  .observe_contentBir {
-    display: flex;
-    // color: rgba(79, 79, 79, 1);
-    color: rgba(0, 0, 0, 0.4);
-    font-size: 10px;
-    text-align: left;
-    font-family: PingFangSC-regular;
-  }
-  .observe_contentBir :first-child {
-    margin-right: 10px;
-  }
-  .observe_contentTxt {
-    margin-top: 5px;
-    // color: rgba(16, 16, 16, 1);
-    color: rgba(0, 0, 0, 0.6);
-    font-size: 12px;
-    text-align: left;
-    font-family: PingFangSC-regular;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-.studentDetail {
-  width: 100%;
-  min-height: 100vh;
-  background-color: #f0f2f5;
-  overflow: hidden;
-  //   顶部学生信息开始
-  .top {
-    margin: auto;
-    width: 100vw;
-    height: 150px;
-    background-color: #005ccd;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0 10px;
-    color: #fff;
-    .rig {
-      display: flex;
-      width: 40%;
-      height: 100%;
-      justify-content: space-around;
-
-      .topBtnS {
-        // flex: 1;
-        width: 90px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .img {
-          width: 30px;
-          height: 30px;
-        }
-      }
-    }
-
-    .UserInfo {
-      display: flex;
-      flex-direction: column;
-      // height: 55px;
-      justify-content: space-between;
-      .sInfo {
-        display: flex;
-        .userName {
-          width: 120px;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          margin-right: 5px;
-          height: 20px;
-          line-height: 20px;
-          color: #ffffff;
-          font-size: 20px;
-          text-align: left;
-          font-family: PingFangSC-regular;
-        }
-      }
-      .cla {
-        height: 20px;
-        line-height: 30px;
-        font-size: 12px;
-        color: #ffffff;
-      }
-      .dataNum {
-        // width: 150px;
-        height: 20px;
-        line-height: 20px;
-        color: #fff;
-        font-size: 16px;
-        text-align: left;
-        font-family: PingFangSC-regular;
-      }
-    }
-  }
-  //   顶部学生信息结束
-
-  //   观察记录开始
-  .observe_tit {
-    // position: relative;
-    // top: -15px;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px;
-    display: flex;
-    line-height: 20px;
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: left;
-    font-family: PingFangSC-regular;
-    align-items: center;
-    border-radius: 15px 15px 0 0;
-    // transform: translate(0, -10px);
-    background-color: #fff;
-    justify-content: space-between;
-    font-weight: bold;
-    .left {
-      display: flex;
-      align-items: center;
-    }
-    .img {
-      width: 26px;
-    }
-  }
-  .observe_box {
-    width: 100%;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: center;
-    font-family: Roboto;
-    box-sizing: border-box;
-    padding: 0 10px;
-    display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    .observe_boxCon {
-      position: relative;
-      // width: calc(100% / 5);
-      width: calc(100% / 4 - (5px * 3));
-
-      height: 30px;
-      line-height: 30px;
-      border-radius: 4px;
-      background-color: #fff;
-      color: rgba(153, 152, 152, 1);
-      font-size: 12px;
-      text-align: center;
-      font-family: Roboto;
-      box-sizing: border-box;
-      border: 1px solid rgba(231, 231, 231, 1);
-      margin-bottom: 8px;
-      margin-right: 20px;
-      .txt {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-    .observe_boxCon:nth-child(4n) {
-      margin-right: 0;
-    }
-    .active {
-      background-color: #e0eafb;
-      color: #0061ff;
-    }
-    // .observe_boxSelect {
-    //   width: 100%;
-    //   display: flex;
-    //   justify-content: flex-start;
-    //   align-items: center;
-    //   flex-wrap: wrap;
-
-    //   //   height: 100%;
-    // }
-  }
-  //   观察记录结束
-
-  //    观察内容开始
-
-  .observe_content2 {
-    margin-top: 10px;
-    border: none;
-    height: 250px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    background-color: #fff;
-    .tit {
-      margin: 5px 0;
-      color: rgba(0, 0, 0, 0.4);
-      font-family: Microsoft YaHei;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 700;
-    }
-    .tit2 {
-      color: #3681fc;
-      font-family: Microsoft YaHei;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-    }
-
-    img {
-      width: 80px;
-      height: 80px;
-    }
-  }
-  // 观察内容结束
-
-  // 添加记录按钮开始
-  .addRecord {
-    position: fixed;
-    bottom: 20px;
-    right: 10px;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background-color: #fff;
-    font-size: 14px;
-    font-family: Microsoft Yahei;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-    img {
-      width: 16px;
-      height: 16px;
-    }
-  }
-  //  添加记录按钮结束
-}
-</style>