新增pdf预览功能

闫增涛

2024-06-25 11433c56279d667305b0b627e205000851bc0456

新增pdf预览功能

 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",

 src/assets/images/examination/close.png

 src/assets/images/examination/open.png

 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;

 src/assets/js/middleGround/api/file.js

New file
@@ -0,0 +1,94 @@
import request from "@/plugin/axios/index";
const fileApi = {
  // 获取pdf总页数
  getPdfTotalPage(data) {
    return request({
      url: "/file/GetPdfTotalPage",
      method: "post",
      data
    });
  },

  // 获取pdf、word、ppt等转图片预览
  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;

 src/assets/js/middleGround/api/resource.js

New file
@@ -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",
      },
    };
    // 设置不同的Path

    // 如果没有搜索关键字，则只用获取名称
    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;

 src/qiankunState/state.ts

@@ -14,6 +14,7 @@
  disableSign:false,
  searchBookByKeyword: null,
  jumpSearchItem:null,
  openPDF:null
}

export default state

 src/views/components/pdfview.vue

New file
@@ -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>

 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>

 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 {

 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>