|
|
const A="f6bd2c27-bcc0-456a-8447-545b10d97a5d",e="custom-polar-waterfill-node",C="极坐标水位图",E="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGIAAANGCAYAAAC2qSgxAAAAAXNSR0IArs4c6QAAIABJREFUeF7s3QmcndP9+PHvee7MXWeySSRCJCRINAhqi4r8iiK1azVtUdRS/tZq1dIqWpRfS1pNKbUVrX0tFVt+SkVrTyQRQiQksgozc/e5z/m/nrvM3DtzZ7vPc/fP/F5+SWbu8z3f8z7PL3799pzvUcIXAggggAACCCCAAAIIIIAAAggggEBJBFRJRmEQBBBAAAEEEEAAAQQQQAABBBBAAAGhEMNLgAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBBBAAAEEEEAAAQQQoBDDO4AAAggggAACCCCAAAIIIIAAAgiUSIBCTImgGQYBBBBAAAEEEEAAAQQQQAABBBCgEMM7gAACCCCAAAIIIIAAAggggAACCJRIgEJMiaAZBgEEEEAAAQQQQAABBBBAAAEEEKAQwzuAAAIIIIAAAggggAACCCCAAAIIlEiAQkyJoBkGAQQQQAABBDoFbp+7zOtyDx8Ui5mDEqYepJSrWUyjWRJmk243mhJaN4m4/NJuBkyt/Dqh/dpUPq3FJ+3iTbSLb1DAaNtypHy61Zb609GbygadkKhhGBGt26Pa5YrouI66XDqitY42NDREwlpHGxOJSCKRiDY3N0dEJKqUamddEEAAAQQQQACBUgpQiCmlNmMhgAACCCBQYwKXzdUNm3g2TDAbGsfFYnpsPJHYIpEwNmtPGCOi7ebweFyGxNplUDQmgUhcvOGIuENR7YrHRJRWokwRw/pViygz9auR/jXzPSP5sy6f7/Lnb3xN5MgDC8INi8gGEbVBKb1Ba/25KLVBTNmglNpgmvpzpczk7w3D2BCPxz9vamqy/mwWNBoPIYAAAggggEDdC1CIqftXAAAEEEAAAQTyC1z7zrpd4qaxS6RdvhKJqwnBeGLLtphsGopLUyiqPaG4NASjWnUWVDqLKb0XWLIKMMmCSuq5/hRccgs26eJMulAzahMll56nS7ScamNH4UaMz5TICkn+o1aIJFZorVcEAoFVJUqGYRBAAAEEEECgigQoxFTRYpEqAggggAACTgn879LVm0birt1DptoxEtcTQ+3mVqG4bNYS05t8ETOb1od1g7aKJF13ouTsXMkthCR3tmR93irQGDl/zlNwyd4Bk9kR0yVOqkCT2TWT3kHTww6ZbceJnHNqqYoxfa5Ge6ZAo1WmUCMrtFIrGpVa4Xa7Vyilgn1G4QMIIIAAAgggUFMCFGJqajmZDAIIIIAAArkCv1i6Zu9QuzqoJd6+5+ftatv1scSIDTHtbY2ZqZ0sDhdCMvEkGTdVqLEKKZI5gtTrEaNeCi45R5YyO2ryf/7bh4pMm1oxxZi+XknrWNQKJfp9rWWBiJpvGHq+z+db3teD/BwBBBBAAAEEqlOAQkx1rhtZI4AAAgggkCNw2bK1o9qk/fC2dpn2ebvsuDravuUnMbM51G6q7r1XnDkalHv8qPceLqmdMgPdETOAI0uZAk+6AHTVL7Q0NVXvS6K1tCgl85Wo+VonFiilrOLMfKVUW/XOiswRQAABBBBAwBKgEMN7gAACCCCAQJUJXPjJ2oO+1IkDNibM3dbH2rdZFdfDV8XbGzoKLt2O9mSODPWjsJGzQ6ZzR0vXI0q973DJGidvE97eCkF9HEHq59Gos0/VMmHrqtkVM5A3cJm1a0aUnm9qvUAbxvxBXu+SgQTgswgggAACCCBQXgEKMeX1Z3QEEEAAAQR6Ffj5ss+mbxQ5Zk3C/NqKeGLrj+LxQEx06n9UL7cJZR0NyuxG6drDpfuf+9GLpZ+FkEzhJrdHTKZnTNY4Az4a1UdT33S8bx+uZZ/qOZ5k6/8KlFJRrc0FSoz/KKXn "nodes": [ { "id": "36843e65-444a-41ea-8223-5fbc4faae00c", "type": "custom-polar-waterfill-node", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "36843e65-444a-41ea-8223-5fbc4faae00c", "width": 200, "height": 200, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "outline": { "show": false }, "codeConfig": "return option;", "nodeAlias": "极坐标水位图", "showDefaultValue": false, "showUnit": false, "valueColor": "rgba(245, 166, 35, 1)", "fontSize": 12, "Waves": [ { "color": "rgba(46, 85, 244, 1)" }, { "color": "rgba(36, 98, 242, 1)" }, { "color": "rgba(19, 87, 239, 1)" } ], "maxValue": 1000, "waterFillShape": "circle", "backgroundStyle": { "color": "rgba(255, 255, 225, 0)", "borderWidth": 1 }, "outCircleColor": "rgba(225, 225, 225, 0.5)", "circleColors": [ { "offset": 0, "color": "#A098FC" }, { "offset": 0.3, "color": "#4386FA" }, { "offset": 0.6, "color": "#4FADFD" }, { "offset": 0.8, "color": "#0CD3DB" }, { "offset": 1, "color": "#646CF9" } ], "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" } } } } ]}`,javascript:`const { createApp, createVNode, render } = Vue;const app = createApp({})
const defaultVal = 623;
const PolarWaterFill = { 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, circleColors, outCircleColor } = pros; // 指定图表的配置项和数据
const ratioVal = (+data / maxValue).toFixed(2); const totalColor = Waves.map(i => i.color); const totalDatas = totalColor.map(() => +ratioVal); var option = { angleAxis: { max: 1000, clockwise: false, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { show: false, }, splitLine: { show: false, }, }, radiusAxis: { type: 'category', show: true, axisLabel: { show: false, }, axisLine: { show: false, }, axisTick: { show: false, }, }, polar: { center: ['50%', '50%'], //中心点位置
radius: ['80%', '85%'], //图形大小
}, series: [ { type: 'bar', z: 10, name: '外环', data: [620], showBackground: true, backgroundStyle: { color: outCircleColor, }, coordinateSystem: 'polar', roundCap: true, barWidth: 25, itemStyle: { normal: { color: { // 完成的圆环的颜色
colorStops: circleColors, }, }, }, }, { 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 CustomPolarWaterFillNode 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: \`polarwaterfill-\${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(PolarWaterFill, { 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 CustomPolarWaterFillModel 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-polar-waterfill-node', view: CustomPolarWaterFillNode, model: CustomPolarWaterFillModel,})`,css:"",fakeData:""},l={id:A,name:e,aliasName:C,image:E,imageType:t,groupName:I,groupType:a,isRemote:!1,isDefault:!0,sectionType:g,config:B,files:Q};export{C as aliasName,B as config,l as default,Q as files,I as groupName,a as groupType,A as id,E as image,t as imageType,i as isDefault,n as isRemote,e as name,g as sectionType};
|
