From 0dcdbab83595503b558b14faab7d57a27136f665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=8B=BC?= <2468023037@qq.com>
Date: Thu, 13 Feb 2025 22:03:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/Invite.ts                             |  62 +++++++
 src/views/dashboard/monitor/index.vue         | 160 +++++++++---------
 src/views/dictionary/index.vue                |   7 +-
 .../jobuser/components/FamilyTreeChart.vue    |  93 ++++++++++
 src/views/jobuser/index.vue                   |  10 +-
 5 files changed, 247 insertions(+), 85 deletions(-)
 create mode 100644 src/api/Invite.ts
 create mode 100644 src/views/jobuser/components/FamilyTreeChart.vue

diff --git a/src/api/Invite.ts b/src/api/Invite.ts
new file mode 100644
index 0000000..7cf30e8
--- /dev/null
+++ b/src/api/Invite.ts
@@ -0,0 +1,62 @@
+import axios from 'axios';
+import { S } from 'mockjs';
+
+
+export interface LoginData {
+  username: string;
+  password: string;
+}
+
+
+export interface jobuser {
+  status: string;
+  code: number;
+  message: string;
+  data: {
+    jobuser: {
+        username: string;         // 账号
+        password: string;         // 密码
+        time: Date;        // 注册时间
+        type: number;             // 累计在线时间
+    }[]
+  };
+
+}
+
+export interface Black {
+    status: string;
+    code: number;
+    message: string;
+    data: Array<{}>;
+}
+export interface Refresh {
+  status: string;
+  code: number;
+  data: {
+    access_token: string;
+    refresh_token: string;
+  };
+  message: string;
+}
+
+export interface ListParams {
+    black?: string;
+    username?: string;
+  }
+/**
+ * 
+ * @param data 获取子
+ * @returns 
+ */
+export function getSonId(id: string) {
+  return axios.post<Black>('/api/v1/Invite/getSonId', { id });
+}
+
+/**
+ * 
+ * @param data 获取父
+ * @returns 
+ */
+export function getDayId(id: string) {
+    return axios.post<Black>('/api/v1/Invite/getDayId', { id });
+  }
diff --git a/src/views/dashboard/monitor/index.vue b/src/views/dashboard/monitor/index.vue
index 421e11f..029d59f 100644
--- a/src/views/dashboard/monitor/index.vue
+++ b/src/views/dashboard/monitor/index.vue
@@ -1,87 +1,85 @@
 <template>
-  <div class="container">
-    <Breadcrumb :items="['menu.dashboard', 'menu.dashboard.monitor']" />
-    <div class="layout">
-      <div class="layout-left-side">
-        <ChatPanel />
-      </div>
-      <div class="layout-content">
-        <a-space :size="16" direction="vertical" fill>
-          <Studio />
-          <DataStatistic />
-        </a-space>
-      </div>
-      <div class="layout-right-side">
-        <a-space :size="16" direction="vertical" fill>
-          <StudioStatus />
-          <QuickOperation />
-          <StudioInformation />
-        </a-space>
-      </div>
-    </div>
-  </div>
+  <div ref="chartContainer" style="width: 100%; height: 600px;"></div>
 </template>
 
-<script lang="ts" setup>
-  import ChatPanel from './components/chat-panel.vue';
-  import Studio from './components/studio.vue';
-  import DataStatistic from './components/data-statistic.vue';
-  import StudioStatus from './components/studio-status.vue';
-  import QuickOperation from './components/quick-operation.vue';
-  import StudioInformation from './components/studio-information.vue';
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import * as echarts from "echarts";
+
+export default defineComponent({
+  name: "FamilyTreeChart",
+  setup() {
+    const chartContainer = ref(null);
+
+    // 树形数据
+    const chartOption = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}'
+      },
+      series: [
+        {
+          type: 'tree',  // 使用树形图
+          layout: 'tree',  // 布局类型：'radial' 或 'tree'
+          roam: true,  // 启用拖动功能,
+          orient: 'vertical',// 方向改为自上而下
+          initialTreeDepth: -1, // 可以让所有节点都展开
+          data: [
+            {
+              name: '祖父1',
+              symbolSize: 40,
+              children: [
+                {
+                  name: '父亲',
+                  symbolSize: 30,
+                  children: [
+                    {
+                      name: '我',
+                      symbolSize: 20,
+                      children: [
+                        { name: '妻子', symbolSize: 20 }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  name: '母亲',
+                  symbolSize: 30,
+                }
+              ]
+            }
+          ],
+          itemStyle: {
+            color: '#63b1f2',  // 节点颜色
+          },
+          label: {
+            position: 'top',
+            verticalAlign: 'middle',
+            align: 'center',
+            fontSize: 12,
+          },
+          lineStyle: {
+            color: '#aaa',
+            width: 2,
+            curveness: 0.3,
+          }
+        }
+      ]
+    };
+
+    // 在组件挂载后初始化图表
+    onMounted(() => {
+      const myChart = echarts.init(chartContainer.value);
+      myChart.setOption(chartOption);
+    });
+
+    return {
+      chartContainer,  // 将 chartContainer 传给模板
+    };
+  }
+});
 </script>
 
-<script lang="ts">
-  export default {
-    name: 'Monitor',
-  };
-</script>
-
-<style scoped lang="less">
-  .container {
-    padding: 0 20px 20px 20px;
-  }
-
-  .layout {
-    display: flex;
-
-    &-left-side {
-      flex-basis: 300px;
-    }
-
-    &-content {
-      flex: 1;
-      padding: 0 16px;
-    }
-
-    &-right-side {
-      flex-basis: 280px;
-    }
-  }
-</style>
-
-<style lang="less" scoped>
-  // responsive
-  @media (max-width: @screen-lg) {
-    .layout {
-      flex-wrap: wrap;
-      &-left-side {
-        flex: 1;
-        flex-basis: 100%;
-        margin-bottom: 16px;
-      }
-
-      &-content {
-        flex: none;
-        flex-basis: 100%;
-        padding: 0;
-        order: -1;
-        margin-bottom: 16px;
-      }
-
-      &-right-side {
-        flex-basis: 100%;
-      }
-    }
-  }
+<style scoped>
+/* 样式可根据需要自定义 */
 </style>
diff --git a/src/views/dictionary/index.vue b/src/views/dictionary/index.vue
index 00c7dae..7612e06 100644
--- a/src/views/dictionary/index.vue
+++ b/src/views/dictionary/index.vue
@@ -25,6 +25,9 @@
                 <a-form-item field="service_user_url" label="人工客服">
                     <a-input v-model="form.service_user_url"  placeholder="请输入对应的地址" />
                 </a-form-item>
+                <a-form-item field="points" label="积分设置(大于多少人工客服)">
+                    <a-input v-model="form.points"  placeholder="请输入积分" />
+                </a-form-item>
                 <a-form-item>
                     <a-button html-type="submit">保存</a-button>
                 </a-form-item>
@@ -45,7 +48,9 @@ const form = reactive({
     service_2:"",
     service_3:"",
     service_url:"",
-    service_user_url:""
+    service_user_url:"",
+    points:""
+
 });
 const handleSubmit=()=>{
     setAll(form)
diff --git a/src/views/jobuser/components/FamilyTreeChart.vue b/src/views/jobuser/components/FamilyTreeChart.vue
new file mode 100644
index 0000000..7f026c6
--- /dev/null
+++ b/src/views/jobuser/components/FamilyTreeChart.vue
@@ -0,0 +1,93 @@
+<template>
+  <div ref="chartContainer" style="width: 800px; height: 550px;"></div>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, ref, onMounted } from "vue";
+import * as echarts from "echarts";
+import { getSonId, getDayId } from '@/api/Invite';
+import { reactive } from "vue";
+    const chartContainer = ref(null);
+    const props = defineProps({
+        id: Number,
+    });
+    const data = reactive( {
+        name: '',
+        symbolSize:40,
+        children: []
+    });
+    // 树形数据
+    const chartOption = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}'
+      },
+      series: [
+        {
+          type: 'tree',  // 使用树形图
+          layout: 'tree',  // 布局类型：'radial' 或 'tree'
+          roam: true,  // 启用拖动功能,
+          orient: 'vertical',// 方向改为自上而下
+          initialTreeDepth: -1, // 可以让所有节点都展开
+          data: [
+          data
+          ],
+          itemStyle: {
+            color: '#63b1f2',  // 节点颜色
+          },
+          label: {
+            position: 'top',
+            verticalAlign: 'middle',
+            align: 'center',
+            fontSize: 12,
+          },
+          lineStyle: {
+            color: '#aaa',
+            width: 2,
+            curveness: 0.3,
+          }
+        }
+      ]
+    };
+
+    // 在组件挂载后初始化图表
+    onMounted(() => {
+        getSonId(props.id).then(res => {
+            data.name = props.id || '';
+            
+            if(res.data!=null){
+                res.data.forEach((element: any) => {
+                    let item = {
+                        name:element.invitename,
+                        symbolSize:20,
+                        children: []
+                    }
+                        getSonId(element.invitename).then(res1 => {
+                            if(res1.data!=null){
+                                res1.data.forEach((element1: any) => {
+                                    let item1 = {
+                                        name: element1.invitename,
+                                        symbolSize:20,
+                                        children: []
+                                    };
+                                    item.children.push(item1);
+                                })
+                                data.children.push(item); 
+                                const myChart = echarts.init(chartContainer.value);
+                                myChart.setOption(chartOption); 
+                            }
+                        })
+                    
+                        
+                });
+            }
+
+        })
+   
+    });
+
+</script>
+
+<style scoped>
+/* 样式可根据需要自定义 */
+</style>
diff --git a/src/views/jobuser/index.vue b/src/views/jobuser/index.vue
index 45a1c6c..4ebabbb 100644
--- a/src/views/jobuser/index.vue
+++ b/src/views/jobuser/index.vue
@@ -19,7 +19,7 @@
               <a-space>
               <a-button v-show="record.black != 1" status="danger" @click="showConfirm(record.id)">封禁</a-button>
               <a-button v-show="record.black == 1" status="danger" @click="showConfirm(record.id)">解禁</a-button>
-              <a-button  @click="show_group(record.id)">查看团队</a-button>
+              <a-button  @click="show_group(record.username)">查看团队</a-button>
             </a-space>
             </template>
           </a-table-column>
@@ -27,11 +27,14 @@
       </a-table>
     </a-card>
     <!-- 团队关系展示 -->
-    <a-modal v-model:visible="modal_visible" width="auto">
+    <a-modal v-model:visible="modal_visible" width="800px">
       <template #title>
         团队关系展示
       </template>
-      <showgroup :id="show_group_id"></showgroup>
+      <showgroup :id="show_group_id">
+        
+      </showgroup>
+      <FamilyTreeChart :id="show_group_id" v-if="modal_visible"></FamilyTreeChart>
       </a-modal>
   </div>
 </template>
@@ -43,6 +46,7 @@ import { Modal } from '@arco-design/web-vue';
 import { Message } from '@arco-design/web-vue';
 
 import showgroup from './components/showgroup.vue';
+import FamilyTreeChart from './components/FamilyTreeChart.vue';
 
 interface DataItem {
   username: string;