lc_frontend/src/views/screen/components/AlertListDemo.vue

<template>
  <div class="demo-container">
    <h1>AlertList 组件演示</h1>
    
    <div class="demo-section">
      <h2>基础用法（启用自动滚动）</h2>
      <div class="demo-item">
        <AlertList 
          title="告警详情" 
          :list-data="alertData" 
          max-height="200px"
          :auto-scroll="true"
          :scroll-speed="1"
        />
      </div>
    </div>

    <div class="demo-section">
      <h2>快速滚动（速度：2px/次）</h2>
      <div class="demo-item">
        <AlertList 
          title="快速滚动演示" 
          :list-data="alertData" 
          max-height="200px"
          :auto-scroll="true"
          :scroll-speed="2"
        />
      </div>
    </div>

    <div class="demo-section">
      <h2>禁用自动滚动</h2>
      <div class="demo-item">
        <AlertList 
          title="手动滚动" 
          :list-data="alertData" 
          max-height="200px"
          :auto-scroll="false"
        />
      </div>
    </div>

    <div class="demo-section">
      <h2>控制面板</h2>
      <div class="control-panel">
        <label>
          <input type="checkbox" v-model="enableAutoScroll" />
          启用自动滚动
        </label>
        <label>
          滚动速度：
          <input 
            type="range" 
            v-model="scrollSpeed" 
            min="0.5" 
            max="3" 
            step="0.5" 
          />
          {{ scrollSpeed }}px/次
        </label>
        <button @click="addMoreData">添加更多数据</button>
        <button @click="clearData">清空数据</button>
        <span>当前数据条数：{{ alertData.length }}</span>
      </div>
    </div>

    <div class="demo-section">
      <h2>动态数据演示</h2>
      <div class="demo-item">
        <AlertList 
          title="动态数据" 
          :list-data="alertData" 
          max-height="200px"
          :auto-scroll="enableAutoScroll"
          :scroll-speed="scrollSpeed"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AlertList from './AlertList.vue'

const enableAutoScroll = ref(true)
const scrollSpeed = ref(1)

// 模拟告警数据
const alertData = ref([
  {
    text: '2024-07-10 上午8:00 雄安园区隐患内容管理 状态 处理',
    error: true
  },
  {
    text: '2025-07-09 上海XXX区域A1门禁告警 处理中 紧急',
    error: true
  },
  {
    text: '2025-07-09 上海XXX区域A1门禁告警 处理中 紧急',
    error: true
  },
  {
    text: '2020-06-18 编辑内容编辑内容编辑内容编辑内容编辑内容 状态 结果',
    warn: true
  },
  {
    text: '2020-06-18 编辑内容编辑内容编辑内容编辑内容编辑内容 状态 结果',
    warn: true
  },
  {
    text: '2020-06-18 编辑内容编辑内容编辑内容编辑内容编辑内容 状态 结果'
  },
  {
    text: '2020-06-18 编辑内容编辑内容编辑内容编辑内容编辑内容 状态 结果'
  },
  {
    text: '2020-06-18 编辑内容编辑内容编辑内容编辑内容编辑内容 状态 结果'
  },
  {
    text: '2020-06-18 编辑内容编辑内容编辑内容编辑内容编辑内容 状态 结果'
  },
  {
    text: '2024-07-11 上午9:00 北京园区设备故障 状态 待处理',
    error: true
  },
  {
    text: '2024-07-11 上午9:30 深圳园区网络异常 状态 处理中',
    warn: true
  },
  {
    text: '2024-07-11 上午10:00 杭州园区安全检查 状态 已完成'
  },
  {
    text: '2024-07-11 上午10:30 成都园区消防演练 状态 进行中'
  },
  {
    text: '2024-07-11 上午11:00 武汉园区应急预案 状态 待审核'
  },
  {
    text: '2024-07-11 上午11:30 西安园区安全培训 状态 已完成'
  }
])

// 添加更多数据
const addMoreData = () => {
  const newData = {
    text: `2024-07-11 ${Math.floor(Math.random() * 24)}:${Math.floor(Math.random() * 60)} 新增告警信息 ${Date.now()}`,
    error: Math.random() > 0.7,
    warn: Math.random() > 0.8
  }
  alertData.value.push(newData)
}

// 清空数据
const clearData = () => {
  alertData.value = []
}
</script>

<style scoped lang="scss">
.demo-container {
  max-width: 1200px;
  padding: 20px;
  margin: 0 auto;
  font-family: Arial, sans-serif;

  h1 {
    margin-bottom: 30px;
    color: #333;
    text-align: center;
  }

  .demo-section {
    padding: 20px;
    margin-bottom: 40px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;

    h2 {
      margin-bottom: 15px;
      font-size: 18px;
      color: #555;
    }

    .demo-item {
      min-height: 250px;
      background: white;
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    .control-panel {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      align-items: center;
      padding: 15px;
      background: white;
      border-radius: 4px;

      label {
        display: flex;
        font-size: 14px;
        color: #666;
        align-items: center;
        gap: 8px;

        input[type="checkbox"] {
          margin: 0;
        }

        input[type="range"] {
          width: 100px;
        }
      }

      button {
        padding: 8px 16px;
        font-size: 14px;
        color: white;
        cursor: pointer;
        background: #007bff;
        border: none;
        border-radius: 4px;

        &:hover {
          background: #0056b3;
        }
      }

      span {
        font-size: 14px;
        font-weight: bold;
        color: #666;
      }
    }
  }
}
</style>