Merge remote-tracking branch 'origin/dev' into dev

src/types/components.d.ts

@@ -103,7 +103,6 @@ declare module 'vue' {
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
-    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/emergencyCommandMap/RightSection/RenWuGenZong.vue

@@ -33,9 +33,10 @@ import { parseTime } from '@/utils/ruoyi';
 import RenWuGengXin from '@/views/emergencyCommandMap/RightSection/RenWuGengXin.vue';
 
 const newSectionState = reactive({
-  showListDialog: false,
+  showListDialog: false
 });
 
+// 选中的任务
 const selectedTask = ref({
   task_id: '',
   sortBy: 'creation_time',
@@ -43,6 +44,7 @@ const selectedTask = ref({
   pageSize: 20
 });
 
+// ref()创建一个响应式对象
 const dataList = ref([]);
 const showScroll = ref(false);
 

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,46 +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);
@@ -80,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>
@@ -91,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 {
@@ -130,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

@@ -45,16 +45,19 @@ const props = defineProps({
     })
   }
 });
-
+// 事件触发器
 const emit = defineEmits(['update:modelValue', 'update-success']);
 
+// 任务弹窗是否显示
 const visible = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val)
 });
 
+// 任务数据
 const task = reactive({ ...props.task });
 
+// 监听任务数据变化
 watch(
   () => props.task,
   (newTask) => {
@@ -64,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>
@@ -45,56 +50,46 @@
       <div class="alert-details">
         <table class="alert-table">
           <thead>
-          <tr>
-            <th>
-              类型
-              <span @click="toggleTypeDropdown" class="dropdown-trigger">
-                <img src="@/assets/images/map/warningInfo/ic_triangle_table.png" alt="类型选择" class="dropdown-icon" />
-              </span>
-              <div v-if="showTypeDropdown" class="dropdown-menu">
-                <div class="dropdown-item" :class="{ selected: selectedType === '' }" @click="selectType('')">全部</div>
-                <div
-                  v-for="type in alertTypes"
-                  :key="type"
-                  class="dropdown-item"
-                  :class="{ selected: selectedType === type }"
-                  @click="selectType(type)"
+            <tr>
+              <th class="dropdown-trigger">
+                <el-select
+                  v-model="selectedType"
+                  placeholder="类型"
+                  size="large"
+                  class="custom-select2"
+                  popper-class="custom-select-popper2"
+                  :teleported="false"
                 >
-                  {{ type }}
-                </div>
-              </div>
-            </th>
-            <th>
-              等级
-              <span @click="toggleLevelDropdown" class="dropdown-trigger">
-                <img src="@/assets/images/map/warningInfo/ic_triangle_table.png" alt="等级选择" class="dropdown-icon" />
-              </span>
-              <div v-if="showLevelDropdown" class="dropdown-menu">
-                <div class="dropdown-item" :class="{ selected: selectedLevel === '' }" @click="selectLevel('')">全部</div>
-                <div
-                  v-for="level in alertLevels"
-                  :key="{ level }"
-                  class="dropdown-item"
-                  :class="{ selected: selectedLevel === level }"
-                  @click="selectLevel(level)"
+                  <el-option label="全部" value="" />
+                  <el-option v-for="type in alertTypes" :key="type" :label="type" :value="type" />
+                </el-select>
+              </th>
+              <th>
+                <el-select
+                  v-model="selectedLevel"
+                  placeholder="等级"
+                  size="large"
+                  class="custom-select2"
+                  popper-class="custom-select-popper2"
+                  :teleported="false"
                 >
-                  {{ level }}
-                </div>
-              </div>
-            </th>
-            <th>区域</th>
-            <th>发布时间</th>
-          </tr>
+                  <el-option label="全部" value="" />
+                  <el-option v-for="level in alertLevels" :key="level" :label="level" :value="level" />
+                </el-select>
+              </th>
+              <th>区域</th>
+              <th>发布时间</th>
+            </tr>
           </thead>
           <tbody>
-          <tr v-for="(alert, index) in alertDetails" :key="index" class="alert-row">
-            <td>{{ alert.type }}</td>
-            <td>
-              <div :class="['level-icon', alert.level.toLowerCase()]">{{ alert.level }}</div>
-            </td>
-            <td>{{ alert.area }}</td>
-            <td>{{ alert.release_time }}</td>
-          </tr>
+            <tr v-for="(alert, index) in alertDetails" :key="index" class="alert-row">
+              <td>{{ alert.type }}</td>
+              <td>
+                <div :class="['level-icon', alert.level.toLowerCase()]">{{ alert.level }}</div>
+              </td>
+              <td>{{ alert.area }}</td>
+              <td>{{ alert.release_time }}</td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -298,7 +293,7 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .menu-content {
   width: 1579px;
   height: 1394px;
@@ -356,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: 10px; /* 图标和文字之间的间距 */
+  // 向左偏移 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 {
@@ -417,7 +432,6 @@ export default defineComponent({
 
 .count-num {
   font-size: 40px; /* 根据需要调整字体大小 */
-  top: 30px;
   color: #fdfcfc;
   position: absolute; /* 相对于父元素定位 */
 }