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-26 14:29:56 +08:00
3 changed files with 128 additions and 85 deletions

View File

@@ -123,7 +123,7 @@ function tooptipFormatter(data: { row: any; column: any; cellValue: any }): VNod
:row-class-name="setStripeColor"
:data="data"
:empty-text="emptyText"
style="width: 100%; padding-right: 10px"
style="width: 100%"
>
<el-table-column
v-for="item in props"

View File

@@ -18,6 +18,23 @@ const store = storeToRefs(counterStore as any);
const limit = defineModel<number>('limit');
const currentTemplate = computed(() => templates.value.slice(0, limit.value));
function handleTemplateClick(template: any) {
// ?sn=4O5xanLV&is_template=1&source=4O5xanLV&title=报名签到&parentCode=1&scene_code_info=11&user=苗闻博&quote_nums=3
router.push({
path: '/templatePreview',
query: {
sn: template.sn,
user: template.creater_user,
is_template: 1,
source: template.sn,
title: template.title,
parentCode: template.parentCode,
scene_code_info: template.scene_code_info,
quote_nums: template.quote_nums
}
});
return;
const query = {
group_id: 0,
source: 1,

View File

@@ -1,84 +1,110 @@
<template>
<div style="width: 100%">
<!-- 优先去上级传递的数值 -->
<section v-for="analysis in questionAnalysis" :key="analysis.stem" class="mt10">
<!-- {{ analysis }} -->
<!-- 问题标题 -->
<el-tag type="success" size="small">
{{ questionTypeMap.get(analysis.question_type as number) }}
</el-tag>
<el-text>{{ analysis.stem }}</el-text>
<!-- 问题图表部分 -->
<chart-msg
v-if="showChart.includes(analysis.question_type)"
:dimension="analysis.option && analysis.option[0]?.option"
:analysis="analysis"
/>
<!-- 问题表格部分 -->
<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>
</section>
<!-- <section v-else>
<empty-container />
</section> -->
</div>
</template>
<script setup lang="ts">
// 空白容器
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
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 { ref } from 'vue';
import { screenLayout } from '@/hooks/browser/useScreen';
import emptyImg from '@/assets/img/emptyImg.png';
// questionTypeMap 自己去对应
const showChart = ref([1, 2, 5, 106, 9, 10]);
// 接受上级传递的 questionAnalysis 数据
const questionAnalysis = defineModel<any[]>('questionAnalysis');
const { width } = screenLayout();
// 构建表头
const getTableHeadProps = (values: any[], option: any[]): TablePropsType[] => {
const head = [];
if (values && values.length > 0) {
values.forEach((item: any) => {
if (item.key !== 'option') {
head.push({
label: item.title,
prop: item.key,
width: values.length < 4 ? width.value / values.length : 100
});
}
});
}
if (option.length > 0 && option[0].option) {
head.unshift({
label: '选项',
prop: 'option',
width: 150
});
}
return head;
};
</script>
<style scoped lang="scss">
.mt10 {
margin-top: 10px;
}
</style>
<template>
<div style="width: 100%">
<!-- 优先去上级传递的数值 -->
<section v-for="analysis in questionAnalysis" :key="analysis.stem" class="mt10">
<!-- {{ analysis }} -->
<!-- 问题标题 -->
<div class="flex align-center">
<el-tag type="success" size="small">
{{
questionTypeMap.get(analysis.question_type as number)
? questionTypeMap.get(analysis.question_type as number)
: analysis.title
}}
</el-tag>
<el-text class="ml10">{{ analysis.stem }}</el-text>
</div>
<!-- 问题图表部分 -->
<div v-if="questionTypeMap.get(analysis.question_type as number)">
<chart-msg
v-if="showChart.includes(analysis.question_type)"
:dimension="analysis.option && analysis.option[0]?.option"
:analysis="analysis"
/>
<!-- 问题表格部分 -->
<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>
</div>
<div v-else>
<!-- <empty-container img-src=" ">-->
<!-- <template #description>-->
<div class="empty-text">当前题型不在移动端中展示请前往PC端进行查看</div>
<!-- </template>-->
<!-- </empty-container>-->
</div>
</section>
<!-- <section v-else>
<empty-container />
</section> -->
</div>
</template>
<script setup lang="ts">
// 空白容器
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
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 { ref } from 'vue';
import { screenLayout } from '@/hooks/browser/useScreen';
import emptyImg from '@/assets/img/emptyImg.png';
// questionTypeMap 自己去对应
const showChart = ref([1, 2, 5, 106, 9, 10]);
// 接受上级传递的 questionAnalysis 数据
const questionAnalysis = defineModel<any[]>('questionAnalysis');
const { width } = screenLayout();
// 构建表头
const getTableHeadProps = (values: any[], option: any[]): TablePropsType[] => {
const head = [];
if (values && values.length > 0) {
values.forEach((item: any) => {
if (item.key !== 'option') {
head.push({
label: item.title,
prop: item.key,
width: values.length < 4 ? width.value / values.length : 100
});
}
});
}
if (option.length > 0 && option[0].option) {
head.unshift({
label: '选项',
prop: 'option',
width: 150
});
}
return head;
};
</script>
<style scoped lang="scss">
.mt10 {
margin-top: 10px;
}
.ml10 {
margin-left: 10px;
}
.empty-text {
font-size: 11px;
color: #d6d6d6;
padding: 20px 10px;
text-align: center;
}
</style>