|
|
const e="03b40c5b-f9f1-4356-8c85-133255cfc3d9",t="custom-switch-node",a="开关",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="1688346642186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2492" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M764.928 251.392H259.072C116.224 251.392 0 367.616 0 510.464c0 142.848 116.224 259.072 259.072 259.072h505.856c142.848 0 259.072-116.224 259.072-259.072 0-142.848-116.224-259.072-259.072-259.072z m0 495.616c-130.56 0-236.544-105.984-236.544-236.544s105.984-236.544 236.544-236.544 236.544 105.984 236.544 236.544-105.984 236.544-236.544 236.544z" fill="#707070" p-id="2493"></path></svg>',l="svg",o="基础",i="常用",r=!1,u=!0,d="控制",s=`{"id":"u:270584784ce1","type":"page","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":"组件左边距","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-color","label":"前景色","name":"btnColor","id":"u:0d19ed3e2bdc","placeholder":"","mode":"horizontal","size":"full","className":"m-b","inputClassName":"w-full","format":"rgba"}],"id":"u:51ddf54ac749","md":6}],"gap":""},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"填充","name":"fill","id":"u:0d19ed3e2bdc","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:facc5c90e990","md":6},{"body":[{"type":"input-color","label":"描边","name":"strokeColor","id":"u:89afff5fd00d","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:7c903d9d40ab","md":6}],"id":"u:457970dd35bf
"nodes": [ { "id": "11e5d77f-8601-4c60-8865-b0fce65ed5c7", "type": "custom-switch-node", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "11e5d77f-8601-4c60-8865-b0fce65ed5c7", "width": 60, "height": 34, "x": 200, "y": 200, "rotation": 0, "strokeWidth": 2, "showText": true, "fontSize": 15, "opacity": 1, "nodeAlias": "开关", "fontColor": "#ffffff", "strokeColor": "rgba(74, 144, 226, 1)", "btnColor": "rgba(255, 255, 255, 1)", "fill": "rgba(74, 144, 226, 1)", "fontStyle": "", "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "[false]", "unit": "" }, "eventsData": { "eventCombo": [ { "eventType": "change", "enable": false, "config": "{\\"globalInputParamsCalculated\\":[],\\"eventAction\\":\\"sendCommand\\",\\"dataPointParamsCalculate\\":\\"return [\\\\n {\\\\n key: \\\\\\"\\\\\\",\\\\n value: ''\\\\n }\\\\n]\\",\\"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 : 0\\\\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": "open", "label": "开启", "name": "", "value": "" }, { "type": "close", "label": "关闭", "name": "" } ] }, "animationData": { "animationCombo": [ { "min": "", "max": "", "animationName": "" } ] }, "hiddenData": { "hiddenCombo": [ { "dataPoint": "", "min": "", "max": "", "showOrHiddenName": "隐藏" } ] } } } } ]}`,javascript:`
const { createApp, createVNode, render } = Vue;const app = createApp({})const Switch = { template: \`<div :style="cssStyleBG" @click="click">
<div :style="cssStyleBtn"></div> <div v-if="showText" :style="textStyle">{{state}}</div> </div>\`, props: { defaultValue: { type: String, default: '[]' }, showText: { type: Boolean, default: false }, fontColor: { type: String, default: '#ffffff' }, fontSize: { type: Number, default: 14 }, fontFamily: { type: String, default: '宋体' }, fontStyle: { type: String, default: 'normal' }, width: { type: Number, default: 60 }, height: { type: Number, default: 34 }, lineHeight: { type: Number, default: 34, }, strokeWidth: { type: Number, default: 2, }, borderColor: { type: String, default: '#1890ff' }, btnColor: { type: String, default: '#ffffff' }, backgroundColor: { type: String, default: '#1890ff', }, originFill: { type: String, default: '#1890ff', }, openName: { type: String, default: '开' }, closeName: { type: String, default: '关' }, controledByData: { type: Boolean, default: false } }, emits: ["change"], setup(props, { emit } ) { const {ref, toRefs, computed, watch} = Vue const { width, height, lineHeight, defaultValue, openName, closeName } = toRefs(props) const isOpen = ref(false); const state =ref('关'); let realValue = ref(0); let finalFillColor = ref(props.backgroundColor); const click=(ev)=>{ if (props.controledByData) { emit('change', Number(realValue.value)); finalFillColor.value = props.backgroundColor; } else { isOpen.value = !isOpen.value state.value = isOpen.value? openName.value : closeName.value; finalFillColor.value = isOpen.value ? props.originFill : '#999999'; emit('change', isOpen.value); } } const realWidth = parseInt(width.value); const realHeight = parseInt(height.value);
watch(defaultValue, (val) => { if (val !== null && val !== undefined) { realValue.value = window.resolveScadaNewValue(val) isOpen.value = !!Number(realValue.value); state.value = isOpen.value? openName.value : closeName.value; } }, { immediate: true }) const cssStyleBG=computed(()=>{ const borderWidths = props.strokeWidth * 2; return \`
position: relative; border-width: \${props.strokeWidth}px; border-style: solid; width: \${realWidth - borderWidths}px; height: \${realHeight}px; border-radius: \${realHeight}px; box-sizing: border-box; border-color:\${props.borderColor}; background-color:\${finalFillColor.value}\`;
}) const cssStyleBtn=computed(()=>{ const borderWidths = props.strokeWidth * 2; return \`
position: absolute; width: \${realHeight - borderWidths}px; height: \${realHeight - borderWidths}px; border-radius: 50%; left: \${isOpen.value ? (realWidth - realHeight) : 0}px; background-color: \${props.btnColor}; transition: left 0.15s ease-in-out\`;
}) const textTop = (realHeight - props.strokeWidth * 2 - props.fontSize) / 2; const textStyle = computed(()=>{ const fontStyle = props.fontStyle; 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' } } return \`
position: absolute; color: \${props.fontColor}; font-size: \${props.fontSize}px; font-family: \${props.fontFamily}; font-style: \${style.fontStyle}; font-weight: \${style.fontWeight}; text-decoration" \${style.textDecoration}; border-radius: 50%; top: 0px; bottom: 0; left: \${isOpen.value ? 0 : realHeight - props.strokeWidth}px; width: \${realWidth - realHeight}px; display: flex; align-items: center; justify-content: center; \`;
})
return { state, click, cssStyleBG, cssStyleBtn, textStyle, } }}
class CustomSwitchNode extends HtmlResize.view { clickTime = ''
setHtml(rootEl) { const { graphModel } = this.props; const { properties, width, height, } = this.props.model; const { showText, fontColor, fontSize, fontFamily, fontStyle, strokeWidth, lineHeight, fill, strokeColor, btnColor } = properties; const { normalData, eventsData } = properties.dynamic || {}; const { model } = this.props; const el = document.createElement('div'); rootEl.innerHTML = '';
let openName= '开'; let closeName = '关'; let fillColor = ''; let controledByData = false;
const findChange = eventsData?.eventCombo.find( i => i.eventType === 'change');
const changeHandler = (e) => { if(controledByData) { 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 (findChange.users && !findChange.users.includes(tokenParsed.userid)) { return messageFn('无用户权限') }
graphModel.eventCenter.emit("node:change", { data: this.props.model, e, }); }
const { uiData } = properties.dynamic || {}; if (uiData) { controledByData = !!uiData.dataPoint const realValue = window.resolveScadaNewValue(uiData.defaultValue) const flag = !!Number(realValue); fillColor = flag ? fill : '#999999'; 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.color && Number(realValue) >= from && Number(realValue) <= to) { fillColor = item.color } } else if (item.type === 'open') { if (item.value === 'true' && (realValue === true || realValue === 'true')) { fillColor = item.color openName = item.valueLabel; } else { if(Number(realValue) === Number(item.value)) { fillColor = item.color openName = item.valueLabel; } } } else if (item.type === 'close') { if (item.value === 'false' && (realValue === false || realValue === 'false')) { fillColor = item.color openName = item.valueLabel; } else { if (Number(realValue) === Number(item.value)) { fillColor = item.color; closeName = item.valueLabel; } } } }) } const instance = createVNode(Switch, { showText, fontColor, fontSize, fontFamily, fontStyle,width, height, lineHeight, originFill: fill, backgroundColor: fillColor, borderColor: fillColor, btnColor: btnColor, strokeWidth, defaultValue: uiData.defaultValue, openName, closeName, controledByData, onChange: changeHandler }) instance.appContext = app._context render(instance, el) rootEl.appendChild(el); } }}
class CustomSwitchModel 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-switch-node', view: CustomSwitchNode, model: CustomSwitchModel,})
`,css:"",fakeData:""},m={id:e,name:t,aliasName:a,image:n,imageType:l,groupName:o,groupType:i,isRemote:!1,isDefault:!0,sectionType:d,config:s,files:c};export{a 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,t as name,d as sectionType};
|
