|
|
const e="31116105-722c-4b75-82de-74e976a9f7eb",a="command-send",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="1704359593539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14923" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M448 652.8h153.6v204.8h74.752a10.24 10.24 0 0 1 6.656 18.0224l-151.552 129.8432a10.24 10.24 0 0 1-13.312 0l-151.552-129.8432a10.24 10.24 0 0 1 6.656-18.0224h74.752v-204.8z m460.8-601.6a89.6 89.6 0 0 1 89.2928 82.2272l0.3072 7.3728v512a89.6 89.6 0 0 1-82.2272 89.2928l-7.3728 0.3072h-168.448a38.4 38.4 0 0 1-5.1712-76.4416L740.352 665.6h168.3968a12.8 12.8 0 0 0 12.4416-9.8816L921.6 652.8v-512a12.8 12.8 0 0 0-9.8816-12.4416L908.8 128h-768a12.8 12.8 0 0 0-12.4416 9.8816L128 140.8v512a12.8 12.8 0 0 0 9.8816 12.4416L140.8 665.6h162.4576a38.4 38.4 0 0 1 5.1712 76.4416l-5.1712 0.3584H140.8a89.6 89.6 0 0 1-89.2928-82.2272L51.2 652.8v-512a89.6 89.6 0 0 1 82.2272-89.2928L140.8 51.2h768zM265.472 278.6816l4.1984 3.4304 119.296 114.1248a33.28 33.28 0 0 1 4.096 43.3664l-3.584 4.1984-119.296 119.296a33.28 33.28 0 0 1-50.5344-42.9568l3.5328-4.096 95.1808-95.2832-94.72-90.5728a33.28 33.28 0 0 1-4.4032-42.8544l3.3792-4.1984a33.28 33.28 0 0 1 42.8544-4.4544z m281.5488 103.168l266.24 2.048a38.4 38.4 0 0 1 4.608 76.4416l-5.1712 0.3072-266.24-1.9968a38.4 38.4 0 0 1-4.608-76.4928l5.12-0.3072z" fill="#4D6BFF" p-id="14924"></path></svg>',l="svg",o="基础",i="常用",c=!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: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
"nodes": [ { "id": "b143f017-8d3e-4f2a-8f8a-f4dacafffe30", "type": "command-send", "x": 200, "y": 200, "text": { "value": "设定", "x": 200, "y": 200 }, "properties": { "id": "b143f017-8d3e-4f2a-8f8a-f4dacafffe30", "width": 32, "height": 22, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "fontSize": 12, "showDefaultValue": false, "showUnit": false, "valueColor": "rgba(245, 166, 35, 1)", "nodeAlias": "命令下发", "lineHeight": 20, "strokeWidth": 1, "strokeColor": "rgba(74, 144, 226, 1)", "borderRadius": 2, "backgroundColor": "rgba(74, 144, 226, 1)", "fontColor": "rgba(255, 255, 255, 1)", "fontFamily": "Microsoft Yahei", "fontStyle": "", "fontSpace": 0, "content": "设定", "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" }, "eventsData": { "eventCombo": [ { "eventType": "click", "enable": false, "config": "", "users": "" } ] }, "uiData": { "dataPoint": "", "compareType": "", "conditionVariables": [] }, "animationData": { "animationCombo": [ { "dataPoint": "", "min": "", "max": "", "animationName": "旋转" } ] }, "hiddenData": { "hiddenCombo": [ { "dataPoint": "", "min": "", "max": "", "showOrHiddenName": "隐藏" } ] } } } } ]}`,javascript:`const { createApp, createVNode, render } = Vue;const app = createApp({})
const defaultVal = 0;
const Button = { template: '<div :style="getStyle" @click="clickHandler">{{content}}</div>', props: { name: { type: String, default: '命令下发' }, content: { type: String, default: '' }, currentData: { type: Number, default: 10 }, fontColor: { type: String, default: '#ffffff' }, fontSize: { type: Number, default: 14 }, fontSpace: { type: Number, default: 0 }, fontFamily: { type: String, default: '宋体' }, fontStyle: { type: String, default: 'normal' }, borderRadius: { type: Number, default: 4 }, 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, }, validatePermission: { type: Function, default: () => { } } }, emits: ['sendCommand'], computed: { getStyle() { const { fontColor, fontSize, fontFamily, fontStyle, fontSpace, borderRadius, width, height, lineHeight, backgroundColor, strokeColor, strokeWidth } = 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' } } return { color: fontColor, "font-size": parseInt(fontSize) + 'px', "font-family": fontFamily, 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-color': backgroundColor, "border-radius": \`\${borderRadius}px\`,
"border-color": strokeColor, "border-style": "solid", "border-width": parseInt(strokeWidth) + 'px', 'letter-spacing': fontSpace + 'px', 'cursor': 'pointer', ...style } } }, setup(props, { emit }) { const { toRefs } = Vue const { currentData } = toRefs(props) const clickHandler = () => { if (window.isPreviewEnv) { if (props.validatePermission()) { window.layer.confirm('是否要修改该设备的设定值？', { btn: ['确定', '取消'] //按钮
}, function (confirmIdx) { layer.prompt({ title: '设定值', value: currentData.value, formType: 0, btn2: function(){ //取消验证回调
window.layer.close(confirmIdx); } }, function (value, index) { emit("sendCommand", +value); window.layer.close(index); window.layer.close(confirmIdx) }); }, function () {
}); } } } return { clickHandler } }}
class CustomButtonNode extends HtmlResize.view { realValue = defaultVal oldProperties = {} chartRendered = false instance = null
setHtml(rootEl) { const { properties, width, height, } = this.props.model; const { content, nodeAlias, fontColor, fontSize, fontFamily, fontStyle, fontSpace, borderRadius, lineHeight, backgroundColor, strokeColor, strokeWidth } = properties; const { model, graphModel } = this.props;
const commandHandler = (val) => { graphModel.eventCenter.emit("myNode:click", { data: model, e: val, }); }
const validatePermission = () => { const { eventsData } = properties.dynamic || {}; const findClick = eventsData?.eventCombo.find(i => i.eventType === 'click'); const cacheToken = sessionStorage.getItem('v1@CacheToken'); if (!cacheToken) { window.createLoginDialog(); return false; } const tokenParsed = JSON.parse(cacheToken || '{}'); if (findClick.users && !findClick.users.includes(tokenParsed.userid)) { messageFn('无用户权限'); return false; } return true; }
if (this.instance) { // 实时数据不能推送一次就创建一次图表，可以在原有实例基础之上更改数据。
Object.assign(this.instance.component.props, { name: nodeAlias, content, borderRadius, currentData: this.realValue, fontColor, fontSpace, fontSize, fontFamily, fontStyle, width, height, lineHeight, backgroundColor: backgroundColor, strokeColor, strokeWidth, onSendCommand: commandHandler, validatePermission, }) return } const el = document.createElement('div'); rootEl.innerHTML = ''; const instance = createVNode(Button, { name: nodeAlias, content, borderRadius, currentData: this.realValue, fontColor, fontSpace, fontSize, fontFamily, fontStyle, width, height, lineHeight, backgroundColor: backgroundColor, strokeColor, strokeWidth, onSendCommand: commandHandler, validatePermission }) 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 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: 'command-send', 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:r};export{t as aliasName,s as config,m as default,r as files,o as groupName,i as groupType,e as id,n as image,l as imageType,u as isDefault,c as isRemote,a as name,d as sectionType};
|
