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

This commit is contained in:
Huangzhe
2025-05-27 14:47:58 +08:00
7 changed files with 49 additions and 25 deletions

View File

@@ -11,7 +11,9 @@ import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
const tableData = ref([]); const tableData = ref([]);
const analysis = defineModel<any>('analysis'); const analysis = defineModel<any>('analysis');
// series 信息 // console.log('analysis', analysis.value);
const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
const series = ref([]); const series = ref([]);
const dimension = defineModel('dimension'); const dimension = defineModel('dimension');
// 图标高度 // 图标高度
@@ -22,14 +24,11 @@ const chartHeight = computed(() => {
// 做一些额外的检测, 如果 option 下面的title 字段超过 8 个,就把 addHeight 增加 // 做一些额外的检测, 如果 option 下面的title 字段超过 8 个,就把 addHeight 增加
analysis.value?.option?.forEach((item: any) => { analysis.value?.option?.forEach((item: any) => {
console.log(item);
if (item.title?.length > 8) { if (item.title?.length > 8) {
addHeight += 2; addHeight += 9;
} }
}); });
console.log(`addHeight`, addHeight);
// 每三个选项高度增加 20px 默认 300px // 每三个选项高度增加 20px 默认 300px
return dimension.value ? 280 : 280 + addHeight; return dimension.value ? 280 : 280 + addHeight;
}); });
@@ -45,14 +44,16 @@ watch(
option: getTableData(analysis.value) option: getTableData(analysis.value)
}; };
// console.log(`tableData.value`, tableData.value); // console.log(`图标的高度是`, chartHeight.value);
series.value = formatData(dimension.value ? tableData.value : analysis.value, index.value); series.value = formatData(dimension.value ? tableData.value : analysis.value, index.value);
// console.log(`series value`, series.value); // console.log(`series value`, series.value);
const pieChart = useTemplateRef<HTMLSpanElement>('pieChart'); const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
if (!series.value?.data?.length) return; if (series.value.data.length <= 0) {
series.value.data = [{ value: -1, name: '' }];
}
useSetPieChart(pieChart, series, { title: false, legend: false }); useSetPieChart(pieChart, series, { title: false, legend: false });
}, },
{ immediate: true } { immediate: true }
@@ -65,9 +66,8 @@ const changeChart = (i: number) => {
// console.log(`series value. by changeChart`, series.value); // console.log(`series value. by changeChart`, series.value);
if (series.value.data.length <= 0) { if (series.value.data.length <= 0) {
series.value.data = [{ value: 0, name: 0 }]; series.value.data = [{ value: -1, name: '' }];
} }
// const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
// useSetPieChart(pieChart, series, { title: false, legend: false }); // useSetPieChart(pieChart, series, { title: false, legend: false });
}; };
@@ -87,7 +87,7 @@ const chartVisible = computed(() => {
const data = series.value?.data as { name: any; value: any }[]; const data = series.value?.data as { name: any; value: any }[];
// 过滤后的 data 数据, // 过滤后的 data 数据,
const filterData = data.filter((item) => item.value != 0 && item.name != 0); const filterData = data.filter((item) => item.value !== -1 && item.name != "");
return filterData.length; return filterData.length;
// series.value?.data.forEach((item: any`1[]) => { // series.value?.data.forEach((item: any`1[]) => {
// if (item.value > 0) { // if (item.value > 0) {

View File

@@ -4,13 +4,13 @@ const content = defineModel<{ row: any; column: any; cellValue: any }>('content'
<template> <template>
<div class="tooltip-content"> <div class="tooltip-content">
<span v-html="content?.row?.text"></span> <span v-html="content?.cellValue"></span>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.tooltip-content { .tooltip-content {
width: 90vw; max-width: 80vw;
max-height: 45vh; max-height: 45vh;
overflow: scroll; overflow: scroll;
} }

View File

@@ -35,10 +35,14 @@ watch(
() => data.value, () => data.value,
(newVal) => { (newVal) => {
tableWidth.value = prop.value.length * 100; tableWidth.value = prop.value.length * 100;
// tableWidth.value 判断是否铺满横屏 没有就铺满 if (prop.value.length <= 3) {
let docWidth = document.documentElement.clientWidth; // tableWidth.value 判断是否铺满横屏 没有就铺满
if (docWidth - tableWidth.value > 100) { tableWidth.value = document.documentElement.clientWidth - 60;
tableWidth.value = docWidth; } else {
tableWidth.value =
document.documentElement.clientWidth - 60 - prop.value.length * 100 > 0
? document.documentElement.clientWidth
: prop.value.length * 100;
} }
}, },
{ {
@@ -93,6 +97,12 @@ watch(
margin-right: 10px; margin-right: 10px;
} }
} }
.el-table--fit .el-table__inner-wrapper:before {
width: 0;
}
.el-table__empty-text {
font-size: 13px;
}
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
.tableThead { .tableThead {

View File

@@ -21,7 +21,11 @@ function useSetPieChart(
if (!dom.value && !series) return; if (!dom.value && !series) return;
// 在 dom 挂载之后,显示饼图 // 在 dom 挂载之后,显示饼图
chartInstance = chart.init(dom.value); // 在 dom 挂载之后,显示饼图
if (!chartInstance) {
chartInstance = chart.init(dom.value);
}
// chartInstance = chartInstance ? chartInstance : chart.init(dom.value);
pieOption.series = JSON.parse(JSON.stringify(series.value)); pieOption.series = JSON.parse(JSON.stringify(series.value));
// 设置图表选项 // 设置图表选项
chartInstance.setOption(pieOption, opts); chartInstance.setOption(pieOption, opts);
@@ -29,6 +33,8 @@ function useSetPieChart(
// 如果 data 变动重新生成图表w // 如果 data 变动重新生成图表w
watch(series, (value) => { watch(series, (value) => {
console.log(chartInstance);
const currentOptions = chartInstance.getOption(); const currentOptions = chartInstance.getOption();
// 合并新的 series 数据到现有配置中 // 合并新的 series 数据到现有配置中

View File

@@ -53,11 +53,7 @@ const slideChange = function (swiper: any) {
:allow-touch-move="false" :allow-touch-move="false"
> >
<swiper-slide v-for="(analysis, index) in questionAnalysis" :key="analysis.stem"> <swiper-slide v-for="(analysis, index) in questionAnalysis" :key="analysis.stem">
<analysis-info <analysis-info :sn="survey?.sn" :questionAnalysis="[analysis]" :parentIndex="index + 1" />
:sn="survey?.sn"
:questionAnalysis="[analysis]"
:parentIndex="[index + 1]"
/>
</swiper-slide> </swiper-slide>
<div class="empty-container" v-if="questionAnalysis?.length === 0"> <div class="empty-container" v-if="questionAnalysis?.length === 0">
<empty-container :error-msg="'本问卷暂无有效答题数据'" :img-src="emptyImg" /> <empty-container :error-msg="'本问卷暂无有效答题数据'" :img-src="emptyImg" />

View File

@@ -37,9 +37,9 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<div class="search"> <!-- <div class="search">-->
<search-bar placeholder="请输入关键词" v-if="!disableSearch" :value="''" /> <!-- <search-bar placeholder="请输入关键词" v-if="!disableSearch" :value="''" />-->
</div> <!-- </div>-->
<section v-if="currentSurvey" class="survey-container"> <section v-if="currentSurvey" class="survey-container">
<!-- 问卷详情部分 --> <!-- 问卷详情部分 -->
<van-cell class="survey-item"> <van-cell class="survey-item">

View File

@@ -74,8 +74,20 @@ const debug = ref(false);
<yl-table <yl-table
:data="currentTabs.find((tab) => tab.title === activeTab)?.data" :data="currentTabs.find((tab) => tab.title === activeTab)?.data"
:props="currentTabs.find((tab) => tab.title === activeTab)?.props" :props="currentTabs.find((tab) => tab.title === activeTab)?.props"
:emptyText="`此问卷未设置${activeTab}`"
></yl-table> ></yl-table>
</section> </section>
</template> </template>
</van-cell> </van-cell>
</template> </template>
<style scoped lang="scss">
.logic-info {
&::after {
content: '';
border: none;
left: 0;
width: 0;
}
}
</style>