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.
465 lines
52 KiB
465 lines
52 KiB
const e="e46b9366-f350-4130-8b74-b718deccc636",a="custom-form-input",n="表单输入框",t='<?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="1700615525422" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5042" xmlns:xlink="http://www.w3.org/1999/xlink" width="228.515625" height="200"><path d="M1024 128a39.862857 39.862857 0 0 1 36.571429 42.788571v682.422858a39.862857 39.862857 0 0 1-36.571429 42.788571H146.285714a39.862857 39.862857 0 0 1-36.571428-42.788571V170.788571A39.862857 39.862857 0 0 1 146.285714 128h877.714286M1024 0H146.285714C65.462857 0 0 76.434286 0 170.788571v682.422858C0 947.565714 65.462857 1024 146.285714 1024h877.714286c80.822857 0 146.285714-76.434286 146.285714-170.788571V170.788571C1170.285714 76.434286 1104.822857 0 1024 0z" fill="#4C4A58" p-id="5043"></path><path d="M310.857143 292.571429A54.857143 54.857143 0 0 0 256 347.428571v329.142858a54.857143 54.857143 0 0 0 109.714286 0v-329.142858A54.857143 54.857143 0 0 0 310.857143 292.571429z" fill="#51C75B" p-id="5044"></path><path d="M365.714286 292.571429H256a54.857143 54.857143 0 0 0 0 109.714285h109.714286a54.857143 54.857143 0 0 0 0-109.714285zM365.714286 621.714286H256a54.857143 54.857143 0 0 0 0 109.714285h109.714286a54.857143 54.857143 0 0 0 0-109.714285z" fill="#51C75B" p-id="5045"></path><path d="M556.251429 621.714286a54.857143 54.857143 0 1 0 54.857142 54.857143 54.857143 54.857143 0 0 0-54.857142-54.857143zM746.788571 621.714286a54.857143 54.857143 0 1 0 54.857143 54.857143 54.857143 54.857143 0 0 0-54.857143-54.857143z" fill="#4C4A58" p-id="5046"></path></svg>',l="svg",o="基础",i="常用",c=!1,u=!0,d="文字",s=`{"type":"page","id":"u:270584784ce1","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:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","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":"高度","name":"height","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:da449a94908a","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","keyboard":true,"id":"u:29852d093d9d","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:1b561d652acc","md":6},{"body":[{"type":"input-number","label":"Y 轴","name":"y","keyboard":true,"id":"u:dc8c1daed8ed","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:9672575193ac","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":"opacity","id":"u:cf80f59d8d42","placeholder":"组件透明度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":0,"suffix":"","value":1,"inputClassName":"w-full","precision":2}],"id":"u:51ddf54ac749","md":6}],"gap":""},{"type":"grid","columns":[{"body":[{"type":"radios","label":"显示确认按钮","name":"showConfirmBtn","options":[{"label":"是","value":true},{"label":"否","value":false}],"id":"u:4cf7a9ccc450","mode":"horizontal","value":true}],"id":"u:afc37bde0156","md":12}],"id":"u:235f153e5ad5","className":"m-b"},{"type":"switch","label":"显示搜索图标","option":"","name":"showSearchIcon","falseValue":false,"trueValue":true,"id":"u:830103f498f0","value":false,"mode":"horizontal"},{"type":"input-color","label":"搜索图标颜色","name":"searchIconColor","id":"u:86a93f611301","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"fieldset","title":"确认按钮","collapsable":true,"body":[{"type":"input-text","label":"文字","name":"confirmText","id":"u:e7d78dd472bb","editorState":"default","mode":"horizontal","value":"确认"},{"type":"input-color","label":"背景","name":"confirmBack","id":"u:189a4fb3727d","format":"rgba","mode":"horizontal","value":"rgba(25, 132, 235, 1)","inputClassName":"w-full"},{"type":"input-color","label":"字色","name":"confirmTextColor","id":"u:c6e2b6a30f69","format":"rgba","mode":"horizontal","value":"rgba(255, 255, 255, 1)","inputClassName":"w-full"},{"type":"input-number","label":"字大小","name":"confirmTextSize","keyboard":true,"id":"u:ae28eae7a2be","step":1,"mode":"horizontal","value":14,"className":"m-b","inputClassName":"w-full"},{"type":"input-number","label":"宽度","name":"confirmWidth","keyboard":true,"id":"u:a5db11a0b968","step":1,"mode":"horizontal","value":70,"className":"m-b","inputClassName":"w-full"}],"id":"u:3b2aac50c64a","headingClassName":"","bodyClassName":"m-b"},{"type":"fieldset","title":"输入框","collapsable":true,"body":[{"type":"input-text","label":"提示文字","name":"placeholder","id":"u:33263d91d7da","editorState":"default","mode":"horizontal","value":"请输入文本..."},{"type":"input-color","label":"提示颜色","name":"placeholderColor","id":"u:705a12cac14e","editorState":"default","mode":"horizontal","value":"","format":"rgba","inputClassName":"w-full","className":"m-b"},{"type":"input-color","label":"背景","name":"inputBackground","id":"u:4579ed6e7ddc","editorState":"default","mode":"horizontal","value":"","format":"rgba","inputClassName":"w-full","className":"m-b"},{"type":"input-text","label":"渐变背景","name":"inputGradBack","id":"u:a0c383aa2a1f","editorState":"default","mode":"horizontal"},{"type":"select","label":"文字对齐","name":"inputTextAlign","options":[{"label":"居中对齐","value":"center"},{"label":"左对齐","value":"left"}],"id":"u:ce35b278b974","multiple":false,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:d0d4c08b5142","bodyClassName":"m-b"},{"type":"fieldset","title":"边框","collapsable":true,"body":[{"type":"input-number","label":"边框宽度","name":"borderWidth","id":"u:d69898fc4a5f","editorState":"default","mode":"horizontal","value":"","keyboard":true,"step":1,"precision":1,"suffix":"px","inputClassName":"w-full"},{"type":"input-color","label":"边框颜色","name":"borderColor","id":"u:6288363287b8","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"边框圆角","name":"borderRadius","id":"u:ca2db9509018","editorState":"default","mode":"horizontal","value":"","keyboard":true,"step":1,"precision":1,"suffix":"px","inputClassName":"w-full"},{"type":"select","label":"线条类型","name":"borderStyle","options":[{"label":"实线","value":"solid"},{"label":"虚线","value":"dashed"},{"label":"点线","value":"dotted"}],"id":"u:4a6b7edf8216","mode":"horizontal","multiple":false,"inputClassName":"w-full","className":"m-b"}],"id":"u:050f19f3cc10","bodyClassName":"m-b"},{"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":"input-number","label":"字符间距","name":"fontSpace","keyboard":true,"id":"u:d05b551cf67c","step":1,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"displayMode":"enhance","className":"m-b","min":0,"max":50},{"type":"input-number","label":"文字行高","name":"lineHeight","keyboard":true,"id":"u:0063eed6ed66","step":1,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"displayMode":"enhance","className":"m-b","min":12}],"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":"input-text","label":"数据点","name":"dataPoint","id":"normalDataPoint","multiple":false,"mode":"horizontal","size":"full","onEvent":{"focus":{"weight":0,"actions":[{"actionType":"dialog","dialog":{"type":"dialog","title":"请配置需要绑定的数据点","body":[{"type":"tabs","tabs":[{"title":"常规数据点","body":[{"type":"form","title":"","body":[{"type":"select","label":"数据源","name":"dataSource","id":"u:c273f087b8ed","mode":"horizontal","multiple":false,"size":"md","horizontal":{"leftFixed":"sm"},"source":"\${apiDtoList || thingApiDTOList}","labelField":"name","valueField":"id","onEvent":{"change":{"actions":[{"actionType":"reload","componentId":"u:1cdb908c23a8"},{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:1cdb908c23a8', 'args': {'value': ''} });\\r\\n doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"clearable":true,"actionType":"change","target":"u:1cdb908c23a8"},{"type":"combo","label":"设备属性","name":"deviceAttrs","id":"u:98559a2dd514","multiple":false,"mode":"horizontal","size":"full","horizontal":{"leftFixed":"sm"},"items":[{"type":"input-table","label":false,"id":"u:41dfc35c368c","name":"table","strictMode":false,"needConfirm":false,"addable":true,"removable":true,"columns":[{"type":"input-text","label":"序号","id":"u:434e22030bc6","name":"num","size":"sm","mode":"horizontal","quickEdit":{"mode":"popOver","id":"u:c6a294f5c93a"},"horizontal":{"left":2,"right":10},"placeholder":"例：A/B/C/AA/BB","width":200},{"type":"select","name":"devices","id":"u:1cdb908c23a8","label":"设备","multiple":false,"mode":"horizontal","quickEdit":true,"size":"sm","source":{"url":"/thing/v2/api/telemetryById?id=\${dataSource}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"adaptor":"if (payload && payload.data && payload.data.result) {console.log('payload.data.result', payload.data.result); \\r\\n const list = []\\r\\n const devices = payload.data.result.info \\r\\n for (const key in devices) {\\r\\n const device_info = devices[key] \\r\\n list.push({\\r\\n label: device_info.entityName,\\r\\n value: device_info.entityId,\\r\\n deviceCode: device_info.entityCode,\\r\\n deviceInfo: device_info,\\r\\n attrs: device_info.attrs })\\r\\n }\\r\\n payload.data = list;\\r\\n return payload\\r\\n}","sendOn":"this.dataSource"},"onEvent":{"change":{"actions":[{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"responseData":{"&":"$$","list":"\${items}"},"clearable":true,"horizontal":{"left":2,"right":10},"checkAll":false},{"type":"select","name":"dataPoint","id":"u:8147daea685d","label":"数据点","multiple":false,"quickEdit":true,"mode":"horizontal","size":"sm","source":{"url":"/thing/v2/api/callDict?id=\${dataSource}&entityId=\${devices}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"sendOn":"this.dataSource && this.devices","adaptor":"const list = payload.data.map(item => {\\r\\n item.dictName = item.dictName + ' - ' + item.dictCode\\r\\n return item\\r\\n})\\r\\npayload.data = list;\\r\\nreturn payload"},"labelField":"dictName","valueField":"dictCode","checkAll":false,"horizontal":{"left":2,"right":10},"overlay":{"width":"350px"},"searchable":true}]}],"strictMode":true,"syncFields":[],"tabsMode":false,"canAccessSuperData":true,"inputClassName":"w-full","className":"m-b-sm"},{"type":"checkbox","label":"数据处理","name":"enableDataHandle","id":"u:034ca60f2135","mode":"horizontal","horizontal":{"leftFixed":"normal"},"option":""},{"type":"combo","id":"u:a06125153fa6","name":"calcRules","label":"计算规则","mode":"horizontal","visibleOn":"this.enableDataHandle","multiple":true,"items":[{"name":"formular","label":"计算公式","type":"input-text","id":"u:318a7f0c6449","placeholder":"例： (A + B) / C","width":"50%","size":"full"},{"name":"resultAttr","label":"计算结果属性","type":"input-text","id":"u:1e6e491ccbaa","placeholder":"例：A8、B、C...","width":"50%"}],"strictMode":true,"syncFields":[],"hidden":false,"inputClassName":"w-full","multiLine":false,"className":"calcRules"},{"type":"input-text","label":"唯一数据点","name":"uniquePoint","id":"u:3b257b599c19","mode":"horizontal","visibleOn":"this.enableDataHandle","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","title":"场景：","content":"当有数据处理，并且只需绑定一个数据点作为 【实时/立即/最新数据】时，请填写所需数据点的序号或计算结果属性。"},"inputControlClassName":"m-b"}],"id":"u:51f0e51abd7c","data":{"attrs":[],"deviceCode":"\${deviceCode || ''}","devices":"\${devices || ''}","dataPoint":"\${dataPoint || ''}","dataSource":"\${dataSource || ''}","deviceAttrs":"\${deviceAttrs || []}"},"submitText":"","onEvent":{"inited":{"actions":{"actionType":"custom","script":"if(event.data.devices && event.data.dataPoint && event.data.deviceAttrs.length === 0) { const dataPoints = event.data.dataPoint.split(','); const newDeviceAttrs = dataPoints.map((point, idx) => ({ num: String.fromCharCode(65+idx), devices: event.data.devices, dataPoint: point }) ); doAction({ 'actionType': 'setValue', 'componentId': 'u:51f0e51abd7c', 'args': { value: {deviceAttrs: { table: newDeviceAttrs } }} }); }"}}}}],"id":"u:5505e7ef7cab"},{"title":"虚拟变量","body":[{"type":"tpl","tpl":"暂时无虚拟变量可配置","wrapperComponent":"","inline":false,"id":"u:722592249b31"}],"id":"u:b739cc6a6ed7"}],"id":"u:3b446450d643"}],"showCloseButton":true,"showErrorMsg":true,"showLoading":true,"id":"u:f46c2439c983","data":{"&":"\${dataPoint | toJson}","apiDtoList":"\${thingApiDTOList}","myToken":"\${myToken}","myTenantCode":"\${myTenantCode}","myCompanyId":"\${myCompanyId}"},"onEvent":{"confirm":{"actions":[{"actionType":"custom","script":"const tableData = event.data.deviceAttrs.table; let devices = ''; let dataPoint = ''; if(tableData) { tableData.forEach(item => { devices += (item.devices + ',');dataPoint += (item.dataPoint + ','); });}; if(tableData && tableData.length > 0) { devices = devices.substring(0, devices.length - 1); dataPoint = dataPoint.substring(0, dataPoint.length - 1); const newValue = {...event.data, devices: devices, dataPoint: dataPoint, dataSource: event.data.dataSource} ; doAction({ 'componentId': 'normalDataPoint', 'actionType': 'setValue', 'args': { value: JSON.stringify(newValue) } }) } else {doAction({ 'componentId': 'normalDataPoint', 'actionType': 'setValue', 'args': { value: JSON.stringify(event.data) } }) };"}]}},"closeOnEsc":false,"size":"lg"}}]}},"className":"w-full m-b-sm","inputClassName":"w-full","clearable":true},{"type":"input-text","label":"默认值","placeholder":"[{ \\"val\\": 0.00 }]","clearable":true,"name":"defaultValue","id":"u:13ccbc565f5e","mode":"horizontal","size":"full","inputControlClassName":"mb-sm","labelClassName":"mb-sm","className":"m-b-sm"},{"type":"input-text","label":"单位   ","name":"unit","id":"u:0f606558e8c7","mode":"horizontal","size":"full","className":"m-b-sm"}],"name":"normalService","className":"p-none"},{"type":"service","body":[],"id":"u:0dd069ac163f"}],"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":true,"removable":true,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:ae1b0a0c0f55"},"items":[{"type":"select","name":"eventType","placeholder":"选择事件","options":[{"label":"单击","value":"click"},{"label":"双击","value":"dblClick"},{"label":"改变","value":"change"},{"label":"鼠标进入","value":"mouseEnter"},{"label":"鼠标离开","value":"mouseLeave"}],"id":"u:a7b44847011a","label":"名称"},{"type":"input-text","name":"config","placeholder":"事件配置","id":"u:d491386a95c2","onEvent":{"focus":{"actions":[{"actionType":"dialog","dialog":{"title":"设置事件","data":{"comboIndex":"\${index}","&":"\${config | toJson}","nodesList":"\${graphDataList}","apiDtoList":"\${thingApiDTOList}","myToken":"\${myToken}","myTenantCode":"\${myTenantCode}","myCompanyId":"\${myCompanyId}","evType":"\${eventType}"},"body":[{"type":"form","title":"表单","body":[{"type":"radios","label":"事件行为","name":"eventAction","options":[{"label":"打开链接","value":"openLink"},{"label":"打开弹窗","value":"openDialog"},{"label":"下发指令","value":"sendCommand"},{"label":"显示隐藏","value":"showHide"}],"mode":"horizontal","horizontal":{"leftFixed":"sm"},"id":"u:9e7f1220367f","value":"openLink"},{"type":"input-text","label":"链接地址","name":"linkAddress","mode":"horizontal","horizontal":{"leftFixed":"sm"},"inputClassName":"w-full","id":"u:c5bda965ed3c","size":"full","visibleOn":"data.eventAction === 'openLink'"},{"type":"combo","label":"参数","name":"dataPointTable","id":"dataPointTable","addable":true,"strictMode":true,"removable":true,"horizontal":{"leftFixed":"sm"},"multiple":true,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:bf2f6c98dbff"},"items":[{"type":"input-text","name":"dataPoint","id":"u:1eb050ec98d3","label":"","multiple":false,"size":"full","onEvent":{"focus":{"weight":0,"actions":[{"actionType":"dialog","dialog":{"type":"dialog","title":"请配置需要绑定的数据点","body":[{"type":"tabs","tabs":[{"title":"常规数据点","body":[{"type":"form","title":"","body":[{"type":"select","label":"数据源","name":"dataSource","id":"u:c273f087b8ed","multiple":false,"mode":"horizontal","size":"md","source":"\${apiDtoList || thingApiDTOList}","labelField":"name","valueField":"id","onEvent":{"change":{"actions":[{"actionType":"reload","componentId":"u:1cdb908c23a8"},{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:1cdb908c23a8', 'args': {'value': ''} });\\r\\n doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"clearable":true,"horizontal":{"left":2,"right":10},"actionType":"change","target":"u:1cdb908c23a8"},{"type":"select","label":"设备","name":"devices","id":"u:1cdb908c23a8","multiple":false,"mode":"horizontal","size":"md","source":{"url":"/thing/v2/api/telemetryById?id=\${dataSource}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"adaptor":"if (payload && payload.data && payload.data.result) {console.log('payload.data.result', payload.data.result); \\r\\n const list = []\\r\\n const devices = payload.data.result.info \\r\\n for (const key in devices) {\\r\\n const device_info = devices[key] \\r\\n list.push({\\r\\n label: device_info.entityName,\\r\\n value: device_info.entityId,\\r\\n deviceCode: device_info.entityCode,\\r\\n deviceInfo: device_info,\\r\\n attrs: device_info.attrs })\\r\\n }\\r\\n payload.data = list;\\r\\n return payload\\r\\n}","sendOn":"this.dataSource"},"onEvent":{"change":{"actions":[{"actionType":"custom","script":"const selectedItems = event.data.selectedItems;\\r\\n if(selectedItems) { doAction({actionType: 'setValue', componentId: 'u:51f0e51abd7c', args: { value: { attrs: selectedItems.attrs, deviceCode: selectedItems.deviceCode } } }); }"},{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"responseData":{"&":"$$","list":"\${items}"},"clearable":true,"horizontal":{"left":2,"right":10}},{"type":"select","label":"数据点","name":"dataPoint","id":"u:8147daea685d","multiple":true,"mode":"horizontal","size":"md","source":{"url":"/thing/v2/api/callDict?id=\${dataSource}&entityId=\${devices}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"sendOn":"this.dataSource && this.devices","adaptor":"const list = payload.data.map(item => {\\r\\n item.dictName = item.dictName + ' - ' + item.dictCode\\r\\n return item\\r\\n})\\r\\npayload.data = list;\\r\\nreturn payload"},"labelField":"dictName","valueField":"dictCode","checkAll":false,"horizontal":{"left":2,"right":10},"overlay":{"width":"350px"},"searchable":true}],"id":"u:51f0e51abd7c","data":{"attrs":[],"deviceCode":"\${deviceCode || ''}"},"submitText":""}],"id":"u:5505e7ef7cab"},{"title":"虚拟变量","body":[{"type":"tpl","tpl":"暂时无虚拟变量可配置","wrapperComponent":"","inline":false,"id":"u:722592249b31"}],"id":"u:b739cc6a6ed7"}],"id":"u:3b446450d643"}],"showCloseButton":true,"showErrorMsg":true,"showLoading":true,"id":"u:f46c2439c983","data":{"&":"\${dataPoint | toJson}","apiDtoList":"\${thingApiDTOList}","myToken":"\${myToken}","myTenantCode":"\${myTenantCode}","myCompanyId":"\${myCompanyId}","dataPointTableIndex":"\${index}"},"onEvent":{"confirm":{"actions":[{"componentId":"dataPointTable","actionType":"setValue","args":{"value":{"dataPoint":"\${event.data | json}"},"index":"\${index}"}}]}}}}]}},"horizontal":{"left":1,"right":11}}],"syncFields":[],"mode":"horizontal","visibleOn":"data.eventAction === 'openLink'"},{"type":"editor","label":"参数计算","name":"dataPointParamsCalculate","id":"u:4d5e749b7f42","visibleOn":"data.eventAction === 'openLink'","className":"text-left m-b-xs","inputClassName":"w-full","language":"javascript","value":"return [\\n {\\n key: \\"\\",\\n value: ''\\n }\\n]"},{"type":"radios","label":"打开方式","name":"openMethod","id":"u:eec4f8737fe8","options":[{"label":"打开新页面","value":"openNewPage"},{"label":"打开到本页","value":"openLocalPage"}],"horizontal":{"leftFixed":"sm"},"mode":"horizontal","visibleOn":"data.eventAction === 'openLink'"},{"type":"radios","label":"下发指令方式","name":"sendCommandMethod","hiddenOn":"data.eventAction !== 'sendCommand'","id":"u:82d9feb7609d","options":[{"label":"配置","value":"config"},{"label":"代码","value":"codes"}],"value":"config"},{"type":"select","label":"选择设备","clearable":"true","name":"selectDevice","id":"u:891bca3a0150","onEvent":{"change":{"actions":[{"componentId":"u:a13b61f23669","actionType":"custom","script":"const select = event.data.selectedItems; \\r\\n doAction({'componentId': 'u:a13b61f23669', 'actionType': 'setValue', 'args': { 'value': { 'device': select }} })"}]}},"hiddenOn":"data.eventAction !== 'sendCommand'","inputClassName":"w-full","multiple":false,"mode":"horizontal","size":"full","source":{"url":"/thing/device/control/list/device","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"}},"labelField":"name","valueField":"id"},{"type":"select","id":"u:42026703278d","label":"选择指令","clearable":"true","name":"selectCommand","onEvent":{"change":{"actions":[{"componentId":"u:a13b61f23669","actionType":"custom","script":"const select = event.data.selectedItems; \\r\\n doAction({'componentId': 'u:a13b61f23669', 'actionType': 'setValue', 'args': { 'value': { 'command': select }} })"}]}},"hiddenOn":"data.eventAction !== 'sendCommand'","multiple":false,"mode":"horizontal","size":"full","source":{"url":"/thing/device/control/list/\${selectDevice}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"sendOn":"this.selectDevice"},"labelField":"name","valueField":"id","inputClassName":"w-full"},{"type":"tpl","id":"u:f0e9dbf83675","hiddenOn":"data.eventAction !== 'sendCommand'","className":"mx-20 text-left","tpl":"function (deviceInfo, command, event){","inline":true,"wrapperComponent":""},{"type":"editor","id":"u:14d8542a2066","hiddenOn":"data.eventAction !== 'sendCommand'","className":"text-left m-b-xs","label":"入参","name":"inputParamsCalculate","inputClassName":"w-full","language":"javascript","onEvent":{"blur":{"actions":[{"actionType":"custom","script":"const func = new Function('paramsList', 'command', event.data.value);\\n const newParams = func(event.data.__super.inputParamsTable || [], event.data.__super.selectCommand);\\n doAction({actionType: 'setValue', componentId: 'u:a13b61f23669', args: { value: { globalInputParamsCalculated: newParams } } });"}]}},"value":"// console.log('deviceInfo', deviceInfo, 'command', command, 'event', event);\\n// 入参提示： deviceInfo -- 设备信息，command -- 指令信息， event -- 事件传参（当前部件所绑定的立即值，或当前部件经过计算后的自定义值）， 入参计算。。。然后返回出参\\nreturn {\\n \\"condition\\": \\"\\",\\n \\"controlId\\": command.id,\\n \\"event\\": event\\n}"},{"type":"grid","id":"u:68833f10e2bf","columns":[{"body":[{"type":"select","label":"请求地址","name":"requestMethod","options":[{"label":"get","value":"get"},{"label":"post","value":"post"},{"label":"put","value":"put"},{"label":"delete","value":"delete"}],"id":"u:7c48788db8af","multiple":false,"hiddenOn":"data.eventAction !== 'sendCommand'","visibleOn":"data.sendCommandMethod === 'config'","mode":"horizontal","size":"full","inputClassName":"w-full","value":"post"}],"id":"u:d9d274b50340"},{"body":[{"type":"input-text","label":false,"name":"requestUrl","id":"u:841b001e3bcd","size":"full","placeholder":"请输入请求地址","hiddenOn":"data.eventAction !== 'sendCommand'","visibleOn":"data.sendCommandMethod === 'config'","value":"/thing/device/control/control"}],"id":"u:c8fab8bb0860"},{"body":[{"type":"input-number","label":"","name":"requestIntervalNumber","keyboard":true,"id":"u:69a53fa6dc9f","step":1,"mode":"inline","placeholder":"请求间隔","hiddenOn":"data.eventAction !== 'sendCommand'","visibleOn":"data.sendCommandMethod === 'config'"},{"type":"select","label":"","name":"requestIntervalUnit","options":[{"label":"秒","value":"second"},{"label":"分","value":"minute"},{"label":"时","value":"hour"},{"label":"天","value":"day"}],"id":"u:69f93c61c28b","multiple":false,"mode":"inline","hiddenOn":"data.eventAction !== 'sendCommand'","visibleOn":"data.sendCommandMethod === 'config'"}],"id":"u:1827f27e041b"}]},{"type":"grid","id":"u:208413b258dc","className":"m-b","columns":[]},{"type":"tpl","id":"u:931d6b4e0374","className":"mx-20 text-left","hiddenOn":"data.eventAction !== 'sendCommand'","visibleOn":"data.sendCommandMethod === 'codes'","tpl":"function (context, service, command, event ){","inline":true,"wrapperComponent":""},{"type":"editor","id":"u:52152e74a360","hiddenOn":"data.eventAction !== 'sendCommand'","className":"text-left","visibleOn":"data.sendCommandMethod === 'codes'","label":"下发指令","name":"commandContent","inputClassName":"w-full","language":"javascript","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","title":"函数入参为：","content":"'context'： logicflow 上下文实例； \\n 'service'： axios 请求实例；"}},{"type":"tpl","id":"u:2bb06db3ddd9","hiddenOn":"data.eventAction !== 'sendCommand'","className":"mx-20 text-left","visibleOn":"data.sendCommandMethod === 'codes'","tpl":"}","inline":true,"wrapperComponent":""},{"type":"input-text","id":"u:efa5bfe4e760","hiddenOn":"data.eventAction !== 'openDialog'","label":"弹框标题","name":"dialogTitle"},{"type":"input-text","label":"弹框内容","name":"dialogContent","id":"u:e1ee364f3318","hiddenOn":"data.eventAction !== 'openDialog'"},{"type":"list-select","label":"指令下一步","name":"commandNext","id":"u:158bf05d1e6b","hiddenOn":"data.eventAction !== 'sendCommand'","multiple":true,"options":[{"label":"显示隐藏","value":"showOrHide"}],"joinValues":false},{"type":"combo","label":"选择变量","name":"operateVariables","id":"u:a4352d57fdad","multiple":true,"mode":"horizontal","visibleOn":"data.eventAction === 'operateVariable'","addable":true,"removable":true,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:f1307c109572"},"items":[{"type":"select","name":"selectedVariable","placeholder":"选择变量","selectMode":"chained","id":"u:309c8645978d","searchable":true,"multiple":false,"size":"full","source":"\${nodesList || graphDataList}","mode":"horizontal","inputClassName":"","className":"","label":false},{"type":"tpl","id":"u:0d7912942b0f","hiddenOn":"data.eventAction !== 'sendCommand'","className":"mx-20 text-left","tpl":"","inline":true,"wrapperComponent":""},{"type":"editor","name":"newValue","id":"u:6811d0fb2211","mode":"horizontal","label":false,"placeholder":"新值","size":"full","language":"javascript","inputControlClassName":"w-full","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top"},"description":"此函数入参包括四个， 按照顺序依次为：inputParamsTable：下发指令的入参；globalInputParamsCalculated： 是下发指令的 ”入参计算“ 返回值；response ：下发指令请求的返回值; event: 事件。 根据此四个变量，计算需要操作的变量新值"}],"strictMode":true,"syncFields":[],"inputClassName":"w-full","size":"full"},{"type":"grid","id":"u:f9985214eb9e","columns":[{"body":[{"type":"editor","name":"showHideNewValue","id":"u:9f2d894d8fc6","mode":"horizontal","label":false,"placeholder":"返回计算后的组件显示和隐藏， 格式为： return { '组件id xxxxx-xxx-xxx': 'show' / 'hide' }","size":"full","language":"javascript","inputControlClassName":"w-full","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top"},"description":"","visibleOn":"data.eventAction === 'showHide'","className":"w-full","inputClassName":"w-full","value":""}],"id":"u:52e0c15d0c8f"}],"className":"m-b"},{"type":"list-select","id":"u:77a71866967a","label":"复制组件ID","name":"allComponentList","mode":"horizontal","visibleOn":"data.eventAction === 'showHide'","multiple":false,"source":"\${nodesList || graphDataList}","onEvent":{"change":{"actions":[{"actionType":"copy","args":{"content":"\${event.data.value}"}}]}}},{"type":"grid","id":"u:7e8dfba20aee","columns":[]}],"id":"u:a13b61f23669","name":"eventsForm","className":"text-left","data":{"globalInputParamsCalculated":[],"device":"\${device}","command":"\${command}"}}],"onEvent":{"confirm":{"actions":[{"componentId":"u:364496dd313b","actionType":"custom","script":"const evType = event.data.eventType || event.data.__super.evType; \\r\\n const index = event.data.__index | event.data.__super.comboIndex; \\r\\n doAction({'componentId': 'u:364496dd313b', 'actionType': 'setValue', 'args': { 'index': index, 'value': { 'config': JSON.stringify(event.data), 'eventType': evType }} })"}]}},"showCloseButton":true,"showErrorMsg":true,"showLoading":true,"id":"u:57f536c19373","size":"lg","type":"dialog","bodyClassName":"setting-events-dialog","name":"settingEventsDialog"}}]}},"label":"动作"},{"type":"checkBox","id":"u:79dadbc61f74","name":"enable","label":"启用"},{"type":"select","label":"用户","name":"users","id":"u:18f4db277518","multiple":true,"source":{"url":"/thing/sys/tenant/user","method":"get","headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"}},"labelField":"realName","valueField":"id","checkAll":false,"clearable":true}],"id":"u:364496dd313b","deleteBtn":{"type":"icon","icon":"fa fa-trash","id":"u:6d4a75088bc2","className":"border-none"}}],"data":{"eventCombo":[{"eventType":"click","enable":false,"config":""},{"eventType":"dblClick","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"},{"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":""}`,r={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true}]',json:`{
|
|
"nodes": [
|
|
{
|
|
"id": "62459966-2658-4f68-b00b-1cebd129d176",
|
|
"type": "custom-form-input",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "62459966-2658-4f68-b00b-1cebd129d176",
|
|
"width": 165,
|
|
"height": 38,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"opacity": 1,
|
|
"showConfirmBtn": true,
|
|
"showSearchIcon": false,
|
|
"confirmText": "确认",
|
|
"confirmBack": "#1984eb",
|
|
"confirmTextColor": "rgba(255, 255, 255, 1)",
|
|
"confirmTextSize": 14,
|
|
"confirmWidth": 50,
|
|
"placeholder": "请输入文本...",
|
|
"placeholderColor": "",
|
|
"inputBackground": "rgba(155, 155, 155, 0.5)",
|
|
"borderWidth": 1,
|
|
"borderRadius": 2,
|
|
"fontSize": 14,
|
|
"showChangeDialog": false,
|
|
"radios": "yes",
|
|
"nodeAlias": "表单输入框",
|
|
"showDefaultValue": false,
|
|
"showUnit": false,
|
|
"valueColor": "rgba(245, 166, 35, 1)",
|
|
"borderColor": "#1984eb",
|
|
"borderStyle": "solid",
|
|
"fontColor": "#1984eb",
|
|
"fontFamily": "Microsoft Yahei",
|
|
"inputTextAlign": "center",
|
|
"fontStyle": "",
|
|
"searchIconColor": "#1296db",
|
|
"inputGradBack": "",
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": "",
|
|
"unit": ""
|
|
},
|
|
"eventsData": {
|
|
"eventCombo": [
|
|
{
|
|
"eventType": "change",
|
|
"enable": false,
|
|
"config": "",
|
|
"users": ""
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,javascript:`const { createApp, createVNode, render } = Vue;
|
|
const app = createApp({})
|
|
const FormInput = {
|
|
template: \`<div :style="getBorderStyle" @click="focus">
|
|
<span v-if="showSearchIcon" :style="getSearchIconStyle(fontSize, iconColor, inputBackground)" >
|
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70%" height="70%">
|
|
<path d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z" :fill="searchIconColor"></path>
|
|
</svg>
|
|
</span>
|
|
<input ref="inputRef" v-model="inputValue" :style="getInputStyle" :placeholder="placeholder" class="scada-form-input" @change="changeDebounced" @input="inputHandler"/>
|
|
<div v-if="showConfirmBtn" :style="getBtnStyle" @click="changeHandler">{{confirmText}}</div>
|
|
</div>\`,
|
|
props: {
|
|
realValue: {
|
|
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: 80
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 35
|
|
},
|
|
lineHeight: {
|
|
type: Number,
|
|
default: 35,
|
|
},
|
|
showConfirmBtn: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showChangeDialog: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
confirmText: {
|
|
type: String,
|
|
default: '确认'
|
|
},
|
|
confirmBack: {
|
|
type: String,
|
|
default: '#1984eb'
|
|
},
|
|
confirmWidth: {
|
|
type: Number,
|
|
default: 70
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请输入文本'
|
|
},
|
|
placeholderColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
inputBackground: {
|
|
type: String,
|
|
default: 'rgba(155, 155, 155, 0.5)'
|
|
},
|
|
inputGradBack: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
borderWidth: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
borderRadius: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: '#1984eb'
|
|
},
|
|
borderStyle: {
|
|
type: String,
|
|
default: 'solid'
|
|
},
|
|
confirmTextColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
inputTextAlign: {
|
|
type: String,
|
|
default: 'center'
|
|
},
|
|
confirmTextSize: {
|
|
type: Number,
|
|
default: 14
|
|
},
|
|
showSearchIcon: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
searchIconColor: {
|
|
type: String,
|
|
default: '#1296db'
|
|
}
|
|
},
|
|
emits: ["change"],
|
|
computed: {
|
|
getBorderStyle() {
|
|
const { width, height, borderWidth, borderRadius, borderColor, borderStyle } = this
|
|
return {
|
|
width: width + 'px',
|
|
height: height + 'px',
|
|
"border-radius": borderRadius + 'px',
|
|
"border-color": borderColor,
|
|
"border-style": borderStyle,
|
|
"border-width": borderWidth + 'px',
|
|
"box-sizing": "border-box",
|
|
"display": "flex"
|
|
}
|
|
},
|
|
getInputStyle() {
|
|
const { width, confirmWidth, inputBackground, inputGradBack, placeholderColor, showConfirmBtn, fontColor, fontSize, fontFamily, fontStyle, inputTextAlign, showSearchIcon } = this;
|
|
const style = {};
|
|
if (fontStyle) {
|
|
if (fontStyle.includes('bold')) {
|
|
style["font-weight"] = 'bolder';
|
|
}
|
|
if (fontStyle.includes('italic')) {
|
|
style["font-style"] = 'italic'
|
|
}
|
|
if (fontStyle.includes('underline,line-through')) {
|
|
style["text-decoration"] = 'underline line-through'
|
|
} else if (fontStyle.includes('line-through,underline')) {
|
|
style["text-decoration"] = 'line-through underline'
|
|
} else if (fontStyle.includes('underline')) {
|
|
style["text-decoration"] = 'underline'
|
|
} else if (fontStyle.includes('line-through')) {
|
|
style["text-decoration"] = 'line-through'
|
|
}
|
|
}
|
|
if (inputGradBack && !inputGradBack.includes('url')) {
|
|
style.background = \`url(\${inputGradBack})\`;
|
|
style.backgroundSize = '100% 100%';
|
|
}
|
|
|
|
let w = width + "px";
|
|
if (showConfirmBtn && !showSearchIcon) {
|
|
w = width - confirmWidth + "px";
|
|
} else if (showSearchIcon && !showConfirmBtn) {
|
|
w = width - 30 + "px"
|
|
} else if (showSearchIcon && showConfirmBtn) {
|
|
w = width - confirmWidth - 30 + "px";
|
|
}
|
|
|
|
return {
|
|
"width": w,
|
|
"background-color": inputBackground,
|
|
"outline": "none",
|
|
"border": "none",
|
|
"font-size": fontSize + "px",
|
|
"color": fontColor,
|
|
"font-family": fontFamily,
|
|
"text-align": inputTextAlign,
|
|
"text-indent": inputTextAlign === "left" ? "5px" : "0px",
|
|
...style,
|
|
}
|
|
},
|
|
getBtnStyle() {
|
|
const { confirmWidth, height, confirmBack, confirmTextColor, fontSize, confirmTextSize } = this;
|
|
return {
|
|
"flex": "0 0 " + confirmWidth + "px",
|
|
"color": confirmTextColor,
|
|
"font-size": confirmTextSize + "px",
|
|
"background-color": confirmBack,
|
|
"text-align": "center",
|
|
"line-height": height + "px",
|
|
"cursor": "pointer",
|
|
}
|
|
},
|
|
getSearchIconStyle: () => (fontSize, iconColor, inputBackground) => {
|
|
return {
|
|
flex: '0 0 30px',
|
|
display: 'flex',
|
|
'justify-content': 'center',
|
|
'align-items': 'center',
|
|
'font-size': fontSize + 'px',
|
|
color: iconColor,
|
|
background: inputBackground
|
|
}
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const { ref, watch } = Vue;
|
|
const inputValue = ref(null);
|
|
const inputRef = ref(null);
|
|
const isInputing = ref(false);
|
|
|
|
const changeCallback = (e) => {
|
|
if (!props.showConfirmBtn) {
|
|
emit("change", e.target.value);
|
|
isInputing.value = false;
|
|
}
|
|
}
|
|
const changeDebounced = window._.debounce(changeCallback, 1000);
|
|
const changeHandler = () => {
|
|
emit("change", inputValue.value);
|
|
isInputing.value = false;
|
|
}
|
|
|
|
watch(() => props.realValue, (val) => {
|
|
if (isInputing.value) {
|
|
return;
|
|
}
|
|
val && (inputValue.value = val);
|
|
}, {
|
|
immediate: true,
|
|
})
|
|
|
|
watch(() => props.placeholderColor, (val) => {
|
|
if (val) {
|
|
const root = document.querySelector(':root');
|
|
root.style.setProperty('--scada-input-placeholder-color', val);
|
|
}
|
|
}, {
|
|
immediate: true
|
|
})
|
|
|
|
const focus = () => {
|
|
setTimeout(() => {
|
|
inputRef.value.focus();
|
|
}, 100)
|
|
}
|
|
|
|
let timeOut = null;
|
|
const inputHandler = () => {
|
|
isInputing.value = true;
|
|
if (!props.showConfirmBtn) {
|
|
if (timeOut) {
|
|
clearTimeout(timeOut)
|
|
}
|
|
timeOut = setTimeout(() => {
|
|
isInputing.value = false;
|
|
}, 5000)
|
|
}
|
|
}
|
|
|
|
return {
|
|
changeDebounced,
|
|
inputValue,
|
|
changeHandler,
|
|
inputRef,
|
|
focus,
|
|
inputHandler,
|
|
}
|
|
}
|
|
}
|
|
|
|
class CustomFormInputNode extends HtmlResize.view {
|
|
oldProperties = {};
|
|
instance = null;
|
|
|
|
setHtml(rootEl) {
|
|
const { properties, width, height, } = this.props.model;
|
|
|
|
const {
|
|
fontColor, fontSize, fontFamily, fontStyle, lineHeight,
|
|
showConfirmBtn, showChangeDialog, confirmText, confirmBack, confirmWidth, placeholder, showSearchIcon, searchIconColor,
|
|
inputBackground, inputGradBack, placeholderColor, borderWidth, borderRadius, borderColor, borderStyle, confirmTextColor, inputTextAlign, confirmTextSize
|
|
} = properties;
|
|
const { model, graphModel } = this.props;
|
|
|
|
const { normalData, eventsData } = properties.dynamic || {};
|
|
let realValue = "";
|
|
if (normalData) {
|
|
realValue = window.resolveScadaNewValue(normalData.defaultValue);
|
|
}
|
|
|
|
const changeHandler = (e) => {
|
|
const findChange = eventsData?.eventCombo.find( i => i.eventType === 'change');
|
|
const cacheToken = sessionStorage.getItem('v1@CacheToken');
|
|
if(!cacheToken) {
|
|
return window.createLoginDialog();
|
|
}
|
|
const tokenParsed = JSON.parse(cacheToken || '{}');
|
|
if (findChange.users && !findChange.users.includes(tokenParsed.userid)) {
|
|
return messageFn('无用户权限')
|
|
}
|
|
graphModel.eventCenter.emit("node:change", {
|
|
data: this.props.model,
|
|
e,
|
|
});
|
|
}
|
|
|
|
|
|
if (this.instance) {
|
|
Object.assign(this.instance.component.props, {
|
|
realValue,
|
|
fontColor,
|
|
fontSize, fontFamily, fontStyle, width, height, lineHeight, showSearchIcon, searchIconColor,
|
|
showConfirmBtn, showChangeDialog, confirmText, confirmBack, confirmWidth, placeholder, placeholderColor,
|
|
inputBackground, inputGradBack, borderWidth, borderRadius, borderColor, borderStyle, confirmTextColor, inputTextAlign, confirmTextSize,
|
|
onChange: changeHandler
|
|
})
|
|
return;
|
|
}
|
|
|
|
|
|
const el = document.createElement('div');
|
|
rootEl.innerHTML = '';
|
|
const instance = createVNode(FormInput, {
|
|
realValue,
|
|
fontColor,
|
|
fontSize, fontFamily, fontStyle, width, height, lineHeight, showSearchIcon, searchIconColor,
|
|
showConfirmBtn, showChangeDialog, confirmText, confirmBack, confirmWidth, placeholder, placeholderColor,
|
|
inputBackground, inputGradBack, borderWidth, borderRadius, borderColor, borderStyle, confirmTextColor, inputTextAlign, confirmTextSize,
|
|
onChange: changeHandler
|
|
})
|
|
instance.appContext = app._context
|
|
render(instance, el)
|
|
rootEl.appendChild(el);
|
|
this.instance = instance;
|
|
}
|
|
|
|
sameProps(properties) {
|
|
const isSame = window._.isEqual(this.oldProperties, properties);
|
|
if (isSame) return true;
|
|
this.oldProperties = properties;
|
|
return false
|
|
}
|
|
|
|
// 生命周期 支持重写���容, 但格式需一致
|
|
shouldUpdate() {
|
|
const { properties } = this.props.model;
|
|
const propertiesBack = window._.cloneDeep(properties);
|
|
// 由于事件change 会给properties 增加一个 event 属性（见目录scadaDashboard/Diagram/useDynamicEventsHandler），会引发属性的改变，导致组件重渲染。
|
|
delete propertiesBack.event;
|
|
if (this.sameProps(propertiesBack)) {
|
|
return false
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
|
|
class CustomFormInputModel 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 || 80;
|
|
this.height = properties.height || 35;
|
|
}
|
|
|
|
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-form-input',
|
|
view: CustomFormInputNode,
|
|
model: CustomFormInputModel,
|
|
})
|
|
|
|
`,css:`:root{\r
|
|
--scada-input-placeholder-color: #999;\r
|
|
}\r
|
|
input.scada-form-input::-webkit-input-placeholder{\r
|
|
color: var(--scada-input-placeholder-color);\r
|
|
}`,fakeData:""},m={id:e,name:a,aliasName:n,image:t,imageType:l,groupName:o,groupType:i,isRemote:!1,isDefault:!0,sectionType:d,config:s,files:r};export{n as aliasName,s as config,m as default,r as files,o as groupName,i as groupType,e as id,t as image,l as imageType,u as isDefault,c as isRemote,a as name,d as sectionType};
|