社区商业详情弹窗

guanqb

2024-01-20 8cd477314dba76f5e9b8aa8310b3c6cf9180a65d

社区商业详情弹窗

 src/components/dialog/businessDetailDialog.vue

New file
@@ -0,0 +1,222 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-01-17 16:04:08
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-17 16:29:57
 * @FilePath: \srs-police-affairs\src\components\detailsPopup\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
    <el-dialog class="business-detail-box" :title="popupTile" append-to-body :visible.sync="popupShow" center
        @close="popupClose">
        <div>
            <div class="type-tab-box">
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 1 }" @click="tabClick(1)">
                    基本信息</div>
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 2 }" @click="tabClick(2)">
                    其他信息</div>
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 3 }" @click="tabClick(3)">
                    从业人员 </div>
            </div>
            <div class="tab-content-box" v-if="chooseTab == 1">
                <div class="info-list">
                    <div class="info-item">
                        <div class="name">
                            场所名称：
                        </div>
                        <div class="value">
                            测试0111
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            地址：
                        </div>
                        <div class="value">
                            江西省上饶市信州区灵溪街道吴楚大道春天新苑
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            负责人：
                        </div>
                        <div class="value">
                            钟松
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            手机号码：
                        </div>
                        <div class="value">
                            15179776420
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            所属社区：
                        </div>
                        <div class="value">
                            361102003027
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            所属网格：
                        </div>
                        <div class="value">
                            第五网格
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            场所标签：
                        </div>
                        <div class="value">
                            休闲餐饮 酒吧
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            标签颜色：
                        </div>
                        <div class="value">
                            黄色
                        </div>
                    </div>
                    <div class="info-item photo-list">
                        <div class="name">
                            场所图片：
                        </div>
                        <div class="value">
                            <el-image
                                src="https://srgdjczzxtpt.com:2080/gminio/jczz/upload/20240118/4f1acce9ae26f84850b70ee520ee5833.JPG"></el-image>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-content-box" v-if="chooseTab == 2">
                <div class="info-list">
                    <div class="info-item">
                        <div class="name">
                            法人信息：
                        </div>
                        <div class="value">
                            钟松
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            法人电话：
                        </div>
                        <div class="value">
                            15179776420
                        </div>
                    </div>
                    <div class="info-item photo-list">
                        <div class="name">
                            营业执照：
                        </div>
                        <div class="value">
                            <div v-for="index in 3" :key="index">
                                <el-image
                                    src="https://srgdjczzxtpt.com:2080/gminio/jczz/upload/20240118/c238e632fab698b5ec78af77a9cb101a.jpg"></el-image>
                            </div>

                        </div>
                    </div>
                    <div class="info-item photo-list">
                        <div class="name">
                            场所平面图：
                        </div>
                        <div class="value">
                            <el-image
                                src="https://srgdjczzxtpt.com:2080/gminio/jczz/upload/20240118/43a4fa65ee7ca772f61f0da5d681abcb.JPG"></el-image>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-content-box" v-if="chooseTab == 3">
                <div class="table-box">
                    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="name" label="名称" width="180">
                        </el-table-column>
                        <el-table-column prop="tel" label="手机号码" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="暂住地">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" icon="el-icon-edit" @click="goDetail(scope.row)">
                                    编辑
                                </el-button>
                                <el-button type="text" size="small" icon="el-icon-delete" @click="goDetail(scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'DetailsPopup',

    props: {
        popupTile: {
            type: String,
            default: ''
        }
    },

    data () {
        return {
            popupShow: false,

            data: [],
            chooseTab: 1,
            tableData: [{
                tel: '19866665555',
                name: '张三',
                address: ''
            }]
        }
    },

    methods: {
        // 打开弹窗初始化数据
        initOpen (data) {
            // 数据格式 data = [{ label: '字段名', prop:'字段属性名',value: '字段值' }]

            this.data = data

            this.popupShow = true
        },

        // 关闭弹窗按钮
        popupClose () {
            this.popupShow = false
        },

        // tab切换
        tabClick (type) {
            this.chooseTab = type
            console.log('tabClick', type)
        },

        goDetail () {

        }
    },
}
</script>

<style lang="scss" scoped></style>

 src/components/map/components/businessDataPopup.vue

@@ -23,7 +23,7 @@
                            <div class="arrow-rb"></div>
                            <div class="label-wrap">
                                <div class="title">
                                    商业信息
                                    商业信息<span class="details-link" @click="goDetail">详情>>></span>
                                    <div class="close" @click="closePopup" title="关闭"></div>
                                </div>
                                <div class="label-content">
@@ -63,19 +63,24 @@
                </div>
            </div>
        </div>
        <businessDetailDialog ref="businessDetailDialog" :popupTile="popupTile"></businessDetailDialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import businessDetailDialog from "@/components/dialog/businessDetailDialog"

export default {
    name: 'businessDataPopup',

    inject: ["getWidth", 'userInfo'],

    components: { businessDetailDialog },

    data () {
        return {
            popupTile: '详情信息',
            scaleDomFlag: false
        }
    },
@@ -99,6 +104,10 @@
    methods: {
        closePopup () {
            this.$store.commit('SET_BUSINESSDATAPOPUP', false)
        },

        goDetail () {
            this.$refs.businessDetailDialog.initOpen()
        },
    }
}
@@ -306,6 +315,18 @@
    height: 36px;
    line-height: 36px;

    .details-link {
        color: #6185e9;
        cursor: pointer;
        line-height: 24px;
        margin-left: 50px;
    }

    .details-link:hover {
        // color: #fff;
        border-bottom: 1px solid #3760cf;
    }

    .details-btn {
        position: absolute;
        top: 0;

 src/styles/media/index.scss

@@ -3190,4 +3190,61 @@
        }
    }

    .business-detail-box {
        .el-dialog {
            width: countSizeVw(900, 1920);
            height: countSizeVh(640);

            .type-tab-box {
                height: countSizeVh(28);
                line-height: countSizeVh(28);
                display: flex;

                .tab-item {
                    padding: 0 10px;
                    cursor: pointer;
                }

                .tab-choose-item {
                    background-color: #3d5ad5;
                }
            }

            .tab-content-box {
                .info-list {
                    display: flex;
                    flex-wrap: wrap;
                    margin: countSizeVh(20) countSizeVw(20, 1920) 0;

                    .info-item {
                        display: flex;
                        margin-bottom: countSizeVh(20);
                        width: 50%;

                        .name {
                            width: countSizeVw(130, 1920);
                        }
                    }

                    .photo-list {
                        width: 100%;
                        height: countSizeVh(140);

                        .value {
                            display: flex;

                            div {
                                width: countSizeVw(130, 1920);
                                margin-right: countSizeVw(10, 1920);
                            }
                        }
                    }
                }

                .table-box {
                    padding: countSizeVw(10, 1920);
                }
            }
        }
    }
}

 src/views/house/index.vue

@@ -971,7 +971,14 @@
            unitAllArr: [],
            parkingLotData: [],
            comeOutData: [],
            businessData: [],
            businessData: [
                {
                    name: '测试',
                    third_level: '类型',
                    x: '112.22',
                    y: '23.22'
                }
            ],
            keyPersonTitle: "人员详情",
            keyPersonVisible: false,
            personDetailArr: [],
@@ -1053,7 +1060,7 @@
            curHousingHWTXAYjpca: '',
            personConnectionData: [],
            buildingInfo: {},
            isQFL27: false,
            isQFL27: true,
            businessChooseItem: {},
            isBusinessHoverShow: false,
            hushiPeoTy: 1,
@@ -1589,17 +1596,12 @@
                        let sCAoiId = ''//商场aoiId
                        if (ids == '62556EAF45C31B9DE0530EF4520A0CFC') {//指定庆丰路27号天集信江明珠小区uid
                            sCAoiId = '6E5276A05D1611EAB6183C15FB00027B'

                        } else if (ids == '62556EAF4B731B9DE0530EF4520A0CFC') {//指定万达广场uid
                            sCAoiId = '6E513C5E5D1611EAB6183C15FB00027B'

                        } else if (ids == 'aba5227bc3c16d3fec0f0b1e87f25bbb') {//指定万达晶座uid--此路不通因为没deep_infos
                            sCAoiId = 'A425AEC8D3FE4C85937FE36B4F996437'


                        } else if (ids == '644A2C4049024A3C8C76D96EEE4366FD') {//指定万达华府uid
                            sCAoiId = '6E5271B45D1611EAB6183C15FB00027B'

                        }

                        let sCData = []

 src/views/intelligentSearch/index.vue

@@ -207,7 +207,7 @@
            })
        },

        // 清空按钮
        // 清空按钮-图标图层清除
        clearRow (row) {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
@@ -288,6 +288,8 @@
        window.removeEventListener('resize', this.setTableHeight)

        this.$parent.$parent.resize('0px')

        this.clearRow()
    }
}
</script>

 src/views/scanOrCode/index.vue

@@ -553,10 +553,10 @@
            })
        },

        // 清空按钮
        // 清空按钮-清除图标图层
        clearRow (row) {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
        },
@@ -657,6 +657,8 @@
        window.removeEventListener('resize', this.setTableHeight)

        this.$parent.$parent.resize('0px')

        this.clearRow()
    }
}
</script>