信息发布、信息接报

src/api/InformationReception/InformationReception.ts

@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+// 信息列表
+export function InformationList(data) {
+  return request({
+    url: "/api/info_publish/back/list",
+    method: "get",
+    data: data
+  });
+}

src/views/InformationReception/index.vue

@@ -1,193 +1,218 @@
 <template>
   <div class="table-content">
+    <!-- 搜索框 -->
+    <div class="search-box">
+      <el-input
+        v-model="searchQuery"
+        class="search-input"
+        placeholder="请输入内容"
+        prefix-icon="el-icon-search"
+        clearable
+        @keyup.enter="onSearch"
+      />
+    </div>
     <!-- 筛选和排序区域 -->
     <div class="filter-sort-area">
       <div class="filter-item">
         <span>类型：</span>
-        <el-select
-          v-model="selectedType"
-          placeholder="请选择类型"
-          @change="fetchData"
-        >
-          <el-option
-            v-for="type in types"
-            :key="type"
-            :label="type"
-            :value="type"
-          />
-        </el-select>
+        <span class="type-trigger" @click="showTypePicker">
+          {{ selectedType || "请选择类型" }}
+          <i class="el-icon-arrow-down" />
+        </span>
       </div>
+      <!-- 类型选择抽屉 -->
+      <el-drawer
+        v-model="typeDrawerVisible"
+        title="选择类型"
+        direction="btt"
+        size="30%"
+      >
+        <ul>
+          <li v-for="type in types" :key="type" @click="selectType(type)">
+            {{ type }}
+          </li>
+        </ul>
+      </el-drawer>
       <div class="filter-item">
         <span>时间：</span>
-        <el-date-picker
-          v-model="selectedTime"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          @change="fetchData"
-        />
+        <span class="time-label" @click="showTimePicker">
+          {{ selectedTimeLabel || "请选择时间" }}
+        </span>
+        <i class="el-icon-arrow-down" />
       </div>
       <div class="filter-item">
         <span>排序：</span>
-        <el-radio-group v-model="sortOrder" @change="fetchData">
-          <el-radio-button :label="'asc'">正序</el-radio-button>
-          <el-radio-button :label="'desc'">倒序</el-radio-button>
-        </el-radio-group>
+        <span class="sort-order" @click="toggleSortOrder">
+          {{ sortOrder === "asc" ? "↑" : "↓" }}
+          <i
+            :class="['el-icon-arrow-up', sortOrder === 'asc' ? 'active' : '']"
+          />
+          <i
+            :class="[
+              'el-icon-arrow-down',
+              sortOrder === 'desc' ? 'active' : ''
+            ]"
+          />
+        </span>
       </div>
     </div>
 
     <!-- 信息列表 -->
-    <div v-for="(item, index) in dataList" :key="index" class="info-box">
-      <div class="status-icon" :class="item.statusClass" />
+    <div v-for="(item, index) in sortedDataList" :key="index" class="info-box">
+      <div class="status-icon" :class="getStatusClass(item.examine_status)" />
       <div class="info-content">
         <div class="info-header">
           <div class="info-title">{{ item.title }}</div>
-          <div class="info-time">{{ item.time }}</div>
+          <div class="info-time">{{ item.publish_time }}</div>
+        </div>
+        <div class="info-description">
+          <div>发布人：{{ item.nick_name }}</div>
+          <div>部门：{{ item.dept_name }}</div>
+          <div>发布渠道：{{ item.publish_channel }}</div>
+          <div>阅读次数：{{ item.user_count }}</div>
+          <div>审核状态：{{ item.examine_status }}</div>
+          <div>发布状态：{{ item.publish_status }}</div>
         </div>
-        <div class="info-description">{{ item.description }}</div>
       </div>
     </div>
+    <!-- 时间选择抽屉 -->
+    <el-drawer
+      v-model="drawerVisible"
+      title="选择时间"
+      direction="btt"
+      size="30%"
+    >
+      <el-date-picker
+        v-model="selectedTime"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        @change="handleTimeChange"
+      />
+      <span class="drawer-footer">
+        <el-button @click="drawerVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmTime">确定</el-button>
+      </span>
+    </el-drawer>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, reactive, onUnmounted, watch } from "vue";
-import { selectTask } from "@/api/emergencyCommandMap/JointDuty";
+import { ref, onMounted, onUnmounted, watch, computed } from "vue";
+import { InformationList } from "@/api/InformationReception/InformationReception";
 import { parseTime } from "@/utils/ruoyi";
+import {
+  ElInput,
+  ElDrawer,
+  ElDatePicker,
+  ElButton,
+  ElIconArrowDown
+} from "element-plus";
 
-const newSectionState = reactive({
-  showListDialog: false
-});
-
-// 选中的任务
-const selectedTask = ref({
-  task_id: "",
-  sortBy: "creation_time",
-  pageNum: 2,
-  pageSize: 20,
-  event_code: "YJSJ0000000001"
-});
-// ref()创建一个响应式对象
 const dataList = ref([]);
-const showScroll = ref(false);
+const selectedType = ref("↓");
+const types = ref(["预警", "灾情", "处置", "指挥救援", "公众防范"]);
+const selectedTime = ref([null, null]);
+const sortOrder = ref("desc");
+const drawerVisible = ref(false); // 确保使用 ref 定义
+const selectedTimeLabel = ref("↓");
+const typeDrawerVisible = ref(false);
+const searchQuery = ref("");
+
+const sortedDataList = computed(() => {
+  return dataList.value.slice().sort((a, b) => {
+    if (sortOrder.value === "asc") {
+      return new Date(a.publish_time) - new Date(b.publish_time);
+    } else {
+      return new Date(b.publish_time) - new Date(a.publish_time);
+    }
+  });
+});
 
-const props = defineProps<{
-  eventId?: string; // 使用可选属性
-}>();
+const showTypePicker = () => {
+  typeDrawerVisible.value = true;
+};
 
-// 事件接报
-const eventManageState = reactive({
-  showListDialog: false
-});
+const selectType = type => {
+  selectedType.value = type;
+  typeDrawerVisible.value = false;
+  fetchData(); // 重新获取数据
+};
 
-// 请求数据
 const fetchData = async () => {
   try {
-    console.log("请求任务数据:", props.eventId);
-    // 构建请求参数对象
     const params = {
-      event_code: selectedTask.value.event_code, // 确保这里的 props.eventId 是字符串类型，如果是数字类型需要转换为字符串
-      sortOrder: sortOrder.value, // 假设 sortOrder 是响应式的
-      sortBy: selectedTask.value.sortBy // 假设 sortBy 是 selectedTask 的一个属性
+      publish_group: "",
+      publish_status: "0",
+      examine_status: "0",
+      page: "1",
+      page_size: "20"
     };
-    const res = await selectTask(params); // 确保 selectTask 函数正确处理了这些参数
-    res.data.forEach(item => {
-      item.update_time = parseTime(item.update_time);
-      item.statusClass = getStatusClass(item.status);
+    const res = await InformationList(params);
+    dataList.value = res.data.map(item => {
+      item.publish_time = parseTime(item.publish_time);
+      return item;
     });
-    dataList.value = res.data;
+    sortedDataList.value = dataList.value;
   } catch (error) {
     console.error("请求任务数据失败:", error);
   }
 };
 
-const openUpdateDialog = task => {
-  selectedTask.value = { ...task };
-  newSectionState.showListDialog = true;
-};
-
-const handleUpdateSuccess = updatedData => {
-  console.log("任务进度更新成功:", updatedData);
-  fetchData(); // 重新加载任务列表
-};
-
-const toggleScroll = () => {
-  showScroll.value = !showScroll.value;
-};
-
-// 设置定时器
-const fetchInterval = process.env.NODE_ENV === "development" ? 60000 : 3000; // 每60秒刷新一次(刷新太频繁影响调试)
-let intervalId: number | null = null;
-
-const startFetchingData = () => {
-  if (!intervalId) {
-    intervalId = setInterval(() => {
-      fetchData();
-    }, fetchInterval);
-  }
-};
-
-const stopFetchingData = () => {
-  if (intervalId) {
-    clearInterval(intervalId);
-    intervalId = null;
-  }
-};
-
-// 在组件挂载时开始定时获取数据
 onMounted(() => {
-  if (props.eventId) {
-    fetchData();
-    startFetchingData();
-  }
+  fetchData();
 });
 
-// 在组件卸载时清除定时器
 onUnmounted(() => {
-  stopFetchingData();
+  // 清除定时器等资源
 });
 
+const toggleSortOrder = () => {
+  sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
+};
+
 watch(
-  () => props.eventId,
-  newValue => {
-    if (newValue) {
-      fetchData();
-      startFetchingData();
-    } else {
-      stopFetchingData();
-    }
-  },
-  { immediate: true }
+  () => [selectedType.value, selectedTime.value, sortOrder.value],
+  () => {
+    fetchData();
+  }
 );
 
-// 类型筛选
-const selectedType = ref("");
-const types = ref(["预警", "灾情", "处置", "指挥救援", "公众防范"]);
+const showTimePicker = () => {
+  drawerVisible.value = true;
+};
 
-// 时间筛选
-const selectedTime = ref([null, null]);
+const handleTimeChange = value => {
+  selectedTimeLabel.value = value ? `${value[0]} 至 ${value[1]}` : "请选择时间";
+};
 
-// 排序
-const sortOrder = ref("desc");
+const confirmTime = () => {
+  drawerVisible.value = false;
+  fetchData(); // 重新获取数据
+};
 
-// 根据状态设置类名的方法
 const getStatusClass = (status: string): string => {
   switch (status) {
-    case "预警":
+    case "审核中":
       return "warning-icon";
-    case "灾情":
-      return "disaster-icon";
-    case "处置":
-      return "disposal-icon";
-    case "指挥救援":
-      return "rescue-icon";
-    case "公众防范":
-      return "public-defense-icon";
+    case "待审批":
+      return "pending-icon";
+    case "已通过":
+      return "success-icon";
+    case "已拒绝":
+      return "error-icon";
     default:
       return "";
   }
 };
+
+//搜索
+const onSearch = () => {
+  // 执行搜索操作
+  console.log("搜索内容:", searchQuery.value);
+  // 这里可以添加搜索的逻辑，比如调用 API 或更新数据列表
+};
 </script>
 
 <style scoped>
@@ -210,10 +235,14 @@ const getStatusClass = (status: string): string => {
 
 .info-box {
   display: flex;
-  margin-bottom: 16px;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
 }
 
 .status-icon {
+  width: 20px;
+  height: 20px;
   margin-right: 10px;
 }
 
@@ -240,24 +269,30 @@ const getStatusClass = (status: string): string => {
   color: #333;
 }
 
-/* 添加状态图标的样式 */
-.warning-icon {
-  /* 预警图标样式 */
+.el-icon-arrow-down {
+  margin-left: 8px;
 }
 
-.disaster-icon {
-  /* 灾情图标样式 */
+.sort-order {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
-.disposal-icon {
-  /* 处置图标样式 */
+.el-icon-arrow-up,
+.el-icon-arrow-down {
+  margin-left: 5px;
 }
 
-.rescue-icon {
-  /* 指挥救援图标样式 */
+.search-box {
+  padding: 10px;
+  background-color: #f5f5f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.public-defense-icon {
-  /* 公众防范图标样式 */
+.search-input {
+  width: 300px;
 }
 </style>