fujunwen 4 年 前
コミット
e047fe454b
85 ファイル変更2054 行追加2790 行削除
  1. 12 0
      package.json
  2. BIN
      public/favicon.ico
  3. 2 1
      public/systemConf.js
  4. 2 2
      src/App.vue
  5. 1 0
      src/api/httputils.js
  6. 1 1
      src/api/login.js
  7. 8 0
      src/api/public.js
  8. 15 6
      src/assets/css/rotation.css
  9. 12 5
      src/assets/css/rotation.less
  10. BIN
      src/assets/imgs/1pxlines.png
  11. BIN
      src/assets/imgs/bjs.png
  12. BIN
      src/assets/imgs/dashedLines.png
  13. BIN
      src/assets/imgs/dotLines.png
  14. BIN
      src/assets/imgs/iconBlackBottom.png
  15. BIN
      src/assets/imgs/iconBlackTop.png
  16. BIN
      src/assets/imgs/iconLightBottom.png
  17. BIN
      src/assets/imgs/iconLightTop.png
  18. BIN
      src/assets/imgs/yl.png
  19. 112 27
      src/components/Legend/src/legend.vue
  20. 9 4
      src/components/PicLarge/src/picLarge.vue
  21. 8 2
      src/components/Rotation/src/rotation.vue
  22. 2 1
      src/components/Select/Select.vue
  23. 1 1
      src/components/editLengend.vue
  24. 57 64
      src/components/floorList.vue
  25. 14 4
      src/components/floorMap/canvasFun.vue
  26. 319 252
      src/components/floorMap/index.vue
  27. 0 650
      src/components/mapClass/SPolygonItem.js
  28. 0 704
      src/components/mapClass/SPolygonItem.ts
  29. 44 5
      src/components/menuList.vue
  30. 48 11
      src/components/viewLengend.vue
  31. 13 1
      src/lib/FloorScene.js
  32. 1 1
      src/lib/GraphView.js
  33. 34 7
      src/lib/items/SFHFQZoneLegendItem.js
  34. 44 18
      src/lib/items/SFHFQZoneLegendItem.ts
  35. 3 3
      src/lib/items/SImageLegendItem.js
  36. 3 3
      src/lib/items/SImageLegendItem.ts
  37. 0 155
      src/lib/items/SImgTextItem.js
  38. 0 173
      src/lib/items/SImgTextItem.ts
  39. 40 4
      src/lib/items/SLineMarkerItem.js
  40. 41 6
      src/lib/items/SLineMarkerItem.ts
  41. 34 7
      src/lib/items/SSCPZZoneLegendItem.js
  42. 48 20
      src/lib/items/SSCPZZoneLegendItem.ts
  43. 5 60
      src/lib/items/STextMarkerItem.js
  44. 5 59
      src/lib/items/STextMarkerItem.ts
  45. 42 8
      src/lib/items/SZoneLegendItem.js
  46. 52 20
      src/lib/items/SZoneLegendItem.ts
  47. 28 3
      src/lib/items/TipelineItem.js
  48. 29 3
      src/lib/items/TipelineItem.ts
  49. 20 4
      src/store/index.js
  50. 3 0
      src/utils/bus.js
  51. 12 13
      src/utils/plugins/components.js
  52. 37 17
      src/views/equipment/eqDialog.vue
  53. 36 54
      src/views/equipment/fenbuPic.vue
  54. 49 21
      src/views/equipment/index.vue
  55. 9 6
      src/views/equipment/table/djspTable.vue
  56. 25 11
      src/views/equipment/table/eqDetaileDialog.vue
  57. 25 17
      src/views/equipment/table/eqListTable.vue
  58. 13 11
      src/views/equipment/table/inputDIalog.vue
  59. 8 3
      src/views/equipment/table/lookPageTable.vue
  60. 19 12
      src/views/equipment/table/otherTable.vue
  61. 6 5
      src/views/equipment/table/recordDialog.vue
  62. 27 11
      src/views/equipment/table/standTable.vue
  63. 9 5
      src/views/equipment/table/tjTable.vue
  64. 29 21
      src/views/equipment/table/wbTable.vue
  65. 26 26
      src/views/equipment/table/wxTable.vue
  66. 28 23
      src/views/equipment/table/zwTable.vue
  67. 7 46
      src/views/floorFunc/index.vue
  68. 190 52
      src/views/legendLibrary/addForm.vue
  69. 53 26
      src/views/legendLibrary/addLegend.vue
  70. 193 57
      src/views/legendLibrary/index.vue
  71. 17 4
      src/views/legendRules/index.vue
  72. 2 2
      src/views/other/gcfz1.vue
  73. 2 1
      src/views/other/gcfz2.vue
  74. 2 1
      src/views/other/gcfzDialog.vue
  75. 2 0
      src/views/other/index.vue
  76. 10 3
      src/views/other/zhsxOther.vue
  77. 12 8
      src/views/other/zhsxOtherTable1.vue
  78. 4 3
      src/views/other/zhsxOtherTable2.vue
  79. 6 2
      src/views/room/detail.vue
  80. 29 2
      src/views/room/index.vue
  81. 2 1
      src/views/room/room1.vue
  82. 6 3
      src/views/room/room2.vue
  83. 10 6
      src/views/room/room3.vue
  84. 24 14
      src/views/room/room4.vue
  85. 13 8
      src/views/room/room5.vue

+ 12 - 0
package.json

@@ -8,12 +8,24 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+<<<<<<< HEAD
+=======
+        "@saga-web/base": "2.1.22",
+        "@saga-web/big": "1.0.49",
+        "@saga-web/draw": "2.1.100",
+        "@saga-web/feng-map": "1.0.11",
+        "@saga-web/graph": "2.1.93",
+>>>>>>> ba5c4eb9967ac6312b12415550c83bcd97127584
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",
         "core-js": "^3.4.4",
         "element-ui": "^2.13.2",
+<<<<<<< HEAD
         "lodash": "^4.17.15",
         "meri-design": "^1.2.8",
+=======
+        "meri-design": "^1.3.2",
+>>>>>>> ba5c4eb9967ac6312b12415550c83bcd97127584
         "moment": "^2.24.0",
         "quill": "^1.3.7",
         "vue": "^2.6.10",

BIN
public/favicon.ico


+ 2 - 1
public/systemConf.js

@@ -25,7 +25,8 @@ var __systemConf = {
     conf: {
         // 阿里云
         editerUrl: 'http://60.205.177.43:80/wandaEditer/', // 编辑器地址
-        wandaBmGuideUrl: 'http://60.205.177.43:80/wandaBmGuide/', //管理书地址
+        // wandaBmGuideUrl: 'http://60.205.177.43:80/wandaBmGuide/', //管理书地址
+        wandaBmGuideUrl: 'http://192.168.200.100:8090/wandaBmGuide/', //管理书地址
     },
 }
 window.__systemConf = __systemConf

+ 2 - 2
src/App.vue

@@ -17,7 +17,7 @@ export default {
       canvasID: "",
       key: "23f30a832a862c58637a4aadbf50a566",
       appName: "万达可视化系统",
-      mapServerURL: `/wdfn`
+      mapServerURL: `http://map.wanda.cn/editor`
     };
   },
   mounted() {
@@ -171,7 +171,7 @@ table {
 
 body ::-webkit-scrollbar {
   width: 5px;
-  height: 5px;
+  height: 8px;
 }
 
 body ::-webkit-scrollbar-track {

+ 1 - 0
src/api/httputils.js

@@ -24,6 +24,7 @@ axiosservice.interceptors.request.use(
         if (token) {
             config.headers = {
                 'sso-token': token,
+                'isPreview': false //默认false,当预览开启的时候是true
             }
         }
         return config

+ 1 - 1
src/api/login.js

@@ -9,5 +9,5 @@ export function queryFloor(params) {
     return httputils.getJson(`/data/data/plaza/floor`, params)
 }
 export function queryfmapID(params) {
-    return httputils.getJson(`/version`, params)
+    return httputils.getJson(`http://mapapp.wanda.cn/sgmap/mapversion`, params)
 }

+ 8 - 0
src/api/public.js

@@ -41,3 +41,11 @@ export function updateRead({ postParams }) {
 export function readGroup(postParams) {
     return httputils.postJson(`/serve/topology-wanda/graph/read`, postParams)
 }
+// 查询草稿箱数量
+export function queryDraftNum(data) {
+    return httputils.postJson(`/serve/topology-wanda/graph/query`, data)
+}
+// 查询铺位名称
+export function queryBrand({ data, postParams }) {
+    return httputils.fetchJson(`/data/data/tb_brand_intentiondetail/query`, data, postParams)
+}

+ 15 - 6
src/assets/css/rotation.css

@@ -1,7 +1,7 @@
 .overview {
   background: #f2f5f7;
   padding: 16px 20px 20px 20px;
-  height: 100%;
+  height: calc(100% - 48px);
   width: 100%;
 }
 .overview .view-title {
@@ -27,7 +27,6 @@
   font-family: MicrosoftYaHeiSemibold;
   font-weight: bold;
   color: #1f2429;
-  line-height: 21px;
 }
 .overview .view-title .view-button {
   font-family: PingFangSC-Regular, PingFang SC;
@@ -42,6 +41,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  border-radius: 4px;
 }
 .overview .view-title .view-button img {
   display: inline-block;
@@ -62,11 +62,13 @@
 }
 .overview .view-box .view-left .lb-left {
   width: 100%;
+  height: 66%;
   flex: 1;
   margin-top: 12px;
   margin-bottom: 10px;
   position: relative;
   border: 1px solid #ccc;
+  border-radius: 4px;
 }
 .overview .view-box .view-left .lb-left img {
   width: 100%;
@@ -75,11 +77,12 @@
   z-index: 99;
   position: absolute;
   top: 0;
-  right: 2px;
+  right: 0px;
   width: 32px;
   height: 32px;
   background: rgba(0, 0, 0, 0.6);
   border-radius: 0px 4px 0px 4px;
+  cursor: pointer;
 }
 .overview .view-box .view-left .lb-left .lb-img {
   z-index: 101;
@@ -88,6 +91,7 @@
   position: absolute;
   top: 8px;
   right: 10px;
+  cursor: pointer;
 }
 .overview .view-box .view-left .lb-bottom {
   height: 34%;
@@ -101,6 +105,7 @@
   align-items: center;
   background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
   margin-bottom: 12px;
+  border-radius: 4px;
 }
 .overview .view-box .view-left .lb-bottom nav span:nth-of-type(1) {
   width: 2px;
@@ -116,7 +121,6 @@
   font-family: MicrosoftYaHeiSemibold;
   font-weight: bold;
   color: #025baa;
-  line-height: 19px;
 }
 .overview .view-box .view-left .lb-bottom .place-p1 {
   height: 24px;
@@ -130,6 +134,7 @@
   width: 16px;
   height: 16px;
   margin-right: 3px;
+  margin-top: -3px;
 }
 .overview .view-box .view-left .lb-bottom .place-p2 {
   margin: 16px 0;
@@ -191,20 +196,23 @@
 }
 .overview .view-box .view-right .view-right-box .lb-right {
   flex: 1;
+  height: 47%;
   margin-top: 12px;
   margin-bottom: 10px;
   position: relative;
   border: 1px solid #ccc;
+  border-radius: 4px;
 }
 .overview .view-box .view-right .view-right-box .lb-right .lb-icon {
   z-index: 99;
   position: absolute;
   top: 0;
-  right: 2px;
+  right: 0px;
   width: 32px;
   height: 32px;
   background: rgba(0, 0, 0, 0.6);
   border-radius: 0px 4px 0px 4px;
+  cursor: pointer;
 }
 .overview .view-box .view-right .view-right-box .lb-right .lb-img {
   z-index: 101;
@@ -213,6 +221,7 @@
   position: absolute;
   top: 8px;
   right: 10px;
+  cursor: pointer;
 }
 .overview .view-box .view-right .view-right-box .lb-right-bottom {
   height: 53%;
@@ -227,6 +236,7 @@
   align-items: center;
   background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
   margin-bottom: 12px;
+  border-radius: 4px;
 }
 .overview .view-box .view-right .view-right-box .lb-right-bottom nav span:nth-of-type(1) {
   width: 2px;
@@ -242,7 +252,6 @@
   font-family: MicrosoftYaHeiSemibold;
   font-weight: bold;
   color: #025baa;
-  line-height: 19px;
 }
 .overview .view-box .view-right .view-right-box .lb-right-bottom .view-right-bottom {
   overflow: auto;

+ 12 - 5
src/assets/css/rotation.less

@@ -25,7 +25,6 @@
                 font-family: MicrosoftYaHeiSemibold;
                 font-weight: bold;
                 color: #1f2429;
-                line-height: 21px;
             }
         }
         .view-button {
@@ -41,6 +40,7 @@
             align-items: center;
             justify-content: center;
             cursor: pointer;
+            border-radius: 4px;
             img {
                 display: inline-block;
                 height: 16px;
@@ -69,6 +69,7 @@
                 margin-bottom: 10px;
                 position: relative;
                 border: 1px solid #ccc;
+                border-radius: 4px;
                 img {
                     width: 100%;
                     // height: 100%;
@@ -77,11 +78,12 @@
                     z-index: 99;
                     position: absolute;
                     top: 0;
-                    right: 2px;
+                    right: 0px;
                     width: 32px;
                     height: 32px;
                     background: rgba(0, 0, 0, 0.6);
                     border-radius: 0px 4px 0px 4px;
+                    cursor: pointer;
                 }
                 .lb-img {
                     z-index: 101;
@@ -90,6 +92,7 @@
                     position: absolute;
                     top: 8px;
                     right: 10px;
+                    cursor: pointer;
                 }
             }
             .lb-bottom {
@@ -103,6 +106,7 @@
                     align-items: center;
                     background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
                     margin-bottom: 12px;
+                    border-radius: 4px;
                     span:nth-of-type(1) {
                         width: 2px;
                         height: 16px;
@@ -117,7 +121,6 @@
                         font-family: MicrosoftYaHeiSemibold;
                         font-weight: bold;
                         color: #025baa;
-                        line-height: 19px;
                     }
                 }
                 .place-p1 {
@@ -131,6 +134,7 @@
                         width: 16px;
                         height: 16px;
                         margin-right: 3px;
+                        margin-top: -3px;
                     }
                 }
                 .place-p2 {
@@ -199,15 +203,17 @@
                     margin-bottom: 10px;
                     position: relative;
                     border: 1px solid #ccc;
+                    border-radius: 4px;
                     .lb-icon {
                         z-index: 99;
                         position: absolute;
                         top: 0;
-                        right: 2px;
+                        right: 0px;
                         width: 32px;
                         height: 32px;
                         background: rgba(0, 0, 0, 0.6);
                         border-radius: 0px 4px 0px 4px;
+                        cursor: pointer;
                     }
                     .lb-img {
                         z-index: 101;
@@ -216,6 +222,7 @@
                         position: absolute;
                         top: 8px;
                         right: 10px;
+                        cursor: pointer;
                     }
                 }
                 .lb-right-bottom {
@@ -230,6 +237,7 @@
                         align-items: center;
                         background: linear-gradient(270deg, rgba(54, 156, 247, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
                         margin-bottom: 12px;
+                        border-radius: 4px;
                         span:nth-of-type(1) {
                             width: 2px;
                             height: 16px;
@@ -244,7 +252,6 @@
                             font-family: MicrosoftYaHeiSemibold;
                             font-weight: bold;
                             color: #025baa;
-                            line-height: 19px;
                         }
                     }
                     .view-right-bottom {

BIN
src/assets/imgs/1pxlines.png


BIN
src/assets/imgs/bjs.png


BIN
src/assets/imgs/dashedLines.png


BIN
src/assets/imgs/dotLines.png


BIN
src/assets/imgs/iconBlackBottom.png


BIN
src/assets/imgs/iconBlackTop.png


BIN
src/assets/imgs/iconLightBottom.png


BIN
src/assets/imgs/iconLightTop.png


BIN
src/assets/imgs/yl.png


+ 112 - 27
src/components/Legend/src/legend.vue

@@ -6,10 +6,22 @@
 <template>
     <div>
         <div class='legend-container'>
-            <div class='legend' @click='showTl' v-if='type==1'>图例</div>
-            <el-collapse-transition>
+            <div v-show='!show' class='legend' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage'>图例</div>
+            <div v-show='show' class='legend2' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage'>图例</div>
+            <el-collapse-transition v-if='(type==1 || floors.length>0)&& isMessage'>
                 <div class='legend-tab' v-if='show'>
-                    <div class='legend-table'>
+                    <div class='legend-table2' v-if='systemName=="土建系统"'>
+                        <lengend-view
+                            v-if='viewTable.length>=0'
+                            :loading='loading'
+                            :viewTable='viewTable'
+                            @changeSwitch='handleSwich'
+                            :remarksText='remarksText'
+                            ref='viewLengend'
+                            :systemName='systemName'
+                        ></lengend-view>
+                    </div>
+                    <div class='legend-table' v-else>
                         <lengend-view
                             v-if='viewTable.length>=0'
                             :loading='loading'
@@ -50,11 +62,11 @@
         <div class='edit_map' v-else>
             <!-- 备注编辑器 -->
             <el-tooltip effect='dark' content='编辑备注' placement='left'>
-                <span v-if='systemName != "土建系统"' class='bjtk' @click='legendClik'>备注</span>
+                <span v-if='systemName != "土建系统" && isMessage' class='bjtk' @click='legendClik'>备注</span>
             </el-tooltip>
             <!-- 编辑图例 -->
             <el-tooltip effect='dark' content='编辑图例' placement='left'>
-                <p v-if='systemName != "土建系统"' @click='editTl' class='tltk'>
+                <p v-if='systemName != "土建系统" && isMessage' @click='editTl' class='tltk'>
                     <img src='@/assets/imgs/bjtl.png' alt />
                 </p>
             </el-tooltip>
@@ -65,19 +77,19 @@
                 </p>
             </el-tooltip>
             <!-- 编辑分布图 -->
-            <el-tooltip v-if='editPmt' class='bjpmt' effect='dark' content='编辑分布图' placement='left'>
+            <el-tooltip v-if='editPmt' class='bjpmt' effect='dark' :content='editTips' placement='left'>
                 <span class='edit-icon' @click='goToEditer'>
-                    <i class='el-icon-edit' style='color:#fff;font-size:16px;'></i>
+                    <img src='@/assets/imgs/bjs.png' alt />
                 </span>
             </el-tooltip>
             <span v-else class='edit-icon2'>
-                <i class='el-icon-edit' style='color:#fff;font-size:16px;'></i>
+                <img src='@/assets/imgs/bjs.png' alt />
             </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>
+                <Select width='240' tipPlace='top' v-model='floor' caption='楼层:' size='mini' :selectdata='floorSelectAble' :placeholder='"请选择"'></Select>
             </p>
             <p class='p3'>
                 <span @click='cancel'>取消</span>
@@ -102,8 +114,9 @@ export default {
             remarksText: '', //查询出来的备注
             text1:
                 '<p>1.主要设备房包括:冷源机房,热源机房,开闭站,配变电所(室),发电机房,消防水泵房,消防高位水箱间,生活水泵房,慧云机房,垃圾房。</p>',
-            text2: '<p>2.图例后×的数字,代表此位置的数量。</p>',
-            show: false,
+            // text2: '<p>2.图例后×的数字,代表此位置的数量。</p>',
+            text2: '',
+            show: true,
             show2: false,
             loading: true,
             loading1: true,
@@ -116,11 +129,16 @@ export default {
             editText: '',
             editSwitch: false,
             isFloor: false,
-            editPmt: true //是否有跳转道图例库的权限
+            editPmt: true, //是否有跳转道图例库的权限
+            floorSelectAble: [],
+            floor: '', //传的楼层
+            floorName: '',
+            planNum: '', //主要设备房
+            typeNum: ''
         }
     },
     computed: {
-        ...mapGetters(['plazaId', 'fmapID', 'floorSelect'])
+        ...mapGetters(['plazaId', 'fmapID', 'floorSelect', 'isMessage'])
     },
     props: {
         floors: {
@@ -136,10 +154,25 @@ export default {
         systemName: {
             default: '',
             type: String
+        },
+        categoryId: {
+            default: '',
+            type: String
+        },
+        editTips: {
+            type: String,
+            default: ''
         }
     },
     components: { lengendView, legendRemarks, lengendEdit },
     methods: {
+        formatFloor() {
+            this.floorSelectAble = []
+            this.floorSelectAble = this.floorSelect.filter(item => {
+                const hit = this.floors.find(i => i.gname == item.id)
+                return !hit
+            })
+        },
         testClick(data) {},
         // 编辑备注
         legendClik() {
@@ -148,17 +181,21 @@ export default {
         // 查询备注
         queryMarks() {
             let postParams = {
-                categoryId: this.$cookie.get('categoryId'),
+                categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
                 projectId: this.$store.state.plazaId,
                 BuildingID: '1',
                 FloorID: this.$cookie.get('floorNow')
             }
-
             let data = {}
             queryRead({ data, postParams }).then(res => {
-                console.log('备注', res)
                 if (res.data.Data && res.data.Data[0].Note) {
                     let note = res.data.Data[0].Note
+                    if (this.planNum > 0) {
+                        this.remarksText = `${this.text1}${note}`
+                    }
+                    if (this.typeNum > 1) {
+                        this.remarksText = `${this.text2}${note}`
+                    }
                     if (note.search(this.text1) != -1 && note.search(this.text2) != -1) {
                         this.remarksText = `${note}`
                     } else if (note.search(this.text1) != -1) {
@@ -176,10 +213,10 @@ export default {
         // 点击展示图例框
         showTl() {
             this.show = !this.show
+            this.queryView(false)
             if (this.show) {
                 this.show2 = false
             }
-            this.queryView(false)
         },
         cance() {
             this.show2 = false
@@ -195,18 +232,24 @@ export default {
          * @description t跳转editer编辑器
          */
         goToEditer() {
-            let FloorID = this.$cookie.get('floorMapId') || 'f1'
-            let categoryId = this.$cookie.get('categoryId')
+            if (this.floor) {
+                this.floorSelect.forEach(el => {
+                    if (el.id == this.floor) {
+                        this.floorName = el.name
+                    }
+                })
+            }
+
+            let FloorID = this.floor ? this.floor : this.$cookie.get('floorMapId') || 'f1'
+            let categoryId = this.categoryId ? this.categoryId : this.$cookie.get('categoryId')
             const { conf } = window.__systemConf,
                 { editerUrl } = conf
-            let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&FloorName=${this.$cookie.get(
-                'floorNow'
-            )}&fmapID=${this.fmapID}`
+            let floorName = this.floorName ? this.floorName : this.$cookie.get('floorNow')
+            let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&FloorName=${floorName}&fmapID=${this.fmapID}`
             let url = editerUrl + 'editer?' + encodeURIComponent(data)
             window.open(url, true)
         },
         isShow2() {
-            //console.log(this.isShow2)
             this.show2 = !this.show2
         },
         handleSwich(val) {
@@ -228,6 +271,14 @@ export default {
                 this.loading = false
                 //console.log('图例', res)
                 this.viewTable = res.data.Data ? res.data.Data : []
+                if (this.viewTable.length > 0) {
+                    this.viewTable.forEach(el => {
+                        console.log(el)
+                        if (el.Name == '主要设备房') {
+                            this.planNum = el.Num
+                        }
+                    })
+                }
                 this.$nextTick(() => {
                     if (this.$refs.viewLengend) {
                         this.$refs.viewLengend.setSelected()
@@ -286,6 +337,7 @@ export default {
         },
         addFloor() {
             this.isFloor = true
+            this.formatFloor()
         },
         // 新增楼层取消
         cancel() {
@@ -294,17 +346,16 @@ export default {
         // 新增楼层确定
         determine() {
             this.isFloor = false
+            this.goToEditer()
         }
     },
-    mounted() {
-        console.log(this.floors)
-    }
+    mounted() {}
 }
 </script>
 <style lang="less" scoped>
 .legend-container {
     position: relative;
-    top: -13px;
+    top: -15px;
     .legend {
         text-align: center;
         line-height: 44px;
@@ -318,7 +369,18 @@ export default {
         border-radius: 2px;
         cursor: pointer;
         line-height: 44px;
+    }
+    .legend2 {
         text-align: center;
+        line-height: 44px;
+        cursor: pointer;
+        width: 44px;
+        height: 44px;
+        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+        border-radius: 2px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(255, 255, 255, 1);
     }
 
     .legend-tab {
@@ -342,6 +404,23 @@ export default {
                 display: none;
             }
         }
+        .legend-table2 {
+            padding: 16px;
+            height: 356px;
+            width: 385px;
+            // width: 420px;
+            overflow: auto;
+            overflow: hidden;
+            overflow-y: auto;
+            position: relative;
+            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);
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
     }
 }
 .edit_map {
@@ -359,6 +438,12 @@ export default {
         text-align: center;
         line-height: 48px;
         display: inline-block;
+        img {
+            line-height: 48px;
+            width: 20px;
+            height: 20px;
+            margin-top: -4px;
+        }
     }
     .edit-icon {
         cursor: pointer;

+ 9 - 4
src/components/PicLarge/src/picLarge.vue

@@ -79,8 +79,10 @@ export default {
                 border-radius: 4px;
                 border: 4px solid rgba(245, 246, 247, 1);
                 img {
-                    width: 100%;
-
+                    max-width: 100%;
+                    max-height: 100%;
+                    display: block;
+                    margin: auto;
                     border-radius: 4px;
                 }
             }
@@ -101,7 +103,7 @@ export default {
         flex: 1;
         background: rgba(245, 246, 247, 1);
         border-radius: 0px 0px 4px 0px;
-        padding: 20px 50px;
+        padding: 60px 50px;
         margin: auto auto;
         display: flex;
         justify-content: center;
@@ -111,7 +113,10 @@ export default {
             height: 540px;
             text-align: center;
             img {
-                width: 100%;
+                max-width: 100%;
+                max-height: 100%;
+                display: block;
+                margin: auto;
             }
         }
     }

+ 8 - 2
src/components/Rotation/src/rotation.vue

@@ -36,12 +36,18 @@ export default {
     width: 100%;
     height: 100%;
     overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     .rotationCon {
         height: 100%;
+        display: flex;
     }
     img {
-        width: 90%;
-       
+        max-width: 100%;
+        max-height: 100%;
+        display: block;
+        margin: auto;
     }
 }
 </style>

+ 2 - 1
src/components/Select/Select.vue

@@ -29,7 +29,7 @@
                     v-html="fakePlaceholder">
                 </span>
             </span>
-            <Triangle v-show="!clearable" :class="triangleClass"></Triangle>
+            <Triangle v-show="!clearable" :class="triangleClass" @click="handleInput"></Triangle>
             <Remove class="p-select-clear" @click.stop="clearAll" v-show="!hideClear && clearable"></Remove>
         </div>
     </div>
@@ -482,6 +482,7 @@ export default {
         * params event事件对象
         */
         handleInput (event) {
+            console.log(event)
             this.query = event.target.value || event.data || ''
             this.showPlaceholder = !this.query
             if (!this.dropInstance) return

+ 1 - 1
src/components/editLengend.vue

@@ -251,7 +251,7 @@ export default {
     }
     .legend-container .el-table td,
     .legend-container .el-table th {
-        padding: 6px 0 !important;
+        padding: 3px 0 !important;
     }
     .nullData {
         .el-input__inner {

+ 57 - 64
src/components/floorList.vue

@@ -6,16 +6,17 @@
 <template>
     <div class='floor-box'>
         <div class='floor-list'>
-            <div v-if='floorsArr.length>8'>
-                <i
-                    class='el-icon-caret-top icon-top'
+            <div class='icon-top' v-if='floorsArr.length>8'>
+                <img
                     :class='{disabled:currentFloorId == floorsArr[0].seq }'
                     v-if='showT'
                     @click='changeFloor(1)'
                     @mousedown='mousedown'
                     @mouseup='mouseup'
-                ></i>
-                <i class='el-icon-caret-top icon-top' :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else style='color:#ccc'></i>
+                    src='@/assets/imgs/iconBlackTop.png'
+                    alt
+                />
+                <img :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else src='@/assets/imgs/iconLightTop.png' alt />
             </div>
             <div class='floor-out'>
                 <!-- :style='{ marginTop : marginTop }' -->
@@ -29,19 +30,15 @@
                     >{{item.code}}</div>
                 </div>
             </div>
-            <div v-if='floorsArr.length>8'>
-                <i
-                    class='el-icon-caret-bottom icon-bottom'
+            <div class='icon-bottom' v-if='floorsArr.length>8'>
+                <img
                     :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
                     v-if='showB'
                     @click='changeFloor(-1)'
-                ></i>
-                <i
-                    class='el-icon-caret-bottom icon-bottom'
-                    :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
-                    v-else
-                    style='color:#ccc'
-                ></i>
+                    src='@/assets/imgs/iconBlackBottom.png'
+                    alt
+                />
+                <img :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' v-else src='@/assets/imgs/iconLightBottom.png' alt />
             </div>
         </div>
     </div>
@@ -70,21 +67,10 @@ export default {
     },
     props: {
         floorsArr: {
-            type: Array
-            /*  default: () => {
-                return [
-                    { name: '第6层', code: 'F6', gname: 'f6', gcode: '6F', seq: 600 },
-                    { name: '第5层', code: 'F5', gname: 'f5', gcode: '5F', seq: 500 },
-                    { name: '第4层', code: 'F4', gname: 'f4', gcode: '4F', seq: 400 },
-                    { name: '第3层', code: 'F3', gname: 'f3', gcode: '3F', seq: 300 },
-                    { name: '第2层', code: 'F2', gname: 'f2', gcode: '2F', seq: 200 },
-                    { name: '第1层', code: 'F1', gname: 'f1', gcode: '1F', seq: 100 },
-                    { name: '地下1层', code: 'B1', gname: 'b1', gcode: 'B1', seq: -100 },
-                    { name: '地下2层', code: 'B2', gname: 'b2', gcode: 'B2', seq: -200 },
-                    { name: '地下3层', code: 'B3', gname: 'b3', gcode: 'B3', seq: -300 },
-                    { name: '地下4层', code: 'B4', gname: 'b4', gcode: 'B4', seq: -400 }
-                ]
-            } */
+            type: Array,
+            default: () => {
+                ;[]
+            }
         }
     },
     mounted() {
@@ -102,7 +88,6 @@ export default {
     methods: {
         mousedown() {
             this.startTime = new Date()
-            console.log()
         },
         mouseup() {
             this.endTime = new Date()
@@ -180,12 +165,14 @@ export default {
         handleCookie() {
             // return true
             let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
-            this.$cookie.set('floorNow', currentFloor.code, 3)
-            this.$cookie.set('floorMapId', currentFloor.gname, 3)
-            this.$cookie.set('currentFloorId', currentFloor.seq, 3)
-            this.floorId = this.$cookie.get('floorNow') || currentFloor.code
-            this.floorMapIdName = this.$cookie.get('floorMapId') || currentFloor.gname
-            this.$emit('emitFloor', currentFloor)
+            if (currentFloor) {
+                this.$cookie.set('floorNow', currentFloor.code || '', 3)
+                this.$cookie.set('floorMapId', currentFloor.gname, 3)
+                this.$cookie.set('currentFloorId', currentFloor.seq, 3)
+                this.floorId = this.$cookie.get('floorNow') || currentFloor.code
+                this.floorMapIdName = this.$cookie.get('floorMapId') || currentFloor.gname
+                this.$emit('emitFloor', currentFloor)
+            }
         },
         /**
          * @name tabFloor
@@ -241,10 +228,10 @@ export default {
         box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
         border-radius: 2px;
         position: relative;
-        padding: 28px 4px;
+        padding: 6px 4px;
         text-align: center;
         .floor-out {
-            max-height: 260px;
+            // max-height: 260px;
             overflow: hidden;
             // overflow-y: auto;
             position: relative;
@@ -255,44 +242,50 @@ export default {
             .floor-center {
                 transition: all linear 0.8s;
                 .floor-item {
-                    width: 36px;
-                    height: 32px;
+                    // border: 1px solid blue;
+                    // width: 36px;
+                    line-height: 28px;
+                    height: 28px;
                     cursor: pointer;
+                    position: relative;
+                    &::after {
+                        position: absolute;
+                        left: 50%;
+                        margin-left: -20%;
+                        bottom: -6px;
+                        content: '';
+                        width: 14px;
+                        height: 1px;
+                        background: rgba(195, 199, 203, 1);
+                        border: 0px solid rgba(228, 229, 231, 1);
+                    }
+                    & + .floor-item {
+                        margin-top: 10px;
+                    }
                 }
             }
         }
 
         .icon-top {
-            text-align: center;
-            font-size: 18px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: center;
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 100%;
-            cursor: pointer;
-            line-height: 26px;
+            height: 18px;
+            img {
+                width: 18px;
+                height: 100%;
+                margin-top: -10px;
+            }
         }
         .icon-bottom {
-            text-align: center;
-            font-size: 18px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: center;
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 100%;
-            cursor: pointer;
-            line-height: 26px;
+            height: 18px;
+            img {
+                width: 18px;
+                height: 100%;
+                margin-top: -10px;
+            }
         }
         .isActive {
             border-radius: 4px;
             color: #025baa;
             background: #e1f2ff;
-            line-height: 32px;
         }
     }
     .disabled {

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

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

+ 319 - 252
src/components/floorMap/index.vue

@@ -1,275 +1,342 @@
 
 <!-- 底图 -->
 <template>
-  <div id="floor_base" v-loading="loading" ref="graphy">
-    <canvas :id="`canvas${id}`" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
-    <!-- 地图底部操作按钮 -->
-    <div class="strip-bottom">
-      <canvasFun
-        @fit="fit"
-        @savePng="savePng"
-        @saveSvg="saveSvg"
-        @saveJson="saveJson"
-        @scale="scale"
-        ref="canvasFun"
-      ></canvasFun>
+    <div id='floor_base' v-loading='loading' ref='graphy'>
+        <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
+        <!-- 地图底部操作按钮 -->
+        <div class='strip-bottom'>
+            <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
+        </div>
+        <room-box ref='boxRoom'></room-box>
     </div>
-    <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, queryStatis } from '@/api/public'
+import { STopologyParser } from '@/lib/parsers/STopologyParser'
+import { mapGetters, mapActions } from 'vuex'
+import { SImageItem } from '@saga-web/graph/lib'
+import bus from '@/utils/bus.js'
+
 // import { uuid } from "@/components/mapClass/until";
 
 export default {
-  data() {
-    return {
-      appName: "万达可视化系统",
-      key: "23f30a832a862c58637a4aadbf50a566",
-      mapServerURL: `/wdfn`,
-      canvasWidth: 1100,
-      canvasHeight: 800,
-      loading: false, // 限制重复查询
-      view: null,
-      urlMsg: {},
-      canvasID: "canvas",
-      floorid: "" //楼层id
-    };
-  },
-  props: {
-    id: {
-      default: "1",
-      type: String
-    },
-    loadName: null,
-    type: null
-  },
-  components: { RoomBox, canvasFun },
-  computed: {
-    ...mapGetters(["plazaId", "fmapID", "haveFengMap"])
-  },
-  methods: {
-    ...mapActions(["getfmapID"]),
-    init(floorid) {
-      this.loading = true;
-      this.floorid = floorid;
-      setTimeout(() => {
-        if (this.haveFengMap) {
-          this.clearGraphy();
-          this.scene = new FloorScene();
-          this.scene.selectContainer.connect(
-            "listChange",
-            this,
-            this.listChange
-          );
-          if (this.canvasID != `canvas${this.id}`) {
-            this.canvasID = `canvas${this.id}`;
-          }
-          this.parserData(floorid);
-        }
-      },100);
-    },
-    parserData(floor) {
-      if (floor == "g80") {
-        // 屋顶
-        if (window.fengmapData.frImg) {
-          let imgItem = new SImageItem(
-            null,
-            `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`
-          );
-          this.scene.addItem(imgItem);
-          this.view.scene = this.scene;
-          this.view.minScale = this.view.scale;
-          if (this.$refs.canvasFun) {
-            this.$refs.canvasFun.everyScale = this.view.scale;
-          }
-          this.view.fitSceneToView();
-        }
-      } else {
-        if (window.fengmapData.gnameToGid[floor]) {
-          window.fengmapData.parseData(
-            window.fengmapData.gnameToGid[floor],
-            res => {
-              if (res.err) {
-                console.log("errr", res.err);
-                return;
-              }
-              const fParser = new SFloorParser(null);
-              fParser.parseData(res);
-              fParser.spaceList.forEach(t => {
-                //   t.selectable = true;
-                this.scene.addItem(t);
-              });
-              fParser.wallList.forEach(t => this.scene.addItem(t));
-              fParser.virtualWallList.forEach(t => this.scene.addItem(t));
-              fParser.doorList.forEach(t => this.scene.addItem(t));
-              fParser.columnList.forEach(t => this.scene.addItem(t));
-              fParser.casementList.forEach(t => this.scene.addItem(t));
-              this.view.scene = this.scene;
-              this.view.minScale = this.view.scale;
-              if (this.$refs.canvasFun) {
-                this.$refs.canvasFun.everyScale = this.view.scale;
-              }
-              this.view.fitSceneToView();
-              //console.log('success')
-            }
-          );
-        } else {
-          console.log("楼层不正确");
-        }
-      }
-      this.readGroup(this.floorid).then(data => {
-        this.loading = false;
-        if (data.Data.length > 0) {
-          //console.log(data.data.Data[0].ID)
-          this.$cookie.set("graphId", data.Data[0].ID, 3);
+    data() {
+        return {
+            appName: '万达可视化系统',
+            key: '23f30a832a862c58637a4aadbf50a566',
+            mapServerURL: `http://map.wanda.cn/editor`,
+            canvasWidth: 600,
+            canvasHeight: 800,
+            loading: false, // 限制重复查询
+            view: null,
+            urlMsg: {},
+            canvasID: 'canvas',
+            floorid: '', //楼层id
+            topologyParser: null, // 解析器数据
+            fParser: null // 底图解析器
         }
-        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();
-      });
     },
-    clearGraphy() {
-      if (this.view) {
-        this.view.scene = null;
-        return;
-      }
-      this.view = new FloorView(`canvas${this.id}`);
+    props: {
+        id: {
+            default: '1',
+            type: String
+        },
+        categoryId: {
+            default: '',
+            type: String
+        },
+        // 弹窗高度,适配底图高度使用
+        modalHeight: {
+            type: [Number, undefined],
+            default: undefined
+        },
+        loadName: null,
+        type: null
     },
-    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 });
-      }
+    components: { RoomBox, canvasFun },
+    computed: {
+        ...mapGetters(['plazaId', 'fmapID', 'haveFengMap'])
     },
-    // 适配底图到窗口
-    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`);
+    methods: {
+        ...mapActions(['getfmapID']),
+        init(floorid) {
+            this.loading = true
+            this.floorid = floorid
+            this.mapSize()
+            setTimeout(() => {
+                if (this.haveFengMap) {
+                    this.clearGraphy()
+                    this.scene = new FloorScene()
+                    this.scene.selectContainer.connect('listChange', this, this.listChange)
+                    if (this.canvasID != `canvas${this.id}`) {
+                        this.canvasID = `canvas${this.id}`
+                    }
+                    this.parserData(floorid)
+                }
+            }, 100)
+        },
+        parserData(floor) {
+            if (floor == 'g80') {
+                // 屋顶
+                if (window.fengmapData.frImg) {
+                    let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
+                    this.scene.addItem(imgItem)
+                    this.view.scene = this.scene
+                    this.view.minScale = this.view.scale
+                    if (this.$refs.canvasFun) {
+                        this.$refs.canvasFun.everyScale = this.view.scale
+                    }
+                    this.view.fitSceneToView()
+                }
+            } else {
+                if (window.fengmapData.gnameToGid[floor]) {
+                    window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], res => {
+                        if (res.err) {
+                            console.log('errr', res.err)
+                            return
+                        }
+                        this.fParser = new SFloorParser(null)
+                        this.fParser.parseData(res)
+                        this.fParser.spaceList.forEach(t => {
+                            //   t.selectable = true;
+                            this.scene.addItem(t)
+                        })
+                        this.fParser.wallList.forEach(t => this.scene.addItem(t))
+                        this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
+                        this.fParser.doorList.forEach(t => this.scene.addItem(t))
+                        this.fParser.columnList.forEach(t => this.scene.addItem(t))
+                        this.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
+                        }
+                    })
+                } else {
+                    console.log('楼层不正确')
+                }
+            }
+            this.readGroup(this.floorid).then(data => {
+                this.loading = false
+                if (data.Result == 'failure') {
+                    this.$store.commit('SETISMESSAGE', false)
+                    return
+                } else {
+                    this.$store.commit('SETISMESSAGE', true)
+                }
+                // 无返回Data处理
+                if (!(data.Data && data.Data.length)) {
+                    return false
+                }
+                if (this.$cookie.get('categoryId') == 'SCPZ') {
+                    let scpzTable = []
+                    scpzTable = data.Data[0].Elements.Nodes || []
+                    this.$store.commit('SETSCPZTABLE', scpzTable)
+                }
+                //
+                //
+
+                // 放到后边 $cookie graphId
+                this.$cookie.set('graphId', data.Data[0].ID, 3)
+                if (this.$cookie.get('graphId')) {
+                    this.queryView()
+                }
+                this.topologyParser = new STopologyParser(null)
+                this.topologyParser.parseData(data.Data[0].Elements)
+                // 多边形
+                this.topologyParser.zoneLegendList.forEach(t => {
+                    this.scene.addItem(t)
+                })
+                // 增加文字
+                this.topologyParser.textMarkerList.forEach(t => {
+                    this.scene.addItem(t)
+                })
+                // 增加图片
+                this.topologyParser.imageMarkerList.forEach(t => {
+                    this.scene.addItem(t)
+                })
+                // 增加直线
+                this.topologyParser.lineMarkerList.forEach(t => {
+                    this.scene.addItem(t)
+                })
+                // 增加图标类图例
+                this.topologyParser.imageLegendList.forEach(t => {
+                    this.scene.addItem(t)
+                })
+                // 增加管线类
+                // 增加图标类图例
+                this.topologyParser.relationList.forEach(t => {
+                    this.scene.addItem(t)
+                })
+                this.view.fitSceneToView()
+            })
+        },
+        // 查询图例
+        queryView() {
+            let postParams = {}
+            let data = {
+                graphId: this.$cookie.get('graphId'),
+                projectId: this.plazaId,
+                flag: false
+            }
+            queryStatis({ data, postParams }).then(res => {
+                this.loading = false
+                console.log('图例图例图例图例', res)
+                let viewTable = []
+                viewTable = res.data.Data ? res.data.Data : []
+                this.$store.commit('SETLEGENDTABLE', viewTable)
+            })
+        },
+        clearGraphy() {
+            if (this.view) {
+                this.view.scene = null
+                return
+            }
+            this.view = new FloorView(`canvas${this.id}`)
+        },
+        listChange(item, ev) {
+            let name = ev[0][0].data.Name
+            if (name.slice(name.length - 2, name.length) == '机房') {
+                this.$refs.boxRoom.open({ name: name, type: this.type })
+            }
+        },
+        // 适配底图到窗口
+        fit() {
+            this.view.fitSceneToView()
+        },
+        // 保存为png
+        savePng() {
+            this.view.saveImage(`${this.loadName}.png`, 'png')
+            //console.log(`${this.loadName}.png`)
+        },
+        // 保存为svg
+        saveSvg() {
+            this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
+        },
+        // 保存为json
+        saveJson() {
+            this.view.saveFloorJson(`${this.loadName}.json`)
+        },
+        // 缩放
+        scale(val) {
+            if (!this.view) {
+                return
+            }
+            let scale = this.view.scale
+            this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
+        },
+        showText(val) {
+            // this.topologyParser.zoneLegendList.forEach(t => {
+            //     t.showText = val
+            // })
+            this.fParser.spaceList.forEach(t => {
+                t.showBaseName = val
+            })
+        },
+        // 读取数据
+        readGroup(FloorID) {
+            const data = {
+                BuildingID: '1',
+                FloorID: FloorID,
+                categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
+                projectId: this.urlMsg.ProjectID
+            }
+            return readGroup(data)
+        },
+        // 地图尺寸
+        mapSize() {
+            this.canvasWidth = this.$refs.graphy.offsetWidth
+            if (window.screen.height == '768') {
+                this.canvasHeight = this.$refs.graphy.offsetHeight - 100
+            } else {
+                this.canvasHeight = 900
+            }
+            // 弹窗中底图高度适配
+            if (this.modalHeight) {
+                this.canvasHeight = this.modalHeight
+            }
+        },
+        getEvent() {
+            bus.$on('changeShow', res => {
+                this.topologyParser.zoneLegendList.forEach(t => {
+                    let id = t.data.GraphElementId
+                    t.maskFlag = !(res.indexOf(id) > -1)
+                })
+                this.topologyParser.textMarkerList.forEach(t => {
+                    let id = t.data.GraphElementId
+                    t.maskFlag = !(res.indexOf(id) > -1)
+                })
+                this.topologyParser.imageMarkerList.forEach(t => {
+                    let id = t.data.GraphElementId
+                    t.maskFlag = !(res.indexOf(id) > -1)
+                })
+                this.topologyParser.lineMarkerList.forEach(t => {
+                    let id = t.data.GraphElementId
+                    t.maskFlag = !(res.indexOf(id) > -1)
+                })
+                this.topologyParser.imageLegendList.forEach(t => {
+                    let id = t.data.GraphElementId
+                    t.maskFlag = !(res.indexOf(id) > -1)
+                })
+                this.topologyParser.relationList.forEach(t => {
+                    let id = t.data.GraphElementId
+                    t.maskFlag = !(res.indexOf(id) > -1)
+                })
+            })
+        }
     },
-    // 缩放
-    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
-      );
+    watch: {
+        'view.scale': {
+            handler(n) {
+                if (this.$refs.canvasFun) {
+                    let s = (n * 10) / this.view.minScale
+                    this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
+                }
+            }
+        },
+        haveFengMap(val) {
+            if (val) {
+                this.init(this.floorid)
+            }
+        }
     },
-    // 读取数据
-    readGroup(FloorID) {
-      const data = {
-        BuildingID: "1",
-        FloorID: FloorID,
-        categoryId: this.$cookie.get("categoryId"),
-        projectId: this.urlMsg.ProjectID
-      };
-      return readGroup(data);
+    mounted() {
+        this.mapSize()
+        this.getEvent()
     },
-    // 地图尺寸
-    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;
+    created() {
+        this.urlMsg = {
+            categoryId: this.$cookie.get('categoryId'),
+            ProjectID: this.plazaId,
+            BuildingID: '1',
+            FloorID: this.$cookie.get('floorMapId') || 'f1',
+            fmapID: this.fmapID
         }
-      }
-    },
-    haveFengMap(val) {
-      if (val) {
-        this.init(this.floorid);
-      }
     }
-  },
-  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;
+    height: 100%;
+    .fengMap {
+        position: fixed;
+        width: 100px;
+        height: 100px;
+        z-index: -1;
+    }
+    .strip-bottom {
+        position: absolute;
+        right: 0;
+        bottom: 40px;
+        width: 100%;
+    }
 }
 </style>

+ 0 - 650
src/components/mapClass/SPolygonItem.js

@@ -1,650 +0,0 @@
-/*
- * ********************************************************************************************************************
- *
- *                      :*$@@%$*:                         ;:                ;;    ;;
- *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
- *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
- *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
- *                   =@*                                  %!              @ $= % %@=   =%@!      %=
- *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
- *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
- *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
- *          $@*   ;@@@%=!:                *@*
- *          =@$    ;;;!=%@@@@=!           =@!
- *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
- *            ;%@@$=$@@%*       *@@@$=%@@%;
- *               ::;::             ::;::                                              All rights reserved.
- *
- * ********************************************************************************************************************
- */
-import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate } from "@saga-web/graph/lib";
-import { SUndoStack } from "@saga-web/base/";
-;
-import { SColor, SLineCapStyle, SPoint, SRect, SLine, SPolygonUtil } from "@saga-web/draw";
-import { SMathUtil } from "@saga-web/big/lib/utils/SMathUtil";
-import { SItemStatus } from "@saga-web/big";
-/**
- * 编辑多边形
- *
- * @author  韩耀龙
- */
-export class SPolygonItem extends SGraphItem {
-    /**
-    * 构造函数
-    *
-    * @param parent    指向父对象
-    * @param data      PolygonData数据
-    */
-    constructor(parent) {
-        super(parent);
-        /** X坐标最小值  */
-        this.minX = Number.MAX_SAFE_INTEGER;
-        /** X坐标最大值  */
-        this.maxX = Number.MIN_SAFE_INTEGER;
-        /** Y坐标最小值  */
-        this.minY = Number.MAX_SAFE_INTEGER;
-        /** Y坐标最大值  */
-        this.maxY = Number.MIN_SAFE_INTEGER;
-        /** 轮廓线坐标  */
-        this.pointList = [];
-        /** 是否闭合    */
-        this.closeFlag = false;
-        // 当前状态
-        this._status = SItemStatus.Normal;
-        this.data = null;
-        /** 边框颜色 */
-        this._strokeColor = new SColor("#0091FF");
-        /** 填充颜色 */
-        this._fillColor = new SColor("#1EE887");
-        /** 边框的宽 只可输入像素宽*/
-        this._lineWidth = 4;
-        /** 鼠标移动点  */
-        this.lastPoint = null;
-        /** 当前鼠标获取顶点对应索引 */
-        this.curIndex = -1;
-        /** 当前鼠标获取顶点对应坐标 */
-        this.curPoint = null;
-        /** 灵敏像素 */
-        this.len = 10;
-        /** 场景像素 内部将灵敏像素换算为场景实际距离  */
-        this.scenceLen = 15;
-        /** 场景像素  */
-        this.isAlt = false;
-        /** undoredo堆栈 */
-        this.undoStack = new SUndoStack();
-    }
-    // 获取当前状态
-    get getPointList() {
-        return this.pointList;
-    }
-    // 编辑当前状态
-    set setPointList(arr) {
-        this.pointList = arr;
-        this.update();
-    }
-    ;
-    // 获取当前状态
-    get status() {
-        return this._status;
-    }
-    // 编辑当前状态
-    set status(value) {
-        this._status = value;
-        // 如果状态为show则需清栈
-        if (value == SItemStatus.Normal) {
-            if (this.undoStack) {
-                this.undoStack.clear();
-            }
-        }
-        this.update();
-    }
-    ;
-    /**  画笔颜色 */
-    get strokeColor() {
-        return this._strokeColor;
-    }
-    ;
-    set strokeColor(v) {
-        this._strokeColor = v;
-        this.update();
-    }
-    get fillColor() {
-        return this._fillColor;
-    }
-    ;
-    set fillColor(v) {
-        this._fillColor = v;
-        this.update();
-    }
-    get lineWidth() {
-        return this._lineWidth;
-    }
-    set lineWidth(v) {
-        this._lineWidth = v;
-        this.update();
-    }
-    ;
-    //////////////////
-    //  以下为对pointList 数组的操作方法
-    /**
-     * 储存新的多边形顶点
-     *
-     * @param x   点位得x坐标
-     * @param y   点位得y坐标
-     * @param i   储存所在索引
-     * @return SPoint。添加的顶点
-     */
-    insertPoint(x, y, i = null) {
-        const point = new SPoint(x, y);
-        if (i == null) {
-            this.pointList.push(point);
-        }
-        else {
-            this.pointList.splice(i, 0, point);
-        }
-        this.update();
-        return point;
-    }
-    /**
-     * 删除点位
-     *
-     * @param i   删除点所在的索引
-     * @return    SPoint|null。索引不在数组范围则返回null
-     */
-    deletePoint(i = null) {
-        let point = null;
-        if (i != null) {
-            if (i >= (this.pointList.length) || i < 0) {
-                point = null;
-            }
-            else {
-                point = new SPoint(this.pointList[i].x, this.pointList[i].y);
-                this.pointList.splice(i, 1);
-            }
-        }
-        else {
-            if (this.pointList.length) {
-                point = this.pointList[this.pointList.length - 1];
-                this.pointList.pop();
-            }
-            else {
-                point = null;
-            }
-        }
-        this.update();
-        return point;
-    }
-    /**
-     * 多边形顶点的移动位置
-     *
-     * @param x   点位得x坐标
-     * @param y   点位得y坐标
-     * @param i   点位得i坐标
-     * @return    移动对应得点。如果索引无法找到移动顶点,则返回null
-     */
-    movePoint(x, y, i) {
-        let point = null;
-        if (i >= (this.pointList.length) || i < 0) {
-            return null;
-        }
-        if (this.pointList.length) {
-            this.pointList[i].x = x;
-            this.pointList[i].y = y;
-        }
-        point = this.pointList[i];
-        return point;
-    }
-    /**
-     * 打印出多边形数组
-     *
-     * @return  顶点数组
-     */
-    PrintPointList() {
-        return this.pointList;
-    }
-    ////////////
-    //  以下为三种状态下的绘制多边形方法
-    /**
-     * 展示状态 --绘制多边形数组
-     *
-     * @param painter      绘制类
-     * @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();
-    }
-    /**
-     * 创建状态 --绘制多边形数组
-     *
-     * @param painter      绘制类
-     * @param pointList    绘制多边形数组
-     */
-    drawCreatePolygon(painter, pointList) {
-        painter.pen.lineCapStyle = SLineCapStyle.Square;
-        painter.pen.color = this._strokeColor;
-        painter.pen.lineWidth = painter.toPx(this._lineWidth);
-        if (this.lastPoint && pointList.length) {
-            painter.drawLine(pointList[pointList.length - 1].x, pointList[pointList.length - 1].y, this.lastPoint.x, this.lastPoint.y);
-        }
-        painter.drawPolyline(pointList);
-        painter.pen.color = SColor.Transparent;
-        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);
-        }
-    }
-    /**
-     *
-     * 编辑状态 --绘制多边形数组
-     *
-     * @param painter    绘制类
-     * @param pointList    绘制多边形数组
-     */
-    drawEditPolygon(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;
-        pointList.forEach((item, index) => {
-            painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2));
-        });
-    }
-    /**
-     * 编辑状态操作多边形数组
-     *
-     * @param event    鼠标事件
-     *
-     *
-     */
-    editPolygonPoint(event) {
-        //  判断是否为删除状态 isAlt = true为删除状态
-        if (this.isAlt) {
-            // 1 判断是否点击在多边形顶点
-            let lenIndex = -1; // 当前点击到的点位索引;
-            let curenLen = this.scenceLen; // 当前的灵敏度
-            this.pointList.forEach((item, index) => {
-                let dis = SMathUtil.pointDistance(event.x, event.y, item.x, item.y);
-                if (dis < curenLen) {
-                    curenLen = dis;
-                    lenIndex = index;
-                }
-            });
-            // 若点击到,对该索引对应的点做删除
-            if (lenIndex != -1) {
-                if (this.pointList.length <= 3) {
-                    return;
-                }
-                const delePoint = new SPoint(this.pointList[lenIndex].x, this.pointList[lenIndex].y);
-                this.deletePoint(lenIndex);
-                // 记录顶点操作记录压入堆栈
-                this.recordAction(SGraphPointListDelete, [this.pointList, delePoint, lenIndex]);
-            }
-        }
-        else {
-            // 1 判断是否点击在多边形顶点
-            this.curIndex = -1;
-            this.curPoint = null;
-            let lenIndex = -1; // 当前点击到的点位索引;
-            let curenLen = this.scenceLen; // 当前的灵敏度
-            this.pointList.forEach((item, index) => {
-                let dis = SMathUtil.pointDistance(event.x, event.y, item.x, item.y);
-                if (dis < curenLen) {
-                    curenLen = dis;
-                    lenIndex = index;
-                }
-            });
-            this.curIndex = lenIndex;
-            // 2判断是否点击在多边形得边上
-            if (-1 == lenIndex) {
-                let len = SMathUtil.pointToLine(new SPoint(event.x, event.y), new SLine(this.pointList[0], this.pointList[1])), index = 0;
-                if (this.pointList.length > 2) {
-                    for (let i = 1; i < this.pointList.length; i++) {
-                        let dis = SMathUtil.pointToLine(new SPoint(event.x, event.y), new SLine(this.pointList[i], this.pointList[i + 1]));
-                        if ((i + 1) == this.pointList.length) {
-                            dis = SMathUtil.pointToLine(new SPoint(event.x, event.y), new SLine(this.pointList[i], this.pointList[0]));
-                        }
-                        if (dis.MinDis < len.MinDis) {
-                            len = dis;
-                            index = i;
-                        }
-                    }
-                }
-                // 判断是否有点
-                if (len.Point) {
-                    console.log(index, len.Point);
-                    // 点在了多边形的边上
-                    if (len.MinDis <= this.scenceLen) {
-                        this.pointList.splice(index + 1, 0, len.Point);
-                        // 记录新增顶点操作记录压入堆栈
-                        this.recordAction(SGraphPointListInsert, [this.pointList, len.Point, index + 1]);
-                    }
-                    else { //没点在多边形边上也没点在多边形顶点上
-                        super.onMouseDown(event);
-                    }
-                }
-            }
-            else {
-                // 当捕捉到顶点后 ,记录当前点的xy坐标,用于undo、redo操作
-                this.curPoint = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y);
-            }
-            // 刷新视图
-            this.update();
-        }
-    }
-    /////////////////////
-    // undo、redo相关操作
-    /**
-     * 记录相关动作并推入栈中
-     * @param	SGraphCommand         相关命令类
-     * @param	any                    对应传入参数
-     */
-    recordAction(SGraphCommand, any) {
-        // 记录相关命令并推入堆栈中
-        const sgraphcommand = new SGraphCommand(this, ...any);
-        if (this.undoStack) {
-            this.undoStack.push(sgraphcommand);
-        }
-    }
-    /**
-     * 执行取消操作执行
-     */
-    undo() {
-        if (this.status == SItemStatus.Normal) {
-            return;
-        }
-        if (this.undoStack) {
-            this.undoStack.undo();
-        }
-    }
-    /**
-     * 执行重做操作执行
-     */
-    redo() {
-        if (this.status == SItemStatus.Normal) {
-            return;
-        }
-        if (this.undoStack) {
-            this.undoStack.redo();
-        }
-    }
-    ///////////////////////////////
-    // 以下为鼠标事件
-    /**
-     * 鼠标双击事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onDoubleClick(event) {
-        console.log(event);
-        // 如果位show状态 双击改对象则需改为编辑状态
-        if (SItemStatus.Normal == this.status) {
-            this.status = SItemStatus.Edit;
-            this.grabItem(this);
-        }
-        else if (SItemStatus.Edit == this.status) {
-            this.status = SItemStatus.Normal;
-            this.releaseItem();
-            if (this.undoStack) {
-                this.undoStack.clear();
-            }
-        }
-        this.update();
-        return true;
-    } // Function onDoubleClick()
-    /**
-     * 键盘事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onKeyDown(event) {
-        if (this.status == SItemStatus.Normal) {
-            return false;
-        }
-        else if (this.status == SItemStatus.Create) {
-            if (event.code == 'Enter') {
-                // 当顶点大于二个时才又条件执行闭合操作并清空堆栈
-                if (this.pointList.length > 2) {
-                    this.status = SItemStatus.Normal;
-                    //3 传递完成事件状态
-                    this.$emit('finishCreated');
-                    //1 grabItem 置为null
-                    this.releaseItem();
-                    //2 清空undo
-                    if (this.undoStack) {
-                        this.undoStack.clear();
-                    }
-                }
-            }
-        }
-        else if (this.status == SItemStatus.Edit) {
-            if (event.key == 'Alt') {
-                this.isAlt = true;
-            }
-        }
-        this.update();
-        return true;
-    } // Function onKeyDown()
-    /**
-     * 键盘键抬起事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onKeyUp(event) {
-        if (this.status == SItemStatus.Edit) {
-            if (event.key == 'Alt') {
-                this.isAlt = false;
-            }
-        }
-        this.update();
-    } // Function onKeyUp()
-    /**
-     * 鼠标按下事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onMouseDown(event) {
-        // 如果状态为编辑状态则添加点
-        if (this.status == SItemStatus.Create) {
-            // 新增顶点
-            this.insertPoint(event.x, event.y);
-            // 记录新增顶点操作记录压入堆栈
-            let pos = new SPoint(event.x, event.y);
-            this.recordAction(SGraphPointListInsert, [this.pointList, pos]);
-        }
-        else if (this.status == SItemStatus.Edit) {
-            // 对多边形数组做编辑操作
-            this.editPolygonPoint(event);
-        }
-        else {
-            return super.onMouseDown(event);
-        }
-        return true;
-    } // Function onMouseDown()
-    /**
-     * 鼠标移入事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onMouseEnter(event) {
-        return true;
-    } // Function onMouseEnter()
-    /**
-     * 鼠标移出事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onMouseLeave(event) {
-        return true;
-    } // Function onMouseLeave()
-    /**
-     * 鼠标移动事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onMouseMove(event) {
-        if (this.status == SItemStatus.Create) {
-            this.lastPoint = new SPoint;
-            this.lastPoint.x = event.x;
-            this.lastPoint.y = event.y;
-            this.update();
-        }
-        else if (this.status == SItemStatus.Edit) {
-            if (-1 != this.curIndex) {
-                this.pointList[this.curIndex].x = event.x;
-                this.pointList[this.curIndex].y = event.y;
-            }
-            this.update();
-        }
-        else {
-            // return super.onMouseMove(event)
-        }
-        return true;
-    } // Function onMouseMove()
-    /**
-     * 鼠标抬起事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onMouseUp(event) {
-        if (this.status == SItemStatus.Edit) {
-            if (-1 != this.curIndex) {
-                const pos = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y);
-                this.recordAction(SGraphPointListUpdate, [this.pointList, this.curPoint, pos, this.curIndex]);
-            }
-            this.curIndex = -1;
-            this.curPoint = null;
-        }
-        else {
-            // return super.onMouseUp(event)
-        }
-        return true;
-    } // Function onMouseUp()
-    /**
-     * 适配事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onResize(event) {
-        return true;
-    } // Function onResize()
-    /**
-     * 取消操作
-     *
-     * @param   painter       painter对象
-     */
-    cancelOperate() {
-        // 当状态为展示状态
-        if (this.status == SItemStatus.Create) {
-            // 闭合多边形
-            this.parent = null;
-        }
-        else if (this.status == SItemStatus.Edit) {
-            // 编辑状态
-            this.status = SItemStatus.Normal;
-        }
-        this.update();
-    } // Function cancelOperate()
-    /**
-     * Item对象边界区域
-     *
-     * @return SRect
-     */
-    boundingRect() {
-        if (this.pointList.length) {
-            this.minX = this.pointList[0].x;
-            this.maxX = this.pointList[0].x;
-            this.minY = this.pointList[0].y;
-            this.maxY = this.pointList[0].y;
-            this.pointList.forEach(it => {
-                let x = it.x, y = it.y;
-                if (x < this.minX) {
-                    this.minX = x;
-                }
-                if (y < this.minY) {
-                    this.minY = y;
-                }
-                if (x > this.maxX) {
-                    this.maxX = x;
-                }
-                if (y > this.maxY) {
-                    this.maxY = y;
-                }
-            });
-        }
-        ;
-        return new SRect(this.minX, this.minY, this.maxX - this.minX, this.maxY - this.minY);
-    } // Function boundingRect()
-    /**
-     * 判断点是否在区域内
-     *
-     * @param x
-     * @param y
-     */
-    contains(x, y) {
-        let arr = this.pointList;
-        if (arr.length < 3 || !SPolygonUtil.pointIn(x, y, arr)) {
-            return false;
-        }
-        return true;
-    } // Function contains()
-    /**
-     * Item绘制操作
-     *
-     * @param   painter       painter对象
-     */
-    onDraw(painter) {
-        this.scenceLen = painter.toPx(this.len);
-        // 当状态为展示状态
-        if (this.status == SItemStatus.Normal) {
-            // 闭合多边形
-            this.drawShowPolygon(painter, this.pointList);
-        }
-        else if (this.status == SItemStatus.Create) {
-            // 创建状态
-            this.drawCreatePolygon(painter, this.pointList);
-        }
-        else {
-            // 编辑状态
-            this.drawEditPolygon(painter, this.pointList);
-        }
-    } // Function onDraw()
-}

+ 0 - 704
src/components/mapClass/SPolygonItem.ts

@@ -1,704 +0,0 @@
-/*
- * ********************************************************************************************************************
- *
- *                      :*$@@%$*:                         ;:                ;;    ;;
- *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
- *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
- *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
- *                   =@*                                  %!              @ $= % %@=   =%@!      %=
- *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
- *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
- *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
- *          $@*   ;@@@%=!:                *@*
- *          =@$    ;;;!=%@@@@=!           =@!
- *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
- *            ;%@@$=$@@%*       *@@@$=%@@%;
- *               ::;::             ::;::                                              All rights reserved.
- *
- * ********************************************************************************************************************
- */
-import { SGraphItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate } from "@saga-web/graph/lib";
-import { SMouseEvent, SUndoStack } from "@saga-web/base/";;
-import {
-    SColor,
-    SLineCapStyle,
-    SPainter,
-    SPoint,
-    SRect,
-    SLine,
-    SPolygonUtil
-} from "@saga-web/draw";
-import { SMathUtil } from "@saga-web/big/lib/utils/SMathUtil";
-import { SItemStatus } from "@saga-web/big";
-
-/**
- * 编辑多边形
- *
- * @author  韩耀龙
- */
-export class SPolygonItem extends SGraphItem {
-    /** X坐标最小值  */
-    private minX = Number.MAX_SAFE_INTEGER;
-    /** X坐标最大值  */
-    private maxX = Number.MIN_SAFE_INTEGER;
-    /** Y坐标最小值  */
-    private minY = Number.MAX_SAFE_INTEGER;
-    /** Y坐标最大值  */
-    private maxY = Number.MIN_SAFE_INTEGER;
-    /** 轮廓线坐标  */
-    private pointList: SPoint[] = [];
-    // 获取当前状态
-    get getPointList(): SPoint[] {
-        return this.pointList;
-    }
-    // 编辑当前状态
-    set setPointList(arr: SPoint[]) {
-        this.pointList = arr;
-        this.update();
-    };
-    /** 是否闭合    */
-    closeFlag: boolean = false;
-    // 当前状态
-    protected _status: number = SItemStatus.Normal;
-    // 获取当前状态
-    get status(): SItemStatus {
-        return this._status;
-    }
-    // 编辑当前状态
-    set status(value: SItemStatus) {
-        this._status = value;
-        // 如果状态为show则需清栈
-        if (value == SItemStatus.Normal) {
-            if (this.undoStack) {
-                this.undoStack.clear();
-            }
-        }
-        this.update();
-    };
-    data: any | null = null;
-    /** 边框颜色 */
-    _strokeColor: SColor = new SColor("#0091FF");
-    /**  画笔颜色 */
-    get strokeColor(): SColor {
-        return this._strokeColor
-    };
-    set strokeColor(v: SColor) {
-        this._strokeColor = v;
-        this.update()
-    }
-    /** 填充颜色 */
-    _fillColor: SColor = new SColor("#1EE887");
-    get fillColor(): SColor {
-        return this._fillColor
-    };
-    set fillColor(v: SColor) {
-        this._fillColor = v;
-        this.update()
-    }
-
-    /** 边框的宽 只可输入像素宽*/
-    _lineWidth: number = 4;
-    get lineWidth(): number {
-        return this._lineWidth
-    }
-    set lineWidth(v: number) {
-        this._lineWidth = v;
-        this.update();
-    };
-    /** 鼠标移动点  */
-    private lastPoint: SPoint | null = null;
-    /** 当前鼠标获取顶点对应索引 */
-    private curIndex: number = -1;
-    /** 当前鼠标获取顶点对应坐标 */
-    private curPoint: null | SPoint = null
-    /** 灵敏像素 */
-    private len: number = 10;
-    /** 场景像素 内部将灵敏像素换算为场景实际距离  */
-    private scenceLen: number = 15;
-    /** 场景像素  */
-    private isAlt: boolean = false;
-    /** undoredo堆栈 */
-    protected undoStack: SUndoStack | null = new SUndoStack();
-
-    /**
-    * 构造函数
-    *
-    * @param parent    指向父对象
-    * @param data      PolygonData数据
-    */
-    constructor(parent: SGraphItem | null) {
-        super(parent);
-    }
-
-    //////////////////
-    //  以下为对pointList 数组的操作方法
-
-    /**
-     * 储存新的多边形顶点
-     *
-     * @param x   点位得x坐标
-     * @param y   点位得y坐标
-     * @param i   储存所在索引
-     * @return SPoint。添加的顶点
-     */
-    insertPoint(x: number, y: number, i: number | null = null): SPoint {
-        const point = new SPoint(x, y);
-        if (i == null) {
-            this.pointList.push(point)
-        } else {
-            this.pointList.splice(i, 0, point);
-        }
-        this.update()
-        return point
-    }
-
-    /**
-     * 删除点位
-     *
-     * @param i   删除点所在的索引
-     * @return    SPoint|null。索引不在数组范围则返回null
-     */
-    deletePoint(i: number | null = null): SPoint | null {
-        let point = null;
-        if (i != null) {
-            if (i >= (this.pointList.length) || i < 0) {
-                point = null
-            } else {
-                point = new SPoint(this.pointList[i].x, this.pointList[i].y);
-                this.pointList.splice(i, 1);
-            }
-        } else {
-            if (this.pointList.length) {
-                point = this.pointList[this.pointList.length - 1];
-                this.pointList.pop();
-            } else {
-                point = null
-            }
-        }
-        this.update()
-        return point
-    }
-
-    /**
-     * 多边形顶点的移动位置
-     *
-     * @param x   点位得x坐标
-     * @param y   点位得y坐标
-     * @param i   点位得i坐标
-     * @return    移动对应得点。如果索引无法找到移动顶点,则返回null
-     */
-    movePoint(x: number, y: number, i: number, ): SPoint | null {
-        let point = null;
-        if (i >= (this.pointList.length) || i < 0) {
-            return null
-        }
-        if (this.pointList.length) {
-            this.pointList[i].x = x;
-            this.pointList[i].y = y;
-        }
-        point = this.pointList[i];
-        return point
-    }
-
-    /**
-     * 打印出多边形数组
-     *
-     * @return  顶点数组
-     */
-    PrintPointList(): SPoint[] {
-        return this.pointList
-    }
-
-    ////////////
-    //  以下为三种状态下的绘制多边形方法
-
-    /**
-     * 展示状态 --绘制多边形数组
-     *
-     * @param painter      绘制类
-     * @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();
-    }
-
-
-    /**
-     * 创建状态 --绘制多边形数组
-     *
-     * @param painter      绘制类
-     * @param pointList    绘制多边形数组
-     */
-    protected drawCreatePolygon(painter: SPainter, pointList: SPoint[]): void {
-        painter.pen.lineCapStyle = SLineCapStyle.Square;
-        painter.pen.color = this._strokeColor;
-        painter.pen.lineWidth = painter.toPx(this._lineWidth);
-        if (this.lastPoint && pointList.length) {
-            painter.drawLine(pointList[pointList.length - 1].x, pointList[pointList.length - 1].y, this.lastPoint.x, this.lastPoint.y);
-        }
-        painter.drawPolyline(pointList);
-        painter.pen.color = SColor.Transparent;
-        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);
-        }
-
-    }
-
-    /**
-     *
-     * 编辑状态 --绘制多边形数组
-     *
-     * @param painter    绘制类
-     * @param pointList    绘制多边形数组
-     */
-    protected drawEditPolygon(painter: SPainter, pointList: SPoint[]): void {
-        // 展示多边形
-        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;
-        pointList.forEach((item, index) => {
-            painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2))
-        })
-    }
-
-    /**
-     * 编辑状态操作多边形数组
-     *
-     * @param event    鼠标事件
-     *
-     *
-     */
-    protected editPolygonPoint(event: SMouseEvent): void {
-        //  判断是否为删除状态 isAlt = true为删除状态
-        if (this.isAlt) {
-            // 1 判断是否点击在多边形顶点
-            let lenIndex = -1;  // 当前点击到的点位索引;
-            let curenLen = this.scenceLen; // 当前的灵敏度
-            this.pointList.forEach((item, index) => {
-                let dis = SMathUtil.pointDistance(
-                    event.x,
-                    event.y,
-                    item.x,
-                    item.y
-                );
-                if (dis < curenLen) {
-                    curenLen = dis;
-                    lenIndex = index;
-                }
-            });
-            // 若点击到,对该索引对应的点做删除
-            if (lenIndex != -1) {
-                if (this.pointList.length <= 3) {
-                    return
-                }
-                const delePoint = new SPoint(this.pointList[lenIndex].x, this.pointList[lenIndex].y)
-                this.deletePoint(lenIndex);
-                // 记录顶点操作记录压入堆栈
-                this.recordAction(SGraphPointListDelete, [this.pointList, delePoint, lenIndex]);
-            }
-        } else {
-            // 1 判断是否点击在多边形顶点
-            this.curIndex = -1;
-            this.curPoint = null;
-            let lenIndex = -1;  // 当前点击到的点位索引;
-            let curenLen = this.scenceLen; // 当前的灵敏度
-            this.pointList.forEach((item, index) => {
-                let dis = SMathUtil.pointDistance(
-                    event.x,
-                    event.y,
-                    item.x,
-                    item.y
-                );
-                if (dis < curenLen) {
-                    curenLen = dis;
-                    lenIndex = index;
-                }
-            });
-            this.curIndex = lenIndex;
-            // 2判断是否点击在多边形得边上
-            if (-1 == lenIndex) {
-                let len = SMathUtil.pointToLine(
-                    new SPoint(event.x, event.y),
-                    new SLine(this.pointList[0], this.pointList[1])
-                ),
-                    index = 0;
-                if (this.pointList.length > 2) {
-                    for (let i = 1; i < this.pointList.length; i++) {
-                        let dis = SMathUtil.pointToLine(
-                            new SPoint(event.x, event.y),
-                            new SLine(this.pointList[i], this.pointList[i + 1])
-                        );
-                        if ((i + 1) == this.pointList.length) {
-                            dis = SMathUtil.pointToLine(
-                                new SPoint(event.x, event.y),
-                                new SLine(this.pointList[i], this.pointList[0])
-                            );
-                        }
-                        if (dis.MinDis < len.MinDis) {
-                            len = dis;
-                            index = i;
-                        }
-                    }
-                }
-                // 判断是否有点
-                if (len.Point) {
-                    console.log(index,len.Point);
-                    // 点在了多边形的边上
-                    if (len.MinDis <= this.scenceLen) {
-                        this.pointList.splice(index + 1, 0, len.Point);
-                        // 记录新增顶点操作记录压入堆栈
-                        this.recordAction(SGraphPointListInsert, [this.pointList, len.Point, index + 1]);
-                    } else { //没点在多边形边上也没点在多边形顶点上
-                        super.onMouseDown(event);
-                    }
-                }
-            } else {
-                // 当捕捉到顶点后 ,记录当前点的xy坐标,用于undo、redo操作
-                this.curPoint = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y);
-            }
-            // 刷新视图
-            this.update();
-        }
-
-    }
-
-    /////////////////////
-    // undo、redo相关操作
-
-    /**
-     * 记录相关动作并推入栈中
-     * @param	SGraphCommand         相关命令类
-     * @param	any                    对应传入参数
-     */
-    protected recordAction(SGraphCommand: any, any: any[]): void {
-        // 记录相关命令并推入堆栈中
-        const sgraphcommand = new SGraphCommand(this, ...any);
-        if (this.undoStack) {
-            this.undoStack.push(sgraphcommand);
-        }
-    }
-
-    /**
-     * 执行取消操作执行
-     */
-    undo(): void {
-        if (this.status == SItemStatus.Normal) {
-            return
-        }
-        if (this.undoStack) {
-            this.undoStack.undo();
-        }
-    }
-
-    /**
-     * 执行重做操作执行
-     */
-    redo(): void {
-        if (this.status == SItemStatus.Normal) {
-            return
-        }
-        if (this.undoStack) {
-            this.undoStack.redo();
-        }
-    }
-
-    ///////////////////////////////
-    // 以下为鼠标事件
-
-    /**
-     * 鼠标双击事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onDoubleClick(event: SMouseEvent): boolean {
-        console.log(event)
-        // 如果位show状态 双击改对象则需改为编辑状态
-        if (SItemStatus.Normal == this.status) {
-            this.status = SItemStatus.Edit;
-            this.grabItem(this);
-        } else if (SItemStatus.Edit == this.status) {
-            this.status = SItemStatus.Normal;
-            this.releaseItem();
-            if (this.undoStack) {
-                this.undoStack.clear()
-            }
-        }
-        this.update()
-        return true;
-    } // Function onDoubleClick()
-
-
-    /**
-     * 键盘事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-
-    onKeyDown(event: KeyboardEvent): boolean {
-        if (this.status == SItemStatus.Normal) {
-            return false;
-        } else if (this.status == SItemStatus.Create) {
-            if (event.code == 'Enter') {
-                // 当顶点大于二个时才又条件执行闭合操作并清空堆栈
-                if (this.pointList.length > 2) {
-                    this.status = SItemStatus.Normal;
-                    //3 传递完成事件状态
-                    this.$emit('finishCreated')
-                    //1 grabItem 置为null
-                    this.releaseItem();
-                    //2 清空undo
-                    if (this.undoStack) {
-                        this.undoStack.clear();
-                    }
-                }
-            }
-        } else if (this.status == SItemStatus.Edit) {
-            if (event.key == 'Alt') {
-                this.isAlt = true;
-            }
-        }
-        this.update();
-        return true;
-    } // Function onKeyDown()
-
-
-    /**
-     * 键盘键抬起事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onKeyUp(event: KeyboardEvent): void {
-        if (this.status == SItemStatus.Edit) {
-            if (event.key == 'Alt') {
-                this.isAlt = false;
-            }
-        }
-        this.update()
-    } // Function onKeyUp()
-
-    /**
-     * 鼠标按下事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onMouseDown(event: SMouseEvent): boolean {
-        // 如果状态为编辑状态则添加点
-        if (this.status == SItemStatus.Create) {
-            // 新增顶点
-            this.insertPoint(event.x, event.y);
-            // 记录新增顶点操作记录压入堆栈
-            let pos = new SPoint(event.x, event.y);
-            this.recordAction(SGraphPointListInsert, [this.pointList, pos]);
-        } else if (this.status == SItemStatus.Edit) {
-            // 对多边形数组做编辑操作
-            this.editPolygonPoint(event);
-        } else {
-            return super.onMouseDown(event)
-        }
-        return true;
-
-    } // Function onMouseDown()
-
-    /**
-     * 鼠标移入事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onMouseEnter(event: SMouseEvent): boolean {
-        return true;
-    } // Function onMouseEnter()
-
-
-    /**
-     * 鼠标移出事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-
-    onMouseLeave(event: SMouseEvent): boolean {
-        return true;
-    } // Function onMouseLeave()
-
-    /**
-     * 鼠标移动事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-
-    onMouseMove(event: SMouseEvent): boolean {
-        if (this.status == SItemStatus.Create) {
-            this.lastPoint = new SPoint
-            this.lastPoint.x = event.x;
-            this.lastPoint.y = event.y;
-            this.update();
-        } else if (this.status == SItemStatus.Edit) {
-            if (-1 != this.curIndex) {
-                this.pointList[this.curIndex].x = event.x;
-                this.pointList[this.curIndex].y = event.y;
-            }
-            this.update()
-        } else {
-            // return super.onMouseMove(event)
-        }
-
-        return true;
-    } // Function onMouseMove()
-
-
-    /**
-     * 鼠标抬起事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-    onMouseUp(event: SMouseEvent): boolean {
-        if (this.status == SItemStatus.Edit) {
-            if (-1 != this.curIndex) {
-                const pos = new SPoint(this.pointList[this.curIndex].x, this.pointList[this.curIndex].y)
-                this.recordAction(SGraphPointListUpdate, [this.pointList, this.curPoint, pos, this.curIndex])
-            }
-            this.curIndex = -1;
-            this.curPoint = null;
-        } else {
-            // return super.onMouseUp(event)
-        }
-        return true;
-    } // Function onMouseUp()
-
-    /**
-     * 适配事件
-     *
-     * @param	event         事件参数
-     * @return	boolean
-     */
-
-    onResize(event: SMouseEvent): boolean {
-        return true;
-    } // Function onResize()
-
-    /**
-     * 取消操作
-     *
-     * @param   painter       painter对象
-     */
-    cancelOperate(): void {
-        // 当状态为展示状态
-        if (this.status == SItemStatus.Create) {
-            // 闭合多边形
-            this.parent = null
-        } else if (this.status == SItemStatus.Edit) {
-            // 编辑状态
-            this.status = SItemStatus.Normal
-        }
-        this.update()
-    } // Function cancelOperate()
-
-    /**
-     * Item对象边界区域
-     *
-     * @return SRect
-     */
-    boundingRect(): SRect {
-        if (this.pointList.length) {
-            this.minX = this.pointList[0].x;
-            this.maxX = this.pointList[0].x;
-            this.minY = this.pointList[0].y;
-            this.maxY = this.pointList[0].y;
-            this.pointList.forEach(it => {
-                let x = it.x,
-                    y = it.y;
-                if (x < this.minX) {
-                    this.minX = x;
-                }
-                if (y < this.minY) {
-                    this.minY = y;
-                }
-                if (x > this.maxX) {
-                    this.maxX = x;
-                }
-                if (y > this.maxY) {
-                    this.maxY = y;
-                }
-            });
-        };
-        return new SRect(
-            this.minX,
-            this.minY,
-            this.maxX - this.minX,
-            this.maxY - this.minY
-        );
-    } // Function boundingRect()
-
-    /**
-     * 判断点是否在区域内
-     *
-     * @param x
-     * @param y
-     */
-    contains(x: number, y: number): boolean {
-        let arr = this.pointList;
-        if (arr.length < 3 || !SPolygonUtil.pointIn(x, y, arr)) {
-            return false;
-        }
-        return true;
-    } // Function contains()
-
-    /**
-     * Item绘制操作
-     *
-     * @param   painter       painter对象
-     */
-    onDraw(painter: SPainter): void {
-        this.scenceLen = painter.toPx(this.len)
-        // 当状态为展示状态
-        if (this.status == SItemStatus.Normal) {
-            // 闭合多边形
-            this.drawShowPolygon(painter, this.pointList);
-        } else if (this.status == SItemStatus.Create) {
-            // 创建状态
-            this.drawCreatePolygon(painter, this.pointList)
-        } else {
-            // 编辑状态
-            this.drawEditPolygon(painter, this.pointList);
-        }
-    } // Function onDraw()
-
-
-}

+ 44 - 5
src/components/menuList.vue

@@ -25,8 +25,8 @@
             <span @click='toDrafts' class='span-out'>
                 <img class='img2' src='../assets/imgs/cgx.png' alt />
                 <span class='span2'>草稿箱</span>
-                <span class='span2-num' v-if='value<=99'>{{value}}</span>
-                <span class='span2-num' style='line-height:10px' v-else>...</span>
+                <span class='span2-num' v-if='draftNum && draftNum <= 99'>{{draftNum}}</span>
+                <span class='span2-num' style='line-height:10px' v-else-if='draftNum && draftNum > 99'>...</span>
             </span>
             <span>
                 <img class='img3' src='../assets/imgs/clock.png' alt />
@@ -40,6 +40,7 @@
 import { formatTime } from '@/utils/format.js'
 import { mapGetters } from 'vuex'
 import moment from 'moment'
+import { queryDraftNum } from '../../src/api/public'
 export default {
     data() {
         return {
@@ -55,7 +56,9 @@ export default {
             times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
                 new Date().getHours()
             )}:${formatTime(new Date().getMinutes())}`,
-            value: 190,
+            draftNum: null, //草稿箱数量
+            interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
+            timer: null, //保存定时器
             // 路由词典
             dict: {
                 first: 1,
@@ -68,7 +71,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters(['plazas', 'plazaId'])
+        ...mapGetters(['plazas', 'plazaId', 'fmapID'])
     },
     watch: {
         $route: 'handleRoute'
@@ -77,10 +80,45 @@ export default {
         this.currentTime()
     },
     mounted() {
-        window.vm = this
         this.handleRoute(this.$route)
+        // console.log(this.fmapID)
+        // 定时查询草稿箱数量
+        this.getDraftNum() //首次查询
+        this.timer = setInterval(() => {
+            this.getDraftNum()
+        }, this.interval)
+        // 页面销毁前,清除定时器
+        this.$once('hook:beforeDestroy', () => {
+            clearInterval(this.timer)
+        })
     },
     methods: {
+        /**
+         * @name getDraftNum
+         * @description 查询草稿箱数量
+         */
+        async getDraftNum() {
+            let res = null,
+                data = {
+                    Distinct: true,
+                    Filters: `projectId=${this.plazaId};isPub=false`,
+                    PageNumber: 1,
+                    PageSize: 500,
+                    Projection: ['floorId']
+                }
+            try {
+                // 调用接口
+                res = await queryDraftNum(data)
+            } catch (error) {
+                console.error(error)
+            }
+            if (!res) {
+                this.draftNum = null
+                return false
+            }
+            // 草稿箱总条数使用 res.Total, 不使用 Content数组的长度
+            this.draftNum = res.Total || null
+        },
         //入草稿箱
         toDrafts() {
             const { conf } = window.__systemConf,
@@ -205,6 +243,7 @@ export default {
             float: left;
             width: 80px;
             height: 48px;
+            margin: 0 10px;
             cursor: pointer;
             transition: all 0.2s;
         }

+ 48 - 11
src/components/viewLengend.vue

@@ -7,33 +7,29 @@
     <div class='view'>
         <div v-if='systemName=="土建系统"'>
             <el-table
-                v-loading='loading'
                 ref='dataTable'
-                :data='viewTable'
+                :data='scpzTable'
                 tooltip-effect='dark'
                 style='width:100%;'
                 :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
             >
                 <el-table-column prop label='说明'>
                     <template slot-scope='{row}'>
-                        <span>{{'--'}}</span>
+                        <span>{{(row.Properties && row.Properties.ItemExplain)?row.Properties.ItemExplain:'--'}}</span>
                     </template>
                 </el-table-column>
                 <el-table-column prop label='图例' width='60'>
                     <template slot-scope='{row}'>
-                        <div v-if='row.Url' class='Url-img'>
-                            <img :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
-                        </div>
-                        <div v-else>{{'--'}}</div>
+                        <div class='scpz-img' :style='`background:${row.Properties.FillColor};border:1px solid ${row.Properties.StrokeColor}`'></div>
                     </template>
                 </el-table-column>
             </el-table>
         </div>
         <div v-else>
             <el-table
-                v-loading='loading'
                 ref='dataTable'
-                :data='viewTable'
+                v-if='legendTable.length>=0||viewTable.length>=0'
+                :data='legendTable ||viewTable'
                 tooltip-effect='dark'
                 style='width:100%;'
                 @selection-change='handleSelectionChange'
@@ -73,6 +69,8 @@
     </div>
 </template>
 <script>
+import bus from '@/utils/bus.js'
+import { mapGetters } from 'vuex'
 export default {
     props: ['viewTable', 'loading', 'remarksText', 'systemName'],
     data() {
@@ -84,6 +82,10 @@ export default {
     methods: {
         handleSelectionChange(val) {
             this.multipleSelection = val
+            const tempArr = val.map(t => {
+                return t.GraphElementId
+            })
+            bus.$emit('changeShow', tempArr)
         },
         handleSwich(val) {
             this.$emit('changeSwitch', val)
@@ -94,7 +96,12 @@ export default {
             })
         }
     },
-    mounted() {}
+    computed: {
+        ...mapGetters(['scpzTable', 'legendTable'])
+    },
+    mounted() {
+        console.log(this.legendTable)
+    }
 }
 </script>
 <style lang="less" scoped>
@@ -110,6 +117,10 @@ export default {
             margin-left: 8px;
         }
     }
+    .scpz-img {
+        width: 32px;
+        height: 16px;
+    }
     .remark {
         font-size: 12px;
         font-family: MicrosoftYaHeiSemibold;
@@ -137,4 +148,30 @@ export default {
         }
     }
 }
-</style>
+</style>
+<style lang="less">
+.view {
+    .el-input--mini .el-input__inner {
+        width: 50px;
+    }
+    .el-input__inner {
+        padding: 0 5px;
+    }
+    /deep/ .legend-container .el-table td,
+    .legend-container .el-table th {
+        padding: 3px 0 !important;
+    }
+    .nullData {
+        .el-input__inner {
+            color: #ccc !important;
+        }
+    }
+    .redData {
+        .el-input__inner {
+            border: 1px solid rgba(255, 77, 79, 0.5) !important;
+        }
+    }
+}
+</style>
+
+

+ 13 - 1
src/lib/FloorScene.js

@@ -1,2 +1,14 @@
 import { SGraphScene } from "@saga-web/graph/lib"
-export class FloorScene extends SGraphScene {}
+import { ItemColor } from "@saga-web/big";
+import { SColor } from '@saga-web/draw/lib';
+export class FloorScene extends SGraphScene {
+  constructor(){
+    super()
+    ItemColor.spaceColor = new SColor("#A4ABB22B")
+    ItemColor.wallColor = new SColor("#A7AEB3FF")
+    ItemColor.columnColor = new SColor("#A7AEB3FF")
+    ItemColor.virtualWallColor = new SColor("#A7AEB3FF")
+    ItemColor.selectColor = new SColor("#84A0BB2B")
+    ItemColor.spaceBorderColor = new SColor("#A7AEB3FF")
+  }
+}

+ 1 - 1
src/lib/GraphView.js

@@ -52,7 +52,7 @@ export class GraphView extends SCanvasView {
         canvas.clearRect(0, 0, this.width, this.height);
         canvas.pen.lineWidth = this.lineWidth;
         if (this.lineType == 'dashed') {
-            canvas.pen.lineDash = [10, 10];
+            canvas.pen.lineDash = [10, 2];
         }
         if (this.lineType == 'dotted') {
             canvas.pen.lineDash = [this.lineWidth, this.lineWidth];

+ 34 - 7
src/lib/items/SFHFQZoneLegendItem.js

@@ -1,8 +1,7 @@
-import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
-import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until";
-import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { hexify } from "../../components/mapClass/until";
 /**
  *图例节点Item(区域类型 --防火分区)
  *
@@ -21,12 +20,13 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         this.textItem = new STextItem(this);
         /** 是否显示文字  */
         this._showText = true;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         this.zOrder = ItemOrder.polygonOrder;
         this.data = data;
         this.id = data.ID;
         this.name = data.Name;
         this.text = data.Name;
-        this.font = new SFont("sans-serif", 2);
         if (data) {
             this.setPointList = [];
             let setPointList;
@@ -55,7 +55,7 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = data.Properties.color;
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
                 this.font = new SFont("sans-serif", data.Properties.font);
@@ -140,6 +140,16 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.text;
@@ -154,7 +164,24 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         });
         this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
         this.data.Properties.font = this.font.size;
-        this.data.Properties.color = this.color;
+        this.data.Properties.color = this.color.value;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor);
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 44 - 18
src/lib/items/SFHFQZoneLegendItem.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 { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until"
-import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { hexify } from "../../components/mapClass/until";
 /**
  *图例节点Item(区域类型 --防火分区)
  *
@@ -25,11 +24,11 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         this.textItem.text = v;
         this.update();
     }
-    get color(): string {
+    get color(): SColor {
         return this.textItem.color;
     }
-    set color(v: string) {
-        this.textItem.color = v
+    set color(v: SColor) {
+        this.textItem.color = v;
     }
     get font(): SFont {
         return this.textItem.font
@@ -85,6 +84,18 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         }
     }
 
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
 
     /**
      * 构造函数
@@ -99,7 +110,6 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         this.id = data.ID;
         this.name = data.Name;
         this.text = data.Name;
-        this.font = new SFont("sans-serif", 2);
         if (data) {
             this.setPointList = [];
             let setPointList: SPoint[];
@@ -121,36 +131,36 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
             }
             if (data.Properties.TextPos) {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = data.Properties.color
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
-                this.font =new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont("sans-serif", data.Properties.font);
             }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated",this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.x / arr.length)
-                            }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    return pre + (cur.y / arr.length)
+                }, 0);
             this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.text;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
@@ -163,8 +173,24 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         });
         this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
         this.data.Properties.font =  this.font.size;
-        this.data.Properties.color =  this.color;
+        this.data.Properties.color =  this.color.value;
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

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

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

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

@@ -3,7 +3,7 @@ import { SGraphItem } from "@saga-web/graph/lib";
 import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem';
 import { Legend } from '../types/Legend';
 import { ItemOrder } from '@saga-web/big/lib';
-import { SFont } from '@saga-web/draw/lib';
+import { SFont, SColor } from '@saga-web/draw/lib';
 /**
  * 图例节点Item(图标类型)
  *
@@ -66,7 +66,7 @@ export class SImageLegendItem extends SIconTextItem {
             this.font = new SFont("sans-serif", data.Properties.font);
         }
         if (data.Properties && data.Properties.color) {
-            this.color = data.Properties.color;
+            this.color = new SColor(data.Properties.color);
         }
     }
 
@@ -78,7 +78,7 @@ export class SImageLegendItem extends SIconTextItem {
         this.data.Properties.sWidth = this.sWidth;
         this.data.Properties.sHeight = this.sHeight;
         this.data.Properties.font = this.font.size;
-        this.data.Properties.color = this.color;
+        this.data.Properties.color = this.color.value;
 
         return this.data;
     }

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

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

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

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

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

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

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

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

+ 34 - 7
src/lib/items/SSCPZZoneLegendItem.js

@@ -1,8 +1,7 @@
-import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
-import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until";
-import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { hexify } from "../../components/mapClass/until";
 /**
  * 图例节点Item(区域类型 --石材铺装)
  *
@@ -21,12 +20,13 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         this.textItem = new STextItem(this);
         /** 是否显示文字  */
         this._showText = true;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         this.zOrder = ItemOrder.polygonOrder;
         this.data = data;
         this.id = data.ID;
         this.name = data.Name;
         this.text = data.Name;
-        this.font = new SFont("sans-serif", 2);
         if (data) {
             this.setPointList = [];
             let setPointList;
@@ -55,7 +55,7 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = data.Properties.color;
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
                 this.font = new SFont("sans-serif", data.Properties.font);
@@ -140,6 +140,16 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     /** 图例说明  */
     set itemExplain(v) {
         this.data.Properties.ItemExplain = v;
@@ -161,7 +171,24 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         });
         this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
         this.data.Properties.font = this.font.size;
-        this.data.Properties.color = this.color;
+        this.data.Properties.color = this.color.value;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor);
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 48 - 20
src/lib/items/SSCPZZoneLegendItem.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 { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until"
-import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { hexify } from "../../components/mapClass/until";
 /**
  * 图例节点Item(区域类型 --石材铺装)
  *
@@ -25,11 +24,11 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         this.textItem.text = v;
         this.update();
     }
-    get color(): string {
+    get color(): SColor {
         return this.textItem.color;
     }
-    set color(v: string) {
-        this.textItem.color = v
+    set color(v: SColor) {
+        this.textItem.color = v;
     }
     get font(): SFont {
         return this.textItem.font
@@ -84,11 +83,25 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
     /** 图例说明  */
-    set itemExplain(v:string){
-      this.data.Properties.ItemExplain = v
+    set itemExplain(v: string) {
+        this.data.Properties.ItemExplain = v
     }
-    get itemExplain():string{
+    get itemExplain(): string {
         return this.data.Properties.ItemExplain
     }
 
@@ -105,7 +118,6 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         this.id = data.ID;
         this.name = data.Name;
         this.text = data.Name;
-        this.font = new SFont("sans-serif", 2);
         if (data) {
             this.setPointList = [];
             let setPointList: SPoint[];
@@ -133,30 +145,30 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
             }
             if (data.Properties.color) {
-                this.color = data.Properties.color
+                this.color = new SColor(data.Properties.color);
             }
             if (data.Properties.font) {
-                this.font =new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont("sans-serif", data.Properties.font);
             }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated",this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.x / arr.length)
-                            }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    return pre + (cur.y / arr.length)
+                }, 0);
             this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.text;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
@@ -169,8 +181,24 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         });
         this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
         this.data.Properties.font =  this.font.size;
-        this.data.Properties.color =  this.color;
+        this.data.Properties.color =  this.color.value;
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

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

@@ -1,4 +1,4 @@
-import { STextItem, SLineStyle } from "@saga-web/graph/lib";
+import { STextItem } from "@saga-web/graph/lib";
 import { SColor, SFont } from "@saga-web/draw";
 import { ItemOrder } from '@saga-web/big/lib';
 /**
@@ -15,10 +15,6 @@ export class STextMarkerItem extends STextItem {
      */
     constructor(parent, data) {
         super(parent);
-        /** 边框宽度 */
-        this._lineWidth = 1;
-        /** 边框样式    */
-        this._borderStyle = SLineStyle.None;
         this.zOrder = ItemOrder.textOrder;
         this.data = data;
         this.id = data.ID;
@@ -32,74 +28,23 @@ export class STextMarkerItem extends STextItem {
             this.text = data.Properties.Text;
         }
         if (data.Properties && data.Properties.Color) {
-            this.color = data.Properties.Color;
+            this.color = new SColor(data.Properties.Color);
         }
         if (data.Properties && data.Properties.Font) {
             this.font = new SFont("sans-serif", data.Properties.Font);
             ;
         }
         if (data.Properties && data.Properties.BackgroundColor) {
-            this.backgroundColor = data.Properties.BackgroundColor;
+            this.backgroundColor = new SColor(data.Properties.BackgroundColor);
         }
     } // Constructor
-    get lineWidth() {
-        return this._lineWidth;
-    }
-    set lineWidth(v) {
-        this._lineWidth = v;
-        this.update();
-    }
-    get borderStyle() {
-        return this._borderStyle;
-    }
-    set borderStyle(v) {
-        this._borderStyle = v;
-        this.update();
-    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Size = { Width: this.width, Height: this.height };
         this.data.Properties.Text = this.text;
-        this.data.Properties.Color = this.color;
+        this.data.Properties.Color = this.color.value;
         this.data.Properties.Font = this.font.size;
-        this.data.Properties.BackgroundColor = this.backgroundColor;
+        this.data.Properties.BackgroundColor = this.backgroundColor.value;
         return this.data;
     }
-    /**
-     * Item绘制操作
-     *
-     * @param   painter      绘画类
-     */
-    onDraw(painter) {
-        // 绘制文本
-        painter.brush.color = new SColor(this.color);
-        painter.font = this.font;
-        this.drawFormatText(painter);
-        if (this.selected) {
-            this.borderStyle = SLineStyle.Dashed;
-        }
-        else {
-            this.borderStyle = SLineStyle.None;
-        }
-        if (this.borderStyle == SLineStyle.Dashed) {
-            painter.pen.lineDash = [
-                painter.toPx(this.lineWidth * 3),
-                painter.toPx(this.lineWidth * 7)
-            ];
-            painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-        }
-        else if (this.borderStyle == SLineStyle.Dotted) {
-            painter.pen.lineDash = [
-                painter.toPx(this.lineWidth),
-                painter.toPx(this.lineWidth)
-            ];
-            painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-        }
-        else if (this.borderStyle == SLineStyle.Soild) {
-            painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-        }
-    } // Function onDraw()
 } // Class STextMarkerItem

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

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

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

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

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

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

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

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

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

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

+ 20 - 4
src/store/index.js

@@ -12,12 +12,15 @@ export default new Vuex.Store({
             orgCode: '',
             username: 'lengqiang', //账户名称
         },
-        plazaId: '1000423',
+        plazaId: '1000423', //项目Id
         projectName: '', //全局项目名称
         floorsArr: [], //楼层数组
         floorSelect: [], //楼层下拉框
         fmapID: '',
-        haveFengMap:false ,//是否有蜂鸟地图的数据
+        haveFengMap: false, //是否有蜂鸟地图的数据
+        isMessage: true, //是否有发布的图
+        scpzTable: [], //土建系统图例展示
+        legendTable: [], //除土建系统图例展示
     },
     getters: {
         floorsArr: (state) => state.floorsArr,
@@ -25,7 +28,10 @@ export default new Vuex.Store({
         plazaId: (state) => state.plazaId,
         plazas: (state) => state.plazas,
         fmapID: (state) => state.fmapID,
-        haveFengMap:(state) => state.haveFengMap
+        haveFengMap: (state) => state.haveFengMap,
+        isMessage: (state) => state.isMessage,
+        scpzTable: (state) => state.scpzTable,
+        legendTable: (state) => state.legendTable,
     },
     mutations: {
         // 设置是否登陆校验
@@ -40,6 +46,9 @@ export default new Vuex.Store({
             state.userInfo.orgCode = palyload.orgCode
             state.userInfo.username = palyload.username
         },
+        SETISMESSAGE(state, data) {
+            state.isMessage = data
+        },
         SETFLOORS(state, data) {
             state.floorsArr = data
             if (data.length > 0) {
@@ -56,7 +65,14 @@ export default new Vuex.Store({
             state.fmapID = data
         },
         SETHAVEFENGMAP(state) {
-            state.haveFengMap = true;
+            state.haveFengMap = true
+        },
+        // 土建的图例
+        SETSCPZTABLE(state, data) {
+            state.scpzTable = data
+        },
+        SETLEGENDTABLE(state, data) {
+            state.legendTable = data
         },
     },
     actions: {

+ 3 - 0
src/utils/bus.js

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

+ 12 - 13
src/utils/plugins/components.js

@@ -111,7 +111,7 @@ var system = [
                         {
                             label: "分水器支路分布图",
                             id: "NTYL4",
-                            param: { tab_code: "1542", type_code: "FBT" },
+                            param: { tab_code: "1542", type_code: "FBT1" },
                         },
                     ],
                 },
@@ -221,7 +221,7 @@ var system = [
                         {
                             label: "消防泵房引出管路分布图",
                             id: "XFYL5",
-                            param: { type_code: "FBT" },
+                            param: { type_code: "FBT2" },
                         },
                     ],
                     id: "XFYL",
@@ -300,16 +300,16 @@ var system = [
                     label: "系统原理图",
                     children: [
                         {
-                            label: "视频监控系统原理图",
-                            id: "RDYL1",
-                            param: { tab_code: "1572", type_code: "2018" },
-                        },
-                        {
                             label: "门禁管理系统原理图",
                             id: "RDYL2",
                             param: { tab_code: "rd01", type_code: "2019" },
                         },
                         {
+                            label: "视频监控系统原理图",
+                            id: "RDYL1",
+                            param: { tab_code: "1572", type_code: "2018" },
+                        },
+                        {
                             label: "BA楼宇智能化系统原理图",
                             id: "RDYL3",
                             param: { tab_code: "1574", type_code: "2010" },
@@ -325,16 +325,15 @@ var system = [
                             label: "门禁管理",
                             id: "RDQD2",
                             param: { tab_code: "rd01" },
-                        },
-                        {
-                            label: "BA楼宇智能化",
-                            id: "RDQD1",
-                            param: { tab_code: "rd02" },
-                        },
+                        }, 
                         {
                             label: "视频监控",
                             id: "RDQD3",
                             param: { tab_code: "rd03" },
+                        },{
+                            label: "BA楼宇智能化",
+                            id: "RDQD1",
+                            param: { tab_code: "rd02" },
                         },
                     ],
                 },

+ 37 - 17
src/views/equipment/eqDialog.vue

@@ -9,13 +9,14 @@
                     v-if='dialogInfo.id.slice(2,4)!="QD" && dialogInfo.id.slice(2,4)!="YL" && dialogInfo.id.slice(0,4)!="GJSP"'
                     src='../../assets/imgs/zy1.png'
                     @click='visibalBox'
+                    style='margin-top:-4px;'
                     alt
                 />
             </div>
             <!-- 没有tab的页面 -->
-            <div v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length==0' style='margin:16px 24px 0 24px'>
+            <div v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length==0' style='margin:16px 0 0 24px;height:90%'>
                 <!-- 原理图 -->
-                <div v-if='dialogInfo.id.slice(2,4)=="YL"' style='width:90%;overflow:hidden'>
+                <div v-if='dialogInfo.id.slice(2,4)=="YL"' style='width:90%;overflow:hidden;height:100%'>
                     <rotation :rotationImg='rotationImg'></rotation>
                 </div>
                 <!-- 土建系统主要材料清单 -->
@@ -29,7 +30,7 @@
                 <look-page v-else-if='dialogInfo.id.slice(2,4)=="TZ"' param major></look-page>
             </div>
             <!-- 有tab的页面 -->
-            <div v-else style='margin:16px 24px 0 24px;'>
+            <div v-else style='margin:16px 0 0 24px;height:100%;'>
                 <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
                     <el-tab-pane
                         v-for='(value,index) in dialogInfo.children'
@@ -58,7 +59,7 @@
                                     :key='index1+index'
                                     :label='`${value.label}`'
                                     :name='`${value.param.type_code}`'
-                                    v-if='value.id.slice(2,4)=="YL" && eve.count>0 && value.param.type_code!="FBT"'
+                                    v-if='value.id.slice(2,4)=="YL" && eve.count>0 && value.param.type_code.slice(0,3)!="FBT"'
                                 >
                                     <!-- 有tab的原理图 -->
                                     <div style='width:100%;height:600px;overflow:hidden'>
@@ -70,9 +71,9 @@
                                     :key='index1+index'
                                     :label='`${value.label}`'
                                     :name='`${value.param.type_code}`'
-                                    v-if='value.id.slice(2,4)=="YL" && value.param.type_code=="FBT"'
+                                    v-if='value.id.slice(2,4)=="YL" && value.param.type_code.slice(0,3)=="FBT"'
                                 >
-                                    <fenbuPic ref='fenbutu'></fenbuPic>
+                                    <fenbuPic ref='fenbutu' :typecode='value.param.type_code'></fenbuPic>
                                 </el-tab-pane>
                             </template>
                         </template>
@@ -117,7 +118,6 @@ export default {
     methods: {
         //打开弹窗
         showModal(item) {
-            console.log(item)
             this.visible = true
             this.dialogInfo = item
             if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
@@ -138,7 +138,6 @@ export default {
                     this.initImage(this.typecode)
                 }
             }
-            //console.log(this.dialogInfo)
             this.param = this.activeName
         },
         //点击tab函数
@@ -154,12 +153,17 @@ export default {
                 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' && this.typecode != 'FBT') {
+            if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL' && this.typecode.slice(0, 3) != 'FBT') {
                 this.initImage(this.typecode)
             }
-           
+            if (this.dialogInfo.children[0].id.slice(2, 4) == 'YL' && this.typecode.slice(0, 3) == 'FBT') {
+                this.$nextTick(() => {
+                    this.$refs.fenbutu[0] && this.$refs.fenbutu[0].openFloorMap()
+                })
+            }
             this.tabLabel = tab.label
         },
+
         visibalBox() {
             this.$refs.Dialog.open(this.dialogInfo.id)
         },
@@ -200,7 +204,6 @@ export default {
             if (this.systemName == '供电系统') {
                 getParams.system = '1001'
             }
-            console.log(getParams)
             queryPic({ getParams }).then(res => {
                 this.rotationImg = res.data || []
             })
@@ -236,7 +239,6 @@ export default {
             }
             queryTab({ data, postParams }).then(res => {
                 this.tabCount = []
-                console.log('res', res)
                 let data = res.data.data || []
                 data.forEach(el => {
                     this.tabCount.push({
@@ -256,8 +258,11 @@ export default {
     .title-name {
         font-size: 16px;
         padding-right: 6px;
+        padding-left: 24px;
         color: #000;
         font-weight: bold;
+        color: #646a73;
+        font-weight: normal;
     }
 }
 .top {
@@ -298,6 +303,10 @@ export default {
     .el-tabs__nav-wrap::after {
         height: 0;
     }
+    .el-tabs,
+    .el-tabs__content {
+        height: calc(100% - 45px);
+    }
     .el-tabs__item {
         padding: 5px 16px;
         height: 30px;
@@ -307,13 +316,17 @@ export default {
         color: rgba(31, 36, 41, 1);
         border: 1px solid rgba(195, 199, 203, 1);
     }
-    .el-tab-pane {
-        height: 60% !important;
+
+    /deep/ .el-tabs__item:last-child {
+        border-radius: 0px 4px 4px 0px;
     }
-    .el-tabs,
-    .el-tabs__content {
-        height: 700px;
+    /deep/ .el-tabs__item:nth-child(2) {
+        border-radius: 4px 0px 0px 4px;
+    }
+    .el-tab-pane {
+        height: 100% !important;
     }
+
     .el-tabs__active-bar {
         background-color: transparent !important;
     }
@@ -370,4 +383,11 @@ export default {
         }
     }
 }
+@media screen and (max-width: 1366px) {
+    /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
+    .el-tabs,
+    .el-tabs__content {
+        height: 700px;
+    }
+}
 </style>

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

@@ -2,19 +2,11 @@
     <div class='fenbu-box'>
         <!-- 图例 -->
         <div class='legend-boxs'>
-            <Legend :floors='floors' type='0'></Legend>
+            <Legend :floors='floors' type='0' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`'></Legend>
         </div>
         <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>
-        <div v-show='floors.length>0'>
-            <floorMap ref='floorMap' :loadName='loadName' :type='"floor"'></floorMap>
+        <div v-show='floors.length>0' class='canvas-box'>
+            <floorMap ref='floorMap' :modalHeight='modalHeight' :loadName='""' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`' :type='"floor"'></floorMap>
         </div>
         <div class='nodata' v-show='floors.length==0'>
             <img class='img1' src='@/assets/imgs/wtp.png' alt />
@@ -38,12 +30,21 @@ export default {
             },
             loadName: '',
             type: '',
-            floors: []
+            floors: [],
+            modalHeight: 500,   //适配底图
         }
     },
+    props: ['typecode'],
     computed: {
         ...mapGetters(['floorsArr'])
     },
+    mounted() {
+        if (window.screen.width > 1366) {
+            this.modalHeight = 700
+        } else {
+            this.modalHeight = 500
+        }
+    },
     methods: {
         emitFloor(item) {
             this.floorInfo = item
@@ -55,14 +56,19 @@ export default {
         getFloorData() {
             let postParams = {
                 Distinct: true,
-                Filters: `projectId =${this.$store.state.plazaId};categoryId='LCGN' or categoryId='XFBFYCFL';isPub=true`,
                 PageNumber: 1,
                 PageSize: 500,
                 Projection: ['floorId']
             }
+            if (this.typecode == 'FBT1') {
+                postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='FZQZL';isPub=true`
+            }
+            if (this.typecode == 'FBT2') {
+                postParams.Filters = `projectId =${this.$store.state.plazaId};categoryId='XFBFYCFL';isPub=true`
+            }
             let floor = []
+            this.floors = []
             queryPics({ postParams }).then(res => {
-                console.log(res)
                 if (res.Total == 0) {
                     this.floors = []
                 } else {
@@ -72,19 +78,26 @@ export default {
                             if (ele.FloorId == el.gname) {
                                 this.floors.push({
                                     gname: el.gname,
-                                    code: el.code
+                                    gcode: el.gcode,
+                                    name: el.name,
+                                    code: el.code,
+                                    seq: el.seq
                                 })
                             }
                         })
                     })
                 }
-                console.log(this.floors)
+                this.floorInfo = this.floors[0]
+                this.init()
             })
+        },
+        init() {
+            this.loadName = `${this.floorInfo.code}`
+        },
+        openFloorMap() {
+            this.getFloorData()
+            this.$refs.floorMap.init(this.floorInfo.gname)
         }
-    },
-    mounted() {
-        this.getFloorData()
-        // this.$refs.floorMap.init(this.floorInfo.gname)
     }
 }
 </script>
@@ -100,40 +113,9 @@ export default {
         right: 32px;
         top: 155px;
     }
-    .additional-box {
-        position: relative;
-        .additional {
-            width: 44px;
-            height: 44px;
-            background: rgba(255, 255, 255, 1);
-            box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
-            border-radius: 2px;
-            position: fixed;
-            right: 32px;
-            top: 420px;
-            z-index: 2;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            img {
-                width: 20px;
-                height: 20px;
-            }
-        }
-        .add-img {
-            width: 560px;
-            height: 325px;
-            background: #ffffff;
-            -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
-            box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
-            border-radius: 2px;
-            border: 1px solid #e4e5e7;
-            position: absolute;
-            right: 77px;
-            top: 93px;
-            z-index: 2;
-        }
+    .canvas-box {
+        width: 100%;
+        height: 100%;
     }
     .nodata {
         height: calc(100%-50px);

+ 49 - 21
src/views/equipment/index.vue

@@ -20,20 +20,23 @@
                 <div class='eq-right-bottom'>
                     <div class='title-box'>
                         <div class='eq-title'>
-                            <span>{{floorInfo.code}}</span>
+                            <span class="span1">{{floorInfo.code}}</span>
                         </div>
                     </div>
                     <div class='eq-content'>
                         <div class='legend-boxs'>
-                            <Legend :systemName='systemName' :floors='floorsArr' type='1'></Legend>
+                            <Legend :systemName='systemName' :floors='floorsArr' type='1' :editTips='`编辑${floorInfo.code}层${systemName}平面图`'></Legend>
                         </div>
                         <floorMap ref='floorMap' :id='"equip"' :loadName='loadName' :type='"system"'></floorMap>
+                        <!--  -->
                         <div class='additional-box' v-if='fqPic.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>
+                                <div v-if='show' class='add-img'>
+                                    <img :src='fqPic[0].url' alt />
+                                </div>
                             </el-collapse-transition>
                         </div>
                     </div>
@@ -51,7 +54,7 @@ import floorMap from '@/components/floorMap/index.vue'
 import eqDialog from './eqDialog'
 import editList from '@/components/edit.vue'
 import { system } from '@/utils/plugins/components.js'
-import { queryPic } from '@/api/public.js'
+import { queryPic, queryBrand } from '@/api/public.js'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -79,18 +82,30 @@ export default {
     },
     components: { floorList, eqDialog, floorMap, editList },
     methods: {
+        query() {
+            let data = {
+                plazaId: '1000423'
+            }
+            // let postParams = []
+            queryBrand({ data }).then(res => {
+                console.log(res)
+            })
+        },
         // 查询tab页
         tabSyatem(item) {
-            console.log(item)
             this.systemId = item.id
             this.everySystem = item.children
             this.systemName = item.name
             this.smsxt = item.smsxt
             this.$cookie.set('categoryId', item.categoryId, 3)
+            this.$refs.floorMap.init(this.floorInfo.gname)
+            this.querySmsxt()
+        },
+        querySmsxt() {
+            // 目前消防和弱电下面有特殊的数据表格
             if (this.smsxt == '1003' || this.smsxt == '1004') {
-                this.Index()
+                this.queryTable(this.smsxt)
             }
-            this.init()
         },
         //判断有没有原理图,如果没有则不出现系统原理图列表li
         emitCount(objCount) {
@@ -100,6 +115,7 @@ export default {
             this.floorInfo = item
             this.$refs.floorMap.init(this.floorInfo.gname)
             this.init()
+            this.querySmsxt()
         },
         dialogVisible(eve) {
             this.$refs.dialog.showModal(eve)
@@ -107,19 +123,20 @@ export default {
         additionalColl() {
             this.show = !this.show
         },
-        Index() {
+        // 查询附加数据图片
+        queryTable(system) {
+            this.fqPic = []
             let picFloor = this.$cookie.get('floorNow')
             let getParams = {
                 module: '1003',
                 floor: picFloor,
-                plazaId: this.$store.state.plazaId
-            }
-            if (this.smsxt) {
-                getParams.system = this.smsxt
+                system: system,
+                plazaId: this.plazaId
             }
             queryPic({ getParams }).then(res => {
-                //console.log('分区图', res)
+                console.log('附加数据', res)
                 this.fqPic = res.data
+                console.log(this.fqPic)
             })
         },
         init() {
@@ -128,11 +145,9 @@ export default {
         // 从设备设施进入的机房
         queryType(val) {
             this.type = val
-            console.log(this.type)
         }
     },
     mounted() {
-        console.log('smsxtsmsxtsmsxt', this.$route.query.smsxt)
         if (this.$route.query.smsxt) {
             this.smsxt = this.$route.query.smsxt
             this.system.forEach(el => {
@@ -146,9 +161,10 @@ export default {
         this.everySystem = this.system[0].children
         this.init()
         this.$refs.floorMap.init(this.floorInfo.gname)
+        this.query()
     },
     computed: {
-        ...mapGetters(['floorsArr'])
+        ...mapGetters(['floorsArr', 'plazaId'])
     }
 }
 </script>
@@ -158,6 +174,7 @@ export default {
     display: flex;
     flex: 1;
     overflow: hidden;
+    color: #1f2429;
     .eq-top {
         margin-left: 260px;
         padding-top: 24px;
@@ -202,13 +219,13 @@ export default {
             .circle {
                 width: 6px;
                 height: 6px;
-                background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+                background: linear-gradient(180deg, rgba(54, 156, 247, 0.6) 0%, rgba(2, 91, 170, 0.6) 100%);
                 border-radius: 50%;
                 display: inline-block;
                 margin-right: 10px;
             }
             .hanzi {
-                padding: 10px 2px;
+                padding: 10px 0 10px 6px;
                 width: 200px;
                 display: inline-block;
                 &:hover {
@@ -223,6 +240,7 @@ export default {
             .eq-right-bottom {
                 display: flex;
                 flex: 1;
+                height: 100%;
                 .title-box {
                     position: fixed;
                     z-index: 2;
@@ -248,6 +266,10 @@ export default {
                             margin-right: 10px;
                             margin-top: 8px;
                         }
+                        .span1{
+                                position: absolute;
+                                top: 3px;
+                        }
                     }
                 }
                 .eq-content {
@@ -268,7 +290,7 @@ export default {
                             border-radius: 2px;
                             position: fixed;
                             right: 32px;
-                            top: 420px;
+                            top: 510px;
                             z-index: 2;
                             display: flex;
                             justify-content: center;
@@ -281,7 +303,7 @@ export default {
                         }
                         .add-img {
                             width: 560px;
-                            height: 325px;
+                            height: 360px;
                             background: #ffffff;
                             -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
                             box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
@@ -289,8 +311,14 @@ export default {
                             border: 1px solid #e4e5e7;
                             position: absolute;
                             right: 77px;
-                            top: 93px;
+                            bottom: 381px;
                             z-index: 2;
+                            img {
+                                max-width: 100%;
+                                max-height: 100%;
+                                display: block;
+                                margin: 0 auto;
+                            }
                         }
                     }
                 }

+ 9 - 6
src/views/equipment/table/djspTable.vue

@@ -22,25 +22,25 @@
             ></el-input>
             <Select @change='getList' v-model='floor' width='120' tipPlace='top' caption='楼层 :' :selectdata='floorSelect'></Select>
         </div>
-        <el-table :data='tableData' :span-method='objectSpanMethod' border style='width: 100%' @row-click='innerVisible = true'>
-            <el-table-column prop='floor' label='楼层' width='200'>
+        <el-table :data='tableData' :span-method='objectSpanMethod' :border='true' style='width: 100%' @row-click='innerVisible = true'>
+            <el-table-column prop='floor' label='楼层' width='50'>
                 <template slot-scope='{row}'>{{row.floor || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='welldes' label='电井间'>
+            <el-table-column prop='welldes' label='电井间' width="120">
                 <template slot-scope='{row}'>{{row.welldes || '--'}}</template>
             </el-table-column>
             <el-table-column prop='meterbox' label='商铺电表数' width='200'>
                 <template slot-scope='{row}'>{{row.meterbox || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='shopsnum' label='商铺编号' width='200'>
-                <template slot-scope='{row}'>{{row.shopsnum || '--'}}</template>
+            <el-table-column prop='shopsnum' label='商铺编号' >
+                <template slot-scope='{row}'>{{row.shopsnumList || '--'}}</template>
             </el-table-column>
         </el-table>
         <div class='foot'></div>
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import EqDetail from './eqDetaileDialog'
 import { queryShops } from '@/api/equipmentList.js'
 import { mapGetters } from 'vuex'
@@ -130,6 +130,9 @@ export default {
             if (newV !== oldV) {
                 this.getList()
             }
+        },
+        floor(){
+            this.getList()
         }
     },
     mounted() {

+ 25 - 11
src/views/equipment/table/eqDetaileDialog.vue

@@ -48,35 +48,35 @@
             <input-dialog :type='1' @confirm='confirm'></input-dialog>
         </div>
         <el-table :data='tableData' :border='true' style='width: 100%;amrgin-bottom:30px'>
-            <el-table-column type='index' label='序号' width='80'></el-table-column>
-            <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable>
+            <el-table-column type='index' label='序号' width='60' :index="indexMethod"></el-table-column>
+            <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width="150">
                 <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='assetnum' label='设备编号' show-overflow-tooltip resizable>
+            <el-table-column prop='assetnum' label='设备编号' show-overflow-tooltip resizable width="80">
                 <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='sl' label='数量' width='100'>
+            <el-table-column prop='sl' label='数量' width='80'>
                 <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
             </el-table-column>
             <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
                 <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='sb_status' label='设备状态'>
+            <el-table-column prop='sb_status' label='设备状态' width="80">
                 <template slot-scope='{row}'>{{row.sb_status || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable>
+            <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable width="80">
                 <template slot-scope='{row}'>{{row.brand || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable>
+            <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width="80">
                 <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='floor' sortable label='楼层' width='100'>
+            <el-table-column prop='floor' sortable label='楼层' width='80'>
                 <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable>
+            <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable min-width="150">
                 <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable>
+            <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width="150">
                 <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
             </el-table-column>
             <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable>
@@ -97,7 +97,7 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import { mapGetters } from 'vuex'
 import { queryAsset } from '@/api/equipmentList.js'
 import { querySelect } from '@/api/public.js'
@@ -136,10 +136,15 @@ export default {
     },
     props: ['row', 'major'],
     mounted() {
+        this.floor = this.$cookie.get('floorMapId')
         this.queryTableList()
         this.tabFind()
     },
     methods: {
+        //序号的方法
+        indexMethod(index) {
+            return (this.page - 1) * this.size + index + 1
+        },
         //多余输入框监听
         confirm(fws, manufacturer) {
             //console.log(fws, manufacturer, '------')
@@ -272,6 +277,15 @@ export default {
                 this.tabFind()
             },
             deep: true
+        },
+        sbglgs(){
+            this.queryTableList()
+        },
+        status(){
+            this.queryTableList()
+        },
+        floor(){
+            this.queryTableList()
         }
     }
 }

+ 25 - 17
src/views/equipment/table/eqListTable.vue

@@ -20,7 +20,16 @@
                 v-model='keyword'
                 style='width:192px;margin-right:12px'
             ></el-input>
-            <Select @change='getList' v-model='floor' style='margin-right:12px;' width='120' tipPlace='top' caption='楼层 :' :selectdata='floorSelect'></Select>
+            <Select
+                @change='getList'
+                @cancel='getList'
+                v-model='floor'
+                style='margin-right:12px;'
+                width='120'
+                tipPlace='top'
+                caption='楼层 :'
+                :selectdata='floorSelect'
+            ></Select>
             <el-input
                 placeholder='搜索生产厂商'
                 clearable
@@ -32,17 +41,17 @@
             ></el-input>
         </div>
         <el-table :data='tableData' style='width: 100%' :border='true' @row-click='rowHandle'>
-            <el-table-column type='index' label='序号' width='50'></el-table-column>
-            <el-table-column prop='type_name' label='设备名称' show-overflow-tooltip resizable width='160'>
+            <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
+            <el-table-column prop='type_name' label='设备名称' show-overflow-tooltip resizable width='250'>
                 <template slot-scope='{row}'>{{row.type_name || '--'}}</template>
             </el-table-column>
             <el-table-column prop='sl' label='数量' width='100'>
                 <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
             </el-table-column>
-            <el-table-column prop='brand' label='品牌'>
+            <el-table-column prop='brand' label='品牌' width='120'>
                 <template slot-scope='{row}'>{{row.brand || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable>
+            <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='150'>
                 <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
             </el-table-column>
             <el-table-column prop='floorcode' label='楼层' width='100'>
@@ -51,7 +60,7 @@
             <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable>
                 <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable>
+            <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width="300">
                 <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
             </el-table-column>
         </el-table>
@@ -73,7 +82,7 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import EqDetail from './eqDetaileDialog'
 import { queryEquipmentList } from '@/api/equipmentList.js'
 import { mapGetters } from 'vuex'
@@ -82,16 +91,10 @@ export default {
     components: { Select, EqDetail },
     data() {
         return {
-            dataSelect2: [
-                { id: 'test1', name: '选择项' },
-                { id: 'test2', name: '单平米' },
-                { id: 'test3', name: '下级分项' },
-                { id: 'test4', name: '滑动平均滑动平均' }
-            ],
             tableData: [],
             total: 0,
             currentPage: 1,
-            size: 10,
+            size: 11,
             innerVisible: false, //详情弹框
             keyword: '',
             manufacturer: '',
@@ -105,6 +108,9 @@ export default {
     },
     props: ['param', 'major'],
     methods: {
+        indexMethod(index) {
+            return (this.currentPage - 1) * this.size + index + 1
+        },
         rowHandle(row) {
             //console.log(row)
             this.innerVisible = true
@@ -126,10 +132,8 @@ export default {
             }
             //下拉
             if (this.floor) {
-                console.log(this.floor)
                 postParams.gname = this.floor
             }
-            console.log(this.floor)
             //输入框搜索
             data.keyword = ''
             if (this.keyword) {
@@ -144,7 +148,6 @@ export default {
             if (data.keyword == '') {
                 delete data.keyword
             }
-
             queryEquipmentList({ data, postParams }).then(res => {
                 //console.log(res)
                 this.tableData = res.data.data
@@ -158,9 +161,14 @@ export default {
             if (newV !== oldV) {
                 this.getList()
             }
+        },
+        floor(newV, oldV) {
+            console.log(newV, oldV)
+            this.getList()
         }
     },
     mounted() {
+        this.floor = this.$cookie.get('floorMapId')
         this.getList()
         console.log(this.param)
     }

+ 13 - 11
src/views/equipment/table/inputDIalog.vue

@@ -2,23 +2,25 @@
     <div class='input-dialog'>
         <div
             @click='show'
-            style='color: #c3c7cb;cursor: pointer;position:absolute;right:32px;z-index:9999'
-            :class='`top:${type === 1 ? "40px" : "0"};`'
+            style='color: #1F2429;cursor: pointer;position:absolute;z-index:9999;'
+            :style='`right:${type === 1 ? "48px" : "12px"};top:${type === 1 ? "102px" : "0px"};`'
+            
         >
             <img src='@/assets/imgs/select.png' />
-            筛选
+            <span>筛选</span>
         </div>
         <div
             v-if='dialogFormVisible'
             style='width:280px;height:250px;background:rgba(255,255,255,1);margin-top:40px;
             box-shadow:0px 2px 10px 0px rgba(31,35,41,0.1);border:1px solid rgba(228,229,231,1);z-index:9999;
-            position:absolute;right:0px;'
+            position:absolute;'
+             :style='`right:${type === 1 ? "40px" : "0"};`'
         >
             <el-form style=' padding:20px 24px;' v-if='type==1'>
                 <p style='margin:0 0 8px 0'>生产厂商</p>
                 <el-input
                     placeholder='搜索生产厂商'
-                    style='width:192px;margin-right:12px'
+                    style='width:232px;margin-right:12px'
                     size='small'
                     clearable
                     prefix-icon='el-icon-search'
@@ -28,7 +30,7 @@
                 <el-input
                     placeholder='搜索服务商'
                     clearable
-                    style='width:192px;margin-right:12px'
+                    style='width:232px;margin-right:12px'
                     size='small'
                     prefix-icon='el-icon-search'
                     v-model='inputForm.fws'
@@ -36,20 +38,20 @@
             </el-form>
             <el-form style=' padding: 20px 24px;' v-if='type==2'>
                 <p style='margin:0 0 8px 0'>任务编号</p>
-                <el-input placeholder='搜索任务编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.gzglid' style='width:192px;'></el-input>
+                <el-input placeholder='搜索任务编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.gzglid' style='width:232px;'></el-input>
             </el-form>
             <el-form style=' padding: 20px 24px;' v-if='type==3'>
                 <p style='margin:0 0 8px 0'>工单编号</p>
-                <el-input placeholder='搜索工单编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.wonum' style='width:192px;'></el-input>
+                <el-input placeholder='搜索工单编号' clearable size='small' prefix-icon='el-icon-search' v-model='inputForm.wonum' style='width:232px;'></el-input>
             </el-form>
             <el-form style=' padding: 20px 24px;' v-if='type==4'>
                 <p style='margin:0 0 8px 0'>验收结果</p>
-                <el-select v-model='inputForm.status' placeholder='请选择' size='small' style='width:220px'>
+                <el-select v-model='inputForm.status' placeholder='请选择' size='small' style='width:232px'>
                     <el-option v-for='item in statusOption' :key='item.id' :label='item.name' :value='item.id'></el-option>
                 </el-select>
                 <p style='margin:16px 0 8px 0'>验收日期</p>
                 <el-date-picker
-                    style='width:220px'
+                    style='width:232px'
                     v-model='inputForm.yssjwcsj'
                     value-format='yyyyMMdd'
                     type='daterange'
@@ -59,7 +61,7 @@
                     end-placeholder
                 ></el-date-picker>
             </el-form>
-            <div style='position:absolute;bottom:20px;right:47px;z-index:9999'>
+            <div style='position:absolute;bottom:24px;right:24px;z-index:9999'>
                 <el-button @click='dialogFormVisible = false' size='small'>取 消</el-button>
                 <el-button type='primary' @click='confirm' size='small'>确 定</el-button>
             </div>

+ 8 - 3
src/views/equipment/table/lookPageTable.vue

@@ -12,10 +12,10 @@
                 style='width:192px;margin-right:12px'
             ></el-input>
             <Select @change='getList' v-model='floor' style='margin-right:12px;' width='120' tipPlace='top' caption='楼层 :' :selectdata='floorSelect'></Select>
-            <Select @change='getList' v-model='floor' width='120' tipPlace='top' caption='文件类型 :' :selectdata='floorSelect'></Select>
+            <Select @change='getList' v-model='fileType' width='140' tipPlace='top' caption='文件类型 :' :selectdata='floorSelect'></Select>
         </div>
         <el-table :data='tableData' style='width: 100%'>
-            <el-table-column type='index' label='序号' width='80'></el-table-column>
+            <el-table-column type='index' label='序号' width='60' :index="indexMethod"></el-table-column>
             <el-table-column prop='lb' label='分类' width='160'>
                 <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
             </el-table-column>
@@ -60,7 +60,8 @@ export default {
             currentPage: 1,
             size: 11,
             keyword: '',
-            floor: ''
+            floor: '',
+            fileType:''
         }
     },
     props: ['major'],
@@ -68,6 +69,10 @@ export default {
         ...mapGetters(['floorSelect'])
     },
     methods: {
+        //序号的方法
+        indexMethod(index) {
+            return (this.currentPage - 1) * this.size + index +1
+        },
         pageChanged(page, size) {
             this.currentPage = page
             this.getList()

+ 19 - 12
src/views/equipment/table/otherTable.vue

@@ -26,7 +26,6 @@
                     end-placeholder
                 ></el-date-picker>
             </div>
-
             <Select
                 width='180'
                 tipPlace='top'
@@ -38,34 +37,34 @@
             ></Select>
         </div>
         <el-table :data='tableData' :border='true' style='width: 100%'>
-            <el-table-column type='index' label='序号' width='80'></el-table-column>
-            <el-table-column prop='lb' label='其他事项详情' show-overflow-tooltip resizable>
-                <el-table-column prop='zlwfwe' label='记录事项' show-overflow-tooltip resizable>
+            <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
+            <el-table-column prop='lb' label='其他事项详情' align='center'>
+                <el-table-column prop='zlwfwe' label='记录事项' show-overflow-tooltip resizable min-width='320'>
                     <template slot-scope='{row}'>{{row.jlsx || '--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='位置' show-overflow-tooltip resizable>
+                <el-table-column prop label='位置' show-overflow-tooltip resizable width='425'>
                     <template slot-scope='{row}'>{{row.description || '--'}}</template>
                 </el-table-column>
-                <el-table-column prop='content' label='内容' show-overflow-tooltip resizable>
+                <el-table-column prop='content' label='内容' show-overflow-tooltip resizable width='260'>
                     <template slot-scope='{row}'>{{row.content || '--'}}</template>
                 </el-table-column>
-                <el-table-column prop='sl' label='数量'>
+                <el-table-column prop='sl' label='数量' width='80'>
                     <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
                 </el-table-column>
             </el-table-column>
-            <el-table-column prop='zfje' label='金额(万元)'>
+            <el-table-column prop='zfje' label='金额(万元)' width='80'>
                 <template slot-scope='{row}'>{{number_format(row.zfje,2) || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='handledate' label='处理日期'>
+            <el-table-column prop='handledate' label='处理日期' width='130'>
                 <template slot-scope='{row}'>{{row.handledate?formatter(row.handledate): '--'}}</template>
             </el-table-column>
-            <el-table-column prop='handleresults' label='处置结果' show-overflow-tooltip resizable>
+            <el-table-column prop='handleresults' label='处置结果' show-overflow-tooltip resizable width='100'>
                 <template slot-scope='{row}'>{{row.handleresults || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='zlwfwz ' label='资料存放位置' show-overflow-tooltip resizable>
+            <el-table-column prop='zlwfwz ' label='资料存放位置' show-overflow-tooltip resizable width='100'>
                 <template slot-scope='{row}'>{{row.zlwfwz || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='recordtime' label='记录日期'>
+            <el-table-column prop='recordtime' label='记录日期' width='140'>
                 <template slot-scope='{row}'>{{row.createdate?formatter(row.createdate): '--'}}</template>
             </el-table-column>
         </el-table>
@@ -87,6 +86,7 @@ import { queryQtsx } from '@/api/equipmentList.js'
 import { mapGetters } from 'vuex'
 import { formatter, number_format } from '@/utils/format.js'
 import { querySelect } from '@/api/public.js'
+import { Select } from 'meri-design'
 export default {
     data() {
         return {
@@ -107,6 +107,10 @@ export default {
         ...mapGetters(['floorSelect'])
     },
     methods: {
+        //序号的方法
+        indexMethod(index) {
+            return (this.currentPage - 1) * this.size + index + 1
+        },
         pageChanged(page) {
             this.currentPage = page
             this.getList()
@@ -201,6 +205,9 @@ export default {
                 this.tabFind()
                 this.getList()
             }
+        },
+        handleresults() {
+            this.getList()
         }
     },
     mounted() {

+ 6 - 5
src/views/equipment/table/recordDialog.vue

@@ -1,10 +1,10 @@
 <template>
     <!-- 记录事项 -->
     <div class='detail-dialog'>
-        <el-dialog :title='`${major}${tabName}记录事项`' width='70%' :visible.sync='visible' style='height:900px;overflow-y:scroll;'>
-            <div class='bottom-table' style='height:520px'>
-                <el-table :data='tableData' height='500' :border='true' style='width: 100%;margin-bottom:12px;' :span-method='objectSpanMethod'>
-                    <el-table-column label='位置' prop width='140' show-overflow-tooltip resizable>
+        <el-dialog :title='`${major}${tabName}记录事项`' width='80%' :visible.sync='visible' style='height:900px;overflow-y:scroll;'>
+            <div class='bottom-table' style='height:600px'>
+                <el-table :data='tableData' height='560' :border='true' style='width: 100%;margin-bottom:12px;' :span-method='objectSpanMethod'>
+                    <el-table-column label='位置' prop width='120' show-overflow-tooltip resizable>
                         <template slot-scope='{row}'>{{row.smswz || '--'}}</template>
                     </el-table-column>
                     <el-table-column prop='system' label='设备' width='200' show-overflow-tooltip resizable>
@@ -109,7 +109,8 @@ export default {
     .el-dialog__wrapper {
         overflow: hidden !important;
     }
-    .el-dialog {
+   /deep/.el-dialog {
+        margin-top: 7vh !important;
         overflow-y: scroll !important;
     }
 }

+ 27 - 11
src/views/equipment/table/standTable.vue

@@ -20,7 +20,16 @@
                 v-model='keyword'
                 style='width:192px;margin-right:12px'
             ></el-input>
-            <Select @change='getList' v-model='floor' style='margin-right:12px;' width='120' tipPlace='top' caption='楼层 :' :selectdata='floorSelect'></Select>
+            <Select
+                @change='getList'
+                @cancel='getList'
+                v-model='floor'
+                style='margin-right:12px;'
+                width='120'
+                tipPlace='top'
+                caption='楼层 :'
+                :selectdata='floorSelect'
+            ></Select>
             <el-input
                 clearable
                 placeholder='搜索生产厂商'
@@ -32,24 +41,24 @@
             ></el-input>
         </div>
         <el-table :data='tableData' :border='true' style='width: 100%' @row-click='rowHandle'>
-            <el-table-column type='index' label='序号' width='80'></el-table-column>
-            <el-table-column prop label='设备名称' show-overflow-tooltip resizable>
+            <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
+            <el-table-column prop label='设备名称' show-overflow-tooltip resizable width='300'>
                 <template slot-scope='{row}'>{{row.type_name || '--'}}</template>
             </el-table-column>
             <!-- sbjc -->
             <el-table-column prop='sl' label='数量' width='100'>
                 <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
             </el-table-column>
-            <el-table-column prop='brand' label='品牌'>
+            <el-table-column prop='brand' label='品牌' width='200'>
                 <template slot-scope='{row}'>{{row.brand || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable>
+            <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='150'>
                 <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
             </el-table-column>
             <el-table-column prop='floor' label='楼层' width='100'>
                 <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable>
+            <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width="300">
                 <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
             </el-table-column>
         </el-table>
@@ -73,18 +82,17 @@
 <script>
 import { queryEquipmentList } from '@/api/equipmentList.js'
 import EqDetail from './eqDetaileDialog'
-import Select from '@/components/Select/Select.vue'
-import { mapGetters } from 'vuex'
 
+import { mapGetters } from 'vuex'
+import { Select } from 'meri-design'
 export default {
     data() {
         return {
             innerVisible: false,
-            pageSize: 10,
             tableData: [],
             total: 0,
             currentPage: 1,
-            size: 11,
+            size: 13,
             keyword: '',
             floor: '',
             row: {},
@@ -98,6 +106,9 @@ export default {
         ...mapGetters(['floorSelect'])
     },
     methods: {
+        indexMethod(index) {
+            return (this.currentPage-1) * this.size + index +1
+        },
         rowHandle(row) {
             console.log(row)
             this.innerVisible = true
@@ -132,7 +143,7 @@ export default {
             }
             //下拉
             if (this.floor) {
-                data.gname = this.floor
+                postParams.gname = this.floor
             }
             //输入框搜索
             data.keyword = ''
@@ -159,9 +170,14 @@ export default {
             if (newV !== oldV) {
                 this.getList()
             }
+        },
+        floor(newV, oldV) {
+            console.log(newV, oldV)
+            this.getList()
         }
     },
     mounted() {
+        this.floor = this.$cookie.get('floorMapId')
         this.getList()
     }
 }

+ 9 - 5
src/views/equipment/table/tjTable.vue

@@ -13,12 +13,12 @@
             ></el-input>
             <el-input clearable placeholder='搜索品牌' size='small' @blur='getList' prefix-icon='el-icon-search' v-model='brand' style='width:192px'></el-input>
         </div>
-        <el-table :data='tableData' style='width: 100%'>
-            <el-table-column type='index' label='序号' width='80'></el-table-column>
-            <el-table-column prop='category' label='类别' width='160'>
+        <el-table :data='tableData' style='width: 100%' :border='true'>
+            <el-table-column type='index' label='序号' width='60' :index="indexMethod"></el-table-column>
+            <el-table-column prop='category' label='类别'  show-overflow-tooltip resizable>
                 <template slot-scope='{row}'>{{row.category || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='sl' label='数量' width='100'>
+            <el-table-column prop='sl' label='数量' >
                 <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
             </el-table-column>
             <el-table-column prop='brand' label='品牌'>
@@ -51,7 +51,7 @@ export default {
             tableData: [],
             total: 0,
             currentPage: 1,
-            size: 11,
+            size: 13,
             lb: '',
             brand: ''
         }
@@ -61,6 +61,10 @@ export default {
         ...mapGetters(['floorSelect'])
     },
     methods: {
+        //序号的方法
+        indexMethod(index) {
+            return (this.currentPage - 1) * this.size + index +1
+        },
         pageChanged(page, size) {
             this.currentPage = page
             this.getList()

+ 29 - 21
src/views/equipment/table/wbTable.vue

@@ -24,7 +24,7 @@
                 @change='getList'
                 v-model='ischange'
                 style='margin-right:12px'
-                width='190'
+                width='200'
                 tipPlace='top'
                 caption='是否更换配件信息 :'
                 :selectdata='changeOption'
@@ -62,49 +62,50 @@
             </div>
             <input-dialog :type='2' @confirm='confirm'></input-dialog>
         </div>
-        <el-table :data='tableData' style='width: 100%'>
-            <el-table-column type='index' label='序号' width='80'></el-table-column>
-            <el-table-column prop='sbmc' label='设备名称' show-overflow-tooltip resizable>
+        <el-table :data='tableData' :border='true' style='width: 100%'>
+            <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
+            <el-table-column prop='sbmc' label='设备名称' show-overflow-tooltip resizable width='460'>
                 <template slot-scope='{row}'>{{row.sbmc || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='assetnum' label='设备编码' show-overflow-tooltip resizable>
+            <el-table-column prop='assetnum' label='设备编码' show-overflow-tooltip resizable width='80'>
                 <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='matters' label='重要事项记录' width='130' show-overflow-tooltip resizable>
+            <el-table-column prop='matters' label='重要事项记录' width='180' show-overflow-tooltip resizable>
                 <template slot-scope='{row}'>{{row.matters || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='description' label='描述' show-overflow-tooltip resizable>
+            <el-table-column prop='description' label='描述' show-overflow-tooltip resizable min-width='340'>
                 <template slot-scope='{row}'>{{row.description || '--'}}</template>
             </el-table-column>
             <el-table-column label='更换配件信息' align='center'>
-                <el-table-column prop='ischangepj' label='是/否更换'>
+                <el-table-column prop='ischangepj' label='是/否更换' width='80'>
                     <template slot-scope='{row}'>{{row.ismodel==1?'是':(row.ismodel==0?"否" :'--')}}</template>
                 </el-table-column>
-                <el-table-column prop='model' label='配件名称型号' width='130' show-overflow-tooltip resizable>
+                <el-table-column prop='model' label='配件名称型号' width='140' show-overflow-tooltip resizable>
                     <template slot-scope='{row}'>{{row.model || '--'}}</template>
                 </el-table-column>
-                <el-table-column prop='sl' label='数量'>
+                <el-table-column prop='sl' label='数量' width='80'>
                     <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
                 </el-table-column>
-                <el-table-column prop='cost' label='费用(万元)'>
-                    <template slot-scope='{row}'>{{row.cost || '--'}}</template>
+                <el-table-column prop='cost' label='费用(万元)' width='80'>
+                    <template slot-scope='{row}'>{{number_format(row.cost,2) || '--'}}</template>
                 </el-table-column>
-                <el-table-column prop='source' label='费用出处' show-overflow-tooltip resizable>
-                    <template slot-scope='{row}'>{{number_format(row.source,2) || '--'}}</template>
+                <el-table-column prop='source' label='费用出处' show-overflow-tooltip resizable width='100'>
+                    <template slot-scope='{row}'>{{row.source|| '--'}}</template>
                 </el-table-column>
             </el-table-column>
-            <el-table-column prop='brand' label='现场照片'>
+            <el-table-column prop='brand' label='现场照片' width='70'>
                 <template slot-scope='{row}'>
-                    <div style='cursor:pointer;color: #0091ff;' @click='clickPic(row.glsmsImage)'>{{row.glsmsImage?row.glsmsImage.length+'张':'--'}}</div>
+                    <div v-if='row.glsmsImage' style='cursor:pointer;color: #0091ff;' @click='clickPic(row.glsmsImage)'>{{row.glsmsImage.length+'张'}}</div>
+                    <div v-else>{{'---'}}</div>
                 </template>
             </el-table-column>
-            <el-table-column prop='reportdate' label='填报时间' width='140'>
+            <el-table-column prop='reportdate' label='填报时间' width='130'>
                 <template slot-scope='{row}'>{{row.reportdate?formatter(row.reportdate):'--'}}</template>
             </el-table-column>
-            <el-table-column prop='sjjssj' label='验收时间' width='140'>
+            <el-table-column prop='sjjssj' label='验收时间' width='130'>
                 <template slot-scope='{row}'>{{row.sjjssj?formatter(row.sjjssj): '--'}}</template>
             </el-table-column>
-            <el-table-column prop='wonum' label='任务编号' show-overflow-tooltip resizable>
+            <el-table-column prop='wonum' label='任务编号' show-overflow-tooltip resizable width='90'>
                 <template slot-scope='{row}'>{{row.wb_gzglid || '--'}}</template>
             </el-table-column>
         </el-table>
@@ -125,7 +126,7 @@
 <script>
 import { queryWbsms } from '@/api/equipmentList.js'
 import { mapGetters } from 'vuex'
-import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import inputDialog from './inputDIalog'
 import { formatter, number_format } from '@/utils/format.js'
 export default {
@@ -135,7 +136,7 @@ export default {
             tableData: [],
             total: 0,
             currentPage: 1,
-            size: 10,
+            size: 11,
             sjjssj: '',
             reportdate: '',
             ischange: '',
@@ -163,6 +164,10 @@ export default {
         ...mapGetters(['floorSelect'])
     },
     methods: {
+        //序号的方法
+        indexMethod(index) {
+            return (this.currentPage - 1) * this.size + index + 1
+        },
         //多余输入框监听
         confirm(gzglid) {
             this.gzglid = gzglid
@@ -241,6 +246,9 @@ export default {
                 // this.tabFind()
                 this.getList()
             }
+        },
+        ischange() {
+            this.getList()
         }
     },
     mounted() {

+ 26 - 26
src/views/equipment/table/wxTable.vue

@@ -24,7 +24,7 @@
                 @change='getList'
                 style='margin-right:12px;'
                 v-model='ischange'
-                width='180'
+                width='200'
                 tipPlace='top'
                 caption='是否更换配件信息 :'
                 :selectdata='changeOption'
@@ -61,58 +61,51 @@
                 ></el-date-picker>
             </div>
             <input-dialog :type='3' @confirm='confirm'></input-dialog>
-            <!-- <el-input
-                placeholder='搜索工单编号'
-                size='small'
-                @blur='getList'
-                prefix-icon='el-icon-search'
-                v-model='wonum'
-                style='width:192px;margin-right:12px'
-            ></el-input>-->
         </div>
         <el-table :data='tableData' :border='true' style='width: 100%'>
-            <el-table-column type='index' label='序号' width='80'></el-table-column>
-            <el-table-column prop='sbmc' label='设备名称' show-overflow-tooltip resizable>
+            <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
+            <el-table-column prop='sbmc' label='设备名称' show-overflow-tooltip resizable min-width='460'>
                 <template slot-scope='{row}'>{{row.sbmc || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='assetnum' label='设备编码' show-overflow-tooltip resizable>
+            <el-table-column prop='assetnum' label='设备编码' show-overflow-tooltip resizable width='80'>
                 <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='matters' label='重要事项记录' width='130' show-overflow-tooltip resizable>
+            <el-table-column prop='matters' label='重要事项记录' width='180' show-overflow-tooltip resizable>
                 <template slot-scope='{row}'>{{row.matters || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='description' label='描述' show-overflow-tooltip resizable>
+            <el-table-column prop='description' label='描述' show-overflow-tooltip resizable min-width='340'>
                 <template slot-scope='{row}'>{{row.description || '--'}}</template>
             </el-table-column>
             <el-table-column label='更换配件信息' align='center'>
-                <el-table-column prop='ischangepj' label='是/否更换'>
+                <el-table-column prop='ischangepj' label='是/否更换' width='80'>
                     <template slot-scope='{row}'>{{row.ismodel==1?'是':(row.ismodel==0?"否" :'--')}}</template>
                 </el-table-column>
-                <el-table-column prop='model' label='配件名称型号' width='130' show-overflow-tooltip resizable>
+                <el-table-column prop='model' label='配件名称型号' width='140' show-overflow-tooltip resizable>
                     <template slot-scope='{row}'>{{row.model || '--'}}</template>
                 </el-table-column>
-                <el-table-column prop='sl' label='数量'>
+                <el-table-column prop='sl' label='数量' width='80'>
                     <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
                 </el-table-column>
-                <el-table-column prop='cost' label='费用(万元)'>
+                <el-table-column prop='cost' label='费用(万元)' width='80'>
                     <template slot-scope='{row}'>{{number_format(row.cost,2) || '--'}}</template>
                 </el-table-column>
-                <el-table-column prop='source' label='费用出处' show-overflow-tooltip resizable>
+                <el-table-column prop='source' label='费用出处' show-overflow-tooltip resizable width="100">
                     <template slot-scope='{row}'>{{row.source || '--'}}</template>
                 </el-table-column>
             </el-table-column>
-            <el-table-column prop='brand' label='现场照片'>
+            <el-table-column prop='brand' label='现场照片' width='80'>
                 <template slot-scope='{row}'>
-                    <div style='cursor:pointer;color: #0091ff;' @click='clickPic(row.glsmsImage)'>{{row.glsmsImage?row.glsmsImage.length+'张':'--'}}</div>
+                    <div v-if='row.glsmsImage' style='cursor:pointer;color: #0091ff;' @click='clickPic(row.glsmsImage)'>{{row.glsmsImage.length+'张'}}</div>
+                    <div v-else>{{'---'}}</div>
                 </template>
             </el-table-column>
-            <el-table-column prop='reportdate' label='填报时间' width='140'>
+            <el-table-column prop='reportdate' label='填报时间' width='130'>
                 <template slot-scope='{row}'>{{row.reportdate?formatter(row.reportdate): '--'}}</template>
             </el-table-column>
-            <el-table-column prop='sjjssj' label='验收时间' width='140'>
+            <el-table-column prop='sjjssj' label='验收时间' width='130'>
                 <template slot-scope='{row}'>{{row.sjjssj?formatter(row.sjjssj): '--'}}</template>
             </el-table-column>
-            <el-table-column prop='wonum' label='工单编号' show-overflow-tooltip resizable>
+            <el-table-column prop='wonum' label='工单编号' show-overflow-tooltip resizable width='80'>
                 <template slot-scope='{row}'>{{row.wonum || '--'}}</template>
             </el-table-column>
         </el-table>
@@ -134,7 +127,7 @@
 import { queryWx } from '@/api/equipmentList.js'
 import { mapGetters } from 'vuex'
 import inputDialog from './inputDIalog'
-import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import { formatter, number_format } from '@/utils/format.js'
 export default {
     components: { Select, inputDialog },
@@ -143,7 +136,7 @@ export default {
             tableData: [],
             total: 0,
             currentPage: 1,
-            size: 10,
+            size: 11,
             reportdate: '',
             sjjssj: '',
             ischange: '',
@@ -171,6 +164,10 @@ export default {
     },
     props: ['smsxt', 'major', 'diff', 'tabLabel'],
     methods: {
+        //序号的方法
+        indexMethod(index) {
+            return (this.currentPage - 1) * this.size + index + 1
+        },
         //多余输入框监听
         confirm(wonum) {
             this.wonum = wonum
@@ -248,6 +245,9 @@ export default {
                 // this.tabFind()
                 this.getList()
             }
+        },
+        ischange() {
+            this.getList()
         }
     },
     mounted() {

+ 28 - 23
src/views/equipment/table/zwTable.vue

@@ -11,9 +11,9 @@
                 @change='getList'
                 style='width:180px;margin-right:12px'
             ></el-date-picker>
-            <Select width='146' tipPlace='top' v-model='lb' caption='类别:' :selectdata='lbOption' :placeholder='"请选择"' @change='getList'></Select>
+            <Select width='160' tipPlace='top' v-model='lb' caption='类别:' :selectdata='lbOption' :placeholder='"请选择"' @change='getList'></Select>
             <Select
-                width='120'
+                width='160'
                 tipPlace='top'
                 size='small'
                 v-model='xm'
@@ -22,15 +22,7 @@
                 style='margin:0 12px'
                 @change='getList'
             ></Select>
-            <el-input
-                placeholder='搜索实施方案说明'
-                prefix-icon='el-icon-search'
-                size='small'
-                style='width:192px;margin-right:12px'
-                v-model='ssfasm'
-                clearable
-                @blur='getList'
-            ></el-input>
+            <el-input placeholder='搜索实施方案说明' prefix-icon='el-icon-search' size='small' style='width:192px' v-model='ssfasm' clearable @blur='getList'></el-input>
             <!-- 当前阶段 -->
             <Select
                 width='180'
@@ -61,26 +53,26 @@
             <input-dialog v-if='statusOption.length>0' :statusOption='statusOption' :type='4' @confirm='confirm'></input-dialog>
         </div>
         <el-table :data='tableData' :border='true' style='width: 100%'>
-            <el-table-column type='index' label='序号'></el-table-column>
-            <el-table-column prop='nd' label='年度' show-overflow-tooltip resizable>
+            <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
+            <el-table-column prop='nd' label='年度' show-overflow-tooltip resizable width='80'>
                 <template slot-scope='{row}'>{{row.nd || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='qs' label='期数' show-overflow-tooltip resizable>
+            <el-table-column prop='qs' label='期数' show-overflow-tooltip resizable width='80'>
                 <template slot-scope='{row}'>{{row.qs || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='lb' label='类别' show-overflow-tooltip resizable>
+            <el-table-column prop='lb' label='类别' show-overflow-tooltip resizable min-width='210'>
                 <template slot-scope='{row}'>{{row.lb || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='xm' label='项目' show-overflow-tooltip resizable>
+            <el-table-column prop='xm' label='项目' show-overflow-tooltip resizable min-width='150'>
                 <template slot-scope='{row}'>{{row.xm || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='sl' label='数量' show-overflow-tooltip resizable>
+            <el-table-column prop='sl' label='数量' show-overflow-tooltip resizable width='80'>
                 <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
             </el-table-column>
-            <el-table-column prop='ssfasm' label='实施方案说明' show-overflow-tooltip resizable>
+            <el-table-column prop='ssfasm' label='实施方案说明' show-overflow-tooltip resizable min-width='320'>
                 <template slot-scope='{row}'>{{row.ssfasm || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='sxjd' label='当前阶段' show-overflow-tooltip resizable>
+            <el-table-column prop='sxjd' label='当前阶段' show-overflow-tooltip resizable width='80'>
                 <template slot-scope='{row}'>{{row.sxjd || '--'}}</template>
             </el-table-column>
             <el-table-column prop='lxsjwcsj' label='立项日期' show-overflow-tooltip resizable width='140'>
@@ -89,13 +81,13 @@
             <el-table-column prop='yssjwcsj' label='验收日期' show-overflow-tooltip resizable width='140'>
                 <template slot-scope='{row}'>{{row.yssjwcsj?formatter(row.yssjwcsj):'--'}}</template>
             </el-table-column>
-            <el-table-column prop='status' label='验收结果' show-overflow-tooltip resizable>
+            <el-table-column prop='status' label='验收结果' show-overflow-tooltip resizable width='90'>
                 <template slot-scope='{row}'>{{row.status || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='zfje' label='结算金额' show-overflow-tooltip resizable>
+            <el-table-column prop='zfje' label='结算金额' show-overflow-tooltip resizable width='80'>
                 <template slot-scope='{row}'>{{number_format(row.zfje,2)|| '--'}}</template>
             </el-table-column>
-            <el-table-column prop='xlcfwz' label='资料存放位置' show-overflow-tooltip resizable>
+            <el-table-column prop='xlcfwz' label='资料存放位置' show-overflow-tooltip resizable width='100'>
                 <template slot-scope='{row}'>{{row.xlcfwz || '--'}}</template>
             </el-table-column>
         </el-table>
@@ -129,7 +121,7 @@ export default {
             yssjwcsj: '',
             lxsjwcsj: '',
             ssfasm: '',
-            size: 10,
+            size: 11,
             keyword: '',
             nd: '',
             lb: '',
@@ -148,6 +140,10 @@ export default {
     },
     props: ['smsxt', 'major', 'diff', 'tabLabel'],
     methods: {
+        //序号的方法
+        indexMethod(index) {
+            return (this.currentPage - 1) * this.size + index + 1
+        },
         //多余输入框监听
         confirm(status, yssjwcsj) {
             this.yssjwcsj = yssjwcsj
@@ -289,6 +285,15 @@ export default {
                 this.tabFind()
                 this.getList()
             }
+        },
+        sxjd() {
+            this.getList()
+        },
+        xm() {
+            this.getList()
+        },
+        lb() {
+            this.getList()
         }
     },
     mounted() {

+ 7 - 46
src/views/floorFunc/index.vue

@@ -1,21 +1,13 @@
 <template>
     <div class='floorFunc-box'>
         <div class='eq-title'>
-            <span>{{floorInfo.code}}</span>
+            <span class='span1'>{{floorInfo.code}}</span>
         </div>
         <!-- 图例 -->
         <div class='legend-boxs'>
-            <Legend :floors='floorsArr' type='1'></Legend>
+            <Legend :floors='floorsArr' type='1' :editTips='`编辑${floorInfo.code}层楼层功能平面图`'></Legend>
         </div>
         <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
-        <!-- <div class='additional-box'>
-            <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>
 </template>
@@ -28,7 +20,7 @@ export default {
     components: { floorMap, floorList },
     data() {
         return {
-            show: false,
+            show: true,
             floorInfo: {
                 gname: 'f1',
                 code: 'F1'
@@ -84,6 +76,10 @@ export default {
             margin-right: 10px;
             margin-top: 8px;
         }
+        .span1 {
+            position: absolute;
+            top: 3px;
+        }
     }
     .legend-boxs {
         position: fixed;
@@ -91,40 +87,5 @@ export default {
         right: 32px;
         top: 155px;
     }
-    .additional-box {
-        position: relative;
-        .additional {
-            width: 44px;
-            height: 44px;
-            background: rgba(255, 255, 255, 1);
-            box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
-            border-radius: 2px;
-            position: fixed;
-            right: 32px;
-            top: 420px;
-            z-index: 2;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            img {
-                width: 20px;
-                height: 20px;
-            }
-        }
-        .add-img {
-            width: 560px;
-            height: 325px;
-            background: #ffffff;
-            -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
-            box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
-            border-radius: 2px;
-            border: 1px solid #e4e5e7;
-            position: absolute;
-            right: 77px;
-            top: 93px;
-            z-index: 2;
-        }
-    }
 }
 </style>

+ 190 - 52
src/views/legendLibrary/addForm.vue

@@ -5,31 +5,49 @@
                 <el-row :gutter='20'>
                     <el-col :span='12'>
                         <div>图例编码</div>
-                        <el-input v-model='ruleForm.Id' style='width:200px;height:32px;' disabled></el-input>
+                        <!-- <el-input v-model='ruleForm.Id' style='width:200px;height:32px;' disabled></el-input> -->
+                        <Input v-model='ruleForm.Id' disabled placeholder style='width:200px' />
                     </el-col>
                     <el-col :span='12'>
                         <div class='start'>图例名称</div>
-                        <el-input v-model='ruleForm.Name' style='width:200px;height:32px;'></el-input>
+                        <!-- <el-input v-model='ruleForm.Name' style='width:200px;height:32px;'></el-input> -->
+                        <Input v-model='ruleForm.Name' placeholder maxlength='20' style='width:200px' />
                     </el-col>
                     <el-col :span='12' style='margin-top:20px'>
                         <div class>单位</div>
-                        <el-input v-model='ruleForm.Unit' style='width:200px;height:32px;'></el-input>
+                        <!-- <el-input v-model='ruleForm.Unit' style='width:200px;height:32px;'></el-input> -->
+                        <Input v-model='ruleForm.Unit' placeholder style='width:200px' />
                     </el-col>
 
                     <el-col :span='12' style='margin-top:20px'>
                         <div class='start'>图例类型</div>
-                        <el-select v-model='ruleForm.Type' placeholder='请选择' style='width:200px;height:32px' @change='initGraph'>
+                        <!-- <el-select v-model='ruleForm.Type' placeholder='请选择' style='width:200px;height:32px' @change='initGraph'>
                             <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
-                        </el-select>
+                        </el-select>-->
+                        <span class='add-form-type'>
+                            <Select
+                                width='200'
+                                height='40'
+                                v-model='ruleForm.Type'
+                                :isReadOnly='true'
+                                @change='initGraph'
+                                :hideClear='true'
+                                :selectdata='options'
+                                placeholder='请选择'
+                            />
+                        </span>
                     </el-col>
                 </el-row>
             </div>
-            <div class='input-right' ref='graph' v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Image" || ruleForm.Type =="Line"'>
-                <div v-show=' ruleForm.Type=="Image" && ruleForm.Url' class='input-right'>
-                    <img :key='key' :src='`/serve/topology-wanda/Picture/query/${ruleForm.Url}`' alt />
-                    <!-- {{ruleForm.Url}} -->
+            <div v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Image" || ruleForm.Type =="Line"'>
+                <div style='color:#646C73'>展示预览</div>
+                <div class='input-right' ref='graph'>
+                    <div v-show=' ruleForm.Type=="Image" && ruleForm.Url' class='input-right'>
+                        <img :key='key' :src='`/serve/topology-wanda/Picture/query/${ruleForm.Url}`' alt />
+                        <!-- {{ruleForm.Url}} -->
+                    </div>
+                    <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' v-show='!(ruleForm.Type=="Image" && ruleForm.Url)'></canvas>
                 </div>
-                <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' v-show='!(ruleForm.Type=="Image" && ruleForm.Url)'></canvas>
             </div>
         </div>
         <div v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Line"' class='form3'>
@@ -86,7 +104,7 @@
         </div>
         <div v-if='ruleForm.Type!="None"' class='form4'>
             <div class='form4-top'>
-                <span class='form4-span1'>专业/设备、位置类型</span>
+                <span class='form4-span1'>专业/设备、位置类型</span>
                 <span class='form4-span3'>铺位可视化typeid</span>
             </div>
             <div class='form3-bottom'>
@@ -101,6 +119,9 @@
                         :data='deviceList'
                         @change='treeConfirmDevice'
                         :hideClear='true'
+                        :lastStage='true'
+                        :selectedIds='InfosList'
+                        :notNull='true'
                     />
                 </span>
                 <TreeSelect
@@ -114,6 +135,8 @@
                     @change='treeConfirm'
                     @focusChange='focusChange'
                     :hideClear='true'
+                    :selectedIds='InfoTypeIdList'
+                    :lastStage='true'
                 />
             </div>
         </div>
@@ -130,37 +153,39 @@ export default {
         return {
             options: [
                 {
-                    value: 'None',
-                    label: '非图例'
+                    id: 'None',
+                    name: '非图例'
                 },
                 {
-                    value: 'Zone',
-                    label: '区域'
+                    id: 'Zone',
+                    name: '区域'
                 },
                 {
-                    value: 'Image',
-                    label: '图标'
+                    id: 'Image',
+                    name: '图标'
                 },
                 {
-                    value: 'Line',
-                    label: '线条'
+                    id: 'Line',
+                    name: '线条'
                 }
             ],
-            options1: [],
-            options2: [],
 
+            selectedIds: [],
             borderLineOption: [
                 {
                     id: 'solid',
-                    src: require('@/assets/imgs/1pxline.jpg')
+                    src: require('@/assets/imgs/1pxlines.png')
+                    // src: require('@/assets/imgs/1pxline.jpg')
                 },
                 {
                     id: 'dashed',
-                    src: require('@/assets/imgs/dashedLine.jpg')
+                    src: require('@/assets/imgs/dashedLines.png')
+                    // src: require('@/assets/imgs/dashedLine.jpg')
                 },
                 {
                     id: 'dotted',
-                    src: require('@/assets/imgs/dotLine.jpg')
+                    src: require('@/assets/imgs/dotLines.png')
+                    // src: require('@/assets/imgs/dotLine.jpg')
                 }
             ],
             linepxOption: [
@@ -195,10 +220,14 @@ export default {
 
             // majorList: [], //专业
             deviceList: [],
-            key: 1
+            key: 1,
+            InfoLocals: undefined, //工程信息化
+            // InfoSystems: undefined, //工程信息化专业/系统
+            InfoTypeIds: undefined //铺位可视化typeid
         }
     },
-    props: ['ruleForm', 'title'],
+    props: ['ruleForm', 'title', 'InfosList', 'InfoTypeIdList'],
+
     methods: {
         //业下设备分类和位置分类树形结构
         initQueryDeviceAndPOsition() {
@@ -208,7 +237,7 @@ export default {
             })
         },
         handleRemove(file, fileList) {
-            console.log(file, fileList, 'file')
+            // console.log(file, fileList, 'file')
             this.ruleForm.Url = ''
         },
         getFile(file) {
@@ -231,6 +260,11 @@ export default {
         },
         create() {
             //新增
+            if (this.ruleForm.FillColor.indexOf('#') > -1) {
+                this.ruleForm.FillColor = this.ruleForm.FillColor
+            } else {
+                this.ruleForm.FillColor = this.hexify(this.ruleForm.FillColor)
+            }
             let postParams = {
                 Content: [this.ruleForm]
             }
@@ -246,9 +280,15 @@ export default {
         },
         update() {
             //修改
+            if (this.ruleForm.FillColor.indexOf('#') > -1) {
+                this.ruleForm.FillColor = this.ruleForm.FillColor
+            } else {
+                this.ruleForm.FillColor = this.hexify(this.ruleForm.FillColor)
+            }
             let postParams = {
                 Content: [this.ruleForm]
             }
+
             updateLegend({ postParams }).then(res => {
                 if (res.Result == 'success') {
                     this.$message.success('图例修改成功!')
@@ -284,16 +324,82 @@ export default {
         },
         //rgba转成16进制
         hexify(color) {
-            var values = color
-                .replace(/rgba?\(/, '')
-                .replace(/\)/, '')
-                .replace(/[\s+]/g, '')
-                .split(',')
-            var a = parseFloat(values[3] || 1),
-                r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
-                g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
-                b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
-            return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2)
+            if (color) {
+                var opacity = ''
+                var rgb = color.split(',')
+                var r = parseInt(rgb[0].split('(')[1])
+                var g = parseInt(rgb[1])
+                var b = parseInt(rgb[2].split(')')[0])
+                switch (parseFloat(rgb[3] || 1) + '') {
+                    case '0':
+                        opacity = '00'
+                        break
+                    case '0.05':
+                        opacity = '0C'
+                        break
+                    case '0.1':
+                        opacity = '19'
+                        break
+                    case '0.15':
+                        opacity = '26'
+                        break
+                    case '0.2':
+                        opacity = '33'
+                        break
+                    case '0.25':
+                        opacity = '3F'
+                        break
+                    case '0.3':
+                        opacity = '4C'
+                        break
+                    case '0.35':
+                        opacity = '59'
+                        break
+                    case '0.4':
+                        opacity = '66'
+                        break
+                    case '0.45':
+                        opacity = '72'
+                        break
+                    case '0.5':
+                        opacity = '7F'
+                        break
+                    case '0.55':
+                        opacity = '8C'
+                        break
+                    case '0.6':
+                        opacity = '99'
+                        break
+                    case '0.65':
+                        opacity = 'A5'
+                        break
+                    case '0.7':
+                        opacity = 'B2'
+                        break
+                    case '0.75':
+                        opacity = 'BF'
+                        break
+                    case '0.8':
+                        opacity = 'CC'
+                        break
+                    case '0.85':
+                        opacity = 'D8'
+                        break
+                    case '0.9':
+                        opacity = 'E5'
+                        break
+                    case '0.95':
+                        opacity = 'F2'
+                        break
+                    case '1':
+                        opacity = 'FF'
+                        break
+                }
+                var hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + opacity
+                return hex
+            } else {
+                return
+            }
         },
         // 背景颜色改变
         changBgColor(val) {
@@ -314,7 +420,7 @@ export default {
             if (this.$refs.select1 && this.$refs.select1.$el) {
                 this.$refs.select1.$el.children[0].children[0].setAttribute(
                     'style',
-                    'background:url(' + this.borderLineOptionObject.src + ')  center center no-repeat;color:transparent;'
+                    'background:#ffffff url(' + this.borderLineOptionObject.src + ')  10px center no-repeat;color:transparent;'
                 )
             }
             if (this.view) {
@@ -376,20 +482,26 @@ export default {
 
         //位置/设备
         treeConfirmDevice(id, info) {
+            console.log(id)
             // this.$set(this.ruleForm, 'InfoLocal', data)
             let InfoSystem = []
             let InfoLocal = []
-            for (let i = 0; i < info.length; i++) {
-                let type = info[i]
-                if (type.name.includes('/')) {
-                    InfoLocal.push(type)
-                    //位置/设备
-                    this.$set(this.ruleForm, 'InfoLocal', InfoLocal)
-                } else {
-                    InfoSystem.push(type)
-                    //专业
-                    this.$set(this.ruleForm, 'InfoSystem', InfoSystem)
+            if (info && info.length > 0) {
+                for (let i = 0; i < info.length; i++) {
+                    let type = info[i]
+                    if (type.name.includes('/')) {
+                        InfoLocal.push(type)
+                        //位置/设备
+                        this.$set(this.ruleForm, 'InfoLocal', InfoLocal)
+                    } else {
+                        InfoSystem.push(type)
+                        //专业
+                        this.$set(this.ruleForm, 'InfoSystem', InfoSystem)
+                    }
                 }
+            } else {
+                this.$set(this.ruleForm, 'InfoLocal', [])
+                this.$set(this.ruleForm, 'InfoSystem', [])
             }
         },
         focusChange(status) {
@@ -458,7 +570,19 @@ export default {
     .ant-input-number {
         border-radius: 4px 0 0 4px;
     }
-
+    // .add-form-type {
+    //     /deep/ .p-select .p-select-header {
+    //         height: 40px;
+    //         line-height: 40px;
+    //         border: 1px solid #dcdfe6;
+    //     }
+    //     /deep/ .p-select .p-select-header .p-select-selected-box .p-select-fakePlaceholder {
+    //         line-height: 40px;
+    //     }
+    //     /deep/ .p-select .p-select-header .p-select-triangle{
+    //         top: 12px;
+    //     }
+    // }
     .form2 {
         display: flex;
         .input-left {
@@ -563,6 +687,7 @@ export default {
         border-bottom: 1px solid rgba(195, 198, 203, 1);
         position: absolute;
         text-align: center;
+        line-height: 26px;
     }
 }
 </style>
@@ -580,21 +705,34 @@ export default {
     word-break: break-all !important;
     word-wrap: break-word !important;
     height: auto !important;
-    line-height: 25px;
+    line-height: 21px;
 }
 .p-select-area .p-transfer-right {
     width: 245px !important;
 }
-
+.p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item {
+    height: 25px;
+}
 .p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item > span {
     word-break: break-all !important;
     white-space: normal !important;
     word-break: break-all !important;
     word-wrap: break-word !important;
     height: auto !important;
-    line-height: 25px;
+    line-height: 16px;
     display: block;
     width: 225px;
     padding-right: 3px;
 }
+.p-popover-tip-content .p-popover-tip-content-item {
+    margin-left: 4px;
+    margin-bottom: 8px;
+    padding-left: 4px;
+    padding-right: 4px;
+    background-color: #f5f6f7 !important;
+    border-radius: 2px;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+}
 </style>

+ 53 - 26
src/views/legendLibrary/addLegend.vue

@@ -1,13 +1,37 @@
 <template>
     <div class='add-legend'>
         <el-dialog :title='title' :visible.sync='dialogVisible'>
-            <!-- <add-list v-show='title=="" && GraphCategoryId' ref='searchList' :GraphCategoryId='GraphCategoryId' @mesg='mesg'></add-list> -->
-            <add-form ref='add' :ruleForm='info' @addSuccess='addSuccess' @updateSuccess='updateSuccess' :title='title'></add-form>
+            <add-form
+                ref='add'
+                :InfosList='InfosList'
+                :InfoTypeIdList='InfoTypeIdList'
+                :ruleForm='info'
+                @addSuccess='addSuccess'
+                @updateSuccess='updateSuccess'
+                :title='title'
+            ></add-form>
             <span slot='footer' class='dialog-footer'>
                 <el-button @click='dialogVisible = false,cancal()' size='small'>取 消</el-button>
                 <el-button type='primary' @click='save' size='small'>确 定</el-button>
             </span>
         </el-dialog>
+        <!-- <Modal :show='dialogVisible' :title='title' mode='middle' @close='dialogVisible=false'>
+            <template #content>
+                <add-form
+                    ref='add'
+                    :InfosList='InfosList'
+                    :InfoTypeIdList='InfoTypeIdList'
+                    :ruleForm='info'
+                    @addSuccess='addSuccess'
+                    @updateSuccess='updateSuccess'
+                    :title='title'
+                />
+            </template>
+            <template #handle>
+                <Button @click='dialogVisible = false,cancal()' type='default'>取 消</Button>
+                <Button @click='save' type='primary'>确 定</Button>
+            </template>
+        </Modal>-->
         <TransferSelectModal
             defaultExpandAll
             default-expand-all
@@ -19,6 +43,7 @@
             :data='treeData'
             @cancel='treeCancel'
             @confirm='treeConfirm'
+            :key='new Date().getTime()'
         />
     </div>
 </template>
@@ -32,6 +57,9 @@ export default {
     data() {
         return {
             dialogVisible: false,
+            InfoTypeIdList: [],
+            InfosList: [],
+
             info: {
                 Name: '',
                 Type: 'None',
@@ -77,6 +105,8 @@ export default {
                 }
             } else if (title == '添加图例库') {
                 this.dialogVisible = true
+                this.InfoTypeIdList = []
+                this.InfosList = []
                 this.info = {
                     Name: '',
                     Type: 'None',
@@ -91,6 +121,13 @@ export default {
             } else if (title == '修改图例库') {
                 this.dialogVisible = true
                 this.info = row
+                this.InfosList = []
+                this.InfoTypeIdList = []
+
+                // this.InfosList = [...row.InfoLocal.map(({ id }) => id), ...row.InfoSystem]
+                this.InfosList = [...row.InfoLocal.map(({ id }) => id)]
+                this.InfoTypeIdList = row.InfoTypeId
+                console.log(this.InfosList, this.InfoTypeIdList)
                 console.log(this.info)
                 // 图例库规则中的transform
             } else if (title == '' && this.$refs.searchList) {
@@ -116,6 +153,9 @@ export default {
                 InfoLocal: [], //工程信息化位置与设备分类
                 InfoSystem: [] //工程信息化专业/系统
             }
+            this.InfoTypeIdList = []
+            this.InfosList = []
+
             this.$refs.add.fileList = []
         },
         mesg() {
@@ -133,23 +173,7 @@ export default {
             if (this.info.Name == '') {
                 this.$message.info('请填写图例名称')
                 return false
-            }
-            //  else if (this.info.Type == 'Zone') {
-            //     if (this.info.FillColor == '') {
-            //         this.$message.info('请选择填充色以及透明度')
-            //         return false
-            //     }
-            //     if (this.info.Color == '') {
-            //         this.$message.info('请选择边框颜色')
-            //         return false
-            //     }
-            // } else if (this.info.Type == 'Line') {
-            //     if (this.info.Color == '') {
-            //         this.$message.info('请选择边框颜色')
-            //         return false
-            //     }
-            // }
-            else {
+            } else {
                 if (this.info.Type != 'Image' && this.info.Type != 'None') {
                     this.$refs.add.saveImg()
                 } else {
@@ -188,18 +212,21 @@ export default {
 
 <style lang='less' scoped>
 .add-legend {
-}
-</style>
-<style lang='less'>
-.add-legend {
-    .el-dialog {
+    /deep/ .el-dialog {
         width: 840px;
         height: 509px;
+        border-radius: 8px;
+        .el-dialog__header {
+            border-bottom: 1px solid #e4e5e7;
+        }
+        .el-dialog__title {
+            font-size: 16px;
+        }
     }
-    .el-dialog__footer {
+    /deep/ .el-dialog__footer {
         position: absolute;
         bottom: 20px;
         right: 20px;
     }
 }
-</style>
+</style>

+ 193 - 57
src/views/legendLibrary/index.vue

@@ -1,19 +1,17 @@
 <template>
     <div class='legend-library'>
-        <div class='nav'>
+        <!-- <div class='nav'>
             <img class='img-menu' src='@/assets/imgs/menu.png' alt />
             <el-divider direction='vertical'></el-divider>
             <img class='img-logo' src='@/assets/imgs/logo_tu.png' alt />
             <span class='nav-span1'>万达管理说明书</span>
             <span class='circular'></span>
-            <!-- <span style='color:#1F2329'>图例库管理</span>
-            <i class='el-icon-caret-bottom'></i>-->
             <Dropdown v-model='selVal' :data='dataSelect'>
                 <span style=' font-size: 14px;color: #1f2329 ;'>{{selText}}</span>
             </Dropdown>
-        </div>
+        </div>-->
         <div class='legend-library-top'>
-            图例库管理
+            <span style='display:inline-block;font-size:16px'>图例库管理</span>
             <span class='library-btn'>
                 <el-button size='small' @click='dumpRules'>图例绘制规则</el-button>
                 <el-button size='small' type='primary' @click='add'>添加图例</el-button>
@@ -33,16 +31,17 @@
                 ></Select>
 
                 <TreeSelect
+                    title='已选项'
                     caption='说明书位置:'
                     tipPlace='top'
-                    width='180'
-                    style='margin:0 12px'
+                    width='200'
+                    style='margin:0 0 0 12px'
                     :returnParentNode='false'
                     :isShowAllChoice='true'
                     :choseArea='true'
+                    :lastStage='true'
                     :data='positionSelect'
                     @change='treeConfirmPosition'
-                    :hideClear='true'
                 />
                 <span class='device-position'>
                     <TreeSelect
@@ -54,7 +53,7 @@
                         :returnParentNode='true'
                         :choseArea='true'
                         :data='deviceList'
-                        :hideClear='true'
+                        :lastStage='true'
                         @change='treeConfirmDevice'
                     />
                 </span>
@@ -81,8 +80,8 @@
                     :choseArea='true'
                     :data='typeVisualization'
                     @change='treeConfirm'
+                    :lastStage='true'
                     @focusChange='focusChange'
-                    :hideClear='true'
                 />
                 <Select
                     width='180'
@@ -95,46 +94,54 @@
                     style='margin:0 12px'
                     :hideClear='true'
                 ></Select>
-                <el-input size='small' @change='getTableList' prefix-icon='el-icon-search' v-model='keyword' style='width:192px;margin-right:12px;'></el-input>
+                <el-input
+                    size='small'
+                    @change='getTableList'
+                    prefix-icon='el-icon-search'
+                    v-model='keyword'
+                    clearable
+                    style='width:180px;margin-right:12px;float:right;position: absolute;right: 0; top: 45px;'
+                    @clear='keyword = ""'
+                ></el-input>
             </div>
             <el-table :data='tableData' :key='key' :border='true' style='width: 100%'>
-                <el-table-column prop='Name' label='图例名称'>
+                <el-table-column prop='Name' label='图例名称' width='120'>
                     <template slot-scope='{row}'>{{row.Name }}</template>
                 </el-table-column>
-                <el-table-column prop='style' label='图例样式'>
+                <el-table-column prop='style' label='图例样式' width='150'>
                     <template slot-scope='{row}'>
                         <img class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
                     </template>
                 </el-table-column>
-                <el-table-column prop='Unit' label='单位'>
+                <el-table-column prop='Unit' label='单位' width='120'>
                     <template slot-scope='{row}'>{{row.Unit}}</template>
                 </el-table-column>
-                <el-table-column prop='position' label='对应广场说明书的位置'>
+                <el-table-column prop='position' label='对应广场说明书的位置' show-overflow-tooltip>
                     <template slot-scope='{row}'>
                         <span v-for='item in row.GraphCategorys ' :key='item.Name'>{{item.Name}}</span>
                     </template>
                 </el-table-column>
                 <el-table-column label='对应工程信息化' align='center'>
-                    <el-table-column prop='type' label='位置/设备分类' width='240' :show-overflow-tooltip='true'>
+                    <el-table-column prop='type' label='位置/设备分类' show-overflow-tooltip>
                         <template slot-scope='{row}'>
                             <span v-for='item in row.InfoLocal ' :key='item.name'>{{item.name}}</span>
                         </template>
                     </el-table-column>
-                    <el-table-column prop='system' label='专业' :show-overflow-tooltip='true'>
+                    <el-table-column prop='system' label='专业' show-overflow-tooltip width='120'>
                         <template slot-scope='{row}'>
                             <span v-for='(item,index) in row.InfoSystems ' :key='index'>{{item.Name}}</span>
                         </template>
                     </el-table-column>
                 </el-table-column>
-                <el-table-column prop='typeId' resizable label='铺位可视化typeid' width='140' :show-overflow-tooltip='true'>
+                <el-table-column prop='typeId' resizable label='铺位可视化typeid' width='140' show-overflow-tooltip>
                     <template slot-scope='{row}'>
                         <span v-for='(item,index) in row.InfoTypes ' :key='index'>{{item.Name}}</span>
                     </template>
                 </el-table-column>
                 <el-table-column label='操作' width='100' v-if='state==1'>
                     <template slot-scope='scope' v-if='state==1'>
-                        <el-button @click='modifyClick(scope.row)' type='text' size='small'>修改</el-button>
-                        <el-button @click='deleteClick(scope.row)' type='text' size='small'>做废</el-button>
+                        <el-button @click='modifyClick(scope.row)' type='text'>修改</el-button>
+                        <el-button @click='deleteClick(scope.row)' type='text'>作废</el-button>
                     </template>
                 </el-table-column>
                 <el-table-column v-if='state==0' prop='DeleteTime' label='作废时间' width='180'>
@@ -154,6 +161,13 @@
             </div>
         </div>
         <add-legend ref='addLegend' @updateSuccess='updateSuccess' @addSuccess='addSuccess'></add-legend>
+        <Modal :show='modalStatusTip' title='确定要作废图例吗?' mode='tip' type='error' @close='modalStatusTip=false'>
+            <template #content>作废后则不可更改</template>
+            <template #handle>
+                <Button @click='modalStatusTip=false' type='default'>取消</Button>
+                <Button @click='modalConfirm' type='error'>作废</Button>
+            </template>
+        </Modal>
     </div>
 </template>
 <script>
@@ -169,10 +183,92 @@ import {
     getVisualization,
     queryRelation
 } from '@/api/legendLibrary.js'
+
+function hexToRgba(hex) {
+    let opacity = ''
+    switch (hex.slice(7, 9)) {
+        case '00':
+            opacity = '0'
+            break
+        case '0C':
+            opacity = '0.05'
+            break
+        case '19':
+            opacity = '0.1'
+            break
+        case '26':
+            opacity = '0.15'
+            break
+        case '33':
+            opacity = '0.2'
+            break
+        case '3F':
+            opacity = '0.25'
+            break
+        case '4C':
+            opacity = '0.3'
+            break
+        case '59':
+            opacity = '0.35'
+            break
+        case '66':
+            opacity = '0.4'
+            break
+        case '72':
+            opacity = '0.45'
+            break
+        case '7F':
+            opacity = '0.5'
+            break
+        case '8C':
+            opacity = '0.55'
+            break
+        case '99':
+            opacity = '0.6'
+            break
+        case 'A5':
+            opacity = '0.65'
+            break
+        case 'B2':
+            opacity = '0.7'
+            break
+        case 'BF':
+            opacity = '0.75'
+            break
+        case 'CC':
+            opacity = '0.8'
+            break
+        case 'D8':
+            opacity = '0.85'
+            break
+        case 'E5':
+            opacity = '0.9'
+            break
+        case 'F2':
+            opacity = '0.95'
+            break
+        case 'FF':
+            opacity = '1'
+            break
+    }
+    return (
+        'rgba(' +
+        parseInt('0x' + hex.slice(1, 3)) +
+        ',' +
+        parseInt('0x' + hex.slice(3, 5)) +
+        ',' +
+        parseInt('0x' + hex.slice(5, 7)) +
+        ',' +
+        opacity +
+        ')'
+    )
+}
 export default {
     components: { addLegend, Select },
     data() {
         return {
+            deleteObject: {},
+            modalStatusTip: false,
             tableData: [],
             key: 1,
             dataSelect2: [
@@ -229,10 +325,10 @@ export default {
             visualizationList: [], //已选铺位可视化
             // majorList: [], //专业
             deviceList: [],
-            GraphCategoryIds: undefined, //说明书位置勾选集合
-            InfoLocals: undefined, //工程信息化
-            InfoSystems: undefined, //工程信息化专业/系统
-            InfoTypeIds: undefined //铺位可视化typeid
+            GraphCategoryIds: [], //说明书位置勾选集合
+            InfoLocals: [], //工程信息化
+            InfoSystems: [], //工程信息化专业/系统
+            InfoTypeIds: [] //铺位可视化typeid
         }
     },
     watch: {
@@ -306,28 +402,22 @@ export default {
         modifyClick(row) {
             this.$refs.addLegend.open(row, '修改图例库')
         },
-        deleteClick(row) {
-            this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
-                confirmButtonText: '作废',
-                cancelButtonText: '取消',
-                type: 'warning',
-                center: true
-            })
-                .then(() => {
-                    let postParams = [
-                        {
-                            Id: row.Id
-                        }
-                    ]
-                    deleteLegend({ postParams }).then(res => {
-                        if (res.Result == 'success') {
-                            this.$message({
-                                type: 'success',
-                                message: '作废成功!'
-                            })
-                            this.getTableList()
-                        }
-                    })
+        modalConfirm() {
+            let postParams = [
+                {
+                    Id: this.deleteObject.Id
+                }
+            ]
+            deleteLegend({ postParams })
+                .then(res => {
+                    if (res.Result == 'success') {
+                        this.$message({
+                            type: 'success',
+                            message: '作废成功!'
+                        })
+                        this.modalStatusTip = false
+                        this.getTableList()
+                    }
                 })
                 .catch(() => {
                     this.$message({
@@ -336,6 +426,38 @@ export default {
                     })
                 })
         },
+        deleteClick(row) {
+            this.deleteObject = row
+            this.modalStatusTip = true
+            // this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
+            //     confirmButtonText: '作废',
+            //     cancelButtonText: '取消',
+            //     type: 'warning',
+            //     center: true
+            // })
+            //     .then(() => {
+            //         let postParams = [
+            //             {
+            //                 Id: row.Id
+            //             }
+            //         ]
+            //         deleteLegend({ postParams }).then(res => {
+            //             if (res.Result == 'success') {
+            //                 this.$message({
+            //                     type: 'success',
+            //                     message: '作废成功!'
+            //                 })
+            //                 this.getTableList()
+            //             }
+            //         })
+            //     })
+            //     .catch(() => {
+            //         this.$message({
+            //             type: 'info',
+            //             message: '已取消删除'
+            //         })
+            //     })
+        },
         pageChanged(page, size) {
             this.currentPage = page
             this.getTableList()
@@ -351,10 +473,10 @@ export default {
         getTableList() {
             let postParams = {
                 Deleted: this.state == 1 ? false : true,
-                GraphCategoryIds: this.GraphCategoryIds, //说明书位置
-                InfoLocals: this.InfoLocals, //工程信息化位置与设备分类
-                InfoSystems: this.InfoSystems, //工程信息化专业/系统
-                InfoTypeIds: this.InfoTypeIds, //铺位可视化typeid
+                GraphCategoryIds: this.GraphCategoryIds.length ? this.GraphCategoryIds : undefined, //说明书位置
+                InfoLocals: this.InfoLocals.length ? this.InfoLocals : undefined, //工程信息化位置与设备分类
+                InfoSystems: this.InfoSystems.length ? this.InfoSystems : undefined, //工程信息化专业/系统
+                InfoTypeIds: this.InfoTypeIds.length ? this.InfoTypeIds : undefined, //铺位可视化typeid
                 Name: this.keyword,
                 PageNumber: this.currentPage,
                 PageSize: this.size,
@@ -362,8 +484,17 @@ export default {
             }
             graphElementSearch({ postParams }).then(res => {
                 this.key++
-                this.tableData = res.Content
+                // this.tableData = res.Content
                 this.total = res.Total
+                this.tableData =
+                    res.Content &&
+                    res.Content.map(i => {
+                        if (i.FillColor.length == '9') {
+                            i.FillColor = hexToRgba(i.FillColor)
+                        }
+                        return i
+                    })
+                console.log(this.tableData)
             })
         },
 
@@ -387,13 +518,18 @@ export default {
         treeConfirmDevice(id, info) {
             this.InfoSystems = []
             this.InfoLocals = []
-            for (let i = 0; i < info.length; i++) {
-                let type = info[i]
-                if (type.name.includes('/')) {
-                    this.InfoLocals.push(type.id)
-                } else {
-                    this.InfoSystems.push(type.id)
+            if (info) {
+                for (let i = 0; i < info.length; i++) {
+                    let type = info[i]
+                    if (type.name.includes('/')) {
+                        this.InfoLocals.push(type.id)
+                    } else {
+                        this.InfoSystems.push(type.id)
+                    }
                 }
+            } else {
+                this.InfoSystems = []
+                this.InfoLocals = []
             }
             this.getTableList()
         },

+ 17 - 4
src/views/legendRules/index.vue

@@ -1,19 +1,29 @@
 <template>
     <!-- 图例库首页 -->
     <div class='legend-rules'>
-        <div class='nav'>
+        <!-- <div class='nav'>
             <img class='img-menu' src='@/assets/imgs/menu.png' alt />
             <el-divider direction='vertical'></el-divider>
             <img class='img-logo' src='@/assets/imgs/logo_tu.png' alt />
             <span style='color:#1F2329'>万达管理说明书</span>
             <span class='circular'></span>
-            <!-- <span style='color:#1F2329'>图例绘制规则</span>
-            <i class='el-icon-caret-bottom'></i>-->
             <Dropdown v-model='selVal' :data='dataSelect'>
                 <span style=' font-size: 14px;color: #1f2329 ;'>{{selText}}</span>
             </Dropdown>
-        </div>
+        </div>-->
         <div class='legend-rules-top'>
+            <span
+                class='el-icon-arrow-left'
+                @click='goBack'
+                style='float: left;
+                        cursor: pointer;
+                        font-size: 25px;
+                        display: inline-block;
+                        margin-top: 10px;
+                        padding-left: 20px;'
+            >
+                <!-- <i style='font-size:14px;display:inline-block;height:48px;line-height:48px'>图例管理</i> -->
+            </span>
             图例绘制规则
             <el-button type='primary' class='rules-button' size='small' @click='add'>添加图例</el-button>
         </div>
@@ -135,6 +145,9 @@ export default {
         }
     },
     methods: {
+        goBack() {
+            this.$router.push({ path: 'legendLibrary' })
+        },
         buttonClickHandle(obj) {
             let index = Number(obj.item.index.split('-')[1])
             let _this = this

+ 2 - 2
src/views/other/gcfz1.vue

@@ -9,8 +9,8 @@
         show-summary
         border
     >
-        <el-table-column label='序号' type='index'></el-table-column>
-        <el-table-column prop label='楼层' :show-overflow-tooltip='true' resizable>
+        <el-table-column label='序号' type='index' width="60"></el-table-column>
+        <el-table-column prop label='楼层' :show-overflow-tooltip='true' resizable >
             <template slot-scope='{row}'>{{row.floor||'--'}}</template>
         </el-table-column>
         <el-table-column prop='beforekf' label='总间数'>

+ 2 - 1
src/views/other/gcfz2.vue

@@ -84,7 +84,8 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+// import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import { mapGetters } from 'vuex'
 import moment from 'moment'
 

+ 2 - 1
src/views/other/gcfzDialog.vue

@@ -21,7 +21,8 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+// import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import gcfzTable1 from './gcfz1'
 import gcfzTable2 from './gcfz2'
 import { querygcfzyfhz, queryfzyfchange } from '@/api/other.js'

+ 2 - 0
src/views/other/index.vue

@@ -196,6 +196,8 @@ export default {
         }
         .isActive {
             color: #025baa;
+            font-weight: bolder;
+            background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
         }
     }
     .other-bottom {

+ 10 - 3
src/views/other/zhsxOther.vue

@@ -25,7 +25,8 @@
 </template>
 <script>
 import moment from 'moment'
-import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
+// import Select from '@/components/Select/Select.vue'
 import ZhsxDialog from './zhsxDialog'
 import zhsxOtherTable1 from './zhsxOtherTable1'
 import zhsxOtherTable2 from './zhsxOtherTable2'
@@ -112,7 +113,7 @@ export default {
 <style lang="less">
 .zhsx-box {
     .el-dialog__header {
-        padding: 16px 24px;
+        padding: 16px 50px;
     }
     .el-dialog__title {
         font-size: 16px;
@@ -148,7 +149,13 @@ export default {
         font-family: MicrosoftYaHei;
         color: rgba(31, 36, 41, 1);
         border: 1px solid rgba(195, 199, 203, 1);
-        border-radius: 4px;
+        background: #fff;
+    }
+    /deep/.el-tabs__item:nth-child(2) {
+        border-radius: 4px 0 0 4px;
+    }
+    /deep/.el-tabs__item:last-child {
+        border-radius: 0 4px 4px 0;
     }
     .el-tabs,
     .el-tabs__content {

+ 12 - 8
src/views/other/zhsxOtherTable1.vue

@@ -19,7 +19,7 @@
                 @change='getZhjl'
                 width='200'
                 tipPlace='top'
-                caption='政府部门'
+                caption='政府部门'
                 size='small'
                 v-model='searVal'
                 style='margin-right:12px'
@@ -37,20 +37,20 @@
             :data='zhjlTable'
             style='width: 100%;margin-top:12px'
         >
-            <el-table-column label='序号' type='index' width='50'></el-table-column>
+            <el-table-column label='序号' type='index' width='60'></el-table-column>
             <el-table-column prop sortable label='日期' width='90' resizable>
                 <template slot-scope='{row}'>{{formatter(row.createdate)||'--'}}</template>
             </el-table-column>
             <el-table-column prop label='政府部门' width='80'>
                 <template slot-scope='{row}'>{{row.department||'--'}}</template>
             </el-table-column>
-            <el-table-column prop label='记录事项' :show-overflow-tooltip='true'>
+            <el-table-column prop label='记录事项' :show-overflow-tooltip='true' width='700'>
                 <template slot-scope='{row}'>{{row.recordsx||'--'}}</template>
             </el-table-column>
-            <el-table-column prop label='工作要求'>
+            <el-table-column prop label='工作要求' width='160'>
                 <template slot-scope='{row}'>{{row.workyq||'--'}}</template>
             </el-table-column>
-            <el-table-column prop label='整改要求'>
+            <el-table-column prop label='整改要求' width='160'>
                 <template slot-scope='{row}'>{{row.zgyq||'--'}}</template>
             </el-table-column>
             <el-table-column prop label='附件' width='80'>
@@ -89,7 +89,8 @@
 </template>
 <script>
 import moment from 'moment'
-import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
+// import Select from '@/components/Select/Select.vue'
 import { queryGlams } from '@/api/other.js'
 import { querySelect } from '@/api/public.js'
 import pdf from 'vue-pdf'
@@ -219,9 +220,12 @@ export default {
         justify-content: flex-end;
         margin-top: 28px;
     }
-    .el-input__inner {
-        border: none;
+    .picker-box {
+        .el-input__inner {
+            border: none;
+        }
     }
+
     .el-range-editor.el-input__inner {
         padding: 3px 0px;
     }

+ 4 - 3
src/views/other/zhsxOtherTable2.vue

@@ -55,8 +55,8 @@
             :data='dsfTable'
             style='width: 100%;margin-top:12px'
         >
-            <el-table-column label='序号' type='index' width='50'></el-table-column>
-            <el-table-column prop :show-overflow-tooltip='true' sortable label='任务名称'>
+            <el-table-column label='序号' type='index' width='60'></el-table-column>
+            <el-table-column prop :show-overflow-tooltip='true' sortable label='任务名称' width="540">
                 <template slot-scope='{row}'>{{row.description||'--'}}</template>
             </el-table-column>
             <el-table-column prop label='状态' width='90'>
@@ -83,7 +83,8 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+// import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import { queryDsfrw } from '@/api/other.js'
 import { querySelect } from '@/api/public.js'
 

+ 6 - 2
src/views/room/detail.vue

@@ -110,7 +110,7 @@
             style='width:100%;margin-top:12px'
             :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
         >
-            <el-table-column type='index' label='序号' width='50'></el-table-column>
+            <el-table-column type='index' label='序号' width='50' :index='indexMethod'></el-table-column>
             <el-table-column prop='sbjc' label='设备名称' min-width='150' :show-overflow-tooltip='true' resizable>
                 <template slot-scope='{row}'>{{row.sbjc||'--'}}</template>
             </el-table-column>
@@ -159,7 +159,8 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
+// import Select from '@/components/Select/Select.vue'
 import { querySelect } from '@/api/public.js'
 import { mapGetters } from 'vuex'
 import { queryHxsbDetail } from '@/api/room.js'
@@ -215,6 +216,9 @@ export default {
         }
     },
     methods: {
+        indexMethod(index) {
+            return (this.page - 1) * this.size + index + 1
+        },
         show() {
             this.dialogFormVisible = !this.dialogFormVisible
         },

+ 29 - 2
src/views/room/index.vue

@@ -12,7 +12,7 @@
             </el-tooltip>
 
             <div class='compute-tab'>
-                <el-tabs v-model='activeName' @tab-click='handleClick'>
+                <el-tabs v-model='activeName' @tab-click='handleClick' ref='elTabs'>
                     <el-tab-pane label='机房布置图' name='1' v-if='tableImg.length>0'>
                         <room-table1 v-if='tableImg.length>=0' :tableImg='tableImg'></room-table1>
                     </el-tab-pane>
@@ -411,6 +411,7 @@ import roomTable4 from './room4'
 import roomTable5 from './room5'
 import { mapGetters } from 'vuex'
 import { querySelect, queryPic } from '@/api/public.js'
+import { Select } from 'meri-design'
 
 export default {
     data() {
@@ -534,6 +535,13 @@ export default {
             queryPic({ getParams }).then(res => {
                 //console.log('机房布置图', res)
                 this.tableImg = res.data ? res.data : []
+                //判断有没有图片,有图片默认显示按钮是第一个tab,没有图片显示的是第二个tab
+                if (this.tableImg.length > 0) {
+                    this.activeName = '1'
+                } else {
+                    this.activeName = '2'
+                    this.Index1()
+                }
             })
         },
         // 明细表
@@ -836,6 +844,7 @@ export default {
         },
         // 机房右上角的跳转 如果是在楼层功能打开的机房则要跳转到设备设施对应的系统\楼层 反之亦然
         jumpFloor() {
+            console.log(this.smsxtArr.smsxt)
             if (this.smsxtArr.smsxt) {
                 if (location.pathname.split('/')[3] == 'equipment') {
                     this.$router.push({ path: '/home/floorFunc' })
@@ -846,7 +855,19 @@ export default {
         }
     },
     mounted() {
-        // this.Index()
+        this.Index()
+        if (this.tableImg.length == 0) {
+            this.Index1()
+            if (this.table2.length == 0) {
+                this.Index2()
+                if (this.table3.length == 0) {
+                    this.Index3()
+                    if (this.table4.length == 0) {
+                        this.Index4()
+                    }
+                }
+            }
+        }
     }
 }
 </script>
@@ -993,6 +1014,12 @@ export default {
             color: rgba(31, 36, 41, 1);
             border: 1px solid rgba(195, 199, 203, 1);
         }
+        /deep/ .el-tabs__item:last-child {
+                border-radius: 0px 4px 4px 0px;
+        }
+        /deep/ .el-tabs__item:nth-child(2) {
+                border-radius: 4px 0px 0px 4px;
+        }
         .el-tabs,
         .el-tabs__content {
             height: 800px;

+ 2 - 1
src/views/room/room1.vue

@@ -4,7 +4,8 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+// import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 
 export default {
     props: ['tableImg', 'loading'],

+ 6 - 3
src/views/room/room2.vue

@@ -9,7 +9,7 @@
                 style='width: 100%'
                 :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
             >
-                <el-table-column type='index' label='序号' width='50'></el-table-column>
+                <el-table-column type='index' label='序号' width='50' :index='indexMethod'></el-table-column>
                 <el-table-column prop='a' label='抽屉编号' :show-overflow-tooltip='true' resizable>
                     <template slot-scope='{row}'>{{row.drawernum||'--'}}</template>
                 </el-table-column>
@@ -47,7 +47,8 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
+// import Select from '@/components/Select/Select.vue'
 import { mapGetters } from 'vuex'
 export default {
     props: ['table2', 'total', 'page', 'size', 'loading'],
@@ -67,8 +68,10 @@ export default {
     },
     components: { Select },
     methods: {
+        indexMethod(index) {
+            return (this.page - 1) * this.size + index + 1
+        },
         pageChanged(page) {
-            console.log(page)
             this.$emit('Index1Emit', page)
         }
     },

+ 10 - 6
src/views/room/room3.vue

@@ -9,20 +9,20 @@
                 style='width: 100%'
                 :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
             >
-                <el-table-column type='index' label='序号' width='50'></el-table-column>
+                <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
                 <el-table-column prop :show-overflow-tooltip='true' label='设备简称' resizable min-width='150'>
                     <template slot-scope='{row}'>{{row.classqc||'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='数量' :show-overflow-tooltip='true' width='70'>
+                <el-table-column prop label='数量' :show-overflow-tooltip='true' width='80'>
                     <template slot-scope='{row}'>{{row.sl||'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='品牌' :show-overflow-tooltip='true'>
+                <el-table-column prop label='品牌' :show-overflow-tooltip='true' width='120'>
                     <template slot-scope='{row}'>{{row.brand||'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='型号' :show-overflow-tooltip='true'>
+                <el-table-column prop label='型号' :show-overflow-tooltip='true' width='174'>
                     <template slot-scope='{row}'>{{row.sbxh||'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='楼层' :show-overflow-tooltip='true' width='70'>
+                <el-table-column prop label='楼层' :show-overflow-tooltip='true' width='100'>
                     <template slot-scope='{row}'>{{row.floorcode||'--'}}</template>
                 </el-table-column>
                 <el-table-column prop :show-overflow-tooltip='true' label='生产厂商' min-width='150'>
@@ -48,7 +48,8 @@
 </template>
 
 <script>
-import Select from '@/components/Select/Select.vue'
+// import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import Detail from './detail'
 
 export default {
@@ -62,6 +63,9 @@ export default {
 
     components: { Select, Detail },
     methods: {
+        indexMethod(index) {
+            return (this.page - 1) * this.size + index + 1
+        },
         modalClose() {
             this.innerVisible = false
         },

+ 24 - 14
src/views/room/room4.vue

@@ -8,42 +8,48 @@
                 style='width: 100%'
                 :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
             >
-                <el-table-column type='index' label='序号' width='50'></el-table-column>
-                <el-table-column prop label='设备名称' show-overflow-tooltip resizable min-width='150'>
+                <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
+                <el-table-column prop label='设备名称' show-overflow-tooltip resizable min-width='360'>
                     <template slot-scope='{row}'>{{row.sbmc||'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='设备编号' show-overflow-tooltip resizable>
+                <el-table-column prop label='设备编号' show-overflow-tooltip resizable width='80'>
                     <template slot-scope='{row}'>{{row.location||'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='重要事项记录' width='130' show-overflow-tooltip resizable>
+                <el-table-column prop label='重要事项记录' show-overflow-tooltip resizable min-width='120'>
                     <template slot-scope='{row}'>{{row.matters||'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='描述' show-overflow-tooltip resizable min-width='150'>
+                <el-table-column prop label='描述' show-overflow-tooltip resizable min-width='310'>
                     <template slot-scope='{row}'>{{row.description||'--'}}</template>
                 </el-table-column>
                 <el-table-column prop label='更换配件信息' align='center' show-overflow-tooltip resizable>
-                    <el-table-column prop label='是/否更换' show-overflow-tooltip resizable>
+                    <el-table-column prop label='是/否更换' show-overflow-tooltip resizable width='80'>
                         <template slot-scope='{row}'>
                             <div v-if='row.ismodel==0'>否</div>
                             <div v-else-if='row.ismodel==1'>是</div>
                             <div v-else>'--'</div>
                         </template>
                     </el-table-column>
-                    <el-table-column prop label='配件名称型号' width='130' min-width='110' show-overflow-tooltip resizable>
+                    <el-table-column prop label='配件名称型号' min-width='100' show-overflow-tooltip resizable>
                         <template slot-scope='{row}'>{{row.model||'--'}}</template>
                     </el-table-column>
-                    <el-table-column prop label='数量' show-overflow-tooltip resizable>
+                    <el-table-column prop label='数量' show-overflow-tooltip resizable width='80'>
                         <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>
+                    <el-table-column prop label='费用(万元)' min-width='110' show-overflow-tooltip resizable>
                         <template slot-scope='{row}'>{{row.cost?number_format(row.cost):'--'}}</template>
                     </el-table-column>
-                    <el-table-column prop label='费用出处' show-overflow-tooltip resizable>
+                    <el-table-column prop label='费用出处' show-overflow-tooltip resizable width='80'>
                         <template slot-scope='{row}'>{{row.source||'--'}}</template>
                     </el-table-column>
                 </el-table-column>
-                <el-table-column prop label='现场照片' show-overflow-tooltip resizable>
-                    <template slot-scope='{row}'>{{row.pics || '--'}}</template>
+                <el-table-column prop label='现场照片' show-overflow-tooltip resizable width='80'>
+                    <template slot-scope='{row}'>
+                        <div v-if="row.glsmsImage"
+                            style='cursor:pointer;color: #0091ff;'
+                            @click='clickPic(row.glsmsImage)'
+                        >{{row.glsmsImage.length+'张'}}</div>
+                        <div v-else>{{'--'}}</div>
+                    </template>
                 </el-table-column>
                 <el-table-column prop label='填报时间' show-overflow-tooltip resizable width='130'>
                     <template slot-scope='{row}'>{{row.reportdate?formatter(row.reportdate):'--'}}</template>
@@ -51,7 +57,7 @@
                 <el-table-column prop label='验收时间' show-overflow-tooltip width='130' resizable>
                     <template slot-scope='{row}'>{{row.sjjssj?formatter(row.sjjssj):'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='工单编号' show-overflow-tooltip resizable>
+                <el-table-column prop label='工单编号' show-overflow-tooltip resizable width='80'>
                     <template slot-scope='{row}'>{{row.wonum||'--'}}</template>
                 </el-table-column>
             </el-table>
@@ -70,7 +76,8 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+// import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import moment from 'moment'
 import { number_format } from '@/utils/format.js'
 
@@ -86,6 +93,9 @@ export default {
     },
     components: { Select },
     methods: {
+        indexMethod(index) {
+            return (this.page - 1) * this.size + index + 1
+        },
         formatter(date) {
             return moment.unix(date / 1000).format('YYYY.MM.DD HH:mm')
         },

+ 13 - 8
src/views/room/room5.vue

@@ -8,22 +8,23 @@
                 style='width: 100%'
                 :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
             >
-                <el-table-column type='index' label='序号' width='50'></el-table-column>
+                <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
                 <el-table-column prop label='设备名称' show-overflow-tooltip resizable min-width='150'>
                     <template slot-scope='{row}'>{{row.sbmc||'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='设备编号' :show-overflow-tooltip='true'>
+                <el-table-column prop label='设备编号' :show-overflow-tooltip='true' width='80'>
                     <template slot-scope='{row}'>{{row.assetnum||'--'}}</template>
                 </el-table-column>
                 <el-table-column prop label='核心维保事项记录' :show-overflow-tooltip='true' min-width='150'>
                     <template slot-scope='{row}'>{{row.matters||'--'}}</template>
                 </el-table-column>
-                <el-table-column prop label='现场照片' :show-overflow-tooltip='true'>
+                <el-table-column prop label='现场照片' :show-overflow-tooltip='true' width='80'>
                     <template slot-scope='{row}'>
-                        <div
+                        <div v-if="row.glsmsImage"
                             style='cursor:pointer;color: #0091ff;'
                             @click='clickPic(row.glsmsImage)'
-                        >{{row.glsmsImage?row.glsmsImage.length+'张':'--'}}</div>
+                        >{{row.glsmsImage.length+'张'}}</div>
+                        <div v-else>{{'--'}}</div>
                     </template>
                 </el-table-column>
                 <el-table-column prop label='维保任务' align='center'>
@@ -32,7 +33,7 @@
                             <div style='cursor:pointer;color: #0091ff;'>{{row.wb_gzglid||'--'}}</div>
                         </template>
                     </el-table-column>
-                    <el-table-column prop label='维保任务名称' :show-overflow-tooltip='true' min-width='150'>
+                    <el-table-column prop label='维保任务名称' :show-overflow-tooltip='true' min-width='340'>
                         <template slot-scope='{row}'>{{row.wbrwmc || '--'}}</template>
                     </el-table-column>
                     <el-table-column prop label='任务状态' :show-overflow-tooltip='true'>
@@ -55,7 +56,7 @@
                     <el-table-column prop label='异常工单编号' :show-overflow-tooltip='true' min-width='110'>
                         <template slot-scope='{row}'>{{row.wonum||'--'}}</template>
                     </el-table-column>
-                    <el-table-column prop label='描述' :show-overflow-tooltip='true' min-width='150'>
+                    <el-table-column prop label='描述' :show-overflow-tooltip='true' min-width='320'>
                         <template slot-scope='{row}'>{{row.description||'--'}}</template>
                     </el-table-column>
                     <el-table-column prop label='填报时间' :show-overflow-tooltip='true' width='130'>
@@ -82,7 +83,8 @@
     </div>
 </template>
 <script>
-import Select from '@/components/Select/Select.vue'
+// import Select from '@/components/Select/Select.vue'
+import { Select } from 'meri-design'
 import moment from 'moment'
 
 export default {
@@ -98,6 +100,9 @@ export default {
     components: { Select },
     mounted() {},
     methods: {
+        indexMethod(index) {
+            return (this.page - 1) * this.size + index + 1
+        },
         pageChanged(page) {
             this.page = page
             this.$emit('Index4Emit', page)