|
@@ -8,20 +8,35 @@
|
|
|
<customCalendar ref="calendarRef" @dateSelect="handleDateSelect"></customCalendar>
|
|
<customCalendar ref="calendarRef" @dateSelect="handleDateSelect"></customCalendar>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="task-list">
|
|
<div class="task-list">
|
|
|
|
|
+ <div class="task-tabs">
|
|
|
|
|
+ <div class="tab-item" :class="{ active: activeTab === 'pending' }" @click="handleTabChange('pending')">
|
|
|
|
|
+ 待执行({{ pendingCount }})
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tab-item" :class="{ active: activeTab === 'completed' }" @click="handleTabChange('completed')">
|
|
|
|
|
+ 已完成({{ completedCount }})
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
<div class="work-task-list">
|
|
<div class="work-task-list">
|
|
|
<div
|
|
<div
|
|
|
- v-for="item in taskList"
|
|
|
|
|
|
|
+ v-for="item in displayTaskList"
|
|
|
:key="item.id"
|
|
:key="item.id"
|
|
|
class="task-card"
|
|
class="task-card"
|
|
|
@click.stop="handleViewDetail(item)"
|
|
@click.stop="handleViewDetail(item)"
|
|
|
:class="{ 'is-risk': item.isHighRisk }"
|
|
:class="{ 'is-risk': item.isHighRisk }"
|
|
|
>
|
|
>
|
|
|
- <div v-if="item.cornerTip" class="task-card__corner">{{ item.cornerTip }}</div>
|
|
|
|
|
|
|
+ <div v-if="item.status === 'pending' && item.cornerTip" class="task-card__corner">{{ item.cornerTip }}</div>
|
|
|
|
|
+ <div v-if="item.status === 'completed' && item.cornerTip" class="task-card__corner done-corner" :class="{ 'myself-corner': item.isByMyself }">
|
|
|
|
|
+ <el-icon size="14" class="myself-corner__icon" :class="{ 'myself-corner__icon-success': item.isByMyself }"><SuccessFilled /></el-icon>
|
|
|
|
|
+ {{ item.cornerTip }}
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
<div class="task-card__header">
|
|
<div class="task-card__header">
|
|
|
- <img class="task-card__icon" src="@/assets/img/home/task.png" alt="" />
|
|
|
|
|
- <span class="task-card__title van-ellipsis">{{ item.title }}</span>
|
|
|
|
|
- <span v-if="item.isHighRisk" class="risk-badge">{{ t("workExecute.highRisk") }}</span>
|
|
|
|
|
|
|
+ <!-- <img class="task-card__icon" src="@/assets/img/home/task.png" alt="" /> -->
|
|
|
|
|
+ <span class="task-card__title van-ellipsis">{{ item.executeDate + ' ' + item.title }}</span>
|
|
|
|
|
+ <span v-if="item.isNormal" class="badge-tag normal-badge">标准类</span>
|
|
|
|
|
+ <span v-if="item.isAbnormal" class="badge-tag abnormal-badge">异常类</span>
|
|
|
|
|
+ <span v-if="item.isWeather" class="badge-tag weather-badge">气象类</span>
|
|
|
|
|
+ <span v-if="item.isHighRisk" class="badge-tag risk-badge">{{ t("workExecute.highRisk") }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="task-card__body">
|
|
<div class="task-card__body">
|
|
@@ -34,16 +49,22 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="task-card__footer">
|
|
<div class="task-card__footer">
|
|
|
- <div class="card-btn card-btn--ghost" @click.stop="handleForward(item)">
|
|
|
|
|
- {{ t("workExecute.forward") }}
|
|
|
|
|
|
|
+ <div class="footer-l">
|
|
|
|
|
+ <img class="footer-l__icon" src="@/assets/img/home/user-icon-fill.png" alt="">
|
|
|
|
|
+ 外包农事
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="card-btn card-btn--primary" @click.stop="handleViewDetail(item)">
|
|
|
|
|
- {{ t("workExecute.viewDetail") }}
|
|
|
|
|
|
|
+ <div class="footer-r">
|
|
|
|
|
+ <div class="card-btn card-btn--ghost" @click.stop="handleForward(item)">
|
|
|
|
|
+ {{ t("workExecute.forward") }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="card-btn card-btn--primary" @click.stop="handleViewDetail(item)">
|
|
|
|
|
+ 我已完成
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div v-if="!taskList.length" class="empty-tip">{{ t("workExecute.noData") }}</div>
|
|
|
|
|
|
|
+ <div v-if="!displayTaskList.length" class="empty-tip">{{ t("workExecute.noData") }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<farm-calendar-popup v-model:show="showFarmCalendarPopup" @confirm="goCompleteFarmInfo" />
|
|
<farm-calendar-popup v-model:show="showFarmCalendarPopup" @confirm="goCompleteFarmInfo" />
|
|
@@ -72,7 +93,7 @@ const mapContainer = ref(null);
|
|
|
const calendarRef = ref(null);
|
|
const calendarRef = ref(null);
|
|
|
const showFarmCalendarPopup = ref(false);
|
|
const showFarmCalendarPopup = ref(false);
|
|
|
/** 调查问卷弹窗:后续由接口决定是否展示 */
|
|
/** 调查问卷弹窗:后续由接口决定是否展示 */
|
|
|
-const showSurveyAskPopup = ref(true);
|
|
|
|
|
|
|
+const showSurveyAskPopup = ref(false);
|
|
|
const tabBarHeight = computed(() => store.state.home.tabBarHeight);
|
|
const tabBarHeight = computed(() => store.state.home.tabBarHeight);
|
|
|
|
|
|
|
|
const formatDateYMD = (date = new Date()) =>
|
|
const formatDateYMD = (date = new Date()) =>
|
|
@@ -80,13 +101,17 @@ const formatDateYMD = (date = new Date()) =>
|
|
|
|
|
|
|
|
const filterDate = ref(formatDateYMD());
|
|
const filterDate = ref(formatDateYMD());
|
|
|
|
|
|
|
|
-/** 假数据:后续可替换为接口 */
|
|
|
|
|
|
|
+/** 假数据:后续可替换为接口;status: pending 待执行 / completed 已完成 */
|
|
|
const taskList = ref([
|
|
const taskList = ref([
|
|
|
{
|
|
{
|
|
|
id: 1,
|
|
id: 1,
|
|
|
|
|
+ status: "pending",
|
|
|
title: "喷施杀菌剂",
|
|
title: "喷施杀菌剂",
|
|
|
- isHighRisk: true,
|
|
|
|
|
- cornerTip: "发现异常后机动执行",
|
|
|
|
|
|
|
+ isHighRisk: false,
|
|
|
|
|
+ isNormal: true,
|
|
|
|
|
+ isAbnormal: false,
|
|
|
|
|
+ isWeather: false,
|
|
|
|
|
+ cornerTip: "待执行",
|
|
|
analysisSummary: "近期高温高湿,蒂蛀虫风险上升",
|
|
analysisSummary: "近期高温高湿,蒂蛀虫风险上升",
|
|
|
areaCode: "A-01 / 分区一",
|
|
areaCode: "A-01 / 分区一",
|
|
|
farmName: "喷施杀菌剂",
|
|
farmName: "喷施杀菌剂",
|
|
@@ -95,9 +120,13 @@ const taskList = ref([
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
id: 2,
|
|
id: 2,
|
|
|
|
|
+ status: "pending",
|
|
|
title: "叶面追肥",
|
|
title: "叶面追肥",
|
|
|
- isHighRisk: false,
|
|
|
|
|
- cornerTip: "",
|
|
|
|
|
|
|
+ isHighRisk: true,
|
|
|
|
|
+ isNormal: false,
|
|
|
|
|
+ isAbnormal: true,
|
|
|
|
|
+ isWeather: false,
|
|
|
|
|
+ cornerTip: "发现异常后机动执行",
|
|
|
analysisSummary: "转色期养分需求增加,需补充钾肥",
|
|
analysisSummary: "转色期养分需求增加,需补充钾肥",
|
|
|
areaCode: "B-03 / 分区二",
|
|
areaCode: "B-03 / 分区二",
|
|
|
farmName: "叶面追肥",
|
|
farmName: "叶面追肥",
|
|
@@ -106,9 +135,13 @@ const taskList = ref([
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
id: 3,
|
|
id: 3,
|
|
|
|
|
+ status: "pending",
|
|
|
title: "灌溉补水",
|
|
title: "灌溉补水",
|
|
|
isHighRisk: true,
|
|
isHighRisk: true,
|
|
|
- cornerTip: "发现异常后机动执行",
|
|
|
|
|
|
|
+ isNormal: false,
|
|
|
|
|
+ isAbnormal: false,
|
|
|
|
|
+ isWeather: true,
|
|
|
|
|
+ cornerTip: "建议执行",
|
|
|
analysisSummary: "土壤墒情偏低,局部出现轻度干旱胁迫",
|
|
analysisSummary: "土壤墒情偏低,局部出现轻度干旱胁迫",
|
|
|
areaCode: "C-02 / 分区三",
|
|
areaCode: "C-02 / 分区三",
|
|
|
farmName: "灌溉补水",
|
|
farmName: "灌溉补水",
|
|
@@ -117,17 +150,82 @@ const taskList = ref([
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
id: 4,
|
|
id: 4,
|
|
|
|
|
+ status: "completed",
|
|
|
title: "病虫害巡查",
|
|
title: "病虫害巡查",
|
|
|
isHighRisk: false,
|
|
isHighRisk: false,
|
|
|
- cornerTip: "",
|
|
|
|
|
- analysisSummary: "重点关注新梢与果实表面异常斑点",
|
|
|
|
|
|
|
+ isNormal: true,
|
|
|
|
|
+ isAbnormal: false,
|
|
|
|
|
+ isWeather: false,
|
|
|
|
|
+ isByMyself: true,
|
|
|
|
|
+ cornerTip: "本人完成",
|
|
|
|
|
+ analysisSummary: "新梢与果实表面未见明显异常斑点",
|
|
|
areaCode: "D-05 / 全园",
|
|
areaCode: "D-05 / 全园",
|
|
|
- executeDate: "08/06",
|
|
|
|
|
farmName: "病虫害巡查",
|
|
farmName: "病虫害巡查",
|
|
|
- wkt: "",
|
|
|
|
|
|
|
+ executeDate: "08/05",
|
|
|
|
|
+ wkt: "POINT(113.614209 23.585836)",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 5,
|
|
|
|
|
+ status: "completed",
|
|
|
|
|
+ title: "修剪整枝",
|
|
|
|
|
+ isHighRisk: false,
|
|
|
|
|
+ isNormal: true,
|
|
|
|
|
+ isAbnormal: false,
|
|
|
|
|
+ isWeather: false,
|
|
|
|
|
+ cornerTip: "已完成",
|
|
|
|
|
+ analysisSummary: "已清理过密枝条,改善通风透光",
|
|
|
|
|
+ areaCode: "A-02 / 分区一",
|
|
|
|
|
+ farmName: "修剪整枝",
|
|
|
|
|
+ executeDate: "08/04",
|
|
|
|
|
+ wkt: "POINT(113.611809 23.586236)",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 6,
|
|
|
|
|
+ status: "completed",
|
|
|
|
|
+ title: "除草松土",
|
|
|
|
|
+ isHighRisk: false,
|
|
|
|
|
+ isNormal: false,
|
|
|
|
|
+ isAbnormal: true,
|
|
|
|
|
+ isWeather: false,
|
|
|
|
|
+ cornerTip: "已完成",
|
|
|
|
|
+ analysisSummary: "行间杂草已清除,土壤表层已疏松",
|
|
|
|
|
+ areaCode: "B-01 / 分区二",
|
|
|
|
|
+ farmName: "除草松土",
|
|
|
|
|
+ executeDate: "08/03",
|
|
|
|
|
+ wkt: "POINT(113.616209 23.584936)",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 7,
|
|
|
|
|
+ status: "completed",
|
|
|
|
|
+ title: "防风加固",
|
|
|
|
|
+ isHighRisk: false,
|
|
|
|
|
+ isNormal: false,
|
|
|
|
|
+ isAbnormal: false,
|
|
|
|
|
+ isWeather: true,
|
|
|
|
|
+ cornerTip: "已完成",
|
|
|
|
|
+ analysisSummary: "台风过境前已完成支架加固与果袋检查",
|
|
|
|
|
+ areaCode: "C-01 / 分区三",
|
|
|
|
|
+ farmName: "防风加固",
|
|
|
|
|
+ executeDate: "08/02",
|
|
|
|
|
+ wkt: "POINT(113.613109 23.587436)",
|
|
|
},
|
|
},
|
|
|
]);
|
|
]);
|
|
|
|
|
|
|
|
|
|
+const activeTab = ref("pending");
|
|
|
|
|
+const pendingCount = computed(() => taskList.value.filter((item) => item.status === "pending").length);
|
|
|
|
|
+const completedCount = computed(() => taskList.value.filter((item) => item.status === "completed").length);
|
|
|
|
|
+const displayTaskList = computed(() => taskList.value.filter((item) => item.status === activeTab.value));
|
|
|
|
|
+
|
|
|
|
|
+const handleTabChange = (key) => {
|
|
|
|
|
+ if (activeTab.value === key) return;
|
|
|
|
|
+ activeTab.value = key;
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ if (indexMap.kmap) {
|
|
|
|
|
+ indexMap.initData(getMapMarkerList(), "farmName", "wkt");
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
const handleDateSelect = (date) => {
|
|
const handleDateSelect = (date) => {
|
|
|
filterDate.value = date ?? formatDateYMD();
|
|
filterDate.value = date ?? formatDateYMD();
|
|
|
};
|
|
};
|
|
@@ -154,7 +252,7 @@ const handleViewDetail = (item) => {
|
|
|
path: "/work_detail",
|
|
path: "/work_detail",
|
|
|
query: {
|
|
query: {
|
|
|
id: item.id,
|
|
id: item.id,
|
|
|
- statusStr: item.isHighRisk ? "执行异常" : "待接受",
|
|
|
|
|
|
|
+ statusVal: item.status,
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
@@ -170,7 +268,7 @@ const handleSurveyConfirm = () => {
|
|
|
|
|
|
|
|
const mapPoint = ref(null);
|
|
const mapPoint = ref(null);
|
|
|
|
|
|
|
|
-const getMapMarkerList = () => taskList.value.filter((item) => item.wkt);
|
|
|
|
|
|
|
+const getMapMarkerList = () => displayTaskList.value.filter((item) => item.wkt);
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
mapPoint.value = store.state.home.miniUserLocationPoint || "POINT(113.614209 23.585836)";
|
|
mapPoint.value = store.state.home.miniUserLocationPoint || "POINT(113.614209 23.585836)";
|
|
@@ -235,6 +333,31 @@ onActivated(() => {
|
|
|
padding: 0 12px 20px;
|
|
padding: 0 12px 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .task-tabs {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ gap: 50px;
|
|
|
|
|
+ margin: 2px 0 26px 0;
|
|
|
|
|
+ .tab-item {
|
|
|
|
|
+ color: #1D2129;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ color: #2199F8;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: -10px;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 2px;
|
|
|
|
|
+ background: #2199F8;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.work-task-list {
|
|
.work-task-list {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -254,16 +377,41 @@ onActivated(() => {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 0;
|
|
top: 0;
|
|
|
right: 0;
|
|
right: 0;
|
|
|
- max-width: 58%;
|
|
|
|
|
- padding: 4px 10px;
|
|
|
|
|
|
|
+ max-width: 78px;
|
|
|
|
|
+ padding: 2px 8px;
|
|
|
border-radius: 0 8px 0 8px;
|
|
border-radius: 0 8px 0 8px;
|
|
|
- background: rgba(255, 106, 106, 0.1);
|
|
|
|
|
- color: #FF6A6A;
|
|
|
|
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
|
|
+ color: #2199F8;
|
|
|
|
|
+ // background: rgba(255, 106, 106, 0.1);
|
|
|
|
|
+ // color: #FF6A6A;
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
line-height: 16px;
|
|
line-height: 16px;
|
|
|
- white-space: nowrap;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
|
|
+ white-space: wrap;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ // overflow: hidden;
|
|
|
|
|
+ // text-overflow: ellipsis;
|
|
|
|
|
+
|
|
|
|
|
+ &.done-corner {
|
|
|
|
|
+ max-width: 86px;
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ background: rgba(118, 126, 116, 0.1);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 4px;
|
|
|
|
|
+ color: #959595;
|
|
|
|
|
+ &.myself-corner {
|
|
|
|
|
+ background: rgba(74, 191, 50, 0.1);
|
|
|
|
|
+ color: #4ABF32;
|
|
|
|
|
+ }
|
|
|
|
|
+ .myself-corner__icon {
|
|
|
|
|
+ color: #959595;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .myself-corner__icon-success {
|
|
|
|
|
+ color: #4ABF32;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&__header {
|
|
&__header {
|
|
@@ -287,15 +435,33 @@ onActivated(() => {
|
|
|
color: #000;
|
|
color: #000;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .risk-badge {
|
|
|
|
|
|
|
+ .badge-tag {
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
height: 18px;
|
|
height: 18px;
|
|
|
padding: 0 6px;
|
|
padding: 0 6px;
|
|
|
border-radius: 2px;
|
|
border-radius: 2px;
|
|
|
- background: rgba(255, 106, 106, 0.12);
|
|
|
|
|
- color: #ff6a6a;
|
|
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
}
|
|
}
|
|
|
|
|
+ .badge-tag + .badge-tag {
|
|
|
|
|
+ margin-left: 4px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .risk-badge {
|
|
|
|
|
+ background: #FF6A6A;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ }
|
|
|
|
|
+ .normal-badge {
|
|
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
|
|
+ color: #2199F8;
|
|
|
|
|
+ }
|
|
|
|
|
+ .abnormal-badge {
|
|
|
|
|
+ background: rgba(255, 106, 106, 0.1);
|
|
|
|
|
+ color: #FF6A6A;
|
|
|
|
|
+ }
|
|
|
|
|
+ .weather-badge {
|
|
|
|
|
+ background: rgba(255, 149, 61, 0.1);
|
|
|
|
|
+ color: #FDA202;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
&__body {
|
|
&__body {
|
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
@@ -319,6 +485,27 @@ onActivated(() => {
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
gap: 12px;
|
|
gap: 12px;
|
|
|
margin-top: 14px;
|
|
margin-top: 14px;
|
|
|
|
|
+ .footer-l {
|
|
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
|
|
+ height: 20px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 6px;
|
|
|
|
|
+ padding: 0 6px;
|
|
|
|
|
+ border-radius: 2px;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #2199F8;
|
|
|
|
|
+ .footer-l__icon {
|
|
|
|
|
+ width: 14px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .footer-r {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.card-btn {
|
|
.card-btn {
|
|
@@ -335,8 +522,8 @@ onActivated(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&--primary {
|
|
&--primary {
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
|
|
- color: #2199f8;
|
|
|
|
|
|
|
+ background: #2199F8;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
padding: 0 16px;
|
|
padding: 0 16px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|