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

guanqb

2022-10-31 7428f77a6dfcb8585e707209f233a15966227e8e

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

 package-lock.json

Diff too large

 package.json

@@ -13,6 +13,7 @@
        "axios": "^0.22.0",
        "core-js": "^3.6.5",
        "echarts": "^5.2.1",
        "element-resize-detector": "^1.2.4",
        "element-ui": "^2.15.6",
        "font-awesome": "^4.7.0",
        "qs.js": "^0.1.12",

 src/components/echarts/BarCharts.vue

New file
@@ -0,0 +1,119 @@
<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>
  
<script>
import chartResize from './mixins/chart-resize'

export default {
    mixins: [chartResize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        },
        // 父组件传递过来的图表数据
        chartData: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            // Echarts实例
            chart: null
        }
    },
    watch: {
        /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
        chartData: {
            deep: true,
            handler (val) {
                this.setOptions(val)
            }
        }
    },
    mounted () {
        /* 图表初始化 */
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy () {
        if (!this.chart) {
            return
        }
        /* 释放图表实例 */
        this.chart.dispose()
        /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
        this.chart = null
    },
    methods: {
        initChart () {
            this.chart = this.$echarts.init(this.$el)
            this.setOptions(this.chartData)
        },

        setOptions ({ days, data1, data2 } = {}) {
            this.chart.setOption({
                title: {
                    text: '堆叠柱状图',
                    textStyle: {
                        fontSize: 15
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    top: 35,
                    left: '2%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: days,
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {
                        show: false
                    }
                }],
                series: [{
                    name: '数量一',
                    type: 'bar',
                    stack: 'vistors',
                    barWidth: '60%',
                    data: data1,
                    animationDuration: 2000
                },
                {
                    name: '数量二',
                    type: 'bar',
                    stack: 'vistors',
                    barWidth: '60%',
                    data: data2,
                    animationDuration: 2000
                }]
            })
        }
    }
}
</script>

 src/components/echarts/mixins/chart-resize.js

New file
@@ -0,0 +1,42 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-10-31 11:02:28
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-31 11:02:55
 * @FilePath: \srs-police-affairs\src\components\echarts\mixins\chart-resize.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */

// 是一个监听元素大小改变的插件，除了窗口的大小改变会引起变形之外，echart实例的父元素大小改变也会使其变形，所以我们还要对其父元素大小改变进行监听，做到完全的自适应。
import ResizeListener from 'element-resize-detector'

export default {
    methods: {
        /* 对chart元素尺寸进行监听，当发生变化时同步更新echart视图 */
        chartEleResizeListener () {
            const chartInstance = ResizeListener({
                strategy: 'scroll',
                callOnAdd: true
            })
            chartInstance.listenTo(this.$el, () => {
                if (!this.chart) return
                this.chart.resize()
            })
        },

        /* 当窗口缩放时，echart动态调整自身大小 */
        windowResizeListener () {
            if (!this.chart) return
            this.chart.resize()
        }
    },
    mounted () {
        window.addEventListener('resize', this.windowResizeListener)
        this.chartEleResizeListener()
    },
    beforeDestroy () {
        window.removeEventListener('resize', this.windowResizeListener)
    }
}

 src/views/activity/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-29 15:20:12
 * @LastEditTime: 2022-10-31 08:58:22
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 
@@ -593,7 +593,7 @@

        play () {
            tc.play()
            this.view('2')
            this.view('1', -20, 100)
        },

        pause () {

 src/views/home/components/leftContainer.vue

@@ -3,34 +3,26 @@
        <div class="person-box">
            <div class="title">
                <i></i>
                <span
                    class="peopleTap"
                    :class="{choosed:peopletype == 0}"
                    @click="peopleTabClick(0)"
                >现有人员</span>
                <span class="peopleTap" :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
                <span>/</span>
                <span
                    class="peopleTap"
                    :class="{choosed:peopletype == 1}"
                    @click="peopleTabClick(1)"
                >重点人员</span>
                <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                <span class="word before">共</span>
                <span class="peopleNum" :class="{choosed:peopletype == 0}">100</span>
                <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>
                <span class="word">/</span>
                <span class="peopleNum" :class="{choosed:peopletype == 1}">1</span>
                <span class="peopleNum" :class="{ choosed: peopletype == 1 }">1</span>
                <span class="word">人</span>
            </div>

            <div class="sub-tab" v-show="peopletype == 0">
                <div class="tab" :class="{on:tabType==0}" @click="personTabClick(0)">
                <div class="tab" :class="{ on: tabType == 0 }" @click="personTabClick(0)">
                    <div class="num">164.57万人</div>
                    <div class="type">户籍人口</div>
                </div>
                <div class="tab" :class="{on:tabType==1}" @click="personTabClick(1)">
                <div class="tab" :class="{ on: tabType == 1 }" @click="personTabClick(1)">
                    <div class="num">17.52万人</div>
                    <div class="type">流动人口</div>
                </div>
                <div class="tab" :class="{on:tabType==2}" @click="personTabClick(2)">
                <div class="tab" :class="{ on: tabType == 2 }" @click="personTabClick(2)">
                    <div class="num">91995人</div>
                    <div class="type">境外人口</div>
                </div>
@@ -38,14 +30,12 @@

            <div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div>
            <div id="keyPersonEcharts" class="peopleTable" v-show="peopletype == 1"></div>
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            >


            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin">
                <i class="el-icon-back"></i>
            </div>

        </div>
        <div class="house-box">
            <div class="title">
@@ -53,11 +43,11 @@
            </div>

            <div class="sub-tab">
                <div class="tab" :class="{on:tabTypeTwo==0}" @click="houseTabClick(0)">
                <div class="tab" :class="{ on: tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div class="num">1822603户</div>
                    <div class="num">实有房屋</div>
                </div>
                <div class="tab" :class="{on:tabTypeTwo==1}" @click="houseTabClick(1)">
                <div class="tab" :class="{ on: tabTypeTwo == 1 }" @click="houseTabClick(1)">
                    <div class="num">634个</div>
                    <div class="num">关注场所</div>
                </div>
@@ -70,11 +60,11 @@
                <i></i> 现有地
            </div>
            <div class="sub-tab">
                <div class="tab" :class="{on:tabTypeThree==0}" @click="landTabClick(0)">
                <div class="tab" :class="{ on: tabTypeThree == 0 }" @click="landTabClick(0)">
                    <div class="num">634个</div>
                    <div class="num">小区</div>
                </div>
                <div class="tab" :class="{on:tabTypeThree==1}" @click="landTabClick(1)">
                <div class="tab" :class="{ on: tabTypeThree == 1 }" @click="landTabClick(1)">
                    <div class="num">634个</div>
                    <div class="num">责任区</div>
                </div>
@@ -741,6 +731,31 @@
            this.initkeyPersonEcharts()
        }

    },

    destroyed () {
        if (!homePersonmyChart) {
            return
        }
        if (!houseMyChart) {
            return
        }
        if (!landMyChart) {
            return
        }
        if (!keyPersonmyChart) {
            return
        }

        homePersonmyChart.dispose()
        houseMyChart.dispose()
        landMyChart.dispose()
        keyPersonmyChart.dispose()

        homePersonmyChart = null
        houseMyChart = null
        landMyChart = null
        keyPersonmyChart = null
    }
}
</script>
@@ -753,33 +768,41 @@

    .person-box {
        height: 35%;

        .peopleTap {
            color: rgb(98, 95, 95);
            cursor: pointer;
        }

        .peopleTap:hover {
            text-decoration: underline;
        }

        .choosed {
            color: #fff;
        }

        .peopleNum {
            color: rgb(98, 95, 95);
            font-size: 14px;
        }

        .word {
            color: #fff;
            font-size: 14px;
        }

        .before {
            margin-left: 108px;
        }

        .peopleTable {
            height: calc(100% - 40px);
            height: 250px;
            width: 400px;
            overflow: hidden;
        }

        .back {
            color: #fff;
            position: absolute;
@@ -790,10 +813,12 @@
            font-size: 20px;
            cursor: pointer;
        }

        .back:hover {
            color: #43bafe;
        }
    }

    .house-box {
        height: 30%;
    }
@@ -801,6 +826,7 @@
    .land-box {
        height: 35%;
    }

    .person-box,
    .house-box,
    .land-box {
@@ -822,6 +848,7 @@
                background: #43bafe;
                box-shadow: 0px 0px 8px 2px #43bafe;
            }

            .choosed {
                color: #fff;
            }
@@ -843,7 +870,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -860,10 +887,11 @@
            height: calc(100% - 104px);
        }

        .sub-tab + .echarts-box {
        .sub-tab+.echarts-box {
            margin-top: 10px;
        }
    }

    :deep(.el-table__body-wrapper) {
        overflow-x: hidden !important;
    }

 src/views/home/components/rightContainer.vue

@@ -4,16 +4,9 @@
            <div class="title">
                <i></i> 案件统计
                <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 v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </div>

@@ -23,19 +16,15 @@
            <div class="title">
                <i></i>
                <span style="margin-right:130px">安保活动</span>
                <span class="activity" :class="{choosed:acttype==0}" @click="actTabClick(0)">正在进行</span>
                <span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>
                <span>/</span>
                <span class="activity" :class="{choosed:acttype==1}" @click="actTabClick(1)">历史活动</span>
                <span class="activity" :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table
                    :data="acttype == 0 ? underwayArr : historyArr"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                    :cell-style="{'text-align':'center','borderColor':'#324e75'}"
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                >
                <el-table :data="acttype == 0 ? underwayArr : historyArr" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName" ref="activityTable">
                    <el-table-column prop="activityName" label="活动名称" width="100"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="100"></el-table-column>
@@ -46,7 +35,7 @@
        <div class="crowd-box">
            <div class="title">
                <i></i> 现有设备
                <span class="regionTotal">{{regionTotal}}个</span>
                <span class="regionTotal">{{ regionTotal }}个</span>
            </div>
            <div id="EquipmentEcharts" class="echarts-box"></div>
        </div>
@@ -381,6 +370,21 @@



    },

    destroyed () {
        if (!equipmentmyChart) {
            return
        }
        if (!eventchangemychart) {
            return
        }

        equipmentmyChart.dispose()
        eventchangemychart.dispose()

        equipmentmyChart = null
        eventchangemychart = null
    }
}
</script>
@@ -390,6 +394,7 @@
    position: relative;
    height: 100%;
    width: 100%;

    .case-box {
        height: 30%;
    }
@@ -403,6 +408,7 @@
            overflow-y: auto;
        }
    }

    .case-box,
    .alert-box,
    .crowd-box {
@@ -428,11 +434,13 @@
                background: #43bafe;
                box-shadow: 0px 0px 8px 2px #43bafe;
            }

            .timer {
                width: 250px;
                height: 30px;
                float: right;
            }

            .regionTotal {
                color: #fff;
                font-size: 22px;
@@ -440,14 +448,17 @@
                margin-left: 50%;
                letter-spacing: 1px;
            }

            .activity {
                font-size: 16px;
                color: rgb(98, 95, 95);
                cursor: pointer;
            }

            .activity:hover {
                text-decoration: underline;
            }

            .choosed {
                color: #fff;
            }
@@ -469,7 +480,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -484,7 +495,7 @@
            flex: 1;
        }

        .sub-tab + .echarts-box {
        .sub-tab+.echarts-box {
            margin-top: 10px;
        }


 vue.config.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:37:07
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-28 08:56:34
 * @LastEditTime: 2022-10-31 08:59:05
 * @FilePath: \srs-police-affairs\vue.config.js
 * @Description: 
 * 
@@ -41,6 +41,10 @@
                    to: 'img'
                },
                {
                    from: './public/model',
                    to: 'model'
                },
                {
                    from: './public/video',
                    to: 'video'
                },