完成图表列表页的改造

src/assets/svg/show_arrow.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="48" viewBox="0 0 16 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0.5H8C12.1421 0.5 15.5 3.85786 15.5 8V40C15.5 44.1421 12.1421 47.5 8 47.5H0.5V0.5Z" fill="white" stroke="#D8D8D8"/>
+<path d="M6.45977 28.459L5.54053 27.5397L9.08091 23.9994L5.54053 20.459L6.45977 19.5397L10.9194 23.9994L6.45977 28.459Z" fill="#999999"/>
+</svg>

src/assets/svg/star.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.927 7.9752L10.0018 4.0744L8.07666 7.9752L3.77186 8.60072L6.88684 11.6371L6.15149 15.9245L10.0018 13.9002L13.8521 15.9245L13.1168 11.6371L16.2318 8.60072L11.927 7.9752ZM18.166 7.61866C18.4736 7.66336 18.5964 8.04135 18.3739 8.2583L14.4599 12.0735L15.3839 17.4606C15.4364 17.7669 15.1149 18.0005 14.8398 17.8559L10.0018 15.3125L5.16388 17.8559C4.88877 18.0005 4.56723 17.7669 4.61978 17.4606L5.54374 12.0735L1.62977 8.2583C1.4072 8.04135 1.53002 7.66336 1.8376 7.61866L7.24657 6.83269L9.66554 1.93133C9.8031 1.65261 10.2005 1.65261 10.3381 1.93133L12.7571 6.83269L18.166 7.61866Z" fill="#333333"/>
+</svg>

src/assets/svg/star_fill.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.59783 1.06764C8.7629 0.733183 9.23983 0.733183 9.40489 1.06764L11.7566 5.83273L17.0152 6.59685C17.3843 6.65048 17.5317 7.10407 17.2646 7.36441L13.4594 11.0735L14.3577 16.3109C14.4208 16.6785 14.0349 16.9588 13.7048 16.7852L9.00136 14.3125L4.29794 16.7852C3.9678 16.9588 3.58196 16.6785 3.64501 16.3109L4.54328 11.0735L0.738132 7.36441C0.471049 7.10407 0.618429 6.65048 0.987528 6.59685L6.24612 5.83273L8.59783 1.06764Z" fill="#3D5EFF"/>
+</svg>

src/styles/var.scss

@@ -1,3 +1,4 @@
 :root{
   --border-color:#DCDFE6;
+  --red-color:#E83737;
 }

src/views/etaChart/Index.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref } from 'vue'
-import ClassifyWrapVue from "./components/ClassifyWrap.vue";
+import { ref, useTemplateRef } from 'vue'
+import ClassifyWrap from "./components/ClassifyWrap.vue";
 import ChartWrap from './components/ChartWrap.vue'
+import ChartList from './components/chartList/Index.vue'
 import { apiETAChart } from '@/api/etaChart'
 import {useClassify} from './hooks/useClassify'
 
@@ -29,6 +30,8 @@ const pageSize = 50
 let finished = false
 const tableData = ref([])
 const tableLoading = ref(false)
+const chartTotal=ref(0)
+const showChartNameWrap=ref(true)
 async function getTableData() {
   tableLoading.value = true
   const res = await apiETAChart.chartList({
@@ -42,10 +45,7 @@ async function getTableData() {
     const arr = res.Data.AllNodes || []
     tableData.value = [...tableData.value, ...arr]
     finished = res.Data.Paging.IsEnd
-    // 如果是获取第一页数组则默认选中第一个图表
-    if(res.Data.Paging.IsStart&&arr.length>0){
-      activeChartId.value=arr[0].ChartInfoId
-    }
+    chartTotal.value=res.Data.Paging.Totals
   }
 }
 getTableData()
@@ -57,12 +57,16 @@ function tableScroll(opt) {
   }
 }
 
+const chartListRef=useTemplateRef('chartListRef')
+
 function handleFilterList() {
   activeChartId.value=''
   tableData.value=[]
   finished=false
   page=1
   getTableData()
+  // 更新右侧图列表的数据
+  chartListRef.value.handleRefreshList()
   // 取消掉右侧图表
   activeChartId.value=''
 }
@@ -77,42 +81,34 @@ function handleSelectChart(item) {
 
 <template>
   <div class="eta-chart-page">
-    <ClassifyWrapVue @filter="handleFilterList" @change="handleSelectChart" />
-    <div class="table-wrap" v-loading="tableLoading">
-      <t-list style="height: 100%" :onScroll="tableScroll">
-        <table class="table-box" cellpadding="0" cellspacing="0">
-          <thead class="table-head thead-sticky">
-            <tr>
-              <td
-                v-for="opt in tableColOpts"
-                :key="opt.colKey"
-                :style="{ width: opt.width }"
-              >
-                {{ opt.title }}
-              </td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              :class="row.ChartInfoId === activeChartId ? 'active_row' : ''"
-              v-for="row in tableData"
-              :key="row.index"
-              @click="handleSelectChart(row)"
-            >
-              <td
-                v-for="opt in tableColOpts"
-                :key="opt.colKey"
-                :style="{ width: opt.width }"
-              >
-                {{ row[opt.colKey] }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+    <ClassifyWrap @filter="handleFilterList" @change="handleSelectChart" />
+    <div class="center-wrap">
+    <svg-icon name="show_arrow" class="show_chart_name_wrap_btn" v-if="!showChartNameWrap" @click="showChartNameWrap=true"></svg-icon>
+    <div :class="['flex chart-name-list-wrap',!showChartNameWrap?'chart-name-list-wrap_close':'']" v-loading="tableLoading">
+      <div class="flex top-box">
+        <span>所选图表</span>
+        <t-icon name="chevron-left-double" style="font-size:20px;cursor: pointer;" @click="showChartNameWrap=false"></t-icon>
+      </div>
+      <t-list class="list-content" :onScroll="tableScroll">
+        <li 
+          :class="['text-ellipsis--l1 chart-name',item.ChartInfoId === activeChartId ? 'active_row' : '']" 
+          v-for="item in tableData" 
+          :key="item.ChartInfoId"
+          @click="handleSelectChart(item)"
+        >{{item.ChartClassifyName}}</li>
         <empty-wrap v-if="tableData.length===0"/>
       </t-list>
+      <div class="flex bottom-box">
+        <span>共{{chartTotal}}张图表</span>
+        <span class="clear-btn" @click="activeChartId=''">清除选择</span>
+      </div>
+    </div>
+    </div>
+    <div class="right-wrap">
+      <ChartList ref="chartListRef"/>
+      <!-- 图表详情 -->
+      <ChartWrap :chartInfoId="activeChartId" v-if="activeChartId"/>
     </div>
-    <ChartWrap :chartInfoId="activeChartId"/>
   </div>
 </template>
 
@@ -120,40 +116,72 @@ function handleSelectChart(item) {
 .eta-chart-page {
   display: flex;
   gap: 0 20px;
-  .table-wrap {
-    flex-shrink: 0;
+
+  .center-wrap{
     height: calc(100vh - 120px);
-    .table-box {
-      width: 100%;
-      border-color: #dcdfe6;
-      td,
-      th {
-        word-break: break-all;
-        word-wrap: break-word;
-        border: 1px solid #dcdfe6;
-        height: 40px;
-        text-align: center;
-        border-left: none;
-        border-top: none;
-        &:first-child {
-          border-left: 1px solid #dcdfe6;
-        }
-      }
-      .thead-sticky {
-        position: sticky;
-        top: 0;
+    position: relative;
+  }
+  .show_chart_name_wrap_btn{
+    position: absolute;
+    top: 50%;
+    left: -36px;
+    transform: translateY(-50%);
+    font-size: 48px;
+    color: #D8D8D8;
+    cursor: pointer;
+  }
+  .chart-name-list-wrap {
+    background-color: #fff;
+    flex-shrink: 0;
+    width: 200px;
+    height: 100%;
+    flex-direction: column;
+    box-shadow: 0px 4px 12px 0px #2300351F;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    overflow: hidden;
+    transition: all .3s;
+    .top-box{
+      color: #666;
+      justify-content: space-between;
+      padding: 10px;
+      border-bottom: 1px solid var(--border-color);
+    }
+    .bottom-box{
+      color: #666;
+      justify-content: space-between;
+      padding: 10px;
+      border-top: 1px solid var(--border-color);
+      .clear-btn{
+        color: var(--red-color);
+        cursor: pointer;
       }
-      .table-head {
-        background-color: #ebeef5;
-        font-weight: bold;
+    }
+    .list-content{
+      flex: 1;
+      padding: 10px 0;
+      .chart-name{
+        padding: 0 10px;
+        line-height: 32px;
+        cursor: pointer;
       }
-      tbody {
-        color: #666;
-        .active_row{
-          background-color: #ECF5FF;
-        }
+      .active_row{
+        background-color: #F1EBFF;
+        color: var(--td-brand-color);
       }
     }
+    
+  }
+  .chart-name-list-wrap_close{
+    visibility: hidden;
+    width: 0;
+    overflow: auto;
+  }
+
+  .right-wrap{
+    min-width: 600px;
+    flex: 1;
+    position: relative;
   }
 }
 </style>

src/views/etaChart/components/ChartDetailPop.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { apiETAChart } from '@/api/etaChart'
+import { useChartRender } from '@/hooks/chart/render'
+
+const { options, axisLimitState, chartRender, setLimitData, isUseSelfLimit } = useChartRender()
+
+const show=defineModel('show',{type:Boolean,default:false})
+const props=defineProps({
+  chartInfoId:{
+    type:Number,
+    'default':0
+  }
+})
+
+
+const chartInfo = ref(null)
+const calendarType = ref('')
+const loading = ref(false)
+
+async function getChartDetail() {
+  loading.value = true
+  const res = await apiETAChart.chartDetail({
+    ChartInfoId: props.chartInfoId,
+    Calendar: calendarType.value,
+  })
+  loading.value = false
+  if (res.Ret === 200) {
+    chartInfo.value = res.Data.ChartInfo
+    calendarType.value = res.Data.ChartInfo.Calendar
+    //初始化上下限
+    isUseSelfLimit.value = true
+    setLimitData(res.Data)
+    nextTick(() => {
+      chartRender({
+        data: {
+          ...res.Data,
+          ChartInfo: {
+            ...res.Data.ChartInfo,
+            Calendar: calendarType.value || '公历'
+          },
+        },
+        renderId: `chart-detail-pop-box`,
+        // lang:currentLang.value,
+        changeLangIsCheck: false,
+        showChartTitle: true,
+        shouldUseSelfLimit: true,
+      })
+    })
+  }
+}
+
+watch(
+  ()=>show.value,
+  (n)=>{
+    if(n){
+      getChartDetail()
+    }
+  }
+)
+
+</script>
+
+<template>
+  <t-dialog
+    v-model:visible="show"
+    attach="body"
+    width="80vw"
+    :header="false"
+    :footer="false"
+    :closeBtn="false"
+    closeOnOverlayClick
+    destroyOnClose
+    class="chart-detail-pop-wrap"
+  >
+    <t-icon name="close" class="close-btn"></t-icon>
+    <div class="flex top-box">
+      <div class="chart-name">{{chartInfo?.ChartName}}</div>
+      <svg-icon name="star" style="font-size:20px;cursor: pointer;"></svg-icon>
+    </div>
+    <div class="chart-render-wrap" v-loading="loading">
+      <div class="chart-box" id="chart-detail-pop-box"></div>
+      <div style="text-align: center">
+        <!-- 季节图 公历农历切换 -->
+        <t-radio-group
+          variant="primary-filled"
+          v-model="calendarType"
+          @change="getChartDetail"
+          v-if="chartInfo?.ChartType === 2"
+        >
+          <t-radio-button value="公历">公历</t-radio-button>
+          <t-radio-button value="农历">农历</t-radio-button>
+        </t-radio-group>
+      </div>
+      <div class="chart-source" v-if="chartInfo">
+        <span
+          v-if="
+            chartInfo.SourcesFrom && JSON.parse(chartInfo.SourcesFrom).isShow
+          "
+          :style="`color: ${
+            JSON.parse(chartInfo.SourcesFrom).color
+          };fontSize: ${JSON.parse(chartInfo.SourcesFrom).fontSize}px;
+                          `"
+          >来源:{{ JSON.parse(chartInfo.SourcesFrom).text }}</span
+        >
+      </div>
+    </div>
+  </t-dialog>
+</template>
+
+<style lang="scss" scoped>
+.chart-detail-pop-wrap{
+  .close-btn{
+    position: absolute;
+    top: -20px;
+    right: -100px;
+  }
+  :global(.t-dialog__header){
+    display: none;
+  }
+  :global(.t-dialog__body){
+    padding: 0 !important;
+  }
+  .top-box{
+    padding: 22px 16px;
+    border-bottom: 1px solid var(--border-color);
+    .chart-name{
+      flex: 1;
+      font-size: 20px;
+      color: #333;
+    }
+  }
+  .chart-render-wrap{
+    height: 50vh;
+    padding: 34px 16px;
+    display: flex;
+    flex-direction: column;
+    .chart-box{
+      flex: 1;
+    }
+  }
+}
+</style>

src/views/etaChart/components/ChartWrap.vue

@@ -18,13 +18,11 @@ const props = defineProps({
 watch(
   () => props.chartInfoId,
   (n) => {
-    if (!n) {
-      tableData.value = []
-      intro.value = ''
-      chartInfo.value = null
-      return
-    }
-    calendarType.value=''
+    tableData.value = []
+    intro.value = ''
+    chartInfo.value = null
+    calendarType.value = ''
+    if (!n) return
     getChartDetail()
   }
 )
@@ -64,17 +62,19 @@ const tableData = ref([])
 const intro = ref('')
 const chartInfo = ref(null)
 const calendarType = ref('')
+const loading = ref(false)
 async function getChartDetail() {
-
+  loading.value = true
   const res = await apiETAChart.chartDetail({
     ChartInfoId: props.chartInfoId,
     Calendar: calendarType.value,
   })
+  loading.value = false
   if (res.Ret === 200) {
     tableData.value = res.Data.EdbInfoList || []
     intro.value = res.Data.ChartInfo.Description
     chartInfo.value = res.Data.ChartInfo
-    calendarType.value=res.Data.ChartInfo.Calendar
+    calendarType.value = res.Data.ChartInfo.Calendar
     //初始化上下限
     isUseSelfLimit.value = true
     setLimitData(res.Data)
@@ -84,18 +84,19 @@ async function getChartDetail() {
           ...res.Data,
           ChartInfo: {
             ...res.Data.ChartInfo,
-            Calendar: calendarType.value||'公历'
+            Calendar: calendarType.value || '公历'
           },
         },
-        renderId: 'chart-box',
+        renderId: 'chart-detail-box',
         // lang:currentLang.value,
         changeLangIsCheck: false,
         showChartTitle: true,
-        shouldUseSelfLimit:true,
+        shouldUseSelfLimit: true,
       })
     })
   }
 }
+getChartDetail()
 
 
 // 跳转指标溯源
@@ -114,79 +115,83 @@ function handleGoEdbSource(data) {
 </script>
 
 <template>
-  <div class="bg-white chart-wrap">
-    <template v-if="props.chartInfoId">
-      <div class="chart-render-wrap">
-        <div class="chart-box" id="chart-box"></div>
-        <div style="text-align: center">
-          <!-- 季节图 公历农历切换 -->
-          <t-radio-group
-            variant="primary-filled"
-            v-model="calendarType"
-            @change="getChartDetail"
-            v-if="chartInfo?.ChartType === 2"
-          >
-            <t-radio-button value="公历">公历</t-radio-button>
-            <t-radio-button value="农历">农历</t-radio-button>
-          </t-radio-group>
-        </div>
+  <div class="bg-white chart-wrap" v-loading="loading">
+    <div class="chart-render-wrap">
+      <div class="chart-box" id="chart-detail-box"></div>
+      <div style="text-align: center">
+        <!-- 季节图 公历农历切换 -->
+        <t-radio-group
+          variant="primary-filled"
+          v-model="calendarType"
+          @change="getChartDetail"
+          v-if="chartInfo?.ChartType === 2"
+        >
+          <t-radio-button value="公历">公历</t-radio-button>
+          <t-radio-button value="农历">农历</t-radio-button>
+        </t-radio-group>
+      </div>
 
-        <div class="chart-source" v-if="chartInfo">
-          <span
-            v-if="
-              chartInfo.SourcesFrom && JSON.parse(chartInfo.SourcesFrom).isShow
-            "
-            :style="`color: ${
-              JSON.parse(chartInfo.SourcesFrom).color
-            };fontSize: ${JSON.parse(chartInfo.SourcesFrom).fontSize}px;
+      <div class="chart-source" v-if="chartInfo">
+        <span
+          v-if="
+            chartInfo.SourcesFrom && JSON.parse(chartInfo.SourcesFrom).isShow
+          "
+          :style="`color: ${
+            JSON.parse(chartInfo.SourcesFrom).color
+          };fontSize: ${JSON.parse(chartInfo.SourcesFrom).fontSize}px;
                           `"
-            >来源:{{ JSON.parse(chartInfo.SourcesFrom).text }}</span
-          >
-        </div>
-      </div>
-      <div class="table-wrap">
-        <t-table
-          row-key="index"
-          :data="tableData"
-          :columns="columns"
-          bordered
-          hover
-          max-height="300"
-          cell-empty-content="-"
-          resizable
+          >来源:{{ JSON.parse(chartInfo.SourcesFrom).text }}</span
         >
-          <template #SourceName="{ row }">
-            <span>{{ row.SourceName }}</span>
-            <!-- 指标溯源 -->
-            <svg-icon
-              v-if="row.EdbType === 2"
-              style="
-                font-size: 20px;
-                cursor: pointer;
-                position: relative;
-                top: 5px;
-                color:#0052D9
-              "
-              name="edb_source"
-              @click="handleGoEdbSource(row)"
-            ></svg-icon>
-          </template>
-        </t-table>
       </div>
-      <div class="instructions-wrap" v-if="intro">
-        <p>逻辑简述:</p>
-        <p>{{ intro }}</p>
-      </div>
-    </template>
+    </div>
+    <div class="table-wrap">
+      <t-table
+        row-key="index"
+        :data="tableData"
+        :columns="columns"
+        bordered
+        hover
+        max-height="300"
+        cell-empty-content="-"
+        resizable
+      >
+        <template #SourceName="{ row }">
+          <span>{{ row.SourceName }}</span>
+          <!-- 指标溯源 -->
+          <svg-icon
+            v-if="row.EdbType === 2"
+            style="
+              font-size: 20px;
+              cursor: pointer;
+              position: relative;
+              top: 5px;
+              color: #0052d9;
+            "
+            name="edb_source"
+            @click="handleGoEdbSource(row)"
+          ></svg-icon>
+        </template>
+      </t-table>
+    </div>
+    <div class="instructions-wrap" v-if="intro">
+      <p>逻辑简述:</p>
+      <p>{{ intro }}</p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .chart-wrap {
-  flex: 1;
-  min-width: 600px;
+  min-height: 100%;
+  position: absolute;
+  z-index: 99;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
   border: 1px solid #dcdfe6;
   padding: 30px;
+  overflow: auto;
   .chart-render-wrap {
     margin-bottom: 20px;
     .chart-box {

src/views/etaChart/components/chartList/ChartBox.vue

@@ -0,0 +1,164 @@
+<script setup>
+import { apiETAChart } from '@/api/etaChart'
+import { useChartRender } from '@/hooks/chart/render'
+import { onUnmounted, useTemplateRef } from 'vue'
+import ChartDetailPop from '../ChartDetailPop.vue'
+
+const { options, axisLimitState, chartRender, setLimitData, isUseSelfLimit } = useChartRender()
+
+const props=defineProps({
+  chartData:{
+    type:Object,
+    default:()=>{}
+  },
+  index:{
+    type:Number,
+    default:0
+  }
+})
+
+
+const chartInfo = ref(null)
+const calendarType = ref('')
+const loading = ref(false)
+
+async function getChartDetail() {
+  loading.value = true
+  const res = await apiETAChart.chartDetail({
+    ChartInfoId: props.chartData.ChartInfoId,
+    Calendar: calendarType.value,
+  })
+  loading.value = false
+  if (res.Ret === 200) {
+    chartInfo.value = res.Data.ChartInfo
+    calendarType.value = res.Data.ChartInfo.Calendar
+    //初始化上下限
+    isUseSelfLimit.value = true
+    setLimitData(res.Data)
+    nextTick(() => {
+      chartRender({
+        data: {
+          ...res.Data,
+          ChartInfo: {
+            ...res.Data.ChartInfo,
+            Calendar: calendarType.value || '公历'
+          },
+        },
+        renderId: `chart-list-detail-box_${props.chartData.ChartInfoId}_${props.index}`,
+        // lang:currentLang.value,
+        changeLangIsCheck: false,
+        showChartTitle: true,
+        shouldUseSelfLimit: true,
+      })
+    })
+  }
+}
+
+
+let isVisible=false
+function handleIntersect(entries){
+  if (isVisible) return
+  entries.forEach(entry => {
+    // 判断是否在可视范围内
+    if (entry.isIntersecting) {
+      isVisible = true;
+      console.log('Component is visible');
+      // 在这里你可以执行其他操作，比如懒加载数据或图片等
+      getChartDetail()
+    }
+  });
+}
+
+// 监听组件是否到页面可视区域再加载图表
+let observer=null
+const compRef=useTemplateRef('compRef')
+function createObserver(){
+  const options = {
+    root: null, // 使用浏览器可视区域为根
+    threshold: 0.1, // 当至少10%的内容进入可视区时触发回调
+  };
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(compRef.value); // 监听组件
+}
+
+onMounted(()=>{
+  createObserver()
+})
+onUnmounted(()=>{
+  if(observer){
+    observer.disconnect();
+  }
+})
+
+
+const showChartDetailPop=ref(false)
+
+</script>
+
+<template>
+  <div class="flex chart-list-item-box" ref="compRef">
+    <div class="flex top-box">
+      <div class="text-ellipsis--l1 title">{{props.chartData.ChartClassifyName}}</div>
+      <svg-icon name="star" style="font-size:20px;cursor: pointer;"></svg-icon>
+      <svg-icon name="full_screen" style="font-size:20px;margin-left:20px;cursor: pointer;" @click="showChartDetailPop=true"></svg-icon>
+    </div>
+    <div class="chart-render-wrap" v-loading="loading">
+      <div class="chart-box" :id="`chart-list-detail-box_${props.chartData.ChartInfoId}_${props.index}`"></div>
+      <div style="text-align: center">
+        <!-- 季节图 公历农历切换 -->
+        <t-radio-group
+          variant="primary-filled"
+          v-model="calendarType"
+          @change="getChartDetail"
+          v-if="chartInfo?.ChartType === 2"
+        >
+          <t-radio-button value="公历">公历</t-radio-button>
+          <t-radio-button value="农历">农历</t-radio-button>
+        </t-radio-group>
+      </div>
+      <div class="chart-source" v-if="chartInfo">
+        <span
+          v-if="
+            chartInfo.SourcesFrom && JSON.parse(chartInfo.SourcesFrom).isShow
+          "
+          :style="`color: ${
+            JSON.parse(chartInfo.SourcesFrom).color
+          };fontSize: ${JSON.parse(chartInfo.SourcesFrom).fontSize}px;
+                          `"
+          >来源:{{ JSON.parse(chartInfo.SourcesFrom).text }}</span
+        >
+      </div>
+    </div>
+  </div>
+
+  <!-- 图表详情弹窗 -->
+  <ChartDetailPop v-model:show="showChartDetailPop" :chartInfoId="chartInfo?.ChartInfoId"/>
+</template>
+
+<style lang="scss" scoped>
+.chart-list-item-box{
+  width: calc(50% - 10px);
+  height: 474px;
+  background-color: #fff;
+  box-shadow: 0px 4px 12px 0px #2300351f;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  flex-direction: column;
+  .top-box{
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border-color);
+    .title{
+      flex: 1;
+    }
+  }
+  .chart-render-wrap{
+    flex: 1;
+    padding: 10px 14px;
+    display: flex;
+    flex-direction: column;
+    .chart-box{
+      flex: 1;
+    }
+  }
+}
+</style>

src/views/etaChart/components/chartList/Index.vue

@@ -0,0 +1,85 @@
+<script setup>
+import ChartBox from './ChartBox.vue'
+import { apiETAChart } from '@/api/etaChart'
+import {useClassify} from '../../hooks/useClassify'
+
+const {classifyActived,userVal} =useClassify()
+
+const page=ref(1)
+const pageSize=ref(30)
+const total=ref(0)
+const list=ref([])
+async function getTableData() {
+  const res = await apiETAChart.chartList({
+    PageSize: pageSize.value,
+    CurrentIndex: page.value,
+    ChartClassifyId:classifyActived.value[0]?classifyActived.value[0]:0,
+    SysUserIds:userVal.value?.join(',')||''
+  })
+  if (res.Ret === 200) {
+    const arr = res.Data.AllNodes || []
+    list.value = arr
+    total.value=res.Data.Paging.Totals
+  }
+}
+getTableData()
+
+function handlePageChange({current}){
+  page.value=current
+  list.value=[]
+  getTableData()
+}
+
+function handleRefreshList(){
+  page.value=1
+  total.value=0
+  list.value=[]
+  getTableData()
+}
+
+defineExpose({
+  handleRefreshList
+})
+
+
+</script>
+
+<template>
+  <div class="chart-render-detail-list">
+    <div class="flex list-wrap">
+      <ChartBox 
+        v-for="item,index in list" 
+        :key="item.ChartInfoId"
+        :chartData="item"
+        :index="index"
+      />
+    </div>
+    <t-pagination
+      style="margin-top:20px"
+      :current="page"
+      :pageSize="pageSize"
+      :total="total" 
+      :totalContent="false" 
+      :showPageSize="false"
+      @change="handlePageChange" 
+      v-if="total"
+    />
+    <empty-wrap v-if="list.length===0"/>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-render-detail-list {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  position: absolute;
+  z-index: 50;
+  left: 0;
+  top: 0;
+  .list-wrap {
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+}
+</style>