@vtx/modals2 5.0.1 → 5.0.3

package/lib/vtx-df-modal/components/WorkCondition/index.js

@@ -1,90 +1,167 @@
-"use strict";
-
-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); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ahooks = require("ahooks");
-var _moment = _interopRequireDefault(require("moment"));
-var _vmFilter = require("../../../vm-filter");
-var _vmSubTabs = _interopRequireWildcard(require("../../../vm-sub-tabs"));
-var _Monitor = _interopRequireDefault(require("./Monitor"));
-var _Situation = _interopRequireDefault(require("./Situation"));
-var _useSettings2 = _interopRequireDefault(require("../../../vm-hooks/useSettings"));
-var _api = require("../../api");
-require("./index.less");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-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; } /**
- * 计量-工况信息
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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(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(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * 计量-工况信息
  */
+import { useSetState } from 'ahooks';
+import { Space, Tabs } from 'antd';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { VmFilter, VmWrapper } from "../../../_components";
+import useSettings from "../../../_hooks/useSettings";
+import { BaseService } from "../../api";
+import Monitor from "./Monitor";
+import Table from "./Table";
+import "./index.less";
+import alarm from "../../imgs/alarm.png";
+import alarmLight from "../../imgs/alarm_light.png";
+import normal from "../../imgs/normal.png";
+import normalLight from "../../imgs/normal_light.png";
+import more from "../../imgs/tab_more.png";
+import moreLight from "../../imgs/tab_more_light.png";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var WorkCondition = function WorkCondition(props) {
-  var id = props.id;
-  var _useSettings = (0, _useSettings2["default"])(),
-    sDate = _useSettings.startDate,
-    eDate = _useSettings.endDate;
-  var _useSetState = (0, _ahooks.useSetState)({
-      startDate: sDate ? sDate : (0, _moment["default"])().format('YYYY-MM-DD'),
-      endDate: eDate ? eDate : (0, _moment["default"])().format('YYYY-MM-DD'),
-      tabKey: '1'
+  var _realtimeMonitor$find;
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark;
+  var code = props.code;
+  var _useSetState = useSetState({
+      startDate: moment().subtract(3, 'days'),
+      endDate: moment(),
+      tabKey: 'chart'
     }),
     _useSetState2 = _slicedToArray(_useSetState, 2),
     state = _useSetState2[0],
     setState = _useSetState2[1];
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    deviceId = _useState4[0],
+    setDeviceId = _useState4[1]; // 列表使用
   var startDate = state.startDate,
     endDate = state.endDate,
     tabKey = state.tabKey;
-  var _BaseService$useBaseI = _api.BaseService.useBaseInfo(id),
-    code = _BaseService$useBaseI.code;
-  var handleDateChange = function handleDateChange(start, end) {
-    setState({
-      startDate: start,
-      endDate: end
-    });
-  };
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "df-condition"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "df-condition-head"
-  }, /*#__PURE__*/_react["default"].createElement(_vmSubTabs["default"], {
-    onChange: function onChange(key) {
-      setState({
-        tabKey: key
-      });
-    },
-    activeKey: tabKey
-  }, [{
-    name: /*#__PURE__*/_react["default"].createElement("div", null, "\u8FD0\u884C\u4FE1\u606F"),
-    key: '1'
-  }, {
-    name: /*#__PURE__*/_react["default"].createElement("div", null, "\u73AF\u4FDD\u76D1\u6D4B"),
-    key: '2'
-  }].map(function (ele) {
-    return /*#__PURE__*/_react["default"].createElement(_vmSubTabs.SubTabPane, {
-      subKey: ele.key,
-      key: ele.key,
-      tab: ele.name
-    });
-  })), /*#__PURE__*/_react["default"].createElement("div", null, tabKey === '1' && ( /*#__PURE__*/_react["default"].createElement(_vmFilter.VMRangePicker, {
-    value: [(0, _moment["default"])(startDate), (0, _moment["default"])(endDate)],
-    onChange: function onChange(dates) {
-      return dates && handleDateChange((0, _moment["default"])(dates[0]).format('YYYY-MM-DD'), (0, _moment["default"])(dates[1]).format('YYYY-MM-DD'));
+  var _BaseService$useRealt = BaseService.useRealtimeMonitor(code),
+    realtimeMonitor = _BaseService$useRealt.realtimeMonitor;
+  useEffect(function () {
+    if ((realtimeMonitor === null || realtimeMonitor === void 0 ? void 0 : realtimeMonitor.length) > 0) {
+      var _realtimeMonitor$;
+      setActive(realtimeMonitor[0].deviceId);
+      setDeviceId(realtimeMonitor === null || realtimeMonitor === void 0 || (_realtimeMonitor$ = realtimeMonitor[0]) === null || _realtimeMonitor$ === void 0 ? void 0 : _realtimeMonitor$.deviceId);
+    }
+  }, [realtimeMonitor]);
+  var _BaseService$useRealt2 = BaseService.useRealtime(active),
+    realtimeRes = _BaseService$useRealt2.realtimeRes;
+  var alarmImg = isDark ? alarm : alarmLight;
+  var normalImg = isDark ? normal : normalLight;
+  var disabledDate = function disabledDate(current) {
+    if (!startDate || !endDate) {
+      return false;
     }
-  })))), tabKey === '1' && ( /*#__PURE__*/_react["default"].createElement(_Situation["default"], {
-    code: code,
-    startTime: "".concat(startDate, " 00:00:00"),
-    endTime: "".concat(endDate, " 23:59:59")
-  })), tabKey === '2' && /*#__PURE__*/_react["default"].createElement(_Monitor["default"], {
-    code: code
-  }));
+    var tooLate = startDate && current.diff(startDate, 'days') > 7;
+    var tooEarly = endDate && endDate.diff(current, 'days') > 7;
+    return !!tooEarly || !!tooLate;
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "df-condition",
+    children: /*#__PURE__*/_jsxs(VmWrapper, {
+      title: "\u8FD0\u884C\u603B\u89C8",
+      onChange: function onChange(key) {
+        setState({
+          tabKey: key
+        });
+      },
+      needChange: true,
+      extra: /*#__PURE__*/_jsxs(Space, {
+        children: [tabKey === 'list' && /*#__PURE__*/_jsx(VmFilter.VMSelect, {
+          value: deviceId,
+          onChange: function onChange(val) {
+            setDeviceId(val);
+          },
+          options: realtimeMonitor === null || realtimeMonitor === void 0 ? void 0 : realtimeMonitor.map(function (item) {
+            return {
+              value: item.deviceId,
+              label: item.deviceName
+            };
+          }),
+          style: {
+            width: 150
+          },
+          placeholder: "\u8BF7\u9009\u62E9",
+          allowClear: false
+        }), /*#__PURE__*/_jsx(VmFilter.VMRangePicker, {
+          value: [moment(startDate), moment(endDate)],
+          disabledDate: disabledDate,
+          onChange: function onChange(dates) {
+            return dates && setState({
+              startDate: moment(dates[0]),
+              endDate: moment(dates[1])
+            });
+          }
+        })]
+      }),
+      children: [tabKey === 'chart' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "df-condition-head",
+          children: /*#__PURE__*/_jsx(Tabs, {
+            centered: true,
+            moreIcon: /*#__PURE__*/_jsx("img", {
+              src: isDark ? more : moreLight
+            }),
+            popupClassName: "df-popup-className ".concat(isDark ? 'dark' : ''),
+            onChange: function onChange(key) {
+              setActive(key);
+            },
+            size: "small",
+            items: (realtimeMonitor === null || realtimeMonitor === void 0 ? void 0 : realtimeMonitor.map(function (item) {
+              var flag = item.beenNormal;
+              return {
+                label: /*#__PURE__*/_jsxs("div", {
+                  className: "df-monitor-head-item",
+                  children: [/*#__PURE__*/_jsx("img", {
+                    src: flag ? normalImg : alarmImg
+                  }), /*#__PURE__*/_jsxs("div", {
+                    className: "df-monitor-head-item-right",
+                    children: [/*#__PURE__*/_jsx("div", {
+                      className: "df-monitor-head-item-right-name",
+                      children: item.deviceName
+                    }), /*#__PURE__*/_jsx("div", {
+                      className: "df-monitor-head-item-right-".concat(flag ? 'valueNormal' : 'valueAlarm'),
+                      children: /*#__PURE__*/_jsx("span", {
+                        children: flag ? '正常' : '异常'
+                      })
+                    })]
+                  })]
+                }),
+                key: item.deviceId
+              };
+            })) || []
+          })
+        }), /*#__PURE__*/_jsx(Monitor, {
+          deviceName: realtimeMonitor === null || realtimeMonitor === void 0 || (_realtimeMonitor$find = realtimeMonitor.find(function (ele) {
+            return ele.deviceId === active;
+          })) === null || _realtimeMonitor$find === void 0 ? void 0 : _realtimeMonitor$find.deviceName,
+          realtimeRes: realtimeRes,
+          startDate: startDate,
+          endDate: endDate,
+          deviceId: active
+        })]
+      }), tabKey === 'list' && /*#__PURE__*/_jsx("div", {
+        className: "df-condition-table",
+        children: /*#__PURE__*/_jsx(Table, {
+          startDate: moment(startDate).format('YYYY-MM-DD 00:00:00'),
+          endDate: moment(endDate).format('YYYY-MM-DD 00:00:00'),
+          deviceId: deviceId
+        })
+      })]
+    })
+  });
 };
-var _default = exports["default"] = WorkCondition;
-//# sourceMappingURL=index.js.map
+export default WorkCondition;

package/lib/vtx-df-modal/components/WorkCondition/index.less

@@ -1,136 +1,113 @@
-.df-condition {
-    padding: 10px;
-    &-head {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 10px 16px;
-        background-color: var(--bg-color2);
-        border: 1px solid var(--bg-border-color2);
-    }
-    .environment-monitor {
-        padding: 10px 16px;
-        border: 1px solid var(--bg-border-color2);
-
-        background-color: var(--bg-color2);
-        text-align: center;
-        &-head {
-            display: flex;
-            // justify-content: space-around;
-            align-items: center;
-            width: 100%;
-            overflow: auto;
-            &::-webkit-scrollbar {
-                width: 0px;
-                height: 4px;
-            }
-
-            &::-webkit-scrollbar-thumb {
-                background: var(--scroll-bar-hover-bg);
-                border-radius: 5px;
-            }
-
-            &-item-active {
-                padding: 8px 12px;
-                background-color: var(--block-bg-color);
-                // min-width: 130px;
-                margin: 0 10px;
-            }
-            &-item {
-                // min-width: 130px;
-                padding: 8px 12px;
-                margin: 0 10px;
-            }
-        }
-        &-table {
-            margin-top: 20px;
-            min-height: 440px;
-        }
-        &-situation {
-            height: 100%;
-            min-height: 500px;
-            padding: 10px 16px;
-            background-color: var(--bg-color2);
-            border: 1px solid var(--bg-border-color2);
-
-            &-noData {
-                text-align: center;
-            }
-        }
-    }
-    .em-situation {
-        clear: both;
-        &-wrap {
-            width: 620px;
-            margin: 150px auto;
-        }
-        &-parent {
-            width: 324px;
-            height: 57px;
-            line-height: 50px;
-            margin: 0 auto;
-            background: url('../../imgs/situation_parent_bg.png') no-repeat 100% 100%;
-            color: var(--info-color);
-            img {
-                width: 46px;
-                height: 50px;
-                margin-left: 44px;
-                margin-right: 18px;
-            }
-            span {
-                font-size: 22px;
-            }
-        }
-        &-verticaline {
-            width: 2px;
-            height: 28px;
-            margin: 0 auto;
-            background: #096e88;
-        }
-        &-horizontaline {
-            width: 540px;
-            height: 2px;
-            margin: 0 auto;
-            background: #096e88;
-        }
-        &-verticaline4 {
-            width: 540px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: start;
-            &-item {
-                width: 2px;
-                height: 16px;
-                background: #096e88;
-            }
-        }
-        &-content {
-            width: 100%;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: start;
-            &-item {
-                width: 80px;
-                text-align: center;
-                &--progress {
-                    margin-top: 6px;
-                }
-                &--name {
-                    margin-top: 12px;
-                    color: var(--label-color);
-                }
-                &--value {
-                    color: var(--info-color);
-                    span {
-                        font-size: 22px;
-                    }
-                }
-            }
-        }
-    }
-    .ant-progress-text {
-        color: var(--info-color) !important;
-    }
-}
+.df-condition {
+  padding: 10px;
+  &-head {
+    width: 100%;
+  }
+
+  &-table {
+    height: 518px;
+  }
+  &-trend {
+    width: 100%;
+    &-head {
+      height: 32px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+  .environment-monitor {
+    padding: 10px 16px;
+    border: 1px solid var(--bg-border-color2);
+
+    background-color: var(--content-bg-color);
+    text-align: center;
+
+    &-situation {
+      height: 100%;
+      min-height: 500px;
+      padding: 10px 16px;
+      background-color: var(--content-bg-color);
+      border: 1px solid var(--bg-border-color2);
+
+      &-noData {
+        text-align: center;
+      }
+    }
+  }
+  .em-situation {
+    clear: both;
+    &-wrap {
+      width: 620px;
+      margin: 150px auto;
+    }
+    &-parent {
+      width: 324px;
+      height: 57px;
+      line-height: 50px;
+      margin: 0 auto;
+      background: url('../../imgs/situation_parent_bg.png') no-repeat 100% 100%;
+      color: var(--info-color);
+      img {
+        width: 46px;
+        height: 50px;
+        margin-left: 44px;
+        margin-right: 18px;
+      }
+      span {
+        font-size: 22px;
+      }
+    }
+    &-verticaline {
+      width: 2px;
+      height: 28px;
+      margin: 0 auto;
+      background: #096e88;
+    }
+    &-horizontaline {
+      width: 540px;
+      height: 2px;
+      margin: 0 auto;
+      background: #096e88;
+    }
+    &-verticaline4 {
+      width: 540px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      &-item {
+        width: 2px;
+        height: 16px;
+        background: #096e88;
+      }
+    }
+    &-content {
+      width: 100%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      &-item {
+        width: 80px;
+        text-align: center;
+        &--progress {
+          margin-top: 6px;
+        }
+        &--name {
+          margin-top: 12px;
+          color: var(--label-color);
+        }
+        &--value {
+          color: var(--info-color);
+          span {
+            font-size: 22px;
+          }
+        }
+      }
+    }
+  }
+  .ant-progress-text {
+    color: var(--info-color) !important;
+  }
+}

package/lib/vtx-df-modal/components/index.js

@@ -1,28 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BaseInfo", {
-  enumerable: true,
-  get: function get() {
-    return _BaseInfo["default"];
-  }
-});
-Object.defineProperty(exports, "Metering", {
-  enumerable: true,
-  get: function get() {
-    return _Metering["default"];
-  }
-});
-Object.defineProperty(exports, "WorkCondition", {
-  enumerable: true,
-  get: function get() {
-    return _WorkCondition["default"];
-  }
-});
-var _BaseInfo = _interopRequireDefault(require("./BaseInfo"));
-var _Metering = _interopRequireDefault(require("./Metering"));
-var _WorkCondition = _interopRequireDefault(require("./WorkCondition"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-//# sourceMappingURL=index.js.map
+import BaseInfo from "./BaseInfo";
+import Calendar from "./Calendar";
+import Metering from "./Metering";
+import WorkCondition from "./WorkCondition";
+export { BaseInfo, Calendar, Metering, WorkCondition };

package/lib/vtx-df-modal/imgs/rjjcl.svg

@@ -0,0 +1,55 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 438">
+<g id="Group 461">
+<circle id="Ellipse 38" cx="22" cy="22" r="22" fill="#119FFB" fill-opacity="0.1"/>
+</g>
+<g id="Group 528">
+<g id="Frame">
+<g id="Frame_2" clip-path="url(#clip0_163_1776)">
+<g id="Vector" filter="url(#filter0_i_163_1776)">
+<path d="M9.47559 32.618V31.0052H11.1652V21.294H17.8891V17.9599L22.2068 21.294V17.9599L26.5293 21.294V17.9599L30.847 21.294V31.0052H32.5289V32.618H9.47559ZM11.9913 20.7705L13.3053 12.818H15.6702L16.9842 20.7695L11.9913 20.7705ZM21.3778 12.4559C20.3016 11.9437 19.1247 11.6779 17.9328 11.6779C16.7409 11.6779 15.564 11.9437 14.4878 12.4559C17.6605 9.74331 20.5614 10.6222 20.5614 10.6222C22.8482 11.8025 25.4813 12.1275 27.9864 11.5386C26.7781 12.3828 25.3294 12.814 23.8561 12.7681C23.0204 12.771 22.1866 12.6653 21.3778 12.455V12.4559Z" fill="#119FFB"/>
+</g>
+</g>
+</g>
+<g id="Frame_3" clip-path="url(#clip1_163_1776)">
+<foreignObject x="17.667" y="16.667" width="22.667" height="22.667"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_2_163_1776_clip_path);height:100%;width:100%"></div></foreignObject><path id="Vector_2" data-figma-bg-blur-radius="4" d="M29 20.9668C30.8654 20.9668 32.6546 21.7083 33.9736 23.0273C35.2925 24.3463 36.0331 26.1348 36.0332 28C36.0332 28.9235 35.8514 29.8382 35.498 30.6914C35.1446 31.5447 34.6267 32.3205 33.9736 32.9736C33.3205 33.6267 32.5447 34.1446 31.6914 34.498C30.8382 34.8514 29.9235 35.0332 29 35.0332C28.0765 35.0332 27.1618 34.8515 26.3086 34.498C25.4554 34.1446 24.6804 33.6266 24.0273 32.9736C23.3742 32.3205 22.8554 31.5447 22.502 30.6914C22.1486 29.8382 21.9668 28.9234 21.9668 28C21.9669 26.1348 22.7084 24.3463 24.0273 23.0273C25.3463 21.7084 27.1348 20.9669 29 20.9668Z" fill="#C5DFFF" fill-opacity="0.5" stroke="url(#paint0_linear_163_1776)" stroke-width="0.6"/>
+<g id="&#230;&#151;&#165;" filter="url(#filter2_d_163_1776)">
+<path d="M26.232 24.688H31.816V31.608H30.784V25.656H27.216V31.624H26.232V24.688ZM26.904 27.376H31.208V28.32H26.904V27.376ZM26.904 30.128H31.216V31.096H26.904V30.128Z" fill="white"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_163_1776" x="9.47559" y="10.4863" width="23.0537" height="24.1318" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_163_1776"/>
+</filter>
+<clipPath id="bgblur_2_163_1776_clip_path" transform="translate(-17.667 -16.667)"><path d="M29 20.9668C30.8654 20.9668 32.6546 21.7083 33.9736 23.0273C35.2925 24.3463 36.0331 26.1348 36.0332 28C36.0332 28.9235 35.8514 29.8382 35.498 30.6914C35.1446 31.5447 34.6267 32.3205 33.9736 32.9736C33.3205 33.6267 32.5447 34.1446 31.6914 34.498C30.8382 34.8514 29.9235 35.0332 29 35.0332C28.0765 35.0332 27.1618 34.8515 26.3086 34.498C25.4554 34.1446 24.6804 33.6266 24.0273 32.9736C23.3742 32.3205 22.8554 31.5447 22.502 30.6914C22.1486 29.8382 21.9668 28.9234 21.9668 28C21.9669 26.1348 22.7084 24.3463 24.0273 23.0273C25.3463 21.7084 27.1348 20.9669 29 20.9668Z"/>
+</clipPath><filter id="filter2_d_163_1776" x="22.2324" y="22.6885" width="13.584" height="14.9355" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0862745 0 0 0 0 0.466667 0 0 0 0 1 0 0 0 0.7 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_163_1776"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_163_1776" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_163_1776" x1="29.0003" y1="20.667" x2="29.0003" y2="35.3337" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.7"/>
+</linearGradient>
+<clipPath id="clip0_163_1776">
+<rect width="24" height="24" fill="white" transform="translate(9.00977 10.0127)"/>
+</clipPath>
+<clipPath id="clip1_163_1776">
+<rect width="16" height="16" fill="white" transform="translate(21 20)"/>
+</clipPath>
+</defs>
+</svg>