eta_chart_front/src/views/sheetShow/index.vue

<script setup lang='ts'>
import { ref, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { SheetApi } from '@/request/api';
import sheet from '@/components/sheet.vue'
import { IUnknowObject } from '@/types';
import { ElMessage } from 'element-plus';

const route = useRoute();
const code = ref(route.query.code || '')

// route.query.fromScene 1智能研报 2研报列表 3英文研报

interface InfoType extends IUnknowObject {
  ExcelName: string;
  TableInfo: any;
  ExcelImage: string;
  UniqueCode: string;
}
const showData = ref(false);
const info = ref<InfoType|any>({});
const loading = ref(false);


const setDefaultSource=(sourceText:string)=>{
  return JSON.stringify({
    isShow: true,
    text: sourceText,
    color: "#606266",
    fontSize: 9
  })
}

const getInfo = async(type='') => {
  loading.value = true;
  const { Data,Ret } = await SheetApi.getInfo({  UniqueCode: code.value, FromScene: Number(route.query.fromScene||'') });
  
  loading.value = false;
  if(Ret !== 200) return

  info.value = Data;
  if(!info.value.SourcesFrom){
    info.value.SourcesFrom = Data.ExcelSource?setDefaultSource(Data.ExcelSource):''
  }
  showData.value = true; 
  type==='refresh'&&ElMessage.success('刷新成功')
  nextTick(() => {
    let ele = document.getElementsByClassName('sheet-show-wrapper')[0] as HTMLElement;

    let params = {
      height: ele.offsetHeight,
      code: info.value.UniqueCode
    }
  
    window.parent.postMessage(params,'*')

  })

}
getInfo()

const refreshSheet = async()=>{
    loading.value = true;
    let res: any=null;
    res = await SheetApi.refreshInfo({UniqueCode: code.value})
    if(res.Ret!==200) return 
    loading.value = false;
    getInfo('refresh')
}

</script>

<template>
  <div 
    v-if="showData"
    class="sheet-show-wrapper"  
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    element-loading-text="加载中..."
  >
    <h3 class="title">{{info.ExcelName}}</h3>
    
    <sheet :data="info.TableInfo.TableDataList" :config="info.Config"/>
    <div class="tool sheet-bottom">
      <div class="sheet-source" 
        v-if="info.SourcesFrom&&JSON.parse(info.SourcesFrom).isShow"
        :style="`
            color: ${ JSON.parse(info.SourcesFrom).color };
            font-size: ${ JSON.parse(info.SourcesFrom).fontSize }px;
        `"
      >
          source：<em>{{ JSON.parse(info.SourcesFrom).text}}</em>
      </div>
      <!-- 占位 -->
      <div v-else></div>
      <span @click="refreshSheet" style="color: #666;">刷新</span>
    </div>
  </div>
</template>

<style lang='less' scoped>
.sheet-show-wrapper {
  max-width: 1200px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: #fff;
  .title {
    font-size: 17px;
    font-weight: normal;
    padding: 0 10px;
    // text-align: center;
    margin-bottom: 8px;
  }
  .tool{
    // text-align: right;
    margin-top: 5px;
    span{
        cursor: pointer;
    }
  }
  .sheet-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    padding: 0 10px;
    .sheet-source{
      width: 30%;
      min-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>