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:
@@ -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) {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 数据到现有配置中
|
||||||
|
|||||||
@@ -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" />
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user