yudao-init/src/views/playground.vue

<!--
    filename: playground.vue
    author: liubin
    date: 2024-04-02 09:42:43
    description: TODO delete this playground
-->

<template>
  <div class="playground" style="display: flex; flex-direction: column">
    <div style="flex: 1; width: 400px; padding: 12px">
      <InPageLeftNav />
    </div>

    <!-- <div style="background: #fff; height: 500px; width: 800px">
      <ButtonNav
        :menus="['状态时序图', '产量时序图']"
        :button-mode="false"
        @change="currentMenu = $event"
      >
        <template v-slot:tab1>
          <h1 style="margin: 20px; background: #f001;">状态时序图</h1>
        </template>
        <template v-slot:tab2>
          <h1 style="margin: 20px">产量时序图</h1>
        </template>
      </ButtonNav>
    </div> -->

    <!-- <div
      style="
        background: #fff;
        padding: 12px;
        border-radius: 8px;
        height: 440px;
        display: flex;
        flex-direction: column;
      "
    >
      <TimeseriesGraph :graphList="graphList" />
    </div> -->
  </div>
</template>

<script>
import ButtonNav from "@/components/ButtonNav";
import TimeseriesGraph from "@/components/TimeseriesGraph";
import InPageLeftNav from "@/components/InPageLeftNav";

export default {
  name: "Playground",
  components: { ButtonNav, TimeseriesGraph, InPageLeftNav },
  props: {},
  data() {
    return {
      currentMenu: null,
      graphList: [
        [
          {
            equipmentName: "一大线四区2小线清洗机",
            duration: 30,
            relativeDuration: 0.6,
            status: 0,
            startPos: 0,
            startTime: 1712025225800,
          },
          {
            equipmentName: "一大线四区2小线清洗机",
            duration: 20,
            relativeDuration: 0.4,
            status: 2,
            startPos: 30,
            startTime: 1712027925800,
          },
        ],
      ],
    };
  },
  watch: {
    currentMenu(val) {
      console.log(val);
    },
  },
  computed: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.playground {
  width: 100vw;
  height: 100vh;
}
</style>