|
|
@ -45,257 +45,259 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import {getTaskDetailList} from '@/api/taskmanage/tasklist.js' |
|
|
|
|
|
|
|
|
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: '', |
|
|
|
|
|
|
|
|
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 |
|
|
}, |
|
|
}, |
|
|
// 展示列集 |
|
|
|
|
|
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, |
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
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 '' |
|
|
}, |
|
|
}, |
|
|
activated() { |
|
|
|
|
|
// this.getDataList() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 鼠标进入 |
|
|
|
|
|
mouseEnter(time) { |
|
|
|
|
|
// 鼠标进入停止滚动和切换的定时任务 |
|
|
|
|
|
this.autoRoll(true) |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
this.height = window.innerHeight - 30; |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
// 鼠标离开 |
|
|
|
|
|
mouseLeave() { |
|
|
|
|
|
// 开启 |
|
|
|
|
|
this.autoRoll() |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
|
|
|
// 获取数据列表 |
|
|
|
|
|
getDataList() { |
|
|
|
|
|
getTaskDetailList(this.dataForm).then(({data}) => { |
|
|
|
|
|
if (data && data.code === 0) { |
|
|
|
|
|
this.dataList = data.data |
|
|
|
|
|
} else { |
|
|
|
|
|
this.dataList = [] |
|
|
|
|
|
|
|
|
// 设置自动滚动 |
|
|
|
|
|
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.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) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
}, this.rollTime * 10) |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
created() { |
|
|
|
|
|
this.autoRoll() |
|
|
|
|
|
dataTimer = setInterval(() => { |
|
|
|
|
|
this.getDataList() |
|
|
|
|
|
}, 3000) |
|
|
|
|
|
}, |
|
|
}, |
|
|
beforeUnmount() { |
|
|
|
|
|
clearInterval(dataTimer) |
|
|
|
|
|
clearInterval(domTimer) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
created() { |
|
|
|
|
|
this.autoRoll() |
|
|
|
|
|
dataTimer = setInterval(() => { |
|
|
|
|
|
this.getDataList() |
|
|
|
|
|
}, 3000) |
|
|
|
|
|
}, |
|
|
|
|
|
beforeUnmount() { |
|
|
|
|
|
clearInterval(dataTimer) |
|
|
|
|
|
clearInterval(domTimer) |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
<style> |
|
|
<style> |
|
|
.mod-config .not-processing { |
|
|
|
|
|
background-color: #ffff00; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.mod-config .not-processing { |
|
|
|
|
|
background-color: #ffff00; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.mod-config .processing { |
|
|
|
|
|
// background-color: #5f0e3f; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.mod-config .processing { |
|
|
|
|
|
/ / background-color: #5f0e3f; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.mod-config .finish { |
|
|
|
|
|
background-color:orangered; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.mod-config .finish { |
|
|
|
|
|
background-color: orangered; |
|
|
|
|
|
color: #f2f6fc; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |