feat: 保密总览车辆管理图

src/views/security-confidentiality/overview/charts/OuterPersonChart.vue

@@ -1,9 +1,9 @@
 <template>
-  <div :id="props.id" :style="{ width: '100%' }" class="pieChart"></div>
+  <div :id="props.id" class="pieChart"></div>
 </template>
 <script setup lang="ts">
   import * as echarts from 'echarts/core';
-  import { TooltipComponent, LegendComponent, GraphicComponent } from 'echarts/components';
+  import { GraphicComponent } from 'echarts/components';
   import { PieChart } from 'echarts/charts';
   import { CanvasRenderer } from 'echarts/renderers';
   import { onMounted, ref, watch } from 'vue';
@@ -14,7 +14,7 @@
     id: string;
   }>();
 
-  echarts.use([TooltipComponent, LegendComponent, PieChart, GraphicComponent, CanvasRenderer]);
+  echarts.use([PieChart, GraphicComponent, CanvasRenderer]);
 
   const sum = ref(props.data.reduce((acc, cur) => acc + cur.value, 0));
   let doughnut;

src/views/security-confidentiality/overview/charts/VehicleChart.vue

@@ -0,0 +1,121 @@
+<template>
+  <div :id="props.id" class="barChart"></div>
+</template>
+<script setup lang="ts">
+  import * as echarts from 'echarts/core';
+  import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
+  import { BarChart } from 'echarts/charts';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { onMounted, ref, watch } from 'vue';
+  import type { BarChartData } from './types';
+
+  const props = defineProps<{
+    data: BarChartData;
+    id: string;
+  }>();
+
+  echarts.use([TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]);
+
+  let doughnut;
+
+  onMounted(() => {
+    doughnut = echarts.init(document.getElementById(props.id as string)!);
+    if (doughnut) {
+      initDoughnut(doughnut);
+      drawDoughnut(doughnut);
+    }
+  });
+
+  const drawDoughnut = (doughnut) => {
+    const doughnutOption = {
+      series: [
+        {
+          data: props.data,
+        },
+      ],
+    };
+    doughnut.setOption(doughnutOption);
+  };
+
+  const initDoughnut = (doughnut) => {
+    const doughnutOption = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      grid: {
+        left: '5%',
+        right: '5%',
+        top: '20px',
+        bottom: '5%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: props.data.category,
+          axisTick: {
+            alignWithLabel: true,
+          },
+          axisLabel: {
+            color: 'rgba(0,0,0,0.5)',
+            fontFamily: 'HelveticaNeue',
+            fontSize: 12,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          splitLine: {
+            lineStyle: {
+              color: '#909399',
+              type: 'dashed',
+              width: 1,
+            },
+          },
+          axisLabel: {
+            color: 'rgba(0,0,0,0.5)',
+            fontFamily: 'HelveticaNeue',
+            fontSize: 12,
+          },
+        },
+      ],
+      series: [
+        {
+          name: 'vehicle',
+          type: 'bar',
+          barWidth: '30%',
+          data: props.data.value,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#38C3FE' },
+              { offset: 1, color: '#1777FF' },
+            ]),
+          },
+          label: {
+            show: true,
+            position: 'top',
+            color: '#38C3FE',
+          },
+        },
+      ],
+    };
+    doughnut.setOption(doughnutOption);
+  };
+
+  watch(
+    () => props.data,
+    () => {
+      drawDoughnut(doughnut);
+    },
+  );
+</script>
+
+<style scoped lang="scss">
+  .barChart {
+    height: 100%;
+  }
+</style>

src/views/security-confidentiality/overview/charts/types.ts

@@ -4,3 +4,8 @@ export interface PieChartData {
   id: number;
   color: string;
 }
+
+export interface BarChartData {
+  category: string[];
+  value: number[];
+}

src/views/security-confidentiality/overview/components/VehicleManagement.vue

@@ -4,10 +4,26 @@
       <span class="line"></span>
       <span class="title">车辆进入管理</span>
     </div>
+    <div class="vehicle-flow">
+      <img class="vehicle-flow-icon" src="@/assets/images/security-confidientiality/vehicle-flow.png" alt="" />
+      <span class="vehicle-flow-label">今日车流量</span>
+      <span class="vehicle-flow-value">{{ lastDayFlow }}</span>
+    </div>
+    <VehicleChart class="chart-container" :data="chartData" id="VehicleChart" />
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import VehicleChart from '../charts/VehicleChart.vue';
+  import type { BarChartData } from '../charts/types';
+
+  const chartData: BarChartData = {
+    category: ['2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05', '2022-01-06', '2022-01-07'],
+    value: [10, 20, 30, 40, 50, 60, 70],
+  };
+
+  const lastDayFlow = 99999;
+</script>
 
 <style scoped lang="scss">
   .container-title {
@@ -35,4 +51,34 @@
     height: 100%;
     padding-top: 14px;
   }
+
+  .vehicle-flow {
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .vehicle-flow-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .vehicle-flow-label {
+    font-weight: 400;
+    font-size: 16px;
+    color: #000000;
+  }
+
+  .vehicle-flow-value {
+    font-weight: 500;
+    font-size: 20px;
+    color: #1777ff;
+  }
+
+  .chart-container {
+    width: 100%;
+    height: calc(100% - 56px);
+  }
 </style>