소스 검색

Merge branch 'develop' of http://39.106.8.246:3003/web/wanda-bm-guide into develop

shaun-sheep 4 년 전
부모
커밋
e4f2cb3976

+ 3 - 3
package.json

@@ -9,10 +9,10 @@
     },
     "dependencies": {
         "@saga-web/base": "2.1.22",
-        "@saga-web/big": "1.0.48",
-        "@saga-web/draw": "2.1.98",
+        "@saga-web/big": "1.0.49",
+        "@saga-web/draw": "2.1.100",
         "@saga-web/feng-map": "1.0.11",
-        "@saga-web/graph": "2.1.91",
+        "@saga-web/graph": "2.1.93",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",
         "core-js": "^3.4.4",

+ 115 - 57
src/App.vue

@@ -1,30 +1,80 @@
 <template>
-    <div id='app'>
-        <router-view />
-    </div>
+  <div id="app">
+    <div :id="`fengMap${id}`" class="fengMap"></div>
+    <router-view />
+  </div>
 </template>
 <script>
+import { mapGetters, mapActions, mapMutations } from "vuex";
+import { SFengParser } from "@saga-web/feng-map";
+window.fengmapData = null;
 export default {
-    data() {
-        return {}
+  data() {
+    return {
+      view: "",
+      scene: "",
+      id: "2",
+      canvasID: "",
+      key: "23f30a832a862c58637a4aadbf50a566",
+      appName: "万达可视化系统",
+      mapServerURL: `/wdfn`
+    };
+  },
+  mounted() {
+    // 监听页面刷新事件
+    window.addEventListener("unload", this.unload);
+    // 页面加载完成后,移除session里的存储的信息
+    window.addEventListener("load", this.load);
+    // 请求该项目下的楼层数据
+    this.getFengMap();
+  },
+  computed: {
+    ...mapGetters(["plazaId", "fmapID", "haveFengMap"])
+  },
+  methods: {
+    ...mapActions(["getfmapID"]),
+    ...mapMutations(["SETHAVEFENGMAP"]),
+    unload() {
+      // const { userInfo, projectId, menuStatus,manualAutoMode } = this.$store.state;
+      const state = this.$store.state;
+      sessionStorage.setItem("state", JSON.stringify(state));
     },
-    mounted() {
-        // 监听页面刷新事件
-        window.addEventListener('unload', this.unload)
-        // 页面加载完成后,移除session里的存储的信息
-        window.addEventListener('load', this.load)
+    load() {
+      sessionStorage.clear();
     },
-    methods: {
-        unload() {
-            // const { userInfo, projectId, menuStatus,manualAutoMode } = this.$store.state;
-            const state = this.$store.state
-            sessionStorage.setItem('state', JSON.stringify(state))
-        },
-        load() {
-            sessionStorage.clear()
-        }
+    getFengMap() {
+      if (!this.fmapID) {
+        this.getfmapID().then(() => {
+          this.getMap();
+        });
+        return;
+      }
+      this.getMap();
+    },
+    getMap() {
+      if (!window.fengmapData) {
+        window.fengmapData = new SFengParser(
+          `fengMap${this.id}`,
+          `${this.mapServerURL}/fmap/${this.fmapID}`,
+          this.key,
+          this.appName,
+          null
+        );
+        window.fengmapData.loadMap(this.fmapID, () => {
+          // 获取主题数据
+          window.fengmapData
+            .loadTheme(
+              `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
+            )
+            .then(res => {
+              console.log("获取rf成功", res);
+               this.SETHAVEFENGMAP()
+            });
+        });
+      }
     }
-}
+  },
+};
 </script>
 <style lang="less">
 body,
@@ -52,8 +102,8 @@ input,
 textarea,
 th,
 td {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 body,
@@ -61,7 +111,7 @@ button,
 input,
 select,
 textarea {
-    font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
+  font: 12px/1.5 Arial, "Microsoft YaHei", "\65b0\5b8b\4f53";
 }
 
 h1,
@@ -70,7 +120,7 @@ h3,
 h4,
 h5,
 h6 {
-    font-size: 100%;
+  font-size: 100%;
 }
 
 address,
@@ -80,93 +130,101 @@ var,
 em,
 i,
 u {
-    font-style: normal;
+  font-style: normal;
 }
 
 ol,
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 img {
-    border: none;
-    vertical-align: middle;
+  border: none;
+  vertical-align: middle;
 }
 
 :focus {
-    outline: 0;
+  outline: 0;
 }
 
 button,
 input,
 select,
 textarea {
-    font-size: 100%;
+  font-size: 100%;
 }
 
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 /* 滚动条样式 */
 
 body ::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
+  width: 5px;
+  height: 5px;
 }
 
 body ::-webkit-scrollbar-track {
-    background-color: rgba(0, 0, 0, 0);
-    border-radius: 3px;
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 3px;
 }
 
 body ::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    background: #e6e6e6;
-    border: 1px solid #e6e6e6;
+  border-radius: 3px;
+  background: #e6e6e6;
+  border: 1px solid #e6e6e6;
 }
 
 body ::-webkit-scrollbar-thumb:vertical:hover {
-    background: #e6e6e6;
-    border: 1px solid #e6e6e6;
+  background: #e6e6e6;
+  border: 1px solid #e6e6e6;
 }
 
 .clearfix::after {
-    content: '.';
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden;
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
 }
 .clearfix {
-    zoom: 1;
+  zoom: 1;
 }
 
 .left {
-    float: left;
+  float: left;
 }
 
 .right {
-    float: right;
+  float: right;
 }
 html,
 body {
-    width: 100%;
-    height: 100%;
-    // min-width: 1920px;
-    //   background: url('./assets/images/back.jpg') no-repeat;
+  width: 100%;
+  height: 100%;
+  // min-width: 1920px;
+  //   background: url('./assets/images/back.jpg') no-repeat;
 }
 #app {
-    height: 100%;
-    width: 100%;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  .fengMap {
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+    opacity: 0
+  }
 }
 </style>

+ 4 - 1
src/components/floorMap/canvasFun.vue

@@ -12,7 +12,7 @@
                     </el-dropdown-menu>
                 </el-dropdown>
             </div>
-            <div class='small-block'>
+            <div class='small-block' @click="showText">
                 <i>
                     <img src='../../assets/imgs/er.png' alt />
                 </i>
@@ -91,6 +91,9 @@ export default {
                 this.sliderVal = this.maxScale
             }
             this.scale(this.sliderVal)
+        },
+        showText() {
+            this.$emit('showText')
         }
     }
 }

+ 287 - 247
src/components/floorMap/index.vue

@@ -1,269 +1,309 @@
+
 <!-- 底图 -->
 <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">
+    <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" @showText="showText" 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 bus from "@/utils/bus.js"
+
 // import { uuid } from "@/components/mapClass/until";
-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",
+      floorid: "", //楼层id
+      topologyParser: null, // 解析器数据
+    };
+  },
+  props: {
+    id: {
+      default: "1",
+      type: String
     },
-    components: { RoomBox, canvasFun },
-    computed: {
-        ...mapGetters(['plazaId', 'fmapID'])
+      categoryId: {
+      default: "",
+      type: String
     },
-    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)
-                    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)
-                        }
-                        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
-                        }
-                        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
-            }
-            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(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
-            }
+
+    loadName: null,
+    type: null
+  },
+  components: { RoomBox, canvasFun },
+  computed: {
+    ...mapGetters(["plazaId", "fmapID", "haveFengMap"])
+  },
+  methods: {
+    ...mapActions(["getfmapID"]),
+    init(floorid) {
+      this.loading = true;
+      this.floorid = floorid;
+      setTimeout(() => {
+        if (this.haveFengMap) {
+          this.clearGraphy();
+          this.scene = new FloorScene();
+          this.scene.selectContainer.connect(
+            "listChange",
+            this,
+            this.listChange
+          );
+          if (this.canvasID != `canvas${this.id}`) {
+            this.canvasID = `canvas${this.id}`;
+          }
+          this.parserData(floorid);
         }
+      }, 100);
     },
-    watch: {
-        'view.scale': {
-            handler(n) {
-                if (this.$refs.canvasFun) {
-                    let s = (n * 10) / this.view.minScale
-                    this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
-                }
+    parserData(floor) {
+      if (floor == "g80") {
+        // 屋顶
+        if (window.fengmapData.frImg) {
+          let imgItem = new SImageItem(
+            null,
+            `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`
+          );
+          this.scene.addItem(imgItem);
+          this.view.scene = this.scene;
+          this.view.minScale = this.view.scale;
+          if (this.$refs.canvasFun) {
+            this.$refs.canvasFun.everyScale = this.view.scale;
+          }
+          this.view.fitSceneToView();
+        }
+      } else {
+        if (window.fengmapData.gnameToGid[floor]) {
+          window.fengmapData.parseData(
+            window.fengmapData.gnameToGid[floor],
+            res => {
+              if (res.err) {
+                console.log("errr", 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.minScale = this.view.scale;
+              if (this.$refs.canvasFun) {
+                this.$refs.canvasFun.everyScale = this.view.scale;
+              }
+              this.view.fitSceneToView();
+              //console.log('success')
             }
+          );
+        } else {
+          console.log("楼层不正确");
         }
+      }
+      this.readGroup(this.floorid).then(data => {
+        this.loading = false;
+        if (data.Data.length > 0) {
+          //console.log(data.data.Data[0].ID)
+          this.$cookie.set("graphId", data.Data[0].ID, 3);
+        }
+        this.topologyParser = new STopologyParser(null);
+        this.topologyParser.parseData(data.Data[0].Elements);
+        // 多边形
+        this.topologyParser.zoneLegendList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加文字
+        this.topologyParser.textMarkerList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加图片
+        this.topologyParser.imageMarkerList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加直线
+        this.topologyParser.lineMarkerList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加图标类图例
+        this.topologyParser.imageLegendList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        // 增加管线类
+        // 增加图标类图例
+        this.topologyParser.relationList.forEach(t => {
+          this.scene.addItem(t);
+        });
+        this.view.fitSceneToView();
+      });
+    },
+    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`);
+    },
+    // 缩放
+    scale(val) {
+      if (!this.view) {
+        return;
+      }
+      let scale = this.view.scale;
+      this.view.scaleByPoint(
+        val / scale,
+        this.canvasWidth / 2,
+        this.canvasHeight / 2
+      );
     },
-    mounted() {
-        this.mapSize()
+    showText() {
+        this.topologyParser.zoneLegendList.forEach(t => {
+          t.showText = !t.showText;
+        })
     },
-    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.categoryId ? this.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;
+      }
+    },
+    getEvent() {
+      bus.$on('changeShow', res => {
+        this.topologyParser.zoneLegendList.forEach(t => {
+          let id = t.data.GraphElementId
+          t.maskFlag = !(res.indexOf(id) > -1)
+        })
+        this.topologyParser.textMarkerList.forEach(t => {
+          let id = t.data.GraphElementId
+          t.maskFlag = !(res.indexOf(id) > -1)
+        });
+        this.topologyParser.imageMarkerList.forEach(t => {
+          let id = t.data.GraphElementId
+          t.maskFlag = !(res.indexOf(id) > -1)
+        });
+        this.topologyParser.lineMarkerList.forEach(t => {
+          let id = t.data.GraphElementId
+          t.maskFlag = !(res.indexOf(id) > -1)
+        });
+        this.topologyParser.imageLegendList.forEach(t => {
+          let id = t.data.GraphElementId
+          t.maskFlag = !(res.indexOf(id) > -1)
+        });
+        this.topologyParser.relationList.forEach(t => {
+          let id = t.data.GraphElementId
+          t.maskFlag = !(res.indexOf(id) > -1)
+        });
+      })
+    }
+  },
+  watch: {
+    "view.scale": {
+      handler(n) {
+        if (this.$refs.canvasFun) {
+          let s = (n * 10) / this.view.minScale;
+          this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
         }
+      }
+    },
+    haveFengMap(val) {
+      if (val) {
+        this.init(this.floorid);
+      }
     }
-}
+  },
+  mounted() {
+    this.mapSize();
+    this.getEvent()
+  },
+  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>
+</style>

+ 5 - 0
src/components/viewLengend.vue

@@ -73,6 +73,7 @@
     </div>
 </template>
 <script>
+import bus from "@/utils/bus.js"
 export default {
     props: ['viewTable', 'loading', 'remarksText', 'systemName'],
     data() {
@@ -84,6 +85,10 @@ export default {
     methods: {
         handleSelectionChange(val) {
             this.multipleSelection = val
+            const tempArr = val.map(t => {
+                return t.GraphElementId
+            })
+            bus.$emit('changeShow', tempArr)
         },
         handleSwich(val) {
             this.$emit('changeSwitch', val)

+ 32 - 4
src/lib/items/SFHFQZoneLegendItem.js

@@ -1,5 +1,5 @@
 import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
-import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { SColor, SFont, SPoint, SLineCapStyle } 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';
@@ -21,12 +21,13 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         this.textItem = new STextItem(this);
         /** 是否显示文字  */
         this._showText = true;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         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;
@@ -55,7 +56,7 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = data.Properties.color;
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
                 this.font = new SFont("sans-serif", data.Properties.font);
@@ -140,6 +141,16 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.text;
@@ -154,7 +165,24 @@ export class SFHFQZoneLegendItem 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;
+        this.data.Properties.color = this.color.value;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor);
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 42 - 15
src/lib/items/SFHFQZoneLegendItem.ts

@@ -2,7 +2,7 @@
 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 { SPainter, SColor, SFont, SPoint, SLineCapStyle } 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';
@@ -25,11 +25,11 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         this.textItem.text = v;
         this.update();
     }
-    get color(): string {
+    get color(): SColor {
         return this.textItem.color;
     }
-    set color(v: string) {
-        this.textItem.color = v
+    set color(v: SColor) {
+        this.textItem.color = v;
     }
     get font(): SFont {
         return this.textItem.font
@@ -85,6 +85,18 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         }
     }
 
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
 
     /**
      * 构造函数
@@ -99,7 +111,6 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         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[];
@@ -121,36 +132,36 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 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))
+                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
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
-                this.font =new SFont("sans-serif", 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, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.x / arr.length)
-                            }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    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.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;
@@ -163,8 +174,24 @@ export class SFHFQZoneLegendItem 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;
+        this.data.Properties.color =  this.color.value;
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 3 - 3
src/lib/items/SImageLegendItem.js

@@ -1,6 +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';
+import { SFont, SColor } from '@saga-web/draw/lib';
 /**
  * 图例节点Item(图标类型)
  *
@@ -45,7 +45,7 @@ export class SImageLegendItem extends SIconTextItem {
             this.font = new SFont("sans-serif", data.Properties.font);
         }
         if (data.Properties && data.Properties.color) {
-            this.color = data.Properties.color;
+            this.color = new SColor(data.Properties.color);
         }
     }
     get num() {
@@ -72,7 +72,7 @@ export class SImageLegendItem extends SIconTextItem {
         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;
+        this.data.Properties.color = this.color.value;
         return this.data;
     }
 } // Class SImageLegendItem

+ 3 - 3
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';
+import { SFont, SColor } from '@saga-web/draw/lib';
 /**
  * 图例节点Item(图标类型)
  *
@@ -66,7 +66,7 @@ export class SImageLegendItem extends SIconTextItem {
             this.font = new SFont("sans-serif", data.Properties.font);
         }
         if (data.Properties && data.Properties.color) {
-            this.color = data.Properties.color;
+            this.color = new SColor(data.Properties.color);
         }
     }
 
@@ -78,7 +78,7 @@ export class SImageLegendItem extends SIconTextItem {
         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;
+        this.data.Properties.color = this.color.value;
 
         return this.data;
     }

+ 0 - 36
src/lib/items/SImageMarkerItem.js

@@ -1,36 +0,0 @@
-import { SImageItem } from "@saga-web/graph/lib";
-import { ItemOrder } from '@saga-web/big/lib';
-/**
- * 标识对象Item(图标类型)
- *
- * * @author  张宇(taohuzy@163.com)
- */
-export class SImageMarkerItem extends SImageItem {
-    /**
-     * 构造函数
-     *
-     * @param parent    指向父对象
-     * @param data      标识对象数据
-     */
-    constructor(parent, data) {
-        super(parent);
-        this.zOrder = ItemOrder.imageOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.moveTo(data.Pos.X, data.Pos.Y);
-        if (data.Size) {
-            this.width = data.Size.Width;
-            this.height = data.Size.Height;
-        }
-        if (data.Properties && data.Properties.Url) {
-            this.url = data.Properties.Url;
-        }
-    } // Constructor
-    toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Size = { Width: this.width, Height: this.height };
-        this.data.Properties.Url = this.url;
-        return this.data;
-    }
-} // Class SImageMarkerItem

+ 0 - 155
src/lib/items/SImgTextItem.js

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

+ 0 - 173
src/lib/items/SImgTextItem.ts

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

+ 0 - 47
src/lib/items/SLineLegendItem.js

@@ -1,47 +0,0 @@
-import { SPoint } from "@saga-web/draw/lib";
-import { SPolylineItem } from '@saga-web/big/lib';
-/**
- * 图例节点Item(线类型)
- *
- * * @author  张宇(taohuzy@163.com)
- */
-export class SLineLegendItem extends SPolylineItem {
-    /**
-     * 构造函数
-     *
-     * @param parent    指向父对象
-     * @param data      图例节点对象数据
-     */
-    constructor(parent, data) {
-        super(parent, []);
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.moveTo(data.Pos.X, data.Pos.Y);
-        if (data.Properties && data.Properties.Line) {
-            let setPointList;
-            setPointList = data.Properties.Line.map(i => {
-                return new SPoint(i.x, i.y);
-            });
-            this.pointList = setPointList;
-        }
-        if (data.Properties && data.Properties.LineWidth) {
-            this.lineWidth = data.Properties.LineWidth;
-        }
-        if (data.Properties && data.Properties.StrokeColor) {
-            this.strokeColor = data.Properties.StrokeColor;
-        }
-    }
-    toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Properties.Line = this.pointList.map(pos => {
-            return {
-                X: pos.x,
-                Y: pos.y
-            };
-        });
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.Properties.StrokeColor = this.strokeColor;
-        return this.data;
-    }
-} // Class SLineLegendItem

+ 40 - 4
src/lib/items/SLineMarkerItem.js

@@ -1,5 +1,6 @@
-import { SPoint } from "@saga-web/draw/lib";
-import { ItemOrder, SLineItem } from '@saga-web/big/lib';
+import { SLineStyle } from "@saga-web/graph/lib";
+import { SPoint, SColor } from "@saga-web/draw/lib";
+import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib';
 /**
  * 标识对象Item(线类型)
  *
@@ -14,6 +15,8 @@ export class SLineMarkerItem extends SLineItem {
      */
     constructor(parent, data) {
         super(parent);
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         this.zOrder = ItemOrder.lineOrder;
         this.data = data;
         this.id = data.ID;
@@ -33,9 +36,19 @@ export class SLineMarkerItem extends SLineItem {
             this.lineStyle = data.Properties.LineStyle;
         }
         if (data.Properties && data.Properties.StrokeColor) {
-            this.strokeColor = data.Properties.StrokeColor;
+            this.strokeColor = new SColor(data.Properties.StrokeColor);
         }
     } // Constructor
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Properties.Line = this.line.map(pos => {
@@ -45,8 +58,31 @@ export class SLineMarkerItem extends SLineItem {
             };
         });
         this.data.Properties.LineWidth = this.lineWidth;
-        this.data.Properties.StrokeColor = this.strokeColor;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
         this.data.Properties.LineStyle = this.lineStyle;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            painter.pen.color = new SColor(this.strokeColor);
+            if (this.lineStyle == SLineStyle.Dashed) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth * 3),
+                    painter.toPx(this.lineWidth * 7)
+                ];
+            }
+            else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth),
+                    painter.toPx(this.lineWidth)
+                ];
+            }
+            painter.drawLine(this.line[0], this.line[1]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SLineMarkerItem

+ 41 - 6
src/lib/items/SLineMarkerItem.ts

@@ -1,7 +1,7 @@
 
-import { SGraphItem } from "@saga-web/graph/lib";
-import { SPoint } from "@saga-web/draw/lib";
-import { ItemOrder, SLineItem } from '@saga-web/big/lib';
+import { SGraphItem, SLineStyle } from "@saga-web/graph/lib";
+import { SPoint, SPainter, SColor, SLineCapStyle } from "@saga-web/draw/lib";
+import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib';
 import { Marker } from '../types/Marker';
 
 /**
@@ -13,6 +13,19 @@ export class SLineMarkerItem extends SLineItem {
     /** 标识对象数据 */
     data: Marker;
 
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
     /**
      * 构造函数
      *
@@ -40,12 +53,12 @@ export class SLineMarkerItem extends SLineItem {
             this.lineStyle = data.Properties.LineStyle;
         }
         if (data.Properties && data.Properties.StrokeColor) {
-            this.strokeColor = data.Properties.StrokeColor;
+            this.strokeColor = new SColor(data.Properties.StrokeColor);
         }
     } // Constructor
 
     toData(): Marker {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Properties.Line = this.line.map(pos => {
             return {
                 X: pos.x,
@@ -53,9 +66,31 @@ export class SLineMarkerItem extends SLineItem {
             }
         });
         this.data.Properties.LineWidth = this.lineWidth;
-        this.data.Properties.StrokeColor = this.strokeColor;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
         this.data.Properties.LineStyle = this.lineStyle;
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            painter.pen.color = new SColor(this.strokeColor);
+            if (this.lineStyle == SLineStyle.Dashed) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth * 3),
+                    painter.toPx(this.lineWidth * 7)
+                ];
+            }
+            else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth),
+                    painter.toPx(this.lineWidth)
+                ];
+            }
+            painter.drawLine(this.line[0], this.line[1]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SLineMarkerItem

+ 0 - 22
src/lib/items/SNoneLegendItem.js

@@ -1,22 +0,0 @@
-import { SGraphItem } from "@saga-web/graph/lib";
-/**
- * 图例节点Item(非图例类型)
- *
- * * @author  张宇(taohuzy@163.com)
- */
-export class SNoneLegendItem extends SGraphItem {
-    /**
-     * 构造函数
-     *
-     * @param parent    指向父对象
-     * @param data      图例节点对象数据
-     */
-    constructor(parent, data) {
-        super(parent);
-        this.data = data;
-        this.id = data.ID;
-    }
-    toData() {
-        return this.data;
-    }
-} // Class SNoneLegendItem

+ 32 - 4
src/lib/items/SSCPZZoneLegendItem.js

@@ -1,5 +1,5 @@
 import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
-import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { SColor, SFont, SPoint, SLineCapStyle } 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';
@@ -21,12 +21,13 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         this.textItem = new STextItem(this);
         /** 是否显示文字  */
         this._showText = true;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         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;
@@ -55,7 +56,7 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = data.Properties.color;
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
                 this.font = new SFont("sans-serif", data.Properties.font);
@@ -140,6 +141,16 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     /** 图例说明  */
     set itemExplain(v) {
         this.data.Properties.ItemExplain = v;
@@ -161,7 +172,24 @@ export class SSCPZZoneLegendItem 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;
+        this.data.Properties.color = this.color.value;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor);
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 46 - 17
src/lib/items/SSCPZZoneLegendItem.ts

@@ -2,7 +2,7 @@
 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 { SPainter, SColor, SFont, SPoint, SLineCapStyle } 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';
@@ -25,11 +25,11 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         this.textItem.text = v;
         this.update();
     }
-    get color(): string {
+    get color(): SColor {
         return this.textItem.color;
     }
-    set color(v: string) {
-        this.textItem.color = v
+    set color(v: SColor) {
+        this.textItem.color = v;
     }
     get font(): SFont {
         return this.textItem.font
@@ -84,11 +84,25 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
     /** 图例说明  */
-    set itemExplain(v:string){
-      this.data.Properties.ItemExplain = v
+    set itemExplain(v: string) {
+        this.data.Properties.ItemExplain = v
     }
-    get itemExplain():string{
+    get itemExplain(): string {
         return this.data.Properties.ItemExplain
     }
 
@@ -105,7 +119,6 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         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[];
@@ -133,30 +146,30 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = data.Properties.color
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
-                this.font =new SFont("sans-serif", 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, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.x / arr.length)
-                            }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    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.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;
@@ -169,8 +182,24 @@ export class SSCPZZoneLegendItem 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;
+        this.data.Properties.color =  this.color.value;
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 0 - 105
src/lib/items/STextMarkerItem.js

@@ -1,105 +0,0 @@
-import { STextItem, SLineStyle } from "@saga-web/graph/lib";
-import { SColor, SFont } from "@saga-web/draw";
-import { ItemOrder } from '@saga-web/big/lib';
-/**
- * 标识对象Item(文本类型)
- *
- * * @author  张宇(taohuzy@163.com)
- */
-export class STextMarkerItem extends STextItem {
-    /**
-     * 构造函数
-     *
-     * @param parent    指向父对象
-     * @param data      标识对象数据
-     */
-    constructor(parent, data) {
-        super(parent);
-        /** 边框宽度 */
-        this._lineWidth = 1;
-        /** 边框样式    */
-        this._borderStyle = SLineStyle.None;
-        this.zOrder = ItemOrder.textOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.moveTo(data.Pos.X, data.Pos.Y);
-        if (data.Size) {
-            this.width = data.Size.Width;
-            this.height = data.Size.Height;
-        }
-        if (data.Properties && data.Properties.Text) {
-            this.text = data.Properties.Text;
-        }
-        if (data.Properties && data.Properties.Color) {
-            this.color = data.Properties.Color;
-        }
-        if (data.Properties && data.Properties.Font) {
-            this.font = new SFont("sans-serif", data.Properties.Font);
-            ;
-        }
-        if (data.Properties && data.Properties.BackgroundColor) {
-            this.backgroundColor = data.Properties.BackgroundColor;
-        }
-    } // Constructor
-    get lineWidth() {
-        return this._lineWidth;
-    }
-    set lineWidth(v) {
-        this._lineWidth = v;
-        this.update();
-    }
-    get borderStyle() {
-        return this._borderStyle;
-    }
-    set borderStyle(v) {
-        this._borderStyle = v;
-        this.update();
-    }
-    toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Size = { Width: this.width, Height: this.height };
-        this.data.Properties.Text = this.text;
-        this.data.Properties.Color = this.color;
-        this.data.Properties.Font = this.font.size;
-        this.data.Properties.BackgroundColor = this.backgroundColor;
-        return this.data;
-    }
-    /**
-     * Item绘制操作
-     *
-     * @param   painter      绘画类
-     */
-    onDraw(painter) {
-        // 绘制文本
-        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());
-        }
-    } // Function onDraw()
-} // Class STextMarkerItem

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

@@ -12,25 +12,6 @@ export class STextMarkerItem extends STextItem {
     /** 标识对象数据 */
     data: Marker;
 
-    /** 边框宽度 */
-    private _lineWidth: number = 1;
-    get lineWidth(): number {
-        return this._lineWidth;
-    }
-    set lineWidth(v: number) {
-        this._lineWidth = v;
-        this.update();
-    }
-
-    /** 边框样式    */
-    private _borderStyle: SLineStyle = SLineStyle.None;
-    get borderStyle(): SLineStyle {
-        return this._borderStyle;
-    }
-    set borderStyle(v: SLineStyle) {
-        this._borderStyle = v;
-        this.update();
-    }
     /**
      * 构造函数
      *
@@ -52,13 +33,13 @@ export class STextMarkerItem extends STextItem {
             this.text = data.Properties.Text;
         }
         if (data.Properties && data.Properties.Color) {
-            this.color = data.Properties.Color
+            this.color = new SColor(data.Properties.Color);
         }
         if (data.Properties && data.Properties.Font) {
             this.font = new SFont("sans-serif", data.Properties.Font);;
         }
         if (data.Properties && data.Properties.BackgroundColor) {
-            this.backgroundColor = data.Properties.BackgroundColor
+            this.backgroundColor = new SColor(data.Properties.BackgroundColor);
         }
     } // Constructor
 
@@ -66,44 +47,9 @@ export class STextMarkerItem extends STextItem {
         this.data.Pos = {X: this.x, Y: this.y};
         this.data.Size = {Width: this.width, Height: this.height};
         this.data.Properties.Text = this.text;
-        this.data.Properties.Color = this.color;
-        this.data.Properties.Font = this.font.size
-        this.data.Properties.BackgroundColor = this.backgroundColor
+        this.data.Properties.Color = this.color.value;
+        this.data.Properties.Font = this.font.size;
+        this.data.Properties.BackgroundColor = this.backgroundColor.value;
         return this.data;
     }
-
-    /**
-     * Item绘制操作
-     *
-     * @param   painter      绘画类
-     */
-    onDraw(painter: SPainter): void {
-        // 绘制文本
-        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());
-        }
-    } // Function onDraw()
 } // Class STextMarkerItem

+ 42 - 8
src/lib/items/SZoneLegendItem.js

@@ -1,4 +1,4 @@
-import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until";
 import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
@@ -20,20 +20,27 @@ export class SZoneLegendItem extends SPolygonItem {
         this.textItem = new STextItem(this);
         /** 是否显示文字  */
         this._showText = true;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         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) {
-                setPointList = data.OutLine.map(i => {
-                    return (new SPoint(i.X, i.Y));
-                });
-                this.setPointList = setPointList;
+                if (data.OutLine[0] instanceof SPoint) {
+                    // @ts-ignore
+                    this.setPointList = data.OutLine;
+                }
+                else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y));
+                    });
+                    this.setPointList = setPointList;
+                }
             }
             // 设置线宽
             if (data.Properties.LineWidth) {
@@ -49,7 +56,7 @@ export class SZoneLegendItem extends SPolygonItem {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = data.Properties.color;
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
                 this.font = new SFont("sans-serif", data.Properties.font);
@@ -134,6 +141,16 @@ export class SZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.name;
@@ -148,7 +165,24 @@ 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;
+        this.data.Properties.color = this.color.value;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor);
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 52 - 20
src/lib/items/SZoneLegendItem.ts

@@ -1,7 +1,7 @@
 
 import { SGraphItem } from "@saga-web/graph/lib";
 import { Legend } from '../types/Legend';
-import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until"
 import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
@@ -24,17 +24,17 @@ export class SZoneLegendItem extends SPolygonItem {
         this.textItem.text = v;
         this.update();
     }
-    get color(): string {
+    get color(): SColor {
         return this.textItem.color;
     }
-    set color(v: string) {
-        this.textItem.color = v
+    set color(v: SColor) {
+        this.textItem.color = v;
     }
     get font(): SFont {
-        return this.textItem.font
+        return this.textItem.font;
     }
     set font(v: SFont) {
-        this.textItem.font = v
+        this.textItem.font = v;
     }
 
     get status(): SItemStatus {
@@ -84,6 +84,18 @@ export class SZoneLegendItem extends SPolygonItem {
         }
     }
 
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
 
     /**
      * 构造函数
@@ -98,15 +110,19 @@ export class SZoneLegendItem extends SPolygonItem {
         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) {
-                setPointList = data.OutLine.map(i => {
-                    return (new SPoint(i.X, i.Y))
-                })
-                this.setPointList = setPointList;
+                if (data.OutLine[0] instanceof SPoint) {
+                    // @ts-ignore
+                    this.setPointList = data.OutLine;
+                } else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
+                    })
+                    this.setPointList = setPointList;
+                }
             }
             // 设置线宽
             if (data.Properties.LineWidth) {
@@ -122,30 +138,30 @@ export class SZoneLegendItem extends SPolygonItem {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = data.Properties.color
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
-                this.font =new SFont("sans-serif", 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, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.x / arr.length)
-                            }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    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.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.name;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
@@ -158,8 +174,24 @@ 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;
+        this.data.Properties.color =  this.color.value;
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 28 - 3
src/lib/items/TipelineItem.js

@@ -1,4 +1,5 @@
-import { SPolylineItem, ItemOrder } from '@saga-web/big/lib';
+import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
+import { SColor } from '@saga-web/draw';
 import { SPoint } from "@saga-web/draw/lib";
 /**
  * 管道item
@@ -21,6 +22,8 @@ export class TipelineItem extends SPolylineItem {
         this._anchor1ID = "";
         /** 关联锚点2ID  */
         this._anchor2ID = "";
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         /** 数据存储  */
         this.data = null;
         this.zOrder = ItemOrder.polylineOrder;
@@ -28,6 +31,7 @@ export class TipelineItem extends SPolylineItem {
             return new SPoint(item.X, item.Y);
         });
         this.data = data;
+        this.name = data.Name;
         this.id = data.ID;
         if (data.GraphElementId) {
             this._graphElementId = data.GraphElementId;
@@ -45,7 +49,7 @@ export class TipelineItem extends SPolylineItem {
             this._anchor2ID = data.Anchor2ID;
         }
         if (data.Properties && data.Properties.Color) {
-            this.strokeColor = data.Properties.Color;
+            this.strokeColor = new SColor(data.Properties.Color);
         }
         // if(data.Properties && data.Properties.LineDash){
         //   this.LineDash = data.Properties.LineDash
@@ -99,6 +103,16 @@ export class TipelineItem extends SPolylineItem {
             this.data.Anchor2ID = this._anchor2ID;
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     /** 接收事件作出修改  */
     changePos() {
         if (this.startAnchor) {
@@ -126,8 +140,19 @@ export class TipelineItem extends SPolylineItem {
             this.data.PointList = pointList;
             this.data.Properties.LineWidth = this.lineWidth;
             // this.data.Properties.LineDash = this.LineDash;
-            this.data.Properties.Color = this.strokeColor;
+            this.data.Properties.Color = this.strokeColor.value;
         }
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            painter.pen.color = color;
+            painter.drawPolyline(this.pointList);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 }

+ 29 - 3
src/lib/items/TipelineItem.ts

@@ -1,4 +1,4 @@
-import { SPolylineItem, ItemOrder } from '@saga-web/big/lib';
+import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
 import { SPainter, SColor } from '@saga-web/draw';
 import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
 import { Relation } from '../types/Relation';
@@ -69,6 +69,20 @@ export class TipelineItem extends SPolylineItem {
       this.data.Anchor2ID = this._anchor2ID;
     }
   }
+
+  /** 是否蒙版遮罩  */
+  _maskFlag: boolean = false;
+  get maskFlag(): boolean {
+    return this._maskFlag;
+  }
+  set maskFlag(v: boolean) {
+    if (v === this._maskFlag) {
+      return
+    }
+    this._maskFlag = v;
+    this.update()
+  }
+
   /** 数据存储  */
   data: Relation | null = null;
   /** 接收事件作出修改  */
@@ -96,6 +110,7 @@ export class TipelineItem extends SPolylineItem {
       return new SPoint(item.X, item.Y);
     });
     this.data = data;
+    this.name = data.Name;
     this.id = data.ID;
     if (data.GraphElementId) {
       this._graphElementId = data.GraphElementId
@@ -113,7 +128,7 @@ export class TipelineItem extends SPolylineItem {
       this._anchor2ID = data.Anchor2ID
     }
     if (data.Properties && data.Properties.Color) {
-      this.strokeColor = data.Properties.Color
+      this.strokeColor = new SColor(data.Properties.Color);
     }
     // if(data.Properties && data.Properties.LineDash){
     //   this.LineDash = data.Properties.LineDash
@@ -136,9 +151,20 @@ export class TipelineItem extends SPolylineItem {
       this.data.PointList = pointList;
       this.data.Properties.LineWidth = this.lineWidth;
       // this.data.Properties.LineDash = this.LineDash;
-      this.data.Properties.Color = this.strokeColor
+      this.data.Properties.Color = this.strokeColor.value;
     }
 
     return this.data
   }
+
+  onDraw(painter: SPainter) {
+    if (this.maskFlag && this.status == SItemStatus.Normal) {
+      let color = new SColor(this.strokeColor)
+      color.alpha = 100;
+      painter.pen.color = color;
+      painter.drawPolyline(this.pointList);
+    } else {
+      super.onDraw(painter);
+    }
+  }
 }

+ 5 - 0
src/store/index.js

@@ -17,6 +17,7 @@ export default new Vuex.Store({
         floorsArr: [], //楼层数组
         floorSelect: [], //楼层下拉框
         fmapID: '',
+        haveFengMap:false ,//是否有蜂鸟地图的数据
     },
     getters: {
         floorsArr: (state) => state.floorsArr,
@@ -24,6 +25,7 @@ export default new Vuex.Store({
         plazaId: (state) => state.plazaId,
         plazas: (state) => state.plazas,
         fmapID: (state) => state.fmapID,
+        haveFengMap:(state) => state.haveFengMap
     },
     mutations: {
         // 设置是否登陆校验
@@ -53,6 +55,9 @@ export default new Vuex.Store({
         SETMAPID(state, data) {
             state.fmapID = data
         },
+        SETHAVEFENGMAP(state) {
+            state.haveFengMap = true;
+        },
     },
     actions: {
         // 获取项目列表、userId

+ 3 - 0
src/utils/bus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+const bus = new Vue()
+export default bus