大屏 滚动表格 滚动table dv-scroll-board

 

<template>
  <div class="box mt10">
    <div class="mb10">重复性问题分析</div>
    <div>
      <dv-scroll-board
        :config="provinceConfirmedCountBoardConfig"
        style="width: 100%; height: 400px"
      />
    </div>
  </div>
</template>

<script>
const initProvinceConfirmedCountBoardConfig = (resultList = []) => {
  console.log("-----------刷新了---------------------");
  console.log(resultList);
  return {
    // header: ["作业票类型", "作业票名称", "状态", "申请人", "申请时间"],
    header: ["标签名称", "累计问题数量", "未整改数量", "整改完成率"],
    headerHeight: 30,
    columnWidth: [180, 220, 160, 160, 180],
    data: resultList,
    align: ["center"],
    rowNum: 10,
    index: false, //是否展示序号
    indexHeader: "序号",
    headerBGC: "",
    oddRowBGC: "",
    evenRowBGC: "",
    carousel: "single",
  };
};
export default {
  data () {
    return {
      provinceConfirmedCountBoardConfig:
        initProvinceConfirmedCountBoardConfig(),
    }
  },

  created () {
    this.getBizBoardFn()
  },

  methods: {
    // 当前最新作业
    async getBizBoardFn () {
      //   var res = await getBizBoard({
      //     type: this.deptId ? "dept" : "",
      //     deptId: this.deptId,
      //   });
      //   console.log(res);
      var res = {
        "code": 200,
        "message": "操作成功",
        "success": true,
        "data": [
          {
            "category": "待采样",
            "bizType": "动火作业",
            "title": "ly动火人员变更",
            "draftName": "lycheshi",
            "createTime": "2024-02-01 09:41"
          },
          {
            "category": "待落实",
            "bizType": "动火作业",
            "title": "ly动火人员变更",
            "draftName": "lycheshi",
            "createTime": "2024-02-01 09:41"
          },
          {
            "category": "待签审",
            "bizType": "盲板抽堵",
            "title": "jsjssn",
            "draftName": "hng",
            "createTime": "2024-01-29 10:42"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时",
            "draftName": "lycheshi",
            "createTime": "2024-01-16 13:43"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          },
          {
            "category": "待落实",
            "bizType": "临时用电",
            "title": "ly临时用电一步一校验",
            "draftName": "lycheshi",
            "createTime": "2024-01-15 17:52"
          }
        ]
      }
      this.queryProvinceDataList(res.data);
    },
    queryProvinceDataList (arr) {
      this.setProvinceComfirmedCountBoardData(arr);
    },
    setProvinceComfirmedCountBoardData (areaList) {
      if (areaList && areaList.length > 0) {
        let resultList = areaList.map((item) => {
          return [
            item.bizType,
            item.title,
            item.category,
            item.draftName,
            // this.getDate(item.createTime),
          ];
        });
        // 重新生成，否则无法刷新状态
        this.provinceConfirmedCountBoardConfig =
          initProvinceConfirmedCountBoardConfig(resultList);
      } else {
        console.log("周这里吗来了");
        this.provinceConfirmedCountBoardConfig =
          initProvinceConfirmedCountBoardConfig([]);
      }
    },
  }
}
</script>

<style scoped  lang="scss">
.box {
  padding: 30px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
//修改的是下拉框选项内容上方的尖角
/deep/ .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  display: none;
}
/deep/ .dv-scroll-board .header {
  background: transparent !important;
  border-bottom: 2px solid #9ca3b3 !important;
  border-radius: 0;
}
.row-item {
  border-bottom: 1px solid #000 !important;
}
</style>