驾驶舱筛选优化

linwe

2024-06-24 3831b2bd6ea9bf1c7eab86fe6465e4b910e02af6

驾驶舱筛选优化

 api/statistics/statistics.js

@@ -12,7 +12,7 @@
}

//获取社区概况数据统计 （数据驾驶舱）
export const getHouseStatistics  =(param)=>{
export const getHouseStatistics = (param) => {
    return http.request({
        url: 'blade-house/house/getHouseStatistics',
        method: 'GET',
@@ -21,7 +21,7 @@
}

//获取社区概况数据统计 （数据驾驶舱）
export const getHouseLabelStatistic  =(param)=>{
export const getHouseLabelStatistic = (param) => {
    return http.request({
        url: 'blade-house/house/getHouseLabelStatistic',
        method: 'GET',
@@ -46,3 +46,12 @@
        params: params
    })
}

// 获取网格（数据驾驶舱）
export const getGridList = (params) => {
    return http.request({
        url: 'blade-grid/grid/getGridList',
        method: 'GET',
        params: params
    })
}

 pages.json

@@ -17,7 +17,8 @@
            "path": "pages/statistics/index",
            "style": {
                "navigationBarTitleText": "驾驶舱",
                "enablePullDownRefresh": true
                "enablePullDownRefresh": false,
                "navigationStyle": "custom"
            }
        },

@@ -75,6 +76,13 @@
                "navigationBarBackgroundColor": "#fff",
                "navigationBarTextStyle": "black"
            }
        },
        {
            "path": "pages/home/selectSiteTwo",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        }
    ],
    "subPackages": [

 pages/home/selectSiteTwo.vue

New file
@@ -0,0 +1,263 @@
<template>
    <view class="">
        <view class="hander bgc-ff f-30">
            <text class="c-99">所选位置：</text>
            <text v-if="currentSite.name">{{currentSite.name}}</text>
            <block v-if="!currentSite.name">
                <text v-if="rolesType== 1">暂无绑定街道社区网格信息</text>
                <text v-if="rolesType==2">暂无绑定居民信息</text>
                <text v-if="rolesType==3">暂无绑定街道社区信息</text>
            </block>
        </view>
        <view class="section bgc-ff" v-if="roleType == 2 && list.length">
            <view class="section-title flex a-i-c">
                <block v-for="(item,index) in list">
                    <text :class="[ 'mr-100',index == selectIndex?'fw f-32':'f-28']"
                        @click="changeType(index)">{{item.name}}</text>
                </block>
            </view>
            <view class="">

                <view class="nomore f-30" v-if="!list[selectIndex].children.length">
                    暂无{{selectIndex == 0?"房屋":"经营场所"}}信息
                </view>

                <view class="site-list f-30 flex j-c-s-b a-i-c" v-for="(i,k) in list[selectIndex].children"
                    @click="selectChilren(i,k)">
                    <text>{{i.name}}</text>
                    <u-icon v-if="k == chilrenIndex && chilrenId == i.id" size="22" name="checkbox-mark"
                        color="#017BFC"></u-icon>
                </view>
            </view>
        </view>

        <view class="section bgc-ff pb-80" v-if="roleType == 1 && list.length">
            <view class="section-title flex j-c-s-b  a-i-c">
                <view class="flex a-i-c">
                    <text class="f-32 fw">街道社区</text>
                    <text class="ml-20 f-28">{{cateName}}</text>
                </view>
                <view class="select-btn c-main f-28" @click="isShow = true">选择街道</view>
            </view>

            <view class="">

                <view class="nomore f-30" v-if="!list[selectIndex].children.length">
                    暂无社区信息
                </view>


                <view class="site-list f-30 flex j-c-s-b a-i-c" v-for="(i,k) in list[selectIndex].children"
                    @click="selectChilren(i,k)">
                    <text>{{i.name}}</text>
                    <u-icon v-if="i.isShows" size="22" name="checkbox-mark" color="#017BFC"></u-icon>
                </view>
            </view>
        </view>

        <u-picker :show="isShow" :columns="[list]" :defaultIndex=[selectIndex] title="选择街道" keyName="name"
            @confirm="confirmSelect" @cancel="isShow = false" @close="isShow = false"></u-picker>
        <u-toast ref="uToast"></u-toast>

        <footer-btn text="确认" @click="submit" />

    </view>
</template>

<script>
    import {
        getFuncList,
    } from "@/api/doorplateAddress/doorplateAddress";
    export default {
        data() {
            return {
                addressType: 1,
                selectIndex: 0,
                list: [],
                currentSite: {},
                chilrenIndex: 0,
                chilrenId: "",
                chilrenList: [],
                roleType: 1,
                cateName: "",
                isShow: false,
                rolesType: 1
            }
        },

        onLoad() {
            let {
                roleName
            } = uni.getStorageSync("activeRole");

            if (roleName == '网格员' || roleName == '系统管理员') {
                this.rolesType = 1;
            } else if (roleName == '居民') {
                this.rolesType = 2;
            } else if (roleName == '民警') {
                this.rolesType = 3;
            }
            this.roleName = roleName;
            this.roleType = roleName == "居民" ? 2 : 1;
            this.getList()
        },

        methods: {
            changeType(index) {
                this.selectIndex = index;
            },

            selectChilren(item, index) {
                this.chilrenId = item.id;
                // this.chilrenIndex = index;
                console.log(item)
                for (let i = 0, ii = this.list.length; i < ii; i++) {
                    for (let k = 0, kk = this.list[i].children.length; k < kk; k++) {
                        if (this.list[i].children[k].id == item.id) {
                            if (this.list[i].children[k].isShows) {
                                this.list[i].children[k].isShows = false
                                this.chilrenList = this.chilrenList.filter(items => items !== item.id);
                                console.log("********T********" + JSON.stringify(this.chilrenList))
                            } else {
                                this.list[i].children[k].isShows = true
                                this.chilrenList = this.chilrenList.concat(item.id)
                                console.log("********F********" + JSON.stringify(this.chilrenList))
                                // 使用filter()方法返回一个新数组，排除掉要删除的元素
                            }
                            this.list[i].children[k].name = this.list[i].children[k].name + " "
                        }
                    }
                }
                // uni.navigateBack({
                //     success: () => {
                //         this.$store.commit("setSiteInfo", item)
                //         uni.$emit("refreshPage", item)
                //     }
                // })
            },

            submit() {
                uni.navigateBack({
                    success: () => {
                        // this.$store.commit("chilrenList", this.chilrenList)
                        console.log("******************" + JSON.stringify(this.chilrenList))
                        uni.setStorageSync("chilrenList", this.chilrenList)
                        uni.$emit("refreshData")
                    }
                })
            },

            getList() {
                // #ifdef MP-WEIXIN
                this.$refs.uToast.show({
                    type: 'loading',
                    message: '正在加载',
                    duration: 9999999
                })
                // #endif
                getFuncList(
                    this.roleType,
                    this.roleName
                ).then(res => {
                    console.log(res);
                    this.list = res.data;
                    this.$nextTick(() => {
                        if (this.list.length) {
                            this.getSelectIndex()
                        }
                        this.$refs.uToast.isShow = false
                    })
                })
            },

            confirmSelect(e) {
                console.log(e);
                this.selectIndex = e.indexs[0];
                this.cateName = e.value[0].name;
                this.isShow = false;
                uni.setStorageSync("curStreet", e.value[0].name);
            },

            getSelectIndex() {
                this.chilrenList = uni.getStorageSync("chilrenList");
                // this.currentSite = data;
                for (let i = 0, ii = this.list.length; i < ii; i++) {
                    for (let k = 0, kk = this.list[i].children.length; k < kk; k++) {
                        this.list[i].children[k].isShows = false
                        this.chilrenList.forEach(item => {
                            // console.log("******item******" + item)
                            if (this.list[i].children[k].id == item) {
                                // this.chilrenList = this.chilrenList.concat(item)
                                this.list[i].children[k].isShows = true
                                console.log("******item1111******" + JSON.stringify(this.chilrenList))

                                this.cateName = this.list[i].name;
                                uni.setStorageSync("curStreet", this.list[i].name);
                                this.chilrenId = this.list[i].children[k].id;
                                this.chilrenIndex = k
                            }
                        })
                    }
                }
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #f5f5f5;
    }

    /* 全局样式或页面样式 */
    .fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* 可根据需要调整内边距和外边距 */
        // padding: 10px;
        box-sizing: border-box;
        background-color: #fff;
        /* 背景色，确保按钮下方无穿透 */
        z-index: 999;
        /* 确保按钮在最上层，不受其他元素遮挡 */
    }

    /* 如果需要，也可以为按钮本身添加样式 */
    .fixed-bottom button {
        width: 100%;
        /* 按钮宽度，可根据需要调整 */
    }

    .hander {
        padding: 30rpx;
        margin-bottom: 20rpx;
    }

    .section {
        .section-title {
            padding: 30rpx;
            border-bottom: 1px solid #f5f5f5;
        }

        .mr-100 {
            margin-right: 100rpx;
        }

        .site-list {
            padding: 30rpx;
            border-bottom: 1px solid #f5f5f5;
        }

        .select-btn {
            padding: 6rpx 20rpx;
            border: 1px solid currentColor;
            border-radius: 30rpx;
        }
    }

    .nomore {
        padding: 30rpx;
    }
</style>

 pages/statistics/index.vue

@@ -1,5 +1,14 @@
<template>
    <view class="container">
        <u-navbar height="48" :autoBack="false" safeAreaInsetTop placeholder @leftClick="navToSelectSite()"
            :bgColor="background.top">
            <view slot="left" class="top flex">
                <view class="top-text f-30 fw c-ff">
                    {{ '选择社区' }}
                </view>
                <u-icon name="arrow-right" color="#fff"></u-icon>
            </view>
        </u-navbar>
        <view class="section">
            <caption-row title="社区概况" bgColor="#003399"></caption-row>
            <view class="cell flex j-c-s-b flex-wrap ">
@@ -221,9 +230,14 @@
        },
        data() {
            return {
                siteInfo: uni.getStorageSync("siteInfo"),
                reportData: {},
                houseData: {},
                chartData: {},
                background: {
                    top: "#017BFC",
                    banner: "linear-gradient(180deg, #017BFC 0%, rgba(1, 123, 252, 0) 100%)"
                },
                opts: {
                    fontSize: 10,
                    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
@@ -281,9 +295,6 @@
                    // ],
                    padding: [5, 5, 5, 5],
                    enableScroll: false,
                    // rotate: false,
                    // rotateLock: false,
                    // dataLabel: true,
                    extra: {
                        pie: {
                            centerColor: "#fff",
@@ -296,37 +307,25 @@
                            borderWidth: 3,
                            borderColor: "#FFFFFF"
                        }
                        // ring: {
                        //     ringWidth: 60,
                        //     activeOpacity: 0.5,
                        //     activeRadius: 10,
                        //     offsetAngle: 0,
                        //     labelWidth: 15,
                        //     border: false,
                        //     borderWidth: 3,
                        //     borderColor: "#FFFFFF"
                        // }
                    }
                },
                gridData: {},
                houseLabelData: [],
                sexData: [],
                tabList: [],
                tabbarIndex: 1
                tabbarIndex: 1,
                chilrenList: []
            }
        },

        // onTabItemTap(e) {
        //     // tab 点击时执行，此处直接接收单击事件
        //     console.log(e)
        //     this.refreshData();
        // },
        onShow() {
            this.chilrenList = uni.getStorageSync("chilrenList") ? uni.getStorageSync("chilrenList") : []
            if (this.chilrenList && this.chilrenList.length == 0) {
                this.chilrenList.push(this.siteInfo.id)
                uni.setStorageSync("chilrenList", this.chilrenList)
            }
            let {
                roleName
            } = uni.getStorageSync("activeRole");



            if (roleName == "网格员") {
                this.tabList = getTabbarList(3);
@@ -338,13 +337,11 @@
                // this.tabbarIndex = 1;
                this.tabbarIndex = 2;
            }

            if (roleName == "系统管理员") {
                this.tabList = getTabbarList(4);
                // this.tabbarIndex = 1;
                this.tabbarIndex = 2;
            }

            this.refreshData();
        },

@@ -356,9 +353,12 @@
            }, 300)
        },



        methods: {
            navToSelectSite() {
                uni.navigateTo({
                    url: '/pages/home/selectSiteTwo'
                })
            },
            changeTabbar(e) {
                console.log("==>", e)
                // this.refreshData();
@@ -370,6 +370,7 @@
                this.getHouseLabelData();
                this.getReportData();
                this.getGridData();
                // this.getGridListData();
            },
            getRoleType() {
                let roleName = uni.getStorageSync("activeRole").roleName;
@@ -389,13 +390,10 @@
                } else {
                    return num
                }

            },


            getHouseHoldData() {
                statisticsModal.getHouseholdStatistics({
                    code: this.siteInfo.id,
                    code: this.chilrenList.join(","),
                    roleType: this.getRoleType()
                }).then(res => {
                    // this.houseHoldData = res.data;
@@ -407,7 +405,10 @@
            },

            getHouseLabelData() {
                statisticsModal.getHouseLabelStatistic().then(res => {
                statisticsModal.getHouseLabelStatistic({
                    code: this.chilrenList.join(","),
                    roleType: this.getRoleType()
                }).then(res => {
                    let data = res.data;
                    this.houseLabelData = data;
                    this.setHouseLabelData(data)
@@ -461,7 +462,7 @@
            //获取社区概况数据
            getHouseData() {
                statisticsModal.getHouseStatistics({
                    code: this.siteInfo.id,
                    code: this.chilrenList.join(","),
                    roleType: this.getRoleType()
                }).then(res => {
                    this.houseData = res.data;
@@ -471,7 +472,7 @@
            //获取社区事件数据
            getReportData() {
                statisticsModal.getReportStatistics({
                    code: this.siteInfo.id,
                    code: this.chilrenList.join(","),
                    roleType: this.getRoleType()
                }).then(res => {
                    console.log(res);
@@ -482,13 +483,13 @@
            //获取网格物业人员
            getGridData() {
                statisticsModal.getGridStatistics({
                    code: this.siteInfo.id,
                    code: this.chilrenList.join(","),
                    roleType: this.getRoleType()
                }).then(res => {
                    console.log(res);
                    this.gridData = res.data;
                })
            }
            },
        }
    }
</script>

 static/icon/house_cz.png

 static/icon/house_xz.png

 static/icon/house_zz.png

 static/padding.css

@@ -1,59 +1,63 @@
.around-p-10 {
  padding: 0 10rpx;
    padding: 0 10rpx;
}

.around-p-20 {
  padding: 0 20rpx;
    padding: 0 20rpx;
}

.up-down-0-10  {
  padding: 10rpx 0;
.up-down-0-10 {
    padding: 10rpx 0;
}

.up-down-0-20  {
  padding: 20rpx 0;
.up-down-0-20 {
    padding: 20rpx 0;
}

.p-all-10 {
  padding: 10rpx;
    padding: 10rpx;
}

.p-all-16 {
  padding: 16rpx;
    padding: 16rpx;
}

.p-all-20 {
  padding: 20rpx;
    padding: 20rpx;
}

.pt-0 {
  padding-top: 0rpx;
    padding-top: 0rpx;
}

.pt-10 {
  padding-top: 10rpx;
    padding-top: 10rpx;
}

.pt-16 {
  padding-top: 16rpx;
    padding-top: 16rpx;
}

.pt-20 {
  padding-top: 20rpx;
    padding-top: 20rpx;
}

.pl-1 {
  padding-left: 1rpx;
    padding-left: 1rpx;
}

.pr-1 {
  padding-right: 1rpx;
    padding-right: 1rpx;
}

.pb-20 {
  padding-bottom: 20rpx;
    padding-bottom: 20rpx;
}

.pb-40 {
  padding-bottom: 40rpx;
    padding-bottom: 40rpx;
}

.pb-80 {
    padding-bottom: 100rpx;
}

 subPackage/house/family/index.vue

@@ -84,8 +84,18 @@
                                                <!-- <view v-show="scItem.residentialStatus">

                                                    <view class="resident-box">主</view>

                                                </view> -->

                                                <image v-show="!!scItem.roleType == 1" class="box-icon"

                                                    src="/static/icon/selected.png" mode="aspectFill"></image>



                                                <image v-show="scItem.houseColor == 'yellow'" class="box-icon"

                                                    src="/static/icon/house_cz.png" mode="aspectFill"></image>



                                                <image v-show="scItem.houseColor == 'blue'" class="box-icon"

                                                    src="/static/icon/house_zz.png" mode="aspectFill"></image>



                                                <image v-show="scItem.houseColor == 'green'" class="box-icon"

                                                    src="/static/icon/house_xz.png" mode="aspectFill"></image>



                                                <image v-show="!scItem.houseColor" class="box-icon"

                                                    src="/static/icon/house_xz.png" mode="aspectFill"></image>

                                                <!-- <view v-show="!!scItem.roleType == 1">

                                                    <u-icon name="/static/icon/selected.png" size="16"></u-icon>

                                                </view> -->

@@ -388,7 +398,7 @@
                    .floor-box {

                        // color: #017BFC;

                        color: #333;

                        // font-weight: 700;	
                        // font-weight: 700;

                    }

                }



@@ -466,8 +476,8 @@
                        }



                        .box-icon {

                            width: 32rpx;

                            height: 32rpx;

                            width: 38rpx;

                            height: 38rpx;

                        }

                    }