下载事件

.env.production

@@ -3,7 +3,7 @@ VITE_APP_TITLE = 应急工作台移动端
 
 # baseUrl
 # VITE_BASE_API = "http://19.155.220.206:8088"
-VITE_BASE_API = "/"
+VITE_BASE_API = ""
 VITE_BASE_DOWNLOAD_API = '/file/download/'
 
 # 线上环境平台打包路径

src/api/duty/eventing.ts

@@ -17,6 +17,14 @@ export function registeredEvent(data) {
     data
   });
 }
+// 还激活事件
+export function getListActive(data) {
+  return request({
+    url: '/api/event_management/event/list_active',
+    method: 'post',
+    data
+  });
+}
 
 // 编辑事件
 export function editEvent(params) {

src/utils/request.ts

@@ -162,5 +162,36 @@ service.interceptors.response.use(
         return Promise.reject(error);
     }
 );
+// 通用下载方法
+export function download2(url: string, fileName: string) {
+    downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' });
+    return service
+        .get(
+            url,
+            {},
+            {
+                headers: { 'Content-Type': 'application/octet-stream' },
+                responseType: 'blob'
+            }
+        )
+        .then(async (resp: any) => {
+            const isLogin = blobValidate(resp);
+            if (isLogin) {
+                const blob = new Blob([resp]);
+                FileSaver.saveAs(blob, fileName);
+            } else {
+                const resText = await resp.data.text();
+                const rspObj = JSON.parse(resText);
+                const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
+                ElMessage.error(errMsg);
+            }
+            downloadLoadingInstance.close();
+        })
+        .catch((r: any) => {
+            console.error(r);
+            ElMessage.error('下载文件出现错误，请联系管理员！');
+            downloadLoadingInstance.close();
+        });
+}
 // 导出 axios 实例
 export default service;

src/views/event/detail.vue

@@ -2,25 +2,31 @@
   <div class="container">
     <div v-if="!hideMap" id="aMap" class="event_map"></div>
     <div class="box">
-      <div class="event_title">{{eventInfo.event_title||"暂无事件标题"}}</div>
+      <div class="event_title">{{ eventInfo.event_title || "暂无事件标题" }}</div>
       <div class="event_prop">
-        <div class="event_type"><dict-tag :options="mm_event_type" :value="eventInfo.event_type"></dict-tag></div>
-        <div class="event_level"><dict-tag :options="mm_event_level" :value="eventInfo.event_level||'0'"></dict-tag></div>
-        <div class="event_status"><dict-tag :options="mm_event_state" :value="eventInfo.event_status"></dict-tag></div>
+        <div class="event_type">
+          <dict-tag :options="mm_event_type" :value="eventInfo.event_type"></dict-tag>
+        </div>
+        <div class="event_level">
+          <dict-tag :options="mm_event_level" :value="eventInfo.event_level||'0'"></dict-tag>
+        </div>
+        <div class="event_status">
+          <dict-tag :options="mm_event_state" :value="eventInfo.event_status"></dict-tag>
+        </div>
       </div>
       <van-tabs v-model:active="active">
         <van-tab title="基础信息">
           <div class="event_tab">
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon6" />
+                <i class="icon6"/>
                 <div class="event-data-item-title">事件编号：</div>
               </div>
-              <div class="event-data-item-value">{{eventInfo.event_id}}</div>
+              <div class="event-data-item-value">{{ eventInfo.event_id }}</div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon1" />
+                <i class="icon1"/>
                 <div class="event-data-item-title">事件类型：</div>
               </div>
               <div class="event-data-item-value">
@@ -29,96 +35,115 @@
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon2" />
+                <i class="icon2"/>
                 <div class="event-data-item-title">事件等级：</div>
               </div>
-              <div class="event-data-item-value"><dict-tag :options="mm_event_level" :value="eventInfo.event_level||'0'"></dict-tag></div>
+              <div class="event-data-item-value">
+                <dict-tag :options="mm_event_level" :value="eventInfo.event_level||'0'"></dict-tag>
+              </div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon3" />
+                <i class="icon3"/>
                 <div class="event-data-item-title">事件状态：</div>
               </div>
-              <div class="event-data-item-value"><dict-tag :options="mm_event_state" :value="eventInfo.event_status"></dict-tag></div>
+              <div class="event-data-item-value">
+                <dict-tag :options="mm_event_state" :value="eventInfo.event_status"></dict-tag>
+              </div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon5" />
+                <i class="icon5"/>
                 <div class="event-data-item-title">事发地点：</div>
               </div>
-              <div class="event-data-item-value">{{eventInfo.address}}</div>
+              <div class="event-data-item-value">{{ eventInfo.address }}</div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon4" />
+                <i class="icon4"/>
                 <div class="event-data-item-title">事发时间：</div>
               </div>
-              <div class="event-data-item-value">{{eventInfo.event_time}}</div>
+              <div class="event-data-item-value">{{ eventInfo.event_time }}</div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon4" />
+                <i class="icon4"/>
                 <div class="event-data-item-title">上报时间：</div>
               </div>
-              <div class="event-data-item-value">{{eventInfo.report_time}}</div>
+              <div class="event-data-item-value">{{ eventInfo.report_time }}</div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon7" />
+                <i class="icon7"/>
                 <div class="event-data-item-title">伤亡情况：</div>
               </div>
               <div class="event-data-item-value blue" @click="handleUploadCasualties">去上报</div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon8" />
+                <i class="icon8"/>
                 <div class="event-data-item-title">登记人：</div>
               </div>
-              <div class="event-data-item-value">{{eventInfo.reported_by}}</div>
+              <div class="event-data-item-value">{{ eventInfo.reported_by }}</div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon4" />
+                <i class="icon4"/>
                 <div class="event-data-item-title">登记时间：</div>
               </div>
-              <div class="event-data-item-value">{{eventInfo.reported_time}}</div>
+              <div class="event-data-item-value">{{ eventInfo.reported_time }}</div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon9" />
+                <i class="icon9"/>
                 <div class="event-data-item-title">联系方式：</div>
               </div>
-              <div class="event-data-item-value">{{eventInfo.contact}}</div>
+              <div class="event-data-item-value">{{ eventInfo.contact }}</div>
             </div>
             <div class="event-data-item">
               <div class="item-left">
-                <i class="icon10" />
+                <i class="icon10"/>
                 <div class="event-data-item-title">事件来源：</div>
               </div>
-              <div class="event-data-item-value">{{eventInfo.event_source}}</div>
+              <div class="event-data-item-value">{{ eventInfo.event_source }}</div>
             </div>
           </div>
         </van-tab>
-        <van-tab title="事件概要"><div class="event_tab">{{ eventInfo.event_description }}</div></van-tab>
-        <van-tab title="事件跟踪"><div class="event_tab">
-          <van-steps direction="vertical" :active="0">
-            <van-step v-for="(item,index) in eventTrackState.items" :key="item.id">
-              <h3>{{ item.title }}</h3>
-              <p>{{ item.description }}</p>
-            </van-step>
-          </van-steps>
-        </div></van-tab>
+        <van-tab title="事件概要">
+          <div class="event_tab">{{ eventInfo.event_description }}</div>
+        </van-tab>
+        <van-tab title="事件跟踪">
+          <div class="event_tab">
+            <van-steps direction="vertical" :active="0">
+              <van-step v-for="(item,index) in eventTrackState.items" :key="item.id">
+                <h3>{{ item.title }}</h3>
+                <p>{{ item.description }}</p>
+              </van-step>
+            </van-steps>
+          </div>
+        </van-tab>
         <van-tab title="匹配预案">
           <div class="event_tab2">
-            <div class="emptyIcon" />
-            <div class="emptyText">未关联到对应预案</div>
-<!--            <van-button type="primary" size="small" @click="handleShowAssociation">手工关联</van-button>-->
+            <template v-if="eventInfo.plan_files && eventInfo.plan_files.length > 0">
+              <div class="plan-content">
+                <div class="content-header">
+                  <div class="plan-content-title">{{ eventInfo.plan_files[0].name }}</div>
+                  <i class="download-icon" @click="handleDownload(eventInfo.plan_files[0])"/>
+                </div>
+                <div class="content-text">茂名市自然灾害应急预案茂名市自然灾害应急预案</div>
+              </div>
+            </template>
+            <template v-else>
+              <div class="emptyIcon"/>
+              <div class="emptyText">未关联到对应预案</div>
+              <van-button type="primary" size="small" @click="handleShowAssociation">手工关联</van-button>
+            </template>
           </div>
         </van-tab>
         <van-tab title="总结报告">
           <div class="event_tab2">
             <template v-if="eventInfo.plan_name||'' === ''">
-              <div class="emptyIcon2" />
+              <div class="emptyIcon2"/>
               <div class="emptyText">暂未上传总结报告</div>
               <van-button type="primary" size="small" @click="handleUploadCasualties">去上传</van-button>
             </template>
@@ -131,76 +156,86 @@
       <div style="display: flex; flex-direction: row; justify-content: space-between;">
         <van-button v-if="eventInfo.event_status == '0'" type="primary" @click="handleStartEvent">开始指挥</van-button>
         <van-button v-if="eventInfo.event_status == '1'" type="primary" @click="handleEnterEvent">进入指挥</van-button>
-        <van-button v-if="eventInfo.event_status == '0' || eventInfo.event_status == '2'" type="danger"  @click="handleCloseEvent">关闭事件</van-button>
+        <van-button v-if="eventInfo.event_status == '0' || eventInfo.event_status == '2'" type="danger"
+                    @click="handleCloseEvent">关闭事件
+        </van-button>
       </div>
     </div>
 
-<!--    <AssociationPlan v-model="uploadCasualtiesState.show" :data="uploadCasualtiesState.form" @update:model-value="onUploadCasualtiesDialogClose" />-->
-    <UploadEventCasualtiesDialog v-model="uploadCasualtiesState.show" :data="uploadCasualtiesState.form" @update:model-value="onUploadCasualtiesDialogClose"></UploadEventCasualtiesDialog>
-    <StartEventDialog v-model="startEventState.show" :data="startEventState.form" @update:model-value="onStartEventDialogClose"></StartEventDialog>
+    <!--    <AssociationPlan v-model="uploadCasualtiesState.show" :data="uploadCasualtiesState.form" @update:model-value="onUploadCasualtiesDialogClose" />-->
+    <UploadEventCasualtiesDialog v-model="uploadCasualtiesState.show" :data="uploadCasualtiesState.form"
+                                 @update:model-value="onUploadCasualtiesDialogClose"></UploadEventCasualtiesDialog>
+    <StartEventDialog v-model="startEventState.show" :data="startEventState.form"
+                      @update:model-value="onStartEventDialogClose"></StartEventDialog>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {getCurrentInstance, reactive, ref, toRefs, onMounted} from 'vue';
-import { useRouter, useRoute } from 'vue-router'
-import { getEventDetail, closeEvent  } from "@/api/event";
+import {useRouter, useRoute} from 'vue-router'
+import {getEventDetail, closeEvent} from "@/api/event";
 import UploadEventCasualtiesDialog from "./UploadEventCasualtiesDialog.vue";
-import { showDialog, showConfirmDialog, showToast } from 'vant';
+import {showDialog, showConfirmDialog, showToast} from 'vant';
 import {useAMap} from "@/hooks/AMap/useAMap";
 import AssociationPlan from "@/views/event/AssociationPlan.vue";
 import StartEventDialog from "@/views/event/StartEventDialog.vue";
+import {download2} from "@/utils/request";
 
 const router = useRouter()
 const route = useRoute()
 const proxy = getCurrentInstance()?.proxy;
-const { mm_event_type, mm_event_level, mm_event_state } = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state'));
+const {
+  mm_event_type,
+  mm_event_level,
+  mm_event_state
+} = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state'));
 
 const active = ref(0);
 const eventId = ref('');
 const data = reactive({
-    eventInfo: {
-        event_id: '',
-        event_title: '',
-        event_code: '',
-        event_type: '',
-        event_level: '',
-        event_status: '',
-        address: '',
-        event_time: '',
-        report_time: '',
-        contact: '',
-        event_source: '',
-        event_description: '',
-        reported_by: '',
-        reported_time: '',
-        longitude: '',
-        latitude: '',
-        plan_id: '',
-        plan_name: '',
-        summary_file: [],
-        // 伤亡情况
-        deaths: '',
-        injuries: '',
-        missing: '',
-    },
-    eventTrackState: {
-        active: 0,
-        items: [{
-            id: 0,
-            title: '事件登记',
-            description: ''
-        }]
-    }
+  eventInfo: {
+    event_id: '',
+    event_title: '',
+    event_code: '',
+    event_type: '',
+    event_level: '',
+    event_status: '',
+    address: '',
+    event_time: '',
+    report_time: '',
+    contact: '',
+    event_source: '',
+    event_description: '',
+    reported_by: '',
+    reported_time: '',
+    longitude: '',
+    latitude: '',
+    plan_id: '',
+    plan_name: '',
+    summary_file: [],
+    plan_files: [],
+    // 伤亡情况
+    deaths: '',
+    injuries: '',
+    missing: '',
+  },
+  eventTrackState: {
+    active: 0,
+    items: [{
+      id: 0,
+      title: '事件登记',
+      description: ''
+    }]
+  }
 });
-const { eventInfo, eventTrackState } = toRefs(data);
+const {eventInfo, eventTrackState} = toRefs(data);
 const startEventState = reactive({
   show: false,
   form: {
     event_id: '',
     event_title: '',
     event_level: '',
-    event_level_text: ''
+    event_level_text: '',
   }
 });
 const handleStartEvent = () => {
@@ -221,29 +256,27 @@ const handleEnterEvent = () => {
 
 // 关闭事件
 const handleCloseEvent = () => {
-    if(eventInfo.value.plan_id === '') {
-        showDialog({message: '关闭事件前请先匹配预案'});
-        return false;
-    }
-    if(eventInfo.value.summary_file.length === 0) {
-        showDialog({message: '关闭事件前请先上传总结报告'});
-        return false;
-    }
-    showConfirmDialog({
-        title: '提示',
-        message: '关闭事件所有事项相关数据将不能再修改，是否继续？'
-    }).then(()=>{
-        closeEvent({ eventId: eventId.value }).then((res) => {
-            refreshData()
-        })
+  if (eventInfo.value.plan_id === '') {
+    showDialog({message: '关闭事件前请先匹配预案'});
+    return false;
+  }
+  if (eventInfo.value.summary_file.length === 0) {
+    showDialog({message: '关闭事件前请先上传总结报告'});
+    return false;
+  }
+  showConfirmDialog({
+    title: '提示',
+    message: '关闭事件所有事项相关数据将不能再修改，是否继续？'
+  }).then(() => {
+    closeEvent({eventId: eventId.value}).then((res) => {
+      refreshData()
     })
+  })
 };
 
 const associationState = reactive({
   show: false,
-  form: {
-
-  }
+  form: {}
 });
 
 const handleShowAssociation = () => {
@@ -252,31 +285,31 @@ const handleShowAssociation = () => {
 
 // 上报伤亡情况
 const uploadCasualtiesState = reactive({
-    show: false,
-    form: {
-        event_id: '',
-        deaths: '',
-        injuries: '',
-        missing: ''
-    }
+  show: false,
+  form: {
+    event_id: '',
+    deaths: '',
+    injuries: '',
+    missing: ''
+  }
 })
 
 
 const handleUploadCasualties = () => {
-    console.log('handleUploadCasualties');
-    uploadCasualtiesState.form.event_id = eventId.value;
-    uploadCasualtiesState.form.deaths = eventInfo.value.deaths;
-    uploadCasualtiesState.form.injuries = eventInfo.value.injuries;
-    uploadCasualtiesState.form.missing = eventInfo.value.missing;
-    uploadCasualtiesState.show = true;
+  console.log('handleUploadCasualties');
+  uploadCasualtiesState.form.event_id = eventId.value;
+  uploadCasualtiesState.form.deaths = eventInfo.value.deaths;
+  uploadCasualtiesState.form.injuries = eventInfo.value.injuries;
+  uploadCasualtiesState.form.missing = eventInfo.value.missing;
+  uploadCasualtiesState.show = true;
 };
 
 const onUploadCasualtiesDialogClose = (t) => {
-    console.log('onUploadCasualtiesDialogClose', t)
-    uploadCasualtiesState.show = false;
-    if(t) {
-        refreshData();
-    }
+  console.log('onUploadCasualtiesDialogClose', t)
+  uploadCasualtiesState.show = false;
+  if (t) {
+    refreshData();
+  }
 }
 
 const onStartEventDialogClose = (t) => {
@@ -289,60 +322,67 @@ const onStartEventDialogClose = (t) => {
     })
   }
 };
-onMounted(()=>{
+onMounted(() => {
   refreshData();
 })
 let hideMap = ref(false);
 let map;
 const refreshData = () => {
-    eventId.value = route.query.event_id as string;
-    getEventDetail({event_id: eventId.value}).then((res) => {
-      eventInfo.value = res.data
-      eventTrackState.value = res.data.event_status_tracks;
-      if (!eventInfo.value.longitude || !eventInfo.value.latitude) {
-        hideMap.vlaue = true
-      } else {
-        // 初始化地图
-        const lnglat = [eventInfo.value.longitude, eventInfo.value.latitude];
-        const { getMap } = useAMap({
-          key: '30d3d8448efd68cb0b284549fd41adcf',
-          version: '2.0',
-          zoom: 16,
-          center: lnglat,
-          dragEnable: true,
-          scrollWheel: true,
-          // 加载完成事件
-          onLoadCompleted: (AMap) => {
-            map = getMap();
-            let 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",
-              }),
-              anchor: 'bottom-center',
-              offset: new AMap.Pixel(0, 0)
-            });
-            marker.setMap(map);
-          }
-        });
-      }
-    })
+  eventId.value = route.query.event_id as string;
+  getEventDetail({event_id: eventId.value}).then((res) => {
+    eventInfo.value = res.data
+    eventTrackState.value = res.data.event_status_tracks;
+    if (!eventInfo.value.longitude || !eventInfo.value.latitude) {
+      hideMap.vlaue = true
+    } else {
+      // 初始化地图
+      const lnglat = [eventInfo.value.longitude, eventInfo.value.latitude];
+      const {getMap} = useAMap({
+        key: '30d3d8448efd68cb0b284549fd41adcf',
+        version: '2.0',
+        zoom: 16,
+        center: lnglat,
+        dragEnable: true,
+        scrollWheel: true,
+        // 加载完成事件
+        onLoadCompleted: (AMap) => {
+          map = getMap();
+          let 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",
+            }),
+            anchor: 'bottom-center',
+            offset: new AMap.Pixel(0, 0)
+          });
+          marker.setMap(map);
+        }
+      });
+    }
+  })
 }
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+// 下载方法
+const handleDownload = (file: any) => {
+  download2(baseUrl + '/file/download/' + file.url, file.name);
+};
 </script>
 
 <style lang="scss" scoped>
 .event_map {
-    width: 100%;
-    height: 170px;
+  width: 100%;
+  height: 170px;
 }
+
 .box {
   margin: 0 16px 16px;
   background-color: #ffffff;
   border-radius: 4px;
   box-shadow: 0 0 4px 0 #4554661a;
 }
+
 .event_title {
   font-weight: 600;
   min-height: 46px;
@@ -351,143 +391,157 @@ const refreshData = () => {
 }
 
 .event_prop {
-    padding: 0 12px;
-    line-height: 4.8vmin;
-    display: flex;
-    flex-direction: row;
-    justify-content: start;
-    color:#999;
-    font-size: 12px;
-    .event_type {
-      padding: 3px 10px;
-      border: 0.8px solid #2C81FF;
-      border-radius: 2px;
-      color: #2C81FF;
-      margin-right: 7px;
-    }
+  padding: 0 12px;
+  line-height: 4.8vmin;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  color: #999;
+  font-size: 12px;
 
-    .event_level {
-      padding: 3px 10px;
-      border: 0.8px solid #2C81FF;
-      border-radius: 2px;
-      margin-right: 7px;
-      color: #2C81FF;
-    }
+  .event_type {
+    padding: 3px 10px;
+    border: 0.8px solid #2C81FF;
+    border-radius: 2px;
+    color: #2C81FF;
+    margin-right: 7px;
+  }
 
-    .event_status {
-      padding: 3px 10px;
-      border: 0.8px solid #2C81FF;
-      border-radius: 2px;
-      color: #2C81FF;
-    }
+  .event_level {
+    padding: 3px 10px;
+    border: 0.8px solid #2C81FF;
+    border-radius: 2px;
+    margin-right: 7px;
+    color: #2C81FF;
+  }
+
+  .event_status {
+    padding: 3px 10px;
+    border: 0.8px solid #2C81FF;
+    border-radius: 2px;
+    color: #2C81FF;
+  }
 }
 
 .event_tab {
-    padding: 16px;
-    color: #A6000000;
-
-    .event-data-item {
-        font-size: 14px;
-        line-height: 8.0vmin;
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-        justify-content: space-between;
-        .item-left {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-          .icon1 {
-            width: 17px;
-            height: 16px;
-            background: url('@/assets/images/event/icon1.png') no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-          .icon2 {
-            width: 17px;
-            height: 16px;
-            background: url('@/assets/images/event/icon2.png') no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-          .icon3 {
-            width: 17px;
-            height: 16px;
-            background: url('@/assets/images/event/icon3.png') no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-          .icon4 {
-            width: 17px;
-            height: 16px;
-            background: url('@/assets/images/event/icon4.png') no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-          .icon5 {
-            width: 16px;
-            height: 16px;
-            background: url('@/assets/images/event/icon5.png') no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-          .icon6 {
-            width: 16px;
-            height: 16px;
-            background: url("@/assets/images/event/icon6.png") no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-          .icon7 {
-            width: 16px;
-            height: 16px;
-            background: url("@/assets/images/event/icon7.png") no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-          .icon8 {
-            width: 16px;
-            height: 16px;
-            background: url("@/assets/images/event/icon8.png") no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-          .icon9 {
-            width: 16px;
-            height: 16px;
-            background: url("@/assets/images/event/icon9.png") no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-          .icon10 {
-            width: 16px;
-            height: 16px;
-            background: url("@/assets/images/event/icon10.png") no-repeat;
-            background-size: 100% 100%;
-            margin-right: 7px;
-          }
-        }
-        .event-data-item-title {
-            color: #888;
-            min-width: 5em;
-        }
+  padding: 16px;
+  color: #A6000000;
 
-        .event-data-item-value {
-            color: #888;
-        }
+  .event-data-item {
+    font-size: 14px;
+    line-height: 8.0vmin;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
 
-        .blue {
-            color: #1989fa;
-        }
+    .item-left {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+
+      .icon1 {
+        width: 17px;
+        height: 16px;
+        background: url('@/assets/images/event/icon1.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+
+      .icon2 {
+        width: 17px;
+        height: 16px;
+        background: url('@/assets/images/event/icon2.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+
+      .icon3 {
+        width: 17px;
+        height: 16px;
+        background: url('@/assets/images/event/icon3.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+
+      .icon4 {
+        width: 17px;
+        height: 16px;
+        background: url('@/assets/images/event/icon4.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+
+      .icon5 {
+        width: 16px;
+        height: 16px;
+        background: url('@/assets/images/event/icon5.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+
+      .icon6 {
+        width: 16px;
+        height: 16px;
+        background: url("@/assets/images/event/icon6.png") no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+
+      .icon7 {
+        width: 16px;
+        height: 16px;
+        background: url("@/assets/images/event/icon7.png") no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+
+      .icon8 {
+        width: 16px;
+        height: 16px;
+        background: url("@/assets/images/event/icon8.png") no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+
+      .icon9 {
+        width: 16px;
+        height: 16px;
+        background: url("@/assets/images/event/icon9.png") no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+
+      .icon10 {
+        width: 16px;
+        height: 16px;
+        background: url("@/assets/images/event/icon10.png") no-repeat;
+        background-size: 100% 100%;
+        margin-right: 7px;
+      }
+    }
+
+    .event-data-item-title {
+      color: #888;
+      min-width: 5em;
     }
 
-    h3 {
-      font-size: 4.2vmin;
-      line-height: 8.0vmin;
+    .event-data-item-value {
+      color: #888;
     }
+
+    .blue {
+      color: #1989fa;
+    }
+  }
+
+  h3 {
+    font-size: 4.2vmin;
+    line-height: 8.0vmin;
+  }
 }
+
 .event_tab2 {
   padding: 16px;
   display: flex;
@@ -496,36 +550,73 @@ const refreshData = () => {
   align-items: center;
   color: rgba(0, 0, 0, 0.65);
 }
+
 .footer {
   padding: 0 16px 16px;
   display: flex;
   align-items: center;
   justify-content: center;
+
   .van-button {
     border-radius: 2px;
     width: 94px;
     height: 40px;
     font-size: 14px;
+
     &:first-child {
       margin-right: 24px;
     }
   }
 }
+
 .emptyIcon {
   width: 110px;
   height: 108px;
   background: url('@/assets/images/unrelatedPlan.png') no-repeat;
   background-size: 100% 100%;
 }
+
 .emptyIcon2 {
   width: 111px;
   height: 110px;
   background: url('@/assets/images/noReport.png') no-repeat;
   background-size: 100% 100%;
 }
+
 .emptyText {
   font-size: 14px;
   margin: 6px;
   color: rgba(0, 0, 0, 0.65);
 }
+
+.plan-content {
+  .content-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    color: #2C81FF;
+    font-weight: bold;
+
+    .download-icon {
+      display: inline-block;
+      width: 15px;
+      height: 14px;
+      background: url('@/assets/images/download.png') no-repeat;
+      background-size: 100% 100%;
+      margin-left: 20px;
+    }
+  }
+
+  .content-text {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.65);
+    max-height: 500px;
+    overflow-y: auto;
+  }
+}
+
+:deep(.van-tabs__wrap) {
+  border-bottom: 1px solid #F6F6F6;
+}
 </style>

src/views/mobileControl/SearchBtn.vue

@@ -106,7 +106,7 @@ const handleClickItem = (item) => {
 
 <style lang="scss" scoped>
 .popup-container {
-  width: 350px;
+  width: 325px;
   height: 100vh;
 
   .search-box {

src/views/mobileControl/index.vue

@@ -84,7 +84,7 @@ import SearchBtn from "./SearchBtn.vue";
 import {deepClone} from "@/utils";
 import {iconList} from "@/components/Map/mapData";
 import PositionSelect from "@/views/mobileControl/PositionSelect.vue";
-import {editEvent, registeredEvent} from "@/api/duty/eventing";
+import {editEvent, getListActive} from "@/api/duty/eventing";
 import {showFailToast, showSuccessToast} from "vant";
 import {closeEvent, getEventDetail} from "@/api/event";
 
@@ -243,7 +243,7 @@ onMounted(() => {
   } else {
     loading.value = false;
   }
-  registeredEvent({}).then((res) => {
+  getListActive({}).then((res) => {
     endEventState.columns = res.data;
   });
 })
@@ -412,10 +412,21 @@ onMounted(() => {
   border: 1px solid #DCE0EE;
   border-radius: 2px;
   margin-left: 6px;
-  padding: 5px 40px 5px 8px;
-  position: relative;;
+  padding: 5px 33px 5px 8px;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   &::before {
     content: '';
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    width: 13px;
+    height: 16px;
+    background: url(@/assets/images/selectIcon.png) no-repeat;
+    background-size: 100% 100%;
   }
 }
 </style>