zhgdyun/src/views/projectAdmin/projectIndex.vue

<template>
  <!-- 项目首页 -->
  <div class="fullHeight">
    <vhead :titleName="projectName" :showR="true"></vhead>
    <!-- <div @click="test">123</div> -->
    <div class="pageContainer">
      <div class="pageDataContainer">
        <vue-scroll style="height:900px">
          <div class="projectIndexBox" ref="artList" @scroll="scrollGet($event)">
            <!-- <div class="module_title">{{$t('message.homeLayout.existingProducts')}}</div> -->
            <div class="projectIndex" id="projectIndex">
              <div class="moduleBox" v-for="(item, index) in list" :key="index" v-if="item.operation">
                <div class="module_title" v-if="index == 0 || list[index - 1].labelName != item.labelName">
                  {{ item.labelName }}
                </div>
                <div class="module canclick" :class="{ hovers: item.operation }" @click="itemClick(item, index)" ref="refName">
                  <img v-if="iconType == 1" :src="require('../../assets/images/menu/' + item.moduleIcon + '.png')" class="icon" />
                  <img
                    v-if="iconType == 2 && item.bigModuleIcon"
                    :src="require('../../assets/images/menu/' + item.bigModuleIcon + '.png')"
                    style="margin-bottom: 10px"
                    class="icon"
                  />
                  <div class="title_wrap">
                    <div class="head1">{{ item.moduleName }}</div>
                    <div class="subhead">{{ item.moduleDesc }}</div>
                    <!-- {{$t('message.projectIndex.moudleName1')}} -->
                  </div>
                </div>
              </div>
            </div>
            <div v-if="showNotBuyMoudle">
              <div class="module_title">
                {{ $t('message.homeLayout.ununlockedProducts') }}
              </div>
              <div class="projectIndex">
                <div
                  class="module"
                  :class="{ hovers: item.operation }"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="itemClick(item, index)"
                  v-if="!item.operation"
                >
                  <img v-if="iconType == 1" :src="require('../../assets/images/menu/' + item.moduleIcon2 + '.png')" class="icon" />
                  <img
                    v-if="iconType == 2 && item.bigModuleIcon"
                    :src="require('../../assets/images/menu/' + item.bigModuleIcon + '.png')"
                    style="margin-bottom: 10px; opacity: 0.2"
                    class="icon"
                  />
                  <div class="title_wrap grey">
                    <div class="head1">{{ item.moduleName }}</div>
                    <div class="subhead">{{ item.moduleDesc }}</div>
                    <!-- {{$t('message.projectIndex.moudleName1')}} -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import { getProjectInfoBySn } from '@/assets/js/api/overview'
import vhead from '@/components/header'
import axios from 'axios'
import { getProjectDetail } from '@/assets/js/api/baseInfo.js'
import { getProjectModuleList, getAllModuleApi } from '@/assets/js/api/jxjadmin.js'
import { getSafeyHatSessionApi } from '@/assets/js/api/demo'
import { getDockingUrlApi } from '@/assets/js/api/configManage'
export default {
  name: 'projectIndex',
  components: { vhead },
  data() {
    return {
      firstIn: 0,
      selfScrollTop: 0,
      projectSn: '',
      baseURL: '',
      projectNumber: null,
      projectName: '',
      list: [],
      showNotBuyMoudle: showNotBuyMoudle,
      brIndex: '',
      iconType: '1',
      allList: [],
      COMPANY: COMPANY,
    }
  },
  watch: {
    userInfo(newValue) {
      // console.log('新值',newValue);
      this.allList = newValue.menuAuthority.moduleList
      this.getAllModule(this.allList)
    }

    // realAllList(newValue) {
    //   this.list = newValue
    // }
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
    realAllList() {
      return this.list
    },
    data() {
      return this.$store.state.menuList
    }
  },
  async created() {
    this.headShow = true;
    this.isFirstLogin = !sessionStorage.getItem('isFirstLogin')
    this.projectSn = this.$store.state.projectSn
    this.baseURL = this.$http.defaults.baseURL
    if (localStorage.getItem('systemInfo')) {
      this.iconType = JSON.parse(localStorage.getItem('systemInfo')).iconType
        ? JSON.parse(localStorage.getItem('systemInfo')).iconType
        : '1'
    }
    console.log(this.iconType, 'iconType,iconTypeiconTypeiconTypeiconTypeiconType')
    this.allList = this.$store.state.userInfo.menuAuthority.moduleList
    await this.getAllModule(this.allList)
    await this.getDataDateils()
    await this.getProjectNumber()
  },
  async mounted() {
    // if(this.firstIn == 0) {
    //   this.firstIn ++
    //   this.$router.go(0)
    // }
    // this.$forceUpdate()
  },
  activated() {
    this.$refs.artList.scrollTop = this.selfScrollTop
  },
  methods: {
    test() {
      let item = this.list.find(item => item.moduleName === '劳务管理系统')
      let arr = item.menuList
      console.log(arr, '测试数据')
      let arr2 = []
      arr.forEach(element => {
        if (element.menuEquipment == 0) {
          arr2.push(element)
        }
      })
      this.$store.commit('setMenuList', arr2)
      this.$store.commit('setIsShowBackIndex', true)
      this.$store.commit('setMoudle', item)
      if (arr2[0].target == '_blank') {
        let routeUrl = ''
        if (arr2[0].path.indexOf('http') != -1) {
          routeUrl = arr2[0].path
        } else {
          let url = this.$router.resolve({
            path: arr2[0].path
          })
          routeUrl = url.href
        }
        window.open(routeUrl, '_blank')
      } else {
        if (arr2[0].path == '' || arr2[0].path.indexOf('/') == -1) {
          this.$router.push(arr2[0].menuList[0].path)
        } else {
          this.$router.push(arr2[0].path)
        }
      }
      window._paq.push(['trackEvent', '点击', item.moduleName, '进入' + item.moduleName])
    },
    scrollGet(e) {
      this.selfScrollTop = this.$refs.artList.scrollTop
    },

    getSafeyHatSession() {
      let data = {}
      data.projectSn = this.projectSn
      getSafeyHatSessionApi(data).then(res => {
        console.log('安全帽跳转', res)
        // {
        //     "success":true,
        //     "message":"操作成功！",
        //     "code":200,
        //     "result":{
        //         "msg_code":"GetSucc",
        //         "session_id":"d3a3c4d17c46e29dab9c9178d5b380c5",
        //         "userName":"rdys_test",
        //         "status":true,
        //         "token":"d3a3c4d17c46e29dab9c9178d5b380c5"
        //     },
        //     "timestamp":1634904162951
        // }
        // 此处注释是因为免登陆 传projectId到后端
        if (res.code == 200) {
          this.url = 'https://caps.runde.pro/login#token=' + res.result.token + '&user_name=' + res.result.userName + '&target=home'
          // let url = 'https://caps.runde.pro/login#token='+ res.result.token + '&user_name=' + res.result.userName + '&target=home'
          window.open(this.url)
        }
      })
    },
    getProjectNumber() {
      let data = {
        projectSn: this.projectSn
      }
      getProjectInfoBySn(data).then(res => {
        console.log('------------', res.result.projectNumber)
        this.projectNumber = res.result.projectNumber
      })
    },
    // 全景成像测距
    getPanoramicRanging() {
      axios({
        method: 'GET',
        // url:'http://182.90.224.237:8070/xmgl/docking/url',
        // url:'http://182.90.224.237:7000/xmgl/docking/url',
        url: `${this.$http.defaults.baseURL}${'xmgl/docking/url'}`,
        params: {
          projectNumber: this.projectNumber
        }
      }).then(res => {
        console.log('全景成像测距', res)
        let toUrl = res.data.find(item => {
          if (this.projectNumber == item.jinqianmaosn) {
            return item.url
          }
        })
        window.open(toUrl.url)
      })
    },
    itemClick(item, index) {
      console.log('item：：：：：：：：：', index)
      console.log('点击的模块信息', item)

      // console.log(item,this.$store.state.userInfo.account)
      if (item.moduleName == '智能安全帽系统') {
        this.getSafeyHatSession()
        this.$message.success(this.$t('message.projectIndex.tips3')) //即将跳转新页面

        // 次数更改因为原来跳转的是星璇  无法显示 所以更改跳转到 润德 龙光同一个页面
        //    let NodeRSA = require("node-rsa");
        //     //请求参数
        //     let params = JSON.stringify({
        //       account: this.$store.state.userInfo.account,
        //       page_flag: 3,
        //     });
        //     //公钥
        //     const pubKey = `
        // -----BEGIN PUBLIC KEY-----
        // MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDcmP0ug4NTHwW2oeHxheZjmYPDxVGFP770eECdLwRtaH0pPWvsXG6MSO/kCzgjEVEo1K1bvRxkkasQRu02fhI+gsZa8wvVeo3s4zJDA48Oj99JAXsx56/WN1RlNh+tsXcH9oQWy3gbX5cDkheuVZj8gsV7Ez59Ucj4e78zNJrUDwIDAQAB
        // -----END PUBLIC KEY-----`;

        //   let publicKey = new NodeRSA(pubKey);
        //   let async_key = publicKey.encrypt(params, 'base64')
        setTimeout(() => {
          window.open('https://caps.runde.pro')
        }, 1000)
        //   window.open("http://58.210.96.206:91/async_danzhou.html?async_key="+async_key)
        // window.location.href = "http://58.210.96.206:91/async_danzhou.html?async_key="+async_key;
      }
      if (item.moduleName == '全景成像测距') {
        this.getPanoramicRanging()
      }
      if (item.moduleName == '智能穿戴管理系统') {
        this.getSafeyHatSession()
      }
      if (item.moduleName == '智能穿戴管理系统') {
        return
      }
      if (item.moduleName == '智能安全帽系统') {
        this.getSafeyHatSession()
      }

      if (!item.operation) {
        this.$message.error(this.$t('message.projectIndex.tips1'))
        return
      }
      // if (this.COMPANY == 'jlw') {
      //   if (item.moduleName == 'AR指挥中心') {
      //     window.open('https://cloud.kivicube.com/plane-scenes');
      //   }
      // }
      if (item.menuList && item.menuList.length > 0 && item.moduleName != '全景成像测距') {
        let arr = item.menuList,
          arr2 = []
        arr.forEach(element => {
          if (element.menuEquipment == 0) {
            arr2.push(element)
          }
        })
        this.$store.commit('setMenuList', arr2)
        this.$store.commit('setIsShowBackIndex', true)
        this.$store.commit('setMoudle', item)
        if (arr2[0].target == '_blank') {
          let routeUrl = ''
          if (arr2[0].path.indexOf('http') != -1) {
            routeUrl = arr2[0].path
          } else {
            let url = this.$router.resolve({
              path: arr2[0].path
            })
            routeUrl = url.href
          }
          window.open(routeUrl, '_blank')
        } else {
          if (arr2[0].path == '' || arr2[0].path.indexOf('/') == -1) {
            this.$router.push(arr2[0].menuList[0].path)
          } else {
            this.$router.push(arr2[0].path)
          }
        }
      } else if (item.moduleName == '全景成像测距' || item.moduleName == '智能安全帽系统' || item.moduleName == 'AR指挥中心') {
        // this.$message.success(this.$t('message.projectIndex.tips3'))//即将跳转新页面
      } else {
        this.$message.error(this.$t('message.projectIndex.tips2'))
      }
      window._paq.push(['trackEvent', '点击', item.moduleName, '进入' + item.moduleName])
    },
    //获取详情
    getDataDateils() {
      let data = {
        projectSn: this.projectSn
      }
      getProjectDetail(data).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.projectName = res.result.projectName
          document.title = this.projectName
          this.$store.commit('setProDetail', res.result)
        }
      })
    },
    //为了展示未解锁产品，所以需要查询所有模块
    getAllModule(half) {
      getAllModuleApi({ moduleType: 2 }).then(res => {
        if (res.success) {
          let all = res.result
          // console.log('allallallallall', all)
          // console.log('halfhalfhalfhalf',half)
          all.forEach((element, index) => {
            all[index].operation = false
            half.forEach(element2 => {
              if (element2.moduleId == element.moduleId) {
                all[index].operation = true
                all[index].menuList = element2.menuList
              }
            })
          })
          this.list = all
          this.$forceUpdate()
          console.log(this.list, '权限数据')
          if (window.location.href.indexOf('labor') != -1) {
            console.log('大屏跳转进来携带参数跳转进来了吗----', window.location.href.indexOf('labor'))
            this.test()
          }
          this.$nextTick(() => {
            let projectIndex = document.getElementById('projectIndex')
            let array = document.getElementsByClassName('module_title')
            console.log(array)
            for (let index = 0; index < array.length; index++) {
              let newElement = document.createElement('div')
              newElement.style = 'width: 100%; height: 1px'
              projectIndex.insertBefore(newElement, array[index].parentNode)
            }
          })
        }
      })
    },
    insertAfter(newElement, targetElement) {
      // newElement是要追加的元素 targetElement 是指定元素的位置
      let parent = targetElement.parentNode // 找到指定元素的父节点
      if (parent.lastChild == targetElement) {
        // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
        parent.appendChild(newElement, targetElement)
      } else {
        parent.insertBefore(newElement, targetElement.nextSibling)
      }
    }
    //获取项目解锁的模块
    // getProjectModule(projectSn) {
    //   getProjectModuleList({ projectSn: this.$store.state.projectSn }).then(
    //     (result) => {
    //       if (result.success) {
    //         let half = result.result;
    //         this.getAllModule(half);
    //       }
    //     }
    //   );
    // },
  }
}
</script>
<style lang="less" scoped>
.pageContainer {
  height: calc(100% - 61px);
  background: rgba(247, 249, 255, 0.9);
  font-family: '思源黑体';
}

.projectIndexBox {
  max-width: 1360px;
  margin: auto;
  width: 100%;
  overflow-y: scroll;
  height: calc(100% - 61px);
}

// @media screen and (max-width: 1630px) {
//   .projectIndex .module {
//     margin-right: 26px !important;
//   }
// }
.projectIndex {
  width: 100%;

  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-bottom: 8px;

  .module:nth-child(4n) {
    margin-right: 0;
  }
}

.module_title {
  margin-left: -10px;
  border-left: 2px solid #4a8bff;
  padding-left: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  // width: 1360px;
}

.module {
  width: 310px;

  // height: 124px;
  box-sizing: border-box;
  // border-radius: 3px;
  // box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.07);
  // display: flex;
  // align-items: center;
  margin-bottom: 24px;
  padding: 30px 10px 32px;
  font-size: 17px;
  margin-right: 30px;
  text-align: center;

  border: 1px solid rgba(18, 41, 75, 0.1);
  height: 174px;

  &.canclick:hover {
    cursor: pointer;
    // border-color: rgba(74, 139, 255, 0.9);
    background-color: rgba(196, 208, 255, 0.17);
    // box-shadow: 0px 5px 9px 3px rgba(74, 139, 255, 0.2);
  }

  .head1 {
    // opacity: 0.8;
    font-weight: bold;
    font-size: 16px;
  }

  .icon {
    width: 56px;
    height: 56px;
    // width: 45px;
    // height: 45px;
    // margin-right: 20px;
    display: block;
    margin: 0 auto 0px;
  }

  .subhead {
    opacity: 0.8;
    font-size: 12px;
    margin-top: 15px;
  }

  .grey * {
    opacity: 0.3;
  }
}

.hovers {
  cursor: pointer;
}

.moduleBox {
  // vertical-align: baseline;
  //  float: left;\
  // display: inline-block;
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>