首页echarts内容布局调整

guanqb

2022-10-20 9cca6c35dec3badf22c6f1bc4c97117d19b60d19

首页echarts内容布局调整

 src/views/home/index.vue

@@ -14,7 +14,7 @@
        <div class="left-container">
            <div class="person-box">
                <div class="title">
                    <i></i> 现有人员
                    <i></i> 现有人员/重点人员 共100/1人
                </div>

                <div class="sub-tab">
@@ -34,66 +34,90 @@

                <div id="PersonEcharts" class="echarts-box"></div>
            </div>
            <div class="land-box">
            <div class="house-box">
                <div class="title">
                    <i></i> 现有房屋
                </div>

                <div class="sub-tab">
                    <div class="tab" :class="{on:tabTypeTwo==0}" @click="landTabClick(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="landTabClick(1)">
                    <div class="tab" :class="{on:tabTypeTwo==1}" @click="houseTabClick(1)">
                        <div class="num">634个</div>
                        <div class="num">关注场所</div>
                    </div>
                </div>

                <div id="LandEcharts" class="echarts-box"></div>
                <div id="houseEcharts" class="echarts-box"></div>
            </div>
            <div class="equipment-box">
            <div class="land-box">
                <div class="title">
                    <i></i> 现有设备
                    <i></i> 现有地
                </div>

                <div id="EquipmentEcharts" class="echarts-box"></div>
                <div class="sub-tab">
                    <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="num">634个</div>
                        <div class="num">责任区</div>
                    </div>
                </div>
                <div id="landEcharts" class="echarts-box"></div>
                <!-- <div id="EquipmentEcharts" class="echarts-box"></div> -->
            </div>
        </div>

        <div class="right-container">
            <div class="case-box">
                <div class="title">
                    <i></i> 警情动态
                    <i></i> 案件统计
                </div>

                <div id="EventChangeEcharts" class="echarts-box"></div>
            </div>
            <div class="alert-box">
                <div class="title">
                    <i></i> 历史警情(近一年)
                    <i></i>
                    <span style="margin-right:130px">安保活动</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>
                </div>

                <div id="EventCountEcharts" class="echarts-box"></div>
            </div>
            <div class="crowd-box">
                <div class="title">
                    <i></i> 重点人群
                </div>
                <!-- <div id="EventCountEcharts" class="echarts-box"></div> -->

                <div id="peopleList" class="echarts-box">
                    <el-table
                        :data="arr"
                        :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"
                    >
                        <el-table-column prop="type" label="人员类型" width="100"></el-table-column>
                        <el-table-column prop="num" label="人数" width="160"></el-table-column>
                        <el-table-column prop="radio" label="占比" width="120"></el-table-column>
                        <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>
                        <el-table-column prop="scale" label="规模"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="crowd-box">
                <div class="title">
                    <i></i> 现有设备
                    <span class="regionTotal">{{regionTotal}}个</span>
                </div>
                <div id="EquipmentEcharts" class="echarts-box"></div>
            </div>
        </div>

@@ -225,6 +249,7 @@

let cylinderLayer = null
let homePersonmyChart
let houseMyChart
let landMyChart

import axios from "axios"
@@ -242,6 +267,7 @@
            navType: 0,
            tabType: 0,
            tabTypeTwo: 0,
            tabTypeThree: 0,
            houseLayerShow: true,
            carLayerShow: false,
            phoneLayerShow: false,
@@ -265,12 +291,19 @@
                alt: 100,
                url: '/img/icon/map-panorama.png'
            }],
            arr: [
                { 'type': '邪教人员', 'num': '1', 'radio': '2.00%' },
                { 'type': '上访人员', 'num': '8', 'radio': '14.00%' },
                { 'type': '涉毒', 'num': '15', 'radio': '27.00%' },
                { 'type': '留守儿童', 'num': '6', 'radio': '11.00%' },
                { 'type': '重点青少年', 'num': '5', 'radio': '9.00%' }
            underwayArr: [
                { 'activityName': '进行活动1', 'startTime': '2022-10-01', 'endTime': '2022-10-02', 'scale': '1000' },
                { 'activityName': '进行活动2', 'startTime': '2022-10-03', 'endTime': '2022-10-04', 'scale': '1000' },
                { 'activityName': '进行活动3', 'startTime': '2022-10-05', 'endTime': '2022-10-06', 'scale': '1000' },
                { 'activityName': '进行活动4', 'startTime': '2022-10-07', 'endTime': '2022-10-08', 'scale': '1000' },
                { 'activityName': '进行活动5', 'startTime': '2022-10-09', 'endTime': '2022-10-10', 'scale': '1000' }
            ],
            historyArr: [
                { 'activityName': '历史活动1', 'startTime': '2021-10-01', 'endTime': '2021-10-02', 'scale': '2000' },
                { 'activityName': '历史活动2', 'startTime': '2021-10-03', 'endTime': '2021-10-04', 'scale': '2000' },
                { 'activityName': '历史活动3', 'startTime': '2021-10-05', 'endTime': '2021-10-06', 'scale': '2000' },
                { 'activityName': '历史活动4', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000' },
                { 'activityName': '历史活动5', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000' }
            ],
            policeStationCheckValue: '请选择派出所',
            areaOptionData: [],
@@ -310,7 +343,9 @@
                    244, 67, 54,
                    100
                ),
            ]
            ],
            regionTotal: 0,
            acttype: 0,
        }
    },
    created () {
@@ -325,9 +360,10 @@
    mounted () {
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()
        this.initEventCountEcharts()
        this.initPersonEcharts()
        // this.initEventCountEcharts()
        this.initLandEcharts()
        this.initPersonEcharts()
        this.inithouseEcharts()

        this.$nextTick(() => {
            this.initPoliceStationLayer()
@@ -423,7 +459,7 @@

                    axisLabel: {
                        color: "#fff",
                        interval: 0
                        interval: 0,
                    },
                    axisLine: {
                        lineStyle: {
@@ -485,18 +521,18 @@
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
        },

        initLandEcharts () {
            var chartDom = document.getElementById('LandEcharts')
            landMyChart = this.$echarts.init(chartDom)
        inithouseEcharts () {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)

            landMyChart.setOption(this.initLandOptions(['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑'], [88188, 1222211, 464104, 43201, 12302], [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]))
            houseMyChart.setOption(this.initHouseOptions(['商业房屋', '居民住宅', '公共用房', '文化场所', '政府建筑'], [88188, 1222211, 464104, 43201, 12302], [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]))

            window.addEventListener("resize", function () {
                landMyChart.resize()
                houseMyChart.resize()
            })
        },

        initLandOptions (xDate, y1Date, y2Date) {
        initHouseOptions (xDate, y1Date, y2Date) {
            return {

                color: ['#2967c4', '#112d54'],
@@ -509,7 +545,7 @@
                        show: false
                    },
                    axisLabel: {
                        show: false
                        show: false,
                    },
                    axisTick: {
                        show: false
@@ -560,7 +596,7 @@
            }
        },

        landTabClick (type) {
        houseTabClick (type) {
            this.tabTypeTwo = type

            let xDate, y1Date, y2Date
@@ -574,52 +610,103 @@
                y1Date = [54, 77, 97, 141, 191]
                y2Date = [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }]
            }
            landMyChart.setOption(this.initLandOptions(xDate, y1Date, y2Date), true)
            houseMyChart.setOption(this.initHouseOptions(xDate, y1Date, y2Date), true)
        },
        initLandEcharts () {
            var chartDom = document.getElementById('landEcharts')
            landMyChart = this.$echarts.init(chartDom)
            landMyChart.setOption(this.initLandOptions(['小区1', '小区2', '小区3', '小区4', '小区5'], [6414, 2211, 4321, 1232, 881]))
            window.addEventListener("resize", function () {
                landMyChart.resize()
            })
        },
        initLandOptions (xDate, yDate) {
            return {
                xAxis: {
                    type: 'category',
                    data: xDate,

                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff"
                    }
                },
                series: [
                    {
                        data: yDate,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#1a94a8',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ],
                grid: {
                    x: 40,
                    y: 10,
                    x2: 20,
                    y2: 20
                },
            }
        },
        landTabClick (type) {
            this.tabTypeThree = type
            let xDate, yDate

            if (type == 0) {
                xDate = ['小区1', '小区2', '小区3', '小区4', '小区5']
                yDate = [6414, 2211, 4321, 1232, 881]
            } else if (type == 1) {
                xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                yDate = [881, 2211, 6414, 4321, 1232]
            }

            landMyChart.setOption(this.initPersonOptions(xDate, yDate), true)
        },

        initEquipmentEcharts () {
            var chartDom = document.getElementById('EquipmentEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option
            var regionTotal = 0
            let dataArr = [
                { value: 21438, name: '未知' },
                { value: 4664, name: '固定枪机' },
                { value: 310, name: '固定球机' },
                { value: 279, name: '可控球机' },
                { value: 241, name: '卡口枪机' },
                { value: 5, name: '云台枪机' }
                { value: 4664, name: '车辆' },
                { value: 310, name: '摄像头' },
                { value: 279, name: '执法记录仪' },
                { value: 241, name: '手台' },
            ]
            for (let i = 0; i < dataArr.length; i++) {
                regionTotal += dataArr[i].value
                this.regionTotal += dataArr[i].value
            }
            option = {
                title: {
                    show: true,
                    text: ['{a|摄像头总数}', `{b|${regionTotal}个}`].join('                                      '), // 主副标题
                    left: 'left',
                    textStyle: {
                        rich: {
                            a: {
                                fontWeight: 'normal',
                                fontSize: 16,
                                color: '#fff'
                            },
                            b: {
                                fontSize: 22,
                                fontWeight: 'bolder',
                                color: '#fff'
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: '55%',
                    y: '20%',
                    itemGap: 10,
                    left: '60%',
                    y: '25%',
                    itemGap: 20,
                    textStyle: {
                        color: '#fff'
                    },
@@ -1099,8 +1186,79 @@
        clickChart () {
            homePersonmyChart.on('click', params => {
                console.log('name', params.name)
                let xDate, yDate
                //户籍人口
                if (params.name == '车站派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '沙溪派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [641, 423, 221, 123, 88]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '灵溪派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [111, 531, 211, 431, 64]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '北门派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [887, 234, 452, 321, 154]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '江光派出所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [400, 500, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                }
                //流动人口
                if (params.name == '湖北') {
                    xDate = ['武汉市', '黄石市', '宜昌市', '鄂州市', '荆门市']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '上海') {
                    xDate = ['黄浦区', '长宁区', '静安区', '虹口区', '闵行区']
                    yDate = [641, 423, 221, 123, 88]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '北京') {
                    xDate = ['东城区', '西城区', '海淀区', '昌平区', '大兴区']
                    yDate = [111, 531, 211, 431, 64]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '广东') {
                    xDate = ['珠海市', '东菀市', '佛山市', '中山市', '惠州市']
                    yDate = [887, 234, 452, 321, 154]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '浙江') {
                    xDate = ['杭州市', '舟山市', '宁波市', '嘉兴市', '绍兴市']
                    yDate = [400, 300, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                }
                //境外人口
                if (params.name == '日本') {
                    xDate = ['东京都', '北海道', '大阪府', '京都府', '43县']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '美国') {
                    xDate = ['加利福尼亚州', '德克萨斯州', '纽约州', '俄亥俄州']
                    yDate = [641, 423, 221, 123, 88]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '俄罗斯') {
                    xDate = ['西北联邦', '中央联邦', '南方联邦', '伏尔加联邦']
                    yDate = [111, 531, 211, 431, 64]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '英国') {
                    xDate = ['英格兰', '威尔士', '苏格兰', '北爱尔兰']
                    yDate = [887, 234, 452, 321, 154]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else if (params.name == '印度') {
                    xDate = ['德里', '哈里亚纳邦', '旁遮普邦', '喜马偕尔邦', '北方邦']
                    yDate = [400, 300, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                }
            })
        },

        actTabClick (type) {
            this.acttype = type
        }



@@ -1158,12 +1316,14 @@
        background: $bg-color;

        .person-box {
            height: 40%;
            height: 35%;
        }
        .house-box {
            height: 30%;
        }

        .land-box,
        .equipment-box {
            height: 30%;
        .land-box {
            height: 35%;
        }
    }

@@ -1193,8 +1353,8 @@
    .left-container,
    .right-container {
        .person-box,
        .house-box,
        .land-box,
        .equipment-box,
        .case-box,
        .alert-box,
        .crowd-box {
@@ -1220,6 +1380,25 @@
                    background: #43bafe;
                    box-shadow: 0px 0px 8px 2px #43bafe;
                }
                .regionTotal {
                    color: #fff;
                    font-size: 22px;
                    font-weight: 700;
                    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;
                }
            }

            .sub-title {