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
14e3cf6a
Commit
14e3cf6a
authored
Apr 18, 2024
by
陈龙
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
release: 历史曲线增加BI主题
parent
6ffb2f78
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
245 additions
and
76 deletions
+245
-76
EC_HistoryView.md
...es/extend-components/EC_HistoryView/src/EC_HistoryView.md
+1
-1
SingleChart.js
packages/extend-components/EC_HistoryView/src/SingleChart.js
+16
-16
VirtualTable.js
...ages/extend-components/EC_HistoryView/src/VirtualTable.js
+10
-11
VirtualTable.less
...es/extend-components/EC_HistoryView/src/VirtualTable.less
+4
-6
index.js
packages/extend-components/EC_HistoryView/src/demos/index.js
+0
-8
index.js
packages/extend-components/EC_HistoryView/src/index.js
+0
-0
index.less
packages/extend-components/EC_HistoryView/src/index.less
+1
-1
indexForBI.less
...ages/extend-components/EC_HistoryView/src/indexForBI.less
+209
-29
theme.js
packages/extend-components/EC_HistoryView/src/theme.js
+1
-1
useBIMode.js
packages/extend-components/EC_HistoryView/src/useBIMode.js
+3
-3
No files found.
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @
14e3cf6a
...
...
@@ -30,7 +30,7 @@ path: /
## 单图表-频率
[
//
]:
#
(<code src="./demos/indexForFrequency.js"></code>)
<code
src=
"./demos/indexForFrequency.js"
></code>
[
//
]:
#
'## 移动端'
[
//
]:
#
'<code src="./demos/mobile.js"></code>'
...
...
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @
14e3cf6a
import
React
,
{
memo
,
useEffect
,
useMemo
,
useRef
}
from
'react'
;
import
{
BasicChart
}
from
'@wisdom-components/basicchart'
;
import
React
,
{
memo
,
useEffect
,
useMemo
,
useRef
}
from
'react'
;
import
{
BasicChart
}
from
'@wisdom-components/basicchart'
;
import
optionGenerator
,
{
alarmMarkLine
,
specialTypeChartOptionGenerator
,
}
from
'./utils'
;
import
{
isArray
,
cloneDeep
}
from
'lodash'
;
import
{
isArray
,
cloneDeep
}
from
'lodash'
;
import
moment
from
"moment"
;
import
patchBIOption
from
"./useBIMode"
;
import
{
BI
,
Normal
}
from
'./theme'
;
import
{
BI
,
Normal
}
from
'./theme'
;
import
*
as
echarts
from
'echarts'
;
echarts
.
registerTheme
(
'BI'
,
BI
)
...
...
@@ -58,7 +58,7 @@ const SingleChart = memo((props) => {
if
(
dataSource
.
length
===
1
&&
SpecialType
.
includes
(
_allPointAddress
[
dataSource
[
0
].
sensorName
]))
{
config
.
sensorType
=
_allPointAddress
[
dataSource
[
0
].
sensorName
];
config
.
special
.
allValDesc
=
allValDesc
;
return
specialTypeChartOptionGenerator
({
dataSource
,
config
});
return
specialTypeChartOptionGenerator
({
dataSource
,
config
});
}
let
_option
=
optionGenerator
(
dataSource
,
null
,
contrast
,
contrastOption
,
smooth
,
config
,
lineDataType
,
predicateData
);
if
(
emptyOrError
.
empty
||
emptyOrError
.
error
)
{
...
...
@@ -74,7 +74,6 @@ const SingleChart = memo((props) => {
}
// 加入bi模式
if
(
theme
===
'BI'
)
_option
=
patchBIOption
(
_option
,
BI
);
if
(
theme
===
'BI'
)
console
.
log
(
_option
);
return
_option
;
},
[
dataSource
,
smooth
,
curveCenter
,
chartType
,
predicateData
]);
useEffect
(()
=>
{
...
...
@@ -82,7 +81,7 @@ const SingleChart = memo((props) => {
const
chart
=
chartRef
.
current
?.
getEchartsInstance
?.();
function
hander
(
params
)
{
const
{
selected
}
=
params
;
const
{
selected
}
=
params
;
const
count
=
Object
.
values
(
selected
||
{}).
filter
((
item
)
=>
item
).
length
;
const
option
=
cloneDeep
(
chart
.
getOption
());
const
needMarkLine
=
count
===
1
;
...
...
@@ -121,8 +120,8 @@ const SingleChart = memo((props) => {
let
minPoint
=
pointArr
[
minValueIndex
];
if
(
!
maxPoint
||
!
minPoint
)
return
{}
// 3. 计算坐标位置,返回的是 [x,y]的像素坐标
let
maxPointPosition
=
chart
.
convertToPixel
({
seriesIndex
:
0
},
[
moment
(
maxPoint
.
pt
).
valueOf
(),
maxPoint
.
pv
])
let
minPointPosition
=
chart
.
convertToPixel
({
seriesIndex
:
0
},
[
moment
(
minPoint
.
pt
).
valueOf
(),
minPoint
.
pv
])
let
maxPointPosition
=
chart
.
convertToPixel
({
seriesIndex
:
0
},
[
moment
(
maxPoint
.
pt
).
valueOf
(),
maxPoint
.
pv
])
let
minPointPosition
=
chart
.
convertToPixel
({
seriesIndex
:
0
},
[
moment
(
minPoint
.
pt
).
valueOf
(),
minPoint
.
pv
])
if
(
!
maxPointPosition
||
!
minPointPosition
)
return
;
// 4. 计算最大最小值的标签宽度
let
maxLength
=
80
+
String
(
maxValue
).
length
*
5
;
...
...
@@ -237,14 +236,14 @@ const SingleChart = memo((props) => {
name
:
''
,
type
:
'max'
,
symbol
:
'emptyCircle'
,
label
:
{
show
:
false
},
label
:
{
show
:
false
},
symbolSize
:
6
,
},
{
name
:
''
,
type
:
'min'
,
symbol
:
'emptyCircle'
,
label
:
{
show
:
false
},
label
:
{
show
:
false
},
symbolSize
:
6
,
}
];
...
...
@@ -260,7 +259,7 @@ const SingleChart = memo((props) => {
};
};
// minMaxMarkPoint(dataSource)
chart
.
setOption
({
series
:
{
markPoint
:
minMaxMarkPoint
(
dataSource
)}
})
chart
.
setOption
({
series
:
{
markPoint
:
minMaxMarkPoint
(
dataSource
)
}
})
},
200
)
}
...
...
@@ -295,9 +294,10 @@ const SingleChart = memo((props) => {
splitNumber
:
2
,
},
minorSplitLine
:
{
show
:
showGridLine
,
// show: showGridLine,
show
:
theme
===
'BI'
?
false
:
showGridLine
,
lineStyle
:
{
//
type: 'dashed',
type
:
'dashed'
,
},
},
splitLine
:
{
...
...
@@ -306,7 +306,7 @@ const SingleChart = memo((props) => {
};
let
yAxis
=
axisConfig
;
if
(
isArray
(
option
.
yAxis
))
{
yAxis
=
option
.
yAxis
.
map
((
item
)
=>
({
...
axisConfig
}));
yAxis
=
option
.
yAxis
.
map
((
item
)
=>
({
...
axisConfig
}));
}
let
xAxis
=
axisConfig
;
chart
.
setOption
({
...
...
@@ -316,7 +316,7 @@ const SingleChart = memo((props) => {
});
},
[
showGridLine
]);
return
<
BasicChart
theme
=
{
theme
}
ref
=
{
chartRef
}
option
=
{
option
}
notMerge
style
=
{{
width
:
'100%'
,
height
:
'100%'
}}
/
>
style
=
{{
width
:
'100%'
,
height
:
'100%'
}}
/
>
});
export
default
SingleChart
;
packages/extend-components/EC_HistoryView/src/VirtualTable.js
View file @
14e3cf6a
import
React
,
{
useRef
,
useState
,
useEffect
}
from
'react'
;
import
React
,
{
useRef
,
useState
,
useEffect
}
from
'react'
;
import
BasicTable
from
"@wisdom-components/basictable"
;
import
classNames
from
'classnames'
;
import
ResizeObserver
from
'rc-resize-observer'
;
import
{
VariableSizeGrid
as
Grid
}
from
'react-window'
;
import
{
VariableSizeGrid
as
Grid
}
from
'react-window'
;
import
'./VirtualTable.less'
;
const
VirtualTable
=
(
props
)
=>
{
const
TABLE_ROW_HEIGHT
=
40
;
const
{
columns
,
scroll
}
=
props
;
const
{
columns
,
scroll
}
=
props
;
const
[
tableWidth
,
setTableWidth
]
=
useState
(
0
);
const
widthColumnCount
=
columns
.
filter
(({
width
})
=>
!
width
).
length
;
const
widthColumnCount
=
columns
.
filter
(({
width
})
=>
!
width
).
length
;
const
totalWidth
=
columns
.
reduce
((
final
,
curr
)
=>
{
return
final
+=
(
curr
.
width
??
0
)
},
0
);
...
...
@@ -55,7 +54,7 @@ const VirtualTable = (props) => {
});
};
useEffect
(()
=>
resetVirtualGrid
,
[
tableWidth
,
props
.
dataSource
]);
const
renderVirtualList
=
(
rawData
,
{
scrollbarSize
,
ref
,
onScroll
})
=>
{
const
renderVirtualList
=
(
rawData
,
{
scrollbarSize
,
ref
,
onScroll
})
=>
{
ref
.
current
=
connectObject
;
const
totalHeight
=
rawData
.
length
*
TABLE_ROW_HEIGHT
;
...
...
@@ -65,7 +64,7 @@ const VirtualTable = (props) => {
className
=
"virtual-grid"
columnCount
=
{
mergedColumns
.
length
}
columnWidth
=
{(
index
)
=>
{
const
{
width
}
=
mergedColumns
[
index
];
const
{
width
}
=
mergedColumns
[
index
];
return
totalHeight
>
scroll
.
y
&&
index
===
mergedColumns
.
length
-
1
?
width
-
scrollbarSize
-
1
:
width
;
...
...
@@ -75,13 +74,13 @@ const VirtualTable = (props) => {
rowHeight
=
{()
=>
TABLE_ROW_HEIGHT
}
width
=
{
tableWidth
}
// width={'100%'}
onScroll
=
{({
scrollLeft
})
=>
{
onScroll
=
{({
scrollLeft
})
=>
{
onScroll
({
scrollLeft
,
});
}}
>
{({
columnIndex
,
rowIndex
,
style
})
=>
(
{({
columnIndex
,
rowIndex
,
style
})
=>
(
<
div
className
=
{
classNames
(
'virtual-table-cell'
,
{
'virtual-table-cell-last'
:
columnIndex
===
mergedColumns
.
length
-
1
,
...
...
@@ -96,14 +95,14 @@ const VirtualTable = (props) => {
};
return
(
<
ResizeObserver
onResize
=
{({
width
})
=>
{
onResize
=
{({
width
})
=>
{
setTableWidth
(
width
);
}}
>
<
BasicTable
{...
props
}
size
=
{
'small'
}
//
className="virtual-table"
className
=
"virtual-table"
columns
=
{
mergedColumns
}
pagination
=
{
false
}
components
=
{{
...
...
packages/extend-components/EC_HistoryView/src/VirtualTable.less
View file @
14e3cf6a
...
...
@@ -14,11 +14,9 @@
text-align: center;
line-height: 1;
&:nth-child(even) {
}
&:nth-child(even) {}
&:nth-child(odd) {
}
&:nth-child(odd) {}
}
[data-theme="dark"] .virtual-table-cell {
...
...
@@ -27,5 +25,4 @@
border-bottom: 1px solid #303030;
background: #141414;
text-align: center;
}
}
\ No newline at end of file
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @
14e3cf6a
...
...
@@ -289,14 +289,6 @@ const Demo = () => {
{
/* <HistoryView deviceParams={deviceParams} defaultModel="table" /> */
}
<
HistoryView
theme
=
{
'BI'
}
deviceParams
=
{
deviceParams
}
defaultModel
=
"curve"
/>
<
/div
>
{
/* <div style={{height: 700}}>
<HistoryView deviceParams={deviceParams} defaultModel="table" />
<HistoryView deviceParams={deviceParams} defaultModel="curve"/>
</div>
<div style={{height: 700}}>
<HistoryView deviceParams={deviceParams} defaultModel="table" />
<HistoryView deviceParams={p1} defaultModel="curve"/>
</div>*/
}
<
/div
>
<
/
>
);
...
...
packages/extend-components/EC_HistoryView/src/index.js
View file @
14e3cf6a
This diff is collapsed.
Click to expand it.
packages/extend-components/EC_HistoryView/src/index.less
View file @
14e3cf6a
...
...
@@ -211,7 +211,7 @@
&_text {
padding-left: 10px;
color:
'#333333'
;
color:
#333333
;
font-weight: bold;
font-size: 15px;
font-family: 'Microsoft YaHei';
...
...
packages/extend-components/EC_HistoryView/src/indexForBI.less
View file @
14e3cf6a
@root-entry-name: 'default';
@import (reference) '~antd/es/style/themes/dark.less';
// @import (reference) '~antd/es/style/themes/dark.less';
@import (reference) '~antd/dist/antd.dark.less';
@history-view: ~'@{ant-prefix}-history-view';
@BI-primary-color: #ff0000;
@primaryColor: #1980ff;
@primaryColorOpacity: #1980ff16;
@primaryTextColor: #dcdcf2d9;
.historyViewComponents {
--primary-color: @primaryColor;
--primary-color-opacity: @primaryColorOpacity;
--primary-color50: rgba(103, 185, 184, 0.5);
--primary-color20: rgba(103, 185, 184, 0.2);
--main-background-color: #213853;
--text-color: @primaryTextColor;
--date-negative: rgba(220, 220, 242, 0.25);
--date-border-color: #98bcfc29;
--text-color65: rgba(255, 255, 255, 0.65);
--text-color45: rgba(255, 255, 255, 0.45);
--text-color25: rgba(255, 255, 255, 0.25);
--text-color10: rgba(255, 255, 255, 0.1);
--title-text-color: #ffffff;
--title-text-primary-color: #ffffff;
--background-color: #282b34;
--border-color: #38435a;
--panel-border-color: #38435a;
--table-head-background-color: #dcdcf214;
background-color: var(--background-color);
.@{ant-prefix}-table-thead>tr>th {
background: var(--table-head-background-color);
border-bottom: 1px solid var(--border-color);
color: var(--text-color);
}
.@{ant-prefix}-table-container {
background: var(--background-color);
}
.virtual-table {
::-webkit-scrollbar-thumb {
background: var(--border-color);
}
}
.virtual-table-cell {
background-color: var(--background-color);
border-bottom-color: var(--border-color);
color: var(--text-color);
}
&-label {
position: relative;
width: 80px;
color: @primaryTextColor;
&::after {
position: absolute;
top: 0;
right: 7px;
content: ':';
}
}
// radio
:global {
.@{ant-prefix}-radio-button-wrapper {
color: var(--text-color);
background-color: var(--background-color);
border-color: var(--panel-border-color);
}
.@{ant-prefix}-radio-button-wrapper:not(:first-child)::before {
background-color: unset;
}
.@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled) {
color: @BI-primary-color;
color: var(--text-color);
background-color: var(--background-color);
}
.@{ant-prefix}-radio-button-wrapper-checked:not([class*=' @{ant-prefix}-radio-button-wrapper-disabled']).@{ant-prefix}-radio-button-wrapper:first-child {
border-right-color:
@BI-primary-color
;
border-right-color:
var(--primary-color)
;
}
.@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled):first-child {
color: @BI-primary-color;
color: var(--text-color);
border-color: var(--primary-color);
}
.@{ant-prefix}-radio-button-wrapper
-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled):first-child
{
border-color: @BI-primary-color
;
.@{ant-prefix}-radio-button-wrapper
:hover
{
color: var(--primary-color)
;
}
.@{ant-prefix}-radio-button-wrapper
:hover
{
color: @BI-primary-color
;
.@{ant-prefix}-radio-button-wrapper
-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled)
{
background-color: var(--primary-color)
;
}
.@{ant-prefix}-tabs-tab.ant-tabs-tab-active .@{ant-prefix}-tabs-tab-btn {
color: @BI-primary-color;
}
// tabs
:global {
.@{ant-prefix}-tabs-tab.@{ant-prefix}-tabs-tab-active .@{ant-prefix}-tabs-tab-btn {
color: var(--primary-color);
}
.@{ant-prefix}-tabs-tab-btn:focus, .@{ant-prefix}-tabs-tab-remove:focus, .@{ant-prefix}-tabs-tab-btn:active, .@{ant-prefix}-tabs-tab-remove:active {
color: @BI-primary-color;
.@{ant-prefix}-tabs-tab-btn:focus,
.@{ant-prefix}-tabs-tab-remove:focus,
.@{ant-prefix}-tabs-tab-btn:active,
.@{ant-prefix}-tabs-tab-remove:active {
color: var(--primary-color);
}
.@{ant-prefix}-tabs-tab:hover {
color: @BI-primary-color;
color: var(--primary-color);
}
.@{ant-prefix}-tabs {
color: var(--text-color);
h3 {
color: var(--text-color);
}
}
.@{ant-prefix}-tabs-top>.@{ant-prefix}-tabs-nav::before {
border-bottom: 1px solid var(--panel-border-color);
}
}
// checkbox
:global {
.@{ant-prefix}-checkbox-input {
border: 1px solid var(--border-color);
}
.@{ant-prefix}-checkbox-inner {
background-color: var(--background-color);
border: 1px solid var(--border-color);
}
.@{ant-prefix}-checkbox-wrapper {
color: var(--text-color);
}
}
//date-picker
:global {
.@{ant-prefix}-picker {
background-color: var(--background-color);
border: 1px solid var(--border-color)
}
.@{ant-prefix}-picker-panel {
border-bottom: 1px solid var(--date-border-color);
}
.@{ant-prefix}-picker-datetime-panel .@{ant-prefix}-picker-time-panel,
.@{ant-prefix}-picker-time-panel-column:not(:first-child) {
border-left: 1px solid var(--date-border-color);
}
.ant-picker-header>button,
.@{ant-prefix}-picker-cell.@{ant-prefix}-picker-cell-in-view,
.@{ant-prefix}-picker-content th,
.@{ant-prefix}-picker-time-panel-column>li.@{ant-prefix}-picker-time-panel-cell .@{ant-prefix}-picker-time-panel-cell-inner {
color: var(--text-color);
}
.@{ant-prefix}-picker-panel-container {
background-color: var(--background-color) !important;
}
.@{ant-prefix}-picker-header {
color: var(--text-color);
border-bottom: 1px solid var(--date-border-color);
}
.@{ant-prefix}-picker-cell {
color: var(--date-negative);
}
.@{ant-prefix}-picker-time-panel-column>li.@{ant-prefix}-picker-time-panel-cell .@{ant-prefix}-picker-time-panel-cell-inner:hover,
.@{ant-prefix}-picker-time-panel-column>li.@{ant-prefix}-picker-time-panel-cell-selected .@{ant-prefix}-picker-time-panel-cell-inner,
.@{ant-prefix}-picker-cell:hover:not(.@{ant-prefix}-picker-cell-in-view) .@{ant-prefix}-picker-cell-inner,
.@{ant-prefix}-picker-cell:hover:not(.@{ant-prefix}-picker-cell-selected):not(.@{ant-prefix}-picker-cell-range-start):not(.@{ant-prefix}-picker-cell-range-end):not(.@{ant-prefix}-picker-cell-range-hover-start):not(.@{ant-prefix}-picker-cell-range-hover-end) .@{ant-prefix}-picker-cell-inner {
background-color: var(--primary-color);
}
.@{ant-prefix}-btn-primary[disabled] {
background-color: var(--primary-color-opacity);
color: var(--text-color);
}
.@{ant-prefix}-picker-range-arrow::before {
background-color: var(--background-color);
}
}
// select
:global {
.@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input) .@{ant-prefix}-select-selector {
background-color: var(--background-color);
color: var(--text-color);
border-color: var(--border-color);
}
.@{ant-prefix}-select-item-option-active:not(.@{ant-prefix}-select-item-option-disabled) {
background-color: var(--primary-color);
color: var(--text-color);
}
.@{ant-prefix}-select-dropdown {
background-color: var(--background-color);
}
.@{ant-prefix}-select-item {
color: var(--text-color);
}
}
}
.@{history-view} {
height: 100%;
padding: @padding-md;
//background: ;
&-label {
position: relative;
width: 80px;
&::after {
position: absolute;
top: 0;
right: 7px;
content: ':';
}
}
.@{ant-prefix}-tabs-extra-content {
width: 82px;
white-space: nowrap;
}
.@{ant-prefix}-table-thead > tr > th {
background: rgba(224, 234, 251, 0.4) !important;
}
&-extra-right {
position: absolute;
...
...
@@ -71,7 +246,7 @@
}
.@{history-view}-spin,
.@{history-view}-spin
>
.@{ant-prefix}-spin-container,
.@{history-view}-spin
>
.@{ant-prefix}-spin-container,
.@{ant-prefix}-tabs,
.@{ant-prefix}-tabs-content,
.@{ant-prefix}-tabs-tabpane {
...
...
@@ -299,9 +474,11 @@
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
...
...
@@ -311,10 +488,12 @@
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
}
\ No newline at end of file
packages/extend-components/EC_HistoryView/src/theme.js
View file @
14e3cf6a
export
const
BI
=
{
"backgroundColor"
:
"
rgba(34,42,78,1)
"
,
"backgroundColor"
:
"
#282b34
"
,
"titleColor"
:
"#ffffff"
,
"subtitleColor"
:
"#dddddd"
,
"textColorShow"
:
false
,
...
...
packages/extend-components/EC_HistoryView/src/useBIMode.js
View file @
14e3cf6a
import
_
from
'lodash'
;
import
{
BISplitLineColor
,
BIAxisLableColor
,
BIAxisLabelColor
,
BIAxisLineColor
}
from
"./theme"
;
import
{
BISplitLineColor
,
BIAxisLableColor
,
BIAxisLabelColor
,
BIAxisLineColor
}
from
"./theme"
;
/**
* 1. 背景
...
...
@@ -24,7 +24,7 @@ const patchBIOption = (option, theme) => {
show
:
false
,
lineStyle
:
{
type
:
'solid'
,
color
:
'red'
color
:
BISplitLineColor
}
};
_opt
.
xAxis
.
axisLine
=
{
...
...
@@ -53,7 +53,7 @@ const patchBIOption = (option, theme) => {
show
:
false
,
lineStyle
:
{
type
:
'solid'
,
color
:
'red'
color
:
BISplitLineColor
}
};
item
.
splitLine
=
{
...
...
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