|
|
@@ -0,0 +1,952 @@
|
|
|
+<template>
|
|
|
+ <div class="task-page" :style="{ height: `calc(100vh - ${tabBarHeight}px - 50px)` }">
|
|
|
+ <div class="task-top">
|
|
|
+ <div class="map-container" ref="mapContainer"></div>
|
|
|
+ </div>
|
|
|
+ <div class="task-list">
|
|
|
+ <div class="list-filter">
|
|
|
+ <div class="filter-item" :class="{ active: activeIndex === 0 }" @click="handleActiveFilter(0)">
|
|
|
+ 待确认({{ taskCounts[0] || 0 }})
|
|
|
+ </div>
|
|
|
+ <!-- <div class="filter-item" :class="{ active: activeIndex === 1 }" @click="handleActiveFilter(1)">
|
|
|
+ 已确认({{ taskCounts[1] || 0 }})
|
|
|
+ </div> -->
|
|
|
+ <div class="filter-item" :class="{ active: activeIndex === 2 }" @click="handleActiveFilter(2)">
|
|
|
+ 已确认({{ taskCounts[2] || 0 }})
|
|
|
+ </div>
|
|
|
+ <div class="filter-item" :class="{ active: activeIndex === 3 }" @click="handleActiveFilter(3)">
|
|
|
+ 待提醒({{ taskCounts[3] || 0 }})
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="select-group">
|
|
|
+ <el-select
|
|
|
+ class="select-item"
|
|
|
+ v-model="selectParma.farmWorkTypeId"
|
|
|
+ placeholder="用户类型"
|
|
|
+ @change="getSimpleList"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in farmWorkTypeList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ class="select-item"
|
|
|
+ v-model="selectParma.districtCode"
|
|
|
+ placeholder="切换作物"
|
|
|
+ @change="getSimpleList"
|
|
|
+ >
|
|
|
+ <el-option v-for="item in districtList" :key="item.code" :label="item.name" :value="item.code" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="task-content-loading" v-if="loading && noData" v-loading="loading">
|
|
|
+ </div> -->
|
|
|
+ <div class="task-content" v-loading="loading">
|
|
|
+ <div class="task-item" v-for="(item, index) in taskList" :key="index">
|
|
|
+ <div class="img-text-wrap">
|
|
|
+ <div class="left-wrap">
|
|
|
+ <div class="left-img">
|
|
|
+ <img src="@/assets/img/home/farm.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="right-text">
|
|
|
+ <div class="farm-info">
|
|
|
+ {{ item?.farmName }}
|
|
|
+ <div class="info-tag-wrap">
|
|
|
+ <div class="tag-item primary">
|
|
|
+ {{ item?.typeName }}
|
|
|
+ </div>
|
|
|
+ <div class="tag-item second">托管客户</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="farm-addr">{{ item?.address }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-wrap">提醒客户</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-bottom">
|
|
|
+ <div class="bottom-tag">
|
|
|
+ <div class="tag-card active">
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="card-main-text">花芽分化</div>
|
|
|
+ <div class="card-sub-text">
|
|
|
+ 当前物候期
|
|
|
+ <span class="card-icon">
|
|
|
+ <el-icon><Edit /></el-icon>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tag-card">
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="card-main-text">蒂蛀虫</div>
|
|
|
+ <div class="card-sub-text">预计风险</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tag-card">
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="card-main-text">5天</div>
|
|
|
+ <div class="card-sub-text">预计下次物候</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="timeline">
|
|
|
+ <div class="timeline-item" v-for="item in timelineList" :key="item.id">
|
|
|
+ <div class="timeline-left">
|
|
|
+ <div class="dot"></div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ <div class="timeline-right">
|
|
|
+ <div class="date">预计{{ item.date }}天后触发<span class="work-name">{{ item.workName }}</span></div>
|
|
|
+ <div class="text">
|
|
|
+ 预计报价<span class="price">{{ item.price }}元</span>
|
|
|
+ <span class="action-detail">查看报价单</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="timeline-action" @click="handleTimelineAction(item)">转入农事任务</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="empty-data" v-if="noData">暂无数据</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <upload-execute ref="uploadExecuteRef" :onlyShare="onlyShare" @uploadSuccess="handleUploadSuccess" />
|
|
|
+
|
|
|
+ <popup v-model:show="showTaskPopup" round class="task-tips-popup">
|
|
|
+ <template v-if="taskPopupType === 'warning'">
|
|
|
+ <img class="create-farm-icon" src="@/assets/img/home/create-farm-icon.png" alt="" />
|
|
|
+ <div class="create-farm-text">
|
|
|
+ <div>
|
|
|
+ 您确认忽略 <span class="main-text">{{ currentTask?.farmName }}</span> 的
|
|
|
+ <span class="main-text">{{ currentTask?.farmWorkName }}</span> 农事吗
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img class="farm-check-icon" src="@/assets/img/home/right.png" alt="" />
|
|
|
+ <div class="create-farm-text success-text">农事已下发成功</div>
|
|
|
+ </template>
|
|
|
+ <div class="create-farm-btn" @click="handlePopupBtn">
|
|
|
+ {{ taskPopupType === "warning" ? "确认忽略" : "我知道了" }}
|
|
|
+ </div>
|
|
|
+ </popup>
|
|
|
+ <!-- 服务报价单 -->
|
|
|
+ <price-sheet-popup :key="activeIndex" ref="priceSheetPopupRef"></price-sheet-popup>
|
|
|
+ <!-- 新增:激活上传弹窗 -->
|
|
|
+ <active-upload-popup ref="activeUploadPopupRef" :needExecutor="true" @handleUploadSuccess="handleUploadSuccess"></active-upload-popup>
|
|
|
+
|
|
|
+ <!-- 报价弹窗 -->
|
|
|
+ <offer-popup :showPopup="showPopup" :executionData="executionData"></offer-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import eventBus from "@/api/eventBus";
|
|
|
+import { computed, nextTick, onMounted, ref, watch } from "vue";
|
|
|
+import { useStore } from "vuex";
|
|
|
+import { Popup } from "vant";
|
|
|
+import IndexMap from "../../farm_manage/map/index";
|
|
|
+import taskItem from "@/components/taskItem.vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+import uploadExecute from "./uploadExecute.vue";
|
|
|
+import priceSheetPopup from "@/components/popup/priceSheetPopup.vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import activeUploadPopup from "@/components/popup/activeUploadPopup.vue";
|
|
|
+import offerPopup from "@/components/popup/offerPopup.vue";
|
|
|
+
|
|
|
+const store = useStore();
|
|
|
+const router = useRouter();
|
|
|
+const indexMap = new IndexMap();
|
|
|
+const mapContainer = ref(null);
|
|
|
+const tabBarHeight = computed(() => store.state.home.tabBarHeight);
|
|
|
+const uploadExecuteRef = ref(null);
|
|
|
+
|
|
|
+const showPopup = ref(false);
|
|
|
+const executionData = ref(null);
|
|
|
+
|
|
|
+const selectParma = ref({
|
|
|
+ farmWorkTypeId: null,
|
|
|
+ districtCode: null,
|
|
|
+});
|
|
|
+
|
|
|
+// 任务列表数据(用于显示,可能被筛选)
|
|
|
+const taskList = ref([]);
|
|
|
+// 各状态任务数量
|
|
|
+const taskCounts = ref([0, 0, 0]);
|
|
|
+// 当前选中的筛选索引
|
|
|
+const activeIndex = ref(0);
|
|
|
+const noData = ref(false);
|
|
|
+const loading = ref(false);
|
|
|
+
|
|
|
+const showTaskPopup = ref(false);
|
|
|
+const taskPopupType = ref("warning");
|
|
|
+
|
|
|
+// 根据 activeIndex 计算 startFlowStatus
|
|
|
+const getStartFlowStatus = (index) => {
|
|
|
+ const statusMap = {
|
|
|
+ 0: 0, // 待确认
|
|
|
+ 1: "1,2,3", // 待完成
|
|
|
+ 2: 4, // 待完成
|
|
|
+ 3: 5, // 已完成
|
|
|
+ };
|
|
|
+ return statusMap[index] ?? 0;
|
|
|
+};
|
|
|
+
|
|
|
+const timelineList = ref([
|
|
|
+ {
|
|
|
+ date: "3",
|
|
|
+ workName: "梢期杀虫",
|
|
|
+ price: "1258"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "5",
|
|
|
+ workName: "梢期营养",
|
|
|
+ price: "1758"
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+// 获取单个状态的任务数量
|
|
|
+function getTaskCount(flowStatus, index) {
|
|
|
+ const location = store.state.home.miniUserLocationPoint;
|
|
|
+ return VE_API.z_farm_work_record
|
|
|
+ .getSimpleList({ role: 2, location, flowStatus })
|
|
|
+ .then(({ data }) => {
|
|
|
+ data = [
|
|
|
+ ...data,
|
|
|
+ {
|
|
|
+ address: "深圳世界之窗",
|
|
|
+ executeDate: "2025-12-29",
|
|
|
+ executeEvidence: "",
|
|
|
+ farmArea: "40.100412863459745",
|
|
|
+ farmId: 93651,
|
|
|
+ farmMiniUserId: 91344,
|
|
|
+ farmMiniUserName: "舒浩农资",
|
|
|
+ farmName: "世界之窗荔枝农场",
|
|
|
+ farmWorkArrangeId: null,
|
|
|
+ farmWorkLibId: "756894717878210560",
|
|
|
+ farmWorkName: "二梢营养",
|
|
|
+ id: "276563",
|
|
|
+ isFollow: null,
|
|
|
+ isIgnored: 0,
|
|
|
+ isPublic: 0,
|
|
|
+ orderId: "778920749103583232",
|
|
|
+ point: "POINT(113.96804666992188 22.537601205078126)",
|
|
|
+ quoteCount: "0",
|
|
|
+ typeId: "2",
|
|
|
+ typeName: "糯米糍",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ address: "汕尾市海丰县赤坑镇S241妙荔现代农业园",
|
|
|
+ executeDate: "2025-12-27",
|
|
|
+ executeEvidence: "",
|
|
|
+ farmArea: "",
|
|
|
+ farmId: 43318,
|
|
|
+ farmMiniUserId: 81818,
|
|
|
+ farmMiniUserName: "",
|
|
|
+ farmName: "汕尾妙荔果园",
|
|
|
+ farmWorkArrangeId: null,
|
|
|
+ farmWorkLibId: "708734452137725956",
|
|
|
+ farmWorkName: "杀梢",
|
|
|
+ id: "277160",
|
|
|
+ isFollow: null,
|
|
|
+ isIgnored: 0,
|
|
|
+ isPublic: 0,
|
|
|
+ orderId: "781556915820826624",
|
|
|
+ point: "POINT(115.455766 22.883073)",
|
|
|
+ quoteCount: "0",
|
|
|
+ typeId: "4",
|
|
|
+ typeName: "仙进奉",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ if (Array.isArray(data)) {
|
|
|
+ taskCounts.value[index] = data.length;
|
|
|
+
|
|
|
+ if (index === 2) {
|
|
|
+ indexMap.initData(data);
|
|
|
+ }
|
|
|
+ } else if (data?.total !== undefined) {
|
|
|
+ taskCounts.value[index] = data.total;
|
|
|
+ } else {
|
|
|
+ taskCounts.value[index] = 0;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error(`获取状态${index}任务数量失败:`, error);
|
|
|
+ taskCounts.value[index] = 0;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const taskItemRefs = ref([]);
|
|
|
+const setTaskItemRef = (el, index) => {
|
|
|
+ if (el) {
|
|
|
+ taskItemRefs.value[index] = el;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleUploadSuccess = async () => {
|
|
|
+ // 先保存当前需要更新的 item id
|
|
|
+ const currentItemIds = taskList.value.map((item) => item.id || item.workRecordId);
|
|
|
+
|
|
|
+ // 刷新列表
|
|
|
+ await getSimpleList();
|
|
|
+
|
|
|
+ // 等待 DOM 更新完成,refs 被重新收集
|
|
|
+ await nextTick();
|
|
|
+
|
|
|
+ // 更新所有task-item的triggerImg
|
|
|
+ taskItemRefs.value.forEach((ref) => {
|
|
|
+ if (ref && ref.updateTriggerImg) {
|
|
|
+ ref.updateTriggerImg();
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const cityCode = ref("");
|
|
|
+//根据城市的坐标返回区县列表
|
|
|
+const districtList = ref([]);
|
|
|
+function getDistrictListByCity() {
|
|
|
+ VE_API.z_farm_work_record.getDistrictListByCity({ point: mapPoint.value }).then(({ data }) => {
|
|
|
+ districtList.value = data || [];
|
|
|
+ // cityCode.value = data[0].code.slice(0, -2);
|
|
|
+ cityCode.value = "";
|
|
|
+ districtList.value.unshift({ code: cityCode.value, name: "全部" });
|
|
|
+ selectParma.value.districtCode = cityCode.value;
|
|
|
+ getSimpleList();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+//农事类型列表
|
|
|
+const farmWorkTypeList = ref([]);
|
|
|
+function getFarmWorkTypeList() {
|
|
|
+ VE_API.z_farm_work_record.getFarmWorkTypeList().then(({ data }) => {
|
|
|
+ farmWorkTypeList.value = data;
|
|
|
+ farmWorkTypeList.value.unshift({ id: 0, name: "全部" });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化时获取所有状态的任务数量
|
|
|
+function initTaskCounts() {
|
|
|
+ const location = store.state.home.miniUserLocationPoint;
|
|
|
+ // 并行请求三个状态的数量
|
|
|
+ Promise.all([
|
|
|
+ getTaskCount(0, 0), // 待确认
|
|
|
+ getTaskCount("1,2,3", 1), // 待确认
|
|
|
+ getTaskCount(4, 2), // 待完成
|
|
|
+ getTaskCount(5, 3), // 已完成
|
|
|
+ ]);
|
|
|
+}
|
|
|
+const mapPoint = ref(null);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ mapPoint.value = store.state.home.miniUserLocationPoint;
|
|
|
+
|
|
|
+ // 初始化时获取所有状态的数量
|
|
|
+ initTaskCounts();
|
|
|
+ // 加载当前选中状态的数据列表
|
|
|
+ getSimpleList();
|
|
|
+ getDistrictListByCity();
|
|
|
+ getFarmWorkTypeList();
|
|
|
+ nextTick(() => {
|
|
|
+ indexMap.initMap(mapPoint.value, mapContainer.value, true);
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+// 监听 activeIndex 变化,重新加载数据
|
|
|
+watch(activeIndex, () => {
|
|
|
+ getSimpleList();
|
|
|
+});
|
|
|
+
|
|
|
+function getSimpleList() {
|
|
|
+ loading.value = true;
|
|
|
+ noData.value = false;
|
|
|
+ // 清空refs数组,避免索引错乱
|
|
|
+ taskItemRefs.value = [];
|
|
|
+ const startFlowStatus = getStartFlowStatus(activeIndex.value);
|
|
|
+ const params = {
|
|
|
+ ...selectParma.value,
|
|
|
+ role: 2,
|
|
|
+ location: mapPoint.value,
|
|
|
+ flowStatus: startFlowStatus,
|
|
|
+ farmWorkTypeId: selectParma.value.farmWorkTypeId || null,
|
|
|
+ };
|
|
|
+
|
|
|
+ return VE_API.z_farm_work_record
|
|
|
+ .getSimpleList(params)
|
|
|
+ .then(({ data }) => {
|
|
|
+ loading.value = false;
|
|
|
+ // 假设返回的数据结构是 { list: [], total: 0 } 或者直接是数组
|
|
|
+ let filteredData = data;
|
|
|
+
|
|
|
+ // 如果是"待确认"状态,过滤掉 isIgnored 为 1 的数据
|
|
|
+ if (activeIndex.value === 0 && Array.isArray(data)) {
|
|
|
+ filteredData = data.filter((item) => item.isIgnored !== 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (Array.isArray(filteredData) && filteredData.length > 0) {
|
|
|
+ taskList.value = filteredData;
|
|
|
+ // 更新当前状态的数量
|
|
|
+ taskCounts.value[activeIndex.value] = filteredData.length;
|
|
|
+ if (activeIndex.value === 2) {
|
|
|
+ // 地图使用筛选后的数据
|
|
|
+ indexMap.initData(taskList.value);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ noData.value = true;
|
|
|
+ taskList.value = [];
|
|
|
+ taskCounts.value[activeIndex.value] = 0;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("获取任务列表失败:", error);
|
|
|
+ loading.value = false;
|
|
|
+ taskList.value = [];
|
|
|
+ taskCounts.value[activeIndex.value] = 0;
|
|
|
+ if (activeIndex.value === 2) {
|
|
|
+ indexMap.initData(taskList.value);
|
|
|
+ }
|
|
|
+ noData.value = true;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function handleActiveFilter(i) {
|
|
|
+ activeIndex.value = i;
|
|
|
+ selectParma.value.districtCode = cityCode.value;
|
|
|
+ selectParma.value.farmWorkTypeId = null;
|
|
|
+}
|
|
|
+
|
|
|
+function toPage(item) {
|
|
|
+ // router.push("/servicZes_agri")
|
|
|
+ // if (activeIndex.value === 2) {
|
|
|
+ // } else {
|
|
|
+ // // 下发农事请求
|
|
|
+ // const data = {
|
|
|
+ // id: item.id,
|
|
|
+ // };
|
|
|
+ // VE_API.z_farm_work_record.issueFarmWorkRecord(data).then((res) => {
|
|
|
+ // if (res.code === 0) {
|
|
|
+ // taskPopupType.value = "success";
|
|
|
+ // showTaskPopup.value = true;
|
|
|
+ // getSimpleList();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+const showUploadExecutePopup = (item) => {
|
|
|
+ if (item?.executeEvidence.length) {
|
|
|
+ onlyShare.value = true;
|
|
|
+ } else {
|
|
|
+ onlyShare.value = false;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ uploadExecuteRef.value.showPopup(item);
|
|
|
+ }, 10);
|
|
|
+};
|
|
|
+
|
|
|
+function toDetail(item) {
|
|
|
+ if (activeIndex.value === 0) {
|
|
|
+ router.push({
|
|
|
+ path: "/modify_work",
|
|
|
+ query: { id: item.id },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ router.push({
|
|
|
+ path: "/completed_work",
|
|
|
+ query: { miniJson: JSON.stringify({ id: item.id }) },
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const priceSheetPopupRef = ref(null);
|
|
|
+const showPriceSheetPopup = (item) => {
|
|
|
+ VE_API.z_farm_work_record.getDetail({ id: item.id }).then(({ data }) => {
|
|
|
+ const res = data[0];
|
|
|
+ priceSheetPopupRef.value.handleShowPopup(res);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const onlyShare = ref(false);
|
|
|
+const currentTask = ref(null);
|
|
|
+function handleAction(item) {
|
|
|
+ if (activeIndex.value === 0) {
|
|
|
+ taskPopupType.value = "warning";
|
|
|
+ showTaskPopup.value = true;
|
|
|
+ currentTask.value = item;
|
|
|
+ } else {
|
|
|
+ onlyShare.value = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ uploadExecuteRef.value.showPopup(item, "share-sheet");
|
|
|
+ }, 10);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function handlePopupBtn() {
|
|
|
+ showTaskPopup.value = false;
|
|
|
+ if (taskPopupType.value === "warning") {
|
|
|
+ // 确认忽略
|
|
|
+ VE_API.z_farm_work_record.ignoreFarmWorkRecord({ farmWorkRecordId: currentTask.value.id }).then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage.success("操作成功");
|
|
|
+ getSimpleList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function handleForward(item) {
|
|
|
+ if (item.quoteCount && item.quoteCount != 0) {
|
|
|
+ onlyShare.value = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ uploadExecuteRef.value.showPopup(
|
|
|
+ { ...item, type: "quotation", farmWorkOrderId: item.orderId },
|
|
|
+ "share-sheet"
|
|
|
+ );
|
|
|
+ }, 10);
|
|
|
+ } else {
|
|
|
+ ElMessage.warning("暂无报价数据,无法分享");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const executorList = ref([{
|
|
|
+ id: 1,
|
|
|
+ name: "张三",
|
|
|
+ phone: "13800138000",
|
|
|
+}, {
|
|
|
+ id: 2,
|
|
|
+ name: "李四",
|
|
|
+ phone: "13800138001",
|
|
|
+}])
|
|
|
+
|
|
|
+function handleTimelineAction(item) {
|
|
|
+ // activeUploadPopupRef.value.triggerFarmWork({
|
|
|
+ // farmId: item.farmId,
|
|
|
+ // workName: item.workName,
|
|
|
+ // });
|
|
|
+
|
|
|
+ eventBus.emit("activeUpload:show", {
|
|
|
+ gardenIdVal: item.farmId,
|
|
|
+ problemTitleVal: '请选择 ' + item.workName + ' 执行截至时间',
|
|
|
+ arrangeIdVal: item.farmWorkArrangeId,
|
|
|
+ executorListVal: executorList.value,
|
|
|
+ });
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.task-page {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 50px - 50px);
|
|
|
+ overflow: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f5f7fb;
|
|
|
+ .map-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 162px;
|
|
|
+ clip-path: inset(0px round 8px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-group {
|
|
|
+ display: flex;
|
|
|
+ padding: 8px 12px 0 12px;
|
|
|
+ .select-item {
|
|
|
+ width: 100%;
|
|
|
+ ::v-deep {
|
|
|
+ .el-select__wrapper {
|
|
|
+ text-align: center;
|
|
|
+ gap: 2px;
|
|
|
+ box-shadow: none;
|
|
|
+ justify-content: center;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .el-select__selection {
|
|
|
+ flex: none;
|
|
|
+ width: fit-content;
|
|
|
+ }
|
|
|
+ .el-select__placeholder {
|
|
|
+ position: static;
|
|
|
+ transform: none;
|
|
|
+ width: fit-content;
|
|
|
+ color: rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+ .el-select__caret {
|
|
|
+ color: rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .task-top {
|
|
|
+ padding: 10px 12px 0 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .task-content-loading {
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 8px;
|
|
|
+ position: absolute;
|
|
|
+ top: 60px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .task-content {
|
|
|
+ min-height: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-data {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6f7274;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+ .task-list {
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ padding: 12px 12px 8px 12px;
|
|
|
+ }
|
|
|
+ .list-filter {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ .filter-item {
|
|
|
+ padding: 0 12px;
|
|
|
+ height: 28px;
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 28px;
|
|
|
+ border-radius: 20px;
|
|
|
+ &.active {
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .task-item {
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 0.3px solid rgba(0, 0, 0, 0.2);
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .task-item + .task-item {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-text-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
|
|
|
+ .left-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .left-img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 6px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-text {
|
|
|
+ padding-left: 8px;
|
|
|
+ .farm-info {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1d2129;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .info-tag-wrap {
|
|
|
+ margin-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ .tag-item {
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 0 8px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ &.second {
|
|
|
+ color: #ff953d;
|
|
|
+ background: rgba(255, 149, 61, 0.1);
|
|
|
+ }
|
|
|
+ &.primary {
|
|
|
+ color: #2199f8;
|
|
|
+ background: #e8f3ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .farm-addr {
|
|
|
+ padding-top: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #86909c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: #2199f8;
|
|
|
+ font-size: 12px;
|
|
|
+ flex: none;
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .click-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 2px;
|
|
|
+ }
|
|
|
+ .follow-text {
|
|
|
+ color: #d0d0d0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-bottom {
|
|
|
+ padding-top: 10px;
|
|
|
+ .bottom-tag {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ .tag-card {
|
|
|
+ flex: 1;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 0.4px solid rgba(215, 215, 215, 0.5);
|
|
|
+ .card-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ .card-main-text {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #202020;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+ .card-sub-text {
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(32, 32, 32, 0.4);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ .card-icon {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border: 0.5px solid #2199f8;
|
|
|
+ .card-content {
|
|
|
+ .card-main-text {
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
+ .card-sub-text {
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .timeline {
|
|
|
+ padding-top: 10px;
|
|
|
+ .timeline-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 22px;
|
|
|
+ & + .timeline-item {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .timeline-left {
|
|
|
+ width: 22px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .dot {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #A2D5FD;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ border-left: 1px dashed #A2D5FD;
|
|
|
+ margin-top: 4px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .timeline-right {
|
|
|
+ padding-left: 5px;
|
|
|
+ flex: 1;
|
|
|
+ .date {
|
|
|
+ color: #1D2129;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #d7d7d7;
|
|
|
+ .price {
|
|
|
+ padding-left: 4px;
|
|
|
+ }
|
|
|
+ .action-detail {
|
|
|
+ padding-left: 6px;
|
|
|
+ color: #2199F8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .work-name {
|
|
|
+ padding-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .timeline-action {
|
|
|
+ align-self: center;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ flex: none;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ color: #2199F8;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0px 11px;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-footer {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-top: 11px;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ .footer-l {
|
|
|
+ color: #8b8b8b;
|
|
|
+ font-size: 12px;
|
|
|
+ &.primary-btn {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ padding: 0 12px;
|
|
|
+ height: 32px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 20px;
|
|
|
+ color: #2199f8;
|
|
|
+ .share-icon {
|
|
|
+ width: 12px;
|
|
|
+ padding-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.farm-name-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6f7274;
|
|
|
+ .name-text {
|
|
|
+ padding-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-r {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .btn {
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ padding: 0 12px;
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.second {
|
|
|
+ // border: 1px solid #8B8B8B;
|
|
|
+ // color: #8B8B8B;
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ }
|
|
|
+ &.primary {
|
|
|
+ background: #2199f8;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .btn-icon {
|
|
|
+ padding-right: 4px;
|
|
|
+ }
|
|
|
+ &.warning {
|
|
|
+ color: #ff953d;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ff953d;
|
|
|
+ }
|
|
|
+ &.secondary-text {
|
|
|
+ color: #2199f8;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn + .btn {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.task-tips-popup {
|
|
|
+ width: 75%;
|
|
|
+ padding: 28px 28px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .create-farm-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .farm-check-icon {
|
|
|
+ width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .create-farm-text {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ text-align: center;
|
|
|
+ &.success-text {
|
|
|
+ font-size: 23px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-text {
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
+ .create-farm-btn {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 25px;
|
|
|
+ font-size: 16px;
|
|
|
+ background: #2199f8;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|