SaaS-DataScreen/src/views/hui-jia/components/smart.vue

<template>
  <div class="smart-door">
    <!-- 标题 -->
    <div class="module-title">
      <img src="@/assets/images/xlzb.png" class="title-icon" />
      智能门禁
    </div>

    <!-- 数据卡片 -->
    <div class="data-cards">
      <div class="data-card">
        <div class="data-value">{{ state.count }}</div>
        <div class="data-label">门禁设备</div>
      </div>

      <div class="data-card">
        <div class="data-value">{{ state.accessControlProjectCount }}</div>
        <div class="data-label">开通项目</div>
      </div>

      <div class="data-card">
        <div class="data-value">{{ state.openCount }}</div>
        <div class="data-label">出入次数</div>
      </div>
    </div>

    <!-- 通行流量趋势图 -->
    <div class="chart-section">
      <div class="chart-title">日通行流量趋势</div>
      <div ref="trafficChart" class="traffic-chart"></div>
    </div>
  </div>
</template>

<script>
  import { huiJiaApi } from "@/api"

  export default {
    name: "SmartDoor",
    data() {
      return {
        state: {
          count: "921",
          accessControlProjectCount: "92",
          openCount: "900000",
          chartInstance: null,
          // 模拟的通行流量数据
          list: [
            { statData: "01:00", count: 150 },
            { statData: "04:00", count: 250 },
            { statData: "07:00", count: 420 },
            { statData: "10:00", count: 380 },
            { statData: "13:00", count: 320 },
            { statData: "16:00", count: 230 },
            { statData: "19:00", count: 220 },
            { statData: "22:00", count: 300 },
          ],
        },
      }
    },
    mounted() {
      this.getData()
      this.initChart()
      window.addEventListener("resize", this.handleResize)
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.handleResize)
      if (this.chartInstance) {
        this.chartInstance.dispose()
      }
    },
    methods: {
      getData() {
        huiJiaApi.getFaceDeviceData().then((res) => {
          if (res && res.data) {
            this.state = res.data.data
            this.initChart()
          }
        })
      },
      initChart() {
        const echarts = require("echarts")
        this.chartInstance = echarts.init(this.$refs.trafficChart)

        const option = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0, 0, 0, 0.8)",
            borderColor: "rgba(64, 158, 255, 0.3)",
            textStyle: {
              color: "#fff",
            },
            formatter: (params) => {
              return `${params[0].name}<br/>${params[0].seriesName}: ${params[0].value}`
            },
          },
          legend: {
            data: ["开门次数"],
            textStyle: {
              color: "#fff",
            },
            top: "0%",
            right: "0%",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "10%",
            top: "20%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: this.state.list.map((item) => item.staData),
            axisLine: {
              lineStyle: {
                color: "rgba(160, 179, 214, 0.6)",
              },
            },
            axisLabel: {
              color: "rgba(160, 179, 214, 0.7)",
              fontSize: 14,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              // 将坐标轴内的线设置为虚线
              lineStyle: {
                color: "rgba(160, 179, 214, 0.3)",
                type: "dashed",
              },
            },
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "rgba(160, 179, 214, 0.7)",
              fontSize: 12,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              // 将坐标轴内的线设置为虚线
              lineStyle: {
                color: "rgba(160, 179, 214, 0.3)",
                type: "dashed",
              },
            },
          },
          series: [
            {
              name: "开门次数",
              type: "bar",
              data: this.state.list.map((item) => item.count),
              barWidth: "30%",
              // 添加标签配置，设置颜色为白色
              label: {
                show: true,
                position: "top",
                color: "#fff",
                fontSize: 14,
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: "#F6688B" },
                  { offset: 1, color: "#F89877" },
                ]),
              },
            },
          ],
        }

        this.chartInstance.setOption(option)
      },
      handleResize() {
        if (this.chartInstance) {
          this.chartInstance.resize()
        }
      },
      // 模拟数据更新方法
      updateData() {
        // 这里可以根据实际需求从API获取数据
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";

  .smart-door {
    background: var(--content-bg);
    border-radius: var(--radius);
    height: 100%;
  }

  .module-title {
    display: flex;
    border-radius: var(--radius);
    font-size: halfW(16);
    align-items: center;
    color: var(--title-primary);
    background: var(--title-bg);
    padding: halfH(4) halfW(10);
  }

  .data-cards {
    display: flex;
    gap: halfW(12);
    flex-wrap: nowrap;
    margin: halfH(20) halfW(10);
    background: var(--title-bg);
    border: 1px solid rgba(64, 158, 255, 0.1);
    border-radius: var(--radius);
  }

  .data-card {
    flex: 1;
    padding: halfH(10) halfW(6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: halfW(10);
    &:nth-child(1) {
      border-right: 1px solid rgba(64, 158, 255, 0.1);
    }
    &:nth-child(2) {
      border-right: 1px solid rgba(64, 158, 255, 0.1);
    }

    .data-label {
      font-weight: 500;
      font-size: halfW(14);
      color: var(--primary);
    }

    .data-value {
      font-size: halfW(20);
      font-weight: 500;
      color: #fff;
    }
  }

  .chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: halfH(10);
    height: calc(100% - halfH(200));
  }

  .chart-title {
    position: absolute;
    font-size: halfW(14);
    font-weight: 500;
    color: #fff;
    margin-top: halfH(10);
  }

  .traffic-chart {
    flex: 1;
    width: 100%;
    // min-height: halfH(250);
  }
</style>