静态页面提交

src/views/zdyw/gzgl/index.vue

@@ -1,11 +1,237 @@
-<script setup>
+<template>
+  <div>
+    <!-- 地图展示 -->
+<!--    <el-main>-->
+<!--      <div class="map-display">-->
+<!--        <h2>地图展示</h2>-->
+<!--        <div id="mapContainer" style="height: 400px; width: 100%;"></div>-->
+<!--      </div>-->
+<!--    </el-main>-->
 
-</script>
+    <!-- 故障查询 -->
+    <el-main>
+      <div class="fault-query">
+        <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="searchFaults">查询</el-button>
+                <el-button @click="resetForm">重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
 
-<template>
-12312321312312312
+        <el-table :data="filteredFaults" 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="viewFaultDetails(row)">查看详情</el-button>
+              <el-button size="small" type="info" @click="dispatchMaintenance(row)">故障处置</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-main>
+
+    <!-- 故障详情 -->
+    <el-dialog v-model="dialogVisible" title="故障详情" width="50%">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="终端编号">{{ currentFault.deviceId }}</el-descriptions-item>
+        <el-descriptions-item label="故障描述">{{ currentFault.problem }}</el-descriptions-item>
+        <el-descriptions-item label="故障状态">{{ currentFault.status }}</el-descriptions-item>
+        <el-descriptions-item label="最后更新时间">{{ currentFault.lastUpdate }}</el-descriptions-item>
+        <el-descriptions-item label="位置信息">{{ currentFault.location }}</el-descriptions-item>
+      </el-descriptions>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 故障处置 -->
+    <el-dialog v-model="maintenanceDialogVisible" title="故障处置" width="50%">
+      <el-form :model="maintenanceForm" ref="maintenanceFormRef" label-width="120px">
+        <el-form-item label="处置方式">
+          <el-radio-group v-model="maintenanceForm.action">
+            <el-radio label="拆卸">拆卸</el-radio>
+            <el-radio label="返厂">返厂</el-radio>
+            <el-radio label="报废">报废</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="处置描述">
+          <el-input v-model="maintenanceForm.description" type="textarea" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="maintenanceDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitMaintenance">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 故障导出 -->
+    <el-main>
+      <div class="fault-export">
+        <h2>故障导出</h2>
+        <el-form :model="exportForm" ref="exportFormRef" label-width="120px">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="故障类型">
+                <el-select v-model="exportForm.faultType" placeholder="请选择故障类型">
+                  <el-option v-for="item in faultTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="维修类型">
+                <el-select v-model="exportForm.maintenanceType" placeholder="请选择维修类型">
+                  <el-option v-for="item in maintenanceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="维修人员">
+                <el-input v-model="exportForm.maintainer" placeholder="请输入维修人员" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item label="开始日期">
+                <el-date-picker v-model="exportForm.startDate" type="date" placeholder="选择日期" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="结束日期">
+                <el-date-picker v-model="exportForm.endDate" type="date" placeholder="选择日期" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item>
+                <el-button type="primary" @click="exportFaults">导出</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </el-main>
+  </div>
 </template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 模拟数据
+const faults = ref([
+  {
+    deviceId: 'D20230915001',
+    problem: '信号弱',
+    status: '24小时内',
+    lastUpdate: '2023-09-15',
+    location: '上海市浦东新区陆家嘴环路1000号',
+    latitude: 31.2304,
+    longitude: 121.4737,
+  },
+  {
+    deviceId: 'D20230915002',
+    problem: '无法连接',
+    status: '48-72小时',
+    lastUpdate: '2023-09-16',
+    location: '上海市徐汇区漕溪北路1200号',
+    latitude: 31.1944,
+    longitude: 121.4375,
+  },
+  // 更多模拟数据...
+]);
+
+// 搜索表单
+const searchForm = ref({
+  deviceId: '',
+  status: '',
+});
+
+// 故障状态选项
+const statusOptions = ref([
+  { value: '24小时内', label: '24小时内' },
+  { value: '24-48小时', label: '24-48小时' },
+  { value: '48-72小时', label: '48-72小时' },
+  { value: '正常', label: '正常' },
+]);
+
+// 过滤后的故障列表
+const filteredFaults = ref(faults.value);
 
-<style scoped lang="scss">
+// 当前查看的故障
+const currentFault = ref({});
 
-</style>
+// 故障详情对话框状态
+const dialogVisible = ref(false);
+
+// 故障处置对话框状态
+const maintenanceDialogVisible = ref(false);
+
+// 故障处置表单
+const maintenanceForm = ref({
+  action: '',
+  description: '',
+});
+
+// 故障导出表单
+const exportForm = ref({
+  faultType: '',
+  maintenanceType: '',
+  maintainer: '',
+  startDate: null,
+  endDate: null,
+});
+
+// 故障类型选项
+const faultTypeOptions = ref([
+  { value: '部件', label: '部件' },
+]);
+
+// 维修类型选项
+const maintenanceTypeOptions = ref([
+  { value: '拆卸', label: '拆卸' },
+  { value: '返厂', label: '返厂' },
+  { value: '报废', label: '报废' },
+]);
+
+// 初始化地图
+function initMap() {
+  // 地图初始化逻辑
+}
+
+// 根据状态获取颜色
+function getColorByStatus(status) {
+  // 返回颜色的逻辑
+}
+
+// 导出故障数据
+function exportFaultData() {
+  // 导出数据的逻辑
+}
+
+// 其他功能函数...
+
+</script>

src/views/zdyw/sjtj/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-card>
+    <el-form :model="searchForm" ref="searchFormRef" :inline="true" class="search-form">
+      <el-form-item label="终端状态" prop="status">
+        <el-select v-model="searchForm.status" placeholder="请选择">
+          <el-option
+              v-for="item in statusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否处理延期" prop="isDelayed">
+        <el-select v-model="searchForm.isDelayed" placeholder="请选择">
+          <el-option
+              v-for="item in isDelayedOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="异常时间段" prop="timeRange">
+        <el-select v-model="searchForm.timeRange" placeholder="请选择">
+          <el-option
+              v-for="item in timeRangeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开始时间" prop="startDate">
+        <el-date-picker
+            v-model="searchForm.startDate"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+        />
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endDate">
+        <el-date-picker
+            v-model="searchForm.endDate"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+        <el-button @click="resetSearch">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="filteredTerminals" border stripe>
+      <el-table-column prop="status" label="终端状态" width="120" />
+      <el-table-column prop="terminalId" label="终端编号" width="120" />
+      <el-table-column prop="terminalName" label="终端名称" width="120" />
+      <el-table-column prop="relatedCoverId" label="关联井盖设备编号" width="120" />
+      <el-table-column prop="address" label="终端详细地址" width="120" />
+      <el-table-column prop="abnormalStatus" label="异常状态" width="120" />
+      <el-table-column prop="abnormalStartTime" label="异常开始时间" width="120" />
+      <el-table-column prop="handlingStatus" label="处理状态" width="120" />
+      <el-table-column prop="handlingEndTime" label="处理结束时间" width="120" />
+      <el-table-column prop="recoveryTime" label="设备恢复时间" width="120" />
+      <el-table-column prop="handler" label="处理人" width="120" />
+      <el-table-column prop="isDelayed" label="是否处理延期" width="120" />
+      <el-table-column prop="timeRange" label="异常时间段" width="120" />
+    </el-table>
+
+    <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="terminals.length"
+        :page-size="10"
+        @current-change="handleCurrentChange"
+    />
+
+    <el-button type="primary" @click="exportTerminals">导出</el-button>
+  </el-card>
+</template>
+<script setup>
+import { ref, computed } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+// import * as XLSX from 'xlsx'; // 导出数据到 Excel
+
+// 模拟数据
+const terminals = ref([
+  {
+    status: '异常',
+    terminalId: 'T20230915001',
+    terminalName: '终端A',
+    relatedCoverId: 'C20230915001',
+    address: '上海市浦东新区陆家嘴环路1000号',
+    abnormalStatus: '信号弱',
+    abnormalStartTime: '2023-09-15',
+    handlingStatus: '处理中',
+    handlingEndTime: '2023-09-16',
+    recoveryTime: '2023-09-17',
+    handler: '张三',
+    isDelayed: false,
+    timeRange: '24小时内',
+  },
+  // 更多模拟数据...
+]);
+
+// 搜索表单
+const searchForm = ref({
+  status: '',
+  isDelayed: '',
+  timeRange: '',
+  startDate: null,
+  endDate: null,
+});
+
+// 状态选项
+const statusOptions = ref([
+  { value: '正常', label: '正常' },
+  { value: '异常', label: '异常' },
+]);
+
+// 是否处理延期选项
+const isDelayedOptions = ref([
+  { value: true, label: '是' },
+  { value: false, label: '否' },
+]);
+
+// 异常时间段选项
+const timeRangeOptions = ref([
+  { value: '24小时内', label: '24小时内' },
+  { value: '48小时内', label: '48小时内' },
+  { value: '72小时内', label: '72小时内' },
+  { value: '72小时外', label: '72小时外' },
+]);
+
+// 过滤后的终端列表
+const filteredTerminals = computed(() => {
+  return terminals.value.filter(terminal => {
+    return (
+        (!searchForm.value.status || terminal.status === searchForm.value.status) &&
+        (!searchForm.value.isDelayed || terminal.isDelayed === searchForm.value.isDelayed) &&
+        (!searchForm.value.timeRange || terminal.timeRange === searchForm.value.timeRange) &&
+        (!searchForm.value.startDate || terminal.abnormalStartTime >= searchForm.value.startDate) &&
+        (!searchForm.value.endDate || terminal.abnormalStartTime <= searchForm.value.endDate)
+    );
+  });
+});
+
+// 处理搜索按钮点击事件
+function handleSearch() {
+  // 这里可以添加进一步的逻辑，例如调用后端API进行数据过滤
+}
+
+// 处理重置按钮点击事件
+function resetSearch() {
+  Object.assign(searchForm.value, {
+    status: '',
+    isDelayed: '',
+    timeRange: '',
+    startDate: null,
+    endDate: null,
+  });
+}
+
+// 处理分页改变事件
+function handleCurrentChange(page) {
+  // 这里可以添加分页逻辑
+}
+
+// 导出终端数据
+function exportTerminals() {
+  // 导出数据的逻辑
+}
+
+</script>

src/views/zdyw/ywrwgl/index.vue

@@ -1,59 +1,61 @@
 <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>
+  <div>
+    <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 :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>
-  </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>
+  </div>
 </template>
 
 <script setup>