首页人员图标弹窗加实有人口户籍人口类型、社区加二维码

guanqb

2023-05-06 e32c2f01c5ab752bfb5cc0847a07c655c704a133

首页人员图标弹窗加实有人口户籍人口类型、社区加二维码

 public/img/code.jpg

 src/styles/base/index.scss

@@ -156,7 +156,7 @@
    .el-dialog {
        display: flex;
        flex-direction: column;
        width: 720px;
        width: 920px;

        .el-dialog__body {
            flex: 1;

 src/styles/media/index.scss

@@ -497,6 +497,11 @@
                                                line-height: countSizeVh(40);
                                            }
                                        }

                                        .code {
                                            width: countSizeVw(120, 1920);
                                            height: countSizeVh(120);
                                        }
                                    }
                                }

@@ -1998,7 +2003,7 @@

                    .resident-details-box {
                        .el-dialog {
                            width: countSizeVw(720, 1920);
                            width: countSizeVw(1080, 1920);
                        }

                        .el-dialog__header span {

 src/views/home/components/dialog/areaDetailsBox.vue

@@ -29,10 +29,16 @@
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="realName" label="姓名"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="address" label="地址" min-width="240%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="reAddress" label="地址"
                    min-width="240%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="personType" label="人口类型">
                    <template slot-scope="scope">
                        {{ scope.row.personType == 1 ? '户籍人口' : '实有人口' }}
                    </template>
                </el-table-column>
            </el-table>

            <div class="pages all-pagination-sty" ref="tablePagination">
@@ -142,6 +148,7 @@
                size: this.peoplePage.pageSize
            }).then(res => {
                this.peoplePage.total = 0
                console.log('getPersonInfoPage', res)

                if (res.data.data.records.length > 0) {
                    this.peoplePage.total = res.data.data.total

 src/views/home/components/leftContainer.vue

@@ -7,35 +7,23 @@
                        <span :class="{ choosed: peopletype == 0 }">现有人员</span>
                    </div>
                </div>
                <el-main
                    v-loading="personEchartsLoading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);"
                >
                <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab" v-show="peopletype == 0">
                        <div
                            class="tab"
                            :class="{ 'select-on-tab': tabType == 0 }"
                            @click="personTabClick(0)"
                        >
                            <div class="tab-title-small">户籍人口:</div>
                        <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                            <div class="tab-title-small">人口总数:</div>
                            <div class="tab-title-small">
                                {{
                                personAll.total ? personAll.total : 0
                                    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">
                                {{
                                personAll.emphasisNum ? personAll.emphasisNum : 0
                                    personAll.emphasisNum ? personAll.emphasisNum : 0
                                }}人
                            </div>
                        </div>
@@ -46,94 +34,53 @@
                    </div>
                </el-main>

                <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>
        <div class="house-box" style="position: relative;">
            <div class="box">
                <div class="title">现有住宅</div>
                <el-main
                    v-loading="houseEchartsLoading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.5)"
                >
                <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <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>
                        <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>
@@ -143,45 +90,24 @@
            </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>
                <el-main
                    v-loading="landEchartsLoading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.5)"
                >
                <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab" v-show="isAllPoliceStation">
                        <div
                            class="tab"
                            :class="{ 'select-on-tab': tabTypeThree == 0 }"
                            @click="landTabClick(0)"
                        >
                        <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>
                        <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>
@@ -197,19 +123,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>
@@ -428,7 +345,6 @@
                    this.getPoliceStationInfo()

                } else {

                    this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
                }

@@ -447,7 +363,7 @@
                    this.disposeEchart()
                    curSubofficeData = res.data.data
                    this.personAll = res.data.data

                    console.log('getPoliceStationInfo', res.data.data)
                    this.policeStationPersonInfo = res.data.data
                    //异步，因此放进接口方法内部
                    this.initPersonEcharts()
@@ -472,7 +388,7 @@
        getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
            getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
                if (res.data.code == 200) {

                    console.log(res, 'getVillagePersonStatisticInfoByPoliceStationId')
                    this.disposeEchart()
                    var chartDom = document.getElementById('PersonEcharts')
                    homePersonmyChart = this.$echarts.init(chartDom)
@@ -484,25 +400,30 @@


                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
                    var xDate = [], yDate1 = [], yDate2 = [], colors1 = ['#ccf9d0', '#f9d888', '#f7857e'], colors2 = ['#FF6666', '#FFFF00', '#0066CC']

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

                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, colors1, colors2), true)
                    this.clickPeopleChart()

                    setTimeout(() => {
                        this.dataDeep = 2,
                            this.personEchartsLoading = false
                        this.dataDeep = 2
                        this.personEchartsLoading = false
                    }, 1000)

                }
@@ -521,14 +442,20 @@
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)

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

            if (this.policeStationPersonInfo.data.length > 0) {
                this.policeStationPersonInfo.data.forEach(e => {
                    xDate.push(e.name.replace('派出', ''))
                    yDate.push({
                        value: e.num,
                    yDate1.push({
                        value: e.hjnum,
                        id: e.id,
                        type: 'policeStation',
                        name: e.name
                    })
                    yDate2.push({
                        value: e.synum,
                        id: e.id,
                        type: 'policeStation',
                        name: e.name
@@ -536,7 +463,7 @@
                })
            }

            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, ['#06B5D7', '#44C0C1', '#71C8B1'], ['#FF6666', '#9a76dc', '#602ac2']))
        },

        /**
@@ -546,7 +473,7 @@
         * @param {*} colors
         * @return {*}
         */
        initPersonOptions (xDate, yDate, colors) {
        initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
            let options

            if (xDate.length == 0) {
@@ -601,42 +528,94 @@
                            fontSize: fontSize(12)
                        }
                    },
                    legend: {
                        itemWidth: 15,
                        itemHeight: 15,
                        data: ['户籍人口', '实有人口'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            data: yDate,
                            name: '户籍人口',
                            data: yDate1,
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            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] },
                                            ]
                                        )
                                    }
                                    color: colors1[0],
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors1[0] },
                                    //             { offset: 0.5, color: colors1[1] },
                                    //             { offset: 1, color: colors1[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] }
                                            ]
                                        )
                                    }
                                    color: colors1[0],
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors1[2] },
                                    //             { offset: 0.7, color: colors1[1] },
                                    //             { offset: 1, color: colors1[0] }
                                    //         ]
                                    //     )
                                    // }
                                }
                            },
                        }
                        },
                        {
                            name: '实有人口',
                            data: yDate2,
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: colors2[0]
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors2[2] },
                                    //             { offset: 0.5, color: colors2[1] },
                                    //             { offset: 1, color: colors2[0] },
                                    //         ]
                                    //     )
                                    // }
                                },
                                emphasis: {
                                    color: colors2[0]
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors2[0] },
                                    //             { offset: 0.7, color: colors2[1] },
                                    //             { offset: 1, color: colors2[2] }
                                    //         ]
                                    //     )
                                    // }
                                }
                            },
                        },

                    ],
                    grid: {
                        top: '4%',
@@ -1497,7 +1476,7 @@
                color: #fff;
            }

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

                & > div {
                &>div {
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;

 src/views/house/index.vue

@@ -65,6 +65,11 @@
                                <div class="l">标准地址：</div>
                                <div class="r">{{ villageInfo.address ? villageInfo.address : '暂无数据' }}</div>
                            </div>
                            <!-- <div class="code">
                                <el-image fit="contain" src="/img/code.jpg" :preview-src-list="['/img/code.jpg']">
                                    <div slot="error" class="image-slot">暂无二维码</div>
                                </el-image>
                            </div> -->
                        </div>
                    </div>
                </el-main>
@@ -252,6 +257,11 @@
                <div class="police-info" v-if="navType == 1" ref="policeTableBox">
                    <el-main v-loading="policeInfoLoading" element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                        <div class="timer">
                            <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right"
                                unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                @change="caseTimeChange" :picker-options="pickerOptions"></el-date-picker>
                        </div>
                        <el-table :data="callPoliceData" style="width: 100%" :height="currentTableHeight"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
@@ -346,18 +356,58 @@
        </el-dialog>

        <el-dialog :title="residentDetailsTitle" :visible.sync="residentDetailsShow" :modal-append-to-body="false"
            :modal="true" :close-on-click-modal="false" :before-close="residentDetailsClose" class="resident-details-box"
            width="24%">
            :modal="true" :close-on-click-modal="false" :before-close="residentDetailsClose" class="resident-details-box">
            <el-table :data="houseDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText">
                <el-table-column prop="realName" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="cardNo" label="身份证号"></el-table-column>
                <el-table-column prop="realName" label="姓名">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.isKeyPeople == 1 ? '#f00!important' : '#000') }">{{
                            scope.row.realName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="电话">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.isKeyPeople == 1 ? '#f00!important' : '#000') }">{{
                            scope.row.phone }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="cardNo" label="身份证号">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.isKeyPeople == 1 ? '#f00!important' : '#000') }">{{
                            scope.row.cardNo }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="relationship" label="户主关系">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.isKeyPeople == 1 ? '#f00!important' : '#000') }">{{
                            scope.row.relationship }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="户籍地址">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.isKeyPeople == 1 ? '#f00!important' : '#000') }">{{
                            scope.row.address }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="人口类型">
                    <template slot-scope="scope">{{ scope.row.personType == 1 ? '户籍人口' : '实有人口' }}</template>
                    <template slot-scope="scope"><span
                            :style="{ color: (scope.row.isKeyPeople == 1 ? '#f00!important' : '#000') }">{{
                                scope.row.personType == 1 ? '户籍人口' : '实有人口' }}</span></template>
                </el-table-column>
                <el-table-column label="是否为重点人员">
                    <template slot-scope="scope"><span
                            :style="{ color: (scope.row.isKeyPeople == 1 ? '#f00!important' : '#000') }">{{
                                scope.row.isKeyPeople == 1 ? '是' :
                                '否'
                            }}</span></template>
                </el-table-column>
            </el-table>
        </el-dialog>
@@ -562,7 +612,39 @@
            villageInfoLoading: false,
            BuildListLoading: false,
            isHaveResidentData: false,

            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit("pick", [start, end])
                        },
                    },
                ],
            },
            eventTime: [],
            eventTimeArr: [],
        }
    },

@@ -658,6 +740,27 @@
    updated () { },

    methods: {
        // 警情统计中时间变化
        async caseTimeChange (e) {
            const date = e.map((item) => {
                return this.dateFormat(item)
            })
            this.eventTimeArr = date
            this.getAlarmList(this.eventTimeArr)
        },

        // 获取当前日期
        dateFormat (dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? "0" + m : m
            var d = date.getDate()
            d = d < 10 ? "0" + d : d
            const time = y + "-" + m + "-" + d
            return time
        },

        changeBuildHighLightchecked (e) {
            this.$EventBus.$emit("switchThreeDimensions", e)
        },
@@ -837,6 +940,7 @@
        },

        navClick (e) {
            if (this.navType == e.target.dataset.type) return
            this.navType = e.target.dataset.type

            this.$store.commit('SET_HOUSEDEEPDATAPOPUP', false)
@@ -850,7 +954,8 @@
                this.jqNoDataText = '  '
                this.callPolicePage.currentPage = 1
                this.callPoliceData = []
                this.getAlarmList()
                this.eventTime = this.getHalfYearTime()
                this.getAlarmList(this.eventTimeArr)
            } else {
                circleLayer.clear()
                circleLayer.remove()
@@ -998,7 +1103,7 @@
                }

                this.callPolicePage.currentPage = 1
                this.getAlarmList()
                this.getAlarmList(this.eventTimeArr)
            }).catch(res => {
                setTimeout(() => {
                    this.villageInfoLoading = false
@@ -1152,11 +1257,18 @@
            this.getResident3DData(this.choosedBuildId, "361102", params.sname)
            console.log('residentDetailsClick--then')
            let residentId = params.std_addr_id.split('|')[2]
            this.getVillagePersonInfo(residentId)
            // this.getVillagePersonInfo(residentId)
            this.houseDate = [
                { realName: '张三', phone: '17755556666', cardNo: '123456999911223344', personType: 1, isKeyPeople: 0, address: '湖北省武汉市江汉区', relationship: '夫妻' },
                { realName: '李四', phone: '17755556666', cardNo: '123456999911223344', personType: 0, isKeyPeople: 0, address: '湖北省武汉市江汉区', relationship: '夫妻' },
                { realName: '王五', phone: '17755556666', cardNo: '123456999911223344', personType: 1, isKeyPeople: 1, address: '湖北省武汉市江汉区', relationship: '夫妻' },
                { realName: '孙六', phone: '17755556666', cardNo: '123456999911223344', personType: 1, isKeyPeople: 0, address: '湖北省武汉市江汉区', relationship: '夫妻' },
                { realName: '薛七', phone: '17755556666', cardNo: '123456999911223344', personType: 0, isKeyPeople: 1, address: '湖北省武汉市江汉区', relationship: '夫妻' },
            ]
            this.residentDetailsTitle = `${params.name}住户信息`
            this.residentDetailsShow = true
            this.residentNoDataText = ' '
            this.residentLoading = true
            // this.residentLoading = true
        },

        residentDetailsClose () {
@@ -1381,7 +1493,7 @@
        },

        // 获取历史接警记录
        getAlarmList () {
        getAlarmList (timeArr) {
            if (circleLayer != null) {
                circleLayer.clear()
                circleLayer.remove()
@@ -1397,8 +1509,10 @@
                size: this.callPolicePage.pagesize,
                sfdz: this.villageInfo.name,
                jjdwbh: this.userInfo.dept_id,
                start: this.getHalfYearTime()[0],
                end: this.getHalfYearTime()[1]
                // start: this.getHalfYearTime()[0],
                // end: this.getHalfYearTime()[1],
                start: timeArr[0],
                end: timeArr[1]
            }).then((res) => {
                this.callPolicePage.count = res.data.data.pages

@@ -1541,7 +1655,7 @@
            this.callPolicePage.currentPage = currentPage
            this.policeInfoLoading = true
            this.jqNoDataText = '  '
            this.getAlarmList()
            this.getAlarmList(this.eventTimeArr)
        },

        peopleHandleCurrentChange (currentPage) {
@@ -2005,6 +2119,8 @@
                }

                .housing-introduce {
                    position: relative;

                    &>div {
                        padding: 0 10px;
                        display: flex;
@@ -2023,6 +2139,14 @@
                            line-height: 40px;
                        }
                    }

                    .code {
                        position: absolute;
                        width: 120px;
                        height: 120px;
                        right: 0;
                        top: 0;
                    }
                }
            }