Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
W
wisdom-components
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ReactWeb5
wisdom-components
Commits
6d058620
Commit
6d058620
authored
Jul 20, 2023
by
陈龙
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 优化图表移动端
parent
5bc035d3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
29 additions
and
17 deletions
+29
-17
mobile.js
...ages/extend-components/EC_HistoryView/src/demos/mobile.js
+13
-3
mobile.js
packages/extend-components/EC_HistoryView/src/mobile.js
+16
-13
utils.js
packages/extend-components/EC_HistoryView/src/utils.js
+0
-1
No files found.
packages/extend-components/EC_HistoryView/src/demos/mobile.js
View file @
6d058620
import
React
from
'react'
;
import
React
,
{
useEffect
,
useState
}
from
'react'
;
import
{
MobileHistoryChart
}
from
"../mobile"
;
import
moment
from
'moment'
const
deviceParams
=
[
/* {
deviceCode: 'EGBF00000141',
...
...
@@ -15,11 +15,21 @@ const deviceParams = [
pointAddressID
:
208
,
},
];
const
Demo
=
()
=>
{
const
[
date
,
setData
]
=
useState
();
useEffect
(()
=>
{
setTimeout
(()
=>
{
setData
({
dateFrom
:
moment
().
subtract
(
4
,
'days'
).
format
(
'YYYY-MM-DD HH:mm:ss'
),
dateTo
:
moment
().
subtract
(
3
,
'days'
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
})
},
5000
)
},[])
return
(
<
div
>
<
div
style
=
{{
height
:
400
}}
>
<
MobileHistoryChart
deviceParams
=
{
deviceParams
}
/
>
<
MobileHistoryChart
deviceParams
=
{
deviceParams
}
date
=
{
date
}
/
>
<
/div
>
<
/div
>
...
...
packages/extend-components/EC_HistoryView/src/mobile.js
View file @
6d058620
...
...
@@ -10,10 +10,7 @@ import styles from './index.less';
const
DATE_FORMAT
=
'YYYY-MM-DD HH:mm:ss'
;
const
MobileHistoryChart
=
(
{
date
=
{
dateFrom
:
moment
().
subtract
(
1
,
'days'
).
format
(
`
${
DATE_FORMAT
}
`
),
dateTo
:
moment
().
format
(
`
${
DATE_FORMAT
}
`
)
},
// 默认当天
date
,
deviceParams
=
[],
// 设备参数,必传
chartType
=
'lineChart'
,
// lineChart boxChart
// ignoreOutliers = true, // 滤波
...
...
@@ -59,7 +56,9 @@ const MobileHistoryChart = (
};
const
getDataSource
=
()
=>
{
let
diffDays
=
moment
(
date
.
dateTo
).
diff
(
moment
(
date
.
dateFrom
),
'days'
);
let
dateFrom
=
date
?.
dateFrom
||
moment
().
subtract
(
1
,
'days'
).
format
(
`
${
DATE_FORMAT
}
`
),
dateTo
=
date
?.
dateTo
||
moment
().
format
(
`
${
DATE_FORMAT
}
`
);
let
diffDays
=
moment
(
dateTo
).
diff
(
moment
(
dateFrom
),
'days'
);
const
thinKey
=
handleDataThinKey
(
diffDays
);
const
acrossTables
=
deviceParams
.
map
(
item
=>
{
let
_item
=
{...
item
};
...
...
@@ -70,7 +69,8 @@ const MobileHistoryChart = (
return
_item
;
});
let
_params
=
{
...
date
,
dateFrom
,
dateTo
,
isBoxPlots
,
ignoreOutliers
:
options
.
ignoreOutliers
,
isDilute
,
...
...
@@ -79,7 +79,6 @@ const MobileHistoryChart = (
};
getHistoryInfo
({...
_params
}).
then
(
res
=>
{
let
data
=
[];
const
{
dateFrom
,
dateTo
}
=
date
;
if
(
res
.
code
===
0
&&
res
.
data
.
length
)
{
res
.
data
.
forEach
((
d
)
=>
{
d
.
dateFrom
=
dateFrom
||
''
;
...
...
@@ -128,24 +127,28 @@ const MobileHistoryChart = (
},
[])
useEffect
(()
=>
{
getDataSource
();
},
[
options
.
ignoreOutliers
])
return
deviceAlarmSchemes
&&
chartDataSource
?
<
div
style
=
{{}}
>
},
[
options
.
ignoreOutliers
,
date
])
return
deviceAlarmSchemes
&&
chartDataSource
?
<
div
style
=
{{
width
:
'100%'
}}
>
{
chartDataSource
.
length
===
1
?
<
div
className
=
{
styles
[
`
${
prefixCls
}
-item`
]}
>
<
span
style
=
{{
fontSize
:
handlePx
(
1
6
)}}
>
曲线形态:
<
/span
>
<
span
style
=
{{
fontSize
:
handlePx
(
1
4
)}}
>
曲线形态:
<
/span
>
<
Selector
style
=
{{
display
:
'inline-block'
,
fontSize
:
handlePx
(
14
)}}
options
=
{[
{
label
:
'线形图'
,
value
:
'lineChart'
},
{
label
:
'箱线图'
,
value
:
'boxChart'
}
]}
defaultValue
=
{
lineType
}
onChange
=
{(
arr
,
extend
)
=>
setLineType
(
arr
)}
onChange
=
{(
arr
,
extend
)
=>
{
setLineType
(
arr
)
}}
/
>
<
/div> : '
'
}
<
div
className
=
{
styles
[
`
${
prefixCls
}
-item`
]}
>
<
span
style
=
{{
fontSize
:
handlePx
(
1
6
)}}
>
曲线设置:
<
/span
>
<
div
className
=
{
styles
[
`
${
prefixCls
}
-item`
]}
>
<
span
style
=
{{
fontSize
:
handlePx
(
1
4
)}}
>
曲线设置:
<
/span
>
<
Checkbox
.
Group
style
=
{{
fontSize
:
handlePx
(
14
)}}
value
=
{
checkBoxOptions
}
onChange
=
{
val
=>
{
let
_arr
=
Object
.
keys
(
options
);
...
...
packages/extend-components/EC_HistoryView/src/utils.js
View file @
6d058620
...
...
@@ -714,7 +714,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
tooltip
.
timeFormat
=
tooltipTimeFormat
;
let
_legendData
=
series
.
filter
(
item
=>
!
[
'最大值'
,
'最小值'
].
includes
(
item
.
name
)).
map
(
item
=>
item
.
name
);
assignOptions
(
restOption
,
xAxis
,
_legendData
);
debugger
return
{
yAxis
,
grid
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment