|
|
const A="e24f1054-4026-4619-8e92-25546f819766",e="custom-simple-waterfill-node",E="简单球形水位",i="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGIAAANGCAYAAAC2qSgxAAAAAXNSR0IArs4c6QAAIABJREFUeF7svWuQLGd55/nPNzPr2tW3o25dOCBxJCShY6yrwQaB2R1mMNhzWbDYuRhjx06E1/Z+2NgNz34EfduwYzf2wxrWETNhYzyXtQw7FxuZGWaXi7h5kJAACUnAQYKDjtSt07fqrltmvrnxvJlv9VvZVdVV3X1K5/JvRUdVV2VWZf7e7Fb37zzP//HADxIgARIgARIgARIgARIgARIgARIgARIggZkQ8GbyLnwTEiABEiABEiABEiABEiABEiABEiABEiABUMTwIiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJkAAJkAAJkAAJkAAJkAAJUMTwGiABEiABEiABEiABEiABEiABEiABEiCBGRGgiJkRaL4NCZAACZAACZAACZAACZAACZAACZAACVDE8BogARIgARIgARIgARIgARIgARIgARIggRkRoIiZEWi+DQmQAAmQAAmQAAmQAAmQAAmQAAmQAAlQxPAaIAESIAESIAESIAESIAESIAESIAESIIEZEaCImRFovg0JkAAJkAAJXN0E0mvkdwovvbrXkWdHAiRAAiRAAiRwqQlcI780XWqMfH0SIAESIAESuNoIHFOsXC264ti/KVHcXG3fGTwfEiABEiABEjgugWP/enHcA+D+JEACJEACJEACsyQwpWCZRKg8jIl+n/jYR492nk8/Mtnr21c/+xAmOeoDB/Oxhyc8vo9O8PoTEXHfj8JmQvrcjARIgARIgASueAJT/5pwxZ8xT4AESIAESIAErnoCh8iWaTTFGMlSFCtjhclDh0Nf/8J0wuXwVxzcYuXdEwiUR0a/alHwjBU3k8ga+1aH/jZGSTPtWnN7EiABEiABEricCRz6v/7L+eB5bCRAAiRAAiRAAkUCIyTMMPkyRLKMqloZkCyOVJlEnjQbkwuWdnX0tmcPWeynxzxfbU8gYfL9G83Dtx2QOo68GVWNM1TaDJM1I38zo4zh9zoJkAAJkAAJXC0EKGKulpXkeZAACZAACVxjBCYQLgXRMkyyTCNYhgmVojixsmS3NJl8aZ8vbHfLwWXsXpjsteye5RuHiJQXBl+3evpw2SJ7zPWy7YqSZ5jYGSZwphE2B2SNK2ooaK6x72+eLgmQAAmQwNVMgCLmal5dnhsJkAAJkMAVTGCCLJcxVS4j24byapZiJUtRsriCZZRcMRIlFycDsuT1GfbeK/sC5aab9peiuz5erPSC6cTLYYtcisdLl/LK/vMvvbT/aqXr88d/sv9YX/K8ABRlzjBpUxQ2RVnTFzV5Vc3I9qepqmdcIqykOez64PMkQAIkQAIkMGsCFDGzJs73IwESIAESIIEBAkfIcxlR6VKsbplEtgyTLP0qlVsAI1gcsWKFiitTrDiJ/EGBEjtfLwOItp3nl/YhxDvO44vZ43GzIGMWJrxstge3Cxq5TNnafzyYd8TM5v7j4QLSDWf3IBkUOGH+tSt2rMQRgeOKGyNs8iocV9i4smYiSTOk7Wls5Yw9/kN/w6OgmfCK4mYkQAIkQAIkcOIEDv3f9Im/I1+QBEiABEiABK5pAhO0FLl8HOniVrn0pcuQChdb3WKrWkS2uK1CtpLFShZbuSKSpShYXLkiYqUvVJaAvkBZzMXJApDsZgJlXmSK2pcpiXP
"nodes": [ { "id": "bc7326fa-edd9-4888-84b4-a4b0da8a5f21", "type": "custom-simple-waterfill-node", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "bc7326fa-edd9-4888-84b4-a4b0da8a5f21", "width": 200, "height": 200, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "outline": { "show": true, "borderDistance": 3, "itemStyle": { "borderColor": "rgba(54, 115, 233, 1)", "borderWidth": 8, "shadowColor": "rgba(63, 218, 255, 0.5)", "shadowBlur": 10 } }, "codeConfig": "return option;", "showDefaultValue": false, "showUnit": false, "valueColor": "rgba(245, 166, 35, 1)", "fontSize": 12, "nodeAlias": "简单球形水位", "Waves": [ { "color": "rgba(13, 25, 148, 1)" }, { "color": "rgba(27, 58, 222, 1)" }, { "color": "rgba(37, 90, 233, 1)" } ], "waterFillShape": "circle", "backgroundStyle": { "color": "rgba(255, 0, 255, 0.01)" }, "maxValue": 1000, "valueDecimal": 3, "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" }, "eventsData": { "eventCombo": [ { "eventType": "click", "enable": false, "config": "" }, { "eventType": "dblClick", "enable": false, "config": "" } ] }, "uiData": { "dataPoint": "", "compareType": "", "conditionVariables": [] }, "animationData": { "animationCombo": [ { "dataPoint": "", "min": "", "max": "", "animationName": "旋转" } ] }, "hiddenData": { "hiddenCombo": [ { "dataPoint": "", "min": "", "max": "", "showOrHiddenName": "隐藏" } ] } } } } ]}`,javascript:`const { createApp, createVNode, render } = Vue;const app = createApp({})
const defaultVal = 623
const SimpleWaterFill = { template: '<div :id="chartId" :style="getStyle"></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: { getStyle() { return { width: \`\${this.width}px\`,
height: \`\${this.height}px\`
} } }, setup(props) { const { onMounted, nextTick, toRefs, watch } = Vue; const { chartProps, currentData, thingName, attr, width, height } = toRefs(props);
let myChart = null; const initChart = (data, pros) => { // 基于准备好的dom，初始化echarts实例
const dom = document.getElementById(props.chartId); if (dom) { if (!myChart) { myChart = echarts.init(dom); } // 由于实时推送时候不会重复创建实例，但是需更新画布大小。
myChart.resize({ width: width.value, height: height.value, }) if (data != null) { const { codeConfig, Waves, waterFillShape, backgroundStyle, outline, maxValue, valueDecimal } = pros; // 指定图表的配置项和数据
const ratioVal = (+data / maxValue).toFixed(valueDecimal); const totalColor = Waves.map(i => i.color); const totalDatas = totalColor.map( () => +ratioVal) var option = { series: [ { type: "liquidFill", data: totalDatas, shape: waterFillShape, direction: "right", //波浪方向或者静止
radius: "80%", // 水球颜色
color: totalColor, center: ["50%", "50%"], //水球位置
// outline 外边
outline, backgroundStyle, label: { show: true, normal: { textStyle: { fontSize: 20 //设置不起作用
} }, }, tooltip: { show: true } } ] };
// console.log('option', option);
const func = new Function('option', 'datas', codeConfig); const opt = func(window._.cloneDeep(option), data);
// console.log('opt', opt);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(opt); } } }
watch([currentData, chartProps], ([val, pros]) => { nextTick(() => { initChart(val, pros) }) }, { immediate: true, deep: true, }) }}
class CustomSimpleWaterFillNode 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: \`waterfill-\${properties.id}\`,
currentData: this.realValue, width, height, chartProps: properties, thingName, attr, unit: normalData.unit || 'km/h' }) return } const el = document.createElement('div'); rootEl.innerHTML = ''; const instance = createVNode(SimpleWaterFill, { name: properties.nodeAlias, chartId: \`gauge-\${properties.id}\`,
currentData: this.realValue, width, height, chartProps: properties, thingName, attr, unit: normalData.unit || 'km/h' }) 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 CustomSimpleWaterFillModel 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-simple-waterfill-node', view: CustomSimpleWaterFillNode, model: CustomSimpleWaterFillModel,})`,css:"",fakeData:""},B={id:A,name:e,aliasName:E,image:i,imageType:I,groupName:C,groupType:a,isRemote:!1,isDefault:!0,sectionType:t,config:l,files:g};export{E as aliasName,l as config,B as default,g as files,C as groupName,a as groupType,A as id,i as image,I as imageType,n as isDefault,J as isRemote,e as name,t as sectionType};
|
