Files
CN_Tool_client/frontend/src/views/steady/steadyTrend/components/SteadyTrendChartTools.vue
yexb 055e69fff7 feat(steady): 完善稳态数据视图功能
- 更新纵坐标刻度算法,优化小数趋势图范围显示
- 添加稳态趋势图全屏模式和共享工具组件
- 实现多图联动的鼠标悬停竖线同步功能
- 调整主线线宽分档策略,降低最大线宽限制
- 重构稳态趋势工具栏,优化谐波次数选择逻辑
- 添加周时间周期搜索支持和自定义时间范围选择
- 完善稳态数据表格和指示器浮动面板功能
- 优化稳态趋势图性能,添加LTB采样和动画控制
- 修复数据表格打开前的趋势数据验证问题
- 统一时间轴标签格式化和网格对齐处理
2026-05-27 08:06:12 +08:00

62 lines
1.6 KiB
Vue

<template>
<div class="trend-tool-groups">
<div v-for="group in toolGroups" :key="group.key" class="trend-tool-group">
<el-tooltip v-for="item in group.items" :key="item.action" :content="getToolTooltip(item)" placement="top">
<el-button
:type="isToolActive(item.action) ? 'primary' : 'default'"
:icon="item.icon"
:disabled="isToolDisabled(item.action)"
circle
@click="emit('tool-action', item.action)"
/>
</el-tooltip>
</div>
</div>
</template>
<script setup lang="ts">
import type { SteadyTrendToolAction, SteadyTrendToolGroup, SteadyTrendToolItem } from './chartTools'
defineOptions({
name: 'SteadyTrendChartTools'
})
defineProps<{
toolGroups: SteadyTrendToolGroup[]
isToolActive: (action: SteadyTrendToolAction) => boolean
isToolDisabled: (action: SteadyTrendToolAction) => boolean
getToolTooltip: (item: SteadyTrendToolItem) => string
}>()
const emit = defineEmits<{
'tool-action': [action: SteadyTrendToolAction]
}>()
</script>
<style scoped lang="scss">
.trend-tool-groups {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
.trend-tool-group {
display: flex;
align-items: center;
gap: 4px;
}
.trend-tool-group + .trend-tool-group {
padding-left: 8px;
border-left: 1px dashed var(--el-border-color);
}
.trend-tool-group :deep(.el-button.is-circle) {
width: 28px;
height: 28px;
padding: 6px;
}
</style>