|
|
@@ -0,0 +1,149 @@
|
|
|
+<template>
|
|
|
+ <div class="agricultural-detail">
|
|
|
+ <custom-header name="农事详情"></custom-header>
|
|
|
+
|
|
|
+ <div class="detail-content">
|
|
|
+ <!-- 采样信息卡片 -->
|
|
|
+ <div class="card-wrap">
|
|
|
+ <div class="card-box sampling-card">
|
|
|
+ <div class="sampling-title">采样时间: {{ samplingTime }}</div>
|
|
|
+ <div class="sampling-desc">{{ samplingDesc }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 农情照片卡片 -->
|
|
|
+ <div class="card-wrap">
|
|
|
+ <div class="card-box photo-card">
|
|
|
+ <div class="card-title">农情照片</div>
|
|
|
+ <div class="area-btns">
|
|
|
+ <div v-for="(area, idx) in areaList" :key="idx" class="area-btn"
|
|
|
+ :class="{ active: activeAreaIndex === idx }" @click="activeAreaIndex = idx">
|
|
|
+ {{ area }}区
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ratio-tip">出现新梢的果树占比为{{ currentRatio }}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+import { ref, computed } from "vue";
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+// 从路由 miniJson 解析 id
|
|
|
+const detailId = ref(null);
|
|
|
+if (route.query.miniJson) {
|
|
|
+ try {
|
|
|
+ const mini = JSON.parse(route.query.miniJson);
|
|
|
+ detailId.value = mini.id ?? null;
|
|
|
+ } catch (_) {
|
|
|
+ console.error("解析 miniJson 失败", _);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 采样时间、描述（后续可接接口）
|
|
|
+const samplingTime = ref("2025.05.06");
|
|
|
+const samplingDesc = ref("本次飞巡采样了1区、2区和5区,拍摄了120棵树");
|
|
|
+
|
|
|
+// 区域列表与当前选中
|
|
|
+const areaList = ref(["1", "2", "3", "3"]);
|
|
|
+const activeAreaIndex = ref(0);
|
|
|
+
|
|
|
+// 当前选中区的占比（示例数据，可按区区分）
|
|
|
+const ratioByArea = ["5", "8", "12", "12"];
|
|
|
+const currentRatio = computed(() => ratioByArea[activeAreaIndex.value] ?? "5");
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.agricultural-detail {
|
|
|
+ min-height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+ background: #f2f3f5;
|
|
|
+
|
|
|
+ .detail-content {
|
|
|
+ padding: 12px;
|
|
|
+ padding-bottom: 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-wrap {
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-box {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 12px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.sampling-card {
|
|
|
+ .sampling-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sampling-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #767676;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.photo-card {
|
|
|
+ .card-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-btns {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-bottom: 4px;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-btn {
|
|
|
+ padding: 0 14px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border-radius: 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #2199f8;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ratio-tip {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2199f8;
|
|
|
+ padding: 10px 12px;
|
|
|
+ background: rgba(33, 153, 248, 0.08);
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi