智能搜索弹窗

guanqb

2024-01-17 097acb9b8de4558cc032da8249f344b2adf3b7a6

智能搜索弹窗

 src/styles/media/index.scss

@@ -3166,4 +3166,27 @@

    }

    .search-details-box {
        .el-dialog {
            width: countSizeVw(400, 1920);
            height: countSizeVh(300);
        }

        .info-list {
            width: 90%;
            margin: 0 auto;

            .info-item {
                display: flex;
                margin-bottom: countSizeVh(10);

                .name {
                    width: countSizeVw(100, 1920);
                    text-align: right;
                    margin-right: countSizeVw(20, 1920);
                }
            }
        }
    }

}

 src/views/intelligentSearch/components/searchDetailDialog.vue

New file
@@ -0,0 +1,61 @@
<template>
    <el-dialog title="详情信息" :visible.sync="searchDetailVisible" :before-close="personInfoClose" :modal="true"
        :modal-append-to-body="false" :close-on-click-modal="false" class="search-details-box">
        <div class="info-list">
            <div class="info-item">
                <div class="name">名字：</div>
                <div class="value">{{ row.name }}</div>
            </div>
            <div class="info-item">
                <div class="name">手机号：</div>
                <div class="value">{{ row.tel }}</div>
            </div>
            <div class="info-item">
                <div class="name">地址：</div>
                <div class="value">{{ row.address }}</div>
            </div>
            <div class="info-item">
                <div class="name">身份证号</div>
                <div class="value">362121199212246538</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>
    </el-dialog>
</template>

<script>


export default {
    data () {
        return {
            searchDetailVisible: false,
            row: {
                name: '',
                tel: '',
                address: ''
            }
        }
    },

    methods: {
        showSearchDetail (row) {
            this.row = row
            this.searchDetailVisible = true
        }
    },
}
</script>

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

 src/views/intelligentSearch/index.vue

@@ -24,16 +24,15 @@
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="姓名"
                        min-width="80%"></el-table-column>
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="手机号"
                        min-width="80%"></el-table-column>
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" min-width="80%"></el-table-column>
                    <el-table-column prop="tel" :show-overflow-tooltip="true" label="手机号" min-width="80%"></el-table-column>
                    <el-table-column label="操作" align="center" min-width="32%">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" title="定位">
                            <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
                                @click="rowClick(scope.row)">
                                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                            </el-button>
                            <el-button type="text" size="small" title="详情">
                            <el-button type="text" size="small" title="详情" @click="goDetail(scope.row)">
                                <i class="el-icon-document"></i>
                            </el-button>
                        </template>
@@ -47,54 +46,27 @@
                </div>
            </div>
        </div>
        <searchDetailDialog ref="searchDetailDialog"></searchDetailDialog>
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import searchDetailDialog from './components/searchDetailDialog.vue'

let loading = null

export default {
    inject: ['userInfo'],

    components: { searchDetailDialog },

    data () {
        return {
            searchText: '',
            options: {
                columns: [
                    {
                        type: 'input',
                        props: 'xm',
                        label: '姓名',
                        width: '40%',
                    },

                    {
                        type: 'input',
                        props: 'sjh',
                        label: '手机号',
                        width: '60%',
                    },

                    {
                        type: 'input',
                        props: 'sfz',
                        label: '身份证号',
                    },

                    {
                        type: 'input',
                        props: 'zz',
                        label: '住址',
                    },
                ]
            },

            realEmptyText: "",
            currentTableHeight: 0,
            tableData: [],

            boxShow: false,

            pages: {
@@ -111,6 +83,7 @@

        that.$nextTick(() => {
            initMapPosition()
            that.getList()
        })
    },

@@ -127,24 +100,70 @@
    },

    computed: {
        whetherPosition () {
            return (row) => {
                return !(row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0 && row.ZDDWXZB > 73)
            }
        },

        positionColor () {
            return (row) => {
                if (row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0 && row.ZDDWXZB > 73) {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        }
        },

        positionDisabled () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return false
                } else {
                    return true
                }
            }
        },
    },

    methods: {
        // 点击详情
        goDetail (row) {
            this.$refs.searchDetailDialog.showSearchDetail(row)
        },

        // 点击定位
        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                siteJd: row.lng,
                siteWd: row.lat,
                siteGd: 200
            })
        },

        // 获取列表
        getList () {
            this.tableData = [
                {
                    name: '张三',
                    tel: '13366668888',
                    lng: 112.22,
                    lat: 33.22,
                    address: '111'
                },
                {
                    name: '李四',
                    tel: '13366668877',
                    lng: 124.22,
                    lat: 30.22,
                    address: '222'
                },
                {
                    name: '王五',
                    tel: '13366668866',
                    lng: 126.22,
                    lat: 36.22,
                    address: '333'
                }
            ]
            this.pages.total = 3
        },

        searchBtn () {

        },