更新

src/views/playground.vue

@@ -0,0 +1,93 @@
+<!-- 
+    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>