Kaynağa Gözat

Merge branch 'master' of http://39.106.8.246:3003/web/wanda-editer

zhangyu 4 yıl önce
ebeveyn
işleme
d769fb2df2

+ 43 - 8
package-lock.json

@@ -1067,19 +1067,26 @@
       "integrity": "sha512-DE0rH2m25O3yCK1b1VXSX3tYUHBBEcQnrkjh72SctsFGK2jdS7XBE4+1x8szajvPIOkH05wMoUC2EsmJsZAhvQ=="
     },
     "@saga-web/big": {
-      "version": "1.0.11",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/big/-/big-1.0.11.tgz",
-      "integrity": "sha512-LFG859n6oDtrLnzkN2/p5Hql01eOFEN3BO1dfvkE0ApuQBSkMXFIsrCbsvgLdbodbwJPFeZLyN6LdSrytDN+Hw==",
+      "version": "1.0.24",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/big/-/big-1.0.24.tgz",
+      "integrity": "sha512-N5BB1yFH1jb6i/+maTN6aRIkR4tF5la9VSOMh5fe0HbnsDk0Yb2kIXVK7Ttjer5Lm8Yd4Pl0M4MOuD0coEHrMw==",
       "requires": {
-        "@saga-web/graphy": "2.1.54"
+        "@saga-web/graph": "2.1.68"
       }
     },
     "@saga-web/draw": {
-      "version": "2.1.82",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/draw/-/draw-2.1.82.tgz",
-      "integrity": "sha512-69guXPLfDZnAHC2sluakctR9ajDztbir5e3ilYjEpuBZnR5BepnlFp7sxvtui6v2SUBt7V2TmYOji99ix63MIw==",
+      "version": "2.1.84",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/draw/-/draw-2.1.84.tgz",
+      "integrity": "sha512-j7sM0NSB6+uq+83ZqvZfX+IasUBUE7C06Agtqn+yQu93bWChR9/aM7pYcwMaVrFk3UysjKSsiFmhFMkVzVJcyA==",
       "requires": {
-        "@saga-web/base": "^2.1.9"
+        "@saga-web/base": "^2.1.12"
+      },
+      "dependencies": {
+        "@saga-web/base": {
+          "version": "2.1.14",
+          "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/base/-/base-2.1.14.tgz",
+          "integrity": "sha512-mmoFJ6Bsg/ui2aqhwNdRPTj6meAEEVPAK+jjTmHWqDSsjVbAqNeSAKL04Cr0UtOqgi4+6P3Ys9klZgITHDpiFw=="
+        }
       }
     },
     "@saga-web/feng-map": {
@@ -1100,12 +1107,30 @@
         }
       }
     },
+    "@saga-web/graph": {
+      "version": "2.1.68",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.68.tgz",
+      "integrity": "sha512-2+MgPWxFrgyVNQKx6aAG4lZKo4fTed0MyvaccWAXB+j/D9EUy2TxGPNnR3nSMQabHhZKbWlHJqRMBvYybbb9ag==",
+      "requires": {
+        "@saga-web/draw": "2.1.84"
+      }
+    },
     "@saga-web/graphy": {
       "version": "2.1.54",
       "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graphy/-/graphy-2.1.54.tgz",
       "integrity": "sha512-rx7DNqaB2cZvpqRii0B/BZUrsNN2JGzFA05DyTV1epr+xBed0udLaa2x3mC0bxzZZZvdhNE/0mBIWboxiYxp0Q==",
       "requires": {
         "@saga-web/draw": "2.1.82"
+      },
+      "dependencies": {
+        "@saga-web/draw": {
+          "version": "2.1.82",
+          "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/draw/-/draw-2.1.82.tgz",
+          "integrity": "sha512-69guXPLfDZnAHC2sluakctR9ajDztbir5e3ilYjEpuBZnR5BepnlFp7sxvtui6v2SUBt7V2TmYOji99ix63MIw==",
+          "requires": {
+            "@saga-web/base": "^2.1.9"
+          }
+        }
       }
     },
     "@saga-web/topology": {
@@ -1120,6 +1145,16 @@
         "pako": "^1.0.10",
         "poly-decomp": "^0.3.0",
         "polybooljs": "^1.2.0"
+      },
+      "dependencies": {
+        "@saga-web/draw": {
+          "version": "2.1.82",
+          "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/draw/-/draw-2.1.82.tgz",
+          "integrity": "sha512-69guXPLfDZnAHC2sluakctR9ajDztbir5e3ilYjEpuBZnR5BepnlFp7sxvtui6v2SUBt7V2TmYOji99ix63MIw==",
+          "requires": {
+            "@saga-web/base": "^2.1.9"
+          }
+        }
       }
     },
     "@soda/friendly-errors-webpack-plugin": {

+ 3 - 3
package.json

@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@saga-web/base": "2.1.9",
-    "@saga-web/big": "1.0.11",
-    "@saga-web/draw": "2.1.82",
-    "@saga-web/graphy": "2.1.54",
+    "@saga-web/big": "1.0.24",
+    "@saga-web/draw": "2.1.84",
+    "@saga-web/graph": "2.1.68",
     "@saga-web/feng-map": "1.0.6",
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",

BIN
src/assets/images/t-slices-hover.png


BIN
src/assets/images/t-slices.png


+ 6 - 18
src/components/baseEditer.vue

@@ -1,4 +1,4 @@
-<template>
+left_toolbar<template>
   <div id="baseEditer">
     <div id="fengMap"></div>
     <div class="canvas-container" ref="graphy">
@@ -45,14 +45,13 @@ export default {
         this.appName,
         null
       );
-      console.log(this.fmap);
       this.fmap.parseData("1001724_29", 6, res => {
-        console.log(res);
         this.fParser = new SFloorParser(null);
         console.log(this.fParser);
         this.fParser.parseData(res);
         this.fParser.spaceList.forEach(t => {
-          t.connect('clicjnnmnk', this, this.spaceClick)
+          t.connect('click', this, this.spaceClick)
+          t.selectable = true;
           this.scene.addItem(t)
         });
         this.fParser.wallList.forEach(t => this.scene.addItem(t));
@@ -60,8 +59,6 @@ export default {
         this.fParser.doorList.forEach(t => this.scene.addItem(t));
         this.fParser.columnList.forEach(t => this.scene.addItem(t));
         this.fParser.casementList.forEach(t => this.scene.addItem(t));
-        // this.addPolyLine();
-        // this.DirectRelationItem();
         this.view.scene = this.scene;
         this.view.fitSceneToView();
       });
@@ -81,17 +78,6 @@ export default {
       this.scene.addItem(Polylines);
       this.scene.grabItem = Polylines;
     },
-    // 引入折线
-    // DirectRelationItem() {
-    //   const data = {
-    //     PointList: [
-    //       { X: -138.71000000089407, Y: -17.5 },
-    //       { X: -130.31000000052154, Y: -17.5 }
-    //     ]
-    //   };
-    //   const directRelationItem = new DirectRelationItem(null, data);
-    //   this.scene.addItem(directRelationItem);
-    // },
     clearGraphy() {
       if (this.view) {
         this.view.scene = null;
@@ -101,6 +87,7 @@ export default {
       document.getElementById('canvas').focus()
     },
     spaceClick(space, event) {
+      console.log(this.scene.selectContainer)
       // const item = new SImageItem(null, {
       //   Width: 32,
       //   Height: 32,
@@ -126,13 +113,14 @@ export default {
           this.init();
           break;
         case '画线':
-          this.scene.isLining = true;
+          this.scene.CMD = 2;
           break;
         case '画文字':
           this.scene.isTexting = true;
           break;
         case '画图片':
           this.scene.isImging = true;
+          this.scene.CMD = 1;
           break;
         default:
           console.log(name)

+ 189 - 0
src/components/edit/attr_select.vue

@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <!--网格-->
+    <div class="attr-select" v-if="type==='网格'">
+      <section class="grid">
+        <a-checkbox @change="onChange">
+          网格
+        </a-checkbox>
+        <div class="grid-content">网格精度
+          <a-select default-value="10" style="width: 60%" @change="handleChange" :disabled="precision">
+            <a-select-option v-for="item in precisionList" :value="item.value" :key="item.value">
+              {{item.value}}
+            </a-select-option>
+          </a-select>
+        </div>
+      </section>
+    </div>
+    <!--文字内容-->
+    <div class="attr-select" v-if="type==='文字内容'">
+      <section class="grid">文字内容
+        <div class="grid-content">
+          <a-textarea placeholder="textarea with clear icon" allow-clear @change="changeTextArea" :rows="4"/>
+        </div>
+      </section>
+    </div>
+    <!--图片-->
+    <div class="attr-select" v-if="type==='图片'">
+      <section class="grid">图片
+        <div class="grid-content">
+          <a-upload-dragger
+              name="file"
+              :multiple="true"
+              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+              @change="changeImage"
+          >
+            <p class="icon-image">
+              <a-icon type="cloud-upload"/>
+            </p>
+            <p class="ant-upload-text">将图片拖动到这里替换 </p>
+            <p class="ant-upload-hint">本地上传</p>
+          </a-upload-dragger>
+        </div>
+      </section>
+    </div>
+    <!--外观-->
+    <div class="attr-select" v-if="type==='外观'">
+      <section class="grid">外观
+        <div class="grid-content">线宽
+          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
+        </div>
+      </section>
+    </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="grid-content">字号
+          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
+        </div>
+        <div class="grid-content" v-if="type ==='设备'">数量
+          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
+        </div>
+        <div class="grid-content" v-if="type ==='管线'">线宽
+          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
+        </div>
+      </section>
+    </div>
+    <!--设备/工程信息化ID/工程信息化中的位置类型-->
+    <div class="attr-select">
+      <section class="grid">
+        <!--        v-if -> 设备/工程信息化ID/工程信息化中的位置类型    -->
+        <span>{{`设备`}}</span>
+        <a-button type="link" class="edit-option-btn">选择编辑</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 style="position: fixed;bottom: 0;width: 280px;">
+      <a-collapse :bordered="false" expand-icon-position="right">
+        <template #expandIcon="props">
+          <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0"/>
+        </template>
+        <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
+          <p v-for="item in keyboardOperation">{{item.value}}</p>
+        </a-collapse-panel>
+      </a-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "attr_select",
+        props: ['type'],
+        data() {
+            return {
+                precisionList: [
+                    {value: 10}, {value: 20}, {value: 30},
+                ],
+                precision: true,
+                numberValue: 4,
+                customStyle: 'background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0',
+                keyboardOperation: [
+                    {value: '拖动画布:'}, {value: '加选对象:'}, {value: '确认操作:'}, {value: '取消对象:'},
+                ],
+
+
+            }
+        },
+        methods: {
+            onChange(e) {
+                this.precision = e.target.checked === true ? false : true
+            },
+            handleChange(value) {
+                console.log(`selected ${value}`);
+            },
+            changeNumber(value) {
+                console.log(value)
+            },
+            changeTextArea(value) {
+                console.log(value)
+
+            },
+            changeImage(info) {
+                const status = info.file.status;
+                if (status !== 'uploading') {
+                    console.log(info.file, info.fileList);
+                }
+                if (status === 'done') {
+                    this.$message.success(`${info.file.name} file uploaded successfully.`);
+                } else if (status === 'error') {
+                    this.$message.error(`${info.file.name} file upload failed.`);
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="less">
+
+  .attr-select {
+    border-top: 1px solid #c3c7cb;
+    margin-top: 30px;
+
+    .grid {
+
+      margin: 10px 15px;
+    }
+
+    .grid-content {
+      margin-top: 10px;
+    }
+
+    .icon-image {
+      font-size: 25px;
+    }
+
+    .edit-option-btn {
+      float: right;
+      margin-top: -5px;
+    }
+
+    .attr-card {
+      width: 250px;
+      margin-bottom: 10px;
+      white-space: normal;
+      box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
+      border-radius: 4px;
+    }
+
+    .ant-upload.ant-upload-drag p.ant-upload-text {
+      font-size: 14px;
+      color: #C3C7CB;
+    }
+
+    .ant-upload.ant-upload-drag p.ant-upload-hint {
+      color: #0091FF;
+    }
+
+  }
+</style>

+ 44 - 0
src/components/edit/edit-dialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <a-modal v-model="visible" title="选择编辑" on-ok="handleOk">
+    <template slot="footer">
+      <a-button key="back" @click="handleCancel">
+        取消
+      </a-button>
+      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+        确认
+      </a-button>
+    </template>
+    <div></div>
+  </a-modal>
+</template>
+
+<script>
+    export default {
+        name: "edit-dialog",
+        data() {
+            return {
+                loading: false,
+                visible: false,
+            };
+        },
+        methods: {
+            showModal() {
+                this.visible = true;
+            },
+            handleOk(e) {
+                this.loading = true;
+                setTimeout(() => {
+                    this.visible = false;
+                    this.loading = false;
+                }, 3000);
+            },
+            handleCancel(e) {
+                this.visible = false;
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -29,20 +29,37 @@
         </div>
       </li>-->
       <li
-        v-on:mouseout="mouseoutActive(item)"
-        v-on:mouseover="mouseoverActive(item)"
-        v-for="(item,i) in systemChoice"
-        :key="i"
+              v-on:mouseout="mouseoutActive(item)"
+              v-on:mouseover="mouseoverActive(item)"
+              v-for="(item,i) in systemChoice"
+              :key="i"
       >
         <div class="item">
-          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
-          <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
-          <div>弱电系统</div>
+          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt/>
+          <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt/>
+          <div>{{item.name}}</div>
+        </div>
+      </li>
+    </ul>
+    <!--    提取-->
+    <ul class="list-2 border-top">
+
+      <li
+              v-on:mouseout="mouseoutActive(item)"
+              v-on:mouseover="mouseoverActive(item)"
+              v-for="(item,i) in extractChoice"
+              :key="i"
+      >
+        <div class="item">
+          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt/>
+          <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt/>
+          <div>{{item.name}}</div>
         </div>
       </li>
     </ul>
+
     <div class="bottom-item">
-      <a-icon type="ellipsis" />
+      <a-icon type="ellipsis"/>
       <span>选择原件</span>
     </div>
   </div>
@@ -98,6 +115,15 @@ export default {
           isHover: false, //是否hover
           name: "管线桥架" //类型
         }
+      ],
+      //提取
+      extractChoice: [
+        {
+          img: "t-slices.png", //logo
+          hoverImg: "t-slices-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          name: "提取" //类型
+        }
       ]
     };
   },
@@ -118,12 +144,14 @@ export default {
 <style lang="less">
 #left_toolbar {
   width: 68px;
-  height: 707px;
+  /*height: 707px;*/
+  height: 100%;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
   padding: 0 0 12px 0;
   box-sizing: border-box;
   position: relative;
+
   ul,
   li {
     padding: 0;
@@ -229,5 +257,8 @@ export default {
       height: 54px;
     }
   }
+  .border-top{
+    border-top: 1px solid #c3c7cb;
+  }
 }
 </style>

+ 3 - 1
src/components/edit/right_toolbar.vue

@@ -32,6 +32,7 @@
               <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
             </li>
           </ul>
+          <attrSelect/>
         </div>
       </a-tab-pane>
       <a-tab-pane key="2" tab="元素" force-render>
@@ -50,6 +51,7 @@
   </div>
 </template>
 <script>
+  import attrSelect from "@/components/edit/attr_select";
 const poistionList = [
   {
     name: "水平调整",
@@ -135,7 +137,7 @@ const msgList = [
 // import Select from "@/components/Select/Select.vue";
 export default {
   components: {
-    // Select
+    attrSelect
   },
   data() {
     return {

+ 8 - 4
src/components/edit/top_toolbar.vue

@@ -39,6 +39,10 @@
           <a-icon type="edit" />
           <span>锁定</span>
         </li>
+        <li>
+          <a-icon type="delete" />
+          <span>删除</span>
+        </li>
         <!-- <li>
           <a-icon type="edit" />
           <span>解锁</span>
@@ -50,10 +54,10 @@
         <a-icon type="delete" />
         <span>发布</span>
       </div>
-      <div class="btn-list-item">
-        <a-icon type="delete" />
-        <span>下载</span>
-      </div>
+<!--      <div class="btn-list-item">-->
+<!--        <a-icon type="delete" />-->
+<!--        <span>下载</span>-->
+<!--      </div>-->
     </div>
   </div>
 </template>

+ 107 - 14
src/lib/FloorScene.ts

@@ -1,25 +1,118 @@
-import { SGraphyScene } from '@saga-web/graphy/lib';
+import { SGraphScene } from '@saga-web/graph/lib';
 import { SMouseEvent } from '@saga-web/base/lib';
-import { SPoint } from '@saga-web/draw/lib';
-import { SFloorParser, SImageItem,STextItem,SLineItem,SPolylineItem } from "@saga-web/big";
+import { SPoint, SPainter, SRect, SColor } from '@saga-web/draw/lib';
+import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem, SAnchorItem, SItemStatus } from "@saga-web/big";
+import { SMathUtil } from '@saga-web/big/lib/utils/SMathUtil';
+import { SImgTextItem } from './SImgTextItem';
+import { TipelineItem } from './TipelineItem';
 
-export class FloorScene extends SGraphyScene {
-  isLining: boolean = false;
+export class FloorScene extends SGraphScene {
 
+  CMD: number = 0;
 
+  // 图标itemlist
+  imgtextList: SImgTextItem[] = [];
+
+  // 构造函数
+  constructor() {
+    super();
+    this.selectContainer.connect('listChange', this, this.listChange)
+  }
+
+  // 
+  listChange() {
+    console.log(arguments)
+  }
+
+  // 创建图标item
+  createSImgText(event: SMouseEvent): SImgTextItem {
+    const item = new SImgTextItem(null);
+    item.moveTo(event.x, event.y);
+    this.addItem(item);
+    this.imgtextList.push(item);
+    this.CMD = 0;
+    // this.grabItem = item;
+    return item;
+  }
+
+  // 创建图标item
+  createSPolyline(event: SMouseEvent, anchor: SAnchorItem | null = null): TipelineItem {
+    const item = new TipelineItem(null, [new SPoint(event.x, event.y)]);
+    this.addItem(item);
+    item.startAnchor = anchor;
+    if (anchor) {
+      anchor.parent?.connect('changePos', item, item.changePos)
+    }
+    this.grabItem = item;
+    return item;
+  }
 
   onMouseDown(event: SMouseEvent): boolean {
-    if (this.isLining) {
-      if (this.grabItem instanceof SPolylineItem) {
+    if (this.CMD == 1) {
+      this.createSImgText(event);
+      return true;
+    } else if (this.CMD == 2) {
+      const anc = this.clickIsAnchor(event);
+      if (anc) {
+        const p = anc.mapToScene(0, 0)
+        anc.isConnected = true;
+        event.x = p.x;
+        event.y = p.y;
+      }
+      if (this.grabItem instanceof TipelineItem) {
+        // 是否点击锚点
+        if (anc){
+          if (this.grabItem.pointList.length) {
+            this.grabItem.endAnchor = anc;
+            anc.parent?.connect('changePos', this.grabItem, this.grabItem.changePos)
+          }
+          this.grabItem.onMouseDown(event);
+          this.grabItem.status = SItemStatus.Edit;
+          this.CMD = 0;
+          return true
+        }
         return super.onMouseDown(event);
-      } else {
-        const item = new SPolylineItem(null, new SPoint(event.x, event.y));
-        this.addItem(item);
-        this.grabItem = item;
-        return true;
       }
-    } else {
-      return super.onMouseDown(event);
+      this.createSPolyline(event, anc);
+      return true;
     }
+    this.CMD = 0
+    return super.onMouseDown(event);
+  }
+
+  /**
+     *  划线时点击位置是否是锚点
+     *
+     *  @param  event   事件
+     *  @param  len     限制距离
+     *  @return 点击的锚点
+     * */
+  clickIsAnchor(event: SMouseEvent): SAnchorItem | null {
+    let minAnchor = null;
+    let len: number = -1;
+    this.imgtextList.forEach(imgtext => {
+      console.log(imgtext.anchorList)
+      imgtext.anchorList.forEach(anchor => {
+        let anchorPoint = anchor.mapToScene(0, 0);
+        let dis = SMathUtil.pointDistance(
+          event.x,
+          event.y,
+          anchorPoint.x,
+          anchorPoint.y
+        );
+        if (len < 0) {
+          len = anchor.sceneDis;
+        }
+        if (dis < len) {
+          minAnchor = anchor;
+          len = dis;
+        }
+      })
+    })
+    return minAnchor;
+  } // Function clickIsAnchor()
+
+  drawScene(painter: SPainter, rect: SRect) {
+    super.drawScene(painter, rect);
   }
 }

+ 2 - 2
src/lib/FloorView.ts

@@ -1,4 +1,4 @@
-import { SGraphyItem, SGraphyView } from "@saga-web/graphy/lib";
+import { SGraphItem, SGraphView } from "@saga-web/graph/lib";
 import { SMouseButton, SMouseEvent, SNetUtil } from "@saga-web/base/lib";
 import { SPoint } from "@saga-web/draw/lib";
 
@@ -7,7 +7,7 @@ import { SPoint } from "@saga-web/draw/lib";
  *
  * @author  郝建龙
  */
-export class FloorView extends SGraphyView {
+export class FloorView extends SGraphView {
     /** 鼠标左键键按下时位置 */
     private _leftKeyPos = new SPoint();
     /** 空格是否被按下 */

+ 175 - 0
src/lib/SImgTextItem.ts

@@ -0,0 +1,175 @@
+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';
+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';
+
+/**
+     * 图例item  icon
+     *
+     * */
+export class SImgTextItem extends SObjectItem {
+
+  /** item状态  */
+  _status: SItemStatus = SItemStatus.Normal;
+  get status(): SItemStatus {
+    return this._status;
+  }
+  set status(v: SItemStatus) {
+    this._status = v;
+    this.update();
+  }
+
+  /** 是否显示文字  */
+  _showText: boolean = true;
+  get showText(): boolean {
+    return this._showText;
+  }
+  set showText(v: boolean) {
+    if (v === this._showText) {
+      return
+    }
+    this._showText = v;
+    if (v) {
+      this.textItem.show();
+    } else {
+      this.textItem.hide();
+    }
+  }
+
+  /** X轴坐标 */
+  get x(): number {
+    return this.pos.x;
+  } // Get x
+  set x(v: number) {
+    this.pos.x = v;
+    this.$emit("changePos");
+    this.update();
+  } // Set x
+  /** Y轴坐标 */
+  get y(): number {
+    return this.pos.y;
+  } // Get y
+  set y(v: number) {
+    this.pos.y = v;
+    this.$emit("changePos");
+    this.update();
+  } // Set y
+
+  /** 是否显示锚点  */
+  _showAnchor: boolean = false;
+  get showAnchor(): boolean {
+    return this._showAnchor;
+  }
+  set showAnchor(v: boolean) {
+    this._showAnchor = v;
+    this.anchorList.forEach(t => {
+      t.visible = v;
+    })
+  }
+
+  get text():string{
+    return this.textItem.text;
+  }
+  set text(v:string){
+    this.textItem.text = v;
+    this.update();
+  }
+  
+  /** img Item    */
+  img: SImageItem = new SImageItem(this);
+
+  /** text item   */
+  textItem: STextItem = new STextItem(this);
+
+  /**
+   * 构造体
+   *
+   * */
+  constructor(parent: SGraphItem | null) {
+    super(parent);
+    this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
+    this.img.width = 32;
+    this.img.height = 32;
+    let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
+    this.anchorList = anchorPoint.map(t => {
+      let item = new SAnchorItem(this);
+      item.moveTo(t.x, t.y);
+      return item;
+    });
+    this.update();
+    this.textItem.text = "请填写文本";
+    this.textItem.moveTo(16, -6);
+    this.moveable = true;
+    this.selectable = true;
+    this.isTransform = false
+  }
+
+  /**
+   * 鼠标按下事件
+   *
+   * */
+  onMouseDown(event: SMouseEvent): boolean {
+    console.log(this)
+    if (this.status == SItemStatus.Normal) {
+      return super.onMouseDown(event);
+    } else if (this.status == SItemStatus.Edit) {
+      return super.onMouseDown(event);
+    }
+    return true;
+  } // Function onMouseDown()
+
+  /**
+   * 宽高发发生变化
+   *
+   * @param   oldSize 改之前的大小
+   * @param   newSize 改之后大小
+   * */
+  onResize(oldSize: SSize, newSize: SSize) {
+    console.log(arguments);
+  } // Function onResize()
+
+  /**
+   * 鼠标双击事件
+   *
+   * @param   event   鼠标事件
+   * @return  是否处理事件
+   * */
+  onDoubleClick(event: SMouseEvent): boolean {
+    this.status = SItemStatus.Edit;
+    return true;
+  } // Function onDoubleClick()
+
+  /**
+   * 宽高发生变化
+   *
+   * @return  SRect   所有子对象的并集
+   * */
+  boundingRect(): SRect {
+    let rect: SRect = new SRect();
+    this.children.forEach(t => {
+      if (rect.isNull()) {
+        rect = t.boundingRect().adjusted(t.pos.x, t.pos.y, 0, 0);
+      } else {
+        rect = rect.unioned(t.boundingRect().adjusted(t.pos.x, t.pos.y, 0, 0));
+      }
+    });
+    return rect;
+  } // Function boundingRect()
+
+  /**
+   * Item绘制操作
+   *
+   * @param   painter painter对象
+   */
+  onDraw(painter: SPainter): void {
+    painter.pen.lineWidth = painter.toPx(1);
+    painter.pen.color = new SColor("#00FF00");
+    painter.brush.color = SColor.Transparent;
+    painter.drawRect(this.boundingRect());
+  } // Function onDraw()
+}

+ 37 - 0
src/lib/TipelineItem.ts

@@ -0,0 +1,37 @@
+import { SPolylineItem, SAnchorItem } from '@saga-web/big/lib';
+import { SPainter, SColor } from '@saga-web/draw/lib';
+
+/**
+ * 管道item
+ *
+ * */
+export class TipelineItem extends SPolylineItem {
+  /** 起始锚点  */
+  startAnchor: SAnchorItem | null = null;
+  /** 结束锚点  */
+  endAnchor: SAnchorItem | null = null;
+
+  changePos() {
+    if (this.startAnchor) {
+      // 判断删除equip后,不移动
+      if (this.startAnchor.parent && this.startAnchor.parent.parent) {
+        this.pointList[0] = this.startAnchor.mapToScene(0, 0);
+      }
+    }
+    if (this.endAnchor) {
+      // 删除equip后
+      if (this.endAnchor.parent && this.endAnchor.parent.parent) {
+        this.pointList[
+          this.pointList.length - 1
+        ] = this.endAnchor.mapToScene(0, 0);
+      }
+    }
+  }
+
+  // onDraw(painter:SPainter){
+  //   if (this.startAnchor) {
+
+  //   }
+  //   if (this.endAnchor) 
+  // }
+}

+ 28 - 27
src/views/editer.vue

@@ -11,9 +11,9 @@
       </div>
       <!-- 绘制界面 -->
       <div class="baseEdit">
-        <!-- <baseEditer ref="graphy"></baseEditer> -->
+        <baseEditer ref="graphy"></baseEditer>
         <!-- <baseEditertest ref="graphy"></baseEditertest> -->
-        <baseEditerzy ref="graphy"></baseEditerzy>
+        <!-- <baseEditerzy ref="graphy"></baseEditerzy> -->
       </div>
       <!-- 右侧工具栏 -->
       <div class="right_toolbar">
@@ -24,30 +24,30 @@
 </template>
 
 <script>
-import baseEditer from "@/components/baseEditer.vue";
-import baseEditertest from "@/components/baseEditertest.vue";
-import baseEditerzy from "@/components/baseEditerzy.vue";
-import leftToolbar from "@/components/edit/left_toolbar.vue";
-import topToolbar from "@/components/edit/top_toolbar.vue";
-import rightToolbar from "@/components/edit/right_toolbar.vue";
+    import baseEditer from "@/components/baseEditer.vue";
+    import baseEditertest from "@/components/baseEditertest.vue";
+    import baseEditerzy from "@/components/baseEditerzy.vue";
+    import leftToolbar from "@/components/edit/left_toolbar.vue";
+    import topToolbar from "@/components/edit/top_toolbar.vue";
+    import rightToolbar from "@/components/edit/right_toolbar.vue";
 
-export default {
-  name: "wandaEditer",
-  components: {
-    baseEditer,
-    baseEditertest,
-    baseEditerzy,
-    leftToolbar,
-    topToolbar,
-    rightToolbar
-  },
-  methods: {
-    // 左侧工具栏 点击事件
-    toolActionClick(name) {
-      this.$refs.graphy.changeStatus(name);
-    }
-  }
-};
+    export default {
+        name: "wandaEditer",
+        components: {
+            baseEditer,
+            baseEditertest,
+            baseEditerzy,
+            leftToolbar,
+            topToolbar,
+            rightToolbar
+        },
+        methods: {
+            // 左侧工具栏 点击事件
+            toolActionClick(name) {
+                this.$refs.graphy.changeStatus(name);
+            }
+        }
+    };
 </script>
 <style lang="less" scoped>
 .wandaEditer {
@@ -74,8 +74,9 @@ export default {
     }
     .left_toolbar {
       position: absolute;
-      left: 12px;
-      top: 12px;
+      height: 100%;
+      /*left: 12px;*/
+      /*top: 12px;*/
     }
   }
 }