pad-app/pages/shipWork/mixSign.vue

891 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="mixSign">
<head-view :title="title" url="/pages/shipWork/mixWork"></head-view>
<view class="contentFixedr">
<custom-tabs type="c1" :value="tabsValue" @change="tabsChange">
<custom-tab-pane :label="item.name" v-for="(item,index) in tabsList" :name="'c1_'+index" :key="index">
<view></view>
<view style="padding: 16px; padding-bottom: 0;">
<view class="container">
<view class="head">
<view class="leftHead">
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix">
</view>
<view class="rightHead">
<p>上海海通国际汽车码头有限公司</p>
<text>SHANGHAI HAITONG INTERNATIONAL AUTOMOTIVE TERMINAL CO. LTD.</text>
</view>
</view>
<view class="headTItle">
<view class="titleLeft"></view>
<view class="title">
<p>海通码头装卸和杂项作业单</p>
<text>SHANGHAI HARBOUR BUREAU STEVEDORE WORKING RECORD</text>
</view>
<view class="titleRight">
<view>
<text>编号/N0:</text>
<text>QR-7.5.1-01-05-M</text>
</view>
</view>
</view>
<view class="ul">
<view class="li">
<p>Name of ship:</p><text>{{shipInfo.vslCnname}}</text>
</view>
<view class="li">
<p>Voy No:</p><text>{{vvyName}}</text>
</view>
<view class="li">
<p>Date:</p><text>{{dateId}}</text>
</view>
<view class="li">
<p>Weather:</p><text>{{tqInfo}}</text>
</view>
<view class="li">
<p>Gangs:</p><text>{{zyzsInfo}}</text>
</view>
<view class="li">
<p>Foreman:</p><text>{{dcrsInfo}}</text>
</view>
<view class="li">
<p>Berthed at Haitong:</p><text>{{bwInfo}}</text>
</view>
</view>
<table class="t-zx headZx">
<tbody>
<tr>
<td rowspan="2" style="width: 50px;"></td>
<td colspan="6">Working time</td>
<td colspan="4">Kind Of Works</td>
<td rowspan="2">B/L</td>
<td colspan="3">Handling method</td>
</tr>
<tr>
<td colspan="3" style="width: 120px;">From</td>
<td colspan="3" style="width: 120px;">To</td>
<td colspan="4">Loading/UnLoading</td>
<td>Ro/Ro</td>
<td>PortDevices</td>
<td>Others</td>
</tr>
</tbody>
</table>
<view v-for="(item2,index2) in shiftInfo" :key="index2 + 'shift'" class="rowBox">
<view class="name">{{item2.pwcTypeName}}</view>
<view class="time">{{item2.workStartTime}}</view>
<view class="time">{{item2.workEndTime}}</view>
<view class="infoBox">
<view class="iBox" v-for="(item3,index3) in item2.infoArr">
<view colspan="4" class="carCss">
车型:{{item3.carTypeName}},数量:{{item3.goodsNumber}}
</view>
<view class="remark">{{item3.remark}}</view>
<view class="ro gx"><text v-if="item3.loadingType == 'RO'">√</text></view>
<view class="pr gx"><text v-if="item3.loadingType == 'PR'">√</text></view>
<view class="ot gx"><text v-if="item3.loadingType == 'OT'">√</text></view>
</view>
</view>
</view>
<table class="t-zx">
<tbody>
<tr>
<td :rowspan="fcList.length + 2">翻仓信息</td>
<td colspan="2" rowspan="2">Kind of Rehangdling</td>
<td colspan="2">DK/H</td>
<td colspan="6">Working time</td>
<td colspan="4">Weight/Measure</td>
</tr>
<tr>
<td>From</td>
<td>To</td>
<td colspan="3">From</td>
<td colspan="3">To</td>
<td colspan="2">Vehicle type/Quantity</td>
<td colspan="2">Total W/M</td>
</tr>
<tr v-for="(item,index) in fcArr" :key="index + 'fc'">
<td colspan="2">{{item.retallyTypeName}}</td>
<td>{{item.retallyOrigin}}</td>
<td>{{item.retallyTerminus}}</td>
<td colspan="3">{{item.retallyStartTime}}</td>
<td colspan="3">{{item.retallyEndTime}}</td>
<td colspan="2">车型:{{item.carTypeName}},数量:{{item.goodsNumber}}</td>
<td colspan="2">重量:{{item.goodsWeight}},体积:{{item.goodsVolume}}</td>
</tr>
</tbody>
</table>
<table class="t-zx" v-for="(v,indexv) in qtArr" :key="indexv">
<tbody>
<tr>
<td>&nbsp;</td>
<!-- <td colspan="2">Reason</td> -->
<td colspan="3">技术工人</td>
<td>From</td>
<td>To</td>
<td>Weight/Measure</td>
<td colspan="3">普通工人</td>
<td>From</td>
<td>To</td>
<td>Weight/Measure</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="3">{{v.tecNum}}</td>
<td>{{v.startTm}}</td>
<td>{{v.endTm}}</td>
<td>重量:{{v.weight}},体积:{{v.volume}}</td>
<td colspan="3">{{v.genNum}}</td>
<td>{{v.startTmPt}}</td>
<td>{{v.endTmPt}}</td>
<td>重量:{{v.weightPt}},体积:{{v.volumePt}}</td>
</tr>
<tr>
<td>Extra Labour辅助作业</td>
<td colspan="15">{{v.auxRemark}}</td>
</tr>
<tr>
<td>Stand by待工</td>
<td colspan="15">{{v.waitRemark}}</td>
</tr>
<tr>
<td>Remark备注</td>
<td colspan="15">{{v.workRemark}}</td>
</tr>
</tbody>
</table>
</view>
</view>
<view class="signBox">
<view class="signContent">
<view class="signTitle">
<p>指导员:</p>
<p>Foreman:</p>
</view>
<view class="signInfo" v-if="zdySign.url == ''" @click="togoSign('0')">
去签名
</view>
<view class="signImg" v-else>
<image :src="zdySign.url"></image>
<!-- <text class="del" @click="delSign(zdySign.id)">删除</text> -->
</view>
</view>
<view class="row"></view>
<view class="signContent">
<view class="signTitle">
<p>船长/大副:</p>
<p>Capt/Chief Mate:</p>
</view>
<view class="signInfo" v-if="czSign.url == ''" @click="togoSign('1')">
去签名
</view>
<view class="signImg" v-else>
<image :src="czSign.url"></image>
<!-- <text class="del" @click="delSign(czSign.id)">删除</text> -->
</view>
</view>
</view>
</custom-tab-pane>
</custom-tabs>
</view>
<uni-popup ref="delPopup" type="dialog">
<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
@confirm="delConfirm"></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
import sqlite from "../../common/sqlite.js"
import api from "../../common/api.js"
export default {
data() {
return {
title: "杂项单证签名",
tabsValue: 0,
tabsList: [],
vvyId: "",
vvyName: "",
webId: "",
aIdList: [],
aId: "",
vtpId: "",
// 时间段数组
timeArr: [],
// 一天开始时间
startTime: "",
// 一天结束时间
endTime: "",
// 人员信息
peopleInfo: {},
peopleList: [],
peopleArr: [],
tqInfo: "",
bwArr: [],
bwInfo: "",
zyzsInfo: 0,
dcrsInfo: 0,
// 单证数量
tabsArr: [],
gbArr: [],
// 船舶信息
shipInfo: {},
shiftInfo: [],
// 工班信息
shiftList: [],
// 翻仓信息
fcList: [],
fcArr: [],
// 其他信息
qtList: [],
qtArr: [],
// 签名信息
zdySign: {
url: "",
id: ""
},
dateId: "",
czSign: {
url: "",
id: ""
},
delId: "",
}
},
onLoad(option) {
if ('params' in option) {
this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
}
},
mounted() {
this.vtpId = uni.getStorageSync('vtpId')
let that = this
that.executeSql2()
that.executeSql('shipInfoTable')
that.aaa()
setTimeout(function() {
that.fcList.forEach(v => {
let endT = v.retallyEndTime.slice(0, 10)
if (endT == that.dateId) {
that.fcArr.push(v)
}
})
that.qtList.forEach(v => {
let endT = ""
if (v.endTm != "") {
endT = v.endTm.slice(0, 10)
} else if (v.endTmPt != "") {
endT = v.endTmPt.slice(0, 10)
}
if (endT == that.dateId) {
that.qtArr.push(v)
}
})
if (that.qtArr.length == 0) {
that.qtArr.push({})
}
that.shiftInfo.forEach(v => {
let arr = api.arrFrom(v.infoArr, "webId")
that.$set(v, "infoArr", arr)
})
that.peopleList.forEach(v => {
let endT = v.jobEndTime.slice(0, 10)
if (endT == that.dateId) {
that.peopleArr.push(v)
}
})
that.tqInfo = that.peopleArr[0].weatherType
that.peopleArr.forEach(v => {
that.zyzsInfo += Number(v.workSuite)
that.dcrsInfo += Number(v.shipPerson)
that.bwArr.push(v.bthIdName)
})
that.bwInfo = that.bwArr.join(",")
}, 300)
},
methods: {
// 查船舶信息/人员信息
executeSql(tableName) {
let sql = `select * from ${tableName} WHERE vtpId = '${this.vtpId}'`
sqlite.executeSqlCeshi(sql).then((value) => {
// 在resolve时执行的回调函数
if (tableName == 'shipInfoTable') {
this.shipInfo = value[0]
} else {
this.peopleInfo = value[0]
}
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 查工班信息
executeSql2(type) {
let sql = `SELECT
strftime('%Y-%m-%d %H:00:00', datetime(workEndTime, '0 day', 'start of day', '+22 hours')) || ',' || strftime('%Y-%m-%d %H:00:00', datetime(workEndTime, '1 day', 'start of day', '+22 hours')) AS work_shift
FROM workMessageRespList WHERE workMessageRespList.vtpId='${this.vtpId}'
GROUP BY work_shift
UNION SELECT strftime('%Y-%m-%d %H:00:00', datetime(workEndTime, '-1 day', 'start of day', '+22 hours')) || ',' || strftime('%Y-%m-%d %H:00:00', datetime(workEndTime, '0 day', 'start of day', '+22 hours')) AS work_shift
FROM workMessageRespList WHERE workMessageRespList.vtpId='${this.vtpId}'
GROUP BY work_shift;`
sqlite.executeSqlCeshi(sql).then((value) => {
this.timeArr = value
value.forEach((v, index) => {
this.startTime = v.work_shift.split(",")[0]
this.endTime = v.work_shift.split(",")[1]
let sql2 =
`Select COUNT(*),pwcTypeName,vvyId,vvyName,MIN(workStartTime) AS workStartTime, MAX(workEndTime)
AS workEndTime FROM (SELECT * FROM workMessageRespList WHERE workStartTime>='${this.startTime}' and
workEndTime<'${this.endTime}' and workMessageRespList.vtpId='${this.vtpId}')
GROUP BY pwcTypeName ORDER BY workStartTime asc;`
this.executeSql22(sql2, index)
let sql3 = `SELECT * FROM retallyMessageRespList WHERE retallyMessageRespList.retallyStartTime>='${this.startTime}' and
retallyMessageRespList.retallyEndTime<'${this.endTime}' and vtpId = '${this.vtpId}'`
this.executeSql3(sql3)
let sql4 = `SELECT * FROM infoRespList WHERE infoRespList.startTm>='${this.startTime}' and
infoRespList.endTm<'${this.endTime}' and vtpId = '${this.vtpId}'`
this.executeSql4(sql4)
let sql5 = `SELECT * FROM messageRespList WHERE messageRespList.jobStartTime>='${this.startTime}' and
messageRespList.jobEndTime<'${this.endTime}' and vtpId = '${this.vtpId}'`
this.executeSql6(sql5)
})
let that = this
setTimeout(function() {
if (type != 0) {
that.tabsArr.forEach((v, index) => {
let _index = index + 1
that.$set(v, "name", `杂项单证${_index}`)
})
}
that.tabsList = that.tabsArr
that.shiftInfo = that.tabsList[that.tabsValue].shiftArr
that.shiftList = that.tabsList[that.tabsValue].shiftArr
that.vvyId = that.tabsList[0].shiftArr[0].vvyId
that.vvyName = that.tabsList[0].shiftArr[0].vvyName
let dateId = that.tabsList[that.tabsValue].shiftArr[0].workEndTime
that.dateId = dateId.slice(0, 10)
that.executeSql5()
that.shiftList.forEach(v => {
that.executeSql222(v.workStartTime, v.workEndTime, v.pwcTypeName)
})
setTimeout(function() {
that.shiftList = that.shiftList
}, 100)
}, 100)
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
executeSql22(sql, index) {
sqlite.executeSqlCeshi(sql).then((value) => {
if (value.length > 0) {
this.tabsArr.push({
shiftArr: value
})
}
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
executeSql222(sTime, eTime, pwcTypeName) {
let sql = `SELECT * FROM workMessageRespList
WHERE workStartTime>='${sTime}'
and workEndTime<='${eTime}'
and workMessageRespList.vtpId='${this.vtpId}'
and workMessageRespList.pwcTypeName='${pwcTypeName}';`
sqlite.executeSqlCeshi(sql).then((value) => {
this.gbArr.push(...value)
this.shiftInfo.forEach((i, index) => {
this.$set(i, "infoArr", [])
this.gbArr.forEach((v, index2) => {
if (i.pwcTypeName == v.pwcTypeName) {
this.aaa(v.webId, index)
}
})
})
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
aaa(id, index) {
let sql =
`SELECT * FROM workMessageRespInfoList WHERE workMessageRespInfoList.contactId = '${id}'`
sqlite.executeSqlCeshi(sql).then((value) => {
// this.$set(this.gbArr[index], "infoArr", value)
this.shiftInfo[index].infoArr.push(...value)
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 查翻仓信息
executeSql3(sql) {
sqlite.executeSqlCeshi(sql).then((value) => {
if (value.length > 0) {
this.fcList.push(...value)
}
this.fcList = api.arrFrom(this.fcList, "webId")
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 查其他信息
executeSql4(sql) {
sqlite.executeSqlCeshi(sql).then((value) => {
// 在resolve时执行的回调函数
if (value.length > 0) {
this.qtList.push(...value)
}
this.qtList = api.arrFrom(this.qtList, "webId")
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 查人员信息
executeSql6(sql) {
sqlite.executeSqlCeshi(sql).then((value) => {
// 在resolve时执行的回调函数
if (value.length > 0) {
this.peopleList.push(...value)
}
this.peopleList = api.arrFrom(this.peopleList, "pmeId")
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 查单证签字表
executeSql5() {
let sql = `select * from workSignTable WHERE bizId = '${this.dateId}';`
sqlite.executeSqlCeshi(sql).then((value) => {
// 在resolve时执行的回调函数
let zdyList = []
let czList = []
if (value.length > 0) {
value.forEach(v => {
if (v.sort == 0) {
this.zdySign = {
url: v.signFile,
id: v.webId
}
zdyList.push(v)
} else {
this.czSign = {
url: v.signFile,
id: v.webId
}
czList.push(v)
}
})
}
if (zdyList.length == 0) {
this.zdySign = {
url: "",
id: ""
}
}
if (czList.length == 0) {
this.czSign = {
url: "",
id: ""
}
}
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 删除当前签名
delSign(id) {
this.$refs.delPopup.open()
this.delId = id
},
// 弹框删除
delConfirm() {
let sql = `DELETE FROM workSignTable WHERE webId = '${this.delId}';`
sqlite.executeSqlCeshi(sql).then((value) => {
// 在resolve时执行的回调函数
this.executeSql5()
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 点击标签
tabsChange(e) {
this.tabsValue = e.value
this.shiftList = this.tabsList[e.value].shiftArr
this.dateId = this.tabsList[e.value].shiftArr[0].workEndTime.slice(0, 10)
this.vvyName = this.tabsList[e.value].shiftArr[0].vvyName
this.gbArr = []
this.tabsArr = []
this.tabsList = []
this.shiftList = []
this.shiftInf = []
this.fcArr = []
this.qtArr = []
this.peopleArr = []
this.tqInfo = ""
this.zyzsInfo = 0
this.dcrsInfo = 0
this.bwArr = []
this.bwInfo = ""
this.executeSql2(0)
this.executeSql5()
this.shiftInfo.forEach(v => {
let arr = api.arrFrom(v.infoArr, "webId")
this.$set(v, "infoArr", arr)
})
this.fcList.forEach(v => {
let endT = v.retallyEndTime.slice(0, 10)
if (endT == this.dateId) {
this.fcArr.push(v)
}
})
this.qtList.forEach(v => {
let endT = ""
if (v.endTm != "") {
endT = v.endTm.slice(0, 10)
} else if (v.endTmPt != "") {
endT = v.endTmPt.slice(0, 10)
}
if (endT == this.dateId) {
this.qtArr.push(v)
}
})
if (this.qtArr.length == 0) {
this.qtArr.push({})
}
this.peopleList.forEach(v => {
let endT = v.jobEndTime.slice(0, 10)
if (endT == this.dateId) {
this.peopleArr.push(v)
}
})
this.tqInfo = this.peopleArr[0].weatherType
this.peopleArr.forEach(v => {
this.zyzsInfo += Number(v.workSuite)
this.dcrsInfo += Number(v.shipPerson)
this.bwArr.push(v.bthIdName)
})
this.bwInfo = this.bwArr.join(",")
},
// 点击签名
togoSign(signType) {
let obj = {
id: this.dateId,
url: "mixSign",
signType: Number(signType), // 0 指导员 1 船长/大副
signTable: "2",
tabsValue: this.tabsValue,
vvyId: this.vvyId,
}
const params = encodeURIComponent(JSON.stringify(obj));
uni.navigateTo({
url: `/pages/shipWork/sign?params=${params}`
})
},
}
}
</script>
<style lang="less" scoped>
@import "../../style/css/main-dz.css";
.contentFixedr {
margin-top: 68px !important;
/deep/.tab .tab-bar {
height: 66px;
line-height: 66px;
position: relative;
}
/deep/.tab .tab-bar-item {
height: 66px;
line-height: 66px;
font-size: 18px;
color: #23262E;
font-weight: bold;
font-family: PingFangSC-Semibold;
padding: 0 24px !important;
}
/deep/.tab .tab-bar-item.active {
color: #0067CF
}
/deep/.tab .tab-bar-item .active-line {
color: #0067CF;
width: 54px;
height: 4px;
}
/deep/.tab-pane {
width: 100%;
}
/deep/.tab .tab-cont {
padding-bottom: 0;
}
}
.container {
padding: 0px 16px;
background: #FFFFFF;
border-radius: 8px;
.head {
height: 85px;
padding: 16px 0;
margin: 0 8px;
border-bottom: 1px solid #999;
display: flex;
justify-content: space-between;
.rightHead {
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
p {
font-size: 22px;
color: #0052A4;
font-weight: bold;
}
text {
font-size: 14px;
color: #666666;
}
}
}
.headTItle {
display: flex;
justify-content: space-around;
padding: 24px 0;
margin: 0 8px;
border-bottom: 1px solid #EEEEEE;
.title {
flex: 3;
text-align: center;
p {
font-size: 24px;
color: #23262E;
font-weight: bold;
}
text {
font-size: 18px;
color: #23262E;
}
}
.titleLeft {
flex: 1;
}
.titleRight {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
text:first-child {
font-size: 14px;
color: #666666;
}
text:last-child {
font-size: 18px;
color: #0052A4;
font-weight: bold;
}
}
}
.ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 15px 0;
.li {
width: 33%;
display: flex;
justify-content: center;
text {
color: #23262E;
font-weight: bold;
font-size: 14px;
margin-left: 8px;
}
}
}
table {
margin-bottom: 0 !important;
}
}
.headZx {
background: #E9E9E9;
}
.t-zx td {
height: 36px;
}
/deep/.uni-scroll-view-content {
display: flex;
}
.rowBox {
width: calc(100% - 1px);
display: flex;
border: 1px solid #000;
box-sizing: border-box;
.name {
border-right: 1px solid #000;
width: 70px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px;
}
.time {
border-right: 1px solid #000;
width: 203px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.infoBox {
width: calc(100% - 476px);
display: flex;
flex-direction: column;
justify-items: center;
.iBox {
flex: 1;
display: flex;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
.carCss {
border-right: 1px solid #000;
width: 209px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.remark {
border-right: 1px solid #000;
width: 63px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.gx {
border-right: 1px solid #000;
width: 61px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.ro {
width: 87.5px;
}
.pr {
width: 139px;
}
.ot {
width: 90px;
border: none;
}
}
.iBox:first-child {
border-top: none;
}
.iBox:last-child {
border-bottom: none;
}
}
}
.signBox {
width: 100%;
height: 66px;
background: #FFFFFF;
border: 1px solid #E1E5ED;
box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05);
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;
}
}
</style>