Merge branch 'master' of http://10.10.14.176:3000/web/syzx

web/config/config.ts

@@ -119,7 +119,7 @@ export default defineConfig({
         {
           name: '课程列表',
           icon: 'smile',
-          path: '/course/detail',
+          path: '/course/detail/:msg',
           component: './course/detail',
         },
       ],

web/src/pages/course/components/VideoJS/index.tsx

@@ -1,39 +1,67 @@
-import React from "react";
+import React, {useEffect,useState} from "react";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
 import "videojs-contrib-hls";
 export const VideoJS = ( props: any ) => {
-
+    const [count,setCount]=useState(0);
+    const countRef=React.useRef(count);
     const videoRef = React.useRef(null);
     const playerRef = React.useRef<any>(null);
-    const { options, onReady } = props;
-  
+    const { options, onReady,saveLearning,getTime } = props;
     React.useEffect(() => {
-  
-      // make sure Video.js player is only initialized once
       if (!playerRef.current) {
         const videoElement = videoRef.current;
         if (!videoElement) return;
-  
         const player = playerRef.current = videojs(videoElement, options, () => {
-          console.log("player is ready");
+          // console.log("player is ready");
           onReady && onReady(player);
         });
       } else {
         // you can update player here [update player through props]
         const player = playerRef.current;
-        console.log('playerplayerplayer===',player);
         player.src(options.sources[0].src);
-        player.autoplay(true);
+        // player.autoplay(true);
+        videoRef.current.addEventListener('play',()=>{
+          console.log('播放');
+          setCount(player.currentTime());
+          playerRef.current.currentTime(count)
+          // player.currentTime(count)
+          // getTime(player.currentTime());
+          // saveLearning();
+        });
+        videoRef.current.addEventListener('pause',()=>{
+          console.log('停止了')
+        })
 
       }
-    }, [options, videoRef]);
+
+    }, [options]);
+    // useEffect(()=>{
+    //   videoRef.current.addEventListener()
+    // },[]);
+
+  React.useEffect(()=>{
+    countRef.current=count;
+  },[count])
+
+
+  if(count!==0){
+    if(countRef.current.toFixed(2)!==count.toFixed(2)){
+      // console.log('countRef.current前一次',countRef.current.toFixed(2));
+      // console.log('count这一次',count.toFixed(2))
+      getTime(count.toFixed(2));
+      saveLearning(count);
+
+    }
+  }
+
 
     return (
       <div data-vjs-player>
         <video style={{
           width:'100%',
           height:'auto'
+
         }} ref={videoRef} className="video-js vjs-big-play-centered" />
       </div>
     );

web/src/pages/course/detail/index.tsx

@@ -1,7 +1,8 @@
 import { AlignLeftOutlined, LaptopOutlined, NotificationOutlined, PlusOutlined, UserOutlined } from '@ant-design/icons';
 import { Button, Card, Col, Layout, List, Menu, Progress, Row, Typography } from 'antd';
 import { PageContainer } from '@ant-design/pro-layout';
-import { useRequest } from 'umi';
+import {useParams, useRequest} from 'umi';
+import {useEffect, useState} from 'react';
 import { queryFakeList } from './service';
 import type { CardListItemDataType } from './data';
 import styles from './style.less';
@@ -10,19 +11,79 @@ import Sider from 'antd/lib/layout/Sider';
 import SubMenu from 'antd/lib/menu/SubMenu';
 import { VideoJS } from '../components/VideoJS';
 import { useRef } from 'react';
-
+import {listMyLearningChapterCourse1, viewCourseGetMyLearning,saveMyLearning} from  './service';
+import cookie from 'react-cookies';
 const { Paragraph } = Typography;
 
 const CardList = () => {
+  const [currentLearning, SetCurrentLearning] = useState();
+  const [courseId, SetCourseId] = useState();
+  let time=0;
   const videoRef = useRef<HTMLVideoElement>(null);
-  const { data, loading } = useRequest(() => {
-    return queryFakeList({
-      count: 8,
+  const params = useParams();
+  const ids = params.msg.split(',');//chapter_id,course_id,subject_id
+
+
+
+  console.log('courseIdcourseIdcourseIdcourseId',courseId)
+  /** 获取课节 */
+  const { data } = useRequest(() => {
+    return listMyLearningChapterCourse1({
+      chapter_id: ids[0],
+      identity_id:cookie.load('identity_id'),
+      person_id:cookie.load('person_id'),
+      subject_id: ids[2],
+    });
+  });
+
+  /** 获取视频 */
+  const {data: learning, run, loading } = useRequest((params:{course_id:number}) => {
+    // SetCourseId(ids[1]);
+    return viewCourseGetMyLearning({
+      identity_id:cookie.load('identity_id'),
+      person_id:cookie.load('person_id'),
+      subject_id: ids[2],//chapter_list[0].subject_id
+      chapter_id: ids[0],//chapter_list[0].chapter_id
+      course_id:params?.course_id,
     });
   });
 
-  const list = data?.list || [];
+  console.log('learning',learning)
+  //保存进度
+  const {data: progress, run:saveProgress, } = useRequest((params:{time:number}) => {
+    return saveMyLearning({
+      chapter_id:learning?.learning.chapter_id,//章节id
+      course_id:courseId?courseId:ids[1],//课程id
+      identity_id:cookie.load('identity_id'),
+      learning_id:learning?.learning.learning_id,//学习记录id
+      learning_second:0,//距离上次提交持续学习秒数(非必填)
+      person_id:cookie.load('person_id'),
+      play_second:params?.time,//当前播放时间点（秒数)
+      subject_id:learning?.learning.subject_id,//主题id
+      video_second:learning?.course.course_minutes*60,//视频总长度
+    });
+  });
+
+
+  /** 首次页面 当data 变化 执行run， chapterCourse 变化 进行currentCourse赋值 */
+  useEffect(() => {
+    if(data !== undefined && data !== null){
+      run({course_id:ids[1]});
+      SetCurrentLearning(learning)
+    }
+    //setSelectedCourse({})
+  },[data]);
+
+  /** run后 chapterCourse 变化 进行currentCourse赋值 */
+  useEffect(() => {
+    if(data !== undefined){
+      SetCurrentLearning(learning)
+    }
+    //setSelectedCourse({})
+  },[learning]);
+
 
+  //
   const content = (
     <div className={styles.pageHeaderContent}>
       <Card
@@ -54,32 +115,55 @@ const CardList = () => {
       </Card>
     </div>
   );
-
   //const videoInfo = {url:'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8', img:''}
   //const videoInfo = {url:'https://media.w3.org/2010/05/sintel/trailer_hd.mp4', img:''}
-  const videoInfo = {url:'http://10.10.14.199/dsideal_yy/html/down/M3u8/2D/2D99BF1D-2F37-47FB-8A24-45112A236B8F.m3u8', img:''}
-  
+  const videoInfo = {url:'http://10.10.14.199/dsideal_yy/html/down/M3u8/2D/2D99BF1D-2F37-47FB-8A24-45112A236B8F.m3u8', img:''}//有视频
+    // const videoInfo=learning?.course.attachment_json;isg
   const nullData: Partial<CardListItemDataType> = {};
+  const saveLearning=()=>{
+    console.log('保存进队');
+    saveProgress({time:time})
+
+  };
+
+  // const saveLearning=useEffect(() => {
+  //   console.log('保存进队');
+  //     saveProgress({time:time})
+  // },[time]);
+  console.log('time',time)
   return (
-    <PageContainer content={content} extraContent={false}>
+    <PageContainer
+      // content={content}
+      extraContent={false}>
       <Row>
         <Col span={6} style={{paddingRight:24}}>
           <Menu
             mode="inline"
-            defaultSelectedKeys={['1']}
+            selectedKeys={[ids[1].toString()]}
             defaultOpenKeys={['sub1']}
             style={{ height: '100%', width:'100%' }}
           >
-            <SubMenu key="sub1" icon={<AlignLeftOutlined />} title="章节目录">
-              <Menu.Item key="1">第1节 特质因素理论</Menu.Item>
-              <Menu.Item key="2">第2节 生涯发展理论</Menu.Item>
-              <Menu.Item key="3">第3节 明尼苏达工作适应论</Menu.Item>
+            <SubMenu key="sub1" icon={<AlignLeftOutlined />} title="课节目录">
+              {
+                data!==undefined?
+                  data.map((item)=>{
+                    return(
+                      <Menu.Item key={item.course_id} onClick={()=>{
+                        SetCourseId(item.course_id);
+                        run({course_id:item.course_id})
+                      }}>{item.course_name}</Menu.Item>
+                    )
+                  }):''
+
+              }
+
             </SubMenu>
           </Menu>
         </Col>
         <Col span={18} style={{background:'#ffffff', padding:24}}>
           {
-                videoInfo.url && <VideoJS options={{
+                videoInfo.url && <VideoJS
+                  options={{
                     controls: true,
                        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                        autoplay: false, // 如果true,浏览器准备好时开始回放。
@@ -91,6 +175,7 @@ const CardList = () => {
                        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                        sources: [
                          {
+                           // src: 'http://10.10.24.121:8000/dsideal_yy/html/'+videoInfo.url,
                            src: videoInfo.url,
                            type: 'application/x-mpegURL'
                          }
@@ -106,11 +191,19 @@ const CardList = () => {
                        }
 
 
-                }} onReady={(play: any)=>{
+                  }}
+                  onReady={(play: any)=>{
                   console.log('play====',play);
-                  videoRef.current = play
+                  videoRef.current = play;
                   play.play()
-                }}/>
+                }}
+                  saveLearning={()=>{saveLearning()}}
+                  getTime={(info)=>{
+                    // setTime(info);
+                    time=info;
+                    console.log('接收的秒数',info)
+                  }}
+                />
               }
         </Col>
       </Row>

web/src/pages/course/detail/service.ts

@@ -1,10 +1,43 @@
 import { request } from 'umi';
 import type { CardListItemDataType } from './data.d';
 
-export async function queryFakeList(params: {
-  count: number;
-}): Promise<{ data: { list: CardListItemDataType[] } }> {
-  return request('/api/card_fake_list', {
+// export async function queryFakeList(params: {
+//   count: number;
+// }): Promise<{ data: { list: CardListItemDataType[] } }> {
+//   return request('/api/card_fake_list', {
+//     params,
+//   });
+// }
+
+
+//获取课节
+export async function listMyLearningChapterCourse1(params: {
+  chapter_id: number;
+  identity_id: number;
+  person_id: number;
+  subject_id: number
+}){
+  return request(' /dsideal_yy/ypt/careerTraining/learning/listMyLearningChapterCourse', {
     params,
   });
 }
+
+
+export async function viewCourseGetMyLearning(data: { [key: string]: any }, options?: { [key: string]: any }) {
+  return request('/dsideal_yy/ypt/careerTraining/learning/viewCourseGetMyLearning', {
+    data,
+    method: 'POST',
+    requestType: "form",
+    ...(options || {}),
+  });
+}
+
+//保存进度
+export async function saveMyLearning(data: { [key: string]: any }, options?: { [key: string]: any }) {
+  return request('/dsideal_yy/ypt/careerTraining/learning/saveMyLearning', {
+    data,
+    method: 'POST',
+    requestType: "form",
+    ...(options || {}),
+  });
+}

web/src/pages/course/list/index.tsx

@@ -7,29 +7,13 @@ import { viewMyLearningSubject,listMyLearningChapterCourse } from './service';
 import type { CardListItemDataType } from './data.d';
 import styles from './style.less';
 import SubMenu from 'antd/lib/menu/SubMenu';
-console.log('course/list')
 const { Paragraph } = Typography;
 import cookie from 'react-cookies';
-// const getList = async (subject_id,chapter_id ) => {
-//   // const hide = message.loading('正在配置');
-//   try {
-//     const a=await listMyLearningChapterCourse({
-//       identity_id:cookie.load('identity_id'),
-//           person_id:cookie.load('person_id'),
-//           subject_id:subject_id,
-//           chapter_id:chapter_id,
-//     });
-//     // message.success('配置成功');
-//     return a;
-//   } catch (error) {
-//     // message.error('配置失败请重试！');
-//     return false;
-//   }
-// };
+import {history} from "@@/core/history";
+
 
 const CardList = () => {
   const params = useParams();
-  console.log('params',params);
   const ids = params.msg.split(',');
 
   const [currentCourse, SetCurrentCourse] = useState()
@@ -46,12 +30,12 @@ const CardList = () => {
     });
   });
 
-  const list = data?.list||[];
+  // const list = data?.list||[];
   const subject_data=data?data.subject:[];
   const last_data=data?data.last_learning_course:[];
   const chapter_list=data?data.chapter_list:[];
 
-//console.log('currentCourse', currentCourse)
+// console.log('list', list)
 
   /** 获取课程详情 */
   const {data: chapterCourse, run, loading } = useRequest((params:{subject_id:number, chapter_id:number}) => {
@@ -65,8 +49,8 @@ const CardList = () => {
 
    /** 首次页面 当data 变化 执行run， chapterCourse 变化 进行currentCourse赋值 */
   useEffect(() => {
-    console.log('chapterCourse...', chapterCourse)    
-    if(data !== undefined && data !== null){
+    // console.log('chapterCourse首次页面...', chapterCourse)
+    if(data !== undefined && data !== null&&chapter_list.length!==0){
       run({subject_id:data?.chapter_list[0]?.subject_id, chapter_id:data?.chapter_list[0]?.chapter_id})
       SetCurrentCourse(chapterCourse)
     }
@@ -75,34 +59,12 @@ const CardList = () => {
 
   /** run后 chapterCourse 变化 进行currentCourse赋值 */
   useEffect(() => {
-    console.log('chapterCourse...', chapterCourse)    
+    // console.log('chapterCourse变化...', chapterCourse)
     if(data !== undefined){
-      console.log('data', data)
       SetCurrentCourse(chapterCourse)
     }
     //setSelectedCourse({})
   },[chapterCourse]);
-  // if(chapter_list.length!==0){
-  //
-  //   // const msg  = useRequest(() => {
-  //   //   return listMyLearningChapterCourse({
-  //   //     identity_id:cookie.load('identity_id'),
-  //   //     person_id:cookie.load('person_id'),
-  //   //     subject_id:chapter_list?chapter_list[0].subject_id:'',
-  //   //     chapter_id:chapter_list?chapter_list[0].chapter_id:'',
-  //   //
-  //   //   });
-  //   // });
-  //   // console.log('msg',msg)
-  // }
-
-    // const msg = await listMyLearningChapterCourse({
-    //   identity_id:cookie.load('identity_id'),
-    //   person_id:cookie.load('person_id'),
-    //   subject_id:chapter_list[0].subject_id,
-    //   chapter_id:chapter_list[0].chapter_id,
-    // });
-    // console.log('msg======',msg)
 
   const content = (
     <div className={styles.pageHeaderContent}>
@@ -126,7 +88,9 @@ const CardList = () => {
                   <Col span={16} style={{display:'inline-block', padding:10}}><span>学习进度：</span><span style={{display:'inline-block', width:'80%'}}><Progress percent={subject_data?subject_data.subject_learning_progress*100:0} /></span></Col>
                 </Row>
                 <Row>
-                  <Col span={10} style={{padding:10}}><span>上次学习：</span><span>{last_data?last_data.course_name:'--'}</span></Col> <Col span={10} style={{padding:10}}>主讲人：<span>{last_data?last_data.lecture_teacher:'--'}</span></Col> <Col span={4} style={{padding:10}}><Button type="primary">去学习::</Button></Col>
+                  <Col span={10} style={{padding:10}}><span>上次学习：</span><span>{last_data?last_data.course_name:'--'}</span></Col>
+                  <Col span={10} style={{padding:10}}>主讲人：<span>{last_data?last_data.lecture_teacher:'--'}</span></Col>
+                  <Col span={4} style={{padding:10}}><Button type="primary">去学习</Button></Col>
                 </Row>
               </Card.Grid>
             </>
@@ -136,8 +100,6 @@ const CardList = () => {
     </div>
   );
 
-
-  console.log('iddddddd',chapter_list.length!==0?chapter_list[0].chapter_id.toString():'')
   const nullData: Partial<CardListItemDataType> = {};
   return (
     <PageContainer content={content} extraContent={false}>
@@ -164,88 +126,97 @@ const CardList = () => {
 
                   }):''
               }
-              {/*<Menu.Item key="1">生涯规划理论</Menu.Item>*/}
-              {/*<Menu.Item key="2">生涯规划基本步骤</Menu.Item>*/}
-              {/*<Menu.Item key="3">生涯测评的应用与实践</Menu.Item>*/}
-              {/*<Menu.Item key="4">生涯测评的应用与实践</Menu.Item>*/}
-              {/*<Menu.Item key="5">生涯测评的应用与实践</Menu.Item>*/}
-              {/*<Menu.Item key="6">生涯测评的应用与实践</Menu.Item>*/}
-              {/*<Menu.Item key="7">生涯测评的应用与实践</Menu.Item>*/}
-              {/*<Menu.Item key="8">生涯测评的应用与实践</Menu.Item>*/}
 
-              {/*<Menu.Item key="9">生涯测评的应用与实践</Menu.Item>*/}
-              {/*<Menu.Item key="10">生涯测评的应用与实践</Menu.Item>*/}
-              {/*<Menu.Item key="11">生涯测评的应用与实践</Menu.Item>*/}
-              {/*<Menu.Item key="12">生涯测评的应用与实践</Menu.Item>*/}
             </SubMenu>
           </Menu>
         </Col>
-        <Col span={18} style={{background:'#ffffff', padding:24}}>
+        <Col span={18} style={{background:'#ffffff', padding:24,minHeight:'20rem'}}>
           {console.log('chapterCourse', chapterCourse)}
+          {console.log('chapterCourse', typeof (chapterCourse))}
         {
-          chapterCourse !== undefined ?
-          <>
-            <>{chapterCourse[0]?.course_name}</>
-            <>{chapterCourse[0]?.lecture_teacher}</>
-          </>
+          chapterCourse !== undefined &&chapterCourse !== ''?
+            chapterCourse.map((item,index)=>{
+              return(
+                <div key={'chapterCourse'+index} >
+                  <div style={{marginBottom:'2rem',}}>
+                    <div style={{paddingRight:'1rem',width:'10%',display:'inline-block'}}>第{item?.sort_no}讲</div>
+                    <div title={item?.course_name} style={{paddingRight:'1rem',width:'30%',display:'inline-block',verticalAlign:'middle',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{item?.course_name}</div>
+                    <div style={{paddingRight:'1rem',width:'10%',display:'inline-block'}}>{item?.course_hours}小时</div>
+                    <div style={{paddingRight:'1rem',width:'30%',display:'inline-block'}}>
+                      <Progress percent={item?.learning_progress*100} />
+                    </div>
+                    <div style={{paddingRight:'1rem',width:'20%',display:'inline-block',textAlign:'right'}}>
+                      <Button type="primary" onClick={()=>{
+                        const info=item.chapter_id+','+item.course_id+','+item.subject_id;
+                        window.open('/#/course/detail/'+info)
+                        // history.push( '/course/detail/'+info);
+                      }}>学习</Button>
+                    </div>
+                  </div>
+
+
+                </div>
+              )
+            })
+
           : <>暂无</>
         }
 
 
-          <List<Partial<CardListItemDataType>>
-          rowKey="id"
-          // loading={loading}
-          grid={{
-            gutter: 1,
-            xs: 1,
-            sm: 2,
-            md: 1,
-            lg: 1,
-            xl: 1,
-            xxl: 1,
-          }}
-          dataSource={[nullData, ...list]}
-          renderItem={(item) => {
-            if (item && item.id) {
-              return (
-                <List.Item key={item.id}>
-                  <Card
-                    hoverable={false}
-                    className={styles.card}
-                    actions={[]}
-                    style={{background:'#f0f0f0'}}
-                  >
-                    <Card.Meta
-                      avatar={false}
-                      title={<a>{item.title}</a>}
-                      description={
-                        <Row>
-                          <Col span={4} style={{padding:10}}>
-                            第1讲
-                          </Col>
-                          <Col span={8} style={{padding:10}}>
-                            <Paragraph className={styles.item} ellipsis={{ rows: 3 }}>
-                              {item.description}
-                            </Paragraph>
-                          </Col>
-                          <Col span={4} style={{padding:10, textAlign:'center'}}>
-                            23分钟
-                          </Col>
-                          <Col span={4} style={{padding:10, textAlign:'center'}}>
-                            <Progress percent={30} />
-                          </Col>
-                          <Col span={4} style={{padding:10, textAlign:'center'}}>
-                            <Button type="primary">学习</Button>
-                          </Col>
-                        </Row>
-                      }
-                    />
-                  </Card>
-                </List.Item>
-              );
-            }
-          }}
-        />
+        {/*  <List<Partial<CardListItemDataType>>*/}
+        {/*  rowKey="id"*/}
+        {/*  // loading={loading}*/}
+        {/*  grid={{*/}
+        {/*    gutter: 1,*/}
+        {/*    xs: 1,*/}
+        {/*    sm: 2,*/}
+        {/*    md: 1,*/}
+        {/*    lg: 1,*/}
+        {/*    xl: 1,*/}
+        {/*    xxl: 1,*/}
+        {/*  }}*/}
+        {/*  dataSource={[nullData, chapterCourse]}*/}
+        {/*  renderItem={(item) => {*/}
+        {/*    if (item && item.id) {*/}
+        {/*      return (*/}
+        {/*        <List.Item key={item.id}>*/}
+        {/*          <Card*/}
+        {/*            hoverable={false}*/}
+        {/*            className={styles.card}*/}
+        {/*            actions={[]}*/}
+        {/*            style={{background:'#f0f0f0'}}*/}
+        {/*          >*/}
+        {/*            <Card.Meta*/}
+        {/*              avatar={false}*/}
+        {/*              title={<a>{item.title}</a>}*/}
+        {/*              description={*/}
+        {/*                <Row>*/}
+        {/*                  <Col span={4} style={{padding:10}}>*/}
+        {/*                    第1讲*/}
+        {/*                  </Col>*/}
+        {/*                  <Col span={8} style={{padding:10}}>*/}
+        {/*                    <Paragraph className={styles.item} ellipsis={{ rows: 3 }}>*/}
+        {/*                      {item.description}*/}
+        {/*                    </Paragraph>*/}
+        {/*                  </Col>*/}
+        {/*                  <Col span={4} style={{padding:10, textAlign:'center'}}>*/}
+        {/*                    23分钟*/}
+        {/*                  </Col>*/}
+        {/*                  <Col span={4} style={{padding:10, textAlign:'center'}}>*/}
+        {/*                    <Progress percent={30} />*/}
+        {/*                  </Col>*/}
+        {/*                  <Col span={4} style={{padding:10, textAlign:'center'}}>*/}
+        {/*                    <Button type="primary">学习</Button>*/}
+        {/*                  </Col>*/}
+        {/*                </Row>*/}
+        {/*              }*/}
+        {/*            />*/}
+        {/*          </Card>*/}
+        {/*        </List.Item>*/}
+        {/*      );*/}
+        {/*    }*/}
+        {/*  }}*/}
+        {/*/>*/}
         </Col>
       </Row>