From 11433c56279d667305b0b627e205000851bc0456 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 25 六月 2024 15:34:55 +0800
Subject: [PATCH] 新增pdf预览功能
---
src/assets/js/middleGround/api/resource.js | 222 ++++++++++++++
src/views/components/pdfview.vue | 174 +++++++++++
src/views/examination/components/list.vue | 248 +++++----------
src/views/examination/components/sheet.vue | 6
src/views/readerPages/home.vue | 130 ++++++++
src/qiankunState/state.ts | 1
package.json | 3
src/assets/js/middleGround/api/file.js | 94 ++++++
src/assets/js/middleGround/WebMiddleGroundApi.js | 6
src/assets/images/examination/open.png | 0
src/assets/images/examination/close.png | 0
11 files changed, 711 insertions(+), 173 deletions(-)
diff --git a/package.json b/package.json
index 8962b88..9f95fbc 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,8 @@
"vue-cli-plugin-style-resources-loader": "^0.1.5",
"vue-clipboard3": "^2.0.0",
"vue-demi": "^0.14.7",
- "vue-router": "^4.2.5"
+ "vue-router": "^4.2.5",
+ "viewerjs": "^1.11.6"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
diff --git a/src/assets/images/examination/close.png b/src/assets/images/examination/close.png
new file mode 100644
index 0000000..7ed06fd
--- /dev/null
+++ b/src/assets/images/examination/close.png
Binary files differ
diff --git a/src/assets/images/examination/open.png b/src/assets/images/examination/open.png
new file mode 100644
index 0000000..ec81617
--- /dev/null
+++ b/src/assets/images/examination/open.png
Binary files differ
diff --git a/src/assets/js/middleGround/WebMiddleGroundApi.js b/src/assets/js/middleGround/WebMiddleGroundApi.js
index 189817d..1452c58 100644
--- a/src/assets/js/middleGround/WebMiddleGroundApi.js
+++ b/src/assets/js/middleGround/WebMiddleGroundApi.js
@@ -5,12 +5,16 @@
import identity from "./api/identity.js";
import app from "./api/app.js";
import edu from "./api/edu.js";
+import file from './api/file.js'
+import res from './api/resource.js'
const WebMiddleGroundApi = {
store,
identity,
app,
- edu
+ edu,
+ file,
+ res
};
export default WebMiddleGroundApi;
diff --git a/src/assets/js/middleGround/api/file.js b/src/assets/js/middleGround/api/file.js
new file mode 100644
index 0000000..b5f96c9
--- /dev/null
+++ b/src/assets/js/middleGround/api/file.js
@@ -0,0 +1,94 @@
+import request from "@/plugin/axios/index";
+const fileApi = {
+ // 鑾峰彇pdf鎬婚〉鏁�
+ getPdfTotalPage(data) {
+ return request({
+ url: "/file/GetPdfTotalPage",
+ method: "post",
+ data
+ });
+ },
+
+ // 鑾峰彇pdf銆亀ord銆乸pt绛夎浆鍥剧墖棰勮
+ getPdfInfo(data) {
+ return request({
+ url: "/file/GetPdfInfo",
+ method: "post",
+ data
+ });
+ },
+ //鑾峰彇pdf鐩綍
+ GetPdfToc(data) {
+ return request({
+ url: "/file/GetPdfToc",
+ method: "post",
+ data
+ });
+ },
+ //鑾峰彇鏂囦欢
+ getPdfPageImage(params) {
+ return request({
+ url: '/file/GetPdfPageImage',
+ method: 'get',
+ responseType: 'blob',
+ params
+ });
+ },
+ //涓婁紶鏂囦欢
+ upload(data) {
+ return request({
+ url: "/file/api/ApiUpload",
+ method: "post",
+ data
+ });
+ },
+
+ // 鑾峰彇闃块噷浜戝姞閫熷湴鍧�
+ getAliVod(data) {
+ return request({
+ url: "/file/GetAliVod",
+ method: "post",
+ data,
+ });
+ },
+
+ downloadForAuthorize(params) {
+ return request({
+ url: '/file/api/ApiDownloadForAuthorize',
+ method: 'GET',
+ responseType: 'blob',
+ params
+ });
+ },
+ // 鎵归噺涓嬭浇
+ downloadFiles(data) {
+ return request({
+ url: '/file/api/ApiDownloadFiles',
+ method: 'post',
+ responseType: 'blob',
+ data
+ });
+ },
+
+ // 鎵归噺涓嬭浇get
+ getDownloadFiles (params) {
+ return request({
+ url: '/file/api/ApiGetDownloadFiles',
+ method: 'GET',
+ responseType: 'blob',
+ headers:{
+ 'md5s':params
+ }
+ });
+ },
+ // 鍙戦�佷笅杞介偖浠�
+ sendFileEmail (data) {
+ return request({
+ url:'/file/api/ApiSendFileWithEmail',
+ method:'post',
+ data
+ })
+ }
+}
+
+export default fileApi;
\ No newline at end of file
diff --git a/src/assets/js/middleGround/api/resource.js b/src/assets/js/middleGround/api/resource.js
new file mode 100644
index 0000000..21e79ec
--- /dev/null
+++ b/src/assets/js/middleGround/api/resource.js
@@ -0,0 +1,222 @@
+import request from "@/plugin/axios/index";
+import { tokenKey } from "@/assets/js/config";
+import { handleQueryResourceListData } from "../tool";
+import toolClass from "@/assets/js/toolClass";
+const resourceApi = {
+ /*
+ **鑾峰彇璧勬簮鍒楄〃&璇︽儏**
+ path: 鏁版嵁璺緞
+ storeInfo: 浠撳偍
+ repositoryInfo: 浠撳簱
+ queryType: 妫�绱㈢被鍨�
+ paging: 鍒嗛〉
+ sort: 鎺掑簭
+ fields: 鑷畾涔夊瓧娈�
+ itemId: 鑾峰彇璇︽儏鏃剁殑璧勬簮ID
+ */
+ getItem: ({
+ path,
+ storeInfo,
+ repositoryInfo,
+ queryType,
+ linkType,
+ paging,
+ sort,
+ fields,
+ itemId,
+ itemIds,
+ itemType,
+ coverSize,
+ itemIdArr,
+ SysType,
+ tourism_isHighQualityResources,
+ }) => {
+ if (!path) return Promise.reject("鎺ュ彛璇锋眰蹇呰鍙傛暟涓嶈兘涓虹┖锛�");
+
+
+
+
+
+ const query = {
+ AccessControl: {
+ Path: path,
+ StoreRefCode: storeInfo + "",
+ RepositoryRefCode: repositoryInfo + "",
+ Type: queryType || "\\",
+ LinkType: linkType || "",
+ },
+ PageQuery: {
+ Start: paging?.start || "0",
+ Size: paging?.size || "10",
+ },
+ SortQuery: sort ? [sort] : [{
+ LinkOrder: "Desc"
+ }],
+ CreateDate: [],
+ Description: [],
+ Name: [],
+ Icon: [],
+ RefCode: [],
+ Type: [],
+ TypeId: [],
+ State: [],
+ Tag: [],
+ LinkInfo: [],
+ LinkFile: [],
+ CmsItemType: [],
+ ChildrenFolderCount: [],
+ ChildrenCount: [],
+ ...fields,
+ };
+ if (itemIdArr) query["Id"] = itemIdArr;
+ if (SysType) query["SysType="] = [`${SysType}`];
+ if (tourism_isHighQualityResources)
+ query["tourism_isHighQualityResources="] = [
+ `${tourism_isHighQualityResources}`,
+ ];
+ if (itemId) query["Id="] = [`${itemId}`];
+ if (itemIds) query["Id="] = itemIds;
+ if (itemType) query["Type="] = [`${itemType}`];
+ const body = { query: JSON.stringify({ Query: [{ Q1: query }] }) };
+ let token = localStorage.getItem(tokenKey);
+ return request({
+ url: token ? "/resource/api/ApiAppUserQuery" : "/resource/api/ApiQuery",
+ method: "post",
+ data: body,
+ }).then((resp) => {
+ if (resp.length > 0) {
+ const data = resp[0];
+ const datas = handleQueryResourceListData({
+ datas: data.datas,
+ fields,
+ path,
+ storeInfo,
+ repositoryInfo,
+ coverSize,
+ });
+ return { datas, total: data.totalCount };
+ }
+ return { datas: [], total: 0 };
+ });
+ },
+ // 妯＄硦鎼滅储
+ EsQuery(query) {
+ let { params, path, paging } = query;
+ let queryBody = {
+ Type: "*",
+ Store: [],
+ ItemType: [],
+ CmsType: [],
+ SysType: ["CmsItem"],
+ LinkInfo: [],
+ PageQuery: {
+ Start: paging?.start || "0",
+ Size: paging?.size || "10",
+ },
+ };
+ // 璁剧疆涓嶅悓鐨凱ath
+
+ // 濡傛灉娌℃湁鎼滅储鍏抽敭瀛楋紝鍒欏彧鐢ㄨ幏鍙栧悕绉�
+ if (params.length > 0) {
+ let data = {
+ "||Name": [...params],
+ "||tourism_content*": [...params],
+ "||tourism_workflow*": [...params],
+ "||tourism_notes*": [...params],
+ "||tourism_caseIndex*": [...params],
+ "||tourism_basicCase*": [...params],
+ "||tourism_judgmentAndReasons*": [...params],
+ "||tourism_legalIssuesInvolvedInThisCase*": [...params],
+ "||tourism_referenceAnswerAndLegalAnalysis*": [...params],
+ "||tourism_case*": [...params],
+ "||tourism_clause*": [...params],
+ "||tourism_unscramble*": [...params],
+ "||tourism_specialRemind*": [...params],
+ "||tourism_fiction*": [...params],
+ "||tourism_authorityNature*": [...params],
+ "||tourism_authorityGist*": [...params],
+ "||tourism_penaltyGist*": [...params],
+ "||tourism_penaltyTerms*": [...params],
+ "||tourism_penaltyType*": [...params],
+ "||tourism_remarksNote*": [...params],
+ "||tourism_keyword*": [...params],
+ };
+ Object.assign(queryBody, data);
+ } else {
+ let data = {
+ Name: [],
+ };
+ Object.assign(queryBody, data);
+ }
+
+ // 鍏ㄩ儴鎼滅储 - 鍗曠嫭鐨勬煇涓簱
+ if (path != "All") {
+ let data = {
+ Path: [
+ {
+ Repository: "tourism_tourismLawsAndRegulationsDatabase",
+ Path: path,
+ },
+ ],
+ };
+ Object.assign(queryBody, data);
+ }
+ const body = { query: JSON.stringify({ Query: [{ Q1: queryBody }] }) };
+
+ return request({
+ url: "/resource/api/ApiEsQuery",
+ method: "post",
+ data: body,
+ }).then((res) => {
+ if (res.length > 0) {
+ const data = res[0];
+
+ const datas = handleQueryResourceListData({
+ datas: data.datas,
+ path,
+ });
+ return { datas, total: data.totalCount };
+ }
+ return { data: [], total: 0 };
+ });
+ },
+
+ //鑾峰彇璧勬簮绫诲瀷
+ getCmsTypeByRefCode(data) {
+ return request({
+ url: "resource/api/ApiGetCmsTypeByRefCode",
+ method: "post",
+ data,
+ });
+ },
+
+ //鍙栨秷cms鏀惰棌
+ delCmsItemLink(data) {
+ return request({
+ url: "/resource/api/ApiDelCmsItemLink",
+ method: "post",
+ data,
+ });
+ },
+
+ //cms鏀惰棌
+ collectCmsItem(data) {
+ return request({
+ url: "/resource/api/ApiAddCmsItemLink",
+ method: "post",
+ data,
+ });
+ },
+
+ // 鑾峰彇cms鏀惰棌鍒楄〃
+ getCmsCollectList(data) {
+ const body = { query: JSON.stringify({ Query: [{ Q1: data }] }) };
+ return request({
+ url: "/resource/api/ApiAppUserQuery",
+ method: "post",
+ data: body,
+ });
+ },
+};
+
+export default resourceApi;
diff --git a/src/qiankunState/state.ts b/src/qiankunState/state.ts
index 5ed050b..202c962 100644
--- a/src/qiankunState/state.ts
+++ b/src/qiankunState/state.ts
@@ -14,6 +14,7 @@
disableSign:false,
searchBookByKeyword: null,
jumpSearchItem:null,
+ openPDF:null
}
export default state
\ No newline at end of file
diff --git a/src/views/components/pdfview.vue b/src/views/components/pdfview.vue
new file mode 100644
index 0000000..f69dfe2
--- /dev/null
+++ b/src/views/components/pdfview.vue
@@ -0,0 +1,174 @@
+<template>
+ <div class="preview" v-if="preViewMd5">
+ <div id="imageParent" class="imageBox"></div>
+ <div class="bottom_tool">
+ <!-- <svg
+ t="1718330411310"
+ @click="downloadPdf"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="7121"
+ width="20"
+ height="20"
+ >
+ <path
+ d="M1022.955204 522.570753c0 100.19191-81.516572 181.698249-181.718715 181.698249l-185.637977 0c-11.2973 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l185.637977 0c77.628008 0 140.786467-63.148226 140.786467-140.766001 0-77.423347-62.841234-140.448776-140.203182-140.766001-0.419556 0.030699-0.818645 0.051165-1.217734 0.061398-5.945409 0.143263-11.686157-2.292206-15.687284-6.702656-4.001127-4.400217-5.894244-10.335393-5.167696-16.250102 1.330298-10.806113 1.944282-19.760043 1.944282-28.192086 0-60.763922-23.658839-117.884874-66.617234-160.833035-42.968627-42.968627-100.089579-66.617234-160.843268-66.617234-47.368844 0-92.742241 14.449084-131.208321 41.781592-37.616736 26.738991-65.952084 63.700811-81.925894 106.884332-2.425236 6.538927-8.012488 11.399631-14.827707 12.893658-6.815219 1.483794-13.927197-0.603751-18.859533-5.54632-19.289322-19.330254-44.943608-29.972639-72.245418-29.972639-56.322773 0-102.146425 45.813419-102.146425 102.125959 0 0.317225 0.040932 0.982374 0.092098 1.627057 0.061398 0.920976 0.122797 1.831718 0.153496 2.762927 0.337691 9.465582-5.863545 17.928325-15.001669 20.455891-32.356942 8.933463-61.541635 28.550243-82.181721 55.217602-21.305235 27.516704-32.571836 60.508096-32.571836 95.41307 0 86.244246 70.188572 156.422585 156.443052 156.422585l169.981393 0c11.2973 0 20.466124 9.15859 20.466124 20.466124 0 11.2973-9.168824 20.466124-20.466124 20.466124l-169.981393 0c-108.828614 0-197.3753-88.536452-197.3753-197.354833 0-44.053332 14.223956-85.712127 41.126676-120.473839 22.809495-29.460985 53.897537-52.086285 88.710414-64.816215 5.065366-74.322729 67.149353-133.2447 142.751215-133.2447 28.386514 0 55.504128 8.217149 78.651314 23.52581 19.657712-39.868009 48.842405-74.169233 85.497233-100.212376 45.434795-32.295544 99.004875-49.354058 154.918325-49.354058 71.692832 0 139.087778 27.915793 189.782368 78.600149 50.694589 50.694589 78.610382 118.089535 78.610382 189.782368 0 3.704368-0.102331 7.470135-0.296759 11.368932C952.633602 352.568894 1022.955204 429.511287 1022.955204 522.570753zM629.258611 820.711014l-102.023628 102.013395c-3.990894 4.001127-9.230222 5.996574-14.46955 5.996574s-10.478655-1.995447-14.46955-5.996574l-102.023628-102.013395c-7.992021-7.992021-7.992021-20.947078 0-28.939099s20.947078-8.002254 28.939099 0l67.087954 67.077721 0-358.699522c0-11.2973 9.15859-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.168824 20.466124 20.466124l0 358.699522 67.087954-67.077721c7.992021-8.002254 20.947078-7.992021 28.939099 0S637.250632 812.718993 629.258611 820.711014z"
+ p-id="7122"
+ ></path>
+ </svg> -->
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import Viewer from 'viewerjs'
+import {requestCtx} from '../../assets/js/config'
+import 'viewerjs/dist/viewer.css'
+import { defineProps, inject, onMounted, ref, watch } from 'vue'
+const props = defineProps<{ md5: String; title: String; isClear: Boolean }>()
+const MG: any = inject('MG')
+const currentPageSrc = ref<String>('')
+const currentPage = ref<any>(1)
+const totalPage = ref<Number>(1)
+const viewerCon = ref<any>(null)
+const preViewMd5 = ref<String>('')
+onMounted(() => {
+ scrollBottom()
+ clearDom()
+ getFileInfo()
+})
+
+watch(
+ props.isClear,
+ (val) => {
+ if (val == true) preViewMd5.value = ''
+ },
+ { immediate: true }
+)
+watch(
+ () => props.md5,
+ (val) => {
+ if (val) {
+ preViewMd5.value = val
+ currentPage.value = 1
+ currentPageSrc.value = ''
+ totalPage.value = 1
+ viewerCon.value?.destroy()
+ }
+ },
+ { immediate: true }
+)
+const getResourcePath = async (md5, appRefCode = 'jingshieke') => {
+ let path = ''
+ await MG.file
+ .getAliVod({
+ md5,
+ appRefCode
+ })
+ .then((res) => {
+ if (res?.data != '' && res?.data != undefined) {
+ path = res.data
+ } else {
+ path = requestCtx + '/file/api/ApiDownload?md5=' + md5
+ }
+ })
+ return path
+}
+const downloadPdf = async () => {
+ window.open(await getResourcePath(preViewMd5.value))
+}
+const domViewer = () => {
+ let ele = document.getElementById('imageParent')
+ viewerCon.value = new Viewer(ele, {
+ inline: false,
+ container: 'body',
+ navbar: true, // 鏄剧ず瀵艰埅鏍�
+ toolbar: true, // 鏄剧ず宸ュ叿鏍�
+ title: true // 鏄剧ず鏍囬
+ })
+}
+const clearDom = () => {
+ let ele = document.getElementById('imageParent')
+ ele.innerHTML = ''
+}
+const createDom = (page) => {
+ let ele = document.getElementById('imageParent')
+ const img = document.createElement('img')
+ img.src = getPageImage(page)
+ img.alt = ''
+ img.style.maxWidth = '100%'
+ img.style.padding = '30px'
+ img.className = 'imgHover'
+ img.onclick = () => {
+ viewerCon.value?.destroy()
+ domViewer()
+ }
+ ele.appendChild(img)
+}
+const scrollBottom = () => {
+ var ele = document.getElementById('imageParent')
+ ele.addEventListener('scroll', function () {
+ // 璁＄畻婊氬姩鏉¤窛绂诲簳閮ㄧ殑浣嶇疆
+ const scrollBottom = ele.scrollHeight - ele.scrollTop - ele.clientHeight
+ if (scrollBottom <= 10) {
+ currentPage.value++
+ if (currentPage.value <= totalPage.value) {
+ createDom(currentPage.value)
+ }
+ }
+ })
+}
+const getFileInfo = () => {
+ // 鑾峰彇鐩綍
+ MG.file
+ .getPdfInfo({ md5: preViewMd5.value })
+ .then((res) => {
+ totalPage.value = res.totalPages
+ createDom(currentPage.value)
+ })
+ .catch((err) => {
+ totalPage.value = 1
+ createDom(currentPage.value)
+ console.error(err)
+ })
+}
+const getPageImage = (page) => {
+ const ctx = requestCtx
+ return ctx + '/file/GetPdfPageImage' + '?md5=' + preViewMd5.value + '&index=' + page + '&dpi=200'
+}
+</script>
+<style scoped lang="less">
+.preview {
+ width: 100%;
+ height: 100%;
+
+ .imageBox {
+ height: calc(100% - 30px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ // background-color: rgba(0, 0, 0, 0.5);
+ box-sizing: border-box;
+ }
+
+ .imageBox:hover {
+ cursor: zoom-in !important;
+ }
+
+ .bottom_tool {
+ height: 30px;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ svg {
+ margin-right: 15px;
+ fill: #d1d1d1;
+ }
+ svg:hover {
+ fill: #fff;
+ cursor: pointer;
+ }
+ }
+}
+</style>
diff --git a/src/views/examination/components/list.vue b/src/views/examination/components/list.vue
index bedf9a3..216bf7a 100644
--- a/src/views/examination/components/list.vue
+++ b/src/views/examination/components/list.vue
@@ -221,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"
@@ -261,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>
@@ -318,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>
@@ -346,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>
@@ -415,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])
@@ -620,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%;
@@ -658,7 +549,7 @@
/deep/ .el-collapse-item__content {
width: 100%;
padding: 0 20px;
- background-color: #f4f4f4;
+ background-color: #E0F2FF;
font-size: 14px;
color: #333;
}
@@ -710,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>
diff --git a/src/views/examination/components/sheet.vue b/src/views/examination/components/sheet.vue
index b1c00d9..3af01de 100644
--- a/src/views/examination/components/sheet.vue
+++ b/src/views/examination/components/sheet.vue
@@ -56,7 +56,7 @@
<p>鏈瓟</p>
</li>
<li v-if="submitStatus">
- <p class="sheetingBox" style="background-color: #ee1818"></p>
+ <p class="sheetingBox" style="background-color: #FF5E5E"></p>
<p>閿欒</p>
</li>
<li v-if="submitStatus">
@@ -81,7 +81,7 @@
<p>鏈瓟</p>
</li>
<li>
- <p class="sheetingBox" style="background-color: #ee1818"></p>
+ <p class="sheetingBox" style="background-color: #FF5E5E"></p>
<p>閿欒</p>
</li>
<li>
@@ -259,7 +259,7 @@
}
/** 閿欒鏍峰紡 */
.error {
- background-color: #ee1818 !important;
+ background-color: #FF5E5E !important;
}
/** 闈為粯璁ゅ瓧浣撻鑹� */
.noDeafault {
diff --git a/src/views/readerPages/home.vue b/src/views/readerPages/home.vue
index 47ca510..19293a9 100644
--- a/src/views/readerPages/home.vue
+++ b/src/views/readerPages/home.vue
@@ -1,30 +1,144 @@
<template>
<div class="homePage">
- <webHome v-if="!homeBoxHide"/>
- <mobileHome v-if="homeBoxHide"/>
+ <webHome v-if="!homeBoxHide" />
+ <mobileHome v-if="homeBoxHide" />
+ </div>
+ <div class="pdfDialog">
+ <el-dialog
+ v-model="dialogState.dialogVisible"
+ width="60vw"
+ top="2vh"
+ lock-scroll
+ :show-close="false"
+ class="custom-dialog"
+ >
+ <template #header>
+ <div class="header_title">
+ <span>{{ dialogState.pdfTitle }}</span>
+ <span @click="dialogState.dialogVisible = false"> x </span>
+ </div>
+ </template>
+ <div class="pdfModal">
+ <preView :isClear="dialogState.dialogVisible" :md5="dialogState.p_md5"></preView>
+ </div>
+ </el-dialog>
</div>
</template>
<script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, reactive, inject } from 'vue'
import webHome from '@/views//readerPages/webHome.vue'
import mobileHome from '@/views//readerPages/mobileHome.vue'
+import preView from '../components/pdfview.vue'
+// import { da } from 'element-plus/es/locale'
+const qiankunActions = inject('qiankunActions')
const screenWidth = ref(
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
)
const homeBoxHide = ref(false)
-
+const dialogState = reactive({
+ dialogVisible: false,
+ pdfTitle: '',
+ isClear: false,
+ p_md5: ''
+})
onMounted(() => {
if (screenWidth.value < 420) {
homeBoxHide.value = true
- }else{
+ } else {
homeBoxHide.value = false
}
+ window.qiankunActions.setGlobalState({
+ openPDF: (data) => {
+ console.log('鐖跺簲鐢�', data)
+ if (data.data.md5) {
+ const { md5, title } = data.data
+ dialogState.p_md5 = md5
+ dialogState.pdfTitle = title
+ }
+ dialogState.dialogVisible = true
+ }
+ })
})
</script>
<style lang="less">
-.homePage{
- width:100%;
- height:100%;
+.homePage {
+ width: 100%;
+ height: 100%;
+}
+
+.pdfDialog {
+ .el-overlay {
+ z-index: 2004 !important;
+ }
+}
+.pdfModal {
+ width: 100%;
+ height: 90vh;
+}
+
+.custom-dialog {
+ overflow: hidden !important;
+ padding: 0;
+
+ .el-dialog__body {
+ padding: 0;
+ }
+
+ .el-dialog__header {
+ background-color: rgba(0, 0, 0, 0.8);
+ padding: 0;
+ padding: 10px 0;
+
+ .header_title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #fff;
+ font-weight: 900;
+ font-size: 16px;
+ font-family: 'FZLTXIHJW';
+ padding: 5px 20px;
+ box-sizing: border-box;
+
+ span:nth-child(2):hover {
+ cursor: pointer;
+ }
+ }
+
+ .el-dialog__title,
+ .el-dialog__headerbtn .el-dialog__close {
+ color: #fff;
+ font-weight: 900;
+ font-size: 16px;
+ font-family: 'FZLTXIHJW';
+ }
+ }
+}
+
+@media screen and (max-width: 1070px) {
+ .pdfModal {
+ width: 100%;
+ height: 80vh;
+ }
+
+ .custom-dialog {
+ .el-dialog {
+ width: 90vw !important;
+ }
+ }
+}
+
+@media screen and (max-width: 800px) {
+ .pdfModal {
+ width: 100%;
+ height: 60vh;
+ }
+
+ .custom-dialog {
+ .el-dialog {
+ width: 90vw !important;
+ }
+ }
}
</style>
--
Gitblit v1.9.1