fix: 长势报告

src/components/weatherInfo.vue

@@ -24,7 +24,7 @@
                             <span class="current-name">农场列表</span>
                         </div>
 
-                        <div class="mask-wrap" v-if="props.showTabMask">
+                        <div class="mask-wrap" v-if="props.showTabMask" @click="emit('closeTabMask')">
                             <div class="mask-content">
                                 <div class="mask-text">
                                     查看全部农场列表，并可创建农场
@@ -142,7 +142,7 @@ const typeOptions = ref([{
 }]);
 
 // 定义emit事件
-const emit = defineEmits(['weatherExpanded', 'changeGarden', 'changeGardenTab']);
+const emit = defineEmits(['weatherExpanded', 'changeGarden', 'changeGardenTab', 'closeTabMask']);
 const router = useRouter();
 
 const isExpanded = ref(false);

src/views/old_mini/growth_report/index.vue

@@ -4,11 +4,11 @@
         <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
         <!-- 组件：天气 -->
         <div class="weather-info-wrap">
-            <weather-info ref="weatherInfoRef" from="growth_report" class="weather-info"
-                :showTabMask="showTabMask" @weatherExpanded="weatherExpanded" @changeGarden="changeGarden"
-                @changeGardenTab="changeGardenTab">
-                </weather-info>
-                
+            <weather-info ref="weatherInfoRef" from="growth_report" class="weather-info" :showTabMask="showTabMask"
+                @weatherExpanded="weatherExpanded" @changeGarden="changeGarden" @changeGardenTab="changeGardenTab"
+                @closeTabMask="closeTabMask">
+            </weather-info>
+
             <!-- 邀请关注 -->
             <div class="invite-follow" v-if="currentFarmName && activeGardenTab === 'current'">
                 <div class="invite-content">
@@ -20,12 +20,8 @@
 
         <!-- 农场列表 -->
         <div v-show="activeGardenTab === 'list'">
-            <garden-list
-                ref="gardenListRef"
-                :garden-id="selectedGardenId"
-                @loaded="handleGardenLoaded"
-                @selectGarden="handleGardenSelected"
-            />
+            <garden-list ref="gardenListRef" :garden-id="selectedGardenId" @loaded="handleGardenLoaded"
+                @selectGarden="handleGardenSelected" />
         </div>
 
         <div class="report-content-wrap" v-if="hasReport && activeGardenTab === 'current'" v-loading="loading"
@@ -37,109 +33,147 @@
                 <span class="risk-report-text">历史风险报告</span>
             </div> -->
 
-            <swipe ref="swipeRef" class="my-swipe" :loop="false" indicator-color="white" @change="handleSwipeChange">
-                <swipe-item v-for="(item, index) in regionsData" :key="index">
-                    <div class="report-content has-report" :style="{ minHeight: `calc(100vh - ${tabBarHeight}px)` }">
-                        <!-- <img src="@/assets/img/home/qrcode.png" alt="" class="code-icon" /> -->
-                        <img class="header-img" src="@/assets/img/home/report.png" alt="" />
-                        <div class="report-header">
-                            <!-- <img class="header-book" src="@/assets/img/home/book.png" alt="" /> -->
-                            <div class="time-tag">{{ workItems?.[0]?.reportDate }}</div>
-                            <div class="report-title">{{ regionsData[currentIndex]?.regionName }}长势报告</div>
-                            <div class="report-info">
-                                <div class="info-item">
-                                    <img class="info-icon" src="@/assets/img/home/farm.png" alt="" />
-                                    <span class="info-text">{{ currentFarmName }}</span>
-                                </div>
-                            </div>
+            <div class="report-content has-report" :style="{ minHeight: `calc(100vh - ${tabBarHeight}px)` }">
+                <!-- <img src="@/assets/img/home/qrcode.png" alt="" class="code-icon" /> -->
+                <img class="header-img" src="@/assets/img/home/report.png" alt="" />
 
-                            <!-- 左滑查看更多 -->
-                            <div class="swipe-more-tag" v-show="regionsData.length > 1 && currentIndex < regionsData.length - 1">
-                                <div>更多分区</div>
-                                左滑查看
-                            </div>
-                            <!-- 右滑查看更多 -->
-                            <div class="swipe-more-tag" v-show="regionsData.length > 1 && currentIndex === regionsData.length - 1">
-                                <div>更多分区</div>
-                                右滑查看
-                            </div>
+                <div class="report-header">
+                    <div class="type-tabs" v-if="regionsData.length > 1">
+                        <div
+                            @click="handleSwipeChange(index)"
+                            class="type-item"
+                            v-for="(item, index) in regionsData"
+                            :class="{ 'type-item-active': currentIndex === index }"
+                            :key="index">荔枝</div>
+                    </div>
+
+                    <div class="time-tag">{{ workItems?.[0]?.reportDate }}</div>
+                    <div class="report-title">{{ regionsData[currentIndex]?.regionName }}长势报告</div>
+                    <div class="report-info">
+                        <div class="info-item">
+                            <img class="info-icon" src="@/assets/img/home/farm.png" alt="" />
+                            <span class="info-text">{{ currentFarmName }}</span>
                         </div>
+                    </div>
+                </div>
 
-                        <div class="report-box">
-                            <div class="box-title warning">今日巡园重点</div>
-                            <div class="box-text w-100">
-                                <div class="row">
-                                    <div v-for="(card, cardI) in todayPatrolFocus" :key="cardI" class="status-card"
-                                        :class="'today-' + card.color" @click="handleTodayPatrolFocusClick(card)">
-                                        <!-- <badge class="status-badge" dot
+                <div class="report-box warning-bg">
+                    <div class="box-title warning">今日巡园重点</div>
+                    <div class="box-text w-100">
+                        <div class="row">
+                            <div v-for="(card, cardI) in todayPatrolFocus" :key="cardI" class="status-card"
+                                :class="'today-' + card.color" @click="handleTodayPatrolFocusClick(card)">
+                                <!-- <badge class="status-badge" dot
                                             :offset="[80, -10]">
                                         </badge> -->
-                                        <div class="status-title"
-                                            :class="{ 'status-title-small': (card.title || '').length > 6 }">
-                                            {{ card.title }}
-                                        </div>
-                                        <div class="status-sub">
-                                            {{ card.description }}
-                                        </div>
-                                    </div>
+                                <div class="status-title"
+                                    :class="{ 'status-title-small': (card.title || '').length > 6 }">
+                                    {{ card.title }}
+                                </div>
+                                <div class="status-sub">
+                                    {{ card.description }}
                                 </div>
                             </div>
                         </div>
+                    </div>
+                </div>
 
-                        <div class="report-box">
-                            <div class="box-title warning">待执行农事</div>
-                            <div class="box-text w-100">
-                                <div class="row">
-                                    <div v-for="(card, cardI) in pendingFarmWork" :key="cardI"
-                                        class="status-card pending-card"
-                                        :style="{ background: card.purposeColor, color: card.purposeColor === '#FFFFFF' ? '#000' : '#fff' }"
-                                        :class="card.type" @click="handlePendingFarmWorkClick(card)">
-                                        <!-- <badge class="status-badge" dot
+                <div class="report-box warning-bg">
+                    <div class="box-title warning">待执行农事</div>
+                    <div class="box-text w-100">
+                        <div class="row">
+                            <div v-for="(card, cardI) in pendingFarmWork" :key="cardI" class="status-card pending-card"
+                                :style="{ background: card.purposeColor, color: card.purposeColor === '#FFFFFF' ? '#000' : '#fff' }"
+                                :class="card.type" @click="handlePendingFarmWorkClick(card)">
+                                <!-- <badge class="status-badge" dot
                                             :offset="[80, -10]">
                                         </badge> -->
-                                        <div v-if="card.executionLimitDays || card.executionLimitDays === 0"
-                                            class="tag-name"
-                                            :style="{ borderColor: card.purposeColor, color: card.purposeColor }">限时 {{
-                                                card.executionLimitDays }} 天</div>
-                                        <div class="status-title"
-                                            :class="{ 'status-title-small': (card.name || '').length > 6 }">
-                                            {{ card.name }}
-                                        </div>
-                                        <div class="status-sub pending-sub"
-                                            :style="{ color: card.purposeColor === '#FFFFFF' ? '#000' : '#fff' }">
-                                            {{ card.purposeName }}
-                                        </div>
-                                    </div>
+                                <div v-if="card.executionLimitDays || card.executionLimitDays === 0" class="tag-name"
+                                    :style="{ borderColor: card.purposeColor, color: card.purposeColor }">限时 {{
+                                        card.executionLimitDays }} 天</div>
+                                <div class="status-title"
+                                    :class="{ 'status-title-small': (card.name || '').length > 6 }">
+                                    {{ card.name }}
+                                </div>
+                                <div class="status-sub pending-sub"
+                                    :style="{ color: card.purposeColor === '#FFFFFF' ? '#000' : '#fff' }">
+                                    {{ card.purposeName }}
                                 </div>
                             </div>
                         </div>
+                    </div>
+                </div>
 
-                        <div class="report-box" v-for="(work, workI) in workItems" :key="workI">
-                            <div class="box-title">{{ work?.title }}</div>
-                            <div class="box-text">
-                                <div class="box-bg" v-show="work?.backgroundDesc">
-                                    <span class="box-subtitle">背景描述：</span>
-                                    <div class="pre-text">{{ work?.backgroundDesc }}</div>
+                <div class="report-box">
+                    <div class="box-title">气象风险</div>
+                    <div class="box-text">
+                        <div class="box-bg">
+                            <div class="types-info">
+                                当前 <span class="text-bold">桂味</span> 处于为 梢期-新梢萌动<span class="text-link">（校准物候期）</span>，
+                                当前 <span class="text-bold">桂某某品种味</span> 处于为 梢期-新梢萌动<span class="text-link">（校准物候期）</span>，
+                                当前 <span class="text-bold">某某品种</span> 处于为 梢期-新梢萌动<span class="text-link">（校准物候期）</span>
+                            </div>
+                        </div>
+                        <div class="warning-part">
+                            <div class="warning-title">
+                                <div class="title-l">
+                                    <div class="title-line"></div>
+                                    <div class="title-block"></div>
                                 </div>
-                                <div class="box-advice" v-show="work?.suggestion">
-                                    <span class="box-subtitle">对策建议：</span>
-                                    <div class="pre-text">{{ work?.suggestion }}</div>
+                                <div>未来7-15天气象风险</div>
+                                <div class="title-l">
+                                    <div class="title-block"></div>
+                                    <div class="title-line title-line-right"></div>
                                 </div>
-                                <div class="box-sum pre-text" v-show="work?.summary">{{ work?.summary }}</div>
+                            </div>
+
+                            <div class="report-part" v-for="(part, partI) in 3" :key="partI">
+                                <div class="part-title">病虫风险</div>
+                                <div class="part-text">根据问题写一下需要注意的事项有哪些；简单描述农事该怎</div>
                             </div>
                         </div>
+                    </div>
+                </div>
 
-                        <!-- <div class="report-box">
-                            <div class="box-text next-info">
-                                <div class="box-bg">
-                                    <span class="box-subtitle">下一次农情互动预告：</span>
-                                    <div v-html="workItem?.nextInteractionPreview"></div>
+                <div class="report-box">
+                    <div class="box-title">农事建议</div>
+                    <div class="box-text">
+                        <div class="warning-part">
+                            <div class="report-part" v-for="(part, partI) in 3" :key="partI">
+                                <div class="part-top">
+                                    <div class="part-title">某某农事</div>
+                                    <div class="part-link">
+                                        <el-icon class="part-link-icon"><Link /></el-icon>
+                                        <div class="text-link">查看农事</div>
+                                    </div>
                                 </div>
+                                <div class="part-text">描述描述描述描述描述描述描述描述</div>
                             </div>
-                        </div> -->
+                        </div>
+                    </div>
+                </div>
+
+                <div class="report-box" v-for="(work, workI) in workItems" :key="workI">
+                    <div class="box-title">{{ work?.title }}</div>
+                    <div class="box-text">
+                        <div class="box-bg" v-show="work?.backgroundDesc">
+                            <span class="box-subtitle">背景描述：</span>
+                            <div class="pre-text">{{ work?.backgroundDesc }}</div>
+                        </div>
+                        <div class="box-advice" v-show="work?.suggestion">
+                            <span class="box-subtitle">对策建议：</span>
+                            <div class="pre-text">{{ work?.suggestion }}</div>
+                        </div>
+                        <div class="box-sum pre-text" v-show="work?.summary">{{ work?.summary }}</div>
                     </div>
+                </div>
+            </div>
+
+            <!-- <swipe ref="swipeRef" class="my-swipe" :loop="false" indicator-color="white" @change="handleSwipeChange">
+                <swipe-item v-for="(item, index) in regionsData" :key="index">
+                    
                 </swipe-item>
-            </swipe>
+            </swipe> -->
         </div>
 
         <div v-else-if="activeGardenTab === 'current'" class="fake-report-wrap report-content-wrap">
@@ -505,6 +539,7 @@ onUnmounted(() => {
     background-color: rgba(0, 0, 0, 0.52);
     z-index: 99999;
 }
+
 .achievement-report-page {
     width: 100%;
     height: 100vh;
@@ -531,12 +566,12 @@ onUnmounted(() => {
         .weather-info {
             width: 100%;
         }
-        
+
         .invite-follow {
             position: absolute;
             right: -6px;
             top: 50px;
-            
+
             .invite-content {
                 display: flex;
                 align-items: center;
@@ -551,6 +586,7 @@ onUnmounted(() => {
                 cursor: pointer;
                 background: #2199F8;
                 position: relative;
+
                 &::after {
                     content: '';
                     position: absolute;
@@ -719,7 +755,7 @@ onUnmounted(() => {
 
         background-size: 100% auto;
         background-position: top center;
-        padding: 0 16px 26px 16px;
+        padding: 0 10px 26px 10px;
         box-sizing: border-box;
         position: relative;
 
@@ -788,9 +824,36 @@ onUnmounted(() => {
             width: 100%;
         }
 
+        .type-tabs {
+            background: #fff;
+            height: 38px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            width: fit-content;
+            border-radius: 5px;
+            padding: 0 5px;
+            margin-bottom: 22px;
+            .type-item {
+                height: 28px;
+                line-height: 28px;
+                text-align: center;
+                padding: 0 6px;
+                min-width: 80px;
+                color: #858585;
+                background: #EEEEEE;
+                box-sizing: border-box;
+                border-radius: 2px;
+                &.type-item-active {
+                    background: #2199F8;
+                    color: #fff;
+                }
+            }
+        }
+
         .report-header {
             position: relative;
-            padding-top: 160px;
+            padding-top: 148px;
 
             &.no-farm {
                 padding-top: 102px;
@@ -814,7 +877,7 @@ onUnmounted(() => {
                 color: #fff;
                 padding: 0 9px;
                 width: fit-content;
-                margin-bottom: 2px;
+                margin-bottom: 4px;
             }
 
             .report-title {
@@ -837,9 +900,9 @@ onUnmounted(() => {
                     height: 33px;
                     align-items: center;
                     padding: 0 18px 0 6px;
-                    background: linear-gradient(90deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.0696) 100%);
+                    background: rgba(255, 255, 255, 0.58);
+                    backdrop-filter: blur(5px);
                     border-radius: 20px;
-                    border: 0.5px solid rgba(33, 153, 248, 0.35);
                     gap: 6px;
 
                     .info-icon {
@@ -885,12 +948,16 @@ onUnmounted(() => {
         .report-box {
             display: flex;
             align-items: center;
-            padding: 8px;
-            background: linear-gradient(0deg, #ffffff 86.32%, #2199f8 136.87%);
+            padding: 8px 12px;
+            // background: linear-gradient(0deg, #ffffff 86%, #2199f8 136%);
+            background: #fff;
             border: 1px solid #ffffff;
             border-radius: 8px;
             gap: 5px;
             position: relative;
+            &.warning-bg {
+                background: linear-gradient(0deg, #FFFFFF 86%, #FF9B48 136%);
+            }
 
             .report-box-item {
                 flex: 1;
@@ -942,6 +1009,8 @@ onUnmounted(() => {
                 padding: 22px 0 8px 0;
                 font-weight: 350;
                 line-height: 21px;
+                width: 100%;
+                box-sizing: border-box;
 
                 .pre-text {
                     white-space: pre-line;
@@ -955,6 +1024,88 @@ onUnmounted(() => {
                 .box-bg {
                     font-weight: 400;
                     color: rgba(0, 0, 0, 0.5);
+                    margin-bottom: 8px;
+                }
+
+                .types-info {
+                    background: rgba(33, 153, 248, 0.1);
+                    color: #000000;
+                    padding: 6px;
+                    border-radius: 5px;
+                    .text-bold {
+                        font-weight: bold;
+                    }
+                }
+                .text-link {
+                    color: #2199F8;
+                    text-decoration: underline;
+                }
+
+                .report-part {
+                    color: rgba(0, 0, 0, 0.5);
+                    .part-title {
+                        background: #2199F8;
+                        height: 24px;
+                        line-height: 24px;
+                        padding: 0 8px;
+                        color: #fff;
+                        border-radius: 2px;
+                        width: fit-content;
+                    }
+                    .part-text {
+                        padding-top: 6px;
+                    }
+                    .part-top {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        .part-link {
+                            display: inline-flex;
+                            align-items: center;
+                            gap: 4px;
+                            color: #2199F8;
+                            .part-link-icon {
+                                transform: rotate(270deg);
+                            }
+                        }
+                    }
+                }
+                .report-part + .report-part {
+                    margin-top: 8px;
+                }
+
+                .warning-part {
+                    background: rgba(178, 178, 178, 0.08);
+                    border-radius: 5px;
+                    padding: 11px 6px 6px;
+                    color: rgba(0, 0, 0, 0.5);
+                    width: 100%;
+                    box-sizing: border-box;
+                    .warning-title {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 10px;
+                        padding-bottom: 13px;
+                        .title-l {
+                            display: flex;
+                            align-items: center;
+                            .title-line {
+                                width: 76px;
+                                height: 1px;
+                                background: linear-gradient(90deg, rgba(118, 118, 118, 0) 0%, rgba(118, 118, 118, 0.4) 100%);
+                                &.title-line-right {
+                                    background: linear-gradient(270deg, rgba(118, 118, 118, 0) 0%, rgba(118, 118, 118, 0.4) 100%);
+                                }
+                            }
+                            .title-block {
+                                width: 6px;
+                                height: 6px;
+                                background: rgba(61, 61, 61, 0.2);
+                                transform: rotate(45deg);
+                            }
+                        }
+                    }
                 }
 
                 .box-advice {

src/views/old_mini/work_detail/index.vue

@@ -31,8 +31,8 @@
                 <!-- 农事组信息 -->
                 <div class="box-wrap group-info group-box" v-if="(detail?.executionLimitDays || detail?.executionLimitDays === 0) && detail?.flowStatus !== 5">
                     <div class="group-name">
-                        该农事为 <span class="light-text">标准防治溯源农事</span> ，请在<span v-if="detail?.flowStatus !== 3">触发后</span> <span class="light-text">{{detail?.executionLimitDays}}天内</span>
-                        完成溯源认证上传，如果逾期未认证，该农事将不可溯源认证，且不计入飞鸟有味平台
+                        该农事为 <span class="light-text">标准防治溯源农事</span> ，最佳执行时间为 <span class="light-text">{{detail?.executionLimitDays}}天</span>, 
+                        请及时完成溯源认证上传
                     </div>
                 </div>