rsxm-master/src/views/portraitScreen/components/qyzpq.vue

<template>
  <div class="tableBox">
    <el-table
      ref="tableRef"
      :data="tableData"
      height="1240px"
      style="width: 100%"
    >
      <el-table-column label="序号" width="200px">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="企业名称" width="1000px" />
      <el-table-column prop="street" label="所在街道" />
      <el-table-column prop="position" label="招聘岗位" />
      <el-table-column prop="recruitmentNum" label="招聘人数" />
    </el-table>
  </div>
</template>

<script setup>
// import { ref, onMounted, onBeforeUnmount } from "vue";

import { onMounted, ref, Ref } from "vue";
const tableRef = ref(null); //表格实例
let scrollInterval = null;
let isScroll = true;
let scrollSpeed = 2;
let scrollDelay = 20; // 控制滚动速度

onMounted(() => {
  setTimeout(() => {
    setupScroll();
  }, 100);
});

const setupScroll = () => {
  if (!tableRef.value) return;

  const tableBodyWrapper = tableRef.value.$refs.bodyWrapper;
  const scrollContainer = tableBodyWrapper.querySelector(".el-scrollbar__wrap");

  if (!scrollContainer) return;

  // 鼠标悬停控制
  scrollContainer.addEventListener("mouseover", () => {
    isScroll = false;
  });

  scrollContainer.addEventListener("mouseout", () => {
    isScroll = true;
  });

  // 清除之前的定时器（如果有的话）
  if (scrollInterval) {
    clearInterval(scrollInterval);
  }

  // 设置新的滚动定时器
  scrollInterval = setInterval(() => {
    if (isScroll && scrollContainer) {
      // 正常滚动
      scrollContainer.scrollTop += scrollSpeed;

      // 检查是否已经滚动到底部附近
      if (
        scrollContainer.scrollTop + scrollContainer.clientHeight >=
        scrollContainer.scrollHeight - 5
      ) {
        // 重置到顶部，实现循环滚动
        scrollContainer.scrollTop = 0;
      }
    }
  }, scrollDelay);
};

const tableData = ref([
  {
    name: "比亚迪电子科技 (崇州) 有限公司",
    street: "大划街道",
    position: "操作工（正式工）",
    recruitmentNum: "150"
  },
  {
    name: "成都领益科技有限公司",
    street: "崇阳街道",
    position: "电子设备维修师",
    recruitmentNum: "5"
  },
  {
    name: "日东材料科技 (成都) 有限公司",
    street: "崇阳街道",
    position: "材料研发工程师",
    recruitmentNum: "10"
  },
  {
    name: "日东材料科技 (成都) 有限公司",
    street: "崇阳街道",
    position: "设备操作员",
    recruitmentNum: "8"
  },
  {
    name: "日东材料科技 (成都) 有限公司",
    street: "崇阳街道",
    position: "品保",
    recruitmentNum: "2"
  },
  {
    name: "四川福蓉科技股份公司",
    street: "崇双路街道",
    position: "铝合金加工技师",
    recruitmentNum: "6"
  },
  {
    name: "索菲亚家居（成都）有限公司",
    street: "崇阳街道",
    position: "安装售后专员",
    recruitmentNum: "10"
  },
  {
    name: "四川中源智慧电缆有限公司",
    street: "崇阳街道",
    position: "编织工",
    recruitmentNum: "3"
  },
  {
    name: "四川中源智慧电缆有限公司",
    street: "崇阳街道",
    position: "挤塑工",
    recruitmentNum: "6"
  },
  {
    name: "四川中源智慧电缆有限公司",
    street: "崇阳街道",
    position: "拉丝工",
    recruitmentNum: "3"
  },
  {
    name: "四川中源智慧电缆有限公司",
    street: "崇阳街道",
    position: "成缆工",
    recruitmentNum: "5"
  },
  {
    name: "四川中源智慧电缆有限公司",
    street: "崇阳街道",
    position: "绞线工",
    recruitmentNum: "5"
  },
  {
    name: "四川展新胶粘材料有限公司",
    street: "崇阳街道",
    position: "QC主管",
    recruitmentNum: "5"
  },
  {
    name: "四川展新胶粘材料有限公司",
    street: "崇阳街道",
    position: "销售经理",
    recruitmentNum: "2"
  },
  {
    name: "四川展新胶粘材料有限公司",
    street: "崇阳街道",
    position: "SQE工程师",
    recruitmentNum: "2"
  },
  {
    name: "四川展新胶粘材料有限公司",
    street: "崇阳街道",
    position: "研发工程师",
    recruitmentNum: "4"
  },
  {
    name: "全友家私有限公司",
    street: "崇阳街道",
    position: "组装操作工",
    recruitmentNum: "8"
  },
  {
    name: "融通农发牧原（崇州）有限责任公司",
    street: "隆兴镇",
    position: "养殖技术员",
    recruitmentNum: "9"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "制瓶工",
    recruitmentNum: "5"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "包装工",
    recruitmentNum: "10"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "配料工 ",
    recruitmentNum: "5"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "磨口工",
    recruitmentNum: "3"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "灯工",
    recruitmentNum: "3"
  },
  {
    name: "成都达旺膜结构工程公司",
    street: "青霞街道",
    position: "膜结构业务员",
    recruitmentNum: "2"
  },
  {
    name: "成都兴兴蓉通信科技有限公司",
    street: "崇阳街道",
    position: "通信设备调试员",
    recruitmentNum: "8"
  },
  {
    name: "四川合丰运维科技有限公司",
    street: "崇阳街道",
    position: "信息化平台值班专员",
    recruitmentNum: "2"
  },
  {
    name: "成都市艾家食品有限公司",
    street: "街子古镇",
    position: "标签打码员",
    recruitmentNum: "2"
  },
  {
    name: "成都市艾家食品有限公司",
    street: "街子古镇",
    position: "销售",
    recruitmentNum: "2"
  },
  {
    name: "成都市艾家食品有限公司",
    street: "街子古镇",
    position: "香料粉碎工",
    recruitmentNum: "1"
  },
  {
    name: "成都市艾家食品有限公司",
    street: "街子古镇",
    position: "生产普工",
    recruitmentNum: "10"
  },
  {
    name: "成都市艾家食品有限公司",
    street: "街子古镇",
    position: "选香料临时工",
    recruitmentNum: "2"
  },
  {
    name: "成都恒兴昌科技有限公司",
    street: "崇庆街道",
    position: "普工（长白班）",
    recruitmentNum: "2"
  },
  {
    name: "成都市朗昇光电科技有限公司",
    street: "崇庆街道",
    position: "临时工",
    recruitmentNum: "4"
  },
  {
    name: "成都瀚林新材料科技有限公司",
    street: "崇庆街道",
    position: "普工(长白班)",
    recruitmentNum: "2"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "包装工",
    recruitmentNum: "10"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "制瓶工",
    recruitmentNum: "5"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "配料工 ",
    recruitmentNum: "5"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "磨口工",
    recruitmentNum: "3"
  },
  {
    name: "四川蜀玻（集团）有限责任公司",
    street: "崇阳街道",
    position: "灯工",
    recruitmentNum: "3"
  },
  {
    name: "成都安居天下实业有限责任公司",
    street: "崇阳街道",
    position: "钢制家具开料岗位",
    recruitmentNum: "1"
  },
  {
    name: "成都安居天下实业有限责任公司",
    street: "崇阳街道",
    position: "钢制家具喷塑岗位",
    recruitmentNum: "1"
  },
  {
    name: "成都安居天下实业有限责任公司",
    street: "崇阳街道",
    position: "钣金激光切割岗位",
    recruitmentNum: "1"
  },
  {
    name: "成都安居天下实业有限责任公司",
    street: "崇阳街道",
    position: "钣金折弯岗位",
    recruitmentNum: "1"
  },
  {
    name: "成都安居天下实业有限责任公司",
    street: "崇阳街道",
    position: "钢制家具钣金组焊岗位",
    recruitmentNum: "1"
  },
  {
    name: "成都安居天下实业有限责任公司",
    street: "崇阳街道",
    position: "实木办公家具配料岗位",
    recruitmentNum: "1"
  },
  {
    name: "四川展新胶粘材料有限公司",
    street: "崇阳街道",
    position: "品质主管",
    recruitmentNum: "2"
  },
  {
    name: "四川展新胶粘材料有限公司",
    street: "崇阳街道",
    position: "销售经理",
    recruitmentNum: "2"
  },
  {
    name: "四川展新胶粘材料有限公司",
    street: "崇阳街道",
    position: "SQE工程师",
    recruitmentNum: "2"
  },
  {
    name: "四川展新胶粘材料有限公司",
    street: "崇阳街道",
    position: "研发工程师",
    recruitmentNum: "4"
  },
  {
    name: "四川展新胶粘材料有限公司",
    street: "崇阳街道",
    position: "品质客户经理(CQM)",
    recruitmentNum: "2"
  },
  {
    name: "成都帝龙新材料有限公司",
    street: "崇阳街道",
    position: "接纸工",
    recruitmentNum: "2"
  },
  {
    name: "成都帝龙新材料有限公司",
    street: "崇阳街道",
    position: "操作工 ",
    recruitmentNum: "1"
  },
  {
    name: "成都帝龙新材料有限公司",
    street: "崇阳街道",
    position: "销售业务员",
    recruitmentNum: "3"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "安装师傅",
    recruitmentNum: "10"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "拆单",
    recruitmentNum: "2"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "木工学徒",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "五金分拣",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "油漆主管",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "试装人员",
    recruitmentNum: "nan"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "异形制作人员",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "五面钻打孔人员",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "封边人员",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "油漆工序质检人员",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "木工全能师傅",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "电子锯开料",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "包装",
    recruitmentNum: "2"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "杂工（学徒）",
    recruitmentNum: "1"
  },
  {
    name: "成都艾瑞卡家居用品有限公司",
    street: "崇阳街道",
    position: "实木打磨",
    recruitmentNum: "2"
  },
  {
    name: "崇州市华米科技有限公司",
    street: "崇阳街道",
    position: "针车",
    recruitmentNum: "10"
  },
  {
    name: "崇州市华米科技有限公司",
    street: "崇阳街道",
    position: "手工",
    recruitmentNum: "5"
  },
  {
    name: "崇州市华米科技有限公司",
    street: "崇阳街道",
    position: "品检",
    recruitmentNum: "5"
  },
  {
    name: "崇州市华米科技有限公司",
    street: "崇阳街道",
    position: "普工",
    recruitmentNum: "10"
  },
  {
    name: "崇州市华米科技有限公司",
    street: "崇阳街道",
    position: "贴底",
    recruitmentNum: "10"
  },
  {
    name: "崇州市华米科技有限公司",
    street: "崇阳街道",
    position: "压机",
    recruitmentNum: "10"
  },
  {
    name: "崇州市华米科技有限公司",
    street: "崇阳街道",
    position: "刷白胶",
    recruitmentNum: "10"
  },
  {
    name: "崇州市华米科技有限公司",
    street: "崇阳街道",
    position: "打磨(PU)",
    recruitmentNum: "10"
  },
  {
    name: "崇州市华米科技有限公司",
    street: "崇阳街道",
    position: "贴标",
    recruitmentNum: "10"
  }
]);
</script>

<style lang="scss" scoped>
.tableBox {
  width: 2920px;
  margin: 0 auto;
  padding: 150px 0 0 0;
}
::v-deep .el-table {
  background-color: transparent;
  --el-table-border-color: rgba(22, 65, 85, 0.5);
  .cell {
    line-height: normal;
    color: #fff;
  }
}
::v-deep .el-table__header-wrapper {
  margin: 0 0 1px 0;
}
::v-deep .el-table .el-table__cell {
  padding: 36px 0;
}
::v-deep .el-table th.el-table__cell {
  background-color: #1631551f !important;
  color: #c4f3fe;
  margin: 0 0 4px 0;
  font-size: 54px;
}
::v-deep .el-table tr {
  background-color: rgba(22, 43, 85, 0);
}
::v-deep .el-table tr:nth-child(even) {
  background-color: rgba(31, 84, 145, 0.473);
}
::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid rgba(22, 41, 85, 0);
  font-size: 54px;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid rgba(22, 41, 85, 0.3);
}
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: rgb(16, 68, 171, 0.3);
  color: #fff;
}
</style>