feat：添加自定义地图页面布局

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

@@ -1,7 +1,166 @@
 <template>
-  <div>自定义小地图</div>
+  <div class="page">
+    <div class="flex pt-10">
+      <div class="flex items-center ml-20">
+        <span>场景：</span>
+        <el-tree-select
+          v-model="selectedShop"
+          :data="shopList"
+          :render-after-expand="false"
+          placeholder="请选择场景"
+        />
+      </div>
+      <div class="flex ml-20 items-center">
+        <span>上传图片：</span>
+        <el-upload
+          class="avatar-uploader flex justify-center items-center"
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img v-if="bgImgUrl" :src="bgImgUrl" alt="" />
+          <div v-else class="flex flex-col justify-center items-center">
+            <el-icon size="30" color="#c0c4cc"><Plus /></el-icon>
+            <span>上传背景图片</span>
+          </div>
+        </el-upload>
+      </div>
+    </div>
+    <div class="paint-tool mt-10 flex">
+      <div class="camera-list">
+        <span class="label-text flex">相机列表：</span>
+        <div v-for="item in cameraList" :key="item.id" class="camera-item flex justify-start">
+          <span class="camera-id">{{ item.id }}</span>
+          <span>{{ item.workStation }}</span>
+        </div>
+      </div>
+      <div class="draw-container"></div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Plus } from '@element-plus/icons-vue';
+  import useMiniMap from './use-mini-map';
+  import { storeToRefs } from 'pinia';
 
-<style scoped></style>
+  const miniMap = useMiniMap();
+  const { selectedShop, bgImgUrl } = storeToRefs(miniMap);
+
+  const shopList = [
+    {
+      value: '1',
+      label: 'Level one 1',
+      children: [
+        {
+          value: '1-1',
+          label: 'Level two 1-1',
+          children: [
+            {
+              value: '1-1-1',
+              label: 'Level three 1-1-1',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: '2',
+      label: 'Level one 2',
+      children: [
+        {
+          value: '2-1',
+          label: 'Level two 2-1',
+          children: [
+            {
+              value: '2-1-1',
+              label: 'Level three 2-1-1',
+            },
+          ],
+        },
+        {
+          value: '2-2',
+          label: 'Level two 2-2',
+          children: [
+            {
+              value: '2-2-1',
+              label: 'Level three 2-2-1',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const cameraList = [
+    { id: 'ARJ-200-001', workStation: '200工位' },
+    { id: 'ARJ-200-002', workStation: '200工位' },
+    { id: 'ARJ-200-003', workStation: '200工位' },
+    { id: 'ARJ-200-004', workStation: '200工位' },
+    { id: 'ARJ-213-001', workStation: '213工位' },
+    { id: 'ARJ-213-002', workStation: '213工位' },
+  ];
+
+  const beforeAvatarUpload = (rawFile) => {
+    console.log('图片信息', rawFile);
+    const render = new FileReader();
+    render.onload = (e) => {
+      const img = document.createElement('img');
+      bgImgUrl.value = img.src = e.target?.result as string;
+      img.onload = () => {
+        console.log('width====', img.width);
+        console.log('height====', img.height);
+      };
+    };
+    render.readAsDataURL(rawFile);
+  };
+
+  const handleAvatarSuccess = () => {};
+</script>
+
+<style scoped>
+  .page {
+    margin: 10px 0;
+    padding-bottom: 10px;
+    background-color: #ffffff;
+  }
+
+  .avatar-uploader {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #c0c4cc;
+  }
+
+  .paint-tool {
+    height: calc(100vh - 248px - 5rem);
+    margin: 0 10px;
+    border: 1px solid #c0c4cc;
+  }
+
+  .camera-list {
+    width: 250px;
+    border-right: 1px solid #c0c4cc;
+  }
+  .label-text {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 10px 0 20px 10px;
+  }
+  .camera-item {
+    padding: 10px 0 10px 10px;
+    margin: 0 8px 1px 8px;
+    border: 1px solid #c0c4cc;
+  }
+  .camera-id {
+    width: 130px;
+  }
+
+  .draw-container {
+    width: calc(100% - 300px);
+  }
+
+  :deep(.avatar-uploader .el-upload) {
+  }
+</style>

src/views/map-config/mini-map/use-mini-map.ts

@@ -0,0 +1,11 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useMiniMap = defineStore('mini-map', () => {
+  const selectedShop = ref('');
+  const bgImgUrl = ref('');
+
+  return { selectedShop, bgImgUrl };
+});
+
+export default useMiniMap;