comit

src/views/report/AddReport.vue

@@ -2,7 +2,7 @@
 import {ref,onMounted} from 'vue'
 import {useInitFroalaEditor} from '@/hooks/useFroalaEditor'
 import EditReportBaseInfo from './components/EditReportBaseInfo.vue'
-import ReportInsertContent from './components/ReportInsertContent.vue'
+import ReportInsertContent from './components/reportInsert/Index.vue'
 
 
 const {FroalaEditorIns,initFroalaEditor}=useInitFroalaEditor()

src/views/report/components/ReportInsertContent.vue

@@ -1,24 +0,0 @@
-<script setup>
-
-const typeOpt=[
-    {
-        
-    }
-]
-
-</script>
-
-<template>
-    <div class="report-insert-content-wrap">
-        <ul class="top-type-box">
-            <li></li>
-        </ul>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.report-insert-content-wrap{
-    width: 100%;
-    height: 70vh;
-}
-</style>

src/views/report/components/reportInsert/ETAChart.vue

@@ -0,0 +1,40 @@
+<script setup>
+import {ref} from 'vue'
+
+const searchVal=ref('')
+const typeActive=ref(0)
+const onlyMe=ref(false)
+</script>
+
+<template>
+    <div class="ETA-chart-wrap">
+        <div class="sticky-box">
+            <van-search v-model="searchVal" shape="round" placeholder="请输入图表名称" />
+            <van-tabs v-model:active="typeActive" line-width="16px" title-active-color="#0052D9">
+                <van-tab title="ETA图库"></van-tab>
+                <van-tab title="商品价格曲线"></van-tab>
+                <van-tab title="相关性图表"></van-tab>
+                <van-tab title="拟合方程曲线"></van-tab>
+            </van-tabs>
+            <van-checkbox v-model="onlyMe">只看我的</van-checkbox>
+        </div>
+
+        
+
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.sticky-box{
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: #fff;
+    .van-tabs{
+        border-bottom: 1px solid $border-color;
+    }
+    .van-checkbox{
+        margin: var(--van-padding-sm);
+    }
+}
+</style>

src/views/report/components/reportInsert/Index.vue

@@ -0,0 +1,61 @@
+<script setup>
+import {ref} from 'vue'
+import ETAChart from './ETAChart.vue'
+
+const typeOpt=['图表插入','批量插入','表格插入','沙盘插入']
+const activeType=ref('图表插入')
+
+</script>
+
+<template>
+    <div class="report-insert-content-wrap">
+        <ul class="top-type-box">
+            <li 
+                :class="['item',activeType===item&&'active']"
+                v-for="item in typeOpt" 
+                :key="item"
+                @click="activeType=item"
+            >{{item}}</li>
+        </ul>
+        <div class="main-box">
+            <ETAChart />
+        </div>
+        <div class="bot-btn">
+            <van-button type="primary" block>插入</van-button>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.report-insert-content-wrap{ 
+    width: 100%;
+    height: 70vh;
+    display: flex;
+    flex-direction: column;
+    .top-type-box{
+        background-color: $page-bg-grey;
+        display: flex;
+        border-bottom: 1px solid $border-color;
+        .item{
+            padding: 24px 0;
+            flex: 1;
+            text-align: center;
+            border-top-right-radius: var(--van-popup-round-radius);
+            border-top-left-radius: var(--van-popup-round-radius);
+            transition: all 0.3s;
+        }
+        .active{
+            background-color: #fff;
+            color: $theme-color;
+            font-weight: 600;
+        }
+    }
+    .main-box{
+        flex: 1;
+        overflow-y: auto;
+    }
+    .bot-btn{
+        padding: 48px;
+    }
+}
+</style>