|
|
const e="9baa74d2-12dd-4ca2-af3d-e328c34ec042",a="custom-tab-node",t="Tab 列表",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="1700615796607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10653" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M758.216 745.72H249.184c-44.008 0-79.816-35.808-79.816-79.816V279.712c0-44.008 35.808-79.816 79.816-79.816h439.496v127.872c0 8.912 5.168 15.12 9.792 15.12h139.56v323.016c0 44.008-35.808 79.816-79.816 79.816zM249.184 230.288a49.472 49.472 0 0 0-49.416 49.424v386.192a49.48 49.48 0 0 0 49.416 49.424h509.032a49.48 49.48 0 0 0 49.424-49.424V373.28H698.472c-22.16 0-40.184-20.408-40.184-45.504V230.288H249.184z" fill="#FF0031" p-id="10654"></path><path d="M834.232 278.352c0 6.44-4.304 11.656-9.608 11.656h-75.68c-5.304 0-9.608-5.216-9.608-11.656v-69.64c0-6.44 4.304-11.656 9.608-11.656h75.68c5.304 0 9.608 5.216 9.608 11.656v69.64z" fill="#D6072E" p-id="10655"></path><path d="M316.528 617.808V464.88h-54.616v-31.136h146.272v31.136h-54.496v152.928h-37.16zM579.072 617.808H538.64l-16.072-41.816h-73.576l-15.192 41.816h-39.424l71.688-184.064h39.304l73.704 184.064z m-68.432-72.824l-25.36-68.304-24.856 68.304h50.216zM598.904 433.744h73.568c14.568 0 25.432 0.608 32.584 1.824s13.552 3.744 19.208 7.592c5.648 3.848 10.352 8.976 14.128 15.384 3.768 6.4 5.648 13.584 5.648 21.528 0 8.624-2.32 16.528-6.968 23.728A43.2 43.2 0 0 1 718.176 520c11.216 3.256 19.832 8.832 25.864 16.696 6.024 7.864 9.04 17.12 9.04 27.752a54.808 54.808 0 0 1-5.832 24.424c-3.896 7.904-9.208 14.224-15.944 18.952-6.744 4.736-15.048 7.64-24.92 8.728-6.2 0.672-21.144 1.096-44.832 1.256h-62.648V433.744z m37.168 30.632v42.56h24.352c14.488 0 23.488-0.2 27-0.624 6.36-0.76 11.36-2.952 15-6.592s5.464-8.432 5.464-14.376c0-5.688-1.568-10.32-4.704-13.872-3.144-3.552-7.808-5.712-14-6.464-3.688-0.416-14.272-0.632-31.768-0.632h-21.344z m0 73.2v49.208h34.4c13.392 0 21.888-0.376 25.496-1.128 5.52-1.008 10.024-3.456 13.496-7.344 3.48-3.896 5.208-9.112 5.208-15.632 0-5.52-1.336-10.208-4.016-14.064s-6.552-6.656-11.616-8.416-16.048-2.632-32.952-2.632h-30.016z" p-id="10656"></path></svg>',l="svg",i="基础",o="常用",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:1b561d652a
"nodes": [ { "id": "533ecd8e-2be2-4715-85fb-50b5fa9cedcf", "type": "custom-tab-node", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "533ecd8e-2be2-4715-85fb-50b5fa9cedcf", "width": 150, "height": 42, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "borderRadius": 4, "tabMargin": 0, "unselectedFontColor": "rgba(255, 255, 255, 1)", "unselectedBorderColor": "", "unselectedBack": "rgba(155, 155, 155, 1)", "unselectedBackImg": "", "unselectedFontSize": 12, "unselectedBorderWidth": 1, "unselectedBorderRadius": 0, "selectedFontColor": "rgba(255, 255, 255, 1)", "selectedBorderColor": "", "selectedBack": "rgba(74, 144, 226, 1)", "selectedBackImg": "", "selectedFontSize": 12, "selectedBorderWidth": 1, "selectedBorderRadius": 0, "fontSize": 12, "nodeAlias": "Tab 列表", "showDefaultValue": false, "showUnit": false, "valueColor": "rgba(245, 166, 35, 1)", "tabBackground": "", "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", "targetParamsAttrsKeysEntitys": "keys" } ] } } } } ]}`,javascript:`const { createApp, createVNode, render } = Vue;const app = createApp({})const Tab = { template: \`<div :style="getStyle">
<div v-for="(item,index) in myRadioList" :key="item.value" :style="getTabStyle(item, unselectedFontColor, unselectedBorderColor, unselectedBack, unselectedBackImg, unselectedFontSize, unselectedBorderWidth, selectedFontColor, selectedBorderColor, selectedBack, selectedBackImg, selectedFontSize, selectedBorderWidth, tabMargin, unselectedBorderRadius, selectedBorderRadius, index, myRadioList)" @click="clickHandler(item)">{{item.label}}</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 }, tabMargin: { type: Number, default: 0 }, unselectedBorderRadius: { type: Number, default: 0 }, selectedBorderRadius: { type: Number, default: 0 }, tabBackground: { type: String, default: '' } }, emits: ["change"], computed: { getStyle() { const { width, height, borderRadius, tabBackground } = 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', 'background': tabBackground, 'background-size': 'cover', 'overflow': 'hidden' } }, getTabStyle: () => (item, unselectedFontColor, unselectedBorderColor, unselectedBack, unselectedBackImg, unselectedFontSize, unselectedBorderWidth, selectedFontColor, selectedBorderColor, selectedBack, selectedBackImg, selectedFontSize, selectedBorderWidth, tabMargin, unselectedBorderRadius, selectedBorderRadius, index, myRadioList) => { if (item.checked !== 'checked') { return { color: unselectedFontColor, 'font-size': unselectedFontSize + 'px', 'border-style': "solid", 'border-width': unselectedBorderWidth + 'px', 'border-color': unselectedBorderColor, 'background-color': unselectedBack, 'background-image': unselectedBackImg ? "url(" + unselectedBackImg + ")" : 'none', 'background-size': '100% 100%', 'display': 'flex', 'justify-content': 'center', 'align-items': 'center', 'flex': '1', 'height': \`calc(100% - \${unselectedBorderWidth * 2}px)\`,
'width': '100%', 'cursor': 'pointer', 'margin-right': tabMargin + 'px', 'border-radius': unselectedBorderRadius + 'px' } } else { const borderStyle = {} const length = myRadioList.length; if (index === 0) { borderStyle['border-right-width'] = 0; } else if (index === length - 1) { borderStyle['border-left-width'] = 0; } else { borderStyle['border-left-width'] = 0; borderStyle['border-right-width'] = 0; } return { color: selectedFontColor, 'font-size': selectedFontSize + 'px', 'border-style': "solid", 'border-width': selectedBorderWidth + 'px', 'border-color': selectedBorderColor, 'background-color': selectedBack, 'background-image': selectedBackImg ? "url(" + selectedBackImg + ")" : 'none', 'background-size': '100% 100%', 'display': 'flex', 'justify-content': 'center', 'align-items': 'center', 'flex': '1', 'height': \`calc(100% - \${selectedBorderWidth * 2}px)\`,
'width': '100%', 'cursor': 'pointer', 'margin-right': tabMargin + 'px', 'border-radius': selectedBorderRadius + 'px', ...borderStyle } } } }, setup(props, { emit }) { const { ref, watch } = Vue const myRadioList = ref([]) const clickHandler = (item) => { myRadioList.value.forEach((el) => { if (el.value === item.value) { el.checked = 'checked'; } else { el.checked = false } }) emit("change", item.value); }
watch(() => props.radioList, (val) => { myRadioList.value = val }, { immediate: true, })
watch(() => props.realValue, (val) => { if (val) { myRadioList.value.forEach((el) => { if (el.value === String(val)) { el.checked = 'checked'; } else { el.checked = false } }) } }, { immediate: true, })
return { clickHandler, myRadioList } }
}
class CustomTabNode 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, tabMargin, unselectedBorderRadius, selectedBorderRadius, tabBackground } = 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 = 'checked' } 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, }); } if (list[0]) { setTimeout(() => { changeHandler(list[0].value); }, 100) }
const instance = createVNode(Tab, { realValue, radioList: list, fontColor, fontSize, fontFamily, fontStyle, width, height, unselectedFontColor, unselectedBorderColor, unselectedBack, unselectedBackImg, unselectedFontSize, unselectedBorderWidth, selectedFontColor, selectedBorderColor, selectedBack, selectedBackImg, selectedFontSize, selectedBorderWidth, borderRadius, tabMargin, unselectedBorderRadius, selectedBorderRadius, tabBackground, 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 CustomTabModel 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-tab-node', view: CustomTabNode, model: CustomTabModel,})
`,css:"",fakeData:""},m={id:e,name:a,aliasName:t,image:n,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:d,files:r};export{t as aliasName,d as config,m as default,r as files,i as groupName,o as groupType,e as id,n as image,l as imageType,u as isDefault,c as isRemote,a as name,s as sectionType};
|
