manhole-cover-management-system/src/views/ajbl/ajlzgl/gzjd/index.vue

<template>
  <div class="supervision-dashboard">
    <el-card class="supervision-list">
      <h3>案件跟踪监督</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="searchInput" placeholder="搜索案件..." clearable @keyup.enter="searchCases"></el-input>
        </el-col>
        <el-col :span="16">
          <el-form :inline="true" :model="filterForm" @submit.native.prevent>
            <el-form-item label="案件编号">
              <el-input v-model="filterForm.caseNumber" placeholder="案件编号"></el-input>
            </el-form-item>
            <el-form-item label="案件名称">
              <el-input v-model="filterForm.caseName" placeholder="案件名称"></el-input>
            </el-form-item>
            <el-form-item label="案件地址">
              <el-input v-model="filterForm.address" placeholder="案件地址"></el-input>
            </el-form-item>
            <el-form-item label="案件级别">
              <el-select v-model="filterForm.level" placeholder="请选择案件级别">
                <el-option label="紧急" value="紧急"></el-option>
                <el-option label="普通" value="普通"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报警类型">
              <el-select v-model="filterForm.type" placeholder="请选择报警类型">
                <el-option label="损坏" value="损坏"></el-option>
                <el-option label="丢失" value="丢失"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开始日期">
              <el-date-picker
                  v-model="filterForm.startDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期">
              <el-date-picker
                  v-model="filterForm.endDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchCases">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table :data="filteredCases" style="width: 100%" @row-click="handleRowClick">
        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
        <el-table-column prop="status" label="案件状态"></el-table-column>
        <el-table-column prop="description" label="报警描述"></el-table-column>
        <el-table-column prop="assignedTo" label="指派给"></el-table-column>
        <el-table-column prop="assignedDate" label="指派日期"></el-table-column>
        <el-table-column prop="lastUpdate" label="最后更新时间"></el-table-column>
      </el-table>
    </el-card>

    <el-card v-if="selectedCase" class="case-details">
      <h3>案件详情</h3>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="案件编号">{{ selectedCase.caseNumber }}</el-descriptions-item>
        <el-descriptions-item label="报警类型">{{ selectedCase.alarmType }}</el-descriptions-item>
        <el-descriptions-item label="案件状态">{{ selectedCase.status }}</el-descriptions-item>
        <el-descriptions-item label="报警描述">{{ selectedCase.description }}</el-descriptions-item>
        <el-descriptions-item label="指派给">{{ selectedCase.assignedTo }}</el-descriptions-item>
        <el-descriptions-item label="指派日期">{{ selectedCase.assignedDate }}</el-descriptions-item>
        <el-descriptions-item label="最后更新时间">{{ selectedCase.lastUpdate }}</el-descriptions-item>
        <el-descriptions-item label="案件流转">
          <p>{{ selectedCase.flow }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="办理经过">
          <p>{{ selectedCase.process }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="结案信息">
          <p>{{ selectedCase.conclusion }}</p>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 模拟数据
const cases = ref([
  {
    caseNumber: 'C20230915001',
    alarmLevel: '紧急',
    alarmType: '损坏',
    status: '处理中',
    description: '井盖破损严重，存在安全隐患。',
    assignedTo: '张三',
    assignedDate: '2023-09-15',
    lastUpdate: '2023-09-17',
    flow: '案件已分配给水务局，正在处理中...',
    process: '已收到工单，正在处理中...',
    conclusion: '案件已结案'
  },
  {
    caseNumber: 'C20230915002',
    alarmLevel: '普通',
    alarmType: '丢失',
    status: '已结案',
    description: '井盖丢失，行人通行不便。',
    assignedTo: '李四',
    assignedDate: '2023-09-15',
    lastUpdate: '2023-09-16',
    flow: '案件已分配给市政工程局，正在处理中...',
    process: '已收到工单，正在处理中...',
    conclusion: '案件已结案'
  }
]);

const selectedCase = ref(null);
const searchInput = ref('');
const filterForm = ref({});

// 筛选案件
const filteredCases = computed(() => {
  let filtered = [...cases.value];
  if (searchInput.value) {
    filtered = filtered.filter((caseItem) =>
        Object.values(caseItem).some((value) => value.toString().includes(searchInput.value))
    );
  }
  if (filterForm.value.caseNumber) {
    filtered = filtered.filter((caseItem) => caseItem.caseNumber.includes(filterForm.value.caseNumber));
  }
  if (filterForm.value.caseName) {
    filtered = filtered.filter((caseItem) => caseItem.description.includes(filterForm.value.caseName));
  }
  if (filterForm.value.address) {
    filtered = filtered.filter((caseItem) => caseItem.description.includes(filterForm.value.address));
  }
  if (filterForm.value.level) {
    filtered = filtered.filter((caseItem) => caseItem.alarmLevel === filterForm.value.level);
  }
  if (filterForm.value.type) {
    filtered = filtered.filter((caseItem) => caseItem.alarmType === filterForm.value.type);
  }
  if (filterForm.value.startDate && filterForm.value.endDate) {
    const startDate = new Date(filterForm.value.startDate);
    const endDate = new Date(filterForm.value.endDate);
    filtered = filtered.filter((caseItem) => {
      const assignedDate = new Date(caseItem.assignedDate);
      return assignedDate >= startDate && assignedDate <= endDate;
    });
  }
  return filtered;
});

// 案件列表点击事件
const handleRowClick = (row) => {
  selectedCase.value = row;
};

// 搜索案件
const searchCases = () => {
  // 实现逻辑：根据输入的案件信息搜索相关案件
  console.log('搜索案件:', searchInput.value, filterForm.value);
};

// 初始化
onMounted(() => {
  // 初始化逻辑
});
</script>

<style scoped>
.supervision-dashboard {
  padding: 20px;
}

.supervision-list,
.case-details {
  margin-bottom: 20px;
}
</style>