From 37c0cff959666bec23d2a912a02a5b32b92e1719 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Mon, 26 May 2025 20:32:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=96=B0=E5=A2=9E=20YlTabl?=
 =?UTF-8?q?eH=20=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=B1=95=E7=A4=BA-=20=E6=96=B0=E5=A2=9E=20YlTableH?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81=E6=A8=AA=E5=90=91?=
 =?UTF-8?q?=E6=BB=91=E5=8A=A8=E5=92=8C=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20-=20=E4=BF=AE=E6=94=B9=20IntelligentGenera?=
 =?UTF-8?q?tion=20=E7=BB=84=E4=BB=B6=E4=B8=AD=E7=9A=84=20API=20=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8=E5=9C=B0=E5=9D=80=20-=20=E6=9B=B4=E6=96=B0=20Analysis?=
 =?UTF-8?q?Info=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BD=BF=E7=94=A8=E6=96=B0?=
 =?UTF-8?q?=E7=9A=84=20YlTableH=E7=BB=84=E4=BB=B6=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E5=8E=9F=E6=9C=89=E7=9A=84=20YlTable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/YlTable/yl-table-h.vue         | 130 ++++++++++++++++++
 .../components/AnalysisInfo/Index.vue         |  19 ++-
 2 files changed, 145 insertions(+), 4 deletions(-)
 create mode 100644 src/components/YlTable/yl-table-h.vue

diff --git a/src/components/YlTable/yl-table-h.vue b/src/components/YlTable/yl-table-h.vue
new file mode 100644
index 0000000..000a653
--- /dev/null
+++ b/src/components/YlTable/yl-table-h.vue
@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { showImagePreview } from 'vant';
+
+const prop = defineModel<any[]>('prop');
+const data = defineModel<any[]>('data');
+const tableWidth = ref(0);
+const doc_content = ref();
+let startX = 0;
+const isHorizontal = ref(false);
+
+function handleTouchStart(event: TouchEvent) {
+  startX = event.touches[0].clientX;
+  isHorizontal.value = false;
+}
+function handleImageClick(e: Event) {
+  if (e.target instanceof HTMLImageElement) {
+    const imgSrc = e.target.src;
+    showImagePreview({
+      images: [imgSrc],
+      closeable: true
+    });
+  }
+}
+function handleTouchMove(event: TouchEvent) {
+  const deltaX = event.touches[0].clientX - startX;
+
+  // 如果是横向滑动，则阻止冒泡
+  if (Math.abs(deltaX) > 10) {
+    isHorizontal.value = true;
+    event.stopPropagation(); // 阻止事件冒泡到 van-swipe
+  }
+}
+watch(
+  () => data.value,
+  (newVal) => {
+    tableWidth.value = prop.value.length * 100;
+    //   tableWidth.value 判断是否铺满横屏 没有就铺满
+    let docWidth = document.documentElement.clientWidth;
+    console.log(docWidth);
+    if (docWidth - tableWidth.value > 100) {
+      tableWidth.value = docWidth;
+      console.log(tableWidth.value);
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <div
+    style="overflow: auto; width: 100%"
+    ref="doc_content"
+    @touchstart="handleTouchStart"
+    @touchmove="handleTouchMove"
+  >
+    <div
+      :style="{
+        width: tableWidth + 'px',
+        overflow: 'auto'
+      }"
+    >
+      <table style="width: 100%; text-align: center; border: none" class="el-table">
+        <thead class="tableThead el-table__header">
+          <tr>
+            <th v-for="item in prop" class="el-table__cell">
+              <div class="cell" style="font-size: 13px">{{ item.label }}</div>
+            </th>
+          </tr>
+        </thead>
+        <tr v-for="(item, index) in data" :key="index">
+          <template v-for="(t, index) in prop">
+            <td :key="index" v-if="item[index] !== '未知行'" class="el-table__cell">
+              <div
+                class="cell table-view-html"
+                v-html="item[t.prop]"
+                v-if="item[index] !== '未知行'"
+                @click="handleImageClick"
+              ></div>
+            </td>
+          </template>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<style>
+.table-view-html {
+  img {
+    width: 50px;
+    height: 100%;
+    margin-right: 10px;
+  }
+}
+</style>
+<style scoped lang="scss">
+.tableThead {
+  background: #f2f8ee;
+  font-size: 12px;
+
+  & tr {
+    background: #f2f8ee;
+    font-size: 12px;
+    & th {
+      background: #f2f8ee;
+      font-size: 10px;
+    }
+  }
+}
+table {
+  border-collapse: collapse; // 合并边框
+  border-spacing: 0; // 清除默认间距
+  margin: 0;
+  padding: 0;
+  border-radius: 8px;
+  & tr {
+    padding: 10px;
+  }
+}
+//.table-view-html {
+//  display: flex;
+//  //align-items: center;
+//  flex-direction: row;
+//
+//
+//}
+</style>
diff --git a/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue b/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue
index cd13eba..5fff11c 100644
--- a/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue
+++ b/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue
@@ -18,6 +18,9 @@
       </div>
 
       <!-- 问题图表部分 -->
+      <!-- 问题图表部分 -->
+      <!--       表格td宽度固定  超出部分滚动-->
+
       <div v-if="questionTypeMap.get(analysis.question_type as number)">
         <chart-msg
           v-if="showChart.includes(analysis.question_type)"
@@ -26,12 +29,19 @@
         />
 
         <!-- 问题表格部分 -->
-        <yl-table
-          v-if="getTableData(analysis).length > 0"
+        <yl-table-h
           class="mt10"
-          :props="getTableHeadProps(analysis.head, analysis.option)"
+          v-if="getTableData(analysis).length > 0"
+          :prop="getTableHeadProps(analysis.head, analysis.option)"
           :data="getTableData(analysis)"
-        />
+        ></yl-table-h>
+        <!--        <yl-table-->
+        <!--          v-if="getTableData(analysis).length > 0"-->
+        <!--          class="mt10"-->
+        <!--          :props="getTableHeadProps(analysis.head, analysis.option)"-->
+        <!--          :data="getTableData(analysis)"-->
+        <!--        />-->
+
         <section v-else>
           <empty-container :error-msg="'本题暂无有效答题数据'" :img-src="emptyImg" />
         </section>
@@ -58,6 +68,7 @@ import { questionTypeMap } from '@/utils/question/typeMapping';
 import ChartMsg from '@/components/Analysis/Index.vue';
 import { getTableData } from './hooks/pieSeries';
 import YlTable from '@/components/YlTable/Index.vue';
+import YlTableH from '@/components/YlTable/yl-table-h.vue';
 import { ref } from 'vue';
 import { screenLayout } from '@/hooks/browser/useScreen';
 import emptyImg from '@/assets/img/emptyImg.png';