|
|
@@ -17,7 +17,7 @@
|
|
|
<div class="archives-time-line-fixed">
|
|
|
<div class="trend-monitor-list">
|
|
|
<div class="trend-monitor-card" @click="handleTrendMonitorCardClick(item)"
|
|
|
- v-for="(item, index) in trendMonitorMockList" :key="index">
|
|
|
+ v-for="(item, index) in visibleTrendMonitorList" :key="index">
|
|
|
<div class="card-header">
|
|
|
<div class="header-left">
|
|
|
<span class="title">{{ item?.first_work?.work_name }}</span>
|
|
|
@@ -36,6 +36,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ v-if="trendMonitorMockList.length > 1"
|
|
|
+ class="trend-monitor-toggle"
|
|
|
+ @click.stop="trendMonitorExpanded = !trendMonitorExpanded"
|
|
|
+ >
|
|
|
+ {{ trendMonitorExpanded ? t('common.collapse') : t('common.expandMore') }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="farm-work-tabs">
|
|
|
<div
|
|
|
@@ -111,6 +118,11 @@ const farmWorkTabs = [
|
|
|
{ key: '1', labelKey: 'agriRecord.traceFarmWork' },
|
|
|
];
|
|
|
const trendMonitorMockList = ref([]);
|
|
|
+const trendMonitorExpanded = ref(false);
|
|
|
+const visibleTrendMonitorList = computed(() => {
|
|
|
+ if (trendMonitorExpanded.value) return trendMonitorMockList.value;
|
|
|
+ return trendMonitorMockList.value.slice(0, 1);
|
|
|
+});
|
|
|
|
|
|
const handleFarmWorkTabClick = (tab) => {
|
|
|
activeFarmWorkTab.value = tab;
|
|
|
@@ -129,6 +141,7 @@ const getFarmRiskAndTracking = async () => {
|
|
|
category_code: selectedFarmData.farm_category
|
|
|
});
|
|
|
trendMonitorMockList.value = [];
|
|
|
+ trendMonitorExpanded.value = false;
|
|
|
if (res.code === 200) {
|
|
|
currentPheCode.value = res.data?.current_phe_code;
|
|
|
const growth = res.data?.growth_abnormal_tracking;
|
|
|
@@ -345,6 +358,17 @@ const handleTrendMonitorCardClick = (item) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .trend-monitor-toggle {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #2199F8;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.archives-time-line {
|