ref: 重构黄金指标数据列表，图表切换显示优化
This commit is contained in:
TsMask committed
1 parent
6502fbb17b
commit
bcff048930
5 files changed
+418
-297
No files matched your search
@@ -82,19 +82,11 @@ export async function listgoldData(query: Record<string, any>) {
|
||||
* @param query 查询参数
|
||||
* @returns object
|
||||
*/
|
||||
export async function goldData(query: Record<string, any>) {
|
||||
export async function listKPIData(query: Record<string, any>) {
|
||||
const result = await request({
|
||||
url: `/neData/kpi/data`,
|
||||
method: 'get',
|
||||
params: {
|
||||
neType: query.neType[0],
|
||||
neId: query.neType[1],
|
||||
startTime: query.beginTime,
|
||||
endTime: query.endTime,
|
||||
interval: query.particle,
|
||||
sortField: query.sortField,
|
||||
sortOrder: query.sortOrder,
|
||||
},
|
||||
params: query,
|
||||
timeout: 60_000,
|
||||
});
|
||||
|
||||
@@ -102,14 +94,14 @@ export async function goldData(query: Record<string, any>) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询网元可用黄金指标
|
||||
* 查询黄金指标数据kpi.id转换title
|
||||
* @param neType 网元类型
|
||||
* @returns object
|
||||
*/
|
||||
export async function getGoldTitleByNE(neType: string) {
|
||||
export async function getKPITitle(neType: string) {
|
||||
// 发起请求
|
||||
const result = await request({
|
||||
url: `/ne/kpi/title`,
|
||||
url: `/neData/kpi/title`,
|
||||
method: 'get',
|
||||
params: { neType },
|
||||
});
|
||||
|
||||
@@ -252,7 +252,7 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
newChart.dispose();
|
||||
newChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -708,14 +708,14 @@ export default {
|
||||
value:'Value',
|
||||
startTime:'Start Time',
|
||||
endTime:'End Time',
|
||||
particle: 'Granularity',
|
||||
interval: 'Granularity',
|
||||
timeFrame: 'Time Range',
|
||||
nullTip:'There are no statistical data within this time range',
|
||||
kpiTitle:'KPI Statistics Chart',
|
||||
allData:'Complete Data',
|
||||
makeLine:'Statistical Chart',
|
||||
kpiChartTitle:'KPI Statistics Chart',
|
||||
kpiTableTitle:'KPI Statistics Data',
|
||||
time:'Time',
|
||||
exportSure:'Confirm whether to export all statistical data',
|
||||
exportEmpty: "Export data is empty",
|
||||
}
|
||||
},
|
||||
traceManage: {
|
||||
|
||||
@@ -708,14 +708,14 @@ export default {
|
||||
value:'值',
|
||||
startTime:'开始时间',
|
||||
endTime:'结束时间',
|
||||
particle:'颗粒度',
|
||||
interval:'颗粒度',
|
||||
timeFrame:'时间范围',
|
||||
nullTip:'此时间范围内没有统计数据',
|
||||
kpiTitle:'KPI统计图表',
|
||||
allData:'完整统计数据',
|
||||
makeLine:'统计图',
|
||||
kpiChartTitle:'KPI统计图表',
|
||||
kpiTableTitle:'KPI统计数据',
|
||||
time:'时间',
|
||||
exportSure:'确认是否导出全部统计数据',
|
||||
exportEmpty: "导出数据为空",
|
||||
}
|
||||
},
|
||||
traceManage: {
|
||||
|
||||
@@ -1,35 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted, toRaw } from 'vue';
|
||||
import * as echarts from 'echarts/core';
|
||||
import {
|
||||
TooltipComponent,
|
||||
TooltipComponentOption,
|
||||
GridComponent,
|
||||
GridComponentOption,
|
||||
LegendComponent,
|
||||
LegendComponentOption,
|
||||
DataZoomComponent,
|
||||
DataZoomComponentOption,
|
||||
} from 'echarts/components';
|
||||
import { LineChart, LineSeriesOption } from 'echarts/charts';
|
||||
import { UniversalTransition } from 'echarts/features';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
|
||||
import { reactive, ref, onMounted, toRaw, markRaw, nextTick } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { message, Form, Modal } from 'ant-design-vue/lib';
|
||||
import { message, Modal } from 'ant-design-vue/lib';
|
||||
import { ColumnsType } from 'ant-design-vue/lib/table';
|
||||
import { SizeType } from 'ant-design-vue/lib/config-provider';
|
||||
import ChartLine from '@/components/ChartLine/index.vue';
|
||||
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
|
||||
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { getGoldTitleByNE, goldData } from '@/api/perfManage/goldTarget';
|
||||
import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
import { writeSheet } from '@/utils/execl-utils';
|
||||
import saveAs from 'file-saver';
|
||||
const neInfoStore = useNeInfoStore();
|
||||
const { t, currentLocale } = useI18n();
|
||||
|
||||
echarts.use([
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
DataZoomComponent,
|
||||
LineChart,
|
||||
CanvasRenderer,
|
||||
UniversalTransition,
|
||||
]);
|
||||
|
||||
type EChartsOption = echarts.ComposeOption<
|
||||
| TooltipComponentOption
|
||||
| GridComponentOption
|
||||
| LegendComponentOption
|
||||
| DataZoomComponentOption
|
||||
| LineSeriesOption
|
||||
>;
|
||||
|
||||
/**图DOM节点实例对象 */
|
||||
const kpiChartDom = ref<HTMLElement | undefined>(undefined);
|
||||
|
||||
/**图实例对象 */
|
||||
const kpiChart = ref<any>(null);
|
||||
|
||||
/**网元参数 */
|
||||
let neCascaderOptions = ref<Record<string, any>[]>([]);
|
||||
|
||||
/**记录开始结束时间 */
|
||||
let queryRangePicker = ref<[string, string]>(['', '']);
|
||||
|
||||
/**表格字段列 */
|
||||
let tableColumns = ref<ColumnsType>([]);
|
||||
|
||||
/**表格字段列排序 */
|
||||
let tableColumnsDnd = ref<ColumnsType>([]);
|
||||
|
||||
/**表格分页器参数 */
|
||||
let tablePagination = reactive({
|
||||
/**当前页数 */
|
||||
current: 1,
|
||||
/**每页条数 */
|
||||
pageSize: 20,
|
||||
/**默认的每页条数 */
|
||||
defaultPageSize: 20,
|
||||
/**指定每页可以显示多少条 */
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
/**只有一页时是否隐藏分页器 */
|
||||
hideOnSinglePage: false,
|
||||
/**是否可以快速跳转至某页 */
|
||||
showQuickJumper: true,
|
||||
/**是否可以改变 pageSize */
|
||||
showSizeChanger: true,
|
||||
/**数据总数 */
|
||||
total: 0,
|
||||
showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
|
||||
onChange: (page: number, pageSize: number) => {
|
||||
tablePagination.current = page;
|
||||
tablePagination.pageSize = pageSize;
|
||||
},
|
||||
});
|
||||
|
||||
/**表格状态类型 */
|
||||
type TabeStateType = {
|
||||
/**表格列 */
|
||||
tableColumns: object[];
|
||||
/**加载等待 */
|
||||
loading: boolean;
|
||||
/**紧凑型 */
|
||||
@@ -37,7 +101,9 @@ type TabeStateType = {
|
||||
/**搜索栏 */
|
||||
seached: boolean;
|
||||
/**记录数据 */
|
||||
data: object[];
|
||||
data: Record<string, any>[];
|
||||
/**显示表格 */
|
||||
showTable: boolean;
|
||||
};
|
||||
|
||||
/**表格状态 */
|
||||
@@ -47,6 +113,7 @@ let tableState: TabeStateType = reactive({
|
||||
size: 'middle',
|
||||
seached: true,
|
||||
data: [],
|
||||
showTable: false,
|
||||
});
|
||||
|
||||
/**表格紧凑型变更操作 */
|
||||
@@ -56,295 +123,370 @@ function fnTableSize({ key }: MenuInfo) {
|
||||
|
||||
/**查询参数 */
|
||||
let queryParams: any = reactive({
|
||||
/**卡片切换Flag */
|
||||
cardFlag: 0, //0-显示统计图 1-显示统计表
|
||||
/**告警设备类型 */
|
||||
/**网元类型 */
|
||||
neType: '',
|
||||
/**告警网元标识 */
|
||||
/**网元标识 */
|
||||
neId: '',
|
||||
/**颗粒度 */
|
||||
particle: '15',
|
||||
beginTime: '',
|
||||
interval: 900,
|
||||
/**开始时间 */
|
||||
startTime: '',
|
||||
/**结束时间 */
|
||||
endTime: '',
|
||||
/**排序字段 */
|
||||
sortField: 'timeGroup',
|
||||
/**排序方式 */
|
||||
sortOrder: 'asc',
|
||||
sortOrder: 'desc',
|
||||
});
|
||||
|
||||
/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
|
||||
function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
|
||||
tableState.loading = true;
|
||||
const { columnKey, order } = sorter;
|
||||
if (!order) return;
|
||||
if (order.startsWith(queryParams.sortOrder)) return;
|
||||
|
||||
if (order) {
|
||||
queryParams.sortField = columnKey;
|
||||
queryParams.sortOrder = order.replace('end', '');
|
||||
} else {
|
||||
queryParams.sortOrder = 'asc';
|
||||
}
|
||||
fnMakeTable(1);
|
||||
}
|
||||
|
||||
/**图表显示数据 */
|
||||
const chartsOption = reactive({
|
||||
/**性能指标 */
|
||||
perfChart: {},
|
||||
});
|
||||
fnGetList();
|
||||
}
|
||||
|
||||
/**对象信息状态类型 */
|
||||
type StateType = {
|
||||
/**网元类型 */
|
||||
neType: string[];
|
||||
/**制表网元类型 */
|
||||
designNeType: string;
|
||||
/**黄金指标集 tree */
|
||||
designTreeData: any[];
|
||||
/**表单数据 */
|
||||
from: Record<string, any>;
|
||||
/**图表配置数据 */
|
||||
chartsOption: Record<string, any>;
|
||||
};
|
||||
|
||||
/**对象信息状态 */
|
||||
let state: StateType = reactive({
|
||||
neType: [],
|
||||
designNeType: '',
|
||||
designTreeData: [],
|
||||
from: {
|
||||
uploadLoading: false,
|
||||
sendLoading: false,
|
||||
},
|
||||
chartsOption: {},
|
||||
});
|
||||
|
||||
/**网元类型选择对应修改 */
|
||||
function fnNeChange(keys: any, _: any) {
|
||||
// 不是同类型时需要重新加载
|
||||
if (state.designNeType !== keys[0]) {
|
||||
state.designTreeData = [];
|
||||
queryParams.cardFlag = 0;
|
||||
fnGetList();
|
||||
}
|
||||
function fnChangShowType() {
|
||||
tableState.showTable = !tableState.showTable;
|
||||
}
|
||||
|
||||
/**查询可选命令列表 */
|
||||
function fnGetList() {
|
||||
const neType = queryParams.neType[0];
|
||||
state.designNeType = neType;
|
||||
/**
|
||||
* 数据列表导出
|
||||
*/
|
||||
function fnRecordExport() {
|
||||
Modal.confirm({
|
||||
title: 'Tip',
|
||||
content: t('views.perfManage.goldTarget.exportSure'),
|
||||
onOk() {
|
||||
const key = 'exportKPI';
|
||||
message.loading({ content: t('common.loading'), key });
|
||||
|
||||
if (tableState.data.length <= 0) {
|
||||
message.error({
|
||||
content: t('views.perfManage.goldTarget.exportEmpty'),
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const tableColumnsTitleArr: string[] = [];
|
||||
const tableColumnsKeyArr: string[] = [];
|
||||
for (const columns of tableColumnsDnd.value) {
|
||||
tableColumnsTitleArr.push(`${columns.title}`);
|
||||
tableColumnsKeyArr.push(`${columns.key}`);
|
||||
}
|
||||
|
||||
const kpiDataArr = [];
|
||||
for (const item of tableState.data) {
|
||||
const kpiData: Record<string, any> = {};
|
||||
const keys = Object.keys(item);
|
||||
for (let i = 0; i <= tableColumnsKeyArr.length; i++) {
|
||||
for (const key of keys) {
|
||||
if (tableColumnsKeyArr[i] === key) {
|
||||
const title = tableColumnsTitleArr[i];
|
||||
kpiData[title] = item[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
kpiDataArr.push(kpiData);
|
||||
}
|
||||
|
||||
writeSheet(kpiDataArr, 'KPI', { header: tableColumnsTitleArr })
|
||||
.then(fileBlob => saveAs(fileBlob, `kpi_data_${Date.now()}.xlsx`))
|
||||
.finally(() => {
|
||||
message.success({
|
||||
content: t('common.msgSuccess', { msg: t('common.export') }),
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**查询数据列表表头 */
|
||||
function fnGetListTitle() {
|
||||
// 当前语言
|
||||
var language = currentLocale.value.split('_')[0];
|
||||
if (language === 'zh') language = 'cn';
|
||||
getGoldTitleByNE(neType).then(res => {
|
||||
|
||||
// 获取表头文字
|
||||
getKPITitle(state.neType[0])
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
// 构建树结构
|
||||
const treeArr: Record<string, any>[] = [];
|
||||
tableColumns.value = [];
|
||||
const columns: ColumnsType = [
|
||||
{
|
||||
title: t('views.perfManage.perfData.neName'),
|
||||
dataIndex: 'neName',
|
||||
key: 'neName',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
for (const item of res.data) {
|
||||
const id = item['id'];
|
||||
const kpiDisplay = item[`${language}Title`];
|
||||
const kpiValue = item[`kpiId`];
|
||||
treeArr.push({
|
||||
key: kpiValue,
|
||||
columns.push({
|
||||
title: kpiDisplay,
|
||||
dataIndex: kpiValue,
|
||||
align: 'left',
|
||||
key: kpiValue,
|
||||
resizable: true,
|
||||
width: 100,
|
||||
minWidth: 150,
|
||||
maxWidth: 300,
|
||||
});
|
||||
}
|
||||
state.designTreeData = treeArr;
|
||||
columns.push({
|
||||
title: t('views.perfManage.goldTarget.time'),
|
||||
dataIndex: 'timeGroup',
|
||||
align: 'left',
|
||||
fixed: 'right',
|
||||
key: 'timeGroup',
|
||||
sorter: true,
|
||||
width: 100,
|
||||
});
|
||||
nextTick(() => {
|
||||
tableColumns.value = columns;
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
message.warning({
|
||||
content: t('common.getInfoFail'),
|
||||
duration: 2,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.then(result => {
|
||||
result && fnGetList();
|
||||
});
|
||||
fnDesign();
|
||||
}
|
||||
|
||||
/**根据 key 查找对应的 title */
|
||||
function findTitleByKey(key: string): string | undefined {
|
||||
const item = state.designTreeData.find(item => item.key === key);
|
||||
return item ? item.title : key;
|
||||
}
|
||||
|
||||
/**筛选条件进行制图 */
|
||||
function fnMakeTable(flag: any) {
|
||||
queryParams.cardFlag = flag;
|
||||
fnDesign();
|
||||
}
|
||||
|
||||
/**筛选条件进行制图 */
|
||||
function fnDesign() {
|
||||
//当前界面是表格界面
|
||||
const columnsArr = state.designTreeData.map(item => {
|
||||
return {
|
||||
title: item.title,
|
||||
dataIndex: item.key,
|
||||
align: 'center',
|
||||
};
|
||||
});
|
||||
tableState.tableColumns = columnsArr;
|
||||
tableState.tableColumns.unshift({
|
||||
title: t('views.perfManage.perfData.neName'),
|
||||
dataIndex: 'neName',
|
||||
align: 'center',
|
||||
});
|
||||
tableState.tableColumns.push({
|
||||
title: t('views.perfManage.goldTarget.time'),
|
||||
dataIndex: 'timeGroup',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
key: 'timeGroup',
|
||||
sorter: true,
|
||||
});
|
||||
if (!queryRangePicker.value) {
|
||||
queryRangePicker.value = ['', ''];
|
||||
}
|
||||
queryParams.beginTime = queryRangePicker.value[0];
|
||||
/**查询数据列表 */
|
||||
function fnGetList() {
|
||||
if (tableState.loading) return;
|
||||
tableState.loading = true;
|
||||
queryParams.neType = state.neType[0];
|
||||
queryParams.neId = state.neType[1];
|
||||
queryParams.startTime = queryRangePicker.value[0];
|
||||
queryParams.endTime = queryRangePicker.value[1];
|
||||
let goldXDate: any = [];
|
||||
let goldYData: any = [];
|
||||
let hideAll: any = {};
|
||||
goldData(queryParams)
|
||||
listKPIData(toRaw(queryParams))
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
if (res.data.length > 0) {
|
||||
console.log(res.data);
|
||||
tableState.loading = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
tablePagination.total = res.data.length;
|
||||
tableState.data = res.data;
|
||||
goldXDate = res.data.map((item: any) => item.timeGroup);
|
||||
goldYData = Object.keys(res.data[0])
|
||||
.filter(key => !['timeGroup', 'neName', 'startIndex'].includes(key))
|
||||
.map(key => {
|
||||
const title: any = findTitleByKey(key);
|
||||
hideAll[title] = false;
|
||||
return {
|
||||
name: title,
|
||||
data: res.data.map((item: any) => parseInt(item[key])),
|
||||
};
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
.then(result => {
|
||||
if (result) {
|
||||
if (kpiChart.value == null) {
|
||||
fnRanderChart();
|
||||
} else {
|
||||
tableState.data = [];
|
||||
state.designTreeData.forEach((item: any) => {
|
||||
goldYData.push({ name: item.title, data: [] });
|
||||
fnRanderChartData();
|
||||
}
|
||||
}
|
||||
});
|
||||
message.warning({
|
||||
content: t('views.perfManage.goldTarget.nullTip'),
|
||||
duration: 2,
|
||||
}
|
||||
|
||||
/**绘制图表 */
|
||||
function fnRanderChart() {
|
||||
const container: HTMLElement | undefined = kpiChartDom.value;
|
||||
if (!container) return;
|
||||
kpiChart.value = markRaw(echarts.init(container, 'light'));
|
||||
|
||||
fnRanderChartData();
|
||||
|
||||
// 创建 ResizeObserver 实例
|
||||
var observer = new ResizeObserver(entries => {
|
||||
if (kpiChart.value) {
|
||||
kpiChart.value.resize();
|
||||
}
|
||||
});
|
||||
// 监听元素大小变化
|
||||
observer.observe(container);
|
||||
}
|
||||
|
||||
/**面积颜色 */
|
||||
const areaStyleColor = [
|
||||
{
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(22, 119, 255, .5)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(22, 119, 255, 0)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
{
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(82, 196, 26, .5)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(82, 196, 26, 0)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
{
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(250, 173, 20, .5)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(250, 173, 20, 0)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
{
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 77, 79, 0.5)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 77, 79, 0)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
];
|
||||
|
||||
/**图表数据渲染 */
|
||||
function fnRanderChartData() {
|
||||
if (kpiChart.value == null && tableState.data.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 图标参数
|
||||
const option = {
|
||||
xDatas: goldXDate,
|
||||
yDatas: goldYData,
|
||||
const xDatas: string[] = [];
|
||||
const yDatas: Record<string, any>[] = [];
|
||||
|
||||
const tableColumnsKeyArr: string[] = [];
|
||||
|
||||
const columnsLen = tableColumnsDnd.value.length;
|
||||
for (let i = 0; i < columnsLen; i++) {
|
||||
const columns = tableColumnsDnd.value[i];
|
||||
if (
|
||||
columns.key === 'neName' ||
|
||||
columns.key === 'startIndex' ||
|
||||
columns.key === 'timeGroup'
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
yDatas.push({
|
||||
name: `${columns.title}`,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
sampling: 'lttb',
|
||||
itemStyle: {
|
||||
color: 'rgb(255, 70, 131)',
|
||||
},
|
||||
areaStyle: areaStyleColor[i % columnsLen],
|
||||
data: [],
|
||||
});
|
||||
tableColumnsKeyArr.push(`${columns.key}`);
|
||||
}
|
||||
|
||||
// 用降序就反转
|
||||
let orgData = tableState.data;
|
||||
if (queryParams.sortOrder === 'desc') {
|
||||
orgData = orgData.toReversed();
|
||||
}
|
||||
for (const item of orgData) {
|
||||
xDatas.push(item['timeGroup']);
|
||||
const keys = Object.keys(item);
|
||||
for (let i = 0; i < tableColumnsKeyArr.length; i++) {
|
||||
for (const key of keys) {
|
||||
if (tableColumnsKeyArr[i] === key) {
|
||||
yDatas[i].data.push(+item[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log(queryParams.sortOrder, xDatas, yDatas);
|
||||
|
||||
const option: EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (datas: any) {
|
||||
let res = datas[0].name + '<br/>';
|
||||
for (const item of datas) {
|
||||
res += `${item.marker} ${item.seriesName}:${item.data}<br/>`;
|
||||
}
|
||||
return res;
|
||||
position: function (pt: any) {
|
||||
return [pt[0], '10%'];
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: xDatas,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, '100%'],
|
||||
},
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
// left: 'left',
|
||||
type: 'scroll',
|
||||
orient: 'vertical', // vertical
|
||||
orient: 'vertical',
|
||||
top: 40,
|
||||
right: 20,
|
||||
//itemWidth: 20,
|
||||
itemWidth: 20,
|
||||
itemGap: 25,
|
||||
textStyle: {
|
||||
color: '#646A73',
|
||||
},
|
||||
icon: 'circle',
|
||||
selected: hideAll,
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '30%',
|
||||
bottom: '20%',
|
||||
},
|
||||
yAxis: [
|
||||
{ type: 'value', splitNumber: 4, axisLabel: { fontSize: 10 } },
|
||||
],
|
||||
};
|
||||
chartsOption.perfChart = option;
|
||||
|
||||
//处理表格数据
|
||||
} else {
|
||||
message.warning({
|
||||
content: t('common.getInfoFail'),
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
tableState.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出全部
|
||||
*/
|
||||
function fnExportAll() {
|
||||
Modal.confirm({
|
||||
title: 'Tip',
|
||||
content: t('views.perfManage.goldTarget.exportSure'),
|
||||
onOk() {
|
||||
const key = 'exportAlarm';
|
||||
message.loading({ content: t('common.loading'), key });
|
||||
let sortArr: any = [];
|
||||
tableColumnsDnd.value.forEach((item: any) => {
|
||||
if (item.dataIndex) sortArr.push(item.title);
|
||||
});
|
||||
|
||||
// 排序字段
|
||||
const sortData = {
|
||||
header: sortArr,
|
||||
};
|
||||
if (!queryRangePicker.value) {
|
||||
queryRangePicker.value = ['', ''];
|
||||
}
|
||||
queryParams.beginTime = queryRangePicker.value[0];
|
||||
queryParams.endTime = queryRangePicker.value[1];
|
||||
goldData(queryParams).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('common.msgSuccess', { msg: t('common.export') }),
|
||||
key,
|
||||
duration: 3,
|
||||
});
|
||||
let realArr: any = [];
|
||||
res.data.map((item: any) => {
|
||||
const chineseData: any = {};
|
||||
for (const key in item) {
|
||||
const title: any = findTitleByKey(key);
|
||||
if (['timeGroup', 'neName', 'startIndex'].includes(title)) {
|
||||
switch (title) {
|
||||
case 'timeGroup':
|
||||
chineseData[t('views.perfManage.goldTarget.time')] =
|
||||
item[key];
|
||||
break;
|
||||
case 'neName':
|
||||
chineseData[t('views.perfManage.perfData.neName')] =
|
||||
item[key];
|
||||
break;
|
||||
case 'startIndex':
|
||||
break;
|
||||
}
|
||||
} else chineseData[title] = item[key];
|
||||
}
|
||||
realArr.push(chineseData);
|
||||
});
|
||||
|
||||
writeSheet(realArr, 'gold', sortData).then(fileBlob =>
|
||||
saveAs(fileBlob, `gold_${Date.now()}.xlsx`)
|
||||
);
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
key,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
});
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
start: 90,
|
||||
end: 100,
|
||||
},
|
||||
});
|
||||
{
|
||||
start: 90,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: yDatas,
|
||||
};
|
||||
kpiChart.value.setOption(option);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -365,26 +507,27 @@ onMounted(() => {
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 默认选择AMF
|
||||
// 默认选择UPF
|
||||
const item = neCascaderOptions.value.find(s => s.value === 'UPF');
|
||||
if (item && item.children) {
|
||||
const info = item.children[0];
|
||||
queryParams.neType = [info.neType, info.neId];
|
||||
state.neType = [info.neType, info.neId];
|
||||
queryParams.neType = info.neType;
|
||||
queryParams.neId = info.neId;
|
||||
} else {
|
||||
const info = neCascaderOptions.value[0].children[0];
|
||||
queryParams.neType = [info.neType, info.neId];
|
||||
state.neType = [info.neType, info.neId];
|
||||
queryParams.neType = info.neType;
|
||||
queryParams.neId = info.neId;
|
||||
}
|
||||
const initTime: Date = new Date();
|
||||
const startTime: Date = new Date(initTime);
|
||||
startTime.setHours(0, 0, 0, 0); // 设置为今天的0点
|
||||
const endTime: Date = new Date(initTime);
|
||||
endTime.setHours(23, 59, 59, 59); // 设置为今天的12点
|
||||
|
||||
queryRangePicker.value = [
|
||||
parseDateToStr(startTime),
|
||||
parseDateToStr(endTime),
|
||||
];
|
||||
fnGetList();
|
||||
// 查询当天数据
|
||||
const nowDate: Date = new Date();
|
||||
nowDate.setHours(0, 0, 0, 0); // 设置为今天的0点
|
||||
queryRangePicker.value[0] = '2024-01-31 00:00:00'; //parseDateToStr(nowDate);
|
||||
nowDate.setHours(23, 59, 59, 59); // 设置为今天的12点
|
||||
queryRangePicker.value[1] = parseDateToStr(nowDate);
|
||||
fnGetListTitle();
|
||||
}
|
||||
} else {
|
||||
message.warning({
|
||||
@@ -412,9 +555,8 @@ onMounted(() => {
|
||||
:label="t('views.traceManage.task.neType')"
|
||||
>
|
||||
<a-cascader
|
||||
v-model:value="queryParams.neType"
|
||||
v-model:value="state.neType"
|
||||
:options="neCascaderOptions"
|
||||
@change="fnNeChange"
|
||||
:allow-clear="false"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
/>
|
||||
@@ -436,11 +578,11 @@ onMounted(() => {
|
||||
</a-col>
|
||||
<a-col :lg="4" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.perfManage.goldTarget.particle')"
|
||||
name="particle"
|
||||
:label="t('views.perfManage.goldTarget.interval')"
|
||||
name="interval"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="queryParams.particle"
|
||||
v-model:value="queryParams.interval"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
:options="[
|
||||
{ label: '5S', value: 5 },
|
||||
@@ -456,7 +598,7 @@ onMounted(() => {
|
||||
<a-col :lg="2" :md="12" :xs="24">
|
||||
<a-form-item>
|
||||
<a-space :size="8">
|
||||
<a-button type="primary" @click.prevent="fnDesign()">
|
||||
<a-button type="primary" @click.prevent="fnGetListTitle()">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
{{ t('common.search') }}
|
||||
</a-button>
|
||||
@@ -467,25 +609,34 @@ onMounted(() => {
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<template v-if="queryParams.cardFlag">
|
||||
<a-card :bordered="false" :body-style="{ padding: '0px' }">
|
||||
<!-- 插槽-卡片左侧侧 -->
|
||||
<template #title>
|
||||
<a-space :size="8" align="center">
|
||||
<a-button type="primary" @click.prevent="fnMakeTable(0)">
|
||||
<template #icon> <area-chart-outlined /> </template>
|
||||
{{ t('views.perfManage.goldTarget.kpiTitle') }}
|
||||
<a-button type="primary" @click.prevent="fnChangShowType()">
|
||||
<template #icon> <AreaChartOutlined /> </template>
|
||||
{{
|
||||
tableState.showTable
|
||||
? t('views.perfManage.goldTarget.kpiChartTitle')
|
||||
: t('views.perfManage.goldTarget.kpiTableTitle')
|
||||
}}
|
||||
</a-button>
|
||||
<a-button type="primary" @click.prevent="fnExportAll()">
|
||||
<template #icon> <export-outlined /> </template>
|
||||
{{ t('views.faultManage.activeAlarm.exportAll') }}
|
||||
<a-button
|
||||
type="dashed"
|
||||
@click.prevent="fnRecordExport()"
|
||||
v-show="tableState.showTable"
|
||||
>
|
||||
<template #icon>
|
||||
<ExportOutlined />
|
||||
</template>
|
||||
{{ t('common.export') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<a-space :size="8" align="center">
|
||||
<a-space :size="8" align="center" v-show="tableState.showTable">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.searchBarText') }}</template>
|
||||
<a-switch
|
||||
@@ -502,7 +653,8 @@ onMounted(() => {
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<TableColumnsDnd
|
||||
:columns="tableState.tableColumns"
|
||||
v-if="tableColumns.length > 0"
|
||||
:columns="tableColumns"
|
||||
v-model:columns-dnd="tableColumnsDnd"
|
||||
></TableColumnsDnd>
|
||||
<a-tooltip>
|
||||
@@ -534,50 +686,27 @@ onMounted(() => {
|
||||
|
||||
<!-- 表格列表 -->
|
||||
<a-table
|
||||
v-show="tableState.showTable"
|
||||
class="table"
|
||||
row-key="id"
|
||||
:columns="tableColumnsDnd"
|
||||
:loading="tableState.loading"
|
||||
:data-source="tableState.data"
|
||||
:size="tableState.size"
|
||||
:pagination="false"
|
||||
:pagination="tablePagination"
|
||||
:scroll="{ x: tableColumnsDnd.length * 200, y: 450 }"
|
||||
@resizeColumn="(w:number, col:any) => (col.width = w)"
|
||||
:show-expand-column="false"
|
||||
@change="fnTableChange"
|
||||
>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }" v-else>
|
||||
<!-- 插槽-卡片左侧侧 -->
|
||||
<template #title>{{
|
||||
t('views.perfManage.goldTarget.kpiTitle')
|
||||
}}</template>
|
||||
<!-- 插槽-卡片右侧 -->
|
||||
<template #extra>
|
||||
<a-space :size="8" align="center">
|
||||
<a-button type="default" size="small" @click.prevent="fnMakeTable(1)">
|
||||
<template #icon> <bars-outlined /> </template>
|
||||
{{ t('views.perfManage.goldTarget.allData') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
<div class="chart">
|
||||
<ChartLine
|
||||
:option="chartsOption.perfChart"
|
||||
:dataZoom="false"
|
||||
height="400px"
|
||||
></ChartLine>
|
||||
<!-- 图表 -->
|
||||
<div style="padding: 24px" v-show="!tableState.showTable">
|
||||
<div ref="kpiChartDom" style="height: 450px; width: 100%"></div>
|
||||
</div>
|
||||
</a-card>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
Reference in new issue
Block a user