pbl-student-table/src/components/components/askStatic2.vue

<template>
  <div class="sjBox" v-if="askJSONC && askJSONC.testJson">
    <div class="a_add_title">
      <div style="font-size: 25px">{{ askJSONC.testTitle }}</div>
    </div>
    <div class="a_addBox">
      <div
        class="a_add_box"
        v-for="(item, index) in askJSONC.testJson.testJson"
        :key="index"
      >
        <div class="a_add_head">
          <div style="width: calc(100% - 120px)">
            <!-- <el-tooltip
              effect="light"
              :content="item.teststitle"
              placement="top"
            > -->
            <el-tooltip
              effect="light"
              :content="index + 1 + '、' + item.teststitle"
              placement="top"
              popper-class="text_tooltip"
            >
              <div
                style="
                  width: auto;
                  display: block;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  word-break: break-word;
                  cursor: pointer;
                "
              >
                {{ index + 1 + "、" + item.teststitle }}
              </div>
            </el-tooltip>
            <!-- </el-tooltip> -->
            <div
              class="timuImgBox"
              v-if="
                askJSONC.testJson.testJson[index].timuList &&
                askJSONC.testJson.testJson[index].timuList.length
              "
            >
              <div
                v-for="(timg, tIndex) in askJSONC.testJson.testJson[index]
                  .timuList"
                :key="tIndex"
                class="timuImg"
                @click.stop="previewImg(timg.src)"
              >
                <img :src="timg.src" alt="" />
              </div>
            </div>
          </div>
          <el-button
            type="primary"
            @click="getA(checkJson[index].checkPerson, item.checkList)"
            >查看学生</el-button
          >
        </div>
        <div class="a_add_body">
          <div class="a_add_input width100">
            <div class="a_add_persent a_add_persent_div a_add_persent_title">
              <span>选项</span><span>小计</span><span>比例</span>
            </div>
            <div class="a_add_persent">
              <div
                class="a_add_persent_div"
                v-for="(item1, checkIndex) in item.testItem"
                :key="checkIndex"
              >
                <span
                  :class="{
                    right: item.answer.length
                      ? item.answer.indexOf(checkIndex) != -1
                      : item.answer == checkIndex,
                  }"
                >
                  <div
                    class="dot"
                    style="margin-right: 10px;"
                    v-if="
                      item.checkList[checkIndex] &&
                      item.checkList[checkIndex].imgType &&
                      item.checkList[checkIndex].imgType == 1
                    "
                  >
                    <!-- <div>选项{{checkIndex+1}}：</div> -->
                    <div
                      class="inImg"
                      @click.stop="previewImg(item.checkList[checkIndex].src)"
                    >
                      <img :src="item.checkList[checkIndex].src" alt="" />
                    </div>
                  </div>
                  <el-tooltip
                    effect="light"
                    :content="item.checkList[checkIndex]"
                    placement="top"
                    popper-class="text_tooltip"
                    v-else
                  >
                    <div
                      class="dot"
                      style="
                        max-width: calc(100% - 40px);
                        overflow: hidden;
                        width: auto;
                        cursor: pointer;
                      "
                    >
                      <span>{{ item.checkList[checkIndex] }}</span>
                    </div>
                  </el-tooltip>
                </span>
                <span>{{
                  checkJson[index].checkCount[checkIndex]
                    ? checkJson[index].checkCount[checkIndex]
                    : 0
                }}</span>
                <span>
                  <el-progress
                    :percentage="
                      checkJson[index].checkPerent[checkIndex]
                        ? checkJson[index].checkPerent[checkIndex]
                        : 0
                    "
                    :show-text="false"
                  ></el-progress>
                </span>
              </div>
              <div class="a_add_persent_div">
                <span>正确率</span>
                <span>{{
                  (checkJson[index].right ? checkJson[index].right : 0) + "%"
                }}</span>
                <span> </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="900px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div v-for="(item, index) in timu" :key="index" class="borderB">
          <div v-if="item && item.imgType && item.imgType == 1">
            <div class="inImg" @click.stop="previewImg(item.src)">
              <img :src="item.src" alt="" />
            </div>
          </div>
          <div v-else v-html="item" class="s_title"></div>
          <div class="stuBox" style="margin-top: 20px; align-items: flex-start">
            <div style="margin: 0 0 10px 0; min-width: 70px; color: #adadad;font-size:16px;">
              选择同学：
            </div>
            <div class="stuBox" style="flex-wrap: wrap">
              <span
                class="studentClass"
                v-for="(pe, pi) in person[index]"
                :key="index + '-' + pi"
                >{{ pe }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["askJSON", "checkJson"],
  data() {
    return {
      askJSONC: {},
      dialogVisible: false,
      person: [],
      timu: [],
      checkJson2: [],
    };
  },
  watch: {
    askJSON(val) {
      this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
    },
  },
  methods: {
    handleClose(done) {
      done();
    },
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    getA(person, timu) {
      this.person = person;
      this.timu = timu;
      this.dialogVisible = true;
    },
  },
  watch: {
    checkJson: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.askJSONC = this.askJSON ? this.askJSON : {};
        for (var i = 0; i < this.checkJson.length; i++) {
          // debuggerA
          let el = this.checkJson[i];
          // console.log(el);
        }
        this.checkJson2 = this.checkJson;
      },
    },
  },
  mounted() {
    // this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
    this.askJSONC = this.askJSON ? this.askJSON : {};
    for (var i = 0; i < this.checkJson.length; i++) {
      let el = this.checkJson[i];
      // console.log(el);
    }
    this.checkJson2 = this.checkJson;
  },
};
</script>

<style scoped>
.sjBox {
  margin-top: 25px;
  /* max-height: 420px; */
  overflow: auto;
}

.a_addBox {
  margin: 20px 0;
  background: #fff;
}

.a_add_box {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.a_add_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 18px;
  width: 100%;
}

.a_add_head .a_add_head_input {
  width: 300px;
}

.a_add_head .a_add_head_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.a_add_head_div img {
  cursor: pointer;
  width: 23px;
}

.a_add_head_div img + img {
  margin-left: 10px;
}

.a_add_body {
  display: flex;
  align-items: center;
}

.a_add_input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* flex-direction: column; */
  /* width: 100%; */
}

.width100 {
  width: 100%;
}

.a_add_input .a_add_persent {
  /* display: flex; */
  /* flex-direction: column; */
  width: 100%;
}

.a_add_persent_div {
  width: 100%;
  display: flex;
  align-items: center;
}

.a_add_persent_div span {
  margin: 5px 0;
}

.a_add_persent_div span:nth-child(1) {
  width: 30%;
}

.a_add_persent_div span:nth-child(2) {
  width: 7%;
}

.a_add_persent_div span:nth-child(3) {
  width: 40%;
}

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

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

/*定义滑块 内阴影+圆角*/
.sjBox::-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);
}

.right {
  color: rgb(0 123 255);
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.right::after {
  content: "";
  /* position: absolute; */
  background-image: url(../../assets/right.png);
  min-width: 15px;
  min-height: 15px;
  background-size: 100% 100%;
  margin: 0 10px;
}

.dialog_diy >>> .el-dialog__header,
.dialog_diy1 >>> .el-dialog__header {
  background: #454545 !important;
  padding: 15px 20px;
}

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

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

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

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

.dialog_diy1 >>> .el-dialog__body {
  padding: 0;
}

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

.s_title {
  /* margin-top: 10px; */
  font-size: 18px;
  margin-bottom: 10px;
  word-break: break-word;
  /* min-width: calc(100% / 2 - 200px); */
}

.stuBox {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
}

.studentClass {
  /* background: #46a1eb;
  color: #fff; */
  width: 90px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
  margin: 0 15px 0 0;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  text-overflow: ellipsis;
  font-size: 16px;
  margin-bottom: 10px;
  background: #fff;
  color: #0061ff;
  border: 1px solid #0061ff;
}

.borderB {
  margin-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
}

.inImg {
  width: 100px;
  height: 100px;
  cursor: pointer;
}
.inImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timuImgBox {
  margin: 10px 0 10px 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.timuImg {
  width: 100px;
  margin-right: 10px;
  cursor: pointer;
}

.timuImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dot{
  display:flex;
  align-items: center;
}
.dot > span{
  display:block;
  max-width: calc(100% - 20px) !important;
  width:auto !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow: hidden;
}
.dot::before{
  content:'';
  min-width: 10px;
  width: 10px;
  height: 10px;
  background: #0061ff;
  border-radius: 50%;
  margin-right: 10px;
  display: block;
}
</style>