yjhtgl-web/src/views/routineCommandMap/PositionMap.vue

<template>
  <div class="dialog">
    <Dialog type="md" :title="!!id ? '修改灾害信息' : '请选择事发地点'" draggable height="780px" custom-show @close="handleClose" @confirm="submit">
      <div class="custom-dialog">
        <el-form ref="queryFormRef" :model="form">
          <div class="form">
            <div class="line">
              <div class="form-item" style="margin-right: 20px">
                <div class="text">灾害事件</div>
                <el-input v-model="form.event_title" class="custom-input" placeholder="请输入" />
              </div>
            </div>
            <div class="line">
              <div class="form-item" style="margin-right: 20px">
                <div class="text">灾害级别</div>
                <el-select
                  v-model="form.event_level"
                  placeholder="请选择"
                  class="custom-select"
                  popper-class="custom-select-popper"
                  :teleported="false"
                  clearable
                >
                  <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
            <div class="line">
              <div class="form-item" style="margin-right: 10px">
                <div class="text">详细地址</div>
                <el-input v-model="form.address" class="custom-input" placeholder="请输入" @input="handleInput" />
                <div v-if="searchPop" class="scroll_box" style="width: 640px; height: 580px">
                  <div style="height: 30px; line-height: 30px">
                    <span style="font-weight: bold">搜索结果列表</span>
                    <i class="el-icon-close" style="float: right; font-size: 12px; cursor: pointer" @click="closeSearchList()" />
                  </div>

                  <el-scrollbar class="scroll">
                    <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>
                    </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>
                </div>
              </div>
              <div class="common-btn-primary" @click="handleInput(0)">搜索</div>
            </div>
            <div class="line">
              <div class="form-item">
                <div class="text" style="width: 72px; text-align: right">经度</div>
                <el-input v-model="form.longitude" class="custom-input" placeholder="请输入" />
              </div>
              <div class="form-item">
                <div class="text" style="width: 72px; text-align: right">纬度</div>
                <el-input v-model="form.latitude" class="custom-input" placeholder="请输入" />
              </div>
            </div>
          </div>
        </el-form>
        <div ref="containerRef" class="map_box">
          <div
            id="map"
            class="map"
            :style="{
              width: width,
              height: height,
              transform: 'scale(' + inverseScale.inverseScaleX + ', ' + inverseScale.inverseScaleY + ')',
              transformOrigin: '0 0'
            }"
          />
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script setup name="PositionMap">
import AMapLoader from '@amap/amap-jsapi-loader';
import { useRouter } from 'vue-router';
import { addEvent } from '@/api/emergencyCommandMap/JointDuty';
import { editEvent, getEventDetail } from '@/api/duty/eventing';

const props = defineProps({
  id: {
    type: String,
    required: false
  },
  visible: {
    type: Boolean,
    default: () => {
      return false;
    }
  },
  flag: {
    type: Boolean,
    required: false
  }
});
const proxy = getCurrentInstance()?.proxy;
const { mm_event_level } = toRefs(proxy?.useDict('mm_event_level'));
const router = useRouter();
const emits = defineEmits(['update:visible', 'confirm']);
const containerScale = inject('containerScale');
// 地图对象
let map = null;
let amap = {};
let marker = null; //地图上的点标记
let contextMenu = null;
let lnglatPosition = ref([]); //选中的新坐标
let pageNum = ref(1);
let pageSize = ref(10);
let total = ref(0);

let searchList = ref([]);
let searchPop = ref(false);
let placeSearch;
// 提交事件时间改为当前时间currentTime
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
let form = ref({
  address: '',
  longitude: '',
  latitude: '',
  event_title: '',
  event_type: '',
  event_level: '',
  event_status: '1',
  event_time: currentTime,
  report_time: '1970-01-01 00:00:00',
  deaths: '0',
  injuries: '0',
  missing: '0',
  event_source: '',
  event_description: '',
  casualties: '',
  del_flag: '9' // 临时事件
});
let geocoder = {};
let width = ref('100%');
let height = ref('100%');
watch(
  () => props.visible,
  (n) => {
    if (n) {
      nextTick(() => {
        if (props.id) {
          getEventDetail({ event_id: props.id }).then((res) => {
            form.value = res.data;
            initMap();
          });
        } else {
          initMap();
        }
      });
    }
  },
  {
    immediate: true
  }
);
onMounted(() => {
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  if (!!map) {
    map.off('rightclick');
    map.destroy();
    map = null;
  }
  window.removeEventListener('resize', handleResize);
});
function handleInput(flag) {
  if (!form.value.address) return;

  if (!flag) {
    //搜索
    total.value = 0;
    pageNum.value = 1;
  }

  if (!placeSearch) {
    placeSearch = new amap.PlaceSearch({
      pageSize: pageSize.value, // 每页条数，默认10，范围1-50
      pageIndex: pageNum.value, // 页码
      extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
    });
  }

  searchPop.value = true;
  placeSearch.setPageIndex(pageNum.value);
  placeSearch.search(form.value.address, (status, result) => {
    // console.log(result.poiList.pois, 'result')
    if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
      let arr = [];
      const pois = result.poiList.pois;
      total.value = result.poiList ? result.poiList.count : 0;
      arr = pois.map((item) => {
        return {
          name: item.name,
          address: item.address,
          img: item.photos[0]?.url,
          lnglat: [item.location.lng, item.location.lat]
        };
      });
      searchList.value = arr;
    } else {
      total.value = 0;
      searchList.value = [];
    }
  });
}
function handleChangePage(newNum) {
  if (!searchPop.value) return;
  pageNum.value = newNum;
  handleInput(1);
}
function closeSearchList() {
  searchPop.value = false;
  searchList.value = [];
  total.value = 0;
  pageNum.value = 1;
}
// 地图中心的平移至指定点位置
function handlePanTo(index) {
  let lnglat = searchList.value[index].lnglat;
  form.value.address = searchList.value[index].name + '(' + searchList.value[index].address + ')';
  form.value.longitude = lnglat[0];
  form.value.latitude = lnglat[1];

  map.panTo(lnglat);
  setMarks(lnglat);
  closeSearchList();
}
const updateForm = (position) => {
  form.value.longitude = position[0];
  form.value.latitude = position[1];
  geocoder.getAddress(position, (status, result) => {
    if (status === 'complete' && result.info === 'OK') {
      form.value.address = result.regeocode.formattedAddress;
    }
  });
};
const initMap = () => {
  let position = [110.925175, 21.678955];
  window._AMapSecurityConfig = {
    securityJsCode: '4868bc1b8fac7d9e54e7279ed556879a'
  };
  AMapLoader.load({
    key: '9c5041381e5e824f9ee324d8f7a40150', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder'] // 插件列表
  }).then((res) => {
    AMap = res;
    map = new AMap.Map('map', {
      viewMode: '3D', //是否为3D地图模式
      center: position,
      zoom: 15
    });
    amap = AMap;
    geocoder = new AMap.Geocoder({
      // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
      city: '010'
    });
    // 创建右键菜单
    ContextMenu();
    map.on('rightclick', handleRightclick);
    handleResize();
    map.on('complete', () => {
      if (!props.id) {
        updateForm(position);
      }
      setMarks(position);
    });
  });
};
function ContextMenu() {
  contextMenu = new AMap.ContextMenu();
  contextMenu.addItem(
    '选择标点',
    () => {
      form.value.longitude = lnglatPosition.value[0];
      form.value.latitude = lnglatPosition.value[1];
      contextMenu.close();
      const lnglat = [form.value.longitude, form.value.latitude];
      updateForm(lnglat);
      setMarks(lnglat);
    },
    1
  );
}
// 右键事件
function handleRightclick(e) {
  let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
  contextMenu.open(map, e.lnglat);
  lnglatPosition.value = lnglat;
}
function setMarks(lnglat) {
  //添加标记
  if (marker) map.remove(marker);
  marker = new AMap.Marker({
    position: lnglat,
    icon: new AMap.Icon({
      size: new AMap.Size(22, 28), //图标所处区域大小
      imageSize: new AMap.Size(22, 28), //图标大小
      image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
    }),
    draggable: true,
    anchor: 'bottom-center',
    offset: new AMap.Pixel(0, 0)
  });
  marker.on('dragend', (e) => {
    updateForm([e.lnglat.lng, e.lnglat.lat]);
  });
  marker.setMap(map);
}
function handleClose() {
  emits('update:visible', false);
}
let queryFormRef = ref();
let containerRef = ref();
let inverseScale = ref({
  inverseScaleX: 1,
  inverseScaleY: 1
});
function handleResize() {
  inverseScale.value.inverseScaleX = 1 / containerScale().scaleX;
  inverseScale.value.inverseScaleY = 1 / containerScale().scaleY;
  const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 1920);
  const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 1080);
  width.value = containerWidth + 'px';
  height.value = containerHeight + 'px';
  map.resize();
}
function submit() {
  if (!form.value.address) {
    proxy.$modal.msgError('详细地址不能为空');
  } else if (!form.value.longitude) {
    proxy.$modal.msgError('经度不能为空');
  } else if (!form.value.latitude) {
    proxy.$modal.msgError('纬度不能为空');
  } else {
    if (!!props.id) {
      let temp = {};
      temp.address = form.value.address;
      temp.casualties = form.value.casualties;
      temp.contact = form.value.contact;
      temp.create_time = form.value.create_time;
      temp.deaths = form.value.deaths;
      temp.del_flag = form.value.del_flag;
      temp.eventId = form.value.event_id;
      temp.event_code = temp.eventId;
      temp.description = form.value.description;
      temp.event_level = form.value.event_level;
      temp.event_source = form.value.event_source;
      temp.event_status = form.value.event_status;
      temp.event_time = form.value.event_time;
      temp.event_title = form.value.event_title;
      temp.event_type = form.value.event_type;
      temp.id = form.value.id;
      temp.injuries = form.value.injuries;
      temp.latitude = form.value.latitude;
      temp.longitude = form.value.longitude;
      temp.missing = form.value.missing;
      temp.plan_id = form.value.plan_id;
      temp.recorded_by = form.value.recorded_by;
      temp.region_code = form.value.region_code;
      temp.report_time = form.value.report_time;
      temp.response_level = form.value.response_level;
      editEvent(temp).then(() => {
        proxy.$modal.msgSuccess('修改成功');
        emits('update:visible', false);
        emits('confirm');
      });
    } else {
      addEvent(form.value).then((res) => {
        router.push({
          path: '/emergencyCommandMap',
          query: {
            event_id: res.data
          }
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.map_box {
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
  flex: 1;
  .positionMap {
    width: 100%;
    height: 100%;
  }
  :deep(.amap-menu) {
    color: #000;
  }
}
.map {
  width: 100%;
  height: 100%;
}
.search {
  width: 50%;
  position: absolute;
  right: 2%;
  top: 10px;
  background: #fff;
  padding: 8px 8px;
  border-radius: 3px;
  display: flex;
}
.btn {
  margin-left: 10px;
}

.scroll_box {
  width: calc(100% - 65px);
  background: #0a2c5c;
  position: absolute;
  left: 66px;
  top: 38px;
  z-index: 9;
  padding: 10px;
  border-radius: 3px;
  .close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 14px;
  }
  :deep(.el-pagination__total) {
    color: #a7ccdf !important;
  }
  :deep(.el-pagination) {
    .btn-next,
    .btn-prev {
      background-color: transparent !important;
      border: none !important;
      .el-icon {
        color: #a7ccdf !important;
      }
    }
    .btn-prev:disabled,
    .btn-next:disabled {
      background-color: transparent !important;
      border: none !important;
    }
    .el-pager li {
      text-align: center;
      color: #a7ccdf !important;
      background-color: #0e3064 !important;
      border: 1px solid #0c57a7 !important;
      &:hover {
        background-color: #038dff !important;
        border: 1px solid #038dff !important;
      }
    }
    .el-pager li.is-active {
      background-color: #038dff !important;
      border: 1px solid #038dff !important;
    }
  }
}
.scroll {
  width: 100%;
  height: 500px;

  .item {
    display: flex;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;

    &:hover {
      background-color: #102e76;
    }

    .img {
      width: 60px;
      height: 60px;
      min-width: 60px;
      margin-right: 8px;
    }
    :deep(.image-slot) {
      width: 100%;
      height: 100%;
      background-color: #f5f7fa;
      text-align: center;
      line-height: 50px;
    }
    :deep(.el-icon-picture-outline) {
      font-size: 32px;
    }
    .text {
      color: #3385ff;
      margin-bottom: 6px;
    }
  }
}
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden !important;
}

:deep(.is-horizontal) {
  display: none;
}

.empty {
  margin: 20px 0;
}
.custom-dialog {
  height: 100%;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  .map_box {
    overflow: hidden;
  }
}

.form {
  .line {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .form-item {
      flex: 1;
      display: flex;
      align-items: center;
      position: relative;
      .text {
        font-size: 14px;
        color: #eaf3fc;
        white-space: nowrap;
        margin-right: 10px;
      }
    }
  }
}
:deep(.amap-logo),
:deep(.amap-copyright) {
  display: none !important;
}
.dialog {
  font-size: 38px;
  :deep(.dialog-content) {
    overflow: unset !important;
  }
}
.custom-pagination-popper {
  z-index: 9999 !important;
  position: relative;
}
</style>