|
@@ -1,91 +1,95 @@
|
|
|
<template>
|
|
|
- <Dialog type="md" :title="!!id ? '修改灾害信息' : '请选择事发地点'" draggable height="780px" customShow @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 class="dialog">
|
|
|
+
|
|
|
+
|
|
|
+ <Dialog type="md" :title="!!id ? '修改灾害信息' : '请选择事发地点'" draggable height="780px" customShow @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>
|
|
|
- <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 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>
|
|
|
- <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="请输入" />
|
|
|
- <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: 12px; cursor: pointer" @click="closeSearchList()" />
|
|
|
- </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>
|
|
|
+ <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>
|
|
|
- <div v-show="!searchList.length" class="empty" style="text-align: center">没有搜索到内容</div>
|
|
|
- </el-scrollbar>
|
|
|
+ <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="common-btn-primary" @click="handleInput(0)">搜索</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 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>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- <div ref="containerRef" class="map_box">
|
|
|
- <div id="positionMap">
|
|
|
- <div id="map" class="map" :style="{ width: width, height: height }"></div>
|
|
|
+ </el-form>
|
|
|
+ <div ref="containerRef" class="map_box">
|
|
|
+ <div id="positionMap">
|
|
|
+ <div id="map" class="map" :style="{ width: width, height: height }"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </Dialog>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="PositionMap">
|
|
@@ -402,6 +406,10 @@ function submit() {
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
margin-bottom: 20px;
|
|
|
flex: 1;
|
|
|
+ .positionMap {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
:deep(.amap-menu) {
|
|
|
color: #000;
|
|
|
}
|
|
@@ -554,4 +562,14 @@ function submit() {
|
|
|
: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>
|