ha-mes-vue/src/views/modules/taskmanage/taskReport.vue

<template>
  <div class="mod-config">
    <el-row>
      <el-col :span="24" style="display:flex">

        <div style=" margin: auto; width: 300px;height: 50px;display:flex">
          <h2>赫艾内部MES沟通系统</h2>
        </div>


      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="dataList"
          border
          ref="task_table"
          :height="height"
          :row-class-name="tableRowClassName"
          @mouseenter.native="mouseEnter"
          @mouseleave.native="mouseLeave"
          style="width: 100%;">
          <el-table-column
            v-for="(item,index) in columnList" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="'center'"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed==''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
              <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                                 style="width: 100px; height: 80px"/></span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {getTaskDetailList} from '@/api/taskmanage/tasklist.js'

let domTimer = '' // 自动滚动的定时任务
let dataTimer = '' // 数据定时任务
export default {
  data() {
    return {
      height: 200,
      dataForm: {
        site: this.$store.state.user.site ? this.$store.state.user.site : 1,
        customer: '',
        taskHeader: '',
        project: '',
        taskDescription: '',
        taskInitiator: '',
        finalStatus: '未完成',
        department: '',
        responsiblePerson: '',
        startDate: '',
        endDate: '',
        finishStartDate: '',
        finishEndDate: '',
        status: '',
        ipAddress: this.$route.query.ip
      },
      // 展示列集
      columnList: [
        {
          tableId: "ProjectInfo",
          tableName: this.$route.meta.title,
          columnProp: "customer",
          columnLabel: "客户",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 100,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          tableId: "ProjectInfo",
          tableName: this.$route.meta.title,
          columnProp: "project",
          columnLabel: "项目",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 100,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          tableId: "ProjectInfo",
          tableName: this.$route.meta.title,
          columnProp: "taskHeader",
          columnLabel: "任务主题",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          tableId: "ProjectInfo",
          tableName: this.$route.meta.title,
          columnProp: "taskStartDate",
          columnLabel: "发起日期",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 100,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          tableId: "ProjectInfo",
          tableName: this.$route.meta.title,
          columnProp: "requiredCompletionDate",
          columnLabel: "要求完成日期",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 100,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },

        {
          tableId: "ProjectInfo",
          tableName: this.$route.meta.title,
          columnProp: "depUserName",
          columnLabel: "责任部门|责任人",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 120,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          tableId: "ProjectInfo",
          tableName: this.$route.meta.title,
          columnProp: "status",
          columnLabel: "状态",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 80,
          format: null,
          functionId: this.$route.meta.menuId,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
      ],
      dataList: [],
      // 默认的刷新，滚动时间，滚动间距
      refreshTime: 5,
      rollTime: 5,
      rollPx: 1,
    }
  },
  activated() {
    // this.getDataList()

  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 30;
    })
  },
  methods: {
    // 获取数据列表
    getDataList() {
      getTaskDetailList(this.dataForm).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.data
        } else {
          this.dataList = []
        }
        this.dataListLoading = false
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.status == '未受理' && this.dayjs(this.dayjs()).diff(row.createdDate, 'minutes') / 60 >= 12) {
        return 'finish'
      }
      if (row.status == '未受理') {
        return 'not-processing'
      }
      if (row.status == '已受理') {
        return 'processing'
      }
      // return ''
    },
    // 鼠标进入
    mouseEnter(time) {
      // 鼠标进入停止滚动和切换的定时任务
      this.autoRoll(true)
    },
    // 鼠标离开
    mouseLeave() {
      // 开启
      this.autoRoll()
    },
    // 设置自动滚动
    autoRoll(stop) {
      if (stop) {
        clearInterval(domTimer)
        return
      }
      this.$nextTick(() => {
        // 拿到表格挂载后的真实DOM
        const table = this.$refs.task_table
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
        domTimer = setInterval(() => {
          // 元素自增距离顶部像素
          divData.scrollTop = this.decimalUtil.add(Number(divData.scrollTop), Number(this.rollPx))
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }, this.rollTime * 10)
      })

    },
  },
  created() {
    this.autoRoll()
    dataTimer = setInterval(() => {
      this.getDataList()
    }, 3000)
  },
  beforeUnmount() {
    clearInterval(dataTimer)
    clearInterval(domTimer)
  }
}
</script>
<style>
.mod-config .not-processing {
  background-color: #ffff00;
}

.mod-config .processing {
/ / background-color: #5f0e3f;
}

.mod-config .finish {
  background-color: orangered;
  color: #f2f6fc;
}
</style>