Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

guanqb

2023-01-05 4fdf407c315aa4e0fb25e87419f441a0d7c3a8c2

Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

 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-03 16:02:57
 * @LastEditTime: 2023-01-05 15:16:20
 * @FilePath: \srs-police-affairs\src\api\home\index.js
 * @Description: 
 * 
@@ -28,6 +28,13 @@
    })
}

export const getAnswerPolices = () => {
    return request({
        url: `/api/doorplate/doorplate/acceptAlarmList`,
        method: 'get',
        params: {}
    })
}

export const getCallPolices = () => {
    return request({

 src/components/map/components/mapPopup.vue

@@ -1,8 +1,7 @@
<template>
    <div>
        <div v-if="detailsPopup" id="divFormsDomBox" class="container">
            <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
                <div class="box">
            <div style="width: 100%; height: 100%; transform: translate(0, 50%);">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
@@ -16,6 +15,10 @@
                                    <div class="title">
                                        详细信息
                                        <div class="close" @click="closePopup" title="关闭"></div>
                                </div>
                                <div class="change-btn">
                                    <div class="on">接警信息</div>
                                    <div>出警信息</div>
                                    </div>
                                    <div class="label-content">
                                        <div class="item">
@@ -69,7 +72,6 @@
                </div>
            </div>
        </div>
    </div>
</template>

<script>
@@ -91,107 +93,38 @@
</script>

<style lang="scss" scoped>
.container {
    position: fixed;
    left: 0;
    z-index: 1 !important;
    width: 280px;
    height: 360px;
    // background: $bg-color;
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-self: flex-start;
    align-content: flex-start;
    .title {
        height: 40px;
        line-height: 42px;
        width: 100%;
        position: relative;
        background-image: linear-gradient(
            135deg,
            transparent 25px,
            #29baf1 25px
        );
        .close {
            position: absolute;
            right: 5px;
            top: -2px;
        }
        .close::before {
            font-family: element-icons;
            content: '\e6db';
            cursor: pointer;
            font-size: 16px;
        }
        .close:hover::before {
            color: #3d95f3;
        }
    }
    .item {
        display: flex;
        flex-direction: row;
        width: calc(100% - 20px);
        height: 30px;
        line-height: 30px;
        margin: 0 10px;
        text-align: left;

        & > div:first-child {
            width: 100px;
            text-align: justify;
            display: inline-block;
            text-align-last: justify;
            margin-right: 20px;
        }

        & > div:nth-of-type(2) {
            width: calc(100% - 120px);
        }
    }

    .divForms-dom {
        position: fixed;
        left: 0;
        z-index: 1 !important;
    }
    .box {
        width: 100%;
        height: 100%;
        transform: translate(0, 25%);
    }

    .divForms .arrow {
        position: absolute;
        bottom: 40%;
        left: 0;
    bottom: 50%;
    left: -8px;
        width: 45px;
        height: 2px;
        transform: rotate(-45deg) translate(5px, -15px);
    transform: rotate(-45deg);
        background-color: #28bbf0;
    }

    .divForms-theme .area {
        background-image: linear-gradient(
                135deg,
    background-image: linear-gradient(135deg,
                transparent 30px,
                #1831a79a 30px,
                #3f487ba6 50%,
                transparent 50%
            ),
            linear-gradient(
                -45deg,
            transparent 50%),
        linear-gradient(-45deg,
                transparent 30px,
                #1831a79a 30px,
                #3f487ba6 50.1%,
                transparent 50%
            );
            transparent 50%);
    }

    .divForms .area {
        position: relative;
        min-width: 320px;
    min-width: 420px;
    }

    .divForms-wrap {
@@ -272,26 +205,83 @@
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;

    .change-btn {
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        &>div {
            width: 36%;
            height: 36px;
            line-height: 36px;
            cursor: pointer;
    }

    .divForms-theme .title {
        background-image: linear-gradient(
            135deg,
            transparent 25px,
            #1c309e9a 25px
        );
        &>div.on {
            border-bottom: 2px solid #1831a7;
        }
    }

    .label-content {
        padding: 4px 0;

        .item {
            display: flex;
            flex-direction: row;
            width: calc(100% - 20px);
            height: 30px;
            line-height: 30px;
            margin: 0 10px;
            text-align: left;

            &>div:first-child {
                width: 96px;
                text-align: justify;
                display: inline-block;
                text-align-last: justify;
                margin-right: 20px;
            }

            &>div:nth-of-type(2) {
                width: calc(100% - 120px);
            }
        }

    }

    }

    .divForms .title {
    position: relative;
        margin-top: 20px;
        padding: 0 12px 0 30px;
        height: 36px;
        line-height: 36px;
        position: relative;

    .close {
        position: absolute;
        right: 5px;
        top: -2px;
    }

    .divForms .label-content {
        padding: 4px 0;
    .close::before {
        font-family: element-icons;
        content: '\e6db';
        cursor: pointer;
        font-size: 16px;
    }

    .close:hover::before {
        color: #3d95f3;
    }
}

.divForms-theme .title {
    background-image: linear-gradient(135deg,
            transparent 25px,
            #1c309e9a 25px);
    }

    .divForms-theme .arrow,
@@ -307,6 +297,5 @@
        right: 0;
        z-index: 10;
        height: 2px;
    }
}
</style>

 src/styles/media/index.scss

@@ -2324,18 +2324,72 @@
            }

            #divFormsDomBox {
                width: countSizeVw(280, 1920);
                height: countSizeVh(360);
                .divForms {
                    .arrow {
                        left: countSizeVw(-8, 1920);
                        width: countSizeVw(45, 1920);
                        height: countSizeVh(2);
                        transform: rotate(-45deg);
                    }

                    .area {
                        min-width: countSizeVw(420, 1920);
                    }

                    .b-t {
                        left: countSizeVh(44);
                        height: countSizeVh(1);
                    }

                    .b-r {
                        bottom: countSizeVh(44);
                        width: countSizeVh(1);
                    }

                    .b-l {
                        top: countSizeVh(44);
                        width: countSizeVh(1);
                    }

                    .b-b {
                        right: countSizeVh(44);
                        height: countSizeVh(1);
                    }

                    .b-b-r {
                        width: countSizeVh(1);
                        height: countSizeVh(62);
                        transform: rotate(45deg) translate(countSizeVw(-52, 1920), countSizeVh(22));
                    }

                    .b-t-l {
                        width: countSizeVh(1);
                        height: countSizeVh(62);
                        transform: rotate(45deg) translate(countSizeVw(52, 1920), countSizeVh(-22));
                    }

                    .label-content {
                        padding: countSizeVh(4) 0;
                    }


                    .label-wrap {
                        padding: 0 countSizeVw(12, 1920);
                        font-size: countSizeVh(16);

                .title {
                    height: countSizeVh(40);
                    line-height: countSizeVh(42);
                    background-image: linear-gradient(135deg,
                            transparent countSizeVh(25),
                            #29baf1 countSizeVh(25));
                            margin-top: countSizeVh(20);
                            padding: 0 countSizeVw(12, 1920) 0 countSizeVw(30, 1920);
                            height: countSizeVh(36);
                            line-height: countSizeVh(36);

                            &::before {
                                bottom: countSizeVh(-4);
                                height: countSizeVh(2);
                            }

                    .close {
                        right: countSizeVh(5);
                                right: countSizeVw(5, 1920);
                        top: countSizeVh(-2);
                    }

@@ -2343,118 +2397,25 @@
                        font-size: countSizeVh(16);
                    }
                }

                .item {
                    width: calc(100% - 20px);
                    height: countSizeVh(30);
                    line-height: countSizeVh(30);
                    margin: 0 countSizeVw(10, 1920);

                    &>div:first-child {
                        width: countSizeVw(100, 1920);
                        margin-right: countSizeVw(20, 1920);
                    }

                    &>div:nth-of-type(2) {
                        width: calc(100% - countSizeVw(120, 1920));
                    }
                }

                .divForms .arrow {
                    width: countSizeVw(24, 1920);
                    height: countSizeVh(2);
                    transform: rotate(-45deg) translate(countSizeVh(5), countSizeVh(-15));
                }

                .divForms-theme .area {
                    background-image: linear-gradient(135deg,
                            transparent countSizeVw(30, 1920),
                            #1831a79a countSizeVw(30, 1920),
                            transparent countSizeVh(30),
                            #1831a79a countSizeVh(30),
                            #3f487ba6 50%,
                            transparent 50%),
                        linear-gradient(-45deg,
                            transparent countSizeVw(30, 1920),
                            #1831a79a countSizeVw(30, 1920),
                            transparent countSizeVh(30),
                            #1831a79a countSizeVh(30),
                            #3f487ba6 50.1%,
                            transparent 50%);
                }

                .divForms .area {
                    // min-width: countSizeVw(320,1920);
                    min-width: countSizeVw(260, 1920);
                }

                .divForms-wrap {
                    padding: countSizeVh(30);
                }


                .divForms-theme .b-b,
                .divForms-theme .b-b-r,
                .divForms-theme .b-l,
                .divForms-theme .b-r,
                .divForms-theme .b-t,
                .divForms-theme .b-t-l {
                    box-shadow: 0 0 countSizeVh(10) countSizeVh(2) #1831a7;
                }

                .divForms .b-t {
                    left: countSizeVh(84);
                    height: countSizeVh(1);
                }

                .divForms .b-r {
                    bottom: countSizeVh(84);
                    width: countSizeVh(1);
                }

                .divForms .b-l {
                    top: countSizeVh(84);
                    width: countSizeVh(1);
                }

                .divForms .b-b {
                    right: countSizeVh(84);
                    height: countSizeVh(1);
                }

                .divForms .b-b-r {
                    width: countSizeVw(1, 1920);
                    height: countSizeVh(150);
                    transform: rotate(45deg) translate(-52px, 22px);
                }

                .divForms .b-t-l {
                    width: countSizeVw(1, 1920);
                    height: countSizeVh(62);
                    transform: rotate(45deg) translate(countSizeVw(52, 1920), countSizeVw(-22, 1920));
                }

                .divForms .label-wrap {
                    padding: 0 countSizeVw(12, 1920);
                    font-size: countSizeVh(16);
                }

                .divForms-theme .title {
                    background-image: linear-gradient(135deg,
                            transparent countSizeVw(25, 1920),
                            #1c309e9a countSizeVw(25, 1920));
                }

                .divForms .title {
                    margin-top: countSizeVh(20);
                    padding: 0 countSizeVh(12) 0 countSizeVw(30, 1920);
                    height: countSizeVh(36);
                    line-height: countSizeVh(36);
                }

                .divForms .label-content {
                    padding: countSizeVh(4) 0;
                }

                .divForms .title::before {
                    bottom: countSizeVh(-4);
                    height: countSizeVh(2);
                    padding: countSizeVh(30) countSizeVw(30, 1920);
                }
            }
        }

 src/views/home/components/bottomContainer.vue

@@ -8,9 +8,17 @@
                    <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
                </div>
                <div class="timeSeclect" v-show="historytype">
                    <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 v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->


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

                    <el-date-picker @change="datePickerChange" v-show="timetype == 1" v-model="currentTime" type="month"
                        :picker-options="pickerOptions" placeholder="选择月">
                    </el-date-picker>
                </div>
                <div class="history-tab">
                    <span class="beforetime" :class="{ choosed: historytype == 0 }"
@@ -25,34 +33,40 @@
                <ul class="title-header">
                    <li>
                        <span class="num">序号</span>
                        <span class="type">警情类别</span>
                        <span class="dealTime">接警时间</span>
                        <span class="state">警情状态</span>
                        <span class="dealPolice">经办民警</span>
                        <span class="callPeople">报警人</span>
                        <span class="comingPhone">报警电话</span>
                        <span class="callPhone">报警人联系人</span>
                        <span class="callContent">报警内容</span>
                        <span class="receiving-alarm-unit">接警单位</span>
                        <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-police-content">报警内容</span>
                        <span class="incident-site">事发地址</span>
                        <span class="call-police-type">报警类型</span>
                        <span class="alarm-bz">备注</span>
                    </li>
                </ul>
                <vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr"
                    class="warp" :class-option="classOption">

                <vue-seamless-scroll v-if="currentUseDataLength > 0" :data="listCurrentData" class="warp"
                    :class-option="classOption">
                    <ul class="item">
                        <li v-for="(item, index) in (historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr)"
                            :key="index" :data-obj="JSON.stringify(item)" class="row">
                            <!-- <span class="num" v-text="item.num"></span> -->
                        <li v-for="(item, index) in listCurrentData" :key="index" :data-obj="JSON.stringify(item)"
                            class="row">
                            <span class="num" v-text="index + 1"></span>
                            <span class="type" v-text="item.type"></span>
                            <span class="dealTime" v-text="item.dealTime"></span>
                            <span class="state" v-text="item.state"></span>
                            <span class="dealPolice" v-text="item.dealPolice"></span>
                            <span class="callPeople" v-text="item.callPeople"></span>
                            <span class="comingPhone" v-text="item.comingPhone"></span>
                            <span class="callPhone" v-text="item.callPhone"></span>
                            <span class="callContent" v-text="item.callContent"></span>
                            <span class="receiving-alarm-unit" v-text="JJDWMC"></span>
                            <span class="receiving-alarm-people" v-text="JJYXM"></span>
                            <span class="receiving-alarm-time" v-text="JJSJ"></span>
                            <span class="call-people" v-text="BJRXM"></span>
                            <span class="call-phone" v-text="LXDH"></span>
                            <span class="call-police-content" v-text="BJNR"></span>
                            <span class="incident-site" v-text="SFDZ"></span>
                            <span class="call-police-type" v-text="BJLX"></span>
                            <span class="alarm-bz" v-text="MEMO"></span>
                        </li>
                    </ul>
                </vue-seamless-scroll>

                <div class="warp no-data" v-else>
                    暂无数据
                </div>
            </div>
        </div>

@@ -89,10 +103,9 @@

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import realtimeArr from '@/assets/data/policeSituationArr/realtimeArr.js'
import historyArr from '@/assets/data/policeSituationArr/historyArr.js'

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

export default {
    data () {
@@ -103,33 +116,8 @@
            policeSituationHistoryArr: [],
            policeSituationHistorySaveArr: [],
            eventTime: '',
            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])
                    }
                }]
            },
            currentTime: '',
            pickerOptions: {}, // 日期设置对象
            classOption: {
                step: 1
            }
@@ -142,12 +130,43 @@
        vueSeamlessScroll
    },

    computed: {
        listCurrentData () {
            if (this.historytype == 0) {
                return this.policeSituationRealtimeArr
            } else {
                return this.policeSituationHistoryArr
            }
        },

        currentUseDataLength () {
            if (this.historytype == 0) {
                return this.policeSituationRealtimeArr.length
            } else {
                return this.policeSituationHistoryArr.length
            }
        }
    },

    created () {
        this.policeSituationRealtimeArr = realtimeArr
        this.policeSituationHistoryArr = historyArr
        this.policeSituationHistorySaveArr = historyArr

        this.getCallPolices()

        setInterval(() => {
            console.log(this.currentTime)
        }, 5000)

        // disabledDate 为true表示不可选,false表示可选
        this.pickerOptions = {
            disabledDate (time) {
                // 设置可选择的日期为今天之后的一个月内
                let curDate = (new Date()).getTime()
                return time.getTime() > curDate
            }

        }
    },

    mounted () {
@@ -163,12 +182,44 @@
    },

    methods: {
        datePickerChange (e) {
            // this.timetype
            const dateStr = this.dateFormat(e)

        },

        // 获取当前日期
        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
        },

        getCallPolices () {
            getCallPolices().thne(res => {
                setTimeout(() => {
                    console.log(res, 465464)
                }, 5000)
            })
            // getCallPolices().then(res => {
            //     res.data.result
            // })

            // getAnswerPolices().then(res => {
            //     this.policeSituationRealtimeArr = res.data.result
            // })

            this.policeSituationRealtimeArr = [
                {
                    JJDW: '公安局',
                    lat: 28,
                    lng: 112
                },
                {
                    JJDW: '派出所'
                },
            ]

        },

        timeTabClick (type) {
@@ -186,31 +237,6 @@
            this.historytype = type
            this.$emit('changePoliceSituationHistoryType', type)
            this.$emit('policeSituationChange')
        },

        selectPoliceSituatiionArr (name) {
            if (name == '全部') {
                this.policeSituationRealtimeArr = realtimeArr
                this.policeSituationHistoryArr = historyArr
                this.timeTabClick(this.timetype)
            } else {
                let realtimeNewArr = []
                let historyNewArr = []
                realtimeArr.forEach(item => {
                    if (item.policeName == name) {
                        realtimeNewArr.push(item)
                    }
                })
                this.policeSituationRealtimeArr = realtimeNewArr
                historyArr.forEach(item => {
                    if (item.policeName == name) {
                        historyNewArr.push(item)
                    }
                })
                this.policeSituationHistorySaveArr = historyNewArr
                this.policeSituationHistoryArr = historyNewArr
                this.timeTabClick(this.timetype)
            }
        },

        chooseWeekTimeDate (arr) {
@@ -399,6 +425,12 @@
            height: calc(100% - 44px);
        }

        .warp.no-data {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        ul {
            li {
                height: 44px;
@@ -407,38 +439,42 @@
                cursor: pointer;

                .num {
                    width: 6%;
                }

                .receiving-alarm-unit {
                    width: 12%;
                }

                .receiving-alarm-people {
                    width: 8%;
                }

                .type {
                .receiving-alarm-time {
                    width: 10%;
                }

                .state {
                .call-people {
                    width: 8%;
                }

                .comingPhone {
                    width: 14%;
                }

                .dealTime {
                    width: 14%;
                }

                .dealPolice {
                .call-phone {
                    width: 8%;
                }

                .callPeople {
                .call-police-content {
                    width: 12%;
                }

                .incident-site {
                    width: 12%;
                }

                .call-police-type {
                    width: 8%;
                }

                .callPhone {
                    width: 14%;
                }

                .callContent {
                .alarm-bz {
                    flex: 1;
                }
            }