|
|
const e="938ffb94-8afc-4c0d-95b1-66d0d59df174",a="custom-datetime-node",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="1688366518104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2918" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M694.832145 731.328581H767.925007c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432s-3.399668 19.398106-10.298994 26.297432c-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994h-73.092862c-10.698955 0-19.398106-3.399668-26.297432-10.298994-6.899326-6.899326-10.298994-15.598477-10.298994-26.297432s3.399668-19.398106 10.298994-26.297432c6.799336-6.799336 15.598477-10.298994 26.297432-10.298994z m0-219.378576H767.925007c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432 0 10.698955-3.399668 19.398106-10.298994 26.297432-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994h-73.092862c-10.698955 0-19.398106-3.399668-26.297432-10.298994-6.899326-6.899326-10.298994-15.598477-10.298994-26.297432 0-10.698955 3.399668-19.398106 10.298994-26.297432 6.799336-6.899326 15.598477-10.298994 26.297432-10.298994zM475.353579 731.328581h73.092862c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432s-3.399668 19.398106-10.298994 26.297432c-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994h-73.092862c-10.698955 0-19.398106-3.399668-26.297432-10.298994-6.899326-6.899326-10.298994-15.598477-10.298994-26.297432s3.399668-19.398106 10.298994-26.297432c6.899326-6.799336 15.598477-10.298994 26.297432-10.298994z m0-219.378576h73.092862c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432 0 10.698955-3.399668 19.398106-10.298994 26.297432s-15.598477 10.298994-26.297432 10.298994h-73.092862c-10.698955 0-19.398106-3.399668-26.297432-10.298994s-10.298994-15.598477-10.298994-26.297432c0-10.698955 3.399668-19.398106 10.298994-26.297432 6.899326-6.899326 15.598477-10.298994 26.297432-10.298994zM255.975002 731.328581h73.092862c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298995 26.297432s-3.399668 19.398106-10.298995 26.297432c-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994H255.975002c-10.698955 0-19.398106-3.399668-26.297431-10.298994-6.899326-6.899326-10.298994-15.598477-10.298995-26.297432s3.399668-19.398106 10.298995-26.297432c6.899326-6.799336 15.598477-10.298994 26.297431-10.298994z m0-219.378576h73.092862c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298995 26.297432 0 10.698955-3.399668 19.398106-10.298995 26.297432-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994H255.975002c-10.698955 0-19.398106-3.399668-26.297431-10.298994-6.899326-6.899326-10.298994-15.598477-10.298995-26.297432 0-10.698955 3.399668-19.398106 10.298995-26.297432 6.899326-6.899326 15.598477-10.298994 26.297431-10.298994z m36.596427-438.857143h438.857142V36.596426c0-10.698955 3.399668-19.398106 10.298995-26.297432C748.526902 3.399668 757.226052 0 767.925007 0s19.398106 3.399668 26.297432 10.298994c6.899326 6.899326 10.298994 15.598477 10.298994 26.297432v36.596426h182.882141c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432v877.614296c0 10.698955-3.399668 19.398106-10.298994 26.297432-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994H36.596426c-10.698955 0-19.398106-3.399668-26.297432-10.298994C3.399668 1006.80168 0 998.002539 0 987.303584V109.689288C0 98.990333 3.399668 90.291183 10.298994 83.391856c6.899326-6.899326 15.598477-10.298994 26.297432-10.298994h182.882141V36.596426c0-10.698955 3.399668-19.398106 10.298994-26.297432C236.576897 3.399668 245.276047 0 255.975002 0s19.398106 3.399668 26.297432 10.298994 10.298994 15.598477 10.298995 26. "nodes": [ { "id": "ce04328f-02d5-4d08-8694-7e3408566165", "type": "custom-datetime-node", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "ce04328f-02d5-4d08-8694-7e3408566165", "width": 150, "height": 35, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "strokeWidth": 1, "isRange": false, "darkTheme": true, "selectTheme": "molv", "fontSize": 13, "nodeAlias": "日期", "fontColor": "#ffffff", "fill": "rgba(74, 144, 226, 1)", "strokeColor": "rgba(74, 144, 226, 1)", "timeType": "datetime", "dateSelectBack": "rgba(13, 13, 45, 1)", "textAlign": "left", "dateSelectBorderColor": "rgba(23, 23, 81, 1)", "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" }, "eventsData": { "eventCombo": [ { "eventType": "change", "enable": false, "config": "", "targetParamsType": "times", "targetParamsTimesType": "nearest" } ] }, "uiData": { "dataPoint": "", "compareType": "", "conditionVariables": [] } } } } ]}`,javascript:`
const { createApp, createVNode, render } = Vue;const app = createApp({})const DateTime = { template: \`<div :style="getOuterStyle">
<input type="text" class="layui-input" :id="getNodeId" :value="dateTime" :style="cssStyle" readOnly> </div>\`, props: { nodeId: { type: String, default: '' }, defaultValue: { type: String, default: '[]' }, isRange: { type: Boolean, default: false }, fontColor: { type: String, default: '#333' }, fontSize: { type: Number, default: 14 }, fontFamily: { type: String, default: '宋体' }, fontStyle: { type: String, default: 'normal' }, width: { type: Number, default: 150 }, height: { type: Number, default: 35 }, lineHeight: { type: Number, default: 35, }, strokeWidth: { type: Number, default: 2, }, borderColor: { type: String, default: '#666' }, backgroundColor: { type: String, default: '#ffffff', }, timeType: { type: String, default: 'datetime', }, darkTheme: { type: Boolean, default: false }, dateSelectBack: { type: String, default: '#ffffff' }, textAlign: { type: String, default: 'left' }, selectTheme: { type: String, default: 'molv' }, dateSelectBorderColor: { type: String, default: '#e2e2e2' } }, emits: ["change"], setup(props, { emit }) { const { ref, toRefs, computed, onMounted } = Vue; const dateTime = ref('');
const getNodeId = computed(() => { return 'dateTimePicker' })
const { width, height, lineHeight } = toRefs(props)
const cssStyle = computed(() => { const borderWidths = props.strokeWidth * 6; const realWidth = parseInt(width.value); const realHeight = parseInt(height.value); return \`
position: relative; color: \${props.fontColor}; font-size: \${props.fontSize}px; text-align: \${props.textAlign}; border-width: \${props.strokeWidth}px; border-style: solid; width: \${realWidth - borderWidths}px; height: \${realHeight - borderWidths}px; line-height: \${lineHeight.value - borderWidths}px; border-radius: 4px; border-color:\${props.borderColor}; background-color:\${props.backgroundColor}; padding-left: \${props.textAlign === 'left' ? 10 : 0}px; outline: none;\`
})
const getOuterStyle = computed(() => { const w = parseInt(width.value); const h = parseInt(height.value); return \`
width: \${w}px; height: \${h}px; \`
})
onMounted(() => { setTimeout(() => { layui.use('laydate', function () { layui.laydate.index = Date.now(); var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({ elem: '#' + getNodeId.value, theme: props.selectTheme, value: new Date(), type: props.timeType, range: props.isRange, trigger: 'click', done: function (value, date, endDate) { if (props.isRange) { emit('change', { start: date, end: endDate }) } else { emit('change', { start: value, end: endDate }) } }, ready: function () { if (props.darkTheme && props.dateSelectBack && props.dateSelectBack !== '#ffffff') { const layDateDom = document.querySelector('.layui-laydate'); layDateDom.classList.add('dark-custom-theme'); const stylesheet = document.createElement('style'); stylesheet.innerText = \`
.layui-laydate.dark-custom-theme { background-color: \${props.dateSelectBack}; border: none; } .layui-laydate.dark-custom-theme .layui-laydate-list { background-color: \${props.dateSelectBack}; } .layui-laydate.dark-custom-theme .laydate-month-list { background-color: \${props.dateSelectBack}; } .layui-laydate.dark-custom-theme .laydate-year-list { background-color: \${props.dateSelectBack}; } .layui-laydate.dark-custom-theme .layui-laydate-footer span { background-color: \${props.dateSelectBack}; } .layui-laydate.dark-custom-theme .layui-laydate-content { border-color: \${props.dateSelectBorderColor}; } .layui-laydate.dark-custom-theme .layui-laydate-footer { border-color: \${props.dateSelectBorderColor}; } .layui-laydate.dark-custom-theme .layui-laydate-footer span{ border-color: \${props.dateSelectBorderColor}; } \`;
const head = document.getElementsByTagName('head')[0]; head.appendChild(stylesheet); } }, }); // 初始化默认时间传给外部
const timesFormat = { year: 'YYYY', month: 'YYYY-MM', datetime: 'YYYY-MM-DD HH:mm:ss' } if (props.isRange) { if (props.timeType === 'year') { emit('change', { start: window.dayjs(new Date().getTime()).startOf('year').subtract(1, ' year').format(timesFormat[props.timeType]), end: window.dayjs(new Date().getTime()).startOf('year').format(timesFormat[props.timeType]), }) } else if (props.timeType === 'month') { emit('change', { start: window.dayjs(new Date().getTime()).startOf('month').subtract(1, ' month').format(timesFormat[props.timeType]), end: window.dayjs(new Date().getTime()).startOf('month').format(timesFormat[props.timeType]), }) } else { emit('change', { start: window.dayjs(new Date().getTime()).startOf('day').format(timesFormat[props.timeType]), end: window.dayjs(new Date().getTime()).endOf('day').format(timesFormat[props.timeType]), }) } } else { emit('change', { start: window.dayjs(new Date().getTime()).format(timesFormat[props.timeType]), end: '' }) } }); // if (props.darkTheme) {
// document.getElementById('layui_theme_css').setAttribute('href', './plugins/layui/css/layui-theme-dark.css')
// } else {
// document.getElementById('layui_theme_css').removeAttribute('href')
// }
}, 200)
})
return { getNodeId, dateTime, cssStyle, getOuterStyle, } }}
class CustomDateTimeNode extends HtmlResize.view { oldProperties = {}
setHtml(rootEl) { const { graphModel } = this.props; const { properties, width, height } = this.props.model; const { isRange, fontColor, fontSize, fontFamily, fontStyle, strokeWidth, strokeColor, lineHeight, fill, id, timeType, darkTheme, dateSelectBack, textAlign, selectTheme, dateSelectBorderColor } = properties; const { normalData } = properties.dynamic || {}; const { defaultValue } = normalData || {}; const { model } = this.props; const el = document.createElement('div'); rootEl.innerHTML = '';
const changeHandler = (e) => { graphModel.eventCenter.emit("node:change", { data: this.props.model, e, }); }
const { uiData } = properties.dynamic || {}; let fillColor = fill let fontC = fontColor let realValue = '' if (uiData) { realValue = window.resolveScadaNewValue(uiData.defaultValue) 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.backColor && Number(realValue) >= from && Number(realValue) <= to) { fillColor = item.backColor } if (item.fontColor && Number(realValue) >= from && Number(realValue) <= to) { fontC = item.fontColor } } else if (item.type === 'equal') { if (Number(realValue) === Number(item.value)) { item.backColor && (fillColor = item.backColor); item.fontColor && (fontC = item.fontColor); dynamicName = item.valueLabel; } } else if (item.type === 'boolean') { if (realValue === 'true' || realValue === true) { item.backColor && (fillColor = item.backColor); item.fontColor && (fontC = item.fontColor); dynamicName = item.valueLabel; } } }) } }
const instance = createVNode(DateTime, { nodeId: id, isRange: isRange, fontColor: fontC, fontSize, fontFamily, fontStyle, width: properties.width, height: properties.height, lineHeight, backgroundColor: fillColor, borderColor: strokeColor, strokeWidth, defaultValue, timeType: timeType, darkTheme, dateSelectBack, textAlign, selectTheme, dateSelectBorderColor, 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 CustomDateTimeModel 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-datetime-node', view: CustomDateTimeNode, model: CustomDateTimeModel,})
`,css:"",fakeData:""},c={id:e,name:a,aliasName:t,image:n,imageType:l,groupName:o,groupType:i,isRemote:!1,isDefault:!0,sectionType:s,config:r,files:d};export{t as aliasName,r as config,c as default,d as files,o as groupName,i as groupType,e as id,n as image,l as imageType,u as isDefault,m as isRemote,a as name,s as sectionType};
|
