Browse Source

fix(): 解决大屏数据显示问题

master
chenqiang 1 year ago
parent
commit
b1b176d4d4
  1. 18
      src/pages/DataAnalysisPrediction/ParkingOverview/index.scss
  2. 43
      src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
  3. 57
      src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx

18
src/pages/DataAnalysisPrediction/ParkingOverview/index.scss

@ -59,7 +59,7 @@ $color-primary : var(--color-primary);
left: 380px; left: 380px;
width: 340px; width: 340px;
height: 34px; height: 34px;
background: rgba(1,5,14,0.64);
background: rgba(1, 5, 14, 0.64);
// border: 1px solid #a9c6ff; // border: 1px solid #a9c6ff;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
@ -89,7 +89,7 @@ $color-primary : var(--color-primary);
left: 380px; left: 380px;
width: 340px; width: 340px;
height: 414px; height: 414px;
background: rgba(1,5,14,0.64);
background: rgba(1, 5, 14, 0.64);
// border: 1px solid #a9c6ff; // border: 1px solid #a9c6ff;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
@ -231,7 +231,7 @@ $color-primary : var(--color-primary);
} }
div { div {
background: rgba(1,5,14,0.64);
background: rgba(1, 5, 14, 0.64);
} }
} }
@ -243,7 +243,7 @@ $color-primary : var(--color-primary);
width: 320px; width: 320px;
height: 84%; height: 84%;
// background: rgba(1,5,14,0.64); // background: rgba(1,5,14,0.64);
background: rgba(1,5,14,0.64);
background: rgba(1, 5, 14, 0.64);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -311,7 +311,7 @@ $color-primary : var(--color-primary);
right: 390px; right: 390px;
.c_t { .c_t {
background: rgba(1,5,14,0.64);
background: rgba(1, 5, 14, 0.64);
height: 100px; height: 100px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 20px; padding: 20px;
@ -332,7 +332,7 @@ $color-primary : var(--color-primary);
} }
.colcr { .colcr {
background: rgba(1,5,14,0.64);
background: rgba(1, 5, 14, 0.64);
height: 160px; height: 160px;
padding: 20px; padding: 20px;
display: flex; display: flex;
@ -439,11 +439,15 @@ $color-primary : var(--color-primary);
right: 50px; right: 50px;
width: 320px; width: 320px;
height: 87%; height: 87%;
background: rgba(1,5,14,0.64);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
.bsdsj {
background: rgba(1, 5, 14, 0.64);
padding-bottom: 4px;
}
.day_select { .day_select {
margin: 10px auto; margin: 10px auto;
width: 280px; width: 280px;

43
src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx

@ -359,7 +359,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
url: "/dataAlyPrediction/parkUsageAly", url: "/dataAlyPrediction/parkUsageAly",
}, },
{ {
text: "昨日出入场利用率",
text: "昨日出入场率",
value: "flowrate", value: "flowrate",
img: Lfb, img: Lfb,
status: "%", status: "%",
@ -679,7 +679,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
}) || []; }) || [];
setRightTwo({ setRightTwo({
title: { title: {
text: "{a|" + sum(datas.map((ele) => ele.value)) + "}",
text: "{a|" + sum(datas.map((ele) => ele.value)).toFixed(2) + "}",
x: "center", x: "center",
y: "center", y: "center",
subtext: "营业收入", subtext: "营业收入",
@ -816,7 +816,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
min: 0, min: 0,
// /max: 50, // /max: 50,
// interval: 10, // interval: 10,
// splitNumber: 6, //
splitNumber: 2, //
axisLabel: { axisLabel: {
formatter: (value) => { formatter: (value) => {
return utils.noonenumberFormat(value); return utils.noonenumberFormat(value);
@ -854,11 +854,28 @@ const ParkingOverview = connect(function mapStateToProps(state) {
x: 50, x: 50,
y: 35, y: 35,
x2: 30, x2: 30,
y2: 70,
y2: 30,
}, },
}); });
}; };
//
const psetZoom = () => {
const clientWidth =
document.documentElement.clientWidth || document.body.clientWidth;
const zoom = clientWidth / 1920;
const reverseZoom = 1 / zoom;
// window.zoom = zoom;
// document.getElementsByClassName(
// "ParkingOverview"
// )[0].style = `zoom:${zoom}`;
document.getElementById("map").style = `height:${reverseZoom * 100}%;
width:${reverseZoom * 100}%;
zoom:${reverseZoom};
transform: scale(${zoom});
transform-origin: 0 0;`;
};
// //
const BottomCar = (val) => { const BottomCar = (val) => {
let length = CarRoad.length; let length = CarRoad.length;
@ -1309,9 +1326,10 @@ const ParkingOverview = connect(function mapStateToProps(state) {
useEffect(() => { useEffect(() => {
getSelectData(); getSelectData();
if(process.env.NODE_ENV !== "development"){
if (process.env.NODE_ENV !== "development") {
GetCar(); GetCar();
} }
GetAreaShop(); GetAreaShop();
timerption = setInterval(() => { timerption = setInterval(() => {
setDayDa(DateDay()); setDayDa(DateDay());
@ -1319,17 +1337,14 @@ const ParkingOverview = connect(function mapStateToProps(state) {
return () => { return () => {
clearInterval(qftimer); clearInterval(qftimer);
clearInterval(timerption); clearInterval(timerption);
if (crtimer) {
crtimer.close(); crtimer.close();
}
}; };
}, []); }, []);
return ( return (
<div className="ParkingOverview"> <div className="ParkingOverview">
<div
className="pk_header"
// onClick={() => {
// navigate("/nav");
// }}
></div>
<div className="pk_header"></div>
<div className="left_home"> <div className="left_home">
<div className="pkh_title">停车业务概览</div> <div className="pkh_title">停车业务概览</div>
<div className="dlex_f"> <div className="dlex_f">
@ -1579,7 +1594,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
{HoShow ? <i></i> : ""} {HoShow ? <i></i> : ""}
</div> </div>
<div className="right_home"> <div className="right_home">
<div>
<div className="bsdsj">
<div className="pkh_title"> <div className="pkh_title">
{CarRoad[CarShow]?.type == 2 ? "收费员排行Top5" : "车场收入排行榜"} {CarRoad[CarShow]?.type == 2 ? "收费员排行Top5" : "车场收入排行榜"}
</div> </div>
@ -1645,7 +1660,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
})} })}
</div> </div>
</div> </div>
<div>
<div className="bsdsj">
<div className="pkh_title"> <div className="pkh_title">
{CarRoad[CarShow]?.type == 2 ? "营业收入分析" : "车场周转率TOP3"} {CarRoad[CarShow]?.type == 2 ? "营业收入分析" : "车场周转率TOP3"}
</div> </div>
@ -1692,7 +1707,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
/> />
)} )}
</div> </div>
<div>
<div className="bsdsj">
<div className="pkh_title"> <div className="pkh_title">
停车收入统计 停车收入统计
<Tooltip <Tooltip

57
src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx

@ -483,10 +483,10 @@ function PaySummaryReport() {
value: "3", value: "3",
label: "月", label: "月",
}, },
{
value: "4",
label: "年",
},
// {
// value: "4",
// label: "",
// },
]} ]}
onChange={(e) => SetTimeNow(e)} onChange={(e) => SetTimeNow(e)}
/> />
@ -502,17 +502,41 @@ function PaySummaryReport() {
value={FormData.start_time ? moment(FormData.start_time) : null} value={FormData.start_time ? moment(FormData.start_time) : null}
onChange={(date, dateString) => { onChange={(date, dateString) => {
if (TimeChange().str == "week") { if (TimeChange().str == "week") {
let days = moment(FormData.end_time).diff(
moment(date).day(1),
"days"
);
if (days > 30) {
setFormData({
...FormData,
start_time: moment(FormData.end_time).subtract(
30,
"days"
),
});
} else {
setFormData({ setFormData({
...FormData, ...FormData,
start_time: date start_time: date
? moment(date).day(1).format("YYYY-MM-DD") ? moment(date).day(1).format("YYYY-MM-DD")
: null, : null,
}); });
}else {
}
} else if (TimeChange().str == "month") {
setFormData({
...FormData,
start_time: dateString,
end_time: dateString,
});
message.success("已为你自动更改");
} else {
setFormData({ ...FormData, start_time: dateString }); setFormData({ ...FormData, start_time: dateString });
} }
}} }}
disabledDate={(current) => current > moment(FormData.end_time)}
disabledDate={(current) =>
current > moment(FormData.end_time) ||
current < moment(FormData.end_time).subtract(30, "days")
}
/> />
</div> </div>
</div> </div>
@ -528,18 +552,37 @@ function PaySummaryReport() {
value={FormData.end_time ? moment(FormData.end_time) : null} value={FormData.end_time ? moment(FormData.end_time) : null}
onChange={(date, dateString) => { onChange={(date, dateString) => {
if (TimeChange().str == "week") { if (TimeChange().str == "week") {
let days = moment(date)
.day(7)
.diff(moment(FormData.start_time), "days");
console.log(days);
if (days > 30) {
setFormData({
...FormData,
end_time: moment(FormData.start_time).add(30, "days"),
});
} else {
setFormData({ setFormData({
...FormData, ...FormData,
end_time: date end_time: date
? moment(date).day(7).format("YYYY-MM-DD") ? moment(date).day(7).format("YYYY-MM-DD")
: null, : null,
}); });
}
} else if (TimeChange().str == "month") {
setFormData({
...FormData,
start_time: dateString,
end_time: dateString,
});
message.success("已为你自动更改");
} else { } else {
setFormData({ ...FormData, end_time: dateString }); setFormData({ ...FormData, end_time: dateString });
} }
}} }}
disabledDate={(current) => disabledDate={(current) =>
current < moment(FormData.start_time)
current < moment(FormData.start_time) ||
current > moment(FormData.start_time).add(30, "days")
} }
/> />
</div> </div>

Loading…
Cancel
Save