|
|
|
|
<template>
|
|
|
|
|
<div class="bx">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="tptitl">
|
|
|
|
|
<img src="./static/topicon.png" />
|
|
|
|
|
<span>发货操作</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="onebx1">
|
|
|
|
|
<div class="item1">
|
|
|
|
|
<img src="./static/1.png" />
|
|
|
|
|
<span>提货</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item2">
|
|
|
|
|
<img src="./static/2.png" />
|
|
|
|
|
<span>预开单</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item3">
|
|
|
|
|
<img src="./static/3.png" />
|
|
|
|
|
<span>创建运单</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item4">
|
|
|
|
|
<img src="./static/4.png" />
|
|
|
|
|
<span>补录运单</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item5">
|
|
|
|
|
<img src="./static/5.png" />
|
|
|
|
|
<span>短驳发车</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item6">
|
|
|
|
|
<img src="./static/6.png" />
|
|
|
|
|
<span>外部中转</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item7">
|
|
|
|
|
<img src="./static/7.png" />
|
|
|
|
|
<span>库存管理</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item8">
|
|
|
|
|
<img src="./static/8.png" />
|
|
|
|
|
<span>车辆配载</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img class="upimg" src="./static/up.png" />
|
|
|
|
|
<img class="rigth1" src="./static/rigth.png" />
|
|
|
|
|
<img class="rigth2" src="./static/rigth.png" />
|
|
|
|
|
<img class="rigth3" src="./static/rigth.png" />
|
|
|
|
|
<img class="rigth4" src="./static/rigth.png" />
|
|
|
|
|
<img class="rigthall" src="./static/rigthall.png" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ztjk">
|
|
|
|
|
<img src="./static/9.png" />
|
|
|
|
|
<span>到货操作</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rigth">
|
|
|
|
|
<div class="tptitl">
|
|
|
|
|
<img src="./static/topicon.png" />
|
|
|
|
|
<span>到货操作</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="onebx1">
|
|
|
|
|
<div class="item1">
|
|
|
|
|
<img src="./static/10.png" />
|
|
|
|
|
<span>到站卸车</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item2">
|
|
|
|
|
<img src="./static/11.png" />
|
|
|
|
|
<span>库存管理</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item3">
|
|
|
|
|
<img src="./static/12.png" />
|
|
|
|
|
<span>短驳接收</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item4">
|
|
|
|
|
<img src="./static/13.png" />
|
|
|
|
|
<span>外部中转</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item5">
|
|
|
|
|
<img src="./static/14.png" />
|
|
|
|
|
<span>送货</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item6">
|
|
|
|
|
<img src="./static/15.png" />
|
|
|
|
|
<span>中转签收</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item7">
|
|
|
|
|
<img src="./static/16.png" />
|
|
|
|
|
<span>送货签收</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item8">
|
|
|
|
|
<img src="./static/17.png" />
|
|
|
|
|
<span>自提签收</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img class="upimg" src="./static/down.png" />
|
|
|
|
|
<img class="rigth1" src="./static/rigth.png" />
|
|
|
|
|
<img class="rigth2" src="./static/rigth.png" />
|
|
|
|
|
<img class="rigth3" src="./static/rigth.png" />
|
|
|
|
|
<img class="rigth4" src="./static/rigth.png" />
|
|
|
|
|
<img class="rigthall" src="./static/rigthall2.png" />
|
|
|
|
|
<img class="leftall" src="./static/leftall.png" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="buts">
|
|
|
|
|
<div class="tptitl">
|
|
|
|
|
<img src="./static/topicon.png" />
|
|
|
|
|
<span>回单管理</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="onebx1">
|
|
|
|
|
<div class="item1">
|
|
|
|
|
<img src="./static/18.png" />
|
|
|
|
|
<span>回单回收</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item2">
|
|
|
|
|
<img src="./static/19.png" />
|
|
|
|
|
<span>回单寄出</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item3">
|
|
|
|
|
<img src="./static/20.png" />
|
|
|
|
|
<span>回单接收</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item4">
|
|
|
|
|
<img src="./static/21.png" />
|
|
|
|
|
<span>回单发放</span>
|
|
|
|
|
</div>
|
|
|
|
|
<img class="left1" src="./static/rigth.png" />
|
|
|
|
|
<img class="left2" src="./static/rigth.png" />
|
|
|
|
|
<img class="left3" src="./static/rigth.png" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup></script>
|
|
|
|
|
<style lang="scss" scope>
|
|
|
|
|
@import '../../styles/flowStyle.scss';
|
|
|
|
|
|
|
|
|
|
// .bx {
|
|
|
|
|
// position: relative;
|
|
|
|
|
// .ztjk {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// font-size: 14px;
|
|
|
|
|
// font-size: #747474;
|
|
|
|
|
// top: 235px;
|
|
|
|
|
// left: 680px;
|
|
|
|
|
// > img {
|
|
|
|
|
// width: 62px;
|
|
|
|
|
// height: 62px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .left {
|
|
|
|
|
// width: 640px !important;
|
|
|
|
|
// height: 500px;
|
|
|
|
|
// background: #ffffff;
|
|
|
|
|
// box-shadow: 0px 0px 16px 0px rgba(211, 131, 42, 0.1);
|
|
|
|
|
// border-radius: 32px;
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// box-sizing: border-box;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 20px;
|
|
|
|
|
// top: 10px;
|
|
|
|
|
// padding: 30px 44px;
|
|
|
|
|
// .tptitl {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// > img {
|
|
|
|
|
// width: 32px;
|
|
|
|
|
// height: 22px;
|
|
|
|
|
// margin-right: 8px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .onebx1 {
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// height: 100%;
|
|
|
|
|
// position: relative;
|
|
|
|
|
// margin-top: 30px;
|
|
|
|
|
// > div {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// font-size: 14px;
|
|
|
|
|
// font-size: #747474;
|
|
|
|
|
// > img {
|
|
|
|
|
// width: 62px;
|
|
|
|
|
// height: 62px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .item1 {
|
|
|
|
|
// top: 10px;
|
|
|
|
|
// left: 0px;
|
|
|
|
|
// }
|
|
|
|
|
// .item2 {
|
|
|
|
|
// top: 140px;
|
|
|
|
|
// left: 0px;
|
|
|
|
|
// }
|
|
|
|
|
// .item3 {
|
|
|
|
|
// top: 10px;
|
|
|
|
|
// left: 140px;
|
|
|
|
|
// }
|
|
|
|
|
// .item4 {
|
|
|
|
|
// top: 140px;
|
|
|
|
|
// left: 140px;
|
|
|
|
|
// }
|
|
|
|
|
// .item5 {
|
|
|
|
|
// top: 270px;
|
|
|
|
|
// left: 140px;
|
|
|
|
|
// }
|
|
|
|
|
// .item6 {
|
|
|
|
|
// top: 10px;
|
|
|
|
|
// left: 330px;
|
|
|
|
|
// }
|
|
|
|
|
// .item7 {
|
|
|
|
|
// top: 140px;
|
|
|
|
|
// left: 330px;
|
|
|
|
|
// }
|
|
|
|
|
// .item8 {
|
|
|
|
|
// top: 140px;
|
|
|
|
|
// left: 450px;
|
|
|
|
|
// }
|
|
|
|
|
// .upimg {
|
|
|
|
|
// width: 15px;
|
|
|
|
|
// height: 40px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 355px;
|
|
|
|
|
// top: 100px;
|
|
|
|
|
// }
|
|
|
|
|
// .rigth1 {
|
|
|
|
|
// width: 40px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 80px;
|
|
|
|
|
// top: 40px;
|
|
|
|
|
// }
|
|
|
|
|
// .rigth2 {
|
|
|
|
|
// width: 40px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 80px;
|
|
|
|
|
// top: 180px;
|
|
|
|
|
// }
|
|
|
|
|
// .rigth3 {
|
|
|
|
|
// width: 40px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 400px;
|
|
|
|
|
// top: 180px;
|
|
|
|
|
// }
|
|
|
|
|
// .rigth4 {
|
|
|
|
|
// width: 40px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 530px;
|
|
|
|
|
// top: 180px;
|
|
|
|
|
// }
|
|
|
|
|
// .rigthall {
|
|
|
|
|
// width: 40px;
|
|
|
|
|
// height: 270px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 250px;
|
|
|
|
|
// top: 50px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .rigth {
|
|
|
|
|
// width: 640px;
|
|
|
|
|
// height: 500px;
|
|
|
|
|
// background: #ffffff;
|
|
|
|
|
// box-shadow: 0px 0px 16px 0px rgba(58, 216, 188, 0.102);
|
|
|
|
|
// border-radius: 32px;
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// box-sizing: border-box;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 760px;
|
|
|
|
|
// top: 10px;
|
|
|
|
|
// padding: 30px 44px;
|
|
|
|
|
// .tptitl {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// > img {
|
|
|
|
|
// width: 32px;
|
|
|
|
|
// height: 22px;
|
|
|
|
|
// margin-right: 8px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .onebx1 {
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// height: 100%;
|
|
|
|
|
// position: relative;
|
|
|
|
|
// margin-top: 30px;
|
|
|
|
|
// > div {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// font-size: 14px;
|
|
|
|
|
// font-size: #747474;
|
|
|
|
|
// > img {
|
|
|
|
|
// width: 62px;
|
|
|
|
|
// height: 62px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .item1 {
|
|
|
|
|
// top: 140px;
|
|
|
|
|
// left: 50px;
|
|
|
|
|
// }
|
|
|
|
|
// .item2 {
|
|
|
|
|
// top: 140px;
|
|
|
|
|
// left: 170px;
|
|
|
|
|
// }
|
|
|
|
|
// .item3 {
|
|
|
|
|
// top: 270px;
|
|
|
|
|
// left: 170px;
|
|
|
|
|
// }
|
|
|
|
|
// .item4 {
|
|
|
|
|
// top: 10px;
|
|
|
|
|
// left: 300px;
|
|
|
|
|
// }
|
|
|
|
|
// .item5 {
|
|
|
|
|
// top: 140px;
|
|
|
|
|
// left: 300px;
|
|
|
|
|
// }
|
|
|
|
|
// .item6 {
|
|
|
|
|
// top: 10px;
|
|
|
|
|
// left: 430px;
|
|
|
|
|
// }
|
|
|
|
|
// .item7 {
|
|
|
|
|
// top: 140px;
|
|
|
|
|
// left: 430px;
|
|
|
|
|
// }
|
|
|
|
|
// .item8 {
|
|
|
|
|
// top: 270px;
|
|
|
|
|
// left: 430px;
|
|
|
|
|
// }
|
|
|
|
|
// .upimg {
|
|
|
|
|
// width: 15px;
|
|
|
|
|
// height: 40px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 190px;
|
|
|
|
|
// top: 230px;
|
|
|
|
|
// }
|
|
|
|
|
// .rigth1 {
|
|
|
|
|
// width: 40px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 0px;
|
|
|
|
|
// top: 180px;
|
|
|
|
|
// }
|
|
|
|
|
// .rigth2 {
|
|
|
|
|
// width: 40px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 120px;
|
|
|
|
|
// top: 180px;
|
|
|
|
|
// }
|
|
|
|
|
// .rigth3 {
|
|
|
|
|
// width: 40px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 375px;
|
|
|
|
|
// top: 180px;
|
|
|
|
|
// }
|
|
|
|
|
// .rigth4 {
|
|
|
|
|
// width: 40px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 375px;
|
|
|
|
|
// top: 50px;
|
|
|
|
|
// }
|
|
|
|
|
// .leftall {
|
|
|
|
|
// width: 182px;
|
|
|
|
|
// height: 540px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 350px;
|
|
|
|
|
// top: 50px;
|
|
|
|
|
// z-index: 99;
|
|
|
|
|
// }
|
|
|
|
|
// .rigthall {
|
|
|
|
|
// width: 165px;
|
|
|
|
|
// height: 270px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 250px;
|
|
|
|
|
// top: 50px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .buts {
|
|
|
|
|
// width: 1380px;
|
|
|
|
|
// height: 234px;
|
|
|
|
|
// background: #ffffff;
|
|
|
|
|
// box-shadow: 0 0 16px 0 rgba(0, 134, 241, 0.102);
|
|
|
|
|
// border-radius: 32px;
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// box-sizing: border-box;
|
|
|
|
|
// left: 20px;
|
|
|
|
|
// top: 540px;
|
|
|
|
|
// padding: 30px 44px;
|
|
|
|
|
// .tptitl {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// > img {
|
|
|
|
|
// width: 32px;
|
|
|
|
|
// height: 22px;
|
|
|
|
|
// margin-right: 8px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .onebx1{
|
|
|
|
|
// width: 100%;
|
|
|
|
|
// height: 100%;
|
|
|
|
|
// position: relative;
|
|
|
|
|
// margin-top: 30px;
|
|
|
|
|
// > div {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// flex-direction: column;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// font-size: 14px;
|
|
|
|
|
// font-size: #747474;
|
|
|
|
|
// > img {
|
|
|
|
|
// width: 62px;
|
|
|
|
|
// height: 62px;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .item1{
|
|
|
|
|
// left: 1000px;
|
|
|
|
|
// top:10px;
|
|
|
|
|
// }
|
|
|
|
|
// .item2{
|
|
|
|
|
// left: 800px;
|
|
|
|
|
// top:10px;
|
|
|
|
|
// }
|
|
|
|
|
// .item3{
|
|
|
|
|
// left: 600px;
|
|
|
|
|
// top:10px;
|
|
|
|
|
// }
|
|
|
|
|
// .item4{
|
|
|
|
|
// left: 400px;
|
|
|
|
|
// top:10px;
|
|
|
|
|
// }
|
|
|
|
|
// .left1{
|
|
|
|
|
// width: 60px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 900px;
|
|
|
|
|
// top: 50px;
|
|
|
|
|
// transform: rotate(180deg);
|
|
|
|
|
// }
|
|
|
|
|
// .left2{
|
|
|
|
|
// width: 60px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 700px;
|
|
|
|
|
// top: 50px;
|
|
|
|
|
// transform: rotate(180deg);
|
|
|
|
|
// }
|
|
|
|
|
// .left3{
|
|
|
|
|
// width: 60px;
|
|
|
|
|
// height: 15px;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 500px;
|
|
|
|
|
// top: 50px;
|
|
|
|
|
// transform: rotate(180deg);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// .tptitl{
|
|
|
|
|
// color: #172E60;
|
|
|
|
|
// }
|
|
|
|
|
// .bx{
|
|
|
|
|
// user-select: none;
|
|
|
|
|
// }
|
|
|
|
|
#avue-view {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
import { mapGetters } from 'vuex';
|
|
|
|
|
export default {
|
|
|
|
|
name: 'wel',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
activeNames: ['1', '2', '3', '5'],
|
|
|
|
|
logActiveNames: ['29'],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapGetters(['userInfo']),
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleChange(val) {
|
|
|
|
|
window.console.log(val);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
