refactor: use tsx refactor selector component

src/views/components/flowChart/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="container"></div>
+</template>
+
+<script lang='ts'>
+import LogicFlow from "@logicflow/core";
+import "@logicflow/core/dist/style/index.css";
+import { onMounted } from "vue";
+
+const data = {
+  // 节点
+  nodes: [
+    {
+      id: 50,
+      type: "rect",
+      x: 100,
+      y: 150,
+      text: "你好",
+    },
+    {
+      id: 21,
+      type: "circle",
+      x: 300,
+      y: 150,
+    },
+  ],
+  // 边
+  edges: [
+    {
+      type: "polyline",
+      sourceNodeId: 50,
+      targetNodeId: 21,
+    },
+  ],
+};
+export default {
+  setup() {
+    onMounted(() => {
+      const lf = new LogicFlow({
+        container: document.querySelector("#container"),
+        stopScrollGraph: true,
+        stopZoomGraph: true,
+        width: 500,
+        height: 500,
+        grid: {
+          type: "dot",
+          size: 20,
+        },
+      });
+
+      lf.render(data);
+    });
+
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/views/components/selector/index.vue

@@ -1,22 +1,37 @@
 <template>
-  <el-card class="box-card" style="margin:20px">
-    <template #header>
-      <div class="card-header">
-        <span>基本使用</span>
-      </div>
-    </template>
-    <Selector @selectedVal="selectedVal" />
-    <h4>选中范围：{{ selectRange }}</h4>
-  </el-card>
+  <div>
+    <el-card class="box-card" style="margin:10px" v-for="(item,key) in dataLists" :key="key">
+      <template #header>
+        <div class="card-header">
+          <span>{{item.title}}</span>
+        </div>
+      </template>
+      <Selector :HsKey="key" :echo="item.echo" @selectedVal="selectedVal" :disabled="item.disabled" />
+      <h4 v-if="!item.disabled">选中范围：{{ selectRange }}</h4>
+    </el-card>
+  </div>
 </template>
 
 <script lang='ts'>
 import { ref } from "vue";
-import Selector from "/@/components/selector/index.vue";
+import Selector from "/@/components/selector";
+
 export default {
   components: { Selector },
   setup() {
     let selectRange = ref(null);
+    let dataLists = ref([
+      {
+        title: "基本使用",
+        echo: [],
+        disabled: false,
+      },
+      {
+        title: "回显模式",
+        echo: [2, 7],
+        disabled: true,
+      },
+    ]);
 
     const selectedVal = ({ left, right, whole }) => {
       selectRange.value = `${left}-${right}`;
@@ -24,11 +39,9 @@ export default {
 
     return {
       selectedVal,
-      selectRange
+      selectRange,
+      dataLists,
     };
-  }
+  },
 };
 </script>
-
-<style scoped>
-</style>

src/views/welcome.vue

@@ -28,17 +28,21 @@
 
 <script lang='ts'>
 import flop from "../components/flop/index.vue";
-import { ref, computed, onMounted, inject, nextTick } from "vue";
+import { ref, computed, onMounted, nextTick, onUpdated } from "vue";
 import { deviceDetection } from "../utils/deviceDetection";
 import { echartsJson } from "../api/mock";
-import { useEventListener, tryOnUnmounted } from "@vueuse/core";
+import {
+  useEventListener,
+  tryOnUnmounted,
+  useTimeoutFn,
+} from "@vueuse/core";
 import * as echarts from "echarts";
 
 let brokenLine: any = null; //折线图实例
 export default {
   name: "welcome",
   components: {
-    flop
+    flop,
   },
   setup() {
     let mobile = ref(deviceDetection());
@@ -71,39 +75,39 @@ export default {
         brokenLine.setOption({
           title: {
             text: "上海 空气质量指数",
-            left: "1%"
+            left: "1%",
           },
           tooltip: {
-            trigger: "axis"
+            trigger: "axis",
           },
           grid: {
             left: "5%",
             right: "15%",
-            bottom: "10%"
+            bottom: "10%",
           },
           xAxis: {
-            data: info.map(function(item) {
+            data: info.map(function (item) {
               return item[0];
-            })
+            }),
           },
           yAxis: {},
           toolbox: {
             right: 10,
             feature: {
               dataZoom: {
-                yAxisIndex: "none"
+                yAxisIndex: "none",
               },
               restore: {},
-              saveAsImage: {}
-            }
+              saveAsImage: {},
+            },
           },
           dataZoom: [
             {
-              startValue: "2014-06-01"
+              startValue: "2014-06-01",
             },
             {
-              type: "inside"
-            }
+              type: "inside",
+            },
           ],
           visualMap: {
             top: 50,
@@ -112,67 +116,67 @@ export default {
               {
                 gt: 0,
                 lte: 50,
-                color: "#93CE07"
+                color: "#93CE07",
               },
               {
                 gt: 50,
                 lte: 100,
-                color: "#FBDB0F"
+                color: "#FBDB0F",
               },
               {
                 gt: 100,
                 lte: 150,
-                color: "#FC7D02"
+                color: "#FC7D02",
               },
               {
                 gt: 150,
                 lte: 200,
-                color: "#FD0100"
+                color: "#FD0100",
               },
               {
                 gt: 200,
                 lte: 300,
-                color: "#AA069F"
+                color: "#AA069F",
               },
               {
                 gt: 300,
-                color: "#AC3B2A"
-              }
+                color: "#AC3B2A",
+              },
             ],
             outOfRange: {
-              color: "#999"
-            }
+              color: "#999",
+            },
           },
           series: {
             name: "上海 空气质量指数",
             type: "line",
-            data: info.map(function(item) {
+            data: info.map(function (item) {
               return item[1];
             }),
             markLine: {
               silent: true,
               lineStyle: {
-                color: "#333"
+                color: "#333",
               },
               data: [
                 {
-                  yAxis: 50
+                  yAxis: 50,
                 },
                 {
-                  yAxis: 100
+                  yAxis: 100,
                 },
                 {
-                  yAxis: 150
+                  yAxis: 150,
                 },
                 {
-                  yAxis: 200
+                  yAxis: 200,
                 },
                 {
-                  yAxis: 300
-                }
-              ]
-            }
-          }
+                  yAxis: 300,
+                },
+              ],
+            },
+          },
         });
       });
     };
@@ -182,9 +186,13 @@ export default {
     };
 
     onMounted(() => {
-      useEventListener("resize", () => {
-        if (!brokenLine) return;
-        brokenLine.resize();
+      nextTick(() => {
+        useEventListener("resize", () => {
+          if (!brokenLine) return;
+          useTimeoutFn(() => {
+            brokenLine.resize()
+          }, 180);
+        });
       });
     });
 
@@ -198,9 +206,9 @@ export default {
       greetings,
       mobile,
       loading,
-      openDepot
+      openDepot,
     };
-  }
+  },
 };
 </script>