|
|
const e="5a72da54-c053-4e8d-8880-6e5453b16fc9",n="custom-select-node",t="下拉选择框",o='<?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="1696993298055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1446" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M992.65 373.55H31.35V101.88c0-34.57 28.12-62.69 62.69-62.69h835.92c34.57 0 62.69 28.12 62.69 62.69v271.67zM73.14 331.76h877.71V101.88c0-11.52-9.37-20.9-20.9-20.9H94.04c-11.52 0-20.9 9.38-20.9 20.9v229.88zM929.96 984.82H94.04c-34.57 0-62.69-28.12-62.69-62.69V441.47h961.31v480.65c-0.01 34.57-28.13 62.7-62.7 62.7zM73.14 483.27v438.86c0 11.53 9.38 20.9 20.9 20.9h835.92c11.53 0 20.9-9.37 20.9-20.9V483.27H73.14z" fill="#707070" p-id="1447"></path><path d="M825.47 269.06c-6.57 0-12.78-3.09-16.71-8.36l-62.69-83.59c-6.94-9.23-5.06-22.34 4.18-29.26 9.22-6.97 22.33-5.05 29.24 4.17l45.98 61.31 45.98-61.31c6.92-9.2 20.04-11.12 29.24-4.17 9.24 6.92 11.12 20.02 4.18 29.26l-62.69 83.59a20.862 20.862 0 0 1-16.71 8.36zM522.45 227.27H188.08c-11.54 0-20.9-9.36-20.9-20.9s9.36-20.9 20.9-20.9h334.37c11.55 0 20.9 9.36 20.9 20.9s-9.35 20.9-20.9 20.9zM658.29 629.55H156.73c-11.54 0-20.9-9.35-20.9-20.9s9.36-20.9 20.9-20.9h501.55c11.55 0 20.9 9.35 20.9 20.9s-9.34 20.9-20.89 20.9zM867.27 838.53H156.73c-11.54 0-20.9-9.35-20.9-20.9s9.36-20.9 20.9-20.9h710.53c11.55 0 20.9 9.35 20.9 20.9s-9.34 20.9-20.89 20.9z" fill="#707070" p-id="1448"></path></svg>',l="svg",a="动态",s="表单控件",p=!1,c=!0,i="时间",r=`{"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
"nodes": [ { "id": "183806b2-ccf3-473f-821a-1b3c0b8e4df4", "type": "custom-select-node", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "183806b2-ccf3-473f-821a-1b3c0b8e4df4", "width": 120, "height": 30, "x": 200, "y": 200, "rotation": 0, "strokeWidth": 1, "placeholder": "请选择", "dropdownStrokeWidth": 1, "fontSize": 14, "showText": false, "nodeAlias": "下拉选择框", "opacity": 1, "showDefaultValue": false, "showUnit": false, "fontColor": "rgba(255, 255, 255, 1)", "fontFamily": "Microsoft Yahei", "fontStyle": "", "fill": "rgba(74, 144, 226, 1)", "strokeColor": "rgba(74, 144, 226, 1)", "dropdownFill": "rgba(255, 255, 255, 0)", "dropdownStrokeColor": "rgba(74, 144, 226, 1)", "dropdownFontColor": "rgba(40, 131, 238, 1)", "triangleColor": "rgba(255, 255, 255, 1)", "dropdownHoverFontColor": "rgba(255, 255, 255, 1)", "dropdownHoverFill": "rgba(74, 144, 226, 1)", "background": "", "borderRadius": 2, "dynamic": { "normalData": { "dataPoint": "/v1/entity/list?templateMark=0", "compareType": "", "conditionVariables": [], "defaultValue": [], "unit": "", "requestMethod": "get", "dataFilterFn": "return datas.map(i => ({\\r\\n label: i.entityName,\\r\\n value: i.entityId,\\r\\n}))", "defaultOptions": [ { "label": "电", "value": "A29" }, { "label": "水", "value": "B2" } ] }, "eventsData": { "eventCombo": [ { "eventType": "change", "enable": false, "targetParams": "nearest-day", "targetParamsType": "entitys", "targetParamsAttrsType": "all", "targetParamsAttrsKeysEntitys": "keys", "targetParamsTimesType": "nearest", "targetParamsEntitys": "list", "apiId": "", "moreOperation": "" } ] } } } } ]}`,javascript:`
const { createApp, createVNode, render } = Vue;const app = createApp({})
const defaultOptions = [ { label: 'AA', value: 'a' }, { label: 'BB', value: 'b' }]
const Options = { template: \`
<div v-show="showDropdown" :id="id" :style="dropdownStyle" class="scada-select-dropdown" :class="{showdrop: showDropdown}"> <div v-if="options.length === 0" :style="selectOptionStyle" class="scada-select-dropdown-option">暂无数据</div> <div v-for="item in options" :key="item.value" :data-key="item.value" :style="selectOptionStyle(item)" @click="selectOption(item)" class="scada-select-dropdown-option" @mousemove="(e) => handleMove(e, item.label)">{{ item.label }}</div> </div> \`,
props: { id: { type: String, default: '' }, showDropdown: { type: Boolean, default: false }, options: { type: Array, default: [] }, selects: { type: Object, default: { label: '请选择', value: '-' } }, 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' }, backgroundColor: { type: String, default: '#1890ff', }, hoverFontColor: { type: String, default: '#ffffff' }, hoverFillColor: { type: String, default: '#1890ff' } }, emits: ['selected'], setup(props, { emit }) { const { ref, computed, nextTick, onMounted, onUnmounted } = Vue
const selects = ref({ label: '请选择', value: '-' });
const dropdownStyle = computed(() => { const realWidth = parseInt(props.width); return \`
width: \${realWidth - props.strokeWidth * 2}px; height: 0px; max-height: 350px; overflow-y: auto; border-width: \${props.strokeWidth}px; border-style: solid; border-radius: 2px; border-color:\${props.borderColor}; border-bottom: 1 solid \${props.borderColor}; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); transition: height ease-in-out 0.2s; \`
})
const selectOptionStyle = computed(() => (option) => { const isSelected = props.selects.value === option.value; const backColor = isSelected ? props.hoverFillColor : props.backgroundColor; const fontColor = isSelected ? props.hoverFontColor : props.fontColor; return \`
display: block; font-size: 12px; width: 100%; height: 30px; line-height: 30px; text-align: center; color: \${fontColor}; background-color: \${backColor}; padding: 0 5px; box-sizing: border-box; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; \`
})
const selectOption = (ev) => { selects.value = ev emit('selected', selects.value) }
const defaultSelect = () => { selects.value = { label: '请选择', value: '-' } emit('selected', selects.value) }
const moveHandler = (e) => { const target = e.target ; const insideDropdown = target.closest('.scada-select-dropdown'); if(!insideDropdown) { const tooltip = document.querySelector('.scada-select-dropdown-tooltip'); if(tooltip) { tooltip.remove(); } } }
const handleMove= window._.debounce(function (e, label) { const x = e.pageX; const y = e.pageY; const offsetWidth = e.target.offsetWidth; const scrollWidth = e.target.scrollWidth; if (offsetWidth < scrollWidth) { const tooltip = document.querySelector('.scada-select-dropdown-tooltip'); if (!tooltip) { const span = document.createElement('span'); span.className = 'scada-select-dropdown-tooltip'; span.innerHTML = label; span.style.top = y + 10 + 'px'; span.style.left = x + 15 + 'px'; document.body.appendChild(span); } else { tooltip.innerHTML = label; tooltip.style.top = y + 10 + 'px'; tooltip.style.left = x + 15 + 'px'; } } else { const tooltip = document.querySelector('.scada-select-dropdown-tooltip'); tooltip && tooltip.remove(); } }, 200)
onMounted(() => { nextTick(() => { const optionDoms = Array.from(document.querySelectorAll('.scada-select-dropdown-option')); optionDoms.forEach((opt) => { opt.mouseoverFn = () => { opt.style.color = props.hoverFontColor; opt.style.backgroundColor = props.hoverFillColor; } opt.mouseleaveFn = () => { const dataKey = opt.dataset.key; if (dataKey !== props.selects.value) { opt.style.color = props.fontColor; opt.style.backgroundColor = props.backgroundColor; } else { opt.style.color = props.hoverFontColor; opt.style.backgroundColor = props.hoverFillColor; } } opt.addEventListener('mouseover', opt.mouseoverFn); opt.addEventListener('mouseleave', opt.mouseleaveFn); }) const dropdownDom = document.getElementById(props.id); const dropdown = document.querySelector('.scada-select-dropdown-option'); if (dropdownDom) { setTimeout(()=> { dropdownDom.style.height = props.options.length * dropdown.offsetHeight + 'px'; }, 0) } }); document.body.addEventListener('mousemove', moveHandler) })
onUnmounted(() => { const optionDoms = Array.from(document.querySelectorAll('.scada-select-dropdown-option')); optionDoms.forEach((opt) => { opt.removeEventListener('mouseover', opt.mouseoverFn); opt.removeEventListener('mouseleave', opt.mouseleaveFn); }); document.body.removeEventListener('mousemove', moveHandler) })
return { selects, dropdownStyle, selectOptionStyle, selectOption, defaultSelect, handleMove, }
}}
const Select = { template: \`<div :id="nodeId" class="custom-select-node" :style="cssOuter" @click="clickHandler">
<div :style="cssInner">{{selects.label }}</div> <div style="position: absolute; top: 0; right: 0; bottom: 0; width: 25px;display: flex;align-items: center"> <div v-if="showDropdown" :style=" triangleupStyle"></div> <div v-else="!showDropdown" :style="triangledownStyle"></div> </div> </div>\`, props: { selects: { type: Object, default: { label: '请选择', value: '-' } }, showDropdown: { type: Boolean, default: false }, nodeId: { type: String, default: '' }, 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: 1, }, borderColor: { type: String, default: '#1890ff' }, triangleColor: { type: String, default: '#ffffff' }, backgroundColor: { type: String, default: '#1890ff', }, background: { type: String, default: 'none', }, borderRadius: { type: Number, default: 2 } }, emits: ["showHideSelect"], setup(props, { emit }) { const { ref, toRefs, computed, watch, onMounted, onUnmounted } = Vue const { width, height, defaultValue } = toRefs(props)
const realWidth = parseInt(width.value); const realHeight = parseInt(height.value);
const cssOuter = computed(() => { const borderWidths = props.strokeWidth * 2; let back = props.background; if (back !== 'none' && !back.includes('url')) { back = \`url(\${back})\`
} return \`
position: relative; border-width: \${props.strokeWidth}px; border-style: solid; width: \${realWidth - borderWidths}px; height: \${realHeight - borderWidths}px; line-height: \${realHeight - borderWidths}px; border-radius: \${props.borderRadius}px; border-color:\${props.borderColor}; background-color:\${props.backgroundColor}; background-image: \${back}; background-size: 100% 100%;\`
}) const cssInner = 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 \`
width: 100%; height: 100%; color: \${props.fontColor}; font-size: \${props.fontSize}px; text-align: left; padding: 0px 25px 0px 15px; box-sizing: border-box; font-family: \${props.fontFamily}; font-style: \${style.fontStyle}; font-weight: \${style.fontWeight}; text-decoration: \${style.textDecoration}; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; \`;
})
const triangledownStyle = computed(() => { const h = props.height; return \`
width: 0; height: 0; border-left: \${(h / 3) / 2}px solid transparent; border-right: \${(h / 3) / 2}px solid transparent; border-top: \${h / 3}px solid \${props.triangleColor}; \`
})
const triangleupStyle = computed(() => { const h = props.height; return \`
width: 0; height: 0; border-left: \${(h / 3) / 2}px solid transparent; border-right: \${(h / 3) / 2}px solid transparent; border-bottom: \${h / 3}px solid \${props.triangleColor}; \`
})
const clickHandler = (visible) => { const dropdowns = Array.from(document.querySelectorAll('.scada-select-dropdown')); dropdowns.forEach((drop) => { drop.remove() }); const selectNode = document.getElementById(props.nodeId); if (selectNode) { const { left, top, width, height } = selectNode.getBoundingClientRect(); emit('showHideSelect', { visible, left, top, width, height, }) } }
const listenerDocClick = function (e) { // 点击空白处消失下拉框
const clickOnDropdown = e.target.closest('.scada-select-dropdown') const selectNode = e.target.closest(".custom-select-node") if (!clickOnDropdown && !selectNode) { clickHandler(false) } }
onMounted(() => { document.addEventListener('click', listenerDocClick, true) })
onUnmounted(() => { document.removeEventListener('click', listenerDocClick, true) })
return { cssOuter, cssInner, clickHandler, triangledownStyle, triangleupStyle, } }}
class CustomSelectNode extends HtmlResize.view { clickTime = '' oldProperties = '{}'
setHtml(rootEl) { const { graphModel } = this.props; const { properties, width, height, } = this.props.model; const { fontColor, fontSize, fontFamily, fontStyle, strokeWidth, lineHeight, fill, strokeColor, dropdownFill, dropdownStrokeColor, dropdownFontColor, triangleColor, background, placeholder, borderRadius, dropdownStrokeWidth } = properties; const { normalData } = properties.dynamic || {}; const { model } = this.props; const el = document.createElement('div'); rootEl.innerHTML = ''; let dropdownInst = null; let instance = null; let show = false;
const dropdowns = Array.from(document.querySelectorAll('.scada-select-dropdown')); dropdowns.forEach((drop) => { drop.remove() });
const selectedHandler = (selects) => { if (instance) { instance.component.props.selects = selects; if (dropdownInst) { show = false; instance.component.props.showDropdown = false; if (dropdownInst) { dropdownInst.component.props.showDropdown = false; } const selectNode = document.getElementById(\`select-\${properties.id}\`);
if (selectNode) { document.body.removeChild(selectNode) } } graphModel.eventCenter.emit("node:change", { data: model, e: selects, }); } }
const showHideHandler = ({ visible, left, top, width, height }) => { if (visible !== undefined && visible === false) { show = visible; instance.component.props.showDropdown = false; if (dropdownInst) { dropdownInst.component.props.showDropdown = false; } return; } if (!show) { show = true; instance.component.props.showDropdown = true; const dropdownEl = document.createElement('div'); dropdownEl.setAttribute('id', \`select-\${properties.id}\`)
dropdownEl.setAttribute('style', \`position: fixed; left: \${left}px; top: \${top + height - 2}px; z-index: 8888\`);
let opts = []; if (normalData && normalData.defaultOptions) { if (typeof normalData.defaultOptions !== 'string') { opts = normalData.defaultOptions } else { opts = JSON.parse(normalData.defaultOptions); } } dropdownInst = createVNode(Options, { showDropdown: true, id: \`dropdown-\${properties.id}\`,
fontColor: dropdownFontColor, fontSize, fontFamily, fontStyle, width, height, lineHeight, backgroundColor: dropdownFill, borderColor: dropdownStrokeColor, hoverFontColor: properties.dropdownHoverFontColor, hoverFillColor: properties.dropdownHoverFill, strokeWidth: dropdownStrokeWidth, options: opts, selects: instance.component.props.selects, onSelected: selectedHandler }) dropdownInst.appContext = app._context render(dropdownInst, dropdownEl) document.body.appendChild(dropdownEl); } else { show = false; instance.component.props.showDropdown = false; if (dropdownInst) { dropdownInst.component.props.showDropdown = false; } const selectNode = document.getElementById(\`select-\${properties.id}\`);
if (selectNode) { document.body.removeChild(selectNode) } } }
instance = createVNode(Select, { selects: properties.event || { label: placeholder, value: '-' }, showDropdown: show, nodeId: \`select-input-\${properties.id}\`,
fontColor, fontSize, fontFamily, fontStyle, width, height, lineHeight, backgroundColor: fill, borderColor: strokeColor, triangleColor, strokeWidth, defaultValue: '', background, borderRadius, onShowHideSelect: showHideHandler }) instance.appContext = app._context render(instance, el) rootEl.appendChild(el); }
sameProps(properties) { const isSame = window._.isEqual(JSON.parse(this.oldProperties), properties); if (isSame) return true; this.oldProperties = JSON.stringify(properties); return false }
shouldUpdate() { const { properties } = this.props.model; const propertiesBack = window._.cloneDeep(properties); if (this.sameProps(propertiesBack)) { return false } return true; }
componentDidMount() { if (this.shouldUpdate) { this.setHtml(this.rootEl); } const { properties } = this.props.model; const { graphModel, model } = this.props; if (properties.event) { setTimeout(() => { graphModel.eventCenter.emit("node:change", { data: model, e: properties.event, }); }, 1000) } }
componentWillUnmount() { const dropdowns = Array.from(document.querySelectorAll('.scada-select-dropdown')); dropdowns.forEach((drop) => { drop.remove() }); }}
class CustomSelectModel 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 || 100; 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-select-node', view: CustomSelectNode, model: CustomSelectModel,})
`,css:`.scada-select-dropdown::-webkit-scrollbar {/*滚动条整体样式*/\r width: 0px; /*高宽分别对应横竖滚动条的尺寸*/\r height: 0px;\r}\r.scada-select-dropdown::-webkit-scrollbar-thumb {/*滚动条里面小方块*/\r border-radius: 0px;\r background: transparent;\r}\r.scada-select-dropdown::-webkit-scrollbar-track {/*滚动条里面轨道*/\r box-shadow: inset 0 0 1px transparent;\r border-radius: 1px;\r background: transparent;\r}\r.scada-select-dropdown-tooltip {\r position: absolute;\r display: inline-block;\r background-color: rgba(0,0,0,0.65);\r color: #ffffff;\r font-size: 12px;\r padding: 5px 5px;\r max-width: 120px;\r max-height: 120px;\r overflow-y: auto;\r z-index: 8888;\r transition: all 0.2s;\r}`,fakeData:""},u={id:e,name:n,aliasName:t,image:o,imageType:l,groupName:a,groupType:s,isRemote:!1,isDefault:!0,sectionType:i,config:r,files:d};export{t as aliasName,r as config,u as default,d as files,a as groupName,s as groupType,e as id,o as image,l as imageType,c as isDefault,p as isRemote,n as name,i as sectionType};
|
