11.7
Panzihang
parent
61ac97d239
commit
50c0452f43
|
|
@ -97,6 +97,7 @@
|
||||||
portId: "",
|
portId: "",
|
||||||
portName: "",
|
portName: "",
|
||||||
activeIndex: 0,
|
activeIndex: 0,
|
||||||
|
mediaType: "pad",
|
||||||
navList: [{
|
navList: [{
|
||||||
url: "/pages/index/index",
|
url: "/pages/index/index",
|
||||||
name: "装船指令",
|
name: "装船指令",
|
||||||
|
|
@ -129,13 +130,13 @@
|
||||||
imageUrl: "../../static/images/theme/jcIcon1-1.png",
|
imageUrl: "../../static/images/theme/jcIcon1-1.png",
|
||||||
imageUrl2: "../../static/images/theme/jcIcon1-2.png"
|
imageUrl2: "../../static/images/theme/jcIcon1-2.png"
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// url: "/pages/receipt/index",
|
url: "/pages/receipt/index",
|
||||||
// name: "进出口货物交接单",
|
name: "进出口货物交接单",
|
||||||
// type: false,
|
type: false,
|
||||||
// imageUrl: "../../static/images/theme/jckIcon1-1.png",
|
imageUrl: "../../static/images/theme/jckIcon1-1.png",
|
||||||
// imageUrl2: "../../static/images/theme/jckIcon1-2.png"
|
imageUrl2: "../../static/images/theme/jckIcon1-2.png"
|
||||||
// }
|
}
|
||||||
],
|
],
|
||||||
lotusLoadingData: {
|
lotusLoadingData: {
|
||||||
isShow: false //设置显示加载中组件true显示false隐藏
|
isShow: false //设置显示加载中组件true显示false隐藏
|
||||||
|
|
|
||||||
12
pages.json
12
pages.json
|
|
@ -279,6 +279,18 @@
|
||||||
"navigationBarTitleText": "进出口货物交接单"
|
"navigationBarTitleText": "进出口货物交接单"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/receipt/details",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "装卸货物交接计数单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/receipt/sign",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "进出口货物交接单签字"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/test/ceshi",
|
"path": "pages/test/ceshi",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
|
||||||
|
|
@ -75,11 +75,11 @@
|
||||||
tradeItem: {},
|
tradeItem: {},
|
||||||
tradeList: [{
|
tradeList: [{
|
||||||
value: "1",
|
value: "1",
|
||||||
name: "内贸"
|
name: "外贸"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: "2",
|
value: "2",
|
||||||
name: "外贸"
|
name: "内贸"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
vvyShip: "",
|
vvyShip: "",
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
|
|
||||||
// 分页
|
// 分页
|
||||||
total: 0,
|
total: 0,
|
||||||
pageSize: 6,
|
pageSize: 9,
|
||||||
current: 1,
|
current: 1,
|
||||||
|
|
||||||
// 港区信息
|
// 港区信息
|
||||||
|
|
@ -200,7 +200,6 @@
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/discharge/instruct?params=' + params
|
url: '/pages/discharge/instruct?params=' + params
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -251,6 +250,8 @@
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin-top: 15px;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
/deep/.o-empty {
|
/deep/.o-empty {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -258,12 +259,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 32%;
|
width: 32.2%;
|
||||||
margin-top: 15px;
|
|
||||||
margin-right: 2%;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 10px 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|
|
||||||
|
|
@ -788,7 +788,6 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HeadView from '@/components/head-view/head-view.vue';
|
import HeadView from '@/components/head-view/head-view.vue';
|
||||||
import HeadInfo from '@/components/head-info/head-info';
|
|
||||||
import place from './place.vue';
|
import place from './place.vue';
|
||||||
let timers = null;
|
let timers = null;
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -901,7 +900,6 @@
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
HeadView,
|
HeadView,
|
||||||
HeadInfo,
|
|
||||||
place,
|
place,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
||||||
|
|
@ -75,11 +75,11 @@
|
||||||
tradeItem: {},
|
tradeItem: {},
|
||||||
tradeList: [{
|
tradeList: [{
|
||||||
value: "1",
|
value: "1",
|
||||||
name: "内贸"
|
name: "外贸"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: "2",
|
value: "2",
|
||||||
name: "外贸"
|
name: "内贸"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
vvyShip: "",
|
vvyShip: "",
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
|
|
||||||
// 分页
|
// 分页
|
||||||
total: 0,
|
total: 0,
|
||||||
pageSize: 6,
|
pageSize: 9,
|
||||||
current: 1,
|
current: 1,
|
||||||
|
|
||||||
// 港区信息
|
// 港区信息
|
||||||
|
|
@ -258,6 +258,8 @@
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin-top: 15px;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
/deep/.o-empty {
|
/deep/.o-empty {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -265,12 +267,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 32%;
|
width: 32.2%;
|
||||||
margin-top: 15px;
|
|
||||||
margin-right: 2%;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 10px 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>canvas 涂鸦测试页面</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<canvas id="cvs" width="1200" height="332"></canvas>
|
|
||||||
<div onClick="blobImg();">保存</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<script type="application/javascript">
|
|
||||||
var canvas = document.getElementById('cvs');
|
|
||||||
var ctx = canvas.getContext('2d');
|
|
||||||
let isDownin = false;
|
|
||||||
|
|
||||||
var img = new Image();
|
|
||||||
img.src = "zs.png";
|
|
||||||
img.onload = function() {
|
|
||||||
ctx.fillStyle = ctx.createPattern(img, 'no-repeat');
|
|
||||||
ctx.fillRect(0, 0, 1200, 332);
|
|
||||||
ctx.strokeStyle = "#FF0000"; //设置画笔颜色
|
|
||||||
ctx.lineWidth = 5; //设置线的粗细
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas.addEventListener('mousedown', (e) => {
|
|
||||||
isDownin = true
|
|
||||||
ctx.moveTo(e.pageX, e.pageY)
|
|
||||||
});
|
|
||||||
canvas.addEventListener('mousemove', (e) => {
|
|
||||||
if(!isDownin) return
|
|
||||||
ctx.lineTo(e.pageX, e.pageY)
|
|
||||||
ctx.stroke()
|
|
||||||
});
|
|
||||||
canvas.addEventListener('mouseup', (e) => {
|
|
||||||
isDownin = false
|
|
||||||
});
|
|
||||||
|
|
||||||
function blobImg(){
|
|
||||||
canvas.toBlob((blob) => {
|
|
||||||
const a = document.createElement('a');
|
|
||||||
document.body.append(a);
|
|
||||||
a.download = '质损.png';
|
|
||||||
a.href = URL.createObjectURL(blob);
|
|
||||||
a.click();
|
|
||||||
a.remove();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -0,0 +1,532 @@
|
||||||
|
<template>
|
||||||
|
<view class="details">
|
||||||
|
<head-view :title="title"></head-view>
|
||||||
|
<view class="container">
|
||||||
|
<view class="topBox">
|
||||||
|
<view class="topImg">
|
||||||
|
<image src="../../static/images/theme/logo.png"></image>
|
||||||
|
<view class="rightTitle">
|
||||||
|
<text>上海海通国际汽车码头有限公司</text>
|
||||||
|
<text>SHANGHAI HAITONG INTERNATIONAL AUTOMOTIVE TERMINAL CO.</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<p class="title">装卸货物交接计数单</p>
|
||||||
|
<p class="bh">编号/N0:<text>QR-7.5.1-01-05-M</text></p>
|
||||||
|
<view class="infoList">
|
||||||
|
<view class="li">
|
||||||
|
<p class="liTitle">船名：</p>
|
||||||
|
<text>{{shipInfo.spmName}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p class="liTitle">航次：</p>
|
||||||
|
<text>{{shipInfo.vvyName}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p class="liTitle">进出口：</p>
|
||||||
|
<text>{{shipInfo.importExportFlagName}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p class="liTitle">贸易类型：</p>
|
||||||
|
<text>{{shipInfo.tradeType}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p class="liTitle">完工时间：</p>
|
||||||
|
<text>{{shipInfo.actualFinishTime}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p class="liTitle">工班：</p>
|
||||||
|
<text>{{shipInfo.gb}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="listBox">
|
||||||
|
<view class="listTitle">
|
||||||
|
<image src="../../static/images/goodsImg2.png" mode=""></image>
|
||||||
|
<p>货物明细</p>
|
||||||
|
<view class="total">
|
||||||
|
<text>总计：</text>
|
||||||
|
<text>车辆数：{{totalObj.carAmount}}</text>
|
||||||
|
<text>备件数：{{totalObj.partAmount}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="table">
|
||||||
|
<view class="tableTop">
|
||||||
|
<view class="tableHead" v-for="(item,index) in tableHead" :key="index">
|
||||||
|
<p>{{item}}</p>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tableInfo" v-for="(item,index) in tableData" :key="index">
|
||||||
|
<view class="li">
|
||||||
|
{{item.mnfBl}}
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
{{item.mnfMk}}
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
{{item.brdName}}
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
{{item.carAmount}}
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
{{item.partAmount}}
|
||||||
|
</view>
|
||||||
|
<view class="li" @click="toDetails(item)">
|
||||||
|
详情
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="signBox">
|
||||||
|
<view class="signContent">
|
||||||
|
<view class="signTitle">
|
||||||
|
<p>堆场员签名:</p>
|
||||||
|
<p>Yard staff:</p>
|
||||||
|
</view>
|
||||||
|
<view class="signInfo" v-if="shipInfo.yardSignUrl == null" @click="toSign('0')">
|
||||||
|
去签名
|
||||||
|
</view>
|
||||||
|
<view class="signImg" v-else>
|
||||||
|
<image :src="yardSignUrl" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="row"></view>
|
||||||
|
<view class="signContent" v-if="shipInfo.tradeType == '外贸'">
|
||||||
|
<view class="signTitle">
|
||||||
|
<p>理货员签名:</p>
|
||||||
|
<p>tally clerk:</p>
|
||||||
|
</view>
|
||||||
|
<view class="signInfo" v-if="shipInfo.tallySignUrl == null" @click="toSign('1')">
|
||||||
|
去签名
|
||||||
|
</view>
|
||||||
|
<view class="signImg" v-else>
|
||||||
|
<image :src="tallySignUrl" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="signContent" v-else>
|
||||||
|
<view class="signTitle">
|
||||||
|
<p>船方:</p>
|
||||||
|
<p>the ship:</p>
|
||||||
|
</view>
|
||||||
|
<view class="signInfo" v-if="shipInfo.shipSignUrl == null" @click="toSign('2')">
|
||||||
|
去签名
|
||||||
|
</view>
|
||||||
|
<view class="signImg" v-else>
|
||||||
|
<image :src="shipSignUrl" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<uni-popup ref="popup" background-color="#fff">
|
||||||
|
<view class="table rowTable">
|
||||||
|
<view class="tableTop">
|
||||||
|
<view class="tableHead" v-for="(item,index) in rowTableHead" :key="index">
|
||||||
|
<p>{{item}}</p>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tableInfo" v-for="(item,index) in rowTableData" :key="index">
|
||||||
|
<view class="li">
|
||||||
|
{{index + 1}}
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
{{item.vinCode}}
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
{{item.qdLinkName}}
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
{{item.disposalSituationName}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HeadView from '@/components/head-view/head-view.vue';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loginObj: {},
|
||||||
|
portObj: {},
|
||||||
|
title: "",
|
||||||
|
shipInfo: {},
|
||||||
|
totalObj: {},
|
||||||
|
tableHead: ["提单号", "唛头", "品牌", "车辆数", "备件数", "原残具体情况"],
|
||||||
|
tableData: [],
|
||||||
|
rowTableHead: ["序号", "车架号", "质损发生环节", "损伤情况"],
|
||||||
|
rowTableData: [],
|
||||||
|
// 堆场员签名
|
||||||
|
yardSignUrl: "",
|
||||||
|
// 理货员签名
|
||||||
|
tallySignUrl: "",
|
||||||
|
// 船方签名
|
||||||
|
shipSignUrl: "",
|
||||||
|
|
||||||
|
vvyId: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
this.vvyId = JSON.parse(decodeURIComponent(options.params)).vvyId
|
||||||
|
this.loginObj = uni.getStorageSync('loginObj')
|
||||||
|
this.portObj = uni.getStorageSync('portObj')
|
||||||
|
this.initData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取当前航次的船信息
|
||||||
|
initData() {
|
||||||
|
uni.request({
|
||||||
|
url: `${this.$local}/shp/iEDeliverySlipController/page?vvyId=${this.vvyId}`,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json', //自定义请求头信息
|
||||||
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||||
|
},
|
||||||
|
method: 'GET', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.statusCode == 200) {
|
||||||
|
this.shipInfo = res.data.data.records[0]
|
||||||
|
console.log(this.shipInfo)
|
||||||
|
this.title = `船名：${this.shipInfo.spmName} / 航次：${this.shipInfo.vvyName} 装卸货物交接计数单`
|
||||||
|
this.getInfo()
|
||||||
|
this.getSgin()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取数据
|
||||||
|
getInfo() {
|
||||||
|
uni.request({
|
||||||
|
url: `${this.$local}/shp/iEDeliverySlipController/planPage?vvyId=${this.shipInfo.vvyId}&importExportFlag=${this.shipInfo.importExportFlag}`,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json', //自定义请求头信息
|
||||||
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||||
|
},
|
||||||
|
method: 'GET', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode == 200) {
|
||||||
|
this.tableData = res.data.data.plan.records
|
||||||
|
this.totalObj = res.data.data.count
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取当前行的数据
|
||||||
|
toDetails(item) {
|
||||||
|
this.$refs.popup.open('center')
|
||||||
|
let obj = {
|
||||||
|
splId: item.splId,
|
||||||
|
importExportFlag: this.shipInfo.importExportFlag
|
||||||
|
}
|
||||||
|
uni.request({
|
||||||
|
url: `${this.$local}/shp/iEDeliverySlipController/iEDeliverySlipPlanDamage`,
|
||||||
|
data: obj,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json', //自定义请求头信息
|
||||||
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||||
|
},
|
||||||
|
method: 'POST', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode == 200) {
|
||||||
|
this.rowTableData = res.data.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取堆场员，理货员，船方签名
|
||||||
|
getSgin() {
|
||||||
|
let arr = [{
|
||||||
|
type: 0,
|
||||||
|
url: this.shipInfo.yardSignUrl,
|
||||||
|
}, {
|
||||||
|
type: 1,
|
||||||
|
url: this.shipInfo.tallySignUrl,
|
||||||
|
}, {
|
||||||
|
type: 2,
|
||||||
|
url: this.shipInfo.shipSignUrl
|
||||||
|
}]
|
||||||
|
arr.forEach(v => {
|
||||||
|
if (v != null) {
|
||||||
|
this.initImg(v)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 调用获取图片接口
|
||||||
|
initImg(v) {
|
||||||
|
uni.request({
|
||||||
|
url: `${this.$local}/api/file/url/?fileName=${v.url}`,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json', //自定义请求头信息
|
||||||
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||||
|
},
|
||||||
|
method: 'GET', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode == 200) {
|
||||||
|
if (v.type == 0) {
|
||||||
|
this.yardSignUrl = res.data
|
||||||
|
} else if (v.type == 1) {
|
||||||
|
this.tallySignUrl = res.data
|
||||||
|
} else {
|
||||||
|
this.shipSignUrl = res.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 点击签字
|
||||||
|
toSign(type) {
|
||||||
|
this.shipInfo['type'] = type
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.shipInfo));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/receipt/sign?params=' + params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.details {
|
||||||
|
background-color: #F6F7F9;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 16px;
|
||||||
|
margin-top: 68px;
|
||||||
|
|
||||||
|
.topBox {
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.topImg {
|
||||||
|
padding: 16px 0;
|
||||||
|
border-bottom: 1px solid #999;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 270px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTitle {
|
||||||
|
text-align: right;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
text:first-child {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #0052A4;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
text:last-child {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #23262E;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bh {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
padding-bottom: 16.5px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #0052A4;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #23262E;
|
||||||
|
margin-top: 15.5px;
|
||||||
|
padding: 0 60px;
|
||||||
|
|
||||||
|
.li {
|
||||||
|
display: flex;
|
||||||
|
width: 33%;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.liTitle {
|
||||||
|
width: 100px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.listBox {
|
||||||
|
padding: 24px 18px;
|
||||||
|
margin-bottom: 70px;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
|
||||||
|
.listTitle {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #23262E;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 14px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total {
|
||||||
|
padding: 7.5px 16px;
|
||||||
|
background: #FFF8F4;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #FF6400;
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
text:first-child {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
text:last-child {
|
||||||
|
margin-left: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.signBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 66px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #E1E5ED;
|
||||||
|
box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 0 70px;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
width: 1px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #ccc;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signContent {
|
||||||
|
display: flex;
|
||||||
|
margin: 0 54px;
|
||||||
|
|
||||||
|
.signTitle {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #0052A4;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signImg {
|
||||||
|
width: 100px;
|
||||||
|
height: 54px;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.signContent:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
.tableTop {
|
||||||
|
display: flex;
|
||||||
|
background: #F4F4F4;
|
||||||
|
padding: 8px 16px;
|
||||||
|
|
||||||
|
.tableHead {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #0B266A;
|
||||||
|
padding-left: 9px;
|
||||||
|
height: 20px;
|
||||||
|
border-left: 1px solid #0B266A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableInfo {
|
||||||
|
display: flex;
|
||||||
|
background: #fff;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-bottom: 1px solid #E9ECF1;
|
||||||
|
|
||||||
|
.li {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.li:last-child {
|
||||||
|
color: #0067CF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableInfo:nth-of-type(2n) {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableInfo:nth-of-type(2n-1) {
|
||||||
|
background: #FAFAFA;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rowTable {
|
||||||
|
width: 600px;
|
||||||
|
height: 400px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,6 +1,66 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="app">
|
<view class="app">
|
||||||
<head-info :navIndex="5"></head-info>
|
<head-info :navIndex="5"></head-info>
|
||||||
|
<view class="container">
|
||||||
|
<view class="content">
|
||||||
|
<view class="form">
|
||||||
|
<view class="end">
|
||||||
|
<superwei-combox class="input" :candidates="tradeList" :isJSON="true" keyName="name"
|
||||||
|
placeholder="请选择贸易类型" v-model="tradeName" @select="tradeSelect"></superwei-combox>
|
||||||
|
</uni-easyinput>
|
||||||
|
<superwei-combox class="input" :candidates="importExportList" :isJSON="true" keyName="name"
|
||||||
|
placeholder="请选择进出口" v-model="importExport" @select="importExportSelect"></superwei-combox>
|
||||||
|
</uni-easyinput>
|
||||||
|
<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyShip"
|
||||||
|
placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect"></superwei-combox>
|
||||||
|
</uni-easyinput>
|
||||||
|
<button class="btn" @click="onSearch">搜索</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="itemList">
|
||||||
|
<template v-if="itemList.length > 0">
|
||||||
|
<view v-for="(item, index) in itemList" :key="index" class="item">
|
||||||
|
<view @click="toDetails(item)">
|
||||||
|
<view class="title">
|
||||||
|
<view class="titleft">
|
||||||
|
<image src="../../static/images/ship.png" mode="widthFix"></image>
|
||||||
|
<view class="name">
|
||||||
|
{{item.spmName}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="status">
|
||||||
|
<text v-if="item.handoverStatus==0" class="nStarted">● 未完成</text>
|
||||||
|
<text v-if="item.handoverStatus==1" class="green">● 进行中 </text>
|
||||||
|
<text v-if="item.handoverStatus==2" class="complete">● 已完成</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="row">
|
||||||
|
<view class="nitem">
|
||||||
|
航次: <text>{{item.vvyName}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="nitem">
|
||||||
|
贸易类型: <text>{{item.tradeType}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="row">
|
||||||
|
<view class="nitem">
|
||||||
|
进出口: <text>{{item.importExportFlagName}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="nitem">
|
||||||
|
完工时间: <text>{{item.actualFinishTimeFmt}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||||
|
</view>
|
||||||
|
<view class="pageBox" v-if="itemList.length > 0">
|
||||||
|
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
||||||
|
@change="changePage" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -8,39 +68,287 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
// 登录信息
|
||||||
loginObj: {},
|
loginObj: {},
|
||||||
|
// 港区信息
|
||||||
|
portObj: {},
|
||||||
|
// 进出口
|
||||||
|
importExport: "出口",
|
||||||
|
importExportList: [{
|
||||||
|
value: "E",
|
||||||
|
name: "出口"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "I",
|
||||||
|
name: "进口"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 内外贸
|
||||||
|
tradeName: "外贸",
|
||||||
|
tradeList: [{
|
||||||
|
value: "1",
|
||||||
|
name: "外贸"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
name: "内贸"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 船名航次
|
||||||
|
vvyShip: "",
|
||||||
|
vvyId: "",
|
||||||
|
shipId: "",
|
||||||
|
shipName: '',
|
||||||
|
shipList: [],
|
||||||
|
|
||||||
|
itemList: [],
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
total: 0,
|
||||||
|
pageSize: 9,
|
||||||
|
current: 1,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.loginObj = uni.getStorageSync('loginObj')
|
this.loginObj = uni.getStorageSync('loginObj')
|
||||||
this.getInfo()
|
this.portObj = uni.getStorageSync('portObj')
|
||||||
|
this.getShip()
|
||||||
|
this.initData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getInfo() {
|
// 切换贸易类型
|
||||||
// 一级页面 /shp/iEDeliverySlipController/page GET
|
tradeSelect(e) {
|
||||||
// 二级页面 /shp/iEDeliverySlipController/planPage?vvyId=2455a195e549db737fa4431f91995e46&importExportFlag=E 航次 进出口标识 GET
|
this.tradeName = e.name
|
||||||
// 二级页面质损 /shp/iEDeliverySlipController/iEDeliverySlipPlanDamage splId 进出口标识 POST
|
this.shipId = ""
|
||||||
// 提交签名 /vesselVoyages/vvyId 根据ID更新 可修改总指令装船要求 PUT
|
this.shipName = ""
|
||||||
let obj = {
|
this.vvyId = ""
|
||||||
splId: "b3a2141b0ec99635f7bd69d1bd3b4a8a",
|
this.vvyShip = ""
|
||||||
importExportFlag: "E"
|
this.getShip()
|
||||||
|
},
|
||||||
|
// 切换进出口
|
||||||
|
importExportSelect(e) {
|
||||||
|
this.importExport = e.name
|
||||||
|
this.shipId = ""
|
||||||
|
this.shipName = ""
|
||||||
|
this.vvyId = ""
|
||||||
|
this.vvyShip = ""
|
||||||
|
this.getShip()
|
||||||
|
},
|
||||||
|
// 选择船
|
||||||
|
shipSelect(e) {
|
||||||
|
this.shipId = e.spmId
|
||||||
|
this.shipName = e.vslCnname
|
||||||
|
this.vvyId = e.vvyId
|
||||||
|
this.vvyShip = e.vvyShip
|
||||||
|
},
|
||||||
|
// 获取船舶
|
||||||
|
getShip() {
|
||||||
|
if (this.tradeName == '外贸') {
|
||||||
|
this.tradeType = "W"
|
||||||
|
} else {
|
||||||
|
this.tradeType = "N"
|
||||||
}
|
}
|
||||||
|
let ieType = ""
|
||||||
|
if (this.importExport == '出口') {
|
||||||
|
ieType = "E"
|
||||||
|
} else {
|
||||||
|
ieType = "I"
|
||||||
|
}
|
||||||
|
let key = ""
|
||||||
|
let spmId = ""
|
||||||
uni.request({
|
uni.request({
|
||||||
url: `${this.$local}/shp/iEDeliverySlipController/iEDeliverySlipPlanDamage`,
|
url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`,
|
||||||
data: obj,
|
|
||||||
header: {
|
header: {
|
||||||
'Content-Type': 'application/json', //自定义请求头信息
|
'Content-Type': 'application/json', //自定义请求头信息
|
||||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||||
},
|
},
|
||||||
method: 'POST', //请求方式，必须为大写
|
method: 'GET', //请求方式，必须为大写
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
console.log(res)
|
if (res.data.status == "200") {
|
||||||
|
this.shipList = res.data.data
|
||||||
|
this.shipList.forEach(v => {
|
||||||
|
let vvyShip = `${v.vslCnname}/${v.vvyName}`
|
||||||
|
this.$set(v, "vvyShip", vvyShip)
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
|
// 点击搜索
|
||||||
|
onSearch() {
|
||||||
|
this.initData()
|
||||||
|
},
|
||||||
|
// 获取船只
|
||||||
|
initData() {
|
||||||
|
// 一级页面 /shp/iEDeliverySlipController/page GET
|
||||||
|
// 二级页面 /shp/iEDeliverySlipController/planPage?vvyId=2455a195e549db737fa4431f91995e46&importExportFlag=E 航次 进出口标识 GET
|
||||||
|
// 二级页面质损 /shp/iEDeliverySlipController/iEDeliverySlipPlanDamage splId 进出口标识 POST
|
||||||
|
// 提交签名 /vesselVoyages/vvyId 根据ID更新 可修改总指令装船要求 PUT
|
||||||
|
let importExportFlag = ""
|
||||||
|
if (this.importExport == '出口') {
|
||||||
|
importExportFlag = "E"
|
||||||
|
} else {
|
||||||
|
importExportFlag = "I"
|
||||||
|
}
|
||||||
|
let tradType = ""
|
||||||
|
if (this.tradeName == '外贸') {
|
||||||
|
tradType = "W"
|
||||||
|
} else {
|
||||||
|
tradType = "N"
|
||||||
|
}
|
||||||
|
uni.request({
|
||||||
|
url: `${this.$local}/shp/iEDeliverySlipController/page?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&size=${this.pageSize}¤t=${this.current}&importExportFlag=${importExportFlag}&tradType=${tradType}`,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json', //自定义请求头信息
|
||||||
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||||
|
},
|
||||||
|
method: 'GET', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
this.total = res.data.data.total
|
||||||
|
this.itemList = res.data.data.records
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 点击分页
|
||||||
|
changePage(e) {
|
||||||
|
this.current = e.current;
|
||||||
|
this.initData()
|
||||||
|
},
|
||||||
|
// 点击进入详情
|
||||||
|
toDetails(item) {
|
||||||
|
let obj = {
|
||||||
|
vvyId: item.vvyId,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/receipt/details?params=' + params
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="less" scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: calc(100vh - 68px - 40px);
|
||||||
|
|
||||||
|
.form {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.end {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 200px;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
padding-left: 10px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
margin-left: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #0067CF;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemList {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 15px;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
/deep/.o-empty {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 32.2%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.titleft {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #23262E;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
.nitem {
|
||||||
|
width: 46%;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
.nStarted {
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.complete {
|
||||||
|
color: #0067CF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:nth-child(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageBox {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,284 @@
|
||||||
|
<template>
|
||||||
|
<view class="sign">
|
||||||
|
<head-view title="签名"></head-view>
|
||||||
|
<view class="containe contentFixedr">
|
||||||
|
<view class="sign-box">
|
||||||
|
<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
|
||||||
|
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
|
||||||
|
<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}"
|
||||||
|
class="canvsborder"></canvas>
|
||||||
|
</view>
|
||||||
|
<view class="sigh-btns">
|
||||||
|
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
||||||
|
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
||||||
|
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
pathToBase64,
|
||||||
|
base64ToPath
|
||||||
|
} from '../../js_sdk/mmmm-image-tools/index.js'
|
||||||
|
import {
|
||||||
|
compressImgBySize
|
||||||
|
} from '@/common/compressImg'
|
||||||
|
import utils from '@/common/util.js';
|
||||||
|
var x = 20;
|
||||||
|
var y = 20;
|
||||||
|
var tempPoint = []; //用来存放当前画纸上的轨迹点
|
||||||
|
var id = 0;
|
||||||
|
var type = '';
|
||||||
|
let that;
|
||||||
|
let canvasw;
|
||||||
|
let canvash;
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ctx: '', //绘图图像
|
||||||
|
points: [], //路径点集合,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
loginObj: {},
|
||||||
|
signImg: "",
|
||||||
|
shipInfo: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(option) {
|
||||||
|
that = this;
|
||||||
|
// id = option.id;
|
||||||
|
// type = option.type;
|
||||||
|
this.shipInfo = JSON.parse(decodeURIComponent(option.params))
|
||||||
|
console.log(this.shipInfo)
|
||||||
|
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
|
||||||
|
//设置画笔样式
|
||||||
|
this.ctx.lineWidth = 4;
|
||||||
|
this.ctx.lineCap = 'round';
|
||||||
|
this.ctx.lineJoin = 'round';
|
||||||
|
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: function(res) {
|
||||||
|
console.log(res);
|
||||||
|
that.width = res.windowWidth * 0.8;
|
||||||
|
that.height = res.windowHeight * 0.85;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.loginObj = uni.getStorageSync('loginObj')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//触摸开始，获取到起点
|
||||||
|
touchstart: function(e) {
|
||||||
|
let startX = e.changedTouches[0].x;
|
||||||
|
let startY = e.changedTouches[0].y;
|
||||||
|
let startPoint = {
|
||||||
|
X: startX,
|
||||||
|
Y: startY
|
||||||
|
};
|
||||||
|
|
||||||
|
/* **************************************************
|
||||||
|
#由于uni对canvas的实现有所不同，这里需要把起点存起来
|
||||||
|
* **************************************************/
|
||||||
|
this.points.push(startPoint);
|
||||||
|
|
||||||
|
//每次触摸开始，开启新的路径
|
||||||
|
this.ctx.beginPath();
|
||||||
|
},
|
||||||
|
|
||||||
|
//触摸移动，获取到路径点
|
||||||
|
touchmove: function(e) {
|
||||||
|
let moveX = e.changedTouches[0].x;
|
||||||
|
let moveY = e.changedTouches[0].y;
|
||||||
|
let movePoint = {
|
||||||
|
X: moveX,
|
||||||
|
Y: moveY
|
||||||
|
};
|
||||||
|
this.points.push(movePoint); //存点
|
||||||
|
let len = this.points.length;
|
||||||
|
if (len >= 2) {
|
||||||
|
this.draw(); //绘制路径
|
||||||
|
}
|
||||||
|
tempPoint.push(movePoint);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
|
||||||
|
touchend: function() {
|
||||||
|
this.points = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
/* ***********************************************
|
||||||
|
# 绘制笔迹
|
||||||
|
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
|
||||||
|
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
|
||||||
|
# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
|
||||||
|
************************************************ */
|
||||||
|
draw: function() {
|
||||||
|
let point1 = this.points[0];
|
||||||
|
let point2 = this.points[1];
|
||||||
|
this.points.shift();
|
||||||
|
this.ctx.moveTo(point1.X, point1.Y);
|
||||||
|
this.ctx.lineTo(point2.X, point2.Y);
|
||||||
|
this.ctx.stroke();
|
||||||
|
this.ctx.draw(true);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleCancel() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//清空画布
|
||||||
|
handleReset: function() {
|
||||||
|
that.ctx.clearRect(0, 0, that.width, that.height);
|
||||||
|
that.ctx.draw(true);
|
||||||
|
tempPoint = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||||
|
handleConfirm: function() {
|
||||||
|
let that = this
|
||||||
|
if (tempPoint.length == 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先签名',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
let that = this
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: 'mycanvas',
|
||||||
|
success: function(e) {
|
||||||
|
let timestamp = new Date().getTime();
|
||||||
|
let sunumber = Math.floor(Math.random() * 999);
|
||||||
|
var file = that.base64ToFile(e.tempFilePath, timestamp + sunumber)
|
||||||
|
uni.uploadFile({
|
||||||
|
url: `${that.$local}/api/file/upload`, //上传图片api
|
||||||
|
header: {
|
||||||
|
'Authorization': `Bearer ${that.loginObj.access_token}`
|
||||||
|
},
|
||||||
|
file: file,
|
||||||
|
fileType: 'image',
|
||||||
|
name: 'file',
|
||||||
|
success: (res) => {
|
||||||
|
that.signImg = JSON.parse(res.data).data.filePath
|
||||||
|
let reqDTO = {}
|
||||||
|
if (that.shipInfo.type == '0') {
|
||||||
|
reqDTO = {
|
||||||
|
yardSignFg: 1,
|
||||||
|
yardSignUrl: that.signImg,
|
||||||
|
vvyId: that.shipInfo.vvyId,
|
||||||
|
}
|
||||||
|
} else if (that.shipInfo.type == '1') {
|
||||||
|
reqDTO = {
|
||||||
|
tallySignFg: 1,
|
||||||
|
tallySignUrl: that.signImg,
|
||||||
|
vvyId: that.shipInfo.vvyId,
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
reqDTO = {
|
||||||
|
shipSignFg: 1,
|
||||||
|
shipSignUrl: that.signImg,
|
||||||
|
vvyId: that.shipInfo.vvyId,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(reqDTO)
|
||||||
|
uni.request({
|
||||||
|
url: `${that.$local}/shp/vesselVoyages/writeNameUrl`,
|
||||||
|
data: reqDTO,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json', //自定义请求头信息
|
||||||
|
'Authorization': `Bearer ${that.loginObj.access_token}`
|
||||||
|
},
|
||||||
|
method: 'POST', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
let obj = {
|
||||||
|
vvyId: that.shipInfo.vvyId,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON
|
||||||
|
.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/receipt/details?params=' +
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
base64ToFile(base64, name) {
|
||||||
|
if (typeof base64 != 'string') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var arr = base64.split(',')
|
||||||
|
var type = arr[0].match(/:(.*?);/)[1]
|
||||||
|
var fileExt = type.split('/')[1]
|
||||||
|
var bstr = atob(arr[1])
|
||||||
|
var n = bstr.length
|
||||||
|
var u8arr = new Uint8Array(n)
|
||||||
|
while (n--) {
|
||||||
|
u8arr[n] = bstr.charCodeAt(n)
|
||||||
|
}
|
||||||
|
return new File([u8arr], `${name}.` + fileExt, {
|
||||||
|
type: type
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
height: calc(100vh - 68px);
|
||||||
|
padding-bottom: 30px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-box {
|
||||||
|
height: 90%;
|
||||||
|
margin-left: 10%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-view {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sigh-btns {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 10px 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.van-button {
|
||||||
|
width: 100px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mycanvas {
|
||||||
|
margin: auto 0rpx;
|
||||||
|
background-color: #ececec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvsborder {
|
||||||
|
border: 1rpx solid #333;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 10000rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue