0.7

public/menu.json

@@ -10,16 +10,16 @@
       "key": "2",
       "icon": "AppleOutlined",
       "title": "节点管理",
-      "path": "",
+      "path": "/nodeMage",
       "children": [
         {
-          "key": "2",
+          "key": "2.1",
           "icon": "AppleOutlined",
           "title": "节点",
           "path": "/node"
         },
         {
-          "key": "3",
+          "key": "2.2",
           "icon": "AppleOutlined",
           "title": "定时管理",
           "path": "/task"

src/App.vue

@@ -1,7 +1,10 @@
 <template>
   <a-layout>
-    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
+
+
+    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible    mode="inline">
       <Sider />
+
     </a-layout-sider>
     <a-layout>
       <a-layout-header style="background: #fff; padding: 10px">

src/apis/node.ts

@@ -1,6 +1,6 @@
 
 import httprequest from "/@/request/index";
-import {INodeList, NodeAddParam, NodeinfoParam, TaskNode} from "/@/model/node"
+import {INodeList, NodeAddParam, NodeinfoParam, NodeItme, NodeItmeData, TaskNode} from "/@/model/node"
 
 
 // 用户登录
@@ -40,3 +40,8 @@ export const stopNodeReqUse = (params : any) => {
 export const taskNodeReqUse = (params : any) => {
     return httprequest.get<TaskNode>("api/api/v1/node/task",params)
 }
+
+// 查看节点PING状态
+export const nodeStatusReqUse = (params : any) => {
+    return httprequest.get<NodeItmeData>("api/api/v1/node/nodestatus",params)
+}

src/components/sider.vue

@@ -1,8 +1,7 @@
 <template>
   <a-menu
-      :default-open-keys="['home']"
-      :default-selected-keys="['home']"
-      :inline-collapsed="collapsed"
+      v-model:openKeys="openKeys"
+      v-model:selectedKeys="selectedKeys"
       mode="inline"
       theme="dark"
   >
@@ -13,13 +12,13 @@
           <span>{{ item.title }}</span>
         </router-link>
       </a-menu-item>
-      <submenu v-else :key="item.key + 1" :menu-info="item" />
+      <submenu v-else :key="item.key" :menu-info="item" />
     </div>
   </a-menu>
 </template>
 <script lang="ts">
 import { Menu, } from 'ant-design-vue';
-import {defineComponent} from "vue";
+import {defineComponent, onMounted, reactive, ref, toRefs} from "vue";
 import axios from "axios";
 import submenu from '/@/components/submenu.vue'
 export default defineComponent({
@@ -28,27 +27,27 @@ export default defineComponent({
     submenu,
     Menu
   },
-  created() {
-    this.getData()
-  },
-  data() {
-    return {
-      collapsed: true,
-      menuList: [],
-    }
-  },
-  methods: {
-    getData() {
-      axios.get('/menu.json').then(res => {
-        console.log(res.data)
-        this.menuList = res.data.menuItems
-        console.log(this.menuList)
+  setup() {
+      const status = reactive({
+        menuList: [],
       })
-    },
-    toggleCollapsed() {
-      this.collapsed = !this.collapsed
-    },
-  },
+
+      const getData = () => {
+        axios.get('/menu.json').then(res => {
+          status.menuList = res.data.menuItems
+        })
+      }
+
+      onMounted(()=>{
+        getData()
+      })
+
+      return {
+        ...toRefs(status),
+        selectedKeys: ref(['2']),
+        openKeys : ref(['2.1']),
+      }
+  }
 })
 </script>
 

src/components/submenu.vue

@@ -12,7 +12,7 @@
         </router-link>
       </a-menu-item>
       
-      <submenu v-else :key="item.key + 1" :menu-info="item" />
+      <submenu v-else :key="item.key" :menu-info="item" />
     </div>
   </a-sub-menu>
 

src/model/node.ts

@@ -40,3 +40,34 @@ export interface TaskNode {
   retCronCount: number;
   status: number;
 }
+
+
+export interface Node {
+  id: number;
+  Name: string;
+  Host: string;
+}
+
+export interface PingLog {
+  serverid: number;
+  avgdelay: string;
+  createAt: string;
+}
+
+export interface NodeItme {
+  Node: Node;
+  PingLog: PingLog[];
+}
+
+export interface NodeItmeData {
+  NodeItme: NodeItme[];
+}
+
+export interface NodeStatus {
+  Id: number;
+  Name: string;
+  Host: string;
+  Serverid: number;
+  Avgdelay: string;
+  CreateAt: string;
+}

src/view/index/index.vue

@@ -1,16 +1,147 @@
 <template>
-  <div>首页</div>
+  <div>
+    <div>
+      <a-space>
+        <a-button type="primary" class="role_btn role_add" @click="onRrefresh">刷新数据</a-button>
+        <a-input v-model:value="autoRefreshTime" placeholder="输入定时时间(60)秒" style="width: 200px" />
+        <a-button type="primary" class="role_btn role_add" v-if="timer == null" @click="onStartTime">开启刷新数据</a-button>
+        <a-button type="primary" class="role_btn role_add"  v-else  disabled  @click="onStartTime">开启刷新数据</a-button>
+        <a-button type="primary" class="role_btn role_add" v-if="timer != null" @click="onStopTime">停止刷新数据</a-button>
+        <a-button type="primary" class="role_btn role_add" v-else  disabled @click="onStopTime">停止刷新数据</a-button>
+      </a-space>
+    </div>
+    <div style="margin-top: 10px">
+      <a-spin :spinning="spinning">
+        <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }" :data-source="nodeItme">
+          <template #renderItem="{ item }">
+            <a-list-item>
+              <a-card :title="item.Name">
+                {{ item.Host }}
+                <div>
+                  {{ item.Avgdelay }}
+                  <span>ms</span>
+                </div>
+
+              </a-card>
+            </a-list-item>
+
+          </template>
+        </a-list>
+      </a-spin>
+
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import {
-  defineComponent,
+  defineComponent, onBeforeUnmount, onMounted, reactive, toRaw, toRefs,
 } from 'vue';
+import {nodeStatusReqUse} from "/@/apis/node";
+import {NodeItme, NodeItmeData, NodeStatus} from "/@/model/node";
 export default defineComponent({
     setup() {
+
+
+
+      const state = reactive({
+        nodeItme : [] as NodeStatus[],
+        timer: null,
+        countdown : 0,
+        loading: false,
+        autoRefreshTime: 60,
+        spinning: false,
+      })
+
+      const onStopTime = () => {
+        console.log("停止定时器")
+        state.loading = true
+        window.clearInterval(state.timer)
+        state.timer = null
+      }
+
+      const onRrefresh = ()=>{
+          nodeStatus()
+      }
+
+      const onStartTime = ()=>{
+        //console.log(state.autoRefreshTime);
+        if ( state.timer == null){
+          state.loading = false
+          state.timer = window.setInterval( () => {
+            //console.log(state.countdown, 'countdown')
+            //不loading的时候才会执行
+            if (!state.loading) {
+              //console.log(state.loading);
+              //countdown小于我们想要的定时时间的时候 定时器也是一秒执行一次 就继续+1
+              if (state.countdown < state.autoRefreshTime) {
+                state.countdown = state.countdown + 1
+                //当定时器到时间的时候 去干我们想干的事情 refresh()
+                if (state.countdown >= state.autoRefreshTime) {
+                   onRrefresh()
+
+                  //console.log("onRrefresh")
+                }
+              }
+            }
+          }, 1000)
+
+        }
+      }
+      const nodeStatus = () => {
+        state.spinning = true
+        state.loading = true
+         nodeStatusReqUse(null).then( data => {
+           state.nodeItme = [] as NodeStatus[]
+           for (let i = 0; i < data.data.NodeItme.length; i++) {
+             let nodeStatusT = <NodeStatus>{}
+             nodeStatusT.Id = data.data.NodeItme[i].Node.id
+             nodeStatusT.Name = data.data.NodeItme[i].Node.Name
+             nodeStatusT.Host = data.data.NodeItme[i].Node.Host
+             if (data.data.NodeItme[i].PingLog == null){
+               nodeStatusT.Avgdelay = "0"
+               nodeStatusT.Serverid = 0
+               nodeStatusT.CreateAt = ""
+             } else {
+               for (let j = 0; j < data.data.NodeItme[i].PingLog.length; j++) {
+                 nodeStatusT.Avgdelay = data.data.NodeItme[i].PingLog[j].avgdelay
+                 nodeStatusT.CreateAt = data.data.NodeItme[i].PingLog[j].createAt
+                 nodeStatusT.Serverid = data.data.NodeItme[i].PingLog[j].serverid
+               }
+             }
+             state.nodeItme.push(nodeStatusT)
+           }
+        })
+        state.loading = false
+        state.spinning = false
+        state.countdown = 0
+      }
+
+      onBeforeUnmount(() => {
+        if (state.timer != null)
+        {
+          window.clearInterval(state.timer)
+        }
+      })
+
+      onMounted(   ()=>{
+         nodeStatus()
+      })
+
+
+      return {
+        onRrefresh,
+        onStartTime,
+        onStopTime,
+        ...toRefs(state)
+      }
     }
 })
 
+
+function polling(params: any) {
+    throw new Error('Function not implemented.');
+}
 </script>
 
 <style>

src/view/node/index.vue

@@ -7,11 +7,7 @@
 
   <!-- 添加点击对话框 -->
   <a-modal v-model:visible="Visible" title="Title" @ok="handleOk">
-    <template #footer>
-      <a-button key="back" @click="cancel">关闭</a-button>
-      <a-button key="back" @click="resetForm">Reset</a-button>
-      <a-button key="submit" type="primary" @click="onSubmit">Submit</a-button>
-    </template>
+
     <a-form
         ref="formRef"
         :model="formState"
@@ -38,6 +34,10 @@
         <label>url:</label>
         <a-input v-model:value="formState.url" placeholder="输入切换地址url"/>
       </a-form-item>
+      <a-form-item ref="urlstatus" name="urlstatus">
+        <label>urlstatus:</label>
+        <a-input v-model:value="formState.urlstatus" placeholder="输入状态"/>
+      </a-form-item>
       <a-form-item>
         <label>ping类型:</label>
         <a-select v-model:value="formState.pingType" placeholder="选择ping类型">
@@ -45,38 +45,51 @@
           <a-select-option :value=1>tcpping</a-select-option>
         </a-select>
       </a-form-item>
-<!--      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">-->
-<!--        <a-button type="primary" @click="onSubmit">Create</a-button>-->
-<!--        <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>-->
-<!--      </a-form-item>-->
+
+<!--      <template #footer>-->
+<!--        <a-button key="back" @click="cancel">关闭</a-button>-->
+<!--        <a-button key="back" @click="resetForm">Reset</a-button>-->
+<!--        <a-button key="submit" type="primary" @click="onSubmit">Submit</a-button>-->
+<!--      </template>-->
+      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
+
+        <a-button v-if="formState.isedit === false" type="primary" @click="onSubmit(true)">编辑</a-button>
+        <a-button v-else type="primary" @click="onSubmit(false)">Create</a-button>
+
+        <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
+      </a-form-item>
     </a-form>
   </a-modal>
 
     <!-- 加载节点信息 -->
   <a-table :row-selection="rowSelection" :columns="columns" :data-source="datalist" rowKey="id" :style="{ height: '100%', borderRight: 0 }">
-
-      <template #delete="{ record }">
+      <template v-slot:bodyCell="{column , record}">
+        <template v-if="column.dataIndex === 'delete'">
           <a-popconfirm
               v-if="datalist.length"
               title="是否删除这条记录"
               @confirm="onDeleteNode(record)"
           >
-              <a>删除</a>
+            <a>删除</a>
           </a-popconfirm>
-      </template>
+        </template>
+
+        <template v-if="column.dataIndex === 'edit'">
+          <a @click="onEditNode(record)">编辑</a>
+          <!--          <a-popconfirm-->
+          <!--              v-if="datalist.length"-->
+          <!--              title="编辑"-->
+          <!--              @confirm="onDeleteNode(record)"-->
+          <!--          >-->
+          <!--              <a>Delete</a>-->
+          <!--          </a-popconfirm>-->
+        </template>
 
-    <template #edit="{ record }">
-      <a @click="onEditNode(record)">编辑</a>
-<!--          <a-popconfirm-->
-<!--              v-if="datalist.length"-->
-<!--              title="编辑"-->
-<!--              @confirm="onDeleteNode(record)"-->
-<!--          >-->
-<!--              <a>Delete</a>-->
-<!--          </a-popconfirm>-->
       </template>
 
 
+
+
   </a-table>
 </template>
 
@@ -94,7 +107,7 @@ import {
   unref
 } from "vue";
 import {INode, NodeAddParam} from "/@/model/node";
-import {delNodeReqUse, nodeAddReqUse, nodeReqUse} from "/@/apis/node";
+import {delNodeReqUse, editNodeReqUse, nodeAddReqUse, nodeReqUse} from "/@/apis/node";
 import { ColumnProps } from "ant-design-vue/lib/table";
 import {it} from "node:test";
 import {message} from "ant-design-vue";
@@ -117,12 +130,11 @@ export default defineComponent({
     }
   },
   mounted() {
-    console.log(this.addRoleVisible);
-    console.log('mounted!')
+
   },
   setup() {
     const formRef = ref()
-    const reload: any = inject('reload')
+   // const reload: any = inject('reload')
     //const reload = inject("reload");
     const columns = [
       {
@@ -181,13 +193,13 @@ export default defineComponent({
         title: 'Delete',
         key: 'delete',
         dataIndex: 'delete',
-        slots: { customRender: 'delete' },
+        // slots: { customRender: 'delete' },
       },
       {
         title: 'Edit',
         key: 'edit',
         dataIndex: 'edit',
-        slots: { customRender: 'edit' },
+        // slots: { customRender: 'edit' },
       },
     ];
     let ids = ""
@@ -214,7 +226,6 @@ export default defineComponent({
     const getNodeList = async () => {
       const node_list = await nodeReqUse(null)
       state.datalist = node_list.data.nodeList
-      reload()
     }
 
     const addNodeList = async (data) => {
@@ -235,6 +246,22 @@ export default defineComponent({
 
     }
 
+    const editNode = async (data) => {
+      let ret =  await  editNodeReqUse(data)
+      if (ret.code == 0)
+      {
+        console.log(state.Visible);
+        state.Visible = false
+        await getNodeList()
+      }
+      else {
+        console.log(state.Visible);
+        state.Visible = true
+
+      }
+
+    }
+
 
     const delNodeById = async (data) => {
 
@@ -258,11 +285,14 @@ export default defineComponent({
     })
 
     const formState = reactive({
+        id: 0,
         name: "",
         host: "",
         port: 22,
         url:  "",
         pingType: undefined,
+        isedit : false,
+        urlstatus: 0
     })
 
 
@@ -280,27 +310,32 @@ export default defineComponent({
       formRef.value.resetFields();
     };
 
-    const onSubmit = () =>{
-
+    const onSubmit = (isedit) =>{
       const reqdata = {
+        "id"   : toRaw(formState).id,
         "name" : toRaw(formState).name,
         "host" : toRaw(formState).host,
         "port" : toRaw(formState).port,
         "url"  : toRaw(formState).url,
-        "pingType": toRaw(formState).pingType
+        "pingType": toRaw(formState).pingType,
+        "urlstatus": toRaw(formState).urlstatus
+      }
+      if (isedit){
+        editNode(reqdata)
+      } else {
+        addNodeList(reqdata)
       }
-      addNodeList(reqdata)
-      console.log(reqdata);
-
-
     }
 
     const onEditNode = (record) => {
+      formState.id = record.id
       formState.name = record.name
       formState.host = record.host
       formState.port = record.port
       formState.url = record.url
       formState.pingType = record.pingType
+      formState.urlstatus = record.urlstatus
+      formState.isedit = false
       state.Visible = true
 
     }
@@ -311,6 +346,8 @@ export default defineComponent({
       formState.port = 22
       formState.url = ""
       formState.pingType = undefined
+      formState.urlstatus = 0
+      formState.isedit = true
       state.Visible = true;
     }
     const handleOk= () =>{