coolcare-lite-scada-component 1.0.43 → 1.0.44

package/es/components/DialogHistory/index.css

@@ -8,3 +8,25 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.totalBox {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  padding-left: 16px;
+  border-left: 1px solid #e8e8e8;
+}
+.totalBox .totalItem {
+  display: flex;
+}
+.totalBox .totalItem:not(:last-child) {
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e8e8e8;
+}
+.totalBox .totalItem .totalItemTitle {
+  width: 80px;
+  font-weight: 600;
+}
+.totalBox .totalItem .totalItemContent {
+  flex: 1;
+}

package/es/components/DialogHistory/index.js

@@ -18,11 +18,12 @@ import { Modal, Form, message, InputNumber, DatePicker, Empty, Typography, Butto
 import moment from 'moment';
 import { useDebounceFn } from 'ahooks';
 import { GetPointHistoryData } from "../../services/gateway/Point";
-import ModalChoosePoint from "../ModalChoosePoint";
 import Echarts from "../ECharts";
 // @ts-ignore
 
 import styles from "./index.css";
+import ModalChoosePoint from "../ModalChoosePoint";
+import { dateDiff } from "../../utils/date";
 var Link = Typography.Link;
 var RangePicker = DatePicker.RangePicker;
 var defaultInterval = 2;
@@ -72,26 +73,28 @@ var DialogPointHistory = function DialogPointHistory(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     pointIdList = _useState10[0],
     setPointIdList = _useState10[1];
-  /** 当前点位时间段内是否有报警 */
-  var _useState11 = useState(false),
+  var _useState11 = useState(undefined),
     _useState12 = _slicedToArray(_useState11, 2),
-    haveAlarm = _useState12[0],
-    setHaveAlarm = _useState12[1];
-  var _useState13 = useState(undefined),
+    deviceId = _useState12[0],
+    setDeviceId = _useState12[1];
+  var _useState13 = useState([]),
     _useState14 = _slicedToArray(_useState13, 2),
-    deviceId = _useState14[0],
-    setDeviceId = _useState14[1];
-  var _useState15 = useState([]),
+    tagList = _useState14[0],
+    setTagList = _useState14[1];
+  var _useState15 = useState(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    tagList = _useState16[0],
-    setTagList = _useState16[1];
+    dataZoom = _useState16[0],
+    setDataZoom = _useState16[1];
+  var _useState17 = useState([]),
+    _useState18 = _slicedToArray(_useState17, 2),
+    dataZoomData = _useState18[0],
+    setDataZoomData = _useState18[1];
   var closeModal = function closeModal() {
     form.resetFields();
     setLoading(false);
     setChartOptions(undefined);
     setIsNoData(false);
     setVisiblePointSet(false);
-    setHaveAlarm(false);
     setPointIdList([]);
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   };
@@ -165,17 +168,13 @@ var DialogPointHistory = function DialogPointHistory(_ref) {
                   setIsNoData(false);
                 }
                 data.forEach(function (item) {
-                  var _item$pointAlarmTimeF, _item$pointDataList;
+                  var _item$pointDataList;
                   setTagList(function (old) {
                     return [].concat(_toConsumableArray(old), [{
                       name: "".concat(item.deviceName, "-").concat(item.pointName),
                       key: item.pointId
                     }]);
                   });
-                  // @ts-ignore
-                  if ((_item$pointAlarmTimeF = item.pointAlarmTimeFrameList) === null || _item$pointAlarmTimeF === void 0 ? void 0 : _item$pointAlarmTimeF.length) {
-                    setHaveAlarm(true);
-                  }
                   var pointEnumId = item.pointEnumId,
                     pointEnumItemList = item.pointEnumItemList;
                   var unit = item.unit;
@@ -260,7 +259,7 @@ var DialogPointHistory = function DialogPointHistory(_ref) {
                     }
                   });
                 });
-
+                chart.current.getEchartsInstance().resize();
                 // 应用图形配置
                 setChartOptions({
                   color: ['#2297E8', '#48CE38', '#F8D156', '#FD9827', '#9764DC', '#1FCA6A'],
@@ -392,12 +391,16 @@ var DialogPointHistory = function DialogPointHistory(_ref) {
     title: "\u5386\u53F2\u6570\u636E\u66F2\u7EBF",
     open: visible,
     closable: true,
-    width: 1300,
+    width: 1600,
     zIndex: 42000,
     footer: null,
     onCancel: closeModal,
     afterClose: closeModal,
     getContainer: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex1"
   }, /*#__PURE__*/React.createElement(Form, {
     requiredMark: false,
     form: form,
@@ -479,12 +482,125 @@ var DialogPointHistory = function DialogPointHistory(_ref) {
     loading: loading,
     style: {
       height: '500px'
+    },
+    onEvents: {
+      datazoom: function datazoom(params) {
+        var _chart$current, _chart$current$getEch;
+        // 获取当前 echarts 实例
+        var myChart = chart === null || chart === void 0 ? void 0 : (_chart$current = chart.current) === null || _chart$current === void 0 ? void 0 : (_chart$current$getEch = _chart$current.getEchartsInstance) === null || _chart$current$getEch === void 0 ? void 0 : _chart$current$getEch.call(_chart$current);
+        if (!myChart) return;
+
+        // 获取当前配置
+        var option = myChart.getOption();
+        // 获取缩放范围
+        var startValue = params.start;
+        var endValue = params.end;
+        if (startValue === 0 && endValue === 100) {
+          setDataZoom(false);
+          return;
+        }
+        // 获取所有系列的数据
+        var visibleData = option.series.filter(function (item) {
+          return ['totalenergy', 'tlwatercs', 'tlhgscs'].includes(item.identifierName);
+        }).map(function (series) {
+          // 获取当前显示范围的数据
+          var data = series.data.filter(function (_, index) {
+            var percent = index / series.data.length * 100;
+            return percent >= startValue && percent <= endValue;
+          });
+          return {
+            name: series.name,
+            data: data
+          };
+        });
+        if (visibleData.length) {
+          setDataZoomData(visibleData);
+          setDataZoom(true);
+        } else {
+          setDataZoom(false);
+        }
+        console.log('当前显示的数据集合:', visibleData);
+      }
     }
   }), isNoData && /*#__PURE__*/React.createElement(Empty, {
     className: styles['chart-empty'],
     image: Empty.PRESENTED_IMAGE_SIMPLE,
     description: "\u6682\u65E0\u70B9\u4F4D\u5386\u53F2\u6570\u636E"
-  })), /*#__PURE__*/React.createElement(ModalChoosePoint, {
+  }))), pointIdList.some(function (item) {
+    return ['totalenergy', 'tlwatercs', 'tlhgscs'].some(function (_item) {
+      return item.includes(_item);
+    });
+  }) ? /*#__PURE__*/React.createElement("div", {
+    className: styles.totalBox
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemTitle
+  }, /*#__PURE__*/React.createElement("span", null, "\u65F6\u95F4\u8DE8\u5EA6\uFF1A")), /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemContent
+  }, /*#__PURE__*/React.createElement("span", null, dataZoom && dataZoomData.length ? function (_longestSeries$data) {
+    var longestSeries = dataZoomData.reduce(function (prev, curr) {
+      var _prev$data, _curr$data;
+      return ((prev === null || prev === void 0 ? void 0 : (_prev$data = prev.data) === null || _prev$data === void 0 ? void 0 : _prev$data.length) || 0) > ((curr === null || curr === void 0 ? void 0 : (_curr$data = curr.data) === null || _curr$data === void 0 ? void 0 : _curr$data.length) || 0) ? prev : curr;
+    });
+    if (!(longestSeries === null || longestSeries === void 0 ? void 0 : (_longestSeries$data = longestSeries.data) === null || _longestSeries$data === void 0 ? void 0 : _longestSeries$data.length)) return '-';
+    var firstPoint = longestSeries.data[0];
+    var lastPoint = longestSeries.data[longestSeries.data.length - 1];
+    return firstPoint && lastPoint ? dateDiff(firstPoint[0], lastPoint[0]) : '-';
+  }() : function () {
+    var dateRange = form.getFieldValue('dateRange');
+    return (dateRange === null || dateRange === void 0 ? void 0 : dateRange[0]) && (dateRange === null || dateRange === void 0 ? void 0 : dateRange[1]) ? dateDiff(dateRange[0], dateRange[1]) : '-';
+  }()))), /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemTitle
+  }, /*#__PURE__*/React.createElement("span", null, "\u8017", ['电', '水', '气'][['totalenergy', 'tlwatercs', 'tlhgscs'].findIndex(function (item) {
+    return pointIdList[0].includes(item);
+  })], "\u91CF\uFF1A")), /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemContent
+  }, (dataZoom ? dataZoomData : ((chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.series) || []).filter(function (item) {
+    return ['totalenergy', 'tlwatercs', 'tlhgscs'].includes(item.identifierName);
+  })).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, item.name, ": "), /*#__PURE__*/React.createElement("span", null, parseFloat((Math.max.apply(Math, _toConsumableArray(item.data.map(function (_item) {
+      return _item[1];
+    }))) - Math.min.apply(Math, _toConsumableArray(item.data.map(function (_item) {
+      return _item[1];
+    })))).toFixed(2))));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemTitle
+  }, /*#__PURE__*/React.createElement("span", null, "\u671F\u672B\u503C\uFF1A")), /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemContent
+  }, ((dataZoom ? dataZoomData : chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.series.filter(function (item) {
+    return ['totalenergy', 'tlwatercs', 'tlhgscs'].includes(item.identifierName);
+  })) || []).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, item.name, ": "), /*#__PURE__*/React.createElement("span", null, Math.max.apply(Math, _toConsumableArray(item.data.map(function (_item) {
+      return _item[1];
+    })))));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemTitle
+  }, /*#__PURE__*/React.createElement("span", null, "\u671F\u521D\u503C\uFF1A")), /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemContent
+  }, ((dataZoom ? dataZoomData : chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.series.filter(function (item) {
+    return ['totalenergy', 'tlwatercs', 'tlhgscs'].includes(item.identifierName);
+  })) || []).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, item.name, ": "), /*#__PURE__*/React.createElement("span", null, Math.min.apply(Math, _toConsumableArray(item.data.map(function (_item) {
+      return _item[1];
+    })))));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItem
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemTitle
+  }, /*#__PURE__*/React.createElement("span", null, "\u8BA1\u91CF\u5355\u4F4D\uFF1A")), /*#__PURE__*/React.createElement("div", {
+    className: styles.totalItemContent
+  }, ((chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.series.filter(function (item) {
+    return ['totalenergy', 'tlwatercs', 'tlhgscs'].includes(item.identifierName);
+  })[0]) || {
+    unit: ''
+  }).unit))) : null), /*#__PURE__*/React.createElement(ModalChoosePoint, {
     visible: visiblePointSet,
     onSubmit: function onSubmit(val) {
       setPointIdList(function (pre) {

package/es/components/ECharts/index.js

@@ -6,6 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from "react";
 import { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
+import { Spin } from 'antd';
 import { useSize } from 'ahooks';
 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
 
@@ -14,12 +15,14 @@ import styles from "./index.css";
 /** 默认的颜色组 */
 export var defaultColors = ['#1890FF', '#04C74C', '#FFCD00', '#253076', '#8F30E9', '#03C7C3'];
 var EChartsComponent = function EChartsComponent(_ref, ref) {
-  var option = _ref.option,
+  var id = _ref.id,
+    option = _ref.option,
     style = _ref.style,
     className = _ref.className,
     _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading;
-  var echartLoaderStatus = useExternal('https://front-end-assets.oss-cn-shanghai.aliyuncs.com/package/echarts/5.2.2/echarts.min.js', {
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    onEvents = _ref.onEvents;
+  var echartLoaderStatus = useExternal('https://cdn.sinocold.net/package/echarts/5.2.2/echarts.min.js', {
     type: 'js',
     js: {
       async: true
@@ -41,34 +44,33 @@ var EChartsComponent = function EChartsComponent(_ref, ref) {
   useEffect(function () {
     if (wrapRef.current && echartLoaderStatus === 'ready') {
       // 初始化图表
+      // @ts-ignore
       chartInstance.current = window.echarts.init(wrapRef.current);
+      // 绑定事件
+      if (onEvents && chartInstance.current) {
+        Object.keys(onEvents).forEach(function (eventName) {
+          var _chartInstance$curren;
+          (_chartInstance$curren = chartInstance.current) === null || _chartInstance$curren === void 0 ? void 0 : _chartInstance$curren.on(eventName, onEvents[eventName]);
+        });
+      }
       // wrapRef.current.style.removeProperty('position')
       return function () {
-        var _chartInstance$curren;
+        var _chartInstance$curren3;
         // 组件卸载时，调用 ECharts 的销毁函数
-        (_chartInstance$curren = chartInstance.current) === null || _chartInstance$curren === void 0 ? void 0 : _chartInstance$curren.dispose();
+        Object.keys(onEvents).forEach(function (eventName) {
+          var _chartInstance$curren2;
+          (_chartInstance$curren2 = chartInstance.current) === null || _chartInstance$curren2 === void 0 ? void 0 : _chartInstance$curren2.off(eventName);
+        });
+        (_chartInstance$curren3 = chartInstance.current) === null || _chartInstance$curren3 === void 0 ? void 0 : _chartInstance$curren3.dispose();
       };
     }
     return function () {};
   }, [echartLoaderStatus]);
   useEffect(function () {
-    var _chartInstance$curren2;
+    var _chartInstance$curren4;
     // 在 wrap 大小改变后，resize 图表
-    (_chartInstance$curren2 = chartInstance.current) === null || _chartInstance$curren2 === void 0 ? void 0 : _chartInstance$curren2.resize();
+    (_chartInstance$curren4 = chartInstance.current) === null || _chartInstance$curren4 === void 0 ? void 0 : _chartInstance$curren4.resize();
   }, [size]);
-  useEffect(function () {
-    if (loading) {
-      var _chartInstance$curren3;
-      (_chartInstance$curren3 = chartInstance.current) === null || _chartInstance$curren3 === void 0 ? void 0 : _chartInstance$curren3.showLoading({
-        color: '#40a9ff',
-        lineWidth: 2,
-        text: '加载中...'
-      });
-    } else {
-      var _chartInstance$curren4;
-      (_chartInstance$curren4 = chartInstance.current) === null || _chartInstance$curren4 === void 0 ? void 0 : _chartInstance$curren4.hideLoading();
-    }
-  }, [loading]);
   useEffect(function () {
     // 监听 props.option, 变更后重新渲染图表
     if (!option) {
@@ -84,11 +86,17 @@ var EChartsComponent = function EChartsComponent(_ref, ref) {
       }, option));
     }
   }, [option, echartLoaderStatus]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: style
+  return /*#__PURE__*/React.createElement(Spin, {
+    spinning: loading || echartLoaderStatus === 'loading',
+    delay: 200
   }, /*#__PURE__*/React.createElement("div", {
+    id: id,
     ref: wrapRef,
-    className: "".concat(styles.echarts, " ").concat(className)
+    className: "".concat(styles.echarts, " ").concat(className),
+    style: style || {
+      height: '220px',
+      width: '100%'
+    }
   }));
 };
 export default /*#__PURE__*/forwardRef(EChartsComponent);

package/es/utils/date.js

@@ -0,0 +1,7 @@
+export function dateDiff(str, end) {
+  var diff = (new Date(end).getTime() - new Date(str).getTime()) / 1000;
+  var d = Math.floor(diff / (60 * 60 * 24));
+  var h = Math.floor(diff % (60 * 60 * 24) / 60 / 60);
+  var m = Math.floor(diff % (60 * 60) / 60);
+  return "".concat(d ? "".concat(d, "\u5929") : '').concat(h ? "".concat(h, "\u5C0F\u65F6") : '', "".concat(m, "\u5206\u949F"));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coolcare-lite-scada-component",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "scripts": {
     "start": " umi dev",
     "build:prod": "UMI_ENV=prod umi build",