|
|
@@ -1,420 +1,192 @@
|
|
|
-import React, { useCallback, useEffect, useState } from "react";
|
|
|
-import styles from "./index.module.scss";
|
|
|
-import { Button, Form, Input, Modal, Popconfirm } from "antd";
|
|
|
-import { getShareAPI, shareEditAPI } from "@/store/action/A2Integral";
|
|
|
-import { useDispatch, useSelector } from "react-redux";
|
|
|
import { RootState } from "@/store";
|
|
|
-import { MessageFu } from "@/utils/message";
|
|
|
+import { getLogListAPI } from "@/store/action/A7Log";
|
|
|
+import { Input, DatePicker, Table, Button, Select } from "antd";
|
|
|
+import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
|
+import { useDispatch, useSelector } from "react-redux";
|
|
|
|
|
|
-import ExportJsonExcel from "js-export-excel";
|
|
|
-import html2canvas from "html2canvas";
|
|
|
+import styles from "./index.module.scss";
|
|
|
+import { IntegralTableAPIType } from "@/types";
|
|
|
|
|
|
-function A2Share() {
|
|
|
- const dispatch = useDispatch();
|
|
|
- const [open, setOpen] = useState(false);
|
|
|
- const [exportOpen, setExportOpen] = useState(false);
|
|
|
+const { RangePicker } = DatePicker;
|
|
|
|
|
|
- const shareInfo = useSelector((state: RootState) => state.A2Integral.shareInfo);
|
|
|
- const [form] = Form.useForm();
|
|
|
- const [curEdit, setCurEdit] = useState({} as any);
|
|
|
- const onFinish = useCallback(
|
|
|
- async (values: any) => {
|
|
|
- if (values.numberVal) {
|
|
|
- console.log(values.numberVal, curEdit, {
|
|
|
- pcs: Number(values.numberVal),
|
|
|
- sceneCode: "museum_cctv_mianyan",
|
|
|
- type: curEdit.type,
|
|
|
- });
|
|
|
- const res: any = await shareEditAPI({
|
|
|
- pcs: Number(values.numberVal),
|
|
|
- sceneCode: "museum_cctv_mianyan",
|
|
|
- type: curEdit.type,
|
|
|
- });
|
|
|
- if (res.code === 0) {
|
|
|
- MessageFu.success("编辑成功!");
|
|
|
- dispatch(getShareAPI());
|
|
|
- setOpen(false);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- [curEdit, dispatch]
|
|
|
- );
|
|
|
+function A2Integral() {
|
|
|
+ const dispatch = useDispatch();
|
|
|
|
|
|
- // 生成导出的数据行
|
|
|
- const [editList, setEditList] = useState([
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: "用户浏览量",
|
|
|
- numberVal: 2001,
|
|
|
- type: "visit",
|
|
|
- date: "",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "用户点赞量",
|
|
|
- numberVal: 2002,
|
|
|
- type: "star",
|
|
|
- date: "",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: "展区浏览量",
|
|
|
- numberVal: 2003,
|
|
|
- type: "area",
|
|
|
- date: "",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: "展位浏览量",
|
|
|
- numberVal: 2004,
|
|
|
- type: "booth",
|
|
|
- date: "",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- name: "展品浏览量",
|
|
|
- numberVal: 2004,
|
|
|
- type: "exhibits",
|
|
|
- date: "",
|
|
|
- },
|
|
|
- ]);
|
|
|
+ const pageNumRef = useRef(1);
|
|
|
+ const pagePageRef = useRef(10);
|
|
|
+ // 筛选和分页
|
|
|
+ const [tableSelect, setTableSelect] = useState({
|
|
|
+ searchKey: "",
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ type: "",
|
|
|
+ });
|
|
|
|
|
|
- // 导出excel
|
|
|
- const exportExcel = useCallback(() => {
|
|
|
- let sheetFilter = ["id", "name", "numberVal", "date"];
|
|
|
- let option = {} as any;
|
|
|
- option.fileName = `云展数据统计`;
|
|
|
- option.datas = [
|
|
|
- {
|
|
|
- sheetData: editList,
|
|
|
- sheetName: `云展数据统计`,
|
|
|
- sheetFilter: sheetFilter,
|
|
|
- sheetHeader: ["序号", "标题", "数量", "日期"],
|
|
|
- columnWidths: [10, 10, 10, 10],
|
|
|
- },
|
|
|
- ];
|
|
|
- var toExcel = new ExportJsonExcel(option); //new
|
|
|
- toExcel.saveExcel(); //保存
|
|
|
- setExportOpen(false);
|
|
|
- }, [editList]);
|
|
|
+ // 账号的输入
|
|
|
+ const nameTime = useRef(-1);
|
|
|
+ const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ clearTimeout(nameTime.current);
|
|
|
+ nameTime.current = window.setTimeout(() => {
|
|
|
+ setTableSelect({ ...tableSelect, searchKey: e.target.value, pageNum: 1 });
|
|
|
+ }, 500);
|
|
|
+ };
|
|
|
+ // 时间选择器改变
|
|
|
+ const timeChange = (date: any, dateString: any) => {
|
|
|
+ let startTime = "";
|
|
|
+ let endTime = "";
|
|
|
+ if (dateString[0] && dateString[1]) {
|
|
|
+ startTime = dateString[0] + " 00:00:00";
|
|
|
+ endTime = dateString[1] + " 23:59:59";
|
|
|
+ }
|
|
|
+ setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 });
|
|
|
+ };
|
|
|
|
|
|
- // 点击下载海报
|
|
|
- const [donImg, setDonImg] = useState(false);
|
|
|
+ // 类型选择发生改变
|
|
|
+ const typeChange = (value: any) => {
|
|
|
+ setTableSelect({ ...tableSelect, type: value, pageNum: 1 });
|
|
|
+ };
|
|
|
|
|
|
- const dataURLToBlob = useCallback((dataurl: any) => {
|
|
|
- let arr = dataurl.split(",");
|
|
|
- let mime = arr[0].match(/:(.*?);/)[1];
|
|
|
- let bstr = atob(arr[1]);
|
|
|
- let n = bstr.length;
|
|
|
- let u8arr = new Uint8Array(n);
|
|
|
- while (n--) {
|
|
|
- u8arr[n] = bstr.charCodeAt(n);
|
|
|
- }
|
|
|
- return new Blob([u8arr], { type: mime });
|
|
|
- }, []);
|
|
|
+ const [inputKey, setInputKey] = useState(1);
|
|
|
+ // 重置
|
|
|
+ const resetFu = () => {
|
|
|
+ setInputKey(Date.now());
|
|
|
+ setTableSelect({
|
|
|
+ searchKey: "",
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ type: "",
|
|
|
+ });
|
|
|
+ };
|
|
|
|
|
|
- // 导出截图
|
|
|
- const exportPNG = useCallback(() => {
|
|
|
- setDonImg(true);
|
|
|
- window.setTimeout(() => {
|
|
|
- const canEle: HTMLDivElement = document.querySelector(".H5MainBoxInfo")!; //获取dom
|
|
|
- let a = document.createElement("a");
|
|
|
- html2canvas(canEle, {
|
|
|
- backgroundColor: "transparent",
|
|
|
- allowTaint: true,
|
|
|
- useCORS: true,
|
|
|
- }).then((canvas) => {
|
|
|
- let dom = document.body.appendChild(canvas);
|
|
|
- dom.style.display = "none";
|
|
|
- a.style.display = "none";
|
|
|
- document.body.removeChild(dom);
|
|
|
- let blob: any = dataURLToBlob(dom.toDataURL("image/png"));
|
|
|
- a.setAttribute("href", URL.createObjectURL(blob));
|
|
|
- //这块是保存图片操作 可以设置保存的图片的信息
|
|
|
- a.setAttribute("download", "云展览数据.png");
|
|
|
- document.body.appendChild(a);
|
|
|
- a.click();
|
|
|
- URL.revokeObjectURL(blob);
|
|
|
- document.body.removeChild(a);
|
|
|
- setDonImg(false);
|
|
|
- setExportOpen(false);
|
|
|
- });
|
|
|
- }, 100);
|
|
|
- }, [dataURLToBlob]);
|
|
|
+ useEffect(() => {
|
|
|
+ pageNumRef.current = tableSelect.pageNum;
|
|
|
+ pagePageRef.current = tableSelect.pageSize;
|
|
|
+ dispatch(getLogListAPI(tableSelect));
|
|
|
+ }, [dispatch, tableSelect]);
|
|
|
|
|
|
- // 回显
|
|
|
- const getInfoFu = useCallback(
|
|
|
- (v: any) => {
|
|
|
- setCurEdit(v);
|
|
|
- const { numberVal } = v;
|
|
|
- form.setFieldsValue({
|
|
|
- numberVal: numberVal,
|
|
|
- });
|
|
|
- console.log(curEdit);
|
|
|
- },
|
|
|
- [curEdit, form]
|
|
|
- );
|
|
|
+ // ---------关于表格
|
|
|
|
|
|
- const onFinishFailed = (errorInfo: any) => {
|
|
|
- console.log("Failed:", errorInfo);
|
|
|
+ // 页码变化
|
|
|
+ const paginationChange = (pageNum: number, pageSize: number) => {
|
|
|
+ pageNumRef.current = pageNum;
|
|
|
+ pagePageRef.current = pageSize;
|
|
|
+ setTableSelect({ ...tableSelect, pageNum, pageSize });
|
|
|
};
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- dispatch(getShareAPI());
|
|
|
- }, [dispatch]);
|
|
|
+ const results = useSelector((state: RootState) => state.A7Log.tableInfo);
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- let date = new Date().toLocaleDateString("zh-CN");
|
|
|
- setEditList([
|
|
|
+ const columns = useMemo(() => {
|
|
|
+ return [
|
|
|
+ // {
|
|
|
+ // width: 100,
|
|
|
+ // title: "序号",
|
|
|
+ // render: (text: any, record: any, index: any) =>
|
|
|
+ // index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
|
|
|
+ // },
|
|
|
{
|
|
|
- id: 1,
|
|
|
- name: "用户浏览量",
|
|
|
- numberVal: shareInfo.pcsVisitShow,
|
|
|
- type: "visit",
|
|
|
- date: date,
|
|
|
+ title: "用户名",
|
|
|
+ dataIndex: "userName",
|
|
|
},
|
|
|
{
|
|
|
- id: 2,
|
|
|
- name: "用户点赞量",
|
|
|
- numberVal: shareInfo.pcsStarShow,
|
|
|
- type: "star",
|
|
|
- date: date,
|
|
|
+ title: "时间",
|
|
|
+ dataIndex: "createTime",
|
|
|
},
|
|
|
{
|
|
|
- id: 3,
|
|
|
- name: "展区浏览量",
|
|
|
- numberVal: shareInfo.pcsArea,
|
|
|
- type: "area",
|
|
|
- date: date,
|
|
|
+ title: "类型",
|
|
|
+ dataIndex: "ip",
|
|
|
},
|
|
|
{
|
|
|
- id: 4,
|
|
|
- name: "展位浏览量",
|
|
|
- numberVal: shareInfo.pcsBooth,
|
|
|
- type: "booth",
|
|
|
- date: date,
|
|
|
+ title: "积分",
|
|
|
+ dataIndex: "type",
|
|
|
},
|
|
|
{
|
|
|
- id: 5,
|
|
|
- name: "展品浏览量",
|
|
|
- numberVal: shareInfo.pcsExhibits,
|
|
|
- type: "exhibits",
|
|
|
- date: date,
|
|
|
+ title: "说明",
|
|
|
+ render: (item: IntegralTableAPIType) => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ {item.explain}
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ },
|
|
|
},
|
|
|
- ]);
|
|
|
- }, [shareInfo]);
|
|
|
+ ];
|
|
|
+ }, []);
|
|
|
|
|
|
return (
|
|
|
- <div className={styles.A2Share}>
|
|
|
- <div className="H5MainBoxInfo">
|
|
|
- <div className="userTop">
|
|
|
- <div className="pageTitle">
|
|
|
- 数据管理
|
|
|
- {!donImg ? (
|
|
|
- <div
|
|
|
- style={{
|
|
|
- display: "flex",
|
|
|
- flexDirection: "column",
|
|
|
- float: "right",
|
|
|
- justifyContent: "center",
|
|
|
- alignItems: "center",
|
|
|
- }}
|
|
|
- >
|
|
|
- <Button
|
|
|
- type="primary"
|
|
|
- style={{
|
|
|
- width: "70px",
|
|
|
- height: "30px",
|
|
|
- borderRadius: "3px",
|
|
|
- boxShadow: "none",
|
|
|
- fontSize: "12px",
|
|
|
- float: "right",
|
|
|
- }}
|
|
|
- onClick={() => {
|
|
|
- setExportOpen(true);
|
|
|
- }}
|
|
|
- >
|
|
|
- 导出
|
|
|
- </Button>
|
|
|
- <div
|
|
|
- style={{
|
|
|
- fontSize: "12px",
|
|
|
- color: "gray",
|
|
|
- float: "right",
|
|
|
- marginTop: "5px",
|
|
|
- }}
|
|
|
- >
|
|
|
- 导出excel,png文件
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- ""
|
|
|
- )}
|
|
|
- <div
|
|
|
- style={{
|
|
|
- color: "gray",
|
|
|
- fontSize: "15px",
|
|
|
- float: "right",
|
|
|
- marginRight: "40px",
|
|
|
- }}
|
|
|
- >
|
|
|
- <span style={{ marginRight: "20px" }}>
|
|
|
- 真实浏览量:{shareInfo.pcsVisit}
|
|
|
- </span>
|
|
|
- <span>真实点赞量:{shareInfo.pcsStar}</span>
|
|
|
- </div>
|
|
|
+ <div className={styles.A2Integral}>
|
|
|
+ <div className="pageTitle">积分记录</div>
|
|
|
+ <div className="logTop">
|
|
|
+ <div className="tableSelectBox">
|
|
|
+ <div className="row">
|
|
|
+ <span>用户名:</span>
|
|
|
+ <Input
|
|
|
+ key={inputKey}
|
|
|
+ maxLength={15}
|
|
|
+ style={{ width: 150 }}
|
|
|
+ placeholder="请输入"
|
|
|
+ allowClear
|
|
|
+ onChange={(e) => nameChange(e)}
|
|
|
+ />
|
|
|
</div>
|
|
|
- {editList.map((v) => (
|
|
|
- <div className="flexRow" key={v.id}>
|
|
|
- <div className="numberTxt">
|
|
|
- {v.name}: {v.numberVal ? v.numberVal : 0}
|
|
|
- </div>
|
|
|
- <Button
|
|
|
- type="primary"
|
|
|
- style={{
|
|
|
- width: "70px",
|
|
|
- height: "30px",
|
|
|
- borderRadius: "3px",
|
|
|
- boxShadow: "none",
|
|
|
- fontSize: "12px",
|
|
|
- }}
|
|
|
- onClick={() => {
|
|
|
- getInfoFu(v);
|
|
|
- setOpen(true);
|
|
|
- }}
|
|
|
- >
|
|
|
- 修改
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {/* 点击修改按钮后的修改弹窗 */}
|
|
|
- <Modal
|
|
|
- destroyOnClose
|
|
|
- closable={false}
|
|
|
- maskClosable={false}
|
|
|
- open={open}
|
|
|
- title=" "
|
|
|
- onCancel={() => setOpen(false)}
|
|
|
- footer={
|
|
|
- [] // 设置footer为空,去掉 取消 确定默认按钮
|
|
|
- }
|
|
|
- >
|
|
|
- <Form
|
|
|
- form={form}
|
|
|
- name="basic"
|
|
|
- labelCol={{ span: 5 }}
|
|
|
- onFinish={onFinish}
|
|
|
- onFinishFailed={onFinishFailed}
|
|
|
- autoComplete="off"
|
|
|
- >
|
|
|
- <Form.Item
|
|
|
- label={curEdit.name}
|
|
|
- name="numberVal"
|
|
|
- style={{ marginTop: "40px" }}
|
|
|
- rules={[{ required: true, message: "不能为空!" }]}
|
|
|
- hide-required-asterisk={true}
|
|
|
- getValueFromEvent={(e) =>
|
|
|
- e.target.value.replace(/^(0+)|[^\d]+/g, "")
|
|
|
- }
|
|
|
- >
|
|
|
- <Input maxLength={9} placeholder="请输入正整数,不超过999999999" />
|
|
|
- </Form.Item>
|
|
|
- {/* 确定和取消按钮 */}
|
|
|
- <br />
|
|
|
- <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
|
|
|
- <Button type="primary" htmlType="submit">
|
|
|
- 提交
|
|
|
- </Button>
|
|
|
-  
|
|
|
- <Popconfirm
|
|
|
- title="放弃编辑后,信息将不会保存!"
|
|
|
- okText="放弃"
|
|
|
- cancelText="取消"
|
|
|
- onConfirm={() => {
|
|
|
- setOpen(false);
|
|
|
- }}
|
|
|
- okButtonProps={{ loading: false }}
|
|
|
- >
|
|
|
- <Button>取消</Button>
|
|
|
- </Popconfirm>
|
|
|
- </Form.Item>
|
|
|
- </Form>
|
|
|
- </Modal>
|
|
|
- {/* 点击导出,选择导出格式 */}
|
|
|
- <Modal
|
|
|
- destroyOnClose
|
|
|
- closable={false}
|
|
|
- maskClosable={false}
|
|
|
- open={exportOpen}
|
|
|
- title="选择需要导出的格式"
|
|
|
- onCancel={() => setExportOpen(false)}
|
|
|
- footer={
|
|
|
- [] // 设置footer为空,去掉 取消 确定默认按钮
|
|
|
- }
|
|
|
- >
|
|
|
- <div
|
|
|
- style={{
|
|
|
- width: "100%",
|
|
|
- display: "flex",
|
|
|
- justifyContent: "space-around",
|
|
|
- marginTop: "30px",
|
|
|
- marginBottom: "30px",
|
|
|
- }}
|
|
|
- >
|
|
|
- <Button
|
|
|
- type="primary"
|
|
|
- onClick={() => {
|
|
|
- exportExcel();
|
|
|
- }}
|
|
|
- >
|
|
|
- Excle
|
|
|
- </Button>
|
|
|
+ <div className="row">
|
|
|
+ <span>日期:</span>
|
|
|
+ <RangePicker key={inputKey} onChange={timeChange} />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="row">
|
|
|
+ <span>类型:</span>
|
|
|
+ <Select
|
|
|
+ value={tableSelect.type}
|
|
|
+ defaultValue="lucy"
|
|
|
+ style={{ width: 120 }}
|
|
|
+ onChange={typeChange}
|
|
|
+ options={[
|
|
|
+ { value: "jack", label: "Jack" },
|
|
|
+ { value: "lucy", label: "Lucy" },
|
|
|
+ { value: "Yiminghe", label: "yiminghe" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
<Button
|
|
|
+ className="reSetBtn"
|
|
|
+ size="small"
|
|
|
type="primary"
|
|
|
onClick={() => {
|
|
|
- exportPNG();
|
|
|
+ resetFu();
|
|
|
}}
|
|
|
>
|
|
|
- png
|
|
|
+ 重置
|
|
|
</Button>
|
|
|
- {/* <Button
|
|
|
- type="primary"
|
|
|
- onClick={() => {
|
|
|
- exportWord();
|
|
|
- }}
|
|
|
- >
|
|
|
- Word
|
|
|
- </Button> */}
|
|
|
</div>
|
|
|
- <div
|
|
|
- style={{
|
|
|
- width: "100%",
|
|
|
- display: "flex",
|
|
|
- justifyContent: "end",
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 表格主体 */}
|
|
|
+ <div className="tableMain">
|
|
|
+ <Table
|
|
|
+ scroll={{ y: 625 }}
|
|
|
+ dataSource={results.list}
|
|
|
+ columns={columns}
|
|
|
+ rowKey="id"
|
|
|
+ pagination={{
|
|
|
+ showQuickJumper: true,
|
|
|
+ position: ["bottomCenter"],
|
|
|
+ showSizeChanger: true,
|
|
|
+ current: tableSelect.pageNum,
|
|
|
+ pageSize: tableSelect.pageSize,
|
|
|
+ total: results.total,
|
|
|
+ onChange: paginationChange,
|
|
|
}}
|
|
|
- >
|
|
|
- <Popconfirm
|
|
|
- title="放弃编辑后,信息将不会保存!"
|
|
|
- okText="放弃"
|
|
|
- cancelText="取消"
|
|
|
- onConfirm={() => {
|
|
|
- setExportOpen(false);
|
|
|
- }}
|
|
|
- style={{
|
|
|
- float: "right",
|
|
|
- }}
|
|
|
- okButtonProps={{ loading: false }}
|
|
|
- >
|
|
|
- <Button>取消</Button>
|
|
|
- </Popconfirm>
|
|
|
- </div>
|
|
|
- </Modal>
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
-const MemoA2Share = React.memo(A2Share);
|
|
|
+const MemoA2Integral = React.memo(A2Integral);
|
|
|
|
|
|
-export default MemoA2Share;
|
|
|
+export default MemoA2Integral;
|