单相机不传背景图功能fix

src/views/map-config/mini-map/MiniMapConfig.vue

@@ -16,6 +16,22 @@
             @change="changeShop"
           />
         </div>
+        <div v-if="shopCameraList.length === 1" class="upload-option">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            content="选择'是'则表示需要上传背景图片；选择'否'则表示无需上传背景图片，直接点击保存为布局即可"
+            placement="top"
+          >
+            <div class="upload-title">上传背景图片</div>
+          </el-tooltip>
+          <div class="my-2 flex items-center text-sm">
+            <el-radio-group v-model="isUploadBg" @change="changeUploadBg" class="ml-4">
+              <el-radio :label="true">是</el-radio>
+              <el-radio :label="false">否</el-radio>
+            </el-radio-group>
+          </div></div
+        >
         <div class="flex">
           <el-upload
             class="avatar-uploader flex justify-center items-center"
@@ -79,7 +95,11 @@
           </div>
         </el-scrollbar>
       </div>
-      <div ref="drawContainer" class="draw-container">
+      <div
+        ref="drawContainer"
+        v-show="isUploadBg || shopCameraList.length !== 1"
+        class="draw-container"
+      >
         <KonvaMap
           ref="konvaMap"
           @change-default-camera="changeDefault"
@@ -101,6 +121,9 @@
           <img src="~@/assets/images/img-upload.png" />
         </el-upload>
       </div>
+      <div v-show="!isUploadBg && shopCameraList.length === 1" class="camera-one-tip"
+        >仅此一个相机，无需添加背景图片</div
+      >
     </div>
   </div>
 </template>
@@ -130,6 +153,17 @@
   // 是否已有背景图
   const hasBg = ref(false);
 
+  //单个相机时是否上传图片
+  const isUploadBg = ref<boolean>(true);
+  const isMap = ref(false);
+
+  const changeUploadBg = () => {
+    if (isUploadBg.value && !isMap.value) {
+      konvaMap.value.resetMap();
+      hasBg.value = false;
+    }
+  };
+
   const handleBeforeUpload = () => {
     if (!selectedShopCode.value) {
       ElMessage.error({
@@ -173,7 +207,14 @@
         return;
       }
       hasBg.value = true;
-      konvaMap.value.createMap(res);
+      isMap.value = res.isUploadBg;
+      if (res.isUploadBg) {
+        isUploadBg.value = true;
+        konvaMap.value.createMap(res);
+      } else {
+        hasBg.value = false;
+        isUploadBg.value = res.isUploadBg;
+      }
     });
   };
 
@@ -205,13 +246,26 @@
   };
 
   const handleSave = () => {
-    const layout = konvaMap.value.saveLayout();
-    updateMinMapViewLayoutApi({ layout, targetId: String(selectedShopDetail.value?.id) }).then(
-      (res) => {
+    if (shopCameraList.value.length === 1 && !isUploadBg.value) {
+      isMap.value = false;
+      const layout = JSON.stringify({ isUploadBg: isUploadBg.value });
+      updateMinMapViewLayoutApi({ layout, targetId: String(selectedShopDetail.value?.id) }).then(
+        (res) => {
+          console.log('updateMinMapViewLayoutApi', res);
+          ElMessage.success('保存成功');
+        },
+      );
+    } else {
+      isMap.value = true;
+      const layout = konvaMap.value.saveLayout();
+      updateMinMapViewLayoutApi({
+        layout: JSON.stringify({ ...JSON.parse(layout), isUploadBg: true }),
+        targetId: String(selectedShopDetail.value?.id),
+      }).then((res) => {
         console.log('updateMinMapViewLayoutApi', res);
         ElMessage.success('保存成功');
-      },
-    );
+      });
+    }
   };
 </script>
 
@@ -230,10 +284,19 @@
     color: #3f3f3f;
   }
 
+  .upload-option {
+    display: flex;
+  }
+  .upload-title {
+    margin-top: 13px;
+  }
+
+  .camera-one-tip {
+    color: rgb(197, 97, 20);
+    font-size: 30px;
+    margin: 200px auto;
+  }
   .avatar-uploader {
-    /* width: 120px; */
-    /* height: 30px; */
-    /* border: 1px solid #eee; */
     border-radius: 4px;
     margin-left: 30px;
   }