JiangNingUmale-h5/pages/index.vue

<!--
 * @Author: 张涛
 * @Date: 2023-11-06 14:04:41
 * @LastEditors: JC9527
 * @LastEditTime: 2024-01-12 19:29:54
 * @FilePath: \JiangNingUmale-App\pages\index.vue
-->
<template>
	<view class="page">
		<u-navbar title="首页" :placeholder="true" :isBack="false" :is-fixed='false' />
		<view class="welcome">
			<text class="title">欢迎登录城市精细化治理系统</text>
			<text class="name">{{ userInfo ? userInfo.account : '' }}</text>
			<view class="date-weather">
				<text class="date"> {{ time ? time : "" }} </text>
				<text class="weather"> 天气晴 </text>
			</view>
		</view>
		<view class="main-content">
			<view class="work-center">
				<view v-for="(item, index) in grids" :key="index" @click="goPath(item)" style="position: relative">
					<image :src="item.gridImg" mode="" class="grid-img"></image>
					<text class="grid-name" :style="{ color: item.color }">{{ item.name }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
	// import { point, feature } from '@turf/helpers';
	// import circle from '@turf/circle';
	import { getUserIdByPoint } from "@/api/jn/login.js"
	import { clock, getStatus, judgmentPosition } from "@/api/jn/clock.js"
	import { listNews } from "@/api/jn/news";
	// import chujie from "@/plugins/mapJson/chujie.json"
	export default {
		data() {
			return {
				grids: [
					// {
					// 	name: "视频中心",
					// 	gridImg: "/static/images/umale/gr1.png",
					// 	color: "#0D306B",
					// 	subcolor: "#BE9085",
					// 	disable: false,
					// 	toPage: "/subcontract/work/videocenter/index",
					// },
					{
						name: "事件管理",
						gridImg: "/static/images/umale/gr2.png",
						color: "#0D516B",
						subcolor: "",
						disable: false,
						toPage: "/subcontract/work/event/index",
					},
					{
						name: "考勤打卡",
						gridImg: "/static/images/umale/gr3.png",
						color: "#6B480D",
						subcolor: "",
						disable: false,
						toPage: "/subcontract/work/attence/index",
					},
					{
						name: "任务管理",
						gridImg: "/static/images/umale/gr4.png",
						color: "#154F06",
						subcolor: "#C5A071",
						disable: false,
						toPage: "/subcontract/work/taskmanage/index",
					},
					{
						name: "违停记录",
						gridImg: "/static/images/umale/gr5.png",
						color: "#0D516B",
						subcolor: "#6E89B1",
						disable: false,
						toPage: "/subViolation/ViolationList/ViolationList",
					},
					{
						name: "脱岗记录",
						gridImg: "/static/images/umale/gr6.png",
						color: "#6B0D0D",
						subcolor: "",
						disable: false,
						toPage: "/subViolation/TuogangList/TuogangList",
					},
					// {
					// 	name: "通讯录",
					// 	gridImg: "/static/images/umale/gr7.png",
					// 	color: "#025629",
					// 	subcolor: "",
					// 	disable: false,
					// 	toPage: "/subViolation/AddressBook/AddressBook",
					// },
					// {
					// 	name: "安全生产监督",
					// 	gridImg: "/static/images/umale/gr8.png",
					// 	color: "#0D306B",
					// 	subcolor: "",
					// 	disable: false,
					// 	toPage: "/subViolation/ShengchanJiandu/ShengchanJiandu",
					// },
					// {
					//   name: "店铺信息查询(公众)",
					//   gridImg: "/static/images/umale/gr8.png",
					//   color: "#0D306B",
					//   subcolor: "",
					//   disable: false,
					//   toPage: "/subPublic/Store/Store",
					// },
					// {
					//   name: "门前三包服务(公众)",
					//   gridImg: "/static/images/umale/gr8.png",
					//   color: "#0D306B",
					//   subcolor: "",
					//   disable: false,
					//   toPage: "/subEnterprise/threeGuarantees/index",
					// },
					{
					  name: "活动管理(企业)",
					  gridImg: "/static/images/umale/gr8.png",
					  color: "#0D306B",
					  subcolor: "",
					  disable: false,
					  toPage: "/subEnterprise/activity/activity",
					},
					// {
					//   name: "整改工单管理(企业)",
					//   gridImg: "/static/images/umale/gr8.png",
					//   color: "#0D306B",
					//   subcolor: "",
					//   disable: false,
					//   toPage: "/subEnterprise/WorkOrder/WorkOrder",
					// },
				],
				userInfo: null,
				time: null,
				lat:null,
				lng:null,
				circleLat:null,
				circleLng:null,
				circleClock:null,
				times:null,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					title: "",
					status: 0
				},
			};
		},
		// 其他配置...
		onBackPress(options) {
			console.log("返回",options);
			if (options.from == 'backbutton' || options.from == 'navigateBack') {
				// 处理物理返回键或屏幕滑动返回手势
				uni.showModal({
					title: '退出应用',
					content: '您确定要退出应用吗？',
					success: function(res) {
						if (res.confirm) {
							// 用户选择了确认
							uni.exit();
						} else if (res.cancel) {
							// 用户选择了取消
						}
					}
				});
				return true; // 拦截返回事件，不继续执行返回操作
			}
			return false;
		},
		onLoad(){
			// this.getCircle();
			
			this.getUserLocation();
			this.times = setInterval(()=>{
				console.log("获取用户位置信息");
				this.getUserLocation();
			},10000)

		},
		mounted() {
			this.userInfo = uni.getStorageSync("userInfo")
			console.log(JSON.stringify(this.userInfo),"用户信息");
			const currentDate = new Date();
			const year = currentDate.getFullYear(); // 获取当前年份
			const month = currentDate.getMonth() + 1; // 获取当前月份（注意月份从0开始，需要加1）
			const day = currentDate.getDate(); // 获取当前日期
			this.time = year + "年" + month + "月" + day + "日";
			
		},
		onShow() {
			this.getNumber();
		},
		methods: {
			getNumber(){
				listNews({status: 0}).then((res) => {
					if(res.code == 200) {
						this.$nextTick(()=>{
							uni.setTabBarBadge({
								//显示数字
								index: 1, //tabbar下标
								text: res.total + '', //数字
							});
						})
					}
				})
			},
			goPath(item) {
				this.$tab.navigateTo(item.toPage);
			},
			getUserLocation(){
				let that = this;
				uni.getLocation({
					type: 'gcj02', //这里是不同的地图api支持的格式不一样，腾讯的gcj02，因为这里返回的是一个具体的经纬度，所以我们需要逆地址解析进行匹配对应的位置
					geocode :true,
					success: function(res) {
						that.$modal.closeLoading();
						that.lat = res.latitude;
						that.lng =  res.longitude;
						judgmentPosition({userId:that.userInfo.userId,latitude:res.latitude + '',longitude:res.longitude + ''}).then(position=>{
							// console.log(position,"position成功");
							if(position.code == 200 && position.data){
								getStatus({userId:that.userInfo.userId}).then(status=>{
									if(status.code == 200){
										if(res.data.status == 0) {
											let data = {userId:that.userInfo.userId,latitude:res.latitude + '',longitude:res.longitude + ''}
											return clock(data)
										}
									}
								}).then(daka=>{
									if(data == 200) {
										clearInterval(that.times)
									}
								})
							}
						}).catch(err=>{
							console.log(err,"position失败");
							if(err == "未设置考勤组") {
								// clearInterval(that.times)
							}
						})
						// 
					},
					fail: function (err) {
						console.log("获取定位失败",err);
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon:'none'
						});
						clearInterval(that.times)
					}
				});
			},
			// getCircle(){
			// 	console.log(this.userInfo,"userInfo");
			// 	getUserIdByPoint({id:this.userInfo.userId}).then(res=>{
			// 		console.log(res,"获取的考勤点");
			// 		if(res.data.length > 0) {
			// 			this.circleLat = res.data[0].lat;
			// 			this.circleLng = res.data[0].lng;
			// 			this.circleClock = res.data[0].clock;
			// 		}
			// 	})
			// },
		},
	};
</script>

<style lang="scss">
	.page {
		background-color: #f6f7f8;

		.welcome {
			margin: 20rpx;
			height: 281rpx;
			background-size: 100%;
			background-image: url("@/static/images/umale/intr.png");
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			padding-left: 31rpx;
			padding-top: 45rpx;

			.title {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				color: #ffffff;
				text-shadow: 0px 3rpx 6rpx rgba(0, 42, 128, 0.4);
			}

			.name {
				margin-top: 40rpx;
				font-size: 40rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #ffffff;
				text-shadow: 0px 3rpx 6rpx rgba(0, 42, 128, 0.4);
			}

			.date-weather {
				margin-top: 40rpx;

				.date {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					color: #f0f2f6;
					text-shadow: 0px 3rpx 6rpx rgba(0, 42, 128, 0.4);
				}

				.weather {
					margin-left: 50rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					color: #f0f2f6;
					text-shadow: 0rpx 3rpx 6rpx rgba(0, 42, 128, 0.4);
				}
			}
		}

		.main-content {
			position: relative;

			.work-center {
				// position: absolute;
				// top: 10rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0 30rpx;
				display: flex;
				flex-wrap: wrap;

				&>view {
					width: 48%;
					height: 210rpx;
					margin-bottom: 22rpx;
					position: relative;

					.grid-img {
						height: 100%;
						width: 100%;
						display: block;
					}

					.grid-name {
						position: absolute;
						top: 27rpx;
						left: 26rpx;

						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
					}
				}

				&>view:nth-child(odd) {
					margin-right: 4%;
				}
			}
		}
	}
</style>