Skip to content

A
agcs2.0-web
Commit 1a2ad65a authored by miaojiale's avatar miaojiale
Browse files
Options

首页内容+pdf预览

parent 8b966d3d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 46466 additions and 42 deletions
src/layouts/index.vue
View file @ 1a2ad65a
......@@ -179,7 +179,7 @@
custom-class="autoDialog"
:title="''"
:visible.sync="autoFlag"
:close-on-click-modal="false"
:close-on-click-modal="true"
:close-on-press-escape="false"
:show-close="true"
width="520px"
......
src/utils/loadPdf.js 0 → 100644
View file @ 1a2ad65a
import * as PDFJS from "pdfjs-dist/build/pdf"
export async function loadPDF({ el, fileSrc, scale }, call) {
PDFJS.GlobalWorkerOptions.workerSrc = require("./pdf.worker.entry.js")
let loadingTask = await PDFJS.getDocument({
url: fileSrc,
withCredentials: true, // 允许携带cookie
})
loadingTask.promise.then((pdf) => {
// 开始加载任务
document.getElementById("pdfEle").innerHTML = ""
const renderPage = (num) => {
let pdfCol = document.querySelector(el)
// 遍历每一页PDF
pdf.getPage(num).then(async (page) => {
let viewPort = page.getViewport({ scale: scale }) // 获取PDF尺寸
let div = document.createElement("div") // 用于存放canvas
div.id = `canvasBox_${num}`
div.className = "canvas-box"
div.style.position = "relative"
div.style.width = viewPort.width + "px"
div.style.margin = "0 auto"
let canvas = document.createElement("canvas") // 创建canvas
let context = canvas.getContext("2d")
// 将canvas的宽和高设置为与PDF视图一样大小
canvas.height = viewPort.height
canvas.width = viewPort.width
// setTimeout(() => {
// // 画页码
// context.font = "14px orbitron";
// context.fillStyle = "#333";
// context.save();
// context.beginPath();
// context.line = 2;
// context.textAlign = "center";
// context.textBaseline = "middle";
// // context.fillText(`${i}`, viewPort.width / 2, viewPort.height - 30);
// context.restore();
// context.closePath();
// }, 500);
let renderContext = {
canvasContext: context,
viewport: viewPort,
}
// 该函数返回一个当PDF页面成功渲染到界面上时解析的`promise`，我们可以使用成功回调来渲染文本图层。
await page.render(renderContext) // 初始化文本图层
canvas.className = "canvas"
canvas.id = `canvas_${num}`
call({
div: div,
pdfCol: pdfCol,
canvas: canvas,
context: context,
scale: scale,
index: num,
allPage: pdf.numPages,
})
div.appendChild(canvas) // 将canvas放进对应的div中
pdfCol.appendChild(div) // 将每一个div放到外面的大盒子中
num++
if (num <= pdf.numPages) {
// console.log(num, pdf.numPages);
renderPage(num)
}
})
}
renderPage(1)
})
}
src/utils/pdf.worker.entry.js 0 → 100644
View file @ 1a2ad65a
/* Copyright 2020 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(typeof window !== "undefined"
? window
: {}
).pdfjsWorker = require("./pdf.worker.js");
src/utils/pdf.worker.js 0 → 100644
View file @ 1a2ad65a
This diff is collapsed.
src/views/Home/HealthPopularization/index.vue
View file @ 1a2ad65a
......@@ -10,26 +10,48 @@
{{ item.name }}
</li>
</ul>
<div v-if="!showText" class="right_list">
<div v-if="!showDetail" v-loading="listLoading" class="right_list">
<div class="list_title">
{{ leftBar[activeBar].name }}
</div>
<ul class="list">
<li v-for="(item, index) in leftBar[activeBar].list" :key="index">
<ul class="list" v-if="tableData.length > 0">
<li v-for="(item, index) in tableData" :key="index">
<div class="leftImg">
<img src="~@/assets/img/Home/shenghuo.png" alt="" />
<img
:src="
'https://ds.cixincloud.com/geca-api/disease-data/file/info/' +
item.imgPath[0].bucketName +
'/' +
item.imgPath[0].uuidName
"
alt=""
/>
</div>
<div class="rightCon">
<div class="top">
<div class="rc_title">{{ item.title }}</div>
<div class="rc_date">{{ item.time }}</div>
<div class="rc_title">{{ item.articleTitle }}</div>
<div class="rc_date">{{ item.createTime }}</div>
</div>
<div class="bottom" @click="viewDetail(index)">查看</div>
</div>
</li>
</ul>
<el-empty v-else description="暂无数据"></el-empty>
<div v-if="pageSize && total > 10" class="pagination-footer">
<!-- <span class="description">{{ description }}</span> -->
<el-pagination
background
:current-page="pageIndex"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
<div v-if="showText" class="right_content">
</div>
<div v-if="showDetail" class="right_content">
<div class="breadcum">
<div
v-for="(item, index) in showTitle"
......@@ -45,27 +67,17 @@
</div>
</template>
<script>
import { articleList } from "@/api/operation-management"
import paginationMixin from "@/components/TabComponents/mixin"
export default {
mixins: [paginationMixin],
data() {
return {
activeBar: 0,
listLoading: false,
leftBar: [
{
name: "筛查",
list: [
{
id: 1,
title: "筛查数据的科学性",
text: "123",
time: "2022/06-30",
},
{
id: 2,
title: "筛查数据的科学性",
text: "1",
time: "2022/06-30",
},
],
},
{
name: "生活",
......@@ -79,6 +91,10 @@ export default {
],
showText: "",
showTitle: [],
showDetail: false,
// 分页数据
total: 0,
tableData: [],
}
},
mounted() {
......@@ -86,21 +102,47 @@ export default {
if (this.$route.query.tabIndex) {
this.activeBar = this.$route.query.tabIndex
}
this.getArticleList()
},
methods: {
// 获取健康科普
getArticleList() {
this.listLoading = true
let params = {
size: this.pageSize,
current: this.pageIndex,
moduleType: "4",
articleType: this.activeBar - 0 + 1,
}
articleList(params)
.then((res) => {
if (res.code == 1) {
this.tableData = [...res.data.records]
this.total = res.data.total - 0
this.listLoading = false
}
})
.catch((e) => {
this.listLoading = false
})
},
changeActive(i) {
this.activeBar = i
this.showDetail = false
this.showText = ""
this.getArticleList()
},
viewDetail(i) {
this.showText = this.leftBar[this.activeBar].list[i].text
this.showDetail = true
this.showText = this.tableData[i].articleContent
this.showTitle[0] = this.leftBar[this.activeBar].name
this.showTitle[1] = this.leftBar[this.activeBar].list[i].title
this.showTitle[1] = this.tableData[i].articleTitle
console.log(this.showText)
},
back(index) {
if (index == 0) {
this.showText = ""
this.showDetail = false
}
},
},
......@@ -125,6 +167,9 @@ export default {
justify-content: center;
align-items: center;
cursor: pointer;
&:hover {
background: rgba(78, 104, 255, 0.04);
}
// background: rgba(78, 104, 255, 0.1);
}
.activeBar {
......@@ -175,6 +220,7 @@ export default {
font-family: Roboto-Regular, Roboto;
font-weight: 400;
color: #999999;
margin-top: 8px;
}
.bottom {
cursor: pointer;
......
src/views/Home/PdfView/index.vue 0 → 100644
View file @ 1a2ad65a
<template>
<div id="editor">
<div v-loading="loadingPdf" class="pdfEle_wrap">
<div id="pdfEle"></div>
</div>
<div class="pdf-render-pager">
<div class="prev-next" @click="goPrevPdf">
<i class="el-icon-arrow-left"></i>
</div>
<input
v-model="curPage"
type="text"
style="border: 1px solid #ccc; position: relative; z-index: 9999"
@keyup.enter="handleChangePage"
/>
<div class="middle">/</div>
<div class="totalPage">{{ totalPage }}</div>
<div class="prev-next" @click="goNextPdf">
<i class="el-icon-arrow-right"></i>
</div>
</div>
</div>
</template>
<script>
import { loadPDF } from "@/utils/loadPdf.js"
export default {
props: {
pdfSrc: String,
},
data() {
return {
totalPage: 1,
curPage: 1,
loadingPdf: false,
canvasH: 0,
scrollEle: "", //元素画布
clickFlag: true, //左右跳转
timeout: null,
}
},
watch: {},
mounted() {
this.loadPDF()
},
methods: {
loadPDF() {
document.getElementById("pdfEle").innerHTML = ""
this.canvasH = 0 //高度初始化为0 以此控制分页不显示
this.curPage = 1 //页码重置为1
this.loadingPdf = true
if (process.env.NODE_ENV == "development") {
loadPDF(
// 特约讲师合作协议
{ el: "#pdfEle", fileSrc: "/ppt的pdf.pdf", scale: 1 },
this.callBackPdf
)
} else {
loadPDF(
{ el: "#pdfEle", fileSrc: this.pdfSrc, scale: 1 },
this.callBackPdf
)
}
},
// 加载完成的回调 分页加载
callBackPdf(item) {
const { index, allPage } = item
if (index !== allPage) {
return
}
// console.log(allPage);
this.totalPage = item.allPage
this.scrollEle = document.querySelector(".pdfEle_wrap")
// this.canvasH = item.canvas.height;
setTimeout(() => {
this.canvasH = item.div.offsetHeight
}, 100)
this.scrollEle.addEventListener("scroll", (e) => {
if (this.timeout != null) {
clearTimeout(this.timeout)
}
this.timeout = setTimeout(() => {
if (Math.floor(this.scrollEle.scrollTop / this.canvasH) == 0) {
this.curPage = 1
}
if (
Math.floor(this.scrollEle.scrollTop / this.canvasH) > 0 &&
Math.floor(this.scrollEle.scrollTop / this.canvasH) + 1 !=
this.curPage
) {
this.curPage =
Math.floor(this.scrollEle.scrollTop / this.canvasH) + 1
}
}, 100)
// this.curPage = Math.floor(this.scrollEle.scrollTop / this.canvasH) <= 0? 1: Math.floor(this.scrollEle.scrollTop / this.canvasH);
})
this.loadingPdf = false
},
goPrevPdf() {
// 限制一下多次点击
if (!this.clickFlag) {
return false
}
this.clickFlag = false
if (this.curPage > 1) {
// --this.curPage;
this.scrollPdfPage(parseInt(this.curPage) - 1)
--this.curPage
}
setTimeout(() => {
this.clickFlag = true
}, 500)
},
goNextPdf() {
// 限制一下多次点击
if (!this.clickFlag) {
return false
}
this.clickFlag = false
if (this.curPage < this.totalPage) {
// ++this.curPage;
this.scrollPdfPage(parseInt(this.curPage) + 1)
++this.curPage
}
setTimeout(() => {
this.clickFlag = true
}, 500)
},
handleChangePage(e) {
if (!/^\d+$/.test(e.target.value)) {
this.curPage = 1
} else {
// this.curPage = parseInt(e.target.value) > 0 ? parseInt(e.target.value) : 1;
if (parseInt(e.target.value) <= 0) {
this.curPage = 1
} else if (parseInt(e.target.value) > this.totalPage) {
this.curPage = this.totalPage
} else {
this.curPage = parseInt(e.target.value)
}
}
this.scrollPdfPage(this.curPage)
},
// pdf滚动
scrollPdfPage(page) {
console.log(this.scrollEle)
this.scrollEle.scrollTo({
top: this.canvasH * (page - 1),
behavior: "smooth",
})
},
},
}
</script>
<style lang="scss" scoped>
#editor {
height: 600px;
}
.pdf-render-pager {
width: 100%;
color: #333;
font-size: 12px;
height: 50px;
padding: 0 15px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
// box-shadow: 0 -1px 0px 0 rgba(149, 149, 149, 0.25);
bottom: 0px;
left: 0;
z-index: 9999;
input {
width: 26px;
border: none;
border-bottom: 1px solid #e4e4e4;
text-align: center;
font-size: 14px;
}
}
.pdfEle_wrap {
width: 100%;
height: 600px;
padding: 20px 0;
min-height: 50px;
overflow-y: scroll;
overflow-x: hidden;
// text-align:center;
position: relative;
transition: all 0.3s;
background: #e4e4e4;
#pdfEle {
height: 600px;
}
}
.prev-next {
cursor: pointer;
width: 20px;
height: 20px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.middle {
margin: 0 8px;
}
</style>
src/views/Home/ScientificResearch/index.vue
View file @ 1a2ad65a
......@@ -10,45 +10,76 @@
{{ item.name }}
</li>
</ul>
<div class="right_list">
<div v-loading="listLoading" class="right_list">
<div class="list_title">
{{ leftBar[activeBar].name }}
</div>
<ul class="list">
<li v-for="(item, index) in leftBar[activeBar].list" :key="index">
<ul v-if="tableData.length > 0" class="list">
<li
v-for="(item, index) in tableData"
:key="index"
@click="setPdf(item)"
>
<div class="left_text">
<div class="circle"></div>
<div class="title">{{ item.title }}</div>
<div class="title">{{ item.articleTitle }}</div>
</div>
<div class="rig_date">
{{ item.time }}
{{ item.createTime }}
</div>
</li>
</ul>
<el-empty v-else description="暂无数据"></el-empty>
<div v-if="pageSize && total > 10" class="pagination-footer">
<!-- <span class="description">{{ description }}</span> -->
<el-pagination
background
:current-page="pageIndex"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
<!-- 自动提醒 -->
<el-dialog
custom-class="pdfDialog"
:title="''"
:visible.sync="showPdf"
:close-on-click-modal="true"
:close-on-press-escape="false"
:show-close="true"
width="70%"
top="10vh"
>
<div class="innerBody">
<div class="title">{{ curPdf.articleTitle }}</div>
<div class="refuteList">
<!-- <pdf :src="pdfSrc"></pdf> -->
<pdf-view ref="pdfView" :pdf-src="pdfSrc"></pdf-view>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { articleList } from "@/api/operation-management"
import paginationMixin from "@/components/TabComponents/mixin"
import PdfView from "../PdfView/index"
export default {
components: { PdfView },
mixins: [paginationMixin],
data() {
return {
activeBar: 0,
listLoading: false,
leftBar: [
{
name: "筛查技术方案",
list: [
{
title: "筛查数据的科学性",
text: "",
time: "2022/06-30",
},
{
title: "筛查数据的科学性",
text: "",
time: "2022/06-30",
},
],
},
{
name: "筛查指南",
......@@ -60,6 +91,11 @@ export default {
name: "项目进展与成果",
},
],
tableData: [],
showPdf: true,
curPdf: { articleTitle: "测试pdf" },
pdfSrc:
"https://ds.cixincloud.com/geca-api/disease-data/file/info/geca2/1630772277140377601.pdf",
}
},
watch: {},
......@@ -67,12 +103,44 @@ export default {
if (this.$route.query.tabIndex) {
this.activeBar = this.$route.query.tabIndex
}
this.getArticleList()
},
methods: {
changeActive(i) {
this.activeBar = i
this.getArticleList()
// this.$router.replace("/scientificresearch")
},
// 获取科学研究
getArticleList() {
this.listLoading = true
let params = {
size: this.pageSize,
current: this.pageIndex,
moduleType: "5",
articleType: this.activeBar - 0 + 1,
}
articleList(params)
.then((res) => {
if (res.code == 1) {
this.tableData = [...res.data.records]
this.total = res.data.total
this.listLoading = false
}
})
.catch((e) => {
this.listLoading = false
})
},
setPdf(item) {
this.showPdf = true
this.curPdf = item
this.pdfSrc =
"https://ds.cixincloud.com/geca-api/disease-data/file/info/" +
item.filePath[0].bucketName +
"/" +
item.filePath[0].uuidName
},
},
}
</script>
......@@ -95,6 +163,9 @@ export default {
justify-content: center;
align-items: center;
cursor: pointer;
&:hover {
background: rgba(78, 104, 255, 0.04);
}
// background: rgba(78, 104, 255, 0.1);
}
.activeBar {
......@@ -127,9 +198,16 @@ export default {
justify-content: space-between;
align-items: center;
cursor: pointer;
&:hover {
background: rgba(78, 104, 255, 0.04);
.left_text .title {
color: #4e68ff;
}
}
.left_text {
display: flex;
align-items: center;
.circle {
width: 6px;
height: 6px;
......@@ -148,4 +226,24 @@ export default {
}
}
}
.innerBody {
padding: 0 60px 40px;
.title {
font-size: 24px;
font-family: AlibabaPuHuiTiM;
color: #333333;
text-align: center;
margin-bottom: 30px;
}
.refuteList {
height: 600px;
overflow: auto;
}
}
</style>
<style lang="scss">
.pdfDialog .el-dialog__header {
// display: none;
padding: 0px !important;
}
</style>
src/views/systems/operation-management/components/scientificResearch.vue
View file @ 1a2ad65a
<template>
<div id="medicalunion-management">
<div class="top-btn">
<el-select v-model="selectType">
<el-select v-model="selectType" @change="getArticleList">
<el-option
v-for="item in selectList"
:key="item.value"
......@@ -287,6 +287,7 @@ export default {
size: this.pageSize,
current: this.pageIndex,
moduleType: "5",
articleType: this.selectType - 0,
}
articleList(params)
.then((res) => {
......
yarn.lock
View file @ 1a2ad65a
......@@ -7978,6 +7978,11 @@ pbkdf2@^3.0.3:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
pdfjs-dist@2.5.207:
version "2.5.207"
resolved "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-2.5.207.tgz#b5e8c19627be64269cd3fb6df3eaaf45ddffe7b6"
integrity sha512-xGDUhnCYPfHy+unMXCLCJtlpZaaZ17Ew3WIL0tnSgKFUZXHAPD49GO9xScyszSsQMoutNDgRb+rfBXIaX/lJbw==
performance-now@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment