242 lines
5.4 KiB
Vue
242 lines
5.4 KiB
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>
|