榄菊质量管理平台表格增加自动滚动功能

package.json

@@ -52,6 +52,7 @@
     "moment": "^2.29.4",
     "nprogress": "0.2.0",
     "print-js": "^1.6.0",
+    "qrcode": "^1.5.4",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
@@ -62,6 +63,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "xlsx": "^0.17.0"

src/main.js

@@ -46,6 +46,8 @@ import dataV from '@jiaminghi/data-view'
 // 打印插件
 import Print from 'print-js'
 import VScaleScreen from 'v-scale-screen'
+// 滚动
+import VueSeamlessScroll from 'vue-seamless-scroll'
 
 
 // 全局方法挂载
@@ -71,6 +73,7 @@ Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 
 Vue.use(VScaleScreen)
+Vue.use(VueSeamlessScroll)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)

src/views/kanban/quality/kanban1.vue

@@ -117,21 +117,23 @@
                         <div class="titlebox" style="margin-bottom: 14px;">
                             <div class="titlename">质量异常信息</div>
                         </div>
-                        <div class="table-tbody">
-                            <div class="item" :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px"
-                                :key="index" v-for="(n, index) in Qualitylist">
-                                <div class="icon">
-
-                                </div>
-                                <div class="itemname1" style="max-width: 210px;">
-                                    {{ n.projectName }}
-
-                                </div>
-                                <div class="itemname2">
-                                    {{ n.checkManName }} {{ n.checkTime }}
+                        <vue-seamless-scroll :data="Qualitylist" class="wrapscroll" :class-option="classOption" style="height:400px">
+                            <div class="table-tbody">
+                                <div class="item" :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px"
+                                    :key="index" v-for="(n, index) in Qualitylist">
+                                    <div class="icon">
+
+                                    </div>
+                                    <div class="itemname1" style="max-width: 210px;">
+                                        {{ n.projectName }}
+
+                                    </div>
+                                    <div class="itemname2">
+                                        {{ n.checkManName }} {{ n.checkTime }}
+                                    </div>
                                 </div>
                             </div>
-                        </div>
+                        </vue-seamless-scroll>
                     </div>
                     <div class="item-table item-table1">
                         <div class="titlebox" style="margin-bottom: 14px;">
@@ -191,6 +193,12 @@ export default {
     },
     data() {
         return {
+            classOption:{
+                direction: 1,
+                hoverstop:true, step: 0.5,
+                openNatch: true,
+                limitMoveNum:7
+            },
             gettimedata: "",
             selectxt: null,
             selectxtclasses: null,
@@ -269,7 +277,7 @@ export default {
             const _this = this;
             getDeviceRefreshTime().then((response) => {
                 if (response.data) {
-                    console.log(response.data)
+                    // console.log(response.data)
                     this.RefreshTime = response.data
                     this.time1 = setInterval(() => {
                         _this.getdatalist(_this.selectxt)
@@ -286,7 +294,7 @@ export default {
                 }
             ).then((response) => {
                 if (response) {
-                    console.log(response)
+                    // console.log(response)
                     this.dictDatatype = response
                     _this.selectxtclasses = _this.dictDatatype[0].ymdType;
                     this.getDeviceRefreshTime()
@@ -439,7 +447,7 @@ export default {
                 ],
             };
             myChart3.setOption(option3);
-            console.log(_this.selectxt)
+            // console.log(_this.selectxt)
             getProMonthNoOk({
                 typeCode: 'produce',
                 factoryCode: 'ds_' + _this.selectxt,
@@ -449,7 +457,7 @@ export default {
                     let dataoption = [];
                     let totalArr = [];
                     _this.optionDatalist3 = [];
-                    console.log(response)
+                    // console.log(response)
                     for (let index = 0; index < response.month.length; index++) {
                         let a = {};
                         response.month[index] = moment(response.month[index]).format('MM')
@@ -468,7 +476,7 @@ export default {
                     dataoption.forEach((item) => {
                         totalArr.push(max);
                     });
-                    console.log(dataoption, numberlist)
+                    // console.log(dataoption, numberlist)
                     // response = [{ name: "1月", code: "100", value: '100', }]
                     // if (response.length > 0) {
                     option3 = {
@@ -629,7 +637,7 @@ export default {
                     let yAxismaxall = 0
                     dataoption.forEach((n) => {
                         if (n.data) {
-                            console.log(Math.max(...n.data), n.data)
+                            // console.log(Math.max(...n.data), n.data)
                             yAxismax.push(Math.max(...n.data))
                         }
                         var item = {
@@ -661,7 +669,7 @@ export default {
                         ],
                         series: seriesmyChart5
                     };
-                    console.log(seriesmyChart5,'111111111111111')
+                    // console.log(seriesmyChart5,'111111111111111')
                     myChart5.setOption(option5);
                 }
             });
@@ -1826,7 +1834,9 @@ export default {
 .app-container {
     padding: 0px 24px;
 }
-
+.wrapscroll{
+    overflow: hidden;
+}
 .home {
     width: 100%;
     height: 100vh;