更新

src/api/agentManage/callings.ts

@@ -0,0 +1,16 @@
+import { request } from '@/plugins/http-fetch';
+
+
+/**
+ * 查询定时任务调度列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listCallings(query: Record<string, any>) {
+  return request({
+    url: '/psap/v1/mf/callings/list',
+    method: 'get',
+    params: query,
+  });
+}
+

src/i18n/locales/en-US.ts

@@ -350,6 +350,16 @@ export default {
         description: "No data yet, try refreshing",
       },
     },
+    agentManage:{
+      callings:{
+        callerIdNumber:'Caller Number',
+        calleeIdNumber:'Callee Number',
+        startTime:'Start Time',
+        answeredTime:'Answered Time',
+        callDuration:'Call Duration',
+        msdData:'MSD Info',
+      }
+    },
     dashboard: {
       overview:{
         title: "Core Network Dashboard",

src/i18n/locales/zh-CN.ts

@@ -350,15 +350,25 @@ export default {
         description: "暂无数据，尝试刷新看看",
       },
     },
+    agentManage:{
+      callings:{
+        callerIdNumber:'主叫号码',
+        calleeIdNumber:'被叫号码',
+        startTime:'开始时间',
+        answeredTime:'接听时间',
+        callDuration:'通话时长',
+        msdData:'msd内容',
+      }
+    },
     dashboard: {
       overview:{
         title: "核心网系统看板",
         fullscreen: "点击全屏显示",
         toRouter: "点击跳转详情页面",
         psapTitle:'PSAP看板',
-        onlineUser:'在线用户',
+        onlineUser:'在线座席数',
-        totalUser:'总用户',
+        totalUser:'总座席数',
-        parallelUser:'并行用户',
+        parallelUser:'并行通话数',
         userTitle:'用户统计',
         sysTitle:'系统资源',
         skim: {

src/views/agentManage/callings/index.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { parseDateToStr } from '@/utils/date-utils';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { listCallings } from '@/api/agentManage/callings';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useDictStore from '@/store/modules/dict';
+import useI18n from '@/hooks/useI18n';
+const { getDict } = useDictStore();
+const { t } = useI18n();
+
+
+
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neId: '001',
+  /**记录时间 */
+  beginTime: '',
+  endTime: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: true,
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'center',
+    width: 3,
+  },
+  {
+    title: t('views.agentManage.callings.callerIdNumber'),
+    dataIndex: 'callerIdNumber',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.agentManage.callings.calleeIdNumber'),
+    dataIndex: 'calleeIdNumber',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.agentManage.callings.startTime'),
+    dataIndex: 'startTime',
+    align: 'center',
+    width: 6,
+  },
+  {
+    title: t('views.agentManage.callings.answeredTime'),
+    dataIndex: 'answeredTime',
+    align: 'center',
+    width: 4,
+  },
+  {
+    title: t('views.agentManage.callings.callDuration'),
+    dataIndex: 'callDuration',
+    align: 'center',
+    width: 5,
+  },
+  {
+    title: t('views.agentManage.callings.msdData'),
+    dataIndex: 'msdData',
+    align: 'center',
+    width: 6,
+  },
+];
+
+/**表格分页器参数 */
+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;
+}
+
+/**查询备份信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if(pageNum){
+    queryParams.pageNum = pageNum;
+  }
+
+
+  listCallings(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      tablePagination.total = res.total;
+      tableState.data = res.data;
+      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  // 获取列表数据
+  fnGetList();
+});
+</script>
+
+<template>
+  <PageContainer>
+
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title> </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown trigger="click" placement="bottomRight">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: 1500, y: 400 }"
+      >
+      </a-table>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+.alarmTitleText {
+  max-width: 300px;
+  cursor: pointer;
+}
+</style>

src/views/dashboard/overview/components/mfOverview/DashboardCards.vue

@@ -10,6 +10,8 @@ import TrendChart from './TrendChart.vue';
 import useI18n from '@/hooks/useI18n';
 import { listNeInfo } from '@/api/ne/neInfo';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { getNeConfigData } from '@/api/ne/neConfig';
+import { listCallings } from '@/api/agentManage/callings';
 
 const { t } = useI18n();
 
@@ -17,9 +19,9 @@ const { t } = useI18n();
 const interval10s = ref<any>(null);
 
 // 模拟数据
-const activeCallsData = ref([10, 20, 30, 40, 30, 80, 100]);
+const activeCallsData = ref([]);
-const mosData = ref([40, 50, 60, 70, 80, 30, 70]);
+const mosData = ref([]);
-const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
+const failedCallsData = ref([]);
 
 // 新增三个卡片的模拟数据
 const networkCpuData = ref([]);
@@ -28,11 +30,12 @@ const systemStorageData = ref([]);
 const systemMemData = ref([]);
 
 
-// 是否是第一次加载数据
+// 是否是第一次加载资源数据
 const isFirstLoad = ref(true);
 
 // 更新图表数据的函数
 function updateChartData(newValue: number, dataArray: any) {
+  if (newValue == 23) { console.log('更新图表数据', newValue, dataArray); }
   // 如果是第一次加载，用当前值填充整个数组
   if (isFirstLoad.value) {
     dataArray.value = Array(7).fill(newValue);
@@ -45,6 +48,36 @@ function updateChartData(newValue: number, dataArray: any) {
   }
 }
 
+// 是否是第一次加载用户数据
+const isFirstLoadUser = ref(true);
+function updateUserChartData(newValue: number, dataArray: any) {
+  // 如果是第一次加载，用当前值填充整个数组
+  if (isFirstLoad.value) {
+    dataArray.value = Array(7).fill(newValue);
+  } else {
+    // 非第一次加载，正常更新数据（移除第一个，添加新值）
+    const newData = [...dataArray.value];
+    newData.shift();
+    newData.push(newValue);
+    dataArray.value = newData;
+  }
+}
+
+// 是否是第一次加载并行用户数据
+const isFirstLoadFailed = ref(true);
+function updateFailedChartData(newValue: number, dataArray: any) {
+  // 如果是第一次加载，用当前值填充整个数组
+  if (isFirstLoadFailed.value) {
+    dataArray.value = Array(7).fill(newValue);
+  } else {
+    // 非第一次加载，正常更新数据（移除第一个，添加新值）
+    const newData = [...dataArray.value];
+    newData.shift();
+    newData.push(newValue);
+    dataArray.value = newData;
+  }
+}
+
 // 当前资源使用率
 const currentNfCpuUsage = ref(0);
 const currentSysCpuUsage = ref(0);
@@ -63,6 +96,27 @@ const sysCpuChange = ref(0);
 const sysDiskChange = ref(0);
 const sysMemChange = ref(0);
 
+
+// 当前资源使用率
+const activeCalls = ref(0);
+const onlineCount = ref(0);
+const failedCallsCount = ref(0);
+
+// 上一次的资源使用率
+const prevActiveCalls = ref(0);
+const prevOnlineCount = ref(0);
+const prevFailedCallsCount = ref(0);
+
+
+
+// 用户数变化百分比
+const activeCallsChange = ref(0);
+const onlineCountChange = ref(0);
+const failedCallsCountChange = ref(0);
+
+
+
+
 /**解析网元状态携带的资源利用率 */
 function parseResouresUsage(neState: Record<string, any>) {
   let sysCpuUsage = 0;
@@ -174,7 +228,63 @@ function fnGetList() {
       }
     })
 
+  // 获取网元端的配置数据
+  getNeConfigData({
+    neType: 'MF',
+    neId: '001',
+    paramName: 'agents',
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      const neData = res.data;
 
+      prevActiveCalls.value = activeCalls.value;
+      prevOnlineCount.value = onlineCount.value;
+
+
+      // 更新 activeCallsData 和 mosData
+      activeCalls.value = neData.length; // 数组长度
+      onlineCount.value = neData.filter((item: any) => item.online).length; // online 为 true 的数量
+
+      activeCallsChange.value = prevActiveCalls.value ? prevActiveCalls.value - activeCalls.value : 0;
+      onlineCountChange.value = prevOnlineCount.value ? prevOnlineCount.value - onlineCount.value : 0;
+
+      // 更新图表数据
+      updateUserChartData(activeCalls.value, activeCallsData);
+      updateUserChartData(onlineCount.value, mosData);
+
+      // 第一次加载完成后，设置标志为false
+      if (isFirstLoadUser.value) {
+        isFirstLoadUser.value = false;
+      }
+
+
+    }
+  });
+
+
+
+
+  listCallings({ neId: '001' }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      const callData: any = res.data;
+      prevFailedCallsCount.value = failedCallsCount.value;
+
+
+      // 更新 activeCallsData 和 mosData
+      failedCallsCount.value = res.total; // 数组长度
+
+      failedCallsCountChange.value = prevFailedCallsCount.value ? prevFailedCallsCount.value - failedCallsCount.value : 0;
+
+      // 更新图表数据
+      updateFailedChartData(failedCallsCount.value, failedCallsData);
+
+      // 第一次加载完成后，设置标志为false
+      if (isFirstLoadFailed.value) {
+        isFirstLoadFailed.value = false;
+      }
+
+    }
+  });
 }
 
 
@@ -215,10 +325,11 @@ onBeforeUnmount(() => {
             </div>
             <div class="metric-info">
               <div class="metric-value">
-                100
+                {{ activeCalls }}
-                <a-icon class="trend-icon up" type="arrow-up" />
+                <a-icon :class="['trend-icon', activeCallsChange >= 0 ? 'up' : 'down']"
+                  :type="activeCallsChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">+20 last 5s</div>
+              <div class="metric-change">{{ activeCallsChange >= 0 ? '+' : '' }}{{ activeCallsChange }}% last 10s</div>
             </div>
           </div>
         </a-card>
@@ -233,10 +344,11 @@ onBeforeUnmount(() => {
             </div>
             <div class="metric-info">
               <div class="metric-value">
-                70
+                {{ onlineCount }}
-                <a-icon class="trend-icon right" type="arrow-right" />
+                <a-icon :class="['trend-icon', onlineCountChange >= 0 ? 'up' : 'down']"
+                  :type="onlineCountChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">+40 last 5s</div>
+              <div class="metric-change">{{ onlineCountChange >= 0 ? '+' : '' }}{{ onlineCountChange }} last 10s</div>
             </div>
           </div>
         </a-card>
@@ -253,9 +365,11 @@ onBeforeUnmount(() => {
             </div>
             <div class="metric-info">
               <div class="metric-value">
-                30
+                {{ failedCallsCount }}
+                <a-icon :class="['trend-icon', failedCallsCountChange >= 0 ? 'up' : 'down']"
+                  :type="failedCallsCountChange >= 0 ? 'arrow-up' : 'arrow-down'" />
               </div>
-              <div class="metric-change">-10 last 5s</div>
+              <div class="metric-change">{{ failedCallsCountChange >= 0 ? '+' : '' }}{{ failedCallsCountChange }} last 10s</div>
             </div>
           </div>
         </a-card>