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.
372 lines
34 KiB
372 lines
34 KiB
const e="885d9154-534d-490b-ba3e-355c8d73d451",t="rectangle-tank",a="矩形水箱",n=`<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path class="tb-shape-stroke" opacity="0.1" d="M10.5 57.5C10.5 53.0817 14.0817 49.5 18.5 49.5H26.5C30.9183 49.5 34.5 53.0817 34.5 57.5V163.5C34.5 167.918 30.9183 171.5 26.5 171.5H18.5C14.0817 171.5 10.5 167.918 10.5 163.5V57.5Z" stroke="#242770" stroke-width="2"/>
|
|
<mask id="mask0_3572_5095" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="13" y="52" width="206" height="117">
|
|
<path d="M13.5 58.5001C13.5 55.1864 16.1863 52.5001 19.5 52.5001L212.5 52.5002C215.814 52.5002 218.5 55.1865 218.5 58.5002V162.5C218.5 165.814 215.814 168.5 212.5 168.5L19.5 168.5C16.1863 168.5 13.5 165.814 13.5 162.5V58.5001Z" fill="#7A8BFF"/>
|
|
</mask>
|
|
<g mask="url(#mask0_3572_5095)">
|
|
<rect class="tb-liquid-fill tb-liquid" x="13.5" y="118.5" width="205" height="116" fill="#7A8BFF"/>
|
|
<rect class="tb-liquid-surface tb-liquid" x="13.5" y="118.5" width="205" height="1" fill="#7A8BFF"/>
|
|
<rect class="tb-liquid-surface" x="13.5" y="118.5" width="205" height="1" fill="white" fill-opacity="0.1"/>
|
|
</g>
|
|
<rect class="tb-shape-stroke" x="10.5" y="49.5" width="211" height="122" rx="8" stroke="#242770" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M197.5 57.5C197.5 53.0817 201.082 49.5 205.5 49.5H213.5C217.918 49.5 221.5 53.0817 221.5 57.5V163.5C221.5 167.918 217.918 171.5 213.5 171.5H205.5C201.082 171.5 197.5 167.918 197.5 163.5V57.5Z" stroke="#242770" stroke-width="2"/>
|
|
<mask id="path-7-inside-1_3572_5095" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.5 32.5H98.5V50.5C98.5 52.1569 104.992 53.5 113 53.5C121.008 53.5 127.5 52.1569 127.5 50.5V32.5Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.5 32.5H98.5V50.5C98.5 52.1569 104.992 53.5 113 53.5C121.008 53.5 127.5 52.1569 127.5 50.5V32.5Z"/>
|
|
<path class="tb-shape-fill" d="M98.5 32.5V30.5H96.5V32.5H98.5ZM127.5 32.5H129.5V30.5H127.5V32.5ZM98.5 34.5H127.5V30.5H98.5V34.5ZM100.5 50.5V32.5H96.5V50.5H100.5ZM113 51.5C109.09 51.5 105.607 51.1707 103.152 50.6628C101.908 50.4055 101.034 50.1232 100.518 49.8712C100.257 49.7431 100.191 49.6721 100.217 49.6982C100.248 49.7304 100.5 50.0048 100.5 50.5H96.5C96.5 51.4095 96.9544 52.0882 97.3726 52.511C97.7847 52.9277 98.2887 53.2334 98.7607 53.4643C99.7129 53.9301 100.962 54.2943 102.342 54.5798C105.135 55.1577 108.902 55.5 113 55.5V51.5ZM125.5 50.5C125.5 50.0048 125.752 49.7304 125.783 49.6982C125.809 49.6721 125.743 49.7431 125.482 49.8712C124.966 50.1232 124.092 50.4055 122.848 50.6628C120.393 51.1707 116.91 51.5 113 51.5V55.5C117.098 55.5 120.865 55.1577 123.658 54.5798C125.038 54.2943 126.287 53.9301 127.239 53.4643C127.711 53.2334 128.215 52.9277 128.627 52.511C129.046 52.0882 129.5 51.4095 129.5 50.5H125.5ZM125.5 32.5V50.5H129.5V32.5H125.5Z" fill="#242770" mask="url(#path-7-inside-1_3572_5095)"/>
|
|
<path class="tb-shape-stroke" d="M127.541 33.5C127.541 33.5 127.54 33.5 127.539 33.5C127.54 33.5 127.541 33.5 127.541 33.5ZM126.866 33.2416C127.077 33.338 127.231 33.4258 127.341 33.5C127.231 33.5742 127.077 33.662 126.866 33.7584C126.187 34.0692 125.141 34.3742 123.77 34.6395C121.045 35.167 117.236 35.5 113 35.5C108.764 35.5 104.955 35.167 102.23 34.6395C100.859 34.3742 99.8132 34.0692 99.1342 33.7584C98.9234 33.662 98.7686 33.5742 98.6586 33.5C98.7686 33.4258 98.9234 33.338 99.1342 33.2416C99.8132 32.9308 100.859 32.6258 102.23 32.3605C104.955 31.833 108.764 31.5 113 31.5C117.236 31.5 121.045 31.833 123.77 32.3605C125.141 32.6258 126.187 32.9308 126.866 33.2416ZM98.4595 33.5C98.4595 33.5 98.4602 33.5 98.4613 33.5C98.46 33.5 98.4594 33.5 98.4595 33.5Z" stroke="#242770" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M127.541 30.5C127.541 30.5 127.54 30.5 127.539 30.5C127.54 30.5 127.541 30.5 127.541 30.5ZM126.866 30.2416C127.077 30.338 127.231 30.4258 127.341 30.5C127.231 30.5742 127.077 30.662 126.866 30.7584C126.187 31.0692 125.141 31.3742 123.77 31.6395C121.045 32.167 117.236 32.5 113 32.5C108.764 32.5 104.955 32.167 102.23 31.6395C100.859 31.3742 99.8132 31.0692 99.1342 30.7584C98.9234 30.662 98.7686 30.5742 98.6586 30.5C98.7686 30.4258 98.9234 30.338 99.1342 30.2416C99.8132 29.9308 100.859 29.6258 102.23 29.3605C104.955 28.833 108.764 28.5 113 28.5C117.236 28.5 121.045 28.833 123.77 29.3605C125.141 29.6258 126.187 29.9308 126.866 30.2416ZM98.4595 30.5C98.4595 30.5 98.4602 30.5 98.4613 30.5C98.46 30.5 98.4594 30.5 98.4595 30.5Z" stroke="#242770" stroke-width="2"/>
|
|
</svg>
|
|
`,l="svg",i="大屏",o="水位",u=!1,c=!0,s="时间",r=`{"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":[],"id":"u:235f153e5ad5","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"描边颜色","name":"strokeColor","id":"u:7783b65d58a9","mode":"horizontal","format":"rgba","inputClassName":"w-full"},{"type":"input-color","label":"液体颜色","name":"liquidColor","id":"u:76fa4643d6bd","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"显示值","option":"","name":"showValue","falseValue":false,"trueValue":true,"id":"u:b52d7cc4b201","value":false,"mode":"horizontal","className":"m-b"}],"id":"u:83905272eb76"}],"id":"u:19e1ffafeb70","className":"m-b"},{"type":"select","id":"u:678a2c313b7f","label":"值类型","name":"valueType","options":[{"label":"百分比","value":"ratio"},{"label":"常规值","value":"normal"}],"multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"grid","id":"u:94b0e20f05da","columns":[{"body":[{"type":"input-color","label":"值颜色","name":"valueColor","id":"u:9b5b55cac08a","format":"rgba","mode":"horizontal","value":"rgba(245, 166, 35, 1)","className":"m-b","inputClassName":"w-full"},{"type":"input-number","label":"值字体大小","name":"valueFontSize","keyboard":true,"id":"u:06950e120b0a","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"最大值","name":"maxValue","keyboard":true,"id":"u:683b1f856544","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"告警值","name":"warnValue","keyboard":true,"id":"u:a8ad2a11c88b","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"告警颜色","name":"warnColor","id":"u:e99642a0f118","format":"rgba","mode":"horizontal","value":"rgba(245, 166, 35, 1)","className":"m-b","inputClassName":"w-full"},{"type":"input-number","label":"严重值","name":"seriousValue","keyboard":true,"id":"u:2401d1c7a03e","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"严重颜色","name":"seriousColor","id":"u:ca0bc3e7cd7b","format":"rgba","mode":"horizontal","value":"rgba(245, 166, 35, 1)","className":"m-b","inputClassName":"w-full"}],"id":"u:ac26ae965c66"}]},{"type":"switch","label":"显示单位","option":"","name":"showUnit","falseValue":false,"trueValue":true,"id":"u:92b92507de26","value":false,"mode":"horizontal","className":"m-b m-t"},{"type":"input-text","label":"单位","name":"unit","id":"u:e545f00b0967","mode":"horizontal"},{"type":"input-color","label":"单位颜色","name":"unitColor","id":"u:ba117b6e3f6f","format":"rgba","mode":"horizontal","value":"rgba(245, 166, 35, 1)","className":"m-b","inputClassName":"w-full"},{"type":"input-number","label":"单位字体大小","name":"unitFontSize","keyboard":true,"id":"u:73f9e15b38a9","step":1,"mode":"horizontal","inputClassName":"w-full"}],"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"}],"id":"u:7b021709614e","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":""}`,d={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true}]',json:`{
|
|
"nodes": [
|
|
{
|
|
"id": "f5249efb-9723-4132-8977-91179790ec59",
|
|
"type": "rectangle-tank",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "f5249efb-9723-4132-8977-91179790ec59",
|
|
"width": 200,
|
|
"height": 200,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"opacity": 1,
|
|
"showValue": true,
|
|
"valueColor": "rgba(74, 144, 226, 1)",
|
|
"warnColor": "rgba(245, 166, 35, 1)",
|
|
"seriousColor": "rgba(208, 2, 27, 1)",
|
|
"showUnit": true,
|
|
"unitColor": "rgba(74, 144, 226, 1)",
|
|
"nodeAlias": "矩形水箱",
|
|
"showDefaultValue": false,
|
|
"fontSize": 12,
|
|
"strokeColor": "#242770",
|
|
"liquidColor": "#7A8BFF",
|
|
"valueType": "ratio",
|
|
"valueFontSize": 16,
|
|
"maxValue": 100,
|
|
"warnValue": 75,
|
|
"seriousValue": 90,
|
|
"unitFontSize": 12,
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": "",
|
|
"unit": ""
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,javascript:`const { createApp, createVNode, render } = Vue;
|
|
const app = createApp({})
|
|
|
|
const defaultVal = 62;
|
|
|
|
const RectangleTank = {
|
|
template: \`<div>
|
|
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg" style="stroke:none">
|
|
<path class="tb-shape-stroke" opacity="0.1" d="M10.5 57.5C10.5 53.0817 14.0817 49.5 18.5 49.5H26.5C30.9183 49.5 34.5 53.0817 34.5 57.5V163.5C34.5 167.918 30.9183 171.5 26.5 171.5H18.5C14.0817 171.5 10.5 167.918 10.5 163.5V57.5Z" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<mask id="mask0_3572_5095" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="13" y="52" width="206" height="117">
|
|
<path d="M13.5 58.5001C13.5 55.1864 16.1863 52.5001 19.5 52.5001L212.5 52.5002C215.814 52.5002 218.5 55.1865 218.5 58.5002V162.5C218.5 165.814 215.814 168.5 212.5 168.5L19.5 168.5C16.1863 168.5 13.5 165.814 13.5 162.5V58.5001Z" fill="#7A8BFF"/>
|
|
</mask>
|
|
<g mask="url(#mask0_3572_5095)">
|
|
<g clip-path="url(#clip0_3572_5095)" :id="chartId" style="transform: translateY(42%); transition: all 0.35s ease-in-out;" >
|
|
<rect class="tb-liquid-fill tb-liquid" x="13.5" y="118.5" width="205" height="116" :fill="finalLiquidColor"/>
|
|
<rect class="tb-liquid-surface tb-liquid" x="13.5" y="118.5" width="205" height="1" :fill="finalLiquidColor"/>
|
|
<rect class="tb-liquid-surface" x="13.5" y="118.5" width="205" height="1" fill="white" fill-opacity="0.1"/>
|
|
</g>
|
|
</g>
|
|
<rect class="tb-shape-stroke" x="10.5" y="49.5" width="211" height="122" rx="8" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M197.5 57.5C197.5 53.0817 201.082 49.5 205.5 49.5H213.5C217.918 49.5 221.5 53.0817 221.5 57.5V163.5C221.5 167.918 217.918 171.5 213.5 171.5H205.5C201.082 171.5 197.5 167.918 197.5 163.5V57.5Z" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<mask id="path-7-inside-1_3572_5095" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.5 32.5H98.5V50.5C98.5 52.1569 104.992 53.5 113 53.5C121.008 53.5 127.5 52.1569 127.5 50.5V32.5Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.5 32.5H98.5V50.5C98.5 52.1569 104.992 53.5 113 53.5C121.008 53.5 127.5 52.1569 127.5 50.5V32.5Z"/>
|
|
<path class="tb-shape-fill" d="M98.5 32.5V30.5H96.5V32.5H98.5ZM127.5 32.5H129.5V30.5H127.5V32.5ZM98.5 34.5H127.5V30.5H98.5V34.5ZM100.5 50.5V32.5H96.5V50.5H100.5ZM113 51.5C109.09 51.5 105.607 51.1707 103.152 50.6628C101.908 50.4055 101.034 50.1232 100.518 49.8712C100.257 49.7431 100.191 49.6721 100.217 49.6982C100.248 49.7304 100.5 50.0048 100.5 50.5H96.5C96.5 51.4095 96.9544 52.0882 97.3726 52.511C97.7847 52.9277 98.2887 53.2334 98.7607 53.4643C99.7129 53.9301 100.962 54.2943 102.342 54.5798C105.135 55.1577 108.902 55.5 113 55.5V51.5ZM125.5 50.5C125.5 50.0048 125.752 49.7304 125.783 49.6982C125.809 49.6721 125.743 49.7431 125.482 49.8712C124.966 50.1232 124.092 50.4055 122.848 50.6628C120.393 51.1707 116.91 51.5 113 51.5V55.5C117.098 55.5 120.865 55.1577 123.658 54.5798C125.038 54.2943 126.287 53.9301 127.239 53.4643C127.711 53.2334 128.215 52.9277 128.627 52.511C129.046 52.0882 129.5 51.4095 129.5 50.5H125.5ZM125.5 32.5V50.5H129.5V32.5H125.5Z" :fill="finalStrokeColor" mask="url(#path-7-inside-1_3572_5095)"/>
|
|
<path class="tb-shape-stroke" d="M127.541 33.5C127.541 33.5 127.54 33.5 127.539 33.5C127.54 33.5 127.541 33.5 127.541 33.5ZM126.866 33.2416C127.077 33.338 127.231 33.4258 127.341 33.5C127.231 33.5742 127.077 33.662 126.866 33.7584C126.187 34.0692 125.141 34.3742 123.77 34.6395C121.045 35.167 117.236 35.5 113 35.5C108.764 35.5 104.955 35.167 102.23 34.6395C100.859 34.3742 99.8132 34.0692 99.1342 33.7584C98.9234 33.662 98.7686 33.5742 98.6586 33.5C98.7686 33.4258 98.9234 33.338 99.1342 33.2416C99.8132 32.9308 100.859 32.6258 102.23 32.3605C104.955 31.833 108.764 31.5 113 31.5C117.236 31.5 121.045 31.833 123.77 32.3605C125.141 32.6258 126.187 32.9308 126.866 33.2416ZM98.4595 33.5C98.4595 33.5 98.4602 33.5 98.4613 33.5C98.46 33.5 98.4594 33.5 98.4595 33.5Z" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M127.541 30.5C127.541 30.5 127.54 30.5 127.539 30.5C127.54 30.5 127.541 30.5 127.541 30.5ZM126.866 30.2416C127.077 30.338 127.231 30.4258 127.341 30.5C127.231 30.5742 127.077 30.662 126.866 30.7584C126.187 31.0692 125.141 31.3742 123.77 31.6395C121.045 32.167 117.236 32.5 113 32.5C108.764 32.5 104.955 32.167 102.23 31.6395C100.859 31.3742 99.8132 31.0692 99.1342 30.7584C98.9234 30.662 98.7686 30.5742 98.6586 30.5C98.7686 30.4258 98.9234 30.338 99.1342 30.2416C99.8132 29.9308 100.859 29.6258 102.23 29.3605C104.955 28.833 108.764 28.5 113 28.5C117.236 28.5 121.045 28.833 123.77 29.3605C125.141 29.6258 126.187 29.9308 126.866 30.2416ZM98.4595 30.5C98.4595 30.5 98.4602 30.5 98.4613 30.5C98.46 30.5 98.4594 30.5 98.4595 30.5Z" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
</svg>
|
|
<div :style="getTitleStyle">
|
|
<div>
|
|
<span :style="valueStyle">{{valueStr}}</span><span :style="unitStyle">{{unitStr}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
\`,
|
|
props: {
|
|
chartId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
currentData: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 350
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 150
|
|
},
|
|
chartProps: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
thingName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
attr: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
unit: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
computed: {
|
|
getTitleStyle() {
|
|
return {
|
|
position: 'absolute',
|
|
top: '0px',
|
|
bottom: \`0px\`,
|
|
width: '100%',
|
|
zIndex: 100,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}
|
|
}
|
|
},
|
|
setup(props) {
|
|
const { computed, ref, watch, toRefs, nextTick } = Vue;
|
|
const { chartProps, currentData, thingName, attr, width, height } = toRefs(props);
|
|
|
|
let valueStr = ref('');
|
|
let unitStr = ref('');
|
|
let finalLiquidColor = ref('#7A8BFF');
|
|
let finalStrokeColor = ref("#242770");
|
|
|
|
const updateChart = (realValue, properties) => {
|
|
const { warnValue, seriousValue, maxValue, warnColor, seriousColor, showValue, valueType, showUnit, unit, liquidColor, strokeColor } = properties;
|
|
const ratio = (realValue / maxValue * 100).toFixed(2);
|
|
if (showValue) {
|
|
if (valueType === 'ratio') {
|
|
valueStr.value = ratio + ''
|
|
showUnit && (unitStr.value = '%')
|
|
} else {
|
|
valueStr.value = realValue + ''
|
|
showUnit && (unitStr.value = unit)
|
|
}
|
|
}
|
|
finalLiquidColor.value = liquidColor;
|
|
finalStrokeColor.value = strokeColor;
|
|
if (seriousValue && realValue >= seriousValue) {
|
|
finalLiquidColor.value = seriousColor
|
|
} else if (warnValue && realValue >= warnValue) {
|
|
finalLiquidColor.value = warnColor
|
|
}
|
|
setTimeout(() => {
|
|
const tankNode = document.getElementById(props.chartId);
|
|
const liquidLevel = Math.round(25 - (realValue / maxValue * 58));
|
|
tankNode.style.transform = \`translateY(\${liquidLevel}%)\`;
|
|
}, 50)
|
|
}
|
|
|
|
watch([currentData, chartProps], ([val, properties]) => {
|
|
nextTick(() => {
|
|
updateChart(val, properties)
|
|
})
|
|
}, {
|
|
immediate: true,
|
|
deep: true,
|
|
})
|
|
|
|
const valueStyle = computed(() => {
|
|
return {
|
|
color: chartProps.value.valueColor,
|
|
fontSize: chartProps.value.valueFontSize + 'px'
|
|
}
|
|
})
|
|
|
|
const unitStyle = computed(() => {
|
|
return {
|
|
color: chartProps.value.unitColor,
|
|
fontSize: chartProps.value.unitFontSize + 'px',
|
|
marginLeft: '3px'
|
|
}
|
|
})
|
|
|
|
return {
|
|
valueStyle,
|
|
unitStyle,
|
|
valueStr,
|
|
unitStr,
|
|
finalLiquidColor,
|
|
finalStrokeColor,
|
|
}
|
|
}
|
|
}
|
|
|
|
class RectangleTankNode extends HtmlResize.view {
|
|
realValue = defaultVal
|
|
oldProperties = {}
|
|
chartRendered = false
|
|
instance = null
|
|
|
|
setHtml(rootEl) {
|
|
if (!rootEl) return;
|
|
const { properties, width, height } = this.props.model;
|
|
const { normalData } = properties.dynamic || {}
|
|
let thingName = 'pressure';
|
|
let attr = 'score';
|
|
if (normalData && normalData.dataPoint) {
|
|
const dataPointStrParsed = JSON.parse(normalData.dataPoint || '{}')
|
|
const { deviceCode, dataPoint } = dataPointStrParsed;
|
|
thingName = deviceCode;
|
|
attr = dataPoint.split(',')[0];
|
|
}
|
|
if (this.instance) {
|
|
// 实时数据不能推送一次就创建一次图表，可以在原有实例基础之上更改数据。
|
|
Object.assign(this.instance.component.props, {
|
|
name: properties.nodeAlias,
|
|
chartId: \`liquidlevel-\${properties.id}\`,
|
|
currentData: this.realValue,
|
|
width,
|
|
height,
|
|
chartProps: properties,
|
|
thingName,
|
|
attr,
|
|
})
|
|
return
|
|
}
|
|
const el = document.createElement('div');
|
|
rootEl.innerHTML = '';
|
|
const instance = createVNode(RectangleTank, {
|
|
name: properties.nodeAlias,
|
|
chartId: \`liquidLevel-\${properties.id}\`,
|
|
currentData: this.realValue,
|
|
width,
|
|
height,
|
|
chartProps: properties,
|
|
thingName,
|
|
attr,
|
|
})
|
|
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 { normalData } = properties.dynamic || {};
|
|
|
|
if (normalData && !normalData.dataPoint && !normalData.defaultValue) {
|
|
this.realValue = defaultVal;
|
|
return true
|
|
}
|
|
|
|
if (normalData) {
|
|
const { defaultValue } = normalData || {};
|
|
if (defaultValue) {
|
|
const realValue = window.resolveScadaNewValue(defaultValue)
|
|
if (this.realValue !== Number(realValue)) {
|
|
this.realValue = Number(realValue);
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
|
|
const propertiesBack = window._.cloneDeep(properties);
|
|
if (propertiesBack.dynamic.normalData) {
|
|
const isSameProps = this.sameProps(propertiesBack);
|
|
if (isSameProps && this.chartRendered) {
|
|
return false
|
|
} else {
|
|
if (!this.chartRendered) {
|
|
this.chartRendered = true
|
|
return true
|
|
}
|
|
if (!isSameProps) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
updateHtml() {
|
|
this.setHtml(this.rootEl);
|
|
}
|
|
|
|
componentDidMount() {
|
|
// 防止拖动时候频繁渲染图表
|
|
this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500);
|
|
if (this.shouldUpdate()) {
|
|
this.setHtml(this.rootEl);
|
|
}
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
if (this.shouldUpdate()) {
|
|
this.updateHtmlDebounced();
|
|
}
|
|
}
|
|
}
|
|
|
|
class RectangleTankModel 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;
|
|
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: 'rectangle-tank',
|
|
view: RectangleTankNode,
|
|
model: RectangleTankModel,
|
|
})`,css:"",fakeData:""},p={id:e,name:t,aliasName:a,image:n,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:r,files:d};export{a as aliasName,r as config,p as default,d as files,i as groupName,o as groupType,e as id,n as image,l as imageType,c as isDefault,u as isRemote,t as name,s as sectionType};
|