wsnet
/
pad-app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
pad-app/pages/monitor/index.vue

664 lines
15 KiB
Vue
Raw Normal View History

7.6
2023-07-06 17:08:59 +08:00
<template>
<view class="app">
<head-info></head-info>
<view class="container">
<side-bar path='5'></side-bar>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<custom-tabs type="c1" :value="tabsValue" @change="changeIndex">
<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"
@change="fcChange"></uni-data-select>
</view>
7.6
2023-07-06 17:08:59 +08:00
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<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>
7.6
2023-07-06 17:08:59 +08:00
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<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>
7.6
2023-07-06 17:08:59 +08:00
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<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>
7.6
2023-07-06 17:08:59 +08:00
</view>
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
</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"
@change="fcChange"></uni-data-select>
7.6
2023-07-06 17:08:59 +08:00
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<view class="option">
<text>进出口</text>
<uni-data-select v-model="optionValue" :localdata="optionList"
@change="fcChange"></uni-data-select>
7.6
2023-07-06 17:08:59 +08:00
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<view class="option">
<text>贸易类型</text>
<uni-data-select v-model="optionValue" :localdata="optionList"
@change="fcChange"></uni-data-select>
7.6
2023-07-06 17:08:59 +08:00
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<view class="option">
<text>船名/航次</text>
<uni-data-select v-model="optionValue" :localdata="optionList"
@change="fcChange"></uni-data-select>
7.6
2023-07-06 17:08:59 +08:00
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<view class="option">
<text>品牌</text>
<uni-data-select v-model="optionValue" :localdata="optionList"
@change="fcChange"></uni-data-select>
7.6
2023-07-06 17:08:59 +08:00
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<view class="option">
<text>港口</text>
<uni-data-select v-model="optionValue" :localdata="optionList"
@change="fcChange"></uni-data-select>
7.6
2023-07-06 17:08:59 +08:00
</view>
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
<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>
7.6
2023-07-06 17:08:59 +08:00
</view>
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
7.6
2023-07-06 17:08:59 +08:00
</view>
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
</custom-tab-pane>
</custom-tabs>
7.6
2023-07-06 17:08:59 +08:00
</view>
</view>
</template>
<script>
import SideBar from '@/components/sider-bar/slider-bar';
import HeadInfo from '@/components/head-info/head-info';
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
import place from './place.vue';
7.6
2023-07-06 17:08:59 +08:00
export default {
data() {
return {
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
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,
7.6
2023-07-06 17:08:59 +08:00
}
},
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
computed: {
itemSum() {
return function(item) {
let sum = 1000 / item * 100
return sum
};
}
7.6
2023-07-06 17:08:59 +08:00
},
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
onLoad() {},
7.6
2023-07-06 17:08:59 +08:00
components: {
SideBar,
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
HeadInfo,
place
7.6
2023-07-06 17:08:59 +08:00
},
methods: {
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
// 点击tabs
changeIndex(e) {},
// 点击车道
toGoPlace() {
this.placeTabs = 1;
7.10 pan
2023-07-10 17:11:31 +08:00
},
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
// 子组件修改值
modifyPlaceTabs(data) {
this.placeTabs = data;
7.10 pan
2023-07-10 17:11:31 +08:00
},
7.6
2023-07-06 17:08:59 +08:00
}
};
</script>
pad组件更改
2023-07-25 17:15:05 +08:00
<style lang="less" scoped>
7.6
2023-07-06 17:08:59 +08:00
.container {
display: flex;
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
/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;
}
7.6
2023-07-06 17:08:59 +08:00
}
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
.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: calc(100% + 40px);
display: flex;
justify-content: space-around;
padding-left: 40px;
.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;
7.6
2023-07-06 17:08:59 +08:00
display: flex;
justify-content: space-between;
7.10 pan
2023-07-10 17:11:31 +08:00
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
.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;
}
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;
7.10 pan
2023-07-10 17:11:31 +08:00
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
.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;
7.6
2023-07-06 17:08:59 +08:00
}
}
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
.tipInfo {
width: 100%;
font-size: 24px;
color: #5FE515;
font-weight: bold;
padding: 20px 0;
text-align: center;
background: #fff;
margin-top: 10px;
}
7.6
2023-07-06 17:08:59 +08:00
}
}
7.10 pan
2023-07-10 17:11:31 +08:00
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
.tabs2 {
padding: 10px 0;
7.10 pan
2023-07-10 17:11:31 +08:00
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
.topOption {
7.6
2023-07-06 17:08:59 +08:00
display: flex;
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
flex-wrap: wrap;
padding-left: 30px;
.option {
display: flex;
width: 200px;
line-height: 35px;
margin-right: 10px;
margin-bottom: 10px;
7.10 pan
2023-07-10 17:11:31 +08:00
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
text {
margin-right: 5px;
}
7.6
2023-07-06 17:08:59 +08:00
}
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
}
7.10 pan
2023-07-10 17:11:31 +08:00
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
.goodsList {
padding-left: 30px;
margin-top: 10px;
.li {
padding: 10px 0;
border-bottom: 1px solid #ccc;
color: #aaa;
7.6
2023-07-06 17:08:59 +08:00
display: flex;
justify-content: space-between;
7.10 pan
2023-07-10 17:11:31 +08:00
单证代码修改 + 场位监控样式
2023-08-15 09:18:52 +08:00
.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;
}
7.6
2023-07-06 17:08:59 +08:00
}
}
}
}
7.10 pan
2023-07-10 17:11:31 +08:00
</style>