fix

src/pages/sample/home/components/AreaChart.jsx

@@ -1,191 +0,0 @@
-import React from 'react';
-import { Card } from 'antd';
-import * as echarts from 'echarts/core';
-import Chart from '@/components/chart';
-
-export default (props) => {
-  const option = {
-    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
-    // title: {
-    //   text: 'Gradient Stacked Area Chart'
-    // },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
-      }
-    },
-    legend: {
-      data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        type: 'category',
-        boundaryGap: false,
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value'
-      }
-    ],
-    series: [
-      {
-        name: 'Line 1',
-        type: 'line',
-        stack: 'Total',
-        smooth: true,
-        lineStyle: {
-          width: 0
-        },
-        showSymbol: false,
-        areaStyle: {
-          opacity: 0.8,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgb(128, 255, 165)'
-            },
-            {
-              offset: 1,
-              color: 'rgb(1, 191, 236)'
-            }
-          ])
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: [140, 232, 101, 264, 90, 340, 250]
-      },
-      {
-        name: 'Line 2',
-        type: 'line',
-        stack: 'Total',
-        smooth: true,
-        lineStyle: {
-          width: 0
-        },
-        showSymbol: false,
-        areaStyle: {
-          opacity: 0.8,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgb(0, 221, 255)'
-            },
-            {
-              offset: 1,
-              color: 'rgb(77, 119, 255)'
-            }
-          ])
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: [120, 282, 111, 234, 220, 340, 310]
-      },
-      {
-        name: 'Line 3',
-        type: 'line',
-        stack: 'Total',
-        smooth: true,
-        lineStyle: {
-          width: 0
-        },
-        showSymbol: false,
-        areaStyle: {
-          opacity: 0.8,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgb(55, 162, 255)'
-            },
-            {
-              offset: 1,
-              color: 'rgb(116, 21, 219)'
-            }
-          ])
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: [320, 132, 201, 334, 190, 130, 220]
-      },
-      {
-        name: 'Line 4',
-        type: 'line',
-        stack: 'Total',
-        smooth: true,
-        lineStyle: {
-          width: 0
-        },
-        showSymbol: false,
-        areaStyle: {
-          opacity: 0.8,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgb(255, 0, 135)'
-            },
-            {
-              offset: 1,
-              color: 'rgb(135, 0, 157)'
-            }
-          ])
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: [220, 402, 231, 134, 190, 230, 120]
-      },
-      {
-        name: 'Line 5',
-        type: 'line',
-        stack: 'Total',
-        smooth: true,
-        lineStyle: {
-          width: 0
-        },
-        showSymbol: false,
-        label: {
-          show: true,
-          position: 'top'
-        },
-        areaStyle: {
-          opacity: 0.8,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgb(255, 191, 0)'
-            },
-            {
-              offset: 1,
-              color: 'rgb(224, 62, 76)'
-            }
-          ])
-        },
-        emphasis: {
-          focus: 'series'
-        },
-        data: [220, 302, 181, 234, 210, 290, 150]
-      }
-    ]
-  };
-  
-
-  return (
-    <Card title='Gradient Stacked Area Chart'>
-      <Chart option={option} style={props.style}></Chart>
-    </Card>
-  )
-}

src/pages/sample/home/components/Banner.jsx

@@ -1,44 +1,127 @@
-import React from 'react';
-import { Row, Col, Card, Statistic } from 'antd';
-import { ArrowDownOutlined, ArrowUpOutlined, LikeOutlined } from '@ant-design/icons';
+import { Row, Col, Card, Statistic, Carousel } from "antd";
+import {
+  ArrowDownOutlined,
+  ArrowUpOutlined,
+  LikeOutlined,
+} from "@ant-design/icons";
+import React, { useState } from "react";
+import { getBannerList } from "@/services/rotationChart";
+
+import { useRef } from "react";
+import { useEffect } from "react";
+import moment from "moment";
+import VideoPlay from "./VideoPlay.jsx";
+import { floatDivide } from "@/utils";
+
+const contentStyle = {
+  height: "760px",
+  margin: "0 auto",
+  width: "100%",
+  // color: "#fff",
+  // lineHeight: "160px",
+  // textAlign: "center",
+  // background: "#364d79",
+};
 
 export default (props) => {
+  const [autoPlay, setAutoPlay] = useState(true);
+  const [current, setCurrent] = useState(0);
+  const [mouse, setMouse] = useState(false);
+  const [mediaList, setMediaList] = useState([]);
+
+  const ref = useRef();
+
+  const mouseRef = useRef(false);
+  const isVideoRef = useRef(false);
+  const isVideoPlayRef = useRef(false);
+  useEffect(() => {
+    getBannerList().then((res) => {
+   
+
+      setMediaList(
+        res?.records?.map((x) => {
+          if (x.type === "2") {
+            return {
+              ...x,
+              type: "video",
+              url: x.video,
+            };
+          } else {
+            return {
+              ...x,
+              type: "image",
+              url: x.image,
+            };
+          }
+        })
+      );
+    });
+    handNext();
+  }, []);
+
+  const handNext = () => {
+    setTimeout(() => {
+
+      if (!mouseRef.current && !isVideoRef.current && !isVideoPlayRef.current) {
+        ref.current?.next();
+      }
+      handNext();
+    }, 3000);
+  };
+
+  const onMouseEnter = () => {
+   
+    mouseRef.current = true;
+  };
+  const onMouseLeave = () => {
+    mouseRef.current = false;
+  };
+
   return (
-    <Row gutter={24}>
-      <Col span={6}>
-        <Card>
-          <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
-        </Card>
-      </Col>
-      <Col span={6}>
-        <Card>
-          <Statistic title="Unmerged" value={93} suffix="/ 100" />
-        </Card>
-      </Col>
-      <Col span={6}>
-        <Card>
-          <Statistic
-            title="Active"
-            value={11.28}
-            precision={2}
-            valueStyle={{ color: '#3f8600' }}
-            prefix={<ArrowUpOutlined />}
-            suffix="%"
-          />
-        </Card>
-      </Col>
-      <Col span={6}>
-        <Card>
-          <Statistic
-            title="Idle"
-            value={9.3}
-            precision={2}
-            valueStyle={{ color: '#cf1322' }}
-            prefix={<ArrowDownOutlined />}
-            suffix="%"
-          />
-        </Card>
-      </Col>
-    </Row>
-  )
-}
+    <>
+      <div
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        style={{ height: 800 }}
+      >
+        <Carousel
+          ref={ref}
+          afterChange={(cur) => {
+            setCurrent(cur);
+          }}
+        >
+          {mediaList?.map((x, index) => {
+            if (x.type === "image") {
+              return (
+                <div className="abc" key={index}>
+                  <div style={{ overflow: "hidden" }}>
+                    <img src={x.url} style={contentStyle}></img>
+                  </div>
+                </div>
+              );
+            }
+            if (x.type === "video") {
+
+              return (
+                <div key={index}>
+                  <VideoPlay
+                    url={x.url}
+                    isVideoPlayRef={isVideoPlayRef}
+                    index={index}
+                    current={current}
+                    contentStyle={contentStyle}
+                  ></VideoPlay>
+                </div>
+              );
+            }
+          })}
+        </Carousel>
+      </div>
+
+      {/* <div>
+
+        <video autoPlay src={video2} ></video>
+      </div> */}
+    </>
+  );
+};

src/pages/sample/home/components/BarChart.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Card } from 'antd';
-import Chart from '@/components/chart';
-
-export default (props) => {
-
-  const option = {
-    legend: {},
-    tooltip: {},
-    dataset: {
-      source: [
-        ['product', '2015', '2016', '2017'],
-        ['Matcha Latte', 43.3, 85.8, 93.7],
-        ['Milk Tea', 83.1, 73.4, 55.1],
-        ['Cheese Cocoa', 86.4, 65.2, 82.5],
-        ['Walnut Brownie', 72.4, 53.9, 39.1]
-      ]
-    },
-    xAxis: { type: 'category' },
-    yAxis: {},
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    // Declare several bar series, each will be mapped
-    // to a column of dataset.source by default.
-    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
-  };
-
-  return (
-    <Card title='Bar Chart'>
-      <Chart option={option} style={props.style}></Chart>
-    </Card>
-  )
-}

src/pages/sample/home/components/PictorialBar.jsx

@@ -1,112 +0,0 @@
-import React from 'react';
-import { Card } from 'antd';
-import * as echarts from 'echarts/core';
-import Chart from '@/components/chart';
-
-
-export default (props) => {
-  let category = [];
-  let dottedBase = +new Date();
-  let lineData = [];
-  let barData = [];
-  for (let i = 0; i < 20; i++) {
-    let date = new Date((dottedBase += 3600 * 24 * 1000));
-    category.push(
-      [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
-    );
-    let b = Math.random() * 200;
-    let d = Math.random() * 200;
-    barData.push(b);
-    lineData.push(d + b);
-  }
-
-  const option = {
-    backgroundColor: '#0f375f',
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    legend: {
-      data: ['line', 'bar'],
-      textStyle: {
-        color: '#ccc'
-      }
-    },
-    xAxis: {
-      data: category,
-      axisLine: {
-        lineStyle: {
-          color: '#ccc'
-        }
-      }
-    },
-    yAxis: {
-      splitLine: { show: false },
-      axisLine: {
-        lineStyle: {
-          color: '#ccc'
-        }
-      }
-    },
-    series: [
-      {
-        name: 'line',
-        type: 'line',
-        smooth: true,
-        showAllSymbol: true,
-        symbol: 'emptyCircle',
-        symbolSize: 15,
-        data: lineData
-      },
-      {
-        name: 'bar',
-        type: 'bar',
-        barWidth: 10,
-        itemStyle: {
-          borderRadius: 5,
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#14c8d4' },
-            { offset: 1, color: '#43eec6' }
-          ])
-        },
-        data: barData
-      },
-      {
-        name: 'line',
-        type: 'bar',
-        barGap: '-100%',
-        barWidth: 10,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(20,200,212,0.5)' },
-            { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
-            { offset: 1, color: 'rgba(20,200,212,0)' }
-          ])
-        },
-        z: -12,
-        data: lineData
-      },
-      {
-        name: 'dotted',
-        type: 'pictorialBar',
-        symbol: 'rect',
-        itemStyle: {
-          color: '#0f375f'
-        },
-        symbolRepeat: true,
-        symbolSize: [12, 4],
-        symbolMargin: 1,
-        z: -10,
-        data: lineData
-      }
-    ]
-  };
-
-  return (
-    <Card title='Pictorial Chart'>
-      <Chart option={option} style={props.style}></Chart>
-    </Card>
-  )
-}

src/pages/sample/home/components/PieChart.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Card } from 'antd';
-import Chart from '@/components/chart';
-
-export default (props) => {
-
-  const option = {
-    // title: {
-    //   text: 'Referer of a Website',
-    //   subtext: 'Fake Data',
-    //   left: 'center'
-    // },
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      orient: 'vertical',
-      left: 'left'
-    },
-    series: [
-      {
-        name: 'Access From',
-        type: 'pie',
-        radius: '50%',
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' },
-          { value: 484, name: 'Union Ads' },
-          { value: 300, name: 'Video Ads' }
-        ],
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  };
-
-  return (
-    <Card title='Basic Pie Chart'>
-      <Chart option={option} style={props.style}></Chart>
-    </Card>
-  )
-}

src/pages/sample/home/components/RadarChart.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Card } from 'antd';
-import Chart from '@/components/chart';
-
-export default (props) => {
-
-  const option = {
-    // title: {
-    //   text: 'Basic Radar Chart'
-    // },
-    legend: {
-      data: ['Allocated Budget', 'Actual Spending']
-    },
-    radar: {
-      // shape: 'circle',
-      indicator: [
-        { name: 'Sales', max: 6500 },
-        { name: 'Administration', max: 16000 },
-        { name: 'Information Technology', max: 30000 },
-        { name: 'Customer Support', max: 38000 },
-        { name: 'Development', max: 52000 },
-        { name: 'Marketing', max: 25000 }
-      ]
-    },
-    series: [
-      {
-        name: 'Budget vs spending',
-        type: 'radar',
-        data: [
-          {
-            value: [4200, 3000, 20000, 35000, 50000, 18000],
-            name: 'Allocated Budget'
-          },
-          {
-            value: [5000, 14000, 28000, 26000, 42000, 21000],
-            name: 'Actual Spending'
-          }
-        ]
-      }
-    ]
-  };
-
-  return (
-    <Card title='Basic Radar Chart'>
-      <Chart option={option} style={props.style}></Chart>
-    </Card>
-  )
-}

src/pages/sample/home/components/VideoPlay.jsx

@@ -0,0 +1,55 @@
+import { Row, Col, Card, Statistic, Carousel } from "antd";
+import {
+  ArrowDownOutlined,
+  ArrowUpOutlined,
+  LikeOutlined,
+} from "@ant-design/icons";
+import React, { useState } from "react";
+
+import { useRef } from "react";
+import { useEffect } from "react";
+
+// https://image.baidu.com/search/albumsdetail?tn=albumsdetail&word=%E5%AE%A0%E7%89%A9%E5%9B%BE%E7%89%87&fr=albumslist&album_tab=%E5%8A%A8%E7%89%A9&album_id=688&rn=30
+
+// https://image.baidu.com/search/albumsdetail?tn=albumsdetail&word=%E5%9F%8E%E5%B8%82%E5%BB%BA%E7%AD%91%E6%91%84%E5%BD%B1%E4%B8%93%E9%A2%98&fr=searchindex_album%20&album_tab=%E5%BB%BA%E7%AD%91&album_id=7&rn=30
+const VideoPlay = (props) => {
+  const { url, index, current, isVideoPlayRef, contentStyle } = props;
+
+  const ref = useRef();
+
+  useEffect(() => {
+    if (current == index) {
+      ref.current
+        ?.play()
+        .then((res) => {
+          isVideoPlayRef.current = true;
+        })
+        .catch((err) => {
+          console.log(err)
+          isVideoPlayRef.current = false;
+        });
+    } else {
+      ref.current.pause();
+      isVideoPlayRef.current = false;
+    }
+  }, [current, index]);
+
+  useEffect(() => {}, []);
+
+  return (
+    <>
+      <div style={contentStyle}>
+        <video
+          ref={ref}
+          autoPlay={false}
+          src={url}
+          onEnded={() => {
+            isVideoPlayRef.current = false;
+          }}
+          style={{ width: "100%", height: "100%", objectFit: "fill" }}
+        ></video>
+      </div>
+    </>
+  );
+};
+export default VideoPlay;

src/pages/sample/home/index.jsx

@@ -2,11 +2,6 @@ import React from 'react';
 import { Row, Col, Card, Space, Statistic } from 'antd';
 import Container from '@/components/page/Container';
 import Banner from './components/Banner';
-import AreaChart from './components/AreaChart';
-import BarChart from './components/BarChart';
-import PictorialBar from './components/PictorialBar';
-import RadarChart from './components/RadarChart';
-import PieChart from './components/PieChart';
 
 export default (props) => {
 
@@ -19,23 +14,6 @@ export default (props) => {
     <Container>
       <Banner />
 
-      <Row gutter={24} style={{ marginTop: '24px' }}>
-        <Col span={16}>
-          <AreaChart style={chartStyle}/>
-        </Col>
-        <Col span={8}>
-          <RadarChart style={chartStyle}/>
-        </Col>
-      </Row>
-
-      <Row gutter={24} style={{ marginTop: '24px' }}>
-        <Col span={8}>
-          <PieChart style={chartStyle}/>
-        </Col>
-        <Col span={16}>
-          <BarChart style={chartStyle}/>
-        </Col>
-      </Row>
     </Container>
   )
 }

src/services/rotationChart.js

@@ -1,25 +1,27 @@
-import request from '@/utils/request';
+import request from "@/utils/request";
 
 /**
  * 查询列表
  * @param {*} params
  * @returns
  */
-export const getBannerList = (params) => request('/banner', { params });
+export const getBannerList = (params) =>
+  request("/banner", { params, successTip: false });
 
 /**
  * 详情
  * @param {*} id
  * @returns
  */
-export const getBannerdById = (id) => request(`/banner/${id}`);
+export const getBannerdById = (id) =>
+  request(`/banner/${id}`, { successTip: false });
 
 /**
  * 新增
  * @param {*} data
  * @returns
  */
-export const addBanner = (data) => request('/banner', { method: 'post', data });
+export const addBanner = (data) => request("/banner", { method: "post", data });
 
 /**
  * 新增
@@ -27,18 +29,21 @@ export const addBanner = (data) => request('/banner', { method: 'post', data });
  * @param {*} data
  * @returns
  */
-export const updataBanner = (id, data) => request(`/banner/${id}`, { method: 'put', data });
+export const updataBanner = (id, data) =>
+  request(`/banner/${id}`, { method: "put", data });
 
 /**
  * 删除
  * @param {*} id
  * @returns
  */
-export const deleteBanner = (id) => request(`/banner/${id}`, { method: 'delete' });
+export const deleteBanner = (id) =>
+  request(`/banner/${id}`, { method: "delete" });
 
 /**
  * 上传文件
  * @param {*} id
  * @returns
  */
- export const uploadFile = (data) => request(`/upload`, { method: 'POST', data });
+export const uploadFile = (data) =>
+  request(`/upload`, { method: "POST", data });