如何解决仪表板的动态网格
我有一个网页，希望使用仪表板中的this来实现动态网格，用户可以在任何时候将Card标签拖动到页面中的任何位置并将网格的位置保存到我的数据库，并显示该数据库及其保存的位置，即使他们注销并登录系统也是如此。我设法在页面内拖动Card标签，但是这会弄乱整个网页。以下是我网页的当前状态。
import React,{ Fragment,useEffect,useState,useContext } from
"react";
// import "../App.css";
import UserContext from "./UserContext";
// import { Bar } from "react-chartjs-2";
import { Tooltip } from "antd";
import { Card } from "react-rainbow-components";
import FullCalendar from "@fullcalendar/react";
import dayGridplugin from "@fullcalendar/daygrid";
import "@fullcalendar/daygrid/main.css";
import { Responsive,WidthProvider } from "react-grid-layout";
const ResponsiveGridLayout = WidthProvider(Responsive);
const Dashboard = () => {
const { user } = useContext(UserContext);
const [chartData,setChartData] = useState({});
const [chartData2,setChartData2] = useState([]);
//Get counter based on designation
const [rtoCounter,setRtoCounter] = useState();
const [pmCounter,setPmCounter] = useState();
const [noOfProjects,setNoOfProjects] = useState([]);
const getCountDesignation = async () => {
try {
const response = await fetch(
"http://localhost:5000/employees/getAllCountDesignation"
);
const jsonData = await response.json();
setChartData2(jsonData);
// console.log("******Get Counter" + jsonData);
setPmCounter(jsonData[0].count);
setRtoCounter(jsonData[1].count);
// setPmCounter(JSON.stringify(jsonData[0].count));
// setRtoCounter(JSON.stringify(jsonData[1].count));
} catch (error) {
console.error(error.message);
}
};
const chart = () => {
setChartData({
labels: ["Project Manager","Resident Technical Officer"],datasets: [
{
label: ["# of Staff"],data: [pmCounter,rtoCounter],backgroundColor: ["rgba(75,192,0.6"],borderwidth: 4,},],});
};
useEffect(() => {
getCountDesignation();
const noOfProjectsPerTC = async () => {
try {
const response = await fetch(
"http://localhost:5000/dashboard/getProjectsPerTC"
);
const jsonData = await response.json();
setNoOfProjects(jsonData);
} catch (error) {
console.error(error.message);
}
};
noOfProjectsPerTC();
},[]);
useEffect(() => {
// getCountDesignation();
// chart();
},[]);
// chartData2
for (let i = 0; i < noOfProjects.length; i++) {
console.log(noOfProjects[i].noofprojects);
}
const events = [
{
title: "Project 1",start: "2020-11-11",end: "2021-01-01",description: "This is a test description of an event",{
title: "Project 2",start: "2020-11-12",end: "2020-11-15",];
return (
<Fragment>
<div style={{ width: "100%",padding: "20px 0 5px 20px" }}>
<div className="welcomePage">
<h1>Welcome {user.first_name}</h1>
</div>
</div>
{/* <div className="container">
<div className="card-list">
<div class="row">
<div class="col-xl-3 ">
<div class="card blue">
<div class="title">All projects</div>
<i class="zmdi zmdi-upload"></i>
<div class="value">89</div>
</div>
</div>
<div class="col-xl-3">
<div class="card green">
<div class="title">All members</div>
<i class="zmdi zmdi-upload"></i>
<div class="value">5,990</div>
</div>
</div>
<div class="col-xl-3 ">
<div class="card orange">
<div class="title">Total claims</div>
<i class="zmdi zmdi-download"></i>
<div class="value">$80,990</div>
</div>
</div>
<div class="col-xl-3 ">
<div class="card red">
<div class="title">Available Staff</div>
<i class="zmdi zmdi-download"></i>
<div class="value">3</div>
</div>
</div>
</div>
</div>
</div> */}
<ResponsiveGridLayout
className="layout"
// layouts={layouts}
breakpoints={{ lg: 750,md: 700,sm: 500,xs: 450,xxs: 0 }}
cols={{ lg: 10,md: 8,sm: 6,xs: 4,xxs: 2 }}
>
<div key="1" className="container">
<Card style={{ width: 750,height: 500,float: "left" }}>
<img
alt="map"
src="https://linkpicture.com/q/imageedit_13_4599432189.gif"
useMap="#image-map"
/>
<map name="image-map">
{/* <div
style={{ position: "absolute",marginLeft: 460,marginTop: -300 }}
>
<Tooltip placement="top" title="Aljunied Hougang">
<area
alt="Aljunied Hougang"
coords="400,215,406,199,414,194,439,200,447,195,441,193,454,186,458,188,470,181,474,174,481,175,486,177,483,184,491,182,494,501,506,508,213,225,518,232,511,243,251,497,256,252,473,258,452,238,448,227,442,440,222,430,223,425,218,416,217,409,404,229"
shape="poly"
/>
</Tooltip>
</div> */}
{/* <div
style={{ position: "absolute",marginLeft: 415,marginTop: -350 }}
>
<Tooltip placement="top" title="Ang Mo Kio">
<area
alt="Ang Mo Kio"
coords="399,214,198,413,445,453,185,456,183,179,153,150,141,455,135,450,131,130,459,124,431,108,423,109,113,120,402,133,386,146,378,374,158,356,163,369,173,367,371,379,187,375,191,196,373,368,385,204"
shape="poly"
/>
</Tooltip>
</div> */}
{/* <div
style={{ position: "absolute",marginLeft: 370,marginTop: -290 }}
>
<Tooltip placement="top" title="Bishan Toa Payoh">
<area
alt="Bishan Toa Payoh"
coords="358,384,205,400,216,405,234,395,396,239,408,390,254,393,259,389,263,394,268,271,275,377,265,380,255,364,357,333,246,319,341,196"
shape="poly"
/>
</Tooltip>
</div> */}
{/* <div
style={{ position: "absolute",marginLeft: 190,marginTop: -340 }}
>
<Tooltip placement="top" title="Choa Chu Kang">
<area
alt="Choa Chu Kang"
coords="85,93,101,231,102,107,242,111,121,240,248,161,190,203,220,226,230,228,235,221,249,229,272,277,224,207,262,261,167,233,168,144,140,132,125,166,212,147,208,138,197,139,134,211,94,85,80,86,99,155,104,145,137,123,117,118,170,119,189,127,91,209"
shape="poly"
/>
</Tooltip>
</div> */}
<div
style={{
position: "absolute",marginLeft: 590,marginTop: -280,}}
>
<Tooltip
placement="top"
title={"East Coast Town Council \n"}
overlayStyle={{ width: 100 }}
>
<area
alt="East Coast Town Council"
coords="561,178,571,551,557,550,531,236,526,516,512,504,270,287,555,276,576,274,585,586,281,595,278,605,280,615,283,624,639,644,269,651,657,654,641,650,656,210,685,724,172,732,136,725,717,705,114,695,688,666,95,659,98,645,633,627,115,620,626,643,655,662,670,686,617,618,578,162,561,529,505,126,116,524,534,541,558,572,580,129,592,594,599,142,573,569,149,562,152,540,533,140"
shape="poly"
/>
</Tooltip>
</div>
<div
style={{
position: "absolute",marginLeft: 300,marginTop: -300,}}
>
<Tooltip
placement="top"
title="Holland-Bukit Panjang Town Council"
>
<area
alt="Holland-Bukit Panjang Town Council"
coords="252,289,322,345,318,330,353,267,339,328,314,311,304,297,273,303,285,286,264,257,250,260,209,201,150"
shape="poly"
/>
</Tooltip>
</div>
<div
style={{
position: "absolute",marginLeft: 410,marginTop: -240,}}
>
<Tooltip placement="top" title="Jalan Besar Town Council">
<area
alt="Jalan Besar Town Council"
coords="396,407,420,432,245,437,424,417,292,412,302,312,316,399,325,422,331,403,344,337,392,352,381,346,327,370,320,366,313,307,308,310,391,293,282,253,397,237"
shape="poly"
/>
</Tooltip>
</div>
{/* <div
style={{ position: "absolute",marginLeft: 250,marginTop: -280 }}
>
<Tooltip placement="top" title="Jurong Clementi">
<area
alt="Jurong Clementi"
coords="189,202,288,266,279,284,244,218"
shape="poly"
/>
</Tooltip>
</div> */}
{/* <div
style={{ position: "absolute",marginTop: -230 }}
>
<Tooltip placement="top" title="Marine Parade">
<area
alt="Marine Parade"
coords="404,451,237,492,502,503,510,515,461,428,415,301,299,436,241,418,234"
shape="poly"
/>
</Tooltip>
</div> */}
<div
style={{
position: "absolute",marginLeft: 260,marginTop: -420,}}
>
<Tooltip placement="top" title="Marsiling-Yew Tee Town Council">
<area
alt="Marsiling-Yew Tee Town Council"
coords="283,79,88,294,92,296,103,105,96,100,122,128,290,148,159,165,110,97,247,85"
shape="poly"
/>
</Tooltip>
</div>
<div
style={{
position: "absolute",marginLeft: 350,marginTop: -380,}}
>
<Tooltip placement="top" title="Nee Soon Town Council">
<area
alt="Nee Soon Town Council"
coords="311,336,89,362,365,90,87,398,387,360,372,157,354,329,143,321,124"
shape="poly"
/>
</Tooltip>
</div>
<div
style={{
position: "absolute",marginLeft: 500,marginTop: -350,}}
>
<Tooltip placement="top" title="Pasir Ris-Punggol Town Council">
<area
alt="Pasir Ris-Punggol Town Council"
coords="458,180,484,495,517,542,539,530,520,154,500,496,487,465,462,457,151,179"
shape="poly"
/>
</Tooltip>
</div>
<div
style={{
position: "absolute",marginLeft: 340,marginTop: -470,}}
>
<Tooltip placement="top" title="Sembawang Town Council">
<area
alt="Sembawang Town Council"
coords="284,295,300,334,361,376,106,382,112,411,410,71,65,57,53,50,55,61,70"
shape="poly"
/>
</Tooltip>
</div>
<div
style={{
position: "absolute",marginLeft: 530,marginTop: -310,}}
>
<Tooltip placement="top" title="Tampines Town Council">
<area
alt="Tampines Town Council"
coords="503,519,549,556,544,509,211"
shape="poly"
/>
</Tooltip>
</div>
<div
style={{
position: "absolute",marginTop: -220,}}
>
<Tooltip placement="top" title="Tanjong Pagar Town Council">
<area
alt="Tanjong Pagar Town Council"
coords="297,315,317,326,343,383,342,355,306,388,262"
shape="poly"
/>
</Tooltip>
</div>
<div
style={{
position: "absolute",marginLeft: 130,marginTop: -250,}}
>
<Tooltip placement="top" title="West Coast Town Council">
<area
alt="West Coast Town Council"
coords="81,51,324,43,33,40,38,34,36,44,48,363,56,358,351,82,206,348,340,335,309,176,160,298,338,349,359,347,233"
shape="poly"
/>
</Tooltip>
</div>
</map>
</Card>
</div>
<div key="2">
<Card style={{ width: 450,float: "right" }}>
{" "}
this is for table form of town council
</Card>
</div>
<div key="3" className="container">
<Card style={{ width: 700,height: 522,float: "left" }}>
<div style={{ margin: 10 }}>
<FullCalendar
defaultview="dayGridMonth"
// themeSystem="Simplex"
// header={{
// left: "prev,next",// center: "title",// right: "dayGridMonth,timeGridWeek,timeGridDay",// }}
plugins={[dayGridplugin]}
events={events}
// eventDidMount={function (info) {
// return (
// <Tooltip
// title={info.event.extendedProps.description}
// ></Tooltip>
// );
// // console.log(info.event.extendedProps.description);
// // var tooltip = new Tooltip(info.el,{
// // title: info.event.extendedProps.description,// // placement: "top",// // trigger: "hover",// // container: "body",// // });
// }}
// displayEventEnd="false"
// eventColor={"#89cff0"}
/>
</div>
</Card>
</div>
<div key="4">
<Card style={{ width: 500,float: "right" }}></Card>
</div>
</ResponsiveGridLayout>
</Fragment>
);
};
export default Dashboard;
有人知道为什么吗？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。