商业列表详情框

guanqb

2023-09-13 4b2767943915c99124d8305cddbbd16904fa9467

商业列表详情框

 src/components/map/components/businessDataPopup.vue

@@ -121,7 +121,6 @@
    .content {
        padding: 0.5vh;
        width: 520px;
        height: 140px;
        background: $bg-color;
        border-radius: 4px;
        color: #fff;
@@ -136,7 +135,6 @@
            .item {
                display: flex;
                text-align: left;
                height: 20px;
                line-height: 20px;

                .key {
@@ -148,11 +146,6 @@
                    flex: 1;
                }
            }

            .item:nth-child(3) {
                height: 40px;
            }

        }

        .right {
@@ -163,7 +156,7 @@

            .img {
                width: 100%;
                height: 100%;
                height: 120px;
                border: 1px solid #eee;
                border-radius: 2px;
                display: flex;

 src/views/house/index.vue

@@ -378,7 +378,8 @@
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'business')"
                            @sort-change="sortDevName" :empty-text="houseDeepNoDataText" v-loading="houseDeepLoading"
                            element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.5)" :show-overflow-tooltip="true">
                            element-loading-background="rgba(0, 0, 0, 0.5)" :show-overflow-tooltip="true"
                            @cell-mouse-enter="businessMouseEnter" @cell-mouse-leave="businessMouseLeave">
                            <el-table-column sortable="custom" prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column v-if="isQFL27" prop="third_level" label="类型" width="100"></el-table-column>
@@ -439,6 +440,37 @@
            </div>
        </div>

        <!-- 商业数据详情弹窗 -->
        <div class="business-details" v-show="isBusinessHoverShow">
            <div class="item">
                <div class="key">名称:</div>
                <div class="value">{{ businessChooseItem.name
                }}</div>
            </div>
            <div class="item">
                <div class="key">类型:</div>
                <div class="value">{{
                    businessChooseItem.third_level
                }}</div>
            </div>
            <div class="item">
                <div class="key">地址:</div>
                <div class="value">{{
                    businessChooseItem.std_address
                }}</div>
            </div>
            <div class="item">
                <div class="key">经度:</div>
                <div class="value">{{ businessChooseItem.lng
                }}</div>
            </div>
            <div class="item">
                <div class="key">纬度:</div>
                <div class="value">{{ businessChooseItem.lat
                }}</div>
            </div>

        </div>
        <map-search-box></map-search-box>

        <el-dialog title="报警信息" :visible.sync="policeSituationVisible" :modal-append-to-body="false" :modal="true"
@@ -875,6 +907,8 @@
            personConnectionData: [],
            buildingInfo: {},
            isQFL27: false,
            businessChooseItem: {},
            isBusinessHoverShow: false,
        }
    },

@@ -986,6 +1020,17 @@
    updated () { },

    methods: {
        // 鼠标移入商业数据
        businessMouseEnter (row) {
            this.isBusinessHoverShow = true
            this.businessChooseItem = row
        },

        // 鼠标移出商业数据
        businessMouseLeave () {
            this.isBusinessHoverShow = false
        },

        // 查询当前楼栋下户室信息（是否关联）
        getPersonConnectionConditionByBuildingId (params) {
            getPersonConnectionConditionByBuildingId(params).then(res => {
@@ -3282,6 +3327,32 @@
            }
        }
    }

    .business-details {
        padding: 10px;
        width: 300px;
        background: $bg-color;
        color: #fff;
        position: absolute;
        bottom: 50px;
        left: 460px;
        border-radius: 4px;

        .item {
            display: flex;
            text-align: left;
            line-height: 20px;

            .key {
                width: 50px;
            }

            .value {
                width: 0;
                flex: 1;
            }
        }
    }
}

.progress {