Commit 277dfcb8 by 肖玉娟

🐞 fix:赛事、演播室、模块页面

parent 90ec6b47
......@@ -64,6 +64,10 @@ const LayoutMenu = () => {
{
path: '/match',
label: '赛事管理'
},
{
path: '/interact',
label: '互动模块管理'
}
]
......
import React, { useCallback, useState } from 'react'
import { Button, message, Popconfirm, Space } from 'antd'
import { DList } from '@/components/DList'
import { DTable, usePTable } from '@/components/DTable'
// import { useAppSelector } from '@/hooks/useStore'
import { DelApi, GetListByPageApi } from './common/services'
import { TState } from './common/typing'
import Edit from './components/addUpdate'
const Interact = () => {
const [dataSource, setDataSource] = useState<TState[]>([])
const [currentId, setCurrentId] = useState<number>(NaN)
const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
const { tableProps, actionRef } = usePTable<TState>({
headerTitle: '互动模块列表',
request: useCallback(async (params: any) => {
const result = {
data: [
{
id: 1,
studioName: '发电时刻',
studioId: '发电时刻描述'
},
{
id: 2,
studioName: '选帖上暂停',
studioId: '选帖上暂停描述'
},
{
id: 3,
studioName: '球员评分',
studioId: '球员评分描述'
}
],
total: 1,
success: true
}
try {
const { pageSize, current: pageNum, studioName } = params
const { data } = await GetListByPageApi({
pageBean: {
pageNum,
pageSize
},
studioName
})
const { list, total } = data
setDataSource(list)
// result.data = list
result.total = total
} catch (error) {
console.error('请求列表失败', error)
}
return result
}, []),
columns: [
{
title: 'ID',
dataIndex: 'id',
width: 100,
copyable: true,
hideInSearch: true
},
{
title: '模块名称',
key: 'studioName',
dataIndex: 'studioName',
hideInSearch: false
},
{
title: '模块描述',
key: 'studioId',
dataIndex: 'studioId',
hideInSearch: true
},
// {
// title: '类型',
// key: 'ip1',
// dataIndex: 'ip1',
// hideInSearch: true,
// render: (text, record) => [
// <span key='primaryService'>{record?.ip1}:{record?.port1}</span>
// ]
// },
// {
// title: '所关联互动模块',
// key: 'ip2',
// dataIndex: 'ip2',
// hideInSearch: true,
// render: (text, record) => [
// <span key='primaryService'>{record?.ip2}:{record?.port2}</span>
// ]
// },
{
title: '创建时间',
key: 'create_time',
dataIndex: 'create_time',
valueType: 'dateTime',
hideInSearch: true
},
{
title: '修改时间',
key: 'update_time',
dataIndex: 'update_time',
valueType: 'dateTime',
hideInSearch: true
},
{
title: '操作',
valueType: 'option',
render: (text, record) => [
<Space key="option" size={20}>
<a key="editable">
编辑
</a>
<Popconfirm
title="确认删除该条数据?"
onConfirm={() => handleClickOperation('Del', record)}
okText="Yes"
cancelText='No'>
<a key="delete">
删除
</a>
</Popconfirm>
</Space>
]
}
],
toolBarRender: useCallback(() => [
<Button key='tool' type="primary" onClick={() => handleUpdateVisible(true, '')} >
创建模块
</Button>
], [])
})
const handleClickOperation = useCallback( // 表格操作
async (type: 'Edit' | 'Del', record: TState) => {
switch (type) {
case 'Edit':
setIsModalVisible(true)
setCurrentId(record.id)
break
case 'Del':
try {
const { status } = await DelApi({ id: record.id })
if (status !== 200) {
message.error('删除失败')
return
}
message.success('删除成功')
dataSource.length <= 1 ? actionRef.current?.reloadAndRest?.() : actionRef.current?.reload?.()
} catch (error) {
console.log(error)
message.error('删除失败')
}
break
}
}, [dataSource])
const handleUpdateVisible = (value: boolean, type: string) => {
setIsModalVisible(value)
if (!value) {
setCurrentId(NaN)
}
if (type === 'add') {
(actionRef.current as any).reload()
}
}
return (
<>
<DList>
<DTable {...tableProps} />
</DList>
<Edit visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} id={currentId} />
</>
)
}
export default Interact
import { lazy } from 'react'
const List = lazy(() => import('../List'))
export default [
{
path: '/interact',
name: '互动模块管理',
element: <List />,
meta: {
requiresAuth: true,
title: '互动模块管理',
key: 'interact'
}
}
]
import { Get, Post } from '@/utils/request'
import { TInteractList, TInteractUpdate } from './typing'
/**
* @description 列表查询
*/
export const GetListByPageApi = (params: TInteractList): Promise<any> => {
return Post('/studio/list', { params })
}
/**
* @description 删除
*/
export const DelApi = (params:{}): Promise<any> => {
return Post('/type/del', { params })
}
/**
* @description 修改
*/
export const UpdateApi = (params: Partial<TInteractUpdate>): Promise<any> => {
return Post('/type/update', { params })
}
/**
* @description 添加
*/
export const AddApi = (params: Partial<TInteractUpdate>): Promise<any> => {
return Post('/type/add', { params })
}
/**
* @description 详情
*/
export const GetDetailApi = (id: number): Promise<any> => {
return Get(`/hzy-admin/sys/user/${id}`)
}
export type TInteractList = {
pageBean:{
pageNum: number // 当前页码,从1开始
pageSize:number // 每页显示记录数
},
studioName: string // 演播室名称
// limit: number // 每页显示记录数
// page: number // 当前页码,从1开始
// order: string // 排序方式,可选值(asc、desc)
// orderField: string // 排序字段
// username: string // 用户名
}
export type TInteractUpdate = {
studioName: string // 演播室名称
studioId: string // 演播室id
ip1: string // 主服务ip
ip2: string // 备服务ip
port1: string // 主服务器端口
port2: string // 备服务器端口
sceneNameS: string // 主场景地址
sceneNameQ: string // 备场景地址
createTime: string // 创建时间
updateTime: string // 修改时间
type:string // 弹幕类型 1.入库并存为TXT,2.只保存txt,3.发送tcp并存为txt
intervalTime: number // 弹幕轮询时间间隔
bulletChatNums: number // 筛选弹幕限制数量
powerTime: number // 发电时刻开启服务时,默认时间间隔
id: number
}
export type TState = TInteractUpdate
import { useState, useEffect, useCallback } from 'react'
import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form'
import { message } from 'antd'
import { GetDetailApi, UpdateApi, AddApi } from '../common/services'
type TProps = {
visible: boolean,
id: number,
handleUpdateVisible: (value:boolean, type: string) => void
}
const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
const [title, setTitle] = useState<string>('')
useEffect(() => {
setTitle(() => {
return id ? '编辑演播室' : '创建演播室'
})
}, [visible])
const fetchDetail = useCallback(async () => {
let data:any = {
studioName: '', // 演播室名称
studioId: '', // 演播室id
ip1: '', // 主服务ip
ip2: '', // 备服务ip
port1: '', // 主服务器端口
port2: '', // 备服务器端口
sceneNameS: '', // 主场景地址
sceneNameQ: '', // 备场景地址
createTime: '', // 创建时间
updateTime: '', // 修改时间
type: '', // 弹幕类型
intervalTime: 3, // 弹幕轮询时间间隔
bulletChatNums: 0, // 筛选弹幕限制数量
powerTime: 3 // 发电时刻开启服务时,默认时间间隔
}
if (id) {
try {
const res = await GetDetailApi(id)
if (res.status !== 200) return
data = res?.data
} catch (error) {
console.log(error)
}
}
return data
}, [id])
const cnacelClick = () => {
handleUpdateVisible(false, '')
}
const okClick = async (values:any) => {
const params:any = {}
try {
if (id) {
params.id = id
}
console.log('params===>', params)
const { status } = id ? await UpdateApi(params) : await AddApi(params)
if (status === 200) {
id ? message.success('编辑成功') : message.success('创建成功')
handleUpdateVisible(false, 'add')
}
} catch (error) {
console.log(error)
}
}
return (
<ModalForm
title={title}
visible={visible}
autoFocusFirstInput
modalProps={{
onCancel: cnacelClick,
destroyOnClose: true
}}
onFinish={async (e) => {
okClick(e)
}}
request={fetchDetail}>
<ProFormText width="md" name="studioName" label="模块名称" placeholder="请输入模块名称" />
<ProFormTextArea width="lg" name="studioId" label="模块描述" placeholder="请输入描述内容" />
</ModalForm>
)
}
export default AddUpdate
import { createSlice } from '@reduxjs/toolkit'
type TInteract = {}
const initialState:TInteract = {
data: ''
}
export const { reducer: interactReducer, actions } = createSlice({
name: 'match',
initialState,
reducers: {},
extraReducers: {}
})
export default interactReducer
import React, { useCallback, useState } from 'react'
import { Button, message, Popconfirm, Space } from 'antd'
import { DList } from '@/components/DList'
import { DTable, usePTable } from '@/components/DTable'
// import { useAppSelector } from '@/hooks/useStore'
import { DelApi, GetListByPageApi } from './common/services'
import { TState } from './common/typing'
import AddUpdate from './components/addUpdate'
const Match = () => {
const [dataSource, setDataSource] = useState<TState[]>([])
const [currentId, setCurrentId] = useState<number>(NaN)
const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
const { tableProps, actionRef } = usePTable<TState>({
headerTitle: '赛事列表',
request: useCallback(async (params: any) => {
const result = {
data: [
{
id: 1,
studioName: 'NBA',
studioId: 'NBA赛事描述内容',
ip1: '260 ,242 ,250',
ip2: '发电时刻, 球员评分,选帖上暂停'
},
{
id: 2,
studioName: 'BOOM',
studioId: 'BOOM赛事描述内容',
ip1: '400',
ip2: '发电时刻, 球员评分,选帖上暂停,商业广告'
}
],
total: 1,
success: true
}
try {
const { pageSize, current: pageNum, studioName } = params
const { data } = await GetListByPageApi({
pageBean: {
pageNum,
pageSize
},
studioName
})
const { list, total } = data
setDataSource(list)
// result.data = list
result.total = total
} catch (error) {
console.error('请求列表失败', error)
}
return result
}, []),
columns: [
{
title: 'ID',
dataIndex: 'id',
width: 100,
copyable: true,
hideInSearch: true
},
{
title: '赛事名称',
key: 'studioName',
dataIndex: 'studioName',
hideInSearch: false
},
{
title: '赛事说明',
key: 'studioId',
dataIndex: 'studioId',
hideInSearch: true
},
{
title: '关联直播间',
key: 'ip1',
dataIndex: 'ip1',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip1}</span>
]
},
{
title: '所关联互动模块',
key: 'ip2',
dataIndex: 'ip2',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip2}</span>
]
},
{
title: '创建时间',
key: 'create_time',
dataIndex: 'create_time',
valueType: 'dateTime',
hideInSearch: true
},
{
title: '修改时间',
key: 'update_time',
dataIndex: 'update_time',
valueType: 'dateTime',
hideInSearch: true
},
{
title: '操作',
valueType: 'option',
render: (text, record) => [
<Space key="option" size={20}>
<a key="editable">
编辑
</a>
<Popconfirm
title="确认删除该条数据?"
onConfirm={() => handleClickOperation('Del', record)}
okText="Yes"
cancelText='No'>
<a key="delete">
删除
</a>
</Popconfirm>
</Space>
]
}
],
toolBarRender: useCallback(() => [
<Button key='tool' type="primary" onClick={() => handleUpdateVisible(true, '')} >
创建赛事
</Button>
], [])
})
const handleClickOperation = useCallback( // 表格操作
async (type: 'Edit' | 'Del', record: TState) => {
switch (type) {
case 'Edit':
setIsModalVisible(true)
setCurrentId(record.id)
break
case 'Del':
try {
const { status } = await DelApi({ id: record.id })
if (status !== 200) {
message.error('删除失败')
return
}
message.success('删除成功')
dataSource.length <= 1 ? actionRef.current?.reloadAndRest?.() : actionRef.current?.reload?.()
} catch (error) {
console.log(error)
message.error('删除失败')
}
break
}
}, [dataSource])
const handleUpdateVisible = (value: boolean, type: string) => {
setIsModalVisible(value)
if (!value) {
setCurrentId(NaN)
}
if (type === 'add') {
(actionRef.current as any).reload()
}
}
return (
<>
<DList>
<DTable {...tableProps} />
</DList>
<AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} id={currentId} />
</>
)
}
export default Match
import { lazy } from 'react'
const List = lazy(() => import('../List'))
export default [
{
path: '/match',
name: '赛事管理',
element: <List />,
meta: {
requiresAuth: true,
title: '赛事管理',
key: 'match'
}
}
]
import { Get, Post } from '@/utils/request'
import { TMatchList, TMatchUpdate } from './typing'
/**
* @description 列表查询
*/
export const GetListByPageApi = (params: TMatchList): Promise<any> => {
return Post('/studio/list', { params })
}
/**
* @description 删除
*/
export const DelApi = (params:{}): Promise<any> => {
return Post('/type/del', { params })
}
/**
* @description 修改
*/
export const UpdateApi = (params: Partial<TMatchUpdate>): Promise<any> => {
return Post('/type/update', { params })
}
/**
* @description 添加
*/
export const AddApi = (params: Partial<TMatchUpdate>): Promise<any> => {
return Post('/type/add', { params })
}
/**
* @description 详情
*/
export const GetDetailApi = (id: number): Promise<any> => {
return Get(`/hzy-admin/sys/user/${id}`)
}
export type TMatchList = {
pageBean:{
pageNum: number // 当前页码,从1开始
pageSize:number // 每页显示记录数
},
studioName: string // 演播室名称
// limit: number // 每页显示记录数
// page: number // 当前页码,从1开始
// order: string // 排序方式,可选值(asc、desc)
// orderField: string // 排序字段
// username: string // 用户名
}
export type TMatchUpdate = {
studioName: string // 演播室名称
studioId: string // 演播室id
ip1: string // 主服务ip
ip2: string // 备服务ip
port1: string // 主服务器端口
port2: string // 备服务器端口
sceneNameS: string // 主场景地址
sceneNameQ: string // 备场景地址
createTime: string // 创建时间
updateTime: string // 修改时间
type:string // 弹幕类型 1.入库并存为TXT,2.只保存txt,3.发送tcp并存为txt
intervalTime: number // 弹幕轮询时间间隔
bulletChatNums: number // 筛选弹幕限制数量
powerTime: number // 发电时刻开启服务时,默认时间间隔
id: number
}
export type TState = TMatchUpdate
import { useState, useEffect, useCallback } from 'react'
import { ModalForm, ProFormText, ProFormTreeSelect } from '@ant-design/pro-form'
import { message } from 'antd'
import { GetDetailApi, UpdateApi, AddApi } from '../common/services'
type TProps = {
visible: boolean,
id: number,
handleUpdateVisible: (value:boolean, type: string) => void
}
const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
const [title, setTitle] = useState<string>('')
const files = { // TreeSelect组件配置项
showArrow: false,
filterTreeNode: true,
showSearch: true,
dropdownMatchSelectWidth: false,
labelInValue: true,
autoClearSearchValue: true,
multiple: true,
treeNodeFilterProp: 'label',
fieldNames: {
label: 'label'
}
}
useEffect(() => {
getMenus()
setTitle(() => {
return id ? '编辑赛事' : '创建赛事'
})
}, [visible])
const fetchDetail = useCallback(async () => {
let data:any = {
studioName: '', // 演播室名称
studioId: '', // 演播室id
ip1: '', // 主服务ip
ip2: '', // 备服务ip
port1: '', // 主服务器端口
port2: '', // 备服务器端口
sceneNameS: '', // 主场景地址
sceneNameQ: '', // 备场景地址
createTime: '', // 创建时间
updateTime: '', // 修改时间
type: '', // 弹幕类型
intervalTime: 3, // 弹幕轮询时间间隔
bulletChatNums: 0, // 筛选弹幕限制数量
powerTime: 3 // 发电时刻开启服务时,默认时间间隔
}
if (id) {
try {
const res = await GetDetailApi(id)
if (res.status !== 200) return
data = res?.data
} catch (error) {
console.log(error)
}
}
return data
}, [id])
const getMenus = async () => { // 获取所有业务模块
return [
{
label: 'Node1',
value: '0-0'
},
{
label: 'Node2',
value: '0-1'
}
]
}
const getStudios = async () => { // 获取所有业务模块
return [
{
label: 'Node1',
value: '0-0'
},
{
label: 'Node2',
value: '0-1'
}
]
}
const cnacelClick = () => {
handleUpdateVisible(false, '')
}
const okClick = async (values:any) => {
console.log(values, 9999)
const params:any = {}
try {
if (id) {
params.id = id
}
console.log('params===>', params)
const { status } = id ? await UpdateApi(params) : await AddApi(params)
if (status === 200) {
id ? message.success('编辑成功') : message.success('创建成功')
handleUpdateVisible(false, 'add')
}
} catch (error) {
console.log(error)
}
}
return (
<ModalForm
title={title}
visible={visible}
autoFocusFirstInput
modalProps={{
onCancel: cnacelClick,
destroyOnClose: true
}}
onFinish={async (e) => {
okClick(e)
}}
request={fetchDetail}>
<ProFormText width="md" name="studioName" label="赛事名称" placeholder="请输入演播室名称" />
<ProFormText width="md" name="studioId" label="赛事说明" placeholder="请输入演播室id" />
<ProFormTreeSelect
name="studio"
label="关联演播室"
placeholder="请选择演播室"
allowClear
width="lg"
secondary
request={getStudios}
fieldProps={files}
/>
<ProFormTreeSelect
name="name"
label="关联互动模块"
placeholder="请选择互动模块"
allowClear
width="lg"
secondary
request={getMenus}
fieldProps={files}
/>
</ModalForm>
)
}
export default AddUpdate
import { createSlice } from '@reduxjs/toolkit'
type TMatch = {}
const initialState:TMatch = {
data: ''
}
export const { reducer: matchReducer, actions } = createSlice({
name: 'match',
initialState,
reducers: {},
extraReducers: {}
})
export default matchReducer
......@@ -18,7 +18,22 @@ const Match = () => {
headerTitle: '赛事列表',
request: useCallback(async (params: any) => {
const result = {
data: [],
data: [
{
id: 1,
studioName: 'NBA',
studioId: 'NBA赛事描述内容',
ip1: '260 ,242 ,250',
ip2: '发电时刻, 球员评分,选帖上暂停'
},
{
id: 2,
studioName: 'BOOM',
studioId: 'BOOM赛事描述内容',
ip1: '400',
ip2: '发电时刻, 球员评分,选帖上暂停,商业广告'
}
],
total: 1,
success: true
}
......@@ -34,7 +49,7 @@ const Match = () => {
const { list, total } = data
setDataSource(list)
result.data = list
// result.data = list
result.total = total
} catch (error) {
console.error('请求列表失败', error)
......@@ -67,7 +82,7 @@ const Match = () => {
dataIndex: 'ip1',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip1}:{record?.port1}</span>
<span key='primaryService'>{record?.ip1}</span>
]
},
{
......@@ -76,7 +91,7 @@ const Match = () => {
dataIndex: 'ip2',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip2}:{record?.port2}</span>
<span key='primaryService'>{record?.ip2}</span>
]
},
{
......@@ -116,7 +131,7 @@ const Match = () => {
],
toolBarRender: useCallback(() => [
<Button key='tool' type="primary" onClick={() => handleUpdateVisible(true, '')} >
创建演播室
创建赛事
</Button>
], [])
})
......
import { useState, useEffect, useCallback } from 'react'
import { ModalForm, ProFormDigit, ProFormText, ProFormTreeSelect } from '@ant-design/pro-form'
import { ModalForm, ProFormText, ProFormTreeSelect } from '@ant-design/pro-form'
import { message } from 'antd'
......@@ -31,7 +31,7 @@ const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
useEffect(() => {
getMenus()
setTitle(() => {
return id ? '编辑演播室' : '创建演播室'
return id ? '编辑赛事' : '创建赛事'
})
}, [visible])
const fetchDetail = useCallback(async () => {
......@@ -122,7 +122,7 @@ const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
}}
request={fetchDetail}>
<ProFormText width="md" name="studioName" label="赛事名称" placeholder="请输入演播室名称" />
<ProFormDigit width="md" name="studioId" label="赛事说明" placeholder="请输入演播室id" />
<ProFormText width="md" name="studioId" label="赛事说明" placeholder="请输入演播室id" />
<ProFormTreeSelect
name="studio"
label="关联演播室"
......
import React, { useCallback, useState } from 'react'
import { Button, message, Popconfirm, Space } from 'antd'
import { DList } from '@/components/DList'
import { DTable, usePTable } from '@/components/DTable'
// import { useAppSelector } from '@/hooks/useStore'
import { DelApi, GetListByPageApi } from './common/services'
import { TState } from './common/typing'
import AddUpdate from './components/addUpdate'
const Studio = () => {
const [dataSource, setDataSource] = useState<TState[]>([])
const [currentId, setCurrentId] = useState<number>(NaN)
const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
const { tableProps, actionRef } = usePTable<TState>({
headerTitle: '演播室列表',
request: useCallback(async (params: any) => {
const result = {
data: [],
total: 1,
success: true
}
try {
const { pageSize, current: pageNum, studioName } = params
const { data } = await GetListByPageApi({
pageBean: {
pageNum,
pageSize
},
studioName
})
const { list, total } = data
setDataSource(list)
result.data = list
result.total = total
} catch (error) {
console.error('请求列表失败', error)
}
return result
}, []),
columns: [
{
title: 'ID',
dataIndex: 'id',
width: 100,
copyable: true,
hideInSearch: true
},
{
title: '演播室名称',
key: 'studioName',
dataIndex: 'studioName',
hideInSearch: false
},
{
title: '演播室id',
key: 'studioId',
dataIndex: 'studioId',
hideInSearch: true
},
{
title: '主服务地址',
key: 'ip1',
dataIndex: 'ip1',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip1}:{record?.port1}</span>
]
},
{
title: '备服务地址',
key: 'ip2',
dataIndex: 'ip2',
hideInSearch: true,
render: (text, record) => [
<span key='primaryService'>{record?.ip2}:{record?.port2}</span>
]
},
{
title: '主场景地址',
key: 'sceneNameS',
dataIndex: 'sceneNameS',
hideInSearch: true
},
{
title: '备场景地址',
key: 'sceneNameQ',
dataIndex: 'sceneNameQ',
hideInSearch: true
},
{
title: '弹幕类型',
key: 'type',
dataIndex: 'type',
hideInSearch: true,
render: (text, record) => [
<span key='type'>
{record?.type === '1' && '入库并存为txt'}
{record?.type === '2' && '只保存txt'}
{record?.type === '3' && '发送tcp并存为txt'}
</span>
]
},
{
title: '弹幕轮询时间(秒)',
key: 'intervalTime',
dataIndex: 'intervalTime',
hideInSearch: true
},
{
title: '发电时间间隔(秒)',
key: 'powerTime',
dataIndex: 'powerTime',
hideInSearch: true
},
{
title: '筛选弹幕限制条数',
key: 'bulletChatNums',
dataIndex: 'bulletChatNums',
hideInSearch: true
},
{
title: '创建时间',
key: 'create_time',
dataIndex: 'create_time',
valueType: 'dateTime',
hideInSearch: true
},
{
title: '修改时间',
key: 'update_time',
dataIndex: 'update_time',
valueType: 'dateTime',
hideInSearch: true
},
{
title: '操作',
valueType: 'option',
render: (text, record) => [
<Space key="option" size={20}>
<a key="editable">
编辑
</a>
<Popconfirm
title="确认删除该条数据?"
onConfirm={() => handleClickOperation('Del', record)}
okText="Yes"
cancelText='No'>
<a key="delete">
删除
</a>
</Popconfirm>
</Space>
]
}
],
toolBarRender: useCallback(() => [
<Button key='tool' type="primary" onClick={() => handleUpdateVisible(true, '')} >
创建演播室
</Button>
], [])
})
const handleClickOperation = useCallback( // 表格操作
async (type: 'Edit' | 'Del', record: TState) => {
switch (type) {
case 'Edit':
setIsModalVisible(true)
setCurrentId(record.id)
break
case 'Del':
try {
const { status } = await DelApi({ id: record.id })
if (status !== 200) {
message.error('删除失败')
return
}
message.success('删除成功')
dataSource.length <= 1 ? actionRef.current?.reloadAndRest?.() : actionRef.current?.reload?.()
} catch (error) {
console.log(error)
message.error('删除失败')
}
break
}
}, [dataSource])
const handleUpdateVisible = (value: boolean, type: string) => {
setIsModalVisible(value)
if (!value) {
setCurrentId(NaN)
}
if (type === 'add') {
(actionRef.current as any).reload()
}
}
return (
<>
<DList>
<DTable {...tableProps} />
</DList>
<AddUpdate visible={isModalVisible} handleUpdateVisible={handleUpdateVisible} id={currentId} />
</>
)
}
export default Studio
import { lazy } from 'react'
const List = lazy(() => import('../List'))
export default [
{
path: '/studio',
name: '演播室管理',
element: <List />,
meta: {
requiresAuth: true,
title: '演播室管理',
key: 'studio'
}
}
]
import { Get, Post } from '@/utils/request'
import { TStudioList, TStudioUpdate } from './typing'
/**
* @description 列表查询
*/
export const GetListByPageApi = (params: TStudioList): Promise<any> => {
return Post('/studio/list', { params })
}
/**
* @description 删除
*/
export const DelApi = (params:{}): Promise<any> => {
return Post('/type/del', { params })
}
/**
* @description 修改
*/
export const UpdateApi = (params: Partial<TStudioUpdate>): Promise<any> => {
return Post('/type/update', { params })
}
/**
* @description 添加
*/
export const AddApi = (params: Partial<TStudioUpdate>): Promise<any> => {
return Post('/type/add', { params })
}
/**
* @description 详情
*/
export const GetDetailApi = (id: number): Promise<any> => {
return Get(`/hzy-admin/sys/user/${id}`)
}
export type TStudioList = {
pageBean:{
pageNum: number // 当前页码,从1开始
pageSize:number // 每页显示记录数
},
studioName: string // 演播室名称
// limit: number // 每页显示记录数
// page: number // 当前页码,从1开始
// order: string // 排序方式,可选值(asc、desc)
// orderField: string // 排序字段
// username: string // 用户名
}
export type TStudioUpdate = {
studioName: string // 演播室名称
studioId: string // 演播室id
ip1: string // 主服务ip
ip2: string // 备服务ip
port1: string // 主服务器端口
port2: string // 备服务器端口
sceneNameS: string // 主场景地址
sceneNameQ: string // 备场景地址
createTime: string // 创建时间
updateTime: string // 修改时间
type:string // 弹幕类型 1.入库并存为TXT,2.只保存txt,3.发送tcp并存为txt
intervalTime: number // 弹幕轮询时间间隔
bulletChatNums: number // 筛选弹幕限制数量
powerTime: number // 发电时刻开启服务时,默认时间间隔
id: number
}
export type TState = TStudioUpdate
import { useState, useEffect, useCallback } from 'react'
import ProForm, { ModalForm, ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-form'
import { message } from 'antd'
import { GetDetailApi, UpdateApi, AddApi } from '../common/services'
type TProps = {
visible: boolean,
id: number,
handleUpdateVisible: (value:boolean, type: string) => void
}
const AddUpdate = ({ id, visible, handleUpdateVisible }:TProps) => {
const [title, setTitle] = useState<string>('')
useEffect(() => {
setTitle(() => {
return id ? '编辑演播室' : '创建演播室'
})
}, [visible])
const fetchDetail = useCallback(async () => {
let data:any = {
studioName: '', // 演播室名称
studioId: '', // 演播室id
ip1: '', // 主服务ip
ip2: '', // 备服务ip
port1: '', // 主服务器端口
port2: '', // 备服务器端口
sceneNameS: '', // 主场景地址
sceneNameQ: '', // 备场景地址
createTime: '', // 创建时间
updateTime: '', // 修改时间
type: '', // 弹幕类型
intervalTime: 3, // 弹幕轮询时间间隔
bulletChatNums: 0, // 筛选弹幕限制数量
powerTime: 3 // 发电时刻开启服务时,默认时间间隔
}
if (id) {
try {
const res = await GetDetailApi(id)
if (res.status !== 200) return
data = res?.data
} catch (error) {
console.log(error)
}
}
return data
}, [id])
const cnacelClick = () => {
handleUpdateVisible(false, '')
}
const okClick = async (values:any) => {
const params:any = {
studioName: values.studioName, // 演播室名称
studioId: values.studioId, // 演播室id
ip1: values.ip1, // 主服务ip
ip2: values.ip2, // 备服务ip
port1: values.port1, // 主服务器端口
port2: values.port2, // 备服务器端口
sceneNameS: values.sceneNameS, // 主场景地址
sceneNameQ: values.sceneNameQ, // 备场景地址
type: values.type, // 弹幕类型
intervalTime: values.intervalTime, // 弹幕轮询时间间隔
bulletChatNums: values.bulletChatNums, // 筛选弹幕限制数量
powerTime: values.powerTime// 发电时刻开启服务时,默认时间间隔
}
try {
if (id) {
params.id = id
}
console.log('params===>', params)
const { status } = id ? await UpdateApi(params) : await AddApi(params)
if (status === 200) {
id ? message.success('编辑成功') : message.success('创建成功')
handleUpdateVisible(false, 'add')
}
} catch (error) {
console.log(error)
}
}
return (
<ModalForm
title={title}
visible={visible}
autoFocusFirstInput
modalProps={{
onCancel: cnacelClick,
destroyOnClose: true
}}
onFinish={async (e) => {
okClick(e)
}}
request={fetchDetail}>
<ProForm.Group>
<ProFormText width="md" name="studioName" label="演播室名称" placeholder="请输入演播室名称" />
<ProFormDigit width="md" name="studioId" label="演播室id" placeholder="请输入演播室id" />
</ProForm.Group>
<ProForm.Group>
<ProFormText width="md" name="ip1" label="主服务ip" placeholder="请输入主服务ip" />
<ProFormText width="md" name="port1" label="主服务器端口" placeholder="请输入主服务器端口" />
</ProForm.Group>
<ProForm.Group>
<ProFormText width="md" name="ip2" label="备服务ip" placeholder="请输入备服务ip" />
<ProFormText width="md" name="port2" label="备服务器端口" placeholder="请输入备服务器端口" />
</ProForm.Group>
<ProForm.Group>
<ProFormText width="md" name="sceneNameS" label="主场景地址" placeholder="请输入主场景地址" />
<ProFormText width="md" name="sceneNameQ" label="备场景地址" placeholder="请输入备场景地址" />
</ProForm.Group>
<ProForm.Group>
<ProFormSelect
width="md"
label="弹幕类型"
name="type"
placeholder='请选择弹幕类型'
valueEnum={{
1: '入库并存为txt',
2: '只保存txt',
3: '发送tcp并存为txt'
}}
/>
<ProFormDigit width="md" name="intervalTime" label="弹幕轮询时间间隔" addonAfter="秒" placeholder="请输入弹幕轮询时间间隔" />
</ProForm.Group>
<ProForm.Group>
<ProFormDigit width="md" name="bulletChatNums" label="筛选弹幕限制条数" placeholder="请输入筛选弹幕限制数量" />
<ProFormDigit width="md" name="powerTime" label="发电轮询时间间隔" addonAfter="秒" placeholder="请输入发电轮询时间间隔" />
</ProForm.Group>
</ModalForm>
)
}
export default AddUpdate
import { createSlice } from '@reduxjs/toolkit'
type TParameter = {}
const initialState:TParameter = {
data: ''
}
export const { reducer: parameterReducer, actions } = createSlice({
name: 'parameter',
initialState,
reducers: {},
extraReducers: {}
})
export default parameterReducer
......@@ -3,6 +3,7 @@ import { Navigate, useRoutes } from 'react-router-dom'
import BaseLayout from '@/layouts/BaseLayout'
import AccountRouter from '@/pages/Account/common/router'
import InteractRouter from '@/pages/Interact/common/router'
import Login from '@/pages/Login'
import MatchRouter from '@/pages/Match/common/router'
import StudioRouter from '@/pages/Studio/common/router'
......@@ -31,7 +32,8 @@ export const rootRouter: RouteObject[] = [
},
...AccountRouter,
...StudioRouter,
...MatchRouter
...MatchRouter,
...InteractRouter
]
},
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment