smart_intersectionV2.0/web/src/view/vehicle/vehicle.vue

<template>
  <div>
    <el-card>
      <template #header>
        <el-text size="large">车辆统计</el-text>
      </template>
      <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"
                placeholder="请输入车牌号"
              />
            </el-form-item>
            <el-form-item label="车牌类型：">
              <el-select
                v-model="typeLabel"
                placeholder="请选择车辆类型"
                @change="changeType"
              >
                <el-option
                  v-for="item in typeList"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                :icon="Search"
              >
                查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                :icon="Notebook"
                @click="chartShow = true"
              >
                统计列表
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table
            :data="vehicleList"
            height="605px"
          >
            <el-table-column
              label="ID"
              prop="id"
              width="180"
              align="center"
            />
            <el-table-column
              label="布防点编号"
              prop="deploy"
              width="240"
              align="center"
            />
            <el-table-column
              label="日期"
              prop="date"
              width="240"
              align="center"
            />
            <el-table-column
              label="车牌号"
              prop="licensePlate"
              width="180"
              align="center"
            />
            <el-table-column
              label="车辆类型"
              prop="vehicleType"
              width="180"
              align="center"
            />
            <el-table-column
              label="操作"
              width="300"
              align="center"
            >
              <template #default="scope">
                <el-button
                  text
                  type="primary"
                  :icon="Monitor"
                  @click="openPreview(scope.row)"
                >
                  预览
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 1400px; display: flex; justify-content: end">
          <el-pagination
            :page-size="10"
            background
            layout="prev, pager, next"
            :total="fileTotal"
            @change="changePage"
          />
        </div>
      </div>
    </el-card>
    <el-dialog
      v-model="chartShow"
      style="width: 1300px"
    >
      <Chart />
    </el-dialog>
    <el-dialog v-model="imageShow" title="抓拍预览">
      <div style="height: 20px">
      </div>
      <el-image
        :src="filePath"
        alt="Preview"
      />
    </el-dialog>
  </div>
</template>

<script setup>

import { Search, Monitor, Notebook } from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue'
import Chart from '@/view/vehicle/component/chart.vue'
import { getSnapshotList } from '@/api/vehicle'
import image1 from '@/assets/preview/绿湘AA29059.jpg'
import image2 from '@/assets/preview/绿湘FF18509.jpg'
import image3 from '@/assets/preview/绿湘FFA6608.jpg'
import image4 from '@/assets/preview/蓝湘F7UV77.jpg'
import image5 from '@/assets/preview/蓝湘F92UPI.jpg'
import image6 from '@/assets/preview/蓝湘FFV575.jpg'
import image7 from '@/assets/preview/蓝湘FLQ698.jpg'
const chartShow = ref(false)
const vehicleList = reactive([
  {
    id: 0,
    deploy: 662156166622,
    date: '2025-11-26',
    licensePlate: '绿湘FFA6608',
    vehicleType: '机动车'
  },
  {
    id: 1,
    deploy: 662156166623,
    date: '2025-11-26',
    licensePlate: '蓝湘FFV575',
    vehicleType: '机动车'
  },
  {
    id: 2,
    deploy: 662156166622,
    date: '2025-11-26',
    licensePlate: '蓝湘F92UPI',
    vehicleType: '机动车'
  },
  {
    id: 3,
    deploy: 662156166622,
    date: '2025-11-26',
    licensePlate: '蓝湘F7UV77',
    vehicleType: '机动车'
  },
  {
    id: 4,
    deploy: 662156166622,
    date: '2025-11-26',
    licensePlate: '蓝湘FLQ698',
    vehicleType: '机动车'
  },
  {
    id: 5,
    deploy: 662156166622,
    date: '2025-11-26',
    licensePlate: '绿湘FF18509',
    vehicleType: '机动车'
  },
  {
    id: 6,
    deploy: 662156166622,
    date: '2025-11-26',
    licensePlate: '绿湘AA29059',
    vehicleType: '小轿车'
  }
])
const fileTotal = ref(10)
const filePath = ref('')
const condition = reactive({
  code: '',
  date: '',
  licensePlate: '',
  vehicleType: ''
})
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 }
]
const openPreview = (val) => {
  console.log(val.licensePlate)
  imageShow.value = true
  imageList.forEach(item => {
    if (item.label === val.licensePlate) {
      filePath.value = item.value
    }
  })
}

const changePage = (page) => {
  console.log(page)
}

const typeList = reactive([
  { id: 0, label: '客车' },
  { id: 1, label: '货车' },
  { id: 2, label: '轿车' },
  { id: 3, label: '工程车' },
  { id: 4, label: '卡车' },
  { id: 5, label: '拖车' }
])
const typeLabel = ref('')
const changeType = (e) => {
  typeList.forEach(item => {
    if (item.label === e) {
      condition.vehicleType = item.id
    }
  })
}

onMounted(() => {
  const data = {
    page: 1,
    pageSize: 10
  }
  getSnapshotList(data).then(res => {
    if (res.code === 0) {
      console.log(res.data)
    }
  })
})
</script>

<style scoped lang="scss">

</style>