|
|
const e="0677d751-8a3b-40d8-ba76-02fef3a5ee62",t="custom-gauge-chart",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="1695020298267" class="icon" viewBox="0 0 1286 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6072" xmlns:xlink="http://www.w3.org/1999/xlink" width="251.171875" height="200"><path d="M792.260975 437.207122a56.22205 56.22205 0 0 0-29.32832 8.153046l-2.09488-3.453721-141.319474 141.772421c-1.981643 0.113237-4.076523 0.056618-5.888311 0.169855-48.012385 0-87.135685 39.010063-87.192303 87.022448 0 48.069004 39.1233 87.192303 87.192303 87.192304s87.192303-39.1233 87.135685-86.343028a45.464558 45.464558 0 0 0 0.283092-6.228022l131.467876-131.128165a56.618379 56.618379 0 0 0 16.645803-40.255668 56.278669 56.278669 0 0 0-16.702422-40.199049 56.505142 56.505142 0 0 0-40.199049-16.702421z" fill="#4DA1FF" p-id="6073"></path><path d="M1164.979763 284.733827C970.21254-3.623576 577.337609-79.775296 288.866969 114.822072 0.566184 309.532677-75.642154 702.520845 119.068451 991.048104c9.625124 13.814884 25.081942 22.36426 41.784363 23.156916l0.905894 0.396329h2.491209a53.900697 53.900697 0 0 0 46.540307-80.171624l-1.981643-3.566958a519.303771 519.303771 0 0 1-88.834236-259.708504l57.920601-0.056618c28.139334-1.981643 50.843304-24.742232 52.881566-52.881566a57.184563 57.184563 0 0 0-53.617605-60.921376h-52.994802a520.492757 520.492757 0 0 1 93.420325-227.152936l30.913635 30.857017c21.231892 18.457592 53.334513 18.570828 74.679642 0.33971 23.892956-20.439235 26.723875-56.618379 5.718456-81.190755l-33.857791-34.197501a526.154595 526.154595 0 0 1 289.999337-128.863431l-0.056619 1.641933 0.056619 72.811236c1.981643 28.252571 24.79885 51.013159 53.051421 53.051421a55.54263 55.54263 0 0 0 41.444653-13.871503 57.184563 57.184563 0 0 0 19.589959-39.915957V119.125069l-0.056618-1.472078a524.682517 524.682517 0 0 1 287.904456 126.881787l-36.292381 36.292381c-18.51421 21.684839-18.400973 53.051421 0.283092 74.566405a56.844852 56.844852 0 0 0 81.134137 5.208891l32.442331-32.102621a517.831693 517.831693 0 0 1 95.401969 228.681632l-55.655867 0.056619a57.354418 57.354418 0 0 0-52.881566 52.881566 56.901471 56.901471 0 0 0 53.617605 60.921375h59.789008a519.303771 519.303771 0 0 1-86.116554 255.405507 53.730842 53.730842 0 0 0 54.919827 81.360611 53.504368 53.504368 0 0 0 34.93354-22.307642 629.143426 629.143426 0 0 0-3.566958-700.765675z" fill="#4DA1FF" p-id="6074"></path></svg>',i="svg",l="动态",o="图表组件",u=!1,c=!0,d="时序",s=`{"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 轴",
"nodes": [ { "id": "f7ceb814-b019-489f-8678-7ec0e3a11dec", "type": "custom-gauge-chart", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "f7ceb814-b019-489f-8678-7ec0e3a11dec", "width": 500, "height": 500, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "grid": { "show": false, "left": "20", "top": "20", "right": "20", "bottom": "20" }, "range": { "startAngle": 180, "endAngle": 0, "min": 0, "splitNumber": 6, "max": 240 }, "progress": { "show": true, "roundCap": true, "width": 18 }, "pointer": { "show": true, "width": 12, "length": "75%", "icon": "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z" }, "axisLine": { "show": true, "roundCap": true, "lineStyle": { "color": [ { "ratio": "0.3", "color": "#67e0e3" }, { "ratio": "0.7", "color": "#37a2da" }, { "ratio": "1", "color": "#fd666d" } ], "width": 18 } }, "axisTick": { "show": true, "splitNumber": 2, "lineStyle": { "color": "#999" } }, "splitLine": { "show": true, "length": 13, "lineStyle": { "width": 3, "color": "#999" } }, "axisLabel": { "show": true, "distance": 30, "fontSize": 20, "color": "#999" }, "title": { "show": true, "color": "#50e3c2", "fontSize": 16 }, "codeConfig": "return option;", "showDefaultValue": false, "showUnit": false, "nodeAlias": "仪表图", "fontSize": 0, "itemStyle": { "color": "#7ed321" }, "value": { "color": "#50e3c2", "fontSize": 14 }, "unit": { "color": "#50e3c2", "fontSize": 12 }, "valueConfig": { "color": "#50e3c2", "fontSize": 14 }, "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "kWh" } } } } ]}`,javascript:`const { createApp, createVNode, render } = Vue;const app = createApp({})
const defaultValue = 100
const GaugeChart = { 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) { const { grid, codeConfig, range, progress, pointer, axisLine, axisTick, splitLine, axisLabel, itemStyle, title, valueConfig, unit } = pros; // 指定图表的配置项和数据
// 轴线底色拼装
// 发现图表一直渲染的情况。就要注意图表数据多层对象嵌套的引用问题。
const newAxisLine = window._.cloneDeep(axisLine); const Colors = [] const oldColor = newAxisLine.lineStyle.color if (oldColor && oldColor.length > 0) { oldColor.forEach((item) => { Colors.push([item.ratio, item.color]) }) newAxisLine.lineStyle.color = Colors; } else if(oldColor && oldColor.length === 0) { delete newAxisLine.lineStyle.color }
var option = { grid, tooltip: { formatter: '{a} <br/>{b} : {c}%' }, series: [ { name: thingName.value, title, type: 'gauge', ...range, progress, pointer, axisLine: newAxisLine, axisTick, splitLine, axisLabel, itemStyle, detail: { backgroundColor: 'transparent', borderColor: '#999', borderWidth: 0, width: '100%', lineHeight: 16, height: 16, borderRadius: 8, offsetCenter: [0, '35%'], valueAnimation: false, formatter: function (value) { return '{value|' + value.toFixed(2) + '}{unit|' + props.unit + '}'; }, rich: { value: { fontSize: valueConfig.fontSize, fontWeight: 'bolder', color: valueConfig.color, }, unit: { fontSize: unit.fontSize, color: unit.color, padding: [0, 0, 0, 10] } } }, data: [ { value: data, name: attr.value } ] } ] };
const func = new Function('option', 'datas', codeConfig); const opt = func(window._.cloneDeep(option), data);
// console.log('opt', opt);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(opt); } } }
watch([currentData, chartProps, width, height], ([val, pros]) => { if (val) { nextTick(() => { initChart(val, pros) }) } }, { immediate: true, deep: true, }) }}
class CustomGaugeChartNode extends HtmlResize.view { realValue = defaultValue 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: \`gauge-\${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(GaugeChart, { 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 = defaultValue; 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() { if (this.shouldUpdate()) { this.setHtml(this.rootEl); } // 防止拖动时候频繁渲染图表
this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500); }
componentDidUpdate() { if (this.shouldUpdate()) { this.updateHtmlDebounced(); } }}
class CustomGaugeChartModel 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-gauge-chart', view: CustomGaugeChartNode, model: CustomGaugeChartModel,})`,css:"",fakeData:""},p={id:e,name:t,aliasName:a,image:n,imageType:i,groupName:l,groupType:o,isRemote:!1,isDefault:!0,sectionType:d,config:s,files:r};export{a as aliasName,s as config,p as default,r as files,l as groupName,o as groupType,e as id,n as image,i as imageType,c as isDefault,u as isRemote,t as name,d as sectionType};
|
