Merge branch 'chart8.3'

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="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/reset.css

@@ -19,9 +19,6 @@ body {
 	
 }
 /* 禁用iPhone中Safari的字号自动调整 */
-html {
-	overflow:hidden;
-}
 a {
 	text-decoration: none;
 	color: #000;

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/sheetShow/index.vue

@@ -0,0 +1,77 @@
+<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,Ret } = await SheetApi.getInfo({  UniqueCode: code.value});
+  
+  loading.value = false;
+  if(Ret !== 200) return
+
+  info.value = Data;
+  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;
+    padding: 0 10px;
+    // text-align: center;
+    margin-bottom: 8px;
+  }
+}
+</style>