112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<!--zIndex:-1-->
|
||
|
|
<div class="Body table gridBody"
|
||
|
|
@wheel.passive="wheel">
|
||
|
|
<div :class="['row',]"
|
||
|
|
v-for="task in Store.tasks"
|
||
|
|
:style="{ height: Store.scales.cellHeight + 'px' }"
|
||
|
|
@dblclick="locationProgress(task)">
|
||
|
|
<div
|
||
|
|
v-for="column in Store.columns"
|
||
|
|
:key="column.name"
|
||
|
|
class="cell"
|
||
|
|
:style="cellStyle(column)"
|
||
|
|
|
||
|
|
>
|
||
|
|
<!--:style="cellStyle(column)"-->
|
||
|
|
<template v-if="column.action">
|
||
|
|
<span class="el-icon-plus add" :data-action="column.action"></span>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="column.name=='start_time'">
|
||
|
|
{{ label(task[column.name]) }}
|
||
|
|
<!--{{ new TSTY.Global().parseTime(task[column.name]) }}-->
|
||
|
|
<!-- {{ Clock.makeLabel() }}-->
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
{{ task[column.name] }}
|
||
|
|
</template>
|
||
|
|
<!-- <template v-if="column.name === 'text'">
|
||
|
|
<div class="content" :style="contentStyle(task)">
|
||
|
|
<div
|
||
|
|
class="icon"
|
||
|
|
:class="getIcon(task)"
|
||
|
|
data-action="toggle-task"
|
||
|
|
></div>
|
||
|
|
{{ column.template(task) }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
{{ column.template(task) }}
|
||
|
|
</template>-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div :style="style">
|
||
|
|
aa
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "Body",
|
||
|
|
props: ['Store'],
|
||
|
|
computed: {
|
||
|
|
gridBodyStyle() {
|
||
|
|
return {
|
||
|
|
height: `${this.Store.scales.fullHeight || 1600}px`,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {style: {}}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
let Chart = document.getElementsByClassName("Chart")[0]
|
||
|
|
console.log(this.Store.scales.fullHeight)
|
||
|
|
console.log(Chart.getBoundingClientRect().height)
|
||
|
|
this.style = {
|
||
|
|
height: `${this.Store.scales.fullHeight - Chart.getBoundingClientRect().height + 10}px`,
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
locationProgress(task) {
|
||
|
|
console.log(task)
|
||
|
|
console.log()
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.Store.scales.scrollLeft = Number(document.getElementById(task.ID).style.left.split("px")[0])
|
||
|
|
})
|
||
|
|
},
|
||
|
|
label(stamp) {
|
||
|
|
return this.Store.parseTime(stamp, "{y}-{m}-{d} {h}:{i}:{s}");
|
||
|
|
},
|
||
|
|
cellStyle(column) {
|
||
|
|
const align = `text-align:${column.align}`;
|
||
|
|
const width =
|
||
|
|
column.width === "100%" ? `flex:1` : `width:${column.width}`;
|
||
|
|
return `${width};${align};padding-left:5px`;
|
||
|
|
},
|
||
|
|
wheel() {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.Body {
|
||
|
|
font: 400 13px Arial;
|
||
|
|
color: #fff;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
overflow-y: inherit;
|
||
|
|
|
||
|
|
.row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-bottom: 1px solid #00ffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|