const e="5a72da54-c053-4e8d-8880-6e5453b16fc9",n="custom-select-node",t="下拉选择框",o='',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":"\${label}","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":"","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":"","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: \`
暂无数据
{{ item.label }}
\`, 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: \`
{{selects.label }}
\`, 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};