调整table滚动兼顾使用滚动条

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;
+}

src/assets/main.css

@@ -1,124 +1,195 @@
 #app {
-    font-weight: normal;
+  font-weight: normal;
 }
 
 a, .green {
-    text-decoration: none;
+  text-decoration: none;
-    color: hsla(160, 100%, 37%, 1);
+  color: hsla(160, 100%, 37%, 1);
-    transition: 0.4s;
+  transition: 0.4s;
 }
 
 @media (hover: hover) {
-    a:hover {
+  a:hover {
-        background-color: hsla(160, 100%, 37%, 0.2);
+    background-color: hsla(160, 100%, 37%, 0.2);
-    }
+  }
 }
 
 .AppSelect .el-input__inner {
-    background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
+  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
-    border: 1px solid #1760AE;
+  border: 1px solid #1760AE;
-    border-radius: 0;
+  border-radius: 0;
-    color: #fff;
+  color: #fff;
 }
 
 
 .el-table:before, .el-table:after {
-    background: transparent;
+  background: transparent;
 }
 
 .el-table .gutter {
-    background-color: transparent !important;
+  background-color: transparent !important;
-    border-color: transparent !important;
+  border-color: transparent !important;
 }
 
 .flex {
-    display: flex;
+  display: flex;
 }
 
 .fill {
-    flex: 1;
+  flex: 1;
-    min-height: 0;
+  min-height: 0;
-    min-width: 0;
+  min-width: 0;
 }
 
 .pointer {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .grid {
-    display: grid;
+  display: grid;
-    grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 1fr);
 }
 
 .mb-8 {
-    margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 
 .mr-8 {
-    margin-right: 8px;
+  margin-right: 8px;
 }
 
 .dv-scroll-board {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .dv-scroll-board .header {
-    align-items: center;
+  align-items: center;
-    padding: 6px 0;
+  padding: 6px 0;
 }
 
 .dv-scroll-board .header-item, .tableHead .item {
-    height: initial !important;
+  height: initial !important;
-    line-height: 17px !important;
+  line-height: 17px !important;
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .dv-scroll-board .ceil {
-    padding: 6px 10px !important;
+  padding: 6px 10px !important;
 }
 
 .dv-scroll-board .row-item {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .dv-scroll-board .ceil, .dv-scroll-board .header-item {
-    text-wrap: unset !important;
+  text-wrap: unset !important;
-    word-break: break-all;
+  word-break: break-all;
-    font-size: 12px;
+  font-size: 12px;
-    line-height: 17px
+  line-height: 17px
 }
 
 .summary {
-    height: 30px;
+  height: 30px;
-    align-items: center;
+  align-items: center;
-    color: #66FFFF;
+  color: #66FFFF;
-    background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
+  background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
 }
 
 .tableHead {
-    height: 30px;
+  height: 30px;
-    align-items: center;
+  align-items: center;
-    background-color: rgba(13, 48, 99, 0.6);
+  background-color: rgba(13, 48, 99, 0.6);
 }
 
 .summary .item, .tableHead .item {
-    font-size: 12px;
+  font-size: 12px;
-    font-weight: bold;
+  font-weight: bold;
-    padding: 0 10px;
+  padding: 0 10px;
-    align-items: center;
+  align-items: center;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    line-height: 17px;
+  line-height: 17px;
-    flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .dialogTable {
-    position: fixed !important;
+  position: fixed !important;
-    left: 50%;
+  left: 50%;
-    top: 50%;
+  top: 50%;
-    transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
-    width: 600px!important;
+  width: 600px !important;
-    height: 300px;
+  height: 300px;
-    z-index: 9999;
+  z-index: 9999;
-    background-color: #07193D;
+  background-color: #07193D;
-    box-shadow: #66FFFF 0 0 20px;
+  box-shadow: #66FFFF 0 0 20px;
+}
+
+
+.scrollTable {
+  color: #fff;
+  box-sizing: border-box;
+  background: transparent !important;
+  border-color: transparent;
+}
+
+.scrollTable .tableHeader {
+  background: rgba(13, 48, 99, 0.6) !important;
+  color: #fff;
+  border-color: transparent !important;
+}
+
+.scrollTable tr {
+  background-color: transparent !important;
+}
+
+
+.scrollTable .el-table__footer-wrapper tr {
+  background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
+}
+
+.scrollTable .el-table__footer-wrapper .is-leaf {
+  color: #66FFFF;
+  background: transparent;
+  border-color: transparent;
+}
+
+.scrollTable:before {
+  background: transparent !important;
+}
+
+.scrollTable .el-table__cell.gutter, .scrollTable [name=gutter] {
+  display: none;
+}
+
+.scrollTable .simplebar-scrollbar:before {
+  background: #ddd;
+}
+
+.scrollTable .el-table__body {
+  width: 100% !important;
+}
+
+.scrollTable .tableCell {
+  color: #fff;
+  border-color: transparent !important;
+}
+
+.scrollTable .el-table__cell {
+  padding: 3px 0 !important;
+}
+
+.scrollTable tr.el-table__row--striped {
+  --odd-bg: #09265B;
+  background-color: #081F48;
+  background-image: linear-gradient(
+      -45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
+      var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
+  background-size: 10px 10px;
+}
+
+.scrollTable tr.el-table__row--striped .tableCell {
+  background-color: transparent !important;
+}
+
+.scrollTable tr:hover > .tableCell {
+  background-color: rgba(255, 255, 255, .1) !important;
 }

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))
 ])