创建新仓库
This commit is contained in:
111
src/renderer/components/TS/grid/Body.vue
Normal file
111
src/renderer/components/TS/grid/Body.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<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>
|
||||
37
src/renderer/components/TS/grid/Grid.vue
Normal file
37
src/renderer/components/TS/grid/Grid.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div ref="Grid" class="Grid">
|
||||
<Header :Store="Store"></Header>
|
||||
<Body :Store="Store"></Body>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "@/components/TS/grid/Header.vue";
|
||||
import Body from "@/components/TS/grid/Body.vue";
|
||||
|
||||
export default {
|
||||
name: "Grid",
|
||||
props: ['Store'],
|
||||
components: {
|
||||
Header,
|
||||
Body
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.Grid.style.flex = `0 0 ${this.Store.scales.gridWidth}px`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 400px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
</style>
|
||||
67
src/renderer/components/TS/grid/Header.vue
Normal file
67
src/renderer/components/TS/grid/Header.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="Header table">
|
||||
<div :style="headerStyle()">
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="column in Store.columns"
|
||||
:key="column.name"
|
||||
class="cell"
|
||||
:style="cellStyle(column)"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Header",
|
||||
props: ['Store'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.Store)
|
||||
},
|
||||
methods: {
|
||||
headerStyle() {
|
||||
return {
|
||||
height: this.Store.scales.scaleHeight + "px",
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
}
|
||||
},
|
||||
cellStyle(column) {
|
||||
const align = `text-align:${column.align}`;
|
||||
const width =
|
||||
column.width === "100%" ? `flex:1` : `width:${column.width}`;
|
||||
return `${width};${align};padding-left:5px`;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Header {
|
||||
position: relative;
|
||||
background: linear-gradient(to bottom, rgba(116, 117, 119, 1) 0%, rgba(58, 68, 82, 1) 11%, rgba(46, 50, 56, 1) 46%, rgba(53, 53, 53, 1) 81%, rgba(53, 53, 53, 1) 100%);
|
||||
|
||||
.row {
|
||||
flex: auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #00ffff;
|
||||
//font-size: px2font(16);
|
||||
.cell {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
font: 400 12px Arial;
|
||||
text-transform: capitalize;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user