Skip to content

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

feat: 修改markPoint交互样式

parent 537a8e1f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 69 deletions
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';
];*/
const deviceParams = [
// 预测的
{
/* {
"deviceCode": "YLB00000041",
"sensors": "进水压力",
"deviceType": "压力表"
},
/* {
},*/
{
"deviceCode": "SSBF00000001",
"sensors": "出水压力",
"deviceType": "送水泵房"
}*/
}
//预测结束
/* {
"deviceCode": "EGBF00000141",
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ d09dcf16
......@@ -75,6 +75,12 @@ const timeList = [
name: '近1月',
},
];
const predicateMap = {
twelveHours: 12,
roundClock: 24,
oneWeek: 24,
oneMonth: 24
}
// 同期对比 日 快捷按钮
const shortcutsForDay = [
......@@ -139,7 +145,7 @@ const CheckboxData = [
checked: true,
showInCurve: false,
showInTable: true,
},
}
];
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 end = '';
......@@ -236,6 +246,10 @@ const updateTime = (key) => {
break;
}
}
if (predicate) {
end = handleTimeForPredicate(key, end)
}
return [
{
dateFrom: start,
......@@ -339,6 +353,7 @@ const HistoryView = (props) => {
const [isSingleStatusSensor, setIsSingleStatusSensor] = useState(false);
const [predicateDevice, setPredicateDevice] = useState(null);
const [predicateData, setPredicateData] = useState([]);
const [predicateTime, setPredicateTime] = useState(null);
// 历史数据相关的特征描述
const deviceConfig = useRef({
oneDevice: deviceParams.length === 1, //单设备
......@@ -357,7 +372,7 @@ const HistoryView = (props) => {
// 选择的时间范围值
const dateRange = useMemo(() => {
if (timeValue === 'customer') {
return updateTime(customerChecked || customerTime);
return updateTime(customerChecked || customerTime, predicateDevice);
} else {
let _dateArr = shortcutsValue ? shortcutsDatePickerArr : datePickerArr;
return handleBatchTime(_dateArr, contrastOption);
......@@ -406,11 +421,8 @@ const HistoryView = (props) => {
// 自定义模式: 快速选择
const onCustomerTimeChange = (key) => {
/* if (key === 'oneMonth' && lineDataType === '原始曲线') {
setLineDataType('特征曲线');
message.info('月模式数据量较大，不支持原始曲线模式，已切换为特征曲线')
}*/
setCustomerChecked(key);
setPredicateTime(predicateMap[key]);
!!customerTime && setCustomerTime(null);
};
......@@ -559,10 +571,6 @@ const HistoryView = (props) => {
format={'YYYY-MM-DD HH:mm'}
onChange={onCustomerTimeChange}
value={customerChecked}
/* dataSource={timeList.filter(item => {
if (lineDataType === '原始曲线') return item.key !== 'oneMonth';
return true
})}*/
dataSource={timeList}
/>
<RangePicker
......@@ -659,7 +667,6 @@ const HistoryView = (props) => {
// 曲线设置项选择/取消
const onCheckboxChange = (e, key, showJustLine) => {
let data = [...checkboxData];
// let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示
let _index1 = data.findIndex((item) => item.key === 'ignoreOutliers'); // 仅查看曲线会在勾选了数据滤波后展示
data.forEach((item) => {
if (item.key === key) {
......@@ -667,14 +674,7 @@ const HistoryView = (props) => {
}
});
if (key === 'ignoreOutliers') {
// 需求变更，仅查看曲线剔除
/* if (showJustLine) {
data[_index].showInCurve = e.target.checked;
data[_index].checked = e.target.checked;
} else {*/
data[_index1].showInCurve = true;
// data[_index1].checked = false;
// }
}
if (key === 'chartType') {
......@@ -754,7 +754,6 @@ const HistoryView = (props) => {
<Radio.Button value={'特征曲线'}>特征曲线</Radio.Button>
<Radio.Button value={'原始曲线'}>原始曲线</Radio.Button>
</Radio.Group>
{/*<Segmented value={lineDataType} options={['特征曲线', '原始曲线']} onChange={switchLineDataType}/>*/}
<Tooltip title={'原始曲线数据量较大，单次查询最多展示1万条数据'}>
<QuestionCircleFilled
style={{marginLeft: 6}}
......@@ -1125,7 +1124,7 @@ const HistoryView = (props) => {
if (!_isNaN && _num >= 12) _finalParams.isInterpolation = false;
}
// 2024年1月23日 增加预测曲线，单设备单曲线
// 同期对比不允许、多设备的不允许
// 同期对比不允许、多设备的不允许预测
if (dateRange.length === 1 && predicateDevice) {
_finalParams.acrossTables.push(predicateDevice);
}
......@@ -1393,13 +1392,29 @@ const HistoryView = (props) => {
let _res1 = result[1];
let _res2 = result[2];
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) {
let _opt = _res0.data.reduce((final, cur) => {
final[cur.fieldName] = cur.fieldValue;
return final;
}, {});
let _checkboxData = [...checkboxData].map((item) => {
_checkboxData = _checkboxData.map((item) => {
let _item = {...item};
if (_opt[item.label] !== undefined) {
_item.checked = _opt[item.label] === 'true';
......@@ -1429,16 +1444,11 @@ const HistoryView = (props) => {
// 标记sensor是什么类型的
if (_res2.code === 0) {
setAllSensorType(_res2.data);
let _sensorID = _res1.data?.find((item) => item.name === sensors)?.sensorTypeID;
let _sensor = _res2.data?.find((item) => item.id === _sensorID)?.type;
let _isStatusSensor = ['状态值', '开关值'].includes(_sensor);
setIsSingleStatusSensor(_isStatusSensor);
}
// 单设备单曲线的设定加载
if (_res3.code === 0 && _res3.data) {
setPredicateDevice({..._res3.data, deviceType: '预测'});
}
}
});
setCompleteInit(true);
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ d09dcf16
......@@ -34,26 +34,26 @@ export const handlePx = (num, unit = '') => {
return unit ? `${_num}${unit}` : Number(_num);
};
const PC_OPTION = {
markPoint: {
padding: [2, 12],
lineHeight: 22,
backgroundColor:
window.globalConfig && window.globalConfig && window.globalConfig.variableTheme?.primaryColor
? window.globalConfig.variableTheme.primaryColor
: '#0087F7',
borderWidth: 1,
},
// markPoint: {
// padding: [2, 12],
// lineHeight: 22,
// backgroundColor:
// window.globalConfig && window.globalConfig && window.globalConfig.variableTheme?.primaryColor
// ? window.globalConfig.variableTheme.primaryColor
// : '#0087F7',
// borderWidth: 1,
// },
fontSize: 16,
fontColor: '#ffffff',
dataZoomHeight: 28,
};
const MOBILE_OPTION = {
markPoint: {
padding: [2, 6],
lineHeight: 18,
backgroundColor: 'rgba(255,255,255,0.6)',
borderWidth: 0,
},
// markPoint: {
// padding: [2, 6],
// lineHeight: 18,
// backgroundColor: 'rgba(255,255,255,0.6)',
// borderWidth: 0,
// },
fontSize: handlePx(12),
fontColor: '#0087F7',
dataZoomHeight: 20,
......@@ -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';
return dataModel
.filter((item) => item.sensorName !== '是否在线')
.map((item) => {
.map((item, index) => {
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) =
};
}
export const minMaxMarkPoint = (dataItem, index, dataSource) => {
const _isMobile = isMobile();
// 只有一个数据曲线时显示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',
value: null,
color: 'rgba(255,255,255,1)',
name: '最小: ',
symbol: `image://${minIcon}`,
symbolOffset: [0, 18],
// 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',
value: null,
name: '最大: ',
symbol: `image://${maxIcon}`,
symbolOffset: [0, -16],
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: false,
show: true,
},
symbolSize: [49, 31],
data,
};
};
......@@ -556,10 +617,10 @@ const returnXAxis = ({
let markLine = showMarkLine
? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes)
: {};
let markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
// let markPoint = showPoint ? minMaxMarkPoint(item, index, dataSource) : {};
let markPoint = {};
let _lineStyle = {};
if (item.deviceType === '预测' && chartType === 'lineChart') {
// markPoint = minMaxMarkPointForPredicateDevice(item, index, dataSource);
markPoint = null;
markLine = null;
_lineStyle = {
......@@ -571,7 +632,6 @@ const returnXAxis = ({
}
}
}
// 需求新增：增加频率业务
return {
notMerge: true,
name,
......@@ -1241,15 +1301,16 @@ const optionGenerator = (
}
}
// 单曲线需要标记最大值、最小值的情况下，需要增加自定义的series，将最大最小值显示在图表上
if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') {
let _dataSource = dataSource?.filter((item) => item?.dataModel?.length);
if (_dataSource?.length) {
let _customSeries = returnCustomSeries(dataSource);
if (_customSeries) {
series.push(_customSeries);
}
}
}
// 2024年3月11日 废弃在图表左上角标记最大值最小值的做法，采用在图表中标记并显示出值的做法。注释暂时保留 edit by chenlong
/* if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') {
let _dataSource = dataSource?.filter((item) => item?.dataModel?.length);
if (_dataSource?.length) {
let _customSeries = returnCustomSeries(dataSource);
if (_customSeries) {
series.push(_customSeries);
}
}
}*/
} else {
tooltip = tooltipAccessor(
series.map((item) => item.unit),
......
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