feat: 历史曲线优化表格数据下载的展示

packages/extend-components/EC_HistoryView/src/EC_HistoryView.md

@@ -24,6 +24,16 @@ path: /
 
 <code src="./demos/index.js"></code>
 
+## 单图表-状态
+
+[//]: # (<code src="./demos/indexForStatus.js"></code>)
+
+## 单图表-频率
+
+<code src="./demos/indexForFrequency.js"></code>
+
+
+
 [//]: # (## 移动端)
 
 [//]: # (<code src="./demos/mobile.js"></code>)

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

@@ -4,12 +4,12 @@ import { MobileHistoryChart } from "../mobile";
 
 const deviceParams = [
     /*10.182*/
-/*         {
+         {
             "deviceCode": "EGBF00000136",
-            // "sensors": "进水压力,出水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警",
-            "sensors": "视频报警",
+            "sensors": "进水压力,出水压力,出水瞬时流量,今日供水量,1#水箱液位,视频报警",
+            // "sensors": "视频报警",
             "deviceType": "二供泵房"
-        },*/
+        },
        {
             "deviceCode": "EGJZ00000158",
             // "sensors": "进水压力,出水压力,泵1状态",
@@ -71,11 +71,11 @@ const deviceParams = [
             "deviceType": "二供机组"
         }*/
     // 邳州张楼水厂
-    /*     {
+/*         {
             "deviceCode": "SC00000023",
             "sensors": "瞬时流量",
             "deviceType": "水厂"
-        }, */
+        },*/
 /*        {
             "deviceCode": "JFJ00000001",
             "sensors": "沉淀池投矾量瞬时,",
@@ -121,13 +121,16 @@ const deviceParams = [
             "deviceType": "二供泵房"
         }*/
 ];
+
 const Demo = () => {
     return (
+        <>
             <div>
                 <div style={{ height: 700 }}>
                     <HistoryView deviceParams={deviceParams} defaultModel="curve" />
                 </div>
             </div>
+        </>
     );
 };
 

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

+import React from 'react';
+import HistoryView from '../index';
+
+const deviceParams2 = [
+    {
+        deviceCode:'EGJZ00000223',
+        sensors: '1#变频器运行频率',
+        deviceType: '二供机组',
+    }
+]
+const Demo = () => {
+    return (
+        <>
+            <div>
+                <div style={{height: 700}}>
+                    <HistoryView deviceParams={deviceParams2} defaultModel="curve"/>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Demo;
\ No newline at end of file

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

+import React from 'react';
+import HistoryView from '../index';
+
+const deviceParams2 = [
+    {
+        "deviceCode": "EGJZ00000319",
+        // "sensors": "进水压力,出水压力,泵1状态",
+        // "sensors": "进水压力",
+        "sensors": "泵1状态",
+        "deviceType": "二供机组"
+    }
+]
+const Demo = () => {
+    return (
+        <>
+            <div>
+                <div style={{height: 700}}>
+                    <HistoryView deviceParams={deviceParams2} defaultModel="curve"/>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Demo;
\ No newline at end of file

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

@@ -594,7 +594,6 @@ const handleDefault = (config, cusOption) => {
     const showPoint = _.get(config, 'showPoint', false);
     const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
     const chartType = _.get(config, 'chartType', null);
-    // const justLine = _.get(config, 'justLine', false);
     const showBoxOption = _.get(config, 'showBoxOption', false);
     // 自定义属性
     const restOption = _.pick(cusOption, ['title', 'legend']);
@@ -683,17 +682,9 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
         const {sensorName, unit} = item;
         const key = sensorName;
         if (!yAxisMap.has(key)) {
-            /*      const i = yAxisMap.size;
-                  let _offset = _maxValueArray[i - 2];
-                  let _baseOffset = _offsetValue[i - 2] ?? 0;
-                  let _finalOffset = (_offset !== undefined ? (_offset === 0 ? 2 : _offset.toString().replaceAll('.','').length) * 10 : 0) + _baseOffset;
-                  _offsetValue.push(_finalOffset);*/
             const axis = {
                 type: 'value',
                 name: needUnit ? unit : null,
-                // position: i % 2 === 0 ? 'left' : 'right',
-                // offset: _offset !== undefined ? (_offset === 0? 2:_offset.toString().length) * 10 : 0,
-                // offset: _finalOffset,
                 axisLabel: {
                     formatter: (value) => {
                         return handleMaxValue(value);
@@ -780,9 +771,7 @@ const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contr
         restOption.legend = {
             ...{
                 show: true,
-                // data: legend,
-                // selectedMode: false,
-                left: 'right',
+                right:10,
                 top: 30,
                 icon: 'rect',
                 itemWidth: 14,
@@ -836,10 +825,8 @@ const handleGrid = (dataSource, needUnit, leftNum, rightNum, chartType) => {
     let _topForUnit = needUnit ? 20 : 0;
     return {
         top: _base + _topForUnit,
-        // left: leftNum === 1 ? 10 : leftNum * AXIS_WIDTH,
         left: 30,
         right: 10,
-        // right: rightNum === 0 ? 20 : rightNum * AXIS_WIDTH,
         bottom: 60,
         containLabel: true,
     };
@@ -1007,7 +994,7 @@ const optionGenerator = (
             : 'DD HH:mm';
     let tooltip = {};
     // 增加箱线图的逻辑，单曲线才存在该逻辑
-    if (chartType && showBoxOption) {
+    if (chartType && showBoxOption && !special?.special1?.name) {
         if (chartType === 'boxChart' && lineDataType === '特征曲线') {
             const otherData =
                 dataSource?.[0]?.dataModel.map((item) => {
@@ -1022,7 +1009,8 @@ const optionGenerator = (
                 item.areaStyle = null;
                 return {...item, showSymbol: false};
             });
-            series.push({
+            // 箱线图去除曲线 2023年10月17日
+            series=[{
                 type: 'candlestick',
                 name: '箱线图',
                 symbol: 'none',
@@ -1033,7 +1021,7 @@ const optionGenerator = (
                     borderColor: '#FFA200',
                     borderColor0: '#44CD00',
                 },
-            });
+            }];
             tooltip = tooltipAccessor(unit);
         }
         if (chartType === 'lineChart' || lineDataType === '原始曲线') {
@@ -1160,8 +1148,8 @@ const optionGenerator = (
     return _options;
 };
 
-
 export default optionGenerator;
+
 const handleDataSource = (dataSource) => {
     let _temp = null;
     let _data = [];
@@ -1226,14 +1214,14 @@ 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}
 };
 const handleDataToSeries = (special, sensorName, sensorType, data) => {
     let _data = [];
-    let _legend = []
+    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])
@@ -1286,7 +1274,7 @@ const specialTypeChartOptionGenerator = ({dataSource, cusOption, contrast, contr
         splitLine: {
             show: true
         },
-        "minInterval": 3600000
+        minInterval: 3600 * 1000
     };
     let yAxis = {
         data: [dataSource[0].sensorName],
@@ -1355,13 +1343,13 @@ const specialTypeChartOptionGenerator = ({dataSource, cusOption, contrast, contr
         show: true,
         data: legend,
         selectedMode: false,
-        left: 'right',
+        right: 10,
         top: 30,
         icon: 'rect',
         itemWidth: 14,
         itemHeight: 8,
         itemGap: 20,
-    }
+    };
     let _option = {
         xAxis,
         yAxis,