hb_sis_zhfx/src/views/WindSite/components/gax6.vue

<template>
    <div class="gax6"></div>
</template>

<script>
import { Graph } from "@antv/x6";
import customNode from "./customNode.js";

export default {
    // 名称
    name: "gax6",
    // 使用组件
    components: {},
    // 传入参数
    props: {},
    // 自定义事件
    emits: {},
    // 数据
    data() {
        return {
            graph: null,
            color: {
                red: "#b30461",
                yellow: "#cbaa07",
            },
            data: [{
                id: "111",
                x: 912.5,
                y: 175,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "101",
                x: 803,
                y: 299,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "102",
                x: 1023,
                y: 299,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "301",
                x: 803,
                y: 380,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "302",
                x: 1023,
                y: 380,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "314",
                x: 738,
                y: 497,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "315",
                x: 803,
                y: 497,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "323",
                x: 868,
                y: 497,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "322",
                x: 1023,
                y: 497,
                type: "switch",
                state: 0,
                direction: "top"
            },],
            labels: [{
                id: "mmx",
                shape: "tag-text-r",
                x: 862,
                y: 50,
                label: "某某线",
            },{
                id: "110kvmx",
                shape: "simple-text",
                x: 772.5,
                y: 200,
                label: "110kV 母线",
            },{
                id: "35kv1mx",
                shape: "simple-text",
                x: 724,
                y: 408,
                label: "35kV I母线",
            },{
                id: "35kv2mx",
                shape: "simple-text-r",
                x: 1102,
                y: 408,
                label: "35kV II母线",
            },{
                id: "L111",
                shape: "simple-text",
                x: 930,
                y: 155,
                label: "111",
            },{
                id: "L102",
                shape: "simple-text",
                x: 1040,
                y: 278,
                label: "102",
            },{
                id: "L302",
                shape: "simple-text",
                x: 1040,
                y: 358,
                label: "302",
            },{
                id: "L101",
                shape: "simple-text-r",
                x: 785,
                y: 278,
                label: "101",
            },{
                id: "L301",
                shape: "simple-text-r",
                x: 785,
                y: 358,
                label: "301",
            },{
                id: "L314",
                shape: "simple-text-r",
                x: 725,
                y: 470,
                label: "314",
            },{
                id: "L315",
                shape: "simple-text-r",
                x: 790,
                y: 470,
                label: "315",
            },{
                id: "L323",
                shape: "simple-text-r",
                x: 850,
                y: 470,
                label: "323",
            },{
                id: "L322",
                shape: "simple-text-r",
                x: 1005,
                y: 470,
                label: "322",
            },{
                id: "zb_1",
                shape: "tag-text-s",
                x: 680,
                y: 320,
                label: "#1主变",
            },{
                id: "zb_2",
                shape: "tag-text-s",
                x: 1080,
                y: 320,
                label: "#2主变",
            },{
                id: "jddl_1",
                shape: "tag-text",
                x: 90,
                y: 555,
                label: "#1集电线路",
            },{
                id: "jddl_3",
                shape: "tag-text",
                x: 1640,
                y: 555,
                label: "#4集电线路",
            },{
                id: "jddl_2",
                shape: "tag-text",
                x: 90,
                y: 815,
                label: "#2集电线路",
            },{
                id: "jddl_4",
                shape: "tag-text",
                x: 1640,
                y: 815,
                label: "#3集电线路",
            }],
            fans: [{
                id: "fanA01",
                shape: "fan-blue",
                x: 90,
                y: 510,
                label: "A01",
            },{
                id: "fanA02",
                shape: "fan-gray",
                x: 140,
                y: 510,
                label: "A01",
            },{
                id: "fanA03",
                shape: "fan-orange",
                x: 190,
                y: 510,
                label: "A01",
            },{
                id: "fanA04",
                shape: "fan-red",
                x: 240,
                y: 510,
                label: "A01",
            },{
                id: "fanA05",
                shape: "fan-green",
                x: 290,
                y: 510,
                label: "A01",
            },{
                id: "fanA06",
                shape: "fan-green",
                x: 340,
                y: 510,
                label: "A01",
            },{
                id: "fanA07",
                shape: "fan-green",
                x: 390,
                y: 510,
                label: "A01",
            },{
                id: "fanA08",
                shape: "fan-green",
                x: 440,
                y: 510,
                label: "A01",
            },{
                id: "fanA09",
                shape: "fan-green",
                x: 490,
                y: 510,
                label: "A01",
            },{
                id: "fanA10",
                shape: "fan-green",
                x: 540,
                y: 510,
                label: "A01",
            },{
                id: "fanA11",
                shape: "fan-green",
                x: 590,
                y: 510,
                label: "A01",
            },

            {
                id: "fanA01-p",
                shape: "fan-green",
                x: 90,
                y: 770,
                label: "A01",
            },{
                id: "fanA02-p",
                shape: "fan-green",
                x: 140,
                y: 770,
                label: "A01",
            },{
                id: "fanA03-p",
                shape: "fan-green",
                x: 190,
                y: 770,
                label: "A01",
            },{
                id: "fanA04-p",
                shape: "fan-green",
                x: 240,
                y: 770,
                label: "A01",
            },{
                id: "fanA05-p",
                shape: "fan-green",
                x: 290,
                y: 770,
                label: "A01",
            },{
                id: "fanA06-p",
                shape: "fan-green",
                x: 340,
                y: 770,
                label: "A01",
            },{
                id: "fanA07-p",
                shape: "fan-green",
                x: 390,
                y: 770,
                label: "A01",
            },{
                id: "fanA08-p",
                shape: "fan-green",
                x: 440,
                y: 770,
                label: "A01",
            },{
                id: "fanA09-p",
                shape: "fan-green",
                x: 490,
                y: 770,
                label: "A01",
            },{
                id: "fanA10-p",
                shape: "fan-green",
                x: 540,
                y: 770,
                label: "A01",
            },{
                id: "fanA11-p",
                shape: "fan-green",
                x: 590,
                y: 770,
                label: "A01",
            },{
                id: "fanA12-p",
                shape: "fan-green",
                x: 640,
                y: 770,
                label: "A01",
            },{
                id: "fanA13-p",
                shape: "fan-green",
                x: 690,
                y: 770,
                label: "A01",
            },{
                id: "fanA14-p",
                shape: "fan-green",
                x: 740,
                y: 770,
                label: "A01",
            },
            
            {
                id: "fanA12",
                shape: "fan-green",
                x: 1200,
                y: 510,
                label: "A01",
            },{
                id: "fanA13",
                shape: "fan-green",
                x: 1250,
                y: 510,
                label: "A01",
            },{
                id: "fanA14",
                shape: "fan-green",
                x: 1300,
                y: 510,
                label: "A01",
            },{
                id: "fanA15",
                shape: "fan-green",
                x: 1350,
                y: 510,
                label: "A01",
            },{
                id: "fanA16",
                shape: "fan-green",
                x: 1400,
                y: 510,
                label: "A01",
            },{
                id: "fanA17",
                shape: "fan-green",
                x: 1450,
                y: 510,
                label: "A01",
            },{
                id: "fanA18",
                shape: "fan-green",
                x: 1500,
                y: 510,
                label: "A01",
            },{
                id: "fanA19",
                shape: "fan-green",
                x: 1550,
                y: 510,
                label: "A01",
            },{
                id: "fanA20",
                shape: "fan-green",
                x: 1600,
                y: 510,
                label: "A01",
            },{
                id: "fanA21",
                shape: "fan-green",
                x: 1650,
                y: 510,
                label: "A01",
            },{
                id: "fanA22",
                shape: "fan-green",
                x: 1700,
                y: 510,
                label: "A01",
            },
            
            // {
            //     id: "fanA23-m",
            //     shape: "fan-green",
            //     x: 1150,
            //     y: 640,
            //     label: "A01",
            // },{
            //     id: "fanA24-m",
            //     shape: "fan-green",
            //     x: 1200,
            //     y: 640,
            //     label: "A01",
            // },{
            //     id: "fanA25-m",
            //     shape: "fan-green",
            //     x: 1250,
            //     y: 640,
            //     label: "A01",
            // },{
            //     id: "fanA26-m",
            //     shape: "fan-green",
            //     x: 1300,
            //     y: 640,
            //     label: "A01",
            // },{
            //     id: "fanA27-m",
            //     shape: "fan-green",
            //     x: 1350,
            //     y: 640,
            //     label: "A01",
            // },{
            //     id: "fanA28-m",
            //     shape: "fan-green",
            //     x: 1400,
            //     y: 640,
            //     label: "A01",
            // },{
            //     id: "fanA29-m",
            //     shape: "fan-green",
            //     x: 1450,
            //     y: 640,
            //     label: "A01",
            // },{
            //     id: "fanA31-m",
            //     shape: "fan-green",
            //     x: 1600,
            //     y: 640,
            //     label: "A01",
            // },{
            //     id: "fanA32-m",
            //     shape: "fan-green",
            //     x: 1650,
            //     y: 640,
            //     label: "A01",
            // },{
            //     id: "fanA33-m",
            //     shape: "fan-green",
            //     x: 1700,
            //     y: 640,
            //     label: "A01",
            // },

            {
                id: "fanA23-2",
                shape: "fan-green",
                x: 1100,
                y: 770,
                label: "A01",
            },{
                id: "fanA23-1",
                shape: "fan-green",
                x: 1150,
                y: 770,
                label: "A01",
            },{
                id: "fanA23",
                shape: "fan-green",
                x: 1200,
                y: 770,
                label: "A01",
            },{
                id: "fanA24",
                shape: "fan-green",
                x: 1250,
                y: 770,
                label: "A01",
            },{
                id: "fanA25",
                shape: "fan-green",
                x: 1300,
                y: 770,
                label: "A01",
            },{
                id: "fanA26",
                shape: "fan-green",
                x: 1350,
                y: 770,
                label: "A01",
            },{
                id: "fanA27",
                shape: "fan-green",
                x: 1400,
                y: 770,
                label: "A01",
            },{
                id: "fanA28",
                shape: "fan-green",
                x: 1450,
                y: 770,
                label: "A01",
            },{
                id: "fanA29",
                shape: "fan-green",
                x: 1500,
                y: 770,
                label: "A01",
            },{
                id: "fanA30",
                shape: "fan-green",
                x: 1550,
                y: 770,
                label: "A01",
            },{
                id: "fanA31",
                shape: "fan-green",
                x: 1600,
                y: 770,
                label: "A01",
            },{
                id: "fanA32",
                shape: "fan-green",
                x: 1650,
                y: 770,
                label: "A01",
            },{
                id: "fanA33",
                shape: "fan-green",
                x: 1700,
                y: 770,
                label: "A01",
            }]
        };
    },
    // 函数
    methods: {
        initGraph: function () {
            this.graph = new Graph({
                container: this.$el, // 画布的容器
                // width: undefined, // 默认使用容器宽度
                // height: undefined, // 默认使用容器高度
                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
                mousewheel: {
                    enabled: true,
                    modifiers: [],
                },
                scroller: {
                    enabled: true,
                    pannable: true,
                },
                interacting: false,
            });
            this.graph.zoomTo(0.8);
        },
        initData: function () {
            const data = { 
                nodes: [{
                    id: "back-line1",
                    x: 80,
                    y: 400,
                    shape: "path",
                    attrs: {
                        body: {
                            d: `M942.9,99.76v44.39H1666
                                M788,99.76V400.3c1.81,1.53,3.69,1.21,5.49,1.21H1666
                                M723,99.76V401.51H1
                                M658.11,99.76v44.39H1
                                M803.52,34.42H643.62
                                M1023.39,34.42H863.49
                                M723.07,-19V33.42
                                M942.94,-19V33.42
                                M658.11,35.91V66.84
                                M723,35.91V66.84
                                M788,35.91V66.84
                                M942.9,35.91V66.84`,
                            fill: "transparent",
                            stroke: "#cbaa07",
                            "stroke-width": 3,
                        },
                    },
                    movable: false,
                },{
                    id: "back-line2",
                    x: 772.5,
                    y: 100,
                    shape: "path",
                    attrs: {
                        body: {
                            d: `M281,123.82H1
                                M140,75v49
                                M140,1V48.73
                                M30.4,125.31v47
                                M249.63,125.31v47`,
                            fill: "transparent",
                            stroke: "#b30461",
                            "stroke-width": 3,
                        },
                    },
                    movable: false,
                },{
                    id: "main-change-1",
                    x: 803,
                    y: 300,
                    shape: "main-change",
                    movable: false,
                },{
                    id: "main-change-2",
                    x: 1023,
                    y: 300,
                    shape: "main-change",
                    movable: false,
                },{
                    id: "top-arrow",
                    x: 912.5,
                    y: 86,
                    shape: "arrow-vertical-top-left",
                    attrs: {
                        line: {
                            height: 0,
                        },
                        arrow: {
                            fill: "#b30461",
                            refY: 0,
                        }
                    },
                    movable: false,
                }] 
            };
            this.data.forEach(item => {
                switch (item.type) {
                    case "switch":
                        item.shape = `switch-${item.state == 0 ? 'break' : 'close'}`
                        break;
                    case "handcart":
                        item.shape = `handcart${item.state1}${item.state2}`
                        break;
                    default:
                        break;
                }
                let shape = `${item.shape}-${item.direction}`;
                let node = {
                    id: item.id,
                    x: item.x,
                    y: item.y,
                    shape: shape,
                    movable: false,
                }
                data.nodes.push(node);
            })
            this.labels.forEach(item => {
                let node = {
                    id: item.id,
                    x: item.x,
                    y: item.y,
                    shape: item.shape,
                    attrs: {
                        label: {
                            text: item.label,
                        },
                    },
                    movable: false,
                }
                switch (item.shape) {
                    case "form-text":
                        node.attrs.value = {
                            text: item.value,
                        }
                        break;
                
                    default:
                        break;
                }
                data.nodes.push(node);
            })
            this.fans.forEach(item => {
                let node = {
                    id: item.id,
                    x: item.x,
                    y: item.y,
                    shape: item.shape,
                    attrs: {
                        label: {
                            text: item.label,
                        },
                    },
                    movable: false,
                }
                data.nodes.push(node);
            })
            this.graph.fromJSON(data);
            this.graph.centerContent();
            setTimeout(() => {
                this.changeFanNodeById("fanA06", "fan-red", "A01");
            }, 5000);
        },
        // 通过id修改风机节点
        changeFanNodeById: function (id, shape, label) {
            var view = this.graph.getMountedViews();
            var node = view.find(t => t.cell.id == id);
            node.cell.remove();
            var cell = this.graph.createNode({
                id: id,
                shape: shape,
                x: node.cell.position().x,
                y: node.cell.position().y,
                attrs: {
                    label: {
                        text: label,
                    },
                },
            });
            this.graph.addCell(cell);
        },
        initX6: function () {
            // 注册自定义节点
            customNode.register();
            this.initGraph();
            this.initData();
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
        this.initX6();
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

<style lang="less" scoped>
</style>