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) && workSpaceShow">
      <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 &&
          !['longguang', 'jlw', 'mulei', ''].includes(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"
        class="header-btn"
        @click="toCompanyBigScreen()"
      >
        <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"
        style="margin-right:10px"
        @click="toOverviewCommand()"
      >
        <img src="@/assets/images/icon-bigData.png" alt srcset />
        指挥部大屏
      </p> -->
      <!-- -->
      <p
        v-show="$route.path.indexOf('dataPay') != -1 && $store.state.userInfo.projectKanban == 0 && company == 'agjt'"
        class="header-btn"
        @click="toOverview6()"
      >
        <img src="@/assets/images/icon-location.png" alt srcset />
        <!-- 人员定位实时预览 -->
        定位大屏
      </p>
      <p
        v-show="
          ($route.path.indexOf('projectIndex') != -1 || $route.path.indexOf('equipmentCenter') != -1) &&
          $store.state.userInfo.projectKanban == 0 &&
          company != 'agjt'
        "
        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>
      <aiDialogue v-if="showAi" />
    </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'
import { getNewUserAllModulePageApi, getScreenAuthModuleAndMenuApi } from '@/assets/js/api/jxjadmin.js'
import aiDialogue from '@/components/aiDialogue/index.vue'

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: '',
      workSpaceShow: false,
      showAi: false
    }
  },
  components: {
    language,
    account,
    changeTheme,
    message,
    userChange,
    centerChange,
    aiDialogue
  },

  watch: {
    $route: {
      handler(newVal) {
        if (newVal.path == '/project/labor/personManage') {
          this.showQrCode = true
          // this.bindQRCode();
          if (this.company == 'agjt') {
            this.getEduIdFn()
          } else {
            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'))
    // console.log('信息',this.loginData)\
    if (this.$store.state.projectSn) {
      this.getModuleList()
    }
  },
  mounted() {
    if (this.$store.state.projectSn) {
      this.getProjectExtendInfo()
    }
    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.getEduIdFn()
    } 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: {
    // 查询全部模块(拿到工作流的模块菜单)
    getModuleList() {
      getNewUserAllModulePageApi({
        projectSn: this.$store.state.projectSn,
        moduleType: 7,
        userId: this.$store.state.userInfo.userId
      }).then(res => {
        let all = res.result.moduleList
        if (all.length == 0) {
          this.workSpaceShow = false
          return
        } else {
          this.workSpaceShow = true
        }
      })
    },
    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
          this.bindQRCode()
        }
      })
    },

    getProjectExtendInfo() {
      if (this.$store.state.projectExtendInfo) {
        this.showAi = this.$store.state.projectExtendInfo.modelEnable === 1 ? true : false
        // this.$store.commit('initializeAI')
        return
      }
      let data = {
        projectSn: this.$store.state.projectSn
      }
      getProjectExtendInfoApi(data)
        .then(res => {
          if (res && res.result) {
            this.$store.commit('setProjectExtendInfo', res.result)
            this.showAi = res.result.modelEnable === 1 ? true : false
            // this.$store.commit('initializeAI')
          }
        })
        .catch(error => {
          console.error('获取项目扩展信息失败:', error)
        })
    },
    //获取项目详细(数据看板跳转地址)
    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('人员录入二维码')
      console.log('人员录入二维码', this.educationId)
      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");
      }
    },
    getProjectDetail() {
      let data = {
        projectSn: this.$store.state.projectSn
      }
      getProjectDetail(data).then(res => {
        if (res.result) {
          this.getNewBigScreen = res.result.newBigScreen
          console.log('接口获取数据看板地址', this.getNewBigScreen)
        }
      })
    },
    toOverview6() {
      this.$forceUpdate()
      this.newBigScreen = this.getNewBigScreen
      console.log(this.newBigScreen)

      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)
        //-------------------- 跳转新版七参数
        // localStorage.getItem("jumpToken")
        // this.$store.state.userInfo.token
        this.jumpToken = localStorage.getItem('jumpToken')
        // "http://192.168.34.175:8081/#/large"
        // window.open("http://192.168.34.175:8081/#/large" + "?token=" + this.jumpToken, "_self");
        window.open(this.newBigScreen + '?token=' + this.jumpToken, '_self')
        // window.open('http://192.168.34.138:8081/#/large?token=' + this.jumpToken + '&sn=' + this.$store.state.projectSn, "_self")//这里是后台跳到大屏的操作，携带token过去
      }
    },
    async getAuthModuleAndMenu() {
      let bool = false
      const res = await getScreenAuthModuleAndMenuApi()
      if (res.code === 200) {
        bool = res.result.length ? true : false
      }
      return bool
    },
    async 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", "点击", "数据看板", "进入数据看板"]);
      //   this.$message({
      //     message: "当前项目没有看板",
      //     type: "warning",
      //   });
      // } else {
      const isPermission = await this.getAuthModuleAndMenu()
      if (!isPermission && !this.newBigScreen) {
        return this.$message({
          message: '当前用户没有访问数据看板权限',
          type: 'warning'
        })
      }
      console.log('当前跳转链接', this.newBigScreen)
      //-------------------- 跳转新版七参数
      this.jumpToken = localStorage.getItem('jumpToken')
      let userId = this.$store.state.userInfo.userId
      window.open(this.newBigScreen + '?userId=' + userId + '&sn=' + this.$store.state.projectSn, '_self')
      // window.open('http://192.168.34.216:8081/#/large?userId=' + userId + '&sn=' + this.$store.state.projectSn, "_self")//这里是后台跳到大屏的操作，携带token过去
      // }
    },
    toOverviewCommand() {
      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://47.93.215.234:55544/#/login' + '?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过去
      }
    },
    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', '点击', '龙光企业大屏', '进入企业大屏'])
    },
    
    toCompanyBigScreen() {
      let routeUrl = this.$router.resolve({
        path: '/companyAdmin/companyBigScreen'
      })
      window.open(routeUrl.href, '_self')
    },

    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>