Bläddra i källkod

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

YaolongHan 4 år sedan
förälder
incheckning
be21ddfe08

+ 18 - 18
src/components/Rotation/src/rotation.vue

@@ -51,24 +51,24 @@ export default {
     data() {
         return {
             rotationImgs: [{ url: require('@/assets/images/login_back.png') }],
-            fileList: [
-                {
-                    name: 'food.jpeg',
-                    url: require('@/assets/imgs/2020.png'),
-                },
-                {
-                    name: 'food2.jpeg',
-                    url: require('@/assets/imgs/20200.png'),
-                },
-                {
-                    name: 'food.jpeg',
-                    url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
-                },
-                {
-                    name: 'food2.jpeg',
-                    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-                },
-            ],
+            // fileList: [
+            //     {
+            //         name: 'food.jpeg',
+            //         url: require('@/assets/imgs/2020.png'),
+            //     },
+            //     {
+            //         name: 'food2.jpeg',
+            //         url: require('@/assets/imgs/20200.png'),
+            //     },
+            //     {
+            //         name: 'food.jpeg',
+            //         url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+            //     },
+            //     {
+            //         name: 'food2.jpeg',
+            //         url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            //     },
+            // ],
         }
     },
     methods: {

+ 2 - 81
src/views/overview/index.vue

@@ -132,74 +132,6 @@
         </div>
         <PicModal ref='picModal'></PicModal>
     </div>
-    <!-- <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
-                            <div class='view-right-bottom-l'>{{item.type}}</div>
-                            <div class='view-right-bottom-r'>{{item.company}}</div>
-    </div>-->
-    <!-- <div class='view-left-box'>
-                    <div class='view-left-top'>
-                        <div class='view-top-imgL'>
-                            <rotation :rotationImg='rotationImg'></rotation>
-                        </div>
-                        <div class='view-top-imgR'>
-                            <rotation :rotationImg='rotationImg'></rotation>
-                        </div>
-                    </div>
-                    <div class='view-left-bottom'>
-                        <nav>
-                            <span></span>
-                            <span>建筑综合信息</span>
-                        </nav>
-                        <p class='place-p'>
-                            <span>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼201室福建省三明市梅列区东乾二路1号</span>
-                        </p>
-                        <span class='place-hr'></span>
-                        <div class='place-bottom'>
-                            <div class='place-bottom-row'>
-                                <div>
-                                    <span>项目名称</span>
-                                    <span>建筑高度</span>
-                                    <span>楼层分布</span>
-                                    <span>车位信息</span>
-                                </div>
-                                <div style='min-width:172px;'>
-                                    <span>三明万达广场</span>
-                                    <span>裙房31.22m</span>
-                                    <span>地上5层/地下2层</span>
-                                    <span>地上832个/地下0个</span>
-                                </div>
-                            </div>
-                            <div class='place-bottom-row'>
-                                <div>
-                                    <span>竣工日期</span>
-                                    <span>开业日期</span>
-                                    <span>移交日期</span>
-                                </div>
-                                <div style='min-width:172px;'>
-                                    <span>2016年11月21日</span>
-                                    <span>2016年12月30日</span>
-                                    <span>2017年04月30日</span>
-                                </div>
-                            </div>
-                            <div class='place-bottom-row'>
-                                <div>
-                                    <span style='margin-bottom:32px'>建筑面积</span>
-                                    <span>租赁面积</span>
-                                </div>
-                                <div>
-                                    <span>
-                                        13.07万㎡
-                                        其中地上9.90万㎡、地下3.55万㎡
-                                    </span>
-                                    <span>
-                                        6.45㎡
-                                        其中地上5.82万㎡,地下0.63万㎡
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-    </div>-->
 </template>
 <script>
 import PicModal from './picModal'
@@ -322,20 +254,9 @@ export default {
         },
         picClick(type) {
             if (type === '1') {
-                this.$refs.picModal.showModal(this.pic1)
-                //     if (this.pic1.length >= this.va) {
-                //         this.$refs.picModal.showModal([this.pic1[this.va - 1]])
-                //     } else {
-                //         this.$refs.picModal.showModal(this.pic1)
-                //     }
+                this.$refs.picModal.showModal(this.pic1, type)
             } else {
-                this.$refs.picModal.showModal(this.pic2)
-
-                //     if (this.pic2.length >= this.va) {
-                //         this.$refs.picModal.showModal([this.pic2[this.va - 1]])
-                //     } else {
-                //         this.$refs.picModal.showModal(this.pic2)
-                //     }
+                this.$refs.picModal.showModal(this.pic2, type)
             }
         },
         findxmzl() {

+ 19 - 11
src/views/overview/picModal.vue

@@ -1,33 +1,39 @@
 <template>
     <div class='picDia'>
-        <el-dialog :visible.sync='dialogVisible' width='90%' :close-on-click-modal='false' :show-close='false'>
-            <!-- <img
-                src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
-                alt
-            />-->
-            <rotation :size='sizePic' :key='key' :type='3' v-if='rotationImg.length>0' :rotationImg='rotationImg' style='height:100%;width:100%'></rotation>
+        <el-dialog :visible.sync='dialogVisible' width='75%' :close-on-click-modal='false' :show-close='false'>
+            <pic-view-rotation
+                :picType='picType'
+                :size='sizePic'
+                :key='key'
+                v-if='rotationImg.length>0'
+                :rotationImg='rotationImg'
+                style='height:100%;width:100%'
+            ></pic-view-rotation>
             <span class='close' @click='close'>X</span>
         </el-dialog>
     </div>
 </template>
 
 <script>
+import PicViewRotation from './picViewRotation'
 export default {
     data() {
         return {
             dialogVisible: false,
             mode: 'top',
-            rotationImg: [],
+            rotationImg: [], //要展示的大图
+            picType: null, //图片类型  1 区位图 2 鸟瞰图
             key: 1,
-            sizePic: '',
-            imgInfo: {},
+            sizePic: '', //横向||纵向展示 width 横向展示 height 纵向展示
+            imgInfo: {}, //返回图片信息
         }
     },
     methods: {
-        showModal(params) {
+        showModal(params, type) {
             this.key++
             this.dialogVisible = true
             this.rotationImg = params
+            this.picType = type
             if (this.rotationImg.length > 0) {
                 let img = new Image()
                 img.src = this.rotationImg[0].url
@@ -40,7 +46,6 @@ export default {
                     } else {
                         vm.sizePic = 'height'
                     }
-                    console.log(vm.sizePic)
                 }
             }
         },
@@ -48,6 +53,9 @@ export default {
             this.dialogVisible = false
         },
     },
+    components: {
+        PicViewRotation,
+    },
 }
 </script>
 

+ 97 - 0
src/views/overview/picViewRotation.vue

@@ -0,0 +1,97 @@
+/**
+*@author:Guoxiaohuan
+*@date:2020.05.26
+*@info:图片轮播
+*/
+<template>
+    <div class='wanda-rotation rotationFullYlt'>
+        <div v-if='rotationImg.length==1&&size=="height"' class='rotationConType'>
+            <img :src='rotationImg[0].url' alt />
+        </div>
+        <div v-else-if='rotationImg.length==1&&size=="width"' class='rotationCon'>
+            <img :src='rotationImg[0].url' alt />
+        </div>
+        <el-carousel
+            v-else
+            style='height:100%;width:100%'
+            :interval='5000'
+            indicator-position='none'
+            :arrow='rotationImg.length == 1 ? "never":"always"'
+        >
+            <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
+                <img :src='item.url' alt style='  width: 100%; height: 100%;object-fit: container;' />
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+</template>s
+<script>
+export default {
+    name: 'Rotation',
+    props: ['rotationImg', 'picType', 'size'],
+    data() {
+        return {}
+    },
+    methods: {},
+    // 解决两张图片时,轮播顺序反向
+    created() {
+        if (this.rotationImg && this.rotationImg.length === 2) {
+            this.rotationImg = [...this.rotationImg, ...this.rotationImg]
+        }
+    },
+    mounted() {},
+}
+</script>
+<style lang="less" scoped>
+.wanda-rotation {
+    height: 100%;
+    /deep/ .el-carousel__button {
+        background-color: rgba(2, 91, 170, 1);
+    }
+    /deep/ .el-carousel__arrow {
+        background-color: #00000050;
+    }
+    /deep/ .el-carousel__container {
+        height: 100%;
+    }
+    /deep/ .el-carousel__item {
+        text-align: center;
+        background: #fff;
+    }
+    img {
+        width: 100%;
+    }
+}
+.rotationFullYlt {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /deep/ .el-carousel__container {
+        height: 100% !important;
+    }
+    .rotationConType {
+        height: 100%;
+        width: 100%;
+        overflow: auto;
+        /deep/ .el-carousel__item {
+            text-align: center;
+            background: #fff;
+        }
+        img {
+            height: 100%;
+        }
+    }
+
+    .rotationCon {
+        /deep/ .el-carousel__item {
+            text-align: center;
+            background: #fff;
+        }
+        img {
+            width: 100%;
+        }
+    }
+}
+</style>

+ 0 - 0
src/views/overview/viewRotation.vue