首页相关更改

shuishen

2023-01-07 d0e3b27db01795b76dd6b68beef0bfe1cdc599e6

首页相关更改

 src/api/home/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-12-27 14:19:19
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-06 16:30:13
 * @LastEditTime: 2023-01-07 15:29:58
 * @FilePath: \srs-police-affairs\src\api\home\index.js
 * @Description: 
 * 
@@ -70,4 +70,17 @@
            cjdwbh
        }
    })
}

// 案件统计接口查询
export const getCaseAll = (start, end, jjdwbh = '') => {
    return request({
        url: `/api/alarm/alarm/statisticsAlarm`,
        method: 'get',
        params: {
            start,
            end,
            jjdwbh
        }
    })
}

 src/components/map/components/mapPopup.vue

@@ -157,7 +157,7 @@

            this.CJdata = {}
            getActAsPoliceList(this.dataPopup.JJDBH, '').then(res => {
                this.CJdata = res.data.data.records
                this.CJdata = res.data.data.records[0]
            })
        },


 src/views/home/components/bottomContainer.vue

@@ -12,12 +12,13 @@
                        start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->


                    <el-date-picker @change="datePickerChange" v-show="timetype == 0" v-model="currentWeekTime"
                        type="week" format="yyyy 第 WW 周" :picker-options="pickerOptions" placeholder="选择周">
                    <el-date-picker :clearable="false" @change="datePickerChange" v-show="timetype == 0"
                        v-model="currentWeekTime" type="week" format="yyyy 第 WW 周" :picker-options="pickerOptions"
                        placeholder="选择周">
                    </el-date-picker>

                    <el-date-picker @change="datePickerChange" v-show="timetype == 1" v-model="currentMonthTime"
                        type="month" :picker-options="pickerOptions" placeholder="选择月">
                    <el-date-picker :clearable="false" @change="datePickerChange" v-show="timetype == 1"
                        v-model="currentMonthTime" type="month" :picker-options="pickerOptions" placeholder="选择月">
                    </el-date-picker>
                </div>
                <div class="history-tab">
@@ -161,7 +162,6 @@
                let curDate = (new Date()).getTime()
                return time.getTime() > curDate
            }

        }
    },

@@ -194,95 +194,95 @@

        // 获取实时接警记录
        getAnswerPolices () {
            // getAnswerPolices().then(res => {
            //     this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
            //         return { ...item, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            //     })
            // })

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

            this.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => {
                return { ...item, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            getAnswerPolices().then(res => {
                this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
                    return { ...item, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                })
            })

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

            // this.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => {
            //     return { ...item, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })
        },

        // 获取历史接警记录

 src/views/home/components/rightContainer.vue

@@ -32,9 +32,9 @@
                <div class="title">
                    案件统计
                    <div class="timer">
                        <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            :picker-options="pickerOptions"></el-date-picker>
                        <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right"
                            unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            @change="caseTimeChange" :picker-options="pickerOptions"></el-date-picker>
                    </div>
                </div>
                <div id="EventChangeEcharts" class="echarts-box"></div>
@@ -112,6 +112,7 @@
import recorderArr from '@/assets/data/equimentsDate/recorder.js'
import { getSchedulingList } from '@/api/home/index.js'
import { fontSize } from '@/utils/fontSize.js'
import { getCaseAll } from "@/api/home/index.js"


const timeEvents = []
@@ -119,7 +120,7 @@
export default {
    data () {
        return {
            eventTime: '',
            eventTime: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
@@ -164,6 +165,17 @@
        }
    },
    created () {
        this.pickerOptions = {
            ...this.pickerOptions,
            disabledDate (time) {
                // 设置可选择的日期为今天之后的一个月内
                let curDate = (new Date()).getTime()
                return time.getTime() > curDate
            }
        }

        this.defaultDate()

        this.workingSaveArr = this.workingSaveArr.concat(this.getEquimentChartStateData(phoneArr).workingArr).concat(this.getEquimentChartStateData(carArr).workingArr).concat(this.getEquimentChartStateData(recorderArr).workingArr)
        this.faultSaveArr = this.faultSaveArr.concat(this.getEquimentChartStateData(phoneArr).faultArr).concat(this.getEquimentChartStateData(carArr).faultArr).concat(this.getEquimentChartStateData(recorderArr).faultArr)
        this.getSchedulingList()
@@ -216,7 +228,6 @@
                    trigger: 'item',
                    confine: true,
                    formatter: function (params) {
                        console.log(params, 555)
                        let tipHtml = ``
                        if ('carCount' in params.data) {
                            tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><br /><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><br /><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
@@ -354,92 +365,167 @@
            })
        },

        initEventChangeEcharts () {
            var chartDom = document.getElementById('EventChangeEcharts')
            eventchangemychart = this.$echarts.init(chartDom)
            eventchangemychart.setOption(this.initEventChangeOption([10, 9, 12, 6, 4, 14, 8]))
        // 案件统计中时间变化
        async caseTimeChange (e) {
            const date = e.map(item => {
                return this.dateFormat(item)
            })

            eventchangemychart.clear()
            const optionsData = await this.getCaseAll(date[0], date[1])
            eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
        },

        initEventChangeOption (seriesData) {
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>'
                },
                xAxis: {
                    type: 'category',
                    data: ['3-26', '3-27', '3-28', '3-29', '3-30', '3-31', '4-1'],
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
        // 设置默认时间
        defaultDate () {
            var current = new Date()

            var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)

            this.eventTime = [seven, current] //将值设置给插件绑定的数据
        },

        // 获取当前日期
        dateFormat (dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? ('0' + m) : m
            var d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            const time = y + '-' + m + '-' + d
            return time
        },

        // 获取案件统计值
        getCaseAll (start, end) {
            const caseAll = getCaseAll(start, end).then(res => {
                return res.data.reduce((previous, current) => {
                    previous.xData.push(current.days)
                    previous.yData.push(current.cout)
                    return previous
                }, { xData: [], yData: [] })
            })

            return caseAll
        },

        // 初始化案件统计
        async initEventChangeEcharts () {
            var chartDom = document.getElementById('EventChangeEcharts')
            eventchangemychart = this.$echarts.init(chartDom)

            const date = this.eventTime.map(item => {
                return this.dateFormat(item)
            })

            const optionsData = await this.getCaseAll(date[0], date[1])

            eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
        },

        // 案件统计的options
        initEventChangeOption (xData, yData) {
            let option
            if (xData.length == 0) {  //暂无数据
                option = {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: 'normal',
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                }
            } else {
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>'
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                series: [
                    {
                        data: seriesData,
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {
                                //渐变色
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            //波形图渐变色样式
                                            offset: 0,
                                            color: "rgba(3, 108, 255, 0.7)"
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(3, 108, 255, 0.1)"
                                        }
                                    ],
                                    false
                                )
                            }
                    xAxis: {
                        type: 'category',
                        data: xData,
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14)
                        },
                        itemStyle: {
                            normal: {
                                color: 'red', //改变折线点的颜色
                                lineStyle: {
                                    color: 'rgba(3, 108, 255, 1)' //改变折线颜色
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',

                        minInterval: 1,

                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14)
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    series: [
                        {
                            data: yData,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                normal: {
                                    //渐变色
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                //波形图渐变色样式
                                                offset: 0,
                                                color: "rgba(3, 108, 255, 0.7)"
                                            },
                                            {
                                                offset: 0.8,
                                                color: "rgba(3, 108, 255, 0.1)"
                                            }
                                        ],
                                        false
                                    )
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'red', //改变折线点的颜色
                                    lineStyle: {
                                        color: 'rgba(3, 108, 255, 1)' //改变折线颜色
                                    }
                                }
                            }
                        }
                    }
                ],
                grid: {
                    top: '4%',
                    left: '3%',
                    right: '2%',
                    bottom: '4%',
                    containLabel: true
                },
                    ],
                    grid: {
                        top: '4%',
                        left: '3%',
                        right: '2%',
                        bottom: '4%',
                        containLabel: true
                    },
                }
            }

            return option
        },

        clickEquimentChart () {
@@ -484,22 +570,6 @@
            // }
            equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(police)), true)
            this.policeName = police
        },

        selectPoliceChangeEventData (police) {
            if (police == '全部') {
                eventchangemychart.setOption(this.initEventChangeOption([10, 9, 12, 6, 4, 14, 8]), true)
            } else if (police == '车站派出所') {
                eventchangemychart.setOption(this.initEventChangeOption([6, 1, 4, 0, 1, 3, 0]), true)
            } else if (police == '沙溪派出所') {
                eventchangemychart.setOption(this.initEventChangeOption([1, 4, 0, 1, 0, 2, 1]), true)
            } else if (police == '北门派出所') {
                eventchangemychart.setOption(this.initEventChangeOption([2, 0, 3, 2, 1, 7, 1]), true)
            } else if (police == '灵溪派出所') {
                eventchangemychart.setOption(this.initEventChangeOption([0, 3, 2, 1, 1, 2, 4]), true)
            } else if (police == '江光派出所') {
                eventchangemychart.setOption(this.initEventChangeOption([1, 1, 3, 2, 1, 0, 2]), true)
            }
        },

        getEquimentDataCountandArr (data, policeStationName) {

 src/views/home/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-01-07 11:13:02
 * @LastEditTime: 2023-01-07 16:23:24
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -455,6 +455,7 @@
import historyArr from '@/assets/data/activitysData/history.js'
import underwayArr from '@/assets/data/activitysData/underway.js'
import { getPoliceStationList } from "@/api/dept"

import { convertStringToList } from "@/utils/geometryStringTool"

import { getActAsPoliceList } from "@/api/home/index.js"
@@ -672,7 +673,7 @@
            this.CJdata = {}
            if (type == '出警信息') {
                getActAsPoliceList(this.policeSituationDetailArr.JJDBH).then(res => {
                    this.CJdata = res.data.data.records
                    this.CJdata = res.data.data.records[0]
                })
            }
        },