Merge branch 'feature/feature-20250430-h5' of https://e.coding.yili.com/yldc/ylst/ylst-survey-h5 into feature/feature-20250430-h5

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>

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
+        <yl-table-h
-          v-if="getTableData(analysis).length > 0"
           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';