From 8f0b0eae35cd9dcf36e96ae1c4bd36c8c68f330c Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 18 May 2023 15:37:59 +0800
Subject: [PATCH] feat: add layout

---
 .../controls/ContinuousProfiling.vue          |  3 +-
 .../related/continuous-profiling/Content.vue  | 61 +++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/views/dashboard/related/continuous-profiling/Content.vue

diff --git a/src/views/dashboard/controls/ContinuousProfiling.vue b/src/views/dashboard/controls/ContinuousProfiling.vue
index 2f900386..6873ea38 100644
--- a/src/views/dashboard/controls/ContinuousProfiling.vue
+++ b/src/views/dashboard/controls/ContinuousProfiling.vue
@@ -25,13 +25,14 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
-    <div>Content</div>
+    <Content :config="props.data" />
   </div>
 </template>
 <script lang="ts" setup>
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import Content from "../related/continuous-profiling/Content.vue";
 
   /*global defineProps */
   const props = defineProps({
diff --git a/src/views/dashboard/related/continuous-profiling/Content.vue b/src/views/dashboard/related/continuous-profiling/Content.vue
new file mode 100644
index 00000000..d21ba051
--- /dev/null
+++ b/src/views/dashboard/related/continuous-profiling/Content.vue
@@ -0,0 +1,61 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="flex-h content">
+    <div class="list flex-v">
+      <div>strategies</div>
+      <div>tasks</div>
+    </div>
+    <div>graph</div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import type { PropType } from "vue";
+  import { useI18n } from "vue-i18n";
+  /*global defineProps */
+  defineProps({
+    config: {
+      type: Object as PropType<any>,
+      default: () => ({ graph: {} }),
+    },
+  });
+  const { t } = useI18n();
+</script>
+<style lang="scss" scoped>
+  .content {
+    height: calc(100% - 30px);
+    width: 100%;
+  }
+
+  .vis-graph {
+    height: 100%;
+    flex-grow: 2;
+    min-width: 700px;
+    overflow: auto;
+  }
+
+  .item {
+    width: 100%;
+    overflow: auto;
+    height: calc(100% - 100px);
+    padding-bottom: 10px;
+  }
+
+  .schedules {
+    height: 90px;
+    border-bottom: 1px solid #ccc;
+    padding-right: 10px;
+  }
+</style>