|
|
@@ -17,20 +17,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 展开状态内容 -->
|
|
|
- <div class="expanded-content" v-show="item.isConfirmed != null && item.expanded">
|
|
|
- <!-- 原因说明 -->
|
|
|
- <div class="reason-text">原因: {{ item.reason }}</div>
|
|
|
-
|
|
|
- <!-- 图片展示 -->
|
|
|
- <div class="uploaded-images" v-show="item.imagePaths.length > 0">
|
|
|
- <img class="uploaded-img" v-for="image in item.imagePaths" :key="image" :src="base_img_url2 + image"
|
|
|
- alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
<!-- 未上传状态内容 -->
|
|
|
- <div class="uploaded-content">
|
|
|
+ <div class="uploaded-content" v-show="item.isConfirmed == null || item.expanded">
|
|
|
<div class="content-wrapper">
|
|
|
<div class="item-desc">{{ item.reason }}</div>
|
|
|
<div class="example-wrapper">
|
|
|
@@ -46,7 +34,34 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <uploader class="upload-wrap" multiple :max-count="10" :after-read="afterReadUpload" v-show="item.isConfirmed == null">
|
|
|
+
|
|
|
+ <!-- 展开状态内容 -->
|
|
|
+ <div class="expanded-content"
|
|
|
+ v-show="item.isConfirmed != null && item.expanded && item.imagePaths.length > 0">
|
|
|
+ <!-- 原因说明 -->
|
|
|
+ <div class="reason-text">上传照片({{ item.exampleImagesJson.length }}张)</div>
|
|
|
+ <!-- 图片展示 -->
|
|
|
+ <div class="uploaded-images">
|
|
|
+ <img class="uploaded-img" v-for="image in item.imagePaths" :key="image"
|
|
|
+ :src="base_img_url2 + image" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="continue-upload-btn">
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
+ <span>继续上传照片</span>
|
|
|
+ </div> -->
|
|
|
+ <uploader class="upload-wrap continue-upload-btn" multiple :max-count="10" :after-read="afterReadUpload">
|
|
|
+ <div class="upload-btn">
|
|
|
+ <el-icon>
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ <span>继续上传照片</span>
|
|
|
+ </div>
|
|
|
+ </uploader>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 上传按钮 -->
|
|
|
+ <uploader class="upload-wrap" multiple :max-count="10" :after-read="afterReadUpload"
|
|
|
+ v-show="item.isConfirmed == null">
|
|
|
<div class="upload-btn">
|
|
|
<el-icon>
|
|
|
<Plus />
|
|
|
@@ -54,31 +69,37 @@
|
|
|
<span>点击上传照片</span>
|
|
|
</div>
|
|
|
</uploader>
|
|
|
- <!-- <div class="question-wrapper">
|
|
|
+
|
|
|
+ <div class="question-wrapper" v-show="item.isConfirmed != null">
|
|
|
<div class="question-text">
|
|
|
<span class="text-title">{{ item.phenologyName }}占比</span>
|
|
|
<el-input v-model="item.replyText" type="number" style="width: 80px" />
|
|
|
<span class="text-unit">%</span>
|
|
|
</div>
|
|
|
- <div class="draw-region-btn" @click="handleDrawRegion(item)">勾画发生区域</div>
|
|
|
- </div> -->
|
|
|
+ <div class="draw-region-btn" @click="handleDrawRegion(item)">查看发生区域</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 输入框 -->
|
|
|
<div class="input-wrapper">
|
|
|
<el-input v-model="item.remark" placeholder="请输入您咨询的问题" clearable />
|
|
|
</div>
|
|
|
|
|
|
<!-- 按钮区域 -->
|
|
|
- <div class="button-group">
|
|
|
+ <div class="button-group" v-show="item.isConfirmed == null">
|
|
|
<div class="btn-not-reached" @click="handleNotReached(item)">{{ item.cancelButtonName }}</div>
|
|
|
<div class="btn-confirm" @click="handleConfirm(item)">确认提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 比例信息(已上传状态显示) -->
|
|
|
- <div class="proportion-info" v-show="item.isConfirmed != null">
|
|
|
- <span class="proportion-text" v-if="item.replyText">当前果园{{ item.phenologyName }}占比: {{ item.replyText
|
|
|
+ <div class="proportion-info" :style="{ justifyContent: item.expanded ? 'center' : 'space-between' }"
|
|
|
+ v-show="item.isConfirmed != null">
|
|
|
+ <template v-if="!item.expanded">
|
|
|
+ <span class="proportion-text" v-if="item.replyText">当前果园{{ item.phenologyName }}占比: {{
|
|
|
+ item.replyText
|
|
|
}}%</span>
|
|
|
- <span class="proportion-text" v-else>暂无数据</span>
|
|
|
+ <span class="proportion-text" v-else>暂无数据</span>
|
|
|
+ </template>
|
|
|
<div class="toggle-btn" @click="toggleExpand(item)">
|
|
|
<span>{{ item.expanded ? "收起" : "展开" }}</span>
|
|
|
<el-icon :class="{ rotate: !item.expanded }">
|
|
|
@@ -91,15 +112,11 @@
|
|
|
<div class="empty-data" v-if="!loading && listData.length === 0">暂无数据</div>
|
|
|
</div>
|
|
|
<!-- 农场信息完善弹窗 -->
|
|
|
- <farm-info-popup :expertMiniUserId="query.expertMiniUserId" v-model:show="showFarmInfoPopup" />
|
|
|
+ <farm-info-popup :oldUser="oldUser" :expertMiniUserId="query.expertMiniUserId" v-model:show="showFarmInfoPopup" />
|
|
|
|
|
|
<!-- 示例照片轮播组件 -->
|
|
|
- <example-popup
|
|
|
- v-model:show="showExamplePopup"
|
|
|
- :images="exampleList"
|
|
|
- :start-index="exampleStartIndex"
|
|
|
- title="蒂蛀虫示例图"
|
|
|
- />
|
|
|
+ <example-popup v-model:show="showExamplePopup" :images="exampleList" :start-index="exampleStartIndex"
|
|
|
+ title="蒂蛀虫示例图" />
|
|
|
<!-- 照片上传进度 -->
|
|
|
<popup v-model:show="showUploadProgressPopup" round class="upload-progress-popup">
|
|
|
<div class="upload-progress-title">
|
|
|
@@ -168,7 +185,6 @@ const mapContainer = ref(null);
|
|
|
// 从 sessionStorage 中回显已勾画的区域
|
|
|
const renderRegionFromSession = () => {
|
|
|
const polygonStr = sessionStorage.getItem("drawRegionPolygonData");
|
|
|
- console.log("polygonStr", polygonStr);
|
|
|
if (!polygonStr) return;
|
|
|
try {
|
|
|
const polygonData = JSON.parse(polygonStr);
|
|
|
@@ -189,7 +205,7 @@ const miniUserId = localStorage.getItem("MINI_USER_ID");
|
|
|
const afterReadUpload = async (data) => {
|
|
|
initImgArr.value = [];
|
|
|
drawRegionMap.clearLayer && drawRegionMap.clearLayer();
|
|
|
- // sessionStorage.removeItem("drawRegionPolygonData");
|
|
|
+ sessionStorage.removeItem("drawRegionPolygonData");
|
|
|
if (!Array.isArray(data)) {
|
|
|
data = [data];
|
|
|
}
|
|
|
@@ -215,7 +231,18 @@ const afterReadUpload = async (data) => {
|
|
|
if (initImgArr.value.length > 0) {
|
|
|
showUploadProgressPopup.value = true;
|
|
|
setTimeout(() => {
|
|
|
- drawRegionMap.initMap("POINT (113.6142086995688 23.585836479509055)", mapContainer.value, false, false,false);
|
|
|
+ // 只在第一次时初始化地图,后续复用已有实例
|
|
|
+ if (!drawRegionMap.kmap) {
|
|
|
+ drawRegionMap.initMap(
|
|
|
+ "POINT (113.6142086995688 23.585836479509055)",
|
|
|
+ mapContainer.value,
|
|
|
+ false,
|
|
|
+ false,
|
|
|
+ false
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // 每次打开弹窗都尝试根据 sessionStorage 回显最新地块
|
|
|
+ renderRegionFromSession();
|
|
|
}, 100);
|
|
|
}
|
|
|
};
|
|
|
@@ -337,9 +364,9 @@ const toggleExpand = (item) => {
|
|
|
const handleDrawRegion = (item) => {
|
|
|
console.log("勾画发生区域", item);
|
|
|
const polygonData = sessionStorage.getItem("drawRegionPolygonData");
|
|
|
- if(polygonData){
|
|
|
+ if (polygonData) {
|
|
|
router.push(`/draw_region?polygonData=${polygonData}`);
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
router.push(`/draw_region`);
|
|
|
}
|
|
|
};
|
|
|
@@ -354,16 +381,20 @@ const openMorePopup = (images) => {
|
|
|
morePopupRef.value.openPopup();
|
|
|
}
|
|
|
|
|
|
+const oldUser = ref(false);
|
|
|
onMounted(() => {
|
|
|
// 初始化加载
|
|
|
getFarmList();
|
|
|
// 加载数据
|
|
|
loadData();
|
|
|
+ oldUser.value = query.value.oldUser && Boolean(query.value.oldUser);
|
|
|
+ if(oldUser.value){
|
|
|
+ showFarmInfoPopup.value = true;
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
// 页面从勾画页返回时,如果组件被 keep-alive 缓存,则会触发 onActivated,在此再做一次回显
|
|
|
onActivated(() => {
|
|
|
- console.log("onActivated");
|
|
|
renderRegionFromSession();
|
|
|
});
|
|
|
|
|
|
@@ -439,7 +470,7 @@ const getFarmList = async () => {
|
|
|
align-items: center;
|
|
|
|
|
|
.item-header {
|
|
|
- div{
|
|
|
+ div {
|
|
|
color: #2199f8;
|
|
|
background: rgba(33, 153, 248, 0.1);
|
|
|
}
|
|
|
@@ -448,17 +479,17 @@ const getFarmList = async () => {
|
|
|
}
|
|
|
|
|
|
.expanded-content {
|
|
|
- .reason-text {
|
|
|
- padding-top: 12px;
|
|
|
- color: #969696;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ border: 0.5px solid #2199F8;
|
|
|
+ margin-top: 12px;
|
|
|
|
|
|
.uploaded-images {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 8px;
|
|
|
- margin: 12px 0;
|
|
|
+ margin-top: 8px;
|
|
|
|
|
|
.uploaded-img {
|
|
|
width: calc((100vw - 68px) / 4);
|
|
|
@@ -467,6 +498,12 @@ const getFarmList = async () => {
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .continue-upload-btn {
|
|
|
+ border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.uploaded-content {
|
|
|
@@ -686,7 +723,8 @@ const getFarmList = async () => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 6px;
|
|
|
- .label-text{
|
|
|
+
|
|
|
+ .label-text {
|
|
|
width: 220px;
|
|
|
}
|
|
|
}
|