Przeglądaj źródła

Merge branch 'develop' of http://39.106.8.246:3003/web/wanda-bm-guide into develop

shaun-sheep 4 lat temu
rodzic
commit
2ca9779eb5

+ 72 - 14
src/components/PicLarge/src/picLarge.vue

@@ -10,7 +10,7 @@
                 <div class='pic-left'>
                     <ul v-for='(item,index) in imgUrl' :key='index'>
                         <li @click='getIndex(item)'>
-                            <img :src='item.url' v-if='item.type=="png"' />
+                            <img :src='item.url' v-if='typeArr.includes(item.type)' />
                             <span v-else></span>
                         </li>
                         <span>{{item.name}}</span>
@@ -18,8 +18,8 @@
                 </div>
                 <div class='pic-right'>
                     <div class='pic-right-img'>
-                        <img :src='ImgUrl' v-if='this.type=="png"' />
-                        <span v-else style='line-height:540px'>{{`此文件类型为${this.type}类型,无法展示`}}</span>
+                        <img :src='ImgUrl' v-if='typeArr.includes(type)' />
+                        <p v-else class='no-image'>{{`此文件类型为${this.type}类型,无法展示`}}</p>
                     </div>
                 </div>
             </div>
@@ -29,21 +29,58 @@
 <script>
 export default {
     name: 'PicLarge',
-    props: ['imgUrl'],
+    // props: ['imgUrl'],
     data() {
         return {
             dialogVisible: false,
             ImgUrl: '',
-            type: ''
+            type: '',
+            imgUrl: [],
+            typeArr: ['png', 'jpg', 'jpeg'] //typeArr 图片类型
         }
     },
     methods: {
-        open() {
+        /**
+         * @description 打开弹窗事件,传入展示的图片信息
+         * @param {object} data 图片信息 
+                {
+                    name: '供电系统原理图.png',
+                    url: 'http://gcgl.wanda.cn/%E7%BB%B4%E4%BF%AE%E5%B7%A5%E5%8D%95%E4%B8%80/WORKORDER_846049_2019-11-19T15-37-42-716.jpg'
+                }
+         */
+        open(data) {
             this.dialogVisible = true
+            // 处理传入进来的数据
+            this.handleData(data)
+            // this.imgUrl = data
         },
         getIndex(imgUrl) {
             this.ImgUrl = imgUrl.url
             this.type = imgUrl.type
+        },
+        /**
+         * @description 处理数据 --> 返回 name,url,type格式的json数据
+            [
+                { 
+                    name: 'xxx.png',
+                    url: '---',
+                    type: 'png'
+                },
+                ...
+            ]
+         */
+        handleData(data) {
+            let patternFileExtension = /\.([0-9a-z]+)(?:[\?#]|$)/i
+            data = data.map(item => {
+                let type = item.name.match(patternFileExtension)[1]
+                let obj = {
+                    name: item.name,
+                    url: item.url,
+                    type
+                }
+                return obj
+            })
+            this.imgUrl = data
         }
     },
     mounted() {
@@ -59,7 +96,10 @@ export default {
     watch: {
         __imgUrl: {
             handler(newV, oldV) {
-                newV.length && (this.ImgUrl = this.imgUrl[0].url)
+                if (newV.length) {
+                    this.ImgUrl = newV[0].url
+                    this.type = newV[0].type
+                }
             },
             deep: true
         }
@@ -69,6 +109,7 @@ export default {
 <style lang="less" scoped>
 .pic-list {
     width: 100%;
+    height: 100%;
     // height: 700px;
     display: flex;
     justify-content: space-between;
@@ -110,22 +151,37 @@ export default {
     }
     .pic-right {
         flex: 1;
+        width: 100%;
+        height: 100%;
         background: rgba(245, 246, 247, 1);
         border-radius: 0px 0px 4px 0px;
-        padding: 60px 50px;
-        margin: auto auto;
+        // padding: 60px 50px;
+        // margin: auto auto;
         display: flex;
         justify-content: center;
         align-items: center;
         .pic-right-img {
-            width: 720px;
-            height: 540px;
+            // width: 720px;
+            // height: 540px;
+            width: 100%;
+            height: 100%;
             text-align: center;
             img {
-                max-width: 100%;
-                max-height: 100%;
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
                 display: block;
-                margin: auto;
+                margin: 0 auto;
+                position: relative;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+            // 无图片样式
+            .no-image {
+                position: relative;
+                margin: 0 auto;
+                top: 50%;
+                transform: translateY(-50%);
             }
         }
     }
@@ -139,6 +195,8 @@ export default {
         margin-top: 5vh !important;
         .el-dialog__body {
             padding: 10px;
+            height: calc(100% - 50px);
+            box-sizing: border-box;
         }
     }
 }

+ 19 - 10
src/components/floorList.vue

@@ -69,8 +69,15 @@ export default {
         floorsArr: {
             type: Array,
             default: () => {
-                ;[]
+                return []
             }
+        },
+        // 默认true,
+        // 1. 切换楼层后,是否触发 cookie,vuex数据修改,
+        // 2. 在fenbuPic组件中为false, 1)不触发cookie,vuex , 2) 选中的楼层ID,为楼层列表数组floorIdArr的第0个
+        changeDataFlag: {
+            type: Boolean,
+            default: true
         }
     },
     computed: {
@@ -109,9 +116,9 @@ export default {
             })
             this.currentFloorId = Number(this.$cookie.get('currentFloorId') || 100)
             // bug fix 修复 fenbuPic 弹窗中,楼层不能选中的问题
-            // 如果 floorIdArr 不在 floorIdArr数组中, 使用 floorIdArr[0], 而不使用 cookie
+            // 如果 floorIdArr 不在 floorIdArr数组中,或者changeDataFlag为false(弹窗组件中的楼层组件),使用 floorIdArr[0], 而不使用 cookie
             let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
-            if (index === -1) {
+            if (index === -1 || !this.changeDataFlag) {
                 this.currentFloorId = this.floorIdArr[0]
             }
             // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
@@ -148,15 +155,17 @@ export default {
             this.handlePosition(flag, index, len)
         },
         handleCookie() {
-            // return true
             let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
             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
-                store.commit('SETCURRENTFLOOR', currentFloor)
+                // 如果 changeDataFlag为true(不是在 分布图弹窗组件中的 楼层组件),设置cookie,vuex
+                if (this.changeDataFlag) {
+                    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
+                    store.commit('SETCURRENTFLOOR', currentFloor)
+                }
                 this.$emit('emitFloor', currentFloor)
             }
         },

+ 1 - 1
src/views/equipment/fenbuPic.vue

@@ -4,7 +4,7 @@
         <div class='legend-boxs'>
             <Legend :innerLeng='1' :floors='floors' type='0' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`'></Legend>
         </div>
-        <floor-list v-if='floors.length>0' :floorsArr='floors' @emitFloor='emitFloor' :id='"floor"'></floor-list>
+        <floor-list v-if='floors.length>0' :changeDataFlag='false' :floorsArr='floors' @emitFloor='emitFloor' :id='"floor"'></floor-list>
         <div v-show='floors.length>0' class='canvas-box'>
             <floorMap ref='floorMap' :modalHeight='modalHeight' :loadName='""' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`' :type='"floor"'></floorMap>
         </div>

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

@@ -182,7 +182,7 @@ export default {
          */
         closeModal(flag) {
             this.ShowDialog = false
-            this.keyFL = 'keyFL' + new Date().getTime()
+            // this.keyFL = 'keyFL' + new Date().getTime()
             this.keyLd = 'keyLd' + new Date().getTime()
         },
         //附加数据图片查看 showView为3展示状态

+ 17 - 4
src/views/other/zhsxOtherTable1.vue

@@ -79,7 +79,8 @@
                 @next-click='pageChanged'
                 @current-change='pageChanged'
             ></el-pagination>
-            <pic-large v-if='imgUrl.length>0' :imgUrl='imgUrl' ref='picLargeOpen'></pic-large>
+            <pic-large ref='picLargeOpen'></pic-large>
+            <!-- <pic-large v-if='imgUrl.length>0' :imgUrl='imgUrl' ref='picLargeOpen'></pic-large> -->
         </div>
     </div>
 </template>
@@ -119,6 +120,15 @@ export default {
                     name: '供电系统原理图.html',
                     url:
                         'http://10.199.204.168:9080/doclinks/MANAGEINS/2020061921294136524467354%E4%BE%9B%E7%94%B5%E7%B3%BB%E7%BB%9F%E5%8E%9F%E7%90%86%E5%9B%BE.png'
+                },
+                {
+                    name: '供电系统原理图.png',
+                    url:
+                        'http://10.199.204.168:9080/doclinks/MANAGEINS/2020061921294136524467354%E4%BE%9B%E7%94%B5%E7%B3%BB%E7%BB%9F%E5%8E%9F%E7%90%86%E5%9B%BE.png'
+                },
+                {
+                    name: '供电系统原理图.png',
+                    url: 'http://gcgl.wanda.cn/%E7%BB%B4%E4%BF%AE%E5%B7%A5%E5%8D%95%E4%B8%80/WORKORDER_846049_2019-11-19T15-37-42-716.jpg'
                 }
             ]
         }
@@ -126,7 +136,10 @@ export default {
     components: { Select },
     methods: {
         clickPic() {
-            this.imgUrl = []
+            if (this.imgUrls.length > 0) {
+                this.$refs.picLargeOpen.open(this.imgUrls)
+            }
+            /* this.imgUrl = []
             this.imgUrl2 = []
             var patternFileExtension = /\.([0-9a-z]+)(?:[\?#]|$)/i
             if (this.imgUrls.length > 0) {
@@ -144,8 +157,8 @@ export default {
             // var fileExtension = '供电系统原理图.html'.match(patternFileExtension)
             // console.log(fileExtension[1])
             if (this.imgUrl.length > 0) {
-                this.$refs.picLargeOpen.open()
-            }
+                this.$refs.picLargeOpen.open(this.imgUrl)
+            } */
         },
         formatter(date) {
             return moment.unix(date / 1000).format('YYYY.MM.DD')