页面优化

guanqb

2022-11-04 21c3dd254a60e0eda2ac456a327eb946b4367fce

页面优化

 src/styles/base/index.scss

@@ -105,6 +105,7 @@
        }
    }
}

.panorama-details-box {
    .el-dialog {
        margin: 0 !important;

 src/views/home/components/leftContainer.vue

@@ -7,8 +7,7 @@
                        class="peopleTap"
                        :class="{ choosed: peopletype == 0 }"
                        @click="peopleTabClick(0)"
                    >现有人员</span>
                    /
                    >现有人员</span>/
                    <span
                        class="peopleTap"
                        :class="{ choosed: peopletype == 1 }"
@@ -17,15 +16,10 @@
                </div>
                <div>
                    共
                    <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>
                    /
                    <span
                        class="peopleNum"
                        :class="{ choosed: peopletype == 1 }"
                    >1</span>人
                    <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>/
                    <span class="peopleNum" :class="{ choosed: peopletype == 1 }">1</span>人
                </div>
            </div>

            <div class="sub-tab" v-show="peopletype == 0">
                <div class="tab" :class="{ on: tabType == 0 }" @click="personTabClick(0)">
                    <div class="num">164.57万人</div>
@@ -40,19 +34,13 @@
                    <div class="type">境外人口</div>
                </div>
            </div>

            <div id="PersonEcharts" class="echarts-box"></div>
            <!-- :class="{'people-table' : peopletype == 1 }" -->
            <!-- <div id="keyPersonEcharts" class="people-table" v-show="peopletype == 1"></div> -->

            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            >
                <i class="el-icon-back"></i>
            </div>
            ></div>
        </div>
        <div class="house-box">
            <div class="title">现有房屋</div>
@@ -66,7 +54,6 @@
                    <div class="num">关注场所</div>
                </div>
            </div>

            <div id="houseEcharts" class="echarts-box"></div>
        </div>
        <div class="land-box">
@@ -220,15 +207,23 @@
        this.inithouseEcharts()
        this.clickPeopleChart()
        this.clickLandChart()

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
        })
    },
    methods: {
        echartsResize () {
            homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
            landMyChart && landMyChart != null && landMyChart.resize()
            keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
            houseMyChart && houseMyChart != null && houseMyChart.resize()
        },

        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)
            homePersonmyChart.setOption(this.initPersonOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [881, 2211, 6414, 4321, 1232]))
            window.addEventListener("resize", function () {
                homePersonmyChart.resize()
            })
        },

        initPersonOptions (xDate, yDate) {
@@ -307,12 +302,7 @@
        inithouseEcharts () {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)

            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 () {
                houseMyChart.resize()
            })
        },

        initHouseOptions (xDate, y1Date, y2Date) {
@@ -402,9 +392,6 @@
            var chartDom = document.getElementById('landEcharts')
            landMyChart = this.$echarts.init(chartDom)
            landMyChart.setOption(this.initLandOptions(['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所'], [6414, 2211, 4321, 1232, 881]))
            window.addEventListener("resize", function () {
                landMyChart.resize()
            })
        },

        initLandOptions (xDate, yDate) {
@@ -489,7 +476,6 @@
                    this.initkeyPersonEcharts()
                    this.clickkeyPersonChart()
                }

                homePersonmyChart.resize()
            })
        },
@@ -593,9 +579,6 @@
            keyPersonmyChart = this.$echarts.init(chartDom)
            let dataArr = this.getKeyPersonCount(this.keyPersonSelectArr)
            keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr))
            window.addEventListener("resize", function () {
                homePersonmyChart.resize()
            })
        },

        initkeyPersonOption (dataArr) {
@@ -758,33 +741,33 @@
                this.keyPersonSelectArr = this.keyPersonSelectSaveArr
            }
            this.initkeyPersonEcharts()
        }
        },

        // echartsResize (echartsName) {
        //     echartsName.resize()
        // },

    },

    destroyed () {
        if (!homePersonmyChart) {
            return
        }
        if (!houseMyChart) {
            return
        }
        if (!landMyChart) {
            return
        }
        if (!keyPersonmyChart) {
            return
        }
        window.removeEventListener("resize", this.echartsResize)

        homePersonmyChart.dispose()
        houseMyChart.dispose()
        landMyChart.dispose()
        keyPersonmyChart.dispose()

        homePersonmyChart = null
        houseMyChart = null
        landMyChart = null
        keyPersonmyChart = null
        if (homePersonmyChart) {
            homePersonmyChart.dispose()
            homePersonmyChart = null
        }
        if (houseMyChart) {
            houseMyChart.dispose()
            houseMyChart = null
        }
        if (landMyChart) {
            landMyChart.dispose()
            landMyChart = null
        }
        if (keyPersonmyChart) {
            keyPersonmyChart.dispose()
            keyPersonmyChart = null
        }
    }
}
</script>
@@ -839,6 +822,10 @@
        .back:hover {
            color: #43bafe;
        }
        .back::after {
            font-family: element-icons;
            content: '\e6ea';
        }
    }

    .house-box {

 src/views/home/components/rightContainer.vue

@@ -4,27 +4,45 @@
            <div class="title">
                案件统计
                <div class="timer">
                    <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                    <el-date-picker
                        v-model="eventTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </div>
            </div>

            <div id="EventChangeEcharts" class="echarts-box"></div>
        </div>
        <div class="alert-box">
            <div class="title">

                <span style="margin-right:130px">安保活动</span>
                <span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</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>
                <span
                    class="activity"
                    :class="{ choosed: acttype == 1 }"
                    @click="actTabClick(1)"
                >历史活动</span>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table :data="acttype == 0 ? underwayArr : historyArr" style="width: 100%"
                <el-table
                    :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" ref="activityTable" @row-click="activityRowClick">
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    <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>
@@ -159,6 +177,9 @@
        this.clickEquimentChart()
        this.historyArr = historyArr
        this.underwayArr = underwayArr
        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
        })
    },
    methods: {
        actTabClick (type) {
@@ -166,6 +187,11 @@
            this.$refs.activityTable.bodyWrapper.scrollTop = 0
            this.$emit('changeActivityType', type)
            this.$emit('activityChange')
        },

        echartsResize () {
            equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
            eventchangemychart && eventchangemychart != null && eventchangemychart.resize()
        },

        initEquipmentEcharts () {
@@ -373,26 +399,21 @@
                siteWd: Number(row.position[1])
            })
        },





    },

    destroyed () {
        if (!equipmentmyChart) {
            return
        }
        if (!eventchangemychart) {
            return
        window.removeEventListener("resize", this.echartsResize)

        if (equipmentmyChart) {
            equipmentmyChart.dispose()
            equipmentmyChart = null
        }

        equipmentmyChart.dispose()
        eventchangemychart.dispose()
        if (eventchangemychart) {
            eventchangemychart.dispose()
            eventchangemychart = null
        }

        equipmentmyChart = null
        eventchangemychart = null
    }
}
</script>
@@ -425,7 +446,7 @@
        padding: 0 10px;

        .title::after {
            content: "";
            content: '';
            position: absolute;
            top: 6px;
            left: 0;
@@ -489,7 +510,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                &>div {
                & > div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -504,7 +525,7 @@
            flex: 1;
        }

        .sub-tab+.echarts-box {
        .sub-tab + .echarts-box {
            margin-top: 10px;
        }


 src/views/home/index.vue

@@ -1474,10 +1474,12 @@
            layerName: 'carLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'houseLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'phoneLayers',
            type: 'VectorLayer'