首页echarts优化及警情动态模块

guanqb

2022-10-21 effc5bd66a0138130ac25f1b733803154da880c2

首页echarts优化及警情动态模块

 src/styles/dc/index.scss

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

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

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

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

 src/views/home/index.vue

@@ -74,7 +74,7 @@
        <div class="right-container">
            <div class="case-box">
                <div class="title">
                    <i></i> 案件统计
                    <i></i> 案件统计 开始时间-结束时间
                </div>

                <div id="EventChangeEcharts" class="echarts-box"></div>
@@ -136,6 +136,32 @@
            </div>
            <div class="layers-control-btn panorama">
                <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
            </div>
        </div>

        <div class="bottom-container">
            <div class="header">
                <div class="leftBor"></div>
                <div class="topName">警情动态</div>
                <div class="rightBor"></div>
            </div>
            <div class="body">
                <el-table
                    :data="pliceSituationArr"
                    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="num" label="序号" width="50"></el-table-column>
                    <el-table-column prop="type" label="警情类别" width="100"></el-table-column>
                    <el-table-column prop="comingPhone" label="报警电话" width="150"></el-table-column>
                    <el-table-column prop="dealTime" label="接警时间" width="100"></el-table-column>
                    <el-table-column prop="dealPolice" label="经办民警" width="100"></el-table-column>
                    <el-table-column prop="callPeople" label="报警人" width="100"></el-table-column>
                    <el-table-column prop="callPhone" label="报警人联系人" width="150"></el-table-column>
                    <el-table-column prop="callContent" label="报警内容"></el-table-column>
                </el-table>
            </div>
        </div>

@@ -242,6 +268,42 @@
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div style="flex: 1; display: flex; flex-direction: column; width: 100%; height: 100%;">
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                    <div>责任区负责人：</div>
                    <div>王某某</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                    <div>责任区人口：</div>
                    <div>10000</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                    <div>男女比例：</div>
                    <div>0.92：1</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                    <div>所在地址：</div>
                    <div>XXXXXXX</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

@@ -279,7 +341,9 @@
            panoramaVisible: false,
            phoneDetails: {},
            phoneTitle: '',
            peopleTitle: '',
            phoneVisible: false,
            peopleVisible: false,
            houseList: [],
            carList: [],
            phoneList: [],
@@ -304,6 +368,13 @@
                { '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' }
            ],
            pliceSituationArr: [
                { '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': '他先动的手' },
            ],
            policeStationCheckValue: '请选择派出所',
            areaOptionData: [],
@@ -612,6 +683,7 @@
            }
            houseMyChart.setOption(this.initHouseOptions(xDate, y1Date, y2Date), true)
        },

        initLandEcharts () {
            var chartDom = document.getElementById('landEcharts')
            landMyChart = this.$echarts.init(chartDom)
@@ -620,6 +692,7 @@
                landMyChart.resize()
            })
        },

        initLandOptions (xDate, yDate) {
            return {
                xAxis: {
@@ -671,6 +744,7 @@
                },
            }
        },

        landTabClick (type) {
            this.tabTypeThree = type
            let xDate, yDate
@@ -976,6 +1050,10 @@
            this.phoneVisible = false
        },

        peopleBeforeClose () {
            this.peopleVisible = false
        },

        panoramaBeforeClose () {
            this.panoramaVisible = false
        },
@@ -1099,6 +1177,7 @@
                }
            })
        },

        initHousingLayer (item) {
            let center = this.getAreaCenter(item.areaCheckName)
            this.clearPolygonLayer()
@@ -1208,9 +1287,7 @@
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [400, 500, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                }
                //流动人口
                if (params.name == '湖北') {
                } else if (params.name == '湖北') {
                    xDate = ['武汉市', '黄石市', '宜昌市', '鄂州市', '荆门市']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
@@ -1230,9 +1307,7 @@
                    xDate = ['杭州市', '舟山市', '宁波市', '嘉兴市', '绍兴市']
                    yDate = [400, 300, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                }
                //境外人口
                if (params.name == '日本') {
                } else if (params.name == '日本') {
                    xDate = ['东京都', '北海道', '大阪府', '京都府', '43县']
                    yDate = [88, 221, 641, 432, 123]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
@@ -1252,6 +1327,9 @@
                    xDate = ['德里', '哈里亚纳邦', '旁遮普邦', '喜马偕尔邦', '北方邦']
                    yDate = [400, 300, 200, 450, 245]
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
                } else {
                    this.peopleTitle = params.name
                    this.peopleVisible = true
                }
            })
        },
@@ -1442,7 +1520,7 @@
        display: flex;
        position: fixed;
        left: 50%;
        bottom: 40px;
        bottom: 330px;
        transform: translate(-50%, 0);

        .layers-control-btn {
@@ -1531,6 +1609,54 @@
        }
    }

    .bottom-container {
        position: fixed;
        left: 50%;
        bottom: 0px;
        height: 300px;
        width: calc(100% - 800px);
        background-color: $bg-color;
        transform: translate(-50%, 0);
        box-sizing: border-box;
        border: 4px solid #3366e2;
        border-radius: 12px;

        .header {
            display: flex;
            width: 34%;
            margin-left: 33%;
            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;
            }
            .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;
            }
        }
        .body {
            height: calc(100% - 72px);
            width: calc(100% - 100px);
            margin: 24px 0 0 50px;
            overflow: scroll;
        }
    }

    .region-select {
        display: flex;
        position: absolute;