|
|
@@ -1,46 +1,26 @@
|
|
|
<template>
|
|
|
<div class="timeline-container" ref="timelineContainerRef">
|
|
|
<div class="timeline-list" ref="timelineListRef">
|
|
|
- <empty
|
|
|
- v-if="isEmpty"
|
|
|
- image="https://birdseye-img.sysuimars.com/birdseye-look-mini/custom-empty-image.png"
|
|
|
- image-size="80"
|
|
|
- description="暂无数据"
|
|
|
- class="empty-state"
|
|
|
- />
|
|
|
+ <empty v-if="isEmpty" image="https://birdseye-img.sysuimars.com/birdseye-look-mini/custom-empty-image.png"
|
|
|
+ image-size="80" description="暂无数据" class="empty-state" />
|
|
|
<template v-else>
|
|
|
<div class="timeline-middle-line"></div>
|
|
|
- <div
|
|
|
- v-for="(t, tIdx) in phenologyStartDates"
|
|
|
- :key="`term-${uniqueTimestamp}-${tIdx}`"
|
|
|
- class="timeline-term"
|
|
|
- :style="getTermStyle(t, tIdx)"
|
|
|
- >
|
|
|
+ <div v-for="(t, tIdx) in phenologyStartDates" :key="`term-${uniqueTimestamp}-${tIdx}`"
|
|
|
+ class="timeline-term" :style="getTermStyle(t, tIdx)">
|
|
|
<span class="term-name">{{ formatDate(t.startDate) }}</span>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-for="(p, idx) in phenologyList"
|
|
|
- :key="`phenology-${uniqueTimestamp}-${idx}`"
|
|
|
- class="phenology-bar"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="phenology-title"
|
|
|
+ <div v-for="(p, idx) in phenologyList" :key="`phenology-${uniqueTimestamp}-${idx}`"
|
|
|
+ class="phenology-bar">
|
|
|
+ <div class="phenology-title"
|
|
|
:class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
|
|
|
- v-if="p.reproductiveList[0]?.phenologyName === getNextPhenologyName(idx, 0)"
|
|
|
- >
|
|
|
+ v-if="p.reproductiveList[0]?.phenologyName === getNextPhenologyName(idx, 0)">
|
|
|
{{ p.reproductiveList[0]?.phenologyName }}
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
|
|
|
- :key="`reproductive-${uniqueTimestamp}-${idx}-${rIdx}`"
|
|
|
- class="reproductive-item"
|
|
|
- >
|
|
|
+ <div v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
|
|
|
+ :key="`reproductive-${uniqueTimestamp}-${idx}-${rIdx}`" class="reproductive-item">
|
|
|
<div class="arranges">
|
|
|
- <div
|
|
|
- v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList) ? r.farmWorkArrangeList : []"
|
|
|
- :key="`arrange-${uniqueTimestamp}-${idx}-${rIdx}-${aIdx}`"
|
|
|
- class="arrange-card"
|
|
|
- :class="[
|
|
|
+ <div v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList) ? r.farmWorkArrangeList : []"
|
|
|
+ :key="`arrange-${uniqueTimestamp}-${idx}-${rIdx}-${aIdx}`" class="arrange-card" :class="[
|
|
|
getArrangeStatusClass(fw),
|
|
|
{
|
|
|
'last-card':
|
|
|
@@ -49,81 +29,75 @@
|
|
|
},
|
|
|
// 右侧农事卡片跟随物候期颜色：未来节气对应的农事卡片置灰
|
|
|
{ 'future-card': !shouldShowBlue(p) },
|
|
|
- ]"
|
|
|
- @click="handleRowClick(fw)"
|
|
|
- >
|
|
|
+ ]" @click="handleRowClick(fw)">
|
|
|
<div class="card-content">
|
|
|
- <div class="card-left" v-if="pageType === 'agri_plan'">
|
|
|
+ <div class="card-left" :style="{ width: fw.sourceDataJson && fw.sourceDataJson.resFilename ? 'calc(100% - 45px)' : '100%' }" v-if="pageType === 'agri_plan'">
|
|
|
<div class="left-info">
|
|
|
<div class="left-date">{{ formatDate(fw.createTime) }}</div>
|
|
|
- <div class="text van-ellipsis" v-if="fw?.sourceType === 6">
|
|
|
- 上传者：{{ fw.sourceDataJson.userName }}
|
|
|
+ <div class="text">
|
|
|
+ <span class="van-ellipsis">{{ shouldShowBlue(p) ? '物候进程' : fw.title }}</span>
|
|
|
+ <el-icon v-if="shouldShowBlue(p)"><ArrowRight /></el-icon>
|
|
|
</div>
|
|
|
<div class="text green van-ellipsis" v-if="fw?.sourceType === 7">
|
|
|
执行者：{{ fw.sourceDataJson.executorName }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="title-text van-ellipsis">{{ fw.title }}</div>
|
|
|
+ <div class="title-text van-ellipsis" v-if="shouldShowBlue(p)">{{ fw.title }}</div>
|
|
|
</div>
|
|
|
<div class="card-left agri-record-card" v-else>
|
|
|
<div class="left-info">
|
|
|
<div class="left-date">{{ formatDate(fw.createTime) }}</div>
|
|
|
- <div class="text van-ellipsis">
|
|
|
+ <div class="text van-ellipsis" @click="handleStatusDetail(fw)">
|
|
|
<span class="text-name">梢期杀虫</span>
|
|
|
- <span @click="handleStatusDetail(fw)" class="text-detail">详情</span>
|
|
|
+ <el-icon><ArrowRight /></el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="title-text van-ellipsis" v-show="shouldShowBlue(p)">
|
|
|
- <el-icon class="icon"><WarningFilled /></el-icon>
|
|
|
- <span>未执行</span>
|
|
|
+ <div class="title-wrap van-ellipsis" v-show="shouldShowBlue(p)">
|
|
|
+ <div class="title-text">未执行</div>
|
|
|
+ <div class="expert-info">
|
|
|
+ <el-avatar :size="14" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
|
|
|
+ <span>专家下发</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="card-right"
|
|
|
+ <div class="card-right"
|
|
|
v-if="fw.sourceDataJson && fw.sourceDataJson.resFilename && fw.sourceDataJson.resFilename.length > 0 || fw.sourceType === 7"
|
|
|
- @click.stop="handleImageClick(fw)"
|
|
|
- >
|
|
|
- <img v-if="fw.sourceType === 7" :src="base_img_url2 + fw.sourceDataJson?.executeImageUrls?.[0]" alt="" />
|
|
|
- <img v-else :src="base_img_url2 + fw.sourceDataJson?.resFilename?.[0]?.filename" alt="" />
|
|
|
+ @click.stop="handleImageClick(fw)">
|
|
|
+ <img v-if="fw.sourceType === 7"
|
|
|
+ :src="base_img_url2 + fw.sourceDataJson?.executeImageUrls?.[0]" alt="" />
|
|
|
+ <img v-else :src="base_img_url2 + fw.sourceDataJson?.resFilename?.[0]?.filename"
|
|
|
+ alt="" />
|
|
|
<div class="num" v-if="fw?.sourceDataJson?.imageIds || fw.sourceType === 7">
|
|
|
- {{ fw?.sourceDataJson?.imageIds?.length || fw?.sourceDataJson?.executeImageUrls?.length || 0 }}
|
|
|
+ {{ fw?.sourceDataJson?.imageIds?.length ||
|
|
|
+ fw?.sourceDataJson?.executeImageUrls?.length || 0 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<template v-if="r.name === r.phenologyName">
|
|
|
- <div
|
|
|
- class="phenology-name single"
|
|
|
+ <div class="phenology-name single"
|
|
|
:class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
|
|
|
- :style="r.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''"
|
|
|
- >
|
|
|
+ :style="r.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''">
|
|
|
{{ r.name }}
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<template v-if="r.phenologyName === getNextPhenologyName(idx, rIdx)">
|
|
|
- <div
|
|
|
- class="phenology-name"
|
|
|
- :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }"
|
|
|
- >
|
|
|
+ <div class="phenology-name"
|
|
|
+ :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }">
|
|
|
{{ r.name }}
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <div
|
|
|
- class="phenology-name"
|
|
|
- :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }"
|
|
|
- >
|
|
|
+ <div class="phenology-name"
|
|
|
+ :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }">
|
|
|
{{ r.name }}
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="phenology-name mr"
|
|
|
- :class="{
|
|
|
- 'phenology-red': !shouldShowBlue(p),
|
|
|
- 'phenology-blue': shouldShowBlue(p),
|
|
|
- }"
|
|
|
- >
|
|
|
+ <div class="phenology-name mr" :class="{
|
|
|
+ 'phenology-red': !shouldShowBlue(p),
|
|
|
+ 'phenology-blue': shouldShowBlue(p),
|
|
|
+ }">
|
|
|
{{ r.phenologyName }}
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -135,15 +109,8 @@
|
|
|
</div>
|
|
|
<!-- 图片弹窗 -->
|
|
|
<popup v-model:show="showImagePopup" class="image-popup" z-index="9999" teleport="body">
|
|
|
- <album-carousel
|
|
|
- class="popup-content"
|
|
|
- :key="imageList?.length"
|
|
|
- labelText=""
|
|
|
- :imgData="currentImageData"
|
|
|
- :images="imageList"
|
|
|
- :imgType="imgType"
|
|
|
- disableClick
|
|
|
- ></album-carousel>
|
|
|
+ <album-carousel class="popup-content" :key="imageList?.length" labelText="" :imgData="currentImageData"
|
|
|
+ :images="imageList" :imgType="imgType" disableClick></album-carousel>
|
|
|
</popup>
|
|
|
</template>
|
|
|
|
|
|
@@ -303,7 +270,7 @@ const batchValidatePesticideFertilizerQuotes = (ids, items) => {
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
- .catch(() => {});
|
|
|
+ .catch(() => { });
|
|
|
};
|
|
|
|
|
|
// 获取图片 URL 列表
|
|
|
@@ -334,7 +301,7 @@ const imageList = ref([]);
|
|
|
const currentImageData = ref({});
|
|
|
const handleImageClick = (fw) => {
|
|
|
console.log(fw, "fw");
|
|
|
- if(fw.sourceType !== 7) {
|
|
|
+ if (fw.sourceType !== 7) {
|
|
|
imgType.value = fw.sourceDataJson.resFilename?.[0]?.source || '';
|
|
|
imageList.value = fw.sourceDataJson.resFilename || [];
|
|
|
} else {
|
|
|
@@ -346,9 +313,9 @@ const handleImageClick = (fw) => {
|
|
|
executeName: fw.sourceDataJson.executorName,
|
|
|
executeDate: formatDate(fw.updateTime),
|
|
|
farmName: fw.sourceDataJson.farmName,
|
|
|
- prescriptionList:fw.sourceDataJson.pesticideFertilizerNames,
|
|
|
+ prescriptionList: fw.sourceDataJson.pesticideFertilizerNames,
|
|
|
farmWorkName: fw.sourceDataJson.farmWorkName,
|
|
|
- droneDate : formatDateToYYMMDD(fw.updateTime)
|
|
|
+ droneDate: formatDateToYYMMDD(fw.updateTime)
|
|
|
};
|
|
|
showImagePopup.value = true;
|
|
|
};
|
|
|
@@ -577,77 +544,77 @@ const getFarmWorkPlan = () => {
|
|
|
// 物候期数据
|
|
|
const processedPhenologyList = Array.isArray(data?.phenologyList)
|
|
|
? await Promise.all(
|
|
|
- data.phenologyList.map(async (it) => {
|
|
|
- const reproductiveList = Array.isArray(it.reproductiveList)
|
|
|
- ? await Promise.all(
|
|
|
- it.reproductiveList.map(async (r) => {
|
|
|
- const farmWorkArrangeList = Array.isArray(r.broadcastList)
|
|
|
- ? await Promise.all(
|
|
|
- r.broadcastList.map(async (fw) => {
|
|
|
- let sourceDataJson =
|
|
|
- fw.sourceData && JSON.parse(fw.sourceData);
|
|
|
- // 如果有 imageIds，获取图片 URL
|
|
|
- if (
|
|
|
- sourceDataJson &&
|
|
|
- sourceDataJson.imageIds &&
|
|
|
- Array.isArray(sourceDataJson.imageIds) &&
|
|
|
- sourceDataJson.imageIds.length > 0
|
|
|
- ) {
|
|
|
- const resFilenameList = await fetchImageUrls(
|
|
|
- {
|
|
|
- imageIds: sourceDataJson.imageIds,
|
|
|
- page: 1,
|
|
|
- limit: 100,
|
|
|
- }
|
|
|
- );
|
|
|
- sourceDataJson.resFilename = resFilenameList;
|
|
|
- // 调用 findSuitabilityByPoint 接口获取天气适宜性信息
|
|
|
- if (fw.farmId && fw.createTime) {
|
|
|
- try {
|
|
|
- const dateStr = formatDateForAPI(fw.createTime);
|
|
|
- if (dateStr) {
|
|
|
- const suitabilityRes = await VE_API.ali.findSuitabilityByPoint({
|
|
|
- farmId: fw.farmId,
|
|
|
- date: dateStr,
|
|
|
- });
|
|
|
- if (suitabilityRes && suitabilityRes.code === 0 && suitabilityRes.data) {
|
|
|
- // 将返回的数据合并到 sourceDataJson
|
|
|
- sourceDataJson.suitability = suitabilityRes.data;
|
|
|
- }
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error("获取天气适宜性信息失败:", error);
|
|
|
- }
|
|
|
- }
|
|
|
+ data.phenologyList.map(async (it) => {
|
|
|
+ const reproductiveList = Array.isArray(it.reproductiveList)
|
|
|
+ ? await Promise.all(
|
|
|
+ it.reproductiveList.map(async (r) => {
|
|
|
+ const farmWorkArrangeList = Array.isArray(r.broadcastList)
|
|
|
+ ? await Promise.all(
|
|
|
+ r.broadcastList.map(async (fw) => {
|
|
|
+ let sourceDataJson =
|
|
|
+ fw.sourceData && JSON.parse(fw.sourceData);
|
|
|
+ // 如果有 imageIds，获取图片 URL
|
|
|
+ if (
|
|
|
+ sourceDataJson &&
|
|
|
+ sourceDataJson.imageIds &&
|
|
|
+ Array.isArray(sourceDataJson.imageIds) &&
|
|
|
+ sourceDataJson.imageIds.length > 0
|
|
|
+ ) {
|
|
|
+ const resFilenameList = await fetchImageUrls(
|
|
|
+ {
|
|
|
+ imageIds: sourceDataJson.imageIds,
|
|
|
+ page: 1,
|
|
|
+ limit: 100,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ sourceDataJson.resFilename = resFilenameList;
|
|
|
+ // 调用 findSuitabilityByPoint 接口获取天气适宜性信息
|
|
|
+ if (fw.farmId && fw.createTime) {
|
|
|
+ try {
|
|
|
+ const dateStr = formatDateForAPI(fw.createTime);
|
|
|
+ if (dateStr) {
|
|
|
+ const suitabilityRes = await VE_API.ali.findSuitabilityByPoint({
|
|
|
+ farmId: fw.farmId,
|
|
|
+ date: dateStr,
|
|
|
+ });
|
|
|
+ if (suitabilityRes && suitabilityRes.code === 0 && suitabilityRes.data) {
|
|
|
+ // 将返回的数据合并到 sourceDataJson
|
|
|
+ sourceDataJson.suitability = suitabilityRes.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("获取天气适宜性信息失败:", error);
|
|
|
}
|
|
|
- return {
|
|
|
- ...fw,
|
|
|
- phenologyName: r.phenologyName,
|
|
|
- sourceDataJson,
|
|
|
- containerSpaceTimeId: it.containerSpaceTimeId,
|
|
|
- };
|
|
|
- })
|
|
|
- )
|
|
|
- : [];
|
|
|
- return {
|
|
|
- ...r,
|
|
|
- farmWorkArrangeList,
|
|
|
- };
|
|
|
- })
|
|
|
- )
|
|
|
- : [];
|
|
|
- return {
|
|
|
- id: it.id ?? it.phenologyId ?? it.name ?? `${it.progress}-${it.progress2}`,
|
|
|
- progress: Number(it.progress) || 0, // 起点 %
|
|
|
- progress2: Number(it.progress2) || 0, // 终点 %
|
|
|
- startDate: it.startDate,
|
|
|
- startTimeMs: safeParseDate(
|
|
|
- it.startDate || it.beginDate || it.startTime || it.start || it.start_at
|
|
|
- ),
|
|
|
- reproductiveList,
|
|
|
- };
|
|
|
- })
|
|
|
- )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...fw,
|
|
|
+ phenologyName: r.phenologyName,
|
|
|
+ sourceDataJson,
|
|
|
+ containerSpaceTimeId: it.containerSpaceTimeId,
|
|
|
+ };
|
|
|
+ })
|
|
|
+ )
|
|
|
+ : [];
|
|
|
+ return {
|
|
|
+ ...r,
|
|
|
+ farmWorkArrangeList,
|
|
|
+ };
|
|
|
+ })
|
|
|
+ )
|
|
|
+ : [];
|
|
|
+ return {
|
|
|
+ id: it.id ?? it.phenologyId ?? it.name ?? `${it.progress}-${it.progress2}`,
|
|
|
+ progress: Number(it.progress) || 0, // 起点 %
|
|
|
+ progress2: Number(it.progress2) || 0, // 终点 %
|
|
|
+ startDate: it.startDate,
|
|
|
+ startTimeMs: safeParseDate(
|
|
|
+ it.startDate || it.beginDate || it.startTime || it.start || it.start_at
|
|
|
+ ),
|
|
|
+ reproductiveList,
|
|
|
+ };
|
|
|
+ })
|
|
|
+ )
|
|
|
: [];
|
|
|
phenologyList.value = processedPhenologyList;
|
|
|
// 使用多次 nextTick 和 requestAnimationFrame 确保DOM完全渲染
|
|
|
@@ -980,23 +947,28 @@ watch(
|
|
|
overflow: auto;
|
|
|
position: relative;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
.timeline-list {
|
|
|
position: relative;
|
|
|
}
|
|
|
+
|
|
|
.timeline-middle-line {
|
|
|
position: absolute;
|
|
|
- left: 13px; /* 位于节气文字列中间（列宽约30px） */
|
|
|
+ left: 13px;
|
|
|
+ /* 位于节气文字列中间（列宽约30px） */
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
width: 2px;
|
|
|
background: #e8e8e8;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
+
|
|
|
.phenology-bar {
|
|
|
align-items: stretch;
|
|
|
justify-content: center;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
+
|
|
|
.phenology-title {
|
|
|
width: 18px;
|
|
|
height: 98.5%;
|
|
|
@@ -1008,14 +980,17 @@ watch(
|
|
|
text-align: center;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
&.phenology-blue {
|
|
|
background: #2199f8;
|
|
|
}
|
|
|
+
|
|
|
&.phenology-red {
|
|
|
background: #f1f1f1;
|
|
|
color: #808080;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.reproductive-item {
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
@@ -1027,6 +1002,7 @@ watch(
|
|
|
line-height: 23px;
|
|
|
color: inherit;
|
|
|
position: relative;
|
|
|
+
|
|
|
.phenology-name {
|
|
|
width: 18px;
|
|
|
line-height: 16px;
|
|
|
@@ -1035,20 +1011,25 @@ watch(
|
|
|
padding: 4px 0;
|
|
|
font-size: 12px;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
&.mr {
|
|
|
margin-right: 3px;
|
|
|
}
|
|
|
+
|
|
|
&.single {
|
|
|
width: 39px;
|
|
|
line-height: 39px;
|
|
|
}
|
|
|
+
|
|
|
&.phenology-blue {
|
|
|
background: #2199f8;
|
|
|
}
|
|
|
+
|
|
|
&.phenology-red {
|
|
|
background: #f1f1f1;
|
|
|
color: #808080;
|
|
|
}
|
|
|
+
|
|
|
&.text-blue {
|
|
|
background: rgba(33, 153, 248, 0.15);
|
|
|
color: #2199f8;
|
|
|
@@ -1056,6 +1037,7 @@ watch(
|
|
|
line-height: 16px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
&.text-red {
|
|
|
background: rgba(128, 128, 128, 0.15);
|
|
|
color: #808080;
|
|
|
@@ -1064,12 +1046,14 @@ watch(
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.arranges {
|
|
|
display: flex;
|
|
|
max-width: calc(100vw - 118px);
|
|
|
min-width: calc(100vw - 118px);
|
|
|
gap: 5px;
|
|
|
letter-spacing: 0px;
|
|
|
+
|
|
|
// min-height: 90px;
|
|
|
.arrange-card {
|
|
|
width: 95%;
|
|
|
@@ -1081,6 +1065,7 @@ watch(
|
|
|
padding: 8px 15px 8px 10px;
|
|
|
writing-mode: horizontal-tb;
|
|
|
margin-bottom: 10px;
|
|
|
+
|
|
|
// &.last-card {
|
|
|
// margin-bottom: 0;
|
|
|
// }
|
|
|
@@ -1090,65 +1075,70 @@ watch(
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
+
|
|
|
.card-left {
|
|
|
width: calc(100% - 45px);
|
|
|
+
|
|
|
.left-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 5px;
|
|
|
+ gap: 6px;
|
|
|
+
|
|
|
.left-date {
|
|
|
- color: #fff;
|
|
|
- background: #2199f8;
|
|
|
+ color: #2199f8;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
padding: 1px 5px;
|
|
|
border-radius: 2px;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+
|
|
|
.text {
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(33, 153, 248, 0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 2px;
|
|
|
width: calc(100% - 50px);
|
|
|
- text-align: left;
|
|
|
- &.green {
|
|
|
- color: rgba(82, 192, 60, 0.5);
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.title-text {
|
|
|
- margin-top: 2px;
|
|
|
- width: 99%;
|
|
|
+ margin-top: 5px;
|
|
|
+ width: fit-content;
|
|
|
text-align: left;
|
|
|
+ color: #2199F8;
|
|
|
+ padding: 0 6px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
}
|
|
|
+
|
|
|
&.agri-record-card {
|
|
|
- .text{
|
|
|
- font-size: 14px;
|
|
|
- .text-name{
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- .text-detail{
|
|
|
- color: rgba(0, 0, 0, 0.2);
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .title-text{
|
|
|
+ .title-wrap{
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 3px;
|
|
|
- .icon{
|
|
|
- font-size: 16px;
|
|
|
+ align-items: flex-end;
|
|
|
+ gap: 6px;
|
|
|
+ .expert-info{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #B7B7B7;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.card-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
+
|
|
|
img {
|
|
|
width: 45px;
|
|
|
height: 45px;
|
|
|
border-radius: 4px;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
+
|
|
|
.num {
|
|
|
position: absolute;
|
|
|
width: 18px;
|
|
|
@@ -1166,6 +1156,7 @@ watch(
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
@@ -1179,20 +1170,26 @@ watch(
|
|
|
border-right: 5px solid #2199f8;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.arrange-card.normal-style {
|
|
|
opacity: 0.3;
|
|
|
}
|
|
|
+
|
|
|
.arrange-card.future-card .card-content {
|
|
|
color: #808080;
|
|
|
}
|
|
|
+
|
|
|
.arrange-card.status-normal {
|
|
|
border-color: #2199f8;
|
|
|
+
|
|
|
&::before {
|
|
|
border-right-color: #2199f8;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.arrange-card.status-warning {
|
|
|
border-color: #f67d7d;
|
|
|
+
|
|
|
.card-left {
|
|
|
.left-info {
|
|
|
.left-date {
|
|
|
@@ -1200,17 +1197,21 @@ watch(
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.card-right {
|
|
|
.num {
|
|
|
background: #f67d7d;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&::before {
|
|
|
border-right-color: #f67d7d;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.arrange-card.status-complete {
|
|
|
border-color: #52c03c;
|
|
|
+
|
|
|
.card-left {
|
|
|
.left-info {
|
|
|
.left-date {
|
|
|
@@ -1218,25 +1219,32 @@ watch(
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.card-right {
|
|
|
.num {
|
|
|
background: #52c03c;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&::before {
|
|
|
border-right-color: #52c03c;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 未来节气对应的农事卡片：跟随左侧物候期的“未开始”灰色样式
|
|
|
.arrange-card.future-card {
|
|
|
border-color: #e4e4e4;
|
|
|
+
|
|
|
.card-left {
|
|
|
.left-info {
|
|
|
.left-date {
|
|
|
+ color: #fff;
|
|
|
background: #e4e4e4;
|
|
|
+ border-color: #e4e4e4;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&::before {
|
|
|
border-right-color: #e4e4e4;
|
|
|
}
|
|
|
@@ -1244,20 +1252,25 @@ watch(
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .reproductive-item + .reproductive-item {
|
|
|
+
|
|
|
+ .reproductive-item+.reproductive-item {
|
|
|
padding-top: 3px;
|
|
|
}
|
|
|
- .phenology-bar + .phenology-bar {
|
|
|
+
|
|
|
+ .phenology-bar+.phenology-bar {
|
|
|
padding-top: 3px;
|
|
|
}
|
|
|
+
|
|
|
.timeline-term {
|
|
|
position: absolute;
|
|
|
width: 32px;
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
flex-direction: column;
|
|
|
- z-index: 2; /* 置于中线之上 */
|
|
|
+ z-index: 2;
|
|
|
+ /* 置于中线之上 */
|
|
|
color: rgba(174, 174, 174, 0.6);
|
|
|
+
|
|
|
.term-name {
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
@@ -1267,6 +1280,7 @@ watch(
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.empty-state {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -1281,6 +1295,7 @@ watch(
|
|
|
.image-popup {
|
|
|
width: 327px;
|
|
|
border-radius: 8px;
|
|
|
+
|
|
|
.popup-content {
|
|
|
width: 100%;
|
|
|
}
|
