首页相关更改，底部表格，右边折线统计

shuishen

2023-01-09 894f140d61331fcdc0e9ee87ca88731051b1a172

首页相关更改，底部表格，右边折线统计

 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-07 15:29:58
 * @LastEditTime: 2023-01-09 16:23:03
 * @FilePath: \srs-police-affairs\src\api\home\index.js
 * @Description: 
 * 
@@ -45,15 +45,12 @@
}

// 获取接警历史记录
export const getAlarmList = (type, time) => {
export const getAlarmList = (params) => {
    return request({
        url: `/api/alarm/alarm/page`,
        method: 'get',
        params: {
            current: 1,
            size: 100,
            type,
            time
            ...params
        }
    })
}

 src/views/home/components/bottomContainer.vue

@@ -8,18 +8,9 @@
                    <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="结束日期"></el-date-picker> -->


                    <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 :clearable="false" @change="datePickerChange" v-show="timetype == 1"
                        v-model="currentMonthTime" type="month" :picker-options="pickerOptions" placeholder="选择月">
                    </el-date-picker>
                    <el-date-picker :clearable="false" v-model="currentTime" type="daterange" align="right"
                        unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        @change="datePickerChange" :picker-options="pickerOptions"></el-date-picker>
                </div>
                <div class="history-tab">
                    <span class="beforetime" :class="{ choosed: historytype == 0 }"
@@ -29,8 +20,8 @@
                </div>
            </div>

            <!-- v-if="historytype == 0" -->
            <div class="body" ref="tableBox" @click="handleSelectClick($event)">

            <div class="body" v-show="historytype == 0" ref="tableBox" @click="handleSelectClick($event)">
                <ul class="title-header">
                    <li>
                        <span class="num">序号</span>
@@ -46,11 +37,11 @@
                    </li>
                </ul>

                <vue-seamless-scroll v-if="currentUseDataLength > 0" :data="listCurrentData" class="warp"
                    :class-option="classOption">
                <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr"
                    class="warp" :class-option="classOption">
                    <ul class="item">
                        <li v-for="(item, index) in listCurrentData" :key="index" :data-obj="JSON.stringify(item)"
                            class="row">
                        <li v-for="(item, index) in policeSituationRealtimeArr" :key="index"
                            :data-obj="JSON.stringify(item)" class="row">
                            <span class="num" v-text="index"></span>
                            <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
                            <span class="receiving-alarm-people" v-text="item.JJYXM"></span>
@@ -71,28 +62,39 @@
                </div>
            </div>

            <!-- <div class="body" v-else>
                <div class="list-box">
                    <el-table :data="monitoringList" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                        <el-table-column prop="index" label="序号" min-width="35%"></el-table-column>
                        <el-table-column prop="JJDWMC" label="接警单位" min-width="35%"></el-table-column>
                        <el-table-column prop="JJYXM" label="接警员" min-width="35%"></el-table-column>
                        <el-table-column :title="item.JJSJ" :prop="JJSJ.substring(0, 10)" label="接警时间" min-width="35%"></el-table-column>
                        <el-table-column prop="BJRXM" label="报警人" min-width="35%"></el-table-column>
                        <el-table-column prop="LXDH" label="联系电话" min-width="35%"></el-table-column>
                        <el-table-column prop="BJNR" label="报警内容" min-width="35%"></el-table-column>
                        <el-table-column prop="SFDZ" label="事发地址" min-width="35%"></el-table-column>
                        <el-table-column prop="BJLX" label="报警类型" min-width="35%"></el-table-column>
                        <el-table-column prop="MEMO" label="备注" min-width="35%"></el-table-column>
                    </el-table>
                </div>
                <div class="pages">
            <div class="current-table-body" ref="ElTableBox" v-show="historytype == 1">
                <el-table :data="policeSituationHistoryArr" style="width: 100%" :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                    <el-table-column prop="index" label="序号" min-width="6%"></el-table-column>
                    <el-table-column prop="JJDWMC" label="接警单位" min-width="12.6%"></el-table-column>
                    <el-table-column prop="JJYXM" label="接警员" min-width="7.6%"></el-table-column>
                    <el-table-column label="接警时间" min-width="9.6%">
                        <template slot-scope="scope">
                            <span :title="scope.row.JJSJ">{{ scope.row.JJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="BJRXM" label="报警人" min-width="7.6%"></el-table-column>
                    <el-table-column prop="LXDH" label="联系电话" min-width="10%"></el-table-column>
                    <el-table-column label="报警内容" min-width="12%">
                        <template slot-scope="scope">
                            <span :title="scope.row.BJNR">{{ scope.row.BJNR }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="事发地址" min-width="12%">
                        <template slot-scope="scope">
                            <span :title="scope.row.SFDZ">{{ scope.row.SFDZ }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="BJLX" label="报警类型" min-width="8%"></el-table-column>
                    <el-table-column prop="MEMO" label="备注" min-width="12%"></el-table-column>
                </el-table>

                <div class="pages" ref="ElPagination">
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div> -->
            </div>
        </div>

        <svg class="border-svg">
@@ -141,12 +143,46 @@
            // 历史
            policeSituationHistoryArr: [],
            eventTime: '',
            currentWeekTime: '',
            currentMonthTime: '',
            pickerOptions: {}, // 日期设置对象
            // 当前选择时间
            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])
                    }
                }]
            }, // 日期设置对象
            classOption: {
                step: 1
            }
            },

            // 分页
            pagesize: 15,
            currentPage: 1,
            pagesCount: 1,
            // table高度
            currentTableHeight: 0,
        }
    },

@@ -156,35 +192,25 @@
        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.getAnswerPolices()

        this.defaultDate()

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



        window.addEventListener('resize', this.setTableHeight)

    },

    mounted () {
@@ -194,12 +220,44 @@
    },

    methods: {
        // 获取table高度
        setTableHeight () {
            this.$nextTick(() => {
                if (this.$refs.ElTableBox && this.$refs.ElPagination) {
                    this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
                }
            })
        },

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

        // 分页选择事件
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage

            this.getVideoList(this.currentPage, this.pagesize)
        },

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

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

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

        // 时间改变事件
        datePickerChange (e) {
            // this.timetype
            const dateStr = this.dateFormat(e)
            const date = e.map(item => {
                return this.dateFormat(item)
            })

            this.getAlarmList(this.timetype, dateStr)
            this.getAlarmList({ start: date[0], end: date[1] })
        },

        // 获取当前日期
@@ -217,9 +275,13 @@
        // 获取实时接警记录
        getAnswerPolices () {
            getAnswerPolices().then(res => {
                this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
                    return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                })
                if (res.data.result.length > 0) {
                    this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                } else {
                    this.policeSituationRealtimeArr = []
                }
            })

            // this.policeSituationRealtimeArr = [{
@@ -308,25 +370,109 @@
        },

        // 获取历史接警记录
        getAlarmList (type, time) {
            getAlarmList(type, time).then(res => {
                this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
                    return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                })
        getAlarmList (params) {
            getAlarmList({ ...params, count: this.pagesize }).then(res => {
                if (this.res.data.data.records > 0) {
                    this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                } else {
                    this.policeSituationHistoryArr = []
                }
            })

            // this.policeSituationHistoryArr = [{
            //     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.policeSituationHistoryArr = this.policeSituationHistoryArr.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })
        },

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

            if (type == 0) {
                this.getAlarmList(type, this.dateFormat(this.currentWeekTime))
            } else {
                this.currentMonthTime == '' ? this.currentMonthTime = new Date() : ''
            this.currentPage = 1

                this.getAlarmList(type, this.dateFormat(this.currentMonthTime))
            }
            this.getAlarmList({ type, time: this.dateFormat(new Date()), page: this.currentPage })

            this.$emit('policeSituationChange')
        },
@@ -335,14 +481,25 @@
        historyTabClick (type) {
            this.historytype = type

            this.setTableHeight()

            this.timetype = 0

            this.currentWeekTime = new Date()
            const date = this.currentTime.map(item => {
                return this.dateFormat(item)
            })

            if (type == 0) {
                this.getAnswerPolices()

            } else {
                this.getAlarmList(this.timetype, this.dateFormat(this.currentWeekTime))
                this.currentPage = 1

                this.getAlarmList({
                    start: date[0],
                    end: date[1],
                    page: this.currentPage
                })
            }

            this.$emit('changePoliceSituationHistoryType', type)
@@ -400,6 +557,10 @@
                this.$emit('policeSituationSiteClick', item)
            }
        }
    },

    destroyed () {
        window.removeEventListener('resize', this.setTableHeight)
    }
}
</script>
@@ -597,6 +758,31 @@
        }
    }

    .current-table-body {
        margin: 12px;
        margin-top: 10px;
        margin-bottom: 14px;
        width: calc(100% - 24px);
        height: calc(100% - 80px);

        :deep(.el-table__body-wrapper) {
            td {
                .cell {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }

        .pages {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }


    .border-svg {
        position: absolute;

 src/views/home/components/rightContainer.vue

@@ -6,15 +6,10 @@
                    <div>值班信息(当日)</div>
                </div>
                <div class="table-box">
                    <el-table
                        size="small"
                        :height="tableHeight"
                        :data="schedulingList"
                        style="width: 100%"
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName"
                    >
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="station" label="岗位"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="contact" label="联系方式"></el-table-column>
@@ -23,19 +18,10 @@
            </div>

            <svg class="border-svg">
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
@@ -45,47 +31,19 @@
                <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>
                        <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>
            </div>

            <svg class="border-svg">
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
@@ -131,19 +89,10 @@
            </div>

            <svg class="border-svg">
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
@@ -448,11 +397,15 @@
        // 获取案件统计值
        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: [] })
                if (res.data.length > 0) {
                    return res.data.reduce((previous, current) => {
                        previous.xData.push(current.days)
                        previous.yData.push(current.cout)
                        return previous
                    }, { xData: [], yData: [] })
                } else {
                    return { xData: [], yData: [] }
                }
            })

            return caseAll
@@ -891,7 +844,7 @@
                background: $sub-tab-bg-color;
                cursor: pointer;

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }