Skip to content

W
wisdom-components
Commit 267b7ee5 authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 更新basicChart、更新历史曲线

parent 9b7597cc
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 69 deletions
packages/base-components/BasicChart/src/demos/Basic.tsx
View file @ 267b7ee5
......@@ -26,7 +26,7 @@ const Demo = () => {
},
},
legend: {
data: ['Evaporation', 'Precipitation', 'Temperature'],
data: ['EvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporation', 'Precipitation', 'Temperature'],
},
xAxis: [
{
......@@ -88,7 +88,7 @@ const Demo = () => {
],
series: [
{
name: 'Evaporation',
name: 'EvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporationEvaporation',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
},
......
packages/base-components/BasicChart/src/utils/legend.js
View file @ 267b7ee5
import { globalConfig } from './global';
import {globalConfig} from './global';
export const buildDefaultLegend = (option) => {
const { title } = option;
const {title} = option;
let paddingRight = 0;
if (title && title.show) paddingRight = 80; // 给标题留够空间
let paddingRight = 0;
if (title && title.show) paddingRight = 80; // 给标题留够空间
return {
show: true,
right: 20,
top: 20,
icon: 'rect',
itemWidth: 14,
itemHeight: 8,
itemGap: 20,
padding: [0, 0, 0, paddingRight],
textStyle: {
padding: [0, 0, 0, 4],
color: '#2d2d2d',
},
};
return {
show: true,
right: 20,
top: 20,
icon: 'rect',
itemWidth: 14,
itemHeight: 8,
itemGap: 20,
padding: [0, 0, 0, paddingRight],
textStyle: {
padding: [0, 0, 0, 4],
color: '#2d2d2d',
width: 80,
overflow:'truncate'
},
tooltip:{
show:true
}
};
};
packages/extend-components/EC_HistoryView/src/GridChart.js
View file @ 267b7ee5
......@@ -77,7 +77,6 @@ const GridChart = memo((props) => {
option: option,
};
});
console.log(_options);
return _options
}, [gridData, smooth, curveCenter]);
......
packages/extend-components/EC_HistoryView/src/demos/GridDemo.js
View file @ 267b7ee5
......@@ -25,36 +25,36 @@ const deviceParams = [
/*const deviceParams = [
{
"deviceCode": "LLJ00000055",
"sensors": "瞬时流量,正累计流量,是否在线",
"sensors": "瞬时流量,正累计流量",
"deviceType": "流量计"
},
{
"deviceCode": "LLJ00000056",
"sensors": "瞬时流量,正累计流量,是否在线",
"sensors": "瞬时流量,正累计流量",
"deviceType": "流量计"
}
]*/
/*const deviceParams = [
{
"deviceCode": "EGBF00000023",
"sensors": "出水瞬时流量,是否在线",
"sensors": "出水瞬时流量",
"deviceType": "二供泵房"
},
{
"deviceCode": "EGBF00000019",
"sensors": "出水瞬时流量,是否在线",
"sensors": "出水瞬时流量",
"deviceType": "二供泵房"
}
]*/
/*const deviceParams = [
{
"deviceCode": "QSSSC00000001",
"sensors": "出水瞬时流量,是否在线",
"sensors": "出水瞬时流量",
"deviceType": "确山送水厂"
},
{
"deviceCode": "EGBF00000019",
"sensors": "出水瞬时流量,是否在线",
"sensors": "出水瞬时流量",
"deviceType": "二供泵房"
}
]*/
......
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 267b7ee5
import React from 'react';
import HistoryView from '../index';
import {MobileHistoryChart} from "../mobile";
import { MobileHistoryChart } from "../mobile";
const deviceParams = [
{
deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量',
sensors: '进水压力',
deviceType: '二供泵房',
pointAddressID: 208,
},
/* {
deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量',
sensors: '进水压力',
deviceType: '二供泵房',
pointAddressID: 208,
}, */
/* {
"deviceCode": "SYJ00000008",
"sensors": "瞬时流量",
......@@ -21,7 +21,7 @@ const deviceParams = [
// deviceCode: 'XMYL00000345',
// deviceCode: 'XMYL00000000',
deviceCode: 'EGBF00000014',
// sensors: '今日供水量,今日用电量,1#水箱液位,是否在线',
// sensors: '今日供水量,今日用电量,1#水箱液位',
sensors: '进水压力',
deviceType: '熊猫压力表',
pointAddressID: 4,
......@@ -34,46 +34,51 @@ const deviceParams = [
},*/
/* {
"deviceCode": "LLJ00000055",
"sensors": "正累计流量,瞬时流量,是否在线",
"sensors": "正累计流量,瞬时流量",
"deviceType": "流量计"
}*/
/* {
"deviceCode": "EGJZ00000163",
"sensors": "进水压力,是否在线",
"sensors": "进水压力",
"deviceType": "二供机组"
}*/
// 邳州张楼水厂
/* {
"deviceCode": "SC00000023",
"sensors": "出水压力",
"deviceType": "水厂"
}*/
/* {
"deviceCode": "SC00000023",
"sensors": "瞬时流量",
"deviceType": "水厂"
} */
/* {
"deviceCode": "JFJ00000001",
"sensors": "沉淀池投矾量瞬时,",
"deviceType": "加矾间"
}*/
/* {
"deviceCode": "QSBF00000001",
"sensors": "取水浊度",
"deviceType": "取水泵房"
}*/
/* {
"deviceCode": "SC00000023",
"sensors": "出水瞬时流量,是否在线",
"deviceType": "水厂"
}*/
/* {
"deviceCode": "QSBF00000001",
"sensors": "取水浊度",
"deviceType": "取水泵房"
}*/
/* {
"deviceCode": "SC00000023",
"sensors": "出水瞬时流量",
"deviceType": "水厂"
}*/
// {
// "deviceCode": "XNCDC00000001",
// "sensors": "沉淀池1号进水管流量",
// "deviceType": "絮凝沉淀池"
// }
{
"deviceCode": "LLJ00000001",
"sensors": "瞬时流量",
"deviceType": "流量计"
}
];
const Demo = () => {
return (
<div>
<div style={{height: 700}}>
<HistoryView deviceParams={deviceParams} defaultModel="curve"/>
<div style={{ height: 700 }}>
<HistoryView deviceParams={deviceParams} defaultModel="curve" />
</div>
</div>
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 267b7ee5
......@@ -29,7 +29,6 @@ import SingleChart from './SingleChart';
import GridChart from './GridChart';
import './index.less';
import {globalConfig} from 'antd/lib/config-provider';
const {RangePicker} = DatePicker;
const {Option} = Select;
......@@ -780,7 +779,7 @@ const HistoryView = (props) => {
const handleTableData = useCallback((data) => {
// eslint-disable-next-line no-param-reassign
data = data.filter(item => item.sensorName !== '是否在线');
// data = data.filter(item => item.sensorName !== '是否在线');
const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked;
const dataIndexAccess = (dataItem, index) => {
const {stationCode, sensorName} = dataItem;
......@@ -973,6 +972,7 @@ const HistoryView = (props) => {
deviceParams.forEach((p) => {
// 返回数据按查询指标顺序排序
const sensors = p.sensors?.split(',') ?? [];
if (sensors?.length) sensors.push('是否在线');
const list = sensors.map((s) => {
const dataItem = res.data.find(
(d) => d.stationCode === p.deviceCode && d.sensorName === s,
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ 267b7ee5
......@@ -261,6 +261,7 @@ export const offlineArea = (dataItem) => {
{
name: '离线',
xAxis: new Date(item.pt),
label:{show:!datas?.length}
},
];
hasOffline = true;
......@@ -276,6 +277,7 @@ export const offlineArea = (dataItem) => {
return {
itemStyle: {
color: '#eee',
opacity: 0.6,
},
data: datas,
};
......@@ -416,15 +418,15 @@ const returnXAxis = ({
let markArea = null;
// 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
let _offlineAreasData = _offlineData
.map((item) => {
let _item = {...item};
_item.dataModel = item.dataModel.map((d) => {
let _d = {...d};
_d.pv = 0;
return _d;
});
return _item;
})
/* .map((item) => {
let _item = { ...item };
_item.dataModel = item.dataModel.map((d) => {
let _d = { ...d };
_d.pv = 0;
return _d;
});
return _item;
})*/
.find((offline) => offline.stationCode === item.stationCode);
let offlineAreas = offlineArea(_offlineAreasData);
if (offlineAreas.data?.length) {
......@@ -512,7 +514,7 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
position: i % 2 === 0 ? 'left' : 'right',
offset: Math.floor(i / 2) * AXIS_WIDTH,
axisLabel: {
formatter: (value) => (value > 100000 ? `${value / 1000}k` : value),
formatter: (value) => (value > 100000 ? `${value / 1000}k` : value.toFixed(2)),
},
axisLine: {
show: true,
......@@ -787,12 +789,17 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
? `${_currentYear}-01-01 HH:mm:00`
: `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比，把日期拉到同一区间
let _maxValues = [];
/**
* 生成泳道图，分两种情况
* 1. 当最大值最小值都是正数时；
* 2. 当最大值小于零时（此时，最小值一定小于零）；
*/
dataSource?.[0]?.dataModel.forEach((item) => {
const {firstPV, lastPV, maxPV, minPV, pt} = item;
_maxValues.push(maxPV);
let time = contrast ? moment(pt).format(formatStr) : pt;
_maxData.push([moment(time).valueOf(), (maxPV - minPV).toFixed(2)]);
_minData.push([moment(time).valueOf(), minPV]);
_maxData.push([moment(time).valueOf(), (maxPV > 0 ? maxPV - minPV : minPV - maxPV).toFixed(2)]);
_minData.push([moment(time).valueOf(), maxPV > 0 ? minPV : maxPV]);
}); //当存在othersData的时候，只是单曲线
// xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
xAxis = {type: 'time'};
......
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