反诈宣传展示页面搭建

guanqb

2024-03-27 022c28a6eb941c29fd2730a03ded9623d5760f2b

反诈宣传展示页面搭建

 src/api/antiFraudShow/index.js

New file
@@ -0,0 +1,17 @@
import request from "@/router/axios.js"

/**
 * 获得反诈骗宣传列表
 * @param {*} params
 * @returns
 */
export const getTaskResidencePermitApplyList = (params) => {
    return request({
        url: "/api/blade-taskResidencePermitApply/taskResidencePermitApply/page",
        method: "get",
        meta: {
            isToken: true,
        },
        params: params,
    })
}

 src/router/page/index.js

@@ -21,6 +21,7 @@
const policeInfor = () => import("../../views/policeInfor/index.vue")
const scanOrCode = () => import("../../views/scanOrCode/index.vue")
const rentalInfo = () => import("../../views/rentalInfo/index.vue")
const antiFraudShow = () => import("../../views/antiFraudShow/index.vue")
const positionManage = () => import("../../views/positionManage/index.vue")
const practitionersManage = () => import("../../views/practitionersManage/index.vue")
const policeAlarmRecordsManage = () => import("../../views/policeAlarmRecordsManage/index.vue")
@@ -153,6 +154,13 @@
                component: rentalInfo,
            },
            {
                path: "antiFraudShow",
                meta: {
                    title: "租赁信息",
                },
                component: antiFraudShow,
            },
            {
                path: "policeAlarmRecordsManage",
                meta: {
                    title: "扫码警单",

 src/styles/media/index.scss

@@ -974,6 +974,16 @@
                    }

                    .police-page {

                        .type-tab-box {
                            height: countSizeVh(38);
                            line-height: countSizeVh(38);

                            .tab-item {
                                padding: 0 countSizeVw(10, 1920);
                            }
                        }

                        .time-select {
                            .search-item-box {
                                margin: countSizeVh(10);
@@ -2102,7 +2112,7 @@
                                display: flex;

                                .tab-item {
                                    padding: 0 10px;
                                    padding: 0 countSizeVw(10, 1920);
                                    cursor: pointer;
                                }

@@ -3297,7 +3307,7 @@
                display: flex;

                .tab-item {
                    padding: 0 10px;
                    padding: 0 countSizeVw(10, 1920);
                    cursor: pointer;
                }


 src/views/antiFraudShow/index.vue

New file
@@ -0,0 +1,382 @@
<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <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>
            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <el-input size="small" placeholder="请输入(姓名、手机号、身份证号、住址)" v-model="searchKey" 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>

            <div class="list police-info" ref="tableBox">
                <el-table :data="tableData" style="width: 100%" :height="currentTableHeight"
                    :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="realName" :show-overflow-tooltip="true" label="姓名"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号"></el-table-column>
                    <el-table-column prop="cardNo" :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)"
                                @click="rowClick(scope.row)">
                                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                            </el-button>
                            <el-button type="text" size="small" title="详情" @click="goDetail(scope.row)">
                                <i class="el-icon-document"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize"
                        :total="pages.total" :pager-count="4" :current-page="pages.currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import {
    getVillagePersonInfoBySearch,
} from "@/api/dept/index.js"

let loading = null

export default {
    inject: ['userInfo'],

    data () {
        return {
            chooseTab: 1,
            searchKey: '',
            realEmptyText: "",
            currentTableHeight: 0,
            tableData: [],
            boxShow: false,
            pages: {
                total: 0,
                pageSize: 22,
                count: 0,
                currentPage: 1
            },
        }
    },

    created () {
        const that = this

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

    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.$EventBus.$emit('closeMxTileset')

            this.setTableHeight()
        })

        window.addEventListener('resize', this.setTableHeight)
    },

    computed: {
        positionColor () {
            return (row) => {
                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: {
        // 切换tab
        tabClick (curTab) {
            this.chooseTab = curTab
        },

        // 获取选中数据--暂时为测试数据
        getRowData (row) {
            let data = [
                {
                    label: '与户主关系',
                    prop: 'relation',
                    value: row.relation,
                    type: 'popup'
                },
                {
                    label: '名字',
                    prop: 'realName',
                    value: row.realName,
                    type: 'popup'
                },
                {
                    label: '身份证号',
                    prop: 'cardNo',
                    value: row.cardNo,
                    type: 'popup'
                },
                {
                    label: '人口类型',
                    prop: 'personType',
                    value: row.personType == 1 ? '户籍人口' : '实有人口',
                    type: 'popup'
                },
                {
                    label: '地址',
                    prop: 'address',
                    value: row.address,
                    type: 'popup'
                },
                {
                    label: '新地址',
                    prop: 'reAddress',
                    value: row.reAddress.replace('江西省上饶市', ''),
                    type: 'detail'
                },
                {
                    label: '审查状态',
                    prop: 'status',
                    value: row.status,
                    type: 'detail'
                },
                {
                    label: '审查时间',
                    prop: 'sctime',
                    value: row.sctime,
                    type: 'detail'
                },
                {
                    label: '社区局村委会',
                    prop: 'neightborhoood',
                    value: row.neightborhoood,
                    type: 'detail'
                },
                {
                    label: '重点人员细类',
                    prop: 'zdryxl',
                    value: row.zdryxl,
                    type: 'detail'
                }
            ]
            return data
        },

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

        // 点击定位
        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                siteJd: row.x,
                siteWd: row.y,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchAILayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: row.x,
                    lat: row.y,
                    alt: 1,
                    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.x),
                            Number(row.y),
                            0
                        )
                    )
                ]
            })
        },

        // 清空按钮-图标图层清除
        clearRow (row) {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
        },

        // 获取列表
        getList () {
            this.loading()
            let params = {
                searchKey: this.searchKey,
                size: this.pages.pageSize,
                current: this.pages.currentPage,
                deptId: JSON.parse(sessionStorage.getItem("userInfo")).dept_id
            }
            getVillagePersonInfoBySearch(params).then(res => {
                if (res.data.data.records.length > 0) {
                    res.data.data.records.forEach(item => {
                        if (item.status == 0) {
                            item.status = '未审查'
                        } else if (item.status == 1) {
                            item.status = '审查正常'
                        } else if (item.status == 2) {
                            item.status = '审查异常'
                        }
                    })
                }
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        searchBtn () {
            this.pages.currentPage = 1
            this.getList()
        },

        // 分页处理
        handleCurrentChange (currentPage) {
            this.pages.currentPage = currentPage
            this.getList()
        },


        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        setTableHeight () {
            this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },
    },

    destroyed () {
        loading && loading.close()

        window.removeEventListener('resize', this.setTableHeight)

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

        this.clearRow()
    }
}
</script>

<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    height: 100%;

    &-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: #fff;
        background: $bg-color;

        .type-tab-box {
            display: flex;

            .tab-item {
                cursor: pointer;
                width: 50%;
            }

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

.list {
    height: calc(100% - 48px);
    display: flex;
    flex-direction: column;

    .pages {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .state-box {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #adadad;
    }

    .online {
        background-color: #4ccc7d;
    }
}
</style>

 src/views/layout/index.vue

@@ -59,9 +59,15 @@
                    <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
                    <div class="userBtn">
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/antiFraudShow' ? '#fcbd56' : '#fff' }"
                            @click="goToPage('/layout/antiFraudShow')">
                            <i class="el-icon-monitor"></i>
                            反诈宣传
                        </div>
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/rentalInfo' ? '#fcbd56' : '#fff' }"
                            @click="goToPage('/layout/rentalInfo')">
                            <i class="el-icon-s-grid"></i>
                            <i class="el-icon-s-home"></i>
                            租赁信息
                        </div>
                        <div class="back-system"