矛盾纠纷事件展示页面搭建和接口对接

guanqb

2024-03-27 dced08fda55b1d0ffdf96974eb710c5a0d5b80d6

矛盾纠纷事件展示页面搭建和接口对接

 src/api/contradictionEventShow/index.js

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

/**
 * 获得矛盾纠纷列表
 * @param {*} params
 * @returns
 */
export const getDisputeRecordList = (params) => {
    return request({
        url: "/api/blade-disputeRecord/disputeRecord/page",
        method: "get",
        meta: {
            isToken: true,
        },
        params: params,
    })
}

 src/router/page/index.js

@@ -22,6 +22,7 @@
const scanOrCode = () => import("../../views/scanOrCode/index.vue")
const rentalInfo = () => import("../../views/rentalInfo/index.vue")
const antiFraudShow = () => import("../../views/antiFraudShow/index.vue")
const contradictionEventShow = () => import("../../views/contradictionEventShow/index.vue")
const positionManage = () => import("../../views/positionManage/index.vue")
const practitionersManage = () => import("../../views/practitionersManage/index.vue")
const policeAlarmRecordsManage = () => import("../../views/policeAlarmRecordsManage/index.vue")
@@ -156,11 +157,18 @@
            {
                path: "antiFraudShow",
                meta: {
                    title: "租赁信息",
                    title: "反诈宣传",
                },
                component: antiFraudShow,
            },
            {
                path: "contradictionEventShow",
                meta: {
                    title: "矛盾纠纷",
                },
                component: contradictionEventShow,
            },
            {
                path: "policeAlarmRecordsManage",
                meta: {
                    title: "扫码警单",

 src/views/contradictionEventShow/components/detailDialog.vue

New file
@@ -0,0 +1,128 @@
<template>
    <el-dialog class="syld-details-box prm-dialog-popup business-detail-box" :title="title" append-to-body
        :close-on-click-modal="false" :visible.sync="popupShow" center @close="popupClose">
        <div class="all-box">
            <div class="type-tab-box" v-if="tabList.length != 0">
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == order }" @click="tabClick(order)"
                    v-for="(part, order) in tabList" :key="order">
                    {{ part }}</div>
            </div>
            <div class="content" v-show="chooseTab == 0">
                <div class="item-box" v-for="(item, index) in lableList" :key="index">
                    <div class="label">{{ item.label }}：</div>
                    <div class="value" v-if="item.isPic != true">{{ item.value }}</div>
                    <div class="value" v-if="item.isPic == true">
                        <el-image
                            :style="{ width: item.value != '' ? '100px' : '', height: item.value != '' ? '100px' : '' }"
                            :src="getImgUrls(item.value)" :preview-src-list="getImgUrls(item.value)">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i> 暂无图片
                            </div>
                        </el-image>
                    </div>
                </div>
            </div>
            <div class="content" v-show="chooseTab == 1">
                <el-table :data="tableData" style="width: 100%"
                    :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="name" :show-overflow-tooltip="true" label="名称"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="phoneNumber" :show-overflow-tooltip="true" label="手机号"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="employer" :show-overflow-tooltip="true" label="工作单位"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="confirmFlag" :show-overflow-tooltip="true" label="审核状态" :key="Math.random()">
                        <template slot-scope="scope">
                            <div>{{ scope.row.confirmFlag == 1 ? '待确认' : '已确认' }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-dialog>
</template>

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

    data () {
        return {
            title: '',
            popupShow: false,
            lableList: [],
            chooseTab: 0,
            tabList: [],
            tableData: []
        }
    },

    methods: {
        // 打开弹窗初始化数据
        initOpen (row, title, tabList, tableData) {
            this.chooseTab = 0
            this.popupShow = true
            this.lableList = row
            this.title = title
            this.tabList = tabList
            this.tableData = tableData
        },

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

        // 图片转换
        getImgUrls (imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    return 'http://10.141.11.11/place/' + ele
                    // return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },

        // tab切换
        tabClick (type) {
            this.chooseTab = type
        },
    },
}
</script>

<style lang="scss" scoped>
:deep(.el-image__error) {
    height: 120px;
}

.all-box {
    display: flex;
    flex-direction: column;

    .content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;

        .item-box {
            width: 50%;
            display: flex;
            margin-bottom: 20px;


            .label {
                min-width: 120px;
                text-align: right;
                padding-right: 10px;
            }
        }
    }

}
</style>

 src/views/contradictionEventShow/index.vue

New file
@@ -0,0 +1,339 @@
<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <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="resetBtn" 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="address" :show-overflow-tooltip="true" label="事发地址"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="事发时间"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="disputeContent" :show-overflow-tooltip="true" label="纠纷内容"
                        :key="Math.random()"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <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>
        <detailDialog ref="detailDialog" />
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import {
    getDisputeRecordList
} from "@/api/contradictionEventShow/index.js"
import { getDictionaryListByCode } from "@/api/rentalInfo/index.js"

import detailDialog from './components/detailDialog.vue'

let loading = null

export default {
    inject: ['userInfo'],

    components: { detailDialog },

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

    created () {
        const that = this

        that.$nextTick(() => {
            initMapPosition()
            that.getDictionaryListByCode()
            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: {
        // 获取字典列表
        getDictionaryListByCode () {
            getDictionaryListByCode('disputeType').then(res => {
                this.disputeTypeList = res.data.data
            })
            getDictionaryListByCode('disputeSource').then(res => {
                this.disputeSourceList = res.data.data
            })
        },

        // 点击详情
        goDetail (row) {
            let detailList = []
            let title = '矛盾纠纷事件详情'

            detailList = [
                {
                    label: '事发地址',
                    value: row.address
                },
                {
                    label: '事发时间',
                    value: row.eventTime
                },
                {
                    label: '纠纷内容',
                    value: row.disputeContent,
                },
                {
                    label: '纠纷类型',
                    value: this.disputeTypeList.find(i => i.dictKey == row.disputeType).dictValue
                },
                {
                    label: '是否受伤',
                    value: row.injuryFlag == 1 ? '是' : '否'
                },
                {
                    label: '报警次数',
                    value: row.alarmNum
                },
                {
                    label: '信息来源',
                    value: this.disputeSourceList.find(i => i.dictKey == row.source).dictValue
                },
                {
                    label: '纠纷人1姓名',
                    value: row.nameOne
                },
                {
                    label: '纠纷人1电话',
                    value: row.phoneOne
                },
                {
                    label: '纠纷人1身份证号',
                    value: row.idCardOne
                },
                {
                    label: '纠纷人2姓名',
                    value: row.nameTwo
                },
                {
                    label: '纠纷人2电话',
                    value: row.phoneTwo
                },
                {
                    label: '纠纷人2身份证号',
                    value: row.idCardTwo
                },
                {
                    label: '地区',
                    value: row.townName
                },
                {
                    label: '辖区派出所',
                    value: row.pcsName
                },
                {
                    label: '处理结果',
                    value: row.handleResult == 1 ? '已化解' : row.handleResult == 2 ? '未化解' : row.handleResult == 3 ? '移送e呼即办' : ''
                }
            ]

            this.$refs.detailDialog.initOpen(detailList, title, [], [])
        },

        // 获取列表
        getList () {
            this.loading()
            let params = {
                searchKey: this.searchKey,
                size: this.pages.pageSize,
                current: this.pages.currentPage
            }

            this.getDisputeRecordList(params)
        },

        // 矛盾纠纷列表
        getDisputeRecordList (params) {
            getDisputeRecordList(params).then(res => {
                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()
        },

        // 清空按钮
        resetBtn () {
            this.searchKey = ''
            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')
    }
}
</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,6 +59,12 @@
                    <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
                    <div class="userBtn">
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/contradictionEventShow' ? '#fcbd56' : '#fff' }"
                            @click="goToPage('/layout/contradictionEventShow')">
                            <i class="el-icon-phone-outline"></i>
                            矛盾纠纷
                        </div>
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/antiFraudShow' ? '#fcbd56' : '#fff' }"
                            @click="goToPage('/layout/antiFraudShow')">
                            <i class="el-icon-monitor"></i>