新增扫码报警列表展示

zhongrj

2024-03-19 e533d1240b032881a442ebe98165cb148fb770f6

新增扫码报警列表展示

 src/api/policeAlarmRecordsManage/index.js

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

/**
 * 获取从业人员列表
 * @returns
 */
export const getList = (params) => {
    return request({
        url: "/api/blade-policeAlarmRecords/policeAlarmRecords/page",
        method: "get",
        params
    })
}

/**
 * 获取从业人员有前科数量
 * @returns
 */
export const getCountByType = (params) => {
    return request({
        url: "/api/blade-policeAlarmRecords/policeAlarmRecords/countByType",
        method: "get",
        params
    })
}

/**
 * 获取从业人员详情
 * @returns
 */
export const getDetail = (params) => {
    return request({
        url: "/api/blade-policeAlarmRecords/policeAlarmRecords/getDetail",
        method: "get",
        params
    })
}

/**
 * 获取证件类型字典
 * @returns
 */
export const getApplyAlarmType = () => {
    return request({
        url: "/api/blade-system/dict-biz/tree?code=applyAlarmType",
        method: "get",
    })
}

 src/components/policeDetail/index.vue

New file
@@ -0,0 +1,166 @@
<template>
    <el-dialog class="syld-details-box prm-dialog-popup business-detail-box" :title="'扫码报警详情'" append-to-body
        :close-on-click-modal="false" :visible.sync="popupShow" center @close="popupClose">
        <div class="all-box">
            <div class="item-box">
                <div class="label">报警人姓名：</div>
                <div class="value">{{ rowDetail.name }}</div>
            </div>
            <div class="item-box">
                <div class="label">报警人电话：</div>
                <div class="value">{{ rowDetail.phone }}</div>
            </div>
            <div class="item-box">
                <div class="label">报警人性别：</div>
                <div class="value">{{ rowDetail.gender == 1 ? '男' : '女' }}</div>
            </div>
            <div class="item-box">
                <div class="label">报警时间：</div>
                <div class="value">{{ rowDetail.createTime }}</div>
            </div>
            <div class="item-box">
                <div class="label">报警位置：</div>
                <div class="value">{{ rowDetail.address }}</div>
            </div>
            <div class="item-box">
                <div class="label">报警内容：</div>
                <div class="value">{{ rowDetail.alarmDescribe }}</div>
            </div>
            <div class="item-box">
                <div class="label">报警类型：</div>
                <div class="value">{{ rowDetail.alarmTypeName}}</div>
            </div>
            <div class="item-box">
                <div class="label">是否有人受伤：</div>
                <div class="value">{{ rowDetail.injuryFlag == 1 ? '是' : '否' }}</div>
            </div>
            <div class="item-box">
                <div class="label">接警人姓名：</div>
                <div class="value">{{ rowDetail.policeName }}</div>
            </div>
            <div class="item-box">
                <div class="label">接警人姓名电话：</div>
                <div class="value">{{ rowDetail.policePhone }}</div>
            </div>
            <div class="item-box">
                <div class="label">接警时间：</div>
                <div class="value">{{ rowDetail.alarmResponseTime }}</div>
            </div>
            <div class="item-box">
                <div class="label">接警人单位：</div>
                <div class="value">{{ rowDetail.pcsName }}</div>
            </div>
            <div class="item-box">
                <div class="label">处置状态：</div>
                <div class="value">{{ rowDetail.status == 1 ? '待处置' : '已处置' }}</div>
            </div>
            <!-- <div class="item-box">
                <div class="label">从业人员照片：</div>
                <div class="value">
                    <el-image
                        :style="{ width: rowDetail.employerImg != '' ? '100px' : '', height: rowDetail.employerImg != '' ? '100px' : '' }"
                        :src="rowDetail.employerImg" :preview-src-list="rowDetail.employerImg">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i> 暂无图片
                        </div>
                    </el-image>
                </div>
            </div>
            <div class="item-box">
                <div class="label">前科类型：</div>
                <div class="value">{{ rowDetail.anoTypeName }}</div>
            </div> -->
        </div>
    </el-dialog>
</template>

<script>
// import { getDetail, getCardType } from "@/api/practitionersManage/index.js"

export default {
    name: 'PoliceDetailPopup',

    data () {
        return {
            popupShow: false,
            rowDetail: {},
            cardTypeOptions: []
        }
    },

    created () {
    },

    methods: {
        // 打开弹窗初始化数据
        initOpen (row) {
            this.popupShow = true
            this.rowDetail = row;
            // getDetail({ id: row.id }).then(res => {
            //     let data = res.data.data
            //     data.employerImg = this.getImgUrls(data.employerImg)
            //     this.cardTypeOptions.forEach(item => {
            //         if (item.key == data.cardType) {
            //             data.cardType = item.title
            //         }
            //     })
            //     this.rowDetail = data
            // })
        },

        // 关闭弹窗按钮
        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 || []
        },
    },
}
</script>

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

.flex {
    display: flex;
}

.f-d-c {
    flex-direction: column;
}

.flex-1 {
    height: 0;
    flex: 1;
}

.all-box {
    display: flex;
    flex-wrap: wrap;

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


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

 src/router/page/index.js

@@ -22,6 +22,7 @@
const scanOrCode = () => import("../../views/scanOrCode/index.vue")
const positionManage = () => import("../../views/positionManage/index.vue")
const practitionersManage = () => import("../../views/practitionersManage/index.vue")
const policeAlarmRecordsManage = () => import("../../views/policeAlarmRecordsManage/index.vue")
const intelligentSearch = () =>
    import("../../views/intelligentSearch/index.vue")

@@ -143,6 +144,13 @@
                },
                component: practitionersManage,
            },
            {
                path: "policeAlarmRecordsManage",
                meta: {
                    title: "扫码警单",
                },
                component: policeAlarmRecordsManage,
            },
        ],
    },
    // {

 src/views/layout/index.vue

@@ -70,6 +70,12 @@
                            <i class="el-icon-s-custom"></i>
                            从业人员
                        </div>
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/policeAlarmRecordsManage' ? '#fcbd56' : '#fff' }"
                            @click="goToSMBJ">
                            <i class="el-icon-full-screen"></i>
                            扫码报警
                        </div>
                        <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
                            <i class="el-icon-user-back"></i>
                            运维管理
@@ -376,6 +382,11 @@
            this.$router.push('/layout/practitionersManage')
        },

        // 跳转扫码报警
        goToSMBJ () {
            this.$router.push('/layout/policeAlarmRecordsManage')
        },

        /**
         * @description: 跳转运维管理平台
         * @return {*}

 src/views/policeAlarmRecordsManage/index.vue

New file
@@ -0,0 +1,315 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-08 17:51:12
 * @FilePath: \srs-police-affairs\src\views\site\index.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
    <div class="site-page-home police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">

            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <span>报警类型：</span>

                    <el-select clearable style="flex: 1;" size="small" v-model="typeValue" @change="typeChange"
                        placeholder="请选择报警类型">
                        <el-option v-for="item in typeOptions" :key="item.key" :label="item.title"
                            :value="item.key"></el-option>
                    </el-select>
                </div>

                <div class="search-item-box">
                    <span>报警内容：</span>

                    <el-input style="flex: 1;" size="small" placeholder="请输入 报警内容" v-model="alarmDescribe"
                        @change="searchChange" clearable></el-input>
                </div>

                <div class="search-item-box" style="justify-content: center;">
                    <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%"
                    :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="pcsName" :show-overflow-tooltip="true" label="接警单位"></el-table-column>
                    <el-table-column prop="createTime" :show-overflow-tooltip="true" label="报警时间"></el-table-column>
                    <el-table-column prop="alarmTypeName" :show-overflow-tooltip="true" label="报警类型"></el-table-column>
                    <el-table-column width="80" 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>
                        </template>
                    </el-table-column>
                </el-table>

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

        </div>

        <PoliceDetailPopup ref="PoliceDetailPopup"></PoliceDetailPopup>
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import { getList,getApplyAlarmType } from "@/api/policeAlarmRecordsManage/index.js"

let loading = null

export default {
    inject: ['userInfo'],

    data () {
        return {
            boxShow: false,
            alarmDescribe: '',
            typeValue: '',
            tableData: [],
            typeOptions: [],
            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
            scycNum: 0,
            criminalRecordFlag: '',
        }
    },

    created () {
        this.getApplyAlarmType()
        this.onLoad()
        const that = this

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

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

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

    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: {
        // 切换登记类型
        typeChange () {
            this.pages.current = 1
            this.onLoad()
        },

        // 搜索条件改变
        searchChange () {
            if (this.keyword.trim() == '') {
                this.pages.current = 1
                this.onLoad()
            }
        },

        // 点击搜索
        searchBtn () {
            this.pages.current = 1
            this.onLoad()
        },

        // 重置搜索
        resetSearch () {
            this.pages.current = 1
            this.alarmDescribe = ''
            this.typeValue = ''
            this.onLoad()
        },

        // 分页处理
        handleCurrentChange (current) {
            this.pages.current = current
            this.onLoad()
        },

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

        // 获取列表数据
        onLoad () {
            this.loading()

            getList({
                current: this.pages.current,
                size: this.pages.size,
                alarmDescribe: this.alarmDescribe,
                alarmType: this.typeValue
            }).then(res => {
                const data = res.data.data
                this.tableData = data.records
                this.pages.total = data.total

                // 字典读取
                data.records.forEach(element => {
                    this.typeOptions.forEach(item => {
                        if (item.key == element.alarmType) {
                            element.alarmTypeName = item.title
                        }
                    })
                })

                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 点击定位
        rowClick (row) {
            let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
            let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 2000
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'scanLayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    size: [25.8, 32.4],
                    url: `/img/icon/site.png`,
                },
                incident: this.siteClick
            })

            this.$refs.PoliceDetailPopup.initOpen(row)
        },

        // 点击图标
        siteClick (e) {
            this.$refs.PoliceDetailPopup.initOpen(e.overlay.attrParams)
        },

        getApplyAlarmType () {
            getApplyAlarmType().then(res => {
                this.typeOptions = res.data.data
            })
        },

        // 清空按钮-清除图标图层
        clearRow () {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
            this.resetSearch()//重置列表
        },

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

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

        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;
    }
}

.list {
    display: flex;
    flex-direction: column;

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

.isOneClick {
    color: #fcbd56 !important;
}
</style>