|
|
@@ -10,8 +10,142 @@
|
|
|
:show-close="false"
|
|
|
>
|
|
|
<div class="s_body">
|
|
|
- <h1>测试</h1>
|
|
|
- <h2>{{ studentWork }}</h2>
|
|
|
+ <div class="s_b_main">
|
|
|
+ <div class="s_b_m_top">
|
|
|
+ <div>学生作业预览</div>
|
|
|
+ <span @click="close()">退出</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="s_b_m_content"
|
|
|
+ v-if="[45, 48, 52, 15, 41].includes(tool)"
|
|
|
+ >
|
|
|
+ <div class="s_b_m_tool45" v-if="[45].includes(tool)">
|
|
|
+ <div class="s_b_m_toolItem" v-for="(item, index) in testJson">
|
|
|
+ <div class="s_b_m_ti_title">
|
|
|
+ <span>{{ index + 1 }}</span>
|
|
|
+ <svg
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ viewBox="0 0 16 16"
|
|
|
+ fill="none"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M15.3536 8.35355C15.5488 8.15829 15.5488 7.84171 15.3536 7.64645L12.1716 4.46447C11.9763 4.2692 11.6597 4.2692 11.4645 4.46447C11.2692 4.65973 11.2692 4.97631 11.4645 5.17157L14.2929 8L11.4645 10.8284C11.2692 11.0237 11.2692 11.3403 11.4645 11.5355C11.6597 11.7308 11.9763 11.7308 12.1716 11.5355L15.3536 8.35355ZM1 8.5H15V7.5H1V8.5Z"
|
|
|
+ fill="#3681FC"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ <span
|
|
|
+ >{{ item.type == 1 ? "单选题：" : "多选题："
|
|
|
+ }}{{ item.teststitle }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="s_b_m_ti_option"
|
|
|
+ v-for="(item2, index2) in item.checkList"
|
|
|
+ :class="{
|
|
|
+ s_b_m_ti_o_choice:
|
|
|
+ item.type == '1'
|
|
|
+ ? userAnswer[index] == index2
|
|
|
+ : userAnswer[index].includes(index2)
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <!-- :class="{
|
|
|
+ s_b_m_ti_o_choice:
|
|
|
+ item2.type == 1
|
|
|
+ ? item2.answer == index2
|
|
|
+ : item2.answer[index].includes(index2)
|
|
|
+ }" -->
|
|
|
+ <div class="s_b_m_ti_o_btn">
|
|
|
+ <span class="s_b_m_ti_o_btn1" v-if="item.type == 1">
|
|
|
+ <!-- {{testJson}} -->
|
|
|
+ <span v-if="userAnswer[index] == index2"></span>
|
|
|
+ <!-- v-if="testJson.anwer[index] == index2" -->
|
|
|
+ </span>
|
|
|
+ <span class="s_b_m_ti_o_btn2" v-else>
|
|
|
+ <span v-if="userAnswer[index].includes(index2)">
|
|
|
+ <!-- <svg
|
|
|
+ width="8"
|
|
|
+ height="6"
|
|
|
+ viewBox="0 0 8 6"
|
|
|
+ fill="none"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ d="M7.44194 0.558058C7.68602 0.802136 7.68602 1.19786 7.44194 1.44194L3.44194 5.44194C3.19786 5.68602 2.80214 5.68602 2.55806 5.44194L0.558058 3.44194C0.313981 3.19786 0.313981 2.80214 0.558058 2.55806C0.802136 2.31398 1.19786 2.31398 1.44194 2.55806L3 4.11612L6.55806 0.558058C6.80214 0.313981 7.19786 0.313981 7.44194 0.558058Z"
|
|
|
+ fill="white"
|
|
|
+ />
|
|
|
+ </svg> -->
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <span>
|
|
|
+ <img
|
|
|
+ v-if="item2.imgType && item2.imgType === 1"
|
|
|
+ :src="item2.src"
|
|
|
+ alt=""
|
|
|
+ @click="$hevueImgPreview(item2.src)"
|
|
|
+ />
|
|
|
+ <span v-else>{{ item2 }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="s_b_m_tool48" v-if="[48, 52].includes(tool)">
|
|
|
+ <div v-html="userAnswer"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="s_b_m_tool15" v-if="[15].includes(tool)">
|
|
|
+ <div class="s_b_m_ti_title">
|
|
|
+ <div>提问：{{ testData.answerQ }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="s_b_m_ti_answer">{{ userAnswer }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="s_b_m_tool41" v-if="[41].includes(tool)">
|
|
|
+ <div class="s_b_m_t_image">
|
|
|
+ <img :src="testData.selectJson.url" alt="题目图片" />
|
|
|
+ </div>
|
|
|
+ <div class="s_b_m_t_select">
|
|
|
+ <div
|
|
|
+ class="s_b_m_t_selectItem"
|
|
|
+ v-for="(item, index) in testData.selectJson.answer"
|
|
|
+ >
|
|
|
+ <el-select v-model="userAnswer[index]" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="(item2, index2) in testData.selectJson.select"
|
|
|
+ :disabled="true"
|
|
|
+ :key="index2"
|
|
|
+ :label="item2"
|
|
|
+ :value="index2"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="s_b_m_tool47" v-if="[47].includes(tool)">
|
|
|
+ <div class="s_b_m_sortItem" v-for="(item, index) in testData.sentenceList">
|
|
|
+ <div class="s_b_m_ti_title">
|
|
|
+ <span></span>
|
|
|
+ <span>第{{ index + 1 }}题</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="s_b_m_s_answer">
|
|
|
+ <span v-for="(item2,index2) in userAnswer[index]">{{ item2 }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -19,19 +153,115 @@
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- components:{
|
|
|
-
|
|
|
- },
|
|
|
+ components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- show:false,
|
|
|
- studentWork:null
|
|
|
- }
|
|
|
+ show: false,
|
|
|
+ toolList: [
|
|
|
+ {
|
|
|
+ label: "选择题",
|
|
|
+ value: 45,
|
|
|
+ img: require("../../assets/icon/thirdToolList/choose.png")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "表格",
|
|
|
+ value: 48,
|
|
|
+ img: require("../../assets/icon/fourthToolList/table.png")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "文档",
|
|
|
+ value: 52,
|
|
|
+ img: require("../../assets/icon/fourthToolList/text.png")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "学生分组",
|
|
|
+ value: 49,
|
|
|
+ img: require("../../assets/icon/fourthToolList/group.png")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "电子白板",
|
|
|
+ value: 1,
|
|
|
+ img: require("../../assets/icon/secondToolList/whiteBoard.png")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "问答题",
|
|
|
+ value: 15,
|
|
|
+ img: require("../../assets/icon/thirdToolList/answer.png")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "选择匹配",
|
|
|
+ value: 41,
|
|
|
+ img: require("../../assets/icon/thirdToolList/select.png")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "排序",
|
|
|
+ value: 47,
|
|
|
+ img: require("../../assets/icon/fourthToolList/conSentences.png")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "个人评价",
|
|
|
+ value: 40,
|
|
|
+ img: require("../../assets/icon/secondToolList/eval.png")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "思维网格",
|
|
|
+ value: 7,
|
|
|
+ img: require("../../assets/icon/secondToolList/mindNetwork.png")
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ studentWork: null,
|
|
|
+ testData: null,
|
|
|
+ testJson: null,
|
|
|
+ tool: null
|
|
|
+ };
|
|
|
},
|
|
|
methods: {
|
|
|
- open({work,tool}){
|
|
|
- this.show = true
|
|
|
- this.studentWork = work
|
|
|
+ open({ work, testData, testJson, tool }) {
|
|
|
+ this.studentWork = work;
|
|
|
+ (this.testData = testData),
|
|
|
+ (this.testJson = testJson),
|
|
|
+ (this.tool = tool);
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.show = false;
|
|
|
+ (this.studentWork = null),
|
|
|
+ (this.testData = null),
|
|
|
+ (this.testJson = null),
|
|
|
+ (this.tool = null);
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.studentWork = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ userAnswer() {
|
|
|
+ let _result = [];
|
|
|
+
|
|
|
+ if (this.studentWork && this.tool) {
|
|
|
+ let _studentWorks = [41].includes(this.tool)
|
|
|
+ ? this.studentWork.works
|
|
|
+ : JSON.parse(this.studentWork.works);
|
|
|
+ if ([45].includes(this.tool)) {
|
|
|
+ let _answer = _studentWorks[0].anwer;
|
|
|
+ _result = _answer;
|
|
|
+ } else if ([48, 52].includes(this.tool)) {
|
|
|
+ let _answer = _studentWorks.text;
|
|
|
+ _result = _answer;
|
|
|
+ } else if ([15].includes(this.tool)) {
|
|
|
+ let _answer = _studentWorks[0].answer;
|
|
|
+ _result = _answer;
|
|
|
+ } else if ([41].includes(this.tool)) {
|
|
|
+ let _answer = _studentWorks.split(",");
|
|
|
+ _answer.forEach((item, index) => (_answer[index] = parseInt(item)));
|
|
|
+ _result = _answer;
|
|
|
+ } else if ([47].includes(this.tool)) {
|
|
|
+ let _answer = _studentWorks.map(i => i.chooseSenList);
|
|
|
+ _result = _answer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return _result;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -63,4 +293,229 @@ export default {
|
|
|
padding: 25px;
|
|
|
background-color: #f3f7fd;
|
|
|
}
|
|
|
+
|
|
|
+.s_b_main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_top {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 30px;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_top > span {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title > span:nth-of-type(1) {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3681fc;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title > svg {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin: 0 20px 0 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title > span:nth-of-type(2) {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title > div {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_content {
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ height: calc(100% - 70px);
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_content > div {
|
|
|
+ width: 70%;
|
|
|
+ height: auto;
|
|
|
+ margin: 0 auto;
|
|
|
+ min-width: 1000px;
|
|
|
+ padding: 10px 0 30px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_toolItem {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_option {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 15px 15px 15px 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background-color: #f3f7fd;
|
|
|
+ border-radius: 30px;
|
|
|
+ margin: 10px 0 10px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_option > span > img {
|
|
|
+ max-height: 150px;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn {
|
|
|
+ width: 20px;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn > span {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ display: block;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: solid 1px #3681fc;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn > span > span {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #3681fc;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn1 {
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn1 > span::after {
|
|
|
+ content: "";
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ position: absolute;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn2 {
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+/*
|
|
|
+.s_b_m_ti_o_btn2 > span > svg {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+} */
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn2 > span::after {
|
|
|
+ content: "";
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ position: absolute;
|
|
|
+ background-color: #fff;
|
|
|
+ /* border-radius: 50%; */
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_choice {
|
|
|
+ border: solid 1px #3681fc;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_tool48 >>> table {
|
|
|
+ border-top: solid 1px #ccc;
|
|
|
+ border-left: solid 1px #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_tool48 >>> table th {
|
|
|
+ border-bottom: 2px solid #ccc;
|
|
|
+ text-align: center;
|
|
|
+ height: 30px;
|
|
|
+ vertical-align: baseline;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ padding: 5px 10px;
|
|
|
+ max-width: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_tool48 >>> table td {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ padding: 5px 10px;
|
|
|
+ text-align: center;
|
|
|
+ height: 30px;
|
|
|
+ min-height: 30px;
|
|
|
+ vertical-align: baseline;
|
|
|
+ max-width: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_answer {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #4078dd;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_tool41 {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_t_image {
|
|
|
+ width: calc(100% - 350px);
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_t_image > img {
|
|
|
+ width: 95%;
|
|
|
+ height: auto;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_t_select {
|
|
|
+ width: 350px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_t_selectItem {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_sortItem{
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_s_answer{
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: solid 2px red;
|
|
|
+}
|
|
|
</style>
|
SanHQin