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
d09dcf16
Commit
d09dcf16
authored
Mar 11, 2024
by
陈龙
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 修改markPoint交互样式
parent
537a8e1f
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
193 additions
and
62 deletions
+193
-62
SingleChart.js
packages/extend-components/EC_HistoryView/src/SingleChart.js
+0
-0
111-01.svg
...es/extend-components/EC_HistoryView/src/assets/111-01.svg
+15
-0
111-02.svg
...es/extend-components/EC_HistoryView/src/assets/111-02.svg
+15
-0
111-03.svg
...es/extend-components/EC_HistoryView/src/assets/111-03.svg
+15
-0
最大实心右1.svg
...es/extend-components/EC_HistoryView/src/assets/最大实心右1.svg
+15
-0
index.js
packages/extend-components/EC_HistoryView/src/demos/index.js
+4
-4
index.js
packages/extend-components/EC_HistoryView/src/index.js
+37
-27
utils.js
packages/extend-components/EC_HistoryView/src/utils.js
+92
-31
No files found.
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @
d09dcf16
This diff is collapsed.
Click to expand it.
packages/extend-components/EC_HistoryView/src/assets/111-01.svg
0 → 100644
View file @
d09dcf16
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
version=
"1.1"
id=
"图层_1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
x=
"0px"
y=
"0px"
width=
"51.126px"
height=
"24.8px"
viewBox=
"0 0 51.126 24.8"
enable-background=
"new 0 0 51.126 24.8"
xml:space=
"preserve"
>
<g>
<g>
<g>
<g>
<path
fill=
"none"
stroke=
"#1685FF"
stroke-width=
"0.5"
stroke-linecap=
"round"
d=
"M45.677,23.151h-39c-1.7,0-3-1.3-3-3v-10
c0-1.7-0.2-7-0.2-7l6.7,4h35.5c1.7,0,3,1.3,3,3v10C48.677,21.751,47.277,23.151,45.677,23.151z"
/>
</g>
</g>
</g>
</g>
</svg>
packages/extend-components/EC_HistoryView/src/assets/111-02.svg
0 → 100644
View file @
d09dcf16
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
version=
"1.1"
id=
"图层_1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
x=
"0px"
y=
"0px"
width=
"51.126px"
height=
"24.8px"
viewBox=
"0 0 51.126 24.8"
enable-background=
"new 0 0 51.126 24.8"
xml:space=
"preserve"
>
<g>
<g>
<g>
<g>
<path
fill=
"none"
stroke=
"#1685FF"
stroke-width=
"0.5"
stroke-linecap=
"round"
d=
"M48.677,6.151v10c0,1.7-1.3,3-3,3h-35.5
l-6.7,4c0,0,0.2-5.3,0.2-7v-10c0-1.7,1.3-3,3-3h39C47.277,3.151,48.677,4.551,48.677,6.151z"
/>
</g>
</g>
</g>
</g>
</svg>
packages/extend-components/EC_HistoryView/src/assets/111-03.svg
0 → 100644
View file @
d09dcf16
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
version=
"1.1"
id=
"图层_1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
x=
"0px"
y=
"0px"
width=
"51.126px"
height=
"24.8px"
viewBox=
"0 0 51.126 24.8"
enable-background=
"new 0 0 51.126 24.8"
xml:space=
"preserve"
>
<g>
<g>
<g>
<g>
<path
fill=
"none"
stroke=
"#1685FF"
stroke-width=
"0.5"
stroke-linecap=
"round"
d=
"M3.477,20.151v-10c0-1.7,1.3-3,3-3h35.5l6.7-4
c0,0-0.2,5.3-0.2,7v10c0,1.7-1.3,3-3,3h-39C4.877,23.151,3.477,21.751,3.477,20.151z"
/>
</g>
</g>
</g>
</g>
</svg>
packages/extend-components/EC_HistoryView/src/assets/最大实心右1.svg
0 → 100644
View file @
d09dcf16
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
version=
"1.1"
id=
"图层_1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
x=
"0px"
y=
"0px"
width=
"51.126px"
height=
"24.8px"
viewBox=
"0 0 51.126 24.8"
enable-background=
"new 0 0 51.126 24.8"
xml:space=
"preserve"
>
<g>
<g>
<g>
<g>
<path
fill=
"none"
stroke=
"#1685FF"
stroke-width=
"0.5"
stroke-linecap=
"round"
d=
"M6.477,3.151h39c1.7,0,3,1.3,3,3v10
c0,1.7,0.2,7,0.2,7l-6.7-4h-35.5c-1.7,0-3-1.3-3-3v-10C3.477,4.551,4.877,3.151,6.477,3.151z"
/>
</g>
</g>
</g>
</g>
</svg>
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @
d09dcf16
...
@@ -192,16 +192,16 @@ import { MobileHistoryChart } from '../mobile';
...
@@ -192,16 +192,16 @@ import { MobileHistoryChart } from '../mobile';
];*/
];*/
const
deviceParams
=
[
const
deviceParams
=
[
// 预测的
// 预测的
{
/*
{
"deviceCode": "YLB00000041",
"deviceCode": "YLB00000041",
"sensors": "进水压力",
"sensors": "进水压力",
"deviceType": "压力表"
"deviceType": "压力表"
},
},
*/
/*
{
{
"deviceCode"
:
"SSBF00000001"
,
"deviceCode"
:
"SSBF00000001"
,
"sensors"
:
"出水压力"
,
"sensors"
:
"出水压力"
,
"deviceType"
:
"送水泵房"
"deviceType"
:
"送水泵房"
}
*/
}
//预测结束
//预测结束
/* {
/* {
"deviceCode": "EGBF00000141",
"deviceCode": "EGBF00000141",
...
...
packages/extend-components/EC_HistoryView/src/index.js
View file @
d09dcf16
...
@@ -75,6 +75,12 @@ const timeList = [
...
@@ -75,6 +75,12 @@ const timeList = [
name
:
'近1月'
,
name
:
'近1月'
,
},
},
];
];
const
predicateMap
=
{
twelveHours
:
12
,
roundClock
:
24
,
oneWeek
:
24
,
oneMonth
:
24
}
// 同期对比 日 快捷按钮
// 同期对比 日 快捷按钮
const
shortcutsForDay
=
[
const
shortcutsForDay
=
[
...
@@ -139,7 +145,7 @@ const CheckboxData = [
...
@@ -139,7 +145,7 @@ const CheckboxData = [
checked
:
true
,
checked
:
true
,
showInCurve
:
false
,
showInCurve
:
false
,
showInTable
:
true
,
showInTable
:
true
,
}
,
}
];
];
const
timeIntervalList
=
[
const
timeIntervalList
=
[
...
@@ -205,7 +211,11 @@ const timeIntervalList = [
...
@@ -205,7 +211,11 @@ const timeIntervalList = [
},
},
];
];
const
updateTime
=
(
key
)
=>
{
const
handleTimeForPredicate
=
(
key
,
start
,
end
)
=>
{
let
t
=
predicateMap
[
key
]
||
0
;
return
moment
(
end
).
add
(
t
,
'hours'
).
format
(
timeFormat
);
};
const
updateTime
=
(
key
,
predicate
)
=>
{
let
start
=
''
;
let
start
=
''
;
let
end
=
''
;
let
end
=
''
;
...
@@ -236,6 +246,10 @@ const updateTime = (key) => {
...
@@ -236,6 +246,10 @@ const updateTime = (key) => {
break
;
break
;
}
}
}
}
if
(
predicate
)
{
end
=
handleTimeForPredicate
(
key
,
end
)
}
return
[
return
[
{
{
dateFrom
:
start
,
dateFrom
:
start
,
...
@@ -339,6 +353,7 @@ const HistoryView = (props) => {
...
@@ -339,6 +353,7 @@ const HistoryView = (props) => {
const
[
isSingleStatusSensor
,
setIsSingleStatusSensor
]
=
useState
(
false
);
const
[
isSingleStatusSensor
,
setIsSingleStatusSensor
]
=
useState
(
false
);
const
[
predicateDevice
,
setPredicateDevice
]
=
useState
(
null
);
const
[
predicateDevice
,
setPredicateDevice
]
=
useState
(
null
);
const
[
predicateData
,
setPredicateData
]
=
useState
([]);
const
[
predicateData
,
setPredicateData
]
=
useState
([]);
const
[
predicateTime
,
setPredicateTime
]
=
useState
(
null
);
// 历史数据相关的特征描述
// 历史数据相关的特征描述
const
deviceConfig
=
useRef
({
const
deviceConfig
=
useRef
({
oneDevice
:
deviceParams
.
length
===
1
,
//单设备
oneDevice
:
deviceParams
.
length
===
1
,
//单设备
...
@@ -357,7 +372,7 @@ const HistoryView = (props) => {
...
@@ -357,7 +372,7 @@ const HistoryView = (props) => {
// 选择的时间范围值
// 选择的时间范围值
const
dateRange
=
useMemo
(()
=>
{
const
dateRange
=
useMemo
(()
=>
{
if
(
timeValue
===
'customer'
)
{
if
(
timeValue
===
'customer'
)
{
return
updateTime
(
customerChecked
||
customerTime
);
return
updateTime
(
customerChecked
||
customerTime
,
predicateDevice
);
}
else
{
}
else
{
let
_dateArr
=
shortcutsValue
?
shortcutsDatePickerArr
:
datePickerArr
;
let
_dateArr
=
shortcutsValue
?
shortcutsDatePickerArr
:
datePickerArr
;
return
handleBatchTime
(
_dateArr
,
contrastOption
);
return
handleBatchTime
(
_dateArr
,
contrastOption
);
...
@@ -406,11 +421,8 @@ const HistoryView = (props) => {
...
@@ -406,11 +421,8 @@ const HistoryView = (props) => {
// 自定义模式: 快速选择
// 自定义模式: 快速选择
const
onCustomerTimeChange
=
(
key
)
=>
{
const
onCustomerTimeChange
=
(
key
)
=>
{
/* if (key === 'oneMonth' && lineDataType === '原始曲线') {
setLineDataType('特征曲线');
message.info('月模式数据量较大,不支持原始曲线模式,已切换为特征曲线')
}*/
setCustomerChecked
(
key
);
setCustomerChecked
(
key
);
setPredicateTime
(
predicateMap
[
key
]);
!!
customerTime
&&
setCustomerTime
(
null
);
!!
customerTime
&&
setCustomerTime
(
null
);
};
};
...
@@ -559,10 +571,6 @@ const HistoryView = (props) => {
...
@@ -559,10 +571,6 @@ const HistoryView = (props) => {
format
=
{
'YYYY-MM-DD HH:mm'
}
format
=
{
'YYYY-MM-DD HH:mm'
}
onChange
=
{
onCustomerTimeChange
}
onChange
=
{
onCustomerTimeChange
}
value
=
{
customerChecked
}
value
=
{
customerChecked
}
/* dataSource={timeList.filter(item => {
if (lineDataType === '原始曲线') return item.key !== 'oneMonth';
return true
})}*/
dataSource
=
{
timeList
}
dataSource
=
{
timeList
}
/
>
/
>
<
RangePicker
<
RangePicker
...
@@ -659,7 +667,6 @@ const HistoryView = (props) => {
...
@@ -659,7 +667,6 @@ const HistoryView = (props) => {
// 曲线设置项选择/取消
// 曲线设置项选择/取消
const
onCheckboxChange
=
(
e
,
key
,
showJustLine
)
=>
{
const
onCheckboxChange
=
(
e
,
key
,
showJustLine
)
=>
{
let
data
=
[...
checkboxData
];
let
data
=
[...
checkboxData
];
// let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示
let
_index1
=
data
.
findIndex
((
item
)
=>
item
.
key
===
'ignoreOutliers'
);
// 仅查看曲线会在勾选了数据滤波后展示
let
_index1
=
data
.
findIndex
((
item
)
=>
item
.
key
===
'ignoreOutliers'
);
// 仅查看曲线会在勾选了数据滤波后展示
data
.
forEach
((
item
)
=>
{
data
.
forEach
((
item
)
=>
{
if
(
item
.
key
===
key
)
{
if
(
item
.
key
===
key
)
{
...
@@ -667,14 +674,7 @@ const HistoryView = (props) => {
...
@@ -667,14 +674,7 @@ const HistoryView = (props) => {
}
}
});
});
if
(
key
===
'ignoreOutliers'
)
{
if
(
key
===
'ignoreOutliers'
)
{
// 需求变更,仅查看曲线剔除
/* if (showJustLine) {
data[_index].showInCurve = e.target.checked;
data[_index].checked = e.target.checked;
} else {*/
data
[
_index1
].
showInCurve
=
true
;
data
[
_index1
].
showInCurve
=
true
;
// data[_index1].checked = false;
// }
}
}
if
(
key
===
'chartType'
)
{
if
(
key
===
'chartType'
)
{
...
@@ -754,7 +754,6 @@ const HistoryView = (props) => {
...
@@ -754,7 +754,6 @@ const HistoryView = (props) => {
<
Radio
.
Button
value
=
{
'特征曲线'
}
>
特征曲线
<
/Radio.Button
>
<
Radio
.
Button
value
=
{
'特征曲线'
}
>
特征曲线
<
/Radio.Button
>
<
Radio
.
Button
value
=
{
'原始曲线'
}
>
原始曲线
<
/Radio.Button
>
<
Radio
.
Button
value
=
{
'原始曲线'
}
>
原始曲线
<
/Radio.Button
>
<
/Radio.Group
>
<
/Radio.Group
>
{
/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/
}
<
Tooltip
title
=
{
'原始曲线数据量较大,单次查询最多展示1万条数据'
}
>
<
Tooltip
title
=
{
'原始曲线数据量较大,单次查询最多展示1万条数据'
}
>
<
QuestionCircleFilled
<
QuestionCircleFilled
style
=
{{
marginLeft
:
6
}}
style
=
{{
marginLeft
:
6
}}
...
@@ -1125,7 +1124,7 @@ const HistoryView = (props) => {
...
@@ -1125,7 +1124,7 @@ const HistoryView = (props) => {
if
(
!
_isNaN
&&
_num
>=
12
)
_finalParams
.
isInterpolation
=
false
;
if
(
!
_isNaN
&&
_num
>=
12
)
_finalParams
.
isInterpolation
=
false
;
}
}
// 2024年1月23日 增加预测曲线,单设备单曲线
// 2024年1月23日 增加预测曲线,单设备单曲线
// 同期对比不允许、多设备的不允许
// 同期对比不允许、多设备的不允许
预测
if
(
dateRange
.
length
===
1
&&
predicateDevice
)
{
if
(
dateRange
.
length
===
1
&&
predicateDevice
)
{
_finalParams
.
acrossTables
.
push
(
predicateDevice
);
_finalParams
.
acrossTables
.
push
(
predicateDevice
);
}
}
...
@@ -1393,13 +1392,29 @@ const HistoryView = (props) => {
...
@@ -1393,13 +1392,29 @@ const HistoryView = (props) => {
let
_res1
=
result
[
1
];
let
_res1
=
result
[
1
];
let
_res2
=
result
[
2
];
let
_res2
=
result
[
2
];
let
_res3
=
result
[
3
];
let
_res3
=
result
[
3
];
let
_checkboxData
=
[...
checkboxData
];
// 单设备单曲线时,查询是否配置为预测点
if
(
_res3
.
code
===
0
&&
_res3
.
data
)
{
// 1. 如果是单曲线,并且配置了预测,那么默认开启预测;
// 2024年3月11日 物联预测功能支撑后,再开发这部分
/* _checkboxData.push({
key: 'predicate',
label: '数据预测',
checked: true,
showInCurve: true,
showInTable: true,
})*/
setPredicateDevice
({...
_res3
.
data
,
deviceType
:
'预测'
});
}
else
{
setPredicateDevice
(
null
);
}
// 查字典配置
// 查字典配置
if
(
_res0
.
code
===
0
)
{
if
(
_res0
.
code
===
0
)
{
let
_opt
=
_res0
.
data
.
reduce
((
final
,
cur
)
=>
{
let
_opt
=
_res0
.
data
.
reduce
((
final
,
cur
)
=>
{
final
[
cur
.
fieldName
]
=
cur
.
fieldValue
;
final
[
cur
.
fieldName
]
=
cur
.
fieldValue
;
return
final
;
return
final
;
},
{});
},
{});
let
_checkboxData
=
[...
checkboxData
]
.
map
((
item
)
=>
{
_checkboxData
=
_checkboxData
.
map
((
item
)
=>
{
let
_item
=
{...
item
};
let
_item
=
{...
item
};
if
(
_opt
[
item
.
label
]
!==
undefined
)
{
if
(
_opt
[
item
.
label
]
!==
undefined
)
{
_item
.
checked
=
_opt
[
item
.
label
]
===
'true'
;
_item
.
checked
=
_opt
[
item
.
label
]
===
'true'
;
...
@@ -1429,16 +1444,11 @@ const HistoryView = (props) => {
...
@@ -1429,16 +1444,11 @@ const HistoryView = (props) => {
// 标记sensor是什么类型的
// 标记sensor是什么类型的
if
(
_res2
.
code
===
0
)
{
if
(
_res2
.
code
===
0
)
{
setAllSensorType
(
_res2
.
data
);
setAllSensorType
(
_res2
.
data
);
let
_sensorID
=
_res1
.
data
?.
find
((
item
)
=>
item
.
name
===
sensors
)?.
sensorTypeID
;
let
_sensorID
=
_res1
.
data
?.
find
((
item
)
=>
item
.
name
===
sensors
)?.
sensorTypeID
;
let
_sensor
=
_res2
.
data
?.
find
((
item
)
=>
item
.
id
===
_sensorID
)?.
type
;
let
_sensor
=
_res2
.
data
?.
find
((
item
)
=>
item
.
id
===
_sensorID
)?.
type
;
let
_isStatusSensor
=
[
'状态值'
,
'开关值'
].
includes
(
_sensor
);
let
_isStatusSensor
=
[
'状态值'
,
'开关值'
].
includes
(
_sensor
);
setIsSingleStatusSensor
(
_isStatusSensor
);
setIsSingleStatusSensor
(
_isStatusSensor
);
}
}
// 单设备单曲线的设定加载
if
(
_res3
.
code
===
0
&&
_res3
.
data
)
{
setPredicateDevice
({...
_res3
.
data
,
deviceType
:
'预测'
});
}
}
}
});
});
setCompleteInit
(
true
);
setCompleteInit
(
true
);
...
...
packages/extend-components/EC_HistoryView/src/utils.js
View file @
d09dcf16
...
@@ -34,26 +34,26 @@ export const handlePx = (num, unit = '') => {
...
@@ -34,26 +34,26 @@ export const handlePx = (num, unit = '') => {
return
unit
?
`
${
_num
}${
unit
}
`
:
Number
(
_num
);
return
unit
?
`
${
_num
}${
unit
}
`
:
Number
(
_num
);
};
};
const
PC_OPTION
=
{
const
PC_OPTION
=
{
markPoint
:
{
//
markPoint: {
padding
:
[
2
,
12
],
//
padding: [2, 12],
lineHeight
:
22
,
//
lineHeight: 22,
backgroundColor
:
//
backgroundColor:
window
.
globalConfig
&&
window
.
globalConfig
&&
window
.
globalConfig
.
variableTheme
?.
primaryColor
//
window.globalConfig && window.globalConfig && window.globalConfig.variableTheme?.primaryColor
?
window
.
globalConfig
.
variableTheme
.
primaryColor
//
? window.globalConfig.variableTheme.primaryColor
:
'#0087F7'
,
//
: '#0087F7',
borderWidth
:
1
,
//
borderWidth: 1,
},
//
},
fontSize
:
16
,
fontSize
:
16
,
fontColor
:
'#ffffff'
,
fontColor
:
'#ffffff'
,
dataZoomHeight
:
28
,
dataZoomHeight
:
28
,
};
};
const
MOBILE_OPTION
=
{
const
MOBILE_OPTION
=
{
markPoint
:
{
//
markPoint: {
padding
:
[
2
,
6
],
//
padding: [2, 6],
lineHeight
:
18
,
//
lineHeight: 18,
backgroundColor
:
'rgba(255,255,255,0.6)'
,
//
backgroundColor: 'rgba(255,255,255,0.6)',
borderWidth
:
0
,
//
borderWidth: 0,
},
//
},
fontSize
:
handlePx
(
12
),
fontSize
:
handlePx
(
12
),
fontColor
:
'#0087F7'
,
fontColor
:
'#0087F7'
,
dataZoomHeight
:
20
,
dataZoomHeight
:
20
,
...
@@ -92,9 +92,14 @@ const dataAccessor = (data, contrast, contrastOption) => {
...
@@ -92,9 +92,14 @@ const dataAccessor = (data, contrast, contrastOption) => {
const
formatStr
=
contrastOption
===
'day'
?
'2020-01-01 HH:mm:ss'
:
'2020-01-DD HH:mm:ss'
;
const
formatStr
=
contrastOption
===
'day'
?
'2020-01-01 HH:mm:ss'
:
'2020-01-DD HH:mm:ss'
;
return
dataModel
return
dataModel
.
filter
((
item
)
=>
item
.
sensorName
!==
'是否在线'
)
.
filter
((
item
)
=>
item
.
sensorName
!==
'是否在线'
)
.
map
((
item
)
=>
{
.
map
((
item
,
index
)
=>
{
const
time
=
contrast
?
moment
(
item
.
pt
).
format
(
formatStr
)
:
item
.
pt
;
const
time
=
contrast
?
moment
(
item
.
pt
).
format
(
formatStr
)
:
item
.
pt
;
return
[
moment
(
time
).
valueOf
(),
item
.
pv
];
let
_v
=
item
.
pv
;
// if (index === 0) _v = _v * 10000 * 10000 * 10000;
// if (index === dataModel.lastIndex) _v = _v / (10000 * 10000 * 10000);
// if (index === 0) _v = _v * 2;
// if (index === dataModel.lastIndex) _v = _v / 2;
return
[
moment
(
time
).
valueOf
(),
_v
];
});
});
};
};
...
@@ -197,30 +202,86 @@ export const minMaxMarkPointForPredicateDevice = (dataItem, index, dateSource) =
...
@@ -197,30 +202,86 @@ export const minMaxMarkPointForPredicateDevice = (dataItem, index, dateSource) =
};
};
}
}
export
const
minMaxMarkPoint
=
(
dataItem
,
index
,
dataSource
)
=>
{
export
const
minMaxMarkPoint
=
(
dataItem
,
index
,
dataSource
)
=>
{
const
_isMobile
=
isMobile
();
// 只有一个数据曲线时显示markline
// 只有一个数据曲线时显示markline
if
(
!
dataItem
||
dataSource
.
length
!==
1
)
return
{};
if
(
!
dataItem
||
dataSource
.
length
!==
1
)
return
{};
// 查询最大最小
let
valueArr
=
dataSource
[
0
].
dataModel
;
valueArr
=
valueArr
.
map
(
item
=>
item
.
pt
);
let
maxValue
=
Math
.
max
(...
valueArr
);
let
minValue
=
Math
.
min
(...
valueArr
);
let
maxValueIndex
=
valueArr
.
findIndex
(
val
=>
val
===
maxValue
);
let
minValueIndex
=
valueArr
.
findIndex
(
val
=>
val
===
minValue
);
let
whichOneAlignRight
=
maxValueIndex
<
minValueIndex
?
'min'
:
'max'
;
let
direction
=
maxValueIndex
<
minValueIndex
?
'left'
:
'right'
;
let
maxConfig
=
{},
minConfig
=
{};
if
(
whichOneAlignRight
===
'max'
)
{
}
const
data
=
[
const
data
=
[
{
{
type
:
'min'
,
type
:
'min'
,
value
:
null
,
color
:
'rgba(255,255,255,1)'
,
name
:
'最小: '
,
name
:
'最小: '
,
symbol
:
`image://
${
minIcon
}
`
,
// symbol: `image://${minIcon}`,
symbolOffset
:
[
0
,
18
],
symbolOffset
:
[
0
,
-
20
],
symbol
:
(
value
,
params
)
=>
{
// console.log(value)
// console.log(params)
return
'path://M131.999 849.579h1112.064c34.128 0 61.781-27.662 61.781-61.781v-473.658c0-34.118-27.653-61.781-61.781-61.781h-472.801l-83.231-144.155-83.231 144.155h-472.801c-34.128 0-61.781 27.663-61.781 61.781v473.658c0 34.118 27.653 61.781 61.781 61.781z'
;
// return 'path://M6.477,3.151h39c1.7,0,3,1.3,3,3v10c0,1.7,0.2,7,0.2,7l-6.7-4h-35.5c-1.7,0-3-1.3-3-3v-10C3.477,4.551,4.877,3.151,6.477,3.151z';
// return 'path://M45.677,23.151h-39c-1.7,0-3-1.3-3-3v-10c0-1.7-0.2-7-0.2-7l6.7,4h35.5c1.7,0,3,1.3,3,3v10C48.677,21.751,47.277,23.151,45.677,23.151z';
},
symbolSize
:
(
e
)
=>
{
let
str
=
!
[
undefined
,
null
].
includes
(
e
)
?
String
(
e
)
:
''
;
let
length
=
80
+
str
.
length
*
5
return
[
length
,
40
]
},
label
:
{
show
:
true
,
color
:
'#fff'
,
formatter
:
'最小: {c}'
,
fontSize
:
14
,
fontWeight
:
'bold'
,
verticalAlign
:
'top'
},
itemStyle
:
{
color
:
"#21c8c3"
,
}
},
},
{
{
type
:
'max'
,
type
:
'max'
,
value
:
null
,
name
:
'最大: '
,
name
:
'最大: '
,
symbol
:
`image://
${
maxIcon
}
`
,
position
:
[
20
,
200
],
symbolOffset
:
[
0
,
-
16
],
// symbol: `image://${maxIcon}`,
symbol
:
`path://M1233.329493 195.75466633h-1112.064c-34.128213 0-61.781333 27.661653-61.781333 61.781334v473.658026c0 34.117973 27.65312 61.781333 61.781333 61.781334h472.80128l83.23072 144.155306 83.23072-144.155306h472.80128c34.128213 0 61.781333-27.66336 61.781334-61.781334V257.53600033c0-34.117973-27.65312-61.781333-61.781334-61.781334z`
,
symbolOffset
:
[
0
,
-
20
],
symbolSize
:
(
e
)
=>
{
let
str
=
!
[
undefined
,
null
].
includes
(
e
)
?
String
(
e
)
:
''
;
let
length
=
80
+
str
.
length
*
5
return
[
length
,
40
]
},
itemStyle
:
{
color
:
"#1980ff"
,
},
label
:
{
color
:
'#fff'
,
fontSize
:
14
,
fontWeight
:
'bold'
,
show
:
true
,
formatter
:
'最大: {c}'
,
offset
:
[
0
,
-
4
]
}
},
},
{
name
:
''
,
type
:
'max'
,
symbol
:
'emptyCircle'
,
label
:
{
show
:
false
},
symbolSize
:
6
},
{
name
:
''
,
type
:
'min'
,
symbol
:
'emptyCircle'
,
label
:
{
show
:
false
},
symbolSize
:
6
}
];
];
return
{
return
{
symbol
:
'circle'
,
symbolSize
:
20
,
label
:
{
label
:
{
show
:
fals
e
,
show
:
tru
e
,
},
},
symbolSize
:
[
49
,
31
],
data
,
data
,
};
};
};
};
...
@@ -556,10 +617,10 @@ const returnXAxis = ({
...
@@ -556,10 +617,10 @@ const returnXAxis = ({
let markLine = showMarkLine
let markLine = showMarkLine
? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes)
? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes)
: {};
: {};
let markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
// let markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
let markPoint = {};
let _lineStyle = {};
let _lineStyle = {};
if (item.deviceType === '预测' && chartType === 'lineChart') {
if (item.deviceType === '预测' && chartType === 'lineChart') {
// markPoint = minMaxMarkPointForPredicateDevice(item, index, dataSource);
markPoint = null;
markPoint = null;
markLine = null;
markLine = null;
_lineStyle = {
_lineStyle = {
...
@@ -571,7 +632,6 @@ const returnXAxis = ({
...
@@ -571,7 +632,6 @@ const returnXAxis = ({
}
}
}
}
}
}
// 需求新增:增加频率业务
return {
return {
notMerge: true,
notMerge: true,
name,
name,
...
@@ -1241,7 +1301,8 @@ const optionGenerator = (
...
@@ -1241,7 +1301,8 @@ const optionGenerator = (
}
}
}
}
// 单曲线需要标记最大值、最小值的情况下,需要增加自定义的series,将最大最小值显示在图表上
// 单曲线需要标记最大值、最小值的情况下,需要增加自定义的series,将最大最小值显示在图表上
if
(
dataSource
?.[
0
]?.
dataModel
?.
length
&&
chartType
===
'lineChart'
)
{
// 2024年3月11日 废弃在图表左上角标记最大值最小值的做法,采用在图表中标记并显示出值的做法。注释暂时保留 edit by chenlong
/* if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') {
let _dataSource = dataSource?.filter((item) => item?.dataModel?.length);
let _dataSource = dataSource?.filter((item) => item?.dataModel?.length);
if (_dataSource?.length) {
if (_dataSource?.length) {
let _customSeries = returnCustomSeries(dataSource);
let _customSeries = returnCustomSeries(dataSource);
...
@@ -1249,7 +1310,7 @@ const optionGenerator = (
...
@@ -1249,7 +1310,7 @@ const optionGenerator = (
series.push(_customSeries);
series.push(_customSeries);
}
}
}
}
}
}*/
}
else
{
}
else
{
tooltip
=
tooltipAccessor
(
tooltip
=
tooltipAccessor
(
series
.
map
((
item
)
=>
item
.
unit
),
series
.
map
((
item
)
=>
item
.
unit
),
...
...
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