EvenManage/src/components/pages/proAdmin/anliList.vue

<template>
  <div class="pb_content">
    <div class="pb_head">
      <div>
        <span>案例管理</span>
      </div>
    </div>
    <div class="touTop">
      <div class="touLeft">
        <!-- <div>
          <div>案例分类</div>
          <el-select v-model="anliType" clearable>
            <el-option value="0" label="所有分类"></el-option>
          </el-select>
        </div> -->
        <div>
          <div
            class="all_choose"
            v-for="(item, index) in CourseType[0]"
            :key="index"
          >
            <span>{{ item.name }}</span>
            <el-select
              v-model="courseTypeId[item.id]"
              placeholder="请选择"
              @change="search"
            >
              <el-option label="全部" value="1">全部</el-option>
              <el-option
                v-for="item1 in CourseTypeJson[item.id]"
                :key="item1.id"
                :label="item1.name"
                :value="item1.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="anliCss">
            <div>案例筛选</div>
            <el-select v-model="anliBox" clearable @change="search">
              <el-option value="" label="全部"></el-option>
              <el-option value="1" label="经典案例"></el-option>
              <el-option value="0" label="平台案例"></el-option>
            </el-select>
          </div>
        </div>
        <div @click="clear" class="clear">重置</div>
      </div>
      <div class="touRight">
        <div></div>
        <div>
          <el-button @click="dialogVisibleMember = true">分配案例</el-button>
        </div>
      </div>
    </div>
    <div class="anliBox" v-if="tableData.length">
      <div v-for="(a, aIndex) in tableData" :key="aIndex" class="anLi">
        <div class="anliImg">
          <img
            :src="a.info.cover.length > 0 ? a.info.cover[0].url : noBanner"
            alt=""
          />
        </div>
        <div class="anliBot">
          <div class="detailBox">
            <div>{{ a.info.title != "" ? a.info.title : "暂无" }}</div>
            <div>{{ a.time }}</div>
          </div>
          <div class="anliButton">
            <div>
              <el-button @click="lookDetail(a.id)">查看</el-button>
            </div>
            <div>
              <el-button @click="openScore(a, 1)">评分</el-button>
            </div>
            <div>
              <el-button @click="openScore(a, 2)">推荐</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="student_page">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        v-if="page && tableData.length"
        style="padding-bottom: 20px"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="分配案例"
      :visible.sync="dialogVisibleMember"
      :append-to-body="true"
      width="25%"
      height="80%"
      :before-close="handleClose"
      class="dialog_diy1 customWidth"
    >
      <div class="people">
        <div class="people_top">
          <div class="people_top_right">
            <div class="people_search">
              <div>选择评委</div>
              <el-select v-model="reviewer" placeholder="请选择评委">
                <el-option
                  v-for="item in reviewerBox"
                  :key="item.userid"
                  :label="item.name"
                  :value="item.userid"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          style="padding: 15px 0 0 15px"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="checkboxList"
          class="people_name"
          v-if="anliBox1.length"
          @change="handleCheckedAnliChange"
        >
          <el-checkbox v-for="item in anliBox1" :key="item.id" :label="item.id">
            <div class="t_j_box">
              <div>案例名称：</div>
              <el-tooltip
                placement="top"
                :content="item.info.title ? item.info.title : '暂无姓名'"
              >
                <span>{{
                  item.info.title ? item.info.title : "暂无姓名"
                }}</span>
              </el-tooltip>
            </div>
          </el-checkbox>
        </el-checkbox-group>
        <div style="text-align: center; margin-top: 10px" v-else>暂无数据</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMember = false">取 消</el-button>
        <el-button type="primary" @click="addCase">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="评分"
      :visible.sync="dialogVisibleScore"
      :append-to-body="true"
      width="25%"
      height="80%"
      :before-close="handleClose"
      class="dialog_diy customWidth1"
    >
      <div class="scoreBox" v-for="(s, sIndex) in scoreDetail" :key="sIndex">
        <div class="scoreCss">
          <div class="scoreTitle">
            <div><img src="../../../assets/avatar.png" alt="" /></div>
            <div>{{ s.uname }}</div>
          </div>
          <div class="anliTitle">
            <div>案例名称</div>
            <div>{{ s.title }}</div>
          </div>
          <div class="anliBrief">
            <div>案例简介</div>
            <div style="width: 650px; max-height: 150px; overflow: auto">
              {{ s.detail }}
            </div>
          </div>
          <div class="anliScore">
            <div>请选择评分</div>
            <div>
              <div class="scoreDiv">
                <div>评审维度1</div>
                <div>
                  <el-input
                    placeholder="输入分数"
                    v-model="s.scoreAll.first"
                    @change="isNumber($event, 1)"
                  ></el-input>
                </div>
              </div>
              <div class="scoreDiv">
                <div>评审维度2</div>
                <div>
                  <el-input
                    placeholder="输入分数"
                    v-model="s.scoreAll.second"
                    @change="isNumber($event, 2)"
                  ></el-input>
                </div>
              </div>
              <div class="scoreDiv">
                <div>评审维度3</div>
                <div>
                  <el-input
                    placeholder="输入分数"
                    v-model="s.scoreAll.third"
                    @change="isNumber($event, 3)"
                  ></el-input>
                </div>
              </div>
              <div class="scoreDiv">
                <div>评审维度4</div>
                <div>
                  <el-input
                    placeholder="输入分数"
                    v-model="s.scoreAll.fourth"
                    @change="isNumber($event, 4)"
                  ></el-input>
                </div>
              </div>
              <div class="scoreDiv">
                <div>评审维度5</div>
                <div>
                  <el-input
                    placeholder="输入分数"
                    v-model="s.scoreAll.fivth"
                    @change="isNumber($event, 5)"
                  ></el-input>
                </div>
              </div>
            </div>
          </div>
          <div class="anliContent">
            <textarea
              :rows="5"
              class="tAreaCss"
              placeholder="还有要说的吗..."
              v-model="s.scoreAll.content"
            ></textarea>
          </div>
          <div class="addScore" @click="addScore">进行评分</div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="推荐省级评奖"
      :visible.sync="dialogVisibleRecommend"
      :append-to-body="true"
      width="25%"
      height="80%"
      :before-close="handleClose"
      class="dialog_diy customWidth1"
    >
      <div v-for="(r, rIndex) in scoreDetail" :key="rIndex">
        <div class="reTitle">
          <div>案例名称</div>
          <div>{{ r.title }}</div>
        </div>
        <div class="reDetail">
          <div>案例简介</div>
          <div>{{ r.detail }}</div>
        </div>
        <div class="reScore">
          <div>当前得分</div>
          <div>
            <span>{{ r.sumScore }}</span
            >分
          </div>
        </div>
        <div class="reBottom">
          <div>提示:点击确定提交，即可推送到市级进行评奖</div>
          <div @click="dialogVisibleRecommend = false">取消</div>
          <div @click="addRecommend">确定提交</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      total: 0,
      // anliType: "",
      CourseType: [],
      CourseTypeJson: {},
      courseTypeId: {},
      courseTypeSon: [],
      anliBox: "",
      tableData: [],
      reviewer: "",
      reviewerBox: [],
      anliBox1: [],
      checkboxList: [],
      checkboxIdList: [],
      isIndeterminate: false,
      checkAll: false,
      dialogVisibleMember: false,
      dialogVisibleScore: false,
      dialogVisibleRecommend: false,
      noBanner: require("../../../assets/noBanner.jpg"),
      scoreDetail: [
        {
          id: "",
          uname: "",
          title: "",
          detail: "",
          scoreAll: {
            first: "",
            second: "",
            third: "",
            fourth: "",
            fivth: "",
            content: "",
          },
          sumScore: 0,
        },
      ],
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      this.getAnliList();
    },
    search() {
      this.page = 1;
      this.getAnliList();
    },
    goTo(path) {
      this.$router.push(path);
    },
    isNumber(e, t) {
      if (e < 0) {
        this.$message.error("请输入大于0的数值");
        if (t == 1) {
          this.scoreDetail[0].scoreAll.first = "";
        } else if (t == 2) {
          this.scoreDetail[0].scoreAll.second = "";
        } else if (t == 3) {
          this.scoreDetail[0].scoreAll.third = "";
        } else if (t == 4) {
          this.scoreDetail[0].scoreAll.fourth = "";
        } else {
          this.scoreDetail[0].scoreAll.fivth = "";
        }
        return;
      } else if (e > 100) {
        this.$message.error("数值不能大于100");
        if (t == 1) {
          this.scoreDetail[0].scoreAll.first = "";
        } else if (t == 2) {
          this.scoreDetail[0].scoreAll.second = "";
        } else if (t == 3) {
          this.scoreDetail[0].scoreAll.third = "";
        } else if (t == 4) {
          this.scoreDetail[0].scoreAll.fourth = "";
        } else {
          this.scoreDetail[0].scoreAll.fivth = "";
        }
        return;
      }
      let value = e.replace(/[^d]/g, ""); // 只能输入数字
      value = value.replace(/^0+(d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      value = value.replace(/(d{15})d*/, "$1"); // 最多保留15位整数
      // this.height = value;
    },
    handleCheckAllChange(val) {
      if (this.checkboxIdList.length == 0) {
        for (var i = 0; i < this.anliBox1.length; i++) {
          this.checkboxIdList.push(this.anliBox1[i].id);
        }
      }
      this.checkboxList = val ? this.checkboxIdList : [];
      this.isIndeterminate = false;
    },
    handleCheckedAnliChange(value) {
      let checkedCount = this.checkboxList.length;
      this.checkAll = checkedCount === this.anliBox1.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.anliBox1.length;
    },
    handleClose(done) {
      done();
    },
    clear() {
      for (var i = 0; i < this.CourseType[0].length; i++) {
        this.courseTypeId[this.CourseType[0][i].id] = "";
      }
      this.anliBox = "";
      this.getAnliList();
    },
    getAnliList(rc) {
      var typeE = [];
      var typea, typeb, typec, typed;
      this.tableData = [];
      for (var i = 0; i < this.CourseType[0].length; i++) {
        if (this.courseTypeId[this.CourseType[0][i].id] == "1") {
          typeE.push(this.CourseType[0][i].id);
        } else if (this.courseTypeId[this.CourseType[0][i].id] != "") {
          if (this.CourseType[0][i].name == "案例组别") {
            typea = this.courseTypeId[this.CourseType[0][i].id];
          } else if (this.CourseType[0][i].name == "年级") {
            typeb = this.courseTypeId[this.CourseType[0][i].id];
          } else if (this.CourseType[0][i].name == "学科") {
            typec = this.courseTypeId[this.CourseType[0][i].id];
          }
          this.courseTypeSon.push(this.courseTypeId[this.CourseType[0][i].id]);
        }
      }
      let params = {
        typea: typea != undefined ? typea : "",
        typeb: typeb != undefined ? typeb : "",
        typec: typec != undefined ? typec : "",
        typed: typed != undefined ? typed : "",
        typeE: typeE.join(","),
        cid: rc ? rc : "",
        cn: this.anliBox == "" ? 0 : this.anliBox,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectAnliList2", params)
        .then((res) => {
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].info = JSON.parse(this.tableData[i].info);
            this.tableData[i].overview = JSON.parse(this.tableData[i].overview);
            this.tableData[i].process = JSON.parse(this.tableData[i].process);
            this.tableData[i].proact = JSON.parse(this.tableData[i].proact);
            this.tableData[i].proexc = JSON.parse(this.tableData[i].proexc);
            this.tableData[i].results = JSON.parse(this.tableData[i].results);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectType(rc) {
      this.ajax
        .get(this.$store.state.api + "selectMatType")
        .then((res) => {
          this.CourseType = res.data;
          for (var i = 0; i < res.data[0].length; i++) {
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
              }
            }
          }
          this.getAnliList(rc);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getAdmin() {
      let params = {
        uid: this.$store.state.userInfo.userid,
        cn: "",
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "selectReviewer", params)
        .then((res) => {
          this.reviewerBox = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getReviewerOrAdmin() {
      if (this.$store.state.userInfo.type == 4) {
        this.getUser();
      } else {
        this.selectType();
      }
    },
    getUser() {
      let params = {
        uid: this.$store.state.userInfo.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectCaseUser", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            var reCid = res.data[0][0].aBox;
            this.selectType(reCid);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getAnliBox() {
      this.ajax
        .get(this.$store.state.api + "selecAnliBox2")
        .then((res) => {
          this.anliBox1 = res.data[0];
          for (var i = 0; i < this.anliBox1.length; i++) {
            this.anliBox1[i].info = JSON.parse(this.anliBox1[i].info);
            this.anliBox1[i].overview = JSON.parse(this.anliBox1[i].overview);
            this.anliBox1[i].process = JSON.parse(this.anliBox1[i].process);
            this.anliBox1[i].proact = JSON.parse(this.anliBox1[i].proact);
            this.anliBox1[i].proexc = JSON.parse(this.anliBox1[i].proexc);
            this.anliBox1[i].results = JSON.parse(this.anliBox1[i].results);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addCase() {
      if (this.reviewer == "") {
        this.$message.error("请选择评审员");
        return;
      } else if (this.checkboxList.length == 0) {
        this.$message.error("请选择案例");
        return;
      }
      let params = [
        {
          uid: this.reviewer,
          box: this.checkboxList.join(","),
        },
      ];
      this.ajax
        .post(this.$store.state.api + "insertCase", params)
        .then((res) => {
          this.$message({
            message: "分配成功",
            type: "success",
          });
          this.reviewer = "";
          this.checkboxList = [];
          this.isIndeterminate = false;
          this.checkAll = false;
          this.dialogVisibleMember = false;
        })
        .catch((err) => {
          this.$message.error("网络不佳");
          console.error(err);
        });
    },
    openScore(a, t) {
      this.scoreDetail[0].id = a.id;
      this.scoreDetail[0].title = a.info.title;
      this.scoreDetail[0].detail = a.info.courseText;
      this.scoreDetail[0].uname = a.uname;
      this.getScore(a.id, t);
    },
    getScore(id, t) {
      let params = {
        rid: id,
      };
      this.ajax
        .get(this.$store.state.api + "selectScore", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            this.scoreDetail[0].scoreAll = JSON.parse(res.data[0][0].score);
            var a = parseInt(this.scoreDetail[0].scoreAll.first);
            var b = parseInt(this.scoreDetail[0].scoreAll.second);
            var c = parseInt(this.scoreDetail[0].scoreAll.third);
            var d = parseInt(this.scoreDetail[0].scoreAll.fourth);
            var e = parseInt(this.scoreDetail[0].scoreAll.fivth);
            this.scoreDetail[0].sumScore = Math.round((a + b + c + d + e) / 5);
          } else {
            this.scoreDetail[0].scoreAll = {
              first: "",
              second: "",
              third: "",
              fourth: "",
              fivth: "",
              content: "",
            };
            this.scoreDetail[0].sumScore = 0;
          }
          if (t == 1) {
            this.dialogVisibleScore = true;
          } else {
            this.dialogVisibleRecommend = true;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addScore() {
      if (this.scoreDetail[0].scoreAll.first == "") {
        this.$message.error("请将信息填写完整");
        return;
      } else if (this.scoreDetail[0].scoreAll.second == "") {
        this.$message.error("请将信息填写完整");
        return;
      } else if (this.scoreDetail[0].scoreAll.third == "") {
        this.$message.error("请将信息填写完整");
        return;
      } else if (this.scoreDetail[0].scoreAll.fourth == "") {
        this.$message.error("请将信息填写完整");
        return;
      } else if (this.scoreDetail[0].scoreAll.fivth == "") {
        this.$message.error("请将信息填写完整");
        return;
      } else if (this.scoreDetail[0].scoreAll.content == "") {
        this.$message.error("请将信息填写完整");
        return;
      }
      let params = {
        rid: this.scoreDetail[0].id,
        suser: this.$store.state.userInfo.userid,
        s: JSON.stringify(this.scoreDetail[0].scoreAll),
      };
      this.ajax
        .get(this.$store.state.api + "addScore", params)
        .then((res) => {
          this.$message({
            message: "评分成功",
            type: "success",
          });
          this.scoreDetail = [
            {
              id: "",
              uname: "",
              title: "",
              detail: "",
              scoreAll: {
                first: "",
                second: "",
                third: "",
                fourth: "",
                fivth: "",
                content: "",
              },
              sumScore: 0,
            },
          ];
          this.dialogVisibleScore = false;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addRecommend() {
      if (this.scoreDetail[0].sumScore == 0) {
        this.$message.error("还未评审，不可推荐");
        return;
      }
      let params = {
        id: this.scoreDetail[0].id,
        rec: 1,
      };
      this.ajax
        .get(this.$store.state.api + "updateRaceRec", params)
        .then((res) => {
          this.$message({
            message: "推荐成功",
            type: "success",
          });
          this.dialogVisibleRecommend = false;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    lookDetail(aid) {
      window.open(
        window.location.origin +
          window.location.pathname +
          "/#/anliDetail?aid=" +
          aid
      );
    },
  },
  created() {
    // this.getAnliList();
    this.getAdmin();
    // this.selectType();
    this.getReviewerOrAdmin();
    this.getAnliBox();
  },
};
</script>

<style scoped>
.el-popover {
  min-width: 80px;
  text-align: center;
}
</style>

<style scoped>
.dialog_diy1 >>> .el-dialog__header,
.dialog_diy >>> .el-dialog__header {
  background: #3d67bd !important;
  padding: 15px 20px;
}
.dialog_diy1 >>> .el-dialog__header {
  text-align: center;
}
.dialog_diy1 >>> .el-dialog__title,
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy1 >>> .el-dialog__headerbtn,
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close,
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close:hover,
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy1 >>> .el-dialog__body,
.dialog_diy1 >>> .el-dialog__footer,
.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer {
  background: #fafafa;
}

.disUoloadSty >>> .el-upload--picture-card {
  display: none;
  /* 上传按钮隐藏 */
}

.tou {
  border-bottom: 1px solid #c9c9c9;
  height: 50px;
  font-size: 30px;
}

.touTop {
  margin: 15px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 95%;
}

.touLeft {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.touLeft > div:nth-child(1) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.touLeft > div > div {
  margin: 0 10px 10px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.touRight > div:nth-child(2) > .el-button {
  background: #2268bd;
  color: #fff;
}

.student_page {
  width: 95%;
  margin: 20px auto 0;
}

.anliBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 25px auto 0;
  width: 95%;
  height: 570px;
}

.anLi {
  width: 280px;
  margin: 0 20px 10px 0;
  box-shadow: 3px 1px 15px 3px #f0f0f2;
}

.anliImg {
  width: 100%;
  height: 170px;
}

.anliImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anliBot {
  background: #fff;
  border: 1px solid #f5f5f5;
  padding: 5px 0 10px 0;
  box-sizing: border-box;
}

.detailBox {
  padding: 0 0 0 10px;
  box-sizing: border-box;
}

.detailBox > div:nth-child(1) {
  font-size: 20px;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.detailBox > div:nth-child(2) {
  color: #999;
  margin-top: 5px;
  font-size: 14px;
}

.anliButton {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px 0 0 0;
}

.anliButton > div {
  margin-right: 5px;
}

.anliButton > div > .el-button {
  background: #409efe;
  color: #fff;
  width: 80px;
  border-radius: 5px;
}

.customWidth >>> .el-dialog {
  min-width: 500px !important;
}
.customWidth1 >>> .el-dialog {
  min-width: 800px !important;
}

.people {
  border: 1px solid rgb(229 229 229);
  height: 495px;
  border-radius: 5px;
  width: 100%;
  overflow: auto;
  background: #fff;
  box-shadow: 0px 0px 10px 8px #ededed;
}

.people::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.people::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #eee;
}

/*定义滑块 内阴影+圆角*/
.people::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}

.people_top {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 10px 25px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #f4f4f7;
}

.people_top_right {
  height: 40px;
  margin-bottom: 10px;
}

.people_search {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.people_search > div:nth-child(1) {
  font-size: 20px;
  margin-right: 10px;
}

.t_j_box {
  display: flex;
}

.t_j_box span:nth-child(1) {
  width: 15%;
  overflow: hidden;
  margin-right: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t_j_box span:nth-child(2) {
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.t_j_box span:nth-child(3) {
  width: calc(55% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.people_name {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 15px 0 0 15px;
}

.people_name >>> .el-checkbox {
  margin-bottom: 10px;
}
.all_choose > span {
  margin-right: 10px;
}
.clear {
  width: 70px;
  height: 35px;
  background: #2268bc;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  line-height: 35px;
  cursor: pointer;
}
.anliCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.anliCss > div:nth-child(1) {
  margin-right: 10px;
}
.scoreBox {
  background: #fff;
}
.scoreCss {
  padding: 10px;
}
.scoreTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.scoreTitle > div:nth-child(1) {
  width: 50px;
}
.scoreTitle > div:nth-child(1) > img {
  width: 100%;
  height: 100%;
}
.scoreTitle > div:nth-child(2) {
  margin-left: 15px;
}
.anliTitle,
.anliBrief,
.anliScore {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 10px 0 10px 0;
  font-size: 18px;
}
.anliTitle > div:nth-child(2),
.anliBrief > div:nth-child(2) {
  font-size: 17px;
  margin-left: 10px;
  color: #b0b0b0;
}
.anliScore > div:nth-child(2) {
  margin: -13px 0 0 20px;
}
.scoreDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px 0;
}
.scoreDiv > div:nth-child(2) {
  margin-left: 10px;
}
.scoreDiv > div:nth-child(2) >>> .el-input__inner {
  border-radius: 15px;
  background: #fafafa;
  height: 30px;
}
.anliContent {
  width: 80%;
  margin: 0 auto;
  border-top: 2px solid #ededed;
  padding: 10px 0 0 0;
}
.tAreaCss {
  resize: none;
  width: 100%;
  text-indent: 10px;
  border: 1px solid #e6e6e8;
  background: #fafafa;
}
.tAreaCss:focus-visible {
  outline: none !important;
}
.addScore {
  width: 75%;
  margin: 10px auto;
  background: #409efe;
  color: #fff;
  height: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 5px;
  cursor: pointer;
}
.reTitle {
  font-size: 18px;
}
.reTitle > div:nth-child(2) {
  width: 60%;
  border: 1px solid #dbdbdb;
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  text-indent: 10px;
  border-radius: 5px;
  margin: 10px 0;
}
.reDetail,
.reScore {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 10px 0 10px 0;
  font-size: 18px;
}
.reDetail > div:nth-child(2) {
  font-size: 17px;
  margin-left: 10px;
  color: #b0b0b0;
  width: 650px;
  max-height: 150px;
  overflow: auto;
}
.reScore > div:nth-child(2) {
  font-size: 35px;
  margin-left: 20px;
}
.reScore > div:nth-child(2) > span {
  color: #6188d5;
}
.reBottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
.reBottom > div:nth-child(2) {
  border: 1px solid #d7d7d9;
  width: 70px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 5px;
  margin: 0 10px 0 20px;
  cursor: pointer;
}
.reBottom > div:nth-child(3) {
  background: #409efe;
  color: #fff;
  height: 35px;
  line-height: 35px;
  width: 85px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}
</style>