feat:9.16暂存

pages.json

@@ -870,6 +870,15 @@
         		"enablePullDownRefresh" : false
         	}
         },
+		{
+			"path" : "pages/fmSys/details",
+			"style" : 
+			{
+				"navigationBarTitleText" : "详情",
+				"enablePullDownRefresh" : false,
+				"navigationStyle": "custom"
+			}
+		},
         {
         	"path" : "pages/cb/xylps/detail",
         	"style" : 

pages/fmSys/details.vue

@@ -0,0 +1,639 @@
+<template>
+	<view>
+		<view class="title">基本信息</view>
+		<view class="info">
+			<view class="device-id" @click="copy(equipInfo)">
+				<image class="logo" :src="`http://www.hnyfwlw.com:8006/bigdata_pc/equipdistribute/${equipInfo.type}.png`" mode=""></image>
+				{{equipInfo.imei||equipInfo.device_id}}
+				<image src="https://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode="" class="tishi">
+				</image>
+				<view :class="['float-right','yficonfont',equipInfo.is_online==1?'on icon-zaixian':'off icon-lixian']">
+					{{equipInfo.is_online==1?'在线':'离线'}}
+				</view>
+			</view>
+			<view class="info-list">
+				<span class="float-left">设备名称：</span> <span class="float-right">{{equipInfo.device_name}}</span>
+			</view>
+			<view class="info-list" v-if="equipInfo.type==32">
+				<span class="float-left">诱虫量：</span> <span class="float-right">{{equipInfo.bug_count?equipInfo.bug_count.join('/'):'0/0/0'}}</span>
+			</view>
+			<view class="info-list">
+				<span class="float-left">最新上报时间：</span> <span class="float-right">{{equipInfo.addtime||equipInfo.uptime | timeFormat}}</span>
+			</view>
+			<view class="info-list">
+				<span class="float-left">设备地址：</span> <span class="float-right">{{equipInfo.address?equipInfo.address:"--"}}</span>
+			</view>
+			<view class="info-list" v-if="equipInfo.type==34" @click="operate('jd')">
+				<span class="float-left">卷带到期时间</span>
+				<span>  </span>
+				<span class="float-right"> 
+				<span v-if="equipInfo.jd_expire_time>0">
+					{{ equipInfo.jd_expire_time | timeFormat}}
+				</span>
+				 <span v-else> 暂未设置卷带	</span>
+					<u-icon class="arrow" name="arrow-right" color="#666666" size="26"></u-icon>
+				</span>
+			</view>
+
+			<u-calendar v-model="calendar_show" mode="date" :max-date="date" @change="timeChange($event)">
+			</u-calendar>
+			<u-toast ref="toast" />
+		</view>
+		<view class="title">基本操作</view>
+		<view class="newState" >
+			<view class="item" v-for="item in curEquip" @click="partClick(item.path)">
+				<view class="item_info_img">
+					<image :src="'https://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
+				</view>
+				<view class="info-text">
+					{{item.tex}}
+				</view>
+			</view>
+		</view>
+		<view class="title">实时状态</view>
+		<view class="newtishi" v-if="dataloadingtf">
+			<p class="dataloading">加载中</p>
+		</view>
+		<view class="newtishi" v-else-if="newtishitf">
+			暂无数据
+		</view>
+		<view class="newState" v-else>
+			<view class="item" v-for="item in curState">
+				<view class="item_info_img">
+					<image :src="'https://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
+				</view>
+				<view class="info-con">
+					<view class="active">
+						{{item.value | formatValue(item.txt,type)}}
+					</view>
+					<view class="val">
+						{{item.txt}} 
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import equipState from "../../static/js/equipState_dict.json"
+	import {
+		QueryPermission,getPermissionById,getUserPermission
+	} from "../../util/QueryPermission.js"
+	export default {
+		data() {
+			return {
+				fieldstyle: {
+					border: "2rpx solid #f6f6f6",
+					"border-radius": "24px",
+					"padding-left": "20rpx",
+					"background-color": "#f6f6f6"
+				},
+				city: "",
+				type: null, //设备类型
+				device_status: null,
+				equipInfo: {},
+				cbd: [
+					
+				],
+				newState: {}, //设备最新状态
+				setTimeShow: false,
+				calendar_show: false,
+				culErr: '',
+
+				decoy: '',
+				newtishitf: false, //暂无数据提示
+				dataloadingtf: true, //加载中提示
+				date: "", //日历最大可选日期
+				operateType:''
+			}
+		},
+		computed: {
+			curEquip(){
+				this.cbd = [{
+						icon: '/image/cb/4.png',
+						tex: '设备控制',
+						path: '/pages/cb/cbd/equip-set/equip-set-new',
+						tf: true
+					}, {
+						icon: '/image/cb/6.png',
+						tex: 'sim卡详情',
+						path: '/pages/prevention/sim',
+						tf: true
+					}, {
+						icon: '/image/environment/7.png',
+						tex: '一键报修',
+						path: '/pages/afterSale/addafter',
+						tf: true
+					}]
+				let permission = getPermissionById(getUserPermission(),this.equipInfo.pur_id)
+				permission.forEach(item=>{
+					
+					if(item.purview_name =='查看图片'){
+						this.cbd.unshift({
+							icon: '/image/cb/1.png',
+							tex: item.purview_name,
+							path: '/pages/cb/cbd/equip-set/photo',
+							tf: true
+						})
+					}else if(item.purview_name =='数据详情'){
+						this.cbd.unshift({
+							icon: '/image/cb/2.png',
+							tex: item.purview_name,
+							path: '/pages/cb/cbd/equip-set/newhistoryfile',
+							tf: true
+						})
+					}else if(item.purview_name =='分析'){
+						this.cbd.unshift({
+							icon: '/image/cb/3.png',
+							tex: item.purview_name,
+							path: '/pages/cb/cbd/equip-set/new-analyse',
+							tf: true
+						})
+					}
+				})
+				return this.cbd
+			},
+			curState() {
+				return [{
+						icon: '/image/cb/icon02.png',
+						txt: '在线状态',
+						value: this.newState.status,
+					},
+					{
+						icon: '/image/cb/icon05.png',
+						txt: '开关状态',
+						value: Number(this.newState.ds) == 1 ? '开机' : '关机'
+					},
+					 {
+						icon: '/image/cb/icon08.png',
+						txt: '环境温度(℃)',
+						value: this.newState.tem
+					}, {
+						icon: '/image/cb/icon07.png',
+						txt: '环境湿度(%)',
+						value: this.newState.hum
+					}, {
+						icon: '/image/prevention/icon16.png',
+						txt: '信号强度',
+						value: this.newState.signal
+					}, {
+						icon: '/image/cb/icon12.png',
+						txt: '设备版本',
+						value: this.newState.dver_num
+					},
+					{
+						icon: '/image/cb/icon17.png',
+						txt: '雨控状态',
+						value: this.newState.rps
+					}, {
+						icon: '/image/cb/icon14.png',
+						txt: '温控状态',
+						value: this.newState.tps
+					}, {
+						icon: '/image/cb/icon06.png',
+						txt: '光控状态',
+						value: this.newState.lps
+					}, {
+						icon: '/image/cb/icon18.png',
+						txt: '控制模式',
+						value: this.newState.control
+					}
+				]
+			},
+			operateOptions(){
+				return{
+					yx:{
+						title:'诱芯',
+						url:'/api/api_gateway?method=new_gateway.device_info.youxin',
+						field:'xy_expire_time'
+					},
+					sb:{
+						title:'色板',
+						url:'/api/api_gateway?method=new_gateway.device_info.sban',
+						field:'sban_expire_time'
+					},
+					jd:{
+						title:'卷带',
+						url:'/api/api_gateway?method=new_gateway.device_info.syone_jd',
+						field:'jd_expire_time'
+					}
+				}
+			}
+				
+		},
+		filters: {
+			equipType(type) {
+				switch (type) {
+					case 3:
+						return "虫情测报灯";
+					case 7:
+						return "孢子仪";
+					case 4:
+						return "性诱测报"
+
+				}
+			},
+			formatValue(val, a1, a2) {
+				if (a2 == 4 && a1 == "电池状态") {
+					switch (Number(val)) {
+						case 0:
+							return '正常';
+							break;
+						case 1:
+							return '欠压';
+							break;
+						case 2:
+							return '过压';
+							break;
+					}
+				} else {
+
+					return val ? val : '无'
+				}
+			}
+		},
+		onLoad(option) {
+			this.equipInfo = JSON.parse(option.info)
+			this.getDeviceStatus()
+			this.type = Number(this.equipInfo.type) || Number(this.equipInfo.equip_type) || Number(this.equipInfo
+				.device_type_id)
+			this.equipInfo.type = this.type
+			this.device_status = this.equipInfo.is_online
+			
+			this.getState()
+		
+			// this.selectaddress(Number(this.equipInfo.lat), Number(this.equipInfo.lng))
+			var times = new Date()
+			this.date = times.getFullYear() + 1 + "-" + Number(times.getMonth() + 1) + "-" + times.getDate()
+		},
+		methods: {
+			async getDeviceStatus() {
+				
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.devices_list',
+					data: {
+						device_type_id: this.equipInfo.type,
+						id: this.equipInfo.imei|| this.equipInfo.device_id,
+						page:1,
+						size:999
+					}
+				})
+				let newRes = res.device[0]
+				this.equipInfo ={...this.equipInfo,...newRes} 
+				console.log('响应',this.equipInfo)
+			},
+			async getState() {
+				this.dataloadingtf = true
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.device_status',
+					data: {
+						device_type_id: this.equipInfo.type,
+						id: this.equipInfo.d_id
+					}
+				})
+				this.newState = res
+				this.dataloadingtf = false
+				console.log('res',res)
+			},
+	
+			partClick(path) {
+				console.log(path)
+				var device_id = this.equipInfo.device_id || this.equipInfo.imei
+				uni.navigateTo({
+					url: path + '?d_id=' + this.equipInfo.d_id + "&device_id=" + device_id + "&device_type=" + this
+						.type
+				});
+			},
+	
+				
+			operate(type){
+				this.calendar_show = true
+				this.operateType = type
+			},
+			timeChange(e, filed) {
+				// // 根据type_id，执行相应的操作
+				
+				// let typeId = this.equipInfo.type
+				// let postData = {}
+				// if(typeId===32){
+				// 	// 添加诱芯
+				// }else if(typeId === 33){
+				// 	// 添加诱芯，更换色板
+				// 	this.sbSubmit(e.result)
+				// }else if(typeId === 34){
+				// 	// 添加诱芯，更换卷带
+				// 	this.jdSubmit(e.result)
+				// }
+				this.yxSubmit(e.result)
+			},
+		
+			async yxSubmit(time) {
+				let {title,url,field} = this.operateOptions[this.operateType]
+				if (!time) {
+					this.$refs.toast.show({
+						title: '请填写'+title+'到期时间!',
+						type: 'warning',
+					})
+					return false
+				}
+				let postData = {
+					device_type_id: this.equipInfo.type,
+					id: this.equipInfo.device_id	
+				}
+				postData[field] = +new Date(time) / 1000 
+				const res = await this.$myRequest({
+					url: url,
+					data: postData
+				})
+				if (res) {
+					this.$refs.toast.show({
+						title: title+'时间设置成功!',
+						type: 'success',
+					})
+					this.getDeviceStatus()
+					
+				}
+			},
+			// 色板
+			async sbSubmit(time) {
+				if (!time) {
+					this.$refs.toast.show({
+						title: '请填写色板到期时间!',
+						type: 'warning',
+					})
+					return false
+				}
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.sban',
+					data: {
+						device_type_id: this.equipInfo.type,
+						id: this.equipInfo.device_id,
+						sban_expire_time:  +new Date(time) / 1000 
+					}
+				})
+				if (res) {
+					this.$refs.toast.show({
+						title: '设置成功!',
+						type: 'success',
+					})
+					this.getDeviceStatus()
+					
+				}
+			},
+			async jdSubmit(time) {
+				if (!time) {
+					this.$refs.toast.show({
+						title: '请填写卷带到期时间!',
+						type: 'warning',
+					})
+					return false
+				}
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.syone_jd',
+					data: {
+						device_type_id: this.equipInfo.type,
+						id: this.equipInfo.device_id,
+						jd_expire_time:  +new Date(time) / 1000 
+					}
+				})
+				if (res) {
+					this.$refs.toast.show({
+						title: '设置成功!',
+						type: 'success',
+					})
+					this.getDeviceStatus()
+					
+				}
+			},
+			selectaddress(lat, lng) { //获取分布位置
+				uni.request({
+					type: "GET",
+					url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," + lat +
+						"&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
+					dataType: "json",
+					complete: res => {
+						console.log(res)
+						this.city = res.data.regeocode.formatted_address
+					}
+				});
+			},
+			copy(item) {
+				console.log(item)
+				uni.setClipboardData({
+					data: item.imei || item.device_id,
+					success: function() {
+						console.log('success');
+					}
+				});
+			}
+		},
+	}
+</script>
+
+<style lang='scss'>
+	page {
+		padding: 0rpx 48rpx;
+		box-sizing: border-box;
+		background: #F7F7F7;
+		.title{
+			color: #999999;
+			margin: 32rpx 0;
+		}
+		.logo{
+			width: 36rpx;
+			height: 36rpx;
+			margin-right: 12rpx;
+			position: relative;
+			top: 8rpx;
+		}
+		.device-id{
+			height: 60rpx;
+			line-height: 60rpx;
+			margin-bottom: 18rpx;
+			color: #5C5C5C;
+			.float-right{
+				float: right;
+				width: 88px;
+				height: 30px;
+				text-align: center;
+				position: absolute;
+				top: 0;
+				right: 0;
+				border-top-right-radius: 24rpx;
+			}
+		}
+		
+		.on {
+			background-image: url('/static/images/cb/online.png');
+			color: #fff;
+		}
+		
+		.off {
+			background-image: url('/static/images/cb/outline.png');
+			color: #999999;
+		}
+		.info {
+			position: relative;
+			padding: 8rpx 32rpx 32rpx 32rpx;
+			
+			line-height: 50rpx;
+			font-size: 26rpx;
+			border-radius: 24rpx;
+			
+			background-color: #fff;
+			
+			box-sizing: border-box;
+			width: 100%;
+			.info-list{
+				overflow: hidden;
+				font-size: 12px;
+				.float-right{
+					float: right;
+					color: #666;
+					.arrow{
+						margin-left: 10rpx;
+					}
+				}
+				.float-left{
+					float: left;
+					color: #999;
+				}
+				
+			}
+			.tishi {
+				width: 28rpx;
+				height: 28rpx;
+				margin: 0rpx 0 0 12rpx;
+				position: relative;
+				top: 6rpx;
+			}
+		}
+
+		
+
+		
+
+		.tit {
+			font-weight: 800;
+			height: 50rpx;
+			font-size: 30rpx;
+			margin-bottom: 20rpx;
+			display: flex;
+			justify-content: space-between;
+
+			.span {
+				color: #6e6c76;
+				font-size: 24rpx;
+				display: flex;
+				justify-content: space-between;
+				/* margin-top: 12rpx; */
+			}
+		}
+
+		.newtishi {
+			width: 90%;
+			margin: 0 auto;
+			text-align: center;
+			padding-top: 40rpx;
+			font-size: 32rpx;
+
+			.dataloading:after {
+				overflow: hidden;
+				display: inline-block;
+				vertical-align: bottom;
+				animation: ellipsis 2s infinite;
+				content: "\2026";
+			}
+
+			@keyframes ellipsis {
+				from {
+					width: 2px;
+				}
+
+				to {
+					width: 15px;
+				}
+			}
+		}
+
+		.newState {
+			display: flex;
+			flex-wrap: wrap;
+			text-align: center;
+			margin: 0 -10rpx;
+
+			.item {
+				display: flex;
+				flex-wrap: nowrap;
+				margin: 10rpx;
+				width: 316rpx;
+				justify-content: flex-start;
+				padding: 20rpx 10rpx;
+				box-sizing: border-box;
+				border-radius: 4px;
+			
+				background-color: #fff;
+				font-size: 24rpx;
+				.info-text{
+					line-height: 76rpx;
+					padding-left: 30rpx;
+					font-size: 14px;
+					color: #666666;
+				}
+				.info-con {
+					padding-left: 30rpx;
+					text-align: left;
+					line-height: 40rpx;
+					color: #666666;
+					.active{
+						font-size: 36rpx;
+					}
+					.val{
+						font-size: 24rpx;
+					}
+				}
+
+				.item_info_img {
+					width: 30%;
+					text-align: center;
+
+					image {
+						width: 64rpx;
+						height: 64rpx;
+						margin-top: 10rpx;
+					}
+				}
+				
+			}
+		}
+
+		.btn-box {
+			text-align: center;
+			padding: 30rpx;
+		}
+
+		.field {
+			/deep/.uni-input-input {
+				border: 2rpx solid #FF0000;
+				border-radius: 24rpx;
+				width: 140px;
+				padding-left: 10rpx;
+				box-sizing: border-box;
+			}
+		}
+	}
+
+	/deep/.u-calendar__action {
+		display: flex;
+		justify-content: space-around;
+
+		.u-calendar__action__text {
+			line-height: 25px;
+		}
+	}
+
+	.red {
+		color: rgb(235, 103, 101);
+	}
+</style>

pages/irrigate/index.vue

@@ -104,7 +104,7 @@
 							<p>最新上报时间：{{item.uptime|timeFormat()}}</p>
 						</view>
 					</view>
-					<view class="" v-if="side_type=='zs'">
+					<view class="" v-if="side_type=='zs'|| side_type=='fm'">
 						<image src="http://www.hnyfwlw.com:8006/bigdata_app/image/prevention/6.png" mode=""
 							class="prevents_item_img"></image>
 						<view class="prevents_item_top">
@@ -185,6 +185,12 @@
 					list: [],
 					pageIndex: 1,
 					tf: false,
+				}, {
+					name: '阀门控制器',
+					type: 'fm', //阀门控制器
+					list: [],
+					pageIndex: 1,
+					tf: false,
 				}
 				],
 				active: 0, //tab选中的下标
@@ -208,7 +214,22 @@
 						devQuery: this.imports,//模糊搜索
 					}
 				})
-				console.log(res,'详情')
+				// console.log(res,'详情')
+				this.loadingtf = false
+				this.eqlistdata = this.eqlistdata.concat(res)
+				console.log(this.eqlistdata)
+			},
+			async fmlist() {
+				this.loadingtf = true
+				const res = await this.$myRequest({
+					url: '/api/v2/iot/device/sf/zsrf/list/',
+					data: {
+						pageNum: this.page,
+						pageSize: "10",
+						devQuery: this.imports,//模糊搜索
+					}
+				})
+				// console.log(res,'详情')
 				this.loadingtf = false
 				this.eqlistdata = this.eqlistdata.concat(res)
 				console.log(this.eqlistdata)
@@ -297,6 +318,10 @@
 					uni.navigateTo({
 						url: "../waterandferZS/details?shebei=" + JSON.stringify(data)
 					})
+				}else if(this.side_type == 'fm') {
+					uni.navigateTo({
+						url: "../fmSys/details?info=" + JSON.stringify(data)
+					})
 				}
 			},
 			top() {
@@ -312,23 +337,11 @@
 				Debounce(() => {
 					this.page = 1
 					this.eqlistdata = []
-					if (this.side_type == 18) {
-						this.eqlist()
-					} else if (this.side_type == 17) {
-						this.tubulareqlist()
-					} else if (this.side_type == 13) {
-						this.sfeqlist()
-					} else if (this.side_type == 'xph') {
-						this.xphlist()
-					}else if (this.side_type == 'zs') {
-						this.zslist()
-					}
+					this.getEquipList(this.side_type)
+					
 				}, 1000)()
 			},
-			tabClick(index, type) {
-				this.active = index
-				this.side_type = type
-				this.page = 1
+			getEquipList(type){
 				if (type == 18) {
 					this.eqlistdata = []
 					this.eqlist()
@@ -344,8 +357,18 @@
 				} else if (type == 'zs') {
 					this.eqlistdata = []
 					this.zslist()
+				} else if (type == 'fm') {
+					this.eqlistdata = []
+					this.fmlist()
 				}
 			},
+			tabClick(index, type) {
+				this.active = index
+				this.side_type = type
+				this.page = 1
+				this.getEquipList(type)
+			
+			},
 			timezhuan(time) {
 				function fun(a) {
 					return String(a).length == 1 ? '0' + a : a
@@ -535,24 +558,15 @@
 							case 400:
 								this.equipArr[4].tf = true
 								break;
-							// case 398:
-							// 	this.equipArr[5].tf = true
-							// 	break;
+							case 398:
+								this.equipArr[5].tf = true
+								break;
 						}
 					}
 					for (var i = 0; i < this.equipArr.length; i++) {
 						if (this.equipArr[i].tf) {
-							if (i == 0) {
-								this.tubulareqlist();
-							} else if (i == 1) {
-								this.eqlist();
-							} else if (i == 2) {
-								this.sfeqlist();
-							} else if(i == 3) {
-								this.xphlist();
-							}else if(i == 4){
-								this.zslist()
-							}
+							this.getEquipList(this.equipArr[i].type)
+
 							this.active = i
 							this.side_type = this.equipArr[i].type
 							break
@@ -564,17 +578,8 @@
 		onReachBottom() {
 			this.page++
 			// this.eqlist()
-			if (this.side_type == 18) {
-				this.eqlist()
-			} else if (this.side_type == 17) {
-				this.tubulareqlist()
-			} else if (this.side_type == 13) {
-				this.sfeqlist()
-			} else if (this.side_type == 'xph') {
-				this.xphlist()
-			}else if (this.side_type == 'zs') {
-				this.zslist()
-			}
+			this.side_type
+			this.getEquipList(this.side_type)
 		},
 		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
 			if (e.scrollTop > 200) { //距离大于200时显示

pages/prevention/index.vue

@@ -16,6 +16,13 @@
 			<view class="loading" v-if="loadingtf">
 				<image src="../../static/images/ajax-loader.gif" mode="" class="img"></image>
 			</view>
+			<view class="tab-box">
+				<view v-for="(item,index) in equipArr" :key="index"
+					@click="tabClick(index,item)" :class="['tab-item',active==index?'active':'']">
+					<text>{{item.type_name}}</text>
+					<text class="bottom-line"></text>
+				</view>
+			</view>
 			<view class="prevents">
 				<view class="prevents_item" v-for="item,index in eqlistdata" :key="index" @click="eqdetails(item)">
 					<image
@@ -91,6 +98,8 @@
 				content: "",
 				allqingchong: false,
 				showLastTime: false,
+				active:0,
+				equipArr:[{type_name:'杀虫灯',id:2,device_model:0},{type_name:'风吸式杀虫灯',id:2,device_model:101}]
 			}
 		},
 		methods: {
@@ -112,6 +121,26 @@
 					}
 				};
 			},
+			async usertype() { 
+							const res = await this.$myRequest({
+								url: '/api/api_gateway?method=home.homes.user_device_type',
+								data:{
+									model:'防治'
+								}
+							})
+							console.log('防治设备列表',res)
+							this.equipArr = res
+							this.eqlist()
+							
+						},
+			tabClick(index, item) {
+				
+				this.active = index
+				this.page = 1
+				this.eqlistdata = []
+				this.eqlist()
+	
+			},
 			async eqlist() { //设备列表
 				this.loadingtf = true
 				const res = await this.$myRequest({
@@ -121,7 +150,8 @@
 						page: this.page,
 						page_size: "10",
 						device_status: this.device_status,
-						device_id: this.imports
+						device_id: this.imports,
+						device_model:this.equipArr[this.active].device_model
 					}
 				})
 				this.loadingtf = false
@@ -237,7 +267,7 @@
 		},
 		onLoad() {
 			this.getworm()
-			this.eqlist()
+			this.usertype()
 			uni.getStorage({
 				key: "jurisdiction",
 				success: (res) => {
@@ -309,11 +339,47 @@
 			height: 40rpx;
 		}
 	}
-
+		.tab-box {
+			position: fixed;
+			top: 170px;
+			font-size: 30rpx;
+			line-height: 80rpx;
+			background-color: #ffffff;
+			width: 100vw;
+			z-index: 2;
+			overflow-y: hidden;
+			overflow-x: auto;
+			white-space: nowrap;
+			margin-top: -10rpx;
+			.tab-item {
+				cursor: pointer;
+				position: relative;
+				padding: 10rpx 20rpx;
+				text-align: center;
+				display: inline-block;
+				span{
+					display: inline-block;
+				}
+			}
+			
+			.tab-item.active {
+				.bottom-line {
+					bottom: 0;
+					position: absolute;
+					display: inline-block;
+					width: 90rpx;
+					height: 6rpx;
+					left: 0;
+					right: 0;
+					margin: auto;
+					background: $uni-color-success;
+				}
+			}
+		}
 	.prevents {
 		width: 100%;
 		position: absolute;
-		top: 140px;
+		top: 180px;
 
 		.prevents_item {
 			width: 95%;