|
|
|
|
@ -3,28 +3,31 @@
|
|
|
|
|
<div id="pwpg" class="pwpg" ref="pwpg"></div>
|
|
|
|
|
<PWanPgd id="pwpgd" ref="pwpgd" @loadPdf="loadPdf" @initPgd="initPgd" :height="height" :worker="getWorker" :workers="workers"/>
|
|
|
|
|
<ZyjhSelectComp id="selectComp" ref="selRef" @initWorkers="initWorkers"/>
|
|
|
|
|
<div id="pdf" class="pdf" :style="{height:height,overflowY:'auto'}" v-if="pdfShow">
|
|
|
|
|
<pdf v-for="i in numPages" :key="i" :page="i" :src="pdfUrl" />
|
|
|
|
|
</div>
|
|
|
|
|
<TipsComp />
|
|
|
|
|
<Drawer ref="drawer"/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import * as pdfjsLib from 'pdfjs-dist';
|
|
|
|
|
// import * as pdfjsLib from 'pdfjs-dist';
|
|
|
|
|
import PWanPgd from "@/views/zyjhzx/pwanpgong/comps/PwanPgd.vue";
|
|
|
|
|
import container from "./comps/container";
|
|
|
|
|
import drawTitle from './comps/title'
|
|
|
|
|
import workers from "./comps/person";
|
|
|
|
|
import drawDw from './comps/dw'
|
|
|
|
|
import drawPgd from './comps/pgd'
|
|
|
|
|
import {getBzryList} from "@/api/sjzx/bzzGL";
|
|
|
|
|
import {dict, getForeman, getYcldw, shangLiao} from "@/api/zyjh";
|
|
|
|
|
import {getForeman, getYcldw} from "@/api/zyjh";
|
|
|
|
|
import ZyjhSelectComp from "@/views/zyjhzx/components/SelectComp.vue";
|
|
|
|
|
import TipsComp from "@/views/zyjhzx/components/TipsComp.vue";
|
|
|
|
|
import Drawer from "@/views/zyjhzx/components/Drawer.vue";
|
|
|
|
|
import pdf from "vue-pdf";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name:'PWanPGong',
|
|
|
|
|
components: {Drawer, TipsComp, ZyjhSelectComp, PWanPgd},
|
|
|
|
|
components: {Drawer, TipsComp, ZyjhSelectComp, PWanPgd,pdf},
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
title:'抛 丸 作 业 派 工',
|
|
|
|
|
@ -44,6 +47,9 @@ export default {
|
|
|
|
|
zyq:null,
|
|
|
|
|
deviceId:null,
|
|
|
|
|
dwGroup:null,
|
|
|
|
|
pdfShow:false,
|
|
|
|
|
pdfUrl:null,
|
|
|
|
|
numPages:null,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
@ -62,46 +68,56 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
loadPdf(url) {
|
|
|
|
|
const loadingTask = pdfjsLib.getDocument(url);
|
|
|
|
|
loadingTask.promise.then(pdf => {
|
|
|
|
|
pdf.getPage(3).then(page => {
|
|
|
|
|
const viewport = page.getViewport();
|
|
|
|
|
const canvas = document.createElement('canvas');
|
|
|
|
|
const context = canvas.getContext('2d');
|
|
|
|
|
canvas.height = this.height;
|
|
|
|
|
canvas.width = this.width/3;
|
|
|
|
|
context.setTransform(1, 0, 0, -1, 0, canvas.height)
|
|
|
|
|
|
|
|
|
|
const renderContext = {
|
|
|
|
|
canvasContext: context,
|
|
|
|
|
viewport: viewport
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
page.render(renderContext).promise.then(() => {
|
|
|
|
|
|
|
|
|
|
const image = new Konva.Image({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 10,
|
|
|
|
|
image: canvas,
|
|
|
|
|
width: canvas.width / (window.devicePixelRatio || 1),
|
|
|
|
|
height: canvas.height / (window.devicePixelRatio || 1)
|
|
|
|
|
});
|
|
|
|
|
image.scale({
|
|
|
|
|
x:0.6,
|
|
|
|
|
y:0.6
|
|
|
|
|
});
|
|
|
|
|
image.rotation(90)
|
|
|
|
|
image.offsetY(image.width()*1.45)
|
|
|
|
|
this.pgdGroup.add(image);
|
|
|
|
|
});
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.error('Cannot load page', err);
|
|
|
|
|
loadPdf(url){
|
|
|
|
|
this.pdfShow=false
|
|
|
|
|
this.pdfUrl=null
|
|
|
|
|
this.numPages=null
|
|
|
|
|
this.pdfUrl=pdf.createLoadingTask(url)
|
|
|
|
|
this.pdfUrl.promise.then((pdf) => {
|
|
|
|
|
this.numPages = pdf.numPages;
|
|
|
|
|
this.pdfShow=true
|
|
|
|
|
});
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.error('Cannot load PDF document', err);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// loadPdf(url) {
|
|
|
|
|
// const loadingTask = pdfjsLib.getDocument(url);
|
|
|
|
|
// loadingTask.promise.then(pdf => {
|
|
|
|
|
// pdf.getPage(3).then(page => {
|
|
|
|
|
// const viewport = page.getViewport();
|
|
|
|
|
// const canvas = document.createElement('canvas');
|
|
|
|
|
// const context = canvas.getContext('2d');
|
|
|
|
|
// canvas.height = this.height;
|
|
|
|
|
// canvas.width = this.width/3;
|
|
|
|
|
// context.setTransform(1, 0, 0, -1, 0, canvas.height)
|
|
|
|
|
//
|
|
|
|
|
// const renderContext = {
|
|
|
|
|
// canvasContext: context,
|
|
|
|
|
// viewport: viewport
|
|
|
|
|
// };
|
|
|
|
|
//
|
|
|
|
|
// page.render(renderContext).promise.then(() => {
|
|
|
|
|
//
|
|
|
|
|
// const image = new Konva.Image({
|
|
|
|
|
// x: 10,
|
|
|
|
|
// y: 10,
|
|
|
|
|
// image: canvas,
|
|
|
|
|
// width: canvas.width / (window.devicePixelRatio || 1),
|
|
|
|
|
// height: canvas.height / (window.devicePixelRatio || 1)
|
|
|
|
|
// });
|
|
|
|
|
// image.scale({
|
|
|
|
|
// x:0.6,
|
|
|
|
|
// y:0.6
|
|
|
|
|
// });
|
|
|
|
|
// image.rotation(90)
|
|
|
|
|
// image.offsetY(image.width()*1.45)
|
|
|
|
|
// this.pgdGroup.add(image);
|
|
|
|
|
// });
|
|
|
|
|
// }).catch(err => {
|
|
|
|
|
// console.error('Cannot load page', err);
|
|
|
|
|
// });
|
|
|
|
|
// }).catch(err => {
|
|
|
|
|
// console.error('Cannot load PDF document', err);
|
|
|
|
|
// });
|
|
|
|
|
// },
|
|
|
|
|
initPgd(pgd={}){
|
|
|
|
|
const group=this.drawGd(pgd)
|
|
|
|
|
this.pgdGroup.add(group)
|
|
|
|
|
@ -191,6 +207,16 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
#pdf {
|
|
|
|
|
width:28.8%;
|
|
|
|
|
height: 93.5vh;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top:50px;
|
|
|
|
|
right:2.5%;
|
|
|
|
|
border: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#selectComp {
|
|
|
|
|
width:30%;
|
|
|
|
|
height: auto;
|
|
|
|
|
|
