|
@@ -70,11 +70,17 @@
|
|
|
</photo-provider>
|
|
</photo-provider>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="guide-card__upload" @click="handleUploadClick">
|
|
|
|
|
- <el-icon>
|
|
|
|
|
- <Plus />
|
|
|
|
|
- </el-icon>
|
|
|
|
|
- <span>{{ t("agriFile.uploadPhoto") }}</span>
|
|
|
|
|
|
|
+ <div class="guide-card__upload-wrap">
|
|
|
|
|
+ <div v-if="uploadGuideVisible" class="upload-guide-bubble">
|
|
|
|
|
+ <div class="upload-guide-bubble__content">上传照片,构建巡园档案</div>
|
|
|
|
|
+ <span class="upload-guide-bubble__arrow"></span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="guide-card__upload" @click="handleUploadClick">
|
|
|
|
|
+ <el-icon>
|
|
|
|
|
+ <Plus />
|
|
|
|
|
+ </el-icon>
|
|
|
|
|
+ <span>{{ t("agriFile.uploadPhoto") }}</span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
<album-upload-popup v-model:show="showUploadPopup" @confirm="handleUploadConfirm" />
|
|
<album-upload-popup v-model:show="showUploadPopup" @confirm="handleUploadConfirm" />
|
|
|
<tip-popup
|
|
<tip-popup
|
|
@@ -95,7 +101,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { computed, nextTick, onActivated, ref } from "vue";
|
|
|
|
|
|
|
+import { computed, nextTick, onActivated, onBeforeUnmount, onMounted, ref } from "vue";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
import { Icon } from "vant";
|
|
import { Icon } from "vant";
|
|
|
import { ElMessage } from "element-plus";
|
|
import { ElMessage } from "element-plus";
|
|
@@ -113,6 +119,8 @@ const router = useRouter();
|
|
|
|
|
|
|
|
// ---------- 常量 ----------
|
|
// ---------- 常量 ----------
|
|
|
const DEFAULT_GUIDE_IMAGE = require("@/assets/img/agricultural/patrol-guide.png");
|
|
const DEFAULT_GUIDE_IMAGE = require("@/assets/img/agricultural/patrol-guide.png");
|
|
|
|
|
+/** 首次进入上传引导,只展示一次 */
|
|
|
|
|
+const UPLOAD_GUIDE_STORAGE_KEY = "GROWTH_TRACK_UPLOAD_GUIDE";
|
|
|
|
|
|
|
|
// ---------- 页面状态 ----------
|
|
// ---------- 页面状态 ----------
|
|
|
const interactTasks = ref([]);
|
|
const interactTasks = ref([]);
|
|
@@ -122,6 +130,7 @@ const showUploadPopup = ref(false);
|
|
|
const showSuccessPopup = ref(false);
|
|
const showSuccessPopup = ref(false);
|
|
|
const showLeavePopup = ref(false);
|
|
const showLeavePopup = ref(false);
|
|
|
const needDraw = ref(true); // status≠1 时需先勾画种植范围
|
|
const needDraw = ref(true); // status≠1 时需先勾画种植范围
|
|
|
|
|
+const uploadGuideVisible = ref(false);
|
|
|
|
|
|
|
|
// ---------- 计算属性 ----------
|
|
// ---------- 计算属性 ----------
|
|
|
const pageTitle = computed(() => route.query.pageName || t("agriFile.patrolGrowthTitle"));
|
|
const pageTitle = computed(() => route.query.pageName || t("agriFile.patrolGrowthTitle"));
|
|
@@ -271,8 +280,27 @@ const handleSubmit = () => {
|
|
|
ElMessage.success(t("agriFile.submitSuccess"));
|
|
ElMessage.success(t("agriFile.submitSuccess"));
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+const dismissUploadGuide = () => {
|
|
|
|
|
+ if (!uploadGuideVisible.value) return;
|
|
|
|
|
+ uploadGuideVisible.value = false;
|
|
|
|
|
+ localStorage.setItem(UPLOAD_GUIDE_STORAGE_KEY, "1");
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const tryShowUploadGuide = () => {
|
|
|
|
|
+ if (localStorage.getItem(UPLOAD_GUIDE_STORAGE_KEY)) return;
|
|
|
|
|
+ uploadGuideVisible.value = true;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleOutsideUploadGuideClick = (event) => {
|
|
|
|
|
+ if (!uploadGuideVisible.value) return;
|
|
|
|
|
+ const target = event.target;
|
|
|
|
|
+ if (target?.closest?.(".guide-card__upload-wrap")) return;
|
|
|
|
|
+ dismissUploadGuide();
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
/** 需勾画则先画范围;否则直接上传 */
|
|
/** 需勾画则先画范围;否则直接上传 */
|
|
|
const handleUploadClick = () => {
|
|
const handleUploadClick = () => {
|
|
|
|
|
+ dismissUploadGuide();
|
|
|
if (needDraw.value) {
|
|
if (needDraw.value) {
|
|
|
router.push({
|
|
router.push({
|
|
|
path: "/add_zone",
|
|
path: "/add_zone",
|
|
@@ -330,7 +358,17 @@ const confirmLeave = () => {
|
|
|
router.back();
|
|
router.back();
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ tryShowUploadGuide();
|
|
|
|
|
+ document.addEventListener("click", handleOutsideUploadGuideClick, true);
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+onBeforeUnmount(() => {
|
|
|
|
|
+ document.removeEventListener("click", handleOutsideUploadGuideClick, true);
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
onActivated(() => {
|
|
onActivated(() => {
|
|
|
|
|
+ tryShowUploadGuide();
|
|
|
fetchZoneRangeStatus();
|
|
fetchZoneRangeStatus();
|
|
|
fetchInternalInteractTasks();
|
|
fetchInternalInteractTasks();
|
|
|
if (route.query.showUpload !== "1") return;
|
|
if (route.query.showUpload !== "1") return;
|
|
@@ -549,11 +587,46 @@ onActivated(() => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .guide-card__upload {
|
|
|
|
|
|
|
+ .guide-card__upload-wrap {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
right: 7px;
|
|
right: 7px;
|
|
|
bottom: 94px;
|
|
bottom: 94px;
|
|
|
z-index: 10;
|
|
z-index: 10;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-guide-bubble {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: calc(100% + 10px);
|
|
|
|
|
+ width: max-content;
|
|
|
|
|
+ max-width: 200px;
|
|
|
|
|
+ padding: 8px 12px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+
|
|
|
|
|
+ &__content {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ line-height: 20px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &__arrow {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 22px;
|
|
|
|
|
+ bottom: -5px;
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ height: 0;
|
|
|
|
|
+ border-left: 6px solid transparent;
|
|
|
|
|
+ border-right: 6px solid transparent;
|
|
|
|
|
+ border-top: 6px solid rgba(0, 0, 0, 0.8);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .guide-card__upload {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|