cim-home/src/views/home-page/HomePage.vue

<template>
<div id="home-page">
 <div class="title">
   <div class="text font-ht" @click="toLogin">
     上海市CIM平台
   </div>

 </div>
  <div class="star">
    <div class="bg1" @click="toOtherRouter(item,!loginPinia.canSeeSystemArr.find(i => getModuleIdIsHas(+i.MODULE_ID,item)) && !item.children && item.aPath)" v-for="item in ballSystemList" :key="item.name">
      <div class="bgc"  ref="canvasGLTF" >

      </div>
      <div class="hx-box pa">
        <ul class="pr">
          <li class="hx-k1 pa0">
            <span></span>
          </li>
          <li class="hx-k2 pa0">
            <span></span>
          </li>
          <li class="hx-k3 pa0">
            <span></span>
          </li>
        </ul>
      </div>
      <div class="text" :class="{'disabled':!loginPinia.canSeeSystemArr.find(i => getModuleIdIsHas(+i.MODULE_ID,item)) && !item.children && item.aPath}"><pre class="font-ht">{{item.name}}</pre></div>
      <div class="child-kuang" v-if="item.children && item.isExtend">
        <ul>
          <li class="font-ht" @click="toOtherRouter(child,getDisabled(child))" :class="{'disabled':getDisabled(child)}"  v-for="child in item.children" :key="child.name" >
            {{child.name}}
          </li>
        </ul>
      </div>
    </div>
    <div style="--i:0s" class="dot dot1">
      
    </div>
<!--    <div style="&#45;&#45;i:1s" class="dot dot1">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:2s" class="dot dot1">-->

<!--    </div>-->
    <div style="--i:0s" class="dot dot2">

    </div>
<!--    <div style="&#45;&#45;i:1s" class="dot dot2">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:2s" class="dot dot2">-->

<!--    </div>-->
    <div style="--i:0s" class="dot dot3">

    </div>
<!--    <div style="&#45;&#45;i:1s" class="dot dot3">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:2s" class="dot dot3">-->

<!--    </div>-->
    <div style="--i:0s" class="dot dot4">

    </div>
<!--    <div style="&#45;&#45;i:1s" class="dot dot4">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:2s" class="dot dot4">-->

<!--    </div>-->
    <div style="--i:0s" class="dot dot5">

    </div>
<!--    <div style="&#45;&#45;i:1s" class="dot dot5">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:2s" class="dot dot5">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:0.5s" class="dot dot1">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:1s" class="dot dot1">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:1s" class="dot dot2">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:0.5s" class="dot dot2">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:1s" class="dot dot2">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:2s" class="dot dot3">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:0.5s" class="dot dot3">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:1s" class="dot dot3">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:3s" class="dot dot4">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:0.5s" class="dot dot4">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:1s" class="dot dot4">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:4s" class="dot dot5">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:0.5s" class="dot dot5">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:1s" class="dot dot5">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:4s" class="dot">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:6s" class="dot">-->

<!--    </div>-->
<!--    <div style="&#45;&#45;i:8s" class="dot">-->

<!--    </div>-->
  </div>
<!--  <div class="right-tk">-->
<!--    <ul>-->
<!--      <li v-for="item in systemList" :key="item.name">-->
<!--        {{item.name}}-->
<!--      </li>-->
<!--    </ul>-->
<!--  </div>-->
</div>
</template>

<script setup>
import {useRouter} from "vue-router";
import * as THREE from 'three'
import imgs1 from '../../assets/imgs/jx.jpg'
import imgs2 from '../../assets/imgs/mx.jpg'
import imgs3 from '../../assets/imgs/hx.jpg'
import imgs4 from '../../assets/imgs/sx.png'
import imgs5 from '../../assets/imgs/hwx.png'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
let currentObjIndex = 1
const loginPinia = useLoginStore()

let isExtend = ref(false)
let animationFrameObj = {
  animationFrameId1:null,
  animationFrameId2:null,
  animationFrameId3:null,
  animationFrameId4:null,
  animationFrameId5:null,
}
const router = useRouter()
let rendererObj = {
  renderer1:null,
  renderer2:null,
  renderer3:null,
  renderer4:null,
  renderer5:null,

}
// 加载地球的纹理
let img1 =  {
  img1:new THREE.TextureLoader().load(imgs1),
  img2:new THREE.TextureLoader().load(imgs2),
  img3:new THREE.TextureLoader().load(imgs3),
  img4:new THREE.TextureLoader().load(imgs4),
  img5:new THREE.TextureLoader().load(imgs5),
};
function getModuleIdIsHas(MODULE_ID,child){
  return child.moduleId?.split(',').map(it => +it).includes(+MODULE_ID)
}
function getDisabled(child){
  return (!child.isOutZj && !loginPinia.canSeeSystemArr.find(i => getModuleIdIsHas(+i.MODULE_ID,child))) || child.disabled
}
// 初始化用于记录动画帧ID的变量
// let animationFrameId = null
// 初始化三维场景变量
let sceneObj = {
  scene1:null,
  scene2:null,
  scene3:null,
  scene4:null,
  scene5:null,
}
// 初始化摄像机变量
let cameraObj = {
  camera1:null,
  camera2:null,
  camera3:null,
  camera4:null,
  camera5:null,
}
// 初始化渲染器变量
// let renderer = null
// 初始化ResizeObserver对象变量，用于监听DOM元素的大小变化
let resizeObserverObj = {
  resizeObserver1:null,
  resizeObserver2:null,
  resizeObserver3:null,
  resizeObserver4:null,
  resizeObserver5:null,
}

import {nextTick, onBeforeUnmount, onMounted, ref} from "vue";
import {useLoginStore} from "@/pinia/login";
import {
  editZwLoginState,
  getUserMyRole,
  getUserMyRoleClass,
  getUserMyRoleModule, loginInSjfxfn,
  loginInSpace,
  loginInSpaceLog,
  loginInZw
} from "@/service/login";
import {handleMes, showMessage} from "@/unit/element-ui/tip";
import {encode} from "js-base64";

// import {Clay} from "@/static/clay.min";
onBeforeUnmount(() => {
  // cancelAnimationFrame(animationFrameId);
  // rendererObj['renderer' +(currentObjIndex)].dispose();
  // scene.dispose();
  // if (resizeObserver) {
  //   resizeObserver.disconnect();
  // }
})
function toLogin(){
 router.replace('/login')
}
function loginZHFXFN(type,url,systemType){

  loginInSjfxfn(loginPinia.loginInfo.username,encode(loginPinia.loginInfo.psd),type).then(res => {
    var result = res.msg;
    if (result.length == 0) {
      showMessage({
        type:'warning',
        message:'登录信息已失效！'
      })
      return;
    }
    var rows = result[0].Rows;
    //所属系统  0:政务目录浏览系统  1：政务目录管理系统 2：平台监控系统 3：数据综合分析系统     9:城市体检  10:一网通办
    if(type == "3"){
      //获取用户信息  0  1 163  173  174
      var usercode = rows[0].USERID;
      var username = rows[0].USERNAME;
      var unitcode = rows[0].UNIT;
      var unitname = rows[0].UNIT_NAME;
      var lasttime = rows[0].LAST_TIME;
      var changetime = rows[0].CHANGE_TIME;
      var role = rows[0].ROLE_LIST;
      var userkeycode = rows[0]["TEMPUSERKEYCODE"];
      var role_uuid = rows[0]["ROLE_UUID"];
      var change_time = rows[0].CHANGE_TIME;
      //判断用户角色，只有平台管理员和系统管理员可以登录

      //保存用户信息
      const userInfo = {
        zhfx_usercode:usercode,
        zhfx_username:username,
        zhfx_unitcode:unitcode,
        zhfx_unitname:unitname,
        zhfx_lasttime:lasttime,
        zhfx_role:role,
        zhfx_userkeycode:userkeycode,
        zhfx_changetime:changetime,
        zhfx_role_uuid:role_uuid,
        zhfx_systemtype: rows[0]["SYSTEM_TYPE"]
      }
      debugger
      localStorage.setItem('anaLoginUserInfo',JSON.stringify(userInfo))
      window.open(url);
      return;
    }
  })
    .catch((e) => {
      showMessage({
        type:'error',
        message:'登录失败'
      })
    })

}
function toPage(item,isDisabled){

  let path = isDisabled?item.loginPage:item.aPath
  if (item.isOutZj){
    window.open(path,path)
    return;
  }
  if (isDisabled) {

    window.open(path,path)
    return
  }
  debugger
  switch (item.moduleId){
    case '569':
      loginKj(2,path,"a42fe58a1ff142f696c63b56519833a0")
    break
    case '538':
      loginKj(1,path,"4f2a211f473b4e39b9ccc1e04233c725")
      break
    case '570':
      loginZW(0,path,"166ab385ec6d49e3aa8473f31d2aaca3")
      break
    case '116':
      loginZW(1,path,"0693eeb52c154ba3ba57db71b30a0b98")
      break
    case '662':
      loginZW(2,path,"ebb42096345340359741dcb9c039f15c");
      break
    case '571,579':
      loginZHFXFN(3,path,"ed698aa9d09e4ac7b35df02a2d73985f");
      break
    case '572':
      break
    case '573':
      break
    case '574':
      break
    case '575':
      break
    case '576':
      loginZW(9,path,"47e0971bb15b4420bf1f351510378c72");
      break
    case '577':
      break
    case '578':
      break
    case '579':    //数据综合分析系统
      loginZHFXFN(3,path,"ed698aa9d09e4ac7b35df02a2d73985f");
      break
    case '663':   //城市体检
      loginZW(9,path,"47e0971bb15b4420bf1f351510378c72");
      break

  }
}
function selectUserClass(url){
  debugger
  let unit_id = JSON.parse(localStorage.getItem('loginUserInfoSpace')).ywxt_unitcode;
  let json_data = {
    "unit_id":unit_id
  };
  getUserMyRoleClass(json_data).then(res => {
    let result = res.msg;
    if (result.length == 0) {
      showMessage({
        type:'error',
        message:'获取所属行业失败！'
      })
      return;
    }
    let rowcount = result[0].TotalRowCount;
    if (rowcount == "0") {
      showMessage({
        type:'error',
        message:'获取所属行业失败！'
      })
      return;
    }
    let rows = result[0].Rows;
    if (rows.length == 0) {
      showMessage({
        type:'error',
        message:'获取所属行业失败！'
      })
      return;
    }
    //设置所属行业
    let classArr = [];
    for (var i = 0; i < rows.length; i++) {
      classArr.push({ code: rows[i].CODE, name: rows[i].NAME });
    }
    var classStr = "";
    for (var i = 0; i < classArr.length; i++) {
      classStr += "code:" + classArr[i].code + ",name:" + classArr[i].name + ";";
    }
    classStr = classStr.substring(0, classStr.length - 1);
    localStorage.setItem("ywxt_unitclass", classStr);
    window.open(url,url );
    return;
  })
}
function loginKj_log(unitid,userid,module,type,des){
  var json_data = {
    "UNIT":unitid,
    "userid":userid,
    "PLATE":module,
    "OPERATION":type,
    "OPERATIONRESULT":des,
    "appkey":localStorage.getItem("ywxt_userkeycode")
  };
  loginInSpaceLog(json_data).then(res => {})
}
function editUserLoginStateZw(usercode,userkeycode,login_lock,login_type,url){
  let json_data = {
    "CODE":usercode,
    "USERKEYCODE":userkeycode,
    "LOGIN_LOCK":login_lock,
    "LOGIN_TYPE":login_type,
    LOGIN_COUNT:'0'
  }
  debugger
  editZwLoginState(json_data).then(res => {
    handleMes(res,() => {
       window.open(url,url)
    })
  })
}
function loginZW(type,url,systemType){
  debugger
  loginInZw(loginPinia.loginInfo.username,encode(loginPinia.loginInfo.psd),type)
    .then(res => {
      var result = res.msg;
      if (result.length == 0) {
        showMessage({
          type:'warning',
          message:'登录信息已失效！'
        })

        return;
      }
      var rows = result[0].Rows;
      //所属系统  0:政务目录浏览系统  1：政务目录管理系统 2：平台监控系统 3：数据综合分析系统     9:城市体检  10:一网通办
      if(type == "0"){
        //获取用户信息
        var usercode = rows[0].USERID;
        var username = rows[0].USERNAME;
        var truename = rows[0].NAME;
        var unitcode = rows[0].UNIT;
        var unitname = rows[0].UNIT_NAME;
        var lasttime = rows[0].LAST_TIME;
        var role = rows[0].ROLE_CODE;
        var name = rows[0].NAME;
        var phone = rows[0].PHONE;
        var mail = rows[0].MAIL;
        var userkeycode = rows[0]["TEMPUSERKEYCODE"];
        //保存用户信息
        localStorage.setItem("zjw_usercode", usercode);
        localStorage.setItem("zjw_username", username);
        localStorage.setItem("zjw_unitcode", unitcode);
        localStorage.setItem("zjw_unitname", unitname);
        // localStorage.setItem("zjw_password", json_data["password"]);
        localStorage.setItem("zjw_lasttime", lasttime);
        localStorage.setItem("zjw_role", role);
        localStorage.setItem("zjw_name", name);
        localStorage.setItem("zjw_phone", phone);
        localStorage.setItem("zjw_mail", mail);
        localStorage.setItem("zjw_userkeycode", userkeycode);
        editUserLoginStateZw(usercode,userkeycode,"1","0",url );
        return;
      }
      if(type == "1"){
        //获取用户信息
        var usercode = rows[0].USERID;
        var username = rows[0].USERNAME;
        var truename = rows[0].NAME;
        var unitcode = rows[0].UNIT;
        var unitname = rows[0].UNIT_NAME;
        var lasttime = rows[0].LAST_TIME;
        var changetime = rows[0].CHANGE_TIME;
        var role = rows[0].ROLE_CODE;
        var userkeycode = rows[0]["TEMPUSERKEYCODE"];
        var qc = rows[0]["QC"];
        var tyshdm = rows[0]["TYSHDM"];
        var hlwj = rows[0]["HLWJ"];
        var role_uuid = rows[0]["ROLE_UUID"];
        //保存用户信息
        localStorage.setItem("yml_usercode", usercode);
        localStorage.setItem("yml_username", username);
        localStorage.setItem("yml_unitcode", unitcode);
        localStorage.setItem("yml_unitname", unitname);
        // localStorage.setItem("yml_password", json_data["password"]);
        localStorage.setItem("yml_lasttime", lasttime);
        localStorage.setItem("yml_role", role);
        localStorage.setItem("yml_userkeycode", userkeycode);
        localStorage.setItem("yml_changetime", changetime);
        localStorage.setItem("zyml_role_uuid", role_uuid);
        // alert(userkeycode);

        localStorage.setItem("yml_qc",qc);
        localStorage.setItem("yml_tyshdm", tyshdm);
        localStorage.setItem("hlwj", hlwj);
        editUserLoginStateZw(usercode,userkeycode,"1","1",url );
        return;

      }
      if(type == "2"){
        var usercode = rows[0].USERID;
        var username = rows[0].USERNAME;
        var truename = rows[0].NAME;
        var unitcode = rows[0].UNIT;
        var unitname = rows[0].UNIT_NAME;
        var lasttime = rows[0].LAST_TIME;
        var change_time = rows[0].CHANGE_TIME;
        var role = rows[0].ROLE_CODE;
        var userkeycode = rows[0]["TEMPUSERKEYCODE"];
        var ROLE_UUID = rows[0]["ROLE_UUID"];
        //保存用户信息
        const userInfo = {
          ptjk_usercode:usercode,
          ptjk_username:username,
          ptjk_unitcode:unitcode,
          ptjk_unitname:unitname,
          //ptjk_password:password,
          ptjk_lasttime:lasttime,
          ptjk_changetime:change_time,
          ptjk_role:role,
          ' ptjk-part':'',
          ptjk_userkeycode:userkeycode,
          ptjk_role_uuid:ROLE_UUID
        }
        localStorage.setItem('dataWatchLoginUserInfo',JSON.stringify(userInfo))
        editUserLoginStateZw(usercode,userkeycode,"1","2",url);
        return;
      }
      if(type == "9"){
        //获取用户信息
        var usercode = rows[0].USERID;
        var username = rows[0].USERNAME;
        //var truename = rows[0].NAME;
        var unitcode = rows[0].UNIT;
        var unitname = rows[0].UNIT_NAME;
        var lasttime = rows[0].LAST_TIME;
        var role = rows[0].ROLE_CODE;
        var name = rows[0].NAME;
        var phone = rows[0].PHONE;
        var mail = rows[0].MAIL;
        var userkeycode = rows[0]["TEMPUSERKEYCODE"];
        var change_time = rows[0].CHANGE_TIME;
        //保存用户信息
        localStorage.setItem("cstj_usercode", usercode);
        localStorage.setItem("cstj_username", username);
        localStorage.setItem("cstj_unitcode", unitcode);
        localStorage.setItem("cstj_unitname", unitname);
        // localStorage.setItem("cstj_password", json_data["password"]);
        localStorage.setItem("cstj_lasttime", lasttime);
        localStorage.setItem("cstj_role", role);
        localStorage.setItem("cstj_name", name);
        localStorage.setItem("cstj_phone", phone);
        localStorage.setItem("cstj_mail", mail);
        localStorage.setItem("cstj_userkeycode", userkeycode);
        localStorage.setItem("cstj_changetime", change_time);
        editUserLoginStateZw(usercode,userkeycode,"1","9",url );
        return;
      }
    })
    .catch((e) => {
      showMessage({
        type:'error',
        message:'登录失败'
      })
    })
}
function selectUserModule(user_id,url){
  var json_data = {
    "user_id":user_id
  };
  getUserMyRoleModule(json_data).then(res => {
    var result = res.msg;
    if (result.length == 0) {
      showMessage({
        type:'error',
        message:'获取用户权限失败！'
      })
      return;
    }
    var rowcount = result[0].TotalRowCount;
    if (rowcount == "0") {
      showMessage({
        type:'error',
        message:'获取用户权限失败！'
      })
      return;
    }
    var rows = result[0].Rows;
    if (rows.length == 0) {
      showMessage({
        type:'error',
        message:'获取用户权限失败！'
      })
      return;
    }
    //设置用户权限
    var moduleArr = [];
    for (var i = 0; i < rows.length; i++) {
      moduleArr.push({ code: rows[i].CODE, name: rows[i].NAME, state: rows[i].STATE });
    }
    var moduleStr = "";
    for (var i = 0; i < moduleArr.length; i++) {
      moduleStr += "code:" + moduleArr[i].code + ",name:" + moduleArr[i].name + ",state:" + moduleArr[i].state + ";";
    }
    moduleStr = moduleStr.substring(0, moduleStr.length - 1);
    localStorage.setItem("ywxt_module", moduleStr);

    //查询所属行业  PRO_SELECT_USER_CLASS
    selectUserClass(url);
  })

}
function selectUserRole(user_id,url){
  var json_data = {
    "user_id":user_id
  };
  getUserMyRole(json_data).then(res => {
    var result =  res.msg;
    if (result.length == 0) {
      showMessage({
        type:'error',
        message:'获取用户角色失败！'
      })
      return;
    }
    var rowcount = result[0].TotalRowCount;
    if (rowcount == "0") {
      showMessage({
        type:'error',
        message:'获取用户角色失败！'
      })
      return;
    }
    var rows = result[0].Rows;
    if (rows.length == 0) {
      showMessage({
        type:'error',
        message:'获取用户角色失败！'
      })
      return;
    }
    //设置用户角色
    var roleArr = [];
    for (var i = 0; i < rows.length; i++) {
      roleArr.push({ code: rows[i].ROLE_ID, name: rows[i].ROLE_NAME });
    }
    var roleStr = "";
    for (var i = 0; i < roleArr.length; i++) {
      roleStr += "code:" + roleArr[i].code + ",name:" + roleArr[i].name + ";";
    }
    roleStr = roleStr.substring(0, roleStr.length - 1);
    localStorage.setItem("ywxt_userrole", roleStr);
    debugger
    let basicLoginUserInfo = JSON.parse(localStorage.getItem('loginUserInfoSpace'));
    basicLoginUserInfo.role = rows;
    localStorage.setItem('loginUserInfoSpace',JSON.stringify(basicLoginUserInfo))
    //查询用户模块信息
    selectUserModule(user_id,url);
  })

}
function loginKj(type,url,systemType){

  loginInSpace(loginPinia.loginInfo.username,encode(loginPinia.loginInfo.psd),type,systemType)
    .then(res => {
      debugger
      let result = res.msg;
      if (result.length == 0) {
        showMessage({
          type:'warning',
          message:'登录信息失效'
        })
        return;
      }
      let rows = result[0].Rows;
      if(type == "1"){
        //获取用户信息
        var usercode = rows[0].USERID;
        var unitcode = rows[0].UNIT;
        var username = rows[0].USERNAME;
        var truename = rows[0].NAME;
        var password = rows[0].PASSWORD;
        var unitname = rows[0].UNIT_NAME;
        var contact = rows[0].CONTACT;
        var sex = rows[0].SEX;
        var telephone = rows[0].TELPHONE;
        var email = rows[0].MAIL;
        var identify = rows[0].IS_IDENTIFY;
        var usertype = rows[0].TYPE;
        var userkeycode = rows[0]["TEMPUSERKEYCODE"];
        var change_time = rows[0].CHANGE_TIME;
        debugger
        //保存用户信息
        const loginUserInfo = {
          ywxt_usercode:usercode,
          ywxt_username:username,
          ywxt_unitcode:unitcode,
          ywxt_unitname:unitname,
          ywxt_contact:contact,
          ywxt_telephone:telephone,
          ywxt_email:email,
          ywxt_identify:identify,
          ywxt_userkeycode:userkeycode,
          ptjk_changetime:change_time,
          password:password
        }
        // 根据user_id获取角色
        localStorage.setItem('loginUserInfoSpace',JSON.stringify(loginUserInfo))
        loginKj_log(unitcode,usercode, "运维系统-登录", "登录系统成功", "系统登录");
        //空间运维系统 登录成功后 需要缓存用户权限
        selectUserRole(usercode,url);
        return;
      }
      if(type == "2"){
        //获取用户信息
        var usercode = rows[0].USERID;
        var username = rows[0].USERNAME;
        var truename = rows[0].NAME;
        var password = rows[0].PASSWORD;
        var unitcode = rows[0].UNIT;
        var unitname = rows[0].UNIT_NAME;
        var contact = rows[0].CONTACT;
        var sex = rows[0].SEX;
        var telephone = rows[0].TELPHONE;
        var email = rows[0].MAIL;
        var identify = rows[0].IS_IDENTIFY;
        var usertype = rows[0].TYPE;
        var userkeycode = rows[0]["TEMPUSERKEYCODE"];
        var changetime = rows[0]["CHANGE_TIME"];
        //保存用户信息
        const loginUserInfo = {
          gxjh_usercode:usercode,
          gxjh_username:username,
          gxjh_unitcode:unitcode,
          gxjh_unitname:unitname,
          gxjh_contact:contact?decode(contact):'',
          gxjh_telephone:telephone?decode(telephone):'',
          gxjh_email:email?decode(email):'',
          gxjh_identify:identify,
          gxjh_userkeycode:userkeycode,
          gxjh_changetime:changetime,
        }
        localStorage.setItem('exchangeUserInfo',JSON.stringify(loginUserInfo))
        loginKj_log(unitcode,usercode, "浏览系统-登录", "登录系统成功", "系统登录");
        //切换首页
        window.open(url,url)
        // window.location.href = url;
        return;
      }

    })
    .catch((e) => {
      debugger
    showMessage({
      type:'error',
      message:'登录失败'
    })
  })



}


function toOtherRouter(item,isDisabled){

  console.log(router,'useRouter()',item)
  if (item.path){
    let routeUrl = router.resolve({
      path: item.path,

    });
    window.open(routeUrl.href,'_blank')

  }
  else if (item.aPath){
    toPage(item,isDisabled)

    //
    //
    // window.open(item.aPath,'_blank')
    // localStorage.setItem('sks','11')
  }
  ballSystemList.value.forEach(i=>{
    i.isExtend = i.name === item.name?!i.isExtend:false
  })

}
function initResizeObserver(index) {
  resizeObserverObj['resizeObserver'+currentObjIndex] = new ResizeObserver(entries => {
    for (let entry of entries) {
      if (entry.target === canvasGLTF.value[index]) {
        const width = entry.contentRect.width;
        const height = entry.contentRect.height;
        cameraObj['camera'+currentObjIndex].aspect = width / height;
        cameraObj['camera'+currentObjIndex].updateProjectionMatrix();
        rendererObj['renderer' +(currentObjIndex)].setSize(width, height);
        rendererObj['renderer' +(currentObjIndex)].render(sceneObj['scene'+currentObjIndex], cameraObj['camera'+currentObjIndex]);
      }
    }
  });
  resizeObserverObj['resizeObserver'+currentObjIndex].observe(canvasGLTF.value[index]);
}
const canvasGLTF  =ref(null)
function renderBall(index){


  // 获取canvas的宽度和高度
  let width = canvasGLTF.value[index].offsetWidth
  let height = canvasGLTF.value[index].offsetHeight

  // 初始化用于旋转地球的步长
  let step = 0;

  console.log(canvasGLTF.value,'我的',step)
  // 创建新的三维场景
  sceneObj['scene'+currentObjIndex] = new THREE.Scene();
  // 创建透视摄像机
  cameraObj['camera'+currentObjIndex] = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

  // 创建WebGL渲染器，并启用抗锯齿和透明度
  rendererObj['renderer' +(currentObjIndex)] = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });

  // 设置渲染器的大小
  rendererObj['renderer' +(currentObjIndex)].setSize(width, height);

  // 创建材质数组并添加基础材质
  let mats = [];
  mats.push(new THREE.MeshBasicMaterial({map: img1['img' + (index+1)]}));

  // 创建球体的几何形状
  const geometry = new THREE.SphereGeometry(20, 60, 60);
  // 创建地球的材质
  let material = new THREE.MeshLambertMaterial({
    color: 0xFFFFFF,
    map:  img1['img' + (index+1)]
  });
  // 创建地球的网格模型
  let sphere = new THREE.Mesh(geometry, material);
  // 设置地球的初始旋转值
  sphere.rotation.x = 0.1;
  // 将地球添加到场景中
  sceneObj['scene'+currentObjIndex].add(sphere);

  // 创建并添加环境光
  let ambientLight = new THREE.AmbientLight(0x666666);
  sceneObj['scene'+currentObjIndex].add(ambientLight);

  // 创建并添加投影灯光
  let spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-40, 160, 100);
  spotLight.castShadow = true;
  sceneObj['scene'+currentObjIndex].add(spotLight);

  // 设置摄像机的位置和视点
  cameraObj['camera'+currentObjIndex].position.x = -80;
  cameraObj['camera'+currentObjIndex].position.y = 26;
  cameraObj['camera'+currentObjIndex].position.z = 50;
  cameraObj['camera'+currentObjIndex].lookAt(sceneObj['scene'+currentObjIndex].position);
  // 开始渲染循环
  render();

  // 渲染函数
  function render() {

    // 使地球绕Y轴旋转
    sphere.rotation.y = step += 0.005;
    // 请求下一帧的动画
    animationFrameObj['animationFrameId'+(index  +1)] = requestAnimationFrame(render);

    // 渲染场景
    rendererObj['renderer' +(index+1)].render(sceneObj['scene'+(index+1)],  cameraObj['camera'+(index+1)]);
  }
  let controls = new OrbitControls( cameraObj['camera'+currentObjIndex], rendererObj['renderer' +(currentObjIndex)].domElement);
  controls.enableZoomenableZoom = false
  // 将渲染器的DOM元素添加到Vue组件中的相应位置
 canvasGLTF.value[index].appendChild(rendererObj['renderer' +(currentObjIndex)].domElement)
  // 初始化尺寸观察者以监听canvas的大小变化
  initResizeObserver(index)
}
onMounted(() => {
  renderBall(0)
  currentObjIndex++
  renderBall(1)
  currentObjIndex++
  renderBall(2)
  currentObjIndex++
  renderBall(3)
  currentObjIndex++
  renderBall(4)
  // setTimeout(() => {
  //   currentObjIndex++
  //   setTimeout(() => {
  //
  //   },1000)
  //   renderBall(1)
  // },1000)


})

const systemList = ref([
  {
    name:'上海市农民相对集中居住管理系统'
  },
  {
    name:'市体育局体育公共设施GIS系统'
  },
  {
    name:'城市体检专题评估系统'
  },
  {
    name:'上海城市维护项目管理信息系统'
  },
  {
    name:'杨浦大桥数字孪生'
  },
  {
    name:'上海市城市更新信息系统'
  }
])
const ballSystemList = ref([
  {name:'GIS中台',children:[
      // {name:'空间地理信息共享交换系统',aPath:'https://cimweb.zjw.sh.cegn.cn:2007/space-browsing/#/main/home',moduleId:'569',loginPage:'https://cimweb.zjw.sh.cegn.cn:2007/space-browsing/#/login'},
      {name:'空间地理信息应用系统',aPath:'https://cimweb.zjw.sh.cegn.cn:2007/space-application/#/main/home',moduleId:'569',loginPage:'https://cimweb.zjw.sh.cegn.cn:2007/space-application/#/login'},
      {name:'空间地理信息管理系统',aPath:'https://cimweb.zjw.sh.cegn.cn:2007/space-manage/#/main/GXYWWebsite/view/main/MainFrame',moduleId:'538',loginPage:'https://cimweb.zjw.sh.cegn.cn:2007/space-manage/#/login'},
    ]},
  {name:'BIM中台'},
  {name:'IOT中台',children: [
      {name:'视频数据管理',isOutZj:true,aPath:'http://10.86.133.76:8080/#/realMonitor?xmNo=172',moduleId:'569',loginPage:'http://10.86.133.76:8080/#/realMonitor?xmNo=172'},
      {name:'IOT数据管理',disabled:true}]},
  {name:'智能分析\nAI中台',
  children:[
    // {name:'数据分析赋能',aPath:'https://cimweb.zjw.sh.cegn.cn:2007/space-application/#/main/home',moduleId:'569',loginPage:'https://cimweb.zjw.sh.cegn.cn:2007/space-application/#/login'},
  {name:'数据治理监控',aPath:'https://cimweb.zjw.sh.cegn.cn:2007/space-monitor/#/home',moduleId:'662',loginPage: 'https://cimweb.zjw.sh.cegn.cn:2007/space-monitor/#/login'},
]},
  {name:'应用\n赋能中台',path:'/power-home'},
])

</script>

<style scoped lang="scss">

@keyframes bga {

  100%{
   transform: rotate(360deg);
  }
}
@keyframes wave {
  0%{
    background-position: 0 0 ;
  }
  100%{
    background-position: 1000px 0;
  }
}
@keyframes lineOpacity{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@keyframes ballMove1 {
  0%{

    top: 238px;
    left: 286px;
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{

    top: 268px;
    left: 1070px;
    opacity: 0;
  }
}
@keyframes ballMove2 {
  0%{
    transform: rotate(158deg);
    top: 385px;
    left: 892px;
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    transform: rotate(158deg);
    top: 580px;
    left: 392px;
    opacity: 0;
  }
}
@keyframes ballMove3 {
  0%{

    transform: rotate(297deg);
    top: 333px;
    left: 422px;
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    transform: rotate(297deg);
    top: 117px;
    left: 526px;
    opacity: 0;
  }
}
@keyframes ballMove4 {
  0%{

    transform: rotate(56deg);
    top: 270px;
    left: 747px;
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    transform: rotate(56deg);

    top: 519px;
    left: 911px;
    opacity: 0;
  }
}
@keyframes ballMove5 {
  0%{
    transform: rotate(204deg);
    top: 513px;
    left: 684px;
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    transform: rotate(204deg);

    top: 272px;
    left: 120px;
    opacity: 0;
  }
}
@keyframes ballMove {
  0%{
    top: 242px;
    left: 245px;
    transform: rotate(2deg);

  }
  20%{
    top: 272px;
    left: 1151px;
    transform: rotate(2deg);

  }
  21%{
    transform: rotate(158deg);
    top: 354px;
    left: 973px;

  }
  40%{
    transform: rotate(158deg);
    top: 580px;
    left: 392px;
  }
  41%{
    transform: rotate(297deg);
    top: 333px;
    left: 422px;
  }
  60%{
    transform: rotate(297deg);
    top: 117px;
    left: 526px;
  }
  61%{
    transform: rotate(56deg);
    top: 270px;
    left: 747px;
  }
  80%{
    transform: rotate(56deg);

    top: 519px;
    left: 911px;
  }
  81%{
    transform: rotate(204deg);
    top: 513px;
    left: 684px;
  }
  100%{
    transform: rotate(204deg);

    top: 272px;
    left: 120px;
  }
}
#home-page{
  .disabled{
    color: #3d3d3d !important;

  }
  .dot{
    z-index: -1;
    //top: 238px;
    //left: 286px;
    //transform: rotate(158deg);
    //top: 272px;
    //left: 1151px;

    position: absolute;
    //animation:  ballMove 5s  var(--i) infinite linear;
    width: 10px;


    height: 10px;

    //background-clip: content-box;
    //border: 10px solid transparent;
    border-radius: 50%;
    &.dot5{
      animation:  ballMove5 1s  var(--i)  infinite linear;
        &:before{
          animation:lineOpacity   1s  var(--i) infinite linear;
        }
      }

    &.dot4{
      animation:  ballMove4 1s  var(--i) infinite  linear;
      &:before{
        animation:lineOpacity   1s  var(--i) infinite  linear;
      }
    }
    &.dot3{

      animation:  ballMove3 1s  var(--i) infinite linear;
      &:before{
        animation:lineOpacity   1s  var(--i) infinite  linear;
      }
    }
    &.dot2{
      animation:  ballMove2 1s  var(--i) infinite linear;
      &:before{
        animation:lineOpacity   1s  var(--i) infinite linear;
      }
    }
    &.dot1{
      animation:  ballMove1 1s  var(--i) infinite linear;
      &:before{
        animation:lineOpacity   1s  var(--i) infinite linear;
      }
    }
    //border-width:10px 0  0 10px;
    //border-color: red blue yellow green;
    //border-style: solid;

    //left: -1000px;
    //animation:  ballMove 5s  var(--i) infinite linear;
    //top: 268px;
    //left: 1070px;

    &:before{
      //
      content: "";
      position: absolute;
      width: 200px;
      height: 2px;
      left: 0;
      transform: translateX(-100%);
      background: #d4eaf0;
    }
    //background-color: #5796c5;
    //box-shadow: 0 0 0 4px #5796c5
    //0 0 0 10px #5796c5,
    //0 0 20px #5796c5,
    //0 0 40px 5px #5796c5,
    //0 0 60px 10px #5796c5;

  }
  position: relative;
  .right-tk{
    li{
      line-height: 1.5;
      font-size: 22px;
      color: #fff;
    }
    padding: 20px 50px 20px 30px;
    box-sizing: border-box;
    position: absolute;
    bottom: 20px;
    right: 0px;
    width: 459px;
    height: 365px;
    background: url("../../assets/imgs/tk.png");
  }
  .star{
    .bg1{
      .child-kuang{
        li{
          cursor: pointer;
          height: 56px;
          line-height: 56px;
          padding-left: 2em;
          &:not(.disabled):not(:hover){
            background: linear-gradient(198deg, #FFFFFF 0.1220703125%,#FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          &:hover{

            position: relative;
            &:before{
              left: 0;
              top: 0;
              content: "";
              width: 58px;
              height: 56px;
              position: absolute;
              background: url("@/assets/imgs/选中.png");
            }
            color: #409FFF;

          }
          font-size: 24px;
        }


        width: max-content;
        border: 2px solid #64afe0;
        background: rgba(0, 20, 40, 0.6);
        padding: 10px;
        position: absolute;

        top: 80%;
      }
      //height: 290px;
      //width: 290px;
    }
    transform-style: preserve-3d;


    >div{
      transform-style: preserve-3d;
      perspective: 800px;
      //transform: rotateX(-20deg) rotateY(25deg);
      .bgc{
        width: 300px;
        height: 300px;

        //&:before{
        //  content: "";
        //  position: absolute;
        //  left: 0;
        //  right: 0;
        //  bottom: 0;
        //  top: 0;
        //  background: url("../../assets/imgs/earthclouds1k.png");
        //}
        //background: url("../../assets/imgs/earthmap1k.jpg");
        //background-position: 320px 0;
        //transform: rotateY(calc(90deg * let(--i))) translateZ(150px);
        //transform-origin: center center;
        position: relative;


      }
      .text{
        cursor: pointer;
        text-shadow: 0px 5px 20px #000000;
        top: 0px;

        left: 0;
        color: rgba(239, 248, 252, 1);
        //color: rgba(255, 255, 255, 0.4);
        position: absolute;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 5;
        width: 100%;

        height: max-content;

        text-align: center;
      }
      justify-content: center;
      color: rgba(239, 248, 252, 1);
      font-size: 27px;
      display: flex;
      align-items: center;
      position: absolute;
    }
    >div:nth-child(1){

      .text{
        //margin-left: 42px;
      }
      //width: 281px;
      //height: 297px;
      top: 94px;

      left: -100px;
      .bgc{

        //background: url("../../assets/imgs/1.png");
      }
    }
    >div:nth-child(2){
      .text{
        //margin-left: 42px;
      }
      bottom: -50px;
      //width: 280px;
      //height: 298px;
      left: 160px;

      .bgc{
        //background: url("../../assets/imgs/2.png");
      }
    }
    >div:nth-child(3){
      .text{
        //margin-left: 42px;
      }
      bottom: -60px;
      //width: 280px;
      right: 100px;
      //height: 297px;
      .bgc{
        //background: url("../../assets/imgs/3.png");
      }
    }
    >div:nth-child(4){
      .text{
        //margin-left: 42px;
      }
      //width: 281px;
      //height: 297px;
      top: 130px;
      right: -100px;
      .bgc{
        //background: url("../../assets/imgs/4.png");
      }
    }
    >div:nth-child(5){
      .text{
        //margin-left: 42px;
      }
      //width: 283px;
      //height: 297px;
      top: -100px;
      left: 433px;
      .bgc{
        //background: url("../../assets/imgs/5.png");
      }
    }
    position: absolute;

    left: 50%;
    width: 1205px;
    height: 692px;
    background: url("../../assets/imgs/star.png");
    background-size: 100% 100%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .title{
    cursor: pointer;
   >.text{


     font-size: 50px;
     color: #EFF8FC;
     line-height: 83px;
     text-transform: uppercase;
     letter-spacing: 10px;
     //background-image: url("../../assets/imgs/img.png");
     background: linear-gradient(0deg, #EFF8FC 0%, #E9F8FF 0%,#59C8FF 100%);
     -webkit-background-clip: text;
     animation: wave 30s linear infinite;
     -webkit-text-fill-color: transparent;

   }
    transform: translate(50px,50px);
    width: 539px;
    height: 83px;
    background: url("../../assets/imgs/bk-big.png");
  }
  min-height: 100%;

  background: url("../../assets/imgs/bg.jpg");
  background-size: 100% 100%;
}
</style>