shaun-sheep преди 4 години
родител
ревизия
8c3293fe75
променени са 40 файла, в които са добавени 1624 реда и са изтрити 570 реда
  1. 4 4
      package.json
  2. BIN
      public/imgs/xzfbt.png
  3. 2 5
      public/systemConf.js
  4. 9 4
      src/api/legendLibrary.js
  5. 1 1
      src/api/public.js
  6. BIN
      src/assets/imgs/bj.png
  7. BIN
      src/assets/imgs/wtp.png
  8. BIN
      src/assets/imgs/xzfbt.png
  9. 117 10
      src/components/Legend/src/legend.vue
  10. 5 4
      src/components/floorList.vue
  11. 269 244
      src/components/floorMap/index.vue
  12. 79 15
      src/components/mapClass/EditScence.js
  13. 77 18
      src/components/mapClass/EditScence.ts
  14. 26 2
      src/components/mapClass/SPolygonItem.js
  15. 28 4
      src/components/mapClass/SPolygonItem.ts
  16. 10 3
      src/components/menuList.vue
  17. 160 0
      src/lib/items/SFHFQZoneLegendItem.js
  18. 170 0
      src/lib/items/SFHFQZoneLegendItem.ts
  19. 31 7
      src/lib/items/SImageLegendItem.js
  20. 31 8
      src/lib/items/SImageLegendItem.ts
  21. 1 1
      src/lib/items/SImageMarkerItem.ts
  22. 1 1
      src/lib/items/SLineMarkerItem.js
  23. 1 1
      src/lib/items/SLineMarkerItem.ts
  24. 167 0
      src/lib/items/SSCPZZoneLegendItem.js
  25. 176 0
      src/lib/items/SSCPZZoneLegendItem.ts
  26. 17 4
      src/lib/items/STextMarkerItem.js
  27. 15 5
      src/lib/items/STextMarkerItem.ts
  28. 14 14
      src/lib/items/SZoneLegendItem.js
  29. 15 13
      src/lib/items/SZoneLegendItem.ts
  30. 2 8
      src/lib/parsers/STopologyParser.js
  31. 60 64
      src/lib/parsers/STopologyParser.ts
  32. 2 0
      src/lib/types/Legend.ts
  33. 47 71
      src/main.js
  34. 5 2
      src/views/equipment/eqDialog.vue
  35. 62 36
      src/views/equipment/fenbuPic.vue
  36. 4 8
      src/views/equipment/index.vue
  37. 1 1
      src/views/floorFunc/index.vue
  38. 5 5
      src/views/other/zhsxOtherTable2.vue
  39. 6 5
      src/views/room/index.vue
  40. 4 2
      src/views/room/room4.vue

+ 4 - 4
package.json

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

BIN
public/imgs/xzfbt.png


+ 2 - 5
public/systemConf.js

@@ -23,11 +23,8 @@ var __systemConf = {
     // 系统编码
     systemCode: 'wandaBmGuide',
     conf: {
-        // TODO: 修改为对应的地址
-        // 开发环境地址 ip+port
-        editerUrl: 'http://192.168.200.1:8091/wandaEditer/', // 编辑器地址
-        // wandaBmGuideUrl: 'http://192.168.200.1:8090/wandaBmGuide/', // 管理书地址
-        wandaBmGuideUrl: 'http://192.168.200.100:8090/wandaBmGuide/', // 管理书地址
+        editerUrl: 'http://60.205.177.43:80/wandaEditer/', // 编辑器地址
+        wandaBmGuideUrl: 'http://60.205.177.43:80/wandaBmGuide/', //管理书地址
     },
 }
 window.__systemConf = __systemConf

+ 9 - 4
src/api/legendLibrary.js

@@ -1,4 +1,4 @@
-import httputils from '@/api/httputils'
+import httputils from "@/api/httputils"
 // 图例库-查询
 export function queryLegend({
     postParams
@@ -78,9 +78,8 @@ export function getVisualization({
     getParams
 }) {
     return httputils.getJson(`/serve/topology-wanda/graphElement/type/search`, getParams)
-
 }
-// 图例分层展示 
+// 图例分层展示
 export function groupByCategory({
     getParams
 }) {
@@ -92,7 +91,6 @@ export function graphElementSearch({
     postParams
 }) {
     return httputils.postJson(`/serve/topology-wanda/graphElement/search`, postParams)
-
 }
 // 更新图例关系信息
 export function graphElementUpdate({
@@ -107,4 +105,11 @@ export function queryDeviceAndPOsition({
     postParams
 }) {
     return httputils.postJson(`/data/data/t_system_wzfl/query`, postParams)
+}
+
+//图形查询
+export function queryPics({
+    postParams
+}) {
+    return httputils.postJson(`/serve/topology-wanda/graph/query`, postParams)
 }

+ 1 - 1
src/api/public.js

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

BIN
src/assets/imgs/bj.png


BIN
src/assets/imgs/wtp.png


BIN
src/assets/imgs/xzfbt.png


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

@@ -6,7 +6,7 @@
 <template>
     <div>
         <div class='legend-container'>
-            <div class='legend' @click='showTl'>图例</div>
+            <div class='legend' @click='showTl' v-if='type==1'>图例</div>
             <el-collapse-transition>
                 <div class='legend-tab' v-if='show'>
                     <div class='legend-table'>
@@ -37,7 +37,17 @@
                 </div>
             </el-collapse-transition>
         </div>
-        <div class='edit_map'>
+
+        <!-- 单独展示新增分布图 -->
+        <div class='edit_map1' v-if='floors.length==0' @click='addFloor'>
+            <el-tooltip effect='dark' content='新增分布图' placement='left'>
+                <!-- <p class='tltk' style='margin-left: -5px;'> -->
+                <img src='@/assets/imgs/xzfbt.png' alt />
+                <!-- </p> -->
+            </el-tooltip>
+        </div>
+
+        <div class='edit_map' v-else>
             <!-- 备注编辑器 -->
             <el-tooltip effect='dark' content='编辑备注' placement='left'>
                 <span v-if='systemName != "土建系统"' class='bjtk' @click='legendClik'>备注</span>
@@ -48,8 +58,14 @@
                     <img src='@/assets/imgs/bjtl.png' alt />
                 </p>
             </el-tooltip>
-            <!-- 编辑平面图 -->
-            <el-tooltip v-if='editPmt' class='bjpmt' effect='dark' content='编辑平面图' placement='left'>
+            <!-- 新增分布图 -->
+            <el-tooltip effect='dark' content='新增分布图' placement='left' v-if='floorSelect.length!=floors.length'>
+                <p class='tltk' style='margin-left: -5px;' @click='addFloor'>
+                    <img src='@/assets/imgs/xzfbt.png' alt />
+                </p>
+            </el-tooltip>
+            <!-- 编辑分布图 -->
+            <el-tooltip v-if='editPmt' class='bjpmt' effect='dark' content='编辑分布图' placement='left'>
                 <span class='edit-icon' @click='goToEditer'>
                     <i class='el-icon-edit' style='color:#fff;font-size:16px;'></i>
                 </span>
@@ -58,6 +74,17 @@
                 <i class='el-icon-edit' style='color:#fff;font-size:16px;'></i>
             </span>
         </div>
+        <div class='select-floor' v-if='isFloor'>
+            <p class='p1'>请选择需要创建“消防泵房引出管路分布图”的楼层</p>
+            <p class='p2'>
+                <Select width='240' tipPlace='top' caption='楼层:' size='mini' :selectdata='floorSelect' :placeholder='"请选择"'></Select>
+            </p>
+            <p class='p3'>
+                <span @click='cancel'>取消</span>
+                <span @click='determine'>确定</span>
+            </p>
+        </div>
+
         <legend-remarks @queryMarks='queryMarks' ref='EditdMarks'></legend-remarks>
     </div>
 </template>
@@ -88,13 +115,14 @@ export default {
             multipleSelection: [],
             editText: '',
             editSwitch: false,
+            isFloor: false,
             editPmt: true //是否有跳转道图例库的权限
         }
     },
     computed: {
-        ...mapGetters(['plazaId', 'fmapID'])
+        ...mapGetters(['plazaId', 'fmapID', 'floorSelect'])
     },
-    props: ['systemName'],
+    props: ['systemName', 'floors', 'type'],
     components: { lengendView, legendRemarks, lengendEdit },
     methods: {
         testClick(data) {},
@@ -113,8 +141,8 @@ export default {
 
             let data = {}
             queryRead({ data, postParams }).then(res => {
-                //console.log('备注', res.data.Data[0].Note)
-                if (res.data.Data[0].Note) {
+                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) {
                         this.remarksText = `${note}`
@@ -156,7 +184,9 @@ export default {
             let categoryId = this.$cookie.get('categoryId')
             const { conf } = window.__systemConf,
                 { editerUrl } = conf
-            let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&fmapID=${this.fmapID}`
+            let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&FloorName=${this.$cookie.get(
+                'floorNow'
+            )}&fmapID=${this.fmapID}`
             let url = editerUrl + 'editer?' + encodeURIComponent(data)
             window.open(url, true)
         },
@@ -235,9 +265,23 @@ export default {
             } else {
                 this.isShow2()
             }
+        },
+        addFloor() {
+            console.log(111111)
+            this.isFloor = true
+        },
+        // 新增楼层取消
+        cancel() {
+            this.isFloor = false
+        },
+        // 新增楼层确定
+        determine() {
+            this.isFloor = false
         }
     },
-    mounted() {}
+    mounted() {
+        console.log(this.floors)
+    }
 }
 </script>
 <style lang="less" scoped>
@@ -330,6 +374,69 @@ export default {
 .edit_map:hover .bjtk {
     display: block;
 }
+.edit_map1 {
+    position: fixed;
+    bottom: 28px;
+    right: 30px;
+    z-index: 1;
+    .select-floor {
+        width: 288px;
+        height: 220px;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+        border-radius: 2px;
+        border: 1px solid rgba(228, 229, 231, 1);
+        position: relative;
+        right: 0;
+    }
+}
+.select-floor {
+    width: 288px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
+    border-radius: 2px;
+    border: 1px solid rgba(228, 229, 231, 1);
+    position: fixed;
+    bottom: 40px;
+    right: 70px;
+    padding: 24px;
+    .p1 {
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        line-height: 19px;
+    }
+    .p2 {
+        margin-top: 8px;
+        margin-bottom: 68px;
+    }
+    .p3 {
+        display: flex;
+        justify-content: flex-end;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        line-height: 22px;
+        text-align: center;
+        span:nth-of-type(1) {
+            width: 58px;
+            height: 24px;
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid rgba(195, 199, 203, 1);
+            margin-right: 12px;
+            border-radius: 2px;
+            cursor: pointer;
+        }
+        span:nth-of-type(2) {
+            width: 58px;
+            height: 24px;
+            background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+            border-radius: 2px;
+            color: rgba(255, 255, 255, 1);
+            border-radius: 2px;
+            cursor: pointer;
+        }
+    }
+}
 </style>
 <style lang="less">
 .legend-container {

+ 5 - 4
src/components/floorList.vue

@@ -6,7 +6,7 @@
 <template>
     <div class='floor-box'>
         <div class='floor-list'>
-            <div v-if='floorsArr.length>5'>
+            <div v-if='floorsArr.length>8'>
                 <i
                     class='el-icon-caret-top icon-top'
                     :class='{disabled:currentFloorId == floorsArr[0].seq }'
@@ -18,7 +18,8 @@
                 <i class='el-icon-caret-top icon-top' :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else style='color:#ccc'></i>
             </div>
             <div class='floor-out'>
-                <div class='floor-center' :style='{ marginTop : marginTop }'>
+                <!-- :style='{ marginTop : marginTop }' -->
+                <div class='floor-center'>
                     <div
                         class='floor-item'
                         :class='item.seq == currentFloorId?"isActive":""'
@@ -28,7 +29,7 @@
                     >{{item.code}}</div>
                 </div>
             </div>
-            <div v-if='floorsArr.length>5'>
+            <div v-if='floorsArr.length>8'>
                 <i
                     class='el-icon-caret-bottom icon-bottom'
                     :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
@@ -243,7 +244,7 @@ export default {
         padding: 28px 4px;
         text-align: center;
         .floor-out {
-            height: 160px;
+            height: 260px;
             overflow: hidden;
             // overflow-y: auto;
             position: relative;

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

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

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

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

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

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

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

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

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

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

+ 10 - 3
src/components/menuList.vue

@@ -22,7 +22,7 @@
                 <span class='span1'>图例库</span>
             </span>
 
-            <span class='span-out'>
+            <span @click='toDrafts' class='span-out'>
                 <img class='img2' src='../assets/imgs/cgx.png' alt />
                 <span class='span2'>草稿箱</span>
                 <span class='span2-num' v-if='value<=99'>{{value}}</span>
@@ -81,6 +81,14 @@ export default {
         this.handleRoute(this.$route)
     },
     methods: {
+        //入草稿箱
+        toDrafts() {
+            const { conf } = window.__systemConf,
+                { editerUrl } = conf
+            let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}`
+            let url = editerUrl + 'drafts?' + encodeURIComponent(data)
+            window.open(url, true)
+        },
         currentTime() {
             this.times = moment().format('YYYY.MM.DD HH:mm')
             setTimeout(this.currentTime, 1000)
@@ -130,8 +138,7 @@ export default {
                 { wandaBmGuideUrl } = conf
             window.open(`${wandaBmGuideUrl}home/legendLibrary`, true)
         }
-    },
-    components: {}
+    }
 }
 </script>
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

+ 47 - 71
src/main.js

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

+ 5 - 2
src/views/equipment/eqDialog.vue

@@ -151,8 +151,8 @@ export default {
             if (this.dialogInfo.children.length > 0) {
                 this.typecode = this.dialogInfo.children[`${tab.index}`].param.type_code
                 this.diff = this.dialogInfo.children[`${tab.index}`].param.diff
-            }
-            if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL') {
+            }     
+            if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL' && this.typecode!="FBT") {
                 this.initImage(this.typecode)
             }
             this.tabLabel = tab.label
@@ -304,6 +304,9 @@ export default {
         color: rgba(31, 36, 41, 1);
         border: 1px solid rgba(195, 199, 203, 1);
     }
+    .el-tab-pane {
+        height: 60% !important;
+    }
     .el-tabs,
     .el-tabs__content {
         height: 700px;

+ 62 - 36
src/views/equipment/fenbuPic.vue

@@ -2,25 +2,31 @@
     <div class='fenbu-box'>
         <!-- 图例 -->
         <div class='legend-boxs'>
-            <Legend></Legend>
+            <Legend :floors='floors' type='0'></Legend>
         </div>
-        <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
-        <!-- <div class='additional-box'>
+        <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
+        <div class='additional-box' v-if='floors.length>0'>
             <div class='additional' @click='additionalColl'>
                 <img src='../../assets/imgs/bg.png' alt />
             </div>
             <el-collapse-transition>
                 <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
             </el-collapse-transition>
-        </div>-->
-        <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
+        </div>
+        <div v-show='floors.length>0'>
+            <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
+        </div>
+        <div class='nodata' v-show='floors.length==0'>
+            <img class='img1' src='@/assets/imgs/wtp.png' alt />
+            <div class='no-img'>暂无分布图,请手动绘制</div>
+        </div>
     </div>
 </template>
 <script>
 import floorMap from '@/components/floorMap/index.vue'
 import floorList from '@/components/floorList.vue'
 import { mapGetters } from 'vuex'
-
+import { queryPics } from '@/api/legendLibrary.js'
 export default {
     components: { floorMap, floorList },
     data() {
@@ -31,7 +37,8 @@ export default {
                 code: 'F1'
             },
             loadName: '',
-            type: ''
+            type: '',
+            floors: []
         }
     },
     computed: {
@@ -41,47 +48,52 @@ export default {
         emitFloor(item) {
             this.floorInfo = item
             this.$refs.floorMap.init(this.floorInfo.gname)
-            this.init()
         },
         additionalColl() {
             this.show = !this.show
         },
-        init() {
-            this.loadName = `楼层功能-${this.floorInfo.code}`
+        getFloorData() {
+            let postParams = {
+                Distinct: true,
+                Filters: "projectId ='1000423';categoryId='LCGN' or categoryId='XFBFYCFL';isPub=true",
+                PageNumber: 1,
+                PageSize: 500,
+                Projection: ['floorId']
+            }
+            let floor = []
+            queryPics({ postParams }).then(res => {
+                console.log(res)
+                if (res.Total == 0) {
+                    this.floors = []
+                } else {
+                    floor = res.Content
+                    this.floorsArr.forEach(el => {
+                        floor.forEach(ele => {
+                            if (ele.floorId == el.gname) {
+                                this.floors.push({
+                                    gname: el.gname,
+                                    code: el.code
+                                })
+                            }
+                        })
+                    })
+                }
+                console.log(this.floors)
+            })
         }
     },
     mounted() {
-        this.init()
-        this.$refs.floorMap.init(this.floorInfo.gname)
+        // this.getFloorData()
+        // this.$refs.floorMap.init(this.floorInfo.gname)
     }
 }
 </script>
 <style lang="less">
 .fenbu-box {
-    background: rgba(242, 245, 247, 1);
-    height: calc(100vh - 48px);
-    flex: 1;
-    .eq-title {
-        position: fixed;
-        z-index: 2;
-        top: 92px;
-        left: 242px;
-        width: 140px;
-        height: 32px;
-        background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
-        box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
-        color: #025baa;
-        font-size: 16px;
-        &::before {
-            width: 2px;
-            height: 16px;
-            background: rgba(2, 91, 170, 1);
-            display: inline-block;
-            content: '';
-            margin-right: 10px;
-            margin-top: 8px;
-        }
-    }
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
     .legend-boxs {
         position: fixed;
         z-index: 9;
@@ -123,5 +135,19 @@ export default {
             z-index: 2;
         }
     }
+    .nodata {
+        height: calc(100%-50px);
+        .img1 {
+            width: 126px;
+            height: 121px;
+        }
+        .no-img {
+            font-size: 16px;
+            font-family: MicrosoftYaHei;
+            color: rgba(100, 108, 115, 1);
+
+            margin-top: 8px;
+        }
+    }
 }
 </style>

+ 4 - 8
src/views/equipment/index.vue

@@ -10,11 +10,7 @@
         <div class='eq-bottom'>
             <div class='eq-left'>
                 <ul v-for='(eve,index) in everySystem' :key='"o"+index'>
-                    <li
-                        class='li-style'
-                        :class='{"is-active": eve.id}' 
-                        @click='dialogVisible(eve)'
-                    >
+                    <li class='li-style' :class='{"is-active": eve.id}' @click='dialogVisible(eve)'>
                         <span class='circle'></span>
                         <span class='hanzi'>{{eve.label}}</span>
                     </li>
@@ -29,7 +25,7 @@
                     </div>
                     <div class='eq-content'>
                         <div class='legend-boxs'>
-                            <Legend :systemName='systemName'></Legend>
+                            <Legend :systemName='systemName' :floor='floorsArr' type='1'></Legend>
                         </div>
                         <floorMap ref='floorMap' :id='"equip"' :loadName='loadName' :type='"system"'></floorMap>
                         <div class='additional-box' v-if='fqPic.length>0'>
@@ -78,7 +74,7 @@ export default {
             fqPic: [],
             loadName: '',
             type: '',
-            objCount:[]
+            objCount: []
         }
     },
     components: { floorList, eqDialog, floorMap, editList },
@@ -97,7 +93,7 @@ export default {
             this.init()
         },
         //判断有没有原理图,如果没有则不出现系统原理图列表li
-        emitCount(objCount){
+        emitCount(objCount) {
             this.objCount = objCount
         },
         emitFloor(item) {

+ 1 - 1
src/views/floorFunc/index.vue

@@ -5,7 +5,7 @@
         </div>
         <!-- 图例 -->
         <div class='legend-boxs'>
-            <Legend></Legend>
+            <Legend :floor='floorsArr' type='1'></Legend>
         </div>
         <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
         <!-- <div class='additional-box'>

+ 5 - 5
src/views/other/zhsxOtherTable2.vue

@@ -56,16 +56,16 @@
             style='width: 100%;margin-top:12px'
         >
             <el-table-column label='序号' type='index' width='50'></el-table-column>
-            <el-table-column prop='name' :show-overflow-tooltip='true' sortable label='任务名称'>
+            <el-table-column prop :show-overflow-tooltip='true' sortable label='任务名称'>
                 <template slot-scope='{row}'>{{row.description||'--'}}</template>
             </el-table-column>
-            <el-table-column prop='type' label='状态' width='90'>
-                <template slot-scope='{row}'>{{row.status2||'--'}}</template>
+            <el-table-column prop label='状态' width='90'>
+                <template slot-scope='{row}'>{{row.status||'--'}}</template>
             </el-table-column>
-            <el-table-column prop='thing' label='部门' width='90' :show-overflow-tooltip='true'>
+            <el-table-column prop label='部门' width='90' :show-overflow-tooltip='true'>
                 <template slot-scope='{row}'>{{row.zgbm||'--'}}</template>
             </el-table-column>
-            <el-table-column prop='name' :show-overflow-tooltip='true' label='检测结论'>
+            <el-table-column prop :show-overflow-tooltip='true' label='检测结论'>
                 <template slot-scope='{row}'>{{row.conclusion||'--'}}</template>
             </el-table-column>
         </el-table>

+ 6 - 5
src/views/room/index.vue

@@ -506,7 +506,7 @@ export default {
     methods: {
         handleClick(tab) {
             if (tab.label == '机房布置图') {
-                this.Index()
+                this.Index(this.smsxtArr.smsxt)
             } else if (tab.label == '配电室低压柜及出线明细表') {
                 this.Index1()
             } else if (tab.label == '机房内核心设备') {
@@ -522,13 +522,13 @@ export default {
         show() {
             this.dialogFormVisible = !this.dialogFormVisible
         },
-        Index() {
+        Index(system) {
             this.picFloor = this.$cookie.get('floorNow')
             let getParams = {
                 typename: '位置布置图',
                 location: '1809',
                 module: '1002',
-                system: '1002',
+                system: system,
                 plazaId: this.plazaId
             }
             queryPic({ getParams }).then(res => {
@@ -812,13 +812,14 @@ export default {
             this.smsxtArr = []
             let params = {
                 getParams: {
-                    locationid: '5209',
+                    locationid: '1890',
                     plazaId: this.plazaId
                 }
             }
             querySystem(params).then(res => {
                 this.smsxtArr = res.data[0]
                 console.log(this.smsxtArr)
+                this.Index(this.smsxtArr.smsxt)
                 this.content = `查看${this.$cookie.get('floorNow')}层${this.smsxtArr.smsxtname}分布图`
             })
         },
@@ -845,7 +846,7 @@ export default {
         }
     },
     mounted() {
-        this.Index()
+        // this.Index()
     }
 }
 </script>

+ 4 - 2
src/views/room/room4.vue

@@ -36,7 +36,7 @@
                         <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
                     </el-table-column>
                     <el-table-column prop label='费用(万元)' min-width='100' show-overflow-tooltip resizable>
-                        <template slot-scope='{row}'>{{row.cost||'--'}}</template>
+                        <template slot-scope='{row}'>{{row.cost?number_format(row.cost):'--'}}</template>
                     </el-table-column>
                     <el-table-column prop label='费用出处' show-overflow-tooltip resizable>
                         <template slot-scope='{row}'>{{row.source||'--'}}</template>
@@ -72,6 +72,7 @@
 <script>
 import Select from '@/components/Select/Select.vue'
 import moment from 'moment'
+import { number_format } from '@/utils/format.js'
 
 export default {
     props: ['table4', 'total', 'page', 'size', 'loading'],
@@ -79,7 +80,8 @@ export default {
         return {
             dateVal: '',
             value1: '',
-            searVal: ''
+            searVal: '',
+            number_format
         }
     },
     components: { Select },