Merge branch 'master' of http://git.hieap.cn/gitbucket/git/08335/hivui-platform-template

08335 / hivui-platform-template

hivui平台项目模板

Browse code Merge branch 'master' of http://git.hieap.cn/gitbucket/git/08335/hivui-platform-template master
commit ea84390b29777a73994117b9b657b17592286bca 2 parents a67f32f + ae3a62e 12112 authored 6 days ago

Showing 4 changed files

Ignore Space Show notes View project/hivuiLogin/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> <link id="fav_icon" rel="icon" href="" type="image/x-icon"> <% if(htmlWebpackPlugin.vite){%> <!-- <vite> { "module_vmid": "module", "project_vmid": "project" } </vite> --> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/zrender/zrender.min.js"></script> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <script type="text/javascript"> // Don't register the service worker // until the page has fully loaded // Is service worker available? if ('serviceWorker' in navigator) { // 在页面加载时检查是否已经注册了 Service Worker navigator.serviceWorker.getRegistrations().then(function (registrations){ var len = registrations.length; if (len > 0) { console.log('Service Worker already registered'); } else { // 如果没有注册，那么进行注册 window.addEventListener('load', function(){ navigator.serviceWorker.register('/assets_platform/workbox3/sw.js',{scope:'/'}) .then(registration => { console.log('Service Worker registered: ', registration); }) .catch(error => { console.error('Service Worker registration failed: ', error); }); }); } }); } </script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="${serverPath}/render/assets_platform/element-ui/index.css"> <!-- <script src="${serverPath}/render/assets_platform/zrender/zrender.min.js"></script> --> <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script> <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script> <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script> <script src="${serverPath}/render/assets_platform/vue-i18n/vue-i18n.js"></script> <script src="${serverPath}/render/${devGroup}/${projectName}/lang/element-ui/${locale}.js"></script> <script src="${serverPath}/render/${devGroup}/${projectName}/hivuiLogin/lang/zh-CN.js"></script> <!--<script src="${serverPath}/render/${devGroup}/${projectName}/lang/desktop/hi-ui/${locale}.js"></script> <script src="${serverPath}/${devGroup}/${projectName}/lang/project/desktop/${locale}.js"></script> --> <script src="${serverPath}/lang/ref?pn=${projectName}/${devGroup}&vmId=hiui&filePath=${devGroup}/${projectName}/lang/hi-ui/def.language&locale=${locale}"></script> <script src="${serverPath}/lang/ref?pn=${projectName}/${devGroup}&vmId=tpl&filePath=${devGroup}/${projectName}/hivuiLogin/lang/def.language&locale=${locale}"></script> <script src="${serverPath}/lang/static?pn=${projectName}/${devGroup}&vmId=project"></script> <script src="${serverPath}/render/assets_platform/eap/eap.umd.min.js"></script> <script> try{ window.global={ pName:"${projectName}", pUser:"${devGroup}", pn:"${projectName}/${devGroup}" } // 统一输出语言包 zh-CN 名 if(!window.GLOBAL_LANG_TPL){ console.error(window.location.href+',当前模板语言包不存在') } if(!window.GLOBAL_LANG_HIUI){ console.error(window.location.href+',hiui语言包不存在') } window.lang = window.lang \|\|{}; window.lang.keys = Object.assign({},window.GLOBAL_LANG_TPL\|\|{},window.GLOBAL_LANG_HIUI\|\|{},window.GLOBAL_LANG_PROJECT\|\|{},window.GLOBAL_LANG_MODULE\|\|{}); Vue.prototype._i18n = new VueI18n({ locale: 'localelang', messages: { 'localelang':window.lang.keys, }, silentTranslationWarn: true, // 去除国际化警告 }); (function(lang){ lang = lang.split('-'); lang= lang[0]+((lang[1]\|\|'').charAt(0).toUpperCase() + (lang[1]\|\|'').slice(1)); ELEMENT.locale(ELEMENT.lang[lang]) })('${locale}'); }catch(e){ console.log('语言包加载出错！') } </script> <!--发布时公共库--> <!-- <script src="${serverPath}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="${serverPath}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="${serverPath}/render/assets_platform/customSysCfg/index.js"></script> <script src="${serverPath}/vm/render/${devGroup}/${projectName}/setting/desktop/base.js"></script> <script src="${serverPath}/render/${devGroup}/${projectName}/setting/desktop/appsetting.js"></script> <%}%> </head> <body> <div id="app"> <div style="padding:50px 0;text-align:center;"> <div> <img id="main_loading_logo" style="display:none;" src="" /> <div id="hide_loading_logo" style="display:none;height:230px;width:230px;margin:auto;"></div> </div> <div><span class="sysInit"></span><a href="javascript:location.reload();"><span class="clickRefresh"></span></a></div> </div> </div> <script> if(window.GLOBAL_LANG_TPL){ document.querySelector(".sysInit").innerText=window.GLOBAL_LANG_TPL.hivuiLogin_sysInit; document.querySelector(".clickRefresh").innerText=window.GLOBAL_LANG_TPL.hivuiLogin_clickRefresh; } let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src; if(_img && window.customSysCofig.sysLoadLogo.hide){ document.getElementById("hide_loading_logo").style.display="block"; }else{ document.getElementById("main_loading_logo").src = (_img \|\| (window._global ? "./assets/logo_max.png" : "./static/img/logo_max.png")); document.getElementById("main_loading_logo").style.display="inline"; } if(window.customSysCofig){ if(window.customSysCofig.syTitle){ document.title=window.customSysCofig.syTitle; } if(window.customSysCofig.loginTitle){ document.title=window.customSysCofig.loginTitle; } if(window.customSysCofig.favicon){ document.getElementById("fav_icon").href=window.customSysCofig.favicon; } } <% if(!htmlWebpackPlugin.vite){%> window.__loginCfg={ pageType:"${pageType}", redirect:"${redirect}", } <%}%> </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="/<%=htmlWebpackPlugin.project%>/hivuiLogin/index.js"></script> <script> //预览时判断60s还没有加载完，自动重刷 var _winLoadedCtrl = window.setInterval(function(){ if(document.getElementById("main_loading_logo")){ window.location.reload(); }else{ window.clearInterval(_winLoadedCtrl); } },601000) </script> <%}%> <!-- built files will be auto injected --> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> <link id="fav_icon" rel="icon" href="" type="image/x-icon"> <% if(htmlWebpackPlugin.vite){%> <!-- <vite> { "module_vmid": "module", "project_vmid": "project" } </vite> --> <!--预览时公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/zrender/zrender.min.js"></script> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <script type="text/javascript"> // Don't register the service worker // until the page has fully loaded // Is service worker available? if ('serviceWorker' in navigator) { // 在页面加载时检查是否已经注册了 Service Worker navigator.serviceWorker.getRegistrations().then(function (registrations){ var len = registrations.length; if (len > 0) { console.log('Service Worker already registered'); } else { // 如果没有注册，那么进行注册 window.addEventListener('load', function(){ navigator.serviceWorker.register('/assets_platform/workbox3/sw.js',{scope:'/'}) .then(registration => { console.log('Service Worker registered: ', registration); }) .catch(error => { console.error('Service Worker registration failed: ', error); }); }); } }); } </script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="${serverPath}/render/assets_platform/element-ui/index.css"> <script src="${serverPath}/render/assets_platform/zrender/zrender.min.js"></script> <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script> <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script> <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script> <script src="${serverPath}/render/assets_platform/vue-i18n/vue-i18n.js"></script> <script src="${serverPath}/render/${devGroup}/${projectName}/lang/element-ui/${locale}.js"></script> <script src="${serverPath}/render/${devGroup}/${projectName}/hivuiLogin/lang/zh-CN.js"></script> <!--<script src="${serverPath}/render/${devGroup}/${projectName}/lang/desktop/hi-ui/${locale}.js"></script> <script src="${serverPath}/${devGroup}/${projectName}/lang/project/desktop/${locale}.js"></script> --> <script src="${serverPath}/lang/ref?pn=${projectName}/${devGroup}&vmId=hiui&filePath=${devGroup}/${projectName}/lang/hi-ui/def.language&locale=${locale}"></script> <script src="${serverPath}/lang/ref?pn=${projectName}/${devGroup}&vmId=tpl&filePath=${devGroup}/${projectName}/hivuiLogin/lang/def.language&locale=${locale}"></script> <script src="${serverPath}/lang/static?pn=${projectName}/${devGroup}&vmId=project"></script> <script src="${serverPath}/render/assets_platform/eap/eap.umd.min.js"></script> <script> try{ window.global={ pName:"${projectName}", pUser:"${devGroup}", pn:"${projectName}/${devGroup}" } // 统一输出语言包 zh-CN 名 if(!window.GLOBAL_LANG_TPL){ console.error(window.location.href+',当前模板语言包不存在') } if(!window.GLOBAL_LANG_HIUI){ console.error(window.location.href+',hiui语言包不存在') } window.lang = window.lang \|\|{}; window.lang.keys = Object.assign({},window.GLOBAL_LANG_TPL\|\|{},window.GLOBAL_LANG_HIUI\|\|{},window.GLOBAL_LANG_PROJECT\|\|{},window.GLOBAL_LANG_MODULE\|\|{}); Vue.prototype._i18n = new VueI18n({ locale: 'localelang', messages: { 'localelang':window.lang.keys, }, silentTranslationWarn: true, // 去除国际化警告 }); (function(lang){ lang = lang.split('-'); lang= lang[0]+((lang[1]\|\|'').charAt(0).toUpperCase() + (lang[1]\|\|'').slice(1)); ELEMENT.locale(ELEMENT.lang[lang]) })('${locale}'); }catch(e){ console.log('语言包加载出错！') } </script> <!--发布时公共库--> <!-- <script src="${serverPath}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="${serverPath}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="${serverPath}/render/assets_platform/customSysCfg/index.js"></script> <script src="${serverPath}/vm/render/${devGroup}/${projectName}/setting/desktop/base.js"></script> <script src="${serverPath}/render/${devGroup}/${projectName}/setting/desktop/appsetting.js"></script> <%}%> </head> <body> <div id="app"> <div style="padding:50px 0;text-align:center;"> <div> <img id="main_loading_logo" style="display:none;" src="" /> <div id="hide_loading_logo" style="display:none;height:230px;width:230px;margin:auto;"></div> </div> <div><span class="sysInit"></span><a href="javascript:location.reload();"><span class="clickRefresh"></span></a></div> </div> </div> <script> if(window.GLOBAL_LANG_TPL){ document.querySelector(".sysInit").innerText=window.GLOBAL_LANG_TPL.hivuiLogin_sysInit; document.querySelector(".clickRefresh").innerText=window.GLOBAL_LANG_TPL.hivuiLogin_clickRefresh; } let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src; if(_img && window.customSysCofig.sysLoadLogo.hide){ document.getElementById("hide_loading_logo").style.display="block"; }else{ document.getElementById("main_loading_logo").src = (_img \|\| (window._global ? "./assets/logo_max.png" : "./static/img/logo_max.png")); document.getElementById("main_loading_logo").style.display="inline"; } if(window.customSysCofig){ if(window.customSysCofig.syTitle){ document.title=window.customSysCofig.syTitle; } if(window.customSysCofig.loginTitle){ document.title=window.customSysCofig.loginTitle; } if(window.customSysCofig.favicon){ document.getElementById("fav_icon").href=window.customSysCofig.favicon; } } <% if(!htmlWebpackPlugin.vite){%> window.__loginCfg={ pageType:"${pageType}", redirect:"${redirect}", } <%}%> </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="/<%=htmlWebpackPlugin.project%>/hivuiLogin/index.js"></script> <script> //预览时判断60s还没有加载完，自动重刷 var _winLoadedCtrl = window.setInterval(function(){ if(document.getElementById("main_loading_logo")){ window.location.reload(); }else{ window.clearInterval(_winLoadedCtrl); } },601000) </script> <%}%> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View

project/hivuiLogin/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title></title>
  <link id="fav_icon" rel="icon" href="" type="image/x-icon">
  <% if(htmlWebpackPlugin.vite){%>
  
  
  <link rel="stylesheet" href="/assets_platform/element-ui/index.css">
  <script src="/assets_platform/zrender/zrender.min.js"></script>
  <script src="/assets_platform/vue/vue.min.js"></script>
  <script src="/assets_platform/vuex/vuex.min.js"></script>
  <script src="/assets_platform/vue-router/vue-router.min.js"></script>
  <script src="/assets_platform/element-ui/index.js"></script>
  <script src="/assets_platform/eap/eap.umd.min.js"></script>

<% if(!htmlWebpackPlugin.vite){%>
  <link rel="stylesheet" href="${serverPath}/render/assets_platform/element-ui/index.css">
  
  <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script>
  <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script>
  <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script>
  <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script>

<script src="${serverPath}/render/assets_platform/vendor_dll/vendor.dll.js"></script>
  <script src="${serverPath}/render/assets_platform/customSysCfg/index.js"></script>
  <script src="${serverPath}/vm/render/${devGroup}/${projectName}/setting/desktop/base.js"></script>
  <script src="${serverPath}/render/${devGroup}/${projectName}/setting/desktop/appsetting.js"></script>

<%}%>
</head>

</div>
  </div>
  <script>
    if(window.GLOBAL_LANG_TPL){
      document.querySelector(".sysInit").innerText=window.GLOBAL_LANG_TPL.hivuiLogin_sysInit;
      document.querySelector(".clickRefresh").innerText=window.GLOBAL_LANG_TPL.hivuiLogin_clickRefresh;
    }
    let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src;
    if(_img && window.customSysCofig.sysLoadLogo.hide){
      document.getElementById("hide_loading_logo").style.display="block";
    }else{
      document.getElementById("main_loading_logo").src = (_img || (window._global ? "./assets/logo_max.png" : "./static/img/logo_max.png"));
      document.getElementById("main_loading_logo").style.display="inline";
    }

if(window.customSysCofig){
      if(window.customSysCofig.syTitle){
        document.title=window.customSysCofig.syTitle;
      }
      if(window.customSysCofig.loginTitle){
        document.title=window.customSysCofig.loginTitle;
      }
      if(window.customSysCofig.favicon){
        document.getElementById("fav_icon").href=window.customSysCofig.favicon;
      }

}
    <% if(!htmlWebpackPlugin.vite){%>
    window.__loginCfg={
      pageType:"${pageType}",
      redirect:"${redirect}",
    }
    <%}%>
  </script>
  <% if(htmlWebpackPlugin.vite==true){%>
    <script type="module" src="/<%=htmlWebpackPlugin.project%>/hivuiLogin/index.js"></script>
  <script>
      //预览时判断60s还没有加载完，自动重刷
      var _winLoadedCtrl = window.setInterval(function(){
          if(document.getElementById("main_loading_logo")){
            window.location.reload();
          }else{
            window.clearInterval(_winLoadedCtrl);
          }
        },60*1000)
    </script>
  <%}%>
  
</body>

</html>

<!DOCTYPE html>
<html>

<% if(!htmlWebpackPlugin.vite){%>
  <link rel="stylesheet" href="${serverPath}/render/assets_platform/element-ui/index.css">
  <script src="${serverPath}/render/assets_platform/zrender/zrender.min.js"></script>
  <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script>
  <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script>
  <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script>
  <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script>

<%}%>
</head>

</html>

Ignore Space Show notes View project/hivuiMain/App.vue
<template> <div class="app"> <transition> <router-view v-if="$store.state.appStatus == 'success'" /> </transition> <transition> <div v-if="$store.state.appStatus != 'success'" class="loader"> <div class="pl-logo-lg fadeInUp animated"> <img :src="logoSrc" v-if="logoSrc != ''"> </div> <span class="txt"> <span v-for="(str, index) in loadTexts" :key="index">{{ str }}</span> <span class="msgInfo" v-if="$store.state.appStatus == 'loading'">{{ $t('hivuiMain_sysLoading') }}</span> <span class="msgInfo" v-if="$store.state.appStatus != 'loading' && !mainPageInitErrorJump" style="color:red" @click="handleReload">{{ $store.state.appStatusMsg \|\| $t('hivuiMain_loadedFailClickRefresh') }}</span> </span> </div> </transition> </div> </template> <script> import Cookies from 'js-cookie' import LoginPic from "@main/assets/logo_max.png" import { getUrlValue, setUrlValue, getUrlSearch } from "@main/utils"; import { getToken } from '@main/utils/auth' import md5 from "js-md5"; import WebScoketManager from '@main/utils/websocket.js' export default { data() { return { loadTexts: "", logoSrc: "", mainPageInitErrorJump: window.mainPageInitErrorJump, loginStatusWS: null }; }, methods: { handleReload() { window.location.reload(); }, detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio) { ratio = Math.round(ratio * 100); } return ratio; }, checkZoom() { let ratio = this.detectZoom(); if (ratio != 100) { // this.$message.error('警告，浏览器没有按正常比例显示会影响部份功能！') } }, createSocket() { let me = this; if ("WebSocket" in window) { try { // 构造 WebSocket 路径 let socketHost = window.HIVUI_SETTING?.serverUrl.replace("http", "ws"); let pName = window.HIVUI_SETTING?.pName; let wsClientId = md5(getToken() \|\| ''); // let socketHost = "https://e52.hieap.cn".replace('http', 'ws') // let pName = 'fdszh'; // let wsClientId = md5('eyJhbGciOiJIUzUxMiJ9.eyJ1aWQiOiJhZG1pbiIsImV4cGlyZXMiOjE3NjgyMjM4NjM2MDQsInBob25lIjoiMTg4ODg4MDA4ODgiLCJuYW1lIjoi566h55CG5ZGYIiwidGVybSI6InBjIiwidG9rZW4iOiIwYWRkZWJkNy0wOTc3LTQ2YzgtYmRjYi1jN2FmNzVkNTUzMDIifQ.5aJVU42LLVrsc5_cdOqkPLTv4qxeCMoa0c3MAPE9pb9-Lxv37bt0uRGYDG5zWtdBHMglbUaKWnCGUFhN3Ihkhw') let url = socketHost + "/" + pName + "/ws/p2p/" + wsClientId; // 创建 WebSocket 实例 me.loginStatusWS = new WebScoketManager({ link: url, //"reConnect":true, }); // 初始化 WebSocket 事件 me.initWSEvent(); } catch (error) { console.error("WebSocket 初始化失败:", error); reject(new Error("WebSocket 初始化失败: " + error.message)); } } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); reject(new Error("浏览器不支持 WebSocket")); } }, //初始化WS事件 initWSEvent() { let me = this; let _ws = me.loginStatusWS; if (!_ws) { console.log("WebSocket 实例未初始化"); return; } console.log('开始连接websocket'); //建立连接 _ws.on("onopen", () => { console.log('数据发送中...'); }); //连接失败 _ws.on("onclose", () => { console.log('连接已关闭...'); }); //超时关闭 _ws.on("overtime", () => { console.log('服务器连接超时'); }); _ws.on("reConnect", () => { console.log('重新连接websocket中'); }); _ws.on("endReConnect", () => { console.log('重新连接次数超出上限，终止连接'); }); //接受消息 _ws.on("onmessage", (data) => { console.log('数据已接收: ' + data); }); }, }, mounted() { // this.checkZoom(); // window.addEventListener('resize',()=>{ // this.checkZoom(); // }); let me = this; // 设置任务中心刷新状态 top.window.__setRefreshTaskcenter = function (state) { if (state == undefined) { state = true; } top.window.__refreshTaskcenter = state; } let urlPn = getUrlValue(location.search, "pn"); if (urlPn) { if (!getUrlValue(window.HIVUI_SETTING.loginUrl, "pn")) { window.HIVUI_SETTING.loginUrl += "?pn=" + urlPn; } if (!getUrlValue(window.HIVUI_SETTING.mainPageUrl, "pn")) { window.HIVUI_SETTING.mainPageUrl += "?pn=" + urlPn; } if (!getUrlValue(window.HIVUI_SETTING.customLoginUrl, "pn")) { window.HIVUI_SETTING.customLoginUrl += "?pn=" + urlPn; } } //如果token不一致，替换掉然后重新载入 let urlToken = getUrlValue(location.href, "access_token"); let nowToken = getToken(); if (false && !window._global && urlToken && nowToken && (urlToken != nowToken)) {//正式环境 let newUrl = setUrlValue(decodeURIComponent(location.href), "access_token", nowToken); location = newUrl; location.reload(); } //系统间跳转，将ticket去除 if (!window._global && getUrlValue(decodeURIComponent(location.href), "ticket")) { let newUrl = setUrlValue(decodeURIComponent(location.href), "ticket", ""); location = newUrl.replace("&ticket=", "") + (location.hash ? location.hash : "#/"); //location.reload(); } window.Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } //customSysCofig默认值 window.customSysCofig = _.merge({ showMiniLogin: true, }, window.customSysCofig); if (!window.localStorage.getItem("locale")) { window.localStorage.setItem("locale", JSON.stringify({ desc: "中文", name: "zh-CN", })); Cookies.set("locale", "zh-CN"); } window.__guid = new Date().valueOf(); //window.customSysCofig=_.merge(window.default_customSysCfg,window.customSysCofig\|\|{}); window == top && window.customSysCofig && window.customSysCofig.thirdParty && window.customSysCofig.thirdParty.forEach((item) => {//第三方脚本样式资源引用 let _dom; switch (item.type) { case "js": _dom = document.createElement("script"); _dom.type = "text/javascript"; _dom.src = item.link; if (item.callback) { _dom.onload = () => { item.callback(); } } break; case "css": _dom = document.createElement("link"); _dom.rel = "stylesheet"; _dom.href = item.link; break; } document.querySelector("head").appendChild(_dom); }); setTimeout(() => { window.__sysConfig = _.merge({ events: { onLoad1: function () { } }, projectName: "eaptpl", /sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' },/ sysList: [ ], langList: { id: __guid++, name: (window.localStorage.getItem("locale") ? (JSON.parse(window.localStorage.getItem("locale")).desc) : "中文"), type: 'lang', iconClass: 'icon-language', children: [ { id: __guid++, name: "中文", key: "zh-CN", }, { id: __guid++, name: "English", key: "en", }, ] }, userInfo: { id: __guid++, name: '${fusername}', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name: me.$t('hivuiMain_app_user') + '：${fusername}/${fuserid}', iconClass: 'icon-user', }, { id: __guid++, name: me.$t('hivuiMain_app_orgbz') + '：${fbzname}/${fbzid}', iconClass: 'icon-user', type: "orgBz", }, { id: __guid++, name: me.$t('hivuiMain_app_orgname') + '：${forgname}/${forgid}', iconClass: 'icon-user', }, { id: __guid++, name: me.$t('hivuiMain_app_rolename') + '：${frolename}/${froleid}', iconClass: 'icon-user', }, { id: __guid++, name: me.$t('hivuiMain_app_personal_Center'), iconClass: 'icon-user', type: "personalCenter" }, /{ id: __guid++, iconClass:'icon-edit', name:'修改用户信息', type:'modifyUserInfo', },/ { id: __guid++, iconClass: 'icon-edit', name: me.$t('hivuiMain_app_modifyPw'), type: 'modifyPw', }, ] }, }, window.customSysCofig); if (window.customSysCofig.addLangList) { window.__sysConfig.langList.children = [...window.__sysConfig.langList.children, ...window.customSysCofig.addLangList]; } this.$store.dispatch("app/getSysConfig").then(res => { let cfg = this.$store.state.app.config \|\| {}; let loadText = (cfg.sysLoadLogo && cfg.sysLoadLogo.title) \|\| ""; let logoSrc = (cfg.sysLoadLogo && cfg.sysLoadLogo.src) \|\| ""; this.loadTexts = loadText.split(""); this.logoSrc = cfg.sysLoadLogo.hide ? "" : (logoSrc \|\| LoginPic); }); }, 0); console.log("--------------test",window.customSysCofig); if(window.customSysCofig.loginStatusMonitorWs && window.customSysCofig.loginStatusMonitorWs.enable){ this.createSocket(); } } }; </script> <style scoped> .app { height: 100%; background: linear-gradient(rgb(255, 255, 255) 0px, rgb(243, 248, 253) 50%, rgb(229, 240, 250)); } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .loader { position: absolute; top: 50%; left: 50%; margin-top: -50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -mos-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .loader .txt { display: inline-block; word-break: normal; white-space: nowrap; margin: auto; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.15); } .loader .txt span { display: inline-block; font-size: 68px !important; padding: 0 5px; -webkit-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -ms-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -o-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; color: #0066cc; } .loader .txt span:nth-child(1) { -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -ms-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; } .loader .txt span:nth-child(2) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -ms-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; } .loader .txt span:nth-child(3) { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } .loader .txt span:nth-child(4) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; } .loader .txt span:nth-child(5) { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; -ms-animation-delay: 400ms; -o-animation-delay: 400ms; animation-delay: 400ms; } .loader .txt span:nth-child(6) { -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; -ms-animation-delay: 500ms; -o-animation-delay: 500ms; animation-delay: 500ms; } .loader .txt span:nth-child(7) { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; -ms-animation-delay: 600ms; -o-animation-delay: 600ms; animation-delay: 600ms; } .loader .txt span:nth-child(8) { -webkit-animation-delay: 700ms; -moz-animation-delay: 700ms; -ms-animation-delay: 700ms; -o-animation-delay: 700ms; animation-delay: 700ms; } .loader .txt span:nth-child(9) { -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; -ms-animation-delay: 800ms; -o-animation-delay: 800ms; animation-delay: 800ms; } .loader .txt span:nth-child(10) { -webkit-animation-delay: 900ms; -moz-animation-delay: 900ms; -ms-animation-delay: 900ms; -o-animation-delay: 900ms; animation-delay: 900ms; } .loader .txt span:nth-child(11) { -webkit-animation-delay: 1000ms; -moz-animation-delay: 1000ms; -ms-animation-delay: 1000ms; -o-animation-delay: 1000ms; animation-delay: 1000ms; } .loader .txt span:nth-child(12) { -webkit-animation-delay: 1100ms; -moz-animation-delay: 1100ms; -ms-animation-delay: 1100ms; -o-animation-delay: 1100ms; animation-delay: 1100ms; } .loader .txt span:nth-child(13) { -webkit-animation-delay: 1200ms; -moz-animation-delay: 1200ms; -ms-animation-delay: 1200ms; -o-animation-delay: 1200ms; animation-delay: 1200ms; } .loader .txt span.msgInfo { display: block; padding-top: 15px; font-size: 16px !important; text-shadow: none; color: #0272bd; text-shadow: none; animation: none; -webkit-animation: none; } @-webkit-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-moz-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-mos-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-o-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } </style> <template> <div class="app"> <transition> <router-view v-if="$store.state.appStatus == 'success'" /> </transition> <transition> <div v-if="$store.state.appStatus != 'success'" class="loader"> <div class="pl-logo-lg fadeInUp animated"> <img :src="logoSrc" v-if="logoSrc != ''"> </div> <span class="txt"> <span v-for="(str, index) in loadTexts" :key="index">{{ str }}</span> <span class="msgInfo" v-if="$store.state.appStatus == 'loading'">{{ $t('hivuiMain_sysLoading') }}</span> <span class="msgInfo" v-if="$store.state.appStatus != 'loading' && !mainPageInitErrorJump" style="color:red" @click="handleReload">{{ $store.state.appStatusMsg \|\| $t('hivuiMain_loadedFailClickRefresh') }}</span> </span> </div> </transition> </div> </template> <script> import Cookies from 'js-cookie' import LoginPic from "@main/assets/logo_max.png" import { getUrlValue, setUrlValue, getUrlSearch } from "@main/utils"; import { getToken } from '@main/utils/auth' import md5 from "js-md5"; import WebScoketManager from '@main/utils/websocket.js' export default { data() { return { loadTexts: "", logoSrc: "", mainPageInitErrorJump: window.mainPageInitErrorJump, loginStatusWS: null }; }, methods: { handleReload() { window.location.reload(); }, detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio) { ratio = Math.round(ratio * 100); } return ratio; }, checkZoom() { let ratio = this.detectZoom(); if (ratio != 100) { // this.$message.error('警告，浏览器没有按正常比例显示会影响部份功能！') } }, createSocket() { let me = this; if ("WebSocket" in window) { try { // 构造 WebSocket 路径 let socketHost = window.HIVUI_SETTING?.serverUrl.replace("http", "ws"); let pName = window.HIVUI_SETTING?.projectName; let wsClientId = md5(getToken() \|\| ''); // let socketHost = "https://e52.hieap.cn".replace('http', 'ws') // let pName = 'fdszh'; // let wsClientId = md5('eyJhbGciOiJIUzUxMiJ9.eyJ1aWQiOiJhZG1pbiIsImV4cGlyZXMiOjE3Njc5NjgxNzYxNjMsInBob25lIjoiMTg4ODg4MDA4ODgiLCJuYW1lIjoi566h55CG5ZGYIiwidGVybSI6InBjIiwidG9rZW4iOiI1NDQ2ODJmZC03MTIxLTRmMzAtODkzNC1jN2UyNDk1OTRkNTcifQ.1UJbTnGmfTHmCEdlMqHz3QJ9weRrYGUAMYQGfO-j-_5KLKKNKwWSC-FXl-5Pq0xQXrPCr7EkCT12u4zwOwR_Kg') let url = socketHost + "/" + pName + "/ws/p2p/" + wsClientId; // 创建 WebSocket 实例 me.loginStatusWS = new WebScoketManager({ link: url, //"reConnect":true, }); // 初始化 WebSocket 事件 me.initWSEvent(); } catch (error) { console.error("WebSocket 初始化失败:", error); reject(new Error("WebSocket 初始化失败: " + error.message)); } } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); reject(new Error("浏览器不支持 WebSocket")); } }, //初始化WS事件 initWSEvent() { let me = this; let _ws = me.loginStatusWS; if (!_ws) { console.log("WebSocket 实例未初始化"); return; } console.log('开始连接websocket'); //建立连接 _ws.on("onopen", () => { console.log('数据发送中...'); }); //连接失败 _ws.on("onclose", () => { console.log('连接已关闭...'); }); //超时关闭 _ws.on("overtime", () => { console.log('服务器连接超时'); }); _ws.on("reConnect", () => { console.log('重新连接websocket中'); }); _ws.on("endReConnect", () => { console.log('重新连接次数超出上限，终止连接'); }); //接受消息 _ws.on("onmessage", (data) => { console.log('数据已接收: ' + data); }); }, }, mounted() { // this.checkZoom(); // window.addEventListener('resize',()=>{ // this.checkZoom(); // }); let me = this; // 设置任务中心刷新状态 top.window.__setRefreshTaskcenter = function (state) { if (state == undefined) { state = true; } top.window.__refreshTaskcenter = state; } let urlPn = getUrlValue(location.search, "pn"); if (urlPn) { if (!getUrlValue(window.HIVUI_SETTING.loginUrl, "pn")) { window.HIVUI_SETTING.loginUrl += "?pn=" + urlPn; } if (!getUrlValue(window.HIVUI_SETTING.mainPageUrl, "pn")) { window.HIVUI_SETTING.mainPageUrl += "?pn=" + urlPn; } if (!getUrlValue(window.HIVUI_SETTING.customLoginUrl, "pn")) { window.HIVUI_SETTING.customLoginUrl += "?pn=" + urlPn; } } //如果token不一致，替换掉然后重新载入 let urlToken = getUrlValue(location.href, "access_token"); let nowToken = getToken(); if (false && !window._global && urlToken && nowToken && (urlToken != nowToken)) {//正式环境 let newUrl = setUrlValue(decodeURIComponent(location.href), "access_token", nowToken); location = newUrl; location.reload(); } //系统间跳转，将ticket去除 if (!window._global && getUrlValue(decodeURIComponent(location.href), "ticket")) { let newUrl = setUrlValue(decodeURIComponent(location.href), "ticket", ""); location = newUrl.replace("&ticket=", "") + (location.hash ? location.hash : "#/"); //location.reload(); } window.Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } //customSysCofig默认值 window.customSysCofig = _.merge({ showMiniLogin: true, }, window.customSysCofig); if (!window.localStorage.getItem("locale")) { window.localStorage.setItem("locale", JSON.stringify({ desc: "中文", name: "zh-CN", })); Cookies.set("locale", "zh-CN"); } window.__guid = new Date().valueOf(); //window.customSysCofig=_.merge(window.default_customSysCfg,window.customSysCofig\|\|{}); window == top && window.customSysCofig && window.customSysCofig.thirdParty && window.customSysCofig.thirdParty.forEach((item) => {//第三方脚本样式资源引用 let _dom; switch (item.type) { case "js": _dom = document.createElement("script"); _dom.type = "text/javascript"; _dom.src = item.link; if (item.callback) { _dom.onload = () => { item.callback(); } } break; case "css": _dom = document.createElement("link"); _dom.rel = "stylesheet"; _dom.href = item.link; break; } document.querySelector("head").appendChild(_dom); }); setTimeout(() => { window.__sysConfig = _.merge({ events: { onLoad1: function () { } }, projectName: "eaptpl", /sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' },/ sysList: [ ], langList: { id: __guid++, name: (window.localStorage.getItem("locale") ? (JSON.parse(window.localStorage.getItem("locale")).desc) : "中文"), type: 'lang', iconClass: 'icon-language', children: [ { id: __guid++, name: "中文", key: "zh-CN", }, { id: __guid++, name: "English", key: "en", }, ] }, userInfo: { id: __guid++, name: '${fusername}', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name: me.$t('hivuiMain_app_user') + '：${fusername}/${fuserid}', iconClass: 'icon-user', }, { id: __guid++, name: me.$t('hivuiMain_app_orgbz') + '：${fbzname}/${fbzid}', iconClass: 'icon-user', type: "orgBz", }, { id: __guid++, name: me.$t('hivuiMain_app_orgname') + '：${forgname}/${forgid}', iconClass: 'icon-user', }, { id: __guid++, name: me.$t('hivuiMain_app_rolename') + '：${frolename}/${froleid}', iconClass: 'icon-user', }, { id: __guid++, name: me.$t('hivuiMain_app_personal_Center'), iconClass: 'icon-user', type: "personalCenter" }, /{ id: __guid++, iconClass:'icon-edit', name:'修改用户信息', type:'modifyUserInfo', },/ { id: __guid++, iconClass: 'icon-edit', name: me.$t('hivuiMain_app_modifyPw'), type: 'modifyPw', }, ] }, }, window.customSysCofig); if (window.customSysCofig.addLangList) { window.__sysConfig.langList.children = [...window.__sysConfig.langList.children, ...window.customSysCofig.addLangList]; } this.$store.dispatch("app/getSysConfig").then(res => { let cfg = this.$store.state.app.config \|\| {}; let loadText = (cfg.sysLoadLogo && cfg.sysLoadLogo.title) \|\| ""; let logoSrc = (cfg.sysLoadLogo && cfg.sysLoadLogo.src) \|\| ""; this.loadTexts = loadText.split(""); this.logoSrc = cfg.sysLoadLogo.hide ? "" : (logoSrc \|\| LoginPic); }); }, 0); if(window.customSysCofig.loginStatusMonitorWs && window.customSysCofig.loginStatusMonitorWs.enable){ this.createSocket(); } } }; </script> <style scoped> .app { height: 100%; background: linear-gradient(rgb(255, 255, 255) 0px, rgb(243, 248, 253) 50%, rgb(229, 240, 250)); } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .loader { position: absolute; top: 50%; left: 50%; margin-top: -50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -mos-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .loader .txt { display: inline-block; word-break: normal; white-space: nowrap; margin: auto; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.15); } .loader .txt span { display: inline-block; font-size: 68px !important; padding: 0 5px; -webkit-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -ms-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -o-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; color: #0066cc; } .loader .txt span:nth-child(1) { -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -ms-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; } .loader .txt span:nth-child(2) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -ms-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; } .loader .txt span:nth-child(3) { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } .loader .txt span:nth-child(4) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; } .loader .txt span:nth-child(5) { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; -ms-animation-delay: 400ms; -o-animation-delay: 400ms; animation-delay: 400ms; } .loader .txt span:nth-child(6) { -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; -ms-animation-delay: 500ms; -o-animation-delay: 500ms; animation-delay: 500ms; } .loader .txt span:nth-child(7) { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; -ms-animation-delay: 600ms; -o-animation-delay: 600ms; animation-delay: 600ms; } .loader .txt span:nth-child(8) { -webkit-animation-delay: 700ms; -moz-animation-delay: 700ms; -ms-animation-delay: 700ms; -o-animation-delay: 700ms; animation-delay: 700ms; } .loader .txt span:nth-child(9) { -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; -ms-animation-delay: 800ms; -o-animation-delay: 800ms; animation-delay: 800ms; } .loader .txt span:nth-child(10) { -webkit-animation-delay: 900ms; -moz-animation-delay: 900ms; -ms-animation-delay: 900ms; -o-animation-delay: 900ms; animation-delay: 900ms; } .loader .txt span:nth-child(11) { -webkit-animation-delay: 1000ms; -moz-animation-delay: 1000ms; -ms-animation-delay: 1000ms; -o-animation-delay: 1000ms; animation-delay: 1000ms; } .loader .txt span:nth-child(12) { -webkit-animation-delay: 1100ms; -moz-animation-delay: 1100ms; -ms-animation-delay: 1100ms; -o-animation-delay: 1100ms; animation-delay: 1100ms; } .loader .txt span:nth-child(13) { -webkit-animation-delay: 1200ms; -moz-animation-delay: 1200ms; -ms-animation-delay: 1200ms; -o-animation-delay: 1200ms; animation-delay: 1200ms; } .loader .txt span.msgInfo { display: block; padding-top: 15px; font-size: 16px !important; text-shadow: none; color: #0272bd; text-shadow: none; animation: none; -webkit-animation: none; } @-webkit-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-moz-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-mos-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-o-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } </style>

Ignore Space Show notes View

project/hivuiMain/App.vue

<div v-if="$store.state.appStatus != 'success'" class="loader">
                <div class="pl-logo-lg fadeInUp animated">
                    <img :src="logoSrc" v-if="logoSrc != ''">
                </div>
                <span class="txt">
                    <span v-for="(str, index) in loadTexts" :key="index">{{ str }}</span>
                    <span class="msgInfo" v-if="$store.state.appStatus == 'loading'">{{ $t('hivuiMain_sysLoading')
                    }}</span>
                    <span class="msgInfo" v-if="$store.state.appStatus != 'loading' && !mainPageInitErrorJump"
                        style="color:red" @click="handleReload">{{ $store.state.appStatusMsg ||
                            $t('hivuiMain_loadedFailClickRefresh') }}</span>
                </span>
            </div>
        </transition>
    </div>
</template>
<script>
import Cookies from 'js-cookie'
import LoginPic from "@main/assets/logo_max.png"
import { getUrlValue, setUrlValue, getUrlSearch } from "@main/utils";
import { getToken } from '@main/utils/auth'
import md5 from "js-md5";
import WebScoketManager from '@main/utils/websocket.js'
export default {
    data() {
        return {
            loadTexts: "",
            logoSrc: "",
            mainPageInitErrorJump: window.mainPageInitErrorJump,
            loginStatusWS: null
        };
    },
    methods: {
        handleReload() {
            window.location.reload();
        },
        detectZoom() {
            var ratio = 0,
                screen = window.screen,
                ua = navigator.userAgent.toLowerCase();
            if (window.devicePixelRatio !== undefined) {
                ratio = window.devicePixelRatio;
            }
            else if (~ua.indexOf('msie')) {
                if (screen.deviceXDPI && screen.logicalXDPI) {
                    ratio = screen.deviceXDPI / screen.logicalXDPI;
                }
            }
            else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
                ratio = window.outerWidth / window.innerWidth;
            }
            if (ratio) {
                ratio = Math.round(ratio * 100);
            }
            return ratio;
        },
        checkZoom() {
            let ratio = this.detectZoom();
            if (ratio != 100) {
                // this.$message.error('警告，浏览器没有按正常比例显示会影响部份功能！')
            }
        },

createSocket() {
            let me = this;
            if ("WebSocket" in window) {
                try {
                    // 构造 WebSocket 路径
                    let socketHost = window.HIVUI_SETTING?.serverUrl.replace("http", "ws");
                    let pName =  window.HIVUI_SETTING?.pName;
                    let wsClientId = md5(getToken() || '');
                    // let socketHost = "https://e52.hieap.cn".replace('http', 'ws')
                    // let pName = 'fdszh';
                    // let wsClientId = md5('eyJhbGciOiJIUzUxMiJ9.eyJ1aWQiOiJhZG1pbiIsImV4cGlyZXMiOjE3NjgyMjM4NjM2MDQsInBob25lIjoiMTg4ODg4MDA4ODgiLCJuYW1lIjoi566h55CG5ZGYIiwidGVybSI6InBjIiwidG9rZW4iOiIwYWRkZWJkNy0wOTc3LTQ2YzgtYmRjYi1jN2FmNzVkNTUzMDIifQ.5aJVU42LLVrsc5_cdOqkPLTv4qxeCMoa0c3MAPE9pb9-Lxv37bt0uRGYDG5zWtdBHMglbUaKWnCGUFhN3Ihkhw')
                    let url = socketHost + "/" + pName + "/ws/p2p/" + wsClientId;

// 创建 WebSocket 实例
                    me.loginStatusWS = new WebScoketManager({
                        link: url,
                        //"reConnect":true,
                    });
                    // 初始化 WebSocket 事件
                    me.initWSEvent();

} catch (error) {
                    console.error("WebSocket 初始化失败:", error);
                    reject(new Error("WebSocket 初始化失败: " + error.message));
                }
            } else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
                reject(new Error("浏览器不支持 WebSocket"));
            }
        },
        //初始化WS事件
        initWSEvent() {
            let me = this;
            let _ws = me.loginStatusWS;
            if (!_ws) {
                console.log("WebSocket 实例未初始化");
                return;
            }
            console.log('开始连接websocket');
            //建立连接
            _ws.on("onopen", () => {
                console.log('数据发送中...');
            });
            //连接失败
            _ws.on("onclose", () => {
                console.log('连接已关闭...');
            });
            //超时关闭
            _ws.on("overtime", () => {
                console.log('服务器连接超时');
            });
            _ws.on("reConnect", () => {
                console.log('重新连接websocket中');
            });
            _ws.on("endReConnect", () => {
                console.log('重新连接次数超出上限，终止连接');
            });
            //接受消息
            _ws.on("onmessage", (data) => {
                console.log('数据已接收: ' + data);
            });
        },
    },
    mounted() {
        // this.checkZoom();
        // window.addEventListener('resize',()=>{
        //     this.checkZoom();
        // });
        let me = this;
        // 设置任务中心刷新状态
        top.window.__setRefreshTaskcenter = function (state) {
            if (state == undefined) {
                state = true;
            }
            top.window.__refreshTaskcenter = state;
        }
        let urlPn = getUrlValue(location.search, "pn");
        if (urlPn) {
            if (!getUrlValue(window.HIVUI_SETTING.loginUrl, "pn")) {
                window.HIVUI_SETTING.loginUrl += "?pn=" + urlPn;
            }
            if (!getUrlValue(window.HIVUI_SETTING.mainPageUrl, "pn")) {
                window.HIVUI_SETTING.mainPageUrl += "?pn=" + urlPn;
            }
            if (!getUrlValue(window.HIVUI_SETTING.customLoginUrl, "pn")) {
                window.HIVUI_SETTING.customLoginUrl += "?pn=" + urlPn;
            }
        }
        //如果token不一致，替换掉然后重新载入
        let urlToken = getUrlValue(location.href, "access_token");
        let nowToken = getToken();
        if (false && !window._global && urlToken && nowToken && (urlToken != nowToken)) {//正式环境
            let newUrl = setUrlValue(decodeURIComponent(location.href), "access_token", nowToken);
            location = newUrl;
            location.reload();
        }
        //系统间跳转，将ticket去除
        if (!window._global && getUrlValue(decodeURIComponent(location.href), "ticket")) {
            let newUrl = setUrlValue(decodeURIComponent(location.href), "ticket", "");
            location = newUrl.replace("&ticket=", "") + (location.hash ? location.hash : "#/");
            //location.reload();
        }
        window.Scp = {
            User: {
                id: "admin",
                name: "管理员",
                deptId: "",
                deptName: "",
                positionId: "GLY",
                postionName: "管理员",
                bzId: "admin_3",
                bzName: "管理员岗位3",
                bzDeptId: ".WLDJT.DGS",
                bzDeptName: "D公司",
                bzPositionId: "HQRY",
                bzPositionName: "后勤人员",
                orgId: "admin_3",
                defOrgId: "admin_3"
            }
        }
        //customSysCofig默认值
        window.customSysCofig = _.merge({
            showMiniLogin: true,
        }, window.customSysCofig);
        if (!window.localStorage.getItem("locale")) {
            window.localStorage.setItem("locale", JSON.stringify({
                desc: "中文",
                name: "zh-CN",
            }));
            Cookies.set("locale", "zh-CN");
        }
        window.__guid = new Date().valueOf();
        //window.customSysCofig=_.merge(window.default_customSysCfg,window.customSysCofig||{});
        window == top && window.customSysCofig && window.customSysCofig.thirdParty && window.customSysCofig.thirdParty.forEach((item) => {//第三方脚本样式资源引用
            let _dom;
            switch (item.type) {
                case "js":
                    _dom = document.createElement("script");
                    _dom.type = "text/javascript";
                    _dom.src = item.link;
                    if (item.callback) {
                        _dom.onload = () => {
                            item.callback();
                        }
                    }
                    break;
                case "css":
                    _dom = document.createElement("link");
                    _dom.rel = "stylesheet";
                    _dom.href = item.link;
                    break;
            }
            document.querySelector("head").appendChild(_dom);
        });
        setTimeout(() => {
            window.__sysConfig = _.merge({
                events: {
                    onLoad1: function () {

}
                },
                projectName: "eaptpl",
                /*sysProjectMange: {
                    id: __guid++,
                    name: '工程树',
                    iconClass: 'icon-tree',
                    uri: 'amreport/designer/tree/design.do',
                    url: '/amrept-web/amreport/designer/tree/design.do'
                },*/
                sysList: [

],
                langList: {
                    id: __guid++,
                    name: (window.localStorage.getItem("locale") ? (JSON.parse(window.localStorage.getItem("locale")).desc) : "中文"),
                    type: 'lang',
                    iconClass: 'icon-language',
                    children: [
                        {
                            id: __guid++,
                            name: "中文",
                            key: "zh-CN",
                        }, {
                            id: __guid++,
                            name: "English",
                            key: "en",
                        },
                    ]
                },
                userInfo: {
                    id: __guid++,
                    name: '${fusername}',
                    type: 'userInfo',
                    iconClass: 'icon-user',
                    children: [
                        {
                            id: __guid++,
                            name: me.$t('hivuiMain_app_user') + '：${fusername}/${fuserid}',
                            iconClass: 'icon-user',
                        },
                        {
                            id: __guid++,
                            name: me.$t('hivuiMain_app_orgbz') + '：${fbzname}/${fbzid}',
                            iconClass: 'icon-user',
                            type: "orgBz",
                        },
                        {
                            id: __guid++,
                            name: me.$t('hivuiMain_app_orgname') + '：${forgname}/${forgid}',
                            iconClass: 'icon-user',
                        },
                        {
                            id: __guid++,
                            name: me.$t('hivuiMain_app_rolename') + '：${frolename}/${froleid}',
                            iconClass: 'icon-user',
                        },
                        {
                            id: __guid++,
                            name: me.$t('hivuiMain_app_personal_Center'),
                            iconClass: 'icon-user',
                            type: "personalCenter"
                        },
                        /*{
                            id: __guid++,
                            iconClass:'icon-edit',
                            name:'修改用户信息',
                            type:'modifyUserInfo',
                        },*/
                        {
                            id: __guid++,
                            iconClass: 'icon-edit',
                            name: me.$t('hivuiMain_app_modifyPw'),
                            type: 'modifyPw',
                        },
                    ]
                },
            }, window.customSysCofig);
            if (window.customSysCofig.addLangList) {
                window.__sysConfig.langList.children = [...window.__sysConfig.langList.children, ...window.customSysCofig.addLangList];
            }
            this.$store.dispatch("app/getSysConfig").then(res => {
                let cfg = this.$store.state.app.config || {};
                let loadText = (cfg.sysLoadLogo && cfg.sysLoadLogo.title) || "";
                let logoSrc = (cfg.sysLoadLogo && cfg.sysLoadLogo.src) || "";
                this.loadTexts = loadText.split("");
                this.logoSrc = cfg.sysLoadLogo.hide ? "" : (logoSrc || LoginPic);
            });
        }, 0);

console.log("--------------test",window.customSysCofig);
        if(window.customSysCofig.loginStatusMonitorWs && window.customSysCofig.loginStatusMonitorWs.enable){
            this.createSocket();
        }

}
};
</script>
<style scoped>
.app {
    height: 100%;
    background: linear-gradient(rgb(255, 255, 255) 0px,
            rgb(243, 248, 253) 50%,
            rgb(229, 240, 250));
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -mos-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.loader .txt {
    display: inline-block;
    word-break: normal;
    white-space: nowrap;
    margin: auto;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
        0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.1),
        0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1),
        0 20px 20px rgba(0, 0, 0, 0.15);
}

.loader .txt span {
    display: inline-block;
    font-size: 68px !important;
    padding: 0 5px;
    -webkit-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    -ms-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    -o-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite;
    color: #0066cc;
}

.loader .txt span:nth-child(1) {
    -webkit-animation-delay: 0ms;
    -moz-animation-delay: 0ms;
    -ms-animation-delay: 0ms;
    -o-animation-delay: 0ms;
    animation-delay: 0ms;
}

.loader .txt span:nth-child(2) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    -ms-animation-delay: 100ms;
    -o-animation-delay: 100ms;
    animation-delay: 100ms;
}

.loader .txt span:nth-child(3) {
    -webkit-animation-delay: 200ms;
    -moz-animation-delay: 200ms;
    -ms-animation-delay: 200ms;
    -o-animation-delay: 200ms;
    animation-delay: 200ms;
}

.loader .txt span:nth-child(4) {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
    -ms-animation-delay: 300ms;
    -o-animation-delay: 300ms;
    animation-delay: 300ms;
}

.loader .txt span:nth-child(5) {
    -webkit-animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    -ms-animation-delay: 400ms;
    -o-animation-delay: 400ms;
    animation-delay: 400ms;
}

.loader .txt span:nth-child(6) {
    -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
    -ms-animation-delay: 500ms;
    -o-animation-delay: 500ms;
    animation-delay: 500ms;
}

.loader .txt span:nth-child(7) {
    -webkit-animation-delay: 600ms;
    -moz-animation-delay: 600ms;
    -ms-animation-delay: 600ms;
    -o-animation-delay: 600ms;
    animation-delay: 600ms;
}

.loader .txt span:nth-child(8) {
    -webkit-animation-delay: 700ms;
    -moz-animation-delay: 700ms;
    -ms-animation-delay: 700ms;
    -o-animation-delay: 700ms;
    animation-delay: 700ms;
}

.loader .txt span:nth-child(9) {
    -webkit-animation-delay: 800ms;
    -moz-animation-delay: 800ms;
    -ms-animation-delay: 800ms;
    -o-animation-delay: 800ms;
    animation-delay: 800ms;
}

.loader .txt span:nth-child(10) {
    -webkit-animation-delay: 900ms;
    -moz-animation-delay: 900ms;
    -ms-animation-delay: 900ms;
    -o-animation-delay: 900ms;
    animation-delay: 900ms;
}

.loader .txt span:nth-child(11) {
    -webkit-animation-delay: 1000ms;
    -moz-animation-delay: 1000ms;
    -ms-animation-delay: 1000ms;
    -o-animation-delay: 1000ms;
    animation-delay: 1000ms;
}

.loader .txt span:nth-child(12) {
    -webkit-animation-delay: 1100ms;
    -moz-animation-delay: 1100ms;
    -ms-animation-delay: 1100ms;
    -o-animation-delay: 1100ms;
    animation-delay: 1100ms;
}

.loader .txt span:nth-child(13) {
    -webkit-animation-delay: 1200ms;
    -moz-animation-delay: 1200ms;
    -ms-animation-delay: 1200ms;
    -o-animation-delay: 1200ms;
    animation-delay: 1200ms;
}

.loader .txt span.msgInfo {
    display: block;
    padding-top: 15px;
    font-size: 16px !important;
    text-shadow: none;
    color: #0272bd;
    text-shadow: none;
    animation: none;
    -webkit-animation: none;
}

@-webkit-keyframes text {
    0% {
        color: #0066cc;
    }

40% {
        color: #fff;
    }

70%,
    100% {
        color: #0066cc;
    }
}

@-moz-keyframes text {
    0% {
        color: #0066cc;
    }

40% {
        color: #fff;
    }

70%,
    100% {
        color: #0066cc;
    }
}

@-mos-keyframes text {
    0% {
        color: #0066cc;
    }

40% {
        color: #fff;
    }

70%,
    100% {
        color: #0066cc;
    }
}

@-o-keyframes text {
    0% {
        color: #0066cc;
    }

40% {
        color: #fff;
    }

70%,
    100% {
        color: #0066cc;
    }
}

@keyframes text {
    0% {
        color: #0066cc;
    }

40% {
        color: #fff;
    }

70%,
    100% {
        color: #0066cc;
    }
}
</style>

createSocket() {
            let me = this;
            if ("WebSocket" in window) {
                try {
                    // 构造 WebSocket 路径
                    let socketHost = window.HIVUI_SETTING?.serverUrl.replace("http", "ws");
                    let pName =  window.HIVUI_SETTING?.projectName;
                    let wsClientId = md5(getToken() || '');
                    // let socketHost = "https://e52.hieap.cn".replace('http', 'ws')
                    // let pName = 'fdszh';
                    // let wsClientId = md5('eyJhbGciOiJIUzUxMiJ9.eyJ1aWQiOiJhZG1pbiIsImV4cGlyZXMiOjE3Njc5NjgxNzYxNjMsInBob25lIjoiMTg4ODg4MDA4ODgiLCJuYW1lIjoi566h55CG5ZGYIiwidGVybSI6InBjIiwidG9rZW4iOiI1NDQ2ODJmZC03MTIxLTRmMzAtODkzNC1jN2UyNDk1OTRkNTcifQ.1UJbTnGmfTHmCEdlMqHz3QJ9weRrYGUAMYQGfO-j-_5KLKKNKwWSC-FXl-5Pq0xQXrPCr7EkCT12u4zwOwR_Kg')
                    let url = socketHost + "/" + pName + "/ws/p2p/" + wsClientId;

if(window.customSysCofig.loginStatusMonitorWs && window.customSysCofig.loginStatusMonitorWs.enable){
            this.createSocket();
        }