警情的tooltip添加

shuishen

2023-04-17 cb33e25fdc65016cc1b577005433b9999d21a9d4

警情的tooltip添加

 src/styles/media/index.scss

@@ -1128,6 +1128,12 @@
                                }
                            }
                        }

                        .cur-tooltip {
                            padding: countSizeVh(10);
                            max-width: countSizeVw(320, 1920);
                            border-radius: countSizeVh(10);
                        }
                    }

                    .video-page {
@@ -2928,4 +2934,5 @@
        }

    }

}

 src/views/policeInfor/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-17 09:28:23
 * @LastEditTime: 2023-04-17 14:39:26
 * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
 * @Description: 辖区管理
 * 
@@ -28,10 +28,12 @@
                <el-table :data="realPoliceInforData" 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" @cell-click="siteClick">
                    :row-class-name="tableRowClassName" class="police-infor-table" @cell-click="siteClick"
                    @cell-mouse-enter="tableEnter" @cell-mouse-leave="tabelLeave">
                    <template slot="empty">
                        <div>{{ realEmptyText }}</div>
                    </template>

                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
                        min-width="80%"></el-table-column>
                    <el-table-column prop="BJSJ" label="报警时间" min-width="50%">
@@ -53,7 +55,8 @@
                <el-table :data="historyPoliceInforData" 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">
                    :row-class-name="tableRowClassName" class="police-infor-table" @cell-mouse-enter="tableEnter"
                    @cell-mouse-leave="tabelLeave">
                    <template slot="empty">
                        <div>{{ historyEmptyText }}</div>
                    </template>
@@ -204,6 +207,16 @@

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" class="box no-data">暂无警情</div>
        </el-dialog>

        <div class="cur-tooltip" v-show="currentTooltip"
            :style="{ top: currentPointerPosition.y + 'px', left: currentPointerPosition.x + 'px' }">
            <div class="type-name">
                报警内容
            </div>
            <div class="type-content">
                {{ currentBJNR }}
            </div>
        </div>
    </div>
</template>

@@ -245,6 +258,13 @@
            policeSituationVisible: false,

            CJdata: {},

            currentPointerPosition: {
                x: 0,
                y: 0
            },
            currentTooltip: false,
            currentBJNR: ''
        }
    },

@@ -260,6 +280,8 @@
        this.$EventBus.$on('PoliceInforSiteClick', (params) => {
            that.siteClick(params)
        })

        window.addEventListener("mousemove", this.tableMouse)
    },

    mounted () {
@@ -295,6 +317,21 @@
    },

    methods: {
        tableMouse (e) {
            this.currentPointerPosition = {
                x: e.clientX,
                y: e.clientY
            }
        },

        tableEnter (e) {
            this.currentBJNR = e.BJNR
            this.currentTooltip = true
        },
        tabelLeave (e) {
            console.log(e)
            this.currentTooltip = false
        },
        loading () {
            loading = this.$loading({
                lock: true,
@@ -361,121 +398,121 @@
            this.loading()
            this.realPoliceInforData = []
            this.realEmptyText = "  "
            // getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => {
            //     if (res.data && res.data.length) {
            //         this.realPoliceInforData = res.data.map((item, index) => {
            //             const bjlxText = BjlxData.filter(i => item.BJLX == i.BJLX)[0] ? BjlxData.filter(i => item.BJLX == i.BJLX)[0].VALUE : ''
            getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => {
                if (res.data && res.data.length) {
                    this.realPoliceInforData = res.data.map((item, index) => {
                        const bjlxText = BjlxData.filter(i => item.BJLX == i.BJLX)[0] ? BjlxData.filter(i => item.BJLX == i.BJLX)[0].VALUE : ''

            //             if (item.JJDWMC.indexOf('上饶市公安局') != -1) item.JJDWMC = item.JJDWMC.replace(/上饶市公安局/, '市局')
            //             if (item.JJDWMC.indexOf('信州区分局') != -1) item.JJDWMC = item.JJDWMC.replace(/信州区分局/, '')
            //             if (item.JJDWMC.indexOf('信州') != -1) item.JJDWMC = item.JJDWMC.replace(/信州/, '')
                        if (item.JJDWMC.indexOf('上饶市公安局') != -1) item.JJDWMC = item.JJDWMC.replace(/上饶市公安局/, '市局')
                        if (item.JJDWMC.indexOf('信州区分局') != -1) item.JJDWMC = item.JJDWMC.replace(/信州区分局/, '')
                        if (item.JJDWMC.indexOf('信州') != -1) item.JJDWMC = item.JJDWMC.replace(/信州/, '')

            //             return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, BJLX: bjlxText }
            //         })
            //         this.addPoliceInforSiteLayer(this.realPoliceInforData)
            //     } else {
            //         this.realPoliceInforData = []
            //         this.realEmptyText = "暂无实时警情信息"
            //     }
            //     setTimeout(() => {
            //         loading && loading.close()
            //     }, 500)
            // }).catch(res => {
            //     this.realEmptyText = "暂无实时警情信息"
            //     setTimeout(() => {
            //         loading && loading.close()
            //     }, 500)
            // })

            this.realPoliceInforData = [{
                ZDDWXZB: 117.97,
                ZDDWYZB: 28.45,
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            }]

            this.realPoliceInforData = this.realPoliceInforData.map((item, index) => {
                return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, BJLX: bjlxText }
                    })
                    this.addPoliceInforSiteLayer(this.realPoliceInforData)
                } else {
                    this.realPoliceInforData = []
                    this.realEmptyText = "暂无实时警情信息"
                }
                setTimeout(() => {
                    loading && loading.close()
                }, 500)
            }).catch(res => {
                this.realEmptyText = "暂无实时警情信息"
                setTimeout(() => {
                    loading && loading.close()
                }, 500)
            })

            this.addPoliceInforSiteLayer(this.realPoliceInforData)
            // this.realPoliceInforData = [{
            //     ZDDWXZB: 117.97,
            //     ZDDWYZB: 28.45,
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // }]

            setTimeout(() => {
                loading && loading.close()
            }, 500)
            // this.realPoliceInforData = this.realPoliceInforData.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })

            // this.addPoliceInforSiteLayer(this.realPoliceInforData)

            // setTimeout(() => {
            //     loading && loading.close()
            // }, 500)
        },

        // 获取历史接警记录(不分页)
@@ -825,5 +862,21 @@
            padding: 5px;
        }
    }

    .cur-tooltip {
        padding: 10px;
        position: fixed;
        top: 0;
        left: 0;

        max-width: 320px;

        transform: translate(2%, -50%);
        z-index: 9999;

        color: #fff;
        background: rgba(35, 50, 167, 0.7);
        border-radius: 10px;
    }
}
</style>