|
|
@@ -16,6 +16,7 @@ import {
|
|
|
getHotGoodsAPI,
|
|
|
getHotModuleAPI,
|
|
|
} from "@/store/action/A1Hot";
|
|
|
+import { HotData1Type, HotSelectTimeType, HotSelectType } from "@/types";
|
|
|
|
|
|
echarts.use([
|
|
|
ToolboxComponent,
|
|
|
@@ -28,16 +29,16 @@ echarts.use([
|
|
|
|
|
|
function Hot() {
|
|
|
// 日期下拉框
|
|
|
- const [select1, setSelect1] = useState<1 | 7 | 30 | "">(7);
|
|
|
- const select1Ref = useRef<1 | 7 | 30 | "">(7);
|
|
|
+ const [select1, setSelect1] = useState<HotSelectTimeType>(7);
|
|
|
+ const select1Ref = useRef<HotSelectTimeType>(7);
|
|
|
|
|
|
// 热门场馆下拉
|
|
|
- const [select2, setSelect2] = useState<"visit" | "star" | "">("visit");
|
|
|
- const select2Ref = useRef<"visit" | "star" | "">("");
|
|
|
+ const [select2, setSelect2] = useState<HotSelectType>("visit");
|
|
|
+ const select2Ref = useRef<HotSelectType>("");
|
|
|
|
|
|
// 热门馆藏下拉
|
|
|
- const [select3, setSelect3] = useState<"visit" | "star" | "">("visit");
|
|
|
- const select3Ref = useRef<"visit" | "star" | "">("");
|
|
|
+ const [select3, setSelect3] = useState<HotSelectType>("visit");
|
|
|
+ const select3Ref = useRef<HotSelectType>("");
|
|
|
|
|
|
// 获取饼图的函数
|
|
|
const getEchartsFu = useCallback(
|
|
|
@@ -110,7 +111,7 @@ function Hot() {
|
|
|
// 时间改变的时候 获取3个数据
|
|
|
const getInfoAPIFu1 = useCallback(async () => {
|
|
|
const res1 = await getHotModuleAPI(select1Ref.current);
|
|
|
- const data1 = res1.data.map((v: any) => {
|
|
|
+ const data1 = res1.data.map((v: HotData1Type) => {
|
|
|
return {
|
|
|
value: v.pcs,
|
|
|
name: v.groupKey,
|
|
|
@@ -131,23 +132,8 @@ function Hot() {
|
|
|
select1Ref.current,
|
|
|
select2Ref.current ? select2Ref.current : "visit"
|
|
|
);
|
|
|
+ const data2: HotData1Type[] = res2.data;
|
|
|
|
|
|
- console.log(res2);
|
|
|
-
|
|
|
- const data2 = [
|
|
|
- { id: 1, name: "撒大苏打撒旦", num: 550 },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "撒大苏打撒旦撒大苏打撒旦sadas撒大苏打撒旦撒大苏打撒旦sadas撒大苏打撒旦撒大苏打撒旦sadas",
|
|
|
- num: 550,
|
|
|
- },
|
|
|
- { id: 3, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 4, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 5, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 6, name: "撒大", num: 550 },
|
|
|
- { id: 7, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 8, name: "撒大苏打撒旦", num: 550 },
|
|
|
- ];
|
|
|
setList1(data2);
|
|
|
|
|
|
// ---------------
|
|
|
@@ -162,33 +148,8 @@ function Hot() {
|
|
|
select1Ref.current,
|
|
|
select2Ref.current ? select2Ref.current : "visit"
|
|
|
);
|
|
|
+ const data3: HotData1Type[] = res3.data;
|
|
|
|
|
|
- console.log(res3);
|
|
|
-
|
|
|
- const data3 = [
|
|
|
- { id: 1, name: "撒大苏打撒旦", num: 550 },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "撒大苏打撒旦撒大打撒旦撒大苏打撒旦sadas",
|
|
|
- num: 550,
|
|
|
- },
|
|
|
- { id: 3, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 4, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 5, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 6, name: "撒大", num: 550 },
|
|
|
- { id: 7, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 8, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 9, name: "撒大苏打撒旦", num: 550 },
|
|
|
- {
|
|
|
- id: 10,
|
|
|
- name: "撒大苏打撒旦撒大打撒旦撒大苏打撒旦sadas",
|
|
|
- num: 550,
|
|
|
- },
|
|
|
- { id: 11, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 12, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 13, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 14, name: "撒大", num: 550 },
|
|
|
- ];
|
|
|
setList2(data3);
|
|
|
|
|
|
// 每次变化馆藏盒子滚动到顶部
|
|
|
@@ -197,62 +158,31 @@ function Hot() {
|
|
|
}, [getEchartsFu]);
|
|
|
|
|
|
// 获取热门场馆数据
|
|
|
- const [list1, setList1] = useState([
|
|
|
- { id: 1, name: "撒大苏打撒旦", num: 550 },
|
|
|
- ]);
|
|
|
-
|
|
|
- const getInfoAPIFu2 = useCallback(() => {
|
|
|
- console.log("2获取场馆数据", select1Ref.current, select2Ref.current);
|
|
|
-
|
|
|
- const data = [
|
|
|
- { id: 1, name: "撒大苏打撒旦", num: 550 },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "撒大苏打撒旦撒大苏打撒旦sadas撒大苏打撒旦撒大苏打撒旦sadas撒大苏打撒旦撒大苏打撒旦sadas",
|
|
|
- num: 550,
|
|
|
- },
|
|
|
- { id: 3, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 4, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 5, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 6, name: "撒大", num: 550 },
|
|
|
- { id: 7, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 8, name: "撒大苏打撒旦", num: 550 },
|
|
|
- ];
|
|
|
+ const [list1, setList1] = useState<HotData1Type[]>([]);
|
|
|
+
|
|
|
+ const getInfoAPIFu2 = useCallback(async () => {
|
|
|
+ // console.log("2获取场馆数据", select1Ref.current, select2Ref.current);
|
|
|
+ const res = await getHotExhibitionAPI(
|
|
|
+ select1Ref.current,
|
|
|
+ select2Ref.current ? select2Ref.current : "visit"
|
|
|
+ );
|
|
|
+ const data: HotData1Type[] = res.data;
|
|
|
+
|
|
|
setList1(data);
|
|
|
}, []);
|
|
|
|
|
|
// 获取馆藏数据
|
|
|
|
|
|
- const [list2, setList2] = useState([
|
|
|
- { id: 1, name: "撒大苏打撒旦", num: 550 },
|
|
|
- ]);
|
|
|
-
|
|
|
- const getInfoAPIFu3 = useCallback(() => {
|
|
|
- console.log("3获取馆藏数据", select1Ref.current, select3Ref.current);
|
|
|
- const data = [
|
|
|
- { id: 1, name: "撒大苏打撒旦", num: 550 },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "撒大苏打撒旦撒大打撒旦撒大苏打撒旦sadas",
|
|
|
- num: 550,
|
|
|
- },
|
|
|
- { id: 3, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 4, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 5, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 6, name: "撒大", num: 550 },
|
|
|
- { id: 7, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 8, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 9, name: "撒大苏打撒旦", num: 550 },
|
|
|
- {
|
|
|
- id: 10,
|
|
|
- name: "撒大苏打撒旦撒大打撒旦撒大苏打撒旦sadas",
|
|
|
- num: 550,
|
|
|
- },
|
|
|
- { id: 11, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 12, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 13, name: "撒大苏打撒旦", num: 550 },
|
|
|
- { id: 14, name: "撒大", num: 550 },
|
|
|
- ];
|
|
|
+ const [list2, setList2] = useState<HotData1Type[]>([]);
|
|
|
+
|
|
|
+ const getInfoAPIFu3 = useCallback(async () => {
|
|
|
+ // console.log("3获取馆藏数据", select1Ref.current, select3Ref.current);
|
|
|
+ const res = await getHotGoodsAPI(
|
|
|
+ select1Ref.current,
|
|
|
+ select2Ref.current ? select2Ref.current : "visit"
|
|
|
+ );
|
|
|
+ const data: HotData1Type[] = res.data;
|
|
|
+
|
|
|
setList2(data);
|
|
|
}, []);
|
|
|
|
|
|
@@ -329,11 +259,11 @@ function Hot() {
|
|
|
{/* 场馆数据 */}
|
|
|
<div className="hotListBox">
|
|
|
{list1.map((v) => (
|
|
|
- <div className="row" key={v.id}>
|
|
|
- <div className="rowLeft" title={v.name}>
|
|
|
- {v.name}
|
|
|
+ <div className="row" key={v.groupKey}>
|
|
|
+ <div className="rowLeft" title={v.groupKey}>
|
|
|
+ {v.groupKey}
|
|
|
</div>
|
|
|
- <div className="rowRight">{v.num}</div>
|
|
|
+ <div className="rowRight">{v.pcs}</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
@@ -357,11 +287,11 @@ function Hot() {
|
|
|
<div className="hotListBox mySorrl" id="goodsSroolBox">
|
|
|
{list2.length ? (
|
|
|
list2.slice(0, 20).map((v) => (
|
|
|
- <div className="row" key={v.id}>
|
|
|
- <div className="rowLeft" title={v.name}>
|
|
|
- {v.name}
|
|
|
+ <div className="row" key={v.groupKey}>
|
|
|
+ <div className="rowLeft" title={v.groupKey}>
|
|
|
+ {v.groupKey}
|
|
|
</div>
|
|
|
- <div className="rowRight">{v.num}</div>
|
|
|
+ <div className="rowRight">{v.pcs}</div>
|
|
|
</div>
|
|
|
))
|
|
|
) : (
|