首页数据联动

guanqb

2022-10-27 ed8a060f20abb725487d01acd447f78952e4df26

首页数据联动

 src/views/home/components/leftContainer.vue

@@ -38,6 +38,9 @@

            <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">
                <i class="el-icon-back"></i>
            </div>
        </div>
        <div class="house-box">
            <div class="title">
@@ -154,7 +157,9 @@
                { 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': '重点上访人员' }
            ]
            ],
            dataDeep: 1,
            keyPersonOption: {},
        }
    },
    mounted () {
@@ -429,7 +434,7 @@
        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                let xDate, yDate
                //户籍人口
                this.dataDeep = 2
                if (params.name == '车站派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [88, 221, 641, 432, 123]
@@ -523,29 +528,36 @@
        initkeyPersonEcharts () {
            var chartDom = document.getElementById('keyPersonEcharts')
            keyPersonmyChart = this.$echarts.init(chartDom)
            var option
            let dataArr = [
                { value: 26, name: '涉恐人员' },
                { value: 31, name: '涉稳人员' },
                { value: 27, name: '涉毒人员' },
                { value: 24, name: '在逃人员' },
                { value: 20, name: '重大刑事犯罪前科人员' },
                { value: 10, name: '肇事肇祸精神病人' },
                { value: 30, name: '重点上访人员' },
            ]
            option = {
            let dataArr = this.getKeyPersonData(this.keyPersonDetailArr)
            keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr, '全部', ''))
        },
        initkeyPersonOption (dataArr, policeStation, area) {
            return {
                title: {
                    text: `${policeStation}`,
                    subtext: `${area}`,
                    textStyle: {
                        color: '#FFF',
                        align: 'center'
                    },
                    subtextStyle: {
                        fontFamily: "微软雅黑",
                        color: '#FFF',
                    }

                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: '48%',
                    y: '20%',
                    y: '10%',
                    itemGap: 20,
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (name) {
                        let data = option.series[0].data
                        let data = dataArr
                        let tarValue
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].name == name) {
@@ -580,9 +592,92 @@
                    y2: 20
                },
            }

            option && keyPersonmyChart.setOption(option)
        },

        selectChangeData (name) {
            if (this.peopletype == 0 && this.tabType == 0) {
                let xDate, yDate
                if (name == '车站派出所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (name == '沙溪派出所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [641, 423, 221, 123, 88]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (name == '灵溪派出所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [111, 531, 211, 431, 64]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (name == '北门派出所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [887, 234, 452, 321, 154]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (name == '江光派出所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [400, 500, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (name == '全部') {
                    this.dataDeep = 1
                    xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                    yDate = [881, 2211, 6414, 4321, 1232]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                }
            }

        },

        backBegin () {
            this.dataDeep = 1
            let xDate, yDate
            if (this.tabType == 0) {
                xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                yDate = [881, 2211, 6414, 4321, 1232]
            } else if (this.tabType == 1) {
                xDate = ['湖北', '上海', '北京', '广东', '浙江']
                yDate = [6414, 4231, 2211, 1231, 881]
            } else if (this.tabType == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
        },

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

    }
}
@@ -623,6 +718,19 @@
            width: 400px;
            overflow: hidden;
        }
        .back {
            color: #fff;
            position: absolute;
            top: 104px;
            left: 43px;
            width: 20px;
            height: 20px;
            font-size: 20px;
            cursor: pointer;
        }
        .back:hover {
            color: #43bafe;
        }
    }
    .house-box {
        height: 30%;

 src/views/home/index.vue

@@ -16,6 +16,7 @@
                @showpeopledetail="showpeopledetail"
                @showlanddetail="showlanddetail"
                @showkeypersondetail="showkeypersondetail"
                ref="leftContainer"
            ></left-container>
        </div>
        <div class="right-container">
@@ -525,6 +526,8 @@
                this.initAreaOptionLayer(item)
                cylinderLayer.clear()
            }
            // 同步改变户籍人口柱状图数据
            this.$refs.leftContainer.selectChangeData(item.policeStationName)
        },

        areaSelect (item) {