| | |
|---|
| | | <template> |
|---|
| | | <div |
|---|
| | | class="history-warning" |
|---|
| | | v-loading="loading" |
|---|
| | | element-loading-background="rgba(5, 5, 15, 0.6)" |
|---|
| | | element-loading-text="加载中..." |
|---|
| | | > |
|---|
| | | <div class="history-warning" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)" |
|---|
| | | element-loading-text="加载中..."> |
|---|
| | | <!-- 搜索区（设计稿红框） --> |
|---|
| | | <div class="search-box"> |
|---|
| | | <!-- 关键字 --> |
|---|
| | | <el-input v-model="query.keyword" class="command-input" placeholder="请输入数据名称" clearable |
|---|
| | | @keyup.enter="onSearch"> |
|---|
| | | @keyup.enter="onSearch" @clear="onSearch"> |
|---|
| | | </el-input> |
|---|
| | | |
|---|
| | | <!-- 日期范围 --> |
|---|
| | | <el-date-picker v-model="query.dateRange" |
|---|
| | | class="command-date-picker" |
|---|
| | | popper-class="command-date-picker-popper" |
|---|
| | | type="daterange" |
|---|
| | | range-separator="~" |
|---|
| | | <el-date-picker v-model="query.dateRange" class="command-date-picker" |
|---|
| | | popper-class="command-date-picker-popper" type="daterange" range-separator="~" |
|---|
| | | start-placeholder="创建开始日期" end-placeholder="结束日期" format="YYYY年MM月DD日" value-format="YYYY-MM-DD" |
|---|
| | | :clearable="true" @change="onSearch"> |
|---|
| | | </el-date-picker> |
|---|
| | |
|---|
| | | <!-- 列表 --> |
|---|
| | | <div class="list-content"> |
|---|
| | | <EmptyState v-if="!filteredList.length" /> |
|---|
| | | <HistoryTemplate |
|---|
| | | v-else |
|---|
| | | v-for="(item, ind) in filteredList" |
|---|
| | | :key="item.id || ind" |
|---|
| | | :data="item" |
|---|
| | | @click="onCardClick" |
|---|
| | | /> |
|---|
| | | <HistoryTemplate v-else v-for="(item, ind) in filteredList" :key="item.id || ind" :data="item" |
|---|
| | | @click="onCardClick" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { dateRangeFormat } from '@ztzf/utils' |
|---|
| | | import { ref, computed, onMounted } from 'vue' |
|---|
| | | import HistoryTemplate from './templateComponents/HistoryTemplate.vue' |
|---|
| | | import { alarmLogApi } from '@/api/dataCockpit' |
|---|
| | | import EmptyState from './EmptyState.vue' |
|---|
| | | |
|---|
| | | const historyWarningData = ref([]) |
|---|
| | | const loading = ref(true) |
|---|
| | | const minLoadingMs = 400 |
|---|
| | | const loading = ref(false) |
|---|
| | | const loadingTimer = ref(null) |
|---|
| | | |
|---|
| | | // 查询条件：keyword + dateRange(YYYY-MM-DD数组) |
|---|
| | | const query = ref({ |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | const fetchHistoryWarning = async () => { |
|---|
| | | const startAt = Date.now() |
|---|
| | | loading.value = true |
|---|
| | | |
|---|
| | | // 只有超过200ms才显示loading，避免闪烁 |
|---|
| | | loadingTimer.value = setTimeout(() => { |
|---|
| | | loading.value = true |
|---|
| | | }, 200) |
|---|
| | | |
|---|
| | | try { |
|---|
| | | const [startTime, endTime] = query.value.dateRange || [] |
|---|
| | | const [startTime, endTime] = dateRangeFormat(query.value.dateRange) || [] |
|---|
| | | const keyword = (query.value.keyword || '').trim() |
|---|
| | | const params = { |
|---|
| | | current: 1, |
|---|
| | |
|---|
| | | const records = res?.data?.data?.records ?? [] |
|---|
| | | historyWarningData.value = records |
|---|
| | | } finally { |
|---|
| | | const elapsed = Date.now() - startAt |
|---|
| | | if (elapsed < minLoadingMs) { |
|---|
| | | await new Promise((resolve) => setTimeout(resolve, minLoadingMs - elapsed)) |
|---|
| | | } |
|---|
| | | if (loadingTimer.value) clearTimeout(loadingTimer.value) |
|---|
| | | loading.value = false |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | overflow-y: auto; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
