|
|
@@ -5,8 +5,6 @@ import Avatar from './AvatarDropdown';
|
|
|
import styles from './index.less';
|
|
|
import { exitFullScreen, requestFullScreen, isFull } from '@/utils/fullScreen'
|
|
|
import { BellOutlined } from '@ant-design/icons';
|
|
|
-import { ReactComponent as GameSvg } from '@/assets/game.svg'
|
|
|
-import { ReactComponent as BiSvg } from '@/assets/bi.svg'
|
|
|
import { getAppListApi } from '@/services/iaaData';
|
|
|
import { useAjax } from '@/Hook/useAjax';
|
|
|
|
|
|
@@ -15,153 +13,159 @@ export type SiderTheme = 'light' | 'dark';
|
|
|
|
|
|
const GlobalHeaderRight: React.FC<{}> = () => {
|
|
|
|
|
|
- const [left, setLeft] = useState(0)
|
|
|
- const { initialState, setInitialState } = useModel('@@initialState');
|
|
|
- const { state: { versionsOpen }, dispatch, getversions } = useModel('useOperating.useWxGroupList')
|
|
|
- if (!initialState || !initialState.settings) {
|
|
|
- return null;
|
|
|
- }
|
|
|
- const [appList, setApplist] = useState<{ label: string, value: string, third: string; }[]>([])
|
|
|
- const getAppList = useAjax(() => getAppListApi())
|
|
|
- const [productTypeList, setProductTypeList] = useState<{ label: string, value: string }[]>([])
|
|
|
- const [productType, setProductType] = useState<string>()
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- if (location.hash.includes('/iaaData')) {
|
|
|
- getAppList.run().then(res => {
|
|
|
- if (res?.data) {
|
|
|
- const thirdSet = new Set();
|
|
|
- let data: { label: string, value: string, third: string; }[] = res.data.map((item: { second: any; first: string; third: string; }) => {
|
|
|
- thirdSet.add(item.third)
|
|
|
- return { label: item.second, value: item.first + '||' + item.third, third: item.third }
|
|
|
- })
|
|
|
- setProductTypeList([{ label: '游戏业务', value: 'PRODUCT_TYPE_GAME' }, { label: '小说业务', value: 'PRODUCT_TYPE_NOVEL' }, { label: '短剧业务', value: 'PRODUCT_TYPE_PLAYLET' }].filter(item => [...thirdSet].includes(item.value)))
|
|
|
- let app = initialState?.iaaApp
|
|
|
- let iaaApp = data.some(item => item.value === app) ? app : data?.[0].value || undefined as any
|
|
|
- setProductType(iaaApp ? iaaApp.split('||')?.[1] : undefined)
|
|
|
- setInitialState({ ...initialState, iaaApp })
|
|
|
- setApplist(data)
|
|
|
- }
|
|
|
- })
|
|
|
+ const [left, setLeft] = useState(0)
|
|
|
+ const { initialState, setInitialState } = useModel('@@initialState');
|
|
|
+ const { state: { versionsOpen }, dispatch, getversions } = useModel('useOperating.useWxGroupList')
|
|
|
+ if (!initialState || !initialState.settings) {
|
|
|
+ return null;
|
|
|
}
|
|
|
- }, [location.hash])
|
|
|
+ const [appList, setApplist] = useState<{ label: string, value: string, productType: string; mediaPlatform: string; icon?: string }[]>([])
|
|
|
+ const getAppList = useAjax(() => getAppListApi())
|
|
|
+ const [productTypeList, setProductTypeList] = useState<{ label: string, value: string }[]>([])
|
|
|
+ const [mediaPlatformList, setMediaPlatformList] = useState<{ label: string, value: string }[]>([])
|
|
|
+ const [productType, setProductType] = useState<string>()
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- let nav: any = document.querySelector('.top-nav-menu')
|
|
|
- let navLi: any = document.querySelectorAll('.top-nav-menu > li')
|
|
|
- if (nav && navLi) {
|
|
|
- let l = nav.offsetLeft
|
|
|
- let lw = 0
|
|
|
- for (const iterator of navLi) {
|
|
|
- lw += iterator.offsetWidth
|
|
|
- }
|
|
|
- setLeft(l + lw - 50)
|
|
|
- }
|
|
|
- }, [])
|
|
|
+ useEffect(() => {
|
|
|
+ if (location.hash.includes('/iaaData')) {
|
|
|
+ getAppList.run().then(res => {
|
|
|
+ if (res?.data) {
|
|
|
+ const productTypeSet = new Set();
|
|
|
+ const mediaPlatformSet = new Set();
|
|
|
+ const data: { label: string, value: string, productType: string; mediaPlatform: string; icon?: string }[] = res.data.map((item: { name: string; id: number; productType: string; mediaPlatform: string; icon?: string }) => {
|
|
|
+ productTypeSet.add(item.productType)
|
|
|
+ mediaPlatformSet.add(item.mediaPlatform)
|
|
|
+ return { label: item.name, value: item.id + '||' + item.productType, productType: item.productType, mediaPlatform: item.mediaPlatform, icons: item.icon }
|
|
|
+ })
|
|
|
+ setProductTypeList([{ label: '游戏业务', value: 'PRODUCT_TYPE_GAME' }, { label: '小说业务', value: 'PRODUCT_TYPE_NOVEL' }, { label: '短剧业务', value: 'PRODUCT_TYPE_PLAYLET' }].filter(item => [...productTypeSet].includes(item.value)))
|
|
|
+ setMediaPlatformList([{ label: '腾讯', value: 'MEDIA_PLATFORM_TENCENT' }, { label: '头条', value: 'MEDIA_PLATFORM_OCENAENGINE' }].filter(item => [...mediaPlatformSet].includes(item.value)))
|
|
|
+
|
|
|
+ const app = initialState?.iaaApp
|
|
|
+ const iaaApp = data.some(item => item.value === app) ? app : data?.[0].value || undefined as any
|
|
|
+ const productType = iaaApp ? iaaApp.split('||')?.[1] : undefined
|
|
|
+ const newAppList = data.filter(item => item.productType === productType)
|
|
|
+ const mediaPlatform = newAppList?.[0].mediaPlatform
|
|
|
+ setProductType(productType)
|
|
|
+ setInitialState({ ...initialState, iaaApp, mediaPlatform })
|
|
|
+ setApplist(data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, [location.hash])
|
|
|
|
|
|
- const { navTheme, layout } = initialState.settings;
|
|
|
- let className = styles.right;
|
|
|
|
|
|
- if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
|
|
|
- className = `${styles.right} ${styles.dark}`;
|
|
|
- }
|
|
|
- let handleFullScreen = () => {
|
|
|
- if (isFull()) {
|
|
|
- exitFullScreen()
|
|
|
- } else {
|
|
|
- requestFullScreen()
|
|
|
- }
|
|
|
- }
|
|
|
- //消息弹窗更新
|
|
|
- const inform = useCallback(() => {
|
|
|
- let bdVersions = localStorage.getItem('versions') //本地
|
|
|
- getversions.run().then((res) => {
|
|
|
- let fwqVersions = ''//服务器版本
|
|
|
- let content: any = ''//版本更新内容
|
|
|
- if (res) {
|
|
|
- fwqVersions = res?.configValue
|
|
|
- content = <div dangerouslySetInnerHTML={{ __html: res?.remark?.replace(/\n/ig, '<br/>') }}></div >
|
|
|
- if (fwqVersions && bdVersions !== fwqVersions) {//不一样
|
|
|
- //执行逻辑
|
|
|
- Modal.confirm({
|
|
|
- title: '版本更新！',
|
|
|
- content,
|
|
|
- keyboard: false,
|
|
|
- cancelText: '稍后我自己刷新页面',
|
|
|
- okText: '现在就去刷新页面',
|
|
|
- onOk: () => {
|
|
|
- localStorage.setItem('versions', fwqVersions)//重新设置服务器版本
|
|
|
- location?.reload()
|
|
|
- },
|
|
|
- onCancel: () => {
|
|
|
- dispatch({ type: 'versionsOpen', params: { versionsOpen: true } })
|
|
|
+ useEffect(() => {
|
|
|
+ let nav: any = document.querySelector('.top-nav-menu')
|
|
|
+ let navLi: any = document.querySelectorAll('.top-nav-menu > li')
|
|
|
+ if (nav && navLi) {
|
|
|
+ let l = nav.offsetLeft
|
|
|
+ let lw = 0
|
|
|
+ for (const iterator of navLi) {
|
|
|
+ lw += iterator.offsetWidth
|
|
|
}
|
|
|
- })
|
|
|
- console.log('不一样')
|
|
|
+ setLeft(l + lw - 50)
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- }, [])
|
|
|
+ }, [])
|
|
|
|
|
|
- const open = () => {
|
|
|
- let token = localStorage.getItem('Admin-Token')
|
|
|
- window.open(`http://gg.84game.cn/#/login?token=${token}`)
|
|
|
- return
|
|
|
- }
|
|
|
+ const { navTheme, layout } = initialState.settings;
|
|
|
+ let className = styles.right;
|
|
|
|
|
|
- return (
|
|
|
- <div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
|
+ if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
|
|
|
+ className = `${styles.right} ${styles.dark}`;
|
|
|
+ }
|
|
|
+ let handleFullScreen = () => {
|
|
|
+ if (isFull()) {
|
|
|
+ exitFullScreen()
|
|
|
+ } else {
|
|
|
+ requestFullScreen()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //消息弹窗更新
|
|
|
+ const inform = useCallback(() => {
|
|
|
+ let bdVersions = localStorage.getItem('versions') //本地
|
|
|
+ getversions.run().then((res) => {
|
|
|
+ let fwqVersions = ''//服务器版本
|
|
|
+ let content: any = ''//版本更新内容
|
|
|
+ if (res) {
|
|
|
+ fwqVersions = res?.configValue
|
|
|
+ content = <div dangerouslySetInnerHTML={{ __html: res?.remark?.replace(/\n/ig, '<br/>') }}></div >
|
|
|
+ if (fwqVersions && bdVersions !== fwqVersions) {//不一样
|
|
|
+ //执行逻辑
|
|
|
+ Modal.confirm({
|
|
|
+ title: '版本更新！',
|
|
|
+ content,
|
|
|
+ keyboard: false,
|
|
|
+ cancelText: '稍后我自己刷新页面',
|
|
|
+ okText: '现在就去刷新页面',
|
|
|
+ onOk: () => {
|
|
|
+ localStorage.setItem('versions', fwqVersions)//重新设置服务器版本
|
|
|
+ location?.reload()
|
|
|
+ },
|
|
|
+ onCancel: () => {
|
|
|
+ dispatch({ type: 'versionsOpen', params: { versionsOpen: true } })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('不一样')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, [])
|
|
|
|
|
|
- {/* <div style={{ left: left }} className={styles.extraSys}>
|
|
|
- <Space onClick={open}>
|
|
|
- <span role="img" aria-label="fund-view" className="anticon anticon-fund-view"><GameSvg /></span>
|
|
|
- <span style={{ color: 'rgba(255, 255, 255, 0.65)' }}>游戏SDK</span>
|
|
|
- </Space>
|
|
|
- <Space onClick={() => window.open(`https://bi.aliyun.com/product/view.htm?module=dashboard&productId=396f5cf7-9d50-4dde-9aaa-eb20e2590518&menuId=74f4c115-db5a-457c-b25b-94bdafc172fe`)}>
|
|
|
- <span role="img" aria-label="fund-view" className="anticon anticon-fund-view"><BiSvg /></span>
|
|
|
- <span style={{ color: 'rgba(255, 255, 255, 0.65)' }}>BI商业分析</span>
|
|
|
- </Space>
|
|
|
- </div> */}
|
|
|
- {location.hash.includes('/iaaData') && <div style={{ left: left + 10, position: 'absolute' }}>
|
|
|
- <Select
|
|
|
- showSearch
|
|
|
- style={{ width: 100 }}
|
|
|
- placeholder={'请选择业务类型'}
|
|
|
- filterOption={(input, option) =>
|
|
|
- (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
- }
|
|
|
- onChange={(type) => {
|
|
|
- let newApplist = appList.filter(item => item.third === type)
|
|
|
- setInitialState({ ...initialState, iaaApp: newApplist?.[0]?.value })
|
|
|
- setProductType(type)
|
|
|
- }}
|
|
|
- value={productType}
|
|
|
- options={productTypeList}
|
|
|
- />
|
|
|
- <Select
|
|
|
- showSearch
|
|
|
- style={{ width: 150, marginLeft: 10 }}
|
|
|
- placeholder={'请选择应用'}
|
|
|
- filterOption={(input, option) =>
|
|
|
- (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
- }
|
|
|
- value={initialState?.iaaApp}
|
|
|
- onChange={(e) => setInitialState({ ...initialState, iaaApp: e })}
|
|
|
- loading={getAppList.loading}
|
|
|
- options={appList.filter(item => item.third === productType)}
|
|
|
- />
|
|
|
- </div>}
|
|
|
+ return (
|
|
|
+ <div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
|
+ {location.hash.includes('/iaaData') && <div style={{ left: left + 10, position: 'absolute' }}>
|
|
|
+ <Select
|
|
|
+ showSearch
|
|
|
+ style={{ width: 100 }}
|
|
|
+ placeholder={'请选择业务类型'}
|
|
|
+ filterOption={(input, option) =>
|
|
|
+ (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ }
|
|
|
+ onChange={(type) => {
|
|
|
+ let newApplist = appList.filter(item => item.productType === type)
|
|
|
+ setInitialState({ ...initialState, iaaApp: newApplist?.[0]?.value, mediaPlatform: newApplist?.[0]?.mediaPlatform })
|
|
|
+ setProductType(type)
|
|
|
+ }}
|
|
|
+ value={productType}
|
|
|
+ options={productTypeList}
|
|
|
+ />
|
|
|
+ <Select
|
|
|
+ showSearch
|
|
|
+ style={{ width: 100, marginLeft: 10 }}
|
|
|
+ placeholder={'请选择媒体'}
|
|
|
+ filterOption={(input, option) =>
|
|
|
+ (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ }
|
|
|
+ onChange={(type) => {
|
|
|
+ let newApplist = appList.filter(item => item.productType === productType).filter(item => item.mediaPlatform === type)
|
|
|
+ setInitialState({ ...initialState, iaaApp: newApplist?.[0]?.value, mediaPlatform: type })
|
|
|
+ }}
|
|
|
+ value={initialState?.mediaPlatform}
|
|
|
+ options={mediaPlatformList}
|
|
|
+ />
|
|
|
+ <Select
|
|
|
+ showSearch
|
|
|
+ style={{ width: 150, marginLeft: 10 }}
|
|
|
+ placeholder={'请选择应用'}
|
|
|
+ filterOption={(input, option) =>
|
|
|
+ (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ }
|
|
|
+ value={initialState?.iaaApp}
|
|
|
+ onChange={(e) => setInitialState({ ...initialState, iaaApp: e })}
|
|
|
+ loading={getAppList.loading}
|
|
|
+ options={appList.filter(item => item.productType === productType).filter(item => item.mediaPlatform === initialState?.mediaPlatform)}
|
|
|
+ />
|
|
|
+ </div>}
|
|
|
|
|
|
- <Space className={className}>
|
|
|
- {versionsOpen && <div onClick={versionsOpen && inform}>
|
|
|
- <Badge count={versionsOpen && 1} size='small' offset={[2, 0]}>
|
|
|
- <span style={{ cursor: 'pointer' }} ><BellOutlined /></span>
|
|
|
- </Badge>
|
|
|
- </div>}
|
|
|
- <Avatar />
|
|
|
- <Tag color="#87d068" onClick={handleFullScreen}>全屏模式</Tag>
|
|
|
- </Space>
|
|
|
- </div>
|
|
|
- );
|
|
|
+ <Space className={className}>
|
|
|
+ {versionsOpen && <div onClick={versionsOpen && inform}>
|
|
|
+ <Badge count={versionsOpen && 1} size='small' offset={[2, 0]}>
|
|
|
+ <span style={{ cursor: 'pointer' }} ><BellOutlined /></span>
|
|
|
+ </Badge>
|
|
|
+ </div>}
|
|
|
+ <Avatar />
|
|
|
+ <Tag color="#87d068" onClick={handleFullScreen}>全屏模式</Tag>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
};
|
|
|
export default GlobalHeaderRight;
|
