|
|
@@ -1,23 +1,23 @@
|
|
|
<template>
|
|
|
-
|
|
|
-<div class="add-btn">点击新建管理分区</div>
|
|
|
-
|
|
|
- <floating-panel class="file-float-panel" :class="{'custom-panel': height === anchors[0]}" v-model:height="height" :anchors="anchors">
|
|
|
+ <!-- <div class="add-btn">点击新建管理分区</div> -->
|
|
|
+ <floating-panel class="file-float-panel" :class="{ 'custom-panel': height === anchors[0] }" v-model:height="height"
|
|
|
+ :anchors="anchors">
|
|
|
<div class="file-float-content">
|
|
|
<div class="float-tabs">
|
|
|
<div class="tab-active-bg" :style="activeBgStyle"></div>
|
|
|
- <div class="tab-item" @click="changeTab(0)" :class="{ 'tab-item-active': activeTab === 0 }">物候记录</div>
|
|
|
- <div class="tab-item" @click="changeTab(1)" :class="{ 'tab-item-active': activeTab === 1 }">异常记录</div>
|
|
|
- <div class="tab-item" @click="changeTab(2)" :class="{ 'tab-item-active': activeTab === 2 }">农事记录</div>
|
|
|
+ <div v-for="(item, index) in floatTabLabels" :key="index" class="tab-item" @click="changeTab(item,index)"
|
|
|
+ :class="{ 'tab-item-active': activeTab === index }">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-content-group" v-show="height !== anchors[0]">
|
|
|
- <div class="tab-loading" v-if="isCurrentTabLoading">加载中...</div>
|
|
|
- <div class="tab-empty" v-else-if="currentList.length === 0">暂无记录</div>
|
|
|
+ <!-- <div class="tab-loading" v-if="isCurrentTabLoading">加载中...</div>
|
|
|
+ <div class="tab-empty" v-else-if="currentList.length === 0">暂无记录</div> -->
|
|
|
<div class="tab-content-item" v-for="item in currentList" :key="item.id">
|
|
|
- <div class="time-tag">{{ item.date }}</div>
|
|
|
+ <div class="time-tag">{{ item.time }}</div>
|
|
|
<div class="item-info">
|
|
|
- {{ item.textPrefix }} <span class="blue-text">{{ item.highlight }}</span>
|
|
|
+ {{ item.record }} <span class="blue-text">{{ item.ratio }}{{ floatTabLabels[activeTab].value !== 'farming' ? '%' : '' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -28,7 +28,9 @@
|
|
|
<script setup>
|
|
|
|
|
|
import { FloatingPanel } from 'vant';
|
|
|
-import { computed, ref } from 'vue';
|
|
|
+import { computed, ref, onMounted } from 'vue';
|
|
|
+
|
|
|
+const emit = defineEmits(['map-farm-record']);
|
|
|
const anchors = [
|
|
|
130,
|
|
|
Math.round(0.4 * window.innerHeight),
|
|
|
@@ -36,62 +38,55 @@ const anchors = [
|
|
|
];
|
|
|
const height = ref(anchors[0]);
|
|
|
|
|
|
+const floatTabLabels = [{
|
|
|
+ title: "物候记录",
|
|
|
+ value: "phenology",
|
|
|
+}, {
|
|
|
+ title: "异常记录",
|
|
|
+ value: "abnormal",
|
|
|
+}, {
|
|
|
+ title: "农事记录",
|
|
|
+ value: "farming",
|
|
|
+}];
|
|
|
+
|
|
|
+const currentList = ref([]);
|
|
|
const activeTab = ref(0);
|
|
|
-const dataMap = ref({ 0: [], 1: [], 2: [] });
|
|
|
-const loadingMap = ref({ 0: false, 1: false, 2: false });
|
|
|
-const loadedMap = ref({ 0: false, 1: false, 2: false });
|
|
|
+const syncMapFarmRecord = () => {
|
|
|
+ emit('map-farm-record', {
|
|
|
+ polygonWkt: mapPolygonData.value,
|
|
|
+ records: currentList.value,
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
-const changeTab = (index) => {
|
|
|
+const changeTab = (item, index) => {
|
|
|
activeTab.value = index;
|
|
|
- ensureTabData(index);
|
|
|
+ currentList.value = farmRecordData.value?.[item.value] || [];
|
|
|
+ syncMapFarmRecord();
|
|
|
};
|
|
|
|
|
|
const activeBgStyle = computed(() => ({
|
|
|
transform: `translateX(${activeTab.value * 100}%)`,
|
|
|
}));
|
|
|
|
|
|
-const currentList = computed(() => dataMap.value[activeTab.value] || []);
|
|
|
-const isCurrentTabLoading = computed(() => !!loadingMap.value[activeTab.value]);
|
|
|
|
|
|
-function getMockDataByTab(tab) {
|
|
|
- if (tab === 0) {
|
|
|
- return [
|
|
|
- { id: "p1", date: "04/18", textPrefix: "管理分区一出现 新梢占比为", highlight: "15 %" },
|
|
|
- { id: "p2", date: "04/19", textPrefix: "管理分区二进入 花穗萌动", highlight: "60 %" },
|
|
|
- ];
|
|
|
- }
|
|
|
- if (tab === 1) {
|
|
|
- return [
|
|
|
- { id: "a1", date: "04/18", textPrefix: "管理分区三发现 异常叶片占比", highlight: "8 %" },
|
|
|
- ];
|
|
|
- }
|
|
|
- return [
|
|
|
- { id: "w1", date: "04/17", textPrefix: "管理分区一完成 修枝作业进度", highlight: "100 %" },
|
|
|
- { id: "w2", date: "04/18", textPrefix: "管理分区二完成 灌溉作业进度", highlight: "100 %" },
|
|
|
- ];
|
|
|
-}
|
|
|
+onMounted(() => {
|
|
|
+ getFarmRecord();
|
|
|
+});
|
|
|
|
|
|
-async function ensureTabData(tab) {
|
|
|
- if (loadedMap.value[tab] || loadingMap.value[tab]) return;
|
|
|
- loadingMap.value[tab] = true;
|
|
|
- try {
|
|
|
- // TODO: 替换为真实接口请求,按 tab 类型获取不同记录
|
|
|
- const list = await new Promise((resolve) => {
|
|
|
- setTimeout(() => resolve(getMockDataByTab(tab)), 250);
|
|
|
- });
|
|
|
- dataMap.value[tab] = list || [];
|
|
|
- loadedMap.value[tab] = true;
|
|
|
- } finally {
|
|
|
- loadingMap.value[tab] = false;
|
|
|
+const mapPolygonData = ref("");
|
|
|
+const farmRecordData = ref({});
|
|
|
+const getFarmRecord = async () => {
|
|
|
+ const res = await VE_API.monitor.getFarmRecord();
|
|
|
+ if (res.code === 200) {
|
|
|
+ mapPolygonData.value = res.data.polygon;
|
|
|
+ farmRecordData.value = res.data || {};
|
|
|
+ changeTab(floatTabLabels[0],0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-ensureTabData(0);
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
.add-btn {
|
|
|
position: fixed;
|
|
|
top: 50%;
|
|
|
@@ -105,16 +100,20 @@ ensureTabData(0);
|
|
|
line-height: 40px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
.file-float-panel {
|
|
|
left: 12px;
|
|
|
width: calc(100% - 24px);
|
|
|
+
|
|
|
&.custom-panel {
|
|
|
background: transparent;
|
|
|
+
|
|
|
::v-deep {
|
|
|
.van-floating-panel__header {
|
|
|
background: #fff;
|
|
|
border-radius: 10px 10px 0 0;
|
|
|
}
|
|
|
+
|
|
|
.van-floating-panel__content {
|
|
|
background: transparent;
|
|
|
margin-top: -1px;
|
|
|
@@ -122,10 +121,12 @@ ensureTabData(0);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.file-float-content {
|
|
|
padding: 0 10px 10px;
|
|
|
background: #fff;
|
|
|
border-radius: 0 0 10px 10px;
|
|
|
+
|
|
|
.float-tabs {
|
|
|
position: relative;
|
|
|
border-radius: 4px;
|
|
|
@@ -157,6 +158,7 @@ ensureTabData(0);
|
|
|
color: #767676;
|
|
|
border-radius: 4px;
|
|
|
transition: color 0.2s ease;
|
|
|
+
|
|
|
&.tab-item-active {
|
|
|
color: #0D0D0D;
|
|
|
}
|
|
|
@@ -174,7 +176,7 @@ ensureTabData(0);
|
|
|
padding: 14px 0;
|
|
|
}
|
|
|
|
|
|
- .tab-content-item + .tab-content-item {
|
|
|
+ .tab-content-item+.tab-content-item {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
|