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 != '' &&
          company != 'jlw'
        "
        class="header-btn"
        @click="toOverview3()"
      >
        <img src="@/assets/images/icon-bigData.png" alt srcset />
        企业大屏
      </p>
      <!-- 横琴大屏使用龙光大屏样式 -->
      <p
        v-show="$route.path.indexOf('firm/') != -1"
        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') &&
          $route.path.indexOf('/equipmentCenterIndx') == -1
        "
        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 bus from "@/util/eventBus.js";
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,
      jumpToken: '',
    };
  },
  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'))
    }
    console.log('进入页面显示的企业头部名称', this.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
      bus.$emit("headerAeraSn");
      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 if (COMPANY == 'jlw') {
        window.open(this.$router.resolve(routeUrl).href, '_blank');
      }
      else {
        window.location.href = routeUrl.href + '?COMPANY=' + COMPANY
        // window.open('#/project/dataBoard/environment?COMPANY=' + COMPANY, "_blank");
      }
    },
    toOverview2() {
      if (this.company == 'syhy') {
        //-------------------- 跳转新版七参数
        this.jumpToken = localStorage.getItem('jumpToken')
        window.open('http://101.43.164.214:45022/#/large?token=' + this.jumpToken, "_self")//沈阳和盈
        // window.open('http://192.168.34.226:8081/#/large?token=' + this.jumpToken, "_self")//这里是后台跳到大屏的操作，携带token过去 
      } else {
        //--------------------原版项目后台跳转数据看板
        //看看项目看板内有没有菜单
        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', '点击', '数据看板', '进入数据看板'])
      }

    },
    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>