457 lines
14 KiB
Vue
457 lines
14 KiB
Vue
<template>
|
||
<!-- v-if="headerShow" -->
|
||
<div class="title flex">
|
||
<div class="title_l flex">
|
||
<img v-if="systemInfo.platformLogo" :src="systemInfo.platformLogo" class="logo" height="25"/>
|
||
<img v-else-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="logo" height="25"/>
|
||
<!-- <span v-if="$route.path.indexOf('/firm/')!=-1">{{headerName}}</span> -->
|
||
<!-- 南昌头部样式 -->
|
||
<span class="canClick" v-if="company=='nanchang'" @click="changeArea(-1)">{{titleName}}</span>
|
||
<span class="canClick" v-if="$route.path.indexOf('/firm/') == -1 && company == 'nanchang'" @click="changeArea(-1)">{{titleName?'':headerName}}</span>
|
||
<!-- 以上南昌头部样式 -->
|
||
|
||
<span class="canClick" v-if="$route.path.indexOf('/firm/')!=-1 && company != 'nanchang'" @click="changeArea(-1)">{{systemInfo.platformName}}</span>
|
||
<span class="canClick" v-if="$route.path.indexOf('/firm/') == -1 && company != 'nanchang'" @click="changeArea(-1)">{{titleName?(systemInfo.platformName+' - '+titleName):headerName}}</span>
|
||
<span class="canClick" v-show="$route.path.indexOf('/firm/')!=-1 && company != 'nanchang'" v-for="(item,index) in $store.state.mapBackArr" :key="index" @click="changeArea(index)">>{{item.name}}</span>
|
||
</div>
|
||
<div class="headerRight">
|
||
<el-popover
|
||
placement="bottom"
|
||
width="200"
|
||
v-show="showQrCode&&$store.state.userInfo.inputQrCode==0"
|
||
trigger="click"
|
||
>
|
||
<div id="qrCode" ref="qrCodeDiv"></div>
|
||
<el-button slot="reference" type="text" style="color: #fff;padding:0"
|
||
>人员录入二维码 <i class="el-icon-arrow-down"></i></el-button
|
||
>
|
||
</el-popover>
|
||
<div class="audio-box" v-if="isShowAudio">
|
||
<audio v-if="isLoop" autoplay loop controls>
|
||
<!-- <source src="/doc/fireAlarm.mp3" type="audio/mpeg"> -->
|
||
<source :src="mp3Url" type="audio/mpeg">
|
||
</audio>
|
||
<audio v-else autoplay controls style="display:none">
|
||
<!-- <source src="/doc/fireAlarm.mp3" type="audio/mpeg"> -->
|
||
<source :src="mp3Url" type="audio/mpeg">
|
||
</audio>
|
||
<div v-if="isLoop" class="close-btn" @click="closeAudio">
|
||
<i class="el-icon-circle-close"></i>
|
||
</div>
|
||
</div>
|
||
<p
|
||
v-show="$route.path.indexOf('firm/') != -1&&$store.state.userInfo.companyBigScreen==0 && company=='longguang'"
|
||
class="header-btn"
|
||
@click="toOverview4()"
|
||
>
|
||
<img src="@/assets/images/icon-bigData.png" alt srcset />
|
||
龙光企业大屏
|
||
</p>
|
||
<!-- <p
|
||
class="header-btn"
|
||
@click="toOverview4()"
|
||
>
|
||
<img src="@/assets/images/icon-bigData.png" alt srcset />
|
||
龙光企业大屏
|
||
</p> -->
|
||
<p
|
||
v-show="$route.path.indexOf('firm/') != -1&&$store.state.userInfo.companyBigScreen==0&&company!='longguang' && company!=''"
|
||
class="header-btn"
|
||
@click="toOverview3()"
|
||
>
|
||
<img src="@/assets/images/icon-bigData.png" alt srcset />
|
||
企业大屏
|
||
</p>
|
||
<!-- 横琴大屏使用龙光大屏样式 -->
|
||
<p
|
||
v-show="$route.path.indexOf('firm/') != -1&&$store.state.userInfo.companyBigScreen==0 && company==''"
|
||
class="header-btn"
|
||
@click="toOverview4()"
|
||
>
|
||
<img src="@/assets/images/icon-bigData.png" alt srcset />
|
||
综合监管大屏
|
||
</p>
|
||
<p
|
||
v-show="$route.path.indexOf('projectIndex') != -1&&$store.state.userInfo.projectKanban==0"
|
||
class="header-btn"
|
||
@click="toOverview2()"
|
||
>
|
||
<img src="@/assets/images/icon-bigData.png" alt srcset />
|
||
数据看板
|
||
</p>
|
||
<p
|
||
v-for="(item, index) in $store.state.menuList"
|
||
:key="index"
|
||
v-if="
|
||
item.target == '_blank' && $route.path.indexOf('/projectIndex') == -1 && (item.menuName != 'LED大屏' || company != 'nanchang')
|
||
"
|
||
class="header-btn"
|
||
@click="toOverview(item.path)"
|
||
>
|
||
<!-- 绿色施工-->
|
||
<img src="@/assets/images/icon-bigData.png" />
|
||
{{ item.menuName}}
|
||
</p>
|
||
<!-- <p v-if="$route.path.indexOf('/project/towerCrane') != -1"
|
||
class="header-btn"
|
||
style="line-height: 15px"
|
||
@click="toOverview5('/project/bigSiteVisualization')"
|
||
>
|
||
<i class="el-icon-full-screen"></i>
|
||
塔吊可视大屏
|
||
</p> -->
|
||
<message @sendMsg="sendMessage"></message>
|
||
<div
|
||
class="title_r"
|
||
v-if="
|
||
showR &&
|
||
$route.path.indexOf('/equipmentCenter/') == -1
|
||
"
|
||
>
|
||
<!-- <changeTheme></changeTheme> -->
|
||
<!-- <language></language> -->
|
||
<account v-if="!uid"></account>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import language from "./language";
|
||
import account from "./account";
|
||
import changeTheme from "./changeTheme";
|
||
import message from "./message";
|
||
import QRCode from "qrcodejs2";
|
||
export default {
|
||
props: ["titleName", "showR"],
|
||
data() {
|
||
return {
|
||
headerShow,
|
||
LOGO_white:LOGO_white,
|
||
headerName:'',
|
||
isShowAudio: false,
|
||
loginData:{},
|
||
systemInfo:{
|
||
"loginBackgroundImage": "",
|
||
"loginLogo": "",
|
||
"platformLogo": "",
|
||
"platformName": "智慧工地云平台"
|
||
},
|
||
showQrCode: false,
|
||
uid:this.$store.state.uid, //是否是免码登录 true 第三方免码登录 免码登录不回显退出按钮
|
||
company:'',
|
||
mp3Url: '',
|
||
isLoop: true,
|
||
timer: null
|
||
};
|
||
},
|
||
components: { language, account, changeTheme,message },
|
||
|
||
watch: {
|
||
$route: {
|
||
handler(newVal) {
|
||
if(newVal.path == '/project/labor/personManage'){
|
||
this.showQrCode = true;
|
||
this.bindQRCode();
|
||
}else{
|
||
this.showQrCode = false
|
||
}
|
||
},
|
||
},
|
||
|
||
},
|
||
created(){
|
||
|
||
this.company = COMPANY;
|
||
console.log('this.company',this.company)
|
||
console.log('COMPANY',COMPANY)
|
||
this.loginData = JSON.parse(localStorage.getItem('systemInfo'))
|
||
// console.log('信息',this.loginData)
|
||
|
||
},
|
||
mounted() {
|
||
|
||
if(localStorage.getItem('systemInfo')){
|
||
this.systemInfo=JSON.parse(localStorage.getItem('systemInfo'))
|
||
}
|
||
this.headerName = this.systemInfo.platformName
|
||
if(this.$route.path.indexOf('equipmentCenter/')!=-1){
|
||
this.headerName += ' - 设备中台'
|
||
}
|
||
if (this.$store.state.currentProDetail) {
|
||
this.headerName += " - " + this.$store.state.currentProDetail.projectName;
|
||
}
|
||
if (this.$store.state.currentMoudle) {
|
||
this.headerName += " - " + this.$store.state.currentMoudle.moduleName;
|
||
if (COMPANY == "nanchang") {
|
||
this.headerName = this.$store.state.currentMoudle.moduleName;
|
||
}
|
||
};
|
||
|
||
if(this.$route.path == '/project/labor/personManage'){
|
||
this.showQrCode = true;
|
||
this.bindQRCode();
|
||
}else{
|
||
this.showQrCode = false
|
||
}
|
||
|
||
},
|
||
|
||
methods: {
|
||
closeAudio(){
|
||
this.isShowAudio = false
|
||
},
|
||
sendMessage(val){
|
||
this.isShowAudio = false
|
||
console.log(val,this.isShowAudio)
|
||
// let url = "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=2746545937,1203007354&fm=218&app=92&f=PNG?w=121&h=75&s=B59079335D03484B4CD997F10300C027"
|
||
if(this.$store.state.userInfo.accountType == 5 || this.$store.state.userInfo.accountType == 6){
|
||
console.log(localStorage.getItem('soundList'))
|
||
if(localStorage.getItem('soundList')){
|
||
let arr = JSON.parse(localStorage.getItem('soundList'))
|
||
arr.forEach(item=>{
|
||
if(item.type == val.type && val.type != '8'){
|
||
console.log(1,item)
|
||
clearTimeout(this.timer)
|
||
this.mp3Url = this.$store.state.FILEURL+item.fileUrl
|
||
this.isLoop = item.playType==2 ? true:false
|
||
let _this = this
|
||
this.timer = setTimeout(()=>{
|
||
_this.isShowAudio = true
|
||
},500)
|
||
}
|
||
if(item.type == val.type && val.type == '8' && (val.itemType == '0' || val.itemType == '1' || val.itemType == '2')){
|
||
console.log(2,item)
|
||
clearTimeout(this.timer)
|
||
this.mp3Url = this.$store.state.FILEURL+item.fileUrl
|
||
this.isLoop = item.playType == 2 ? true:false
|
||
let _this = this
|
||
this.timer = setTimeout(()=>{
|
||
_this.isShowAudio = true
|
||
},500)
|
||
console.log(this.isShowAudio)
|
||
console.log(this.mp3Url)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
// this.$notify({
|
||
// title: '!!!!',
|
||
// dangerouslyUseHTMLString: true,
|
||
// message: '<div style="display: flex; align-items: center;"><img style="width: 50px;margin-right: 6px;height: 50px;" src="'+ url +'"/><span>123564</span></div>'
|
||
// });
|
||
},
|
||
//生成人员录入 二维码
|
||
bindQRCode: function () {
|
||
document.getElementById("qrCode").innerHTML = "";
|
||
let httpUrl = window.location.origin;
|
||
let userId = this.$store.state.userInfo.userId;
|
||
let projectSn = this.$store.state.projectSn;
|
||
new QRCode(this.$refs.qrCodeDiv, {
|
||
text: httpUrl+'/doc/h5/index.html?userId='+userId+'&projectSn='+projectSn,
|
||
width: 200,
|
||
height: 200,
|
||
colorDark: "#333333", //二维码颜色
|
||
colorLight: "#ffffff", //二维码背景色
|
||
correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
|
||
});
|
||
},
|
||
|
||
changeArea(index) {
|
||
var accountType = this.$store.state.userInfo.accountType
|
||
if (this.$route.path.indexOf("/firm/") != -1) {
|
||
if((accountType!=2&&index == -1)||(accountType>3&&index == 0)||(accountType==7&&index < 2)){
|
||
return false
|
||
}
|
||
if (index == -1) {
|
||
this.$store.commit("setMapBackArr", []);
|
||
} else {
|
||
var arr = this.$store.state.mapBackArr;
|
||
arr = arr.splice(0, index + 1);
|
||
this.$store.commit("setMapBackArr", arr);
|
||
}
|
||
}else if (window.location.href.indexOf("equipmentCenter.html") != -1) {
|
||
console.log(window.location.href)
|
||
if(COMPANY == 'nanchang') {
|
||
window.open('/index.html#/firm/projectManage', "_self");
|
||
}else {
|
||
window.open('/#/firm/projectManage', "_self");
|
||
}
|
||
}else {
|
||
// 点击左上角会跳转到首页
|
||
if((accountType!=2 && index == -1 && accountType!=7 && accountType!=3 && accountType!=4)){
|
||
return false
|
||
}
|
||
this.$store.commit("setIsShowBackIndex", false);
|
||
this.$store.commit("setMenuList",this.$store.state.projectManageMenuList)
|
||
let routeUrl = this.$router.resolve({
|
||
path: "/firm/projectManage",
|
||
});
|
||
window.open(routeUrl.href, "_self");
|
||
// 跳转后刷新此跳转页面
|
||
location.reload();
|
||
}
|
||
},
|
||
//绿色施工总览
|
||
toOverview(url) {
|
||
let routeUrl = this.$router.resolve({
|
||
path: url,
|
||
});
|
||
if(COMPANY != 'longguang' && url != '/project/bigSiteVisualization'){
|
||
window.open(routeUrl.href, "_blank");
|
||
|
||
}else {
|
||
window.location.href = routeUrl.href + '?COMPANY=' + COMPANY
|
||
// window.open('#/project/dataBoard/environment?COMPANY=' + COMPANY, "_blank");
|
||
}
|
||
},
|
||
toOverview2() {
|
||
//看看项目看板内有没有菜单
|
||
let arr = this.$store.state.userInfo.menuAuthority.moduleList
|
||
let arr2=[]
|
||
arr.forEach(element => {
|
||
if(element.moduleType==4){
|
||
arr2.push(element)
|
||
return
|
||
}
|
||
});
|
||
|
||
// 如果数组为空表示该用户没有权限访问
|
||
if (!arr2.length) {
|
||
return this.$message.warning('暂无权限');
|
||
}
|
||
|
||
let routeUrl = this.$router.resolve({
|
||
path: arr2[0].modulePath,
|
||
});
|
||
window.location.href = routeUrl.href
|
||
window._paq.push(['trackEvent', '点击', '数据看板','进入数据看板' ])
|
||
// window.open(routeUrl.href, "_blank");
|
||
},
|
||
toOverview3() {
|
||
if(COMPANY=='shenbai'){
|
||
let routeUrl = this.$router.resolve({
|
||
path: "/companyAdmin/shenbaiBigScreen",
|
||
});
|
||
// window.open(routeUrl.href, "_blank");
|
||
} else if (COMPANY=='henan') {
|
||
let routeUrl = this.$router.resolve({
|
||
path: "/companyAdmin/heNanBigScreen",
|
||
});
|
||
window.open(routeUrl.href, "_blank");
|
||
} else {
|
||
let routeUrl = this.$router.resolve({
|
||
path: "/companyAdmin/bigScreen",
|
||
});
|
||
window.open(routeUrl.href, "_blank");
|
||
}
|
||
|
||
},
|
||
//龙光企业大屏
|
||
toOverview4() {
|
||
//原型 2.0
|
||
// let routeUrl = this.$router.resolve({
|
||
// path: "/companyAdmin/longguangBigScreen",
|
||
// });
|
||
//原型 3.0
|
||
let routeUrl = this.$router.resolve({
|
||
path: "/companyAdmin/longguangBigScreen2",
|
||
});
|
||
// let routeUrl = this.$router.resolve({
|
||
// path: "/companyAdmin/heNanBigScreen",
|
||
// });
|
||
window.open(routeUrl.href, "_self");
|
||
window._paq.push(['trackEvent', '点击', '龙光企业大屏','进入企业大屏' ])
|
||
},
|
||
|
||
toOverview5(val){
|
||
let routeUrl = this.$router.resolve({
|
||
path: val,
|
||
});
|
||
// window.open(routeUrl.href, "_blank");
|
||
window.location.href = routeUrl.href
|
||
}
|
||
|
||
|
||
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.title {
|
||
width: 100%;
|
||
color: #fff;
|
||
background-image: linear-gradient(#262d47, #343d5f);
|
||
box-sizing: border-box;
|
||
padding: 0 23px;
|
||
height: 61px;
|
||
}
|
||
.title_l {
|
||
font-family: PingFangSC-Semibold;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
letter-spacing: 0;
|
||
// width: 100%;
|
||
img {
|
||
margin-right: 14px;
|
||
}
|
||
}
|
||
.title_r {
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
p {
|
||
margin: 3px 0;
|
||
}
|
||
/deep/.header-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin: 0px 0px 0 30px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
min-width: 100px;
|
||
white-space: nowrap;
|
||
img,
|
||
i {
|
||
margin-right: 8px;
|
||
width: 20px;
|
||
height: 20px;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
.headerRight {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
.canClick {
|
||
cursor: pointer;
|
||
}
|
||
/deep/.el-input__inner {
|
||
background-color: rgba(3, 1, 1, 0.24);
|
||
border: 1px solid rgba(58, 123, 255, 0.33);
|
||
color: #fff;
|
||
}
|
||
.audio-box{
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
audio{
|
||
height: 30px;
|
||
}
|
||
.close-btn{
|
||
cursor: pointer;
|
||
color: #F56C6C;
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|