chenglb
/
PMS_Frontend_v1.0.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
chenqiang 1 year ago
parent
62bbb1931c
commit
b1b176d4d4
3 changed files with 182 additions and 120 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/pages/DataAnalysisPrediction/ParkingOverview/index.scss
  2. 213
      src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
  3. 71
      src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx

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

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

213
src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx
View File

@ -359,7 +359,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
url: "/dataAlyPrediction/parkUsageAly",
},
{
text: "昨日出入场利用率",
text: "昨日出入场流率",
value: "flowrate",
img: Lfb,
status: "%",
@ -679,7 +679,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
}) || [];
setRightTwo({
title: {
text: "{a|" + sum(datas.map((ele) => ele.value)) + "}",
text: "{a|" + sum(datas.map((ele) => ele.value)).toFixed(2) + "}",
x: "center",
y: "center",
subtext: "营业收入",
@ -816,7 +816,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
min: 0,
// /max: 50,
// interval: 10,
// splitNumber: 6, //设置坐标轴的分割段数
splitNumber: 2, //设置坐标轴的分割段数
axisLabel: {
formatter: (value) => {
return utils.noonenumberFormat(value);
@ -854,11 +854,28 @@ const ParkingOverview = connect(function mapStateToProps(state) {
x: 50,
y: 35,
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) => {
let length = CarRoad.length;
@ -956,7 +973,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
const GetCar = () => {
crtimer = new WebSocket(
sysConfig?.messageConst?.wssUrl ||
"wss://acb-pre.xihaianparking.com/PMS/ws/re"
"wss://acb-pre.xihaianparking.com/PMS/ws/re"
);
// console.log(props.user.userInfo.user_uid);
crtimer.onopen = function (data) {
@ -1309,9 +1326,10 @@ const ParkingOverview = connect(function mapStateToProps(state) {
useEffect(() => {
getSelectData();
if(process.env.NODE_ENV !== "development"){
if (process.env.NODE_ENV !== "development") {
GetCar();
}
GetAreaShop();
timerption = setInterval(() => {
setDayDa(DateDay());
@ -1319,111 +1337,108 @@ const ParkingOverview = connect(function mapStateToProps(state) {
return () => {
clearInterval(qftimer);
clearInterval(timerption);
crtimer.close();
if (crtimer) {
crtimer.close();
}
};
}, []);
return (
<div className="ParkingOverview">
<div
className="pk_header"
// onClick={() => {
// navigate("/nav");
// }}
></div>
<div className="pk_header"></div>
<div className="left_home">
<div className="pkh_title">停车业务概览</div>
<div className="dlex_f">
{CarRoad[CarShow]?.type == 2
? LeftShow.map((ele) => {
return (
<div
className={ele?.url ? "curpoin lf_s" : "lf_s"}
onClick={() => {
if (ele?.url) {
window.location = `/#${ele.url}`;
}
if (ele.text == "停车场泊位总数") {
getData(FormData);
setBoOpenClass({
width: 1632,
title: "泊位列表",
type: 1,
});
setBoOpen(true);
}
}}
key={ele.text}
>
<img src={ele.img} alt="" />
<div className="lf_num">
<div className="pldf">
<p
title={
ele.other
? LeftDataOther[ele.value]
: LeftDataTop[ele.value]
}
>
{ele.other
? ele.tod
? LeftDataOther[ele.value]
: utils.toThousands(LeftDataOther[ele.value])
: ele.tod
return (
<div
className={ele?.url ? "curpoin lf_s" : "lf_s"}
onClick={() => {
if (ele?.url) {
window.location = `/#${ele.url}`;
}
if (ele.text == "停车场泊位总数") {
getData(FormData);
setBoOpenClass({
width: 1632,
title: "泊位列表",
type: 1,
});
setBoOpen(true);
}
}}
key={ele.text}
>
<img src={ele.img} alt="" />
<div className="lf_num">
<div className="pldf">
<p
title={
ele.other
? LeftDataOther[ele.value]
: LeftDataTop[ele.value]
}
>
{ele.other
? ele.tod
? LeftDataOther[ele.value]
: utils.toThousands(LeftDataOther[ele.value])
: ele.tod
? LeftDataTop[ele.value]
: utils.toThousands(LeftDataTop[ele.value])}
</p>
<i>{ele.status}</i>
</p>
<i>{ele.status}</i>
</div>
<span>{ele.text}</span>
</div>
<span>{ele.text}</span>
</div>
</div>
);
})
);
})
: LeftShowqu.map((ele) => {
return (
<div
className={ele?.url ? "curpoin lf_s" : "lf_s"}
onClick={() => {
if (ele?.url) {
window.location = `/#${ele.url}`;
}
// if (ele.text == "停车场泊位总数") {
// getData(FormData);
// setBoOpenClass({
// width: 1632,
// title: "泊位列表",
// type: 1,
// });
// setBoOpen(true);
// }
}}
key={ele.text}
>
<img src={ele.img} alt="" />
<div className="lf_num">
<div className="pldf">
<p
title={
ele.other
? LeftDataOther[ele.value]
: LeftDataTopqu[ele.value]
}
>
{ele.other
? ele.tod
? LeftDataOther[ele.value]
: utils.toThousands(LeftDataOther[ele.value])
: ele.tod
return (
<div
className={ele?.url ? "curpoin lf_s" : "lf_s"}
onClick={() => {
if (ele?.url) {
window.location = `/#${ele.url}`;
}
// if (ele.text == "停车场泊位总数") {
// getData(FormData);
// setBoOpenClass({
// width: 1632,
// title: "泊位列表",
// type: 1,
// });
// setBoOpen(true);
// }
}}
key={ele.text}
>
<img src={ele.img} alt="" />
<div className="lf_num">
<div className="pldf">
<p
title={
ele.other
? LeftDataOther[ele.value]
: LeftDataTopqu[ele.value]
}
>
{ele.other
? ele.tod
? LeftDataOther[ele.value]
: utils.toThousands(LeftDataOther[ele.value])
: ele.tod
? LeftDataTopqu[ele.value]
: utils.toThousands(LeftDataTopqu[ele.value])}
</p>
<i>{ele.status}</i>
</p>
<i>{ele.status}</i>
</div>
<span>{ele.text}</span>
</div>
<span>{ele.text}</span>
</div>
</div>
);
})}
);
})}
</div>
</div>
<div className="input_h">
@ -1579,7 +1594,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
{HoShow ? <i></i> : ""}
</div>
<div className="right_home">
<div>
<div className="bsdsj">
<div className="pkh_title">
{CarRoad[CarShow]?.type == 2 ? "收费员排行Top5" : "车场收入排行榜"}
</div>
@ -1634,9 +1649,9 @@ const ParkingOverview = connect(function mapStateToProps(state) {
CarRoad[CarShow]?.type == 2
? ele?.rate?.slice(0, ele.rate.length - 1) || 0
: getPercentage(
ele.paid_amount || 0,
DataTop[0].paid_amount
)
ele.paid_amount || 0,
DataTop[0].paid_amount
)
}
/>
</div>
@ -1645,7 +1660,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
})}
</div>
</div>
<div>
<div className="bsdsj">
<div className="pkh_title">
{CarRoad[CarShow]?.type == 2 ? "营业收入分析" : "车场周转率TOP3"}
</div>
@ -1692,7 +1707,7 @@ const ParkingOverview = connect(function mapStateToProps(state) {
/>
)}
</div>
<div>
<div className="bsdsj">
<div className="pkh_title">
停车收入统计
<Tooltip

71
src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx
View File

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

Write Preview
Loading…
Cancel
Save