|
@@ -0,0 +1,236 @@
|
|
|
+<!-- 派生 设备类 -->
|
|
|
+<template>
|
|
|
+ <div ref="basetopu6" class="base-topu">
|
|
|
+ <canvas
|
|
|
+ id="floor_topu9"
|
|
|
+ :width="canvasWidth"
|
|
|
+ :height="canvasHeight"
|
|
|
+ tabindex="0"
|
|
|
+ ></canvas>
|
|
|
+ <!-- 鹰眼窗口 -->
|
|
|
+ <canvas
|
|
|
+ id="enlarge"
|
|
|
+ width="200"
|
|
|
+ height="150"
|
|
|
+ tabindex="0"
|
|
|
+ style="border: 1px solid red; position: absolute; bottom: 0; left: 0"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { SGraphScene } from "@persagy-web/graph";
|
|
|
+import { FloorView } from "./FloorView";
|
|
|
+import { PTopoParser } from "./PTopoParser";
|
|
|
+import { topuFactory } from "./items/topuFactory1";
|
|
|
+import { EagleView } from "./items/EagleView";
|
|
|
+import { SColor, SPoint } from "@persagy-web/draw/";
|
|
|
+import axios from "axios";
|
|
|
+import { data } from "./data/data1.js"; //模拟接口返回参数
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ canvasWidth: 0, // 画布的宽
|
|
|
+ canvasHeight: 0, // 画布的高
|
|
|
+ view: null, // 视图 view
|
|
|
+ enlarge_view: null, //鹰眼图
|
|
|
+ scene: null, // 场景类
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化
|
|
|
+ init() {
|
|
|
+ this.clearImg();
|
|
|
+ this.view ? (this.view.scene = this.scene) : null;
|
|
|
+ this.enlarge_view ? (this.enlarge_view.scene = this.scene) : null;
|
|
|
+ // 获取压缩包数据并解压
|
|
|
+ this.getMapBlob();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 请求获取地图的压缩包
|
|
|
+ getMapBlob() {
|
|
|
+ const obj = {
|
|
|
+ graphId: "2dd925178d164a96941c34326ad340e8",
|
|
|
+ id: "376f578716fb48febe8fb291b527169f",
|
|
|
+ };
|
|
|
+
|
|
|
+ // 请求头上加 projectId
|
|
|
+ axios.interceptors.request.use(
|
|
|
+ (config) => {
|
|
|
+ config.headers = {
|
|
|
+ projectId: "Pj1101050029", //项目id
|
|
|
+ };
|
|
|
+ return config;
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ return Promise.reject(error);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ // 生产环境放开此代码获取真实数据
|
|
|
+ // axios.post("/labsl/graph/pub/read", obj).then((res) => {
|
|
|
+ // this.getDataSuc(data);
|
|
|
+ // });
|
|
|
+ // 以下为测试环境demo;
|
|
|
+ this.getDataSuc(data);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 读图成功回调
|
|
|
+ getDataSuc(res) {
|
|
|
+ // if (res.data.result == "failure") return;
|
|
|
+ // 添加图片路径
|
|
|
+ if (data.content.elements.nodes && data.content.elements.nodes.length) {
|
|
|
+ data.content.elements.nodes = data.content.elements.nodes.map((obj) => {
|
|
|
+ if (obj.properties.type == "BaseEquipment") {
|
|
|
+ if (obj.style.default.url) {
|
|
|
+ obj.style.default.url = !obj.style.default.url.includes(
|
|
|
+ "/image-service/common/"
|
|
|
+ )
|
|
|
+ ? "/image-service/common/image_get?systemId=dataPlatform&key=" +
|
|
|
+ obj.style.default.url
|
|
|
+ : obj.style.default.url;
|
|
|
+ } else {
|
|
|
+ // 默认图标
|
|
|
+ obj.style.default.url = !obj.style.default.url.includes(
|
|
|
+ "/image-service/common/"
|
|
|
+ )
|
|
|
+ ? "/image-service/common/image_get?systemId=dataPlatform&key=" +
|
|
|
+ "1607752841478.svg"
|
|
|
+ : obj.style.default.url;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const parse = new PTopoParser();
|
|
|
+ parse.factory = new topuFactory();
|
|
|
+ // 获取数据解析数据再将转化得实例添加到场景中
|
|
|
+
|
|
|
+ parse.parseData(data.content.elements);
|
|
|
+ parse.markers.forEach((item) => {
|
|
|
+ item.moveable = false;
|
|
|
+ this.scene.addItem(item);
|
|
|
+ });
|
|
|
+ parse.nodes.forEach((item) => {
|
|
|
+ item.moveable = false;
|
|
|
+ if ("BaseEquipment" == item.data.properties.type) {
|
|
|
+ item.setEquipName();
|
|
|
+ item.setStatusPointColor("#7ed321");
|
|
|
+ }
|
|
|
+
|
|
|
+ // 相关事件触发
|
|
|
+ item.connect("onMouseDown", this, this.onMousedown);
|
|
|
+ item.connect("onMouseUp", this, this.onMouseup);
|
|
|
+ item.connect("onMouseLeave", this, this.onMouseleave);
|
|
|
+ item.connect("onMouseEnter", this, this.onMouseenter);
|
|
|
+ // 监听放大视图中滚轮放缩事件, wheelScale 是回调
|
|
|
+ this.view.connect("onMouseWheel", this, this.wheelScale);
|
|
|
+ // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调
|
|
|
+ this.view.connect("leftMove", this, this.midMouseMove);
|
|
|
+ // 监听标准视图的事件, 回调函数是 mouseMove
|
|
|
+ this.enlarge_view.connect("viewMouseMove", this, this.mouseMove);
|
|
|
+ this.scene.addItem(item);
|
|
|
+
|
|
|
+ });
|
|
|
+ parse.relations.forEach((t) => {
|
|
|
+ t.moveable = false;
|
|
|
+ this.scene.addItem(t);
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ // 设置放大视图为此时标准视图的 6 倍, 注意 6 = 1200 / 200; 1200是放大视图的宽,200 是标准视图中 可视区域的宽
|
|
|
+ const scale = this.canvasHeight / 150;
|
|
|
+ this.view.scale = scale * this.enlarge_view.scale;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ this.enlarge_view.fitSceneToView(1);
|
|
|
+ // 设置标准视图不可放缩
|
|
|
+ this.enlarge_view.scalable = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 鼠标点击事件
|
|
|
+ onMousedown(item, e) {
|
|
|
+ console.log("鼠标按下!", item, e);
|
|
|
+ this.$emit("onMousedown", item, e);
|
|
|
+ },
|
|
|
+ // 放大视图 滚轮放缩事件回调
|
|
|
+ wheelScale(item, ev) {
|
|
|
+ // ev[0] view 的放缩比例
|
|
|
+ // ev[1] true 上滚 放大
|
|
|
+ if (this.view && this.enlarge_view) {
|
|
|
+ if (ev[1]) {
|
|
|
+ this.enlarge_view.rectW /= this.view.wheelZoom;
|
|
|
+ this.enlarge_view.rectH /= this.view.wheelZoom;
|
|
|
+ } else {
|
|
|
+ this.enlarge_view.rectW *= this.view.wheelZoom;
|
|
|
+ this.enlarge_view.rectH *= this.view.wheelZoom;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 步骤5
|
|
|
+ mouseMove(item, ev) {
|
|
|
+ const p = ev[0];
|
|
|
+ this.locationGraphy(p);
|
|
|
+ },
|
|
|
+ // 定位点到放大视图的中心点
|
|
|
+ locationGraphy(point) {
|
|
|
+ let centerX = this.view.width / 2 - point.x * this.view.scale;
|
|
|
+ let centerY = this.view.height / 2 - point.y * this.view.scale;
|
|
|
+ this.view.origin = new SPoint(centerX, centerY);
|
|
|
+ },
|
|
|
+ midMouseMove(item, ev) {
|
|
|
+ if (this.enlarge_view && this.view) {
|
|
|
+ const p = this.view.mapToScene(
|
|
|
+ this.canvasWidth / 2,
|
|
|
+ this.canvasHeight / 2
|
|
|
+ );
|
|
|
+ const p2 = this.enlarge_view.mapFromScene(p.x, p.y);
|
|
|
+ this.enlarge_view.rectC.x = p2.x;
|
|
|
+ this.enlarge_view.rectC.y = p2.y;
|
|
|
+ this.enlarge_view.update();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 鼠标抬起事件
|
|
|
+ onMouseup(item, e) {
|
|
|
+ console.log("鼠标抬起!", item, e);
|
|
|
+ },
|
|
|
+ // 鼠标事件移入
|
|
|
+ onMouseenter(item, e) {
|
|
|
+ console.log("鼠标移入!", item, e);
|
|
|
+ },
|
|
|
+ // 鼠标事件移出
|
|
|
+ onMouseleave(item, e) {
|
|
|
+ console.log("鼠标移出!", item, e);
|
|
|
+ },
|
|
|
+ // 清空画布
|
|
|
+ clearImg() {
|
|
|
+ this.scene = new SGraphScene();
|
|
|
+ if (this.view) {
|
|
|
+ this.view.update();
|
|
|
+ }
|
|
|
+ if (this.enlarge_view) {
|
|
|
+ this.enlarge_view.update();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.clearImg();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 获取 canvas 的宽高
|
|
|
+ this.canvasWidth = 800;
|
|
|
+ this.canvasHeight = 600;
|
|
|
+ // 初始化场景类
|
|
|
+ this.view = new FloorView("floor_topu9");
|
|
|
+ this.enlarge_view = new EagleView("enlarge"); // 小图
|
|
|
+ if (this.scene) {
|
|
|
+ this.view.scene = this.scene;
|
|
|
+ this.enlarge_view.scene = this.scene;
|
|
|
+ }
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.base-topu {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+</style>
|