shuishen
2023-02-24 556fb43ff975b33789ca65a7bc5c181e2b4c4a2a
警情信息页面功能完善
5 files modified
492 ■■■■ changed files
src/styles/media/index.scss 32 ●●●●● patch | view | raw | blame | history
src/views/home/components/bottomContainer.vue 5 ●●●● patch | view | raw | blame | history
src/views/home/index.vue 14 ●●●● patch | view | raw | blame | history
src/views/house/index.vue 54 ●●●● patch | view | raw | blame | history
src/views/policeInfor/index.vue 387 ●●●● patch | view | raw | blame | history
src/styles/media/index.scss
@@ -2700,8 +2700,10 @@
            }
            .pages {
                display: flex;
                align-items: center;
                justify-content: center;
                height: countSizeVh(40);
                line-height: countSizeVh(40);
                &>div {
                    &>button {
@@ -2755,4 +2757,32 @@
        }
    }
    .all-pagination-sty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: countSizeVh(40);
        &>div {
            &>button {
                width: countSizeVh(32);
                height: countSizeVh(32);
                &>i {
                    font-size: countSizeVh(16);
                }
            }
            &>ul {
                li {
                    width: countSizeVh(32);
                    height: countSizeVh(32);
                    line-height: countSizeVh(32);
                    font-size: countSizeVh(16);
                }
            }
        }
    }
}
src/views/home/components/bottomContainer.vue
@@ -294,6 +294,8 @@
        // 时间改变事件
        datePickerChange (e) {
            // this.timetype
            this.currentPage = 1
            if (this.timetype == 0) {
                this.getAlarmList({ type: this.timetype, time: this.dateFormat(e), current: this.currentPage })
@@ -881,4 +883,5 @@
        height: 100%;
        z-index: 1;
    }
}</style>
}
</style>
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-02-24 09:23:40
 * @LastEditTime: 2023-02-24 17:21:13
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -39,11 +39,11 @@
                <el-checkbox v-model="cameraLayerShow" @change="cameraChange">摄像头</el-checkbox>
            </div>
            <!-- <div class="layers-control-btn moitor">
                                                    <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                                                </div>
                                                <div class="layers-control-btn panorama">
                                                    <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                                                </div> -->
                                                        <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                                                    </div>
                                                    <div class="layers-control-btn panorama">
                                                        <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                                                    </div> -->
            <div class="layers-control-btn police-situation">
                <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
            </div>
@@ -657,7 +657,7 @@
    mounted () {
        this.$nextTick(() => {
            circleLayer = new global.DC.VectorLayer('circleLayer')
            circleLayer = new global.DC.PrimitiveLayer('circleLayer')
            global.viewer.addLayer(circleLayer)
            document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
src/views/house/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-02-24 14:33:25
 * @LastEditTime: 2023-02-24 17:20:51
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -140,9 +140,9 @@
                                <div class="two">
                                    <div>
                                        <div>98</div>
                                                                                                                                                                            <div>户籍人口</div>
                                                                                                                                                                        </div>
                                                                                                                                                                        <div>
                                                                                                                                                                                <div>户籍人口</div>
                                                                                                                                                                            </div>
                                                                                                                                                                            <div>
                                        <div style="color:#0E88FF">20</div>
                                        <div>流动人口</div>
                                    </div>
@@ -164,17 +164,17 @@
                                <div>
                                    <div>120</div>
                                    <div>出租</div>
                                                                                                                                                                        </div>
                                                                                                                                                                        <div>
                                                                                                                                                                            <div>160</div>
                                                                                                                                                                            <div>自住</div>
                                                                                                                                                                        </div>
                                                                                                                                                                        <div>
                                                                                                                                                                            <div>8</div>
                                                                                                                                                                            <div>空置</div>
                                                                                                                                                                        </div>
                                                                                                                                                                    </div>
                                                                                                                                                                    <div>
                                                                                                                                                                        <div>160</div>
                                                                                                                                                                        <div>自住</div>
                                                                                                                                                                    </div>
                                                                                                                                                                    <div>
                                                                                                                                                                        <div>8</div>
                                                                                                                                                                        <div>空置</div>
                                                                                                                                                                    </div>
                                                                                                                                                                </div>
                                                                                                                                                            </div>-->
                                                                                                                                                                </div>-->
                        <div class="house-element-info" v-if="isShowHouseBox">
                        <!-- 选择单元 -->
                        <div class="condo" v-show="isShowUnitChoose">
@@ -219,17 +219,17 @@
                                    <div>
                                        <span class="zizhu"></span>
                                        自住
                                                                                                                                                                            </div>
                                                                                                                                                                            <div>
                                                                                                                                                                                <span class="kongzhi"></span>
                                                                                                                                                                                空置
                                                                                                                                                                            </div>
                                                                                                                                                                            <div>
                                                                                                                                                                                <span class="shangye"></span>
                                                                                                                                                                                商业
                                                                                                                                                                            </div>
                                                                                                                                                                        </div>
                                                                                                                                                                        <div>
                                                                                                                                                                            <span class="kongzhi"></span>
                                                                                                                                                                            空置
                                                                                                                                                                        </div>
                                                                                                                                                                        <div>
                                                                                                                                                                            <span class="shangye"></span>
                                                                                                                                                                            商业
                                                                                                                                                                        </div>
                                                                                                                                                                    </div>
                                                                                                                                                                </div>-->
                                                                                                                                                                    </div>-->
                            <el-main v-loading="pictLoading" element-loading-background="rgba(17, 38, 163, .1)"
                                element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                                v-show="isShowHouseBox">
@@ -266,8 +266,8 @@
                                                <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                                {{ value.properties.fojcu }}
                                                <!-- <div class="flow"></div>
                                                                                                                                                                                <div class="focus"></div>
                                                                                                                                                                                    <div class="warning"></div>-->
                                                                                                                                                                                    <div class="focus"></div>
                                                                                                                                                                                        <div class="warning"></div>-->
                                            </div>
                                        </div>
                                    </div>
@@ -679,7 +679,7 @@
        this.$parent.$parent.resize('400px', true)
        this.$nextTick(() => {
            circleLayer = new global.DC.VectorLayer('circleLayer')
            circleLayer = new global.DC.PrimitiveLayer('circleLayer')
            global.viewer.addLayer(circleLayer)
            this.searchHouse = this.$route.query.searchName
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-02-24 14:26:02
 * @LastEditTime: 2023-02-24 17:28:24
 * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
 * @Description: 辖区管理
 * 
@@ -11,15 +11,41 @@
<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="nav-tab" ref="navTabBox">
                <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">实时警情</div>
                <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1">历史警情</div>
                <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick(0)">实时警情</div>
                <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick(1)">历史警情</div>
            </div>
            <div class="police-info" ref="policeTableBox">
                <el-table :data="policeInforData" style="width: 100%" :height="currentTableHeight"
            <div class="time-select" v-show="navType == 1" ref="timeSelect">
                <el-date-picker :clearable="false" v-model="currentTime" type="daterange" align="center" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="datePickerChange"
                    :picker-options="pickerOptions" popper-class="date-day-style"></el-date-picker>
            </div>
            <div v-if="navType == 0" class="police-info">
                <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' }" :row-class-name="tableRowClassName"
                    @row-click="clickData">
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
                        min-width="34%"></el-table-column>
                    <el-table-column label="报警时间" min-width="26%">
                        <template slot-scope="scope">
                            <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="JJYXM" :show-overflow-tooltip="true" label="接警员"
                        min-width="20%"></el-table-column>
                    <el-table-column prop="BJRXM" :show-overflow-tooltip="true" label="报警人"
                        min-width="20%"></el-table-column>
                </el-table>
            </div>
            <div v-else class="police-info">
                <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' }" :row-class-name="tableRowClassName"
                    @row-click="clickData">
@@ -44,10 +70,75 @@
            </div>
        </div>
        <el-dialog title="报警信息" :modal="true" :visible.sync="policeSituationVisible" :append-to-body="true"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
            <div class="box">
                <div class="item">
                    <div>接警单位编号:</div>
                    <div>{{ policeSituationDetailObj.JJDWBH }}</div>
                </div>
                <div class="item">
                    <div>接警单位名称:</div>
                    <div>{{ policeSituationDetailObj.JJDWMC }}</div>
                </div>
                <div class="item">
                    <div>接警单编号:</div>
                    <div>{{ policeSituationDetailObj.JJDBH }}</div>
                </div>
                <div class="item">
                    <div>接警员编号:</div>
                    <div>{{ policeSituationDetailObj.JJYBH }}</div>
                </div>
                <div class="item">
                    <div>接警员姓名:</div>
                    <div>{{ policeSituationDetailObj.JJYXM }}</div>
                </div>
                <div class="item">
                    <div>报警时间:</div>
                    <div>{{ policeSituationDetailObj.BJSJ }}</div>
                </div>
                <div class="item">
                    <div>报警电话:</div>
                    <div>{{ policeSituationDetailObj.LXDH }}</div>
                </div>
                <div class="item">
                    <div>报警人姓名:</div>
                    <div>{{ policeSituationDetailObj.BJRXM }}</div>
                </div>
                <div class="item">
                    <div>报警类别:</div>
                    <div>{{ policeSituationDetailObj.BJLB }}</div>
                </div>
                <div class="item">
                    <div>报警类型:</div>
                    <div>{{ policeSituationDetailObj.BJLX }}</div>
                </div>
                <div class="dialog-content">
                    <div>事发地址:</div>
                    <div>{{ policeSituationDetailObj.SFDZ }}</div>
                </div>
                <div class="dialog-content">
                    <div>报警内容:</div>
                    <div>{{ policeSituationDetailObj.BJNR }}</div>
                </div>
                <div class="dialog-content">
                    <div>备注:</div>
                    <div>{{ policeSituationDetailObj.MEMO }}</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
let policeInforSiteLayer = null
let timer = []
import { getAnswerPolices, getAlarmList } from "@/api/home/index.js"
export default {
@@ -55,46 +146,119 @@
    data () {
        return {
            policeInforData: [],
            realPoliceInforData: [], // 实时
            historyPoliceInforData: [],
            boxShow: false,
            pages: {
                total: 0,
                size: 15,
                current: 1
            },
            navType: 0,
            currentTableHeight: 0
            currentTableHeight: 0,
            currentTime: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            policeSituationDetailObj: {},
            policeSituationVisible: false,
        }
    },
    created () {
        this.defaultDate()
    },
    mounted () {
        this.$parent.$parent.resize('400px', true)
        this.$nextTick(() => {
            this.getAnswerPolices()
            this.setTableHeight()
        })
        window.addEventListener('resize', this.setTableHeight)
    },
    methods: {
        // 设置默认时间
        defaultDate () {
            var current = new Date()
            var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
            this.currentTime = [seven, current] //将值设置给插件绑定的数据
        },
        datePickerChange (e) {
            this.pages.current = 1
            const date = e.map(item => {
                return this.dateFormat(item)
            })
            this.getAlarmList({ start: date[0], end: date[1], current: this.pages.current })
        },
        /**
         * @description: 获取当前日期
         * @param {*} dateData
         * @return {*}
         */
        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
        },
        // 获取实时接警记录
        getAnswerPolices () {
            getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.policeSituationRealtimeArr = []
            getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => {
                this.realPoliceInforData = []
                if (res.data.result.length > 0) {
                    this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
                    this.realPoliceInforData = res.data.result.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                } else {
                    this.policeSituationRealtimeArr = []
                    this.realPoliceInforData = []
                }
                this.$emit('policeSituationChange')
                this.addPoliceInforSiteLayer(this.realPoliceInforData)
            })
            // this.policeSituationRealtimeArr = [{
            // this.realPoliceInforData = [{
            //     ZDDWXZB: 117.97,
            //     ZDDWYZB: 28.45,
            //     JJDWMC: '信州公安局派出所',
@@ -174,34 +338,33 @@
            //     MEMO: '人群聚集赌博'
            // }]
            // this.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => {
            // this.realPoliceInforData = this.realPoliceInforData.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })
            // this.$emit('policeSituationChange')
            // this.addPoliceInforSiteLayer(this.realPoliceInforData)
        },
        // 获取历史接警记录
        getAlarmList (params) {
            getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.pagesCount = res.data.data.pages
                this.policeSituationHistoryArr = []
            getAlarmList({ ...params, size: this.pages.size, jjdwbh: this.userInfo.dept_id }).then(res => {
                this.pages.total = 0
                this.historyPoliceInforData = []
                if (res.data.data.records.length > 0) {
                    this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
                    this.pages.total = res.data.data.pages
                    this.historyPoliceInforData = res.data.data.records.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                } else {
                    this.policeSituationHistoryArr = []
                    this.pages.total = 0
                    this.historyPoliceInforData = []
                }
                this.setTableHeight()
                this.$emit('policeSituationChange')
                this.addPoliceInforSiteLayer(this.historyPoliceInforData)
            })
            // this.policeSituationHistoryArr = [{
            // this.historyPoliceInforData = [{
            //     ZDDWXZB: 112,
            //     ZDDWYZB: 25,
            //     JJDWMC: '信州公安局派出所',
@@ -281,25 +444,162 @@
            //     MEMO: '人群聚集赌博'
            // }]
            // this.policeSituationHistoryArr = this.policeSituationHistoryArr.map((item, index) => {
            // this.historyPoliceInforData = this.historyPoliceInforData.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })
            // this.setTableHeight()
            // this.addPoliceInforSiteLayer(this.historyPoliceInforData)
        },
        addPoliceInforSiteLayer (data) {
            this.clearLayer()
            data.forEach((item, index) => {
                if (item.lng && item.lng != undefined && item.lng != '') {
                    let center = new global.DC.Position(Number(item.lng), Number(item.lat))
                    let point = new global.DC.PointPrimitive(center)
                    let num = 0
                    timer[index] = setInterval(() => {
                        num++
                        if (num >= 10) {
                            num = 0
                        }
                        point.setStyle({
                            outlineColor: global.DC.Color.RED.withAlpha(0.5),//边框颜色
                            outlineWidth: num,//边框大小,
                            color: global.DC.Color.RED
                        })
                    }, 100)
                    point.attrParams = item
                    point.on(global.DC.MouseEventType.CLICK, this.siteClick)
                    policeInforSiteLayer.addOverlay(point)
                }
            })
        },
        /**
         * @description: 警情闪烁点的点击事件
         * @param {*} e
         * @return {*}
         */
        siteClick (e) {
            this.$store.commit('SET_DETAILSPOPUP', {
                showBox: true,
                showBtn: false
            })
            this.$store.commit('SET_DATAPOPUP', e.overlay.attrParams)
            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(e.overlay.attrParams.lng),
                            Number(e.overlay.attrParams.lat),
                            0
                        )
                    )
                ]
            })
        },
        /**
         * @description: 清除图层
         * @return {*}
         */
        clearLayer () {
            if (policeInforSiteLayer && policeInforSiteLayer != null && policeInforSiteLayer != undefined) {
                policeInforSiteLayer.clear()
                policeInforSiteLayer.remove()
                policeInforSiteLayer = null
            }
            policeInforSiteLayer = new global.DC.PrimitiveLayer('policeInforSiteLayer')
            global.viewer.addLayer(policeInforSiteLayer)
        },
        setTableHeight () {
            this.currentTableHeight = this.$refs.policeTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
            if (this.navType == 0) {
                this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.navTabBox.offsetHeight
            } else {
                this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.navTabBox.offsetHeight - this.$refs.timeSelect.offsetHeight - this.$refs.ElPagination.offsetHeight
            }
        },
        /**
         * @description: 实时历史警情切换
         * @param {*} e
         * @param {*} type
         * @return {*}
         */
        navClick (e) {
            this.navType = e.target.dataset.type
        async navClick (type) {
            this.navType = type
            const date = this.currentTime.map(item => {
                return this.dateFormat(item)
            })
            if (this.navType == 0) {
                await this.getAnswerPolices()
            } else {
                this.pages.current = 1
                await this.getAlarmList({
                    start: date[0],
                    end: date[1],
                    current: this.pages.current
                })
            }
            this.$nextTick(() => {
                this.setTableHeight()
            })
        },
        /**
         * @description: 警情列表点击事件
         * @param {*} item
         * @return {*}
         */
        clickData (item) {
            if (item.ZDDWXZB && item.ZDDWXZB != 0 && item.ZDDWYZB && item.ZDDWYZB != 0) {
                this.$EventBus.$emit('toPosition', {
                    layerName: 'policeSituationyLayers',
                    siteJd: Number(item.ZDDWXZB),
                    siteWd: Number(item.ZDDWYZB)
                })
                this.$store.commit('SET_DETAILSPOPUP', {
                    showBox: true,
                    showBtn: false
                })
                this.$store.commit('SET_DATAPOPUP', item)
                var popup = new global.DC.DivForms(global.viewer, {
                    domId: 'divFormsDomBox',
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(item.ZDDWXZB),
                                Number(item.ZDDWYZB),
                                0
                            )
                        )
                    ]
                })
            } else {
                this.policeSituationDetailObj = item
                this.policeSituationVisible = true
            }
        },
        // 大小重置
        boxResize (val) {
@@ -309,6 +609,17 @@
    destroyed () {
        window.removeEventListener('resize', this.setTableHeight)
        policeInforSiteLayer != null && policeInforSiteLayer.remove()
        this.$store.commit('SET_DETAILSPOPUP', {
            showBox: false,
            showBtn: false
        })
        for (let i = 0; i < timer.length; i++) {
            clearInterval(timer[i])
        }
        this.$parent.$parent.resize('0px')
    }
@@ -337,23 +648,17 @@
            .nav {
                flex: 1;
                border-bottom: 1px solid #33566c;
                cursor: pointer;
            }
            .choosed {
                // background-color: rgba(0, 92, 169, 1);
                background-color: #3d5ad5;
            }
        }
        .police-info {
            height: calc(100% - 40px);
            .pages {
                height: 40px;
                line-height: 40px;
            }
        .time-select {
            margin: 0;
            padding: 5px;
        }
    }
}