|
|
@@ -1,9 +1,11 @@
|
|
|
<template>
|
|
|
+ <custom-header v-if="isHeaderShow" name="农场详情"></custom-header>
|
|
|
<div class="monitor-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
|
|
|
<!-- 天气遮罩 -->
|
|
|
<div class="weather-mask" v-show="isExpanded"></div>
|
|
|
<!-- 天气 -->
|
|
|
<weather-info
|
|
|
+ ref="weatherInfoRef"
|
|
|
class="weather-info"
|
|
|
@weatherExpanded="weatherExpanded"
|
|
|
@changeGarden="changeGarden"
|
|
|
@@ -11,7 +13,7 @@
|
|
|
:gardenId="defaultGardenId"
|
|
|
></weather-info>
|
|
|
<!-- 操作按钮 -->
|
|
|
- <div class="operation-button">
|
|
|
+ <div class="operation-button" :style="{ top: isHeaderShow ? '157px' : '117px' }">
|
|
|
<div class="button-group">
|
|
|
<div class="button-item" @click="toFarmInfo">
|
|
|
<img class="button-icon" src="@/assets/img/tab_bar/home-active.png" alt="" />
|
|
|
@@ -63,12 +65,9 @@
|
|
|
finished-text="暂无更多播报"
|
|
|
@load="onLoad"
|
|
|
class="broadcast-list"
|
|
|
+ :style="{ height: !isHeaderShow ? 'calc(100vh - 460px)' : 'calc(100vh - 510px)' }"
|
|
|
>
|
|
|
- <div
|
|
|
- v-for="(item, index) in broadcastList"
|
|
|
- :key="index"
|
|
|
- class="broadcast-item"
|
|
|
- >
|
|
|
+ <div v-for="(item, index) in broadcastList" :key="index" class="broadcast-item">
|
|
|
<div class="item-content">
|
|
|
<div class="content-top">
|
|
|
<div class="item-icon">
|
|
|
@@ -93,62 +92,117 @@
|
|
|
v-model:show="showFarmPopup"
|
|
|
:type="showFarmPopupType"
|
|
|
:text="textPopup"
|
|
|
- :overlay-style="{'backdrop-filter': 'blur(4px)'}"
|
|
|
+ :overlay-style="{ 'backdrop-filter': 'blur(4px)' }"
|
|
|
:close-on-click-overlay="false"
|
|
|
@confirm="toCreateFarm"
|
|
|
/>
|
|
|
+
|
|
|
+ <!-- 农场详情操作按钮 -->
|
|
|
+ <div class="custom-bottom-fixed-btns" v-if="isHeaderShow">
|
|
|
+ <div class="bottom-btn secondary-btn" @click="handleFarm('delete')">删除农场</div>
|
|
|
+ <div v-if="!isDefaultFarm" class="bottom-btn primary-btn" @click="handleFarm('setDefault')">
|
|
|
+ 设为默认农场
|
|
|
+ </div>
|
|
|
+ <div v-else class="bottom-btn btn-text">当前已是 默认农场</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, computed, onUnmounted, onActivated } from "vue";
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+import { ref, computed, onActivated, onDeactivated } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
import { Badge, List } from "vant";
|
|
|
import weatherInfo from "@/components/weatherInfo.vue";
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
import farmInfoPopup from "../home/components/farmInfoPopup.vue";
|
|
|
import tipPopup from "@/components/popup/tipPopup.vue";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
+import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
|
|
|
const showFarmPopup = ref(false);
|
|
|
const showFarmPopupType = ref("create");
|
|
|
-const textPopup = ref(['您当前还没有农场', '请先创建农场']);
|
|
|
+const textPopup = ref(["您当前还没有农场", "请先创建农场"]);
|
|
|
|
|
|
const toCreateFarm = () => {
|
|
|
- if(showFarmPopupType.value == "create"){
|
|
|
+ if (showFarmPopupType.value == "create") {
|
|
|
router.push("/create_farm?isReload=true&from=monitor");
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const defaultGardenId = ref(null);
|
|
|
-onActivated(()=>{
|
|
|
- showFarmPopup.value = false;
|
|
|
- if(route.query.json){
|
|
|
- localStorage.setItem('showSuccess', true);
|
|
|
- const json = JSON.parse(route.query.json);
|
|
|
- if(json.showSuccess){
|
|
|
- receiveFarm(json)
|
|
|
+const isHeaderShow = ref(false);
|
|
|
+const isDefaultFarm = ref(false);
|
|
|
+const weatherInfoRef = ref(null);
|
|
|
+
|
|
|
+onActivated(() => {
|
|
|
+ // 用来接收小程序页面跳转的内容和逻辑
|
|
|
+ if (route.query.miniJson) {
|
|
|
+ localStorage.setItem("showSuccess", true);
|
|
|
+ const json = JSON.parse(route.query.miniJson);
|
|
|
+ if (json.showSuccess) {
|
|
|
+ receiveFarm(json);
|
|
|
}
|
|
|
}
|
|
|
- if(localStorage.getItem('isGarden') != 'true'){
|
|
|
+ if (localStorage.getItem("isGarden") != "true") {
|
|
|
showFarmPopup.value = true;
|
|
|
}
|
|
|
-})
|
|
|
+
|
|
|
+ // 用来接收我的农场跳转过来的农场详情逻辑
|
|
|
+ if (route.query.isHeaderShow) {
|
|
|
+ isHeaderShow.value = true;
|
|
|
+ defaultGardenId.value = route.query.farmId;
|
|
|
+ // 统一转换为布尔值
|
|
|
+ isDefaultFarm.value = route.query.defaultFarm === 'true' || route.query.defaultFarm === true;
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
const receiveFarm = (json) => {
|
|
|
- VE_API.monitor.receiveFarm({
|
|
|
- agriculturalStoreId: json.agriculturalStoreId,
|
|
|
- farmId: json.farmId,
|
|
|
- }).then((res) => {
|
|
|
- if(res.code === 0){
|
|
|
- showFarmPopupType.value = "success";
|
|
|
- showFarmPopup.value = true;
|
|
|
- textPopup.value = '农场领取成功';
|
|
|
- defaultGardenId.value = json.farmId;
|
|
|
- }else{
|
|
|
- ElMessage.warning(res.msg);
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
+ VE_API.monitor
|
|
|
+ .receiveFarm({
|
|
|
+ agriculturalStoreId: json.agriculturalStoreId,
|
|
|
+ farmId: json.farmId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ showFarmPopupType.value = "success";
|
|
|
+ showFarmPopup.value = true;
|
|
|
+ textPopup.value = "农场领取成功";
|
|
|
+ defaultGardenId.value = json.farmId;
|
|
|
+ } else {
|
|
|
+ ElMessage.warning(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleFarm = (optionType) => {
|
|
|
+ ElMessageBox.confirm(optionType === "delete" ? "确定删除该农场吗？" : "确定将该农场设为默认农场吗？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ const apiCall =
|
|
|
+ optionType === "delete"
|
|
|
+ ? VE_API.farm.deleteFarm({ farmId: defaultGardenId.value })
|
|
|
+ : VE_API.farm.updateFarm({ farmId: defaultGardenId.value, defaultFarm: 1 });
|
|
|
+ apiCall.then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage.success(optionType === "delete" ? "删除成功" : "设为默认农场成功");
|
|
|
+ if (optionType === "delete") {
|
|
|
+ router.back();
|
|
|
+ } else {
|
|
|
+ isDefaultFarm.value = true;
|
|
|
+ // 刷新 weatherInfo 组件的农场列表，确保显示最新的默认农场状态
|
|
|
+ if (weatherInfoRef.value && weatherInfoRef.value.refreshFarmList) {
|
|
|
+ weatherInfoRef.value.refreshFarmList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
|
|
|
const store = useStore();
|
|
|
const tabBarHeight = computed(() => store.state.home.tabBarHeight);
|
|
|
@@ -245,7 +299,7 @@ const onLoad = () => {
|
|
|
// 卡片点击事件
|
|
|
const handleCardClick = (card) => {
|
|
|
const params = {
|
|
|
- farmId: gardenId.value
|
|
|
+ farmId: gardenId.value,
|
|
|
};
|
|
|
router.push({
|
|
|
path: card.route,
|
|
|
@@ -267,7 +321,7 @@ const handleBroadcast = () => {
|
|
|
|
|
|
// 构建播报文本
|
|
|
let broadcastText = "实时播报：";
|
|
|
-
|
|
|
+
|
|
|
if (broadcastList.value.length === 0) {
|
|
|
broadcastText += "暂无更多播报";
|
|
|
} else {
|
|
|
@@ -278,9 +332,9 @@ const handleBroadcast = () => {
|
|
|
|
|
|
// 创建语音合成对象
|
|
|
const utterance = new SpeechSynthesisUtterance(broadcastText);
|
|
|
-
|
|
|
+
|
|
|
// 设置语音参数
|
|
|
- utterance.lang = 'zh-CN';
|
|
|
+ utterance.lang = "zh-CN";
|
|
|
utterance.rate = 0.8; // 语速
|
|
|
utterance.pitch = 1; // 音调
|
|
|
utterance.volume = 1; // 音量
|
|
|
@@ -306,7 +360,9 @@ const handleBroadcast = () => {
|
|
|
};
|
|
|
|
|
|
// 组件卸载时停止语音播放
|
|
|
-onUnmounted(() => {
|
|
|
+onDeactivated(() => {
|
|
|
+ showFarmPopup.value = false;
|
|
|
+ isDefaultFarm.value = false;
|
|
|
if (isSpeaking.value) {
|
|
|
speechSynthesis.cancel();
|
|
|
isSpeaking.value = false;
|
|
|
@@ -319,10 +375,10 @@ const weatherExpanded = (isExpandedValue) => {
|
|
|
};
|
|
|
|
|
|
const gardenId = ref(store.state.home.gardenId);
|
|
|
-const changeGarden = ({id}) => {
|
|
|
+const changeGarden = ({ id }) => {
|
|
|
gardenId.value = id;
|
|
|
// 更新 store 中的状态
|
|
|
- store.commit('home/SET_GARDEN_ID', id);
|
|
|
+ store.commit("home/SET_GARDEN_ID", id);
|
|
|
// 重置分页状态
|
|
|
currentPage.value = 1;
|
|
|
finished.value = false;
|
|
|
@@ -335,8 +391,8 @@ function handlePage(url) {
|
|
|
router.push({
|
|
|
path: url,
|
|
|
query: {
|
|
|
- farmId: gardenId.value
|
|
|
- }
|
|
|
+ farmId: gardenId.value,
|
|
|
+ },
|
|
|
});
|
|
|
}
|
|
|
</script>
|
|
|
@@ -515,14 +571,22 @@ function handlePage(url) {
|
|
|
}
|
|
|
|
|
|
@keyframes pulse {
|
|
|
- 0% { transform: scale(1); }
|
|
|
- 50% { transform: scale(1.1); }
|
|
|
- 100% { transform: scale(1); }
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.broadcast-list {
|
|
|
+ height: calc(100vh - 460px);
|
|
|
+ overflow: auto;
|
|
|
.broadcast-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -591,4 +655,15 @@ function handlePage(url) {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.custom-bottom-fixed-btns {
|
|
|
+ z-index: 99999;
|
|
|
+ .primary-btn {
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ color: #2199f8;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .btn-text {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
wangsisi