3162 lines
90 KiB
Vue
3162 lines
90 KiB
Vue
<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">
|
||
<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">
|
||
<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.bvdName}}</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">
|
||
<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,'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">
|
||
<checkbox-group @change="checkChange">
|
||
<view class="itemBox">
|
||
<view class="itemList">
|
||
<custom-waterfalls-flow :value="itemList" :column="2" :columnSpace="1">
|
||
<template v-slot:default="item">
|
||
<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.bvdName}}</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,'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">
|
||
<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.bvdName}}</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">
|
||
{{item.tierHeight}}m
|
||
</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}}</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() {
|
||
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}¤t=${this.current}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
// this.itemList.push(...res.data.data.records)
|
||
this.itemList = []
|
||
this.itemList = 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}¤t=${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) {
|
||
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()
|
||
if (res.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 == '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.$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: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
padding-right: 0;
|
||
position: relative;
|
||
}
|
||
|
||
/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: 95%;
|
||
top: 5px;
|
||
left: 168px;
|
||
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(180deg);
|
||
top: -15px;
|
||
right: -10px;
|
||
}
|
||
|
||
.imgSize2 {
|
||
width: 130px;
|
||
position: absolute;
|
||
}
|
||
|
||
.leftBotImg {
|
||
transform: rotate(-90deg);
|
||
bottom: -10px;
|
||
right: -15px;
|
||
}
|
||
|
||
.topImg {
|
||
top: -10px;
|
||
left: 50%;
|
||
}
|
||
|
||
.botImg {
|
||
transform: rotate(180deg);
|
||
bottom: -10px;
|
||
left: 50%;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 场位图样式
|
||
.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;
|
||
}
|
||
|
||
.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: 500px;
|
||
}
|
||
|
||
// 右侧抽屉筛选
|
||
/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> |