feat: 新增
This commit is contained in:
parent
cdd52dadcb
commit
0dcdbab835
|
|
@ -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 });
|
||||
}
|
||||
|
|
@ -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>
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Monitor',
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue