Skip to content

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

feat: 发布测试

parent 2e574392
Hide whitespace changes
Inline Side-by-side
Showing with 891 additions and 307 deletions
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ 248b5afc
import React, {memo, useEffect, useMemo, useRef} from 'react'; import React, {memo, useEffect, useMemo, useRef} from 'react';
import {BasicChart} from '@wisdom-components/basicchart'; import {BasicChart} from '@wisdom-components/basicchart';
import PandaEmpty from '@wisdom-components/empty';
import optionGenerator, { import optionGenerator, {
alarmMarkLine, alarmMarkLine,
minMaxMarkPoint,
offlineArea,
specialTypeChartOptionGenerator, specialTypeChartOptionGenerator,
statusChartOptionGenerator
} from './utils'; } from './utils';
import {isArray, cloneDeep} from 'lodash'; import {isArray, cloneDeep} from 'lodash';
import moment from "moment"; 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 SingleChart = memo((props) => {
const { const {
...@@ -25,7 +27,8 @@ const SingleChart = memo((props) => { ...@@ -25,7 +27,8 @@ const SingleChart = memo((props) => {
showBoxOption, showBoxOption,
special, special,
predicateData, predicateData,
emptyOrError emptyOrError,
theme = "Normal"
} = props; } = props;
const chartRef = useRef(); const chartRef = useRef();
const timerRef = useRef(); const timerRef = useRef();
...@@ -69,6 +72,9 @@ const SingleChart = memo((props) => { ...@@ -69,6 +72,9 @@ const SingleChart = memo((props) => {
_option.yAxis.min = 0; _option.yAxis.min = 0;
} }
} }
// 加入bi模式
if (theme === 'BI') _option = patchBIOption(_option, BI);
if (theme === 'BI') console.log(_option);
return _option; return _option;
}, [dataSource, smooth, curveCenter, chartType, predicateData]); }, [dataSource, smooth, curveCenter, chartType, predicateData]);
useEffect(() => { useEffect(() => {
...@@ -80,15 +86,7 @@ const SingleChart = memo((props) => { ...@@ -80,15 +86,7 @@ const SingleChart = memo((props) => {
const count = Object.values(selected || {}).filter((item) => item).length; const count = Object.values(selected || {}).filter((item) => item).length;
const option = cloneDeep(chart.getOption()); const option = cloneDeep(chart.getOption());
const needMarkLine = count === 1; const needMarkLine = count === 1;
// 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
let _tempDataArray = dataSource.filter((item) => item.sensorName === '是否在线');
option.series.forEach((item, index) => { 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]) { if (needMarkLine && selected[item.name]) {
item.markLine = alarmMarkLine( item.markLine = alarmMarkLine(
dataSource[index], dataSource[index],
...@@ -209,7 +207,7 @@ const SingleChart = memo((props) => { ...@@ -209,7 +207,7 @@ const SingleChart = memo((props) => {
offset: [0, -2] offset: [0, -2]
}, },
itemStyle: { itemStyle: {
color: "#21c8c3", // color: "#21c8c3",
} }
}, },
{ {
...@@ -224,7 +222,7 @@ const SingleChart = memo((props) => { ...@@ -224,7 +222,7 @@ const SingleChart = memo((props) => {
return [length, 32] return [length, 32]
}, },
itemStyle: { itemStyle: {
color: "#1980ff", // color: "#1980ff",
}, },
label: { label: {
color: '#fff', color: '#fff',
...@@ -299,7 +297,7 @@ const SingleChart = memo((props) => { ...@@ -299,7 +297,7 @@ const SingleChart = memo((props) => {
minorSplitLine: { minorSplitLine: {
show: showGridLine, show: showGridLine,
lineStyle: { lineStyle: {
type: 'dashed', // type: 'dashed',
}, },
}, },
splitLine: { splitLine: {
...@@ -317,22 +315,8 @@ const SingleChart = memo((props) => { ...@@ -317,22 +315,8 @@ const SingleChart = memo((props) => {
tooltip, tooltip,
}); });
}, [showGridLine]); }, [showGridLine]);
// 找出最大最小，决定图表 return <BasicChart theme={theme} ref={chartRef} option={option} notMerge
style={{width: '100%', height: '100%'}}/>
// 数据都为空显示缺省页
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%'}}/>
);*/
}); });
export default SingleChart; export default SingleChart;
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 248b5afc
import React from 'react'; import React from 'react';
import HistoryView from '../index'; import HistoryView from '../index';
import { MobileHistoryChart } from '../mobile'; import {MobileHistoryChart} from '../mobile';
/*const deviceParams = [ /*const deviceParams = [
/!*10.182*!/ /!*10.182*!/
...@@ -211,80 +211,95 @@ import { MobileHistoryChart } from '../mobile'; ...@@ -211,80 +211,95 @@ import { MobileHistoryChart } from '../mobile';
];*/ ];*/
const deviceParams = [ const deviceParams = [
// 新乐，水厂数据异常的问题 // 新乐，水厂数据异常的问题
/* { {
"deviceCode": "SC00000004", "deviceCode": "SC00000004",
"sensors": "进水瞬时流量,1#出水瞬时流量,2#出水瞬时流量", "sensors": "进水瞬时流量,1#出水瞬时流量,2#出水瞬时流量",
"deviceType": "水厂" "deviceType": "水厂"
}*/ }
/* { /* {
"deviceCode": "EGJZ00000073", "deviceCode": "EGJZ00000073",
"sensors": "进水压力", "sensors": "进水压力",
"deviceType": "二供机组" "deviceType": "二供机组"
}*/ }*/
/* { /* {
"deviceCode": "EGJZ00000006", "deviceCode": "EGJZ00000006",
"sensors": "进水压力", "sensors": "进水压力",
"deviceType": "二供机组" "deviceType": "二供机组"
}*/ }*/
/* { /* {
"deviceCode": "EGBF00000002", "deviceCode": "EGBF00000002",
"deviceType": "二供泵房", "deviceType": "二供泵房",
"sensors": "进水压力" "sensors": "进水压力"
}, },
{ {
"deviceType": "二供机组", "deviceType": "二供机组",
"deviceCode": "EGJZ00000005", "deviceCode": "EGJZ00000005",
"sensors": "出水压力" "sensors": "出水压力"
}, },
{ {
"deviceType": "二供机组", "deviceType": "二供机组",
"deviceCode": "EGJZ00000001", "deviceCode": "EGJZ00000001",
"sensors": "出水压力" "sensors": "出水压力"
}, },
{ {
"deviceType": "二供机组", "deviceType": "二供机组",
"deviceCode": "EGJZ00000004", "deviceCode": "EGJZ00000004",
"sensors": "出水压力" "sensors": "出水压力"
}, },
{ {
"deviceType": "二供机组", "deviceType": "二供机组",
"deviceCode": "EGJZ00000003", "deviceCode": "EGJZ00000003",
"sensors": "出水压力" "sensors": "出水压力"
}, },
{ {
"deviceType": "二供机组", "deviceType": "二供机组",
"deviceCode": "EGJZ00000002", "deviceCode": "EGJZ00000002",
"sensors": "出水压力" "sensors": "出水压力"
}*/ }*/
// 182:8088 报警设备 // 182:8088 报警设备
/* { /* {
"deviceCode": "XMYL00000043", "deviceCode": "XMYL00000043",
"sensors": "进水压力", "sensors": "进水压力",
"deviceType": "熊猫压力表" "deviceType": "熊猫压力表"
}*/ }*/
/* { /* {
"deviceCode": "LLJ00000001", "deviceCode": "LLJ00000001",
"sensors": "瞬时流量", "sensors": "瞬时流量",
"deviceType": "流量计" "deviceType": "流量计"
}*/ }*/
/* {
"deviceCode": "EGBF00000024",
// "deviceCode": "EGBF00000023",
"sensors": "进水压力",
"deviceType": "二供泵房"
}*/
]
const p1 = [
{ {
"deviceCode": "EGBF00000024", "deviceCode": "SC00000004",
// "deviceCode": "EGBF00000023", "sensors": "进水瞬时流量",
"sensors": "进水压力", "deviceType": "水厂"
"deviceType": "二供泵房"
} }
] ]
const Demo = () => { const Demo = () => {
return ( return (
<> <>
<div> <div>
<div style={{ height: 700 }}> <div style={{height: 700}}>
{/* <HistoryView deviceParams={deviceParams} defaultModel="table" /> */} {/* <HistoryView deviceParams={deviceParams} defaultModel="table" /> */}
<HistoryView deviceParams={deviceParams} defaultModel="curve" /> <HistoryView theme={'BI'} deviceParams={deviceParams} defaultModel="curve"/>
</div> </div>
</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; export default Demo;
packages/extend-components/EC_HistoryView/src/index.js
View file @ 248b5afc
...@@ -39,7 +39,7 @@ import { ...@@ -39,7 +39,7 @@ import {
} from './apis'; } from './apis';
import SingleChart from './SingleChart'; import SingleChart from './SingleChart';
import GridChart from './GridChart'; import GridChart from './GridChart';
import './index.less';
import {globalConfig} from 'antd/lib/config-provider'; import {globalConfig} from 'antd/lib/config-provider';
import {getSensorType} from './apis/index'; import {getSensorType} from './apis/index';
import {ExportExcel} from '@wisdom-components/exportexcel'; import {ExportExcel} from '@wisdom-components/exportexcel';
...@@ -321,6 +321,10 @@ const HistoryView = (props) => { ...@@ -321,6 +321,10 @@ const HistoryView = (props) => {
const [completeInit, setCompleteInit] = useState(false); const [completeInit, setCompleteInit] = useState(false);
const {getPrefixCls} = useContext(ConfigProvider.ConfigContext); const {getPrefixCls} = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('history-view'); const prefixCls = getPrefixCls('history-view');
const themeMap = {
Normal: `${prefixCls}-wrapper`,
BI: `${prefixCls}-BI-wrapper`
}
const { const {
title, title,
grid, grid,
...@@ -331,7 +335,10 @@ const HistoryView = (props) => { ...@@ -331,7 +335,10 @@ const HistoryView = (props) => {
showModels, showModels,
needMarkLine, needMarkLine,
defaultDate, defaultDate,
theme = "Normal"
} = props; } = props;
if (theme === 'Normal') import('./index.less')
if (theme === 'BI') import('./indexForBI.less');
const isBoxPlots = const isBoxPlots =
deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',').length === 1; deviceParams?.length === 1 && deviceParams?.[0]?.sensors?.split(',').length === 1;
const [loading, setLoading] = useState(null); const [loading, setLoading] = useState(null);
...@@ -1395,6 +1402,7 @@ const HistoryView = (props) => { ...@@ -1395,6 +1402,7 @@ const HistoryView = (props) => {
contrast={timeValue === 'contrast'} contrast={timeValue === 'contrast'}
contrastOption={contrastOption} contrastOption={contrastOption}
deviceAlarmSchemes={deviceAlarmSchemes} deviceAlarmSchemes={deviceAlarmSchemes}
theme={theme}
special={{ special={{
special1, // 频率业务 special1, // 频率业务
allPointAddress, allPointAddress,
...@@ -1541,64 +1549,67 @@ const HistoryView = (props) => { ...@@ -1541,64 +1549,67 @@ const HistoryView = (props) => {
} }
}, [loading]); }, [loading]);
return ( return (
<div className={classNames(prefixCls, 'wkt-scroll-light')}> <ConfigProvider theme={{primaryColor: 'red'}}>
<div className={classNames(`${prefixCls}-spin`)} style={{position: 'relative'}}> <div className={classNames(prefixCls, 'wkt-scroll-light')}>
{loading || percent !== 0 ? ( <div className={classNames(`${prefixCls}-spin`)} style={{position: 'relative'}}>
<div className={classNames(`${prefixCls}-progressWrapper`)}> {loading || percent !== 0 ? (
{lineDataType === '原始曲线' || <div className={classNames(`${prefixCls}-progressWrapper`)}>
(lineDataType === '特征曲线' && {lineDataType === '原始曲线' ||
moment(dateRange?.[0]?.dateTo).diff(moment(dateRange?.[0]?.dateFrom), 'days') >= (lineDataType === '特征曲线' &&
30) ? moment(dateRange?.[0]?.dateTo).diff(moment(dateRange?.[0]?.dateFrom), 'days') >=
<div className={classNames(`${prefixCls}-contentWrapper`)}> 30) ?
<Progress <div className={classNames(`${prefixCls}-contentWrapper`)}>
percent={percent} <Progress
steps={20} percent={percent}
className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)} steps={20}
showInfo={false} className={classNames(`${prefixCls}-progress`, `${prefixCls}-blink-2`)}
/> showInfo={false}
<div className={classNames(`${prefixCls}-tip`)}>加载中...</div> />
</div> : <div className={classNames(`${prefixCls}-tip`)}>加载中...</div>
<Spin spinning={loading || false} tip={'数据加载中...'} delay={1000} </div> :
style={{background: 'transparent'}}/> <Spin spinning={loading || false} tip={'数据加载中...'} delay={1000}
} style={{background: 'transparent'}}/>
</div> }
) : ( </div>
'' ) : (
)} ''
{showModels.length === 1 && ( )}
<div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div> {showModels.length === 1 && (
)} <div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
{showModels.length > 1 && ( )}
<Tabs {showModels.length > 1 && (
activeKey={activeTabKey} <Tabs
onChange={(key) => setActiveTabKey(key)} activeKey={activeTabKey}
centered onChange={(key) => setActiveTabKey(key)}
tabBarExtraContent={{ centered
left: <h3>{title}</h3>, tabBarExtraContent={{
right: ( left: <h3>{title}</h3>,
<div className={`${prefixCls}-extra-right`}> right: (
{activeTabKey === 'table' && ( <div className={`${prefixCls}-extra-right`}>
<> {activeTabKey === 'table' && (
<Button type="link" onClick={exportFeatureBtn}> <>
<DownloadOutlined/> <Button type="link" onClick={exportFeatureBtn}>
下载 <DownloadOutlined/>
</Button> 下载
</> </Button>
)} </>
</div> )}
), </div>
}} ),
> }}
<Tabs.TabPane key="curve" tab="曲线" forceRender={true}> >
{activeTabKey === 'curve' ? renderPanel('curve') : ''} <Tabs.TabPane key="curve" tab="曲线" forceRender={true}>
</Tabs.TabPane> {activeTabKey === 'curve' ? renderPanel('curve') : ''}
<Tabs.TabPane key="table" tab="表格"> </Tabs.TabPane>
{renderPanel('table')} <Tabs.TabPane key="table" tab="表格">
</Tabs.TabPane> {renderPanel('table')}
</Tabs> </Tabs.TabPane>
)} </Tabs>
)}
</div>
</div> </div>
</div> </ConfigProvider>
); );
}; };
...@@ -1618,6 +1629,7 @@ HistoryView.propTypes = { ...@@ -1618,6 +1629,7 @@ HistoryView.propTypes = {
defaultModel: PropTypes.oneOf(['curve', 'table']), defaultModel: PropTypes.oneOf(['curve', 'table']),
showModels: PropTypes.arrayOf(PropTypes.oneOf(['curve', 'table'])), showModels: PropTypes.arrayOf(PropTypes.oneOf(['curve', 'table'])),
defaultDate: PropTypes.string, defaultDate: PropTypes.string,
BIMode: PropTypes.bool
}; };
HistoryView.defaultProps = { HistoryView.defaultProps = {
...@@ -1629,6 +1641,7 @@ HistoryView.defaultProps = { ...@@ -1629,6 +1641,7 @@ HistoryView.defaultProps = {
showModels: ['curve', 'table'], showModels: ['curve', 'table'],
needMarkLine: true, needMarkLine: true,
defaultDate: 'day', defaultDate: 'day',
BIMode: false
}; };
export default HistoryView; export default HistoryView;
packages/extend-components/EC_HistoryView/src/index.less
View file @ 248b5afc
...@@ -22,9 +22,11 @@ ...@@ -22,9 +22,11 @@
width: 82px; width: 82px;
white-space: nowrap; white-space: nowrap;
} }
.@{ant-prefix}-table-thead > tr > th { .@{ant-prefix}-table-thead > tr > th {
background: rgba(224, 234, 251,0.4)!important; background: rgba(224, 234, 251, 0.4) !important;
} }
&-extra-right { &-extra-right {
position: absolute; position: absolute;
top: 10px; top: 10px;
...@@ -68,6 +70,7 @@ ...@@ -68,6 +70,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
.@{history-view}-progress { .@{history-view}-progress {
display: inline-flex; display: inline-flex;
} }
...@@ -250,6 +253,7 @@ ...@@ -250,6 +253,7 @@
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.@{history-view}-blink-2 { .@{history-view}-blink-2 {
-webkit-animation: blink-2 3s infinite both; -webkit-animation: blink-2 3s infinite both;
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
export const BI = {
"backgroundColor": "rgba(34,42,78,1)",
"titleColor": "#ffffff",
"subtitleColor": "#dddddd",
"textColorShow": false,
"textColor": "#333",
"markTextColor": "#293441",
"color": [
"#1685ff",
"#00b809",
"#ffa200",
"#00d0c7",
"#ff6b37",
"#986aff",
"#2f54eb",
"#ff9e69",
"#ffcb66",
"#99ceff",
"#f66ffb"
],
"borderColor": "#ccc",
"borderWidth": 0,
"visualMapColor": [
"#fc97af",
"#87f7cf"
],
"legendTextColor": "#aaaaaa",
"kColor": "#fc97af",
"kColor0": "transparent",
"kBorderColor": "#fc97af",
"kBorderColor0": "#87f7cf",
"kBorderWidth": "2",
"lineWidth": "3",
"symbolSize": "0",
"symbol": "circle",
"symbolBorderWidth": "4",
"lineSmooth": true,
"graphLineWidth": "1",
"graphLineColor": "#ffffff",
"mapLabelColor": "#893448",
"mapLabelColorE": "rgb(137,52,72)",
"mapBorderColor": "#999999",
"mapBorderColorE": "#eb8146",
"mapBorderWidth": 0.5,
"mapBorderWidthE": 1,
"mapAreaColor": "#f3f3f3",
"mapAreaColorE": "rgba(255,178,72,1)",
"axes": [
{
"type": "all",
"name": "通用坐标轴",
"axisLineShow": true,
"axisLineColor": "#666666",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#aaaaaa",
"splitLineShow": true,
"splitLineColor": [
"#6d6d6d"
],
"splitAreaShow": true,
"splitAreaColor": [
"rgba(250,250,250,0.01)",
"rgba(255,255,255,0.02)"
]
},
{
"type": "category",
"name": "类目坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": false,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "value",
"name": "数值坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "log",
"name": "对数坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "time",
"name": "时间坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
],
"axisSeperateSetting": false,
"toolboxColor": "#999999",
"toolboxEmphasisColor": "#666666",
"tooltipAxisColor": "#8e8e8e",
"tooltipAxisWidth": 1,
"timelineLineColor": "#87f7cf",
"timelineLineWidth": 1,
"timelineItemColor": "#87f7cf",
"timelineItemColorE": "#f7f494",
"timelineCheckColor": "#fc97af",
"timelineCheckBorderColor": "#fc97af",
"timelineItemBorderWidth": 1,
"timelineControlColor": "#87f7cf",
"timelineControlBorderColor": "#87f7cf",
"timelineControlBorderWidth": 0.5,
"timelineLabelColor": "#87f7cf",
"datazoomBackgroundColor": "rgba(255,255,255,0)",
"datazoomDataColor": "rgba(114,204,255,1)",
"datazoomFillColor": "rgba(114,204,255,0.2)",
"datazoomHandleColor": "#72ccff",
"datazoomHandleWidth": "100",
"datazoomLabelColor": "#333333"
};
export const BISplitLineColor = '#535353';
export const BIAxisLineColor = '#acacac';
export const BIAxisLabelColor = '#ccc';
export const Normal = {
"backgroundColor": "rgba(255,255,255,1)",
"titleColor": "#ffffff",
"subtitleColor": "#dddddd",
"textColorShow": false,
"textColor": "#333",
"markTextColor": "#293441",
"color": [
"#1685ff",
"#00b809",
"#ffa200",
"#00d0c7",
"#ff6b37",
"#986aff",
"#2f54eb",
"#ff9e69",
"#ffcb66",
"#99ceff",
"#f66ffb"
],
"borderColor": "#ccc",
"borderWidth": 0,
"visualMapColor": [
"#fc97af",
"#87f7cf"
],
"legendTextColor": "#6d6a6a",
"kColor": "#fc97af",
"kColor0": "transparent",
"kBorderColor": "#fc97af",
"kBorderColor0": "#87f7cf",
"kBorderWidth": "2",
"lineWidth": "3",
"symbolSize": "0",
"symbol": "circle",
"symbolBorderWidth": "4",
"lineSmooth": true,
"graphLineWidth": "1",
"graphLineColor": "#ffffff",
"mapLabelColor": "#893448",
"mapLabelColorE": "rgb(137,52,72)",
"mapBorderColor": "#999999",
"mapBorderColorE": "#eb8146",
"mapBorderWidth": 0.5,
"mapBorderWidthE": 1,
"mapAreaColor": "#f3f3f3",
"mapAreaColorE": "rgba(255,178,72,1)",
"axes": [
{
"type": "all",
"name": "通用坐标轴",
"axisLineShow": true,
"axisLineColor": "#9b9b9b",
"axisTickShow": true,
"axisTickColor": "#9b9b9b",
"axisLabelShow": true,
"axisLabelColor": "#6d6a6a",
"splitLineShow": true,
"splitLineColor": [
"#9b9b9b"
],
"splitAreaShow": true,
"splitAreaColor": [
"rgba(250,250,250,0.01)",
"rgba(255,255,255,0.02)"
]
},
{
"type": "category",
"name": "类目坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": false,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "value",
"name": "数值坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "log",
"name": "对数坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "time",
"name": "时间坐标轴",
"axisLineShow": true,
"axisLineColor": "#333",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#ccc"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
],
"axisSeperateSetting": false,
"toolboxColor": "#999999",
"toolboxEmphasisColor": "#666666",
"tooltipAxisColor": "#8e8e8e",
"tooltipAxisWidth": 1,
"timelineLineColor": "#87f7cf",
"timelineLineWidth": 1,
"timelineItemColor": "#87f7cf",
"timelineItemColorE": "#f7f494",
"timelineCheckColor": "#fc97af",
"timelineCheckBorderColor": "#fc97af",
"timelineItemBorderWidth": 1,
"timelineControlColor": "#87f7cf",
"timelineControlBorderColor": "#87f7cf",
"timelineControlBorderWidth": 0.5,
"timelineLabelColor": "#87f7cf",
"datazoomBackgroundColor": "rgba(255,255,255,0)",
"datazoomDataColor": "rgba(114,204,255,1)",
"datazoomFillColor": "rgba(114,204,255,0.2)",
"datazoomHandleColor": "#72ccff",
"datazoomHandleWidth": "100",
"datazoomLabelColor": "#333333"
};
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'; ...@@ -7,7 +7,6 @@ import lineChart from '@wisdom-components/basicchart/es/LineChart';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
/** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */ /** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
const AXIS_WIDTH = 40;
const COLOR = { const COLOR = {
NORMAL: '#1685FF', NORMAL: '#1685FF',
UPER: '#fa8c16', UPER: '#fa8c16',
...@@ -187,104 +186,6 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => { ...@@ -187,104 +186,6 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
data, 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) => { ...@@ -295,7 +196,7 @@ export const decorateAxisGridLine = (axis, showGrid) => {
if (!axis) return; if (!axis) return;
axis.minorTick = { axis.minorTick = {
lineStyle: { lineStyle: {
color: '#e2e2e2', // color: '#e2e2e2',
}, },
...(axis.minorTick || {}), ...(axis.minorTick || {}),
show: showGrid, show: showGrid,
...@@ -303,8 +204,8 @@ export const decorateAxisGridLine = (axis, showGrid) => { ...@@ -303,8 +204,8 @@ export const decorateAxisGridLine = (axis, showGrid) => {
}; };
axis.minorSplitLine = { axis.minorSplitLine = {
lineStyle: { lineStyle: {
color: '#e2e2e2', // color: '#e2e2e2',
type: 'dashed', // type: 'dashed',
}, },
...(axis.minorSplitLine || {}), ...(axis.minorSplitLine || {}),
show: showGrid, show: showGrid,
...@@ -315,44 +216,6 @@ export const decorateAxisGridLine = (axis, 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 模板 // tooltip 模板
const headTemplate = (param, opt) => { const headTemplate = (param, opt) => {
if (!param) return ''; if (!param) return '';
...@@ -792,13 +655,13 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => { ...@@ -792,13 +655,13 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
}, },
minorTick: { minorTick: {
lineStyle: { lineStyle: {
color: '#e2e2e2', // color: '#e2e2e2',
}, },
}, },
minorSplitLine: { minorSplitLine: {
lineStyle: { lineStyle: {
color: '#e2e2e2', // color: '#e2e2e2',
type: 'dashed', // type: 'dashed',
}, },
}, },
}; };
...@@ -1453,15 +1316,15 @@ const specialTypeChartOptionGenerator = ({ ...@@ -1453,15 +1316,15 @@ const specialTypeChartOptionGenerator = ({
}, },
minorTick: { minorTick: {
lineStyle: { lineStyle: {
color: '#e2e2e2', // color: '#e2e2e2',
}, },
show: true, show: true,
splitNumber: 2, splitNumber: 2,
}, },
minorSplitLine: { minorSplitLine: {
lineStyle: { lineStyle: {
color: '#e2e2e2', // color: '#e2e2e2',
type: 'dashed', // type: 'dashed',
}, },
show: true, show: true,
}, },
...@@ -1477,15 +1340,15 @@ const specialTypeChartOptionGenerator = ({ ...@@ -1477,15 +1340,15 @@ const specialTypeChartOptionGenerator = ({
}, },
minorTick: { minorTick: {
lineStyle: { lineStyle: {
color: '#e2e2e2', // color: '#e2e2e2',
}, },
show: true, show: true,
splitNumber: 2, splitNumber: 2,
}, },
minorSplitLine: { minorSplitLine: {
lineStyle: { lineStyle: {
color: '#e2e2e2', // color: '#e2e2e2',
type: 'dashed', // type: 'dashed',
}, },
show: true, 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