车辆统计

web/src/view/dashboard/index.vue

@@ -13,17 +13,17 @@
         >
       </div>
     </div>
-    
+
     <div class="gva-card-box">
       <div class="gva-card">
-        <div class="gva-card-title">数据统计</div>
+        <div class="gva-card-title">车辆统计</div>
         <div class="p-4">
           <el-row :gutter="20">
             <el-col
               :xs="24"
               :sm="18"
             >
-              <echarts-line />
+              <chart/>
             </el-col>
             <el-col
               :xs="24"
@@ -45,6 +45,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useWeatherInfo } from '@/view/dashboard/weather.js'
 import SelectImage from '@/components/selectImage/selectImage.vue'
+import chart from '@/view/vehicle/component/chart.vue'
 
 defineOptions({
   name: 'Dashboard'

web/src/view/vehicle/vehicle.vue

@@ -7,30 +7,21 @@
       <div style="height: 730px">
         <div>
           <el-form :inline="true">
-            <el-form-item label="编号：">
-              <el-input
-                v-model="condition.code"
-                placeholder="请输入布防点编号"
-              />
-            </el-form-item>
-            <el-form-item label="日期：">
-              <el-date-picker
-                v-model="condition.date"
-                type="date"
-                placeholder="请选择日期"
-              />
-            </el-form-item>
             <el-form-item label="车牌号：">
               <el-input
-                v-model="condition.licensePlate"
+                v-model="condition.sLicense"
                 placeholder="请输入车牌号"
+                clearable
+                @clear="condition.sLicense = ''"
               />
             </el-form-item>
             <el-form-item label="车牌类型：">
               <el-select
                 v-model="typeLabel"
                 placeholder="请选择车辆类型"
+                clearable
                 @change="changeType"
+                @clear="clearSelect"
               >
                 <el-option
                   v-for="item in typeList"
@@ -43,6 +34,7 @@
               <el-button
                 type="primary"
                 :icon="Search"
+                @click="queryVehicle"
               >
                 查询
               </el-button>
@@ -65,25 +57,19 @@
           >
             <el-table-column
               label="ID"
-              prop="id"
+              prop="ID"
               width="180"
               align="center"
             />
-            <el-table-column
-              label="布防点编号"
-              prop="deploy"
-              width="240"
-              align="center"
-            />
             <el-table-column
               label="日期"
-              prop="date"
+              prop="captureTime"
               width="240"
               align="center"
             />
             <el-table-column
               label="车牌号"
-              prop="licensePlate"
+              prop="sLicense"
               width="180"
               align="center"
             />
@@ -92,7 +78,11 @@
               prop="vehicleType"
               width="180"
               align="center"
-            />
+            >
+              <template #default="scope">
+                {{ getLabelById(scope.row.vehicleType) }}
+              </template>
+            </el-table-column>
             <el-table-column
               label="操作"
               width="300"
@@ -128,9 +118,11 @@
     >
       <Chart />
     </el-dialog>
-    <el-dialog v-model="imageShow" title="抓拍预览">
-      <div style="height: 20px">
-      </div>
+    <el-dialog
+      v-model="imageShow"
+      title="抓拍预览"
+    >
+      <div style="height: 20px" />
       <el-image
         :src="filePath"
         alt="Preview"
@@ -142,7 +134,7 @@
 <script setup>
 
 import { Search, Monitor, Notebook } from '@element-plus/icons-vue'
-import { reactive, ref, onMounted } from 'vue'
+import { reactive, ref, onMounted, computed } from 'vue'
 import Chart from '@/view/vehicle/component/chart.vue'
 import { getSnapshotList } from '@/api/vehicle'
 import image1 from '@/assets/preview/绿湘AA29059.jpg'
@@ -207,26 +199,26 @@ const vehicleList = reactive([
 const fileTotal = ref(10)
 const filePath = ref('')
 const condition = reactive({
-  code: '',
-  date: '',
-  licensePlate: '',
-  vehicleType: ''
+  page: 1,
+  pageSize: 10,
+  sLicense: '',
+  vehicleType: 0
 })
 const imageShow = ref(false)
 const imageList = [
-  { label: '绿湘AA29059', value: image1 },
-  { label: '绿湘FF18509', value: image2 },
-  { label: '绿湘FFA6608', value: image3 },
-  { label: '蓝湘F7UV77', value: image4 },
-  { label: '蓝湘F92UPI', value: image5 },
-  { label: '蓝湘FFV575', value: image6 },
-  { label: '蓝湘FLQ698', value: image7 }
+  { id: 6, value: image1 },
+  { id: 5, value: image2 },
+  { id: 7, value: image3 },
+  { id: 3, value: image4 },
+  { id: 2, value: image5 },
+  { id: 1, value: image6 },
+  { id: 4, value: image7 }
 ]
 const openPreview = (val) => {
-  console.log(val.licensePlate)
+  console.log(val.ID)
   imageShow.value = true
   imageList.forEach(item => {
-    if (item.label === val.licensePlate) {
+    if (item.id === val.ID) {
       filePath.value = item.value
     }
   })
@@ -237,12 +229,13 @@ const changePage = (page) => {
 }
 
 const typeList = reactive([
-  { id: 0, label: '客车' },
-  { id: 1, label: '货车' },
+  { id: 1, label: '私家车' },
   { id: 2, label: '轿车' },
-  { id: 3, label: '工程车' },
-  { id: 4, label: '卡车' },
-  { id: 5, label: '拖车' }
+  { id: 3, label: '货车' },
+  { id: 4, label: '工程车' },
+  { id: 5, label: '卡车' },
+  { id: 6, label: '拖车' },
+  { id: 7, label: '客车' }
 ])
 const typeLabel = ref('')
 const changeType = (e) => {
@@ -253,16 +246,28 @@ const changeType = (e) => {
   })
 }
 
-onMounted(() => {
-  const data = {
-    page: 1,
-    pageSize: 10
-  }
-  getSnapshotList(data).then(res => {
+const queryVehicle = async() => {
+  await getSnapshotList(condition).then(res => {
     if (res.code === 0) {
-      console.log(res.data)
+      console.log(res.data.list)
+      vehicleList.length = 0
+      vehicleList.push(...res.data.list)
     }
   })
+}
+
+const clearSelect = () => {
+  typeLabel.value = ''
+  condition.vehicleType = 0
+}
+
+const getLabelById = computed(() => (id) => {
+  const item = typeList.find(item => item.id === id)
+  return item ? item.label : '未知类型'
+})
+
+onMounted(() => {
+  queryVehicle()
 })
 </script>