dyf-vue-ui/src/views/index.vue

<template>
  <div class="app-container home">
    <!-- 数据总览卡片 -->
    <div>
      <h2>数据总览</h2>
      <div class="data-item">
        <div class="data_bck">
          <div class="number"><span>{{ DataOverview.devicesNumber }}</span> 个</div>
          <div class="title_number">设备数量</div>
        </div>
        <div class="data_green">
          <div class="number"><span>{{ DataOverview.equipmentOnline }}</span> 个</div>
          <div class="title_number">在线设备</div>
        </div>
        <div class="data_orgine">
          <div class="number"><span>{{ DataOverview.bindingNew }}</span> 个</div>
          <div class="title_number">新增绑定</div>
        </div>
        <div class="data_red">
          <div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
          <div class="title_number">异常设备</div>
        </div>
      </div>

      <!-- 设备分类 + 快捷操作 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="content-row">
            <h2>设备分类</h2>
            <div class="card-header">
              <div v-for="(item, index) in deviceList" :key="index" class="progress-item"
                style="display: inline-block; margin-right: 40px;">
                <el-progress :stroke-width="7" type="circle"
                  :percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
                  <template #default>
                    <div class="progress-text">
                      <span class="current">{{ item.current }}</span>
                      <span class="divider">/</span>
                      <span class="total">{{ item.total }}</span>
                    </div>
                  </template>
                </el-progress>
                <div class="progress-name">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="content-row">
            <h2>快捷操作</h2>
            <div class="card-header">
              <div class="quick-item" @click="handledeviceTypeAdd">
                <img src="../assets/index/device_type.png" class="quick-img" />
                <div class="card_title">设备类型</div>
              </div>
              <div class="quick-item" @click="handledeviceAdd">
                <img src="../assets/index/device_add.png" class="quick-img" />
                <div class="card_title">设备添加</div>
              </div>
              <div class="quick-item" @click="handleGroup">
                <img src="../assets/index/device_group.png" class="quick-img" />
                <div class="card_title">分组管理</div>
              </div>
              <div class="quick-item" @click="handleControlPanel">
                <img src="../assets/index/conton.png" class="quick-img" />
                <div class="card_title">控制面板</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 图表区域：设备使用频次 + 报警信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="region-chart-card">
            <div class="card-header">
              <h2>设备使用频次</h2>
              <div class="chart-controls">
                <!-- <el-select v-model="timeRange" placeholder="选择时间范围" @change="updateFrequencyChart">
                  <el-option label="近半年" value="halfYear"></el-option>
                  <el-option label="近一年" value="oneYear"></el-option>
                </el-select> -->
                <el-select v-model="deviceType" placeholder="设备类型" style="width: 150px;">
                  <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
                    :value="item.deviceTypeId" />
                </el-select>
              </div>
            </div>
            <div class="card-body">
              <!-- 图表容器：设备使用频次 -->
              <div ref="frequencyChartRef" class="chart-container"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="region-chart-card">
            <div class="card-header">
              <h2>报警信息</h2>
            </div>
            <div class="card-body">
              <el-row :gutter="16">
                <el-col :span="8">
                  <div class="alarm-overview">
                    <!-- 环形图容器：今日报警处理占比 -->
                    <div ref="alarmRingChartRef" class="chart-container"></div>
                    <div class="alarm-stats">
                      <div class="stat-item">
                        <div class="stat red">365</div>
                        <div class="label">报警总数</div>
                      </div>
                      <div class="stat-item">
                        <div class="stat green">300</div>
                        <div class="label">总处理报警</div>
                      </div>
                    </div>
                  </div>
                </el-col>

                <!-- 报警事项 + 柱状图 -->
                <el-col :span="16">
                  <div class="alarm-items">
                    <h3>报警事项</h3>
                    <!-- 柱状图容器：各类型报警次数 -->
                    <div ref="alarmBarChartRef" class="chart-container"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import api from '@/api/home/index'
import { DataOverviewType } from '@/api/home/types'
import router from '@/router';
import * as echarts from 'echarts'; // 引入ECharts核心库
import apiTypeAll from '@/api/equipmentManagement/device/index';
const DataOverview = ref<DataOverviewType>({
  devicesNumber: 0,
  equipmentOnline: 0,
  bindingNew: 0,
  equipmentAbnormal: 0
});
const deviceTypeOptions = ref([]); //设备类型
const deviceType = ref()
// ---------------------- 基础数据 ----------------------
// 设备分类数据
const deviceList = ref([
  { name: "4G设备", current: 0, total: 0 },
  { name: "蓝牙设备", current: 0, total: 0 },
  { name: "4G&蓝牙设备", current: 0, total: 0 },
]);
// 时间范围（控制设备使用频次图表）
const timeRange = ref('halfYear');

// ---------------------- 图表Ref（用于挂载图表实例） ----------------------
const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
const alarmRingChartRef = ref<HTMLDivElement | null>(null); // 报警环形图
const alarmBarChartRef = ref<HTMLDivElement | null>(null); // 报警柱状图

// ---------------------- 图表实例存储（用于销毁/更新） ----------------------
let frequencyChartInstance: echarts.ECharts | null = null;
let alarmRingChartInstance: echarts.ECharts | null = null;
let alarmBarChartInstance: echarts.ECharts | null = null;

// ---------------------- 快捷操作方法 ----------------------
const handledeviceTypeAdd = () => {
  router.push('/equipmentManagement/deviceType');
};
const handledeviceAdd = () => {
  router.push('/equipmentManagement/devices');
};
const handleGroup = () => {
  router.push('/equipmentManagement/group');
};
const handleControlPanel = () => {
  router.push('controlCenter/controlPanel');
};

// ---------------------- 图表初始化方法 ----------------------
/**
 * 1. 设备使用频次折线图
 */
const initFrequencyChart = () => {
  if (!frequencyChartRef.value) return;

  // 初始化图表实例
  frequencyChartInstance = echarts.init(frequencyChartRef.value);

  // 假数据：按时间范围区分
  const chartData = timeRange.value === 'halfYear'
    ? {
      xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
      yAxis: [320, 280, 450, 380, 520, 480], // 近半年使用次数
      peak: { name: '峰值', value: 520, month: '5月' }
    }
    : {
      xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      yAxis: [320, 280, 450, 380, 520, 480, 550, 620, 580, 490, 530, 650], // 近一年使用次数
      peak: { name: '峰值', value: 650, month: '12月' }
    };

  // ECharts配置项
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 次'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: chartData.xAxis,
      axisLabel: {
        interval: 0 // 强制显示所有x轴标签
      }
    },
    yAxis: {
      type: 'value',
      name: '使用次数',
      min: 0,
      max: Math.max(...chartData.yAxis) + 100 // y轴最大值留有余量
    },
    series: [
      {
        name: '使用频次',
        type: 'line',
        data: chartData.yAxis,
        smooth: false, // 平滑折线
        lineStyle: {
          width: 3,
          color: '#409eff'
        },
        itemStyle: {
          color: '#409eff',
          radius: 5
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(64, 158, 255, 0.3)'
            }, {
              offset: 1, color: 'rgba(64, 158, 255, 0)'
            }]
          }
        },
        // 标记峰值
        markPoint: {
          data: [{
            name: chartData.peak.name,
            value: chartData.peak.value,
            xAxis: chartData.xAxis.indexOf(chartData.peak.month),
            yAxis: chartData.peak.value,
            itemStyle: {
              color: '#ff4d4f'
            }
          }]
        }
      }
    ]
  };

  // 渲染图表
  frequencyChartInstance.setOption(option);
};

/**
 * 2. 报警环形图（今日报警处理占比）
 */
const initAlarmRingChart = () => {
  if (!alarmRingChartRef.value) return;

  alarmRingChartInstance = echarts.init(alarmRingChartRef.value);

  // 假数据：今日报警6次，已处理6次
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 次 ({d}%)'
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '60%'], // 环形半径
        center: ['50%', '50%'], // 居中显示
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'center',
          formatter: '6/6\n今日报警/处理', // 中心显示“今日 已处理/总数”
          fontSize: 16,
          fontWeight: 'bold',
          color: '#333'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 6, name: '已处理报警', itemStyle: { color: '#07BE75' } },
          { value: 0, name: '未处理报警', itemStyle: { color: '#F65757' } }
        ]
      }
    ]
  };

  alarmRingChartInstance.setOption(option);
};

/**
 * 3. 报警柱状图（各类型报警次数）
 */
const initAlarmBarChart = () => {
  if (!alarmBarChartRef.value) return;

  alarmBarChartInstance = echarts.init(alarmBarChartRef.value);

  // 假数据：各类型报警次数
  const alarmTypes = ['强制报警', '撞击闯入', '手动报警', '电子围栏'];
  const alarmCounts = [50, 35, 65, 50]; // 对应各类型次数

  // ECharts配置项
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 次'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: alarmTypes,
      axisLabel: {
        interval: 0,
        //rotate: 15 // 标签旋转，避免重叠
      }
    },
    yAxis: {
      type: 'value',
      name: '报警次数',
      min: 0
    },
    series: [
      {
        name: '报警次数',
        type: 'bar',
        data: alarmCounts,
        barWidth: '40%',
        itemStyle: {
          color: (params: any) => {
            // 不同类型报警用不同颜色
            const colors = ['#ff4d4f', '#e6a23c', '#409eff', '#67c23a'];
            return colors[params.dataIndex];
          }
        }
      }
    ]
  };

  alarmBarChartInstance.setOption(option);
};

// ---------------------- 图表更新方法（时间范围切换时） ----------------------
const updateFrequencyChart = () => {
  // 先销毁旧实例，再重新初始化
  if (frequencyChartInstance) {
    frequencyChartInstance.dispose();
  }
  initFrequencyChart();
};
// 首页统计接口
const getData = async () => {
  //  设备总览
  api.getDataOverview({}).then(res => {
    DataOverview.value = res.data
  })
  // 设备分类
  try {
    const res = await api.getEquipmentClassification({});
    console.log(res, 'resss');
    const { equipment4G, deviceBluetooth, devices4GAndBluetooth, total } = res.data;
    // 映射数据：current 为各类型设备数量，total 为总设备数（6）
    deviceList.value = [
      {
        name: "4G设备",
        current: equipment4G,
        total: total
      },
      {
        name: "蓝牙设备",
        current: deviceBluetooth,
        total: total
      },
      {
        name: "4G&蓝牙设备",
        current: devices4GAndBluetooth,
        total: total
      },
    ];
  } catch (error) {
    console.log('获取设备分类数据失败：', error);
  }
  // 设备类型
  apiTypeAll.deviceTypeAll().then(res => {
    if (res.code == 200) {
      deviceTypeOptions.value = res.data
    }
  }).catch(err => {

  })
};








// ---------------------- 生命周期钩子（初始化/销毁图表） ----------------------
onMounted(() => {
  // 页面加载时初始化所有图表
  initFrequencyChart();
  initAlarmRingChart();
  initAlarmBarChart();
  getData()

  // 监听窗口 resize，自动调整图表大小
  window.addEventListener('resize', () => {
    frequencyChartInstance?.resize();
    alarmRingChartInstance?.resize();
    alarmBarChartInstance?.resize();
  });
});

onUnmounted(() => {
  // 页面销毁时销毁图表实例，避免内存泄漏
  frequencyChartInstance?.dispose();
  alarmRingChartInstance?.dispose();
  alarmBarChartInstance?.dispose();
  window.removeEventListener('resize', () => { });
});
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  // 数据总览卡片样式
  .data-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 20px;

    .data_bck,
    .data_green,
    .data_orgine,
    .data_red {
      width: 280px;
      height: 110px;
      border-radius: 10px;
      position: relative;
      text-align: center;
      background-size: 100% 100%; // 确保背景图充满容器
    }

    .data_bck {
      background: url('../assets/index/devices_online.png') no-repeat;
    }

    .data_green {
      background: url('../assets/index/online.png') no-repeat;
    }

    .data_orgine {
      background: url('../assets/index/add.png') no-repeat;
    }

    .data_red {
      background: url('../assets/index/device_yc.png') no-repeat;
    }

    .number {
      padding-top: 20px;
      font-size: 18px;

      span {
        font-size: 36px;
        font-weight: 700;
        margin-right: 5px;
      }
    }

    .title_number {
      margin-top: 5px;
      font-size: 16px;
    }
  }

  // 设备分类/快捷操作卡片样式
  .content-row {
    background-color: #fff;
    height: 240px;
    border-radius: 10px;
    padding: 15px 25px;
    margin-bottom: 20px;

    h2 {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0 0 15px 0;
    }

    .progress-item {
      text-align: center;

      .progress-text {
        font-size: 20px;
        color: #666;

        .current {
          font-weight: bold;
          color: #000;
          font-size: 23px;
        }
      }

      .progress-name {
        margin-top: 10px;
        font-size: 14px;
        color: #666;
      }
    }

    .quick-item {
      cursor: pointer;
      text-align: center;
      margin-top: 25px;

      .quick-img {
        width: 80px;
        height: 80px;
      }

      .card_title {
        margin-top: 20px;
        font-size: 16px;
        color: #333;
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    h2 {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
  }

  // 图表卡片样式
  .region-chart-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    height: 360px; // 固定图表卡片高度，避免布局错乱


    .card-body {
      height: calc(100% - 40px); // 卡片内容区高度（减去header高度）
    }

    // 图表容器通用样式（必须设置宽高，否则图表无法渲染）
    .chart-container {
      width: 100%;
      height: 250px;
    }
  }

  // 报警信息区域样式
  .alarm-overview {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .alarm-stats {
      // width: 100%;
      display: flex;
      // flex-direction: column;
      gap: 15px;

      .stat-item {
        text-align: center;

        .stat {
          font-size: 18px;
          font-weight: bold;
        }

        .stat.red {
          color: #ff4d4f;
        }

        .stat.green {
          color: #07BE75;
        }

        .label {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }

  .alarm-items {
    height: 100%;

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin: 0 0 10px 0;
    }
  }
}

// 响应式适配（小屏幕下调整布局）
@media (max-width: 1200px) {
  .home {
    .data-item {
      flex-wrap: wrap;
      gap: 15px;

      .data_bck,
      .data_green,
      .data_orgine,
      .data_red {
        width: calc(50% - 7.5px); // 小屏幕下2列布局
      }
    }

    .el-col {
      &:span-12 {
        width: 100%;
        margin-bottom: 20px;
      }
    }
  }
}
</style>