feat: 优化问卷列表和分析页面
1. 修改 SurveyItem 组件布局和样式 2. 在分析页面添加搜索栏 3. 更新问卷项中的时间显示格式 4. 调整分析页面组件的宽度 5. 添加 AI 洞察图标
This commit is contained in:
3
components.d.ts
vendored
3
components.d.ts
vendored
@@ -33,10 +33,12 @@ declare module 'vue' {
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
VanActionSheet: typeof import('vant/es')['ActionSheet']
|
||||
VanButton: typeof import('vant/es')['Button']
|
||||
VanCard: typeof import('vant/es')['Card']
|
||||
VanCell: typeof import('vant/es')['Cell']
|
||||
VanCellGroup: typeof import('vant/es')['CellGroup']
|
||||
VanCheckbox: typeof import('vant/es')['Checkbox']
|
||||
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
|
||||
VanCol: typeof import('vant/es')['Col']
|
||||
VanDivider: typeof import('vant/es')['Divider']
|
||||
VanField: typeof import('vant/es')['Field']
|
||||
VanIcon: typeof import('vant/es')['Icon']
|
||||
@@ -47,6 +49,7 @@ declare module 'vue' {
|
||||
VanPopup: typeof import('vant/es')['Popup']
|
||||
VanRadio: typeof import('vant/es')['Radio']
|
||||
VanRadioGroup: typeof import('vant/es')['RadioGroup']
|
||||
VanRow: typeof import('vant/es')['Row']
|
||||
VanSearch: typeof import('vant/es')['Search']
|
||||
VanStepper: typeof import('vant/es')['Stepper']
|
||||
VanSwipe: typeof import('vant/es')['Swipe']
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
44
src/assets/img/analysis/ai.svg
Normal file
44
src/assets/img/analysis/ai.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.9 KiB |
@@ -100,7 +100,9 @@ const router = createRouter({
|
||||
}, {
|
||||
path: '/analysis',
|
||||
name: 'analysis',
|
||||
meta: {},
|
||||
meta: {
|
||||
title:"统计分析"
|
||||
},
|
||||
component: () => import('@/views/Survey/views/Analysis/Index.vue')
|
||||
}, {
|
||||
path: '/ad',
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
saveTemplate,
|
||||
currentSurvey
|
||||
} from '@/views/Survey/hooks/useSurveyData';
|
||||
import ai from '@/assets/img/analysis/ai.svg';
|
||||
|
||||
// router
|
||||
const router = useRouter();
|
||||
@@ -128,28 +129,28 @@ function copyItem(item: SurveyItem) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<section style="width: 100%">
|
||||
<!-- 问卷详情 -->
|
||||
<div class="survey_item_info">
|
||||
<div style="position: relative">
|
||||
<div class="survey_item_info_title">
|
||||
<el-text>
|
||||
<b v-html="survey.project_name"></b>
|
||||
</el-text>
|
||||
<el-text>{{ survey.answer_num }}份</el-text>
|
||||
<el-text v-if="survey.is_time" size="small">
|
||||
{{ `${survey.start_time} 至 ${survey.end_time ?? '无限期'}` }}
|
||||
</el-text>
|
||||
<div style="display: flex; justify-content: space-between; margin: 10px 0">
|
||||
<div class="survey_item_info_title">
|
||||
<el-text style="max-width: 100px">
|
||||
<b v-html="survey.project_name"></b>
|
||||
</el-text>
|
||||
<el-text class="wrap">{{ survey.answer_num }}份</el-text>
|
||||
<el-text class="wrap" v-if="survey.is_time" style="text-wrap: nowrap; font-size: 14px">
|
||||
{{ `${survey.start_time} 至 ${survey.end_time ?? '无限期'}` }}
|
||||
</el-text>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
<!-- AI 洞察图片 -->
|
||||
<img
|
||||
v-if="isAnalysis"
|
||||
style="margin-left: 30px"
|
||||
type="primary"
|
||||
size="small"
|
||||
:src="ai"
|
||||
class="survey_item_info_title-survey"
|
||||
@click="emit('post-analysis')"
|
||||
>
|
||||
AI 洞察
|
||||
</el-button>
|
||||
/>
|
||||
</div>
|
||||
<div class="survey_item_info_status">
|
||||
<el-space spacer="|">
|
||||
@@ -173,7 +174,7 @@ function copyItem(item: SurveyItem) {
|
||||
<!-- 问卷时间 -->
|
||||
<div class="flex align-center">
|
||||
<img src="@/assets/img/publish/time.png" alt="" />
|
||||
<el-text size="small">{{ survey.created_at }}</el-text>
|
||||
<el-text size="small"> 创建时间 {{ survey.created_at }}</el-text>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
@@ -278,13 +279,12 @@ function copyItem(item: SurveyItem) {
|
||||
}
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
.wrap {
|
||||
padding: 1px 3px;
|
||||
border: 2px solid #f5f5f5;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -299,7 +299,7 @@ function copyItem(item: SurveyItem) {
|
||||
text-overflow: ellipsis;
|
||||
padding: 10px 15px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 10px 10px 10px;
|
||||
margin: 0 10px 10px 5px;
|
||||
color: #828282;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { getSurveysPage, deleteSurveys, saveTemplates } from '@/api/home';
|
||||
import { ref } from 'vue';
|
||||
import { showDialog, showConfirmDialog, showFailToast, showToast } from 'vant';
|
||||
import { getSurveysDetail } from '@/api/design';
|
||||
import { getSetting, getSurveysDetail } from '@/api/design';
|
||||
|
||||
const form = ref({
|
||||
page: 0,
|
||||
@@ -18,6 +18,7 @@ const currentSurvey = ref<SurveyItem>();
|
||||
|
||||
async function fetchSingleSurvey(sn: string) {
|
||||
const res = await getSurveysDetail(sn);
|
||||
// const res = await getSetting({sn})
|
||||
// console.log(res);
|
||||
if (res.data.code === 0) {
|
||||
currentSurvey.value = res.data.data;
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
} from '@/views/Survey/views/Analysis/hooks/useAnalysis';
|
||||
import Wait from '@/views/Survey/views/Analysis/components/Wait/Index.vue';
|
||||
import AnalysisInfo from '@/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue';
|
||||
import SearchBar from '@/components/Search/Index.vue';
|
||||
|
||||
const route = useRoute();
|
||||
/**
|
||||
@@ -24,6 +25,11 @@ useFetchAnalysis(route.query.sn as string);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<search-bar
|
||||
:value="''"
|
||||
style="margin: 15px 10px 5px 10px"
|
||||
@click="() => $router.push({ name: 'search' })"
|
||||
/>
|
||||
<section v-if="currentSurvey" class="survey-container">
|
||||
<!-- 问卷详情部分 -->
|
||||
<van-cell class="survey-item">
|
||||
@@ -74,6 +80,7 @@ useFetchAnalysis(route.query.sn as string);
|
||||
.ai-insight,
|
||||
.logic-info,
|
||||
.analysis {
|
||||
width: 100%;
|
||||
border-radius: theme.$card-radius;
|
||||
margin-bottom: theme.$gap;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user