uni-zhks-app/pages/p-i-safety-monitoring/p-i-safety-monitoring.vue

<template>
	<view>
		<!-- navbar -->
		<p-i-s-navbar></p-i-s-navbar>
		
		<view style="margin-bottom: 200rpx;">
			<!-- 模拟量 -->
			<view v-if="active == 1">
				<p-i-s-content-1 :simulation="simulation" :simulationList="simulationList"></p-i-s-content-1>
			</view>
			<!-- 开关量 -->
			<view v-if="active == 2">
				<p-i-s-content-2 :sluice="sluice" :sluiceList="sluiceList"></p-i-s-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 {
				active:1,
				
				// 模拟量
				// 监测统计
				simulation:[],
				simulationList:[],
				// simulationList_img:[],
				
				
				// 开关量
				sluice:[],
				sluiceList:[],
			};
		},
		onLoad() {
			// 模拟量
			this.getSimulation()
			this.getSimulationList()
			
			
			// 开关量
			this.getSluice()
			this.getSluiceList()
			
		},
		methods:{
			click_item(item){
				this.active = item
			
			},
			// 模拟量
			// 监测统计
			async getSimulation(){
				const res = await this.$myRequest({
					method:"POST",
				    url: '/safety/total',
					header: {
						'Content-Type': 'application/json', 
					},
					data:{
						type:"simulation"
					}
				})
				
				console.log(res.data.data)
				this.simulation = res.data.data
				
			},
			// 统计项
			async getSimulationList(){
				console.log()
				const res = await this.$myRequest({
					method:"POST",
				    url: '/safety/simulation/total',
					header: {
						'Content-Type': 'application/json', 
						'Authorization':uni.getStorageSync('Authorization'),
					},
				})
				
				console.log(res.data.data)
				this.simulationList = res.data.data
				
				
				// this.originArr = this.simulationList
				// // 新数组,用来装数据
				// var newArr = [];
				// //通过map方法将原始数组中的每一项循环
				// 	this.originArr.map(function(item,index){
				// 	//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
				// 	var sevm = {};
				// 	//给每一项中的参数初始化并赋值
				// 	sevm = item.typeCode;
				// 	//将项放进新的数组
				// 	newArr[index] = sevm
				// })
			},
			
			// 开关量
			async getSluice(){
				const res = await this.$myRequest({
					method:"POST",
				    url: '/safety/total',
					header: {
						'Content-Type': 'application/json', 
					},
					data:{
						type:"sluice"
					}
				})
				
				console.log(res.data.data)
				this.sluice = res.data.data
				
			},
			// 统计项
			async getSluiceList(){
				console.log()
				const res = await this.$myRequest({
					method:"POST",
				    url: '/safety/sluice/total',
					header: {
						'Content-Type': 'application/json', 
						'Authorization':uni.getStorageSync('Authorization'),
					},
				})
				
				console.log(res.data.data)
				this.sluiceList = res.data.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>