YaolongHan 4 tahun lalu
induk
melakukan
6fa49a9fd5

+ 2 - 1
src/components/editview/basePlanEditer.vue

@@ -103,7 +103,7 @@ export default {
         // 2分钟自动保存
         this.autoSave = setInterval(() => {
             this.autoSavePlan();
-        }, 120000);
+        }, 12000);
         // 页面销毁前,清除定时器
         this.$once("hook:beforeDestroy", () => {
             clearInterval(this.autoSave);
@@ -798,6 +798,7 @@ export default {
                                 id: vals[1].id,
                                 graphId: vals[1].graphId,
                                 version: vals[1].version,
+                                projectId:this.projectId
                             },
                         });
                     } else {

+ 23 - 1
src/components/editview/leftToolBar/equipmentList.vue

@@ -116,7 +116,7 @@ export default {
         // }
     },
     methods: {
-        ...mapMutations(["ADDRULE"]),
+        ...mapMutations(["ADDRULE","ADDSTYLE"]),
         // 打开添加弹窗
         openAddEquipDialog() {
             this.$emit("openAddEquipDialog");
@@ -201,6 +201,28 @@ export default {
         toggleItemVisible(item) {
             // console.log(item);
             item.visible = !item.visible;
+            this.setStyle(item)
+        },
+        /**
+         *  修改样式信息
+         */
+        setStyle(EquipItem) {
+            const style = {
+                id: EquipItem.id,
+                style: {
+                    color:EquipItem.color.value,
+                    size: EquipItem.font.size,
+                    url: EquipItem.defaultUrl,
+                    visible:EquipItem.visible,
+                    formula: EquipItem.textItemList.map(item => {
+                        const obj = Object.assign(item.propertyData, {
+                            pos: { x: item.x, y: item.y }
+                        })
+                        return obj
+                    }),
+                },
+            };
+            this.ADDSTYLE(style);
         },
 
         // 删除Item

+ 1 - 0
src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -145,6 +145,7 @@ export default {
                     color: this.EquipItem.color.value,
                     size: this.EquipItem.font.size,
                     url: this.EquipItem.defaultUrl,
+                    visible:EquipItem.visible,
                     formula: this.EquipItem.textItemList.map(item => {
                         const obj = Object.assign(item.propertyData, {
                             pos: { x: item.x, y: item.y }

+ 99 - 53
src/components/editview/rightPropertyBar/BasePipe.vue

@@ -8,18 +8,38 @@
         <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>
+              <el-color-picker
+                show-alpha
+                class="fix-box-1"
+                v-model="strokeColor"
+              ></el-color-picker>
             </div>
             <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="20"
-              :maxlength="100"></el-input-number>
+            <el-input-number
+              style="width: 80px"
+              v-model="lineWidth"
+              controls-position="right"
+              size="mini"
+              :min="1"
+              :max="20"
+              :maxlength="100"
+            ></el-input-number>
             <span>线宽</span>
           </div>
           <div class="line-width">
-            <a-select style="width: 80px" v-model="linestyle" :default-value="borderLineOption[0].id" @change="changeLineStyle">
-              <a-select-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
+            <a-select
+              style="width: 80px"
+              v-model="lineStyle"
+              :default-value="borderLineOption[0].id"
+            >
+              <a-select-option
+                v-for="item in borderLineOption"
+                :key="item.id"
+                :label="item.src"
+                :value="item.id"
+              >
                 <img :src="item.src" alt width="60" />
               </a-select-option>
             </a-select>
@@ -30,14 +50,20 @@
       <li>
         <div class="small-title">拐角</div>
         <div>
-          <el-radio-group v-model="corner" @change="changeRadio">
+          <el-radio-group v-model="corner">
             <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'">
+        <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>
+          <el-input-number
+            v-model="radius"
+            controls-position="right"
+            size="mini"
+            :min="0"
+            :step-strictly="true"
+          ></el-input-number>
         </div>
       </li>
     </ul>
@@ -45,13 +71,13 @@
 </template>
 <script>
 import bus from "@/bus/bus";
+import { SLineStyle } from "@persagy-web/graph";
+import {SColor} from "@persagy-web/draw"
+import { rgbaNum } from "@persagy-web/big-edit/lib/until";
 export default {
-  props: ["strokeColor", "lineStyle", "lineWidth", "Radius"],
+  props: ["Pipe"],
   data() {
     return {
-      color: "",
-      linewidth: "",
-      linestyle: "",
       borderLineOption: [
         {
           id: "Solid",
@@ -63,54 +89,74 @@ export default {
         },
         {},
       ],
-      corner: '1', // 默认直角
-      radius: 0, // 圆角半径
+      corner: "1", // 默认直角
     };
   },
   methods: {
-    // 改变线宽
-    changeWidth(val) {
-      bus.$emit("updateStyle", "lineWidth", val);
-    },
-    // 改变颜色
-    changeColor(val) {
-      bus.$emit("updateStyle", "strokeColor", val);
-    },
-    // 改变线样式
-    changeLineStyle(val) {
-      bus.$emit("updateStyle", "lineStyle", val);
-    },
-    // 改变箭头样式
-    changeArrowType(dir) {
-      bus.$emit("updateStyle", dir, this[dir]);
-    },
-    // 改变拐角半径
-    changeCornerRaduis(val) {
-      bus.$emit("updateStyle", 'radius', this.radius);
-    },
-    // 拐角类型变化 
-    changeRadio() {
-      if (this.corner == '1') {
-        this.radius = 0;
-      }
-      bus.$emit("updateStyle", 'radius', this.radius);
-    }
+
   },
-  watch: {
-    strokeColor(val) {
-      this.color = val;
+  computed: {
+    /**
+     * 边框颜色
+     */
+    strokeColor: {
+      get: function () {
+        return this.Pipe.strokeColor.toRgba();
+      },
+      set: function (val) {
+        const colorList = rgbaNum(val);
+        const oldV = this.Pipe.color;
+        const newV = new SColor(
+          Number(colorList[0]),
+          Number(colorList[1]),
+          Number(colorList[2]),
+          colorList[3] * 255
+        );
+        this.Pipe.strokeColor = newV;
+        bus.$emit("undoAttr", this.Pipe, "strokeColor", oldV, newV);
+      },
     },
-    lineWidth(val) {
-      this.linewidth = val;
+
+    /**
+     * 边框宽度
+     */
+    lineWidth: {
+      get: function () {
+        return this.Pipe.lineWidth;
+      },
+      set: function (val) {
+        const oldV = this.Pipe.lineWidth
+        this.Pipe.lineWidth = val;
+         bus.$emit("undoAttr", this.Pipe, "lineWidth", oldV, val);
+      },
+
     },
-    lineStyle(val) {
-      this.linestyle = val;
+
+    /**
+     * 线样式
+     */
+    lineStyle: {
+      get: function () {
+        return this.borderLineOption[this.Pipe.lineStyle].id;
+      },
+      set: function (val) {
+        const oldV =   this.Pipe.lineStyle
+        this.Pipe.lineStyle = SLineStyle[val];
+        bus.$emit("undoAttr", this.Pipe, "lineStyle", oldV, SLineStyle[val]);
+      },
+    },
+
+    // 线类型
+    radius: {
+      get: function () {
+        return this.Pipe.radius;
+      },
+      set: function (val) {
+        const oldV =   this.Pipe.radius
+        this.Pipe.radius = val;
+        bus.$emit("undoAttr", this.Pipe, "radius", oldV, val);
+      },
     },
-    Radius(val) {
-      console.log(val);
-      this.corner = val > 0 ? "2" : "1"
-      this.radius = val;
-    }
   },
 };
 </script>

+ 3 - 1
src/components/editview/rightPropertyBar/property.vue

@@ -42,12 +42,13 @@
     <BaseView v-if="!itemObj"></BaseView>
     <BasePipe
        :Pipe='itemObj'
-      v-show="itemObj && itemType == 'BasePipe'"
+      v-if="itemObj && itemType == 'BasePipe'"
     ></BasePipe>
   </div>
 </template>
 <script>
 import baseTextPro from "./baseTextPro.vue";
+import BasePipe from "./BasePipe.vue"
 import baseLinePro from "./baseLinePro.vue";
 import BaseGraphy from "./BaseGraphy";
 import BaseImagePro from "./BaseImagePro";
@@ -84,6 +85,7 @@ export default {
     BaseEquipment,
     BaseZone,
     BaseView,
+    BasePipe
   },
   data() {
     return {

+ 5 - 0
src/lib/SPlanDecorator.ts

@@ -55,6 +55,11 @@ export class SPlanDecorator {
         if (style.width) equipItem.sWidth = style.width;
         // 设置设备图标高度
         if (style.height) equipItem.sHeight = style.height;
+        // 设置是否显示
+        if (Object.keys(style).includes('visible')){
+            equipItem.visible = style.visible
+        }
+            ;
     }
 
     /**

+ 2 - 1
src/lib/style/Style.ts

@@ -52,5 +52,6 @@ export interface Style {
     lineWidth?: number;
     /** 线型 */
     lineStyle?: SLineStyle;
-
+    /** 是否显示 */
+    visible?:boolean
 }