@vtx/modals2 5.0.4 → 5.0.5

package/lib/_components/vm-bar-charts/index.js

@@ -31,7 +31,11 @@ var BarCharts = function BarCharts(_ref) {
     _ref$showLegend = _ref.showLegend,
     showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
     _ref$gridOptions = _ref.gridOptions,
-    gridOptions = _ref$gridOptions === void 0 ? {} : _ref$gridOptions;
+    gridOptions = _ref$gridOptions === void 0 ? {} : _ref$gridOptions,
+    _ref$otherProps = _ref.otherProps,
+    otherProps = _ref$otherProps === void 0 ? {} : _ref$otherProps,
+    _ref$tooltipProps = _ref.tooltipProps,
+    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps;
   var lineColors = ['#1FB64D'];
   var _useSettings = useSettings(),
     chartFontColor = _useSettings.chartFontColor,
@@ -50,8 +54,8 @@ var BarCharts = function BarCharts(_ref) {
     green: green,
     blue: blue
   };
-  var option = {
-    tooltip: {
+  var option = _objectSpread({
+    tooltip: _objectSpread({
       trigger: 'axis',
       valueFormatter: function valueFormatter(value) {
         var _findUnit;
@@ -68,7 +72,7 @@ var BarCharts = function BarCharts(_ref) {
         var leftSize = point[0] - size.contentSize[0];
         return [point[0] + size.contentSize[0] > size.viewSize[0] ? leftSize < 0 ? '35%' : leftSize : point[0], '0%'];
       }
-    },
+    }, tooltipProps),
     legend: {
       right: 'center',
       itemGap: 8,
@@ -160,7 +164,7 @@ var BarCharts = function BarCharts(_ref) {
         smooth: true
       }, item);
     })))
-  };
+  }, otherProps);
   return loading ? /*#__PURE__*/_jsx(Row, {
     style: {
       height: height

package/lib/_components/vm-extra-tab/style/index.less

@@ -12,15 +12,19 @@
     --shadow-color: rgba(0, 126, 255, 0.2);
   }
 
-  height: 28px;
-  line-height: 28px;
+  height: 32px;
+  line-height: 31px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
   background: var(--bg);
   border-radius: 6px;
+  padding: 2px;
   &-item {
+    height: 28px;
+    width: 28px;
+    text-align: center;
     &:first-child {
       border-top-left-radius: 6px;
       border-bottom-left-radius: 6px;
@@ -32,7 +36,6 @@
     padding: 0 5px;
     cursor: pointer;
     color: var(--color);
-    box-shadow: 0px 0px 2px 0px var(--shadow-color);
     &.active {
       border-radius: 6px;
       color: var(--active-color);

package/lib/_components/vm-pie-charts/index.js

@@ -24,6 +24,8 @@ var PieCharts = function PieCharts(_ref) {
     height = _ref$height === void 0 ? '100%' : _ref$height,
     _ref$legendConfig = _ref.legendConfig,
     legendConfig = _ref$legendConfig === void 0 ? {} : _ref$legendConfig,
+    _ref$spaceLength = _ref.spaceLength,
+    spaceLength = _ref$spaceLength === void 0 ? 20 : _ref$spaceLength,
     _ref$nameLength = _ref.nameLength,
     nameLength = _ref$nameLength === void 0 ? 6 : _ref$nameLength,
     _ref$innerRadius = _ref.innerRadius,
@@ -67,7 +69,7 @@ var PieCharts = function PieCharts(_ref) {
             fontSize: 14
           },
           space: {
-            width: 20
+            width: spaceLength
           },
           number: {
             width: 50,

package/lib/_components/vm-tag/style/index.less

@@ -5,6 +5,7 @@
   padding: 0 8px;
   font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
   font-size: 12px;
+  white-space: nowrap;
   display: flex;
   align-items: center;
   justify-content: center;

package/lib/_components/vm-video/HistoryGrid.js

@@ -0,0 +1,52 @@
+import { HistoryPlayer } from '@vtx/player';
+import { forwardRef, useRef } from 'react';
+import VmEmpty from "../vm-empty";
+import "./index.less";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var GridItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var channel = props.channel,
+    onClose = props.onClose;
+  var name = "".concat(channel === null || channel === void 0 ? void 0 : channel.deviceName, "-").concat(channel === null || channel === void 0 ? void 0 : channel.channelName);
+  var gridItemRef = useRef(null);
+  return /*#__PURE__*/_jsx("div", {
+    className: "vm-video-content-container",
+    ref: gridItemRef,
+    children: channel !== null && channel !== void 0 && channel.totalTimeUrl ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "vm-video-content-container-header",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "title",
+          title: name,
+          children: name
+        }), /*#__PURE__*/_jsx("div", {
+          className: "close",
+          onClick: onClose,
+          children: "x"
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "content",
+        children: /*#__PURE__*/_jsx(HistoryPlayer, {
+          ref: ref,
+          beenHasVideo: channel.beenHasVideo // 对讲
+          ,
+          url: channel.totalTimeUrl,
+          type: channel === null || channel === void 0 ? void 0 : channel.player,
+          deviceIp: channel.deviceIp,
+          devicePort: channel.devicePort,
+          captureName: name,
+          deviceId: channel.deviceId,
+          channelId: channel.channelId,
+          channelNum: channel.channelNum,
+          enableAgent: channel.enableAgent,
+          deviceCode: channel.deviceCode,
+          streamType: channel.streamType,
+          info: channel.info,
+          onClose: onClose
+        })
+      })]
+    }) : /*#__PURE__*/_jsx(VmEmpty, {
+      type: "NO_VIDEO"
+    })
+  });
+});
+export default GridItem;

package/lib/_components/vm-video/RealtimeGrid.js

@@ -2,7 +2,7 @@ import { LivePlayer } from '@vtx/player';
 import { forwardRef, useRef } from 'react';
 import VmEmpty from "../vm-empty";
 import "./index.less";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var GridItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var channel = props.channel,
     onClose = props.onClose;
@@ -12,13 +12,17 @@ var GridItem = /*#__PURE__*/forwardRef(function (props, ref) {
     className: "vm-video-content-container",
     ref: gridItemRef,
     children: channel !== null && channel !== void 0 && channel.url ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsxs("div", {
         className: "vm-video-content-container-header",
-        children: /*#__PURE__*/_jsx("span", {
+        children: [/*#__PURE__*/_jsx("span", {
           className: "title",
           title: name,
           children: name
-        })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "close",
+          onClick: onClose,
+          children: "x"
+        })]
       }), /*#__PURE__*/_jsx("div", {
         className: "content",
         children: /*#__PURE__*/_jsx(LivePlayer, {

package/lib/_components/vm-video/index.js

@@ -10,46 +10,85 @@ 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(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 { Checkbox } from 'antd';
+import { useSetState } from 'ahooks';
+import { Button, Checkbox, Form, message, Radio } from 'antd';
+import dayjs from 'dayjs';
 import { cloneDeep } from 'lodash';
 import { useEffect, useState } from 'react';
-import { VmExtraTab } from '..';
+import { VmExtraTab, VmWrapper } from '..';
 import useSettings from "../../_hooks/useSettings";
-import { getPreviewUrl } from "../../_service";
+import { getBackUrl, getPreviewUrl } from "../../_service";
 import { ChannelOfflineIcon, Rect1Icon, Rect4Icon, Rect9Icon, ShrinkIcon } from "../../_util/iconSvgHtml";
-import { VMInput } from "../vm-filter";
+import VmFilter, { VMDatePicker, VMInput } from "../vm-filter";
 import { VmTabs } from "../vm-tabs";
+import HistoryGrid from "./HistoryGrid";
 import "./index.less";
 import RealtimeGrid from "./RealtimeGrid";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var VmVideo = function VmVideo(_ref) {
-  var _checkedChannels$filt;
   var _ref$channels = _ref.channels,
     channels = _ref$channels === void 0 ? [] : _ref$channels;
   var _useSettings = useSettings(),
     isDark = _useSettings.isDark;
-  var _useState = useState(false),
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useState = useState('1'),
     _useState2 = _slicedToArray(_useState, 2),
-    isShrink = _useState2[0],
-    setIsShrink = _useState2[1];
-  var _useState3 = useState('1'),
+    tabKey = _useState2[0],
+    setTabKey = _useState2[1];
+  var _useState3 = useState('4'),
     _useState4 = _slicedToArray(_useState3, 2),
-    tabKey = _useState4[0],
-    setTabKey = _useState4[1];
-  var _useState5 = useState('4'),
+    mode = _useState4[0],
+    setMode = _useState4[1];
+  var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    mode = _useState6[0],
-    setMode = _useState6[1];
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    checkedChannels = _useState8[0],
-    setCheckedChannels = _useState8[1];
-  var _useState9 = useState(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    filterVal = _useState10[0],
-    setFilterVal = _useState10[1];
+    checkedChannels = _useState6[0],
+    setCheckedChannels = _useState6[1];
+  var _useSetState = useSetState({
+      dateType: 'custom',
+      datePickerDisabled: true,
+      startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
+      endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      history: {}
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var dateType = state.dateType,
+    datePickerDisabled = state.datePickerDisabled,
+    startTime = state.startTime,
+    endTime = state.endTime,
+    history = state.history;
   useEffect(function () {
-    if (channels !== null && channels !== void 0 && channels.length) {
+    if (dateType === 'custom') {
+      setState({
+        datePickerDisabled: false
+      });
+    } else {
+      setState({
+        datePickerDisabled: true
+      });
+      if (dateType === 'dayBeforeYesterday') {
+        setState({
+          startTime: dayjs().subtract(2, 'day').format('YYYY-MM-DD 00:00:00'),
+          endTime: dayjs().subtract(2, 'day').format('YYYY-MM-DD 23:59:59')
+        });
+      } else if (dateType === 'yesterday') {
+        setState({
+          startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'),
+          endTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
+        });
+      } else if (dateType === 'today') {
+        setState({
+          startTime: dayjs().format('YYYY-MM-DD 00:00:00'),
+          endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
+        });
+      }
+    }
+  }, [dateType]);
+  useEffect(function () {
+    if (channels !== null && channels !== void 0 && channels.length && tabKey === '1') {
       var _channels$filter;
       Promise.all(channels === null || channels === void 0 || (_channels$filter = channels.filter(function (ele, index) {
         return index < 4;
@@ -65,99 +104,216 @@ var VmVideo = function VmVideo(_ref) {
           });
         }));
       });
+    } else {}
+    if (tabKey === '2') {
+      var _channels$;
+      form.setFieldsValue({
+        channelNum: (_channels$ = channels[0]) === null || _channels$ === void 0 ? void 0 : _channels$.channelNum
+      });
     }
-  }, [channels]);
+  }, [channels, tabKey]);
   var getActiveModeFill = function getActiveModeFill(key) {
     if (isDark) {
       return mode === key ? '#fff' : '#009DFF';
     }
     return mode === key ? '#1677FF' : '#8C8C8C';
   };
+  var onHistorySubmit = function onHistorySubmit(values) {
+    var channel = channels.find(function (ele) {
+      return ele.channelNum === values.channelNum;
+    });
+    getBackUrl({
+      beginTime: startTime,
+      endTime: endTime,
+      channelNum: values.channelNum,
+      deviceId: channel.videoDeviceId
+    }).then(function (res) {
+      var _res$data;
+      if (!(res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.totalTimeUrl)) {
+        message.info('未查询到视频!');
+        return;
+      }
+      setState({
+        history: res === null || res === void 0 ? void 0 : res.data
+      });
+    });
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: "vm-video ".concat(isDark ? 'dark' : ''),
-    children: [isShrink && /*#__PURE__*/_jsx("div", {
-      className: "vm-video-left-filter-btn",
-      onClick: function onClick() {
-        return setIsShrink(!isShrink);
-      },
-      children: /*#__PURE__*/_jsx(ShrinkIcon, {
-        fill: isDark ? '#009DFF' : '#595959',
-        style: {
-          transform: isShrink ? 'rotate(180deg)' : ''
-        }
-      })
-    }), !isShrink && /*#__PURE__*/_jsxs("div", {
-      className: "vm-video-left",
-      style: {
-        width: isShrink ? '24px' : '300px'
-      },
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "vm-video-left-filter",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "vm-video-left-filter-input",
-          children: /*#__PURE__*/_jsx(VMInput, {
-            onValChange: function onValChange(val) {
-              setFilterVal(val);
-            }
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          className: "vm-video-left-filter-btn",
-          onClick: function onClick() {
-            return setIsShrink(!isShrink);
-          },
-          children: /*#__PURE__*/_jsx(ShrinkIcon, {
-            fill: isDark ? '#009DFF' : '#595959',
-            style: {
-              transform: isShrink ? 'rotate(180deg)' : ''
-            }
-          })
-        })]
-      }), /*#__PURE__*/_jsx("div", {
-        className: "vm-video-left-channels",
-        children: checkedChannels === null || checkedChannels === void 0 || (_checkedChannels$filt = checkedChannels.filter(function (ele) {
-          return ele.channelName.indexOf(filterVal) > -1;
-        })) === null || _checkedChannels$filt === void 0 ? void 0 : _checkedChannels$filt.map(function (ele, index) {
-          var color = ele.checked ? isDark ? '#009DFF' : '#1677FF' : isDark ? '#fff' : '#595959';
-          return /*#__PURE__*/_jsx("div", {
-            className: "channels--item",
-            children: /*#__PURE__*/_jsxs(Checkbox, {
-              checked: ele.checked,
-              onChange: function onChange(e) {
-                var list = cloneDeep(checkedChannels);
-                if (e.target.checked) {
-                  getPreviewUrl({
-                    channelNum: ele.channelNum,
-                    deviceId: ele.deviceId
-                  }).then(function (res) {
-                    list[index] = _objectSpread({
-                      checked: true
-                    }, res.data);
-                    setCheckedChannels(list);
-                  });
-                } else {
-                  list[index].checked = false;
-                  list[index].url = '';
-                  list[index].player = '';
-                  setCheckedChannels(list);
-                }
-              },
-              style: {
-                color: color
-              },
-              children: [/*#__PURE__*/_jsx(ChannelOfflineIcon, {
-                fill: color
-              }), ele.channelName]
+    children: [/*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx("div", {
+        className: "vm-video-left",
+        children: /*#__PURE__*/_jsxs(VmWrapper, {
+          title: "\u67E5\u8BE2\u89C6\u9891",
+          children: [tabKey === '1' && /*#__PURE__*/_jsx("div", {
+            className: "vm-video-left-channels",
+            children: checkedChannels === null || checkedChannels === void 0 ? void 0 : checkedChannels.map(function (ele, index) {
+              var color = ele.checked ? isDark ? '#009DFF' : '#1677FF' : isDark ? '#fff' : '#595959';
+              return /*#__PURE__*/_jsx("div", {
+                className: "channels--item",
+                children: /*#__PURE__*/_jsxs(Checkbox, {
+                  checked: ele.checked,
+                  onChange: function onChange(e) {
+                    var list = cloneDeep(checkedChannels);
+                    if (e.target.checked) {
+                      getPreviewUrl({
+                        channelNum: ele.channelNum,
+                        deviceId: ele.deviceId
+                      }).then(function (res) {
+                        list[index] = _objectSpread({
+                          checked: true
+                        }, res.data);
+                        setCheckedChannels(list);
+                      });
+                    } else {
+                      list[index].checked = false;
+                      list[index].url = '';
+                      list[index].player = '';
+                      setCheckedChannels(list);
+                    }
+                  },
+                  style: {
+                    color: color
+                  },
+                  children: [/*#__PURE__*/_jsx(ChannelOfflineIcon, {
+                    fill: color
+                  }), ele.channelName]
+                })
+              }, index);
             })
-          }, index);
+          }), tabKey === '2' && /*#__PURE__*/_jsxs("div", {
+            className: "vm-video-history",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "form",
+              children: /*#__PURE__*/_jsxs(Form, {
+                form: form,
+                name: "history",
+                labelCol: {
+                  span: 6
+                },
+                wrapperCol: {
+                  span: 18
+                },
+                onFinish: onHistorySubmit,
+                requiredMark: false,
+                colon: true,
+                initialValues: {
+                  beginTime: startTime ? dayjs(startTime) : dayjs().subtract(1, 'day').startOf('day'),
+                  endTime: endTime ? dayjs(endTime) : dayjs().subtract(1, 'day').endOf('day')
+                },
+                autoComplete: "off",
+                children: [/*#__PURE__*/_jsx(Form.Item, {
+                  label: "",
+                  wrapperCol: {
+                    span: 24
+                  },
+                  children: /*#__PURE__*/_jsxs(Radio.Group, {
+                    name: "radiogroup",
+                    size: "small",
+                    value: dateType,
+                    onChange: function onChange(e) {
+                      setState({
+                        dateType: e.target.value
+                      });
+                    },
+                    style: {
+                      whiteSpace: 'nowrap'
+                    },
+                    children: [/*#__PURE__*/_jsx(Radio, {
+                      value: "dayBeforeYesterday",
+                      children: "\u524D\u65E5"
+                    }), /*#__PURE__*/_jsx(Radio, {
+                      value: "yesterday",
+                      children: "\u6628\u65E5"
+                    }), /*#__PURE__*/_jsx(Radio, {
+                      value: "today",
+                      children: "\u4ECA\u65E5"
+                    }), /*#__PURE__*/_jsx(Radio, {
+                      value: "custom",
+                      children: "\u81EA\u5B9A\u4E49"
+                    })]
+                  })
+                }), /*#__PURE__*/_jsx(Form.Item, {
+                  label: "\u5F00\u59CB\u65F6\u95F4",
+                  name: "beginTime",
+                  rules: [{
+                    required: true,
+                    message: '请输入开始时间'
+                  }],
+                  children: /*#__PURE__*/_jsx(VMDatePicker, {
+                    style: {
+                      width: 180
+                    },
+                    showTime: true,
+                    disabled: datePickerDisabled,
+                    dropdownClassName: "date-dark"
+                  })
+                }), /*#__PURE__*/_jsx(Form.Item, {
+                  label: "\u7ED3\u675F\u65F6\u95F4",
+                  name: "endTime",
+                  rules: [{
+                    required: true,
+                    message: '请输入结束时间'
+                  }],
+                  children: /*#__PURE__*/_jsx(VMDatePicker, {
+                    style: {
+                      width: 180
+                    },
+                    showTime: true,
+                    disabled: datePickerDisabled
+                  })
+                }), /*#__PURE__*/_jsx(Form.Item, {
+                  label: "\u89C6\u9891\u901A\u9053",
+                  name: "channelNum",
+                  rules: [{
+                    required: true,
+                    message: '请选择视频通道'
+                  }],
+                  children: /*#__PURE__*/_jsx(VmFilter.VMSelect, {
+                    options: checkedChannels === null || checkedChannels === void 0 ? void 0 : checkedChannels.map(function (ele) {
+                      return {
+                        value: ele.channelNum,
+                        label: ele.channelName
+                      };
+                    }),
+                    style: {
+                      width: 180
+                    }
+                  })
+                }), /*#__PURE__*/_jsx(Form.Item, {
+                  wrapperCol: {
+                    span: 24
+                  },
+                  style: {
+                    textAlign: 'center'
+                  },
+                  children: /*#__PURE__*/_jsx(Button, {
+                    type: "primary",
+                    htmlType: "submit",
+                    className: "submit-button",
+                    children: "\u67E5\u8BE2"
+                  })
+                })]
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              className: "vm-video-history-row"
+            })]
+          })]
         })
-      })]
+      })
     }), /*#__PURE__*/_jsxs("div", {
       className: "vm-video-right",
       children: [/*#__PURE__*/_jsx(VmTabs, {
         defaultActiveKey: "1",
         activeKey: tabKey,
         onChange: function onChange(key) {
-          return setTabKey(key);
+          setTabKey(key);
+          if (key === '2') {
+            // extraTabRef.current?.setActiveKey(1)
+            setMode('1');
+          } else {
+            setMode('4');
+          }
         },
         items: [{
           label: "\u5B9E\u65F6\u89C6\u9891",
@@ -166,7 +322,7 @@ var VmVideo = function VmVideo(_ref) {
           label: "\u5386\u53F2\u89C6\u9891",
           key: '2'
         }],
-        tabBarExtraContent: /*#__PURE__*/_jsx(VmExtraTab, {
+        tabBarExtraContent: tabKey === '1' ? /*#__PURE__*/_jsx(VmExtraTab, {
           style: {
             width: '92px'
           },
@@ -193,35 +349,65 @@ var VmVideo = function VmVideo(_ref) {
           onChange: function onChange(key) {
             setMode(key);
           }
-        })
+        }) : /*#__PURE__*/_jsx(_Fragment, {})
       }), /*#__PURE__*/_jsx("div", {
         className: "vm-video-content _".concat(mode),
-        children: getGridItems(mode, checkedChannels === null || checkedChannels === void 0 ? void 0 : checkedChannels.filter(function (ele) {
-          return ele.channelName.indexOf(filterVal) > -1 && ele.checked;
-        }))
+        children: tabKey === '1' ? getGridItems(mode, checkedChannels === null || checkedChannels === void 0 ? void 0 : checkedChannels.filter(function (ele) {
+          return ele.checked;
+        }), setCheckedChannels) : /*#__PURE__*/_jsx(HistoryGrid, {
+          channel: history
+        })
       })]
     })]
   });
 };
 export default VmVideo;
-var getGridItems = function getGridItems(latestGrid, channels) {
+var getGridItems = function getGridItems(latestGrid, channels, setCheckedChannels) {
   var items = [];
-  for (var i = 0; i < Number(latestGrid); i++) {
-    var element = /*#__PURE__*/_jsx(RealtimeGrid
-    // active={state.activeIndex === i}
-    , {
-      // onClick={() => setState({ activeIndex: i })}
+  var _loop = function _loop(i) {
+    var element = /*#__PURE__*/_jsx(RealtimeGrid, {
       channel: channels[i] || {
         channelNum: '',
         channelId: ''
       },
       onClose: function onClose() {
-        //   closeVideo(i);
+        var list = cloneDeep(channels);
+        list[i].checked = false;
+        list[i].url = '';
+        list[i].player = '';
+        setCheckedChannels(list);
       },
       scale: 1
       // onScreenshot={onScreenshot}
     }, i);
     items.push(element);
+  };
+  for (var i = 0; i < Number(latestGrid); i++) {
+    _loop(i);
   }
   return items;
+};
+export var Filter = function Filter(isDark, isShrink, setFilterVal) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "vm-video-left-filter",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "vm-video-left-filter-input",
+      children: /*#__PURE__*/_jsx(VMInput, {
+        onValChange: function onValChange(val) {
+          setFilterVal(val);
+        }
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "vm-video-left-filter-btn",
+      onClick: function onClick() {
+        return setIsShrink(!isShrink);
+      },
+      children: /*#__PURE__*/_jsx(ShrinkIcon, {
+        fill: isDark ? '#009DFF' : '#595959',
+        style: {
+          transform: isShrink ? 'rotate(180deg)' : ''
+        }
+      })
+    })]
+  });
 };