zhulizhen1111 hace 4 años
padre
commit
4fc95b05ad

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

BIN
src/assets/imgs/yl.png


+ 9 - 10
src/components/Legend/src/legend.vue

@@ -6,7 +6,7 @@
 <template>
     <div>
         <div class='legend-container'>
-            <div class='legend' @click='showTl' v-if='type==1 || floors.length>0'>图例</div>
+            <div class='legend' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage'>图例</div>
             <el-collapse-transition>
                 <div class='legend-tab' v-if='show'>
                     <div class='legend-table'>
@@ -50,11 +50,11 @@
         <div class='edit_map' v-else>
             <!-- 备注编辑器 -->
             <el-tooltip effect='dark' content='编辑备注' placement='left'>
-                <span v-if='systemName != "土建系统"' class='bjtk' @click='legendClik'>备注</span>
+                <span v-if='systemName != "土建系统" && isMessage' class='bjtk' @click='legendClik'>备注</span>
             </el-tooltip>
             <!-- 编辑图例 -->
             <el-tooltip effect='dark' content='编辑图例' placement='left'>
-                <p v-if='systemName != "土建系统"' @click='editTl' class='tltk'>
+                <p v-if='systemName != "土建系统" && isMessage' @click='editTl' class='tltk'>
                     <img src='@/assets/imgs/bjtl.png' alt />
                 </p>
             </el-tooltip>
@@ -123,7 +123,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters(['plazaId', 'fmapID', 'floorSelect'])
+        ...mapGetters(['plazaId', 'fmapID', 'floorSelect', 'isMessage'])
     },
     props: {
         floors: {
@@ -149,7 +149,7 @@ export default {
     methods: {
         formatFloor() {
             this.floorSelectAble = []
-            this.floorSelectAble =  this.floorSelect.filter(item=>{
+            this.floorSelectAble = this.floorSelect.filter(item => {
                 const hit = this.floors.find(i => i.gname == item.id)
                 return !hit
             })
@@ -171,7 +171,6 @@ export default {
 
             let data = {}
             queryRead({ data, postParams }).then(res => {
-                console.log('备注', res)
                 if (res.data.Data && res.data.Data[0].Note) {
                     let note = res.data.Data[0].Note
                     if (note.search(this.text1) != -1 && note.search(this.text2) != -1) {
@@ -211,14 +210,14 @@ export default {
          */
         goToEditer() {
             if (this.floor) {
-                this.floorSelect.forEach(el=>{
-                    if(el.id==this.floor){
+                this.floorSelect.forEach(el => {
+                    if (el.id == this.floor) {
                         this.floorName = el.name
                     }
                 })
                 console.log(this.floorName)
             }
-        
+
             let FloorID = this.floor ? this.floor : this.$cookie.get('floorMapId') || 'f1'
             let categoryId = this.categoryId ? this.categoryId : this.$cookie.get('categoryId')
             const { conf } = window.__systemConf,
@@ -326,7 +325,7 @@ export default {
         console.log(this.floorSelect)
         if (this.floors.length > 0) {
             debugger
-             this.formatFloor()
+            this.formatFloor()
         }
     }
 }

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

@@ -12,12 +12,17 @@
                     </el-dropdown-menu>
                 </el-dropdown>
             </div>
-            <div class='small-block'>
+            <div class='small-block' @click='showText'>
                 <i>
-                    <img src='../../assets/imgs/er.png' alt />
+                    <el-tooltip v-if='isShow' effect='dark' content='隐藏店铺名称' placement='top'>
+                        <img src='../../assets/imgs/er.png' alt />
+                    </el-tooltip>
+                    <el-tooltip v-else effect='dark' content='显示店铺名称' placement='top'>
+                        <img src='../../assets/imgs/yl.png' alt />
+                    </el-tooltip>
                 </i>
             </div>
-            <div class='small-block' @click='fitToWindow'>
+            <div class='small-block' @click='showText'>
                 <i>
                     <img src='../../assets/imgs/qp.png' alt />
                 </i>
@@ -43,7 +48,8 @@ export default {
             min: 1,
             max: 1000,
             everyScale: 1, // 每份的放大倍数
-            isSwitch: false // 是否开启吸附
+            isSwitch: false, // 是否开启吸附
+            isShow: true
         }
     },
 
@@ -91,6 +97,10 @@ export default {
                 this.sliderVal = this.maxScale
             }
             this.scale(this.sliderVal)
+        },
+        showText() {
+            this.isShow = !this.isShow
+            this.$emit('showText', this.isShow)
         }
     }
 }

+ 118 - 82
src/components/floorMap/index.vue

@@ -1,11 +1,11 @@
+
 <!-- 底图 -->
 <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>
+            <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
         </div>
         <room-box ref='boxRoom'></room-box>
     </div>
@@ -21,8 +21,9 @@ 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() {
@@ -35,8 +36,9 @@ export default {
             loading: false, // 限制重复查询
             view: null,
             urlMsg: {},
-            canvasID: 'canvas'
-            // fmapID:'1001012_42',
+            canvasID: 'canvas',
+            floorid: '', //楼层id
+            topologyParser: null // 解析器数据
         }
     },
     props: {
@@ -44,101 +46,53 @@ export default {
             default: '1',
             type: String
         },
+        categoryId: {
+            default: '',
+            type: String
+        },
+
         loadName: null,
         type: null
     },
     components: { RoomBox, canvasFun },
     computed: {
-        ...mapGetters(['plazaId', 'fmapID'])
+        ...mapGetters(['plazaId', 'fmapID', 'haveFengMap'])
     },
     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.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)
-                    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)
-            }
+                }
+            }, 100)
         },
         parserData(floor) {
             if (floor == 'g80') {
                 // 屋顶
-                if (fengmap.frImg) {
-                    let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`)
+                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.fitSceneToView()
                     this.view.minScale = this.view.scale
                     if (this.$refs.canvasFun) {
                         this.$refs.canvasFun.everyScale = this.view.scale
                     }
-                    this.loading = false
+                    this.view.fitSceneToView()
                 }
             } else {
-                if (fengmap.gnameToGid[floor]) {
-                    fengmap.parseData(fengmap.gnameToGid[floor], res => {
+                if (window.fengmapData.gnameToGid[floor]) {
+                    window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], res => {
                         if (res.err) {
-                            //console.log(res.err)
+                            console.log('errr', res.err)
                             return
                         }
                         const fParser = new SFloorParser(null)
@@ -153,18 +107,62 @@ export default {
                         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
+                        this.view.fitSceneToView()
                         //console.log('success')
                     })
                 } else {
-                    //console.log('楼层不正确')
+                    console.log('楼层不正确')
                 }
             }
+            this.readGroup(this.floorid).then(data => {
+                this.loading = false
+                if (data.Result == 'failure') {
+                    this.$message({
+                        message: data.Message,
+                        type: 'warning'
+                    })
+                    this.$store.commit('SETISMESSAGE', false)
+                    //    一会回来存这个
+                } else {
+                    this.$store.commit('SETISMESSAGE', true)
+                }
+                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) {
@@ -202,15 +200,19 @@ export default {
                 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)
         },
+        showText(val) {
+            this.topologyParser.zoneLegendList.forEach(t => {
+                t.showText = val
+            })
+        },
         // 读取数据
         readGroup(FloorID) {
             const data = {
                 BuildingID: '1',
                 FloorID: FloorID,
-                categoryId: this.$cookie.get('categoryId'),
+                categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
                 projectId: this.urlMsg.ProjectID
             }
             return readGroup(data)
@@ -224,6 +226,34 @@ export default {
                 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: {
@@ -234,10 +264,16 @@ export default {
                     this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
                 }
             }
+        },
+        haveFengMap(val) {
+            if (val) {
+                this.init(this.floorid)
+            }
         }
     },
     mounted() {
         this.mapSize()
+        this.getEvent()
     },
     created() {
         this.urlMsg = {
@@ -266,4 +302,4 @@ export default {
         width: 100%;
     }
 }
-</style>
+</style>

+ 3 - 1
src/components/menuList.vue

@@ -68,7 +68,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters(['plazas', 'plazaId'])
+        ...mapGetters(['plazas', 'plazaId', 'fmapID'])
     },
     watch: {
         $route: 'handleRoute'
@@ -79,7 +79,9 @@ export default {
     mounted() {
         window.vm = this
         this.handleRoute(this.$route)
+        console.log(this.fmapID)
     },
+
     methods: {
         //入草稿箱
         toDrafts() {

+ 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

+ 5 - 60
src/lib/items/STextMarkerItem.js

@@ -1,4 +1,4 @@
-import { STextItem, SLineStyle } from "@saga-web/graph/lib";
+import { STextItem } from "@saga-web/graph/lib";
 import { SColor, SFont } from "@saga-web/draw";
 import { ItemOrder } from '@saga-web/big/lib';
 /**
@@ -15,10 +15,6 @@ export class STextMarkerItem extends STextItem {
      */
     constructor(parent, data) {
         super(parent);
-        /** 边框宽度 */
-        this._lineWidth = 1;
-        /** 边框样式    */
-        this._borderStyle = SLineStyle.None;
         this.zOrder = ItemOrder.textOrder;
         this.data = data;
         this.id = data.ID;
@@ -32,74 +28,23 @@ 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
-    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.Color = this.color.value;
         this.data.Properties.Font = this.font.size;
-        this.data.Properties.BackgroundColor = this.backgroundColor;
+        this.data.Properties.BackgroundColor = this.backgroundColor.value;
         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);
+    }
+  }
 }

+ 10 - 0
src/store/index.js

@@ -17,6 +17,8 @@ export default new Vuex.Store({
         floorsArr: [], //楼层数组
         floorSelect: [], //楼层下拉框
         fmapID: '',
+        haveFengMap: false, //是否有蜂鸟地图的数据
+        isMessage: true,
     },
     getters: {
         floorsArr: (state) => state.floorsArr,
@@ -24,6 +26,8 @@ export default new Vuex.Store({
         plazaId: (state) => state.plazaId,
         plazas: (state) => state.plazas,
         fmapID: (state) => state.fmapID,
+        haveFengMap: (state) => state.haveFengMap,
+        isMessage: (state) => state.isMessage,
     },
     mutations: {
         // 设置是否登陆校验
@@ -38,6 +42,9 @@ export default new Vuex.Store({
             state.userInfo.orgCode = palyload.orgCode
             state.userInfo.username = palyload.username
         },
+        SETISMESSAGE(state, data) {
+            state.isMessage = data
+        },
         SETFLOORS(state, data) {
             state.floorsArr = data
             if (data.length > 0) {
@@ -53,6 +60,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

+ 98 - 12
src/views/legendLibrary/addForm.vue

@@ -114,6 +114,7 @@
                     @change='treeConfirm'
                     @focusChange='focusChange'
                     :hideClear='true'
+                    :selectedIds='selectedIds'
                 />
             </div>
         </div>
@@ -146,9 +147,8 @@ export default {
                     label: '线条'
                 }
             ],
-            options1: [],
-            options2: [],
 
+            selectedIds: [],
             borderLineOption: [
                 {
                     id: 'solid',
@@ -231,6 +231,11 @@ export default {
         },
         create() {
             //新增
+            if (this.ruleForm.FillColor.indexOf('#') > -1) {
+                this.ruleForm.FillColor = this.ruleForm.FillColor
+            } else {
+                this.ruleForm.FillColor = this.hexify(this.ruleForm.FillColor)
+            }
             let postParams = {
                 Content: [this.ruleForm]
             }
@@ -246,6 +251,11 @@ export default {
         },
         update() {
             //修改
+            if (this.ruleForm.FillColor.indexOf('#') > -1) {
+                this.ruleForm.FillColor = this.ruleForm.FillColor
+            } else {
+                this.ruleForm.FillColor = this.hexify(this.ruleForm.FillColor)
+            }
             let postParams = {
                 Content: [this.ruleForm]
             }
@@ -284,16 +294,92 @@ export default {
         },
         //rgba转成16进制
         hexify(color) {
-            var values = color
-                .replace(/rgba?\(/, '')
-                .replace(/\)/, '')
-                .replace(/[\s+]/g, '')
-                .split(',')
-            var a = parseFloat(values[3] || 1),
-                r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
-                g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
-                b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
-            return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2)
+            console.log(color, 'color')
+            // var values = color
+            //     .replace(/rgba?\(/, '')
+            //     .replace(/\)/, '')
+            //     .replace(/[\s+]/g, '')
+            //     .split(',')
+            // var a = parseFloat(values[3] || 1),
+            //     r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
+            //     g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
+            //     b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255),
+            //     opacity = ''
+            var opacity = ''
+            var rgb = color.split(',')
+            var r = parseInt(rgb[0].split('(')[1])
+            var g = parseInt(rgb[1])
+            var b = parseInt(rgb[2].split(')')[0])
+            switch (parseFloat(rgb[3] || 1) + '') {
+                case '0':
+                    opacity = '00'
+                    break
+                case '0.05':
+                    opacity = '0C'
+                    break
+                case '0.1':
+                    opacity = '19'
+                    break
+                case '0.15':
+                    opacity = '26'
+                    break
+                case '0.2':
+                    opacity = '33'
+                    break
+                case '0.25':
+                    opacity = '3F'
+                    break
+                case '0.3':
+                    opacity = '4C'
+                    break
+                case '0.35':
+                    opacity = '59'
+                    break
+                case '0.4':
+                    opacity = '66'
+                    break
+                case '0.45':
+                    opacity = '72'
+                    break
+                case '0.5':
+                    opacity = '7F'
+                    break
+                case '0.55':
+                    opacity = '8C'
+                    break
+                case '0.6':
+                    opacity = '99'
+                    break
+                case '0.65':
+                    opacity = 'A5'
+                    break
+                case '0.7':
+                    opacity = 'B2'
+                    break
+                case '0.75':
+                    opacity = 'BF'
+                    break
+                case '0.8':
+                    opacity = 'CC'
+                    break
+                case '0.85':
+                    opacity = 'D8'
+                    break
+                case '0.9':
+                    opacity = 'E5'
+                    break
+                case '0.95':
+                    opacity = 'F2'
+                    break
+                case '1':
+                    opacity = 'FF'
+                    break
+            }
+            var hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + opacity
+            console.log(hex, 'hrc')
+            return hex
+
+            // return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2) + opacity
         },
         // 背景颜色改变
         changBgColor(val) {

+ 2 - 17
src/views/legendLibrary/addLegend.vue

@@ -19,6 +19,7 @@
             :data='treeData'
             @cancel='treeCancel'
             @confirm='treeConfirm'
+            :key='new Date().getTime()'
         />
     </div>
 </template>
@@ -133,23 +134,7 @@ export default {
             if (this.info.Name == '') {
                 this.$message.info('请填写图例名称')
                 return false
-            }
-            //  else if (this.info.Type == 'Zone') {
-            //     if (this.info.FillColor == '') {
-            //         this.$message.info('请选择填充色以及透明度')
-            //         return false
-            //     }
-            //     if (this.info.Color == '') {
-            //         this.$message.info('请选择边框颜色')
-            //         return false
-            //     }
-            // } else if (this.info.Type == 'Line') {
-            //     if (this.info.Color == '') {
-            //         this.$message.info('请选择边框颜色')
-            //         return false
-            //     }
-            // }
-            else {
+            } else {
                 if (this.info.Type != 'Image' && this.info.Type != 'None') {
                     this.$refs.add.saveImg()
                 } else {

+ 89 - 1
src/views/legendLibrary/index.vue

@@ -169,6 +169,86 @@ import {
     getVisualization,
     queryRelation
 } from '@/api/legendLibrary.js'
+
+function hexToRgba(hex) {
+    let opacity = ''
+    switch (hex.slice(7, 9)) {
+        case '00':
+            opacity = '0'
+            break
+        case '0C':
+            opacity = '0.05'
+            break
+        case '19':
+            opacity = '0.1'
+            break
+        case '26':
+            opacity = '0.15'
+            break
+        case '33':
+            opacity = '0.2'
+            break
+        case '3F':
+            opacity = '0.25'
+            break
+        case '4C':
+            opacity = '0.3'
+            break
+        case '59':
+            opacity = '0.35'
+            break
+        case '66':
+            opacity = '0.4'
+            break
+        case '72':
+            opacity = '0.45'
+            break
+        case '7F':
+            opacity = '0.5'
+            break
+        case '8C':
+            opacity = '0.55'
+            break
+        case '99':
+            opacity = '0.6'
+            break
+        case 'A5':
+            opacity = '0.65'
+            break
+        case 'B2':
+            opacity = '0.7'
+            break
+        case 'BF':
+            opacity = '0.75'
+            break
+        case 'CC':
+            opacity = '0.8'
+            break
+        case 'D8':
+            opacity = '0.85'
+            break
+        case 'E5':
+            opacity = '0.9'
+            break
+        case 'F2':
+            opacity = '0.95'
+            break
+        case 'FF':
+            opacity = '1'
+            break
+    }
+    return (
+        'rgba(' +
+        parseInt('0x' + hex.slice(1, 3)) +
+        ',' +
+        parseInt('0x' + hex.slice(3, 5)) +
+        ',' +
+        parseInt('0x' + hex.slice(5, 7)) +
+        ',' +
+        opacity +
+        ')'
+    )
+}
 export default {
     components: { addLegend, Select },
     data() {
@@ -362,8 +442,16 @@ export default {
             }
             graphElementSearch({ postParams }).then(res => {
                 this.key++
-                this.tableData = res.Content
+                // this.tableData = res.Content
                 this.total = res.Total
+                console.log(res.Content)
+                this.tableData = res.Content.map(i => {
+                    if (i.FillColor.length == '9') {
+                        i.FillColor = hexToRgba(i.FillColor)
+                    }
+                    return i
+                })
+                console.log(this.tableData)
             })
         },