|
|
const e="e7651bc9-934d-4686-9936-28ad6ff9cdd9",t="vertical-capsule-tank",a="垂直胶囊水箱",n=`<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="tb-shape-stroke" x="58.5" y="199.5" width="178" height="116" rx="58" transform="rotate(-90 58.5 199.5)" fill="#6216FF" fill-opacity="0" stroke="#242770" stroke-width="2"/> <mask id="mask0_3572_6660" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="61" y="24" width="111" height="173"> <rect class="tb-shape-stroke" x="62.5" y="195.5" width="170" height="108" rx="54" transform="rotate(-90 62.5 195.5)" fill="#F1F1F9" stroke="#242770" stroke-width="2"/> </mask> <g mask="url(#mask0_3572_6660)"> <rect class="tb-liquid-fill tb-liquid" x="61.5" y="118.5" width="110" height="172" fill="#7A8BFF"/> <rect class="tb-liquid-surface tb-liquid" x="61.5" y="118.5" width="110" height="1" fill="#7A8BFF"/> <rect class="tb-liquid-surface" x="61.5" y="118.5" width="110" height="1" fill="white" fill-opacity="0.1"/> </g> <path class="tb-shape-stroke" d="M58 146.5H174" stroke="#242770" stroke-width="2"/> <path class="tb-shape-stroke" d="M59 74.5H175" stroke="#242770" stroke-width="2"/> <mask id="path-7-inside-1_3572_6660" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 5.5H102.5V23.5C102.5 25.1569 108.992 26.5 117 26.5C125.008 26.5 131.5 25.1569 131.5 23.5V5.5Z"/> </mask> <path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 5.5H102.5V23.5C102.5 25.1569 108.992 26.5 117 26.5C125.008 26.5 131.5 25.1569 131.5 23.5V5.5Z"/> <path class="tb-shape-fill" d="M102.5 5.5V3.5H100.5V5.5H102.5ZM131.5 5.5H133.5V3.5H131.5V5.5ZM102.5 7.5H131.5V3.5L102.5 3.5V7.5ZM104.5 23.5V5.5H100.5V23.5H104.5ZM117 24.5C113.09 24.5 109.607 24.1707 107.152 23.6628C105.908 23.4055 105.034 23.1232 104.518 22.8712C104.257 22.7431 104.191 22.6721 104.217 22.6982C104.248 22.7304 104.5 23.0048 104.5 23.5H100.5C100.5 24.4095 100.954 25.0882 101.373 25.511C101.785 25.9277 102.289 26.2334 102.761 26.4643C103.713 26.9301 104.962 27.2943 106.342 27.5798C109.135 28.1577 112.902 28.5 117 28.5V24.5ZM129.5 23.5C129.5 23.0048 129.752 22.7304 129.783 22.6982C129.809 22.6721 129.743 22.7431 129.482 22.8712C128.966 23.1232 128.092 23.4055 126.848 23.6628C124.393 24.1707 120.91 24.5 117 24.5V28.5C121.098 28.5 124.865 28.1577 127.658 27.5798C129.038 27.2943 130.287 26.9301 131.239 26.4643C131.711 26.2334 132.215 25.9277 132.627 25.511C133.046 25.0882 133.5 24.4095 133.5 23.5H129.5ZM129.5 5.5V23.5H133.5V5.5H129.5Z" fill="#242770" mask="url(#path-7-inside-1_3572_6660)"/> <path class="tb-shape-stroke" d="M131.541 6.33233C131.54 6.33319 131.541 6.33233 131.541 6.33233ZM130.866 6.24158C131.077 6.33801 131.231 6.42584 131.341 6.5C131.231 6.57417 131.077 6.66199 130.866 6.75842C130.187 7.06915 129.141 7.3742 127.77 7.63954C125.045 8.16703 121.236 8.5 117 8.5C112.764 8.5 108.955 8.16703 106.23 7.63954C104.859 7.3742 103.813 7.06915 103.134 6.75842C102.923 6.66199 102.769 6.57417 102.659 6.5C102.769 6.42583 102.923 6.33801 103.134 6.24158C103.813 5.93085 104.859 5.6258 106.23 5.36046C108.955 4.83297 112.764 4.5 117 4.5C121.236 4.5 125.045 4.83297 127.77 5.36046C129.141 5.6258 130.187 5.93085 130.866 6.24158ZM102.459 6.66767C102.46 6.6668 102.459 6.66767 102.459 6.66767ZM131.539 6.66507C131.54 6.6668 131.541 6.66767 131.541 6.66767C131.541 6.66767 131.54 6.6668 131.539 6.66507Z" stroke="#242770" stroke-width="2"/> <path class="tb-shape-stroke" d="M131.541 3.33233C131.54 3.33319 131.541 3.33233 131.541 3.33233ZM130.866 3.24158C131.077 3.33801 131.231 3.42584 131.341 3.5C131.231 3.57417 131.077 3.66199 130.866 3.75842C130.187 4.06915 129.141 4.3742 127.77 4.63954C125.045 5.16703 121.236 5.5 117 5.5C112.764 5.5 108.955 5.16703 106.23 4.63954C104.859 4.3742 103.813 4.06915 103.134 3.75842C102.923 3.66199 102.769 3.57417 102.659 3.5C102.769 3.42583 102.923 3.33801 103.134 3.24158C103.813 2.93085 104.859 2.6258 106.23 2.36046C108.955 1.83297 112.764 1.5 117 1.5C121.236 1.5 125.045 1.83297 127.77 2.36046C129.141 2.6258 130.187 2.93085 130.866 3.24158ZM102.459 3.66767C102.46 3.6668 102.459 3.66767 102.459 3.66767ZM131.539 3.66507C131.54 3.6668 131.541 3.66767 131.541 3.66767C131.541 3.66767 131.54 3.6668 131.539 3.66507Z" stroke="#242770" stroke-width="2"/></svg>`,l="svg",i="大屏",o="水位",u=!1,c=!0,s="时间",r=`{"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":[],"id":"u:235f153e5ad5","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"描边颜色","name":"strokeColor","id":"u:7783b65d58a9","mode":"horizontal","format":"rgba","inputClassName":"w-full"},{"type":"input-color","label":"液体颜色","name":"liquidColor","id":"u:76fa4643d6bd","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"显示值","option":"","name":"showValue","falseValue":false,"trueValue":true,"id":"u:b52d7cc4b201","value":false,"mode":"horizontal","className":"m-b"}],"id":"u:83905272eb76"}],"id":"u:19e1ffafeb70","className":"m-b"},{"type":"select","id":"u:678a2c313b7f","label":"值类型","name":"valueType","options":[{"label":"百分比","value":"ratio"},{"label":"常规值","value":"normal"}],"multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"grid","id":"u:94b0e20f05da","columns":[{"body":[{"type":"input-color","label":"值颜色","name":"valueColor","id":"u:9b5b55cac08a","format":"rgba","mode":"horizontal","value":"rgba(245, 166, 35, 1)","className":"m-b","inputClassName":"w-full"},{"type":"input-number","label":"值字体大小","name":"valueFontSize","keyboard":true,"id":"u:06950e120b0a","st "nodes": [ { "id": "c80c2bf8-4b01-404c-a677-fe21efed0615", "type": "vertical-capsule-tank", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "c80c2bf8-4b01-404c-a677-fe21efed0615", "width": 200, "height": 200, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "showValue": true, "valueColor": "rgba(74, 144, 226, 1)", "warnColor": "rgba(245, 166, 35, 1)", "seriousColor": "rgba(208, 2, 27, 1)", "showUnit": true, "unitColor": "rgba(74, 144, 226, 1)", "nodeAlias": "垂直胶囊水箱", "showDefaultValue": false, "fontSize": 12, "strokeColor": "#242770", "liquidColor": "#7A8BFF", "valueType": "ratio", "valueFontSize": 16, "maxValue": 100, "warnValue": 75, "seriousValue": 90, "unitFontSize": 12, "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" } } } } ]}`,javascript:`const { createApp, createVNode, render } = Vue;const app = createApp({})
const defaultVal = 62;
const VerticalCapsuleTank = { template: \`<div>
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none" xmlns="http://www.w3.org/2000/svg" style="stroke: none"> <rect class="tb-shape-stroke" x="58.5" y="199.5" width="178" height="116" rx="58" transform="rotate(-90 58.5 199.5)" fill="#6216FF" fill-opacity="0" :stroke="finalStrokeColor" stroke-width="2"/> <mask id="mask0_3572_6660" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="61" y="24" width="111" height="173"> <rect class="tb-shape-stroke" x="62.5" y="195.5" width="170" height="108" rx="54" transform="rotate(-90 62.5 195.5)" fill="#F1F1F9" :stroke="finalStrokeColor" stroke-width="2"/> </mask> <g mask="url(#mask0_3572_6660)"> <g clip-path="url(#clip0_3572_6660)" :id="chartId" style="transform: translateY(42%); transition: all 0.35s ease-in-out;"> <rect class="tb-liquid-fill tb-liquid" x="61.5" y="118.5" width="110" height="172" :fill="finalLiquidColor"/> <rect class="tb-liquid-surface tb-liquid" x="61.5" y="118.5" width="110" height="1" :fill="finalLiquidColor"/> <rect class="tb-liquid-surface" x="61.5" y="118.5" width="110" height="1" fill="white" fill-opacity="0.1"/> </g> </g> <path class="tb-shape-stroke" d="M58 146.5H174" :stroke="finalStrokeColor" stroke-width="2"/> <path class="tb-shape-stroke" d="M59 74.5H175" :stroke="finalStrokeColor" stroke-width="2"/> <mask id="path-7-inside-1_3572_6660" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 5.5H102.5V23.5C102.5 25.1569 108.992 26.5 117 26.5C125.008 26.5 131.5 25.1569 131.5 23.5V5.5Z"/> </mask> <path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 5.5H102.5V23.5C102.5 25.1569 108.992 26.5 117 26.5C125.008 26.5 131.5 25.1569 131.5 23.5V5.5Z"/> <path class="tb-shape-fill" d="M102.5 5.5V3.5H100.5V5.5H102.5ZM131.5 5.5H133.5V3.5H131.5V5.5ZM102.5 7.5H131.5V3.5L102.5 3.5V7.5ZM104.5 23.5V5.5H100.5V23.5H104.5ZM117 24.5C113.09 24.5 109.607 24.1707 107.152 23.6628C105.908 23.4055 105.034 23.1232 104.518 22.8712C104.257 22.7431 104.191 22.6721 104.217 22.6982C104.248 22.7304 104.5 23.0048 104.5 23.5H100.5C100.5 24.4095 100.954 25.0882 101.373 25.511C101.785 25.9277 102.289 26.2334 102.761 26.4643C103.713 26.9301 104.962 27.2943 106.342 27.5798C109.135 28.1577 112.902 28.5 117 28.5V24.5ZM129.5 23.5C129.5 23.0048 129.752 22.7304 129.783 22.6982C129.809 22.6721 129.743 22.7431 129.482 22.8712C128.966 23.1232 128.092 23.4055 126.848 23.6628C124.393 24.1707 120.91 24.5 117 24.5V28.5C121.098 28.5 124.865 28.1577 127.658 27.5798C129.038 27.2943 130.287 26.9301 131.239 26.4643C131.711 26.2334 132.215 25.9277 132.627 25.511C133.046 25.0882 133.5 24.4095 133.5 23.5H129.5ZM129.5 5.5V23.5H133.5V5.5H129.5Z" :fill="finalStrokeColor" mask="url(#path-7-inside-1_3572_6660)"/> <path class="tb-shape-stroke" d="M131.541 6.33233C131.54 6.33319 131.541 6.33233 131.541 6.33233ZM130.866 6.24158C131.077 6.33801 131.231 6.42584 131.341 6.5C131.231 6.57417 131.077 6.66199 130.866 6.75842C130.187 7.06915 129.141 7.3742 127.77 7.63954C125.045 8.16703 121.236 8.5 117 8.5C112.764 8.5 108.955 8.16703 106.23 7.63954C104.859 7.3742 103.813 7.06915 103.134 6.75842C102.923 6.66199 102.769 6.57417 102.659 6.5C102.769 6.42583 102.923 6.33801 103.134 6.24158C103.813 5.93085 104.859 5.6258 106.23 5.36046C108.955 4.83297 112.764 4.5 117 4.5C121.236 4.5 125.045 4.83297 127.77 5.36046C129.141 5.6258 130.187 5.93085 130.866 6.24158ZM102.459 6.66767C102.46 6.6668 102.459 6.66767 102.459 6.66767ZM131.539 6.66507C131.54 6.6668 131.541 6.66767 131.541 6.66767C131.541 6.66767 131.54 6.6668 131.539 6.66507Z" :stroke="finalStrokeColor" stroke-width="2"/> <path class="tb-shape-stroke" d="M131.541 3.33233C131.54 3.33319 131.541 3.33233 131.541 3.33233ZM130.866 3.24158C131.077 3.33801 131.231 3.42584 131.341 3.5C131.231 3.57417 131.077 3.66199 130.866 3.75842C130.187 4.06915 129.141 4.3742 127.77 4.63954C125.045 5.16703 121.236 5.5 117 5.5C112.764 5.5 108.955 5.16703 106.23 4.63954C104.859 4.3742 103.813 4.06915 103.134 3.75842C102.923 3.66199 102.769 3.57417 102.659 3.5C102.769 3.42583 102.923 3.33801 103.134 3.24158C103.813 2.93085 104.859 2.6258 106.23 2.36046C108.955 1.83297 112.764 1.5 117 1.5C121.236 1.5 125.045 1.83297 127.77 2.36046C129.141 2.6258 130.187 2.93085 130.866 3.24158ZM102.459 3.66767C102.46 3.6668 102.459 3.66767 102.459 3.66767ZM131.539 3.66507C131.54 3.6668 131.541 3.66767 131.541 3.66767C131.541 3.66767 131.54 3.6668 131.539 3.66507Z" :stroke="finalStrokeColor" stroke-width="2"/></svg>
<div :style="getTitleStyle"> <div> <span :style="valueStyle">{{valueStr}}</span><span :style="unitStyle">{{unitStr}}</span> </div> </div> </div>\`,
props: { chartId: { type: String, default: '' }, currentData: { type: Number, default: 100 }, width: { type: Number, default: 350 }, height: { type: Number, default: 150 }, chartProps: { type: Object, default: () => { } }, thingName: { type: String, default: '' }, attr: { type: String, default: '' }, unit: { type: String, default: '' }, }, computed: { getTitleStyle() { return { position: 'absolute', top: '0px', bottom: \`0px\`,
width: '100%', zIndex: 100, display: 'flex', justifyContent: 'center', alignItems: 'center' } } }, setup(props) { const { computed, ref, watch, toRefs, nextTick } = Vue; const { chartProps, currentData, thingName, attr, width, height } = toRefs(props);
let valueStr = ref(''); let unitStr = ref(''); let finalLiquidColor = ref('#7A8BFF'); let finalStrokeColor = ref("#242770");
const updateChart = (realValue, properties) => { const { warnValue, seriousValue, maxValue, warnColor, seriousColor, showValue, valueType, showUnit, unit, liquidColor, strokeColor } = properties; const ratio = (realValue / maxValue * 100).toFixed(2); if (showValue) { if (valueType === 'ratio') { valueStr.value = ratio + '' showUnit && (unitStr.value = '%') } else { valueStr.value = realValue + '' showUnit && (unitStr.value = unit) } } finalLiquidColor.value = liquidColor; finalStrokeColor.value = strokeColor; if (seriousValue && realValue >= seriousValue) { finalLiquidColor.value = seriousColor } else if (warnValue && realValue >= warnValue) { finalLiquidColor.value = warnColor } setTimeout(() => { const tankNode = document.getElementById(props.chartId); const liquidLevel = Math.round(39 - (realValue / maxValue * 85)); tankNode.style.transform = \`translateY(\${liquidLevel}%)\`;
}, 50) }
watch([currentData, chartProps], ([val, properties]) => { nextTick(() => { updateChart(val, properties) }) }, { immediate: true, deep: true, })
const valueStyle = computed(() => { return { color: chartProps.value.valueColor, fontSize: chartProps.value.valueFontSize + 'px' } })
const unitStyle = computed(() => { return { color: chartProps.value.unitColor, fontSize: chartProps.value.unitFontSize + 'px', marginLeft: '3px' } })
return { valueStyle, unitStyle, valueStr, unitStr, finalLiquidColor, finalStrokeColor, } }}
class VerticalCapsuleTankNode extends HtmlResize.view { realValue = defaultVal oldProperties = {} chartRendered = false instance = null
setHtml(rootEl) { if (!rootEl) return; const { properties, width, height } = this.props.model; const { normalData } = properties.dynamic || {} let thingName = 'pressure'; let attr = 'score'; if (normalData && normalData.dataPoint) { const dataPointStrParsed = JSON.parse(normalData.dataPoint || '{}') const { deviceCode, dataPoint } = dataPointStrParsed; thingName = deviceCode; attr = dataPoint.split(',')[0]; } if (this.instance) { // 实时数据不能推送一次就创建一次图表，可以在原有实例基础之上更改数据。
Object.assign(this.instance.component.props, { name: properties.nodeAlias, chartId: \`liquidlevel-\${properties.id}\`,
currentData: this.realValue, width, height, chartProps: properties, thingName, attr, }) return } const el = document.createElement('div'); rootEl.innerHTML = ''; const instance = createVNode(VerticalCapsuleTank, { name: properties.nodeAlias, chartId: \`liquidLevel-\${properties.id}\`,
currentData: this.realValue, width, height, chartProps: properties, thingName, attr, }) instance.appContext = app._context render(instance, el) rootEl.appendChild(el); this.instance = instance; }
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 { normalData } = properties.dynamic || {};
if (normalData && !normalData.dataPoint && !normalData.defaultValue) { this.realValue = defaultVal; return true }
if (normalData) { const { defaultValue } = normalData || {}; if (defaultValue) { const realValue = window.resolveScadaNewValue(defaultValue) if (this.realValue !== Number(realValue)) { this.realValue = Number(realValue); return true; } } }
const propertiesBack = window._.cloneDeep(properties); if (propertiesBack.dynamic.normalData) { const isSameProps = this.sameProps(propertiesBack); if (isSameProps && this.chartRendered) { return false } else { if (!this.chartRendered) { this.chartRendered = true return true } if (!isSameProps) { return true; } } } }
updateHtml() { this.setHtml(this.rootEl); }
componentDidMount() { // 防止拖动时候频繁渲染图表
this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500); if (this.shouldUpdate()) { this.setHtml(this.rootEl); } }
componentDidUpdate() { if (this.shouldUpdate()) { this.updateHtmlDebounced(); } }}
class VerticalCapsuleTankModel 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: 'vertical-capsule-tank', view: VerticalCapsuleTankNode, model: VerticalCapsuleTankModel,})
`,css:"",fakeData:""},p={id:e,name:t,aliasName:a,image:n,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:r,files:d};export{a as aliasName,r as config,p as default,d as files,i as groupName,o as groupType,e as id,n as image,l as imageType,c as isDefault,u as isRemote,t as name,s as sectionType};
|
