Преглед изворни кода

事件列表,地图定位

愿你天天开心 пре 9 месеци
родитељ
комит
8912aef51b
5 измењених фајлова са 109 додато и 14 уклоњено
  1. 1 1
      .env.development
  2. 1 1
      .env.production
  3. 35 0
      src/components/Map/company-map.vue
  4. 1 0
      src/types/components.d.ts
  5. 71 12
      src/views/duty/eventing/index.vue

+ 1 - 1
.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 智慧应急工作台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://10.181.7.236:9988/prod_api'
+VITE_APP_BASE_API = 'http://10.181.7.236:9988'
 
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'

+ 1 - 1
.env.production

@@ -14,7 +14,7 @@ VITE_APP_MONITOR_ADMIN = '/admin/applications'
 VITE_APP_SNAILJOB_ADMIN = '/snail-job'
 
 # 生产环境
-VITE_APP_BASE_API = 'http://10.181.7.236:9988/prod_api'
+VITE_APP_BASE_API = '/prod_api'
 
 # 是否在打包时开启压缩,支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip

+ 35 - 0
src/components/Map/company-map.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div id="map"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+const map = ref(null);
+
+onMounted(() => {
+  AMapLoader.load({
+    key: '',
+    version: '2.0',
+    plugins: ['AMap.PlaceSearch']
+  }).then((AMap) => {
+    map.value = new AMap.Map('map', {
+      zoom: 10,
+      center: [] // 默认中心点,可以根据需要设置
+    });
+
+
+  });
+});
+
+</script>
+
+<style scoped>
+#map {
+  width: 100%;
+  height: 400px; /* 根据需要调整地图高度 */
+}
+</style>

+ 1 - 0
src/types/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
     BuildCode: typeof import('./../components/BuildCode/index.vue')['default']
     ChunkUpload: typeof import('./../components/ChunkUpload/index.vue')['default']
+    CompanyMap: typeof import('./../components/Map/company-map.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']

+ 71 - 12
src/views/duty/eventing/index.vue

@@ -1,4 +1,4 @@
-<template>
+<template xmlns="">
   <div class="p-2">
     <transition name="fade">
       <div v-show="showSearch" class="mb-[20px]">
@@ -65,7 +65,6 @@
                   v-model="queryParams.eventTime"
                   type="datetime"
                   placeholder="选择事发时间"
-                  value-format="yyyy-MM-dd HH:mm:ss"
                 ></el-date-picker>
               </el-form-item>
             </el-col>
@@ -91,15 +90,15 @@
       </el-col>
     </el-row>
 
-    <!-- 表格组件 -->
+    <!-- 表格组w件 -->
     <el-table v-loading="loading" :data="eventList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="事件编号" align="center" prop="eventId"/>
       <el-table-column label="事件标题" align="center" prop="eventTitle"/>
       <el-table-column label="事件类型" align="center" prop="eventType"/>
       <el-table-column label="事件等级" align="center" prop="eventLevel"/>
-      <el-table-column label="事件状态" align="center" prop="eventStatus"/>
       <el-table-column label="事件地点" align="center" prop="address"/>
+      <el-table-column label="事件状态" align="center" prop="eventStatus"/>
       <el-table-column label="事件时间" align="center" prop="eventTime"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
@@ -156,18 +155,45 @@
           </el-select>
         </el-form-item>
         <el-form-item label="事件地点" prop="address">
-          <el-input v-model="form.address" placeholder="请输入事件地点"/>
+          <el-button type="primary" @click="openMapDialog">地图定位</el-button>
+          <el-input v-model="form.address" placeholder="请输入事件地点" readonly />
         </el-form-item>
         <el-form-item label="事发时间" prop="eventTime">
           <el-date-picker
             v-model="form.eventTime"
-            type="datetimerange"
-            range-separator="-"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            value-format="yyyy-MM-dd HH:mm:ss"
+            type="datetime"
+            placeholder="选择事发时间"
           ></el-date-picker>
         </el-form-item>
+        <el-form-item label="上报时间" prop="reportTime">
+          <el-date-picker
+            v-model="form.reportTime"
+            type="datetime"
+            placeholder="选择上报时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="伤亡情况">
+          <el-row :gutter="10">
+            <el-col :span="6">
+              <el-input v-model="form.deceased" placeholder="死亡">
+                <template #suffix>人</template>
+              </el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-input v-model="form.injured" placeholder="受伤">
+                <template #suffix>人</template>
+              </el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-input v-model="form.missing" placeholder="失踪">
+                <template #suffix>人</template>
+              </el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="事件来源" prop="eventSource">
+          <el-input v-model="form.eventSource" placeholder="请输入事件来源"/>
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -176,6 +202,16 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 地图弹窗 -->
+    <el-dialog v-model="mapDialogVisible" title="地图定位" width="600px">
+      <company-map :visible.sync="mapDialogVisible" :address="form.address" @Change="handleMapChange"></company-map>
+      <template #footer>
+        <el-button @click="mapDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmMapLocation">确定</el-button>
+      </template>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -209,7 +245,12 @@ const initFormData = {
   eventLevel: '',
   eventStatus: '',
   address: '',
-  eventTime: ''
+  eventTime: '',
+  reportTime: '',
+  deceased: '',
+  injured: '',
+  missing: '',
+  eventSource: ''
 };
 
 const data = reactive({
@@ -230,7 +271,9 @@ const data = reactive({
     eventLevel: [{ required: true, message: '事件等级不能为空', trigger: 'blur' }],
     eventStatus: [{ required: true, message: '事件状态不能为空', trigger: 'blur' }],
     address: [{ required: true, message: '事件地点不能为空', trigger: 'blur' }],
-    eventTime: [{ required: true, message: '事发时间不能为空', trigger: 'blur' }]
+    eventTime: [{ required: true, message: '事发时间不能为空', trigger: 'blur' }],
+    reportTime: [{ required: true, message: '上报时间不能为空', trigger: 'blur' }],
+    eventSource: [{ required: true, message: '事件来源不能为空', trigger: 'blur' }]
   },
   eventTypeSelection: [],
   eventLevelSelection: [],
@@ -362,6 +405,22 @@ const handleView = (row) => {
   }
 };
 
+// 地图定位
+const mapDialogVisible = ref(false);
+
+const openMapDialog = () => {
+  mapDialogVisible.value = true;
+};
+
+const handleMapChange = (lnglat) => {
+  form.value.address = `${lnglat[0]}, ${lnglat[1]}`;
+};
+
+const confirmMapLocation = () => {
+  mapDialogVisible.value = false;
+};
+
+
 onMounted(() => {
   getList();
   Promise.all([