topology.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <!-- 拓扑图demo -->
  3. <el-container>
  4. <el-aside width="200px" class="el-scrollbar">
  5. <div title="划线">
  6. <el-button size="mini" @click="drawline" icon="el-icon-crop"></el-button>
  7. </div>
  8. <div title="适配底图">
  9. <el-button size="mini" @click="fitClick" icon="el-icon-crop"></el-button>
  10. </div>
  11. <div title="添加item">
  12. <el-button size="mini" @click="additem" icon="el-icon-crop"></el-button>
  13. </div>
  14. </el-aside>
  15. <el-main>
  16. <div ref="graphy" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
  17. element-loading-background="rgba(0, 0, 0, 0.8)" style="height: 100%">
  18. <canvas id="bg" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  19. </div>
  20. </el-main>
  21. </el-container>
  22. </template>
  23. <script>
  24. import { TopoScene, TopoView } from "@saga-web/topology/lib";
  25. export default {
  26. data() {
  27. return {
  28. view: null,
  29. scene: null,
  30. loading: false,
  31. canvasWidth: 800,
  32. canvasHeight: 800,
  33. }
  34. },
  35. mounted() {
  36. this.canvasWidth = this.$refs.graphy.offsetWidth;
  37. this.canvasHeight = this.$refs.graphy.offsetHeight;
  38. this.createGraphy();
  39. document.onkeydown = E => {
  40. console.log(E)
  41. }
  42. window.onresize = () => {
  43. this.canvasWidth = this.$refs.graphy.offsetWidth;
  44. this.canvasHeight = this.$refs.graphy.offsetHeight;
  45. }
  46. },
  47. beforeCreate() {
  48. // 读取文件
  49. FileReader.prototype.reading = function ({ encode } = pms) {
  50. let bytes = new Uint8Array(this.result); //无符号整型数组
  51. let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
  52. return text;
  53. };
  54. /* 重写readAsBinaryString函数 */
  55. FileReader.prototype.readAsBinaryString = function (f) {
  56. if (!this.onload) //如果this未重写onload函数,则创建一个公共处理方式
  57. this.onload = e => { //在this.onload函数中,完成公共处理
  58. let rs = this.reading();
  59. console.log(rs);
  60. };
  61. this.readAsArrayBuffer(f); //内部会回调this.onload方法
  62. };
  63. },
  64. methods: {
  65. createGraphy() {
  66. this.clearGraphy();
  67. this.scene = new TopoScene()
  68. this.view.scene = this.scene;
  69. },
  70. // 清除canvas
  71. clearGraphy() {
  72. if (this.view) {
  73. this.view.scene = null;
  74. return
  75. }
  76. this.view = new TopoView('bg')
  77. },
  78. fitClick() {
  79. this.view.fitSceneToView();
  80. },
  81. additem() {
  82. let equipdata = {
  83. ID: this.uuid(),
  84. Size: {
  85. Width: 100,
  86. Height: 50
  87. },
  88. Pos: {},
  89. AnchorList: [{ Pos: { X: 0, Y: -25 } },{ Pos: { X: 0, Y: 25 } },{ Pos: { X: -50, Y: 0 } },{ Pos: { X: 50, Y: 0} }]
  90. }
  91. this.scene.createItem(equipdata)
  92. },
  93. drawline() {
  94. this.scene.isLining = true;
  95. },
  96. uuid(len, radix) {
  97. var chars = '0123456789abcdef'.split('');
  98. var uuid = [],
  99. i;
  100. radix = radix || chars.length;
  101. if (len) {
  102. for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
  103. } else {
  104. var r;
  105. uuid[8] = uuid[13] = uuid[18] = uuid[23] = '';
  106. uuid[14] = '4';
  107. for (i = 0; i < 32; i++) {
  108. if (!uuid[i]) {
  109. r = 0 | Math.random() * 16;
  110. uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
  111. }
  112. }
  113. }
  114. return uuid.join('');
  115. }
  116. },
  117. }
  118. </script>
  119. <style lang="less" scoped>
  120. .el-container {
  121. background: #fff;
  122. /deep/ textarea.el-textarea__inner {
  123. width: 100%;
  124. height: 100% !important;
  125. }
  126. .el-aside {
  127. padding: 10px;
  128. border: 1px solid #e4e4e4;
  129. }
  130. .el-aside > div {
  131. margin: 10px auto;
  132. text-align: right;
  133. }
  134. .el-main {
  135. padding: 10px !important;
  136. border: 1px solid #e4e4e4;
  137. border-left: none;
  138. }
  139. input[type="file"] {
  140. display: none;
  141. }
  142. }
  143. </style>