Auto Commit

.inscode

 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "guess": "^1.0.2",
+    "moment": "^2.29.4",
     "vue": "^3.2.37"
   },
   "devDependencies": {

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
+<!--
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: yyq
+ * @Date: 2023-02-13 18:56:19
+ * @LastEditors: yyq
+ * @LastEditTime: 2023-02-14 22:54:08
+-->
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+  <div id="app">
+    <div><div style="text-align: left;margin: 45px 0 8px; 0">无参示例：</div></div>
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+    <TimeLineCanvas></TimeLineCanvas>
+    <div style="text-align: left;margin: 45px 0 8px; 0">指定参数示例：</div>
+    <TimeLineCanvas
+      ref="time_line"
+      @click="clickCanvas"
+      @change="changeDate"
+      :mark-time="markTime"
+      :time-range="timeRange"
+      :isAutoPlay="isAutoPlay"
+      :startMeddleTime="startMeddleTime"
+    />
+    <div style="text-align: left;">
+      <input type="button" @click="setTimeRange" value="设置时间区域" />
+      <input type="button" @click="setStartMeddleTime" value="设置起点时间" />
+      <input type="button" @click="setMarkTime" value="设置区域标签" />
+      <input type="button" @click="setIsAutoPlay" value="开启自动播放" />
+      <input type="button" @click="stop" value="暂停播放" />
+      <input type="button" @click="play" value="开启播放" />
+    </div>
+    <div style="color: #03A9F4; margin-top: 5px;">{{ msg }}</div>
   </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+<script>
+import TimeLineCanvas from "./components/timeline-canvas.vue";
+import moment from "moment";
+export default {
+  name: "App",
+  components: {
+    TimeLineCanvas,
+  },
+  data() {
+    return {
+      msg: "",
+      isAutoPlay: false,
+      boxwidth: 0,
+      width: 500,
+      startMeddleTime: "",
+      timeRange: [],
+      markTime: [],
+    };
+  },
+  methods: {
+    //设置起点时间
+    setStartMeddleTime() {
+      this.startMeddleTime = "2023-02-10 09:01:00";
+    },
+    //设置时间区域
+    setTimeRange() {
+      this.timeRange = "2023-02-10";
+      //或
+      //this.timeRange=["2023-02-10 00:00:00","2023-02-10 23:59:59"];
+      //起点时间根据timeRange计算（timeRange的中间值）
+      this.startMeddleTime = null;
+    },
+    //设置区域标签
+    setMarkTime() {
+      this.markTime = [
+        {
+          beginTime: "2023-02-10 06:01:00",
+          endTime: "2023-02-10 12:02:00",
+          bgColor: "#FFCC99",
+          text: "活动",
+        },
+        {
+          beginTime: "2023-02-10 15:01:00",
+          endTime: "2023-02-10 16:02:00",
+          bgColor: "#FF6666",
+          text: "故障",
+        },
+      ];
+    },
+    //开启自动播放
+    setIsAutoPlay() {
+      this.isAutoPlay = true;
+    },
+    //开启播放
+    play() {
+      this.$refs.time_line.play("2023-02-10 13:01:00");
+    },
+    //暂停播放
+    stop() {
+      this.$refs.time_line.stop();
+    },
+    clickCanvas(date) {
+      console.log(date);
+    },
+    changeDate(date, status) {
+      console.log("changeDate:" + date);
+      this.msg = "选择时间：" + date + "  播放 状 态：" + status;
+    },
+  },
+  beforeMount() {
+    let date = "2023-02-06"; //moment(new Date()).format("YYYY-MM-DD");
+    this.timeRange = date; // [date + " 00:00:00", date + "  23:59:59"];//"2023-2-10"//;
+    this.startMeddleTime = date + " 00:00:00";
+    this.markTime = [
+      {
+        beginTime: date + " 01:01:00",
+        endTime: date + " 02:02:00",
+        bgColor: "#CC3333",
+        text: "困人",
+      },
+      {
+        beginTime: date + " 08:01:00",
+        endTime: date + " 10:02:00",
+        bgColor: "#FF9966",
+        text: "非法闯入",
+      },
+      {
+        beginTime: date + " 15:01:00",
+        endTime: date + " 16:02:00",
+        bgColor: "#FF9900",
+        text: "故障",
+      },
+    ];
+  },
+  mounted() {},
+};
+</script>
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
 }
 </style>