|
|
const A="4349220d-c128-4918-951e-c8e3c89b6513",E="custom-guage-outline-one",I="仪表板1",g="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGIAAANGCAYAAAC2qSgxAAAAAXNSR0IArs4c6QAAIABJREFUeF7s3QmcXGWV8P9zblVn7cAQhUFGBfM6vK8gmyQyobt6SQchiAOyBAgBV9wdRf+OCC64gOAMyzgK4jI4QlgCQXEhLOl0p5cgS9jRGZw3EBf0FYliOmtX3fP/1HKrb1Xfqrq9Vdet+vXn46ftzr33Oc/3uVRXnfs851HhCwEEEEAAAQQQQAABBBBAAAEEEECgKgJalVZoBAEEEEAAAQQQQAABBBBAAAEEEEBASMRwEyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAggggAACCCCAAAIIIIAAAlUSIBFTJWiaQQABBBBAAAEEEEAAAQQQQAABBEjEcA8ggAACCCCAAAIIIIAAAggggAACVRIgEVMlaJpBAAEEEEAAAQQQQAABBBBAAAEESMRwDyCAAAIIIIAAAggggAACCCCAAAJVEiARUyVomkEAAQQQQAABBBBAAAEEEEAAAQRIxHAPIIAAAgg "nodes": [ { "id": "9454c2bf-21d4-47f7-a0f8-bd8b79a8d366", "type": "custom-guage-outline-one", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "9454c2bf-21d4-47f7-a0f8-bd8b79a8d366", "width": 420, "height": 420, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "codeConfig": "return option", "nodeAlias": "仪表板1", "showDefaultValue": false, "showUnit": false, "valueColor": "rgba(245, 166, 35, 1)", "fontSize": 12, "range": { "startAngle": 225, "endAngle": -45, "min": 0, "max": 100 }, "guage": { "radius": 85, "axisTick": { "length": 5, "lineStyle": { "color": "rgba(60,189,252,1)" } }, "splitLine": { "length": 10, "lineStyle": { "color": "rgba(60,189,252,1)" } }, "axisLabel": { "distance": 10, "color": "#E6F5EE", "fontSize": 16 }, "pointer": { "width": 10, "length": 70 }, "detail": { "color": "#3CBDFC", "fontSize": 26 } }, "outline": { "itemStyle": { "normal": { "color": "#54F200" } }, "radius": 95, "axisLine": { "lineStyle": { "width": 16, "color": [ {} ], "bgColor": "#314655" } } }, "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" } } } } ]}`,javascript:`const { createApp, createVNode, render } = Vue;const app = createApp({})
const defaultVal = 45
const GuageOutlineOne = { 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, range, guage, outline } = pros; const { startAngle, endAngle, min, max } = range; const outlineCloned = window._.cloneDeep(outline); const guageCloned = window._.cloneDeep(guage); outlineCloned.radius = outlineCloned.radius + '%'; guageCloned.radius = guageCloned.radius + '%'; // 指定图表的配置项和数据
var color = new echarts.graphic.LinearGradient( 0, 0, 1, 0, [{ offset: 0, color: "#41D7F3", }, { offset: 1, color: "#3D9FFF", } ] ); var option = { backgroundColor: '', tooltip: { formatter: "{a} <br/>{c} {b}" }, series: [ { name: '', type: 'gauge', startAngle, endAngle, min, max, radius: guageCloned.radius, title: { show: false }, detail: { show: true, fontFamily: 'DIN', fontWeight: '500', color: guageCloned.detail.color, offsetCenter: [0, '70%'], formatter: function (value) { return value }, fontSize: guageCloned.detail.fontSize }, axisLine: { show: false }, axisTick: guageCloned.axisTick, splitLine: guageCloned.splitLine, axisLabel: { //数字离圆的距离
distance: guageCloned.axisLabel.distance, borderRadius: 1, color: guageCloned.axisLabel.color, fontWeight: 600, padding: 1, fontFamily: 'Alibaba PuHuiTi', fontSize: guageCloned.axisLabel.fontSize }, pointer: { ...guageCloned.pointer, length: guageCloned.pointer.length + '%' }, itemStyle: { color: color, shadowColor: 'rgba(0,138,255,0.45)', shadowBlur: 10, shadowOffsetX: 2, shadowOffsetY: 2 }, data: [{ value: data, name: '两区面积' }]
}, { name: "已到人数", type: 'gauge', radius: outlineCloned.radius, startAngle, endAngle, min, max, title: { show: false }, detail: { show: false }, axisLine: { show: true, lineStyle: { width: outlineCloned.axisLine.lineStyle.width, color: [ [ data / 100, color ], [ 1, outlineCloned.axisLine.lineStyle.bgColor ] ], } }, axisTick: { show: false, }, splitLine: { show: false, }, axisLabel: { show: false }, pointer: { show: false, }, itemStyle: { normal: { color: '#54F200', } }, data: [{ value: data, name: '年售电量情况' }] } ]
}
// 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 CustomGuageOutlineOneNode 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(GuageOutlineOne, { 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 CustomGuageOutlineOneModel 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-guage-outline-one', view: CustomGuageOutlineOneNode, model: CustomGuageOutlineOneModel,})`,css:"",fakeData:""},l={id:A,name:E,aliasName:I,image:g,imageType:e,groupName:C,groupType:B,isRemote:!1,isDefault:!0,sectionType:Q,config:n,files:t};export{I as aliasName,n as config,l as default,t as files,C as groupName,B as groupType,A as id,g as image,e as imageType,a as isDefault,i as isRemote,E as name,Q as sectionType};
|
