事发地点ui

src/types/components.d.ts

@@ -17,35 +17,53 @@ 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']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    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']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    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']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     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']
     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']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
@@ -88,4 +106,7 @@ declare module 'vue' {
     YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/views/routineCommandMap/MiddleSection.vue

@@ -4,7 +4,7 @@
       <div class="btn-active">备战防御</div>
       <div class="btn" style="margin-left: 40px" @click="handleQuery2">指挥调度</div>
     </div>
-    <PositionMap v-if="mapDialogVisible" v-model:visible="mapDialogVisible" @change="handleMapChange" />
+    <PositionMap v-if="mapDialogVisible" v-model:visible="mapDialogVisible" />
     <GlobalMap is-component width="3894" height="2140" />
   </div>
 </template>
@@ -30,13 +30,6 @@ const handleQuery1 = () => {
 const handleQuery2 = () => {
   mapDialogVisible.value = true;
 };
-
-const handleMapChange = (data) => {
-  form.value.address = data.address;
-  form.value.lon = data.lnglat[0];
-  form.value.lat = data.lat[1];
-  mapDialogVisible.value = true;
-};
 </script>
 
 <style lang="scss" scoped>

src/views/routineCommandMap/PositionMap.vue

@@ -1,71 +1,70 @@
 <template>
   <div class="dialog">
-    <div class="dialog-header">
-      <div class="dialog-title">{{ title }}</div>
-      <div class="icon-close" @click="handleClose">
-        <el-icon size="40px"><Close /></el-icon>
-      </div>
-    </div>
+    <div class="gradient-text dialog-title">请选择事发地点</div>
+    <div class="icon-close" @click="handleClose"></div>
     <div class="dialog-content">
-      <el-form ref="queryFormRef" :model="form" :rules="rules" :inline="true">
-        <el-form-item label="详细地址" prop="address">
-          <el-input v-model="form.address" placeholder="请输入" size="large" clearable />
-        </el-form-item>
-        <el-form-item label="经度" prop="longitude">
-          <el-input v-model="form.longitude" placeholder="请输入" size="large" />
-        </el-form-item>
-        <el-form-item label="纬度" prop="latitude">
-          <el-input v-model="form.latitude" placeholder="请输入" size="large" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" size="large" @click="submit">确定</el-button>
-        </el-form-item>
-      </el-form>
-      <div id="positionMap" class="map_box" :style="{ width: width, height: height }">
-        <div id="map" class="map"></div>
-        <!--            <div class="search">-->
-        <!--              &lt;!&ndash; @input="handleInput(0)" &ndash;&gt;-->
-        <!--              <el-input v-model="location" placeholder="请输入地址" />-->
-        <!--              <el-button class="btn" type="primary" @click="handleInput(0)">搜索</el-button>-->
-        <!--            </div>-->
-
-        <div v-if="searchPop" class="scroll_box">
-          <div style="height: 30px; line-height: 30px">
-            <span style="font-weight: bold">搜索结果列表</span>
-            <i class="el-icon-close" style="float: right; font-size: 20px; cursor: pointer" @click="closeSearchList()" />
-          </div>
+      <div class="form">
+        <div class="line">
+          <div class="form-item">
+            <div class="text">详细地址</div>
+            <el-input v-model="form.address" class="custom-input" placeholder="请输入" />
+            <div v-if="searchPop" class="scroll_box">
+              <div style="height: 60px; line-height: 60px">
+                <span style="font-weight: bold">搜索结果列表</span>
+                <i class="el-icon-close" style="float: right; font-size: 20px; cursor: pointer" @click="closeSearchList()" />
+              </div>
 
-          <el-scrollbar class="scroll" style="height: 250px">
-            <div v-for="(item, index) in searchList" v-show="searchList.length" :key="index" class="item" @click="handlePanTo(index)">
-              <el-image class="img" :src="item.img" :alt="item.name" lazy>
-                <template #error>
-                  <div class="image-slot">
-                    <i class="el-icon-picture-outline"></i>
+              <el-scrollbar class="scroll" style="height: 250px">
+                <div v-for="(item, index) in searchList" v-show="searchList.length" :key="index" class="item" @click="handlePanTo(index)">
+                  <el-image class="img" :src="item.img" :alt="item.name" lazy>
+                    <template #error>
+                      <div class="image-slot">
+                        <i class="el-icon-picture-outline"></i>
+                      </div>
+                    </template>
+                  </el-image>
+                  <div>
+                    <div class="text">{{ item.name }}</div>
+                    <div>{{ item.address }}</div>
                   </div>
-                </template>
-              </el-image>
-              <div>
-                <div class="text">{{ item.name }}</div>
-                <div>{{ item.address }}</div>
-              </div>
-            </div>
-            <div v-show="!searchList.length" class="empty" style="text-align: center">没有搜索到内容</div>
-          </el-scrollbar>
+                </div>
+                <div v-show="!searchList.length" class="empty" style="text-align: center">没有搜索到内容</div>
+              </el-scrollbar>
 
-          <el-pagination
-            background
-            small
-            :hide-on-single-page="true"
-            layout="prev, pager, next"
-            :total="total"
-            :page-size="pageSize"
-            :current-page="pageNum"
-            style="margin-top: 10px"
-            @current-change="handleChangePage"
-          >
-          </el-pagination>
+              <el-pagination
+                background
+                small
+                :hide-on-single-page="true"
+                layout="prev, pager, next"
+                :total="total"
+                :page-size="pageSize"
+                :current-page="pageNum"
+                style="margin-top: 10px"
+                @current-change="handleChangePage"
+              >
+              </el-pagination>
+            </div>
+          </div>
+          <div class="btn1" @click="handleInput(0)">搜索</div>
+        </div>
+        <div class="line">
+          <div class="form-item">
+            <div class="text">经度</div>
+            <el-input v-model="form.longitude" class="custom-input" placeholder="请输入" />
+          </div>
+          <div class="form-item" style="margin-left: 80px">
+            <div class="text">详细地址</div>
+            <el-input v-model="form.latitude" class="custom-input" placeholder="请输入" />
+          </div>
         </div>
       </div>
+      <div id="positionMap" class="map_box" :style="{ width: width, height: height }">
+        <div id="map" class="map"></div>
+      </div>
+      <div class="footer">
+        <div class="btn2" @click="handleClose">取消</div>
+        <div class="btn1" style="margin-left: 40px" @click="submit">确定</div>
+      </div>
     </div>
   </div>
 </template>
@@ -73,7 +72,7 @@
 <script setup name="PositionMap">
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { useRouter } from 'vue-router';
-import { updateEventLocation, addEvent } from '@/api/emergencyCommandMap/JointDuty';
+import { addEvent } from '@/api/emergencyCommandMap/JointDuty';
 
 const props = defineProps({
   visible: {
@@ -88,7 +87,6 @@ const emits = defineEmits(['update:visible']);
 // 地图对象
 let map = null;
 let amap = {};
-let location = ref('');
 let marker = null; //地图上的点标记
 let contextMenu = null;
 let lnglatPosition = ref([]); //选中的新坐标
@@ -131,7 +129,6 @@ let form = reactive({
   casualties: '',
   del_flag: '9'
 });
-let open = ref(false);
 let geocoder = {};
 let width = ref('100%');
 let height = ref('100%');
@@ -160,7 +157,7 @@ onUnmounted(() => {
   window.removeEventListener('resize', handleResize);
 });
 function handleInput(flag) {
-  if (!location.value) return;
+  if (!form.address) return;
 
   if (!flag) {
     //搜索
@@ -178,7 +175,7 @@ function handleInput(flag) {
 
   searchPop.value = true;
   placeSearch.setPageIndex(pageNum.value);
-  placeSearch.search(location.value, (status, result) => {
+  placeSearch.search(form.address, (status, result) => {
     // console.log(result.poiList.pois, 'result')
     if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
       let arr = [];
@@ -202,11 +199,10 @@ function handleInput(flag) {
 function handleChangePage(newNum) {
   if (!searchPop.value) return;
   pageNum.value = newNum;
-  this.handleInput(1);
+  handleInput(1);
 }
 function closeSearchList() {
   searchPop.value = false;
-  location.value = '';
   searchList.value = [];
   total.value = 0;
   pageNum.value = 1;
@@ -291,7 +287,7 @@ let queryFormRef = ref();
 let containerRef = ref();
 function handleResize() {
   const containerWidth = 2900 * (document.body.clientWidth / 8960);
-  const containerHeight = 950 * (document.body.clientHeight / 2520);
+  const containerHeight = 750 * (document.body.clientHeight / 2520);
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
   nextTick(() => {
@@ -340,42 +336,76 @@ function submit() {
 }
 
 .scroll_box {
-  width: 50%;
-  padding-top: 30px;
-  padding-bottom: 20px;
-  background: #fff;
+  width: calc(100% - 165px);
+  background: #0a2c5c;
   position: absolute;
-  right: 2%;
-  top: 70px;
-  padding: 15px;
+  left: 165px;
+  top: 80px;
+  z-index: 9;
+  padding: 20px;
   border-radius: 3px;
   .close {
     position: absolute;
-    right: 2%;
+    right: 10px;
     top: 10px;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 40px;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 32px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
   }
 }
 .scroll {
   width: 100%;
-  max-height: 250px;
+  height: auto !important;
 
   .item {
     display: flex;
-    font-size: 14px;
+    font-size: 32px;
     cursor: pointer;
     padding: 8px;
 
     &:hover {
-      background-color: #f6f6f6;
+      background-color: #102e76;
     }
 
     .img {
-      width: 50px;
-      height: 45px;
-      min-width: 50px;
-      margin-right: 10px;
+      width: 80px;
+      height: 80px;
+      min-width: 80px;
+      margin-right: 15px;
     }
     :deep(.image-slot) {
       width: 100%;
@@ -385,7 +415,7 @@ function submit() {
       line-height: 50px;
     }
     :deep(.el-icon-picture-outline) {
-      font-size: 25px;
+      font-size: 32px;
     }
     .text {
       color: #3385ff;
@@ -406,37 +436,98 @@ function submit() {
 }
 .dialog {
   position: absolute;
-  //top: 0px;
-  //left: 1530px;
-  //width: 1569px;
-  //height: 1262px;
   top: 90px;
   left: 900px;
   width: 3000px;
   height: 2000px;
   z-index: 2000;
   font-size: 36px;
-  padding: 0 20px;
-  background-color: #fff;
-  border-radius: 10px;
-  .dialog-header {
-    width: 100%;
-    height: 70px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .dialog-title {
-      font-size: 36px;
-    }
-    .icon-close {
-      cursor: pointer;
-    }
+  padding: 160px 60px 20px 65px;
+  font-size: 36px;
+  color: #fff;
+  background: url('@/assets/images/position/positionDialog.png') no-repeat;
+  .dialog-title {
+    position: absolute;
+    top: 40px;
+    left: 60px;
+    font-size: 72px;
+  }
+  .icon-close {
+    cursor: pointer;
+    position: absolute;
+    top: 0px;
+    right: -7px;
+    width: 77px;
+    height: 72px;
+    background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
+    background-size: 100% 100%;
   }
   .dialog-content {
     padding: 10px 0;
     .map_box {
       overflow: hidden;
     }
+    .footer {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      bottom: 45px;
+      right: 45px;
+    }
   }
 }
+.form {
+  .line {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+    .form-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      position: relative;
+      .text {
+        font-size: 36px;
+        color: #eaf3fc;
+        white-space: nowrap;
+        margin-right: 20px;
+      }
+      :deep(.el-input__wrapper) {
+        background-color: rgba(26, 144, 255, 0.15) !important;
+        border: 4px solid rgba(26, 144, 255, 0.15) !important;
+      }
+      :deep(.el-input__inner) {
+        height: 56px;
+        line-height: 56px;
+      }
+    }
+  }
+}
+.btn1 {
+  width: 204px;
+  height: 120px;
+  background: url('@/assets/images/position/btn2.png') no-repeat;
+  font-size: 36px;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: -25px;
+  cursor: pointer;
+  margin-left: 70px;
+}
+.btn2 {
+  width: 140px;
+  height: 56px;
+  background: url('@/assets/images/position/btn.png') no-repeat;
+  font-size: 36px;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: -25px;
+  cursor: pointer;
+  margin-left: 70px;
+}
 </style>