|
|
<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" :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: '', }, // 展示列集
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; }</style>
|
