uni-zhihuikuangshan-2/components/t-p-zaoquan/t-p-zaoquan.vue

<template>
	<view>
		<view class="top">
			<image src="./icon/top.gif" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="nav" v-for="(item,index) in nav" :key="index">
				<view class="title" v-if="item.title">{{item.title}}</view>
				<view class="list">
					<view class="item" v-for="(item_2,index_2) in item.list" :key="index_2" @click="navigator(item_2)">
						<view class="icon">
							<image :src="item_2.icon" mode="heightFix"></image>
						</view>
						<view class="name" v-html="item_2.name"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-p-zaoquan",
		data() {
			return {
				mine: "640181B0011010037723",
				org_num: "1014",
				mine_code: "zaoquan",

				nav: [{
						title: "智能监测",
						list: [{
								icon: require("./icon/icon_1.png"),
								module: "gkpt",
								name: "管控平台",
								url: "../../production/zaoquan/h5/h5?url=" + "http://zdh.zaoquan.nxjiewei.com:8011/home/dashboard"
							},
							{
								icon: require("./icon/icon_2.png"),
								module: "rydw",
								name: "人员定位",
								url: "../../production/personnel_orientation/personnel_orientation?mine=640181B0011010037723"
							},
							{
								icon: require("./icon/icon_3.png"),
								module: "aqjc",
								name: "安全监测",
								url: "../../production/safety_monitoring/safety_monitoring?mine=640181B0011010037723"
							},
							{
								icon: require("./icon/icon_4.png"),
								module: "spjk",
								name: "视频监控",
								url: "../../production/video_monitor/video_monitor?mine_code=zaoquan"
							},

							{
								icon: require("./icon/icon_6.png"),
								module: "scbb",
								name: "生产报表",
								url: "../../production/production_report/production_report?mine=640181B0011010037723&org_num=1014"
							}, {
								icon: require("./icon/icon_7.png"),
								module: "kjscl",
								name: "矿井水处理",
								url: "../../production/zaoquan/mine_water_treatment/mine_water_treatment?mine_code=zaoquan"
							},
							// {
							// 	icon: require("./icon/icon_5.png"),
							// 	module: "zncs",
							// 	name: "智能测速",
							// 	url: "../../production/zaoquan/intelligent_speed_measurement/intelligent_speed_measurement"
							// }
						]
					},
					{
						title: "智能生产",
						list: [{
								icon: require("./icon/sc_sj.png"),
								module: "zncm",
								name: "智能采煤",
								url: "../../production/zaoquan/control_platform/coal_mining/coal_mining"
							},
							// {
							// 	icon: require("./icon/sc_tongfeng.png"),
							// 	module: "zntf",
							// 	name: "智能通风",
							// 	url: "../../production/zaoquan/control_platform/ventilate/ventilate"
							// },
							// {
							// 	icon: require("./icon/sc_paishui.png"),
							// 	module: "znps",
							// 	name: "智能排水",
							// 	url: "../../production/zaoquan/control_platform/drainage/drainage",
							// },
							// {
							// 	icon: require("./icon/sc_zhidan.png"),
							// 	module: "yfzd",
							// 	name: "压风制氮",
							// },
							// {
							// 	icon: require("./icon/sc_yunshu.png"),
							// 	module: "znzy",
							// 	name: "智能主运",
							// },
							// {
							// 	icon: require("./icon/chart.png"),
							// 	module: "zngd",
							// 	name: "智能供电",
							// }
						]
					},
					{
						title: "智能辅助",
						list: [{
								icon: require("./icon/chart.png"),
								module: "zngd",
								name: "智能供电",
								url: "../../production/zaoquan/control_platform/substation/substation",
							},{
								icon: require("./icon/sc_paishui.png"),
								module: "znps",
								name: "智能排水",
								url: "../../production/zaoquan/control_platform/drainage/drainage",
							},
							{
								icon: require("./icon/sc_zhidan.png"),
								module: "yfzd",
								name: "1314<br/>压风制氮",
								url: "../../production/zaoquan/control_platform/air_nitrogen/air_nitrogen?title=1314压风制氮&sys_code=1314",
							},
							{
								icon: require("./icon/sc_zhidan.png"),
								module: "yfzd",
								name: "12采区<br/>压风制氮",
								url: "../../production/zaoquan/control_platform/air_nitrogen/air_nitrogen?title=12采区压风制氮&sys_code=12",
							}
						]
					},
					{
						title: "智能保障",
						list: [
							{
								icon: require("./icon/sc_tongfeng.png"),
								module: "zntf",
								name: "智能通风",
								url: "../../production/zaoquan/control_platform/ventilate/ventilate"
							},
						]
					},
					{
						title: "智慧园区",
						list: [
							{
								icon: require("./icon/icon_5.png"),
								module: "zncs",
								name: "智能测速",
								url: "../../production/zaoquan/intelligent_speed_measurement/intelligent_speed_measurement"
							}
						]
					},
					{
						title: "智能主运",
						list: [
							{
								icon: require("./icon/sc_yunshu.png"),
								module: "zys",
								name: "主运输",
								url: "../../production/zaoquan/control_platform/transport/transport"
							}
						]
					}
				]
			};
		},
		methods: {
			navigator(item) {
				if (!item.url) {
					uni.showToast({
						icon: "none",
						title: "暂未开通！"
					})
				} else {
					uni.showLoading({
						mask: true,
						title: "载入中..."
					})
					this.$p_api.product_data_query_power({
						staff_num: uni.getStorageSync('user').staff_num,
						data_module: item.module
					}).then((res) => {
						uni.hideLoading()
						if (res.data.content.status) {
							uni.navigateTo({
								url: item.url
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "没有查看权限！"
							})
						}
					})
				}
			},
			// 自动化统计列表
			go_zdhxt(zdhxt) {
				uni.navigateTo({
					url: "../../production/zaoquan/zidonghua_list/zidonghua_list?zdhxt=" + zdhxt
				})
			},
			// 生产报表
			go_production_report() {
				uni.navigateTo({
					url: "../../production/production_report/production_report?mine=" + this.mine + "&org_num=" +
						this.org_num,
				})
			},
			// 安全监测
			go_safety_monitoring() {
				uni.navigateTo({
					url: "../../production/safety_monitoring/safety_monitoring?mine=" + this.mine
				})
			},
			//人员定位
			go_personnel_orientation() {
				uni.navigateTo({
					url: "../../production/personnel_orientation/personnel_orientation?mine=" + this.mine
				})
			},
			// 视频监控
			go_video_monitor() {
				uni.navigateTo({
					url: "../../production/video_monitor/video_monitor?mine_code=" + this.mine_code
				})
			},
			// 电力监控
			go_power_monitoring() {
				uni.navigateTo({
					url: "../../production/zaoquan/power_monitoring/power_monitoring"
				})
			},
			// 矿井水处理
			go_mine_water_treatment() {
				uni.navigateTo({
					url: "../../production/zaoquan/mine_water_treatment/mine_water_treatment?mine_code=" + this
						.mine_code
				})
			},

			// 数据分析
			go_table() {
				uni.navigateTo({
					url: "../../production/statistical_analysis_table/statistical_analysis_table"
				})
			},

			go_zaoquan_h5() {
				uni.navigateTo({
					url: "../../production/zaoquan/h5/h5?url=" +
						"http://zdh.zaoquan.nxjiewei.com:8011/home/dashboard"
				})
			},

			go_vehicle() {
				uni.navigateTo({
					url: "../../production/zaoquan/intelligent_speed_measurement/intelligent_speed_measurement"
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		image {
			width: 750rpx;
		}
	}

	.content {
		background-color: #fff;
		border-radius: 60rpx;
		position: relative;
		top: -40rpx;

		.nav {
			padding-top: 60rpx;

			.title {
				position: relative;
				text-align: center;
				font-size: 36rpx;
				color: #383838;
				font-weight: 700;
				margin-bottom: 20rpx; 
			}

			.title::after {
				content: " ";
				position: absolute;
				left: 50%;
				bottom: -16rpx;
				width: 200rpx;
				height: 10rpx;
				background-image: linear-gradient(to right, transparent, #03A2E9);
				border-radius: 20rpx;
				transform: translateX(-50%);
			}

			.list {
				padding: 50rpx 20rpx 0;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 60rpx 20rpx;

				.item {
					text-align: center;

					.icon {
						margin-bottom: 20rpx;

						image {
							height: 54rpx;
						}
					}

					.name {
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>