feat: 调整历史曲线

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

@@ -3,13 +3,13 @@ import HistoryView from '../index';
 import {MobileHistoryChart} from "../mobile";
 
 const deviceParams = [
-    {
-        deviceCode: 'EGBF00000141',
-        // sensors: '进水压力,出水瞬时流量,出水累计流量',
-        sensors: '进水压力',
-        deviceType: '二供泵房',
-        pointAddressID: 208,
-    },
+    /*    {
+            deviceCode: 'EGBF00000141',
+            // sensors: '进水压力,出水瞬时流量,出水累计流量',
+            sensors: '进水压力',
+            deviceType: '二供泵房',
+            pointAddressID: 208,
+        },*/
     /*    {
             "deviceCode": "SYJ00000008",
             "sensors": "瞬时流量",
@@ -32,28 +32,42 @@ const deviceParams = [
               deviceType: '二供机组',
               pointAddressID: 4,
             },*/
-    /*    {
-            "deviceCode": "LLJ00000055",
-            "sensors": "正累计流量,瞬时流量,是否在线",
-            "deviceType": "流量计"
-        }*/
+    /*        {
+                "deviceCode": "LLJ00000055",
+                "sensors": "正累计流量,瞬时流量,是否在线",
+                "deviceType": "流量计"
+            }*/
     /*    {
             "deviceCode": "EGJZ00000163",
             "sensors": "进水压力,是否在线",
             "deviceType": "二供机组"
         }*/
     // 邳州张楼水厂
-    /*    {
-            "deviceCode": "SC00000023",
-            "sensors": "出水压力",
-            "deviceType": "水厂"
-        }*/
-    /*
-        {
-            "deviceCode": "JFJ00000001",
-            "sensors": "沉淀池投矾量瞬时,",
-            "deviceType": "加矾间"
-        }*/
+    /*        {
+                "deviceCode": "SC00000023",
+                "sensors": "出水压力",
+                "deviceType": "水厂"
+            }*/
+    /*        {
+                "deviceCode": "JFJ00000001",
+                "sensors": "沉淀池投矾量瞬时,",
+                "deviceType": "加矾间"
+            }*/
+/*    {
+        "deviceCode": "QSBF00000001",
+        "sensors": "取水浊度",
+        "deviceType": "取水泵房"
+    }*/
+/*    {
+        "deviceCode": "SC00000023",
+        "sensors": "出水瞬时流量,是否在线",
+        "deviceType": "水厂"
+    }*/
+    {
+        "deviceCode": "XNCDC00000001",
+        "sensors": "沉淀池1号进水管流量",
+        "deviceType": "絮凝沉淀池"
+    }
 ];
 const Demo = () => {
     return (

packages/extend-components/EC_HistoryView/src/index.less

@@ -38,6 +38,34 @@
     height: 100%;
   }
 
+  .@{history-view}-progressWrapper {
+    z-index: 100;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .@{history-view}-progress {
+      display: inline-flex;
+    }
+
+    .@{history-view}-tip {
+      display: inline-block;
+      margin-top: 10px;
+      color: #1890ff;
+    }
+  }
+
+  .@{history-view}-progress {
+
+  }
+
   .@{history-view}-single-panel {
     display: flex;
     flex-direction: column;
@@ -205,3 +233,36 @@
   align-items: center;
   margin-bottom: 0.3rem;
 }
+
+.@{history-view}-blink-2 {
+  -webkit-animation: blink-2 10s infinite both;
+  animation: blink-2 10s infinite both;
+}
+
+/**
+ * ----------------------------------------
+ * animation blink-2
+ * ----------------------------------------
+ */
+@-webkit-keyframes blink-2 {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes blink-2 {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -546,7 +546,7 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
     const rightNum = Math.floor(yAxisMap.size / 2);
     return {leftNum, rightNum, yAxis};
 }
-const assignOptions = (restOption, xAxis, legendData, chartType) => {
+const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contrastOption) => {
     restOption.dataZoom = [
         {
             show: true,
@@ -566,6 +566,14 @@ const assignOptions = (restOption, xAxis, legendData, chartType) => {
             height: currentOption['dataZoomHeight'],
             type: 'slider',
             zoomOnMouseWheel: true,
+            labelFormatter: function (e) {
+                let _formatterStr = 'YYYY-MM-DD HH:mm:ss';
+                if (contrast) {
+                    if (contrastOption === 'day') _formatterStr = 'HH:mm';
+                    if (contrastOption === 'month') _formatterStr = 'MM月DD日 HH时';
+                }
+                return moment(e).format(_formatterStr)
+            }
         },
     ];
     xAxis.minInterval = 3600 * (1 * 1000);
@@ -576,6 +584,12 @@ const assignOptions = (restOption, xAxis, legendData, chartType) => {
 
 const returnMaxOrMinNumber = (dataSource, type) => {
     let _obj = null;
+    if (type === 'period' && dataSource?.[0]?.dataModel?.length) {
+        let _length = dataSource?.[0]?.dataModel?.length;
+        let _first = dataSource?.[0]?.dataModel[0]?.pt;
+        let _last = dataSource?.[0]?.dataModel[_length - 1]?.pt;
+        return ['展示时段: ', _first, _last, type]
+    }
     dataSource?.[0]?.dataModel.filter(item => item.pv !== null).forEach(item => {
         if (!_obj) {
             _obj = item;
@@ -667,6 +681,7 @@ const renderItem = (params, api) => {
 const returnCustomSeries = (dataSource) => {
     let _maxNumber = returnMaxOrMinNumber(dataSource, 'max');
     let _minNumber = returnMaxOrMinNumber(dataSource, 'min');
+    // let _period = returnMaxOrMinNumber(dataSource, 'period');
     // 需要将最大值最小分别传入，后续计算图例位置需要，先min后max
     let _max = _maxNumber[1];
     let _min = _minNumber[1];
@@ -813,13 +828,13 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
                     }</span>
                               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
                             </div>
-                            <div style="display: ${lineDataType==='特征曲线'?'flex':'none'}; align-items: center;">
+                            <div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'}; align-items: center;">
                               <span>周期最小值</span><span style="display:inline-block;">：</span>
                               <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${e?.[1]?.value?.[1] ?? '-'
                     }</span>
                               <span style="font-size: ${handlePx(12, 'px')};">${_unit ?? ''}</span>
                             </div>
-                            <div style="display: ${lineDataType==='特征曲线'?'flex':'none'}; align-items: center;">
+                            <div style="display: ${lineDataType === '特征曲线' ? 'flex' : 'none'}; align-items: center;">
                               <span>周期最大值</span><span style="display:inline-block;">：</span>
                               <span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${_maxValues[e?.[2]?.dataIndex] ?? '-'
                     }</span>
@@ -840,7 +855,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     }
     tooltip.timeFormat = tooltipTimeFormat;
     let _legendData = series.filter(item => !['周期最大值', '周期最小值', '自定义'].includes(item.name)).map(item => item.name);
-    assignOptions(restOption, xAxis, _legendData, chartType);
+    assignOptions(restOption, xAxis, _legendData, chartType, contrast, contrastOption);
     return {
         yAxis,
         grid,