feat(init): change icon

.env

@@ -1,2 +1,3 @@
 VITE_QJ_URL=https://test.4dkankan.com/panorama
-VITE_API=https://uat-sp.4dkankan.com/
+VITE_API=https://uat-sp.4dkankan.com/
+

.env.development

@@ -1,2 +1,2 @@
 VITE_QJ_URL=https://test.4dkankan.com/panorama
-VITE_API=https://uat-sp.4dkankan.com/
+VITE_API=https://uat-sp.4dkankan.com/

package.json

@@ -22,6 +22,7 @@
     "pinia": "^2.1.7",
     "proj4": "^2.11.0",
     "qrcode": "^1.5.3",
+    "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
     "xlsx": "^0.18.5"

src/assets/location.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+	<g id="location">
+		<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M12 23C12 23 21 17.0417 21 10.1667C21 5.10406 16.9706 1 12 1C7.02945 1 3 5.10406 3 10.1667C3 17.0417 12 23 12 23ZM12 14.7499C14.4852 14.7499 16.5 12.6979 16.5 10.1666C16.5 7.63528 14.4852 5.58325 12 5.58325C9.51467 5.58325 7.49995 7.63528 7.49995 10.1666C7.49995 12.6979 9.51467 14.7499 12 14.7499Z" />
+	</g>
+</svg>

src/assets/vector.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+	<g id="vector">
+		<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M2 22V2H22V22H2ZM17.1226 4.85714H14.0203L4.85714 14.0203V17.1226L17.1226 4.85714ZM4.85714 4.85714H9.97971L4.85714 9.97971V4.85714ZM14.0203 19.1429H19.1429V14.0203L14.0203 19.1429ZM9.97971 19.1429H6.87747L19.1429 6.87747V9.97971L9.97971 19.1429Z" />
+	</g>
+</svg>

src/view/map/map-board.vue

@@ -3,26 +3,18 @@
     <Teleport to=".header" v-if="isMounted">
       <div class="custom_bar">
         <div class="back_container">
-          <el-button :icon="Back" circle type="default" @click="router.back()" />
+          <el-button :icon="Back" circle type="primary" @click="router.back()" />
         </div>
         <div class="nav_container">
-          <div
-            class="nav_item"
-            :class="{ active: isCurrentTab(0) }"
-            @click="handleTabs(0)"
-          >
+          <div class="nav_item" :class="{ active: isCurrentTab(0) }" @click="handleTabs(0)">
             <el-icon size="20">
-              <LocationInformation />
+              <locationIcon />
             </el-icon>
             <span>坐标</span>
           </div>
-          <div
-            class="nav_item"
-            :class="{ active: isCurrentTab(1) }"
-            @click="handleTabs(1)"
-          >
+          <div class="nav_item" :class="{ active: isCurrentTab(1) }" @click="handleTabs(1)">
             <el-icon size="20">
-              <Grid />
+              <vectorIcon />
             </el-icon>
             <span>矢量图</span>
           </div>
@@ -31,58 +23,24 @@
     </Teleport>
     <div id="map" class="map-container" ref="mapContainer" @click.stop>
       <div class="map-component">
-        <el-select
-          v-model="tileType"
-          placeholder="选择底图"
-          style="width: 120px"
-          class="tile-type-select"
-        >
-          <el-option
-            v-for="item in tileOptions"
-            :key="item"
-            :label="item"
-            :value="item"
-          />
+        <el-select v-model="tileType" placeholder="选择底图" style="width: 120px" class="tile-type-select">
+          <el-option v-for="item in tileOptions" :key="item" :label="item" :value="item" />
         </el-select>
       </div>
 
       <div class="board" ref="boardContainer"></div>
     </div>
     <div class="right-control">
-      <MapRight
-        v-if="isCurrentTab(0)"
-        @fly-point="flyScenePoint"
-        @fly-scene="flyScene"
-        @goto-point="gotoPointPage"
-      />
-      <MapRightPoly
-        @del="handlePolysDel"
-        @edit="handlePolysEdit"
-        :data="boardData"
-        v-if="isCurrentTab(1)"
-      >
+      <MapRight v-if="isCurrentTab(0)" @fly-point="flyScenePoint" @fly-scene="flyScene" @goto-point="gotoPointPage" />
+      <MapRightPoly @del="handlePolysDel" @edit="handlePolysEdit" :data="boardData" v-if="isCurrentTab(1)">
       </MapRightPoly>
     </div>
 
     <Teleport to="body" v-if="isMounted">
       <!-- <el-button class="temp_btn" @click="clearPolys">后端全清</el-button> -->
-      <div
-        class="draw-global-icon"
-        v-if="isCurrentTab(1) && !isEditDrawingMode"
-        @click="handleBoardDraw"
-      >
-        <el-icon size="30">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1em"
-            height="1em"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="currentColor"
-              d="M2 4.621a.5.5 0 0 1 .854-.353l6.01 6.01c.126.126.17.31.15.487a2 2 0 1 0 1.751-1.751a.586.586 0 0 1-.487-.15l-6.01-6.01A.5.5 0 0 1 4.62 2H11a9 9 0 0 1 8.468 12.054l2.24 2.239a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.415 0l-2.239-2.239A9 9 0 0 1 2 11z"
-            />
-          </svg>
+      <div class="draw-global-icon" v-if="isCurrentTab(1) && !isEditDrawingMode" @click="handleBoardDraw">
+        <el-icon size="36">
+          <picpenIcon />
         </el-icon>
       </div>
     </Teleport>
@@ -99,6 +57,9 @@ import { onMounted, ref, watchEffect, watch, onUnmounted, computed } from "vue";
 import { createBoard, scenePosTransform } from "./board";
 import MapRightPoly from "./map-right-poly.vue";
 import { Back } from "@element-plus/icons-vue";
+import vectorIcon from '@/assets/vector.svg';
+import picpenIcon from '@/assets/pic_pen.svg';
+import locationIcon from '@/assets/location.svg';
 import {
   addOrUpdateDrawingFetch,
   getDrawingDetailFetch,
@@ -107,7 +68,7 @@ import {
   PolyDataType,
 } from "@/request/drawing.ts";
 // import { relicsPolyginsFetch } from "@/request";
-import { Grid, LocationInformation } from "@element-plus/icons-vue";
+// import { Grid, LocationInformation } from "@element-plus/icons-vue";
 
 import {
   mapManageInit,
@@ -350,7 +311,7 @@ const initPolyTabData = async () => {
         board.setData(boardData.value, String(relicsId.value));
       }
     }, 500);
-  } catch (error) {}
+  } catch (error) { }
 };
 
 const handlePolysDel = (id: string) => {
@@ -461,7 +422,7 @@ const handlePolysEdit = (item: PolyDataType) => {
   &.light {
     --color: #fff;
 
-    > div {
+    >div {
       text-shadow: 0 0 2px #000;
     }
   }
@@ -469,7 +430,7 @@ const handlePolysEdit = (item: PolyDataType) => {
   &.dark {
     --color: #000;
 
-    > div {
+    >div {
       text-shadow: 0 0 2px #fff;
     }
   }
@@ -523,10 +484,15 @@ const handlePolysEdit = (item: PolyDataType) => {
       }
 
       &.active {
+        .icon {
+          color: #409eff;
+        }
+
         color: #409eff;
         background-color: #ecf5ff;
         position: relative;
 
+
         &::before {
           content: "";
           height: 100%;

src/view/map/map-right-poly.vue

@@ -2,7 +2,7 @@
   <div class="right-layout">
     <div class="right-content">
       <div class="tree-layout">
-        <p>全部数据</p>
+        <p class="sub-title">全部数据</p>
         <div class="poly-list">
           <template v-if="data.polygons.length > 0" v-for="item in data.polygons">
             <div class="poly-list-item">
@@ -28,13 +28,8 @@
         </div>
       </div>
     </div>
-    <SingleInput
-      :visible="isShowPolyEditName"
-      @update:visible="isShowPolyEditName = false"
-      :value="currentPoly.name"
-      :update-value="updatePolyName"
-      title="修改边界名称"
-    />
+    <SingleInput :visible="isShowPolyEditName" @update:visible="isShowPolyEditName = false" :value="currentPoly.name"
+      :update-value="updatePolyName" title="修改边界名称" />
   </div>
 </template>
 
@@ -142,12 +137,18 @@ const handleDownload = async (item: any) => {
     color: #303133;
     font-size: 14px;
   }
+
+  .sub-title {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
 }
 
 .right-layout {
   display: flex;
   height: 100%;
   flex-direction: column;
+  font-size: 16px;
 
   .right-content {
     flex: 1;
@@ -165,7 +166,7 @@ const handleDownload = async (item: any) => {
   width: 100%;
   display: flex;
   flex-direction: column;
-  font-size: 14px;
+  font-size: 16px;
   user-select: none;
 
   .poly-list-item {

src/view/map/map-right.vue

@@ -17,7 +17,7 @@
         </el-form-item>
       </el-form>
       <div class="tree-layout">
-        <p>全部数据</p>
+        <p class="sub-title">全部数据</p>
         <el-tree style="max-width: 600px" :data="treeNode" :props="{ disabled: 'run' }" node-key="id" ref="treeRef"
           :show-checkbox="router.currentRoute.value.name === 'map'" default-expand-all :expand-on-click-node="false">
           <template #default="{ node, data }">
@@ -232,6 +232,7 @@ const handlerExport = (type: number, name: string) => {
   align-items: flex-start;
   justify-content: space-between;
 
+
   .title {
     flex: 1;
     overflow: hidden;
@@ -266,7 +267,11 @@ const handlerExport = (type: number, name: string) => {
 .tree-layout {
   p {
     color: #303133;
-    font-size: 14px;
+
+  }
+
+  .sub-title {
+    font-size: 16px;
   }
 }
 

src/view/scene-select.vue

@@ -90,17 +90,18 @@ const tableProps = {
 
 let time: NodeJS.Timeout;
 const checkedTable = () => {
+  console.log('checkedTable', tableProps.tableRef.value)
   if (tableProps.tableRef.value) {
     tableProps.tableRef.value!.clearSelection();
     console.log("1");
     scenes.value.forEach((item) => {
       tableProps.tableRef.value!.toggleRowSelection(item, true);
     });
-    clearTimeout(time);
-    time = setTimeout(() => {
-      loaded.value = true;
-    }, 100);
   }
+  clearTimeout(time);
+  time = setTimeout(() => {
+    loaded.value = true;
+  }, 100);
 };
 
 watch(tableProps.tableRef, checkedTable);

vite.config.ts

@@ -1,11 +1,13 @@
 import { defineConfig, loadEnv } from "vite";
 import { resolve } from "path";
 import vue from "@vitejs/plugin-vue";
+import svgLoader from 'vite-svg-loader'
+
 
 // https://vitejs.dev/config/
 export default ({ mode }) => defineConfig({
   base: "./",
-  plugins: [vue()],
+  plugins: [vue(), svgLoader()],
   resolve: {
     alias: [
       {
@@ -35,7 +37,6 @@ export default ({ mode }) => defineConfig({
       },
       "/api": {
         target: loadEnv(mode, process.cwd()).VITE_API,
-        // target: `http://192.168.0.11:8324/relics/`,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, "/api"),
       },
@@ -45,7 +46,7 @@ export default ({ mode }) => defineConfig({
       //   changeOrigin: true,
       //   rewrite: (path) => path.replace(/^\/api/, "/api"),
       // },
- 
+
     },
   },
 });