657 lines
15 KiB
Vue
657 lines
15 KiB
Vue
<template>
|
||
<view class="app">
|
||
<head-info :navIndex="4"></head-info>
|
||
<view class="container">
|
||
<custom-tabs type="c1" :value="tabsValue">
|
||
<custom-tab-pane label="场位图" name="c1_1">
|
||
<view></view>
|
||
<template v-if="placeTabs == 0">
|
||
<view class="tabs1">
|
||
<view class="boxTop">
|
||
<view class="title">
|
||
堆场
|
||
</view>
|
||
<view class="option">
|
||
<uni-data-select v-model="optionValue" :localdata="optionList"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="cwBox">
|
||
<view class="cwTitle">
|
||
场位概况
|
||
</view>
|
||
<view class="cwList">
|
||
<view class="cwInfo" v-for="(item,index) in cwList" :key="index">
|
||
<view class="infoTitle">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="infoNum">
|
||
{{item.num}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="carTabs">
|
||
<custom-tabs type="c2" :value="carTabsValue">
|
||
<custom-tab-pane label="车辆" name="c2_1">
|
||
<view></view>
|
||
<view class="carList">
|
||
<view class="carInfo" v-for="(item,index) in carList" :key="index">
|
||
<view class="infoTitle">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="infoNum">
|
||
{{item.num}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</custom-tab-pane>
|
||
<custom-tab-pane label="备件" name="c2_2">
|
||
<view></view>
|
||
<view class="partsList">
|
||
<view class="partsInfo" v-for="(item,index) in partsList" :key="index">
|
||
<view class="infoTitle">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="infoNum">
|
||
{{item.num}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</custom-tab-pane>
|
||
</custom-tabs>
|
||
</view>
|
||
<view class="fpList">
|
||
<view class="fpInfo">
|
||
<view class="fpTitle">
|
||
港建库
|
||
</view>
|
||
<view class="fpListInfo">
|
||
<view class="infoTop">
|
||
<view class="infoTopTitle">A1区（12*12）</view>
|
||
<view class="titleRight" @click="toGoPlace">
|
||
<text>车道</text>
|
||
<view class="titleIcon">
|
||
<van-icon name="arrow" color="#fff" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="infoCarNum">
|
||
<text>车位总数：120车位</text>
|
||
<text>使用：40车位</text>
|
||
<text>剩余：40车位</text>
|
||
<text>可停放车辆：300辆</text>
|
||
<text>已停放车辆：300辆</text>
|
||
</view>
|
||
<view class="progressBox">
|
||
<van-progress :percentage="itemSum(2000)" :pivot-text="'1000/' + 2000" />
|
||
</view>
|
||
<view class="carInfoList">
|
||
<view class="carBrand" v-for="item in 4" :key="item">
|
||
<view class="brandTitle">
|
||
保时捷-轿车
|
||
</view>
|
||
<view class="placeInfo">
|
||
400 辆，共5道12车位
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fpListInfo notListInfo">
|
||
<view class="infoTop">
|
||
<view class="infoTopTitle">A1区（12*12）</view>
|
||
<view class="titleRight" @click="toGoPlace">
|
||
<text>车道</text>
|
||
<view class="titleIcon">
|
||
<van-icon name="arrow" color="#fff" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="notTitle">
|
||
未分配
|
||
</view>
|
||
<text>车位总数：120车位</text>
|
||
<text>可停放车辆：300辆</text>
|
||
</view>
|
||
<view class="tipInfo">
|
||
未使用2车道20车位
|
||
</view>
|
||
</view>
|
||
<view class="fpInfo">
|
||
<view class="fpTitle">
|
||
海棠库
|
||
</view>
|
||
<view class="fpListInfo notListInfo">
|
||
<view class="infoTop">
|
||
<view class="infoTopTitle">A1区（12*12）</view>
|
||
<view class="titleRight" @click="toGoPlace">
|
||
<text>车道</text>
|
||
<view class="titleIcon">
|
||
<van-icon name="arrow" color="#fff" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="notTitle">
|
||
未分配
|
||
</view>
|
||
<text>车位总数：120车位</text>
|
||
<text>可停放车辆：300辆</text>
|
||
</view>
|
||
<view class="fpListInfo">
|
||
<view class="carInfoList">
|
||
<view class="infoTop">
|
||
<view class="infoTopTitle">A1区（12*12）</view>
|
||
<view class="titleRight" @click="toGoPlace">
|
||
<text>车道</text>
|
||
<view class="titleIcon">
|
||
<van-icon name="arrow" color="#fff" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="infoCarNum">
|
||
<text>车位总数：120车位</text>
|
||
<text>使用：40车位</text>
|
||
<text>剩余：40车位</text>
|
||
<text>可停放车辆：300辆</text>
|
||
<text>已停放车辆：300辆</text>
|
||
</view>
|
||
<view class="progressBox">
|
||
<van-progress :percentage="itemSum(2000)"
|
||
:pivot-text="'1000/' + 2000" />
|
||
</view>
|
||
</view>
|
||
<view class="carInfoList">
|
||
<view class="carBrand" v-for="item in 4" :key="item">
|
||
<view class="brandTitle">
|
||
保时捷-轿车
|
||
</view>
|
||
<view class="placeInfo">
|
||
400 辆，共5道12车位
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<place @modifyPlaceTabs="modifyPlaceTabs"></place>
|
||
</template>
|
||
</custom-tab-pane>
|
||
<custom-tab-pane label="货物列表" name="c1_2">
|
||
<view></view>
|
||
<view class="tabs2">
|
||
<view class="topOption">
|
||
<view class="option">
|
||
<text>堆场</text>
|
||
<uni-data-select v-model="optionValue" :localdata="optionList"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>进出口</text>
|
||
<uni-data-select v-model="optionValue" :localdata="optionList"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>贸易类型</text>
|
||
<uni-data-select v-model="optionValue" :localdata="optionList"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>船名/航次</text>
|
||
<uni-data-select v-model="optionValue" :localdata="optionList"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>品牌</text>
|
||
<uni-data-select v-model="optionValue" :localdata="optionList"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>港口</text>
|
||
<uni-data-select v-model="optionValue" :localdata="optionList"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="goodsList">
|
||
<view class="li" v-for="item in 6" :key="item">
|
||
<view class="liLeft">
|
||
<text class="title">车架号/条形码</text>
|
||
<text>堆场名称：高东库</text>
|
||
<text>提单号：TD197906</text>
|
||
<text>品牌：特斯拉</text>
|
||
<text>作业状态：已装船</text>
|
||
<text>场位：A2-09-08</text>
|
||
<text>进出口：进口</text>
|
||
<text>型号：A系列</text>
|
||
<text>作业时间：2023/09/08 14:00</text>
|
||
<text>船名：运程10</text>
|
||
<text>贸易类型：内贸</text>
|
||
<text>车型：轿车</text>
|
||
<text>作业人员：张星星</text>
|
||
<text>航次：HC867468096</text>
|
||
<text>港口：上海港</text>
|
||
<text>车型明细：B系列</text>
|
||
</view>
|
||
<view class="liRight">
|
||
<text>作业记录</text>
|
||
<text>残损</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</custom-tab-pane>
|
||
</custom-tabs>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import HeadInfo from '@/components/head-info/head-info';
|
||
import place from './place.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabsValue: 0,
|
||
optionValue: 0,
|
||
optionList: [{
|
||
value: "0",
|
||
text: "全部堆场"
|
||
},
|
||
{
|
||
alue: "1",
|
||
text: "外六"
|
||
},
|
||
{
|
||
alue: "2",
|
||
text: "港建库"
|
||
},
|
||
{
|
||
alue: "3",
|
||
text: "高东库"
|
||
},
|
||
{
|
||
alue: "4",
|
||
text: "江海库"
|
||
}
|
||
],
|
||
cwList: [{
|
||
name: "总车位数",
|
||
num: "5116"
|
||
},
|
||
{
|
||
name: "使用车位数",
|
||
num: "5116"
|
||
}, {
|
||
name: "剩余车位数",
|
||
num: "5116"
|
||
}, {
|
||
name: "虚拟车位数",
|
||
num: "5116"
|
||
}, {
|
||
name: "可停放货物数量",
|
||
num: "5116"
|
||
}, {
|
||
name: "已停放货物数量",
|
||
num: "5116"
|
||
}
|
||
],
|
||
carTabsValue: 0,
|
||
carList: [{
|
||
name: "车辆总数（辆）",
|
||
num: "5116"
|
||
},
|
||
{
|
||
name: "外贸出口（辆）",
|
||
num: "5116"
|
||
}, {
|
||
name: "外贸进口（辆）",
|
||
num: "5116"
|
||
}, {
|
||
name: "内贸出口（辆）",
|
||
num: "5116"
|
||
}, {
|
||
name: "内贸进口（辆）",
|
||
num: "5116"
|
||
}
|
||
],
|
||
partsList: [{
|
||
name: "备件总数（件）",
|
||
num: "5116"
|
||
},
|
||
{
|
||
name: "外贸出口（件）",
|
||
num: "5116"
|
||
}, {
|
||
name: "外贸进口（件）",
|
||
num: "5116"
|
||
}, {
|
||
name: "内贸出口（件）",
|
||
num: "5116"
|
||
}, {
|
||
name: "内贸进口（件）",
|
||
num: "5116"
|
||
}
|
||
],
|
||
placeTabs: 0,
|
||
}
|
||
},
|
||
computed: {
|
||
itemSum() {
|
||
return function(item) {
|
||
let sum = 1000 / item * 100
|
||
return sum
|
||
};
|
||
}
|
||
},
|
||
onLoad() {},
|
||
components: {
|
||
HeadInfo,
|
||
place
|
||
},
|
||
methods: {
|
||
// 点击车道
|
||
toGoPlace() {
|
||
this.placeTabs = 1;
|
||
},
|
||
// 子组件修改值
|
||
modifyPlaceTabs(data) {
|
||
this.placeTabs = data;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
display: flex;
|
||
|
||
/deep/.tab .tab-cont {
|
||
padding: 0;
|
||
}
|
||
|
||
/deep/.tab-pane {
|
||
width: 100%;
|
||
}
|
||
|
||
.tabs1 {
|
||
padding: 20px;
|
||
background-color: #000;
|
||
|
||
.boxTop {
|
||
display: flex;
|
||
|
||
.title {
|
||
margin-right: 20px;
|
||
font-size: 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.option {
|
||
width: 200px;
|
||
}
|
||
}
|
||
|
||
.cwBox {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
margin-top: 20px;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
|
||
.cwTitle {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.cwList {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.cwInfo {
|
||
width: 16%;
|
||
padding: 20px 10px;
|
||
background-color: #ccc;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.carTabs {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
margin-top: 20px;
|
||
border-radius: 8px;
|
||
|
||
/deep/.tab {
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
.carList {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 20px;
|
||
|
||
.carInfo {
|
||
width: 19%;
|
||
padding: 20px;
|
||
background-color: #ccc;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
|
||
.partsList {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 20px;
|
||
|
||
.partsInfo {
|
||
width: 19%;
|
||
padding: 20px;
|
||
background-color: #ccc;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.infoTitle {
|
||
font-size: 16px;
|
||
color: #666;
|
||
}
|
||
|
||
.infoNum {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.fpList {
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.fpInfo {
|
||
width: 49%;
|
||
|
||
}
|
||
|
||
.fpTitle {
|
||
text-align: center;
|
||
background: #262626;
|
||
padding: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
.fpListInfo {
|
||
padding: 20px 10px;
|
||
background: #262626;
|
||
color: #fff;
|
||
margin-top: 10px;
|
||
|
||
.infoTop {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.infoTopTitle {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
padding-left: 10px;
|
||
border-left: 5px solid #0079FE;
|
||
}
|
||
|
||
.titleRight {
|
||
display: flex;
|
||
|
||
.titleIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #0079FE;
|
||
margin-left: 5px;
|
||
line-height: 16px;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
margin-top: 5px;
|
||
|
||
/deep/.van-icon {
|
||
transform: scale(0.8);
|
||
margin-top: 2px;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
|
||
text {
|
||
color: #0079FE;
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.infoCarNum {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 10px;
|
||
|
||
text {
|
||
margin: 10px 20px;
|
||
}
|
||
}
|
||
|
||
.progressBox {
|
||
width: 100%;
|
||
}
|
||
|
||
.carInfoList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.carBrand {
|
||
width: 32%;
|
||
background-color: #2C2D2D;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
|
||
.brandTitle {
|
||
color: #0079FE;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.notListInfo {
|
||
.notTitle {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin: 30px 0;
|
||
}
|
||
|
||
.infoTop {
|
||
text {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
text {
|
||
margin-right: 30px;
|
||
}
|
||
}
|
||
|
||
.tipInfo {
|
||
width: 100%;
|
||
font-size: 24px;
|
||
color: #5FE515;
|
||
font-weight: bold;
|
||
padding: 20px 0;
|
||
text-align: center;
|
||
background: #fff;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs2 {
|
||
padding: 10px 0;
|
||
|
||
.topOption {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-left: 30px;
|
||
|
||
.option {
|
||
display: flex;
|
||
width: 200px;
|
||
line-height: 35px;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
|
||
text {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goodsList {
|
||
padding: 0 30px;
|
||
margin-top: 10px;
|
||
|
||
.li {
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #ccc;
|
||
color: #aaa;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.liLeft {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
color: #000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 24%;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.liRight {
|
||
min-width: 60px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
color: #0079FE;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |