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 Cookies from "js-cookie";
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 {
  getUserMyRoleModuleV01,
  getUserRoleInfo,
  loginInYYFNZW
} from "@/service/login";
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 = {
    "getUserMyRoleModuleV01": user_id
  };
  getUserMyRoleModuleV01(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);
    selectUserClass(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
          //保存用户信息
          getUserRoleInfo(usercode,userkeycode).then(async res3 => {

            localStorage.setItem("ptjk_changetime", change_time);
            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,
              role:res3.msg[0].Rows,
              password:password
            }
            // 根据user_id获取角色
            localStorage.setItem('loginUserInfoSpace',JSON.stringify(loginUserInfo))
            loginKj_log(unitcode,usercode, "运维系统-登录", "登录系统成功", "系统登录");
            //空间运维系统 登录成功后 需要缓存用户权限
            selectUserRole(usercode,url,);
            //window.open(url,url);
            return;
          })


          // 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 loginIn_yyfnzt() {

  loginInYYFNZW(loginPinia.loginInfo.username, encode(loginPinia.loginInfo.psd))
      .then(res => {
        let result = res.msg;
        if (result.length == 0) {
          showMessage({
            type: 'warning',
            message: '登录信息失效'
          })
          return;
        }
        let rows = result[0].Rows[0];
        Cookies.set('cim-token', rows.TOKEN)
        localStorage.setItem("yyfnzt_user", JSON.stringify(rows))
      })
      .catch((e) => {
        console.log(e, 123132)
        showMessage({
          type: 'error',
          message: '登录失败'
        })
      })
}


function toOtherRouter(item, isDisabled) {
  if (item.path == '/power-home') {
    loginIn_yyfnzt()
  }

  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: '应用赋能中台', 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>