扫码应用和智能搜索加地图详情弹窗及细节调整

guanqb

2024-01-22 1f1e0f8f078186019ebbea1d79b370a36c5e24f4

扫码应用和智能搜索加地图详情弹窗及细节调整

 src/components/dialog/businessDetailDialog.vue

@@ -148,16 +148,6 @@
                        </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>


 src/components/map/components/dialogDetailPopup.vue

New file
@@ -0,0 +1,364 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-02 09:39:32
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-01 14:43:39
 * @FilePath: \srs-police-affairs\src\components\map\components\mapSearchPopup.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div>
        <div v-if="dialogDetailPopup" class="divForms-dom" id="dialogDetailPopup">
            <div style="width: 100%; height: 100%; transform: translate(0, 50%);">
                <div class="divForms divForms-theme" :class="{ 'scale-dom': scaleDomFlag }">
                    <div class="divForms-wrap">
                        <div class="area">
                            <div class="arrow-lt"></div>
                            <div class="b-t"></div>
                            <div class="b-r"></div>
                            <div class="b-b"></div>
                            <div class="b-l"></div>
                            <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">
                                    <div class="item" v-for="(item, index) in dialogDetailPopupData" :key="index">
                                        <div>{{ item.label }}</div><span>:</span>
                                        <div>{{ item.value }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="b-t-l"></div>
                        <div class="b-b-r"></div>
                    </div>
                    <div class="arrow"></div>
                </div>
            </div>
        </div>
        <detailsPopup ref="detailsPopup" :popupTile="popupTile"></detailsPopup>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'dialogDetailPopup',

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

    data () {
        return {
            popupTile: '详情信息',
            scaleDomFlag: false
        }
    },

    computed: {
        ...mapGetters([
            'dialogDetailPopup',
            'dialogDetailPopupData'
        ])
    },

    mounted () {
        if (this.getWidth() > 7000) {
            this.scaleDomFlag = true
        } else {
            this.scaleDomFlag = false
        }

    },

    methods: {
        closePopup () {
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
        },

        goDetail () {
            console.log(this.dialogDetailPopupData, 121)
            this.$refs.detailsPopup.initOpen(this.dialogDetailPopupData)
        },
    }
}
</script>

<style lang="scss" scoped>
.divForms-dom {
    position: fixed;
    left: 0;
    z-index: 1 !important;

    .scale-dom {
        transform: scale(3);
        transform-origin: left;
    }
}

.divForms .arrow {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 45px;
    height: 2px;
    transform: rotate(-45deg) translate(5px, -15px);
    background-color: #28bbf0;
}

.divForms-theme .area {
    background-image: linear-gradient(135deg,
            transparent 30px,
            #1831a79a 30px,
            #3f487ba6 50%,
            transparent 50%),
        linear-gradient(-45deg,
            transparent 30px,
            #1831a79a 30px,
            #3f487ba6 50.1%,
            transparent 50%);
}

.divForms .area {
    position: relative;
    min-width: 360px;
}

.divForms-wrap {
    position: relative;
    overflow: hidden;
    padding: 30px;
}

.divForms-theme .b-b,
.divForms-theme .b-b-r,
.divForms-theme .b-l,
.divForms-theme .b-r,
.divForms-theme .b-t,
.divForms-theme .b-t-l {
    background-color: #1831a7;
    box-shadow: 0 0 10px 2px #1831a7;
}

.divForms .b-t {
    position: absolute;
    top: 0;
    left: 44px;
    right: 0;
    height: 1px;
    z-index: 10;
}

.divForms .b-r {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 44px;
    width: 1px;
    z-index: 10;
}

.divForms .b-l {
    position: absolute;
    top: 44px;
    left: 0;
    bottom: 0;
    width: 1px;
    z-index: 10;
}

.divForms .b-b {
    position: absolute;
    left: 0;
    right: 44px;
    bottom: 0;
    height: 1px;
    z-index: 10;
}

.divForms .b-b-r {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 62px;
    transform: rotate(45deg) translate(-52px, 22px);
    z-index: 10;
}

.divForms .b-t-l {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 62px;
    transform: rotate(45deg) translate(52px, -22px);
    z-index: 10;
}

.divForms .label-wrap {
    padding: 0 12px;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;

    .change-btn {
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        &>div {
            width: 36%;
            height: 36px;
            line-height: 36px;
            cursor: pointer;
        }

        &>div.on {
            color: #3d95f3;
            border-bottom: 2px solid #3d95f3;
        }
    }

    .label-content {
        padding: 10px 0;

        .item {
            display: flex;
            flex-direction: row;
            width: calc(100% - 20px);
            height: 30px;
            line-height: 30px;
            margin: 0 10px;
            text-align: left;

            &>div:first-child {
                width: 100px;
                text-align: justify;
                display: inline-block;
                text-align-last: justify;
                // margin-right: 20px;
            }

            span {
                width: 12px;
                margin-right: 20px;
                text-align: right;
            }

            &>div:nth-of-type(2) {
                width: calc(100% - 120px);
                max-width: 190px;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;
            }

        }

        .item-pic {
            height: 120px;

            img {
                border-bottom-right-radius: 22px;
            }
        }

        //.item:nth-of-type(3) {
        //    height: 90px;
        //    &>div:nth-of-type(2) {
        //        word-wrap: break-word;
        //        white-space: break-spaces;
        //        width: 190px;
        //    }
        //}
    }

    .label-content.no-data {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 240px;
    }
}

.divForms .title {
    position: relative;
    margin-top: 20px;
    padding: 0 12px 0 30px;
    height: 36px;
    line-height: 36px;

    .details-link {
        color: #6185e9;
        cursor: pointer;
        position: absolute;
        right: 34px;
        top: 0;
    }

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

    .details-btn {
        position: absolute;
        top: 0;
        right: 28px;
        height: 100%;
        cursor: pointer;

        span {
            font-size: 14px;
        }
    }

    .details-btn:hover {
        color: #3d95f3;
    }

    .close {
        position: absolute;
        right: 5px;
        top: 0;
    }

    .close::before {
        font-family: element-icons;
        content: '\e6db';
        cursor: pointer;
        font-size: 16px;
    }

    .close:hover::before {
        color: #3d95f3;
    }
}

.divForms-theme .title {
    background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px);
}

.divForms-theme .arrow,
.divForms-theme .title::before {
    background-color: #1c309e;
}

.divForms .title::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    z-index: 10;
    height: 2px;
}
</style>

 src/components/map/index.vue

@@ -101,6 +101,8 @@

        <business-data-popup></business-data-popup>

        <dialog-detail-popup></dialog-detail-popup>

        <hotel-popup></hotel-popup>

        <y-tool-tip></y-tool-tip>
@@ -182,6 +184,7 @@
import houseDeepDataPopup from './components/houseDeepDataPopup.vue'
import hotelPopup from './components/hotelPopup.vue'
import businessDataPopup from './components/businessDataPopup.vue'
import dialogDetailPopup from './components/dialogDetailPopup.vue'
import yToolTip from './components/yToolTip.vue'
import createTools from '@/utils/tools/index'
import { mapGetters } from 'vuex'
@@ -192,7 +195,7 @@
export default {
    name: 'mapBox',

    components: { mapPopup, architecturePopup, activityPolicePopup, videoListPopup, mapSearchPopup, houseDeepDataPopup, hotelPopup, businessDataPopup, yToolTip, videoRowClickPopup },
    components: { mapPopup, architecturePopup, activityPolicePopup, videoListPopup, mapSearchPopup, houseDeepDataPopup, hotelPopup, businessDataPopup, dialogDetailPopup, yToolTip, videoRowClickPopup },

    data () {
        return {

 src/store/getters.js

@@ -25,6 +25,8 @@
    houseDeepDataPopupData: (state) => state.popupParams.houseDeepDataPopupData,
    businessDataPopup: (state) => state.popupParams.businessDataPopup,
    businessDataPopupData: (state) => state.popupParams.businessDataPopupData,
    dialogDetailPopup: (state) => state.popupParams.dialogDetailPopup,
    dialogDetailPopupData: (state) => state.popupParams.dialogDetailPopupData,
    hotelPopup: (state) => state.popupParams.hotelPopup,
    hotelPopupData: (state) => state.popupParams.hotelPopupData,
    videoRowClickPopup: (state) => state.popupParams.videoRowClickPopup,

 src/store/modules/popupParams.js

@@ -38,6 +38,9 @@
        businessDataPopup: false,
        businessDataPopupData: {},

        dialogDetailPopup: false,
        dialogDetailPopupData: {},

        hotelPopup: false,
        hotelPopupData: {},

@@ -101,6 +104,14 @@
            state.businessDataPopupData = businessDataPopupData
        },

        SET_DIALOGDETAILPOPUP (state, dialogDetailPopup) {
            state.dialogDetailPopup = dialogDetailPopup
        },

        SET_DIALOGDETAILPOPUPDATA (state, dialogDetailPopupData) {
            state.dialogDetailPopupData = dialogDetailPopupData
        },

        SET_HOTELPOPUP (state, hotelPopup) {
            state.hotelPopup = hotelPopup
        },

 src/views/intelligentSearch/index.vue

@@ -16,6 +16,7 @@
                <div class="search-item-box">
                    <el-input size="small" placeholder="请输入(姓名、手机号、身份证号、住址)" v-model="searchText" clearable></el-input>
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
            </div>

@@ -27,7 +28,7 @@
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名"></el-table-column>
                    <el-table-column prop="tel" :show-overflow-tooltip="true" label="手机号"></el-table-column>
                    <el-table-column prop="card" :show-overflow-tooltip="true" label="身份证号"></el-table-column>
                    <el-table-column prop="address" :show-overflow-tooltip="true" label="住址"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址"></el-table-column> -->
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
@@ -36,9 +37,6 @@
                            </el-button>
                            <el-button type="text" size="small" title="详情" @click="goDetail(scope.row)">
                                <i class="el-icon-document"></i>
                            </el-button>
                            <el-button type="text" size="small" title="清除" @click="clearRow(scope.row)">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </template>
                    </el-table-column>
@@ -126,8 +124,8 @@
    },

    methods: {
        // 点击详情
        goDetail (row) {
        // 获取选中数据--暂时为测试数据
        getRowData (row) {
            let data = [
                {
                    label: '名字',
@@ -180,6 +178,12 @@
                    value: '无'
                }
            ]
            return data
        },

        // 点击详情
        goDetail (row) {
            let data = this.getRowData(row)
            this.$refs.detailsPopup.initOpen(data)
        },

@@ -205,6 +209,27 @@
                    url: `/img/icon/location.png`
                },
            })

            let data = this.getRowData(row)

            this.$store.commit('SET_DIALOGDETAILPOPUP', true)

            this.$store.commit('SET_DIALOGDETAILPOPUPDATA', {
                ...data
            })
            // 商业模拟数据
            var dialogDetailPopup = new global.DC.DivForms(global.viewer, {
                domId: 'dialogDetailPopup',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(row.lng),
                            Number(row.lat),
                            0
                        )
                    )
                ]
            })
        },

        // 清空按钮-图标图层清除
@@ -213,6 +238,7 @@
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
        },

        // 获取列表

 src/views/scanOrCode/index.vue

@@ -26,6 +26,7 @@
                <div class="search-item-box">
                    <el-input size="small" :placeholder="placeholder" v-model="searchText" clearable></el-input>
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
            </div>

@@ -41,8 +42,8 @@
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="card" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column> -->
                    <!-- 同住登记 -->
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>
@@ -50,8 +51,8 @@
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="card" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>  -->
                    <!-- 信息登记 -->
                    <el-table-column prop="djman" :show-overflow-tooltip="true" label="登记人" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column>
@@ -59,8 +60,8 @@
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="card" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column> -->
                    <!-- 企业登记 -->
                    <el-table-column prop="unitName" :show-overflow-tooltip="true" label="企业名称" v-if="typeValue == 4"
                        :key="Math.random()"></el-table-column>
@@ -85,9 +86,6 @@
                            </el-button>
                            <el-button type="text" size="small" title="详情" @click="goDetail(scope.row)">
                                <i class="el-icon-document"></i>
                            </el-button>
                            <el-button type="text" size="small" title="清除" @click="clearRow(scope.row)">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </template>
                    </el-table-column>
@@ -200,10 +198,8 @@
    },

    methods: {
        // 点击详情
        goDetail (row) {
            const typeLabel = this.typeOptions.find(e => e.value == this.typeValue).label
            this.popupTile = `详情信息（${typeLabel}）`
        // 根据类型获取数据--暂时为测试数据
        getRowData (row) {
            let data = []
            if (this.typeValue == 1) {
                data = [
@@ -526,6 +522,14 @@
                    }
                ]
            }
            return data
        },

        // 点击详情
        goDetail (row) {
            const typeLabel = this.typeOptions.find(e => e.value == this.typeValue).label
            this.popupTile = `详情信息（${typeLabel}）`
            let data = this.getRowData(row)
            this.$refs.detailsPopup.initOpen(data)
        },

@@ -551,6 +555,25 @@
                    url: `/img/icon/location.png`
                },
            })
            let data = this.getRowData(row)
            this.$store.commit('SET_DIALOGDETAILPOPUP', true)

            this.$store.commit('SET_DIALOGDETAILPOPUPDATA', {
                ...data
            })
            // 商业模拟数据
            var dialogDetailPopup = new global.DC.DivForms(global.viewer, {
                domId: 'dialogDetailPopup',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(row.lng),
                            Number(row.lat),
                            0
                        )
                    )
                ]
            })
        },

        // 清空按钮-清除图标图层
@@ -559,6 +582,7 @@
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
        },

        // 获取列表