thing_web/public/scada/static/info-c98effc2.js

const e="aaa9be68-db1f-4bd3-8812-2ba0fa7b2cf3",t="custom-3d-piechart",n="3D立体饼图",a='<?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="1697434948946" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10369" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M931.76 423.52l-0.34 121.13-433.37 7.03 0.34-121.13 433.37-7.03z" fill="#CBD0D8" p-id="10370"></path><path d="M498.39 430.55l-0.34 121.13-305.61 177.6 0.34-121.13 305.61-177.6z" fill="#D1D5E0" p-id="10371"></path><path d="M64.78 429.31l-0.34 121.13c-0.18 64.69 42.51 129.48 128 178.84l0.34-121.13C107.3 558.79 64.6 494 64.78 429.31z" fill="#C0C6CE" p-id="10372"></path><path d="M804 253c81.85 47.25 124.45 108.65 127.78 170.57l-433.37 7-305.63 177.58C22.9 510.06 22 351 190.78 252.95S634.1 154.87 804 253z" fill="#E1E4EF" p-id="10373"></path><path d="M959.36 449.41a153 153 0 0 1 0 16.09C955.9 526.72 914 587.29 833.55 634L526 456.44z" fill="#F98282" p-id="10374"></path><path d="M959.56 457.74q0 3.88-0.22 7.76-0.15 2.75-0.42 5.5c-0.06 0.6-0.13 1.2-0.2 1.8-0.13 1.23-0.26 2.46-0.43 3.69-0.09 0.72-0.21 1.44-0.32 2.16-0.16 1.11-0.33 2.22-0.51 3.32-0.13 0.77-0.28 1.53-0.42 2.3-0.19 1-0.38 2-0.6 3.06s-0.49 2.23-0.74 3.34c-0.2 0.86-0.39 1.72-0.61 2.58-0.28 1.14-0.6 2.28-0.91 3.42-0.23 0.83-0.44 1.65-0.68 2.48-0.35 1.2-0.73 2.39-1.11 3.59-0.24 0.76-0.47 1.53-0.72 2.29-0.45 1.35-0.93 2.69-1.42 4-0.22 0.61-0.42 1.22-0.65 1.83q-1.12 3-2.36 5.92c-0.19 0.44-0.4 0.89-0.59 1.33-0.66 1.53-1.32 3-2 4.57-0.33 0.72-0.69 1.43-1 2.14-0.6 1.24-1.2 2.49-1.83 3.73-0.4 0.79-0.83 1.58-1.25 2.37-0.61 1.16-1.23 2.32-1.88 3.47-0.43 0.77-0.87 1.54-1.31 2.3q-1.12 2-2.3 3.89-0.7 1.15-1.41 2.29c-0.82 1.32-1.68 2.63-2.54 3.94-0.47 0.71-0.93 1.42-1.4 2.12-1.05 1.55-2.14 3.1-3.25 4.65-0.32 0.44-0.61 0.88-0.93 1.32q-2.16 3-4.47 5.9c-0.29 0.38-0.61 0.75-0.9 1.12q-2.21 2.79-4.56 5.55l-1.61 1.89q-2.4 2.77-4.92 5.52l-0.94 1q-3 3.2-6.14 6.36l-1.74 1.76q-2.51 2.47-5.12 4.92c-0.66 0.61-1.3 1.23-2 1.84-1.06 1-2.14 1.94-3.23 2.9-0.85 0.75-1.69 1.51-2.55 2.26-1.13 1-2.3 2-3.46 2.94-0.85 0.72-1.69 1.44-2.56 2.15-1.24 1-2.5 2-3.77 3-0.83 0.66-1.65 1.33-2.49 2-1.43 1.12-2.89 2.22-4.36 3.33-0.72 0.54-1.41 1.09-2.14 1.63q-3.31 2.46-6.73 4.88l-0.19 0.13q-3.34 2.36-6.79 4.67c-0.78 0.52-1.59 1-2.38 1.56-1.6 1.06-3.21 2.12-4.85 3.17-1 0.61-1.95 1.22-2.92 1.83-1.51 0.94-3 1.89-4.55 2.82-2.2 1.33-4.42 2.66-6.67 4l-0.34 121.13q3-1.76 6-3.56l0.68-0.42c1.52-0.93 3-1.86 4.51-2.8 1-0.62 2-1.23 3-1.85 1.63-1 3.23-2.1 4.83-3.15 0.79-0.52 1.61-1 2.39-1.57q3.51-2.36 6.91-4.75h0.07q3.43-2.42 6.73-4.88c0.74-0.55 1.45-1.11 2.18-1.66 1.45-1.1 2.9-2.19 4.32-3.3 0.85-0.66 1.67-1.33 2.5-2 1.26-1 2.52-2 3.76-3 0.87-0.72 1.71-1.44 2.57-2.16 1.16-1 2.32-2 3.45-2.94 0.87-0.75 1.71-1.51 2.56-2.27 1.08-1 2.16-1.92 3.21-2.89l0.85-0.77c0.39-0.36 0.74-0.72 1.12-1.08q2.61-2.44 5.11-4.91l1.68-1.66q3.15-3.16 6.14-6.36l0.94-1q2.52-2.75 4.92-5.52l1.62-1.89q2.34-2.76 4.55-5.55c0.23-0.29 0.48-0.57 0.7-0.85l0.2-0.27q2.3-2.94 4.47-5.9c0.32-0.44 0.62-0.88 0.93-1.32 1.11-1.55 2.2-3.09 3.26-4.65 0.48-0.7 0.93-1.41 1.4-2.12 0.87-1.31 1.72-2.62 2.54-3.94q0.72-1.14 1.41-2.29 1.18-1.94 2.3-3.89c0.27-0.47 0.56-0.93 0.82-1.4 0.17-0.3 0.32-0.61 0.49-0.91a295.241 295.241 0 0 0 3.13-5.84c0.63-1.24 1.24-2.49 1.84-3.73 0.34-0.71 0.7-1.42 1-2.13 0.71-1.52 1.38-3.05 2-4.58 0.19-0.44 0.39-0.88 0.58-1.32q1.24-3 2.36-5.93l0.06-0.16c0.21-0.55 0.38-1.1 0.58-1.65 0.49-1.35 1-2.69 1.43-4 0.25-0.76 0.48-1.53 0.72-2.29 0.38-1.2 0.76-2.39 1.11-3.59 0.24-0.82 0.46-1.65 0.68-2.48 0.31-1.14 0.62-2.28 0.91-3.42 0.21-0.86 0.41-1.72 0.61-2.58 0.26-1.11 0.51-2.23 0.74-3.35 0.07-0.32 0.15-0.63 0.21-1 0.14-0.7 0.25-1.41 0.39-2.11s0.29-1.53 0.42-2.29c0.19-1.11 0.35-2.22 0.52-3.33 0.11-0.72 0.22-1.44 0.31-2.16 0.16-1.23 0.29-2.46 0.43-3.69 0.06-0.6 0.14-1.2 0.2-1.8q0.26-2.75 0.42-5.5 0.1-1.89 0.16-3.77t0.06-4z" fill="#F7706C" p-id="10375"></path><path d="M833.55 634.03l-0.34 121.13-307.59-177.59 0.34-121.13 307.59 177.59z" fill="#E86262
  "nodes": [
    {
      "id": "6f18dc4b-ebff-47b9-89e3-4ff1d967b64f",
      "type": "custom-3d-piechart",
      "x": 200,
      "y": 200,
      "text": {
        "value": "",
        "x": 200,
        "y": 200
      },
      "properties": {
        "id": "6f18dc4b-ebff-47b9-89e3-4ff1d967b64f",
        "width": 350,
        "height": 200,
        "x": 200,
        "y": 200,
        "rotation": 0,
        "opacity": 1,
        "codeConfig": "return option;",
        "nodeAlias": "3D立体饼图",
        "showDefaultValue": false,
        "showUnit": false,
        "valueColor": "rgba(245, 166, 35, 1)",
        "fontSize": 12,
        "legendFontColor": "#50e3c2",
        "color": "#50e3c2",
        "labelTextColor": "#50e3c2",
        "itemColors": [
          {
            "color": "#00B5EC"
          },
          {
            "color": "#F39800"
          },
          {
            "color": "#8FC31F"
          },
          {
            "color": "#F29C9F"
          },
          {
            "color": "#009944"
          },
          {
            "color": "#8A8000"
          }
        ],
        "tooltip": {
          "borderColor": "rgba(0, 141, 255, 0.6)",
          "backgroundColor": "rgba(70,94,144,0.6)",
          "style": {
            "color": "rgba(255, 255, 255, 1)"
          },
          "borderWidth": 1,
          "borderRadius": 6
        },
        "dynamic": {
          "normalData": {
            "dataPoint": "",
            "compareType": "",
            "conditionVariables": [],
            "defaultValue": "",
            "unit": "",
            "renderIntervalEnabled": true,
            "legendNameType": "attrName",
            "dataShowTypes": "oneThingManyAttr"
          }
        }
      }
    }
  ]
}`,javascript:`const { createApp, createVNode, render } = Vue;
const app = createApp({})

const timeArr = new Array(24).fill('');
const totals = [];
// timeArr.forEach((i, index) => { const t = window.dayjs().hour(index).valueOf(); totals.push({ val: Math.random(1000) * 100, ts: t, attrKey: "A29" }) });
const defaultSocketValue = totals;

let myChart = null;

// 图例格式化
const assembleLegend = (api, thingKey, attrkey, dataShowTypes, legendNameType, datas) => {
    if (api) {
        const infos = window.totalDeviceInfos[api];
        const thing = infos[datas[0].thingCode];
        const thingName = thing.entityName;
        const attrName = thing.attrs[attrkey].name;
        if (dataShowTypes.value === 'oneThingOneAttr') {
            switch (legendNameType.value) {
                case "thingName":
                    return thing.entityName;
                case "thingCode":
                    return thingKey;
                case "attrName":
                    return attrName;
                case "attrCode":
                    return attrkey;
                case "thingNameAttrName":
                    return thingName + '-' + attrName;
                case "thingCodeAttrCode":
                    return thingKey + '-' + attrkey;
            }
        } else if (dataShowTypes.value === 'oneThingManyAttr') {
            switch (legendNameType.value) {
                case "attrName":
                    return thing.attrs[attrkey].name;
                case "attrCode":
                    return attrkey;
                case "thingNameAttrName":
                    return thingName + '-' + attrName;
                case "thingCodeAttrCode":
                    return thingKey + '-' + thingKey
            }
        } else if (dataShowTypes.value === 'manyThingManyAttr') {
            switch (legendNameType.value) {
                case "thingNameAttrName":
                    const attrName = thing.attrs[attrKey].name
                    return thingName + '-' + attrName;
                case "thingCodeAttrCode":
                    return thingKey + '-' + thingKey;
            }
        } else if (dataShowTypes.value === 'manyThingOneAttr') {
            switch (legendNameType.value) {
                case "thingName":
                    return thingName;
                case "thingCode":
                    return thingKey;
                case "thingNameAttrName":
                    const attrName = thing.attrs[attrKey].name
                    return thingName + '-' + attrName;
                case "thingCodeAttrCode":
                    return thingKey + '-' + thingKey;
            }
        }
    } else {
        return attrkey;
    }
}



const PieChart3D = {
    template: '<div :id="lineId" :style="getStyle" class="highcharts-wrapper pie-3d-container"></div>',
    props: {
        lineId: {
            type: String,
            default: ''
        },
        historyDatas: {
            type: Array,
            default: () => []
        },
        width: {
            type: Number,
            default: 350
        },
        height: {
            type: Number,
            default: 150
        },
        codeConfig: {
            type: String,
            default: ''
        },
        legendFontColor: {
            type: String,
            default: ''
        },
        labelTextColor: {
            type: String,
            default: ''
        },
        dataShowTypes: {
            type: String,
            default: 'oneThingManyAttr',
        },
        legendNameType: {
            type: String,
            default: 'attrName',
        },
        apiid: {
            type: String,
            default: '',
        },
        itemColors: {
            type: Array,
            default: () =>
                [
                    {
                        "color":
                            "#00B5EC"
                    },
                    {
                        "color":
                            "#F39800"
                    },
                    {
                        "color":
                            "#8FC31F"
                    },
                    {
                        "color":
                            "#F29C9F"
                    },
                    {
                        "color":
                            "#009944"
                    },
                    {
                        "color":
                            "#8A8000"
                    }
                ]
        },
        tooltip: {
            type: Object,
            default: () => ({
                backgroundColor: "rgba(70,94,144,0.6)",
                borderColor: "rgba(0, 141, 255, 0.6)",
                borderRadius: 6,
                borderWidth: 1,
                style: {
                    color: "#fff"
                }
            })
        }
    },
    computed: {
        getStyle() {
            return {
                width: \`\${this.width}px\`,
                height: \`\${this.height}px\`
            }
        }
    },
    setup(props) {
        const { onMounted, nextTick, toRefs, watch } = Vue;
        const { historyDatas, codeConfig, apiid, dataShowTypes, legendNameType, tooltip, itemColors } = toRefs(props);

        const initChart = (datas) => {
            // 基于准备好的dom，初始化echarts实例

            const dom = document.getElementById(props.lineId);
            if (dom) {
                if (myChart) {
                    myChart.destroy();
                    myChart = null;
                }
                if (datas) {
                    let totalDatas = [];
                    let totalAmount = 0
                    if (datas.length > 0) {
                        const thingGrouped = window._.groupBy(datas, 'thingCode');
                        for (const thingKey in thingGrouped) {
                            const attrGrouped = window._.groupBy(thingGrouped[thingKey], 'attrKey')
                            for (const key in attrGrouped) {
                                let serieData = attrGrouped[key];
                                const legendKey = assembleLegend(apiid.value, thingKey, key, dataShowTypes, legendNameType, serieData);
                                totalDatas.push([legendKey, serieData[0].val]);
                                totalAmount += serieData[0].val;
                            }
                        }
                        totalDatas = totalDatas.map(i => {
                            i[1] = Number((i[1] / totalAmount * 100).toFixed(2));
                            return i;
                        })
                    } else {
                        totalDatas = [
                            ['Firefox', 45.0],
                            ['IE', 26.8],
                            {
                                name: 'Chrome',
                                y: 12.8,
                                sliced: true,
                                selected: true
                            },
                            ['Safari', 8.5],
                            ['Opera', 6.2],
                            ['Others', 0.7]
                        ]
                    }


                    // 指定图表的配置项和数据
                    var option = {
                        chart: {
                            accessibility: {
                                enabled: false
                            },
                            reflow: true,
                            type: "pie",
                            borderWidth: null,
                            plotBorderWidth: null,
                            options3d: {
                                enabled: true,
                                alpha: 50,
                                beta: 0
                            },
                            events: {
                                // load: function () {
                                //   const each = Highcharts.each;
                                //   const points = this.series[0].points;
                                //   each(points, function (p, i) {
                                //     p.graphic.attr({
                                //       translateY: -p.shapeArgs.ran
                                //     });
                                //     p.graphic.side1.attr({
                                //       translateY: -p.shapeArgs.ran
                                //     });
                                //     p.graphic.side2.attr({
                                //       translateY: -p.shapeArgs.ran
                                //     });
                                //   });
                                // }
                            },
                            backgroundColor: null,
                            marginRight: 130,
                            marginBottom: 0,
                            spacingBottom: 0
                        },
                        title: {
                            text: ""
                        },
                        exporting: {
                            enabled: false
                        },
                        credits: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
                            ...tooltip.value
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: "pointer",
                                depth: 25,
                                dataLabels: {
                                    enabled: true,
                                    formatter: function () {
                                        return \`<span style='color: \${props.labelTextColor}'>\${this.point.name}</span>\`;
                                    },
                                    connectorColor: "#02AAD0",
                                    style: {
                                        textOverflow: "ellipsis",
                                        textOutline: "none"
                                    }
                                },
                                showInLegend: true,
                                states: {
                                    hover: {
                                        halo: {
                                            size: 10,
                                            opacity: 0.5,
                                            attributes: {
                                                // fill: "white"
                                            }
                                        }
                                    }
                                }
                            }
                        },
                        series: [
                            {
                                type: "pie",
                                name: "当月用能占比",
                                size: "50%",
                                data: totalDatas
                            }
                        ],
                        legend: {
                            layout: "vertical",
                            floating: true,
                            backgroundColor: "none",
                            align: "right",
                            verticalAlign: "top",
                            x: 10,
                            y: 45,
                            itemStyle: { cursor: "pointer", color: props.legendFontColor, textOverflow: "ellipsis", textOutline: "none" },
                            itemWidth: 70,
                            itemHoverStyle: { color: "#34dcfc" },
                            symbolWidth: 12,
                            symbolHeight: 8,
                            symbolRadius: 0,
                            itemMarginBottom: 5,
                        },
                        colors: itemColors.value.map( i => i.color)
                    };

                    const func = new Function('option', 'datas', codeConfig.value);
                    const opt = func(window._.cloneDeep(option), datas);
                    // 使用刚指定的配置项和数据显示图表。
                    nextTick(() => {
                        myChart = Highcharts.chart(props.lineId, opt);
                    })
                }
            }
        }

        watch(historyDatas, (val) => {
            if (val) {
                nextTick(() => {
                    initChart(val);
                })
            }
        }, {
            immediate: true
        })
    }
}

class Custom3DPieChartNode extends HtmlResize.view {
    chartRendered = false
    historyDatas = []
    oldProperties = {}

    setHtml(rootEl) {
        if (!rootEl) return;
        const { properties, width, height, } = this.props.model;
        const { nodeAlias, grid, title, legend, tooltip, xAxis, yAxis, codeConfig, legendFontColor, labelTextColor, apiid, itemColors } = properties;
        const { dataShowTypes, legendNameType, } = properties.normalData || {};

        const el = document.createElement('div');
        rootEl.innerHTML = '';
        const instance = createVNode(PieChart3D, {
            name: nodeAlias,
            lineId: \`line-\${properties.id}\`,
            historyDatas: this.historyDatas,
            width,
            height,
            grid, title, legend, tooltip, xAxis, yAxis,
            codeConfig,
            legendFontColor, labelTextColor,
            dataShowTypes, legendNameType, apiid, itemColors
        })
        instance.appContext = app._context
        render(instance, el)
        rootEl.appendChild(el);
    }

    sameProps(properties) {
        const isSame = window._.isEqual(this.oldProperties, properties);
        if (isSame) return true;
        this.oldProperties = properties;
        return false
    }

    filterHistoryData(thingCodeArr, dataPointArr, apiid, renderIntervalEnabled) {
        if (dataPointArr && dataPointArr.length > 0) {
            let datas = []
            if (renderIntervalEnabled) {
                datas = window.totalHistoryDatas[apiid];
            } else {
                if (window.globalDashboardDatas[apiid]) {
                    datas = window.globalDashboardDatas[apiid].values;
                }
            }
            if (datas && datas.length > 0) {
                const gotValues = datas.filter((val) => thingCodeArr.includes(val.thingCode) && dataPointArr.includes(val.attrKey))
                this.historyDatas = gotValues
                this.chartRendered = true;
            }
        }
    }

    // 生命周期 支持重写内容, 但格式需一致
    shouldUpdate() {
        const { properties } = this.props.model;
        const { apiid } = properties;
        const { normalData } = properties.dynamic || {};
        const { dataPointArr, defaultValue, thingCodeArr } = normalData || {}

        if (normalData && !normalData.dataPoint && !normalData.defaultValue) {
            this.historyDatas = defaultSocketValue;
            return true
        } else if (normalData && !normalData.dataPoint && normalData.defaultValue) {
            this.historyDatas = JSON.parse(defaultValue);
            return true
        }

        const propertiesBack = window._.cloneDeep(properties);
        if (propertiesBack.dynamic.normalData) {
            propertiesBack.dynamic.normalData.defaultValue = '';
            if (this.sameProps(propertiesBack) && this.chartRendered) {
                return false
            }
            if (dataPointArr && apiid && !this.chartRendered) {
                this.filterHistoryData(thingCodeArr, dataPointArr, apiid, normalData.renderIntervalEnabled);
                return true;
            }
        }
        return true;
    }

    updateHtml() {
        this.setHtml(this.rootEl);
    }

    componentDidMount() {
        const { properties } = this.props.model;
        const { normalData } = properties.dynamic || {};
        const { renderInterval, dataPointArr, thingCodeArr } = normalData || {};
        if (this.shouldUpdate()) {
            this.setHtml(this.rootEl);
        }

        let inters = parseInt(renderInterval || '300000')
        if (normalData && !normalData.renderIntervalEnabled) {
            inters = 1000
        }
        setInterval(() => {
            if (window.totalHistoryDatas[properties.apiid]) {
                this.filterHistoryData(thingCodeArr, dataPointArr, properties.apiid, normalData.renderIntervalEnabled);
                this.setHtml(this.rootEl);
            }
        }, inters)
        // 防止拖动时候频繁渲染图表
        this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500);
    }

    componentDidUpdate() {
        if (this.shouldUpdate()) {
            this.updateHtmlDebounced();
        }
    }
}

class Custom3DPieChartModel 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-3d-piechart',
    view: Custom3DPieChartNode,
    model: Custom3DPieChartModel,
})`,css:`.highcharts-wrapper .highcharts-root {\r
    stroke: none;\r
}`,fakeData:""},u={id:e,name:t,aliasName:n,image:a,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:r,files:d};export{n as aliasName,r as config,u as default,d as files,i as groupName,o as groupType,e as id,a as image,l as imageType,p as isDefault,c as isRemote,t as name,s as sectionType};