警情动态样式调整为翻页效果

zhongrj

2023-04-03 50395a86170f5990d9533fb7de1d9d1236e3a184

警情动态样式调整为翻页效果

 src/views/home/components/bottomContainer.vue

@@ -47,7 +47,7 @@
                        <span class="receiving-alarm-people">接待警员</span>
                        <span class="receiving-alarm-time">报警时间</span>
                        <span class="call-people">报警人</span>
                        <span class="call-phone">联系电话</span>
                    <span class="call-phone">联系电话</span>
                        <span class="call-police-content">报警内容</span>
                        <span class="incident-site">事发地址</span>
                        <span class="call-police-type">报警类型</span>
@@ -56,26 +56,34 @@
                    </li>
                </ul>

                <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr"
                    class="warp" :class-option="classOption">
                    <ul class="item">
                        <li v-for="(item, index) in policeSituationRealtimeArr" :key="index"
                            :data-obj="JSON.stringify(item)" class="row">
                            <span class="num" v-text="item.index"></span>
                            <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
                            <span class="receiving-alarm-people" v-text="item.JJYXM"></span>
                            <span class="receiving-alarm-time" :title="item.BJSJ"
                                v-text="item.BJSJ.substring(0, 10)"></span>
                            <span class="call-people" v-text="item.BJRXM"></span>
                            <span class="call-phone" v-text="item.LXDH"></span>
                            <span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
                            <span class="incident-site" :title="item.SFDZ" v-text="item.SFDZ"></span>
                            <span class="call-police-type" v-text="item.BJLX"></span>
                            <span class="have-position" v-text="item.position"></span>
                            <span class="alarm-bz" v-text="item.MEMO"></span>
                        </li>
                    </ul>
                </vue-seamless-scroll>
                <!-- <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr"
                            class="warp" :class-option="classOption"> -->
                <div v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr" class="warp"
                    :class-option="classOption">
                    <el-carousel indicator-position="none" direction="vertical" @change="changeAlarm">
                        <el-carousel-item v-for="item in alarmPageCount" :key="item">
                            <ul class="item">
                                <li v-for="(item, index) in policeSituationRealtimeArr" :key="index"
                                    :data-obj="JSON.stringify(item)" class="row">
                                    <span class="num" v-text="item.index"></span>
                                    <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
                                    <span class="receiving-alarm-people" v-text="item.JJYXM"></span>
                                    <span class="receiving-alarm-time" :title="item.BJSJ"
                                        v-text="item.BJSJ.substring(0, 10)"></span>
                                    <span class="call-people" v-text="item.BJRXM"></span>
                                    <span class="call-phone" v-text="item.LXDH"></span>
                                    <span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
                                    <span class="incident-site" :title="item.SFDZ" v-text="item.SFDZ"></span>
                                    <span class="call-police-type" v-text="item.BJLX"></span>
                                    <span class="have-position" v-text="item.position"></span>
                                    <span class="alarm-bz" v-text="item.MEMO"></span>
                                </li>
                            </ul>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <!-- </vue-seamless-scroll> -->

                <div class="warp no-data" v-else>暂无数据</div>
            </div>
@@ -145,18 +153,21 @@
<script>
let alarmTiming = null

import vueSeamlessScroll from 'vue-seamless-scroll'
// import vueSeamlessScroll from 'vue-seamless-scroll'

import { getAnswerPolices, getAlarmList } from "@/api/home/index.js"

export default {
    inject: ["getWidth", 'userInfo'],

    data () {
    data() {
        return {
            alarmPageCount: 1,
            alarmPageSize: 6,
            timetype: 2,
            historytype: 0,
            // 实时
            policeSituationRealtimeAllArr: [],
            policeSituationRealtimeArr: [],
            // 历史
            policeSituationHistoryArr: [],
@@ -171,7 +182,7 @@
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
@@ -179,7 +190,7 @@
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
@@ -187,7 +198,7 @@
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
@@ -208,11 +219,11 @@
        }
    },

    components: {
        vueSeamlessScroll
    },
    // components: {
    //     vueSeamlessScroll
    // },

    created () {
    created() {
        this.getHomeAllData()

        this.defaultDate()
@@ -220,7 +231,7 @@
        // disabledDate 为true表示不可选,false表示可选
        this.pickerOptions = {
            ...this.pickerOptions,
            disabledDate (time) {
            disabledDate(time) {
                // 设置可选择的日期为今天之后的一个月内
                let curDate = (new Date()).getTime()
                return time.getTime() > curDate
@@ -230,7 +241,7 @@
        window.addEventListener('resize', this.setTableHeight)
    },

    mounted () {
    mounted() {
        if (this.getWidth() > 7000) {
            this.classOption.step = 8
        }
@@ -241,14 +252,14 @@
         * @description: 获取当前组件内所有数据
         * @return {*}
         */
        getHomeAllData (id = '') {
        getHomeAllData(id = '') {
            this.policeStaionID = id

            this.historyTabClick(0)
        },

        // 获取table高度
        setTableHeight () {
        setTableHeight() {
            this.$nextTick(() => {
                if (this.$refs.ElTableBox && this.$refs.ElPagination) {
                    this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
@@ -257,7 +268,7 @@
        },

        // table行点击事件
        rowClick (row) {
        rowClick(row) {
            this.policeSituationClick(row)
        },

@@ -284,9 +295,10 @@
            }

        },
        

        // 设置默认时间
        defaultDate () {
        defaultDate() {
            var current = new Date()

            var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
@@ -295,7 +307,7 @@
        },

        // 时间改变事件
        datePickerChange (e) {
        datePickerChange(e) {
            // this.timetype
            this.currentPage = 1

@@ -319,7 +331,7 @@
        },

        // 获取当前日期
        dateFormat (dateData) {
        dateFormat(dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
@@ -330,23 +342,36 @@
            return time
        },

        //  走马灯改变事件
        changeAlarm(index){
            index = index+1 ;
            // 改变数据
            this.alarmDataHanlder(index);
        },

        // 获取实时接警记录
        getAnswerPolices () {
        getAnswerPolices() {

            getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.policeSituationRealtimeArr = []

                if (res.data && res.data.length) {
                    this.policeSituationRealtimeArr = res.data.map((item, index) => {
                     // 计算页数
                    this.alarmPageCount = Math.ceil(res.data.length/this.alarmPageSize)
                    this.policeSituationRealtimeAllArr = res.data.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB && item.ZDDWYZB != 0 ? '有' : '无' }
                    })
                    // 数据处理
                    this.alarmDataHanlder(1);
                } else {
                    this.alarmPageCount = 1;
                    this.policeSituationRealtimeArr = []
                }

                
                this.$emit('policeSituationChange')
            })

            // this.policeSituationRealtimeArr = [{
            // var arr = [{
            //     ZDDWXZB: 117.97,
            //     ZDDWYZB: 28.45,
            //     JJDWMC: '信州公安局派出所',
@@ -409,8 +434,8 @@
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
@@ -420,21 +445,44 @@
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // }]

            // this.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => {
            // // 计算页数
            // this.alarmPageCount = Math.ceil(arr.length/this.alarmPageSize)

            // // 加 index 序号
            // this.policeSituationRealtimeAllArr = arr.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB ? '有' : '无' }
            // })

            
            // // 数据处理
            // this.alarmDataHanlder(1);
            // this.$emit('policeSituationChange')
        },

        /**
         * 实时警情数据处理（滚动）
         * @param {*} index 
         */
        alarmDataHanlder(index){
            this.policeSituationRealtimeArr = []
            //计算序号
            var start =  (index-1)*this.alarmPageSize
            var end =  index*this.alarmPageSize
            // 获取第 index 页数据
            this.policeSituationRealtimeAllArr.forEach((item, index) => {
                if(index<Number(end) && index>=Number(start)){
                    this.policeSituationRealtimeArr.push(item)
                }
            })
        },

        // 获取历史接警记录
        getAlarmList (params) {
        getAlarmList(params) {
            getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.pagesCount = res.data.data.pages

@@ -541,7 +589,7 @@
        },

        // 周月选择
        timeTabClick (type) {
        timeTabClick(type) {
            this.timetype = type

            this.currentPage = 1
@@ -568,7 +616,7 @@
        },

        // 实时历史选择
        async historyTabClick (type) {
        async historyTabClick(type) {
            console.log('historyTabClick')
            this.historytype = type

@@ -603,16 +651,16 @@

        },

        chooseRealData () {
        chooseRealData() {
            return this.policeSituationRealtimeArr
        },

        chooseTimeDate () {
        chooseTimeDate() {
            return this.policeSituationHistoryArr
        },

        // 列表行选择
        handleSelectClick (e) {
        handleSelectClick(e) {
            let element
            for (let i = 0; i < e.path.length; i++) {
                if (e.path[i].className == "row") {
@@ -627,7 +675,7 @@
        },

        // 点击定位或者显示弹窗
        policeSituationClick (item) {
        policeSituationClick(item) {
            if (item.ZDDWXZB && item.ZDDWXZB != 0 && item.ZDDWYZB && item.ZDDWYZB != 0) {
                this.$EventBus.$emit('toPosition', {
                    layerName: 'policeSituationyLayers',
@@ -660,7 +708,7 @@
        }
    },

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

        if (alarmTiming != null) {