From 0b6303e544746cd613f66896ed0256925930593b Mon Sep 17 00:00:00 2001 From: lai <371757574@qq.com> Date: Fri, 5 Jan 2024 11:35:09 +0800 Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=8E=92=E5=BA=8F=E6=97=B6?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=A1=A8=E6=A0=BC=E9=94=81=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/perfManage/goldTarget/index.vue | 140 +++++++++++----------- 1 file changed, 73 insertions(+), 67 deletions(-) diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue index f9c3e93c..28794e92 100644 --- a/src/views/perfManage/goldTarget/index.vue +++ b/src/views/perfManage/goldTarget/index.vue @@ -74,7 +74,7 @@ let queryParams: any = reactive({ /**表格分页、排序、筛选变化时触发操作, 排序方式,取值为 ascend descend */ function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) { - console.log(sorter) + tableState.loading = true; const { columnKey, order } = sorter; if (order) { queryParams.sortField = columnKey; @@ -198,78 +198,84 @@ function fnDesign() { let goldXDate: any = []; let goldYData: any = []; let hideAll: any = {}; - goldData(queryParams).then(res => { - if (res.code === RESULT_CODE_SUCCESS) { - if (res.data.length > 0) { - console.log(res.data) - 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])), - }; + goldData(queryParams) + .then(res => { + if (res.code === RESULT_CODE_SUCCESS) { + if (res.data.length > 0) { + console.log(res.data); + 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])), + }; + }); + } else { + tableState.data = []; + state.designTreeData.forEach((item: any) => { + goldYData.push({ name: item.title, data: [] }); }); + message.warning({ + content: t('views.perfManage.goldTarget.nullTip'), + duration: 2, + }); + } + + // 图标参数 + const option = { + xDatas: goldXDate, + yDatas: goldYData, + tooltip: { + trigger: 'axis', + formatter: function (datas: any) { + let res = datas[0].name + '
'; + for (const item of datas) { + res += `${item.marker} ${item.seriesName}:${item.data}
`; + } + return res; + }, + }, + legend: { + // orient: 'vertical', + // left: 'left', + type: 'scroll', + orient: 'vertical', // vertical + right: 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 { - tableState.data = []; - state.designTreeData.forEach((item: any) => { - goldYData.push({ name: item.title, data: [] }); - }); message.warning({ - content: t('views.perfManage.goldTarget.nullTip'), + content: t('common.getInfoFail'), duration: 2, }); } - - // 图标参数 - const option = { - xDatas: goldXDate, - yDatas: goldYData, - tooltip: { - trigger: 'axis', - formatter: function (datas: any) { - let res = datas[0].name + '
'; - for (const item of datas) { - res += `${item.marker} ${item.seriesName}:${item.data}
`; - } - return res; - }, - }, - legend: { - // orient: 'vertical', - // left: 'left', - type: 'scroll', - orient: 'vertical', // vertical - right: 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; + }); } /**