manhole-cover-management-system/src/views/zdyw/sjtj/index.vue

<template>
  <el-card>
    <el-form :model="searchForm" ref="searchFormRef" :inline="true" class="search-form">
      <el-form-item label="终端状态" prop="status">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否处理延期" prop="isDelayed">
        <el-select v-model="searchForm.isDelayed" placeholder="请选择">
          <el-option
              v-for="item in isDelayedOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="异常时间段" prop="timeRange">
        <el-select v-model="searchForm.timeRange" placeholder="请选择">
          <el-option
              v-for="item in timeRangeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startDate">
        <el-date-picker
            v-model="searchForm.startDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-date-picker
            v-model="searchForm.endDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="filteredTerminals" border stripe>
      <el-table-column prop="status" label="终端状态" width="120" />
      <el-table-column prop="terminalId" label="终端编号" width="120" />
      <el-table-column prop="terminalName" label="终端名称" width="120" />
      <el-table-column prop="relatedCoverId" label="关联井盖设备编号" width="120" />
      <el-table-column prop="address" label="终端详细地址" width="120" />
      <el-table-column prop="abnormalStatus" label="异常状态" width="120" />
      <el-table-column prop="abnormalStartTime" label="异常开始时间" width="120" />
      <el-table-column prop="handlingStatus" label="处理状态" width="120" />
      <el-table-column prop="handlingEndTime" label="处理结束时间" width="120" />
      <el-table-column prop="recoveryTime" label="设备恢复时间" width="120" />
      <el-table-column prop="handler" label="处理人" width="120" />
      <el-table-column prop="isDelayed" label="是否处理延期" width="120" />
      <el-table-column prop="timeRange" label="异常时间段" width="120" />
    </el-table>

    <el-pagination
        background
        layout="prev, pager, next"
        :total="terminals.length"
        :page-size="10"
        @current-change="handleCurrentChange"
    />

    <el-button type="primary" @click="exportTerminals">导出</el-button>
  </el-card>
</template>
<script setup>
import { ref, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// import * as XLSX from 'xlsx'; // 导出数据到 Excel

// 模拟数据
const terminals = ref([
  {
    status: '异常',
    terminalId: 'T20230915001',
    terminalName: '终端A',
    relatedCoverId: 'C20230915001',
    address: '上海市浦东新区陆家嘴环路1000号',
    abnormalStatus: '信号弱',
    abnormalStartTime: '2023-09-15',
    handlingStatus: '处理中',
    handlingEndTime: '2023-09-16',
    recoveryTime: '2023-09-17',
    handler: '张三',
    isDelayed: false,
    timeRange: '24小时内',
  },
  // 更多模拟数据...
]);

// 搜索表单
const searchForm = ref({
  status: '',
  isDelayed: '',
  timeRange: '',
  startDate: null,
  endDate: null,
});

// 状态选项
const statusOptions = ref([
  { value: '正常', label: '正常' },
  { value: '异常', label: '异常' },
]);

// 是否处理延期选项
const isDelayedOptions = ref([
  { value: true, label: '是' },
  { value: false, label: '否' },
]);

// 异常时间段选项
const timeRangeOptions = ref([
  { value: '24小时内', label: '24小时内' },
  { value: '48小时内', label: '48小时内' },
  { value: '72小时内', label: '72小时内' },
  { value: '72小时外', label: '72小时外' },
]);

// 过滤后的终端列表
const filteredTerminals = computed(() => {
  return terminals.value.filter(terminal => {
    return (
        (!searchForm.value.status || terminal.status === searchForm.value.status) &&
        (!searchForm.value.isDelayed || terminal.isDelayed === searchForm.value.isDelayed) &&
        (!searchForm.value.timeRange || terminal.timeRange === searchForm.value.timeRange) &&
        (!searchForm.value.startDate || terminal.abnormalStartTime >= searchForm.value.startDate) &&
        (!searchForm.value.endDate || terminal.abnormalStartTime <= searchForm.value.endDate)
    );
  });
});

// 处理搜索按钮点击事件
function handleSearch() {
  // 这里可以添加进一步的逻辑，例如调用后端API进行数据过滤
}

// 处理重置按钮点击事件
function resetSearch() {
  Object.assign(searchForm.value, {
    status: '',
    isDelayed: '',
    timeRange: '',
    startDate: null,
    endDate: null,
  });
}

// 处理分页改变事件
function handleCurrentChange(page) {
  // 这里可以添加分页逻辑
}

// 导出终端数据
function exportTerminals() {
  // 导出数据的逻辑
}

</script>