优化设备

public/index.html

@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script>
-      window.topo_baseurl = 'http://39.102.40.239:8080'
+      window.topo_baseurl = 'http://192.168.64.17:28888'
       window.img_baseurl = "http://39.102.40.239"
 
       function callByU3d (data) {

src/components/baseTopu.vue

@@ -21,7 +21,7 @@ import { readPubGroup } from "@/api/tuopu"; // 引入获取底图得接口
 import scaleBtn from "./scale";
 import { PTopoParser } from "./topuClass/PTopoParser";
 import { SColor, SFont, SPoint } from "@persagy-web/draw";
-import {SLineStyle} from "@persagy-web/graph"
+import { SLineStyle } from "@persagy-web/graph";
 export default {
   components: { scaleBtn },
   props: {
@@ -41,7 +41,7 @@ export default {
     };
   },
   methods: {
-    fixWindow(){
+    fixWindow() {
       this.view.fitSceneToView();
     },
     // 初始化
@@ -59,7 +59,7 @@ export default {
           // graphId: "0314991b0cd148ba89da60eddf30efd1",
           projectId: "Pj4403070003",
           graphId: "994d0f65d647426f854d2a5f7f0173a4",
-          id: "be4c75daf4d44cb89b447eb7581614da"
+          id: "be4c75daf4d44cb89b447eb7581614da",
         };
       }
       const obj = {
@@ -79,35 +79,48 @@ export default {
       // 'url 新增路径'
       if (res.result == "failure") return;
       const parse = new PTopoParser();
-      if(this.scene){
-        const backgroundColor = res.data.content.viewBackground ? res.data.content.viewBackground : '#1f1f27'
+      if (this.scene) {
+        const backgroundColor = res.data.content.viewBackground
+          ? res.data.content.viewBackground
+          : "#1f1f27";
         this.scene.changeBackgroundColor(backgroundColor);
       }
-      window.parse = parse
-      if (res.data.content.elements.nodes && res.data.content.elements.nodes.length) {
-        res.data.content.elements.nodes = res.data.content.elements.nodes.map((obj) => {
-          if (obj.properties.type == "BaseEquipment") {
-            if (obj.style.default.url) {
-              obj.style.default.url =
-                window.img_baseurl+"/image-service/common/image_get?systemId=dataPlatform&key=" +
-                obj.style.default.url;
-            } else {
-              // 默认图标
-              obj.style.default.url =
-                window.img_baseurl+"/image-service/common/image_get?systemId=dataPlatform&key=" +
-                "1607752841478.svg";
+      window.parse = parse;
+      if (
+        res.data.content.elements.nodes &&
+        res.data.content.elements.nodes.length
+      ) {
+        res.data.content.elements.nodes = res.data.content.elements.nodes.map(
+          (obj) => {
+            if (obj.properties.type == "BaseEquipment") {
+              if (obj.style.default.url) {
+                obj.style.default.url =
+                  window.img_baseurl +
+                  "/image-service/common/image_get?systemId=dataPlatform&key=" +
+                  obj.style.default.url;
+              } else {
+                // 默认图标
+                obj.style.default.url =
+                  window.img_baseurl +
+                  "/image-service/common/image_get?systemId=dataPlatform&key=" +
+                  "1607752841478.svg";
+              }
             }
+            return obj;
           }
-          return obj;
-        });
+        );
       }
       parse.parseData(res.data.content.elements);
       parse.markers.forEach((item) => {
-        // this.scene.addItem(item);
+        this.scene.addItem(item);
       });
       parse.nodes.forEach((item) => {
+        // item.moveable = false;
+        if ("BaseEquipment" == item.data.properties.type) {
+          item.setEquipName();
+          item.setStatusPointColor("#7ed321");
+        }
         // 相关事件触发
-        // console.log('item.data.style.default.url',item.data.style.default.url)
         item.connect("onMouseDown", this, this.onMousedown);
         item.connect("onMouseUp", this, this.onMouseup);
         item.connect("onMouseLeave", this, this.onMouseleave);
@@ -144,7 +157,7 @@ export default {
         }
         this.scene.addItem(t);
       });
-      this.fixWindow()
+      this.fixWindow();
     },
     // 读图成功回调
     statDeviceIds(res) {
@@ -152,15 +165,18 @@ export default {
       // 'url 新增路径'
       if (res.result == "failure") return;
       const parse = new PTopoParser();
-      if (res.data.content.elements.nodes && res.data.content.elements.nodes.length) {
+      if (
+        res.data.content.elements.nodes &&
+        res.data.content.elements.nodes.length
+      ) {
         let tempDatas = res.data.content.elements.nodes.map((obj) => {
           return obj.attachObjectIds[0];
         });
         // console.log('tempDatas:', tempDatas)
         setInterval(() => {
-          this.$emit('postDeviceIds', tempDatas)
+          this.$emit("postDeviceIds", tempDatas);
         }, 5000);
-        this.$emit('postDeviceIds', tempDatas)
+        this.$emit("postDeviceIds", tempDatas);
       }
     },
     // 图片缩小
@@ -199,12 +215,12 @@ export default {
     // 鼠标事件移入
     onMouseenter(item, e) {
       // 判断是否为设备图例
-      item.showImgShadow = true
+      item.showImgShadow = true;
       console.log("鼠标移入！", item.img, e);
     },
     // 鼠标事件移出
     onMouseleave(item, e) {
-      item.showImgShadow = false
+      item.showImgShadow = false;
       console.log("鼠标移出！", item, e);
     },
   },

src/components/topuClass/PTopoParser.ts

@@ -39,7 +39,7 @@ export class PTopoParser extends SParser {
     markers: any = [];
     /**  管线对象 */
     relations: any = [];
-    factory:topuFactory = new topuFactory()
+    factory: topuFactory = new topuFactory()
     constructor() {
         super(new topuFactory());
     }
@@ -104,6 +104,9 @@ export class PTopoParser extends SParser {
                 case "BasePolygon":
                     this.markers.push(this.factory.createBasePolygonEdit(data));
                     break;
+                case "baseBtn":
+                    this.markers.push(this.factory.createBaseBtn(data));
+                    break;
                 case "BaseArrowPolygon":
                     this.markers.push(this.factory.createBasePolygonArrowEdit(data));
             }

src/components/topuClass/items/baseBtn.ts

@@ -0,0 +1,84 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+import { SMouseEvent } from "@persagy-web/base";
+import { STextItem, SGraphItem } from "@persagy-web/graph/lib";
+import { SColor, SFont, SPoint, SPainter } from "@persagy-web/draw/lib";
+import { SCircleItem } from "./SCircleItem"
+
+/**
+ * 拓扑图派生按钮
+ *
+ *  @author  韩耀龙 <han_yao_long@163.com>
+ */
+
+export class baseBtn extends STextItem {
+    constructor(parent: SGraphItem | null) {
+        super(parent);
+    }
+
+    /**
+     * 绘制显示状态文本 Item
+     *
+     * @param painter    绘制类
+     */
+    protected drawShowText(painter: SPainter): void {
+        painter.translate(-this.origin.x, -this.origin.y);
+        //绘制矩形轮廓，是否选中
+        if (this.selected) {
+            painter.shadow.shadowBlur = 10;
+            painter.shadow.shadowColor = new SColor(`#00000033`);
+            painter.shadow.shadowOffsetX = 5;
+            painter.shadow.shadowOffsetY = 5;
+        } else {
+            painter.shadow.shadowColor = SColor.Transparent;
+        }
+
+        //绘制文本
+        painter.brush.color = new SColor(this.color);
+        painter.pen.color = new SColor(this.color);
+        painter.shadow.shadowColor = SColor.Transparent;
+        painter.font = this.font;
+        painter.drawText(
+            this.text,
+            this.font.size / 4,
+            this.font.size / 4,
+            this.maxWidth
+        );
+    }
+
+    /**
+     * Item 绘制操作
+     *
+     * @param painter   绘画对象
+     */
+    onDraw(painter: SPainter): void {
+        super.onDraw(painter)
+        painter.brush.color = this.backgroundColor;
+        painter.pen.lineWidth = this.data.style.default.lineWidth;;
+        painter.pen.color = this.strokeColor;
+        painter.drawRect(0, 0, this.width, this.height);
+    }
+}

src/components/topuClass/items/equipment.ts

@@ -45,8 +45,8 @@ export class EquipItem extends SEquipItem {
         item.text = this.data.properties.localName;
         // item.strokeColor = new SColor('#6b7086');
         item.color = new SColor('#6b7086')
-        item.font = new SFont("sans-serif", 48);
-        item.isTransform = true;
+        item.font = new SFont("sans-serif", 16);
+        item.isTransform = false;
         // item.font = new SFont("sans-serif", 16);
         item.moveTo(-this.width / 2, this.height / 2);
         this.setStatusPoint(item)

src/components/topuClass/items/infoMsg.ts

@@ -0,0 +1,84 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+import { SMouseEvent } from "@persagy-web/base";
+import { STextItem, SGraphItem } from "@persagy-web/graph/lib";
+import { SColor, SFont, SPoint, SPainter } from "@persagy-web/draw/lib";
+import { SCircleItem } from "./SCircleItem"
+
+/**
+ * 拓扑图派生按钮
+ *
+ *  @author  韩耀龙 <han_yao_long@163.com>
+ */
+
+export class baseBtn extends STextItem {
+    constructor(parent: SGraphItem | null) {
+        super(parent);
+    }
+
+    /**
+     * 绘制显示状态文本 Item
+     *
+     * @param painter    绘制类
+     */
+    protected drawShowText(painter: SPainter): void {
+        painter.translate(-this.origin.x, -this.origin.y);
+        //绘制矩形轮廓，是否选中
+        if (this.selected) {
+            painter.shadow.shadowBlur = 10;
+            painter.shadow.shadowColor = new SColor(`#00000033`);
+            painter.shadow.shadowOffsetX = 5;
+            painter.shadow.shadowOffsetY = 5;
+        } else {
+            painter.shadow.shadowColor = SColor.Transparent;
+        }
+
+        //绘制文本
+        painter.brush.color = new SColor(this.color);
+        painter.pen.color = new SColor(this.color);
+        painter.shadow.shadowColor = SColor.Transparent;
+        painter.font = this.font;
+        painter.drawText(
+            this.text,
+            this.font.size / 4,
+            this.font.size / 4,
+            this.maxWidth
+        );
+    }
+
+    /**
+     * Item 绘制操作
+     *
+     * @param painter   绘画对象
+     */
+    onDraw(painter: SPainter): void {
+        super.onDraw(painter)
+        painter.brush.color = this.backgroundColor;
+        painter.pen.lineWidth = this.data.style.default.lineWidth;;
+        painter.pen.color = this.strokeColor;
+        painter.drawRect(0, 0, this.width, this.height);
+    }
+}

src/components/topuClass/topuFactory.ts

@@ -29,10 +29,11 @@ import {
     Marker, Legend, Relation
 } from "@persagy-web/big";
 import { SArrowItem, SPolygonItem, SArrowPoly, SItemFactory, ItemOrder, SPolylineItem } from "@persagy-web/big"
-import { SGraphCircleItem, STextItem, SImageItem, SGraphLineItem } from "@persagy-web/graph/lib"
+import { SGraphCircleItem, STextItem, SImageItem, SGraphLineItem ,SGraphRectItem} from "@persagy-web/graph/lib"
 import { EquipItem } from "./items/equipment"
-import {SLineStyle} from "@persagy-web/graph"
-import {Pipe} from "./items/pipe"
+import { baseBtn } from "./items/baseBtn"
+import { SLineStyle } from "@persagy-web/graph"
+import { Pipe } from "./items/pipe"
 
 /**
  * item 创建工厂
@@ -81,8 +82,10 @@ export class topuFactory extends SItemFactory {
         }
         item.zOrder = data.style.default.zorder;
         item.text = data.style.default.text;
-        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.moveTo(data.pos.x,data.pos.y)
+        // item.strokeColor = new SColor(data.style.default.strokeColor);
         item.font = new SFont("sans-serif", data.style.default.font);
+        item.color = new SColor(data.style.default.color);
         item.backgroundColor = new SColor(data.style.default.backgroundColor);
         item.data = data;
         return item;
@@ -117,15 +120,14 @@ export class topuFactory extends SItemFactory {
      * @param data  数据
      * @return 矩形
      */
-    createBaseRectEdit(data: Marker) {
-        // let line = data.style.default.line;
-        // console.log('SGraphRectItem',line)
-        // const item = new SGraphRectItem(null, line);
-        // item.lineStyle = data.style.default.lineStyle;
-        // item.lineWidth = data.style.default.lineWidth;
-        // item.fillColor = data.style.default.fillColor;
-        // item.strokeColor = data.style.default.strokeColor;
-        // return item;
+    createBaseRectEdit(data: Marker):SGraphRectItem {
+        let line = data.style.default.line;
+        const item = new SGraphRectItem(null, line);
+        item.lineStyle = data.style.default.lineStyle;
+        item.lineWidth = data.style.default.lineWidth;
+        item.fillColor = data.style.default.fillColor;
+        item.strokeColor = data.style.default.strokeColor;
+        return item;
     }
 
     /**
@@ -249,12 +251,12 @@ export class topuFactory extends SItemFactory {
                 item.infoPointList = infoPointList;
                 item.infoPointList.forEach((obj, i) => {
                     // 修改信息点颜色
-                    obj.color = "#ffffff"
+                    obj.color = "#000000"
                     item.setTextItem(obj, i)
                 })
-                item.getMsgList().forEach((a:any)=>{
-                    a.isTransform = true;
-                    a.font.size = a.font.size*2
+                item.getMsgList().forEach((a: any) => {
+                    a.isTransform = false;
+                    a.font.size = a.font.size
                 })
             } else {
                 item.infoPointList = []
@@ -273,12 +275,12 @@ export class topuFactory extends SItemFactory {
         return item;
     }
 
-   /*
-     * 创建基础管道
-     *
-     * @param data     数据
-     * @return 注释
-     */
+    /*
+      * 创建基础管道
+      *
+      * @param data     数据
+      * @return 注释
+      */
     createBasePipe(data: Relation): Pipe {
         const setPointList = data.pointList.map((i: any) => {
             return new SPoint(i.x, i.y)
@@ -290,8 +292,30 @@ export class topuFactory extends SItemFactory {
         // item.zOrder = data.style.default.zorder;
         item.strokeColor = new SColor(data.style.default.strokeColor);
         item.fillColor = new SColor(data.style.default.backgroundColor);
-        item.radius =  20; //设置弧度
+        item.radius = 20; //设置弧度
         item.data = data;
         return item
     }
+
+    /**
+     * 创建基础按钮
+     *
+     * @param data  数据
+     * @return 文本
+     */
+    createBaseBtn(data: Marker): baseBtn {
+        const item = new baseBtn(null);
+        if (data.size) {
+            item.width = data.size.width;
+            item.height = data.size.height;
+        }
+        item.zOrder = data.style.default.zorder;
+        item.text = data.style.default.text;
+        item.strokeColor = new SColor(data.style.default.strokeColor);
+        item.color = new SColor(data.style.default.color);
+        item.font = new SFont("sans-serif", data.style.default.font);
+        item.backgroundColor = new SColor(data.style.default.backgroundColor);
+        item.data = data;
+        return item;
+    }
 }

src/src/components/topuClass/FloorView.ts

@@ -48,7 +48,7 @@ export class FloorView extends SGraphView {
         super(id);
     }
     /** 背景色 */
-    backgroundColor: SColor = new SColor('#1f1f27');
+    // backgroundColor: SColor = new SColor('#1f1f27');
     /**
      * 鼠标按下事件
      *

vue.config.js

@@ -2,7 +2,7 @@ module.exports = {
     devServer: {
         proxy: {
             '/labsl': {
-                target: 'http://39.102.40.239:8080',
+                target: 'http://192.168.64.17:28888',
                 changeOrigin: true,
                 secure: false,
             },