Browse Source

feat:发布

YaolongHan 4 năm trước cách đây
mục cha
commit
95ad793716

+ 4 - 4
package.json

@@ -8,11 +8,11 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
-        "@saga-web/base": "2.1.19",
-        "@saga-web/big": "1.0.40",
-        "@saga-web/draw": "2.1.94",
+        "@saga-web/base": "2.1.20",
+        "@saga-web/big": "1.0.43",
+        "@saga-web/draw": "2.1.96",
         "@saga-web/feng-map": "1.0.11",
-        "@saga-web/graph": "2.1.82",
+        "@saga-web/graph": "2.1.86",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",
         "core-js": "^3.4.4",

+ 1 - 1
src/api/legendLibrary.js

@@ -80,7 +80,7 @@ export function getVisualization({
     return httputils.getJson(`/serve/topology-wanda/graphElement/type/search`, getParams)
 
 }
-// 图例分层展示 
+// 图例分层展示
 export function groupByCategory({
     getParams
 }) {

+ 1 - 1
src/api/public.js

@@ -39,5 +39,5 @@ export function updateRead({ postParams }) {
 
 //查询系统图展示所需数据 --平面图业务数据
 export function readGroup(postParams) {
-    return httputils.fetchJson(`/serve/topology-wanda/graph/read`, postParams)
+    return httputils.postJson(`/serve/topology-wanda/graph/read`, postParams)
 }

+ 1 - 1
src/components/Legend/src/legend.vue

@@ -156,7 +156,7 @@ export default {
             let categoryId = this.$cookie.get('categoryId')
             const { conf } = window.__systemConf,
                 { editerUrl } = conf
-            let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&fmapID=${this.fmapID}`
+            let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&FloorName=${this.$cookie.get('floorNow')}&fmapID=${this.fmapID}`
             let url = editerUrl + 'editer?' + encodeURIComponent(data)
             window.open(url, true)
         },

+ 269 - 244
src/components/floorMap/index.vue

@@ -1,268 +1,293 @@
 <!-- 底图 -->
 <template>
-    <div id='floor_base' v-loading='loading' ref='graphy'>
-        <div :id='`fengMap${id}`' class='fengMap'></div>
-        <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
-        <!-- 地图底部操作按钮 -->
-        <div class='strip-bottom'>
-            <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' ref='canvasFun'></canvasFun>
-        </div>
-        <room-box ref='boxRoom'></room-box>
+  <div id="floor_base" v-loading="loading" ref="graphy">
+    <div :id="`fengMap${id}`" class="fengMap"></div>
+    <canvas :id="`canvas${id}`" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
+    <!-- 地图底部操作按钮 -->
+    <div class="strip-bottom">
+      <canvasFun
+        @fit="fit"
+        @savePng="savePng"
+        @saveSvg="saveSvg"
+        @saveJson="saveJson"
+        @scale="scale"
+        ref="canvasFun"
+      ></canvasFun>
     </div>
+    <room-box ref="boxRoom"></room-box>
+  </div>
 </template>
 <script>
-import { SFengParser } from '@saga-web/feng-map'
-import { SFloorParser } from '@saga-web/big'
-import { FloorView } from '@/lib/FloorView'
-import { FloorScene } from '@/lib/FloorScene'
-import RoomBox from '@/views/room/index'
-import canvasFun from '@/components/floorMap/canvasFun'
-import { readGroup } from '@/api/public'
-import { STopologyParser } from '@/lib/parsers/STopologyParser'
-import { mapGetters, mapActions } from 'vuex'
-import { SImageItem } from '@saga-web/graph/lib'
+import { SFengParser } from "@saga-web/feng-map";
+import { SFloorParser } from "@saga-web/big";
+import { FloorView } from "@/lib/FloorView";
+import { FloorScene } from "@/lib/FloorScene";
+import RoomBox from "@/views/room/index";
+import canvasFun from "@/components/floorMap/canvasFun";
+import { readGroup } from "@/api/public";
+import { STopologyParser } from "@/lib/parsers/STopologyParser";
+import { mapGetters, mapActions } from "vuex";
+import { SImageItem } from "@saga-web/graph/lib";
 // import { uuid } from "@/components/mapClass/until";
-let fengmap = null
+let fengmap = null;
 
 export default {
-    data() {
-        return {
-            appName: '万达可视化系统',
-            key: '23f30a832a862c58637a4aadbf50a566',
-            mapServerURL: `/wdfn`,
-            canvasWidth: 1100,
-            canvasHeight: 800,
-            loading: false, // 限制重复查询
-            view: null,
-            urlMsg: {},
-            canvasID: 'canvas'
-            // fmapID:'1001012_42',
-        }
-    },
-    props: {
-        id: {
-            default: '1',
-            type: String
-        },
-        loadName: null,
-        type: null
+  data() {
+    return {
+      appName: "万达可视化系统",
+      key: "23f30a832a862c58637a4aadbf50a566",
+      mapServerURL: `/wdfn`,
+      canvasWidth: 1100,
+      canvasHeight: 800,
+      loading: false, // 限制重复查询
+      view: null,
+      urlMsg: {},
+      canvasID: "canvas"
+      // fmapID:'1001012_42',
+    };
+  },
+  props: {
+    id: {
+      default: "1",
+      type: String
     },
-    components: { RoomBox, canvasFun },
-    computed: {
-        ...mapGetters(['plazaId', 'fmapID'])
+    loadName: null,
+    type: null
+  },
+  components: { RoomBox, canvasFun },
+  computed: {
+    ...mapGetters(["plazaId", "fmapID"])
+  },
+  methods: {
+    ...mapActions(["getfmapID"]),
+    init(floorid) {
+      if (this.loading) {
+        //console.log('正在查询...')
+        return;
+      }
+      this.loading = true;
+      if (!this.fmapID) {
+        this.getfmapID().then(() => {
+          this.urlMsg.fmapID = this.fmapID;
+          this.getMap(floorid);
+        });
+        return;
+      }
+      this.getMap(floorid);
     },
-    methods: {
-        ...mapActions(['getfmapID']),
-        init(floorid) {
-            if (this.loading) {
-                //console.log('正在查询...')
-                return
-            }
-            this.loading = true
-            if (!this.fmapID) {
-                this.getfmapID().then(() => {
-                    this.urlMsg.fmapID = this.fmapID
-                    this.getMap(floorid)
-                })
-                return
-            }
-            this.getMap(floorid)
-        },
-        getMap(floorid) {
-            this.clearGraphy()
-            this.scene = new FloorScene()
-            this.scene.selectContainer.connect('listChange', this, this.listChange)
-            if (!fengmap || this.canvasID != `canvas${this.id}`) {
-                this.canvasID = `canvas${this.id}`
-                fengmap = new SFengParser(`fengMap${this.id}`, `${this.mapServerURL}/fmap/${this.fmapID}`, this.key, this.appName, null)
-                fengmap.loadMap(this.fmapID, () => {
-                    this.parserData(floorid)
-                })
-                // 获取主题数据
-                fengmap.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then(res => {
-                    //console.log('获取rf成功', res)
-                })
-                this.readGroup().then(data => {
-                    if (data.data.Data.length > 0) {
-                        //console.log(data.data.Data[0].ID)
-                        this.$cookie.set('graphId', data.data.Data[0].ID, 3)
-                    }
-                    const parserData = new STopologyParser(null)
-                    parserData.parseData(data.data.Data[0].Elements)
-                    // 多边形
-                    parserData.zoneLegendList.forEach(t => {
-                        this.scene.addItem(t)
-                    })
-                    // 增加文字
-                    parserData.textMarkerList.forEach(t => {
-                        this.scene.addItem(t)
-                    })
-                    // 增加图片
-                    parserData.imageMarkerList.forEach(t => {
-                        this.scene.addItem(t)
-                    })
-                    // 增加直线
-                    parserData.lineMarkerList.forEach(t => {
-                        this.scene.addItem(t)
-                    })
-                    // 增加图标类图例
-                    parserData.imageLegendList.forEach(t => {
-                        this.scene.addItem(t)
-                    })
-                    // 增加管线类
-                    // 增加图标类图例
-                    parserData.relationList.forEach(t => {
-                        this.scene.addItem(t)
-                    })
-                    this.view.fitSceneToView()
-                })
-            } else {
-                this.parserData(floorid)
-            }
-        },
-        parserData(floor) {
-            if (floor == 'g80') {
-                // 屋顶
-                if (fengmap.frImg) {
-                    let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`)
-                    this.scene.addItem(imgItem)
-                    this.view.scene = this.scene
-                    this.view.fitSceneToView()
-                    this.view.minScale = this.view.scale
-                    if (this.$refs.canvasFun) {
-                        this.$refs.canvasFun.everyScale = this.view.scale
-                    }
-                    this.loading = false
-                }
-            } else {
-                if (fengmap.gnameToGid[floor]) {
-                    fengmap.parseData(fengmap.gnameToGid[floor], res => {
-                        if (res.err) {
-                            //console.log(res.err)
-                            return
-                        }
-                        const fParser = new SFloorParser(null)
-                        fParser.parseData(res)
-                        fParser.spaceList.forEach(t => {
-                            t.selectable = true
-                            this.scene.addItem(t)
-                        })
-                        fParser.wallList.forEach(t => this.scene.addItem(t))
-                        fParser.virtualWallList.forEach(t => this.scene.addItem(t))
-                        fParser.doorList.forEach(t => this.scene.addItem(t))
-                        fParser.columnList.forEach(t => this.scene.addItem(t))
-                        fParser.casementList.forEach(t => this.scene.addItem(t))
-                        this.view.scene = this.scene
-                        this.view.fitSceneToView()
-                        this.view.minScale = this.view.scale
-                        if (this.$refs.canvasFun) {
-                            this.$refs.canvasFun.everyScale = this.view.scale
-                        }
-                        this.loading = false
-                        //console.log('success')
-                    })
-                } else {
-                    //console.log('楼层不正确')
-                }
-            }
-        },
-        clearGraphy() {
-            if (this.view) {
-                this.view.scene = null
-                return
+    getMap(floorid) {
+      this.clearGraphy();
+      this.scene = new FloorScene();
+      this.scene.selectContainer.connect("listChange", this, this.listChange);
+      if (!fengmap || this.canvasID != `canvas${this.id}`) {
+        this.canvasID = `canvas${this.id}`;
+        fengmap = new SFengParser(
+          `fengMap${this.id}`,
+          `${this.mapServerURL}/fmap/${this.fmapID}`,
+          this.key,
+          this.appName,
+          null
+        );
+        fengmap.loadMap(this.fmapID, () => {
+          this.parserData(floorid);
+          this.readGroup(floorid).then(data => {
+            if (data.Data.length > 0) {
+              //console.log(data.data.Data[0].ID)
+              this.$cookie.set("graphId", data.Data[0].ID, 3);
             }
-            this.view = new FloorView(`canvas${this.id}`)
-        },
-        listChange(item, ev) {
-            let name = ev[0][0].data.Name
-            if (name.slice(name.length - 2, name.length) == '机房') {
-                this.$refs.boxRoom.open({ name: name, type: this.type })
-            }
-        },
-        // 适配底图到窗口
-        fit() {
-            this.view.fitSceneToView()
-        },
-        // 保存为png
-        savePng() {
-            this.view.saveImage(`${this.loadName}.png`, 'png')
-            //console.log(`${this.loadName}.png`)
-        },
-        // 保存为svg
-        saveSvg() {
-            this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
-        },
-        // 保存为json
-        saveJson() {
-            this.view.saveFloorJson(`${this.loadName}.json`)
-        },
-        // 缩放
-        scale(val) {
-            if (!this.view) {
-                return
-            }
-            let scale = this.view.scale
-            console.log(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
-            this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
-        },
-        // 读取数据
-        readGroup() {
-            const data = {
-                // categoryId: this.urlMsg.categoryId,
-                categoryId: this.$cookie.get('categoryId'),
-                projectId: this.urlMsg.ProjectID
+            const parserData = new STopologyParser(null);
+            parserData.parseData(data.Data[0].Elements);
+            // 多边形
+            parserData.zoneLegendList.forEach(t => {
+              this.scene.addItem(t);
+            });
+            // 增加文字
+            parserData.textMarkerList.forEach(t => {
+              this.scene.addItem(t);
+            });
+            // 增加图片
+            parserData.imageMarkerList.forEach(t => {
+              this.scene.addItem(t);
+            });
+            // 增加直线
+            parserData.lineMarkerList.forEach(t => {
+              this.scene.addItem(t);
+            });
+            // 增加图标类图例
+            parserData.imageLegendList.forEach(t => {
+              this.scene.addItem(t);
+            });
+            // 增加管线类
+            // 增加图标类图例
+            parserData.relationList.forEach(t => {
+              this.scene.addItem(t);
+            });
+            this.view.fitSceneToView();
+          });
+        });
+        // 获取主题数据
+        fengmap
+          .loadTheme(
+            `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
+          )
+          .then(res => {
+            //console.log('获取rf成功', res)
+          });
+      } else {
+        this.parserData(floorid);
+      }
+    },
+    parserData(floor) {
+      if (floor == "g80") {
+        // 屋顶
+        if (fengmap.frImg) {
+          let imgItem = new SImageItem(
+            null,
+            `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`
+          );
+          this.scene.addItem(imgItem);
+          this.view.scene = this.scene;
+          this.view.fitSceneToView();
+          this.view.minScale = this.view.scale;
+          if (this.$refs.canvasFun) {
+            this.$refs.canvasFun.everyScale = this.view.scale;
+          }
+          this.loading = false;
+        }
+      } else {
+        if (fengmap.gnameToGid[floor]) {
+          fengmap.parseData(fengmap.gnameToGid[floor], res => {
+            if (res.err) {
+              //console.log(res.err)
+              return;
             }
-            return readGroup(data)
-        },
-        // 地图尺寸
-        mapSize() {
-            if (window.screen.height == '768') {
-                this.canvasWidth = this.$refs.graphy.offsetWidth
-                this.canvasHeight = this.$refs.graphy.offsetHeight - 100
-            } else {
-                this.canvasWidth = this.$refs.graphy.offsetWidth
-                this.canvasHeight = 900
+            const fParser = new SFloorParser(null);
+            fParser.parseData(res);
+            fParser.spaceList.forEach(t => {
+              t.selectable = true;
+              this.scene.addItem(t);
+            });
+            fParser.wallList.forEach(t => this.scene.addItem(t));
+            fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+            fParser.doorList.forEach(t => this.scene.addItem(t));
+            fParser.columnList.forEach(t => this.scene.addItem(t));
+            fParser.casementList.forEach(t => this.scene.addItem(t));
+            this.view.scene = this.scene;
+            this.view.fitSceneToView();
+            this.view.minScale = this.view.scale;
+            if (this.$refs.canvasFun) {
+              this.$refs.canvasFun.everyScale = this.view.scale;
             }
+            this.loading = false;
+            //console.log('success')
+          });
+        } else {
+          //console.log('楼层不正确')
         }
+      }
     },
-    watch: {
-        'view.scale': {
-            handler(n) {
-                if (this.$refs.canvasFun) {
-                    let s = (n * 10) / this.view.minScale
-                    this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
-                }
-            }
-        }
+    clearGraphy() {
+      if (this.view) {
+        this.view.scene = null;
+        return;
+      }
+      this.view = new FloorView(`canvas${this.id}`);
+    },
+    listChange(item, ev) {
+      let name = ev[0][0].data.Name;
+      if (name.slice(name.length - 2, name.length) == "机房") {
+        this.$refs.boxRoom.open({ name: name, type: this.type });
+      }
+    },
+    // 适配底图到窗口
+    fit() {
+      this.view.fitSceneToView();
+    },
+    // 保存为png
+    savePng() {
+      this.view.saveImage(`${this.loadName}.png`, "png");
+      //console.log(`${this.loadName}.png`)
+    },
+    // 保存为svg
+    saveSvg() {
+      this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800);
+    },
+    // 保存为json
+    saveJson() {
+      this.view.saveFloorJson(`${this.loadName}.json`);
     },
-    mounted() {
-        this.mapSize()
+    // 缩放
+    scale(val) {
+      if (!this.view) {
+        return;
+      }
+      let scale = this.view.scale;
+      console.log(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
+      this.view.scaleByPoint(
+        val / scale,
+        this.canvasWidth / 2,
+        this.canvasHeight / 2
+      );
     },
-    created() {
-        this.urlMsg = {
-            categoryId: this.$cookie.get('categoryId'),
-            ProjectID: this.plazaId,
-            BuildingID: '1',
-            FloorID: this.$cookie.get('floorMapId') || 'f1',
-            fmapID: this.fmapID
+    // 读取数据
+    readGroup(FloorID) {
+      const data = {
+        BuildingID: "1",
+        FloorID: FloorID,
+        categoryId: this.$cookie.get("categoryId"),
+        projectId: this.urlMsg.ProjectID
+      };
+      return readGroup(data);
+    },
+    // 地图尺寸
+    mapSize() {
+      if (window.screen.height == "768") {
+        this.canvasWidth = this.$refs.graphy.offsetWidth;
+        this.canvasHeight = this.$refs.graphy.offsetHeight - 100;
+      } else {
+        this.canvasWidth = this.$refs.graphy.offsetWidth;
+        this.canvasHeight = 900;
+      }
+    }
+  },
+  watch: {
+    "view.scale": {
+      handler(n) {
+        if (this.$refs.canvasFun) {
+          let s = (n * 10) / this.view.minScale;
+          this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
         }
+      }
     }
-}
+  },
+  mounted() {
+    this.mapSize();
+  },
+  created() {
+    this.urlMsg = {
+      categoryId: this.$cookie.get("categoryId"),
+      ProjectID: this.plazaId,
+      BuildingID: "1",
+      FloorID: this.$cookie.get("floorMapId") || "f1",
+      fmapID: this.fmapID
+    };
+  }
+};
 </script>
 <style lang="less" scoped>
 #floor_base {
-    position: relative;
-    .fengMap {
-        position: fixed;
-        width: 100px;
-        height: 100px;
-        z-index: -1;
-    }
-    .strip-bottom {
-        position: absolute;
-        right: 0;
-        bottom: 40px;
-        width: 100%;
-    }
+  position: relative;
+  .fengMap {
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+  .strip-bottom {
+    position: absolute;
+    right: 0;
+    bottom: 40px;
+    width: 100%;
+  }
 }
 </style>

+ 79 - 15
src/components/mapClass/EditScence.js

@@ -61,7 +61,7 @@ export class EditScence extends SGraphScene {
     ;
     set setlegend(obj) {
         this._legend = obj;
-        //console.log('aaaaaa', obj);
+        console.log('aaaaaa', obj);
     }
     /**
      * 监听变化
@@ -71,7 +71,6 @@ export class EditScence extends SGraphScene {
         let itemType = 'equipment';
         if (obj.itemList[0] instanceof STextMarkerItem) {
             itemType = 'baseText';
-            //console.log('obj.itemList[0]', itemType, obj.itemList[0]);
         }
         else if (obj.itemList[0] instanceof SImageMarkerItem) {
             itemType = 'baseImage';
@@ -82,6 +81,12 @@ export class EditScence extends SGraphScene {
         else if (obj.itemList[0] instanceof SZoneLegendItem) {
             itemType = 'Zone';
         }
+        else if (obj.itemList[0] instanceof SFHFQZoneLegendItem) {
+            itemType = 'Zone';
+        }
+        else if (obj.itemList[0] instanceof SSCPZZoneLegendItem) {
+            itemType = 'Zone';
+        }
         else if (obj.itemList[0] instanceof SImageLegendItem) {
             itemType = 'Image';
         }
@@ -159,7 +164,7 @@ export class EditScence extends SGraphScene {
             ID: uuid(),
             Name: this._legend.Name,
             GraphElementType: this._legend.Type,
-            Num: 0,
+            Num: 1,
             GraphElementId: this._legend.Id,
             AttachObjectIds: [],
             Type: "Line",
@@ -188,24 +193,38 @@ export class EditScence extends SGraphScene {
      * 增加多边形item lenged
      */
     addPolygonItem(event) {
+        const SubType = this._legend.SubType ? this._legend.SubType : '';
         const LegendData = {
             ID: uuid(),
             Name: this._legend.Name,
             GraphElementType: this._legend.Type,
-            Num: 0,
+            Num: 1,
             GraphElementId: this._legend.Id,
             AttachObjectIds: [],
             Type: "Zone",
             Pos: { X: event.x, Y: event.y },
             OutLine: [{ X: event.x, Y: event.y }],
+            SubType: SubType,
             Properties: {
                 StrokeColor: this._legend.Color,
                 FillColor: this._legend.FillColor,
                 LineDash: this._legend.LineDash,
                 LineWidth: this._legend.LineWidth,
+                font: 0,
+                color: '',
+                TextPos: { X: 0, Y: 0 }
             },
         };
-        const Polylines = new SZoneLegendItem(null, LegendData);
+        let Polylines = null;
+        if (SubType == "SCPZ") {
+            Polylines = new SSCPZZoneLegendItem(null, LegendData);
+        }
+        else if (SubType == "FHFQ") {
+            Polylines = new SFHFQZoneLegendItem(null, LegendData);
+        }
+        else {
+            Polylines = new SZoneLegendItem(null, LegendData);
+        }
         Polylines.selectable = true;
         //设置状态
         Polylines.status = SItemStatus.Create;
@@ -226,7 +245,7 @@ export class EditScence extends SGraphScene {
             ID: uuid(),
             /** 名称  */
             Name: '图片',
-            Num: 3,
+            Num: 1,
             /** 图标(Image),线类型(Line) */
             Type: "Image",
             /** 位置  */
@@ -281,12 +300,11 @@ export class EditScence extends SGraphScene {
      * 增加图标lenged图标
      */
     addIconItem(event) {
-        //console.log('this._legend.url', this._legend);
         const LegendData = {
             ID: uuid(),
             Name: this._legend.Name,
             GraphElementType: this._legend.Type,
-            Num: 0,
+            Num: 1,
             GraphElementId: this._legend.Id,
             AttachObjectIds: [],
             Pos: { X: event.x, Y: event.y },
@@ -294,7 +312,12 @@ export class EditScence extends SGraphScene {
             Rolate: { X: 0, Y: 0, Z: 0 },
             Size: { Width: 0, Height: 0 },
             Properties: {
-                Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url
+                Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
+                Num: 1,
+                sWidth: 0,
+                sHeight: 0,
+                font: 0,
+                color: '' //字体颜色
             },
         };
         const item = new SImageLegendItem(null, LegendData);
@@ -366,8 +389,13 @@ export class EditScence extends SGraphScene {
      */
     updatedBorderColor(color) {
         if (this.focusItem) {
-            let old = this.focusItem.strokeColor;
-            this.focusItem.strokeColor = color;
+            if (this.focusItem instanceof SZoneLegendItem || this.focusItem instanceof SSCPZZoneLegendItem || this.focusItem instanceof SFHFQZoneLegendItem) {
+                this.focusItem.strokeColor = new SColor(color);
+            }
+            else {
+                // let old = this.focusItem.strokeColor;
+                this.focusItem.strokeColor = color;
+            }
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
@@ -378,7 +406,12 @@ export class EditScence extends SGraphScene {
     updatedWidth(width) {
         if (this.focusItem) {
             // let old = this.focusItem.width;
-            this.focusItem.width = width;
+            if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
+                this.focusItem.sWidth = width;
+            }
+            else {
+                this.focusItem.width = width;
+            }
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
@@ -389,7 +422,12 @@ export class EditScence extends SGraphScene {
     updatedHeight(height) {
         if (this.focusItem) {
             // let old = this.focusItem.width;
-            this.focusItem.height = height;
+            if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
+                this.focusItem.sHeight = height;
+            }
+            else {
+                this.focusItem.height = height;
+            }
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
@@ -449,12 +487,38 @@ export class EditScence extends SGraphScene {
      * @param val string border类型
      */
     upadataLengedName(val) {
-        //console.log('xxxxxxx', val, this.focusItem);
         if (this.focusItem && this.focusItem.data) {
             this.focusItem.text = val;
         }
     }
     /**
+     * 更改item Num数量
+     * @param num number item数量 (只对icon设备类)
+     */
+    upadatImageNum(num) {
+        if (this.focusItem && this.focusItem.num) {
+            this.focusItem.num = num;
+        }
+    }
+    /**
+     * 更改item Num数量
+     * @param num number item数量 (只对icon设备类)
+     */
+    upadatfillColor(fillColor) {
+        if (this.focusItem && this.focusItem.fillColor) {
+            this.focusItem.fillColor = new SColor(fillColor);
+        }
+    }
+    /**
+   * 更改图例说明数量
+   * @param num number item数量 (只对icon设备类)
+   */
+    upadatitemExplain(itemExplain) {
+        if (this.focusItem) {
+            this.focusItem.itemExplain = itemExplain;
+        }
+    }
+    /**
      * 删除指定item
      */
     deleiteItem() {
@@ -498,7 +562,7 @@ export class EditScence extends SGraphScene {
      * 提取item
      */
     extractItem() {
-        //console.log(this);
+        console.log(this);
     }
     /**
      * 保存数据

+ 77 - 18
src/components/mapClass/EditScence.ts

@@ -9,7 +9,7 @@ import { SImgTextItem } from "@/lib/items/SImgTextItem";
 import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem"
 import { SPoint, SFont } from '@saga-web/draw/lib';
 import { Legend } from '@/lib/types/Legend';
-import { Relation } from '@/lib/types/Legend';
+import { Relation } from '@/lib/types/Relation';
 
 import { uuid } from "@/components/mapClass/until";
 import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
@@ -78,13 +78,16 @@ export class EditScence extends SGraphScene {
 
         if (obj.itemList[0] instanceof STextMarkerItem) {
             itemType = 'baseText'
-            console.log('obj.itemList[0]', itemType, obj.itemList[0])
         } else if (obj.itemList[0] instanceof SImageMarkerItem) {
             itemType = 'baseImage'
         } else if (obj.itemList[0] instanceof SLineMarkerItem) {
             itemType = 'baseLine'
         } else if (obj.itemList[0] instanceof SZoneLegendItem) {
             itemType = 'Zone'
+        } else if (obj.itemList[0] instanceof SFHFQZoneLegendItem) {
+            itemType = 'Zone'
+        } else if (obj.itemList[0] instanceof SSCPZZoneLegendItem) {
+            itemType = 'Zone'
         } else if (obj.itemList[0] instanceof SImageLegendItem) {
             itemType = 'Image'
         } else if (obj.itemList[0] instanceof TipelineItem) {
@@ -163,7 +166,7 @@ export class EditScence extends SGraphScene {
             ID: uuid(),
             Name: this._legend.Name,
             GraphElementType: this._legend.Type,
-            Num: 0,
+            Num: 1,
             GraphElementId: this._legend.Id,
             AttachObjectIds: [],
             Type: "Line",
@@ -194,25 +197,37 @@ export class EditScence extends SGraphScene {
      * 增加多边形item lenged
      */
     addPolygonItem(event: SMouseEvent): void {
+
+        const SubType = this._legend.SubType ? this._legend.SubType : ''
         const LegendData: Legend = {
             ID: uuid(),
             Name: this._legend.Name,
             GraphElementType: this._legend.Type,
-            Num: 0,
+            Num: 1,
             GraphElementId: this._legend.Id,
             AttachObjectIds: [],
             Type: "Zone",
             Pos: { X: event.x, Y: event.y },
-            OutLine:[{X:event.x, Y:event.y}],
+            OutLine: [{ X: event.x, Y: event.y }],
+            SubType: SubType,
             Properties: {
                 StrokeColor: this._legend.Color,
                 FillColor: this._legend.FillColor,
                 LineDash: this._legend.LineDash,
                 LineWidth: this._legend.LineWidth,
+                font: 0,
+                color: '',
+                TextPos: { X: 0, Y: 0 }
             },
         }
-
-        const Polylines = new SZoneLegendItem(null, LegendData);
+        let Polylines = null;
+        if (SubType == "SCPZ") {
+            Polylines = new SSCPZZoneLegendItem(null, LegendData);
+        } else if (SubType == "FHFQ") {
+            Polylines = new SFHFQZoneLegendItem(null, LegendData);
+        } else {
+            Polylines = new SZoneLegendItem(null, LegendData);
+        }
         Polylines.selectable = true;
         //设置状态
         Polylines.status = SItemStatus.Create;
@@ -234,7 +249,7 @@ export class EditScence extends SGraphScene {
             ID: uuid(),
             /** 名称  */
             Name: '图片',
-            Num: 3,
+            Num: 1,
             /** 图标(Image),线类型(Line) */
             Type: "Image",
             /** 位置  */
@@ -291,12 +306,11 @@ export class EditScence extends SGraphScene {
      * 增加图标lenged图标
      */
     addIconItem(event: SMouseEvent): void {
-        console.log('this._legend.url', this._legend)
         const LegendData: Legend = {
             ID: uuid(),
             Name: this._legend.Name,
             GraphElementType: this._legend.Type,
-            Num: 0,
+            Num: 1,
             GraphElementId: this._legend.Id,
             AttachObjectIds: [],
             Pos: { X: event.x, Y: event.y },
@@ -304,7 +318,12 @@ export class EditScence extends SGraphScene {
             Rolate: { X: 0, Y: 0, Z: 0 },
             Size: { Width: 0, Height: 0 },         // 大小
             Properties: {
-                Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url
+                Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
+                Num: 1, // 此num与信息工程化得num无关
+                sWidth: 0,  //icon 的宽
+                sHeight: 0,   //icon 的高
+                font: 0,    //font
+                color: ''  //字体颜色
             },
         }
         const item = new SImageLegendItem(null, LegendData);
@@ -384,8 +403,12 @@ export class EditScence extends SGraphScene {
      */
     updatedBorderColor(color: string): void {
         if (this.focusItem) {
-            let old = this.focusItem.strokeColor;
-            this.focusItem.strokeColor = color;
+            if (this.focusItem instanceof SZoneLegendItem || this.focusItem instanceof SSCPZZoneLegendItem || this.focusItem instanceof SFHFQZoneLegendItem) {
+                this.focusItem.strokeColor = new SColor(color)
+            } else {
+                // let old = this.focusItem.strokeColor;
+                this.focusItem.strokeColor = color;
+            }
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
@@ -398,7 +421,11 @@ export class EditScence extends SGraphScene {
     updatedWidth(width: number): void {
         if (this.focusItem) {
             // let old = this.focusItem.width;
-            this.focusItem.width = width;
+            if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
+                this.focusItem.sWidth = width;
+            } else {
+                this.focusItem.width = width;
+            }
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
@@ -408,9 +435,14 @@ export class EditScence extends SGraphScene {
     * @param height number 颜色
     */
     updatedHeight(height: number): void {
+
         if (this.focusItem) {
             // let old = this.focusItem.width;
-            this.focusItem.height = height;
+            if (this.focusItem.data && this.focusItem.data.GraphElementType && this.focusItem.data.GraphElementType == "Image") {
+                this.focusItem.sHeight = height;
+            } else {
+                this.focusItem.height = height;
+            }
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
@@ -474,9 +506,37 @@ export class EditScence extends SGraphScene {
      * @param val string border类型
      */
     upadataLengedName(val: string): void {
-        console.log('xxxxxxx',val,this.focusItem)
         if (this.focusItem && this.focusItem.data) {
-            this.focusItem.text= val
+            this.focusItem.text = val
+        }
+    }
+
+    /**
+     * 更改item Num数量
+     * @param num number item数量 (只对icon设备类)
+     */
+    upadatImageNum(num: number): void {
+        if (this.focusItem && this.focusItem.num) {
+            this.focusItem.num = num
+        }
+    }
+
+    /**
+     * 更改item Num数量
+     * @param num number item数量 (只对icon设备类)
+     */
+    upadatfillColor(fillColor: string): void {
+        if (this.focusItem && this.focusItem.fillColor) {
+            this.focusItem.fillColor = new SColor(fillColor)
+        }
+    }
+    /**
+   * 更改图例说明数量
+   * @param num number item数量 (只对icon设备类)
+   */
+    upadatitemExplain(itemExplain: string): void {
+        if (this.focusItem) {
+            this.focusItem.itemExplain = itemExplain
         }
     }
 
@@ -545,7 +605,6 @@ export class EditScence extends SGraphScene {
         this.Relations.forEach(e => {
             Relations.push(e.toData())
         });
-
         let element = {
             Nodes, Markers, Relations
         }

+ 26 - 2
src/components/mapClass/SPolygonItem.js

@@ -106,6 +106,7 @@ export class SPolygonItem extends SGraphItem {
     ;
     set strokeColor(v) {
         this._strokeColor = v;
+        this.update();
     }
     get fillColor() {
         return this._fillColor;
@@ -113,6 +114,7 @@ export class SPolygonItem extends SGraphItem {
     ;
     set fillColor(v) {
         this._fillColor = v;
+        this.update();
     }
     get lineWidth() {
         return this._lineWidth;
@@ -209,11 +211,22 @@ export class SPolygonItem extends SGraphItem {
      * @param pointList    绘制多边形数组
      */
     drawShowPolygon(painter, pointList) {
+        painter.save();
         painter.pen.lineCapStyle = SLineCapStyle.Square;
         painter.pen.color = this._strokeColor;
         painter.pen.lineWidth = painter.toPx(this._lineWidth);
         painter.brush.color = this._fillColor;
+        if (this.selected) {
+            painter.shadow.shadowBlur = 10;
+            painter.shadow.shadowColor = new SColor(`#00000060`);
+            painter.shadow.shadowOffsetX = 5;
+            painter.shadow.shadowOffsetY = 5;
+        }
+        else {
+            painter.shadow.shadowColor = SColor.Transparent;
+        }
         painter.drawPolygon([...pointList]);
+        painter.restore();
     }
     /**
      * 创建状态 --绘制多边形数组
@@ -230,10 +243,16 @@ export class SPolygonItem extends SGraphItem {
         }
         painter.drawPolyline(pointList);
         painter.pen.color = SColor.Transparent;
-        painter.brush.color = this._fillColor;
+        painter.brush.color = new SColor(this._fillColor.value + "80");
         painter.pen.lineWidth = painter.toPx(this._lineWidth);
         if (this.lastPoint) {
             painter.drawPolygon([...pointList, this.lastPoint]);
+            // 绘制顶点块
+            painter.pen.color = SColor.Black;
+            painter.brush.color = SColor.White;
+            pointList.forEach((item, index) => {
+                painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2));
+            });
         }
         else {
             painter.drawPolygon(pointList);
@@ -248,7 +267,11 @@ export class SPolygonItem extends SGraphItem {
      */
     drawEditPolygon(painter, pointList) {
         // 展示多边形
-        this.drawShowPolygon(painter, pointList);
+        painter.pen.lineCapStyle = SLineCapStyle.Square;
+        painter.pen.color = this._strokeColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
+        painter.brush.color = new SColor(this._fillColor.value + "80");
+        painter.drawPolygon([...pointList]);
         // 绘制顶点块
         painter.pen.color = SColor.Black;
         painter.brush.color = SColor.White;
@@ -383,6 +406,7 @@ export class SPolygonItem extends SGraphItem {
      * @return	boolean
      */
     onDoubleClick(event) {
+        console.log(event);
         // 如果位show状态 双击改对象则需改为编辑状态
         if (SItemStatus.Normal == this.status) {
             this.status = SItemStatus.Edit;

+ 28 - 4
src/components/mapClass/SPolygonItem.ts

@@ -83,7 +83,8 @@ export class SPolygonItem extends SGraphItem {
         return this._strokeColor
     };
     set strokeColor(v: SColor) {
-        this._strokeColor = v
+        this._strokeColor = v;
+        this.update()
     }
     /** 填充颜色 */
     _fillColor: SColor = new SColor("#1EE887");
@@ -91,7 +92,8 @@ export class SPolygonItem extends SGraphItem {
         return this._fillColor
     };
     set fillColor(v: SColor) {
-        this._fillColor = v
+        this._fillColor = v;
+        this.update()
     }
 
     /** 边框的宽 只可输入像素宽*/
@@ -217,11 +219,21 @@ export class SPolygonItem extends SGraphItem {
      * @param pointList    绘制多边形数组
      */
     protected drawShowPolygon(painter: SPainter, pointList: SPoint[]): void {
+        painter.save();
         painter.pen.lineCapStyle = SLineCapStyle.Square;
         painter.pen.color = this._strokeColor;
         painter.pen.lineWidth = painter.toPx(this._lineWidth);
         painter.brush.color = this._fillColor;
+        if (this.selected) {
+            painter.shadow.shadowBlur = 10;
+            painter.shadow.shadowColor = new SColor(`#00000060`);
+            painter.shadow.shadowOffsetX = 5;
+            painter.shadow.shadowOffsetY = 5;
+        } else {
+            painter.shadow.shadowColor = SColor.Transparent;
+        }
         painter.drawPolygon([...pointList]);
+        painter.restore();
     }
 
 
@@ -240,10 +252,17 @@ export class SPolygonItem extends SGraphItem {
         }
         painter.drawPolyline(pointList);
         painter.pen.color = SColor.Transparent;
-        painter.brush.color = this._fillColor;
+        painter.brush.color = new SColor(this._fillColor.value + "80");
         painter.pen.lineWidth = painter.toPx(this._lineWidth);
+
         if (this.lastPoint) {
             painter.drawPolygon([...pointList, this.lastPoint]);
+            // 绘制顶点块
+            painter.pen.color = SColor.Black;
+            painter.brush.color = SColor.White;
+            pointList.forEach((item, index) => {
+                painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2))
+            });
         } else {
             painter.drawPolygon(pointList);
         }
@@ -259,7 +278,11 @@ export class SPolygonItem extends SGraphItem {
      */
     protected drawEditPolygon(painter: SPainter, pointList: SPoint[]): void {
         // 展示多边形
-        this.drawShowPolygon(painter, pointList);
+        painter.pen.lineCapStyle = SLineCapStyle.Square;
+        painter.pen.color = this._strokeColor;
+        painter.pen.lineWidth = painter.toPx(this._lineWidth);
+        painter.brush.color = new SColor(this._fillColor.value + "80");
+        painter.drawPolygon([...pointList]);
         // 绘制顶点块
         painter.pen.color = SColor.Black;
         painter.brush.color = SColor.White;
@@ -419,6 +442,7 @@ export class SPolygonItem extends SGraphItem {
      * @return	boolean
      */
     onDoubleClick(event: SMouseEvent): boolean {
+        console.log(event)
         // 如果位show状态 双击改对象则需改为编辑状态
         if (SItemStatus.Normal == this.status) {
             this.status = SItemStatus.Edit;

+ 241 - 222
src/components/menuList.vue

@@ -1,129 +1,131 @@
 <template>
-    <!-- 顶部路由 -->
-    <div class='menu'>
-        <div class='home' @click='$emit("update:modelNum", 0)'>
-            <div class='downright'></div>
-            <div class='home-box'>
-                <img src='@/assets/imgs/logo.png' alt />
-                <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span>
-            </div>
-        </div>
-        <div>
-            <div
-                v-for='(item, index) in list'
-                :key='index'
-                :class='{ "is-active": item.state }'
-                @click='clickEventAcitve(item, index)'
-            >{{ item.name }}</div>
-        </div>
-        <div class='home-right'>
-            <span @click='dumpLegend'>
-                <img class='img1' src='../assets/imgs/scj.png' alt />
-                <span class='span1'>图例库</span>
-            </span>
+  <!-- 顶部路由 -->
+  <div class="menu">
+    <div class="home" @click="$emit('update:modelNum', 0)">
+      <div class="downright"></div>
+      <div class="home-box">
+        <img src="@/assets/imgs/logo.png" alt />
+        <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span>
+      </div>
+    </div>
+    <div>
+      <div
+        v-for="(item, index) in list"
+        :key="index"
+        :class="{ 'is-active': item.state }"
+        @click="clickEventAcitve(item, index)"
+      >{{ item.name }}</div>
+    </div>
+    <div class="home-right">
+      <span @click="dumpLegend">
+        <img class="img1" src="../assets/imgs/scj.png" alt />
+        <span class="span1">图例库</span>
+      </span>
 
-            <span class='span-out'>
-                <img class='img2' src='../assets/imgs/cgx.png' alt />
-                <span class='span2'>草稿箱</span>
-                <span class='span2-num' v-if='value<=99'>{{value}}</span>
-                <span class='span2-num' style='line-height:10px' v-else>...</span>
-            </span>
-            <span>
-                <img class='img3' src='../assets/imgs/clock.png' alt />
-                <span class='span3'>{{times}}</span>
-            </span>
-        </div>
+      <span @click="toDrafts" class="span-out">
+        <img class="img2" src="../assets/imgs/cgx.png" alt />
+        <span class="span2">草稿箱</span>
+        <span class="span2-num" v-if="value<=99">{{value}}</span>
+        <span class="span2-num" style="line-height:10px" v-else>...</span>
+      </span>
+      <span>
+        <img class="img3" src="../assets/imgs/clock.png" alt />
+        <span class="span3">{{times}}</span>
+      </span>
     </div>
+  </div>
 </template>
 
 <script>
-import { formatTime } from '@/utils/format.js'
-import { mapGetters } from 'vuex'
-import moment from 'moment'
+import { formatTime } from "@/utils/format.js";
+import { mapGetters } from "vuex";
+import moment from "moment";
 export default {
-    data() {
-        return {
-            state: '',
-            list: [
-                { name: '首页', state: false, route: 'first' },
-                { name: '项目概况', state: false, route: 'overview' },
-                { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
-                { name: '设备设施', state: false, route: 'equipment' }, //设备设施
-                { name: '其他事项', state: false, route: 'other' }, //其他
-                { name: '分析 | 报表', state: false, route: 'analysis' }
-            ],
-            times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
-                new Date().getHours()
-            )}:${formatTime(new Date().getMinutes())}`,
-            value: 190,
-            // 路由词典
-            dict: {
-                first: 1,
-                overview: 2,
-                floorFunc: 3,
-                equipment: 4,
-                other: 5,
-                analysis: 6
-            }
-        }
+  data() {
+    return {
+      state: "",
+      list: [
+        { name: "首页", state: false, route: "first" },
+        { name: "项目概况", state: false, route: "overview" },
+        { name: "楼层功能", state: false, route: "floorFunc" }, //楼层功能
+        { name: "设备设施", state: false, route: "equipment" }, //设备设施
+        { name: "其他事项", state: false, route: "other" }, //其他
+        { name: "分析 | 报表", state: false, route: "analysis" }
+      ],
+      times: `${new Date().getFullYear()}.${formatTime(
+        new Date().getMonth() + 1
+      )}.${formatTime(new Date().getDate())} ${formatTime(
+        new Date().getHours()
+      )}:${formatTime(new Date().getMinutes())}`,
+      value: 190,
+      // 路由词典
+      dict: {
+        first: 1,
+        overview: 2,
+        floorFunc: 3,
+        equipment: 4,
+        other: 5,
+        analysis: 6
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(["plazas", "plazaId"])
+  },
+  watch: {
+    $route: "handleRoute"
+  },
+  created() {
+    this.currentTime();
+  },
+  mounted() {
+    window.vm = this;
+    this.handleRoute(this.$route);
+  },
+  methods: {
+    currentTime() {
+      this.times = moment().format("YYYY.MM.DD HH:mm");
+      setTimeout(this.currentTime, 1000);
     },
-    computed: {
-        ...mapGetters(['plazas', 'plazaId'])
+    handleRoute(newRouter) {
+      if (!newRouter) {
+        return false;
+      }
+      const { path } = newRouter;
+      let router = path.split("home/")[1];
+      this.modelNum(this.dict[router]);
     },
-    watch: {
-        $route: 'handleRoute'
+    formatter(str, arrv) {
+      if (str && arrv) {
+        const Objs = arrv.find(e => e && e.plazaid == str);
+        return Objs ? Objs.plazaname : "--";
+      } else {
+        return "";
+      }
     },
-    created() {
-        this.currentTime()
+    modelNum(val) {
+      this.list = this.list.map((item, index) => {
+        if (val == index + 1) {
+          item.state = true;
+        } else {
+          item.state = false;
+        }
+        return item;
+      });
     },
-    mounted() {
-        window.vm = this
-        this.handleRoute(this.$route)
+    clickEventAcitve(item) {
+      if (item.name == "楼层功能") {
+        this.$cookie.set("categoryId", "LCGN", 3);
+      } else {
+        this.$cookie.set("categoryId", "GDXT", 3);
+      }
+      this.list.forEach(ele => {
+        ele.state = false;
+      });
+      item.state = true;
+      this.state = item.state;
+      this.$router.push({ path: `/home/${item.route}` });
     },
-    methods: {
-        currentTime() {
-            this.times = moment().format('YYYY.MM.DD HH:mm')
-            setTimeout(this.currentTime, 1000)
-        },
-        handleRoute(newRouter) {
-            if (!newRouter) {
-                return false
-            }
-            const { path } = newRouter
-            let router = path.split('home/')[1]
-            this.modelNum(this.dict[router])
-        },
-        formatter(str, arrv) {
-            if (str && arrv) {
-                const Objs = arrv.find(e => e && e.plazaid == str)
-                return Objs ? Objs.plazaname : '--'
-            } else {
-                return ''
-            }
-        },
-        modelNum(val) {
-            this.list = this.list.map((item, index) => {
-                if (val == index + 1) {
-                    item.state = true
-                } else {
-                    item.state = false
-                }
-                return item
-            })
-        },
-        clickEventAcitve(item) {
-            if (item.name == '楼层功能') {
-                this.$cookie.set('categoryId', 'LCGN', 3)
-            } else {
-                this.$cookie.set('categoryId', 'GDXT', 3)
-            }
-            this.list.forEach(ele => {
-                ele.state = false
-            })
-            item.state = true
-            this.state = item.state
-            this.$router.push({ path: `/home/${item.route}` })
-        },
 
         dumpLegend() {
             const { conf } = window.__systemConf,
@@ -131,128 +133,145 @@ export default {
             window.open(`${wandaBmGuideUrl}home/legendLibrary`, true)
         }
     },
-    components: {}
-}
+    //入草稿箱
+    toDrafts() {
+      const { conf } = window.__systemConf,
+        { editerUrl } = conf;
+      let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}`;
+      let url = editerUrl + "drafts?" + encodeURIComponent(data);
+      window.open(url, true);
+    }
+  },
+  components: {}
+};
 </script>
 
 <style scoped lang="less">
 .menu {
+  height: 48px;
+  min-width: 1366px;
+  color: #1f2429;
+  font-size: 16px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
+  overflow: hidden;
+  .home {
+    width: 265px;
     height: 48px;
-    min-width: 1366px;
-    color: #1f2429;
-    font-size: 16px;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
-    overflow: hidden;
-    .home {
-        width: 265px;
-        height: 48px;
-        // line-height: 48px;
-        text-align: center;
-        cursor: pointer;
-        color: #ffffff;
-        float: left;
-        margin-right: 83px;
-        // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
-        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
-        position: relative;
-        .downright {
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-left: 20px solid transparent;
-            border-bottom: 48px solid #fff;
-            right: 0px;
-            top: 0;
-        }
-        .home-box {
-            height: 100%;
-            display: flex;
-            align-items: center;
-            img {
-                width: 28px;
-                height: 28px;
-                margin-left: 20px;
-                margin-right: 24px;
-                margin-top: -3px;
-            }
-            span {
-                font-size: 20px;
-                font-family: MicrosoftYaHei;
-                height: 27px;
-                line-height: 27px;
-                margin-top: -4px;
-                &:after {
-                    content: '|';
-                    position: absolute;
-                    left: 60px;
-                }
-            }
-        }
+    // line-height: 48px;
+    text-align: center;
+    cursor: pointer;
+    color: #ffffff;
+    float: left;
+    margin-right: 83px;
+    // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+    background: linear-gradient(
+      180deg,
+      rgba(54, 156, 247, 1) 0%,
+      rgba(2, 91, 170, 1) 100%
+    );
+    position: relative;
+    .downright {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 20px solid transparent;
+      border-bottom: 48px solid #fff;
+      right: 0px;
+      top: 0;
     }
-    & > div:nth-of-type(2) {
-        & > div {
-            line-height: 48px;
-            text-align: center;
-            //background: url('../assets/images/topbar1.png') no-repeat;
-            float: left;
-            width: 80px;
-            height: 48px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .is-active {
-            color: #025baa;
-            font-weight: bolder;
-            border-bottom: 2px solid #025baa;
-            background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
+    .home-box {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      img {
+        width: 28px;
+        height: 28px;
+        margin-left: 20px;
+        margin-right: 24px;
+        margin-top: -3px;
+      }
+      span {
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+        height: 27px;
+        line-height: 27px;
+        margin-top: -4px;
+        &:after {
+          content: "|";
+          position: absolute;
+          left: 60px;
         }
+      }
     }
-    .home-right {
-        float: right;
-        margin-right: 20px;
-        line-height: 48px;
-        color: #646c73;
-        font-size: 14px;
-        cursor: pointer;
-        display: flex;
-        align-content: center;
-        img {
-            margin-top: -2px;
-        }
-        .span-out {
-            position: relative;
-            margin: 0 16px;
-            .span2-num {
-                position: absolute;
-                right: -5px;
-                top: 5px;
-                display: inline-block;
-                width: 18px;
-                height: 18px;
-                background: red;
-                border-radius: 90px;
-                font-size: 12px;
-                text-align: center;
-                line-height: 18px;
-                color: #ffffff;
-            }
-        }
+  }
+  & > div:nth-of-type(2) {
+    & > div {
+      line-height: 48px;
+      text-align: center;
+      //background: url('../assets/images/topbar1.png') no-repeat;
+      float: left;
+      width: 80px;
+      height: 48px;
+      cursor: pointer;
+      transition: all 0.2s;
     }
-    .span1,
-    .span2 {
-        padding: 0 6px 0 3px;
+    .is-active {
+      color: #025baa;
+      font-weight: bolder;
+      border-bottom: 2px solid #025baa;
+      background: linear-gradient(
+        180deg,
+        rgba(2, 91, 170, 0) 0%,
+        rgba(2, 91, 170, 0.2) 100%
+      );
     }
-
-    .span3 {
-        padding-left: 3px;
+  }
+  .home-right {
+    float: right;
+    margin-right: 20px;
+    line-height: 48px;
+    color: #646c73;
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-content: center;
+    img {
+      margin-top: -2px;
     }
+    .span-out {
+      position: relative;
+      margin: 0 16px;
+      .span2-num {
+        position: absolute;
+        right: -5px;
+        top: 5px;
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        background: red;
+        border-radius: 90px;
+        font-size: 12px;
+        text-align: center;
+        line-height: 18px;
+        color: #ffffff;
+      }
+    }
+  }
+  .span1,
+  .span2 {
+    padding: 0 6px 0 3px;
+  }
+
+  .span3 {
+    padding-left: 3px;
+  }
 }
 </style>
 <style lang="less">
 .menu {
-    .el-badge__content.is-fixed {
-        top: 10px;
-    }
+  .el-badge__content.is-fixed {
+    top: 10px;
+  }
 }
 </style>

+ 160 - 0
src/lib/items/SFHFQZoneLegendItem.js

@@ -0,0 +1,160 @@
+import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
+import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify } from "@/components/mapClass/until";
+import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+/**
+ *图例节点Item(区域类型 --防火分区)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SFHFQZoneLegendItem extends SPolygonItem {
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent, data) {
+        super(parent);
+        /** text item   */
+        this.textItem = new STextItem(this);
+        /** 是否显示文字  */
+        this._showText = true;
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        this.font = new SFont("sans-serif", 2);
+        if (data) {
+            this.setPointList = [];
+            let setPointList;
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    this.setPointList = data.OutLine;
+                }
+                else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y));
+                    });
+                    this.setPointList = setPointList;
+                }
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth;
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            if (data.Properties.color) {
+                this.color = data.Properties.color;
+            }
+            if (data.Properties.font) {
+                this.font = new SFont("sans-serif", data.Properties.font);
+            }
+            //    if( data.Properties.LineDash){
+            //     this.LineDash =this._legend.Properties.LineDash
+            //    }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated", this, () => {
+            // 计算文本位置
+            let x = this.getPointList.reduce((pre, cur, index, arr) => {
+                return pre + (cur.x / arr.length);
+            }, 0), y = this.getPointList.reduce((pre, cur, index, arr) => {
+                return pre + (cur.y / arr.length);
+            }, 0);
+            this.textItem.moveTo(x, y);
+        });
+    }
+    get text() {
+        return this.textItem.text;
+    }
+    set text(v) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color() {
+        return this.textItem.color;
+    }
+    set color(v) {
+        this.textItem.color = v;
+    }
+    get font() {
+        return this.textItem.font;
+    }
+    set font(v) {
+        this.textItem.font = v;
+    }
+    get status() {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        }
+        else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        }
+        else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        this.update();
+    }
+    ;
+    get showText() {
+        return this._showText;
+    }
+    set showText(v) {
+        if (v === this._showText) {
+            return;
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        }
+        else {
+            this.textItem.hide();
+        }
+    }
+    toData() {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Name = this.text;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.OutLine = this.getPointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            };
+        });
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
+        this.data.Properties.font = this.font.size;
+        this.data.Properties.color = this.color;
+        return this.data;
+    }
+} // Class SZoneLegendItem

+ 170 - 0
src/lib/items/SFHFQZoneLegendItem.ts

@@ -0,0 +1,170 @@
+
+import { SGraphItem } from "@saga-web/graph/lib";
+import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
+import { Legend } from '../types/Legend';
+import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify } from "@/components/mapClass/until"
+import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+/**
+ *图例节点Item(区域类型 --防火分区)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SFHFQZoneLegendItem extends SPolygonItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+
+    /** text item   */
+    textItem: STextItem = new STextItem(this);
+
+    get text(): string {
+        return this.textItem.text;
+    }
+    set text(v: string) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color(): string {
+        return this.textItem.color;
+    }
+    set color(v: string) {
+        this.textItem.color = v
+    }
+    get font(): SFont {
+        return this.textItem.font
+    }
+    set font(v: SFont) {
+        this.textItem.font = v
+    }
+
+    get status(): SItemStatus {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value: SItemStatus) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        } else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        } else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        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();
+        }
+    }
+
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        this.font = new SFont("sans-serif", 2);
+        if (data) {
+            this.setPointList = [];
+            let setPointList: SPoint[];
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    this.setPointList = data.OutLine;
+                } else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
+                    })
+                    this.setPointList = setPointList;
+                }
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            if (data.Properties.color) {
+                this.color = data.Properties.color
+            }
+            if (data.Properties.font) {
+                this.font =new SFont("sans-serif", data.Properties.font);
+            }
+            //    if( data.Properties.LineDash){
+            //     this.LineDash =this._legend.Properties.LineDash
+            //    }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated",this, () => {
+            // 计算文本位置
+            let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.x / arr.length)
+                            }, 0),
+                y: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.y / arr.length)
+                            }, 0);
+            this.textItem.moveTo(x, y);
+        })
+    }
+
+    toData(): any {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Name = this.text;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.OutLine = this.getPointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            }
+        });
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.font =  this.font.size;
+        this.data.Properties.color =  this.color;
+        return this.data;
+    }
+
+} // Class SZoneLegendItem

+ 31 - 7
src/lib/items/SImageLegendItem.js

@@ -1,5 +1,6 @@
 import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem';
 import { ItemOrder } from '@saga-web/big/lib';
+import { SFont } from '@saga-web/draw/lib';
 /**
  * 图例节点Item(图标类型)
  *
@@ -15,7 +16,7 @@ export class SImageLegendItem extends SIconTextItem {
     constructor(parent, data) {
         super(parent);
         /** 图例数量 */
-        this._num = 0;
+        this._num = 1;
         this.zOrder = ItemOrder.markOrder;
         this.data = data;
         this.id = data.ID;
@@ -28,27 +29,50 @@ export class SImageLegendItem extends SIconTextItem {
             this.width = data.Size.Width;
             this.height = data.Size.Height;
         }
-        if (data.Properties && data.Properties.Text) {
-            this.text = `${data.Properties.Text}${data.Num ? ` × ${data.Num}` : ''}`;
+        if (data.Num) {
+            this.text = `${data.Name}${data.Num > 1 ? ` × ${data.Num}` : ''}`;
         }
         if (data.Properties && data.Properties.Url) {
             this.img.url = data.Properties.Url;
         }
+        if (data.Properties && data.Properties.sWidth) {
+            this.sWidth = data.Properties.sWidth;
+        }
+        if (data.Properties && data.Properties.sHeight) {
+            this.sHeight = data.Properties.sHeight;
+        }
+        if (data.Properties && data.Properties.font) {
+            this.font = new SFont("sans-serif", data.Properties.font);
+        }
+        if (data.Properties && data.Properties.color) {
+            this.color = data.Properties.color;
+        }
     }
     get num() {
         return this._num;
     }
     set num(v) {
-        this._num = v;
-        this.data.Num = v;
+        if (v) {
+            this._num = v;
+            this.data.Num = v;
+        }
+        else {
+            this._num = 1;
+            this.data.Num = 1;
+        }
+        this.data.Properties.Num = this._num;
+        this.text = `${this.data.Name}${this.data.Num > 1 ? ` × ${this.data.Num}` : ''}`;
         this.update();
     }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Size = { Width: this.width, Height: this.height };
-        this.data.Num = this.num;
-        this.data.Properties.Text = this.text;
+        this.data.Name = this.name;
         this.data.Properties.Url = this.img.url;
+        this.data.Properties.sWidth = this.sWidth;
+        this.data.Properties.sHeight = this.sHeight;
+        this.data.Properties.font = this.font.size;
+        this.data.Properties.color = this.color;
         return this.data;
     }
 } // Class SImageLegendItem

+ 31 - 8
src/lib/items/SImageLegendItem.ts

@@ -3,7 +3,7 @@ import { SGraphItem } from "@saga-web/graph/lib";
 import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem';
 import { Legend } from '../types/Legend';
 import { ItemOrder } from '@saga-web/big/lib';
-
+import { SFont } from '@saga-web/draw/lib';
 /**
  * 图例节点Item(图标类型)
  *
@@ -13,13 +13,20 @@ export class SImageLegendItem extends SIconTextItem {
     /** 图例节点对象数据 */
     data: Legend;
     /** 图例数量 */
-    _num: number = 0;
+    _num: number = 1;
     get num(): number {
         return this._num;
     }
     set num(v: number) {
-        this._num = v;
-        this.data.Num = v;
+        if (v) {
+            this._num = v;
+            this.data.Num = v;
+        } else {
+            this._num = 1;
+            this.data.Num = 1;
+        }
+        this.data.Properties.Num = this._num;
+        this.text = `${this.data.Name}${this.data.Num > 1?` × ${this.data.Num}`:''}`;
         this.update();
     }
 
@@ -43,20 +50,36 @@ export class SImageLegendItem extends SIconTextItem {
             this.width = data.Size.Width;
             this.height = data.Size.Height;
         }
-        if (data.Properties && data.Properties.Text) {
-            this.text = `${data.Properties.Text}${data.Num?` × ${data.Num}`:''}`;
+        if (data.Num) {
+            this.text = `${data.Name}${data.Num > 1?` × ${data.Num}`:''}`;
         }
         if (data.Properties && data.Properties.Url) {
             this.img.url = data.Properties.Url;
         }
+        if (data.Properties && data.Properties.sWidth) {
+            this.sWidth = data.Properties.sWidth;
+        }
+        if (data.Properties && data.Properties.sHeight) {
+            this.sHeight = data.Properties.sHeight;
+        }
+        if (data.Properties && data.Properties.font) {
+            this.font = new SFont("sans-serif", data.Properties.font);
+        }
+        if (data.Properties && data.Properties.color) {
+            this.color = data.Properties.color;
+        }
     }
 
     toData(): Legend {
         this.data.Pos = {X: this.x, Y: this.y};
         this.data.Size = {Width: this.width, Height: this.height};
-        this.data.Num = this.num;
-        this.data.Properties.Text = this.text;
+        this.data.Name = this.name;
         this.data.Properties.Url = this.img.url;
+        this.data.Properties.sWidth = this.sWidth;
+        this.data.Properties.sHeight = this.sHeight;
+        this.data.Properties.font = this.font.size;
+        this.data.Properties.color = this.color;
+
         return this.data;
     }
 } // Class SImageLegendItem

+ 1 - 1
src/lib/items/SImageMarkerItem.ts

@@ -1,5 +1,5 @@
 
-import { SGraphItem, SImageItem, SImageShowType } from "@saga-web/graph/lib";
+import { SGraphItem, SImageItem } from "@saga-web/graph/lib";
 import { SPainter } from "@saga-web/draw";
 import { Marker } from '../types/Marker';
 import { ItemOrder } from '@saga-web/big/lib';

+ 1 - 1
src/lib/items/SLineMarkerItem.js

@@ -1,5 +1,5 @@
 import { SPoint } from "@saga-web/draw/lib";
-import { SLineItem, ItemOrder } from '@saga-web/big/lib';
+import { ItemOrder, SLineItem } from '@saga-web/big/lib';
 /**
  * 标识对象Item(线类型)
  *

+ 1 - 1
src/lib/items/SLineMarkerItem.ts

@@ -1,7 +1,7 @@
 
 import { SGraphItem } from "@saga-web/graph/lib";
 import { SPoint } from "@saga-web/draw/lib";
-import { SLineItem, ItemOrder } from '@saga-web/big/lib';
+import { ItemOrder, SLineItem } from '@saga-web/big/lib';
 import { Marker } from '../types/Marker';
 
 /**

+ 167 - 0
src/lib/items/SSCPZZoneLegendItem.js

@@ -0,0 +1,167 @@
+import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
+import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify } from "@/components/mapClass/until";
+import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+/**
+ * 图例节点Item(区域类型 --石材铺装)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SSCPZZoneLegendItem extends SPolygonItem {
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent, data) {
+        super(parent);
+        /** text item   */
+        this.textItem = new STextItem(this);
+        /** 是否显示文字  */
+        this._showText = true;
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        this.font = new SFont("sans-serif", 2);
+        if (data) {
+            this.setPointList = [];
+            let setPointList;
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    this.setPointList = data.OutLine;
+                }
+                else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y));
+                    });
+                    this.setPointList = setPointList;
+                }
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth;
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            if (data.Properties.color) {
+                this.color = data.Properties.color;
+            }
+            if (data.Properties.font) {
+                this.font = new SFont("sans-serif", data.Properties.font);
+            }
+            //    if( data.Properties.LineDash){
+            //     this.LineDash =this._legend.Properties.LineDash
+            //    }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated", this, () => {
+            // 计算文本位置
+            let x = this.getPointList.reduce((pre, cur, index, arr) => {
+                return pre + (cur.x / arr.length);
+            }, 0), y = this.getPointList.reduce((pre, cur, index, arr) => {
+                return pre + (cur.y / arr.length);
+            }, 0);
+            this.textItem.moveTo(x, y);
+        });
+    }
+    get text() {
+        return this.textItem.text;
+    }
+    set text(v) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color() {
+        return this.textItem.color;
+    }
+    set color(v) {
+        this.textItem.color = v;
+    }
+    get font() {
+        return this.textItem.font;
+    }
+    set font(v) {
+        this.textItem.font = v;
+    }
+    get status() {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        }
+        else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        }
+        else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        this.update();
+    }
+    ;
+    get showText() {
+        return this._showText;
+    }
+    set showText(v) {
+        if (v === this._showText) {
+            return;
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        }
+        else {
+            this.textItem.hide();
+        }
+    }
+    /** 图例说明  */
+    set itemExplain(v) {
+        this.data.Properties.ItemExplain = v;
+    }
+    get itemExplain() {
+        return this.data.Properties.ItemExplain;
+    }
+    toData() {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Name = this.text;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.OutLine = this.getPointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            };
+        });
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
+        this.data.Properties.font = this.font.size;
+        this.data.Properties.color = this.color;
+        return this.data;
+    }
+} // Class SZoneLegendItem

+ 176 - 0
src/lib/items/SSCPZZoneLegendItem.ts

@@ -0,0 +1,176 @@
+
+import { SGraphItem } from "@saga-web/graph/lib";
+import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
+import { Legend } from '../types/Legend';
+import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify } from "@/components/mapClass/until"
+import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+/**
+ * 图例节点Item(区域类型 --石材铺装)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SSCPZZoneLegendItem extends SPolygonItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+
+    /** text item   */
+    textItem: STextItem = new STextItem(this);
+
+    get text(): string {
+        return this.textItem.text;
+    }
+    set text(v: string) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color(): string {
+        return this.textItem.color;
+    }
+    set color(v: string) {
+        this.textItem.color = v
+    }
+    get font(): SFont {
+        return this.textItem.font
+    }
+    set font(v: SFont) {
+        this.textItem.font = v
+    }
+
+    get status(): SItemStatus {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value: SItemStatus) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        } else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        } else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        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();
+        }
+    }
+    /** 图例说明  */
+    set itemExplain(v:string){
+      this.data.Properties.ItemExplain = v
+    }
+    get itemExplain():string{
+        return this.data.Properties.ItemExplain
+    }
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        this.font = new SFont("sans-serif", 2);
+        if (data) {
+            this.setPointList = [];
+            let setPointList: SPoint[];
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    this.setPointList = data.OutLine;
+                } else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
+                    })
+                    this.setPointList = setPointList;
+                }
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            if (data.Properties.color) {
+                this.color = data.Properties.color
+            }
+            if (data.Properties.font) {
+                this.font =new SFont("sans-serif", data.Properties.font);
+            }
+            //    if( data.Properties.LineDash){
+            //     this.LineDash =this._legend.Properties.LineDash
+            //    }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated",this, () => {
+            // 计算文本位置
+            let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.x / arr.length)
+                            }, 0),
+                y: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.y / arr.length)
+                            }, 0);
+            this.textItem.moveTo(x, y);
+        })
+    }
+
+    toData(): any {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Name = this.text;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.OutLine = this.getPointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            }
+        });
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.font =  this.font.size;
+        this.data.Properties.color =  this.color;
+        return this.data;
+    }
+
+} // Class SZoneLegendItem

+ 17 - 4
src/lib/items/STextMarkerItem.js

@@ -1,6 +1,5 @@
-import { STextItem } from "@saga-web/graph/lib";
+import { STextItem, SLineStyle } from "@saga-web/graph/lib";
 import { SColor, SFont } from "@saga-web/draw";
-import { SLineStyle } from '../enums/SLineStyle';
 import { ItemOrder } from '@saga-web/big/lib';
 /**
  * 标识对象Item(文本类型)
@@ -19,7 +18,7 @@ export class STextMarkerItem extends STextItem {
         /** 边框宽度 */
         this._lineWidth = 1;
         /** 边框样式    */
-        this._borderStyle = SLineStyle.Soild;
+        this._borderStyle = SLineStyle.None;
         this.zOrder = ItemOrder.textOrder;
         this.data = data;
         this.id = data.ID;
@@ -75,18 +74,32 @@ export class STextMarkerItem extends STextItem {
         // 绘制文本
         painter.brush.color = new SColor(this.color);
         painter.font = this.font;
+        this.drawFormatText(painter);
+        if (this.selected) {
+            this.borderStyle = SLineStyle.Dashed;
+        }
+        else {
+            this.borderStyle = SLineStyle.None;
+        }
         if (this.borderStyle == SLineStyle.Dashed) {
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth * 3),
                 painter.toPx(this.lineWidth * 7)
             ];
+            painter.brush.color = SColor.Transparent;
+            painter.drawRect(this.boundingRect());
         }
         else if (this.borderStyle == SLineStyle.Dotted) {
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth),
                 painter.toPx(this.lineWidth)
             ];
+            painter.brush.color = SColor.Transparent;
+            painter.drawRect(this.boundingRect());
+        }
+        else if (this.borderStyle == SLineStyle.Soild) {
+            painter.brush.color = SColor.Transparent;
+            painter.drawRect(this.boundingRect());
         }
-        this.drawFormatText(painter);
     } // Function onDraw()
 } // Class STextMarkerItem

+ 15 - 5
src/lib/items/STextMarkerItem.ts

@@ -1,7 +1,6 @@
-import { SGraphItem, STextItem } from "@saga-web/graph/lib";
+import { SGraphItem, STextItem, SLineStyle } from "@saga-web/graph/lib";
 import { SPainter, SColor,SFont } from "@saga-web/draw";
 import { Marker } from '../types/Marker';
-import { SLineStyle } from '../enums/SLineStyle';
 import { ItemOrder } from '@saga-web/big/lib';
 
 /**
@@ -24,7 +23,7 @@ export class STextMarkerItem extends STextItem {
     }
 
     /** 边框样式    */
-    private _borderStyle: SLineStyle = SLineStyle.Soild;
+    private _borderStyle: SLineStyle = SLineStyle.None;
     get borderStyle(): SLineStyle {
         return this._borderStyle;
     }
@@ -32,7 +31,6 @@ export class STextMarkerItem extends STextItem {
         this._borderStyle = v;
         this.update();
     }
-
     /**
      * 构造函数
      *
@@ -83,17 +81,29 @@ export class STextMarkerItem extends STextItem {
         // 绘制文本
         painter.brush.color = new SColor(this.color);
         painter.font = this.font;
+        this.drawFormatText(painter);
+        if (this.selected) {
+            this.borderStyle = SLineStyle.Dashed;
+        } else {
+            this.borderStyle = SLineStyle.None;
+        }
         if (this.borderStyle == SLineStyle.Dashed) {
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth * 3),
                 painter.toPx(this.lineWidth * 7)
             ];
+            painter.brush.color = SColor.Transparent;
+            painter.drawRect(this.boundingRect());
         } else if (this.borderStyle == SLineStyle.Dotted) {
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth),
                 painter.toPx(this.lineWidth)
             ];
+            painter.brush.color = SColor.Transparent;
+            painter.drawRect(this.boundingRect());
+        } else if (this.borderStyle == SLineStyle.Soild) {
+            painter.brush.color = SColor.Transparent;
+            painter.drawRect(this.boundingRect());
         }
-        this.drawFormatText(painter);
     } // Function onDraw()
 } // Class STextMarkerItem

+ 14 - 14
src/lib/items/SZoneLegendItem.js

@@ -1,8 +1,7 @@
-import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
 import { SColor, SFont, SPoint } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until";
-import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
 /**
  * 图例节点Item(区域类型)
  *
@@ -31,15 +30,10 @@ export class SZoneLegendItem extends SPolygonItem {
             this.setPointList = [];
             let setPointList;
             if (data.OutLine) {
-                if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine;
-                }
-                else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y));
-                    });
-                    this.setPointList = setPointList;
-                }
+                setPointList = data.OutLine.map(i => {
+                    return (new SPoint(i.X, i.Y));
+                });
+                this.setPointList = setPointList;
             }
             // 设置线宽
             if (data.Properties.LineWidth) {
@@ -54,6 +48,12 @@ export class SZoneLegendItem extends SPolygonItem {
             if (data.Properties.TextPos) {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
+            if (data.Properties.color) {
+                this.color = data.Properties.color;
+            }
+            if (data.Properties.font) {
+                this.font = new SFont("sans-serif", data.Properties.font);
+            }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
@@ -117,8 +117,6 @@ export class SZoneLegendItem extends SPolygonItem {
             this.textItem.moveable = false;
         }
         this.update();
-        console.log("多边形item", this);
-        console.log("文本item", this.textItem);
     }
     ;
     get showText() {
@@ -138,7 +136,7 @@ export class SZoneLegendItem extends SPolygonItem {
     }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Name = this.text;
+        this.data.Name = this.name;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
         this.data.Properties.LineWidth = this.lineWidth;
@@ -149,6 +147,8 @@ export class SZoneLegendItem extends SPolygonItem {
             };
         });
         this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
+        this.data.Properties.font = this.font.size;
+        this.data.Properties.color = this.color;
         return this.data;
     }
 } // Class SZoneLegendItem

+ 15 - 13
src/lib/items/SZoneLegendItem.ts

@@ -1,11 +1,10 @@
 
 import { SGraphItem } from "@saga-web/graph/lib";
-import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
 import { Legend } from '../types/Legend';
 import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until"
-import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
 /**
  * 图例节点Item(区域类型)
  *
@@ -66,8 +65,6 @@ export class SZoneLegendItem extends SPolygonItem {
             this.textItem.moveable = false;
         }
         this.update();
-        console.log("多边形item", this);
-        console.log("文本item", this.textItem);
     };
 
     /** 是否显示文字  */
@@ -87,6 +84,7 @@ export class SZoneLegendItem extends SPolygonItem {
         }
     }
 
+
     /**
      * 构造函数
      *
@@ -105,14 +103,10 @@ export class SZoneLegendItem extends SPolygonItem {
             this.setPointList = [];
             let setPointList: SPoint[];
             if (data.OutLine) {
-                if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine;
-                } else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y))
-                    })
-                    this.setPointList = setPointList;
-                }
+                setPointList = data.OutLine.map(i => {
+                    return (new SPoint(i.X, i.Y))
+                })
+                this.setPointList = setPointList;
             }
             // 设置线宽
             if (data.Properties.LineWidth) {
@@ -127,6 +121,12 @@ export class SZoneLegendItem extends SPolygonItem {
             if (data.Properties.TextPos) {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
+            if (data.Properties.color) {
+                this.color = data.Properties.color
+            }
+            if (data.Properties.font) {
+                this.font =new SFont("sans-serif", data.Properties.font);
+            }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
@@ -146,7 +146,7 @@ export class SZoneLegendItem extends SPolygonItem {
 
     toData(): any {
         this.data.Pos = {X: this.x, Y: this.y};
-        this.data.Name = this.text;
+        this.data.Name = this.name;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
         this.data.Properties.LineWidth = this.lineWidth;
@@ -157,6 +157,8 @@ export class SZoneLegendItem extends SPolygonItem {
             }
         });
         this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.font =  this.font.size;
+        this.data.Properties.color =  this.color;
         return this.data;
     }
 

+ 2 - 8
src/lib/parsers/STopologyParser.js

@@ -63,14 +63,6 @@ export class STopologyParser extends SParser {
             let item = new SNoneLegendItem(null, t);
             this.noneLegendList.push(item);
         }
-        else if (t.GraphElementType == 'Line') {
-            let item = new TipelineItem(null, t);
-            item.selectable = true;
-            item.status = 0;
-            item.zOrder == ItemOrder.polylineOrder;
-            alert(123);
-            this.relationList.push(item);
-        }
         else if (t.GraphElementType == "Zone") {
             let item = new SZoneLegendItem(null, t);
             item.selectable = true;
@@ -115,6 +107,8 @@ export class STopologyParser extends SParser {
      * */
     addRelation(t) {
         let item = new TipelineItem(null, t);
+        item.selectable = true;
+        item.zOrder == ItemOrder.polylineOrder;
         this.relationList.push(item);
     } // Function addRelation()
 } // class STopologyParser

+ 60 - 64
src/lib/parsers/STopologyParser.ts

@@ -1,43 +1,43 @@
-import { ElementData } from '../types/ElementData'
-import { Legend } from '../types/Legend'
-import { Marker } from '../types/Marker'
-import { Relation } from '../types/Relation'
-import { SGraphElementType } from '../enums/SGraphElementType'
-import { SMarkerType } from '../enums/SMarkerType'
-import { SParser, SRelation } from '@saga-web/big/lib'
-import { SNoneLegendItem } from '../items/SNoneLegendItem'
-import { SLineLegendItem } from '../items/SLineLegendItem'
-import { SZoneLegendItem } from '../items/SZoneLegendItem'
-import { SImageLegendItem } from '../items/SImageLegendItem'
-import { SImageMarkerItem } from '../items/SImageMarkerItem'
-import { SLineMarkerItem } from '../items/SLineMarkerItem'
-import { STextMarkerItem } from '../items/STextMarkerItem'
-import { TipelineItem } from '../items/TipelineItem'
-import { ItemOrder } from '@saga-web/big'
-import { SItemStatus } from '@saga-web/big'
+import { ElementData } from "../types/ElementData";
+import { Legend } from "../types/Legend";
+import { Marker } from "../types/Marker";
+import { Relation } from "../types/Relation";
+import { SGraphElementType } from "../enums/SGraphElementType";
+import { SMarkerType } from "../enums/SMarkerType";
+import { SParser, SRelation } from '@saga-web/big/lib';
+import { SNoneLegendItem } from '../items/SNoneLegendItem';
+import { SLineLegendItem } from '../items/SLineLegendItem';
+import { SZoneLegendItem } from '../items/SZoneLegendItem';
+import { SImageLegendItem } from '../items/SImageLegendItem';
+import { SImageMarkerItem } from '../items/SImageMarkerItem';
+import { SLineMarkerItem } from '../items/SLineMarkerItem';
+import { STextMarkerItem } from '../items/STextMarkerItem';
+import { TipelineItem } from '../items/TipelineItem';
+import { ItemOrder } from "@saga-web/big";
+import { SItemStatus } from "@saga-web/big";
 /**
  * 拓扑图信息解析器
  *
  */
 export class STopologyParser extends SParser {
     /** 图例list(非图例类型)   */
-    noneLegendList: SNoneLegendItem[] = []
+    noneLegendList: SNoneLegendItem[] = [];
     /** 图例list(线类型)   */
-    lineLegendList: SLineLegendItem[] = []
+    lineLegendList: SLineLegendItem[] = [];
     /** 图例list(区域类型)   */
-    zoneLegendList: SZoneLegendItem[] = []
+    zoneLegendList: SZoneLegendItem[] = [];
     /** 图例list(图标类型)   */
-    imageLegendList: SImageLegendItem[] = []
+    imageLegendList: SImageLegendItem[] = [];
 
     /** 标识list(图类型)   */
-    imageMarkerList: SImageMarkerItem[] = []
+    imageMarkerList: SImageMarkerItem[] = [];
     /** 标识list(线类型)   */
-    lineMarkerList: SLineMarkerItem[] = []
+    lineMarkerList: SLineMarkerItem[] = [];
     /** 标识list(文本类型)   */
-    textMarkerList: STextMarkerItem[] = []
+    textMarkerList: STextMarkerItem[] = [];
 
     /** 管线关系对象关系list   */
-    relationList: SRelation[] = []
+    relationList: SRelation[] = [];
 
     /**
      * 解析数据
@@ -47,18 +47,18 @@ export class STopologyParser extends SParser {
     parseData(data: ElementData): void {
         if (data.Nodes) {
             data.Nodes.forEach((t: Legend): void => {
-                this.addLegend(t)
-            })
+                this.addLegend(t);
+            });
         }
         if (data.Markers) {
             data.Markers.forEach((t: Marker): void => {
-                this.addMarker(t)
-            })
+                this.addMarker(t);
+            });
         }
         if (data.Relations) {
             data.Relations.forEach((t: Relation): void => {
-                this.addRelation(t)
-            })
+                this.addRelation(t);
+            });
         }
     } // Function parseData()
 
@@ -69,23 +69,17 @@ export class STopologyParser extends SParser {
      * */
     private addLegend(t: Legend): void {
         if (t.GraphElementType == 'None') {
-            let item = new SNoneLegendItem(null, t)
-            this.noneLegendList.push(item)
-        } else if (t.GraphElementType == 'Line') {
-            let item = new TipelineItem(null, t)
-            item.selectable = true
-            item.status = 0
-            item.zOrder == ItemOrder.polylineOrder
-            this.relationList.push(item)
-        } else if (t.GraphElementType == 'Zone') {
-            let item = new SZoneLegendItem(null, t)
-            item.selectable = true
-            item.zOrder == ItemOrder.polygonOrder
-            this.zoneLegendList.push(item)
+            let item = new SNoneLegendItem(null, t);
+            this.noneLegendList.push(item);
+        } else if (t.GraphElementType == "Zone") {
+            let item = new SZoneLegendItem(null, t);
+            item.selectable = true;
+            item.zOrder == ItemOrder.polygonOrder;
+            this.zoneLegendList.push(item);
         } else if (t.GraphElementType == 'Image') {
-            let item = new SImageLegendItem(null, t)
-            item.selectable = true
-            this.imageLegendList.push(item)
+            let item = new SImageLegendItem(null, t);
+            item.selectable = true;
+            this.imageLegendList.push(item);
         }
     } // Function addNode()
 
@@ -95,21 +89,21 @@ export class STopologyParser extends SParser {
      * @param   t       标识对象数据
      * */
     private addMarker(t: Marker): void {
-        if (t.Type == 'Image') {
-            let item = new SImageMarkerItem(null, t)
-            this.imageMarkerList.push(item)
-            item.selectable = true
-            item.zOrder = ItemOrder.imageOrder
-        } else if (t.Type == 'Line') {
-            let item = new SLineMarkerItem(null, t)
-            item.selectable = true
-            item.zOrder = ItemOrder.lineOrder
-            this.lineMarkerList.push(item)
-        } else if (t.Type == 'Text') {
-            let item = new STextMarkerItem(null, t)
-            item.selectable = true
-            item.zOrder = ItemOrder.lineOrder
-            this.textMarkerList.push(item)
+        if (t.Type == "Image") {
+            let item = new SImageMarkerItem(null, t);
+            this.imageMarkerList.push(item);
+            item.selectable = true;
+            item.zOrder = ItemOrder.imageOrder;
+        } else if (t.Type == "Line") {
+            let item = new SLineMarkerItem(null, t);
+            item.selectable = true;
+            item.zOrder = ItemOrder.lineOrder;
+            this.lineMarkerList.push(item);
+        } else if (t.Type == "Text") {
+            let item = new STextMarkerItem(null, t);
+            item.selectable = true;
+            item.zOrder = ItemOrder.lineOrder;
+            this.textMarkerList.push(item);
         }
     } // Function addMarker()
 
@@ -119,7 +113,9 @@ export class STopologyParser extends SParser {
      * @param   t       管线关系对象数据
      * */
     private addRelation(t: Relation): void {
-        let item = new TipelineItem(null, t)
-        this.relationList.push(item)
+        let item = new TipelineItem(null, t);
+        item.selectable = true;
+        item.zOrder == ItemOrder.polylineOrder;
+        this.relationList.push(item);
     } // Function addRelation()
 } // class STopologyParser

+ 2 - 0
src/lib/types/Legend.ts

@@ -58,4 +58,6 @@ export interface Legend {
     OutLine?: Point[];
     /** 由应用自己定义  */
     Properties?: any;
+     /** zone 区分防火分区和石材铺装  */
+    SubType?:string
 } // Interface Legend

+ 47 - 71
src/main.js

@@ -1,78 +1,54 @@
-var __awaiter =
-    (this && this.__awaiter) ||
-    function(thisArg, _arguments, P, generator) {
-        function adopt(value) {
-            return value instanceof P
-                ? value
-                : new P(function(resolve) {
-                      resolve(value)
-                  })
-        }
-        return new (P || (P = Promise))(function(resolve, reject) {
-            function fulfilled(value) {
-                try {
-                    step(generator.next(value))
-                } catch (e) {
-                    reject(e)
-                }
-            }
-            function rejected(value) {
-                try {
-                    step(generator['throw'](value))
-                } catch (e) {
-                    reject(e)
-                }
-            }
-            function step(result) {
-                result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected)
-            }
-            step((generator = generator.apply(thisArg, _arguments || [])).next())
-        })
-    }
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-Vue.config.productionTip = false
-import design from 'ant-design-vue'
-import 'ant-design-vue/dist/antd.css'
-Vue.use(design)
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-Vue.use(ElementUI)
-import VueQuillEditor from 'vue-quill-editor'
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-Vue.use(VueQuillEditor)
-import WdEditor from '@/components/Editor'
-Vue.use(WdEditor)
-import Rotation from '@/components/Rotation'
-Vue.use(Rotation)
-import PicLarge from '@/components/PicLarge'
-Vue.use(PicLarge)
-import Legend from '@/components/Legend'
-Vue.use(Legend)
-import cookies from 'vue-cookie'
-Vue.use(cookies)
-import Pui from 'meri-design'
-import 'meri-design/dist/index.css'
-Vue.use(Pui)
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+Vue.config.productionTip = false;
+import design from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+Vue.use(design);
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
+import VueQuillEditor from 'vue-quill-editor';
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+Vue.use(VueQuillEditor);
+import WdEditor from '@/components/Editor';
+Vue.use(WdEditor);
+import Rotation from '@/components/Rotation';
+Vue.use(Rotation);
+import PicLarge from '@/components/PicLarge';
+Vue.use(PicLarge);
+import Legend from '@/components/Legend';
+Vue.use(Legend);
+import cookies from 'vue-cookie';
+Vue.use(cookies);
+import Pui from 'meri-design';
+import 'meri-design/dist/index.css';
+Vue.use(Pui);
 //////////模拟传入参数
-const username = 'lengqiang'
+const username = 'lengqiang';
 /////////////////
 // 在跳入路由之前要请求获取权限信息
-router.beforeEach((to, from, next) =>
-    __awaiter(void 0, void 0, void 0, function*() {
-        if (!store.state.isrequestAuth) {
-            yield store.dispatch('getUserInfo', username)
-            yield store.dispatch('getFloors')
-        }
-        next()
-    })
-)
+router.beforeEach((to, from, next) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!store.state.isrequestAuth) {
+        yield store.dispatch('getUserInfo', username);
+        yield store.dispatch('getFloors');
+    }
+    next();
+}));
 new Vue({
     router,
     store,
     render: (h) => h(App),
-}).$mount('#app')
+}).$mount('#app');