|
|
import { DingdingOutlined, UploadOutlined } from '@ant-design/icons';
|
|
|
import { Button, Card, Steps, Result, Descriptions, Modal, Input, Upload, Popconfirm, Menu, Radio } from 'antd';
|
|
|
import { Fragment, useEffect, useRef, useState } from 'react';
|
|
|
import { GridContent } from '@ant-design/pro-layout';
|
|
|
import { Line } from '@ant-design/charts';
|
|
|
import { DualAxes } from "@ant-design/charts";
|
|
|
import styles from './index.less';
|
|
|
import ReactQuill from 'react-quill';
|
|
|
import 'react-quill/dist/quill.snow.css'
|
|
|
import ProDescriptions, { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
|
|
|
import { TableListItem } from '../ListTableList2';
|
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
import { queryCourseList } from '../course/option/service';
|
|
|
import { useRequest } from 'umi';
|
|
|
|
|
|
const { Step } = Steps;
|
|
|
|
|
|
// 秒数转化为时分秒
|
|
|
const formatSeconds= (value)=>{
|
|
|
// 秒
|
|
|
let second = parseInt(value)
|
|
|
// 分
|
|
|
let minute = 0
|
|
|
// 小时
|
|
|
let hour = 0
|
|
|
// 天
|
|
|
// let day = 0
|
|
|
// 如果秒数大于60，将秒数转换成整数
|
|
|
if (second > 60) {
|
|
|
// 获取分钟，除以60取整数，得到整数分钟
|
|
|
minute = parseInt(second / 60)
|
|
|
// 获取秒数，秒数取佘，得到整数秒数
|
|
|
second = parseInt(second % 60)
|
|
|
// 如果分钟大于60，将分钟转换成小时
|
|
|
if (minute > 60) {
|
|
|
// 获取小时，获取分钟除以60，得到整数小时
|
|
|
hour = parseInt(minute / 60)
|
|
|
// 获取小时后取佘的分，获取分钟除以60取佘的分
|
|
|
minute = parseInt(minute % 60)
|
|
|
// 如果小时大于24，将小时转换成天
|
|
|
// if (hour > 23) {
|
|
|
// // 获取天数，获取小时除以24，得到整天数
|
|
|
// day = parseInt(hour / 24)
|
|
|
// // 获取天数后取余的小时，获取小时除以24取余的小时
|
|
|
// hour = parseInt(hour % 24)
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let result = '' + parseInt(second) + ' 秒 '
|
|
|
if (minute > 0) {
|
|
|
result = '' + parseInt(minute) + ' 分 ' + result
|
|
|
}
|
|
|
if (hour > 0) {
|
|
|
result = '' + parseInt(hour) + ' 小时 ' + result
|
|
|
}
|
|
|
// if (day > 0) {
|
|
|
// result = '' + parseInt(day) + '天' + result
|
|
|
// }
|
|
|
console.log('result：', result)
|
|
|
return result
|
|
|
}
|
|
|
export default () => {
|
|
|
const uuid = uuidv4()
|
|
|
console.log('uuid', uuidv4());
|
|
|
const data = [
|
|
|
{
|
|
|
year: "1991",
|
|
|
value: 3,
|
|
|
count: 10
|
|
|
},
|
|
|
{
|
|
|
year: "1992",
|
|
|
value: 4,
|
|
|
count: 4
|
|
|
},
|
|
|
{
|
|
|
year: "1993",
|
|
|
value: 3.5,
|
|
|
count: 5
|
|
|
},
|
|
|
{
|
|
|
year: "1994",
|
|
|
value: 5,
|
|
|
count: 5
|
|
|
},
|
|
|
{
|
|
|
year: "1995",
|
|
|
value: 4.9,
|
|
|
count: 4.9
|
|
|
},
|
|
|
{
|
|
|
year: "1996",
|
|
|
value: 6,
|
|
|
count: 35
|
|
|
},
|
|
|
{
|
|
|
year: "1997",
|
|
|
value: 7,
|
|
|
count: 7
|
|
|
},
|
|
|
{
|
|
|
year: "1998",
|
|
|
value: 9,
|
|
|
count: 1
|
|
|
},
|
|
|
{
|
|
|
year: "1999",
|
|
|
value: 13,
|
|
|
count: 20
|
|
|
}
|
|
|
];
|
|
|
const data2 = [
|
|
|
{
|
|
|
year: "1991",
|
|
|
value: 30,
|
|
|
count: 100
|
|
|
},
|
|
|
{
|
|
|
year: "1992",
|
|
|
value: 40,
|
|
|
count: 40
|
|
|
},
|
|
|
{
|
|
|
year: "1993",
|
|
|
value: 3.5,
|
|
|
count: 50
|
|
|
},
|
|
|
{
|
|
|
year: "1994",
|
|
|
value: 5,
|
|
|
count: 50
|
|
|
},
|
|
|
{
|
|
|
year: "1995",
|
|
|
value: 40.9,
|
|
|
count: 24.9
|
|
|
},
|
|
|
{
|
|
|
year: "1996",
|
|
|
value: 6,
|
|
|
count: 395
|
|
|
},
|
|
|
{
|
|
|
year: "1997",
|
|
|
value: 7,
|
|
|
count: 79
|
|
|
},
|
|
|
{
|
|
|
year: "1998",
|
|
|
value: 99,
|
|
|
count: 1
|
|
|
},
|
|
|
{
|
|
|
year: "1999",
|
|
|
value: 193,
|
|
|
count: 20
|
|
|
}
|
|
|
];
|
|
|
|
|
|
|
|
|
const [modalVisible, handleModalVisible] = useState<boolean>(false);
|
|
|
const saveInputRef = useRef();
|
|
|
const radioRef = useRef();
|
|
|
|
|
|
//const currentRow = {course_name:'课程0001'};
|
|
|
const currentRow = {course_name1:'课程0001'};
|
|
|
const columns = [
|
|
|
{title: "序号", key: "index", valueType: "indexBorder", width: 48},
|
|
|
//{title: "课程名称", dataIndex: "course_name", valueType: "text", hideInTable: false, hideInDescriptions: false},
|
|
|
{dataIndex: "course_name", hideInDescriptions: false, hideInForm: false,hideInSearch: true,hideInTable: false, title: "课程名称1", valueType: "text"},
|
|
|
{}
|
|
|
];
|
|
|
const [chartData, setChartData] = useState([data, data]);
|
|
|
|
|
|
const [selectedCourse, setSelectedCourse] = useState(0);
|
|
|
const [menu, setMenu] = useState();
|
|
|
|
|
|
const [timeData, setTimeData] = useState(0);
|
|
|
|
|
|
useEffect(() => {
|
|
|
let secondValue = 3000; // 秒 截至时间 - 服务器当前时间
|
|
|
setTimeData(secondValue)
|
|
|
const timer = setInterval(() => { //
|
|
|
setTimeData((secondValue > 1) ? secondValue-- : 0);
|
|
|
}, 1000);
|
|
|
return ()=>{
|
|
|
clearInterval(timer) // 清理计算器
|
|
|
}
|
|
|
},[])
|
|
|
|
|
|
/** 获取课程数据 */
|
|
|
const { data: listData } = useRequest(() => {
|
|
|
return queryCourseList();
|
|
|
});
|
|
|
useEffect(() => {
|
|
|
console.log('listData', listData)
|
|
|
setInterval(() => {
|
|
|
setChartData(Math.random() > 0.5 ? [data, data] : [data2, data2]);
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
|
|
/** 生成菜单 */
|
|
|
const menuItems = [];
|
|
|
|
|
|
if(listData?.length > 0){
|
|
|
console.log('push');
|
|
|
listData.list.forEach((item: {code: number, name: string})=>{
|
|
|
menuItems.push(<Menu.Item key={item?.course_id}>{item?.course_name}</Menu.Item>)
|
|
|
})
|
|
|
}
|
|
|
setMenu(
|
|
|
<Menu onClick={(value)=>{
|
|
|
console.log('menu11', value);
|
|
|
console.log('menu11', value.key);
|
|
|
//setMenu({ name: listData[Number(value?.key)]?.name, value: Number(value?.key)});
|
|
|
}}
|
|
|
>
|
|
|
{menuItems}
|
|
|
</Menu>
|
|
|
);
|
|
|
}, [listData, selectedCourse]);
|
|
|
|
|
|
const config = {
|
|
|
data: chartData,
|
|
|
xField: "year",
|
|
|
yField: ["value", "count"]
|
|
|
};
|
|
|
|
|
|
return(
|
|
|
<>
|
|
|
{menu}
|
|
|
<Input value={123} ref={saveInputRef} />
|
|
|
<a onClick={()=>{
|
|
|
saveInputRef.current.focus({})
|
|
|
console.log('ref', saveInputRef.current)
|
|
|
}}>焦点</a>
|
|
|
<a onClick={()=>{handleModalVisible(true)}}>课程</a>
|
|
|
<p>uuid: {uuidv4()}</p>
|
|
|
<ReactQuill
|
|
|
theme="snow"
|
|
|
value=''
|
|
|
onChange={(val)=>{
|
|
|
// val === 转化出来的html
|
|
|
}}
|
|
|
/>
|
|
|
<p>
|
|
|
<div dangerouslySetInnerHTML={{__html: '<h3>hello</h3>'}} />
|
|
|
</p>
|
|
|
<p>
|
|
|
/dsideal_yy/html/down/Syzx/{uuid?.substr(0,2)}/{uuid}.jpg
|
|
|
/dsideal_yy/html/down/Material/BC/BCFFEA09-9660-9D40-8D11-EF7D7110F7A2.jpg
|
|
|
获取文件详情（下载url，播放url） /dsideal_yy/wkds/getwkdsInfo
|
|
|
</p>
|
|
|
<Upload
|
|
|
showUploadList={false}
|
|
|
action="/dsideal_yy/res/plupload/"
|
|
|
data={
|
|
|
{
|
|
|
name: '4.jpg',
|
|
|
chunk: 0,
|
|
|
chunks: 1,
|
|
|
key: 'down/Material/BC/BCFFEA09-9660-9D40-8D11-EF7D7110F7A2.jpg'
|
|
|
}
|
|
|
}
|
|
|
>
|
|
|
<div className={styles.button_view}>
|
|
|
<Button>
|
|
|
<UploadOutlined />
|
|
|
更换头像
|
|
|
</Button>
|
|
|
</div>
|
|
|
</Upload>
|
|
|
|
|
|
<Modal
|
|
|
title={currentRow?.course_name || '课程详细'}
|
|
|
width="60%"
|
|
|
visible={modalVisible}
|
|
|
onCancel={() => {
|
|
|
// setCurrentRow(undefined); // 设置当前行
|
|
|
handleModalVisible(false);
|
|
|
}}
|
|
|
footer={null}
|
|
|
centered
|
|
|
>
|
|
|
|
|
|
<ProDescriptions<TableListItem>
|
|
|
column={2}
|
|
|
/* title={currentRow?.name} */
|
|
|
dataSource={currentRow}
|
|
|
/*
|
|
|
request={async () => ({
|
|
|
data: currentRow || {},
|
|
|
})}*/
|
|
|
params={{
|
|
|
id: currentRow?.id,
|
|
|
}}
|
|
|
columns={
|
|
|
columns.slice(0, columns.length - 1) as ProDescriptionsItemProps<TableListItem>[]
|
|
|
}
|
|
|
/>
|
|
|
|
|
|
</Modal>
|
|
|
<Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
|
|
|
<a href="#">Delete</a>
|
|
|
</Popconfirm>
|
|
|
|
|
|
<DualAxes {...config} />
|
|
|
|
|
|
|
|
|
<Radio.Group onChange={()=>{
|
|
|
}}>
|
|
|
<Radio value={1}>A</Radio>
|
|
|
<Radio value={2}>B</Radio>
|
|
|
<Radio value={3}>C</Radio>
|
|
|
<Radio value={4} defaultChecked>D</Radio>
|
|
|
</Radio.Group>
|
|
|
<a onClick={()=>{}}>rrrrr</a>
|
|
|
|
|
|
|
|
|
<div style={{padding:24,fontSize:30}}>{formatSeconds(timeData)}</div>
|
|
|
</>
|
|
|
)
|
|
|
};
|
