checkJsonUtil.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <template>
  2. <el-container>
  3. <el-aside width="200px" class="el-scrollbar">
  4. <div style="height: 300px;">
  5. <el-input type="textarea" v-model="ModelID" placeholder='输入业务空间轮廓线,三维数组,X,Y,Z均为大写;或者模型ID' style="height: 100%;"></el-input>
  6. </div>
  7. <div title="上传json文件">
  8. <el-button size="mini" @click="clickInputFile" icon="el-icon-upload"></el-button>
  9. <input type="file" @change="filechange" ref="file">
  10. </div>
  11. <div title="适配底图">
  12. <el-button size="mini" @click="fitClick" icon="el-icon-crop"></el-button>
  13. </div>
  14. <div title="切割">
  15. <el-button size="mini" @click="cut" icon="el-icon-edit"></el-button>
  16. </div>
  17. <div title="清除">
  18. <el-button size="mini" @click="clear" icon="el-icon-refresh-left"></el-button>
  19. </div>
  20. <div title="定位">
  21. <el-button size="mini" @click="location" icon="el-icon-position"></el-button>
  22. </div>
  23. <div title="开启/关闭吸附">
  24. <el-button size="mini" @click="absorb" icon="el-icon-price-tag"></el-button>
  25. </div>
  26. <div title="矩形选择">
  27. <el-button size="mini" @click="rectSelection" icon="el-icon-mouse"></el-button>
  28. </div>
  29. <div title="通过模型ID生成平面图">
  30. <el-button size="mini" icon="el-icon-s-promotion" @click="modelChange"></el-button>
  31. </div>
  32. <div title="通过轮廓线生成业务空间">
  33. <el-button size="mini" @click="showOutline" icon="el-icon-magic-stick"></el-button>
  34. </div>
  35. <div title="打印">
  36. <el-button size="mini" @click="console" icon="el-icon-printer"></el-button>
  37. </div>
  38. <div title="下载svg">
  39. <el-button size="mini" @click="saveSvg" icon="el-icon-printer">下载svg</el-button>
  40. </div>
  41. </el-aside>
  42. <el-main>
  43. <div ref="graphy" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
  44. element-loading-background="rgba(0, 0, 0, 0.8)" style="height: 100%">
  45. <canvas id="bg" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  46. </div>
  47. </el-main>
  48. </el-container>
  49. </template>
  50. <script>
  51. import { SGraphScene } from "@saga-web/graph/lib/";
  52. import { DivideFloorScene, LocationPointScene } from "@saga-web/cad-engine/lib";
  53. import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
  54. export default {
  55. data() {
  56. return {
  57. view: null,
  58. scene: null,
  59. flag: undefined,
  60. show: true,
  61. loading: false,
  62. canvasWidth: 800,
  63. canvasHeight: 800,
  64. ModelID: "4cea832a217c11ea962ac576d98e7540"
  65. }
  66. },
  67. mounted() {
  68. this.canvasWidth = this.$refs.graphy.offsetWidth;
  69. this.canvasHeight = this.$refs.graphy.offsetHeight;
  70. this.createGraphy();
  71. document.onkeydown = E => {
  72. console.log(E)
  73. }
  74. window.onresize = () => {
  75. this.canvasWidth = this.$refs.graphy.offsetWidth;
  76. this.canvasHeight = this.$refs.graphy.offsetHeight;
  77. }
  78. },
  79. beforeCreate() {
  80. // 读取文件
  81. FileReader.prototype.reading = function ({ encode } = pms) {
  82. let bytes = new Uint8Array(this.result); //无符号整型数组
  83. let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
  84. return text;
  85. };
  86. /* 重写readAsBinaryString函数 */
  87. FileReader.prototype.readAsBinaryString = function (f) {
  88. if (!this.onload) //如果this未重写onload函数,则创建一个公共处理方式
  89. this.onload = e => { //在this.onload函数中,完成公共处理
  90. let rs = this.reading();
  91. console.log(rs);
  92. };
  93. this.readAsArrayBuffer(f); //内部会回调this.onload方法
  94. };
  95. },
  96. methods: {
  97. createGraphy() {
  98. let that = this;
  99. // this.disableRightButton()
  100. this.clearGraphy()
  101. that.scene = new DivideFloorScene();
  102. this.loading = true;
  103. that.scene.getFloorData('/modelapi/base-graph/query', { ModelId: this.ModelID }).then(res => {
  104. if (res.Result == 'failure') {
  105. this.$message.warning(res.Message)
  106. }
  107. console.log(res)
  108. that.view.scene = that.scene;
  109. that.view.fitSceneToView();
  110. this.loading = false;
  111. }).catch(err => {
  112. console.log(err)
  113. })
  114. },
  115. // 清除canvas
  116. clearGraphy() {
  117. if (this.view) {
  118. this.view.scene = null;
  119. return
  120. }
  121. this.view = new FloorView('bg')
  122. },
  123. fitClick() {
  124. this.view.fitSceneToView();
  125. },
  126. showSpace() {
  127. this.show = !this.show
  128. // this.scene.isShowDoor = this.show
  129. // this.scene.isShowSpace = this.show
  130. this.scene.spaceList.map(t => {
  131. if (!t.selected) {
  132. t.visible = false;
  133. }
  134. })
  135. this.scene.isShowColumn = this.show
  136. // Opt.spaceColor = new SColor(100,100,100,100);
  137. },
  138. disableRightButton() {
  139. this.$refs.canvas.addEventListener('contextmenu', (e) => {
  140. console.log(e)
  141. e.preventDefault();
  142. })
  143. this.scene.isShowSpace = false
  144. },
  145. cut() {
  146. this.scene.isMarking = true;
  147. console.log(this.scene)
  148. },
  149. console() {
  150. console.log(this.scene.getSelectedSpaces())
  151. this.scene.isShowColumn = false
  152. this.scene.isShowWall = false
  153. },
  154. clear() {
  155. this.scene.clearSceneMark()
  156. },
  157. location() {
  158. // console.log(this)
  159. this.view.fitSelectedToView()
  160. },
  161. move() {
  162. this.view.isMoving = !this.view.isMoving;
  163. },
  164. absorb() {
  165. this.scene.isAbsorbing = !this.scene.isAbsorbing;
  166. },
  167. rectSelection() {
  168. this.scene.isRectSelection = 1;
  169. console.log(this.scene)
  170. },
  171. showOutline() {
  172. try {
  173. let outline = JSON.parse(this.ModelID)
  174. console.log(outline)
  175. let obj = {
  176. RoomLocalName: '哈哈哈哈',
  177. OutLine: outline,
  178. RoomID: 12312,
  179. Color: "#006bd6",
  180. Height: 5000,
  181. HeightLightFlag: true
  182. }
  183. this.scene.removeAllZone()
  184. this.scene.addZone(obj);
  185. this.scene.zoneList[0].selected = true;
  186. this.view.fitSelectedToView();
  187. } catch (err) {
  188. alert('格式不正确')
  189. }
  190. },
  191. filechange(e) {
  192. let file = e.target.files[0]
  193. this.read(file)
  194. },
  195. read(f) {
  196. let rd = new FileReader();
  197. this.loading = true;
  198. rd.onload = e => {
  199. //this.readAsArrayBuffer函数内,会回调this.onload函数。在这里处理结果
  200. let cont = rd.reading({ encode: 'UTF-8' });
  201. let res = JSON.parse(cont);
  202. this.JSON = res;
  203. this.loadRes()
  204. };
  205. rd.readAsBinaryString(f);
  206. },
  207. loadRes() {
  208. if (this.JSON) {
  209. this.view.scene = null;
  210. this.scene = new DivideFloorScene();
  211. this.scene.addBaseMapItem(this.JSON.EntityList[0].Elements)
  212. this.view.scene = this.scene;
  213. console.log(this.scene)
  214. this.view.fitSceneToView();
  215. }
  216. this.loading = false;
  217. },
  218. modelChange() {
  219. console.log(this.ModelID)
  220. this.createGraphy();
  221. },
  222. clickInputFile() {
  223. this.$refs.file.click()
  224. },
  225. saveSvg(){
  226. if(this.view){
  227. this.view.saveSceneSvg(`1.svg`, 6400, 4800);
  228. }
  229. }
  230. },
  231. }
  232. </script>
  233. <style lang="less" scoped>
  234. .el-container {
  235. background: #fff;
  236. /deep/ textarea.el-textarea__inner {
  237. width: 100%;
  238. height: 100% !important;
  239. }
  240. .el-aside {
  241. padding: 10px;
  242. border: 1px solid #e4e4e4;
  243. }
  244. .el-aside > div {
  245. margin: 10px auto;
  246. text-align: right;
  247. }
  248. .el-main {
  249. padding: 10px !important;
  250. border: 1px solid #e4e4e4;
  251. border-left: none;
  252. }
  253. input[type="file"] {
  254. display: none;
  255. }
  256. }
  257. </style>