社区人口户室图例样式

guanqb

2023-05-17 9a2897f37b2df281618019e460b427ef0bc82f74

社区人口户室图例样式

 src/styles/media/index.scss

@@ -798,7 +798,8 @@

                                                            .flow {
                                                                // top: calc((100% - countSizeVh(18)) / 4);
                                                                top: calc((100% / 3) - countSizeVh(3));
                                                                // top: calc((100% / 3) - countSizeVh(3));
                                                                top: calc(50% - countSizeVh(3));
                                                            }

                                                            .focus {

 src/views/house/index.vue

@@ -69,6 +69,58 @@
                                <div class="l">标准地址：</div>
                                <div class="r">{{ villageInfo.address ? villageInfo.address : '暂无数据' }}</div>
                            </div>
                            <div>
                                <div class="l">人口情况：</div>
                                <div class="p-r">
                                    <div>
                                        <div style="color:#0e88ff">{{ villageInfo.censusRegisterNumber ?
                                            villageInfo.censusRegisterNumber
                                            : '0' }}</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#71fdf7">{{ villageInfo.realExistenceNumber ?
                                            villageInfo.realExistenceNumber :
                                            '0' }}</div>
                                        <div>实有人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#ff796c">{{ villageInfo.emphasisNumber ?
                                            villageInfo.emphasisNumber :
                                            '0' }}</div>
                                        <div>重点人口</div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="l">户室情况：</div>
                                <div class="p-r">
                                    <div>
                                        <div style="color:#2a91f5">{{ villageInfo.realExistenceNumber ?
                                            villageInfo.realExistenceNumber :
                                            '0' }}</div>
                                        <div>户室总数</div>
                                    </div>
                                    <div>
                                        <div style="color:#eeeeee">{{ villageInfo.emphasisNumber ?
                                            villageInfo.emphasisNumber :
                                            '0' }}</div>
                                        <div>未关联</div>
                                    </div>
                                    <div>
                                        <div style="color:#eeee00">{{ villageInfo.emphasisNumber ?
                                            villageInfo.emphasisNumber :
                                            '0' }}</div>
                                        <div>未核实</div>
                                    </div>
                                    <div>
                                        <div style="color:#00ee00">{{ villageInfo.censusRegisterNumber ?
                                            villageInfo.censusRegisterNumber
                                            : '0' }}</div>
                                        <div>已核实</div>
                                    </div>
                                </div>
                            </div>
                            <div class="code">
                                <el-image fit="contain" :src="villageInfo.codeUrl"
                                    :preview-src-list="[villageInfo.codeUrl]">
@@ -139,15 +191,15 @@
                            <div class="content">
                                <div>
                                    <div>电梯</div>
                                    <div style="color:#72fff8x">{{ floorInfo.elev }}</div>
                                    <div style="color:#59a9ff">{{ floorInfo.elev }}</div>
                                </div>
                                <div v-if="isShowFloorCount">
                                    <div>楼层总数</div>
                                    <div style="color:#72fff8x">{{ floorInfo.floor_num }}</div>
                                    <div style="color:#59a9ff">{{ floorInfo.floor_num }}</div>
                                </div>
                                <div>
                                    <div>户室总数</div>
                                    <div style="color:#72fff8">{{ floorInfo.house_num }}</div>
                                    <div style="color:#59a9ff">{{ floorInfo.house_num }}</div>
                                </div>
                            </div>
                        </div>
@@ -156,19 +208,18 @@
                            <div class="content">
                                <div class="one">
                                    <div @click="goTOPeopleDetail(1)">
                                        <div style="color:#72fff8">{{ peopleInfo.registeredPopulation }}</div>
                                        <div style="color:#0e88ff">{{ peopleInfo.registeredPopulation }}</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div @click="goTOPeopleDetail(2)">
                                        <div style="color:#FF796C">{{ peopleInfo.actualPopulation }}</div>
                                        <div style="color:#71fdf7">{{ peopleInfo.actualPopulation }}</div>
                                        <div>实有人口</div>
                                    </div>
                                    <div @click="goTOPeopleDetail(3)">
                                        <div style="color:#FF796C">{{ peopleInfo.KeyPopulation }}</div>
                                        <div style="color:#ff796c">{{ peopleInfo.KeyPopulation }}</div>
                                        <div>重点人口</div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="house-element-info" v-if="isShowHouseBox">
@@ -186,12 +237,19 @@
                                <div class="type">户室图例</div>
                                <div class="type-val">
                                    <div>
                                        <span style="background: #0E88FF;"></span>
                                        含关联人口
                                        <span
                                            style="width: 10px; height: 10px; background: #eeeeee; border-radius: 50%;"></span>
                                        未关联
                                    </div>
                                    <div>
                                        <span style="background: #FF796C;"></span>
                                        已核实户室
                                        <span
                                            style="width: 10px; height: 10px; background: #eeee00; border-radius: 50%;"></span>
                                        未核实
                                    </div>
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #00ee00; border-radius: 50%;"></span>
                                        已核实
                                    </div>
                                </div>
                            </div>
@@ -231,9 +289,9 @@
                                            <div v-for="(value, index) in item.children_infos" :key="index"
                                                @click="residentDetailsClick(value)"
                                                :class="{ on: floorChoosed == value.sname }">{{ value.sname }}室
                                                <div class="flow"></div>
                                                <div class="focus"></div>
                                                <!-- <div class="warning"></div> -->
                                                <div class="flow"
                                                    :class="[value.isBus == '1' ? 'yellow' : '', value.isBus == '2' ? 'grey' : '', value.isBus == '3' ? 'green' : '']">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
@@ -549,7 +607,8 @@
    getPoliceSationVillageInfo,
    getAoiByPt,
    getSearchExtensivelyHousesdata,
    getPicURL
    getPicURL,
    getPersonConnectionConditionByBuildingId
} from "@/api/dept/index.js"
import { getAlarmList, getAlarmStatistics } from "@/api/home/index.js"

@@ -760,6 +819,7 @@
            residentCodeUrl: '',
            unitChoosed3DList: [],
            curHousingHWTXAYjpca: '',
            personConnectionData: []
        }
    },

@@ -782,6 +842,7 @@
    },

    created () {

        // 首页跳转社区包含参数
        if (this.$route.query.id) {
            this.getVillageInfo(this.$route.query.id)
@@ -874,6 +935,24 @@
    updated () { },

    methods: {
        // 查询当前楼栋下户室信息（是否关联）
        getPersonConnectionConditionByBuildingId (params) {
            getPersonConnectionConditionByBuildingId(params).then(res => {
                console.log(res.data.data, 'getPersonConnectionConditionByBuildingId')
                this.personConnectionData = res.data.data
                this.unitChoosedArr.forEach(item => {
                    item.children_infos.forEach(it => {
                        let residentId = it.std_addr_id.split('|')[2]
                        res.data.data.forEach(one => {
                            if (one.busId == residentId) {
                                it.isBus = one.isBus
                            }
                        })
                    })
                })
            })
        },

        // 收缩或展开小区信息
        unfoldHouseBox (type) {
            if (type == 'up') {
@@ -1352,7 +1431,7 @@
        },

        // 楼栋单元楼层户室查询--大搜
        getUnitHousesData (ak, region, ids, infos) {
        getUnitHousesData (ak, region, ids, infos, buildId) {
            getSearchExtensivelyHousesdata(ak, region, ids, infos).then((res) => {
                console.log('getUnitHousesData--then')
                if (res.data.result == null) {
@@ -1393,6 +1472,8 @@
                            this.pictLoading = false
                        }, 3000)
                    })
                    // 查询户室是否关联
                    this.getPersonConnectionConditionByBuildingId({ buildId })
                } else {
                    this.isShowHouseBox = false
                    this.isHaveResidentData = false
@@ -1559,12 +1640,14 @@
            // 重点人口户籍人口
            let buildId = item.build_std_addr_id
            this.getVillagePersonStatisticInfoByBuildId({ buildId })

            // 楼栋单元楼层户室查询-大搜
            this.getUnitHousesData(
                "ebf48ecaa1fd436fa3d40c4600aa051f",
                "361100",
                item.build_uid,
                "1|3")
                "1|3",
                buildId)
            this.getHouses3DData(item.build_std_addr_id, "361102", aoiArr)
            this.floorsType = 1
            document.querySelector(".floor-num").style.left = "0px"
@@ -1962,6 +2045,10 @@
                this.villageInfo.codeUrl = res.data.data.url
                this.villageInfo.aoiId = res.data.data.aoiId
                this.villageInfo.policePhone = res.data.data.policePhone
                // 实有人口数 realExistenceNumber; 户籍人口数 censusRegisterNumber;重点人口数 emphasisNumber;
                this.villageInfo.realExistenceNumber = res.data.data.realExistenceNumber
                this.villageInfo.censusRegisterNumber = res.data.data.censusRegisterNumber
                this.villageInfo.emphasisNumber = res.data.data.emphasisNumber
                console.log('getVillageInfo', res)
            })
        },
@@ -2433,6 +2520,12 @@
                            text-align: left;
                            line-height: 40px;
                        }

                        .p {
                            width: 130px;
                            flex-shrink: 0;
                            text-align: left;
                        }
                    }

                    .code {
@@ -2442,6 +2535,30 @@
                        right: 0;
                        top: 0;
                    }

                    .p-r {
                        display: flex;
                        flex: 1;
                        justify-content: space-around;

                        &>div {
                            flex: 1;

                            &>div:first-child {
                                height: 26px;
                                line-height: 26px;
                                font-size: 16px;
                                font-weight: bold;
                                color: #499d99;
                            }

                            &>div:last-child {
                                height: 22px;
                                line-height: 22px;
                            }
                        }
                    }

                }

                .shrink-house {
@@ -2874,8 +2991,10 @@

                                        .flow {
                                            // top: calc((100% - 18px) / 4);
                                            top: calc((100% / 3) - 3px);
                                            background: rgb(14, 136, 255);
                                            // top: calc((100% / 3) - 3px);
                                            top: calc(50% - 3px);
                                            // background: rgb(14, 136, 255);
                                            background: rgb(238, 238, 238);
                                        }

                                        .focus {
@@ -2888,6 +3007,19 @@
                                            top: calc((100% - 18px) / 4 * 3 + 12px);
                                            background: rgb(254, 172, 4);
                                        }

                                        // 灰色：未关联，红色：未核实（关联），绿色：已核实
                                        .yellow {
                                            background: rgb(238, 238, 0);
                                        }

                                        .green {
                                            background: rgb(0, 238, 0);
                                        }

                                        .grey {
                                            background: rgb(238, 238, 238);
                                        }
                                    }

                                    &>.on {