<template>
|
<div class="info-card">
|
<div class="info-title">
|
{{
|
`${
|
dvInfo.type === 'dashboard'
|
? t('work_branch.dashboard')
|
: t('work_branch.big_data_screen')
|
}ID`
|
}}
|
</div>
|
<div class="info-content">{{ dvInfo.id }}</div>
|
<div v-if="dvInfo.creatorName" class="info-title">{{ t('visualization.create_by') }}</div>
|
<div v-if="dvInfo.creatorName" class="info-content">{{ dvInfo.creatorName }}</div>
|
<div class="info-title">{{ t('visualization.create_time') }}</div>
|
<div class="info-content">{{ timestampFormatDate(dvInfo.createTime) }}</div>
|
<div v-if="dvInfo.updateName" class="info-title">{{ t('visualization.update_by') }}</div>
|
<div v-if="dvInfo.updateName" class="info-content">{{ dvInfo.updateName }}</div>
|
<div class="info-title">{{ t('visualization.update_time') }}</div>
|
<div v-if="dvInfo.updateTime" class="info-content">
|
{{ timestampFormatDate(dvInfo.updateTime) }}
|
</div>
|
<div v-if="!dvInfo.updateTime" class="info-content">N/A</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { storeToRefs } from 'pinia'
|
import { useI18n } from '@/hooks/web/useI18n'
|
const { t } = useI18n()
|
|
const dvMainStore = dvMainStoreWithOut()
|
const { dvInfo } = storeToRefs(dvMainStore)
|
|
const timestampFormatDate = value => {
|
if (!value) {
|
return '-'
|
}
|
return new Date(value).toLocaleString()
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.info-card {
|
font-family: var(--de-custom_font, 'PingFang');
|
font-style: normal;
|
padding-left: 4px;
|
font-weight: 400;
|
line-height: 22px;
|
|
.info-title {
|
color: #646a73;
|
font-size: 14px;
|
margin-bottom: 4px;
|
}
|
.info-content {
|
color: #1f2329;
|
font-size: 14px;
|
margin-bottom: 12px;
|
}
|
|
:last-child {
|
margin-bottom: 0;
|
}
|
}
|
</style>
|
