|
|
const e="d34d1c46-24d7-49fe-8ce5-8fec1a2080c7",t="custom-time-show",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="1693817420118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4151" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M513.875209 140.210345a30.16195 30.16195 0 0 0-1.875721 0c-16.58063-0.521886-30.467919 12.504802-30.982641 29.094642-0.030699 0.62831-0.030699 1.258667 0 1.888v310.537616H233.156736c-17.125029 0-30.982642 13.871939-30.982642 30.982641 0 17.110703 13.857613 30.982642 30.982642 30.982642h278.842752c16.58063 0.521886 30.467919-12.504802 30.982642-29.094642 0.030699-0.62831 0.030699-1.258667 0-1.888V171.192987c0.5137-16.58984-12.496615-30.460756-29.106921-30.982642zM316.816111 274.147824l-43.388183-43.809785-43.38716 43.809785 43.38716 43.808761zM223.868185 723.67191l43.388183 42.940998 43.38716-42.940998-43.38716-42.973743zM481.016847 821.824371h61.965283v61.965284h-61.965283zM821.823859 481.017358h61.965284v61.965284h-61.965284z" fill="#707070" p-id="4152"></path><path d="M511.999488 16.280802c-273.789667 0-495.719198 221.941811-495.719198 495.719198s221.930555 495.719198 495.719198 495.719198 495.719198-221.941811 495.719199-495.719198C1007.295038 238.391459 785.607006 16.690124 511.999488 16.280802z m0 929.474136c-239.569284 0-433.754938-194.197934-433.754938-433.754938S272.430204 78.245062 511.999488 78.245062s433.754938 194.197934 433.754938 433.754938c-0.363274 239.406578-194.337103 433.396781-433.754938 433.754938z" fill="#707070" p-id="4153"></path><path d="M691.692057 721.999828l43.387159 43.808762 43.38716-43.808762-43.38716-43.809785zM700.980607 272.598538l43.38716 42.972721 40.271192-42.972721-40.271192-42.971697z" fill="#707070" p-id="4154"></path></svg>',l="svg",o="基础",i="常用",u=!1,c=!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: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",
"nodes": [ { "id": "a931aee0-87f3-43f5-9891-995e0b1f7757", "type": "custom-time-show", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "a931aee0-87f3-43f5-9891-995e0b1f7757", "width": 200, "height": 20, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "strokeWidth": 1, "showDayOfWeek": false, "formatType": "YYYY年MM月DD日 dddd HH:mm:ss", "shadowOnTop": false, "fontSize": 12, "hourMinuteSecondStyle": "// return {\\r\\n// float: 'right',\\r\\n// display: 'inline',\\r\\n// height: '100%',\\r\\n// fontSize: '25px',\\r\\n// marginLeft: '15px',\\r\\n// color: '#ffffff',\\r\\n// fontFamily: 'Impact',\\r\\n// }", "nodeAlias": "时间显示", "lineHeight": 20, "fill": "rgba(74, 144, 226, 1)", "dynamic": { "uiData": { "dataPoint": "", "compareType": "", "conditionVariables": [] } } } } ]}`,javascript:`
const { createApp, createVNode, render } = Vue;const app = createApp({})const Button = { template: '<div :style="getStyle" :class="{timesshow: true, shadowOnTop: shadowOnTop}">{{ currentTime }}<span v-if="hourMinuteSecondStyleRet" :style="hourMinuteSecondStyleRet"> {{hourMinuteSecond}}</span></div>', props: { 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: 18 }, lineHeight: { type: Number, default: 18, }, backgroundColor: { type: String, default: '#1890ff', }, strokeColor: { type: String, default: '#1890ff', }, strokeWidth: { type: Number, default: 1, }, opacity: { type: Number, default: 1, }, realValue: { type: [String, Number], default: '' }, showDayOfWeek: { type: Boolean, default: false }, formatType: { type: String, default: 'YYYY-MM-DD HH:mm:ss', }, hourMinuteSecondStyle: { type: String, default: '', }, shadowOnTop: { type: Boolean, default: false } }, computed: { getStyle() { const { fontColor, fontSize, fontFamily, fontStyle, width, height, lineHeight, backgroundColor, strokeColor, strokeWidth, opacity } = 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, "font-style": style.fontStyle, "font-weight": style.fontWeight, "text-decoration": style.textDecoration, 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": '2px', "box-shadow": "0 2px 0 rgba(0, 0, 0, 0.45)", "border-color": strokeColor, "border-style": "solid", "border-width": parseInt(strokeWidth) + 'px', "opacity": opacity, } } }, setup(props) { const { ref, onMounted, computed } = Vue let currentTime = ref(''); let hourMinuteSecond = ref(''); onMounted(() => { let type = props.formatType; if (props.hourMinuteSecondStyle) { type = type.replace(' HH:mm:ss', ''); } const date = window.dayjs(new Date()); currentTime.value = date.format(type); if (props.hourMinuteSecondStyle) { hourMinuteSecond.value = date.format("HH:mm:ss"); } setInterval(() => { const date2 = window.dayjs(new Date()); currentTime.value = date2.format(type); if (props.hourMinuteSecondStyle) { hourMinuteSecond.value = date2.format("HH:mm:ss"); } }, 1000)
})
const hourMinuteSecondStyleRet = computed(() => { if (props.hourMinuteSecondStyle) { const stylesStr = props.hourMinuteSecondStyle; const fn = new Function('', stylesStr); const styleObj = fn(); return { lineHeight: props.height + 'px', ...styleObj, }; } else { return null } }) return { currentTime, hourMinuteSecond, hourMinuteSecondStyleRet } }}
class CustomTimeShowNode extends HtmlResize.view { setHtml(rootEl) { const { graphModel } = this.props; const { properties, width, height, } = this.props.model; const { content, fontColor, fontSize, fontFamily, fontStyle, lineHeight, fill, strokeColor, strokeWidth, opacity, showDayOfWeek, formatType, hourMinuteSecondStyle, shadowOnTop } = properties; const { model } = this.props; const el = document.createElement('div'); rootEl.innerHTML = '';
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(Button, { fontColor: fontC, fontSize, fontFamily, fontStyle, width, height, lineHeight, backgroundColor: fillColor, strokeColor, strokeWidth, opacity, realValue, showDayOfWeek, formatType, hourMinuteSecondStyle, shadowOnTop }) instance.appContext = app._context render(instance, el) rootEl.appendChild(el); }}
class CustomTimeShowModel 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-time-show', view: CustomTimeShowNode, model: CustomTimeShowModel,})
`,css:`.timesshow.shadowOnTop:after {\r content: '';\r display: inline-block;\r height: 12px;\r position: absolute;\r top: 50%;\r right: 0;\r left: 0;\r margin-top: -6px;\r background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);\r background-size: cover;\r z-index: 100;\r}`,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,c as isDefault,u as isRemote,t as name,s as sectionType};
|
