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.initChart()
    window.addEventListener('resize', this.handleResize)
    this.getData()
  },
  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
        }
        console.log("业务数据----", res.data.data)
      })
    },
    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.statData),
          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: halfW(4);
    height: 100%;
  }

  .module-title {
    display: flex;
    border-radius: halfW(4);
    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: halfW(4);
  }

  .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(18);
      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>