| | |
| | | <!-- 搜索区(设计稿红框) --> |
| | | <div class="search-box"> |
| | | <!-- 关键字 --> |
| | | <el-input v-model="query.keyword" class="ztzf-data-cockpit-search-input" placeholder="请输入数据名称" clearable |
| | | @keyup.enter="onSearch"> |
| | | <el-input v-model="query.keyword" class="command-input" placeholder="请输入数据名称" clearable |
| | | @keyup.enter="onSearch" @clear="onSearch"> |
| | | </el-input> |
| | | |
| | | <!-- 日期范围 --> |
| | | <el-date-picker v-model="query.dateRange" |
| | | class="ztzf-data-cockpit-date-picker" |
| | | popper-class="ztzf-data-cockpit-date-picker-popper" |
| | | 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" |
| | |
| | | </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(false) |
| | | const loading = ref(true) |
| | | const minLoadingMs = 400 |
| | | |
| | | // 查询条件:keyword + dateRange(YYYY-MM-DD数组) |
| | |
| | | } |
| | | |
| | | const fetchHistoryWarning = async () => { |
| | | |
| | | const startAt = Date.now() |
| | | loading.value = true |
| | | try { |
| | | const [startTime, endTime] = query.value.dateRange || [] |
| | | const [startTime, endTime] = dateRangeFormat(query.value.dateRange) || [] |
| | | const keyword = (query.value.keyword || '').trim() |
| | | const params = { |
| | | current: 1, |
| | |
| | | flex-direction: column; |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | |
| | | .search-box { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | |
| | | ::v-deep(.ztzf-data-cockpit-date-picker) { |
| | | ::v-deep(.command-date-picker) { |
| | | width: 100% !important; |
| | | } |
| | | } |
| | |
| | | .list-content { |
| | | height: 0; |
| | | flex: 1; |
| | | overflow-y: auto; |
| | | } |
| | | } |
| | | |