创建新仓库

src/renderer/components/TS/grid/Body.vue

@@ -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>