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.
752 lines
43 KiB
752 lines
43 KiB
const e="5a72da54-c053-4e8d-8880-6e5453b16fc9",n="custom-select-node",t="下拉选择框",o='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696993298055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1446" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M992.65 373.55H31.35V101.88c0-34.57 28.12-62.69 62.69-62.69h835.92c34.57 0 62.69 28.12 62.69 62.69v271.67zM73.14 331.76h877.71V101.88c0-11.52-9.37-20.9-20.9-20.9H94.04c-11.52 0-20.9 9.38-20.9 20.9v229.88zM929.96 984.82H94.04c-34.57 0-62.69-28.12-62.69-62.69V441.47h961.31v480.65c-0.01 34.57-28.13 62.7-62.7 62.7zM73.14 483.27v438.86c0 11.53 9.38 20.9 20.9 20.9h835.92c11.53 0 20.9-9.37 20.9-20.9V483.27H73.14z" fill="#707070" p-id="1447"></path><path d="M825.47 269.06c-6.57 0-12.78-3.09-16.71-8.36l-62.69-83.59c-6.94-9.23-5.06-22.34 4.18-29.26 9.22-6.97 22.33-5.05 29.24 4.17l45.98 61.31 45.98-61.31c6.92-9.2 20.04-11.12 29.24-4.17 9.24 6.92 11.12 20.02 4.18 29.26l-62.69 83.59a20.862 20.862 0 0 1-16.71 8.36zM522.45 227.27H188.08c-11.54 0-20.9-9.36-20.9-20.9s9.36-20.9 20.9-20.9h334.37c11.55 0 20.9 9.36 20.9 20.9s-9.35 20.9-20.9 20.9zM658.29 629.55H156.73c-11.54 0-20.9-9.35-20.9-20.9s9.36-20.9 20.9-20.9h501.55c11.55 0 20.9 9.35 20.9 20.9s-9.34 20.9-20.89 20.9zM867.27 838.53H156.73c-11.54 0-20.9-9.35-20.9-20.9s9.36-20.9 20.9-20.9h710.53c11.55 0 20.9 9.35 20.9 20.9s-9.34 20.9-20.89 20.9z" fill="#707070" p-id="1448"></path></svg>',l="svg",a="动态",s="表单控件",p=!1,c=!0,i="时间",r=`{"id":"u:270584784ce1","type":"page","name":"page1","asideResizor":false,"style":{"boxShadow":" 0px 0px 0px 0px transparent"},"pullRefresh":{"disabled":true},"body":[{"type":"tabs","name":"tab","tabs":[{"title":"样式","icon":"fa fa-th-large","body":[{"type":"form","title":"","name":"basicPropForm","body":[{"type":"input-text","label":"名称","name":"nodeAlias","id":"u:6b126f0520cb","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"input-text","label":"ID ","name":"id","id":"u:6232710ac003","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"grid","id":"u:1954dc15dd5b","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","keyboard":true,"id":"u:656efdb758ad","step":1,"suffix":"px","placeholder":"组件宽度","size":"full","mode":"horizontal","className":"m-b","value":100,"labelClassName":"w-8","labelAlign":"left","precision":2,"inputClassName":"w-full"}],"id":"u:4274c47a4ef5","md":6},{"body":[{"type":"input-number","label":"高度","name":"height","keyboard":true,"id":"u:1ed6dcd98c1a","step":1,"suffix":"px","placeholder":"组件高度","size":"full","mode":"horizontal","className":"m-b","value":100,"labelAlign":"left","labelClassName":"w-8","precision":2,"inputClassName":"w-full"}],"id":"u:3e9d1e71a69f","md":6}]},{"type":"grid","id":"u:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","keyboard":true,"id":"u:dcc0c21d16f6","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:14cc19d6ffb0","md":6},{"body":[{"type":"input-number","label":"Y 轴","name":"y","keyboard":true,"id":"u:cd6fdff9ca88","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:4931801ca9b8","md":6}]},{"type":"grid","id":"u:a332a7bf83c1","className":"m-b","columns":[{"body":[{"type":"input-number","label":"旋转","name":"rotation","id":"u:f6a2dbb518f9","placeholder":"组件旋转角度","mode":"horizontal","size":"full","className":"","keyboard":true,"step":1,"suffix":"deg","value":0,"labelAlign":"left","inputClassName":"w-full"}],"id":"u:646cd98b7955","md":6},{"body":[{"type":"input-number","label":"边宽","name":"strokeWidth","id":"u:8dcf62d3dab5","placeholder":"描边宽度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":1,"value":1,"suffix":"px","inputClassName":"w-full"}],"id":"u:51ddf54ac749","md":6}],"gap":""},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"填充","name":"fill","id":"u:0d19ed3e2bdc","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"},{"type":"input-color","label":"角标","name":"triangleColor","id":"u:25e5c3a30108","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:facc5c90e990","md":6},{"body":[{"type":"input-color","label":"描边","name":"strokeColor","id":"u:89afff5fd00d","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:7c903d9d40ab","md":6}],"id":"u:457970dd35bf","className":"m-b"},{"type":"input-number","label":"边框圆角","name":"borderRadius","keyboard":true,"id":"u:ad1971834e87","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-text","label":"背景","name":"background","id":"u:a59ae63d8530","editorState":"default","mode":"horizontal"},{"type":"input-text","label":"占位文本","name":"placeholder","id":"u:033fc19b64b1","editorState":"default","value":"请选择","mode":"horizontal"},{"type":"fieldset","title":"下拉框","collapsable":true,"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"填充","name":"dropdownFill","id":"u:41db9dbe760f","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"},{"type":"grid","columns":[],"id":"u:9a118da1fc4b"}],"id":"u:6bd68e77f834","md":6},{"body":[{"type":"input-color","label":"描边","name":"dropdownStrokeColor","id":"u:b62bde9078fb","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:ff3b2e32d06b","md":6}],"id":"u:b98c66fd12b7","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-number","label":"边宽","name":"dropdownStrokeWidth","id":"u:2654c43c710e","placeholder":"描边宽度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":1,"value":1,"suffix":"px","inputClassName":"w-full"},{"type":"grid","columns":[],"id":"u:8506f6284ec4"}],"id":"u:d0c959c354fb","md":6},{"body":[{"type":"input-color","label":"字体","name":"dropdownFontColor","id":"u:93c8bca968f7","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:dfd5738c5d06","md":6}],"id":"u:61f7ddeaacde","className":"m-b"}],"id":"u:ede0183825ba"},{"type":"fieldset","title":"下拉框悬停","collapsable":true,"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"字体","name":"dropdownHoverFontColor","id":"u:feeef1e03bc0","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:85ca6df0b4d5","columnClassName":"m-b"},{"body":[{"type":"input-color","label":"填充","name":"dropdownHoverFill","id":"u:71118ed9f60f","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:d01687a61038"}],"id":"u:211104858d8a","className":"m-b"}],"id":"u:769224650aed"},{"type":"fieldset","id":"u:2a93d8eee7a9","className":"","title":"字体","collapsable":true,"body":[{"type":"container","id":"u:1606d0ad8360","body":[{"type":"select","id":"u:6f3470628b86","label":"字体类型","name":"fontFamily","mode":"horizontal","horizontal":{"leftFixed":"sm"},"size":"lg","options":[{},{"label":"宋体","value":"SimSun"},{"label":"微软雅黑","value":"Microsoft Yahei"},{"label":"苹方","value":"PingFang SC"},{"label":"Andale Mono","value":"andale mono,monospace"},{"label":"Arial","value":"arial,helvetica,sans-serif"},{"label":"Arial Black","value":"arial black,sans-serif"},{"label":"Book Antiqua","value":"book antiqua,palatino,serif"},{"label":"Comic Sans MS","value":"comic sans ms,sans-serif"},{"label":"Courier New","value":"courier new,courier,monospace"},{"label":"Georgia","value":"georgia,palatino,serif"},{"label":"Helvetica Neue","value":"Helvetica Neue"},{"label":"Helvetica","value":"helvetica,arial,sans-serif"},{"label":"Impact","value":"impact,sans-serif"},{"label":"Symbol","value":"symbol"},{"label":"Tahoma","value":"tahoma,arial,helvetica,sans-serif"},{"label":"Terminal","value":"terminal,monaco,monospace"},{"label":"Times New Roman","value":"times new roman,times,serif"},{"label":"Trebuchet MS","value":"trebuchet ms,geneva,sans-serif"},{"label":"Verdana","value":"verdana,geneva,sans-serif"}],"multiple":false,"className":"m-b","menuTpl":"<span style=font-family:\${value}>\${label}</span>","inputClassName":""},{"type":"input-color","label":"字体","name":"fontColor","id":"u:f398c821eda1","mode":"horizontal","size":"lg","className":"m-b","format":"rgba","placeholder":"字体颜色","horizontal":{"leftFixed":"sm"},"inputClassName":""},{"type":"input-number","id":"u:0063eed6ed66","label":"字体大小","name":"fontSize","min":12,"step":1,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"className":"m-b","keyboard":true,"displayMode":"enhance","value":12,"max":100},{"type":"checkboxes","id":"u:b34f4c274416","className":"custom-checkbox-style m-b","label":"文字样式","name":"fontStyle","options":[{"label":"fa-bold fa","value":"bold"},{"label":"fa-italic fa","value":"italic"},{"label":"fa-underline fa","value":"underline"},{"label":"fa fa-strikethrough","value":"line-through"}],"checkAll":false,"joinValues":true,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"optionType":"button","menuTpl":"<span class='text-lg \${label}'></span>","inputClassName":"","multiple":true},{"type":"checkboxes","label":"文字位置","name":"fontAlign","multiple":false,"options":[{"label":"fa fa-align-left","value":"left"},{"label":"fa fa-align-center","value":"center"},{"label":"fa fa-align-right","value":"right"},{"label":"fa fa-align-justify","value":"justify"}],"id":"u:7e80e906ea14","checkAll":false,"joinValues":true,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"optionType":"button","menuTpl":"<span class='text-lg \${label}'></span>","inputClassName":"","className":"custom-checkbox-style m-b"},{"type":"input-number","label":"文字行高","name":"lineHeight","keyboard":true,"id":"u:0063eed6ed66","step":1,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"displayMode":"enhance","className":"m-b"}],"style":{"position":"static","display":"block"},"wrapperBody":false}],"bodyClassName":"m-b"}],"id":"u:a5ebe5f02407","submitText":"","onEvent":{"change":{"weight":0,"actions":[]}},"debug":false,"mode":"normal","panelClassName":"p","labelAlign":"left","className":"","wrapWithPanel":true}],"id":"u:c309ae58472c","className":"p-none no-border"},{"title":"交互","icon":"fa fa-calendar-minus-o","body":[{"type":"service","body":[{"type":"collapse","key":"1","active":true,"header":"下拉框数据","body":[{"type":"service","id":"u:6cb6d200ede2","data":{"dataPoint":"","compareType":"","conditionVariables":[],"defaultValue":"","unit":""},"body":[{"type":"combo","label":"默认选项","name":"defaultOptions","multiple":true,"addable":true,"removable":true,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:08d88a5e111c"},"items":[{"type":"input-text","name":"label","placeholder":"标签","id":"u:b5c4bc1855e7"},{"type":"input-text","name":"value","placeholder":"值","id":"u:ec8ee3ef943e"}],"id":"u:ac8d96e032b9","strictMode":true,"syncFields":[],"tabsMode":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-text","label":"数据源api","name":"dataPoint","id":"normalDataPoint","multiple":false,"mode":"horizontal","size":"full","className":"w-full m-b-sm","inputClassName":"w-full","clearable":true},{"type":"radios","label":"请求方式","name":"requestMethod","options":[{"label":"get 请求","value":"get"},{"label":"post 请求","value":"post"}],"id":"u:2c48207f4f65","mode":"horizontal","value":"get"},{"type":"editor","label":"数据过滤","name":"dataFilterFn","id":"u:f9ef754971e0","language":"javascript","value":"return datas","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"入参为下拉框返回数据： datas"},"labelClassName":"text-left","inputClassName":"text-left","options":{"lineNumbers":"off"}}],"name":"normalService","className":"p-none"}],"id":"u:7b021709614e","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"},{"type":"collapse","key":"2","header":"事件","body":[{"type":"service","id":"u:4ec2acc50405","body":[{"type":"combo","label":"","name":"eventCombo","multiple":true,"addable":false,"removable":false,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:ae1b0a0c0f55"},"items":[{"type":"select","name":"eventType","placeholder":"选择事件","options":[{"label":"改变","value":"change"}],"id":"u:a7b44847011a","label":"名称"},{"type":"checkBox","id":"u:79dadbc61f74","name":"enable","label":"启用"},{"type":"fieldset","title":"目标节点发起请求","collapsable":true,"body":[{"type":"input-text","label":"目标节点","name":"targetNode","id":"u:6efb6f120e47","multiple":false,"mode":"horizontal","inputClassName":"w-full","visibleOn":"this.eventType === 'change'","removable":"true","placeholder":"目标节点id"},{"type":"select","label":"入参类型","name":"targetParamsType","options":[{"label":"物实体","value":"entitys"},{"label":"物属性","value":"attrs"},{"label":"时间","value":"times"}],"id":"u:d10a57a9b966","multiple":false,"mode":"horizontal","inputClassName":"w-full","removable":true},{"type":"radios","label":"入参实体","name":"targetParamsEntitys","options":[{"label":"物组","value":"group"},{"label":"列表","value":"list"},{"label":"关系","value":"relation"},{"label":"搜索","value":"search"},{"label":"标签","value":"tag"},{"label":"类型","value":"type"}],"id":"u:26df91ece010","onEvent":{"change":{"actions":[{"actionType":"custom","script":"console.log('event', event);"}]}},"checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'entitys'"},{"type":"radios","label":"属性类型","name":"targetParamsAttrsType","options":[{"label":"分属性","value":"split"},{"label":"全部","value":"all"}],"id":"u:26df91ece010","checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'attrs'"},{"type":"radios","label":"入参属性","name":"targetParamsAttrsKeysEntitys","options":[{"label":"物","value":"entitys"},{"label":"属性","value":"keys"}],"id":"u:26df91ece010","checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'attrs'"},{"type":"radios","label":"入参时间","name":"targetParamsTimesType","options":[{"label":"最近","value":"nearest"},{"label":"时间段","value":"range"},{"label":"区间","value":"interval"}],"id":"u:26df91ece010","multiple":false,"checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'times'"},{"type":"input-text","label":"超级api","name":"apiId","id":"u:912394455375","placeholder":"超级apiId"}],"id":"u:fbccd2ccc8a3"},{"type":"fieldset","title":"更多操作","collapsable":true,"body":[{"type":"tpl","tpl":"function (context, service, nodeId, event) {","inline":true,"wrapperComponent":"","id":"u:799cd3277731"},{"type":"editor","id":"u:77aca39f5961","label":"","name":"moreOperation","language":"javascript","className":"my-0"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:cd392cfb6ffb"}],"id":"u:51249df94c65","bodyClassName":"text-left"}],"id":"u:364496dd313b","deleteBtn":{"type":"icon","icon":"fa fa-trash","id":"u:6d4a75088bc2","className":"border-none"},"strictMode":true,"syncFields":[],"labelClassName":""}],"data":{"eventCombo":[{"eventType":"click","enable":false,"config":""}]},"name":"eventsService"}],"id":"u:14834e895716","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"}],"id":"u:3eb6b9a42dcb","name":"dynamicService"}],"id":"u:043251c106af","className":"p-sm"},{"title":"脚本解析","icon":"fa fa-star","body":[{"type":"flex","id":"u:edef8e21c1e3","justify":"flex-end","items":[{"type":"button","id":"u:f6d8d837a48d","label":"导入","onEvent":{"click":{"actions":[]}},"icon":"fa fa-download","level":"primary","className":"mr-2"},{"type":"button","id":"u:23f988f98a28","label":"保存","onEvent":{"click":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":true}}}]}},"icon":"fa fa-save"}]},{"type":"service","id":"u:6dc2a126004a","body":[{"type":"tpl","id":"u:c77724a2f3b3","tpl":"function (context, service, nodeId) {","inline":true,"wrapperComponent":"","style":{"fontFamily":"","fontSize":16}},{"type":"editor","label":"","name":"script","id":"u:55ceb80e58a7","language":"javascript","size":"xxl","className":"m-b-none","onEvent":{"focus":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":false}}}]}},"description":"参数提示：\\n1. context 是整个看板上下文，可以获取看板所有元素节点和连线节点，也可以访问 context.globalDatas 获取全局socket 数据。 \\n2. service 是 Ajax 请求服务。\\n3. nodeId 是节点 id . \\n4. 如果返回一个函数，则可以当socket 数据更新时，调用此函数，此函数入参分别是 context, service, nodeId, globalDatas ;，以满足多样化的业务需求。"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:fa21aebb859b","style":{"fontFamily":"","fontSize":16}}],"name":"scriptService","data":{"script":"","save":false},"className":"text-left"}],"id":"u:dc8d331cbe5e"}],"id":"u:178107498966","tabsMode":"radio","className":"p-none w-full","contentClassName":"p-none"}],"className":""}`,d={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true}]',json:`{
|
|
"nodes": [
|
|
{
|
|
"id": "183806b2-ccf3-473f-821a-1b3c0b8e4df4",
|
|
"type": "custom-select-node",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "183806b2-ccf3-473f-821a-1b3c0b8e4df4",
|
|
"width": 120,
|
|
"height": 30,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"strokeWidth": 1,
|
|
"placeholder": "请选择",
|
|
"dropdownStrokeWidth": 1,
|
|
"fontSize": 14,
|
|
"showText": false,
|
|
"nodeAlias": "下拉选择框",
|
|
"opacity": 1,
|
|
"showDefaultValue": false,
|
|
"showUnit": false,
|
|
"fontColor": "rgba(255, 255, 255, 1)",
|
|
"fontFamily": "Microsoft Yahei",
|
|
"fontStyle": "",
|
|
"fill": "rgba(74, 144, 226, 1)",
|
|
"strokeColor": "rgba(74, 144, 226, 1)",
|
|
"dropdownFill": "rgba(255, 255, 255, 0)",
|
|
"dropdownStrokeColor": "rgba(74, 144, 226, 1)",
|
|
"dropdownFontColor": "rgba(40, 131, 238, 1)",
|
|
"triangleColor": "rgba(255, 255, 255, 1)",
|
|
"dropdownHoverFontColor": "rgba(255, 255, 255, 1)",
|
|
"dropdownHoverFill": "rgba(74, 144, 226, 1)",
|
|
"background": "",
|
|
"borderRadius": 2,
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "/v1/entity/list?templateMark=0",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": [],
|
|
"unit": "",
|
|
"requestMethod": "get",
|
|
"dataFilterFn": "return datas.map(i => ({\\r\\n label: i.entityName,\\r\\n value: i.entityId,\\r\\n}))",
|
|
"defaultOptions": [
|
|
{
|
|
"label": "电",
|
|
"value": "A29"
|
|
},
|
|
{
|
|
"label": "水",
|
|
"value": "B2"
|
|
}
|
|
]
|
|
},
|
|
"eventsData": {
|
|
"eventCombo": [
|
|
{
|
|
"eventType": "change",
|
|
"enable": false,
|
|
"targetParams": "nearest-day",
|
|
"targetParamsType": "entitys",
|
|
"targetParamsAttrsType": "all",
|
|
"targetParamsAttrsKeysEntitys": "keys",
|
|
"targetParamsTimesType": "nearest",
|
|
"targetParamsEntitys": "list",
|
|
"apiId": "",
|
|
"moreOperation": ""
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,javascript:`
|
|
|
|
const { createApp, createVNode, render } = Vue;
|
|
const app = createApp({})
|
|
|
|
const defaultOptions = [
|
|
{
|
|
label: 'AA',
|
|
value: 'a'
|
|
},
|
|
{
|
|
label: 'BB',
|
|
value: 'b'
|
|
}
|
|
]
|
|
|
|
const Options = {
|
|
template: \`
|
|
<div v-show="showDropdown" :id="id" :style="dropdownStyle" class="scada-select-dropdown" :class="{showdrop: showDropdown}">
|
|
<div v-if="options.length === 0" :style="selectOptionStyle" class="scada-select-dropdown-option">暂无数据</div>
|
|
<div v-for="item in options" :key="item.value" :data-key="item.value" :style="selectOptionStyle(item)" @click="selectOption(item)" class="scada-select-dropdown-option" @mousemove="(e) => handleMove(e, item.label)">{{ item.label }}</div>
|
|
</div>
|
|
\`,
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
showDropdown: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
selects: {
|
|
type: Object,
|
|
default: {
|
|
label: '请选择',
|
|
value: '-'
|
|
}
|
|
},
|
|
fontColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
fontSize: {
|
|
type: Number,
|
|
default: 14
|
|
},
|
|
fontFamily: {
|
|
type: String,
|
|
default: '宋体'
|
|
},
|
|
fontStyle: {
|
|
type: String,
|
|
default: 'normal'
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 60
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 34
|
|
},
|
|
lineHeight: {
|
|
type: Number,
|
|
default: 34,
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
default: 2,
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: '#1890ff'
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: '#1890ff',
|
|
},
|
|
hoverFontColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
hoverFillColor: {
|
|
type: String,
|
|
default: '#1890ff'
|
|
}
|
|
},
|
|
emits: ['selected'],
|
|
setup(props, { emit }) {
|
|
const { ref, computed, nextTick, onMounted, onUnmounted } = Vue
|
|
|
|
const selects = ref({
|
|
label: '请选择',
|
|
value: '-'
|
|
});
|
|
|
|
const dropdownStyle = computed(() => {
|
|
const realWidth = parseInt(props.width);
|
|
return \`
|
|
width: \${realWidth - props.strokeWidth * 2}px;
|
|
height: 0px;
|
|
max-height: 350px;
|
|
overflow-y: auto;
|
|
border-width: \${props.strokeWidth}px;
|
|
border-style: solid;
|
|
border-radius: 2px;
|
|
border-color:\${props.borderColor};
|
|
border-bottom: 1 solid \${props.borderColor};
|
|
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
transition: height ease-in-out 0.2s;
|
|
\`
|
|
})
|
|
|
|
const selectOptionStyle = computed(() => (option) => {
|
|
const isSelected = props.selects.value === option.value;
|
|
const backColor = isSelected ? props.hoverFillColor : props.backgroundColor;
|
|
const fontColor = isSelected ? props.hoverFontColor : props.fontColor;
|
|
return \`
|
|
display: block;
|
|
font-size: 12px;
|
|
width: 100%;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
color: \${fontColor};
|
|
background-color: \${backColor};
|
|
padding: 0 5px;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
\`
|
|
})
|
|
|
|
const selectOption = (ev) => {
|
|
selects.value = ev
|
|
emit('selected', selects.value)
|
|
}
|
|
|
|
const defaultSelect = () => {
|
|
selects.value = {
|
|
label: '请选择',
|
|
value: '-'
|
|
}
|
|
emit('selected', selects.value)
|
|
}
|
|
|
|
const moveHandler = (e) => {
|
|
const target = e.target ;
|
|
const insideDropdown = target.closest('.scada-select-dropdown');
|
|
if(!insideDropdown) {
|
|
const tooltip = document.querySelector('.scada-select-dropdown-tooltip');
|
|
if(tooltip) {
|
|
tooltip.remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleMove= window._.debounce(function (e, label) {
|
|
const x = e.pageX;
|
|
const y = e.pageY;
|
|
const offsetWidth = e.target.offsetWidth;
|
|
const scrollWidth = e.target.scrollWidth;
|
|
if (offsetWidth < scrollWidth) {
|
|
const tooltip = document.querySelector('.scada-select-dropdown-tooltip');
|
|
if (!tooltip) {
|
|
const span = document.createElement('span');
|
|
span.className = 'scada-select-dropdown-tooltip';
|
|
span.innerHTML = label;
|
|
span.style.top = y + 10 + 'px';
|
|
span.style.left = x + 15 + 'px';
|
|
document.body.appendChild(span);
|
|
} else {
|
|
tooltip.innerHTML = label;
|
|
tooltip.style.top = y + 10 + 'px';
|
|
tooltip.style.left = x + 15 + 'px';
|
|
}
|
|
} else {
|
|
const tooltip = document.querySelector('.scada-select-dropdown-tooltip');
|
|
tooltip && tooltip.remove();
|
|
}
|
|
}, 200)
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
const optionDoms = Array.from(document.querySelectorAll('.scada-select-dropdown-option'));
|
|
optionDoms.forEach((opt) => {
|
|
opt.mouseoverFn = () => {
|
|
opt.style.color = props.hoverFontColor;
|
|
opt.style.backgroundColor = props.hoverFillColor;
|
|
}
|
|
opt.mouseleaveFn = () => {
|
|
const dataKey = opt.dataset.key;
|
|
if (dataKey !== props.selects.value) {
|
|
opt.style.color = props.fontColor;
|
|
opt.style.backgroundColor = props.backgroundColor;
|
|
} else {
|
|
opt.style.color = props.hoverFontColor;
|
|
opt.style.backgroundColor = props.hoverFillColor;
|
|
}
|
|
}
|
|
opt.addEventListener('mouseover', opt.mouseoverFn);
|
|
opt.addEventListener('mouseleave', opt.mouseleaveFn);
|
|
})
|
|
const dropdownDom = document.getElementById(props.id);
|
|
const dropdown = document.querySelector('.scada-select-dropdown-option');
|
|
if (dropdownDom) {
|
|
setTimeout(()=> {
|
|
dropdownDom.style.height = props.options.length * dropdown.offsetHeight + 'px';
|
|
}, 0)
|
|
}
|
|
});
|
|
document.body.addEventListener('mousemove', moveHandler)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
const optionDoms = Array.from(document.querySelectorAll('.scada-select-dropdown-option'));
|
|
optionDoms.forEach((opt) => {
|
|
opt.removeEventListener('mouseover', opt.mouseoverFn);
|
|
opt.removeEventListener('mouseleave', opt.mouseleaveFn);
|
|
});
|
|
document.body.removeEventListener('mousemove', moveHandler)
|
|
})
|
|
|
|
return {
|
|
selects,
|
|
dropdownStyle,
|
|
selectOptionStyle,
|
|
selectOption,
|
|
defaultSelect,
|
|
handleMove,
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
const Select = {
|
|
template: \`<div :id="nodeId" class="custom-select-node" :style="cssOuter" @click="clickHandler">
|
|
<div :style="cssInner">{{selects.label }}</div>
|
|
<div style="position: absolute; top: 0; right: 0; bottom: 0; width: 25px;display: flex;align-items: center">
|
|
<div v-if="showDropdown" :style=" triangleupStyle"></div>
|
|
<div v-else="!showDropdown" :style="triangledownStyle"></div>
|
|
</div>
|
|
</div>\`,
|
|
props: {
|
|
selects: {
|
|
type: Object,
|
|
default: {
|
|
label: '请选择',
|
|
value: '-'
|
|
}
|
|
},
|
|
showDropdown: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
nodeId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
fontColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
fontSize: {
|
|
type: Number,
|
|
default: 14
|
|
},
|
|
fontFamily: {
|
|
type: String,
|
|
default: '宋体'
|
|
},
|
|
fontStyle: {
|
|
type: String,
|
|
default: 'normal'
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 60
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 34
|
|
},
|
|
lineHeight: {
|
|
type: Number,
|
|
default: 34,
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: '#1890ff'
|
|
},
|
|
triangleColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: '#1890ff',
|
|
},
|
|
background: {
|
|
type: String,
|
|
default: 'none',
|
|
},
|
|
borderRadius: {
|
|
type: Number,
|
|
default: 2
|
|
}
|
|
},
|
|
emits: ["showHideSelect"],
|
|
setup(props, { emit }) {
|
|
const { ref, toRefs, computed, watch, onMounted, onUnmounted } = Vue
|
|
const { width, height, defaultValue } = toRefs(props)
|
|
|
|
const realWidth = parseInt(width.value);
|
|
const realHeight = parseInt(height.value);
|
|
|
|
const cssOuter = computed(() => {
|
|
const borderWidths = props.strokeWidth * 2;
|
|
let back = props.background;
|
|
if (back !== 'none' && !back.includes('url')) {
|
|
back = \`url(\${back})\`
|
|
}
|
|
return \`
|
|
position: relative;
|
|
border-width: \${props.strokeWidth}px;
|
|
border-style: solid;
|
|
width: \${realWidth - borderWidths}px;
|
|
height: \${realHeight - borderWidths}px;
|
|
line-height: \${realHeight - borderWidths}px;
|
|
border-radius: \${props.borderRadius}px;
|
|
border-color:\${props.borderColor};
|
|
background-color:\${props.backgroundColor};
|
|
background-image: \${back};
|
|
background-size: 100% 100%;\`
|
|
})
|
|
const cssInner = computed(() => {
|
|
const fontStyle = props.fontStyle;
|
|
const style = {}
|
|
if (fontStyle) {
|
|
if (fontStyle.includes('bold')) {
|
|
style.fontWeight = 'bolder';
|
|
}
|
|
if (fontStyle.includes('italic')) {
|
|
style.fontStyle = 'italic'
|
|
}
|
|
if (fontStyle.includes('underline,line-through')) {
|
|
style.textDecoration = 'underline line-through'
|
|
} else if (fontStyle.includes('line-through,underline')) {
|
|
style.textDecoration = 'line-through underline'
|
|
} else if (fontStyle.includes('underline')) {
|
|
style.textDecoration = 'underline'
|
|
} else if (fontStyle.includes('line-through')) {
|
|
style.textDecoration = 'line-through'
|
|
}
|
|
}
|
|
return \`
|
|
width: 100%;
|
|
height: 100%;
|
|
color: \${props.fontColor};
|
|
font-size: \${props.fontSize}px;
|
|
text-align: left;
|
|
padding: 0px 25px 0px 15px;
|
|
box-sizing: border-box;
|
|
font-family: \${props.fontFamily};
|
|
font-style: \${style.fontStyle};
|
|
font-weight: \${style.fontWeight};
|
|
text-decoration: \${style.textDecoration};
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
\`;
|
|
})
|
|
|
|
const triangledownStyle = computed(() => {
|
|
const h = props.height;
|
|
return \`
|
|
width: 0;
|
|
height: 0;
|
|
border-left: \${(h / 3) / 2}px solid transparent;
|
|
border-right: \${(h / 3) / 2}px solid transparent;
|
|
border-top: \${h / 3}px solid \${props.triangleColor};
|
|
\`
|
|
})
|
|
|
|
const triangleupStyle = computed(() => {
|
|
const h = props.height;
|
|
return \`
|
|
width: 0;
|
|
height: 0;
|
|
border-left: \${(h / 3) / 2}px solid transparent;
|
|
border-right: \${(h / 3) / 2}px solid transparent;
|
|
border-bottom: \${h / 3}px solid \${props.triangleColor};
|
|
\`
|
|
})
|
|
|
|
const clickHandler = (visible) => {
|
|
const dropdowns = Array.from(document.querySelectorAll('.scada-select-dropdown'));
|
|
dropdowns.forEach((drop) => {
|
|
drop.remove()
|
|
});
|
|
const selectNode = document.getElementById(props.nodeId);
|
|
if (selectNode) {
|
|
const { left, top, width, height } = selectNode.getBoundingClientRect();
|
|
emit('showHideSelect', {
|
|
visible,
|
|
left,
|
|
top,
|
|
width,
|
|
height,
|
|
})
|
|
}
|
|
}
|
|
|
|
const listenerDocClick = function (e) {
|
|
// 点击空白处消失下拉框
|
|
const clickOnDropdown = e.target.closest('.scada-select-dropdown')
|
|
const selectNode = e.target.closest(".custom-select-node")
|
|
if (!clickOnDropdown && !selectNode) {
|
|
clickHandler(false)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('click', listenerDocClick, true)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('click', listenerDocClick, true)
|
|
})
|
|
|
|
return {
|
|
cssOuter,
|
|
cssInner,
|
|
clickHandler,
|
|
triangledownStyle,
|
|
triangleupStyle,
|
|
}
|
|
}
|
|
}
|
|
|
|
class CustomSelectNode extends HtmlResize.view {
|
|
clickTime = ''
|
|
oldProperties = '{}'
|
|
|
|
setHtml(rootEl) {
|
|
const { graphModel } = this.props;
|
|
const { properties, width, height, } = this.props.model;
|
|
const { fontColor, fontSize, fontFamily, fontStyle, strokeWidth, lineHeight, fill, strokeColor,
|
|
dropdownFill, dropdownStrokeColor, dropdownFontColor, triangleColor, background, placeholder, borderRadius, dropdownStrokeWidth } = properties;
|
|
const { normalData } = properties.dynamic || {};
|
|
const { model } = this.props;
|
|
const el = document.createElement('div');
|
|
rootEl.innerHTML = '';
|
|
let dropdownInst = null;
|
|
let instance = null;
|
|
let show = false;
|
|
|
|
const dropdowns = Array.from(document.querySelectorAll('.scada-select-dropdown'));
|
|
dropdowns.forEach((drop) => {
|
|
drop.remove()
|
|
});
|
|
|
|
const selectedHandler = (selects) => {
|
|
if (instance) {
|
|
instance.component.props.selects = selects;
|
|
if (dropdownInst) {
|
|
show = false;
|
|
instance.component.props.showDropdown = false;
|
|
if (dropdownInst) {
|
|
dropdownInst.component.props.showDropdown = false;
|
|
}
|
|
const selectNode = document.getElementById(\`select-\${properties.id}\`);
|
|
if (selectNode) {
|
|
document.body.removeChild(selectNode)
|
|
}
|
|
}
|
|
graphModel.eventCenter.emit("node:change", {
|
|
data: model,
|
|
e: selects,
|
|
});
|
|
}
|
|
}
|
|
|
|
const showHideHandler = ({ visible, left, top, width, height }) => {
|
|
if (visible !== undefined && visible === false) {
|
|
show = visible;
|
|
instance.component.props.showDropdown = false;
|
|
if (dropdownInst) {
|
|
dropdownInst.component.props.showDropdown = false;
|
|
}
|
|
return;
|
|
}
|
|
if (!show) {
|
|
show = true;
|
|
instance.component.props.showDropdown = true;
|
|
const dropdownEl = document.createElement('div');
|
|
dropdownEl.setAttribute('id', \`select-\${properties.id}\`)
|
|
dropdownEl.setAttribute('style', \`position: fixed; left: \${left}px; top: \${top + height - 2}px; z-index: 8888\`);
|
|
let opts = [];
|
|
if (normalData && normalData.defaultOptions) {
|
|
if (typeof normalData.defaultOptions !== 'string') {
|
|
opts = normalData.defaultOptions
|
|
} else {
|
|
opts = JSON.parse(normalData.defaultOptions);
|
|
}
|
|
}
|
|
dropdownInst = createVNode(Options, {
|
|
showDropdown: true,
|
|
id: \`dropdown-\${properties.id}\`,
|
|
fontColor: dropdownFontColor,
|
|
fontSize, fontFamily, fontStyle, width, height, lineHeight,
|
|
backgroundColor: dropdownFill,
|
|
borderColor: dropdownStrokeColor,
|
|
hoverFontColor: properties.dropdownHoverFontColor,
|
|
hoverFillColor: properties.dropdownHoverFill,
|
|
strokeWidth: dropdownStrokeWidth,
|
|
options: opts,
|
|
selects: instance.component.props.selects,
|
|
onSelected: selectedHandler
|
|
})
|
|
dropdownInst.appContext = app._context
|
|
render(dropdownInst, dropdownEl)
|
|
document.body.appendChild(dropdownEl);
|
|
} else {
|
|
show = false;
|
|
instance.component.props.showDropdown = false;
|
|
if (dropdownInst) {
|
|
dropdownInst.component.props.showDropdown = false;
|
|
}
|
|
const selectNode = document.getElementById(\`select-\${properties.id}\`);
|
|
if (selectNode) {
|
|
document.body.removeChild(selectNode)
|
|
}
|
|
}
|
|
}
|
|
|
|
instance = createVNode(Select, {
|
|
selects: properties.event || {
|
|
label: placeholder,
|
|
value: '-'
|
|
},
|
|
showDropdown: show,
|
|
nodeId: \`select-input-\${properties.id}\`,
|
|
fontColor,
|
|
fontSize, fontFamily, fontStyle, width, height, lineHeight,
|
|
backgroundColor: fill,
|
|
borderColor: strokeColor,
|
|
triangleColor,
|
|
strokeWidth,
|
|
defaultValue: '',
|
|
background,
|
|
borderRadius,
|
|
onShowHideSelect: showHideHandler
|
|
})
|
|
instance.appContext = app._context
|
|
render(instance, el)
|
|
rootEl.appendChild(el);
|
|
}
|
|
|
|
sameProps(properties) {
|
|
const isSame = window._.isEqual(JSON.parse(this.oldProperties), properties);
|
|
if (isSame) return true;
|
|
this.oldProperties = JSON.stringify(properties);
|
|
return false
|
|
}
|
|
|
|
shouldUpdate() {
|
|
const { properties } = this.props.model;
|
|
const propertiesBack = window._.cloneDeep(properties);
|
|
if (this.sameProps(propertiesBack)) {
|
|
return false
|
|
}
|
|
return true;
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (this.shouldUpdate) {
|
|
this.setHtml(this.rootEl);
|
|
}
|
|
const { properties } = this.props.model;
|
|
const { graphModel, model } = this.props;
|
|
if (properties.event) {
|
|
setTimeout(() => {
|
|
graphModel.eventCenter.emit("node:change", {
|
|
data: model,
|
|
e: properties.event,
|
|
});
|
|
}, 1000)
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
const dropdowns = Array.from(document.querySelectorAll('.scada-select-dropdown'));
|
|
dropdowns.forEach((drop) => {
|
|
drop.remove()
|
|
});
|
|
}
|
|
}
|
|
|
|
class CustomSelectModel extends HtmlResize.model {
|
|
initNodeData(data) {
|
|
// 自定义组件，需最开始重置一下text 。
|
|
data.text = {
|
|
value: "",
|
|
x: data.x,
|
|
y: data.y,
|
|
};
|
|
super.initNodeData(data);
|
|
const { properties } = this;
|
|
this.width = properties.width || 100;
|
|
this.height = properties.height || 35;
|
|
this.text.editable = false; // 不允许文本被编辑
|
|
}
|
|
|
|
setAttributes() {
|
|
// 自定义组件需重置 text
|
|
const { x, y, properties } = this;
|
|
const { textHorizontalMove = 0, textVerticalMove = 0 } = properties;
|
|
this.text = {
|
|
...this.text,
|
|
x: x + textHorizontalMove,
|
|
y: y + textVerticalMove,
|
|
value: "",
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
lf.register({
|
|
type: 'custom-select-node',
|
|
view: CustomSelectNode,
|
|
model: CustomSelectModel,
|
|
})
|
|
|
|
`,css:`.scada-select-dropdown::-webkit-scrollbar {/*滚动条整体样式*/\r
|
|
width: 0px; /*高宽分别对应横竖滚动条的尺寸*/\r
|
|
height: 0px;\r
|
|
}\r
|
|
.scada-select-dropdown::-webkit-scrollbar-thumb {/*滚动条里面小方块*/\r
|
|
border-radius: 0px;\r
|
|
background: transparent;\r
|
|
}\r
|
|
.scada-select-dropdown::-webkit-scrollbar-track {/*滚动条里面轨道*/\r
|
|
box-shadow: inset 0 0 1px transparent;\r
|
|
border-radius: 1px;\r
|
|
background: transparent;\r
|
|
}\r
|
|
.scada-select-dropdown-tooltip {\r
|
|
position: absolute;\r
|
|
display: inline-block;\r
|
|
background-color: rgba(0,0,0,0.65);\r
|
|
color: #ffffff;\r
|
|
font-size: 12px;\r
|
|
padding: 5px 5px;\r
|
|
max-width: 120px;\r
|
|
max-height: 120px;\r
|
|
overflow-y: auto;\r
|
|
z-index: 8888;\r
|
|
transition: all 0.2s;\r
|
|
}`,fakeData:""},u={id:e,name:n,aliasName:t,image:o,imageType:l,groupName:a,groupType:s,isRemote:!1,isDefault:!0,sectionType:i,config:r,files:d};export{t as aliasName,r as config,u as default,d as files,a as groupName,s as groupType,e as id,o as image,l as imageType,c as isDefault,p as isRemote,n as name,i as sectionType};
|