feat(components): station-card
This commit is contained in:
yangsy
@@ -2,10 +2,9 @@
|
|||||||
import type { Station } from '@/apis/domains';
|
import type { Station } from '@/apis/domains';
|
||||||
import { DeviceType } from '@/enums/device-type';
|
import { DeviceType } from '@/enums/device-type';
|
||||||
import { type StationAlarmCounts, type StationDevices } from '@/composables/query';
|
import { type StationAlarmCounts, type StationDevices } from '@/composables/query';
|
||||||
import { ControlOutlined } from '@vicons/antd';
|
import { MoreOutlined, EllipsisOutlined } from '@vicons/antd';
|
||||||
import { Video as VideoIcon } from '@vicons/carbon';
|
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { NCard, NTag, NButton, NIcon, useThemeVars, NSpace, NFlex, NText, NTooltip } from 'naive-ui';
|
import { NCard, NTag, NButton, NIcon, useThemeVars, NFlex, NText, NTooltip, NDropdown, type DropdownOption } from 'naive-ui';
|
||||||
import { toRefs, computed } from 'vue';
|
import { toRefs, computed } from 'vue';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
@@ -89,102 +88,106 @@ const openVideoPlatform = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const dropdownOptions: DropdownOption[] = [
|
||||||
|
{
|
||||||
|
label: '视频平台',
|
||||||
|
key: 'video-platform',
|
||||||
|
onClick: openVideoPlatform,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '设备配置',
|
||||||
|
key: 'device-config',
|
||||||
|
onClick: openDeviceConfigModal,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const selectDropdownOption = (key: string, option: DropdownOption) => {
|
||||||
|
if (typeof option['onClick'] === 'function') {
|
||||||
|
option['onClick']();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const theme = useThemeVars();
|
const theme = useThemeVars();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<NCard bordered hoverable size="small" class="station-card" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }">
|
<NCard bordered hoverable size="medium" class="station-card" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }">
|
||||||
<template #header>
|
<template #header>
|
||||||
<NTooltip v-if="station.ip" trigger="click">
|
<NTooltip v-if="station.ip" trigger="click">
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<span class="font-smaller">{{ station.name }}</span>
|
<span class="font-medium">{{ station.name }}</span>
|
||||||
</template>
|
</template>
|
||||||
<span>{{ station.ip }}</span>
|
<span>{{ station.ip }}</span>
|
||||||
</NTooltip>
|
</NTooltip>
|
||||||
<span v-else class="font-smaller">{{ station.name }}</span>
|
<span v-else class="font-medium">{{ station.name }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #header-extra>
|
<template #header-extra>
|
||||||
<NTag :type="station.online ? 'success' : 'error'" size="small">
|
<NFlex :size="4">
|
||||||
{{ station.online ? '在线' : '离线' }}
|
<NTag :type="station.online ? 'success' : 'error'" size="small">
|
||||||
</NTag>
|
{{ station.online ? '在线' : '离线' }}
|
||||||
|
</NTag>
|
||||||
|
<NDropdown trigger="click" :options="dropdownOptions" @select="selectDropdownOption">
|
||||||
|
<NButton quaternary size="tiny" :focusable="false">
|
||||||
|
<NIcon :component="MoreOutlined" />
|
||||||
|
</NButton>
|
||||||
|
</NDropdown>
|
||||||
|
</NFlex>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #default>
|
<template #default>
|
||||||
<NSpace vertical :size="8">
|
<NFlex vertical :size="6" class="metrics" :style="{ opacity: station.online ? '1' : '0.5' }">
|
||||||
<NFlex :justify="'flex-start'" class="actions">
|
<NFlex vertical :size="4" class="metric-item">
|
||||||
<NButton quaternary size="tiny" :focusable="false" :disabled="!station.online" @click="openVideoPlatform">
|
<NFlex justify="end" align="center" class="metric-line">
|
||||||
<NIcon>
|
<span class="font-small">{{ deviceCount }} 台设备</span>
|
||||||
<VideoIcon />
|
<NButton quaternary size="tiny" :focusable="false" @click="openOfflineDeviceTreeModal">
|
||||||
</NIcon>
|
<NIcon :component="EllipsisOutlined" />
|
||||||
<span class="btn-text">视频平台</span>
|
</NButton>
|
||||||
</NButton>
|
|
||||||
|
|
||||||
<NButton quaternary size="tiny" :focusable="false" :disabled="!station.online" @click="openDeviceConfigModal">
|
|
||||||
<NIcon>
|
|
||||||
<ControlOutlined />
|
|
||||||
</NIcon>
|
|
||||||
<span class="btn-text">设备配置</span>
|
|
||||||
</NButton>
|
|
||||||
</NFlex>
|
|
||||||
|
|
||||||
<NFlex vertical :size="0" class="metrics" :style="{ opacity: station.online ? '1' : '0.5' }">
|
|
||||||
<NFlex justify="space-between" align="baseline" class="metric-item">
|
|
||||||
<NText depth="3" class="metric-label" :class="[station.online ? 'clickable' : '']" @click="station.online && openOfflineDeviceTreeModal()">设备统计</NText>
|
|
||||||
<span class="metric-value">
|
|
||||||
<span :style="{ color: onlineDeviceCount > 0 ? theme.successColor : '' }">{{ onlineDeviceCount }}</span>
|
|
||||||
<NText depth="3" class="slash">/</NText>
|
|
||||||
<span :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">{{ offlineDeviceCount }}</span>
|
|
||||||
<NText depth="3" class="slash">/</NText>
|
|
||||||
<span>{{ deviceCount }}</span>
|
|
||||||
<NText depth="3" class="unit">台</NText>
|
|
||||||
</span>
|
|
||||||
</NFlex>
|
</NFlex>
|
||||||
|
<NFlex justify="end" align="center" class="metric-line">
|
||||||
<NFlex justify="space-between" align="baseline" class="metric-item">
|
<span class="font-small">
|
||||||
<NText depth="3" class="metric-label" :class="[station.online ? 'clickable' : '']" @click="station.online && openDeviceAlarmTreeModal()">告警记录</NText>
|
<span :style="{ color: onlineDeviceCount > 0 ? theme.successColor : '' }">在线 {{ onlineDeviceCount }} 台</span>
|
||||||
<span class="metric-value">
|
<NText depth="3" class="sep">·</NText>
|
||||||
<span>{{ alarmCount }}</span>
|
<span :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">离线 {{ offlineDeviceCount }} 台</span>
|
||||||
<NText depth="3" class="unit">条</NText>
|
|
||||||
</span>
|
</span>
|
||||||
|
<NButton quaternary size="tiny" :focusable="false" style="visibility: hidden">
|
||||||
|
<NIcon :component="EllipsisOutlined" />
|
||||||
|
</NButton>
|
||||||
</NFlex>
|
</NFlex>
|
||||||
</NFlex>
|
</NFlex>
|
||||||
</NSpace>
|
|
||||||
|
<NFlex justify="end" align="center" class="metric-item">
|
||||||
|
<NFlex align="center" :size="8">
|
||||||
|
<span class="font-small" :style="{ color: alarmCount > 0 ? theme.warningColor : '' }">今日 {{ alarmCount }} 条告警</span>
|
||||||
|
<NButton quaternary size="tiny" :focusable="false" @click="openDeviceAlarmTreeModal">
|
||||||
|
<NIcon :component="EllipsisOutlined" />
|
||||||
|
</NButton>
|
||||||
|
</NFlex>
|
||||||
|
</NFlex>
|
||||||
|
</NFlex>
|
||||||
</template>
|
</template>
|
||||||
</NCard>
|
</NCard>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.clickable {
|
.font-medium {
|
||||||
text-decoration: underline dashed;
|
font-size: medium;
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: v-bind('theme.iconColorHover');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-smaller {
|
.font-small {
|
||||||
font-size: smaller;
|
font-size: small;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-text {
|
.metrics {
|
||||||
margin-left: 6px;
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sep {
|
||||||
|
margin: 0 6px;
|
||||||
font-size: xx-small;
|
font-size: xx-small;
|
||||||
color: v-bind('theme.textColor3');
|
color: v-bind('theme.textColor3');
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-label {
|
.metric-line .font-small {
|
||||||
font-size: xx-small;
|
white-space: nowrap;
|
||||||
}
|
|
||||||
|
|
||||||
.metric-value {
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unit,
|
|
||||||
.slash {
|
|
||||||
margin-left: 4px;
|
|
||||||
font-size: xx-small;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user