feat: 单曲线legend配置设定默认值

packages/extend-components/EC_HistoryView/src/demos/index.js

@@ -4,16 +4,17 @@ import { MobileHistoryChart } from "../mobile";
 
 const deviceParams = [
     /*10.182*/
-         {
+/*         {
             "deviceCode": "EGBF00000136",
-            "sensors": "进水压力,出水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警",
-            // "sensors": "视频报警",
+            // "sensors": "进水压力,出水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警",
+            "sensors": "视频报警",
             "deviceType": "二供泵房"
-        },
+        },*/
        {
             "deviceCode": "EGJZ00000158",
             // "sensors": "进水压力,出水压力,泵1状态",
-            "sensors": "泵1状态",
+            "sensors": "进水压力",
+            // "sensors": "泵1状态",
             "deviceType": "二供机组"
         }
 /*              {
@@ -107,18 +108,18 @@ const deviceParams = [
         },*/
     /*确山*/
     /*泵3状态*/
-    /*    {
+/*        {
             // EGJZ00000003
             deviceCode: 'EGJZ00000003',
             // sensors: '3#频率',
             sensors: '出1累计流量',
             deviceType: '二供机组',
-        }, */
+        },*/
 /*         {
             "deviceCode": "EGBF00000006",
             "sensors": "出1累计流量",
             "deviceType": "二供泵房"
-        } */
+        }*/
 ];
 const Demo = () => {
     return (

packages/extend-components/EC_HistoryView/src/utils.js

 import moment from 'moment';
-import _, { isArray } from 'lodash';
+import _, {isArray} from 'lodash';
 import maxIcon from './assets/最大实心.svg';
 import minIcon from './assets/最小实心.svg';
 import minIconDownArrow from './assets/最小实心箭头朝下.svg';
@@ -68,7 +68,7 @@ const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION;
  * @returns
  */
 const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
-    const { equipmentName, sensorName, unit, dataModel, dateFrom, dateTo } = data;
+    const {equipmentName, sensorName, unit, dataModel, dateFrom, dateTo} = data;
     let name = nameWithSensor ? `${equipmentName}-${sensorName}` : equipmentName;
     if (contrast) {
         const time = dateFrom.slice(0, contrastOption === 'day' ? 10 : 7).replace(/-/g, '');
@@ -103,7 +103,7 @@ const dataAccessor = (data, contrast, contrastOption) => {
  * @returns Null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图.
  */
 const areaStyleFormatter = (data) => {
-    const { sensorName } = data;
+    const {sensorName} = data;
     return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
 };
 
@@ -114,7 +114,7 @@ const areaStyleFormatter = (data) => {
  * @returns
  */
 const minMax = (data) => {
-    const { dataModel } = data;
+    const {dataModel} = data;
     let min = Number.MAX_SAFE_INTEGER;
     let max = Number.MIN_SAFE_INTEGER;
     dataModel.forEach((item) => {
@@ -145,7 +145,7 @@ const markLineItem = (name, value, color) => {
 export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
     // 只有一个数据曲线时显示markline
     if (!dataItem || !schemes || dataSource.length !== 1) return {};
-    const { deviceType, stationCode, sensorName, decimalPoint } = dataItem;
+    const {deviceType, stationCode, sensorName, decimalPoint} = dataItem;
     const curSchemes = schemes.filter(
         (item) =>
             item.deviceCode === stationCode &&
@@ -154,7 +154,7 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
     );
     const data = [];
     curSchemes.forEach((scheme) => {
-        const { hLimit, hhLimit, lLimit, llLimit } = scheme;
+        const {hLimit, hhLimit, lLimit, llLimit} = scheme;
         lLimit !== null && lLimit !== void 0 && data.push(markLineItem('低限', lLimit, '#fa8c16'));
         hLimit !== null && hLimit !== void 0 && data.push(markLineItem('高限', hLimit, '#fa8c16'));
         llLimit !== null && llLimit !== void 0 && data.push(markLineItem('低低限', llLimit, '#FF0000'));
@@ -246,7 +246,7 @@ export const decorateAxisGridLine = (axis, showGrid) => {
  */
 export const offlineArea = (dataItem) => {
     if (!dataItem) return {};
-    const { dataModel } = dataItem;
+    const {dataModel} = dataItem;
     let datas = new Array();
     let offlineData = [];
     let hasOffline = false;
@@ -256,7 +256,7 @@ export const offlineArea = (dataItem) => {
                 {
                     name: '离线',
                     xAxis: new Date(item.pt),
-                    label: { show: !datas?.length },
+                    label: {show: !datas?.length},
                 },
             ];
             hasOffline = true;
@@ -280,7 +280,7 @@ export const offlineArea = (dataItem) => {
 // tooltip 模板
 const headTemplate = (param, opt) => {
     if (!param) return '';
-    const { name, axisValueLabel, axisType, axisValue } = param;
+    const {name, axisValueLabel, axisType, axisValue} = param;
     const timeFormat =
         opt && opt.contrast
             ? opt.contrastOption === 'day'
@@ -296,7 +296,7 @@ const headTemplate = (param, opt) => {
 };
 const seriesTemplate = (param, unit) => {
     if (!param || param.seriesName === '自定义') return '';
-    const { value, encode } = param;
+    const {value, encode} = param;
     // const val = value[encode.y[0]];
     const _unit = unit || '';
     const color = '#008CFF';
@@ -445,7 +445,7 @@ const handleSpecial1 = (special, dataSource) => {
                             },
                         },
                         name: item.text,
-                        label: { show: true },
+                        label: {show: true},
                     },
                     {
                         xAxis: item.lte,
@@ -491,17 +491,17 @@ const returnXAxis = ({
                          smooth,
                          special,
                          yAxis
-}) => {
+                     }) => {
     // 根据"指标名称"分类yAxis
     const yAxisInterator = (() => {
         const map = new Map();
         let current = -1;
         const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name));
-        return { get };
+        return {get};
     })();
     let _offlineData = [];
     // 生成visualMap、markArea
-    let { visualMap, markArea } = handleSpecial1(special, dataSource);
+    let {visualMap, markArea} = handleSpecial1(special, dataSource);
     let _filterArr = ['是否在线'];
     if (special?.special1?.name) {
         _filterArr.push(special.special1.name);
@@ -515,7 +515,7 @@ const returnXAxis = ({
             return !_filterArr.includes(item.sensorName);
         })
         .map((item, index) => {
-            const { sensorName, unit } = item;
+            const {sensorName, unit} = item;
             const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
             const data = dataAccessor(item, contrast, contrastOption);
             const type = 'line';
@@ -676,11 +676,11 @@ const reduceYAxis = (arr, dataSource) => {
  *  @param {boolean} showGridLine 是否显示网格线。
  *  @return {object} 返回左右轴的margin、yAxis的配置。
  * */
-const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
+const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
     const yAxisMap = new Map();
     // 1. 找出最大值; 2. 计算出y轴最大宽度动态计算偏移距离；
     dataSource.forEach((item, index) => {
-        const { sensorName, unit } = item;
+        const {sensorName, unit} = item;
         const key = sensorName;
         if (!yAxisMap.has(key)) {
             /*      const i = yAxisMap.size;
@@ -727,10 +727,10 @@ const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
         const axis = yAxisMap.get(key);
         decorateAxisGridLine(axis, showGridLine);
     });
-    const yAxis = yAxisMap.size > 0 ? reduceYAxis([...yAxisMap.values()], dataSource) : { type: 'value' };
+    const yAxis = yAxisMap.size > 0 ? reduceYAxis([...yAxisMap.values()], dataSource) : {type: 'value'};
     const leftNum = Math.ceil(yAxisMap.size / 2);
     const rightNum = Math.floor(yAxisMap.size / 2);
-    return { leftNum, rightNum, yAxis };
+    return {leftNum, rightNum, yAxis};
 };
 /**
  *  1. 最后的配置处理、合并
@@ -777,7 +777,19 @@ const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contr
     ];
     xAxis.minInterval = 3600 * (1 * 1000);
     if (legendData) {
-        restOption.legend = { ...restOption.legend, ...{ data: legendData } };
+        restOption.legend = {
+            ...{
+                show: true,
+                // data: legend,
+                // selectedMode: false,
+                left: 'right',
+                top: 30,
+                icon: 'rect',
+                itemWidth: 14,
+                itemHeight: 8,
+                itemGap: 20,
+            }, ...restOption.legend, ...{data: legendData}
+        };
     }
 };
 
@@ -966,13 +978,13 @@ const optionGenerator = (
         restOption,
         special,
     } = handleDefault(config, cusOption);
-    const { leftNum, rightNum, yAxis } = handleYAxis({
+    const {leftNum, rightNum, yAxis} = handleYAxis({
         dataSource,
         needUnit,
         curveCenter,
         showGridLine,
     });
-    let { xAxis, series, visualMap } = returnXAxis({
+    let {xAxis, series, visualMap} = returnXAxis({
         dataSource,
         contrast,
         contrastOption,
@@ -999,16 +1011,16 @@ const optionGenerator = (
         if (chartType === 'boxChart' && lineDataType === '特征曲线') {
             const otherData =
                 dataSource?.[0]?.dataModel.map((item) => {
-                    const { firstPV, lastPV, maxPV, minPV, pt } = item;
+                    const {firstPV, lastPV, maxPV, minPV, pt} = item;
                     return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV];
                 }) || []; //当存在othersData的时候，只是单曲线
-            xAxis = { type: 'time' };
+            xAxis = {type: 'time'};
             decorateAxisGridLine(xAxis, showGridLine);
             let unit = [];
             series = series.map((item) => {
                 if (item.unit) unit.push(item.unit);
                 item.areaStyle = null;
-                return { ...item, showSymbol: false };
+                return {...item, showSymbol: false};
             });
             series.push({
                 type: 'candlestick',
@@ -1039,7 +1051,7 @@ const optionGenerator = (
              *  2. 当最大值小于零时（此时，最小值一定小于零）；
              */
             dataSource?.[0]?.dataModel.forEach((item) => {
-                const { firstPV, lastPV, maxPV, minPV, pt } = item;
+                const {firstPV, lastPV, maxPV, minPV, pt} = item;
                 _maxValues.push(maxPV);
                 let time = contrast ? moment(pt).format(formatStr) : pt;
                 _maxData.push([
@@ -1049,13 +1061,13 @@ const optionGenerator = (
                 _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' };
+            xAxis = {type: 'time'};
             decorateAxisGridLine(xAxis, showGridLine);
             let _unit = '';
             series = series.map((item) => {
                 _unit = item.unit ?? '';
                 item.areaStyle = null;
-                return { ...item, showSymbol: false };
+                return {...item, showSymbol: false};
             });
             [[..._minData], [..._maxData]].forEach((item, index) => {
                 series.push({
@@ -1128,7 +1140,7 @@ const optionGenerator = (
     } else {
         tooltip = tooltipAccessor(
             series.map((item) => item.unit),
-            { contrastOption, contrast },
+            {contrastOption, contrast},
         );
     }
     tooltip.timeFormat = tooltipTimeFormat;
@@ -1213,34 +1225,35 @@ const handleSpecial2 = (special, sensorName, sensorType, data1, data2) => {
         }
         name = _switchNameMap[data1.pv];
         color = _switchColorMap[data1.pv];
-    };
+    }
+    ;
     value1 = moment(data1.pt).valueOf();
     value2 = moment(data2.pt).valueOf();
-    return { color, value1, value2, name }
+    return {color, value1, value2, name}
 };
 const handleDataToSeries = (special, sensorName, sensorType, data) => {
     let _data = [];
     let _legend = []
     data.forEach((item, index) => {
         if (index === data.length - 1) return;
-        let { color, value1, value2, name } = handleSpecial2(special, sensorName, sensorType, item, data[index + 1])
+        let {color, value1, value2, name} = handleSpecial2(special, sensorName, sensorType, item, data[index + 1])
         if (!_legend.includes(name)) _legend.push(name);
         _data.push({
-            itemStyle: { normal: { color } },
+            itemStyle: {normal: {color}},
             name: name,
             value: [0, value1, value2, `${item.pt}-${data[index + 1].pt}`]
         });
     });
-    return { data: _data, legend: _legend };
+    return {data: _data, legend: _legend};
 };
 
-const specialTypeChartOptionGenerator = ({ dataSource, cusOption, contrast, contrastOption, smooth, config }) => {
-    const { special, sensorType } = config;
-    const { allSensorType, allPointAddress } = special;
+const specialTypeChartOptionGenerator = ({dataSource, cusOption, contrast, contrastOption, smooth, config}) => {
+    const {special, sensorType} = config;
+    const {allSensorType, allPointAddress} = special;
     // 处理原始数据，处理数据为后series数据
     const sensorName = dataSource[0].sensorName;
     let _data = handleDataSource(dataSource);
-    let { data, legend } = handleDataToSeries(special, sensorName, sensorType, _data);
+    let {data, legend} = handleDataToSeries(special, sensorName, sensorType, _data);
     // 1. x/y轴
     let xAxis = {
         type: 'time',
@@ -1323,10 +1336,11 @@ const specialTypeChartOptionGenerator = ({ dataSource, cusOption, contrast, cont
                 开: '#1685ff'
             }
             return {
-                type:'custom',
-                name:item,
-                color:_map[item],
-                renderItem:()=>{}
+                type: 'custom',
+                name: item,
+                color: _map[item],
+                renderItem: () => {
+                }
             }
         })
     ];