uni-zhihuikuangshan/components/t-p-n-section-1/t-p-n-section-1 - 九宫格版本.vue

<!-- 宁煤集团-数据统计版本 -->
<template>
	<view class="content">
		<view class="item_box" style="background-color: #34495D;" @click="go_zdhxt('xdt')">
			<view class="img">
				<image src="../t-p-icon/icon_13.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">巷道图</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #638BD5;" @click="go_production_statistics()">
			<view class="img">
				<image src="../t-p-icon/icon_2.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">生产报表</view>
				<view class="tip">当日产量{{days_output}}吨</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #A3A2E4;" @click="go_personnel_orientation()">
			<view class="img">
				<image src="../t-p-icon/icon_3.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">人员定位</view>
				<view class="tip">井下人数{{mineall_people}}人</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #8BC8DA;" @click="go_safety_monitoring()">
			<view class="img">
				<image src="../t-p-icon/icon_4.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">安全监测</view>
				<!-- <view class="tip">6268监测点</view> -->
			</view>
		</view>
		<view class="item_box" style="background-color: #9AE2A2;" @click="go_zdhxt('tfgl')">
			<view class="img">
				<image src="../t-p-icon/icon_5.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">通风管理</view>
			</view>
		</view>
		<!-- <view class="item_box" style="background-color: #FBB47B;" @click="go_h5('http://nmjt.nxjiewei.com:8011/web/monitor/video/videoList?mine_code=')"> -->
		<view class="item_box" style="background-color: #FBB47B;" @click="go_h5('http://webdevelop.nxjiewei.com/assets/html/video/?mine_code=')">
			<view class="img">
				<image src="../t-p-icon/icon_6.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">视频监控</view>
				<view class="tip">工业视频</view>
			</view>
		</view>
		<!-- <view class="item_box" style="background-color: #FA8B89;" @click="go_risk_precontr0l()">
			<view class="img">
				<image src="../t-p-icon/icon_7.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">风险预控</view>
				<view class="tip">分数统计</view>
			</view>
		</view> -->
		<!-- <view class="item_box" style="background-color: #009FE8;" @click="go_h5('http://ningdongyunying.nxjiewei.com:8011/web/monitor/performanceRanking/performanceRanking')">
			<view class="img">
				<image src="../t-p-icon/icon_1.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">绩效排名</view>
				<view class="tip">绩效考核分数统计</view>
			</view>
		</view> -->
		<view class="item_box" style="background-color: #005754;" @click="go_zdhxt('tsj')">
			<view class="img">
				<image src="../t-p-icon/icon_15.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">提升机</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #2C3E50;" @click="go_zdhxt('zys')">
			<view class="img">
				<image src="../t-p-icon/icon_8.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">主运输</view>
				<view class="tip">主运输皮带</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #2873FF;" @click="go_zdhxt('psxt')">
			<view class="img">
				<image src="../t-p-icon/icon_9.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">排水系统</view>
				<view class="tip">中央水泵</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #8BC8DA;" @click="go_zdhxt('yfzd')">
			<view class="img">
				<image src="../t-p-icon/icon_10.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">压风制氮</view>
				<view class="tip">压风制氮系统 </view>
			</view>
		</view>
		<view class="item_box" style="background-color: #A3A2E4;" @click="go_rongzhi()">
			<view class="img">
				<image src="../t-p-icon/icon_14.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">设备监测</view>
				<view class="tip">容知设备监控</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #31B3F7;" @click="go_zdhxt('kyjc')">
			<view class="img">
				<image src="../t-p-icon/icon_11.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">矿压监测</view>
			</view>
		</view>
		<!-- <view class="item_box" style="background-color: #5175E3;" @click="go_shangtang()">
			<view class="img">
				<image src="../t-p-icon/icon_4.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">视频分析</view>
			</view>
		</view> -->
		<view class="item_box" style="background-color: #4B81EE;" @click="go_zdhxt('jkrc')">
			<view class="img">
				<image src="../t-p-icon/icon_16.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">架空人车</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #CCCCCC;" @click="go_zdhxt('glyq')">
			<view class="img">
				<image src="../t-p-icon/icon_17.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">锅炉烟气</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "t-p-n-section-1",
		data() {
			return {
				mine_code: "",		
				
				mineall_people: "",
				days_output: ""
			};
		},
		created() {
			// 人员定位
			this.$p_api.personnel_mineall_total({
				mine: "all"
			}).then((res) => {
				this.mineall_people = res.data.data.total + res.data.data.mine_leader_total + res.data
					.data.company_leader_total
			})
			
			// 当日生产
			this.$p_api.coalmine_output({
			
			}).then((res) => {
				this.days_output = res.data.data.total
			})
			
		},
		methods: {
			// 自动化统计列表
			go_zdhxt(zdhxt) {
				uni.navigateTo({
					// url: "../../production/zidonghua/zidonghua?url=" + "http://webdevelop.nxjiewei.com/assets/html/E-zidonghua/?zdhxt=" + zdhxt
					url: "../../production/zidonghua/zidonghua?zdhxt=" + zdhxt
				})
			},
			// 生产统计
			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_risk_precontr0l() {
				uni.navigateTo({
					url: "../../ningdongyunying/risk_precontrol/risk_precontrol"
				})
			},
			// 视频监控
			go_h5(url) {
				// uni.navigateTo({
				// 	url: "../../ningdongyunying/h5/h5?url=" + url
				// })
				
				// 原生 rtsp流
				uni.navigateTo({
					url:"../../production/video_monitor_app/video_monitor_app?mine_code=ningmeijituan"
				})
			},
			go_rongzhi(){
				
				if(uni.getStorageSync('mine_code') != 'ningmeijituan'){
					uni.navigateTo({
						url: "../../ningdongyunying/h5/h5?url=" + "http://rongzhi.nxjiewei.com:8011/h5/#/auth"
					})
				}else{
					uni.navigateTo({
						url:"../../index/record/record?mine_code=ningmeijituan&pageId=b89076dac2cd45a8831ee8d3e85b4ed6"
					})
				}
				
			},
			
			// 商汤
			go_shangtang(){
				uni.navigateTo({
					url:"../../production/shangtang/shangtang"
				})
			}
		}
	}
</script>

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

		overflow: hidden;


		.item_box {
			float: left;

			width: 220rpx;
			height: 280rpx;

			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 16rpx;

			.img {
				box-sizing: border-box;
				padding-top: 40rpx;
				text-align: center;

				image {
					width: 140rpx;
					height: 140rpx;
				}
			}

			.text {
				text-align: center;
				color: #FFFFFF;
				line-height: 40rpx;

				.name {
					font-size: 28rpx;
				}

				.tip {
					font-size: 24rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

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

	}
</style>