qp_onemap_ui/src/views/skmh/index.vue

<template>
  <div class="dashboard-container">
    <!-- 顶部横幅 -->
    <div class="banner">
      <div class="banner-content">
        <h1>时空门户</h1>
        <p>时空门户是一个集数据采集、分析、展示于一体的综合性平台，为用户提供全面的设备监控和数据分析服务</p>
        <button class="enter-btn">进入系统</button>
      </div>
    </div>

    <!-- 平台数据统计 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-card card-1">
          <div class="stat-number">1,248</div>
          <div class="stat-label">在线设备数</div>
        </div>
        <div class="stat-card card-2">
          <div class="stat-number">86</div>
          <div class="stat-label">重大隐患统计</div>
        </div>
        <div class="stat-card card-3">
          <div class="stat-number">24,586</div>
          <div class="stat-label">隐患排查人员</div>
        </div>
      </div>
    </div>

    <!-- 数据概览 -->
    <div class="data-overview">
      <div class="overview-header">
        <h2>数据概览</h2>
        <div class="time-tabs">
          <div class="tab active">今日</div>
          <div class="tab">本周</div>
          <div class="tab">本月</div>
          <div class="tab">本年</div>
        </div>
      </div>
      <div class="charts-grid">
        <!-- 设备统计柱状图 -->
        <div class="chart-card">
          <div class="chart-title">设备统计</div>
          <div ref="deviceChart" class="chart-container"></div>
        </div>
        <!-- 设备状态分布饼图 -->
        <div class="chart-card">
          <div class="chart-title">设备状态分布</div>
          <div ref="statusChart" class="chart-container"></div>
        </div>
        <!-- 用户活跃度分析折线图 -->
        <div class="chart-card">
          <div class="chart-title">用户活跃度分析</div>
          <div ref="activityChart" class="chart-container"></div>
        </div>
        <!-- 数据量柱状图 -->
        <div class="chart-card">
          <div class="chart-title">数据量</div>
          <div ref="dataVolumeChart" class="chart-container"></div>
        </div>
      </div>
    </div>

    <!-- 设备综合分析比较 -->
    <div class="comparison-section">
      <div class="chart-card full-width">
        <div class="chart-title">设备综合分析比较</div>
        <div ref="comparisonChart" class="chart-container"></div>
      </div>
    </div>

    <!-- 功能演示 -->
    <div class="demo-section">
      <h2>功能演示</h2>
      <div class="demo-grid">
        <div class="demo-card">
          <div class="demo-thumbnail">
            <div class="play-btn">▶</div>
          </div>
          <div class="demo-title">设备监控演示</div>
        </div>
        <div class="demo-card">
          <div class="demo-thumbnail">
            <div class="play-btn">▶</div>
          </div>
          <div class="demo-title">数据分析演示</div>
        </div>
        <div class="demo-card">
          <div class="demo-thumbnail">
            <div class="play-btn">▶</div>
          </div>
          <div class="demo-title">隐患排查演示</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SpatialTemporalPortal',
  data() {
    return {
      deviceChart: null,
      statusChart: null,
      activityChart: null,
      dataVolumeChart: null,
      comparisonChart: null
    }
  },
  mounted() {
    this.initCharts()
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
    this.destroyCharts()
  },
  methods: {
    initCharts() {
      this.initDeviceChart()
      this.initStatusChart()
      this.initActivityChart()
      this.initDataVolumeChart()
      this.initComparisonChart()
    },
    
    initDeviceChart() {
      this.deviceChart = echarts.init(this.$refs.deviceChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110],
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1E90FF' },
                { offset: 1, color: '#00BFFF' }
              ])
            }
          }
        ]
      }
      this.deviceChart.setOption(option)
    },
    
    initStatusChart() {
      this.statusChart = echarts.init(this.$refs.statusChart)
      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          textStyle: {
            color: '#a3b6c7'
          }
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#0A192F',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 400, name: '正常', itemStyle: { color: '#52C41A' } },
              { value: 300, name: '警告', itemStyle: { color: '#FAAD14' } },
              { value: 200, name: '异常', itemStyle: { color: '#F5222D' } },
              { value: 100, name: '离线', itemStyle: { color: '#8C8C8C' } }
            ]
          }
        ]
      }
      this.statusChart.setOption(option)
    },
    
    initActivityChart() {
      this.activityChart = echarts.init(this.$refs.activityChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '活跃度',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#1E90FF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(30, 144, 255, 0.6)' },
                { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230]
          }
        ]
      }
      this.activityChart.setOption(option)
    },
    
    initDataVolumeChart() {
      this.dataVolumeChart = echarts.init(this.$refs.dataVolumeChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            data: [1200, 2000, 1500, 800, 700, 1100, 1300],
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              color: '#FF7F50'
            }
          }
        ]
      }
      this.dataVolumeChart.setOption(option)
    },
    
    initComparisonChart() {
      this.comparisonChart = echarts.init(this.$refs.comparisonChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          data: ['设备A', '设备B', '设备C'],
          textStyle: {
            color: '#a3b6c7'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '设备A',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#1E90FF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(30, 144, 255, 0.6)' },
                { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
              ])
            },
            data: [120, 132, 101, 134, 90, 230]
          },
          {
            name: '设备B',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#52C41A'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(82, 196, 26, 0.6)' },
                { offset: 1, color: 'rgba(82, 196, 26, 0.1)' }
              ])
            },
            data: [220, 182, 191, 234, 290, 330]
          },
          {
            name: '设备C',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#FF7F50'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 127, 80, 0.6)' },
                { offset: 1, color: 'rgba(255, 127, 80, 0.1)' }
              ])
            },
            data: [150, 232, 201, 154, 190, 330]
          }
        ]
      }
      this.comparisonChart.setOption(option)
    },
    
    handleResize() {
      if (this.deviceChart) this.deviceChart.resize()
      if (this.statusChart) this.statusChart.resize()
      if (this.activityChart) this.activityChart.resize()
      if (this.dataVolumeChart) this.dataVolumeChart.resize()
      if (this.comparisonChart) this.comparisonChart.resize()
    },
    
    destroyCharts() {
      if (this.deviceChart) {
        this.deviceChart.dispose()
        this.deviceChart = null
      }
      if (this.statusChart) {
        this.statusChart.dispose()
        this.statusChart = null
      }
      if (this.activityChart) {
        this.activityChart.dispose()
        this.activityChart = null
      }
      if (this.dataVolumeChart) {
        this.dataVolumeChart.dispose()
        this.dataVolumeChart = null
      }
      if (this.comparisonChart) {
        this.comparisonChart.dispose()
        this.comparisonChart = null
      }
    }
  }
}
</script>

<style lang="less" scoped>
.dashboard-container {
  background-color: #0A192F;
  min-height: 100vh;
  color: #fff;
}

/* 顶部横幅 */
.banner {
  position: relative;
  height: 500px;
  background: url('@/assets/images/common/home-bg1.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10%;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.7));
  }
  
  .banner-content {
    position: relative;
    max-width: 600px;
    text-align: left;
    padding: 0 20px;
    
    h1 {
      font-size: 42px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #fff;
    }
    
    p {
      font-size: 14px;
      line-height: 1.8;
      margin-bottom: 30px;
      color: #a3b6c7;
    }
    
    .enter-btn {
      background-color: transparent;
      color: #409eff;
      border: 1px solid #409eff;
      padding: 8px 30px;
      font-size: 16px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: #409eff;
        color: #fff;
        transform: translateY(-2px);
      }
    }
  }
}

/* 平台数据统计 */
.stats-section {
  padding: 40px 20px;
  
  .stats-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    
    .stat-card {
      width: 300px;
      height: 150px;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .stat-number {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #fff;
      }
      
      .stat-label {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
      }
    }
    
    .card-1 {
      background: linear-gradient(135deg, #1E90FF 0%, #00BFFF 100%);
    }
    
    .card-2 {
      background: linear-gradient(135deg, #52C41A 0%, #95DE64 100%);
    }
    
    .card-3 {
      background: linear-gradient(135deg, #9370DB 0%, #BA55D3 100%);
    }
  }
}

/* 数据概览 */
.data-overview {
  padding: 0 20px 40px;
  
  .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    
    h2 {
      font-size: 24px;
      color: #fff;
      margin: 0;
    }
    
    .time-tabs {
      display: flex;
      gap: 20px;
      
      .tab {
        padding: 8px 16px;
        cursor: pointer;
        color: #a3b6c7;
        border-radius: 20px;
        transition: all 0.3s ease;
        
        &:hover {
          color: #409eff;
        }
        
        &.active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
  
  .charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    
    .chart-card {
      background-color: rgba(30, 41, 59, 0.6);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      
      .chart-title {
        font-size: 18px;
        color: #fff;
        margin-bottom: 20px;
        text-align: center;
      }
      
      .chart-container {
        height: 300px;
        width: 100%;
      }
    }
  }
}

/* 设备综合分析比较 */
.comparison-section {
  padding: 0 20px 40px;
  
  .chart-card {
    background-color: rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    &.full-width {
      max-width: 100%;
    }
    
    .chart-title {
      font-size: 18px;
      color: #fff;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .chart-container {
      height: 400px;
      width: 100%;
    }
  }
}

/* 功能演示 */
.demo-section {
  padding: 0 20px 40px;
  
  h2 {
    font-size: 24px;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
  }
  
  .demo-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    
    .demo-card {
      width: 350px;
      background-color: rgba(30, 41, 59, 0.6);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .demo-thumbnail {
        height: 200px;
        background-color: #1E90FF;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        
        .play-btn {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.8);
          color: #1E90FF;
          font-size: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: #fff;
            transform: scale(1.1);
          }
        }
      }
      
      .demo-title {
        padding: 15px;
        font-size: 16px;
        color: #fff;
        text-align: center;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner {
    padding-right: 5%;
    
    .banner-content {
      h1 {
        font-size: 32px;
      }
    }
  }
  
  .stats-section {
    .stats-grid {
      gap: 20px;
      
      .stat-card {
        width: 100%;
        max-width: 300px;
      }
    }
  }
  
  .data-overview {
    .overview-header {
      flex-direction: column;
      gap: 20px;
      
      h2 {
        text-align: center;
      }
    }
    
    .charts-grid {
      grid-template-columns: 1fr;
      
      .chart-card {
        .chart-container {
          height: 250px;
        }
      }
    }
  }
  
  .comparison-section {
    .chart-card {
      .chart-container {
        height: 300px;
      }
    }
  }
  
  .demo-section {
    .demo-grid {
      gap: 20px;
      
      .demo-card {
        width: 100%;
        max-width: 350px;
      }
    }
  }
}
</style>