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.
470 lines
39 KiB
470 lines
39 KiB
const e="fe873e35-7be4-4ac8-aec8-9f4afbd4e0fd",t="custom-radios-node",a="单选按钮",n='<?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="1700709948418" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4023" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 65.983389c-245.919634 0-446.016611 200.095256-446.016611 446.016611 0 245.952318 200.064292 446.016611 446.016611 446.016611S958.016611 757.952318 958.016611 512C958.016611 266.080366 757.952318 65.983389 512 65.983389zM512 894.016611c-210.655557 0-382.016611-171.392017-382.016611-382.016611 0-210.655557 171.359333-382.016611 382.016611-382.016611 210.624593 0 382.016611 171.359333 382.016611 382.016611C894.016611 722.624593 722.624593 894.016611 512 894.016611z" fill="#707070" p-id="4024"></path><path d="M512 352.00086c-88.223841 0-160.00086 71.775299-160.00086 159.99914s71.775299 160.00086 160.00086 160.00086 160.00086-71.775299 160.00086-160.00086S600.223841 352.00086 512 352.00086z" fill="#707070" p-id="4025"></path></svg>',l="svg",i="基础",o="常用",c=!1,u=!0,s="文字",d=`{"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":16,"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":16,"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":"fieldset","title":"未选中外框","collapsable":true,"body":[{"type":"input-color","label":"边框颜色","name":"unselectedBorderColor","id":"u:1e65f3019268","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"外框背景","name":"unselectedBackColor","id":"u:5ec595ff09fa","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"边框宽度","name":"unselectedBorderWidth","keyboard":true,"id":"u:f4ddfdfcd992","step":1,"value":1,"mode":"horizontal","inputClassName":"w-full","className":"m-b"},{"type":"input-number","label":"外框直径","name":"unselectedDiameter","keyboard":true,"id":"u:88b2fa1cd79c","step":1,"value":16,"mode":"horizontal","inputClassName":"w-full","className":"m-b"}],"id":"u:6074abb701a2","bodyClassName":"m-b"},{"type":"fieldset","title":"已选中外框","collapsable":true,"body":[{"type":"input-color","label":"边框颜色","name":"selectedBorderColor","id":"u:f5d425de2baa","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"外框背景","name":"selectedBackColor","id":"u:c8b1d7ecdc6f","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"边框宽度","name":"selectedBorderWidth","keyboard":true,"id":"u:8d4d2889feec","step":1,"value":1,"mode":"horizontal","inputClassName":"w-full","className":"m-b"},{"type":"input-number","label":"边框直径","name":"selectedDiameter","keyboard":true,"id":"u:64f6d1af395f","step":1,"value":16,"mode":"horizontal","inputClassName":"w-full","className":"m-b"}],"id":"u:abbd40293dc1","bodyClassName":"m-b"},{"type":"fieldset","title":"已选中内框","collapsable":true,"body":[{"type":"input-color","label":"边框颜色","name":"selectedInnerBorderColor","id":"u:48d3c1bd1bf6","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"内框背景","name":"selectedInnerBackColor","id":"u:fa877bb5271c","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"边框宽度","name":"selectedInnerBorderWidth","keyboard":true,"id":"u:555d4566b41d","step":1,"value":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"边框直径","name":"selectedInnerDiameter","keyboard":true,"id":"u:eaa412061a52","step":1,"value":10,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:925e078bc179"},{"type":"grid","columns":[],"id":"u:235f153e5ad5","className":"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"},{"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":"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"},{"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":false,"removable":false,"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","id":"u:fbccd2ccc8a3","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"}]},{"type":"fieldset","id":"u:51249df94c65","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"}],"bodyClassName":"text-left"}],"id":"u:364496dd313b","removableMode":"icon","deleteBtn":{"type":"icon","icon":"fa fa-trash","id":"u:6d4a75088bc2","className":"border-none"},"strictMode":true,"syncFields":[],"labelClassName":""}],"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": "88cbfa0c-7a9e-4da3-b727-a11eda60a3f0",
|
|
"type": "custom-radios-node",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "88cbfa0c-7a9e-4da3-b727-a11eda60a3f0",
|
|
"width": 150,
|
|
"height": 30,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"opacity": 1,
|
|
"unselectedBorderWidth": 1,
|
|
"unselectedDiameter": 16,
|
|
"selectedBorderWidth": 1,
|
|
"selectedDiameter": 16,
|
|
"selectedInnerBorderWidth": 0,
|
|
"selectedInnerDiameter": 10,
|
|
"fontSize": 12,
|
|
"nodeAlias": "单选按钮",
|
|
"showDefaultValue": false,
|
|
"showUnit": false,
|
|
"valueColor": "rgba(245, 166, 35, 1)",
|
|
"unselectedBorderColor": "rgba(155, 155, 155, 1)",
|
|
"unselectedBackColor": "rgba(255, 255, 255, 0)",
|
|
"selectedBorderColor": "rgba(74, 144, 226, 1)",
|
|
"selectedBackColor": "rgba(255, 255, 255, 0)",
|
|
"selectedInnerBorderColor": "rgba(74, 144, 226, 1)",
|
|
"selectedInnerBackColor": "rgba(74, 144, 226, 1)",
|
|
"fontColor": "rgba(74, 74, 74, 1)",
|
|
"fontFamily": "Microsoft Yahei",
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": "",
|
|
"unit": "",
|
|
"dataFilterFn": "return datas",
|
|
"defaultOptions": [
|
|
{
|
|
"label": "电",
|
|
"value": "A29"
|
|
},
|
|
{
|
|
"label": "水",
|
|
"value": "B2"
|
|
}
|
|
]
|
|
},
|
|
"eventsData": {
|
|
"eventCombo": [
|
|
{
|
|
"eventType": "change",
|
|
"enable": false,
|
|
"config": "",
|
|
"customEventHandler": false,
|
|
"targetParamsType": "entitys",
|
|
"targetParamsEntitys": "list"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,javascript:`
|
|
|
|
|
|
|
|
const { createApp, createVNode, render } = Vue;
|
|
const app = createApp({})
|
|
const Radios = {
|
|
template: \`
|
|
<div :style="getStyle">
|
|
<div v-for="(item, index) in myRadioList" :key="item.value" :style="getRadioOuter" @click="clickHandler(item)">
|
|
<input type="radio" :id="'radio' + index" name="radio" :checked="item.checked" :style="getRadioInput"/>
|
|
<label :for="'radio' + index" :style="getRadioLabel(item, myRadioList, unselectedBorderWidth, unselectedBorderColor, unselectedBackColor,
|
|
selectedBorderWidth, selectedBorderColor, selectedBackColor,
|
|
unselectedDiameter, selectedDiameter)">
|
|
<span v-if="item.checked === 'checked'" :style="getCheckedInner"></span>
|
|
<span :style="labelStyle">{{item.label}}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
\`,
|
|
props: {
|
|
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
|
|
},
|
|
unselectedBorderWidth: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
unselectedBorderColor: {
|
|
type: String,
|
|
default: 'rgba(155, 155, 155, 1)'
|
|
},
|
|
unselectedBackColor: {
|
|
type: String,
|
|
default: 'rgba(255, 255, 255, 0)'
|
|
},
|
|
selectedBorderWidth: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
selectedBorderColor: {
|
|
type: String,
|
|
default: 'rgba(74, 144, 226, 1)'
|
|
},
|
|
selectedBackColor: {
|
|
type: String,
|
|
default: 'rgba(255, 255, 255, 0)'
|
|
},
|
|
selectedInnerBorderWidth: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
selectedInnerBorderColor: {
|
|
type: String,
|
|
default: 'rgba(74, 144, 226, 1)'
|
|
},
|
|
selectedInnerBackColor: {
|
|
type: String,
|
|
default: 'rgba(74, 144, 226, 1)'
|
|
},
|
|
unselectedDiameter: {
|
|
type: Number,
|
|
default: 16
|
|
},
|
|
selectedDiameter: {
|
|
type: Number,
|
|
default: 16
|
|
},
|
|
selectedInnerDiameter: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
radioList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
realValue: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
emits: ["change"],
|
|
computed: {
|
|
getStyle() {
|
|
// const { fontColor, fontSize, fontFamily, fontStyle, width, height, lineHeight, backgroundColor,strokeColor,strokeWidth } = this
|
|
const { width, height } = this;
|
|
return {
|
|
width: width + 'px',
|
|
height: height + 'px',
|
|
display: "flex",
|
|
"flex-direction": width > height ? "row" : "column",
|
|
"justify-content": "flex-start",
|
|
"align-items": width > height ? 'center' : 'left'
|
|
}
|
|
},
|
|
getRadioOuter() {
|
|
const { selectedDiameter } = this;
|
|
return {
|
|
position: "relative",
|
|
width: selectedDiameter + 'px',
|
|
height: selectedDiameter + 'px',
|
|
flex: '1',
|
|
}
|
|
},
|
|
getRadioInput() {
|
|
return {
|
|
position: 'absolute',
|
|
visibility: 'hidden'
|
|
}
|
|
},
|
|
labelStyle() {
|
|
const { fontColor, fontSize, fontFamily, fontStyle, selectedDiameter, selectedInnerDiameter } = this;
|
|
const pos = (selectedDiameter - selectedInnerDiameter) / 2;
|
|
|
|
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'
|
|
}
|
|
}
|
|
|
|
|
|
return {
|
|
position: 'absolute',
|
|
top: '0px',
|
|
left: pos + selectedDiameter + 5 + 'px',
|
|
'color': fontColor,
|
|
'font-size': fontSize + 'px',
|
|
'font-family': fontFamily,
|
|
height: '100%',
|
|
display: 'flex',
|
|
'align-items': 'center',
|
|
...style,
|
|
}
|
|
},
|
|
getRadioLabel: () => (item, radioList, unselectedBorderWidth, unselectedBorderColor, unselectedBackColor,
|
|
selectedBorderWidth, selectedBorderColor, selectedBackColor,
|
|
unselectedDiameter, selectedDiameter) => {
|
|
|
|
if (radioList.length > 0) {
|
|
return {
|
|
position: 'absolute',
|
|
left: '0px',
|
|
display: 'inline-block',
|
|
width: item.checked === 'checked' ? selectedDiameter + 'px' : unselectedDiameter + 'px',
|
|
height: item.checked === 'checked' ? selectedDiameter + 'px' : unselectedDiameter + 'px',
|
|
"border-width": item.checked === 'checked' ? selectedBorderWidth + 'px' : unselectedBorderWidth + 'px',
|
|
"border-color": item.checked === 'checked' ? selectedBorderColor : unselectedBorderColor,
|
|
"border-style": "solid",
|
|
'border-radius': item.checked === 'checked' ? (selectedDiameter + 2) / 2 + 'px' : (unselectedDiameter + 2) / 2 + 'px',
|
|
'background-color': item.checked === 'checked' ? selectedBackColor : unselectedBackColor,
|
|
'box-sizing': 'content-box',
|
|
'cursor': 'pointer'
|
|
}
|
|
}
|
|
},
|
|
getCheckedInner() {
|
|
const {
|
|
selectedInnerBorderWidth, selectedInnerBorderColor, selectedInnerBackColor,
|
|
selectedDiameter, selectedInnerDiameter } = this
|
|
const pos = (selectedDiameter - selectedInnerDiameter) / 2 + 'px'
|
|
return {
|
|
position: 'absolute',
|
|
top: pos,
|
|
left: pos,
|
|
width: selectedInnerDiameter + 'px',
|
|
height: selectedInnerDiameter + 'px',
|
|
'border-radius': selectedInnerDiameter / 2 + 'px',
|
|
'background-color': selectedInnerBackColor,
|
|
'border-width': selectedInnerBorderWidth + 'px',
|
|
'border-color': selectedInnerBorderColor,
|
|
'border-style': 'solid',
|
|
'box-sizing': 'border-box'
|
|
}
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const { ref, watch } = Vue
|
|
const myRadioList = ref([])
|
|
const clickHandler = (item) => {
|
|
myRadioList.value.forEach((el) => {
|
|
if (el.value === item.value) {
|
|
el.checked = 'checked';
|
|
} else {
|
|
el.checked = false
|
|
}
|
|
})
|
|
emit("change", item.value);
|
|
}
|
|
|
|
watch(() => props.radioList, (val) => {
|
|
myRadioList.value = val
|
|
}, {
|
|
immediate: true,
|
|
})
|
|
|
|
watch(() => props.realValue, (val) => {
|
|
if (val) {
|
|
myRadioList.value.forEach((el) => {
|
|
if (el.value === String(val)) {
|
|
el.checked = 'checked';
|
|
} else {
|
|
el.checked = false
|
|
}
|
|
})
|
|
}
|
|
}, {
|
|
immediate: true,
|
|
})
|
|
|
|
return {
|
|
clickHandler,
|
|
myRadioList
|
|
}
|
|
}
|
|
}
|
|
|
|
class CustomRadiosNode extends HtmlResize.view {
|
|
oldProperties = {}
|
|
|
|
setHtml(rootEl) {
|
|
const { properties, width, height, } = this.props.model;
|
|
|
|
const { fontColor, fontSize, fontFamily, fontStyle,
|
|
unselectedBorderWidth, unselectedBorderColor, unselectedBackColor,
|
|
selectedBorderWidth, selectedBorderColor, selectedBackColor,
|
|
selectedInnerBorderWidth, selectedInnerBorderColor, selectedInnerBackColor,
|
|
unselectedDiameter, selectedDiameter, selectedInnerDiameter } = properties;
|
|
const { model, graphModel } = this.props;
|
|
const el = document.createElement('div');
|
|
rootEl.innerHTML = '';
|
|
const { normalData } = properties.dynamic || {};
|
|
const { defaultOptions } = normalData || {};
|
|
let list = [];
|
|
if (defaultOptions) {
|
|
let opts = []
|
|
if (typeof defaultOptions !== 'string') {
|
|
opts = defaultOptions
|
|
} else {
|
|
opts = JSON.parse(defaultOptions);
|
|
}
|
|
list = window._.cloneDeep(opts).map((el, index) => {
|
|
if (index === 0) {
|
|
el.checked = 'checked'
|
|
} else {
|
|
el.checked = false
|
|
}
|
|
return el;
|
|
})
|
|
}
|
|
|
|
let realValue = "";
|
|
if (normalData) {
|
|
realValue = window.resolveScadaNewValue(normalData.defaultValue);
|
|
}
|
|
|
|
const changeHandler = (e) => {
|
|
graphModel.eventCenter.emit("node:change", {
|
|
data: this.props.model,
|
|
e,
|
|
});
|
|
}
|
|
|
|
const instance = createVNode(Radios, {
|
|
realValue,
|
|
radioList: list,
|
|
fontColor,
|
|
fontSize, fontFamily, fontStyle, width, height,
|
|
unselectedBorderWidth, unselectedBorderColor, unselectedBackColor,
|
|
selectedBorderWidth, selectedBorderColor, selectedBackColor,
|
|
selectedInnerBorderWidth, selectedInnerBorderColor, selectedInnerBackColor,
|
|
unselectedDiameter, selectedDiameter, selectedInnerDiameter,
|
|
onChange: changeHandler
|
|
})
|
|
instance.appContext = app._context
|
|
render(instance, el)
|
|
rootEl.appendChild(el);
|
|
}
|
|
|
|
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 CustomRadiosModel 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-radios-node',
|
|
view: CustomRadiosNode,
|
|
model: CustomRadiosModel,
|
|
})
|
|
|
|
`,css:`.scada-radio {\r
|
|
position: relative;\r
|
|
width: 16px;\r
|
|
height: 16px;\r
|
|
}\r
|
|
.scada-radio input {\r
|
|
position: absolute;\r
|
|
visibility: hidden\r
|
|
}\r
|
|
.scada-radio label {\r
|
|
position: absolute;\r
|
|
display: inline-block;\r
|
|
width: 16px;\r
|
|
height: 16px;\r
|
|
border: 1px solid #d7d7d7;\r
|
|
border-radius: 9px;\r
|
|
}\r
|
|
/*选中状态*/\r
|
|
.nm-radio input:checked + label {\r
|
|
border: 1px solid #1baede;\r
|
|
}\r
|
|
.nm-radio input:checked + label:before {\r
|
|
content: "";\r
|
|
position: absolute;\r
|
|
top: 3px; left: 3px;\r
|
|
width: 10px;\r
|
|
height: 10px;\r
|
|
border-radius: 5px;\r
|
|
background-color: #1baede;\r
|
|
}`,fakeData:""},m={id:e,name:t,aliasName:a,image:n,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:d,files:r};export{a as aliasName,d as config,m as default,r as files,i as groupName,o as groupType,e as id,n as image,l as imageType,u as isDefault,c as isRemote,t as name,s as sectionType};
|