浏览代码

feat:优化右侧属性框

YaolongHan 4 年之前
父节点
当前提交
97455eeb4f

二进制
src/assets/images/1pxline.jpg


二进制
src/assets/images/2pxline.jpg


二进制
src/assets/images/3pxline.jpg


二进制
src/assets/images/dashedLine.jpg


二进制
src/assets/images/dotLine.jpg


二进制
src/assets/images/solidLine.jpg


+ 18 - 0
src/components/baseEditer.vue

@@ -98,6 +98,24 @@ export default {
       bus.$on("changeLineWidth", val => {
         this.scene.updatedLineWidth(val);
       });
+      bus.$on("changeBorderColor", val => {
+        this.scene.updatedBorderColor(val);
+      });
+      bus.$on("changeFontColor", val => {
+        this.scene.updatedFontColor(val);
+      });
+      bus.$on("changeFontColor", val => {
+        this.scene.updatedFontColor(val);
+      });
+      bus.$on("itemWidth", val => {
+        this.scene.updatedWidth(Number(val));
+      });
+      bus.$on("itemHeight", val => {
+        this.scene.updatedHeight(Number(val));
+      });
+      bus.$on("itemPositon",( x,y )=> {
+        this.scene.updatedPosition(Number(x,y));
+      });
     }
   },
   watch: {

+ 218 - 73
src/components/edit/attr_select.vue

@@ -1,50 +1,73 @@
 <template>
-  <div>
+  <div id="attr-select">
     <!--选中-->
     <div class="attr-select" v-if="type==='line'">
-      <section class="grid">
-        <section class="grid">
-          外观
-          <div class="grid-content">
-            线宽
-            <a-input-number
-              v-model="lineWidth"
-              :min="1"
-              @change="changeLineWidth"
-              style="width: 168px"
-            />
-          </div>
-        </section>
-      </section>
+      <span class="grid-title">外观</span>
+      <div class="row">
+        <div class="row-tit">线宽</div>
+        <div class="grid-content">
+          <a-input-number
+            v-model="lineWidth"
+            :min="1"
+            @change="changeLineWidth"
+            style="width: 168px"
+          />
+        </div>
+        <div class="color-choice">
+          <swatches v-model="borderColor" popover-x="left" @close="changeBorderColor" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="row-tit">线型</div>
+        <a-select
+          style="width: 208px"
+          :default-value="borderLineOption[0].id"
+          @change="handleChange"
+        >
+          <a-select-option
+            v-for="item in borderLineOption"
+            :key="item.id"
+            :label="item.src"
+            :value="item.id"
+          >
+            <img :src="item.src" alt />
+          </a-select-option>
+        </a-select>
+      </div>
     </div>
     <!--文字内容-->
     <div class="attr-select" v-if="type==='text'">
-      <section class="grid">
-        文字内容
+      <span class="grid-title">文字内容</span>
+      <div class="grid-content">
+        <a-textarea
+          placeholder="请在此处输入文字!"
+          v-model="textMsg"
+          allow-clear
+          @change="changeTextArea"
+          :rows="4"
+        />
+      </div>
+      <span class="grid-title">外观</span>
+      <div class="row">
+        <div class="row-tit">字号</div>
         <div class="grid-content">
-          <a-textarea
-            placeholder="textarea with clear icon"
-            v-model="textMsg"
-            allow-clear
-            @change="changeTextArea"
-            :rows="4"
-          />
+          <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
+        </div>
+        <div class="color-choice">
+          <swatches v-model="fontColor" popover-x="left" @close="changeFontColor" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="row-tit">背景色</div>
+        <div class="color-choice">
+          <swatches v-model="color" popover-x="left" />
         </div>
-      </section>
-      <div class="attr-select" v-if="type==='text'">
-        <section class="grid">
-          外观
-          <div class="grid-content">
-            字号
-            <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
-          </div>
-        </section>
       </div>
     </div>
     <!--图片-->
     <div class="attr-select" v-if="type==='images'">
+      <span class="grid-title">文字内容</span>
       <section class="grid">
-        图片
         <div class="grid-content">
           <a-upload-dragger
             name="file"
@@ -60,58 +83,94 @@
           </a-upload-dragger>
         </div>
       </section>
+      <span class="grid-title">外观</span>
+      <div class="row">
+        <div class="row-tit">边框</div>
+        <div class="grid-content">
+          <a-input-number
+            v-model="lineWidth"
+            :min="1"
+            @change="changeLineWidth"
+            style="width: 168px"
+          />
+        </div>
+        <div class="color-choice">
+          <swatches v-model="color" popover-x="left" />
+        </div>
+      </div>
     </div>
 
     <!--针对“设备/位置/管线/分区”属性示例-->
-    <div class="attr-select">
-      <section class="grid">
-        <span>名称显示</span>
-        <!--        v-if -> 编辑设备/区域/管道    -->
-        <a-button type="link" class="edit-option-btn">{{`编辑设备`}}</a-button>
-        <div class="grid-content">
-          <a-input />
-        </div>
+    <div
+      class="attr-select"
+      v-if="type =='equipment' || type =='pipeline' ||type == 'fire-area' ||type == 'position'"
+    >
+      <div class="row-tit" v-if="type == 'fire-area'">颜色</div>
+      <div class="row" v-if="type == 'fire-area'">
+        <swatches :swatches="swatchess" v-model="color" inline></swatches>
+      </div>
+      <div class="row">
+        <div class="row-tit">名称显示</div>
+        <a-button type="link" class="edit-option-btn">{{editStatus[type]}}</a-button>
+      </div>
+      <div class="row">
+        <a-input />
+      </div>
+      <div class="row">
+        <div class="row-tit">字号</div>
         <div class="grid-content">
-          字号
           <a-input-number
-            v-model="numberValue"
+            v-model="lineWidth"
             :min="1"
-            @change="changeNumber"
+            @change="changeLineWidth"
             style="width: 168px"
           />
         </div>
-        <div class="grid-content" v-if="type ==='equipment'">
-          数量
+        <div class="color-choice">
+          <swatches v-model="color" popover-x="left" />
+        </div>
+      </div>
+      <!-- 当为设备状态时 -->
+      <div class="row" v-if="type =='equipment'">
+        <div class="row-tit">数量</div>
+        <div class="grid-content">
           <a-input-number
-            v-model="numberValue"
+            v-model="lineWidth"
             :min="1"
-            @change="changeNumber"
-            style="width: 218px"
+            @change="changeLineWidth"
+            style="width: 208px"
           />
         </div>
-        <div class="grid-content" v-if="type ==='pipeline'">
-          线宽
+      </div>
+      <!-- 当为管道状态时 -->
+      <div class="row" v-if="type =='pipeline'">
+        <div class="row-tit">线宽</div>
+        <div class="grid-content">
           <a-input-number
-            v-model="numberValue"
+            v-model="lineWidth"
             :min="1"
-            @change="changeNumber"
-            style="width: 218px"
+            @change="changeLineWidth"
+            style="width: 208px"
           />
         </div>
-      </section>
+      </div>
     </div>
     <!--设备/工程信息化ID/工程信息化中的位置类型-->
-    <!-- <div class="attr-select">
-    <section class="grid">-->
-    <!--        v-if -> 设备/工程信息化ID/工程信息化中的位置类型    -->
-    <!-- <span>{{`设备`}}</span>
+    <div
+      class="attr-select attr-select-bottom"
+      v-if="type =='equipment' || type =='pipeline' || type =='fire-area' ||type == 'position'"
+    >
+      <div class="row">
+        <span>{{`工程信息化ID`}}</span>
         <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
-        <div class="grid-content">
-          <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
-          <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
-        </div>
-      </section>
-    </div>-->
+      </div>
+
+      <div class="grid-content">
+        <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
+        <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
+        <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
+      </div>
+    </div>
     <!--    快捷操作提示-->
     <div style="position: fixed;bottom: 0;width: 280px;">
       <a-collapse :bordered="false" expand-icon-position="right">
@@ -129,11 +188,14 @@
 
 <script>
 import editDialog from "./edit-dialog";
+import Swatches from "vue-swatches";
 import bus from "@/bus";
+import "vue-swatches/dist/vue-swatches.css";
+import { ItemColor } from "@saga-web/big/lib";
 export default {
   name: "attr_select",
   props: ["type", "focusItemList"],
-  components: { editDialog },
+  components: { editDialog, Swatches },
   data() {
     return {
       precisionList: [{ value: 10 }, { value: 20 }, { value: 30 }],
@@ -149,8 +211,45 @@ export default {
       numberValue: 3,
       fontSize: 12, //字体大小
       lineWidth: 0,
-      color: "", //字体颜色
       textMsg: "", //
+      color: "#1CA085",
+      fontColor: "#1CA085", //文字颜色
+      borderColor: "", // 边框颜色 直线,折线,多边形等
+      borderLineOption: [
+        {
+          id: "solid",
+          src: require("@/assets/images/1pxline.jpg")
+        },
+        {
+          id: "dashed",
+          src: require("@/assets/images/dashedLine.jpg")
+        },
+        {
+          id: "dotted",
+          src: require("@/assets/images/dotLine.jpg")
+        }
+      ],
+      linepxOption: [
+        {
+          id: 1,
+          src: require("@/assets/images/1pxline.jpg")
+        },
+        {
+          id: 2,
+          src: require("@/assets/images/2pxline.jpg")
+        },
+        {
+          id: 3,
+          src: require("@/assets/images/3pxline.jpg")
+        }
+      ],
+      editStatus: {
+        equipment: "编辑设备",
+        pipeline: "管道编辑",
+        "fire-area": "编辑区域",
+        position: "编辑区域"
+      },
+      swatchess: ["#57C5FC", "#5F70E1", "#4DAE6C", "#028FAA"]
     };
   },
   methods: {
@@ -175,6 +274,14 @@ export default {
     changeTextArea() {
       bus.$emit("changeText", this.textMsg);
     },
+    // 改变线的颜色
+    changeBorderColor(color) {
+      bus.$emit("changeBorderColor", color);
+    },
+    // 改变字体颜色
+    changeFontColor(color) {
+      bus.$emit("changeFontColor", color);
+    },
     changeImage(info) {
       const status = info.file.status;
       if (status !== "uploading") {
@@ -197,9 +304,10 @@ export default {
         if (newval.itemType == "text") {
           this.textMsg = Item.text;
           this.fontSize = Item.font.size;
+          this.fontColor = Item.color;
         } else if (newval.itemType == "line") {
-          console.log('line',Item.lineWidth)
           this.lineWidth = Item.lineWidth;
+          this.borderColor = Item.strokeColor;
         }
       }
     }
@@ -209,15 +317,41 @@ export default {
 
 <style scoped lang="less">
 .attr-select {
-  border-top: 1px solid #c3c7cb;
-  margin-top: 30px;
-
+  padding: 12px 16px;
+  box-sizing: border-box;
+  .grid-title {
+    font-size: 12px;
+    color: #8d9399;
+  }
+  .row {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+    .color-choice {
+      & /deep/ .vue-swatches__trigger {
+        width: 26px !important;
+        height: 26px !important;
+        border-radius: 0px !important;
+      }
+    }
+    .row-tit {
+      color: #1f2429;
+      font-size: 14px;
+    }
+  }
   .grid {
     margin: 10px 15px;
+    .grid-title {
+      font-size: 12px;
+      color: #8d9399;
+    }
   }
 
   .grid-content {
-    margin-top: 10px;
+    // margin-top: 10px;
+    position: relative;
   }
 
   .icon-image {
@@ -246,4 +380,15 @@ export default {
     color: #0091ff;
   }
 }
+#attr-select {
+  width: 100%;
+  height: 100%;
+  .attr-select-bottom {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    overflow-y: auto;
+    padding-bottom: 400px;
+  }
+}
 </style>

+ 30 - 4
src/components/edit/right_toolbar.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="right_toolbar">
     <!-- 右侧侧编辑器 -->
-    <a-tabs default-active-key="1" @change="callback">
+    <a-tabs class="atabless" default-active-key="1" @change="callback">
       <a-tab-pane key="1" tab="属性">
         <div class="property">
           <!-- <ul class="formatting">
@@ -22,6 +22,7 @@
             <li v-for="(item,i) in msgList" :key="i">
               <a-input
                 :disabled="item.disable"
+                @change="changeStatus(item)"
                 size="small"
                 v-model="item.msg"
                 placeholder
@@ -32,7 +33,7 @@
               <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
             </li>
           </ul>
-          <attrSelect :type="attrType" :focusItemList="focusItemList" />
+          <attrSelect v-show="attrType" :type="attrType" :focusItemList="focusItemList" />
         </div>
       </a-tab-pane>
       <a-tab-pane key="2" tab="元素" force-render>
@@ -51,6 +52,7 @@
 </template>
 <script>
 import attrSelect from "@/components/edit/attr_select";
+import bus from "@/bus";
 const poistionList = [
   {
     name: "水平调整",
@@ -158,7 +160,25 @@ export default {
     callback(key) {
       console.log(key);
     },
-    onSearch() {}
+    onSearch() {},
+    // 改变状态
+    changeStatus(item) {
+      if (item.name == "Width") {
+        bus.$emit("itemWidth", item.msg);
+      } else if (item.name == "Height") {
+        bus.$emit("itemHeight", item.msg);
+      } else if (item.name == "X" || item.name == "Y") {
+        let x,y=''
+        this.msgList.forEach(t=>{
+          if(t.name == 'X'){
+                x = t.msg
+          }else if(t.name == 'Y'){
+                y = t.msg
+          }
+        })
+        bus.$emit("itemPositon", x,y);
+      }
+    }
   },
   watch: {
     focusItemList: function(newVal) {
@@ -217,8 +237,13 @@ li {
   height: 100%;
   background: rgba(255, 255, 255, 1);
   box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.11);
+  .atabless {
+    height: 100%;
+    width: 100%;
+  }
   .property {
     width: 100%;
+    height: 100%;
     .formatting {
       display: flex;
       height: 50px;
@@ -238,9 +263,10 @@ li {
     }
     .position {
       display: flex;
-      padding: 0 12px 0 12px;
+      padding: 0 12px 30px 12px;
       box-sizing: border-box;
       display: flex;
+      border-bottom: 1px solid #c3c7cb;
       flex-wrap: wrap;
       li {
         margin-top: 10px;

+ 32 - 10
src/components/mapClass/editScence.ts

@@ -51,7 +51,7 @@ export class EditScence extends SGraphScene {
      * @param obj 变化后的对象
      */
     listChange(obj: any) {
-        let itemType: string = ''
+        let itemType: string = 'equipment'
         if (obj.itemList[0] instanceof STextItem) {
             itemType = 'text'
         } else if (obj.itemList[0] instanceof SImageItem) {
@@ -60,6 +60,8 @@ export class EditScence extends SGraphScene {
             itemType = 'line'
         } else if (obj.itemList[0] instanceof SPolylineItem) {
             itemType = 'pipeline'
+        } else if (obj.itemList[0] instanceof SPolygonItem) {
+            itemType = 'position'
         } else if (obj.itemList[0] instanceof SImgTextItem) {
             itemType = 'equipment'
         } else {
@@ -87,7 +89,6 @@ export class EditScence extends SGraphScene {
         this.addItem(item);
         item.connect("finishCreated", this, this.finishCreated);
         item.zOrder = ItemOrder.lineOrder;
-        item.moveable = true;
         item.selectable = true;
         this.grabItem = item;
         this.undoStack.push(new SGraphAddCommand(this, item));
@@ -99,11 +100,9 @@ export class EditScence extends SGraphScene {
      * 增加折线item
      */
     addPolylineItem(event: SMouseEvent): boolean {
-
         const point = new SPoint(event.x, event.y)
         const item = new TipelineItem(null, [point]);
         //设置状态
-        item.moveable = true;
         item.selectable = true;
         item.status = SItemStatus.Create;
         item.zOrder = ItemOrder.polylineOrder
@@ -225,13 +224,24 @@ export class EditScence extends SGraphScene {
      * 更改文本颜色属性
      * @param str string 颜色
      */
-    updatedColor(str: string): void {
-        if (this.focusItem.color) {
+    updatedFontColor(color: string): void {
+        if (this.focusItem) {
             let old = this.focusItem.color;
             this.focusItem.color = color;
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
+    /**
+     * 更改border颜色
+     * @param color string 颜色
+     */
+    updatedBorderColor(color: string): void {
+        if (this.focusItem) {
+            let old = this.focusItem.strokeColor;
+            this.focusItem.strokeColor = color;
+            // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
+        }
+    }
 
     /**
      * 更改item宽
@@ -245,11 +255,11 @@ export class EditScence extends SGraphScene {
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
-     /**
-     * 更改item高
-     * @param height number 颜色
-     */
 
+    /**
+    * 更改item高
+    * @param height number 颜色
+    */
     updatedHeight(height: number): void {
         if (this.focusItem) {
             // let old = this.focusItem.width;
@@ -258,6 +268,18 @@ export class EditScence extends SGraphScene {
         }
     }
 
+    /**
+     * 更改item坐标
+     * @param x number x x坐标
+     * @param y number y y坐标
+     */
+    updatedPosition(x: number, y: number): void {
+        if (this.focusItem) {
+            this.focusItem.x = x;
+            this.focusItem.y = y;
+
+        }
+    }
 
     /**
      * 删除指定item