cim-home/src/views/power-home/interface/application-system.vue

<template>
  <div class="application-system">
    <div class="module" v-for="(item,index) in moduleList" :key="index">
      <div class="left-part">
        <img :src="getImagePath(item.name)" style="width: 242px;height: 313px">
      </div>
      <div class="right-part">
        <div class="module-title">
          {{item.name}}
        </div>
        <div class="module-content scroll">
          <div v-for="singleItem in item.children"     @mouseover="selectedItem = singleItem.name"
               @mouseleave="selectedItem = ''" :key="singleItem.name" class="single">
            <div class="single-icon"></div>
            <span class="single-title"
                  :class="{
                 'disabled':singleItem.disabled ||(!loginPinia.canSeeSystemArr.find(i => +i.MODULE_ID === +singleItem.moduleId)),
                 'highlight': singleItem.name === selectedItem }"
                  @click="linkToOther(singleItem,item.name)">{{singleItem.name}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import szcs from '@/assets/imgs/szcs.png';
import szzf from '@/assets/imgs/szzf.png';
import szgc from '@/assets/imgs/szgc.png';
import szcz from '@/assets/imgs/szcz.png';
import {useLoginStore} from "@/pinia/login";
import {loginInSpace, loginInSpaceLog} from "@/service/login";
import {encode} from "js-base64";
import {showMessage} from "@/unit/element-ui/tip";
const loginPinia = useLoginStore()
let moduleList = ref([
  {
    name:"数字工程",
    imgUrl:'xxxx',
    children:[
      {
        name: '上海重大工程信息管理系统',
        moduleId: '655',
        linkHref: 'http://10.86.133.76:8080/FGW_WEB_SZDB',
        loginPage: 'http://10.86.133.76:8080/FGW_WEB_SZDB'
      },
      {name: '上海市城市维护项目管理信息系统', disabled: true}
    ]
  },
  {
    name:"数字住房",
    imgUrl:'xxxx',
    children:[
      {name: '上海市售后公房维修资金管理业务系统', disabled: true}
    ]
  },
  {
    name:"数字城市",
    imgUrl:'xxxx',
    children:[
      {
        name: '上海市住建行业基础数据应用系统',
        isZi: true,
        linkHref: 'https://cimweb.zjw.sh.cegn.cn:2007/industry-database/#/visualizationHome/mainPage',
        loginPage: 'https://cimweb.zjw.sh.cegn.cn:2007/industry-database/#/visualizationHome/mainPage',
        moduleId: '692'
      },
      {
        name: '上海城市体检信息系统',
        isZi: true,
        linkHref: 'https://cimweb.zjw.sh.cegn.cn:2007/urban-examine/#/infoHome',
        loginPage: 'https://cimweb.zjw.sh.cegn.cn:2007/urban-examine/#/login',
        moduleId: '603'
      },
      {
        name: '上海城市更新信息系统',
        moduleId: '653',
        linkHref: 'https://cimweb.zjw.sh.cegn.cn:2007/urban-renew/#/home',
        loginPage: 'https://cimweb.zjw.sh.cegn.cn:2007/urban-renew/#/home'
      },
      {
        name: '上海市海绵城市信息系统',
        moduleId: '747',
        linkHref: 'https://cimweb.zjw.sh.cegn.cn:2007/sponge-city-web/#/index',
        loginPage: 'https://cimweb.zjw.sh.cegn.cn:2007/sponge-city-web/#/index'
      },
      {
        name: '上海市城市网格化管理信息系统',
        moduleId: '1430',
        linkHref: 'https://wghdp.zjw.sh.cegn.cn/',
        loginPage: 'https://wghdp.zjw.sh.cegn.cn/'
      },
      {
        name: '上海地下空间信息基础平台',
        moduleId: '656',
        linkHref: 'http://10.81.73.104:8086',
        loginPage: 'http://10.81.73.104:8086'
      },
      {
        name: '上海路面塌陷风险预警平台',
        moduleId: '657',
        linkHref: 'http://10.81.73.104:8086/#/first/four',
        loginPage: 'http://10.81.73.104:8086/#/first/four'
      },
    ]
  },
  {
    name:"数字村镇",
    imgUrl:'xxxx',
    children:[
      {
        name: '上海市农民相对集中居住管理系统',
        moduleId: '659',
        linkHref: 'https://10.90.11.49:2005/cr/',
        loginPage: 'https://10.90.11.49:2005/cr/'
      },
      {
        name: '上海市农村路桥信息管理系统',
        moduleId: '658',
        linkHref: 'http://10.83.244.180:8888',
        loginPage: 'http://10.83.244.180:8888'
      },
    ]
  }
]);
let selectedItem = ref("");
function getImagePath(name) {
  switch (name) {
    case '数字工程':
      return szgc
    case '数字住房':
      return szzf
    case '数字城市':
      return szcs
    case '数字村镇':
      return szcz
  }
}
function linkToOther(item, headName) {
  let isDisabled = getDisabled(item)
  if (!item.disabled) {
    if (item.linkHref) {
      let isCanLink = loginPinia.canSeeSystemArr.find(i => +i.MODULE_ID === +item.moduleId)
      if (!isCanLink) {
        return
      }
      toPage(item, isDisabled, headName)
    }
  }
  function getDisabled(child) {
    return !loginPinia.canSeeSystemArr.find(i => +i.MODULE_ID === +child.moduleId) && child.isZi
  }
  function toPage(item, isDisabled, headName) {
    // console.log('点击', item, isDisabled)
    debugger
    let path = isDisabled ? item.loginPage : item.linkHref
    if (!item.isZi) {
      if (path.indexOf("http://") > -1 || path.indexOf("https://") > -1) {
        window.open(path, path)
      } else {
        // 记录父名称
        selectedHead.value = headName
        router.push({name: 'interface', params: {type: item.type}})
      }
      return
    }
    // console.log('进入了', isDisabled)

    if (isDisabled) {
      if (path.indexOf("http://") > -1 || path.indexOf("https://") > -1) {
        window.open(path, path)
      } else {
        router.push(path)
      }
      return
    }
    switch (item.moduleId) {
      case '692':  //行业基础数据库临时登录
        loginKj(2, path, "a42fe58a1ff142f696c63b56519833a0")
        break
      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 '51':   //平台监控系统
        loginZW(2, path, "ebb42096345340359741dcb9c039f15c");
        break
      case '571':   //数据综合分析系统
        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 '603':   //城市体检
        loginKj(9, path, "47e0971bb15b4420bf1f351510378c72");
        break

    }
  }
}
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;
          //保存用户信息
          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;
        }
        if (type == "9") {
          //获取用户信息
          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 name = rows[0].NAME;
          var phone = rows[0].PHONE;
          var mail = rows[0].MAIL;
          var change_time = rows[0].CHANGE_TIME;
          var unit_level = rows[0].UNIT_LEVEL;
          var unit_level_name = rows[0].UNIT_LEVEL_NAME;
          debugger
          var roleId = rows[0].ROLE_LIST.map(obj => obj.ROLE_ID).join(',');
          var roleUUID = rows[0].ROLE_LIST.map(obj => obj.UUID).join(',');

          localStorage.setItem("cstj_usercode", usercode);
          localStorage.setItem("cstj_username", username);
          localStorage.setItem("cstj_unitcode", unitcode);
          localStorage.setItem("cstj_unitname", unitname);
          //localStorage.setItem("cstj_password", password);
          localStorage.setItem("cstj_lasttime", lasttime);
          localStorage.setItem("cstj_role", roleId);
          localStorage.setItem("cstj_role_uuid", roleUUID);
          localStorage.setItem("cstj_name", name);
          localStorage.setItem("cstj_phone", phone);
          localStorage.setItem("cstj_mail", mail);
          localStorage.setItem("cstj_changetime", change_time);
          localStorage.setItem("cstj_unit_level", unit_level);
          localStorage.setItem("cstj_unit_level_name", unit_level_name);

          let userInfoObj = {
            'cstj_usercode': usercode,
            cstj_username: username,
            cstj_unitcode: unitcode,
            cstj_unitname: unitname,
            //cstj_password:password,
            cstj_lasttime: lasttime,
            cstj_role: roleId,
            cstj_name: name,
            cstj_phone: phone,
            cstj_mail: mail,
            cstj_changetime: change_time,
            cstj_role_uuid: roleUUID,
          }
          localStorage.setItem('cstjUserInfo', JSON.stringify(userInfoObj))
          loginKj_log(unitcode, usercode, "城市体检-登录", "登录系统成功", "系统登录");
          //切换首页
          window.open(url, url)
          // window.location.href = url;
          return;
        }

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


}
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 => {
  })


}
</script>

<style scoped lang="scss">
.application-system {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  align-content: center;
  font-size: 38px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  height: 100%;
  background: url("@/assets/imgs/power-home.png");
  background-size: 100% 100%;
  .module{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 730px;
    height:380px;
    margin: 20px;
    background-color: rgba(255,255,255,0.95);
    border-radius: 4px;
    .left-part{
      width: 40%;
      height: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .right-part{
      width: 60%;
      height: 80%;
      .module-title{
        width: 100%;
        height: 20%;
        font-size: 36px;
        color: #262626;
        text-align: left;
        padding-left: 20px;
        font-family: "heitao";
      }
      .module-content{
        width: 100%;
        height: 80%;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 10px;
          height: 4px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          background-color: #99a9bf;
        }

        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          border-radius: 5px;
          background-color: #d3dce6;
        }
        .single{
          width: 100%;
          padding-bottom: 16px;
          display: flex;
          justify-content: left;
          align-items: center;
          padding-left: 20px;
          cursor: pointer;
          .single-icon{
            width: 27px;
            height: 17px;
            background: url("@/assets/imgs/bhtb.png") no-repeat;
            background-size: 100% 100%;
          }
          .single-title{
            width: 329px;
            height: 36px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 20px;
            color: #262626;
            line-height: 36px;
            text-align: left;
          }
          .disabled{
            color: grey;
            opacity: 0.5;
          }
        }
      }
    }
  }
}
</style>