实时标绘调整 导入图层

src/types/auto-imports.d.ts

@@ -312,6 +312,10 @@ declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElLoading: UnwrapRef<typeof import('element-plus/es')['ElLoading']>
+    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
+    readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
+    readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>

src/views/globalMap/RightMenu/OnlinePlotting/CollaborativeUser.vue

@@ -2,17 +2,17 @@
   <Dialog custom-show title="协同用户" type="sm" hide-footer @close="handleClose">
     <div class="common-table">
       <div class="table-header">
-        <div class="td">
-          <el-checkbox v-model="allChecked" @change="allCheckedChange" />
-        </div>
+<!--        <div class="td">-->
+<!--          <el-checkbox v-model="allChecked" @change="allCheckedChange" />-->
+<!--        </div>-->
         <div class="td">协同用户</div>
         <div class="td">单位</div>
         <div class="td">操作</div>
       </div>
       <div v-for="(item, index) in dataList" :key="index" class="tr">
-        <div class="td">
-          <el-checkbox v-model="item.checked" />
-        </div>
+<!--        <div class="td">-->
+<!--          <el-checkbox v-model="item.checked" />-->
+<!--        </div>-->
         <div class="td">{{ item.nick_name }}</div>
         <div class="td">{{ item.dept_name }}</div>
         <div class="td">
@@ -55,7 +55,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .btn1 {
-  color: #38538d;
+  color: #5983df;
   cursor: pointer;
 }
 </style>

src/views/globalMap/RightMenu/OnlinePlotting/ImportLayer.vue

@@ -1,5 +1,59 @@
 <template>
-  <Dialog custom-show title="导入图层" type="xs" hide-footer @close="handleClose">
+  <Dialog custom-show title="导入图层" type="sm" height="450px" hide-footer @close="handleClose">
+    <div class="box1">
+      <div :class="activeIndex === '0' ? 'btn1' : 'btn2'" @click="handleClick('0')">
+        <i class="icon1" />
+        <div class="text1">我的图层</div>
+      </div>
+      <div :class="activeIndex === '1' ? 'btn1' : 'btn2'" style="margin-left: 20px" @click="handleClick('1')">
+        <i class="icon2" />
+        <div class="text1">协同用户</div>
+      </div>
+    </div>
+    <div v-show="activeIndex === '0'" class="box2">
+      <div class="common-table">
+        <div class="table-header">
+          <!--          <div class="checked-td">-->
+          <!--            <el-checkbox v-model="allChecked1" @change="allCheckedChange1" />-->
+          <!--          </div>-->
+          <div class="td">图层</div>
+          <div class="td">操作</div>
+        </div>
+        <div v-for="(item, index) in dataList1" :key="index" class="tr">
+          <!--          <div class="checked-td">-->
+          <!--            <el-checkbox v-model="item.checked" @change="checkedChange1" />-->
+          <!--          </div>-->
+          <div class="td">{{ item.name }}</div>
+          <div class="td operate">
+            <div class="btn-text">导入显示</div>
+            <div class="line">|</div>
+            <div class="btn-text">导入本地</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-show="activeIndex === '1'" class="box2">
+      <div class="common-table">
+        <div class="table-header">
+          <!--          <div class="td">-->
+          <!--            <el-checkbox v-model="allChecked2" @change="allCheckedChange2" />-->
+          <!--          </div>-->
+          <div class="td">图层</div>
+          <div class="td">操作</div>
+        </div>
+        <div v-for="(item, index) in dataList2" :key="index" class="tr">
+          <!--          <div class="checked-td">-->
+          <!--            <el-checkbox v-model="item.checked" @change="checkedChange1" />-->
+          <!--          </div>-->
+          <div class="td">{{ item.name }}</div>
+          <div class="td operate">
+            <div class="btn-text">导入显示</div>
+            <div class="line">|</div>
+            <div class="btn-text">导入本地</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </Dialog>
 </template>
 
@@ -8,10 +62,130 @@ const props = defineProps({
   modelValue: Boolean
 });
 const emits = defineEmits(['update:modelValue']);
-
+let activeIndex = ref('0');
+let allChecked1 = ref(false);
+let allChecked2 = ref(false);
+let dataList1 = ref([]);
+let dataList2 = ref([]);
+const handleClick = (index) => {
+  activeIndex.value = index;
+};
+watch(
+  activeIndex,
+  () => {
+    if (activeIndex.value === '0') {
+      dataList1.value = [
+        {
+          name: '物资库图层',
+          id: '1',
+          content: [
+            {
+              'type': 'marker',
+              'anchor': 'bottom-center',
+              'title': '物资库',
+              'size': [48, 32],
+              'id': 'wN-MYl8jDZC2tNXmyAyLL',
+              'lnglat': [110.765122, 21.860157],
+              'latitude': 21.860157,
+              'longitude': 110.765122
+            },
+            {
+              'type': 'marker',
+              'anchor': 'bottom-center',
+              'title': '物资库',
+              'size': [48, 32],
+              'id': 'KE3eQguQaq4GVh-Yv_MgC',
+              'lnglat': [111.052442, 21.909705],
+              'latitude': 21.909705,
+              'longitude': 111.052442
+            }
+          ]
+        },
+        { name: '无人机图层', id: '2' },
+        { name: '火点图层', id: '3' }
+      ];
+    } else {
+      dataList2.value = [
+        { name: '火场图层', id: '4' },
+        { name: '车辆图层', id: '5' }
+      ];
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+);
+const allCheckedChange = () => {
+  dataList1.value.forEach((item) => {
+    item.checked = allChecked1.value;
+  });
+};
+const allCheckedChange2 = () => {
+  dataList2.value.forEach((item) => {
+    item.checked = allChecked2.value;
+  });
+};
 const handleClose = () => {
   emits('update:modelValue', false);
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.box1 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  .btn1 {
+    width: 104px;
+    height: 29px;
+    background: url('@/assets/images/map/rightMenu/btn.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .btn2 {
+    width: 104px;
+    height: 28px;
+    background: url('@/assets/images/map/rightMenu/btn2.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .btn1,
+  .btn2 {
+    display: flex;
+    align-items: center;
+    padding: 0 6px;
+    cursor: pointer;
+    .icon1 {
+      width: 16px;
+      height: 15px;
+      background: url('@/assets/images/map/rightMenu/onlinePlotting/layers.png') no-repeat;
+      background-size: 100%100%;
+      margin-right: 5px;
+    }
+    .icon2 {
+      width: 16px;
+      height: 17px;
+      background: url('@/assets/images/map/rightMenu/onlinePlotting/user.png') no-repeat;
+      background-size: 100%100%;
+      margin-right: 5px;
+    }
+  }
+}
+.common-table {
+  .checked-td {
+  }
+  .btn-text {
+    color: #5983df;
+    cursor: pointer;
+  }
+  .line {
+    color: #5983df;
+    margin: 0 6px;
+  }
+  .operate {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+}
+</style>

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -38,9 +38,21 @@
             保存
           </div>
         </div>
-        <div class="btn">
-          <div class="setting-icon"></div>
-          设置
+        <div class="box-item">
+          <div class="btn">
+            <i class="template-icon" />
+            模板导入
+          </div>
+          <div class="line2"></div>
+          <div class="btn">
+            <i class="categoryImport-icon" />
+            分类导入
+          </div>
+          <div class="line2"></div>
+          <div class="btn">
+            <i class="setting-icon" />
+            设置
+          </div>
         </div>
       </div>
       <div class="tab-content">
@@ -239,83 +251,83 @@ const menu = ref([
         name: '火点',
         value: 'firePoint',
         children: [
-          { name: '起火点', value: 'marker', image: getImageUrl('firePoint'), icon: getImageUrl('firePoint'), size: [55, 29] },
-          { name: '烟点', value: 'marker', image: getImageUrl('smokePoint'), icon: getImageUrl('smokePoint'), size: [55, 29] },
-          { name: '已灭火点', value: 'marker', image: getImageUrl('extinguishedPoint'), icon: getImageUrl('extinguishedPoint'), size: [55, 29] }
+          { name: '起火点', value: 'marker', image: getImageUrl('firePoint'), icon: 'firePoint', size: [55, 29] },
+          { name: '烟点', value: 'marker', image: getImageUrl('smokePoint'), icon: 'smokePoint', size: [55, 29] },
+          { name: '已灭火点', value: 'marker', image: getImageUrl('extinguishedPoint'), icon: 'extinguishedPoint', size: [55, 29] }
         ]
       },
       {
         name: '火线',
         value: 'firewire',
         children: [
-          { name: '火线', value: 'marker', image: getImageUrl('firewire'), icon: getImageUrl('firewire'), size: [55, 29] },
-          { name: '受控火线', value: 'marker', image: getImageUrl('controlledfireline'), icon: getImageUrl('controlledfireline'), size: [55, 29] },
-          { name: '已灭火线', value: 'marker', image: getImageUrl('extinguishedline'), icon: getImageUrl('extinguishedline'), size: [55, 29] },
-          { name: '强火线', value: 'marker', image: getImageUrl('StrongFrontline'), icon: getImageUrl('StrongFrontline'), size: [55, 29] },
-          { name: '中火线', value: 'marker', image: getImageUrl('ZhongxianLine'), icon: getImageUrl('ZhongxianLine'), size: [55, 29] },
-          { name: '弱火线', value: 'marker', image: getImageUrl('WeakFrontline'), icon: getImageUrl('WeakFrontline'), size: [55, 29] }
+          { name: '火线', value: 'marker', image: getImageUrl('firewire'), icon: 'firewire', size: [55, 29] },
+          { name: '受控火线', value: 'marker', image: getImageUrl('controlledfireline'), icon: 'controlledfireline', size: [55, 29] },
+          { name: '已灭火线', value: 'marker', image: getImageUrl('extinguishedline'), icon: 'extinguishedline', size: [55, 29] },
+          { name: '强火线', value: 'marker', image: getImageUrl('StrongFrontline'), icon: 'StrongFrontline', size: [55, 29] },
+          { name: '中火线', value: 'marker', image: getImageUrl('ZhongxianLine'), icon: 'ZhongxianLine', size: [55, 29] },
+          { name: '弱火线', value: 'marker', image: getImageUrl('WeakFrontline'), icon: 'WeakFrontline', size: [55, 29] }
         ]
       },
       {
         name: '火场',
         value: 'fireGround',
         children: [
-          { name: '火场', value: 'marker', image: getImageUrl('fireground'), icon: getImageUrl('fireground'), size: [55, 29] },
-          { name: '受控火场', value: 'marker', image: getImageUrl('controlledfireground'), icon: getImageUrl('controlledfireground'), size: [55, 29] },
-          { name: '已灭火场', value: 'marker', image: getImageUrl('extinguishedfireground'), icon: getImageUrl('extinguishedfireground'), size: [55, 29] }
+          { name: '火场', value: 'marker', image: getImageUrl('fireground'), icon: 'fireground', size: [55, 29] },
+          { name: '受控火场', value: 'marker', image: getImageUrl('controlledfireground'), icon: 'controlledfireground', size: [55, 29] },
+          { name: '已灭火场', value: 'marker', image: getImageUrl('extinguishedfireground'), icon: 'extinguishedfireground', size: [55, 29] }
         ]
       },
       {
         name: '箭头',
         value: 'arrow',
         children: [
-          { name: '曲箭头', value: 'marker', image: getImageUrl('curvedarrow'), icon: getImageUrl('curvedarrow'), size: [55, 29] },
-          { name: '直箭头', value: 'marker', image: getImageUrl('straightarrow1'), icon: getImageUrl('straightarrow1'), size: [55, 29] },
-          { name: '细箭头', value: 'marker', image: getImageUrl('thinarrow'), icon: getImageUrl('thinarrow'), size: [55, 29] }
+          { name: '曲箭头', value: 'marker', image: getImageUrl('curvedarrow'), icon: 'curvedarrow', size: [55, 29] },
+          { name: '直箭头', value: 'marker', image: getImageUrl('straightarrow1'), icon: 'straightarrow1', size: [55, 29] },
+          { name: '细箭头', value: 'marker', image: getImageUrl('thinarrow'), icon: 'thinarrow', size: [55, 29] }
         ]
       },
       // {
       //   name: '导航',
       //   value: 'navigation',
       //   children: [
-      //     { name: '导航', value: 'marker', image: getImageUrl('navigation'), icon: getImageUrl('navigation'), size: [55, 29] }
+      //     { name: '导航', value: 'marker', image: getImageUrl('navigation'), icon: 'navigation', size: [55, 29] }
       //   ]
       // },
       {
         name: '扑救队伍',
         value: 'firefightingTeam',
         children: [
-          { name: '指挥中心', value: 'marker', image: getImageUrl('commandcentre'), icon: getImageUrl('commandcentre'), size: [55, 29] },
-          { name: '分指中心', value: 'marker', image: getImageUrl('dividingcenter'), icon: getImageUrl('dividingcenter'), size: [55, 29] },
-          { name: '集结地', value: 'marker', image: getImageUrl('rendezvous'), icon: getImageUrl('rendezvous'), size: [55, 29] },
-          { name: '军队', value: 'marker', image: getImageUrl('army'), icon: getImageUrl('army'), size: [55, 29] },
-          { name: '武警', value: 'marker', image: getImageUrl('armedpolice'), icon: getImageUrl('armedpolice'), size: [55, 29] },
-          { name: '森林警察', value: 'marker', image: getImageUrl('forestpoliceman'), icon: getImageUrl('forestpoliceman'), size: [55, 29] },
-          { name: '扑火队伍', value: 'marker', image: getImageUrl('firefightingteam'), icon: getImageUrl('firefightingteam'), size: [55, 29] },
-          // { name: '扑火队伍路线', value: 'marker', image: getImageUrl('Firefightingteamroute'), icon: getImageUrl('Firefightingteamroute'), size: [55, 29] }
+          { name: '指挥中心', value: 'marker', image: getImageUrl('commandcentre'), icon: 'commandcentre', size: [55, 29] },
+          { name: '分指中心', value: 'marker', image: getImageUrl('dividingcenter'), icon: 'dividingcenter', size: [55, 29] },
+          { name: '集结地', value: 'marker', image: getImageUrl('rendezvous'), icon: 'rendezvous', size: [55, 29] },
+          { name: '军队', value: 'marker', image: getImageUrl('army'), icon: 'army', size: [55, 29] },
+          { name: '武警', value: 'marker', image: getImageUrl('armedpolice'), icon: 'armedpolice', size: [55, 29] },
+          { name: '森林警察', value: 'marker', image: getImageUrl('forestpoliceman'), icon: 'forestpoliceman', size: [55, 29] },
+          { name: '扑火队伍', value: 'marker', image: getImageUrl('firefightingteam'), icon: 'firefightingteam', size: [55, 29] },
+          // { name: '扑火队伍路线', value: 'marker', image: getImageUrl('Firefightingteamroute'), icon: 'Firefightingteamroute', size: [55, 29] }
         ]
       },
       {
         name: '飞机车辆',
         value: 'aircraftVehicles',
         children: [
-          { name: '固定翼', value: 'marker', image: getImageUrl('fixedwing'), icon: getImageUrl('fixedwing'), size: [55, 29] },
-          { name: '直升机', value: 'marker', image: getImageUrl('helicopter'), icon: getImageUrl('helicopter'), size: [55, 29] },
-          { name: '无人机', value: 'marker', image: getImageUrl('UAV'), icon: getImageUrl('UAV'), size: [55, 29] },
-          { name: '指挥车', value: 'marker', image: getImageUrl('commandvehicle'), icon: getImageUrl('commandvehicle'), size: [55, 29] },
-          { name: '飞机航线设置', value: 'marker', image: getImageUrl('aircraftroutesetting'), icon: getImageUrl('aircraftroutesetting'), size: [55, 29] },
-          { name: '直升机航线设置', value: 'marker', image: getImageUrl('helicopterroutesetting'), icon: getImageUrl('helicopterroutesetting'), size: [55, 29] }
+          { name: '固定翼', value: 'marker', image: getImageUrl('fixedwing'), icon: 'fixedwing', size: [55, 29] },
+          { name: '直升机', value: 'marker', image: getImageUrl('helicopter'), icon: 'helicopter', size: [55, 29] },
+          { name: '无人机', value: 'marker', image: getImageUrl('UAV'), icon: 'UAV', size: [55, 29] },
+          { name: '指挥车', value: 'marker', image: getImageUrl('commandvehicle'), icon: 'commandvehicle', size: [55, 29] },
+          { name: '飞机航线设置', value: 'marker', image: getImageUrl('aircraftroutesetting'), icon: 'aircraftroutesetting', size: [55, 29] },
+          { name: '直升机航线设置', value: 'marker', image: getImageUrl('helicopterroutesetting'), icon: 'helicopterroutesetting', size: [55, 29] }
         ]
       },
       {
         name: '基础设置',
         value: 'basicSetting',
         children: [
-          { name: '航站', value: 'marker', image: getImageUrl('terminal'), icon: getImageUrl('terminal'), size: [55, 29] },
-          { name: '起降点', value: 'marker', image: getImageUrl('takeoffandlandingpoint'), icon: getImageUrl('takeoffandlandingpoint'), size: [55, 29] },
-          { name: '取水点', value: 'marker', image: getImageUrl('waterpoint'), icon: getImageUrl('waterpoint'), size: [55, 29] },
-          { name: '瞭望塔', value: 'marker', image: getImageUrl('watchtower'), icon: getImageUrl('watchtower'), size: [55, 29] },
-          { name: '物资库', value: 'marker', image: getImageUrl('materialwarehouse'), icon: getImageUrl('materialwarehouse'), size: [55, 29] },
+          { name: '航站', value: 'marker', image: getImageUrl('terminal'), icon: 'terminal', size: [55, 29] },
+          { name: '起降点', value: 'marker', image: getImageUrl('takeoffandlandingpoint'), icon: 'takeoffandlandingpoint', size: [55, 29] },
+          { name: '取水点', value: 'marker', image: getImageUrl('waterpoint'), icon: 'waterpoint', size: [55, 29] },
+          { name: '瞭望塔', value: 'marker', image: getImageUrl('watchtower'), icon: 'watchtower', size: [55, 29] },
+          { name: '物资库', value: 'marker', image: getImageUrl('materialwarehouse'), icon: 'materialwarehouse', size: [55, 29] },
 
         ]
       },
@@ -323,14 +335,14 @@ const menu = ref([
       //   name: '其他',
       //   value: 'other',
       //   children: [
-      //     { name: '危险区域', value: 'marker', image: getImageUrl('dangerousarea'), icon: getImageUrl('dangerousarea'), size: [55, 29] },
-      //     { name: '隔离带开采', value: 'marker', image: getImageUrl('Isolationzonemining'), icon: getImageUrl('Isolationzonemining'), size: [55, 29] },
-      //     { name: '应急庇护场所', value: 'marker', image: getImageUrl('emergencyshelter'), icon: getImageUrl('emergencyshelter'), size: [55, 29] },
-      //     { name: '风力风向', value: 'marker', image: getImageUrl('windspeedanddirection'), icon: getImageUrl('windspeedanddirection'), size: [55, 29] },
-      //     { name: '测距', value: 'marker', image: getImageUrl('ranging'), icon: getImageUrl('ranging'), size: [55, 29] },
-      //     { name: '大风', value: 'marker', image: getImageUrl('strongwind'), icon: getImageUrl('strongwind'), size: [55, 29] },
-      //     { name: '人工降雨', value: 'marker', image: getImageUrl('artificialrainfall'), icon: getImageUrl('artificialrainfall'), size: [55, 29] },
-      //     { name: '台风', value: 'marker', image: getImageUrl('typhoon'), icon: getImageUrl('typhoon'), size: [55, 29] }
+      //     { name: '危险区域', value: 'marker', image: getImageUrl('dangerousarea'), icon: 'dangerousarea', size: [55, 29] },
+      //     { name: '隔离带开采', value: 'marker', image: getImageUrl('Isolationzonemining'), icon: 'Isolationzonemining', size: [55, 29] },
+      //     { name: '应急庇护场所', value: 'marker', image: getImageUrl('emergencyshelter'), icon: 'emergencyshelter', size: [55, 29] },
+      //     { name: '风力风向', value: 'marker', image: getImageUrl('windspeedanddirection'), icon: 'windspeedanddirection', size: [55, 29] },
+      //     { name: '测距', value: 'marker', image: getImageUrl('ranging'), icon: 'ranging', size: [55, 29] },
+      //     { name: '大风', value: 'marker', image: getImageUrl('strongwind'), icon: 'strongwind', size: [55, 29] },
+      //     { name: '人工降雨', value: 'marker', image: getImageUrl('artificialrainfall'), icon: 'artificialrainfall', size: [55, 29] },
+      //     { name: '台风', value: 'marker', image: getImageUrl('typhoon'), icon: 'typhoon', size: [55, 29] }
       //   ]
       // }
     ]
@@ -408,7 +420,8 @@ const clickTab3 = (item, index) => {
         graphicsType: type,
         lineWidth: mouseToolState.value.lineWidth,
         color: mouseToolState.value.color,
-        icon: item.icon,
+        icon: getImageUrl(item.icon),
+        iconName: item.icon,
         size: item.size,
         title: item.name
       };
@@ -508,9 +521,9 @@ const initDrawMethod = (options) => {
       data.lnglat = [position.lng, position.lat];
       data.latitude = position.lat;
       data.longitude = position.lng;
-      data.image = data.icon;
-      data.image = data.icon;
-      data.imageHover = data.icon;
+      data.icon = data.iconName;
+      data.image = data.iconName;
+      data.imageHover = data.iconName;
     } else {
       const path = obj.getPath();
       // 将AMap.LngLat对象数组转换为经纬度数组
@@ -946,6 +959,20 @@ onMounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/setting.png') no-repeat;
     background-size: 100% 100%;
   }
+  .template-icon {
+    width: 24px;
+    height: 26px;
+    margin-right: 3px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/template.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .categoryImport-icon {
+    width: 24px;
+    height: 26px;
+    margin-right: 3px;
+    background: url('@/assets/images/map/rightMenu/onlinePlotting/categoryImport.png') no-repeat;
+    background-size: 100% 100%;
+  }
   .merge-icon {
     width: 26px;
     height: 26px;