|
|
@@ -0,0 +1,579 @@
|
|
|
+<template>
|
|
|
+ <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 为终点，单位 %） -->
|
|
|
+ <div
|
|
|
+ v-for="(p, idx) in phenologyList"
|
|
|
+ :key="p.id ?? idx"
|
|
|
+ class="phenology-bar"
|
|
|
+ :style="getPhenologyBarStyle(p)"
|
|
|
+ >
|
|
|
+ <div class="reproductive-list">
|
|
|
+ <div
|
|
|
+ v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
|
|
|
+ :key="r.id ?? rIdx"
|
|
|
+ class="reproductive-item"
|
|
|
+ :class="{
|
|
|
+ 'horizontal-text': getReproductiveItemHeight(p) < 30,
|
|
|
+ 'vertical-lr-text': getReproductiveItemHeight(p) >= 30,
|
|
|
+ }"
|
|
|
+ :style="
|
|
|
+ getReproductiveItemHeight(p) < 30
|
|
|
+ ? { '--item-height': `${getReproductiveItemHeight(p)}px` }
|
|
|
+ : {}
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ r.name }}
|
|
|
+ <div class="arranges">
|
|
|
+ <div
|
|
|
+ v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList)
|
|
|
+ ? r.farmWorkArrangeList
|
|
|
+ : []"
|
|
|
+ :key="fw.id ?? aIdx"
|
|
|
+ class="arrange-card"
|
|
|
+ :class="getArrangeStatusClass(fw)"
|
|
|
+ @click="handleRowClick(fw)"
|
|
|
+ >
|
|
|
+ <div class="card-header">
|
|
|
+ <div class="header-left">
|
|
|
+ <span class="farm-work-name">{{ fw.farmWorkName || "农事名称" }}</span>
|
|
|
+ <span class="tag-standard">标准农事</span>
|
|
|
+ </div>
|
|
|
+ <div class="header-right">托管农事</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <span>{{ fw.warmReminder || "暂无提示" }}</span>
|
|
|
+ <span v-if="!disableClick" class="edit-link" @click.stop="handleEdit(fw)">点击编辑</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ getArrangeStatusClass(fw) === 'status-complete' ||
|
|
|
+ getArrangeStatusClass(fw) === 'status-warning'
|
|
|
+ "
|
|
|
+ class="status-icon"
|
|
|
+ :class="getArrangeStatusClass(fw)"
|
|
|
+ >
|
|
|
+ <el-icon
|
|
|
+ v-if="getArrangeStatusClass(fw) === 'status-complete'"
|
|
|
+ size="16"
|
|
|
+ color="#1CA900"
|
|
|
+ >
|
|
|
+ <SuccessFilled />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon v-else size="18" color="#FF953D">
|
|
|
+ <WarnTriangleFilled />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-for="t in solarTerms" :key="t.id" class="timeline-term" :style="getTermStyle(t)">
|
|
|
+ <span class="term-name">{{ t.displayName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed, nextTick, watch } from "vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ // 农场 ID，用于请求农事规划数据
|
|
|
+ farmId: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ // 页面类型：种植方案 / 农事规划，用来控制高度样式
|
|
|
+ pageType: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ // 是否禁用所有点击事件（用于只读展示）
|
|
|
+ disableClick: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ containerId: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const emits = defineEmits(["row-click", "edit"]);
|
|
|
+
|
|
|
+const solarTerms = ref([]);
|
|
|
+const phenologyList = ref([]);
|
|
|
+const timelineContainerRef = ref(null);
|
|
|
+// 标记是否为首次加载
|
|
|
+const isInitialLoad = ref(true);
|
|
|
+
|
|
|
+// 获取当前季节
|
|
|
+const getCurrentSeason = () => {
|
|
|
+ const month = new Date().getMonth() + 1; // 1-12
|
|
|
+ if (month >= 3 && month <= 5) {
|
|
|
+ return "spring"; // 春季：3-5月
|
|
|
+ } else if (month >= 6 && month <= 8) {
|
|
|
+ return "summer"; // 夏季：6-8月
|
|
|
+ } else if (month >= 9 && month <= 10) {
|
|
|
+ return "autumn"; // 秋季：9-10月
|
|
|
+ } else {
|
|
|
+ return "winter"; // 冬季：11-2月
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 安全解析时间到时间戳（ms）
|
|
|
+const safeParseDate = (val) => {
|
|
|
+ if (!val) return NaN;
|
|
|
+ if (val instanceof Date) return val.getTime();
|
|
|
+ if (typeof val === "number") return val;
|
|
|
+ if (typeof val === "string") {
|
|
|
+ // 兼容 "YYYY-MM-DD HH:mm:ss" -> Safari
|
|
|
+ const s = val.replace(/-/g, "/").replace("T", " ");
|
|
|
+ const d = new Date(s);
|
|
|
+ return isNaN(d.getTime()) ? NaN : d.getTime();
|
|
|
+ }
|
|
|
+ return NaN;
|
|
|
+};
|
|
|
+
|
|
|
+// 计算最小progress值（第一个节气的progress）
|
|
|
+const minProgress = computed(() => {
|
|
|
+ if (!solarTerms.value || solarTerms.value.length === 0) return 0;
|
|
|
+ const progresses = solarTerms.value.map((t) => Number(t?.progress) || 0).filter((p) => !isNaN(p));
|
|
|
+ return progresses.length > 0 ? Math.min(...progresses) : 0;
|
|
|
+});
|
|
|
+
|
|
|
+// 计算最大progress值
|
|
|
+const maxProgress = computed(() => {
|
|
|
+ if (!solarTerms.value || solarTerms.value.length === 0) return 100;
|
|
|
+ const progresses = solarTerms.value.map((t) => Number(t?.progress) || 0).filter((p) => !isNaN(p));
|
|
|
+ return progresses.length > 0 ? Math.max(...progresses) : 100;
|
|
|
+});
|
|
|
+
|
|
|
+// 列表高度
|
|
|
+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) * 1200;
|
|
|
+ const minH = range === 0 ? 0 : total;
|
|
|
+ return { minHeight: `${minH}px` };
|
|
|
+});
|
|
|
+
|
|
|
+const getTermStyle = (t) => {
|
|
|
+ const p = Math.max(0, Math.min(100, Number(t?.progress) || 0));
|
|
|
+ const minP = minProgress.value;
|
|
|
+ const maxP = maxProgress.value;
|
|
|
+ const range = Math.max(1, maxP - minP); // 避免除0
|
|
|
+ const total = (solarTerms.value?.length || 0) * 1200;
|
|
|
+ // 将progress映射到0开始的位置，最小progress对应top: 0
|
|
|
+ const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
|
|
|
+ const top = (normalizedP / 100) * total;
|
|
|
+ return {
|
|
|
+ position: "absolute",
|
|
|
+ top: `${top}px`,
|
|
|
+ left: 0,
|
|
|
+ width: "30px",
|
|
|
+ height: "20px",
|
|
|
+ display: "flex",
|
|
|
+ alignItems: "flex-start",
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+// 点击季节 → 滚动到对应节气（立春/立夏/立秋/立冬）
|
|
|
+const handleSeasonClick = (seasonValue) => {
|
|
|
+ const mapping = {
|
|
|
+ spring: "立春",
|
|
|
+ summer: "立夏",
|
|
|
+ autumn: "立秋",
|
|
|
+ winter: "立冬",
|
|
|
+ };
|
|
|
+ const targetName = mapping[seasonValue];
|
|
|
+ if (!targetName) return;
|
|
|
+ const target = (solarTerms.value || []).find((t) => (t?.displayName || "") === targetName);
|
|
|
+ if (!target) return;
|
|
|
+ const p = Math.max(0, Math.min(100, Number(target.progress) || 0));
|
|
|
+ const minP = minProgress.value;
|
|
|
+ const maxP = maxProgress.value;
|
|
|
+ const range = Math.max(1, maxP - minP);
|
|
|
+ const total = (solarTerms.value?.length || 0) * 1200;
|
|
|
+ const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
|
|
|
+ const targetTop = (normalizedP / 100) * total; // 内容内的像素位置
|
|
|
+ const wrap = timelineContainerRef.value;
|
|
|
+ if (!wrap) return;
|
|
|
+ const viewH = wrap.clientHeight || 0;
|
|
|
+ const maxScroll = Math.max(0, wrap.scrollHeight - viewH);
|
|
|
+ // 将目标位置稍微靠上（使用 0.35 视口高度做偏移）
|
|
|
+ let scrollTop = Math.max(0, targetTop - viewH * 0.1);
|
|
|
+ if (scrollTop > maxScroll) scrollTop = maxScroll;
|
|
|
+ wrap.scrollTo({ top: scrollTop, behavior: "smooth" });
|
|
|
+};
|
|
|
+
|
|
|
+// 物候期覆盖条样式
|
|
|
+const getPhenologyBarStyle = (item) => {
|
|
|
+ const p1 = Math.max(0, Math.min(100, Number(item?.progress) || 0));
|
|
|
+ const p2 = Math.max(0, Math.min(100, Number(item?.progress2) || 0));
|
|
|
+ const start = Math.min(p1, p2);
|
|
|
+ const end = Math.max(p1, p2);
|
|
|
+ const minP = minProgress.value;
|
|
|
+ const maxP = maxProgress.value;
|
|
|
+ const range = Math.max(1, maxP - minP);
|
|
|
+ const total = (solarTerms.value?.length || 0) * 1200; // 有效绘制区高度（px）
|
|
|
+ // 将progress映射到0开始的位置
|
|
|
+ const normalizedStart = range > 0 ? ((start - minP) / range) * 100 : 0;
|
|
|
+ const normalizedEnd = range > 0 ? ((end - minP) / range) * 100 : 0;
|
|
|
+ let topPx = (normalizedStart / 100) * total;
|
|
|
+ let heightPx = Math.max(2, ((normalizedEnd - normalizedStart) / 100) * total);
|
|
|
+
|
|
|
+ // 顶部对齐
|
|
|
+ const firstTermTop = 0;
|
|
|
+ const minTop = firstTermTop + 10;
|
|
|
+ if (topPx < minTop) {
|
|
|
+ const diff = minTop - topPx;
|
|
|
+ topPx = minTop;
|
|
|
+ heightPx = Math.max(2, heightPx - diff);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部对齐
|
|
|
+ const lastTermTop = (100 / 100) * total;
|
|
|
+ const maxBottom = lastTermTop + 35;
|
|
|
+ const barBottom = topPx + heightPx;
|
|
|
+ if (barBottom > maxBottom) {
|
|
|
+ heightPx = Math.max(2, maxBottom - topPx);
|
|
|
+ }
|
|
|
+
|
|
|
+ const now = Date.now();
|
|
|
+ const isFuture = Number.isFinite(item?.startTimeMs) ? item.startTimeMs > now : start > 0;
|
|
|
+ const barColor = isFuture ? "rgba(145, 145, 145, 0.1)" : "#2199F8";
|
|
|
+ const beforeBg = isFuture ? "rgba(145, 145, 145, 0.1)" : "rgba(33, 153, 248, 0.1)";
|
|
|
+ return {
|
|
|
+ position: "absolute",
|
|
|
+ left: "46px",
|
|
|
+ width: "25px",
|
|
|
+ top: `${topPx}px`,
|
|
|
+ height: `${heightPx}px`,
|
|
|
+ background: barColor,
|
|
|
+ color: isFuture ? "#747778" : "#fff",
|
|
|
+ "--bar-before-bg": beforeBg,
|
|
|
+ zIndex: 2,
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+// 农事状态样式映射（0:默认，1-4:正常，5:完成，6:预警）
|
|
|
+const getArrangeStatusClass = (fw) => {
|
|
|
+ const t = fw?.flowStatus;
|
|
|
+ if (t == null) return "status-default";
|
|
|
+ if (t >= 0 && t <= 4) return "status-normal";
|
|
|
+ if (t === 5) return "status-complete";
|
|
|
+ if (t === 6) return "status-warning";
|
|
|
+ return "status-default";
|
|
|
+};
|
|
|
+
|
|
|
+// 计算 phenology-bar 的高度（px）
|
|
|
+const getPhenologyBarHeight = (item) => {
|
|
|
+ const p1 = Math.max(0, Math.min(100, Number(item?.progress) || 0));
|
|
|
+ const p2 = Math.max(0, Math.min(100, Number(item?.progress2) || 0));
|
|
|
+ const start = Math.min(p1, p2);
|
|
|
+ const end = Math.max(p1, p2);
|
|
|
+ const minP = minProgress.value;
|
|
|
+ const maxP = maxProgress.value;
|
|
|
+ const range = Math.max(1, maxP - minP);
|
|
|
+ const total = (solarTerms.value?.length || 0) * 1200;
|
|
|
+ const normalizedStart = range > 0 ? ((start - minP) / range) * 100 : 0;
|
|
|
+ const normalizedEnd = range > 0 ? ((end - minP) / range) * 100 : 0;
|
|
|
+ const heightPx = Math.max(2, ((normalizedEnd - normalizedStart) / 100) * total);
|
|
|
+ return heightPx;
|
|
|
+};
|
|
|
+
|
|
|
+// 计算 reproductive-item 的高度（px）
|
|
|
+const getReproductiveItemHeight = (phenologyItem) => {
|
|
|
+ const barHeight = getPhenologyBarHeight(phenologyItem);
|
|
|
+ const listLength = Array.isArray(phenologyItem?.reproductiveList) ? phenologyItem.reproductiveList.length : 1;
|
|
|
+ return listLength > 0 ? barHeight / listLength : barHeight;
|
|
|
+};
|
|
|
+
|
|
|
+const handleRowClick = (item) => {
|
|
|
+ if (props.disableClick) return;
|
|
|
+ emits("row-click", item);
|
|
|
+};
|
|
|
+
|
|
|
+const handleEdit = (item) => {
|
|
|
+ if (props.disableClick) return;
|
|
|
+ emits("edit", item);
|
|
|
+};
|
|
|
+
|
|
|
+// 获取农事规划数据
|
|
|
+const getFarmWorkPlan = () => {
|
|
|
+ if (!props.farmId && !props.containerId) return;
|
|
|
+ let savedScrollTop = 0;
|
|
|
+ if (!isInitialLoad.value && timelineContainerRef.value) {
|
|
|
+ savedScrollTop = timelineContainerRef.value.scrollTop || 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ VE_API.monitor
|
|
|
+ .farmWorkPlan({ farmId: props.farmId, containerId: props.containerId })
|
|
|
+ .then(({ data, code }) => {
|
|
|
+ if (code === 0) {
|
|
|
+ const list = Array.isArray(data?.solarTermsList) ? data.solarTermsList : [];
|
|
|
+ const filtered = list
|
|
|
+ .filter((t) => t && t.type === 1)
|
|
|
+ .map((t) => ({
|
|
|
+ id:
|
|
|
+ t.id ??
|
|
|
+ t.solarTermsId ??
|
|
|
+ t.termId ??
|
|
|
+ `${t.name || t.solarTermsName || t.termName || "term"}-${t.createDate || ""}`,
|
|
|
+ displayName: t.name || t.solarTermsName || t.termName || "节气",
|
|
|
+ createDate: t.createDate || null,
|
|
|
+ progress: Number(t.progress) || 0,
|
|
|
+ }));
|
|
|
+ solarTerms.value = filtered;
|
|
|
+ // 物候期数据
|
|
|
+ phenologyList.value = Array.isArray(data?.phenologyList)
|
|
|
+ ? 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,
|
|
|
+ };
|
|
|
+ })
|
|
|
+ : [];
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ if (isInitialLoad.value) {
|
|
|
+ const currentSeason = getCurrentSeason();
|
|
|
+ handleSeasonClick(currentSeason);
|
|
|
+ isInitialLoad.value = false;
|
|
|
+ } else if (timelineContainerRef.value && savedScrollTop > 0) {
|
|
|
+ timelineContainerRef.value.scrollTop = savedScrollTop;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("获取农事规划数据失败:", error);
|
|
|
+ ElMessage.error("获取农事规划数据失败");
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.farmId || props.containerId,
|
|
|
+ (val) => {
|
|
|
+ if (val) {
|
|
|
+ isInitialLoad.value = true;
|
|
|
+ getFarmWorkPlan();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.timeline-container {
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .timeline-list {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .timeline-middle-line {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px; /* 位于节气文字列中间（列宽约30px） */
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 2px;
|
|
|
+ background: #e8e8e8;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .phenology-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: stretch;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .reproductive-list {
|
|
|
+ display: grid;
|
|
|
+ grid-auto-rows: 1fr; /* 子项等高，整体等分父高度 */
|
|
|
+ align-items: stretch;
|
|
|
+ justify-items: center; /* 子项居中 */
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .reproductive-item {
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ text-orientation: upright;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 23px;
|
|
|
+ color: inherit;
|
|
|
+ position: relative;
|
|
|
+ &.horizontal-text {
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
+ text-orientation: mixed;
|
|
|
+ letter-spacing: normal;
|
|
|
+ line-height: calc(var(--item-height, 15px) - 3px);
|
|
|
+ }
|
|
|
+ &.vertical-lr-text {
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ text-orientation: upright;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ .arranges {
|
|
|
+ position: absolute;
|
|
|
+ left: 40px; /* 列与中线右侧一段距离 */
|
|
|
+ top: 0;
|
|
|
+ z-index: 3;
|
|
|
+ display: flex;
|
|
|
+ max-width: calc(100vw - 100px);
|
|
|
+ gap: 12px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ .arrange-card {
|
|
|
+ width: 97%;
|
|
|
+ border: 0.5px solid #2199f8;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ padding: 8px;
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .header-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ .farm-work-name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+ .tag-standard {
|
|
|
+ padding: 0 8px;
|
|
|
+ background: rgba(119, 119, 119, 0.1);
|
|
|
+ border-radius: 25px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header-right {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #808080;
|
|
|
+ padding: 0 8px;
|
|
|
+ border-radius: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-content {
|
|
|
+ color: #909090;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 1.55;
|
|
|
+ margin: 4px 0 2px 0;
|
|
|
+ .edit-link {
|
|
|
+ color: #2199f8;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .status-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: -8px;
|
|
|
+ bottom: -8px;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: -6px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 5px solid transparent;
|
|
|
+ border-bottom: 5px solid transparent;
|
|
|
+ border-right: 5px solid #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arrange-card.status-warning {
|
|
|
+ border-color: #ff953d;
|
|
|
+ &::before {
|
|
|
+ border-right-color: #ff953d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arrange-card.status-complete {
|
|
|
+ border-color: #1ca900;
|
|
|
+ &::before {
|
|
|
+ border-right-color: #1ca900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arrange-card.status-normal {
|
|
|
+ border-color: #2199f8;
|
|
|
+ &::before {
|
|
|
+ border-right-color: #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .reproductive-item + .reproductive-item {
|
|
|
+ border-top: 2px solid #fff;
|
|
|
+ }
|
|
|
+ .phenology-bar + .phenology-bar {
|
|
|
+ border-top: 2px solid #fff;
|
|
|
+ }
|
|
|
+ .timeline-term {
|
|
|
+ position: absolute;
|
|
|
+ width: 30px;
|
|
|
+ padding-right: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ z-index: 2; /* 置于中线之上 */
|
|
|
+ .term-name {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 46px;
|
|
|
+ line-height: 30px;
|
|
|
+ background: #f5f7fb;
|
|
|
+ font-size: 13px;
|
|
|
+ word-break: break-all;
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ text-orientation: upright;
|
|
|
+ color: rgba(174, 174, 174, 0.6);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
