--新增首页

src/views/index.vue

@@ -81,11 +81,52 @@ let tableState: TabeStateType = reactive({
 
 /**表格状态 */
 let nfInfo: any = reactive({
-  obj: 'OMC',
-  version: '1.6.1',
-  status: '正常',
-  number: '',
-  outTimeDate: '',
+  obj: "OMC",
+  version: "1.6.1",
+  status: "正常",
+  number: "",
+  outTimeDate: "",
+});
+
+/**表格状态类型 */
+type nfStateType = {
+  /**主机名 */
+  hostName: string;
+  /**操作系统信息 */
+  osInfo: string;
+  /**数据库信息 */
+  dbInfo: string;
+  /**IP地址 */
+  ipAddress: string;
+  /**端口 */
+  port: number;
+  /**版本 */
+  version: string;
+  /**CPU利用率 */
+  cpuUse: string;
+  /**内存使用 */
+  memoryUse: string;
+  /**用户容量 */
+  capability: number;
+  /**序列号 */
+  serialNum: string;
+  /**许可证到期日期 */
+/*  selectedRowKeys: (string | number)[];*/
+  expiryDate:string
+};
+/**网元详细信息 */
+let pronInfo: nfStateType = reactive({
+  hostName: '5gc',
+  osInfo: 'Linux 5gc 4.15.0-112-generic #113-Ubuntu SMP Thu Jul 9 23:41:39 UTC 2020 x86_64 GNU/Linux',
+  dbInfo: 'adb v1.0.1',
+  ipAddress: '-',
+  port:3030,
+  version: '-',
+  cpuUse: '-',
+  memoryUse:'-',
+  capability:0  ,
+  serialNum: '-',
+  expiryDate:"-",
 });
 
 /**查询网元状态列表 */
@@ -155,9 +196,7 @@ function fnGetList() {
 
 /**點擊網元名 */
 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(); //怕遗留以前得元素
@@ -191,6 +230,7 @@ function init(e: any) {
           show: true,
           //指针长度
           length: '60%',
+
         },
         title: {
           offsetCenter: [0, '90%'],
@@ -275,8 +315,52 @@ function init(e: any) {
   nfInfo.obj = realData.name;
   nfInfo.number = realData.serialNum;
   nfInfo.outTimeDate = realData.expiryDate;
+
+
 }
 
+/**抽屉 网元详细信息 */
+const visible = ref(false);
+const closeDrawer = () => {
+  visible.value = false;
+};
+/**抽屉 网元详细信息 */
+
+/**监听表格行事件*/
+function rowClick(record, index) {
+  return {
+    onClick: (event) => {
+      console.log(toRaw(record), "666");
+/*      console.log( index,  "666");
+      console.log( event,  "666");*/
+      if (toRaw(record).status=='异常'){
+        message.error(`网元状态异常`, 2);
+        return false;
+      }else {
+        let pronData=toRaw(record);
+        //渲染详细信息
+        pronInfo={
+
+          hostName: pronData.hostName,
+          osInfo:pronData.osInfo,
+          dbInfo: pronData.dbInfo,
+          ipAddress:pronData.ipAddress,
+          port:pronData.port,
+          version:pronData.version,
+          cpuUse:pronData.name+":"+pronData.cpuUsage.nfCpuUsage/100+"%; "+"SYS:"+pronData.cpuUsage.sysCpuUsage / 100+"%",
+          memoryUse:"Total:"+pronData.memUsage.totalMem+"KB; "+pronData.name+":"+pronData.memUsage.nfUsedMem+"KB; SYS:"+pronData.memUsage.sysMemUsage+"KB",
+          capability:pronData.capability ,
+          serialNum:pronData.serialNum,
+          expiryDate:pronData.expiryDate,
+        }
+      }
+      visible.value = true;
+
+    },
+  };
+}
+
+
 onMounted(() => {
   fnGetList();
 });
@@ -284,6 +368,36 @@ onMounted(() => {
 
 <template>
   <PageContainer :breadcrumb="false">
+    <div>
+      <a-drawer :visible="visible" @close="closeDrawer" :width="700">
+        <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
+          <a-descriptions-item :label="t('views.index.hostName')">{{ pronInfo.hostName }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.osInfo')">{{ pronInfo.osInfo }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.dbInfo')">{{ pronInfo.dbInfo }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.ipAddress')">{{ pronInfo.ipAddress }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.port')">{{ pronInfo.port }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.version')">{{ pronInfo.version }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.cpuUse')">{{ pronInfo.cpuUse }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.memoryUse')">{{ pronInfo.memoryUse }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.capability')">{{ pronInfo.capability }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.serialNum')">{{ pronInfo.serialNum }}</a-descriptions-item>
+          <a-descriptions-item :label="t('views.index.expiryDate')">{{ pronInfo.expiryDate }}</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-drawer>
+    </div>
+
     <a-row :gutter="16">
       <a-col :lg="14" :md="16" :xs="24">
         <!-- 表格列表 -->
@@ -295,13 +409,12 @@ onMounted(() => {
           :data-source="tableState.data"
           :pagination="false"
           :scroll="{ x: true }"
+          :customRow="rowClick"
         >
           <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>
+                <a-tag color="blue" @click="init(record)">{{ record.name }}</a-tag>
               </div>
               <div v-else>
                 <a-tag color="pink">{{ record.name }}</a-tag>
@@ -312,41 +425,27 @@ onMounted(() => {
       </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>
+          <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>
+          <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>
+              <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>
+              <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>