Skip to content

A
agcs2.0-web
You need to sign in or sign up before continuing.
Commit 8415b0ef authored by miaojiale's avatar miaojiale
Browse files
Options

预览pdf修改为分页

parent 4e5731ce
Hide whitespace changes
Inline Side-by-side
Showing with 513 additions and 33 deletions
src/views/Home/Map/index.vue
View file @ 8415b0ef
......@@ -15,7 +15,7 @@ export default {
locate: [
{
name: "安徽",
value: [117.29, 32.0581, 50],
value: [117.29, 32.0581, 0],
},
],
}
......@@ -123,7 +123,7 @@ export default {
},
},
animation: false,
data: [{ name: "安徽省", value: 50 }],
data: [{ name: "安徽省", value: 0 }],
},
],
}
......
src/views/Home/PdfView/index.vue
View file @ 8415b0ef
<template>
<div class="pdf" v-loading="loading">
<pdf v-for="i in numPages" :key="i" :src="laoclUrl" :page="i"></pdf>
<div class="pdf">
<div v-loading="!loadedRatio" class="show">
<pdf
ref="pdf"
:src="pdfUrl"
:page="pageNum"
:rotate="pageRotate"
@password="password"
@progress="loadedRatio = $event"
@page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum = $event"
@error="pdfError($event)"
@link-clicked="page = $event"
>
</pdf>
</div>
<div class="pdf_footer">
<div class="info">
<div>当前页数/总页数：{{ pageNum }}/{{ pageTotalNum }}</div>
<div>进度：{{ loadedRatio }}</div>
<div>页面加载成功: {{ curPageNum }}</div>
</div>
<div class="operate">
<!-- <div class="btn" @click.stop="clock">顺时针</div>
<div class="btn" @click.stop="counterClock">逆时针</div> -->
<div class="btn" @click.stop="prePage">上一页</div>
<div class="btn" @click.stop="nextPage">下一页</div>
<div class="btn" @click="scaleD">放大</div>
<div class="btn" @click="scaleX">缩小</div>
<!-- <div class="btn" @click="pdfPrint()">打印所有指定页</div>
<div class="btn" @click="pdfPrintAll()">打印所有</div> -->
<!-- <div class="btn" @click="logContent()">获取页面信息</div> -->
<!-- <div class="btn" @click="fileDownload(pdfUrl, 'pdf文件')">下载</div> -->
</div>
</div>
</div>
</template>
......@@ -8,9 +42,9 @@
/* eslint-disable */
import pdf from "vue-pdf"
export default {
name: "index",
name: "vue_pdf_preview",
props: {
// 当前pdf的路径
// 当前pdf路径
pdfUrl: {
type: String,
default: "",
......@@ -21,38 +55,178 @@ export default {
},
data() {
return {
loading: false,
// 总页数
pageTotalNum: 1,
// 当前页数
numPages: 1,
// 预览路径
laoclUrl: "",
pageNum: 1,
// 加载进度
loadedRatio: 0,
// 页面加载完成
curPageNum: 0,
// 放大系数 默认百分百
scale: 100,
// 旋转角度 ‘90’的倍数才有效
pageRotate: 0,
// 单击内部链接时触发 (目前我没有遇到使用场景)
page: 0,
}
},
watch: {},
computed: {},
created() {
this.laoclUrl = this.pdfUrl
},
mounted() {
this.getNumPages()
},
created() {},
mounted() {},
methods: {
getNumPages() {
this.loading = true
let loadingTask = pdf.createLoadingTask(this.laoclUrl)
// 网上查询 都没有加promise执行的整页渲染 emmmm... 不知道他们怎么运行的
loadingTask.promise
.then((pdf) => {
// this.laoclUrl = loadingTask
this.numPages = pdf.numPages
this.loading = false
})
.catch((err) => {
console.error("pdf加载失败")
//下载PDF
fileDownload(data, fileName) {
let blob = new Blob([data], {
//type类型后端返回来的数据中会有，根据自己实际进行修改
type: "application/pdf;charset-UTF-8",
})
let filename = fileName || "pdf.pdf"
if (typeof window.navigator.msSaveBlob !== "undefined") {
window.navigator.msSaveBlob(blob, filename)
} else {
var blobURL = window.URL.createObjectURL(blob)
// 创建隐藏<a>标签进行下载
var tempLink = document.createElement("a")
tempLink.style.display = "none"
tempLink.href = blobURL
tempLink.setAttribute("download", filename)
if (typeof tempLink.download === "undefined") {
tempLink.setAttribute("target", "_blank")
}
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
window.URL.revokeObjectURL(blobURL)
}
},
//放大
scaleD() {
this.scale += 5
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%"
},
//缩小
scaleX() {
// scale 是百分百展示 不建议缩放
if (this.scale == 100) {
return
}
this.scale += -5
console.log(parseInt(this.scale) + "%")
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%"
},
// 切换上一页
prePage() {
var p = this.pageNum
p = p > 1 ? p - 1 : this.pageTotalNum
this.pageNum = p
document.querySelector(".pdf .show").scrollTop = 0
},
// 切换下一页
nextPage() {
var p = this.pageNum
p = p < this.pageTotalNum ? p + 1 : 1
this.pageNum = p
document.querySelector(".pdf .show").scrollTop = 0
},
// 顺时针选中角度
clock() {
this.pageRotate += 90
},
// 逆时针旋转角度
counterClock() {
this.pageRotate -= 90
},
// pdf 有密码 则需要输入秘密
password(updatePassword, reason) {
updatePassword(prompt('password is "test"'))
console.log("...reason...")
console.log(reason)
console.log("...reason...")
},
// 页面加载成功 当前页数
pageLoaded(e) {
this.$emit("current", e)
this.curPageNum = e
},
// 异常监听
pdfError(error) {
console.error(error)
},
// 打印所有
pdfPrintAll() {
this.$refs.pdf.print()
},
// 打印 第一页和第二页
pdfPrint() {
// 第一个参数 文档打印的分辨率
// 第二个参数 文档打印的页数
this.$refs.pdf.print(100, [1, 2])
},
// 获取当前页面pdf的文字信息内容
logContent() {
this.$refs.pdf.pdf.forEachPage(function (page) {
return page.getTextContent().then(function (content) {
let text = content.items.map((item) => item.str)
let allStr = content.items.reduce(
(initVal, item) => (initVal += item.str),
""
)
console.log(allStr) // 内容字符串
console.log(text) // 内容数组
})
})
},
},
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.pdf {
padding: 20px;
.show {
overflow: auto;
margin: auto;
// max-width: 75%;
height: 450px;
// max-height: 530px;
}
.pdf_footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
padding: 10px 0;
background-color: rgba(255, 255, 255, 0.5);
.info {
display: flex;
flex-wrap: wrap;
div {
width: 30%;
}
}
.operate {
margin: 10px 0 0;
display: flex;
flex-wrap: wrap;
div {
// width: 80px;
text-align: center;
font-size: 15px;
}
.btn {
cursor: pointer;
margin: 5px 10px;
width: 120px;
border-radius: 10px;
padding: 5px;
color: #fff;
background-color: #3dcbbc;
}
}
}
}
</style>
src/views/Home/index.vue
View file @ 8415b0ef
......@@ -17,6 +17,7 @@
<li
v-for="(item, index) in noticeList"
:key="index"
title="点击查看pdf文件"
@click="setPdf(item)"
>
<div class="left">
......@@ -49,13 +50,18 @@
:name="e.title"
>
<ul class="tabslist" style="height: 380px" :loading="listLoading">
<li v-for="(item, index) in exampleList" :key="index">
<li
v-for="(item, index) in exampleList"
:key="index"
title="点击查看pdf文件"
@click="setPdf(item)"
>
<div class="left">
<div class="circle"></div>
{{ item.title }}
{{ item.articleTitle }}
</div>
<div class="right">
{{ item.date }}
{{ item.createTime }}
</div>
</li>
</ul>
......@@ -283,6 +289,7 @@ export default {
},
created() {
this.getArticleList("1")
this.getArticleList("6")
},
mounted() {
this.getRankTotal()
......@@ -330,6 +337,9 @@ export default {
if (["1", "2", "3"].includes(moduleType)) {
this.noticeList = [...res.data.records]
}
if (["6"].includes(moduleType)) {
this.exampleList = [...res.data.records]
}
}
})
.catch((e) => {
......@@ -383,7 +393,7 @@ export default {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
// justify-content: space-between;
// &:hover {
// overflow: overlay;
// }
......
src/views/systems/operation-management/components/TypicalCase.vue 0 → 100644
View file @ 8415b0ef
<template>
<div id="medicalunion-management">
<div class="top-btn">
<el-button type="primary" class="btn" @click="addMedical">添加</el-button>
</div>
<div class="bot-table">
<customs-table
ref="table"
:table-data="tableData"
:columns="columns"
:header-class="'newHeader'"
:list-loading="listLoading"
:current-page="pageIndex"
:total-count="total"
:page-sizes="pageSizes"
:page-size="pageSize"
@pageSizeChange="handleSizeChange"
@currentPageChange="handleCurrentChange"
/>
</div>
<el-dialog
:visible.sync="addVisible"
width="520px"
:show-close="true"
@closed="resetForm"
>
<div class="title">{{ readOnly ? "查看" : "添加" }}</div>
<el-form
ref="form"
:model="form"
:label-position="'right'"
label-width="110px"
label-suffix=":"
:disabled="readOnly"
>
<el-form-item
v-for="(item, index) in formList"
:key="index"
:label="item.label"
:prop="item.prop"
:rules="[{ required: true, message: item.label + '不能为空' }]"
>
<!-- <template v-if="!readOnly"> -->
<template>
<!-- 输入框 -->
<el-input
v-if="item.type == 'input'"
v-model="form[item.prop]"
autocomplete="off"
:placeholder="'请填写' + item.label"
></el-input>
<!-- 下拉选 -->
<el-select
v-else-if="item.type == 'select'"
v-model="form[item.prop]"
:placeholder="'请选择' + item.label"
style="width: 100%"
>
<el-option
v-for="e in item.selectGroup"
:key="e.value"
:label="e.label"
:value="e.value"
></el-option>
</el-select>
<!-- 上传 -->
<el-upload-self
v-else-if="item.type === 'upload'"
v-model="form[item.prop]"
:btn-type="'text'"
v-bind="item"
:list-type="item.listType"
:accept="item.accept"
:limit="item.limit"
:disabled="readOnly"
></el-upload-self>
<!-- switch -->
<!-- switch切换 启用 -->
<el-switch
v-else-if="item.type === 'switch'"
v-model="form[item.prop]"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</template>
<!-- <template v-else>
<span>{{ form[item.prop] || "--" }}</span>
</template> -->
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button class="f-btn" type="primary" @click="submitForm('6')"
>保存</el-button
>
</span>
</el-dialog>
<!-- 删除提示框 -->
<el-dialog title="提示" :visible.sync="deleteVisible" width="30%">
<span>确定删除吗？</span>
<span slot="footer" class="dialog-footers">
<el-button @click="deleteVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmDelete">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import CustomsTable from "@/components/CustomsTable"
import paginationMixin from "@/components/TabComponents/mixin"
import ElUploadSelf from "@/components/UploadForOperation"
import mixin from "./mixin"
import { articleList } from "@/api/operation-management"
export default {
components: {
CustomsTable,
ElUploadSelf,
},
mixins: [paginationMixin, mixin],
data() {
return {
addVisible: false,
listLoading: false,
deleteVisible: false,
columns: [
{
label: "标题",
minWidth: 120,
value: "articleTitle",
},
{
label: "文件",
minWidth: 120,
type: "file",
value: "filePath",
},
{
label: "上传时间",
minWidth: 120,
value: "uploadTime",
},
{
label: "最新修改时间",
minWidth: 120,
value: "updateTime",
},
{
label: "上传人姓名",
minWidth: 120,
value: "uploadUserName",
},
{
label: "启用状态",
minWidth: 120,
type: "switch",
value: "status",
func: this.openChage,
},
{
label: "操作",
width: 220,
fixed: "right",
operType: "button",
operations: [
{
func: this.viewMedical,
formatter(row) {
return {
label: "查看",
type: "text",
}
},
},
{
func: this.editMedical,
formatter(row) {
return {
label: "编辑",
type: "text",
}
},
},
{
func: this.deleteFunc,
style: {
color: "#FA6400",
},
formatter(row) {
return {
label: "删除",
type: "text",
}
},
},
],
},
],
tableData: [
// {
// title: "第一个",
// isOpen: true,
// },
],
formList: [
{
type: "input",
label: "标题",
prop: "articleTitle",
},
{
type: "upload",
label: "PDF",
prop: "filePath",
accept: "application/pdf",
},
{
type: "switch",
label: "启用状态",
prop: "status",
},
],
}
},
watch: {},
mounted() {
this.getArticleList()
},
methods: {
// 获取新闻会议
getArticleList() {
this.listLoading = true
let params = {
size: this.pageSize,
current: this.pageIndex,
moduleType: "6",
}
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
})
},
},
}
</script>
<style lang="scss" scoped>
#medicalunion-management {
padding: 20px 0;
.top-btn {
.btn {
width: 80px;
height: 32px;
background: #4e68ff;
border-radius: 4px;
}
}
.bot-table {
margin-top: 20px;
}
.title {
text-align: center;
height: 26px;
font-size: 22px;
font-family: AlibabaPuHuiTiM;
color: rgba(0, 0, 0, 0.8);
line-height: 26px;
margin-bottom: 30px;
}
}
::v-deep .el-dialog__body {
padding: 0 40px;
border-top: none;
}
::v-deep .el-dialog__footer {
border-top: none;
text-align: center;
.f-btn {
width: 100px;
height: 32px;
background: #4e68ff;
}
}
</style>
src/views/systems/operation-management/index.vue
View file @ 8415b0ef
......@@ -18,6 +18,7 @@ import NoticeAnnouncement from "@/views/systems/operation-management/components/
import AcademicTrend from "@/views/systems/operation-management/components/AcademicTrend.vue"
import HealthPopularization from "@/views/systems/operation-management/components/HealthPopularization.vue"
import scientificResearch from "@/views/systems/operation-management/components/scientificResearch.vue"
import TypicalCase from "./components/TypicalCase.vue"
export default {
components: {
NewsMeeting,
......@@ -25,6 +26,7 @@ export default {
AcademicTrend,
HealthPopularization,
scientificResearch,
TypicalCase,
},
data() {
return {
......@@ -50,6 +52,10 @@ export default {
name: "科学研究",
component: "scientificResearch",
},
{
name: "典型案例",
component: "TypicalCase",
},
],
}
},
......
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