coolcare-lite-scada-component 3.0.1 → 3.0.3

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

@@ -1,5 +1,9 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -9,13 +13,18 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React from "react";
-import { useCallback, useEffect, useState } from 'react';
-import { Modal, Form, message, InputNumber, DatePicker, Empty } from 'antd';
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { Modal, Form, message, InputNumber, DatePicker, Empty, Typography, Button, Space, Tag } from 'antd';
 import moment from 'moment';
 import { useDebounceFn } from 'ahooks';
 import { GetPointHistoryData } from "../../services/gateway/Point";
 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;
 
@@ -26,15 +35,20 @@ var oneYearTime = 365 * 3600 * 1000 * 24;
 // const oneMonthTime = 31 * 3600 * 1000 * 24;
 // const oneWeekTime = 7 * 3600 * 1000 * 24;
 
-var DialogHistory = function DialogHistory(_ref) {
-  var pointIdListProp = _ref.pointIdListProp,
+var DialogPointHistory = function DialogPointHistory(_ref) {
+  var _ref$isSinglePoint = _ref.isSinglePoint,
+    isSinglePoint = _ref$isSinglePoint === void 0 ? true : _ref$isSinglePoint,
+    pointIdListProp = _ref.pointIdListProp,
     dateRangeProp = _ref.dateRangeProp,
     intervalProp = _ref.intervalProp,
     visible = _ref.visible,
-    onCancel = _ref.onCancel;
+    onCancel = _ref.onCancel,
+    companyId = _ref.companyId,
+    projectId = _ref.projectId;
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
+  var chart = useRef();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isNoData = _useState2[0],
@@ -44,45 +58,87 @@ var DialogHistory = function DialogHistory(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     loading = _useState4[0],
     setLoading = _useState4[1];
-  /** 曲线图配置 */
-  var _useState5 = useState(undefined),
+  /** 添加对比点位弹框 */
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    chartOptions = _useState6[0],
-    setChartOptions = _useState6[1];
+    visiblePointSet = _useState6[0],
+    setVisiblePointSet = _useState6[1];
+  /** 曲线图配置 */
+  var _useState7 = useState(undefined),
+    _useState8 = _slicedToArray(_useState7, 2),
+    chartOptions = _useState8[0],
+    setChartOptions = _useState8[1];
+  /** 当前点位列表 */
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    pointIdList = _useState10[0],
+    setPointIdList = _useState10[1];
+  var _useState11 = useState(undefined),
+    _useState12 = _slicedToArray(_useState11, 2),
+    deviceId = _useState12[0],
+    setDeviceId = _useState12[1];
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    tagList = _useState14[0],
+    setTagList = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    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);
+    setPointIdList([]);
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   };
 
   /** 获取点位历史数据 */
   var fetchPointHistory = useCallback(/*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(idList, ranges, interval) {
-      var diff, res, data, series, yAxisData, xAxisData;
+      var diff, res, data, series, yAxisData;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (idList === null || idList === void 0 ? void 0 : idList.length) {
-              _context.next = 3;
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            if (!(ranges.length !== 2)) {
+              _context.next = 5;
               break;
             }
-            message.error('请至少查询一个点位');
+            message.info('请选择时间范围');
             return _context.abrupt("return");
-          case 3:
-            _context.prev = 3;
+          case 5:
+            if (!(typeof interval !== 'number' || interval < 0)) {
+              _context.next = 8;
+              break;
+            }
+            message.info('请正确输入时间间隔');
+            return _context.abrupt("return");
+          case 8:
+            _context.prev = 8;
             diff = moment(ranges[1]).valueOf() - moment(ranges[0]).valueOf();
             if (!(diff > oneYearTime)) {
-              _context.next = 8;
+              _context.next = 13;
               break;
             }
             message.error('历史数据最大查询范围是一年');
             return _context.abrupt("return");
-          case 8:
+          case 13:
             // 获取点位数据
             setLoading(true);
-            _context.next = 11;
+            setTagList([]);
+            _context.next = 17;
             return GetPointHistoryData({
               timeQuantum: {
                 startDate: moment(ranges[0]).format('YYYY-MM-DD HH:mm'),
@@ -91,7 +147,7 @@ var DialogHistory = function DialogHistory(_ref) {
               pointIdList: idList,
               interval: interval
             });
-          case 11:
+          case 17:
             res = _context.sent;
             if (res.success) {
               data = res.data;
@@ -102,7 +158,7 @@ var DialogHistory = function DialogHistory(_ref) {
                 // 图形处理
                 series = [];
                 yAxisData = [];
-                xAxisData = [];
+                setDeviceId(data[0].deviceId);
                 if (data.every(function (v) {
                   var _v$pointDataList;
                   return ((_v$pointDataList = v.pointDataList) === null || _v$pointDataList === void 0 ? void 0 : _v$pointDataList.length) === 0 || !v.pointDataList;
@@ -112,7 +168,13 @@ var DialogHistory = function DialogHistory(_ref) {
                   setIsNoData(false);
                 }
                 data.forEach(function (item) {
-                  var _item$pointDataList, _item$pointDataList2;
+                  var _item$pointDataList;
+                  setTagList(function (old) {
+                    return [].concat(_toConsumableArray(old), [{
+                      name: "".concat(item.deviceName, "-").concat(item.pointName),
+                      key: item.pointId
+                    }]);
+                  });
                   var pointEnumId = item.pointEnumId,
                     pointEnumItemList = item.pointEnumItemList;
                   var unit = item.unit;
@@ -171,31 +233,33 @@ var DialogHistory = function DialogHistory(_ref) {
                     }
                     yAxisData.push(yAxis);
                   }
-                  // 配置x坐标轴数据
-                  if ((_item$pointDataList = item.pointDataList) === null || _item$pointDataList === void 0 ? void 0 : _item$pointDataList.length) {
-                    xAxisData = item.pointDataList.map(function (pointDataItem) {
-                      return pointDataItem.ts;
-                    });
-                  }
                   // 配置曲线数据
                   series.push({
                     animation: false,
-                    name: item.pointName,
-                    type: 'line',
+                    name: "".concat(item.deviceName, "-").concat(item.pointName),
+                    type: interval == 0 ? 'scatter' : 'line',
                     unit: item.unit,
                     yAxisIndex: yAxisData.findIndex(function (yAxis) {
                       return yAxis.pointEnumId === item.pointEnumId;
                     }),
                     smooth: false,
-                    data: (_item$pointDataList2 = item.pointDataList) === null || _item$pointDataList2 === void 0 ? void 0 : _item$pointDataList2.map(function (dataItem) {
-                      return {
-                        name: dataItem.ts,
-                        value: dataItem.val
-                      };
-                    })
+                    showAllSymbol: true,
+                    symbolSize: 1.5,
+                    data: (_item$pointDataList = item.pointDataList) === null || _item$pointDataList === void 0 ? void 0 : _item$pointDataList.map(function (dataItem) {
+                      return [new Date(dataItem.ts).getTime(), dataItem.val];
+                    }),
+                    markPoint: {
+                      data: [{
+                        type: 'max',
+                        name: '最大值'
+                      }, {
+                        type: 'min',
+                        name: '最小值'
+                      }]
+                    }
                   });
                 });
-
+                chart.current.getEchartsInstance().resize();
                 // 应用图形配置
                 setChartOptions({
                   color: ['#2297E8', '#48CE38', '#F8D156', '#FD9827', '#9764DC', '#1FCA6A'],
@@ -228,15 +292,16 @@ var DialogHistory = function DialogHistory(_ref) {
                       var colorSpan = function colorSpan(color) {
                         return "<i class=\"echart-circlepoint\" style=\"background: ".concat(color, "\"></i>");
                       };
-                      var text = "".concat(moment(params[0].name).format(interval < 1 ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm'), "<br/>");
+                      var text = "".concat(moment(params[0].axisValueLabel).format(interval < 1 ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm'), "<br/>");
                       for (var i = 0; i < params.length; i += 1) {
-                        text += "".concat(colorSpan(params[i].color), " ").concat(params[i].seriesName, "\uFF1A").concat(params[i].value === null ? '无数据' : params[i].value, " <br/>");
+                        text += "".concat(colorSpan(params[i].color), " ").concat(params[i].seriesName, "\uFF1A").concat(params[i].data[1] === null ? '无数据' : params[i].data[1], " <br/>");
                       }
                       return text;
                     }
                   },
                   yAxis: yAxisData,
                   xAxis: {
+                    type: 'time',
                     axisLabel: {
                       formatter: function formatter(value) {
                         return moment(value).format('YYYY-MM-DD HH:mm');
@@ -244,8 +309,7 @@ var DialogHistory = function DialogHistory(_ref) {
                     },
                     splitLine: {
                       show: false
-                    },
-                    data: xAxisData
+                    }
                   },
                   series: series
                 });
@@ -254,23 +318,23 @@ var DialogHistory = function DialogHistory(_ref) {
               setIsNoData(true);
               message.error(res.message);
             }
-            _context.next = 20;
+            _context.next = 26;
             break;
-          case 15:
-            _context.prev = 15;
-            _context.t0 = _context["catch"](3);
+          case 21:
+            _context.prev = 21;
+            _context.t0 = _context["catch"](8);
             console.error(_context.t0);
             setIsNoData(true);
             setChartOptions(undefined);
-          case 20:
-            _context.prev = 20;
+          case 26:
+            _context.prev = 26;
             setLoading(false);
-            return _context.finish(20);
-          case 23:
+            return _context.finish(26);
+          case 29:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[3, 15, 20, 23]]);
+      }, _callee, null, [[8, 21, 26, 29]]);
     }));
     return function (_x, _x2, _x3) {
       return _ref2.apply(this, arguments);
@@ -280,62 +344,78 @@ var DialogHistory = function DialogHistory(_ref) {
       wait: 700
     }),
     fetchPointHistoryDebounce = _useDebounceFn.run;
-  var handleFormChange = function handleFormChange(values) {
-    var dateRange = values.dateRange,
-      interval = values.interval;
-    if (typeof interval !== 'number') {
-      return;
-    }
-    fetchPointHistoryDebounce(pointIdListProp, dateRange, interval);
-  };
-
-  // const handleSubmit = async () => {
-  //   try {
-  //     const { dateRange, interval } = await form.validateFields()
-  //     if (typeof interval) {
-  //       fetchPointHistory(pointIdListProp, dateRange, interval)
-  //     }
-  //   } catch (err) {
-  //     console.error(err)
-  //   }
-  // }
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var _yield$form$validateF, dateRange, interval;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return form.validateFields();
+          case 2:
+            _yield$form$validateF = _context2.sent;
+            dateRange = _yield$form$validateF.dateRange;
+            interval = _yield$form$validateF.interval;
+            fetchPointHistoryDebounce(pointIdList, dateRange, interval);
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleSubmit() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    var _form$getFieldsValue = form.getFieldsValue(),
+      dateRange = _form$getFieldsValue.dateRange,
+      interval = _form$getFieldsValue.interval;
+    fetchPointHistoryDebounce(pointIdList, dateRange, interval);
+  }, [pointIdList]);
 
   /** 打开弹框，初始化数据，获取曲线图形 */
   useEffect(function () {
     if (visible && (pointIdListProp === null || pointIdListProp === void 0 ? void 0 : pointIdListProp.length)) {
       var ranges = dateRangeProp || [moment().subtract(1, 'days'), moment()];
+      var interval = typeof intervalProp === 'number' && intervalProp ? intervalProp : defaultInterval;
       form.setFieldsValue({
         dateRange: ranges,
-        interval: typeof intervalProp === 'number' ? intervalProp : defaultInterval
+        interval: interval
       });
-      fetchPointHistory(pointIdListProp, ranges, defaultInterval);
+      setPointIdList(pointIdListProp);
+      fetchPointHistoryDebounce(pointIdListProp, ranges, interval);
     }
-  }, [visible, form, pointIdListProp, dateRangeProp, intervalProp, fetchPointHistory]);
+  }, [visible, form, pointIdListProp, dateRangeProp, intervalProp]);
   return /*#__PURE__*/React.createElement(Modal, {
     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, {
-    onValuesChange: function onValuesChange(changedValues, values) {
-      return handleFormChange(values);
-    },
-    layout: "inline",
     requiredMark: false,
     form: form,
     name: "form"
+  }, /*#__PURE__*/React.createElement(Space, {
+    size: 30,
+    align: 'center'
   }, /*#__PURE__*/React.createElement(Form.Item, {
     name: "dateRange",
     label: "\u65F6\u95F4\u8303\u56F4",
     rules: [{
       required: true,
       message: '请选择时间范围'
-    }]
+    }],
+    className: "temperatureDateRange"
   }, /*#__PURE__*/React.createElement(RangePicker, {
     disabled: loading,
     style: {
@@ -344,16 +424,16 @@ var DialogHistory = function DialogHistory(_ref) {
     showTime: {
       format: 'HH:mm'
     },
-    getPopupContainer: function getPopupContainer(node) {
-      return node;
-    },
     allowClear: false,
     ranges: {
       近一天: [moment().subtract(1, 'day'), moment()],
       近一周: [moment().subtract(7, 'day'), moment()],
       近一个月: [moment().subtract(30, 'day'), moment()]
     },
-    format: "YYYY-MM-DD HH:mm"
+    format: "YYYY-MM-DD HH:mm",
+    getPopupContainer: function getPopupContainer() {
+      return document.querySelector(".temperatureDateRange") || document.body;
+    }
   })), /*#__PURE__*/React.createElement(Form.Item, {
     name: "interval",
     label: "\u95F4\u9694\uFF08\u5206\u949F\uFF09",
@@ -367,18 +447,172 @@ var DialogHistory = function DialogHistory(_ref) {
   }, /*#__PURE__*/React.createElement(InputNumber, {
     disabled: loading,
     placeholder: "\u8BF7\u8F93\u5165\u6B63\u6574\u6570"
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
+    type: 'primary',
+    onClick: handleSubmit
+  }, "\u67E5\u8BE2"))), isSinglePoint ? /*#__PURE__*/React.createElement("div", {
+    key: 'singlePointSetBox'
+  }, /*#__PURE__*/React.createElement(Space, {
+    size: 30,
+    align: 'center'
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: "\u6DFB\u52A0\u5BF9\u6BD4"
+  }, /*#__PURE__*/React.createElement(Link, {
+    onClick: function onClick() {
+      setVisiblePointSet(true);
+    }
+  }, "\u6DFB\u52A0\u5C5E\u6027")))) : null), tagList.map(function (item) {
+    return /*#__PURE__*/React.createElement(Tag, {
+      key: item.key,
+      closable: true,
+      color: "blue",
+      onClose: function onClose() {
+        setPointIdList(function (pre) {
+          return pre.filter(function (v) {
+            return v !== item.key;
+          });
+        });
+      }
+    }, item.name);
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles['chart-wrap']
   }, /*#__PURE__*/React.createElement(Echarts, {
+    ref: chart,
     option: chartOptions,
     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"
-  })));
+  }))), 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) {
+        return _toConsumableArray(new Set([].concat(_toConsumableArray(pre), _toConsumableArray(val))));
+      });
+    },
+    currentDeviceId: deviceId,
+    companyId: companyId,
+    projectId: projectId,
+    onCancel: function onCancel() {
+      setVisiblePointSet(false);
+    }
+  }));
 };
-export default DialogHistory;
+export default DialogPointHistory;

package/es/components/DialogImagePicker/GroupPanel/index.js

@@ -46,7 +46,7 @@ var GroupItemPanel = function GroupItemPanel(_ref) {
                 setImgList(((_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.list.map(function (item) {
                   var _item$img;
                   return _objectSpread(_objectSpread({}, item), {}, {
-                    img: (_item$img = item.img) === null || _item$img === void 0 ? void 0 : _item$img.replace('https://coolcare-scada.oss-cn-shanghai.aliyuncs.com', 'http://192.168.6.21:9000/iot')
+                    img: (_item$img = item.img) === null || _item$img === void 0 ? void 0 : _item$img.replace('https://coolcare-scada.oss-cn-shanghai.aliyuncs.com', '/imgfile/iot')
                   });
                 })) || []);
               } else {