| | |
| | | <div class="content" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)" |
| | | element-loading-text="加载中..."> |
| | | <EmptyState v-if="!sceneList.length && !loading" /> |
| | | <div class="scene-card" v-else v-for="(item, index) in sceneList" :key="index"> |
| | | <div class="scene-card" v-else v-for="(item, index) in sceneList" :key="index" @click="emit('click', item)"> |
| | | <div class="card-header"> |
| | | <el-tooltip class="title-tooltip" :content="item.sceneName || '-'" placement="top" effect="dark" |
| | | :show-after="200"> |
| | |
| | | </div> |
| | | <div class="row"> |
| | | <span class="label">有效时间</span> |
| | | </div> |
| | | <div class="row"> |
| | | <span class="value">{{ formatTimeRange(item.effectiveDateStart, item.effectiveDateEnd) }}</span> |
| | | </div> |
| | | </div> |
| | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import dayjs from 'dayjs' |
| | | import zcsbLogo from '@/assets/images/dataCockpit/zcsb.png' |
| | | import fzsbLogo from '@/assets/images/dataCockpit/fzsb.png' |
| | | import sceneLogo from '@/assets/images/dataCockpit/scene.png' |
| | | import areaLogo from '@/assets/images/dataCockpit/area.png' |
| | | import EmptyState from './EmptyState.vue' |
| | | import { newDefenseSceneManageList, sceneManageStatisticsApi } from '@/api/dataCockpit' |
| | | import { getDictionaryByCode } from '@/api/system/dictbiz' |
| | |
| | | { |
| | | name: '场景', |
| | | val: 0, |
| | | logo: zcsbLogo // 暂时复用 |
| | | logo: sceneLogo // 暂时复用 |
| | | }, |
| | | { |
| | | name: '区域', |
| | | val: 0, |
| | | logo: fzsbLogo // 暂时复用 |
| | | logo: areaLogo // 暂时复用 |
| | | } |
| | | ]) |
| | | |
| | |
| | | |
| | | const fetchStatistics = async () => { |
| | | try { |
| | | const res = await sceneManageStatisticsApi() |
| | | const params = { |
| | | time: dayjs().format('YYYY-MM-DD HH:mm:ss') |
| | | } |
| | | const res = await sceneManageStatisticsApi(params) |
| | | |
| | | if (res.data.code === 200) { |
| | | const { sceneManageCount, areaCount } = res.data.data |
| | | categoryList.value[0].val = sceneManageCount || 0 |
| | |
| | | console.error('获取场景统计失败:', error) |
| | | } |
| | | } |
| | | |
| | | const emit = defineEmits(['click']) |
| | | |
| | | const fetchList = async () => { |
| | | // 只有超过200ms才显示loading,避免闪烁 |
| | |
| | | margin-top: 10px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | |
| | | text-transform: none; |
| | | |
| | | .row { |
| | | margin-top: 10px; |
| | | |
| | | line-height: 22px; |
| | | |
| | | .label { |
| | | margin-right: 10px; |
| | | color: #D4D5D7; |
| | | } |
| | | |
| | | &:first-child { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | &:last-child { |
| | | margin-top: 0; |
| | | } |
| | | } |
| | | |
| | | .rows { |
| | | margin-top: 10px; |
| | | |
| | | display: flex; |
| | | |
| | | .col { |