安全质量大屏

package.json

@@ -21,7 +21,8 @@
     "vue": "^2.3.3",
     "vue-axios": "^3.5.2",
     "vue-cookies": "^1.8.3",
-    "vue-router": "^2.3.1"
+    "vue-router": "^2.3.1",
+    "vue-seamless-scroll": "^1.1.23"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

src/module/databoard/components/card/scroll-list.vue

+<template>
+  <div class="scroll_list" ref="scrollList">
+    <vue-seamless-scroll :data="rows" class="scroll_box" :class-option="defineScroll" style="height: 100%;overflow: hidden;width: 100%;color: white;font-size: 14px;">
+      <ul >
+        <li v-for="(item, index) in rows" :key="index" :style="{height: 100 / rows.length + '%'}">
+          <span v-if="showIcon&&!item.blankColumn" style="display: table-cell;vertical-align: middle;">
+            <div class="col_number">{{ index + 1 }}</div>
+          </span>
+          <span class="name" style="display: table-cell;vertical-align: middle;" :style="titleIndependentStyle?item.titleStyle:columnsStyle['title']">{{item.title}}</span>
+        </li>
+      </ul>
+    </vue-seamless-scroll>
+  </div>
+</template>
+<script>
+export default {
+  name: "ScrollList",
+  props: {
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    titleIndependentStyle:{
+      type: Boolean,
+      default: false
+    },
+    columnsStyle:{
+      type: Object,
+      default: function () {
+        return {};
+      }
+    },
+    rows: {
+      type: Array,
+      default:function(){
+        return [
+          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
+          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
+          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]}
+        ];
+      }
+    },
+    colFormatter:{
+      type: Object,
+      default: function(){
+        return {};
+      }
+    },
+    mouseHand: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    defineScroll() {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    // this.$refs.winnerList.style.cursor = this.$props.mouseHand ? "pointer" : "default"
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+
+.scroll_list {
+
+}
+
+.scroll_list::-webkit-scrollbar { width: 0 !important }
+
+
+
+li:nth-child(odd) {
+  background-color: #0E5FFF20;
+}
+
+li:nth-child(even) {
+  background-color: #0E5FFF40;
+}
+
+td {
+  padding: 0 0 0 1rem;
+}
+
+.col_number {
+  height: 38%;
+  min-width: 38px;
+  color: #19EBFF;
+  font-weight: bold;
+  text-align: center;
+  line-height: 38px;
+  background: url(../../assets/img/number_bg.png) no-repeat center;
+}
+
+
+
+
+</style>

src/module/databoard/databoard/safe-quality.vue

@@ -5,12 +5,14 @@
       <div class="trade_left" style="width: 20%">
       <div style="height: 37%;" >
         <display-board  style="height: 98%;"  title="安全">
-          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true"  id="safe_list" :rows="arSafeList" :title-independent-style="true" />
+          <scroll-list style="height: 97%;overflow: auto;" :rows="arSafeList" :title-independent-style="true"/>
         </display-board>
       </div>
       <div style="height: 37%;" >
         <display-board  style="height: 100%;"  title="质量">
-          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true"  id="quality_list" :rows="arQualityList" />
+          <scroll-list style="height: 97%;overflow: auto;" :rows="arQualityList">
+          </scroll-list>
+<!--          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true"  id="quality_list" :rows="arQualityList" />-->
         </display-board>
       </div>
         <div style="height: 26%;padding-top: 0.5rem" >
@@ -157,6 +159,7 @@
 <script>
 import DisplayBoard from "../components/container/display-board.vue";
 import WinnersList from "../components/card/winners-list.vue";
+import ScrollList from "../components/card/scroll-list.vue";
 import * as echarts from "echarts";
 import SimpleCard from "../components/card/simple-card.vue";
 import TitleContentMark from "../components/layout/title-content-mark.vue";
@@ -179,6 +182,7 @@ export default {
     TitleContentMark,
     Showcase,
     WinnersList,
+    ScrollList,
     mapPointMark
   },
   data() {

src/module/index/index.js

@@ -4,6 +4,8 @@ import Vue from 'vue'
 import App from './index.vue'
 import router from './router/index_router'
 import '../databoard/assets/index.css'
+import vueSeamlessScroll  from "vue-seamless-scroll"
+Vue.use(vueSeamlessScroll)
 
 Vue.config.productionTip = false