anKeYuan-largeScreen-9600/src/components/EnvMonitorStats.vue

<template>
  <div class="panel env-monitor-stats">
    <div class="border-beam"></div>
    <svg class="pc tl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
    <svg class="pc tr" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
    <svg class="pc bl" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
    <svg class="pc br" viewBox="0 0 14 14"><path d="M0 14 V0 H14" fill="none" stroke="rgba(30,144,255,0.85)" stroke-width="1.5"/></svg>
    <div class="panel-header">
      <div class="panel-header-icon">📡</div>
      <span class="panel-title">智能环境感知应用设备统计</span>
    </div>
    <div class="panel-body">
      <!-- 在线/离线设备 -->
      <div class="device-online-row">
        <div class="device-stat-chip online">
          <div class="dv">{{ online }}</div>
          <div class="dl">在线设备</div>
        </div>
        <div class="device-stat-chip offline">
          <div class="dv">{{ offline }}</div>
          <div class="dl">离线设备</div>
        </div>
      </div>
      <!-- 仪表盘 + 设备列表 -->
      <div class="device-middle">
        <div ref="gauge" class="gauge-chart"></div>
        <div style="flex:1;display:flex;flex-direction:column;gap:12px">
          <div style="display:flex;gap:12px">
            <div class="device-list-item" style="flex:1" v-for="item in devicesRow1" :key="item.name">
              <div class="dli-icon">{{ item.icon }}</div>
              <div class="dli-num">{{ item.value }}</div>
              <div class="dli-name">{{ item.name }}</div>
            </div>
          </div>
          <div style="display:flex;gap:12px;justify-content:center">
            <div class="device-list-item" style="flex:0 0 calc(33.33% - 6px)" v-for="item in devicesRow2" :key="item.name">
              <div class="dli-icon">{{ item.icon }}</div>
              <div class="dli-num">{{ item.value }}</div>
              <div class="dli-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getIotDeviceStatistics } from '@/api/screen'

export default {
  name: 'EnvMonitorStats',
  data() {
    return {
      online: 0,
      offline: 0,
      onlineRate: 0,
      devices: [],
      chart: null,
      pollTimer: null
    }
  },
  computed: {
    devicesRow1() { return this.devices.slice(0, 3) },
    devicesRow2() { return this.devices.slice(3) }
  },
  mounted() {
    this.fetchData()
    this.pollTimer = setInterval(this.fetchData, 5 * 60 * 1000)
  },
  beforeDestroy() {
    if (this.pollTimer) clearInterval(this.pollTimer)
    if (this.chart) this.chart.dispose()
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    async fetchData() {
      try {
        const res = await getIotDeviceStatistics()
        if (res.code === 200) {
          const d = res.data
          this.online = d.onlineCount
          this.offline = d.offlineCount
          this.onlineRate = d.onlineRate
          this.devices = [
            { icon: '🏷️', value: d.tagCount,      name: '电子信息铭牌' },
            { icon: '⚗️', value: d.terminalCount, name: '化学品智能终端' },
            { icon: '🌡️', value: d.sensorCount,   name: '传感器' },
            { icon: '📷', value: d.cameraCount,   name: '智慧摄像头' },
            { icon: '📡', value: d.iotCount,    name: '其他智能设备' }
          ]
        }
      } catch (e) {
        // 保持默认值
      }
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }
      this.$nextTick(() => this.initChart())
    },
    handleResize() {
      if (this.chart) this.chart.resize()
    },
    /** 初始化仪表盘 - 展示设备在线率 */
    initChart() {
      this.chart = echarts.init(this.$refs.gauge, null, { renderer: 'canvas', devicePixelRatio: 2 })
      const option = {
        backgroundColor: 'transparent',
        series: [{
          type: 'gauge',
          radius: '90%',
          center: ['50%', '60%'],
          startAngle: 210,
          endAngle: -30,
          min: 0,
          max: 100,
          splitNumber: 5,
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.3, '#ef4444'],
                [0.6, '#f59e0b'],
                [1, '#1e90ff']
              ]
            }
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          pointer: {
            icon: 'path://M12.8,0.7l12.3,0 M0,0 l9.2,12.4 M0,0 l2.2,-1.6',
            offsetCenter: [0, '-60%'],
            width: 8,
            length: '60%',
            itemStyle: { color: '#1e90ff' }
          },
          detail: {
            valueAnimation: true,
            formatter: '{value}%',
            color: '#ffd740',
            fontSize: 45,
            fontWeight: 700,
            offsetCenter: [0, '30%']
          },
          title: {
            show: true,
            offsetCenter: [0, '62%'],
            color: 'rgba(110,165,210,0.6)',
            fontSize: 25
          },
          data: [{ value: this.onlineRate, name: '在线率' }]
        }]
      }
      this.chart.setOption(option)
      window.addEventListener('resize', this.handleResize)
    }
  }
}
</script>

<style lang="scss" scoped>
.env-monitor-stats {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ---- Border beam ---- */
.border-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 2;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.9), rgba(0, 216, 255, 0.7), transparent);
    animation: beamTop 5s linear infinite;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -100%;
    width: 40%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(0, 216, 255, 0.7), rgba(30, 144, 255, 0.9), transparent);
    animation: beamBottom 5s linear infinite 2.5s;
  }
}

@keyframes beamTop    { from { left: -40%; } to { left: 100%; } }
@keyframes beamBottom { from { right: -40%; } to { right: 100%; } }

/* ---- Corner ornaments ---- */
.pc {
  position: absolute;
  width: 35px;
  height: 35px;
  z-index: 3;
  pointer-events: none;

  &.tl { top: 0; left: 0; }
  &.tr { top: 0; right: 0; transform: scaleX(-1); }
  &.bl { bottom: 0; left: 0; transform: scaleY(-1); }
  &.br { bottom: 0; right: 0; transform: scale(-1); }

  svg { width: 100%; height: 100%; }
}

/* ---- Panel header ---- */
.panel-header {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 20px 30px 18px;
  border-bottom: 1px solid $border;
  background: linear-gradient(90deg, rgba(0, 60, 160, 0.18), transparent);
  flex-shrink: 0;
}

.panel-header-icon {
  width: 65px;
  height: 65px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.25), rgba(0, 216, 255, 0.15));
  border: 1px solid rgba(30, 144, 255, 0.35);
  animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(30, 144, 255, 0.3); }
  50% { box-shadow: 0 0 35px rgba(30, 144, 255, 0.7), 0 0 12px rgba(0, 216, 255, 0.3); }
}

.panel-title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 2px;
  color: $cyan;
}

/* ---- Panel body ---- */
.panel-body {
  padding: 20px 25px;
}

/* ---- Online / Offline row ---- */
.device-online-row {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}

.device-stat-chip {
  flex: 1;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  background: $bg-card;
  border: 1px solid $border;

  &.online {
    border-color: $green;
  }

  &.offline {
    border-color: $red;
  }

  .dv {
    font-size: 50px;
    font-weight: 700;
  }

  &.online .dv {
    color: $green;
  }

  &.offline .dv {
    color: $red;
  }

  .dl {
    font-size: 25px;
    color: $text-dim;
  }
}

/* ---- Middle: gauge + device grid ---- */
.device-middle {
  display: flex;
  gap: 20px;
  align-items: center;
}

.gauge-chart {
  flex: 0 0 295px;
  height: 295px;
}


.device-list-item {
  padding: 15px;
  border-radius: 10px;
  background: $bg-card;
  border: 1px solid $border;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  .dli-icon {
    font-size: 40px;
  }

  .dli-num {
    font-size: 38px;
    font-weight: 700;
    color: $gold;
  }

  .dli-name {
    font-size: 22px;
    color: $text-dim;
    text-align: center;
    line-height: 1.3;
  }
}
</style>