OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix:修复其他指标列表无法打开，文本错乱的问题

Browse Source
This commit is contained in:
zhongzm
2024-11-04 16:04:11 +08:00
parent 347c9f1d3b
commit d8487d7cd7
1 changed files with 23 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/perfManage/kpiOverView/index.vue
View File

@@ -3,30 +3,17 @@ import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
import * as echarts from 'echarts/core';
import { LegendComponent } from 'echarts/components';
import { LineChart, BarChart } from 'echarts/charts';
import {
GridComponent,
TooltipComponent,
TitleComponent,
} from 'echarts/components';
import { GridComponent, TooltipComponent, TitleComponent, } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
import useI18n from '@/hooks/useI18n';
import { message } from 'ant-design-vue';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import { generateColorRGBA } from '@/utils/generate-utils';
import {
BarChartOutlined,
LineChartOutlined,
UnorderedListOutlined,
DownOutlined,
MoreOutlined,
} from '@ant-design/icons-vue';
import { BarChartOutlined, LineChartOutlined, UnorderedListOutlined, DownOutlined, MoreOutlined } from '@ant-design/icons-vue';
// 在这里定义 ChartDataItem 接口
interface ChartDataItem {
@@ -315,9 +302,9 @@ const updateChart = () => {
data:
chartData.value.length > 0
? chartData.value.map(item => {
// 将时间戳转换为包含时分秒的格式
return dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss');
})
// 将时间戳转换为包含时分秒的格式
return dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss');
})
: [''],
axisLabel: {
formatter: (value: string) => {
@@ -325,7 +312,7 @@ const updateChart = () => {
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
},
rotate: 0,
interval: 'auto', // 自动计算显示间隔
interval: 'auto', // 自动计算显示<EFBFBD><EFBFBD>隔
align: 'right',
},
},
@@ -337,7 +324,7 @@ const updateChart = () => {
},
// 添加自动计算的分割段数
splitNumber: 5,
// 添加自动计算的最小/最大值围
// 添加自动计算的最小/最大值范围
scale: true,
},
series: series, //配置数据
@@ -511,7 +498,7 @@ const fetchSpecificKPI = async () => {
if (validSavedKPIs.length > 0) {
selectedKPIs.value = validSavedKPIs;
} else {
// 如果没有有效的保存选择，则默认选择<EFBFBD><EFBFBD>要指标
// 如果没有有效的保存选择，则默认选择其他指标
selectedKPIs.value = Object.values(TARGET_KPI_IDS).flat();
}
} else {
@@ -653,26 +640,24 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
</template>
{{
chartType === 'line'
? t('views.perfManage.kpiOverView.changeLine')
: t('views.perfManage.kpiOverView.changeBar')
? t('views.perfManage.kpiOverView.changeBar')
: t('views.perfManage.kpiOverView.changeLine')
}}
</a-button>
<a-form-item
:label="
isRealtime
? t('views.dashboard.cdr.realTimeDataStart')
: t('views.dashboard.cdr.realTimeDataStop')
? t('views.dashboard.cdr.realTimeDataStop')
: t('views.dashboard.cdr.realTimeDataStart')
"
>
<a-switch v-model:checked="isRealtime" @change="toggleRealtime" />
</a-form-item>
</div>
<div id="chartContainer" class="chart-container"></div>
<!-- 修改指标选择对话框 -->
<a-modal
v-model:visible="isModalVisible"
title="选择要显示的指标"
:title="t('views.perfManage.kpiOverView.chooseShowMetrics')"
@ok="handleModalOk"
@cancel="handleModalCancel"
width="800px"
@@ -690,15 +675,8 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
<span class="card-title">{{ neType.toUpperCase() }}</span>
</template>
<template #extra>
<a-dropdown v-if="secondaryKPIs[neType]?.length" trigger="click">
<a-button type="link" size="small">
<more-outlined />
<down-outlined />
<span class="secondary-count"
>({{ secondaryKPIs[neType].length }})</span
>
</a-button>
<template>
<a-dropdown v-if="secondaryKPIs[neType]?.length">
<template #overlay>
<div class="secondary-kpi-menu" @click.stop>
<div
v-for="kpi in secondaryKPIs[neType]"
@@ -709,13 +687,7 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
<a-checkbox
:value="kpi.kpiId"
:checked="tempSelectedKPIs.includes(kpi.kpiId)"
@change="
(e:any) =>
handleSecondaryKPIChange(
kpi.kpiId,
e.target.checked
)
"
@change="(e:any) => handleSecondaryKPIChange(kpi.kpiId, e.target.checked)"
@click.stop
>
{{ kpi.title }}
@@ -723,6 +695,11 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
</div>
</div>
</template>
<a-button type="link" size="small">
<more-outlined />
<down-outlined />
<span class="secondary-count">({{ secondaryKPIs[neType].length }})</span>
</a-button>
</a-dropdown>
</template>
<div class="ne-type-items">
@@ -744,7 +721,6 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
</template>
<style scoped>
/* 基础布局样式 */
.kpi-overview {
padding: 20px;
}
@@ -760,13 +736,6 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
height: calc(100vh - 160px);
width: 100%;
}
/* 指标选择对话框样式 */
.kpi-checkbox-list {
padding: 8px;
width: 100%;
}
/* 网元指标列表样式 */
.ne-type-items {
display: grid;
@@ -782,14 +751,13 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
text-overflow: ellipsis;
white-space: nowrap;
}
/* 其他指标下拉菜单样式 */
.secondary-kpi-menu {
background: #fff;
padding: 4px 0;
border-radius: 2px;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08);
0 6px 16px 0 rgba(0, 0, 0, 0.08);
max-height: 300px;
overflow-y: auto;
min-width: 200px;