Procházet zdrojové kódy

适配底图,分支图

zhulizhen1111 před 4 roky
rodič
revize
4097364e20

+ 11 - 3
src/components/floorMap/index.vue

@@ -50,7 +50,11 @@ export default {
             default: '',
             type: String
         },
-
+        // 弹窗高度,适配底图高度使用
+        modalHeight: {
+            type: [Number, undefined],
+            default: undefined
+        },
         loadName: null,
         type: null
     },
@@ -220,13 +224,16 @@ export default {
         },
         // 地图尺寸
         mapSize() {
+            this.canvasWidth = this.$refs.graphy.offsetWidth
             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
             }
+            // 弹窗中底图高度适配
+            if (this.modalHeight) {
+                this.canvasHeight = this.modalHeight
+            }
         },
         getEvent() {
             bus.$on('changeShow', res => {
@@ -290,6 +297,7 @@ export default {
 <style lang="less" scoped>
 #floor_base {
     position: relative;
+    height: 100%;
     .fengMap {
         position: fixed;
         width: 100px;

+ 20 - 18
src/views/equipment/eqDialog.vue

@@ -13,7 +13,7 @@
                 />
             </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'>
                 <!-- 原理图 -->
                 <div v-if='dialogInfo.id.slice(2,4)=="YL"' style='width:90%;overflow:hidden'>
                     <rotation :rotationImg='rotationImg'></rotation>
@@ -29,7 +29,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'
@@ -72,7 +72,7 @@
                                     :name='`${value.param.type_code}`'
                                     v-if='value.id.slice(2,4)=="YL" && value.param.type_code.slice(0,3)=="FBT"'
                                 >
-                                    <fenbuPic ref='fenbutu' @openFloorMap='openFloor' :typecode='value.param.type_code'></fenbuPic>
+                                    <fenbuPic ref='fenbutu' :typecode='value.param.type_code'></fenbuPic>
                                 </el-tab-pane>
                             </template>
                         </template>
@@ -117,7 +117,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 +137,6 @@ export default {
                     this.initImage(this.typecode)
                 }
             }
-            //console.log(this.dialogInfo)
             this.param = this.activeName
         },
         //点击tab函数
@@ -158,16 +156,14 @@ export default {
                 this.initImage(this.typecode)
             }
             if (this.typecode.slice(0, 3) == 'FBT') {
-                this.openFloor()
+                this.$nextTick(() => {
+                    this.$refs.fenbutu[0] && this.$refs.fenbutu[0].openFloorMap()
+                })
             }
 
             this.tabLabel = tab.label
         },
-        // 打开底图
-        openFloor() {
-            console.log(';wwwww')
-            this.$emit('openFloorMap')
-        },
+
         visibalBox() {
             this.$refs.Dialog.open(this.dialogInfo.id)
         },
@@ -208,7 +204,6 @@ export default {
             if (this.systemName == '供电系统') {
                 getParams.system = '1001'
             }
-            console.log(getParams)
             queryPic({ getParams }).then(res => {
                 this.rotationImg = res.data || []
             })
@@ -244,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({
@@ -306,6 +300,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;
@@ -316,12 +314,9 @@ export default {
         border: 1px solid rgba(195, 199, 203, 1);
     }
     .el-tab-pane {
-        height: 60% !important;
-    }
-    .el-tabs,
-    .el-tabs__content {
-        height: 700px;
+        height: 100% !important;
     }
+
     .el-tabs__active-bar {
         background-color: transparent !important;
     }
@@ -378,4 +373,11 @@ export default {
         }
     }
 }
+@media screen and (max-width: 1366px) {
+    /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
+    .el-tabs,
+    .el-tabs__content {
+        height: 700px;
+    }
+}
 </style>

+ 12 - 14
src/views/equipment/fenbuPic.vue

@@ -6,7 +6,7 @@
         </div>
         <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
         <div v-show='floors.length>0' class='canvas-box'>
-            <floorMap ref='floorMap' :loadName='""' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`' :type='"floor"'></floorMap>
+            <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 />
@@ -30,16 +30,23 @@ 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) {
-            console.log(item)
             this.floorInfo = item
             this.$refs.floorMap.init(this.floorInfo.gname)
         },
@@ -60,8 +67,8 @@ export default {
                 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 {
@@ -69,7 +76,6 @@ export default {
                     this.floorsArr.forEach(el => {
                         floor.forEach(ele => {
                             if (ele.FloorId == el.gname) {
-                                console.log(el)
                                 this.floors.push({
                                     gname: el.gname,
                                     gcode: el.gcode,
@@ -81,9 +87,7 @@ export default {
                         })
                     })
                 }
-
                 this.floorInfo = this.floors[0]
-
                 this.init()
             })
         },
@@ -91,15 +95,9 @@ export default {
             this.loadName = `${this.floorInfo.code}`
         },
         openFloorMap() {
-            console.log('openFloorMap --------------')
-
             this.getFloorData()
             this.$refs.floorMap.init(this.floorInfo.gname)
         }
-    },
-    mounted() {
-        console.log(this.floorsArr)
-        this.getFloorData()
     }
 }
 </script>
@@ -117,7 +115,7 @@ export default {
     }
     .canvas-box {
         width: 100%;
-        height: 800px;
+        height: 100%;
     }
     .nodata {
         height: calc(100%-50px);

+ 3 - 2
src/views/equipment/index.vue

@@ -25,9 +25,9 @@
                     </div>
                     <div class='eq-content'>
                         <div class='legend-boxs'>
-                            <Legend :systemName='systemName'  :floors='floorsArr' type='1'></Legend>
+                            <Legend :systemName='systemName' :floors='floorsArr' type='1'></Legend>
                         </div>
-                        <floorMap ref='floorMap' :id='"equip"' :loadName='loadName'  :type='"system"'></floorMap>
+                        <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 />
@@ -224,6 +224,7 @@ export default {
             .eq-right-bottom {
                 display: flex;
                 flex: 1;
+                height: 100%;
                 .title-box {
                     position: fixed;
                     z-index: 2;