---首页

src/i18n/locales/zh-CN.ts

@@ -15,9 +15,9 @@ export default {
 
   // 全局页脚
   globalFooter: {
-    help: '帮助',
+    help: '',
-    privacy: '隐私',
+    privacy: '',
-    term: '条款',
+    term: '',
   },
 
   // 校验

src/typings/components.d.ts

@@ -1,110 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    AAvatar: typeof import('ant-design-vue/lib')['Avatar']
-    ABadge: typeof import('ant-design-vue/lib')['Badge']
-    AButton: typeof import('ant-design-vue/lib')['Button']
-    ACard: typeof import('ant-design-vue/lib')['Card']
-    ACheckbox: typeof import('ant-design-vue/lib')['Checkbox']
-    ACol: typeof import('ant-design-vue/lib')['Col']
-    ADescriptions: typeof import('ant-design-vue/lib')['Descriptions']
-    ADescriptionsItem: typeof import('ant-design-vue/lib')['DescriptionsItem']
-    ADivider: typeof import('ant-design-vue/lib')['Divider']
-    ADropdown: typeof import('ant-design-vue/lib')['Dropdown']
-    AEmpty: typeof import('ant-design-vue/lib')['Empty']
-    AForm: typeof import('ant-design-vue/lib')['Form']
-    AFormItem: typeof import('ant-design-vue/lib')['FormItem']
-    AImage: typeof import('ant-design-vue/lib')['Image']
-    AInput: typeof import('ant-design-vue/lib')['Input']
-    AInputNumber: typeof import('ant-design-vue/lib')['InputNumber']
-    AInputPassword: typeof import('ant-design-vue/lib')['InputPassword']
-    AList: typeof import('ant-design-vue/lib')['List']
-    AListItem: typeof import('ant-design-vue/lib')['ListItem']
-    AListItemMeta: typeof import('ant-design-vue/lib')['ListItemMeta']
-    AMenu: typeof import('ant-design-vue/lib')['Menu']
-    AMenuDivider: typeof import('ant-design-vue/lib')['MenuDivider']
-    AMenuItem: typeof import('ant-design-vue/lib')['MenuItem']
-    AModal: typeof import('ant-design-vue/lib')['Modal']
-    APopconfirm: typeof import('ant-design-vue/lib')['Popconfirm']
-    APopover: typeof import('ant-design-vue/lib')['Popover']
-    ARadio: typeof import('ant-design-vue/lib')['Radio']
-    ARadioGroup: typeof import('ant-design-vue/lib')['RadioGroup']
-    ARangePicker: typeof import('ant-design-vue/lib')['RangePicker']
-    AResult: typeof import('ant-design-vue/lib')['Result']
-    ARow: typeof import('ant-design-vue/lib')['Row']
-    ASelect: typeof import('ant-design-vue/lib')['Select']
-    ASelectOption: typeof import('ant-design-vue/lib')['SelectOption']
-    ASpace: typeof import('ant-design-vue/lib')['Space']
-    AStatistic: typeof import('ant-design-vue/lib')['Statistic']
-    ASwitch: typeof import('ant-design-vue/lib')['Switch']
-    ATable: typeof import('ant-design-vue/lib')['Table']
-    ATabPane: typeof import('ant-design-vue/lib')['TabPane']
-    ATabs: typeof import('ant-design-vue/lib')['Tabs']
-    ATag: typeof import('ant-design-vue/lib')['Tag']
-    ATextarea: typeof import('ant-design-vue/lib')['Textarea']
-    ATooltip: typeof import('ant-design-vue/lib')['Tooltip']
-    ATree: typeof import('ant-design-vue/lib')['Tree']
-    ATreeSelect: typeof import('ant-design-vue/lib')['TreeSelect']
-    ATypography: typeof import('ant-design-vue/lib')['Typography']
-    ATypographyParagraph: typeof import('ant-design-vue/lib')['TypographyParagraph']
-    ATypographyText: typeof import('ant-design-vue/lib')['TypographyText']
-    ATypographyTitle: typeof import('ant-design-vue/lib')['TypographyTitle']
-    AUpload: typeof import('ant-design-vue/lib')['Upload']
-    AUploadDragger: typeof import('ant-design-vue/lib')['UploadDragger']
-    BellOutlined: typeof import('@ant-design/icons-vue')['BellOutlined']
-    BgColorsOutlined: typeof import('@ant-design/icons-vue')['BgColorsOutlined']
-    ClearOutlined: typeof import('@ant-design/icons-vue')['ClearOutlined']
-    CloseOutlined: typeof import('@ant-design/icons-vue')['CloseOutlined']
-    ColumnHeightOutlined: typeof import('@ant-design/icons-vue')['ColumnHeightOutlined']
-    ContainerOutlined: typeof import('@ant-design/icons-vue')['ContainerOutlined']
-    CronModal: typeof import('./../components/CronModal/index.vue')['default']
-    Day: typeof import('./../components/CronModal/components/Day.vue')['default']
-    DeleteOutlined: typeof import('@ant-design/icons-vue')['DeleteOutlined']
-    DictTag: typeof import('./../components/DictTag/index.vue')['default']
-    DownOutlined: typeof import('@ant-design/icons-vue')['DownOutlined']
-    ExportOutlined: typeof import('@ant-design/icons-vue')['ExportOutlined']
-    FieldTimeOutlined: typeof import('@ant-design/icons-vue')['FieldTimeOutlined']
-    FormOutlined: typeof import('@ant-design/icons-vue')['FormOutlined']
-    GithubOutlined: typeof import('@ant-design/icons-vue')['GithubOutlined']
-    Hour: typeof import('./../components/CronModal/components/Hour.vue')['default']
-    IconFont: typeof import('./../components/IconFont/index.vue')['default']
-    ImportOutlined: typeof import('@ant-design/icons-vue')['ImportOutlined']
-    InboxOutlined: typeof import('@ant-design/icons-vue')['InboxOutlined']
-    InfoCircleOutlined: typeof import('@ant-design/icons-vue')['InfoCircleOutlined']
-    LikeOutlined: typeof import('@ant-design/icons-vue')['LikeOutlined']
-    LinkiFrame: typeof import('./../components/LinkiFrame/index.vue')['default']
-    LockOutlined: typeof import('@ant-design/icons-vue')['LockOutlined']
-    LogoutOutlined: typeof import('@ant-design/icons-vue')['LogoutOutlined']
-    Minute: typeof import('./../components/CronModal/components/Minute.vue')['default']
-    MobileOutlined: typeof import('@ant-design/icons-vue')['MobileOutlined']
-    Month: typeof import('./../components/CronModal/components/Month.vue')['default']
-    PayCircleOutlined: typeof import('@ant-design/icons-vue')['PayCircleOutlined']
-    PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
-    ProfileOutlined: typeof import('@ant-design/icons-vue')['ProfileOutlined']
-    QqOutlined: typeof import('@ant-design/icons-vue')['QqOutlined']
-    QuestionCircleOutlined: typeof import('@ant-design/icons-vue')['QuestionCircleOutlined']
-    ReloadOutlined: typeof import('@ant-design/icons-vue')['ReloadOutlined']
-    RobotOutlined: typeof import('@ant-design/icons-vue')['RobotOutlined']
-    RocketOutlined: typeof import('@ant-design/icons-vue')['RocketOutlined']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SearchOutlined: typeof import('@ant-design/icons-vue')['SearchOutlined']
-    Second: typeof import('./../components/CronModal/components/Second.vue')['default']
-    SecurityScanOutlined: typeof import('@ant-design/icons-vue')['SecurityScanOutlined']
-    SettingOutlined: typeof import('@ant-design/icons-vue')['SettingOutlined']
-    SyncOutlined: typeof import('@ant-design/icons-vue')['SyncOutlined']
-    TeamOutlined: typeof import('@ant-design/icons-vue')['TeamOutlined']
-    UnlockOutlined: typeof import('@ant-design/icons-vue')['UnlockOutlined']
-    UserDeleteOutlined: typeof import('@ant-design/icons-vue')['UserDeleteOutlined']
-    UsergroupAddOutlined: typeof import('@ant-design/icons-vue')['UsergroupAddOutlined']
-    UsergroupDeleteOutlined: typeof import('@ant-design/icons-vue')['UsergroupDeleteOutlined']
-    UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined']
-    WechatOutlined: typeof import('@ant-design/icons-vue')['WechatOutlined']
-  }
-}

src/views/index.vue

@@ -1,12 +1,429 @@
 <script setup lang="ts">
 import { PageContainer } from '@ant-design-vue/pro-layout';
+import useAppStore from '@/store/modules/app';
+import useUserStore from '@/store/modules/user';
+
+import {onMounted,onUnmounted} from "vue";
+import {ColumnsType} from "ant-design-vue/lib/table";
+import {parseDateToStr} from "@/utils/date-utils";
+import {SizeType} from "ant-design-vue/lib/config-provider";
+import {reactive,toRaw} from "vue";
+import {listNotice} from "@/api/system/notice";
+import {listUser} from "@/api/system/user";
+import {listMain} from "@/api/system/home";
+const userStore = useUserStore();
+const { appName, appVersion } = useAppStore();
+import { TooltipComponent, TooltipComponentOption } from 'echarts/components';
+import { GaugeChart, GaugeSeriesOption } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+import * as echarts from 'echarts/core';
+import {
+  TitleComponent,
+  TitleComponentOption,
+  LegendComponent,
+  LegendComponentOption
+} from 'echarts/components';
+import { PieChart, PieSeriesOption } from 'echarts/charts';
+import { LabelLayout } from 'echarts/features';
+
+
+echarts.use([TooltipComponent,
+  GaugeChart,
+  TitleComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout]);
+
+type EChartsOption = echarts.ComposeOption<
+  TooltipComponentOption | GaugeSeriesOption
+  | TitleComponentOption
+  | LegendComponentOption
+  | PieSeriesOption
+  >;
+
+
+
+
+
+var option: any;
+
+option = {
+  title: {
+    text: 'Referer of a Website',
+    subtext: 'Fake Data',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: '50%',
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+  ]
+};
+
+/*
+onMounted(()=>{
+  var chartDom = document.getElementById('main')!;
+  var myChart = echarts.init(chartDom);
+  option && myChart.setOption(option);
+})*/
+
+/**表格字段列 */
+//customRender(){} ----单元格处理
+let tableColumns: ColumnsType = [
+  {
+    title: '对象',
+    dataIndex: 'name',
+    align: 'center',
+    key:'status'
+  },
+  {
+    title: '网元状态',
+    dataIndex: 'status',
+    align: 'center',
+  },
+  {
+    title: '刷新时间',
+    dataIndex: 'refresh',
+    align: 'center',
+  },
+  {
+    title: '版本',
+    dataIndex: 'version',
+    align: 'center',
+  },
+  {
+    title: 'IP地址',
+    dataIndex: 'ipAddress',
+    key: 'groupName',
+    align: 'center',
+  }
+];
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: string;
+  /**斑马纹 */
+  striped: boolean;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  striped: false,
+  seached: false,
+  data: [],
+  selectedRowKeys: [],
+});
+
+
+/**表格状态 */
+let nfInfo: any = reactive({
+ obj:"OMC",
+  version:"1.6.1",
+  status:"正常",
+  number:"",
+  outTimeDate:"",
+});
+
+/**查询网元状态列表 */
+function fnGetList() {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  listMain().then(res => {
+    tableState.data = res;
+    tableState.loading = false;
+    var rightNum=0;
+    var errorNum=0;
+
+for (let i=0;i<res.length;i++){
+  if (res[i].status=='正常'){
+    rightNum++;
+  }else{
+    errorNum++;
+  }
+}
+    echarts.init(document.getElementById('echarts-records')).clear();
+    var chartDom = document.getElementById('echarts-records');
+    var myChart = echarts.init(chartDom);
+
+    var option;
+    option = {
+      title: {
+        text: '',
+        subtext: '',
+        left: 'center'
+      },
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'left'
+      },
+      series: [
+        {
+          name: '网元状态',
+          type: 'pie',
+          radius: '70%',
+          center:['50%','50%'],
+          data: [
+            { value: rightNum, name: '正常' },
+            { value: errorNum, name: '异常' }
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+
+          ,label:{
+
+          }
+        }
+      ]
+    };
+
+    option && myChart.setOption(option);
+    window.onresize = function () { // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
+      myChart.resize();
+      option.resize();
+    }
+  });
+
+
+
+}
+
+/**點擊網元名 */
+function init(e: any) {
+ console.log(toRaw(e))
+  let realData=toRaw(e);
+
+  var chartDom = document.getElementById('echarts-records');
+  var myChart = echarts.init(chartDom);
+  myChart.clear(); //怕遗留以前得元素
+  var option;
+
+
+  var nfMenUsage=  Math.round(realData.memUsage.nfUsedMem/ realData.memUsage.totalMem* 10000) / 100.00 ;
+  var nfMaxDiskSpace =Math.round(realData.diskSpace.partitionInfo[1].used/ realData.diskSpace.partitionInfo[1].total* 10000) / 100.00 ;
+  option = {
+    tooltip: {
+      formatter: '{a} <br/>{b} : {c}%'
+    },
+    series: [
+      {
+        name: 'Nf Memory usage',
+        center: ['17%', '50%'],
+        radius:'80%',
+        type: 'gauge',
+        progress: {
+          show: true
+        },
+        pointer: {   //仪表盘的指针
+          //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
+          show: true,
+          //指针长度
+          length: '60%',
+
+        },
+        title:{
+          offsetCenter: [0, '90%'],
+        },
+        detail: {
+          valueAnimation: true,
+          formatter: '{value}',
+          textStyle:{
+            fontSize:18
+          },
+          offsetCenter: [0, '60%'],
+        },
+        data: [
+          {
+            value: nfMenUsage,
+            name: 'MEM'
+          }
+        ]},{
+        center: ['50%', '50%'],
+        name: 'Nf CPU usage',
+        radius:'80%',
+        type: 'gauge',
+        progress: {
+          show: true
+        },
+
+        title:{
+          offsetCenter: [0, '90%'],
+        },
+        detail: {
+          valueAnimation: true,
+          formatter: '{value}',
+          textStyle:{
+            fontSize:18
+          },
+          offsetCenter: [0, '60%'],
+        },
+        data: [
+          {
+            value: realData.cpuUsage.nfCpuUsage/100,
+            name: 'CPU'
+          }],
+
+      },
+      {
+        center: ['83%', '50%'],
+        name: 'NF maximum disk usage',
+        radius:'80%',
+        type: 'gauge',
+        progress: {
+          show: true
+        },
+        title: {
+          offsetCenter: [0, '90%'],
+        },
+        detail: {
+          valueAnimation: true,
+          formatter: '{value}',
+          textStyle:{
+            fontSize:18
+          },
+          offsetCenter: [0, '60%'],
+        },
+        data: [
+          {
+            value: nfMaxDiskSpace,
+            name: 'DiskSpace'
+          }],
+
+      }
+    ]
+  };
+
+  option && myChart.setOption(option);
+  window.onresize = function () { // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
+    myChart.resize();
+    option.resize();
+  }
+
+  nfInfo.obj=realData.name;
+  nfInfo.number=realData.serialNum;
+  nfInfo.outTimeDate=realData.expiryDate;
+
+
+}
+
+onMounted(()=>{
+
+  fnGetList();
+
+
+})
+
+
+
+/**查询用户列表
+function fnGetList() {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  queryParams.beginTime = queryRangePicker.value[0];
+  queryParams.endTime = queryRangePicker.value[1];
+  listUser(toRaw(queryParams)).then(res => {
+    if (res.code === 1 && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+    }
+    tableState.loading = false;
+  });
+}*/
+
 </script>
 
 <template>
-  <PageContainer :breadcrumb="false">
+  <PageContainer :breadcrumb="false"  >
-    <template #content> 展示统计数据 </template>
+
-    <a-row :gutter="16"> </a-row>
+
+    <a-row :gutter="16">
+      <a-col :lg="14" :md="16" :xs="24">
+        <!-- 表格列表 -->
+        <a-table
+          class="table"
+          row-key="id"
+          :columns="tableColumns"
+          :loading="tableState.loading"
+          :data-source="tableState.data"
+          :pagination="false"
+          :scroll="{ x: true }"
+        >
+          <template #bodyCell="{ column, record }">
+             <template v-if="column.key === 'status'">
+               <div v-if="record.status == '正常'"><a-tag color="blue" @click="init(record)">{{ record.name }}</a-tag></div>
+               <div v-else><a-tag color="pink" >{{ record.name }}</a-tag> </div>
+            </template>
+          </template>
+        </a-table>
+      </a-col>
+      <a-col :lg="10" :md="8" :xs="24">
+        <a-card title="运行状态" style="margin-bottom: 16px">
+          <div id="echarts-records" style="width: 100%;min-height:200px"></div>
+
+        </a-card>
+        <a-card title="简略信息" style="margin-top: 16px">
+          <a-descriptions  bordered :column="1"  :label-style="{ width: '160px' }">
+            <a-descriptions-item label="对象">{{ nfInfo.obj }}</a-descriptions-item>
+            <template v-if="nfInfo.obj === 'OMC'">
+              <a-descriptions-item label="版本号" >{{ nfInfo.version }}</a-descriptions-item>
+              <a-descriptions-item label="系统状态">{{ nfInfo.status }}</a-descriptions-item>
+            </template>
+            <template v-else>
+              <a-descriptions-item label="序列号" >{{ nfInfo.number }}</a-descriptions-item>
+              <a-descriptions-item label="许可证到期日期">{{ nfInfo.outTimeDate }}</a-descriptions-item>
+            </template>
+
+          </a-descriptions>
+        </a-card>
+      </a-col>
+    </a-row>
   </PageContainer>
+
 </template>
 
 <style lang="less" scoped></style>