Commit d09dcf16 authored by 陈龙's avatar 陈龙

feat: 修改markPoint交互样式

parent 537a8e1f
<?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>
<?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>
<?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>
<?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>
...@@ -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",
......
...@@ -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);
......
...@@ -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: false, show: true,
}, },
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,15 +1301,16 @@ const optionGenerator = ( ...@@ -1241,15 +1301,16 @@ const optionGenerator = (
} }
} }
// 单曲线需要标记最大值、最小值的情况下,需要增加自定义的series,将最大最小值显示在图表上 // 单曲线需要标记最大值、最小值的情况下,需要增加自定义的series,将最大最小值显示在图表上
if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') { // 2024年3月11日 废弃在图表左上角标记最大值最小值的做法,采用在图表中标记并显示出值的做法。注释暂时保留 edit by chenlong
let _dataSource = dataSource?.filter((item) => item?.dataModel?.length); /* if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') {
if (_dataSource?.length) { let _dataSource = dataSource?.filter((item) => item?.dataModel?.length);
let _customSeries = returnCustomSeries(dataSource); if (_dataSource?.length) {
if (_customSeries) { let _customSeries = returnCustomSeries(dataSource);
series.push(_customSeries); if (_customSeries) {
} series.push(_customSeries);
} }
} }
}*/
} else { } else {
tooltip = tooltipAccessor( tooltip = tooltipAccessor(
series.map((item) => item.unit), 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