@zgfe/modules-interval 1.0.23-zhongyuan.5 → 1.0.23-zhongyuan.6

package/dist/esm/components/searchPanel/index.js

@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { BizSelect, IconFont, BizDatePickerV2 } from '@zgfe/business-lib';
+import { BizSelect, IconFont, BizDatePickerV2, BizGlobalDataContext } from '@zgfe/business-lib';
 import { DatePickerTypes } from '@zgfe/business-lib/es/datePickerV2/types';
 import React, { useContext, useEffect, useState } from 'react';
 import { chartTypeOptions, getInitDate } from "../../constants";
@@ -24,6 +24,8 @@ var SearchPanel = function SearchPanel(props) {
     includeToday = _useContext.includeToday,
     searchData = _useContext.searchData,
     refreshLoading = _useContext.refreshLoading;
+  var _useContext2 = useContext(BizGlobalDataContext),
+    envs = _useContext2.envs;
   // 当前时间段
   var _useState = useState(props.time || getInitDate(includeToday)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -108,6 +110,8 @@ var SearchPanel = function SearchPanel(props) {
     dateTypeList: [DatePickerTypes.Unit.day, DatePickerTypes.Unit.week, DatePickerTypes.Unit.month, DatePickerTypes.Unit.custom],
     value: time,
     includeToday: true,
+    selectRange: envs && envs.timeRangeOpen ? envs.timeRangeOpen : 36,
+    timeRangeOpen: envs && envs.timeRangeOpen ? envs.timeRangeOpen : 36,
     onChange: onChangeTime
   }), /*#__PURE__*/React.createElement(BizSelect, {
     multiple: true,

package/dist/esm/modules/chart/customTooltip.js

@@ -20,7 +20,7 @@ var CustomTooltip = function CustomTooltip(_ref) {
     className: "custom-tooltip-name"
   }, payload.name, " "), /*#__PURE__*/React.createElement("div", {
     className: "custom-tooltip-div"
-  }, (series === null || series === void 0 ? void 0 : series.names[0]) && /*#__PURE__*/React.createElement("div", {
+  }, payload.seriesName && /*#__PURE__*/React.createElement("div", {
     className: "tooltip-marker"
   }, /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
@@ -28,7 +28,7 @@ var CustomTooltip = function CustomTooltip(_ref) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: "tooltip-span"
-  }, series.names[0])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+  }, payload.seriesName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
     className: "tooltip-span"
   }, "\u6700\u5927\u503C\uFF1A"), /*#__PURE__*/React.createElement("div", null, convertToHMS(value[5]))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
     className: "tooltip-span"

package/dist/esm/modules/chart/customTooltip1.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.less';
+declare const CustomTooltip: React.FC<{
+    payload: any[];
+    series: any[];
+}>;
+export default CustomTooltip;

package/dist/esm/modules/chart/customTooltip1.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import "./index.less";
+var CustomTooltip = function CustomTooltip(_ref) {
+  var payload = _ref.payload,
+    series = _ref.series;
+  // 初始化，判断showList是否有值，如果没值，取结果的前10条
+  function convertToHMS(seconds) {
+    var hours = Math.floor(seconds / 3600);
+    var minutes = Math.floor(seconds % 3600 / 60);
+    var remainingSeconds = seconds % 60;
+    return ('00' + hours).slice(-2) + ':' + ('00' + minutes).slice(-2) + ':' + ('00' + remainingSeconds).slice(-2);
+  }
+  // 根据payload中的数据定义弹窗内容
+  // const marker = payload?.marker;
+
+  // const value = payload?.value;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, payload.map(function (o, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "custom-tooltip-chart",
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-tooltip-name"
+    }, o.name, " "), /*#__PURE__*/React.createElement("div", {
+      className: "custom-tooltip-div"
+    }, o.seriesName && /*#__PURE__*/React.createElement("div", {
+      className: "tooltip-marker"
+    }, /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: o === null || o === void 0 ? void 0 : o.marker
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "tooltip-span"
+    }, o.seriesName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u6700\u5927\u503C\uFF1A"), /*#__PURE__*/React.createElement("div", null, convertToHMS(o.value[5]))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u4E0A\u56DB\u5206\u4F4D\uFF1A"), convertToHMS(o.value[2])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u4E2D\u4F4D\u6570\uFF1A"), convertToHMS(o.value[3])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u4E0B\u56DB\u5206\u4F4D\uFF1A"), convertToHMS(o.value[4])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u6700\u5C0F\u503C\uFF1A"), convertToHMS(o.value[1]))));
+  }));
+};
+export default CustomTooltip;

package/dist/esm/modules/chart/index.css

@@ -0,0 +1,52 @@
+.custom-tooltip-chart {
+  display: inline-block;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 4px;
+  align-items: flex-start;
+  width: 146px;
+  height: 100%;
+  padding: 8px;
+  color: var(--io-n, #021429);
+  font-weight: 500;
+  font-size: 12px;
+  font-style: normal;
+  border-radius: 10px;
+  box-shadow: 0px 4px 10px 0px #0000001a;
+}
+.custom-tooltip-chart .custom-tooltip-name {
+  color: var(--io-n, #021429);
+  font-weight: 500;
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-style: normal;
+  line-height: normal;
+}
+.custom-tooltip-chart .custom-tooltip-div {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  height: 100%;
+  padding: 0px 8px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
+}
+.custom-tooltip-chart .custom-tooltip-div .tooltip-span {
+  display: block;
+  color: var(--3, #5f6085);
+  font-weight: 400;
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-style: normal;
+  line-height: normal;
+}
+.custom-tooltip-chart .custom-tooltip-div > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.custom-tooltip-chart .custom-tooltip-div .tooltip-marker {
+  justify-content: flex-start;
+}

package/dist/esm/modules/chart/index.less

@@ -1,58 +1,58 @@
-.custom-tooltip-chart {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  gap: 4px;
-  align-items: flex-start;
-  width: 146px;
-  height: 100%;
-  padding: 8px;
-  color: var(--io-n, #021429);
-  font-weight: 500;
-  font-size: 12px;
-  font-style: normal;
-  // background: rgba(250, 251, 253, 0.8);
-  border-radius: 10px;
-  box-shadow: 0px 4px 10px 0px #0000001a;
-
-  .custom-tooltip-name {
-    color: var(--io-n, #021429);
-    font-weight: 500;
-    font-size: 12px;
-    font-family: PingFang SC;
-    font-style: normal;
-    line-height: normal;
-  }
-
-  .custom-tooltip-div {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    width: 100%;
-    height: 100%;
-    padding: 0px 8px;
-    background: #fff;
-    border-radius: 4px;
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
-
-    .tooltip-span {
-      display: block;
-      color: var(--3, #5f6085);
-      font-weight: 400;
-      font-size: 12px;
-      font-family: PingFang SC;
-      font-style: normal;
-      line-height: normal;
-    }
-
-    > div {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .tooltip-marker {
-      justify-content: flex-start;
-    }
-  }
-}
+.custom-tooltip-chart {
+  display: inline-block;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 4px;
+  align-items: flex-start;
+  width: 146px;
+  height: 100%;
+  padding: 8px;
+  color: var(--io-n, #021429);
+  font-weight: 500;
+  font-size: 12px;
+  font-style: normal;
+  // background: rgba(250, 251, 253, 0.8);
+  border-radius: 10px;
+  box-shadow: 0px 4px 10px 0px #0000001a;
+
+  .custom-tooltip-name {
+    color: var(--io-n, #021429);
+    font-weight: 500;
+    font-size: 12px;
+    font-family: PingFang SC;
+    font-style: normal;
+    line-height: normal;
+  }
+
+  .custom-tooltip-div {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+    height: 100%;
+    padding: 0px 8px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
+
+    .tooltip-span {
+      display: block;
+      color: var(--3, #5f6085);
+      font-weight: 400;
+      font-size: 12px;
+      font-family: PingFang SC;
+      font-style: normal;
+      line-height: normal;
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .tooltip-marker {
+      justify-content: flex-start;
+    }
+  }
+}

package/dist/esm/modules/chart/intervalChart.js

@@ -8,7 +8,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts';
 import { renderToString } from 'react-dom/server';
-import CustomTooltip from "./customTooltip";
+import CustomTooltip1 from "./customTooltip1";
 import { chartColors } from "../../constants";
 import { getRandomColor } from "../../constants/color";
 import { convertDateArray } from "../../utils/formData";
@@ -25,9 +25,23 @@ var IntervalChart = function IntervalChart(props) {
     var params = props === null || props === void 0 ? void 0 : props.params;
     var eCharts = {
       tooltip: {
-        trigger: 'item',
+        trigger: 'axis',
         axisPointer: {
           type: 'shadow'
+        },
+        // formatter: (params: any) => {
+        //   let tooltipString = ``;
+        //   tooltipString += params.map((k) => {
+        //     const item = seriesData?.series.find((it: any) => it.names[0] === k.name);
+        //     return renderToString(<CustomTooltip series={item} payload={k} />);
+        //   });
+        //   return tooltipString;
+        // },
+        formatter: function formatter(params) {
+          return renderToString( /*#__PURE__*/React.createElement(CustomTooltip1, {
+            series: seriesData === null || seriesData === void 0 ? void 0 : seriesData.series,
+            payload: params
+          }));
         }
       },
       legend: {
@@ -108,19 +122,6 @@ var IntervalChart = function IntervalChart(props) {
           datasetIndex: 1,
           name: seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$series$i = seriesData.series[i]) === null || _seriesData$series$i === void 0 ? void 0 : _seriesData$series$i.names[0],
           data: seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$series$i2 = seriesData.series[i]) === null || _seriesData$series$i2 === void 0 ? void 0 : _seriesData$series$i2.values,
-          tooltip: {
-            show: true,
-            // 单独配置series中的tooltip为显示
-            extraCssText: 'border: none;padding:0;border-radius:10px;background: rgba(250, 251, 253, 0.8)',
-            // 添加自定义的CSS样式，去掉边框
-            formatter: function formatter(params) {
-              var tooltipString = renderToString( /*#__PURE__*/React.createElement(CustomTooltip, {
-                series: seriesData === null || seriesData === void 0 ? void 0 : seriesData.series[i],
-                payload: params
-              }));
-              return tooltipString;
-            }
-          },
           emphasis: {
             itemStyle: {
               borderColor: color // 设置盒子的颜色

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zgfe/modules-interval",
-  "version": "1.0.23-zhongyuan.5",
+  "version": "1.0.23-zhongyuan.6",
   "private": false,
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -59,7 +59,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ae73c427ed843d7c0a3d03642e849d9a5d9097e7",
+  "gitHead": "bb806dbd678d5618325894bef6883410867e0bb3",
   "gitHooks": {
     "pre-commit": "lint-staged"
   }