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 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>Emergency Notice</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>
									<p>{{shipInfo.vslCnname}}</p>
								</view>
								<view class="li">
									<p>航次/voy No:</p>
									<p>{{tableInfo.vvyName}}</p>
								</view>
								<view class="li">
									<p>日期/Date:</p>
									<p>{{tableInfo.operationDate}}</p>
								</view>
							</view>
							<view class="textContent">
								<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>
								<p class="text"> 本月初，有一艘EUKOR船公司的滚装船在几秒钟之内就被突风(风速>40米/秒)吹离泊位超过10米远。
									而雷电风暴气象警告仅仅在事发前5分钟才发布预警，导致几乎没有时间去做防范工作。
									幸运的是突风持续时间很短，所以没有造成任何破坏性后果。在过去5年的夏天，由于同样的原因，也发生过类似的事故。
									所以为了避免再次发生类似的事故，请您遵守以下规定，否则您将对其产生的一切后果负责。 </p>
								<p class="text"> 1.Take breast lines when berthing. </p>
								<p class="text"> 1. 靠泊时请在船头和船尾各加带横缆</p>
								<p class="text"> 2.Tighten all the lines and keep duty man patrolling all the
									time.
								</p>
								<p class="text"> 2. 在泊期间请时刻保持缆绳处于收紧状态并安排专人进行巡检 </p>
								<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>
								<p class="text"> 3. 在发生紧急情况和接到码头通知后，请立即备车并启动侧推 </p>
								<p class="text"> 4. Prepare one more line fore and after on board for rescue.
								</p>
								<p class="text"> 4. 为了应对紧急情况，请你在船头和船尾各准备一根缆绳备用</p>
								<p class="text"> 5.Cooperate with terminal when needed for safety.</p>
								<p class="text"> 5. 为了您的船舶安全，请您配合码头采取的进一步防范措施。</p>
							</view>
						</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>
							</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>
							</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";

	.contentFixed {
		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 !important;
	}

	.container {
		padding: 0px 16px;
		background: #FFFFFF;
		border-radius: 8px;
		font-size: 16px;

		.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;
			flex-wrap: wrap;
			padding: 15px 0;

			.li {
				min-width: 33%;
				display: flex;
				justify-content: center;

				p {
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				p:last-child {
					color: #23262E;
					font-weight: bold;
					font-size: 14px;
					margin-left: 8px;
					margin-top: 2px;
				}
			}
		}

		.textContent {
			padding: 24px 0;
			border-top: 1px solid #EEEEEE;
			border-bottom: 1px solid #EEEEEE;
			font-size: 16px;
			color: #23262E;
			line-height: 24px;
			margin-top: 10px;

			.text {
				margin-bottom: 10px;
			}
		}
	}

	.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>