设置柱状图自动滚动

yangfeng

2023-12-04 1e5dc53615446a620d4d0fc0068c09989686e015

 src/views/cockpitPage/components/WorkOrderProgress.vue

@@ -9,7 +9,12 @@
        </div>
      </div>
      <div class="table-box">
        <el-table :data="tableData" style="width: 100%">
        <el-table
          ref="table"
          :data="tableData"
          style="width: 100%"
          height="100%"
        >
          <el-table-column
            prop="workOrderId"
            label="工单编号"
@@ -69,8 +74,16 @@
          <el-table-column label="延期预警" align="center">
            <template slot-scope="scope">
              <div v-show="scope.row.delayWarning > 0" class="round-view">
                <div class="round"></div>
                <div class="title">{{ scope.row.delayWarning + "天" }}</div>
                <div class="round red-bg"></div>
                <div class="title red-color">
                  {{ scope.row.delayWarning + "天" }}
                </div>
              </div>
              <div v-show="scope.row.delayWarning < 0" class="round-view">
                <div class="round green-bg"></div>
                <div class="title green-color">
                  {{ scope.row.delayWarning + "天" }}
                </div>
              </div>
            </template>
          </el-table-column>
@@ -149,12 +162,130 @@
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: -2,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "BA5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "BA5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
      ],
    };
  },
  mounted() {},
  mounted() {
    this.setAutoScroll();
  },
  watch: {},
  methods: {},
  methods: {
    // 实现自动滚动的方法
    setAutoScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, 200); // 滚动速度
    },
  },
};
</script>

@@ -192,6 +323,8 @@
    }
    .table-box {
      padding: 20px 15px;
      height: calc(100% - 75px);
      overflow: hidden;
      .progerss-bg {
        width: 100%;
        height: 22px;
@@ -219,13 +352,25 @@
      .round-view {
        display: flex;
        justify-content: center;
        color: #ff0000;

        .round {
          width: 22px;
          height: 22px;
          border-radius: 11px;
          background: #ff0000;

          margin-right: 5px;
        }
        .red-bg {
          background: #ff0000;
        }
        .green-bg {
          background: #00cc00;
        }
        .red-color {
          color: #ff0000;
        }
        .green-color {
          color: #00cc00;
        }
      }
    }
@@ -251,6 +396,7 @@
  // 修改表格字体颜色
  .el-table__body td {
    color: #00ffff;
    padding: 8px 0;
  }
  // 设置表格背景透明
  .el-table th {
@@ -285,5 +431,10 @@
  .el-table::before {
    display: none;
  }
  // 保留垂直滚动且隐藏滚动条
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}
</style>