uni-zhihuikuangshan/components/n-safety-monitoring-tab/n-safety-monitoring-tab.vue

<template>
	<view>
		<view class="tab">
			<view class="tab_title">
				<liuyuno-tabs ref="tab" :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
			</view>
			<view class="tab_content" @click="go_content()">
				<view class="inner">
					<view class="section_1">
						<view class="item">
							<view class="box">
								<view class="name">模拟量</view>
								<view class="num">{{simulation}}</view>
							</view>
						</view>
						<view class="item">
							<view class="box">
								<view class="name">开关量</view>
								<view class="num">{{sluice}}</view>
							</view>
						</view>
					</view>
					<view class="section_2">
						<view class="list_item">
							<view class="item" v-for="(item,index) in list" :key="index">
								<view class="item_title">
									<view class="item_icon">
										
										<image v-if="item.typeCode == '0001'" src="./icon/wasi.png" mode=""></image>
										<image v-if="item.typeCode == '0004'" src="./icon/Co1.png" mode=""></image>
										<image v-if="item.typeCode == '1010'" src="./icon/feng.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="(item_2,index_2) in item.normalCount" :key="index_2">
											<view class="name">{{item_2.name}}</view>
											<view class="num">{{item_2.count}}个</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultIndex: 0,
				// 标签栏目 煤矿名称列表
				tabs: [],
				// 煤矿编码数组
				tabs_mine_code:[],
				// 当前煤矿编码
				mine_code_index:"",
				
				// 模拟量
				simulation:0,
				// 开关量
				sluice:0,
				// 列表项
				list:[]
			};
		},
		mounted() {
			// 获取煤矿列表
			this.get_tabs()
			
		},
		methods:{
			tabClick(index) {
				this.defaultIndex = index
				// console.log(this.tabs_mine_code[index])
				
				// 切换当前煤矿编码
				this.mine_code_index = this.tabs_mine_code[index]
				// 切换后编码的煤矿详情数据查询
				this.get_jt_safety_info_part()
				
				// 将切换后的编码发送给页面
				this.$emit("code",this.mine_code_index)
			},
			// 获取煤矿列表
			get_tabs(){
				this.$p_api.jt_safety_mine_list({
					
				}).then((res)=>{
					// console.log(res.data.content.data)
					
					let data = res.data.content.data
					
					let tabs = []
					let mine_code = []
					
					data.map(function(item, index) {
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.mine_name;
						//将项放进新的数组
						tabs[index] = sevm
					})
					
					data.map(function(item, index) {
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.mine_code;
						//将项放进新的数组
						mine_code[index] = sevm
					})
					
					this.tabs = tabs
					this.tabs_mine_code = mine_code
					// console.log(mine_code[0])
					// 定义当前煤矿编码
					this.mine_code_index = mine_code[0]
					
					// 当前编码的煤矿详情数据查询
					this.get_jt_safety_info_part()
					
					// 将定义后的编码发送给页面
					this.$emit("code",this.mine_code_index)
				})
			},
			// 详情数据查询
			get_jt_safety_info_part(){
				this.$p_api.jt_safety_info_part({
					mine_code:this.mine_code_index
				}).then((res)=>{
					// console.log(res.data.content)
					let data = res.data.content
					
					// 模拟量总数
					this.simulation = data.count.simulation
					// 开关量总数
					this.sluice = data.count.sluice
					// 列表项
					this.list = data.data
				})
			},
		
			go_content(){
				console.log(this.mine_code_index)
			}
		}
	}
</script>

<style lang="scss">
	.tab{
		box-sizing: border-box;
		padding: 0 24rpx;
		.tab_title{
			 
		}
		.tab_content{
			.inner{
				// min-height: 300px;
				.section_1{
					margin: 40rpx 0;
					
					display: flex;
					justify-content: space-around;
					.item{
						width: 260rpx;
						height: 260rpx;
						background-color: #E1EFF8;
						border-radius: 50%;
						
						display: flex;
						justify-content: center;
						align-items: center;
						.box{
							width: 200rpx;
							height: 200rpx;
							border: 16rpx solid #FFFFFF;
							background-color: #57B3F4;
							border-radius: 50%;
							
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							
							color: #FFFFFF;
							.name{}
							.num{}
						}
					}
					.item:nth-child(2){
						background-color: #B7FFC1;
						.box{
							background-color: #2ECD73;
						}
					}
				}
				
				.section_2{
					.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;
											
											color: #2ECC71;
					
										}
									}
									.content_item:nth-child(2) .num{
										color: #E74C3C;
									}
									.content_item:nth-child(3) .num{
										color: #2C3E50;
									}
									.content_item:nth-child(4) .num{
										color: #2F54EB;
									}
								}
							}
						}
					}
							
							
				}
			}
		}
	}
	
	
</style>