|
|
@@ -8,7 +8,11 @@
|
|
|
</el-select>
|
|
|
<tab-list type="light" v-model="active" :tabs="tabs" @change="handleTabChange" />
|
|
|
</div>
|
|
|
- <div class="timeline-container" ref="timelineContainerRef" :class="{ 'timeline-container-plant': pageType === 'plant' }">
|
|
|
+ <div
|
|
|
+ class="timeline-container"
|
|
|
+ ref="timelineContainerRef"
|
|
|
+ :class="{ 'timeline-container-plant': pageType === 'plant' }"
|
|
|
+ >
|
|
|
<div class="timeline-list" :style="getListStyle">
|
|
|
<div class="timeline-middle-line"></div>
|
|
|
<!-- 物候期覆盖条（progress 为起点，progress2 为终点，单位 %） -->
|
|
|
@@ -52,7 +56,7 @@
|
|
|
<div class="header-right">托管农事</div>
|
|
|
</div>
|
|
|
<div class="card-content">
|
|
|
- <span>温馨提示：在某某物候期之后，请密切关注荔枝，关注蒂蛀虫的出现！</span>
|
|
|
+ <span>{{ fw.warmReminder || "暂无提示" }}</span>
|
|
|
<span class="edit-link" @click.stop="handleEdit(fw)">点击编辑</span>
|
|
|
</div>
|
|
|
<div
|
|
|
@@ -85,8 +89,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="custom-bottom-fixed-btns" :class="{ 'center': pageType !== 'plant' }">
|
|
|
- <div class="bottom-btn secondary-btn" v-if="pageType === 'plant'">{{ active === 1 ? '复制为新方案' : '编辑方案' }}</div>
|
|
|
+ <div class="custom-bottom-fixed-btns">
|
|
|
+ <div class="bottom-btn-group">
|
|
|
+ <div class="bottom-btn secondary-btn" @click="handlePhenologySetting">物候期设置</div>
|
|
|
+ <div class="bottom-btn secondary-btn" v-if="pageType === 'plant'" @click="openCopyPlanPopup">
|
|
|
+ {{ active === 1 ? "复制方案" : "方案设置" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="bottom-btn primary-btn" @click="addNewTask">新增农事</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -98,10 +107,56 @@
|
|
|
@handleSaveSuccess="getFarmWorkPlan"
|
|
|
@handleDeleteInteract="handleDeleteInteract"
|
|
|
></interact-popup>
|
|
|
+ <!-- 复制方案弹窗 -->
|
|
|
+ <Popup v-model:show="showCopyPlan" class="copy-plan-popup" round closeable :close-on-click-overlay="false">
|
|
|
+ <div class="copy-plan-content">
|
|
|
+ <div class="label">{{ active === 1 ? "复制为" : "方案名称" }}</div>
|
|
|
+ <el-input v-model="copyPlanName" size="large" placeholder="请输入方案名称" class="copy-plan-input" />
|
|
|
+ </div>
|
|
|
+ <div class="copy-plan-footer">
|
|
|
+ <div class="btn btn-cancel" @click="handleCancelCopyPlan">{{ active === 1 ? "取消复制" : "删除方案" }}</div>
|
|
|
+ <div class="btn btn-confirm" @click="handleConfirmCopyPlan">
|
|
|
+ {{ active === 1 ? "确定复制" : "确定设置" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Popup>
|
|
|
+ <!-- 物候期设置弹窗 -->
|
|
|
+ <Popup
|
|
|
+ v-model:show="showPhenologySetting"
|
|
|
+ class="copy-plan-popup phenology-popup"
|
|
|
+ round
|
|
|
+ closeable
|
|
|
+ :close-on-click-overlay="false"
|
|
|
+ >
|
|
|
+ <div class="phenology-header">物候期时间设置</div>
|
|
|
+ <div class="phenology-list">
|
|
|
+ <div
|
|
|
+ class="phenology-item"
|
|
|
+ v-for="(item, index) in mergedReproductiveList"
|
|
|
+ :key="item.id || index"
|
|
|
+ >
|
|
|
+ <div class="item-label">
|
|
|
+ <span class="label-text">{{ item.name }}</span>
|
|
|
+ <span>起始时间</span>
|
|
|
+ </div>
|
|
|
+ <div class="item-value">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 100%"
|
|
|
+ size="large"
|
|
|
+ v-model="item.startDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="phenology-footer">确认设置</div>
|
|
|
+ </Popup>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, onMounted, computed, nextTick } from "vue";
|
|
|
+import { Popup } from "vant";
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
import tabList from "@/components/pageComponents/TabList.vue";
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
@@ -167,6 +222,44 @@ onMounted(() => {
|
|
|
getFarmWorkPlan();
|
|
|
});
|
|
|
|
|
|
+const mergedReproductiveList = ref([])
|
|
|
+const getPhenologyList = async (containerSpaceTimeId) => {
|
|
|
+ const res = await VE_API.monitor.listPhenology({ containerSpaceTimeId ,farmId: route.query.farmId });
|
|
|
+ if (res.code === 0) {
|
|
|
+ mergedReproductiveList.value = res.data || [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 复制方案弹窗相关
|
|
|
+const showCopyPlan = ref(false);
|
|
|
+const showPhenologySetting = ref(false);
|
|
|
+const copyPlanName = ref("");
|
|
|
+const openCopyPlanPopup = () => {
|
|
|
+ copyPlanName.value = "";
|
|
|
+ showCopyPlan.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 物候期设置弹窗
|
|
|
+const handlePhenologySetting = () => {
|
|
|
+ showPhenologySetting.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 取消复制方案
|
|
|
+const handleCancelCopyPlan = () => {
|
|
|
+ showCopyPlan.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+// 确定复制方案
|
|
|
+const handleConfirmCopyPlan = () => {
|
|
|
+ if (!copyPlanName.value.trim()) {
|
|
|
+ ElMessage.warning("请输入方案名称");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // TODO: 在此处调用复制方案的接口
|
|
|
+ ElMessage.success("复制成功");
|
|
|
+ showCopyPlan.value = false;
|
|
|
+};
|
|
|
+
|
|
|
const getFarmWorkPlan = () => {
|
|
|
// 如果不是首次加载，保存当前滚动位置
|
|
|
let savedScrollTop = 0;
|
|
|
@@ -179,6 +272,7 @@ const getFarmWorkPlan = () => {
|
|
|
.then(({ data, code }) => {
|
|
|
if (code === 0) {
|
|
|
const list = Array.isArray(data?.solarTermsList) ? data.solarTermsList : [];
|
|
|
+ getPhenologyList(data.phenologyList[0]?.containerSpaceTimeId)
|
|
|
const filtered = list
|
|
|
.filter((t) => t && t.type === 1)
|
|
|
.map((t) => ({
|
|
|
@@ -194,16 +288,33 @@ const getFarmWorkPlan = () => {
|
|
|
solarTerms.value = filtered;
|
|
|
// 物候期数据
|
|
|
phenologyList.value = Array.isArray(data?.phenologyList)
|
|
|
- ? data.phenologyList.map((it) => ({
|
|
|
- id: it.id ?? it.phenologyId ?? it.name ?? `${it.progress}-${it.progress2}`,
|
|
|
- progress: Number(it.progress) || 0, // 起点 %
|
|
|
- progress2: Number(it.progress2) || 0, // 终点 %
|
|
|
- // 兼容多种可能的开始时间字段
|
|
|
- startTimeMs: safeParseDate(
|
|
|
- it.startDate || it.beginDate || it.startTime || it.start || it.start_at
|
|
|
- ),
|
|
|
- reproductiveList: Array.isArray(it.reproductiveList) ? it.reproductiveList : [],
|
|
|
- }))
|
|
|
+ ? data.phenologyList.map((it) => {
|
|
|
+ const reproductiveList = Array.isArray(it.reproductiveList)
|
|
|
+ ? it.reproductiveList.map((r) => {
|
|
|
+ const farmWorkArrangeList = Array.isArray(r.farmWorkArrangeList)
|
|
|
+ ? r.farmWorkArrangeList.map((fw) => ({
|
|
|
+ ...fw,
|
|
|
+ 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, // 终点 %
|
|
|
+ // 兼容多种可能的开始时间字段
|
|
|
+ startTimeMs: safeParseDate(
|
|
|
+ it.startDate || it.beginDate || it.startTime || it.start || it.start_at
|
|
|
+ ),
|
|
|
+ reproductiveList,
|
|
|
+ };
|
|
|
+ })
|
|
|
: [];
|
|
|
|
|
|
// 等待 DOM 更新后处理滚动
|
|
|
@@ -246,21 +357,16 @@ const handleRowClick = (item) => {
|
|
|
curFarmObj.value = item;
|
|
|
router.push({
|
|
|
path: "/modify",
|
|
|
- query: { id: 277983 },
|
|
|
+ query: { id: 277983,farmWorkId: item.farmWorkId },
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const interactPopupRef = ref(null);
|
|
|
|
|
|
const handleEdit = (item) => {
|
|
|
+ console.log(item);
|
|
|
if (interactPopupRef.value) {
|
|
|
- interactPopupRef.value.showPopup({
|
|
|
- arrangeIdVal: item.id,
|
|
|
- interactTitleVal: item.farmWorkName || "梢期杀虫", // 使用农事名称作为标题
|
|
|
- interactTimeVal: item.interactTime || "", // 如果有已保存的互动时间
|
|
|
- forceTriggerTimeVal: item.forceTriggerTime || "", // 如果有已保存的强制触发时间
|
|
|
- interactQuestionVal: item.interactQuestion, // 如果有已保存的互动问题
|
|
|
- });
|
|
|
+ interactPopupRef.value.showPopup(item);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -306,7 +412,7 @@ const getListStyle = computed(() => {
|
|
|
const minP = minProgress.value;
|
|
|
const maxP = maxProgress.value;
|
|
|
const range = Math.max(1, maxP - minP); // 避免除0
|
|
|
- const total = (solarTerms.value?.length || 0) * 450;
|
|
|
+ const total = (solarTerms.value?.length || 0) * 420;
|
|
|
const minH = total; // 无上下留白
|
|
|
return { minHeight: `${minH}px` };
|
|
|
});
|
|
|
@@ -316,7 +422,7 @@ const getTermStyle = (t) => {
|
|
|
const minP = minProgress.value;
|
|
|
const maxP = maxProgress.value;
|
|
|
const range = Math.max(1, maxP - minP); // 避免除0
|
|
|
- const total = (solarTerms.value?.length || 0) * 450;
|
|
|
+ const total = (solarTerms.value?.length || 0) * 420;
|
|
|
// 将progress映射到0开始的位置，最小progress对应top: 0
|
|
|
const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
|
|
|
const top = (normalizedP / 100) * total;
|
|
|
@@ -347,7 +453,7 @@ const handleSeasonClick = (seasonValue) => {
|
|
|
const minP = minProgress.value;
|
|
|
const maxP = maxProgress.value;
|
|
|
const range = Math.max(1, maxP - minP);
|
|
|
- const total = (solarTerms.value?.length || 0) * 450;
|
|
|
+ const total = (solarTerms.value?.length || 0) * 420;
|
|
|
const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
|
|
|
const targetTop = (normalizedP / 100) * total; // 内容内的像素位置
|
|
|
const wrap = timelineContainerRef.value;
|
|
|
@@ -369,7 +475,7 @@ const getPhenologyBarStyle = (item) => {
|
|
|
const minP = minProgress.value;
|
|
|
const maxP = maxProgress.value;
|
|
|
const range = Math.max(1, maxP - minP);
|
|
|
- const total = (solarTerms.value?.length || 0) * 450; // 有效绘制区高度（px）
|
|
|
+ const total = (solarTerms.value?.length || 0) * 420; // 有效绘制区高度（px）
|
|
|
// 将progress映射到0开始的位置
|
|
|
const normalizedStart = range > 0 ? ((start - minP) / range) * 100 : 0;
|
|
|
const normalizedEnd = range > 0 ? ((end - minP) / range) * 100 : 0;
|
|
|
@@ -435,7 +541,7 @@ const getPhenologyBarHeight = (item) => {
|
|
|
const minP = minProgress.value;
|
|
|
const maxP = maxProgress.value;
|
|
|
const range = Math.max(1, maxP - minP);
|
|
|
- const total = (solarTerms.value?.length || 0) * 450;
|
|
|
+ const total = (solarTerms.value?.length || 0) * 420;
|
|
|
// 将progress映射到0开始的位置
|
|
|
const normalizedStart = range > 0 ? ((start - minP) / range) * 100 : 0;
|
|
|
const normalizedEnd = range > 0 ? ((end - minP) / range) * 100 : 0;
|
|
|
@@ -466,7 +572,7 @@ const getReproductiveItemHeight = (phenologyItem) => {
|
|
|
gap: 12px;
|
|
|
margin-bottom: 10px;
|
|
|
margin-left: 12px;
|
|
|
- .select-item{
|
|
|
+ .select-item {
|
|
|
width: 82px;
|
|
|
::v-deep {
|
|
|
.el-select__wrapper {
|
|
|
@@ -477,14 +583,14 @@ const getReproductiveItemHeight = (phenologyItem) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.timeline-container {
|
|
|
height: calc(100vh - 40px - 73px);
|
|
|
overflow: auto;
|
|
|
position: relative;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 12px;
|
|
|
- &.timeline-container-plant{
|
|
|
+ &.timeline-container-plant {
|
|
|
height: calc(100vh - 40px - 73px - 38px);
|
|
|
}
|
|
|
.timeline-list {
|
|
|
@@ -538,7 +644,7 @@ const getReproductiveItemHeight = (phenologyItem) => {
|
|
|
}
|
|
|
.arranges {
|
|
|
position: absolute;
|
|
|
- left: 48px; /* 列与中线右侧一段距离 */
|
|
|
+ left: 40px; /* 列与中线右侧一段距离 */
|
|
|
top: 0;
|
|
|
z-index: 3;
|
|
|
display: flex;
|
|
|
@@ -546,7 +652,7 @@ const getReproductiveItemHeight = (phenologyItem) => {
|
|
|
gap: 12px;
|
|
|
letter-spacing: 0px;
|
|
|
.arrange-card {
|
|
|
- width: 94%;
|
|
|
+ width: 97%;
|
|
|
border: 0.5px solid #2199f8;
|
|
|
border-radius: 8px;
|
|
|
background: #fff;
|
|
|
@@ -590,6 +696,7 @@ const getReproductiveItemHeight = (phenologyItem) => {
|
|
|
margin: 4px 0 2px 0;
|
|
|
.edit-link {
|
|
|
color: #2199f8;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
}
|
|
|
.status-icon {
|
|
|
@@ -663,16 +770,101 @@ const getReproductiveItemHeight = (phenologyItem) => {
|
|
|
}
|
|
|
// 控制区域样式
|
|
|
.custom-bottom-fixed-btns {
|
|
|
- .bottom-btn {
|
|
|
- width: 124px;
|
|
|
+ .bottom-btn-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.copy-plan-popup {
|
|
|
+ width: 100%;
|
|
|
+ padding: 50px 12px 20px 12px;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 136px;
|
|
|
+ background: url("@/assets/img/monitor/popup-header-bg.png") no-repeat center center / 100% 100%;
|
|
|
+ }
|
|
|
+ .copy-plan-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ .label {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .copy-plan-input {
|
|
|
+ width: calc(100% - 80px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .copy-plan-footer {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 20px;
|
|
|
+ .btn {
|
|
|
+ flex: 1;
|
|
|
+ color: #666666;
|
|
|
+ border: 1px solid #999999;
|
|
|
+ border-radius: 25px;
|
|
|
padding: 10px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ &.btn-confirm {
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ background: #2199f8;
|
|
|
+ }
|
|
|
}
|
|
|
- &.center{
|
|
|
- justify-content: center;
|
|
|
- .bottom-btn {
|
|
|
- padding: 10px 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.phenology-popup {
|
|
|
+ padding: 28px 20px 20px;
|
|
|
+ .phenology-header {
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ }
|
|
|
+ .phenology-list {
|
|
|
+ width: 100%;
|
|
|
+ .phenology-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .item-label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: rgba(0, 0, 0, 0.4);
|
|
|
+ .label-text {
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-value {
|
|
|
+ width: calc(100% - 156px);
|
|
|
}
|
|
|
}
|
|
|
+ .phenology-item + .phenology-item {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .phenology-footer{
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #fff;
|
|
|
+ background: #2199f8;
|
|
|
+ border-radius: 25px;
|
|
|
+ padding: 10px 0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
wangsisi
