feat: 拓扑网管信息页面多语言翻译

2024-01-05 11:58:08 +08:00
parent 0b6303e544
commit defe8c4755
4 changed files with 82 additions and 195 deletions
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -1025,6 +1025,22 @@ export default {
        kbps: "Network entry/exit",
        commandstats: "Command Statistics",
      },
+      topology: {
+        showAllHide: "Show all hidden items",
+        collapseAll: "Collapse all clusters",
+        expandAll: "Expanded clusters",
+        foldAll: "Folded Cluster",
+        hideEdge: "hidden edge",
+        hideNode: "hidden node",
+        state: "State",
+        normalcy: "Normalcy",
+        exceptions: "Exceptions",
+        refreshTime: "RefreshTime",
+        name: "Name",
+        version: "Version",
+        validityPeriod: "Validity Period",
+        switchLayout: "Switch Layout",
+      },
      topologyBuild: {
        graphMode: "Graph Model",
        graphGroup: "Graph Group name",
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -1025,6 +1025,22 @@ export default {
        kbps: "网络入口/出口",
        commandstats: "命令统计",
      },
+      topology: {
+        showAllHide: "显示所有隐藏项",
+        collapseAll: "折叠所有群组",
+        expandAll: "展开集群",
+        foldAll: "折叠集群",
+        hideEdge: "隐藏边",
+        hideNode: "隐藏节点",
+        state: "状态",
+        normalcy: "正常",
+        exceptions: "异常",
+        refreshTime: "刷新时间",
+        name: "网元名称",
+        version: "网元版本",
+        validityPeriod: "有效期",
+        switchLayout: "切换布局",
+      },
      topologyBuild: {
        graphMode: "图模式",
        graphGroup: "图组名",
--- a/src/views/monitor/topology/graph.ts
+++ b/src/views/monitor/topology/graph.ts
@@ -262,7 +262,6 @@ registerNode(
      }
      const style = cfg.style || {};
      const colorSet = cfg.colorSet || colorSets[0];
-      console.log('=== ', cfg);

      // halo for hover
      group.addShape('circle', {
@@ -316,13 +315,13 @@ registerNode(
      // 网元状态标识
      if (cfg.info) {
        const neInfo: any = cfg.info;
-        const hasNeState = neInfo.serverState.neId;
+        const neOnline = neInfo.serverState.online;
        const neStateShape = group.addShape('circle', {
          attrs: {
            x: r - 3,
            y: -r + 3,
            r: 5,
-            fill: hasNeState ? '#6DD400' : 'red',
+            fill: neOnline ? '#6DD400' : 'red',
            lineWidth: 0.5,
            stroke: '#FFFFFF',
          },
@@ -1008,7 +1007,7 @@ const getForceLayoutConfig = (
    onLayoutEnd: () => {
      if (largeGraphMode) {
        graph.getEdges().forEach((edge: any) => {
-          console.log('onLayoutEnd', edge.oriLabel);
+          // console.log('onLayoutEnd', edge.oriLabel);
          if (!edge.oriLabel) return;
          edge.update({
            label: labelFormatter(edge.oriLabel, labelMaxLength),
@@ -1341,7 +1340,7 @@ const bindListener = (graph: any) => {
    stopLayout();
    if (!shiftKeydown) clearFocusItemState(graph);
    const { item } = evt;
-    console.log(item);
+    // console.log(item);
    // highlight the clicked edge
    graph.setItemState(item, 'focus', true);
  });
@@ -1349,16 +1348,20 @@ const bindListener = (graph: any) => {
  // click canvas to cancel all the focus state
  graph.on('canvas:click', (evt: any) => {
    clearFocusItemState(graph);
-    console.log(
-      graph.getGroup(),
-      graph.getGroup().getBBox(),
-      graph.getGroup().getCanvasBBox()
-    );
+    // console.log(
+    //   graph.getGroup(),
+    //   graph.getGroup().getBBox(),
+    //   graph.getGroup().getCanvasBBox()
+    // );
  });
 };

 // 导出渲染函数
-export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
+export function randerGroph(
+  t: any,
+  graphG6Dom: HTMLElement | undefined,
+  data: any
+) {
  if (!graphG6Dom) return;

  // graphG6Dom.value.style.backgroundColor = '#2b2f33';
@@ -1437,10 +1440,10 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
        "
      >
        <div id="show" style="cursor: pointer; margin-bottom: 2px">
-          1. 显示所有隐藏项
+          1. ${t('views.monitor.topology.showAllHide')}
        </div>
        <div id="collapseAll" style="cursor: pointer; margin-bottom: 2px">
-          2. 折叠所有集群
+          2. ${t('views.monitor.topology.collapseAll')}
        </div>
      </div>`;
      }
@@ -1460,10 +1463,10 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
              "
            >
              <div id="expand" style="cursor: pointer; margin-bottom: 2px">
-                1. 展开集群
+                1. ${t('views.monitor.topology.expandAll')}
              </div>
              <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-                2. 隐藏节点
+                2. ${t('views.monitor.topology.hideNode')}
              </div>
            </div>
            `;
@@ -1478,10 +1481,10 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
              "
            >
              <div id="collapse" style="cursor: pointer; margin-bottom: 2px">
-                1. 折叠集群
+                1. ${t('views.monitor.topology.foldAll')}
              </div>
              <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-                2. 隐藏节点
+                2. ${t('views.monitor.topology.hideNode')}
              </div>
            </div>
            `;
@@ -1497,7 +1500,7 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
            "
          >
            <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-              1. 隐藏边
+              1. ${t('views.monitor.topology.hideEdge')}
            </div>
          </div>
          `;
@@ -1606,11 +1609,6 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
        return `<div><span>ID：</span><span>${node.id}</span></div>`;
      }
      const serverState = neInfo.serverState;
-      console.log(neInfo);
-      const hasNeID = serverState.neId;
-      if (!hasNeID) {
-        return '<div><span>状态：</span><span>异常</span></div>';
-      }
      return `
        <div
        style="
@@ -1619,19 +1617,27 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
            width: 200px;
        "
        >
-        <div><span>状态：</span><span>
-        ${hasNeID ? '正常' : '异常'}
+        <div><strong>${t('views.monitor.topology.state')}：</strong><span>
+        ${
+          neInfo.serverState.online
+            ? t('views.monitor.topology.normalcy')
+            : t('views.monitor.topology.exceptions')
+        }
        </span></div>
-        <div><span>刷新时间：</span><span>
+        <div><strong>${t('views.monitor.topology.refreshTime')}：</strong><span>
        ${serverState.refreshTime ?? '--'}
        </span></div>
-        <div><span>ID：</span><span>${hasNeID}</span></div>
-        <div><span>名称：</span><span>${serverState.neName ?? '--'}</span></div>
-        <div><span>版本：</span><span>
+        <div>========================</div>
+        <div><strong>ID：</strong><span>${serverState.neId}</span></div>
+        <div><strong>${t('views.monitor.topology.name')}：</strong><span>
+        ${serverState.neName ?? '--'}
+        </span></div>
+        <div><strong>IP：</strong><span>${serverState.neIP}</span></div>
+        <div><strong>${t('views.monitor.topology.version')}：</strong><span>
        ${serverState.version ?? '--'}
        </span></div>
-        <div><span>SN：</span><span>${serverState.sn ?? '--'}</span></div>
-        <div><span>有效期：</span><span>
+        <div><strong>SN：</strong><span>${serverState.sn ?? '--'}</span></div>
+        <div><strong>${t('views.monitor.topology.validityPeriod')}：</strong><span>
        ${serverState.expire ?? '--'}
        </span></div> 
        </div>
--- a/src/views/monitor/topology/index.vue
+++ b/src/views/monitor/topology/index.vue
@@ -25,14 +25,18 @@ const graphG6Data = reactive<Record<string, any>>({
 /**查询全部网元数据列表 */
 function fnRanderData() {
  if (!graphG6Dom.value) return;
-  graphG6.value = randerGroph(graphG6Dom.value, graphG6Data);
+  graphG6.value = randerGroph(t, graphG6Dom.value, graphG6Data);
 }

+/**网元状态定时器 */
+const stateTimeout = ref<any>(null);
+
 /**查询网元状态 */
 async function fnGetState() {
+  clearTimeout(stateTimeout.value);
  for (const node of graphG6Data.nodes) {
    const ne = node.info;
-    if (ne.neType === 'OMC') continue;
+    // if (ne.neType === 'OMC') continue;
    const result = await stateNe(ne.neType, ne.neId);
    if (result.code === RESULT_CODE_SUCCESS) {
      ne.serverState = result.data;
@@ -40,16 +44,12 @@ async function fnGetState() {
        ne.serverState.refreshTime,
        'HH:mm:ss'
      );
+      // 修改网元状态颜色
+      const neShape = graphG6.value.findById(ne.neName);
+      graphG6.value.setItemState(neShape, 'neState', ne.serverState.online);
    }
-    // 修改网元状态颜色
-    const neShape = graphG6.value.findById(ne.neName);
-    graphG6.value.setItemState(
-      neShape,
-      'neState',
-      result.code === RESULT_CODE_SUCCESS
-    );
  }
-  setTimeout(() => fnGetState(), 30_000);
+  stateTimeout.value = setTimeout(() => fnGetState(), 30_000);
 }

 /**查询全部网元数据列表 */
@@ -73,15 +73,6 @@ function fnGetList(refresh: boolean = false) {
            // 根网管
            if (item.neType === 'OMC') {
              rootNode = item.neName;
-              item.serverState = {
-                neId: item.neId,
-                neName: item.neName,
-                neType: item.neType,
-                expire: '-',
-                refreshTime: '-',
-                sn: '-',
-                version: '-',
-              };
              nodes.push({
                id: item.neName,
                label: item.neName,
@@ -134,7 +125,6 @@ function fnGetList(refresh: boolean = false) {
        }
        graphG6Data.nodes = nodes;
        graphG6Data.edges = edges;
-        console.log(graphG6Data);
        return true;
      } else {
        message.warning({
@@ -157,7 +147,7 @@ function fnGetList(refresh: boolean = false) {
 }

 onMounted(() => {
-  // 获取网元列表
+  // 获取网元列表G
  fnGetList();
 });
 </script>
@@ -170,151 +160,16 @@ onMounted(() => {
      size="small"
    >
      <!-- 插槽-卡片左侧侧 -->
-      <template #title v-if="false">
-        <div class="button-container" style="margin-bottom: -12px">
-          <a-button type="primary">
-            <template #icon>
-              <PlusOutlined />
-            </template>
-            {{ t('common.addText') }}
-          </a-button>
-
-          <a-button type="primary" danger ghost>
-            <template #icon>
-              <DeleteOutlined />
-            </template>
-            {{ t('views.neUser.auth.batchDelText') }}
-          </a-button>
-          <a-popconfirm
-            :title="t('views.neUser.sub.loadDataConfirm')"
-            :ok-text="t('common.ok')"
-            :cancel-text="t('common.cancel')"
-          >
-            <a-button type="dashed" danger>
-              <template #icon>
-                <SyncOutlined />
-              </template>
-              {{ t('views.neUser.sub.loadData') }}
-            </a-button>
-          </a-popconfirm>
-
-          <a-button type="dashed">
-            <template #icon>
-              <ImportOutlined />
-            </template>
-            {{ t('views.neUser.sub.import') }}
-          </a-button>
-
-          <a-popconfirm
-            :title="t('views.neUser.sub.exportConfirm')"
-            ok-text="TXT"
-            ok-type="default"
-          >
-            <a-button type="dashed">
-              <template #icon>
-                <ExportOutlined />
-              </template>
-              {{ t('views.neUser.sub.export') }}
-            </a-button>
-          </a-popconfirm>
-        </div>
-      </template>
+      <template #title> </template>
      <!-- 插槽-卡片右侧 -->
      <template #extra>
        <a-button type="default" @click.prevent="switchLayout()">
          <template #icon><RetweetOutlined /></template>
-          Switch Layout
+          {{ t('views.monitor.topology.switchLayout') }}
        </a-button>
      </template>

      <div ref="graphG6Dom" class="chart"></div>
-
-      <template v-if="false">
-        <div
-          style="
-            display: flex;
-            flex-direction: column;
-            width: 200px;
-            background: #e6f7ff;
-          "
-        >
-          <div><span>状态：</span><span>正常</span></div>
-          <div><span>刷新时间：</span><span>18:37:22</span></div>
-          <div><span>ID：</span><span>neID</span></div>
-          <div><span>名称：</span><span>neName</span></div>
-          <div><span>版本：</span><span>2.2312.8</span></div>
-          <div><span>SN：</span><span>13770707</span></div>
-          <div><span>有效期：</span><span>2024-03-31</span></div>
-        </div>
-        ===
-        <div
-          style="
-            display: flex;
-            flex-direction: column;
-            width: 140px;
-            background: #e6f7ff;
-          "
-        >
-          <div id="show" style="cursor: pointer; margin-bottom: 2px">
-            1. 显示所有隐藏项
-          </div>
-          <div id="collapseAll" style="cursor: pointer; margin-bottom: 2px">
-            2. 折叠所有集群
-          </div>
-        </div>
-        ===
-        <div
-          style="
-            display: flex;
-            flex-direction: column;
-            width: 100px;
-            background: #e6f7ff;
-          "
-        >
-          <div id="expand" style="cursor: pointer; margin-bottom: 2px">
-            1. 展开集群
-          </div>
-          <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-            2. 隐藏节点
-          </div>
-        </div>
-        ===
-        <div
-          style="
-            display: flex;
-            flex-direction: column;
-            width: 160px;
-            background: #e6f7ff;
-          "
-        >
-          <div id="collapse" style="cursor: pointer; margin-bottom: 2px">
-            1. 折叠集群
-          </div>
-          <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-            2. 隐藏节点
-          </div>
-          <div id="restart" style="cursor: pointer; margin-bottom: 2px">
-            3. 重启
-          </div>
-        </div>
-        ===
-        <div
-          style="
-            display: flex;
-            flex-direction: column;
-            width: 100px;
-            background: #e6f7ff;
-          "
-        >
-          <div id="hide" style="cursor: pointer; margin-bottom: 2px">
-            1. 隐藏边
-          </div>
-        </div>
-        <!-- 组件 -->
-        <div class="charts">
-          <ChartGraphG6></ChartGraphG6>
-        </div>
-      </template>
    </a-card>
  </PageContainer>
 </template>
@@ -325,10 +180,4 @@ onMounted(() => {
  height: calc(100vh - 300px);
  background-color: rgb(43, 47, 51);
 }
-.charts {
-  width: 100%;
-  height: 500px;
-  background-color: rgb(238, 237, 237);
-  margin-top: 32px;
-}
 </style>