pad-app/pages/shipWork/shipPlan.vue

<template>
	<view class="shipPlan">
		<head-view :title="title" url="/pages/shipWork/documentList"></head-view>
		<view class="container contentFixed">
			<view class="liBox">
				<p class="title">基本信息</p>
				<view class="ul">
					<view class="li wLi">
						<p>船名：</p>
						<text v-if="shipInfo.spmName != 'null'">{{shipInfo.spmName}}</text>
						<text v-else>-</text>
					</view>
					<view class="liContent" v-for="(item,index) in vvyList" :key="index">
						<view class="li">
							<p>{{item.importExportFlagName}}航次：</p>
							<text v-if="item.vvyName != 'null'">{{item.vvyName}}</text>
							<text v-else>-</text>
						</view>
						<view class="li">
							<p>贸易类型：</p>
							<text v-if="item.tradeTypeName != 'null'">{{item.tradeTypeName}}</text>
							<text v-else>-</text>
						</view>
						<view class="li">
							<p>航线：</p>
							<text v-if="item.lcoName != 'null'">{{item.lcoName}}</text>
							<text v-else>-</text>
						</view>
						<view class="li">
							<p>船公司：</p>
							<text v-if="item.shipComName != 'null'">{{item.shipComName}}</text>
							<text v-else>-</text>
						</view>
						<view class="li">
							<p>船代：</p>
							<text v-if="item.shipAgentName != 'null'">{{item.shipAgentName}}</text>
							<text v-else>-</text>
						</view>
					</view>
				</view>
			</view>
			<view class="liBox">
				<p class="title">船期信息</p>
				<view class="ul">
					<view class="li">
						<p>计划到港时间：</p>
						<text v-if="shipInfo.planArrivePortTime != 'null'">{{shipInfo.planArrivePortTime}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>计划离港时间：</p>
						<text v-if="shipInfo.planDeparturePortTime != 'null'">{{shipInfo.planDeparturePortTime}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>计划靠泊时间：</p>
						<text v-if="shipInfo.planBerthingTime != 'null'">{{shipInfo.planBerthingTime}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>计划离泊时间：</p>
						<text v-if="shipInfo.planAnchoringTime != 'null'">{{shipInfo.planAnchoringTime}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>确报时间：</p>
						<text v-if="shipInfo.confirmTime != 'null'">{{shipInfo.confirmTime}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>船期状态：</p>
						<text v-if="shipInfo.shipmentStatus != 'null'">{{shipInfo.shipmentStatus}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>靠泊状态：</p>
						<text v-if="shipInfo.berthStatus != 'null'">{{shipInfo.berthStatus}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>计划泊位：</p>
						<text v-if="shipInfo.planBerthageName != 'null'">{{shipInfo.planBerthageName}}</text>
						<text v-else>-</text>
					</view>
				</view>
			</view>
			<view class="liBox">
				<p class="title">计划信息</p>
				<view class="ul" v-for="(item,index) in vvyList" :key="index">
					<view class="li">
						<p>{{item.importExportFlagName}}航次：</p>
						<text v-if="item.vvyName != 'null'">{{item.vvyName}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>计划开工时间：</p>
						<text v-if="item.planStartTime != 'null'">{{item.planStartTime}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>计划完工时间：</p>
						<text v-if="item.planFinishTime != 'null'">{{item.planFinishTime}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>品牌：</p>
						<text v-if="item.vgdGoodName != 'null'">{{item.vgdGoodName}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>计划数量：</p>
						<text v-if="item.planAmount != 'null'">{{item.planAmount}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>工班人数：</p>
						<text v-if="item.planNum != 'null'">{{item.planNum}}</text>
						<text v-else>-</text>
					</view>
					<view class="li">
						<p>计划组数：</p>
						<text v-if="item.teamNum != 'null'">{{item.teamNum}}</text>
						<text v-else>-</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		data() {
			return {
				title: "船名 - 船舶计划",
				shipInfo: {},
				vvyList: [],
				vtpId: "",
			}
		},
		mounted() {
			let title = uni.getStorageSync('shipWorkTitle')
			this.title = `${title} / 船舶计划 `
			this.vtpId = uni.getStorageSync('vtpId')
			this.executeSql1('voyageScheduleDataPadRespDTO')
			this.executeSql1('voyageScheduleDataDetailRespDTOList')
		},
		methods: {
			// 查
			executeSql1(tableName) {
				let sql = `select * from ${tableName}  WHERE vtpId = '${this.vtpId}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					if (tableName == 'voyageScheduleDataPadRespDTO') {
						this.shipInfo = value[0]
					} else {
						this.vvyList = value
					}
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.shipPlan {
		.container {
			padding: 16px;

			.liBox {
				width: 100%;
				padding: 24px 16px;
				background-color: #fff;
				margin-bottom: 16px;

				.title {
					display: flex;
					margin-bottom: 20px;
					font-size: 18px;
					font-weight: bold;
				}

				.ul {
					display: flex;
					flex-wrap: wrap;

					.liContent {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
					}

					.li {
						min-width: 32%;
						margin-bottom: 12px;
						display: flex;
						font-size: 14px;
						height: 20px;
						line-height: 20px;
						font-size: 16px;

						p {
							color: #999;
						}

						text {
							color: #23262E;
						}
					}

					.wLi {
						width: 100%;
					}
				}
			}
		}
	}
</style>