pad-app/pages/shipWork/abnormalSign.vue

<template>
	<view class="noticeSign">
		<head-view :title="title" url="/pages/shipWork/abnormal"></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 class="container">
						<table>
							<tbody>
								<tr>
									<td class="h-l1r1">
										<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix">
										</image>
									</td>
									<td class="h-l1r2">&nbsp;</td>
									<td class="h-l1r3">
										<p>上海海通国际汽车码头有限公司</p>
										<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
									</td>
								</tr>
								<tr>
									<td colspan="3">
										<p class="bh-dz">QR-7.5.1-01-11-M</p>
									</td>
								</tr>
								<tr>
									<td colspan="3" class="h-l2r1">
										<p class="name-dz">海通码头异常情况告知书单</p>
										<p class="ename-dz">Emergency Notice</p>
									</td>
								</tr>
							</tbody>
						</table>
						<table id="t-main2">
							<tbody>
								<tr>
									<td class="td1">
										<p>船名：</p>
										<p>Name of Ship&nbsp;&nbsp;</p>
									</td>
									<td class="td2">
										<p>{{shipInfo.vslCnname}}</p>
									</td>
								</tr>
							</tbody>
						</table>
						<table class="t-zx">
							<tbody>
								<tr>
									<td>
										<p class="text">Earlier this month ,one of EUKOR vessels was blown away more
											than 10
											meters
											from berth by
											a suddenly extraordinary wind （speed >40M/S）within few seconds. The thunder
											storm
											warning had been forecasted just 5 minutes ago before the crisis, which left
											us
											few time
											to deal with. Fortunately the wind lasted very short time and no damage
											happened. Also
											in the summer time during the last 5 years some similar dangerous situation
											occurred due
											to the same reason. In order to avoid further accidents please obey the
											following
											requirements or your side will be held responsible for all the consequences
											arising
											there from. </p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 本月初，有一艘EUKOR船公司的滚装船在几秒钟之内就被突风(风速>40米/秒)吹离泊位超过10米远。
											而雷电风暴气象警告仅仅在事发前5分钟才发布预警，导致几乎没有时间去做防范工作。 幸运的是突风持续时间很短，所以没有造成任何破坏性后果。
											在过去5年的夏天，由于同样的原因，也发生过类似的事故。 所以为了避免再次发生类似的事故，请您遵守以下规定，否则您将对其产生的一切后果负责。 </p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 1.Take breast lines when berthing. </p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 1. 靠泊时请在船头和船尾各加带横缆</p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 2.Tighten all the lines and keep duty man patrolling all the
											time.
										</p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 2. 在泊期间请时刻保持缆绳处于收紧状态并安排专人进行巡检 </p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 3.Stand by engine and bow thruster at once when informed by
											terminal or at
											any time in case of emergency. </p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 3. 在发生紧急情况和接到码头通知后，请立即备车并启动侧推 </p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 4. Prepare one more line fore and after on board for rescue.
										</p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 4. 为了应对紧急情况，请你在船头和船尾各准备一根缆绳备用</p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 5.Cooperate with terminal when needed for safety.</p>
									</td>
								</tr>
								<tr>
									<td>
										<p class="text"> 5. 为了您的船舶安全，请您配合码头采取的进一步防范措施。</p>
									</td>
								</tr>
							</tbody>
						</table>
						<view class="sginBox">
							<view class="box">
								<p>通知人员:</p>
								<p class="sign" @click="togoSign('0')" v-if="zdySign.url == ''">点击签名</p>
								<template v-else>
									<image :src="zdySign.url" mode="widthFix"></image>
									<text class="del" @click="delSign(zdySign.id)">删除</text>
								</template>
							</view>
							<view class="box">
								<p> 船方(Capt/Chief Mate):</p>
								<p class="sign" @click="togoSign('1')" v-if="czSign.url == ''">点击签名</p>
								<template v-else>
									<image :src="czSign.url" mode="widthFix"></image>
									<text class="del" @click="delSign(czSign.id)">删除</text>
								</template>
							</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"
	export default {
		data() {
			return {
				title: "异常情况签名",
				tabsValue: 0,
				tabsList: [],
				// 船舶信息
				shipInfo: {},
				// 表内数据
				tableInfo: [],
				// 签名信息
				zdySign: {
					url: "",
					id: ""
				},
				czSign: {
					url: "",
					id: ""
				},
				delId: "",
				vtpId: "",
			}
		},
		onLoad(option) {
			if ('params' in option) {
				this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
			}
		},
		mounted() {
			this.vtpId = uni.getStorageSync('vtpId')
			this.executeSql('shipInfoTable')
		},
		methods: {
			// 查船舶信息
			executeSql(tableName) {
				let sql = `select * from ${tableName} WHERE vtpId = '${this.vtpId}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.shipInfo = value[0]
					this.executeSql1('abnormalConditionRespList', this.tabsValue)
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 查异常情况信息
			executeSql1(tableName, tabsValue) {
				let sql = `select * from ${tableName} WHERE vtpId='${this.vtpId}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.tabsList = []
					this.tableInfo = value[tabsValue]
					value.forEach((v, index) => {
						let obj = {
							name: `异常情况${index + 1}`,
						}
						this.tabsList.push(obj)
						this.executeSql2()
					})
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 查单证签字表
			executeSql2() {
				let sql = `select * from workSignTable WHERE bizId = '${this.tableInfo.vacId}';`
				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);
				});
			},
			// 标签切换
			tabsChange(e) {
				this.tabsValue = e.value
				this.executeSql1('abnormalConditionRespList', e.value)
			},
			// 点击签名
			togoSign(signType) {
				let obj = {
					id: this.tableInfo.vacId,
					url: "abnormalSign",
					signType: Number(signType), // 0 指导员  1 船长/大副
					signTable: "8",
					tabsValue: this.tabsValue,
					vvyId: this.tableInfo.vvyId
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: `/pages/shipWork/sign?params=${params}`
				})
			},
			// 删除当前签名
			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.executeSql2()
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../style/css/main-dz.css";

	.contentFixedr {
		margin-top: 68px !important;
	}

	.container {
		padding: 0px 20px;
	}

	#t-main2 .td1 {
		width: 100px;
		text-align: right;
	}

	#t-main2 .td2 {
		width: 70px;
		text-align: left;
		border-bottom: #000000 solid 1px;

		p {
			margin-left: 20px;
		}
	}

	.text {
		padding: 20px;
	}

	#t-xjl .td1 {
		width: 150px;
		text-align: right;
	}

	#t-xjl .td2 {
		text-align: left;
		border-bottom: #000000 solid 1px;
	}

	.sginBox {
		display: flex;
		margin-bottom: 10px;

		.box {
			flex: 1;
			display: flex;

			image {
				width: 200px;
				height: 50px;
			}

			.del {
				color: red;
			}
		}

		.date {
			margin-left: 10px;
			margin-top: 2px;
		}
	}

	.sign {
		color: #2979ff;
		margin-left: 10px;
	}
</style>