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/vehicleInformationCollection/index.vue | 574 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 571 insertions(+), 3 deletions(-)
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>
--
Gitblit v1.9.3