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.
375 lines
34 KiB
375 lines
34 KiB
const e="e7651bc9-934d-4686-9936-28ad6ff9cdd9",t="vertical-capsule-tank",a="垂直胶囊水箱",n=`<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect class="tb-shape-stroke" x="58.5" y="199.5" width="178" height="116" rx="58" transform="rotate(-90 58.5 199.5)" fill="#6216FF" fill-opacity="0" stroke="#242770" stroke-width="2"/>
|
|
<mask id="mask0_3572_6660" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="61" y="24" width="111" height="173">
|
|
<rect class="tb-shape-stroke" x="62.5" y="195.5" width="170" height="108" rx="54" transform="rotate(-90 62.5 195.5)" fill="#F1F1F9" stroke="#242770" stroke-width="2"/>
|
|
</mask>
|
|
<g mask="url(#mask0_3572_6660)">
|
|
<rect class="tb-liquid-fill tb-liquid" x="61.5" y="118.5" width="110" height="172" fill="#7A8BFF"/>
|
|
<rect class="tb-liquid-surface tb-liquid" x="61.5" y="118.5" width="110" height="1" fill="#7A8BFF"/>
|
|
<rect class="tb-liquid-surface" x="61.5" y="118.5" width="110" height="1" fill="white" fill-opacity="0.1"/>
|
|
</g>
|
|
<path class="tb-shape-stroke" d="M58 146.5H174" stroke="#242770" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M59 74.5H175" stroke="#242770" stroke-width="2"/>
|
|
<mask id="path-7-inside-1_3572_6660" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 5.5H102.5V23.5C102.5 25.1569 108.992 26.5 117 26.5C125.008 26.5 131.5 25.1569 131.5 23.5V5.5Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 5.5H102.5V23.5C102.5 25.1569 108.992 26.5 117 26.5C125.008 26.5 131.5 25.1569 131.5 23.5V5.5Z"/>
|
|
<path class="tb-shape-fill" d="M102.5 5.5V3.5H100.5V5.5H102.5ZM131.5 5.5H133.5V3.5H131.5V5.5ZM102.5 7.5H131.5V3.5L102.5 3.5V7.5ZM104.5 23.5V5.5H100.5V23.5H104.5ZM117 24.5C113.09 24.5 109.607 24.1707 107.152 23.6628C105.908 23.4055 105.034 23.1232 104.518 22.8712C104.257 22.7431 104.191 22.6721 104.217 22.6982C104.248 22.7304 104.5 23.0048 104.5 23.5H100.5C100.5 24.4095 100.954 25.0882 101.373 25.511C101.785 25.9277 102.289 26.2334 102.761 26.4643C103.713 26.9301 104.962 27.2943 106.342 27.5798C109.135 28.1577 112.902 28.5 117 28.5V24.5ZM129.5 23.5C129.5 23.0048 129.752 22.7304 129.783 22.6982C129.809 22.6721 129.743 22.7431 129.482 22.8712C128.966 23.1232 128.092 23.4055 126.848 23.6628C124.393 24.1707 120.91 24.5 117 24.5V28.5C121.098 28.5 124.865 28.1577 127.658 27.5798C129.038 27.2943 130.287 26.9301 131.239 26.4643C131.711 26.2334 132.215 25.9277 132.627 25.511C133.046 25.0882 133.5 24.4095 133.5 23.5H129.5ZM129.5 5.5V23.5H133.5V5.5H129.5Z" fill="#242770" mask="url(#path-7-inside-1_3572_6660)"/>
|
|
<path class="tb-shape-stroke" d="M131.541 6.33233C131.54 6.33319 131.541 6.33233 131.541 6.33233ZM130.866 6.24158C131.077 6.33801 131.231 6.42584 131.341 6.5C131.231 6.57417 131.077 6.66199 130.866 6.75842C130.187 7.06915 129.141 7.3742 127.77 7.63954C125.045 8.16703 121.236 8.5 117 8.5C112.764 8.5 108.955 8.16703 106.23 7.63954C104.859 7.3742 103.813 7.06915 103.134 6.75842C102.923 6.66199 102.769 6.57417 102.659 6.5C102.769 6.42583 102.923 6.33801 103.134 6.24158C103.813 5.93085 104.859 5.6258 106.23 5.36046C108.955 4.83297 112.764 4.5 117 4.5C121.236 4.5 125.045 4.83297 127.77 5.36046C129.141 5.6258 130.187 5.93085 130.866 6.24158ZM102.459 6.66767C102.46 6.6668 102.459 6.66767 102.459 6.66767ZM131.539 6.66507C131.54 6.6668 131.541 6.66767 131.541 6.66767C131.541 6.66767 131.54 6.6668 131.539 6.66507Z" stroke="#242770" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M131.541 3.33233C131.54 3.33319 131.541 3.33233 131.541 3.33233ZM130.866 3.24158C131.077 3.33801 131.231 3.42584 131.341 3.5C131.231 3.57417 131.077 3.66199 130.866 3.75842C130.187 4.06915 129.141 4.3742 127.77 4.63954C125.045 5.16703 121.236 5.5 117 5.5C112.764 5.5 108.955 5.16703 106.23 4.63954C104.859 4.3742 103.813 4.06915 103.134 3.75842C102.923 3.66199 102.769 3.57417 102.659 3.5C102.769 3.42583 102.923 3.33801 103.134 3.24158C103.813 2.93085 104.859 2.6258 106.23 2.36046C108.955 1.83297 112.764 1.5 117 1.5C121.236 1.5 125.045 1.83297 127.77 2.36046C129.141 2.6258 130.187 2.93085 130.866 3.24158ZM102.459 3.66767C102.46 3.6668 102.459 3.66767 102.459 3.66767ZM131.539 3.66507C131.54 3.6668 131.541 3.66767 131.541 3.66767C131.541 3.66767 131.54 3.6668 131.539 3.66507Z" 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": "c80c2bf8-4b01-404c-a677-fe21efed0615",
|
|
"type": "vertical-capsule-tank",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "c80c2bf8-4b01-404c-a677-fe21efed0615",
|
|
"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 VerticalCapsuleTank = {
|
|
template: \`<div>
|
|
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg" style="stroke: none">
|
|
<rect class="tb-shape-stroke" x="58.5" y="199.5" width="178" height="116" rx="58" transform="rotate(-90 58.5 199.5)" fill="#6216FF" fill-opacity="0" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<mask id="mask0_3572_6660" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="61" y="24" width="111" height="173">
|
|
<rect class="tb-shape-stroke" x="62.5" y="195.5" width="170" height="108" rx="54" transform="rotate(-90 62.5 195.5)" fill="#F1F1F9" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
</mask>
|
|
<g mask="url(#mask0_3572_6660)">
|
|
<g clip-path="url(#clip0_3572_6660)" :id="chartId" style="transform: translateY(42%); transition: all 0.35s ease-in-out;">
|
|
<rect class="tb-liquid-fill tb-liquid" x="61.5" y="118.5" width="110" height="172" :fill="finalLiquidColor"/>
|
|
<rect class="tb-liquid-surface tb-liquid" x="61.5" y="118.5" width="110" height="1" :fill="finalLiquidColor"/>
|
|
<rect class="tb-liquid-surface" x="61.5" y="118.5" width="110" height="1" fill="white" fill-opacity="0.1"/>
|
|
</g>
|
|
</g>
|
|
<path class="tb-shape-stroke" d="M58 146.5H174" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M59 74.5H175" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<mask id="path-7-inside-1_3572_6660" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 5.5H102.5V23.5C102.5 25.1569 108.992 26.5 117 26.5C125.008 26.5 131.5 25.1569 131.5 23.5V5.5Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 5.5H102.5V23.5C102.5 25.1569 108.992 26.5 117 26.5C125.008 26.5 131.5 25.1569 131.5 23.5V5.5Z"/>
|
|
<path class="tb-shape-fill" d="M102.5 5.5V3.5H100.5V5.5H102.5ZM131.5 5.5H133.5V3.5H131.5V5.5ZM102.5 7.5H131.5V3.5L102.5 3.5V7.5ZM104.5 23.5V5.5H100.5V23.5H104.5ZM117 24.5C113.09 24.5 109.607 24.1707 107.152 23.6628C105.908 23.4055 105.034 23.1232 104.518 22.8712C104.257 22.7431 104.191 22.6721 104.217 22.6982C104.248 22.7304 104.5 23.0048 104.5 23.5H100.5C100.5 24.4095 100.954 25.0882 101.373 25.511C101.785 25.9277 102.289 26.2334 102.761 26.4643C103.713 26.9301 104.962 27.2943 106.342 27.5798C109.135 28.1577 112.902 28.5 117 28.5V24.5ZM129.5 23.5C129.5 23.0048 129.752 22.7304 129.783 22.6982C129.809 22.6721 129.743 22.7431 129.482 22.8712C128.966 23.1232 128.092 23.4055 126.848 23.6628C124.393 24.1707 120.91 24.5 117 24.5V28.5C121.098 28.5 124.865 28.1577 127.658 27.5798C129.038 27.2943 130.287 26.9301 131.239 26.4643C131.711 26.2334 132.215 25.9277 132.627 25.511C133.046 25.0882 133.5 24.4095 133.5 23.5H129.5ZM129.5 5.5V23.5H133.5V5.5H129.5Z" :fill="finalStrokeColor" mask="url(#path-7-inside-1_3572_6660)"/>
|
|
<path class="tb-shape-stroke" d="M131.541 6.33233C131.54 6.33319 131.541 6.33233 131.541 6.33233ZM130.866 6.24158C131.077 6.33801 131.231 6.42584 131.341 6.5C131.231 6.57417 131.077 6.66199 130.866 6.75842C130.187 7.06915 129.141 7.3742 127.77 7.63954C125.045 8.16703 121.236 8.5 117 8.5C112.764 8.5 108.955 8.16703 106.23 7.63954C104.859 7.3742 103.813 7.06915 103.134 6.75842C102.923 6.66199 102.769 6.57417 102.659 6.5C102.769 6.42583 102.923 6.33801 103.134 6.24158C103.813 5.93085 104.859 5.6258 106.23 5.36046C108.955 4.83297 112.764 4.5 117 4.5C121.236 4.5 125.045 4.83297 127.77 5.36046C129.141 5.6258 130.187 5.93085 130.866 6.24158ZM102.459 6.66767C102.46 6.6668 102.459 6.66767 102.459 6.66767ZM131.539 6.66507C131.54 6.6668 131.541 6.66767 131.541 6.66767C131.541 6.66767 131.54 6.6668 131.539 6.66507Z" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M131.541 3.33233C131.54 3.33319 131.541 3.33233 131.541 3.33233ZM130.866 3.24158C131.077 3.33801 131.231 3.42584 131.341 3.5C131.231 3.57417 131.077 3.66199 130.866 3.75842C130.187 4.06915 129.141 4.3742 127.77 4.63954C125.045 5.16703 121.236 5.5 117 5.5C112.764 5.5 108.955 5.16703 106.23 4.63954C104.859 4.3742 103.813 4.06915 103.134 3.75842C102.923 3.66199 102.769 3.57417 102.659 3.5C102.769 3.42583 102.923 3.33801 103.134 3.24158C103.813 2.93085 104.859 2.6258 106.23 2.36046C108.955 1.83297 112.764 1.5 117 1.5C121.236 1.5 125.045 1.83297 127.77 2.36046C129.141 2.6258 130.187 2.93085 130.866 3.24158ZM102.459 3.66767C102.46 3.6668 102.459 3.66767 102.459 3.66767ZM131.539 3.66507C131.54 3.6668 131.541 3.66767 131.541 3.66767C131.541 3.66767 131.54 3.6668 131.539 3.66507Z" :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(39 - (realValue / maxValue * 85));
|
|
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 VerticalCapsuleTankNode 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(VerticalCapsuleTank, {
|
|
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 VerticalCapsuleTankModel 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: 'vertical-capsule-tank',
|
|
view: VerticalCapsuleTankNode,
|
|
model: VerticalCapsuleTankModel,
|
|
})
|
|
|
|
`,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};
|