From be6c2cbe3a89bd622b70180ca6dc9f0e6684ce87 Mon Sep 17 00:00:00 2001
From: Dong Xia <dev12301@linx-info.com>
Date: Tue, 29 Oct 2024 17:24:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E7=BB=84=E5=86=85=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E5=88=97=E8=A1=A8=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/node_group.js                     |  24 +++
 src/pages/node/components/node_list.vue   | 232 ++++++++++++++++++++++
 src/pages/node/nodeGroupManager/index.vue |  27 +++
 3 files changed, 283 insertions(+)
 create mode 100644 src/pages/node/components/node_list.vue

diff --git a/src/api/node_group.js b/src/api/node_group.js
index caf91b2..7156c3d 100644
--- a/src/api/node_group.js
+++ b/src/api/node_group.js
@@ -59,3 +59,27 @@ export function nodelist(data) {
     data
   })
 }
+
+// 分组添加节点
+export function addnode(data) {
+  return axios({
+    url: '/nodegroupinfo/addnode',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
+
+// 分组删除节点
+export function deletenode(data) {
+  return axios({
+    url: '/nodegroupinfo/deletenode',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8'
+    },
+    method: 'post',
+    data
+  })
+}
diff --git a/src/pages/node/components/node_list.vue b/src/pages/node/components/node_list.vue
new file mode 100644
index 0000000..46617d8
--- /dev/null
+++ b/src/pages/node/components/node_list.vue
@@ -0,0 +1,232 @@
+<template>
+
+  <div ref="listSet" class="listSet">
+    <div ref="filter" class="filter">
+      <a-button type="primary" icon="plus" @click="penddingAddVisble = true">添加节点</a-button>
+    </div>
+    <a-table
+      :loading="loading"
+      :columns="columns"
+      :data-source="list"
+      max-height="calc(100vh - 145px)"
+      row-key="nodeId"
+      :pagination="false"
+      bordered
+    >
+      <a-tooltip slot="nodeId" slot-scope="text" placement="topLeft" :title="text">
+        <span>{{ text }}</span>
+      </a-tooltip>
+      <a-tooltip slot="createTime" slot-scope="text" placement="topLeft" :title="text">
+        <span>{{ text }}</span>
+      </a-tooltip>
+      <template slot="operation" slot-scope="text, record">
+        <a-tooltip title="节点管理">
+          <a-button :disabled="record.status === 0" type="link" @click="handleNode(record)"><a-icon type="desktop" /></a-button>
+        </a-tooltip>
+        <a-tooltip title="移除">
+          <a-button type="link" @click="deletenode(record)"><a-icon type="delete" class="danger" /></a-button>
+        </a-tooltip>
+      </template>
+    </a-table>
+    <!-- 展示待添加节点 -->
+    <a-modal
+      v-model="penddingAddVisble"
+      title="待添加节点"
+      :width="800"
+    >
+      <template slot="footer">
+        <a-button type="primary" @click="penddingAddVisble = false">
+          关闭
+        </a-button>
+      </template>
+    </a-modal>
+    <!-- 管理节点 -->
+    <a-drawer class="nodeManager" :title="drawerTitle" placement="right" width="100%" :visible="drawerVisible" @close="onClose">
+      <!-- 节点管理组件 -->
+      <node-layout v-if="drawerVisible" :node="temp" />
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import { parseTime } from '@/utils/time'
+import NodeLayout from '@/pages/node/list/node-layout'
+import { nodelist, deletenode } from '@/api/node_group'
+import { getNodeStatus, setNodeLocalIp, getNodeList } from '@/api/node'
+
+import AllNode from './all_node.vue'
+export default {
+  components: {
+    NodeLayout
+  },
+  props: {
+    parentMsg: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      list: [],
+      tableHeight: 0,
+      columns: [
+        { title: '节点 ID', dataIndex: 'nodeId', key: 'nodeId', width: 100, ellipsis: true },
+        { title: '节点名称', dataIndex: 'name', key: 'name', ellipsis: true },
+        { title: '添加进组时间', dataIndex: 'createTime', key: 'createTime', ellipsis: true, customRender: (text) => { return parseTime(text) } },
+        { title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operation' }, width: 120, align: 'center' }
+      ],
+      nodeMsgs: [],
+      drawerTitle: '',
+      penddingAddVisble: false,
+      drawerVisible: false,
+      temp: []
+    }
+  },
+  watch: {
+    nodeMsgs: {
+      handler(val) {
+        if (val.length && this.drawerVisible) {
+          const nodeId = this.$route.query.nodeId
+          const node = val.find(item => item.id === nodeId)
+          if (node.status === 0) {
+            this.onClose()
+            this.$notification.warning({ message: `节点${node.name}(${node.url})已离线` })
+          }
+        }
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.tableHeight = this.$refs.listSet.clientHeight - 140
+    })
+    this.loadData()
+  },
+  methods: {
+    nodelist() {
+      this.loading = true
+      nodelist({ groupId: this.parentMsg.id, pageNum: 1, pageSize: 99999 }).then(res => {
+        if (res.code === 200) {
+          // 对已查询的接口做标记，以减少调取次数
+          const originalList = [...this.list]
+          this.list = res.data.list
+          this.list.forEach(element => {
+            originalList.forEach(param => {
+              if (element.nodeId === param.nodeId) {
+                element.checked = param?.checked
+                if (param?.checked)element.status = param?.status
+              }
+            })
+          })
+          // 赋值基本属性
+          this.list.forEach(element => {
+            this.nodeMsgs.forEach(param => {
+              if (element.nodeId === param.id) {
+                element.url = param.url
+                element.name = param.name
+                element.cycle = param.cycle
+                element.id = param.id
+              }
+            })
+          })
+          this.getAllNodeStatus()
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 删除节点
+    deletenode(record) {
+      this.$confirm({
+        title: '系统提示',
+        content: '确定要移除 ' + record.nodeId + ' 出组吗？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          deletenode({ groupId: this.parentMsg.id, nodeId: record.nodeId }).then(res => {
+            if (res.code === 200) {
+              this.nodelist()
+            }
+          })
+        }
+      })
+    },
+    // 判断当前主机列表中所有主机状态
+    getAllNodeStatus() {
+      let promiseList = []
+      this.list.forEach(item => {
+        if (!item.checked) {
+          const p = getNodeStatus(item.nodeId).then(res => {
+            if (res.code === 200) {
+            // 主机在线
+              item['status'] = 1
+              this.list = [...this.list]
+              // 获取到节点调用一次编辑接口
+              const query = JSON.parse(JSON.stringify(item))
+              query.type = ''
+            } else {
+              item['status'] = 0
+              item.system = '--'
+              item.kernel = '--'
+            }
+          }).catch(() => {
+            item['status'] = 0
+            item.system = '--'
+            item.kernel = '--'
+          }).finally(() => {
+            item.checked = true
+          })
+          promiseList.push(p)
+        }
+      })
+      Promise.all(promiseList).then(() => {
+        this.list = [...this.list]
+      })
+    },
+    // 管理节点
+    handleNode(record) {
+      setNodeLocalIp({ nodeId: record.nodeId, nodeIp: record.url.split(':')[0] }).then(() => {
+        this.temp = Object.assign(record)
+        this.drawerTitle = `${this.temp.name} (${this.temp.url})`
+        this.drawerVisible = true
+        let nodeId = this.$route.query.nodeId
+        if (nodeId !== record.id) {
+          this.$router.push({
+            query: { nodeId: record.id }
+          })
+        }
+      })
+    },
+    // 加载数据
+    loadData() {
+      this.loading = true
+      this.nodeMsgs = []
+      getNodeList().then((res) => {
+        if (res.code === 200) {
+          this.nodeMsgs = res.data || []
+          this.nodelist()
+        }
+      }).finally(() => {
+
+      })
+    },
+    // 关闭抽屉层
+    onClose() {
+      this.drawerVisible = false
+      this.$router.push({
+        query: { nodeId: null }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+//  .listSet{
+//   height:calc(100vh - 210px)
+//  }
+</style>
diff --git a/src/pages/node/nodeGroupManager/index.vue b/src/pages/node/nodeGroupManager/index.vue
index 2fcd809..5b87d35 100644
--- a/src/pages/node/nodeGroupManager/index.vue
+++ b/src/pages/node/nodeGroupManager/index.vue
@@ -22,6 +22,9 @@
         <span>{{ text }}</span>
       </a-tooltip>
       <template slot="operation" slot-scope="text, record">
+        <a-tooltip title="组内节点">
+          <a-button type="link" @click="handleNode(record)"><a-icon type="snippets" /></a-button>
+        </a-tooltip>
         <a-tooltip title="编辑">
           <a-button type="link" @click="handleEdit(record)"><a-icon type="edit" /></a-button>
         </a-tooltip>
@@ -52,6 +55,18 @@
         </a-form-model-item>
       </a-form-model>
     </a-modal>
+    <!-- 控制组内节点 -->
+    <a-drawer
+      :title="'组内节点( '+parentMsg.name+' )'"
+      placement="right"
+      :mask-closable="false"
+      :width="700"
+      height="100%"
+      :visible="nodelistVisible"
+      @close="closeShowNodeList"
+    >
+      <NodeList v-if="nodelistVisible" :parent-msg="parentMsg" />
+    </a-drawer>
     <!-- 条件搜索 -->
     <a-drawer
       title="条件搜索"
@@ -108,7 +123,11 @@
 <script>
 import { parseTime } from '@/utils/time'
 import { listGroup, addGroup, updateGroup, deleteGroup } from '@/api/node_group'
+import NodeList from './components/node_list.vue'
 export default {
+  components: {
+    NodeList
+  },
   data() {
     return {
       loading: false,
@@ -254,6 +273,14 @@ export default {
         }
       })
     },
+    // 组内节点
+    handleNode(record) {
+      this.parentMsg = record
+      this.nodelistVisible = true
+    },
+    closeShowNodeList() {
+      this.nodelistVisible = false
+    }
   }
 }
 </script>
-- 
Gitee