Browse Source

Merge branch 'develop' of git.sagacloud.cn:web/wanda-bm-guide into develop

guoxiaohuan 4 years ago
parent
commit
6ba54d6def
5 changed files with 598 additions and 508 deletions
  1. 1 1
      package.json
  2. 58 29
      public/index.html
  3. 200 175
      src/App.vue
  4. 30 20
      src/components/Legend/src/legend.vue
  5. 309 283
      src/components/editLengend.vue

+ 1 - 1
package.json

@@ -14,7 +14,7 @@
         "@saga-web/base": "2.1.22",
         "@saga-web/base": "2.1.22",
         "@saga-web/big": "1.0.86",
         "@saga-web/big": "1.0.86",
         "@saga-web/draw": "2.1.102",
         "@saga-web/draw": "2.1.102",
-        "@saga-web/feng-map": "1.0.24",
+        "@saga-web/feng-map": "1.0.25",
         "@saga-web/graph": "2.1.112",
         "@saga-web/graph": "2.1.112",
         "ant-design-vue": "^1.4.10",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",
         "axios": "^0.19.2",

+ 58 - 29
public/index.html

@@ -5,99 +5,128 @@
  * @LastEditors: Please set LastEditors
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @Description: In User Settings Edit
  * @FilePath: \wanda-bm-guide\public\index.html
  * @FilePath: \wanda-bm-guide\public\index.html
---> 
+-->
 <!DOCTYPE html>
 <!DOCTYPE html>
 <html lang="en">
 <html lang="en">
+
 <head>
 <head>
     <meta charset="utf-8">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <!-- 万达置顶条 -->
+    <link rel="stylesheet" href="http://sso4pub.wanda-dev.cn/Styles/floatMenu.css" type="text/css">
     <script src="<%= BASE_URL %>systemConf.js"></script>
     <script src="<%= BASE_URL %>systemConf.js"></script>
     <script src="<%= BASE_URL %>g.js"></script>
     <script src="<%= BASE_URL %>g.js"></script>
+    <script src="http://sso4pub.wanda-dev.cn/Scripts/floatMenu.js" type="text/javascript"></script>
     <title>万达广场管理说明书</title>
     <title>万达广场管理说明书</title>
     <style>
     <style>
-        .map-p-label{
-            background-color:transparent!important;
-            border:none!important;
-            box-shadow:none!important;
-        } 
-        .leaflet-popup-close-button{
+        .map-p-label {
+            background-color: transparent !important;
+            border: none !important;
+            box-shadow: none !important;
+        }
+
+        .leaflet-popup-close-button {
             display: none;
             display: none;
         }
         }
-        .leaflet-container{
-            background: #f7f9fa!important;
+
+        .leaflet-container {
+            background: #f7f9fa !important;
         }
         }
-        .my-leaflet-div-icon{
+
+        .my-leaflet-div-icon {
             white-space: nowrap;
             white-space: nowrap;
         }
         }
-        .leaflet-popup-content-wrapper{
-            padding: 0px!important;
-            border-radius: 0px!important;
-            box-shadow: none!important;
+
+        .leaflet-popup-content-wrapper {
+            padding: 0px !important;
+            border-radius: 0px !important;
+            box-shadow: none !important;
         }
         }
+
         .leaflet-popup-content-wrapper .leaflet-popup-content {
         .leaflet-popup-content-wrapper .leaflet-popup-content {
-            margin: 0!important;
+            margin: 0 !important;
             min-width: 250px;
             min-width: 250px;
             background: rgba(255, 255, 255, 0.5);
             background: rgba(255, 255, 255, 0.5);
-            
+
         }
         }
+
         .leaflet-mypopup-content {
         .leaflet-mypopup-content {
-            padding: 8px 12px!important;
+            padding: 8px 12px !important;
         }
         }
-        .leaflet-mypopup-content .title{
+
+        .leaflet-mypopup-content .title {
             margin-bottom: 12px;
             margin-bottom: 12px;
         }
         }
-        .leaflet-mypopup-content .title span{
+
+        .leaflet-mypopup-content .title span {
             font-size: 14px;
             font-size: 14px;
             font-weight: bold;
             font-weight: bold;
         }
         }
+
         .leaflet-mypopup-content .line {
         .leaflet-mypopup-content .line {
             margin-bottom: 12px;
             margin-bottom: 12px;
         }
         }
-        .leaflet-mypopup-content .line span{
+
+        .leaflet-mypopup-content .line span {
             margin-right: 10px;
             margin-right: 10px;
         }
         }
-        .leaflet-mypopup-content .line span:nth-of-type(1){
+
+        .leaflet-mypopup-content .line span:nth-of-type(1) {
             font-size: 12px;
             font-size: 12px;
             color: #8D9399;
             color: #8D9399;
         }
         }
-        .leaflet-mypopup-content .line span:nth-of-type(2){
+
+        .leaflet-mypopup-content .line span:nth-of-type(2) {
             font-size: 16px;
             font-size: 16px;
             color: #1F2429;
             color: #1F2429;
         }
         }
-        .leaflet-mypopup-content .line span:nth-of-type(3) i{
+
+        .leaflet-mypopup-content .line span:nth-of-type(3) i {
             display: inline-block;
             display: inline-block;
             width: 16px;
             width: 16px;
             height: 16px;
             height: 16px;
             border-radius: 8px;
             border-radius: 8px;
             color: #F54E45;
             color: #F54E45;
         }
         }
-        .leaflet-mypopup-content .line span:nth-of-type(3) em{
+
+        .leaflet-mypopup-content .line span:nth-of-type(3) em {
             font-size: 12px;
             font-size: 12px;
             color: #F54E45;
             color: #F54E45;
-        } 
+        }
     </style>
     </style>
     <script>
     <script>
         var remHandle = function () {
         var remHandle = function () {
             var html = document.documentElement;
             var html = document.documentElement;
             var width = html.clientWidth;
             var width = html.clientWidth;
-            html.style.fontSize = width / 192 + 'px'; 
+            html.style.fontSize = width / 192 + 'px';
         }
         }
         remHandle();
         remHandle();
         window.onresize = function () {
         window.onresize = function () {
             remHandle();
             remHandle();
         }
         }
+        window.load = function () {
+            // 指定条问题
+            var wd_fm_info = {
+                profile: {
+                    username: encodeURIComponent('张三')
+                }
+            }
+        }
     </script>
     </script>
 </head>
 </head>
 
 
 <body>
 <body>
     <noscript>
     <noscript>
-        <strong>We're sorry but wandaspecificationofsanming doesn't work properly without JavaScript enabled. Please enable
+        <strong>We're sorry but wandaspecificationofsanming doesn't work properly without JavaScript enabled. Please
+            enable
             it to continue.</strong>
             it to continue.</strong>
-        </noscript>
+    </noscript>
+    <!-- 置顶条问题 -->
+    <div style="height:26px;background-color:#efefef;padding:0 10px" id="wd"></div>
     <div id="app"></div>
     <div id="app"></div>
- 
+
 </body>
 </body>
 
 
 </html>
 </html>

+ 200 - 175
src/App.vue

@@ -1,102 +1,115 @@
 <template>
 <template>
-    <div id='app'>
-        <div :id='`fengMap${id}`' class='fengMap'></div>
-        <router-view />
-    </div>
+  <div id="app">
+    <div :id="`fengMap${id}`" class="fengMap"></div>
+    <router-view />
+  </div>
 </template>
 </template>
 <script>
 <script>
-import { mapGetters, mapActions, mapMutations } from 'vuex'
-import { SFengParser } from '@saga-web/feng-map'
-import {setFloor} from "@/api/public.js"
-window.fengmapData = null
+import { mapGetters, mapActions, mapMutations } from "vuex";
+import { SFengParser } from "@saga-web/feng-map";
+import { setFloor } from "@/api/public.js";
+window.fengmapData = null;
 export default {
 export default {
-    data() {
-        return {
-            view: '',
-            scene: '',
-            id: '2',
-            canvasID: '',
-            key: '23f30a832a862c58637a4aadbf50a566',
-            appName: '万达可视化系统',
-            mapServerURL: `http://map.wanda.cn/editor`,
-            mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
-            isMounted: false,
-            plazaIds: ''
-        }
-    },
-    /**
-     * 刷新保存vuex信息
-     */
-    created() {
-        this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('beforeunload'))))
-        //    刷新时,将haveFengMap 置为false,解决设备设施页面,刷新时不出新楼层图的问题
-        this.SETHAVEFENGMAP(false)
-        localStorage.removeItem('beforeunload')
-        window.addEventListener('beforeunload', () => {
-            let state = JSON.stringify(this.$store.state)
-            localStorage.setItem('beforeunload', state)
-        })
-    },
-    mounted() {
-        this.isMounted = true
-        this.plazaIds = localStorage.getItem('PLAZAID');
+  data() {
+    return {
+      view: "",
+      scene: "",
+      id: "2",
+      canvasID: "",
+      key: "23f30a832a862c58637a4aadbf50a566",
+      appName: "万达可视化系统",
+      mapServerURL: `http://map.wanda.cn/editor`,
+      mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
+      isMounted: false,
+      plazaIds: ""
+    };
+  },
+  /**
+   * 刷新保存vuex信息
+   */
+  created() {
+    this.$store.replaceState(
+      Object.assign(
+        this.$store.state,
+        JSON.parse(localStorage.getItem("beforeunload"))
+      )
+    );
+    //    刷新时,将haveFengMap 置为false,解决设备设施页面,刷新时不出新楼层图的问题
+    this.SETHAVEFENGMAP(false);
+    localStorage.removeItem("beforeunload");
+    window.addEventListener("beforeunload", () => {
+      let state = JSON.stringify(this.$store.state);
+      localStorage.setItem("beforeunload", state);
+    });
+  },
+  mounted() {
+    this.isMounted = true;
+    this.plazaIds = localStorage.getItem("PLAZAID");
+  },
+  computed: {
+    ...mapGetters(["plazaId", "fmapID", "haveFengMap", "accessLevel"])
+  },
+  methods: {
+    ...mapActions(["getfmapID"]),
+    ...mapMutations(["SETHAVEFENGMAP"]),
+    getFengMap() {
+      this.getfmapID().then(() => {
+        this.getMap();
+      });
     },
     },
-    computed: {
-        ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'accessLevel'])
-    },
-    methods: {
-        ...mapActions(['getfmapID']),
-        ...mapMutations(['SETHAVEFENGMAP']),
-        getFengMap() {
-            this.getfmapID().then(() => {
-                this.getMap()
-            })
-        },
-        getMap() {
-            window.fengmapData = new SFengParser(
-                `fengMap${this.id}`,
-                `${this.mapServerURL}/fmap/${this.fmapID}`,
-                this.key,
-                this.appName,
-                null,
-                this.mapthemeUrl
-            )
-            window.fengmapData.loadMap(this.fmapID, (a,b) => {
-               const dataArr = b.map(item=>{
-                    return item.gname
-                });
-                // 获取主题数据
-                window.fengmapData.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then(res => {
-                    this.SETHAVEFENGMAP()
-                })
-                // 缓存楼层数据
-                setFloor({plazaId:this.plazaIds},dataArr).then((res)=>{
-                    console.log('缓存楼层',res)
-                }).catch((error)=>{
-                    console.log('缓存楼层',error)
-                })
+    getMap() {
+      window.fengmapData = new SFengParser(
+        `fengMap${this.id}`,
+        `${this.mapServerURL}/fmap/${this.fmapID}`,
+        this.key,
+        this.appName,
+        null,
+        this.mapthemeUrl
+      );
+      window.fengmapData.loadMap(this.fmapID, (a, b) => {
+        const dataArr = b.map(item => {
+          return item.gname;
+        });
+        // 获取主题数据
+        window.fengmapData
+          .loadTheme(
+            `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
+          )
+          .then(res => {
+            this.SETHAVEFENGMAP();
+          });
+        // 缓存楼层数据
+        if (dataArr.length) {
+          setFloor({ plazaId: this.plazaIds }, dataArr)
+            .then(res => {
+              console.log("缓存楼层", res);
             })
             })
+            .catch(error => {
+              console.log("缓存楼层", error);
+            });
         }
         }
+      });
+    }
+  },
+  watch: {
+    plazaIds(plazaId) {
+      console.log("获取到id", plazaId);
+      window.fengmapData = null;
+      // 当获取到到项目id,请求底图
+      if (plazaId) {
+        // 请求该项目下的楼层数据
+        this.getFengMap();
+      } else {
+        window.fengmapData = null;
+      }
     },
     },
-    watch: {
-        plazaIds(plazaId) {
-            console.log('获取到id', plazaId)
-            window.fengmapData = null
-            // 当获取到到项目id,请求底图
-            if (plazaId) {
-                // 请求该项目下的楼层数据
-                this.getFengMap()
-            } else {
-                window.fengmapData = null
-            }
-        },
-        isMounted(isMounted) {
-            if (isMounted && this.plazaIds) {
-                this.getFengMap()
-            }
-        }
+    isMounted(isMounted) {
+      if (isMounted && this.plazaIds) {
+        this.getFengMap();
+      }
     }
     }
-}
+  }
+};
 </script>
 </script>
 <style lang="less">
 <style lang="less">
 body,
 body,
@@ -124,8 +137,8 @@ input,
 textarea,
 textarea,
 th,
 th,
 td {
 td {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 }
 
 
 body,
 body,
@@ -133,7 +146,7 @@ button,
 input,
 input,
 select,
 select,
 textarea {
 textarea {
-    font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
+  font: 12px/1.5 Arial, "Microsoft YaHei", "\65b0\5b8b\4f53";
 }
 }
 
 
 h1,
 h1,
@@ -142,7 +155,7 @@ h3,
 h4,
 h4,
 h5,
 h5,
 h6 {
 h6 {
-    font-size: 100%;
+  font-size: 100%;
 }
 }
 
 
 address,
 address,
@@ -152,158 +165,170 @@ var,
 em,
 em,
 i,
 i,
 u {
 u {
-    font-style: normal;
+  font-style: normal;
 }
 }
 
 
 ol,
 ol,
 ul {
 ul {
-    list-style: none;
+  list-style: none;
 }
 }
 
 
 a {
 a {
-    text-decoration: none;
+  text-decoration: none;
 }
 }
 
 
 a:hover {
 a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 }
 
 
 img {
 img {
-    border: none;
-    vertical-align: middle;
+  border: none;
+  vertical-align: middle;
 }
 }
 
 
 :focus {
 :focus {
-    outline: 0;
+  outline: 0;
 }
 }
 
 
 button,
 button,
 input,
 input,
 select,
 select,
 textarea {
 textarea {
-    font-size: 100%;
+  font-size: 100%;
 }
 }
 
 
 table {
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 }
 
 
 /* 滚动条样式 */
 /* 滚动条样式 */
 
 
 body ::-webkit-scrollbar {
 body ::-webkit-scrollbar {
-    width: 5px;
-    height: 8px;
+  width: 5px;
+  height: 8px;
 }
 }
 
 
 body ::-webkit-scrollbar-track {
 body ::-webkit-scrollbar-track {
-    background-color: rgba(0, 0, 0, 0);
-    border-radius: 3px;
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 3px;
 }
 }
 
 
 body ::-webkit-scrollbar-thumb {
 body ::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    background: #e6e6e6;
-    border: 1px solid #e6e6e6;
+  border-radius: 3px;
+  background: #e6e6e6;
+  border: 1px solid #e6e6e6;
 }
 }
 
 
 body ::-webkit-scrollbar-thumb:vertical:hover {
 body ::-webkit-scrollbar-thumb:vertical:hover {
-    background: #e6e6e6;
-    border: 1px solid #e6e6e6;
+  background: #e6e6e6;
+  border: 1px solid #e6e6e6;
 }
 }
 
 
 #app {
 #app {
-    //meri-design组件select的字体颜色
-    /deep/ .p-select-fakePlaceholder {
-        span {
-            span {
-                color: #606266 !important;
-                font-size: 13px;
-                font-weight: normal;
-            }
-        }
-    }
-    //element 分页组件背景色
-    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
-        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
-    }
-    //element button
-    /deep/ .el-button--primary,
-    .p-button-primary {
-        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+  //meri-design组件select的字体颜色
+  /deep/ .p-select-fakePlaceholder {
+    span {
+      span {
+        color: #606266 !important;
+        font-size: 13px;
+        font-weight: normal;
+      }
     }
     }
+  }
+  //element 分页组件背景色
+  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background: linear-gradient(
+      180deg,
+      rgba(54, 156, 247, 1) 0%,
+      rgba(2, 91, 170, 1) 100%
+    );
+  }
+  //element button
+  /deep/ .el-button--primary,
+  .p-button-primary {
+    background: linear-gradient(
+      180deg,
+      rgba(54, 156, 247, 1) 0%,
+      rgba(2, 91, 170, 1) 100%
+    );
+  }
 }
 }
 .clearfix::after {
 .clearfix::after {
-    content: '.';
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden;
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
 }
 }
 .clearfix {
 .clearfix {
-    zoom: 1;
+  zoom: 1;
 }
 }
 
 
 .left {
 .left {
-    float: left;
+  float: left;
 }
 }
 
 
 .right {
 .right {
-    float: right;
+  float: right;
 }
 }
 html,
 html,
 body {
 body {
-    width: 100%;
-    height: 100%;
-    // min-width: 1920px;
-    //   background: url('./assets/images/back.jpg') no-repeat;
+  width: 100%;
+  height: 100%;
+  // min-width: 1920px;
+  //   background: url('./assets/images/back.jpg') no-repeat;
 }
 }
 #app {
 #app {
-    height: 100%;
-    width: 100%;
-    position: relative;
-    .fengMap {
-        position: fixed;
-        width: 100px;
-        height: 100px;
-        z-index: -1;
-        opacity: 0;
-    }
+  height: 100%;
+  width: 100%;
+  position: relative;
+  .fengMap {
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+    opacity: 0;
+  }
 }
 }
 // element表头背景颜色修改
 // element表头背景颜色修改
 .core-device-report,
 .core-device-report,
 .specification-update-record {
 .specification-update-record {
-    .el-table thead th {
-        background-color: #f8f9fa;
-    }
-    .el-pagination.is-background .el-pager li:not(.disabled).active {
-        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
-    }
+  .el-table thead th {
+    background-color: #f8f9fa;
+  }
+  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background: linear-gradient(
+      180deg,
+      rgba(54, 156, 247, 1) 0%,
+      rgba(2, 91, 170, 1) 100%
+    );
+  }
 }
 }
 // 说明书更新记录 element 时间控件样式重写
 // 说明书更新记录 element 时间控件样式重写
 .specification-update-record,
 .specification-update-record,
 .core-device-report {
 .core-device-report {
-    .el-input__inner {
-        height: 32px;
-        line-height: 32px;
-    }
-    .el-date-editor .el-range__icon,
-    .el-date-editor .el-range-separator {
-        line-height: 26px;
-        width: 8%;
-    }
+  .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+  .el-date-editor .el-range__icon,
+  .el-date-editor .el-range-separator {
+    line-height: 26px;
+    width: 8%;
+  }
 }
 }
 .el-dialog__header {
 .el-dialog__header {
-    border-bottom: 1px solid rgba(239, 240, 241, 1);
+  border-bottom: 1px solid rgba(239, 240, 241, 1);
 }
 }
 .gantt-chart .el-dialog__title {
 .gantt-chart .el-dialog__title {
-    font-weight: 500;
+  font-weight: 500;
 }
 }
 .img-detail-container {
 .img-detail-container {
-    .el-dialog__body {
-        padding-top: 0;
-        padding-bottom: 0;
-        padding-right: 0;
-    }
+  .el-dialog__body {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+  }
 }
 }
 </style>
 </style>

+ 30 - 20
src/components/Legend/src/legend.vue

@@ -6,14 +6,14 @@
 <template>
 <template>
     <div>
     <div>
         <div class='legend-container'>
         <div class='legend-container'>
-            <div :class='showView===1?"legend2":"legend"' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage && legendTable.length>0 '>图例</div>
+            <div :class='showView===1?"legend2":"legend"' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage && legendTable.length>0'>图例</div>
             <!-- 图里展示状态组件 -->
             <!-- 图里展示状态组件 -->
-            <el-collapse-transition v-if='(type==1 || floors.length>0)&& isMessage && legendTable.length>0'>
-                <div class='legend-tab' v-if='showView===1'>
-                    <div class='legend-table2' v-if='systemName=="土建装饰"'>
-                        <lengend-view @changeSwitch='handleSwich' ref='viewLengend' :systemName='systemName'></lengend-view>
+            <el-collapse-transition v-show='(type==1 || floors.length>0)&& isMessage && legendTable.length>0'>
+                <div class='legend-tab' v-show='showView===1'>
+                    <div class='legend-table2' v-show='systemName=="土建装饰"'>
+                        <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
                     </div>
                     </div>
-                    <div class='legend-table' v-else>
+                    <div class='legend-table' v-show='systemName!="土建装饰"'>
                         <div>
                         <div>
                             <lengend-view @changeSwitch='handleSwich' ref='viewLengend' :systemName='systemName'></lengend-view>
                             <lengend-view @changeSwitch='handleSwich' ref='viewLengend' :systemName='systemName'></lengend-view>
                         </div>
                         </div>
@@ -22,8 +22,8 @@
             </el-collapse-transition>
             </el-collapse-transition>
             <!-- 图例编辑状态组件 -->
             <!-- 图例编辑状态组件 -->
             <el-collapse-transition>
             <el-collapse-transition>
-                <div v-if='showView===2'>
-                    <lengend-edit
+                <div v-show='showView===2'>
+                        <lengend-edit
                         @changeSwitch='handleSwich'
                         @changeSwitch='handleSwich'
                         v-if='editTable.length>0'
                         v-if='editTable.length>0'
                         :loading='loading1'
                         :loading='loading1'
@@ -31,7 +31,9 @@
                         :editTable='editTable'
                         :editTable='editTable'
                         @saveNum='saveNum'
                         @saveNum='saveNum'
                         @cance='cance'
                         @cance='cance'
-                    ></lengend-edit>
+                        :remarksText='remarksText'
+                        :tableHeigth="tableHeigth"
+                      ></lengend-edit>
                 </div>
                 </div>
             </el-collapse-transition>
             </el-collapse-transition>
         </div>
         </div>
@@ -138,7 +140,8 @@ export default {
             draftNum: null, //草稿箱数量, 编辑器修改icon右上角显示
             draftNum: null, //草稿箱数量, 编辑器修改icon右上角显示
             interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
             interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
             timer: null, //保存定时器
             timer: null, //保存定时器
-            timer1: null
+            timer1: null,
+            tableHeigth:300 // 编辑图例框得高度
         }
         }
     },
     },
     computed: {
     computed: {
@@ -148,7 +151,7 @@ export default {
         floors: {
         floors: {
             //原理图中有数据楼层
             //原理图中有数据楼层
             default: () => {
             default: () => {
-                ;[]
+                []
             },
             },
             type: Array
             type: Array
         },
         },
@@ -309,7 +312,8 @@ export default {
         // 点击展示图例框
         // 点击展示图例框
         showTl() {
         showTl() {
             if (this.showView != 1) {
             if (this.showView != 1) {
-                this.$store.commit('SETSHOWVIEW', 1)
+                this.setLengedHeight()
+                this.$store.commit('SETSHOWVIEW', 1);
             } else {
             } else {
                 this.$store.commit('SETSHOWVIEW', 0)
                 this.$store.commit('SETSHOWVIEW', 0)
             }
             }
@@ -321,6 +325,7 @@ export default {
         // 编辑图例
         // 编辑图例
         editTl() {
         editTl() {
             if (this.showView != 2) {
             if (this.showView != 2) {
+                this.setLengedHeight()
                 this.$store.commit('SETSHOWVIEW', 2)
                 this.$store.commit('SETSHOWVIEW', 2)
             } else {
             } else {
                 this.$store.commit('SETSHOWVIEW', 0)
                 this.$store.commit('SETSHOWVIEW', 0)
@@ -594,14 +599,19 @@ export default {
             })
             })
         },
         },
         // 设置图例整体高度
         // 设置图例整体高度
-        setLengedHeight() {
-            let dom = document.getElementsByClassName('legend-table')[0]
-            console.log('asdfasfd', window.screen.height, window.screen.width)
-            if (window.screen.height > 1000) {
-                dom.style.maxHeight = '768px'
-            } else {
-                dom.style.maxHeight = '534px'
-            }
+        setLengedHeight(){
+           let dom = document.getElementsByClassName('legend-table')[0];
+           if(!dom){
+               return
+           }
+           if(window.screen.height>1000){
+            dom.style.maxHeight="768px";
+            this.tableHeigth = "668px"
+           }else{
+            dom.style.maxHeight="434px";
+            this.tableHeigth = "334px"
+           }
+
         }
         }
     },
     },
     mounted() {
     mounted() {

+ 309 - 283
src/components/editLengend.vue

@@ -4,75 +4,79 @@
 *@info:图例编辑状态
 *@info:图例编辑状态
 */
 */
 <template>
 <template>
-    <div class='view'>
-        <div class='legend-tab2'>
-            <div class='legend-table2-box'>
-                <div class='legend-table2' v-if='editTable.length>0'>
-                    <el-table
-                        v-loading='loading'
-                        :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
-                        ref='multipleTable'
-                        height='350px'
-                        :data='editTable'
-                        tooltip-effect='dark'
-                        width='100%'
-                        @selection-change='handleSelectionChange'
+  <div class="view">
+    <div class="legend-tab2">
+      <div class="legend-table2-box">
+        <div class="legend-table2" v-if="editTable.length>0">
+            <el-table
+              v-loading="loading"
+              :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
+              ref="multipleTable"
+              :max-height="tableHeigth"
+              :data="editTable"
+              tooltip-effect="dark"
+              width="100%"
+              @selection-change="handleSelectionChange"
+              id="lenged_tab"
+            >
+              <el-table-column prop label="项目" :show-overflow-tooltip="true">
+                <template slot-scope="{row}">{{row.Name||'--'}}</template>
+              </el-table-column>
+              <el-table-column prop label="数量">
+                <template slot-scope="{row}">
+                  <div v-if="row.IsModify">
+                    <div
+                      v-if="row.Num!=row.RealNum && (row.Num!=null && row.RealNum!=null)"
+                      class="redData"
                     >
                     >
-                        <el-table-column prop label='项目' :show-overflow-tooltip='true'>
-                            <template slot-scope='{row}'>{{row.Name||'--'}}</template>
-                        </el-table-column>
-                        <el-table-column prop label='数量'>
-                            <template slot-scope='{row}'>
-                                <div v-if='row.IsModify'>
-                                    <div v-if='row.Num!=row.RealNum && (row.Num!=null && row.RealNum!=null)' class='redData'>
-                                        <el-tooltip
-                                            class='item'
-                                            effect='dark'
-                                            :content='`当前图例 ${row.Name} 与平面图中的不一致,平面图中为${row.RealNum}`'
-                                            placement='top'
-                                        >
-                                            <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
-                                        </el-tooltip>
-                                    </div>
-                                    <div v-else-if='row.Num==null||row.RealNum==null'>
-                                        <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
-                                    </div>
-                                    <div v-else-if='!row.Num' class='nullData'>
-                                        <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
-                                    </div>
-                                    <div v-else style='width:50px'>
-                                        <el-input @change='changeTable(row)' v-model='row.Num' size='mini'></el-input>
-                                    </div>
-                                </div>
+                      <el-tooltip
+                        class="item"
+                        effect="dark"
+                        :content="`当前图例 ${row.Name} 与平面图中的不一致,平面图中为${row.RealNum}`"
+                        placement="top"
+                      >
+                        <el-input @change="changeTable(row)" v-model="row.Num" size="mini"></el-input>
+                      </el-tooltip>
+                    </div>
+                    <div v-else-if="row.Num==null||row.RealNum==null">
+                      <el-input @change="changeTable(row)" v-model="row.Num" size="mini"></el-input>
+                    </div>
+                    <div v-else-if="!row.Num" class="nullData">
+                      <el-input @change="changeTable(row)" v-model="row.Num" size="mini"></el-input>
+                    </div>
+                    <div v-else style="width:50px">
+                      <el-input @change="changeTable(row)" v-model="row.Num" size="mini"></el-input>
+                    </div>
+                  </div>
 
 
-                                <!-- 第二部分数据 -->
-                                <div v-else>
-                                    <el-tooltip
-                                        v-if='!row.IsModify'
-                                        class='item'
-                                        effect='dark'
-                                        :content='`当前图例 ${row.Name},从平面图中直接获取,如需编辑请修改平面图`'
-                                        placement='top'
-                                    >
-                                        <div class='dataTwo'>{{row.Num}}</div>
-                                    </el-tooltip>
-                                </div>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop label='单位'>
-                            <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
-                        </el-table-column>
-                        <el-table-column prop label='图例' align='center'>
-                            <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>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
-                <!-- <div class='legend-table2' v-if='tbData2.length>0'>
+                  <!-- 第二部分数据 -->
+                  <div v-else>
+                    <el-tooltip
+                      v-if="!row.IsModify"
+                      class="item"
+                      effect="dark"
+                      :content="`当前图例 ${row.Name},从平面图中直接获取,如需编辑请修改平面图`"
+                      placement="top"
+                    >
+                      <div class="dataTwo">{{row.Num}}</div>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop label="单位">
+                <template slot-scope="{row}">{{row.Unit||'--'}}</template>
+              </el-table-column>
+              <el-table-column prop label="图例" align="center">
+                <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>
+                </template>
+              </el-table-column>
+            </el-table>
+        </div>
+        <!-- <div class='legend-table2' v-if='tbData2.length>0'>
                     <el-table ref='multipleTable' height='430px' :data='tbData2' tooltip-effect='dark' @selection-change='handleSelectionChange'>
                     <el-table ref='multipleTable' height='430px' :data='tbData2' tooltip-effect='dark' @selection-change='handleSelectionChange'>
                         <el-table-column prop='project' label='项目' width='100'></el-table-column>
                         <el-table-column prop='project' label='项目' width='100'></el-table-column>
                         <el-table-column prop='num' label='数量'>
                         <el-table-column prop='num' label='数量'>
@@ -87,8 +91,8 @@
                             <template slot-scope='scope'>{{ scope.row.lege }}</template>
                             <template slot-scope='scope'>{{ scope.row.lege }}</template>
                         </el-table-column>
                         </el-table-column>
                     </el-table>
                     </el-table>
-                </div>-->
-                <!-- <div class='legend-table2' v-if='tbData3.length>0'>
+        </div>-->
+        <!-- <div class='legend-table2' v-if='tbData3.length>0'>
                     <el-table ref='multipleTable' height='430px' :data='tbData3' tooltip-effect='dark' @selection-change='handleSelectionChange'>
                     <el-table ref='multipleTable' height='430px' :data='tbData3' tooltip-effect='dark' @selection-change='handleSelectionChange'>
                         <el-table-column prop='project' label='项目' width='100'></el-table-column>
                         <el-table-column prop='project' label='项目' width='100'></el-table-column>
                         <el-table-column prop='num' label='数量'>
                         <el-table-column prop='num' label='数量'>
@@ -103,243 +107,265 @@
                             <template slot-scope='scope'>{{ scope.row.lege }}</template>
                             <template slot-scope='scope'>{{ scope.row.lege }}</template>
                         </el-table-column>
                         </el-table-column>
                     </el-table>
                     </el-table>
-                </div>-->
-            </div>
-            <div class='lengend-text'>广场上没有的图例数量填写为0</div>
-            <div class='swich'>
-                <el-switch v-model='value' @change='changeSwitch'></el-switch>
-                <span>隐藏数量为0的项目</span>
-            </div>
+        </div>-->
+      </div>
+      <div class="lengend-text">广场上没有的图例数量填写为0</div>
+      <div class="swich">
+        <el-switch v-model="value" @change="changeSwitch"></el-switch>
+        <span>隐藏数量为0的项目</span>
+      </div>
 
 
-            <div class='legendFoot'>
-                <el-button size='mini' @click='cancel'>取消</el-button>
-                <el-button size='mini' v-if='editNum.length==0' type='primary' disabled style='opacity: 0.5'>保存</el-button>
-                <el-button size='mini' v-else @click='save' type='primary'>保存</el-button>
-            </div>
-        </div>
+      <div class="legendFoot">
+        <el-button size="mini" @click="cancel">取消</el-button>
+        <el-button
+          size="mini"
+          v-if="editNum.length==0"
+          type="primary"
+          disabled
+          style="opacity: 0.5"
+        >保存</el-button>
+        <el-button size="mini" v-else @click="save" type="primary">保存</el-button>
+      </div>
     </div>
     </div>
+  </div>
 </template>
 </template>
 <script>
 <script>
-import { updateStatis } from '@/api/public.js'
-import { mapGetters } from 'vuex'
+import { updateStatis } from "@/api/public.js";
+import { mapGetters } from "vuex";
 export default {
 export default {
-    props: ['editTable', 'loading'],
-    data() {
-        return {
-            value: false,
-            tbData1: [],
-            tbData2: [],
-            tbData3: [],
-            editNum: []
-        }
+  props: ["editTable", "loading", "tableHeigth"],
+  data() {
+    return {
+      value: false,
+      tbData1: [],
+      tbData2: [],
+      tbData3: [],
+      editNum: []
+    };
+  },
+  computed: {
+    ...mapGetters(["plazaId"])
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
     },
     },
-    computed: {
-        ...mapGetters(['plazaId'])
+    // 编辑图例取消
+    cancel() {
+      if (this.editNum.length > 0) {
+        this.$confirm("图例中的数据发生变化, 是否需要保存?", {
+          confirmButtonText: "保存",
+          cancelButtonText: "放弃修改",
+          type: "warning"
+        })
+          .then(() => {
+            this.$emit("saveNum", this.editNum);
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已放弃修改"
+            });
+            this.editNum = [];
+            this.$emit("saveNum", this.editNum);
+          });
+      } else {
+        this.$store.commit("SETSHOWVIEW", 1);
+        this.$emit("saveNum", this.editNum);
+      }
     },
     },
-    methods: {
-        handleSelectionChange(val) {
-            this.multipleSelection = val
-        },
-        // 编辑图例取消
-        cancel() {
-            if (this.editNum.length > 0) {
-                this.$confirm('图例中的数据发生变化, 是否需要保存?', {
-                    confirmButtonText: '保存',
-                    cancelButtonText: '放弃修改',
-                    type: 'warning'
-                })
-                    .then(() => {
-                        this.$emit('saveNum', this.editNum)
-                    })
-                    .catch(() => {
-                        this.$message({
-                            type: 'info',
-                            message: '已放弃修改'
-                        })
-                        this.editNum = []
-                        this.$emit('saveNum', this.editNum)
-                    })
-            } else {
-                this.$store.commit('SETSHOWVIEW', 1)
-                this.$emit('saveNum', this.editNum)
-            }
-        },
-        // 编辑图里保存
-        save() {
-            this.queryEdit(this.editNum)
-        },
-        // 编辑数量
-        queryEdit(val) {
-            let arr = []
-            if (val.length > 0) {
-                val.forEach(e => {
-                    let obj = {
-                        BuildingId: '1',
-                        Num: e.Num == '' ? null : Number(e.Num),
-                        GraphElementId: e.GraphElementId,
-                        FloorId: this.$cookie.get('floorMapId'),
-                        ProjectId: e.ProjectId,
-                        CategoryId: e.GraphCategoryId
-                    }
-                    arr.push(obj)
-                })
-            }
-            let params = {
-                postParams: {
-                    Content: arr
-                }
-            }
+    // 编辑图里保存
+    save() {
+      this.queryEdit(this.editNum);
+    },
+    // 编辑数量
+    queryEdit(val) {
+      let arr = [];
+      if (val.length > 0) {
+        val.forEach(e => {
+          let obj = {
+            BuildingId: "1",
+            Num: e.Num == "" ? null : Number(e.Num),
+            GraphElementId: e.GraphElementId,
+            FloorId: this.$cookie.get("floorMapId"),
+            ProjectId: e.ProjectId,
+            CategoryId: e.GraphCategoryId
+          };
+          arr.push(obj);
+        });
+      }
+      let params = {
+        postParams: {
+          Content: arr
+        }
+      };
 
 
-            updateStatis(params)
-                .then(res => {
-                    if (res.Result == 'success') {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success'
-                        })
-                        this.$emit('changeSwitch', true)
-                        this.$store.commit('SETSHOWVIEW', 1)
-                    } else {
-                        this.$message({
-                            message: '操作失败',
-                            type: 'error'
-                        })
-                    }
-                })
-                .catch(err => {
-                    this.$message({
-                        message: err,
-                        type: 'error'
-                    })
-                })
-        },
-        // 修改图例数量
-        changeTable(val) {
-            this.editNum.push(val)
-            let result = [],
-                obj = {}
-            for (var i = 0; i < this.editNum.length; i++) {
-                if (!obj[this.editNum[i].GraphElementId]) {
-                    result.push(this.editNum[i])
-                    obj[this.editNum[i].GraphElementId] = true
-                }
-            }
-            this.editNum = result
-        },
-        // 修改隐藏为0的项目的开关
-        changeSwitch(val) {
-            this.$emit('handleSwich2', val)
+      updateStatis(params)
+        .then(res => {
+          if (res.Result == "success") {
+            this.$message({
+              message: "操作成功",
+              type: "success"
+            });
+            this.$emit("changeSwitch", true);
+            this.$store.commit("SETSHOWVIEW", 1);
+          } else {
+            this.$message({
+              message: "操作失败",
+              type: "error"
+            });
+          }
+        })
+        .catch(err => {
+          this.$message({
+            message: err,
+            type: "error"
+          });
+        });
+    },
+    // 修改图例数量
+    changeTable(val) {
+      this.editNum.push(val);
+      let result = [],
+        obj = {};
+      for (var i = 0; i < this.editNum.length; i++) {
+        if (!obj[this.editNum[i].GraphElementId]) {
+          result.push(this.editNum[i]);
+          obj[this.editNum[i].GraphElementId] = true;
         }
         }
-        // init() {
-        // this.tbData1 = []
-        // this.tbData2 = []
-        // this.tbData3 = []
-        // if (this.editTable.length > 0) {
-        //     this.tbData1 = this.editTable
-        // 以下不要动 不要删
-        // let len = this.tableData.length
-        // if (len <= 10) {
-        //     this.tbData1 = this.tableData
-        // } else if (len > 10 && len <= 20) {
-        //     this.tbData1 = this.tableData.slice(0, 10)
-        //     this.tbData2 = this.tableData.slice(10, len)
-        // } else if (len > 10 && len <= 30) {
-        //     this.tbData1 = this.tableData.slice(0, 10)
-        //     this.tbData2 = this.tableData.slice(10, 20)
-        //     this.tbData3 = this.tableData.slice(20, len)
-        // } else {
-        //     this.tbData1 = this.tableData.slice(0, parseInt(len / 3))
-        //     this.tbData2 = this.tableData.slice(parseInt(len / 3), parseInt(len / 3) * 2)
-        //     this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
-        // }
-        // }
-        // }
+      }
+      this.editNum = result;
     },
     },
-    mounted() {}
-}
+    // 修改隐藏为0的项目的开关
+    changeSwitch(val) {
+      this.$emit("handleSwich2", val);
+    }
+    // init() {
+    // this.tbData1 = []
+    // this.tbData2 = []
+    // this.tbData3 = []
+    // if (this.editTable.length > 0) {
+    //     this.tbData1 = this.editTable
+    // 以下不要动 不要删
+    // let len = this.tableData.length
+    // if (len <= 10) {
+    //     this.tbData1 = this.tableData
+    // } else if (len > 10 && len <= 20) {
+    //     this.tbData1 = this.tableData.slice(0, 10)
+    //     this.tbData2 = this.tableData.slice(10, len)
+    // } else if (len > 10 && len <= 30) {
+    //     this.tbData1 = this.tableData.slice(0, 10)
+    //     this.tbData2 = this.tableData.slice(10, 20)
+    //     this.tbData3 = this.tableData.slice(20, len)
+    // } else {
+    //     this.tbData1 = this.tableData.slice(0, parseInt(len / 3))
+    //     this.tbData2 = this.tableData.slice(parseInt(len / 3), parseInt(len / 3) * 2)
+    //     this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
+    // }
+    // }
+    // },
+  },
+  mounted() {},
+  watch: {
+    editTable: {
+      handler() {
+        setTimeout(()=>{
+              let tabHeight = document.getElementById("lenged_tab").offsetHeight
+        let dom = document.getElementsByClassName("legend-tab2")[0];
+        let dom2 = document.getElementsByClassName('legend-table2')[0];
+        console.log('tabHeight',tabHeight)
+        if (!dom) {
+          return;
+        }
+         dom.style.height=tabHeight + 100 + 'px';
+         dom2.style.height=tabHeight + 100 + 'px';
+        })
+      },
+      deep: true
+    }
+  }
+};
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
 .view {
 .view {
-    // position: relative;
-    .legend-tab2 {
-        position: absolute;
-        top: 0;
-        right: 47px;
-        width: 385px;
-        height: 460px;
-        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);
-        .legend-table2-box {
-            display: flex;
-            justify-content: flex-end;
-            .legend-table2 {
-                padding: 16px 10px;
-                height: 430px;
-                width: 100%;
-            }
-        }
+  // position: relative;
+  .legend-tab2 {
+    position: absolute;
+    top: 0;
+    right: 47px;
+    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);
+    .legend-table2-box {
+      display: flex;
+      justify-content: flex-end;
+      .legend-table2 {
+        padding: 16px 10px;
+        height: 430px;
+        width: 100%;
+      }
     }
     }
+  }
 
 
-    .dataTwo {
-        padding: 0 5px;
-        cursor: pointer;
-    }
-    .swich {
-        position: absolute;
-        right: 16px;
-        bottom: 56px;
-        span {
-            margin-left: 8px;
-        }
+  .dataTwo {
+    padding: 0 5px;
+    cursor: pointer;
+  }
+  .swich {
+    position: absolute;
+    right: 16px;
+    bottom: 56px;
+    span {
+      margin-left: 8px;
     }
     }
-    .Url-img {
-        width: 20px;
-        height: 22px;
-        line-height: 20px;
-        margin: 0 auto;
-        img {
-            display: block;
-            max-width: 100%;
-            max-height: 100%;
-            margin: 0 auto;
-        }
-    }
-    .lengend-text {
-        font-size: 12px;
-        color: red;
-        padding-left: 16px;
-        margin-top: -50px;
-    }
-    .legendFoot {
-        position: absolute;
-        right: 16px;
-        bottom: 12px;
+  }
+  .Url-img {
+    width: 20px;
+    height: 22px;
+    line-height: 20px;
+    margin: 0 auto;
+    img {
+      display: block;
+      max-width: 100%;
+      max-height: 100%;
+      margin: 0 auto;
     }
     }
+  }
+  .lengend-text {
+    font-size: 12px;
+    color: red;
+    padding-left: 16px;
+    margin-top: -50px;
+  }
+  .legendFoot {
+    position: absolute;
+    right: 16px;
+    bottom: 12px;
+  }
 }
 }
 </style>
 </style>
 <style lang="less">
 <style lang="less">
 .view {
 .view {
-    .el-input--mini .el-input__inner {
-        width: 50px;
-    }
+  .el-input--mini .el-input__inner {
+    width: 50px;
+  }
+  .el-input__inner {
+    padding: 0 5px;
+  }
+  .legend-container .el-table td,
+  .legend-container .el-table th {
+    padding: 3px 0 !important;
+  }
+  .nullData {
     .el-input__inner {
     .el-input__inner {
-        padding: 0 5px;
-    }
-    .legend-container .el-table td,
-    .legend-container .el-table th {
-        padding: 3px 0 !important;
+      color: #ccc !important;
     }
     }
-    .nullData {
-        .el-input__inner {
-            color: #ccc !important;
-        }
-    }
-    .redData {
-        .el-input__inner {
-            border: 1px solid rgba(255, 77, 79, 0.5) !important;
-        }
+  }
+  .redData {
+    .el-input__inner {
+      border: 1px solid rgba(255, 77, 79, 0.5) !important;
     }
     }
+  }
 }
 }
 </style>
 </style>