|
|
import ContentWarp from '@/components/ContentWarp';
|
|
|
import styles from '../../index.less';
|
|
|
import ButtonComp from '@/components/ButtonComp';
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
import { getGlqInfo } from '@/services/gql';
|
|
|
import ClearInfoDialog from '@/components/ClearInfoDialog';
|
|
|
import SaveAs from '@/components/SaveAs';
|
|
|
|
|
|
// 网络GQL管理 --> 获取服务列表
|
|
|
export default function Page() {
|
|
|
const [lines, setLines] = useState<any>([]);
|
|
|
const [currentLineIndex, setCurrentLineIndex] = useState(0);
|
|
|
const [visibility, setVisibility] = useState<boolean>(false);
|
|
|
const outputRef: any = useRef(null);
|
|
|
|
|
|
useEffect(() => {
|
|
|
const timer = setInterval(() => {
|
|
|
if (currentLineIndex < lines.length) {
|
|
|
setCurrentLineIndex((prevIndex) => prevIndex + 1);
|
|
|
} else {
|
|
|
clearInterval(timer);
|
|
|
}
|
|
|
}, 300);
|
|
|
|
|
|
if (outputRef.current.scrollHeight > 330) {
|
|
|
outputRef.current.scrollTop = outputRef.current.scrollHeight;
|
|
|
}
|
|
|
|
|
|
return () => {
|
|
|
clearInterval(timer); // 组件卸载时清除定时器
|
|
|
};
|
|
|
}, [currentLineIndex, lines.length]);
|
|
|
|
|
|
const statusQuery = () => {
|
|
|
getGlqInfo({type: 1}).then((res) => {
|
|
|
if (res?.result == "success") {
|
|
|
setLines([
|
|
|
...lines,
|
|
|
'发送命令成功',
|
|
|
`获取服务列表`,
|
|
|
`正在获取服务列表中...`,
|
|
|
`获取服务列表完成`
|
|
|
])
|
|
|
} else {
|
|
|
setLines([`${res?.errorMsg}`])
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<div className={styles.params_warp}>
|
|
|
<ContentWarp text={'获取服务列表'}>
|
|
|
<div className='pd20'>获取被控端服务列表情况</div>
|
|
|
<div className='line'></div>
|
|
|
<div className='pd20 pb100'>
|
|
|
<div ref={outputRef} className={styles.html_con}>
|
|
|
<div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
|
|
|
{lines.slice(0, currentLineIndex).map((line: string, index: number) => (
|
|
|
<p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.btn_warp}>
|
|
|
<ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { statusQuery() }} />
|
|
|
<SaveAs style={{ marginRight: 20}} fileName='获取服务列表' domId='messageInfo'/>
|
|
|
<ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
|
|
|
</div>
|
|
|
</div>
|
|
|
</ContentWarp>
|
|
|
|
|
|
<ClearInfoDialog
|
|
|
visibility={visibility}
|
|
|
onCancel={() => setVisibility(false)}
|
|
|
onOk={() => {
|
|
|
setLines([]);
|
|
|
setCurrentLineIndex(0);
|
|
|
setVisibility(false);
|
|
|
}}>
|
|
|
<div>确定清空信息吗？</div>
|
|
|
</ClearInfoDialog>
|
|
|
</div>
|
|
|
);
|
|
|
} |
