From 5519ae42ea62d3b7e838f6e21608e3ba7a790206 Mon Sep 17 00:00:00 2001 From: Kubbo <390378816@qq.com> Date: Mon, 5 Aug 2024 00:41:42 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4table=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E5=85=BC=E9=A1=BE=E4=BD=BF=E7=94=A8=E6=BB=9A=E5=8A=A8=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../datascreen/js/simplebar/simplebar.css | 230 ++++++++++++++++++ .../datascreen/js/simplebar/simplebar.min.js | 10 + src/assets/main.css | 187 +++++++++----- src/utils/inject.js | 63 ++++- 4 files changed, 431 insertions(+), 59 deletions(-) create mode 100644 public/presource/datascreen/js/simplebar/simplebar.css create mode 100644 public/presource/datascreen/js/simplebar/simplebar.min.js diff --git a/public/presource/datascreen/js/simplebar/simplebar.css b/public/presource/datascreen/js/simplebar/simplebar.css new file mode 100644 index 0000000..0af2c45 --- /dev/null +++ b/public/presource/datascreen/js/simplebar/simplebar.css @@ -0,0 +1,230 @@ +[data-simplebar] { + position: relative; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-content: flex-start; + align-items: flex-start; +} + +.simplebar-wrapper { + overflow: hidden; + width: inherit; + height: inherit; + max-width: inherit; + max-height: inherit; +} + +.simplebar-mask { + direction: inherit; + position: absolute; + overflow: hidden; + padding: 0; + margin: 0; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: auto !important; + height: auto !important; + z-index: 0; +} + +.simplebar-offset { + direction: inherit !important; + box-sizing: inherit !important; + resize: none !important; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + padding: 0; + margin: 0; + -webkit-overflow-scrolling: touch; +} + +.simplebar-content-wrapper { + direction: inherit; + box-sizing: border-box !important; + position: relative; + display: block; + height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */ + width: auto; + max-width: 100%; /* Not required for horizontal scroll to trigger */ + max-height: 100%; /* Needed for vertical scroll to trigger */ + overflow: auto; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.simplebar-content-wrapper::-webkit-scrollbar, +.simplebar-hide-scrollbar::-webkit-scrollbar { + display: none; + width: 0; + height: 0; +} + +.simplebar-content:before, +.simplebar-content:after { + content: ' '; + display: table; +} + +.simplebar-placeholder { + max-height: 100%; + max-width: 100%; + width: 100%; + pointer-events: none; +} + +.simplebar-height-auto-observer-wrapper { + box-sizing: inherit !important; + height: 100%; + width: 100%; + max-width: 1px; + position: relative; + float: left; + max-height: 1px; + overflow: hidden; + z-index: -1; + padding: 0; + margin: 0; + pointer-events: none; + flex-grow: inherit; + flex-shrink: 0; + flex-basis: 0; +} + +.simplebar-height-auto-observer { + box-sizing: inherit; + display: block; + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 1000%; + width: 1000%; + min-height: 1px; + min-width: 1px; + overflow: hidden; + pointer-events: none; + z-index: -1; +} + +.simplebar-track { + z-index: 1; + position: absolute; + right: 0; + bottom: 0; + pointer-events: none; + overflow: hidden; +} + +[data-simplebar].simplebar-dragging { + pointer-events: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +[data-simplebar].simplebar-dragging .simplebar-content { + pointer-events: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +[data-simplebar].simplebar-dragging .simplebar-track { + pointer-events: all; +} + +.simplebar-scrollbar { + position: absolute; + left: 0; + right: 0; + min-height: 10px; +} + +.simplebar-scrollbar:before { + position: absolute; + content: ''; + background: black; + border-radius: 7px; + left: 2px; + right: 2px; + opacity: 0; + transition: opacity 0.2s 0.5s linear; +} + +.simplebar-scrollbar.simplebar-visible:before { + opacity: 0.5; + transition-delay: 0s; + transition-duration: 0s; +} + +.simplebar-track.simplebar-vertical { + top: 0; + width: 11px; +} + +.simplebar-scrollbar:before { + top: 2px; + bottom: 2px; + left: 2px; + right: 2px; +} + +.simplebar-track.simplebar-horizontal { + left: 0; + height: 11px; +} + +.simplebar-track.simplebar-horizontal .simplebar-scrollbar { + right: auto; + left: 0; + top: 0; + bottom: 0; + min-height: 0; + min-width: 10px; + width: auto; +} + +/* Rtl support */ +[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical { + right: auto; + left: 0; +} + +.simplebar-dummy-scrollbar-size { + direction: rtl; + position: fixed; + opacity: 0; + visibility: hidden; + height: 500px; + width: 500px; + overflow-y: hidden; + overflow-x: scroll; + -ms-overflow-style: scrollbar !important; +} + +.simplebar-dummy-scrollbar-size > div { + width: 200%; + height: 200%; + margin: 10px 0; +} + +.simplebar-hide-scrollbar { + position: fixed; + left: 0; + visibility: hidden; + overflow-y: scroll; + scrollbar-width: none; + -ms-overflow-style: none; +} diff --git a/public/presource/datascreen/js/simplebar/simplebar.min.js b/public/presource/datascreen/js/simplebar/simplebar.min.js new file mode 100644 index 0000000..770f31d --- /dev/null +++ b/public/presource/datascreen/js/simplebar/simplebar.min.js @@ -0,0 +1,10 @@ +/** + * simplebar - v6.2.7 + * Scrollbars, simpler. + * https://grsmto.github.io/simplebar/ + * + * Made by Adrien Denat from a fork by Jonathan Nicol + * Under MIT License + */ + +var SimpleBar=function(){"use strict";var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};var e="object"==typeof global&&global&&global.Object===Object&&global,i="object"==typeof self&&self&&self.Object===Object&&self,s=e||i||Function("return this")(),r=s.Symbol,l=Object.prototype,o=l.hasOwnProperty,n=l.toString,a=r?r.toStringTag:void 0;var c=Object.prototype.toString;var h=r?r.toStringTag:void 0;function u(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":h&&h in Object(t)?function(t){var e=o.call(t,a),i=t[a];try{t[a]=void 0;var s=!0}catch(t){}var r=n.call(t);return s&&(e?t[a]=i:delete t[a]),r}(t):function(t){return c.call(t)}(t)}var d=/\s/;var p=/^\s+/;function v(t){return t?t.slice(0,function(t){for(var e=t.length;e--&&d.test(t.charAt(e)););return e}(t)+1).replace(p,""):t}function f(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}var m=/^[-+]0x[0-9a-f]+$/i,b=/^0b[01]+$/i,g=/^0o[0-7]+$/i,x=parseInt;function y(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return null!=t&&"object"==typeof t}(t)&&"[object Symbol]"==u(t)}(t))return NaN;if(f(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=f(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=v(t);var i=b.test(t);return i||g.test(t)?x(t.slice(2),i?2:8):m.test(t)?NaN:+t}var E=function(){return s.Date.now()},O=Math.max,w=Math.min;function S(t,e,i){var s,r,l,o,n,a,c=0,h=!1,u=!1,d=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function p(e){var i=s,l=r;return s=r=void 0,c=e,o=t.apply(l,i)}function v(t){return c=t,n=setTimeout(b,e),h?p(t):o}function m(t){var i=t-a;return void 0===a||i>=e||i<0||u&&t-c>=l}function b(){var t=E();if(m(t))return g(t);n=setTimeout(b,function(t){var i=e-(t-a);return u?w(i,l-(t-c)):i}(t))}function g(t){return n=void 0,d&&s?p(t):(s=r=void 0,o)}function x(){var t=E(),i=m(t);if(s=arguments,r=this,a=t,i){if(void 0===n)return v(a);if(u)return clearTimeout(n),n=setTimeout(b,e),p(a)}return void 0===n&&(n=setTimeout(b,e)),o}return e=y(e)||0,f(i)&&(h=!!i.leading,l=(u="maxWait"in i)?O(y(i.maxWait)||0,e):l,d="trailing"in i?!!i.trailing:d),x.cancel=function(){void 0!==n&&clearTimeout(n),c=0,s=a=r=n=void 0},x.flush=function(){return void 0===n?o:g(E())},x}var A=function(){return A=Object.assign||function(t){for(var e,i=1,s=arguments.length;i
';var i=e.firstElementChild,s=null==i?void 0:i.firstElementChild;if(!s)return null;document.body.appendChild(i),i.scrollLeft=0;var r=t.getOffset(i),l=t.getOffset(s);i.scrollLeft=-999;var o=t.getOffset(s);return document.body.removeChild(i),t.rtlHelpers={isScrollOriginAtZero:r.left!==l.left,isScrollingToNegative:l.left!==o.left},t.rtlHelpers},t.prototype.getScrollbarWidth=function(){try{return this.contentWrapperEl&&"none"===getComputedStyle(this.contentWrapperEl,"::-webkit-scrollbar").display||"scrollbarWidth"in document.documentElement.style||"-ms-overflow-style"in document.documentElement.style?0:V()}catch(t){return V()}},t.getOffset=function(t){var e=t.getBoundingClientRect(),i=j(t),s=H(t);return{top:e.top+(s.pageYOffset||i.documentElement.scrollTop),left:e.left+(s.pageXOffset||i.documentElement.scrollLeft)}},t.prototype.init=function(){C&&(this.initDOM(),this.rtlHelpers=t.getRtlHelpers(),this.scrollbarWidth=this.getScrollbarWidth(),this.recalculate(),this.initListeners())},t.prototype.initDOM=function(){var t,e;this.wrapperEl=this.el.querySelector(P(this.classNames.wrapper)),this.contentWrapperEl=this.options.scrollableNode||this.el.querySelector(P(this.classNames.contentWrapper)),this.contentEl=this.options.contentNode||this.el.querySelector(P(this.classNames.contentEl)),this.offsetEl=this.el.querySelector(P(this.classNames.offset)),this.maskEl=this.el.querySelector(P(this.classNames.mask)),this.placeholderEl=this.findChild(this.wrapperEl,P(this.classNames.placeholder)),this.heightAutoObserverWrapperEl=this.el.querySelector(P(this.classNames.heightAutoObserverWrapperEl)),this.heightAutoObserverEl=this.el.querySelector(P(this.classNames.heightAutoObserverEl)),this.axis.x.track.el=this.findChild(this.el,"".concat(P(this.classNames.track)).concat(P(this.classNames.horizontal))),this.axis.y.track.el=this.findChild(this.el,"".concat(P(this.classNames.track)).concat(P(this.classNames.vertical))),this.axis.x.scrollbar.el=(null===(t=this.axis.x.track.el)||void 0===t?void 0:t.querySelector(P(this.classNames.scrollbar)))||null,this.axis.y.scrollbar.el=(null===(e=this.axis.y.track.el)||void 0===e?void 0:e.querySelector(P(this.classNames.scrollbar)))||null,this.options.autoHide||(_(this.axis.x.scrollbar.el,this.classNames.visible),_(this.axis.y.scrollbar.el,this.classNames.visible))},t.prototype.initListeners=function(){var t,e=this,i=H(this.el);if(this.el.addEventListener("mouseenter",this.onMouseEnter),this.el.addEventListener("pointerdown",this.onPointerEvent,!0),this.el.addEventListener("mousemove",this.onMouseMove),this.el.addEventListener("mouseleave",this.onMouseLeave),null===(t=this.contentWrapperEl)||void 0===t||t.addEventListener("scroll",this.onScroll),i.addEventListener("resize",this.onWindowResize),this.contentEl){if(window.ResizeObserver){var s=!1,r=i.ResizeObserver||ResizeObserver;this.resizeObserver=new r((function(){s&&i.requestAnimationFrame((function(){e.recalculate()}))})),this.resizeObserver.observe(this.el),this.resizeObserver.observe(this.contentEl),i.requestAnimationFrame((function(){s=!0}))}this.mutationObserver=new i.MutationObserver((function(){i.requestAnimationFrame((function(){e.recalculate()}))})),this.mutationObserver.observe(this.contentEl,{childList:!0,subtree:!0,characterData:!0})}},t.prototype.recalculate=function(){if(this.heightAutoObserverEl&&this.contentEl&&this.contentWrapperEl&&this.wrapperEl&&this.placeholderEl){var t=H(this.el);this.elStyles=t.getComputedStyle(this.el),this.isRtl="rtl"===this.elStyles.direction;var e=this.contentEl.offsetWidth,i=this.heightAutoObserverEl.offsetHeight<=1,s=this.heightAutoObserverEl.offsetWidth<=1||e>0,r=this.contentWrapperEl.offsetWidth,l=this.elStyles.overflowX,o=this.elStyles.overflowY;this.contentEl.style.padding="".concat(this.elStyles.paddingTop," ").concat(this.elStyles.paddingRight," ").concat(this.elStyles.paddingBottom," ").concat(this.elStyles.paddingLeft),this.wrapperEl.style.margin="-".concat(this.elStyles.paddingTop," -").concat(this.elStyles.paddingRight," -").concat(this.elStyles.paddingBottom," -").concat(this.elStyles.paddingLeft);var n=this.contentEl.scrollHeight,a=this.contentEl.scrollWidth;this.contentWrapperEl.style.height=i?"auto":"100%",this.placeholderEl.style.width=s?"".concat(e||a,"px"):"auto",this.placeholderEl.style.height="".concat(n,"px");var c=this.contentWrapperEl.offsetHeight;this.axis.x.isOverflowing=0!==e&&a>e,this.axis.y.isOverflowing=n>c,this.axis.x.isOverflowing="hidden"!==l&&this.axis.x.isOverflowing,this.axis.y.isOverflowing="hidden"!==o&&this.axis.y.isOverflowing,this.axis.x.forceVisible="x"===this.options.forceVisible||!0===this.options.forceVisible,this.axis.y.forceVisible="y"===this.options.forceVisible||!0===this.options.forceVisible,this.hideNativeScrollbar();var h=this.axis.x.isOverflowing?this.scrollbarWidth:0,u=this.axis.y.isOverflowing?this.scrollbarWidth:0;this.axis.x.isOverflowing=this.axis.x.isOverflowing&&a>r-u,this.axis.y.isOverflowing=this.axis.y.isOverflowing&&n>c-h,this.axis.x.scrollbar.size=this.getScrollbarSize("x"),this.axis.y.scrollbar.size=this.getScrollbarSize("y"),this.axis.x.scrollbar.el&&(this.axis.x.scrollbar.el.style.width="".concat(this.axis.x.scrollbar.size,"px")),this.axis.y.scrollbar.el&&(this.axis.y.scrollbar.el.style.height="".concat(this.axis.y.scrollbar.size,"px")),this.positionScrollbar("x"),this.positionScrollbar("y"),this.toggleTrackVisibility("x"),this.toggleTrackVisibility("y")}},t.prototype.getScrollbarSize=function(t){var e,i;if(void 0===t&&(t="y"),!this.axis[t].isOverflowing||!this.contentEl)return 0;var s,r=this.contentEl[this.axis[t].scrollSizeAttr],l=null!==(i=null===(e=this.axis[t].track.el)||void 0===e?void 0:e[this.axis[t].offsetSizeAttr])&&void 0!==i?i:0,o=l/r;return s=Math.max(~~(o*l),this.options.scrollbarMinSize),this.options.scrollbarMaxSize&&(s=Math.min(s,this.options.scrollbarMaxSize)),s},t.prototype.positionScrollbar=function(e){var i,s,r;void 0===e&&(e="y");var l=this.axis[e].scrollbar;if(this.axis[e].isOverflowing&&this.contentWrapperEl&&l.el&&this.elStyles){var o=this.contentWrapperEl[this.axis[e].scrollSizeAttr],n=(null===(i=this.axis[e].track.el)||void 0===i?void 0:i[this.axis[e].offsetSizeAttr])||0,a=parseInt(this.elStyles[this.axis[e].sizeAttr],10),c=this.contentWrapperEl[this.axis[e].scrollOffsetAttr];c="x"===e&&this.isRtl&&(null===(s=t.getRtlHelpers())||void 0===s?void 0:s.isScrollOriginAtZero)?-c:c,"x"===e&&this.isRtl&&(c=(null===(r=t.getRtlHelpers())||void 0===r?void 0:r.isScrollingToNegative)?c:-c);var h=c/(o-a),u=~~((n-l.size)*h);u="x"===e&&this.isRtl?-u+(n-l.size):u,l.el.style.transform="x"===e?"translate3d(".concat(u,"px, 0, 0)"):"translate3d(0, ".concat(u,"px, 0)")}},t.prototype.toggleTrackVisibility=function(t){void 0===t&&(t="y");var e=this.axis[t].track.el,i=this.axis[t].scrollbar.el;e&&i&&this.contentWrapperEl&&(this.axis[t].isOverflowing||this.axis[t].forceVisible?(e.style.visibility="visible",this.contentWrapperEl.style[this.axis[t].overflowAttr]="scroll",this.el.classList.add("".concat(this.classNames.scrollable,"-").concat(t))):(e.style.visibility="hidden",this.contentWrapperEl.style[this.axis[t].overflowAttr]="hidden",this.el.classList.remove("".concat(this.classNames.scrollable,"-").concat(t))),this.axis[t].isOverflowing?i.style.display="block":i.style.display="none")},t.prototype.showScrollbar=function(t){void 0===t&&(t="y"),this.axis[t].isOverflowing&&!this.axis[t].scrollbar.isVisible&&(_(this.axis[t].scrollbar.el,this.classNames.visible),this.axis[t].scrollbar.isVisible=!0)},t.prototype.hideScrollbar=function(t){void 0===t&&(t="y"),this.isDragging||this.axis[t].isOverflowing&&this.axis[t].scrollbar.isVisible&&(q(this.axis[t].scrollbar.el,this.classNames.visible),this.axis[t].scrollbar.isVisible=!1)},t.prototype.hideNativeScrollbar=function(){this.offsetEl&&(this.offsetEl.style[this.isRtl?"left":"right"]=this.axis.y.isOverflowing||this.axis.y.forceVisible?"-".concat(this.scrollbarWidth,"px"):"0px",this.offsetEl.style.bottom=this.axis.x.isOverflowing||this.axis.x.forceVisible?"-".concat(this.scrollbarWidth,"px"):"0px")},t.prototype.onMouseMoveForAxis=function(t){void 0===t&&(t="y");var e=this.axis[t];e.track.el&&e.scrollbar.el&&(e.track.rect=e.track.el.getBoundingClientRect(),e.scrollbar.rect=e.scrollbar.el.getBoundingClientRect(),this.isWithinBounds(e.track.rect)?(this.showScrollbar(t),_(e.track.el,this.classNames.hover),this.isWithinBounds(e.scrollbar.rect)?_(e.scrollbar.el,this.classNames.hover):q(e.scrollbar.el,this.classNames.hover)):(q(e.track.el,this.classNames.hover),this.options.autoHide&&this.hideScrollbar(t)))},t.prototype.onMouseLeaveForAxis=function(t){void 0===t&&(t="y"),q(this.axis[t].track.el,this.classNames.hover),q(this.axis[t].scrollbar.el,this.classNames.hover),this.options.autoHide&&this.hideScrollbar(t)},t.prototype.onDragStart=function(t,e){var i;void 0===e&&(e="y"),this.isDragging=!0;var s=j(this.el),r=H(this.el),l=this.axis[e].scrollbar,o="y"===e?t.pageY:t.pageX;this.axis[e].dragOffset=o-((null===(i=l.rect)||void 0===i?void 0:i[this.axis[e].offsetAttr])||0),this.draggedAxis=e,_(this.el,this.classNames.dragging),s.addEventListener("mousemove",this.drag,!0),s.addEventListener("mouseup",this.onEndDrag,!0),null===this.removePreventClickId?(s.addEventListener("click",this.preventClick,!0),s.addEventListener("dblclick",this.preventClick,!0)):(r.clearTimeout(this.removePreventClickId),this.removePreventClickId=null)},t.prototype.onTrackClick=function(t,e){var i,s,r,l,o=this;void 0===e&&(e="y");var n=this.axis[e];if(this.options.clickOnTrack&&n.scrollbar.el&&this.contentWrapperEl){t.preventDefault();var a=H(this.el);this.axis[e].scrollbar.rect=n.scrollbar.el.getBoundingClientRect();var c=null!==(s=null===(i=this.axis[e].scrollbar.rect)||void 0===i?void 0:i[this.axis[e].offsetAttr])&&void 0!==s?s:0,h=parseInt(null!==(l=null===(r=this.elStyles)||void 0===r?void 0:r[this.axis[e].sizeAttr])&&void 0!==l?l:"0px",10),u=this.contentWrapperEl[this.axis[e].scrollOffsetAttr],d=("y"===e?this.mouseY-c:this.mouseX-c)<0?-1:1,p=-1===d?u-h:u+h,v=function(){o.contentWrapperEl&&(-1===d?u>p&&(u-=40,o.contentWrapperEl[o.axis[e].scrollOffsetAttr]=u,a.requestAnimationFrame(v)):u=t.left&&this.mouseX<=t.left+t.width&&this.mouseY>=t.top&&this.mouseY<=t.top+t.height},t.prototype.findChild=function(t,e){var i=t.matches||t.webkitMatchesSelector||t.mozMatchesSelector||t.msMatchesSelector;return Array.prototype.filter.call(t.children,(function(t){return i.call(t,e)}))[0]},t.rtlHelpers=null,t.defaultOptions={forceVisible:!1,clickOnTrack:!0,scrollbarMinSize:25,scrollbarMaxSize:0,ariaLabel:"scrollable content",tabIndex:0,classNames:{contentEl:"simplebar-content",contentWrapper:"simplebar-content-wrapper",offset:"simplebar-offset",mask:"simplebar-mask",wrapper:"simplebar-wrapper",placeholder:"simplebar-placeholder",scrollbar:"simplebar-scrollbar",track:"simplebar-track",heightAutoObserverWrapperEl:"simplebar-height-auto-observer-wrapper",heightAutoObserverEl:"simplebar-height-auto-observer",visible:"simplebar-visible",horizontal:"simplebar-horizontal",vertical:"simplebar-vertical",hover:"simplebar-hover",dragging:"simplebar-dragging",scrolling:"simplebar-scrolling",scrollable:"simplebar-scrollable",mouseEntered:"simplebar-mouse-entered"},scrollableNode:null,contentNode:null,autoHide:!0},t.getOptions=B,t.helpers=T,t}(),Y=X.helpers,F=Y.getOptions,I=Y.addClasses,U=Y.canUseDOM,$=function(e){function i(){for(var t=[],s=0;s .tableCell { + background-color: rgba(255, 255, 255, .1) !important; } diff --git a/src/utils/inject.js b/src/utils/inject.js index 5762fec..709f2d8 100644 --- a/src/utils/inject.js +++ b/src/utils/inject.js @@ -12,8 +12,11 @@ const libs = [ `${KENGEE_CDN_BASE}/js/d3-array.min.js`, `${KENGEE_CDN_BASE}/js/d3-geo.min.js`, '/presource/datascreen/js/ezuikit-flv/ezuikit.js', - // '/presource/datascreen/js/ezuikit.js', '/presource/datascreen/js/clappr.min.js', + '/presource/datascreen/js/simplebar/simplebar.min.js', +] +const css = [ + "/presource/datascreen/js/simplebar/simplebar.css" ] window.$loadScript = (type = 'js', url, dom = "body") => { let flag = false; @@ -131,6 +134,63 @@ Vue.component("HlsPlayer", { this.player?.destroy() } }) +Vue.component("scrollTable", { + props: { + tableData: {default: () => []}, + columns: {default: () => []}, + config: {default: () => ({})} + }, + data() { + return { + timer: null, + scroll: null + } + }, + render(h) { + const {config, tableData, columns} = this.$props + return h('el-table', { + props: { + headerCellClassName: 'tableHeader', cellClassName: 'tableCell', stripe: !0, + ...config, data: tableData, height: '100%' + }, class: 'scrollTable' + }, + columns.map(col => h("tableColumn", {props: {column: col}})) + ) + }, + methods: { + initScroll() { + const {SimpleBar} = window + const dom = this.$el.querySelector('.el-table__body-wrapper') + this.scroll = new SimpleBar(dom) + dom.addEventListener('mouseover', this.stopAutoScroll) + dom.addEventListener('mouseout', this.autoScroll) + // this.scroll.refresh(); + }, + autoScroll() { + if (this.timer) clearInterval(this.timer) + this.timer = setInterval(() => { + const dom = this.$el.querySelector('.simplebar-content-wrapper') + const max = dom.scrollHeight - dom.clientHeight + if (dom.scrollTop + 30 >= max) dom.scrollTop = 0 + else dom.scrollTop += 30 + }, 1000) + }, + stopAutoScroll() { + if (this.timer) clearInterval(this.timer) + } + }, + mounted() { + this.initScroll() + this.autoScroll() + }, + beforeDestroy() { + this.stopAutoScroll() + this.scroll?.destroy() + const dom = this.$el.querySelector('.el-table__body-wrapper') + dom.removeEventListener("mouseover", this.stopAutoScroll) + dom.removeEventListener("mouseout", this.autoScroll) + } +}) Vue.component("tableColumn", { props: { column: {default: () => ({})} @@ -153,4 +213,5 @@ Vue.component("tableColumn", { export default Promise.all([ import("./fetch"), ...libs.map(url => $loadScript('js', url)), + ...css.map(url => $loadScript('css', url)) ])