人员模块与下拉框数据联动

guanqb

2022-10-28 7dfb74d7a75afed8d2163ea443f172609f9f9d07

人员模块与下拉框数据联动

 src/views/home/components/leftContainer.vue

@@ -38,7 +38,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" @click="backBegin">
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            >
                <i class="el-icon-back"></i>
            </div>
        </div>
@@ -160,6 +165,50 @@
            ],
            dataDeep: 1,
            keyPersonOption: {},
            keyPersonSelectArr: [
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区2', 'type': '肇事肇祸精神病人' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区3', 'type': '重点上访人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区4', 'type': '涉恐人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区2', 'type': '涉毒人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3', 'type': '在逃人员' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4', 'type': '重大刑事犯罪前科人员' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光派出所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站派出所', 'housingEastate': '责任区4', 'type': '涉稳人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪派出所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区2', 'type': '涉恐人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪派出所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区1', 'type': '在逃人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
            ],
        }
    },
    mounted () {
@@ -516,7 +565,7 @@
        clickkeyPersonChart () {
            keyPersonmyChart.on('click', params => {
                let keyPersonDetailNewArr = []
                this.keyPersonDetailArr.some((item) => {
                this.keyPersonSelectArr.some((item) => {
                    if (item.type == params.name) {
                        keyPersonDetailNewArr.push(item)
                    }
@@ -528,24 +577,12 @@
        initkeyPersonEcharts () {
            var chartDom = document.getElementById('keyPersonEcharts')
            keyPersonmyChart = this.$echarts.init(chartDom)
            let dataArr = this.getKeyPersonData(this.keyPersonDetailArr)
            keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr, '全部', ''))
            let dataArr = this.getKeyPersonCount(this.keyPersonSelectArr)
            keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr))
        },
        initkeyPersonOption (dataArr, policeStation, area) {
            return {
                title: {
                    text: `${policeStation}`,
                    subtext: `${area}`,
                    textStyle: {
                        color: '#FFF',
                        align: 'center'
                    },
                    subtextStyle: {
                        fontFamily: "微软雅黑",
                        color: '#FFF',
                    }

                },
        initkeyPersonOption (dataArr) {
            return {
                tooltip: {
                    trigger: 'item'
                },
@@ -594,7 +631,7 @@
            }
        },

        selectChangeData (name) {
        selectPoliceChangeData (name) {
            if (this.peopletype == 0 && this.tabType == 0) {
                let xDate, yDate
                if (name == '车站派出所') {
@@ -629,7 +666,19 @@
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                }
            }
            let arr = []
            if (name == '全部') {
                this.keyPersonSelectArr = this.keyPersonDetailArr
            } else {
                this.keyPersonDetailArr.some(item => {
                    if (item.policeStation == name) {
                        arr.push(item)
                    }
                    this.keyPersonSelectArr = arr
                })
            }

            this.initkeyPersonEcharts()
        },

        backBegin () {
@@ -648,23 +697,23 @@
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
        },

        getKeyPersonData (arr) {
        getKeyPersonCount (arr) {
            let valueArr = [0, 0, 0, 0, 0, 0, 0]
            arr.some(item => {
                if (item.type == '涉恐人员') {
                    valueArr[0] = Number(valueArr[0]) + 1
                } else if (item.type == '涉稳人员') {
                    valueArr[1] = Number(valueArr[0]) + 1
                    valueArr[1] = Number(valueArr[1]) + 1
                } else if (item.type == '涉毒人员') {
                    valueArr[2] = Number(valueArr[0]) + 1
                    valueArr[2] = Number(valueArr[2]) + 1
                } else if (item.type == '在逃人员') {
                    valueArr[3] = Number(valueArr[0]) + 1
                    valueArr[3] = Number(valueArr[3]) + 1
                } else if (item.type == '重大刑事犯罪前科人员') {
                    valueArr[4] = Number(valueArr[0]) + 1
                    valueArr[4] = Number(valueArr[4]) + 1
                } else if (item.type == '肇事肇祸精神病人') {
                    valueArr[5] = Number(valueArr[0]) + 1
                    valueArr[5] = Number(valueArr[5]) + 1
                } else if (item.type == '重点上访人员') {
                    valueArr[6] = Number(valueArr[0]) + 1
                    valueArr[6] = Number(valueArr[6]) + 1
                }
            })
            let KeyPersonDataArr = [
@@ -677,6 +726,19 @@
                { value: valueArr[6], name: '重点上访人员' }
            ]
            return KeyPersonDataArr
        },

        selectAreaChangeData (name) {
            if (name != '全部') {
                let arr = []
                this.keyPersonSelectArr.some(item => {
                    if (item.housingEastate == name) {
                        arr.push(item)
                    }
                })
                this.keyPersonSelectArr = arr
            }
            this.initkeyPersonEcharts()
        }

    }
@@ -722,7 +784,7 @@
            color: #fff;
            position: absolute;
            top: 104px;
            left: 43px;
            left: 374px;
            width: 20px;
            height: 20px;
            font-size: 20px;

 src/views/home/index.vue

@@ -526,8 +526,7 @@
                this.initAreaOptionLayer(item)
                cylinderLayer.clear()
            }
            // 同步改变户籍人口柱状图数据
            this.$refs.leftContainer.selectChangeData(item.policeStationName)
            this.$refs.leftContainer.selectPoliceChangeData(item.policeStationName)
        },

        areaSelect (item) {
@@ -540,6 +539,7 @@
                this.areaChecked = item
                this.initHousingLayer(item)
            }
            this.$refs.leftContainer.selectAreaChangeData(item.areaCheckName)
        },

        housingSelect (item) {