<template>
	<view class="app">
		<head-view :title="title"></head-view>
		<view class="content2 contentFixed">
			<view class="buttonlist">
				<template v-if="tabsValue == 0">
					<button class="button" type="default" @click="ask">装船要求</button>
					<button class="button" type="default" @click="distribute('center','all')">指令下发</button>
				</template>
				<template v-if="tabsValue == 1">
					<!-- <button class="button" type="default" @click="ask">装船要求</button> -->
					<button class="button" type="default" @click="distribute('center','solo')">指令下发</button>
				</template>
				<template v-if="tabsValue == 2 || tabsValue == 3 || tabsValue == 4">
					<button class="button" type="default" @click="ask">装船要求</button>
				</template>
			</view>
			<template v-if="tabsValue == 0 || tabsValue == 1 || tabsValue == 2">
				<view class="refresh" @click="refresh">
					<image src="../../static/images/refreshImg.png" mode=""></image>
					<p>刷新</p>
				</view>
			</template>
			<custom-tabs type="c1" :value="tabsValue" @change="changeTabs">
				<custom-tab-pane :label="zzlName" name="c1_1" v-if="zzlIsShwo">
					<view></view>
					<view class="main">
						<view class="form">
							<view class="inputBox">
								<view class="leftInput">
									<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="mnfBl"
										placeholder="提单号" @iconClick="search" @input="inputChange"></uni-easyinput>
								</view>
								<view class="rightInput" @click="screen">
									<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>车型<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>港口<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
								</view>
							</view>
						</view>
						<view class="tjList">
							<view class="tab">
                             <view @click="zzlFlag = !zzlFlag" :class="[zzlFlag ? 'bottom' : '']">指令发送进度</view>
                             <view @click="zzlFlag = !zzlFlag" :class="[zzlFlag ? '' : 'bottom']">装船进度</view>
							 <view class="changBox" v-show="!zzlFlag">
                              <view class="change" @click.stop="clickTab('td')" :class="[filterType == 'MNF_BL_TYPE' ? 'ava' : '']">按提单</view>
                              <view class="change" @click.stop="clickTab('pp')" :class="[filterType == 'BRD_TYPE' ? 'ava' : '']">按品牌</view>
                              <view class="change" @click.stop="clickTab('gk')" :class="[filterType == 'POT_TYPE' ? 'ava' : '']">按港口</view>
							 </view>
						    </view>
							<template v-if="zzlFlag">
							 <view class="tjHead" @click="clickTjHead('zzl')">
								<view class="title">
									<p>总指令进度</p>
									<text>{{zTjList.totalSentCount}}/{{zTjList.totalSum}}</text>
								</view>
								<lx-progress-bar title="" :total="zTjList.totalSum" :firstValue="zTjList.totalSentCount"
									:secondValue="zTjList.totalPausedSentCount" contentColor="#0067CF"
									contentColor2="#FC4F00" />
								<view class="bottomInfo">
									<p>已发送<text>{{zTjList.totalSentCount}}</text></p>
									<p>(暂停<text>{{zTjList.totalPausedSentCount}}</text>)</p>
									<p>未发<text>{{zTjList.totalNotSentCount}}</text></p>
								</view>
								<view class="imgBox" v-if="zTjType">
									<image src="../../static/images/tjxz.png" mode=""></image>
								</view>
							 </view>
							 <template v-for="(item,index) in zTjList.instructionStatisticsList">
								<view class="tjInfo" :key="index" :class="{active:zTjActive == index}"
									@click="clickTjList(item,index,'zzl')">
									<view class="title">
										<p>{{item.titleBar}}</p>
										<text>{{item.totalSentCount}}/{{item.zsum}}</text>
									</view>
									<lx-progress-bar title="" :total="item.zsum" :firstValue="item.totalSentCount"
										:secondValue="item.totalPausedSentCount" contentColor="#0067CF"
										contentColor2="#FC4F00" backColor="#f2f2f2" />
									<view class="bottomInfo">
										<p>已发送<text>{{item.totalSentCount}}</text></p>
										<p>(暂停<text>{{item.totalPausedSentCount}}</text>)</p>
										<p>未发<text>{{item.totalNotSentCount}}</text></p>
									</view>
									<view class="imgBox" v-if="zTjActive == index">
										<image src="../../static/images/tjxz2.png" mode=""></image>
									</view>
								</view>
							 </template>
							</template>
							<template v-else>
							<view class="tjInfo" v-for="(item,index) in jobProgressList" :key="item.id" @click="jobProgress(item,index,'zzl')" :class="{active:jobActive == index || brdName == item.label || potName == item.label || mnfBl == item.label}">
                              <view class="label">{{ item.label }}</view>
							  <lx-progress-bar title="" :total="item.totalProgress" :firstValue="item.progress"
							  contentColor="#0067CF"
							  backColor="#f2f2f2" textPosition="outside" percentum precision="0" />
							  <view class="bottomBox">
								<p>已装船:<text>{{ item.progress }}</text></p>
								<p style="margin-left: 16px;">待装船:<text>{{ item.totalProgress - item.progress }}</text></p>
							  </view>
							  <view class="imgBox" v-if="jobActive == index || brdName == item.label || potName == item.label || mnfBl == item.label">
								<image src="../../static/images/tjxz2.png" mode=""></image>
							  </view>
							</view>
						    </template>
						</view>
						<template v-if="itemList.length > 0">
							<view class="itemBox">
								<view class="itemList">
									<!-- <custom-waterfalls-flow :value="itemList" :column="2" :columnSpace="1"> -->
										<!-- <template v-slot:default="item"> -->
										<template v-for="item in itemList">
											<view class="exp">
												<view class="item">
													<view class="row">
														<view class="title">
															<image class="titleImg" src="../../static/images/zlIcon.png"
																mode="widthFix">
															</image>
															<view class="text">
																船舱层数：{{item.shipDeck}}层{{item.cabinNo}}舱
															</view>
														</view>
														<view class="schedule">
															<text class="text">装船进度</text>
															<view class="progressBox">
																<van-progress color="#0067CF" stroke-width="6px"
																	:show-pivot="false" track-color="#DEE9F5"
																	:percentage="itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)" />
															</view>
															<text>{{itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)}}%</text>
														</view>
														<view class="planStatus planStatus0"
															v-if="item.totalPlanStatus == 0">
															<text class="text">{{item.totalPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus3"
															v-if="item.totalPlanStatus == 3">
															<text class="text">{{item.totalPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus5"
															v-if="item.totalPlanStatus == 5">
															<text class="text">{{item.totalPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus1"
															v-if="item.totalPlanStatus == 1 || item.totalPlanStatus == 2 || item.totalPlanStatus == 4">
															<text class="text">{{item.totalPlanStatusDesc}}</text>
														</view>
													</view>
													<view class="row">
														<view class="rowInfo">
															<view class="col">
																<text>数量：</text>
																<text>{{item.totalCount}}</text>
															</view>
															<view class="col">
																<text>港口：</text>
																<text>{{item.potName}}</text>
															</view>
															<view class="col">
																<text>发送人：</text>
																<text>{{item.totalSendUser}}</text>
															</view>
														</view>
														<view class="rowInfo">
															<view class="col">
																<text>负责人：</text>
																<text>{{item.responsiblePerson}}</text>
															</view>
															<view class="col">
																<text>发送时间：</text>
																<text>{{item.totalSendTime}}</text>
															</view>
														</view>
													</view>
													<view class="expand" v-if="itemActive != item.index"
														@click="isActive(item.index)">
														展开
													</view>
													<view class="expand" v-else @click="itemActive = '-1'">
														收起
													</view>
												</view>
												<view class="details">
													<view class="itemDetails" v-show="itemActive == item.index">
													<!-- <view class="itemDetails" v-show="itemActive == item.index"> -->
														<template v-for="(item2,index2) in item.infoList">
															<view class="detailsBox" :key="index2">
																<view class="title">
																	<text>{{item2.mnfBl}}</text>
																	<button @click="toDetails(item2.spsId)">详情</button>
																</view>
																<view class="info">
																	<view class="cell">
																		<text>中转港：</text>
																		<text>{{item2.transitPortName}}</text>
																	</view>
																	<view class="cell">
																		<text>品牌：</text>
																		<text>{{item2.brdName}}</text>
																	</view>
																	<view class="cell">
																		<text>车型：</text>
																		<text>{{item2.goodsTypeName}}</text>
																	</view>
																	<view class="cell">
																		<text>型号：</text>
																		<text>{{item2.model}}</text>
																	</view>
																</view>
															</view>
														</template>
													</view>
												</view>
											</view>
										</template>
									<!-- </custom-waterfalls-flow> -->
								</view>
							</view>
						</template>
						<o-empty v-else height="70vh" bg="#f5f6fa" />
					</view>
				</custom-tab-pane>
				<custom-tab-pane :label="fzlName" name="c1_2" v-if="fzlIsShow">
					<view></view>
					<view class="main">
						<view class="form">
							<view class="inputBox">
								<view class="leftInput">
									<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="mnfBl"
										placeholder="提单号" @iconClick="search" @input="inputChange"></uni-easyinput>
								</view>
								<view class="rightInput" @click="screen">
									<p>发送状态<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>车型<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>港口<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
								</view>
							</view>
						</view>
						<view class="tjList">
							<view class="tab">
                             <view @click="fzlFlag = !fzlFlag" :class="[fzlFlag ? 'bottom' : '']">指令发送进度</view>
                             <view @click="fzlFlag = !fzlFlag" :class="[fzlFlag ? '' : 'bottom']">装船进度</view>
							 <view class="changBox" v-show="!fzlFlag">
                              <view class="change" @click.stop="clickTab('td')" :class="[filterType == 'MNF_BL_TYPE' ? 'ava' : '']">按提单</view>
                              <view class="change" @click.stop="clickTab('pp')" :class="[filterType == 'BRD_TYPE' ? 'ava' : '']">按品牌</view>
                              <view class="change" @click.stop="clickTab('gk')" :class="[filterType == 'POT_TYPE' ? 'ava' : '']">按港口</view>
							 </view>
						    </view>
							<template v-if="fzlFlag">
							 <view class="tjHead" @click="clickTjHead('fzl')">
								<view class="title">
									<p>分指令进度</p>
									<text>{{zTjList.branchSentCount}}/{{zTjList.branchSum}}</text>
								</view>
								<lx-progress-bar title="" :total="zTjList.branchSum"
									:firstValue="zTjList.branchSentCount" :secondValue="zTjList.branchPausedSentCount"
									contentColor="#0067CF" contentColor2="#FC4F00" />
								<view class="bottomInfo">
									<p>已发送<text>{{zTjList.branchSentCount}}</text></p>
									<p>(暂停<text>{{zTjList.branchPausedSentCount}}</text>)</p>
									<p>未发<text>{{zTjList.branchNotSentCount}}</text></p>
								</view>
								<view class="imgBox" v-if="zTjType">
									<image src="../../static/images/tjxz.png" mode=""></image>
								</view>
							 </view>
							 <template v-for="(item,index) in zTjList.instructionStatisticsList">
								<view class="tjInfo" :key="index" :class="{active:zTjActive == index}"
									@click="clickTjList(item,index,'fzl')">
									<view class="title">
										<p>{{item.titleBar}}</p>
										<text>{{item.branchSentCount}}/{{item.fsum}}</text>
									</view>
									<lx-progress-bar title="" :total="item.fsum" :firstValue="item.branchSentCount"
										:secondValue="item.branchPausedSentCount" contentColor="#0067CF"
										contentColor2="#FC4F00" backColor="#f2f2f2" />
									<view class="bottomInfo">
										<p>已发送<text>{{item.branchSentCount}}</text></p>
										<p>(暂停<text>{{item.branchPausedSentCount}}</text>)</p>
										<p>未发<text>{{item.branchNotSentCount}}</text></p>
									</view>
									<view class="imgBox" v-if="zTjActive == index">
										<image src="../../static/images/tjxz2.png" mode=""></image>
									</view>
								</view>
							 </template>
						    </template>
							<template v-else>
							<view class="tjInfo" v-for="(item,index) in jobProgressList" :key="item.id" @click="jobProgress(item,index,'fzl')" :class="{active:jobActive == index || brdName == item.label || potName == item.label || mnfBl == item.label}">
                              <view class="label">{{ item.label }}</view>
							  <lx-progress-bar title="" :total="item.totalProgress" :firstValue="item.progress"
							  contentColor="#0067CF"
							  backColor="#f2f2f2" textPosition="outside" percentum precision="0" />
							  <view class="bottomBox">
								<p>已装船:<text>{{ item.progress }}</text></p>
								<p style="margin-left: 16px;">待装船:<text>{{ item.totalProgress - item.progress }}</text></p>
							  </view>
							  <view class="imgBox" v-if="jobActive == index || brdName == item.label || potName == item.label || mnfBl == item.label">
								<image src="../../static/images/tjxz2.png" mode=""></image>
							  </view>
							</view>
						    </template>
							
						</view>
						<template v-if="itemList.length > 0">
							<checkbox-group @change="checkChange">
								<view class="itemBox">
									<view class="itemList">
										<!-- <custom-waterfalls-flow :value="itemList" :column="2" :columnSpace="1"> -->
											<!-- <template v-slot:default="item"> -->
												<template v-for="item in itemList">
												<view class="exp">
													<view class="item">
														<view class="row">
															<view class="title">
																<view class="rowHead">
																	<checkbox :value="item.lwpId" :checked="false" />
																</view>
																<image class="titleImg"
																	src="../../static/images/zlIcon.png"
																	mode="widthFix">
																</image>
																<view class="text">
																	船舱层数：{{item.shipDeck}}层{{item.cabinNo}}舱
																</view>
															</view>
															<view class="schedule">
																<text class="text">装船进度</text>
																<view class="progressBox">
																	<van-progress color="#0067CF" stroke-width="6px"
																		:show-pivot="false" track-color="#DEE9F5"
																		:percentage="itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)" />
																</view>
																<text>{{itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)}}%</text>
															</view>
															<view class="planStatus planStatus0"
																v-if="item.branchPlanStatus == '0'">
																<text class="text">{{item.branchPlanStatusDesc}}</text>
															</view>
															<view class="planStatus planStatus1"
																v-if="item.branchPlanStatus == '1'">
																<text class="text">{{item.branchPlanStatusDesc}}</text>
															</view>
															<view class="planStatus planStatus3"
																v-if="item.branchPlanStatus == '2'">
																<text class="text">{{item.branchPlanStatusDesc}}</text>
															</view>
															<view class="planStatus planStatus5"
																v-if="item.branchPlanStatus == '4'">
																<text class="text">{{item.branchPlanStatusDesc}}</text>
															</view>
															<view class="planStatus planStatus1"
																v-if="item.branchPlanStatus == '5'">
																<text class="text">{{item.branchPlanStatusDesc}}</text>
															</view>
														</view>
														<view class="row">
															<view class="rowInfo">
																<view class="col">
																	<text>数量：</text>
																	<text>{{item.totalCount}}</text>
																</view>
																<view class="col">
																	<text>港口：</text>
																	<text>{{item.potName}}</text>
																</view>
																<view class="col">
																	<text>分指令发送人：</text>
																	<text>{{item.branchSendUser}}</text>
																</view>
															</view>
															<view class="rowInfo">
																<view class="col">
																	<text>负责人：</text>
																	<text>{{item.responsiblePerson}}</text>
																</view>
																<view class="col">
																	<text>发送时间：</text>
																	<text>{{item.totalSendTime}}</text>
																</view>
															</view>
														</view>
														<view class="xfBtn">
															<view class="btn" @click="distribute('center','solo',item)"
																v-if="item.branchPlanStatusDesc == '待发送'">
																指令下发
															</view>
															<view class="btn" @click="distribute('center','again',item)"
																v-if="item.branchPlanStatusDesc == '暂停'">
																重新发送
															</view>
															<view class="btn stopbtn" @click="suspend(item)"
																v-if="item.branchPlanStatusDesc == '作业中' || item.branchPlanStatusDesc == '待作业'">
																暂停
															</view>
														</view>
														<view class="expand" v-if="itemActive != item.index"
															@click="isActive(item.index)">
															展开
														</view>
														<view class="expand" v-else @click="itemActive = '-1'">
															收起
														</view>
													</view>
													<view class="details">
														<view class="itemDetails" v-show="itemActive == item.index">
															<template v-for="(item2,index2) in item.infoList">
																<view class="detailsBox" :key="index2">
																	<view class="title">
																		<text>{{item2.mnfBl}}</text>
																		<button
																			@click="toDetails(item2.spsId)">详情</button>
																	</view>
																	<view class="info">
																		<view class="cell">
																			<text>中转港：</text>
																			<text>{{item2.transitPortName}}</text>
																		</view>
																		<view class="cell">
																			<text>品牌：</text>
																			<text>{{item2.brdName}}</text>
																		</view>
																		<view class="cell">
																			<text>车型：</text>
																			<text>{{item2.goodsTypeName}}</text>
																		</view>
																		<view class="cell">
																			<text>型号：</text>
																			<text>{{item2.model}}</text>
																		</view>
																	</view>
																</view>
															</template>
														</view>
													</view>
												</view>
											    </template>
										<!-- </custom-waterfalls-flow> -->
									</view>
								</view>
							</checkbox-group>
						</template>
						<o-empty v-else height="70vh" bg="#f5f6fa" />
					</view>
				</custom-tab-pane>
				<custom-tab-pane :label="bzzName" name="c1_6" v-if="bzzIsShow">
					<view></view>
					<view class="main">
						<view class="form">
							<view class="inputBox">
								<view class="leftInput">
									<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="mnfBl"
										placeholder="提单号" @iconClick="search" @input="inputChange"></uni-easyinput>
								</view>
								<view class="rightInput" @click="screen">
									<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>车型<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>港口<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
								</view>
							</view>
						</view>
						<view class="tjList">
							<view class="tab">
                             <view class="bottom">装船进度</view>
							 <view class="changBox">
                              <view class="change" @click.stop="clickTab('td')" :class="[filterType == 'MNF_BL_TYPE' ? 'ava' : '']">按提单</view>
                              <view class="change" @click.stop="clickTab('pp')" :class="[filterType == 'BRD_TYPE' ? 'ava' : '']">按品牌</view>
                              <view class="change" @click.stop="clickTab('gk')" :class="[filterType == 'POT_TYPE' ? 'ava' : '']">按港口</view>
							 </view>
						    </view>
							<template>
							<view class="tjInfo" v-for="(item,index) in jobProgressList" :key="item.id" @click="jobProgress(item,index,'bzz')" :class="{active:jobActive == index || brdName == item.label || potName == item.label || mnfBl == item.label}">
                              <view class="label">{{ item.label }}</view>
							  <lx-progress-bar title="" :total="item.totalProgress" :firstValue="item.progress"
							  contentColor="#0067CF"
							  backColor="#f2f2f2" textPosition="outside" percentum precision="0" />
							  <view class="bottomBox">
								<p>已装船:<text>{{ item.progress }}</text></p>
								<p style="margin-left: 16px;">待装船:<text>{{ item.totalProgress - item.progress }}</text></p>
							  </view>
							  <view class="imgBox" v-if="jobActive == index || brdName == item.label || potName == item.label || mnfBl == item.label">
								<image src="../../static/images/tjxz2.png" mode=""></image>
							  </view>
							</view>
						    </template>
							
						</view>
						<template v-if="itemList.length > 0">
							<view class="itemBox">
								<view class="itemList">
									<!-- <custom-waterfalls-flow :value="itemList" :column="2" :columnSpace="1"> -->
										<!-- <template v-slot:default="item"> -->
											<template v-for="item in itemList">
											<view class="exp">
												<view class="item">
													<view class="row">
														<view class="title">
															<image class="titleImg" src="../../static/images/zlIcon.png"
																mode="widthFix">
															</image>
															<view class="text">
																船舱层数：{{item.shipDeck}}层{{item.cabinNo}}舱
															</view>
														</view>
														<view class="schedule">
															<text class="text">装船进度</text>
															<view class="progressBox">
																<van-progress color="#0067CF" stroke-width="6px"
																	:show-pivot="false" track-color="#DEE9F5"
																	:percentage="itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)" />
															</view>
															<text>{{itemSum(item.loadingProgress.workProgress, item.loadingProgress.totalProgress)}}%</text>
														</view>
														<view class="planStatus planStatus0"
															v-if="item.branchPlanStatus == 0">
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus3"
															v-else-if="item.branchPlanStatus == 2">
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus5"
															v-else-if="item.branchPlanStatus == 4">
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
														<view class="planStatus planStatus1" v-else>
															<text class="text">{{item.branchPlanStatusDesc}}</text>
														</view>
													</view>
													<view class="row">
														<view class="rowInfo">
															<view class="col">
																<text>数量：</text>
																<text>{{item.totalCount}}</text>
															</view>
															<view class="col">
																<text>港口：</text>
																<text>{{item.potName}}</text>
															</view>
														</view>
														<view class="rowInfo">
															<view class="col">
																<text>负责人：</text>
																<text>{{item.responsiblePerson}}</text>
															</view>
															<view class="col">
																<text>发送时间：</text>
																<text>{{item.totalSendTime}}</text>
															</view>
														</view>
														<view class="rowInfo">
															<view class="col">
																<text>分指令发送人：</text>
																<text>{{item.branchSendUser}}</text>
															</view>
														</view>
													</view>
													<view class="expand" v-if="itemActive != item.index"
														@click="isActive(item.index)">
														展开
													</view>
													<view class="expand" v-else @click="itemActive = '-1'">
														收起
													</view>
												</view>
												<view class="details">
													<view class="itemDetails" v-show="itemActive == item.index">
														<template v-for="(item2,index2) in item.infoList">
															<view class="detailsBox" :key="index2">
																<view class="title">
																	<text>{{item2.mnfBl}}</text>
																	<button @click="toDetails(item2.spsId)">详情</button>
																</view>
																<view class="info">
																	<view class="cell">
																		<text>中转港：</text>
																		<text>{{item2.transitPortName}}</text>
																	</view>
																	<view class="cell">
																		<text>品牌：</text>
																		<text>{{item2.brdName}}</text>
																	</view>
																	<view class="cell">
																		<text>车型：</text>
																		<text>{{item2.goodsTypeName}}</text>
																	</view>
																	<view class="cell">
																		<text>型号：</text>
																		<text>{{item2.model}}</text>
																	</view>
																</view>
															</view>
														</template>
													</view>
												</view>
											</view>
										    </template>
									<!-- </custom-waterfalls-flow> -->
								</view>
							</view>
						</template>
						<o-empty v-else height="70vh" bg="#f5f6fa" />
					</view>
				</custom-tab-pane>
				<custom-tab-pane :label="pztName" name="c1_3" v-if="pztIsShow">
					<view></view>
					<view class="main main2">
						<view class="pzPot">
							<view class="li" v-for="(item,index) in pzPotList" :key="index">
								<view class="color" :style="item.background"></view>
								<view class="name">{{item.potCnname}}</view>
							</view>
						</view>
						<template v-for="(item,index) in imgInfo.cabinInfoList">
							<view class="imgTable" :key="index">
								<view class="title">
									第{{item.shipDecks}}层
								</view>
								<view class="nr">
									<text class="text">是否可调夹板:
										<text v-if="item.whetherCalldeck == 1">是</text>
										<text v-if="item.whetherCalldeck == 0">否</text>
									</text>
									<text class="text">是否有跳板: {{item.whetherJumpName}}</text>
								</view>
								<view class="imgLi">
									<view class="maskBox">
										<view class="line">
											<view class="testLine" v-for="item2 in item.shipSpace" :key="item2"
												:style="{height:item.maxHeight+'px'}">
											</view>
											<view class="myArrList">
												<view class="arrItem" @click="showItemDialog(item3)"
													v-for="(item3, index3) in goodsInfo[index].stowageList"
													:key="index3" :style="getDynamicStyle(item3, item.shipSpace)">
													<zb-tooltip placement="bottom-start" color="white"
														:visible.sync="item3.isShow">
														<text style="margin-left: 5px;">{{item3.stowageNo}}</text>
														<text style="margin-left: 5px;">{{item3.potName}}</text>
														<text
															v-if="item3.transitPortName != null && item3.transitPortName != ''">({{item3.transitPortName}})</text>
														<text style="margin-left: 5px;">{{item3.amount}}</text>
														<view slot="content">
															<view class="tipBox">
																<p style="color: #000;">
																	<text
																		style="margin-left: 5px;">{{item3.stowageNo}}</text>
																	<text
																		style="margin-left: 5px;">{{item3.potName}}</text>
																	<text
																		v-if="item3.transitPortName != null && item3.transitPortName != ''">({{item3.transitPortName}})</text>
																	<text style="margin-left: 5px;">
																		{{item3.amount}}</text>
																</p>
															</view>
														</view>
													</zb-tooltip>
												</view>
											</view>
											<!-- <canvas class="mycanvas" :canvas-id="'mycanvas' + index" @:data-id="index"
												@click="handleClick" :style="{height:item.maxHeight+'px'}"></canvas> -->
										</view>
										<!-- -->
										<view class="imgSize leftTopImg"
											v-if="item.whetherJump == 2 || item.whetherJump == 4 || item.whetherJump == 6 || item.whetherJump == 7 || item.whetherJump == 8 || item.whetherJump == 9">
											<image src="@/static/images/jump-tail.svg" mode="widthFix"></image>
										</view>
										<view class="imgSize leftBotImg"
											v-if="item.whetherJump == 4 || item.whetherJump == 7 || item.whetherJump == 9">
											<image src="@/static/images/jump-tail.svg" mode="widthFix"></image>
										</view>
										<view class="imgSize2 topImg"
											v-if="item.whetherJump == 3 || item.whetherJump == 5 || item.whetherJump == 6 || item.whetherJump == 7 || item.whetherJump == 8 || item.whetherJump == 9">
											<image src="@/static/images/jump-mid.svg" mode="widthFix"></image>
										</view>
										<view class="imgSize2 botImg"
											v-if="item.whetherJump == 5 || item.whetherJump == 8 || item.whetherJump == 9">
											<image src="@/static/images/jump-mid.svg" mode="widthFix"></image>
										</view>
									</view>
									<view class="heightBox">
										<view v-for="(itex,index) in item.tierHeightListCo" :key="index">{{ itex }}</view>
									</view>
								</view>
                                
								<view class="numBox">
								 <view class="num" v-for="index in item.shipSpace" :key="index">
		                            {{index}}
								 </view>
							    </view>

								<view class="tableHead" @click="clickShow(item)">
									<text>{{item.shipDecks}}层明细({{goodsInfo[index].stowageList.length}})</text>
									<p v-if="item.isShow">折叠</p>
									<p v-if="!item.isShow">展开</p>
								</view>
								<view class="tableBox">
									<uni-table stripe emptyText="暂无更多数据" v-if="item.isShow">
										<!-- 表头行 -->
										<uni-tr>
											<uni-th width="20">积载编号</uni-th>
											<uni-th width="20">提单号</uni-th>
											<uni-th width="20">港口</uni-th>
											<uni-th width="20">品牌</uni-th>
											<uni-th width="20">车型</uni-th>
											<uni-th width="20">型号</uni-th>
											<uni-th width="20">车型明细</uni-th>
											<uni-th width="20">数量</uni-th>
											<uni-th width="20">长</uni-th>
											<uni-th width="20">宽</uni-th>
											<uni-th width="20">高</uni-th>
											<uni-th width="20">位置</uni-th>
										</uni-tr>
										<!-- 表格数据行 -->
										<template v-if="goodsInfo.length && goodsInfo.length > 0">
											<uni-tr v-for="(item2,index2) in goodsInfo[index].stowageList"
												:key="index2">
												<uni-td>{{item2.stowageNo}}</uni-td>
												<uni-td>{{item2.mnfBl}}</uni-td>
												<uni-td>{{item2.potName}}</uni-td>
												<uni-td>{{item2.brdName}}</uni-td>
												<uni-td>{{item2.goodsTypeName}}</uni-td>
												<uni-td>{{item2.model}}</uni-td>
												<uni-td>{{item2.bvdName}}</uni-td>
												<uni-td>{{item2.amount}}</uni-td>
												<uni-td>{{item2.carLength}}</uni-td>
												<uni-td>{{item2.carWidth}}</uni-td>
												<uni-td>{{item2.carHeight}}</uni-td>
												<uni-td>{{item2.cabinNoList.join()}}</uni-td>
											</uni-tr>
										</template>
									</uni-table>

								</view>
							</view>
						</template>
					</view>
				</custom-tab-pane>
				<custom-tab-pane :label="cwtName" name="c1_4" v-if="cwtIsShow">
					<view class="main" v-if="isCwnum == 0">
						<view></view>
						<view class="form form2">
							<view class="inputBox">
								<view class="leftInput">
									<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="mnfBl"
										placeholder="提单号" @iconClick="search" @input="inputChange"></uni-easyinput>
								</view>
								<view class="rightInput" @click="screen">
									<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>车型<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
									<p>港口<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
								</view>
							</view>
						</view>
						<view class="cwMain">
							<view class="cwLeft">
								<view class="leftData" v-for="(item,index) in dcList" :key="index"
									@click="clickLeft(item,index)" :class="{active:activeIndex == index}">
									<p>{{item.pymName}}</p>
								</view>
							</view>
							<view class="cwRight">
								<view class="rightBox" v-for="(item,index) in qyList" :key="index">
									<view class="boxTop">
										<p>{{item.pyaAreaCode}}（{{item.totalLaneAmout}}/{{item.totalSeatAmout}}）</p>
										<text @click="clickLine(item)">车道</text>
									</view>
									<view class="boxContent">
										<!-- <view class="dataList">
											<p>车位总数：
												<template v-if="item.totalSeatAmout == null">-- </template>
												<template v-else>{{item.totalSeatAmout}}</template>
												车位
											</p>
											<p>使用：
												<template v-if="item.useSeatAmout == null">-- </template>
												<template v-else>{{item.useSeatAmout}}</template>
												车位
											</p>
											<p>剩余：
												<template v-if="item.remainSeatAmout == null">-- </template>
												<template v-else>{{item.remainSeatAmout}}</template>
												车位
											</p>
											<p>可停放车辆：
												<template v-if="item.unparkGoodsAmout == null">-- </template>
												<template v-else>{{item.unparkGoodsAmout}}</template>
												辆
											</p>
											<p>已停放车辆：
												<template v-if="item.stopGoodsAmout == null">-- </template>
												<template v-else>{{item.stopGoodsAmout}}</template>
												辆
											</p>
										</view> -->
										<template v-if="item.stopGoodsAmout != 0">
											<!-- <view class="boxJd">
												<lx-progress-bar title="" :total="item.totalSeatAmout"
													:firstValue="item.stopGoodsAmout" contentColor="#0067CF" />
												<text>{{item.stopGoodsAmout}}/{{item.totalSeatAmout}}</text>
											</view> -->
											<view class="carUl">
												<view class="carLi" v-for="(v,index2) in item.carStatisticsList"
													:key="index2" @click="clickCar(v)">
													<zb-tooltip placement="bottom-start" color="white"
														:visible.sync="v.isShow">
														<view slot="content">
															<view class="tipBox">
																<view class="li" v-for="(item2,idx) in v.carDetailList"
																	:key="idx">
																	<p>{{item2.storeLine}}道</p>
																	<text>{{item2.storeSeatAmout}}车位</text>
																</view>
															</view>
														</view>
														<view style="width: 100%; height: 100%;">
															<p class="carTitle">{{v.brdName}}
																<template v-if="v.bvmName != ''">
																	-
																</template>
																{{v.bvmName}}
															</p>
															<text>共{{v.carAmout}}辆({{v.carDetailList.length}}车道，{{v.carAmout}}车位)</text>
														</view>
													</zb-tooltip>
												</view>
											</view>
										</template>
										<template v-else>
											<view class="notData">
												未分配
											</view>
										</template>
									</view>
								</view>
							</view>
						</view>
					</view>
					<template v-else>
						<place @modifyPlaceTabs="modifyPlaceTabs" :vvyId="shipInfo.vvyId" :pyaObj="pyaObj"
							:brdId="brdId" :bvmId="bvmId" :potId="potId" :mnfBl="mnfBl"></place>
					</template>
				</custom-tab-pane>
			</custom-tabs>
			<uni-drawer ref="showRight" mode="right" :mask-click="false">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="drawerTop" @click="back">
							<image src="../../static/images/leftJt.png" mode=""></image>
							<text>返回</text>
						</view>
						<template v-if="tabsValue == 1">
							<view class="drawerTitle">
								发送状态
							</view>
							<superwei-combox :candidates="sendList" :isJSON="true" keyName="text" placeholder="发送状态"
								v-model="sendText" @select="sendSelect"></superwei-combox>
						</template>
						<view class="drawerTitle">
							品牌
						</view>
						<superwei-combox :candidates="brandList" :isJSON="true" keyName="brdName" placeholder="品牌"
							v-model="brdName" @select="brandSelect"></superwei-combox>
						<view class="drawerTitle">
							车型
						</view>
						<superwei-combox :candidates="bvmList" :isJSON="true" keyName="name" placeholder="车型"
							v-model="bvmName" @select="bvmSelect"></superwei-combox>
						<view class="drawerTitle">
							港口
						</view>
						<superwei-combox :candidates="potList" :isJSON="true" keyName="potCnname" placeholder="港口"
							v-model="potName" @select="potSelect"></superwei-combox>
						<view class="bottomBtn">
							<view class="btn czBtn" @click="reset">
								重置
							</view>
							<view class="btn qrBtn" @click="confirm">
								确认
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
			<uni-popup ref="popup" type="dialog">
				<view class="popupBox">
					<view class="popupTitle">
						指令下发
					</view>
					<view class="popupInfo">
						<text>负责人：</text>
						<template v-if="tabsValue == 0">
							<view style="border: 1px solid gray;">
								<superwei-combox :candidates="directorList" :isJSON="true" keyName="text"
									placeholder="请选择负责人" v-model="directorValue"
									@select="directorChange"></superwei-combox>
							</view>
						</template>
						<template v-if="tabsValue == 1">
							<view style="border: 1px solid gray;">
								<rudon-multiSelector welcome="请选择负责人" :is_using_slot="false" :is_using_icon="true"
									:localdata="directorList" @change="directorChange2"
									:delValue="delValue"></rudon-multiSelector>
							</view>
						</template>
					</view>
					<view class="popupBtn">
						<view class="btnList">
							<button class="button" type="default" @click="zlCancel">取 消</button>
							<button class="button" type="primary" @click="zlConfirm">发 送</button>
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup2" type="dialog">
				<view class="popupBox popupBox2">
					<view class="popupTitle">
						装船要求
					</view>
					<uni-easyinput type="textarea" v-model="askValue" placeholder="请输入内容..."
						:disabled="askDisabled"></uni-easyinput>
					<view class="popupBtn">
						<view class="btnList" v-if="tabsValue == 0">
							<button class="button" type="default" @click="zcCancel">取 消</button>
							<button class="button" type="primary" @click="zcConfirm">提 交</button>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import HeadView from '@/components/head-view/head-view.vue';
	import HeadInfo from '@/components/head-info/head-info';
	import place from './place.vue';
	let timerId
	export default {
		data() {
			return {
				title: "",
				loginObj: {},
				tabsValue: 0, // 0(总指令) 1(分指令)
				shipInfo: {}, // 船只数据
				// 港区信息
				portObj: {},
				// 搜索框
				mnfBl: '', // 提单号
				mnfBlItem: {},
				mnfBlList: [],
				// 品牌
				brdId: '',
				brdName: '',
				brandItem: {},
				brandList: [],
				// 车型
				bvmId: '',
				bvmName: '',
				bvmItem: {},
				bvmList: [],
				// 港口
				potId: "",
				potName: '',
				potItem: {},
				potList: [],
				// 发送状态
				sendList: [{
						vale: "1",
						text: "已发送"
					},
					{
						vale: "0",
						text: "待发送"
					}
				],
				sendValue: "",
				sendText: "",
				// 指令下发弹窗负责人
				directorId: "",
				directorValue: "",
				directorTrue: [], // 选中负责人列表
				directorList: [],
				roleId: "", // 角色ID

				// 装船要求
				askValue: "",
				askDisabled: false,
				itemList: [],
				current: 0,
				active: 1,
				itemActive: -1,
				// 总指令工作包
				zzlLwpIdList: [],
				// 分指令多选
				checkList: [],
				fzzRow: {},
				// 指令下发状态 all 所有下发 solo 单个下发
				distributeType: "",
				delValue: false,

				// 总指令统计图
				zTjType: true,
				zTjActive: -1,
				zTjList: {},
				shipDeck: "",

				// 场位图相关数据
				// 堆场
				dcId: "",
				dcName: "",
				dcList: [],
				// 区域
				pyaObj: "",
				qyList: [],
				activeIndex: 0,
				// 场位的状态 是否进入车道
				isCwnum: 0,

				// 分页
				pageSize: 10,
				current: 1,

				// 配载图港口
				pzPotList: [],
				// 配载图详情
				imgInfo: [],
				// 货物明细
				goodsInfo: [],

				qxList: [],
				// 总指令显示
				zzlIsShwo: false,
				zzlName: "",
				// 分指令显示
				fzlIsShow: false,
				fzlName: "",
				// 分指令-班组长显示
				bzzIsShow: false,
				bzzName: "",
				// 配载图显示
				pztIsShow: false,
				pztName: "",
				// 场位图显示
				cwtIsShow: false,
				cwtName: "",
				zzlFlag:true,
				jobProgressList:[],
				jobActive:null,
				fzlFlag:true,
				filterType:'MNF_BL_TYPE'
			}
		},
		computed: {
			itemSum() {
				return function(item, item2) {
					let sum = ((item / item2) * 100).toFixed(1)
					return sum
				};
			},
		},
		onLoad(options) {
			this.shipInfo = JSON.parse(decodeURIComponent(options.params)).shipInfo
			this.title = `${this.shipInfo.spmIdDesc} / ${this.shipInfo.vvyName}`
			this.loginObj = uni.getStorageSync('loginObj')
			this.portObj = uni.getStorageSync('portObj')
			this.qxList = uni.getStorageSync('qxList')
			this.qxList.forEach(v => {
				if (v.code == "shipmentDirectives") {
					v.operates.forEach(e => {
						if (e.code == "B1") {
							this.zzlIsShwo = true
							this.zzlName = e.name
						} else if (e.code == "B2") {
							this.pztIsShow = true
							this.pztName = e.name
						} else if (e.code == "B3") {
							this.fzlIsShow = true
							this.fzlName = e.name
						} else if (e.code == "B4") {
							this.bzzIsShow = true
							this.bzzName = e.name
						} else if (e.code == "B5") {
							this.cwtIsShow = true
							this.cwtName = e.name
						}
					})
				}
			})
			if (this.tabsValue == 0) {
				this.loadSumOrder() // 总指令：分页查询
				this.askDisabled = false
			}
			this.getPot() // 获取港口
			this.getBrand() // 获取品牌
			this.getBvm() // 获取车型
			this.getRoleId() // 获取角色ID
			// this.initAsk() // 获取装船要求
			this.getStatistics() // 获取统计数据
			this.getPotList()
			this.getImgInfo()
			this.getGoodsInfo()
			this.getJobProgress() //获取卸船进度数据
		},
		components: {
			HeadView,
			HeadInfo,
			place,
		},
		methods: {
			// 点击tabs
			changeTabs(e) {
				this.mnfBl = ''
				this.brdId = ''
				this.brdName = ''
				this.bvmId = ''
				this.bvmName = ''
				this.potId = ''
				this.potName = ''
				this.itemList = []
				this.sendValue = ''
				this.tabsValue = e.value
				this.zTjActive = -1
				this.shipDeck = ""
				this.current = 1
				this.zTjType = true
				this.activeIndex = 0
				if (e.value == 1 || e.value == 2) {
					this.loadOtherOrder()
					this.askDisabled = true
				} else if (e.value == 0) {
					this.loadSumOrder()
					this.askDisabled = false
				} else if (e.value == 3) {
					this.getPotList()
					this.getImgInfo()
					this.getGoodsInfo()
				} else if (e.value == 4) {
					this.getDc()
				}
				this.directorList = []
				this.getRoleId()
				this.zzlFlag = true
				this.fzlFlag = true
			},
			// 刷新
			refresh() {
				this.itemList = []
				this.current = 1
				if (this.tabsValue == 1 || this.tabsValue == 2) {
					this.loadOtherOrder()
				} else if (this.tabsValue == 0) {
					this.loadSumOrder()
				}
			},
			// 点击搜索
			search() {
				if (this.tabsValue == 1 || this.tabsValue == 2) {
					this.loadOtherOrder()
					this.getStatistics()
				} else if (this.tabsValue == 0) {
					this.loadSumOrder()
					this.getStatistics()
				} else if (this.tabsValue == 4) {
					this.getQy()
				}
			},
			// 点击筛选
			screen() {
				this.$refs.showRight.open();
			},
			// 返回
			back() {
				this.$refs.showRight.close();
			},
			// 重置
			reset() {
				// 品牌
				this.brdId = ""
				this.brdName = ""
				this.brandItem = {}
				// 车型
				this.bvmId = ""
				this.bvmName = ""
				this.bvmItem = {}
				// 港口
				this.potId = ""
				this.potName = ""
				this.potItem = {}
				// 发送状态
				this.sendText = ""
				this.sendValue = ""
				this.jobActive = null
			},
			// 筛选确认
			confirm() {
				this.itemList = []
				this.current = 1
				if (this.tabsValue == 0) {
					this.loadSumOrder()
				} else if (this.tabsValue == 1 || this.tabsValue == 2) {
					this.loadOtherOrder()
				} else if (this.tabsValue == 4) {
					this.getQy()
				}
				this.jobActive = null
				this.$refs.showRight.close();
			},
			// 点击总指令统计列表总标题
			clickTjHead(type) {
				this.zTjActive = -1
				this.shipDeck = ""
				this.mnfBl = ''
				this.brdId = ''
				this.brdName = ''
				this.bvmId = ''
				this.bvmName = ''
				this.potId = ''
				this.potName = ''
				this.sendValue = ''
				this.itemList = []
				this.current = 1
				this.zTjType = true
				if (type == 'zzl') {
					this.loadSumOrder()
				} else if (type == 'fzl') {
					this.loadOtherOrder()
				}
			},
			// 点击总指令统计列表
			clickTjList(item, index, type) {
				this.zTjActive = index
				this.shipDeck = item.shipDeck
				this.itemList = []
				this.current = 1
				this.zTjType = false
				if (type == 'zzl') {
					this.loadSumOrder()
				} else if (type == 'fzl') {
					this.loadOtherOrder()
				}
			},
			// 获取统计列表
			getStatistics() {
				let target = ""
				if (this.shipInfo.tradeType == '外贸') {
					target = "W_L"
				} else {
					target = "N_L"
				}
				uni.request({
					url: `${this.$local}/api/instruction/statistics?vvyIds=${this.shipInfo.vvyId}&target=${target}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						this.zTjList = res.data.data[0]
						this.zTjList["totalSum"] = this.zTjList.totalSentCount + this.zTjList.totalNotSentCount
						this.zTjList["branchSum"] = this.zTjList.branchSentCount + this.zTjList
							.branchNotSentCount
						this.zTjList.instructionStatisticsList.forEach(v => {
							let zsum = v.totalSentCount + v.totalNotSentCount
							this.$set(v, "zsum", zsum)
							let fsum = v.branchSentCount + v.branchNotSentCount
							this.$set(v, "fsum", fsum)
						})
						console.log(this.zTjList)
					}
				})
			},
			// 获取总指令列表
			loadSumOrder() {
				uni.request({
					url: `${this.$local}/api/shipInstructions/page?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&shipDeck=${this.shipDeck}&size=${this.pageSize}&current=${this.current}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						this.itemList.push(...res.data.data.records)
						if (res.data.data.records.length == 10) {
							this.current++
							this.loadSumOrder()
						}
						this.itemList.forEach((v, index) => {
							v.image = '../../static/images/theme/car1.png'
							v.index = index
							// if (v.branchPlanStatus == 0) {
							this.zzlLwpIdList.push(v.lwpId)
							// }
							this.getBottomInfo(v.lwpId, index)
						})
					}
				})
			},
			// 获取分指令列表
			loadOtherOrder() {
				let teamFlag = ""
				if (this.tabsValue == 2) {
					teamFlag = true
					this.sendValue = 1
				}
				uni.request({
					url: `${this.$local}/api/shipInstructions/pageCommandForBranch?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&sendStatus=${this.sendValue}&shipDeck=${this.shipDeck}&teamFlag=${teamFlag}&size=${this.pageSize}&current=${this.current}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						this.itemList.push(...res.data.data.records)
						if (res.data.data.records.length == 10) {
							this.current++
							this.loadOtherOrder()
						}
						this.itemList.forEach((v, index) => {
							v.image = '../../static/images/theme/car1.png'
							v.index = index
							this.getBottomInfo(v.lwpId, index)
						})
						console.log(this.itemList)
					}
				})
			},
			// 获取指令下方信息
			getBottomInfo(id, index) {
				uni.request({
					url: `${this.$local}/api/shipInstructions/queryStowageForLwpId?lwpId=${id}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						let arr = []
						res.data.data.forEach(item => {
                            arr.push({
								mnfBl:item.mnfBl,
								spsId:item.spsId,
								transitPortName:item.transitPortName,
								brdName:item.brdName,
								goodsTypeName:item.goodsTypeName,
								bvdName:item.bvdName,
							})
						})
						this.$set(this.itemList[index], 'infoList', arr)
						console.log('res.data.data',res.data.data);
					}
				})
			},
			// 是否展开
			isActive(e) {
				this.itemActive = e
			},
			// 点击指令下发
			distribute(type, a, item) {
				if(a == 'solo' && this.checkList.length == 0) {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '请选择分指令！'
					})
					return
				}
				this.delValue = false
				this.distributeType = a
				this.$refs.popup.open(type)
				if (a == 'again' || a == 'solo') {
					this.fzzRow = item
				} else if (a == 'all') {
					this.fzzRow = ""
				}
			},
			// 获取角色ID
			getRoleId() {
				let name = ""
				if (this.tabsValue == 0) {
					name = "dongLei"
				} else if (this.tabsValue == 1) {
					name = "shipmenter"
				}
				uni.request({
					url: `${this.$local}/api/roles?name=${name}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.roleId = res.data.data
							this.getDirector()
						}
					}
				})
			},
			// 根据角色ID获取负责人
			getDirector() {
				uni.request({
					url: `${this.$local}/api/roles/principals?roleId=${this.roleId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.directorList.push({
									text: v.name,
									value: v.id,
									is_selected: false
								})
							})
						}
					}
				})
			},
			// 总指令选择负责人
			directorChange(e) {
				this.directorTrue = [{
					userId: e.value
				}]
				this.directorId = e.value
				this.directorValue = e.text
			},
			// 分指令选择负责人
			directorChange2(e) {
				this.directorTrue = []
				e.forEach(v => {
					if (v.is_selected) {
						this.directorTrue.push({
							userId: v.value
						})
					}
				})
			},
			// 指令下发确认
			zlConfirm() {
				console.log(this.directorTrue)
				if (this.directorTrue.length > 0) {
					let lwpIdList = []
					if (this.tabsValue == 0) {
						lwpIdList = this.zzlLwpIdList
					} else if (this.tabsValue == 1) {
						lwpIdList = this.checkList
					}
					// 外贸数据
					let reqDTO = {
						"loadUnloadRequirements": this.askValue,
						"lwpIdList": lwpIdList,
						"principalList": this.directorTrue,
						"vvyId": this.shipInfo.vvyId
					}
					if (this.distributeType == 'all') {
						uni.request({
							url: `${this.$local}/api/shipInstructions/commandIssued`,
							data: reqDTO,
							header: {
								'Content-Type': 'application/json', //自定义请求头信息
								'Authorization': `Bearer ${this.loginObj.access_token}`
							},
							method: 'POST', //请求方式，必须为大写
							success: (res) => {
								this.$refs.popup.close()
								console.log('res',res);
								if (res.data.status == 200 || res.data.data) {
									this.itemList = []
									this.current = 1
									this.delValue = true
									this.loadSumOrder()
									this.getStatistics()
									this.checkList = []
									uni.showToast({
										title: `总指令下发成功`,
										icon: 'success',
										duration: 2000
									})
								} else {
									uni.showModal({
										title: '提示',
										showCancel: false,
										content: `${res.data.error_description}`
									})
								}
							}
						})
					} else if (this.distributeType == 'solo') {
						uni.request({
							url: `${this.$local}/api/shipInstructions/commandSendForBranch`,
							data: reqDTO,
							header: {
								'Content-Type': 'application/json', //自定义请求头信息
								'Authorization': `Bearer ${this.loginObj.access_token}`
							},
							method: 'PUT', //请求方式，必须为大写
							success: (res) => {
								if (res.data.status == 200) {
									this.itemList = []
									this.current = 1
									this.delValue = true
									this.loadSumOrder()
									this.getStatistics()
									this.checkList = []
									uni.showToast({
										title: `分指令下发成功`,
										icon: 'success',
										duration: 2000
									})
								} else {
									uni.showModal({
										title: '提示',
										showCancel: false,
										content: `${res.data.error_description}`
									})
								}
							}
						})
					} else if (this.distributeType == 'again') {
						let url = `/api/shipInstructions/commandReissuedForBranch`
						let lwpIdList3 = []
						lwpIdList3.push(this.fzzRow.lwpId)
						let reqDto3 = {
							"loadUnloadRequirements": this.askValue,
							"lwpIdList": lwpIdList3,
							"principalList": this.directorTrue,
							"vvyId": this.shipInfo.vvyId
						}
						uni.request({
							url: `${this.$local}${url}`,
							data: reqDto3,
							header: {
								'Content-Type': 'application/json', //自定义请求头信息
								'Authorization': `Bearer ${this.loginObj.access_token}`
							},
							method: 'PUT', //请求方式，必须为大写
							success: (res) => {
								console.log(res)
								if (res.data.status == 200) {
									this.itemList = []
									this.current = 1
									this.delValue = true
									this.loadOtherOrder()
									this.getStatistics()
									this.checkList = []
									uni.showToast({
										title: `重新发送指令成功`,
										icon: 'success',
										duration: 2000
									})
								} else {
									uni.showModal({
										title: '提示',
										showCancel: false,
										content: `${res.data.error_description}`
									})
								}
							}
						})
					}
					this.$refs.popup.close()
					this.directorValue = ""
				} else {
					uni.showToast({
						title: `负责人不能为空`,
						icon: 'error',
						duration: 2000
					})
				}
			},
			// 指令下发取消
			zlCancel() {
				this.delValue = true
				this.directorTrue = []
				this.$refs.popup.close()
			},
			// 点击暂停
			suspend(item) {
				let url = `/api/shipInstructions/commandPause?lwpId=${item.lwpId}`
				uni.request({
					url: `${this.$local}${url}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'PUT', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.current = 1
							this.itemList = []
							this.loadOtherOrder()
							this.getStatistics()
							uni.showToast({
								title: `暂停指令成功`,
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: `${res.data.error_description}`
							})
						}
					}
				})
			},
			// 获取装船要求
			initAsk() {
				uni.request({
					url: `${this.$local}/api/vesselVoyages/${this.shipInfo.vvyId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.askValue = res.data.data.loadUnloadRequirements
						}
					}
				})
			},
			// 修改装船要求
			getAsk() {
				let reqDto = {
					"loadUnloadRequirements": this.askValue,
					"spmId": this.shipInfo.spmId,
					"vvyId": this.shipInfo.vvyId,
					"vvyName": this.shipInfo.vvyName,
				}
				uni.request({
					url: `${this.$local}/api/vesselVoyages/${this.shipInfo.vvyId}`,
					data: reqDto,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'PUT', //请求方式，必须为大写
					success: (res) => {
						console.log(res)
						if (res.data.status == 200) {
							this.initAsk()
							uni.showToast({
								title: `设置成功`,
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: `${res.data.error_description}`
							})
						}
					}
				})
			},
			// 点击装船要求
			ask(type) {
				this.initAsk() // 获取装船要求
				this.$refs.popup2.open(type)
			},
			// 装船要求确认
			zcConfirm() {
				this.getAsk() // 修改装船要求
				this.$refs.popup2.close()
			},
			// 装船要求取消
			zcCancel() {
				this.$refs.popup2.close()
			},
			// 选择发送状态
			sendSelect(e) {
				this.sendText = e.text
				this.sendValue = e.vale
			},
			// 获取品牌
			getBrand() {
				uni.request({
					url: `${this.$local}/api/miniapp/queryBrand`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.brandList = res.data.data
						}
					}
				})
			},
			// 选择品牌
			brandSelect(e) {
				this.brandItem = e
				this.brdId = e.brdId
				this.brdName = e.brdName
			},
			// 获取港口
			getPot() {
				uni.request({
					url: `${this.$local}/api/miniapp/port`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.potList = res.data.data
						}
					}
				})
			},
			// 选择港口
			potSelect(e) {
				this.potItem = e
				this.potName = e.potCnname
				this.potId = e.potId
			},
			// 获取车型
			getBvm() {
				uni.request({
					url: `${this.$local}/api/miniapp/getVehicleModel`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.bvmList = res.data.data
						}
					}
				})
			},
			// 选择车型
			bvmSelect(e) {
				this.bvmItem = e
				this.bvmId = e.id
				this.bvmName = e.name
			},
			toDetails(id) {
				let obj = {
					id: id,
					tradeName: "W",
					shipInfo: this.shipInfo
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: '/pages/index/instructDetails?params=' + params
				})
			},
			// 分指令多选
			checkChange(e) {
				this.checkList = e.detail.value
			},
			// 配载图相关
			// 获取配载图港口及对应颜色
			getPotList() {
				uni.request({
					url: `${this.$local}/api/stowage/portList?vvyId=${this.shipInfo.vvyId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.pzPotList = res.data.data
							this.pzPotList.forEach(v => {
								this.$set(v, 'background', `background:${v.potColor}`)
							})
						}
					}
				})
			},
			// 获取配载图图中数据
			getImgInfo() {
				uni.request({
					url: `${this.$local}/api/stowage/flatSnapshot?vvyId=${this.shipInfo.vvyId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.imgInfo = res.data.data
							// 默认船舱画布高度最小为162 暂定10000  防止不画
							this.imgInfo.cabinInfoList.forEach(item => {
								this.$set(item, "isShow", true)
								item.maxHeight = 10000
							})
						}
					}
				})
			},
			// 折叠货物明细
			clickShow(item) {
				item.isShow = !item.isShow
			},
			// 获取货物明细
			getGoodsInfo() {
				uni.request({
					url: `${this.$local}/api/stowage/detail?vvyId=${this.shipInfo.vvyId}&spmId=${this.shipInfo.spmId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.goodsInfo = res.data.data
							console.log(this.goodsInfo)
							if (this.imgInfo.whetherNormal == "0") {
								this.goodsInfo.reverse()
							}
							this.goodsInfo.forEach((item, index) => {
								item.stowageList.forEach(ele => {
									let vertexPositionArr = ele.vertexPosition.split(',')
									let y = vertexPositionArr[1] * 35
									let bigNum = (vertexPositionArr[1] + ele.blockLength) * 35
									if (bigNum < 162) {
										bigNum = 162
									}
									this.$set(this.imgInfo.cabinInfoList, index, {
										...this.imgInfo.cabinInfoList[index],
										maxHeight: bigNum
									})
									this.$set(ele, "isShow", false)
								})
								// this.initCanvas(item, index)
							})
						}
					}
				})
			},
			// initCanvas(item, index) {
			// 	let canvas = 'mycanvas' + index
			// 	const ctx = uni.createCanvasContext(canvas, this)
			// 	let sum = item.cabinNo
			// 	item.stowageList.forEach(ele => {
			// 		// 宽为850 每个仓位为20  850/20
			// 		let widthDw = (42.5 / sum).toFixed(5)
			// 		let vertexPositionArr = ele.vertexPosition.split(',')
			// 		let x = vertexPositionArr[0] * widthDw
			// 		let y = vertexPositionArr[1] * 35
			// 		// let bigNum = (vertexPositionArr[1] + ele.blockLength) * 35
			// 		// console.log(this.imgInfo.cabinInfoList[index]);
			// 		// if (this.imgInfo.cabinInfoList[index].maxHeight < bigNum) {
			// 		// 	this.$set(this.imgInfo.cabinInfoList, index, {
			// 		// 		...this.imgInfo.cabinInfoList[index],
			// 		// 		maxHeight: bigNum
			// 		// 	})
			// 		// }
			// 		ctx.setFillStyle(ele.potColor);
			// 		// 每层加一个
			// 		ctx.fillRect(x, y, widthDw * ele.blockWidth - 3, ele.blockLength * 35 - 3);
			// 		ctx.fillStyle = '#fff'
			// 		ctx.font = 'bold 18px Arial'
			// 		ctx.setFontSize(20);
			// 		let stowageNo = ''
			// 		if (ele.stowageNo) {
			// 			stowageNo = ele.stowageNo
			// 		}
			// 		ctx.fillText(ele.amount + ' ' + ele.potName + ' ' + stowageNo, x + 10, y + 22, widthDw * ele
			// 			.blockWidth, ele.blockLength * 35)
			// 	})
			// 	ctx.draw();
			// },
			showItemDialog(item) {
				console.log(item);
			},
			getDynamicStyle(item, sum) {
				// 计算宽高\\
				// 重新想法子计算
				// 整体宽度为850  哪吒根据sum 每份sun为20 则假如有5个sun 则一份px值为 850/20/5  
				let widthDw = (42.5 / sum).toFixed(5) //每一份的px值
				let vertexPositionArr = item.vertexPosition.split(',')
				let y = vertexPositionArr[0] * widthDw
				let x = vertexPositionArr[1] * 35
				let potColor = "#000"
				if (item.potColor) {
					potColor = item.potColor
				}
				return {
					top: x + 'px',
					left: y + 'px',
					width: (widthDw * item.blockWidth - 3) + 'px',
					height: (item.blockLength * 35 - 3) + 'px',
					color: '#fff',
					background: potColor,
					overflown: 'hidden'
				};
			},
			// 场位图相关
			// 获取左侧堆场列表
			getDc() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/goods/manage/page?displayFlag=1&pamId=${this.portObj.portId}&vvyId=${this.shipInfo.vvyId}&size=100`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == "200") {
							this.dcList = res.data.data.records
							this.dcId = this.dcList[0].pymId
							this.dcName = this.dcList[0].pymName
							this.getQy()
						}
					}
				})
			},
			// 点击左侧列表
			clickLeft(item, index) {
				this.dcId = item.pymId
				this.dcName = item.pymName
				this.activeIndex = index
				this.getQy()
			},
			// 获取右侧区域数据
			getQy() {
				uni.request({
					url: `${this.$local}/api/yardGoods/monitor/region/statistics?vvyId=${this.shipInfo.vvyId}&pymId=${this.dcId}&displayFlag=1&brdId=${this.brdId}&bvmId=${this.bvmId}&potId=${this.potId}&mnfBl=${this.mnfBl}&size=1000`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							console.log(res)
							this.qyList = res.data.data.records
							this.qyList.forEach(v => {
								if (v.remainSeatAmout == null) {
									this.$set(v, "remainSeatAmout", 0)
								}
								if (v.stopGoodsAmout == null) {
									this.$set(v, "stopGoodsAmout", 0)
								}
								if (v.totalLaneAmout == null) {
									this.$set(v, "totalLaneAmout", 0)
								}
								if (v.totalSeatAmout == null) {
									this.$set(v, "totalSeatAmout", 0)
								}
								if (v.unparkGoodsAmout == null) {
									this.$set(v, "unparkGoodsAmout", 0)
								}
								if (v.useSeatAmout == null) {
									this.$set(v, "useSeatAmout", 0)
								}
								if (v.carStatisticsList != null) {
									v.carStatisticsList.forEach(e => {
										this.$set(e, "isShow", false)
									})
								}
							})
							console.log(this.qyList)
						}
					}
				})
			},
			// 点击车位查看详情
			clickCar(item) {
				item.isShow = !item.isShow
			},
			// 点击车道
			clickLine(item) {
				this.pyaObj = item
				this.isCwnum = 1;
			},
			// 子组件修改值
			modifyPlaceTabs(data) {
				this.isCwnum = data;
			},
			// 获取卸船进度数据
			getJobProgress() {
				uni.request({
					url: `${this.$local}/api/instruction/statistics/JobProgress?filterType=${this.filterType}&target=W_L&vvyId=${this.shipInfo.vvyId}`,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
                      this.jobProgressList = res.data.data.records
					}
				})
			},
			//点击卸船计划
			jobProgress(item,index,type) {
               this.jobActive = index
			   if(this.filterType == 'BRD_TYPE') {
				this.brdId = item.id
			    this.brdName = item.label
			   } else if(this.filterType == 'POT_TYPE'){
				this.potName = item.label
				this.potId = item.id
			   } else if(this.filterType == 'MNF_BL_TYPE') {
				this.mnfBl = item.id
			   }
			   this.itemList = []
			   if(type == 'zzl') {
				this.loadSumOrder()
			   } else if(type == 'fzl' || type =='bzz') {
                 this.loadOtherOrder()
			   }
			},
			// 点击品牌，提单，港口
			clickTab(type) {
				this.jobActive = null
				if(type == 'pp') {
					this.filterType = 'BRD_TYPE'
				} else if(type == 'td') {
					this.filterType = 'MNF_BL_TYPE'
				} else if(type == 'gk') {
					this.filterType = 'POT_TYPE'
				}
				this.getJobProgress()
			},
			// 输入框值发生改变
			inputChange(e) {
				clearTimeout(timerId)
				timerId = setTimeout(() => {
				 this.mnfBl = e
				 this.confirm()
				},1000)
			}
		}
	};
</script>

<style lang="less">
	.blue {
		color: #108ee9;
	}

	page {
		overflow: hidden;
	}

	.content2 {
		background-color: #F6F7F9;
		position: relative;
		overflow: hidden;

		/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%;
			height: calc(100vh - 134px);
		}

		.main {
			height: calc(100vh - 134px);
			overflow: hidden;
		}

		.main2 {
			overflow: auto;
			background-color: #fff;

		}

		.pageBox {
			margin-top: 20px;
		}

		/deep/.tab .tab-cont {
			padding: 0;
		}

		.form {
			background: #FAFAFA;
			border-top: 1px solid #EEEEEE;
			border-bottom: 1px solid #EEEEEE;

			.inputBox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 5px 10px;

				.leftInput {
					width: 400px;
				}

				/deep/.uni-easyinput {
					width: 400px;
				}

				/deep/.content-clear-icon {
					display: none;
				}

				/deep/.is-input-border {
					border-radius: 18.5px;
				}

				/deep/.uni-easyinput__placeholder-class {
					font-size: 14px;
					color: #666;
				}

				.rightInput {
					display: flex;

					p {
						margin-left: 10px;
						line-height: 40px;
					}
				}
			}

			.btn {
				height: 35px;
				line-height: 35px;
				margin-right: 10px;

			}
		}

		.form2 {
			border-bottom: none;
		}

		.refresh {
			width: 64px;
			height: 64px;
			box-shadow: 0 2px 12px 0 #CDD1D6;
			border-radius: 50%;
			text-align: center;
			background-color: #fff;
			position: absolute;
			bottom: 24px;
			right: 24px;
			z-index: 999999999999999999;
			display: flex;
			flex-direction: column;
			justify-content: center;

			p {
				letter-spacing: 2px;
				font-size: 14px;
				color: #0067CF;
			}

			image {
				width: 20px;
				height: 20px;
				margin: 0 auto;
			}
		}

		.buttonlist {
			padding: 10px;
			position: absolute;
			top: 5px;
			right: 0px;
			z-index: 999;

			.button {
				display: inline-block;
				height: 36px;
				line-height: 36px;
				text-align: center;
				margin-right: 10px;
				border-radius: 4px;
			}

			.button:first-child {
				border: 1px solid #0067CF;
				color: #0067CF;
				background: #fff;
			}

			.button:last-child {
				color: #fff;
				background: #0067CF;
			}
		}

		.buttonlist2 {
			.button {
				border: 1px solid #999 !important;
				color: #999 !important;
				background-color: #fff !important;
			}
		}

		.tablist {
			width: 175px;
			height: 60px;
			line-height: 60px;
			font-size: 21px;
			display: flex;
			justify-content: space-between;

			.tabs {
				width: 80px;
				height: 60px;
				border-bottom: 2rpx solid #ebebeb;
			}

			.active {
				color: #1890ff;
				border-bottom: 2rpx solid #1890ff;
			}

		}

		.tjList {
			width: 240px;
			height: calc(100vh - 68px - 66px - 51px);
			background: #EBEDF1;
			box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
			float: left;
			overflow: scroll;
			margin-right: 4px;
			.tab {
				width: 100%;
				height: 103px;
				display: flex;
				background: white;
				margin-bottom: 15px;
				justify-content: space-evenly;
				align-items: center;
				flex-wrap: wrap;
				.changBox {
					display: flex;
                    background: rgba(113, 142, 244, 0.1);
                    .change {
						padding: 7px 12px;
					}
					.ava {
						background: #1677FF;
						color: white;
					}
				}
			}
			.bottom {
				color: #1677FF;
				line-height: 44px;
				border-bottom: 1px solid #1677FF;
			}

			.active {
				border: 1px solid #0067CF;
			}

			.title {
				display: flex;
				justify-content: space-between;
				line-height: 21px;

				p {
					color: #23262E;
					font-size: 16px;
				}

				text {
					font-size: 14px;
					color: #0067CF;
					line-height: 21px;
				}
			}

			/deep/.progress-bar-title {
				margin: 0;
			}

			/deep/.bar {
				height: 5px;
				margin-top: 10px;
			}

			/deep/.progress-bar .bar-single {
				width: 100%;
				height: 100%;
			}

			/deep/.progress-bar .bar-double {
				height: 100%;
			}

			/deep/.progress-bar .bar-interval {
				width: 0;
			}

			/deep/.bar-text span {
				display: none;
			}

			.bottomInfo {
				display: flex;
				justify-content: space-between;
				margin-top: 9px;

				p {
					font-size: 12px;
					color: #999999;

					text {
						margin-left: 4px;
					}
				}

				p:nth-of-type(1) {
					text {
						color: #0067CF;
					}
				}

				p:nth-of-type(2) {
					text {
						color: #FC4F00;
					}
				}
			}

			.tjHead {
				width: 100%;
				height: 87px;
				background-color: #fff;
				border-radius: 4px;
				padding: 16px;
				position: relative;

				.imgBox {
					width: 15px;
					height: 15px;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}

			.tjInfo {
				width: calc(100% - 32px);
				background: #F7F7F7;
				box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
				margin: 16px;
				padding: 5px 16px;
				position: relative;
				border-radius: 4px;

				.imgBox {
					width: 15px;
					height: 15px;
					position: absolute;
					right: 0;
					bottom: 0;
				}
				.label {
				    height: 32px;
				    border-bottom: 0.5px solid #E1E5ED;
				}
				.bottomBox {
					display: flex;
					margin-top: 9px;
					p {
						color: #666666;
					}
					text {
						color: #252525;
					}
				}
			}
		}

		.itemBox {
			height: 535px;
			overflow: scroll;
			padding-bottom: 60px;
		}

		.itemList {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			padding: 0 12px;

			.item {
				padding-bottom: 25px;
			}

			.exp {
				width: 49%;
				background: #FFFFFF;
				border-radius: 8px;
				padding: 16px;
				padding-right: 0;
				position: relative;
				margin-top: 10px;
			}

			/deep/.waterfalls-flow {
				width: 100%;
			}

			/deep/.waterfalls-flow-column {
				margin-left: 2%;
			}

			.rowHead {
				/deep/uni-checkbox .uni-checkbox-input {
					width: 16px !important;
					height: 16px !important;
				}
			}

			.row {
				display: flex;
				padding: 5px 0px;

				.title {
					display: flex;
					font-size: 16px;
					color: #23262E;
					font-weight: bold;

					.titleImg {
						width: 18px;
						height: 18px;
						margin-right: 5px;
						margin-top: 2px;
					}
				}

				.schedule {
					padding: 5px 8px;
					background: #F7F7F7;
					margin-left: 8px;
					display: flex;

					.text {
						font-size: 12px;
						color: #999999;
					}

					.progressBox {
						width: 50px;
						margin-top: 5px;
						margin: 5px 8px;
					}
				}

				.planStatus {
					width: 68px;
					height: 26px;
					border-radius: 13px 0 0 13px;
					position: absolute;
					right: 0;
					top: 16px;
					text-align: center;
					line-height: 26px;

					.text {
						font-size: 16px;
						font-weight: bold;
					}
				}

				.planStatus0 {
					background: #F1F8FF;

					.text {
						color: #0067CF;
					}
				}

				.planStatus1 {
					background: #F7F7F7;

					.text {
						color: #666;
					}
				}

				.planStatus3 {
					background: #E8FFF7;

					.text {
						color: #04B578;
					}
				}

				.planStatus5 {
					background: #FFF5F0;

					.text {
						color: #fc4f00;
					}
				}


				.rowInfo {
					display: flex;
					flex-direction: column;
					font-size: 14px;
					width: 48%;
					margin-top: 10px;
					border-right: 1px solid #eee;
					gap: 12px;
					margin-left: 10px;

					text:first-child {
						color: #999999;
					}

					text:last-child {
						color: #23262E;
					}
				}

				.rowInfo:last-child {
					border: none;
				}
			}

			.xfBtn {
				display: flex;
				justify-content: flex-end;
				padding: 10px 0;
				border-top: 1px solid rgba(0, 0, 0, .1);

				.btn {
					padding: 8px 12px;
					text-align: center;
					color: #fff;
					background: #0067CF;
					border-radius: 4px;
					font-size: 12px;
					margin-right: 12px;
				}

				.stopbtn {
					border: 1px solid #FC4F00;
					color: #FC4F00;
					background-color: #fff;
				}
			}

			.expand {
				position: absolute;
				left: 47%;
				bottom: 8px;
				font-size: 12px;
				color: #23262E;
				background: #FFFFFF;
				text-align: center;
				line-height: 14px;
				border: 1px solid #EEEEEE;
				border-radius: 13px;
				padding: 6px;
			}

			.details {
				padding-right: 16px;
				margin-top: 8px;

				.itemDetails {
					background: rgba(236, 242, 249, .7);

					.detailsBox {
						padding: 16px;
						border-bottom: 1px dashed #D3DCE6;
					}

					.detailsBox:last-child {
						padding-bottom: 40px;
					}

					.title {
						width: 100%;
						display: flex;
						justify-content: space-between;

						text {
							font-size: 16px;
							color: #23262E;
							margin-top: 2px;
						}

						button {
							wdith: 50px;
							height: 25px;
							text-align: center;
							line-height: 25px;
							color: #0067CF;
							background: #FFFFFF;
							border: 1px solid #EEEEEE;
							border-radius: 4px;
							font-size: 14px;
							margin: 0;
						}
					}

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

						.cell {
							margin-right: 15px;
							margin-top: 10px;

							text:first-child {
								color: #999999;
							}

							text:last-child {
								color: #23262E;
							}
						}
					}
				}
			}
		}

		.pzPot {
			width: 100%;
			margin-bottom: 20px;
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;
			margin-top: 15px;

			.li {
				margin-right: 9px;
				display: flex;

				.name {
					font-size: 14px;
					color: rgba(0, 0, 0, 0.60);
					max-width: 126px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.color {
					width: 8px;
					height: 8px;
					margin: 6px
				}
			}

		}

		.imgTable {
			margin-top: 20px;
			padding: 0 20px 20px;

			.title {
				font-family: MicrosoftYaHei-Bold;
				font-size: 22px;
				color: #999999;
				font-weight: 700;
			}

			.nr {
				margin: 10px 0;
				font-size: 16px;

				.text {
					margin-right: 20px;
				}
			}
			.imgLi {
				display: flex;

				.maskBox {
					width: 1054px;
					height: 171px;
					margin: 0 auto;
					background: url('@/static/images/ship-shplit-left.svg');
					// background: url('@/static/images/ship-shplit-right.svg');
					background-repeat: no-repeat;
					background-size: contain;
					position: relative;

					.line {
						position: absolute;
						width: 850px;
						height: 90%;
						top: 10px;
						left: 58px;
						display: flex;
						overflow-y: auto;

						.testLine {
							flex: 1;
							border-left: 1px solid #999;
						}

						.testLine:first-child {
							border: none;
						}

						.mycanvas {
							position: absolute;
							top: 0;
							left: 0;
							width: 850px;
						}

						.myArrList {
							position: absolute;
							top: 0;
							left: 0;
							width: 850px;

							.arrItem {
								position: absolute;
							}
						}

					}

				}

				.heightBox {
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 24px;
				}

				.imgSize {
					width: 60px;
					position: absolute;
				}

				.leftTopImg {
					transform: rotate(90deg);
					top: -8px;
					left: -8px;
				}

				.imgSize2 {
					width: 130px;
					position: absolute;
				}

				.leftBotImg {
					bottom: -8px;
					left: -3px;
				}

				.topImg {
					top: -10px;
					left: 40%;
				}

				.botImg {
					transform: rotate(180deg);
					bottom: -10px;
					left: 40%;
				}
			}

			.tableHead {
				margin-top: 10px;
				height: 50px;
				line-height: 50px;
				display: flex;
				justify-content: space-between;
				padding: 0 12px;
				border: 1px solid #f2f2f2;

				text {
					font-size: 18px;
					color: #0D518B;
					font-weight: 700;
				}

				p {
					font-size: 15px;
					color: #1677FF;
				}
			}

			.tableBox {
				/deep/.uni-table-th {
					background-color: #f4f4f4;
					color: #0B266A;
					font-size: 15px;

					.uni-table-th-content {
						padding-left: 7.5px;
						border-left: 1px solid #C3CBD8;
					}
				}

				/deep/.uni-table-td {
					padding-left: 15px;
					font-size: 16px;
				}
			}
		}
        .numBox {
			width: 1102px;
			display: flex;
			// margin: 0 auto;
			justify-content: center;
		.num {
			  width:20%;
			  display: flex;
			  justify-content: center;
			 }
		  }

		// 场位图样式
		.cwMain {
			display: flex;
			width: 100%;
			height: calc(100vh - 66px - 68px - 47px);

			.cwLeft {
				width: 128px;
				height: 100%;
				background-color: #fff;
				overflow: scroll;

				.leftData {
					width: 116px;
					height: 42px;
					text-align: center;
					line-height: 42px;
					margin: 4px 6px;
				}

				.active {
					color: #fff;
					background-color: #0372E0;
					border-radius: 4px;
				}
			}

			.cwRight {
				width: calc(100% - 128px);
				height: 100%;
				overflow: scroll;
				padding-left: 18px;
				background: #FAFAFA;
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 16px;

				.rightBox {
					width: 33.3%;
					height: 214px;
					border: 1px solid #E1E5ED;

					/deep/.zb_tooltip_content {
						width: 100%;
					}

					.boxTop {
						width: 100%;
						height: 32px;
						border-bottom: 1px solid #E1E5ED;
						line-height: 32px;
						display: flex;
						justify-content: space-between;
						padding: 0 8px;
						background: #FAFAFA;

						p {
							font-size: 14px;
							color: #0D518B;
						}

						text {
							font-size: 14px;
							color: #1677FF;
						}
					}

					.boxContent {
						height: 180px;
						overflow: scroll;
						padding: 5px 8px;

						.notData {
							height: 170px;
							text-align: center;
							display: flex;
							flex-direction: column;
							justify-content: center;
							font-size: 14px;
							color: #666666;
						}

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

							p {
								margin-right: 10px;
								font-size: 12px;
								color: #666666;
							}
						}

						.boxJd {
							display: flex;
							margin-top: 10px;

							text {
								margin-left: 10px;
								font-size: 14px;
								color: #333333;
							}

							/deep/.progress-bar-title {
								margin: 0;
							}

							/deep/.bar {
								height: 8px;
								margin-top: 5px;
								width: 240px;
								border-radius: 50%;
							}

							/deep/.progress-bar .bar-single {
								width: 100%;
								height: 100%;
								border-radius: 8px;
								background-color: #e1e5ed !important;
							}

							/deep/.progress-bar .bar-double {
								height: 100%;
							}

							/deep/.progress-bar .bar-interval {
								width: 0;
							}

							/deep/.bar-text span {
								display: none;
							}
						}

						.carUl {
							width: 100%;
							padding-bottom: 70px;
							display: flex;
							flex-wrap: wrap;

							.carLi {
								width: calc(50% - 12px);
								height: 42px;
								margin: 8px 12px;
								margin-left: 0;
								background: #ffffff;
								border: 1px solid #e1e5ed;
								font-family: PingFangSC-Regular;
								font-size: 12px;
								line-height: 15px;
								padding: 4px 8px;

								.carTitle {
									font-size: 12px;
									color: #1677FF;
									margin-bottom: 4px;
								}

								.tipBox {
									width: 150px;
									height: 50px;
									overflow: scroll;

									.li {
										width: 100%;
										display: flex;
										justify-content: space-between;
										padding: 10px 0;
										border-bottom: 1px solid #999;
										font-size: 16px;

										p {
											color: #999;
										}

										text {
											color: #23262E;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.popupBox {
			width: 400px;
			background-color: #fff;
			border-radius: 8px;

			.popupTitle {
				font-size: 20px;
				font-weight: bold;
				border-bottom: 1px solid #ccc;
				padding: 15px 0;
			}

			.popupInfo {
				display: flex;
				margin-top: 20px;
				line-height: 35px;
				margin-left: 20px;

				/deep/.superwei-combox {
					border: none;
					padding: 0;
				}

				/deep/.componentW100 {
					width: 300px;
				}

				/deep/.uni-icons {
					margin-right: 12px;
				}
			}

			/deep/.uni-easyinput {
				margin-top: 20px;
				width: 460px;
				margin-left: 20px;
			}

			/deep/.uni-select__input-placeholder {
				text-align: left;
			}

			/deep/.uni-select__input-text {
				text-align: left;
			}
			/deep/.is-textarea {
				width: 77vw;
				height: 21vh;
			}
			/deep/.uni-easyinput__content-textarea {
				height: 20vh;
			}

			.popupBtn {
				margin-top: 20px;
				padding: 14px 0;
				display: flex;
				justify-content: center;

				.btnList {
					display: flex;

					.button {
						width: 125px;
						height: 36px;
						line-height: 36px;
						margin-left: 15px;
						border-radius: 4px;
					}

					.button:first-child {
						background-color: #fff;
						border: 1px solid #0067CF;
						color: #0067CF;
					}
				}

			}
		}

		.popupBox2 {
			width: 80vw;
			height: 38vh;
		}

		// 右侧抽屉筛选
		/deep/.uni-drawer__content {
			width: 300px;
		}

		.scroll-view {
			/* #ifndef APP-NVUE */
			width: 100%;
			height: 100%;
			/* #endif */
			flex: 1
		}

		// 处理抽屉内容滚动
		.scroll-view-box {
			flex: 1;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 0 16px 80px;

			.drawerTop {
				display: flex;
				margin-top: 24px;
				margin-bottom: 30px;

				image {
					width: 10px;
					height: 14px;
					margin-right: 10px;
					margin-top: 6px;
				}

				text {
					font-size: 20px;
					color: #23262E;
					font-weight: bold;
				}
			}

			.drawerTitle {
				font-size: 14px;
				color: #23262E;
				margin: 8px 0;
			}

			.bottomBtn {
				width: 100%;
				height: 60px;
				display: flex;
				justify-content: space-between;
				padding: 12px 16px;
				background: #FFFFFF;
				box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
				position: fixed;
				bottom: 0px;
				right: 0px;

				.btn {
					width: 116px;
					height: 36px;
					font-size: 16px;
					text-align: center;
					line-height: 36px;
					border-radius: 4px;
				}

				.czBtn {
					color: #0067CF;
					border: 1px solid #0067CF;
				}

				.qrBtn {
					color: #fff;
					background: #0067CF;
				}
			}
		}
	}
</style>