zhgdyun/src/components/header.vue

<template>
  <!--  v-if="headerShow" -->
  <div class="title">
    <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)"
        >{{ updateTitle }}</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="title_near flex" v-if="![1,2].includes($store.state.userInfo.accountType)">
      <userChange></userChange>
    </div>
    <div class="title_near-tow flex" v-if="![11,1,2].includes($store.state.userInfo.accountType)">
      <div class="divider-line"></div>
      <centerChange></centerChange>
    </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 &&
            $store.state.userInfo.companyBigScreen == 0
        "
        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";
import userChange from "@/components/userChange.vue";
import centerChange from "@/components/centerChange.vue";
import { getProjectDetail, getProjectExtendInfoApi } from "@/assets/js/api/baseInfo.js";

export default {
  props: ["titleName", "showR"],
  data() {
    return {
      getNewBigScreen: null,
      newBigScreen: null,
      headerShow,
      LOGO_white: LOGO_white,
      headerName: "",
      isShowAudio: false,
      loginData: {},
      systemInfo: {
        loginBackgroundImage: "",
        loginLogo: "",
        platformLogo: "",
        platformName: "智慧工地云平台",
      },
      uid: this.$store.state.uid, //是否是免码登录 true 第三方免码登录  免码登录不回显退出按钮
      company: "",
      mp3Url: "",
      isLoop: true,
      timer: null,
      jumpToken: "",
      showQrCode: false,
      educationId: ""
    };
  },
  components: {
    language,
    account,
    changeTheme,
    message,
    userChange,
    centerChange,
  },

  watch: {
    $route: {
      handler(newVal) {
        if (newVal.path == "/project/labor/personManage") {
          this.showQrCode = true;
          this.bindQRCode();
        } else {
          this.showQrCode = false;
        }
      },
    },
    newBigScreen(newVal) {
      this.newBigScreen = newVal;
    },
  },
  beforeDestroy() {
    this.newBigScreen = null;
    console.log("当前数据看板地址", this.newBigScreen);
  },
  created() {
    this.company = COMPANY;
    console.log("this.company", this.company);
    console.log("COMPANY", COMPANY);
    if (this.$store.state.projectSn) {
      this.getProjectDetail();
    }
    this.loginData = JSON.parse(localStorage.getItem("systemInfo"));
    this.getEduIdFn();
    // 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;
    }
  },
  computed: {
    updateTitle() {
      if (
        this.$store.state.currentProDetail &&
        this.$store.state.currentProDetail.name
      ) {
        return (
          this.systemInfo.platformName +
          " - " +
          this.$store.state.currentProDetail.name
        );
      } else {
        return this.headerName;
      }
    },
  },
  methods: {
    getEduIdFn(){
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      getProjectExtendInfoApi(data).then((res) => {
        console.log(res,112233445666);
        if(res && res.result){
          this.educationId = res.result.educationId
        }
      });
    },
    //获取项目详细(数据看板跳转地址)
    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() {
      console.log("人员录入二维码");
      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 + 
          "&educationId=" +
          this.educationId,
        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");
      }
    },
    getProjectDetail() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      getProjectDetail(data).then((res) => {
        if (res.result) {
          this.getNewBigScreen = res.result.newBigScreen;
          console.log("接口获取数据看板地址", this.getNewBigScreen);
        }
      });
    },
    toOverview2() {
      this.$forceUpdate();
      this.newBigScreen = this.getNewBigScreen;

      if (this.newBigScreen == null || this.newBigScreen == "") {
        //--------------------原版项目后台跳转数据看板
        //看看项目看板内有没有菜单
        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", "点击", "数据看板", "进入数据看板"]);
      } else {
        console.log("当前跳转链接", this.newBigScreen);
        //-------------------- 跳转新版七参数
        this.jumpToken = localStorage.getItem("jumpToken");
        window.open(this.newBigScreen + "?token=" + this.jumpToken + '&sn=' + this.$store.state.projectSn, "_self");
        // window.open('http://192.168.34.138:8081/#/large?token=' + this.jumpToken + '&sn=' + this.$store.state.projectSn, "_self")//这里是后台跳到大屏的操作，携带token过去
      }
      // if (this.newBigScreen != null) {
      //   console.log("当前跳转链接",this.newBigScreen)
      //   //-------------------- 跳转新版七参数
      //   this.jumpToken = localStorage.getItem('jumpToken')
      //   window.open(this.newBigScreen + '?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', '点击', '数据看板', '进入数据看板'])
      // }
      // 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 if (this.company == 'jxwjj') {
      //   this.jumpToken = localStorage.getItem('jumpToken')
      //   window.open('http://183.249.224.118:9003/#/large?token=' + this.jumpToken, '_self') //嘉兴王江泾公用码头项目
      // } else if (this.company == 'gxbs') {
      //   this.jumpToken = localStorage.getItem('jumpToken')
      //   window.open('http://101.43.164.214:11113/#/large?token=' + this.jumpToken, '_self') //广西百色项目
      // } 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;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.title_l {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
  margin-right: 50px;
  img {
    margin-right: 14px;
  }
}
.title_near {
  margin-right: 50px;
}
.title_near-tow {
  .divider-line {
    width: 1px;
    height: 16px;
    background: #ffffff;
    margin-right: 50px;
  }
}
.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;
  margin-left: auto;
}
.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>