feat: 优化显示

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

@@ -33,7 +33,7 @@ const Demo = () => {
                 <HistoryView deviceParams={deviceParams} defaultModel="curve"/>
             </div>
             <div style={{height: 300}}>
-                <MobileHistoryChart deviceParams={deviceParams} chartType={'lineChart'}/>
+                <MobileHistoryChart deviceParams={deviceParams} chartType={'boxChart'}/>
             </div>
         </div>
 

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

@@ -40,14 +40,14 @@ const MobileHistoryChart = (
         date = {
             dateFrom: moment().format(`${DATE_FORMAT} 00:00:00`),
             dateTo: moment().format(`${DATE_FORMAT} 23:59:59`)
-        },
-        deviceParams = [],
-        ignoreOutliers = true,
-        isDilute = true,
-        needMarkLine = true,
-        showBoxOption = true, //
-        chartGrid = true,
+        },// 默认当天
+        deviceParams = [],  // 设备参数，必传
         chartType='lineChart', // lineChart boxChart
+        ignoreOutliers = true, // 滤波
+        isDilute = true,  // 抽稀去重
+        needMarkLine = true,
+        showBoxOption = true, // 开启箱线图配置，默认开启
+        chartGrid = true, // 开启网格
     }
 ) => {
     const [deviceAlarmSchemes, setDeviceAlarmSchemes] = useState(null);
@@ -57,7 +57,7 @@ const MobileHistoryChart = (
     const isBoxPlots =
         deviceParams?.length === 1 && deviceParams[0]?.sensors?.split(',').length === 1;
     const handleDataThinKey = (diffDays) => {
-        // 移动端缩放的抽稀一倍
+        // 移动端缩放的抽稀一倍，需要实际调试
         if (diffDays >= 7 && diffDays < 15) {
             return {unit: 'h', zoom: '4'};
         } else if (diffDays >= 15 && diffDays < 30) {
@@ -69,7 +69,7 @@ const MobileHistoryChart = (
         } else if (diffDays < 2 && diffDays >= 1) {
             return {unit: 'min', zoom: '60'};
         } else {
-            return {unit: 'min', zoom: '20'};
+            return {unit: 'min', zoom: '60'};
         }
     };
 

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

@@ -13,7 +13,7 @@ const COLOR = {
     LOWLOWER: '#FF0000',
     AVG: '#00B8B1',
 };
-const isMobile =() => {
+const isMobile = () => {
     const userAgent = navigator.userAgent.toLowerCase();
     if (
         /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(
@@ -33,7 +33,7 @@ const isMobile =() => {
  * @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, '');
@@ -70,7 +70,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;
 };
 
@@ -81,7 +81,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) => {
@@ -112,7 +112,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 &&
@@ -121,7 +121,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'));
@@ -152,8 +152,8 @@ export const minMaxMarkPoint = (dataItem, index, dataSource) => {
     // 只有一个数据曲线时显示markline
     if (!dataItem || dataSource.length !== 1) return {};
     const data = [];
-  data.push({ type: 'min', name: '最小: ' });
-  data.push({ type: 'max', name: '最大: ' });
+    data.push({type: 'min', name: '最小: '});
+    data.push({type: 'max', name: '最大: '});
     return {
         symbolSize: 1,
         symbolOffset: [0, '50%'],
@@ -223,7 +223,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;
@@ -279,7 +279,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     // 一种指标一个y轴
     const yAxisMap = new Map();
     dataSource.forEach((item, index) => {
-    const { sensorName, unit } = item;
+        const {sensorName, unit} = item;
         const key = sensorName;
 
         if (!yAxisMap.has(key)) {
@@ -325,7 +325,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         const axis = yAxisMap.get(key);
         decorateAxisGridLine(axis, showGridLine);
     });
-  const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
+    const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : {type: 'value'};
 
     // 根据y轴个数调整边距
     const leftNum = Math.ceil(yAxisMap.size / 2);
@@ -338,7 +338,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     };
     const headTemplate = (param) => {
         if (!param) return '';
-    const { name, axisValueLabel, axisType, axisValue } = param;
+        const {name, axisValueLabel, axisType, axisValue} = param;
         const timeFormat = 'YYYY-MM-DD HH:mm:ss';
         const text =
             axisType === 'xAxis.time' ? moment(axisValue).format(timeFormat) : name || axisValueLabel;
@@ -346,19 +346,19 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     };
     const seriesTemplate = (param, unit) => {
         if (!param) return '';
-    const { value, encode } = param;
+        const {value, encode} = param;
         // const val = value[encode.y[0]];
         const _unit = unit || 'Mpa';
         const color = '#008CFF';
         if (!isArray(value))
             return ` <div style="display: flex; align-items: center;">
-            <span>${param.seriesName}</span><span style="display:inline-block;">：</span>
+            <span>${isMobile() ? '实际值' : param.seriesName}</span><span style="display:inline-block;">：</span>
             <span style="color:${color};margin: 0 5px 0 auto;">${value?.toFixed(3) ?? '-'}</span>
             <span style="font-size: 12px;">${_unit}</span>
         </div>`;
         return param.componentSubType !== 'candlestick'
             ? `<div style="display: flex; align-items: center;">
-              <span>${param.seriesName}</span><span style="display:inline-block;">：</span>
+              <span>${isMobile() ? '实际值' : param.seriesName}</span><span style="display:inline-block;">：</span>
               <span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[1] ?? '-'}</span>
               <span style="font-size: 12px;">${_unit}</span>
             </div>`
@@ -413,7 +413,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         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 = [];
     let series = dataSource
@@ -424,7 +424,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
             return 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';
@@ -438,9 +438,9 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
             // 需求变更：设备离线改用“是否在线”的数据，离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
             let _offlineAreasData = _offlineData
                 .map((item) => {
-          let _item = { ...item };
+                    let _item = {...item};
                     _item.dataModel = item.dataModel.map((d) => {
-            let _d = { ...d };
+                        let _d = {...d};
                         _d.pv = 0;
                         return _d;
                     });
@@ -475,7 +475,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
             .map((item) => item.data?.[item.data.length - 1]?.[0])
             .filter((item) => item !== undefined),
     );
-  let xAxis = { type: 'time', min, max };
+    let xAxis = {type: 'time', min, max};
     decorateAxisGridLine(xAxis, showGridLine);
     const tooltipTimeFormat = !contrast
         ? 'YYYY-MM-DD HH:mm:ss'
@@ -494,16 +494,16 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         if (chartType === 'boxChart') {
             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: '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) => {
                 if (item.unit) unit = item.unit;
-        let _item = { ...item, symbol: 'none' };
+                let _item = {...item, symbol: 'none'};
                 /*                _item.data = _item?.data?.map(d => {
                                             return d[1] || null
                                         }) || [];*/
@@ -532,14 +532,14 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
                     : `${_currentYear}-01-DD HH:mm:00`; // 用来做同期对比，把日期拉到同一区间
             let _maxValues = [];
             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([moment(time).valueOf(), (maxPV - minPV).toFixed(2)]);
                 _minData.push([moment(time).valueOf(), minPV]);
             }); //当存在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) => {
@@ -573,7 +573,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
                     <div>
                         <div style="display: flex; align-items: center;">
                               <span>${
-                                isMobile()?'当前值':e[0].seriesName
+                        isMobile() ? '当前值' : e[0].seriesName
                     }</span><span style="display:inline-block;">：</span>
                               <span style="color: ${COLOR.NORMAL};margin: 0 5px 0 auto;">${
                         e[0]?.value?.[1] ?? '-'