const e="e640d3bc-3f8e-4a5c-8c86-1d1fd8ba00fb",a="custom-liquidball-node",t="水球图",n='',l="svg",i="动态",o="图表组件",c=!1,u=!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:ef5ffa6a88c9","body":[{"type":"select","label":"水球类型","name":"liquidType","options":[{"label":"水球","value":"liquidball"},{"label":"水池","value":"liquidpool"}],"id":"u:c9431703bb08","multiple":false,"mode":"horizontal","inputClassName":"w-full"}]},{"body":[{"type":"input-color","label":"背景","name":"backgroundColor","id":"u:30202a912590","format":"rgba","mode":"horizontal","className":"m-b"}],"id":"u:a38d5c419b6d"}],"id":"u:9551cf796c65"},{"type":"grid","columns":[],"id":"u:235f153e5ad5","className":"m-b"},{"type":"grid","columns":[],"id":"u:19e1ffafeb70","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"波浪一颜色","name":"waveOneColor","id":"u:6798c84ee558","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"波浪二颜色","name":"waveTwoColor","id":"u:a6a149c5d5ba","format":"rgba","mode":"horizontal","inputClassName":"w-full"}],"id":"u:ac529e000206"}],"id":"u:7f2b5b54f05c","className":"m-b"},{"type":"input-color","label":"边框颜色","name":"borderColor","id":"u:309ce08f0ef2","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"grid","columns":[{"body":[{"type":"input-number","label":"边框宽度","name":"borderWidth","keyboard":true,"id":"u:103bf748355a","step":1,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:d859e8f09748"}],"id":"u:f570acd65aaa","className":"m-b"},{"type":"fieldset","id":"u:2a93d8eee7a9","className":"","title":"字体","collapsable":true,"body":[{"type":"container","id":"u:1606d0ad8360","body":[{"type":"select","id":"u:6f3470628b86","label":"字体类型","name":"fontFamily","mode":"horizontal","horizontal":{"leftFixed":"sm"},"size":"lg","options":[{},{"label":"宋体","value":"SimSun"},{"label":"微软雅黑","value":"Microsoft Yahei"},{"label":"苹方","value":"PingFang SC"},{"label":"Andale Mono","value":"andale mono,monospace"},{"label":"Arial","value":"arial,helvetica,sans-serif"},{"label":"Arial Black","value":"arial black,sans-serif"},{"label":"Book Antiqua","value":"book antiqua,palatino,serif"},{"label":"Comic Sans MS","value":"comic sans ms,sans-serif"},{"label":"Courier New","value":"courier new,courier,monospace"},{"label":"Georgia","value":"georgia,palatino,serif"},{"label":"Helvetica Neue","value":"Helvetica Neue"},{"label":"Helvetica","value":"helvetica,arial,sans-serif"},{"label":"Impact","value":"impact,sans-serif"},{"label":"Symbol","value":"symbol"},{"label":"Tahoma","value":"tahoma,arial,helvetica,sans-serif"},{"label":"Terminal","value":"terminal,monaco,monospace"},{"label":"Times New Roman","value":"times new roman,times,serif"},{"label":"Trebuchet MS","value":"trebuchet ms,geneva,sans-serif"},{"label":"Verdana","value":"verdana,geneva,sans-serif"}],"multiple":false,"className":"m-b","menuTpl":"\${label}","inputClassName":""},{"type":"input-color","label":"字体","name":"fontColor","id":"u:f398c821eda1","mode":"horizontal","size":"lg","className":"m-b","format":"rgba","placeholder":"字体颜色","horizontal":{"leftFixed":"sm"},"inputClassName":""},{"type":"input-range","id":"u:c82d96f42385","label":"字体大小","name":"fontSize","multiple":false,"value":0,"min":0,"max":100,"step":1,"unit":"","tooltipPlacement":"auto","showInput":false,"parts":1,"showSteps":false,"marks":{},"mode":"horizontal","horizontal":{"leftFixed":"sm"},"size":"lg","className":"mb-2","inputClassName":""},{"type":"checkboxes","id":"u:b34f4c274416","className":"custom-checkbox-style m-b","label":"文字样式","name":"fontStyle","options":[{"label":"fa-bold fa","value":"bold"},{"label":"fa-italic fa","value":"italic"},{"label":"fa-underline fa","value":"underline"},{"label":"fa fa-strikethrough","value":"line-through"}],"checkAll":false,"joinValues":true,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"optionType":"button","menuTpl":"","inputClassName":"","multiple":true},{"type":"input-number","label":"字符间距","name":"fontSpace","keyboard":true,"id":"u:d05b551cf67c","step":1,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"displayMode":"enhance","className":"m-b","min":0,"max":50},{"type":"input-number","label":"文字行高","name":"lineHeight","keyboard":true,"id":"u:0063eed6ed66","step":1,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"displayMode":"enhance","className":"m-b","min":12}],"style":{"position":"static","display":"block"},"wrapperBody":false}],"bodyClassName":"m-b"}],"id":"u:a5ebe5f02407","submitText":"","onEvent":{"change":{"weight":0,"actions":[]}},"debug":false,"mode":"normal","panelClassName":"p","labelAlign":"left","className":"","wrapWithPanel":true}],"id":"u:c309ae58472c","className":"p-none no-border"},{"title":"交互","icon":"fa fa-calendar-minus-o","body":[{"type":"service","body":[{"type":"collapse","key":"1","active":true,"header":"常规","body":[{"type":"service","id":"u:6cb6d200ede2","data":{"dataPoint":"","compareType":"","conditionVariables":[],"defaultValue":"","unit":""},"body":[{"type":"input-text","label":"数据点","name":"dataPoint","id":"normalDataPoint","multiple":false,"mode":"horizontal","size":"full","onEvent":{"focus":{"weight":0,"actions":[{"actionType":"dialog","dialog":{"type":"dialog","title":"请配置需要绑定的数据点","body":[{"type":"tabs","tabs":[{"title":"常规数据点","body":[{"type":"form","title":"","body":[{"type":"select","label":"数据源","name":"dataSource","id":"u:c273f087b8ed","mode":"horizontal","multiple":false,"size":"md","horizontal":{"leftFixed":"sm"},"source":"\${apiDtoList || thingApiDTOList}","labelField":"name","valueField":"id","onEvent":{"change":{"actions":[{"actionType":"reload","componentId":"u:1cdb908c23a8"},{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:1cdb908c23a8', 'args': {'value': ''} });\\r\\n doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"clearable":true,"actionType":"change","target":"u:1cdb908c23a8"},{"type":"combo","label":"设备属性","name":"deviceAttrs","id":"u:98559a2dd514","multiple":false,"mode":"horizontal","size":"full","horizontal":{"leftFixed":"sm"},"items":[{"type":"input-table","label":false,"id":"u:41dfc35c368c","name":"table","strictMode":false,"needConfirm":false,"addable":true,"removable":true,"columns":[{"type":"input-text","label":"序号","id":"u:434e22030bc6","name":"num","size":"sm","mode":"horizontal","quickEdit":{"mode":"popOver","id":"u:c6a294f5c93a"},"horizontal":{"left":2,"right":10},"placeholder":"例：A/B/C/AA/BB","width":200},{"type":"select","name":"devices","id":"u:1cdb908c23a8","label":"设备","multiple":false,"mode":"horizontal","quickEdit":true,"size":"sm","source":{"url":"/thing/v2/api/telemetryById?id=\${dataSource}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"adaptor":"if (payload && payload.data && payload.data.result) {console.log('payload.data.result', payload.data.result); \\r\\n const list = []\\r\\n const devices = payload.data.result.info \\r\\n for (const key in devices) {\\r\\n const device_info = devices[key] \\r\\n list.push({\\r\\n label: device_info.entityName,\\r\\n value: device_info.entityId,\\r\\n deviceCode: device_info.entityCode,\\r\\n deviceInfo: device_info,\\r\\n attrs: device_info.attrs })\\r\\n }\\r\\n payload.data = list;\\r\\n return payload\\r\\n}","sendOn":"this.dataSource"},"onEvent":{"change":{"actions":[{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"responseData":{"&":"$$","list":"\${items}"},"clearable":true,"horizontal":{"left":2,"right":10},"checkAll":false},{"type":"select","name":"dataPoint","id":"u:8147daea685d","label":"数据点","multiple":false,"quickEdit":true,"mode":"horizontal","size":"sm","source":{"url":"/thing/v2/api/callDict?id=\${dataSource}&entityId=\${devices}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"sendOn":"this.dataSource && this.devices","adaptor":"const list = payload.data.map(item => {\\r\\n item.dictName = item.dictName + ' - ' + item.dictCode\\r\\n return item\\r\\n})\\r\\npayload.data = list;\\r\\nreturn payload"},"labelField":"dictName","valueField":"dictCode","checkAll":false,"horizontal":{"left":2,"right":10},"overlay":{"width":"350px"},"searchable":true}]}],"strictMode":true,"syncFields":[],"tabsMode":false,"canAccessSuperData":true,"inputClassName":"w-full","className":"m-b-sm"},{"type":"checkbox","label":"数据处理","name":"enableDataHandle","id":"u:034ca60f2135","mode":"horizontal","horizontal":{"leftFixed":"normal"},"option":""},{"type":"combo","id":"u:a06125153fa6","name":"calcRules","label":"计算规则","mode":"horizontal","visibleOn":"this.enableDataHandle","multiple":true,"items":[{"name":"formular","label":"计算公式","type":"input-text","id":"u:318a7f0c6449","placeholder":"例： (A + B) / C","width":"50%","size":"full"},{"name":"resultAttr","label":"计算结果属性","type":"input-text","id":"u:1e6e491ccbaa","placeholder":"例：A8、B、C...","width":"50%"}],"strictMode":true,"syncFields":[],"hidden":false,"inputClassName":"w-full","multiLine":false,"className":"calcRules"},{"type":"input-text","label":"唯一数据点","name":"uniquePoint","id":"u:3b257b599c19","mode":"horizontal","visibleOn":"this.enableDataHandle","editorState":"default","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":"默认值","clearable":true,"name":"defaultValue","id":"u:13ccbc565f5e","mode":"horizontal","size":"full","inputControlClassName":"mb-sm","labelClassName":"mb-sm","className":"m-b-sm"},{"type":"input-text","label":"单位   ","name":"unit","id":"u:0f606558e8c7","mode":"horizontal","size":"full","className":"m-b-sm"},{"type":"input-number","label":"最高值","name":"maxValue","keyboard":true,"id":"u:325ca5a99a26","step":1,"mode":"horizontal","inputClassName":"w-full"}],"name":"normalService","className":"p-none"},{"type":"service","body":[],"id":"u:0dd069ac163f"}],"id":"u:7b021709614e","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"}],"id":"u:3eb6b9a42dcb","name":"dynamicService"}],"id":"u:043251c106af","className":"p-sm"},{"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": "ac05917b-d79b-4e78-952d-62cd68de1fe8", "type": "custom-liquidball-node", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "ac05917b-d79b-4e78-952d-62cd68de1fe8", "width": 230, "height": 230, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "fontSize": 24, "showDefaultValue": false, "showUnit": false, "nodeAlias": "水球图", "fontColor": "#7ed321", "backgroundColor": "#e8e8e8", "waveOneColor": "#80FFA5", "waveTwoColor": "#00DDFF", "borderWidth": 2, "borderColor": "#50e3c2", "liquidType": "liquidball", "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" } } } } ] }`,javascript:`const { createApp, createVNode, render } = Vue; const app = createApp({}) const defaultValue = 100 const defaultMaxValue = 1000 const LiquidBall= { template: \`

{{attr}}

{{getRatio}}
\`, props: { chartId: { type: String, default: '' }, currentData: { type: String, default: '' }, maxValue: { type: Number, default: 1000 }, width: { type: Number, default: 350 }, height: { type: Number, default: 150 }, chartProps: { type: Object, default: () => ({}) }, thingName: { type: String, default: '' }, attr: { type: String, default: '' }, }, computed: { getStyle() { const properties = this.chartProps; if(properties.liquidType === 'liquidball') { return { width: \`\${this.width}px\`, height: \`\${this.height}px\`, border: \`\${properties.borderWidth}px solid \${properties.borderColor}\`, position: 'relative', 'border-radius': '50%', 'box-sizing': 'border-box', 'display': 'flex', 'justify-content': 'center', 'align-items': 'center', } } else if (properties.liquidType === 'liquidpool'){ return { width: \`\${this.width}px\`, height: \`\${this.height}px\`, 'border-right': \`\${properties.borderWidth}px solid \${properties.borderColor}\`, 'border-bottom': \`\${properties.borderWidth}px solid \${properties.borderColor}\`, 'border-left': \`\${properties.borderWidth}px solid \${properties.borderColor}\`, position: 'relative', 'box-sizing': 'border-box', 'display': 'flex', 'justify-content': 'center', 'align-items': 'center', } } }, liquidballBack () { const properties = this.chartProps; return { position: 'relative', overflow: 'hidden', 'background-color': properties.backgroundColor, width: \`calc(100% - \${properties.borderWidth * 2}px)\`, height: \`calc(100% - \${properties.borderWidth * 2}px)\`, 'border-radius': properties.liquidType === 'liquidball' ? '50%' : '2px' } }, getTextStyle() { const properties = this.chartProps; const {fontColor, fontSize, fontFamily, fontStyle, lineHeight, letterSpacing } = properties; return { 'font-size': fontSize + 'px', 'font-family': fontFamily, 'font-style': fontStyle, 'line-height': lineHeight, 'letter-spacing': letterSpacing, 'color': fontColor, } }, waveOneFill() { return { fill: this.chartProps.waveOneColor, } }, waveTwoFill() { return { fill: this.chartProps.waveTwoColor, } }, getPer() { const ratio = ((+this.currentData/this.maxValue) * 100).toFixed(0); const ratioStr = ratio + '%'; return { '--per': ratioStr, 'background-color': this.chartProps.waveOneColor, } }, getRatio() { const ratio = ((+this.currentData/this.maxValue) * 100).toFixed(2); const ratioStr = ratio + '%'; return ratioStr } }, } class CustomLiquidBallNode extends HtmlResize.view { realValue = defaultValue maxValue = defaultMaxValue 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: \`liquid-\${properties.id}\`, currentData: this.realValue, width, height, chartProps: properties, thingName, attr, maxValue: normalData.maxValue || this.maxValue }) return } const el = document.createElement('div'); rootEl.innerHTML = ''; const instance = createVNode(LiquidBall, { name: properties.nodeAlias, chartId: \`liquid-\${properties.id}\`, currentData: this.realValue, width, height, chartProps: properties, thingName, attr, maxValue: normalData.maxValue || this.maxValue }) 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 = defaultValue; 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() { if (this.shouldUpdate()) { this.setHtml(this.rootEl); } // 防止拖动时候频繁渲染图表 this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500); } componentDidUpdate() { if (this.shouldUpdate()) { this.updateHtmlDebounced(); } } } class CustomLiquidBallModel 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: 'custom-liquidball-node', view: CustomLiquidBallNode, model: CustomLiquidBallModel, })`,css:`@keyframes wave-move1 {\r 100% {\r transform: translate(0);\r }\r }\r @keyframes wave-move2 {\r 100% {\r transform: translate(-50%);\r }\r }\r .liquidball-node .box-text {\r position: absolute;\r left: 0;\r top: 0;\r z-index: 10;\r width: 100%;\r height: 100%;\r display: flex;\r display: -webkit-flex;\r align-items: center;\r justify-content: center;\r }\r .liquidball-node .liquidballBackStyle .inner {\r width: 100%;\r height: 100%;\r position: relative;\r /* 底部100% +波浪的实际高度，bottom: calc(-100% - 60px); */\r /* bottom: -128%; */\r /* 直接对bottom操作 */\r bottom: calc(-128% + var(--per));\r }\r .liquidball-node .liquidballBackStyle .inner .box-waves {\r position: absolute;\r left: 0;\r bottom: 100%;\r width: 300%;\r stroke: none;\r }\r .liquidball-node .liquidballBackStyle .inner .box-waves:nth-child(1) {\r transform: translate(-50%);\r z-index: 3;\r animation: wave-move1 1.5s linear infinite;\r margin-bottom: -2px;\r }\r .liquidball-node .liquidballBackStyle .inner .box-waves:nth-child(2) {\r transform: translate(0);\r z-index: 2;\r animation: wave-move2 3s linear infinite;\r }`,fakeData:""},p={id:e,name:a,aliasName:t,image:n,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:r,files:d};export{t 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,u as isDefault,c as isRemote,a as name,s as sectionType};