|
|
const e="65dcfc32-2dbf-4688-93f1-c441ce1faaf8",a="custom-image-node",t="图片",n='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1685948569833" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2426" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M158.2 158.5h707.6c20.3 0 36.6 16.3 36.6 36.6v288.7c-36.6-28.5-105.7-73.2-158.6-73.2-77.3 0-146.4 178.9-231.8 178.9-65.1-4.1-154.5-77.3-256.2-65.1-40.7 8.1-97.6 73.2-134.2 122V195.1c0-20.4 16.3-36.6 36.6-36.6zM329 451.3c-32.5 0-61-12.2-81.3-32.5s-32.5-52.9-32.5-81.3c0-28.5 12.2-61 32.5-81.3 20.3-20.3 48.8-32.5 81.3-32.5 28.5 0 56.9 12.2 81.3 32.5 20.3 20.3 32.5 52.9 32.5 81.3 0 28.5-12.2 61-32.5 81.3-24.4 20.3-52.8 32.5-81.3 32.5z m557.1-345.7H137.9c-40.7 0-73.2 32.5-73.2 73.2v666.9c0 40.7 32.5 73.2 73.2 73.2h748.3c40.7 0 73.2-32.5 73.2-73.2V178.8c-0.1-40.7-32.6-73.2-73.3-73.2z m0 0" p-id="2427" fill="#707070"></path></svg>',i="svg",l="基础",o="常用",r=!1,m=!0,d="基础图形",s=`{"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:fc464664fb93","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"input-text","label":"ID ","name":"id","id":"u:8a3fc64f07f6","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"grid","id":"u:1954dc15dd5b","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","keyboard":true,"id":"u:656efdb758ad","step":1,"suffix":"px","placeholder":"组件宽度","size":"full","mode":"horizontal","className":"m-b","value":100,"labelClassName":"w-8","labelAlign":"left","precision":2,"inputClassName":"w-full"}],"id":"u:4274c47a4ef5","md":6},{"body":[{"type":"input-number","label":"高度","name":"height","keyboard":true,"id":"u:1ed6dcd98c1a","step":1,"suffix":"px","placeholder":"组件高度","size":"full","mode":"horizontal","className":"m-b","value":100,"labelAlign":"left","labelClassName":"w-8","precision":2,"inputClassName":"w-full"}],"id":"u:3e9d1e71a69f","md":6}]},{"type":"grid","id":"u:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","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":"Y 轴","name":"y","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: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":"container","id":"u:26f912c2e955","className":"m-b","body":[{"type":"button","label":"素材库","onEvent":{"click":{"actions":[{"dialog":{"type":"dialog","title":"素材库","body":[{"type":"se
"nodes": [ { "id": "c04eb8bb-49d7-46c2-9804-15be1334b01f", "type": "custom-image-node", "x": 202, "y": 200, "text": { "value": "", "x": 202, "y": 200 }, "properties": { "id": "c04eb8bb-49d7-46c2-9804-15be1334b01f", "width": 100, "height": 100, "x": 202, "y": 200, "rotation": 0, "opacity": 1, "showHideContainChildren": false, "showDefaultValue": false, "showUnit": false, "strokeWidth": 1, "fontSize": 12, "borderDirection": "border", "nodeAlias": "图片", "href": "./defaultPic.svg", "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [ { "type": "rangeImage", "label": "范围/图片", "name": "" } ], "defaultValue": "[]", "unit": "" }, "uiData": { "dataPoint": "", "compareType": "", "conditionVariables": [ { "type": "rangeImage", "label": "范围/图片", "name": "" } ], "defaultValue": "[]" }, "animationData": { "animationCombo": [ { "min": "", "max": "", "animationName": "旋转", "defaultValue": "[]", "animationTime": 3, "dataPoint": "" }, { "min": "", "max": "", "animationName": "闪烁", "defaultValue": "[]", "dataPoint": "" } ] }, "hiddenData": { "hiddenCombo": [ { "dataPoint": "", "min": "", "max": "", "showOrHiddenName": "隐藏", "defaultValue": "[]" }, { "defaultValue": "[]", "showOrHiddenName": "显示", "dataPoint": "" } ] }, "eventsData": { "eventCombo": [ { "eventType": "click", "enable": false, "config": "" }, { "eventType": "dblClick", "enable": false, "config": "" } ] } } } } ]}`,javascript:`const isLocal = window.location.origin.includes('localhost');
const defaultPic = isLocal ? window.location.origin + '/defaultPic.svg' : window.location.origin + '/scada/defaultPic.svg';
// 图片-基础节点
class ImageModel extends RectResize.model { realValue = ''
initNodeData(data) { // 自定义组件，需最开始重置一下text 。
data.text = { value: "", x: data.x, y: data.y, }; super.initNodeData(data) const { properties } = this; this.width = properties.width || 150; this.height = properties.height || 80; window.nodeEventsListeners(this); this.text.editable = false; // 不允许文本被编辑
}
setAttributes() { const { x, y, properties } = this; const { href, textHorizontalMove = 0, textVerticalMove = 0, dynamic } = properties; const { normalData } = dynamic || {}; let textValue = properties.content || ''; if (normalData) { const { defaultValue } = normalData || {} const realValue = window.resolveScadaNewValue(defaultValue); this.realValue = realValue; }
const img = new Image() img.onerror = () => { properties.href = '' } img.src = href
this.text = { ...this.text, x: x + textHorizontalMove, y: y + textVerticalMove, value: textValue, } }
getNodeStyle() { const style = super.getNodeStyle(); const { properties } = this;
style.fill = properties.fill || style.fill; style.stroke = properties.strokeColor || style.stroke; style.strokeWidth = properties.strokeWidth || style.strokeWidth; style.opacity = properties.opacity || 1; return style; }
getTextStyle() { const style = super.getTextStyle(); const { properties } = this; style.color = properties.fontColor || style.color; style.fontSize = properties.fontSize || style.fontSize; const fontStyle = properties.fontStyle; if(fontStyle) { if (fontStyle.includes('bold')) { style.fontWeight = 'bolder'; } if(fontStyle.includes('italic')) { style.fontStyle = 'italic' } if (fontStyle.includes('underline,line-through')) { style.textDecoration = 'underline line-through' } else if (fontStyle.includes('line-through,underline')) { style.textDecoration = 'line-through underline' } else if (fontStyle.includes('underline')) { style.textDecoration = 'underline' } else if (fontStyle.includes('line-through')) { style.textDecoration = 'line-through' } } return style; }
getResizeOutlineStyle() { return { stroke: "#00ffff", strokeWidth: 1, strokeDasharray: "none", }; }}
class ImageNode extends RectResize.view { getImageHref(href) { return href; }
getResizeShape() { const { x, y, width, height, properties } = this.props.model const finalWidth = width <= 10 ? 10 : width const finalHeight = height <= 10 ? 10 : height const { opacity, blinkAnimation } = properties; let href = this.getImageHref(properties.href || defaultPic.replace(null, ''))
const { uiData } = properties.dynamic || {}; if (uiData) { const realValue = window.resolveScadaNewValue(uiData.defaultValue) if(realValue !== '') { uiData.conditionVariables.forEach((item) => { if (item.type === 'rangeImage') { let from = item.from; let to = item.to; if (item.from >= item.to) { from = item.to; to = item.from; } if (item.imageUrl && Number(realValue) >= from && Number(realValue) <= to) { href = item.imageUrl; } } else if (item.type === 'booleanImage') { const trueFlags = ['true', true] const falseFlags = ['false', false] const truetrue = trueFlags.includes(item.value) && trueFlags.includes(realValue) const falsefalse = falseFlags.includes(item.value) && falseFlags.includes(realValue) if (truetrue || falsefalse) { href = item.imageUrl; } } }) } } const finalX = x - 1 / 2 * finalWidth; const finalY = y - 1 / 2 * finalHeight const attrs = { x: finalX, y: finalY, width: finalWidth, height: finalHeight, href, opacity, className: blinkAnimation ? 'blinkAnim' : '', transformOrigin: \`\${finalX + finalWidth/2} \${finalY + finalHeight/2}\`,
// 根据宽高缩放
preserveAspectRatio: 'none meet' } return h('g', {}, [ h('image', { ...attrs }) ] ); }}
lf.register({ type: 'custom-image-node', view: ImageNode, model: ImageModel})`,css:"",fakeData:` // 数据处理, 返回格式如下
return { normalData: [], uiData: [], animationData: [[]], // 多级
hiddenData: [[]], // 多级
} `},u={id:e,name:a,aliasName:t,image:n,imageType:i,groupName:l,groupType:o,isRemote:!1,isDefault:!0,sectionType:d,config:s,files:c};export{t as aliasName,s as config,u as default,c as files,l as groupName,o as groupType,e as id,n as image,i as imageType,m as isDefault,r as isRemote,a as name,d as sectionType};
|
