thing_web/public/scada/static/info-255d5c9c.js

const e="e640d3bc-3f8e-4a5c-8c86-1d1fd8ba00fb",a="custom-liquidball-node",t="水球图",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="1695175838670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6237" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M511.974273 512.025215m-486.3741 0a486.374101 486.374101 0 1 0 972.748201 0 486.374101 486.374101 0 1 0-972.748201 0Z" fill="#FFFFFF" p-id="6238"></path><path d="M149.958351 874.041137A511.972737 511.972737 0 1 1 511.974273 1023.997952a508.644915 508.644915 0 0 1-362.015922-149.956815zM51.19881 512.025215a460.775464 460.775464 0 1 0 460.775463-460.775464 461.313035 461.313035 0 0 0-460.775463 460.775464z m208.475298 252.325763v-504.651527h100.909827v50.454913h-50.454913v138.232639a205.966632 205.966632 0 0 1 201.845251 13.260094 206.01783 206.01783 0 0 0 201.870851 13.260094v-164.650432h-252.325764v-50.454913h302.806276v504.651527z" fill="#1890FF" p-id="6239"></path></svg>',l="svg",i="动态",o="图表组件",c=!1,u=!0,s="时序",r=`{"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&nbsp;&nbsp;&nbsp;&nbsp;","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 轴","name":"x","keyboard":true,"id":"u:29852d093d9d","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:1b561d652acc","md":6},{"body":[{"type":"input-number","label":"Y 轴","name":"y","keyboard":true,"id":"u:dc8c1daed8ed","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:9672575193ac","md":6}]},{"type":"grid","id":"u:a332a7bf83c1","className":"m-b","columns":[{"body":[{"type":"input-number","label":"旋转","name":"rotation","id":"u:f6a2dbb518f9","placeholder":"组件旋转角度","mode":"horizontal","size":"full","className":"","keyboard":true,"step":1,"suffix":"deg","value":0,"labelAlign":"left","inputClassName":"w-full"}],"id":"u:646cd98b7955","md":6},{"body":[{"type":"input-number","label":"透明","name":"opacity","id":"u:cf80f59d8d42","placeholder":"组件透明度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":0,"suffix":"","value":1,"inputClassName":"w-full","precision":2}],"id":"u:51ddf54ac749","md":6}],"gap":""},{"type":"grid","columns":[{"id":"u:ef5ffa6a88c9","body":[{"type":"select","label":"水球类型","name":"liquidType","options":[{"label":"
  "nodes": [
    {
      "id": "ac05917b-d79b-4e78-952d-62cd68de1fe8",
      "type": "custom-liquidball-node",
      "x": 200,
      "y": 200,
      "text": {
        "value": "",
        "x": 200,
        "y": 200
      },
      "properties": {
        "id": "ac05917b-d79b-4e78-952d-62cd68de1fe8",
        "width": 230,
        "height": 230,
        "x": 200,
        "y": 200,
        "rotation": 0,
        "opacity": 1,
        "fontSize": 24,
        "showDefaultValue": false,
        "showUnit": false,
        "nodeAlias": "水球图",
        "fontColor": "#7ed321",
        "backgroundColor": "#e8e8e8",
        "waveOneColor": "#80FFA5",
        "waveTwoColor": "#00DDFF",
        "borderWidth": 2,
        "borderColor": "#50e3c2",
        "liquidType": "liquidball",
        "dynamic": {
          "normalData": {
            "dataPoint": "",
            "compareType": "",
            "conditionVariables": [],
            "defaultValue": "",
            "unit": ""
          }
        }
      }
    }
  ]
}`,javascript:`const { createApp, createVNode, render } = Vue;
const app = createApp({})

const defaultValue = 100
const defaultMaxValue = 1000

const LiquidBall= {
    template: \`<div :id="chartId" :style="getStyle" class="liquidball-node">
                    <div data-v-a6bbf8c4="" :style="liquidballBack" class="liquidballBackStyle">
                        <div class="inner" :style="getPer">
                            <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" :style="waveOneFill" class="box-waves">
                                <path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z"></path>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140"  :style="waveTwoFill" class="box-waves">
                                <path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z"></path>
                            </svg>
                        </div>
                        <div :style="getTextStyle" class="box-text">
                           <div>
                             <p style="margin-right: 5px;margin-bottom: 3px; font-size: 14px; text-align: center">{{attr}}</p>
                            {{getRatio}}
                           </div>
                        </div>
                    </div>
                </div>\`,
    props: {
        chartId: {
            type: String,
            default: ''
        },
        currentData: {
            type: String,
            default: ''
        },
        maxValue: {
            type: Number,
            default: 1000
        },
        width: {
            type: Number,
            default: 350
        },
        height: {
            type: Number,
            default: 150
        },
        chartProps: {
            type: Object,
            default: () => ({})
        },
        thingName: {
            type: String,
            default: ''
        },
        attr: {
            type: String,
            default: ''
        },
    },
    computed: {
        getStyle() {
            const properties = this.chartProps;
            if(properties.liquidType === 'liquidball') {
                return {
                    width: \`\${this.width}px\`,
                    height: \`\${this.height}px\`,
                    border: \`\${properties.borderWidth}px solid \${properties.borderColor}\`,
                    position: 'relative',
                    'border-radius': '50%',
                    'box-sizing': 'border-box',
                    'display': 'flex',
                    'justify-content': 'center',
                    'align-items': 'center',
                }
            } else if (properties.liquidType === 'liquidpool'){
                return {
                    width: \`\${this.width}px\`,
                    height: \`\${this.height}px\`,
                   'border-right': \`\${properties.borderWidth}px solid \${properties.borderColor}\`,
                   'border-bottom': \`\${properties.borderWidth}px solid \${properties.borderColor}\`,
                   'border-left': \`\${properties.borderWidth}px solid \${properties.borderColor}\`,
                    position: 'relative',
                    'box-sizing': 'border-box',
                    'display': 'flex',
                    'justify-content': 'center',
                    'align-items': 'center',
                }
            }
        },
        liquidballBack () {
            const properties = this.chartProps;
            return {
                position: 'relative',
                overflow: 'hidden',
                'background-color': properties.backgroundColor,
                width: \`calc(100% - \${properties.borderWidth * 2}px)\`,
                height: \`calc(100% - \${properties.borderWidth * 2}px)\`,
                'border-radius': properties.liquidType === 'liquidball' ? '50%' : '2px'
            }
        },
        getTextStyle() {
            const properties = this.chartProps;
            const {fontColor, fontSize, fontFamily, fontStyle, lineHeight, letterSpacing } = properties;
            return {
                'font-size': fontSize + 'px',
                'font-family': fontFamily,
                'font-style': fontStyle,
                'line-height': lineHeight,
                'letter-spacing': letterSpacing,
                'color': fontColor,
            }
        },
        waveOneFill() {
            return {
                fill: this.chartProps.waveOneColor,
            }
        },
        waveTwoFill() {
            return {
                fill: this.chartProps.waveTwoColor,
            }
        },
        getPer() {
            const ratio = ((+this.currentData/this.maxValue) * 100).toFixed(0);
            const ratioStr = ratio + '%';
            return {
                '--per': ratioStr,
                'background-color': this.chartProps.waveOneColor,
            }
        },
        getRatio() {
            const ratio = ((+this.currentData/this.maxValue) * 100).toFixed(2);
            const ratioStr = ratio + '%';
            return ratioStr
        }
    },
}

class CustomLiquidBallNode extends HtmlResize.view {
    realValue = defaultValue
    maxValue = defaultMaxValue
    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: \`liquid-\${properties.id}\`,
                currentData: this.realValue,
                width,
                height,
                chartProps: properties,
                thingName,
                attr,
                maxValue: normalData.maxValue || this.maxValue
            })
            return
        }
        const el = document.createElement('div');
        rootEl.innerHTML = '';
        const instance = createVNode(LiquidBall, {
            name: properties.nodeAlias,
            chartId: \`liquid-\${properties.id}\`,
            currentData: this.realValue,
            width,
            height,
            chartProps: properties,
            thingName,
            attr,
            maxValue: normalData.maxValue || this.maxValue
        })
        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 CustomLiquidBallModel 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-liquidball-node',
    view: CustomLiquidBallNode,
    model: CustomLiquidBallModel,
})`,css:`@keyframes wave-move1 {\r
    100% {\r
        transform: translate(0);\r
    }\r
}\r
@keyframes wave-move2 {\r
    100% {\r
        transform: translate(-50%);\r
    }\r
}\r
.liquidball-node .box-text {\r
    position: absolute;\r
    left: 0;\r
    top: 0;\r
    z-index: 10;\r
    width: 100%;\r
    height: 100%;\r
    display: flex;\r
    display: -webkit-flex;\r
    align-items: center;\r
    justify-content: center;\r
}\r
.liquidball-node .liquidballBackStyle .inner {\r
    width: 100%;\r
    height: 100%;\r
    position: relative;\r
    /* 底部100% +波浪的实际高度，bottom: calc(-100% - 60px); */\r
    /* bottom: -128%; */\r
    /* 直接对bottom操作 */\r
    bottom: calc(-128% + var(--per));\r
}\r
.liquidball-node .liquidballBackStyle .inner .box-waves {\r
    position: absolute;\r
    left: 0;\r
    bottom: 100%;\r
    width: 300%;\r
    stroke: none;\r
}\r
.liquidball-node .liquidballBackStyle .inner .box-waves:nth-child(1) {\r
    transform: translate(-50%);\r
    z-index: 3;\r
    animation: wave-move1 1.5s linear infinite;\r
    margin-bottom: -2px;\r
}\r
.liquidball-node .liquidballBackStyle .inner .box-waves:nth-child(2) {\r
    transform: translate(0);\r
    z-index: 2;\r
    animation: wave-move2 3s linear infinite;\r
}`,fakeData:""},p={id:e,name:a,aliasName:t,image:n,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:r,files:d};export{t as aliasName,r as config,p as default,d as files,i as groupName,o as groupType,e as id,n as image,l as imageType,u as isDefault,c as isRemote,a as name,s as sectionType};