静态页面提交

package.json

@@ -25,6 +25,7 @@
     "fuse.js": "6.4.6",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.2.1",
+    "leaflet": "^1.9.4",
     "nprogress": "0.2.0",
     "vue": "3.2.26",
     "vue-cropper": "1.0.2",
@@ -37,7 +38,8 @@
     "@vitejs/plugin-vue": "1.9.4",
     "@vue/compiler-sfc": "3.2.22",
     "sass": "1.45.0",
-    "unplugin-auto-import": "0.5.3",
+    "unplugin-auto-import": "^0.5.3",
+    "unplugin-vue-components": "^0.27.4",
     "vite": "2.6.14",
     "vite-plugin-compression": "0.3.6",
     "vite-plugin-svg-icons": "1.0.5",

src/views/ajbl/ajlzgl/bjl/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="case-processing">
+    <el-card class="case-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.purpose" 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.ownerUnit" placeholder="请选择权属单位">
+                <el-option label="水务局" value="水务局"></el-option>
+                <el-option label="市政工程局" value="市政工程局"></el-option>
+              </el-select>
+            </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="cases" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
+        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
+        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
+        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="ownerUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="handleAction(scope.row, 'view')">查看</el-button>
+            <el-button type="text" @click="handleAction(scope.row, 'export')">导出</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-button type="primary" @click="exportSelectedCases">导出选中案件</el-button>
+      <el-button type="primary" @click="exportAllCases">导出所有案件</el-button>
+    </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.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="详细地址">{{ selectedCase.address }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedCase.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedCase.ownerUnit }}</el-descriptions-item>
+        <el-descriptions-item label="多媒体信息">
+          <el-image :src="selectedCase.media" fit="contain"></el-image>
+        </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-button type="primary" @click="showMap">在地图上定位</el-button>
+    </el-card>
+
+    <!-- 地图查看弹窗 -->
+    <el-dialog v-model="mapVisible" title="地图查看" width="60%">
+      <div id="mapContainer" style="height: 400px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const cases = ref([
+  {
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '供水',
+    ownerUnit: '水务局',
+    address: '和平大道与胜利路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
+    flow: '案件已分配给水务局，正在处理中...',
+    process: '已收到工单，正在处理中...',
+    conclusion: '案件已结案'
+  },
+  {
+    caseNumber: 'C20230915002',
+    alarmLevel: '普通',
+    alarmType: '丢失',
+    alarmDescription: '井盖丢失，行人通行不便。',
+    purpose: '排水',
+    ownerUnit: '市政工程局',
+    address: '胜利路与建设路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
+    flow: '案件已分配给市政工程局，正在处理中...',
+    process: '已收到工单，正在处理中...',
+    conclusion: '案件已结案'
+  }
+]);
+
+const selectedCase = ref(null);
+const mapVisible = ref(false);
+const searchInput = ref('');
+const filterForm = ref({});
+const selectedCases = ref([]);
+
+// 案件列表点击事件
+const handleRowClick = (row) => {
+  selectedCase.value = row;
+};
+
+// 处理操作
+const handleAction = (row, action) => {
+  switch (action) {
+    case 'view':
+      ElMessage.info('查看案件详情');
+      break;
+    case 'export':
+      ElMessage.success('案件已导出');
+      break;
+    default:
+      break;
+  }
+};
+
+// 搜索案件
+const searchCases = () => {
+  // 实现逻辑：根据输入的案件信息搜索相关案件
+  console.log('搜索案件:', searchInput.value, filterForm.value);
+};
+
+// 导出选中案件
+const exportSelectedCases = () => {
+  if (selectedCases.value.length === 0) {
+    ElMessage.warning('请至少选择一个案件进行导出！');
+    return;
+  }
+  ElMessage.success('已导出选中案件');
+};
+
+// 导出所有案件
+const exportAllCases = () => {
+  ElMessage.success('已导出所有案件');
+};
+
+// 显示地图
+const showMap = () => {
+  mapVisible.value = true;
+};
+
+// 初始化地图
+onMounted(() => {
+  initMap();
+});
+
+// 初始化地图
+function initMap() {
+  // 假设这里有一个地图库，比如百度地图或高德地图
+  // 这里只是示例，实际使用时需要引入地图库并配置相应的API Key
+  // 下面是示例代码，用于演示如何初始化地图
+  const mapContainer = document.getElementById('mapContainer');
+  // 假设这里有一个地图对象
+  const map = new Map(mapContainer, {
+    center: [116.404, 39.915],
+    zoom: 15
+  });
+
+  // 添加标记点或其他地图元素
+  // 这里仅作示例，具体实现取决于使用的地图库
+  // const marker = new Marker({
+  //   position: [116.404, 39.915],
+  //   draggable: true
+  // });
+  // map.add(marker);
+}
+</script>
+
+<style scoped>
+.case-verification {
+  padding: 20px;
+}
+.case-list {
+  margin-bottom: 20px;
+}
+.case-details {
+  margin-top: 20px;
+}
+#mapContainer {
+  border: 1px solid #ccc;
+}
+</style>

src/views/ajbl/ajlzgl/gzjd/index.vue

@@ -0,0 +1,190 @@
+<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>

src/views/ajbl/ajlzgl/hcl/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="case-verification">
+    <el-card class="case-list">
+      <h3>待核查案件列表</h3>
+      <el-table :data="cases" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
+        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
+        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
+        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="ownerUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="handleAction(scope.row, 'verify')">核查</el-button>
+            <el-button type="text" @click="handleAction(scope.row, 'resolve')">结案</el-button>
+            <el-button type="text" @click="handleAction(scope.row, 'reassign')">再次派遣</el-button>
+            <el-button type="text" @click="handleAction(scope.row, 'export')">导出</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-input v-model="searchInput" placeholder="搜索案件..." clearable @keyup.enter="searchCases"></el-input>
+    </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.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="详细地址">{{ selectedCase.address }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedCase.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedCase.ownerUnit }}</el-descriptions-item>
+        <el-descriptions-item label="多媒体信息">
+          <el-image :src="selectedCase.media" fit="contain"></el-image>
+        </el-descriptions-item>
+        <el-descriptions-item label="办理经过">
+          <p>{{ selectedCase.process }}</p>
+        </el-descriptions-item>
+        <el-descriptions-item label="处置信息">
+          <p>{{ selectedCase.disposalInfo }}</p>
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-button type="primary" @click="showMap">在地图上定位</el-button>
+      <el-button type="success" @click="approveCase">通过</el-button>
+      <el-button type="danger" @click="rejectCase">退回</el-button>
+    </el-card>
+
+    <!-- 地图查看弹窗 -->
+    <el-dialog v-model="mapVisible" title="地图查看" width="60%">
+      <div id="mapContainer" style="height: 400px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const cases = ref([
+  {
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '供水',
+    ownerUnit: '水务局',
+    address: '和平大道与胜利路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
+    process: '已收到工单，正在处理中...',
+    disposalInfo: '已更换新的井盖，安全得到保障。'
+  },
+  {
+    caseNumber: 'C20230915002',
+    alarmLevel: '普通',
+    alarmType: '丢失',
+    alarmDescription: '井盖丢失，行人通行不便。',
+    purpose: '排水',
+    ownerUnit: '市政工程局',
+    address: '胜利路与建设路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
+    process: '已收到工单，正在处理中...',
+    disposalInfo: '已重新安装井盖，恢复正常。'
+  }
+]);
+
+const selectedCase = ref(null);
+const mapVisible = ref(false);
+const searchInput = ref('');
+
+// 案件列表点击事件
+const handleRowClick = (row) => {
+  selectedCase.value = row;
+};
+
+// 处理操作
+const handleAction = (row, action) => {
+  switch (action) {
+    case 'verify':
+      ElMessage.info('核查案件');
+      break;
+    case 'resolve':
+      ElMessage.success('案件已结案');
+      break;
+    case 'reassign':
+      ElMessage.warning('案件已再次派遣');
+      break;
+    case 'export':
+      ElMessage.info('导出案件');
+      break;
+    default:
+      break;
+  }
+};
+
+// 搜索案件
+const searchCases = () => {
+  // 实现逻辑：根据输入的案件信息搜索相关案件
+  console.log('搜索案件:', searchInput.value);
+};
+
+// 显示地图
+const showMap = () => {
+  mapVisible.value = true;
+};
+
+// 通过案件
+const approveCase = () => {
+  ElMessage.success('案件已通过');
+};
+
+// 退回案件
+const rejectCase = () => {
+  ElMessage.warning('案件已退回');
+};
+
+// 初始化地图
+onMounted(() => {
+  initMap();
+});
+
+// 初始化地图
+function initMap() {
+  // 假设这里有一个地图库，比如百度地图或高德地图
+  // 这里只是示例，实际使用时需要引入地图库并配置相应的API Key
+  // 下面是示例代码，用于演示如何初始化地图
+  const mapContainer = document.getElementById('mapContainer');
+  // 假设这里有一个地图对象
+  const map = new Map(mapContainer, {
+    center: [116.404, 39.915],
+    zoom: 15
+  });
+
+  // 添加标记点或其他地图元素
+  // 这里仅作示例，具体实现取决于使用的地图库
+  // const marker = new Marker({
+  //   position: [116.404, 39.915],
+  //   draggable: true
+  // });
+  // map.add(marker);
+}
+</script>
+
+<style scoped>
+.case-verification {
+  padding: 20px;
+}
+.case-list {
+  margin-bottom: 20px;
+}
+.case-details {
+  margin-top: 20px;
+}
+#mapContainer {
+  border: 1px solid #ccc;
+}
+</style>

src/views/ajbl/ajlzgl/jbl/index.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="case-processing">
+    <el-card class="case-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.purpose" 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.ownerUnit" placeholder="请选择权属单位">
+                <el-option label="水务局" value="水务局"></el-option>
+                <el-option label="市政工程局" value="市政工程局"></el-option>
+              </el-select>
+            </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="cases" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
+        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
+        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
+        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="ownerUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="handleAction(scope.row, 'withdraw')">撤回</el-button>
+            <el-button type="text" @click="handleAction(scope.row, 'view')">查看</el-button>
+          </template>
+        </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.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="详细地址">{{ selectedCase.address }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedCase.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedCase.ownerUnit }}</el-descriptions-item>
+        <el-descriptions-item label="多媒体信息">
+          <el-image :src="selectedCase.media" fit="contain"></el-image>
+        </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>
+      <el-button type="primary" @click="showMap">在地图上定位</el-button>
+    </el-card>
+
+    <!-- 地图查看弹窗 -->
+    <el-dialog v-model="mapVisible" title="地图查看" width="60%">
+      <div id="mapContainer" style="height: 400px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const cases = ref([
+  {
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '供水',
+    ownerUnit: '水务局',
+    address: '和平大道与胜利路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
+    flow: '案件已分配给水务局，正在处理中...',
+    process: '已收到工单，正在处理中...'
+  },
+  {
+    caseNumber: 'C20230915002',
+    alarmLevel: '普通',
+    alarmType: '丢失',
+    alarmDescription: '井盖丢失，行人通行不便。',
+    purpose: '排水',
+    ownerUnit: '市政工程局',
+    address: '胜利路与建设路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
+    flow: '案件已分配给市政工程局，正在处理中...',
+    process: '已收到工单，正在处理中...'
+  }
+]);
+
+const selectedCase = ref(null);
+const mapVisible = ref(false);
+const searchInput = ref('');
+const filterForm = ref({});
+
+// 案件列表点击事件
+const handleRowClick = (row) => {
+  selectedCase.value = row;
+};
+
+// 处理操作
+const handleAction = (row, action) => {
+  switch (action) {
+    case 'withdraw':
+      ElMessage.warning('案件已撤回');
+      break;
+    case 'view':
+      ElMessage.info('查看案件详情');
+      break;
+    default:
+      break;
+  }
+};
+
+// 搜索案件
+const searchCases = () => {
+  // 实现逻辑：根据输入的案件信息搜索相关案件
+  console.log('搜索案件:', searchInput.value, filterForm.value);
+};
+
+// 显示地图
+const showMap = () => {
+  mapVisible.value = true;
+};
+
+// 初始化地图
+onMounted(() => {
+  initMap();
+});
+
+// 初始化地图
+function initMap() {
+  // 假设这里有一个地图库，比如百度地图或高德地图
+  // 这里只是示例，实际使用时需要引入地图库并配置相应的API Key
+  // 下面是示例代码，用于演示如何初始化地图
+  const mapContainer = document.getElementById('mapContainer');
+  // 假设这里有一个地图对象
+  const map = new Map(mapContainer, {
+    center: [116.404, 39.915],
+    zoom: 15
+  });
+
+  // 添加标记点或其他地图元素
+  // 这里仅作示例，具体实现取决于使用的地图库
+  // const marker = new Marker({
+  //   position: [116.404, 39.915],
+  //   draggable: true
+  // });
+  // map.add(marker);
+}
+</script>
+
+<style scoped>
+.case-processing {
+  padding: 20px;
+}
+.case-list {
+  margin-bottom: 20px;
+}
+.case-details {
+  margin-top: 20px;
+}
+#mapContainer {
+  border: 1px solid #ccc;
+}
+</style>

src/views/ajbl/ajlzgl/lal/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="case-management">
+    <el-card class="case-list">
+      <h3>待核实案件列表</h3>
+      <el-table :data="cases" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
+        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
+        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
+        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="ownerUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="handleAction(scope.row, 'verify')">再次核查</el-button>
+            <el-button type="text" @click="handleAction(scope.row, 'discard')">作废</el-button>
+            <el-button type="text" @click="handleAction(scope.row, 'dispatch')">下派</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-input v-model="searchInput" placeholder="搜索案件..." clearable @keyup.enter="searchCases"></el-input>
+    </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.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="详细地址">{{ selectedCase.address }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedCase.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedCase.ownerUnit }}</el-descriptions-item>
+        <el-descriptions-item label="多媒体信息">
+          <el-image :src="selectedCase.media" fit="contain"></el-image>
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-button type="primary" @click="showMap">在地图上定位</el-button>
+    </el-card>
+
+    <!-- 地图查看弹窗 -->
+    <el-dialog v-model="mapVisible" title="地图查看" width="60%">
+      <div id="mapContainer" style="height: 400px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const cases = ref([
+  {
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '供水',
+    ownerUnit: '水务局',
+    address: '和平大道与胜利路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image'
+  },
+  {
+    caseNumber: 'C20230915002',
+    alarmLevel: '普通',
+    alarmType: '丢失',
+    alarmDescription: '井盖丢失，行人通行不便。',
+    purpose: '排水',
+    ownerUnit: '市政工程局',
+    address: '胜利路与建设路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image'
+  }
+]);
+
+const selectedCase = ref(null);
+const mapVisible = ref(false);
+const searchInput = ref('');
+
+// 案件列表点击事件
+const handleRowClick = (row) => {
+  selectedCase.value = row;
+};
+
+// 处理操作
+const handleAction = (row, action) => {
+  switch (action) {
+    case 'verify':
+      ElMessage.info('再次核查案件');
+      break;
+    case 'discard':
+      ElMessage.warning('案件已作废');
+      break;
+    case 'dispatch':
+      ElMessage.success('案件已下派');
+      break;
+    default:
+      break;
+  }
+};
+
+// 搜索案件
+const searchCases = () => {
+  // 实现逻辑：根据输入的案件信息搜索相关案件
+  console.log('搜索案件:', searchInput.value);
+};
+
+// 显示地图
+const showMap = () => {
+  mapVisible.value = true;
+};
+
+// 初始化地图
+onMounted(() => {
+  initMap();
+});
+
+// 初始化地图
+function initMap() {
+  // 假设这里有一个地图库，比如百度地图或高德地图
+  // 这里只是示例，实际使用时需要引入地图库并配置相应的API Key
+  // 下面是示例代码，用于演示如何初始化地图
+  const mapContainer = document.getElementById('mapContainer');
+  // 假设这里有一个地图对象
+  const map = new Map(mapContainer, {
+    center: [116.404, 39.915],
+    zoom: 15
+  });
+
+  // 添加标记点或其他地图元素
+  // 这里仅作示例，具体实现取决于使用的地图库
+  // const marker = new Marker({
+  //   position: [116.404, 39.915],
+  //   draggable: true
+  // });
+  // map.add(marker);
+}
+</script>
+
+<style scoped>
+.case-management {
+  padding: 20px;
+}
+.case-list {
+  margin-bottom: 20px;
+}
+.case-details {
+  margin-top: 20px;
+}
+#mapContainer {
+  border: 1px solid #ccc;
+}
+</style>

src/views/ajbl/ajlzgl/zfl/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="case-processing">
+    <el-card class="case-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.purpose" 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.ownerUnit" placeholder="请选择权属单位">
+                <el-option label="水务局" value="水务局"></el-option>
+                <el-option label="市政工程局" value="市政工程局"></el-option>
+              </el-select>
+            </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="cases" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
+        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
+        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
+        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="ownerUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="handleAction(scope.row, 'view')">查看</el-button>
+            <el-button type="text" @click="handleAction(scope.row, 'export')">导出</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-button type="primary" @click="exportSelectedCases">导出选中案件</el-button>
+      <el-button type="primary" @click="exportAllCases">导出所有案件</el-button>
+    </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.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="详细地址">{{ selectedCase.address }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedCase.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedCase.ownerUnit }}</el-descriptions-item>
+        <el-descriptions-item label="多媒体信息">
+          <el-image :src="selectedCase.media" fit="contain"></el-image>
+        </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-button type="primary" @click="showMap">在地图上定位</el-button>
+    </el-card>
+
+    <!-- 地图查看弹窗 -->
+    <el-dialog v-model="mapVisible" title="地图查看" width="60%">
+      <div id="mapContainer" style="height: 400px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const cases = ref([
+  {
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '供水',
+    ownerUnit: '水务局',
+    address: '和平大道与胜利路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
+    flow: '案件已分配给水务局，正在处理中...',
+    process: '已收到工单，正在处理中...',
+    conclusion: '案件已结案'
+  },
+  {
+    caseNumber: 'C20230915002',
+    alarmLevel: '普通',
+    alarmType: '丢失',
+    alarmDescription: '井盖丢失，行人通行不便。',
+    purpose: '排水',
+    ownerUnit: '市政工程局',
+    address: '胜利路与建设路交叉口',
+    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
+    flow: '案件已分配给市政工程局，正在处理中...',
+    process: '已收到工单，正在处理中...',
+    conclusion: '案件已结案'
+  }
+]);
+
+const selectedCase = ref(null);
+const mapVisible = ref(false);
+const searchInput = ref('');
+const filterForm = ref({});
+const selectedCases = ref([]);
+
+// 案件列表点击事件
+const handleRowClick = (row) => {
+  selectedCase.value = row;
+};
+
+// 处理操作
+const handleAction = (row, action) => {
+  switch (action) {
+    case 'view':
+      ElMessage.info('查看案件详情');
+      break;
+    case 'export':
+      ElMessage.success('案件已导出');
+      break;
+    default:
+      break;
+  }
+};
+
+// 搜索案件
+const searchCases = () => {
+  // 实现逻辑：根据输入的案件信息搜索相关案件
+  console.log('搜索案件:', searchInput.value, filterForm.value);
+};
+
+// 导出选中案件
+const exportSelectedCases = () => {
+  if (selectedCases.value.length === 0) {
+    ElMessage.warning('请至少选择一个案件进行导出！');
+    return;
+  }
+  ElMessage.success('已导出选中案件');
+};
+
+// 导出所有案件
+const exportAllCases = () => {
+  ElMessage.success('已导出所有案件');
+};
+
+// 显示地图
+const showMap = () => {
+  mapVisible.value = true;
+};
+
+// 初始化地图
+onMounted(() => {
+  initMap();
+});
+
+// 初始化地图
+function initMap() {
+  // 假设这里有一个地图库，比如百度地图或高德地图
+  // 这里只是示例，实际使用时需要引入地图库并配置相应的API Key
+  // 下面是示例代码，用于演示如何初始化地图
+  const mapContainer = document.getElementById('mapContainer');
+  // 假设这里有一个地图对象
+  const map = new Map(mapContainer, {
+    center: [116.404, 39.915],
+    zoom: 15
+  });
+
+  // 添加标记点或其他地图元素
+  // 这里仅作示例，具体实现取决于使用的地图库
+  // const marker = new Marker({
+  //   position: [116.404, 39.915],
+  //   draggable: true
+  // });
+  // map.add(marker);
+}
+</script>
+
+<style scoped>
+.case-processing {
+  padding: 20px;
+}
+.case-list {
+  margin-bottom: 20px;
+}
+.case-details {
+  margin-top: 20px;
+}
+#mapContainer {
+  border: 1px solid #ccc;
+}
+</style>

src/views/ajbl/bjgd/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <!-- 搜索表单 -->
+    <el-form :model="searchForm" ref="searchFormRef" label-width="120px" class="demo-ruleForm">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="工单编号" prop="orderNumber">
+            <el-input v-model="searchForm.orderNumber" placeholder="请输入工单编号" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案件编号" prop="caseNumber">
+            <el-input v-model="searchForm.caseNumber" placeholder="请输入案件编号" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案件名称" prop="caseName">
+            <el-input v-model="searchForm.caseName" placeholder="请输入案件名称" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="案件地址" prop="caseAddress">
+            <el-input v-model="searchForm.caseAddress" placeholder="请输入案件地址" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="案件级别" prop="caseLevel">
+            <el-select v-model="searchForm.caseLevel" placeholder="请选择案件级别">
+              <el-option v-for="item in alarmLevels" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="用途" prop="coverPurpose">
+            <el-select v-model="searchForm.coverPurpose" placeholder="请选择用途">
+              <el-option v-for="item in purposes" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="权属单位" prop="assignedUnit">
+            <el-input v-model="searchForm.assignedUnit" placeholder="请输入权属单位" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item>
+            <el-button type="primary" @click="searchWorkOrders">查询</el-button>
+            <el-button @click="resetSearchForm">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 工单列表 -->
+    <el-table :data="filteredWorkOrders" style="width: 100%" @row-click="showWorkOrderDetail">
+      <el-table-column prop="orderNumber" label="工单编号" width="180" />
+      <el-table-column prop="alarmLevel" label="报警级别" width="120" />
+      <el-table-column prop="caseNumber" label="案件编号" width="180" />
+      <el-table-column prop="alarmType" label="报警类型" width="120" />
+      <el-table-column prop="alarmDescription" label="报警描述" />
+      <el-table-column prop="purpose" label="用途" width="120" />
+      <el-table-column prop="assignedUnit" label="权属单位" width="180" />
+      <el-table-column prop="address" label="详细地址" />
+    </el-table>
+
+    <!-- 工单详情对话框 -->
+    <el-dialog v-model="dialogVisible" title="工单详情" width="50%">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="案件名称">{{ currentWorkOrder.caseName }}</el-descriptions-item>
+        <el-descriptions-item label="工单编号">{{ currentWorkOrder.orderNumber }}</el-descriptions-item>
+        <el-descriptions-item label="案件编号">{{ currentWorkOrder.caseNumber }}</el-descriptions-item>
+        <el-descriptions-item label="案件地址">{{ currentWorkOrder.address }}</el-descriptions-item>
+        <el-descriptions-item label="案件级别">{{ currentWorkOrder.alarmLevel }}</el-descriptions-item>
+        <el-descriptions-item label="用途">{{ currentWorkOrder.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ currentWorkOrder.assignedUnit }}</el-descriptions-item>
+        <el-descriptions-item label="处理过程">{{ currentWorkOrder.process }}</el-descriptions-item>
+        <el-descriptions-item label="附件">
+          <el-image :src="currentWorkOrder.attachment" fit="contain" />
+        </el-descriptions-item>
+      </el-descriptions>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="showMap">地 图 定 位</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 地图对话框 -->
+    <el-dialog v-model="mapDialogVisible" title="地图定位" width="50%">
+      <div id="mapContainer" style="height: 400px;"></div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="mapDialogVisible = false">关 闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 导出按钮 -->
+    <el-button type="primary" @click="exportData" style="margin-top: 16px;">导出数据</el-button>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+// import * as XLSX from 'xlsx'; // 导出数据到 Excel
+
+// 模拟数据
+const workOrders = ref([
+  {
+    orderNumber: 'W20230915001',
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '排水',
+    assignedUnit: '水务局',
+    address: '上海市浦东新区陆家嘴环路1000号',
+    caseName: '井盖损坏事件',
+    process: '正在处理中...',
+    attachment: 'https://example.com/attachment.jpg',
+    latitude: 31.2304,
+    longitude: 121.4737,
+  },
+  // 更多模拟数据...
+]);
+
+// 搜索表单
+const searchForm = ref({
+  orderNumber: '',
+  caseNumber: '',
+  caseName: '',
+  caseAddress: '',
+  caseLevel: '',
+  coverPurpose: '',
+  assignedUnit: '',
+});
+
+// 报警级别选项
+const alarmLevels = ref([
+  { value: '紧急', label: '紧急' },
+  { value: '重要', label: '重要' },
+  { value: '一般', label: '一般' },
+]);
+
+// 用途选项
+const purposes = ref([
+  { value: '排水', label: '排水' },
+  { value: '供水', label: '供水' },
+  { value: '电力', label: '电力' },
+]);
+
+// 过滤后的工单列表
+const filteredWorkOrders = ref(workOrders.value);
+
+// 对话框状态
+const dialogVisible = ref(false);
+const mapDialogVisible = ref(false);
+
+// 当前选中的工单
+const currentWorkOrder = ref({});
+
+// 搜索工单
+function searchWorkOrders() {
+  const { orderNumber, caseNumber, caseName, caseAddress, caseLevel, coverPurpose, assignedUnit } = searchForm.value;
+  filteredWorkOrders.value = workOrders.value.filter(order => {
+    return (
+        (orderNumber === '' || order.orderNumber.includes(orderNumber)) &&
+        (caseNumber === '' || order.caseNumber.includes(caseNumber)) &&
+        (caseName === '' || order.caseName.includes(caseName)) &&
+        (caseAddress === '' || order.address.includes(caseAddress)) &&
+        (caseLevel === '' || order.alarmLevel === caseLevel) &&
+        (coverPurpose === '' || order.purpose === coverPurpose) &&
+        (assignedUnit === '' || order.assignedUnit.includes(assignedUnit))
+    );
+  });
+}
+
+// 重置搜索表单
+function resetSearchForm() {
+  searchForm.value = {
+    orderNumber: '',
+    caseNumber: '',
+    caseName: '',
+    caseAddress: '',
+    caseLevel: '',
+    coverPurpose: '',
+    assignedUnit: '',
+  };
+  filteredWorkOrders.value = workOrders.value;
+}
+
+// 展示工单详情
+function showWorkOrderDetail(row) {
+  currentWorkOrder.value = row;
+  dialogVisible.value = true;
+}
+
+// 显示地图
+function showMap() {
+  mapDialogVisible.value = true;
+  // 这里可以加载地图并设置坐标
+  // 示例：加载高德地图
+  loadAMap();
+}
+
+// 加载高德地图
+function loadAMap() {
+  const mapContainer = document.getElementById('mapContainer');
+  const map = new AMap.Map(mapContainer, {
+    zoom: 13,
+    center: [currentWorkOrder.value.longitude, currentWorkOrder.value.latitude],
+  });
+
+  // 添加标记
+  new AMap.Marker({
+    position: [currentWorkOrder.value.longitude, currentWorkOrder.value.latitude],
+    map: map,
+    title: '井盖位置',
+  });
+}
+
+// 导出数据到 Excel
+// function exportData() {
+//   const ws = XLSX.utils.json_to_sheet(filteredWorkOrders.value);
+//   const wb = XLSX.utils.book_new();
+//   XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+//   XLSX.writeFile(wb, 'closed_work_orders.xlsx');
+// }
+
+// 初始化地图
+onMounted(() => {
+  // 这里可以加载高德地图的 JS 库
+  // 示例：加载高德地图 JS 库
+  loadAMapLibrary();
+});
+
+// 加载高德地图 JS 库
+function loadAMapLibrary() {
+  if (typeof AMap === 'undefined') {
+    const script = document.createElement('script');
+    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=your_key_here&plugin=AMap.Geocoder,AMap.Marker';
+    script.onload = () => {
+      // 地图库加载完成
+    };
+    document.head.appendChild(script);
+  }
+}
+</script>

src/views/ajbl/jbgd/index.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="work-order-management">
+    <h2>经办工单管理</h2>
+    <el-card>
+      <!-- 搜索过滤 -->
+      <el-form :model="searchForm" :inline="true" size="small">
+        <el-form-item label="案件编号">
+          <el-input v-model="searchForm.caseNumber" placeholder="请输入案件编号" />
+        </el-form-item>
+        <el-form-item label="案件名称">
+          <el-input v-model="searchForm.caseName" placeholder="请输入案件名称" />
+        </el-form-item>
+        <el-form-item label="案件地址">
+          <el-input v-model="searchForm.caseAddress" placeholder="请输入案件地址" />
+        </el-form-item>
+        <el-form-item label="案件级别">
+          <el-select v-model="searchForm.caseLevel" placeholder="请选择案件级别">
+            <el-option label="紧急" value="紧急" />
+            <el-option label="普通" value="普通" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="井盖用途">
+          <el-select v-model="searchForm.coverPurpose" placeholder="请选择井盖用途">
+            <el-option label="排水" value="排水" />
+            <el-option label="电力" value="电力" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="权属单位">
+          <el-input v-model="searchForm.assignedUnit" placeholder="请输入权属单位" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchWorkOrders">搜索</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 工单列表 -->
+      <el-table
+          :data="filteredWorkOrders"        style="width: 100%"
+          @row-click="showWorkOrderDetail"
+      >
+        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
+        <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="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+      </el-table>
+
+      <!-- 工单详情 -->
+      <el-dialog v-model="dialogVisible" title="工单详情" width="50%">
+        <el-form :model="currentWorkOrder" label-width="120px">
+          <el-form-item label="案件编号">
+            <span>{{ currentWorkOrder.caseNumber }}</span>
+          </el-form-item>
+          <el-form-item label="案件名称">
+            <span>{{ currentWorkOrder.caseName }}</span>
+          </el-form-item>
+          <el-form-item label="案件地址">
+            <span>{{ currentWorkOrder.address }}</span>
+          </el-form-item>
+          <el-form-item label="案件级别">
+            <span>{{ currentWorkOrder.alarmLevel }}</span>
+          </el-form-item>
+          <el-form-item label="报警类型">
+            <span>{{ currentWorkOrder.alarmType }}</span>
+          </el-form-item>
+          <el-form-item label="报警描述">
+            <span>{{ currentWorkOrder.alarmDescription }}</span>
+          </el-form-item>
+          <el-form-item label="用途">
+            <span>{{ currentWorkOrder.purpose }}</span>
+          </el-form-item>
+          <el-form-item label="权属单位">
+            <span>{{ currentWorkOrder.assignedUnit }}</span>
+          </el-form-item>
+          <el-form-item label="办理经过">
+            <span>{{ currentWorkOrder.process }}</span>
+          </el-form-item>
+          <el-form-item label="附件">
+            <el-upload
+                class="upload-demo"
+                action=""
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+            >
+              <img v-if="currentWorkOrder.attachment" :src="currentWorkOrder.attachment" class="avatar" />
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="dialogVisible = false">关闭</el-button>
+          </span>
+        </template>
+      </el-dialog>
+
+      <!-- 地图定位 -->
+      <el-dialog v-model="mapDialogVisible" title="地图定位" width="50%">
+        <div id="mapContainer" style="height: 400px;"></div>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="mapDialogVisible = false">关闭</el-button>
+          </span>
+        </template>
+      </el-dialog>
+    </el-card>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const workOrders = ref([
+  {
+    orderNumber: 'W20230915001',
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '排水',
+    assignedUnit: '水务局',
+    address: '上海市浦东新区陆家嘴环路1000号',
+    caseName: '井盖损坏事件',
+    process: '正在处理中...',
+    attachment: 'https://example.com/attachment.jpg',
+    latitude: 31.2304,
+    longitude: 121.4737,
+  },
+  // 更多模拟数据...
+]);
+
+const searchForm = ref({
+  caseNumber: '',
+  caseName: '',
+  caseAddress: '',
+  caseLevel: '',
+  coverPurpose: '',
+  assignedUnit: '',
+});
+
+const filteredWorkOrders = ref(workOrders.value);
+
+const dialogVisible = ref(false);
+const mapDialogVisible = ref(false);
+const currentWorkOrder = ref({});
+
+// 搜索工单
+function searchWorkOrders() {
+  const { caseNumber, caseName, caseAddress, caseLevel, coverPurpose, assignedUnit } = searchForm.value;
+  filteredWorkOrders.value = workOrders.value.filter(order => {
+    return (
+        (caseNumber === '' || order.caseNumber.includes(caseNumber)) &&
+        (caseName === '' || order.caseName.includes(caseName)) &&
+        (caseAddress === '' || order.address.includes(caseAddress)) &&
+        (caseLevel === '' || order.alarmLevel === caseLevel) &&
+        (coverPurpose === '' || order.purpose === coverPurpose) &&
+        (assignedUnit === '' || order.assignedUnit.includes(assignedUnit))
+    );
+  });
+}
+
+// 展示工单详情
+function showWorkOrderDetail(row) {
+  currentWorkOrder.value = row;
+  dialogVisible.value = true;
+}
+
+// 显示地图
+function showMap() {
+  mapDialogVisible.value = true;
+  // 这里可以加载地图并设置坐标
+  // 示例：加载高德地图
+  loadAMap();
+}
+
+// 加载高德地图
+function loadAMap() {
+  const mapContainer = document.getElementById('mapContainer');
+  const map = new AMap.Map(mapContainer, {
+    zoom: 13,
+    center: [currentWorkOrder.value.longitude, currentWorkOrder.value.latitude],
+  });
+
+  // 添加标记
+  new AMap.Marker({
+    position: [currentWorkOrder.value.longitude, currentWorkOrder.value.latitude],
+    map: map,
+    title: '井盖位置',
+  });
+}
+
+// 文件上传相关
+const handleAvatarSuccess = res => {
+  ElMessage.success('上传成功');
+};
+const beforeAvatarUpload = file => {
+  const isJPG = file.type === 'image/jpeg';
+  const isLt2M = file.size / 1024 / 1024 < 2;
+
+  if (!isJPG) {
+    ElMessage.error('上传头像图片只能是 JPG 格式!');
+  }
+  if (!isLt2M) {
+    ElMessage.error('上传头像图片大小不能超过 2MB!');
+  }
+  return isJPG && isLt2M;
+};
+
+// 初始化地图
+onMounted(() => {
+  // 这里可以加载高德地图的 JS 库
+  // 示例：加载高德地图 JS 库
+  loadAMapLibrary();
+});
+
+// 加载高德地图 JS 库
+function loadAMapLibrary() {
+  if (typeof AMap === 'undefined') {
+    const script = document.createElement('script');
+    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=your_key_here&plugin=AMap.Geocoder,AMap.Marker';
+    script.onload = () => {
+      // 地图库加载完成
+    };
+    document.head.appendChild(script);
+  }
+}
+</script>

src/views/gdczgl/dbgd/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="work-order-management">
+    <el-card class="work-order-list">
+      <h3>待办工单列表</h3>
+      <el-table :data="workOrders" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
+        <el-table-column prop="deviceSerial" label="设备编号"></el-table-column>
+        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
+        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="status" 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="selectedWorkOrder" class="work-order-details">
+      <h3>工单详情</h3>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="工单编号">{{ selectedWorkOrder.orderNumber }}</el-descriptions-item>
+        <el-descriptions-item label="设备编号">{{ selectedWorkOrder.deviceSerial }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedWorkOrder.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="报警类型">{{ selectedWorkOrder.alarmType }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedWorkOrder.assignedUnit }}</el-descriptions-item>
+        <el-descriptions-item label="工单状态">{{ selectedWorkOrder.status }}</el-descriptions-item>
+        <el-descriptions-item label="报警核实信息">{{ selectedWorkOrder.verificationInfo }}</el-descriptions-item>
+        <el-descriptions-item label="指派日期">{{ selectedWorkOrder.assignedDate }}</el-descriptions-item>
+        <el-descriptions-item label="最后更新时间">{{ selectedWorkOrder.lastUpdate }}</el-descriptions-item>
+        <el-descriptions-item label="工单办理经过">
+          <p>{{ selectedWorkOrder.process }}</p>
+        </el-descriptions-item>
+        <el-descriptions-item label="附件多媒体信息">
+          <el-image v-for="(media, index) in selectedWorkOrder.media" :key="index" :src="media.url" fit="cover" />
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const workOrders = ref([
+  {
+    orderNumber: 'W20230915001',
+    deviceSerial: 'D202301001',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    alarmType: '损坏',
+    assignedUnit: '水务局',
+    status: '待处理',
+    verificationInfo: '已核实，情况属实。',
+    assignedDate: '2023-09-15',
+    lastUpdate: '2023-09-17',
+    process: '案件已分配给水务局，正在处理中...',
+    media: [
+      { url: 'https://example.com/image1.jpg' },
+      { url: 'https://example.com/image2.jpg' }
+    ]
+  },
+  {
+    orderNumber: 'W20230915002',
+    deviceSerial: 'D202301002',
+    alarmDescription: '井盖丢失，行人通行不便。',
+    alarmType: '丢失',
+    assignedUnit: '市政工程局',
+    status: '待处理',
+    verificationInfo: '已核实，情况属实。',
+    assignedDate: '2023-09-15',
+    lastUpdate: '2023-09-16',
+    process: '案件已分配给市政工程局，正在处理中...',
+    media: [
+      { url: 'https://example.com/image3.jpg' },
+      { url: 'https://example.com/image4.jpg' }
+    ]
+  }
+]);
+
+const selectedWorkOrder = ref(null);
+
+// 工单列表点击事件
+const handleRowClick = (row) => {
+  selectedWorkOrder.value = row;
+};
+
+// 初始化
+onMounted(() => {
+  // 初始化逻辑
+});
+</script>
+
+<style scoped>
+.work-order-management {
+  padding: 20px;
+}
+
+.work-order-list,
+.work-order-details {
+  margin-bottom: 20px;
+}
+</style>

src/views/gdczgl/gdht/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="work-order-management">
+    <el-card class="work-order-list">
+      <h3>待办工单列表</h3>
+      <el-table :data="workOrders" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
+        <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="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+        <el-table-column fixed="right" label="操作">
+          <template #default="{ row }">
+            <el-button type="danger" link @click="handleRevert(row)">回退</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-card v-if="selectedWorkOrder" class="work-order-details">
+      <h3>工单详情</h3>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="案件编号">{{ selectedWorkOrder.caseNumber }}</el-descriptions-item>
+        <el-descriptions-item label="报警名称">{{ selectedWorkOrder.alarmName }}</el-descriptions-item>
+        <el-descriptions-item label="报警时间">{{ selectedWorkOrder.alarmTime }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedWorkOrder.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备编号">{{ selectedWorkOrder.deviceSerial }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备名称">{{ selectedWorkOrder.deviceName }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备用途">{{ selectedWorkOrder.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedWorkOrder.assignedUnit }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位电话">{{ selectedWorkOrder.unitPhone }}</el-descriptions-item>
+        <el-descriptions-item label="安装时间">{{ selectedWorkOrder.installationTime }}</el-descriptions-item>
+        <el-descriptions-item label="区">{{ selectedWorkOrder.district }}</el-descriptions-item>
+        <el-descriptions-item label="街道">{{ selectedWorkOrder.street }}</el-descriptions-item>
+        <el-descriptions-item label="道路">{{ selectedWorkOrder.road }}</el-descriptions-item>
+        <el-descriptions-item label="辅助定位地址">{{ selectedWorkOrder.auxiliaryAddress }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备材质">{{ selectedWorkOrder.material }}</el-descriptions-item>
+        <el-descriptions-item label="工单办理经过">
+          <p>{{ selectedWorkOrder.process }}</p>
+        </el-descriptions-item>
+        <el-descriptions-item label="附件多媒体信息">
+          <el-image v-for="(media, index) in selectedWorkOrder.media" :key="index" :src="media.url" fit="cover" />
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <!-- 回退弹窗 -->
+    <el-dialog title="回退工单" v-model="dialogRevertVisible" width="30%">
+      <el-form :model="revertForm">
+        <el-form-item label="回退理由" :label-width="formLabelWidth">
+          <el-input v-model="revertForm.reason" autocomplete="off" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogRevertVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleConfirmRevert">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const workOrders = ref([
+  {
+    orderNumber: 'W20230915001',
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '排水',
+    assignedUnit: '水务局',
+    address: '上海市浦东新区陆家嘴环路1000号',
+    location: [31.2304, 121.4737],
+    media: [
+      { url: 'https://example.com/image1.jpg' },
+      { url: 'https://example.com/image2.jpg' }
+    ]
+  },
+  // 更多模拟数据...
+]);
+
+const selectedWorkOrder = ref(null);
+const dialogRevertVisible = ref(false);
+const revertForm = ref({ reason: '' });
+const formLabelWidth = ref('120px');
+
+// 处理表格点击事件
+function handleRowClick(row) {
+  selectedWorkOrder.value = row;
+}
+
+// 回退处理
+function handleRevert(row) {
+  selectedWorkOrder.value = row;
+  dialogRevertVisible.value = true;
+}
+
+// 确认回退
+function handleConfirmRevert() {
+  // 这里可以添加逻辑来处理回退操作
+  ElMessage.success('工单已回退');
+  dialogRevertVisible.value = false;
+}
+</script>
+
+<style scoped>
+.work-order-management {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+</style>

src/views/gdczgl/gdsp/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="work-order-management">
+    <el-card class="work-order-list">
+      <h3>待审批工单列表</h3>
+      <el-table :data="workOrders" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
+        <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="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+        <el-table-column fixed="right" label="操作">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleApprove(row)">审批</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-card v-if="selectedWorkOrder" class="work-order-details">
+      <h3>工单详情</h3>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="案件编号">{{ selectedWorkOrder.caseNumber }}</el-descriptions-item>
+        <el-descriptions-item label="报警名称">{{ selectedWorkOrder.alarmName }}</el-descriptions-item>
+        <el-descriptions-item label="报警时间">{{ selectedWorkOrder.alarmTime }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedWorkOrder.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备编号">{{ selectedWorkOrder.deviceSerial }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备名称">{{ selectedWorkOrder.deviceName }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备用途">{{ selectedWorkOrder.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedWorkOrder.assignedUnit }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位电话">{{ selectedWorkOrder.unitPhone }}</el-descriptions-item>
+        <el-descriptions-item label="安装时间">{{ selectedWorkOrder.installationTime }}</el-descriptions-item>
+        <el-descriptions-item label="区">{{ selectedWorkOrder.district }}</el-descriptions-item>
+        <el-descriptions-item label="街道">{{ selectedWorkOrder.street }}</el-descriptions-item>
+        <el-descriptions-item label="道路">{{ selectedWorkOrder.road }}</el-descriptions-item>
+        <el-descriptions-item label="辅助定位地址">{{ selectedWorkOrder.auxiliaryAddress }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备材质">{{ selectedWorkOrder.material }}</el-descriptions-item>
+        <el-descriptions-item label="工单办理经过">
+          <p>{{ selectedWorkOrder.process }}</p>
+        </el-descriptions-item>
+        <el-descriptions-item label="附件多媒体信息">
+          <el-image v-for="(media, index) in selectedWorkOrder.media" :key="index" :src="media.url" fit="cover" />
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <!-- 审批弹窗 -->
+    <el-dialog title="审批工单" v-model="dialogApproveVisible" width="30%">
+      <el-form :model="approveForm">
+        <el-form-item label="审批结果" :label-width="formLabelWidth">
+          <el-select v-model="approveForm.result" placeholder="请选择审批结果">
+            <el-option label="通过" value="approved" />
+            <el-option label="退回" value="rejected" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="approveForm.result === 'rejected'" label="退回理由" :label-width="formLabelWidth">
+          <el-input v-model="approveForm.rejectionReason" autocomplete="off" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogApproveVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleConfirmApprove">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const workOrders = ref([
+  {
+    orderNumber: 'W20230915001',
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '排水',
+    assignedUnit: '水务局',
+    address: '上海市浦东新区陆家嘴环路1000号',
+    location: [31.2304, 121.4737],
+    media: [
+      { url: 'https://example.com/image1.jpg' },
+      { url: 'https://example.com/image2.jpg' }
+    ]
+  },
+  // 更多模拟数据...
+]);
+
+const selectedWorkOrder = ref(null);
+const dialogApproveVisible = ref(false);
+const approveForm = ref({ result: '', rejectionReason: '' });
+const formLabelWidth = ref('120px');
+
+// 处理表格点击事件
+function handleRowClick(row) {
+  selectedWorkOrder.value = row;
+}
+
+// 审批处理
+function handleApprove(row) {
+  selectedWorkOrder.value = row;
+  dialogApproveVisible.value = true;
+}
+
+// 确认审批
+function handleConfirmApprove() {
+  if (approveForm.result === 'approved') {
+    // 审批通过的逻辑
+    ElMessage.success('工单已审批通过');
+  } else if (approveForm.result === 'rejected') {
+    // 审批退回的逻辑
+    ElMessage.warning('工单已退回');
+  }
+  dialogApproveVisible.value = false;
+}
+</script>
+
+<style scoped>
+.work-order-management {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+</style>

src/views/gdczgl/rwcz/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="work-order-management">
+    <el-card class="work-order-list">
+      <h3>待办工单列表</h3>
+      <el-table :data="workOrders" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
+        <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="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+        <el-table-column fixed="right" label="操作">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleDispatch(row)">下发</el-button>
+            <el-button type="warning" link @click="handleDelay(row)">延期</el-button>
+            <el-button type="info" link @click="handlePostpone(row)">缓办</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-card v-if="selectedWorkOrder" class="work-order-details">
+      <h3>工单详情</h3>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="案件编号">{{ selectedWorkOrder.caseNumber }}</el-descriptions-item>
+        <el-descriptions-item label="报警名称">{{ selectedWorkOrder.alarmName }}</el-descriptions-item>
+        <el-descriptions-item label="报警时间">{{ selectedWorkOrder.alarmTime }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedWorkOrder.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备编号">{{ selectedWorkOrder.deviceSerial }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备名称">{{ selectedWorkOrder.deviceName }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备用途">{{ selectedWorkOrder.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedWorkOrder.assignedUnit }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位电话">{{ selectedWorkOrder.unitPhone }}</el-descriptions-item>
+        <el-descriptions-item label="安装时间">{{ selectedWorkOrder.installationTime }}</el-descriptions-item>
+        <el-descriptions-item label="区">{{ selectedWorkOrder.district }}</el-descriptions-item>
+        <el-descriptions-item label="街道">{{ selectedWorkOrder.street }}</el-descriptions-item>
+        <el-descriptions-item label="道路">{{ selectedWorkOrder.road }}</el-descriptions-item>
+        <el-descriptions-item label="辅助定位地址">{{ selectedWorkOrder.auxiliaryAddress }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备材质">{{ selectedWorkOrder.material }}</el-descriptions-item>
+        <el-descriptions-item label="工单办理经过">
+          <p>{{ selectedWorkOrder.process }}</p>
+        </el-descriptions-item>
+        <el-descriptions-item label="附件多媒体信息">
+          <el-image v-for="(media, index) in selectedWorkOrder.media" :key="index" :src="media.url" fit="cover" />
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <div v-if="selectedWorkOrder && selectedWorkOrder.location" class="map-container">
+      <h3>井盖设备位置</h3>
+      <l-map :zoom="15" :center="selectedWorkOrder.location" style="height: 400px">
+        <l-tile-layer :url="tileLayerUrl" />
+        <l-marker :lat-lng="selectedWorkOrder.location">
+          <l-icon :icon-url="markerIconUrl" :icon-size="[30, 41]" :icon-anchor="[15, 41]" />
+        </l-marker>
+      </l-map>
+    </div>
+
+    <!-- 延期弹窗 -->
+    <el-dialog title="延期处理" v-model="dialogDelayVisible" width="30%">
+      <el-form :model="delayForm">
+        <el-form-item label="延期截止时间" :label-width="formLabelWidth">
+          <el-date-picker
+              v-model="delayForm.deadline"
+              type="datetime"
+              placeholder="选择日期时间"
+          />
+        </el-form-item>
+        <el-form-item label="延期理由" :label-width="formLabelWidth">
+          <el-input v-model="delayForm.reason" autocomplete="off" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogDelayVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleConfirmDelay">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 缓办弹窗 -->
+    <el-dialog title="缓办处理" v-model="dialogPostponeVisible" width="30%">
+      <el-form :model="postponeForm">
+        <el-form-item label="缓办截止时间" :label-width="formLabelWidth">
+          <el-date-picker
+              v-model="postponeForm.deadline"
+              type="datetime"
+              placeholder="选择日期时间"
+          />
+        </el-form-item>
+        <el-form-item label="缓办理由" :label-width="formLabelWidth">
+          <el-input v-model="postponeForm.reason" autocomplete="off" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogPostponeVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleConfirmPostpone">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 下发弹窗 -->
+    <el-dialog title="下发工单" v-model="dialogDispatchVisible" width="30%">
+      <el-form :model="dispatchForm">
+        <el-form-item label="维修负责人" :label-width="formLabelWidth">
+          <el-select v-model="dispatchForm.responsible" placeholder="请选择">
+            <el-option
+                v-for="item in responsibleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogDispatchVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleConfirmDispatch">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+// 模拟数据
+const workOrders = ref([
+  {
+    orderNumber: 'W20230915001',
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '排水',
+    assignedUnit: '水务局',
+    address: '上海市浦东新区陆家嘴环路1000号',
+    location: [31.2304, 121.4737],
+    media: [
+      { url: 'https://example.com/image1.jpg' },
+      { url: 'https://example.com/image2.jpg' }
+    ]
+  },
+  // 更多模拟数据...
+]);
+
+const selectedWorkOrder = ref(null);
+const dialogDelayVisible = ref(false);
+const dialogPostponeVisible = ref(false);
+const dialogDispatchVisible = ref(false);
+const delayForm = ref({ deadline: null, reason: '' });
+const postponeForm = ref({ deadline: null, reason: '' });
+const dispatchForm = ref({ responsible: '' });
+const formLabelWidth = ref('120px');
+const responsibleOptions = ref([
+  { value: 'person1', label: '张三' },
+  { value: 'person2', label: '李四' },
+  // 更多选项...
+]);
+
+// 处理表格点击事件
+function handleRowClick(row) {
+  selectedWorkOrder.value = row;
+}
+
+// 延期处理
+function handleDelay(row) {
+  selectedWorkOrder.value = row;
+  dialogDelayVisible.value = true;
+}
+
+// 缓办处理
+function handlePostpone(row) {
+  selectedWorkOrder.value = row;
+  dialogPostponeVisible.value = true;
+}
+
+// 下发处理
+function handleDispatch(row) {
+  selectedWorkOrder.value = row;
+  dialogDispatchVisible.value = true;
+}
+
+// 确认延期
+function handleConfirmDelay() {
+  // 这里可以添加逻辑来处理延期操作
+  ElMessage.success('延期成功');
+  dialogDelayVisible.value = false;
+}
+
+// 确认缓办
+function handleConfirmPostpone() {
+  // 这里可以添加逻辑来处理缓办操作
+  ElMessage.success('缓办成功');
+  dialogPostponeVisible.value = false;
+}
+
+// 确认下发
+function handleConfirmDispatch() {
+  // 这里可以添加逻辑来处理下发操作
+  ElMessage.success('下发成功');
+  dialogDispatchVisible.value = false;
+}
+
+onMounted(() => {
+  // 初始化 Leaflet 地图
+  const tileLayerUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+  const markerIconUrl = 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png';
+
+  // 初始化地图
+  // const map = new L.Map('map').setView([31.2304, 121.4737], 15);
+  // L.tileLayer(tileLayerUrl).addTo(map);
+  // L.marker([31.2304, 121.4737]).addTo(map)
+  //     .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
+  //     .openPopup();
+});
+</script>
+<style scoped>
+.work-order-management {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.map-container {
+  height: 400px;
+  position: relative;
+}
+
+#map {
+  height: 100%;
+}
+</style>

src/views/gdczgl/rwdc/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="work-order-export">
+    <h2>井盖设备处置工单导出</h2>
+    <el-card>
+      <el-table
+          :data="workOrders"
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
+        <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="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+      </el-table>
+      <el-row type="flex" justify="end" style="margin-top: 16px;">
+        <el-button type="primary" @click="exportSelected">导出选中</el-button>
+        <el-button type="success" @click="exportAll">导出全部</el-button>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+// 模拟数据
+const workOrders = ref([
+  {
+    orderNumber: 'W20230915001',
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '排水',
+    assignedUnit: '水务局',
+    address: '上海市浦东新区陆家嘴环路1000号',
+  },
+  // 更多模拟数据...
+]);
+
+const selectedOrders = ref([]);
+
+// 处理表格选择变化
+function handleSelectionChange(val) {
+  selectedOrders.value = val;
+}
+
+// 导出选中的工单
+function exportSelected() {
+  console.log('导出选中的工单:', selectedOrders.value);
+  // 在这里可以调用 API 或使用文件导出库来导出选中的工单
+}
+
+// 导出全部工单
+function exportAll() {
+  console.log('导出全部工单:', workOrders.value);
+  // 在这里可以调用 API 或使用文件导出库来导出全部工单
+}
+
+onMounted(() => {
+  // 在这里可以调用 API 获取实际的数据
+});
+</script>
+
+<style scoped>
+.work-order-export {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+</style>

src/views/gdczgl/rwlb/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="work-order-management">
+    <el-card class="work-order-list">
+      <h3>待办工单列表</h3>
+      <el-table :data="workOrders" style="width: 100%" @row-click="handleRowClick">
+        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
+        <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="alarmDescription" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-card v-if="selectedWorkOrder" class="work-order-details">
+      <h3>工单详情</h3>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="案件编号">{{ selectedWorkOrder.caseNumber }}</el-descriptions-item>
+        <el-descriptions-item label="报警名称">{{ selectedWorkOrder.alarmName }}</el-descriptions-item>
+        <el-descriptions-item label="报警时间">{{ selectedWorkOrder.alarmTime }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedWorkOrder.alarmDescription }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备编号">{{ selectedWorkOrder.deviceSerial }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备名称">{{ selectedWorkOrder.deviceName }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备用途">{{ selectedWorkOrder.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedWorkOrder.assignedUnit }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位电话">{{ selectedWorkOrder.unitPhone }}</el-descriptions-item>
+        <el-descriptions-item label="安装时间">{{ selectedWorkOrder.installationTime }}</el-descriptions-item>
+        <el-descriptions-item label="区">{{ selectedWorkOrder.district }}</el-descriptions-item>
+        <el-descriptions-item label="街道">{{ selectedWorkOrder.street }}</el-descriptions-item>
+        <el-descriptions-item label="道路">{{ selectedWorkOrder.road }}</el-descriptions-item>
+        <el-descriptions-item label="辅助定位地址">{{ selectedWorkOrder.auxiliaryAddress }}</el-descriptions-item>
+        <el-descriptions-item label="井盖设备材质">{{ selectedWorkOrder.material }}</el-descriptions-item>
+        <el-descriptions-item label="工单办理经过">
+          <p>{{ selectedWorkOrder.process }}</p>
+        </el-descriptions-item>
+        <el-descriptions-item label="附件多媒体信息">
+          <el-image v-for="(media, index) in selectedWorkOrder.media" :key="index" :src="media.url" fit="cover" />
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <div v-if="selectedWorkOrder && selectedWorkOrder.location" class="map-container">
+      <h3>井盖设备位置</h3>
+      <l-map :zoom="15" :center="selectedWorkOrder.location" style="height: 400px">
+        <l-tile-layer :url="tileLayerUrl" />
+        <l-marker :lat-lng="selectedWorkOrder.location">
+          <l-icon :icon-url="markerIconUrl" :icon-size="[30, 41]" :icon-anchor="[15, 41]" />
+        </l-marker>
+      </l-map>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+// 模拟数据
+const workOrders = ref([
+  {
+    orderNumber: 'W20230915001',
+    caseNumber: 'C20230915001',
+    alarmLevel: '紧急',
+    alarmType: '损坏',
+    alarmDescription: '井盖破损严重，存在安全隐患。',
+    purpose: '排水',
+    assignedUnit: '水务局',
+    address: '上海市浦东新区陆家嘴环路1000号',
+    location: [31.2304, 121.4737],
+    media: [
+      { url: 'https://example.com/image1.jpg' },
+      { url: 'https://example.com/image2.jpg' }
+    ]
+  },
+  {
+    orderNumber: 'W20230915002',
+    caseNumber: 'C20230915002',
+    alarmLevel: '一般',
+    alarmType: '丢失',
+    alarmDescription: '井盖丢失，行人通行不便。',
+    purpose: '供水',
+    assignedUnit: '市政工程局',
+    address: '上海市徐汇区漕溪路180号',
+    location: [31.1977, 121.4328],
+    media: [
+      { url: 'https://example.com/image3.jpg' },
+      { url: 'https://example.com/image4.jpg' }
+    ]
+  }
+]);
+
+const selectedWorkOrder = ref(null);
+const tileLayerUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+const markerIconUrl = 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png';
+
+// 工单列表点击事件
+const handleRowClick = (row) => {
+  selectedWorkOrder.value = row;
+};
+
+// 初始化
+onMounted(() => {
+  // 初始化逻辑
+});
+</script>
+
+<style scoped>
+.work-order-management {
+  padding: 20px;
+}
+
+.work-order-list,
+.work-order-details {
+  margin-bottom: 20px;
+}
+
+.map-container {
+  margin-top: 20px;
+}
+</style>

src/views/gdczgl/rwtj/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="task-statistics">
+    <h2>任务统计</h2>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-card class="task-card">
+          <div slot="header" class="card-header">
+            <span>当日待办工单数</span>
+          </div>
+          <div class="card-body">
+            <h3>{{ todayPendingOrders }}</h3>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="task-card">
+          <div slot="header" class="card-header">
+            <span>已办工单数</span>
+          </div>
+          <div class="card-body">
+            <h3>{{ completedOrders }}</h3>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="task-card">
+          <div slot="header" class="card-header">
+            <span>延期工单数</span>
+          </div>
+          <div class="card-body">
+            <h3>{{ delayedOrders }}</h3>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="task-card">
+          <div slot="header" class="card-header">
+            <span>缓办工单数</span>
+          </div>
+          <div class="card-body">
+            <h3>{{ postponedOrders }}</h3>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+// 模拟数据
+const todayPendingOrders = ref(25);
+const completedOrders = ref(40);
+const delayedOrders = ref(5);
+const postponedOrders = ref(10);
+
+onMounted(() => {
+  // 在这里可以调用 API 获取实际的数据
+});
+</script>
+
+<style scoped>
+.task-statistics {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.task-card {
+  text-align: center;
+}
+
+.card-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+  background-color: #f5f5f5;
+}
+
+.card-body {
+  padding: 20px;
+}
+</style>

src/views/ldzh/ajgz/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="case-tracker">
+    <el-card class="case-list">
+      <div class="case-header">
+        <h3>案件跟踪</h3>
+        <el-form :inline="true" class="case-query-form">
+          <!-- 筛选功能 -->
+          <el-form-item label="报警级别">
+            <el-select v-model="alarmLevel" placeholder="请选择">
+              <el-option label="全部" value=""></el-option>
+              <el-option label="一级" value="1"></el-option>
+              <el-option label="二级" value="2"></el-option>
+              <el-option label="三级" value="3"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="报警区域">
+            <el-select v-model="alarmArea" placeholder="请选择">
+              <el-option label="全部" value=""></el-option>
+              <el-option label="区域A" value="区域A"></el-option>
+              <el-option label="区域B" value="区域B"></el-option>
+              <el-option label="区域C" value="区域C"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="事项类型">
+            <el-select v-model="matterType" placeholder="请选择">
+              <el-option label="全部" value=""></el-option>
+              <el-option label="类型1" value="类型1"></el-option>
+              <el-option label="类型2" value="类型2"></el-option>
+              <el-option label="类型3" value="类型3"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">查询案件</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="filteredCases" style="width: 100%" :default-sort="{prop: 'arrivalTime', order: 'descending'}">
+        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
+        <el-table-column prop="alarmLevel" label="报警级别" :formatter="formatAlarmLevel"></el-table-column>
+        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
+        <el-table-column prop="description" label="报警描述"></el-table-column>
+        <el-table-column prop="purpose" label="用途"></el-table-column>
+        <el-table-column prop="ownerUnit" label="权属单位"></el-table-column>
+        <el-table-column prop="address" label="详细地址"></el-table-column>
+        <el-table-column prop="arrivalTime" label="到达时间"></el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="viewDetails(scope.row)">查看详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 案件详情模态框 -->
+    <el-dialog v-model="caseDetailVisible" title="案件详情" width="60%">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="案件编号">{{ selectedCase.caseNumber }}</el-descriptions-item>
+        <el-descriptions-item label="报警级别">{{ formatAlarmLevel(selectedCase.alarmLevel) }}</el-descriptions-item>
+        <el-descriptions-item label="报警类型">{{ selectedCase.alarmType }}</el-descriptions-item>
+        <el-descriptions-item label="报警描述">{{ selectedCase.description }}</el-descriptions-item>
+        <el-descriptions-item label="用途">{{ selectedCase.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedCase.ownerUnit }}</el-descriptions-item>
+        <el-descriptions-item label="详细地址">{{ selectedCase.address }}</el-descriptions-item>
+        <el-descriptions-item label="到达时间">{{ selectedCase.arrivalTime }}</el-descriptions-item>
+        <el-descriptions-item label="办理经过">
+          <el-timeline>
+            <el-timeline-item v-for="(item, index) in selectedCase.processHistory" :key="index" :timestamp="item.time" placement="top">
+              <el-card>
+                <p>{{ item.action }} - {{ item.operator }}</p>
+                <p>{{ item.remarks }}</p>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </el-descriptions-item>
+        <el-descriptions-item label="附件信息">
+          <el-row :gutter="20">
+            <el-col :span="8" v-for="(attachment, index) in selectedCase.attachments" :key="index">
+              <el-card :body-style="{ padding: '0px' }">
+                <img :src="attachment.url" class="image" />
+                <div style="padding: 14px;">
+                  <span>{{ attachment.type }}</span>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟案件数据
+const cases = ref([
+  {
+    caseNumber: '001',
+    alarmLevel: '1',
+    alarmType: '紧急情况',
+    description: '详细描述1',
+    purpose: '目的1',
+    ownerUnit: '单位1',
+    address: '地址1',
+    arrivalTime: '2023-09-15 14:30:00',
+    processHistory: [
+      { action: '立案', operator: '张三', time: '2023-09-15 14:30:00', remarks: '立案成功' },
+      { action: '下派', operator: '李四', time: '2023-09-15 14:35:00', remarks: '已下派至单位1' },
+      { action: '核查', operator: '王五', time: '2023-09-15 14:40:00', remarks: '已核查，无误' }
+    ],
+    attachments: [
+      { url: 'https://example.com/image1.jpg', type: '图片' },
+      { url: 'https://example.com/video1.mp4', type: '视频' }
+    ]
+  },
+  // 可以添加更多模拟数据
+]);
+
+// 控制案件详情模态框的显示与隐藏
+const caseDetailVisible = ref(false);
+
+// 当前选中的案件信息
+const selectedCase = ref({});
+
+// 筛选条件
+const alarmLevel = ref('');
+const alarmArea = ref('');
+const matterType = ref('');
+
+// 查询案件
+const handleQuery = () => {
+  console.log('查询案件');
+
+  // 根据筛选条件过滤数据
+  const filteredData = cases.value.filter(item => {
+    return (
+        (!alarmLevel.value || item.alarmLevel === alarmLevel.value) &&
+        (!alarmArea.value || item.area === alarmArea.value) &&
+        (!matterType.value || item.matterType === matterType.value)
+    );
+  });
+
+  // 更新案件数据
+  cases.value = filteredData;
+};
+
+// 查看案件详情
+const viewDetails = (row) => {
+  console.log('查看案件详情', row);
+  // 设置当前选中的案件信息
+  selectedCase.value = row;
+  // 打开模态框
+  caseDetailVisible.value = true;
+};
+
+// 格式化报警级别
+const formatAlarmLevel = (level) => {
+  switch (level) {
+    case '1':
+      return '一级（红色）';
+    case '2':
+      return '二级（橙色）';
+    case '3':
+      return '三级（黄色）';
+    default:
+      return '未知级别';
+  }
+};
+
+// 过滤后的案件数据
+const filteredCases = computed(() => {
+  let filtered = cases.value;
+
+  if (alarmLevel.value) {
+    filtered = filtered.filter(item => item.alarmLevel === alarmLevel.value);
+  }
+
+  if (alarmArea.value) {
+    filtered = filtered.filter(item => item.area === alarmArea.value);
+  }
+
+  if (matterType.value) {
+    filtered = filtered.filter(item => item.matterType === matterType.value);
+  }
+
+  return filtered.sort((a, b) => new Date(b.arrivalTime) - new Date(a.arrivalTime));
+});
+</script>
+
+<style scoped>
+.case-tracker {
+  padding: 20px;
+}
+.case-list {
+  margin-bottom: 20px;
+}
+.case-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.image {
+  width: 100%;
+  display: block;
+}
+</style>

src/views/ldzh/bjcl/index.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage, ElMessageBox, ElDialog } from 'element-plus';
+
+// 模拟报警数据
+const alarmData = ref([
+  { deviceId: '001', alarmType: '井盖位移', alarmLevel: '高', status: '未处理', time: '2023-09-15 14:30:00', location: '上海市浦东新区' },
+  { deviceId: '002', alarmType: '水浸', alarmLevel: '中', status: '处理中', time: '2023-09-15 14:35:00', location: '上海市徐汇区' },
+  { deviceId: '003', alarmType: '破损', alarmLevel: '低', status: '已处理', time: '2023-09-15 14:40:00', location: '上海市静安区' },
+  // 可以添加更多模拟数据
+]);
+
+// 控制报警详情模态框的显示与隐藏
+const detailVisible = ref(false);
+
+// 当前选中的报警信息
+const currentAlarm = ref({});
+
+// 筛选条件
+const deviceType = ref('');
+const alarmType = ref('');
+const alarmStatus = ref('');
+
+// 查询报警
+const handleQuery = () => {
+  console.log('查询报警');
+
+  // 根据筛选条件过滤数据
+  const filteredData = alarmData.value.filter(item => {
+    return (
+        (!deviceType.value || item.deviceType === deviceType.value) &&
+        (!alarmType.value || item.alarmType === alarmType.value) &&
+        (!alarmStatus.value || item.status === alarmStatus.value)
+    );
+  });
+
+  // 更新报警数据
+  alarmData.value = filteredData;
+};
+
+// 屏蔽报警
+const handleBlock = (row) => {
+  ElMessageBox.confirm(`确定屏蔽设备 ${row.deviceId} 的报警吗？`)
+      .then(() => {
+        console.log('屏蔽报警', row);
+        // 这里可以添加屏蔽报警的逻辑，例如更新报警状态或调用 API 更新服务器端的数据
+        ElMessage.success('报警成功屏蔽！');
+      })
+      .catch(() => {
+        ElMessage.error('取消屏蔽');
+      });
+};
+
+// 查看报警详情
+const handleView = (row) => {
+  console.log('查看报警详情', row);
+  // 设置当前选中的报警信息
+  currentAlarm.value = row;
+  // 打开模态框
+  detailVisible.value = true;
+};
+</script>
+
+
+
+<template>
+  <div class="alarm-management">
+    <el-card class="alarm-card">
+      <div class="alarm-header">
+        <h3>报警管理</h3>
+        <el-form :inline="true" class="alarm-query-form">
+          <!-- 筛选功能 -->
+          <el-form-item label="设备类型">
+            <el-select v-model="deviceType" 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="alarmType" placeholder="请选择">
+              <el-option label="全部" value=""></el-option>
+              <el-option label="井盖位移" value="井盖位移"></el-option>
+              <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="alarmStatus" placeholder="请选择">
+              <el-option label="全部" value=""></el-option>
+              <el-option label="未处理" value="未处理"></el-option>
+              <el-option label="处理中" value="处理中"></el-option>
+              <el-option label="已处理" value="已处理"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">查询报警</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="alarmData" style="width: 100%">
+        <el-table-column prop="deviceId" label="设备ID"></el-table-column>
+        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
+        <el-table-column prop="alarmLevel" label="报警等级"></el-table-column>
+        <el-table-column prop="status" label="报警状态"></el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="handleBlock(scope.row)">屏蔽报警</el-button>
+            <el-button type="text" @click="handleView(scope.row)">查看详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 报警详情模态框 -->
+    <el-dialog v-model="detailVisible" title="报警详情" width="50%">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="设备ID">{{ currentAlarm.deviceId }}</el-descriptions-item>
+        <el-descriptions-item label="报警类型">{{ currentAlarm.alarmType }}</el-descriptions-item>
+        <el-descriptions-item label="报警等级">{{ currentAlarm.alarmLevel }}</el-descriptions-item>
+        <el-descriptions-item label="报警状态">{{ currentAlarm.status }}</el-descriptions-item>
+        <el-descriptions-item label="报警时间">{{ currentAlarm.time }}</el-descriptions-item>
+        <el-descriptions-item label="位置">{{ currentAlarm.location }}</el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+  </div>
+</template>
+
+
+<style scoped>
+.alarm-management {
+  padding: 20px;
+}
+.alarm-card {
+  margin-bottom: 20px;
+}
+.alarm-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

src/views/ldzh/jggl/index.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue';
+import { ElMessage, ElTooltip } from 'element-plus';
+
+// 井盖设备数据
+const manholeCovers = ref([]);
+
+// 加载井盖设备数据
+function loadManholeCovers() {
+  // 假设这是从后端获取的数据
+  const sampleData = [
+    {
+      id: 1,
+      name: '井盖1',
+      location: [800, 300], // 图像上的坐标
+      status: 'normal',
+      ownership: '市政公司A',
+      terminalStatus: 'online',
+      imageUrl: 'https://via.placeholder.com/150',
+    },
+    {
+      id: 2,
+      name: '井盖2',
+      location: [700, 200], // 图像上的坐标
+      status: 'abnormal',
+      abnormalType: '倾斜',
+      ownership: '市政公司B',
+      terminalStatus: 'offline',
+      imageUrl: 'https://via.placeholder.com/150',
+    },
+  ];
+  manholeCovers.value = sampleData;
+}
+
+// 初始化
+loadManholeCovers();
+// 计算统计信息
+const totalCovers = computed(() => manholeCovers.value.length);
+const normalCovers = computed(() => manholeCovers.value.filter(cover => cover.status === 'normal').length);
+const abnormalCovers = computed(() => manholeCovers.value.filter(cover => cover.status === 'abnormal').length);
+const totalTerminals = computed(() => manholeCovers.value.length); // 每个井盖都有一个终端
+const onlineTerminals = computed(() => manholeCovers.value.filter(cover => cover.terminalStatus === 'online').length);
+const offlineTerminals = computed(() => manholeCovers.value.filter(cover => cover.terminalStatus === 'offline').length);
+
+// 批量下发离线维护任务
+function sendMaintenanceTasks() {
+  // 模拟批量下发离线维护任务
+  manholeCovers.value.forEach(cover => {
+    if (cover.terminalStatus === 'offline') {
+      cover.terminalStatus = 'maintenance'; // 设置为维护状态
+    }
+  });
+  ElMessage.success('离线维护任务已成功下发！');
+}
+</script>
+<template>
+  <div class="manhole-cover-overview">
+    <div class="statistics-panel">
+      <div>井盖设备总数: {{ totalCovers }}</div>
+      <div>正常数: {{ normalCovers }}</div>
+      <div>异常数: {{ abnormalCovers }}</div>
+      <div>智能终端总数: {{ totalTerminals }}</div>
+      <div>在线数: {{ onlineTerminals }}</div>
+      <div>离线数: {{ offlineTerminals }}</div>
+      <el-button type="primary" @click="sendMaintenanceTasks">批量下发离线维护任务</el-button>
+    </div>
+    <!-- 地图背景图 -->
+    <img src="/map.jpg" alt="地图" class="map-image" />
+
+    <!-- 井盖设备图标 -->
+    <div
+        v-for="(cover, index) in manholeCovers"
+        :key="index"
+        :class="['manhole-cover-icon', { 'status-normal': cover.status === 'normal', 'status-abnormal': cover.status === 'abnormal' }]"
+        :style="{ left: `${cover.location[0]}px`, top: `${cover.location[1]}px` }"
+    >
+      <el-tooltip effect="dark" placement="top">
+        <template #content>
+          <div>
+            <strong>{{ cover.name }}</strong><br>
+            <span>位置: {{ cover.location.join(', ') }}</span><br>
+            <span>状态: {{ cover.status === 'normal' ? '正常' : cover.abnormalType }}</span><br>
+            <span>所属权属单位: {{ cover.ownership }}</span><br>
+            <span>终端状态: {{ cover.terminalStatus === 'online' ? '在线' : '离线' }}</span><br>
+            <img :src="cover.imageUrl" alt="井盖图片" width="100">
+          </div>
+        </template>
+        <i class="el-icon-location"></i>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<style scoped>
+.manhole-cover-overview {
+  position: relative;
+  width: 100%;
+  height: 500px;
+}
+
+.map-image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.manhole-cover-icon {
+  position: absolute;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  background-color: #f00;
+  border-radius: 50%;
+}
+
+.status-normal {
+  background-color: green;
+}
+
+.status-abnormal {
+  background-color: red;
+}
+
+/* 为 Tooltip 添加样式 */
+.el-icon-location {
+  display: block;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  color: white;
+  font-size: 16px;
+}
+.statistics-panel {
+  position: absolute;
+  top: 10px;
+  left: 0px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+</style>

src/views/ldzh/sgpb/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="cover-shielding">
+    <el-card class="shielding-settings">
+      <h3>设备屏蔽设置</h3>
+      <el-form :inline="true" class="shielding-query-form">
+        <el-form-item label="道路搜索">
+          <el-input v-model="roadSearch" placeholder="请输入道路名称" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="searchRoads">搜索道路</el-button>
+        </el-form-item>
+      </el-form>
+      <el-divider content-position="left">报警类型屏蔽</el-divider>
+      <el-checkbox-group v-model="selectedAlarmTypes">
+        <el-checkbox v-for="type in alarmTypes" :label="type" :key="type">{{ type }}</el-checkbox>
+      </el-checkbox-group>
+      <el-divider content-position="left">井盖设备用途屏蔽</el-divider>
+      <el-checkbox-group v-model="selectedPurposeTypes">
+        <el-checkbox v-for="purpose in purposeTypes" :label="purpose" :key="purpose">{{ purpose }}</el-checkbox>
+      </el-checkbox-group>
+      <el-divider content-position="left">屏蔽截止时间</el-divider>
+      <el-form-item>
+        <el-date-picker
+            v-model="endDate"
+            type="datetime"
+            placeholder="选择日期时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="applyShielding">应用屏蔽</el-button>
+      </el-form-item>
+    </el-card>
+
+    <el-card class="shielded-road-info">
+      <h3>已屏蔽道路及区域信息</h3>
+      <el-table :data="shieldedRoads" style="width: 100%">
+        <el-table-column prop="roadName" label="道路名称"></el-table-column>
+        <el-table-column prop="shieldStartTime" label="屏蔽开始时间"></el-table-column>
+        <el-table-column prop="shieldEndTime" label="屏蔽结束时间"></el-table-column>
+        <el-table-column prop="shieldedAlarms" label="屏蔽报警类型"></el-table-column>
+        <el-table-column prop="shieldedPurposes" label="屏蔽井盖用途"></el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="text" @click="viewMap(scope.row)">查看地图</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 地图查看弹窗 -->
+    <el-dialog v-model="mapVisible" title="地图查看" width="60%">
+      <div id="mapContainer" style="height: 400px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const roadSearch = ref('');
+const selectedAlarmTypes = ref([]);
+const selectedPurposeTypes = ref([]);
+const endDate = ref(null);
+const mapVisible = ref(false);
+
+// 模拟的报警类型和井盖用途
+const alarmTypes = ['漏水', '损坏', '丢失'];
+const purposeTypes = ['供水', '排水', '电力'];
+
+// 已屏蔽的道路信息
+const shieldedRoads = ref([
+  {
+    roadName: '和平大道',
+    shieldStartTime: '2023-09-15 14:30:00',
+    shieldEndTime: '2023-09-15 17:30:00',
+    shieldedAlarms: '漏水,损坏',
+    shieldedPurposes: '供水,排水'
+  },
+  {
+    roadName: '胜利路',
+    shieldStartTime: '2023-09-15 15:00:00',
+    shieldEndTime: '2023-09-15 18:00:00',
+    shieldedAlarms: '丢失',
+    shieldedPurposes: '电力'
+  }
+]);
+
+// 搜索道路
+const searchRoads = () => {
+  console.log('搜索道路:', roadSearch.value);
+  // 实现逻辑：根据输入的道路名称搜索相关道路
+};
+
+// 应用屏蔽
+const applyShielding = () => {
+  console.log('应用屏蔽:', selectedAlarmTypes.value, selectedPurposeTypes.value, endDate.value);
+  // 实现逻辑：保存屏蔽设置
+  // 示例：添加一条新的屏蔽记录
+  shieldedRoads.value.push({
+    roadName: '新屏蔽道路',
+    shieldStartTime: '2023-09-15 16:00:00',
+    shieldEndTime: endDate.value,
+    shieldedAlarms: selectedAlarmTypes.value.join(','),
+    shieldedPurposes: selectedPurposeTypes.value.join(',')
+  });
+};
+
+// 查看地图
+const viewMap = (row) => {
+  console.log('查看地图:', row);
+  // 实现逻辑：加载地图并高亮显示相关道路
+  mapVisible.value = true;
+};
+
+// 初始化地图
+onMounted(() => {
+  initMap();
+});
+
+// 初始化地图
+function initMap() {
+  // 假设这里有一个地图库，比如百度地图或高德地图
+  // 这里只是示例，实际使用时需要引入地图库并配置相应的API Key
+  // 下面是示例代码，用于演示如何初始化地图
+  const mapContainer = document.getElementById('mapContainer');
+  // 假设这里有一个地图对象
+  const map = new Map(mapContainer, {
+    center: [116.404, 39.915],
+    zoom: 15
+  });
+
+  // 添加标记点或其他地图元素
+  // 这里仅作示例，具体实现取决于使用的地图库
+  // const marker = new Marker({
+  //   position: [116.404, 39.915],
+  //   draggable: true
+  // });
+  // map.add(marker);
+}
+</script>
+
+<style scoped>
+.cover-shielding {
+  padding: 20px;
+}
+.shielding-settings {
+  margin-bottom: 20px;
+}
+.shielding-query-form {
+  margin-bottom: 10px;
+}
+.shielded-road-info {
+  margin-top: 20px;
+}
+#mapContainer {
+  border: 1px solid #ccc;
+}
+</style>

src/views/zcgl/jggl/index.vue

@@ -1,9 +1,261 @@
 <script setup>
+import {computed, ref} from "vue";
+// 表格数据
+const tableData = ref([
+  {
+    id: "1",
+    name: '井盖1',
+    purpose: '排水',
+    owner: '水务局',
+    installationDate: '2021-01-01',
+    district: '东城区',
+    street: '王府井大街',
+    road: '1号',
+    location: '王府井附近',
+    status: '正常',
+    enabled: true,
+  },
+  {
+    id: "2",
+    name: '井盖2',
+    purpose: '排水',
+    owner: '水务局',
+    installationDate: '2021-01-01',
+    district: '东城区',
+    street: '王府井大街',
+    road: '1号',
+    location: '王府井附近',
+    status: '正常',
+    enabled: true,
+  },
+  {
+    id: "3",
+    name: '井盖3',
+    purpose: '排水',
+    owner: '水务局',
+    installationDate: '2021-01-01',
+    district: '东城区',
+    street: '王府井大街',
+    road: '1号',
+    location: '王府井附近',
+    status: '正常',
+    enabled: true,
+  },
+]);
+
+// 搜索条件
+const searchForm = ref({
+  id: '',
+  name: '',
+  district: '',
+  street: '',
+  road: '',
+  location: '',
+});
+
+// 是否显示详情弹窗
+const dialogVisible = ref(false);
+
+// 当前选中的井盖信息
+const selectedCover = ref({});
+
+// 根据搜索条件过滤数据
+const filteredTableData = computed(() => {
+  if (!Object.values(searchForm.value).some(value => value)) {
+    return tableData.value;
+  }
+
+  return tableData.value.filter(row => {
+    const matches = [
+      searchForm.value.id && row.id.includes(searchForm.value.id),
+      searchForm.value.name && row.name.includes(searchForm.value.name),
+      searchForm.value.district && row.district.includes(searchForm.value.district),
+      searchForm.value.street && row.street.includes(searchForm.value.street),
+      searchForm.value.road && row.road.includes(searchForm.value.road),
+      searchForm.value.location && row.location.includes(searchForm.value.location),
+    ];
+    return matches.some(match => match);
+  });
+});
+
+// 搜索逻辑
+function search() {
+}
+
+// 显示详情
+function showDetail(row) {
+  selectedCover.value = row;
+  dialogVisible.value = true;
+}
+// 新增井盖表单数据
+const addForm = ref({
+  id: '',
+  name: '',
+  purpose: '排水',
+  owner: '水务局',
+  installationDate: '',
+  district: '',
+  street: '',
+  road: '',
+  location: '',
+  status: '正常',
+  enabled: true,
+});
+
+// 控制新增井盖表单的显示与隐藏
+const addDialogVisible = ref(false);
+
+// 处理新增井盖表单提交
+function handleAddSubmit() {
+  if (addForm.value.id && addForm.value.name && addForm.value.installationDate &&
+      addForm.value.district && addForm.value.street && addForm.value.road) {
+    tableData.value.push({ ...addForm.value });
+    addDialogVisible.value = false;
+  }
+}
+
+// 清空新增井盖表单
+function resetAddForm() {
+  addForm.value = {
+    id: '',
+    name: '',
+    purpose: '排水',
+    owner: '水务局',
+    installationDate: '',
+    district: '',
+    street: '',
+    road: '',
+    location: '',
+    status: '正常',
+    enabled: true,
+  };
+}
 
 </script>
 
 <template>
+  <div>
+    <!-- 搜索表单 -->
+    <el-form :model="searchForm" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="井盖编号">
+            <el-input v-model="searchForm.id" placeholder="请输入井盖编号"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="井盖名称">
+            <el-input v-model="searchForm.name" placeholder="请输入井盖名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="区">
+            <el-input v-model="searchForm.district" placeholder="请输入区"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="街道">
+            <el-input v-model="searchForm.street" placeholder="请输入街道"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="道路">
+            <el-input v-model="searchForm.road" placeholder="请输入道路"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="辅助定位">
+            <el-input v-model="searchForm.location" placeholder="请输入辅助定位地址"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <el-button type="primary" @click="search">搜索</el-button>
+            <el-button type="success" @click="addDialogVisible = true">添加井盖</el-button>
+            <el-button type="warning" @click="">导入</el-button>
+            <el-button type="danger" @click="">导出</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table :data="filteredTableData" style="width: 100%">
+      <el-table-column prop="id" label="井盖编号" width="180"></el-table-column>
+      <el-table-column prop="name" label="井盖名称" width="180"></el-table-column>
+      <el-table-column prop="purpose" label="井盖用途"></el-table-column>
+      <el-table-column prop="owner" label="权属单位"></el-table-column>
+      <el-table-column prop="installationDate" label="安装时间"></el-table-column>
+      <el-table-column prop="district" label="区"></el-table-column>
+      <el-table-column prop="street" label="街道"></el-table-column>
+      <el-table-column prop="road" label="道路"></el-table-column>
+      <el-table-column prop="location" label="辅助定位地址"></el-table-column>
+      <el-table-column prop="status" label="井盖状态"></el-table-column>
+      <el-table-column prop="enabled" label="启用状态">
+        <template #default="scope">
+          <el-tag :type="scope.row.enabled ? 'success' : 'danger'">{{ scope.row.enabled ? '启用' : '禁用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button size="small" type="primary" @click="showDetail(scope.row)">查看详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
+    <!-- 查看详情弹窗 -->
+    <el-dialog title="井盖详情" v-model="dialogVisible">
+      <el-descriptions :column="1">
+        <el-descriptions-item label="井盖编号">{{ selectedCover.id }}</el-descriptions-item>
+        <el-descriptions-item label="井盖名称">{{ selectedCover.name }}</el-descriptions-item>
+        <el-descriptions-item label="井盖用途">{{ selectedCover.purpose }}</el-descriptions-item>
+        <el-descriptions-item label="权属单位">{{ selectedCover.owner }}</el-descriptions-item>
+        <el-descriptions-item label="安装时间">{{ selectedCover.installationDate }}</el-descriptions-item>
+        <el-descriptions-item label="区">{{ selectedCover.district }}</el-descriptions-item>
+        <el-descriptions-item label="街道">{{ selectedCover.street }}</el-descriptions-item>
+        <el-descriptions-item label="道路">{{ selectedCover.road }}</el-descriptions-item>
+        <el-descriptions-item label="辅助定位地址">{{ selectedCover.location }}</el-descriptions-item>
+        <el-descriptions-item label="井盖状态">{{ selectedCover.status }}</el-descriptions-item>
+        <el-descriptions-item label="启用状态">{{ selectedCover.enabled ? '启用' : '禁用' }}</el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+    <!-- 添加井盖弹窗 -->
+    <el-dialog title="添加井盖" v-model="addDialogVisible" width="50%">
+      <el-form :model="addForm" label-width="80px">
+        <el-form-item label="井盖编号">
+          <el-input v-model="addForm.id" placeholder="请输入井盖编号"></el-input>
+        </el-form-item>
+        <el-form-item label="井盖名称">
+          <el-input v-model="addForm.name" placeholder="请输入井盖名称"></el-input>
+        </el-form-item>
+        <el-form-item label="安装时间">
+          <el-date-picker
+              v-model="addForm.installationDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="区">
+          <el-input v-model="addForm.district" placeholder="请输入区"></el-input>
+        </el-form-item>
+        <el-form-item label="街道">
+          <el-input v-model="addForm.street" placeholder="请输入街道"></el-input>
+        </el-form-item>
+        <el-form-item label="道路">
+          <el-input v-model="addForm.road" placeholder="请输入道路"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="resetAddForm">取消</el-button>
+          <el-button type="primary" @click="handleAddSubmit">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <style scoped lang="scss">

src/views/zcgl/qxda/index.vue

@@ -0,0 +1,164 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { ElMessage, ElMessageBox, ElDialog } from 'element-plus';
+
+// 示例数据
+const data = [
+  {
+    id: 1,
+    name: '井盖A',
+    number: 'JG-001',
+    purpose: '雨水排放',
+    ownership: '水务局',
+    location: '朝阳区建国路1号',
+    status: '正常',
+    smart: true,
+    area: '朝阳区',
+    street: '建国路',
+    road: '1号',
+    address: '1号',
+    problems: ['裂缝', '下沉'],
+    installationDate: '2022-01-01',
+  },
+  {
+    id: 2,
+    name: '井盖B',
+    number: 'JG-001',
+    purpose: '雨水排放',
+    ownership: '水务局',
+    location: '朝阳区建国路1号',
+    status: '正常',
+    smart: true,
+    area: '朝阳区',
+    street: '建国路',
+    road: '1号',
+    address: '1号',
+    problems: ['裂缝', '下沉'],
+    installationDate: '2022-01-01',
+  },
+  // 更多数据...
+];
+
+// 表格数据
+const tableData = ref(data);
+
+// 搜索条件
+const searchForm = ref({
+  name: '',
+  installationDate: '',
+});
+
+// 根据搜索条件过滤数据
+const filteredTableData = computed(() => {
+  return tableData.value.filter(item => {
+    const { name, installationDate } = searchForm.value;
+    const matchesName = !name || item.name.includes(name);
+    const matchesInstallationDate = !installationDate || item.installationDate === installationDate;
+
+    return matchesName && matchesInstallationDate;
+  });
+});
+
+// 显示详情
+const detailVisible = ref(false);
+const detail = ref({});
+
+function showDetail(row) {
+  detail.value = row;
+  detailVisible.value = true;
+}
+
+// 重置搜索条件
+function resetSearchForm() {
+  Object.assign(searchForm.value, {
+    name: '',
+    installationDate: '',
+  });
+  ElMessage.success('搜索条件已重置');
+}
+</script>
+
+
+<template>
+  <div>
+    <!-- 搜索表单 -->
+    <el-form :model="searchForm" label-width="80px" inline>
+      <el-form-item label="井盖名称">
+        <el-input v-model="searchForm.name" placeholder="请输入井盖名称"></el-input>
+      </el-form-item>
+      <el-form-item label="安装日期">
+        <el-date-picker
+            v-model="searchForm.installationDate"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="resetSearchForm">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table :data="filteredTableData" style="width: 100%" stripe>
+      <el-table-column prop="name" label="井盖设备名称" width="180">
+      </el-table-column>
+      <el-table-column prop="number" label="井盖设备编号" width="180">
+      </el-table-column>
+      <el-table-column prop="purpose" label="井盖设备用途" width="180">
+      </el-table-column>
+      <el-table-column prop="ownership" label="权属单位" width="180">
+      </el-table-column>
+      <el-table-column prop="location" label="井盖设备位置">
+      </el-table-column>
+      <el-table-column prop="status" label="井盖设备状态" width="180">
+      </el-table-column>
+      <el-table-column prop="smart" label="是否智能井盖设备" width="180">
+        <template #default="{ row }">
+          <el-tag :type="row.smart ? 'success' : 'danger'">{{ row.smart ? '是' : '否' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="100">
+        <template #default="{ row }">
+          <el-button size="small" type="primary" @click="showDetail(row)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 查看详情对话框 -->
+    <el-dialog v-model="detailVisible" title="井盖设备详情" width="50%">
+      <el-form label-position="top">
+        <el-form-item label="井盖设备名称">
+          {{ detail.name }}
+        </el-form-item>
+        <el-form-item label="井盖设备编号">
+          {{ detail.number }}
+        </el-form-item>
+        <el-form-item label="井盖设备用途">
+          {{ detail.purpose }}
+        </el-form-item>
+        <el-form-item label="权属单位">
+          {{ detail.ownership }}
+        </el-form-item>
+        <el-form-item label="井盖设备位置">
+          {{ detail.location }}
+        </el-form-item>
+        <el-form-item label="井盖设备状态">
+          {{ detail.status }}
+        </el-form-item>
+        <el-form-item label="是否智能井盖设备">
+          <el-tag :type="detail.smart ? 'success' : 'danger'">{{ detail.smart ? '是' : '否' }}</el-tag>
+        </el-form-item>
+        <el-form-item label="问题">
+          <ul>
+            <li v-for="(problem, index) in detail.problems" :key="index">{{ problem }}</li>
+          </ul>
+        </el-form-item>
+        <el-form-item label="安装日期">
+          {{ detail.installationDate }}
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+

src/views/zcgl/znzdgl/index.vue

@@ -0,0 +1,290 @@
+<script setup>
+import { ref, computed } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+// 表格数据
+const tableData = ref([
+  {
+    id: '001',
+    name: '终端A',
+    type: '智能井盖',
+    imei: '123456789012345',
+    maintenanceUnit: '水务局',
+    installationDate: '2023-01-01',
+    capabilitySet: '通信,定位,报警',
+    status: '正常',
+    enabled: true,
+  },
+  {
+    id: '002',
+    name: '终端B',
+    type: '智能井盖',
+    imei: '098765432109876',
+    maintenanceUnit: '水务局',
+    installationDate: '2023-02-01',
+    capabilitySet: '通信,报警',
+    status: '正常',
+    enabled: true,
+  },
+  // 更多数据...
+]);
+
+// 搜索条件
+const searchForm = ref({
+  search: '',
+});
+
+// 是否显示详情弹窗
+const dialogVisible = ref(false);
+
+// 当前选中的终端信息
+const selectedTerminal = ref({});
+
+// 根据搜索条件过滤数据
+const filteredTableData = computed(() => {
+  return tableData.value.filter(item => {
+    const searchValue = searchForm.value.search.toLowerCase();
+    return item.id.toLowerCase().includes(searchValue) ||
+        item.name.toLowerCase().includes(searchValue) ||
+        item.imei.toLowerCase().includes(searchValue) ||
+        item.capabilitySet.toLowerCase().includes(searchValue);
+  });
+});
+
+// 显示详情
+function showDetail(row) {
+  selectedTerminal.value = row;
+  dialogVisible.value = true;
+}
+
+// 新增终端表单数据
+const addForm = ref({
+  id: '',
+  name: '',
+  type: '',
+  imei: '',
+  maintenanceUnit: '',
+  installationDate: '',
+  capabilitySet: '',
+});
+
+// 控制新增终端表单的显示与隐藏
+const addDialogVisible = ref(false);
+
+// 处理新增终端表单提交
+function handleAddSubmit() {
+  if (addForm.value.id && addForm.value.name && addForm.value.type &&
+      addForm.value.imei && addForm.value.maintenanceUnit &&
+      addForm.value.installationDate && addForm.value.capabilitySet) {
+    tableData.value.push({ ...addForm.value });
+    addDialogVisible.value = false;
+    ElMessage.success('终端添加成功');
+  } else {
+    ElMessage.error('请确保所有必填项都已填写');
+  }
+}
+
+// 清空新增终端表单
+function resetAddForm() {
+  addForm.value = {
+    id: '',
+    name: '',
+    type: '',
+    imei: '',
+    maintenanceUnit: '',
+    installationDate: '',
+    capabilitySet: '',
+  };
+}
+
+// 编辑终端表单数据
+const editForm = ref({
+  id: '',
+  name: '',
+  type: '',
+  imei: '',
+  maintenanceUnit: '',
+  installationDate: '',
+  capabilitySet: '',
+});
+
+// 控制编辑终端表单的显示与隐藏
+const editDialogVisible = ref(false);
+
+// 处理编辑终端表单提交
+function handleEditSubmit() {
+  if (editForm.value.name && editForm.value.type &&
+      editForm.value.imei && editForm.value.maintenanceUnit &&
+      editForm.value.installationDate && editForm.value.capabilitySet) {
+    const index = tableData.value.findIndex(item => item.id === editForm.value.id);
+    if (index !== -1) {
+      tableData.value[index] = { ...tableData.value[index], ...editForm.value };
+      editDialogVisible.value = false;
+      ElMessage.success('终端信息更新成功');
+    } else {
+      ElMessage.error('未找到指定终端');
+    }
+  } else {
+    ElMessage.error('请确保所有必填项都已填写');
+  }
+}
+
+// 清空编辑终端表单
+function resetEditForm() {
+  editForm.value = {
+    id: '',
+    name: '',
+    type: '',
+    imei: '',
+    maintenanceUnit: '',
+    installationDate: '',
+    capabilitySet: '',
+  };
+}
+
+// 显示编辑弹窗
+function showEdit(row) {
+  editForm.value = { ...row };
+  editDialogVisible.value = true;
+}
+</script>
+
+<template>
+  <div>
+    <!-- 搜索表单 -->
+    <el-form :model="searchForm" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-input v-model="searchForm.search" placeholder="请输入终端编号、名称、IMEI号或能力集"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item>
+        <el-button type="primary" @click="search">搜索</el-button><!-- 添加终端按钮 -->
+        <el-button type="success" @click="addDialogVisible = true">添加终端</el-button>
+        <el-button type="warning" @click="">导入</el-button>
+        <el-button type="danger" @click="">导出</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table :data="filteredTableData" style="width: 100%">
+      <el-table-column prop="id" label="终端编号" sortable></el-table-column>
+      <el-table-column prop="name" label="终端名称" sortable></el-table-column>
+      <el-table-column prop="type" label="终端类型" sortable></el-table-column>
+      <el-table-column prop="imei" label="终端IMEI号" sortable></el-table-column>
+      <el-table-column prop="maintenanceUnit" label="运维单位" sortable></el-table-column>
+      <el-table-column prop="installationDate" label="安装时间" sortable></el-table-column>
+      <el-table-column prop="capabilitySet" label="能力集" sortable></el-table-column>
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button size="small" type="primary" @click="showDetail(scope.row)">查看详情</el-button>
+          <el-button size="small" type="success" @click="showEdit(scope.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 查看详情弹窗 -->
+    <el-dialog title="智能终端详情" v-model="dialogVisible">
+      <el-form label-width="80px">
+        <el-form-item label="终端编号">
+          <span>{{ selectedTerminal.id }}</span>
+        </el-form-item>
+        <el-form-item label="终端名称">
+          <span>{{ selectedTerminal.name }}</span>
+        </el-form-item>
+        <el-form-item label="终端类型">
+          <span>{{ selectedTerminal.type }}</span>
+        </el-form-item>
+        <el-form-item label="终端IMEI号">
+          <span>{{ selectedTerminal.imei }}</span>
+        </el-form-item>
+        <el-form-item label="运维单位">
+          <span>{{ selectedTerminal.maintenanceUnit }}</span>
+        </el-form-item>
+        <el-form-item label="安装时间">
+          <span>{{ selectedTerminal.installationDate }}</span>
+        </el-form-item>
+        <el-form-item label="能力集">
+          <span>{{ selectedTerminal.capabilitySet }}</span>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <!-- 添加终端弹窗 -->
+    <el-dialog title="添加智能终端" v-model="addDialogVisible" width="50%">
+      <el-form :model="addForm" label-width="80px">
+        <el-form-item label="终端编号">
+          <el-input v-model="addForm.id" placeholder="请输入终端编号"></el-input>
+        </el-form-item>
+        <el-form-item label="终端名称">
+          <el-input v-model="addForm.name" placeholder="请输入终端名称"></el-input>
+        </el-form-item>
+        <el-form-item label="终端类型">
+          <el-input v-model="addForm.type" placeholder="请输入终端类型"></el-input>
+        </el-form-item>
+        <el-form-item label="终端IMEI号">
+          <el-input v-model="addForm.imei" placeholder="请输入终端IMEI号"></el-input>
+        </el-form-item>
+        <el-form-item label="运维单位">
+          <el-input v-model="addForm.maintenanceUnit" placeholder="请输入运维单位"></el-input>
+        </el-form-item>
+        <el-form-item label="安装时间">
+          <el-date-picker
+              v-model="addForm.installationDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="能力集">
+          <el-input v-model="addForm.capabilitySet" placeholder="请输入能力集"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="resetAddForm">取消</el-button>
+          <el-button type="primary" @click="handleAddSubmit">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 编辑终端弹窗 -->
+    <el-dialog title="编辑智能终端" v-model="editDialogVisible" width="50%">
+      <el-form :model="editForm" label-width="80px">
+        <el-form-item label="终端编号">
+          <el-input v-model="editForm.id" disabled placeholder="终端编号不可修改"></el-input>
+        </el-form-item>
+        <el-form-item label="终端名称">
+          <el-input v-model="editForm.name" placeholder="请输入终端名称"></el-input>
+        </el-form-item>
+        <el-form-item label="终端类型">
+          <el-input v-model="editForm.type" placeholder="请输入终端类型"></el-input>
+        </el-form-item>
+        <el-form-item label="终端IMEI号">
+          <el-input v-model="editForm.imei" placeholder="请输入终端IMEI号"></el-input>
+        </el-form-item>
+        <el-form-item label="运维单位">
+          <el-input v-model="editForm.maintenanceUnit" placeholder="请输入运维单位"></el-input>
+        </el-form-item>
+        <el-form-item label="安装时间">
+          <el-date-picker
+              v-model="editForm.installationDate"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="能力集">
+          <el-input v-model="editForm.capabilitySet" placeholder="请输入能力集"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="resetEditForm">取消</el-button>
+          <el-button type="primary" @click="handleEditSubmit">保存</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>

src/views/zcxxbf/index.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue';
+import { ElMessage, ElDatePicker } from 'element-plus';
+
+// 自动备份开关
+const autoBackupEnabled = ref(true);
+
+// 备份时间点
+const backupTime = ref('');
+
+// 开启/关闭自动备份
+function toggleAutoBackup() {
+  if (autoBackupEnabled.value) {
+    ElMessage.success('自动备份已开启');
+  } else {
+    ElMessage.warning('自动备份已关闭');
+  }
+}
+
+// 设置备份时间点
+function setBackupTime(time) {
+  backupTime.value = time;
+  ElMessage.success(`备份时间设置为 ${time}`);
+}
+</script>
+
+<template>
+  <div>
+    <!-- 自动备份开关 -->
+    <el-switch
+        v-model="autoBackupEnabled"
+        active-text="开启"
+        inactive-text="关闭"
+        @input="toggleAutoBackup"
+    ></el-switch>
+
+    <!-- 备份时间点 -->
+    <el-form label-position="top" style="margin-top: 20px;">
+      <el-form-item label="备份时间点">
+        <el-date-picker
+            v-model="backupTime"
+            type="time"
+            placeholder="选择时间"
+            value-format="HH:mm"
+            @change="setBackupTime"
+        ></el-date-picker>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+
+<style scoped lang="scss">
+
+</style>

src/views/zdyw/gzgl/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+12312321312312312
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/zdyw/ywrwgl/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-container>
+    <!-- 任务下发 -->
+    <el-main>
+      <div class="task-management">
+        <h2>任务下发</h2>
+        <el-form :model="searchForm" ref="searchFormRef" label-width="120px">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="终端编号">
+                <el-input v-model="searchForm.deviceId" placeholder="请输入终端编号" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="问题状态">
+                <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-col>
+            <el-col :span="8">
+              <el-form-item>
+                <el-button type="primary" @click="searchTasks">查询</el-button>
+                <el-button @click="resetForm">重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+        <el-table :data="filteredTasks" style="width: 100%" border>
+          <el-table-column prop="deviceId" label="终端编号" width="180" />
+          <el-table-column prop="problem" label="问题描述" width="300" />
+          <el-table-column prop="status" label="问题状态" width="180" />
+          <el-table-column prop="lastUpdate" label="最后更新时间" width="180" />
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-button size="small" type="primary" @click="assignTask(row)">下发任务</el-button>
+              <el-button size="small" type="info" @click="viewMaintenanceRecord(row)">查看维护记录</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-main>
+  </el-container>
+  <!-- 维护记录 -->
+  <el-main>
+    <div class="maintenance-record">
+      <h2>维护记录</h2>
+      <el-table :data="maintenanceRecords" style="width: 100%" border>
+        <el-table-column prop="maintenanceDate" label="维护日期" width="180" />
+        <el-table-column prop="description" label="维护描述" width="300" />
+        <el-table-column prop="location" label="位置信息" width="180" />
+        <el-table-column prop="maintainer" label="维护人员" width="180" />
+      </el-table>
+    </div>
+  </el-main>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+// 模拟数据
+const tasks = ref([
+  {
+    deviceId: 'D20230915001',
+    problem: '信号弱',
+    status: '未处理',
+    lastUpdate: '2023-09-15',
+  },
+  {
+    deviceId: 'D20230915002',
+    problem: '无法连接',
+    status: '已处理',
+    lastUpdate: '2023-09-16',
+  },
+  // 更多模拟数据...
+]);
+
+const maintenanceRecords = ref([
+  {
+    maintenanceDate: '2023-09-15',
+    description: '更换电池',
+    location: '上海市浦东新区陆家嘴环路1000号',
+    maintainer: '张三',
+  },
+  // 更多模拟数据...
+]);
+
+// 搜索表单
+const searchForm = ref({
+  deviceId: '',
+  status: '',
+});
+
+// 问题状态选项
+const statusOptions = ref([
+  { value: '未处理', label: '未处理' },
+  { value: '已处理', label: '已处理' },
+]);
+
+// 过滤后的任务列表
+const filteredTasks = ref(tasks.value);
+
+// 查询任务
+function searchTasks() {
+  const { deviceId, status } = searchForm.value;
+  filteredTasks.value = tasks.value.filter(task => {
+    return (
+        (deviceId === '' || task.deviceId.includes(deviceId)) &&
+        (status === '' || task.status === status)
+    );
+  });
+}
+
+// 重置搜索表单
+function resetForm() {
+  searchForm.value = {
+    deviceId: '',
+    status: '',
+  };
+  filteredTasks.value = tasks.value;
+}
+
+// 下发任务
+function assignTask(row) {
+  // 假设这里有逻辑处理任务下发
+  ElMessage.success(`任务已下发给 ${row.deviceId}`);
+}
+
+// 查看维护记录
+function viewMaintenanceRecord(row) {
+  // 假设这里有逻辑处理维护记录的展示
+  console.log(`查看维护记录: ${row.deviceId}`);
+}
+
+// 初始化
+onMounted(() => {
+  // 初始化操作
+});
+</script>

vite/plugins/index.js

@@ -4,9 +4,17 @@ import createAutoImport from './auto-import'
 import createSvgIcon from './svg-icon'
 import createCompression from './compression'
 import createSetupExtend from './setup-extend'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 export default function createVitePlugins(viteEnv, isBuild = false) {
-    const vitePlugins = [vue()]
+    const vitePlugins = [vue(),AutoImport({
+        resolvers: [ElementPlusResolver()],
+    }),
+        Components({
+            resolvers: [ElementPlusResolver()],
+        }),]
     vitePlugins.push(createAutoImport())
 	vitePlugins.push(createSetupExtend())
     vitePlugins.push(createSvgIcon(isBuild))