|
|
@@ -1,77 +1,302 @@
|
|
|
<template>
|
|
|
- <div class="agri-record-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
|
|
|
- <div class="record-content">
|
|
|
- <div>
|
|
|
- <!-- 天气遮罩 -->
|
|
|
- <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
|
|
|
- <!-- 天气 -->
|
|
|
- <weather-info
|
|
|
- ref="weatherInfoRef"
|
|
|
- class="weather-info"
|
|
|
- @weatherExpanded="weatherExpanded"
|
|
|
- @changeGarden="changeGarden"
|
|
|
- :isGarden="true"
|
|
|
- :gardenId="gardenId"
|
|
|
- ></weather-info>
|
|
|
- </div>
|
|
|
- <div class="record-list">
|
|
|
+ <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" @click="handleMaskClick"></div>
|
|
|
+ <!-- 天气 -->
|
|
|
+ <weather-info
|
|
|
+ ref="weatherInfoRef"
|
|
|
+ class="weather-info"
|
|
|
+ @weatherExpanded="weatherExpanded"
|
|
|
+ @changeGarden="changeGarden"
|
|
|
+ :isGarden="true"
|
|
|
+ :gardenId="defaultGardenId"
|
|
|
+ ></weather-info>
|
|
|
+ <!-- 作物档案 -->
|
|
|
+ <div class="archives-time-line">
|
|
|
+ <div class="archives-time-line-header">
|
|
|
<div class="line-title">农事记录</div>
|
|
|
- <div class="task-content" v-loading="loading">
|
|
|
- <div class="task-item" v-for="(item, index) in taskList" :key="item.id || item.workRecordId">
|
|
|
- <task-item
|
|
|
- :key="1 + '-' + index"
|
|
|
- :itemIndex="3"
|
|
|
- :status="3"
|
|
|
- :item-data="item"
|
|
|
- >
|
|
|
- </task-item>
|
|
|
- </div>
|
|
|
- <div class="empty-data" v-if="noData">暂无数据</div>
|
|
|
- </div>
|
|
|
+ <el-date-picker style="width: 110px" v-model="date" type="year" placeholder="全部日期" />
|
|
|
+ </div>
|
|
|
+ <div class="archives-time-line-content">
|
|
|
+ <archives-farm-time-line :farmId="gardenId" pageType="agri_record"></archives-farm-time-line>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <tip-popup
|
|
|
+ v-model:show="showFarmPopup"
|
|
|
+ type="success"
|
|
|
+ text="农场领取成功"
|
|
|
+ :overlay-style="{ 'backdrop-filter': 'blur(4px)' }"
|
|
|
+ :closeOnClickOverlay="false"
|
|
|
+ :zIndex="9999"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 农事执行弹窗 -->
|
|
|
+ <agri-execute-popup
|
|
|
+ v-model:show="showAgriExecutePopup"
|
|
|
+ :expert-name="agriExecuteData.expertName"
|
|
|
+ :expert-avatar="agriExecuteData.expertAvatar"
|
|
|
+ :title="agriExecuteData.title"
|
|
|
+ :abnormal-text="agriExecuteData.abnormalText"
|
|
|
+ :image-url="agriExecuteData.imageUrl"
|
|
|
+ :show-marker="agriExecuteData.showMarker"
|
|
|
+ @later="handleAgriLater"
|
|
|
+ @executed="handleAgriExecuted"
|
|
|
+ />
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, computed, onActivated } from "vue";
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+import { ref, computed, onActivated, onDeactivated, onMounted } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
+import { Badge, List } from "vant";
|
|
|
import weatherInfo from "@/components/weatherInfo.vue";
|
|
|
-import taskItem from "@/components/taskItem.vue";
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+import farmInfoPopup from "../home/components/farmInfoPopup.vue";
|
|
|
+import tipPopup from "@/components/popup/tipPopup.vue";
|
|
|
+import agriExecutePopup from "@/components/popup/agriExecutePopup.vue";
|
|
|
+import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";
|
|
|
|
|
|
-const store = useStore();
|
|
|
-const tabBarHeight = computed(() => store.state.home.tabBarHeight);
|
|
|
+const showFarmPopup = ref(false); // 农场领取成功弹窗
|
|
|
+const showAgriExecutePopup = ref(false); // 农事执行弹窗 - 默认显示
|
|
|
+const date = ref(new Date());
|
|
|
|
|
|
-onMounted(() => {
|
|
|
+// 农事执行弹窗数据
|
|
|
+const agriExecuteData = ref({
|
|
|
+ expertName: "韦帮稳",
|
|
|
+ expertAvatar: "",
|
|
|
+ title: "梢期杀虫 农事执行",
|
|
|
+ abnormalText: "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
|
|
|
+ imageUrl: "",
|
|
|
+ showMarker: true,
|
|
|
});
|
|
|
|
|
|
+const defaultGardenId = ref(null);
|
|
|
+const isHeaderShow = ref(false);
|
|
|
+const isDefaultFarm = ref(false);
|
|
|
+const weatherInfoRef = ref(null);
|
|
|
+
|
|
|
onActivated(() => {
|
|
|
- if(gardenId.value) {
|
|
|
- getRecordList();
|
|
|
+ // 用来接收我的农场跳转过来的农场详情逻辑
|
|
|
+ if (route.query.isHeaderShow) {
|
|
|
+ isHeaderShow.value = true;
|
|
|
+ defaultGardenId.value = route.query.farmId;
|
|
|
+ // 统一转换为布尔值
|
|
|
+ isDefaultFarm.value = route.query.defaultFarm === "true" || route.query.defaultFarm === true;
|
|
|
}
|
|
|
});
|
|
|
-const taskList = ref([]);
|
|
|
-const loading = ref(false);
|
|
|
-const noData = ref(false);
|
|
|
-const getRecordList = () => {
|
|
|
- loading.value = true;
|
|
|
- VE_API.user.farmServiceRecord({ farmId: gardenId.value })
|
|
|
- .then(({ data }) => {
|
|
|
- loading.value = false;
|
|
|
- taskList.value = data;
|
|
|
- if(data.length === 0) {
|
|
|
- noData.value = true;
|
|
|
+
|
|
|
+const receiveFarm = (json) => {
|
|
|
+ VE_API.monitor
|
|
|
+ .receiveFarm({
|
|
|
+ agriculturalStoreId: json.agriculturalStoreId,
|
|
|
+ farmId: json.farmId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ showFarmPopup.value = true;
|
|
|
+ defaultGardenId.value = json.farmId;
|
|
|
+ } else {
|
|
|
+ ElMessage.warning(res.msg);
|
|
|
}
|
|
|
+ // 清空路由参数
|
|
|
+ router.replace({ path: route.path });
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const store = useStore();
|
|
|
+const tabBarHeight = computed(() => store.state.home.tabBarHeight);
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+const farmInfoRef = ref(null);
|
|
|
+
|
|
|
+function toFarmInfo() {
|
|
|
+ farmInfoRef.value.handleShow();
|
|
|
+}
|
|
|
+
|
|
|
+// 功能卡片数据
|
|
|
+const functionCards = ref([
|
|
|
+ {
|
|
|
+ title: "农事规划",
|
|
|
+ route: "/plan",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "农场报告",
|
|
|
+ status: "最新",
|
|
|
+ route: "/farm_report",
|
|
|
+ className: "blue",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "农事方案",
|
|
|
+ route: "/agricultural_plan",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "复核成效",
|
|
|
+ status: "最新",
|
|
|
+ route: "/review-results",
|
|
|
+ className: "yellow",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const getStayCount = () => {
|
|
|
+ VE_API.monitor
|
|
|
+ .getCountByStatusAndFarmId({
|
|
|
+ farmId: gardenId.value,
|
|
|
+ startStatus: 1,
|
|
|
+ endStatus: 3,
|
|
|
})
|
|
|
+ .then((res) => {
|
|
|
+ functionCards.value[0].status = null;
|
|
|
+ if (res.data && res.data != 0) {
|
|
|
+ functionCards.value[0].status = res.data + " 待完成";
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 实时播报数据
|
|
|
+const broadcastList = ref([]);
|
|
|
+const loading = ref(false);
|
|
|
+const finished = ref(false);
|
|
|
+const currentPage = ref(1);
|
|
|
+const pageSize = ref(10);
|
|
|
+
|
|
|
+const getBroadcastList = async (page = 1, isLoadMore = false) => {
|
|
|
+ if (!gardenId.value) {
|
|
|
+ loading.value = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果正在加载，直接返回（避免重复请求）
|
|
|
+ if (loading.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ const res = await VE_API.monitor.broadcastPage({
|
|
|
+ farmId: gardenId.value,
|
|
|
+ limit: pageSize.value,
|
|
|
+ page: page,
|
|
|
+ });
|
|
|
+
|
|
|
+ const newData = res.data || [];
|
|
|
+ if (isLoadMore) {
|
|
|
+ broadcastList.value = [...broadcastList.value, ...newData];
|
|
|
+ } else {
|
|
|
+ broadcastList.value = newData;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 判断是否还有更多数据
|
|
|
+ if (newData.length < pageSize.value) {
|
|
|
+ finished.value = true;
|
|
|
+ } else {
|
|
|
+ finished.value = false;
|
|
|
+ // 如果未完成，页码+1，为下次加载做准备
|
|
|
+ currentPage.value = page + 1;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("获取播报列表失败:", error);
|
|
|
+ finished.value = true;
|
|
|
+ } finally {
|
|
|
+ // 确保 loading 状态被正确设置为 false
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 滚动加载更多
|
|
|
+const onLoad = async () => {
|
|
|
+ if (finished.value || loading.value) return;
|
|
|
+
|
|
|
+ // 判断是否是首次加载（页码为1）
|
|
|
+ const isLoadMore = currentPage.value > 1;
|
|
|
+ const pageToLoad = currentPage.value;
|
|
|
+
|
|
|
+ // 加载数据（页码会在 getBroadcastList 成功后自动更新）
|
|
|
+ await getBroadcastList(pageToLoad, isLoadMore);
|
|
|
+};
|
|
|
+
|
|
|
+// 卡片点击事件
|
|
|
+const handleCardClick = (card) => {
|
|
|
+ const params = {
|
|
|
+ farmId: gardenId.value,
|
|
|
+ };
|
|
|
+ router.push({
|
|
|
+ path: card.route,
|
|
|
+ query: { ...params, miniJson: JSON.stringify(params) },
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
+// 播报相关事件
|
|
|
+const isSpeaking = ref(false);
|
|
|
+const speechSynthesis = window.speechSynthesis;
|
|
|
+
|
|
|
+const handleBroadcast = () => {
|
|
|
+ if (isSpeaking.value) {
|
|
|
+ // 如果正在播放，则停止
|
|
|
+ speechSynthesis.cancel();
|
|
|
+ isSpeaking.value = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 构建播报文本
|
|
|
+ let broadcastText = "实时播报：";
|
|
|
+
|
|
|
+ if (broadcastList.value.length === 0) {
|
|
|
+ broadcastText += "暂无更多播报";
|
|
|
+ } else {
|
|
|
+ broadcastList.value.forEach((item, index) => {
|
|
|
+ broadcastText += `${index + 1}、${item.title}。${item.content}。`;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建语音合成对象
|
|
|
+ const utterance = new SpeechSynthesisUtterance(broadcastText);
|
|
|
+
|
|
|
+ // 设置语音参数
|
|
|
+ utterance.lang = "zh-CN";
|
|
|
+ utterance.rate = 0.8; // 语速
|
|
|
+ utterance.pitch = 1; // 音调
|
|
|
+ utterance.volume = 1; // 音量
|
|
|
+
|
|
|
+ // 播放开始事件
|
|
|
+ utterance.onstart = () => {
|
|
|
+ isSpeaking.value = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 播放结束事件
|
|
|
+ utterance.onend = () => {
|
|
|
+ isSpeaking.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 播放错误事件
|
|
|
+ utterance.onerror = (event) => {
|
|
|
+ isSpeaking.value = false;
|
|
|
+ console.error("播报错误:", event.error);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 开始播报
|
|
|
+ speechSynthesis.speak(utterance);
|
|
|
+};
|
|
|
+
|
|
|
+// 组件卸载时停止语音播放
|
|
|
+onDeactivated(() => {
|
|
|
+ showFarmPopup.value = false;
|
|
|
+ isDefaultFarm.value = false;
|
|
|
+ if (isSpeaking.value) {
|
|
|
+ speechSynthesis.cancel();
|
|
|
+ isSpeaking.value = false;
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
const isExpanded = ref(false);
|
|
|
const weatherExpanded = (isExpandedValue) => {
|
|
|
isExpanded.value = isExpandedValue;
|
|
|
};
|
|
|
|
|
|
-const weatherInfoRef = ref(null);
|
|
|
// 点击遮罩时收起天气
|
|
|
const handleMaskClick = () => {
|
|
|
if (weatherInfoRef.value && weatherInfoRef.value.toggleExpand) {
|
|
|
@@ -79,49 +304,76 @@ const handleMaskClick = () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-const finished = ref(false);
|
|
|
const gardenId = ref(store.state.home.gardenId);
|
|
|
+
|
|
|
+// 初始化加载数据
|
|
|
+onMounted(() => {
|
|
|
+ if (gardenId.value) {
|
|
|
+ currentPage.value = 1;
|
|
|
+ finished.value = false;
|
|
|
+ broadcastList.value = [];
|
|
|
+ getStayCount();
|
|
|
+ // 不在这里手动加载，让 List 组件的 immediate-check 自动触发首次加载
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
const changeGarden = ({ id }) => {
|
|
|
gardenId.value = id;
|
|
|
// 更新 store 中的状态
|
|
|
store.commit("home/SET_GARDEN_ID", id);
|
|
|
+ // 重置分页状态
|
|
|
+ currentPage.value = 1;
|
|
|
finished.value = false;
|
|
|
- getRecordList();
|
|
|
+ broadcastList.value = [];
|
|
|
+ getStayCount();
|
|
|
+ getBroadcastList(1, false);
|
|
|
+};
|
|
|
+
|
|
|
+function handlePage(url) {
|
|
|
+ const query = {
|
|
|
+ farmId: gardenId.value,
|
|
|
+ };
|
|
|
+ if (url === "/message_list") {
|
|
|
+ query.from = "monitor";
|
|
|
+ }
|
|
|
+ router.push({
|
|
|
+ path: url,
|
|
|
+ query: query,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 农事执行弹窗相关方法
|
|
|
+const handleAgriLater = () => {
|
|
|
+ console.log("稍后执行");
|
|
|
+ // 可以在这里添加稍后执行的逻辑
|
|
|
+};
|
|
|
+
|
|
|
+const handleAgriExecuted = () => {
|
|
|
+ console.log("我已执行");
|
|
|
+ // 可以在这里添加执行完成的逻辑
|
|
|
};
|
|
|
|
|
|
+// 显示农事执行弹窗的方法（可以在需要的地方调用）
|
|
|
+const showAgriExecute = (data = {}) => {
|
|
|
+ agriExecuteData.value = {
|
|
|
+ expertName: data.expertName || "韦帮稳",
|
|
|
+ expertAvatar: data.expertAvatar || "",
|
|
|
+ title: data.title || "梢期杀虫 农事执行",
|
|
|
+ abnormalText: data.abnormalText || "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
|
|
|
+ imageUrl: data.imageUrl || "",
|
|
|
+ showMarker: data.showMarker !== undefined ? data.showMarker : true,
|
|
|
+ };
|
|
|
+ showAgriExecutePopup.value = true;
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.agri-record-index {
|
|
|
+<style scoped lang="scss">
|
|
|
+.monitor-index {
|
|
|
width: 100%;
|
|
|
- height: 100vh;
|
|
|
+ height: 100%;
|
|
|
+ padding: 13px 10px;
|
|
|
box-sizing: border-box;
|
|
|
- background: linear-gradient(180deg, #F9F9F9 0%, #F0F8FF 31.47%, #F9F9F9 46.81%, #F9F9F9 69.38%, #F9F9F9 100%);
|
|
|
- .line-title {
|
|
|
- padding: 10px 0;
|
|
|
- position: relative;
|
|
|
- padding-left: 14px;
|
|
|
- font-size: 16px;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 5px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 4px;
|
|
|
- height: 15px;
|
|
|
- background: #2199f8;
|
|
|
- border-radius: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .record-content {
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
- padding: 10px 12px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
+ background: linear-gradient(180deg, #f9f9f9 0%, #f0f8ff 31.47%, #f9f9f9 46.81%, #f9f9f9 69.38%, #f9f9f9 100%);
|
|
|
.weather-mask {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
@@ -136,15 +388,38 @@ const changeGarden = ({ id }) => {
|
|
|
position: absolute;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
- .record-list {
|
|
|
+ .archives-time-line {
|
|
|
position: relative;
|
|
|
- top: 100px;
|
|
|
- .empty-data {
|
|
|
- text-align: center;
|
|
|
- padding-top: 20px;
|
|
|
+ margin-top: 96px;
|
|
|
+ height: calc(100% - 90px);
|
|
|
+ .archives-time-line-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .line-title {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 14px;
|
|
|
+ font-size: 16px;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 5px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 4px;
|
|
|
+ height: 15px;
|
|
|
+ background: #2199f8;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .task-item + .task-item {
|
|
|
+ .archives-time-line-content {
|
|
|
margin-top: 10px;
|
|
|
+ height: calc(100% - 35px);
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
}
|
wangsisi