baseTopu9.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <!-- 派生 设备类 -->
  2. <template>
  3. <div ref="basetopu6" class="base-topu">
  4. <canvas
  5. id="floor_topu9"
  6. :width="canvasWidth"
  7. :height="canvasHeight"
  8. tabindex="0"
  9. ></canvas>
  10. <!-- 鹰眼窗口 -->
  11. <canvas
  12. id="enlarge"
  13. width="200"
  14. height="150"
  15. tabindex="0"
  16. style="border: 1px solid red; position: absolute; bottom: 0; left: 0"
  17. />
  18. </div>
  19. </template>
  20. <script>
  21. import { SGraphScene } from "@persagy-web/graph";
  22. import { FloorView } from "./FloorView";
  23. import { PTopoParser } from "./PTopoParser";
  24. import { topuFactory } from "./items/topuFactory1";
  25. import { EagleView } from "./items/EagleView";
  26. import { SColor, SPoint } from "@persagy-web/draw/";
  27. import axios from "axios";
  28. import { data } from "./data/data1.js"; //模拟接口返回参数
  29. export default {
  30. data() {
  31. return {
  32. canvasWidth: 0, // 画布的宽
  33. canvasHeight: 0, // 画布的高
  34. view: null, // 视图 view
  35. enlarge_view: null, //鹰眼图
  36. scene: null, // 场景类
  37. };
  38. },
  39. methods: {
  40. // 初始化
  41. init() {
  42. this.clearImg();
  43. this.view ? (this.view.scene = this.scene) : null;
  44. this.enlarge_view ? (this.enlarge_view.scene = this.scene) : null;
  45. // 获取压缩包数据并解压
  46. this.getMapBlob();
  47. },
  48. // 请求获取地图的压缩包
  49. getMapBlob() {
  50. const obj = {
  51. graphId: "2dd925178d164a96941c34326ad340e8",
  52. id: "376f578716fb48febe8fb291b527169f",
  53. };
  54. // 请求头上加 projectId
  55. axios.interceptors.request.use(
  56. (config) => {
  57. config.headers = {
  58. projectId: "Pj1101050029", //项目id
  59. };
  60. return config;
  61. },
  62. (error) => {
  63. return Promise.reject(error);
  64. }
  65. );
  66. // 生产环境放开此代码获取真实数据
  67. // axios.post("/labsl/graph/pub/read", obj).then((res) => {
  68. // this.getDataSuc(data);
  69. // });
  70. // 以下为测试环境demo;
  71. this.getDataSuc(data);
  72. },
  73. // 读图成功回调
  74. getDataSuc(res) {
  75. // if (res.data.result == "failure") return;
  76. // 添加图片路径
  77. if (data.content.elements.nodes && data.content.elements.nodes.length) {
  78. data.content.elements.nodes = data.content.elements.nodes.map((obj) => {
  79. if (obj.properties.type == "BaseEquipment") {
  80. if (obj.style.default.url) {
  81. obj.style.default.url = !obj.style.default.url.includes(
  82. "/image-service/common/"
  83. )
  84. ? "/image-service/common/image_get?systemId=dataPlatform&key=" +
  85. obj.style.default.url
  86. : obj.style.default.url;
  87. } else {
  88. // 默认图标
  89. obj.style.default.url = !obj.style.default.url.includes(
  90. "/image-service/common/"
  91. )
  92. ? "/image-service/common/image_get?systemId=dataPlatform&key=" +
  93. "1607752841478.svg"
  94. : obj.style.default.url;
  95. }
  96. }
  97. return obj;
  98. });
  99. }
  100. const parse = new PTopoParser();
  101. parse.factory = new topuFactory();
  102. // 获取数据解析数据再将转化得实例添加到场景中
  103. parse.parseData(data.content.elements);
  104. parse.markers.forEach((item) => {
  105. item.moveable = false;
  106. this.scene.addItem(item);
  107. });
  108. parse.nodes.forEach((item) => {
  109. item.moveable = false;
  110. if ("BaseEquipment" == item.data.properties.type) {
  111. item.setEquipName();
  112. item.setStatusPointColor("#7ed321");
  113. }
  114. // 相关事件触发
  115. item.connect("onMouseDown", this, this.onMousedown);
  116. item.connect("onMouseUp", this, this.onMouseup);
  117. item.connect("onMouseLeave", this, this.onMouseleave);
  118. item.connect("onMouseEnter", this, this.onMouseenter);
  119. // 监听放大视图中滚轮放缩事件, wheelScale 是回调
  120. this.view.connect("onMouseWheel", this, this.wheelScale);
  121. // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调
  122. this.view.connect("leftMove", this, this.midMouseMove);
  123. // 监听标准视图的事件, 回调函数是 mouseMove
  124. this.enlarge_view.connect("viewMouseMove", this, this.mouseMove);
  125. this.scene.addItem(item);
  126. });
  127. parse.relations.forEach((t) => {
  128. t.moveable = false;
  129. this.scene.addItem(t);
  130. });
  131. setTimeout(() => {
  132. // 设置放大视图为此时标准视图的 6 倍, 注意 6 = 1200 / 200; 1200是放大视图的宽,200 是标准视图中 可视区域的宽
  133. const scale = this.canvasHeight / 150;
  134. this.view.scale = scale * this.enlarge_view.scale;
  135. this.view.fitSceneToView();
  136. this.enlarge_view.fitSceneToView(1);
  137. // 设置标准视图不可放缩
  138. this.enlarge_view.scalable = false;
  139. });
  140. },
  141. // 鼠标点击事件
  142. onMousedown(item, e) {
  143. console.log("鼠标按下!", item, e);
  144. this.$emit("onMousedown", item, e);
  145. },
  146. // 放大视图 滚轮放缩事件回调
  147. wheelScale(item, ev) {
  148. // ev[0] view 的放缩比例
  149. // ev[1] true 上滚 放大
  150. if (this.view && this.enlarge_view) {
  151. if (ev[1]) {
  152. this.enlarge_view.rectW /= this.view.wheelZoom;
  153. this.enlarge_view.rectH /= this.view.wheelZoom;
  154. } else {
  155. this.enlarge_view.rectW *= this.view.wheelZoom;
  156. this.enlarge_view.rectH *= this.view.wheelZoom;
  157. }
  158. }
  159. },
  160. // 步骤5
  161. mouseMove(item, ev) {
  162. const p = ev[0];
  163. this.locationGraphy(p);
  164. },
  165. // 定位点到放大视图的中心点
  166. locationGraphy(point) {
  167. let centerX = this.view.width / 2 - point.x * this.view.scale;
  168. let centerY = this.view.height / 2 - point.y * this.view.scale;
  169. this.view.origin = new SPoint(centerX, centerY);
  170. },
  171. midMouseMove(item, ev) {
  172. if (this.enlarge_view && this.view) {
  173. const p = this.view.mapToScene(
  174. this.canvasWidth / 2,
  175. this.canvasHeight / 2
  176. );
  177. const p2 = this.enlarge_view.mapFromScene(p.x, p.y);
  178. this.enlarge_view.rectC.x = p2.x;
  179. this.enlarge_view.rectC.y = p2.y;
  180. this.enlarge_view.update();
  181. }
  182. },
  183. // 鼠标抬起事件
  184. onMouseup(item, e) {
  185. console.log("鼠标抬起!", item, e);
  186. },
  187. // 鼠标事件移入
  188. onMouseenter(item, e) {
  189. console.log("鼠标移入!", item, e);
  190. },
  191. // 鼠标事件移出
  192. onMouseleave(item, e) {
  193. console.log("鼠标移出!", item, e);
  194. },
  195. // 清空画布
  196. clearImg() {
  197. this.scene = new SGraphScene();
  198. if (this.view) {
  199. this.view.update();
  200. }
  201. if (this.enlarge_view) {
  202. this.enlarge_view.update();
  203. }
  204. },
  205. },
  206. created() {
  207. this.clearImg();
  208. },
  209. mounted() {
  210. // 获取 canvas 的宽高
  211. this.canvasWidth = 800;
  212. this.canvasHeight = 600;
  213. // 初始化场景类
  214. this.view = new FloorView("floor_topu9");
  215. this.enlarge_view = new EagleView("enlarge"); // 小图
  216. if (this.scene) {
  217. this.view.scene = this.scene;
  218. this.enlarge_view.scene = this.scene;
  219. }
  220. this.init();
  221. },
  222. };
  223. </script>
  224. <style lang="less" scoped>
  225. .base-topu {
  226. width: 100%;
  227. height: 100%;
  228. position: relative;
  229. }
  230. </style>