fix: 作物档案

src/components/pageComponents/FarmInfoCard.vue

@@ -15,7 +15,7 @@
                 </div>
             </div>
             <!-- 右侧按钮插槽 -->
-            <div v-if="hasRightSlot" class="item-right-btn" @click.stop>
+            <div v-if="hasRightSlot" :class="data.customRight ? data.customRight : 'item-right-btn'" @click.stop>
                 <slot name="right"></slot>
             </div>
         </div>
@@ -136,6 +136,7 @@ const handleRemind = () => {
                     // max-width: 100px;
                 }
                 .tags {
+                    flex: none;
                     display: flex;
                     gap: 6px;
                     align-items: center;
@@ -202,6 +203,11 @@ const handleRemind = () => {
         }
     }
 
+    
+    .tag-right {
+        align-self: baseline;
+    }
+
     .item-right-btn {
         text-align: center;
         color: #888b8d;

src/components/popup/interactPopup.vue

@@ -229,7 +229,7 @@ defineExpose({
         padding: 0 18px 20px;
 
         .form-item {
-            margin-bottom: 20px;
+            margin-bottom: 16px;
 
             &:last-child {
                 margin-bottom: 0;

src/router/globalRoutes.js

@@ -316,6 +316,12 @@ export default [
         name: "FarmDetails",
         component: () => import("@/views/old_mini/user/farmDetails.vue"),
     },
+    // 作物档案
+    {
+        path: "/crop_record",
+        name: "CropRecord",
+        component: () => import("@/views/old_mini/user/subPages/cropRecord.vue"),
+    },
     // 编辑农事方案
     {
         path: "/edit_plan",

src/views/old_mini/task_condition/components/interact.vue

@@ -603,6 +603,7 @@ function handleSelectCurrentPhenology(item) {
     }
 
     .task-content {
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
         min-height: 80px;
     }
 

src/views/old_mini/user/farmDetails.vue

@@ -35,7 +35,7 @@
                 <tab title="作物档案" class="tab-item">
                     <common-box title="作物档案">
                         <template #right>
-                            <span @click="handleDetail('farm_list')">查看详情</span>
+                            <span @click="handleDetail('crop_record')">查看详情</span>
                         </template>
                         <template v-if="farmWorkData.length">
                             <div class="farm-work-timeline">
@@ -50,11 +50,13 @@
                                         <div class="timeline-line"></div>
                                     </div>
                                     <div class="timeline-right">
-                                        <div class="farm-work-card">
+                                        <div class="farm-work-card" :class="['card-' + item.recordType, { 'is-future': item.isFuture }]">
+                                            <div class="type-box">{{ getRecordTypeText(item.recordType) }}</div>
                                             <div class="farm-work-date">{{ item.time }}</div>
                                             <div class="farm-work-desc">
                                                 <span class="farm-work-action">{{ item.action }}</span>
                                                 <span class="farm-work-content">{{ item.content }}</span>
+                                                <span>{{ item.text }}</span>
                                             </div>
                                         </div>
                                     </div>
@@ -207,6 +209,15 @@ const getFarmDetail = () => {
 };
 
 const farmWorkData = ref([]);
+const typeObj = {
+    1: '物候进程',
+    2: '农事',
+    3: '异常',
+}
+
+const getRecordTypeText = (recordType) => {
+    return typeObj[recordType];
+}
 const getFarmWorkList = () => {
     // VE_API.user.getFarmWorkList(paramsPage.value).then(({ data }) => {
     //     if (data && data.length > 0) {
@@ -218,16 +229,27 @@ const getFarmWorkList = () => {
             time: "8/8",
             action: "进入",
             content: "花芽分化期",
+            recordType: 1,
         },
         {
             time: "8/1",
             action: "做了",
-            content: "杀虫 农事",
+            content: "杀虫",
+            text: "农事",
+            recordType: 2,
+        },
+        {
+            time: "7/30",
+            action: "出现",
+            content: "蒂蛀虫",
+            recordType: 3,
         },
         {
             time: "7/25",
             action: "预计进入",
             content: "果实膨大期",
+            isFuture: true,
+            recordType: 1,
         },
     ];
 };
@@ -587,6 +609,52 @@ const onSelect = () => {
                         line-height: 22px;
                         display: flex;
                         align-items: center;
+                        &.card-1 {
+                            border: 1px solid #8BCCFF;
+                            .type-box {
+                                background: #2199F8;
+                            }
+                            .farm-work-content {
+                                color: #2199F8;
+                            }
+                        }
+                        &.card-2 {
+                            border: 1px solid #FFBB83;
+                            .type-box {
+                                background: #FF953D;
+                            }
+                            .farm-work-content {
+                                color: #FF953D;
+                            }
+                        }
+                        &.card-3 {
+                            border: 1px solid #FF9C9C;
+                            .type-box {
+                                background: #FD7676;
+                            }
+                            .farm-work-content {
+                                color: #FD7676;
+                            }
+                        }
+                        &.is-future {
+                            // opacity: 0.5;
+                            background: rgba(246, 250, 255, 0.5);
+                            .type-box {
+                                background: rgba(33, 153, 248, 0.5);
+                            }
+                            .farm-work-content {
+                                color: rgba(29, 33, 41, 0.5);
+                            }
+                        }
+                        .type-box {
+                            margin-right: 12px;
+                            padding: 0 5px;
+                            height: 20px;
+                            line-height: 20px;
+                            font-size: 12px;
+                            color: #fff;
+                            border-radius: 0 4px 0 4px;
+                        }
                         .farm-work-date {
                             padding-right: 4px;
                         }
@@ -594,6 +662,9 @@ const onSelect = () => {
                             .farm-work-action {
                                 padding-right: 4px;
                             }
+                            .farm-work-content {
+                                padding-right: 4px;
+                            }
                         }
                     }
                 }

src/views/old_mini/user/index.vue

@@ -31,16 +31,27 @@
                         :data="{
                             ...ele,
                             farmName: ele.name,
-                            area: ele.mianji + '亩',
+                            userType: ele.userType || '托管客户',
                             variety: ele.speciesName,
                             address: ele.address,
                             maxWidth: '90px',
+                            customRight: 'tag-right',
                         }"
                         @click="handleItemClick(ele)"
                     >
-                        <!-- <template #right>
-                            <div @click.stop="handleChat(ele)">{{ ele.receiveUserId ? '在线沟通' : '分享认领' }}</div>
-                        </template> -->
+                        <template #right>
+                            <el-popover title="" :popper-style="'min-width: 110px;'" :width="110" placement="left-start" trigger="click">
+                                <div class="tag-list">
+                                    <div class="tag-item">全托管</div>
+                                    <div class="tag-item">飞防托管</div>
+                                    <div class="tag-item">营养托管</div>
+                                    <div class="tag-item active">优质客户</div>
+                                </div>
+                                <template #reference>
+                                    <div class="title-tag add-tag">标记为</div>
+                                </template>
+                            </el-popover>
+                        </template>
                         <template #footerData>
                             <div class="footer-data">
                                 <div class="footer-l">
@@ -114,7 +125,7 @@ const getUserList = async () => {
         // 地图使用筛选后的数据
         const wktArr = ["POINT (113.10930176274309 22.574540836684672)", "POINT (113.407189 23.032344)"]
         data.map((item, index) => {
-            item.point = wktArr[index]
+            item.point = wktArr[Math.floor(Math.random() * wktArr.length)]
         });
         indexMap.initData(data, 'name');
         // 清空现有的子项
@@ -291,6 +302,12 @@ const handleItemClick = (data) => {
         .list-item {
             margin-top: 10px;
         }
+
+        .add-tag {
+            font-size: 12px;
+            color: #2199f8;
+            line-height: 24px;
+        }
         
         .footer-data {
             display: flex;
@@ -351,4 +368,21 @@ const handleItemClick = (data) => {
         }
     }
 }
+
+
+.tag-list {
+    font-size: 14px;
+    .tag-item + .tag-item {
+        margin-top: 6px;
+    }
+    .tag-item {
+        padding: 2px 8px;
+        text-align: center;
+        &.active {
+            color: #2199f8;
+            background: rgba(33, 153, 248, 0.16);
+            border-radius: 4px;
+        }
+    }
+}
 </style>

src/views/old_mini/user/subPages/cropRecord.vue

@@ -0,0 +1,217 @@
+<template>
+    <div class="crop-record-page">
+        <custom-header name="作物档案"></custom-header>
+        <div class="farm-work-timeline">
+                                <div
+                                    class="farm-work-item"
+                                    v-for="(item, index) in farmWorkData"
+                                    :key="item.time"
+                                    :class="{ 'is-estimated': index === farmWorkData.length - 1 }"
+                                >
+                                    <div class="timeline-left">
+                                        <div class="timeline-dot"></div>
+                                        <div class="timeline-line"></div>
+                                    </div>
+                                    <div class="timeline-right">
+                                        <div class="farm-work-card" :class="['card-' + item.recordType, { 'is-future': item.isFuture }]">
+                                            <div class="type-box">{{ getRecordTypeText(item.recordType) }}</div>
+                                            <div class="farm-work-date">{{ item.time }}</div>
+                                            <div class="farm-work-desc">
+                                                <span class="farm-work-action">{{ item.action }}</span>
+                                                <span class="farm-work-content">{{ item.content }}</span>
+                                                <span>{{ item.text }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+    </div>
+</template>
+
+<script setup>
+import CustomHeader from '@/components/customHeader.vue';
+import { ref, onMounted } from 'vue';
+
+const cropRecordList = ref([]);
+
+onMounted(() => {
+    getFarmWorkList();
+});
+
+
+const farmWorkData = ref([]);
+const typeObj = {
+    1: '物候进程',
+    2: '农事',
+    3: '异常',
+}
+
+const getRecordTypeText = (recordType) => {
+    return typeObj[recordType];
+}
+const getFarmWorkList = () => {
+    // VE_API.user.getFarmWorkList(paramsPage.value).then(({ data }) => {
+    //     if (data && data.length > 0) {
+    //         farmWorkData.value = data[0] || {};
+    //     }
+    // });
+    farmWorkData.value = [
+        {
+            time: "8/8",
+            action: "进入",
+            content: "花芽分化期",
+            recordType: 1,
+        },
+        {
+            time: "8/1",
+            action: "做了",
+            content: "杀虫",
+            text: "农事",
+            recordType: 2,
+        },
+        {
+            time: "7/30",
+            action: "出现",
+            content: "蒂蛀虫",
+            recordType: 3,
+        },
+        {
+            time: "7/25",
+            action: "预计进入",
+            content: "果实膨大期",
+            isFuture: true,
+            recordType: 1,
+        },
+    ];
+};
+
+</script>
+
+<style lang="scss" scoped>
+.crop-record-page {
+    width: 100%;
+    min-height: 100vh;
+    background: #F5F7FB;
+
+    
+    .farm-work-timeline {
+        padding: 12px;
+        height: calc(100% - 40px);
+            .farm-work-item {
+                display: flex;
+                align-items: flex-start;
+                position: relative;
+                &:not(:last-child) {
+                    margin-bottom: 20px;
+                }
+                .timeline-left {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    margin-right: 12px;
+                    position: relative;
+                    .timeline-dot {
+                        width: 6px;
+                        height: 6px;
+                        border-radius: 50%;
+                        border: 1px solid #2199f8;
+                        flex-shrink: 0;
+                        z-index: 1;
+                    }
+                    .timeline-line {
+                        width: 1px;
+                        height: 48px;
+                        background: #e5e6eb;
+                        position: absolute;
+                        top: 8px;
+                    }
+                }
+                .timeline-right {
+                    flex: 1;
+                    .farm-work-card {
+                        border: 1px solid #8bccff;
+                        border-radius: 4px;
+                        background: #f8fcff;
+                        padding: 12px;
+                        display: flex;
+                        align-items: center;
+                        color: #1d2129;
+                        font-size: 14px;
+                        line-height: 22px;
+                        display: flex;
+                        align-items: center;
+                        &.card-1 {
+                            border: 1px solid #8BCCFF;
+                            .type-box {
+                                background: #2199F8;
+                            }
+                            .farm-work-content {
+                                color: #2199F8;
+                            }
+                        }
+                        &.card-2 {
+                            border: 1px solid #FFBB83;
+                            .type-box {
+                                background: #FF953D;
+                            }
+                            .farm-work-content {
+                                color: #FF953D;
+                            }
+                        }
+                        &.card-3 {
+                            border: 1px solid #FF9C9C;
+                            .type-box {
+                                background: #FD7676;
+                            }
+                            .farm-work-content {
+                                color: #FD7676;
+                            }
+                        }
+                        &.is-future {
+                            // opacity: 0.5;
+                            background: rgba(246, 250, 255, 0.5);
+                            .type-box {
+                                background: rgba(33, 153, 248, 0.5);
+                            }
+                            .farm-work-content {
+                                color: rgba(29, 33, 41, 0.5);
+                            }
+                        }
+                        .type-box {
+                            margin-right: 12px;
+                            padding: 0 5px;
+                            height: 20px;
+                            line-height: 20px;
+                            font-size: 12px;
+                            color: #fff;
+                            border-radius: 0 4px 0 4px;
+                        }
+                        .farm-work-date {
+                            padding-right: 4px;
+                        }
+                        .farm-work-desc {
+                            .farm-work-action {
+                                padding-right: 4px;
+                            }
+                            .farm-work-content {
+                                padding-right: 4px;
+                            }
+                        }
+                    }
+                }
+                &.is-estimated {
+                    .timeline-right {
+                        .farm-work-card {
+                            background: rgba(246, 250, 255, 0.5);
+                            border: 1px solid rgba(190, 218, 255, 0.5);
+                            .farm-work-date,
+                            .farm-work-desc {
+                                color: rgba(29, 33, 41, 0.5);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+}
+</style>