社区感知中树状结构逻辑调整等

shuishen

2023-01-31 43c138efe88b832a31461391fcafd699dabba1a8

社区感知中树状结构逻辑调整等

 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-30 17:13:44
 * @LastEditTime: 2023-01-31 10:47:22
 * @FilePath: \srs-police-affairs\src\api\dept\index.js
 * @Description:
 *
@@ -161,12 +161,12 @@
}

// 小区树形数据
export const getPoliceStationTrees = (name) => {
export const getPoliceStationTrees = (params) => {
    return request({
        url: `/api/policeStationInfo/policeStationInfo/getPoliceStationTrees`,
        method: 'get',
        params: {
            name
            ...params
        }
    })
}

 src/styles/media/index.scss

@@ -2712,7 +2712,7 @@

            .el-tree {
                height: countSizeVh(360) !important;
                width: countSizeVw(400, 1920) !important;
                width: 100% !important;

                .el-tree-node__content {
                    height: countSizeVh(26);

 src/views/house/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-01-30 17:31:53
 * @LastEditTime: 2023-01-31 15:17:06
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -13,27 +13,21 @@
    <div class="house-page container">
        <div v-show="boxShow" class="container-content">
            <div v-show="contentShow" class="search-box">
                <!-- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <button @click="searchClick" class="el-icon-search"></button>-->
                <el-popover ref="popover" placement="bottom" trigger="manual" v-model="searchTreeShowFlag"
                    popper-class="tree-search-popup" @mousedown.native="preventFocusLost">
                    <el-tree v-show="searchLazyFlag == true" ref="popupTree" style="overflow: auto;"
                        class="select-tree-box" :load="loadNode" :lazy="true" :props="props"
                        @current-change="currentChangeHandle" @mousedown.native="preventFocusLost"></el-tree>

                <el-popover ref="popover" placement="bottom" trigger="manual" :visible-arrow="false"
                    v-model="treeListShow" popper-class="tree-search-popup">
                    <el-tree style="width: 360px; height: 400px; overflow: auto;" class="select-tree-box"
                        :data="testData" :props="defaultProps" ref="popupTree" @current-change="currentChangeHandle"
                        :default-expand-all="defaultExpandAll" :accordion="accordion"
                        :highlight-current="highlightCurrent" :expand-on-click-node="true" check-strictly
                        :filter-node-method="filterNode"></el-tree>
                    <el-tree v-show="searchLazyFlag == false" :empty-text="treeEmptyText" ref="popupTree"
                        style="overflow: auto;" class="select-tree-box" :data="searchTreeData" :props="defaultProps"
                        :default-expand-all="true" @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"></el-tree>
                </el-popover>

                <el-input slot="reference" v-model="searchTreeName" @focus="treeListShow = true" v-popover:popover
                <el-input ref="searchTreeInput" v-model="searchTreeName" @input="searchInputTree"
                    @focus="searchTreeShowFlag = true" @blur="searchTreeShowFlag = false" v-popover:popover
                    placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
            </div>

            <div v-show="searchValBoxShow" class="search-val-box">
                <div>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                    </div>
                </div>
            </div>

            <div v-show="contentShow" class="result-content" ref="resultContentBox">
@@ -45,7 +39,7 @@
                    <div class="housing-bg">
                        <div class="block">
                            <el-carousel height="150px">
                                <el-carousel-item v-for="item in villageInfo.pic_url_list" :key="item">
                                <el-carousel-item v-for="(item, index) in villageInfo.pic_url_list" :key="index">
                                    <el-image style=" height: 100%" :src="item"
                                        :preview-src-list="villageInfo.pic_url_list"></el-image>
                                </el-carousel-item>
@@ -476,16 +470,32 @@
import {
    getSearchExtensively, getHouses, getSearchExtensivelyBgAoiDeepdata,
    getPoliceStationLazyTree, getPoliceStationTrees, getVillageInfo,
    getVillagePersonStatisticInfoByBuildId, getVillagePersonInfo, getResidentialQuartersInfo
    getVillagePersonStatisticInfoByBuildId, getVillagePersonInfo,
    getResidentialQuartersInfo
} from '@/api/dept/index.js'
import { getAlarmList } from "@/api/home/index.js"


export default {
    inject: ['userInfo'],

    data () {
        return {
            // 下拉搜索--树状数据相关
            searchTreeShowFlag: false,
            searchTreeName: '',
            treeListShow: false,
            searchTreeData: [],
            props: {
                children: "zones", //代表children为子级
                label: "name", //根据name渲染tree列表
                isLeaf: "leaf"
            },
            defaultProps: {
                children: "children", //代表children为子级
                label: "name", //根据name渲染tree列表
            },
            searchLazyFlag: true,
            treeEmptyText: "",

            contentShow: true,
            unitOptions: [{ value: 1, label: '1单元' }],
@@ -508,16 +518,9 @@
            lastFloorShow: false,
            nextFloorShow: true,
            houseDate: [],
            searchValue: '',
            searchArray: [],
            searchValBoxShow: false,

            boxShow: false,
            // 下拉搜索
            props: {
                label: 'name',
                children: 'zones',
                isLeaf: 'leaf'
            },

            buildingList: [],
            buildingChoosed: {},
            unitHouseChoosed: [],
@@ -553,7 +556,10 @@

            // table高度
            currentTableHeight: 0,
            villageInfo: {},
            villageInfo: {
                pic_url: '',
                pic_url_list: []
            },
            floorInfo: {},
            peopleInfo: {},
            choosedBuildId: '',
@@ -571,6 +577,7 @@

    created () {
        this.getResidentialQuartersInfo()

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

    methods: {
        /**
         * @description: 顶部搜索条件更改
         * @param {*} val
         * @return {*}
         */
        searchInputTree (val) {
            if (val.trim().length > 0) {
                this.searchTreeData = []
                this.treeEmptyText = "正在加载中"
                this.getPoliceStationTrees()
                this.searchLazyFlag = false
            } else {
                this.searchLazyFlag = true
            }
        },

        /**
         * @description: 禁用鼠标点击树结构的时候input失去焦点
         * @param {*} event
         * @return {*}
         */
        preventFocusLost (event) {
            event.preventDefault()
        },

        /**
         * @description: 当输入框有值时触发的搜索事件
         * @return {*}
         */
        getPoliceStationTrees () {
            getPoliceStationTrees({ name: this.searchTreeName, deptId: this.userInfo.dept_id }).then(res => {
                this.searchTreeData = res.data.data

                if (res.data.data.length == 0) this.treeEmptyText = '暂无数据'
            })
        },

        /**
         * @description: 树结构懒加载
         * @param {*} node
         * @param {*} resolve
         * @return {*}
         */
        async loadNode (node, resolve) {
            if (node.level === 0) {
                let policeStaionList = []
                await getPoliceStationLazyTree(1).then(res => {
                    policeStaionList = res.data.data
                })
                return resolve(policeStaionList)
            }
            if (node.level == 1) {
                let areaList = []
                await getPoliceStationLazyTree(2, node.data.id).then(res => {
                    areaList = res.data.data
                })
                return resolve(areaList)
            }
            if (node.level == 2) {
                let villageList = []
                await getPoliceStationLazyTree(3, node.data.id).then(res => {
                    res.data.data.forEach(item => {
                        villageList = res.data.data
                    })
                })
                return resolve(villageList)
            }
        },

        /**
         * @description: 树节点的选中事件
         * @param {*} current
         * @param {*} currentNode
         * @return {*}
         */
        currentChangeHandle (current, currentNode) {
            if (current.hasChildren == true) return

            this.filterText = ''
            this.prop = current.name

            this.getResidentialQuartersInfo(current.id, '361102')
            this.getSearchExtensivelyBgAoiDeepdata('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', current.id, '1|3')

            this.$refs.searchTreeInput.blur()
        },

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

@@ -642,19 +736,19 @@
                    this.villageInfo.pic_url_list.push(pic_url_item)
                })
                // 停车场出入口商场
                // let deepData = res.data.result[0].deep_infos.deep_info
                // this.parkingLotData = []
                // this.comeOutData = []
                // this.businessData = []
                // deepData.forEach(item => {
                //     if (item.pc_type == 1) {
                //         this.comeOutData.push(item)
                //     } else if (item.pc_type == 2) {
                //         this.parkingLotData.push(item)
                //     } else if (item.pc_type == 4) {
                //         this.businessData.push(item)
                //     }
                // })
                let deepData = res.data.result[0].deep_infos.deep_info
                this.parkingLotData = []
                this.comeOutData = []
                this.businessData = []
                deepData.forEach(item => {
                    if (item.pc_type == 1) {
                        this.comeOutData.push(item)
                    } else if (item.pc_type == 2) {
                        this.parkingLotData.push(item)
                    } else if (item.pc_type == 4) {
                        this.businessData.push(item)
                    }
                })
                // 小区楼栋数据
                let buildData = res.data.result[0].children_infos
                this.buildingList = []
@@ -786,43 +880,9 @@
            return arr.some((item) => { return item.peopleType == '境外人口' })
        },

        searchChange () {
            if (this.searchValue == '') {
                this.searchValBoxShow = false

                this.searchArray = []
            } else {
                this.searchValBoxShow = true

                // this.searchArray = listQuery(housingData, this.searchValue, 'name')
            }
        },

        searchClick () {
            this.searchValBoxShow = false

            // this.housingData = accurateSearch(housingData, this.searchValue, 'name', {})

            this.searchValue = ''
        },

        searchVlaClick (item) {
            this.searchValBoxShow = false

            // this.housingData = item

            this.searchValue = ''
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },

        //对树节点进行筛选时执行的方法
        filterNode (value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },

        searchExtensivelyClick () {
@@ -1068,6 +1128,8 @@
            })
        },



    },

    destroyed () {