1
guanqb
2022-11-12 b97c35de5e16db89e9034f9545fdc19c5e6a384b
1
1 files modified
110 ■■■■■ changed files
src/views/home/components/leftContainer.vue 110 ●●●●● patch | view | raw | blame | history
src/views/home/components/leftContainer.vue
@@ -223,10 +223,10 @@
        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)
            homePersonmyChart.setOption(this.initPersonOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [881, 2211, 6414, 4321, 1232]))
            homePersonmyChart.setOption(this.initPersonOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [881, 2211, 6414, 4321, 1232], ['#06B5D7', '#44C0C1', '#71C8B1']))
        },
        initPersonOptions (xDate, yDate) {
        initPersonOptions (xDate, yDate, colors) {
            return {
                tooltip: {
                    trigger: 'item',
@@ -263,26 +263,27 @@
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return new global.echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: '#06B5D7' },
                                            { offset: 0.5, color: '#44C0C1' },
                                            { offset: 1, color: '#71C8B1' },
                                            { offset: 0, color: colors[0] },
                                            { offset: 0.5, color: colors[1] },
                                            { offset: 1, color: colors[2] },
                                        ]
                                    )
                                }
                            },
                            emphasis: {
                                color: new global.echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#71C8B1' },
                                        { offset: 0.7, color: '#44C0C1' },
                                        { offset: 1, color: '#06B5D7' }
                                    ]
                                )
                                color: function (params) {
                                    return new global.echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: colors[2] },
                                            { offset: 0.7, color: colors[1] },
                                            { offset: 1, color: colors[0] }
                                        ]
                                    )
                                }
                            }
                        },
                    }
@@ -299,19 +300,22 @@
        personTabClick (type) {
            this.tabType = type
            this.dataDeep = 1
            let xDate, yDate
            let xDate, yDate, colors
            if (type == 0) {
                xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                yDate = [881, 2211, 6414, 4321, 1232]
                colors = ['#06B5D7', '#44C0C1', '#71C8B1']
            } else if (type == 1) {
                xDate = ['湖北', '上海', '北京', '广东', '浙江']
                yDate = [6414, 4231, 2211, 1231, 881]
                colors = ['#ef9faa', '#f7bfc6', '#fedade']
            } else if (type == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
                colors = ['#2495b3', '#49b5d0', '#63cde5']
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },
        inithouseEcharts () {
@@ -495,68 +499,83 @@
        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                let xDate, yDate
                let xDate, yDate, colors
                this.dataDeep = 2
                if (params.name == '车站派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#ccf9d0', '#f9d888', '#f7857e']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '沙溪派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [641, 423, 221, 123, 88]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#102129', '#1f3942', '#2a4f5f']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '灵溪派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [111, 531, 211, 431, 64]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#23b9e9', '#c76ee0', '#f05265']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '北门派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [887, 234, 452, 321, 154]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#b22d2b', '#614976', '#4c3042']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '江光派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [400, 500, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#3089bf', '#77d8f9', '#f4fcfe']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '湖北') {
                    xDate = ['武汉市', '黄石市', '宜昌市', '鄂州市', '荆门市']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#2b5144', '#5a987f', '#94ebc1']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '上海') {
                    xDate = ['黄浦区', '长宁区', '静安区', '虹口区', '闵行区']
                    yDate = [641, 423, 221, 123, 88]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#f750c2', '#d6369a', '#bc1f76']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '北京') {
                    xDate = ['东城区', '西城区', '海淀区', '昌平区', '大兴区']
                    yDate = [111, 531, 211, 431, 64]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#7e81d5', '#86abe6', '#8fe5e3']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '广东') {
                    xDate = ['珠海市', '东菀市', '佛山市', '中山市', '惠州市']
                    yDate = [887, 234, 452, 321, 154]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#ba1432', '#6b0e33', '#2a0b35']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '浙江') {
                    xDate = ['杭州市', '舟山市', '宁波市', '嘉兴市', '绍兴市']
                    yDate = [400, 300, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#f12e10', '#f36c15', '#f4a818']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '日本') {
                    xDate = ['东京都', '北海道', '大阪府', '京都府', '43县']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#6e978f', '#ad885a', '#e97b27']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '美国') {
                    xDate = ['加利福尼亚州', '德克萨斯州', '纽约州', '俄亥俄州']
                    yDate = [641, 423, 221, 123, 88]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#d54956', '#9f976e', '#73d781']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '俄罗斯') {
                    xDate = ['西北联邦', '中央联邦', '南方联邦', '伏尔加联邦']
                    yDate = [111, 531, 211, 431, 64]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#7d65c0', '#a47db4', '#e0a8c5']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '英国') {
                    xDate = ['英格兰', '威尔士', '苏格兰', '北爱尔兰']
                    yDate = [887, 234, 452, 321, 154]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#584d7b', '#9b836a', '#f8ce52']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '印度') {
                    xDate = ['德里', '哈里亚纳邦', '旁遮普邦', '喜马偕尔邦', '北方邦']
                    yDate = [400, 300, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#0f97f2', '#7d629d', '#e1344f']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else {
                    this.$emit('showpeopledetail', params.name)
                }
@@ -656,37 +675,43 @@
        selectPoliceChangeData (name) {
            if (this.peopletype == 0 && this.tabType == 0) {
                let xDate, yDate
                let xDate, yDate, colors
                if (name == '车站派出所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#0f97f2', '#7d629d', '#e1344f']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), 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)
                    colors = ['#584d7b', '#9b836a', '#f8ce52']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), 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)
                    colors = ['#7d65c0', '#a47db4', '#e0a8c5']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), 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)
                    colors = ['#6e978f', '#ad885a', '#e97b27']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), 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)
                    colors = ['#7e81d5', '#86abe6', '#8fe5e3']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '全部') {
                    this.dataDeep = 1
                    xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                    yDate = [881, 2211, 6414, 4321, 1232]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                    colors = ['#f750c2', '#d6369a', '#bc1f76']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                }
            } else if (this.peopletype == 1) {
                let arr = []
@@ -708,18 +733,21 @@
        backBegin () {
            this.dataDeep = 1
            let xDate, yDate
            let xDate, yDate, colors
            if (this.tabType == 0) {
                xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                yDate = [881, 2211, 6414, 4321, 1232]
                colors = ['#2c9b00', '#fdef00', '#fd3200']
            } else if (this.tabType == 1) {
                xDate = ['湖北', '上海', '北京', '广东', '浙江']
                yDate = [6414, 4231, 2211, 1231, 881]
                colors = ['#63b783', '#9b83d7', '#6430c4']
            } else if (this.tabType == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
                colors = ['#085fa9', '#83aec6', '#dfe9dc']
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },
        getKeyPersonCount (arr) {