From 36ac9d0a5fe62ba195e7d3c2f1019e7e9c420751 Mon Sep 17 00:00:00 2001 From: lai <371757574@qq.com> Date: Wed, 6 Dec 2023 18:13:21 +0800 Subject: [PATCH] =?UTF-8?q?---=E9=BB=84=E9=87=91=E6=8C=87=E6=A0=87?= =?UTF-8?q?=E5=88=9D=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/perfManage/goldTarget.ts | 23 +- src/i18n/locales/en-US.ts | 2 + src/i18n/locales/zh-CN.ts | 2 + src/views/monitor/online/index.vue | 2 +- src/views/perfManage/goldTarget/index.vue | 341 ++++++++++++++++------ src/views/perfManage/perfData/index.vue | 12 - 6 files changed, 257 insertions(+), 125 deletions(-) diff --git a/src/api/perfManage/goldTarget.ts b/src/api/perfManage/goldTarget.ts index fd5b1352..a2cf1242 100644 --- a/src/api/perfManage/goldTarget.ts +++ b/src/api/perfManage/goldTarget.ts @@ -28,10 +28,10 @@ export async function listgoldData(query: Record) { let sortSql = ' order by '; if (query.sortField) { sortSql += ` ${query.sortField} `; - }else{ + } else { sortSql += ` start_time `; } - + if (query.sortOrder === 'asc') { sortSql += ' asc '; } else { @@ -76,12 +76,6 @@ export async function listgoldData(query: Record) { return result; } - - - - - - /** * 查询黄金指标数据 * @param query 查询参数 @@ -92,11 +86,11 @@ export async function goldData(query: Record) { url: `/ne/kpi/data`, method: 'get', params: { - neType:query.neType[0], - neId:query.neType[1], - startTime:query.beginTime, - endTime:query.endTime, - interval:query.particle + neType: query.neType[0], + neId: query.neType[1], + startTime: query.beginTime, + endTime: query.endTime, + interval: query.particle, }, timeout: 60_000, }); @@ -114,9 +108,8 @@ export async function getGoldTitleByNE(neType: string) { const result = await request({ url: `/ne/kpi/title`, method: 'get', - params:{neType} + params: { neType }, }); // 解析数据 return result; } - diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 366453f7..41d75715 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -633,6 +633,8 @@ export default { nullTip:'There are no statistical data within this time range', kpiTitle:'KPI Statistics Chart', allData:'Complete Data', + makeLine:'Statistical Chart', + time:'Time', } }, traceManage: { diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index 9804635d..89f83707 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -633,6 +633,8 @@ export default { nullTip:'此时间范围内没有统计数据', kpiTitle:'KPI统计图表', allData:'完整统计数据', + makeLine:'统计图', + time:'时间', } }, traceManage: { diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue index b30591dc..9d8b1b63 100644 --- a/src/views/monitor/online/index.vue +++ b/src/views/monitor/online/index.vue @@ -118,7 +118,7 @@ let tablePagination = { showSizeChanger: true, /**数据总数 */ total: 0, - showTotal: (total: number) => `总共 ${total} 条`, + showTotal: (total: number) => t('common.tablePaginationTotal', { total }), onChange: (page: number, pageSize: number) => { tablePagination.current = page; tablePagination.pageSize = pageSize; diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue index c05c9d55..90d2645d 100644 --- a/src/views/perfManage/goldTarget/index.vue +++ b/src/views/perfManage/goldTarget/index.vue @@ -2,12 +2,15 @@ import { reactive, ref, onMounted, toRaw } from 'vue'; import { PageContainer } from 'antdv-pro-layout'; import { message, Form } 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 dayjs from 'dayjs'; import { parseDateToStr } from '@/utils/date-utils'; const { t, currentLocale } = useI18n(); @@ -18,10 +21,69 @@ let neCascaderOptions = ref[]>([]); /**记录开始结束时间 */ let queryRangePicker = ref<[string, string]>(['', '']); +/**表格字段列排序 */ +let tableColumnsDnd = ref([]); + +/**表格状态类型 */ +type TabeStateType = { + /**表格列 */ + tableColumns: object[]; + /**加载等待 */ + loading: boolean; + /**紧凑型 */ + size: SizeType; + /**搜索栏 */ + seached: boolean; + /**记录数据 */ + data: object[]; +}; + +/**表格状态 */ +let tableState: TabeStateType = reactive({ + tableColumns: [], + loading: false, + size: 'middle', + seached: true, + data: [], +}); + +/**表格分页器参数 */ +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; + queryParams.pageNum = page; + queryParams.pageSize = pageSize; + fnGetList(); + }, +}); + +/**表格紧凑型变更操作 */ +function fnTableSize({ key }: MenuInfo) { + tableState.size = key as SizeType; +} + /**查询参数 */ let queryParams: any = reactive({ - /**已勾选指标 */ - goldArr: [], + /**卡片切换Flag */ + cardFlag: 0, //0-显示统计图 1-显示统计表 /**告警设备类型 */ neType: '', /**告警网元标识 */ @@ -46,8 +108,6 @@ type StateType = { designNeType: string; /**黄金指标集 tree */ designTreeData: any[]; - /**指标勾选集*/ - goldArr: any[]; /**表单数据 */ from: Record; }; @@ -57,7 +117,6 @@ let state: StateType = reactive({ neType: [], designNeType: '', designTreeData: [], - goldArr: [], from: { uploadLoading: false, sendLoading: false, @@ -69,15 +128,7 @@ function fnNeChange(keys: any, _: any) { // 不是同类型时需要重新加载 if (state.designNeType !== keys[0]) { state.designTreeData = []; - queryRangePicker.value = ['', '']; - queryParams = Object.assign(queryParams, { - /**已勾选指标 */ - goldArr: [], - /**颗粒度 */ - particle: '', - beginTime: '', - endTime: '', - }); + queryParams.cardFlag = 0; fnGetList(); } } @@ -109,6 +160,7 @@ function fnGetList() { }); } }); + fnDesign(); } /**根据 key 查找对应的 title */ @@ -117,8 +169,33 @@ function findTitleByKey(key: string): string | undefined { return item ? item.title : undefined; } +/**筛选条件进行制图 */ +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', + }); if (!queryRangePicker.value) { queryRangePicker.value = ['', '']; } @@ -127,26 +204,26 @@ function fnDesign() { const neType = queryParams.neType[0]; let goldXDate: any = []; let goldYData: any = []; - let hideAllArr: any = []; goldData(queryParams).then(res => { - console.log(res.data) if (res.code === RESULT_CODE_SUCCESS) { if (res.data.length > 0) { - goldXDate = res.data.map((item:any) => item.timeInterval); + tableState.data = res.data; + tablePagination.total = res.data.length; + goldXDate = res.data.map((item: any) => item.timeGroup); goldYData = Object.keys(res.data[0]) - .filter(key => key !== 'timeInterval') + .filter(key => !['timeGroup', 'neName', 'startIndex'].includes(key)) .map(key => { - if (!queryParams.goldArr.includes(key)) hideAllArr[key] = false; - const title = findTitleByKey(key); - if (queryParams.goldArr.includes(key)) - return { - name: title, - data: res.data.map((item: any) => parseInt(item[key])), - }; + const title: any = findTitleByKey(key); + return { + name: title, + data: res.data.map((item: any) => parseInt(item[key])), + }; }); } else { + tableState.data = []; + tablePagination.total = 0; state.designTreeData.forEach((item: any) => { - goldYData.push({name:item.title,data:[]}); + goldYData.push({ name: item.title, data: [] }); }); message.warning({ content: t('views.perfManage.goldTarget.nullTip'), @@ -175,7 +252,6 @@ function fnDesign() { color: '#646A73', }, icon: 'circle', - selected: hideAllArr, }, grid: { left: '10%', @@ -194,8 +270,9 @@ function fnDesign() { }, ], }; - chartsOption.perfChart = option; + + //处理表格数据 } else { message.warning({ content: t('common.getInfoFail'), @@ -205,11 +282,6 @@ function fnDesign() { }); } -/**勾选指标的变动 */ -function fnTreeCheck(value: any, _: any) { - queryParams.goldArr = value; -} - onMounted(() => { // 获取网元网元列表 useNeInfoStore() @@ -256,11 +328,15 @@ onMounted(() => { diff --git a/src/views/perfManage/perfData/index.vue b/src/views/perfManage/perfData/index.vue index f3c0ac31..ce54a47a 100644 --- a/src/views/perfManage/perfData/index.vue +++ b/src/views/perfManage/perfData/index.vue @@ -352,14 +352,6 @@ onMounted(() => { @change="fnTableChange" :scroll="{ x: true }" > - @@ -369,8 +361,4 @@ onMounted(() => { .table :deep(.ant-pagination) { padding: 0 24px; } -.alarmTitleText { - max-width: 300px; - cursor: pointer; -}