车辆统计

server/config.yaml

@@ -126,7 +126,7 @@ mysql:
     db-name: smart_intersection2.0
     username: root
 #    password: qWo2#inH7Bw28#M5
-    password: root
+    password: 123456
     path: 127.0.0.1
     engine: ""
     log-mode: error

web/package.json

@@ -11,6 +11,7 @@
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",
+        "@qiun/ucharts": "2.5.0-20230101",
         "@vue-office/docx": "^1.3.0",
         "@vue-office/excel": "^1.4.5",
         "@vue-office/pdf": "^1.5.3",
@@ -36,6 +37,7 @@
         "sortablejs": "^1.15.2",
         "spark-md5": "^3.0.2",
         "tailwindcss": "^3.3.3",
+        "ucharts": "^0.0.0",
         "vue": "^3.4.21",
         "vue-router": "^4.3.2",
         "vuedraggable": "^4.1.0"

web/src/view/vehicle/component/chart.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    id="main"
+    style="width: 1200px; height: 400px;"
+  />
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount } from 'vue'
+import * as echarts from 'echarts'
+import 'echarts/lib/chart/line' // 按需引入折线图
+
+const option = {
+  title: { text: '车流量统计' },
+  tooltip: { trigger: 'axis' },
+  legend: {
+    data: ['客车', '货车', '轿车', '工程车', '卡车', '拖车', '私家车']
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: { feature: { saveAsImage: {}}},
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30']
+  },
+  yAxis: { type: 'value' },
+  series: [
+    {
+      name: '客车',
+      type: 'line',
+      stack: 'Total',
+      data: [120, 132, 101, 134, 90, 230, 210, 101]
+    },
+    {
+      name: '货车',
+      type: 'line',
+      stack: 'Total',
+      data: [220, 182, 191, 234, 290, 330, 310, 241]
+    },
+    {
+      name: '轿车',
+      type: 'line',
+      stack: 'Total',
+      data: [150, 232, 201, 154, 190, 330, 410, 963]
+    },
+    {
+      name: '工程车',
+      type: 'line',
+      stack: 'Total',
+      data: [320, 332, 301, 334, 390, 330, 320, 148]
+    },
+    {
+      name: '卡车',
+      type: 'line',
+      stack: 'Total',
+      data: [820, 932, 901, 934, 1290, 1330, 1320, 674]
+    },
+    {
+      name: '拖车',
+      type: 'line',
+      stack: 'Total',
+      data: [98, 92, 701, 964, 670, 1260, 1450, 196]
+    }
+  ]
+}
+
+let chartInstance = null
+
+onMounted(() => {
+  const chartDom = document.getElementById('main')
+  chartInstance = echarts.init(chartDom)
+  chartInstance.setOption(option)
+
+  // 响应式调整
+  window.addEventListener('resize', () => {
+    chartInstance.resize()
+  })
+})
+
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    chartInstance.dispose()
+    window.removeEventListener('resize', chartInstance.resize)
+  }
+})
+</script>
+
+<style>
+#main {
+  margin: 0 auto;
+}
+</style>

web/src/view/vehicle/vehicle.vue

@@ -0,0 +1,200 @@
+<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 placeholder="请输入布防点编号" v-model="condition.code"/>
+            </el-form-item>
+            <el-form-item label="日期：">
+              <el-date-picker
+                v-model="dateValue"
+                type="date"
+                placeholder="请选择日期"
+              />
+            </el-form-item>
+            <el-form-item label="车牌号：">
+              <el-input placeholder="请输入车牌号" />
+            </el-form-item>
+            <el-form-item label="车牌类型：">
+              <el-select placeholder="请选择车辆类型" />
+            </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>
+      <el-image
+        :src="filePath"
+        alt="Preview"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { Search, Monitor, Notebook } from '@element-plus/icons-vue'
+import { reactive, ref } from 'vue'
+import Chart from '@/view/vehicle/component/chart.vue'
+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 dateValue = ref('')
+const condition = reactive({
+  code: '',
+  date: '',
+  licensePlate: '',
+  vehicleType: ''
+})
+const openPreview = (val) => {
+  console.log(val)
+}
+
+const changePage = (page) => {
+  console.log(page)
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>