uni-zhihuikuangshan/pages/production/safety_monitoring/safety_monitoring.vue

<template>
	<view>
		<!-- navbar -->
		<p-safety-monitoring-navbar :mine="mine"></p-safety-monitoring-navbar>
		
		<view style="margin-bottom: 200rpx;">
			<!-- 模拟量 -->
			<view v-if="active == 1">
				<p-safety-monitoring-content-1 :mine="mine" :simulation="simulation" :simulationList="simulationList"></p-safety-monitoring-content-1>
			</view>
			<!-- 开关量 -->
			<view v-if="active == 2">
				<p-safety-monitoring-content-2 :mine="mine" :sluice="sluice" :sluiceList="sluiceList"></p-safety-monitoring-content-2>
			</view>
		</view>
		
		<!-- tabbar -->
		<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 {
				mine:"",
				
				active:1,
				
				// 模拟量
				// 监测统计
				simulation:[],
				simulationList:[],
				
				
				// 开关量
				sluice:[],
				sluiceList:[],
			};
		},
		onLoad(option) {
			this.mine = option.mine
			
			
			// 模拟量统计
			this.getSimulation()
			
			
			// 开关量统计
			this.getSluice()
			
		},
		methods:{
			click_item(item){
				this.active = item
			
			},
			// 模拟量统计
			getSimulation(){
				uni.showLoading()
				this.$p_api.jt_safety_simulation_total({
					mine:this.mine,
					mine_code:this.mine
				}).then((res)=>{
					uni.hideLoading()
					// console.log(res)
					this.simulation = res.data.content.total
					this.simulationList = res.data.content.data
				})
			},
			
			// 开关量统计
			getSluice(){
				uni.showLoading()
				this.$p_api.jt_safety_sluice_total({
					mine:this.mine,
					mine_code:this.mine
				}).then((res)=>{
					uni.hideLoading()
					// console.log(res.data.content)
					this.sluice = res.data.content.total
					this.sluiceList = res.data.content.data
				})
				
			},
			
		}
	}
</script>

<style lang="scss">
	.tabbar{
		z-index: 999;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		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>