Skip to content

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

pdf 预览

parent c34b175e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 222 additions and 86 deletions
package-lock.json
View file @ 121cc7d8
This diff is collapsed.
package.json
View file @ 121cc7d8
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
"axios": "^0.18.0", "axios": "^0.18.0",
"element-ui": "^2.5.4", "element-ui": "^2.5.4",
"vue": "^2.6.6", "vue": "^2.6.6",
"vue-html-loader": "^1.2.4",
"vue-pdf": "^4.0.6",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.0.1" "vuex": "^3.0.1"
}, },
...@@ -20,11 +22,11 @@ ...@@ -20,11 +22,11 @@
"@vue/cli-service": "^3.4.0", "@vue/cli-service": "^3.4.0",
"@vue/eslint-config-standard": "^4.0.0", "@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"compression-webpack-plugin": "^2.0.0",
"eslint": "^5.15.2", "eslint": "^5.15.2",
"eslint-plugin-html": "^5.0.3", "eslint-plugin-html": "^5.0.3",
"eslint-plugin-vue": "^5.0.0", "eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.9.0", "node-sass": "^4.9.0",
"pdfjs-dist": "^2.0.943",
"sass-loader": "^7.1.0", "sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.21" "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 ...@@ -84,6 +84,9 @@ export const getIntentionPage = params =>req('get','/intention/getIntentionPage
//根据id删除意向 //根据id删除意向
export const removeIntentionById = params =>req('get','/intention/removeIntentionById',params); 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 @@ ...@@ -22,11 +22,12 @@
<el-upload <el-upload
class="upload-demo" class="upload-demo"
ref="upload" ref="upload"
action="" action="/api/common/file/upload"
:on-change="handleUpload" :on-success="handleSuccess"
:file-list="fileList" :on-error="handleError"
:auto-upload="false"> :file-list="fileList">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">文件最大上传1MB</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -113,18 +114,16 @@ ...@@ -113,18 +114,16 @@
selectPerson(){ selectPerson(){
this.$refs.attendList.showDialog() this.$refs.attendList.showDialog()
}, },
handleUpload(file,fileList){ handleSuccess(response,file,fileList){
const formData = new FormData()
formData.append('file',file.raw)
uploadFile(formData).then(
(res)=>{
const d = { const d = {
name: res.data.name, name: response.data.name,
saveName: res.data.saveName, saveName: response.data.saveName,
} }
this.form.accessories.push(d) this.form.accessories.push(d)
} this.$message.success("文件"+response.data.name+"上传成功")
) },
handleError(err,file,fileList){
this.$message.error("文件上传失败，文件最大上传1MB")
}, },
//选择特殊议程 //选择特殊议程
changeCheck(){ changeCheck(){
...@@ -163,6 +162,7 @@ ...@@ -163,6 +162,7 @@
this.form.accessories.forEach((e,index)=>{ this.form.accessories.forEach((e,index)=>{
e.sortNum = index +1 e.sortNum = index +1
}) })
console.log(this.form)
if(this.checked){ //特殊议程 if(this.checked){ //特殊议程
data = { data = {
remark : this.form.remark, remark : this.form.remark,
......
src/router.js
View file @ 121cc7d8
...@@ -24,6 +24,7 @@ const routes = [ ...@@ -24,6 +24,7 @@ const routes = [
{path: '/meetManage', name: 'meetManage', component: () => import( './views/meetManage.vue')}, {path: '/meetManage', name: 'meetManage', component: () => import( './views/meetManage.vue')},
{path: '/viewFile', name: 'viewFile', component: () => import( './views/viewFile.vue')}, {path: '/viewFile', name: 'viewFile', component: () => import( './views/viewFile.vue')},
{path: '/preview', name: 'preview', component: () => import( './views/preview.vue')}, {path: '/preview', name: 'preview', component: () => import( './views/preview.vue')},
{path: '/rar', name: 'rar', component: () => import( './views/rar.vue'), meta: { keepAlive: true } },
{ {
path:'/login', path:'/login',
name:'login', name:'login',
......
src/views/meetList.vue
View file @ 121cc7d8
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<el-col class="text-right" :span="8"> <el-col class="text-right" :span="8">
<el-button size="small" @click="search" plain> 查 询</el-button> <el-button size="small" @click="search" plain> 查 询</el-button>
<el-button size="small" @click="handleAdd" plain>新增会议</el-button> <el-button size="small" @click="handleAdd" plain>新增会议</el-button>
<el-button size="small" @click="downloadData" plain>离线数据</el-button>
</el-col> </el-col>
</el-row> </el-row>
<div class="margin-20-0"> <div class="margin-20-0">
...@@ -49,8 +50,10 @@ ...@@ -49,8 +50,10 @@
label="操作"> label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="font-size-20 pointer"> <span class="font-size-20 pointer">
<i @click="handleEdit(scope.row)" class="el-icon-edit-outline margin-right-10"></i> <i @click="handleEdit(scope.row)" class="el-icon-edit-outline margin-right-20"></i>
<i @click="handleDelete(scope.row)" class="el-icon-delete"></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> </span>
</template> </template>
</el-table-column> </el-table-column>
...@@ -71,7 +74,7 @@ ...@@ -71,7 +74,7 @@
</template> </template>
<script> <script>
import {getMeetingPage,removeMeetingById} from '../api/api' import {getMeetingPage,removeMeetingById,getMeetingById} from '../api/api'
import {formatDate} from "../common/date"; import {formatDate} from "../common/date";
export default { export default {
...@@ -143,6 +146,26 @@ ...@@ -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:{ filters:{
......
src/views/navbar.vue
View file @ 121cc7d8
<template> <template>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col class="text-center" :span="3"> <el-col class="text-center" :span="3">
部位会会议管理 部务会会议管理
</el-col> </el-col>
<el-col :offset="15" :span="4"><div class="grid-content bg-purple"> <el-col :offset="15" :span="4"><div class="grid-content bg-purple">
欢迎您！系统管理员 欢迎您！系统管理员
......
src/views/preview.vue
View file @ 121cc7d8
<!--预览文件-->
<template> <template>
<div class="preview"> <div class="pdf">
<canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas> <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> </div>
</template> </template>
<script> <script>
import PDFJS from 'pdfjs-dist' import pdf from 'vue-pdf'
import * as types from '../store/types' import * as types from '../store/types'
let Base64 = require('js-base64').Base64 let Base64 = require('js-base64').Base64
export default { export default {
name: "preview", name: "preview",
data () { components: {
pdf
},
data() {
return { return {
id:null, src: "",
pdfDoc: null, url: "",
loadding: false, currentPage: 0, // pdf文件页码
pages: 0, pageCount: 0, // pdf文件总页数
fileName:'', loadedRatio: 0,
} }
}, },
methods:{ mounted() {
renderPage (num) { this.$store.commit(types.SIDEWIDTH, 0) //隐藏侧边栏
let _this = this this.url = Base64.decode(this.$route.query.url)
this.pdfDoc.getPage(num).then(function (page) { this.src = pdf.createLoadingTask(this.url)
let canvas = document.getElementById('the-canvas' + num) },
let ctx = canvas.getContext('2d') methods: {
let dpr = window.devicePixelRatio || 1 changePdfPage(val) {
let bsr = ctx.webkitBackingStorePixelRatio || // console.log(val)
ctx.mozBackingStorePixelRatio || if (val === 0 && this.currentPage > 1) {
ctx.msBackingStorePixelRatio || this.currentPage--
ctx.oBackingStorePixelRatio || console.log(this.currentPage)
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 (val === 1 && this.currentPage < this.pageCount) {
if (_this.pages > num) { this.currentPage++
_this.renderPage(num + 1) // 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> </script>
<style scoped> <style lang="scss">
.preview{ .main-container {
height: 100%;
}
canvas {
display: block;
border-bottom: 1px solid black;
width: 100%; 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> </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 @@ ...@@ -4,14 +4,14 @@
<el-menu-item index="1"> <el-menu-item index="1">
<span slot="title"> <span slot="title">
<router-link to="/meetList"> <router-link to="/meetList">
部位会会议列表 部务会会议列表
</router-link> </router-link>
</span> </span>
</el-menu-item> </el-menu-item>
<el-menu-item index="2"> <el-menu-item index="2">
<span slot="title"> <span slot="title">
<router-link to="/intention"> <router-link to="/intention">
部位会会议意向 部务会会议意向
</router-link> </router-link>
</span> </span>
</el-menu-item> </el-menu-item>
......
src/views/viewFile.vue
View file @ 121cc7d8
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
</el-col> </el-col>
<el-col :span="20" class="padding-10-0"> <el-col :span="20" class="padding-10-0">
<p v-for="file of item.accessories" 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> </p>
</el-col> </el-col>
</el-row> </el-row>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</template> </template>
<script> <script>
import {getMeetingById} from '../api/api' import {getMeetingById,downloadFile} from '../api/api'
import {formatDate} from "../common/date"; import {formatDate} from "../common/date";
import * as types from '../store/types' import * as types from '../store/types'
let Base64 = require('js-base64').Base64 let Base64 = require('js-base64').Base64
...@@ -74,13 +74,29 @@ ...@@ -74,13 +74,29 @@
} }
}, },
methods: { methods: {
selectFile(saveName){ selectFile(file){
let url = '/api/common/file/download?fileName='+saveName let url = '/api/common/file/download?fileName=' +file.saveName
if(!saveName.includes('pdf')){ const data = {
let elemIF = document.createElement("iframe"); fileName:file.saveName
elemIF.src = url; }
elemIF.style.display = "none"; if(file.saveName.includes("rar")){
document.body.appendChild(elemIF); 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{ }else{
let newpage = this.$router.resolve({ let newpage = this.$router.resolve({
name: 'preview', name: 'preview',
...@@ -94,6 +110,7 @@ ...@@ -94,6 +110,7 @@
}, },
mounted () { mounted () {
this.$store.commit(types.SIDEWIDTH,0) //隐藏侧边栏 this.$store.commit(types.SIDEWIDTH,0) //隐藏侧边栏
if(this.$route.query.id){
this.id = this.$route.query.id this.id = this.$route.query.id
getMeetingById({id:this.id}).then( getMeetingById({id:this.id}).then(
(res)=>{ (res)=>{
...@@ -111,6 +128,23 @@ ...@@ -111,6 +128,23 @@
this.attendPerson = this.attendPerson.substr(0,this.attendPerson.length -1) 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)
}
}, },
filters:{ filters:{
formatDate(time){ 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 = { module.exports = {
// 基本路径 // 基本路径
publicPath: './', publicPath: './',
// 输出文件目录 // 输出文件目录
outputDir: 'dist', 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:{ devServer:{
proxy:{ proxy:{
'/api':{ '/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