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">
					<view class="sitename u-line-1" :style="{ 'width': usePort == 'wechat' ? '65vw' : '96vw' }">
						{{ sitename }}
					</view>
					<view class="location u-line-1">
						<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 />
		<!-- 工作台 -->
		<workbench />
		<!-- 数据看板 -->
		<spectaculars />
		<!-- 巡检计划 -->
		<patrolScheme />
		<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 {
	getCity
} from "../../../utils/tool";
const QQMapWX = require("../../../utils/qqmap-wx-jssdk.min.js");
var qqmapsdk;
export default {
	name: 'Home',
	components: {
		workbench,
		notice,
		spectaculars,
		patrolScheme
	},
	data() {
		return {
			uninitialized: false,
			usePort: this.usePort,
			sitename: "",
			place: {},
			headHeight: 0,
			weather: ""
		};
	},
	created() {
		this.getPlace();
		let userMsg = uni.getStorageSync("userMsg");
		this.sitename = `${userMsg.sitename} - ${userMsg.name}`
	},
	mounted() {
		this.getWeather();
	},
	methods: {
		getWeather() {
			const content = uni.getStorageSync('city');
			if (content) {
				this.$Http.basic({
					"id": "20230608120801",
					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.night.weather.temperature}~${detail.day.weather.temperature}℃ ${res.data.real.weather.info}`
					}
				})
			} else {
				getCity.bind(this)().then(res => {
					res && uni.setStorageSync("city", res)
					this.getWeather()
				})
			}
		},
		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>