|
|
|
<template>
|
|
|
|
<div class="bx" v-if="indexState">
|
|
|
|
<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 class="el-gl">
|
|
|
|
<div>公告栏</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-else class="el_Hwlogo">
|
|
|
|
<div class="content">
|
|
|
|
<img src="/public/img/p-logo.png" alt="" />
|
|
|
|
<div class="info">
|
|
|
|
<div class="name">{{ name }}</div>
|
|
|
|
<div class="slogan">您好!欢迎使用货无忧</div>
|
|
|
|
<div class="title"> 成都数联物科信息技术有限公司</div>
|
|
|
|
<div class="time">{{currentTime}}</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import { ref ,onMounted } from 'vue';
|
|
|
|
const indexState = ref(false);
|
|
|
|
const currentTime = ref('0000年00月00日00时00分00秒');
|
|
|
|
const name = ref('');
|
|
|
|
name.value = JSON.parse(localStorage.getItem('TWMS-userInfo')).content.real_name;
|
|
|
|
setInterval(() => {
|
|
|
|
const now = new Date();
|
|
|
|
const year = now.getFullYear();
|
|
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
|
|
const day = String(now.getDate()).padStart(2, '0');
|
|
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
|
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
|
|
currentTime.value = `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒`;
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
.info {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
.name{
|
|
|
|
font-size: 40px;
|
|
|
|
color: #d3832a;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.slogan{
|
|
|
|
font-size: 3em;
|
|
|
|
}
|
|
|
|
.time{
|
|
|
|
display: flex;
|
|
|
|
margin-top: 10px;
|
|
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
.title{
|
|
|
|
display: flex;
|
|
|
|
margin-top: 10px;
|
|
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.el_Hwlogo {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
span {
|
|
|
|
color: #d3832a;
|
|
|
|
}
|
|
|
|
img {
|
|
|
|
width: 300px;
|
|
|
|
height: 300px;
|
|
|
|
}
|
|
|
|
.content {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.el-gl {
|
|
|
|
font-weight: 500;
|
|
|
|
text-align: center;
|
|
|
|
position: absolute;
|
|
|
|
right: 10px;
|
|
|
|
top: 10px;
|
|
|
|
width: 15%;
|
|
|
|
background-color: #fff;
|
|
|
|
border-radius: 32px;
|
|
|
|
padding: 5px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border: 1px solid #f1eeee69;
|
|
|
|
box-shadow: 4px 6px 0 #d3dff6, 1px 1px 9px #d3dff6;
|
|
|
|
height: 762px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<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>
|