thing_web/public/scada/static/info-259e1b04.js

const A="3cd8adbd-53b0-46e8-8a82-b838f16cccee",e="custom-guage-outline-two",E="仪表板2",Q="data:image/png;base64,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
  "nodes": [
    {
      "id": "659b3546-395d-482b-b3c3-4019d1e001cf",
      "type": "custom-guage-outline-two",
      "x": 200,
      "y": 200,
      "text": {
        "value": "",
        "x": 200,
        "y": 200
      },
      "properties": {
        "id": "659b3546-395d-482b-b3c3-4019d1e001cf",
        "width": 420,
        "height": 420,
        "x": 200,
        "y": 200,
        "rotation": 0,
        "opacity": 1,
        "codeConfig": "return option",
        "nodeAlias": "仪表板2",
        "showDefaultValue": false,
        "showUnit": false,
        "valueColor": "rgba(245, 166, 35, 1)",
        "fontSize": 12,
        "range": {
          "startAngle": 225,
          "endAngle": -45,
          "min": 0,
          "max": 100
        },
        "guage": {
          "radius": 95,
          "axisTick": {
            "length": -8,
            "lineStyle": {
              "color": "#468EFD"
            }
          },
          "splitLine": {
            "length": -20,
            "lineStyle": {
              "color": "#468EFD"
            }
          },
          "axisLabel": {
            "color": "#4d5bd1",
            "distance": 30,
            "fontSize": 12
          },
          "pointer": {
            "width": 10,
            "length": 60
          },
          "detail": {
            "color": "#468EFD",
            "fontSize": 22
          }
        },
        "outline": {
          "radius": 75,
          "axisLine": {
            "lineStyle": {
              "bgColor": "#111F42",
              "width": 3
            }
          },
          "itemStyle": {
            "normal": {
              "color": "#468EFD"
            }
          }
        },
        "dynamic": {
          "normalData": {
            "dataPoint": "",
            "compareType": "",
            "conditionVariables": [],
            "defaultValue": "",
            "unit": ""
          }
        }
      }
    }
  ]
}`,javascript:`const { createApp, createVNode, render } = Vue;
const app = createApp({})

const defaultVal = 45


const GuageOutlineTwo = {
    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 = outlineCloned.itemStyle.normal.color;
                    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 CustomGuageOutlineTwoNode 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(GuageOutlineTwo, {
            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 CustomGuageOutlineTwoModel 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-two',
    view: CustomGuageOutlineTwoNode,
    model: CustomGuageOutlineTwoModel,
})`,css:"",fakeData:""},o={id:A,name:e,aliasName:E,image:Q,imageType:B,groupName:g,groupType:I,isRemote:!1,isDefault:!0,sectionType:t,config:C,files:n};export{E as aliasName,C as config,o as default,n as files,g as groupName,I as groupType,A as id,Q as image,B as imageType,i as isDefault,a as isRemote,e as name,t as sectionType};