Browse Source

联调草稿箱

YaolongHan 4 years ago
parent
commit
85e029aa7f

+ 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
public/systemConf.js

@@ -28,7 +28,7 @@ var __systemConf = {
         // editerUrl: 'http://192.168.200.1:9910/wandaEditer/',
         editerUrl: 'http://192.168.200.89:8081/wandaEditer/',
         // wandaBmGuideUrl: 'http://192.168.200.89:8080/wandaBmGuide',
-        wandaBmGuideUrl: 'http://192.168.200.100:8080/wandaBmGuide',
+        wandaBmGuideUrl: 'localhost:8081/wandaBmGuide',
     },
 }
 window.__systemConf = __systemConf

+ 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)
 }

+ 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;

+ 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');