@vtx/modals2 5.0.3 → 5.0.5

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)' : ''
+        }
+      })
+    })]
+  });
 };

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

@@ -16,7 +16,13 @@
     --wborder-color: #1064a7;
     --check-bg: #009dff;
   }
-  .vm-video-left,
+  .vm-video-history .ant-radio-wrapper {
+    color: var(--modal-title-color);
+  }
+  .vm-video-history .ant-form-item-label > label {
+    color: var(--modal-title-color);
+  }
+
   .vm-video-right {
     background: var(--wbg-color);
     border-radius: 8px;
@@ -161,6 +167,9 @@
       }
 
       .close {
+        color: white;
+        cursor: pointer;
+        font-size: 16px;
         margin-left: auto;
       }
     }

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

@@ -11,7 +11,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 { Tooltip } from 'antd';
-import _ from 'lodash';
+import classnames from 'classnames';
+import _, { isEmpty } from 'lodash';
 import { useEffect, useState } from 'react';
 import useSettings from "../../_hooks/useSettings";
 import { ChartIcon, DateIcon, ListIcon } from "../../_util/iconSvgHtml";
@@ -26,8 +27,9 @@ export default function VmWrapper(props) {
   var _useSettings = useSettings(),
     isDark = _useSettings.isDark;
   var _props$title = props.title,
-    title = _props$title === void 0 ? '基本信息' : _props$title,
+    title = _props$title === void 0 ? '' : _props$title,
     extra = props.extra,
+    extraLeft = props.extraLeft,
     _props$extraStyle = props.extraStyle,
     extraStyle = _props$extraStyle === void 0 ? {} : _props$extraStyle,
     _props$needChange = props.needChange,
@@ -54,7 +56,14 @@ export default function VmWrapper(props) {
     _props$showTitle = props.showTitle,
     showTitle = _props$showTitle === void 0 ? true : _props$showTitle,
     _props$showContent = props.showContent,
-    showContent = _props$showContent === void 0 ? true : _props$showContent;
+    showContent = _props$showContent === void 0 ? true : _props$showContent,
+    _props$tabList = props.tabList,
+    tabList = _props$tabList === void 0 ? [] : _props$tabList,
+    _props$activeKey = props.activeKey,
+    activeKey = _props$activeKey === void 0 ? '' : _props$activeKey,
+    onChangeTab = props.onChangeTab,
+    _props$pickerProps = props.pickerProps,
+    pickerProps = _props$pickerProps === void 0 ? {} : _props$pickerProps;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     changeList = _useState2[0],
@@ -108,10 +117,23 @@ export default function VmWrapper(props) {
     children: [showTitle && /*#__PURE__*/_jsxs("div", {
       className: "div-wrapper-head",
       style: _objectSpread({}, headerStyle),
-      children: [title, /*#__PURE__*/_jsxs("div", {
+      children: [isEmpty(tabList) ? title : /*#__PURE__*/_jsx("div", {
+        className: "div-wrapper-tabs-wrap",
+        children: tabList.map(function (item) {
+          return /*#__PURE__*/_jsx("div", {
+            className: classnames('div-wrapper-tabs-item', {
+              active: item.key === activeKey
+            }),
+            onClick: function onClick() {
+              return onChangeTab(item.key);
+            },
+            children: item.label
+          }, item.key);
+        })
+      }), /*#__PURE__*/_jsxs("div", {
         className: "extra",
         style: _objectSpread({}, extraStyle),
-        children: [needChange && /*#__PURE__*/_jsx("div", {
+        children: [extraLeft ? extraLeft : null, needChange && /*#__PURE__*/_jsx("div", {
           className: "extra-type",
           children: changeList.map(function (item) {
             var Icon = item.icon;
@@ -130,27 +152,27 @@ export default function VmWrapper(props) {
               })
             }, item.key);
           })
-        }), filterType === 'datePicker' ? /*#__PURE__*/_jsx(VMDatePicker, {
+        }), filterType === 'datePicker' ? /*#__PURE__*/_jsx(VMDatePicker, _objectSpread({
           defaultValue: defaultValue,
           value: dateValue,
           onChange: props.filterChange,
           disabledDate: disabledDate
-        }) : filterType === 'rangePicker' ? /*#__PURE__*/_jsx(VMRangePicker, {
+        }, pickerProps)) : filterType === 'rangePicker' ? /*#__PURE__*/_jsx(VMRangePicker, _objectSpread({
           defaultValue: defaultValue || [],
           value: dateValue || [],
           onChange: props.filterChange,
           disabledDate: disabledDate
-        }) : filterType === 'monthPicker' ? /*#__PURE__*/_jsx(VMMonthPicker, {
+        }, pickerProps)) : filterType === 'monthPicker' ? /*#__PURE__*/_jsx(VMMonthPicker, _objectSpread({
           defaultValue: defaultValue,
           value: dateValue,
           onChange: props.filterChange,
           disabledDate: disabledDate
-        }) : filterType === 'yearPicker' ? /*#__PURE__*/_jsx(VMYearPicker, {
+        }, pickerProps)) : filterType === 'yearPicker' ? /*#__PURE__*/_jsx(VMYearPicker, _objectSpread({
           defaultValue: defaultValue,
           value: dateValue,
           onChange: props.filterChange,
           disabledDate: disabledDate
-        }) : null, extra ? extra : null]
+        }, pickerProps)) : null, extra ? extra : null]
       })]
     }), showContent && /*#__PURE__*/_jsx("div", {
       className: "div-wrapper-content",

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

@@ -4,6 +4,7 @@
   --wborder-color: #f1f0f0;
   --wfilter-bg: #f5f5f5;
   --wtype-bg: #fff;
+  --tab-active-color: #1677FF;
 
   &.dark {
     --wbg-color: rgba(0, 155, 233, 10%);
@@ -11,6 +12,33 @@
     --wborder-color: #1064a7;
     --wfilter-bg: #0b588e;
     --wtype-bg: #0168b0;
+    --tab-active-color: #009DFF;
+  }
+
+  &-tabs-wrap {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    color: var(--w-color);
+    font-size: 16px;
+  }
+
+  &-tabs-item {
+    padding: 0 8px;
+    cursor: pointer;
+    &.active {
+      color: var(--tab-active-color);
+      position: relative;
+      &:before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        background: var(--tab-active-color);
+        bottom: -12px;
+        left: 0;
+      }
+    }
   }
 
   width: 100%;

package/lib/_service/index.js

@@ -89,6 +89,11 @@ export var getPreviewUrl = function getPreviewUrl(params) {
     data: params
   });
 };
+export var getBackUrl = function getBackUrl(params) {
+  return request.get('/cloud/vis/base/cp/artemis/playbackUrl.smvc', {
+    data: params
+  });
+};
 export var execute = function execute(code, parameters) {
   return request.post('/cloud/sjzt-reborn/api/v101/dataSet/execute', {
     data: JSON.stringify({