Skip to content

M
meet
Commit 121cc7d8 authored by wangqinghua's avatar wangqinghua
Browse files
Options

pdf 预览

parent c34b175e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 242 additions and 106 deletions
package-lock.json
View file @ 121cc7d8
This diff is collapsed.
package.json
View file @ 121cc7d8
......@@ -11,6 +11,8 @@
"axios": "^0.18.0",
"element-ui": "^2.5.4",
"vue": "^2.6.6",
"vue-html-loader": "^1.2.4",
"vue-pdf": "^4.0.6",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
......@@ -20,11 +22,11 @@
"@vue/cli-service": "^3.4.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"compression-webpack-plugin": "^2.0.0",
"eslint": "^5.15.2",
"eslint-plugin-html": "^5.0.3",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.9.0",
"pdfjs-dist": "^2.0.943",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.21"
},
......
public/data/index.html 0 → 100644
View file @ 121cc7d8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上海市委组织部综合分析研判系统</title>
<script type="text/javascript">
window.location.href = 'meeting/meetingList.html';
</script>
</head>
<body>
</body>
</html>
\ No newline at end of file
src/api/api.js
View file @ 121cc7d8
......@@ -84,6 +84,9 @@ export const getIntentionPage = params =>req('get','/intention/getIntentionPage
//根据id删除意向
export const removeIntentionById = params =>req('get','/intention/removeIntentionById',params);
//下载文件
export const downloadFile = params =>req('get','/common/file/download',params);
......
src/components/specialDialog.vue
View file @ 121cc7d8
......@@ -22,11 +22,12 @@
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handleUpload"
:file-list="fileList"
:auto-upload="false">
action="/api/common/file/upload"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">文件最大上传1MB</div>
</el-upload>
</el-form-item>
</el-form>
......@@ -113,18 +114,16 @@
selectPerson(){
this.$refs.attendList.showDialog()
},
handleUpload(file,fileList){
const formData = new FormData()
formData.append('file',file.raw)
uploadFile(formData).then(
(res)=>{
const d = {
name: res.data.name,
saveName: res.data.saveName,
}
this.form.accessories.push(d)
}
)
handleSuccess(response,file,fileList){
const d = {
name: response.data.name,
saveName: response.data.saveName,
}
this.form.accessories.push(d)
this.$message.success("文件"+response.data.name+"上传成功")
},
handleError(err,file,fileList){
this.$message.error("文件上传失败，文件最大上传1MB")
},
//选择特殊议程
changeCheck(){
......@@ -163,6 +162,7 @@
this.form.accessories.forEach((e,index)=>{
e.sortNum = index +1
})
console.log(this.form)
if(this.checked){ //特殊议程
data = {
remark : this.form.remark,
......
src/router.js
View file @ 121cc7d8
......@@ -24,6 +24,7 @@ const routes = [
{path: '/meetManage', name: 'meetManage', component: () => import( './views/meetManage.vue')},
{path: '/viewFile', name: 'viewFile', component: () => import( './views/viewFile.vue')},
{path: '/preview', name: 'preview', component: () => import( './views/preview.vue')},
{path: '/rar', name: 'rar', component: () => import( './views/rar.vue'), meta: { keepAlive: true } },
{
path:'/login',
name:'login',
......
src/views/meetList.vue
View file @ 121cc7d8
......@@ -18,6 +18,7 @@
<el-col class="text-right" :span="8">
<el-button size="small" @click="search" plain> 查 询</el-button>
<el-button size="small" @click="handleAdd" plain>新增会议</el-button>
<el-button size="small" @click="downloadData" plain>离线数据</el-button>
</el-col>
</el-row>
<div class="margin-20-0">
......@@ -49,8 +50,10 @@
label="操作">
<template slot-scope="scope">
<span class="font-size-20 pointer">
<i @click="handleEdit(scope.row)" class="el-icon-edit-outline margin-right-10"></i>
<i @click="handleDelete(scope.row)" class="el-icon-delete"></i>
<i @click="handleEdit(scope.row)" class="el-icon-edit-outline margin-right-20"></i>
<i @click="handleDelete(scope.row)" class="el-icon-delete margin-right-20"></i>
<i title="离线缓存" @click="downloadData(scope.row)" class="el-icon-download margin-right-20"></i>
<i v-if="scope.row.preview === true" title="预览" @click="previewMeet(scope.row)" class="el-icon-more"></i>
</span>
</template>
</el-table-column>
......@@ -71,7 +74,7 @@
</template>
<script>
import {getMeetingPage,removeMeetingById} from '../api/api'
import {getMeetingPage,removeMeetingById,getMeetingById} from '../api/api'
import {formatDate} from "../common/date";
export default {
......@@ -143,6 +146,26 @@
}
)
})
},
//缓存数据
downloadData(row){
row.preview = true
console.log(this.tableData)
getMeetingById({id:row.id}).then(
(res)=>{
this.meet = res.data
let data = JSON.stringify(this.meet)
localStorage.setItem(row.id,data)
}
)
},
//预览
previewMeet(row){
let newpage = this.$router.resolve({
name: 'viewFile',
query: {previewId: row.id}
})
window.open(newpage.href, '_blank');
}
},
filters:{
......
src/views/navbar.vue
View file @ 121cc7d8
<template>
<el-row :gutter="20">
<el-col class="text-center" :span="3">
部位会会议管理
部务会会议管理
</el-col>
<el-col :offset="15" :span="4"><div class="grid-content bg-purple">
欢迎您！系统管理员
......
src/views/preview.vue
View file @ 121cc7d8
<!--预览文件-->
<template>
<div class="preview">
<canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
<div class="pdf">
<p class="arrow">
<span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页1</span>
{{currentPage}} / {{pageCount}}
<span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
</p>
<pdf
ref="pdf"
:src="src"
:page="currentPage"
@progress="loadedRatio = $event"
@num-pages="pageCount = $event"
@page-loaded="currentPage= $event"
@loaded="loadPdfHandler"
></pdf>
</div>
</template>
<script>
import PDFJS from 'pdfjs-dist'
import pdf from 'vue-pdf'
import * as types from '../store/types'
let Base64 = require('js-base64').Base64
export default {
name: "preview",
data () {
components: {
pdf
},
data() {
return {
id:null,
pdfDoc: null,
loadding: false,
pages: 0,
fileName:'',
src: "",
url: "",
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
loadedRatio: 0,
}
},
methods:{
renderPage (num) {
let _this = this
this.pdfDoc.getPage(num).then(function (page) {
let canvas = document.getElementById('the-canvas' + num)
let ctx = canvas.getContext('2d')
let dpr = window.devicePixelRatio || 1
let bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1
let ratio = dpr / bsr
let viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
canvas.width = (viewport.width) * ratio
canvas.height = (viewport.height) * ratio
canvas.style.width = viewport.width + 'px'
canvas.style.height = viewport.height + 'px'
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
var renderContext = {
canvasContext: ctx,
viewport: viewport
}
page.render(renderContext)
if (_this.pages > num) {
_this.renderPage(num + 1)
}
})
mounted() {
this.$store.commit(types.SIDEWIDTH, 0) //隐藏侧边栏
this.url = Base64.decode(this.$route.query.url)
this.src = pdf.createLoadingTask(this.url)
},
methods: {
changePdfPage(val) {
// console.log(val)
if (val === 0 && this.currentPage > 1) {
this.currentPage--
console.log(this.currentPage)
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++
// console.log(this.currentPage)
}
},
loadFile (url) {
let _this = this
PDFJS.getDocument(url).then(function (pdf) {
_this.pdfDoc = pdf
_this.pages = _this.pdfDoc.numPages
_this.$nextTick(() => {
_this.renderPage(1)
})
})
loadPdfHandler(e) {
this.currentPage = 1;
},
},
mounted(){
this.$store.commit(types.SIDEWIDTH,0) //隐藏侧边栏
let url = Base64.decode(this.$route.query.url)
this.loadFile(url)
}
}
</script>
<style scoped>
.preview{
height: 100%;
}
canvas {
display: block;
border-bottom: 1px solid black;
<style lang="scss">
.main-container {
width: 100%;
}
.arrow {
padding: 20px 0;
text-align: center;
}
.turn {
font-size: 20px;
color: #094dfb;
font-weight: bold;
margin: 0 20px;
cursor: pointer;
}
.grey {
color: #999999;
}
</style>
\ No newline at end of file
src/views/rar.vue 0 → 100644
View file @ 121cc7d8
<template>
<div>
<iframe width="100%" :src="`${publicPath}data/index.html`"></iframe>
</div>
</template>
<script>
import * as types from '../store/types'
export default {
name: "rar",
data(){
return {
url:"",
publicPath: process.env.BASE_URL
}
},
mounted() {
this.$store.commit(types.SIDEWIDTH, 0) //隐藏侧边栏
},
}
</script>
<style lang="scss">
.main-container {
width: 100%;
}
iframe{
height: 720px;
}
</style>
\ No newline at end of file
src/views/sidebar.vue
View file @ 121cc7d8
......@@ -4,14 +4,14 @@
<el-menu-item index="1">
<span slot="title">
<router-link to="/meetList">
部位会会议列表
部务会会议列表
</router-link>
</span>
</el-menu-item>
<el-menu-item index="2">
<span slot="title">
<router-link to="/intention">
部位会会议意向
部务会会议意向
</router-link>
</span>
</el-menu-item>
......
src/views/viewFile.vue
View file @ 121cc7d8
......@@ -44,7 +44,7 @@
</el-col>
<el-col :span="20" class="padding-10-0">
<p v-for="file of item.accessories" class="padding-10-0">
<a @click="selectFile(file.saveName)">{{file.name}}</a>
<a @click="selectFile(file)">{{file.name}}</a>
</p>
</el-col>
</el-row>
......@@ -55,7 +55,7 @@
</template>
<script>
import {getMeetingById} from '../api/api'
import {getMeetingById,downloadFile} from '../api/api'
import {formatDate} from "../common/date";
import * as types from '../store/types'
let Base64 = require('js-base64').Base64
......@@ -74,13 +74,29 @@
}
},
methods: {
selectFile(saveName){
let url = '/api/common/file/download?fileName='+saveName
if(!saveName.includes('pdf')){
let elemIF = document.createElement("iframe");
elemIF.src = url;
elemIF.style.display = "none";
document.body.appendChild(elemIF);
selectFile(file){
let url = '/api/common/file/download?fileName=' +file.saveName
const data = {
fileName:file.saveName
}
if(file.saveName.includes("rar")){
let newpage = this.$router.resolve({
name: 'rar',
})
window.open(newpage.href, '_blank');
}else if(!file.saveName.includes('pdf')){
downloadFile(data).then(
(res)=>{
const blob = new Blob([res]);
const url= window.URL.createObjectURL(blob);
let link = document.createElement("a");
link.setAttribute("href", url);
link.setAttribute("download", file.name);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
)
}else{
let newpage = this.$router.resolve({
name: 'preview',
......@@ -94,23 +110,41 @@
},
mounted () {
this.$store.commit(types.SIDEWIDTH,0) //隐藏侧边栏
this.id = this.$route.query.id
getMeetingById({id:this.id}).then(
(res)=>{
this.meet = res.data
res.data.intentionList.forEach(e=>{ //意向
this.list.push(e)
})
res.data.agendaList.forEach(e=>{ //议程
this.list.push(e)
this.agendaInfo.push(e.title)
e.linkAttends.forEach(e=>{
this.attendPerson += e.name +"、"
if(this.$route.query.id){
this.id = this.$route.query.id
getMeetingById({id:this.id}).then(
(res)=>{
this.meet = res.data
res.data.intentionList.forEach(e=>{ //意向
this.list.push(e)
})
res.data.agendaList.forEach(e=>{ //议程
this.list.push(e)
this.agendaInfo.push(e.title)
e.linkAttends.forEach(e=>{
this.attendPerson += e.name +"、"
})
})
this.attendPerson = this.attendPerson.substr(0,this.attendPerson.length -1)
}
)
}else if(this.$route.query.previewId){
this.id = this.$route.query.previewId
this.meet = JSON.parse( localStorage.getItem(this.id) )
console.log(this.meet)
this.meet.intentionList.forEach(e=>{ //意向
this.list.push(e)
})
this.meet.agendaList.forEach(e=>{ //议程
this.list.push(e)
this.agendaInfo.push(e.title)
e.linkAttends.forEach(e=>{
this.attendPerson += e.name +"、"
})
this.attendPerson = this.attendPerson.substr(0,this.attendPerson.length -1)
}
)
})
this.attendPerson = this.attendPerson.substr(0,this.attendPerson.length -1)
}
},
filters:{
formatDate(time){
......
vue.config.js
View file @ 121cc7d8
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js','css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
// 基本路径
publicPath: './',
// 输出文件目录
outputDir: 'dist',
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, { limit: 102400 }))
},
configureWebpack:config =>{
if(isProduction){
config.plugins.push(new CompressionWebpackPlugin({
algorithm:'gzip',
test:new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold:10240,
minRatio:0.8
}))
}
},
devServer:{
proxy:{
'/api':{
......
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