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.
392 lines
42 KiB
392 lines
42 KiB
const e="2e514e82-e5aa-4822-9fa7-a75b6d003d02",t="horizontal-oval-tank",a="水平圆桶形水箱",n=`<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_3572_10610)">
|
|
<rect class="tb-shape-stroke" opacity="0.1" x="91.5" y="60.5" width="140" height="100" rx="50" fill="#6216FF" fill-opacity="0.02" stroke="#242770" stroke-width="2"/>
|
|
<mask id="mask0_3572_10610" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="63" width="225" height="95">
|
|
<mask id="path-2-inside-1_3572_10610" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5 63.5418C24.4703 64.5896 4.5 85.2127 4.5 110.5C4.5 135.787 24.4703 156.41 49.5 157.458V157.5L180.5 157.5L181.5 157.5C207.457 157.5 228.5 136.457 228.5 110.5C228.5 84.5426 207.457 63.5 181.5 63.5L145.5 63.5L145.428 63.5001L92.5754 63.5001C92.5503 63.5 92.5251 63.5 92.5 63.5H51.5C51.4745 63.5 51.449 63.5 51.4235 63.5001L49.5 63.5001V63.5418Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5 63.5418C24.4703 64.5896 4.5 85.2127 4.5 110.5C4.5 135.787 24.4703 156.41 49.5 157.458V157.5L180.5 157.5L181.5 157.5C207.457 157.5 228.5 136.457 228.5 110.5C228.5 84.5426 207.457 63.5 181.5 63.5L145.5 63.5L145.428 63.5001L92.5754 63.5001C92.5503 63.5 92.5251 63.5 92.5 63.5H51.5C51.4745 63.5 51.449 63.5 51.4235 63.5001L49.5 63.5001V63.5418Z" fill="#7F84FB"/>
|
|
<path class="tb-shape-fill" d="M49.5 63.5418L49.5837 65.54L51.5 65.4598V63.5418H49.5ZM49.5 157.458H51.5V155.54L49.5837 155.46L49.5 157.458ZM49.5 157.5H47.5V159.5H49.5V157.5ZM180.5 157.5V159.5H180.5L180.5 157.5ZM181.5 157.5V155.5H181.5L181.5 157.5ZM181.5 63.5V61.5V63.5ZM145.5 63.5V61.5L145.499 61.5L145.5 63.5ZM145.428 63.5001V65.5001L145.43 65.5001L145.428 63.5001ZM92.5754 63.5001L92.5722 65.5001H92.5754V63.5001ZM51.4235 63.5001V65.5001L51.4267 65.5001L51.4235 63.5001ZM49.5 63.5001V61.5001L47.5 61.5001V63.5001H49.5ZM6.5 110.5C6.5 86.2892 25.6205 66.5432 49.5837 65.54L49.4163 61.5435C23.3201 62.636 2.5 84.1361 2.5 110.5H6.5ZM49.5837 155.46C25.6205 154.457 6.5 134.711 6.5 110.5H2.5C2.5 136.864 23.3201 158.364 49.4164 159.456L49.5837 155.46ZM47.5 157.458V157.5H51.5V157.458H47.5ZM49.5 159.5L180.5 159.5V155.5L49.5 155.5V159.5ZM180.5 159.5L181.5 159.5L181.5 155.5L180.5 155.5L180.5 159.5ZM181.5 159.5C208.562 159.5 230.5 137.562 230.5 110.5H226.5C226.5 135.353 206.353 155.5 181.5 155.5V159.5ZM230.5 110.5C230.5 83.4381 208.562 61.5 181.5 61.5V65.5C206.353 65.5 226.5 85.6472 226.5 110.5H230.5ZM181.5 61.5L145.5 61.5V65.5L181.5 65.5V61.5ZM145.499 61.5L145.427 61.5001L145.43 65.5001L145.501 65.5L145.499 61.5ZM145.428 61.5001L92.5754 61.5001V65.5001L145.428 65.5001V61.5001ZM92.5 65.5C92.5241 65.5 92.5482 65.5 92.5722 65.5001L92.5785 61.5001C92.5523 61.5 92.5262 61.5 92.5 61.5V65.5ZM51.5 65.5H92.5V61.5H51.5V65.5ZM51.4267 65.5001C51.4511 65.5 51.4756 65.5 51.5 65.5V61.5C51.4734 61.5 51.4469 61.5 51.4203 61.5001L51.4267 65.5001ZM51.4235 61.5001L49.5 61.5001V65.5001H51.4235V61.5001ZM47.5 63.5001V63.5418H51.5V63.5001H47.5Z" fill="#242770" mask="url(#path-2-inside-1_3572_10610)"/>
|
|
</mask>
|
|
<g mask="url(#mask0_3572_10610)">
|
|
<rect class="tb-liquid-fill tb-liquid" x="4.5" y="118.5" width="224" height="100" fill="#7A8BFF"/>
|
|
<rect class="tb-liquid-surface tb-liquid" x="4.5" y="118.5" width="224" height="1" fill="#7A8BFF"/>
|
|
<rect class="tb-liquid-surface" x="4.5" y="118.5" width="224" height="1" fill="white" fill-opacity="0.1"/>
|
|
</g>
|
|
<mask id="path-6-inside-2_3572_10610" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5 59.5385C22.2605 60.5889 0.499999 83.0032 0.499998 110.5C0.499999 137.997 22.2605 160.411 49.5 161.461L49.5 161.5L51.4679 161.5C51.4786 161.5 51.4893 161.5 51.5 161.5L92.5 161.5C92.5116 161.5 92.5233 161.5 92.5349 161.5L141.468 161.5L141.5 161.5L181.5 161.5C209.667 161.5 232.5 138.667 232.5 110.5C232.5 82.3335 209.667 59.5 181.5 59.5L180.5 59.5L141.5 59.5L92.5 59.5L51.5 59.5L49.5 59.5L49.5 59.5385Z"/>
|
|
</mask>
|
|
<path class="tb-shape-fill" d="M0.499998 110.5L-1.5 110.5L0.499998 110.5ZM49.5 59.5385L49.5771 61.537L51.5 61.4629L51.5 59.5385L49.5 59.5385ZM49.5 161.461L51.5 161.461L51.5 159.537L49.5771 159.463L49.5 161.461ZM49.5 161.5L47.5 161.5L47.5 163.5L49.5 163.5L49.5 161.5ZM51.4679 161.5L51.4692 159.5L51.4679 159.5L51.4679 161.5ZM51.5 161.5L51.5 163.5L51.5 161.5ZM92.5 161.5L92.5 163.5L92.5 161.5ZM92.5349 161.5L92.5349 159.5L92.5335 159.5L92.5349 161.5ZM141.468 161.5L141.468 159.5L141.468 159.5L141.468 161.5ZM141.5 161.5L141.499 163.5L141.5 163.5L141.5 161.5ZM181.5 161.5L181.5 163.5L181.5 161.5ZM181.5 59.5L181.5 61.5L181.5 61.5L181.5 59.5ZM180.5 59.5L180.5 57.5L180.5 57.5L180.5 59.5ZM141.5 59.5L141.5 57.5L141.5 59.5ZM92.5 59.5L92.5 61.5L92.5 59.5ZM51.5 59.5L51.5 57.5L51.5 59.5ZM49.5 59.5L49.5 57.5L47.5 57.5L47.5 59.5L49.5 59.5ZM2.5 110.5C2.5 84.082 23.4072 62.5462 49.5771 61.537L49.4229 57.54C21.1138 58.6316 -1.5 81.9245 -1.5 110.5L2.5 110.5ZM49.5771 159.463C23.4072 158.454 2.5 136.918 2.5 110.5L-1.5 110.5C-1.5 139.076 21.1138 162.368 49.4229 163.46L49.5771 159.463ZM47.5 161.461L47.5 161.5L51.5 161.5L51.5 161.461L47.5 161.461ZM49.5 163.5L51.4679 163.5L51.4679 159.5L49.5 159.5L49.5 163.5ZM51.5 159.5C51.4897 159.5 51.4795 159.5 51.4692 159.5L51.4667 163.5C51.4778 163.5 51.4889 163.5 51.5 163.5L51.5 159.5ZM92.5 159.5L51.5 159.5L51.5 163.5L92.5 163.5L92.5 159.5ZM92.5335 159.5C92.5224 159.5 92.5112 159.5 92.5 159.5L92.5 163.5C92.5121 163.5 92.5242 163.5 92.5362 163.5L92.5335 159.5ZM92.5349 163.5L141.468 163.5L141.468 159.5L92.5349 159.5L92.5349 163.5ZM141.467 163.5L141.499 163.5L141.501 159.5L141.468 159.5L141.467 163.5ZM141.5 163.5L181.5 163.5L181.5 159.5L141.5 159.5L141.5 163.5ZM181.5 163.5C210.771 163.5 234.5 139.771 234.5 110.5L230.5 110.5C230.5 137.562 208.562 159.5 181.5 159.5L181.5 163.5ZM234.5 110.5C234.5 81.2289 210.771 57.5 181.5 57.5L181.5 61.5C208.562 61.5 230.5 83.438 230.5 110.5L234.5 110.5ZM181.5 57.5L180.5 57.5L180.5 61.5L181.5 61.5L181.5 57.5ZM180.5 57.5L141.5 57.5L141.5 61.5L180.5 61.5L180.5 57.5ZM141.5 57.5L92.5 57.5L92.5 61.5L141.5 61.5L141.5 57.5ZM51.5 61.5L92.5 61.5L92.5 57.5L51.5 57.5L51.5 61.5ZM51.5 57.5L49.5 57.5L49.5 61.5L51.5 61.5L51.5 57.5ZM47.5 59.5L47.5 59.5385L51.5 59.5385L51.5 59.5L47.5 59.5Z" fill="#242770" mask="url(#path-6-inside-2_3572_10610)"/>
|
|
<rect class="tb-shape-stroke" x="1.5" y="60.5" width="141" height="100" rx="50" stroke="#242770" stroke-width="2"/>
|
|
<mask id="path-9-inside-3_3572_10610" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.5 43.5H138.5V61.5C138.5 63.1569 144.992 64.5 153 64.5C161.008 64.5 167.5 63.1569 167.5 61.5V43.5Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.5 43.5H138.5V61.5C138.5 63.1569 144.992 64.5 153 64.5C161.008 64.5 167.5 63.1569 167.5 61.5V43.5Z"/>
|
|
<path class="tb-shape-fill" d="M138.5 43.5V41.5H136.5V43.5H138.5ZM167.5 43.5H169.5V41.5H167.5V43.5ZM138.5 45.5H167.5V41.5H138.5V45.5ZM140.5 61.5V43.5H136.5V61.5H140.5ZM153 62.5C149.09 62.5 145.607 62.1707 143.152 61.6628C141.908 61.4055 141.034 61.1232 140.518 60.8712C140.257 60.7431 140.191 60.6721 140.217 60.6982C140.248 60.7304 140.5 61.0048 140.5 61.5H136.5C136.5 62.4095 136.954 63.0882 137.373 63.511C137.785 63.9277 138.289 64.2334 138.761 64.4643C139.713 64.9301 140.962 65.2943 142.342 65.5798C145.135 66.1577 148.902 66.5 153 66.5V62.5ZM165.5 61.5C165.5 61.0048 165.752 60.7304 165.783 60.6982C165.809 60.6721 165.743 60.7431 165.482 60.8712C164.966 61.1232 164.092 61.4055 162.848 61.6628C160.393 62.1707 156.91 62.5 153 62.5V66.5C157.098 66.5 160.865 66.1577 163.658 65.5798C165.038 65.2943 166.287 64.9301 167.239 64.4643C167.711 64.2334 168.215 63.9277 168.627 63.511C169.046 63.0882 169.5 62.4095 169.5 61.5H165.5ZM165.5 43.5V61.5H169.5V43.5H165.5Z" fill="#242770" mask="url(#path-9-inside-3_3572_10610)"/>
|
|
<path class="tb-shape-stroke" d="M167.541 44.5C166.866 44.7584 165.141 45.3742 163.77 45.6395C161.045 46.167 157.236 46.5 153 46.5C148.764 46.5 144.955 46.167 142.23 45.6395C140.859 45.3742 139.134 44.7584 138.459 44.5C139.134 44.2416 140.859 43.6258 142.23 43.3605C144.955 42.833 148.764 42.5 153 42.5C157.236 42.5 161.045 42.833 163.77 43.3605C165.141 43.6258 166.866 44.2416 167.541 44.5Z" stroke="#242770" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M167.541 41.5C166.866 41.7584 165.141 42.3742 163.77 42.6395C161.045 43.167 157.236 43.5 153 43.5C148.764 43.5 144.955 43.167 142.23 42.6395C140.859 42.3742 139.134 41.7584 138.459 41.5C139.134 41.2416 140.859 40.6258 142.23 40.3605C144.955 39.833 148.764 39.5 153 39.5C157.236 39.5 161.045 39.833 163.77 40.3605C165.141 40.6258 166.866 41.2416 167.541 41.5Z" stroke="#242770" stroke-width="2"/>
|
|
</g>
|
|
</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": "b33e7492-8b7f-4390-8a5e-99ea8a00568b",
|
|
"type": "horizontal-oval-tank",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "b33e7492-8b7f-4390-8a5e-99ea8a00568b",
|
|
"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": false,
|
|
"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 HorizontalOvalTank = {
|
|
template: \`<div>
|
|
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg" style="stroke: none">
|
|
<g clip-path="url(#clip0_3572_10610)">
|
|
<rect class="tb-shape-stroke" opacity="0.1" x="91.5" y="60.5" width="140" height="100" rx="50" fill="#6216FF" fill-opacity="0.02" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<mask id="mask0_3572_10610" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="63" width="225" height="95">
|
|
<mask id="path-2-inside-1_3572_10610" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5 63.5418C24.4703 64.5896 4.5 85.2127 4.5 110.5C4.5 135.787 24.4703 156.41 49.5 157.458V157.5L180.5 157.5L181.5 157.5C207.457 157.5 228.5 136.457 228.5 110.5C228.5 84.5426 207.457 63.5 181.5 63.5L145.5 63.5L145.428 63.5001L92.5754 63.5001C92.5503 63.5 92.5251 63.5 92.5 63.5H51.5C51.4745 63.5 51.449 63.5 51.4235 63.5001L49.5 63.5001V63.5418Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5 63.5418C24.4703 64.5896 4.5 85.2127 4.5 110.5C4.5 135.787 24.4703 156.41 49.5 157.458V157.5L180.5 157.5L181.5 157.5C207.457 157.5 228.5 136.457 228.5 110.5C228.5 84.5426 207.457 63.5 181.5 63.5L145.5 63.5L145.428 63.5001L92.5754 63.5001C92.5503 63.5 92.5251 63.5 92.5 63.5H51.5C51.4745 63.5 51.449 63.5 51.4235 63.5001L49.5 63.5001V63.5418Z" fill="#7F84FB"/>
|
|
<path class="tb-shape-fill" d="M49.5 63.5418L49.5837 65.54L51.5 65.4598V63.5418H49.5ZM49.5 157.458H51.5V155.54L49.5837 155.46L49.5 157.458ZM49.5 157.5H47.5V159.5H49.5V157.5ZM180.5 157.5V159.5H180.5L180.5 157.5ZM181.5 157.5V155.5H181.5L181.5 157.5ZM181.5 63.5V61.5V63.5ZM145.5 63.5V61.5L145.499 61.5L145.5 63.5ZM145.428 63.5001V65.5001L145.43 65.5001L145.428 63.5001ZM92.5754 63.5001L92.5722 65.5001H92.5754V63.5001ZM51.4235 63.5001V65.5001L51.4267 65.5001L51.4235 63.5001ZM49.5 63.5001V61.5001L47.5 61.5001V63.5001H49.5ZM6.5 110.5C6.5 86.2892 25.6205 66.5432 49.5837 65.54L49.4163 61.5435C23.3201 62.636 2.5 84.1361 2.5 110.5H6.5ZM49.5837 155.46C25.6205 154.457 6.5 134.711 6.5 110.5H2.5C2.5 136.864 23.3201 158.364 49.4164 159.456L49.5837 155.46ZM47.5 157.458V157.5H51.5V157.458H47.5ZM49.5 159.5L180.5 159.5V155.5L49.5 155.5V159.5ZM180.5 159.5L181.5 159.5L181.5 155.5L180.5 155.5L180.5 159.5ZM181.5 159.5C208.562 159.5 230.5 137.562 230.5 110.5H226.5C226.5 135.353 206.353 155.5 181.5 155.5V159.5ZM230.5 110.5C230.5 83.4381 208.562 61.5 181.5 61.5V65.5C206.353 65.5 226.5 85.6472 226.5 110.5H230.5ZM181.5 61.5L145.5 61.5V65.5L181.5 65.5V61.5ZM145.499 61.5L145.427 61.5001L145.43 65.5001L145.501 65.5L145.499 61.5ZM145.428 61.5001L92.5754 61.5001V65.5001L145.428 65.5001V61.5001ZM92.5 65.5C92.5241 65.5 92.5482 65.5 92.5722 65.5001L92.5785 61.5001C92.5523 61.5 92.5262 61.5 92.5 61.5V65.5ZM51.5 65.5H92.5V61.5H51.5V65.5ZM51.4267 65.5001C51.4511 65.5 51.4756 65.5 51.5 65.5V61.5C51.4734 61.5 51.4469 61.5 51.4203 61.5001L51.4267 65.5001ZM51.4235 61.5001L49.5 61.5001V65.5001H51.4235V61.5001ZM47.5 63.5001V63.5418H51.5V63.5001H47.5Z" :fill="finalStrokeColor" mask="url(#path-2-inside-1_3572_10610)"/>
|
|
</mask>
|
|
<g mask="url(#mask0_3572_10610)">
|
|
<g clip-path="url(#clip0_3572_10610)" :id="chartId" style="transform: translateY(42%); transition: all 0.35s ease-in-out;" >
|
|
<rect class="tb-liquid-fill tb-liquid" x="4.5" y="118.5" width="224" height="100" :fill="finalLiquidColor"/>
|
|
<rect class="tb-liquid-surface tb-liquid" x="4.5" y="118.5" width="224" height="1" :fill="finalLiquidColor"/>
|
|
<rect class="tb-liquid-surface" x="4.5" y="118.5" width="224" height="1" fill="white" fill-opacity="0.1"/>
|
|
</g>
|
|
</g>
|
|
<mask id="path-6-inside-2_3572_10610" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5 59.5385C22.2605 60.5889 0.499999 83.0032 0.499998 110.5C0.499999 137.997 22.2605 160.411 49.5 161.461L49.5 161.5L51.4679 161.5C51.4786 161.5 51.4893 161.5 51.5 161.5L92.5 161.5C92.5116 161.5 92.5233 161.5 92.5349 161.5L141.468 161.5L141.5 161.5L181.5 161.5C209.667 161.5 232.5 138.667 232.5 110.5C232.5 82.3335 209.667 59.5 181.5 59.5L180.5 59.5L141.5 59.5L92.5 59.5L51.5 59.5L49.5 59.5L49.5 59.5385Z"/>
|
|
</mask>
|
|
<path class="tb-shape-fill" d="M0.499998 110.5L-1.5 110.5L0.499998 110.5ZM49.5 59.5385L49.5771 61.537L51.5 61.4629L51.5 59.5385L49.5 59.5385ZM49.5 161.461L51.5 161.461L51.5 159.537L49.5771 159.463L49.5 161.461ZM49.5 161.5L47.5 161.5L47.5 163.5L49.5 163.5L49.5 161.5ZM51.4679 161.5L51.4692 159.5L51.4679 159.5L51.4679 161.5ZM51.5 161.5L51.5 163.5L51.5 161.5ZM92.5 161.5L92.5 163.5L92.5 161.5ZM92.5349 161.5L92.5349 159.5L92.5335 159.5L92.5349 161.5ZM141.468 161.5L141.468 159.5L141.468 159.5L141.468 161.5ZM141.5 161.5L141.499 163.5L141.5 163.5L141.5 161.5ZM181.5 161.5L181.5 163.5L181.5 161.5ZM181.5 59.5L181.5 61.5L181.5 61.5L181.5 59.5ZM180.5 59.5L180.5 57.5L180.5 57.5L180.5 59.5ZM141.5 59.5L141.5 57.5L141.5 59.5ZM92.5 59.5L92.5 61.5L92.5 59.5ZM51.5 59.5L51.5 57.5L51.5 59.5ZM49.5 59.5L49.5 57.5L47.5 57.5L47.5 59.5L49.5 59.5ZM2.5 110.5C2.5 84.082 23.4072 62.5462 49.5771 61.537L49.4229 57.54C21.1138 58.6316 -1.5 81.9245 -1.5 110.5L2.5 110.5ZM49.5771 159.463C23.4072 158.454 2.5 136.918 2.5 110.5L-1.5 110.5C-1.5 139.076 21.1138 162.368 49.4229 163.46L49.5771 159.463ZM47.5 161.461L47.5 161.5L51.5 161.5L51.5 161.461L47.5 161.461ZM49.5 163.5L51.4679 163.5L51.4679 159.5L49.5 159.5L49.5 163.5ZM51.5 159.5C51.4897 159.5 51.4795 159.5 51.4692 159.5L51.4667 163.5C51.4778 163.5 51.4889 163.5 51.5 163.5L51.5 159.5ZM92.5 159.5L51.5 159.5L51.5 163.5L92.5 163.5L92.5 159.5ZM92.5335 159.5C92.5224 159.5 92.5112 159.5 92.5 159.5L92.5 163.5C92.5121 163.5 92.5242 163.5 92.5362 163.5L92.5335 159.5ZM92.5349 163.5L141.468 163.5L141.468 159.5L92.5349 159.5L92.5349 163.5ZM141.467 163.5L141.499 163.5L141.501 159.5L141.468 159.5L141.467 163.5ZM141.5 163.5L181.5 163.5L181.5 159.5L141.5 159.5L141.5 163.5ZM181.5 163.5C210.771 163.5 234.5 139.771 234.5 110.5L230.5 110.5C230.5 137.562 208.562 159.5 181.5 159.5L181.5 163.5ZM234.5 110.5C234.5 81.2289 210.771 57.5 181.5 57.5L181.5 61.5C208.562 61.5 230.5 83.438 230.5 110.5L234.5 110.5ZM181.5 57.5L180.5 57.5L180.5 61.5L181.5 61.5L181.5 57.5ZM180.5 57.5L141.5 57.5L141.5 61.5L180.5 61.5L180.5 57.5ZM141.5 57.5L92.5 57.5L92.5 61.5L141.5 61.5L141.5 57.5ZM51.5 61.5L92.5 61.5L92.5 57.5L51.5 57.5L51.5 61.5ZM51.5 57.5L49.5 57.5L49.5 61.5L51.5 61.5L51.5 57.5ZM47.5 59.5L47.5 59.5385L51.5 59.5385L51.5 59.5L47.5 59.5Z" :fill="finalStrokeColor" mask="url(#path-6-inside-2_3572_10610)"/>
|
|
<rect class="tb-shape-stroke" x="1.5" y="60.5" width="141" height="100" rx="50" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<mask id="path-9-inside-3_3572_10610" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.5 43.5H138.5V61.5C138.5 63.1569 144.992 64.5 153 64.5C161.008 64.5 167.5 63.1569 167.5 61.5V43.5Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.5 43.5H138.5V61.5C138.5 63.1569 144.992 64.5 153 64.5C161.008 64.5 167.5 63.1569 167.5 61.5V43.5Z"/>
|
|
<path class="tb-shape-fill" d="M138.5 43.5V41.5H136.5V43.5H138.5ZM167.5 43.5H169.5V41.5H167.5V43.5ZM138.5 45.5H167.5V41.5H138.5V45.5ZM140.5 61.5V43.5H136.5V61.5H140.5ZM153 62.5C149.09 62.5 145.607 62.1707 143.152 61.6628C141.908 61.4055 141.034 61.1232 140.518 60.8712C140.257 60.7431 140.191 60.6721 140.217 60.6982C140.248 60.7304 140.5 61.0048 140.5 61.5H136.5C136.5 62.4095 136.954 63.0882 137.373 63.511C137.785 63.9277 138.289 64.2334 138.761 64.4643C139.713 64.9301 140.962 65.2943 142.342 65.5798C145.135 66.1577 148.902 66.5 153 66.5V62.5ZM165.5 61.5C165.5 61.0048 165.752 60.7304 165.783 60.6982C165.809 60.6721 165.743 60.7431 165.482 60.8712C164.966 61.1232 164.092 61.4055 162.848 61.6628C160.393 62.1707 156.91 62.5 153 62.5V66.5C157.098 66.5 160.865 66.1577 163.658 65.5798C165.038 65.2943 166.287 64.9301 167.239 64.4643C167.711 64.2334 168.215 63.9277 168.627 63.511C169.046 63.0882 169.5 62.4095 169.5 61.5H165.5ZM165.5 43.5V61.5H169.5V43.5H165.5Z" :fill="finalStrokeColor" mask="url(#path-9-inside-3_3572_10610)"/>
|
|
<path class="tb-shape-stroke" d="M167.541 44.5C166.866 44.7584 165.141 45.3742 163.77 45.6395C161.045 46.167 157.236 46.5 153 46.5C148.764 46.5 144.955 46.167 142.23 45.6395C140.859 45.3742 139.134 44.7584 138.459 44.5C139.134 44.2416 140.859 43.6258 142.23 43.3605C144.955 42.833 148.764 42.5 153 42.5C157.236 42.5 161.045 42.833 163.77 43.3605C165.141 43.6258 166.866 44.2416 167.541 44.5Z" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M167.541 41.5C166.866 41.7584 165.141 42.3742 163.77 42.6395C161.045 43.167 157.236 43.5 153 43.5C148.764 43.5 144.955 43.167 142.23 42.6395C140.859 42.3742 139.134 41.7584 138.459 41.5C139.134 41.2416 140.859 40.6258 142.23 40.3605C144.955 39.833 148.764 39.5 153 39.5C157.236 39.5 161.045 39.833 163.77 40.3605C165.141 40.6258 166.866 41.2416 167.541 41.5Z" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
</g>
|
|
</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(20 - (realValue / maxValue * 48));
|
|
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 HorizontalOvalTankNode 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(HorizontalOvalTank, {
|
|
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 HorizontalOvalTankModel 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: 'horizontal-oval-tank',
|
|
view: HorizontalOvalTankNode,
|
|
model: HorizontalOvalTankModel,
|
|
})
|
|
|
|
`,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};
|