警力资源新增手台，警车弹窗信息

zrj

2024-06-22 72f7d9564c19bc20aa240a227a9b00c64761a309

警力资源新增手台，警车弹窗信息

 src/api/equipment/policeCarEquipment.js

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

let equipmentNum = ''

if (process.env.NODE_ENV == 'development') {
    // 开发
    equipmentNum = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_EQUIPMENT
} else {
    // 部署
    equipmentNum = window.BASE_URL_CONFIG.VUE_APP_INTRANET_EQUIPMENT
}

// 获取手台详情数据 
export const getDetail = (params) => {
    return request({
        url: `/api/policeCarEquipment/policeCarEquipment/getDetail`,
        method: 'get',
        params: params
    })
}

 src/api/equipment/talkBackEquipment.js

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

let equipmentNum = ''

if (process.env.NODE_ENV == 'development') {
    // 开发
    equipmentNum = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_EQUIPMENT
} else {
    // 部署
    equipmentNum = window.BASE_URL_CONFIG.VUE_APP_INTRANET_EQUIPMENT
}

// 获取手台详情数据 
export const getDetail = (params) => {
    return request({
        url: `/api/talkBackEquipment/talkBackEquipment/getDetail`,
        method: 'get',
        params: params
    })
}

 src/views/police/components/policeCarDetailDialog.vue

New file
@@ -0,0 +1,167 @@
<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" v-loading="loading">
            <div class="flex-1 tab-content-box">
                <div class="info-list">
                    <div class="info-item">
                        <div class="name">
                            警车车牌名称：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.policeCarEquipmentInfo.useName }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            单位名称：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.policeCarEquipmentInfo.deptName }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            警车编号：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.terminalNumber }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            状态：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.status==0?'离线':'在线' }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            经度：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.longitude }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            纬度：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.latitude }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            管理员姓名：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.policeCarEquipmentInfo.adminName }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            手机号：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.policeCarEquipmentInfo.phone }}
                        </div>
                    </div>
                    <!-- <div class="info-item">
                        <div class="name">
                            速度：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.speed }}
                        </div>
                    </div> -->
                    <div class="info-item">
                        <div class="name">
                            最新定位时间：
                        </div>
                        <div class="value">
                            {{ policeCarDetail.updateTime }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>

import {getDetail} from '@/api/equipment/policeCarEquipment';
export default {
    name: 'detailDialog',

    data () {
        return {
            title: '警车详情信息',
            popupShow: false,
            lableList: [],
            chooseTab: 0,
            tabList: [],
            tableData: [],
            loading:false,
            policeCarDetail:{}
        }
    },

    methods: {
        // 打开弹窗初始化数据
        initOpen (id) {
            this.chooseTab = 0
            this.popupShow = true
            this.getDetail(id)
        },

        // 关闭弹窗按钮
        popupClose () {
            this.popupShow = false
        },
        getDetail(id){
            this.loading = true
            const param = {
                id: id
            }
            getDetail(param).then(res=>{
                this.policeCarDetail = res.data.data;
                this.loading =false
            })
        },
    },
}
</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/police/components/talkEquipmentDetailDialog.vue

New file
@@ -0,0 +1,168 @@
<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" v-loading="loading">
            <div class="flex-1 tab-content-box">
                <div class="info-list">
                    <div class="info-item">
                        <div class="name">
                            设备名称：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.talkBackEquipmentInfo.name }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            单位名称：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.talkBackEquipmentInfo.unitName }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            设备编号：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.terminalNumber }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            状态：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.status==0?'离线':'在线' }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            经度：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.longitude }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            纬度：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.latitude }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            民警姓名：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.talkBackEquipmentInfo.policeName }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            民警手机号：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.talkBackEquipmentInfo.policePhone }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            民警编号：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.talkBackEquipmentInfo.policeCode }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            最新定位时间：
                        </div>
                        <div class="value">
                            {{ talkEquipmentDetail.updateTime }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>

import {getDetail} from '@/api/equipment/talkBackEquipment';
export default {
    name: 'detailDialog',

    data () {
        return {
            title: '手台详情信息',
            popupShow: false,
            lableList: [],
            chooseTab: 0,
            tabList: [],
            tableData: [],
            loading:false,
            talkEquipmentDetail:{}
        }
    },

    methods: {
        // 打开弹窗初始化数据
        initOpen (id) {
            this.chooseTab = 0
            this.popupShow = true
            this.getDetail(id)
        },

        // 关闭弹窗按钮
        popupClose () {
            this.popupShow = false
        },
        getDetail(id){
            this.loading = true
            const param = {
                id: id
            }
            getDetail(param).then(res=>{
                this.talkEquipmentDetail = res.data.data;
                console.log(this.talkEquipmentDetail,999)
                this.loading =false
            })
        },
    },
}
</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/police/index.vue

@@ -133,6 +133,8 @@
            <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>
        <policeCarDetailDialog ref="policeCarDetailDialog"/>
        <talkEquipmentDetailDialog ref="talkEquipmentDetailDialog"/>
    </div>
</template>

@@ -150,7 +152,15 @@
let policeTimeOut = null

import { initMapPosition } from '@/utils/mapPositionInit'
import policeCarDetailDialog from './components/policeCarDetailDialog.vue'
import talkEquipmentDetailDialog from './components/talkEquipmentDetailDialog.vue'


export default {
    components:{
        policeCarDetailDialog,
        talkEquipmentDetailDialog
    },
    inject: ['userInfo'],

    data () {
@@ -601,10 +611,12 @@
        // 点击查看手台信息
        siteClickTalk(e){
            // console.log(e.overlay.attrParams,88888)
            this.$refs.talkEquipmentDetailDialog.initOpen(e.overlay.attrParams.id)
        },
        // 点击查看警车信息
        siteClickCar(e){
            console.log(e)
            // console.log(e)
            this.$refs.policeCarDetailDialog.initOpen(e.overlay.attrParams.id)
        },

        dialogBeforeClose () {