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

src/layouts/Menu/index.tsx

@@ -64,6 +64,10 @@ const LayoutMenu = () => {
     {
       path: '/match',
       label: '赛事管理'
+    },
+    {
+      path: '/interact',
+      label: '互动模块管理'
     }
   ]
 

src/pages/Interact/List.tsx

+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

src/pages/Interact/common/router.tsx

+import { lazy } from 'react'
+
+const List = lazy(() => import('../List'))
+
+export default [
+  {
+    path: '/interact',
+    name: '互动模块管理',
+    element: <List />,
+    meta: {
+      requiresAuth: true,
+      title: '互动模块管理',
+      key: 'interact'
+    }
+  }
+]

src/pages/Interact/common/services.ts

+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}`)
+}

src/pages/Interact/common/typing.ts

+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

src/pages/Interact/components/addUpdate.tsx

+
+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

src/pages/Interact/store/interact.ts

+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

src/pages/Match copy/List.tsx

+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

src/pages/Match copy/common/router.tsx

+import { lazy } from 'react'
+
+const List = lazy(() => import('../List'))
+
+export default [
+  {
+    path: '/match',
+    name: '赛事管理',
+    element: <List />,
+    meta: {
+      requiresAuth: true,
+      title: '赛事管理',
+      key: 'match'
+    }
+  }
+]

src/pages/Match copy/common/services.ts

+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}`)
+}

src/pages/Match copy/common/typing.ts

+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

src/pages/Match copy/components/addUpdate.tsx

+
+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

src/pages/Match copy/store/match.ts

+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

src/pages/Match/List.tsx

@@ -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>
     ], [])
   })

src/pages/Match/components/addUpdate.tsx

 
 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="关联演播室"

src/pages/Studio copy/List.tsx

+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

src/pages/Studio copy/common/router.tsx

+import { lazy } from 'react'
+
+const List = lazy(() => import('../List'))
+
+export default [
+  {
+    path: '/studio',
+    name: '演播室管理',
+    element: <List />,
+    meta: {
+      requiresAuth: true,
+      title: '演播室管理',
+      key: 'studio'
+    }
+  }
+]

src/pages/Studio copy/common/services.ts

+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}`)
+}

src/pages/Studio copy/common/typing.ts

+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

src/pages/Studio copy/components/addUpdate.tsx

+
+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

src/pages/Studio copy/store/studio.ts

+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

src/router/index.tsx

@@ -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
     ]
   },
   {