|
|
const e="f4abd80f-ad2e-4e7b-a2ec-9a7d7577bf09",t="custom-checkbox-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="1700711900749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5708" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M746.496 199.68H277.504A78.336 78.336 0 0 0 199.68 277.504v468.992a78.336 78.336 0 0 0 77.824 77.824h468.992a78.336 78.336 0 0 0 78.336-78.336V277.504a78.336 78.336 0 0 0-78.336-77.824z m-24.576 184.32L438.784 665.6a19.456 19.456 0 0 1-13.824 5.632A19.456 19.456 0 0 1 409.6 665.6l-108.032-120.32a19.456 19.456 0 0 1 29.184-26.112l95.232 105.984L694.272 358.4a19.456 19.456 0 1 1 27.648 27.648z" fill="#707070" p-id="5709"></path></svg>',l="svg",o="基础",i="常用",c=!1,u=!0,s="文字",d=`{"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":[{"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":"grid","columns":[{"body":[{"type":"input-number","label":"边框圆角","name":"borderRadius","id":"u:bea5a408f98f","mode":"horizontal","size":"full","inputControlClassName":"inputControlClassName-bea5a408f98f","keyboard":true,"step":1,"value":2,"suffix":"px","inputClassName":"w-full"}],"id":"u:afc37bde0156","md":12}],"id":"u:235f153e5ad5","className":"m-b"},{"type":"fieldset","i
"nodes": [ { "id": "e56e2ab8-9ca9-4458-81fd-7c308954882b", "type": "custom-checkbox-node", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "e56e2ab8-9ca9-4458-81fd-7c308954882b", "width": 100, "height": 18, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "borderRadius": 6, "unselectedFontColor": "rgba(255, 255, 255, 1)", "unselectedBorderColor": "rgba(176, 174, 174, 1)", "unselectedBack": "rgba(176, 174, 174, 1)", "unselectedBackImg": "", "unselectedFontSize": 12, "unselectedBorderWidth": 1, "selectedFontColor": "rgba(255, 255, 255, 1)", "selectedBorderColor": "rgba(74, 144, 226, 1)", "selectedBack": "rgba(74, 144, 226, 1)", "selectedBackImg": "", "selectedFontSize": 12, "selectedBorderWidth": 1, "fontSize": 12, "nodeAlias": "复选框", "showDefaultValue": false, "showUnit": false, "valueColor": "rgba(245, 166, 35, 1)", "fontColor": "rgba(74, 74, 74, 1)", "fontFamily": "Microsoft Yahei", "fontStyle": "", "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "", "dataFilterFn": "return datas", "defaultOptions": [ { "label": "电", "value": "A29" }, { "label": "水", "value": "B2" } ] }, "eventsData": { "eventCombo": [ { "eventType": "change", "enable": false, "config": "", "customEventHandler": false, "targetParamsType": "entitys", "targetParamsEntitys": "list" } ] } } } } ]}`,javascript:`
const { createApp, createVNode, render } = Vue;const app = createApp({})const CheckBox = { template: \`<div :style="getStyle">
<div v-for="item in myRadioList" style="flex: 1; display: flex; justify-content: flex-start; align-items: center; height: 100%;"> <div :key="item.value" :style="getTabStyle(item, unselectedFontColor, unselectedBorderColor, unselectedBack, unselectedBackImg, unselectedFontSize, unselectedBorderWidth, selectedFontColor, selectedBorderColor, selectedBack, selectedBackImg, selectedFontSize, selectedBorderWidth, borderRadius)" @click="clickHandler(item)"> <svg v-if="item.checked" t="1700717504809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> <path d="M356.7 720.3c-12.8-15.2-10.8-37.9 4.4-50.7l441.2-370.2c15.2-12.8 37.9-10.8 50.7 4.4 12.8 15.2 10.8 37.9-4.4 50.7L407.4 724.7c-15.2 12.8-37.9 10.8-50.7-4.4z" fill="#ffffff" p-id="10094"></path> <path d="M406.7 724.7c-15.2 12.8-37.9 10.8-50.7-4.4L170.9 499.6c-12.8-15.2-10.8-37.9 4.4-50.7 15.2-12.8 37.9-10.8 50.7 4.4L411.2 674c12.7 15.2 10.8 37.9-4.5 50.7z" fill="#ffffff" p-id="10095"></path> </svg> </div> <span :style="getLabelStyle">{{item.label}}</span> </div> </div>\`, props: { realValue: { type: String, default: '' }, radioList: { type: Array, default: () => [] }, 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 }, unselectedFontColor: { type: String, default: 'rgba(255, 255, 255, 1)' }, borderRadius: { type: Number, default: 2 }, unselectedBorderColor: { type: String, default: 'rgba(176, 174, 174, 1)' }, unselectedBack: { type: String, default: 'rgba(176, 174, 174, 1)' }, unselectedBackImg: { type: String, default: '' }, unselectedFontSize: { type: Number, default: 12 }, unselectedBorderWidth: { type: Number, default: 1 }, selectedFontColor: { type: String, default: 'rgba(255, 255, 255, 1)' }, selectedBorderColor: { type: String, default: 'rgba(74, 144, 226, 1)' }, selectedBack: { type: String, default: 'rgba(74, 144, 226, 1)' }, selectedBackImg: { type: String, default: '' }, selectedFontSize: { type: Number, default: 12 }, selectedBorderWidth: { type: Number, default: 1 } }, emits: ["change"], computed: { getStyle() { const { width, height, borderRadius } = this; return { width: width + 'px', height: height + 'px', display: 'flex', "flex-direction": width > height ? "row" : "column", "justify-content": "flex-start", "align-items": "center", 'border-radius': borderRadius + 'px', 'overflow': 'hidden' } }, getTabStyle: () => (item, unselectedFontColor, unselectedBorderColor, unselectedBack, unselectedBackImg, unselectedFontSize, unselectedBorderWidth, selectedFontColor, selectedBorderColor, selectedBack, selectedBackImg, selectedFontSize, selectedBorderWidth, borderRadius) => { if (!item.checked) { return { color: unselectedFontColor, 'font-size': unselectedFontSize + 'px', 'border-style': "solid", 'border-width': unselectedBorderWidth + 'px', 'border-color': unselectedBorderColor, 'border-radius': borderRadius + 'px', 'background-color': unselectedBack, 'background-image': unselectedBackImg ? "url(" + unselectedBackImg + ")" : 'none', 'display': 'flex', 'justify-content': 'center', 'align-items': 'center', 'flex': '1', 'height': '100%', 'width': '100%', 'cursor': 'pointer' } } else { return { color: selectedFontColor, 'font-size': selectedFontSize + 'px', 'border-style': "solid", 'border-width': selectedBorderWidth + 'px', 'border-color': selectedBorderColor, 'border-radius': borderRadius + 'px', 'background-color': selectedBack, 'background-image': selectedBackImg ? "url(" + selectedBackImg + ")" : 'none', 'display': 'flex', 'justify-content': 'center', 'align-items': 'center', 'flex': '1', 'height': '100%', 'width': '100%', 'cursor': 'pointer' } } }, getLabelStyle() { const { fontStyle } = this; const style = {}; if (fontStyle) { if (fontStyle.includes('bold')) { style["font-weight"] = 'bolder'; } if (fontStyle.includes('italic')) { style["font-style"] = 'italic' } if (fontStyle.includes('underline,line-through')) { style["text-decoration"] = 'underline line-through' } else if (fontStyle.includes('line-through,underline')) { style["text-decoration"] = 'line-through underline' } else if (fontStyle.includes('underline')) { style["text-decoration"] = 'underline' } else if (fontStyle.includes('line-through')) { style["text-decoration"] = 'line-through' } } return { flex: 'auto', 'margin-left': '5px', color: this.fontColor, 'font-size': this.fontSize + 'px', 'font-family': this.fontFamily, ...style, } } }, setup(props, { emit }) { const { ref, watch } = Vue const myRadioList = ref([]) const clickHandler = (item) => { myRadioList.value.forEach((el) => { if (el.value === item.value) { el.checked = !el.checked; } }) const selects = myRadioList.value.map(i => i.value); emit("change", selects); }
watch(() => props.radioList, (val) => { myRadioList.value = val }, { immediate: true, })
watch(() => props.realValue, (val) => { if (val) { myRadioList.value.forEach((el) => { const valArr = String(val).split(",") if (valArr.includes(el.value)) { el.checked = true; } else { el.checked = false } }) } }, { immediate: true, })
return { clickHandler, myRadioList } }
}
class CustomCheckBoxNode extends HtmlResize.view { oldProperties = {}
setHtml(rootEl) { const { properties, width, height, } = this.props.model; const { fontColor, fontSize, fontFamily, fontStyle, unselectedFontColor, unselectedBorderColor, unselectedBack, unselectedBackImg, unselectedFontSize, unselectedBorderWidth, selectedFontColor, selectedBorderColor, selectedBack, selectedBackImg, selectedFontSize, selectedBorderWidth, borderRadius } = properties; const { model, graphModel } = this.props; const el = document.createElement('div'); rootEl.innerHTML = '';
const { normalData } = properties.dynamic || {}; const { defaultOptions } = normalData || {}; let list = []; if (defaultOptions) { let opts = [] if (typeof defaultOptions !== 'string') { opts = defaultOptions } else { opts = JSON.parse(defaultOptions); } list = window._.cloneDeep(opts).map((el, index) => { if (index === 0) { el.checked = true } else { el.checked = false } return el; }) }
let realValue = ""; if (normalData) { realValue = window.resolveScadaNewValue(normalData.defaultValue); }
const changeHandler = (e) => { graphModel.eventCenter.emit("node:change", { data: this.props.model, e, }); }
const instance = createVNode(CheckBox, { realValue, radioList: list, fontColor, fontSize, fontFamily, fontStyle, width, height, unselectedFontColor, unselectedBorderColor, unselectedBack, unselectedBackImg, unselectedFontSize, unselectedBorderWidth, selectedFontColor, selectedBorderColor, selectedBack, selectedBackImg, selectedFontSize, selectedBorderWidth, borderRadius, onChange: changeHandler }) instance.appContext = app._context render(instance, el) rootEl.appendChild(el); }
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 propertiesBack = window._.cloneDeep(properties); // 由于事件change 会给properties 增加一个 event 属性（见目录scadaDashboard/Diagram/useDynamicEventsHandler），会引发属性的改变，导致组件重渲染。
delete propertiesBack.event; if (this.sameProps(propertiesBack)) { return false } return true; }}
class CustomCheckBoxModel 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; }
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-checkbox-node', view: CustomCheckBoxNode, model: CustomCheckBoxModel,})
`,css:"",fakeData:""},m={id:e,name:t,aliasName:a,image:n,imageType:l,groupName:o,groupType:i,isRemote:!1,isDefault:!0,sectionType:s,config:d,files:r};export{a as aliasName,d 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,t as name,s as sectionType};
|
