|
|
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> html, body { height: 100%; margin: 0; padding: 0; }
body.overflow-hidden { overflow: hidden; }
#diagram { height: 100%; overflow: hidden; }
@keyframes blink { 0% { transform: scale(0.2); opacity: 1; }
to { transform: scale(1.5); opacity: 0.1; } }
.blinkAnim { animation: blink 1.5s ease-in-out infinite; } </style> <link rel="stylesheet" href="./logicflow/core.css" /> <link rel="stylesheet" href="./logicflow/extension.css" /> <link rel="stylesheet" href="./logicflow/extensionLib/style/index.css" /> <link rel="stylesheet" href="./iconfonts/iconfont.css"> <link rel="stylesheet" href="./plugins/layui/css/layui.css" /> <link id="layui_theme_css" rel="stylesheet" /></head>
<body> <div id="diagram"> </div> <script src="./plugins/vue.min.js"></script> <script src="./plugins/axios.min.js"></script> <script src="./plugins/service.js"></script> <script src="./plugins/registerRemoteComponents.js"></script> <script src="./logicflow/core.umd.js"></script> <script src="./logicflow/extensionLib/NodeResize.js"></script> <script src="./logicflow/extensionLib/CurvedEdge.js"></script> <script src="./logicflow/extensionLib/Group.js"></script> <script src="./plugins/layui/layui.js"></script> <script src="./plugins/lodash.js"></script> <script src="./plugins/myDebounce.js"></script> <script src="./plugins/utils.js"></script> <script src="./plugins/dynamicEventsHandler.js"></script> <script src="./plugins/dynamicAnimationHandler.js"></script> <script src="./plugins/dynamicShowHideHandler.js"></script> <script src="./plugins/dataPointsHandlers.js"></script> <script src="./plugins/dayjs.min.js"></script> <script src="./plugins/locale-dayjs/zh-cn.js"></script> <script src="./plugins/svg.min.js" async defer></script> <script type="module"> import { registerCustomElement } from './previewScripts/registerCustomElement.js'
window.isPreviewEnv = true;
dayjs.locale('zh-cn'); window.loadIdx = window.layer.load(1, { shade: [0.2, '#000'], }); window.lf = null; const lf = new LogicFlow({ container: document.getElementById('diagram'), overlapMode: 1, isSilentMode: true, hideAnchors: true, stopMoveGraph: true, stopZoomGraph: true, stopScrollGraph: true, autoWrap: true, autoExpand: true, snapline: true, history: true, animation: true, metaKeyMultipleSelected: true, hoverOutline: false, nodeSelectedOutline: false, edgeSelectedOutline: false, keyboard: { enabled: true, shortcuts: [ { keys: ['backspace'], callback() { // 退格键不做任何处理 }, }, ], }, grid: { visible: false, size: 2, }, background: { backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")', backgroundColor: '#ffffff', backgroundRepeat: 'repeat', backgroundSize: '', }, }) lf.setTheme( { baseEdge: { strokeWidth: 1 }, baseNode: { strokeWidth: 1 }, nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }, edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }, outline: { fill: "transparent", stroke: "transparent", strokeDasharray: "3,3", hover: { stroke: "transparent", }, }, }, ); window.lf = lf lf.setDefaultEdgeType('pro-polyline') registerCustomElement(lf) lf.render() lf.setZoomMiniSize(0.1)
const url = new URL(window.location.href); const params = new URLSearchParams(url.search); const id = params.get('id'); var scriptCallbacks = [] // console.log('id', id) if (id) { service.get('/iotconfigurationdesig/getDetailByBoardManageId', { boardManageId: id }).then((ret) => { if (ret.code !== 0) { // return message.warning(ret.msg) } if (!ret.data) return; const { boardType, width: pageWidth, height: pageHeight, isDefaultBackImg, backgroundImage, backgroundColor, backgroundRepeat, pageName, iotThingApiDTOList, deviceRatio, backgroundSize, pictureData } = ret.data if (iotThingApiDTOList) { // 给历史数据需要的相关数据提前存起来 iotThingApiDTOList.forEach((i) => { const time = JSON.parse(i.timeCondition || '{}') const isHistoryData = time.type !== 'last' if (isHistoryData) { getHistoryDatas(i.id, service) } }) } const temp = { width: pageWidth || 1920, height: pageHeight || 1080, backgroundImage: backgroundImage || 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")', backgroundColor: backgroundColor || '#ffffff', backgroundRepeat: backgroundRepeat || 'repeat', pageName, deviceRatio, backgroundSize, isDefaultBackImg, } // 渲染背景 const backHandler = (val) => { if (val.isDefaultBackImg) { // 没有背景，就看背景颜色 if (val.backgroundColor && val.backgroundColor !== '#00000000') { window.lf.setGridVisible(false) val.backgroundImage = '' } else if (val.backgroundColor === '#00000000') { window.lf.setGridVisible(true) val.backgroundColor = '' val.backgroundImage = 'url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=)' } } window.lf.graphModel.changeBackground({ backgroundImage: val.backgroundImage, backgroundColor: val.backgroundColor, backgroundRepeat: val.backgroundRepeat, backgroundSize: val.backgroundSize, }); document.querySelector('.lf-background').style.backgroundColor = val.backgroundColor; } backHandler(temp)
const graphData = JSON.parse(pictureData) const nodeNames = graphData.nodes.map(n => n.type) // 获取画布中的组件信息 service.post('/section/iotsectiondetail/queryListByName', nodeNames || []).then(async res => { if (res.code !== 0) { // return message.warning(res.msg) }
// 注册远程组件 await registerRemoteComponents(res.data || [], document)
// 控件事件监听绑定 eventHandlers(window.lf, undefined)
const resizeGraph = function () { if (boardType === 'bigscreen') { const diagramDom = document.getElementById('diagram'); const graph = document.querySelector('.lf-graph'); const { width, height } = diagramDom.getBoundingClientRect(); const heightWidthRatio = pageHeight / pageWidth; const realHeight = width * heightWidthRatio; window.lf.resize(width, realHeight); diagramDom.style.overflowY = 'auto'; graph.style.overflow = 'hidden'; window.lf.updateEditConfig({ stopZoomGraph: true, }); } else { // 适配画布 const diagramDom = document.getElementById('diagram'); const { width, height } = diagramDom.getBoundingClientRect(); window.lf.resize(width, height); const scaleY = height / pageHeight; const transformModel = window.lf.graphModel.transformModel; transformModel.SCALE_Y = scaleY; transformModel.SCALE_X = scaleY; transformModel.focusOn(pageWidth / 2, pageHeight / 2, width, height); // 背景同比缩放 const back = document.querySelector('.lf-background-area') back.style.width = height * (pageWidth / pageHeight) + 'px'; back.style.margin = '0 auto'; } } window.onresize = function () { resizeGraph(); }; // console.log('lf', lf) setTimeout(() => { lf.render(graphData); resizeGraph(); // 注册全局单个控件脚本 setTimeout(() => { const currentGraphData = lf.getGraphData() currentGraphData.nodes.forEach((element) => { const nodeData = lf.getNodeDataById(element.id) const { dynamic } = nodeData.properties const { scriptData, normalData, uiData, animationData, hiddenData } = dynamic || {} // 给绑定了 socket 的数据开启socket if (normalData) { try { const dataPointStrParsed = JSON.parse(normalData.dataPoint || uiData.dataPoint || '{}') const { dataSource } = dataPointStrParsed const findSuperApi = iotThingApiDTOList && iotThingApiDTOList.find((i) => i.id === dataSource) if (findSuperApi) { // 有部件用到超级api 才去开启socket const time = JSON.parse(findSuperApi.timeCondition || '{}') const isHistoryData = time.type !== 'last' startSocket(dataSource, scriptCallbacks, service, isHistoryData) } } catch (err) { } }
// 部件显示隐藏处理 const nodeModel = lf.getNodeModelById(element.id); if (element.properties.visible !== undefined) { nodeModel.visible = element.properties.visible };
// 数据点处理 if (normalData && normalData.dataPoint) { dataPointsHandlers(lf, service, element.id, normalData.dataPoint, 'normalData', []) } if (uiData && uiData.dataPoint) { dataPointsHandlers(lf, service, element.id, uiData.dataPoint, 'uiData', []) } if (animationData) { animationData.animationCombo.forEach((anim, index) => { if (anim.dataPoint) { dataPointsHandlers(lf, service, element.id, anim.dataPoint, 'animationData', [animationHandler], index) } }) } if (hiddenData) { hiddenData.hiddenCombo.forEach((hid, index) => { if (hid.dataPoint) { dataPointsHandlers(lf, service, element.id, hid.dataPoint, 'hiddenData', [showHideHandler], index) } }) } if (scriptData && scriptData.script) { setTimeout(() => { const func = new Function('context', 'service', 'nodeId', scriptData.script) window.lf.globalDatas = window.globalDashboardDatas || {} const callback = func(window.lf, service, element.id) if (callback) { const callbackBound = callback.bind(null, window.lf, service, element.id) scriptCallbacks.push(callbackBound) } }, 1000) } }); currentGraphData.edges.forEach((edge) => { const dataPointStrParsed = JSON.parse(edge.properties.dataPoint || '{}') const { dataSource } = dataPointStrParsed const findSuperApi = iotThingApiDTOList && iotThingApiDTOList.find((i) => i.id === dataSource) if (findSuperApi) { // 有部件用到超级api 才去开启socket const time = JSON.parse(findSuperApi.timeCondition || '{}') const isHistoryData = time.type !== 'last' startSocket(dataSource, scriptCallbacks, service, isHistoryData) } // 绑定连线的数据点 edgeDataPointHandler(lf, service, edge.id, edge.properties.dataPoint, 'edgeData'); }); window.layer.close(window.loadIdx); }, 1000) }, 500) }) }) }
// 节点点击绑定实时数据处理 lf.on('node:click', ({ data, e }) => { (window).totalListeners.click.forEach((fn) => { fn({ data, e }) }) })
// 节点双击绑定实时数据处理 lf.on('node:dbclick', ({ data, e }) => { (window).totalListeners.dbclick.forEach((fn) => { fn({ data, e }) }) })
// 节点滑入绑定实时数据处理 lf.on('node:mouseenter', ({ data, e }) => { (window).totalListeners.mouseenter.forEach((fn) => { fn({ data, e }) }) })
// 节点离开绑定实时数据处理 lf.on('node:mouseleave', ({ data, e }) => { (window).totalListeners.mouseleave.forEach((fn) => { fn({ data, e }) }) })
// 监测屏幕缩放 window.onresize = function () { const screenWidth = window.screen.width; const screenHeight = window.screen.height; const innerWidth = window.innerWidth; const innerHeight = window.innerHeight;
if (screenWidth === innerWidth && screenHeight === innerHeight) { // 全屏 document.body.classList = 'overflow-hidden' } else { document.body.classList = '' } } // 监听点击空白处，消除文本编辑状态 lf.on('blank:click', () => { const textEle = window.lf.graphModel.textEditElement; textEle && textEle.setElementState(0) }) </script></body>
</html>
|
