From 11433c56279d667305b0b627e205000851bc0456 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 25 六月 2024 15:34:55 +0800
Subject: [PATCH] 新增pdf预览功能
---
src/views/examination/components/list.vue | 258 +++++++++++++++++++--------------------------------
1 files changed, 97 insertions(+), 161 deletions(-)
diff --git a/src/views/examination/components/list.vue b/src/views/examination/components/list.vue
index 9db588d..216bf7a 100644
--- a/src/views/examination/components/list.vue
+++ b/src/views/examination/components/list.vue
@@ -118,7 +118,13 @@
:preview-src-list="[getPublicImage(content.img)]"
v-if="isReal"
></el-image>
- <img :src="content.img" alt="" v-if="!isReal" class="radio-img" />
+ <img :src="content.img" alt="" v-if="value.isJson" class="radio-img" />
+ <el-image
+ v-else
+ :src="getPublicImage(content.img, 115)"
+ v-show="content.img"
+ :preview-src-list="[getPublicImage(content.img)]"
+ ></el-image>
</p>
<p class="optionContent" v-else-if="value.optionStyle == 'TxtAndImage'">
<span> {{ content.value }}銆�</span><span>{{ content.txt }}</span>
@@ -215,37 +221,30 @@
</div>
<!-- 鎻愪氦鍚庤В鏋� -->
<div class="analysis" v-if="value.isComplete">
- <el-collapse
- v-model="value.isUnfold"
- @change="handleChange(value)"
- accordion
- v-if="value.questionType != 'shortAnswer'"
- >
- <el-collapse-item :name="value.id" class="objective">
- <template #title>
- <div class="headerBox">
- <div class="headerConent">
- <!-- 姝ｇ‘閿欒鏍囪瘑 -->
- <ul class="mark">
- <li v-if="value.isRight" class="mark-correct">姝ｇ‘</li>
- <li v-if="value.isRight == false" class="mark-error">閿欒</li>
- </ul>
- <p class="correct" :title="arrayToString(value.answer)">
- <span>姝ｇ‘绛旀锛�</span>
- <span v-html="arrayToString(value.answer)" class="correctBox"></span>
- </p>
- <p
- :class="value.isRight ? 'correct textOverFlow' : 'error textOverFlow'"
- :title="arrayToString(value.userAnswer)"
- style="margin-left: 20px"
- >
- <span>鎮ㄧ殑绛旀锛�</span>
- <span class="errorBox" v-if="isHaveAnswer(value.userAnswer)">{{
- arrayToString(value.userAnswer)
- }}</span>
- </p>
- </div>
- <p class="difficulty" v-if="value.difficulty">
+ <ul class="analysis-box">
+ <li class="headerConent" style="width:60%">
+ <!-- 姝ｇ‘閿欒鏍囪瘑 -->
+ <ul class="mark">
+ <li v-if="value.isRight" class="mark-correct">姝ｇ‘</li>
+ <li v-if="value.isRight == false" class="mark-error">閿欒</li>
+ </ul>
+ <p :title="arrayToString(value.answer)">
+ <span>銆愭纭瓟妗堛�戯細</span>
+ <span v-html="arrayToString(value.answer)" class="correctBox"></span>
+ </p>
+ <p
+ :class="value.isRight ? 'correct textOverFlow' : 'error textOverFlow'"
+ :title="arrayToString(value.userAnswer)"
+ style="margin-left: 20px"
+ >
+ <span>鎮ㄧ殑绛旀锛�</span>
+ <span class="errorBox" v-if="isHaveAnswer(value.userAnswer)">{{
+ arrayToString(value.userAnswer)
+ }}</span>
+ </p>
+ </li>
+ <li>
+ <p class="difficulty" v-if="value.difficulty">
<span style="color: #333">闅惧害绛夌骇锛�</span>
<el-rate
v-model="value.difficulty"
@@ -255,50 +254,26 @@
disabled-void-color="#949494"
/>
</p>
- <!-- 姝ｇ‘閿欒鍥炬爣 -->
- <!-- <span class="mr-10">
- <svg
- v-if="value.isRight"
- t="1716986419862"
- class="icon"
- viewBox="0 0 1820 1024"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- p-id="18767"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="40"
- height="20"
- >
- <path
- d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
- fill="#1AFA29"
- p-id="18768"
- ></path>
- </svg>
- <svg
- v-if="value.isRight == false"
- t="1716987085767"
- class="icon"
- viewBox="0 0 1024 1024"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- p-id="25745"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="20"
- height="20"
- >
- <path
- d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
- fill="#d81e06"
- p-id="25746"
- ></path>
- </svg>
- </span> -->
+ </li>
+ </ul>
+ <el-collapse
+ v-model="value.isUnfold"
+ @change="handleChange(value)"
+ accordion
+ v-if="value.questionType != 'shortAnswer'"
+ >
+ <el-collapse-item :name="value.id" class="objective">
+ <template #title>
+ <div class="headerBox">
<div class="headerConent sitgBox">
- <p v-if="!value.isUnfold">
+ <p v-if="!value.isUnfold" class="al-cn">
<span class="analysisColor">灞曞紑瑙ｆ瀽</span>
+ <img :src="openIcon" alt="" class="analysis-icon">
</p>
- <p v-else><span class="analysisColor">鏀惰捣瑙ｆ瀽</span></p>
+ <p v-else>
+ <span class="analysisColor">鏀惰捣瑙ｆ瀽</span>
+ <img :src="closeIcon" alt="" class="analysis-icon">
+ </p>
</div>
</div>
</template>
@@ -312,11 +287,13 @@
<el-collapse-item :name="value.id" class="objective">
<template #title>
<div class="headerBox">
- <p v-if="!value.isUnfold">
+ <p v-if="!value.isUnfold" class="al-cn">
<span class="analysisColor">灞曞紑绛旀涓庤В鏋�</span>
+ <img :src="openIcon" alt="" class="analysis-icon">
</p>
- <p v-else>
+ <p v-else class="al-cn">
<span class="analysisColor">鏀惰捣绛旀涓庤В鏋�</span>
+ <img :src="closeIcon" alt="" class="analysis-icon">
</p>
</div>
</template>
@@ -340,62 +317,6 @@
</div>
</el-collapse-item>
</el-collapse>
- <!-- <div
- v-if="value.questionType == 'shortAnswer'"
- class="subjective subjectiveItem"
- >
- <div class="questionAnalysis">
- <p class="difficulty" v-if="value.difficulty">
- <span style="color: #333">闅惧害绛夌骇锛�</span>
- <el-rate
- v-model="value.difficulty"
- :max="3"
- size="large"
- disabled
- disabled-void-color="#949494"
- />
- </p>
- <p class="difficulty" @click="watchParsing(value)">
- <span class="analysisColor"
- >{{
- value.isUnfold ? "鏀惰捣绛旀鍜岃В鏋�" : "鏌ョ湅绛旀涓庤В鏋�"
- }}
- </span>
- </p>
- </div>
- <div
- :class="
- [
- 'analysisDetailBox',
- value.isUnfold ? 'cartoon' : 'downCartoon',
- ].join(' ')
- "
- >
- <div class="referBox">
- <span>鍙傝�冪瓟妗堬細</span>
- <p
- v-html="arrayToString(value.answer)"
- :class="[
- 'subjectiveBox',
- value.isUnfold ? 'showText' : 'hideText',
- ]"
- ></p>
- </div>
- <div class="referBox">
- <span>瑙ｆ瀽锛�</span>
- <p
- v-if="value.analysisCon"
- v-html="value.analysisCon"
- :class="
- ['subjectiveBox', value.isUnfold ? 'yincang' : ''].join(
- ' '
- )
- "
- ></p>
- <p v-else>鏆傛棤鏁版嵁</p>
- </div>
- </div>
- </div> -->
</div>
</div>
</li>
@@ -409,6 +330,8 @@
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
import heart from '@/assets/images/examination/collectIcon.png'
import isHeart from '@/assets/images/examination/collectClickIcon.png'
+import openIcon from '@/assets/images/examination/open.png'
+import closeIcon from '@/assets/images/examination/close.png'
const props = defineProps({ cardList: Array, collectList: Array })
const emits = defineEmits([ 'onChangeRadio','setCollect'])
// const presentId = ref<Number>(props.collectList[0])
@@ -614,34 +537,8 @@
width: 100%;
padding: 0 20px;
font-size: 14px;
- background-color: #f4f4f4;
- .headerBox {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: space-between;
- .headerConent {
- height: 100%;
- display: flex;
- align-items: center;
- .el-image {
- width: 9px;
- height: 9px;
- }
- .correct {
- color: #1fbc1f;
- width: 200px;
- text-align: left;
- }
- .error {
- text-align: left;
- margin-left: 40px;
- width: 200px;
- color: #ee1818;
- }
- }
- }
-
+ background-color: #E0F2FF ;
+ color: #3B93FE;
.checkAnalysis {
cursor: pointer;
height: 100%;
@@ -652,7 +549,7 @@
/deep/ .el-collapse-item__content {
width: 100%;
padding: 0 20px;
- background-color: #f4f4f4;
+ background-color: #E0F2FF;
font-size: 14px;
color: #333;
}
@@ -665,6 +562,8 @@
height: 120px;
/deep/ img {
margin-left: 10px;
+ max-width: 150px;
+ object-fit: contain;
}
}
.optionTxt {
@@ -702,7 +601,44 @@
background-color: #1fbc1f;
}
.mark-error {
- background-color: #ee1818;
+ background-color: #FF5E5E;
}
}
+.headerConent {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ .el-image {
+ width: 9px;
+ height: 9px;
+ }
+ .correct {
+ color: #70B503;
+ width: 200px;
+ text-align: left;
+ }
+ .error {
+ text-align: left;
+ margin-left: 40px;
+ width: 200px;
+ color: #FF5E5E;
+ }
+ }
+.analysis-box {
+ padding: 10px 0;
+}
+.al-cn {
+ display: flex;
+ align-items: center;
+}
+.analysis-icon {
+ width: 10px;
+ margin-left: 3px;
+}
+.el-collapse {
+ background-color: red;
+}
+.primary-text-color {
+ color: #3B93FE;
+}
</style>
--
Gitblit v1.9.1