gax6.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780
  1. <template>
  2. <div class="gax6"></div>
  3. </template>
  4. <script>
  5. import { Graph } from "@antv/x6";
  6. import customNode from "./customNode.js";
  7. export default {
  8. // 名称
  9. name: "gax6",
  10. // 使用组件
  11. components: {},
  12. // 传入参数
  13. props: {},
  14. // 自定义事件
  15. emits: {},
  16. // 数据
  17. data() {
  18. return {
  19. graph: null,
  20. color: {
  21. red: "#b30461",
  22. yellow: "#cbaa07",
  23. },
  24. data: [{
  25. id: "111",
  26. x: 912.5,
  27. y: 175,
  28. type: "switch",
  29. state: 0,
  30. direction: "top"
  31. },{
  32. id: "101",
  33. x: 803,
  34. y: 299,
  35. type: "switch",
  36. state: 0,
  37. direction: "top"
  38. },{
  39. id: "102",
  40. x: 1023,
  41. y: 299,
  42. type: "switch",
  43. state: 0,
  44. direction: "top"
  45. },{
  46. id: "301",
  47. x: 803,
  48. y: 380,
  49. type: "switch",
  50. state: 1,
  51. direction: "top"
  52. },{
  53. id: "302",
  54. x: 1023,
  55. y: 380,
  56. type: "switch",
  57. state: 1,
  58. direction: "top"
  59. },{
  60. id: "314",
  61. x: 738,
  62. y: 497,
  63. type: "switch",
  64. state: 1,
  65. direction: "top"
  66. },{
  67. id: "315",
  68. x: 803,
  69. y: 497,
  70. type: "switch",
  71. state: 0,
  72. direction: "top"
  73. },{
  74. id: "323",
  75. x: 868,
  76. y: 497,
  77. type: "switch",
  78. state: 1,
  79. direction: "top"
  80. },{
  81. id: "322",
  82. x: 1023,
  83. y: 497,
  84. type: "switch",
  85. state: 0,
  86. direction: "top"
  87. },],
  88. labels: [{
  89. id: "mmx",
  90. shape: "tag-text-r",
  91. x: 862,
  92. y: 50,
  93. label: "某某线",
  94. },{
  95. id: "110kvmx",
  96. shape: "simple-text",
  97. x: 772.5,
  98. y: 200,
  99. label: "110kV 母线",
  100. },{
  101. id: "35kv1mx",
  102. shape: "simple-text",
  103. x: 724,
  104. y: 408,
  105. label: "35kV I母线",
  106. },{
  107. id: "35kv2mx",
  108. shape: "simple-text-r",
  109. x: 1102,
  110. y: 408,
  111. label: "35kV II母线",
  112. },{
  113. id: "L111",
  114. shape: "simple-text",
  115. x: 930,
  116. y: 155,
  117. label: "111",
  118. },{
  119. id: "L102",
  120. shape: "simple-text",
  121. x: 1040,
  122. y: 278,
  123. label: "102",
  124. },{
  125. id: "L302",
  126. shape: "simple-text",
  127. x: 1040,
  128. y: 358,
  129. label: "302",
  130. },{
  131. id: "L101",
  132. shape: "simple-text-r",
  133. x: 785,
  134. y: 278,
  135. label: "101",
  136. },{
  137. id: "L301",
  138. shape: "simple-text-r",
  139. x: 785,
  140. y: 358,
  141. label: "301",
  142. },{
  143. id: "L314",
  144. shape: "simple-text-r",
  145. x: 725,
  146. y: 470,
  147. label: "314",
  148. },{
  149. id: "L315",
  150. shape: "simple-text-r",
  151. x: 790,
  152. y: 470,
  153. label: "315",
  154. },{
  155. id: "L323",
  156. shape: "simple-text-r",
  157. x: 850,
  158. y: 470,
  159. label: "323",
  160. },{
  161. id: "L322",
  162. shape: "simple-text-r",
  163. x: 1005,
  164. y: 470,
  165. label: "322",
  166. },{
  167. id: "zb_1",
  168. shape: "tag-text-s",
  169. x: 680,
  170. y: 320,
  171. label: "#1主变",
  172. },{
  173. id: "zb_2",
  174. shape: "tag-text-s",
  175. x: 1080,
  176. y: 320,
  177. label: "#2主变",
  178. },{
  179. id: "jddl_1",
  180. shape: "tag-text",
  181. x: 90,
  182. y: 555,
  183. label: "#1集电线路",
  184. },{
  185. id: "jddl_3",
  186. shape: "tag-text",
  187. x: 1640,
  188. y: 555,
  189. label: "#4集电线路",
  190. },{
  191. id: "jddl_2",
  192. shape: "tag-text",
  193. x: 90,
  194. y: 815,
  195. label: "#2集电线路",
  196. },{
  197. id: "jddl_4",
  198. shape: "tag-text",
  199. x: 1640,
  200. y: 815,
  201. label: "#3集电线路",
  202. }],
  203. fans: [{
  204. id: "fanA01",
  205. shape: "fan-blue",
  206. x: 90,
  207. y: 510,
  208. label: "A01",
  209. },{
  210. id: "fanA02",
  211. shape: "fan-gray",
  212. x: 140,
  213. y: 510,
  214. label: "A01",
  215. },{
  216. id: "fanA03",
  217. shape: "fan-orange",
  218. x: 190,
  219. y: 510,
  220. label: "A01",
  221. },{
  222. id: "fanA04",
  223. shape: "fan-red",
  224. x: 240,
  225. y: 510,
  226. label: "A01",
  227. },{
  228. id: "fanA05",
  229. shape: "fan-green",
  230. x: 290,
  231. y: 510,
  232. label: "A01",
  233. },{
  234. id: "fanA06",
  235. shape: "fan-green",
  236. x: 340,
  237. y: 510,
  238. label: "A01",
  239. },{
  240. id: "fanA07",
  241. shape: "fan-green",
  242. x: 390,
  243. y: 510,
  244. label: "A01",
  245. },{
  246. id: "fanA08",
  247. shape: "fan-green",
  248. x: 440,
  249. y: 510,
  250. label: "A01",
  251. },{
  252. id: "fanA09",
  253. shape: "fan-green",
  254. x: 490,
  255. y: 510,
  256. label: "A01",
  257. },{
  258. id: "fanA10",
  259. shape: "fan-green",
  260. x: 540,
  261. y: 510,
  262. label: "A01",
  263. },{
  264. id: "fanA11",
  265. shape: "fan-green",
  266. x: 590,
  267. y: 510,
  268. label: "A01",
  269. },
  270. {
  271. id: "fanA01-p",
  272. shape: "fan-green",
  273. x: 90,
  274. y: 770,
  275. label: "A01",
  276. },{
  277. id: "fanA02-p",
  278. shape: "fan-green",
  279. x: 140,
  280. y: 770,
  281. label: "A01",
  282. },{
  283. id: "fanA03-p",
  284. shape: "fan-green",
  285. x: 190,
  286. y: 770,
  287. label: "A01",
  288. },{
  289. id: "fanA04-p",
  290. shape: "fan-green",
  291. x: 240,
  292. y: 770,
  293. label: "A01",
  294. },{
  295. id: "fanA05-p",
  296. shape: "fan-green",
  297. x: 290,
  298. y: 770,
  299. label: "A01",
  300. },{
  301. id: "fanA06-p",
  302. shape: "fan-green",
  303. x: 340,
  304. y: 770,
  305. label: "A01",
  306. },{
  307. id: "fanA07-p",
  308. shape: "fan-green",
  309. x: 390,
  310. y: 770,
  311. label: "A01",
  312. },{
  313. id: "fanA08-p",
  314. shape: "fan-green",
  315. x: 440,
  316. y: 770,
  317. label: "A01",
  318. },{
  319. id: "fanA09-p",
  320. shape: "fan-green",
  321. x: 490,
  322. y: 770,
  323. label: "A01",
  324. },{
  325. id: "fanA10-p",
  326. shape: "fan-green",
  327. x: 540,
  328. y: 770,
  329. label: "A01",
  330. },{
  331. id: "fanA11-p",
  332. shape: "fan-green",
  333. x: 590,
  334. y: 770,
  335. label: "A01",
  336. },{
  337. id: "fanA12-p",
  338. shape: "fan-green",
  339. x: 640,
  340. y: 770,
  341. label: "A01",
  342. },{
  343. id: "fanA13-p",
  344. shape: "fan-green",
  345. x: 690,
  346. y: 770,
  347. label: "A01",
  348. },{
  349. id: "fanA14-p",
  350. shape: "fan-green",
  351. x: 740,
  352. y: 770,
  353. label: "A01",
  354. },
  355. {
  356. id: "fanA12",
  357. shape: "fan-green",
  358. x: 1200,
  359. y: 510,
  360. label: "A01",
  361. },{
  362. id: "fanA13",
  363. shape: "fan-green",
  364. x: 1250,
  365. y: 510,
  366. label: "A01",
  367. },{
  368. id: "fanA14",
  369. shape: "fan-green",
  370. x: 1300,
  371. y: 510,
  372. label: "A01",
  373. },{
  374. id: "fanA15",
  375. shape: "fan-green",
  376. x: 1350,
  377. y: 510,
  378. label: "A01",
  379. },{
  380. id: "fanA16",
  381. shape: "fan-green",
  382. x: 1400,
  383. y: 510,
  384. label: "A01",
  385. },{
  386. id: "fanA17",
  387. shape: "fan-green",
  388. x: 1450,
  389. y: 510,
  390. label: "A01",
  391. },{
  392. id: "fanA18",
  393. shape: "fan-green",
  394. x: 1500,
  395. y: 510,
  396. label: "A01",
  397. },{
  398. id: "fanA19",
  399. shape: "fan-green",
  400. x: 1550,
  401. y: 510,
  402. label: "A01",
  403. },{
  404. id: "fanA20",
  405. shape: "fan-green",
  406. x: 1600,
  407. y: 510,
  408. label: "A01",
  409. },{
  410. id: "fanA21",
  411. shape: "fan-green",
  412. x: 1650,
  413. y: 510,
  414. label: "A01",
  415. },{
  416. id: "fanA22",
  417. shape: "fan-green",
  418. x: 1700,
  419. y: 510,
  420. label: "A01",
  421. },
  422. // {
  423. // id: "fanA23-m",
  424. // shape: "fan-green",
  425. // x: 1150,
  426. // y: 640,
  427. // label: "A01",
  428. // },{
  429. // id: "fanA24-m",
  430. // shape: "fan-green",
  431. // x: 1200,
  432. // y: 640,
  433. // label: "A01",
  434. // },{
  435. // id: "fanA25-m",
  436. // shape: "fan-green",
  437. // x: 1250,
  438. // y: 640,
  439. // label: "A01",
  440. // },{
  441. // id: "fanA26-m",
  442. // shape: "fan-green",
  443. // x: 1300,
  444. // y: 640,
  445. // label: "A01",
  446. // },{
  447. // id: "fanA27-m",
  448. // shape: "fan-green",
  449. // x: 1350,
  450. // y: 640,
  451. // label: "A01",
  452. // },{
  453. // id: "fanA28-m",
  454. // shape: "fan-green",
  455. // x: 1400,
  456. // y: 640,
  457. // label: "A01",
  458. // },{
  459. // id: "fanA29-m",
  460. // shape: "fan-green",
  461. // x: 1450,
  462. // y: 640,
  463. // label: "A01",
  464. // },{
  465. // id: "fanA31-m",
  466. // shape: "fan-green",
  467. // x: 1600,
  468. // y: 640,
  469. // label: "A01",
  470. // },{
  471. // id: "fanA32-m",
  472. // shape: "fan-green",
  473. // x: 1650,
  474. // y: 640,
  475. // label: "A01",
  476. // },{
  477. // id: "fanA33-m",
  478. // shape: "fan-green",
  479. // x: 1700,
  480. // y: 640,
  481. // label: "A01",
  482. // },
  483. {
  484. id: "fanA23-2",
  485. shape: "fan-green",
  486. x: 1100,
  487. y: 770,
  488. label: "A01",
  489. },{
  490. id: "fanA23-1",
  491. shape: "fan-green",
  492. x: 1150,
  493. y: 770,
  494. label: "A01",
  495. },{
  496. id: "fanA23",
  497. shape: "fan-green",
  498. x: 1200,
  499. y: 770,
  500. label: "A01",
  501. },{
  502. id: "fanA24",
  503. shape: "fan-green",
  504. x: 1250,
  505. y: 770,
  506. label: "A01",
  507. },{
  508. id: "fanA25",
  509. shape: "fan-green",
  510. x: 1300,
  511. y: 770,
  512. label: "A01",
  513. },{
  514. id: "fanA26",
  515. shape: "fan-green",
  516. x: 1350,
  517. y: 770,
  518. label: "A01",
  519. },{
  520. id: "fanA27",
  521. shape: "fan-green",
  522. x: 1400,
  523. y: 770,
  524. label: "A01",
  525. },{
  526. id: "fanA28",
  527. shape: "fan-green",
  528. x: 1450,
  529. y: 770,
  530. label: "A01",
  531. },{
  532. id: "fanA29",
  533. shape: "fan-green",
  534. x: 1500,
  535. y: 770,
  536. label: "A01",
  537. },{
  538. id: "fanA30",
  539. shape: "fan-green",
  540. x: 1550,
  541. y: 770,
  542. label: "A01",
  543. },{
  544. id: "fanA31",
  545. shape: "fan-green",
  546. x: 1600,
  547. y: 770,
  548. label: "A01",
  549. },{
  550. id: "fanA32",
  551. shape: "fan-green",
  552. x: 1650,
  553. y: 770,
  554. label: "A01",
  555. },{
  556. id: "fanA33",
  557. shape: "fan-green",
  558. x: 1700,
  559. y: 770,
  560. label: "A01",
  561. }]
  562. };
  563. },
  564. // 函数
  565. methods: {
  566. initGraph: function () {
  567. this.graph = new Graph({
  568. container: this.$el, // 画布的容器
  569. // width: undefined, // 默认使用容器宽度
  570. // height: undefined, // 默认使用容器高度
  571. autoResize: true, // boolean | Element | Document 是否监听容器大小改变,并自动更新画布大小 默认监听画布容器,也可以指定监听的元素
  572. mousewheel: {
  573. enabled: true,
  574. modifiers: [],
  575. },
  576. scroller: {
  577. enabled: true,
  578. pannable: true,
  579. },
  580. interacting: false,
  581. });
  582. this.graph.zoomTo(0.8);
  583. },
  584. initData: function () {
  585. const data = {
  586. nodes: [{
  587. id: "back-line1",
  588. x: 80,
  589. y: 400,
  590. shape: "path",
  591. attrs: {
  592. body: {
  593. d: `M942.9,99.76v44.39H1666
  594. M788,99.76V400.3c1.81,1.53,3.69,1.21,5.49,1.21H1666
  595. M723,99.76V401.51H1
  596. M658.11,99.76v44.39H1
  597. M803.52,34.42H643.62
  598. M1023.39,34.42H863.49
  599. M723.07,-19V33.42
  600. M942.94,-19V33.42
  601. M658.11,35.91V66.84
  602. M723,35.91V66.84
  603. M788,35.91V66.84
  604. M942.9,35.91V66.84`,
  605. fill: "transparent",
  606. stroke: "#cbaa07",
  607. "stroke-width": 3,
  608. },
  609. },
  610. movable: false,
  611. },{
  612. id: "back-line2",
  613. x: 772.5,
  614. y: 100,
  615. shape: "path",
  616. attrs: {
  617. body: {
  618. d: `M281,123.82H1
  619. M140,75v49
  620. M140,1V48.73
  621. M30.4,125.31v47
  622. M249.63,125.31v47`,
  623. fill: "transparent",
  624. stroke: "#b30461",
  625. "stroke-width": 3,
  626. },
  627. },
  628. movable: false,
  629. },{
  630. id: "main-change-1",
  631. x: 803,
  632. y: 300,
  633. shape: "main-change",
  634. movable: false,
  635. },{
  636. id: "main-change-2",
  637. x: 1023,
  638. y: 300,
  639. shape: "main-change",
  640. movable: false,
  641. },{
  642. id: "top-arrow",
  643. x: 912.5,
  644. y: 86,
  645. shape: "arrow-vertical-top-left",
  646. attrs: {
  647. line: {
  648. height: 0,
  649. },
  650. arrow: {
  651. fill: "#b30461",
  652. refY: 0,
  653. }
  654. },
  655. movable: false,
  656. }]
  657. };
  658. this.data.forEach(item => {
  659. switch (item.type) {
  660. case "switch":
  661. item.shape = `switch-${item.state == 0 ? 'break' : 'close'}`
  662. break;
  663. case "handcart":
  664. item.shape = `handcart${item.state1}${item.state2}`
  665. break;
  666. default:
  667. break;
  668. }
  669. let shape = `${item.shape}-${item.direction}`;
  670. let node = {
  671. id: item.id,
  672. x: item.x,
  673. y: item.y,
  674. shape: shape,
  675. movable: false,
  676. }
  677. data.nodes.push(node);
  678. })
  679. this.labels.forEach(item => {
  680. let node = {
  681. id: item.id,
  682. x: item.x,
  683. y: item.y,
  684. shape: item.shape,
  685. attrs: {
  686. label: {
  687. text: item.label,
  688. },
  689. },
  690. movable: false,
  691. }
  692. switch (item.shape) {
  693. case "form-text":
  694. node.attrs.value = {
  695. text: item.value,
  696. }
  697. break;
  698. default:
  699. break;
  700. }
  701. data.nodes.push(node);
  702. })
  703. this.fans.forEach(item => {
  704. let node = {
  705. id: item.id,
  706. x: item.x,
  707. y: item.y,
  708. shape: item.shape,
  709. attrs: {
  710. label: {
  711. text: item.label,
  712. },
  713. },
  714. movable: false,
  715. }
  716. data.nodes.push(node);
  717. })
  718. this.graph.fromJSON(data);
  719. this.graph.centerContent();
  720. setTimeout(() => {
  721. this.changeFanNodeById("fanA06", "fan-red", "A01");
  722. }, 5000);
  723. },
  724. // 通过id修改风机节点
  725. changeFanNodeById: function (id, shape, label) {
  726. var view = this.graph.getMountedViews();
  727. var node = view.find(t => t.cell.id == id);
  728. node.cell.remove();
  729. var cell = this.graph.createNode({
  730. id: id,
  731. shape: shape,
  732. x: node.cell.position().x,
  733. y: node.cell.position().y,
  734. attrs: {
  735. label: {
  736. text: label,
  737. },
  738. },
  739. });
  740. this.graph.addCell(cell);
  741. },
  742. initX6: function () {
  743. // 注册自定义节点
  744. customNode.register();
  745. this.initGraph();
  746. this.initData();
  747. },
  748. },
  749. // 生命周期钩子
  750. beforeCreate() {
  751. // 创建前
  752. },
  753. created() {
  754. // 创建后
  755. },
  756. beforeMount() {
  757. // 渲染前
  758. },
  759. mounted() {
  760. // 渲染后
  761. this.initX6();
  762. },
  763. beforeUpdate() {
  764. // 数据更新前
  765. },
  766. updated() {
  767. // 数据更新后
  768. },
  769. };
  770. </script>
  771. <style lang="less" scoped>
  772. </style>