Merge branch 'master'

zhongrj

2023-10-27 4dc08d5c2904c2d1f0ca95f7ba41970c2a8145c0

Merge branch 'master'

 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>