YaolongHan před 4 roky
rodič
revize
259b25232e
4 změnil soubory, kde provedl 245 přidání a 206 odebrání
  1. 200 175
      src/App.vue
  2. 21 13
      src/components/Legend/src/legend.vue
  3. 22 16
      src/components/editLengend.vue
  4. 2 2
      src/store/index.js

+ 200 - 175
src/App.vue

@@ -1,102 +1,115 @@
 <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>
 <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 {
-    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>
 <style lang="less">
 body,
@@ -124,8 +137,8 @@ input,
 textarea,
 th,
 td {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 body,
@@ -133,7 +146,7 @@ button,
 input,
 select,
 textarea {
-    font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
+  font: 12px/1.5 Arial, "Microsoft YaHei", "\65b0\5b8b\4f53";
 }
 
 h1,
@@ -142,7 +155,7 @@ h3,
 h4,
 h5,
 h6 {
-    font-size: 100%;
+  font-size: 100%;
 }
 
 address,
@@ -152,158 +165,170 @@ var,
 em,
 i,
 u {
-    font-style: normal;
+  font-style: normal;
 }
 
 ol,
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 img {
-    border: none;
-    vertical-align: middle;
+  border: none;
+  vertical-align: middle;
 }
 
 :focus {
-    outline: 0;
+  outline: 0;
 }
 
 button,
 input,
 select,
 textarea {
-    font-size: 100%;
+  font-size: 100%;
 }
 
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 /* 滚动条样式 */
 
 body ::-webkit-scrollbar {
-    width: 5px;
-    height: 8px;
+  width: 5px;
+  height: 8px;
 }
 
 body ::-webkit-scrollbar-track {
-    background-color: rgba(0, 0, 0, 0);
-    border-radius: 3px;
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 3px;
 }
 
 body ::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    background: #e6e6e6;
-    border: 1px solid #e6e6e6;
+  border-radius: 3px;
+  background: #e6e6e6;
+  border: 1px solid #e6e6e6;
 }
 
 body ::-webkit-scrollbar-thumb:vertical:hover {
-    background: #e6e6e6;
-    border: 1px solid #e6e6e6;
+  background: #e6e6e6;
+  border: 1px solid #e6e6e6;
 }
 
 #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 {
-    content: '.';
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden;
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
 }
 .clearfix {
-    zoom: 1;
+  zoom: 1;
 }
 
 .left {
-    float: left;
+  float: left;
 }
 
 .right {
-    float: right;
+  float: right;
 }
 html,
 body {
-    width: 100%;
-    height: 100%;
-    // min-width: 1920px;
-    //   background: url('./assets/images/back.jpg') no-repeat;
+  width: 100%;
+  height: 100%;
+  // min-width: 1920px;
+  //   background: url('./assets/images/back.jpg') no-repeat;
 }
 #app {
-    height: 100%;
-    width: 100%;
-    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表头背景颜色修改
 .core-device-report,
 .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 时间控件样式重写
 .specification-update-record,
 .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 {
-    border-bottom: 1px solid rgba(239, 240, 241, 1);
+  border-bottom: 1px solid rgba(239, 240, 241, 1);
 }
 .gantt-chart .el-dialog__title {
-    font-weight: 500;
+  font-weight: 500;
 }
 .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>

+ 21 - 13
src/components/Legend/src/legend.vue

@@ -6,22 +6,22 @@
 <template>
     <div>
         <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=="土建装饰"'>
+            <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 class='legend-table' v-else>
+                    <div class='legend-table' v-show='systemName!="土建装饰"'>
                         <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
                     </div>
                 </div>
             </el-collapse-transition>
             <!-- 图例编辑状态组件 -->
             <el-collapse-transition>
-                <div v-if='showView===2'>
-                    <lengend-edit
+                <div v-show='showView===2'>
+                        <lengend-edit
                         @changeSwitch='handleSwich'
                         v-if='editTable.length>0'
                         :loading='loading1'
@@ -30,7 +30,8 @@
                         @saveNum='saveNum'
                         @cance='cance'
                         :remarksText='remarksText'
-                    ></lengend-edit>
+                        :tableHeigth="tableHeigth"
+                      ></lengend-edit>
                 </div>
             </el-collapse-transition>
         </div>
@@ -137,7 +138,8 @@ export default {
             draftNum: null, //草稿箱数量, 编辑器修改icon右上角显示
             interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
             timer: null, //保存定时器
-            timer1: null
+            timer1: null,
+            tableHeigth:300 // 编辑图例框得高度
         }
     },
     computed: {
@@ -285,7 +287,8 @@ export default {
         // 点击展示图例框
         showTl() {
             if (this.showView != 1) {
-                this.$store.commit('SETSHOWVIEW', 1)
+                this.setLengedHeight()
+                this.$store.commit('SETSHOWVIEW', 1);
             } else {
                 this.$store.commit('SETSHOWVIEW', 0)
             }
@@ -297,6 +300,7 @@ export default {
         // 编辑图例
         editTl() {
             if (this.showView != 2) {
+                this.setLengedHeight()
                 this.$store.commit('SETSHOWVIEW', 2)
             } else {
                 this.$store.commit('SETSHOWVIEW', 0)
@@ -516,11 +520,15 @@ export default {
         // 设置图例整体高度
         setLengedHeight(){
            let dom = document.getElementsByClassName('legend-table')[0];
-           console.log('asdfasfd',window.screen.height,window.screen.width)
+           if(!dom){
+               return
+           }
            if(window.screen.height>1000){
-            dom.style.maxHeight="768px"
+            dom.style.maxHeight="768px";
+            this.tableHeigth = "768px"
            }else{
-            dom.style.maxHeight="534px"
+            dom.style.maxHeight="434px";
+            this.tableHeigth = "434px"
            }
 
         }

+ 22 - 16
src/components/editLengend.vue

@@ -12,7 +12,7 @@
                         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'
+                        :max-height='tableHeigth'
                         :data='editTable'
                         tooltip-effect='dark'
                         width='100%'
@@ -123,14 +123,14 @@
 import { updateStatis } from '@/api/public.js'
 import { mapGetters } from 'vuex'
 export default {
-    props: ['editTable', 'loading'],
+    props: ['editTable', 'loading','tableHeigth'],
     data() {
         return {
             value: false,
             tbData1: [],
             tbData2: [],
             tbData3: [],
-            editNum: []
+            editNum: [],
         }
     },
     computed: {
@@ -253,23 +253,29 @@ export default {
         //     this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
         // }
         // }
-        // }
+        // },
+        ,
+    },
+    mounted() {
     },
-    mounted() {}
+    watch: {
+        editTable:{
+            handler(newV) {
+                console.log('newV',newV)
+            },
+            deep: true
+        }
+    }
 }
 </script>
 <style lang="less" scoped>
 .view {
     position: relative;
     .legend-tab2 {
+        width: 385px;
         position: absolute;
         top: -44px;
         right: 47px;
-        width: 385px;
-        // width: 420px;
-        height: 460px;
-        // min-width: 350px;
-        // width: auto;
         background: rgba(255, 255, 255, 1);
         box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
         border-radius: 2px;
@@ -290,9 +296,9 @@ export default {
         cursor: pointer;
     }
     .swich {
-        position: absolute;
-        right: 16px;
-        bottom: 56px;
+        // position: absolute;
+        // right: 16px;
+        // bottom: 56px;
         span {
             margin-left: 8px;
         }
@@ -316,9 +322,9 @@ export default {
         margin-top: -50px;
     }
     .legendFoot {
-        position: absolute;
-        right: 16px;
-        bottom: 12px;
+        // position: absolute;
+        // right: 16px;
+        // bottom: 12px;
     }
 }
 </style>

+ 2 - 2
src/store/index.js

@@ -14,9 +14,9 @@ import router from '../router'
 Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
-        // ssoToken: 'admin:chuyushu',
+        ssoToken: 'admin:chuyushu',
         // ssoToken: '',
-        ssoToken: null,
+        // ssoToken: null,
         plazaName: '',
         isPreview: false,
         lastRoute: '',