water_affairs/pages/index/modules/home.vue

<template>
	<view>
		<cu-custom ref="Dustom"
			bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png">
			<view slot="head" class="head" :style="{ height: headHeight }">
				<view class="content">
					<navigator url="/pages/login/selectSite" class="sitename u-line-1"
						:style="{ 'width': usePort == 'wechat' ? '65vw' : '96vw' }">
						{{ sitename }}
					</navigator>
					<view class="location u-line-1" @click.stop="setLocation">
						<text class="iconfont icon-didian" />{{ place.address || '重新获取所在位置' }}
					</view>
					<view class="weather-forecast">
						<view class="tag">天气预报</view>
						<view class="text">{{ weather }}</view>
					</view>
				</view>
			</view>
		</cu-custom>

		<!-- 滚动通知 -->
		<notice ref="notice" />
		<!-- 工作台 -->
		<workbench />
		<!-- 数据看板 -->
		<spectaculars ref="spectaculars" />
		<!-- 巡检计划 -->
		<patrolScheme ref="patrolScheme" />

		<workorder v-if="showWorkrder" :isHome="true" />
		<view style="height: calc(16.533vw + env(safe-area-inset-bottom) / 2);" />
	</view>
</template>

<script>
import workbench from "./workbench.vue";
import notice from "./notice.vue";
import spectaculars from "./spectaculars.vue";
import patrolScheme from "./patrolScheme.vue";
import { getWeek, getYMD } from "../../../utils/getTime";
import workorder from "./workorderList"
const QQMapWX = require("../../../utils/qqmap-wx-jssdk.min.js");
var qqmapsdk;
export default {
	name: 'Home',
	components: {
		workbench,
		notice,
		spectaculars,
		patrolScheme,
		workorder
	},
	data() {
		return {
			uninitialized: false,
			usePort: this.usePort,
			sitename: "",
			place: {},
			headHeight: 0,
			weather: "",
			showWorkrder: false
		};
	},
	created() {
		this.getPlace();
		let userMsg = uni.getStorageSync("userMsg");
		this.sitename = `${userMsg.sitename} - ${userMsg.name}`
		try {
			this.showWorkrder = uni.getStorageSync('authList')['工单']['工单'].name == "workorder"
		} catch (error) {
			this.showWorkrder = false
		}
	},
	mounted() {
		this.getWeather();
	},
	methods: {
		renderData() {
			this.$refs.notice.getList();
			this.$refs.spectaculars.getDetail();
			this.$refs.patrolScheme.getDetail();
		},
		getWeather() {
			this.$Http.basic({
				id: "20231012093701",
				content: {}
			}).then(res => {
				console.log("获取天气信息", res)
				if (this.cutoff(res.msg)) {
					this.setCustomBar(0);
				} else {
					this.setCustomBar(66);
					let detail = res.data.predict.detail[0];
					this.weather = `${getWeek()} ${getYMD().split("年")[1]} | ${detail.day.weather.temperature == '9999' ? detail.night.weather.temperature : detail.night.weather.temperature + '~' + detail.day.weather.temperature}℃ ${res.data.real.weather.info}`
				}
			})
		},
		setLocation() {
			let that = this;
			uni.getSetting({
				success({ authSetting }) {
					if (authSetting['scope.userLocation']) {
						that.getLocation().then(s => {
							that.__proto__.location = s;
							that.getPlace();
						})
					} else {
						uni.showModal({
							title: '提示',
							content: '您未开启地理位置授权',
							cancelText: '下次再说',
							confirmText: '前去授权',
							success: ({ confirm }) => {
								if (confirm) uni.openSetting({
									success(res) {
										if (res.authSetting['scope.userLocation']) that.setLocation();
									}
								});
							}
						})
					}
				}
			})
		},
		async getPlace() {
			let res = this.location || await this.getLocation(),
				that = this;
			this.__proto__.location = res;
			qqmapsdk = new QQMapWX({
				key: 'UVVBZ-UOGWZ-ZUWXC-TJQMT-TUWLO-IVFTN'
			});
			qqmapsdk.reverseGeocoder({
				location: {
					latitude: res.latitude,
					longitude: res.longitude
				},
				success(res) {
					console.log("逆解析结果", res.result)
					that.place = res.result;
				},
				fail: res => console.error(res)
			});
		},
		setCustomBar(num) {
			const Dustom = this.$refs.Dustom;
			Dustom.CustomBar = Dustom.CustomBar + num;
			this.headHeight = Dustom.getHeight()
		}
	}
}
</script>

<style lang="scss" scoped>
.head {
	position: fixed;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 10000;

	.content {
		position: absolute;
		width: 100vw;
		padding: 0 10px;
		box-sizing: border-box;
		left: 0;
		bottom: 0;

		.sitename {
			line-height: 22px;
			font-size: 16px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}

		.location {
			line-height: 17px;
			font-size: 12px;
			font-family: PingFang SC-Regular, PingFang SC;
			color: rgba(255, 255, 255, 0.8);
			margin-top: 10px;

			.iconfont {
				margin-right: 5px;
				font-size: 12px;
			}
		}

		.weather-forecast {
			width: 100%;
			display: flex;
			align-items: center;
			height: 18px;
			margin-top: 22px;
			margin-bottom: 12px;

			.tag {
				width: 48px;
				height: 18px;
				line-height: 18px;
				text-align: center;
				background: #F29C37;
				border-radius: 2px;
				font-size: 10px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-right: 6px;
			}

			.text {
				height: 17px;
				font-size: 12px;
				font-family: PingFang SC-Regular, PingFang SC;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
}
</style>