|
|
const e="6a4f3583-cfab-4569-8739-e33302568b48",a="custom-button-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="1688107204717" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9101" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M883.3 745H142.7c-41.9 0-76-34.1-76-76V351.6c0-41.9 34.1-76 76-76h740.6c41.9 0 76 34.1 76 76V669c0 41.9-34.1 76-76 76zM142.7 321.8c-16.4 0-29.8 13.3-29.8 29.8V669c0 16.4 13.3 29.8 29.8 29.8h740.6c16.4 0 29.8-13.3 29.8-29.8V351.6c0-16.4-13.3-29.8-29.8-29.8H142.7z" fill="#707070" p-id="9102"></path><path d="M191.3 576c-10.1 0-13.9 0.1-19.6 0.4 0.8-5.7 1.1-10.2 1.1-19.4v-72.4c0-7-0.3-12.7-1.1-19 6.7 0.4 8.6 0.4 19.4 0.4h34.7c21.4 0 34 10.3 34 27.8 0 8.1-2.6 14.4-7.7 18.9-2.9 2.5-5.3 3.8-10.7 5.8 6.5 1.5 9.9 3 13.8 6.4 5.7 5 8.6 12.2 8.6 20.9 0 19-13.5 30.3-36.5 30.3h-36z m30.6-67.6c7 0 11.4-4.1 11.4-10.6s-4.1-10.2-11.6-10.2h-23v20.8h23.2z m-23.2 45.8H223c8.3 0 13.4-4.6 13.4-12.4 0-7.7-5-12.2-13.5-12.2h-24.2v24.6zM384.9 465.9c-0.8 5.7-1.1 10.4-1.1 20v45.5c0 30.2-18.1 47.2-50 47.2-16.4 0-29.8-4.6-37.7-13-7.7-8.2-11.6-19.7-11.6-34.5v-45.2c0-9.1-0.3-14.9-1.1-20H312c-0.8 4.9-1.1 10.2-1.1 20v45.5c0 16.7 7.5 24.6 23 24.6 15.9 0 23.4-7.9 23.4-24.6v-45.5c0-9.9-0.3-14-1.1-20h28.7zM464.1 556c0 7.9 0.3 13.8 1.1 20H436c0.8-6.2 1.1-11.6 1.1-20v-66.7h-15.6c-8.3 0-10.6 0.1-20 0.9V465c4.4 0.5 11.6 0.9 19.7 0.9H479c9.3 0 14.5-0.3 20.6-0.9v25.3c-6-0.7-11.1-0.9-20.6-0.9h-14.9V556zM572.9 556c0 7.9 0.3 13.8 1.1 20h-29.2c0.8-6.2 1.1-11.6 1.1-20v-66.7h-15.6c-8.3 0-10.6 0.1-20 0.9V465c4.4 0.5 11.6 0.9 19.7 0.9h57.9c9.3 0 14.5-0.3 20.6-0.9v25.3c-6-0.7-11.1-0.9-20.6-0.9H573V556zM728.7 520.4c0 34.9-21.3 58.1-53.4 58.1-32.4 0-53.3-22.6-53.3-57.7 0-34.9 20.9-57.3 53.4-57.3 32.6 0 53.3 22.3 53.3 56.9z m-27.5 0.3c0-21.4-9.8-34.4-25.8-34.4-16.1 0-26.1 13.1-26.1 34.4 0 21.6 9.9 34.9 26.1 34.9 16 0 25.8-13.2 25.8-34.9zM811.8 520c3.8 5.7 6.3 9.9 9.5 15.7-0.5-6.1-0.8-12.2-0.8-19.6V486c0-8.7-0.3-14-1.1-20.1h28.2c-0.8 6-1.1 11.5-1.1 20.1v70.2c0 8.1 0.4 14.2 1.1 19.7h-29c-2.4-5-5.4-9.9-9.9-16.8l-24.5-36.9c-3.6-5.3-5.8-9.3-9.5-16.3 0.7 6 0.9 13.2 0.9 19.7v29.6c0 9.1 0.3 14.9 1.1 20.6h-28.2c0.8-5.2 1.1-11 1.1-20.8v-69.6c0-7.7-0.3-13.6-1.1-19.7h28.7c1.3 3.6 4.2 8.9 9.4 16.5l25.2 37.8z" fill="#707070" p-id="9103"></path></svg>',l="svg",o="基础",i="常用",r=!1,u=!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: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: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":"组件左边距","siz
"nodes": [ { "id": "294b013f-14d3-429e-a078-048da5f0261e", "type": "custom-button-node", "x": 200, "y": 200, "text": { "value": "测试按钮", "x": 200, "y": 200 }, "properties": { "id": "294b013f-14d3-429e-a078-048da5f0261e", "width": 80, "height": 35, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "strokeWidth": 1, "fontSize": 14, "boxShadow": "0 2px 0 rgba(0, 0, 0, 0.45)", "nodeAlias": "按钮", "fontColor": "#ffffff", "strokeColor": "", "content": "测试按钮", "lineHeight": 35, "fontStyle": "", "fill": "rgb(24, 144, 255)", "background": "", "borderRadius": 6, "backgroundSize": "100% 100%", "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" }, "eventsData": { "eventCombo": [ { "eventType": "click", "config": "{\\"globalInputParamsCalculated\\":[],\\"eventAction\\":\\"sendCommand\\",\\"sendCommandMethod\\":\\"config\\",\\"inputParamsCalculate\\":\\"// console.log('deviceInfo', deviceInfo, 'command', command, 'event', event);\\\\n// 入参提示： deviceInfo -- 设备信息，command -- 指令信息， event -- 事件传参（当前部件所绑定的立即值，或当前部件经过计算后的自定义值）， 入参计算。。。然后返回出参\\\\nconst condition = {\\\\n deviceName: deviceInfo.code,\\\\n attrCode: command.controlDeviceAttr,\\\\n value: event == 0 ? 1 : event == 1 ? 0 : event\\\\n}\\\\nreturn {\\\\n \\\\\\"condition\\\\\\": JSON.stringify(condition),\\\\n \\\\\\"controlId\\\\\\": command.id\\\\n}\\",\\"requestMethod\\":\\"post\\",\\"requestUrl\\":\\"/thing/device/control/control\\"}",
"users": "" } ] }, "uiData": { "dataPoint": "", "compareType": "", "conditionVariables": [ { "type": "equal", "label": "相等", "name": "" } ] }, "animationData": { "animationCombo": [ { "dataPoint": "", "min": "", "max": "", "animationName": "旋转", "animationTime": 3 } ] }, "hiddenData": { "hiddenCombo": [ { "dataPoint": "", "min": "", "max": "", "showOrHiddenName": "隐藏" } ] } } } } ]}`,javascript:`
const { createApp, createVNode, render } = Vue;const app = createApp({})const Button = { template: '<div :style="getStyle" @click="clickHandler" @dblclick="dblClickHandler">{{name}}</div>', props: { name: { type: String, default: '按钮11' }, fontColor: { type: String, default: '#ffffff' }, fontSize: { type: Number, default: 14 }, fontFamily: { type: String, default: '宋体' }, fontStyle: { type: String, default: 'normal' }, width: { type: Number, default: 80 }, height: { type: Number, default: 35 }, lineHeight: { type: Number, default: 35, }, backgroundColor: { type: String, default: '#1890ff', }, strokeColor: { type: String, default: '#1890ff', }, strokeWidth: { type: Number, default: 1, }, opacity: { type: Number, default: 1, }, background: { type: String, default: '', }, backgroundSize: { type: String, default: '100% 100%', }, boxShadow: { type: String, default: '', }, borderRadius: { type: Number, default: 6, }, realValue: { type: [String, Number], default: '' } }, computed: { getStyle () { const { fontColor, fontSize, fontFamily, fontStyle, width, height, lineHeight, backgroundColor,strokeColor,strokeWidth, opacity, background, backgroundSize, boxShadow, borderRadius } = this const style = {} 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' } } let back = background; if (back && !back.includes('url')) { back = \`url(\${back})\`
} return { color: fontColor, "font-size": parseInt(fontSize) + 'px', "font-family": fontFamily, "font-style": style.fontStyle, "font-weight": style.fontWeight, "text-decoration": style.textDecoration, width: parseInt(width) - parseInt(strokeWidth) * 2 + 'px', height: parseInt(height) - parseInt(strokeWidth) * 2 + 'px', lineHeight: parseInt(lineHeight) - parseInt(strokeWidth) * 2 + 'px', "text-align": 'center', 'background': backgroundColor || back, 'background-size': backgroundSize, "border-radius": borderRadius + 'px', "box-shadow": boxShadow, "border-color": strokeColor, "border-style": "solid", "border-width": parseInt(strokeWidth) + 'px', "opacity": opacity, cursor: 'pointer' } } }, emits: ['click', 'dblClick'], setup(props, { emit } ) { const {ref, toRefs, computed, watch} = Vue const { realValue } = toRefs(props); const clickHandler = () => { emit('click', realValue.value) } const dblClickHandler = () => { emit('dblClick', realValue.value) } return { clickHandler, dblClickHandler, } }}
class CustomButtonNode extends HtmlResize.view { clickTime = '' setHtml(rootEl) { const { graphModel } = this.props; const { properties, width, height, } = this.props.model; const { content, fontColor, fontSize, fontFamily, fontStyle, lineHeight, fill, strokeColor,strokeWidth, opacity, background, boxShadow, borderRadius } = properties; const { model } = this.props; const el = document.createElement('div'); rootEl.innerHTML = '';
const { uiData, eventsData } = properties.dynamic || {};
const findClick = eventsData?.eventCombo.find( i => i.eventType === 'click');
const clickHandler = (e) => { if(uiData.dataPoint && findClick && findClick.enable) { const now = new Date().getTime(); if (this.clickTime) { if (now - this.clickTime <= 10000) { messageFn('10秒之内不能重复触发') return; } } this.clickTime = now; } const cacheToken = sessionStorage.getItem('v1@CacheToken'); if(!cacheToken) { return window.createLoginDialog(); } const tokenParsed = JSON.parse(cacheToken || '{}'); if (findClick.users && !findClick.users.includes(tokenParsed.userid)) { return messageFn('无用户权限') } graphModel.eventCenter.emit("myNode:click", { data: this.props.model, e, }); }
const dblClickHandler = (e) => { graphModel.eventCenter.emit("myNode:dbclick", { data: this.props.model, e, }); }
let dynamicBack = background; let dynamicName = content let fillColor = fill let fontC = fontColor let realValue = '' if (uiData) { realValue = window.resolveScadaNewValue(uiData.defaultValue) if (realValue !== '') { uiData.conditionVariables.forEach((item) => { if (item.type === 'rangeColor') { let from = item.from; let to = item.to; if (item.from >= item.to) { from = item.to; to = item.from; } if (item.backColor && Number(realValue) >= from && Number(realValue) <= to) { fillColor = item.backColor } if (item.fontColor && Number(realValue) >= from && Number(realValue) <= to) { fontC = item.fontColor } if (item.background && Number(realValue) >= from && Number(realValue) <= to) { dynamicBack = item.background } } else if (item.type === 'equal') { if(Number(realValue) === Number(item.value)) { item.backColor && (fillColor = item.backColor); item.fontColor && (fontC = item.fontColor); dynamicName = item.valueLabel; item.background && (dynamicBack = item.background); } } else if (item.type === 'boolean') { 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) { item.backColor && (fillColor = item.backColor); item.fontColor && (fontC = item.fontColor); dynamicName = item.valueLabel; item.background && (dynamicBack = item.background); } } }) } }
const instance = createVNode(Button, { name: dynamicName, fontColor: fontC, fontSize, fontFamily, fontStyle,width, height, lineHeight, backgroundColor: fillColor, strokeColor,strokeWidth, opacity, background: dynamicBack, boxShadow, borderRadius, realValue, onClick: clickHandler, onDblClick: dblClickHandler, }) instance.appContext = app._context render(instance, el) rootEl.appendChild(el); }}
class CustomButtonModel 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-button-node', view: CustomButtonNode, model: CustomButtonModel,})
`,css:"",fakeData:""},m={id:e,name:a,aliasName:t,image:n,imageType:l,groupName:o,groupType:i,isRemote:!1,isDefault:!0,sectionType:d,config:s,files:c};export{t as aliasName,s as config,m as default,c as files,o as groupName,i as groupType,e as id,n as image,l as imageType,u as isDefault,r as isRemote,a as name,d as sectionType};
|
