表格显示兼容

src/components/sheet.vue

@@ -0,0 +1,116 @@
+<script setup lang='ts'>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<any[]>,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+<div class="table-wrapper">
+  <table cellpadding="0" cellspacing="0">
+    <thead>
+      <tr class="th">
+        <td 
+          class="head-column" 
+          v-for="(item,index) in props.data[0]" 
+          :key="index"
+          :colspan="item.mc.cs||1"
+          :rowspan="item.mc.rs||1"
+        >
+          {{item.m}}
+        </td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr 
+        v-for="(item,index) in props.data.slice(1)"
+        :key="index"
+      >
+        <td 
+          :class="['data-cell',{'one-bg':index%2, 'tow-bg': index%2!==0}]"
+          v-for="(cell,cell_index) in item"
+          :key="`${index}_${cell_index}`"
+          :colspan="cell.mc.cs||1"
+          :rowspan="cell.mc.rs||1"
+        >
+          {{cell.m}}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+</template>
+
+<style lang='less' scoped>
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: rgb(239, 239, 239);
+  border-radius: 2px;
+}
+::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #888;
+}
+::-webkit-scrollbar-corner {
+  background: #666;
+}
+.table-wrapper {
+  max-width: calc(100vw - 20px);
+  margin: 0 auto;
+  // margin-right: -5px;
+  overflow: hidden;
+  overflow-x: auto;
+}
+table {
+  width: 100%;
+  font-size: 14px;
+  color: #666;
+  td,
+  th {
+    width: 120px;
+    min-width: 120px;
+    // word-break: break-all;
+    border: 1px solid #dcdfe6;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    background-color: #fff;
+    border-left: none;
+    border-top: none;
+    &:first-child {
+			border-left: 1px solid #dcdfe6;
+		}
+  }
+
+  .head-column {
+    background-color: #505B78;
+    color: #fff;
+  }
+
+  .data-cell{
+    color: #666;
+    &.one-bg {
+      background-color: #EFEEF1;
+    }
+    &.two-bg {
+      background-color: #fff;
+    }
+  }
+
+  .thead-sticky {
+    position: sticky;
+    top: 0;
+  }
+}
+</style>

src/request/api.ts

@@ -7,7 +7,7 @@ interface IRefreshParams {
 	UniqueCode: string;
 }
 
-/* 用户模块 */
+/* 图表模块 */
 export const ChartApi = {
 	/**
 	 * 获取图表详情
@@ -26,3 +26,18 @@ export const ChartApi = {
 		return get('/chart/refresh',params)
 	}
 }
+
+/* 表格模块 */
+interface IExcelParams {
+	UniqueCode: string | any
+}
+export const SheetApi = {
+	/**
+	 * 获取表格详情
+	 * @param params  UniqueCode
+	 * @returns 
+	 */
+	getInfo: (params: IExcelParams) => {
+		return get('/excel_info/detail',params);
+	}
+}

src/router/index.ts

@@ -18,6 +18,11 @@ export const routes: AppRouteRecordRaw[] = [
     component: () => import('@/views/chartShow/index.vue'),
     name: '图表详情',
   },
+  {
+    path: '/sheetshow',
+    component: () => import('@/views/sheetShow/index.vue'),
+    name: '图表详情',
+  },
 ];
 
 const router = createRouter({

src/views/chartShow/index.vue

@@ -1,33 +1,3 @@
-<!--  -->
-<template>
-  <div class="chart-show">
-    <header class="chart-header" @click="openNew">
-      <span class="chart-title" @click.stop @dblclick="copyText">{{ chartInfo.ChartName }}</span>
-    </header>
-    <template v-if="haveData">
-      <div
-        class="chart-wrapper"
-        id="chart-wrapper"
-        v-loading="loading"
-        element-loading-spinner="el-icon-loading"
-        element-loading-text="加载中..."
-      >
-        <chart :options="options" :chartId="chartInfo.ChartInfoId || 0" />
-        <div class="mark"></div>
-      </div>
-    </template>
-    <div class="chart-wrapper notfound" v-else>
-      <i class="el-icon-warning"></i>哎吆，你的图飞了，赶快去找管理员救命吧~
-    </div>
-    <div class="bootom-source">
-      <strong style="flex-shrink: 0;">source:  <em> {{sourceName}}弘则研究</em></strong>
-      <ul class="right-action" @click.stop>
-        <li @click="copyUrl" class="copy" v-if="isShare"><i class="el-icon-share"/>分享</li>
-        <li @click="refreshChart"><i class="el-icon-refresh"/>刷新</li>
-      </ul>
-    </div>
-  </div>
-</template>
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue';
@@ -834,6 +804,38 @@ export default defineComponent({
   },
 });
 </script>
+
+<!--  -->
+<template>
+  <div class="chart-show">
+    <header class="chart-header" @click="openNew">
+      <span class="chart-title" @click.stop @dblclick="copyText">{{ chartInfo.ChartName }}</span>
+    </header>
+    <template v-if="haveData">
+      <div
+        class="chart-wrapper"
+        id="chart-wrapper"
+        v-loading="loading"
+        element-loading-spinner="el-icon-loading"
+        element-loading-text="加载中..."
+      >
+        <chart :options="options" :chartId="chartInfo.ChartInfoId || 0" />
+        <div class="mark"></div>
+      </div>
+    </template>
+    <div class="chart-wrapper notfound" v-else>
+      <i class="el-icon-warning"></i>哎吆，你的图飞了，赶快去找管理员救命吧~
+    </div>
+    <div class="bootom-source">
+      <strong style="flex-shrink: 0;">source:  <em> {{sourceName}}弘则研究</em></strong>
+      <ul class="right-action" @click.stop>
+        <li @click="copyUrl" class="copy" v-if="isShare"><i class="el-icon-share"/>分享</li>
+        <li @click="refreshChart"><i class="el-icon-refresh"/>刷新</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="less">
 @import './index.less';
 </style>

src/views/sheetShow/index.vue

@@ -0,0 +1,74 @@
+<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';
+
+const route = useRoute();
+const code = ref(route.query.code || '')
+
+interface IInfoType extends IUnknowObject {
+  ExcelName: string;
+  TableInfo: any;
+  ExcelImage: string;
+  UniqueCode: string;
+}
+const showData = ref(false);
+const info = ref<IInfoType|any>({});
+const loading = ref(false);
+const getInfo = async() => {
+  loading.value = true;
+  const { Data } = await SheetApi.getInfo({  UniqueCode: code.value});
+  info.value = Data;
+
+  loading.value = false;
+  showData.value = true;
+
+  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()
+
+
+</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"/>
+  </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;
+    text-align: center;
+    margin-bottom: 8px;
+  }
+}
+</style>