123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780 |
- <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>
|