Skip to content

W
wisdom-components
Commit 248b5afc authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 发布测试

parent 2e574392
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 554 additions and 307 deletions
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ 248b5afc
import React, {memo, useEffect, useMemo, useRef} from 'react';
import {BasicChart} from '@wisdom-components/basicchart';
import PandaEmpty from '@wisdom-components/empty';
import optionGenerator, {
alarmMarkLine,
minMaxMarkPoint,
offlineArea,
specialTypeChartOptionGenerator,
statusChartOptionGenerator
} from './utils';
import {isArray, cloneDeep} from 'lodash';
import moment from "moment";
import patchBIOption from "./useBIMode";
import {BI, Normal} from './theme';
import * as echarts from 'echarts';
echarts.registerTheme('BI', BI)
echarts.registerTheme('Normal', Normal)
const SingleChart = memo((props) => {
const {
......@@ -25,7 +27,8 @@ const SingleChart = memo((props) => {
showBoxOption,
special,
predicateData,
emptyOrError
emptyOrError,
theme = "Normal"
} = props;
const chartRef = useRef();
const timerRef = useRef();
......@@ -69,6 +72,9 @@ const SingleChart = memo((props) => {
_option.yAxis.min = 0;
}
}
// 加入bi模式
if (theme === 'BI') _option = patchBIOption(_option, BI);
if (theme === 'BI') console.log(_option);
return _option;
}, [dataSource, smooth, curveCenter, chartType, predicateData]);
useEffect(() => {
......@@ -80,15 +86,7 @@ const SingleChart = memo((props) => {
const count = Object.values(selected || {}).filter((item) => item).length;
const option = cloneDeep(chart.getOption());
const needMarkLine = count === 1;
// 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
let _tempDataArray = dataSource.filter((item) => item.sensorName === '是否在线');
option.series.forEach((item, index) => {
let _data = _tempDataArray.find((offline) => offline.stationCode === item.stationCode);
let offlineAreas = offlineArea(_data);
if (offlineAreas.data?.length) {
option.markArea = null;
item.markArea = offlineAreas;
}
if (needMarkLine && selected[item.name]) {
item.markLine = alarmMarkLine(
dataSource[index],
......@@ -209,7 +207,7 @@ const SingleChart = memo((props) => {
offset: [0, -2]
},
itemStyle: {
color: "#21c8c3",
// color: "#21c8c3",
}
},
{
......@@ -224,7 +222,7 @@ const SingleChart = memo((props) => {
return [length, 32]
},
itemStyle: {
color: "#1980ff",
// color: "#1980ff",
},
label: {
color: '#fff',
......@@ -299,7 +297,7 @@ const SingleChart = memo((props) => {
minorSplitLine: {
show: showGridLine,
lineStyle: {
type: 'dashed',
// type: 'dashed',
},
},
splitLine: {
......@@ -317,22 +315,8 @@ const SingleChart = memo((props) => {
tooltip,
});
}, [showGridLine]);
// 找出最大最小，决定图表
// 数据都为空显示缺省页
const isEmpty = useMemo(
() =>
!dataSource ||
!dataSource.length ||
!dataSource.find((e) => e.dataModel && e.dataModel.length > 0),
[dataSource],
);
return <BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
/* return isEmpty ? (
<PandaEmpty/>
) : (
<BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
);*/
return <BasicChart theme={theme} ref={chartRef} option={option} notMerge
style={{width: '100%', height: '100%'}}/>
});
export default SingleChart;
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 248b5afc
import React from 'react';
import HistoryView from '../index';
import { MobileHistoryChart } from '../mobile';
import {MobileHistoryChart} from '../mobile';
/*const deviceParams = [
/!*10.182*!/
......@@ -211,80 +211,95 @@ import { MobileHistoryChart } from '../mobile';
];*/
const deviceParams = [
// 新乐，水厂数据异常的问题
/* {
{
"deviceCode": "SC00000004",
"sensors": "进水瞬时流量,1#出水瞬时流量,2#出水瞬时流量",
"deviceType": "水厂"
}*/
/* {
"deviceCode": "EGJZ00000073",
"sensors": "进水压力",
"deviceType": "二供机组"
}*/
/* {
"deviceCode": "EGJZ00000006",
"sensors": "进水压力",
"deviceType": "二供机组"
}*/
/* {
"deviceCode": "EGBF00000002",
"deviceType": "二供泵房",
"sensors": "进水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000005",
"sensors": "出水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000001",
"sensors": "出水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000004",
"sensors": "出水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000003",
"sensors": "出水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000002",
"sensors": "出水压力"
}*/
}
/* {
"deviceCode": "EGJZ00000073",
"sensors": "进水压力",
"deviceType": "二供机组"
}*/
/* {
"deviceCode": "EGJZ00000006",
"sensors": "进水压力",
"deviceType": "二供机组"
}*/
/* {
"deviceCode": "EGBF00000002",
"deviceType": "二供泵房",
"sensors": "进水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000005",
"sensors": "出水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000001",
"sensors": "出水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000004",
"sensors": "出水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000003",
"sensors": "出水压力"
},
{
"deviceType": "二供机组",
"deviceCode": "EGJZ00000002",
"sensors": "出水压力"
}*/
// 182:8088 报警设备
/* {
"deviceCode": "XMYL00000043",
"sensors": "进水压力",
"deviceType": "熊猫压力表"
}*/
/* {
"deviceCode": "LLJ00000001",
"sensors": "瞬时流量",
"deviceType": "流量计"
}*/
/* {
"deviceCode": "XMYL00000043",
"sensors": "进水压力",
"deviceType": "熊猫压力表"
}*/
/* {
"deviceCode": "LLJ00000001",
"sensors": "瞬时流量",
"deviceType": "流量计"
}*/
/* {
"deviceCode": "EGBF00000024",
// "deviceCode": "EGBF00000023",
"sensors": "进水压力",
"deviceType": "二供泵房"
}*/
]
const p1 = [
{
"deviceCode": "EGBF00000024",
// "deviceCode": "EGBF00000023",
"sensors": "进水压力",
"deviceType": "二供泵房"
"deviceCode": "SC00000004",
"sensors": "进水瞬时流量",
"deviceType": "水厂"
}
]
const Demo = () => {
return (
<>
<div>
<div style={{ height: 700 }}>
{/* <HistoryView deviceParams={deviceParams} defaultModel="table" /> */}
<HistoryView deviceParams={deviceParams} defaultModel="curve" />
</div>
</div>
</>
);
return (
<>
<div>
<div style={{height: 700}}>
{/* <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>
</>
);
};
export default Demo;
packages/extend-components/EC_HistoryView/src/index.js
View file @ 248b5afc
......@@ -39,7 +39,7 @@ import {
} from './apis';
import SingleChart from './SingleChart';
import GridChart from './GridChart';
import './index.less';
import {globalConfig} from 'antd/lib/config-provider';
import {getSensorType} from './apis/index';
import {ExportExcel} from '@wisdom-components/exportexcel';
......@@ -321,6 +321,10 @@ const HistoryView = (props) => {
const [completeInit, setCompleteInit] = useState(false);
const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('history-view');
const themeMap = {
Normal: `${prefixCls}-wrapper`,
BI: `${prefixCls}-BI-wrapper`
}
const {
title,
grid,
......@@ -331,7 +335,10 @@ const HistoryView = (props) => {
showModels,
needMarkLine,
defaultDate,
theme = "Normal"
} = props;
if (theme === 'Normal') import('./index.less')
if (theme === 'BI') import('./indexForBI.less');
const isBoxPlots =
deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',').length === 1;
const [loading, setLoading] = useState(null);
......@@ -1395,6 +1402,7 @@ const HistoryView = (props) => {
contrast={timeValue === 'contrast'}
contrastOption={contrastOption}
deviceAlarmSchemes={deviceAlarmSchemes}
theme={theme}
special={{
special1, // 频率业务
allPointAddress,
......@@ -1541,64 +1549,67 @@ const HistoryView = (props) => {
}
}, [loading]);
return (
<div className={classNames(prefixCls, 'wkt-scroll-light')}>
<div className={classNames(`${prefixCls}-spin`)} style={{position: 'relative'}}>
{loading || percent !== 0 ? (
<div className={classNames(`${prefixCls}-progressWrapper`)}>
{lineDataType === '原始曲线' ||
(lineDataType === '特征曲线' &&
moment(dateRange?.[0]?.dateTo).diff(moment(dateRange?.[0]?.dateFrom), 'days') >=
30) ?
<div className={classNames(`${prefixCls}-contentWrapper`)}>
<Progress
percent={percent}
steps={20}
className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
showInfo={false}
/>
<div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
</div> :
<Spin spinning={loading || false} tip={'数据加载中...'} delay={1000}
style={{background: 'transparent'}}/>
}
</div>
) : (
''
)}
{showModels.length === 1 && (
<div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
)}
{showModels.length > 1 && (
<Tabs
activeKey={activeTabKey}
onChange={(key) => setActiveTabKey(key)}
centered
tabBarExtraContent={{
left: <h3>{title}</h3>,
right: (
<div className={`${prefixCls}-extra-right`}>
{activeTabKey === 'table' && (
<>
<Button type="link" onClick={exportFeatureBtn}>
<DownloadOutlined/>
下载
</Button>
</>
)}
</div>
),
}}
>
<Tabs.TabPane key="curve" tab="曲线" forceRender={true}>
{activeTabKey === 'curve' ? renderPanel('curve') : ''}
</Tabs.TabPane>
<Tabs.TabPane key="table" tab="表格">
{renderPanel('table')}
</Tabs.TabPane>
</Tabs>
)}
<ConfigProvider theme={{primaryColor: 'red'}}>
<div className={classNames(prefixCls, 'wkt-scroll-light')}>
<div className={classNames(`${prefixCls}-spin`)} style={{position: 'relative'}}>
{loading || percent !== 0 ? (
<div className={classNames(`${prefixCls}-progressWrapper`)}>
{lineDataType === '原始曲线' ||
(lineDataType === '特征曲线' &&
moment(dateRange?.[0]?.dateTo).diff(moment(dateRange?.[0]?.dateFrom), 'days') >=
30) ?
<div className={classNames(`${prefixCls}-contentWrapper`)}>
<Progress
percent={percent}
steps={20}
className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
showInfo={false}
/>
<div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
</div> :
<Spin spinning={loading || false} tip={'数据加载中...'} delay={1000}
style={{background: 'transparent'}}/>
}
</div>
) : (
''
)}
{showModels.length === 1 && (
<div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
)}
{showModels.length > 1 && (
<Tabs
activeKey={activeTabKey}
onChange={(key) => setActiveTabKey(key)}
centered
tabBarExtraContent={{
left: <h3>{title}</h3>,
right: (
<div className={`${prefixCls}-extra-right`}>
{activeTabKey === 'table' && (
<>
<Button type="link" onClick={exportFeatureBtn}>
<DownloadOutlined/>
下载
</Button>
</>
)}
</div>
),
}}
>
<Tabs.TabPane key="curve" tab="曲线" forceRender={true}>
{activeTabKey === 'curve' ? renderPanel('curve') : ''}
</Tabs.TabPane>
<Tabs.TabPane key="table" tab="表格">
{renderPanel('table')}
</Tabs.TabPane>
</Tabs>
)}
</div>
</div>
</div>
</ConfigProvider>
);
};
......@@ -1618,6 +1629,7 @@ HistoryView.propTypes = {
defaultModel: PropTypes.oneOf(['curve', 'table']),
showModels: PropTypes.arrayOf(PropTypes.oneOf(['curve', 'table'])),
defaultDate: PropTypes.string,
BIMode: PropTypes.bool
};
HistoryView.defaultProps = {
......@@ -1629,6 +1641,7 @@ HistoryView.defaultProps = {
showModels: ['curve', 'table'],
needMarkLine: true,
defaultDate: 'day',
BIMode: false
};
export default HistoryView;
packages/extend-components/EC_HistoryView/src/index.less
View file @ 248b5afc
......@@ -22,9 +22,11 @@
width: 82px;
white-space: nowrap;
}
.@{ant-prefix}-table-thead > tr > th {
background: rgba(224, 234, 251,0.4)!important;
background: rgba(224, 234, 251, 0.4) !important;
}
&-extra-right {
position: absolute;
top: 10px;
......@@ -68,6 +70,7 @@
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.9);
.@{history-view}-progress {
display: inline-flex;
}
......@@ -250,6 +253,7 @@
margin-bottom: 0.3rem;
}
.@{history-view}-blink-2 {
-webkit-animation: blink-2 3s infinite both;
animation: blink-2 3s infinite both;
......
packages/extend-components/EC_HistoryView/src/indexForBI.less 0 → 100644
View file @ 248b5afc
@root-entry-name: 'default';
@import (reference) '~antd/es/style/themes/dark.less';
@history-view: ~'@{ant-prefix}-history-view';
@primary-color:red;
@outline-color:red;
.@{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;
top: 10px;
right: 20px;
// width: 82px;
}
.@{history-view}-spin,
.@{history-view}-spin > .@{ant-prefix}-spin-container,
.@{ant-prefix}-tabs,
.@{ant-prefix}-tabs-content,
.@{ant-prefix}-tabs-tabpane {
height: 100%;
}
.@{history-view}-progressWrapper {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.@{history-view}-header {
flex: none;
width: 100%;
height: 160px;
}
.@{history-view}-contentWrapper {
width: 100%;
z-index: 100;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.9);
.@{history-view}-progress {
display: inline-flex;
}
}
.@{history-view}-tip {
display: inline-block;
margin-top: 10px;
color: #1890ff;
}
}
.@{history-view}-single-panel {
display: flex;
flex-direction: column;
height: 100%;
}
.@{ant-prefix}-tabs-tabpane-active {
display: flex;
flex-direction: column;
}
}
.@{history-view}-date {
display: flex;
align-items: center;
white-space: nowrap;
.@{ant-prefix}-radio-group,
.@{ant-prefix}-select {
margin-right: 16px;
}
.anticon-plus-circle {
margin-left: 10px;
color: @primary-color;
font-size: 16px;
cursor: pointer;
}
}
.@{history-view}-contrast {
&-wrap {
position: relative;
cursor: pointer;
}
&-list {
display: flex;
align-items: center;
}
&-delete {
position: absolute;
top: -12px;
right: -8px;
.anticon.anticon-close-circle {
color: #d9d9d9;
background: white;
}
&:hover {
.anticon.anticon-close-circle {
color: rgba(0, 0, 0, 0.45);
background: white;
}
}
}
&-connect {
margin: 0 10px;
}
}
.@{history-view}-options {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-bottom: 10px;
column-gap: 20px;
row-gap: 10px;
}
.@{history-view}-cover {
display: flex;
align-items: center;
white-space: nowrap;
&-item {
margin-right: 8px;
}
}
.@{history-view}-content {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
overflow: hidden;
}
.@{history-view}-grid {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
padding: 4px;
overflow-y: auto;
background-color: #f0f2f5;
&-item {
width: 50%;
height: 50%;
padding: 4px;
&-title {
position: absolute;
top: 16px;
left: 20px;
z-index: 2;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&::before {
display: inline-block;
width: 5px;
height: 16px;
vertical-align: -0.2em;
background-color: @primary-color;
content: '';
}
&_text {
padding-left: 10px;
color: #333333;
font-weight: bold;
font-size: 15px;
font-family: 'Microsoft YaHei';
}
&_unit {
padding-left: 5px;
color: #999999;
font-size: 12px;
}
}
}
&-item-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
background-color: #fff;
border-radius: 4px;
}
}
.@{history-view}-question {
color: @primary-color;
cursor: pointer;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
.@{history-view}-item {
display: flex;
align-items: center;
margin-bottom: 0.3rem;
}
.@{history-view}-blink-2 {
-webkit-animation: blink-2 3s infinite both;
animation: blink-2 3s infinite both;
}
@-webkit-keyframes blink-2 {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
@keyframes blink-2 {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
packages/extend-components/EC_HistoryView/src/theme.js 0 → 100644
View file @ 248b5afc
This diff is collapsed.
packages/extend-components/EC_HistoryView/src/useBIMode.js 0 → 100644
View file @ 248b5afc
import _ from 'lodash';
import {BISplitLineColor, BIAxisLableColor, BIAxisLabelColor, BIAxisLineColor} from "./theme";
/**
* 1. 背景
* 2. 坐标轴、字体颜色
* 3. 分割线
* 4. legend的文字颜色
* 5. markPoint的颜色设置
* 6. tooltip 背景
* */
const patchBIOption = (option, theme) => {
let _opt = _.cloneDeep(option);
// 1. 修改legend颜色
if (_opt?.legend) {
_opt.legend.textStyle = {
...(_opt?.legend?.textStyle ?? {}),
color: theme.legendTextColor
}
}
//2. 分割线样式调整
_opt.xAxis.minorSplitLine = {
..._opt.xAxis.minorSplitLine,
show: false,
lineStyle: {
type: 'solid',
color: 'red'
}
};
_opt.xAxis.axisLine = {
..._opt.xAxis.axisLine,
show: true,
lineStyle: {
type: 'solid',
color: BIAxisLineColor
}
};
_opt.xAxis.splitLine = {
..._opt.xAxis.splitLine,
show: true,
lineStyle: {
type: 'solid',
color: BISplitLineColor
}
};
_opt.xAxis.axisLabel = {
..._opt.xAxis.axisLabel,
color: BIAxisLabelColor
};
_opt.yAxis.forEach(item => {
item.minorSplitLine = {
...item.minorSplitLine,
show: false,
lineStyle: {
type: 'solid',
color: 'red'
}
};
item.splitLine = {
...item.splitLine,
show: true,
lineStyle: {
type: 'solid',
color: BISplitLineColor
}
};
item.axisLabel = {
...item.axisLabel,
color: BIAxisLabelColor
};
item.axisLine = {
..._opt.xAxis.axisLine,
show: true,
lineStyle: {
type: 'solid',
color: BIAxisLineColor
}
};
})
return _opt;
};
export default patchBIOption;
packages/extend-components/EC_HistoryView/src/utils.js
View file @ 248b5afc
......@@ -7,7 +7,6 @@ import lineChart from '@wisdom-components/basicchart/es/LineChart';
import * as echarts from 'echarts';
/** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
const AXIS_WIDTH = 40;
const COLOR = {
NORMAL: '#1685FF',
UPER: '#fa8c16',
......@@ -187,104 +186,6 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
data,
};
};
export const minMaxMarkPointForPredicateDevice = (dataItem, index, dateSource) => {
return {
symbol: 'circle',
animation: false,
label: {
show: false
},
symbolSize: 10,
data: [
{type: 'max', itemStyle: {color: '#dc5a5a'}},
{type: 'min', itemStyle: {color: '#62b659'}}
]
};
}
export const minMaxMarkPoint = (dataItem, index, dataSource) => {
// 只有一个数据曲线时显示markline
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 = [
{
type: 'min',
color: 'rgba(255,255,255,1)',
name: '最小: ',
// symbol: `image://${minIcon}`,
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',
name: '最大: ',
position: [20, 200],
// 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 {
symbol: 'circle',
symbolSize: 20,
label: {
show: true,
},
data,
};
};
/**
* 坐标轴添加网格线配置
......@@ -295,7 +196,7 @@ export const decorateAxisGridLine = (axis, showGrid) => {
if (!axis) return;
axis.minorTick = {
lineStyle: {
color: '#e2e2e2',
// color: '#e2e2e2',
},
...(axis.minorTick || {}),
show: showGrid,
......@@ -303,8 +204,8 @@ export const decorateAxisGridLine = (axis, showGrid) => {
};
axis.minorSplitLine = {
lineStyle: {
color: '#e2e2e2',
type: 'dashed',
// color: '#e2e2e2',
// type: 'dashed',
},
...(axis.minorSplitLine || {}),
show: showGrid,
......@@ -315,44 +216,6 @@ export const decorateAxisGridLine = (axis, showGrid) => {
};
};
/**
* 坐标轴添加离线区间
*
* @param {any} dataItem
*/
export const offlineArea = (dataItem) => {
if (!dataItem) return {};
const {dataModel} = dataItem;
let datas = new Array();
let offlineData = [];
let hasOffline = false;
dataModel.forEach((item, index) => {
if (!item.pv && !hasOffline) {
offlineData = [
{
name: '离线',
xAxis: new Date(item.pt),
label: {show: !datas?.length},
},
];
hasOffline = true;
} else if (item.pv && hasOffline) {
offlineData.push({
xAxis: new Date(item.pt),
});
datas.push(offlineData);
offlineData = [];
hasOffline = false;
}
});
return {
itemStyle: {
color: '#eee',
opacity: 0.6,
},
data: datas,
};
};
// tooltip 模板
const headTemplate = (param, opt) => {
if (!param) return '';
......@@ -792,13 +655,13 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
},
minorTick: {
lineStyle: {
color: '#e2e2e2',
// color: '#e2e2e2',
},
},
minorSplitLine: {
lineStyle: {
color: '#e2e2e2',
type: 'dashed',
// color: '#e2e2e2',
// type: 'dashed',
},
},
};
......@@ -1453,15 +1316,15 @@ const specialTypeChartOptionGenerator = ({
},
minorTick: {
lineStyle: {
color: '#e2e2e2',
// color: '#e2e2e2',
},
show: true,
splitNumber: 2,
},
minorSplitLine: {
lineStyle: {
color: '#e2e2e2',
type: 'dashed',
// color: '#e2e2e2',
// type: 'dashed',
},
show: true,
},
......@@ -1477,15 +1340,15 @@ const specialTypeChartOptionGenerator = ({
},
minorTick: {
lineStyle: {
color: '#e2e2e2',
// color: '#e2e2e2',
},
show: true,
splitNumber: 2,
},
minorSplitLine: {
lineStyle: {
color: '#e2e2e2',
type: 'dashed',
// color: '#e2e2e2',
// type: 'dashed',
},
show: true,
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment