zhgdyun/src/components/header.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>