首页echarts样式及布局调整

guanqb

2022-10-21 6e6874dff289df1e2e3728ebb8b0b0675d29a9e3

首页echarts样式及布局调整

 src/styles/dc/index.scss

@@ -11,7 +11,7 @@

.dc-location-bar {
    left: 50% !important;
    bottom: 300px !important;
    bottom: 310px !important;
    transform: translate(-50%, 0);
    background-color: $bg-color !important;

@@ -19,7 +19,7 @@

.dc-zoom-controller {
    top: auto !important;
    bottom: 360px !important;
    bottom: 370px !important;
    left: 420px !important;
    width: 36px !important;
    height: auto !important;
@@ -50,7 +50,7 @@
    justify-content: center;
    position: absolute;
    left: 420px;
    bottom: 300px;
    bottom: 310px;
    width: 36px;
    height: 36px;
    font-size: 20px;

 src/views/home/index.vue

@@ -14,10 +14,26 @@
        <div class="left-container">
            <div class="person-box">
                <div class="title">
                    <i></i> 现有人员/重点人员 共100/1人
                    <i></i>
                    <span
                        class="peopleTap"
                        :class="{choosed:peopletype == 0}"
                        @click="peopleTabClick(0)"
                    >现有人员</span>
                    <span>/</span>
                    <span
                        class="peopleTap"
                        :class="{choosed:peopletype == 1}"
                        @click="peopleTabClick(1)"
                    >重点人员</span>
                    <span class="word before">共</span>
                    <span class="peopleNum" :class="{choosed:peopletype == 0}">100</span>
                    <span class="word">/</span>
                    <span class="peopleNum" :class="{choosed:peopletype == 1}">1</span>
                    <span class="word">人</span>
                </div>

                <div class="sub-tab">
                <div class="sub-tab" v-show="peopletype == 0">
                    <div class="tab" :class="{on:tabType==0}" @click="personTabClick(0)">
                        <div class="num">164.57万人</div>
                        <div class="type">户籍人口</div>
@@ -32,7 +48,7 @@
                    </div>
                </div>

                <div id="PersonEcharts" class="echarts-box"></div>
                <div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div>
            </div>
            <div class="house-box">
                <div class="title">
@@ -141,13 +157,28 @@

        <div class="bottom-container">
            <div class="header">
                <div class="leftBor"></div>
                <div class="topName">警情动态</div>
                <div class="rightBor"></div>
                <div class="bottomTitle">
                    <div class="leftBor"></div>
                    <div class="topName">警情动态</div>
                    <div class="rightBor"></div>
                </div>
                <div class="timeTab">
                    <span
                        class="beforetime"
                        :class="{choosed:timetype==0}"
                        @click="timeTabClick(0)"
                    >近一周</span>
                    <span>/</span>
                    <span
                        class="beforetime"
                        :class="{choosed:timetype==1}"
                        @click="timeTabClick(1)"
                    >近一月</span>
                </div>
            </div>
            <div class="body">
                <el-table
                    :data="pliceSituationArr"
                    :data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                    :cell-style="{'text-align':'center','borderColor':'#324e75'}"
@@ -369,12 +400,19 @@
                { 'activityName': '历史活动4', 'startTime': '2021-10-07', 'endTime': '2021-10-08', 'scale': '2000' },
                { 'activityName': '历史活动5', 'startTime': '2021-10-09', 'endTime': '2021-10-10', 'scale': '2000' }
            ],
            pliceSituationArr: [
            pliceSituationWeekArr: [
                { 'num': '1', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '2', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '3', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '4', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '5', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '12H', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
            ],
            pliceSituationMouthArr: [
                { 'num': '1', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '2', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '3', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '4', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '5', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '15H', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
            ],
            policeStationCheckValue: '请选择派出所',
            areaOptionData: [],
@@ -417,6 +455,8 @@
            ],
            regionTotal: 0,
            acttype: 0,
            timetype: 0,
            peopletype: 0,
        }
    },
    created () {
@@ -687,7 +727,7 @@
        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]))
            landMyChart.setOption(this.initLandOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [6414, 2211, 4321, 1232, 881]))
            window.addEventListener("resize", function () {
                landMyChart.resize()
            })
@@ -750,10 +790,10 @@
            let xDate, yDate

            if (type == 0) {
                xDate = ['小区1', '小区2', '小区3', '小区4', '小区5']
                xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                yDate = [6414, 2211, 4321, 1232, 881]
            } else if (type == 1) {
                xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
                yDate = [881, 2211, 6414, 4321, 1232]
            }

@@ -1336,10 +1376,14 @@

        actTabClick (type) {
            this.acttype = type
        },

        timeTabClick (type) {
            this.timetype = type
        },
        peopleTabClick (type) {
            this.peopletype = type
        }




    },
    watch: {},
@@ -1395,6 +1439,27 @@

        .person-box {
            height: 35%;
            .peopleTap {
                color: rgb(98, 95, 95);
                cursor: pointer;
            }
            .peopleTap:hover {
                text-decoration: underline;
            }
            .choosed {
                color: #fff;
            }
            .peopleNum {
                color: rgb(98, 95, 95);
                font-size: 14px;
            }
            .word {
                color: #fff;
                font-size: 14px;
            }
            .before {
                margin-left: 108px;
            }
        }
        .house-box {
            height: 30%;
@@ -1468,7 +1533,6 @@
                .activity {
                    font-size: 16px;
                    color: rgb(98, 95, 95);

                    cursor: pointer;
                }
                .activity:hover {
@@ -1520,7 +1584,7 @@
        display: flex;
        position: fixed;
        left: 50%;
        bottom: 330px;
        bottom: 340px;
        transform: translate(-50%, 0);

        .layers-control-btn {
@@ -1620,39 +1684,62 @@
        box-sizing: border-box;
        border: 4px solid #3366e2;
        border-radius: 12px;

        .header {
            display: flex;
            width: 34%;
            margin-left: 33%;
            width: 100%;
            height: 24px;
            line-height: 30px;
            color: #fff;
            text-align: center;
            .leftBor {
                width: 0px;
                height: 0px;
                border: 12px solid #3366e2;
                border-bottom-color: transparent;
                border-left-color: transparent;
            .bottomTitle {
                display: flex;
                float: left;
                width: 34%;
                margin-left: 33%;
                height: 24px;
                line-height: 24px;
                color: #fff;
                text-align: center;
                .leftBor {
                    width: 0px;
                    height: 0px;
                    border: 12px solid #3366e2;
                    border-bottom-color: transparent;
                    border-left-color: transparent;
                }
                .rightBor {
                    width: 0px;
                    height: 0px;
                    border: 12px solid #3366e2;
                    border-bottom-color: transparent;
                    border-right-color: transparent;
                }
                .topName {
                    width: calc(100% - 48px);
                    background-color: #3366e2;
                    letter-spacing: 2px;
                }
            }
            .rightBor {
                width: 0px;
                height: 0px;
                border: 12px solid #3366e2;
                border-bottom-color: transparent;
                border-right-color: transparent;
            }
            .topName {
                width: calc(100% - 48px);
                background-color: #3366e2;
                letter-spacing: 2px;

            .timeTab {
                float: left;
                margin-left: 10%;
                width: 20%;
                height: 24px;
                line-height: 34px;
                .beforetime {
                    color: rgb(98, 95, 95);
                    cursor: pointer;
                }
                .beforetime:hover {
                    text-decoration: underline;
                }
                .choosed {
                    color: #fff;
                }
            }
        }

        .body {
            height: calc(100% - 72px);
            width: calc(100% - 100px);
            margin: 24px 0 0 50px;
            height: calc(100% - 40px);
            width: calc(100% - 40px);
            margin: 10px 0 0 20px;
            overflow: scroll;
        }
    }