uni-zhihuikuangshan-2/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() {
				uni.showLoading({
					mask: true
				})
				this.$p_api.jt_safety_info_part({
					mine_code: this.mine_code_index
				}).then((res) => {
					uni.hideLoading()
					// 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)

				uni.navigateTo({
					url: "../../production/safety_monitoring/safety_monitoring?mine=" + 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>