327 lines
7.2 KiB
Vue
327 lines
7.2 KiB
Vue
<template>
|
|
<view class="headInfo">
|
|
<view class="infoLeft">
|
|
<view class="infoLogo">
|
|
<image src="../../static/images/theme/logo.png" mode="" class="logo"></image>
|
|
</view>
|
|
<view class="navList">
|
|
<template v-for="(item,index) in navList">
|
|
<navigator :key="index" :url="item.url" open-type="redirect" class="item">
|
|
<view class="itemInfo" :class="item.type?'navActive':''">
|
|
<image :src="item.imageUrl" v-if="item.type"></image>
|
|
<image :src="item.imageUrl2" v-if="!item.type"></image>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
</navigator>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<view class="infoRight">
|
|
<view class="info" @click="showInfo">
|
|
<image class="toux" src="@/static/images/theme/toux.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="infoList" v-if="infoType">
|
|
<view class="userInfo">
|
|
<p>张星星 - 堆场计划员</p>
|
|
<p>12341234567</p>
|
|
</view>
|
|
<view class="borTop" @click="tabsPort('center')">
|
|
<uni-icons type="loop" size="16" />
|
|
<text>切换港区</text>
|
|
</view>
|
|
<view class="borTop" @click="outLogin">
|
|
<uni-icons type="undo" size="16" />
|
|
<text>退出登录</text>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="popup" background-color="#fff" @change="change">
|
|
<view class="popupBox">
|
|
<view class="ul">
|
|
<view class="li" v-for="(item,index) in portList" :key="index"
|
|
:class="{active:activeIndex == index}" @click="selectPort(item,index)">
|
|
<text>{{item.title}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="btnBox">
|
|
<button class="btn" type="default" @click="close">取 消</button>
|
|
<button class="btn" type="primary" @click="toGo">确 定</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup ref="popup2" type="dialog">
|
|
<uni-popup-dialog confirmText="确定" content="是否退出登录？" @close="close2"
|
|
@confirm="outConfirm"></uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
infoType: false,
|
|
// 弹框状态
|
|
type: "",
|
|
portList: [{
|
|
value: "1",
|
|
title: "港区1"
|
|
},
|
|
{
|
|
value: "2",
|
|
title: "港区2"
|
|
},
|
|
{
|
|
value: "3",
|
|
title: "港区3"
|
|
},
|
|
],
|
|
portId: "",
|
|
portName: "",
|
|
activeIndex: 0,
|
|
navList: [{
|
|
url: "/pages/index/index",
|
|
name: "装船指令",
|
|
type: false,
|
|
imageUrl: "../../static/images/theme/zcIcon1-1.png",
|
|
imageUrl2: "../../static/images/theme/zcIcon1-2.png"
|
|
},
|
|
{
|
|
url: "/pages/discharge/index",
|
|
name: "卸船指令",
|
|
type: false,
|
|
imageUrl: "../../static/images/theme/xcIcon1-1.png",
|
|
imageUrl2: "../../static/images/theme/xcIcon1-2.png"
|
|
}, {
|
|
url: "/pages/shipWork/index",
|
|
name: "船舶作业",
|
|
type: false,
|
|
imageUrl: "../../static/images/theme/cbIcon1-1.png",
|
|
imageUrl2: "../../static/images/theme/cbIcon1-2.png"
|
|
}, {
|
|
url: "/pages/quality/index",
|
|
name: "货物质量",
|
|
type: false,
|
|
imageUrl: "../../static/images/theme/cbIcon1-1.png",
|
|
imageUrl2: "../../static/images/theme/cbIcon1-2.png"
|
|
}, {
|
|
url: "/pages/monitor/index",
|
|
name: "场位监控",
|
|
type: false,
|
|
imageUrl: "../../static/images/theme/cbIcon1-1.png",
|
|
imageUrl2: "../../static/images/theme/cbIcon1-2.png"
|
|
}
|
|
],
|
|
}
|
|
},
|
|
props: {
|
|
navIndex: {
|
|
type: Number,
|
|
default: 0,
|
|
required: true
|
|
},
|
|
},
|
|
mounted() {
|
|
this.activeIndex = uni.getStorageSync("selectPortIndex")
|
|
this.portId = this.portList[this.activeIndex].value
|
|
this.portName = this.portList[this.activeIndex].title
|
|
this.navList[this.navIndex].type = true
|
|
},
|
|
methods: {
|
|
showInfo() {
|
|
this.infoType = !this.infoType
|
|
},
|
|
// 点击切换港区
|
|
tabsPort(type) {
|
|
this.type = type
|
|
this.$refs.popup.open(type)
|
|
},
|
|
// 弹框
|
|
change(e) {},
|
|
// 选择弹框内容
|
|
selectPort(item, index) {
|
|
this.portName = item.title
|
|
this.portId = item.value
|
|
this.activeIndex = index
|
|
},
|
|
// 确认弹框
|
|
toGo() {
|
|
let portObj = {
|
|
portName: this.portName,
|
|
portId: this.portId
|
|
}
|
|
uni.setStorageSync('portObj', portObj);
|
|
uni.setStorageSync('selectPortIndex', this.activeIndex)
|
|
this.$refs.popup.close()
|
|
this.infoType = false
|
|
uni.navigateTo({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
// 关闭弹框
|
|
close() {
|
|
this.infoType = false
|
|
this.$refs.popup.close()
|
|
},
|
|
// 点击退出登录
|
|
outLogin() {
|
|
this.$refs.popup2.open()
|
|
},
|
|
// 确认退出登录
|
|
outConfirm() {
|
|
uni.navigateTo({
|
|
url: '/pages/login/index'
|
|
})
|
|
},
|
|
// 取消退出登录
|
|
close2() {
|
|
this.infoType = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.headInfo {
|
|
width: 100%;
|
|
height: 66px;
|
|
line-height: 66px;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #999999;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
.infoLeft {
|
|
display: flex;
|
|
|
|
.logo {
|
|
width: 175px;
|
|
height: 32px;
|
|
margin: 16px;
|
|
margin-left: 24px;
|
|
}
|
|
|
|
.navList {
|
|
display: flex;
|
|
margin-top: 12px;
|
|
|
|
.item {
|
|
width: 124px;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
border-radius: 8px;
|
|
background: #F2F7FC;
|
|
margin-right: 16px;
|
|
|
|
.itemInfo {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #445173;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
image {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-top: 9px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
}
|
|
|
|
.navActive {
|
|
background: #0067CF;
|
|
color: #fff !important;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.infoRight {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.info {
|
|
margin-right: 20px;
|
|
|
|
.toux {
|
|
margin-top: 10rpx;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.infoList {
|
|
width: 200px;
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
z-index: 999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 60px;
|
|
|
|
.borTop {
|
|
border-top: 1px #ccc solid;
|
|
|
|
/deep/.uni-icons {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popupBox {
|
|
width: 500px;
|
|
height: 400px;
|
|
overflow: scroll;
|
|
padding: 30px;
|
|
|
|
.ul {
|
|
display: felx;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.li {
|
|
padding: 15px 0px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.active {
|
|
color: #0079fe;
|
|
border-color: #0079fe;
|
|
}
|
|
}
|
|
|
|
.btnBox {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.btn {
|
|
flex: 1;
|
|
padding: 10px 0;
|
|
margin: 10px 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.uni-dialog-title {
|
|
display: none;
|
|
}
|
|
}
|
|
</style> |