完成预警信息样式，修改任务跟踪的弹窗

src/types/components.d.ts

@@ -44,9 +44,6 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -59,15 +56,12 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -78,7 +72,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/emergencyCommandMap/RightSection/RenWuGengXin.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showRegisterDialog" class="dialog">
+  <div v-if="visible" class="dialog">
     <div class="dialog-content">
       <div class="dialog-header">
         <span>任务进度更新</span>
@@ -24,7 +24,7 @@
       </div>
 
       <div class="dialog-footer">
-        <button @click="confirmRegister">确定</button>
+        <button @click="confirmRegister" :disabled="!isFormValid">确定</button>
         <button @click="closeDialog">取消</button>
       </div>
     </div>
@@ -32,47 +32,58 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, defineEmits, computed } from "vue";
-import { updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty.ts'; // 确保API路径正确
-
-const showRegisterDialog = ref(false);
-// 任务数据,用来初始化弹窗表单
-const newTask = reactive({
-  task_description: '',
-  unit_name: '当前用户',
-  registrar: ''
+import { ref, reactive, defineEmits, computed, watch } from 'vue';
+import { updateTaskRegistration } from '@/api/emergencyCommandMap/JointDuty.ts';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  task: {
+    type: Object,
+    default: () => ({
+      task_id: '',
+      task_description: '',
+      unit_name: '',
+      registrar: ''
+    })
+  }
 });
-const units = ref(['已处理', '已完成']);
-
-// 打开弹窗并初始化任务数据
-const openDialog = (task) => {
-  newTask.task_description = task.task_description;
-  newTask.unit_name = task.unit_name;
-  newTask.registrar = task.registrar || '';
-  showRegisterDialog.value = true;
-};
-
-// 关闭弹窗
-const closeDialog = () => {
-  showRegisterDialog.value = false;
-};
 
 const emit = defineEmits(['update:modelValue', 'update-success']);
+const newTask = reactive({ ...props.task }); // 初始化任务数据
+const units = ref(['已处理', '已完成']);
 
+// 控制弹窗显示状态
 const visible = computed({
   get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
+  set: (val) => {
+    emit('update:modelValue', val);
+    if (!val) {
+      resetForm(); // 关闭时重置表单
+    }
+  }
 });
 
+// 表单有效性检查
+const isFormValid = computed(() => newTask.registrar !== '');
+
+const resetForm = () => {
+  newTask.task_description = '';
+  newTask.unit_name = '当前用户';
+  newTask.registrar = '';
+};
+
 // 确认登记任务
 const confirmRegister = async () => {
   try {
     const response = await updateTaskRegistration({
-      task_id: newTask.task_id, // 假设任务有唯一ID
-      processing_status: newTask.processing_status
+      task_id: newTask.task_id,
+      processing_status: newTask.registrar // 假设 registrar 作为状态
     });
     if (response.code === 200) {
-      console.log('任务进度更新成功');
+      emit('update-success', newTask); // 发出更新成功事件
       closeDialog();
     } else {
       console.error('任务进度更新失败:', response.msg);
@@ -81,6 +92,20 @@ const confirmRegister = async () => {
     console.error('请求任务进度更新失败:', error);
   }
 };
+
+// 关闭弹窗
+const closeDialog = () => {
+  visible.value = false; // 控制弹窗显示
+};
+
+// 监听任务数据变化
+watch(
+  () => props.task,
+  (newTaskData) => {
+    Object.assign(newTask, newTaskData); // 更新任务数据
+  },
+  { immediate: true } // 初始加载时同步
+);
 </script>
 
 <style scoped>
@@ -92,7 +117,7 @@ const confirmRegister = async () => {
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 50px 50px rgba(0, 0, 0, 0.1);
-  width: 1500px;
+  width: 600px; /* 调整宽度 */
 }
 
 .dialog-header {
@@ -131,9 +156,8 @@ button:hover {
   background-color: #2980b9;
 }
 
-textarea,
-select,
-input[type='text'] {
+input[type='text'],
+select {
   width: 100%;
   box-sizing: border-box;
   padding: 5px;

src/views/emergencyCommandMap/RightSection/RenWuTanChuan.vue

@@ -54,8 +54,10 @@ const visible = computed({
   set: (val) => emit('update:modelValue', val)
 });
 
+// 任务数据
 const task = reactive({ ...props.task });
 
+// 监听任务数据变化
 watch(
   () => props.task,
   (newTask) => {
@@ -65,6 +67,7 @@ watch(
 
 const units = ['已处理', '已完成'];
 
+// 表单是否有效
 const isFormValid = computed(() => {
   return task.progress !== '';
 });

src/views/globalMap/RightMenu/WarningInfo.vue

@@ -9,20 +9,20 @@
       <div class="alert-boxes">
         <div class="section-title">生效预警</div>
         <div class="alert-items">
-          <div class="data-box1">
-            <img src="@/assets/images/map/warningInfo/ic_ty.png" alt="台风图标" class="alert-icon" />
+          <div v-if="activeAlerts.some((alert) => alert.type === '台风')" class="data-box1">
+            <img src="@/assets/images/map/warningInfo/by_1.png" alt="台风图标" class="alert-icon" />
             <div class="box-text1">台风</div>
           </div>
-          <div class="data-box2">
-            <img src="@/assets/images/map/warningInfo/ic_tr.png" alt="暴雨图标" class="alert-icon" />
+          <div v-if="activeAlerts.some((alert) => alert.type === '暴雨预警')" class="data-box2">
+            <img src="@/assets/images/map/warningInfo/by_2.png" alt="暴雨图标" class="alert-icon" />
             <div class="box-text1">暴雨</div>
           </div>
-          <div class="data-box3">
-            <img src="@/assets/images/map/warningInfo/ic_tstorm.png" alt="雷雨大风图标" class="alert-icon" />
+          <div v-if="activeAlerts.some((alert) => alert.type === '雷雨大风')" class="data-box3">
+            <img src="@/assets/images/map/warningInfo/by_3.png" alt="雷雨大风图标" class="alert-icon" />
             <div class="box-text1">雷雨大风</div>
           </div>
-          <div class="data-box4">
-            <img src="@/assets/images/map/warningInfo/ic_ht.png" alt="高温图标" class="alert-icon" />
+          <div v-if="activeAlerts.some((alert) => alert.type === '高温')" class="data-box4">
+            <img src="@/assets/images/map/warningInfo/by_4.png" alt="高温图标" class="alert-icon" />
             <div class="box-text1">高温</div>
           </div>
         </div>
@@ -36,7 +36,12 @@
           <div v-for="(count, index) in alertCounts" :key="index" class="count-item">
             <span class="count-num">{{ count.num }}</span>
             <img :src="getLevelImage(count.level)" :alt="`${getLevelName(count.level)}预警图标`" class="count-icon" />
-            <span :class="['count-level', `level-${getLevelName(count.level).toLowerCase()}`]">{{ getLevelName(count.level) }}预警</span>
+            <span
+              :class="['count-level', `level-${getLevelName(count.level).toLowerCase()}`]"
+              :style="{ color: index === alertCounts.length - 1 ? 'blue' : '#fdfcfc' }"
+            >
+              {{ getLevelName(count.level) }}预警
+            </span>
           </div>
         </div>
       </div>
@@ -346,33 +351,53 @@ export default defineComponent({
 }
 
 .alert-items {
-  display: flex; /* 水平排列预警图标 */
-  gap: 20px; /* 可选：添加间距 */
+  display: flex;
+  justify-content: space-between; /* 水平排列 */
+  align-items: flex-start; /* 图标与格子对齐顶部 */
+  flex-wrap: wrap; /* 如果内容超出宽度，则换行 */
+  margin-top: 20px;
 }
 
 .data-box1,
 .data-box2,
 .data-box3,
 .data-box4 {
-  background: url('@/assets/images/map/warningInfo/bg_未选中.png') no-repeat;
-  flex: 1; /* 让每个盒子平分父容器的宽度 */
-  height: 180px; /* 根据需要调整高度 */
+  width: 350px; /* 每个盒子的宽度 */
+  height: 260px; /* 每个盒子的高度 */
+  background:
+    url('@/assets/images/map/warningInfo/bg_未选中.png') no-repeat,
+    url('@/assets/images/map/warningInfo/ic_未选中.png') no-repeat;
+
+  /* 第一个背景自适应，第二个背景设置为特定大小 */
+  background-size:
+    contain,
+    40px 40px; /* 第一个背景自适应，第二个为40x40像素 */
+  background-position:
+    center,
+    calc(100% - 20px) calc(100% - 20px); /* 第一个背景居中，第二个背景向左下偏移10px */
+
   display: flex;
-  flex-direction: column; /* 子元素垂直排列 */
-  align-items: center; /* 水平居中 */
-  justify-content: center; /* 垂直居中 */
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start; /* 图标与文字对齐顶部 */
+  margin-right: 10px; /* 添加间距 */
+  position: relative; /* 为内部定位做准备 */
 }
 
+
 .alert-icon {
-  width: 90px; /* 图标的宽度 */
-  height: 90px; /* 图标的高度 */
-  margin-bottom: 5px; /* 图标和文字之间的间距 */
+  // 向左偏移 50% 的宽度，使图标居中
+  margin-left: -50px;
+  margin-top: 30px; /* 根据需要调整位置 */
 }
 
 .box-text1 {
   color: #fff;
   font-size: 36px;
-  text-align: center;
+  // 向左偏移 50% 的宽度，使文字居中
+  margin-left: -50px;
+  margin-top: auto; /* 将文字推到图片下方 */
+  margin-bottom: 50px; /* 根据需要调整文字与底部的间距 */
 }
 
 .alert-count {
@@ -407,7 +432,6 @@ export default defineComponent({
 
 .count-num {
   font-size: 40px; /* 根据需要调整字体大小 */
-  top: 30px;
   color: #fdfcfc;
   position: absolute; /* 相对于父元素定位 */
 }