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

shuishen

2022-10-27 bc98cc82d732df2680aad17d6ec9c7f401c64308

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

 src/styles/base/index.css

@@ -141,3 +141,18 @@
.land-details-box .el-dialog .el-dialog__body {
  flex: 1;
}

.keyPerson-details-box .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 650px;
  height: 300px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.keyPerson-details-box .el-dialog .el-dialog__body {
  flex: 1;
}

 src/styles/base/index.min.css

@@ -1 +1 @@
*{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:220px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:750px;height:580px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}
*{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:220px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:750px;height:580px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}.keyPerson-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:650px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.keyPerson-details-box .el-dialog .el-dialog__body{flex:1}

 src/styles/base/index.scss

@@ -155,4 +155,20 @@
                flex: 1;
            }
    }
}
}
.keyPerson-details-box {
    .el-dialog {
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 650px;
        height: 300px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {
            flex: 1;
        }
    }
}

 src/views/home/components/leftContainer.vue

@@ -37,20 +37,7 @@
            </div>

            <div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div>
            <div class="peopleTable" v-show="peopletype == 1">
                <el-table
                    :data="peopleArr"
                    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"
                >
                    <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                    <el-table-column prop="sex" label="性别" width="50"></el-table-column>
                    <el-table-column prop="age" label="年龄" width="50"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>
            </div>
            <div id="keyPersonEcharts" class="peopleTable" v-show="peopletype == 1"></div>
        </div>
        <div class="house-box">
            <div class="title">
@@ -93,6 +80,7 @@
let homePersonmyChart
let houseMyChart
let landMyChart
let keyPersonmyChart

export default {
    data () {
@@ -123,6 +111,28 @@
                { 'housingEastate': '责任区4', 'location': 'XXXXXXXX', 'area': '2555亩', 'superintendent': '王四壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '责任区5', 'location': 'XXXXXX', 'area': '1922亩', 'superintendent': '王美丽', 'phone': '154XXXX6666' },
            ],
            keyPersonDetailArr: [
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区1' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区2' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区3' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区4' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区1' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区2' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区3' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区4' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区1' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区2' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区1' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区2' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区4' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区1' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区2' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区3' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区4' },
            ]
        }
    },
    mounted () {
@@ -131,6 +141,8 @@
        this.inithouseEcharts()
        this.clickPeopleChart()
        this.clickLandChart()
        this.initkeyPersonEcharts()
        this.clickkeyPersonChart()
    },
    methods: {
        initPersonEcharts () {
@@ -466,6 +478,80 @@
            })
        },

        clickkeyPersonChart () {
            keyPersonmyChart.on('click', params => {
                let keyPersonDetailNewArr = []
                this.keyPersonDetailArr.some((item) => {
                    if (item.policeStation == params.name) {
                        keyPersonDetailNewArr.push(item)
                    }
                })
                this.$emit('showkeypersondetail', params.name, keyPersonDetailNewArr)
            })
        },

        initkeyPersonEcharts () {
            var chartDom = document.getElementById('keyPersonEcharts')
            keyPersonmyChart = this.$echarts.init(chartDom)
            var option
            let dataArr = [
                { value: 46, name: '沙溪派出所' },
                { value: 31, name: '灵溪派出所' },
                { value: 27, name: '北门派出所' },
                { value: 24, name: '江光派出所' },
                { value: 10, name: '车站派出所' },
            ]
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: '60%',
                    y: '25%',
                    itemGap: 20,
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (name) {
                        let data = option.series[0].data
                        let tarValue
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].name == name) {
                                tarValue = data[i].value
                            }
                        }
                        let v = tarValue
                        return `${name}     ${v} 个    `
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['27%', '57%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: dataArr
                    }
                ],
                grid: {
                    x: 10,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
            }

            option && keyPersonmyChart.setOption(option)
        },

    }
}
</script>
@@ -501,6 +587,8 @@
        }
        .peopleTable {
            height: calc(100% - 40px);
            height: 250px;
            width: 400px;
            overflow: hidden;
        }
    }

 src/views/home/components/rightContainer.vue

@@ -262,37 +262,14 @@

        clickEquimentChart () {
            equipmentmyChart.on('click', params => {
                // this.monitorContent = false
                // this.othersContent = true
                // this.$emit('showequimentdetail', params.name, this.monitorContent, this.othersContent,showBooleanArr,showArr)
                this.$emit('showequimentdetail', params.name, false, true, [false, false, false], [])
                // this.equimentTitle = params.name
                // this.equimentVisible = true

                if (params.name == '摄像头') {
                    // this.othersContent = false
                    // this.monitorContent = true
                    this.$emit('showequimentdetail', params.name, true, false, [false, false, false], [])
                } else if (params.name == '手台') {
                    // this.recorderArrShow = false
                    // this.carArrShow = false
                    // this.phoneArrShow = true
                    // this.saveArr = this.phoneArr
                    // this.showArr = this.saveArr
                    this.$emit('showequimentdetail', params.name, false, true, [false, false, true], this.phoneArr)
                } else if (params.name == '车辆') {
                    // this.recorderArrShow = false
                    // this.carArrShow = true
                    // this.phoneArrShow = false
                    // this.saveArr = this.carArr
                    // this.showArr = this.saveArr
                    this.$emit('showequimentdetail', params.name, false, true, [false, true, false], this.carArr)
                } else if (params.name == '执法记录仪') {
                    // this.recorderArrShow = true
                    // this.carArrShow = false
                    // this.phoneArrShow = false
                    // this.saveArr = this.recorderArr
                    // this.showArr = this.saveArr
                    this.$emit('showequimentdetail', params.name, false, true, [true, false, false], this.recorderArr)
                }
            })

 src/views/home/index.vue

@@ -12,7 +12,11 @@
<template>
    <div class="container">
        <div class="left-container">
            <left-container @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"></left-container>
            <left-container
                @showpeopledetail="showpeopledetail"
                @showlanddetail="showlanddetail"
                @showkeypersondetail="showkeypersondetail"
            ></left-container>
        </div>
        <div class="right-container">
            <right-container @showequimentdetail="showequimentdetail"></right-container>
@@ -317,6 +321,29 @@
                <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog
            :title="keyPersonTitle"
            :modal="true"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
                :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
            >
                <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                <el-table-column prop="sex" label="性别" width="100"></el-table-column>
                <el-table-column prop="address" label="地址" width="100"></el-table-column>
                <el-table-column prop="phone" label="电话" width="130"></el-table-column>
                <el-table-column prop="policeStation" label="所属派出所" width="100"></el-table-column>
                <el-table-column prop="housingEastate" label="所属责任区" width="100"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

@@ -349,10 +376,12 @@
            panoramaTitle: '',
            activityTitle: '',
            equimentTitle: '',
            keyPersonTitle: '',
            landTitle: '',
            panoramaVisible: false,
            activityVisible: false,
            equimentVisible: false,
            keyPersonVisible: false,
            landVisible: false,
            phoneDetails: {},
            phoneTitle: '',
@@ -455,6 +484,7 @@
            currentPage: 1,
            pagesize: 9,
            landDetailArr: [],
            keyPersonDetailArr: [],
            timetype: 0,
        }
    },
@@ -1005,7 +1035,13 @@
            this.phoneArrShow = booleans[2]
            this.saveArr = arr
            this.showArr = arr
        }
        },

        showkeypersondetail (name, arr) {
            this.keyPersonVisible = true
            this.keyPersonTitle = name
            this.keyPersonDetailArr = arr
        },

    },