mainScene.ts 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. import { SRect, SSize, SPoint } from "@sybotan-web/base";
  2. import SGraphyPolygonItem from './newItems/SGraphyPolygonItem.js'
  3. import SGraphyImgItem from './newItems/SGraphyImgItem.js'
  4. import { SGraphyScene, SMouseEvent } from "@sybotan-web/graphy";
  5. import { SPen, SPainter, SColor } from "@sybotan-web/draw";
  6. import { dataItemPath, dataItem, dataSpaceItem, dataInterface, PolygonItemInterface, ImgItemInterface } from './dataType' //传入参数的参数接口类型
  7. import Axios from 'axios';
  8. import pako from "./until/pako.js"
  9. import tools from "./until/tool.js"
  10. /**
  11. * @name mainScene
  12. * @time 2019-07.07;
  13. * 添加所有item的场景到scene中
  14. */
  15. export default class mainScene extends SGraphyScene {
  16. data: dataInterface | null;
  17. private _isShowSpace: boolean = true; // 是否显示空间;
  18. private _isShowWallList: boolean = true; //是否展示墙体;
  19. private _isShowEquipmentList: boolean = true; //是否展示设备;
  20. private _isShowVrtualWallList: boolean = true; //是否展示虚拟墙
  21. // 设置是否显示空间
  22. get isShowSpace(): boolean {
  23. return this._isShowSpace
  24. }
  25. set isShowSpace(b: boolean) {
  26. this._isShowSpace = b
  27. }
  28. // 设置是否显示墙
  29. get isShowWallList(): boolean {
  30. return this._isShowWallList
  31. }
  32. set isShowWallList(b: boolean) {
  33. this._isShowWallList = b
  34. }
  35. // 设置是否显示设备
  36. get isShowEquipmentList(): boolean {
  37. return this._isShowEquipmentList
  38. }
  39. set isShowEquipmentList(b: boolean) {
  40. this._isShowEquipmentList = b
  41. }
  42. // 设置是否显示虚拟墙
  43. get isShowVrtualWallList(): boolean {
  44. return this._isShowVrtualWallList
  45. }
  46. set isShowVrtualWallList(b: boolean) {
  47. this._isShowVrtualWallList = b
  48. }
  49. /**
  50. * @param data 绘制空间地图得所有参数
  51. */
  52. constructor(data: dataInterface | null) {
  53. super()
  54. this.data = data;
  55. if (this.data != null) {
  56. this.addAllItemList(this.data);
  57. }
  58. }
  59. //获取参数
  60. urlGetData(url: string) {
  61. let that = this;
  62. return new Promise((relove, reject) => {
  63. Axios({
  64. method: 'get',
  65. url: url,
  66. data: {},
  67. responseType: 'blob',
  68. // contentType: "charset=utf-8"
  69. }).then(res => {
  70. var blob = res.data;
  71. this.zipToJson(blob).then((jsonData: any) => {
  72. that.addAllItemList(jsonData)
  73. relove()
  74. }).catch((error: any) => {
  75. console.log(error)
  76. });
  77. // console.log(reader)
  78. }).catch(res => {
  79. console.log(res)
  80. })
  81. })
  82. }
  83. // 压缩包变为json格式数据
  84. zipToJson(blob: any): any {
  85. let data = null;
  86. var reader = new FileReader();
  87. reader.readAsBinaryString(blob);
  88. let _this = this;
  89. return new Promise((resolve) => {
  90. reader.onload = function (readerEvt: any) {
  91. var binaryString = readerEvt.target.result;
  92. //解压数据
  93. let base64Data = btoa(binaryString)
  94. let unGzipData = pako.unzip(base64Data)
  95. data = unGzipData;
  96. if (data.WallList && data.WallList.length) {
  97. tools.changeMap(data.WallList, -1, "PointList");
  98. }
  99. if (data.SpaceList && data.SpaceList.length) {
  100. tools.changeMap(data.SpaceList, -1, "Paths");
  101. }
  102. if (data.ColumnList && data.ColumnList.length) {
  103. tools.changeMap(data.ColumnList, -1, "Path");
  104. }
  105. if (data.VirtualWallList && data.VirtualWallList.length) {
  106. tools.changeMap(data.VirtualWallList, -1, "PointList");
  107. }
  108. if (data.EquipmentList && data.EquipmentList.length) {
  109. tools.changeMap(data.EquipmentList, -1, "PointList");
  110. }
  111. resolve(data)
  112. };
  113. })
  114. }
  115. // 以下是绘制方法
  116. /**
  117. * 增添所有绘制item(地图);
  118. */
  119. addAllItemList(data: dataInterface) {
  120. let space: dataSpaceItem[] = data.SpaceList;
  121. // let wall:
  122. this.addSpaceList(space) //绘制空间
  123. this.addWallList() //绘制墙
  124. let images: ImgItemInterface[] = data.images
  125. this.addImageList(images)
  126. }
  127. /**
  128. * 添加所有空间到scene 中
  129. * @param space 空间list
  130. */
  131. addSpaceList(space: dataSpaceItem[]): void {
  132. if (space && space.length) {
  133. for (let i = 0; i < space.length; i++) {
  134. if (space[i].Paths[1] && space[i].Paths[1].length >= 2) {
  135. this.addItem(this.constructeItem(
  136. {
  137. parent: null,
  138. space: space[i],
  139. businessType: 'space'
  140. }));
  141. }
  142. }
  143. for (let i = 0; i < space.length; i++) {
  144. if (space[i].Paths[0] && space[i].Paths[0].length >= 2 && !space[i].Paths[1]) {
  145. this.addItem(this.constructeItem(
  146. {
  147. parent: null,
  148. space: space[i],
  149. businessType: 'space'
  150. }));
  151. }
  152. }
  153. }
  154. }
  155. // 绘制墙体
  156. addWallList(): void {
  157. }
  158. // 绘制设备
  159. addEquipmentList() {
  160. }
  161. // 绘制柱体
  162. addColumnListList(): void {
  163. }
  164. // 绘制虚拟墙
  165. addVrtualWallList(): void {
  166. }
  167. // 绘制图片
  168. addImageList(imageList: ImgItemInterface[]): void {
  169. if (imageList && imageList.length) {
  170. imageList.map(t => {
  171. this.addItem(new SGraphyImgItem(null, t.img, t.X, t.Y, t.width, t.height))
  172. })
  173. }
  174. }
  175. /**
  176. * 产生item实例
  177. */
  178. constructeItem(PolygonItemInterfaceData: PolygonItemInterface): SGraphyPolygonItem {
  179. return new SGraphyPolygonItem(PolygonItemInterfaceData)
  180. }
  181. // 鼠标交互类事件
  182. // 点击
  183. click(_this: any, fn: any): void {
  184. this.root.children.forEach(item => {
  185. item.connect("click", _this, fn);
  186. });
  187. }
  188. // 双击
  189. dbclick(_this: any, fn: any): void {
  190. this.root.children.forEach(item => {
  191. item.connect("doubleClick", _this, fn);
  192. });
  193. }
  194. // 按下
  195. mouseDown(_this: any, fn: any) {
  196. this.root.children.forEach(item => {
  197. item.connect("mouseDown", _this, fn);
  198. });
  199. }
  200. //移动
  201. mouseMove(_this: any, fn: any) {
  202. this.root.children.forEach(item => {
  203. item.connect("mouseMove", _this, fn);
  204. });
  205. }
  206. // 点解结束
  207. mouseUp(_this: any, fn: any) {
  208. this.root.children.forEach(item => {
  209. item.connect("mouseUp", _this, fn);
  210. });
  211. }
  212. }