新增黄金指标统计展示

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",
     },

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: {

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: {

src/i18n/locales/zh-CN.ts

@@ -630,6 +630,8 @@ export default {
         endTime:'结束时间',
         particle:'颗粒度',
         timeFrame:'时间范围',
+        nullTip:'此时间范围内没有统计数据',
+        kpiTitle:'KPI统计图表',
       }
     },
     traceManage: {

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) {
@@ -96,18 +111,87 @@ function fnGetList() {
   });
 }
 
+/**根据 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'),
@@ -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>

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 => {