fix: 曲线优化

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

@@ -76,6 +76,7 @@ const SimgleChart = memo((props) => {
     const axisConfig = {
       minorTick: {
         show: showGridLine,
+        splitNumber: 2,
       },
       minorSplitLine: {
         show: showGridLine,

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

@@ -23,3 +23,12 @@ export function getDeviceAlarmScheme(option) {
     ...option,
   });
 }
+
+// 导出设备指标历史数据
+export function getExportDeviceHistoryUrl(data) {
+  return request({
+    url: `${monitorDeviceUrl}/ExportDeviceHistoryInfo`,
+    method: REQUEST_METHOD_POST,
+    data,
+  });
+}

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

 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Checkbox, ConfigProvider, DatePicker, Radio, Select, Spin, Tabs, Tooltip } from 'antd';
-import { CloseCircleFilled, PlusCircleOutlined, QuestionCircleFilled } from '@ant-design/icons';
+import {
+  Checkbox,
+  ConfigProvider,
+  DatePicker,
+  Radio,
+  Select,
+  Spin,
+  Tabs,
+  Tooltip,
+  Button,
+} from 'antd';
+import {
+  CloseCircleFilled,
+  PlusCircleOutlined,
+  QuestionCircleFilled,
+  DownloadOutlined,
+} from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
 import TimeRangePicker from '@wisdom-components/timerangepicker';
 import PandaEmpty from '@wisdom-components/empty';
 import BasicTable from '@wisdom-components/basictable';
-import { getHistoryInfo, getDeviceAlarmScheme } from './apis';
+import { getHistoryInfo, getDeviceAlarmScheme, getExportDeviceHistoryUrl } from './apis';
 import SimgleChart from './SingleChart';
 import GridChart from './GridChart';
 import './index.less';
+import { globalConfig } from 'antd/lib/config-provider';
 
 const { RangePicker } = DatePicker;
 const { Option } = Select;
@@ -19,16 +35,9 @@ const { Option } = Select;
 const startFormat = 'YYYY-MM-DD 00:00:00';
 const endFormat = 'YYYY-MM-DD 23:59:59';
 const timeFormat = 'YYYY-MM-DD HH:mm:ss';
+const dateFormat = 'YYYYMMDD';
 
 const timeList = [
-  {
-    key: 'oneHour',
-    name: '近1小时',
-  },
-  {
-    key: 'fourHour',
-    name: '近4小时',
-  },
   {
     key: 'twelveHours',
     name: '近12小时',
@@ -38,8 +47,12 @@ const timeList = [
     name: '近24小时',
   },
   {
-    key: 'yesterday',
-    name: '昨天',
+    key: 'oneWeek',
+    name: '近1周',
+  },
+  {
+    key: 'oneMonth',
+    name: '近1月',
   },
 ];
 
@@ -54,7 +67,7 @@ const CheckboxData = [
   {
     key: 'chartGrid',
     label: '图表网格',
-    checked: false,
+    checked: true,
     showInCurve: true,
     showInTable: false,
   },
@@ -108,6 +121,12 @@ const timeIntervalList = [
     unit: 'h',
     name: '2小时',
   },
+  {
+    key: '4',
+    zoom: '4',
+    unit: 'h',
+    name: '4小时',
+  },
   {
     key: '6',
     zoom: '6',
@@ -131,14 +150,6 @@ const updateTime = (key) => {
     end = moment(key[1]).format(timeFormat);
   } else {
     switch (key) {
-      case 'oneHour':
-        start = moment().subtract(1, 'hour').format(timeFormat);
-        end = moment().format(timeFormat);
-        break;
-      case 'fourHour':
-        start = moment().subtract(4, 'hour').format(timeFormat);
-        end = moment().format(timeFormat);
-        break;
       case 'twelveHours':
         start = moment().subtract(12, 'hour').format(timeFormat);
         end = moment().format(timeFormat);
@@ -147,9 +158,13 @@ const updateTime = (key) => {
         start = moment().subtract(24, 'hour').format(timeFormat);
         end = moment().format(timeFormat);
         break;
-      case 'yesterday':
-        start = moment().subtract(1, 'days').format(startFormat);
-        end = moment().subtract(1, 'days').format(endFormat);
+      case 'oneWeek':
+        start = moment().subtract(7, 'day').format(timeFormat);
+        end = moment().format(timeFormat);
+        break;
+      case 'oneMonth':
+        start = moment().subtract(30, 'day').format(timeFormat);
+        end = moment().format(timeFormat);
         break;
     }
   }
@@ -466,7 +481,32 @@ const HistoryView = (props) => {
     );
   };
 
-  const exportExcelBtn = () => {};
+  const exportExcelBtn = () => {
+    deviceParams.forEach((i, r) => {
+      let timeFrom = dateRange[r]?.dateFrom || moment().format(startFormat);
+      let timeTo = dateRange[r]?.dateTo || moment().format(timeFormat);
+      let fileName = `数据报表-${i.deviceType}-${i.deviceCode}-${moment(timeFrom).format(
+        dateFormat,
+      )}至${moment(timeTo).format(dateFormat)}`;
+      getExportDeviceHistoryUrl({
+        deviceType: i.deviceType,
+        deviceCode: i.deviceCode,
+        quotas: i.sensors,
+        startTime: timeFrom,
+        endTime: timeTo,
+        fileName: fileName,
+      })
+        .then((res) => {
+          if (res && res.code === -1) return message.error(res.msg);
+          const url = `${window.location.origin}/PandaCore/GCK/FileHandleContoller/Download/name?name=${res.data}&_site=${globalConfig?.userInfo?.site}`;
+          const aDom = document.createElement('a');
+          aDom.href = url;
+          aDom.click();
+          aDom.remove();
+        })
+        .catch((err) => {});
+    });
+  };
 
   const handleTableData = (data) => {
     const ignoreOutliers = checkboxData.find((item) => item.key === 'ignoreOutliers').checked;
@@ -575,18 +615,32 @@ const HistoryView = (props) => {
       });
   };
 
+  const handleDataThinKey = (diffDays) => {
+    // edit by zy 根据选择的时长控制抽稀频度
+    if (diffDays >= 7 && diffDays < 15) {
+      return { unit: 'h', zoom: '2' };
+    } else if (diffDays >= 15 && diffDays < 30) {
+      return { unit: 'h', zoom: '4' };
+    } else if (diffDays >= 30) {
+      return { unit: 'h', zoom: '6' };
+    } else {
+      return {};
+    }
+  };
+
   // 处理接口服务参数的变化
   const onChangeParams = (value = {}) => {
     const { dateRange, isDilute, ignoreOutliers, zoom, unit } = value;
     const requestArr = [];
-    const acrossTables = []
+    const acrossTables = [];
     deviceParams.forEach((i) => {
-      if(i.sensors&&i.deviceCode&&i.deviceCode) acrossTables.push(_.omit(i, ['pointAddressID']))
+      if (i.sensors && i.deviceCode && i.deviceCode)
+        acrossTables.push(_.omit(i, ['pointAddressID']));
     });
-    if(!acrossTables?.length){
+    if (!acrossTables?.length) {
       handleTableData([]);
-      setChartDataSource([])
-      return 
+      setChartDataSource([]);
+      return;
     }
     dateRange.forEach((item) => {
       const param = {
@@ -599,7 +653,9 @@ const HistoryView = (props) => {
         dateTo: item.dateTo,
         acrossTables,
       };
-      requestArr.push(getHistoryInfo(param));
+      let diffDays = moment(item.dateTo).diff(moment(item.dateFrom), 'days');
+      let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffDays) : {};
+      requestArr.push(getHistoryInfo({ ...param, ...zoomParam }));
     });
     setLoading(true);
     Promise.all(requestArr).then((results) => {
@@ -722,12 +778,12 @@ const HistoryView = (props) => {
               left: <h3>{title}</h3>,
               right: (
                 <div className={`${prefixCls}-extra-right`}>
-                  {/* {activeTabKey === 'table' && (
-                    <Button onClick={exportExcelBtn}>
+                  {activeTabKey === 'table' && (
+                    <Button type="link" onClick={exportExcelBtn}>
                       <DownloadOutlined />
                       下载
                     </Button>
-                  )} */}
+                  )}
                 </div>
               ),
             }}
@@ -748,13 +804,7 @@ const HistoryView = (props) => {
 HistoryView.propTypes = {
   grid: PropTypes.bool,
   title: PropTypes.string,
-  defaultChecked: PropTypes.oneOf([
-    'oneHour',
-    'fourHour',
-    'twelveHours',
-    'roundClock',
-    'yesterday',
-  ]),
+  defaultChecked: PropTypes.oneOf(['twelveHours', 'roundClock', 'oneWeek', 'oneMonth']),
   tableProps: PropTypes.object,
   deviceParams: PropTypes.arrayOf(
     PropTypes.objectOf({

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

@@ -128,10 +128,37 @@ export const minMaxMarkPoint = (dataItem, index, dataSource) => {
   // 只有一个数据曲线时显示markline
   if (!dataItem || dataSource.length !== 1) return {};
   const data = [];
-  data.push({ type: 'min', name: '最小值', label: { color: '#FFFFFF' } });
-  data.push({ type: 'max', name: '最大值', label: { color: '#FFFFFF' } });
+  data.push({ type: 'min', name: '最小: ' });
+  data.push({ type: 'max', name: '最大: ' });
   return {
-    symbol: 'pin',
+    symbolSize: 1,
+    symbolOffset: [0, '50%'],
+    label: {
+      formatter: '{b|{b} }{c|{c}}',
+      backgroundColor:
+        window.globalConfig &&
+        window.globalConfig &&
+        window.globalConfig.variableTheme?.primaryColor
+          ? window.globalConfig.variableTheme.primaryColor
+          : '#0087F7',
+      borderColor: '#ccc',
+      borderWidth: 1,
+      borderRadius: 4,
+      padding: [2, 10],
+      lineHeight: 22,
+      position: 'top',
+      distance: 10,
+      rich: {
+        b: {
+          color: '#fff',
+        },
+        c: {
+          color: '#fff',
+          fontSize: 16,
+          fontWeight: 700,
+        },
+      },
+    },
     data,
   };
 };
@@ -149,6 +176,7 @@ export const decorateAxisGridLine = (axis, showGrid) => {
     },
     ...(axis.minorTick || {}),
     show: showGrid,
+    splitNumber: 2,
   };
   axis.minorSplitLine = {
     lineStyle: {
@@ -162,11 +190,6 @@ export const decorateAxisGridLine = (axis, showGrid) => {
     ...(axis.splitLine || {}),
     show: showGrid,
   };
-  // axis.minorTick ? (axis.minorTick.show = true) : (axis.minorTick = { show: true });
-  // axis.minorSplitLine
-  //   ? (axis.minorSplitLine.show = true)
-  //   : (axis.minorSplitLine = { show: true });
-  // axis.splitLine ? (axis.splitLine.show = true) : (axis.splitLine = { show: true });
 };
 
 /**