SBaseEquipment.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2016-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import { SGraphItem, SAnchorItem } from "@persagy-web/graph/lib";
  27. import { SBaseIconTextEdit, SBaseTextEdit } from "@persagy-web/edit";
  28. import { SColor } from "@persagy-web/draw/lib";
  29. import { v1 as uuidv1 } from "uuid";
  30. import { Legend, svgTobase64 } from "@persagy-web/big/lib";
  31. /**
  32. * 编辑基础设备类
  33. *
  34. * @author 韩耀龙 <han_yao_long@163.com>
  35. */
  36. export class SBaseEquipment extends SBaseIconTextEdit {
  37. /** 图例节点 id */
  38. nodeId: string | undefined = undefined;
  39. /** 设备图例 */
  40. _legendData: Legend | null = null;
  41. set legendData(val) {
  42. this._legendData = val;
  43. this.initData();
  44. }
  45. get legendData(): Legend | null {
  46. return this._legendData;
  47. }
  48. /** 信息点存储 */
  49. _infoPointList: any[] = [];
  50. set infoPointList(val) {
  51. this._infoPointList = val;
  52. }
  53. get infoPointList(): any[] {
  54. return this._infoPointList;
  55. }
  56. defaultUrl: string = "";
  57. /** 图得url */
  58. _url: string = "";
  59. set url(val) {
  60. this._url = val;
  61. this.initUrl();
  62. }
  63. get url(): string {
  64. return this._url;
  65. }
  66. /** 设备附加数据 */
  67. anotherMsg: string = "";
  68. /**
  69. * 构造函数
  70. *
  71. * @param parent 指向父 Item
  72. * @param data 数据
  73. */
  74. constructor(parent: SGraphItem | null, data: Legend) {
  75. super(parent);
  76. this.legendData = data;
  77. }
  78. /**
  79. * 设置 legendData 时对 item 做设置
  80. */
  81. initData() {
  82. // this.legendData 不能为空
  83. if (!this.legendData) return;
  84. this.nodeId = this.legendData?.nodeId;
  85. // 判断 size 是否存在
  86. if (this.legendData.size) {
  87. this.sWidth = this.legendData.size.width;
  88. this.sHeight = this.legendData.size.height;
  89. }
  90. this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
  91. // 判断是否有锚点数据
  92. if (this.legendData.anchorList && this.legendData.anchorList.length) {
  93. // 对锚点数据遍历生成对应的锚点
  94. this.anchorList = this.legendData.anchorList.map(t => {
  95. let item = new SAnchorItem(this);
  96. // 是否存在 anchorId
  97. if (t.anchorId) {
  98. item.id = t.anchorId;
  99. }
  100. item.moveTo(t.pos.x, t.pos.y);
  101. return item;
  102. });
  103. } else {
  104. const anchorPoint = [
  105. { pos: { x: this.img.x, y: this.img.y }, anchorId: uuidv1() }
  106. ];
  107. // 没锚点则默认中心点为锚点
  108. this.anchorList = anchorPoint.map(t => {
  109. let item = new SAnchorItem(this);
  110. // 是否存在 anchorId
  111. if (t.anchorId) {
  112. item.id = t.anchorId;
  113. }
  114. item.moveTo(t.pos.x, t.pos.y);
  115. return item;
  116. });
  117. }
  118. // 该设备是否有信息点
  119. if (
  120. this.legendData.properties &&
  121. this.legendData.properties.infoPointList
  122. ) {
  123. const infoPointList = this.legendData.properties.infoPointList;
  124. // 将信息点数据转换为实例
  125. if (infoPointList.length) {
  126. this.infoPointList = infoPointList;
  127. this.infoPointList.forEach((obj, i) => {
  128. this.setTextItem(obj, i);
  129. });
  130. } else {
  131. this.infoPointList = [];
  132. }
  133. } else {
  134. this.infoPointList = [];
  135. }
  136. this.showAnchor = false;
  137. // eslint-disable-next-line max-len
  138. // this.url = this.legendData.style.default.base64Url ? this.legendData.style.default.base64Url : this.legendData.style.default.url
  139. this.anotherMsg = this.legendData.properties.anotherMsg
  140. ? this.legendData.properties.anotherMsg
  141. : "";
  142. this.x = this.legendData.pos.x;
  143. this.y = this.legendData.pos.y;
  144. this.moveable = true;
  145. this.selectable = true;
  146. }
  147. /**
  148. * 根据 url 获取图片
  149. */
  150. initUrl() {
  151. // 获取图数据转换为 base64
  152. svgTobase64(this.url)
  153. .then(res => {
  154. // @ts-ignore
  155. this.img.url = res ? res : "";
  156. })
  157. .catch(res => {
  158. this.img.url = res;
  159. });
  160. }
  161. /**
  162. * 设置信息点
  163. *
  164. * @params obj 设置的信息点
  165. */
  166. setMsgPoint(val: any) {
  167. // 根据是否勾选来判断是够增加或删除
  168. if (val.checked) {
  169. this._infoPointList.push(val);
  170. this.setTextItem(val, this._infoPointList.length - 1);
  171. } else {
  172. let deleteItemIndex = -1;
  173. // 遍历信息点数组删除 checked 为 false 的信息点
  174. this._infoPointList.forEach((item, index) => {
  175. // 通过 id 对比定位对象
  176. if (val.code == item.code) {
  177. deleteItemIndex = index;
  178. }
  179. });
  180. this._infoPointList.splice(deleteItemIndex, 1);
  181. this.setTextItem(val, deleteItemIndex);
  182. }
  183. }
  184. /**
  185. * 根据选中状态增加 textItem
  186. *
  187. * @params obj textItem 文本信息
  188. * @params index 文本索引
  189. */
  190. setTextItem(val: any, index: number): void {
  191. // 该状态时否选中如果选中生成实例并维护
  192. if (val.checked) {
  193. let item = new SBaseTextEdit(this, null);
  194. item.propertyData = val;
  195. item.text = val.name;
  196. // 是否存在pos
  197. if (val.pos) {
  198. item.moveTo(val.pos.x, val.pos.y);
  199. } else {
  200. item.moveTo(
  201. this.img.width * 0.5,
  202. -(this.font.size * 1.25 * 0.5) + index * 10
  203. );
  204. }
  205. item.font.size = val.font ? val.font : 12;
  206. item.isTransform = false;
  207. item.showSelect = false;
  208. item.color = val.color
  209. ? new SColor(val.color)
  210. : new SColor("#000000");
  211. item.backgroundColor = val.backgroundColor
  212. ? new SColor(val.backgroundColor)
  213. : SColor.Transparent;
  214. item.strokeColor = val.strokeColor
  215. ? new SColor(val.strokeColor)
  216. : SColor.Transparent;
  217. item.connect("textSelect", this, this.textSelectChange);
  218. this.textItemList.push(item);
  219. } else {
  220. this.scene?.removeItem(this.textItemList[index]);
  221. this.textItemList.splice(index, 1);
  222. this.update();
  223. }
  224. }
  225. /**
  226. * 返回对象储存的相关数据
  227. *
  228. * @return 对象储存的相关数据
  229. */
  230. toData(): any {
  231. // this.legendData 必须存在
  232. if (this.legendData) {
  233. // 遍历锚点获取需要存储的数据格式
  234. const list = this.anchorList.map(item => {
  235. return {
  236. anchorId: item.id, // 数据类型中定义为 id,但是后台保存要的是字段anchorId
  237. pos: {
  238. x: item.x,
  239. y: item.y
  240. }
  241. };
  242. });
  243. this.legendData.anchorList = list;
  244. // 反馈大小
  245. if (this.legendData.size) {
  246. this.legendData.size.width = this.sWidth;
  247. this.legendData.size.height = this.sHeight;
  248. } else {
  249. this.legendData.size = {
  250. width: this.sWidth,
  251. height: this.sHeight
  252. };
  253. }
  254. // 位置
  255. this.legendData.pos = {
  256. x: this.x,
  257. y: this.y
  258. };
  259. // 存储信息点
  260. const infoPoinList: any[] = [];
  261. // 获取信息点对应参数
  262. this.textItemList.forEach(item => {
  263. let obj = Object.assign(item.propertyData, {
  264. pos: { x: item.x, y: item.y },
  265. font: item.font.size,
  266. color: item.color.value,
  267. backgroundColor: item.backgroundColor.value,
  268. strokeColor: item.strokeColor.value
  269. });
  270. delete obj.currentEquipMsg;
  271. infoPoinList.push(obj);
  272. });
  273. this.legendData.properties.infoPointList = infoPoinList;
  274. this.legendData.properties.anotherMsg = this.anotherMsg;
  275. this.legendData.style.default.base64Url = "";
  276. // 判断 defaultUrl 是否存在
  277. if (this.defaultUrl) {
  278. this.legendData.style.default.url = this.defaultUrl;
  279. }
  280. return this.legendData;
  281. }
  282. }
  283. }