所处位置以及天气预报

pages/index/modules/home.vue

@@ -2,35 +2,187 @@
 	<view>
 		<cu-custom ref="Dustom"
 			bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png">
-			<block slot="backText">返回</block>
-			<block slot="content">
-			</block>
+			<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>
-		首页
-		<view style="width:20px;height: 100vh;background-color: red;">
-		</view>
-		<view style="width:50px;height: 100vh;background-color: red;">
-		</view>
-		<view style="width:120px;height: 100vh;background-color: red;">
-		</view>
-
+		<!-- 滚动通知 -->
+		<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 {
-
+			usePort: this.usePort,
+			sitename: "",
+			place: {},
+			headHeight: 0,
+			weather: ""
 		};
 	},
+	created() {
+		this.getPlace();
+		let userMsg = uni.getStorageSync("userMsg");
+		this.sitename = `${userMsg.sitename} - ${userMsg.name}`
+	},
 	mounted() {
-		const Dustom = this.$refs.Dustom;
-		Dustom.CustomBar = Dustom.CustomBar + 66;
+		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"></style>
+<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>