jczz_app.git - Gitblit

parent: c76030fc | patch | commit | ignore whitespace

zhongrj

2023-10-27 fa16a781acac9ab0a76fced4f2aab94a722a9856

home和user页面

5 files modified

4 files added

	components/tabBar/tabBar.vue	21 ●●●●● patch \| view \| raw \| blame \| history
	manifest.json	3 ●●●●● patch \| view \| raw \| blame \| history
	pages.json	10 ●●●●● patch \| view \| raw \| blame \| history
	pages/home/index - 副本.vue	1294 ●●●●● patch \| view \| raw \| blame \| history
	pages/home/index.vue	1518 ●●●●● patch \| view \| raw \| blame \| history
	pages/user/center - 副本.vue	527 ●●●●● patch \| view \| raw \| blame \| history
	pages/user/center.vue	562 ●●●●● patch \| view \| raw \| blame \| history
	subPackage/user/components/roleList.vue	51 ●●●●● patch \| view \| raw \| blame \| history
	subPackage/user/role/index.vue	88 ●●●●● patch \| view \| raw \| blame \| history

 components/tabBar/tabBar.vue

@@ -2,7 +2,7 @@
    <view>
        <u-tabbar class="custom-tabbar" zIndex="100" :value="currentTab" :fixed="true" :active-color="activeColor"
            :inactive-color="inactiveColor" @change='change'>
            <u-tabbar-item v-for="(item,index) in tabList" :key="index" :text="item.name"
            <u-tabbar-item v-for="(item,index) in curTabList" :key="index" :text="item.name"
                :badge="item.badge>0?item.badge:0">
                <image class="u-page_item_slot_icon" slot="active-icon" :src="item.iconPathSelected" />
                <image class="u-page_item_slot_icon" slot="inactive-icon" :src="item.iconPath" />
@@ -28,7 +28,22 @@
                inactiveColor: '#909399',
                activeColor: '#328CFA',
                //10分钟
                getMessageTime: 1000 * 60 * 10
                getMessageTime: 1000 * 60 * 10,
				
                curTabList: [
                    {
                        name: '首页',
                        iconPathSelected: '',
                        iconPath: '',
                        url: '/pages/home/index'
                    },
                    {
                        name: '个人中心',
                        iconPathSelected: '',
                        iconPath: '',
                        url: '/pages/user/center'
                    }
                ]
            }
        },
        watch: {
@@ -59,7 +74,7 @@
        methods: {
            change(e) {
                this.$store.commit("SET_TABBAT_INDEX", e)
                this.$emit("change", e)
                this.$emit("change", this.curTabList[e].url)
                let params = {
                    recipient: this.userInfo.user_id,
                    status: 0

 manifest.json

@@ -207,7 +207,8 @@
                    }
                }
            },
            "port" : ""
            "port" : "",
            "https" : false
        },
        "uniStatistics" : {
            "enable" : false

 pages.json

@@ -334,6 +334,14 @@
                        "navigationBarTitleText": "消息详情",
                        "enablePullDownRefresh": false
                    }
                },
                //消息详情
                {
                    "path": "role/index",
                    "style": {
                        "navigationBarTitleText": "切换角色",
                        "enablePullDownRefresh": false
                    }
                }
            ]
        },
@@ -375,7 +383,7 @@
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#fff",
        "backgroundColor": "#F7F7F7"
        "backgroundColor": "#4586FE"
    },
    "tabBar": {
        "custom": true,

 pages/home/index - 副本.vue

New file
@@ -0,0 +1,1294 @@
<template>
    <view class="container">

        <view class="head">
            <view class="top-nav-bar">
                <u-navbar bgColor="#5887f9" :autoBack="false" safeAreaInsetTop>
                    <view slot="left">
                        <u--text color="#ffffff" text="基层智治" size="18" />
                    </view>
                </u-navbar>
            </view>

			
        </view>
        <view class="main">
			
        </view>

        <tabBar @change='change' :currentTab="0-0" :tabList="tabList"></tabBar>
    </view>
</template>

<script>
    import tabBar from "@/components/tabBar/tabBar.vue";
    import card from "@/components/my-components/card.vue";
    import echart from "@/components/echart/echart.vue";
    import regionSelect from "@/components/my-components/regionSelect";
    import projectStatistic from "@/components/my-components/projectStatistic.vue";
    import {
        dateFormat
    } from "@/utils/date"
    import {
        dayEightOverLimit,
        dayEightOverLimitDetail,
        reservoirMonitorNumRegion,
        getSKResInfoZRainApi
    } from "@/api/dataCenter/reservoir/reservoir";
    import {
        regionList
    } from "@/api/dataCenter/region/region.js"
    import {
        rainCodition24
    } from "@/api/dataCenter/rainWaterCondition/rainWaterCondition";
    import {
        responsibilityImplementation
    } from "@/api/dataCenter/responsiblePerson/responsiblePerson";
    import shareMixin from "@/mixin/shareMixin";
    import {
        getMessageList
    } from "@/api/system/message";
    export default {
        mixins: [shareMixin],
        components: {
            tabBar,
            card,
            echart,
            regionSelect,
            projectStatistic,
        },
        data() {
            return {
                noticeList: "暂无预警信息",
                tabList: uni.getStorageSync("tabBarList") || [],
                timeValue: Number(new Date()),
                ssxqVale: Number(new Date()),
                searchKey: "",
                imgList: {
                    //图标
                    rbgl: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rbgl.png",
                    ssxq: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/ssxq.png",
                    _24Rain: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/24rain.png",
                    responsible: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/responsible.png",
                    importantPart: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/importantPart.png",
                    //icon
                    iconDownGrey: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/downGrey.png",
                    iconDownBlue: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/downBlue.png"
                },
                serviceList: [{
                        name: "实时监测",
                        img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/realtimeMonitor.png",
                        url: "/subPackage/realtimeMonitor/realtimeMonitor/index"
                    },
                    {
                        name: "雨水情监测",
                        img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/waterCondition.png",
                        url: "/subPackage/rainWaterCondition/rainWaterCondition"
                    },
                    // {
                    //     name: "大坝安全监测",
                    //     img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rainCondition.png",
                    //     url: "/subPackage/dbSafety/index"
                    // },
                    {
                        name: "渗流监测",
                        img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rainCondition.png",
                        url: "/subPackage/dbSafety/slList"
                    },
                    // {
                    //     name: "变形监测",
                    //     img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rainCondition.png",
                    //     url: "/subPackage/dbSafety/bxList"
                    // },
                ],
                ssxqList: [],
                reservoirDataStatistic: [{
                        label: "水库",
                        value: 0
                    },
                    {
                        label: "已监测",
                        value: 0
                    },
                    {
                        label: "超汛限",
                        value: 0
                    },
                ],
                rainfallOption: {},
                statisticsOption: {},
                zyhjList: [{
                        label: "监测预警",
                        value: "99.95",
                        url: "/pages/importantPart/monitorWarning"
                    },
                    {
                        label: "调度方案",
                        value: "9.7",
                        url: "/pages/importantPart/schedulingScheme"
                    },
                    {
                        label: "应急预案",
                        value: "7.21",
                        url: "/pages/importantPart/emergencyPlan"
                    }
                ],
                skOption: {},
                responsibleStatistic: [{
                        name: "行政责任人",
                        value: "0"
                    },
                    {
                        name: "主管责任人",
                        value: "0"
                    },
                    {
                        name: "技术责任人",
                        value: "0"
                    },
                    {
                        name: "管理责任人",
                        value: "0"
                    }
                ],

                btnActive: 0,
                btnCustomStyle: {
                    backgroundColor: '#f7f7f7',
                    color: '#4593F2'
                },
                qycxOption: {},
                cxfdOption: {},

                //实时汛情相关
                xqRegion: "",
                xqRegionCode: "",
                xqRegionPopUpVisible: false,
                xqTime: "",
                xqTimeVisible: false,

                qycxData: {
                    xName: [],
                    yBarValue: [],
                    yLineValue: [],
                },
                cxfdData: {
                    xName: [],
                    yBarValue: []
                },

                rainCodition24Data: {
                    xBarValue: [],
                },
                adBase: uni.getStorageSync("adCodeBase")
            }
        },
        onLaunch() {
            uni.hideTabBar()
        },
        onLoad() {
            uni.hideTabBar()
            // #ifdef MP-WEIXIN
            this.userIsLogin()
            // #endif
        },
        onShow() {
            this.tabList = uni.getStorageSync("tabBarList")
            this.tabBarIndex = uni.getStorageSync("tabbarIndex")
            this.init()
            this.getMessage()
        },
        methods: {

            getMessage() {
                let params = {
                    recipient: uni.getStorageSync("userInfo").user_id,
                    isPage: 0,
                    createTime: dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss")
                }

                getMessageList(params).then(res => {
                    let data = res.data

                    if (data.length > 0) {
                        this.noticeList = ""
                        data.forEach(e => {
                            this.noticeList = this.noticeList + e.content
                        })
                    }
                })
            },
            navigatorMessage() {
                let url = "/subPackage/user/message/index"
                this.$u.func.globalNavigator(url, "navTo")
            },


            userIsLogin() {
                if (this.userInfo.access_token) {} else {
                    uni.showModal({
                        title: "提示",
                        content: "请登录",
                        showCancel: false,
                        success: res => {
                            if (res.confirm) {
                                this.$u.func.globalNavigator("/pages/login/index", "redTo")
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    })
                }
            },
            change(index) {
                let url = index
                this.$u.func.globalNavigator(url, "switchTab")
            },
            init() {
                let selectTime = new Date()
                let formatTime = dateFormat(selectTime).split(" ")[0]
                this.rbTime = formatTime
                this.xqTime = formatTime
                if (!this.adBase) return
                this.getQycxData(this.adBase)
                this.getCxfdData(this.adBase)
                this.getRainCodition24()
                this.getSsxqStatistic(this.adBase)

                if (this.adBase && this.adBase.adGrad < 3) {
                    this.getZrlsStatistics(1, 0)
                    this.getZrlsStatistics(2, 1)
                    this.getZrlsStatistics(4, 2)
                    this.getZrlsStatistics(3, 3)
                }
            },
            /**
             * 获取实时汛情统计数据
             */
            getSsxqStatistic(adBase) {
                //区 
                let param = {
                    ad_cd: adBase.adCode
                }
                regionList(param).then(res => {
                    let data = res.resultList[0]
                    this.reservoirDataStatistic[0].value = 0
                    this.reservoirDataStatistic[0].value += data.cnt
                })

                //已监测
                reservoirMonitorNumRegion().then(res => {
                    let data = res.resultList
                    let filterArr = data.filter(e => e.ad_guid == adBase.adCode)
                    this.reservoirDataStatistic[1].value = filterArr[0].num
                })

                let params = {
                    is_over: 1,
                    last_sta: 1
                }
                if (adBase.adGrad == 2) {
                    params.city_cd = adBase.adCode
                } else if (adBase.adGrad == 3) {
                    params.county_cd = adBase.adCode
                } else if (adBase.adGrad == 4) {
                    params.town_cd = adBase.adCode
                }
                //获取超汛数量
                getSKResInfoZRainApi(params).then(res => {
                    let data = res.data[0]
                    if (data.over_flse_cnt) {
                        this.reservoirDataStatistic[2].value = data.over_flse_cnt
                    }
                })
            },

            //获取区域超汛分布数据
            getQycxData(region) {
                if (!region) return
                this.xqRegion = region
                let params = {
                    city_cd: "",
                    county_cd: "",
                    dt: this.xqTime
                }
                if (region.adGrad != 1) {
                    //市  返回区
                    if (region.adGrad == 2) {
                        params.city_cd = region.adCode
                    } else if (region.adGrad == 3) {
                        //区返回 镇级
                        params.county_cd = region.adCode
                        params.city_cd = region.pAdCode
                    } else if (region.adGrad == 4) {
                        //镇返回平级
                        let prefix = region.adCode.substring(0, 4)
                        if (prefix == "4290") {
                            params.city_cd = region.pAdCode
                            // params.town_cd = region.adCode
                        } else {
                            params.county_cd = region.pAdCode
                            params.city_cd = prefix + "00000000"
                        }
                    }
                }


                dayEightOverLimit(params).then(res => {

                    let data = res.data
                    //武汉市放第一位
                    if (data.some(e => e.c_name == "武汉市")) {
                        data.forEach((item, index) => {
                            if (item.c_name == "武汉市") {
                                data.splice(index, 1)
                                data.unshift(item)
                            }
                        })
                    }

                    this.qycxData = {
                        xName: [],
                        yBarValue: [],
                        yLineValue: [],
                    }
                    if (data) {
                        data.forEach(e => {
                            if (e.c_name != null) {
                                this.qycxData.xName.push(e.c_name)
                                this.qycxData.yBarValue.push(e.total)
                                this.qycxData.yLineValue.push(e.scale)
                            }
                        })
                    }
                    this.initQycxOption(this.qycxData)
                })
            },
            // 获取超汛幅度分布数据
            getCxfdData(region) {
                if (!region) return

                let param = {
                    dt: this.xqTime,
                    city_cd: "",
                    county_cd: "",
                    town_cd: ""
                }
                //市
                if (region && region.adGrad == 2) {
                    param.city_cd = region.adCode
                }
                //区
                if (region && region.adGrad == 3) {
                    param.county_cd = region.adCode
                    param.city_cd = region.pAdCode
                }
                //乡镇
                if (region && region.adGrad == 4) {

                    let prefix = region.adCode.substring(0, 4)
                    if (prefix == "4290") {
                        param.city_cd = region.pAdCode
                        param.town_cd = region.adCode
                    } else {
                        param.city_cd = prefix + "00000000"
                        param.county_cd = region.pAdCode
                        param.town_cd = region.adCode
                    }
                }
                dayEightOverLimitDetail(param).then(res => {
                    let data = res.data
                    //初始化data
                    this.cxfdData = {
                        xName: [],
                        yBarValue: []
                    }

                    if (data) {
                        const list = data.sort((a, b) => a.over_z - b.over_z)
                        list.forEach(e => {
                            if (e.over_z > 0) {
                                this.cxfdData.xName.push(e.over_z)
                                this.cxfdData.yBarValue.push(e.cnt)
                            }
                        })
                    }
                    this.initCxfdOption(this.cxfdData)
                })
            },
            /**
             * 获取24小时雨情数据
             */
            getRainCodition24() {
                let region = this.adBase
                let params = {}
                if (region.adGrad == 1) {

                } else if (region.adGrad == 2) {
                    params.city_cd = region.adCode
                } else if (region.adGrad == 3) {
                    params.county_cd = region.adCode
                } else if (region.adGrad == 4) {
                    return
                } else {
                    return
                }

                rainCodition24(params).then(res => {
                    let data = res.data[0]
                    this.rainCodition24Data = {
                        xBarValue: [],
                    }
                    if (data) {
                        this.rainCodition24Data.xBarValue = [
                            data.cur_0110_cnt,
                            data.cur_1025_cnt,
                            data.cur_2550_cnt,
                            data.cur_50100_cnt,
                            data.cur_100250_cnt,
                            data.cur_250_cnt
                        ]
                    }

                    this.initRainfallOption(this.rainCodition24Data)
                })
            },
            //加载24小时雨情Echart
            initRainfallOption(data) {
                this.rainfallOption = {
                    color: ['#1890FF'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                            label: {
                                backgroundColor: '#505765'
                            }
                        }
                    },
                    xAxis: {
                        type: 'value',
                        name: "水库数量",
                    },
                    yAxis: {
                        name: "mm",
                        type: 'category',
                        data: ["0.1-10", "10-25", "25-50", "50-100", "100-250", ">=250"],
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                    series: [{
                        data: data.xBarValue,
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            color: '#000000'
                        }
                    }, ],
                    grid: {
                        top: '15%',
                        left: '15%',
                        bottom: '8%',
                        right: '18%'
                    },
                }
            },
            //加载区域超汛Echart
            initQycxOption(data) {
                this.qycxOption = {
                    color: ['#1890FF', '#F7DE71'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false,
                            label: {
                                backgroundColor: '#505765'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: data.xName,
                        axisLabel: {
                            color: "#999999",
                            interval: 0,
                            rotate: 40
                        },
                        axisLine: {
                            lineStyle: {
                                width: 1,
                                color: '#DBDBDB'
                            },
                        },
                        axisTick: {
                            alignWithLabel: true,
                            show: false
                        }
                    },
                    yAxis: [{
                            name: "数量(座)",
                            type: 'value'
                        },
                        {
                            name: "超汛比例(%)",
                            type: 'value',
                        }
                    ],
                    series: [{
                            name: "数量",
                            data: data.yBarValue,
                            type: 'bar',
                            barWidth: "10",
                            yAxisIndex: 0,
                        },
                        {
                            name: "比例",
                            yAxisIndex: 1,
                            data: data.yLineValue,
                            type: 'line',
                            itemStyle: {
                                color: "rgba(255, 170, 0, 1.0)"
                            },
                        }
                    ],
                    grid: {
                        top: '10%',
                        left: '2%',
                        bottom: '5%',
                        right: '3%',
                        containLabel: true
                    },
                }
            },
            //加载超汛幅度分布
            initCxfdOption(data) {
                this.cxfdOption = {
                    color: ['#1890FF'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '20%',
                        bottom: '16%',
                        top: '12%',
                        containLabel: true
                    },
                    dataZoom: [{
                        show: true,
                        realtime: true,
                        start: 15,
                        end: 45
                    }],
                    xAxis: [{
                        type: 'category',
                        name: "幅度（m）",
                        data: data.xName,
                        axisLabel: {
                            color: "#999999",
                        },
                        axisLine: {
                            lineStyle: {
                                width: 1,
                                color: '#999999'
                            },
                        },
                        axisTick: {
                            alignWithLabel: true,
                            show: false
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        name: "数量（座）",
                        nameTextStyle: {
                            color: "#999999",
                            padding: [11, 20, 0, 0],
                            nameLocation: "start",
                        },
                        axisLabel: {
                            color: "#999999",
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            },
                            show: true
                        },
                        axisTick: {
                            alignWithLabel: true,
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                    }],
                    series: [{
                        name: '数量',
                        type: 'bar',
                        smooth: true,
                        data: data.yBarValue
                    }]
                }

            },

            // 跳转到搜索页
            goSearchPage() {
                this.$u.func.globalNavigator("/subPackage/realtimeMonitor/search/index")
            },
            //服务跳转
            navigatorService(item) {
                this.$u.func.globalNavigator(item.url, "navTo", item.name)
            },

            // 跳转到统计页
            navigatorPage() {
                let url = "/subPackage/realtimeMonitor/reservoir/floodSituationStatistics"
                this.$u.func.globalNavigator(url, "navTo")
            },

            closeRbRegionPopup() {
                this.rbRegionPopUpVisible = false
            },

            //时间显示格式化
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },



            //区域超汛按钮点击事件
            qycx(index) {
                this.btnActive = index
                this.getQycxData(this.xqRegion)
            },
            //超汛幅度分布
            cxfd(index) {
                this.btnActive = index
                this.getCxfdData(this.xqRegion)
            },


            //汛情时间选择确认
            xqTimeConfirm(data) {
                let selectTime = new Date(data.value)
                let formatTime = dateFormat(selectTime).split(" ")[0]
                this.xqTime = formatTime
                this.xqTimeVisible = false
                if (this.btnActive == 0) {
                    this.getQycxData(this.xqRegion)
                } else {
                    this.getCxfdData(this.xqRegion)
                }
            },


            //实时汛情区域选择
            sSxqRegionChange(region) {
                this.xqRegion = region
                if (this.btnActive == 0) {
                    this.getQycxData(this.xqRegion)
                } else {
                    this.getCxfdData(this.xqRegion)
                }
            },
            //责任落实
            getZrlsStatistics(type, column) {
                let param = {
                    p_ad_code: this.adBase.adCode,
                    type: type
                }
                responsibilityImplementation(param).then(res => {
                    let data = res.resultList[0]
                    this.responsibleStatistic[column].value = (((data.cn_total - data.tol_cn_wsb) / data
                        .cn_total) * 100).toFixed(2)
                })
            },



        }
    }
</script>

<style lang="scss" scoped>
    .container {
        min-height: 100vh;
        overflow: hidden;
        background-color: #f9f9fa;


        /* 自定义状态栏 */
        .status_bar {
            height: var(--status-bar-height);
            width: 100%;
        }
    }

    .icon {
        font-size: 0;
    }

    .main {
        // padding: 20rpx;
        position: relative;
        top: -44rpx;
    }

    .top-nav-bar {
        height: 81rpx;
    }

    .search {
        height: 200rpx;
        display: flex;
        background-color: #5887f9;
        padding: 30rpx;
    }


    .service-box {
        background: #ffffff;
        border-radius: 12rpx 12rpx 0 0;
        width: 100%;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;


        .service-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 120rpx;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #585b61;
            margin: 20rpx 0;

            .img {
                width: 70rpx;
                height: auto;
            }

            .name {
                display: flex;
                justify-content: space-around;
                align-items: center;
                // width: 104rpx;
                height: 26rpx;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 28rpx;
            }
        }
    }

    .card-head {
        display: flex;
        justify-content: space-between;
        padding: 12rpx;

        .left {
            display: flex;
            align-items: center;

            .img-icon {
                width: 32rpx;
                height: 40rpx;
            }

            .text {
                font-family: PingFang-SC-Bold;
                font-weight: Bold;
                color: #333333;
                font-size: 40rpx;
                margin-left: 20rpx;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .region {
                display: flex;
                flex-wrap: wrap;
                align-content: space-around;
                align-items: center;

                .text {
                    width: 110rpx;
                    height: 24rpx;
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #BBBBBB;
                    line-height: 28rpx;
                    display: flex;
                    justify-content: flex-end;
                }

                .img-icon {
                    width: 20rpx;
                    height: 14rpx;
                    -moz-transform: rotate(-90deg);
                    -webkit-transform: rotate(-90deg);
                }
            }

            .time {
                margin-left: 20rpx;
                display: flex;
                flex-wrap: wrap;
                align-content: space-around;
                align-items: center;

                .text {
                    width: 158rpx;
                    height: 20rpx;
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #BBBBBB;
                    line-height: 28rpx;
                }

                .img-icon {
                    width: 20rpx;
                    height: 14rpx;
                }
            }


            .text {
                color: #4593F2;
                font-family: PingFang-SC-Bold;
                font-size: 30rpx;
                width: 60rpx;
            }

            .img-icon {
                width: 20rpx;
                height: 14rpx;
            }
        }

    }

    .condition {
        margin-bottom: 40rpx;

        .region {
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            align-items: center;

            .text {
                width: 158rpx;
                height: 24rpx;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #BBBBBB;
                line-height: 28rpx;
                display: flex;
                justify-content: flex-end;
            }

            .img-icon {
                width: 16rpx;
                height: 10rpx;
            }
        }

        .time {
            margin-left: 20rpx;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            align-items: center;

            .text {
                width: 158rpx;
                height: 20rpx;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #BBBBBB;
                line-height: 28rpx;
            }

            .img-icon {
                width: 20rpx;
                height: 14rpx;
            }
        }
    }

    .card-content {
        // background-color: #f2f8ff;
        border-radius: 20rpx;

        .btn-group {
            display: flex;
            padding: 20rpx;

            .btn-active {
                background-color: #f7f7f7;
                color: #4593F2;
            }
        }
    }

    .data {
        height: auto;
        background-color: #f2f8ff;
        margin: 0 20rpx;
        border-radius: 10rpx;
    }

    .value {
        display: flex;
        justify-content: space-between;
    }

    .top {
        display: flex;

        .left {
            width: 30%;
        }
    }

    .card-content-zrls {
        display: flex;
        justify-content: space-around;

        .item {
            width: 154rpx;
            height: 132rpx;
            background: #FFFFFF;
            box-shadow: 0px 0px 4rpx 2rpx rgba(69, 147, 242, 0.22);
            border-radius: 6px;


            .top {
                color: #ffffff;
                font-size: 22rpx;

                .text {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                }
            }

            .first {
                width: 154rpx;
                height: 46rpx;
                background: linear-gradient(0deg, #7162FF 0%, #A495FF 100%);
                border-radius: 6rpx;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .text {
                    width: 132rpx;
                    height: 22rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28rpx;
                }
            }

            .second {
                width: 154rpx;
                height: 46rpx;
                background: linear-gradient(0deg, #FA6448 0%, #FB836A 100%);
                border-radius: 6rpx;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .text {
                    width: 132rpx;
                    height: 22rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28rpx;
                }
            }


            .third {
                width: 154rpx;
                height: 46rpx;
                background: linear-gradient(0deg, #3715F6 0%, #907DFB 100%);
                border-radius: 6rpx;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .text {
                    width: 132rpx;
                    height: 22rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28rpx;
                }
            }

            .fourth {
                width: 154rpx;
                height: 46rpx;
                background: linear-gradient(0deg, #FE9C47 0%, #FFC799 100%);
                border-radius: 6rpx;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .text {
                    width: 132px;
                    height: 22rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28rpx;
                }
            }

            .bottom {
                font-size: 34rpx;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                align-items: center;

                .text-fixed {
                    .text {
                        width: 58rpx;
                        height: 20rpx;
                        font-size: 20rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        line-height: 28rpx;
                    }
                }

                .value {
                    .text {
                        width: 98rpx;
                        height: 18rpx;
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #333333;
                        line-height: 28rpx;
                        display: flex;
                        justify-content: space-around;
                    }
                }
            }
        }

    }

    .card-content-zyhj {
        display: flex;
        justify-content: space-around;

        .service-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .text-fixed {
            position: absolute;
            top: 8rpx;
            right: 76rpx;
            width: 18rpx;
            height: 16rpx;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 28rpx;
        }

        .value {
            .text {
                height: 24rpx;
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 28rpx;
            }
        }

        .first {
            display: flex;
            align-items: center;
            justify-content: space-around;


            width: 116rpx;
            height: 116rpx;
            background: #FE9D49;
            border-radius: 50%;


            .bar1 {
                width: 26rpx;
                height: 30rpx;
                background: linear-gradient(0deg, #FE9C48 0%, #FFFFFF 100%);
                border-radius: 4rpx;
            }

            .bar2 {
                width: 26rpx;
                height: 30rpx;
                background: linear-gradient(0deg, #FE9C48 0%, #FFFFFF 100%);
                border-radius: 4rpx;
            }

            .bar3 {
                width: 26rpx;
                height: 30rpx;
                background: linear-gradient(0deg, #FE9C48 0%, #FFFFFF 100%);
                border-radius: 4rpx;
            }
        }

        .second {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 116rpx;
            height: 116rpx;
            background: #2586EB;
            border-radius: 50%;
        }

        .third {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 116rpx;
            height: 116rpx;
            background: #17BDB3;
            border-radius: 50%;
        }


    }

    .rbgl {
        font-size: 30rpx;

        .card-head {
            .right {
                display: flex;

                .region {
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-around;
                }

                .time {
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-around;
                }
            }

        }

        .card-content-rbgl {
            display: flex;
            flex-direction: column;
            align-items: center;

            .rb-content {
                width: 622rpx;
                // height: 106rpx;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 40rpx;
            }

            .more {
                color: #69b0ff;
                display: flex;
                align-items: center;
                justify-content: space-around;
            }
        }
    }

    .rb-title {
        display: flex;
        justify-content: center;
        margin: 20rpx;
    }

    .rb-detail {
        font-size: 28rpx;
        padding: 30rpx;
    }

    .condition {
        font-size: 30rpx;
        display: flex;
        justify-content: flex-end;

        .region {
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        .time {
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }
    }
</style>

 pages/home/index.vue

@@ -1,1479 +1,141 @@
<template>
    <view class="container">

        <view class="head">
            <view class="top-nav-bar">

                <u-navbar bgColor="#5887f9" :autoBack="false" safeAreaInsetTop>
                    <view slot="left">
                        <u--text color="#ffffff" text="荆楚水库" size="18" />
                    </view>
                </u-navbar>
        <u-navbar  height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
            <view slot="left">
                <u--text color="#ffffff" text="基层智治" size="18" />
            </view>

            <view class="search">
                <u-search shape="square" bgColor="#ffffff" @focus="goSearchPage" placeholder="搜索水库" :showAction="false"
                    v-model="searchKey">
                </u-search>
            </view>
        </view>
        </u-navbar>
		
        <view class="main">
            <!--导航-->
            <view class="service-box">
                <u-grid col="4" :border="false">
                    <u-grid-item v-for="(item,index) in serviceList" :key="index">
                        <view @click="navigatorService(item)" class="service-item">
                            <image :src="item.img" mode="widthFix" class="img"></image>
                            <view class="name">{{ item.name }}</view>
                        </view>
                    </u-grid-item>
                </u-grid>
            <view class="main-bg">
				
            </view>
            <!--预警消息-->
            <view class="notice">
                <u-notice-bar direction="row" :text="noticeList" @click="navigatorMessage"></u-notice-bar>
			
            <view class="main-select">
                <u-icon name="map" color="#fff"></u-icon>
                <view>
                    当前场所：暂无绑定场所信息
                </view>
            </view>

            <!--实时汛情-->
            <view class="card-view">
                <card>
                    <view class="card-head" slot="insideHead">
                        <view class="left">
                            <view>
                                <image class="img-icon" :src="imgList.ssxq"></image>
                            </view>
                            <view>
                                <text class="text">实时汛情</text>
                            </view>
                        </view>

                        <view class="right" @click="navigatorPage">
                            <view class="text">
                                <text>统计</text>
                            </view>
                        </view>
                    </view>
                    <view class="card-content" slot="content">
                        <view class="statistic">
                            <projectStatistic useBgImg="0" :gridList="reservoirDataStatistic">
                            </projectStatistic>
                        </view>
                        <view class="btn-group">
                            <!--小程序不支持直接写class-->
                            <u-button :customStyle="btnActive==0?btnCustomStyle:''" size="small" type="normal"
                                text="区域超汛分布" @click="qycx(0)">
                            </u-button>
                            <u-button :customStyle="btnActive==1?btnCustomStyle:''" size="small" type="normal"
                                text="超汛幅度分布" @click="cxfd(1)">
                            </u-button>
                        </view>

                        <view class="condition">
                            <view class=" region">
                                <view class="text">
                                    <regionSelect @regionChange="sSxqRegionChange" ref="rbRegion">
                                    </regionSelect>
                                </view>
                                <view class="icon">
                                    <image class="img-icon" :src="imgList.iconDownGrey"></image>
                                </view>
                            </view>
                            <view class="time" @click="xqTimeVisible = true">
                                <view class="text">
                                    <text>{{xqTime}}</text>
                                </view>
                                <view class="icon">
                                    <image class="img-icon" :src="imgList.iconDownGrey"></image>
                                </view>
                            </view>

                        </view>

                        <view class="ssxq-echart">
                            <echart v-if="btnActive == 0" height="450rpx" initId="qycx" :option="qycxOption"></echart>
                            <echart v-if="btnActive == 1" height="450rpx" initId="cxfd" :option="cxfdOption"></echart>
                        </view>
                    </view>
                </card>
			
            <view class="main-btn">
				
            </view>

            <!--今日雨量-->
            <view class="twentyFour-rainfall">
                <card>
                    <view class="card-head" slot="insideHead">
                        <view class="left">
                            <view>
                                <image class="img-icon" :src="imgList._24Rain"></image>
                            </view>
                            <view class="text">
                                <text>今日雨量</text>
                            </view>
                        </view>

                    </view>
                    <view slot="content">
                        <echart initId="rainfall" :option="rainfallOption"></echart>
                    </view>
                </card>
			
            <view class="main-phone">
                <view></view>
                <view></view>
                <view></view>
            </view>

            <!--责任落实-->
            <view v-if="adBase.adGrad<3" class="card-view">
                <card>
                    <view class="card-head" slot="insideHead">
                        <view class="left">
                            <view>
                                <image mode="widthFix" class="img-icon" :src="imgList.responsible"></image>
                            </view>
                            <view class="text">
                                <text>责任落实</text>
                            </view>
                        </view>
                    </view>
                    <view class="card-content-zrls" slot="content">
                        <view class="item">
                            <view class="top first">
                                <text class="text">{{responsibleStatistic[0].name}}</text>
                            </view>
                            <view class="bottom">
                                <view class="text-fixed">
                                    <text class="text">落实率</text>
                                </view>
                                <view class="value">
                                    <text class="text">{{responsibleStatistic[0].value}}%</text>
                                </view>
                            </view>
                        </view>

                        <view class="item">
                            <view class="top second" style="background-color: #fa6444;">
                                <text class="text">{{responsibleStatistic[1].name}}</text>
                            </view>
                            <view class="bottom">
                                <view class="text-fixed">
                                    <text class="text">落实率</text>
                                </view>
                                <view class="value">
                                    <text class="text">{{responsibleStatistic[1].value}}%</text>
                                </view>
                            </view>
                        </view>

                        <view class="item">
                            <view class="top third" style="background-color: #3d1de4;">
                                <text class="text">{{responsibleStatistic[2].name}}</text>
                            </view>
                            <view class="bottom">
                                <view class="text-fixed">
                                    <text class="text">落实率</text>
                                </view>
                                <view class="value">
                                    <text class="text">{{responsibleStatistic[2].value}}%</text>
                                </view>
                            </view>
                        </view>

                        <view class="item">
                            <view class="top fourth" style="background-color: #fc9d48;">
                                <text class="text">{{responsibleStatistic[3].name}}</text>
                            </view>
                            <view class="bottom">
                                <view class="text-fixed">
                                    <text class="text">落实率</text>
                                </view>
                                <view class="value">
                                    <text class="text">{{responsibleStatistic[3].value}}%</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </card>
			
            <view class="main-bt">
                <view class="main-live">
					
                </view>
				
                <view class="main-taska">
					
                </view>
            </view>

        </view>

        <!--实时汛情日期选择-->
        <u-datetime-picker :formatter="formatter" :show="xqTimeVisible" mode="date" @confirm="xqTimeConfirm"
            @cancel="xqTimeVisible = false" v-model="ssxqVale">
        </u-datetime-picker>




        <tabBar @change='change' :currentTab="0-0" :tabList="tabList"></tabBar>

    </view>
</template>

<script>
    import tabBar from "@/components/tabBar/tabBar.vue";
    import card from "@/components/my-components/card.vue";
    import echart from "@/components/echart/echart.vue";
    import regionSelect from "@/components/my-components/regionSelect";
    import projectStatistic from "@/components/my-components/projectStatistic.vue";
    import {
        dateFormat
    } from "@/utils/date"
    import {
        dayEightOverLimit,
        dayEightOverLimitDetail,
        reservoirMonitorNumRegion,
        getSKResInfoZRainApi
    } from "@/api/dataCenter/reservoir/reservoir";
    import {
        regionList
    } from "@/api/dataCenter/region/region.js"
    import {
        rainCodition24
    } from "@/api/dataCenter/rainWaterCondition/rainWaterCondition";
    import {
        responsibilityImplementation
    } from "@/api/dataCenter/responsiblePerson/responsiblePerson";
    import shareMixin from "@/mixin/shareMixin";
    import {
        getMessageList
    } from "@/api/system/message";

    export default {
        mixins: [shareMixin],
        components: {
            tabBar,
            card,
            echart,
            regionSelect,
            projectStatistic,
        },

        data() {
            return {
                noticeList: "暂无预警信息",
                tabList: uni.getStorageSync("tabBarList") || [],
                timeValue: Number(new Date()),
                ssxqVale: Number(new Date()),
                searchKey: "",
                imgList: {
                    //图标
                    rbgl: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rbgl.png",
                    ssxq: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/ssxq.png",
                    _24Rain: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/24rain.png",
                    responsible: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/responsible.png",
                    importantPart: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/importantPart.png",
                    //icon
                    iconDownGrey: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/downGrey.png",
                    iconDownBlue: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/downBlue.png"
                },
                serviceList: [{
                        name: "实时监测",
                        img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/realtimeMonitor.png",
                        url: "/subPackage/realtimeMonitor/realtimeMonitor/index"
                    },
                    {
                        name: "雨水情监测",
                        img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/waterCondition.png",
                        url: "/subPackage/rainWaterCondition/rainWaterCondition"
                    },
                    // {
                    //     name: "大坝安全监测",
                    //     img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rainCondition.png",
                    //     url: "/subPackage/dbSafety/index"
                    // },
                    {
                        name: "渗流监测",
                        img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rainCondition.png",
                        url: "/subPackage/dbSafety/slList"
                    },
                    // {
                    //     name: "变形监测",
                    //     img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rainCondition.png",
                    //     url: "/subPackage/dbSafety/bxList"
                    // },
                ],
                ssxqList: [],
                reservoirDataStatistic: [{
                        label: "水库",
                        value: 0
                    },
                    {
                        label: "已监测",
                        value: 0
                    },
                    {
                        label: "超汛限",
                        value: 0
                    },
                ],
                rainfallOption: {},
                statisticsOption: {},
                zyhjList: [{
                        label: "监测预警",
                        value: "99.95",
                        url: "/pages/importantPart/monitorWarning"
                    },
                    {
                        label: "调度方案",
                        value: "9.7",
                        url: "/pages/importantPart/schedulingScheme"
                    },
                    {
                        label: "应急预案",
                        value: "7.21",
                        url: "/pages/importantPart/emergencyPlan"
                    }
                ],
                skOption: {},
                responsibleStatistic: [{
                        name: "行政责任人",
                        value: "0"
                    },
                    {
                        name: "主管责任人",
                        value: "0"
                    },
                    {
                        name: "技术责任人",
                        value: "0"
                    },
                    {
                        name: "管理责任人",
                        value: "0"
                    }
                ],

                btnActive: 0,
                btnCustomStyle: {
                    backgroundColor: '#f7f7f7',
                    color: '#4593F2'
                },
                qycxOption: {},
                cxfdOption: {},

                //实时汛情相关
                xqRegion: "",
                xqRegionCode: "",
                xqRegionPopUpVisible: false,
                xqTime: "",
                xqTimeVisible: false,

                qycxData: {
                    xName: [],
                    yBarValue: [],
                    yLineValue: [],
                },
                cxfdData: {
                    xName: [],
                    yBarValue: []
                },

                rainCodition24Data: {
                    xBarValue: [],
                },
                adBase: uni.getStorageSync("adCodeBase")
            }
        },
        onLaunch() {
            uni.hideTabBar()
        },
        onLoad() {
            uni.hideTabBar()
            // #ifdef MP-WEIXIN
            this.userIsLogin()
            // #endif
        },
        onShow() {
            this.tabList = uni.getStorageSync("tabBarList")
            this.tabBarIndex = uni.getStorageSync("tabbarIndex")
            this.init()
            this.getMessage()
        },

        methods: {

            getMessage() {
                let params = {
                    recipient: uni.getStorageSync("userInfo").user_id,
                    isPage: 0,
                    createTime: dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss")
                }

                getMessageList(params).then(res => {
                    let data = res.data

                    if (data.length > 0) {
                        this.noticeList = ""
                        data.forEach(e => {
                            this.noticeList = this.noticeList + e.content
                        })
                    }
                })
            },
            navigatorMessage() {
                let url = "/subPackage/user/message/index"
                this.$u.func.globalNavigator(url, "navTo")
            },


            userIsLogin() {
                if (this.userInfo.access_token) {} else {
                    uni.showModal({
                        title: "提示",
                        content: "请登录",
                        showCancel: false,
                        success: res => {
                            if (res.confirm) {
                                this.$u.func.globalNavigator("/pages/login/index", "redTo")
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    })
                }
            },
            change(index) {
                let url = this.tabList[index].path
                let url = index
                this.$u.func.globalNavigator(url, "switchTab")
            },
            init() {
                let selectTime = new Date()
                let formatTime = dateFormat(selectTime).split(" ")[0]
                this.rbTime = formatTime
                this.xqTime = formatTime
                if (!this.adBase) return
                this.getQycxData(this.adBase)
                this.getCxfdData(this.adBase)
                this.getRainCodition24()
                this.getSsxqStatistic(this.adBase)

                if (this.adBase && this.adBase.adGrad < 3) {
                    this.getZrlsStatistics(1, 0)
                    this.getZrlsStatistics(2, 1)
                    this.getZrlsStatistics(4, 2)
                    this.getZrlsStatistics(3, 3)
                }
            },
            /**
             * 获取实时汛情统计数据
             */
            getSsxqStatistic(adBase) {
                //区 
                let param = {
                    ad_cd: adBase.adCode
                }
                regionList(param).then(res => {
                    let data = res.resultList[0]
                    this.reservoirDataStatistic[0].value = 0
                    this.reservoirDataStatistic[0].value += data.cnt
                })

                //已监测
                reservoirMonitorNumRegion().then(res => {
                    let data = res.resultList
                    let filterArr = data.filter(e => e.ad_guid == adBase.adCode)
                    this.reservoirDataStatistic[1].value = filterArr[0].num
                })

                let params = {
                    is_over: 1,
                    last_sta: 1
                }
                if (adBase.adGrad == 2) {
                    params.city_cd = adBase.adCode
                } else if (adBase.adGrad == 3) {
                    params.county_cd = adBase.adCode
                } else if (adBase.adGrad == 4) {
                    params.town_cd = adBase.adCode
                }
                //获取超汛数量
                getSKResInfoZRainApi(params).then(res => {
                    let data = res.data[0]
                    if (data.over_flse_cnt) {
                        this.reservoirDataStatistic[2].value = data.over_flse_cnt
                    }
                })
            },

            //获取区域超汛分布数据
            getQycxData(region) {
                if (!region) return
                this.xqRegion = region
                let params = {
                    city_cd: "",
                    county_cd: "",
                    dt: this.xqTime
                }
                if (region.adGrad != 1) {
                    //市  返回区
                    if (region.adGrad == 2) {
                        params.city_cd = region.adCode
                    } else if (region.adGrad == 3) {
                        //区返回 镇级
                        params.county_cd = region.adCode
                        params.city_cd = region.pAdCode
                    } else if (region.adGrad == 4) {
                        //镇返回平级
                        let prefix = region.adCode.substring(0, 4)
                        if (prefix == "4290") {
                            params.city_cd = region.pAdCode
                            // params.town_cd = region.adCode
                        } else {
                            params.county_cd = region.pAdCode
                            params.city_cd = prefix + "00000000"
                        }
                    }
                }


                dayEightOverLimit(params).then(res => {

                    let data = res.data
                    //武汉市放第一位
                    if (data.some(e => e.c_name == "武汉市")) {
                        data.forEach((item, index) => {
                            if (item.c_name == "武汉市") {
                                data.splice(index, 1)
                                data.unshift(item)
                            }
                        })
                    }

                    this.qycxData = {
                        xName: [],
                        yBarValue: [],
                        yLineValue: [],
                    }
                    if (data) {
                        data.forEach(e => {
                            if (e.c_name != null) {
                                this.qycxData.xName.push(e.c_name)
                                this.qycxData.yBarValue.push(e.total)
                                this.qycxData.yLineValue.push(e.scale)
                            }
                        })
                    }
                    this.initQycxOption(this.qycxData)
                })
            },
            // 获取超汛幅度分布数据
            getCxfdData(region) {
                if (!region) return

                let param = {
                    dt: this.xqTime,
                    city_cd: "",
                    county_cd: "",
                    town_cd: ""
                }
                //市
                if (region && region.adGrad == 2) {
                    param.city_cd = region.adCode
                }
                //区
                if (region && region.adGrad == 3) {
                    param.county_cd = region.adCode
                    param.city_cd = region.pAdCode
                }
                //乡镇
                if (region && region.adGrad == 4) {

                    let prefix = region.adCode.substring(0, 4)
                    if (prefix == "4290") {
                        param.city_cd = region.pAdCode
                        param.town_cd = region.adCode
                    } else {
                        param.city_cd = prefix + "00000000"
                        param.county_cd = region.pAdCode
                        param.town_cd = region.adCode
                    }
                }
                dayEightOverLimitDetail(param).then(res => {
                    let data = res.data
                    //初始化data
                    this.cxfdData = {
                        xName: [],
                        yBarValue: []
                    }

                    if (data) {
                        const list = data.sort((a, b) => a.over_z - b.over_z)
                        list.forEach(e => {
                            if (e.over_z > 0) {
                                this.cxfdData.xName.push(e.over_z)
                                this.cxfdData.yBarValue.push(e.cnt)
                            }
                        })
                    }
                    this.initCxfdOption(this.cxfdData)
                })
            },
            /**
             * 获取24小时雨情数据
             */
            getRainCodition24() {
                let region = this.adBase
                let params = {}
                if (region.adGrad == 1) {

                } else if (region.adGrad == 2) {
                    params.city_cd = region.adCode
                } else if (region.adGrad == 3) {
                    params.county_cd = region.adCode
                } else if (region.adGrad == 4) {
                    return
                } else {
                    return
                }

                rainCodition24(params).then(res => {
                    let data = res.data[0]
                    this.rainCodition24Data = {
                        xBarValue: [],
                    }
                    if (data) {
                        this.rainCodition24Data.xBarValue = [
                            data.cur_0110_cnt,
                            data.cur_1025_cnt,
                            data.cur_2550_cnt,
                            data.cur_50100_cnt,
                            data.cur_100250_cnt,
                            data.cur_250_cnt
                        ]
                    }

                    this.initRainfallOption(this.rainCodition24Data)
                })
            },
            //加载24小时雨情Echart
            initRainfallOption(data) {
                this.rainfallOption = {
                    color: ['#1890FF'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                            label: {
                                backgroundColor: '#505765'
                            }
                        }
                    },
                    xAxis: {
                        type: 'value',
                        name: "水库数量",
                    },
                    yAxis: {
                        name: "mm",
                        type: 'category',
                        data: ["0.1-10", "10-25", "25-50", "50-100", "100-250", ">=250"],
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                    series: [{
                        data: data.xBarValue,
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            color: '#000000'
                        }
                    }, ],
                    grid: {
                        top: '15%',
                        left: '15%',
                        bottom: '8%',
                        right: '18%'
                    },
                }
            },
            //加载区域超汛Echart
            initQycxOption(data) {
                this.qycxOption = {
                    color: ['#1890FF', '#F7DE71'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false,
                            label: {
                                backgroundColor: '#505765'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: data.xName,
                        axisLabel: {
                            color: "#999999",
                            interval: 0,
                            rotate: 40
                        },
                        axisLine: {
                            lineStyle: {
                                width: 1,
                                color: '#DBDBDB'
                            },
                        },
                        axisTick: {
                            alignWithLabel: true,
                            show: false
                        }
                    },
                    yAxis: [{
                            name: "数量(座)",
                            type: 'value'
                        },
                        {
                            name: "超汛比例(%)",
                            type: 'value',
                        }
                    ],
                    series: [{
                            name: "数量",
                            data: data.yBarValue,
                            type: 'bar',
                            barWidth: "10",
                            yAxisIndex: 0,
                        },
                        {
                            name: "比例",
                            yAxisIndex: 1,
                            data: data.yLineValue,
                            type: 'line',
                            itemStyle: {
                                color: "rgba(255, 170, 0, 1.0)"
                            },
                        }
                    ],
                    grid: {
                        top: '10%',
                        left: '2%',
                        bottom: '5%',
                        right: '3%',
                        containLabel: true
                    },
                }
            },
            //加载超汛幅度分布
            initCxfdOption(data) {
                this.cxfdOption = {
                    color: ['#1890FF'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '20%',
                        bottom: '16%',
                        top: '12%',
                        containLabel: true
                    },
                    dataZoom: [{
                        show: true,
                        realtime: true,
                        start: 15,
                        end: 45
                    }],
                    xAxis: [{
                        type: 'category',
                        name: "幅度（m）",
                        data: data.xName,
                        axisLabel: {
                            color: "#999999",
                        },
                        axisLine: {
                            lineStyle: {
                                width: 1,
                                color: '#999999'
                            },
                        },
                        axisTick: {
                            alignWithLabel: true,
                            show: false
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        name: "数量（座）",
                        nameTextStyle: {
                            color: "#999999",
                            padding: [11, 20, 0, 0],
                            nameLocation: "start",
                        },
                        axisLabel: {
                            color: "#999999",
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            },
                            show: true
                        },
                        axisTick: {
                            alignWithLabel: true,
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                    }],
                    series: [{
                        name: '数量',
                        type: 'bar',
                        smooth: true,
                        data: data.yBarValue
                    }]
                }

            },

            // 跳转到搜索页
            goSearchPage() {
                this.$u.func.globalNavigator("/subPackage/realtimeMonitor/search/index")
            },
            //服务跳转
            navigatorService(item) {
                this.$u.func.globalNavigator(item.url, "navTo", item.name)
            },

            // 跳转到统计页
            navigatorPage() {
                let url = "/subPackage/realtimeMonitor/reservoir/floodSituationStatistics"
                this.$u.func.globalNavigator(url, "navTo")
            },

            closeRbRegionPopup() {
                this.rbRegionPopUpVisible = false
            },

            //时间显示格式化
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },



            //区域超汛按钮点击事件
            qycx(index) {
                this.btnActive = index
                this.getQycxData(this.xqRegion)
            },
            //超汛幅度分布
            cxfd(index) {
                this.btnActive = index
                this.getCxfdData(this.xqRegion)
            },


            //汛情时间选择确认
            xqTimeConfirm(data) {
                let selectTime = new Date(data.value)
                let formatTime = dateFormat(selectTime).split(" ")[0]
                this.xqTime = formatTime
                this.xqTimeVisible = false
                if (this.btnActive == 0) {
                    this.getQycxData(this.xqRegion)
                } else {
                    this.getCxfdData(this.xqRegion)
                }
            },


            //实时汛情区域选择
            sSxqRegionChange(region) {
                this.xqRegion = region
                if (this.btnActive == 0) {
                    this.getQycxData(this.xqRegion)
                } else {
                    this.getCxfdData(this.xqRegion)
                }
            },
            //责任落实
            getZrlsStatistics(type, column) {
                let param = {
                    p_ad_code: this.adBase.adCode,
                    type: type
                }
                responsibilityImplementation(param).then(res => {
                    let data = res.resultList[0]
                    this.responsibleStatistic[column].value = (((data.cn_total - data.tol_cn_wsb) / data
                        .cn_total) * 100).toFixed(2)
                })
            },



        }
    }
</script>

<style lang="scss" scoped>
    .container {
        min-height: 100vh;
        overflow: hidden;
        background-color: #f9f9fa;


        /* 自定义状态栏 */
        .status_bar {
            height: var(--status-bar-height);
            width: 100%;
        }
    }

    .icon {
        font-size: 0;
    }

    .main {
        // padding: 20rpx;
        position: relative;
        top: -44rpx;
    }

    .top-nav-bar {
        height: 81rpx;
    }

    .search {
        height: 200rpx;
        display: flex;
        background-color: #5887f9;
        padding: 30rpx;
    }


    .service-box {
        background: #ffffff;
        border-radius: 12rpx 12rpx 0 0;
        width: 100%;
        height: 200rpx;
        height: 100%;
		
        display: flex;
        flex-direction: column;
        justify-content: space-around;


        .service-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 120rpx;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #585b61;
            margin: 20rpx 0;

            .img {
                width: 70rpx;
                height: auto;
        background: #F9F9FA;
        color: #fff;
		
        .main {
            position: relative;
            height: 0;
            flex: 1;
            overflow-y: auto;
			
            .main-bg {
                height: 36%;
                background: royalblue;
            }

            .name {
                display: flex;
                justify-content: space-around;
                align-items: center;
                // width: 104rpx;
                height: 26rpx;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 28rpx;
            }
        }
    }

    .card-head {
        display: flex;
        justify-content: space-between;
        padding: 12rpx;

        .left {
            display: flex;
            align-items: center;

            .img-icon {
                width: 32rpx;
                height: 40rpx;
            }

            .text {
                font-family: PingFang-SC-Bold;
                font-weight: Bold;
                color: #333333;
                font-size: 40rpx;
                margin-left: 20rpx;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .region {
                display: flex;
                flex-wrap: wrap;
                align-content: space-around;
                align-items: center;

                .text {
                    width: 110rpx;
                    height: 24rpx;
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #BBBBBB;
                    line-height: 28rpx;
                    display: flex;
                    justify-content: flex-end;
                }

                .img-icon {
                    width: 20rpx;
                    height: 14rpx;
                    -moz-transform: rotate(-90deg);
                    -webkit-transform: rotate(-90deg);
                }
            }

            .time {
                margin-left: 20rpx;
                display: flex;
                flex-wrap: wrap;
                align-content: space-around;
                align-items: center;

                .text {
                    width: 158rpx;
                    height: 20rpx;
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #BBBBBB;
                    line-height: 28rpx;
                }

                .img-icon {
                    width: 20rpx;
                    height: 14rpx;
                }
            }


            .text {
                color: #4593F2;
                font-family: PingFang-SC-Bold;
                font-size: 30rpx;
                width: 60rpx;
            }

            .img-icon {
                width: 20rpx;
                height: 14rpx;
            }
        }

    }

    .condition {
        margin-bottom: 40rpx;

        .region {
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            align-items: center;

            .text {
                width: 158rpx;
                height: 24rpx;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #BBBBBB;
                line-height: 28rpx;
                display: flex;
                justify-content: flex-end;
            }

            .img-icon {
                width: 16rpx;
                height: 10rpx;
            }
        }

        .time {
            margin-left: 20rpx;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            align-items: center;

            .text {
                width: 158rpx;
                height: 20rpx;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #BBBBBB;
                line-height: 28rpx;
            }

            .img-icon {
                width: 20rpx;
                height: 14rpx;
            }
        }
    }

    .card-content {
        // background-color: #f2f8ff;
        border-radius: 20rpx;

        .btn-group {
            display: flex;
            padding: 20rpx;

            .btn-active {
                background-color: #f7f7f7;
                color: #4593F2;
            }
        }
    }

    .data {
        height: auto;
        background-color: #f2f8ff;
        margin: 0 20rpx;
        border-radius: 10rpx;
    }

    .value {
        display: flex;
        justify-content: space-between;
    }

    .top {
        display: flex;

        .left {
            width: 30%;
        }
    }

    .card-content-zrls {
        display: flex;
        justify-content: space-around;

        .item {
            width: 154rpx;
            height: 132rpx;
            background: #FFFFFF;
            box-shadow: 0px 0px 4rpx 2rpx rgba(69, 147, 242, 0.22);
            border-radius: 6px;


            .top {
                color: #ffffff;
                font-size: 22rpx;

                .text {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                }
            }

            .first {
                width: 154rpx;
                height: 46rpx;
                background: linear-gradient(0deg, #7162FF 0%, #A495FF 100%);
                border-radius: 6rpx;
			
            .main-select {
                margin: 0 6%;
                position: absolute;
                bottom: 74%;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .text {
                    width: 132rpx;
                    height: 22rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28rpx;
                }
            }

            .second {
                width: 154rpx;
                height: 46rpx;
                background: linear-gradient(0deg, #FA6448 0%, #FB836A 100%);
                border-radius: 6rpx;
			
            .main-btn {
                margin: 0 6%;
                position: absolute;
                top: 28%;
                width: 88%;
                height: 18%;
                background: #fff;
                border-radius: 10rpx;
            }
			
            .main-phone {
                display: flex;
                align-items: center;
                justify-content: space-around;

                .text {
                    width: 132rpx;
                    height: 22rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28rpx;
                position: absolute;
                top: 52%;
                width: 100%;
                height: 12%;
				
                view {
                    margin: 0 16rpx;
                    flex: 1;
                    background: linear-gradient( to right, #407BE9, #73A2F9);
                    border-radius: 10rpx;
                }
            }


            .third {
                width: 154rpx;
                height: 46rpx;
                background: linear-gradient(0deg, #3715F6 0%, #907DFB 100%);
                border-radius: 6rpx;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .text {
                    width: 132rpx;
                    height: 22rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28rpx;
			
            .main-bt {
                position: absolute;
                top: 66%;
                width: 100%;
				
                .main-live {
                    height: 180rpx;
                    background: #fff;
                }
				
                .main-taska {
                    margin-top: 16rpx;
                    height: 240rpx;
                    background: #fff;
                }
            }

            .fourth {
                width: 154rpx;
                height: 46rpx;
                background: linear-gradient(0deg, #FE9C47 0%, #FFC799 100%);
                border-radius: 6rpx;
                display: flex;
                align-items: center;
                justify-content: space-around;

                .text {
                    width: 132px;
                    height: 22rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 28rpx;
                }
            }

            .bottom {
                font-size: 34rpx;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                align-items: center;

                .text-fixed {
                    .text {
                        width: 58rpx;
                        height: 20rpx;
                        font-size: 20rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        line-height: 28rpx;
                    }
                }

                .value {
                    .text {
                        width: 98rpx;
                        height: 18rpx;
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #333333;
                        line-height: 28rpx;
                        display: flex;
                        justify-content: space-around;
                    }
                }
            }
        }

    }

    .card-content-zyhj {
        display: flex;
        justify-content: space-around;

        .service-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .text-fixed {
            position: absolute;
            top: 8rpx;
            right: 76rpx;
            width: 18rpx;
            height: 16rpx;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 28rpx;
        }

        .value {
            .text {
                height: 24rpx;
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 28rpx;
            }
        }

        .first {
            display: flex;
            align-items: center;
            justify-content: space-around;


            width: 116rpx;
            height: 116rpx;
            background: #FE9D49;
            border-radius: 50%;


            .bar1 {
                width: 26rpx;
                height: 30rpx;
                background: linear-gradient(0deg, #FE9C48 0%, #FFFFFF 100%);
                border-radius: 4rpx;
            }

            .bar2 {
                width: 26rpx;
                height: 30rpx;
                background: linear-gradient(0deg, #FE9C48 0%, #FFFFFF 100%);
                border-radius: 4rpx;
            }

            .bar3 {
                width: 26rpx;
                height: 30rpx;
                background: linear-gradient(0deg, #FE9C48 0%, #FFFFFF 100%);
                border-radius: 4rpx;
            }
        }

        .second {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 116rpx;
            height: 116rpx;
            background: #2586EB;
            border-radius: 50%;
        }

        .third {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 116rpx;
            height: 116rpx;
            background: #17BDB3;
            border-radius: 50%;
        }


    }

    .rbgl {
        font-size: 30rpx;

        .card-head {
            .right {
                display: flex;

                .region {
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-around;
                }

                .time {
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-around;
                }
            }

        }

        .card-content-rbgl {
            display: flex;
            flex-direction: column;
            align-items: center;

            .rb-content {
                width: 622rpx;
                // height: 106rpx;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 40rpx;
            }

            .more {
                color: #69b0ff;
                display: flex;
                align-items: center;
                justify-content: space-around;
            }
        }
    }

    .rb-title {
        display: flex;
        justify-content: center;
        margin: 20rpx;
    }

    .rb-detail {
        font-size: 28rpx;
        padding: 30rpx;
    }

    .condition {
        font-size: 30rpx;
        display: flex;
        justify-content: flex-end;

        .region {
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        .time {
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }
    }
</style>

 pages/user/center - 副本.vue

New file
@@ -0,0 +1,527 @@
<template>
    <view class="container">
        <!-- 占位 -->
        <view style="height: 88rpx; background-color: rgb(13 129 238);"></view>
        <view class="head">
            <!-- 用户信息 -->
            <view class="user-box">
                <view class="top">
                    <view class="left">
                        <image :src="userInfo.avatar?userInfo.avatar:'https://sk.hubeishuiyi.cn/business/img/water.png'"
                            class="avatar" mode=""></image>
                    </view>
                    <view class="right">
                        <view class="user-detail">
                            <u--text size="20" color="#ffffff" :text="userInfo.real_name"></u--text>
                        </view>
                    </view>
                </view>
            </view>
            <view style="padding: 40rpx 30rpx 30rpx 30rpx;color: #fff;font-size: 28rpx;">
                <text v-if="roleDescription.length>0">{{roleDescription[0].description}}</text>
                <text v-if="!showMoreDesc && roleDescription.length>1" @click="showMoreDesc = true">更多</text>
                <view v-if="showMoreDesc">
                    <view v-for="(item,index) in roleDescription" :key="item.roleName">
                        <text @click="showMoreDesc = false" v-if="item.index>0">{{item.description}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 功能列表 -->

        <view class="cell-box">
            <cardList :cardList="systemList">
                <u-badge max="99" :value="messageCount"></u-badge>
            </cardList>
        </view>

        <view v-if="showHistoryList" class="cell-box">
            <cardList :title="`历史记录`" :cardList="historyList"></cardList>
        </view>

        <view class="cell-box">
            <u-cell icon="account" title="角色切换">
                <view slot="title">
                    <view class="flex">
                        <view class="">角色</view>
                        <view style="width: 316rpx;display: flex;justify-content: flex-end">{{roleName}}</view>
                    </view>
                </view>
            </u-cell>
            <!-- #ifdef  APP-PLUS -->
            <u-cell icon="error-circle">
                <template slot="title">
                    <navigator url="../../subPackage/user/privacyPolicy" hover-class="navigator-hover">
                        隐私政策
                    </navigator>
                </template>

                <image slot="icon" class="icon"
                    :src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/privacy.png`"></image>
            </u-cell>

            <u-cell icon="setting" :title="`系统版本${verson}`">
                <image slot="icon" class="icon"
                    :src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/version.png`"></image>
            </u-cell>

            <u-cell icon="error" :title="`注销帐号`" @click="delAccount">
                <image slot="icon" class="icon"
                    :src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/delAccount.png`"></image>
            </u-cell>
            <!-- #endif -->

        </view>


        <view style="padding: 22rpx 0px 40rpx 0;">
            <u-button type="error" text="退出当前账号" @click="logOut"></u-button>
        </view>
        <tabBar @changeTabList="changeTabList" @change="change" :currentTab="tabList.length-1" :tabList="tabList">
        </tabBar>
    </view>
</template>

<script>
    import cardList from "@/components/my-components/cardList.vue"
    import store from "@/store/index.js"
    import tabBar from "@/components/tabBar/tabBar.vue"
    import {
        getTextByName
    } from "./util"
    import {
        dynamicMenu,
        getAll,
    } from "@/api/system/role.js"
    import shareMixin from "@/mixin/shareMixin";
    import {
        messageCount
    } from "@/api/system/message";
    import {
        clearCId,
        delAccount,
    } from "../../api/system/user";
    export default {
        mixins: [shareMixin],
        components: {
            tabBar,
            cardList
        },
        data() {
            return {
                systemList: [{
                        title: "消息",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/message.png",
                        url: "/subPackage/user/message/index",
                        badge: true,
                    },
                    {
                        title: "修改密码",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/updatePassword.png",
                        url: "/subPackage/user/password",
                    },
                    {
                        title: "通讯录",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/addressList.png",
                        url: "/subPackage/user/addressList",
                    },
                    {
                        title: "投诉建议",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/feedback.png",
                        url: "/subPackage/user/feedback",
                    },
                ],

                historyList: [{
                        title: "报汛",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/reportFlood.png",
                        url: "/subPackage/user/historical/index",
                    },
                    {
                        title: "巡查",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/partolHistory.png",
                        url: "/subPackage/user/history/patrol",
                    },
                    {
                        title: "险情上报",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/dangerReport.png",
                        url: "/subPackage/user/history/danger",
                    },
                    {
                        title: "管护",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/protect.png",
                        url: "/subPackage/user/history/protect",
                    },
                    {
                        title: "调度",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/scheduling.png",
                        url: "/subPackage/user/history/scheduling",
                    },
                ],




                headHeight: 300,
                columns: [],
                roleName: "",
                tabBarIndex: uni.getStorageSync("tabbarIndex"),
                roleIDList: uni.getStorageSync("userInfo").role_id.split(",") || [],
                tabList: uni.getStorageSync("tabBarList"),
                title: "",
                show: false,
                index: uni.getStorageSync("responIndex") || 0,
                verson: "",
                showMoreDesc: false,
                roleDescription: [],
                messageCount: 0,

                showHistoryList: false,
            };
        },
        onReady() {
            const role_name = uni.getStorageSync("userInfo").role_name
            this.roleDescription = getTextByName(role_name)
            this.setHeadHeight()
            uni.hideTabBar()
            //#ifdef  APP-PLUS
            plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
                this.verson = wgtinfo.version
            })
            //#endif

        },
        created() {
            this.getUserRole()
            this.isShowHistory()
        },
        mounted() {},
        methods: {

            //账号注销
            delAccount() {
                uni.showModal({
                    title: "提示",
                    content: "是否注销账号？",
                    success: res => {
                        if (res.confirm) {
                            uni.showModal({
                                content: "确认注销？",
                                success: res => {
                                    if (res.confirm) {
                                        delAccount(this.userInfo.user_id).then(res => {
                                            this.logOut()
                                        })
                                    }
                                }
                            })
                        }
                    }
                })
            },

            isShowHistory() {
                let arr = this.tabList.filter(e => e.name == "工作")
                if (arr.length > 0) {
                    this.showHistoryList = true
                } else {
                    this.showHistoryList = false
                }

            },

            getMessageCount() {
                let params = {
                    recipient: this.userInfo.user_id,
                    status: 0
                }
                messageCount(params).then(res => {
                    this.messageCount = res.data
                    this.$u.func.updateTabbar(res.data)
                    this.tabList = uni.getStorageSync("tabBarList")
                })
            },

            changeTabList() {

            },
            change(index) {
                let url = index
                this.$u.func.globalNavigator(url, "switchTab")
            },
            async bindChange(e) {
                uni.setStorageSync("responIndex", e.detail.value)
                store.commit("setTabBarList", [])
                this.index = e.detail.value
                const obj = {
                    flag: "app",
                    roleId: this.columns[this.index].id
                }
                const res = await dynamicMenu(this.columns[this.index].id, "app")
                if (res.code == 200) {
                    res.data.forEach(val => {
                        val.symbol = Math.floor(Math.random() * 100 + 1)
                    })
                    store.commit("setTabBarList", res.data)
                    store.commit("setActiveRoleId", this.columns[this.index].id)
                    store.commit("SET_TABBAT_INDEX", 0)
                    this.$u.func.globalNavigator(res.data[0].path, "switchTab")
                }
            },

            setHeadHeight() {
                const that = this
                uni.getSystemInfo({
                    success: function(res) {
                        that.headHeight = Number(res.statusBarHeight) + Number(res.platform == 'ios' ?
                            44 :
                            48) + 400
                    }
                });
            },
            logOut() {
                //#ifdef  APP-PLUS
                clearCId(this.userInfo.user_id).then(res => {
                    this.index = 0
                    uni.setStorageSync("responIndex", 0)
                    uni.clearStorageSync()
                    uni.reLaunch({
                        url: "/pages/login/index"
                    })
                })
                //#endif

                // #ifdef MP-WEIXIN
                this.index = 0
                uni.setStorageSync("responIndex", 0)
                uni.clearStorageSync()
                uni.reLaunch({
                    url: "/pages/login/index"
                })
                // #endif

                // #ifdef H5
                this.index = 0
                uni.setStorageSync("responIndex", 0)
                uni.clearStorageSync()
                uni.reLaunch({
                    url: "/pages/login/index"
                })
                // #endif
            },
            navigatorMessage() {
                uni.switchTab({
                    url: "/pages/message/index"
                })
            },
            //获取当前角色的所有权限列表
            async getUserRole() {
                const {
                    code,
                    data,
                    msg
                } = await getAll()
                if (code != 200) return
                let roleName = []
                this.roleIDList.forEach(val => {
                    const arr = data.filter(item => item.id == val)
                    const obj = {
                        name: arr[0].roleName,
                        id: arr[0].id
                    }
                    this.columns.push(obj)
                    roleName.push(arr[0].roleName)
                })
                this.roleName = roleName.join(",")
            },
            /**
             * 角色切换
             */
            roleChange() {
                this.show = true
            },
            goNewPage(path) {
                this.$u.func.globalNavigator(path)
            }



        },
        onShow() {
            this.tabList = uni.getStorageSync("tabBarList")
            this.tabBarIndex = uni.getStorageSync("tabbarIndex")
            this.getMessageCount()
        }
    }
</script>

<style scoped lang="scss">
    .container {
        background-color: #f7f7f7;
        min-height: 100vh;
        overflow: hidden;
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .head {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        min-height: 400rpx;
        overflow: hidden;
        background: #0d81ee;

        .set-icon {
            vertical-align: middle;
            width: 41rpx;
            height: auto;
            margin-right: 35rpx;
        }

        .head-bg {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
            width: 750rpx;
            height: 582rpx;
            background: #55A2F9;
        }
    }

    .user-box {
        display: flex;
        justify-content: space-between;
        padding: 0 20rpx 0 64rpx;
        margin-top: 36rpx;

        .top {
            display: flex;

            .left {
                display: flex;
                flex-direction: column;
                align-items: center;

                .avatar {
                    width: 128rpx;
                    height: 128rpx;
                    background: #ffffff;
                    border-radius: 50%;
                }

                .user-deatil {
                    margin-top: 20rpx;
                    margin-left: 50rpx;
                    color: #ffffff;
                    flex-direction: column;
                    justify-content: space-around;
                }

            }

            .right {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 20rpx;
            }
        }

        .bottom {}



        .edit-btn {
            margin-top: 20rpx;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            width: 165rpx;
            height: 54rpx;
            border: 2rpx solid #f5f5f5;
            border-radius: 11rpx;

            font-size: 27rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
        }
    }

    .nav {
        display: flex;
        margin: 36rpx 38rpx 0;
        padding: 36rpx 0 42rpx;

        .text {
            color: #ffffff;
        }

        .nav-item {
            width: calc(100% / 4);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            font-size: 25rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;

            &:not(:last-of-type) {
                position: relative;

                &::after {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    content: '';
                    display: block;
                    width: 2rpx;
                    background-color: #fff;
                    height: 30rpx;
                }
            }

            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-bottom: 6rpx;
            }
        }
    }

    .cell-box {
        background: #ffffff;
        margin: 18rpx;

        .icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 6rpx;
        }
    }

    a {
        text-decoration: none;
    }

    a:link {
        color: #000000;
    }

    a:visited {
        color: #000000;
    }
</style>

 pages/user/center.vue

@@ -1,527 +1,113 @@
<template>
    <view class="container">
        <!-- 占位 -->
        <view style="height: 88rpx; background-color: rgb(13 129 238);"></view>
        <view class="head">
            <!-- 用户信息 -->
            <view class="user-box">
                <view class="top">
                    <view class="left">
                        <image :src="userInfo.avatar?userInfo.avatar:'https://sk.hubeishuiyi.cn/business/img/water.png'"
                            class="avatar" mode=""></image>
                    </view>
                    <view class="right">
                        <view class="user-detail">
                            <u--text size="20" color="#ffffff" :text="userInfo.real_name"></u--text>
                        </view>
                    </view>
        <u-navbar  height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
            <view slot="left">
                <u--text color="#ffffff" text="基层智治" size="18" />
            </view>
        </u-navbar>
		
        <view class="main">
            <view class="main-bg">
				
            </view>
			
			
            <view class="main-cell">
                <view class="cell-content">
                    <u-cell-group :border="false">
                        <u-cell :isLink="true" 
                        v-for="(item, index) in cellGroupData" :icon="item.icon" :title="item.title" 
                        :url="item.url"
                        :key="index"  :border="false"
                        ></u-cell>
                    </u-cell-group>
                </view>
            </view>
            <view style="padding: 40rpx 30rpx 30rpx 30rpx;color: #fff;font-size: 28rpx;">
                <text v-if="roleDescription.length>0">{{roleDescription[0].description}}</text>
                <text v-if="!showMoreDesc && roleDescription.length>1" @click="showMoreDesc = true">更多</text>
                <view v-if="showMoreDesc">
                    <view v-for="(item,index) in roleDescription" :key="item.roleName">
                        <text @click="showMoreDesc = false" v-if="item.index>0">{{item.description}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 功能列表 -->

        <view class="cell-box">
            <cardList :cardList="systemList">
                <u-badge max="99" :value="messageCount"></u-badge>
            </cardList>
			
        </view>

        <view v-if="showHistoryList" class="cell-box">
            <cardList :title="`历史记录`" :cardList="historyList"></cardList>
        </view>

        <view class="cell-box">
            <u-cell icon="account" title="角色切换">
                <view slot="title">
                    <view class="flex">
                        <view class="">角色</view>
                        <view style="width: 316rpx;display: flex;justify-content: flex-end">{{roleName}}</view>
                    </view>
                </view>
            </u-cell>
            <!-- #ifdef  APP-PLUS -->
            <u-cell icon="error-circle">
                <template slot="title">
                    <navigator url="../../subPackage/user/privacyPolicy" hover-class="navigator-hover">
                        隐私政策
                    </navigator>
                </template>

                <image slot="icon" class="icon"
                    :src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/privacy.png`"></image>
            </u-cell>

            <u-cell icon="setting" :title="`系统版本${verson}`">
                <image slot="icon" class="icon"
                    :src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/version.png`"></image>
            </u-cell>

            <u-cell icon="error" :title="`注销帐号`" @click="delAccount">
                <image slot="icon" class="icon"
                    :src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/delAccount.png`"></image>
            </u-cell>
            <!-- #endif -->

        </view>


        <view style="padding: 22rpx 0px 40rpx 0;">
            <u-button type="error" text="退出当前账号" @click="logOut"></u-button>
        </view>
        <tabBar @changeTabList="changeTabList" @change="change" :currentTab="tabList.length-1" :tabList="tabList">
        </tabBar>
        <tabBar @change='change' :currentTab="0-0" :tabList="tabList"></tabBar>
    </view>
</template>

<script>
    import cardList from "@/components/my-components/cardList.vue"
    import store from "@/store/index.js"
    import tabBar from "@/components/tabBar/tabBar.vue"
    import {
        getTextByName
    } from "./util"
    import {
        dynamicMenu,
        getAll,
    } from "@/api/system/role.js"
    import shareMixin from "@/mixin/shareMixin";
    import {
        messageCount
    } from "@/api/system/message";
    import {
        clearCId,
        delAccount,
    } from "../../api/system/user";
    import tabBar from "@/components/tabBar/tabBar.vue";

    export default {
        mixins: [shareMixin],
        components: {
            tabBar,
            cardList
        },

        data() {
            return {
                systemList: [{
                        title: "消息",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/message.png",
                        url: "/subPackage/user/message/index",
                        badge: true,
                tabList: uni.getStorageSync("tabBarList") || [],
                cellGroupData: [
                    {
                        title: '我的家人',
                        icon: 'account-fill',
                        url: ''
                    },
                    {
                        title: "修改密码",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/updatePassword.png",
                        url: "/subPackage/user/password",
                        title: '切换角色',
                        icon: 'account-fill',
                        url: '/subPackage/user/role/index'
                    },
                    {
                        title: "通讯录",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/addressList.png",
                        url: "/subPackage/user/addressList",
                        title: '修改密码',
                        icon: 'account-fill',
                        url: ''
                    },
                    {
                        title: "投诉建议",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/feedback.png",
                        url: "/subPackage/user/feedback",
                    },
                ],

                historyList: [{
                        title: "报汛",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/reportFlood.png",
                        url: "/subPackage/user/historical/index",
                    },
                    {
                        title: "巡查",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/partolHistory.png",
                        url: "/subPackage/user/history/patrol",
                    },
                    {
                        title: "险情上报",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/dangerReport.png",
                        url: "/subPackage/user/history/danger",
                    },
                    {
                        title: "管护",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/protect.png",
                        url: "/subPackage/user/history/protect",
                    },
                    {
                        title: "调度",
                        icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/scheduling.png",
                        url: "/subPackage/user/history/scheduling",
                    },
                ],




                headHeight: 300,
                columns: [],
                roleName: "",
                tabBarIndex: uni.getStorageSync("tabbarIndex"),
                roleIDList: uni.getStorageSync("userInfo").role_id.split(",") || [],
                tabList: uni.getStorageSync("tabBarList"),
                title: "",
                show: false,
                index: uni.getStorageSync("responIndex") || 0,
                verson: "",
                showMoreDesc: false,
                roleDescription: [],
                messageCount: 0,

                showHistoryList: false,
            };
        },
        onReady() {
            const role_name = uni.getStorageSync("userInfo").role_name
            this.roleDescription = getTextByName(role_name)
            this.setHeadHeight()
            uni.hideTabBar()
            //#ifdef  APP-PLUS
            plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
                this.verson = wgtinfo.version
            })
            //#endif

        },
        created() {
            this.getUserRole()
            this.isShowHistory()
        },
        mounted() {},
        methods: {

            //账号注销
            delAccount() {
                uni.showModal({
                    title: "提示",
                    content: "是否注销账号？",
                    success: res => {
                        if (res.confirm) {
                            uni.showModal({
                                content: "确认注销？",
                                success: res => {
                                    if (res.confirm) {
                                        delAccount(this.userInfo.user_id).then(res => {
                                            this.logOut()
                                        })
                                    }
                                }
                            })
                        }
                        title: '退出登录',
                        icon: 'account-fill',
                        url: ''
                    }
                })
            },
                ]
            }
        },

            isShowHistory() {
                let arr = this.tabList.filter(e => e.name == "工作")
                if (arr.length > 0) {
                    this.showHistoryList = true
                } else {
                    this.showHistoryList = false
                }

            },

            getMessageCount() {
                let params = {
                    recipient: this.userInfo.user_id,
                    status: 0
                }
                messageCount(params).then(res => {
                    this.messageCount = res.data
                    this.$u.func.updateTabbar(res.data)
                    this.tabList = uni.getStorageSync("tabBarList")
                })
            },

            changeTabList() {

            },
        methods: {
            change(index) {
                let url = this.tabList[index].path
                let url = index
                this.$u.func.globalNavigator(url, "switchTab")
            },
            async bindChange(e) {
                uni.setStorageSync("responIndex", e.detail.value)
                store.commit("setTabBarList", [])
                this.index = e.detail.value
                const obj = {
                    flag: "app",
                    roleId: this.columns[this.index].id
                }
                const res = await dynamicMenu(this.columns[this.index].id, "app")
                if (res.code == 200) {
                    res.data.forEach(val => {
                        val.symbol = Math.floor(Math.random() * 100 + 1)
                    })
                    store.commit("setTabBarList", res.data)
                    store.commit("setActiveRoleId", this.columns[this.index].id)
                    store.commit("SET_TABBAT_INDEX", 0)
                    this.$u.func.globalNavigator(res.data[0].path, "switchTab")
                }
            },

            setHeadHeight() {
                const that = this
                uni.getSystemInfo({
                    success: function(res) {
                        that.headHeight = Number(res.statusBarHeight) + Number(res.platform == 'ios' ?
                            44 :
                            48) + 400
                    }
                });
            },
            logOut() {
                //#ifdef  APP-PLUS
                clearCId(this.userInfo.user_id).then(res => {
                    this.index = 0
                    uni.setStorageSync("responIndex", 0)
                    uni.clearStorageSync()
                    uni.reLaunch({
                        url: "/pages/login/index"
                    })
                })
                //#endif

                // #ifdef MP-WEIXIN
                this.index = 0
                uni.setStorageSync("responIndex", 0)
                uni.clearStorageSync()
                uni.reLaunch({
                    url: "/pages/login/index"
                })
                // #endif

                // #ifdef H5
                this.index = 0
                uni.setStorageSync("responIndex", 0)
                uni.clearStorageSync()
                uni.reLaunch({
                    url: "/pages/login/index"
                })
                // #endif
            },
            navigatorMessage() {
                uni.switchTab({
                    url: "/pages/message/index"
                })
            },
            //获取当前角色的所有权限列表
            async getUserRole() {
                const {
                    code,
                    data,
                    msg
                } = await getAll()
                if (code != 200) return
                let roleName = []
                this.roleIDList.forEach(val => {
                    const arr = data.filter(item => item.id == val)
                    const obj = {
                        name: arr[0].roleName,
                        id: arr[0].id
                    }
                    this.columns.push(obj)
                    roleName.push(arr[0].roleName)
                })
                this.roleName = roleName.join(",")
            },
            /**
             * 角色切换
             */
            roleChange() {
                this.show = true
            },
            goNewPage(path) {
                this.$u.func.globalNavigator(path)
            }



        },
        onShow() {
            this.tabList = uni.getStorageSync("tabBarList")
            this.tabBarIndex = uni.getStorageSync("tabbarIndex")
            this.getMessageCount()
        }
    }
</script>

<style scoped lang="scss">
<style lang="scss" scoped>
    .container {
        background-color: #f7f7f7;
        min-height: 100vh;
        overflow: hidden;
    }

    .flex {
        width: 100%;
        height: 100%;
		
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .head {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        min-height: 400rpx;
        overflow: hidden;
        background: #0d81ee;

        .set-icon {
            vertical-align: middle;
            width: 41rpx;
            height: auto;
            margin-right: 35rpx;
        }

        .head-bg {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
            width: 750rpx;
            height: 582rpx;
            background: #55A2F9;
        }
    }

    .user-box {
        display: flex;
        justify-content: space-between;
        padding: 0 20rpx 0 64rpx;
        margin-top: 36rpx;

        .top {
            display: flex;

            .left {
                display: flex;
                flex-direction: column;
                align-items: center;

                .avatar {
                    width: 128rpx;
                    height: 128rpx;
                    background: #ffffff;
                    border-radius: 50%;
                }

                .user-deatil {
                    margin-top: 20rpx;
                    margin-left: 50rpx;
                    color: #ffffff;
                    flex-direction: column;
                    justify-content: space-around;
                }

        flex-direction: column;
        background: #F9F9FA;
		
        .main {
            position: relative;
            height: 0;
            flex: 1;
            overflow-y: auto;
			
            .main-bg {
                height: 36%;
                background: royalblue;
            }

            .right {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 20rpx;
            }
        }

        .bottom {}



        .edit-btn {
            margin-top: 20rpx;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;

            width: 165rpx;
            height: 54rpx;
            border: 2rpx solid #f5f5f5;
            border-radius: 11rpx;

            font-size: 27rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
        }
    }

    .nav {
        display: flex;
        margin: 36rpx 38rpx 0;
        padding: 36rpx 0 42rpx;

        .text {
            color: #ffffff;
        }

        .nav-item {
            width: calc(100% / 4);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            font-size: 25rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;

            &:not(:last-of-type) {
                position: relative;

                &::after {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    content: '';
                    display: block;
                    width: 2rpx;
                    background-color: #fff;
                    height: 30rpx;
			
            .main-cell {
                position: absolute;
                top: 34%;
                width: 100%;
                height: 66%;
                border-radius: 10rpx 10rpx 0 0 ;
                z-index: 11;
                background: #fff;
				
                .cell-content {
                    margin-top: 240rpx;
                }
            }

            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-bottom: 6rpx;
            }
        }
    }

    .cell-box {
        background: #ffffff;
        margin: 18rpx;

        .icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 6rpx;
        }
    }

    a {
        text-decoration: none;
    }

    a:link {
        color: #000000;
    }

    a:visited {
        color: #000000;
    }
</style>

 subPackage/user/components/roleList.vue

New file
@@ -0,0 +1,51 @@
<template>
    <view class="role-container">
        <view v-for="(item, index) in roleData">
            <view class="l">
                <u-icon :name="item.iconName"></u-icon>
                <view class="role-name">
                    {{item.roleName}}
                </view>
            </view>
			
            <view class="r">
                <u-icon name="checkmark"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            roleData: {
                type: Array,
                default: () => []
            }
        }
    }
</script>

<style lang="scss" scoped>
    .role-container {
        & > view {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 16rpx;
            padding: 0 16rpx;
            background: #fff;
            height: 80rpx;
			
            .l {
                flex: 1;
                display: flex;
                align-items: center;
				
                .role-name {
                    margin-left: 16rpx;
                }
            }
        }
    }
</style>

 subPackage/user/role/index.vue

New file
@@ -0,0 +1,88 @@
<template>
    <view class="container">
        <view>
            <role-list :roleData="roleData"></role-list>
        </view>
		
        <view class="cur-btn">
            <u-button type="primary" text="确定"></u-button>
        </view>
    </view>
</template>

<script>
    import roleList from "@/subPackage/user/components/roleList.vue"
	
    export default {
        components: {
            roleList
        },
		
        data() {
            return {
                cellGroupData: [
                    {
                        title: '我的家人',
                        icon: 'account-fill',
                        url: ''
                    },
                    {
                        title: '切换角色',
                        icon: 'account-fill',
                        url: ''
                    },
                    {
                        title: '修改密码',
                        icon: 'account-fill',
                        url: ''
                    },
                    {
                        title: '退出登录',
                        icon: 'account-fill',
                        url: ''
                    }
                ],
                roleData: [
                    {
                        roleName: '居民',
                        iconName: 'account-fill'
                    },
                    {
                        roleName: '场所负责人',
                        iconName: 'account-fill'								
                    },
                    {
                        roleName: '网格员',
                        iconName: 'account-fill'
                    },
                    {
                        roleName: '系统管理员',
                        iconName: 'account-fill'
                    },
                ]
            }
        },

        methods: {
			
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #F9F9FA;
		
        .cur-btn {
            margin: 0 20rpx;
            position: absolute;
            bottom: 28rpx;
            width: calc(100% - 40rpx);
        }
    }
</style>

			@@ -2,7 +2,7 @@
			<view>
			<u-tabbar class="custom-tabbar" zIndex="100" :value="currentTab" :fixed="true" :active-color="activeColor"
			:inactive-color="inactiveColor" @change='change'>
			<u-tabbar-item v-for="(item,index) in tabList" :key="index" :text="item.name"
			<u-tabbar-item v-for="(item,index) in curTabList" :key="index" :text="item.name"
			:badge="item.badge>0?item.badge:0">
			<image class="u-page_item_slot_icon" slot="active-icon" :src="item.iconPathSelected" />
			<image class="u-page_item_slot_icon" slot="inactive-icon" :src="item.iconPath" />
			@@ -28,7 +28,22 @@
			inactiveColor: '#909399',
			activeColor: '#328CFA',
			//10分钟
			getMessageTime: 1000 * 60 * 10
			getMessageTime: 1000 * 60 * 10,

			curTabList: [
			{
			name: '首页',
			iconPathSelected: '',
			iconPath: '',
			url: '/pages/home/index'
			},
			{
			name: '个人中心',
			iconPathSelected: '',
			iconPath: '',
			url: '/pages/user/center'
			}
			]
			}
			},
			watch: {
			@@ -59,7 +74,7 @@
			methods: {
			change(e) {
			this.$store.commit("SET_TABBAT_INDEX", e)
			this.$emit("change", e)
			this.$emit("change", this.curTabList[e].url)
			let params = {
			recipient: this.userInfo.user_id,
			status: 0

			@@ -207,7 +207,8 @@
			}
			}
			},
			"port" : ""
			"port" : "",
			"https" : false
			},
			"uniStatistics" : {
			"enable" : false

			@@ -334,6 +334,14 @@
			"navigationBarTitleText": "消息详情",
			"enablePullDownRefresh": false
			}
			},
			//消息详情
			{
			"path": "role/index",
			"style": {
			"navigationBarTitleText": "切换角色",
			"enablePullDownRefresh": false
			}
			}
			]
			},
			@@ -375,7 +383,7 @@
			"navigationBarTextStyle": "black",
			"navigationBarTitleText": "",
			"navigationBarBackgroundColor": "#fff",
			"backgroundColor": "#F7F7F7"
			"backgroundColor": "#4586FE"
			},
			"tabBar": {
			"custom": true,

New file
			@@ -0,0 +1,1294 @@
			<template>
			<view class="container">

			<view class="head">
			<view class="top-nav-bar">
			<u-navbar bgColor="#5887f9" :autoBack="false" safeAreaInsetTop>
			<view slot="left">
			<u--text color="#ffffff" text="基层智治" size="18" />
			</view>
			</u-navbar>
			</view>


			</view>
			<view class="main">

			</view>

			<tabBar @change='change' :currentTab="0-0" :tabList="tabList"></tabBar>
			</view>
			</template>

			<script>
			import tabBar from "@/components/tabBar/tabBar.vue";
			import card from "@/components/my-components/card.vue";
			import echart from "@/components/echart/echart.vue";
			import regionSelect from "@/components/my-components/regionSelect";
			import projectStatistic from "@/components/my-components/projectStatistic.vue";
			import {
			dateFormat
			} from "@/utils/date"
			import {
			dayEightOverLimit,
			dayEightOverLimitDetail,
			reservoirMonitorNumRegion,
			getSKResInfoZRainApi
			} from "@/api/dataCenter/reservoir/reservoir";
			import {
			regionList
			} from "@/api/dataCenter/region/region.js"
			import {
			rainCodition24
			} from "@/api/dataCenter/rainWaterCondition/rainWaterCondition";
			import {
			responsibilityImplementation
			} from "@/api/dataCenter/responsiblePerson/responsiblePerson";
			import shareMixin from "@/mixin/shareMixin";
			import {
			getMessageList
			} from "@/api/system/message";
			export default {
			mixins: [shareMixin],
			components: {
			tabBar,
			card,
			echart,
			regionSelect,
			projectStatistic,
			},
			data() {
			return {
			noticeList: "暂无预警信息",
			tabList: uni.getStorageSync("tabBarList") \|\| [],
			timeValue: Number(new Date()),
			ssxqVale: Number(new Date()),
			searchKey: "",
			imgList: {
			//图标
			rbgl: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rbgl.png",
			ssxq: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/ssxq.png",
			_24Rain: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/24rain.png",
			responsible: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/responsible.png",
			importantPart: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/importantPart.png",
			//icon
			iconDownGrey: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/downGrey.png",
			iconDownBlue: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/downBlue.png"
			},
			serviceList: [{
			name: "实时监测",
			img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/realtimeMonitor.png",
			url: "/subPackage/realtimeMonitor/realtimeMonitor/index"
			},
			{
			name: "雨水情监测",
			img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/waterCondition.png",
			url: "/subPackage/rainWaterCondition/rainWaterCondition"
			},
			// {
			// name: "大坝安全监测",
			// img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rainCondition.png",
			// url: "/subPackage/dbSafety/index"
			// },
			{
			name: "渗流监测",
			img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rainCondition.png",
			url: "/subPackage/dbSafety/slList"
			},
			// {
			// name: "变形监测",
			// img: "https://sk.hubeishuiyi.cn/business/xcxImg/homeImg/rainCondition.png",
			// url: "/subPackage/dbSafety/bxList"
			// },
			],
			ssxqList: [],
			reservoirDataStatistic: [{
			label: "水库",
			value: 0
			},
			{
			label: "已监测",
			value: 0
			},
			{
			label: "超汛限",
			value: 0
			},
			],
			rainfallOption: {},
			statisticsOption: {},
			zyhjList: [{
			label: "监测预警",
			value: "99.95",
			url: "/pages/importantPart/monitorWarning"
			},
			{
			label: "调度方案",
			value: "9.7",
			url: "/pages/importantPart/schedulingScheme"
			},
			{
			label: "应急预案",
			value: "7.21",
			url: "/pages/importantPart/emergencyPlan"
			}
			],
			skOption: {},
			responsibleStatistic: [{
			name: "行政责任人",
			value: "0"
			},
			{
			name: "主管责任人",
			value: "0"
			},
			{
			name: "技术责任人",
			value: "0"
			},
			{
			name: "管理责任人",
			value: "0"
			}
			],

			btnActive: 0,
			btnCustomStyle: {
			backgroundColor: '#f7f7f7',
			color: '#4593F2'
			},
			qycxOption: {},
			cxfdOption: {},

			//实时汛情相关
			xqRegion: "",
			xqRegionCode: "",
			xqRegionPopUpVisible: false,
			xqTime: "",
			xqTimeVisible: false,

			qycxData: {
			xName: [],
			yBarValue: [],
			yLineValue: [],
			},
			cxfdData: {
			xName: [],
			yBarValue: []
			},

			rainCodition24Data: {
			xBarValue: [],
			},
			adBase: uni.getStorageSync("adCodeBase")
			}
			},
			onLaunch() {
			uni.hideTabBar()
			},
			onLoad() {
			uni.hideTabBar()
			// #ifdef MP-WEIXIN
			this.userIsLogin()
			// #endif
			},
			onShow() {
			this.tabList = uni.getStorageSync("tabBarList")
			this.tabBarIndex = uni.getStorageSync("tabbarIndex")
			this.init()
			this.getMessage()
			},
			methods: {

			getMessage() {
			let params = {
			recipient: uni.getStorageSync("userInfo").user_id,
			isPage: 0,
			createTime: dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss")
			}

			getMessageList(params).then(res => {
			let data = res.data

			if (data.length > 0) {
			this.noticeList = ""
			data.forEach(e => {
			this.noticeList = this.noticeList + e.content
			})
			}
			})
			},
			navigatorMessage() {
			let url = "/subPackage/user/message/index"
			this.$u.func.globalNavigator(url, "navTo")
			},


			userIsLogin() {
			if (this.userInfo.access_token) {} else {
			uni.showModal({
			title: "提示",
			content: "请登录",
			showCancel: false,
			success: res => {
			if (res.confirm) {
			this.$u.func.globalNavigator("/pages/login/index", "redTo")
			} else if (res.cancel) {
			console.log('用户点击取消');
			}
			}
			})
			}
			},
			change(index) {
			let url = index
			this.$u.func.globalNavigator(url, "switchTab")
			},
			init() {
			let selectTime = new Date()
			let formatTime = dateFormat(selectTime).split(" ")[0]
			this.rbTime = formatTime
			this.xqTime = formatTime
			if (!this.adBase) return
			this.getQycxData(this.adBase)
			this.getCxfdData(this.adBase)
			this.getRainCodition24()
			this.getSsxqStatistic(this.adBase)

			if (this.adBase && this.adBase.adGrad < 3) {
			this.getZrlsStatistics(1, 0)
			this.getZrlsStatistics(2, 1)
			this.getZrlsStatistics(4, 2)
			this.getZrlsStatistics(3, 3)
			}
			},
			/**
			* 获取实时汛情统计数据
			*/
			getSsxqStatistic(adBase) {
			//区
			let param = {
			ad_cd: adBase.adCode
			}
			regionList(param).then(res => {
			let data = res.resultList[0]
			this.reservoirDataStatistic[0].value = 0
			this.reservoirDataStatistic[0].value += data.cnt
			})

			//已监测
			reservoirMonitorNumRegion().then(res => {
			let data = res.resultList
			let filterArr = data.filter(e => e.ad_guid == adBase.adCode)
			this.reservoirDataStatistic[1].value = filterArr[0].num
			})

			let params = {
			is_over: 1,
			last_sta: 1
			}
			if (adBase.adGrad == 2) {
			params.city_cd = adBase.adCode
			} else if (adBase.adGrad == 3) {
			params.county_cd = adBase.adCode
			} else if (adBase.adGrad == 4) {
			params.town_cd = adBase.adCode
			}
			//获取超汛数量
			getSKResInfoZRainApi(params).then(res => {
			let data = res.data[0]
			if (data.over_flse_cnt) {
			this.reservoirDataStatistic[2].value = data.over_flse_cnt
			}
			})
			},

			//获取区域超汛分布数据
			getQycxData(region) {
			if (!region) return
			this.xqRegion = region
			let params = {
			city_cd: "",
			county_cd: "",
			dt: this.xqTime
			}
			if (region.adGrad != 1) {
			//市返回区
			if (region.adGrad == 2) {
			params.city_cd = region.adCode
			} else if (region.adGrad == 3) {
			//区返回镇级
			params.county_cd = region.adCode
			params.city_cd = region.pAdCode
			} else if (region.adGrad == 4) {
			//镇返回平级
			let prefix = region.adCode.substring(0, 4)
			if (prefix == "4290") {
			params.city_cd = region.pAdCode
			// params.town_cd = region.adCode
			} else {
			params.county_cd = region.pAdCode
			params.city_cd = prefix + "00000000"
			}
			}
			}


			dayEightOverLimit(params).then(res => {

			let data = res.data
			//武汉市放第一位
			if (data.some(e => e.c_name == "武汉市")) {
			data.forEach((item, index) => {
			if (item.c_name == "武汉市") {
			data.splice(index, 1)
			data.unshift(item)
			}
			})
			}

			this.qycxData = {
			xName: [],
			yBarValue: [],
			yLineValue: [],
			}
			if (data) {
			data.forEach(e => {
			if (e.c_name != null) {
			this.qycxData.xName.push(e.c_name)
			this.qycxData.yBarValue.push(e.total)
			this.qycxData.yLineValue.push(e.scale)
			}
			})
			}
			this.initQycxOption(this.qycxData)
			})
			},
			// 获取超汛幅度分布数据
			getCxfdData(region) {
			if (!region) return

			let param = {
			dt: this.xqTime,
			city_cd: "",
			county_cd: "",
			town_cd: ""
			}
			//市
			if (region && region.adGrad == 2) {
			param.city_cd = region.adCode
			}
			//区
			if (region && region.adGrad == 3) {
			param.county_cd = region.adCode
			param.city_cd = region.pAdCode
			}
			//乡镇
			if (region && region.adGrad == 4) {

			let prefix = region.adCode.substring(0, 4)
			if (prefix == "4290") {
			param.city_cd = region.pAdCode
			param.town_cd = region.adCode
			} else {
			param.city_cd = prefix + "00000000"
			param.county_cd = region.pAdCode
			param.town_cd = region.adCode
			}
			}
			dayEightOverLimitDetail(param).then(res => {
			let data = res.data
			//初始化data
			this.cxfdData = {
			xName: [],
			yBarValue: []
			}

			if (data) {
			const list = data.sort((a, b) => a.over_z - b.over_z)
			list.forEach(e => {
			if (e.over_z > 0) {
			this.cxfdData.xName.push(e.over_z)
			this.cxfdData.yBarValue.push(e.cnt)
			}
			})
			}
			this.initCxfdOption(this.cxfdData)
			})
			},
			/**
			* 获取24小时雨情数据
			*/
			getRainCodition24() {
			let region = this.adBase
			let params = {}
			if (region.adGrad == 1) {

			} else if (region.adGrad == 2) {
			params.city_cd = region.adCode
			} else if (region.adGrad == 3) {
			params.county_cd = region.adCode
			} else if (region.adGrad == 4) {
			return
			} else {
			return
			}

			rainCodition24(params).then(res => {
			let data = res.data[0]
			this.rainCodition24Data = {
			xBarValue: [],
			}
			if (data) {
			this.rainCodition24Data.xBarValue = [
			data.cur_0110_cnt,
			data.cur_1025_cnt,
			data.cur_2550_cnt,
			data.cur_50100_cnt,
			data.cur_100250_cnt,
			data.cur_250_cnt
			]
			}

			this.initRainfallOption(this.rainCodition24Data)
			})
			},
			//加载24小时雨情Echart
			initRainfallOption(data) {
			this.rainfallOption = {
			color: ['#1890FF'],
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'cross',
			animation: false,
			label: {
			backgroundColor: '#505765'
			}
			}
			},
			xAxis: {
			type: 'value',
			name: "水库数量",
			},
			yAxis: {
			name: "mm",
			type: 'category',
			data: ["0.1-10", "10-25", "25-50", "50-100", "100-250", ">=250"],
			axisTick: {
			alignWithLabel: true
			}
			},
			series: [{
			data: data.xBarValue,
			type: 'bar',
			label: {
			show: true,
			position: 'right',
			color: '#000000'
			}
			}, ],
			grid: {
			top: '15%',
			left: '15%',
			bottom: '8%',
			right: '18%'
			},
			}
			},
			//加载区域超汛Echart
			initQycxOption(data) {
			this.qycxOption = {
			color: ['#1890FF', '#F7DE71'],
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			animation: false,
			label: {
			backgroundColor: '#505765'
			}
			}
			},
			xAxis: {
			type: 'category',
			data: data.xName,
			axisLabel: {
			color: "#999999",
			interval: 0,
			rotate: 40
			},
			axisLine: {
			lineStyle: {
			width: 1,
			color: '#DBDBDB'
			},
			},
			axisTick: {
			alignWithLabel: true,
			show: false
			}
			},
			yAxis: [{
			name: "数量(座)",
			type: 'value'
			},
			{
			name: "超汛比例(%)",
			type: 'value',
			}
			],
			series: [{
			name: "数量",
			data: data.yBarValue,
			type: 'bar',
			barWidth: "10",
			yAxisIndex: 0,
			},
			{
			name: "比例",
			yAxisIndex: 1,
			data: data.yLineValue,
			type: 'line',
			itemStyle: {
			color: "rgba(255, 170, 0, 1.0)"
			},
			}
			],
			grid: {
			top: '10%',
			left: '2%',
			bottom: '5%',
			right: '3%',
			containLabel: true
			},
			}
			},
			//加载超汛幅度分布
			initCxfdOption(data) {
			this.cxfdOption = {
			color: ['#1890FF'],
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow'
			}
			},
			grid: {
			left: '5%',
			right: '20%',
			bottom: '16%',
			top: '12%',
			containLabel: true
			},
			dataZoom: [{
			show: true,
			realtime: true,
			start: 15,
			end: 45
			}],
			xAxis: [{
			type: 'category',
			name: "幅度（m）",
			data: data.xName,
			axisLabel: {
			color: "#999999",
			},
			axisLine: {
			lineStyle: {
			width: 1,
			color: '#999999'
			},
			},
			axisTick: {
			alignWithLabel: true,
			show: false
			}
			}],
			yAxis: [{
			type: 'value',
			name: "数量（座）",
			nameTextStyle: {
			color: "#999999",
			padding: [11, 20, 0, 0],
			nameLocation: "start",
			},
			axisLabel: {
			color: "#999999",
			},
			splitLine: {
			lineStyle: {
			type: 'dashed'
			},
			show: true
			},
			axisTick: {
			alignWithLabel: true,
			show: false
			},
			axisLine: {
			show: false
			},
			}],
			series: [{
			name: '数量',
			type: 'bar',
			smooth: true,
			data: data.yBarValue
			}]
			}

			},

			// 跳转到搜索页
			goSearchPage() {
			this.$u.func.globalNavigator("/subPackage/realtimeMonitor/search/index")
			},
			//服务跳转
			navigatorService(item) {
			this.$u.func.globalNavigator(item.url, "navTo", item.name)
			},

			// 跳转到统计页
			navigatorPage() {
			let url = "/subPackage/realtimeMonitor/reservoir/floodSituationStatistics"
			this.$u.func.globalNavigator(url, "navTo")
			},

			closeRbRegionPopup() {
			this.rbRegionPopUpVisible = false
			},

			//时间显示格式化
			formatter(type, value) {
			if (type === 'year') {
			return `${value}年`
			}
			if (type === 'month') {
			return `${value}月`
			}
			if (type === 'day') {
			return `${value}日`
			}
			return value
			},



			//区域超汛按钮点击事件
			qycx(index) {
			this.btnActive = index
			this.getQycxData(this.xqRegion)
			},
			//超汛幅度分布
			cxfd(index) {
			this.btnActive = index
			this.getCxfdData(this.xqRegion)
			},


			//汛情时间选择确认
			xqTimeConfirm(data) {
			let selectTime = new Date(data.value)
			let formatTime = dateFormat(selectTime).split(" ")[0]
			this.xqTime = formatTime
			this.xqTimeVisible = false
			if (this.btnActive == 0) {
			this.getQycxData(this.xqRegion)
			} else {
			this.getCxfdData(this.xqRegion)
			}
			},


			//实时汛情区域选择
			sSxqRegionChange(region) {
			this.xqRegion = region
			if (this.btnActive == 0) {
			this.getQycxData(this.xqRegion)
			} else {
			this.getCxfdData(this.xqRegion)
			}
			},
			//责任落实
			getZrlsStatistics(type, column) {
			let param = {
			p_ad_code: this.adBase.adCode,
			type: type
			}
			responsibilityImplementation(param).then(res => {
			let data = res.resultList[0]
			this.responsibleStatistic[column].value = (((data.cn_total - data.tol_cn_wsb) / data
			.cn_total) * 100).toFixed(2)
			})
			},



			}
			}
			</script>

			<style lang="scss" scoped>
			.container {
			min-height: 100vh;
			overflow: hidden;
			background-color: #f9f9fa;


			/* 自定义状态栏 */
			.status_bar {
			height: var(--status-bar-height);
			width: 100%;
			}
			}

			.icon {
			font-size: 0;
			}

			.main {
			// padding: 20rpx;
			position: relative;
			top: -44rpx;
			}

			.top-nav-bar {
			height: 81rpx;
			}

			.search {
			height: 200rpx;
			display: flex;
			background-color: #5887f9;
			padding: 30rpx;
			}


			.service-box {
			background: #ffffff;
			border-radius: 12rpx 12rpx 0 0;
			width: 100%;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;


			.service-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 120rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #585b61;
			margin: 20rpx 0;

			.img {
			width: 70rpx;
			height: auto;
			}

			.name {
			display: flex;
			justify-content: space-around;
			align-items: center;
			// width: 104rpx;
			height: 26rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 28rpx;
			}
			}
			}

			.card-head {
			display: flex;
			justify-content: space-between;
			padding: 12rpx;

			.left {
			display: flex;
			align-items: center;

			.img-icon {
			width: 32rpx;
			height: 40rpx;
			}

			.text {
			font-family: PingFang-SC-Bold;
			font-weight: Bold;
			color: #333333;
			font-size: 40rpx;
			margin-left: 20rpx;
			}
			}

			.right {
			display: flex;
			align-items: center;

			.region {
			display: flex;
			flex-wrap: wrap;
			align-content: space-around;
			align-items: center;

			.text {
			width: 110rpx;
			height: 24rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #BBBBBB;
			line-height: 28rpx;
			display: flex;
			justify-content: flex-end;
			}

			.img-icon {
			width: 20rpx;
			height: 14rpx;
			-moz-transform: rotate(-90deg);
			-webkit-transform: rotate(-90deg);
			}
			}

			.time {
			margin-left: 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-around;
			align-items: center;

			.text {
			width: 158rpx;
			height: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #BBBBBB;
			line-height: 28rpx;
			}

			.img-icon {
			width: 20rpx;
			height: 14rpx;
			}
			}


			.text {
			color: #4593F2;
			font-family: PingFang-SC-Bold;
			font-size: 30rpx;
			width: 60rpx;
			}

			.img-icon {
			width: 20rpx;
			height: 14rpx;
			}
			}

			}

			.condition {
			margin-bottom: 40rpx;

			.region {
			display: flex;
			flex-wrap: wrap;
			align-content: space-around;
			align-items: center;

			.text {
			width: 158rpx;
			height: 24rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #BBBBBB;
			line-height: 28rpx;
			display: flex;
			justify-content: flex-end;
			}

			.img-icon {
			width: 16rpx;
			height: 10rpx;
			}
			}

			.time {
			margin-left: 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-around;
			align-items: center;

			.text {
			width: 158rpx;
			height: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #BBBBBB;
			line-height: 28rpx;
			}

			.img-icon {
			width: 20rpx;
			height: 14rpx;
			}
			}
			}

			.card-content {
			// background-color: #f2f8ff;
			border-radius: 20rpx;

			.btn-group {
			display: flex;
			padding: 20rpx;

			.btn-active {
			background-color: #f7f7f7;
			color: #4593F2;
			}
			}
			}

			.data {
			height: auto;
			background-color: #f2f8ff;
			margin: 0 20rpx;
			border-radius: 10rpx;
			}

			.value {
			display: flex;
			justify-content: space-between;
			}

			.top {
			display: flex;

			.left {
			width: 30%;
			}
			}

			.card-content-zrls {
			display: flex;
			justify-content: space-around;

			.item {
			width: 154rpx;
			height: 132rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 4rpx 2rpx rgba(69, 147, 242, 0.22);
			border-radius: 6px;


			.top {
			color: #ffffff;
			font-size: 22rpx;

			.text {
			display: flex;
			align-items: center;
			justify-content: space-around;
			}
			}

			.first {
			width: 154rpx;
			height: 46rpx;
			background: linear-gradient(0deg, #7162FF 0%, #A495FF 100%);
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.text {
			width: 132rpx;
			height: 22rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 28rpx;
			}
			}

			.second {
			width: 154rpx;
			height: 46rpx;
			background: linear-gradient(0deg, #FA6448 0%, #FB836A 100%);
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.text {
			width: 132rpx;
			height: 22rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 28rpx;
			}
			}


			.third {
			width: 154rpx;
			height: 46rpx;
			background: linear-gradient(0deg, #3715F6 0%, #907DFB 100%);
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.text {
			width: 132rpx;
			height: 22rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 28rpx;
			}
			}

			.fourth {
			width: 154rpx;
			height: 46rpx;
			background: linear-gradient(0deg, #FE9C47 0%, #FFC799 100%);
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.text {
			width: 132px;
			height: 22rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 28rpx;
			}
			}

			.bottom {
			font-size: 34rpx;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-items: center;

			.text-fixed {
			.text {
			width: 58rpx;
			height: 20rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
			}
			}

			.value {
			.text {
			width: 98rpx;
			height: 18rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 28rpx;
			display: flex;
			justify-content: space-around;
			}
			}
			}
			}

			}

			.card-content-zyhj {
			display: flex;
			justify-content: space-around;

			.service-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			}

			.text-fixed {
			position: absolute;
			top: 8rpx;
			right: 76rpx;
			width: 18rpx;
			height: 16rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 28rpx;
			}

			.value {
			.text {
			height: 24rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 28rpx;
			}
			}

			.first {
			display: flex;
			align-items: center;
			justify-content: space-around;


			width: 116rpx;
			height: 116rpx;
			background: #FE9D49;
			border-radius: 50%;


			.bar1 {
			width: 26rpx;
			height: 30rpx;
			background: linear-gradient(0deg, #FE9C48 0%, #FFFFFF 100%);
			border-radius: 4rpx;
			}

			.bar2 {
			width: 26rpx;
			height: 30rpx;
			background: linear-gradient(0deg, #FE9C48 0%, #FFFFFF 100%);
			border-radius: 4rpx;
			}

			.bar3 {
			width: 26rpx;
			height: 30rpx;
			background: linear-gradient(0deg, #FE9C48 0%, #FFFFFF 100%);
			border-radius: 4rpx;
			}
			}

			.second {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 116rpx;
			height: 116rpx;
			background: #2586EB;
			border-radius: 50%;
			}

			.third {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 116rpx;
			height: 116rpx;
			background: #17BDB3;
			border-radius: 50%;
			}


			}

			.rbgl {
			font-size: 30rpx;

			.card-head {
			.right {
			display: flex;

			.region {
			display: flex;
			flex-wrap: wrap;
			align-content: space-around;
			}

			.time {
			display: flex;
			flex-wrap: wrap;
			align-content: space-around;
			}
			}

			}

			.card-content-rbgl {
			display: flex;
			flex-direction: column;
			align-items: center;

			.rb-content {
			width: 622rpx;
			// height: 106rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			}

			.more {
			color: #69b0ff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			}
			}
			}

			.rb-title {
			display: flex;
			justify-content: center;
			margin: 20rpx;
			}

			.rb-detail {
			font-size: 28rpx;
			padding: 30rpx;
			}

			.condition {
			font-size: 30rpx;
			display: flex;
			justify-content: flex-end;

			.region {
			display: flex;
			flex-wrap: wrap;
			align-content: space-around;
			}

			.time {
			display: flex;
			flex-wrap: wrap;
			align-content: space-around;
			}
			}
			</style>

New file
			@@ -0,0 +1,527 @@
			<template>
			<view class="container">
			<!-- 占位 -->
			<view style="height: 88rpx; background-color: rgb(13 129 238);"></view>
			<view class="head">
			<!-- 用户信息 -->
			<view class="user-box">
			<view class="top">
			<view class="left">
			<image :src="userInfo.avatar?userInfo.avatar:'https://sk.hubeishuiyi.cn/business/img/water.png'"
			class="avatar" mode=""></image>
			</view>
			<view class="right">
			<view class="user-detail">
			<u--text size="20" color="#ffffff" :text="userInfo.real_name"></u--text>
			</view>
			</view>
			</view>
			</view>
			<view style="padding: 40rpx 30rpx 30rpx 30rpx;color: #fff;font-size: 28rpx;">
			<text v-if="roleDescription.length>0">{{roleDescription[0].description}}</text>
			<text v-if="!showMoreDesc && roleDescription.length>1" @click="showMoreDesc = true">更多</text>
			<view v-if="showMoreDesc">
			<view v-for="(item,index) in roleDescription" :key="item.roleName">
			<text @click="showMoreDesc = false" v-if="item.index>0">{{item.description}}</text>
			</view>
			</view>
			</view>
			</view>
			<!-- 功能列表 -->

			<view class="cell-box">
			<cardList :cardList="systemList">
			<u-badge max="99" :value="messageCount"></u-badge>
			</cardList>
			</view>

			<view v-if="showHistoryList" class="cell-box">
			<cardList :title="`历史记录`" :cardList="historyList"></cardList>
			</view>

			<view class="cell-box">
			<u-cell icon="account" title="角色切换">
			<view slot="title">
			<view class="flex">
			<view class="">角色</view>
			<view style="width: 316rpx;display: flex;justify-content: flex-end">{{roleName}}</view>
			</view>
			</view>
			</u-cell>
			<!-- #ifdef APP-PLUS -->
			<u-cell icon="error-circle">
			<template slot="title">
			<navigator url="../../subPackage/user/privacyPolicy" hover-class="navigator-hover">
			隐私政策
			</navigator>
			</template>

			<image slot="icon" class="icon"
			:src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/privacy.png`"></image>
			</u-cell>

			<u-cell icon="setting" :title="`系统版本${verson}`">
			<image slot="icon" class="icon"
			:src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/version.png`"></image>
			</u-cell>

			<u-cell icon="error" :title="`注销帐号`" @click="delAccount">
			<image slot="icon" class="icon"
			:src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/delAccount.png`"></image>
			</u-cell>
			<!-- #endif -->

			</view>


			<view style="padding: 22rpx 0px 40rpx 0;">
			<u-button type="error" text="退出当前账号" @click="logOut"></u-button>
			</view>
			<tabBar @changeTabList="changeTabList" @change="change" :currentTab="tabList.length-1" :tabList="tabList">
			</tabBar>
			</view>
			</template>

			<script>
			import cardList from "@/components/my-components/cardList.vue"
			import store from "@/store/index.js"
			import tabBar from "@/components/tabBar/tabBar.vue"
			import {
			getTextByName
			} from "./util"
			import {
			dynamicMenu,
			getAll,
			} from "@/api/system/role.js"
			import shareMixin from "@/mixin/shareMixin";
			import {
			messageCount
			} from "@/api/system/message";
			import {
			clearCId,
			delAccount,
			} from "../../api/system/user";
			export default {
			mixins: [shareMixin],
			components: {
			tabBar,
			cardList
			},
			data() {
			return {
			systemList: [{
			title: "消息",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/message.png",
			url: "/subPackage/user/message/index",
			badge: true,
			},
			{
			title: "修改密码",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/updatePassword.png",
			url: "/subPackage/user/password",
			},
			{
			title: "通讯录",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/addressList.png",
			url: "/subPackage/user/addressList",
			},
			{
			title: "投诉建议",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/feedback.png",
			url: "/subPackage/user/feedback",
			},
			],

			historyList: [{
			title: "报汛",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/reportFlood.png",
			url: "/subPackage/user/historical/index",
			},
			{
			title: "巡查",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/partolHistory.png",
			url: "/subPackage/user/history/patrol",
			},
			{
			title: "险情上报",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/dangerReport.png",
			url: "/subPackage/user/history/danger",
			},
			{
			title: "管护",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/protect.png",
			url: "/subPackage/user/history/protect",
			},
			{
			title: "调度",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/scheduling.png",
			url: "/subPackage/user/history/scheduling",
			},
			],




			headHeight: 300,
			columns: [],
			roleName: "",
			tabBarIndex: uni.getStorageSync("tabbarIndex"),
			roleIDList: uni.getStorageSync("userInfo").role_id.split(",") \|\| [],
			tabList: uni.getStorageSync("tabBarList"),
			title: "",
			show: false,
			index: uni.getStorageSync("responIndex") \|\| 0,
			verson: "",
			showMoreDesc: false,
			roleDescription: [],
			messageCount: 0,

			showHistoryList: false,
			};
			},
			onReady() {
			const role_name = uni.getStorageSync("userInfo").role_name
			this.roleDescription = getTextByName(role_name)
			this.setHeadHeight()
			uni.hideTabBar()
			//#ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
			this.verson = wgtinfo.version
			})
			//#endif

			},
			created() {
			this.getUserRole()
			this.isShowHistory()
			},
			mounted() {},
			methods: {

			//账号注销
			delAccount() {
			uni.showModal({
			title: "提示",
			content: "是否注销账号？",
			success: res => {
			if (res.confirm) {
			uni.showModal({
			content: "确认注销？",
			success: res => {
			if (res.confirm) {
			delAccount(this.userInfo.user_id).then(res => {
			this.logOut()
			})
			}
			}
			})
			}
			}
			})
			},

			isShowHistory() {
			let arr = this.tabList.filter(e => e.name == "工作")
			if (arr.length > 0) {
			this.showHistoryList = true
			} else {
			this.showHistoryList = false
			}

			},

			getMessageCount() {
			let params = {
			recipient: this.userInfo.user_id,
			status: 0
			}
			messageCount(params).then(res => {
			this.messageCount = res.data
			this.$u.func.updateTabbar(res.data)
			this.tabList = uni.getStorageSync("tabBarList")
			})
			},

			changeTabList() {

			},
			change(index) {
			let url = index
			this.$u.func.globalNavigator(url, "switchTab")
			},
			async bindChange(e) {
			uni.setStorageSync("responIndex", e.detail.value)
			store.commit("setTabBarList", [])
			this.index = e.detail.value
			const obj = {
			flag: "app",
			roleId: this.columns[this.index].id
			}
			const res = await dynamicMenu(this.columns[this.index].id, "app")
			if (res.code == 200) {
			res.data.forEach(val => {
			val.symbol = Math.floor(Math.random() * 100 + 1)
			})
			store.commit("setTabBarList", res.data)
			store.commit("setActiveRoleId", this.columns[this.index].id)
			store.commit("SET_TABBAT_INDEX", 0)
			this.$u.func.globalNavigator(res.data[0].path, "switchTab")
			}
			},

			setHeadHeight() {
			const that = this
			uni.getSystemInfo({
			success: function(res) {
			that.headHeight = Number(res.statusBarHeight) + Number(res.platform == 'ios' ?
			44 :
			48) + 400
			}
			});
			},
			logOut() {
			//#ifdef APP-PLUS
			clearCId(this.userInfo.user_id).then(res => {
			this.index = 0
			uni.setStorageSync("responIndex", 0)
			uni.clearStorageSync()
			uni.reLaunch({
			url: "/pages/login/index"
			})
			})
			//#endif

			// #ifdef MP-WEIXIN
			this.index = 0
			uni.setStorageSync("responIndex", 0)
			uni.clearStorageSync()
			uni.reLaunch({
			url: "/pages/login/index"
			})
			// #endif

			// #ifdef H5
			this.index = 0
			uni.setStorageSync("responIndex", 0)
			uni.clearStorageSync()
			uni.reLaunch({
			url: "/pages/login/index"
			})
			// #endif
			},
			navigatorMessage() {
			uni.switchTab({
			url: "/pages/message/index"
			})
			},
			//获取当前角色的所有权限列表
			async getUserRole() {
			const {
			code,
			data,
			msg
			} = await getAll()
			if (code != 200) return
			let roleName = []
			this.roleIDList.forEach(val => {
			const arr = data.filter(item => item.id == val)
			const obj = {
			name: arr[0].roleName,
			id: arr[0].id
			}
			this.columns.push(obj)
			roleName.push(arr[0].roleName)
			})
			this.roleName = roleName.join(",")
			},
			/**
			* 角色切换
			*/
			roleChange() {
			this.show = true
			},
			goNewPage(path) {
			this.$u.func.globalNavigator(path)
			}



			},
			onShow() {
			this.tabList = uni.getStorageSync("tabBarList")
			this.tabBarIndex = uni.getStorageSync("tabbarIndex")
			this.getMessageCount()
			}
			}
			</script>

			<style scoped lang="scss">
			.container {
			background-color: #f7f7f7;
			min-height: 100vh;
			overflow: hidden;
			}

			.flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
			}

			.head {
			position: relative;
			top: 0;
			left: 0;
			z-index: 1;
			min-height: 400rpx;
			overflow: hidden;
			background: #0d81ee;

			.set-icon {
			vertical-align: middle;
			width: 41rpx;
			height: auto;
			margin-right: 35rpx;
			}

			.head-bg {
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: -1;
			width: 750rpx;
			height: 582rpx;
			background: #55A2F9;
			}
			}

			.user-box {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx 0 64rpx;
			margin-top: 36rpx;

			.top {
			display: flex;

			.left {
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar {
			width: 128rpx;
			height: 128rpx;
			background: #ffffff;
			border-radius: 50%;
			}

			.user-deatil {
			margin-top: 20rpx;
			margin-left: 50rpx;
			color: #ffffff;
			flex-direction: column;
			justify-content: space-around;
			}

			}

			.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20rpx;
			}
			}

			.bottom {}



			.edit-btn {
			margin-top: 20rpx;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			width: 165rpx;
			height: 54rpx;
			border: 2rpx solid #f5f5f5;
			border-radius: 11rpx;

			font-size: 27rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
			}
			}

			.nav {
			display: flex;
			margin: 36rpx 38rpx 0;
			padding: 36rpx 0 42rpx;

			.text {
			color: #ffffff;
			}

			.nav-item {
			width: calc(100% / 4);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			font-size: 25rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;

			&:not(:last-of-type) {
			position: relative;

			&::after {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			content: '';
			display: block;
			width: 2rpx;
			background-color: #fff;
			height: 30rpx;
			}
			}

			.icon {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 6rpx;
			}
			}
			}

			.cell-box {
			background: #ffffff;
			margin: 18rpx;

			.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 6rpx;
			}
			}

			a {
			text-decoration: none;
			}

			a:link {
			color: #000000;
			}

			a:visited {
			color: #000000;
			}
			</style>

			@@ -1,527 +1,113 @@
			<template>
			<view class="container">
			<!-- 占位 -->
			<view style="height: 88rpx; background-color: rgb(13 129 238);"></view>
			<view class="head">
			<!-- 用户信息 -->
			<view class="user-box">
			<view class="top">
			<view class="left">
			<image :src="userInfo.avatar?userInfo.avatar:'https://sk.hubeishuiyi.cn/business/img/water.png'"
			class="avatar" mode=""></image>
			</view>
			<view class="right">
			<view class="user-detail">
			<u--text size="20" color="#ffffff" :text="userInfo.real_name"></u--text>
			</view>
			</view>
			<u-navbar height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
			<view slot="left">
			<u--text color="#ffffff" text="基层智治" size="18" />
			</view>
			</u-navbar>

			<view class="main">
			<view class="main-bg">

			</view>


			<view class="main-cell">
			<view class="cell-content">
			<u-cell-group :border="false">
			<u-cell :isLink="true"
			v-for="(item, index) in cellGroupData" :icon="item.icon" :title="item.title"
			:url="item.url"
			:key="index" :border="false"
			></u-cell>
			</u-cell-group>
			</view>
			</view>
			<view style="padding: 40rpx 30rpx 30rpx 30rpx;color: #fff;font-size: 28rpx;">
			<text v-if="roleDescription.length>0">{{roleDescription[0].description}}</text>
			<text v-if="!showMoreDesc && roleDescription.length>1" @click="showMoreDesc = true">更多</text>
			<view v-if="showMoreDesc">
			<view v-for="(item,index) in roleDescription" :key="item.roleName">
			<text @click="showMoreDesc = false" v-if="item.index>0">{{item.description}}</text>
			</view>
			</view>
			</view>
			</view>
			<!-- 功能列表 -->

			<view class="cell-box">
			<cardList :cardList="systemList">
			<u-badge max="99" :value="messageCount"></u-badge>
			</cardList>

			</view>

			<view v-if="showHistoryList" class="cell-box">
			<cardList :title="`历史记录`" :cardList="historyList"></cardList>
			</view>

			<view class="cell-box">
			<u-cell icon="account" title="角色切换">
			<view slot="title">
			<view class="flex">
			<view class="">角色</view>
			<view style="width: 316rpx;display: flex;justify-content: flex-end">{{roleName}}</view>
			</view>
			</view>
			</u-cell>
			<!-- #ifdef APP-PLUS -->
			<u-cell icon="error-circle">
			<template slot="title">
			<navigator url="../../subPackage/user/privacyPolicy" hover-class="navigator-hover">
			隐私政策
			</navigator>
			</template>

			<image slot="icon" class="icon"
			:src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/privacy.png`"></image>
			</u-cell>

			<u-cell icon="setting" :title="`系统版本${verson}`">
			<image slot="icon" class="icon"
			:src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/version.png`"></image>
			</u-cell>

			<u-cell icon="error" :title="`注销帐号`" @click="delAccount">
			<image slot="icon" class="icon"
			:src="`https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/delAccount.png`"></image>
			</u-cell>
			<!-- #endif -->

			</view>


			<view style="padding: 22rpx 0px 40rpx 0;">
			<u-button type="error" text="退出当前账号" @click="logOut"></u-button>
			</view>
			<tabBar @changeTabList="changeTabList" @change="change" :currentTab="tabList.length-1" :tabList="tabList">
			</tabBar>
			<tabBar @change='change' :currentTab="0-0" :tabList="tabList"></tabBar>
			</view>
			</template>

			<script>
			import cardList from "@/components/my-components/cardList.vue"
			import store from "@/store/index.js"
			import tabBar from "@/components/tabBar/tabBar.vue"
			import {
			getTextByName
			} from "./util"
			import {
			dynamicMenu,
			getAll,
			} from "@/api/system/role.js"
			import shareMixin from "@/mixin/shareMixin";
			import {
			messageCount
			} from "@/api/system/message";
			import {
			clearCId,
			delAccount,
			} from "../../api/system/user";
			import tabBar from "@/components/tabBar/tabBar.vue";

			export default {
			mixins: [shareMixin],
			components: {
			tabBar,
			cardList
			},

			data() {
			return {
			systemList: [{
			title: "消息",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/message.png",
			url: "/subPackage/user/message/index",
			badge: true,
			tabList: uni.getStorageSync("tabBarList") \|\| [],
			cellGroupData: [
			{
			title: '我的家人',
			icon: 'account-fill',
			url: ''
			},
			{
			title: "修改密码",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/updatePassword.png",
			url: "/subPackage/user/password",
			title: '切换角色',
			icon: 'account-fill',
			url: '/subPackage/user/role/index'
			},
			{
			title: "通讯录",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/addressList.png",
			url: "/subPackage/user/addressList",
			title: '修改密码',
			icon: 'account-fill',
			url: ''
			},
			{
			title: "投诉建议",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/feedback.png",
			url: "/subPackage/user/feedback",
			},
			],

			historyList: [{
			title: "报汛",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/reportFlood.png",
			url: "/subPackage/user/historical/index",
			},
			{
			title: "巡查",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/partolHistory.png",
			url: "/subPackage/user/history/patrol",
			},
			{
			title: "险情上报",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/dangerReport.png",
			url: "/subPackage/user/history/danger",
			},
			{
			title: "管护",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/protect.png",
			url: "/subPackage/user/history/protect",
			},
			{
			title: "调度",
			icon: "https://sk.hubeishuiyi.cn/business/xcxImg/centerIcon/scheduling.png",
			url: "/subPackage/user/history/scheduling",
			},
			],




			headHeight: 300,
			columns: [],
			roleName: "",
			tabBarIndex: uni.getStorageSync("tabbarIndex"),
			roleIDList: uni.getStorageSync("userInfo").role_id.split(",") \|\| [],
			tabList: uni.getStorageSync("tabBarList"),
			title: "",
			show: false,
			index: uni.getStorageSync("responIndex") \|\| 0,
			verson: "",
			showMoreDesc: false,
			roleDescription: [],
			messageCount: 0,

			showHistoryList: false,
			};
			},
			onReady() {
			const role_name = uni.getStorageSync("userInfo").role_name
			this.roleDescription = getTextByName(role_name)
			this.setHeadHeight()
			uni.hideTabBar()
			//#ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
			this.verson = wgtinfo.version
			})
			//#endif

			},
			created() {
			this.getUserRole()
			this.isShowHistory()
			},
			mounted() {},
			methods: {

			//账号注销
			delAccount() {
			uni.showModal({
			title: "提示",
			content: "是否注销账号？",
			success: res => {
			if (res.confirm) {
			uni.showModal({
			content: "确认注销？",
			success: res => {
			if (res.confirm) {
			delAccount(this.userInfo.user_id).then(res => {
			this.logOut()
			})
			}
			}
			})
			}
			title: '退出登录',
			icon: 'account-fill',
			url: ''
			}
			})
			},
			]
			}
			},

			isShowHistory() {
			let arr = this.tabList.filter(e => e.name == "工作")
			if (arr.length > 0) {
			this.showHistoryList = true
			} else {
			this.showHistoryList = false
			}

			},

			getMessageCount() {
			let params = {
			recipient: this.userInfo.user_id,
			status: 0
			}
			messageCount(params).then(res => {
			this.messageCount = res.data
			this.$u.func.updateTabbar(res.data)
			this.tabList = uni.getStorageSync("tabBarList")
			})
			},

			changeTabList() {

			},
			methods: {
			change(index) {
			let url = this.tabList[index].path
			let url = index
			this.$u.func.globalNavigator(url, "switchTab")
			},
			async bindChange(e) {
			uni.setStorageSync("responIndex", e.detail.value)
			store.commit("setTabBarList", [])
			this.index = e.detail.value
			const obj = {
			flag: "app",
			roleId: this.columns[this.index].id
			}
			const res = await dynamicMenu(this.columns[this.index].id, "app")
			if (res.code == 200) {
			res.data.forEach(val => {
			val.symbol = Math.floor(Math.random() * 100 + 1)
			})
			store.commit("setTabBarList", res.data)
			store.commit("setActiveRoleId", this.columns[this.index].id)
			store.commit("SET_TABBAT_INDEX", 0)
			this.$u.func.globalNavigator(res.data[0].path, "switchTab")
			}
			},

			setHeadHeight() {
			const that = this
			uni.getSystemInfo({
			success: function(res) {
			that.headHeight = Number(res.statusBarHeight) + Number(res.platform == 'ios' ?
			44 :
			48) + 400
			}
			});
			},
			logOut() {
			//#ifdef APP-PLUS
			clearCId(this.userInfo.user_id).then(res => {
			this.index = 0
			uni.setStorageSync("responIndex", 0)
			uni.clearStorageSync()
			uni.reLaunch({
			url: "/pages/login/index"
			})
			})
			//#endif

			// #ifdef MP-WEIXIN
			this.index = 0
			uni.setStorageSync("responIndex", 0)
			uni.clearStorageSync()
			uni.reLaunch({
			url: "/pages/login/index"
			})
			// #endif

			// #ifdef H5
			this.index = 0
			uni.setStorageSync("responIndex", 0)
			uni.clearStorageSync()
			uni.reLaunch({
			url: "/pages/login/index"
			})
			// #endif
			},
			navigatorMessage() {
			uni.switchTab({
			url: "/pages/message/index"
			})
			},
			//获取当前角色的所有权限列表
			async getUserRole() {
			const {
			code,
			data,
			msg
			} = await getAll()
			if (code != 200) return
			let roleName = []
			this.roleIDList.forEach(val => {
			const arr = data.filter(item => item.id == val)
			const obj = {
			name: arr[0].roleName,
			id: arr[0].id
			}
			this.columns.push(obj)
			roleName.push(arr[0].roleName)
			})
			this.roleName = roleName.join(",")
			},
			/**
			* 角色切换
			*/
			roleChange() {
			this.show = true
			},
			goNewPage(path) {
			this.$u.func.globalNavigator(path)
			}



			},
			onShow() {
			this.tabList = uni.getStorageSync("tabBarList")
			this.tabBarIndex = uni.getStorageSync("tabbarIndex")
			this.getMessageCount()
			}
			}
			</script>

			<style scoped lang="scss">
			<style lang="scss" scoped>
			.container {
			background-color: #f7f7f7;
			min-height: 100vh;
			overflow: hidden;
			}

			.flex {
			width: 100%;
			height: 100%;

			display: flex;
			align-items: center;
			justify-content: space-between;
			}

			.head {
			position: relative;
			top: 0;
			left: 0;
			z-index: 1;
			min-height: 400rpx;
			overflow: hidden;
			background: #0d81ee;

			.set-icon {
			vertical-align: middle;
			width: 41rpx;
			height: auto;
			margin-right: 35rpx;
			}

			.head-bg {
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: -1;
			width: 750rpx;
			height: 582rpx;
			background: #55A2F9;
			}
			}

			.user-box {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx 0 64rpx;
			margin-top: 36rpx;

			.top {
			display: flex;

			.left {
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar {
			width: 128rpx;
			height: 128rpx;
			background: #ffffff;
			border-radius: 50%;
			}

			.user-deatil {
			margin-top: 20rpx;
			margin-left: 50rpx;
			color: #ffffff;
			flex-direction: column;
			justify-content: space-around;
			}

			flex-direction: column;
			background: #F9F9FA;

			.main {
			position: relative;
			height: 0;
			flex: 1;
			overflow-y: auto;

			.main-bg {
			height: 36%;
			background: royalblue;
			}

			.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20rpx;
			}
			}

			.bottom {}



			.edit-btn {
			margin-top: 20rpx;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			width: 165rpx;
			height: 54rpx;
			border: 2rpx solid #f5f5f5;
			border-radius: 11rpx;

			font-size: 27rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
			}
			}

			.nav {
			display: flex;
			margin: 36rpx 38rpx 0;
			padding: 36rpx 0 42rpx;

			.text {
			color: #ffffff;
			}

			.nav-item {
			width: calc(100% / 4);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			font-size: 25rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;

			&:not(:last-of-type) {
			position: relative;

			&::after {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			content: '';
			display: block;
			width: 2rpx;
			background-color: #fff;
			height: 30rpx;

			.main-cell {
			position: absolute;
			top: 34%;
			width: 100%;
			height: 66%;
			border-radius: 10rpx 10rpx 0 0 ;
			z-index: 11;
			background: #fff;

			.cell-content {
			margin-top: 240rpx;
			}
			}

			.icon {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 6rpx;
			}
			}
			}

			.cell-box {
			background: #ffffff;
			margin: 18rpx;

			.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 6rpx;
			}
			}

			a {
			text-decoration: none;
			}

			a:link {
			color: #000000;
			}

			a:visited {
			color: #000000;
			}
			</style>

New file
			@@ -0,0 +1,51 @@
			<template>
			<view class="role-container">
			<view v-for="(item, index) in roleData">
			<view class="l">
			<u-icon :name="item.iconName"></u-icon>
			<view class="role-name">
			{{item.roleName}}
			</view>
			</view>

			<view class="r">
			<u-icon name="checkmark"></u-icon>
			</view>
			</view>
			</view>
			</template>

			<script>
			export default {
			props: {
			roleData: {
			type: Array,
			default: () => []
			}
			}
			}
			</script>

			<style lang="scss" scoped>
			.role-container {
			& > view {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 16rpx;
			padding: 0 16rpx;
			background: #fff;
			height: 80rpx;

			.l {
			flex: 1;
			display: flex;
			align-items: center;

			.role-name {
			margin-left: 16rpx;
			}
			}
			}
			}
			</style>

New file
			@@ -0,0 +1,88 @@
			<template>
			<view class="container">
			<view>
			<role-list :roleData="roleData"></role-list>
			</view>

			<view class="cur-btn">
			<u-button type="primary" text="确定"></u-button>
			</view>
			</view>
			</template>

			<script>
			import roleList from "@/subPackage/user/components/roleList.vue"

			export default {
			components: {
			roleList
			},

			data() {
			return {
			cellGroupData: [
			{
			title: '我的家人',
			icon: 'account-fill',
			url: ''
			},
			{
			title: '切换角色',
			icon: 'account-fill',
			url: ''
			},
			{
			title: '修改密码',
			icon: 'account-fill',
			url: ''
			},
			{
			title: '退出登录',
			icon: 'account-fill',
			url: ''
			}
			],
			roleData: [
			{
			roleName: '居民',
			iconName: 'account-fill'
			},
			{
			roleName: '场所负责人',
			iconName: 'account-fill'
			},
			{
			roleName: '网格员',
			iconName: 'account-fill'
			},
			{
			roleName: '系统管理员',
			iconName: 'account-fill'
			},
			]
			}
			},

			methods: {

			}
			}
			</script>

			<style lang="scss" scoped>
			.container {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			background: #F9F9FA;

			.cur-btn {
			margin: 0 20rpx;
			position: absolute;
			bottom: 28rpx;
			width: calc(100% - 40rpx);
			}
			}
			</style>