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

<template>
  <div class="app-container home">
    <!-- 数据总览卡片 -->
    <div>
      <h1>数据总览</h1>
      <div class="data-item">
        <div class="data_bck">
          <div class="number"><span>100</span> 个</div>
          <div class="title_number">设备数量</div>
        </div>
        <div class="data_green">
          <div class="number"><span>100</span> 个</div>
          <div class="title_number">在线设备</div>
        </div>
        <div class="data_orgine">
          <div class="number"><span>100</span> 个</div>
          <div class="title_number">新增绑定</div>
        </div>
        <div class="data_red">
          <div class="number"><span>100</span> 个</div>
          <div class="title_number">异常设备</div>
        </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">
                  <el-progress :stroke-width="7" type="circle" :percentage="(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="选择时间范围">
                    <el-option label="近半年" value="halfYear"></el-option>
                    <el-option label="近一年" value="oneYear"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="card-body">
                <!-- 引入封装好的图表组件 -->
                <!-- <DeviceFrequencyChart /> -->
              </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">
                      <!-- <AlarmOverviewChart /> -->
                      <div class="alarm-stats">
                        <div class="stat-item">
                          <span class="stat red">365</span>
                          <span class="label">报警总数</span>
                        </div>
                        <div class="stat-item">
                          <span class="stat green">300</span>
                          <span class="label">总处理报警</span>
                        </div>
                      </div>
                    </div>
                  </el-col>

                  <!-- 报警事项 -->
                  <el-col :span="16">
                    <div class="alarm-items">
                      <h3>报警事项</h3>
                      <!-- <AlarmItemsChart /> -->
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- <el-card class="data-overview-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">数据总览</span>
          </div>
        </template>
<el-row :gutter="20">
  <el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
    <div class="data-item">
      <div class="data-icon" :style="{ backgroundColor: item.color }">
        <el-icon>
          <component :is="item.icon" />
        </el-icon>
      </div>
      <div class="data-content">
        <div class="data-value">{{ item.value }}</div>
        <div class="data-label">{{ item.label }}</div>
      </div>
    </div>
  </el-col>
</el-row>
</el-card> -->

    <!-- 设备统计卡片 -->
    <!-- <el-row :gutter="20" class="device-stats">
        <el-col :span="12">
          <el-card class="device-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">蓝牙设备</span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, index) in bluetoothStats" :key="index">
                <div class="device-item">
                  <div class="device-value">{{ item.value }}</div>
                  <div class="device-label">{{ item.label }}</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="device-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">4G设备</span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, index) in g4Stats" :key="index">
                <div class="device-item">
                  <div class="device-value">{{ item.value }}</div>
                  <div class="device-label">{{ item.label }}</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row> -->

    <!-- 地区分布图表 -->
    <!-- <el-card class="region-chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">设备使用频次地区分布</span>
            <div class="chart-controls">
              <el-select v-model="selectedMonth" placeholder="选择月份" size="small">
                <el-option label="7月" value="7"></el-option>
                <el-option label="8月" value="8"></el-option>
                <el-option label="9月" value="9"></el-option>
              </el-select>
              <el-select v-model="selectedYear" placeholder="选择年份" size="small">
                <el-option label="2025年" value="2025"></el-option>
                <el-option label="2024年" value="2024"></el-option>
              </el-select>
            </div>
          </div>
        </template>
        <div class="chart-container">
          <div class="chart-bars">
            <div v-for="(region, index) in regionData" :key="index" class="chart-bar-item">
              <div class="bar-label">{{ region.name }}</div>
              <div class="bar-container">
                <div class="bar" :style="{
                  height: (region.value / maxValue) * 200 + 'px',
                  backgroundColor: region.color
                }"></div>
              </div>
              <div class="bar-value">{{ region.value }}</div>
            </div>
          </div>
          <div class="chart-nav">
            <el-button type="text" size="small">
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-button>
          </div>
        </div>
      </el-card> -->
  </div>
</template>

<script setup name="Index" lang="ts">
import router from '@/router';
import DeviceFrequencyChart from './workflow/components/DeviceFrequencyChart.vue';
import AlarmOverviewChart from './workflow/components/AlarmOverviewChart.vue';
import AlarmItemsChart from './workflow/components/AlarmItemsChart.vue';

// 数据总览
const deviceList = ref([
  { name: "4G设备", current: 25, total: 100 },
  { name: "蓝牙设备", current: 50, total: 200 },
  { name: "4G&蓝牙设备", current: 10, total: 40 },
]);
const timeRange = ref('halfYear');
// 设备类型
const handledeviceTypeAdd = () => {
  router.push('/equipmentManagement/deviceType');
}
// 设备列表
const handledeviceAdd = () => {
  router.push('/equipmentManagement/devices');
}
// 分组
const handleGroup = () => {
  router.push('/equipmentManagement/group');
}
// 控制面板
const handleControlPanel = () => {
  router.push('controlCenter/controlPanel');
}





// 地区分布数据
const regionData = ref([
  { name: '北京', value: 156, color: '#409eff' },
  { name: '上海', value: 134, color: '#67c23a' },
  { name: '杭州', value: 98, color: '#e6a23c' }
])


// 计算最大值用于图表比例
const maxValue = computed(() => {
  return Math.max(...regionData.value.map(item => item.value))
})

// 选择器数据
const selectedMonth = ref('7')
const selectedYear = ref('2025')
</script>

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

  .data-item {
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    justify-content: space-between;
    width: 100%;
    color: rgba(255, 255, 255, 1);

    .data_bck {
      width: 280px;
      height: 110px;
      border-radius: 10px;
      background: url('../assets/index/devices_online.png') no-repeat;
      position: relative;
      text-align: center;
      background-size: 100%;
      align-items: center;
    }

    .data_green {
      width: 280px;
      height: 110px;
      border-radius: 10px;
      background: url('../assets/index/online.png') no-repeat;
      position: relative;
      background-size: 100%;
      text-align: center;

    }

    .data_orgine {
      width: 280px;
      height: 110px;
      border-radius: 10px;
      background: url('../assets/index/add.png') no-repeat;
      position: relative;
      background-size: 100%;
      text-align: center;
    }

    .data_red {
      width: 280px;
      height: 110px;
      border-radius: 10px;
      background: url('../assets/index/device_yc.png') no-repeat;
      position: relative;
      background-size: 100%;
      text-align: center;
    }

    .number {
      padding-top: 20px;

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

  .content-row {
    background-color: #fff;
    height: 240px;
    border-radius: 10px;
    padding: 5px 25px 15px 25px;
    margin-top: 20px;
  }

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

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }

    .progress-name {
      text-align: center;
      padding-top: 10px;
    }

    .card_title {
      padding-top: 20px;
      text-align: center;
    }

    .quick-item {
      margin-top: 15px;
      cursor: pointer;
    }

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


  .region-chart-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 16px;
    height: 100%;
  }

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

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

  .chart-controls {
    display: flex;
    gap: 8px;
  }

  .card-body {
    height: calc(100% - 50px);
  }

  .alarm-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .alarm-stats {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 8px;
  }

  .stat-item {
    text-align: center;
  }

  .stat {
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
  }

  .stat.red {
    color: #ff4d4f;
  }

  .stat.green {
    color: #36cbcb;
  }

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

  .alarm-items h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .home {
    padding: 10px;

    .data-overview-card {
      .data-item {
        margin-bottom: 10px;
      }
    }

    .device-stats {
      .el-col {
        margin-bottom: 20px;
      }
    }

    .region-chart-card {
      .chart-container {
        .chart-bars {
          gap: 20px;

          .chart-bar-item {
            .bar-container {
              width: 40px;
            }
          }
        }
      }
    }
  }
}
</style>