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.
374 lines
33 KiB
374 lines
33 KiB
const e="6623c8bb-a64f-4dc5-a329-b553cad49768",t="horizontal-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="11.5" y="47.5" width="210" height="126" rx="63" fill="#6216FF" fill-opacity="0" stroke="#242770" stroke-width="2"/>
|
|
<mask id="mask0_3572_1208" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="50" width="205" height="121">
|
|
<rect class="tb-shape-stroke" x="15.5" y="51.5" width="202" height="118" rx="59" fill="#F1F1F9" stroke="#242770" stroke-width="2"/>
|
|
</mask>
|
|
<g mask="url(#mask0_3572_1208)">
|
|
<rect class="tb-liquid-fill tb-liquid" x="14.5" y="118.5" width="205" height="120" fill="#7A8BFF"/>
|
|
<rect class="tb-liquid-surface tb-liquid" x="14.5" y="118.5" width="205" height="1" fill="#7A8BFF"/>
|
|
<rect class="tb-liquid-surface" x="14.5" y="118.5" width="205" height="1" fill="white" fill-opacity="0.1"/>
|
|
</g>
|
|
<path class="tb-shape-stroke" d="M72.5 47.5C60.426 66.5757 43.5225 118.482 72.5 173.5" stroke="#242770" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M160.5 47.5C148.426 66.5757 131.522 118.482 160.5 173.5" stroke="#242770" stroke-width="2"/>
|
|
<mask id="path-7-inside-1_3572_1208" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.5 30.5H99.5V48.5C99.5 50.1569 105.992 51.5 114 51.5C122.008 51.5 128.5 50.1569 128.5 48.5V30.5Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.5 30.5H99.5V48.5C99.5 50.1569 105.992 51.5 114 51.5C122.008 51.5 128.5 50.1569 128.5 48.5V30.5Z"/>
|
|
<path class="tb-shape-fill" d="M99.5 30.5V28.5H97.5V30.5H99.5ZM128.5 30.5H130.5V28.5H128.5V30.5ZM99.5 32.5H128.5V28.5H99.5V32.5ZM101.5 48.5V30.5H97.5V48.5H101.5ZM114 49.5C110.09 49.5 106.607 49.1707 104.152 48.6628C102.908 48.4055 102.034 48.1232 101.518 47.8712C101.257 47.7431 101.191 47.6721 101.217 47.6982C101.248 47.7304 101.5 48.0048 101.5 48.5H97.5C97.5 49.4095 97.9544 50.0882 98.3726 50.511C98.7847 50.9277 99.2887 51.2334 99.7607 51.4643C100.713 51.9301 101.962 52.2943 103.342 52.5798C106.135 53.1577 109.902 53.5 114 53.5V49.5ZM126.5 48.5C126.5 48.0048 126.752 47.7304 126.783 47.6982C126.809 47.6721 126.743 47.7431 126.482 47.8712C125.966 48.1232 125.092 48.4055 123.848 48.6628C121.393 49.1707 117.91 49.5 114 49.5V53.5C118.098 53.5 121.865 53.1577 124.658 52.5798C126.038 52.2943 127.287 51.9301 128.239 51.4643C128.711 51.2334 129.215 50.9277 129.627 50.511C130.046 50.0882 130.5 49.4095 130.5 48.5H126.5ZM126.5 30.5V48.5H130.5V30.5H126.5Z" fill="#242770" mask="url(#path-7-inside-1_3572_1208)"/>
|
|
<path class="tb-shape-stroke" d="M99.6586 30.95C99.7686 30.8758 99.9234 30.788 100.134 30.6916C100.813 30.3808 101.859 30.1258 103.23 29.8605C105.955 29.383 109.764 29.1 114 29.1C118.236 29.1 122.045 29.383 124.77 29.8605C126.141 30.1258 127.187 30.3808 127.866 30.6916C128.077 30.788 128.231 30.8758 128.341 30.95C128.231 31.0242 128.077 31.112 127.866 31.2084C127.187 31.5192 126.141 31.7742 124.77 32.0395C122.045 32.517 118.236 32.8 114 32.8C109.764 32.8 105.955 32.517 103.23 32.0395C101.859 31.7742 100.813 31.5192 100.134 31.2084C99.9234 31.112 99.7686 31.0242 99.6586 30.95Z" stroke="#242770" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M99.6586 27.95C99.7686 27.8758 99.9234 27.788 100.134 27.6916C100.813 27.3808 101.859 27.1258 103.23 26.8605C105.955 26.383 109.764 26.1 114 26.1C118.236 26.1 122.045 26.383 124.77 26.8605C126.141 27.1258 127.187 27.3808 127.866 27.6916C128.077 27.788 128.231 27.8758 128.341 27.95C128.231 28.0242 128.077 28.112 127.866 28.2084C127.187 28.5192 126.141 28.7742 124.77 29.0395C122.045 29.517 118.236 29.8 114 29.8C109.764 29.8 105.955 29.517 103.23 29.0395C101.859 28.7742 100.813 28.5192 100.134 28.2084C99.9234 28.112 99.7686 28.0242 99.6586 27.95Z" 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": "ef5c97a6-83e8-42df-b149-43597512b798",
|
|
"type": "horizontal-capsule-tank",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "ef5c97a6-83e8-42df-b149-43597512b798",
|
|
"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="11.5" y="47.5" width="210" height="126" rx="63" fill="#6216FF" fill-opacity="0" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<mask id="mask0_3572_1208" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="50" width="205" height="121">
|
|
<rect class="tb-shape-stroke" x="15.5" y="51.5" width="202" height="118" rx="59" fill="#F1F1F9" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
</mask>
|
|
<g mask="url(#mask0_3572_1208)">
|
|
<g clip-path="url(#clip0_3572_1208)" :id="chartId" style="transform: translateY(42%); transition: all 0.35s ease-in-out;" >
|
|
<rect class="tb-liquid-fill tb-liquid" x="14.5" y="118.5" width="205" height="120" :fill="finalLiquidColor"/>
|
|
<rect class="tb-liquid-surface tb-liquid" x="14.5" y="118.5" width="205" height="1" :fill="finalLiquidColor"/>
|
|
<rect class="tb-liquid-surface" x="14.5" y="118.5" width="205" height="1" fill="white" fill-opacity="0.1"/>
|
|
</g>
|
|
</g>
|
|
<path class="tb-shape-stroke" d="M72.5 47.5C60.426 66.5757 43.5225 118.482 72.5 173.5" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M160.5 47.5C148.426 66.5757 131.522 118.482 160.5 173.5" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<mask id="path-7-inside-1_3572_1208" fill="white">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.5 30.5H99.5V48.5C99.5 50.1569 105.992 51.5 114 51.5C122.008 51.5 128.5 50.1569 128.5 48.5V30.5Z"/>
|
|
</mask>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.5 30.5H99.5V48.5C99.5 50.1569 105.992 51.5 114 51.5C122.008 51.5 128.5 50.1569 128.5 48.5V30.5Z"/>
|
|
<path class="tb-shape-fill" d="M99.5 30.5V28.5H97.5V30.5H99.5ZM128.5 30.5H130.5V28.5H128.5V30.5ZM99.5 32.5H128.5V28.5H99.5V32.5ZM101.5 48.5V30.5H97.5V48.5H101.5ZM114 49.5C110.09 49.5 106.607 49.1707 104.152 48.6628C102.908 48.4055 102.034 48.1232 101.518 47.8712C101.257 47.7431 101.191 47.6721 101.217 47.6982C101.248 47.7304 101.5 48.0048 101.5 48.5H97.5C97.5 49.4095 97.9544 50.0882 98.3726 50.511C98.7847 50.9277 99.2887 51.2334 99.7607 51.4643C100.713 51.9301 101.962 52.2943 103.342 52.5798C106.135 53.1577 109.902 53.5 114 53.5V49.5ZM126.5 48.5C126.5 48.0048 126.752 47.7304 126.783 47.6982C126.809 47.6721 126.743 47.7431 126.482 47.8712C125.966 48.1232 125.092 48.4055 123.848 48.6628C121.393 49.1707 117.91 49.5 114 49.5V53.5C118.098 53.5 121.865 53.1577 124.658 52.5798C126.038 52.2943 127.287 51.9301 128.239 51.4643C128.711 51.2334 129.215 50.9277 129.627 50.511C130.046 50.0882 130.5 49.4095 130.5 48.5H126.5ZM126.5 30.5V48.5H130.5V30.5H126.5Z" :fill="finalStrokeColor" mask="url(#path-7-inside-1_3572_1208)"/>
|
|
<path class="tb-shape-stroke" d="M99.6586 30.95C99.7686 30.8758 99.9234 30.788 100.134 30.6916C100.813 30.3808 101.859 30.1258 103.23 29.8605C105.955 29.383 109.764 29.1 114 29.1C118.236 29.1 122.045 29.383 124.77 29.8605C126.141 30.1258 127.187 30.3808 127.866 30.6916C128.077 30.788 128.231 30.8758 128.341 30.95C128.231 31.0242 128.077 31.112 127.866 31.2084C127.187 31.5192 126.141 31.7742 124.77 32.0395C122.045 32.517 118.236 32.8 114 32.8C109.764 32.8 105.955 32.517 103.23 32.0395C101.859 31.7742 100.813 31.5192 100.134 31.2084C99.9234 31.112 99.7686 31.0242 99.6586 30.95Z" :stroke="finalStrokeColor" stroke-width="2"/>
|
|
<path class="tb-shape-stroke" d="M99.6586 27.95C99.7686 27.8758 99.9234 27.788 100.134 27.6916C100.813 27.3808 101.859 27.1258 103.23 26.8605C105.955 26.383 109.764 26.1 114 26.1C118.236 26.1 122.045 26.383 124.77 26.8605C126.141 27.1258 127.187 27.3808 127.866 27.6916C128.077 27.788 128.231 27.8758 128.341 27.95C128.231 28.0242 128.077 28.112 127.866 28.2084C127.187 28.5192 126.141 28.7742 124.77 29.0395C122.045 29.517 118.236 29.8 114 29.8C109.764 29.8 105.955 29.517 103.23 29.0395C101.859 28.7742 100.813 28.5192 100.134 28.2084C99.9234 28.112 99.7686 28.0242 99.6586 27.95Z" :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(26 - (realValue / maxValue * 60));
|
|
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: 'horizontal-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};
|