From 4dc08d5c2904c2d1f0ca95f7ba41970c2a8145c0 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Fri, 27 Oct 2023 11:28:40 +0800
Subject: [PATCH] Merge branch 'master'

---
 pages/user/center - 副本.vue              |  527 +++++++
 pages/user/center.vue                   |  562 +-------
 manifest.json                           |    3 
 pages/home/index - 副本.vue               | 1294 +++++++++++++++++++
 pages/home/index.vue                    | 1518 +---------------------
 pages.json                              |   10 
 subPackage/user/components/roleList.vue |   51 
 subPackage/user/role/index.vue          |   88 +
 components/tabBar/tabBar.vue            |   21 
 9 files changed, 2,153 insertions(+), 1,921 deletions(-)

diff --git a/components/tabBar/tabBar.vue b/components/tabBar/tabBar.vue
index e68027a..0949fdb 100644
--- a/components/tabBar/tabBar.vue
+++ b/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
diff --git a/manifest.json b/manifest.json
index ac20958..4cbe5f4 100644
--- a/manifest.json
+++ b/manifest.json
@@ -207,7 +207,8 @@
                     }
                 }
             },
-            "port" : ""
+            "port" : "",
+            "https" : false
         },
         "uniStatistics" : {
             "enable" : false
diff --git a/pages.json b/pages.json
index 319e740..c5ca68c 100644
--- a/pages.json
+++ b/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,
diff --git "a/pages/home/index - \345\211\257\346\234\254.vue" "b/pages/home/index - \345\211\257\346\234\254.vue"
new file mode 100644
index 0000000..ca9ebcc
--- /dev/null
+++ "b/pages/home/index - \345\211\257\346\234\254.vue"
@@ -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>
\ No newline at end of file
diff --git a/pages/home/index.vue b/pages/home/index.vue
index a20f610..78401bc 100644
--- a/pages/home/index.vue
+++ b/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>
\ No newline at end of file
diff --git "a/pages/user/center - \345\211\257\346\234\254.vue" "b/pages/user/center - \345\211\257\346\234\254.vue"
new file mode 100644
index 0000000..a68d88d
--- /dev/null
+++ "b/pages/user/center - \345\211\257\346\234\254.vue"
@@ -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>
\ No newline at end of file
diff --git a/pages/user/center.vue b/pages/user/center.vue
index 67e2000..d1d33e7 100644
--- a/pages/user/center.vue
+++ b/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>
\ No newline at end of file
diff --git a/subPackage/user/components/roleList.vue b/subPackage/user/components/roleList.vue
new file mode 100644
index 0000000..f484e7f
--- /dev/null
+++ b/subPackage/user/components/roleList.vue
@@ -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>
\ No newline at end of file
diff --git a/subPackage/user/role/index.vue b/subPackage/user/role/index.vue
new file mode 100644
index 0000000..0b59059
--- /dev/null
+++ b/subPackage/user/role/index.vue
@@ -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>
\ No newline at end of file

--
Gitblit v1.9.3