查询小班列表样式修改

src/components/header.vue

@@ -2,9 +2,9 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-06-14 18:11:54
- * @LastEditors: gcz
- * @LastEditTime: 2022-11-01 11:33:45
- * @FilePath: \ntbigscreen\src\components\header.vue
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-03-02 16:13:35
+ * @FilePath: \castgroup_bigscreen\src\components\header.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
 <!--
@@ -40,7 +40,8 @@ export default {
         return {
             nowTime: '',
             isFull: false,
-            homeLink:process.env.NODE_ENV === 'development' ? '//castgrouptest.hw.hongweisoft.com' : '//admin.bigdata.anthelp.top',
+            // homeLink:process.env.NODE_ENV === 'development' ? '//castgrouptest.hw.hongweisoft.com' : '//admin.bigdata.anthelp.top',
+            homeLink:'http://castgrouptest.hw.hongweisoft.com/'
         };
     },
     created() {

src/components/pagination/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to';
+export default {
+  name: 'pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50];
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(val) {
+        this.$emit('update:page', val);
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit;
+      },
+      set(val) {
+        this.$emit('update:limit', val);
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang='scss'>
+.pagination-container {
+  /* background: #fff; */
+  padding: 14px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+/deep/ .el-pagination.is-background .btn-next,
+/deep/ .el-pagination.is-background .btn-prev,
+/deep/ .el-pagination.is-background .el-pager li {
+  margin: 0 5px;
+  background-color: rgba(0, 250, 253, 0.22);
+  color: #00fafd;
+  min-width: 30px;
+  border: 1px solid rgba(0, 250, 253, 0.21);
+  border-radius: unset;
+}
+/deep/ .el-pagination.is-background .btn-next.disabled,
+/deep/ .el-pagination.is-background .btn-next:disabled,
+/deep/ .el-pagination.is-background .btn-prev.disabled,
+/deep/ .el-pagination.is-background .btn-prev:disabled,
+/deep/.el-pagination.is-background .el-pager li.disabled {
+  color: rgba(1, 33, 35, 0.7) !important;
+}
+/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: #00fafd;
+  color: #060201;
+}
+/deep/.el-pagination.is-background .el-pager li:hover {
+  background-color: #00fafd;
+  color: #060201;
+}
+</style>

src/main.js

@@ -10,12 +10,11 @@ import router from "./router";
 import store from "./store";
 
 import dataV from "@jiaminghi/data-view";
-
+import Pagination from "@/components/pagination"
 // 引入全局样式文件
 import "@/assets/scss/index.scss";
 
-import { Select, Option, Input, Table, TableColumn,Dialog } from 'element-ui';
-
+import Element from "element-ui";
 import 'element-ui/lib/theme-chalk/index.css';
 // 图片放大
 import Viewer from 'v-viewer'
@@ -25,15 +24,10 @@ Vue.use(Viewer)
 import filters from './utils/filters'
 filters(Vue);
 
-Vue.use(Select);
-Vue.use(Option);
-Vue.use(Input);
-Vue.use(Table);
-Vue.use(TableColumn);
-Vue.use(Dialog);
+Vue.use(Element);
 
 Vue.use(dataV);
-
+Vue.component("Pagination", Pagination);
 Vue.config.productionTip = false;
 
 /* eslint-disable no-new */

src/router/index.js

@@ -3,6 +3,7 @@
  */
 import Vue from 'vue'
 import Router from 'vue-router'
+import home from '@/views/index'
 
 Vue.use(Router)
 
@@ -11,7 +12,7 @@ export default new Router({
     {
       path: '/',
       name: 'Index',
-      component: resolve => require(['@/views/index'], resolve)
+      component: home
     },
   ]
 })

src/utils/scroll-to.js

@@ -0,0 +1,67 @@
+/**
+ * @Description: 
+ * @Author: wangcc
+ * @Date: 2023-03-10 17:00:58
+ * @LastEditors: wangcc
+ * @LastEditTime: 2023-03-10 17:01:07
+ * @FilePath: \castgroup_bigscreen\src\utils\scroll-to.js
+ * @Copyright: Copyright (c) 2016~2023 by wangcc, All Rights Reserved. 
+ */
+Math.easeInOutQuad = function(t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  document.documentElement.scrollTop = amount
+  document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+  const start = position()
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  var animateScroll = function() {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    var val = Math.easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    } else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}

src/views/index.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
  * @LastEditors: wangcc
- * @LastEditTime: 2022-12-08 16:31:08
+ * @LastEditTime: 2023-03-10 17:53:02
  * @FilePath: \castgroup_bigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -179,7 +179,42 @@
             @click="scrollBaseListClick"
             @mouseout="baseListClick"
           />
-          <dv-scroll-board
+          <div class="scroll-board-table-box" v-show="showxiaoban && cur == 1">
+            <el-table
+              height="580"
+              ref="tableFrom"
+              highlight-current-row
+              size="small"
+              :data="tableData"
+              @mouseenter.native="stopScroll"
+              @mouseleave.native="startScroll"
+              @cell-click="scrollBoardClick"
+              stripe
+            >
+              <el-table-column prop="smallNumber" label="小班号" align="center"></el-table-column>
+              <el-table-column prop="treeComp" label="树种组成" align="center"></el-table-column>
+              <el-table-column prop="perAcreStock" label="每亩蓄积" align="center">
+                <template slot-scope="{row}">
+                  <span>{{row.perAcreStock}}m³</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="landArea" label="小班面积" align="center">
+                <template slot-scope="{row}">
+                  <span>{{row.landArea}}亩</span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="pagination-box" v-if="total > 0">
+              <pagination
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                :layout="'prev, pager, next'"
+                @pagination="getRightScrollData"
+              />
+            </div>
+          </div>
+          <!-- <dv-scroll-board
             v-if="showxiaoban && cur == 1"
             :key="scrollBoardKey"
             class="scroll-board-01"
@@ -187,7 +222,7 @@
             ref="scrollBoard"
             @click="scrollBoardClick"
             :style="scrollBoardStyle"
-          />
+          />-->
           <dv-scroll-board
             v-if="showxiaoban && cur == 0"
             :key="scrollBoardKey"
@@ -199,7 +234,11 @@
             @mouseout="scrollOutPro"
             :style="scrollBoardStyle"
           />
-          <div class="scroll-board-tool" @click="toggleShowScrollBoard">
+          <div
+            class="scroll-board-tool"
+            v-if="showxiaoban && cur == 0"
+            @click="toggleShowScrollBoard"
+          >
             <div class="inner">
               <img src="../assets/img/jiantou.png" alt />
             </div>
@@ -293,8 +332,15 @@ export default {
           name: '小班查询'
         }
       ],
+      timer: null,
+      tableData: [],
       rowList: [],
       cur: 0,
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 300
+      },
       showxiaoban: true,
       showbase: false,
       showScrollBoard: false,
@@ -586,8 +632,8 @@ export default {
         countyId: this.$store.state.addr.selectDistrict.areaId,
         townId: this.$store.state.addr.selectStreet.areaId,
         courseId: this.$store.state.addr.selectProject.ProjectID,
-        pageNum: 1,
-        pageSize: 50
+        pageNum: this.queryParams.pageNum,
+        pageSize: this.queryParams.pageSize
       };
       rightScrollData(param)
         .then((res) => {
@@ -599,20 +645,21 @@ export default {
           //   this.scrollBoardConfig.rowNum = 5;
           //   this.scrollBoardStyle.height = '25vh'
           // }
-
-          this.scrollBoardConfig.data = [];
-          res.rows.forEach((element) => {
-            this.scrollBoardConfig.data.push([
-              element.smallNumber,
-              element.treeComp,
-              element.perAcreStock + 'm³',
-              element.landArea + '亩',
-              element.id
-            ]);
-          });
-          this.scrollBoardKey = Date.now();
-          this.$refs.scrollBoard &&
-            this.$refs.scrollBoard.updateRows(this.scrollBoardConfig.data);
+          this.tableData = res.rows;
+          this.total = res.total;
+          // this.scrollBoardConfig.data = [];
+          // res.rows.forEach((element) => {
+          //   this.scrollBoardConfig.data.push([
+          //     element.smallNumber,
+          //     element.treeComp,
+          //     element.perAcreStock + 'm³',
+          //     element.landArea + '亩',
+          //     element.id
+          //   ]);
+          // });
+          // this.scrollBoardKey = Date.now();
+          // this.$refs.scrollBoard &&
+          //   this.$refs.scrollBoard.updateRows(this.scrollBoardConfig.data);
 
           // console.log('this.scrollBoardConfig.data', this.scrollBoardConfig.data);
           // this.scrollBoardConfig = res.data;
@@ -1220,9 +1267,10 @@ export default {
       this.getBaseList();
       this.getPageData();
     },
-    scrollBoardClick(e) {
+    scrollBoardClick(row) {
+      console.log(row);
       let param = {
-        id: e.row[4]
+        id: row.id
       };
       smallClassDetail(param).then((res) => {
         this.changeSearchSmallClass(res.data);
@@ -1277,12 +1325,13 @@ export default {
       // proClass[e.rowIndex]&&proClass[e.rowIndex].classList.add('active');
 
       let rowId = e.row[4];
+      console.log(rowId);
       this.changeSelectProject({ ProjectID: rowId, ProjectName: e.row[0] });
       document.getElementById(rowId).classList.add('active');
       let param = {
         courseId: rowId
         // pageNum: 1,
-        // pageSize: 20
+        // pageSize: 50
       };
       projectSmallClass(param).then((res) => {
         if (res.code == 200) {
@@ -1346,12 +1395,42 @@ export default {
       this.cur = e;
       if (this.cur == '1') {
         this.removeAllClass('active');
+        this.tableScroll(false);
+      } else {
+        clearInterval(this.timer);
       }
     },
     classFunc(index) {
       if (this.cur == index) {
         return `active active${index}`;
       }
+    },
+    startScroll() {
+      this.tableScroll(false);
+    },
+
+    stopScroll() {
+      this.tableScroll(true);
+    },
+    //滚动方法
+    tableScroll(stop) {
+      if (stop) {
+        clearInterval(this.timer);
+        return;
+      }
+      const table = this.$refs.tableFrom;
+      const divData = table.bodyWrapper;
+      this.timer = setInterval(() => {
+        divData.scrollTop += 1;
+        if (
+          divData.clientHeight + divData.scrollTop + 1 >
+          divData.scrollHeight
+        ) {
+          if (table.tableData.length > 5) {
+            divData.scrollTop = 0;
+          }
+        }
+      }, 80);
     }
   }
 };
@@ -1439,9 +1518,75 @@ export default {
   border: 1px solid rgba(0, 250, 253, 1);
   background: #04916e;
 }
-.selectBox{
+.selectBox {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+/deep/ .el-table thead {
+  color: #fff;
+}
+/deep/ .el-table tr {
+  background-color: transparent;
+}
+/deep/ .el-table th.el-table__cell {
+  background-color: rgba(8, 238, 255, 0.3);
+}
+/deep/ .el-table {
+  background-color: transparent;
+  color: #08eeff;
+}
+/deep/ .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border-bottom: unset;
+}
+/deep/ .el-table th.el-table__cell.is-leaf {
+  border-bottom: unset;
+}
+/deep/
+  .el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
+  background-color: rgba(0, 175, 169, 0.15);
+}
+/deep/ .el-table::before {
+  background-color: transparent;
+}
+
+/deep/ .el-table__body .el-table__row.hover-row td {
+  background-color: rgba(255, 170, 0, 0.20) !important;
+  cursor: pointer;
+}
+/deep/ .el-table tbody tr:hover > td {
+  background-color: rgba(255, 170, 0, 0.20) !important;
+  cursor: pointer;
+}
+.el-table {
+  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
+    width: 6px; /*滚动条宽度*/
+    height: 10px; /*滚动条高度*/
+  }
+  /*定义滚动条轨道 内阴影+圆角*/
+  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+    box-shadow: 0px 1px 3px rgba(255, 255, 255, 0.1) inset; /*滚动条的背景区域的内阴影*/
+    border-radius: 10px; /*滚动条的背景区域的圆角*/
+    background-color: rgba(255, 255, 255, 0.1); /*滚动条的背景颜色*/
+  }
+  /*定义滑块 内阴影+圆角*/
+  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    box-shadow: 0px 1px 3px rgba(8, 238, 255, 0.3) inset; /*滚动条的内阴影*/
+    border-radius: 10px; /*滚动条的圆角*/
+    background-color: rgba(8, 238, 255, 0.3); /*滚动条的背景颜色*/
+  }
+}
+/deep/ .el-table__body tr.current-row > td.el-table__cell {
+  background-color: transparent;
+}
+.scroll-board-table-box {
+  height: calc(100vh - var(--header-height) - 200px);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 15px;
+}
 </style>