@pluginarch/create-parch
Version:
this is way to create a ui project
388 lines (372 loc) • 15.4 kB
JavaScript
const customElements = globalThis.customElements || class {
static define=(a,b)=>{}
};
debugger;
class GraphEditorElement extends BaseElement {
constructor() {
super();
this._initTemplate();
// 调用父方法进行模板解析
this._updateRendering();
// this.createWorker()
debugger
// 注册沙箱环境
this.sandBoxType = '0' // 走默认设置
this.sandBoxOptions = {
microWindow: window,
active: true
}
}
// createWorker(){
// debugger
// // 创建一个Worker对象，并指定其脚本路径
// this.worker = new Worker('pages/Graph_1.0.0/face/worker.mjs');
// // 监听worker的消息，并处理
// this.worker.onmessage = (event) => {
// // 处理来自worker的消息，例如更新UI等
// console.log('Received message from worker:', event.data);
// if (event.data.type === 'update') {
// this.updateComponent(event.data.data);
// }
// };
// this.worker.postMessage({ shadow: this.shadow });
// }
connectedCallback() {
debugger;
// 在此处取对象
this.sandBoxType = this.getAttribute('sandBoxType');
this.sandBoxOptions = this.convertToJSON(this.getAttribute('sandBoxOptions'));
if (this.sandBoxOptions.useSandbox) {
this.sandBox = this.installSandbox(this.sandBoxOptions.sandboxName);
}
}
// createInnerElements(elementsConfig) {
// this.elements = {};
// for (let key in elementsConfig) {
// this.elements[key] = document.createElement(elementsConfig[key].tag);
// if (elementsConfig[key].textContent) {
// this.elements[key].textContent = elementsConfig[key].textContent;
// }
// }
// }
_initTemplate() {
this.template = document.createElement('template');
const templateStr =
`
<meta charset="utf-8" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon"/>
<link rel="preload" href="css/fonts/wenquan/WenQuanYiZenHei-01.woff2" as="font" type="font/woff2" crossorigin />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<title>图形浏览器</title>
<script type="text/javascript">
if (!!window.ActiveXObject || "ActiveXObject" in window) {
var result = confirm('请使用谷歌浏览器打开该系统!');
if (result) {
window.clipboardData.clearData();
window.clipboardData.setData('Text',window.location.href);
}
}
</script>
<link rel="stylesheet" href="css/graphTool-f3f687c3.css" />
<link rel="stylesheet" href="css/fonts/iconfont.css" />
<link rel="stylesheet" href="css/fonts/sideToolwebfonts.css" />
<link rel="stylesheet" href="css/graphPlugin.css" />
<link rel="stylesheet" href="uncompress/nuspui/style.css" />
<div id="pokeTip">
<span class="textTip">正在加载页面，请稍后...</span>
</div>
<!-- 提示 new add -app -chixiang -->
<div id="windows">
<div id="menubar"></div>
<div id="toolbar"></div>
<div id="left_menu_contrl">
<div id="leftNavResize"></div>
<!-- <div id="left_menu_img_outside2" onclick="commonGraphVar.leftnavbar.closeLeftMenu(this)"><span id="left_menu_img_inside2"></span></div> -->
<div id="leftnavbar_menu"></div>
</div>
<div id="container" style="touch-action:none">
<div id="centerW" style="background: #000000;" tabindex="1">
<div id="editorDiv">
<canvas id="editor" width="0px" height="0px"></canvas>
<!-- <svg id="editorSvg" style="position: absolute;top: 0;left: 0;width: 0px;height: 0px;"></svg> -->
<div id="backdiv" style="display: none;">
<img id="backimg">
</div>
</div>
</div>
<div id="left_menu_z">
<div id="left_menu_img_outside" class="left_menu_open" onclick="getCommonVar('leftnavbar').openLeftMenu(this)"><span id="left_menu_img_inside"></span></div>
</div>
</div>
<div id="footW" ></div>
</div>
<!--弹出窗口-->
<div id="popDiv" class="popDivNormal">
<div id="popTitle"></div>
</div>
<!--弹出窗口2-->
<div id="popDiv2">
<div id="popTitle2"></div>
</div>
<!--弹出窗口 带透明度-->
<div id="popDivOpacity">
<div id="popTitleOpacity"></div>
</div>
<!--检索器 弹出窗口-->
<div id="popDivSearch" class="popDivNormal">
<div id="popTitleSearch"></div>
</div>
<!--tip弹出窗口-->
<div id="tippopDiv">
</div>
<!--气泡窗口(展示检修、故障等信息)-->
<!--div class='arrow_box' id='arrow_box'>
</div-->
<div id="resdiv"></div>
<div id="arrow_main"></div><!--语音交互使用-->
<div id="printFrame"></div>
<div id="showContainer">
</div>
<div id="menuContainer">
</div>
<div id="SubMenu">
</div>
<!-- 引入依赖 -->
<!-- 工具类 -->
<!-- 通用类 -->
<!-- 组件类 -->
<!-- new add -app begin -->
<!-- new add -app end -->
<script type="text/javascript" src="uncompress/ui/vue.min.js"></script>
<script type="text/javascript" src="uncompress/ui/nusp-ui.umd.min-01285623.js"></script>
<script type="text/javascript" src="uncompress/ui/init.js"></script>
<script type="text/javascript" src="uncompress/ui/genScript.js"></script>
<script type="text/javascript" src="uncompress/ui/nusp-lib.umd.min.js"></script>
<script type="text/javascript" src="uncompress/ui/kriging.js"></script>
<script type="text/javascript" src="uncompress/ui/nariContourInterface.js"></script>
<script type="text/javascript" src="uncompress/pako-1.0.6.min.js"></script>
<script type="text/javascript" src="uncompress/SaveFileindex.js"></script>
<script type="text/javascript" src="js/graphTool-198c56b5.js"></script>
<script type="text/javascript" src="uncompress/nuspui/nusp_ui.umd.min.js"></script>
<script defer type="text/javascript" src="card/renderCard.js" ></script>
<script defer type="text/javascript" src="card/ruoBase.js" ></script>
<script defer type="text/javascript" src="card/layui/layui-v2.4.3/layui.js"></script>
<script defer type="text/javascript" src="card/dcloudDeskOperate.js"></script>
<script defer type="text/javascript" src="card/feedback.js"></script>
<script id="graphscript" type="text/javascript">
function graphNavigtorInitialization()
{
const commonGraphVar = initCommonVar();
window.commonGraphVar = commonGraphVar;
window.onunload = function () {
//记录图形关闭动作
const userLogAllow = getCommonVar('userLogAllow');
const loginDlgMode = getCommonVar('loginDlgMode');
const current_graph_name = getCommonVar('current_graph_name');
if (userLogAllow && loginDlgMode != '0' && current_graph_name) {
graphCommonFunction.writeUserLog('1',current_graph_name);
}
}
commonGraphVar.init();
window.onresize = GraphCommonFunction.prototype.resize;
window.graphCommonFunction = new GraphCommonFunction();
utilsTools = new UtilsTools();
graphCommonFunction.setContextPath();
graphCommonFunction.getLocalIp();
//图元编辑器
setCommonVar('isIconDockableBox', false);
//图形编辑器
setCommonVar('isDockableBox', false);
setCommonVar('isNavigator', true);
setCommonVar('hasReadConfigFile', false);
const isScrollBar = getCommonVar('isScrollBar');
if (!isScrollBar) {
// 浏览器禁用滚动条，使用鼠标拖拽的方式移动图形
var editorDiv = document.getElementById('centerW');
if (editorDiv) {
editorDiv.style.overflow = 'hidden';
}
}
const urlUtilProtocol = setCommonVar('urlUtilProtocol', new UrlUtilProtocol())
//为了跨系统登录保持，先解析url参数，再进行前后台请求
urlUtilProtocol.getGraphInfoByFrame();
initConfig();
// 禁用F12调试工具、禁止Ctrl+Shift+I查看
// graphCommonFunction.initForbiden();
//初始化工具栏
setCommonVar('toolBar', new ToolBar());
setCommonVar('sidetoolbar', new SideToolbar());
setCommonVar('userName', sessionStorage.getItem('userName'));
setCommonVar('userType', sessionStorage.getItem('userType'));
setCommonVar('pdmmxx', sessionStorage.getItem('pdmmxx'));
// //初始化左侧菜单栏
// commonGraphVar.leftnavbar = new LeftNavigationBar()
// if (commonGraphVar.urlParam.isShowLeftNavBar === '1'||commonGraphVar.urlParam.isShowLeftNavBar === '2') {
// commonGraphVar.leftnavbar.initConfig();
// }
//初始化底部
// commonGraphVar.foot = new Foot();
//初始化移动
DocumentKeyEvent.prototype.initDocumentKeyEvent();
DocumentMouseEvent.prototype.initDocumentMouseEvent();
const canvasMouseEvt = getCommonVar('canvasMouseEvt');
canvasMouseEvt.initCanvasMouseEvent();
// SvgMouseEvent.prototype.initSvgMouseEvent();
DivMouseEvent.prototype.initDivMouseEvent();
const touchEvent = new GraphTouchEvent();
touchEvent.init();
commonGraphVar.touchEvent = touchEvent;
initHeartManage();
setCommonVar('refreshTimerManage', new RefreshTimerManage());
isInitCanvas = true;
const userName = getCommonVar('userName');
/**
* 先注释掉
* 原因： 华东现场，调控云按钮点击跳转到新一代页面时候，单点登录有问题；
* 该处是本地登录请求传了空值null进去，导致调控云登录单点验证失败。。
**/
// getUserInfo(userName, sessionStorage.getItem('pdmmxx'));
if(window.assistant && !graphCommonFunction.formatterBoolean(window.isHideRobotAssist)){
window.assistant();
};
if (commonGraphVar.isShowVoice == 1) {
commonGraphVar.YuyinObj = new Yuyin();
commonGraphVar.YuyinObj.init();
}
commonGraphVar.videoObj = new VideosForEle();
commonGraphVar.patrolObj = new Patrol();
graphCommonFunction.getUserRespAreaByLoginName();
}
function initConfig()
{
//内网放开
const baseConfig = setCommonVar('baseConfig', new BaseConfig());
baseConfig.initBaseConfig();
const searchDragManage = setCommonVar('searchDragManage', new SearcherDragManage());
searchDragManage.initSetting();
}
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window){
return true;
} else {
return false;
}
}
function initHeartManage()
{
const heartManage = setCommonVar('heartManage', new HeartManage());
heartManage.start();
}
function getUserInfo(userName, passWord){
if (userName) {
// 登录过 不需要再登录
return;
}
const head = UrlUtilProtocol.prototype.getUrlForServer();
const GRAPH_SERVER_PATH = getCommonVar('GRAPH_SERVER_PATH')
const url = head + '/GraphServer/rest' + GRAPH_SERVER_PATH + '/certificationServiceByHttp/certificateByAccount';
// const url = '../GraphServer/rest' + commonGraphVar.GRAPH_SERVER_PATH + '/certificationServiceByHttp/certificateByAccount';
$.ajax({
url:url,
type: 'post',
data: 'name=' + userName + '&&password=' + passWord+ '&&expiretime=3600',
dataType:'json',
success: function(result) {
localStorage.setItem('userRealName', '');
sessionStorage.setItem('userRealName', ''); //add for 登录完善 by heyuan 20220524
if(result.flag) {
if (result.resultMap && result.resultMap.data) {
localStorage.setItem('userRealName', result.resultMap.data.realName);
sessionStorage.setItem('userRealName', result.resultMap.data.realName); //add for 登录完善 by heyuan 20220524
}
}
},
error: function(msg){
localStorage.setItem('userRealName', '');
sessionStorage.setItem('userRealName', ''); //add for 登录完善 by heyuan 20220524
console.log(msg);
}
})
}
</script>
<script type="text/javascript">
(async ()=> {
try {
await graphCommonFunction.loadScript('/alarmAsist/robot/static/lib/alarm-assistant.min.js');
// 如果脚本成功加载，这里会执行
console.log('Script loaded successfully!');
} catch (error) {
// 如果脚本加载失败，这里会捕获到错误
console.error('Failed to load script:', error);
// 你可以在这里处理错误，例如使用备选方案或回退到某些默认行为
}
})()
</script>
`;
// this.parseTemplate(cssStr,shadow,template,()=>{
// console.log('脚本加载成功')
// })
this.parseTemplate(templateStr, this, ()=>{
console.log('全部脚本加载成功')
/*
graphNavigtorInitialization()
GraphCommonFunction.prototype.resize()
*/
});
}
// _initDOM(){
// // const template = document.createElement('template');
// // this.template.innerHTML +=
// // 将模板内容添加到Shadow DOM
// this.shadow.appendChild(this.template.content.cloneNode(true));
// }
_updateRendering(){}
// initScript() {
// debugger
// const template = document.createElement('template');
// template.innerHTML = ` `;
// const content = template.content.cloneNode(true);
// shadow.appendChild(content);
// 监听<script>元素加载
// const observer = new MutationObserver((mutations, observer) => {
// Array.from(shadow.querySelectorAll('script')).forEach(script => {
// if (script.readyState === 'complete' || script.readyState === 'loaded') {
// // 调用脚本中的函数
// myFunction();
// observer.disconnect(); // 停止监听
// }
// });
// });
// observer.observe(shadow, { childList: true, subtree: true });
// }
dynamicStyle(path, callback) {
fetch(path)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(css => {
callback(css);
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
}
convertToJSON(input){
const result = {};
const pairs = input.split(';').map(pair => pair.trim()).filter(pair=> pair.length > 0);
pairs.forEach((pair)=> {
const [key, value] = pair.split(':').map(part => part.trim());
if (key && value !== undefined) {
// 尝试将值转换为数字
const numValue = parseFloat(value);
result[key] = isNaN(numValue) ? value : numValue;
}
});
return result;
}
}
// 定义该组件的标签名
customElements.define('pe-graphpubelement', GraphPubElement);