From 6d2f26e4c867c1cfba4ebe86d4162edb01da80a0 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期三, 31 十二月 2025 14:32:07 +0800
Subject: [PATCH] 代码调整8

---
 src/views/environmentAccess/intelligentInspectionManagement/index.vue |  578 +++++++++++++++
 src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue     |  630 +++++++++++++++++
 src/views/environmentAccess/accessManagement/index.vue                |  344 +++++++++
 vite.config.js                                                        |    2 
 src/views/environmentAccess/vehicleInformationCollection/index.vue    |  574 +++++++++++++++
 5 files changed, 2,115 insertions(+), 13 deletions(-)

diff --git a/src/views/environmentAccess/accessManagement/index.vue b/src/views/environmentAccess/accessManagement/index.vue
index 40dc0c9..587dc78 100644
--- a/src/views/environmentAccess/accessManagement/index.vue
+++ b/src/views/environmentAccess/accessManagement/index.vue
@@ -1,9 +1,347 @@
 <template>
-  <div></div>
+  <div class="app-container">
+    <el-form :model="filters" :inline="true">
+      <el-form-item label="闂ㄧ鍚嶇О">
+        <el-input
+          v-model="filters.name"
+          style="width: 240px"
+          placeholder="璇疯緭鍏ラ棬绂佸悕绉�"
+          clearable
+          :prefix-icon="Search"
+          @change="getTableData"
+        />
+      </el-form-item>
+      <el-form-item label="闂ㄧ鐘舵��">
+        <el-select
+          v-model="filters.status"
+          style="width: 240px"
+          placeholder="璇烽�夋嫨闂ㄧ鐘舵��"
+          clearable
+          @change="getTableData"
+        >
+          <el-option label="姝ｅ父" value="1"></el-option>
+          <el-option label="寮傚父" value="0"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="鍖哄煙">
+        <el-input
+          v-model="filters.area"
+          style="width: 240px"
+          placeholder="璇疯緭鍏ュ尯鍩�"
+          clearable
+          :prefix-icon="Search"
+          @change="getTableData"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getTableData">鎼滅储</el-button>
+        <el-button @click="resetFilters">閲嶇疆</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="table_list">
+      <div class="actions">
+        <div></div>
+        <div>
+          <el-button type="primary" @click="add" icon="Plus"> 鏂板 </el-button>
+          <el-button type="danger" icon="Delete" :disabled="multipleList.length <= 0" @click="batchDelete">鎵归噺鍒犻櫎</el-button>
+        </div>
+      </div>
+      <PIMTable
+        rowKey="id"
+        isSelection
+        :column="columns"
+        :tableData="dataList"
+        :page="{
+          current: pagination.currentPage,
+          size: pagination.pageSize,
+          total: pagination.total,
+        }"
+        @selection-change="handleSelectionChange"
+        @pagination="changePage"
+      >
+      </PIMTable>
+    </div>
+    <!-- 鏂板缂栬緫寮圭獥 -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
+      <el-form :model="formData" label-width="100px">
+        <el-form-item label="闂ㄧ鍚嶇О" required>
+          <el-input v-model="formData.name" placeholder="璇疯緭鍏ラ棬绂佸悕绉�"></el-input>
+        </el-form-item>
+        <el-form-item label="鍖哄煙" required>
+          <el-input v-model="formData.area" placeholder="璇疯緭鍏ュ尯鍩�"></el-input>
+        </el-form-item>
+        <el-form-item label="浣嶇疆" required>
+          <el-input v-model="formData.location" placeholder="璇疯緭鍏ュ叿浣撲綅缃�"></el-input>
+        </el-form-item>
+        <el-form-item label="鐘舵��" required>
+          <el-select v-model="formData.status" placeholder="璇烽�夋嫨鐘舵��">
+            <el-option label="姝ｅ父" value="1"></el-option>
+            <el-option label="寮傚父" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="鎻忚堪">
+          <el-input v-model="formData.description" type="textarea" rows="3" placeholder="璇疯緭鍏ユ弿杩颁俊鎭�"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+          <el-button type="primary" @click="saveData">纭畾</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
-<script>
 
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { Search, Plus, Delete } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import dayjs from 'dayjs';
+
+// 瀹氫箟鍋囨暟鎹�
+const mockData = [
+  { id: 1, name: '涓滈棬闂ㄧ', area: '鐢熶骇鍖�', location: '涓滈棬鍏ュ彛', status: '1', lastUpdate: '2025-12-30 08:30:00', description: '涓昏鐢ㄤ簬鍛樺伐涓婁笅鐝�氳' },
+  { id: 2, name: '瑗块棬闂ㄧ', area: '浠撳偍鍖�', location: '瑗块棬鍏ュ彛', status: '1', lastUpdate: '2025-12-30 09:15:00', description: '涓昏鐢ㄤ簬鐗╂祦杞﹁締閫氳' },
+  { id: 3, name: '鍗楅棬闂ㄧ', area: '鍔炲叕鍖�', location: '鍗楅棬鍏ュ彛', status: '0', lastUpdate: '2025-12-30 10:20:00', description: '涓昏鐢ㄤ簬璁垮閫氳锛屽綋鍓嶆晠闅�' },
+  { id: 4, name: '鍖楅棬闂ㄧ', area: '鐢熶骇鍖�', location: '鍖楅棬鍏ュ彛', status: '1', lastUpdate: '2025-12-30 11:45:00', description: '涓昏鐢ㄤ簬鍘熸潗鏂欒繍杈撹溅杈嗛�氳' },
+  { id: 5, name: '涓帶瀹ら棬绂�', area: '涓帶鍖�', location: '涓帶瀹ら棬鍙�', status: '1', lastUpdate: '2025-12-30 13:20:00', description: '浠呴檺鎺堟潈浜哄憳杩涘叆' },
+];
+
+// 鍝嶅簲寮忔暟鎹�
+const filters = reactive({
+  name: '',
+  status: '',
+  area: ''
+});
+
+const dataList = ref([]);
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+});
+
+const multipleList = ref([]);
+const dialogVisible = ref(false);
+const dialogTitle = ref('鏂板闂ㄧ');
+const formData = reactive({
+  id: '',
+  name: '',
+  area: '',
+  location: '',
+  status: '1',
+  description: ''
+});
+
+// 琛ㄦ牸鍒楅厤缃�
+const columns = [
+  {
+    label: '闂ㄧ鍚嶇О',
+    align: 'center',
+    prop: 'name',
+  },
+  {
+    label: '鍖哄煙',
+    align: 'center',
+    prop: 'area',
+  },
+  {
+    label: '浣嶇疆',
+    align: 'center',
+    prop: 'location',
+  },
+  {
+    label: '鐘舵��',
+    align: 'center',
+    prop: 'status',
+    formatter: (row) => {
+      return row.status === '1' ? '<el-tag type="success">姝ｅ父</el-tag>' : '<el-tag type="danger">寮傚父</el-tag>';
+    }
+  },
+  {
+    label: '鏈�鍚庢洿鏂�',
+    align: 'center',
+    prop: 'lastUpdate',
+  },
+  {
+    label: '鎻忚堪',
+    align: 'center',
+    prop: 'description',
+  },
+  {
+    dataType: 'action',
+    label: '鎿嶄綔',
+    align: 'center',
+    fixed: 'right',
+    width: 140,
+    operation: [
+      {
+        name: '缂栬緫',
+        type: 'text',
+        clickFun: (row) => {
+          edit(row);
+        },
+      },
+      {
+        name: '鍒犻櫎',
+        type: 'text',
+        clickFun: (row) => {
+          deleteRow(row.id);
+        },
+      },
+    ],
+  },
+];
+
+// 杩囨护鍚庣殑鏁版嵁
+const filteredData = computed(() => {
+  return mockData.filter(item => {
+    const nameMatch = !filters.name || item.name.includes(filters.name);
+    const statusMatch = !filters.status || item.status === filters.status;
+    const areaMatch = !filters.area || item.area.includes(filters.area);
+    return nameMatch && statusMatch && areaMatch;
+  });
+});
+
+// 鑾峰彇琛ㄦ牸鏁版嵁
+const getTableData = () => {
+  pagination.total = filteredData.value.length;
+  const start = (pagination.currentPage - 1) * pagination.pageSize;
+  const end = start + pagination.pageSize;
+  dataList.value = filteredData.value.slice(start, end);
+};
+
+// 閲嶇疆杩囨护鍣�
+const resetFilters = () => {
+  filters.name = '';
+  filters.status = '';
+  filters.area = '';
+  pagination.currentPage = 1;
+  getTableData();
+};
+
+// 鍒嗛〉鍙樺寲
+const changePage = ({ page, limit }) => {
+  pagination.currentPage = page;
+  pagination.pageSize = limit;
+  getTableData();
+};
+
+// 澶氶�夊鐞�
+const handleSelectionChange = (selectionList) => {
+  multipleList.value = selectionList;
+};
+
+// 鏂板
+const add = () => {
+  dialogTitle.value = '鏂板闂ㄧ';
+  formData.id = '';
+  formData.name = '';
+  formData.area = '';
+  formData.location = '';
+  formData.status = '1';
+  formData.description = '';
+  dialogVisible.value = true;
+};
+
+// 缂栬緫
+const edit = (row) => {
+  dialogTitle.value = '缂栬緫闂ㄧ';
+  formData.id = row.id;
+  formData.name = row.name;
+  formData.area = row.area;
+  formData.location = row.location;
+  formData.status = row.status;
+  formData.description = row.description;
+  dialogVisible.value = true;
+};
+
+// 淇濆瓨鏁版嵁
+const saveData = () => {
+  if (!formData.name || !formData.area || !formData.location) {
+    ElMessage.warning('璇峰～鍐欏繀濉瓧娈�');
+    return;
+  }
+
+  const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
+  if (formData.id) {
+    // 缂栬緫
+    const index = mockData.findIndex(item => item.id === formData.id);
+    if (index !== -1) {
+      mockData[index] = {
+        ...formData,
+        lastUpdate: currentTime
+      };
+      ElMessage.success('缂栬緫鎴愬姛');
+    }
+  } else {
+    // 鏂板
+    const newId = Math.max(...mockData.map(item => item.id), 0) + 1;
+    mockData.unshift({
+      ...formData,
+      id: newId,
+      lastUpdate: currentTime
+    });
+    ElMessage.success('鏂板鎴愬姛');
+  }
+  dialogVisible.value = false;
+  getTableData();
+};
+
+// 鍒犻櫎
+const deleteRow = (id) => {
+  ElMessageBox.confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ラ棬绂佽褰�, 鏄惁缁х画?', '鎻愮ず', {
+    confirmButtonText: '纭畾',
+    cancelButtonText: '鍙栨秷',
+    type: 'warning',
+  }).then(() => {
+    const index = mockData.findIndex(item => item.id === id);
+    if (index !== -1) {
+      mockData.splice(index, 1);
+      ElMessage.success('鍒犻櫎鎴愬姛');
+      getTableData();
+    }
+  }).catch(() => {});
+};
+
+// 鎵归噺鍒犻櫎
+const batchDelete = () => {
+  if (multipleList.value.length === 0) {
+    ElMessage.warning('璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁');
+    return;
+  }
+
+  ElMessageBox.confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎鎵�閫夐棬绂佽褰�, 鏄惁缁х画?', '鎻愮ず', {
+    confirmButtonText: '纭畾',
+    cancelButtonText: '鍙栨秷',
+    type: 'warning',
+  }).then(() => {
+    const ids = multipleList.value.map(item => item.id);
+    mockData.forEach((item, index) => {
+      if (ids.includes(item.id)) {
+        mockData.splice(index, 1);
+      }
+    });
+    ElMessage.success('鍒犻櫎鎴愬姛');
+    getTableData();
+    multipleList.value = [];
+  }).catch(() => {});
+};
+
+// 鍒濆鍖栨暟鎹�
+onMounted(() => {
+  getTableData();
+});
 </script>
-<style>
 
+<style lang="scss" scoped>
+.table_list {
+  margin-top: unset;
+}
+.actions {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
 </style>
diff --git a/src/views/environmentAccess/intelligentInspectionManagement/index.vue b/src/views/environmentAccess/intelligentInspectionManagement/index.vue
index 40dc0c9..47fe867 100644
--- a/src/views/environmentAccess/intelligentInspectionManagement/index.vue
+++ b/src/views/environmentAccess/intelligentInspectionManagement/index.vue
@@ -1,9 +1,581 @@
 <template>
-  <div></div>
+  <div class="app-container">
+    <el-form :model="filters" :inline="true">
+      <el-form-item label="宸℃鍚嶇О">
+        <el-input
+          v-model="filters.name"
+          style="width: 240px"
+          placeholder="璇疯緭鍏ュ贰妫�鍚嶇О"
+          clearable
+          :prefix-icon="Search"
+          @change="getTableData"
+        />
+      </el-form-item>
+      <el-form-item label="宸℃鐘舵��">
+        <el-select
+          v-model="filters.status"
+          style="width: 240px"
+          placeholder="璇烽�夋嫨宸℃鐘舵��"
+          clearable
+          @change="getTableData"
+        >
+          <el-option label="寰呮墽琛�" value="0"></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="filters.type"
+          style="width: 240px"
+          placeholder="璇烽�夋嫨宸℃绫诲瀷"
+          clearable
+          @change="getTableData"
+        >
+          <el-option label="瀹氭湡宸℃" value="0"></el-option>
+          <el-option label="涓存椂宸℃" value="1"></el-option>
+          <el-option label="鏁呴殰宸℃" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getTableData">鎼滅储</el-button>
+        <el-button @click="resetFilters">閲嶇疆</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="table_list">
+      <div class="actions">
+        <div></div>
+        <div>
+          <el-button type="primary" @click="add" icon="Plus"> 鏂板 </el-button>
+          <el-button
+            type="danger"
+            icon="Delete"
+            :disabled="multipleList.length <= 0"
+            @click="batchDelete"
+            >鎵归噺鍒犻櫎</el-button
+          >
+        </div>
+      </div>
+      <PIMTable
+        rowKey="id"
+        isSelection
+        :column="columns"
+        :tableData="dataList"
+        :page="{
+          current: pagination.currentPage,
+          size: pagination.pageSize,
+          total: pagination.total,
+        }"
+        @selection-change="handleSelectionChange"
+        @pagination="changePage"
+      >
+      </PIMTable>
+    </div>
+    <!-- 鏂板缂栬緫寮圭獥 -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
+      <el-form :model="formData" label-width="100px">
+        <el-form-item label="宸℃鍚嶇О" required>
+          <el-input
+            v-model="formData.name"
+            placeholder="璇疯緭鍏ュ贰妫�鍚嶇О"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="宸℃绫诲瀷" required>
+          <el-select v-model="formData.type" placeholder="璇烽�夋嫨宸℃绫诲瀷">
+            <el-option label="瀹氭湡宸℃" value="0"></el-option>
+            <el-option label="涓存椂宸℃" value="1"></el-option>
+            <el-option label="鏁呴殰宸℃" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="宸℃鍖哄煙" required>
+          <el-input
+            v-model="formData.area"
+            placeholder="璇疯緭鍏ュ贰妫�鍖哄煙"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="宸℃浜哄憳" required>
+          <el-input
+            v-model="formData.inspector"
+            placeholder="璇疯緭鍏ュ贰妫�浜哄憳"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="璁″垝寮�濮嬫椂闂�" required>
+          <el-date-picker
+            v-model="formData.planStartTime"
+            type="datetime"
+            placeholder="璇烽�夋嫨璁″垝寮�濮嬫椂闂�"
+            style="width: 100%"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="璁″垝缁撴潫鏃堕棿" required>
+          <el-date-picker
+            v-model="formData.planEndTime"
+            type="datetime"
+            placeholder="璇烽�夋嫨璁″垝缁撴潫鏃堕棿"
+            style="width: 100%"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="宸℃鍐呭">
+          <el-input
+            v-model="formData.content"
+            type="textarea"
+            rows="3"
+            placeholder="璇疯緭鍏ュ贰妫�鍐呭"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+          <el-button type="primary" @click="saveData">纭畾</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
-<script>
 
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import { Search, Plus, Delete } from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import dayjs from "dayjs";
+
+// 瀹氫箟鍋囨暟鎹�
+const mockData = [
+  {
+    id: 1,
+    name: "涓滈棬鍖哄煙鏃ュ父宸℃",
+    type: "0",
+    status: "2",
+    planStartTime: "2025-12-30 08:00:00",
+    planEndTime: "2025-12-30 09:00:00",
+    actualStartTime: "2025-12-30 08:05:00",
+    actualEndTime: "2025-12-30 08:55:00",
+    inspector: "寮犱笁",
+    area: "涓滈棬鍖哄煙",
+    content: "妫�鏌ラ棬绂佽澶囪繍琛岀姸鎬併�佺幆澧冪洃娴嬭澶囨暟鎹�",
+  },
+  {
+    id: 2,
+    name: "瑗块棬鍖哄煙涓存椂宸℃",
+    type: "1",
+    status: "2",
+    planStartTime: "2025-12-30 10:00:00",
+    planEndTime: "2025-12-30 11:00:00",
+    actualStartTime: "2025-12-30 10:00:00",
+    actualEndTime: "2025-12-30 10:45:00",
+    inspector: "鏉庡洓",
+    area: "瑗块棬鍖哄煙",
+    content: "妫�鏌ュ紓甯告姤璀﹁澶�",
+  },
+  {
+    id: 3,
+    name: "鍗楅棬闂ㄧ鏁呴殰宸℃",
+    type: "2",
+    status: "1",
+    planStartTime: "2025-12-30 13:00:00",
+    planEndTime: "2025-12-30 14:00:00",
+    actualStartTime: "2025-12-30 13:10:00",
+    actualEndTime: "",
+    inspector: "鐜嬩簲",
+    area: "鍗楅棬鍖哄煙",
+    content: "淇闂ㄧ鏁呴殰",
+  },
+  {
+    id: 4,
+    name: "涓帶瀹ゅ畾鏈熷贰妫�",
+    type: "0",
+    status: "0",
+    planStartTime: "2025-12-31 09:00:00",
+    planEndTime: "2025-12-31 10:00:00",
+    actualStartTime: "",
+    actualEndTime: "",
+    inspector: "璧靛叚",
+    area: "涓帶鍖哄煙",
+    content: "妫�鏌ョ洃鎺ц澶囥�佹湇鍔″櫒杩愯鐘舵��",
+  },
+  {
+    id: 5,
+    name: "鍖楅棬鍖哄煙鏃ュ父宸℃",
+    type: "0",
+    status: "2",
+    planStartTime: "2025-12-30 15:00:00",
+    planEndTime: "2025-12-30 16:00:00",
+    actualStartTime: "2025-12-30 15:00:00",
+    actualEndTime: "2025-12-30 15:50:00",
+    inspector: "寮犱笁",
+    area: "鍖楅棬鍖哄煙",
+    content: "妫�鏌ヨ溅杈嗚瘑鍒澶囥�侀亾闂歌繍琛岀姸鎬�",
+  },
+];
+
+// 鍝嶅簲寮忔暟鎹�
+const filters = reactive({
+  name: "",
+  status: "",
+  type: "",
+});
+
+const dataList = ref([]);
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const multipleList = ref([]);
+const dialogVisible = ref(false);
+const dialogTitle = ref("鏂板宸℃");
+const formData = reactive({
+  id: "",
+  name: "",
+  type: "0",
+  status: "0",
+  planStartTime: "",
+  planEndTime: "",
+  actualStartTime: "",
+  actualEndTime: "",
+  inspector: "",
+  area: "",
+  content: "",
+});
+
+// 鐘舵�佹槧灏�
+const statusMap = {
+  '0': '<el-tag type="warning">寰呮墽琛�</el-tag>',
+  '1': '<el-tag type="primary">鎵ц涓�</el-tag>',
+  '2': '<el-tag type="success">宸插畬鎴�</el-tag>',
+  '3': '<el-tag type="danger">宸插彇娑�</el-tag>',
+};
+
+// 绫诲瀷鏄犲皠
+const typeMap = {
+  0: "瀹氭湡宸℃",
+  1: "涓存椂宸℃",
+  2: "鏁呴殰宸℃",
+};
+
+// 琛ㄦ牸鍒楅厤缃�
+const columns = [
+  {
+    label: "宸℃鍚嶇О",
+    align: "center",
+    prop: "name",
+  },
+  {
+    label: "宸℃绫诲瀷",
+    align: "center",
+    prop: "type",
+    formatter: (row) => {
+      return typeMap[row.type];
+    },
+  },
+  {
+    label: "宸℃鐘舵��",
+    align: "center",
+    prop: "status",
+    formatter: (row) => {
+      return statusMap[row.status];
+    },
+  },
+  {
+    label: "璁″垝寮�濮嬫椂闂�",
+    align: "center",
+    prop: "planStartTime",
+  },
+  {
+    label: "璁″垝缁撴潫鏃堕棿",
+    align: "center",
+    prop: "planEndTime",
+  },
+  {
+    label: "瀹為檯寮�濮嬫椂闂�",
+    align: "center",
+    prop: "actualStartTime",
+    formatter: (row) => {
+      return row.actualStartTime || "-";
+    },
+  },
+  {
+    label: "瀹為檯缁撴潫鏃堕棿",
+    align: "center",
+    prop: "actualEndTime",
+    formatter: (row) => {
+      return row.actualEndTime || "-";
+    },
+  },
+  {
+    label: "宸℃浜哄憳",
+    align: "center",
+    prop: "inspector",
+  },
+  {
+    label: "宸℃鍖哄煙",
+    align: "center",
+    prop: "area",
+  },
+  {
+    dataType: "action",
+    label: "鎿嶄綔",
+    align: "center",
+    fixed: "right",
+    width: 180,
+    operation: [
+      {
+        name: "缂栬緫",
+        type: "text",
+        clickFun: (row) => {
+          edit(row);
+        },
+      },
+      {
+        name: "寮�濮嬫墽琛�",
+        type: "text",
+        clickFun: (row) => {
+          startInspection(row);
+        },
+        visible: (row) => {
+          return row.status === "0";
+        },
+      },
+      {
+        name: "瀹屾垚宸℃",
+        type: "text",
+        clickFun: (row) => {
+          completeInspection(row);
+        },
+        visible: (row) => {
+          return row.status === "1";
+        },
+      },
+      {
+        name: "鍙栨秷宸℃",
+        type: "text",
+        clickFun: (row) => {
+          cancelInspection(row);
+        },
+        visible: (row) => {
+          return ["0", "1"].includes(row.status);
+        },
+      },
+      {
+        name: "鍒犻櫎",
+        type: "text",
+        clickFun: (row) => {
+          deleteRow(row.id);
+        },
+      },
+    ],
+  },
+];
+
+// 杩囨护鍚庣殑鏁版嵁
+const filteredData = computed(() => {
+  return mockData.filter((item) => {
+    const nameMatch = !filters.name || item.name.includes(filters.name);
+    const statusMatch = !filters.status || item.status === filters.status;
+    const typeMatch = !filters.type || item.type === filters.type;
+    return nameMatch && statusMatch && typeMatch;
+  });
+});
+
+// 鑾峰彇琛ㄦ牸鏁版嵁
+const getTableData = () => {
+  pagination.total = filteredData.value.length;
+  const start = (pagination.currentPage - 1) * pagination.pageSize;
+  const end = start + pagination.pageSize;
+  dataList.value = filteredData.value.slice(start, end);
+};
+
+// 閲嶇疆杩囨护鍣�
+const resetFilters = () => {
+  filters.name = "";
+  filters.status = "";
+  filters.type = "";
+  pagination.currentPage = 1;
+  getTableData();
+};
+
+// 鍒嗛〉鍙樺寲
+const changePage = ({ page, limit }) => {
+  pagination.currentPage = page;
+  pagination.pageSize = limit;
+  getTableData();
+};
+
+// 澶氶�夊鐞�
+const handleSelectionChange = (selectionList) => {
+  multipleList.value = selectionList;
+};
+
+// 鏂板
+const add = () => {
+  dialogTitle.value = "鏂板宸℃";
+  formData.id = "";
+  formData.name = "";
+  formData.type = "0";
+  formData.status = "0";
+  formData.planStartTime = "";
+  formData.planEndTime = "";
+  formData.actualStartTime = "";
+  formData.actualEndTime = "";
+  formData.inspector = "";
+  formData.area = "";
+  formData.content = "";
+  dialogVisible.value = true;
+};
+
+// 缂栬緫
+const edit = (row) => {
+  dialogTitle.value = "缂栬緫宸℃";
+  formData.id = row.id;
+  formData.name = row.name;
+  formData.type = row.type;
+  formData.status = row.status;
+  formData.planStartTime = row.planStartTime;
+  formData.planEndTime = row.planEndTime;
+  formData.actualStartTime = row.actualStartTime;
+  formData.actualEndTime = row.actualEndTime;
+  formData.inspector = row.inspector;
+  formData.area = row.area;
+  formData.content = row.content;
+  dialogVisible.value = true;
+};
+
+// 淇濆瓨鏁版嵁
+const saveData = () => {
+  if (
+    !formData.name ||
+    !formData.planStartTime ||
+    !formData.planEndTime ||
+    !formData.inspector ||
+    !formData.area
+  ) {
+    ElMessage.warning("璇峰～鍐欏繀濉瓧娈�");
+    return;
+  }
+
+  if (formData.id) {
+    // 缂栬緫
+    const index = mockData.findIndex((item) => item.id === formData.id);
+    if (index !== -1) {
+      mockData[index] = {
+        ...mockData[index],
+        ...formData,
+      };
+      ElMessage.success("缂栬緫鎴愬姛");
+    }
+  } else {
+    // 鏂板
+    const newId = Math.max(...mockData.map((item) => item.id), 0) + 1;
+    mockData.unshift({
+      ...formData,
+      id: newId,
+    });
+    ElMessage.success("鏂板鎴愬姛");
+  }
+  dialogVisible.value = false;
+  getTableData();
+};
+
+// 寮�濮嬪贰妫�
+const startInspection = (row) => {
+  const index = mockData.findIndex((item) => item.id === row.id);
+  if (index !== -1) {
+    mockData[index].status = "1";
+    mockData[index].actualStartTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+    ElMessage.success("宸℃宸插紑濮�");
+    getTableData();
+  }
+};
+
+// 瀹屾垚宸℃
+const completeInspection = (row) => {
+  const index = mockData.findIndex((item) => item.id === row.id);
+  if (index !== -1) {
+    mockData[index].status = "2";
+    mockData[index].actualEndTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
+    ElMessage.success("宸℃宸插畬鎴�");
+    getTableData();
+  }
+};
+
+// 鍙栨秷宸℃
+const cancelInspection = (row) => {
+  ElMessageBox.confirm("纭畾瑕佸彇娑堣宸℃鍚�?", "鎻愮ず", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+    .then(() => {
+      const index = mockData.findIndex((item) => item.id === row.id);
+      if (index !== -1) {
+        mockData[index].status = "3";
+        ElMessage.success("宸℃宸插彇娑�");
+        getTableData();
+      }
+    })
+    .catch(() => {});
+};
+
+// 鍒犻櫎
+const deleteRow = (id) => {
+  ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ュ贰妫�璁板綍, 鏄惁缁х画?", "鎻愮ず", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+    .then(() => {
+      const index = mockData.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        mockData.splice(index, 1);
+        ElMessage.success("鍒犻櫎鎴愬姛");
+        getTableData();
+      }
+    })
+    .catch(() => {});
+};
+
+// 鎵归噺鍒犻櫎
+const batchDelete = () => {
+  if (multipleList.value.length === 0) {
+    ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
+    return;
+  }
+
+  ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎鎵�閫夊贰妫�璁板綍, 鏄惁缁х画?", "鎻愮ず", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+    .then(() => {
+      const ids = multipleList.value.map((item) => item.id);
+      mockData.forEach((item, index) => {
+        if (ids.includes(item.id)) {
+          mockData.splice(index, 1);
+        }
+      });
+      ElMessage.success("鍒犻櫎鎴愬姛");
+      getTableData();
+      multipleList.value = [];
+    })
+    .catch(() => {});
+};
+
+// 鍒濆鍖栨暟鎹�
+onMounted(() => {
+  getTableData();
+});
 </script>
-<style>
 
+<style lang="scss" scoped>
+.table_list {
+  margin-top: unset;
+}
+.actions {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
 </style>
diff --git a/src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue b/src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue
index 40dc0c9..bdd0a7b 100644
--- a/src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue
+++ b/src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue
@@ -1,9 +1,633 @@
 <template>
-  <div></div>
+  <div class="app-container">
+    <el-form :model="filters" :inline="true">
+      <el-form-item label="璁惧鍚嶇О">
+        <el-input
+          v-model="filters.name"
+          style="width: 240px"
+          placeholder="璇疯緭鍏ヨ澶囧悕绉�"
+          clearable
+          :prefix-icon="Search"
+          @change="getTableData"
+        />
+      </el-form-item>
+      <el-form-item label="璁惧鐘舵��">
+        <el-select
+          v-model="filters.status"
+          style="width: 240px"
+          placeholder="璇烽�夋嫨璁惧鐘舵��"
+          clearable
+          @change="getTableData"
+        >
+          <el-option label="鍦ㄧ嚎" value="1"></el-option>
+          <el-option label="绂荤嚎" value="0"></el-option>
+          <el-option label="鏁呴殰" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="璁惧绫诲瀷">
+        <el-select
+          v-model="filters.type"
+          style="width: 240px"
+          placeholder="璇烽�夋嫨璁惧绫诲瀷"
+          clearable
+          @change="getTableData"
+        >
+          <el-option label="闂ㄧ璁惧" value="0"></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>
+        <el-button type="primary" @click="getTableData">鎼滅储</el-button>
+        <el-button @click="resetFilters">閲嶇疆</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div class="monitor-container">
+      <div class="monitor-stats">
+        <div class="stat-card">
+          <div class="stat-title">鍦ㄧ嚎璁惧</div>
+          <div class="stat-value online">{{ onlineCount }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-title">绂荤嚎璁惧</div>
+          <div class="stat-value offline">{{ offlineCount }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-title">鏁呴殰璁惧</div>
+          <div class="stat-value error">{{ errorCount }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-title">璁惧鎬绘暟</div>
+          <div class="stat-value total">{{ totalCount }}</div>
+        </div>
+      </div>
+
+      <div class="table_list">
+        <PIMTable
+          rowKey="id"
+          :column="columns"
+          :tableData="dataList"
+          :page="{
+            current: pagination.currentPage,
+            size: pagination.pageSize,
+            total: pagination.total,
+          }"
+          @pagination="changePage"
+        >
+        </PIMTable>
+      </div>
+    </div>
+
+    <!-- 璁惧璇︽儏寮圭獥 -->
+    <el-dialog
+      v-model="detailVisible"
+      :title="`璁惧璇︽儏 - ${selectedDevice.name}`"
+      width="800px"
+    >
+      <div v-if="selectedDevice" class="device-detail">
+        <div class="detail-section">
+          <h3>鍩烘湰淇℃伅</h3>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="璁惧鍚嶇О">{{
+              selectedDevice.name
+            }}</el-descriptions-item>
+            <el-descriptions-item label="璁惧绫诲瀷">{{
+              typeMap[selectedDevice.type]
+            }}</el-descriptions-item>
+            <el-descriptions-item label="璁惧鐘舵��">{{
+              statusMap[selectedDevice.status]
+            }}</el-descriptions-item>
+            <el-descriptions-item label="璁惧缂栧彿">{{
+              selectedDevice.code
+            }}</el-descriptions-item>
+            <el-descriptions-item label="瀹夎浣嶇疆">{{
+              selectedDevice.location
+            }}</el-descriptions-item>
+            <el-descriptions-item label="瀹夎鏃堕棿">{{
+              selectedDevice.installTime
+            }}</el-descriptions-item>
+            <el-descriptions-item label="鏈�鍚庣淮鎶ゆ椂闂�">{{
+              selectedDevice.maintainTime
+            }}</el-descriptions-item>
+            <el-descriptions-item label="璐ｄ换浜�">{{
+              selectedDevice.responsiblePerson
+            }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+
+        <div class="detail-section">
+          <h3>瀹炴椂鏁版嵁</h3>
+          <div class="realtime-data">
+            <div
+              v-for="data in selectedDevice.realtimeData"
+              :key="data.name"
+              class="data-item"
+            >
+              <div class="data-name">{{ data.name }}</div>
+              <div class="data-value">{{ data.value }}{{ data.unit }}</div>
+              <div class="data-status" :class="data.status">
+                {{ data.status === "normal" ? "姝ｅ父" : "寮傚父" }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <h3>鎺у埗鎿嶄綔</h3>
+          <div class="control-buttons">
+            <el-button
+              type="primary"
+              @click="controlDevice('restart')"
+              :disabled="selectedDevice.status !== '1'"
+              >閲嶅惎璁惧</el-button
+            >
+            <el-button
+              type="warning"
+              @click="controlDevice('reset')"
+              :disabled="selectedDevice.status !== '1'"
+              >閲嶇疆璁惧</el-button
+            >
+            <el-button
+              type="danger"
+              @click="controlDevice('shutdown')"
+              :disabled="selectedDevice.status !== '1'"
+              >鍏抽棴璁惧</el-button
+            >
+            <el-button
+              type="success"
+              @click="controlDevice('update')"
+              :disabled="selectedDevice.status !== '1'"
+              >鍥轰欢鏇存柊</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="detailVisible = false">鍏抽棴</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
-<script>
 
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import {
+  Search
+} from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+// 瀹氫箟鍋囨暟鎹�
+const mockDevices = [
+  {
+    id: 1,
+    name: "涓滈棬闂ㄧ鎺у埗鍣�",
+    code: "DEV-20250001",
+    type: "0",
+    status: "1",
+    location: "涓滈棬鍏ュ彛",
+    installTime: "2025-01-15",
+    maintainTime: "2025-12-20",
+    responsiblePerson: "寮犱笁",
+    realtimeData: [
+      { name: "娓╁害", value: 23.5, unit: "鈩�", status: "normal" },
+      { name: "婀垮害", value: 45, unit: "%", status: "normal" },
+      { name: "杩愯鏃堕暱", value: 12560, unit: "h", status: "normal" },
+      { name: "闂ㄧ寮�鍏虫鏁�", value: 234, unit: "娆�/澶�", status: "normal" },
+    ],
+  },
+  {
+    id: 2,
+    name: "瑗块棬瑙嗛鐩戞帶",
+    code: "DEV-20250002",
+    type: "2",
+    status: "1",
+    location: "瑗块棬鍑哄彛",
+    installTime: "2025-02-20",
+    maintainTime: "2025-11-15",
+    responsiblePerson: "鏉庡洓",
+    realtimeData: [
+      { name: "瑙嗛娓呮櫚搴�", value: 1080, unit: "P", status: "normal" },
+      { name: "甯х巼", value: 25, unit: "fps", status: "normal" },
+      { name: "瀛樺偍绌洪棿", value: 78, unit: "%", status: "warning" },
+      { name: "缃戠粶寤惰繜", value: 12, unit: "ms", status: "normal" },
+    ],
+  },
+  {
+    id: 3,
+    name: "鍗楅棬鐜鐩戞祴浠�",
+    code: "DEV-20250003",
+    type: "1",
+    status: "2",
+    location: "鍗楅棬骞垮満",
+    installTime: "2025-03-10",
+    maintainTime: "2025-10-05",
+    responsiblePerson: "鐜嬩簲",
+    realtimeData: [
+      { name: "PM2.5", value: 85, unit: "渭g/m鲁", status: "error" },
+      { name: "PM10", value: 120, unit: "渭g/m鲁", status: "error" },
+      { name: "鍣０", value: 65, unit: "dB", status: "normal" },
+      { name: "椋庨��", value: 1.2, unit: "m/s", status: "normal" },
+    ],
+  },
+  {
+    id: 4,
+    name: "鍖楅棬鏅鸿兘閬撻椄",
+    code: "DEV-20250004",
+    type: "3",
+    status: "0",
+    location: "鍖楅棬鍏ュ彛",
+    installTime: "2025-04-05",
+    maintainTime: "2025-09-20",
+    responsiblePerson: "璧靛叚",
+    realtimeData: [
+      { name: "寮�鍏虫鏁�", value: 156, unit: "娆�/澶�", status: "normal" },
+      { name: "杩愯鐢靛帇", value: 220, unit: "V", status: "normal" },
+      { name: "杩愯鐢垫祦", value: 5.2, unit: "A", status: "normal" },
+      { name: "鏁呴殰浠ｇ爜", value: "E001", unit: "", status: "error" },
+    ],
+  },
+  {
+    id: 5,
+    name: "涓帶瀹ゆ湇鍔″櫒",
+    code: "DEV-20250005",
+    type: "1",
+    status: "1",
+    location: "涓帶瀹�",
+    installTime: "2025-05-15",
+    maintainTime: "2025-12-01",
+    responsiblePerson: "瀛欎竷",
+    realtimeData: [
+      { name: "CPU浣跨敤鐜�", value: 45, unit: "%", status: "normal" },
+      { name: "鍐呭瓨浣跨敤鐜�", value: 68, unit: "%", status: "warning" },
+      { name: "纾佺洏浣跨敤鐜�", value: 82, unit: "%", status: "warning" },
+      { name: "缃戠粶娴侀噺", value: 125, unit: "Mbps", status: "normal" },
+    ],
+  },
+];
+
+// 鍝嶅簲寮忔暟鎹�
+const filters = reactive({
+  name: "",
+  status: "",
+  type: "",
+});
+
+const dataList = ref([]);
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const detailVisible = ref(false);
+const selectedDevice = ref({});
+
+// 鐘舵�佹槧灏�
+const statusMap = {
+  0: '<el-tag type="warning">绂荤嚎</el-tag>',
+  1: '<el-tag type="success">鍦ㄧ嚎</el-tag>',
+  2: '<el-tag type="danger">鏁呴殰</el-tag>',
+};
+
+// 绫诲瀷鏄犲皠
+const typeMap = {
+  0: "闂ㄧ璁惧",
+  1: "鐜鐩戞祴璁惧",
+  2: "瑙嗛鐩戞帶璁惧",
+  3: "鏅鸿兘閬撻椄",
+};
+
+// 璁惧鏁伴噺缁熻
+const onlineCount = computed(() => {
+  return mockDevices.filter((device) => device.status === "1").length;
+});
+
+const offlineCount = computed(() => {
+  return mockDevices.filter((device) => device.status === "0").length;
+});
+
+const errorCount = computed(() => {
+  return mockDevices.filter((device) => device.status === "2").length;
+});
+
+const totalCount = computed(() => {
+  return mockDevices.length;
+});
+
+// 琛ㄦ牸鍒楅厤缃�
+const columns = [
+  {
+    label: "璁惧鍚嶇О",
+    align: "center",
+    prop: "name",
+  },
+  {
+    label: "璁惧缂栧彿",
+    align: "center",
+    prop: "code",
+  },
+  {
+    label: "璁惧绫诲瀷",
+    align: "center",
+    prop: "type",
+    formatter: (row) => {
+      return typeMap[row.type];
+    },
+  },
+  {
+    label: "璁惧鐘舵��",
+    align: "center",
+    prop: "status",
+    formatter: (row) => {
+      return statusMap[row.status];
+    },
+  },
+  {
+    label: "瀹夎浣嶇疆",
+    align: "center",
+    prop: "location",
+  },
+  {
+    label: "璐ｄ换浜�",
+    align: "center",
+    prop: "responsiblePerson",
+  },
+  {
+    label: "鏈�鍚庣淮鎶ゆ椂闂�",
+    align: "center",
+    prop: "maintainTime",
+  },
+  {
+    dataType: "action",
+    label: "鎿嶄綔",
+    align: "center",
+    fixed: "right",
+    width: 140,
+    operation: [
+      {
+        name: "鏌ョ湅璇︽儏",
+        type: "text",
+        clickFun: (row) => {
+          viewDetail(row);
+        },
+      },
+      {
+        name: "瀹炴椂鐩戞帶",
+        type: "text",
+        clickFun: (row) => {
+          realtimeMonitor(row);
+        },
+        visible: (row) => {
+          return row.status === "1";
+        },
+      },
+      {
+        name: "閲嶅惎璁惧",
+        type: "text",
+        clickFun: (row) => {
+          controlDevice("restart", row);
+        },
+        visible: (row) => {
+          return row.status === "1";
+        },
+      },
+    ],
+  },
+];
+
+// 杩囨护鍚庣殑鏁版嵁
+const filteredData = computed(() => {
+  return mockDevices.filter((item) => {
+    const nameMatch = !filters.name || item.name.includes(filters.name);
+    const statusMatch = !filters.status || item.status === filters.status;
+    const typeMatch = !filters.type || item.type === filters.type;
+    return nameMatch && statusMatch && typeMatch;
+  });
+});
+
+// 鑾峰彇琛ㄦ牸鏁版嵁
+const getTableData = () => {
+  pagination.total = filteredData.value.length;
+  const start = (pagination.currentPage - 1) * pagination.pageSize;
+  const end = start + pagination.pageSize;
+  dataList.value = filteredData.value.slice(start, end);
+};
+
+// 閲嶇疆杩囨护鍣�
+const resetFilters = () => {
+  filters.name = "";
+  filters.status = "";
+  filters.type = "";
+  pagination.currentPage = 1;
+  getTableData();
+};
+
+// 鍒嗛〉鍙樺寲
+const changePage = ({ page, limit }) => {
+  pagination.currentPage = page;
+  pagination.pageSize = limit;
+  getTableData();
+};
+
+// 鏌ョ湅璁惧璇︽儏
+const viewDetail = (row) => {
+  selectedDevice.value = row;
+  detailVisible.value = true;
+};
+
+// 瀹炴椂鐩戞帶
+const realtimeMonitor = (row) => {
+  ElMessage.info(`姝ｅ湪璺宠浆鍒�${row.name}鐨勫疄鏃剁洃鎺ч〉闈�...`);
+  // 杩欓噷鍙互璺宠浆鍒板疄鏃剁洃鎺ч〉闈㈡垨鎵撳紑鐩戞帶绐楀彛
+};
+
+// 璁惧鎺у埗
+const controlDevice = (action, row = selectedDevice.value) => {
+  const actionMap = {
+    restart: "閲嶅惎",
+    reset: "閲嶇疆",
+    shutdown: "鍏抽棴",
+    update: "鍥轰欢鏇存柊",
+  };
+
+  ElMessageBox.confirm(
+    `纭畾瑕佸璁惧 ${row.name} 鎵ц${actionMap[action]}鎿嶄綔鍚�?`,
+    "鎻愮ず",
+    {
+      confirmButtonText: "纭畾",
+      cancelButtonText: "鍙栨秷",
+      type: "warning",
+    }
+  )
+    .then(() => {
+      ElMessage.success(`璁惧${actionMap[action]}鎿嶄綔宸插彂閫乣);
+      // 妯℃嫙璁惧鍝嶅簲
+      setTimeout(() => {
+        ElMessage.success(`璁惧${actionMap[action]}鎿嶄綔鎵ц鎴愬姛`);
+      }, 1000);
+    })
+    .catch(() => {});
+};
+
+// 瀹氭椂鏇存柊璁惧鐘舵�侊紙妯℃嫙瀹炴椂鍙樺寲锛�
+const updateDeviceStatus = () => {
+  // 闅忔満鏇存柊涓�浜涜澶囩殑鐘舵�佸拰瀹炴椂鏁版嵁
+  mockDevices.forEach((device) => {
+    if (Math.random() > 0.8) {
+      // 80%姒傜巼涓嶆洿鏂�
+      return;
+    }
+
+    // 闅忔満鏇存柊鐘舵��
+    const statuses = ["0", "1", "2"];
+    device.status = statuses[Math.floor(Math.random() * statuses.length)];
+
+    // 鏇存柊瀹炴椂鏁版嵁
+    device.realtimeData.forEach((data) => {
+      if (data.name === "娓╁害") {
+        data.value = (20 + Math.random() * 10).toFixed(1);
+        data.status = data.value > 30 ? "error" : "normal";
+      } else if (data.name === "婀垮害") {
+        data.value = Math.floor(30 + Math.random() * 50);
+        data.status = data.value > 80 ? "error" : "normal";
+      } else if (data.name === "CPU浣跨敤鐜�") {
+        data.value = Math.floor(20 + Math.random() * 60);
+        data.status =
+          data.value > 80 ? "error" : data.value > 60 ? "warning" : "normal";
+      }
+    });
+  });
+
+  // 鍒锋柊琛ㄦ牸鏁版嵁
+  getTableData();
+};
+
+// 鍒濆鍖栨暟鎹�
+onMounted(() => {
+  getTableData();
+  // 姣�5绉掓洿鏂颁竴娆¤澶囩姸鎬�
+  const interval = setInterval(updateDeviceStatus, 5000);
+
+  // 娓呯悊瀹氭椂鍣�
+  return () => clearInterval(interval);
+});
 </script>
-<style>
 
+<style lang="scss" scoped>
+.table_list {
+  margin-top: unset;
+}
+
+.monitor-container {
+  .monitor-stats {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+
+    .stat-card {
+      flex: 1;
+      background: #fff;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      text-align: center;
+
+      .stat-title {
+        font-size: 14px;
+        color: #606266;
+        margin-bottom: 10px;
+      }
+
+      .stat-value {
+        font-size: 32px;
+        font-weight: bold;
+
+        &.online {
+          color: #67c23a;
+        }
+
+        &.offline {
+          color: #e6a23c;
+        }
+
+        &.error {
+          color: #f56c6c;
+        }
+
+        &.total {
+          color: #409eff;
+        }
+      }
+    }
+  }
+}
+
+.device-detail {
+  .detail-section {
+    margin-bottom: 20px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: #303133;
+    }
+  }
+
+  .realtime-data {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+
+    .data-item {
+      background: #f5f7fa;
+      padding: 15px;
+      border-radius: 8px;
+
+      .data-name {
+        font-size: 14px;
+        color: #606266;
+        margin-bottom: 5px;
+      }
+
+      .data-value {
+        font-size: 24px;
+        font-weight: bold;
+        color: #303133;
+        margin-bottom: 5px;
+      }
+
+      .data-status {
+        font-size: 12px;
+        padding: 2px 8px;
+        border-radius: 10px;
+
+        &.normal {
+          background: #f0f9eb;
+          color: #67c23a;
+        }
+
+        &.warning {
+          background: #fdf6ec;
+          color: #e6a23c;
+        }
+
+        &.error {
+          background: #fef0f0;
+          color: #f56c6c;
+        }
+      }
+    }
+  }
+
+  .control-buttons {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+  }
+}
 </style>
diff --git a/src/views/environmentAccess/vehicleInformationCollection/index.vue b/src/views/environmentAccess/vehicleInformationCollection/index.vue
index 40dc0c9..5669bfa 100644
--- a/src/views/environmentAccess/vehicleInformationCollection/index.vue
+++ b/src/views/environmentAccess/vehicleInformationCollection/index.vue
@@ -1,9 +1,577 @@
 <template>
-  <div></div>
+  <div class="app-container">
+    <el-form :model="filters" :inline="true">
+      <el-form-item label="杞︾墝鍙风爜">
+        <el-input
+          v-model="filters.plateNumber"
+          style="width: 240px"
+          placeholder="璇疯緭鍏ヨ溅鐗屽彿鐮�"
+          clearable
+          :prefix-icon="Search"
+          @change="getTableData"
+        />
+      </el-form-item>
+      <el-form-item label="杞﹁締绫诲瀷">
+        <el-select
+          v-model="filters.vehicleType"
+          style="width: 240px"
+          placeholder="璇烽�夋嫨杞﹁締绫诲瀷"
+          clearable
+          @change="getTableData"
+        >
+          <el-option label="灏忓瀷杞�" value="0"></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="filters.direction"
+          style="width: 240px"
+          placeholder="璇烽�夋嫨杩涘嚭鏂瑰悜"
+          clearable
+          @change="getTableData"
+        >
+          <el-option label="杩�" value="0"></el-option>
+          <el-option label="鍑�" value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="杩涘嚭鏃堕棿">
+        <el-date-picker
+          v-model="filters.timeRange"
+          type="daterange"
+          start-placeholder="寮�濮嬫椂闂�"
+          end-placeholder="缁撴潫鏃堕棿"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          format="YYYY-MM-DD HH:mm"
+          clearable
+          @change="changeTimeRange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getTableData">鎼滅储</el-button>
+        <el-button @click="resetFilters">閲嶇疆</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div class="vehicle-stats">
+      <div class="stat-card">
+        <div class="stat-title">浠婃棩杩涜溅鏁�</div>
+        <div class="stat-value in">{{ todayInCount }}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-title">浠婃棩鍑鸿溅鏁�</div>
+        <div class="stat-value out">{{ todayOutCount }}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-title">褰撳墠鍦ㄥ満杞﹁締</div>
+        <div class="stat-value present">{{ presentCount }}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-title">浠婃棩鎬绘祦閲�</div>
+        <div class="stat-value total">{{ todayTotalCount }}</div>
+      </div>
+    </div>
+
+    <div class="table_list">
+      <PIMTable
+        rowKey="id"
+        :column="columns"
+        :tableData="dataList"
+        :page="{
+          current: pagination.currentPage,
+          size: pagination.pageSize,
+          total: pagination.total,
+        }"
+        @pagination="changePage"
+      >
+      </PIMTable>
+    </div>
+
+    <!-- 杞﹁締璇︽儏寮圭獥 -->
+    <el-dialog
+      v-model="detailVisible"
+      :title="`杞﹁締璇︽儏 - ${selectedVehicle.plateNumber}`"
+      width="700px"
+    >
+      <div v-if="selectedVehicle" class="vehicle-detail">
+        <div class="detail-section">
+          <h3>鍩烘湰淇℃伅</h3>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="杞︾墝鍙风爜">{{
+              selectedVehicle.plateNumber
+            }}</el-descriptions-item>
+            <el-descriptions-item label="杞﹁締绫诲瀷">{{
+              typeMap[selectedVehicle.vehicleType]
+            }}</el-descriptions-item>
+            <el-descriptions-item label="杞﹁締棰滆壊">{{
+              selectedVehicle.color
+            }}</el-descriptions-item>
+            <el-descriptions-item label="杩涘嚭鏂瑰悜">{{
+              selectedVehicle.direction === "0" ? "杩�" : "鍑�"
+            }}</el-descriptions-item>
+            <el-descriptions-item label="杩涘嚭鏃堕棿">{{
+              selectedVehicle.timestamp
+            }}</el-descriptions-item>
+            <el-descriptions-item label="閫氶亾鍚嶇О">{{
+              selectedVehicle.channelName
+            }}</el-descriptions-item>
+            <el-descriptions-item label="璇嗗埆鏂瑰紡">{{
+              selectedVehicle.identifyMethod
+            }}</el-descriptions-item>
+            <el-descriptions-item label="杞﹁締鐘舵��">{{
+              statusMap[selectedVehicle.status]
+            }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+
+        <div class="detail-section">
+          <h3>杞﹁締鍥剧墖</h3>
+          <div class="vehicle-images">
+            <div class="image-item">
+              <div class="image-title">姝ｉ潰鍥剧墖</div>
+              <el-image
+                :src="selectedVehicle.frontImage"
+                fit="cover"
+                style="width: 100%; height: 200px"
+                :preview-src-list="[
+                  selectedVehicle.frontImage,
+                  selectedVehicle.sideImage,
+                ]"
+              ></el-image>
+            </div>
+            <div class="image-item">
+              <div class="image-title">渚ч潰鍥剧墖</div>
+              <el-image
+                :src="selectedVehicle.sideImage"
+                fit="cover"
+                style="width: 100%; height: 200px"
+                :preview-src-list="[
+                  selectedVehicle.sideImage,
+                  selectedVehicle.frontImage,
+                ]"
+              ></el-image>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="detailVisible = false">鍏抽棴</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
-<script>
 
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import dayjs from "dayjs";
+
+// 瀹氫箟鍋囨暟鎹�
+const mockVehicles = [
+  {
+    id: 1,
+    plateNumber: "浜珹12345",
+    vehicleType: "0",
+    color: "鐧借壊",
+    direction: "0",
+    timestamp: "2025-12-31 08:15:30",
+    channelName: "涓滈棬閫氶亾",
+    identifyMethod: "杞︾墝璇嗗埆",
+    status: "0",
+    frontImage: "https://picsum.photos/id/1024/800/600",
+    sideImage: "https://picsum.photos/id/1025/800/600",
+    duration: "00:00:00",
+    present: true,
+  },
+  {
+    id: 2,
+    plateNumber: "娌狟67890",
+    vehicleType: "1",
+    color: "榛戣壊",
+    direction: "1",
+    timestamp: "2025-12-31 08:10:20",
+    channelName: "瑗块棬閫氶亾",
+    identifyMethod: "杞︾墝璇嗗埆",
+    status: "1",
+    frontImage: "https://picsum.photos/id/1026/800/600",
+    sideImage: "https://picsum.photos/id/1027/800/600",
+    duration: "01:25:30",
+    present: false,
+  },
+  {
+    id: 3,
+    plateNumber: "绮54321",
+    vehicleType: "0",
+    color: "绾㈣壊",
+    direction: "0",
+    timestamp: "2025-12-31 08:05:15",
+    channelName: "鍗楅棬閫氶亾",
+    identifyMethod: "IC鍗¤瘑鍒�",
+    status: "0",
+    frontImage: "https://picsum.photos/id/1028/800/600",
+    sideImage: "https://picsum.photos/id/1029/800/600",
+    duration: "00:05:45",
+    present: true,
+  },
+  {
+    id: 4,
+    plateNumber: "宸滵98765",
+    vehicleType: "2",
+    color: "钃濊壊",
+    direction: "0",
+    timestamp: "2025-12-31 08:00:00",
+    channelName: "鍖楅棬閫氶亾",
+    identifyMethod: "杞︾墝璇嗗埆",
+    status: "0",
+    frontImage: "https://picsum.photos/id/1030/800/600",
+    sideImage: "https://picsum.photos/id/1031/800/600",
+    duration: "00:10:30",
+    present: true,
+  },
+  {
+    id: 5,
+    plateNumber: "鑻廍13579",
+    vehicleType: "0",
+    color: "閾惰壊",
+    direction: "1",
+    timestamp: "2025-12-31 07:55:45",
+    channelName: "涓滈棬閫氶亾",
+    identifyMethod: "杞︾墝璇嗗埆",
+    status: "1",
+    frontImage: "https://picsum.photos/id/1032/800/600",
+    sideImage: "https://picsum.photos/id/1033/800/600",
+    duration: "02:30:15",
+    present: false,
+  },
+  {
+    id: 6,
+    plateNumber: "娴橣24680",
+    vehicleType: "3",
+    color: "榛勮壊",
+    direction: "0",
+    timestamp: "2025-12-31 07:50:30",
+    channelName: "鍗楅棬閫氶亾",
+    identifyMethod: "浜哄伐鐧昏",
+    status: "0",
+    frontImage: "https://picsum.photos/id/1034/800/600",
+    sideImage: "https://picsum.photos/id/1035/800/600",
+    duration: "00:15:30",
+    present: true,
+  },
+  {
+    id: 7,
+    plateNumber: "椴丟97531",
+    vehicleType: "1",
+    color: "缁胯壊",
+    direction: "1",
+    timestamp: "2025-12-31 07:45:15",
+    channelName: "瑗块棬閫氶亾",
+    identifyMethod: "杞︾墝璇嗗埆",
+    status: "1",
+    frontImage: "https://picsum.photos/id/1036/800/600",
+    sideImage: "https://picsum.photos/id/1037/800/600",
+    duration: "01:45:30",
+    present: false,
+  },
+  {
+    id: 8,
+    plateNumber: "璞獺86420",
+    vehicleType: "0",
+    color: "鐏拌壊",
+    direction: "0",
+    timestamp: "2025-12-31 07:40:00",
+    channelName: "鍖楅棬閫氶亾",
+    identifyMethod: "IC鍗¤瘑鍒�",
+    status: "0",
+    frontImage: "https://picsum.photos/id/1038/800/600",
+    sideImage: "https://picsum.photos/id/1039/800/600",
+    duration: "00:20:15",
+    present: true,
+  },
+];
+
+// 鍝嶅簲寮忔暟鎹�
+const filters = reactive({
+  plateNumber: "",
+  vehicleType: "",
+  direction: "",
+  timeRange: [],
+});
+
+const dataList = ref([]);
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const detailVisible = ref(false);
+const selectedVehicle = ref({});
+
+// 鏃堕棿鑼冨洿
+const timeRange = reactive({
+  startTime: "",
+  endTime: "",
+});
+
+// 鐘舵�佹槧灏�
+const statusMap = {
+  '0': '<el-tag type="success">姝ｅ父</el-tag>',
+  '1': '<el-tag type="info">宸茬寮�</el-tag>',
+  '2': '<el-tag type="warning">寮傚父</el-tag>',
+};
+
+// 绫诲瀷鏄犲皠
+const typeMap = {
+  0: "灏忓瀷杞�",
+  1: "涓瀷杞�",
+  2: "澶у瀷杞�",
+  3: "鐗圭杞�",
+};
+
+// 缁熻鏁版嵁
+const todayInCount = computed(() => {
+  const today = dayjs().format("YYYY-MM-DD");
+  return mockVehicles.filter((vehicle) => {
+    return vehicle.direction === "0" && vehicle.timestamp.startsWith(today);
+  }).length;
+});
+
+const todayOutCount = computed(() => {
+  const today = dayjs().format("YYYY-MM-DD");
+  return mockVehicles.filter((vehicle) => {
+    return vehicle.direction === "1" && vehicle.timestamp.startsWith(today);
+  }).length;
+});
+
+const presentCount = computed(() => {
+  return mockVehicles.filter((vehicle) => vehicle.present).length;
+});
+
+const todayTotalCount = computed(() => {
+  const today = dayjs().format("YYYY-MM-DD");
+  return mockVehicles.filter((vehicle) => {
+    return vehicle.timestamp.startsWith(today);
+  }).length;
+});
+
+// 琛ㄦ牸鍒楅厤缃�
+const columns = [
+  {
+    label: "杞︾墝鍙风爜",
+    align: "center",
+    prop: "plateNumber",
+  },
+  {
+    label: "杞﹁締绫诲瀷",
+    align: "center",
+    prop: "vehicleType",
+    formatter: (row) => {
+      return typeMap[row.vehicleType];
+    },
+  },
+  {
+    label: "杞﹁締棰滆壊",
+    align: "center",
+    prop: "color",
+  },
+  {
+    label: "杩涘嚭鏂瑰悜",
+    align: "center",
+    prop: "direction",
+    formatter: (row) => {
+      return row.direction === "0" ? '<el-tag type="success">杩�</el-tag>' : '<el-tag type="info">鍑�</el-tag>';
+    },
+  },
+  {
+    label: "杩涘嚭鏃堕棿",
+    align: "center",
+    prop: "timestamp",
+  },
+  {
+    label: "閫氶亾鍚嶇О",
+    align: "center",
+    prop: "channelName",
+  },
+  {
+    label: "璇嗗埆鏂瑰紡",
+    align: "center",
+    prop: "identifyMethod",
+  },
+  {
+    label: "杞﹁締鐘舵��",
+    align: "center",
+    prop: "status",
+    formatter: (row) => {
+      return statusMap[row.status];
+    },
+  },
+  {
+    dataType: "action",
+    label: "鎿嶄綔",
+    align: "center",
+    fixed: "right",
+    width: 140,
+    operation: [
+      {
+        name: "鏌ョ湅璇︽儏",
+        type: "text",
+        clickFun: (row) => {
+          viewDetail(row);
+        },
+      },
+    ],
+  },
+];
+
+// 杩囨护鍚庣殑鏁版嵁
+const filteredData = computed(() => {
+  return mockVehicles.filter((item) => {
+    const plateMatch =
+      !filters.plateNumber || item.plateNumber.includes(filters.plateNumber);
+    const typeMatch =
+      !filters.vehicleType || item.vehicleType === filters.vehicleType;
+    const directionMatch =
+      !filters.direction || item.direction === filters.direction;
+    const timeMatch =
+      !timeRange.startTime ||
+      (item.timestamp >= timeRange.startTime &&
+        item.timestamp <= timeRange.endTime);
+    return plateMatch && typeMatch && directionMatch && timeMatch;
+  });
+});
+
+// 鑾峰彇琛ㄦ牸鏁版嵁
+const getTableData = () => {
+  pagination.total = filteredData.value.length;
+  const start = (pagination.currentPage - 1) * pagination.pageSize;
+  const end = start + pagination.pageSize;
+  dataList.value = filteredData.value.slice(start, end);
+};
+
+// 閲嶇疆杩囨护鍣�
+const resetFilters = () => {
+  filters.plateNumber = "";
+  filters.vehicleType = "";
+  filters.direction = "";
+  filters.timeRange = [];
+  timeRange.startTime = "";
+  timeRange.endTime = "";
+  pagination.currentPage = 1;
+  getTableData();
+};
+
+// 鍒嗛〉鍙樺寲
+const changePage = ({ page, limit }) => {
+  pagination.currentPage = page;
+  pagination.pageSize = limit;
+  getTableData();
+};
+
+// 鏃堕棿鑼冨洿鍙樺寲
+const changeTimeRange = (value) => {
+  if (value && value.length === 2) {
+    timeRange.startTime = value[0];
+    timeRange.endTime = value[1];
+  } else {
+    timeRange.startTime = "";
+    timeRange.endTime = "";
+  }
+  getTableData();
+};
+
+// 鏌ョ湅杞﹁締璇︽儏
+const viewDetail = (row) => {
+  selectedVehicle.value = row;
+  detailVisible.value = true;
+};
+
+// 鍒濆鍖栨暟鎹�
+onMounted(() => {
+  getTableData();
+});
 </script>
-<style>
 
+<style lang="scss" scoped>
+.table_list {
+  margin-top: unset;
+}
+
+.vehicle-stats {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+
+  .stat-card {
+    flex: 1;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    text-align: center;
+
+    .stat-title {
+      font-size: 14px;
+      color: #606266;
+      margin-bottom: 10px;
+    }
+
+    .stat-value {
+      font-size: 32px;
+      font-weight: bold;
+
+      &.in {
+        color: #67c23a;
+      }
+
+      &.out {
+        color: #409eff;
+      }
+
+      &.present {
+        color: #e6a23c;
+      }
+
+      &.total {
+        color: #909399;
+      }
+    }
+  }
+}
+
+.vehicle-detail {
+  .detail-section {
+    margin-bottom: 20px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: #303133;
+    }
+  }
+
+  .vehicle-images {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+
+    .image-item {
+      background: #f5f7fa;
+      padding: 15px;
+      border-radius: 8px;
+
+      .image-title {
+        font-size: 14px;
+        color: #606266;
+        margin-bottom: 10px;
+        text-align: center;
+      }
+    }
+  }
+}
 </style>
diff --git a/vite.config.js b/vite.config.js
index f7cae21..424d94e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,7 +8,7 @@
   const { VITE_APP_ENV } = env;
   const baseUrl =
     VITE_APP_ENV == "development"
-      ? "http://192.168.1.147:7003" // 寮�鍙戠幆澧冨悗绔帴鍙�
+      ? "http://10.136.12.71:7003" // 寮�鍙戠幆澧冨悗绔帴鍙�
       : "http://10.136.12.71:7003"; // 鐢熶骇鐜鍚庣鎺ュ彛
 
   return {

--
Gitblit v1.9.3