首页echarts元素优化

guanqb

2022-11-04 94b2b0fbc76785afed0496f96369b4eb6304fb8f

首页echarts元素优化

 src/views/home/components/leftContainer.vue

@@ -2,14 +2,28 @@
    <div class="container">
        <div class="person-box">
            <div class="title">
                <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>
                    <span
                        class="peopleTap"
                        :class="{ choosed: peopletype == 0 }"
                        @click="peopleTabClick(0)"
                    >现有人员</span>
                    /
                    <span
                        class="peopleTap"
                        :class="{ choosed: peopletype == 1 }"
                        @click="peopleTabClick(1)"
                    >重点人员</span>
                </div>
                <div>
                    共
                    <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">
@@ -27,18 +41,21 @@
                </div>
            </div>

            <div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div>
            <div id="keyPersonEcharts" class="peopleTable" v-show="peopletype == 1"></div>
            <div id="PersonEcharts" :class="[peopletype == 0 ? 'echarts-box':'people-table']"></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">
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            >
                <i class="el-icon-back"></i>
            </div>
        </div>
        <div class="house-box">
            <div class="title">
                现有房屋
            </div>

            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ on: tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div class="num">1822603户</div>
@@ -53,9 +70,7 @@
            <div id="houseEcharts" class="echarts-box"></div>
        </div>
        <div class="land-box">
            <div class="title">
                现有地
            </div>
            <div class="title">现有地</div>
            <div class="sub-tab">
                <div class="tab" :class="{ on: tabTypeThree == 0 }" @click="landTabClick(0)">
                    <div class="num">634个</div>
@@ -196,6 +211,7 @@
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
            ],
            keyPersonSelectSaveArr: [],
        }
    },
    mounted () {
@@ -204,8 +220,6 @@
        this.inithouseEcharts()
        this.clickPeopleChart()
        this.clickLandChart()
        this.initkeyPersonEcharts()
        this.clickkeyPersonChart()
    },
    methods: {
        initPersonEcharts () {
@@ -465,6 +479,24 @@

        peopleTabClick (type) {
            this.peopletype = type
            this.$nextTick(() => {
                if (type == 0) {
                    homePersonmyChart.dispose()
                    this.initPersonEcharts()
                    homePersonmyChart.off('click')
                    this.$nextTick(() => {
                        this.clickPeopleChart()
                    })

                } else {
                    homePersonmyChart.dispose()
                    this.initkeyPersonEcharts()
                    homePersonmyChart.off('click')
                    this.$nextTick(() => {
                        this.clickkeyPersonChart()
                    })
                }
            })
        },

        clickPeopleChart () {
@@ -562,10 +594,11 @@
        },

        initkeyPersonEcharts () {
            var chartDom = document.getElementById('keyPersonEcharts')
            var chartDom = document.getElementById('PersonEcharts')
            keyPersonmyChart = this.$echarts.init(chartDom)
            let dataArr = this.getKeyPersonCount(this.keyPersonSelectArr)
            keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr))

        },

        initkeyPersonOption (dataArr) {
@@ -662,9 +695,9 @@
                        arr.push(item)
                    }
                    this.keyPersonSelectArr = arr
                    this.keyPersonSelectSaveArr = arr
                })
            }

            this.initkeyPersonEcharts()
        },

@@ -718,12 +751,14 @@
        selectAreaChangeData (name) {
            if (name != '全部') {
                let arr = []
                this.keyPersonSelectArr.some(item => {
                this.keyPersonSelectSaveArr.some(item => {
                    if (item.housingEastate == name) {
                        arr.push(item)
                    }
                })
                this.keyPersonSelectArr = arr
            } else {
                this.keyPersonSelectArr = this.keyPersonSelectSaveArr
            }
            this.initkeyPersonEcharts()
        }
@@ -793,7 +828,7 @@
            margin-left: 108px;
        }

        .peopleTable {
        .people-table {
            height: calc(100% - 40px);
            height: 250px;
            width: 400px;
@@ -832,7 +867,7 @@
        padding: 0 10px;

        .title::after {
            content: "";
            content: '';
            position: absolute;
            top: 6px;
            left: 0;
@@ -850,9 +885,14 @@
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            display: flex;
            justify-content: space-between;

            .choosed {
                color: #fff;
            }
            & > div:nth-of-type(2) {
                font-size: 14px;
            }
        }

@@ -872,7 +912,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                &>div {
                & > div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -889,7 +929,7 @@
            height: calc(100% - 104px);
        }

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

 src/views/home/index.vue

@@ -11,16 +11,29 @@

<template>
    <div class="container">
        <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
        <left-container
            class="left-container"
            @showpeopledetail="showpeopledetail"
            @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail"
            ref="leftContainer"
        ></left-container>

        <right-container class="right-container" @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType"
            @activityChange="activityChange" ref="rightContainer"></right-container>
        <right-container
            class="right-container"
            @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType"
            @activityChange="activityChange"
            ref="rightContainer"
        ></right-container>

        <bottom-container class="bottom-container" ref="bottomContainer"
            @changePoliceSituationType="changePoliceSituationType" @policeSituationChange="policeSituationChange">
        </bottom-container>
        <bottom-container
            class="bottom-container"
            ref="bottomContainer"
            @changePoliceSituationType="changePoliceSituationType"
            @policeSituationChange="policeSituationChange"
        ></bottom-container>

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -46,31 +59,72 @@
            </div>
        </div>


        <div ref="RegionSelect" style="left: 0;" class="region-select">
            <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
                :options="policeStationOptions" :optionsName="'policeStationName'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
                :optionsName="'policeStationName'"
            ></map-select>

            <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
                :optionsName="'areaCheckName'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
                :optionsName="'areaCheckName'"
            ></map-select>

            <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
                :options="housingOptions" :optionsName="'housingsName'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
                :optionsName="'housingsName'"
            ></map-select>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
        >
            <video
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>

        <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose" :close-on-click-modal="true">
            <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>
        <el-dialog
            :title="panoramaTitle"
            :modal="true"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
        >
            <iframe
                src="http://vr.jxpskj.com/JXSFKZQJ/QJ/"
                style="width: 100%; height: 100%;"
                frameborder="0"
            ></iframe>
        </el-dialog>

        <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible"
            :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box">
        <el-dialog
            :title="activityTitle"
            :modal="true"
            :visible.sync="activityVisible"
            :before-close="activityBeforeClose"
            :close-on-click-modal="true"
            class="activity-details-box"
        >
            <div class="dialog-side">
                <div>
                    <div>活动名称:</div>
@@ -113,8 +167,14 @@
            </div>
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="dialog-side">
                <div>
                    <div>责任人：</div>
@@ -137,8 +197,14 @@
            </div>
        </el-dialog>

        <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose"
            :close-on-click-modal="true" class="area-details-box">
        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
            <div class="dialog-side">
                <div>
                    <div>责任区负责人：</div>
@@ -161,50 +227,91 @@
            </div>
        </el-dialog>

        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
        <el-dialog
            :title="equimentTitle"
            :modal="true"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :close-on-click-modal="true"
            class="equiment-details-box"
        >
            <div class="equimentDetail">
                <div class="left">
                    <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick"
                        ref="tree" node-key="id"></el-tree>
                    <el-tree
                        :data="jurisdictionData"
                        :props="defaultProps"
                        @node-click="jurisdictionNodeClick"
                        ref="tree"
                        node-key="id"
                    ></el-tree>
                </div>
                <div class="right">
                    <div class="monitor" v-if="monitorContent">
                        <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                            style="object-fit: fill"></video>
                        <video
                            src="/video/sp.mp4"
                            autoplay
                            controls
                            width="100%"
                            height="100%"
                            ref="videoElement"
                            style="object-fit: fill"
                        ></video>
                    </div>
                    <div class="others" v-if="othersContent">
                        <el-table :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        <el-table
                            :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                            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">
                            :row-class-name="tableRowClassName"
                        >
                            <el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column>
                            <el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column>
                            <el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column>
                            <el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column>
                            <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow">
                            </el-table-column>
                            <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow">
                            </el-table-column>
                            <el-table-column
                                prop="recorderID"
                                label="执法记录仪号"
                                v-if="recorderArrShow"
                            ></el-table-column>
                            <el-table-column
                                prop="recorderType"
                                label="记录仪机型"
                                v-if="recorderArrShow"
                            ></el-table-column>
                            <el-table-column prop="policeStation" label="所属派出所"></el-table-column>
                            <el-table-column prop="area" label="所属责任区"></el-table-column>
                        </el-table>
                        <div class="pages">
                            <el-pagination background layout="prev, pager, next" :total="showArr.length"
                                :page-size="pagesize" pager-count="3" :current-page="currentPage"
                                @current-change="handleCurrentChange"></el-pagination>
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="showArr.length"
                                :page-size="pagesize"
                                pager-count="3"
                                :current-page="currentPage"
                                @current-change="handleCurrentChange"
                            ></el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
            <el-table :data="landDetailArr" style="width: 100%"
        <el-dialog
            :title="landTitle"
            :modal="true"
            :visible.sync="landVisible"
            :before-close="landBeforeClose"
            :close-on-click-modal="true"
            class="land-details-box"
        >
            <el-table
                :data="landDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column>
                <el-table-column prop="location" label="位置" width="140"></el-table-column>
                <el-table-column prop="area" label="面积" width="120"></el-table-column>
@@ -213,11 +320,20 @@
            </el-table>
        </el-dialog>

        <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
        <el-dialog
            :title="keyPersonTitle"
            :modal="true"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
@@ -228,8 +344,14 @@
            </el-table>
        </el-dialog>

        <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
        <el-dialog
            :title="policeSituationTitle"
            :modal="true"
            :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose"
            :close-on-click-modal="true"
            class="policeSituation-details-box"
        >
            <div class="dialog-side">
                <div>
                    <div>所属派出所:</div>
@@ -781,7 +903,6 @@

        activitySelectChange () {
            let showArr = []
            let showNewArr = []
            if (this.policeStaionChecked && this.policeStaionChecked.policeStationName != '全部') {
                let arr1 = []
                let arr2 = []
@@ -938,22 +1059,6 @@
            this.policeSituationDetailArr = e.overlay.attrParams
            this.policeSituationVisible = true
            this.policeSituationTitle = e.overlay.attrParams.name
        },

        phoneBeforeClose () {
            this.phoneVisible = false
        },

        peopleBeforeClose () {
            this.peopleVisible = false
        },

        panoramaBeforeClose () {
            this.panoramaVisible = false
        },

        activityBeforeClose () {
            this.activityVisible = false
        },

        equimentBeforeClose () {
@@ -1172,7 +1277,7 @@
            this.$refs.RegionSelect.style.left = (bodyWidth - domWidth) / 2 + 'px'
        },

        jurisdictionNodeClick (nodeObj, node, nodeSelf) {
        jurisdictionNodeClick (nodeObj) {
            if (nodeObj.id == 1) {
                this.showArr = this.saveArr
            } else if (nodeObj.id == 2) {
@@ -1599,7 +1704,9 @@
                background-color: #66b1ff87;
            }

            :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
            :deep(.el-tree--highlight-current
                    .el-tree-node.is-current
                    > .el-tree-node__content) {
                background: #454545;
            }