SEquipmentItem.ts 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. import { SObjectItem, SImageItem, SGraphItem, STextItem } from "@saga-web/graph/lib";
  2. import { ItemOrder } from "@saga-web/big/lib";
  3. import { SColor, SPainter, SRect } from "@saga-web/draw/lib";
  4. import { SMouseEvent } from "@saga-web/base/lib";
  5. import { EquipmentData } from "../types/EquipmentData";
  6. export class SEquipmentItem extends SObjectItem {
  7. // img对象
  8. img: SImageItem = new SImageItem(this);
  9. textArr: STextItem[] = [];
  10. /** imgkey值 */
  11. _imgKey: string = "";
  12. /** 设备状态值 */
  13. _status: string = "Running";
  14. /**保存设备数据 */
  15. _epData: EquipmentData | any = {};
  16. get imgKey(): string {
  17. return this._imgKey;
  18. }
  19. set imgKey(v: string) {
  20. this._imgKey = v;
  21. this.img.url = `http://localhost:8091/serve/topology-wanda/Picture/query/${v}`;
  22. this.img.connect("imgLoadOver", this, () => {
  23. // 抛出设备中的图片加载完成事件
  24. this.$emit("equipImgLoadOver");
  25. this.update();
  26. });
  27. }
  28. get status(): string {
  29. return this._status;
  30. }
  31. set status(v: string) {
  32. this._status = v;
  33. this.updateStatus();
  34. }
  35. // 将EquipmentData保存起来,以便修改status时,可以找到StatusImage
  36. get epData(): EquipmentData {
  37. return this._epData;
  38. }
  39. set epData(v: EquipmentData) {
  40. this._epData = v;
  41. }
  42. /**
  43. *
  44. * @param parent 父类
  45. * @param epData 需要展示的节点信息
  46. */
  47. constructor(parent: SGraphItem | null, epData: EquipmentData) {
  48. super(parent);
  49. console.log(epData);
  50. epData && (this.epData = epData);
  51. this.moveable = true;
  52. this.id = epData.ID;
  53. this.zOrder = ItemOrder.textOrder;
  54. this.textArr = [];
  55. // 有信息点信息时,绘制信息点信息
  56. // 加载设备
  57. if (epData && epData?.Pos) {
  58. this.loadEquipment(epData);
  59. } else if (epData) {
  60. //绘制设备
  61. this.img.url = `http://localhost:8091/serve/topology-wanda/Picture/query/14d978b7edd346f088d6cfb53ada4070`;
  62. this.img.width = 24;
  63. this.img.height = 24;
  64. //添加设备
  65. let index = 0;
  66. for (let key in epData) {
  67. let textItem = new STextItem(this);
  68. textItem.moveable = true;
  69. textItem.backgroundColor = SColor.White;
  70. textItem.font.size = 14;
  71. textItem.moveTo(17, index * 20 - 10);
  72. // @ts-ignore
  73. textItem.text = `${key} : ${epData[key]}`;
  74. this.textArr.push(textItem);
  75. index++;
  76. }
  77. }
  78. }
  79. /**
  80. * 加载设备
  81. * @param epData 设备信息
  82. */
  83. loadEquipment(epData: EquipmentData): void {
  84. // 位置
  85. this.x = epData.Pos.X;
  86. this.y = epData.Pos.Y;
  87. let imageKey = epData.Properties?.StatusImage![0].ImageKey;
  88. // this.img.url = `http://localhost:8091/serve/topology-wanda/Picture/query/${url}`;
  89. this.imgKey = imageKey;
  90. // 图片宽高
  91. this.img.width = epData.Size.Width;
  92. this.img.height = epData.Size.Height;
  93. // 名称
  94. let nameItem = new STextItem(this);
  95. nameItem.moveable = true;
  96. nameItem.backgroundColor = SColor.Transparent;
  97. nameItem.font.size = 14;
  98. nameItem.text = epData.Name;
  99. nameItem.moveTo(-epData.Size.Width / 2, epData.Size.Height / 2 + 7);
  100. this.textArr.push(nameItem);
  101. // 信息点
  102. let { InfoList } = epData;
  103. InfoList.map(({ Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign }) => {
  104. let textItem = new STextItem(this);
  105. textItem.moveable = true;
  106. // textItem.backgroundColor = SColor.Transparent;
  107. textItem.backgroundColor = new SColor(Background);
  108. textItem.width = Width;
  109. textItem.height = Height;
  110. textItem.text = Name;
  111. textItem.font.size = FontSize;
  112. textItem.color = new SColor(Color);
  113. textItem.pos.x = X;
  114. textItem.pos.y = Y;
  115. this.textArr.push(textItem);
  116. });
  117. }
  118. /**
  119. * 状态变化后,更新状态切换图片
  120. * 如果切换后的状态无ImageKey,使用Running状态的ImageKey
  121. */
  122. updateStatus() {
  123. let StatusImage = this.epData.Properties.StatusImage,
  124. currentSts = StatusImage.filter((v) => v.Status === this._status)[0],
  125. runingSts = StatusImage.filter((v) => v.Status === "Running")[0];
  126. this.imgKey = currentSts.ImageKey || runingSts.ImageKey;
  127. }
  128. /**
  129. * 宽高发生变化
  130. *
  131. * @return SRect 所有子对象的并集
  132. * */
  133. boundingRect(): SRect {
  134. // return new SRect(-this.width / 2, -this.height / 2, this.width, this.height);
  135. let rect = this.img.boundingRect().adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
  136. if (this.textArr.length) {
  137. for (let text of this.textArr) {
  138. rect = rect.unioned(text.boundingRect().adjusted(text.pos.x, text.pos.y, 0, 0));
  139. }
  140. }
  141. return rect.adjusted(-5, -5, 10, 10);
  142. } // Function boundingRect()
  143. toData(): EquipmentData {
  144. // 更新相关数据
  145. let data = this.epData;
  146. data.Pos.X = this.x;
  147. data.Pos.Y = this.y;
  148. data.Size.Width = this.width;
  149. data.Size.Height = this.height;
  150. // @ts-ignore
  151. // infoList中坐标处理
  152. data.InfoList.map((item, index, arr) => {
  153. arr[index].X = this.textArr[index + 1].pos.x;
  154. arr[index].Y = this.textArr[index + 1].pos.y;
  155. });
  156. return data;
  157. }
  158. /**
  159. * Item绘制操作
  160. *
  161. * @param painter painter对象
  162. */
  163. onDraw(painter: SPainter): void {
  164. painter.pen.lineWidth = painter.toPx(1);
  165. painter.pen.color = SColor.Black;
  166. painter.brush.color = SColor.Transparent;
  167. // painter.drawRect(this.boundingRect());
  168. } // Function onDraw()
  169. }