uni-zhihuikuangshan-2/components/t-p-n-section-1/t-p-n-section-1.vue

<!-- 宁煤集团-数据统计版本 -->
<template>
	<view>
		<view class="content">

			<view class="section">
				<view class="title">
					<view class="line"></view>
					<view class="text">监测监控类</view>
					<view class="line"></view>
				</view>
				<view class="list">
					<view class="item" style="background-color: #FE882E;" @click="go_video()">
						<view class="icon">
							<image src="./icon/section_3_icon_1.png" mode=""></image>
						</view>
						<view class="name">工业视频</view>
					</view>
					<view class="item" style="background-color: #4DA5FC;" @click="go_shangtang()">
						<view class="icon">
							<image src="./icon/section_3_icon_2.png" mode=""></image>
						</view>
						<view class="name">AI视频分析</view>
					</view>
					<view class="item" style="background-color: #4DA5FC;" @click="go_safety_monitoring()">
						<view class="icon">
							<image src="./icon/section_3_icon_3.png" mode=""></image>
						</view>
						<view class="name">安全监测</view>
					</view>
					<view class="item" style="background-color: #CB50F9;" @click="go_personnel_orientation()">
						<view class="icon">
							<image src="./icon/section_3_icon_4.png" mode=""></image>
						</view>
						<view class="name">人员定位</view>
					</view>
					<view class="item" style="background-color: #00D679;" @click="go_zdhxt('kyjc')">
						<view class="icon">
							<image src="./icon/section_3_icon_5.png" mode=""></image>
						</view>
						<view class="name">矿压监测</view>
					</view>
					<view class="item" style="background-color: #8BC8DA;" @click="go_zdhxt('glyq')">
						<view class="icon">
							<image src="./icon/section_3_icon_6.png" mode=""></image>
						</view>
						<view class="name">锅炉烟气</view>
					</view>

				</view>
			</view>

			<view class="section">
				<view class="title">
					<view class="line"></view>
					<view class="text">生产类</view>
					<view class="line"></view>
				</view>
				<view class="list">
					<view class="item" @click="go_record('ba8e5fa1c63d4f14a0f4cabb3ec585fc')">
						<view class="icon">
							<image src="./icon/section_1_icon_1.png" mode=""></image>
						</view>
						<view class="name">采煤</view>
					</view>
					<view class="item" style="background-color: #CB50F9;"
						@click="go_record('a1547d077a7e46b0a8197b8c034e2dee')">
						<view class="icon">
							<image src="./icon/section_1_icon_2.png" mode=""></image>
						</view>
						<view class="name">掘进</view>
					</view>
					<view class="item" style="background-color: #8BC8DA;" @click="go_zdhxt('zys')">
						<view class="icon">
							<image src="./icon/section_1_icon_3.png" mode=""></image>
						</view>
						<view class="name">主运输</view>
					</view>
					<view class="item" style="background-color: #00D679;" @click="go_production_statistics()">
						<view class="icon">
							<image src="./icon/section_1_icon_4.png" mode=""></image>
						</view>
						<view class="name">生产报表</view>
					</view>
					<view class="item" style="background-color: #F95877;" @click="go_zdhxt('xdt')">
						<view class="icon">
							<image src="./icon/section_1_icon_5.png" mode=""></image>
						</view>
						<view class="name">巷道图</view>
					</view>
					<view class="item" style="background-color: #FE882E;" @click="show_toast()">
						<view class="icon">
							<image src="./icon/section_1_icon_6.png" mode=""></image>
						</view>
						<view class="name">化工</view>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="title">
					<view class="line"></view>
					<view class="text">辅助类</view>
					<view class="line"></view>
				</view>
				<view class="list">
					<view class="item" style="background-color: #FE882E;" @click="go_zdhxt('tfgl')">
						<view class="icon">
							<image src="./icon/section_2_icon_1.png" mode=""></image>
						</view>
						<view class="name">主扇通风</view>
					</view>
					<view class="item" style="background-color: #4DA5FC;" @click="show_toast()">
						<view class="icon">
							<image src="./icon/section_2_icon_2.png" mode=""></image>
						</view>
						<view class="name">电力监控</view>
					</view>
					<view class="item" style="background-color: #4DA5FC;" @click="go_water_affairs()">
						<view class="icon">
							<image src="./icon/section_2_icon_3.png" mode=""></image>
						</view>
						<view class="name">智慧水务</view>
					</view>
					<view class="item" style="background-color: #CB50F9;" @click="go_zdhxt('psxt')">
						<view class="icon">
							<image src="./icon/section_2_icon_4.png" mode=""></image>
						</view>
						<view class="name">排水系统</view>
					</view>
					<view class="item" style="background-color: #8BC8DA;" @click="go_zdhxt('yfzd')">
						<view class="icon">
							<image src="./icon/section_2_icon_6.png" mode=""></image>
						</view>
						<view class="name">压风制氮</view>
					</view>
					<view class="item" style="background-color: #FE882E;"
						@click="go_record('b89076dac2cd45a8831ee8d3e85b4ed6')">
						<view class="icon">
							<image src="./icon/section_2_icon_7.png" mode=""></image>
						</view>
						<view class="name">设备健康诊断</view>
					</view>
					<view class="item" style="background-color: #F95877;" @click="show_toast()">
						<view class="icon">
							<image src="./icon/section_2_icon_8.png" mode=""></image>
						</view>
						<view class="name">胶轮车监控</view>
					</view>
					<view class="item" style="background-color: #CB50F9;" @click="go_zdhxt('jkrc')">
						<view class="icon">
							<image src="./icon/section_2_icon_9.png" mode=""></image>
						</view>
						<view class="name">架空乘人器</view>
					</view>
					<view class="item" style="background-color: #00D679;" @click="go_zdhxt('tsj')">
						<view class="icon">
							<image src="./icon/section_2_icon_10.png" mode=""></image>
						</view>
						<view class="name">副井提升</view>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="title">
					<view class="line"></view>
					<view class="text">重点场所</view>
					<view class="line"></view>
				</view>
				<view class="list">
					<view class="item" style="background-color: #FE882E;"
						@click="go_record('58915240cbff480d87ce20cbdfa66a87')">
						<view class="icon">
							<image src="./icon/section_4_icon_1.png" mode=""></image>
						</view>
						<view class="name">南湖</view>
					</view>
					<view class="item" style="background-color: #4DA5FC;" @click="show_toast()">
						<view class="icon">
							<image src="./icon/section_4_icon_2.png" mode=""></image>
						</view>
						<view class="name">班前会</view>
					</view>
					<view class="item" style="background-color:#F95877;"
						@click="go_record('4c1dbe725d8d485e9c58ab81c9f1fd5d')">
						<view class="icon">
							<image src="./icon/section_4_icon_3.png" mode=""></image>
						</view>
						<view class="name">培训课堂</view>
					</view>

				</view>
			</view>

			<!-- <view class="section">
				<view class="title">
					<view class="line"></view>
					<view class="text">实时预警</view>
					<view class="line"></view>
				</view>
				<view class="table" v-if="list">
					<uni-table emptyText="暂无更多数据" stripe>
						<uni-tr>
							<uni-th align="center">时间</uni-th>
							<uni-th align="center" width="90">单位</uni-th>
							<uni-th align="center">地点</uni-th>
							<uni-th align="center">报警内容</uni-th>
						</uni-tr>
						<uni-tr v-for="(item,index) in list" :key="index" v-if="index < 5">
							<uni-td style="vertical-align: middle;" align="center">
								<view>{{item.enter_time}}</view>
							</uni-td>
							<uni-td style="vertical-align: middle;" align="center">
								<view>{{item.coal_name}}</view>
							</uni-td>
							<uni-td style="vertical-align: middle;" align="center">
								<view>{{item.survey_name}}</view>
							</uni-td>
							<uni-td style="vertical-align: middle;" align="center">
								<view>{{item.abnormal_reason}}</view>
							</uni-td>
						</uni-tr>

					</uni-table>

					<view class="btn">
						<view class="icon">
							<image src="./icon/btn.png" mode=""></image>
						</view>
						<view class="btn_text" @click="go_real_time_alarm()">点击查看全部信息</view>
					</view>
				</view>
			</view> -->
		
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-p-n-section-1",
		data() {
			return {
				list: []
			};
		},
		mounted() {
			// this.get_ycbj_list()
		},
		methods: {
			get_ycbj_list() {
				this.$p_api.get_ycbj_list({

				}).then((res) => {
					this.list = res.data.content
				})
			},
			show_toast() {
				uni.showToast({
					icon: "none",
					title: "正在建设中..."
				})
			},
			go_real_time_alarm() {
				uni.navigateTo({
					url: "../../ningdongyunying/real_time_alarm/real_time_alarm"
				})
			},
			go_record(pageId) {
				uni.navigateTo({
					url: "../../index/record/record?mine_code=ningmeijituan&pageId=" + pageId
				})
			},
			// 自动化统计列表
			go_zdhxt(zdhxt) {
				uni.navigateTo({
					url: "../../production/zidonghua/zidonghua?zdhxt=" + zdhxt
				})
			},
			// 视频监控
			go_video() {
				uni.navigateTo({
					url: "../../production/video_monitor/video_monitor?mine_code=ningmeijituan"
				})
			},
			// 生产统计
			go_production_statistics() {
				uni.navigateTo({
					url: "../../ningdongyunying/production_statistics/production_statistics"
				})
			},
			// 人员定位
			go_personnel_orientation() {
				uni.navigateTo({
					url: "../../ningdongyunying/personnel_orientation/personnel_orientation"
				})
			},
			// 安全监测
			go_safety_monitoring() {
				uni.navigateTo({
					url: "../../ningdongyunying/safety_monitoring/safety_monitoring"
				})
			},
			// 商汤
			go_shangtang() {
				uni.navigateTo({
					url: "../../production/shangtang/shangtang"
				})
			},
			go_water_affairs() {
				uni.navigateTo({
					url: "../../production/water_affairs/water_affairs"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		padding: 20rpx 25rpx 0;

		margin-bottom: 150rpx;

		.section {
			.title {
				line-height: 90rpx;
				font-size: 34rpx;
				color: #424242;
				font-weight: 700;

				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					margin: 0 20rpx;
				}

				.line {
					width: 100rpx;
					height: 2rpx;
					background-color: #BFBFBF;
				}
			}

			.list {
				display: grid;
				grid-template-columns: 200rpx 200rpx 200rpx;
				grid-column-gap: 50rpx;
				grid-row-gap: 40rpx;
				.item {
					width: 200rpx;
					height: 166rpx;
					background-color: #4DA5FC;
					text-align: center;

					box-sizing: border-box;
					padding-top: 25rpx;
					padding-bottom: 34rpx;

					margin-right: 50rpx;
					border-radius: 16rpx;

					.icon {
						image {
							width: 64rpx;
							height: 64rpx;
						}
					}

					.name {
						margin-top: 4rpx;
						font-size: 28rpx;
						font-weight: 700;
						color: #FFFFFF;
					}
				}

				.item:nth-child(3n) {
					margin-right: 0;
				}
			}

			.table {
				.uni-table-th {
					color: #FFFFFF;
					background-color: #00A0E8;
				}

				.uni-table-th.table--border {
					border: none;
				}

				.uni-table-td.table--border {
					color: #666666;
					border: none;
				}

				position: relative;

				margin:0 -25rpx 20rpx;
				width: 750rpx;

				.btn {
					margin: 40rpx auto 0;
					width: 400rpx;
					height: 50rpx;

					background-color: #69BBFA;
					border-radius: 50rpx;

					display: flex;
					align-items: center;
					justify-content: center;

					.icon {
						image {
							width: 23rpx;
							height: 24rpx;

							display: block;
						}
					}

					.btn_text {
						margin-left: 10rpx;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}

		}

	}
</style>