####

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

@@ -0,0 +1,433 @@
+<template>
+  <div class="popbox">
+    <div class="tit">
+      <h2>{{ judgeNum ? "修改" : "查看" }}</h2>
+    </div>
+    <div class="cellBlock">
+      <div class="username">姓名</div>
+      <div>
+        <el-input
+          v-model="recordData.studentName"
+          disabled
+          placeholder="请输入内容"
+        ></el-input>
+      </div>
+    </div>
+    <div class="cellBlock">
+      <div class="username">班级</div>
+      <div>
+        <el-input
+          v-model="recordData.className"
+          disabled
+          placeholder="请输入内容"
+        ></el-input>
+      </div>
+    </div>
+    <div class="cellBlock">
+      <div class="username">关联</div>
+
+      <el-select
+        multiple
+        collapse-tags
+        v-model="popTact"
+        placeholder="请选择关联同学"
+        @change="tactChange"
+        style="width: 100%"
+      >
+        <el-option
+          v-for="(item, index) in studentList"
+          :key="index"
+          :label="item.name"
+          :value="item.id"
+        ></el-option>
+      </el-select>
+      <!-- <div class="conCant" @click="tactShow">
+        <div class="conCantTxt">
+          <div
+            v-for="i in studentList"
+            class="tactListCell"
+            :style="{ display: popTact.includes(i.id) ? '' : 'none' }"
+            :key="i.id"
+          >
+            <div>
+              {{ i.name }}
+            </div>
+            <img
+              :style="{ display: popTact.includes(i.id) ? '' : 'none' }"
+              @click.stop="delStu(i.id)"
+              src="@/assets/cha.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div :style="{ display: gIco ? 'block' : 'none' }" class="tactList">
+          <div v-for="i in studentList" @click="chooseStu(i.id)" :key="i.id">
+            <div :style="{ color: popTact.includes(i.id) ? 'blue' : '' }">
+              {{ i.name }}
+            </div>
+          </div>
+        </div>
+        <i
+          class="iSty"
+          :class="gIco ? 'el-icon-arrow-down' : 'el-icon-arrow-left'"
+        ></i>
+      </div> -->
+    </div>
+    <div class="cellBlock">
+      <div class="username">学期</div>
+      <div>
+        <el-select v-model="recordData.semName" placeholder="请选择">
+          <el-option
+            v-for="item in termList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <!-- <el-input
+          v-model="recordData.semName"
+          placeholder="请输入内容"
+        ></el-input> -->
+      </div>
+    </div>
+    <div class="cellBlock">
+      <div class="username">纬度</div>
+      <el-select
+        multiple
+        collapse-tags
+        v-model="popType"
+        placeholder="请选择教研室"
+        @change="tactChange"
+        style="width: 100%"
+      >
+        <el-option
+          v-for="(item, index) in weiList"
+          :key="index"
+          :label="item.name"
+          :value="item.id"
+        ></el-option>
+      </el-select>
+      <!-- <div class="conCant" @click="weiShow">
+        <div class="conCantTxt">
+          <div
+            v-for="i in weiList"
+            class="tactListCell"
+            :style="{ display: popType.includes(i.id) ? '' : 'none' }"
+            :key="i.id"
+          >
+            <div>
+              {{ i.name }}
+            </div>
+            <img
+              :style="{ display: popType.includes(i.id) ? '' : 'none' }"
+              @click.stop="delWei(i.id)"
+              src="@/assets/cha.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div :style="{ display: ico ? 'block' : 'none' }" class="tactList">
+          <div v-for="i in weiList" @click="choose(i.id)" :key="i.id">
+            <div :style="{ color: popType.includes(i.id) ? 'blue' : '' }">
+              {{ i.name }}
+            </div>
+          </div>
+        </div>
+        <i
+          class="iSty"
+          :class="ico ? 'el-icon-arrow-down' : 'el-icon-arrow-left'"
+        ></i>
+      </div> -->
+    </div>
+    <div class="cellBlock">
+      <div class="username">时间</div>
+      <div>
+        <!-- format="yyyy-MM-dd HH:mm" -->
+        <el-date-picker
+          v-model="recordData.create_at"
+          type="date"
+          placeholder="选择日期"
+        >
+        </el-date-picker>
+        <!-- <el-input
+          v-model="recordData.create_at"
+          placeholder="请输入内容"
+        ></el-input> -->
+      </div>
+    </div>
+    <div class="cellBlock">
+      <div class="username">地点</div>
+      <div>
+        <el-input
+          v-model="recordData.place"
+          placeholder="请输入内容"
+        ></el-input>
+      </div>
+    </div>
+    <div class="cellBlock">
+      <div class="username">观察内容</div>
+      <div>
+        <el-input
+          v-model="recordData.recordTit"
+          placeholder="请输入内容"
+        ></el-input>
+      </div>
+    </div>
+    <div style="margin: 15px 0;">
+      观察记录
+    </div>
+    <div>
+      <el-input
+        type="textarea"
+        placeholder="请输入内容"
+        resize="none"
+        rows="6"
+        v-model="recordData.recordContent"
+      >
+      </el-input>
+    </div>
+
+    <div>
+      图片
+    </div>
+    <div class="imgBlock">
+      <div class="imgCell">
+        +
+        <input
+              type="file"
+              accept="image/*"
+              capture="camera"
+              style="display: none"
+              @change="beforeUpload($event)"
+            />
+      </div>
+      <div v-if="recordData.recordImg.length">
+        <img
+          class="imgCellCon"
+          v-for="(i, index) in recordData.recordImg"
+          :key="index"
+          :src="i"
+          alt=""
+        />
+      </div>
+    </div>
+    <button>修改</button>
+    <div v-if="isShadow" @click="isShadowShow" class="shadow"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    judgeNum: {
+      type: Number,
+      default: 0
+    },
+    recordData: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    termList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    weiList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    studentList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      wei: [],
+      popType: [],
+      popTact: this.recordData.contact,
+      ico: false,
+      gIco: false,
+      isShadow: false
+    };
+  },
+  methods: {
+    tactChange() {
+      console.log(this.popTact);
+    },
+    isShadowShow() {
+      this.ico = false;
+      this.gIco = false;
+      this.isShadow = false;
+    },
+    weiShow() {
+      this.ico = true;
+      this.isShadow = true;
+    },
+    tactShow() {
+      this.gIco = true;
+      this.isShadow = true;
+    },
+    // 判断弹出选项列表
+    icoIsShow() {
+      this.ico = !this.ico;
+    },
+    // 判断学生是否被选中
+    choose(e) {
+      console.log("判断学生是否被选中", e);
+      if (this.popType.includes(e)) return;
+      this.popType.push(e);
+
+      // console.log(this.choosePer)
+    },
+    chooseStu(e) {
+      if (this.popTact.includes(e)) return;
+      this.popTact.push(e);
+    },
+    delWei(e) {
+      console.log("删除学生", e);
+      const iii = this.popType.indexOf(e);
+      this.popType.splice(iii, 1);
+    },
+    // 删除学生
+    delStu(e) {
+      console.log("删除学生", e);
+      const iii = this.popTact.indexOf(e);
+      this.popTact.splice(iii, 1);
+      //   console.log()
+    },
+
+    // 此方法在父元素中被调用
+    fuClick() {
+      this.popType = [];
+      console.log("此方法在父元素中被调用", this.popType);
+
+      // console.log(111)
+      // this.ico = !this.ico
+    }
+  },
+  mounted() {
+    this.popType = this.recordData.type;
+  }
+};
+</script>
+
+<style scoped>
+.shadow {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  /* background-color: rgba(0, 0, 0, 0.5); */
+}
+.popbox {
+  width: 500px;
+  background-color: #fff;
+  /* height: 500px; */
+  padding: 10px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  border-radius: 10px;
+  box-shadow: 0 0 10px #ccc;
+}
+
+.tit {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 10px;
+}
+.cellBlock {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.username {
+  min-width: 40px;
+  text-align: right;
+  margin-right: 10px;
+  display: flex;
+  justify-content: flex-end;
+  /* justify-content: space-between; */
+}
+::v-deep .el-input__inner {
+  width: 200px;
+}
+.conCant {
+  position: relative;
+  border: 1px solid #ccc;
+  width: 200px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+.conCantTxt {
+  display: flex;
+  justify-content: flex-start;
+  margin-right: 5px;
+  flex-wrap: wrap;
+  position: relative;
+}
+.tactList {
+  position: absolute;
+  left: 0;
+  top: 110%;
+  width: 200px;
+  height: 200px;
+  overflow-y: scroll;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  z-index: 10;
+  box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.tactListCell {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 2px 5px;
+  background-color: #ccc;
+}
+.iSty {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+.imgBlock {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.imgCell {
+  width: 100px;
+  height: 100px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: #ccc 1px solid;
+}
+</style>

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

@@ -1,13 +1,573 @@
 <template>
-  
+  <div class="diary">
+    <div
+      style="background-color: #fff;width: 100%;height: 100%;box-sizing: border-box; padding: 15px;"
+    >
+      <!-- 分类与导出 -->
+      <div class="top">
+        <div class="oneType">
+          <div
+            v-for="(i, index) in VeidooList"
+            :key="index + 'a'"
+            :class="Veidoo == i.id ? 'onTypeTxt' : 'onTypeTxt2'"
+            @click="changeType(i)"
+          >
+            {{ i.name }}
+            <div
+              class="line"
+              :style="{ display: Veidoo == i.id ? 'block' : 'none' }"
+            ></div>
+          </div>
+        </div>
+        <div class="wordBtn">
+          导出Excel
+        </div>
+        <div class="twoType">
+          <div
+            v-for="(i, index) in VeidooListChild"
+            :key="index + 'b'"
+            :class="VeidooChild == i.id ? 'twoTypeTxt' : 'twoTypeTxt2'"
+            @click="changeTypeChild(i)"
+          >
+            {{ i.name }}
+          </div>
+        </div>
+      </div>
+      <div class="selectSty">
+        <div style="margin-right: 10px;">时间筛选</div>
+        <el-select v-model="termValue" placeholder="请选择">
+          <el-option
+            v-for="item in termList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+            @click.native="changeTerm(item.id)"
+          >
+          </el-option>
+        </el-select>
+      </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)'
+        }"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          type="selection"
+          align="center"
+          label="全选"
+          :show-overflow-tooltip="true"
+          width="55"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="create_at"
+          label="创建时间"
+          align="center"
+          width="120"
+        >
+          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
+        </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-column
+          label="操作"
+          align="center"
+          width="175px"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <div class="evaluate">
+              <div
+                class="TableBtn"
+                style="color: #3681FC;"
+                @click="lookRecord(scope.row)"
+              >
+                查看
+              </div>
+              <div class="TableBtn" style="color: #3681FC;">修改</div>
+              <div
+                class="TableBtn"
+                style="color: #EE3E3E;"
+                @click="delRecord(scope.row)"
+              >
+                删除
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <el-pagination
+        @current-change="handleCurrentChange"
+        background
+        :page-size="8"
+        layout="prev, pager, next"
+        :total="total"
+        class="pagination"
+      >
+      </el-pagination>
+    </div>
+    <div v-if="isPop" @click="closePop" class="shade"></div>
+    <popbox
+      ref="refPop"
+      v-if="isPop"
+      :judgeNum="judgeNum"
+      :recordData="recordData"
+      :termList="termList"
+      :weiList="weiList"
+      :studentList="studentList"
+    ></popbox>
+  </div>
 </template>
 
 <script>
+import popbox from "./component/popbox";
 export default {
+  components: {
+    popbox
+  },
+  data() {
+    return {
+      // 筛选数据
+      VeidooList: [],
+      VeidooListChild: [],
+      // 默认选择项
+      // VeidooValue:{},
+      // 默认选择项
+      termValue: "",
+      // 学期数据
+      termList: [],
 
-}
-</script>
+      // 要提交的筛选数据项
+      Veidoo: "",
+      VeidooChild: "",
+      termId: "",
+      page: 1, //当前页数，默认为第一页
+
+      // 本页多少条数
+      total: 0,
+
+      tableData: [],
+      multipleSelection: [],
+
+      // 组件信息数据
+      isPop: false,
+      recordData: {},
+      recordDataCopy:{},
+      weiList: [],
+      studentList: [],
+      judgeNum:0
+    };
+  },
+  methods: {
+    closePop() {
+      this.isPop = false;
+      this.$refs.refPop.fuClick();
+    },
+
+    handleCurrentChange(val) {
+      //当页数发生改变的时候调用获取列表数据请求
+      // console.log(`当前页: ${val}`);
+      this.Page = val;
+      this.selectData();
+    },
+    // 获取数据
+    getData() {
+      // 获取筛选框数据
+      let params = {
+        uid: this.$route.query.userid,
+        cid: this.$route.query.cid,
+        org: this.$route.query.org,
+        cu: ""
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectSETable", params)
+        .then(res => {
+          this.isLoading = false;
+          // console.log("获取筛选框数据", res);
+          // let data = res.data;
+          let ftype = res.data[1];
+          ftype.unshift({
+            id: "df8f3f1c-b34b-11ee-b534-005056b86db5",
+            name: "艺术",
+            create_at: "2024-01-15"
+          });
+          let stype = res.data[2];
+
+          ftype.forEach((e, index) => {
+            ftype[index][e.id] = [];
+          });
+
+          // 大数组套小数组循环，进行push操作，最后手动添加艺术
+          ftype.forEach((e, w) => {
+            stype.forEach((k, index) => {
+              if (e.id == k.pid) {
+                // console.log("e.id", ftype[w][e.id]);
+                ftype[w][e.id].push(k);
+              }
+            });
+            if (e.id == "df8f3f1c-b34b-11ee-b534-005056b86db5") {
+              ftype[w][e.id].push(
+                {
+                  id: "be640459-b34d-11ee-b534-005056b86db5",
+                  name: "感受与欣赏",
+                  pid: "df8f3f1c-b34b-11ee-b534-005056b86db5",
+                  create_at: "2024-01-15"
+                },
+                {
+                  id: "c862767f-b34d-11ee-b534-005056b86db5",
+                  name: "艺术与创造",
+                  pid: "df8f3f1c-b34b-11ee-b534-005056b86db5",
+                  create_at: "2024-01-15"
+                }
+              );
+            }
+          });
+          this.VeidooList = ftype.reverse();
+
+          // 渲染完数据后立即查询一次默认筛选项
+          this.changeType(this.VeidooList[0]);
 
-<style>
+          // 学期数据
+          this.ajax
+            .get(this.$store.state.api + "selectTerm", {})
+            .then(res => {
+              this.isLoading = false;
+              console.log("学期数据", res.data[0]);
+              this.termList = res.data[0];
+              this.termList.forEach(e => {
+                if (e.defaultC == 1) {
+                  this.termId = e.id;
+                  this.termValue = e.name;
+                }
+              });
 
-</style>
+              // 调用获取数据方法
+              this.selectData();
+            })
+            .catch(err => {
+              this.isLoading = false;
+              console.error(err);
+            });
+          // console.log("ftype1", ftype);
+        })
+        .catch(err => {
+          this.isLoading = false;
+          console.error(err);
+        });
+
+      // 获取纬度筛选框
+      const data = {
+        oid: this.$route.query.org,
+        cla: 0
+      };
+
+      this.ajax.get(this.$store.state.api + "selectVeiDoo", data).then(res => {
+        // console.log(res);
+        this.weiList = res.data[0];
+        console.log("this.weiList", res);
+      });
+      // 获取班学生列表
+      const data2 = {
+        cid: this.$route.query.cid,
+        // uid: this.$route.query.suid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectClassStudent", data2)
+        .then(res => {
+          // console.log(res);
+          this.studentList = res.data[0];
+          console.log("this.studentList", res);
+        });
+      // (data2).then(res => {
+      //   // res[0].forEach(e => {
+      //   //   if (e.id === this.$route.query.uid) {
+      //   //     this.stuName = e
+      //   //   } else {
+      //   //     this.studentList.push(e)
+      //   //   }
+      //   // })
+
+      //   console.log("this.studentList", this.studentList);
+      // });
+
+      // selectVeiDoo(data).then(res => {
+      //   this.weiList = res[0];
+      // });
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+      console.log(this.multipleSelection);
+    },
+    // 点击大筛选项
+    changeType(e) {
+      // console.log(e[e.id]);
+      // 点击大筛选项，清除小筛选项
+      this.VeidooChild = "";
+
+      this.Veidoo = e.id;
+      this.VeidooListChild = e[e.id];
+      this.selectData();
+    },
+    // 点击小选项
+    changeTypeChild(e) {
+      if (this.VeidooChild == e.id) {
+        this.VeidooChild = "";
+      } else {
+        this.VeidooChild = e.id;
+      }
+      this.selectData();
+    },
+    // 点击学期
+    changeTerm(e) {
+      console.log(e);
+      this.termId = e;
+      this.selectData();
+    },
+    // 获取筛选数据
+    selectData() {
+      let data = {
+        uid: this.$route.query.suid,
+        cid: this.$route.query.cid,
+        cu: this.Veidoo,
+        cn: this.VeidooChild,
+        cm: this.termId,
+        page: this.page,
+        lim: 8
+      };
+      // return console.log("selectData", data);
+      this.ajax
+        .get(this.$store.state.api + "selectVeidooType", data)
+        .then(res => {
+          this.isLoading = false;
+          this.tableData = res.data[0];
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          console.log(" 获取筛选数据", res);
+        });
+    },
+    delRecord(e) {
+      return console.log(e);
+      this.ajax
+        .get(this.$store.state.api + "selectSETable", { rid: e.rid })
+        .then(res => {
+          this.isLoading = false;
+        });
+    },
+    lookRecord(e) {
+      this.judgeNum=0
+      console.log("eeeeeeeeeeeeeeeeeee", e);
+      this.isPop = true;
+      if (!Array.isArray(e.type)) {
+        if (e.contact == "") {
+          e.type = [];
+        } else {
+          e.type = e.type.split(",");
+        }
+      }
+      if (!Array.isArray(e.contact)) {
+        if (e.contact == "") {
+          e.contact = [];
+        } else {
+          e.contact = e.contact.split(",");
+        }
+      }
+      if (!Array.isArray(e.recordImg)) {
+        if (e.contact == "") {
+          e.recordImg = [];
+        } else {
+          e.recordImg = e.recordImg.split(",");
+        }
+      }
+      this.recordData = e;
+    }
+  },
+  created() {
+    this.getData();
+  },
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.selectData();
+    // });
+  }
+};
+</script>
+
+<style scoped>
+.shade {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+/* .el-pager li{
+  background-color: #fff !important;
+  border: 1px solid #DCDCDC !important;
+}
+.el-pager li:nth-child(1){
+  background-color: #fff !important;
+  border: none !important;
+} */
+.el-table__cell {
+  text-align: center !important;
+}
+.diary {
+  box-sizing: border-box;
+  padding: 15px;
+  height: 100%;
+}
+.top {
+  width: 100%;
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.oneType {
+  display: flex;
+  justify-content: flex-start;
+  /* flex-direction: column; */
+}
+.onTypeTxt {
+  cursor: pointer;
+  display: flex;
+  font-size: 16px;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: rgba(54, 129, 252, 1);
+}
+.onTypeTxt2 {
+  cursor: pointer;
+  display: flex;
+  font-size: 16px;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: rgba(0, 0, 0, 0.9);
+}
+.line {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 0);
+  height: 3px;
+  background-color: #3681fc;
+  width: 50%;
+}
+.wordBtn {
+  cursor: pointer;
+  background-color: #3681fc;
+  color: #fff;
+  width: 100px;
+  height: 34px;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.twoType {
+  position: absolute;
+  display: flex;
+  top: 120%;
+  left: 0;
+}
+.twoTypeTxt {
+  cursor: pointer;
+  box-sizing: border-box;
+  min-width: 76px;
+  padding: 0 10px;
+  height: 34px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  background-color: #3681fc;
+  border-radius: 3px;
+  border: 1px solid #e7e7e7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 15px;
+}
+.twoTypeTxt2 {
+  cursor: pointer;
+  box-sizing: border-box;
+  min-width: 76px;
+  padding: 0 10px;
+  height: 34px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #000;
+  border-radius: 3px;
+  border: 1px solid #e7e7e7;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 15px;
+}
+.selectSty {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  /* margin-top: 60px; */
+  margin: 80px 10px 40px 0;
+}
+.evaluate {
+  text-align: center;
+  font-family: "Microsoft YaHei";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px; /* 157.143% */
+  display: flex;
+  justify-content: space-around;
+}
+.TableBtn {
+  cursor: pointer;
+}
+.pagination {
+  margin-top: 20px;
+  float: right;
+}
+</style>

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

@@ -1,13 +1,124 @@
 <template>
-  
+  <div class="report">
+    <div
+      style="background-color: #fff;width: 100%;height: 100%;box-sizing: border-box; padding: 15px;"
+    >
+      <div class="top">
+        <div style="width: 348px;height: 40px;flex-shrink: 0;">
+          <el-select v-model="value" style="width: 100%;" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+
+        <div class="topBtnS">
+          <div class="btn">生成pdf</div>
+          <div class="btn">分享报告</div>
+        </div>
+      </div>
+      <div style="margin: 20px 10px;">
+        学期综合表现
+      </div>
+      <div class="content">
+        <div class="conTitle">
+          <div>综合评价:</div>
+          <div class="txt">表现优异，再接再厉!</div>
+        </div>
+        <div>
+          <radarmap></radarmap>
+        </div>
+      </div>
+      <div></div>
+    </div>
+  </div>
 </template>
 
 <script>
+import radarmap from "./component/radarmap";
 export default {
-
-}
+  components: {
+    radarmap
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕"
+        }
+      ],
+      value: ""
+    };
+  },
+  methods: {},
+  mounted() {
+    // this.eChartsData()
+  },
+  created() {}
+};
 </script>
 
-<style>
-
-</style>
+<style scoped>
+.report {
+  box-sizing: border-box;
+  padding: 15px;
+  height: 100%;
+}
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  margin-bottom: 10px;
+}
+.topBtnS {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  margin-bottom: 10px;
+}
+.btn {
+  border-radius: 8px;
+  border: 1px solid #3681fc;
+  color: rgba(54, 129, 252, 1);
+  display: inline-flex;
+  padding: 5px 16px;
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+  gap: 10px;
+}
+.content {
+  width: 100%;
+  height: 553px;
+  flex-shrink: 0;
+  border-radius: 16px;
+  border: 1px solid var(--bg3, #e7e7e7);
+  background: #fff;
+}
+.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;
+}
+</style>