时空门户

src/router/index.js

@@ -51,7 +51,7 @@ const routes = [
     path: '/skmh',
     name: 'skmh',
     component: function () {
-      return import('../views/Skmh.vue')
+      return import('../views/skmh/index.vue')
     },
     children: [ // 子路由配置开始
       {
@@ -60,6 +60,12 @@ const routes = [
           return import('../views/skmh/Example.vue')
         }
       },
+      {
+        path: 'index',
+        component: function () {
+          return import('../views/skmh/index.vue')
+        }
+      },
       {
         path: 'scene',
         component: function () {

src/views/skmh/index.vue

@@ -0,0 +1,861 @@
+<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>