接口及首页数据联动调整

shuishen

2023-02-03 08e2db5b94d878189f5377fc5ed0f7bd4b2bb19e

接口及首页数据联动调整

 src/api/dept/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-11-30 15:18:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-31 10:47:22
 * @LastEditTime: 2023-02-03 11:50:17
 * @FilePath: \srs-police-affairs\src\api\dept\index.js
 * @Description:
 *
@@ -291,12 +291,12 @@


// 获取现有房屋
export const getHouseStatisticInfo = (deptld, isFollow) => {
export const getHouseStatisticInfo = (deptId, isFollow) => {
    return request({
        url: `/api/houseStatistic/houseStatistic/getHouseStatisticInfo`,
        method: 'get',
        params: {
            deptld,
            deptId,
            isFollow
        }
    })

 src/views/home/components/bottomContainer.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-01-13 15:52:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-01 16:57:05
 * @LastEditTime: 2023-02-03 15:18:05
 * @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue
 * @Description: 
 * 
@@ -14,81 +14,34 @@
            <div class="header">
                <div class="bottom-title">警情动态</div>
                <div class="timeTab" v-show="historytype">
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 0 }"
                        @click="timeTabClick(0)"
                    >周</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 1 }"
                        @click="timeTabClick(1)"
                    >月</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 2 }"
                        @click="timeTabClick(2)"
                    >自定义</span>
                    <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
                    <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
                    <span class="beforetime" :class="{ choosed: timetype == 2 }" @click="timeTabClick(2)">自定义</span>
                </div>

                <div class="timeSeclect" v-show="historytype">
                    <el-date-picker
                        v-show="timetype == 0"
                        v-model="currentWeekTime"
                        @change="datePickerChange"
                        type="week"
                        align="center"
                        format="yyyy 第 WW 周"
                        placeholder="选择周"
                        popper-class="date-week-style"
                    ></el-date-picker>
                    <el-date-picker v-show="timetype == 0" v-model="currentWeekTime" @change="datePickerChange"
                        type="week" align="center" format="yyyy 第 WW 周" placeholder="选择周"
                        popper-class="date-week-style"></el-date-picker>

                    <el-date-picker
                        v-show="timetype == 1"
                        v-model="currentMonthTime"
                        @change="datePickerChange"
                        type="month"
                        align="center"
                        placeholder="选择月"
                        popper-class="date-mouth-style"
                    ></el-date-picker>
                    <el-date-picker v-show="timetype == 1" v-model="currentMonthTime" @change="datePickerChange"
                        type="month" align="center" placeholder="选择月" popper-class="date-mouth-style"></el-date-picker>

                    <el-date-picker
                        v-show="timetype == 2"
                        :clearable="false"
                        v-model="currentTime"
                        type="daterange"
                        align="center"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="datePickerChange"
                        :picker-options="pickerOptions"
                        popper-class="date-day-style"
                    ></el-date-picker>
                    <el-date-picker v-show="timetype == 2" :clearable="false" v-model="currentTime" type="daterange"
                        align="center" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        @change="datePickerChange" :picker-options="pickerOptions"
                        popper-class="date-day-style"></el-date-picker>
                </div>

                <div class="history-tab">
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 0 }"
                        @click="historyTabClick(0)"
                    >实时</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 1 }"
                        @click="historyTabClick(1)"
                    >历史</span>
                    <span class="beforetime" :class="{ choosed: historytype == 0 }"
                        @click="historyTabClick(0)">实时</span>
                    <span class="beforetime" :class="{ choosed: historytype == 1 }"
                        @click="historyTabClick(1)">历史</span>
                </div>
            </div>

            <div
                class="body"
                v-if="historytype == 0"
                ref="tableBox"
                @click="handleSelectClick($event)"
            >
            <div class="body" v-if="historytype == 0" ref="tableBox" @click="handleSelectClick($event)">
                <ul class="title-header">
                    <li>
                        <span class="num">序号</span>
@@ -104,27 +57,16 @@
                    </li>
                </ul>

                <vue-seamless-scroll
                    v-if="policeSituationRealtimeArr.length > 0"
                    :data="policeSituationRealtimeArr"
                    class="warp"
                    :class-option="classOption"
                >
                <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr"
                    class="warp" :class-option="classOption">
                    <ul class="item">
                        <li
                            v-for="(item, index) in policeSituationRealtimeArr"
                            :key="index"
                            :data-obj="JSON.stringify(item)"
                            class="row"
                        >
                        <li v-for="(item, index) in policeSituationRealtimeArr" :key="index"
                            :data-obj="JSON.stringify(item)" class="row">
                            <span class="num" v-text="item.index"></span>
                            <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
                            <span class="receiving-alarm-people" v-text="item.JJYXM"></span>
                            <span
                                class="receiving-alarm-time"
                                :title="item.BJSJ"
                                v-text="item.BJSJ.substring(0, 10)"
                            ></span>
                            <span class="receiving-alarm-time" :title="item.BJSJ"
                                v-text="item.BJSJ.substring(0, 10)"></span>
                            <span class="call-people" v-text="item.BJRXM"></span>
                            <span class="call-phone" v-text="item.LXDH"></span>
                            <span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
@@ -139,133 +81,67 @@
            </div>

            <div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
                <el-table
                    :data="policeSituationHistoryArr"
                    :key="currentPage"
                    style="width: 100%"
                <el-table :data="policeSituationHistoryArr" :key="currentPage" style="width: 100%"
                    :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    @cell-click="rowClick"
                >
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="index"
                        label="序号"
                        min-width="6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="JJDWMC"
                        label="接警单位"
                        min-width="12.6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="JJYXM"
                        label="接警员"
                        min-width="7.6%"
                    ></el-table-column>
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                    <el-table-column :show-overflow-tooltip="true" prop="index" label="序号"
                        min-width="6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位"
                        min-width="12.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJYXM" label="接警员"
                        min-width="7.6%"></el-table-column>
                    <el-table-column label="报警时间" min-width="9.6%">
                        <template slot-scope="scope">
                            <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJRXM"
                        label="报警人"
                        min-width="7.6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="LXDH"
                        label="联系电话"
                        min-width="10%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJNR"
                        label="报警内容"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="SFDZ"
                        label="事发地址"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJLX"
                        label="报警类型"
                        min-width="8%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="MEMO"
                        label="备注"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJRXM" label="报警人"
                        min-width="7.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="LXDH" label="联系电话"
                        min-width="10%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容"
                        min-width="12%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址"
                        min-width="12%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型"
                        min-width="8%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注"
                        min-width="12%"></el-table-column>
                </el-table>

                <div class="pages" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pagesize"
                        :page-count="pagesCount"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>

        <svg class="border-svg">
            <defs>
                <path
                    id="bottom-box-path"
                    d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
                <path id="bottom-box-path" d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                    fill="transparent"
                />
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" fill="transparent" />
                <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                    <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                </radialGradient>
                <mask id="border-box-mask">
                    <circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)">
                        <animateMotion
                            dur="8s"
                            path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
                        <animateMotion dur="8s" path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                            rotate="auto"
                            repeatCount="indefinite"
                        />
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" rotate="auto" repeatCount="indefinite" />
                    </circle>
                </mask>
            </defs>

            <use
                stroke-width="2"
                xlink:href="#bottom-box-path"
                mask="url(#border-box-mask)"
                stroke="#4fd2dd"
            >
                <animate
                    attributeName="stroke-dasharray"
                    from="0, 3220"
                    to="3220, 0"
                    dur="8s"
                    repeatCount="indefinite"
                />
            <use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd">
                <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s"
                    repeatCount="indefinite" />
            </use>
        </svg>
    </div>
@@ -332,6 +208,7 @@
            currentPage: 1,
            // table高度
            currentTableHeight: 0,
            policeStaionID: ''
        }
    },

@@ -340,7 +217,7 @@
    },

    created () {
        this.getAnswerPolices()
        this.getHomeAllData()

        this.defaultDate()

@@ -354,10 +231,7 @@
            }
        }



        window.addEventListener('resize', this.setTableHeight)

    },

    mounted () {
@@ -367,6 +241,16 @@
    },

    methods: {
        /**
         * @description: 获取当前组件内所有数据
         * @return {*}
         */
        getHomeAllData (id = '') {
            this.policeStaionID = id

            this.getAnswerPolices()
        },

        // 获取table高度
        setTableHeight () {
            this.$nextTick(() => {
@@ -434,7 +318,7 @@

        // 获取实时接警记录
        getAnswerPolices () {
            getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => {
            getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.policeSituationRealtimeArr = []

                if (res.data.result.length > 0) {
@@ -535,7 +419,7 @@

        // 获取历史接警记录
        getAlarmList (params) {
            getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.userInfo.dept_id }).then(res => {
            getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.pagesCount = res.data.data.pages

                this.policeSituationHistoryArr = []

 src/views/home/components/leftContainer.vue

@@ -4,8 +4,7 @@
            <div class="box">
                <div class="title">
                    <div class="title-tab">
                        <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
                        <!-- <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span> -->
                        <span :class="{ choosed: peopletype == 0 }">现有人员</span>
                    </div>
                    <!-- <div class="title-num">
                        共
@@ -14,25 +13,17 @@
                    </div>-->
                </div>
                <div class="sub-tab" v-show="peopletype == 0">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 0 }"
                        @click="personTabClick(0)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                        <div class="tab-title-small">户籍人口:</div>
                        <div
                            class="tab-title-small"
                        >{{ policeStationPersonInfo.total?policeStationPersonInfo.total:0 }}人</div>
                        <div class="tab-title-small">{{
                            personAll.total ? personAll.total : 0
                        }}人</div>
                    </div>
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 1 }"
                        @click="personTabClick(1)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                        <div class="tab-title-small">重点人员:</div>
                        <div
                            class="tab-title-small"
                        >{{ policeStationPersonInfo.emphasisNum?policeStationPersonInfo.emphasisNum:0 }}人</div>
                        <div class="tab-title-small">{{
                            personAll.emphasisNum ? personAll.emphasisNum : 0
                        }}人</div>
                    </div>
                    <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                        <div class="num">91995人</div>
@@ -40,68 +31,41 @@
                    </div>-->
                </div>
                <div id="PersonEcharts" class="echarts-box"></div>
                <div
                    class="back"
                    title="返回上一级"
                    v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin"
                ></div>
                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin"></div>
            </div>

            <svg class="border-svg">
                <defs>
                    <path
                        id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                    c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                    c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                    c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                        fill="transparent"
                    />
                    <radialGradient
                        id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c"
                        cx="50%"
                        cy="50%"
                        r="50%"
                    >
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
                        r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle
                            cx="0"
                            cy="0"
                            r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)"
                        >
                            <animateMotion
                                dur="8s"
                        <circle cx="0" cy="0" r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto"
                                repeatCount="indefinite"
                            />
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
                </defs>

                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
@@ -109,68 +73,43 @@
            <div class="box">
                <div class="title">现有住宅</div>
                <div class="sub-tab">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeTwo == 0 }"
                        @click="houseTabClick(0)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                        <div class="tab-title-small">实有楼栋:</div>
                        <div class="tab-title-small">{{realHouseNum?realHouseNum:0}}栋</div>
                        <div class="tab-title-small">{{ realHouseNum?realHouseNum: 0 }}栋</div>
                    </div>
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeTwo == 1 }"
                        @click="houseTabClick(1)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                        <div class="tab-title-small">关注场所:</div>
                        <div class="tab-title-small">{{keyPlaceNum?keyPlaceNum:0}}栋</div>
                        <div class="tab-title-small">{{ keyPlaceNum?keyPlaceNum: 0 }}栋</div>
                    </div>
                </div>
                <div id="houseEcharts" class="echarts-box"></div>
            </div>

            <svg class="border-svg">
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
        <div class="land-box" style="position: relative;">
            <div class="box">
                <div class="title">现有地</div>
                <div class="sub-tab" v-if="isAllPoliceStation">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeThree == 0 }"
                        @click="landTabClick(0)"
                    >
                <div class="sub-tab" v-show="isAllPoliceStation">
                    <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                        <div class="tab-title-small">小区:</div>
                        <div class="tab-title-small">{{ villageNum?villageNum:0 }}个</div>
                        <div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div>
                    </div>
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeThree == 1 }"
                        @click="landTabClick(1)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                        <div class="tab-title-small">责任区:</div>
                        <div class="tab-title-small">{{ areaNum?areaNum:0 }}个</div>
                        <div class="tab-title-small">{{ areaNum?areaNum: 0 }}个</div>
                    </div>
                </div>
                <div class="sub-tab" v-else>
                <div class="sub-tab" v-show="!isAllPoliceStation">
                    <div class="tab1 select-on-tab">
                        <div class="tab-title-small">小区:</div>
                        <div class="tab-title-small">{{ policeVillageNum?policeVillageNum:0 }}个</div>
                        <div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div>
                    </div>
                </div>

@@ -178,19 +117,10 @@
            </div>

            <svg class="border-svg">
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
@@ -202,7 +132,7 @@
import { getAreaStatisticInfo } from "@/api/home/index.js"
import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } from "@/api/dept"

let homePersonmyChart
let homePersonmyChart = null
let houseMyChart
let landMyChart
let keyPersonmyChart
@@ -322,37 +252,31 @@
            areaNum: '',
            villageNum: '',
            policeVillageNum: '',
            areaOptionData: [],
            villageOptionData: [],
            policeStationPersonInfo: {},
            villagePersonStatisticInfoList: [],
            showBack: true,
            isAllPoliceStation: false,
            policeVillageOptionData: [],
            isAllPoliceStation: true,
            realHouseNum: '',
            keyPlaceNum: '',
            personAll: '',
            // 记录当前选中派出所的ID
            policeStaionID: ''
        }
    },

    created () {
        this.getAreaStatisticInfo(1)
        this.getAreaStatisticInfo(2)
        this.getAreaStatisticInfo(3, this.userInfo.dept_id)
    },

    mounted () {
        this.initLandEcharts()
        // 获取所有数据并加载
        this.getHomeAllData()

        this.inithouseEcharts()
        this.clickLandChart()

        console.log(1312399999)
        console.log(this.userInfo.dept_id, 98999)
        this.getHouseStatisticInfo(this.userInfo.dept_id, 2)
        if (this.userInfo.dept_id != '1123598813738675201') {
            this.showBack = false
            this.getVillagePersonStatisticInfoByPoliceStationId(this.userInfo.dept_id)
        } else {
            this.getPoliceStationInfo()
            this.isAllPoliceStation = false
        }

        this.$nextTick(() => {
@@ -360,15 +284,277 @@
        })
    },
    methods: {
        echartsResize () {
            homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
            landMyChart && landMyChart != null && landMyChart.resize()
            keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
            houseMyChart && houseMyChart != null && houseMyChart.resize()
        /**
         * @description: 获取首页的所有数据
         * @return {*}
         */
        getHomeAllData (id = '') {
            this.policeStaionID = id

            if (id != '') {
                this.showBack = false
                this.isAllPoliceStation = false
            } else {
                this.showBack = true
                this.isAllPoliceStation = true
            }

            this.personTabClick(0)

            this.houseTabClick(0)

            this.landTabClick(0)
        },

        getHouseStatisticInfo (deptld, isFollow) {
            getHouseStatisticInfo(deptld, isFollow).then(res => {
        /**
         * @description: 户籍人口和重点人员切换
         * @param {*} type
         * @return {*}
         */
        personTabClick (type) {
            this.tabType = type
            this.dataDeep = 1

            if (homePersonmyChart != null) {
                homePersonmyChart.dispose()
                homePersonmyChart.off('click')
            }

            if (type == 0) {
                if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {
                    this.getPoliceStationInfo()
                } else {
                    this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
                }

            } else if (type == 1) {

                this.initkeyPersonEcharts()

            }
        },

        /**
         * @description: 获取分局户籍人口数据
         * @return {*}
         */
        getPoliceStationInfo () {
            getVillagePersonStatisticInfo().then(res => {
                if (res.data.code == 200) {
                    this.personAll = res.data.data
                    this.policeStationPersonInfo = res.data.data
                    //异步，因此放进接口方法内部
                    this.initPersonEcharts()
                    this.clickPeopleChart()
                }
            })
        },


        /**
         * @description: 获取派出所户籍人口数据
         * @param {*} policeStationId
         * @param {*} name
         * @return {*}
         */
        getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
            getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
                if (res.data.code == 200) {
                    var chartDom = document.getElementById('PersonEcharts')
                    homePersonmyChart = this.$echarts.init(chartDom)
                    this.personAll = res.data.data

                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']

                    if (this.villagePersonStatisticInfoList.data.length > 0) {
                        this.villagePersonStatisticInfoList.data.forEach(e => {
                            xDate.push(e.name.replace('居民委员会', ''))
                            yDate.push({
                                value: e.num,
                                name: e.name,
                                id: e.id
                            })
                        })
                    }

                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                    this.clickPeopleChart()
                }
            })
        },

        /**
         * @description: 初始化现有人图表
         * @return {*}
         */
        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)

            var xDate = [], yDate = []
            //传入x,y轴数据

            if (this.policeStationPersonInfo.data.length > 0) {
                this.policeStationPersonInfo.data.forEach(e => {
                    xDate.push(e.name.replace('派出', ''))
                    yDate.push({
                        value: e.num,
                        id: e.id,
                        type: 'policeStation',
                        name: e.name
                    })
                })
            }

            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
        },

        /**
         * @description: 图表数据处理
         * @param {*} xDate
         * @param {*} yDate
         * @param {*} colors
         * @return {*}
         */
        initPersonOptions (xDate, yDate, colors) {
            let options

            if (xDate.length == 0) {
                options = {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: 'normal',
                        }
                    }
                }
            } else {
                options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>',
                        backgroundColor: 'rgba(8, 56, 185, 0.9)',
                        borderColor: 'rgba(8, 56, 185, 0.9)',
                        textStyle: {
                            color: '#fff',
                            fontSize: fontSize(14)
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xDate,

                        axisLabel: {
                            color: "#fff",
                            interval: 0,
                            rotate: 45,
                            fontSize: fontSize(12)
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14)
                        }
                    },
                    series: [
                        {
                            data: yDate,
                            type: 'bar',
                            barWidth: '40%',
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return new global.echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                { offset: 0, color: colors[0] },
                                                { offset: 0.5, color: colors[1] },
                                                { offset: 1, color: colors[2] },
                                            ]
                                        )
                                    }
                                },
                                emphasis: {
                                    color: function (params) {
                                        return new global.echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                { offset: 0, color: colors[2] },
                                                { offset: 0.7, color: colors[1] },
                                                { offset: 1, color: colors[0] }
                                            ]
                                        )
                                    }
                                }
                            },
                        }
                    ],
                    grid: {
                        top: '4%',
                        left: '2%',
                        right: '2%',
                        bottom: '4%',
                        containLabel: true
                    },
                }
            }

            return options

        },

        /**
         * @description: 现有人图表中的返回按钮
         * @return {*}
         */
        backBegin () {
            this.dataDeep = 1
            this.initPersonEcharts()
            // let xDate, yDate, colors
            // if (this.tabType == 0) {
            //     xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
            //     yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
            //     colors = ['#06B5D7', '#44C0C1', '#71C8B1']
            // } else if (this.tabType == 1) {
            //     xDate = ['湖北', '上海', '北京', '广东', '浙江']
            //     yDate = [6414, 4231, 2211, 1231, 881]
            //     colors = ['#ef9faa', '#f7bfc6', '#fedade']
            // } else if (this.tabType == 2) {
            //     xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
            //     yDate = [881, 1231, 2211, 4321, 6414]
            //     colors = ['#7d65c0', '#a47db4', '#e0a8c5']
            // }
            // homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },

        /**
         * @description: 获取现有住宅信息
         * @param {*} deptld
         * @param {*} isFollow
         * @return {*}
         */
        getHouseStatisticInfo (isFollow) {
            getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
                let xDate = []
                let yDate = []
                if (isFollow == 1) {
@@ -382,128 +568,6 @@
                })
                this.inithouseEcharts(xDate, yDate)
            })
        },

        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)

            var xDate = [], yDate = []
            //传入x,y轴数据
            this.policeStationPersonInfo.data.forEach(e => {
                xDate.push(e.name.replace('派出', ''))
                yDate.push({
                    value: e.num,
                    id: e.id,
                    type: 'policeStation',
                    name: e.name
                })
            })
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
        },

        initPersonOptions (xDate, yDate, colors) {
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>',
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(14)
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xDate,

                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(12)
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    }
                },
                series: [
                    {
                        data: yDate,
                        type: 'bar',
                        barWidth: '40%',
                        emphasis: {
                            disabled: true,
                            focus: 'none'
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return new global.echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: colors[0] },
                                            { offset: 0.5, color: colors[1] },
                                            { offset: 1, color: colors[2] },
                                        ]
                                    )
                                }
                            },
                            emphasis: {
                                color: function (params) {
                                    return new global.echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: colors[2] },
                                            { offset: 0.7, color: colors[1] },
                                            { offset: 1, color: colors[0] }
                                        ]
                                    )
                                }
                            }
                        },
                    }
                ],
                grid: {
                    top: '4%',
                    left: '2%',
                    right: '2%',
                    bottom: '4%',
                    containLabel: true
                },
            }
        },

        personTabClick (type) {
            this.tabType = type
            this.dataDeep = 1
            let xDate, yDate, colors

            if (type == 0) {
                homePersonmyChart.dispose()
                this.initPersonEcharts()
                homePersonmyChart.off('click')
                this.clickPeopleChart()
                // xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                // yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
                // colors = ['#06B5D7', '#44C0C1', '#71C8B1']
                // homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
            } else if (type == 1) {
                this.peopleTabClick(type)
            }
        },

        inithouseEcharts (xDate, yDate) {
@@ -524,7 +588,7 @@
                            msg = params.value + '栋'
                        }

                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>'`
                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
                        return msg
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
@@ -608,22 +672,17 @@
        houseTabClick (type) {
            this.tabTypeTwo = type
            if (type == 0) {
                this.getHouseStatisticInfo(this.userInfo.dept_id, 2)
                this.getHouseStatisticInfo(2)
            } else {
                this.getHouseStatisticInfo(this.userInfo.dept_id, 1)
                this.getHouseStatisticInfo(1)
            }
        },

        initLandEcharts () {
        initLandEcharts (landData) {
            var chartDom = document.getElementById('landEcharts')
            landMyChart = this.$echarts.init(chartDom)
            if (this.userInfo.dept_id != '1123598813738675201') {
                this.isAllPoliceStation = false
                landMyChart.setOption(this.initLandOptions(this.policeVillageOptionData[0], this.policeVillageOptionData[1]))
            } else {
                this.isAllPoliceStation = true
                landMyChart.setOption(this.initLandOptions(this.villageOptionData[0], this.villageOptionData[1]))
            }

            landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
        },

        initLandOptions (xDate, yDate) {
@@ -717,38 +776,6 @@
            }
        },

        landTabClick (type) {
            this.tabTypeThree = type
            let xDate, yDate

            if (type == 0) {
                xDate = this.villageOptionData[0]
                yDate = this.villageOptionData[1]
            } else if (type == 1) {
                xDate = this.areaOptionData[0]
                yDate = this.areaOptionData[1]
            }

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

        peopleTabClick (type) {
            // this.peopletype = type
            homePersonmyChart.dispose()
            this.$nextTick(() => {
                if (type == 0) {
                    this.initPersonEcharts()
                    homePersonmyChart.off('click')
                    this.clickPeopleChart()
                } else {
                    this.initkeyPersonEcharts()
                    homePersonmyChart.off('click')
                    this.clickkeyPersonChart()
                }
                homePersonmyChart.resize()
            })
        },

        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                this.dataDeep = 2
@@ -787,7 +814,7 @@
         * @return {*}
         */
        getPersonInfo () {
            const data = getPersonInfo({ deptId: this.userInfo.dept_id }).then(res => {
            const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                res.data = res.data.map(item => {
                    item = {
                        ...item,
@@ -810,72 +837,90 @@
         * @return {*}
         */
        initkeyPersonOption (dataArr) {
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2) + '万人'
                        } else {
                            msg = params.value + '人'
            let options
            if (dataArr.length == 0) {
                options = {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: 'normal',
                        }

                        msg = `${params.marker} ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
                        return msg
                    }
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    left: '45%',
                    y: '1%',
                    itemGap: 20,
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (name) {
                        let data = dataArr
                        let tarValue
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].name == name) {
                                tarValue = data[i].value
                }
            } else {
                options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: params => {
                            let msg
                            if (params.value > 10000) {
                                msg = (params.value / 10000).toFixed(2) + '万人'
                            } else {
                                msg = params.value + '人'
                            }

                            msg = `${params.marker} ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
                            return msg
                        }
                        let v = tarValue
                        return `${name}     ${v} 人    `
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['30%', '60%'],
                        center: ['22%', '55%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        left: '45%',
                        y: '1%',
                        itemGap: 20,
                        textStyle: {
                            color: '#fff'
                        },
                        labelLine: {
                            show: false
                        formatter: function (name) {
                            let data = dataArr
                            let tarValue
                            for (let i = 0; i < data.length; i++) {
                                if (data[i].name == name) {
                                    tarValue = data[i].value
                                }
                            }
                            let v = tarValue
                            return `${name}     ${v} 人    `
                        },
                        data: dataArr
                    }
                ],
                grid: {
                    x: 10,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['30%', '60%'],
                            center: ['22%', '55%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data: dataArr
                        }
                    ],
                    grid: {
                        x: 10,
                        y: 10,
                        x2: 10,
                        y2: 20
                    },
                }
            }

            return options
        },

        /**
        * @description: 重点人员饼状图的点击事件
        * @return {*}
        */
         * @description: 重点人员饼状图的点击事件
         * @return {*}
         */
        async clickkeyPersonChart () {
            keyPersonmyChart.on('click', async params => {
                this.$emit('showkeypersondetail', params.name)
@@ -886,108 +931,32 @@
             */
        },

        selectPoliceChangeData (name) {
            if (this.peopletype == 0 && this.tabType == 0) {
                let xDate, yDate, colors
                if (name == '车站所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [88, 221, 641, 432, 123]
                    colors = ['#0f97f2', '#7d629d', '#e1344f']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '沙溪所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [641, 423, 221, 123, 88]
                    colors = ['#584d7b', '#9b836a', '#f8ce52']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '灵溪所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [111, 531, 211, 431, 64]
                    colors = ['#7d65c0', '#a47db4', '#e0a8c5']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '北门所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [887, 234, 452, 321, 154]
                    colors = ['#6e978f', '#ad885a', '#e97b27']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '江光所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [400, 500, 200, 450, 245]
                    colors = ['#7e81d5', '#86abe6', '#8fe5e3']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '全部') {
                    this.dataDeep = 1
                    xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所']
                    yDate = [881, 2211, 6414, 4321, 1232]
                    colors = ['#f750c2', '#d6369a', '#bc1f76']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                }
            } else if (this.peopletype == 1) {
                let arr = []
                if (name == '全部') {
                    this.keyPersonSelectArr = this.keyPersonDetailArr
                } else {
                    this.keyPersonDetailArr.some(item => {
                        if (item.policeStation == name) {
                            arr.push(item)
                        }
                        this.keyPersonSelectArr = arr
                        this.keyPersonSelectSaveArr = arr
                    })
                }
                this.initkeyPersonEcharts()
        /**
         * @description: 现有地切换
         * @param {*} type
         * @return {*}
         */
        landTabClick (type) {

            this.tabTypeThree = type

            if (type == 0) {
                this.getAreaStatisticInfo(2)
            } else if (type == 1) {
                this.getAreaStatisticInfo(1)
            }

        },

        backBegin () {
            this.dataDeep = 1
            this.initPersonEcharts()
            // let xDate, yDate, colors
            // if (this.tabType == 0) {
            //     xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
            //     yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
            //     colors = ['#06B5D7', '#44C0C1', '#71C8B1']
            // } else if (this.tabType == 1) {
            //     xDate = ['湖北', '上海', '北京', '广东', '浙江']
            //     yDate = [6414, 4231, 2211, 1231, 881]
            //     colors = ['#ef9faa', '#f7bfc6', '#fedade']
            // } else if (this.tabType == 2) {
            //     xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
            //     yDate = [881, 1231, 2211, 4321, 6414]
            //     colors = ['#7d65c0', '#a47db4', '#e0a8c5']
            // }
            // homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },

        selectAreaChangeData (name) {
            if (this.peopletype == 1) {
                if (this.peopletype == 1 && name != '全部') {
                    let arr = []
                    this.keyPersonSelectSaveArr.some(item => {
                        if (item.housingEastate == name) {
                            arr.push(item)
                        }
                    })
                    this.keyPersonSelectArr = arr
                } else {
                    this.keyPersonSelectArr = this.keyPersonSelectSaveArr
                }
                this.initkeyPersonEcharts()
            }

        },

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

        getAreaStatisticInfo (type, deptId) {
            getAreaStatisticInfo(type, deptId).then(res => {
        /**
         * @description: 获取现有地数据
         * @param {*} type
         * @param {*} deptId
         * @return {*}
         */
        getAreaStatisticInfo (type) {
            getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
                let landData = []
                if (type == 2) {
                    this.areaNum = res.data.data.areaNum
                    this.villageNum = res.data.data.villageNum
@@ -997,7 +966,7 @@
                        nameArr.push(item.name.replace('派出', ''))
                        countArr.push({ value: item.count, id: item.id })
                    })
                    this.villageOptionData = [nameArr, countArr]
                    landData = [nameArr, countArr]
                } else if (type == 1) {
                    // this.areaNum = res.data.data.areaNum
                    // this.villageNum = res.data.data.villageNum
@@ -1007,56 +976,23 @@
                        nameArr.push(item.name.replace('派出', ''))
                        countArr.push({ value: item.count, id: item.id })
                    })
                    this.areaOptionData = [nameArr, countArr]
                } else if (type == 3) {
                    this.policeVillageNum = res.data.data.villageNum
                    let nameArr = []
                    let countArr = []
                    res.data.data.data.forEach(item => {
                        nameArr.push(item.name.replace('居民委员会', ''))
                        countArr.push({ value: item.count, id: item.id })
                    })
                    this.policeVillageOptionData = [nameArr, countArr]
                    landData = [nameArr, countArr]
                }
                this.initLandEcharts()

                this.initLandEcharts(landData)
            })
        },

        //获取各个派出所的人口数量
        getPoliceStationInfo () {
            getVillagePersonStatisticInfo().then(res => {
                if (res.data.code == 200) {
                    this.policeStationPersonInfo = res.data.data
                    //异步，因此放进接口方法内部
                    this.initPersonEcharts()
                    this.clickPeopleChart()
                }
            })
        /**
         * @description: 视图窗口改变时，echarts图表重置
         * @return {*}
         */
        echartsResize () {
            homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
            landMyChart && landMyChart != null && landMyChart.resize()
            keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
            houseMyChart && houseMyChart != null && houseMyChart.resize()
        },

        //获取该派出所下的辖区
        getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
            getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
                if (res.data.code == 200) {
                    var chartDom = document.getElementById('PersonEcharts')
                    homePersonmyChart = this.$echarts.init(chartDom)
                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
                    this.villagePersonStatisticInfoList.forEach(e => {
                        xDate.push(e.name.replace('居民委员会', ''))
                        yDate.push({
                            value: e.num,
                            name: e.name,
                            id: e.id
                        })
                    })
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                    this.clickPeopleChart()
                }
            })
        }



    },

@@ -1186,7 +1122,7 @@
                color: #fff;
            }

            & > div:nth-of-type(2) {
            &>div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -1214,7 +1150,7 @@
                align-items: center;
                justify-content: center;

                & > div {
                &>div {
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;
@@ -1223,16 +1159,14 @@

            .tab {
                display: flex;
                justify-content: space-around;
                padding: 0 10%;
                justify-content: center;
            }

            .tab1 {
                width: 50%;
                padding: 0 10%;
                margin-left: 25% !important;
                display: flex;
                justify-content: space-around;
                justify-content: center;
                margin: 0 10px;
                background: $sub-tab-bg-color;
                border-radius: 8px;

 src/views/home/components/rightContainer.vue

@@ -153,7 +153,7 @@
            linetype: 0,
            tableHeight: 0,
            schedulingList: [],

            policeStaionID: ''
        }
    },
    created () {
@@ -173,7 +173,9 @@

    mounted () {
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()

        this.getHomeAllData()

        this.clickEquimentChart()

        this.$nextTick(() => {
@@ -189,6 +191,16 @@
        //     this.$emit('changeActivityType', type)
        //     this.$emit('activityChange')
        // },

        /**
         * @description: 获取当前组件内所有数据
         * @return {*}
         */
        getHomeAllData (id = '') {
            this.policeStaionID = id

            this.initEventChangeEcharts()
        },

        getSchedulingList () {
            getSchedulingList().then(res => {
@@ -235,7 +247,7 @@

        // 获取案件统计值
        getCaseAll (start, end) {
            const caseAll = getCaseAll(start, end, this.userInfo.dept_id).then(res => {
            const caseAll = getCaseAll(start, end, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
                if (res.data.length > 0) {
                    return res.data.reduce((previous, current) => {
                        previous.xData.push(current.days)

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-02 15:02:18
 * @LastEditTime: 2023-02-03 15:14:54
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -518,7 +518,7 @@
            }],
            activityList: [],
            policeSituationList: [],
            policeStationCheckValue: '请选择派出所',
            policeStationCheckValue: '全部',
            areaOptionData: [],
            areaCheckValue: '请选择责任区',
            housingCheckValue: '请选择小区',
@@ -564,6 +564,9 @@
            },
            peoplePoliceName: '',
            peopleCallPhone: '',

            // 当前下拉选中的ID
            policeStaionID: ''
        }
    },

@@ -758,6 +761,8 @@
        },

        policeStationSelect (item) {
            if (this.policeStationCheckValue == item.name) return

            this.policeStationCheckValue = item.name

            if (item.name == "全部") {
@@ -777,14 +782,24 @@
                this.housingOptions = []
                this.areaCheckValue = '请选择责任区'
                this.housingCheckValue = '请选择小区'

                this.policeStaionID = ''
            } else {
                cylinderLayer.clear()
                this.initAreaOptionLayer(item)
                this.areaCheckValue = '请选择责任区'
                this.housingCheckValue = '请选择小区'
                this.getPoliceStationTree(2, item.id)

                this.policeStaionID = item.id
            }

            this.$refs.leftContainer.getHomeAllData(this.policeStaionID)
            this.$refs.rightContainer.getHomeAllData(this.policeStaionID)
            this.$refs.bottomContainer.getHomeAllData(this.policeStaionID)

            this.policeStaionChecked = item

            // this.$refs.leftContainer.selectPoliceChangeData(item.policeStationName)
            // this.$refs.rightContainer.selectPoliceChangeEquimentData(item.policeStationName)
            // this.$refs.rightContainer.selectPoliceChangeEventData(item.policeStationName)
@@ -805,7 +820,6 @@
                this.areaChecked = item
                this.initAreaOptionLayer(item)
            }
            this.$refs.leftContainer.selectAreaChangeData(item.areaCheckName)
        },

        housingSelect (item) {
@@ -1291,8 +1305,6 @@
            })

            const center = this.getAllRegionCenter(this.policeStationOptions)

            console.log(center, 456)

            this.$EventBus.$emit('toPosition', {
                siteJd: center[0],