pad-app/pages/monitor/index.vue

1683 lines
48 KiB
Vue
Raw Normal View History

2023-07-06 17:08:59 +08:00
<template>
<view class="app">
2023-08-18 17:28:11 +08:00
<head-info :navIndex="4"></head-info>
2023-07-06 17:08:59 +08:00
<view class="container">
2023-12-08 17:42:10 +08:00
<custom-tabs type="c1" :value="tabsValue" @change="changeTabs">
<custom-tab-pane label="场位图" name="c1_1">
<view></view>
2023-12-08 17:42:10 +08:00
<view class="tab1" v-if="isCwnum == 0">
<view class="form">
<view class="inputBox">
<view class="leftInput">
<uni-easyinput suffixIcon="search" v-model="vinCode" placeholder="车架号/备件号"
2024-03-26 09:33:10 +08:00
@iconClick="search" @input="inputChange"></uni-easyinput>
</view>
2023-12-14 17:02:53 +08:00
<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>
2023-07-06 17:08:59 +08:00
</view>
2023-12-08 17:42:10 +08:00
</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>
2023-11-01 18:40:05 +08:00
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>总车位数</text>
<p>{{surveyList.totalSeatAmout}}</p>
2023-11-01 18:40:05 +08:00
</view>
</view>
2023-12-08 17:42:10 +08:00
<view class="topContent">
<view class="contentLeft">
<image src="../../static/images/cwTop2.png" mode=""></image>
2023-11-01 18:40:05 +08:00
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>使用车位数</text>
<p>{{surveyList.useSeatAmout}}</p>
2023-11-01 18:40:05 +08:00
</view>
</view>
2023-12-08 17:42:10 +08:00
<view class="topContent">
<view class="contentLeft">
<image src="../../static/images/cwTop3.png" mode=""></image>
2023-11-01 18:40:05 +08:00
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>剩余车位数</text>
<p>{{surveyList.remainSeatAmout}}</p>
2023-11-01 18:40:05 +08:00
</view>
</view>
2023-12-08 17:42:10 +08:00
<view class="topContent">
<view class="contentLeft">
<image src="../../static/images/cwTop4.png" mode=""></image>
2023-11-01 18:40:05 +08:00
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>虚拟车位数</text>
<p>{{surveyList.virtuaSeatAmout}}</p>
2023-11-01 18:40:05 +08:00
</view>
</view>
2023-12-08 17:42:10 +08:00
<view class="topContent">
<view class="contentLeft">
<image src="../../static/images/cwTop5.png" mode=""></image>
2023-11-01 18:40:05 +08:00
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>可停放货物数量</text>
<p>{{surveyList.unparkGoodsAmout}}</p>
2023-11-01 18:40:05 +08:00
</view>
</view>
2023-12-08 17:42:10 +08:00
<view class="topContent">
<view class="contentLeft">
<image src="../../static/images/cwTop6.png" mode=""></image>
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>已停放货物数量</text>
<p>{{surveyList.stopGoodsAmout}}</p>
</view>
</view>
</view>
2023-12-08 17:42:10 +08:00
<view class="boxBottom">
<view class="bottomContent">
<view class="contentLeft">
<image src="../../static/images/cwTop7.png" mode=""></image>
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>车辆总数()</text>
<p>{{carList.carAmout}}</p>
</view>
</view>
2023-12-08 17:42:10 +08:00
<view class="bottomContent">
<view class="contentLeft">
<image src="../../static/images/cwTop8.png" mode=""></image>
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>外贸出口()</text>
<p>{{carList.externalExportCarAmout}}</p>
</view>
</view>
2023-12-08 17:42:10 +08:00
<view class="bottomContent">
<view class="contentLeft">
<image src="../../static/images/cwTop9.png" mode=""></image>
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>外贸进口()</text>
<p>{{carList.externalImportCarAmout}}</p>
</view>
</view>
2023-12-08 17:42:10 +08:00
<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>
2023-12-08 17:42:10 +08:00
<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>
2023-12-08 17:42:10 +08:00
<view class="bottomContent">
<view class="contentLeft">
<image src="../../static/images/cwTop12.png" mode=""></image>
</view>
2023-12-08 17:42:10 +08:00
<view class="contentRight">
<text>备件总数()</text>
<p>{{partsList.partAmout}}</p>
</view>
</view>
2023-12-08 17:42:10 +08:00
<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>
2024-03-19 17:52:23 +08:00
<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>
2023-12-08 17:42:10 +08:00
<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">
2024-02-27 16:10:12 +08:00
<p>{{item.pyaAreaCode}}{{item.useSeatAmount}}/{{item.totalSeatAmount}}</p>
2023-12-08 17:42:10 +08:00
<text @click="clickLine(item)"></text>
</view>
<view class="boxContent">
2024-02-27 16:10:12 +08:00
<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">
2023-12-08 17:42:10 +08:00
<lx-progress-bar title="" :total="item.totalSeatAmout"
:firstValue="item.stopGoodsAmout" contentColor="#0067CF" />
<text>{{item.stopGoodsAmout}}/{{item.totalSeatAmout}}</text>
2024-02-27 16:10:12 +08:00
</view> -->
<!-- <view class="carUl">
2023-12-08 17:42:10 +08:00
<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">
2023-12-22 17:48:52 +08:00
<view class="tipBox">
<view class="li" v-for="(item2,idx) in v.carDetailList"
:key="idx">
<p>{{item2.storeLine}}</p>
<text>{{item2.storeSeatAmout}}车位</text>
</view>
2023-12-08 17:42:10 +08:00
</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>
2024-02-27 16:10:12 +08:00
</view> -->
</view>
</view>
2023-07-06 17:08:59 +08:00
</view>
</view>
2023-12-08 17:42:10 +08:00
</view>
<template v-else>
2023-12-08 17:42:10 +08:00
<place @modifyPlaceTabs="modifyPlaceTabs" :vvyId="vvyId" :pyaObj="pyaObj" :brdId="brdId"
2024-02-27 16:10:12 +08:00
:potId="potId" :vinCode="vinCode" :workId="workId" :dcId="dcId"></place>
</template>
</custom-tab-pane>
2023-12-08 17:42:10 +08:00
<custom-tab-pane :label="tabsTitle1" name="c1_2">
<view></view>
<view class="tabs2">
2023-12-08 17:42:10 +08:00
<view class="form">
<view class="inputBox">
<view class="leftInput">
<uni-easyinput suffixIcon="search" v-model="vinCode" placeholder="车架号/备件号"
@iconClick="search"></uni-easyinput>
</view>
2023-12-14 17:02:53 +08:00
<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>
2023-12-08 17:42:10 +08:00
</view>
2023-07-06 17:08:59 +08:00
</view>
</view>
2023-12-08 17:42:10 +08:00
<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>
2023-12-14 17:02:53 +08:00
<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>
2023-07-06 17:08:59 +08:00
</view>
</view>
2023-12-08 17:42:10 +08:00
<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>
2023-07-06 17:08:59 +08:00
</view>
</custom-tab-pane>
</custom-tabs>
2023-12-14 17:02:53 +08:00
<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="港口"
2024-03-26 09:33:10 +08:00
v-model="potName" @select="potSelect"></superwei-combox>
2023-12-14 17:02:53 +08:00
<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>
2023-07-06 17:08:59 +08:00
</view>
</view>
</template>
<script>
import HeadInfo from '@/components/head-info/head-info';
import place from './place.vue';
2024-03-26 09:33:10 +08:00
let timerId
2023-07-06 17:08:59 +08:00
export default {
data() {
return {
tabsValue: 0,
2023-12-08 17:42:10 +08:00
tabsTitle1: "货物列表",
tabsTitle2: "场位异常货物列表",
2023-11-01 18:40:05 +08:00
loginObj: {},
portObj: {},
2023-12-08 17:42:10 +08:00
// 查询条件
// 车架号/备件号
vinCode: "",
// 货物列表下拉堆场
2023-11-01 18:40:05 +08:00
yardId: "",
2023-12-08 17:42:10 +08:00
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: "",
2024-03-26 09:33:10 +08:00
potName: "",
2023-12-08 17:42:10 +08:00
potList: [],
// 作业状态
workId: "",
workName: "",
workList: [],
2023-11-01 18:40:05 +08:00
// 场位概况
surveyList: {},
carTabsValue: 0,
2023-11-01 18:40:05 +08:00
// 车辆
carList: {},
// 备件
partsList: {},
2023-12-08 17:42:10 +08:00
// 是否展开
isShowData: false,
// 选中左侧堆场
activeIndex: 0,
// 场位图左侧堆场
dcId: "",
dcName: "",
dcList: [],
// 区域
pyaObj: "",
qyList: [],
// 场位的状态 是否进入车道
isCwnum: 0,
// 货物列表数据
goodsList: [],
// 场位异常货物列表
ycGoodsList: [],
// 分页
total: 0,
pageSize: 10,
current: 1,
2024-03-19 17:52:23 +08:00
sortList:[
{
id: "ASC",
text: "正序排列"
},
{
id: "DESC",
text: "倒序排列"
},
{
id: "DEFAULT",
2024-04-19 16:21:28 +08:00
text: "默认"
2024-03-19 17:52:23 +08:00
},
],
2024-04-19 16:21:28 +08:00
sortName:'默认',
trendPlansOrderRule:'DEFAULT'
}
2023-07-06 17:08:59 +08:00
},
2023-09-23 20:16:54 +08:00
onBackPress(options) {
// 触发返回就会调用此方法,这里实现的是禁用物理返回,顶部导航栏的自定义返回 uni.navigateBack 仍可使用
if (options.from == 'backbutton') {
return true;
} else if (options.from == 'navigateBack') {
return false;
}
},
2023-11-01 18:40:05 +08:00
onLoad() {
this.loginObj = uni.getStorageSync('loginObj')
this.portObj = uni.getStorageSync('portObj')
2023-12-08 17:42:10 +08:00
this.getShip("")
this.getVvy("")
this.getBrand()
this.getPot()
this.getWork()
this.getDc()
this.getYard()
this.getGoodsInfo()
this.getYcGoodsInfo()
2023-11-01 18:40:05 +08:00
},
2023-07-06 17:08:59 +08:00
components: {
HeadInfo,
place
2023-07-06 17:08:59 +08:00
},
methods: {
2023-12-08 17:42:10 +08:00
// 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 = ""
2024-03-26 09:33:10 +08:00
this.potName = ""
2023-12-08 17:42:10 +08:00
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()
}
},
// 查询条件
2023-12-14 17:02:53 +08:00
// 点击筛选
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();
},
2023-12-08 17:42:10 +08:00
// 查询框
search() {
if (this.tabsValue == 0) {
this.getQy()
} else if (this.tabsValue == 1) {
this.getGoodsInfo()
} else if (this.tabsValue == 2) {
this.getYcGoodsInfo()
}
},
// 获取船名
getShip(query) {
2023-11-01 18:40:05 +08:00
uni.request({
2023-12-08 17:42:10 +08:00
url: `${this.$local}/api/shipManage/queryLikeShipManage?query=${query}&spmId=${this.vvySpmId}`,
2023-11-01 18:40:05 +08:00
header: {
'Content-Type': 'application/json', //自定义请求头信息
'Authorization': `Bearer ${this.loginObj.access_token}`
},
method: 'GET', //请求方式,必须为大写
success: (res) => {
2023-12-08 17:42:10 +08:00
if (res.data.status == "200") {
this.shipList = res.data.data
2023-11-01 18:40:05 +08:00
}
}
})
},
2023-12-08 17:42:10 +08:00
// 船名模糊查询
shipInput(e) {
2024-04-19 16:21:28 +08:00
if(e) {
this.getShip(e)
} else {
this.vvySpmId = ''
this.getShip('')
}
2023-12-08 17:42:10 +08:00
},
// 选择船名
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
}
2023-11-01 18:40:05 +08:00
}
})
},
2023-12-08 17:42:10 +08:00
// 航次模糊查询
vvyInput(e) {
this.getVvy(e)
},
// 选择航次
vvySelect(e) {
this.vvyId = e.vvyId
this.vvyName = e.vvyName
this.vvySpmId = e.spmId
this.getShip("")
},
// 获取品牌
getBrand() {
2023-11-01 18:40:05 +08:00
uni.request({
2023-12-08 17:42:10 +08:00
url: `${this.$local}/api/yardGoods/monitor/goods/brand`,
2023-11-01 18:40:05 +08:00
header: {
'Content-Type': 'application/json', //自定义请求头信息
'Authorization': `Bearer ${this.loginObj.access_token}`
},
method: 'GET', //请求方式,必须为大写
success: (res) => {
2023-12-08 17:42:10 +08:00
if (res.data.status == "200") {
this.brandList = res.data.data
2023-11-01 18:40:05 +08:00
}
}
})
},
2023-12-08 17:42:10 +08:00
// 选择品牌
brandSelect(e) {
this.brdId = e.brdId
this.brdName = e.brdName
},
// 获取港口
getPot() {
2023-11-01 18:40:05 +08:00
uni.request({
2023-12-08 17:42:10 +08:00
url: `${this.$local}/api/yardGoods/monitor/goods/pot`,
2023-11-01 18:40:05 +08:00
header: {
'Content-Type': 'application/json', //自定义请求头信息
'Authorization': `Bearer ${this.loginObj.access_token}`
},
method: 'GET', //请求方式,必须为大写
success: (res) => {
2023-12-08 17:42:10 +08:00
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
2023-11-01 18:40:05 +08:00
}
}
})
},
2023-12-08 17:42:10 +08:00
// 选择堆场
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() {
2023-11-01 18:40:05 +08:00
uni.request({
2024-04-19 16:21:28 +08:00
url: `${this.$local}/api/yardGoods/monitor/v2/situation?pamId=${this.portObj.portId}&pymId=${this.dcId}`,
2023-11-01 18:40:05 +08:00
header: {
'Content-Type': 'application/json', //自定义请求头信息
'Authorization': `Bearer ${this.loginObj.access_token}`
},
method: 'GET', //请求方式,必须为大写
success: (res) => {
if (res.statusCode == 200) {
2023-12-08 17:42:10 +08:00
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
}
2023-11-01 18:40:05 +08:00
}
}
})
},
2023-12-08 17:42:10 +08:00
// 获取左侧堆场列表
getDc() {
2023-11-01 18:40:05 +08:00
uni.request({
2024-02-27 16:10:12 +08:00
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`,
2023-12-08 17:42:10 +08:00
header: {
'Content-Type': 'application/json', //自定义请求头信息
'Authorization': `Bearer ${this.loginObj.access_token}`
},
method: 'GET', //请求方式,必须为大写
success: (res) => {
if (res.data.status == "200") {
2024-02-27 16:10:12 +08:00
this.dcList = res.data.data
2023-12-08 17:42:10 +08:00
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({
2024-06-11 17:19:31 +08:00
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}`,
2024-02-27 16:10:12 +08:00
// 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`,
2023-11-01 18:40:05 +08:00
header: {
'Content-Type': 'application/json', //自定义请求头信息
'Authorization': `Bearer ${this.loginObj.access_token}`
},
method: 'GET', //请求方式,必须为大写
success: (res) => {
if (res.statusCode == 200) {
2024-04-19 16:21:28 +08:00
this.qyList = res.data.data
2024-02-27 16:10:12 +08:00
// console.log(this.qyList);
2023-12-08 17:42:10 +08:00
this.qyList.forEach(v => {
2024-02-27 16:10:12 +08:00
if (v.totalSeatAmount == null) {
this.$set(v, "totalSeatAmount", 0)
2023-12-08 17:42:10 +08:00
}
2024-02-27 16:10:12 +08:00
if (v.useSeatAmount == null) {
this.$set(v, "useSeatAmount", 0)
2023-12-08 17:42:10 +08:00
}
if (v.carStatisticsList != null) {
v.carStatisticsList.forEach(e => {
this.$set(e, "isShow", false)
})
}
})
2023-11-01 18:40:05 +08:00
}
}
})
},
2023-12-08 17:42:10 +08:00
// 点击车位查看详情
clickCar(item) {
item.isShow = !item.isShow
},
// 点击车道
2023-12-08 17:42:10 +08:00
clickLine(item) {
this.pyaObj = item
this.isCwnum = 1;
2023-07-10 17:11:31 +08:00
},
// 子组件修改值
modifyPlaceTabs(data) {
2023-12-08 17:42:10 +08:00
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}&current=${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}&current=${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()
}
2023-07-10 17:11:31 +08:00
},
2024-03-19 17:52:23 +08:00
// 排序切换
sortSelect(e) {
this.trendPlansOrderRule = e.id
2024-04-19 16:21:28 +08:00
this.getQy()
},
2024-03-26 09:33:10 +08:00
// 输入框值发生改变
inputChange(e) {
clearTimeout(timerId)
timerId = setTimeout(() => {
this.vinCode = e
this.confirm()
},1000)
2024-03-19 17:52:23 +08:00
}
2023-07-06 17:08:59 +08:00
}
};
</script>
2023-07-25 17:15:05 +08:00
<style lang="less" scoped>
2023-07-06 17:08:59 +08:00
.container {
2023-12-08 17:42:10 +08:00
height: 100vh;
margin-top: 68px;
2023-12-22 17:48:52 +08:00
background-color: #fff;
2023-07-06 17:08:59 +08:00
2023-11-01 18:40:05 +08:00
/deep/.tab .tab-bar {
height: 66px;
line-height: 66px;
font-family: PingFangSC-Semibold;
font-weight: 600;
2023-12-08 17:42:10 +08:00
position: fixed;
left: 0;
top: 68px;
z-index: 996;
2023-11-01 18:40:05 +08:00
}
/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%;
}
2023-12-08 17:42:10 +08:00
.form {
2023-11-01 18:40:05 +08:00
background: #FAFAFA;
2023-12-08 17:42:10 +08:00
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
2023-12-08 17:42:10 +08:00
.inputBox {
width: 100%;
display: flex;
2023-12-08 17:42:10 +08:00
justify-content: space-between;
padding: 5px 10px;
2023-12-08 17:42:10 +08:00
.leftInput {
2023-12-14 17:02:53 +08:00
width: 200px;
}
2023-12-08 17:42:10 +08:00
/deep/.uni-easyinput {
2023-12-14 17:02:53 +08:00
width: 200px;
2023-12-22 17:48:52 +08:00
}
2023-12-08 17:42:10 +08:00
2023-12-22 17:48:52 +08:00
/deep/.content-clear-icon {
display: none;
}
2023-07-06 17:08:59 +08:00
2023-12-08 17:42:10 +08:00
/deep/.is-input-border {
border-radius: 18.5px;
}
2023-12-22 17:48:52 +08:00
/deep/.uni-easyinput__placeholder-class {
font-size: 14px;
color: #666;
}
2023-12-08 17:42:10 +08:00
.rightInput {
display: flex;
2023-12-08 17:42:10 +08:00
2023-12-14 17:02:53 +08:00
p {
margin-left: 10px;
line-height: 40px;
}
2023-12-08 17:42:10 +08:00
}
}
.btn {
height: 35px;
line-height: 35px;
margin-right: 10px;
}
}
.tab1 {
margin-top: 66px;
.dataTitle {
margin-top: 14px;
width: 100%;
2023-12-22 17:48:52 +08:00
height: 42px;
line-height: 42px;
2023-12-08 17:42:10 +08:00
font-size: 14px;
color: #1890FF;
padding: 0 16px;
display: flex;
justify-content: space-between;
background: #FFFFFF;
border: 1px solid #E1E5ED;
2023-12-08 17:42:10 +08:00
text:first-child {
font-size: 16px;
color: #0D518B;
}
2023-12-08 17:42:10 +08:00
}
.dataBox {
width: 100%;
padding: 0 8px;
margin-top: 8px;
2023-12-08 17:42:10 +08:00
.boxTop {
display: flex;
2023-12-08 17:42:10 +08:00
justify-content: space-between;
2023-12-08 17:42:10 +08:00
.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;
}
}
2023-12-08 17:42:10 +08:00
.boxBottom {
display: flex;
2023-12-08 17:42:10 +08:00
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-top: 16px;
2023-12-08 17:42:10 +08:00
.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;
}
}
2023-12-08 17:42:10 +08:00
.contentLeft {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 8px;
margin-left: 14px;
2023-12-08 17:42:10 +08:00
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;
}
}
}
2023-12-08 17:42:10 +08:00
.cwMain {
2023-07-06 17:08:59 +08:00
display: flex;
2023-12-08 17:42:10 +08:00
width: 100%;
height: calc(100vh - 66px - 68px - 47px);
2023-12-22 17:48:52 +08:00
margin-top: 10px;
2023-07-10 17:11:31 +08:00
2023-12-08 17:42:10 +08:00
.cwLeft {
width: 128px;
height: 100%;
background-color: #fff;
overflow: scroll;
2023-12-08 17:42:10 +08:00
.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);
}
2023-12-08 17:42:10 +08:00
.active {
color: #fff;
background-color: #0372E0;
border-radius: 4px;
}
}
2023-12-08 17:42:10 +08:00
.cwRight {
width: calc(100% - 128px);
height: 100%;
overflow: scroll;
padding-left: 18px;
2023-12-22 17:48:52 +08:00
background: #FAFAFA;
2023-12-08 17:42:10 +08:00
display: flex;
flex-wrap: wrap;
2023-12-22 17:48:52 +08:00
padding-bottom: 16px;
2023-12-08 17:42:10 +08:00
.rightBox {
2023-12-22 17:48:52 +08:00
width: 33.3%;
2023-12-08 17:42:10 +08:00
height: 214px;
border: 1px solid #E1E5ED;
2023-12-08 17:42:10 +08:00
/deep/.zb_tooltip_content {
width: 100%;
}
2023-12-08 17:42:10 +08:00
.boxTop {
width: 100%;
height: 32px;
border-bottom: 1px solid #E1E5ED;
line-height: 32px;
display: flex;
2023-12-08 17:42:10 +08:00
justify-content: space-between;
padding: 0 8px;
background: #FAFAFA;
2023-12-08 17:42:10 +08:00
p {
font-size: 14px;
color: #0D518B;
}
text {
2023-12-08 17:42:10 +08:00
font-size: 14px;
color: #1677FF;
}
}
2023-12-08 17:42:10 +08:00
.boxContent {
height: 180px;
overflow: scroll;
padding: 5px 8px;
2024-02-27 16:10:12 +08:00
.empty {
2023-12-08 17:42:10 +08:00
display: flex;
2024-02-27 16:10:12 +08:00
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;
}
}
2023-12-08 17:42:10 +08:00
}
2023-12-08 17:42:10 +08:00
.boxJd {
display: flex;
margin-top: 10px;
2023-07-10 17:11:31 +08:00
2023-12-08 17:42:10 +08:00
text {
margin-left: 10px;
font-size: 14px;
color: #333333;
}
2023-12-08 17:42:10 +08:00
/deep/.progress-bar-title {
margin: 0;
}
2023-12-08 17:42:10 +08:00
/deep/.bar {
height: 8px;
margin-top: 5px;
width: 240px;
border-radius: 50%;
}
2023-12-08 17:42:10 +08:00
/deep/.progress-bar .bar-single {
width: 100%;
height: 100%;
border-radius: 8px;
2023-12-22 17:48:52 +08:00
background-color: #e1e5ed !important;
2023-12-08 17:42:10 +08:00
}
2023-12-08 17:42:10 +08:00
/deep/.progress-bar .bar-double {
height: 100%;
}
2023-12-08 17:42:10 +08:00
/deep/.progress-bar .bar-interval {
width: 0;
}
2023-07-10 17:11:31 +08:00
2023-12-08 17:42:10 +08:00
/deep/.bar-text span {
display: none;
}
}
2023-07-10 17:11:31 +08:00
2023-12-08 17:42:10 +08:00
.carUl {
width: 100%;
display: flex;
flex-wrap: wrap;
2023-12-08 17:42:10 +08:00
.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;
2023-07-10 17:11:31 +08:00
2023-12-08 17:42:10 +08:00
.carTitle {
font-size: 12px;
color: #1677FF;
margin-bottom: 4px;
}
2023-12-22 17:48:52 +08:00
.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;
}
}
}
2023-12-08 17:42:10 +08:00
}
}
}
}
2023-07-06 17:08:59 +08:00
}
}
2023-12-08 17:42:10 +08:00
}
.tabs2 {
2023-12-22 17:48:52 +08:00
background-color: #f5f6fa;
2023-12-08 17:42:10 +08:00
margin-top: 66px;
padding-bottom: 20px;
2023-07-10 17:11:31 +08:00
2023-12-08 17:42:10 +08:00
.itemList {
padding: 16px;
display: flex;
flex-direction: column;
2023-12-08 17:42:10 +08:00
.item {
padding: 15px;
border-radius: 8px;
background-color: #fff;
2023-07-06 17:08:59 +08:00
display: flex;
2023-12-08 17:42:10 +08:00
flex-wrap: wrap;
2023-07-06 17:08:59 +08:00
justify-content: space-between;
2023-12-08 17:42:10 +08:00
font-family: PingFangSC-Regular;
font-size: 14px;
color: #23262E;
margin-bottom: 16px;
2023-07-10 17:11:31 +08:00
2023-12-08 17:42:10 +08:00
.headTop {
width: 100%;
display: flex;
justify-content: space-between;
2023-12-08 17:42:10 +08:00
margin-bottom: 10px;
2023-12-08 17:42:10 +08:00
.leftHead {
font-size: 16px;
color: #23262E;
font-weight: bold;
2023-12-08 17:42:10 +08:00
display: flex;
image {
width: 18px;
height: 18px;
margin-right: 7px;
}
}
2023-12-08 17:42:10 +08:00
.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;
}
}
}
}
2023-12-08 17:42:10 +08:00
.row {
width: 19%;
flex-direction: column;
2023-12-08 17:42:10 +08:00
display: flex;
}
.col {
margin-bottom: 10px;
color: #999999;
text {
color: #23262E;
}
}
2023-07-06 17:08:59 +08:00
}
}
2023-12-08 17:42:10 +08:00
2023-07-06 17:08:59 +08:00
}
2023-12-14 17:02:53 +08:00
// 右侧抽屉筛选
/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;
2023-12-22 17:48:52 +08:00
margin-top: 24px;
2023-12-14 17:02:53 +08:00
margin-bottom: 30px;
image {
2023-12-22 17:48:52 +08:00
width: 10px;
height: 14px;
margin-right: 10px;
margin-top: 6px;
2023-12-14 17:02:53 +08:00
}
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;
}
}
}
2024-03-19 17:52:23 +08:00
.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;
}
}
2023-07-06 17:08:59 +08:00
}
2023-07-10 17:11:31 +08:00
</style>