1683 lines
48 KiB
Vue
1683 lines
48 KiB
Vue
<template>
|
||
<view class="app">
|
||
<head-info :navIndex="4"></head-info>
|
||
<view class="container">
|
||
<custom-tabs type="c1" :value="tabsValue" @change="changeTabs">
|
||
<custom-tab-pane label="场位图" name="c1_1">
|
||
<view></view>
|
||
<view class="tab1" v-if="isCwnum == 0">
|
||
<view class="form">
|
||
<view class="inputBox">
|
||
<view class="leftInput">
|
||
<uni-easyinput suffixIcon="search" v-model="vinCode" 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>
|
||
<p>作业状态<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="padding: 0 8px;">
|
||
<view class="dataTitle" @click="isShowData = !isShowData">
|
||
<text>数据概况</text>
|
||
<p v-if="isShowData">
|
||
<uni-icons type="bottom" color="#1890FF" size="16"></uni-icons>
|
||
<text style="margin-left: 4px;">收起</text>
|
||
</p>
|
||
<p v-if="!isShowData">
|
||
<uni-icons type="top" color="#1890FF" size="16"></uni-icons>
|
||
<text style="margin-left: 4px;">展开</text>
|
||
</p>
|
||
</view>
|
||
<view class="dataBox" v-if="isShowData">
|
||
<view class="boxTop">
|
||
<view class="topContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop1.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>总车位数</text>
|
||
<p>{{surveyList.totalSeatAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="topContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop2.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>使用车位数</text>
|
||
<p>{{surveyList.useSeatAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="topContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop3.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>剩余车位数</text>
|
||
<p>{{surveyList.remainSeatAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="topContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop4.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>虚拟车位数</text>
|
||
<p>{{surveyList.virtuaSeatAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="topContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop5.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>可停放货物数量</text>
|
||
<p>{{surveyList.unparkGoodsAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="topContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop6.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>已停放货物数量</text>
|
||
<p>{{surveyList.stopGoodsAmout}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="boxBottom">
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop7.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>车辆总数(辆)</text>
|
||
<p>{{carList.carAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop8.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>外贸出口(辆)</text>
|
||
<p>{{carList.externalExportCarAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop9.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>外贸进口(辆)</text>
|
||
<p>{{carList.externalImportCarAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop10.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>内贸出口(辆)</text>
|
||
<p>{{carList.domesticExportCarAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop11.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>内贸进口(辆)</text>
|
||
<p>{{carList.domesticImportCarAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop12.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>备件总数(件)</text>
|
||
<p>{{partsList.partAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop13.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>外贸出口(件)</text>
|
||
<p>{{partsList.externalExportPartAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop14.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>外贸进口(件)</text>
|
||
<p>{{partsList.externalImportPartAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop15.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>内贸出口(件)</text>
|
||
<p>{{partsList.domesticExportPartAmout}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="bottomContent">
|
||
<view class="contentLeft">
|
||
<image src="../../static/images/cwTop16.png" mode=""></image>
|
||
</view>
|
||
<view class="contentRight">
|
||
<text>内贸进口(件)</text>
|
||
<p>{{partsList.domesticImportPartAmout}}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sortBox">
|
||
<view class="title">场位信息</view>
|
||
<view class="combox">
|
||
<superwei-combox :candidates="sortList" :isJSON="true" keyName="text" placeholder="排序选择"
|
||
v-model="sortName" @select="sortSelect"></superwei-combox>
|
||
</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,gl:item.existFlag == 1}">
|
||
<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.useSeatAmount}}/{{item.totalSeatAmount}}）</p>
|
||
<text @click="clickLine(item)">车道</text>
|
||
</view>
|
||
<view class="boxContent">
|
||
<view class="empty" v-show="item.emptyLaneList.length">
|
||
<view class="dataList" v-for="(ite,inde) in item.emptyLaneList" :key="inde">
|
||
{{ ite }}道 （空道）
|
||
</view>
|
||
</view>
|
||
<view class="data" v-show="item.goodsInfoList.length">
|
||
<view class="dataList" v-for="(ite,inde) in item.goodsInfoList" :key="inde">
|
||
<view class="goOut" v-show="ite.importExportType == 'E'">出</view>
|
||
<view class="advance" v-show="ite.importExportType == 'I'">进</view>
|
||
<view class="spmName">{{ ite.spmName }}/{{ ite.vvyName }}</view>
|
||
<view class="brdName">{{ ite.brdName }}</view>
|
||
<view style="margin-left: 16px;">{{ ite.amount }}辆</view>
|
||
<view class="lane">{{ ite.lane }}道</view>
|
||
</view>
|
||
</view>
|
||
<!-- <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="top-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}}辆</text>
|
||
</view>
|
||
</zb-tooltip>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-else>
|
||
<place @modifyPlaceTabs="modifyPlaceTabs" :vvyId="vvyId" :pyaObj="pyaObj" :brdId="brdId"
|
||
:potId="potId" :vinCode="vinCode" :workId="workId" :dcId="dcId"></place>
|
||
</template>
|
||
</custom-tab-pane>
|
||
<custom-tab-pane :label="tabsTitle1" name="c1_2">
|
||
<view></view>
|
||
<view class="tabs2">
|
||
<view class="form">
|
||
<view class="inputBox">
|
||
<view class="leftInput">
|
||
<uni-easyinput suffixIcon="search" v-model="vinCode" placeholder="车架号/备件号"
|
||
@iconClick="search"></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>
|
||
<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="itemList">
|
||
<template v-if="goodsList.length > 0">
|
||
<view class="item" v-for="(item,index) in goodsList" :key="index">
|
||
<view class="headTop">
|
||
<view class="leftHead">
|
||
<image src="../../static/images/zlIcon.png" mode=""></image>
|
||
<text>车架号/条形码：{{item.vinCode}}</text>
|
||
</view>
|
||
<view class="rightHead">
|
||
<view class="btn">
|
||
<image src="../../static/images/cwCs.png"></image>
|
||
<text>残损</text>
|
||
</view>
|
||
<view class="btn">
|
||
<image src="../../static/images/cwJl.png"></image>
|
||
<text>作业记录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
港区：<text>{{item.pamName == null ? "-" : item.pamName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
提单号：<text>{{item.mnfBl == null ? "-" : item.mnfBl}}</text>
|
||
</view>
|
||
<view class="col">
|
||
收车状态：<text>{{item.godStatus == null ? "-" : item.godStatus}}</text>
|
||
</view>
|
||
<view class="col">
|
||
作业时间：<text>{{item.updateTime == null ? "-" : item.updateTime}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
船名：<text>{{item.vslCnname == null ? "-" : item.vslCnname}}</text>
|
||
</view>
|
||
<view class="col">
|
||
作业状态：<text>{{item.workStatus == null ? "-" : item.workStatus}}</text>
|
||
</view>
|
||
<view class="col">
|
||
港口：<text>{{item.potName == null ? "-" : item.potName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
作业人员：<text>{{item.updateUser == null ? "-" : item.updateUser}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
航次：<text>{{item.vvyName == null ? "-" : item.vvyName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
堆场名称：<text>{{item.yardName == null ? "-" : item.yardName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
品牌：<text>{{item.brdName == null ? "-" : item.brdName}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
贸易类型：<text>{{item.tradeType == null ? "-" : item.tradeType}}</text>
|
||
</view>
|
||
<view class="col">
|
||
场位：<text>{{item.posYard == null ? "-" : item.posYard}}</text>
|
||
</view>
|
||
<view class="col">
|
||
型号：<text>{{item.model == null ? "-" : item.model}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
进出口：<text>{{item.importExportType == null ? "-" : item.importExportType}}</text>
|
||
</view>
|
||
<view class="col">
|
||
车型：<text>{{item.bvmName == null ? "-" : item.bvmName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
车型明细：<text>{{item.bvdName == null ? "-" : item.bvdName}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||
</view>
|
||
<view class="pageBox" v-if="goodsList.length > 0">
|
||
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
||
@change="changePage" />
|
||
</view>
|
||
</view>
|
||
</custom-tab-pane>
|
||
<custom-tab-pane :label="tabsTitle2" name="c1_3">
|
||
<view></view>
|
||
<view class="tabs2">
|
||
<view class="form">
|
||
<view class="inputBox">
|
||
<view class="leftInput">
|
||
<uni-easyinput suffixIcon="search" v-model="vinCode" placeholder="车架号/备件号"
|
||
@iconClick="search"></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>
|
||
<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="itemList">
|
||
<template v-if="ycGoodsList.length > 0">
|
||
<view class="item" v-for="(item,index) in ycGoodsList" :key="index">
|
||
<view class="headTop">
|
||
<view class="leftHead">
|
||
<image src="../../static/images/zlIcon.png" mode=""></image>
|
||
<text>车架号/条形码：{{item.vinCode}}</text>
|
||
</view>
|
||
<view class="rightHead">
|
||
<view class="btn">
|
||
<image src="../../static/images/cwCs.png"></image>
|
||
<text>残损</text>
|
||
</view>
|
||
<view class="btn">
|
||
<image src="../../static/images/cwJl.png"></image>
|
||
<text>作业记录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
港区：<text>{{item.pamName == null ? "-" : item.pamName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
提单号：<text>{{item.mnfBl == null ? "-" : item.mnfBl}}</text>
|
||
</view>
|
||
<view class="col">
|
||
收车状态：<text>{{item.godStatus == null ? "-" : item.godStatus}}</text>
|
||
</view>
|
||
<view class="col">
|
||
作业时间：<text>{{item.updateTime == null ? "-" : item.updateTime}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
船名：<text>{{item.vslCnname == null ? "-" : item.vslCnname}}</text>
|
||
</view>
|
||
<view class="col">
|
||
作业状态：<text>{{item.workStatus == null ? "-" : item.workStatus}}</text>
|
||
</view>
|
||
<view class="col">
|
||
港口：<text>{{item.potName == null ? "-" : item.potName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
作业人员：<text>{{item.updateUser == null ? "-" : item.updateUser}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
航次：<text>{{item.vvyName == null ? "-" : item.vvyName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
堆场名称：<text>{{item.yardName == null ? "-" : item.yardName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
品牌：<text>{{item.brdName == null ? "-" : item.brdName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
备注：<text>{{item.remark == null ? "-" : item.remark}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
贸易类型：<text>{{item.tradeType == null ? "-" : item.tradeType}}</text>
|
||
</view>
|
||
<view class="col">
|
||
场位：<text>{{item.posYard == null ? "-" : item.posYard}}</text>
|
||
</view>
|
||
<view class="col">
|
||
型号：<text>{{item.model == null ? "-" : item.model}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
进出口：<text>{{item.importExportType == null ? "-" : item.importExportType}}</text>
|
||
</view>
|
||
<view class="col">
|
||
车型：<text>{{item.bvmName == null ? "-" : item.bvmName}}</text>
|
||
</view>
|
||
<view class="col">
|
||
车型明细：<text>{{item.bvdName == null ? "-" : item.bvdName}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||
</view>
|
||
<view class="pageBox" v-if="ycGoodsList.length > 0">
|
||
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
||
@change="changePage" />
|
||
</view>
|
||
</view>
|
||
</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 || tabsValue == 2">
|
||
<view class="drawerTitle">
|
||
堆场
|
||
</view>
|
||
<superwei-combox :candidates="yardList" :isJSON="true" keyName="pymName" placeholder="堆场"
|
||
v-model="yardName" @select="yardSelect"></superwei-combox>
|
||
<view class="drawerTitle">
|
||
进出口
|
||
</view>
|
||
<superwei-combox :candidates="jckList" :isJSON="true" keyName="text" placeholder="进出口"
|
||
v-model="jckName" @select="jckSelect"></superwei-combox>
|
||
<view class="drawerTitle">
|
||
贸易类型
|
||
</view>
|
||
<superwei-combox :candidates="myList" :isJSON="true" keyName="text" placeholder="贸易类型"
|
||
v-model="myName" @select="mySelect"></superwei-combox>
|
||
</template>
|
||
<view class="drawerTitle">
|
||
船名
|
||
</view>
|
||
<superwei-combox :candidates="shipList" :isJSON="true" keyName="vslCnname" placeholder="船名"
|
||
v-model="shipName" @select="shipSelect" @input="shipInput"></superwei-combox>
|
||
<view class="drawerTitle">
|
||
航次
|
||
</view>
|
||
<superwei-combox :candidates="vvyList" :isJSON="true" keyName="vvyName" placeholder="航次"
|
||
v-model="vvyName" @input="vvyInput" @select="vvySelect"></superwei-combox>
|
||
<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="potList" :isJSON="true" keyName="potCnname" placeholder="港口"
|
||
v-model="potName" @select="potSelect"></superwei-combox>
|
||
<view class="drawerTitle">
|
||
作业状态
|
||
</view>
|
||
<superwei-combox :candidates="workList" :isJSON="true" keyName="ptrDesc" placeholder="作业状态"
|
||
v-model="workName" @select="workSelect"></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>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import HeadInfo from '@/components/head-info/head-info';
|
||
import place from './place.vue';
|
||
let timerId
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabsValue: 0,
|
||
tabsTitle1: "货物列表",
|
||
tabsTitle2: "场位异常货物列表",
|
||
loginObj: {},
|
||
portObj: {},
|
||
// 查询条件
|
||
// 车架号/备件号
|
||
vinCode: "",
|
||
// 货物列表下拉堆场
|
||
yardId: "",
|
||
yardName: "",
|
||
yardList: [],
|
||
// 进出口
|
||
jckId: "",
|
||
jckName: "",
|
||
jckList: [{
|
||
id: "I",
|
||
text: "进口"
|
||
},
|
||
{
|
||
id: "E",
|
||
text: "出口"
|
||
}
|
||
],
|
||
// 贸易类型
|
||
myId: "",
|
||
myName: "",
|
||
myList: [{
|
||
id: "W",
|
||
text: "外贸"
|
||
},
|
||
{
|
||
id: "N",
|
||
text: "内贸"
|
||
}
|
||
],
|
||
// 航次
|
||
vvyId: "",
|
||
vvyName: "",
|
||
vvyList: [],
|
||
// 航次下拉出来船ID
|
||
vvySpmId: "",
|
||
// 船名
|
||
shipId: "",
|
||
shipName: "",
|
||
shipList: [],
|
||
// 品牌
|
||
brdId: "",
|
||
brdName: "",
|
||
brandList: [],
|
||
// 港口
|
||
potId: "",
|
||
potName: "",
|
||
potList: [],
|
||
// 作业状态
|
||
workId: "",
|
||
workName: "",
|
||
workList: [],
|
||
|
||
// 场位概况
|
||
surveyList: {},
|
||
carTabsValue: 0,
|
||
// 车辆
|
||
carList: {},
|
||
// 备件
|
||
partsList: {},
|
||
// 是否展开
|
||
isShowData: false,
|
||
// 选中左侧堆场
|
||
activeIndex: 0,
|
||
// 场位图左侧堆场
|
||
dcId: "",
|
||
dcName: "",
|
||
dcList: [],
|
||
// 区域
|
||
pyaObj: "",
|
||
qyList: [],
|
||
// 场位的状态 是否进入车道
|
||
isCwnum: 0,
|
||
|
||
// 货物列表数据
|
||
goodsList: [],
|
||
|
||
// 场位异常货物列表
|
||
ycGoodsList: [],
|
||
|
||
// 分页
|
||
total: 0,
|
||
pageSize: 10,
|
||
current: 1,
|
||
sortList:[
|
||
{
|
||
id: "ASC",
|
||
text: "正序排列"
|
||
},
|
||
{
|
||
id: "DESC",
|
||
text: "倒序排列"
|
||
},
|
||
{
|
||
id: "DEFAULT",
|
||
text: "默认"
|
||
},
|
||
],
|
||
sortName:'默认',
|
||
trendPlansOrderRule:'DEFAULT'
|
||
}
|
||
},
|
||
onBackPress(options) {
|
||
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
||
if (options.from == 'backbutton') {
|
||
return true;
|
||
} else if (options.from == 'navigateBack') {
|
||
return false;
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loginObj = uni.getStorageSync('loginObj')
|
||
this.portObj = uni.getStorageSync('portObj')
|
||
this.getShip("")
|
||
this.getVvy("")
|
||
this.getBrand()
|
||
this.getPot()
|
||
this.getWork()
|
||
this.getDc()
|
||
this.getYard()
|
||
this.getGoodsInfo()
|
||
this.getYcGoodsInfo()
|
||
},
|
||
components: {
|
||
HeadInfo,
|
||
place
|
||
},
|
||
methods: {
|
||
// tabs切换
|
||
changeTabs(e) {
|
||
this.tabsValue = e.value
|
||
this.yardId = ""
|
||
this.yardName = ""
|
||
this.vinCode = ""
|
||
this.vvyId = ""
|
||
this.vvyName = ""
|
||
this.vvySpmId = ""
|
||
this.shipId = ""
|
||
this.shipName = ""
|
||
this.brdId = ""
|
||
this.brdName = ""
|
||
this.potId = ""
|
||
this.potName = ""
|
||
this.workId = ""
|
||
this.workName = ""
|
||
this.jckId = ""
|
||
this.jckName = ""
|
||
this.myId = ""
|
||
this.myName = ""
|
||
this.activeIndex = 0
|
||
this.current = 1
|
||
if (this.tabsValue == 0) {
|
||
this.getDc()
|
||
this.getGoodsInfo()
|
||
this.getYcGoodsInfo()
|
||
} else if (this.tabsValue == 1) {
|
||
this.getGoodsInfo()
|
||
} else if (this.tabsValue == 2) {
|
||
this.getYcGoodsInfo()
|
||
}
|
||
},
|
||
// 查询条件
|
||
// 点击筛选
|
||
screen() {
|
||
this.$refs.showRight.open();
|
||
},
|
||
// 返回
|
||
back() {
|
||
this.$refs.showRight.close();
|
||
},
|
||
// 重置
|
||
reset() {
|
||
// 船名
|
||
this.shipId = ""
|
||
this.shipName = ""
|
||
// 航次
|
||
this.vvyId = ""
|
||
this.vvyName = ""
|
||
this.vvySpmId = ""
|
||
// 品牌
|
||
this.brdId = ""
|
||
this.brdName = ""
|
||
// 港口
|
||
this.potId = ""
|
||
this.potName = ""
|
||
// 作业状态
|
||
this.workId = ""
|
||
this.workName = ""
|
||
// 堆场
|
||
this.yardId = ""
|
||
this.yardName = ""
|
||
// 进出口
|
||
this.jckId = ""
|
||
this.jckName = ""
|
||
// 贸易类型
|
||
this.myId = ""
|
||
this.myName = ""
|
||
},
|
||
// 筛选确认
|
||
confirm() {
|
||
this.itemList = []
|
||
this.current = 1
|
||
if (this.tabsValue == 0) {
|
||
this.getQy()
|
||
this.getDc()
|
||
} else if (this.tabsValue == 1) {
|
||
this.getGoodsInfo()
|
||
} else if (this.tabsValue == 2) {
|
||
this.getYcGoodsInfo()
|
||
}
|
||
this.$refs.showRight.close();
|
||
},
|
||
// 查询框
|
||
search() {
|
||
if (this.tabsValue == 0) {
|
||
this.getQy()
|
||
} else if (this.tabsValue == 1) {
|
||
this.getGoodsInfo()
|
||
} else if (this.tabsValue == 2) {
|
||
this.getYcGoodsInfo()
|
||
}
|
||
},
|
||
// 获取船名
|
||
getShip(query) {
|
||
uni.request({
|
||
url: `${this.$local}/api/shipManage/queryLikeShipManage?query=${query}&spmId=${this.vvySpmId}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.data.status == "200") {
|
||
this.shipList = res.data.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 船名模糊查询
|
||
shipInput(e) {
|
||
if(e) {
|
||
this.getShip(e)
|
||
} else {
|
||
this.vvySpmId = ''
|
||
this.getShip('')
|
||
}
|
||
},
|
||
// 选择船名
|
||
shipSelect(e) {
|
||
this.shipId = e.spmId
|
||
this.shipName = e.vslCnname
|
||
this.getVvy("")
|
||
},
|
||
// 获取航次
|
||
getVvy(key) {
|
||
uni.request({
|
||
url: `${this.$local}/api/shipInstructions/queryByKey?key=${key}&spmId=${this.shipId}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.data.status == "200") {
|
||
this.vvyList = res.data.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 航次模糊查询
|
||
vvyInput(e) {
|
||
this.getVvy(e)
|
||
},
|
||
// 选择航次
|
||
vvySelect(e) {
|
||
this.vvyId = e.vvyId
|
||
this.vvyName = e.vvyName
|
||
this.vvySpmId = e.spmId
|
||
this.getShip("")
|
||
},
|
||
// 获取品牌
|
||
getBrand() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/goods/brand`,
|
||
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.brdId = e.brdId
|
||
this.brdName = e.brdName
|
||
},
|
||
// 获取港口
|
||
getPot() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/goods/pot`,
|
||
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.potId = e.potId
|
||
this.potName = e.potCnname
|
||
},
|
||
// 获取作业状态
|
||
getWork() {
|
||
uni.request({
|
||
url: `${this.$local}/api/miniapp/typeRef/domain/WORK_STATUS`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.data.status == "200") {
|
||
this.workList = res.data.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 选择作业状态
|
||
workSelect(e) {
|
||
this.workId = e.ptrCode
|
||
this.workName = e.ptrDesc
|
||
},
|
||
// 获取堆场数据
|
||
getYard() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yard/sel/query/yard?pamId=${this.portObj.portId}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.data.status == "200") {
|
||
this.yardList = res.data.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 选择堆场
|
||
yardSelect(e) {
|
||
this.yardId = e.pymId
|
||
this.yardName = e.pymName
|
||
},
|
||
// 选择进出口
|
||
jckSelect(e) {
|
||
this.jckId = e.id
|
||
this.jckName = e.text
|
||
},
|
||
// 选择贸易类型
|
||
mySelect(e) {
|
||
this.myId = e.id
|
||
this.myName = e.text
|
||
},
|
||
// 场位图
|
||
// 获取场位概况
|
||
getSurvey() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/v2/situation?pamId=${this.portObj.portId}&pymId=${this.dcId}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.statusCode == 200) {
|
||
this.surveyList = res.data.data
|
||
if (this.surveyList.carSituation != null) {
|
||
this.carList = this.surveyList.carSituation
|
||
}
|
||
if (this.surveyList.partSituation != null) {
|
||
this.partsList = this.surveyList.partSituation
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取左侧堆场列表
|
||
getDc() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/v2/yard/list?displayFlag=0&pamId=${this.portObj.portId}&vvyId=${this.vvyId}&brdId=${this.brdId}&potId=${this.potId}&spmId=${this.shipId}&vinCode=${this.vinCode}&workStatuss=${this.workId}&size=100`,
|
||
// url: `${this.$local}/api/yardGoods/monitor/goods/manage/page?displayFlag=0&pamId=${this.portObj.portId}&vvyId=${this.vvyId}&brdId=${this.brdId}&potId=${this.potId}&spmId=${this.shipId}&vinCode=${this.vinCode}&workStatuss=${this.workId}&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
|
||
this.dcId = this.dcList[0].pymId
|
||
this.dcName = this.dcList[0].pymName
|
||
this.getSurvey()
|
||
this.getQy()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击左侧列表
|
||
clickLeft(item, index) {
|
||
this.dcId = item.pymId
|
||
this.dcName = item.pymName
|
||
this.activeIndex = index
|
||
this.getSurvey()
|
||
this.getQy()
|
||
},
|
||
// 获取右侧区域数据
|
||
getQy() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/v2/region/list?spmId=${this.shipId}&vvyId=${this.vvyId}&pymId=${this.dcId}&pamId=${this.portObj.portId}&displayFlag=0&brdId=${this.brdId}&potId=${this.potId}&vinCode=${this.vinCode}&workStatuss=${this.workId}&size=1000&trendPlansOrderRule=${this.trendPlansOrderRule}`,
|
||
// url: `${this.$local}/api/yardGoods/monitor/region/statistics?spmId=${this.shipId}&vvyId=${this.vvyId}&pymId=${this.dcId}&displayFlag=0&brdId=${this.brdId}&potId=${this.potId}&vinCode=${this.vinCode}&workStatuss=${this.workId}&size=1000`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.statusCode == 200) {
|
||
this.qyList = res.data.data
|
||
// console.log(this.qyList);
|
||
this.qyList.forEach(v => {
|
||
if (v.totalSeatAmount == null) {
|
||
this.$set(v, "totalSeatAmount", 0)
|
||
}
|
||
if (v.useSeatAmount == null) {
|
||
this.$set(v, "useSeatAmount", 0)
|
||
}
|
||
if (v.carStatisticsList != null) {
|
||
v.carStatisticsList.forEach(e => {
|
||
this.$set(e, "isShow", false)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击车位查看详情
|
||
clickCar(item) {
|
||
item.isShow = !item.isShow
|
||
},
|
||
// 点击车道
|
||
clickLine(item) {
|
||
this.pyaObj = item
|
||
this.isCwnum = 1;
|
||
},
|
||
// 子组件修改值
|
||
modifyPlaceTabs(data) {
|
||
this.isCwnum = data;
|
||
},
|
||
// 货物列表
|
||
// 获取货物列表货物信息数据
|
||
getGoodsInfo() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/goods/list?brdId=${this.brdId}&pamId=${this.portObj.portId}&potId=${this.potId}&pymId=${this.yardId}&spmId=${this.shipId}&vinCode=${this.vinCode}&vvyId=${this.vvyId}&workStatuss=${this.workId}&importExportType=${this.jckId}&tradeType=${this.myId}¤t=${this.current}&size=${this.pageSize}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.data.status == "200") {
|
||
this.goodsList = res.data.data.records
|
||
this.total = res.data.data.total
|
||
this.tabsTitle1 = `货物列表(${this.total})`
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取场位异常货物列表
|
||
getYcGoodsInfo() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/error/list?brdId=${this.brdId}&pamId=${this.portObj.portId}&potId=${this.potId}&pymId=${this.yardId}&spmId=${this.shipId}&vinCode=${this.vinCode}&vvyId=${this.vvyId}&workStatuss=${this.workId}&importExportType=${this.jckId}&tradeType=${this.myId}¤t=${this.current}&size=${this.pageSize}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.data.status == "200") {
|
||
this.ycGoodsList = res.data.data.records
|
||
this.total = res.data.data.total
|
||
this.tabsTitle2 = `场位异常货物列表(${this.total})`
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击分页
|
||
changePage(e) {
|
||
this.current = e.current;
|
||
if (this.tabsValue == 1) {
|
||
this.getGoodsInfo()
|
||
} else if (this.tabsValue == 2) {
|
||
this.getYcGoodsInfo()
|
||
}
|
||
},
|
||
// 排序切换
|
||
sortSelect(e) {
|
||
this.trendPlansOrderRule = e.id
|
||
this.getQy()
|
||
},
|
||
// 输入框值发生改变
|
||
inputChange(e) {
|
||
clearTimeout(timerId)
|
||
timerId = setTimeout(() => {
|
||
this.vinCode = e
|
||
this.confirm()
|
||
},1000)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
height: 100vh;
|
||
margin-top: 68px;
|
||
background-color: #fff;
|
||
|
||
/deep/.tab .tab-bar {
|
||
height: 66px;
|
||
line-height: 66px;
|
||
font-family: PingFangSC-Semibold;
|
||
font-weight: 600;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 68px;
|
||
z-index: 996;
|
||
}
|
||
|
||
/deep/.tab .tab-bar-item {
|
||
font-size: 18px;
|
||
height: 66px;
|
||
line-height: 66px;
|
||
}
|
||
|
||
/deep/.tab .tab-bar-item .active-line {
|
||
height: 4px;
|
||
width: calc(100% - 40px);
|
||
padding: 0 10px;
|
||
}
|
||
|
||
/deep/.tab .tab-cont {
|
||
padding: 0;
|
||
}
|
||
|
||
/deep/.tab-pane {
|
||
width: 100%;
|
||
}
|
||
|
||
.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: 200px;
|
||
}
|
||
|
||
/deep/.uni-easyinput {
|
||
width: 200px;
|
||
}
|
||
|
||
/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;
|
||
|
||
}
|
||
}
|
||
|
||
.tab1 {
|
||
margin-top: 66px;
|
||
|
||
.dataTitle {
|
||
margin-top: 14px;
|
||
width: 100%;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
font-size: 14px;
|
||
color: #1890FF;
|
||
padding: 0 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: #FFFFFF;
|
||
border: 1px solid #E1E5ED;
|
||
|
||
text:first-child {
|
||
font-size: 16px;
|
||
color: #0D518B;
|
||
}
|
||
}
|
||
|
||
.dataBox {
|
||
width: 100%;
|
||
padding: 0 8px;
|
||
margin-top: 8px;
|
||
|
||
.boxTop {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.topContent {
|
||
width: calc(100% / 6 - 8px);
|
||
height: 70px;
|
||
background-color: #fff;
|
||
box-shadow: 0 4px 14px 0 rgba(228, 228, 228, 0.50);
|
||
border-radius: 4px;
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.boxBottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
margin-top: 16px;
|
||
|
||
.bottomContent {
|
||
width: calc(100% / 5 - 16px);
|
||
height: 70px;
|
||
background-color: #fff;
|
||
box-shadow: 0 4px 14px 0 rgba(228, 228, 228, 0.50);
|
||
border-radius: 4px;
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.contentLeft {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin-right: 8px;
|
||
margin-left: 14px;
|
||
|
||
image {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
}
|
||
|
||
.contentRight {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
text {
|
||
font-size: 13px;
|
||
color: #666666;
|
||
}
|
||
|
||
p {
|
||
margin-top: 4px;
|
||
ont-family: D-DINExp;
|
||
font-size: 24px;
|
||
color: #252525;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cwMain {
|
||
display: flex;
|
||
width: 100%;
|
||
height: calc(100vh - 66px - 68px - 47px);
|
||
margin-top: 10px;
|
||
|
||
.cwLeft {
|
||
width: 128px;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
overflow: scroll;
|
||
|
||
.leftData {
|
||
width: 116px;
|
||
height: 42px;
|
||
text-align: center;
|
||
line-height: 42px;
|
||
margin: 4px 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.gl {
|
||
box-shadow: 5px 5px 20px 1px #0371e024 inset;
|
||
border: 1px solid rgba(3, 114, 224);
|
||
}
|
||
|
||
.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;
|
||
.empty {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 8px 6px;
|
||
background: #E1E5ED;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.dataList {
|
||
|
||
}
|
||
}
|
||
.data {
|
||
font-size: 12px;
|
||
.dataList {
|
||
width: 100%;
|
||
padding: 8px 9px;
|
||
background: white;
|
||
margin-top: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
.goOut {
|
||
color: #FF6B3B;
|
||
border: 1px solid #FF6B3B;
|
||
border-radius: 50%;
|
||
padding: 3px;
|
||
font-size: 8px;
|
||
}
|
||
.advance {
|
||
color: #2CC68B;
|
||
border: 1px solid #2CC68B;
|
||
border-radius: 50%;
|
||
padding: 3px;
|
||
font-size: 8px;
|
||
}
|
||
.spmName {
|
||
margin-left: 10px;
|
||
width:77px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.brdName {
|
||
margin-left: 12px;
|
||
width:50px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.lane {
|
||
position: absolute;
|
||
right: 9px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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%;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs2 {
|
||
background-color: #f5f6fa;
|
||
margin-top: 66px;
|
||
padding-bottom: 20px;
|
||
|
||
.itemList {
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.item {
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 14px;
|
||
color: #23262E;
|
||
margin-bottom: 16px;
|
||
|
||
.headTop {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
.leftHead {
|
||
font-size: 16px;
|
||
color: #23262E;
|
||
font-weight: bold;
|
||
display: flex;
|
||
|
||
image {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 7px;
|
||
}
|
||
}
|
||
|
||
.rightHead {
|
||
font-size: 16px;
|
||
color: #1677FF;
|
||
display: flex;
|
||
|
||
.btn {
|
||
display: flex;
|
||
margin-left: 16px;
|
||
|
||
image {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 8px;
|
||
margin-top: 3px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.row {
|
||
width: 19%;
|
||
flex-direction: column;
|
||
display: flex;
|
||
}
|
||
|
||
.col {
|
||
margin-bottom: 10px;
|
||
color: #999999;
|
||
|
||
text {
|
||
color: #23262E;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// 右侧抽屉筛选
|
||
/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;
|
||
}
|
||
}
|
||
}
|
||
.sortBox {
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0px 8px;
|
||
margin-top: 10px;
|
||
position: relative;
|
||
.title {
|
||
margin-left: 17px;
|
||
font-size: 16px;
|
||
color: #0D518B;
|
||
}
|
||
.combox {
|
||
position: absolute;
|
||
right: 8px;
|
||
}
|
||
}
|
||
}
|
||
</style> |