YaolongHan před 4 roky
rodič
revize
95bcdb0ec3

+ 11 - 11
package-lock.json

@@ -1064,17 +1064,17 @@
       "integrity": "sha512-gnItoKBjjv+kbcDfnY8f9EMMVPRJgXXgebdSEj2NTsNmygpdsjQBaqQ6AfDUYzRaWwP53sdmFHeidOCYcqg0RA=="
     },
     "@saga-web/big": {
-      "version": "1.0.31",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/big/-/big-1.0.31.tgz",
-      "integrity": "sha512-l9I2Pn9O8CusI5Bu8w1/vzIFmEK2nFTvcuMdy4OBwsVzsin6Wabq2rQr2dWDKJ5g7K2K3OvQAVVEcCZCTCW5Rw==",
+      "version": "1.0.35",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/big/-/big-1.0.35.tgz",
+      "integrity": "sha512-0VMastxCUglX2mOgIfwJT2uPT9SaMiOwtYlk+J5HQJf1ANwhWkgtYmQ0FPLL0v8l+QhX601iKCQsrZ8UsLagFg==",
       "requires": {
-        "@saga-web/graph": "2.1.75"
+        "@saga-web/graph": "2.1.78"
       }
     },
     "@saga-web/draw": {
-      "version": "2.1.88",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/draw/-/draw-2.1.88.tgz",
-      "integrity": "sha512-3gVbrgo3Qsqoi0t5Hwz4c98UYJPKJ7BXsu/zO5OFzF/Y0nykS6XG2jQLnMnXd+QqWhhJvOasrQHcQyvJlA3lUA==",
+      "version": "2.1.90",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/draw/-/draw-2.1.90.tgz",
+      "integrity": "sha512-KFICPt9qULAqQbMVXzdKAm/1iIUu0yA7qhJIzzmHrHfyRvofZAu/LVPBIOfNakrmZXkY5g+Bl3z0WboP6b1igg==",
       "requires": {
         "@saga-web/base": "^2.1.16"
       }
@@ -1088,11 +1088,11 @@
       }
     },
     "@saga-web/graph": {
-      "version": "2.1.75",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.75.tgz",
-      "integrity": "sha512-LpIskX94jy560KDIjiHlO3404KprZWKOb07jDCNfCP2l/1+PHlqApT3WAoSZWWMziKUjq0+y65wkE6wpO9m5dg==",
+      "version": "2.1.78",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.78.tgz",
+      "integrity": "sha512-pnNMSY+zy2QuHsMaSTdJs0qVcyuq6yToCGYhpKrLQF4tCcjuaLnAnhvbUHm9Tv8XlWAGGtO8BlXDwOoHK0vxYA==",
       "requires": {
-        "@saga-web/draw": "2.1.88"
+        "@saga-web/draw": "2.1.90"
       }
     },
     "@saga-web/graphy": {

+ 3 - 3
package.json

@@ -9,10 +9,10 @@
   },
   "dependencies": {
     "@saga-web/base": "2.1.16",
-    "@saga-web/big": "1.0.31",
-    "@saga-web/draw": "2.1.88",
+    "@saga-web/big": "1.0.35",
+    "@saga-web/draw": "2.1.90",
     "@saga-web/feng-map": "1.0.7",
-    "@saga-web/graph": "2.1.75",
+    "@saga-web/graph": "2.1.78",
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",
     "core-js": "^3.6.4",

+ 8 - 2
src/components/baseEditer.vue

@@ -48,6 +48,7 @@ export default {
   },
   methods: {
     init() {
+      // const loadings = this.$loading({type: 'global'});
       document.getElementById(`canvas`).focus();
       this.clearGraphy();
       this.scene = new EditScence();
@@ -73,12 +74,14 @@ export default {
       //   });
       this.view.scene = this.scene;
       this.view.fitSceneToView();
+      // this.$loading.close(loadings)
       // });
       this.scene.emitChange = this.emitChange;
     },
     // 监听变化
     emitChange(itemMsg) {
       this.$emit("changeFocusItem", itemMsg);
+      bus.$emit("FocusItemChanged", itemMsg);
     },
     clearGraphy() {
       if (this.view) {
@@ -113,8 +116,11 @@ export default {
       bus.$on("itemHeight", val => {
         this.scene.updatedHeight(Number(val));
       });
-      bus.$on("itemPositon",( x,y )=> {
-        this.scene.updatedPosition(Number(x,y));
+      bus.$on("itemPositon", (x, y) => {
+        this.scene.updatedPosition(Number(x, y));
+      });
+      bus.$on("changebackColor", (val) => {
+        this.scene.updatedbackColor(val);
       });
     }
   },

+ 6 - 1
src/components/edit/attr_select.vue

@@ -60,7 +60,7 @@
       <div class="row">
         <div class="row-tit">背景色</div>
         <div class="color-choice">
-          <swatches v-model="color" popover-x="left" />
+          <swatches v-model="backColor" popover-x="left" @close="changebackColor"  />
         </div>
       </div>
     </div>
@@ -215,6 +215,7 @@ export default {
       color: "#1CA085",
       fontColor: "#1CA085", //文字颜色
       borderColor: "", // 边框颜色 直线,折线,多边形等
+      backColor:'', //背景色 用于text文字
       borderLineOption: [
         {
           id: "solid",
@@ -282,6 +283,9 @@ export default {
     changeFontColor(color) {
       bus.$emit("changeFontColor", color);
     },
+    changebackColor(color){
+      bus.$emit("changebackColor", color);
+    },
     changeImage(info) {
       const status = info.file.status;
       if (status !== "uploading") {
@@ -305,6 +309,7 @@ export default {
           this.textMsg = Item.text;
           this.fontSize = Item.font.size;
           this.fontColor = Item.color;
+          this.backColor = Item.backgroundColor;
         } else if (newval.itemType == "line") {
           this.lineWidth = Item.lineWidth;
           this.borderColor = Item.strokeColor;

+ 74 - 9
src/components/edit/left_toolbar.vue

@@ -46,6 +46,7 @@
         v-on:mouseover="mouseoverActive(item)"
         v-for="(item,i) in extractChoice"
         :key="i"
+        @click="extractItem"
       >
         <div class="item">
           <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
@@ -55,10 +56,16 @@
       </li>
     </ul>
 
-    <div class="bottom-item">
-      <a-icon type="ellipsis" />
-      <span>选择原件</span>
-    </div>
+    <a-popover trigger="click" placement="rightBottom">
+      <template slot="content">
+        <itemTree></itemTree>
+      </template>
+      <div class="bottom-item">
+        <a-icon type="ellipsis" />
+        <span>选择原件</span>
+      </div>
+    </a-popover>
+
     <!-- 打开弹窗 -->
     <transition name="fade">
       <div class="drawer-model" id="drawer-model" v-show="visible">
@@ -70,7 +77,7 @@
           @close="onClose"
           :getContainer="false"
         >
-          <div class="drawer-model-body">
+          <div class="drawer-model-body" v-show="activeItem ==1 || activeItem ==2">
             <div class="btn-list">
               <a-button-group>
                 <a-button type="primary">绘制</a-button>
@@ -96,13 +103,53 @@
               </ul>
             </div>
           </div>
+          <div class="drawer-model-body drawer-model-body-extract" v-show="activeItem ==3">
+            <a-table :columns="columns" :data-source="data" size="small" :pagination="false" />
+          </div>
         </a-drawer>
       </div>
     </transition>
   </div>
 </template>
 <script>
+import itemTree from "./leftbar_components/itemTree";
+const columns = [
+  {
+    title: "名称",
+    dataIndex: "name"
+  },
+  {
+    title: "图例",
+    dataIndex: "age"
+  },
+  {
+    title: "数量",
+    dataIndex: "number"
+  },
+  {
+    title: "操作",
+    dataIndex: "address"
+  }
+];
+const data = [
+  {
+    key: "1",
+    name: "电梯",
+    age: 32,
+    number: 123,
+    address: "提取"
+  },
+  {
+    key: "2",
+    name: "防火风区",
+    age: 42,
+    number: 123,
+    address: "提取"
+  }
+];
+
 export default {
+  components: { itemTree },
   props: {
     cmd: {
       type: Number,
@@ -181,7 +228,9 @@ export default {
           isHover: false, //是否hover
           name: "提取" //类型
         }
-      ]
+      ],
+      data,
+      columns
     };
   },
   methods: {
@@ -242,13 +291,20 @@ export default {
     },
     getexampleItem() {
       this.visible = false;
-      let item =5
+      let item = 5;
       if (this.activeItem == 1) {
-        item =4
+        item = 4;
       } else {
-        item = 5
+        item = 5;
       }
       this.$emit("toolActionClick", item);
+    },
+    // 提取元素
+    extractItem() {
+      this.visible = !this.visible;
+      this.activeItem = 3;
+
+      console.log("this.activeItem", this.activeItem);
     }
   },
   watch: {
@@ -445,6 +501,15 @@ export default {
         }
       }
     }
+    .drawer-model-body-extract {
+      padding: 0;
+      position: absolute;
+      left: 0;
+      right: 0;
+      .ant-table-small {
+        border: none !important;
+      }
+    }
   }
   .border-top {
     border-top: 1px solid #c3c7cb;

+ 109 - 0
src/components/edit/leftbar_components/itemTree.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="treeList">
+    <div class="tree-body">
+      <a-tree
+        v-model="checkedKeys"
+        checkable
+        :expanded-keys="expandedKeys"
+        :auto-expand-parent="autoExpandParent"
+        :selected-keys="selectedKeys"
+        :tree-data="treeData"
+        @expand="onExpand"
+        @select="onSelect"
+      />
+    </div>
+
+    <div class="btn-list">
+      <a-button type="link">恢复默认</a-button>
+      <a-button>取消</a-button>
+      <a-button type="primary">按钮</a-button>
+    </div>
+  </div>
+</template>
+<script>
+const treeData = [
+  {
+    title: "0-0",
+    key: "0-0",
+    children: [
+      {
+        title: "0-0-0",
+        key: "0-0-0",
+        children: [
+          { title: "0-0-0-0", key: "0-0-0-0" },
+          { title: "0-0-0-1", key: "0-0-0-1" },
+          { title: "0-0-0-2", key: "0-0-0-2" }
+        ]
+      },
+      {
+        title: "0-0-1",
+        key: "0-0-1",
+        children: [
+          { title: "0-0-1-0", key: "0-0-1-0" },
+          { title: "0-0-1-1", key: "0-0-1-1" },
+          { title: "0-0-1-2", key: "0-0-1-2" }
+        ]
+      },
+      {
+        title: "0-0-2",
+        key: "0-0-2"
+      }
+    ]
+  },
+  {
+    title: "0-1",
+    key: "0-1",
+    children: [
+      { title: "0-1-0-0", key: "0-1-0-0" },
+      { title: "0-1-0-1", key: "0-1-0-1" },
+      { title: "0-1-0-2", key: "0-1-0-2" }
+    ]
+  },
+  {
+    title: "0-2",
+    key: "0-2"
+  }
+];
+export default {
+  data() {
+    return {
+      expandedKeys: ["0-0-0", "0-0-1"],
+      autoExpandParent: true,
+      checkedKeys: ["0-0-0"],
+      selectedKeys: [],
+      treeData
+    };
+  },
+  watch: {
+    checkedKeys(val) {
+      console.log("onCheck", val);
+    }
+  },
+  methods: {
+    onExpand(expandedKeys) {
+      console.log("onExpand", expandedKeys);
+      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+      // or, you can remove all expanded children keys.
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+    onCheck(checkedKeys) {
+      console.log("onCheck", checkedKeys);
+      this.checkedKeys = checkedKeys;
+    },
+    onSelect(selectedKeys, info) {
+      console.log("onSelect", info);
+      this.selectedKeys = selectedKeys;
+    }
+  }
+};
+</script>
+<style lang="less">
+.treeList {
+  width: 240px;
+  .tree-body {
+    height: 420px;
+    overflow-y: auto;
+  }
+}
+</style>

+ 43 - 12
src/components/edit/top_toolbar.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="tool">
       <ul>
-        <li>
+        <li @click="saveMsg">
           <img class="lock" :src="require(`./../../assets/images/t-save.png`)" alt />
           <span>保存</span>
         </li>
@@ -20,7 +20,7 @@
         </li>-->
         <li>缩放窗口</li>
         <li>
-          <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
+          <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
           <span>对齐</span>
         </li>
         <!-- <li>
@@ -35,23 +35,19 @@
           <a-icon type="edit" />
           <span>打散</span>
         </li>-->
-        <li>
-          <a-icon type="edit" />
-          <span>解锁</span>
+        <li @click="lockItem">
+          <Icon :name="!isLock?'lock':'unlock'" />
+          <span>{{isLock?"锁定":"解锁"}}</span>
         </li>
         <li>
           <a-icon type="delete" />
           <span>删除</span>
         </li>
-        <!-- <li>
-          <a-icon type="edit" />
-          <span>解锁</span>
-        </li>-->
       </ul>
     </div>
     <div class="btn-list">
       <div class="btn-list-item">
-        <a-icon type="delete" />
+        <Icon name="release" />
         <span>发布</span>
       </div>
       <!--      <div class="btn-list-item">-->
@@ -62,9 +58,44 @@
   </div>
 </template>
 <script>
+import bus from "@/bus";
 export default {
   data() {
-    return {};
+    return {
+      isLock: false, //是否锁定
+      focusItem: null
+    };
+  },
+  methods: {
+    FocusItemChanged(itemMsg) {
+      this.focusItem = null;
+      if (itemMsg.itemList.length == 1) {
+        if (
+          itemMsg.itemType == "images" ||
+          itemMsg.itemType == "text" ||
+          itemMsg.itemType == "position"
+        ) {
+          this.isLock = itemMsg.itemList[0].moveable;
+          this.focusItem = itemMsg.itemList[0];
+        }
+      }
+    },
+    lockItem() {
+      if (this.focusItem) {
+        this.isLock = !this.isLock;
+        this.focusItem.moveable = this.isLock;
+      } else {
+        this.$message.error("请选择指定对象!", 1);
+      }
+    },
+    saveMsg() {
+      this.$message.success("保存成功!", 1);
+    }
+  },
+  mounted() {
+    bus.$on("FocusItemChanged", itemMsg => {
+      this.FocusItemChanged(itemMsg);
+    });
   }
 };
 </script>
@@ -79,7 +110,7 @@ li {
   width: 100%;
   height: 60px;
   background: rgba(255, 255, 255, 1);
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: center;
   justify-content: space-between;

+ 15 - 4
src/components/mapClass/EditScence.ts

@@ -1,8 +1,8 @@
 import { SMouseEvent, SUndoStack } from "@saga-web/base";
 import { SGraphScene } from '@saga-web/graph/lib';
 import { SPoint, SFont } from '@saga-web/draw/lib';
-import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
-import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
+import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
+import { SGraphItem, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
 import { SPolygonItem } from "./SPolygonItem";
 import { TipelineItem } from "@/lib/TipelineItem";
 import { SImgTextItem } from "@/lib/SImgTextItem"
@@ -80,10 +80,10 @@ export class EditScence extends SGraphScene {
     emitChange(msg: any) {
 
     }
+
     /**
      * 增加线段item
      */
-
     addLine(event: SMouseEvent): boolean {
         const item = new SLineItem(null, new SPoint(event.x, event.y));
         this.addItem(item);
@@ -117,7 +117,6 @@ export class EditScence extends SGraphScene {
     /**
      * 增加多边形item
      */
-
     addPolygonItem(event: SMouseEvent): void {
         //创建item
         const Polylines = new SPolygonItem(null);
@@ -231,6 +230,7 @@ export class EditScence extends SGraphScene {
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
+
     /**
      * 更改border颜色
      * @param color string 颜色
@@ -281,6 +281,17 @@ export class EditScence extends SGraphScene {
         }
     }
 
+
+    /**
+     * 更改item 背景色坐标
+     * @param color string 颜色color
+     */
+    updatedbackColor(color:string): void {
+        if (this.focusItem) {
+            this.focusItem.backgroundColor = color;
+        }
+    }
+
     /**
      * 删除指定item
      */

+ 9 - 8
src/components/mapClass/SPolygonItem.ts

@@ -428,9 +428,7 @@ export class SPolygonItem extends SGraphItem {
                     //3 传递完成事件状态
                     this.$emit('finishCreated')
                     //1 grabItem 置为null
-                    if (this.scene) {
-                        this.scene.grabItem = null;
-                    }
+                    this.releaseItem();
                     //2 清空undo
                     if (this.undoStack) {
                         this.undoStack.clear();
@@ -476,14 +474,14 @@ export class SPolygonItem extends SGraphItem {
             // 记录新增顶点操作记录压入堆栈
             let pos = new SPoint(event.x, event.y);
             this.recordAction(SGraphPointListInsert, [this.pointList, pos]);
-            return true;
         } else if (this._status == SItemStatus.Edit) {
             // 对多边形数组做编辑操作
             this.editPolygonPoint(event);
-            return true;
         } else {
-            return super.onMouseDown(event)
+            // return super.onMouseDown(event)
         }
+        return true;
+
     } // Function onMouseDown()
 
     /**
@@ -520,13 +518,15 @@ export class SPolygonItem extends SGraphItem {
             this.lastPoint = new SPoint
             this.lastPoint.x = event.x;
             this.lastPoint.y = event.y;
-            this.update()
+            this.update();
         } else if (this._status == SItemStatus.Edit) {
             if (-1 != this.curIndex) {
                 this.pointList[this.curIndex].x = event.x;
                 this.pointList[this.curIndex].y = event.y;
             }
             this.update()
+        } else {
+            // return super.onMouseMove(event)
         }
 
         return true;
@@ -539,7 +539,6 @@ export class SPolygonItem extends SGraphItem {
      * @param	event         事件参数
      * @return	boolean
      */
-
     onMouseUp(event: SMouseEvent): boolean {
         if (this._status == SItemStatus.Edit) {
             if (-1 != this.curIndex) {
@@ -548,6 +547,8 @@ export class SPolygonItem extends SGraphItem {
             }
             this.curIndex = -1;
             this.curPoint = null;
+        } else {
+            // return super.onMouseUp(event)
         }
         return true;
     } // Function onMouseUp()

+ 2 - 2
src/lib/SImgTextItem.ts

@@ -1,5 +1,4 @@
 import { SItemStatus } from "@saga-web/big/lib/enums/SItemStatus";
-import { SObjectItem, SImageItem, SAnchorItem, STextItem } from '@saga-web/big/lib';
 import { SGraphItem } from '@saga-web/graph/lib/SGraphItem';
 import { STextBaseLine } from '@saga-web/draw/lib/enums/STextBaseLine';
 import { SMouseEvent } from '@saga-web/base/lib/SMouseEvent';
@@ -7,6 +6,7 @@ import { SSize } from '@saga-web/draw/lib/types/SSize';
 import { SPainter } from '@saga-web/draw/lib/SPainter';
 import { SColor } from '@saga-web/draw/lib/SColor';
 import { SRect } from '@saga-web/draw/lib/types/SRect';
+import { SObjectItem, SImageItem, STextItem, SAnchorItem } from '@saga-web/graph/lib';
 
 /**
      * 图例item  icon
@@ -79,7 +79,7 @@ export class SImgTextItem extends SObjectItem {
     this.textItem.text = v;
     this.update();
   }
-  
+
   /** img Item    */
   img: SImageItem = new SImageItem(this);