标绘 文字

src/assets/styles/index.scss

@@ -805,3 +805,12 @@ aside {
   top: 12px;
   left: 55px;
 }
+
+.amap-marker {
+  .amap-icon {
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

src/components/LineWidthSelect/index.vue

@@ -18,7 +18,7 @@ interface Props {
   options: object[];
 }
 const props = withDefaults(defineProps<Props>(), {});
-const emits = defineEmits('update:modelValue');
+const emits = defineEmits(['update:modelValue']);
 
 let show = ref();
 const handleShow = () => {

src/types/components.d.ts

@@ -19,19 +19,13 @@ declare module 'vue' {
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
-    ElAnchor: typeof import('element-plus/es')['ElAnchor']
-    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -44,33 +38,23 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']

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

@@ -1,8 +1,6 @@
 <template>
-  <div v-show="modelValue" class="text-edit-container">
-    <div class="gradient-text title">编辑文案</div>
-    <div class="close-btn" @click="cancelEdit"></div>
-    <el-input v-model="textEditState.text" :rows="8" type="textarea" placeholder="请输入文案" />
+  <Dialog custom-show type="xs" title="编辑文案" height="330px" @close="cancelEdit" @confirm="addText">
+    <el-input v-model="textEditState.text" :rows="6" type="textarea" placeholder="请输入文案" />
     <div class="flex-box">
       <div class="edit-box">
         <div class="flex">
@@ -21,12 +19,8 @@
           <el-color-picker v-model="textEditState.fontColor" popper-class="custom-color-picker" />
         </div>
       </div>
-      <div class="edit-btn-box">
-        <div class="btn" @click="cancelEdit">取消</div>
-        <div class="btn2" @click="addText">确定</div>
-      </div>
     </div>
-  </div>
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
@@ -67,50 +61,6 @@ const addText = () => {
 </script>
 
 <style lang="scss" scoped>
-.text-edit-container {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 1569px;
-  height: 760px;
-  background: url('@/assets/images/map/rightMenu/onlinePlotting/dialog2.png') no-repeat;
-  font-size: 36px;
-  padding: 180px 40px 20px 40px;
-  font-size: 36px;
-  .flex-box {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 40px;
-  }
-  .edit-box {
-    display: flex;
-    align-items: center;
-    .flex {
-      display: flex;
-      align-items: center;
-      flex: 1;
-      margin-right: 20px;
-    }
-    .text {
-      white-space: nowrap;
-      margin-right: 8px;
-      font-size: 38px;
-      color: #ffffff;
-    }
-  }
-  .edit-btn-box {
-    display: flex;
-    align-items: center;
-  }
-}
-.title {
-  font-size: 84px;
-  position: absolute;
-  top: 30px;
-  left: 70px;
-}
 .el-textarea {
   position: relative;
   &::before {
@@ -138,7 +88,7 @@ const addText = () => {
   box-shadow: none;
   background-color: #0a3b87;
   border: 1px solid #0d63c2;
-  font-size: 32px;
+  font-size: 16px;
   color: #a7ccdf;
   font-family: PingFang SC;
   &::placeholder {
@@ -146,25 +96,25 @@ const addText = () => {
   }
 }
 .color-container {
-  width: 80px;
-  height: 50px;
+  width: 26px;
+  height: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   background-color: #0d3980;
-  border: 4px solid #0b5fbb;
-  margin-left: 20px;
+  border: 1px solid #0b5fbb;
+  margin-left: 5px;
   :deep(.el-color-picker) {
-    height: 60px !important;
+    height: 20px !important;
   }
   &::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
-    width: 12px;
-    height: 12px;
+    width: 4px;
+    height: 4px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
   }
   &::after {
@@ -172,53 +122,16 @@ const addText = () => {
     position: absolute;
     right: 0;
     bottom: 0;
-    width: 12px;
-    height: 12px;
+    width: 4px;
+    height: 4px;
     background: url('@/assets/images/inputIcon2.png') no-repeat;
   }
 }
-.custom-select {
-  :deep(.el-select__wrapper) {
-    height: 50px !important;
-    line-height: 50px !important;
-    .el-select__placeholder {
-      height: 50px !important;
-      line-height: 50px !important;
-    }
-  }
+.flex-box {
+  margin-top: 10px;
 }
-.btn {
-  width: 140px;
-  height: 56px;
-  background: url('@/assets/images/map/rightMenu/onlinePlotting/btn2.png') no-repeat;
+.edit-box {
   display: flex;
-  justify-content: center;
   align-items: center;
-  cursor: pointer;
-  margin-left: 20px;
-  color: #a7ccdf;
-  font-size: 32px;
-}
-.btn2 {
-  width: 204px;
-  height: 120px;
-  background: url('@/assets/images/map/rightMenu/onlinePlotting/btn3.png') no-repeat;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  margin-left: 20px;
-  color: #ffffff;
-  font-size: 32px;
-}
-.close-btn {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 75px;
-  height: 70px;
-  background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
-  background-size: 100% 100%;
-  cursor: pointer;
 }
 </style>

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

@@ -125,7 +125,7 @@
     </div>
   </div>
   <!--添加文字-->
-  <TextEdit v-model="showTextEdit" @add-text="addText" />
+  <TextEdit v-if="showTextEdit" v-model="showTextEdit" @add-text="addText" />
   <!--绘制提示信息-->
   <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
   <!--保存修改弹窗-->
@@ -213,100 +213,100 @@ const menu = ref([
         name: '火点',
         value: 'firePoint',
         children: [
-          { name: '起火点', value: 'marker', image: getImageUrl('firePoint'), icon: getImageUrl('firePoint'), size: [166, 88] },
-          { name: '烟点', value: 'marker', image: getImageUrl('smokePoint'), icon: getImageUrl('smokePoint'), size: [166, 88] },
-          { name: '已灭火点', value: 'marker', image: getImageUrl('extinguishedPoint'), icon: getImageUrl('extinguishedPoint'), size: [166, 88] }
+          { 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: 'firewire',
         children: [
-          { name: '火线', value: 'marker', image: getImageUrl('firewire'), icon: getImageUrl('firewire'), size: [166, 88] },
-          { name: '受控火线', value: 'marker', image: getImageUrl('controlledfireline'), icon: getImageUrl('controlledfireline'), size: [166, 88] },
-          { name: '已灭火线', value: 'marker', image: getImageUrl('extinguishedline'), icon: getImageUrl('extinguishedline'), size: [166, 88] },
-          { name: '强火线', value: 'marker', image: getImageUrl('StrongFrontline'), icon: getImageUrl('StrongFrontline'), size: [166, 88] },
-          { name: '中火线', value: 'marker', image: getImageUrl('ZhongxianLine'), icon: getImageUrl('ZhongxianLine'), size: [166, 88] },
-          { name: '弱火线', value: 'marker', image: getImageUrl('WeakFrontline'), icon: getImageUrl('WeakFrontline'), size: [166, 88] }
+          { 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: 'fireGround',
         children: [
-          { name: '火场', value: 'marker', image: getImageUrl('fireground'), icon: getImageUrl('fireground'), size: [166, 88] },
-          { name: '受控火场', value: 'marker', image: getImageUrl('controlledfireground'), icon: getImageUrl('controlledfireground'), size: [166, 88] },
-          { name: '已灭火场', value: 'marker', image: getImageUrl('extinguishedfireground'), icon: getImageUrl('extinguishedfireground'), size: [166, 88] }
+          { 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: 'arrow',
         children: [
-          { name: '曲箭头', value: 'marker', image: getImageUrl('curvedarrow'), icon: getImageUrl('curvedarrow'), size: [166, 88] },
-          { name: '直箭头', value: 'marker', image: getImageUrl('straightarrow1'), icon: getImageUrl('straightarrow1'), size: [166, 88] },
-          { name: '细箭头', value: 'marker', image: getImageUrl('thinarrow'), icon: getImageUrl('thinarrow'), size: [166, 88] }
-        ]
-      },
-      {
-        name: '导航',
-        value: 'navigation',
-        children: [
-          { name: '导航', value: 'marker', image: getImageUrl('navigation'), icon: getImageUrl('navigation'), size: [166, 88] }
+          { 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: 'navigation',
+      //   children: [
+      //     { name: '导航', value: 'marker', image: getImageUrl('navigation'), icon: getImageUrl('navigation'), size: [55, 29] }
+      //   ]
+      // },
       {
         name: '扑救队伍',
         value: 'firefightingTeam',
         children: [
-          { name: '指挥中心', value: 'marker', image: getImageUrl('commandcentre'), icon: getImageUrl('commandcentre'), size: [166, 88] },
-          { name: '分指中心', value: 'marker', image: getImageUrl('dividingcenter'), icon: getImageUrl('dividingcenter'), size: [166, 88] },
-          { name: '集结地', value: 'marker', image: getImageUrl('rendezvous'), icon: getImageUrl('rendezvous'), size: [166, 88] },
-          { name: '军队', value: 'marker', image: getImageUrl('army'), icon: getImageUrl('army'), size: [166, 88] },
-          { name: '武警', value: 'marker', image: getImageUrl('armedpolice'), icon: getImageUrl('armedpolice'), size: [166, 88] },
-          { name: '森林警察', value: 'marker', image: getImageUrl('forestpoliceman'), icon: getImageUrl('forestpoliceman'), size: [166, 88] },
-          { name: '扑火队伍', value: 'marker', image: getImageUrl('firefightingteam'), icon: getImageUrl('firefightingteam'), size: [166, 88] },
-          { name: '扑火队伍路线', value: 'marker', image: getImageUrl('Firefightingteamroute'), icon: getImageUrl('Firefightingteamroute'), size: [166, 88] }
+          { 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: 'aircraftVehicles',
         children: [
-          { name: '固定翼', value: 'marker', image: getImageUrl('fixedwing'), icon: getImageUrl('fixedwing'), size: [166, 88] },
-          { name: '直升机', value: 'marker', image: getImageUrl('helicopter'), icon: getImageUrl('helicopter'), size: [166, 88] },
-          { name: '无人机', value: 'marker', image: getImageUrl('UAV'), icon: getImageUrl('UAV'), size: [166, 88] },
-          { name: '指挥车', value: 'marker', image: getImageUrl('commandvehicle'), icon: getImageUrl('commandvehicle'), size: [166, 88] },
-          { name: '飞机航线设置', value: 'marker', image: getImageUrl('aircraftroutesetting'), icon: getImageUrl('aircraftroutesetting'), size: [166, 88] },
-          { name: '直升机航线设置', value: 'marker', image: getImageUrl('helicopterroutesetting'), icon: getImageUrl('helicopterroutesetting'), size: [166, 88] }
+          { 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: 'basicSetting',
         children: [
-          { name: '航站', value: 'marker', image: getImageUrl('terminal'), icon: getImageUrl('terminal'), size: [166, 88] },
-          { name: '起降点', value: 'marker', image: getImageUrl('takeoffandlandingpoint'), icon: getImageUrl('takeoffandlandingpoint'), size: [166, 88] },
-          { name: '取水点', value: 'marker', image: getImageUrl('waterpoint'), icon: getImageUrl('waterpoint'), size: [166, 88] },
-          { name: '瞭望塔', value: 'marker', image: getImageUrl('watchtower'), icon: getImageUrl('watchtower'), size: [166, 88] },
-          { name: '物资库', value: 'marker', image: getImageUrl('materialwarehouse'), icon: getImageUrl('materialwarehouse'), size: [166, 88] },
+          { 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: 'other',
-        children: [
-          { name: '危险区域', value: 'marker', image: getImageUrl('dangerousarea'), icon: getImageUrl('dangerousarea'), size: [166, 88] },
-          { name: '隔离带开采', value: 'marker', image: getImageUrl('Isolationzonemining'), icon: getImageUrl('Isolationzonemining'), size: [166, 88] },
-          { name: '应急庇护场所', value: 'marker', image: getImageUrl('emergencyshelter'), icon: getImageUrl('emergencyshelter'), size: [166, 88] },
-          { name: '风力风向', value: 'marker', image: getImageUrl('windspeedanddirection'), icon: getImageUrl('windspeedanddirection'), size: [166, 88] },
-          { name: '测距', value: 'marker', image: getImageUrl('ranging'), icon: getImageUrl('ranging'), size: [166, 88] },
-          { name: '大风', value: 'marker', image: getImageUrl('strongwind'), icon: getImageUrl('strongwind'), size: [166, 88] },
-          { name: '人工降雨', value: 'marker', image: getImageUrl('artificialrainfall'), icon: getImageUrl('artificialrainfall'), size: [166, 88] },
-          { name: '台风', value: 'marker', image: getImageUrl('typhoon'), icon: getImageUrl('typhoon'), size: [166, 88] }
-        ]
-      }
+      // {
+      //   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] }
+      //   ]
+      // }
     ]
   },
   {