feat:添加农场信息页面

src/components/weatherInfo.vue

@@ -23,7 +23,13 @@
                             </el-dropdown-menu>
                         </template>
                     </el-dropdown>
-                    <div class="add-garden" @click="handleAddGarden">基本信息</div>
+                    <div class="btn-wrap">
+                        <div class="add-garden" @click="handleFarmInfo">农场信息</div>
+                        <div class="add-garden gray-btn" @click="handleAddFarm">
+                            <el-icon><Plus /></el-icon>
+                            <span>新建农场</span>
+                        </div>
+                    </div>
                 </div>
                 <div class="temperature flex-center">
                     <div class="temperature-number">{{ currentWeather.temp || '--' }}</div>
@@ -290,8 +296,12 @@ function getLocationName() {
 }
 
 const myFarmInfoRef = ref(null);
-const handleAddGarden = () => {
-    myFarmInfoRef.value.handleShow();
+const handleFarmInfo = () => {
+    // myFarmInfoRef.value.handleShow();
+    router.push(`/farm_info`);
+}
+const handleAddFarm = () => {
+    router.push(`/create_farm?type=farmer&expertMiniUserId=81881&isReload=true`);
 }
 
 // 获取天气数据
@@ -359,6 +369,7 @@ const currentDateText = computed(() => {
     }
     .header {
         display: flex;
+        align-items: flex-end;
         justify-content: space-between;
         .header-left {
             .address-select {
@@ -366,6 +377,7 @@ const currentDateText = computed(() => {
                     width: fit-content;
                     max-width: 170px;
                     margin-right: 8px;
+                    margin-bottom: 10px;
                     .el-dropdown-link {
                         font-size: 15px;
                         font-weight: 500;
@@ -389,12 +401,25 @@ const currentDateText = computed(() => {
                         }
                     }
                 }
+                .btn-wrap{
+                    position: absolute;
+                    right: 10px;
+                    top: 8px;
+                    display: flex;
+                    gap: 8px;
+                }
                 .add-garden {
                     font-size: 12px;
                     color: #2199f8;
                     padding: 3px 10px;
                     border: 1px solid rgba(33, 153, 248, 0.5);
                     border-radius: 25px;
+                    display: flex;
+                    align-items: center;
+                }
+                .gray-btn {
+                    color: #919191;
+                    border: 1px solid rgba(145, 145, 145, 0.5);
                 }
             }
             .temperature {
@@ -432,7 +457,7 @@ const currentDateText = computed(() => {
         }
         .weather-icon {
             i {
-                font-size: 47px;
+                font-size: 40px;
                 color: #a7cffb;
             }
         }

src/router/globalRoutes.js

@@ -467,4 +467,10 @@ export default [
         meta: { keepAlive: true },
         component: () => import("@/views/old_mini/interactionList/confirmArea.vue"),
     },
+    // 农场信息
+    {
+        path: "/farm_info",
+        name: "FarmInfo",
+        component: () => import("@/views/old_mini/monitor/subPages/farmInfo.vue"),
+    },
 ];

src/views/old_mini/monitor/index.vue

@@ -8,7 +8,7 @@
             @changeGarden="changeGarden" :isGarden="true" :gardenId="defaultGardenId"></weather-info>
         <!-- 作物档案 -->
         <div class="archives-time-line">
-            <div class="archives-time-line-header" @click="handleJump">
+            <div class="archives-time-line-header">
                 <div class="line-title">作物档案</div>
                 <!-- <el-date-picker style="width: 110px" v-model="date" type="year" placeholder="全部日期" /> -->
             </div>
@@ -92,10 +92,6 @@ const handleVarietyClick = (tab,index) => {
     farmIdData.value = tab.farmId;
 };
 
-const handleJump = () =>{
-    router.push('/create_farm?type=farmer&expertMiniUserId=81881&isReload=true')
-}
-
 const showAgriExecutePopup = ref(false); // 农事执行弹窗
 const agriExecuteData = ref({});
 const handleAgriExecuted = () => {

src/views/old_mini/monitor/subPages/farmInfo.vue

@@ -0,0 +1,247 @@
+<template>
+    <custom-header name="农场信息" bgColor="#f2f3f5"></custom-header>
+    <div class="farm-details-page">
+        <div class="farm-info">
+            <div class="map"></div>
+            <div class="info-box">
+                <div class="section-header">
+                    <div class="line-title">基本信息</div>
+                    <div class="edit-btn" @click="handleEditFarmInfo">点击编辑</div>
+                </div>
+                <div class="info-list">
+                    <div class="info-row">
+                        <span class="info-label">农场名称：</span>
+                        <span class="info-value">{{ farmInfo.name }}</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">联系人：</span>
+                        <span class="info-value">{{ farmInfo.contact }}</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">联系电话：</span>
+                        <span class="info-value">{{ farmInfo.phone }}</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">种植作物：</span>
+                        <div class="info-value crop-tags">
+                            <span v-for="crop in farmInfo.crops" :key="crop" class="crop-tag">
+                                {{ crop }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">农场位置：</span>
+                        <span class="info-value">{{ farmInfo.location }}</span>
+                    </div>
+                </div>
+            </div>
+            <el-divider class="info-divider" />
+            <div class="info-box">
+                <div class="section-header">
+                    <div class="line-title">农场设施</div>
+                    <div class="edit-btn" @click="handleEditFarmInfo">点击编辑</div>
+                </div>
+                <div class="info-list">
+                    <div class="info-row">
+                        <span class="info-label">土壤类型：</span>
+                        <span class="info-value">砂质土</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">灌溉方式：</span>
+                        <div class="info-value crop-tags">
+                            <span v-for="crop in farmInfo.crops" :key="crop" class="crop-tag">
+                                {{ crop }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="info-row info-row-column">
+                        <span class="info-label">农机设备：</span>
+                        <div class="info-value">
+                            <div class="device-box">
+                                <div
+                                    class="device-item"
+                                    v-for="device in farmDevices"
+                                    :key="device.id"
+                                >
+                                    <span class="device-name">{{ device.name }}</span>
+                                    <span class="device-count">{{ device.count }}架</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="info-row info-row-column">
+                        <span class="info-label">希望改善问题：</span>
+                        <div class="info-value problem-tags">
+                            <span
+                                v-for="item in improveProblems"
+                                :key="item"
+                                class="problem-tag"
+                            >
+                                {{ item }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import customHeader from "@/components/customHeader.vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const farmInfo = {
+    name: "从化荔博园",
+    contact: "张扬",
+    phone: "19871533125",
+    crops: ["桂味", "糯米糍", "井岗红糯"],
+    location: "广东省广州市从化区某某街道",
+};
+
+const farmDevices = [
+    { id: 1, name: "植保无人机", count: 10 },
+    { id: 2, name: "植保无人机", count: 10 },
+    { id: 3, name: "植保无人机", count: 10 },
+    { id: 4, name: "植保无人机", count: 10 },
+    { id: 5, name: "植保无人机", count: 10 },
+    { id: 6, name: "植保无人机", count: 10 },
+];
+
+const improveProblems = ["土壤改良", "树势增强", "品质提升"];
+
+const handleEditFarmInfo = () => {
+    console.log("点击编辑基本信息");
+    router.push(`/create_farm?type=edit&farmId=766&from=farm_info`);
+};
+</script>
+
+<style lang="scss" scoped>
+.farm-details-page {
+    background: #f2f3f5;
+    height: 100vh;
+    padding: 10px 12px;
+
+    .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;
+        }
+    }
+
+    .farm-info {
+        background: #fff;
+        border-radius: 8px;
+        padding: 10px;
+
+        .map {
+            width: 100%;
+            height: 142px;
+            background: red;
+            border-radius: 5px;
+        }
+
+        .info-box {
+            margin-top: 12px;
+
+            .section-header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .edit-btn {
+                padding: 4px 12px;
+                font-size: 12px;
+                color: #86909c;
+                border-radius: 999px;
+                border: 0.5px solid #d0d3d8;
+                background-color: #ffffff;
+            }
+
+            .info-list {
+                margin-top: 10px;
+                margin-left: 5px;
+
+                .info-row {
+                    display: flex;
+                    align-items: flex-start;
+                    margin-bottom: 6px;
+
+                    .info-label {
+                        min-width: 80px;
+                        color: #4E5969;
+                    }
+
+                    .crop-tags {
+                        display: flex;
+                        flex-wrap: wrap;
+                        gap: 6px;
+                    }
+
+                    .crop-tag {
+                        padding: 2px 8px;
+                        background: #E8F3FF;
+                        color: #2199f8;
+                        border-radius: 2px;
+                        font-size: 12px;
+                    }
+
+                    .problem-tags {
+                        display: flex;
+                        flex-wrap: wrap;
+                        gap: 6px;
+                        .problem-tag {
+                            padding: 2px 8px;
+                            background: rgba(58, 173, 148, 0.1);
+                            color: #3AAD94;
+                            border-radius: 2px;
+                            font-size: 13px;
+                        }
+                    }
+
+                    .device-box {
+                        padding: 6px;
+                        border-radius: 4px;
+                        border: 0.5px solid rgba(33, 153, 248, 0.2);
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: space-between;
+                        .device-item {
+                            display: flex;
+                            padding: 4px 0;
+                            gap: 15px;
+                            font-size: 13px;
+                            color: #1D2129;
+                            .device-count {
+                                padding: 2px 8px;
+                                background: #E8F3FF;
+                                color: #2199f8;
+                                border-radius: 2px;
+                            }
+                        }
+                    }
+                }
+                .info-row-column {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 4px;
+                }
+            }
+        }
+    }
+}
+</style>