新增黄金指标统计展示

2023-12-05 18:53:02 +08:00
parent ab2154003e
commit 20b6c5c10a
6 changed files with 136 additions and 23 deletions
--- a/src/api/perfManage/goldTarget.ts
+++ b/src/api/perfManage/goldTarget.ts
@@ -8,7 +8,6 @@ import { parseObjLineToHump } from '@/utils/parse-utils';
 * @returns object
 */
 export async function listgoldData(query: Record<string, any>) {
-  //console.log(query);
  let totalSQL = 'select count(*) as total from gold_kpi where 1=1 ';
  let rowsSQL =
    'SELECT gold_kpi.*,kpi_title.en_title FROM gold_kpi LEFT JOIN kpi_title on gold_kpi.kpi_id=kpi_title.kpi_id where 1=1 ';
@@ -88,12 +87,11 @@ export async function listgoldData(query: Record<string, any>) {
 * @returns object
 */
 export async function goldData(query: Record<string, any>) {
-  //console.log(query);
  // 发起请求
  let insertKpiId: string[]=[];
  let insertWhere: string[]=[];
  query.goldArr.forEach((item: any)=> {
-    insertKpiId.push(`SUM(CASE WHEN kpi_id = '${item}' THEN value ELSE 0 END) AS ${item.split(".")[0]+'_'+item.split(".")[1]} `);
+    insertKpiId.push(`SUM(CASE WHEN kpi_id = '${item}' THEN value ELSE 0 END) AS \`${item}\``);
    insertWhere.push(`'${item}'`);
  })
  const result = await request({
@@ -103,7 +101,7 @@ export async function goldData(query: Record<string, any>) {
      rowsSQL:`SELECT CONCAT(DATE_FORMAT(start_time, '%Y-%m-%d %H:'), LPAD(FLOOR(MINUTE(start_time) / ${query.particle}) * ${query.particle}, 2, '0'), ':00') AS time_interval,`+
      insertKpiId.join(",")+
     " FROM gold_kpi"+
-     ` WHERE ne_type='UPF' and kpi_id in (${insertWhere.join(",")}) and start_time BETWEEN '${query.beginTime}' AND '${query.endTime}'`+ 
+     ` WHERE ne_type='${query.neType[0]}' and kpi_id in (${insertWhere.join(",")}) and start_time BETWEEN '${query.beginTime}' AND '${query.endTime}'`+ 
     ` GROUP BY DATE_FORMAT(start_time, '%Y-%m-%d %H:'), FLOOR(MINUTE(start_time) / ${query.particle})`+
     " ORDER BY start_time",
    },
--- a/src/components/ChartLine/index.vue
+++ b/src/components/ChartLine/index.vue
@@ -69,7 +69,7 @@ const props = defineProps({
 const seriesStyle = [
  {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    {
+      {
        offset: 0,
        color: 'rgba(22, 119, 255, .5)',
      },
@@ -203,7 +203,7 @@ function initChart() {
      },
    },
    grid: props.option.grid || { left: '8%', right: '8%', bottom: '20%' },
-    legend: {
+    legend: props.option.legend || {
      right: 10,
      itemWidth: 8,
      textStyle: {
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -630,6 +630,8 @@ export default {
        endTime:'End Time',
        particle: 'Particle Ssize',
        timeFrame: 'Time Range',
+        nullTip:'There are no statistical data within this time range',
+        kpiTitle:'KPI Statistics Chart',
      }
    },
    traceManage: {
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -630,6 +630,8 @@ export default {
        endTime:'结束时间',
        particle:'颗粒度',
        timeFrame:'时间范围',
+        nullTip:'此时间范围内没有统计数据',
+        kpiTitle:'KPI统计图表',
      }
    },
    traceManage: {
--- a/src/views/perfManage/goldTarget/index.vue
+++ b/src/views/perfManage/goldTarget/index.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import {  message } from 'ant-design-vue/lib';
+import { message, Form } from 'ant-design-vue/lib';
+import ChartLine from '@/components/ChartLine/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,17 +21,23 @@ let queryRangePicker = ref<[string, string]>(['', '']);
 /**查询参数 */
 let queryParams: any = reactive({
  /**已勾选指标 */
-  goldArr:[],
+  goldArr: [],
  /**告警设备类型 */
  neType: '',
  /**告警网元标识 */
  neId: '',
  /**颗粒度 */
-  particle: '',
+  particle: '15',
  beginTime: '',
  endTime: '',
 });

+/**图表显示数据 */
+const chartsOption = reactive({
+  /**性能指标 */
+  perfChart: {},
+});
+
 /**对象信息状态类型 */
 type StateType = {
  /**网元类型 */
@@ -60,6 +69,15 @@ function fnNeChange(keys: any, _: any) {
  // 不是同类型时需要重新加载
  if (state.designNeType !== keys[0]) {
    state.designTreeData = [];
+    queryRangePicker.value = ['', ''];
+    queryParams = Object.assign(queryParams, {
+      /**已勾选指标 */
+      goldArr: [],
+      /**颗粒度 */
+      particle: '',
+      beginTime: '',
+      endTime: '',
+    });
    fnGetList();
  }
 }
@@ -69,12 +87,9 @@ function fnGetList() {
  const neType = queryParams.neType[0];
  state.designNeType = neType;
  var language = currentLocale.value.split('_')[0];
-  // console.log(language)
  if (language === 'zh') language = 'cn';
  getGoldTitleByNE(neType).then(res => {
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      // 构建自动完成筛选结构
-      const autoCompleteArr: Record<string, any>[] = [];
      // 构建树结构
      const treeArr: Record<string, any>[] = [];
      for (const item of res.data) {
@@ -89,28 +104,97 @@ function fnGetList() {
      state.designTreeData = treeArr;
    } else {
      message.warning({
-        content: t('common.getInfoFail'),    
+        content: t('common.getInfoFail'),
        duration: 2,
      });
    }
  });
 }

+/**根据 key 查找对应的 title */
+function findTitleByKey(key: string): string | undefined {
+  const item = state.designTreeData.find(item => item.key === key);
+  return item ? item.title : undefined;
+}
 /**筛选条件进行制图 */
 function fnDesign() {
-  const neType=queryParams.neType[0];
  if (!queryRangePicker.value) {
    queryRangePicker.value = ['', ''];
  }
  queryParams.beginTime = queryRangePicker.value[0];
  queryParams.endTime = queryRangePicker.value[1];
-  console.log(toRaw(queryParams));
+  const neType = queryParams.neType[0];
+  let goldXDate: any = [];
+  let goldYData: any = [];
+  let hideAllArr: any = [];
  goldData(queryParams).then(res => {
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-          console.log(res.rows);
+      if (res.rows.length > 0) {
+        goldXDate = res.rows.map(item => item.timeInterval);
+        goldYData = Object.keys(res.rows[0])
+          .filter(key => key !== 'timeInterval')
+          .map(key => {
+            if (!queryParams.goldArr.includes(key)) hideAllArr[key] = false;
+            const title = findTitleByKey(key);
+            if (queryParams.goldArr.includes(key))
+              return {
+                name: title,
+                data: res.rows.map((item: any) => parseInt(item[key])),
+              };
+          });
+      } else {
+        message.warning({
+          content: t('views.perfManage.goldTarget.nullTip'),
+          duration: 2,
+        });
+        return false;
+      }
+
+      // 图标参数
+      const option = {
+        xDatas: goldXDate,
+        yDatas: goldYData,
+        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;
+          },
+        },
+        legend: {
+          right: 10,
+          itemWidth: 8,
+          textStyle: {
+            color: '#646A73',
+          },
+          icon: 'circle',
+          selected: hideAllArr,
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '20%',
+        },
+        yAxis: [
+          { type: 'value', axisLabel: { fontSize: 10 } },
+          {
+            type: 'value',
+            position: 'right',
+            alignTicks: true,
+            axisLabel: {
+              fontSize: 10,
+            },
+          },
+        ],
+      };
+
+      chartsOption.perfChart = option;
    } else {
      message.warning({
-        content: t('common.getInfoFail'),    
+        content: t('common.getInfoFail'),
        duration: 2,
      });
    }
@@ -136,7 +220,7 @@ onMounted(() => {
            }
          );
          // 默认选择AMF
-          const item = neCascaderOptions.value.find(s => s.value === 'AMF');
+          const item = neCascaderOptions.value.find(s => s.value === 'UPF');
          if (item && item.children) {
            const info = item.children[0];
            queryParams.neType = [info.neType, info.neId];
@@ -144,6 +228,16 @@ onMounted(() => {
            const info = neCascaderOptions.value[0].children[0];
            queryParams.neType = [info.neType, 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();
        }
      } else {
@@ -164,9 +258,8 @@ onMounted(() => {
        <a-card
          size="small"
          :bordered="false"
-          :title="t('views.mmlManage.cmdTitle')"
        >
-          <a-form :model="queryParams" name="queryParams" layout="horizontal">
+          <a-form name="queryParamsFrom" layout="horizontal">
            <a-row :gutter="16">
              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
@@ -192,6 +285,7 @@ onMounted(() => {
                v-model:value="queryRangePicker"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
+                :allow-clear="false"
                show-time
              />
            </a-form-item>
@@ -237,9 +331,26 @@ onMounted(() => {
          </a-form>
        </a-card>
      </a-col>
-      <a-col :span="15"> </a-col>
+      <a-col :span="15">
+        <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
+          <!-- 插槽-卡片左侧侧 -->
+          <template #title>{{ t('views.perfManage.goldTarget.kpiTitle') }}</template>
+          <div class="chart">
+            <ChartLine
+              :option="chartsOption.perfChart"
+              :dataZoom="true"
+              height="400px"
+            ></ChartLine>
+          </div>
+        </a-card>
+      </a-col>
    </a-row>
  </PageContainer>
 </template>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 400px;
+}
+</style>
--- a/src/views/perfManage/perfThreshold/index.vue
+++ b/src/views/perfManage/perfThreshold/index.vue
@@ -322,7 +322,7 @@ function fnModalVisibleByEdit(id?: string) {
 * 进行表达规则校验
 */
 function fnModalOk() {
-  console.log(modalState.from);
+  //console.log(modalState.from);
  modalStateFrom
    .validate()
    .then(e => {