public/systemConf.js

@@ -25,7 +25,7 @@ var __systemConf = {
         { id: "Pj5001120003", name: "香港置地" },
         { id: "Pj4403050019", name: "招商IOC" },
         // 美凯龙
-        { id: "Pj0001110001", name: "飞龙商场" },
+        { id: "Pj0000000001", name: "飞龙商场" },
         { id: "Pj0001110002", name: "常州常武" },
 
         { id: "Pj0002220001", name: "数字化交付01" },

src/components/editClass/persagy-edit/items/SBasePipeUninTool.ts

@@ -28,7 +28,7 @@ import { SGraphEdit, SBaseCirclePolylineEdit } from "@persagy-web/edit";
 import { SGraphItem } from "@persagy-web/graph/lib";
 import { SMouseEvent } from "@persagy-web/base/lib";
 import { Marker } from "@persagy-web/big/lib";
-import { SColor, SFont, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
+import { SColor,SPath, SFont, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
 
 /**
  * 编辑基础管道接头类
@@ -44,16 +44,58 @@ export class SBasePipeUninTool extends SGraphEdit {
     // 宽高
     width: number = 64;
     height: number = 64;
-    /** 轮廓 */
-    outLine: SBaseCirclePolylineEdit;
     // 轮廓点
     outLineTpye: any = {
         'wantou': 2,
         'santong': 3,
         'sitong': 4,
     }
+
+    // 旋转角度
+    _angle:number = 0;
+    get angle(): number {
+        return this._angle;
+    }
+    set angle(v: number) {
+        this._angle = v;
+        this.update();
+    }
+
+    /** path 对象 */
+    path: SPath = new SPath();
     /** 轮廓点 */
-    outLineLine: SPoint[] = []
+    outLineLine: SPoint[] = [];
+
+    /** 填充色 */
+    _fillColor: SColor = new SColor('#2196f3');
+    get fillColor(): SColor {
+        return this._fillColor;
+    }
+    set fillColor(v: SColor) {
+        this._fillColor = v;
+        this.update();
+    }
+
+    /** 弧度 */
+    _radius:number = 0;
+    get radius(): number {
+        return this._radius;
+    }
+    set radius(v: number) {
+        this._radius = v;
+        this.generatePath(this.outLineLine,v)
+        this.update();
+    }
+
+    /** 线条宽度 */
+    _lineWidth: number = 20;
+    get lineWidth(): number {
+        return this._lineWidth;
+    }
+    set lineWidth(v: number) {
+        this._lineWidth = v;
+        this.update();
+    }
 
     /**
      * 构造函数
@@ -64,7 +106,6 @@ export class SBasePipeUninTool extends SGraphEdit {
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
         this.data = data;
-        this.outLine = new SBaseCirclePolylineEdit(this)
         this.initData(data);
     } // Constructor
 
@@ -77,12 +118,8 @@ export class SBasePipeUninTool extends SGraphEdit {
         this.width = data.style.default.width ? data.style.default.width : 64;
         this.height = data.style.default.height ? data.style.default.height : 64;
         this.moveTo(data.pos.x, data.pos.y);
-        this.outLine.strokeColor = SColor.Red;
-        this.outLine.fillColor = SColor.Red;
-        this.outLine.lineWidth = 20;
         // 判断为几通管道
         this.computeUninNumber(this.outLineTpye[data.style.uninToolType]);
-        this.outLine.pointList = this.outLineLine; //赋值轮廓
         this.update()
     }
 
@@ -102,12 +139,11 @@ export class SBasePipeUninTool extends SGraphEdit {
      * @param oldSize 旧大小
      * @param newSize 新大小
      */
-    resize(oldSize:SSize, newSize:SSize) {
+    resize(oldSize: SSize, newSize: SSize) {
         this.width = newSize.width;
         this.height = newSize.height;
         this.computeUninNumber(this.outLineTpye[this.data.style.uninToolType]);
-        this.outLine.pointList = this.outLineLine; //赋值轮廓
-        console.log('this.outLineLine',this.outLineLine)
+        // this.outLine.pointList = this.outLineLine; //赋值轮廓
         this.update();
     }
 
@@ -117,7 +153,7 @@ export class SBasePipeUninTool extends SGraphEdit {
      * @return 对象边界区域
      */
     boundingRect(): SRect {
-        return new SRect(0,0, this.width, this.height);
+        return new SRect(0, 0, this.width, this.height);
     }
 
     /**
@@ -128,9 +164,9 @@ export class SBasePipeUninTool extends SGraphEdit {
         //  如果为二通
         const topPoint = new SPoint(this.width / 2, 0);
         const centerPoint = this.boundingRect().center();
-        const rightPoint = new SPoint( this.width, this.height / 2);
-        const leftPoint = new SPoint(0,  this.height / 2);
-        const bottomPoint = new SPoint(this.width / 2,this.height)
+        const rightPoint = new SPoint(this.width, this.height / 2);
+        const leftPoint = new SPoint(0, this.height / 2);
+        const bottomPoint = new SPoint(this.width / 2, this.height)
         if (2 == type) {
             this.outLineLine = [topPoint, centerPoint, rightPoint];
         } else if (3 == type) {
@@ -138,6 +174,7 @@ export class SBasePipeUninTool extends SGraphEdit {
         } else if (4 == type) {
             this.outLineLine = [topPoint, centerPoint, rightPoint, leftPoint, centerPoint, bottomPoint];
         }
+        this.generatePath(this.outLineLine,this.radius)
     }
 
 
@@ -149,4 +186,67 @@ export class SBasePipeUninTool extends SGraphEdit {
     toData(): any {
         return super.toData()
     }
+
+    /**
+     * 根据点集生成 path 对象
+     *
+     * @param list  需要生成的点击
+     * @param r     拐点处圆角半径
+     */
+    generatePath(list: SPoint[], r: number = 0): void {
+        const len = list.length;
+        // 当前这小有效
+        if (len) {
+            this.path = new SPath();
+            this.path.moveTo(list[0].x, list[0].y);
+            // 遍历点集列表
+            for (let i = 1; i < len - 1; i++) {
+                const temp = list[i];
+                const next = list[i + 1];
+                this.path.arcTo(temp.x, temp.y, next.x, next.y, r);
+            }
+            const last = list[len - 1];
+            this.path.lineTo(last.x, last.y);
+        }
+    }
+    /**
+     * Item 绘制操作
+     *
+     * @param painter   绘画对象
+     */
+    onDraw(painter: SPainter): void {
+        super.onDraw(painter);
+        const topPoint = this.outLineLine[0];
+        const rightPoint = this.outLineLine[2];
+        const leftPoint = this.outLineLine[3];
+        const bottomPoint = this.outLineLine[5];
+        const pipeWidth = this.lineWidth;
+        painter.pen.color = this.fillColor
+        painter.pen.lineWidth = this.lineWidth;
+        //设置旋转角度
+        if(this.angle != 0){
+            painter.rotate(this.angle);
+        }
+
+
+        painter.drawPath(this.path);
+        const lineWidth = this.lineWidth / 4;
+        painter.pen.lineWidth = lineWidth;
+
+        // 绘制装饰线
+        if (3 == this.outLineLine.length) {
+            painter.drawLine(topPoint.x - pipeWidth, topPoint.y, topPoint.x + pipeWidth, topPoint.y);
+            painter.drawLine(rightPoint.x, rightPoint.y - pipeWidth, rightPoint.x, rightPoint.y + pipeWidth);
+        } else if (4 == this.outLineLine.length) {
+            painter.drawLine(topPoint.x - pipeWidth, topPoint.y, topPoint.x + pipeWidth, topPoint.y);
+            painter.drawLine(rightPoint.x, rightPoint.y - pipeWidth, rightPoint.x, rightPoint.y + pipeWidth);
+            painter.drawLine(leftPoint.x, leftPoint.y - pipeWidth, leftPoint.x, leftPoint.y + pipeWidth);
+        } else {
+            painter.drawLine(topPoint.x - pipeWidth, topPoint.y, topPoint.x + pipeWidth, topPoint.y);
+            painter.drawLine(rightPoint.x, rightPoint.y - pipeWidth, rightPoint.x, rightPoint.y + pipeWidth);
+            painter.drawLine(leftPoint.x, leftPoint.y - pipeWidth, leftPoint.x, leftPoint.y + pipeWidth);
+            painter.drawLine(bottomPoint.x - pipeWidth, bottomPoint.y, bottomPoint.x + pipeWidth, bottomPoint.y);
+        }
+
+    }
 }

src/components/editview/rightPropertyBar/BasePipe.vue

@@ -88,7 +88,7 @@ export default {
     changeCornerRaduis(val) {
       bus.$emit("updateStyle", 'radius', this.radius);
     },
-    // 拐角类型变化 
+    // 拐角类型变化
     changeRadio() {
       if (this.corner == '1') {
         this.radius = 0;

src/components/editview/rightPropertyBar/BaseUnitPro.vue

@@ -0,0 +1,228 @@
+<!--基础管道弯头属性-->
+<template>
+  <div class="base-pipe">
+    <ul>
+      <li>
+        <div class="small-title">属性</div>
+        <div class="property">
+          <div class="color-box">
+            <div class="cololorSelect">
+              <el-color-picker
+                show-alpha
+                @change="changeColor"
+                class="fix-box-1"
+                v-model="color"
+              ></el-color-picker>
+            </div>
+            <span>颜色</span>
+          </div>
+          <div class="line-width">
+            <el-select v-model="angle"  @change="changeAngle" placeholder="请选择">
+              <el-option
+                v-for="item in angleList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <span>旋转</span>
+          </div>
+          <div class="line-width">
+            <el-input-number
+              style="width: 80px"
+              v-model="linewidth"
+              controls-position="right"
+              @change="changeWidth"
+              size="mini"
+              :min="1"
+              :max="60"
+              :maxlength="100"
+            ></el-input-number>
+            <span>线宽</span>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="small-title">拐角</div>
+        <div>
+          <el-radio-group v-model="corner" @change="changeRadio">
+            <el-radio label="1">直角</el-radio>
+            <el-radio label="2">圆角</el-radio>
+          </el-radio-group>
+        </div>
+        <div style="margin-top: 10px" v-if="corner == '2'">
+          <label for="radius">设置圆角半径: </label>
+          <el-input-number
+            v-model="radius"
+            controls-position="right"
+            size="mini"
+            @change="changeCornerRaduis"
+            :min="0"
+            :step-strictly="true"
+          ></el-input-number>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import bus from "@/bus/bus";
+export default {
+  props: ["fillColor", "lineStyle", "lineWidth", "Radius","angles"],
+  data() {
+    return {
+      color: "",
+      linewidth: "",
+      corner: "1", // 默认直角
+      radius: 0, // 圆角半径
+      angleList: [
+        {
+          value: 0,
+          label: "0度",
+        },
+        {
+          value: 90,
+          label: "90度",
+        },
+        {
+          value: 180,
+          label: "180度",
+        },
+        {
+          value: 270,
+          label: "270度",
+        },
+      ],
+      angle: 0,
+    };
+  },
+  methods: {
+    // 改变线宽
+    changeWidth(val) {
+      bus.$emit("updateStyle", "lineWidth", val);
+    },
+    // 改变颜色
+    changeColor(val) {
+      bus.$emit("updateStyle", "fillColor", val);
+    },
+    // 改变拐角半径
+    changeCornerRaduis(val) {
+      bus.$emit("updateStyle", "radius", this.radius);
+    },
+    // 拐角类型变化
+    changeRadio() {
+      if (this.corner == "1") {
+        this.radius = 0;
+      }
+      bus.$emit("updateStyle", "radius", this.radius);
+    },
+    changeAngle(val){
+      console.log('valval',val)
+        bus.$emit("updateStyle", "angle", val);
+    }
+  },
+  watch: {
+    fillColor(val) {
+      this.color = val;
+    },
+    lineWidth(val) {
+      this.linewidth = val;
+    },
+    lineStyle(val) {
+      this.linestyle = val;
+    },
+    Radius(val) {
+      this.corner = val > 0 ? "2" : "1";
+      this.radius = val;
+    },
+    angles(val) {
+      this.angle = val;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.base-pipe {
+  .title {
+    height: 47px;
+    // border-bottom: 1px solid #979797;
+    color: #646c73;
+    font-size: 16px;
+    padding-left: 12px;
+    box-sizing: border-box;
+  }
+  ul {
+    width: calc(~"100% - 24px");
+    margin: -1px 12px 0 12px;
+    li {
+      // border-top: 1px solid #979797;
+      .small-title {
+        font-size: 12px;
+        color: #8d9399;
+        margin: 12px 0;
+      }
+      .property {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        .color-box {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          .cololorSelect {
+            width: 32px;
+            height: 20px;
+            overflow: hidden;
+            position: relative;
+            margin: 4px 0;
+            .fix-box-1 {
+              margin-top: -8px;
+              margin-left: -8px;
+              /deep/ .el-color-picker__trigger {
+                width: 200px;
+                height: 200px;
+              }
+            }
+          }
+        }
+        .line-width {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          margin-left: 8px;
+          position: relative;
+        }
+        .line-style {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          position: relative;
+          margin-top: 4px;
+          .nametype {
+            position: absolute;
+            left: 50%;
+            bottom: -80%;
+            transform: translateX(-140%);
+          }
+        }
+        span {
+          font-size: 12px;
+          color: #1f2429;
+          margin-top: 4px;
+        }
+      }
+      /deep/.el-input-number--mini {
+        width: 100px;
+      }
+    }
+  }
+}
+</style>

src/components/editview/rightPropertyBar/property.vue

@@ -15,7 +15,7 @@
       :lineWidth="lineWidth"
       :Width="Width"
       :Height="Height"
-      :color ="color"
+      :color="color"
       :textMsg="textMsg"
       :backgroundColor="backgroundColor"
       :items="items"
@@ -62,8 +62,15 @@
       :Height="Height"
       :isSvg="isSvg"
       :Rotate="Rotate"
-      v-show="itemType == 'BaseImage' || itemType == 'BasePipeUninTool'"
+      v-show="itemType == 'BaseImage'"
     ></BaseImagePro>
+    <BaseUnitPro
+      :fillColor="fillColor"
+      :lineWidth="lineWidth"
+      :Radius="Radius"
+      :angles="angles"
+      v-show="itemType == 'BasePipeUninTool'"
+    ></BaseUnitPro>
     <BaseEquipment
       :Width="Width"
       :Height="Height"
@@ -95,6 +102,7 @@ import BaseGraphy from "./BaseGraphy";
 import BaseImagePro from "./BaseImagePro";
 import BaseEquipment from "./BaseEquipment";
 import BaseEquipmentMsg from "./BaseEquipmentMsg";
+import BaseUnitPro from "./BaseUnitPro";
 import BasePipe from "./BasePipe";
 import Equation from "./Equation";
 import InfoPoint from "./InfoPoint";
@@ -131,6 +139,7 @@ export default {
     Equation,
     InfoPoint,
     BaseBtn,
+    BaseUnitPro,
   },
   data() {
     return {
@@ -155,9 +164,10 @@ export default {
       EquipMsgItem: null, //设备信息点实例
       AnotherMsg: "", // 附加信息 （只用与设备图例）
       isSvg: false, // 是否为svg图
-      color:'',
-      items:null,
+      color: "",
+      items: null,
       Radius: 0, // 管线的圆角半径
+      angles:0 //旋转角度
     };
   },
   mounted() {
@@ -192,7 +202,7 @@ export default {
     // 同步样式
     linkStyle(itemList) {
       const item = itemList[0];
-      console.log('item',item)
+      console.log("item", item);
       this.EquipMsgItem = null;
       this.items = null;
       this.isSvg = false;
@@ -211,10 +221,7 @@ export default {
         this.textMsg = item.text;
         this.fontSize = item.font.size;
         this.color = item.color.toRgba();
-      } else if (
-        this.itemType == "BaseImage" ||
-        this.itemType == "BasePipeUninTool"
-      ) {
+      } else if (this.itemType == "BaseImage") {
         this.Width = item.width; //item 宽
         this.Height = item.height; //item 高
         this.Url = item.url; // 路径
@@ -268,13 +275,20 @@ export default {
         this.lineStyle = lineStyle[item.lineStyle];
         this.lineWidth = item.lineWidth;
         this.Radius = item.radius;
+      } else if (this.itemType == "BasePipeUninTool") {
+        this.Width = item.width; //item 宽
+        this.Height = item.height; //item 高
+        this.Radius = item.radius;
+        this.lineWidth = item.lineWidth;
+        this.angles = item.angle;
+        this.fillColor = item.fillColor.toRgba();
       } else if (this.itemType == "baseBtn") {
         this.Width = item.width; //item 宽
         this.Height = item.height; //item 高
         this.strokeColor = item.strokeColor.toRgba();
         this.backgroundColor = item.backgroundColor.toRgba();
         this.textMsg = item.text;
-        this.items = item
+        this.items = item;
         this.color = item.color.toRgba();
         this.lineWidth = item.lineWidth;
         this.fontSize = item.font.size;

src/components/homeView/createGraphDialog.vue

@@ -35,6 +35,7 @@
 <script>
 import graphTypeDialog from "@/components/homeView/graphTypeDialog"
 import { createGraph } from "@/api/home"
+import { mapState } from "vuex";
 export default {
   components: {
     graphTypeDialog
@@ -62,6 +63,9 @@ export default {
       inputVisible: false,
     }
   },
+  computed: {
+    ...mapState([ "projectId"]),
+  },
   methods: {
     showDialog() {
       this.outerVisible = true;

src/views/editer.vue

@@ -66,7 +66,6 @@ export default {
     ...mapState(["tupoName", "version", "projectId"]),
   },
   created() {
-    console.log('this.$route.query.projectId',this.$route.query.projectId)
     this.$route.query.projectId ? this.SETPROJECTID(this.$route.query.projectId) :''
   },
   mounted() {