feat：接口对接，添加聊天农事卡片功能

src/api/modules/farm.js

@@ -16,5 +16,9 @@ module.exports = {
     userFarmSelectOption: {
         url: config.base_dev_url + "v2/farm/userFarmSelectOption",
         type: "get",
-    }
+    },
+    fruitsTypeItemList: {
+        url: config.base_dev_url + "mini_fruits_type_item/list/{parentId}",
+        type: "get",
+    },
 }

src/components/chatWindow.vue

@@ -23,6 +23,45 @@
                             <span class="duration">{{ msg.duration }}"</span>
                         </div>
 
+                        <!-- 对话样式消息 -->
+                        <div v-if="msg.messageType === 'dialog'" class="dialog-message">
+                            <div class="dialog-title">{{ msg.content.title }}</div>
+                            <div class="dialog-content">{{ msg.content.content }}</div>
+                            <div class="before-after-comparison">
+                                <div class="comparison-item before">
+                                    <div class="comparison-label">{{ msg.content.beforeAfter.before.title }}</div>
+                                    <div class="comparison-image">
+                                        <img :src="msg.content.beforeAfter.before.image" alt="农事前" />
+                                    </div>
+                                </div>
+                                <div class="vs-icon">VS</div>
+                                <div class="comparison-item after">
+                                    <div class="comparison-label">{{ msg.content.beforeAfter.after.title }}</div>
+                                    <div class="comparison-image">
+                                        <img :src="msg.content.beforeAfter.after.image" alt="农事后" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="work-details">
+                                <div class="detail-item">
+                                    <span class="detail-label">农事名称：</span>
+                                    <span class="detail-value">{{ msg.content.workDetails.name }}</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">所属分类：</span>
+                                    <span class="detail-value">{{ msg.content.workDetails.section }}</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">推荐时间：</span>
+                                    <span class="detail-value">{{ msg.content.workDetails.executeDate }}</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">触发条件：</span>
+                                    <span class="detail-value">{{ msg.content.workDetails.condition }}</span>
+                                </div>
+                            </div>
+                        </div>
+
                         <!-- <div class="time">{{ msg.time }}</div> -->
                     </div>
                 </template>
@@ -44,6 +83,12 @@
                             <span class="duration">{{ msg.duration }}"</span>
                         </div>
 
+                        <!-- 对话样式消息 -->
+                        <div v-if="msg.messageType === 'dialog'" class="dialog-message">
+                            <div class="dialog-title">{{ msg.content.title }}</div>
+                            <img src="@/assets/img/monitor/image.png" alt="" class="monitor-image">
+                        </div>
+
                         <!-- <div class="time">{{ msg.time }}</div> -->
                     </div>
                     <!-- <div class="avatar avatar-r">{{ msg.senderName.charAt(0) }}</div> -->
@@ -51,7 +96,27 @@
                 </template>
             </div>
         </div>
-
+        
+        <!-- 功能按钮区域 -->
+        <div class="function-buttons">
+            <el-select v-model="farmVal" size="large">
+                <el-option
+                v-for="item in options"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                />
+            </el-select>
+            <div 
+                v-for="(btn, index) in functionButtons" 
+                :key="index" 
+                class="function-btn" 
+                @click="btn.handler"
+            >
+                <span class="btn-text">{{ btn.text }}</span>
+            </div>
+        </div>
+        
         <!-- 输入框区域 -->
         <div class="input-area">
             <div class="toolbar">
@@ -93,12 +158,14 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick, watch, onActivated, onDeactivated } from "vue";
+import { useRouter } from "vue-router";
 import { base_img_url2 } from "@/api/config";
 import { getFileExt } from "@/utils/util";
 import UploadFile from "@/utils/upliadFile";
 import MqttClient from "@/plugins/MqttClient";
 
 const resize = "?x-oss-process=image/resize,p_120/format,webp/quality,q_100";
+const router = useRouter();
 
 const props = defineProps({
     text:{
@@ -133,6 +200,9 @@ const receiverIdVal = ref(null)
 
 //聊天会话
 const createSession = (toUserId,callback) =>{
+    // 先保存当前的对话样式消息  要注释
+    const dialogMessages = messages.value.filter(msg => msg.messageType === 'dialog');
+    
     VE_API.bbs.createSession({toUserId}).then((res) => {
         senderIcon.value = res.data.senderIcon
         receiverIcon.value = res.data.receiverIcon
@@ -150,6 +220,12 @@ const createSession = (toUserId,callback) =>{
                 receiverIcon:res.data.receiverIcon
             }
         })
+        
+        // 重新添加对话样式消息   要注释
+        if(dialogMessages.length > 0) {
+            messages.value = [...messages.value, ...dialogMessages];
+        }
+        
         setTimeout(()=>{
             scrollToBottom();
         },300)
@@ -215,7 +291,7 @@ const mqttClient = ref(null)
 const messagesContainer = ref(null);
 
 // 消息数据
-const messages = ref();
+const messages = ref([]);
 
 // 输入相关
 const inputMessage = ref("");
@@ -264,10 +340,13 @@ const initMqtt = () => {
 const sendMessage = (message) => {
     if(message.messageType === 'text'){
         sendMsg('text',message.content)
-    }else{
+    }else if(message.messageType === 'image'){
         sendMsg('image','',{
             originUrl:message.content
         })
+    }else if(message.messageType === 'dialog'){
+        // 对话样式消息不发送到服务器，只显示在本地
+        console.log('发送对话样式消息:', message.content);
     }
     messages.value.push(message);
     scrollToBottom();
@@ -408,6 +487,32 @@ const addEmoji = (emoji) => {
     showEmojiPicker.value = false;
 };
 
+// 功能按钮配置
+const functionButtons = ref([
+    {
+        text: '农场报告',
+        handler: () => {
+            console.log('点击农场报告，农场ID:', farmVal.value);
+            // 跳转到农场报告页面
+            // router.push(`/farm_report?farmId=${farmVal.value}`);
+        }
+    },
+    {
+        text: '农事卡片',
+        handler: () => {
+            // 跳转到农事卡片页面
+            router.push(`/farm_card?farmId=${farmVal.value}`);
+        }
+    },
+    {
+        text: '农场相册',
+        handler: () => {
+            // 跳转到农场相册页面
+            router.push(`/farm_photo`);
+        }
+    }
+]);
+
 // 辅助函数
 const getCurrentTime = () => {
     return new Date().toLocaleTimeString("zh-CN", {
@@ -426,16 +531,56 @@ const scrollToBottom = () => {
     });
 };
 
+const farmVal = ref('')
+const options = ref([])
+
+// 获取农场列表
+function getFarmList() {
+    VE_API.farm.userFarmSelectOption().then(({data}) => {
+        options.value = data || []
+        if (data && data.length > 0) {
+            farmVal.value = data[0].id
+        }
+    })
+}
+
 // 生命周期钩子
 onMounted(() => {
     // scrollToBottom();
+    getFarmList();
 });
 
 onActivated(()=>{
     if(props.userId){
        scrollToBottom();
     }
+    // 检查是否有选中的农事工作数据
+    checkSelectedFarmWork();
 })
+
+// 检查选中的农事工作数据
+const checkSelectedFarmWork = () => {
+    const selectedFarmWork = localStorage.getItem('selectedFarmWork');
+    if (selectedFarmWork) {
+        const data = JSON.parse(selectedFarmWork);
+        // 发送对话样式的消息
+        sendDialogMessage(data.dialogMessage);
+        // 清除localStorage中的数据
+        localStorage.removeItem('selectedFarmWork');
+    }
+}
+
+// 发送对话样式的消息
+const sendDialogMessage = (dialogData) => {
+    const message = {
+        sender: "sent",
+        messageType: "dialog",
+        senderIcon: senderIcon.value,
+        content: dialogData,
+        time: getCurrentTime(),
+    };
+    sendMessage(message);
+}
 </script>
 
 <style scoped lang="scss">
@@ -465,7 +610,7 @@ onActivated(()=>{
             .bubble {
                 background-color: white;
                 border-radius: 0 10px 10px 10px;
-                padding: 10px 15px;
+                padding: 10px 12px;
                 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
             }
         }
@@ -651,7 +796,6 @@ onActivated(()=>{
 
 .emoji-picker span {
     font-size: 24px;
-    cursor: pointer;
     text-align: center;
 }
 
@@ -659,6 +803,25 @@ onActivated(()=>{
     transform: scale(1.2);
 }
 
+/* 功能按钮样式 */
+.function-buttons {
+    display: flex;
+    gap: 5px;
+    padding: 5px 10px;
+    box-sizing: border-box;
+    .function-btn {
+        background-color: white;
+        border-radius: 8px;
+        padding: 10px 10px;
+        min-width: 60px;
+        text-align: center;
+        .btn-text {
+            font-size: 14px;
+        }
+    }
+}
+
+
 /* 图片预览 */
 .image-preview {
     position: fixed;
@@ -678,4 +841,32 @@ onActivated(()=>{
     max-height: 90%;
     object-fit: contain;
 }
+
+/* 对话样式消息 */
+.dialog-message {
+    max-width: 100%;
+    background: #fff !important;
+    padding: 10px;
+    border-radius: 10px;
+    
+    .dialog-title {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.6);
+        margin-bottom: 10px;
+    }
+    .monitor-image{
+        width: 222px;
+        height: 180px;
+    }
+    
+}
+
+/* 我方消息中的对话样式 */
+.message.sent .dialog-message {
+    background: #e3f2fd;
+    
+    .work-details {
+        background: #f0f8ff;
+    }
+}
 </style>

src/components/weatherInfo.vue

@@ -82,10 +82,6 @@ const toggleExpand = () => {
     emit('weatherExpanded',isExpanded.value);
 };
 
-onMounted(() => {
-    getFarmList()
-});
-
 const farmId = ref(null);
 const farmName = ref("");
 const farmList = ref([]);
@@ -93,14 +89,21 @@ const farmList = ref([]);
 function getFarmList() {
     VE_API.farm.userFarmSelectOption().then(({data}) => {
         farmList.value = data || []
-        farmName.value = data[0].name
-        farmId.value = data[0].id
-        emit('changeGarden',farmId.value);
+        if (data && data.length > 0) {
+            farmName.value = data[0].name
+            farmId.value = data[0].id
+            emit('changeGarden',farmId.value);
+        }
     })
 }
 
+// 暴露getFarmList方法给父组件调用
+defineExpose({
+    getFarmList
+})
+
 const handleAddGarden = () => {
-    router.push("/create_farm?type=add")
+    router.push(`/create_farm?isReload=true&from=monitor`)
 }
 </script>
 

src/router/globalRoutes.js

@@ -260,4 +260,10 @@ export default [
         name: "AgriServicesManage",
         component: () => import("@/views/old_mini/agri_services/index.vue"),
     },
+    // 农场卡片
+    {
+        path: "/farm_card",
+        name: "FarmCard",
+        component: () => import("@/views/old_mini/plan/farmCard.vue"),
+    },
 ];

src/views/old_mini/create_farm/index.vue

@@ -62,7 +62,7 @@
                                                 @change="changeSpecie"
                                                 class="select-item"
                                                 v-model="ruleForm.speciesItem"
-                                                placeholder="作物类型"
+                                                placeholder="品类"
                                             >
                                                 <el-option
                                                     v-for="(item, index) in specieList"
@@ -72,12 +72,13 @@
                                                 />
                                             </el-select>
                                             <el-select
-                                                v-model="ruleForm.phenologyId"
-                                                placeholder="物候期"
+                                                v-model="ruleForm.typeId"
+                                                placeholder="品种"
+                                                @change="changeTypeId"
                                                 class="period-select select-item"
                                             >
                                                 <el-option
-                                                    v-for="(item, index) in phenologyList"
+                                                    v-for="(item, index) in fruitsList"
                                                     :key="index"
                                                     :label="item.name"
                                                     :value="item.id"
@@ -108,7 +109,7 @@
                                     <el-form-item label="农场面积" prop="mu">
                                         <div class="area-box">
                                             <el-input
-                                                :placeholder="isFromEditMap ? '勾选地块获得农场面积' : '请输入亩数'"
+                                                :placeholder="isFromEditMap ? '勾选地块获得农场面积' : '请输入农场的真实面积'"
                                                 v-model="ruleForm.mu"
                                                 :readonly="isFromEditMap"
                                                 type="text"
@@ -267,6 +268,7 @@ onMounted(() => {
     // 清空地块和面积数据
     polygonArr.value = null;
     ruleForm.mu = '';
+    ruleForm.typeId = '';
 
     getSpecieList();
 });
@@ -276,8 +278,7 @@ const paramsType = ref(null);
 onActivated(() => {
     paramsType.value = route.query.type;
     
-    // 如果是从 home 页面进入，重置所有数据
-    if (route.query.isFromHome) {
+    if (route.query.isReload) {
         // 清除旧的地块数据
         store.commit("home/SET_FARM_POLYGON", null);
         isFromEditMap.value = false; // 从home进入，可以手动输入
@@ -293,6 +294,7 @@ onActivated(() => {
         // 不再自动生成默认地块，等待用户点击"新增地块"
         polygonArr.value = null;
         ruleForm.mu = '';
+        ruleForm.typeId = '';
         
         return; // 直接返回，不执行下面的逻辑
     }
@@ -393,7 +395,7 @@ const ruleForm = reactive({
     address: "",
     mu: "",
     speciesItem: null,
-    phenologyId: "",
+    typeId: "",
     name: "",
     fzr: "",
     tel: "",
@@ -421,7 +423,7 @@ const rules = reactive({
         { validator: validateMianji, trigger: ["blur", "change"] }
     ],
     speciesItem: [{ required: true, message: "请选择品类", trigger: "blur" }],
-    phenologyId: [{ required: true, message: "请选择物候期", trigger: "blur" }],
+    typeId: [{ required: true, message: "请选择品种", trigger: "blur" }],
     name: [{ required: true, message: "请输入您的农场名称", trigger: "blur" }],
     fzr: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
     tel: [
@@ -446,18 +448,27 @@ const submitForm = (formEl) => {
                 geom: polygonArr.value,
             };
             VE_API.farm.saveFarm(params).then((res) => {
-                ElMessage.success("创建成功");
-                // 重置表单和地块数据
-                ruleFormRef.value.resetFields();
-                store.commit("home/SET_FARM_POLYGON", null);
-                polygonArr.value = null;
-                isFromEditMap.value = false;
-                // 返回首页并显示成功弹窗
-                router.replace("/home?reload=true&showSuccess=true");
+                if(res.code === 0) {
+                    ElMessage.success("创建成功");
+                    // 重置表单和地块数据
+                    ruleFormRef.value.resetFields();
+                    store.commit("home/SET_FARM_POLYGON", null);
+                    polygonArr.value = null;
+                    isFromEditMap.value = false;
+                    
+                    // 根据来源页面决定跳转目标
+                    const fromPage = route.query.from;
+                    if (fromPage === 'monitor') {
+                        // 如果是从monitor页面来的，跳转回monitor页面并刷新农场列表
+                        router.replace(`/${fromPage}`);
+                    } else {
+                        // 默认跳转到首页
+                        router.replace("/home?reload=true&showSuccess=true");
+                    }
+                }else{
+                    ElMessage.error(res.msg);
+                }
             });
-            console.log("submit!", params);
-        } else {
-            console.log("error submit!");
         }
     });
 };
@@ -470,8 +481,11 @@ const resetForm = (formEl) => {
     polygonArr.value = null;
     isFromEditMap.value = false;
     hasDefaultPolygon.value = false; // 重置默认地块状态
-    if(route.query.isFromHome) {
-        router.replace("/home?reload=true");
+    
+    // 根据来源页面决定返回目标
+    const fromPage = route.query.from;
+    if (fromPage) {
+        router.replace(`/${fromPage}?reload=true`);
         return;
     }
     router.go(-1)
@@ -521,6 +535,7 @@ function toSubPage() {
 }
 
 const pointAddress = ref(null);
+const farmCity = ref(null);
 function getLocationName(location) {
     const params = {
         key: MAP_KEY,
@@ -531,6 +546,7 @@ function getLocationName(location) {
         const add = result.formatted_addresses?.recommend ? result.formatted_addresses.recommend : result.address + "";
         ruleForm.address = add;
         pointAddress.value = result.address;
+        farmCity.value = result.address_component?.city || '';
     });
 }
 
@@ -554,20 +570,28 @@ function getSpecieList() {
 }
 
 function changeSpecie(v) {
-    getPhenology(v.defaultContainerId);
+    getFruitsTypeItemList(v.id);
+}
+
+function changeTypeId(v) {
+    const fruitsName = fruitsList.value.find(item => item.id === v).name;
+    ruleForm.name = farmCity.value + fruitsName + "农场";
 }
 
-const phenologyList = ref([]);
-function getPhenology(containerId) {
-    VE_API.farm.fetchPhenologyList({ containerId }).then(({ data }) => {
-        phenologyList.value = data;
+const fruitsList = ref([]);
+function getFruitsTypeItemList(parentId) {
+    VE_API.farm.fruitsTypeItemList({ parentId }).then(({ data }) => {
+        fruitsList.value = data;
     });
 }
 
 function backgToHome() {
     ruleFormRef.value?.resetFields();
-    if(route.query.isFromHome) {
-        router.replace("/home?reload=true");
+    
+    // 根据来源页面决定返回目标
+    const fromPage = route.query.from;
+    if (fromPage) {
+        router.replace(`/${fromPage}?reload=true`);
         return;
     }
     router.go(-1)

src/views/old_mini/home/index.vue

@@ -111,7 +111,7 @@ const handleCardClick = (card) => {
 
 const handleBtn = () => {
     if(farmPopupType.value === 'create'){
-        router.push("/create_farm?isFromHome=true");
+        router.push("/create_farm?isReload=true&from=home");
     }
     showFarmPopup.value = false;
 }

src/views/old_mini/monitor/index.vue

@@ -4,6 +4,7 @@
         <div class="weather-mask" v-show="isExpanded"></div>
         <!-- 天气 -->
         <weather-info
+            ref="weatherInfoRef"
             class="weather-info"
             @weatherExpanded="weatherExpanded"
             @changeGarden="changeGarden"
@@ -21,7 +22,7 @@
                     <span>农场相册</span>
                 </div>
             </div>
-            <badge dot :offset="[-4, 5]" @click="handlePage('/message')">
+            <badge dot :offset="[-4, 5]" @click="handlePage('/message_list')">
                 <div class="add-farm-button">
                     <img class="icon" src="@/assets/img/monitor/notice.png" alt="" />
                     <span>农场消息</span>
@@ -77,7 +78,7 @@
                         </div>
                         <div class="item-status van-multi-ellipsis--l2">{{ item.content }}</div>
                     </div>
-                    <div class="item-zone">
+                    <div class="item-zone" v-if="item.regionId">
                         <div class="point"></div>
                         <span>{{ item.regionId }}</span>
                     </div>
@@ -90,18 +91,21 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref, computed, onMounted, onUnmounted, onActivated } from "vue";
 import { useStore } from "vuex";
 import { Badge, List } from "vant";
 import weatherInfo from "@/components/weatherInfo.vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import farmInfoPopup from "../home/components/farmInfoPopup.vue";
 
 const store = useStore();
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 const router = useRouter();
+const route = useRoute();
 
 const farmInfoRef = ref(null);
+const weatherInfoRef = ref(null);
+
 function toFarmInfo() {
     farmInfoRef.value.handleShow();
 }
@@ -244,7 +248,10 @@ const handleBroadcast = () => {
     speechSynthesis.speak(utterance);
 };
 
-onMounted(() => {});
+// 组件激活时检查是否需要刷新农场列表
+onActivated(() => {
+    weatherInfoRef.value.getFarmList();
+});
 
 // 组件卸载时停止语音播放
 onUnmounted(() => {

src/views/old_mini/plan/farmCard.vue

@@ -0,0 +1,344 @@
+<template>
+    <div class="farm-card-page">
+        <custom-header name="农场卡片"></custom-header>
+        <div class="farm-card-content">
+            <div class="expert-prescription">
+                <div class="plan-menu">
+                    <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
+                        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
+                            <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
+                                <template #title>
+                                    <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
+                                    <span class="menu-text">{{ menu.name }}</span>
+                                </template>
+                                <el-menu-item
+                                    v-for="item in menu.farmWorkArrangeList"
+                                    :key="item.id"
+                                    :index="`${menu.id}-${item.id}`"
+                                >
+                                    <el-anchor-link
+                                        :href="'#' + menu.name + item.farmWorkDetail?.name"
+                                        :title="item.farmWorkDetail?.name || '摇花落花'"
+                                    />
+                                </el-menu-item>
+                            </el-sub-menu>
+                        </el-menu>
+                    </el-anchor>
+                </div>
+                <div class="expert-content" ref="containerRef">
+                    <div v-for="(section, index) in menuData" :key="index" class="content-section">
+                        <div
+                            class="section-item"
+                            v-for="(sub, subI) in section.farmWorkArrangeList"
+                            :key="index + '-' + subI"
+                        >
+                            <div class="section-id" :id="section.name + sub.farmWorkDetail?.name"></div>
+                            <record-item :record-item-data="sub">
+                                <template #title>
+                                    <div class="box-title">
+                                        <div class="title-l">
+                                            {{ sub.farmWorkDetail?.name }}
+                                            <span class="parent-text">{{ section.name }}</span>
+                                        </div>
+                                        <div class="title-r">
+                                            <radio
+                                                :name="`${section.id}-${sub.id}`"
+                                                v-model="selectedItem"
+                                                @change="handleSelectionChange"
+                                            />
+                                        </div>
+                                    </div>
+                                </template>
+                            </record-item>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="selection-info" v-if="selectedItem">
+        <div class="selection-btn" @click="handleSend">发送</div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import recordItem from "@/components/recordItem.vue";
+import { Radio } from "vant";
+
+const route = useRoute();
+const router = useRouter();
+const containerRef = ref(null);
+const handleClick = (e) => {
+    e.preventDefault();
+};
+// 菜单
+const defaultActive = ref("1-1");
+
+const menuData = ref([]);
+// 选中状态
+const selectedItem = ref("");
+
+function getWorkList() {
+    VE_API.home
+        .getPhenologyFarmWorkList({ farmId: 93301, containerId: route.query.containerId || 2 })
+        .then(({ data }) => {
+            menuData.value = data;
+        });
+}
+
+// 处理选择变化
+const handleSelectionChange = (value) => {
+    selectedItem.value = value;
+    console.log("选中项:", value);
+};
+
+// 发送功能
+const handleSend = () => {
+    if (!selectedItem.value) {
+        console.log("请先选择一项");
+        return;
+    }
+    
+    // 找到选中的项目数据
+    let selectedData = null;
+    for (const section of menuData.value) {
+        for (const sub of section.farmWorkArrangeList) {
+            if (`${section.id}-${sub.id}` === selectedItem.value) {
+                selectedData = {
+                    sectionName: section.name,
+                    workName: sub.farmWorkDetail?.name,
+                    executeDate: sub.farmWorkDetail?.executeDate,
+                    condition: sub.farmWorkDetail?.condition,
+                    code: sub.farmWorkDetail?.code,
+                    attention: sub.attention
+                };
+                break;
+            }
+        }
+        if (selectedData) break;
+    }
+    
+    if (selectedData) {
+        // 创建对话样式的消息
+        const dialogMessage = createDialogMessage(selectedData);
+        
+        // 返回到上一页并传递数据
+        router.back();
+        
+        // 可以通过事件总线或其他方式传递数据到聊天窗口
+        // 这里使用localStorage临时存储，实际项目中可以使用事件总线
+        localStorage.setItem('selectedFarmWork', JSON.stringify({
+            data: selectedData,
+            dialogMessage: dialogMessage
+        }));
+    }
+};
+
+// 创建对话样式的消息
+const createDialogMessage = (selectedData) => {
+    return {
+        type: 'farm_work_selection',
+        title: '农事复核情况',
+        content: `这是${selectedData.sectionName}${selectedData.workName}的农事复核情况，请查看~`,
+        beforeAfter: {
+            before: {
+                title: '农事前',
+                description: '农事执行前的状态',
+                image: 'https://birdseye-img.sysuimars.com/before-image.jpg' // 实际项目中应该是真实的图片URL
+            },
+            after: {
+                title: '农事后', 
+                description: '农事执行后的状态',
+                image: 'https://birdseye-img.sysuimars.com/after-image.jpg' // 实际项目中应该是真实的图片URL
+            }
+        },
+        workDetails: {
+            name: selectedData.workName,
+            section: selectedData.sectionName,
+            executeDate: selectedData.executeDate,
+            condition: selectedData.condition,
+            code: selectedData.code,
+            attention: selectedData.attention
+        }
+    };
+};
+
+onMounted(() => {
+    getWorkList();
+});
+</script>
+
+<style scoped lang="scss">
+.farm-card-page {
+    width: 100%;
+    height: 100vh;
+    background: #f5f7fb;
+    .farm-card-content {
+        width: 100%;
+        height: 100%;
+        .expert-prescription {
+            display: flex;
+            width: 100%;
+            height: calc(100vh - 40px);
+            padding-top: 10px;
+            .plan-menu {
+                width: 100px;
+                height: 100%;
+                overflow: auto;
+                padding: 10px 0;
+                box-sizing: border-box;
+                background: #fff;
+                border-radius: 0 10px 10px 0;
+                .menu-icon {
+                    width: 13px;
+                }
+                .menu-text {
+                    padding: 0 4px;
+                }
+                ::v-deep {
+                    .el-anchor {
+                        height: 100%;
+                        background: none;
+                    }
+                    .el-anchor__marker {
+                        display: none;
+                    }
+                    .el-menu {
+                        background: none;
+                        border: none;
+                        .el-sub-menu__title {
+                            background: none;
+                            padding: 0 2px;
+                            justify-content: center;
+                        }
+                        .el-sub-menu__title {
+                            height: 32px;
+                        }
+                        .el-sub-menu .el-sub-menu__icon-arrow {
+                            position: static;
+                            padding-top: 6px;
+                        }
+                        .el-sub-menu {
+                            margin-bottom: 16px;
+                            &.is-opened {
+                                .el-sub-menu__icon-arrow {
+                                    padding-bottom: 6px;
+                                    padding-top: 0;
+                                }
+                            }
+                            .el-menu-item {
+                                height: 32px;
+                                line-height: 32px;
+                                margin: 4px 8px;
+                                padding: 0 2px;
+                                justify-content: center;
+                                background: none;
+                            }
+                            .el-menu-item.is-active {
+                                background: none;
+                                color: #fff;
+                            }
+                            .el-anchor__item {
+                                width: 100%;
+                                text-align: center;
+                            }
+                            .el-anchor__link {
+                                color: #666666;
+                            }
+                            .el-anchor__link.is-active {
+                                background: rgba(33, 153, 248, 0.1);
+                                border-radius: 20px;
+                                color: #2199f8;
+                                border: 1px solid #2199f8;
+                            }
+                        }
+                    }
+                    .el-anchor__list {
+                        padding-left: 0;
+                    }
+                }
+            }
+            .expert-content {
+                width: calc(100% - 100px);
+                height: 100%;
+                overflow: auto;
+                padding-bottom: 80px;
+                box-sizing: border-box;
+                .content-section {
+                    position: relative;
+                    .section-item {
+                        position: relative;
+                    }
+                    .section-id {
+                        position: absolute;
+                        // top: -6px;
+                        top: 0;
+                        width: 100%;
+                        height: 1px;
+                    }
+                }
+                .box-title {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding-bottom: 8px;
+                    border-bottom: 1px solid #f5f5f5;
+                    margin-bottom: 8px;
+                    .title-l {
+                        font-size: 16px;
+                        font-weight: 600;
+                        color: #000;
+                        .parent-text {
+                            margin-left: 5px;
+                            font-size: 12px;
+                            font-weight: normal;
+                            padding: 4px 6px;
+                            border-radius: 14px;
+                            background: rgba(119, 119, 119, 0.1);
+                        }
+                    }
+                    .title-r {
+                        display: flex;
+                        align-items: center;
+                    }
+                    .title-btn {
+                        width: 24px;
+                        height: 24px;
+                        border-radius: 50%;
+                        background: #2199f8;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+        }
+    }
+}
+.selection-info {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    padding: 16px;
+    font-size: 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 2px 2px 11px rgba(0, 0, 0, 0.48);
+    .selection-btn {
+        background: linear-gradient(180deg, #70BFFE 0%, #2199F8 100%);
+        color: white;
+        padding: 8px;
+        text-align: center;
+        width: 60%;
+        border-radius: 20px;
+    }
+}
+</style>