cauto 2 years ago
parent
commit
38cdc92b8d
9 changed files with 225 additions and 62 deletions
  1. 1 1
      public/menu.json
  2. 3 44
      src/App.vue
  3. 12 0
      src/apis/node.ts
  4. 5 0
      src/model/login.ts
  5. 2 0
      src/model/node.ts
  6. 8 3
      src/router/index.ts
  7. 100 0
      src/view/login/login.vue
  8. 67 0
      src/view/main.vue
  9. 27 14
      src/view/node/index.vue

+ 1 - 1
public/menu.json

@@ -4,7 +4,7 @@
       "key": "1",
       "icon": "AppleOutlined",
       "title": "主页",
-      "path": "/"
+      "path": "/home"
     },
     {
       "key": "2",

+ 3 - 44
src/App.vue

@@ -1,54 +1,13 @@
 <template>
-  <a-layout>
-
-
-    <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">
-        <menu-unfold-outlined
-            v-if="collapsed"
-            class="trigger"
-            @click="() => (collapsed = !collapsed)"
-        />
-        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
-      </a-layout-header>
-
-      <a-layout-content
-          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
-      >
-        <router-view></router-view>
-      </a-layout-content>
-    </a-layout>
-  </a-layout>
+  <router-view></router-view>
 </template>
 <script lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import Sider from './components/sider.vue'
-import {
-  UserOutlined,
-  VideoCameraOutlined,
-  UploadOutlined,
-  MenuUnfoldOutlined,
-  MenuFoldOutlined,
-} from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
-  components: {
-    UserOutlined,
-    VideoCameraOutlined,
-    UploadOutlined,
-    MenuUnfoldOutlined,
-    MenuFoldOutlined,
-    Sider
-  },
+
   setup() {
     return {
-      selectedKeys: ref<string[]>(['1']),
-      collapsed: ref<boolean>(false)
+
     };
   },
 });

+ 12 - 0
src/apis/node.ts

@@ -1,6 +1,7 @@
 
 import httprequest from "/@/request/index";
 import {INodeList, NodeAddParam, NodeinfoParam, NodeItme, NodeItmeData, TaskNode} from "/@/model/node"
+import {LoginRet} from "/@/model/login";
 
 
 // 用户登录
@@ -45,3 +46,14 @@ export const taskNodeReqUse = (params : any) => {
 export const nodeStatusReqUse = (params : any) => {
     return httprequest.get<NodeItmeData>("api/v1/node/nodestatus",params)
 }
+
+
+//登录
+export const loginReqUse = (params : any) => {
+    return httprequest.post<LoginRet>("api/v1/auth/login",params)
+}
+
+//登录退出
+export const loginOutReqUse = (params : any) => {
+    return httprequest.post<any>("api/v1/auth/loginout",params)
+}

+ 5 - 0
src/model/login.ts

@@ -0,0 +1,5 @@
+
+
+export interface LoginRet {
+    Token:string;
+}

+ 2 - 0
src/model/node.ts

@@ -27,6 +27,8 @@ export interface INode {
   pingType: number;
   urlStatus: number;
   nodeMs : number;
+  urlCount : number;
+  urlRet : number;
 }
 
 

+ 8 - 3
src/router/index.ts

@@ -3,12 +3,17 @@ import HelloWorld from '/@/components/HelloWorld.vue'
 import Index from '/@/view/index/index.vue'
 import Node from '/@/view/node/index.vue'
 import Task from '/@/view/task/index.vue'
+import Login from '/@/view/login/index.vue'
+import index from "/@/view/index/index.vue";
+import main from "/@/view/main.vue";
+
 
 const routes: Array<RouteRecordRaw> = [
+
     {
-     path: '/',
-     name: 'index',
-      component: Index
+        path: '/',
+        name: 'index',
+        component: Login
     },
     {
         path:'/node',

+ 100 - 0
src/view/login/login.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>ceshi</div>
+  <div class="login-container">
+    <h2 class="login-title">登陆页面</h2>
+    <a-form ref="form" :model="form" class="login-form">
+      <h2 class="title">用户登录 LOGIN</h2>
+      <a-form-item>
+        <a-input v-model="form.username">
+          <a-icon slot="prefix" type="user" />
+        </a-input>
+      </a-form-item>
+      <a-form-item>
+        <a-input-password v-model="form.password">
+          <a-icon slot="prefix" type="unlock" />
+        </a-input-password>
+      </a-form-item>
+      <a-form-item>
+        <a-button class="submit" type="primary" @click="onLogin">登录</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, reactive} from "vue";
+import {loginReqUse} from "/@/apis/node.js";
+
+export default defineComponent({
+  name: "login",
+  setup(){
+      const form = reactive({
+        username : "",
+        password : "",
+      })
+
+      const onLogin = ()=>{
+        loginReqUse({
+          "username" : "",
+          "password" : ""
+        }).then(r => {
+          console.log(r.data.Token);
+        })
+      }
+
+      return {
+        onLogin,
+        form
+      }
+  }
+
+})
+</script>
+
+<style lang="less" scoped>
+.login-form {
+  width: 565px;
+  height: 372px;
+  margin: 0 auto;
+  background: white;
+  padding: 40px 110px;
+}
+
+/* 背景 */
+.login-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: white;
+  background-size: 100% 100%;
+}
+
+/* Log */
+.login-title {
+  color: #fff;
+  text-align: center;
+  margin: 100px 0 60px 0;
+  font-size: 36px;
+}
+/* 登陆按钮 */
+.submit {
+  width: 100%;
+  height: 45px;
+  font-size: 16px;
+}
+/* 用户登陆标题 */
+.title {
+  margin-bottom: 50px;
+  color: #fff;
+  font-weight: 700;
+  font-size: 24px;
+}
+/* 输入框 */
+.inputBox {
+  height: 45px;
+}
+/* 输入框内左边距50px */
+.ant-input-affix-wrapper .ant-input:not(:first-child) {
+  padding-left: 50px;
+}
+</style>

+ 67 - 0
src/view/main.vue

@@ -0,0 +1,67 @@
+<template>
+  <a-layout>
+
+
+    <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">
+        <menu-unfold-outlined
+            v-if="collapsed"
+            class="trigger"
+            @click="() => (collapsed = !collapsed)"
+        />
+        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
+      </a-layout-header>
+
+      <a-layout-content
+          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
+      >
+        <router-view></router-view>
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+<script lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import Sider from '/@/components/sider.vue'
+import {
+  UserOutlined,
+  VideoCameraOutlined,
+  UploadOutlined,
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+} from '@ant-design/icons-vue';
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  components: {
+    UserOutlined,
+    VideoCameraOutlined,
+    UploadOutlined,
+    MenuUnfoldOutlined,
+    MenuFoldOutlined,
+    Sider
+  },
+  setup() {
+    return {
+      selectedKeys: ref<string[]>(['1']),
+      collapsed: ref<boolean>(false)
+    };
+  },
+});
+</script>
+<style lang="less" scoped>
+
+
+
+.ant-layout {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+}
+
+
+</style>

+ 27 - 14
src/view/node/index.vue

@@ -37,7 +37,8 @@
       <a-form-item ref="urlstatus" name="urlstatus">
         <label>urlstatus:</label>
         <a-input v-model:value="formState.urlstatus" placeholder="输入状态"/>
-      </a-form-item>
+      </a-form-item
+      >
       <a-form-item>
         <label>ping类型:</label>
         <a-select v-model:value="formState.pingType" placeholder="选择ping类型">
@@ -144,59 +145,69 @@ export default defineComponent({
         key: 'id',
       },
       {
-        title: 'name',
+        title: '服务器名称',
         name: 'name',
         dataIndex: 'name',
         key: 'name',
       },
       {
-        title: 'host',
+        title: '服务器IP',
         dataIndex: 'host',
         key: 'host',
       },
       {
-        title: 'port',
+        title: '服务器端口',
         dataIndex: 'port',
         key: 'port',
       },
       {
-        title: 'url',
+        title: '切换地址',
         key: 'url',
         dataIndex: 'url',
       },
       {
-        title: 'updateAt',
+        title: '更新时间',
         key: 'updateAt',
         dataIndex:'updateAt',
       },
       {
-        title: 'createAt',
+        title: '创建时间',
         key: 'createAt',
         dataIndex: 'createAt',
       },
       {
-        title: 'pingType',
+        title: 'PING类型',
         key: 'pingType',
         dataIndex: 'pingType',
       },
       {
-        title: 'urlStatus',
+        title: '切换地址状态',
         key: 'urlStatus',
         dataIndex: 'urlStatus',
       },
       {
-        title: 'nodeMs',
+        title: '节点延迟',
         key: 'nodeMs',
         dataIndex: 'nodeMs',
       },
       {
-        title: 'Delete',
+        title: 'url次数',
+        key: 'urlCount',
+        dataIndex: 'urlCount',
+      },
+      {
+        title: 'url返回结果',
+        key: 'urlRet',
+        dataIndex: 'urlRet',
+      },
+      {
+        title: '删除',
         key: 'delete',
         dataIndex: 'delete',
         // slots: { customRender: 'delete' },
       },
       {
-        title: 'Edit',
+        title: '编辑',
         key: 'edit',
         dataIndex: 'edit',
         // slots: { customRender: 'edit' },
@@ -292,7 +303,9 @@ export default defineComponent({
         url:  "",
         pingType: undefined,
         isedit : false,
-        urlstatus: 0
+        urlstatus: 0,
+        urlcount:0,
+        urlret: "",
     })
 
 
@@ -318,7 +331,7 @@ export default defineComponent({
         "port" : toRaw(formState).port,
         "url"  : toRaw(formState).url,
         "pingType": toRaw(formState).pingType,
-        "urlstatus": toRaw(formState).urlstatus
+        "urlstatus": toRaw(formState).urlstatus,
       }
       if (isedit){
         editNode(reqdata)