智慧矿山uni-app

App.vue

@@ -0,0 +1,22 @@
+<script>
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+			// 锁定横屏  
+			// plus.screen.lockOrientation("landscape-primary");  
+			// 锁定竖屏  
+			plus.screen.lockOrientation("portrait-primary");  
+			
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style>
+	/*每个页面公共css */
+</style>

common/http.js

@@ -0,0 +1,7 @@
+//引用request.js
+var request = require('./request.js')
+
+//调用方法 👇 我把url放在单独的js 这样方面后续管理
+var getToken = function(){
+	return request.getRequest('/notice/list');
+}

common/request.js

@@ -0,0 +1,70 @@
+// 请求接口
+const commoneUrl = "http://colliery.nxjiewei.com/api";
+
+//get请求封装
+function getRequest(url,data){
+	var promise = new Promise((resolve,reject) => {
+			var postData = data;
+			uni.request({
+				url:commoneUrl + url,
+				data:postData,
+				method:"GET",
+				dataType:'json',
+				header:{
+					'content-type': 'application/json'
+				},
+				success:function(res){
+					if(res.statusCode === 200)
+					{
+						resolve(res.data);
+					}else{
+						resolve(res.data)
+					}
+				},
+				error:function(e)
+				{
+					reject('网络出错');
+				}
+			});
+	});
+	return promise;
+}
+//其实这里你不用var 可以直接return 只是我在写的时候为了方便自己看的习惯
+
+//post请求封装
+function postRequest(url,data){
+	var promise = new Promise((resolve,reject) => {
+		var postData = data;
+		uni.request({
+			url:commoneUrl + url,
+			data:postData,
+			method:'POST',
+			header:{
+				//自定义请求头信息
+				'Content-Type': 'application/x-www-form-urlencoded', 
+				//登录token,
+				'Authorization': localStorage.getItem('token_type') + localStorage.getItem('Authorization') 
+			},
+			success:function(res)
+			{
+				if(res.statusCode === 200 && res.data.resultCode == 0)
+				{
+					resolve(res.data);
+				}else{
+					resolve(res.data)
+				}
+			},
+			error:function(e)
+			{
+				reject('网络出错');
+			}
+		})
+	});
+	return promise;
+}
+
+export{
+	postRequest,
+	getRequest
+}
+	

components/Y-Steps/Y-Steps.vue

@@ -0,0 +1,236 @@
+<template>
+	<!-- 获取一个数组，结构为[{date:'时间',info:'内容内容'}] -->
+	<!-- @click事件返回点击标签元素的索引值 第一项为0 -->
+	<view class="bg">
+		<view class="steps">
+			<view class="steps_item" v-for="(i, index) in infoList">
+				<view class="s_r">
+					<view class="line" :style="{backgroundColor:index != 0?backgroundColor:'rgba(0,0,0,0)'}"></view>
+					<view class="index" :style="{backgroundColor:backgroundColor,color:color}">
+						{{ index + 1 }}
+					</view>
+					<view class="line" :style="{backgroundColor:index != infoList.length-1?backgroundColor:'rgba(0,0,0,0)'}"></view>
+				</view>
+				<view class="s_l">
+					<view class="info_item" @tap="topage(index)">
+						<view class="label">
+							{{ i.date }}:
+							<text>
+								开发者
+							</text>
+						</view>
+						<view class="inner">{{ i.info }}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'YSteps',
+		props: {
+			infoList: {
+				type: Array,
+				default: []
+			},
+			color: {
+				type: String,
+				default: '#fff'
+			},
+			backgroundColor: {
+				type: String,
+				default: '#ff3838'
+			}
+		},
+		data() {
+			return {};
+		},
+		onLoad(e) {
+			//获取列表
+		},
+		methods: {
+			topage(e) {
+				this.$emit('click', e);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.bg {
+		// margin: 20upx 0;
+		// background-color: #f2f2f2;
+		display: flex;
+	}
+
+	.steps {
+		display: flex;
+		flex-direction: column;
+
+		.steps_item {
+			display: flex;
+
+			.s_r {
+				padding: 0 20rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.line {
+					flex: 1;
+					width: 5rpx;
+					background-color: #fff;
+				}
+
+				.index {
+					width: 40rpx;
+					height: 40rpx;
+					font-size: 12px;
+					text-align: center;
+					line-height: 40rpx;
+					border-radius: 50rpx;
+				}
+			}
+
+			.s_l {
+				display: flex;
+				flex-direction: column;
+				padding: 20rpx 0;
+
+				.info_item {
+					background-color: #FFFFFF;
+					margin-right: 30upx;
+					border-radius: 10upx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					padding: 30upx;
+					box-shadow: 0 10rpx 30rpx #ddd;
+
+					.label {
+						font-size: 14px;
+						font-weight: 500;
+						color: rgba(51, 51, 51, 1);
+						line-height: 25px;
+						text{
+							background-color: #009FE8;
+							color: #fff;
+							padding: 4px;
+							border-radius: 4px;
+							margin-left: 10px;
+							font-size: 12px;
+						}
+					}
+
+					.inner {
+						font-size: 14px;
+						font-weight: 400;
+						color: rgba(102, 102, 102, 1);
+						line-height: 20px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+
+						flex-direction: column;
+						
+						margin-top: 10px;
+						border: 1px solid #2ECC71;
+						color: #2ECC71;
+						padding: 10px;
+					}
+				}
+
+				.info_item:active {
+					background-color: #f4f4f4;
+				}
+			}
+		}
+	}
+
+
+	// .steps {
+	// 	display: flex;
+	// 	flex-direction: column;
+	// 	margin: 0 30upx;
+
+	// 	.steps_item {
+	// 		display: flex;
+	// 		align-items:center ;
+	// 		background-color: #fff;
+	// 		margin-top: 10rpx;
+	// 		.s_r {
+	// 			display: flex;
+	// 			flex-direction: column;
+	// 			align-items: center;
+	// 			height: 100%;
+	// 			background-color: #f3f;
+	// 			flex: 1;
+	// 			view {
+	// 				height: 100%;
+	// 				display: flex;
+	// 				flex: 1;
+	// 				height: 100%;
+	// 				width: 5upx;
+	// 			}
+
+	// 			text {
+	// 				display: flex;
+	// 				flex-direction: column;
+	// 				align-items: center;
+	// 				width: 40upx;
+	// 				line-height: 40upx;
+	// 				height: 40upx;
+	// 				border-radius: 50%;
+	// 				background-color: #ff3838;
+	// 				color: #ffffff;
+	// 				font-size: 10px;
+	// 			}
+	// 		}
+	// 	}
+	// }
+
+	// .info_list {
+	// 	display: flex;
+	// 	flex-direction: column;
+	// 	flex: 1;
+
+	// 	.info_item {
+	// 		background-color: #fff;
+	// 		height: 200upx;
+	// 		margin: 20upx 0;
+	// 		margin-right: 30upx;
+	// 		border-radius: 10upx;
+	// 		display: flex;
+	// 		flex-direction: column;
+	// 		justify-content: center;
+	// 		padding: 0 30upx;
+
+	// 		text {
+	// 			font-size: 18px;
+	// 			font-family: PingFangSC-Medium, PingFang SC;
+	// 			font-weight: 500;
+	// 			color: rgba(51, 51, 51, 1);
+	// 			line-height: 25px;
+	// 		}
+
+	// 		view {
+	// 			font-size: 14px;
+	// 			font-family: PingFangSC-Regular, PingFang SC;
+	// 			font-weight: 400;
+	// 			color: rgba(102, 102, 102, 1);
+	// 			line-height: 20px;
+	// 			overflow: hidden;
+	// 			text-overflow: ellipsis;
+	// 			display: -webkit-box;
+	// 			-webkit-line-clamp: 2;
+	// 			flex-direction: column;
+	// 		}
+	// 	}
+
+	// 	.info_item:active {
+	// 		opacity: 0.6;
+	// 	}
+	// }
+</style>

components/i-banner/i-banner.vue

@@ -0,0 +1,78 @@
+<template>
+	<view class="banner" :style="{marginTop: bannerMarginTop + 'px'}">
+		<swiper class="banner_box" autoplay circular>
+			<swiper-item v-for="item in banners" :key="item.id">
+				<view class="banner_item">
+					<view class="banner_item_img">
+						<image :src="item.imgURL" mode=""></image>
+					</view>
+					<view class="banner_item_title">
+						<text>{{item.title}}</text>
+					</view>
+				</view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"banners"
+		],
+		
+		data() {
+			return {
+				bannerMarginTop:0,
+				
+			};
+		},
+		created() {
+			// 获取手机系统信息
+			const info = uni.getSystemInfoSync()
+			// 设置偏移高度
+			const MarginTop = 90 - info.statusBarHeight
+			this.bannerMarginTop = - MarginTop
+			
+		
+		}
+	}
+</script>
+
+<style lang="scss">
+	.banner{
+		margin: 0 auto;
+		margin-top: -90px;
+		width: 700rpx;
+		height: 404rpx;
+		border-radius: 16rpx;
+		overflow: hidden;
+		.banner_box{
+			width: 700rpx;
+			height: 404rpx;
+			.banner_item{
+				position: relative;
+				.banner_item_img{
+					width: 700rpx;
+					height: 404rpx;
+					image{
+						width:100%;
+						height:100%;
+					}
+				}
+				.banner_item_title{
+					position: absolute;
+					left: 18rpx;
+					bottom: 18rpx;
+					height: 33rpx;
+					font-size: 25rpx;
+					font-family: $font-basic;
+					color: #FFFFFF;
+					line-height: 33rpx;
+
+				}
+				
+			}
+		}
+	}
+</style>

components/i-block-list/i-block-list.vue

@@ -0,0 +1,124 @@
+<template>
+	<view>
+		<view class="line"></view>
+		
+		<view class="block_box" v-for="(box,index) in blocksList" :key="index">
+			<view class="block_title">
+				<view class="icon"></view>
+				<view class="name">{{box.title}}</view>
+			</view>
+			<view class="block_inner">
+				<view class="inner_list">
+					<view class="item" v-for="item in box.children">
+						<view class="item_border" @click="go_block_detail(item.link)">
+							<view class="name">
+								<text>{{item.title}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"blocksList"
+		],
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			go_block_detail(href){
+				console.log(href)
+				uni.navigateTo({
+					url:"../../i-block-detail/i-block-detail",
+					success: function(res) {
+						// 通过eventChannel向被打开页面传送数据
+						res.eventChannel.emit('acceptDataFromOpenerPage', { href: href })
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.line{
+		width: 100%;
+		height: 6rpx;
+		background-color: #F0F0F0;
+	}
+	.block_box{
+		box-sizing: border-box;
+		padding-top: 34rpx;
+		padding-left: 42rpx;
+		padding-right: 68rpx;
+		padding-bottom: 20rpx;
+		
+		border-bottom: 1rpx solid #eee;
+		.block_title{
+			display: flex;
+			.icon{
+				margin-right: 16rpx;
+				width: 52rpx;
+				height: 52rpx;
+				background-image: url(icon/icon_title.png);
+				background-size: cover;
+				background-repeat: no-repeat;
+			}
+			.name{
+				height: 52rpx;
+				font-size: 37rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #121212;
+				line-height: 52rpx;
+				text-shadow: 0px 2rpx 6rpx rgba(0, 0, 0, 0.5);
+
+			}
+		}
+		.block_inner{
+			margin-top: 25rpx;
+			.inner_list{
+				display: flex;
+				flex-wrap: wrap;
+				// justify-content: space-between;
+				.item{
+					margin-bottom: 16rpx;
+					margin-right: 17rpx;
+					width: 144rpx;
+					height: 82rpx;
+					border-radius: 26rpx;
+					border: 2rpx solid #4AA0D5;
+
+					.item_border{
+						width: 138rpx;
+						height: 78rpx;
+						background: #FFFFFF;
+						border-radius: 20rpx;
+						// border: 2rpx solid #D5D5DB;
+
+						.name{
+							text-align: center;
+							height: 82rpx;
+							font-size: 20rpx;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #009FE8;
+							line-height: 82rpx;
+
+						}
+					}
+				}
+				.item:nth-child(4n){
+					margin-right: 0;
+				}
+			}
+		}
+	}
+</style>

components/i-nav-list/i-nav-list.vue

@@ -0,0 +1,91 @@
+<template>
+	<view>
+		<view class="line"></view>
+		
+		<view class="icon_nav">
+			<view class="nav_list">
+				
+				<view class="item" v-for="item in navsList" :key="item.id" @click="go_detail(item.link,item.id)">
+					<view class="item_icon">
+						<image :src="item.icon"></image>
+					</view>
+					<view class="item_name">
+						<text>{{item.title}}</text>
+					</view>
+				</view>
+				
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"navsList"
+		],
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			go_detail(link,id){
+				const href = link + id
+				console.log(href)
+				
+				uni.navigateTo({
+					url:"../../i-nav-detail/i-nav-detail",
+					success: function(res) {
+						// 通过eventChannel向被打开页面传送数据
+						res.eventChannel.emit('acceptDataFromOpenerPage', { href: href })
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.line{
+		width: 100%;
+		height: 6rpx;
+		background-color: #F0F0F0;
+	}
+	.icon_nav{
+		box-sizing: border-box;
+		padding-top: 24rpx;
+		padding-left: 55rpx;
+		padding-right: 55rpx;
+		.nav_list{
+			overflow: hidden;
+			.item{
+				float: left;
+				width: 160rpx;
+				text-align: center;
+				margin-bottom: 42rpx;
+				.item_icon{
+					margin: 0 auto;
+					width: 94rpx;
+					height: 94rpx;
+					image{
+						width: 94rpx;
+						height: 94rpx;
+					}
+				}
+				.item_name{
+					margin-top: 18rpx;
+					height: 34rpx;
+					font-size: 25rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #455A64;
+					line-height: 34rpx;
+
+				}
+			}
+		}
+		
+	}
+</style>

components/i-navbar/i-navbar.vue

@@ -0,0 +1,109 @@
+<template>
+	<view>
+		<view class="fixed">
+			<view class="navbar">
+				<view :style="{height:statusBarHeight + 'px'}">
+					<!-- 这里是状态栏 -->
+				</view>
+				<view class="inner">
+					<view class="search_box">
+						<view class="search_icon"></view>
+						<view class="search_text">搜索</view>
+					</view>
+					<view class="right_icon" @click="scan_code()"></view>
+				</view>
+			</view>
+		</view>
+		<!-- 占位符 -->
+		<view :style="{height: statusBarHeight + 'px'}"></view>
+		<view style="height: 93rpx;"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				statusBarHeight: 20,
+			};
+		},
+		created() {
+			// 获取手机系统信息
+			const info = uni.getSystemInfoSync()
+			// 设置状态栏高度
+			this.statusBarHeight = info.statusBarHeight
+			
+		},
+		onLoad() {
+			
+		},
+		methods:{
+			scan_code(){
+				// 允许从相机和相册扫码
+				uni.scanCode({
+				    success: function (res) {
+				        console.log('条码类型：' + res.scanType);
+				        console.log('条码内容：' + res.result);
+				    }
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.fixed{
+		position: fixed;
+		top: 0;
+		left: 0;
+		
+		background-image: url(../../static/top_1.png);
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		z-index: 999;
+	}
+	.navbar{
+		padding-top: 10rpx;
+		box-sizing: border-box;
+		padding-left: 28rpx;
+		padding-right: 28rpx;
+		padding-bottom: 10rpx;
+		.inner{
+			display: flex;
+			.search_box{
+				width: 617rpx;
+				height: 66rpx;
+				background: rgba(255, 255, 255, 0.2);
+				border-radius: 34rpx;
+				display: flex;
+				.search_icon{
+					margin-top: 17rpx;
+					margin-left: 38rpx;
+					width: 34rpx;
+					height: 34rpx;
+					background-image: url(icon/search.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+				.search_text{
+					margin-left: 14rpx;
+					line-height: 66rpx;
+					font-size: 24rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #FFFFFF;
+				}
+				
+			}
+			
+			.right_icon{
+				margin-left: 30rpx;
+				width: 50rpx;
+				height: 73rpx;
+				background-image: url(icon/saoma.png);
+				background-size: cover;
+				background-repeat: no-repeat;
+			}
+		}
+	}
+</style>

components/i-news-list/i-news-list.vue

@@ -0,0 +1,133 @@
+<template>
+	<view class="news_box">
+		<view class="news_box_title">
+			<view class="title">
+				<view class="icon"></view>
+				<view class="name">
+					<text>新闻动态</text>
+				</view>
+			</view>
+			<view class="more" @click="go_newsList()">
+				<text>更多</text>
+			</view>
+		</view>
+		<view class="news_inner">
+			<view class="inner_list">
+				<view class="item" v-for="item in newsList" :key="item.id">
+					<view class="item_img">
+						<image :src="item.main_img"></image>
+					</view>
+					<view class="item_title">
+						<text>{{item.title}}</text>
+					</view>
+				</view>
+				
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"newsList"
+		],
+		
+		
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			go_newsList(){
+				uni.navigateTo({
+					url:"../../i-newsList/i-newsList",
+					animationType:"fade-in",
+					animationDuration:300
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.news_box{
+		margin-top: 19rpx;
+		box-sizing: border-box;
+		padding-left: 44rpx;
+		padding-right: 41rpx;
+		.news_box_title{
+			display: flex;
+			justify-content: space-between;
+			.title{
+				display: flex;
+				.icon{
+					width: 52rpx;
+					height: 52rpx;
+					background-image: url(icon/icon_news.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+				.name{
+					margin-left: 16rpx;
+					height: 52rpx;
+					font-size: 38rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #121212;
+					line-height: 52rpx;
+
+				}
+			}
+			.more{
+				margin-top: 12rpx;
+				height: 34rpx;
+				font-size: 25rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #6C6F74;
+				line-height: 34rpx;
+
+			}
+		}
+		.news_inner{
+			margin-top: 23rpx;
+			padding-bottom: 10rpx;
+			.inner_list{
+				.item{
+					margin-bottom: 24rpx;
+					display: flex;
+					justify-content: space-between;
+					.item_img{
+						width: 188rpx;
+						height: 105rpx;
+						border-radius: 2rpx;
+						image{
+							width: 188rpx;
+							height: 105rpx;
+						}
+					}
+					.item_title{
+						padding-top: 18rpx;
+						width: 456rpx;
+						height: 62rpx;
+						font-size: 23rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #121212;
+						line-height: 31rpx;
+						text-overflow: -o-ellipsis-lastline;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-line-clamp: 2;
+						line-clamp: 2;
+						-webkit-box-orient: vertical;
+				
+					}
+				}
+			}
+		}
+	}
+</style>

components/i-notice/i-notice.vue

@@ -0,0 +1,84 @@
+<template>
+	<view>
+		<view class="notice">
+			<view class="notice_title">
+				<view class="notice_title_icon"></view>
+				<view class="notice_title_text">
+					<text>{{notice.title}}</text>
+				</view>
+			</view>
+			<view class="notice_content">
+				<swiper class="scroll" autoplay vertical circular interval="3000">
+					<!-- <swiper-item>
+						<view class="swiper-item">
+							<text v-html="notice.message"></text>
+						</view>
+					</swiper-item> -->
+					<swiper-item v-for="item in notice.message" :key="item.id">
+						<view class="swiper-item">
+							<text v-html="item"></text>
+						</view>
+					</swiper-item>
+				</swiper>
+				
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"notice"
+		],
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.notice{
+		
+		margin-top: 22rpx;
+		box-sizing: border-box;
+		padding-left: 44rpx;
+		.notice_title{
+			height: 50rpx;
+			display: flex;
+			
+			.notice_title_icon{
+				width: 52rpx;
+				height: 52rpx;
+				background-image: url(icon/notice.png);
+				background-size: cover;
+				background-repeat: no-repeat;
+				margin-right: 20rpx;
+			}
+			.notice_title_text{
+				height: 52rpx;
+				font-size: 38rpx;
+				font-family:$font-basic;
+				font-weight: 500;
+				color: #FFFFFF;
+				line-height: 52rpx;
+
+			}
+		}
+		.notice_content{
+			margin-top: 12rpx;
+			width: 666rpx;
+			height: 114rpx;
+			font-size: 29rpx;
+			font-family: $font-basic;
+			font-weight: 500;
+			color: #FFFFFF;
+			line-height: 50rpx;
+			.scroll{
+				height: 114rpx;
+			}
+		}
+	}
+</style>

components/i-null-bottom/i-null-bottom.vue

@@ -0,0 +1,37 @@
+<template>
+	<view>
+		<view class="line"></view>
+		<view class="null">
+			<text>—  到底啦 —</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.line{
+		width: 100%;
+		height: 6rpx;
+		background-color: #F0F0F0;
+	}
+	.null{
+		margin-top: 30rpx;
+		margin-bottom: 120rpx;
+		text-align: center;
+		height: 36rpx;
+		font-size: 28rpx;
+		font-family: MicrosoftYaHei;
+		color: #9B9B9B;
+		line-height: 36rpx;
+
+	}
+</style>

components/m-icon/m-icon.vue

@@ -0,0 +1,190 @@
+<template>
+	<view>
+		<view class="icons">
+			<view class="list_item">
+				
+				<view class="item" @click="go_w_infolist()">
+					<view class="item_icon">
+						<image src="./icon/icon_1.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>消息提醒</text>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="item_icon">
+						<image src="./icon/icon_2.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>收藏</text>
+					</view>
+				</view>
+				
+				<view class="item" @click="go_m_worksheet()">
+					<view class="item_icon">
+						<image src="./icon/icon_3.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>工单审核</text>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="item_icon">
+						<image src="./icon/icon_4.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>学习积分</text>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="item_icon">
+						<image src="./icon/icon_5.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>积分商城</text>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="item_icon">
+						<image src="./icon/icon_6.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>学习报表</text>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="item_icon">
+						<image src="./icon/icon_7.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>个人云盘</text>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="item_icon">
+						<image src="./icon/icon_8.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>使用手册</text>
+					</view>
+				</view>
+				
+				<view class="item" @click="tell()">
+					<view class="item_icon">
+						<image src="./icon/icon_9.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>服务电话</text>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="item_icon">
+						<image src="./icon/icon_10.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>建议反馈</text>
+					</view>
+				</view>
+				
+				<view class="item">
+					<view class="item_icon" @click="go_download()">
+						<image src="./icon/icon_11.png" mode=""></image>
+					</view>
+					<view class="item_name">
+						<text>下载二维码</text>
+					</view>
+				</view>
+				
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			go_download(){
+				uni.navigateTo({
+					url:"../../m-download/m-download"
+				})
+			},
+			tell(){
+				uni.makePhoneCall({
+				    phoneNumber: '18152480670' //仅为示例
+				});
+			},
+			go_w_infolist(){
+				uni.navigateTo({
+				    url: '../../w-infolist/w-infolist',
+				    animationType: 'fade-in',
+				    animationDuration: 200
+				});
+			},
+			go_m_worksheet(){
+				uni.navigateTo({
+				    url: '../../m-worksheet/m-worksheet',
+				    animationType: 'fade-in',
+				    animationDuration: 200
+				});
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	.icons{
+		box-sizing: border-box;
+		padding-top: 34rpx;
+		padding-left: 38rpx;
+		padding-right: 38rpx;
+		
+		.list_item{
+			overflow: hidden;
+			
+			.item{
+				float: left;
+				margin-right: 86rpx;
+				margin-bottom: 44rpx;
+				.item_icon{
+					width: 166rpx;
+					height: 86rpx;
+					text-align: center;
+					image{
+						width: 90rpx;
+						height: 90rpx;
+					}
+				}
+				.item_name{
+					margin-top: 10rpx;
+					width: 166rpx;
+					height: 42rpx;
+					font-size: 29rpx;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #232627;
+					line-height: 42rpx;
+					
+					text-align: center;
+
+				}
+			}
+			.item:nth-child(3n){
+				margin-right: 0;
+			}
+		}
+	}
+</style>

components/m-info/m-info.vue

@@ -0,0 +1,192 @@
+<template>
+	<view>
+		<view class="bg_color"></view>
+		
+		<view class="content">
+			
+			<view class="user">
+				<view class="user_left">
+					<view class="user_img" @click="go_personal()">
+						<image src="./icon/user_img.png" mode=""></image>
+					</view>
+					<view class="user_info">
+						<view class="name">
+							<view class="name_text">{{user.name}}</view>
+							<view class="name_icon">
+								<image src="./icon/name_icon.png" mode=""></image>
+							</view>
+						</view>
+						<view class="tips">{{user.section}}</view>
+					</view>
+				</view>
+				<view class="user_right">
+					<uni-icons type="forward"></uni-icons>
+				</view>
+				
+			</view>
+			
+			<view class="warning">
+				<view class="warning_icon"></view>
+				<view class="warning_text">未绑定手机号，请立即绑定手机号。</view>
+			</view>
+			
+			<view class="warning">
+				<view class="warning_icon"></view>
+				<view class="warning_text">未添加手写签名，请添加手写签名。</view>
+			</view>
+			
+			
+		</view>
+		
+		
+	</view>
+</template>
+
+<script>
+	
+	export default {
+		props:{
+			user:{
+				type:Object,
+				default(){
+					return{}
+				}
+			}
+		},
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			go_personal(){
+				uni.navigateTo({
+					url: '../../m-personal/m-personal',
+					animationType:"fade-in",
+					animationDuration:200
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.bg_color{
+		height: 100rpx;
+		background: #009FE8;
+	}
+	.content{
+		padding: 0 30rpx;
+		.user{
+			margin-top: -75rpx;
+			margin-bottom: 6rpx;
+			
+			height: 163rpx;
+			background: #FFFFFF;
+			box-shadow: 0px 0px 5rpx 5rpx rgba(0, 0, 0, 0.05);
+			border-radius: 5rpx;
+			
+			display: flex;
+			justify-content: space-between;
+			
+			box-sizing: border-box;
+			padding-top: 13rpx;
+			padding-bottom: 18rpx;
+			padding-left: 16rpx;
+			padding-right: 33rpx;
+			
+			.user_left{
+				display: flex;
+				
+				.user_img{
+					width: 132rpx;
+					height: 132rpx;
+					image{
+						width: 132rpx;
+						height: 132rpx;
+					}
+				}
+				.user_info{
+					margin-left: 13rpx;
+					
+					box-sizing: border-box;
+					padding-top: 18rpx;
+					
+					.name{
+						display: flex;
+						.name_text{
+							height: 52rpx;
+							font-size: 38rpx;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #232627;
+							line-height: 52rpx;
+
+						}
+						.name_icon{
+							margin-left: 10rpx;
+							margin-top: 7rpx;
+							
+							width: 38rpx;
+							height: 38rpx;
+							image{
+								width: 38rpx;
+								height: 38rpx;
+							}
+						}
+					}
+					.tips{
+						margin-top: 8rpx;
+						
+						height: 40rpx;
+						font-size: 27rpx;
+						font-family: PingFangSC-Medium, PingFang SC;
+						font-weight: 500;
+						color: #232627;
+						line-height: 40rpx;
+
+
+					}
+				}
+			}
+			.user_right{
+				line-height: 132rpx;
+			}
+		}
+		.warning{
+			margin-top: 10rpx;
+			height: 91rpx;
+			background: #FFFFFF;
+			box-shadow: 0px 0px 5rpx 5rpx rgba(0, 0, 0, 0.05);
+			border-radius: 5rpx;
+			
+			display: flex;
+			
+			box-sizing: border-box;
+			padding-left: 19rpx;
+			padding-top: 22rpx;
+			
+			
+			.warning_icon{
+				width: 45rpx;
+				height: 45rpx;
+				
+				background-image: url(icon/warning_icon.png);
+				background-size: cover;
+				background-repeat: no-repeat;
+			}
+			.warning_text{
+				margin-left: 12rpx;
+				
+				height: 45rpx;
+				font-size: 29rpx;
+				font-family: MicrosoftYaHei;
+				color: #7F8C8D;
+				line-height: 45rpx;
+
+			}
+		}
+		
+		
+	}
+</style>

components/m-list/m-list.vue

@@ -0,0 +1,128 @@
+<template>
+	<view>
+		<view class="line"></view>
+		
+		<view class="list_item">
+			<view class="item" @click="repassword()">
+				<view class="item_left">
+					<view class="icon">
+						<image src="./icon/list_1.png" mode=""></image>
+					</view>
+					<view class="name">修改密码</view>
+				</view>
+				<view class="item_right">
+					<uni-icons type="arrowright" color="#BDC3C7"></uni-icons>
+				</view>
+			</view>
+			<view class="item" @click="user_out()">
+				<view class="item_left">
+					<view class="icon">
+						<image src="./icon/list_2.png" mode=""></image>
+					</view>
+					<view class="name">退出登陆</view>
+				</view>
+				<view class="item_right">
+					<uni-icons type="arrowright" color="#BDC3C7"></uni-icons>
+				</view>
+			</view>
+			<view class="item">
+				<view class="item_left">
+					<view class="icon">
+						<image src="./icon/list_3.png" mode=""></image>
+					</view>
+					<view class="name">更新日志</view>
+				</view>
+				<view class="item_right">
+					<uni-icons type="arrowright" color="#BDC3C7"></uni-icons>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			user_out:function(){
+				// uni.showToast({
+				// 	icon:"none",
+				// 	title:"退出登录"
+				// })
+				
+				uni.removeStorage({
+				    key: 'Authorization',
+				    success: function (res) {
+				        console.log('success');
+				    }
+				});
+				
+				
+				
+				// 调用全局封装的函数
+				// var loginRes = 
+				// if(!loginRes){return false;}
+				this.checkLogin(); 
+				
+			},
+			repassword(){
+				uni.navigateTo({
+					url:"../../m-repassword/m-repassword"
+				})
+			}
+		
+		}
+	}
+</script>
+
+<style lang="scss">
+	.line{
+		margin: 0 30rpx;
+		height: 8rpx;
+		background: #009FE8;
+
+	}
+	.list_item{
+		margin-bottom: 140rpx;
+		padding: 0 30rpx;
+		.item{
+			height: 94rpx;
+			box-sizing: border-box;
+			padding-left: 20rpx;
+			padding-top: 24rpx;
+			display: flex;
+			justify-content: space-between;
+			
+			.item_left{
+				display: flex;
+				.icon{
+					margin-top: 5rpx;
+					height: 47rpx;
+					
+					image{
+						width: 38rpx;
+						height: 38rpx;
+					}
+				}
+				.name{
+					margin-left: 14rpx;
+					height: 47rpx;
+					font-size: 33rpx;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #333333;
+					line-height: 47rpx;
+
+				}
+			}
+			.item_right{
+				// color: #BDC3C7;
+			}
+		}
+	}
+</style>

components/p-Gas/p-Gas.vue

@@ -0,0 +1,100 @@
+<template>
+	<view>
+		<view class="content">
+			<view class="title">瓦斯异常情况</view>
+			<view class="content_inner">
+				<view class="list_item">
+					<view class="item">
+						<view class="name">报警</view>
+						<view class="num">0个</view>
+						<view class="icon">
+							<image src="./icon/p_gas_1.png" mode=""></image>
+						</view>
+					</view>
+					<view class="item">
+						<view class="name">断电</view>
+						<view class="num">0个</view>
+						<view class="icon">
+							<image src="./icon/p_gas_2.png" mode=""></image>
+						</view>
+					</view>
+					<view class="item">
+						<view class="name">故障</view>
+						<view class="num">0个</view>
+						<view class="icon">
+							<image src="./icon/p_gas_3.png" mode=""></image>
+						</view>
+					</view>
+					
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		margin-top: 15rpx;
+		background: #FFFFFF;
+		border-radius: 31rpx;
+
+		.title{
+			text-align: center;
+			line-height: 97rpx;
+			border-bottom: 2rpx solid #f3f3f3;
+			
+			font-size: 29rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #232627;
+
+		}
+		.content_inner{
+			box-sizing: border-box;
+			padding: 30rpx 58rpx;
+			.list_item{
+				display: flex;
+				justify-content: space-between;
+				.item{
+					width: 84rpx;
+					text-align: center;
+					.name{
+						font-size: 29rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #232627;
+						line-height: 42rpx;
+
+					}
+					.num{
+						margin-top: 28rpx;
+						
+						font-size: 29rpx;
+						font-family: PingFangSC-Medium, PingFang SC;
+						font-weight: 500;
+						color: #232627;
+						line-height: 42rpx;
+
+					}
+					.icon{
+						margin-top: 27rpx;
+						image{
+							width: 84rpx;
+							height: 84rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

components/p-alarm/p-alarm.vue

@@ -0,0 +1,98 @@
+<template>
+	<view>
+		<view class="content">
+			<view class="title">安全报警</view>
+			<view class="content_inner">
+				<view class="list_item">
+					<view class="item">
+						<view class="item_name">一级报警</view>
+						<view class="item_icon">1个</view>
+					</view>
+					<view class="item">
+						<view class="item_name">二级报警</view>
+						<view class="item_icon icon2">3个</view>
+					</view>
+					<view class="item">
+						<view class="item_name">三级报警</view>
+						<view class="item_icon icon3">0个</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		margin-top: 15rpx;
+		background: #FFFFFF;
+		border-radius: 31rpx;
+
+		.title{
+			text-align: center;
+			line-height: 97rpx;
+			border-bottom: 2rpx solid #f3f3f3;
+			
+			font-size: 29rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #232627;
+		}
+		.content_inner{
+			box-sizing: border-box;
+			padding: 38rpx 44rpx;
+			.list_item{
+				display: flex;
+				justify-content: space-between;
+				
+				.item{
+					width: 139rpx;
+					text-align: center;
+					.item_name{
+						height: 42rpx;
+						font-size: 29rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #232627;
+						line-height: 42rpx;
+
+					}
+					.item_icon{
+						margin: 0 auto;
+						margin-top: 19rpx;
+						width: 125rpx;
+						height: 125rpx;
+						background: #E74C3C;
+						border-radius: 50%;
+						line-height: 125rpx;
+						color: #fff;
+						
+						font-size: 30rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+
+
+					}
+					.icon2{
+						background: #E67E22;
+
+					}
+					.icon3{
+						background: #3498DB;
+
+					}
+				}
+			}
+		}
+	}
+</style>

components/p-i-704-section-1/p-i-704-section-1.vue

@@ -0,0 +1,142 @@
+<template>
+	<view>
+		<view class="content">
+			<view class="img">
+				<image src="./icon/top.png" mode=""></image>
+			</view>
+			<view class="inner">
+				枣泉煤矿220704智能开采工作面为国家2030重点科研攻关项目和国家能源集团重点建设的20个智能化工作面之一，工作面可采走向长度1590米，倾向长度284.6米，煤层平均厚度2.35米，平均倾角13.4°，预计回采原煤153.87万吨左右。项目启动以来，枣泉矿从严把控前期规程技术措施编制、安装设计、自动化技…
+			</view>
+			
+			<view class="icon_nav">
+				<view class="nav_list">
+					<view class="item">
+						<view class="icon">
+							<image src="./icon/nav_1.png" mode=""></image>
+						</view>
+						<view class="name">区队概况</view>
+					</view>
+					<view class="item">
+						<view class="icon">
+							<image src="./icon/nav_2.png" mode=""></image>
+						</view>
+						<view class="name">安全管理</view>
+					</view>
+					<view class="item">
+						<view class="icon">
+							<image src="./icon/nav_3.png" mode=""></image>
+						</view>
+						<view class="name">管理制度</view>
+					</view>
+					<view class="item">
+						<view class="icon">
+							<image src="./icon/nav_4.png" mode=""></image>
+						</view>
+						<view class="name">绩效管理</view>
+					</view>
+					<view class="item">
+						<view class="icon">
+							<image src="./icon/nav_5.png" mode=""></image>
+						</view>
+						<view class="name">智慧培训</view>
+					</view>
+					<view class="item">
+						<view class="icon">
+							<image src="./icon/nav_6.png" mode=""></image>
+						</view>
+						<view class="name">技术管理</view>
+					</view>
+					<view class="item">
+						<view class="icon">
+							<image src="./icon/nav_7.png" mode=""></image>
+						</view>
+						<view class="name">创新管理</view>
+					</view>
+					<view class="item">
+						<view class="icon">
+							<image src="./icon/nav_8.png" mode=""></image>
+						</view>
+						<view class="name">人员信息</view>
+					</view>
+					
+				</view>
+			</view>
+		
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		width: 720rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
+		border-radius: 21rpx;
+		
+		box-sizing: border-box;
+		padding: 30rpx;
+		.img{
+			width: 100%;
+			height: 334rpx;
+			image{
+				width: 100%;
+				height: 334rpx;
+			}
+		}
+		.inner{
+			margin-top: 22rpx;
+			text-indent: 2rem;
+			font-size: 27rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #232627;
+			line-height: 38rpx;
+		}
+		.icon_nav{
+			margin: 0 auto;
+			width: 600rpx;
+			.nav_list{
+				margin-top: 36rpx;
+				overflow: hidden;
+				.item{
+					width: 136rpx;
+					text-align: center;
+					float: left;
+					
+					margin-bottom: 24rpx;
+					margin-right: 18rpx;
+					.icon{
+						
+						image{
+							width: 94rpx;
+							height: 94rpx;
+						}
+					}
+					.name{
+						margin-top: 10rpx;
+						font-size: 29rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #455A64;
+						line-height: 42rpx;
+
+					}
+				}
+				.item:nth-child(4n){
+					margin-right: 0;
+				}
+			}
+		}
+	
+	}
+</style>

components/p-i-704-section-2/p-i-704-section-2.vue

@@ -0,0 +1,52 @@
+<template>
+	<view>
+		<view class="section">
+			<view class="box">
+				<view class="title">
+					今日产量
+				</view>
+				<view class="content">
+					<slot></slot>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.section{
+		margin-top: 10rpx;
+		
+		.box{
+			background: #FFFFFF;
+			box-shadow: 0px 3rpx 30rpx 0px rgba(59, 74, 116, 0.14);
+			border-radius: 21rpx;
+	
+			.title{
+				width: 720rpx;
+				
+				font-size: 32rpx;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #232627;
+				line-height: 100rpx;
+				text-align: center;
+				
+				border-bottom: 2rpx solid #f3f3f3;
+			}
+			.content{
+				min-height: 200rpx;
+			}
+		}
+	}
+</style>

components/p-i-704-section-3/p-i-704-section-3.vue

@@ -0,0 +1,214 @@
+<template>
+	<view>
+		<view class="section">
+			<view class="box">
+				<view class="title">
+					<view class="icon"></view>
+					<view class="name">安全监测</view>
+					<view class="right" @click="go_safety()"></view>
+				</view>
+				<view class="content">
+					<view class="list_title">
+						<view class="title_item">
+							<view class="name">正常</view>
+							<view class="icon icon_1">
+								10个
+							</view>
+						</view>
+						<view class="title_item">
+							<view class="name">报警</view>
+							<view class="icon icon_2">
+								3个
+							</view>
+						</view>
+						<view class="title_item">
+							<view class="name">标教</view>
+							<view class="icon icon_3">
+								0个
+							</view>
+						</view>
+						<view class="title_item">
+							<view class="name">故障</view>
+							<view class="icon icon_4">
+								0个
+							</view>
+						</view>
+					</view>
+				
+					<view class="list_item">
+						<view class="item item_title">
+							<view class="item_inner_1">测点编号</view>
+							<view class="item_inner_2">安装地点</view>
+							<view class="item_inner_3">数值/状态</view>
+						</view>
+						<view class="item">
+							<view class="item_inner_1">1</view>
+							<view class="item_inner_2">220704上隅角激光甲烷</view>
+							<view class="item_inner_3">0ppm</view>
+						</view>
+						<view class="item">
+							<view class="item_inner_1">2</view>
+							<view class="item_inner_2">220704工作面一氧化碳</view>
+							<view class="item_inner_3">1ppm</view>
+						</view>
+						<view class="item">
+							<view class="item_inner_1">3</view>
+							<view class="item_inner_2">220704上隅角氧气</view>
+							<view class="item_inner_3">0ppm</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			go_safety(){
+				uni.navigateTo({
+					url:"../../pages/p-i-safety-monitoring/p-i-safety-monitoring"
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.section{
+		margin-top: 10rpx;
+		
+		.box{
+			background: #FFFFFF;
+			box-shadow: 0px 3rpx 30rpx 0px rgba(59, 74, 116, 0.14);
+			border-radius: 21rpx;
+	
+			.title{
+				position: relative;
+				width: 720rpx;
+				
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-bottom: 2rpx solid #f3f3f3;
+				.icon{
+					width: 42rpx;
+					height: 42rpx;
+					
+					background-image: url(icon/icon.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+				.name{
+					margin-left: 10rpx;
+					font-size: 32rpx;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #232627;
+					line-height: 100rpx;
+				}
+				.right{
+					position: absolute;
+					right: 20rpx;
+					
+					width: 42rpx;
+					height: 42rpx;
+					
+					background-image: url(icon/right.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+			}
+			.content{
+				.list_title{
+					margin-top: 36rpx;
+					padding-bottom: 60rpx;
+					display: flex;
+					justify-content: space-around;
+					.title_item{
+						width: 125rpx;
+						text-align: center;
+						.name{
+							font-size: 29rpx;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #232627;
+							line-height: 42rpx;
+
+						}
+						.icon{
+							margin-top: 18rpx;
+							width: 125rpx;
+							height: 125rpx;
+							line-height: 125rpx;
+							border-radius: 50%;
+							
+							font-size: 31rpx;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #FFFFFF;
+
+						}
+						.icon_1{
+							background: #27AE60;
+						}
+						.icon_2{
+							background: #FC2449;
+						}
+						.icon_3{
+							background: #3498DB;
+						}
+						.icon_4{
+							background: #2C3E50;
+						}
+					}
+				}
+			
+				.list_item{
+					.item{
+						box-sizing: border-box;
+						padding: 25rpx 19rpx;
+						
+						display: flex;
+						
+						font-size: 27rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #232627;
+						line-height: 42rpx;
+						text-align: center;
+						.item_inner_1{
+							width: 125rpx;
+						}
+						.item_inner_2{
+							margin-left: 14rpx;
+							width: 404rpx;
+						}
+						.item_inner_3{
+							margin-left: 14rpx;
+							width: 125rpx;
+							
+							color: #97A3B4;
+						}
+					}
+					.item_title{
+						background: #F3F6FA;
+						
+						box-sizing: border-box;
+						padding: 25rpx 19rpx;
+						.item_inner_3{
+							color: #232627;
+						}
+					}
+							
+				}
+			}
+		}
+	}
+</style>

components/p-i-704-section-4/p-i-704-section-4.vue

@@ -0,0 +1,146 @@
+<template>
+	<view>
+		<view class="section">
+			<view class="box">
+				<view class="title">
+					<view class="icon"></view>
+					<view class="name">工业电视</view>
+					<view class="right" @click="go_video()"></view>
+				</view>
+				<view class="content">
+					<view class="list_item">
+						<view class="item">
+							<view class="icon">
+								<image src="./icon/icon_1.png" mode=""></image>
+							</view>
+							<view class="name">220704风巷</view>
+						</view>
+						<view class="item">
+							<view class="icon">
+								<image src="./icon/icon_1.png" mode=""></image>
+							</view>
+							<view class="name">220704风巷</view>
+						</view>
+						<view class="item">
+							<view class="icon">
+								<image src="./icon/icon_1.png" mode=""></image>
+							</view>
+							<view class="name">220704风巷</view>
+						</view>
+						<view class="item">
+							<view class="icon">
+								<image src="./icon/icon_1.png" mode=""></image>
+							</view>
+							<view class="name">220704风巷</view>
+						</view>
+						<view class="item">
+							<view class="icon">
+								<image src="./icon/icon_1.png" mode=""></image>
+							</view>
+							<view class="name">220704风巷</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			go_video(){
+				uni.navigateTo({
+					url:"../../pages/p-i-video/p-i-video"
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.section{
+		margin-top: 10rpx;
+		
+		.box{
+			background: #FFFFFF;
+			box-shadow: 0px 3rpx 30rpx 0px rgba(59, 74, 116, 0.14);
+			border-radius: 21rpx;
+	
+			.title{
+				position: relative;
+				width: 720rpx;
+				
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-bottom: 2rpx solid #f3f3f3;
+				.icon{
+					width: 42rpx;
+					height: 42rpx;
+					
+					background-image: url(icon/icon.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+				.name{
+					margin-left: 10rpx;
+					font-size: 32rpx;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #232627;
+					line-height: 100rpx;
+				}
+				.right{
+					position: absolute;
+					right: 20rpx;
+					
+					width: 42rpx;
+					height: 42rpx;
+					
+					background-image: url(icon/right.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+			}
+			.content{
+				.list_item{
+					overflow: hidden;
+					margin-top: 38rpx;
+					box-sizing: border-box;
+					padding: 0 25rpx;
+					.item{
+						float: left;
+						margin-right: 32rpx;
+						margin-bottom: 32rpx;
+						width: 202rpx;
+						text-align: center;
+						.icon{
+							image{
+								width: 108rpx;
+								height: 108rpx;
+							}
+						}
+						.name{
+							margin-top: 28rpx;
+							font-size: 25rpx;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #455A64;
+							line-height: 34rpx;
+
+						}
+					}
+					.item:nth-child(3n){
+						margin-right: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

components/p-i-704-section-5/p-i-704-section-5.vue

@@ -0,0 +1,137 @@
+<template>
+	<view>
+		<view class="section">
+			<view class="box">
+				<view class="title">
+					<view class="icon"></view>
+					<view class="name">采煤机</view>
+					<view class="right"></view>
+				</view>
+				<view class="content">
+					<view class="img">
+						<image src="./icon/img.png" mode=""></image>
+					</view>
+					<view class="inner">
+						<view class="item">
+							<view class="item_name">煤机位置</view>
+							<view class="item_box">3305 V</view>
+						</view>
+						<view class="item">
+							<view class="item_name">煤机位置</view>
+							<view class="item_box">0.90 m/min</view>
+						</view>
+						<view class="item">
+							<view class="item_name">煤机位置</view>
+							<view class="item_box">144</view>
+						</view>
+						<view class="item">
+							<view class="item_name">煤机位置</view>
+							<view class="item_box">4.50</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	.section{
+		margin-top: 10rpx;
+		
+		.box{
+			background: #FFFFFF;
+			box-shadow: 0px 3rpx 30rpx 0px rgba(59, 74, 116, 0.14);
+			border-radius: 21rpx;
+	
+			.title{
+				position: relative;
+				width: 720rpx;
+				
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-bottom: 2rpx solid #f3f3f3;
+				.icon{
+					width: 42rpx;
+					height: 42rpx;
+					
+					background-image: url(icon/icon.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+				.name{
+					margin-left: 10rpx;
+					font-size: 32rpx;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #232627;
+					line-height: 100rpx;
+				}
+				.right{
+					position: absolute;
+					right: 20rpx;
+					
+					width: 42rpx;
+					height: 42rpx;
+					
+					background-image: url(icon/right.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+			}
+			.content{
+				.img{
+					margin: 35rpx 0;
+					text-align: center;
+					image{
+						width: 665rpx;
+						height: 215rpx;
+					}
+				}
+				.inner{
+					padding: 0 10rpx;
+					display: flex;
+					flex-wrap: wrap;
+					.item{
+						display: flex;
+						
+						width: 350rpx;
+						text-align: center;
+						height: 80rpx;
+						line-height: 80rpx;
+						.item_name{
+							width: 175rpx;
+						}
+						.item_box{
+							margin-top: 20rpx;
+							width: 175rpx;
+							height: 40rpx;
+							line-height: 40rpx;
+							background: #8ADAFF;
+							
+							font-size: 27rpx;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #232627;
+
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

components/p-i-f-section-1/p-i-f-section-1.vue

@@ -0,0 +1,140 @@
+<template>
+	<view>
+		<view class="section">
+			<view class="box">
+				<view class="title">
+					风机运行状况
+				</view>
+				<view class="content">
+					<view class="inner">
+						<view class="inner_item">
+							<view class="item_title">
+								<view class="icon" :class="blower.blower1 = 'close'?'shut':'open'"></view>
+								<view class="name">1#风机</view>
+							</view>
+							<view class="img">
+								<image src="./icon/icon.png" mode=""></image>
+							</view>
+						</view>
+						<view class="inner_item">
+							<view class="item_title">
+								<view class="icon" :class="blower.blower2 = 'close'?'shut':'open'"></view>
+								<view class="name">2#风机</view>
+							</view>
+							<view class="img">
+								<image src="./icon/icon.png" mode=""></image>
+							</view>
+						</view>
+					</view>
+					<view class="inner_2">
+						<view class="inner_2_title">风量小时趋势</view>
+						<view class="inner_2_img">
+							<slot></slot>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"blower"
+		],
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.section{
+		box-sizing: border-box;
+		padding: 0 15rpx;
+		
+		.box{
+			background: #FFFFFF;
+			box-shadow: 0px 3rpx 30rpx 0px rgba(59, 74, 116, 0.14);
+			border-radius: 21rpx;
+	
+			.title{
+				width: 750rpx;
+				
+				font-size: 32rpx;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #232627;
+				line-height: 100rpx;
+				text-align: center;
+				
+				border-bottom: 2rpx solid #f3f3f3;
+			}
+			.content{
+				.inner{
+					display: flex;
+					justify-content: space-around;
+					.inner_item{
+						width: 232rpx;
+						text-align: center;
+						.item_title{
+							margin-top: 29rpx;
+							margin-bottom: 19rpx;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							.icon{
+								border-radius: 50%;
+								width: 26rpx;
+								height: 26rpx;
+							}
+								
+							.name{
+								margin-left: 10rpx;
+								font-size: 31rpx;
+								font-family: PingFangSC-Regular, PingFang SC;
+								font-weight: 400;
+								color: #232627;
+								line-height: 44rpx;
+							}
+							.shut{
+								background: #E74C3C;
+							}
+							.open{
+								background: #27AE60;
+							}
+						}
+						.img{
+							margin-bottom: 24rpx;
+							image{
+								width: 232rpx;
+								height: 232rpx;
+							}
+						}
+					}
+				}
+				.inner_2{
+					margin: 0 auto;
+					width: 632rpx;
+					min-height: 200rpx;
+
+					.inner_2_title{
+						line-height: 82rpx;
+						
+						font-size: 29rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #232627;
+
+					}
+					.inner_2_img{
+						
+					}
+				}
+			}
+		}
+	}
+</style>

components/p-i-f-section-2/p-i-f-section-2.vue

@@ -0,0 +1,193 @@
+<template>
+	<view>
+		<view class="section">
+			<view class="box">
+				<view class="title">
+					风机参数
+				</view>
+				<view class="content">
+					<view class="inner">
+						<view class="inner_title">
+							<view class="title_item" :class="active == 1?'title_item_active':''" @click="click_title(1)">
+								1#风机
+							</view>
+							<view class="title_item" :class="active == 2?'title_item_active':''" @click="click_title(2)">
+								2#风机
+							</view>
+						</view>
+						<view v-if="active == 1">
+							<view class="inner_box">
+								<view class="box_title">
+									<view class="text name">参数名称</view>
+									<view class="text num">数值</view>
+									<view class="text company">单位</view>
+								</view>
+								<view class="box_list">
+									<view class="item" v-for="(item,index) in param1" :key="index">
+										<view class="text name">{{item.name}}</view>
+										<view class="text num">
+											<view class="num_box">{{item.value}}</view>
+										</view>
+										<view class="text company">{{item.unit}}</view>
+									</view>
+									
+								</view>
+								
+							</view>
+						</view>
+						<view v-if="active == 2">
+							<view class="inner_box">
+								<view class="box_title">
+									<view class="text name">参数名称</view>
+									<view class="text num">数值</view>
+									<view class="text company">单位</view>
+								</view>
+								<view class="box_list">
+									<view class="item" v-for="(item,index) in param2" :key="index">
+										<view class="text name">{{item.name}}</view>
+										<view class="text num">
+											<view class="num_box">{{item.value}}</view>
+										</view>
+										<view class="text company">{{item.unit}}</view>
+									</view>
+								</view>
+								
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"param1",
+			"param2"
+		],
+		data() {
+			return {
+				active:1,
+			};
+		},
+		methods:{
+			click_title(active){
+				this.active = active
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.section{
+		margin-top: 10rpx;
+		box-sizing: border-box;
+		padding: 0 15rpx;
+		
+		.box{
+			background: #FFFFFF;
+			box-shadow: 0px 3rpx 30rpx 0px rgba(59, 74, 116, 0.14);
+			border-radius: 21rpx;
+	
+			.title{
+				width: 750rpx;
+				
+				font-size: 32rpx;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #232627;
+				line-height: 100rpx;
+				text-align: center;
+				
+				border-bottom: 2rpx solid #f3f3f3;
+			}
+			.content{
+				.inner{
+					box-sizing: border-box;
+					padding: 0 15rpx;
+					.inner_title{
+						height: 74rpx;
+						display: flex;
+						.title_item{
+							width: 188rpx;
+							text-align: center;
+							font-size: 31rpx;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #6C6F74;
+							line-height: 74rpx;
+							
+						}
+						.title_item_active{
+							color: #3498DB;
+							border-bottom: 3rpx solid #3498d8;
+						}
+					}
+					.inner_box{
+						margin-top: 17rpx;
+						margin-bottom: 20rpx;
+						padding-bottom: 20rpx;
+						width: 690rpx;
+						.box_title{
+							display: flex;
+							background: #F3F6FA;
+
+							.text{
+								font-size: 27rpx;
+								font-family: PingFangSC-Regular, PingFang SC;
+								font-weight: 400;
+								color: #232627;
+								line-height: 83rpx;
+								text-align: center;
+							}
+							.name{
+								width: 324rpx;
+							}
+							.num{
+								margin-left: 26rpx;
+								width: 162rpx;
+							}
+							.company{
+								margin-left: 16rpx;
+								width: 162rpx;
+							}
+						}
+						.box_list{
+							.item{
+								display: flex;
+								
+								border-bottom: 1rpx solid #f3f3f3;
+								.text{
+									font-size: 27rpx;
+									font-family: PingFangSC-Regular, PingFang SC;
+									font-weight: 400;
+									color: #232627;
+									line-height: 83rpx;
+									text-align: center;
+								}
+								.name{
+									width: 324rpx;
+								}
+								.num{
+									margin-left: 26rpx;
+									width: 162rpx;
+									.num_box{
+										margin-top: 22rpx;
+										background: #8ADAFF;
+										line-height: 40rpx;
+									}
+								}
+								.company{
+									margin-left: 16rpx;
+									width: 162rpx;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

components/p-i-o-navbar/p-i-o-navbar.vue

@@ -0,0 +1,108 @@
+<template>
+	<view>
+		<view class="content">
+			<view :style="{height:statusBarHeight + 'px'}">
+				<!-- 这里是状态栏 -->
+			</view>
+			<view class="navbar">
+		
+				<view class="left" @click="click_left()">
+					<uni-icons type="arrowleft" color="#fff" size="18"></uni-icons>
+				</view>
+				<view class="right">
+					<view class="input_box">
+						<view class="input_icon"></view>
+						<view class="input_text">搜索井下人员</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 占位符 -->
+		<view :style="{height: statusBarHeight + 'px'}"></view>
+		<view style="height: 93rpx;"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				statusBarHeight: 20,
+				
+			};
+		},
+		created() {
+			// 获取手机系统信息
+			const info = uni.getSystemInfoSync()
+			// 设置状态栏高度
+			this.statusBarHeight = info.statusBarHeight
+			
+		},
+		methods: {
+			click_left() {
+				uni.navigateBack();
+			}
+		}
+
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		position: fixed;
+		top: 0;
+		left: 0;
+			
+		background-color: #009FE8;
+		z-index: 999;
+	}
+
+	.navbar {
+		width: 750rpx;
+		box-sizing: border-box;
+		padding-left: 31rpx;
+		padding-right: 26rpx;
+		padding-top: 14rpx;
+		padding-bottom: 14rpx;
+		display: flex;
+		justify-content: space-between;
+
+		.left {
+			width: 42rpx;
+			line-height: 65rpx;
+		}
+
+		.right {
+			width: 620rpx;
+			height: 65rpx;
+			background: rgba(255, 255, 255, 0.2);
+			border-radius: 33rpx;
+
+			.input_box {
+				display: flex;
+
+				.input_icon {
+					margin-left: 43rpx;
+					margin-top: 16rpx;
+					width: 34rpx;
+					height: 34rpx;
+
+					background-image: url(icon/search.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+
+				.input_text {
+					margin-left: 19rpx;
+
+					font-size: 24rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #FFFFFF;
+					line-height: 65rpx;
+
+				}
+			}
+		}
+	}
+</style>

components/p-i-o-section-1/old.vue

@@ -0,0 +1,48 @@
+<template>
+	<view>
+		<view class="content">
+			<view class="title">
+				当前井下人员
+			</view>
+			<view class="inner">
+				
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		margin-top: 16rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
+		border-radius: 20rpx;
+
+		.title{
+			line-height: 96rpx;
+			text-align: center;
+			
+			
+			font-size: 30rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #232627;
+			
+			border-bottom: 2rpx solid #f3f3f3;
+		}
+		.inner{
+			height: 200rpx;
+		}
+	}
+</style>

components/p-i-o-section-1/p-i-o-section-1.vue

@@ -0,0 +1,51 @@
+<template>
+	<view>
+		<view class="content">
+			<view class="title">
+				当前井下人员
+			</view>
+			<view class="inner">
+				<slot></slot>
+			</view>
+			
+		</view>
+	</view>
+</template>
+
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+	}
+</script>
+
+
+
+<style lang="scss">
+	.content{
+		margin-top: 16rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
+		border-radius: 20rpx;
+
+		.title{
+			line-height: 96rpx;
+			text-align: center;
+			
+			
+			font-size: 30rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #232627;
+			
+			border-bottom: 2rpx solid #f3f3f3;
+		}
+		.inner{
+			 // height: 500px;
+		}
+	}
+</style>

components/p-i-o-section-2/p-i-o-section-2.vue

@@ -0,0 +1,195 @@
+<template>
+	<view>
+		<view class="content">
+			<view class="title">
+				井下人员（区域分布）
+			</view>
+			<view class="inner">
+				<view class="list_item">
+					<view class="item" v-for="item in regionList" :key="item.area_id" @click="openDrawer(item),getMineList(item.area_id)">
+						<view class="left">
+							<view class="icon">
+								<image :src="item.thumb" mode=""></image>
+							</view>
+							<view class="name">{{item.area_name}}</view>
+						</view>
+						<view class="right">{{item.pepole_num}}人</view>
+					</view>
+					
+				</view>
+				
+				
+			</view>
+		</view>
+		
+		
+		<uni-drawer ref="drawer" maskClick mode="right">
+			<view class="drawer">
+				<view class="top"></view>
+				<view class="title">{{drawer.name}}</view>
+				<view class="list_item">
+					<view class="item" v-for="item in mineList" :key="item.station_id" @click="go_number(item.station_id,item.station_name)">
+						<view class="name">{{item.station_name}}</view>
+						<view class="right">
+							<view class="num">{{item.pepole_num}}人</view>
+							<view class="icon">
+								<uni-icons type="arrowright"></uni-icons>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</uni-drawer>
+			
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"regionList",
+			"mineList"
+		],
+		data() {
+			return {
+				drawer:{
+					name:"矿井"
+				}
+			};
+		},
+		methods:{
+			openDrawer(item){
+				this.$refs.drawer.open();
+				this.drawer.name = item.area_name
+			},
+			// 向页面传矿井id
+			getMineList(area_id){
+				this.$emit("getMineList",area_id)
+				console.log(area_id)
+			},
+			go_number(station_id,station_name){
+				uni.navigateTo({
+					url:"../../pages/p-i-orientation/p-i-o-s2-number/p-i-o-s2-number?station_id="+station_id+"&station_name="+station_name
+
+				})
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		margin-top: 16rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
+		border-radius: 20rpx;
+
+		.title{
+			line-height: 96rpx;
+			text-align: center;
+			
+			
+			font-size: 30rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #232627;
+			
+			border-bottom: 2rpx solid #f3f3f3;
+		}
+		.inner{
+			box-sizing: border-box;
+			padding-left: 30rpx;
+			padding-right: 20rpx;
+			padding-bottom: 20rpx;
+			.list_item{
+				background: #FFFFFF;
+
+				.item{
+					height: 110rpx;
+					border-bottom: 1px solid #f3f3f3;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					.left{
+						height: 110rpx;
+						display: flex;
+						align-items: center;
+						.icon{
+							image{
+								width: 83rpx;
+								height: 83rpx;
+							}
+						}
+						.name{
+							margin-left: 36rpx;
+							
+							font-size: 29rpx;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #232627;
+
+						}
+					}
+					.right{
+						font-size: 29rpx;
+						font-family: PingFangSC-Medium, PingFang SC;
+						font-weight: 500;
+						color: #27AE60;
+
+					}
+				}
+			}
+		}
+	}
+
+	.drawer{
+		.top{
+			height: var(--status-bar-height);
+			background-color: #009FE8;
+		}
+		.title{
+			box-sizing: border-box;
+			padding-left: 20rpx;
+			text-align: left;
+			border-bottom: 1rpx solid #009FE8;
+			line-height: 90rpx;
+			
+			font-size: 29rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #232627;
+		}
+		.list_item{
+			
+			.item{
+				display: flex;
+				justify-content: space-between;
+				
+				box-sizing: border-box;
+				margin: 0 20rpx;
+				border-bottom: 1rpx solid #f3f3f3;
+				line-height: 70rpx;
+				
+				font-size: 29rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #232627;
+				.name{
+					
+				}
+				.right{
+					display: flex;
+					
+					.num{
+						
+					}
+					.icon{
+						margin-left: 4rpx;
+					}
+				}
+			}
+		}
+	}
+
+</style>

components/p-i-o-section-3/p-i-o-section-3.vue

@@ -0,0 +1,47 @@
+<template>
+	<view>
+		<view class="content">
+			<view class="title">
+				井下人员（部门分布）
+			</view>
+			<view class="inner">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		margin-top: 16rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
+		border-radius: 20rpx;
+
+		.title{
+			line-height: 96rpx;
+			text-align: center;
+			
+			
+			font-size: 30rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #232627;
+			
+			border-bottom: 2rpx solid #f3f3f3;
+		}
+		.inner{
+			// height: 200rpx;
+		}
+	}
+</style>

components/p-i-o-section-4/p-i-o-section-4.vue

@@ -0,0 +1,70 @@
+<template>
+	<view>
+		<view class="content">
+			<view class="title">
+				<picker mode="selector" :range="array" :value="index" @change="bindPickerChange">
+					<view class="title_select">
+						<view>{{array[index]}}</view>
+						<view class="icon">
+							<uni-icons type="arrowdown"></uni-icons>
+						</view>
+					</view>
+				</picker>
+			</view>
+			<view class="inner">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				array: ['当前各科室下井人数', '今日各科室下井人数'],
+				index: 0,
+			};
+		},
+		methods: {
+			bindPickerChange: function(e) {
+				console.log('picker发送选择改变，携带值为', e.target.value)
+				this.$emit("changeDepart",e.target.value)
+				this.index = e.target.value
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		margin-top: 16rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
+		border-radius: 20rpx;
+
+		.title {
+			line-height: 96rpx;
+			text-align: center;
+
+
+			font-size: 30rpx;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #232627;
+
+			
+			.title_select{
+				display: flex;
+				justify-content: center;
+				.icon{
+					margin-left: 20rpx;
+				}
+			}
+		}
+
+		.inner {
+			// height: 200rpx;
+		}
+	}
+</style>

components/p-i-s-content-1/p-i-s-content-1.vue

@@ -0,0 +1,212 @@
+<template>
+	<view>
+		<view class="p-i-s-content-1">
+			<view class="top">
+				<view class="list_item">
+					<view class="item" v-for="(item,index) in simulation" :key="index" :class="item.type" @click="go_status_detail(item.type,item.name)">
+						<view class="name">{{item.name}}</view>
+						<view class="num">{{item.count}}个</view>
+					</view>
+				</view>
+			</view>
+			<view class="inner">
+				<view class="list_item">
+					<view class="item" v-for="(item,index) in simulationList" :key="index" @click="go_name_detail(item.typeCodeDesc)">
+						<view class="item_title">
+							<view class="item_icon">
+								<!-- {{imgUrl}} -->
+								<image :src="imgUrl" mode=""></image>
+							</view>
+							<view class="item_name">{{item.typeCodeDesc}}</view>
+						</view>
+						<view class="item_content">
+							<view class="item_content_list">
+								<view class="content_item" v-for="(inner,index) in item.normalCount" :key="index">
+									<view class="name">{{inner.name}}</view>
+									<view class="num" :class="inner.type">{{inner.count}}个</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"simulation",
+			"simulationList"
+		],
+		data() {
+			return {
+				imglist:[]
+			};
+		},
+		computed:{
+			imgUrl:function(index){
+				console.log(index)
+			}
+		},
+		methods:{
+			
+			go_status_detail(status,title){
+				// console.log(status)
+				uni.navigateTo({
+					url:"../../pages/p-i-safety-monitoring/p-i-s-simulation-status-detail/p-i-s-simulation-status-detail?status=" + status + "&title=" + title
+				})
+			},
+			go_name_detail(name){
+				uni.navigateTo({
+					url:"../../pages/p-i-safety-monitoring/p-i-s-simulation-name-detail/p-i-s-simulation-name-detail?name=" + name
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	
+	.p-i-s-content-1{
+		.top{
+			height: 202rpx;
+			background: #FFFFFF;
+			
+			border-bottom: 1rpx solid #f3f3f3;
+			.list_item{
+				height: 202rpx;
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				.item{
+					width: 106rpx;
+					height: 106rpx;
+					border-radius: 50%;
+					text-align: center;
+					line-height: 53rpx;
+					.name{
+						margin-top: 21rpx;
+						font-size: 25rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #FFFFFF;
+						
+						line-height: 34rpx;
+					}
+					.num{
+						margin-top: 4rpx;
+						font-size: 21rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #FFFFFF;
+						
+						line-height: 29rpx;
+					}
+				}
+				.item_1{
+					background: #27AE60;
+				}
+				.item_2{
+					background: #E74C3C;
+				}
+				.item_3{
+					background: #2C3E50;
+				}
+				.item_4{
+					background: #2873FF;
+				}
+				
+				// 模拟量 统计
+				.normal{
+					background: #27AE60;
+				}
+				.alarm{
+					background: #E74C3C;
+				}
+				.sign{
+					background: #2C3E50;
+				}
+				.fault{
+					background: #2873FF;
+				}
+			}
+		}
+		.inner{
+			.list_item{
+				.item{
+					border-top: 1rpx solid #f3f3f3;
+					border-bottom: 1rpx solid #f3f3f3;
+					box-sizing: border-box;
+					padding: 0 30rpx;
+					padding-top: 28rpx;
+					padding-bottom: 26rpx;
+					
+					.item_title{
+						display: flex;
+						box-sizing: border-box;
+						padding-bottom: 18rpx;
+						border-bottom: 1rpx solid #f3f3f3;
+						.item_icon{
+							margin-left: 6rpx;
+							image{
+								width: 83rpx;
+								height: 83rpx;
+							}
+						}
+						.item_name{
+							margin-left: 23rpx;
+							font-size: 29rpx;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #002257;
+							line-height: 83rpx;
+
+						}
+					}
+					.item_content{
+						.item_content_list{
+							display: flex;
+							justify-content: space-between;
+							.content_item{
+								width: 158rpx;
+								text-align: center;
+								.name{
+									margin-top: 22rpx;
+									font-size: 25rpx;
+									font-family: PingFangSC-Regular, PingFang SC;
+									font-weight: 400;
+									color: #97A3B4;
+									line-height: 33rpx;
+
+								}
+								.num{
+									margin-top: 6rpx;
+									font-size: 28rpx;
+									font-family: PingFangSC-Medium, PingFang SC;
+									font-weight: 500;
+									line-height: 33rpx;
+
+								}
+								.normal{
+									color: #2ECC71;
+								}
+								.alarm{
+									color: #E74C3C;
+								}
+								.sign{
+									color: #2C3E50;
+								}
+								.fault{
+									color: #2F54EB;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

components/p-i-s-content-2/p-i-s-content-2.vue

@@ -0,0 +1,205 @@
+<template>
+	<view>
+		<view class="p-i-s-content-2">
+			<view class="top">
+				<view class="list_item">
+					<view class="item" v-for="(item,index) in sluice" :key="index" :class="item.type"  @click="go_status_detail(item.type,item.name)">
+						<view class="name">{{item.name}}</view>
+						<view class="num">{{item.count}}个</view>
+					</view>
+				</view>
+			</view>
+			<view class="inner">
+				<view class="list_item">
+					<view class="item" v-for="(item,index) in sluiceList" :key="index" @click="go_name_detail(item.typeCodeDesc)">
+						<view class="item_title">
+							<view class="item_icon">
+								<image src="./icon/dianliang.png" mode=""></image>
+							</view>
+							<view class="item_name">{{item.typeCodeDesc}}</view>
+						</view>
+						<view class="item_content">
+							<view class="item_content_list">
+								<view class="content_item" v-for="(inner,index) in item.normalCount" :key="index">
+									<view class="name">{{inner.name}}</view>
+									<view class="num" :class="inner.type">{{inner.count}}个</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:[
+			"sluice",
+			"sluiceList"
+		],
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			go_status_detail(status,title){
+				// console.log(status)
+				uni.navigateTo({
+					url:"../../pages/p-i-safety-monitoring/p-i-s-sluice-status-detail/p-i-s-sluice-status-detail?status=" + status + "&title=" + title
+				})
+			},
+			go_name_detail(name){
+				uni.navigateTo({
+					url:"../../pages/p-i-safety-monitoring/p-i-s-sluice-name-detail/p-i-s-sluice-name-detail?name=" + name
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	
+	.p-i-s-content-2{
+		.top{
+			height: 202rpx;
+			background: #FFFFFF;
+			
+			border-bottom: 1rpx solid #f3f3f3;
+			.list_item{
+				height: 202rpx;
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				.item{
+					width: 106rpx;
+					height: 106rpx;
+					border-radius: 50%;
+					text-align: center;
+					line-height: 53rpx;
+					.name{
+						margin-top: 21rpx;
+						font-size: 25rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #FFFFFF;
+						
+						line-height: 34rpx;
+					}
+					.num{
+						margin-top: 4rpx;
+						font-size: 21rpx;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: #FFFFFF;
+						
+						line-height: 29rpx;
+					}
+				}
+				.item_1{
+					background: #27AE60;
+				}
+				.item_2{
+					background: #E74C3C;
+				}
+				.item_3{
+					background: #2C3E50;
+				}
+				.item_4{
+					background: #2873FF;
+				}
+				
+				// 开关量 统计
+				.normal{
+					background: #27AE60;
+				}
+				.alarm{
+					background: #E74C3C;
+				}
+				.open{
+					background: #2C3E50;
+				}
+				.close{
+					background: #2873FF;
+				}
+			}
+		}
+		.inner{
+			.list_item{
+				.item{
+					border-top: 1rpx solid #f3f3f3;
+					border-bottom: 1rpx solid #f3f3f3;
+					box-sizing: border-box;
+					padding: 0 30rpx;
+					padding-top: 28rpx;
+					padding-bottom: 26rpx;
+					
+					.item_title{
+						display: flex;
+						box-sizing: border-box;
+						padding-bottom: 18rpx;
+						border-bottom: 1rpx solid #f3f3f3;
+						.item_icon{
+							margin-left: 6rpx;
+							image{
+								width: 83rpx;
+								height: 83rpx;
+							}
+						}
+						.item_name{
+							margin-left: 23rpx;
+							font-size: 29rpx;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: #002257;
+							line-height: 83rpx;
+
+						}
+					}
+					.item_content{
+						.item_content_list{
+							display: flex;
+							justify-content: space-between;
+							.content_item{
+								width: 158rpx;
+								text-align: center;
+								.name{
+									margin-top: 22rpx;
+									font-size: 25rpx;
+									font-family: PingFangSC-Regular, PingFang SC;
+									font-weight: 400;
+									color: #97A3B4;
+									line-height: 33rpx;
+
+								}
+								.num{
+									margin-top: 6rpx;
+									font-size: 28rpx;
+									font-family: PingFangSC-Medium, PingFang SC;
+									font-weight: 500;
+									line-height: 33rpx;
+
+								}
+								.normal{
+									color: #2ECC71;
+								}
+								.alarm{
+									color: #E74C3C;
+								}
+								.sign{
+									color: #2C3E50;
+								}
+								.fault{
+									color: #2F54EB;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

components/p-i-s-navbar/p-i-s-navbar.vue

@@ -0,0 +1,115 @@
+<template>
+	<view>
+		<view class="content">
+			<view :style="{height:statusBarHeight + 'px'}">
+				<!-- 这里是状态栏 -->
+			</view>
+			<view class="navbar">
+		
+				<view class="left" @click="click_left()">
+					<uni-icons type="arrowleft" color="#fff" size="18"></uni-icons>
+				</view>
+				<view class="right" @click="go_search()">
+					<view class="input_box">
+						<view class="input_icon"></view>
+						<view class="input_text">搜索</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 占位符 -->
+		<view :style="{height: statusBarHeight + 'px'}"></view>
+		<view style="height: 93rpx;"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				statusBarHeight: 20,
+				
+			};
+		},
+		created() {
+			// 获取手机系统信息
+			const info = uni.getSystemInfoSync()
+			// 设置状态栏高度
+			this.statusBarHeight = info.statusBarHeight
+			
+		},
+		methods: {
+			click_left() {
+				uni.navigateBack();
+			},
+			go_search(){
+				uni.navigateTo({
+					url:"../../pages/p-i-safety-monitoring/p-i-s-search/p-i-s-search",
+					animationType: 'fade-in',
+					animationDuration: 200
+				})
+			}
+		}
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		position: fixed;
+		top: 0;
+		left: 0;
+			
+		z-index: 999;
+		background-color: #009FE8;
+	}
+
+	.navbar {
+		width: 750rpx;
+		box-sizing: border-box;
+		padding-left: 31rpx;
+		padding-right: 26rpx;
+		padding-top: 14rpx;
+		padding-bottom: 14rpx;
+		display: flex;
+		justify-content: space-between;
+
+		.left {
+			width: 42rpx;
+			line-height: 65rpx;
+		}
+
+		.right {
+			width: 620rpx;
+			height: 65rpx;
+			background: rgba(255, 255, 255, 0.2);
+			border-radius: 33rpx;
+
+			.input_box {
+				display: flex;
+
+				.input_icon {
+					margin-left: 43rpx;
+					margin-top: 16rpx;
+					width: 34rpx;
+					height: 34rpx;
+
+					background-image: url(icon/search.png);
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+
+				.input_text {
+					margin-left: 19rpx;
+
+					font-size: 24rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #FFFFFF;
+					line-height: 65rpx;
+
+				}
+			}
+		}
+	}
+</style>

components/p-i-s-tabbar/p-i-s-tabbar.vue

@@ -0,0 +1,93 @@
+<template>
+	<view class="content">
+		<view class="tabbar">
+			<view class="list_item">
+				<view class="item" :class="active === 1 ? 'active':''" @click="click_item(1)">
+					<view class="item_icon icon_one"></view>
+					<view class="item_name">
+						模拟量
+					</view>
+				</view>
+				<view class="item" :class="active === 2 ? 'active':''" @click="click_item(2)">
+					<view class="item_icon icon_two"></view>
+					<view class="item_name">
+						开关量
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		
+		data() {
+			return {
+				active:1,
+			};
+		},
+		methods:{
+			click_item(item){
+				this.active = item
+				this.$emit("tab","item")
+			}
+		}
+		
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		position: fixed;
+		bottom: 0;
+	}
+	.tabbar{
+		width: 750rpx;
+		.list_item{
+			width: 100%;
+			border-top: 2rpx solid #f3f3f3;
+			box-sizing: border-box;
+			padding: 12rpx 0;
+			
+			.item{
+				float: left;
+				width: 50%;
+				.item_icon{
+					margin: 0 auto;
+					width: 45rpx;
+					height: 45rpx;
+					
+					background-size: cover;
+					background-repeat: no-repeat;
+				}
+				.icon_one{
+					background-image: url(icon/ss1.png);
+				}
+				.icon_two{
+					background-image: url(icon/work.png);
+				}
+				.item_name{
+					text-align: center;
+					font-size: 25rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: #929292;
+					line-height: 40rpx;
+
+				}
+			}
+			.active{
+				.icon_one{
+					background-image: url(icon/ss2.png);
+				}
+				.icon_two{
+					background-image: url(icon/work_active.png);
+				}
+				.item_name{
+					color: #3498DB;
+				}
+			}
+		}
+	}
+</style>