修复分页active异常问题、状态点

src/assets/styles/element-ui.scss

@@ -403,7 +403,7 @@
     color: #a8abb2 !important;
   }
 }
-.el-pager li.is-active {
+.el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .btn-prev.is-active, .el-pagination.is-background .el-pager li.is-active {
   font-weight: normal !important;
   background-color: #2C81FF !important;
   border-color: #2C81FF !important;

src/assets/styles/index.scss

@@ -302,3 +302,54 @@ aside {
     }
   }
 }
+
+.dot-red {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #F90000;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.dot-green {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #61DDA2;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.dot-orange {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #FFA047;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.dot-blue{
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #2C81FF;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.dot-grey {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #bfbfbf;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.common-flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/views/duty/eventing/index.vue

@@ -9,36 +9,21 @@
               <el-col :span="6">
                 <el-form-item label="事件类型：" prop="event_type">
                   <el-select v-model="queryParams.event_type" clearable>
-                    <el-option
-                      v-for="item in mm_event_type"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    ></el-option>
+                    <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label="事件等级：" prop="event_level">
                   <el-select v-model="queryParams.event_level" clearable>
-                    <el-option
-                      v-for="item in mm_event_level"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    ></el-option>
+                    <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label="事件状态：" prop="event_status">
                   <el-select v-model="queryParams.event_status" clearable>
-                    <el-option
-                      v-for="item in mm_event_state"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    ></el-option>
+                    <el-option v-for="item in mm_event_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -107,13 +92,19 @@
         </el-table-column>
         <el-table-column label="事件等级" align="center" prop="event_level">
           <template #default="scope">
-            <dict-tag :options="mm_event_level" :value="scope.row.event_level" />
+            <div class="common-flex">
+              <i :class="getStatusClass(scope.row.event_level)"></i>
+              <dict-tag :options="mm_event_level" :value="scope.row.event_level" />
+            </div>
           </template>
         </el-table-column>
         <el-table-column label="事件地点" align="center" prop="address" />
         <el-table-column label="事件状态" align="center" prop="event_status">
           <template #default="scope">
-            <dict-tag :options="mm_event_state" :value="scope.row.event_status" />
+            <div class="common-flex">
+              <i :class="getStatusClass2(scope.row.event_status)"></i>
+              <dict-tag :options="mm_event_state" :value="scope.row.event_status" />
+            </div>
           </template>
         </el-table-column>
         <el-table-column label="事件时间" align="center" prop="event_time" />
@@ -129,8 +120,13 @@
       <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
     </div>
 
-    <EventEditDialog v-model="eventEditDialogState.show" :title="eventEditDialogState.title" :eventId="eventId" @getList="getList" />
-    <CloseEventDialog v-model="closeDialogState.show" :data="closeDialogState.form" :eventId="eventId" @update:model-value="handleCloseEventDialog" />
+    <EventEditDialog v-model="eventEditDialogState.show" :title="eventEditDialogState.title" :event-id="eventId" @get-list="getList" />
+    <CloseEventDialog
+      v-model="closeDialogState.show"
+      :data="closeDialogState.form"
+      :event-id="eventId"
+      @update:model-value="handleCloseEventDialog"
+    />
   </div>
 </template>
 
@@ -142,7 +138,9 @@ import EventEditDialog from './EventEditDialog.vue';
 import CloseEventDialog from './CloseEventDialog.vue';
 
 const proxy = getCurrentInstance()?.proxy;
-const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region'));
+const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
+  proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region')
+);
 const router = useRouter();
 const multipleTable = ref();
 const eventList = ref([]);
@@ -165,8 +163,8 @@ const initFormData = {
   address: '', // 事件地点
   longitude: '', // 经度
   latitude: '', // 纬度
-  event_time: '',// 事发时间
-  report_time: '',// 上报时间
+  event_time: '', // 事发时间
+  report_time: '', // 上报时间
   deaths: '',
   injuries: '',
   missing: '',
@@ -235,26 +233,26 @@ const eventEditDialogState = reactive({
 });
 
 const handleAdd = () => {
-  eventId.value = ""
-  eventEditDialogState.title = "新增事件"
-  eventEditDialogState.show = true
+  eventId.value = '';
+  eventEditDialogState.title = '新增事件';
+  eventEditDialogState.show = true;
 };
 
 // 修改事件
 const handleUpdate = (row) => {
   if (row) {
     eventId.value = row.event_id;
-    eventEditDialogState.title = "修改事件"
-    eventEditDialogState.show = true
+    eventEditDialogState.title = '修改事件';
+    eventEditDialogState.show = true;
   }
 };
 
 const handleDelete = (row) => {
   if (row) {
     ElMessageBox.confirm('确认删除事件吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'info',
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'info'
     }).then(() => {
       eventList.value = eventList.value.filter((item) => item.eventId !== row.event_id);
       deleteEvent({ eventId: row.event_id }).then((res) => {
@@ -263,7 +261,7 @@ const handleDelete = (row) => {
           getList();
         }, 500);
       });
-    })
+    });
   }
 };
 
@@ -281,17 +279,17 @@ const closeDialogState = reactive({
 
 const handleClose = (row) => {
   if (row) {
-    console.log(row)
-    closeDialogState.form.eventId = row.event_id
-    closeDialogState.form.deaths = row.deaths
-    closeDialogState.form.injuries = row.injuries
-    closeDialogState.form.missing = row.missing
+    console.log(row);
+    closeDialogState.form.eventId = row.event_id;
+    closeDialogState.form.deaths = row.deaths;
+    closeDialogState.form.injuries = row.injuries;
+    closeDialogState.form.missing = row.missing;
     closeDialogState.show = true;
   }
 };
 
 const handleCloseEventDialog = (b) => {
-  console.log('handleCloseEventDialog', b)
+  console.log('handleCloseEventDialog', b);
 };
 
 // 查看事件详情
@@ -305,9 +303,27 @@ const handleView = (row) => {
     });
   }
 };
-
+const getStatusClass = (value) => {
+  if (['0', '1'].includes(value)) {
+    return 'dot-green';
+  } else if (value === '2') {
+    return 'dot-orange';
+  } else if (['3', '4'].includes(value)) {
+    return 'dot-red';
+  }
+};
+const getStatusClass2 = (value) => {
+  if (['0'].includes(value)) {
+    return 'dot-green';
+  } else if (value === '1') {
+    return 'dot-blue';
+  } else if (['2'].includes(value)) {
+    return 'dot-red';
+  } else if (['3'].includes(value)) {
+    return 'dot-grey';
+  }
+};
 onMounted(() => {
   getList();
 });
-
 </script>