You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
381 lines
16 KiB
381 lines
16 KiB
<!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>
|