问卷分析功能增强与UI优化

components.d.ts

@@ -28,7 +28,7 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
-    Index: typeof import('./src/components/Navigation/Index.vue')['default']
+    Index: typeof import('./src/components/Analysis/Index.vue')['default']
     MarketItem: typeof import('./src/components/MarketItem/MarketItem.vue')['default']
     RichText: typeof import('./src/components/RichText.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/api/survey/index.js

@@ -17,7 +17,12 @@ export function getSurveyInfo(sn) {
   });
 }
 
-// 问题分析接口
+/**
+ * 问题分析接口
+  * @param sn
+ * @param data {import('@/api/types/analysis.js').AnalysisParam}
+ * @returns {Promise<axios.AxiosResponse<any>> | *}
+ */
 export function surveyAnalysis(sn, data) {
   return request({
     url: `/console/surveys/${sn}/chart_analysis`,

src/api/types/analysis.d.ts

@@ -0,0 +1,5 @@
+type page = { page: number; }
+type per_page = { per_page: number };
+type source = { source: 1 | 2 };
+
+type AnalysisParam = page & per_page & Partial<source>

src/assets/css/theme.scss

@@ -1 +1,3 @@
 $theme-color: #71b73c;
+$card-radius: 10px;
+$gap: 10px;

src/components/Analysis/Index.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { showToast } from 'vant';
+import { useSetPieChart } from '@/hooks/chart/usePieChart';
+import { surveys } from '@/components/Analysis/hooks/useSurvey';
+
+// 饼图 dom 结构
+const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
+
+useSetPieChart(pieChart, [1], { title: false, ledge: false });
+
+// 任务数据
+const taskData = ref({
+  title: '问卷A',
+  progress: 100,
+  deadline: '2025-03-31至04-01',
+  creator: '张三',
+  creationMethod: '移动端',
+  creationTime: '2025-03-04',
+  responseCount: 10,
+  responseRate: '10%',
+  submissionRate: '10%',
+  status: '草稿中'
+});
+
+// 图表数据
+const chartData = ref([
+  {
+    name: '选项1',
+    value: 66.77,
+    color: '#F56C6C'
+  },
+  {
+    name: '选项2',
+    value: 33.33,
+    color: '#F7BA2A'
+  },
+  {
+    name: '选项3',
+    value: 0,
+    color: '#67C23A'
+  },
+  {
+    name: '选项4',
+    value: 0,
+    color: '#409EFF'
+  }
+]);
+
+// 导航按钮点击事件
+const handlePrev = () => {
+  showToast('点击了上一个问题');
+};
+
+const handleNext = () => {
+  showToast('点击了下一个问题');
+};
+
+</script>
+
+<template>
+  <section>
+    <!-- 卡片内容 -->
+    <van-space direction="vertical" fill style="width: 100%; padding-top: 16px">
+      <p>1. 能描述您为自己或家人购买这款产品A的可能性吗？（单选）</p>
+
+      <!-- 图表部分 -->
+      <div style="   display: flex; justify-content: center; margin: 16px 0">
+        <span ref="pieChart" style="   width: 100%; height: 300px"></span>
+      </div>
+
+      <!-- 选项列表 -->
+      <van-cell-group inset>
+        <van-cell v-for="(item, index) in chartData" :key="index">
+          <template #title>
+            <van-tag :color="item.value > 0 ? item.color : '#dcdfe6'" plain>
+              {{ item.name }}
+            </van-tag>
+          </template>
+          <template #value>
+            <span>{{ item.value.toFixed(2) }}%</span>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </van-space>
+    <!-- 导航按钮 左右按钮-->
+    <!--      <div style="position: fixed; left: 16px; top: 50%; transform: translateY(-50%)">-->
+    <!--        <van-button round icon="arrow-left" @click="handlePrev" />-->
+    <!--      </div>-->
+
+    <!--      <div style="position: fixed; right: 16px; top: 50%; transform: translateY(-50%)">-->
+    <!--        <van-button round icon="arrow" @click="handleNext" />-->
+    <!--      </div>-->
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.task-card {
+  //margin: 16px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

src/components/Search/Index.vue~

@@ -1,60 +0,0 @@
-<template>
-  <section class="search-container">
-    <van-search
-      v-model="value"
-      :placeholder="placeholder"
-      style="--van-search-padding: 0"
-      @search="searchMethod"
-      @update:model-value="updateValue"
-    >
-    </van-search>
-    <el-text @click="searchMethod">搜索</el-text>
-  </section>
-</template>
-
-<script setup lang="ts">
-// 搜索的关键词
-const value = defineModel<string>('value', { required: true });
-/**
- * @description 搜索方法
- */
-const searchMethod = defineModel('search', {
-  type: Function,
-  default: () => ({})
-});
-
-const placeholder = defineModel('placeholder', {
-  type: String,
-  default: '请输入搜索关键词'
-});
-</script>
-
-<style scoped lang="scss">
-.search-container {
-  :deep(.van-search) {
-    padding: 0;
-    margin: 0 10px;
-    border-radius: 0;
-    background-color: #f5f5f5;
-  }
-
-  :deep(.el-text) {
-    margin: 0 10px;
-    font-size: 14px;
-    color: #999;
-    cursor: pointer;
-    justify-self: center;
-  }
-
-  border-radius: 18px;
-  border: solid 2px var(--primary-color);
-  background-color: #f5f5f5;
-
-  //width: 100vw;
-  display: grid;
-  grid-template-columns: 1fr 60px;
-  padding: 0 10px;
-  margin: 0 10px;
-  overflow: hidden;
-}
-</style>

src/components/YlTable/Index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/router/index.ts

@@ -97,6 +97,11 @@ const router = createRouter({
           path: '/template-market',
           name: 'templateMarket',
           component: () => import('@/views/Home/components/Market/Index.vue')
+        }, {
+          path: '/analysis',
+          name: 'analysis',
+          meta: {},
+          component: () => import('@/views/Survey/views/Analysis/Index.vue')
         }
       ]
     },

src/views/Home/Index.vue

@@ -9,7 +9,7 @@ import { getUserInfo } from '@/api/common/index.js';
 import { showFailToast } from 'vant';
 import appBridge from '@/assets/js/appBridge';
 import ImageSlider from './components/ImageSlider/Index.vue';
-import MineTask from '@/views/Home/components/MineTask/Index.vue';
+import MineTask from '@/components/Analysis/Index.vue';
 import Navigation from '@/components/Navigation/Index.vue';
 
 const contentShow = ref(false);

src/views/Home/components/MineTask/Index.vue

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import { ref, useTemplateRef } from 'vue';
-import { showToast } from 'vant';
-import { useSetPieChart } from '@/hooks/chart/usePieChart';
-import {surveys} from '@/views/Home/components/MineTask/hooks/useSurvey';
-
-// 饼图 dom 结构
-const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
-
-useSetPieChart(pieChart, [1], { title: false, ledge: false });
-
-// 任务数据
-const taskData = ref({
-  title: '问卷A',
-  progress: 100,
-  deadline: '2025-03-31至04-01',
-  creator: '张三',
-  creationMethod: '移动端',
-  creationTime: '2025-03-04',
-  responseCount: 10,
-  responseRate: '10%',
-  submissionRate: '10%',
-  status: '草稿中'
-});
-
-// 图表数据
-const chartData = ref([
-  {
-    name: '选项1',
-    value: 66.77,
-    color: '#F56C6C'
-  },
-  {
-    name: '选项2',
-    value: 33.33,
-    color: '#F7BA2A'
-  },
-  {
-    name: '选项3',
-    value: 0,
-    color: '#67C23A'
-  },
-  {
-    name: '选项4',
-    value: 0,
-    color: '#409EFF'
-  }
-]);
-
-// 导航按钮点击事件
-const handlePrev = () => {
-  showToast('点击了上一个问题');
-};
-
-const handleNext = () => {
-  showToast('点击了下一个问题');
-};
-
-</script>
-
-<template>
-  <van-card class="task-card">
-    <!-- 状态标签 -->
-    <template #tags>
-      <el-tag type="success" effect="plain">{{ taskData.status }}</el-tag>
-    </template>
-
-    <!-- 标题部分 -->
-    <template #title>
-      <van-space>
-        <span style="   font-size: 18px; font-weight: bold">{{ taskData.title }}</span>
-        <span style="   color: #409eff">{{ taskData.progress }}%</span>
-        <span style="   color: #606266; font-size: 14px">| {{ taskData.deadline }}</span>
-      </van-space>
-    </template>
-
-    <!-- 创建者信息 -->
-    <template #desc>
-      <el-space spacer="|">
-        <span>{{ taskData.creator }}</span>
-        <span>{{ taskData.creationMethod }}</span>
-        <span>创建时间:{{ taskData.creationTime }}</span>
-      </el-space>
-    </template>
-
-    <template #price>
-      <!-- 空的价格区域 -->
-    </template>
-
-    <!-- 卡片内容 -->
-    <template #bottom>
-      <van-space direction="vertical" fill style="   width: 100%; padding-top: 16px">
-        <!-- 任务统计 -->
-        <van-grid :column-num="3">
-          <van-grid-item>
-            <van-space direction="vertical" fill>
-              <span style="   color: #67c23a; font-size: 18px; font-weight: bold">{{
-                taskData.responseCount
-                }}</span>
-              <span style="   font-size: 14px; color: #909399">回收数量</span>
-            </van-space>
-          </van-grid-item>
-          <van-grid-item>
-            <van-space direction="vertical" fill>
-              <span style="   color: #67c23a; font-size: 18px; font-weight: bold">{{
-                taskData.responseRate
-                }}</span>
-              <span style="   font-size: 14px; color: #909399">回收数量进度</span>
-            </van-space>
-          </van-grid-item>
-          <van-grid-item>
-            <van-space direction="vertical" fill>
-              <span style="   color: #67c23a; font-size: 18px; font-weight: bold">{{
-                taskData.submissionRate
-                }}</span>
-              <span style="   font-size: 14px; color: #909399">投放时间进度</span>
-            </van-space>
-          </van-grid-item>
-        </van-grid>
-
-        <!-- 问题部分 -->
-        <van-divider/>
-
-        <p>1. 能描述您为自己或家人购买这款产品A的可能性吗？（单选）</p>
-
-        <!-- 图表部分 -->
-        <div style="   display: flex; justify-content: center; margin: 16px 0">
-          <span ref="pieChart" style="   width: 100%; height: 300px"></span>
-        </div>
-
-        <!-- 选项列表 -->
-        <van-cell-group inset>
-          <van-cell v-for="(item, index) in chartData" :key="index">
-            <template #title>
-              <van-tag :color="item.value > 0 ? item.color : '#dcdfe6'" plain>
-                {{ item.name }}
-              </van-tag>
-            </template>
-            <template #value>
-              <span>{{ item.value.toFixed(2) }}%</span>
-            </template>
-          </van-cell>
-        </van-cell-group>
-      </van-space>
-      <!-- 导航按钮 左右按钮-->
-      <!--      <div style="position: fixed; left: 16px; top: 50%; transform: translateY(-50%)">-->
-      <!--        <van-button round icon="arrow-left" @click="handlePrev" />-->
-      <!--      </div>-->
-
-      <!--      <div style="position: fixed; right: 16px; top: 50%; transform: translateY(-50%)">-->
-      <!--        <van-button round icon="arrow" @click="handleNext" />-->
-      <!--      </div>-->
-    </template>
-  </van-card>
-</template>
-
-<style lang="scss" scoped>
-.task-card {
-  //margin: 16px;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-</style>

src/views/Survey/Index.vue

@@ -33,9 +33,10 @@ import { onMounted } from 'vue';
 
 import NewSurvey from '@/views/Home/components/NewSurvey/index.vue';
 import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
-import SurveyItem from '@/views/Survey/components/SuvreyItem.vue';
+import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
 import { form, fetchSurveys, loading, finished, survey, searchValue } from '@/views/Survey/hooks/useSurveyData';
 
+
 const blurs = () => {
   form.value.page = 1;
   form.value.project_name = searchValue.value;
@@ -75,6 +76,7 @@ onMounted(() => {
 
 .new-survey-container {
   margin-top: 10px;
+
   .new-survey_item {
     margin: 0 10px 10px;
     padding: 10px 0 8px 7px;

src/views/Survey/components/SurveyItem.vue

@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import png11 from '@/assets/img/home/11.png';
+import png13 from '@/assets/img/home/13.png';
+import png14 from '@/assets/img/home/14.png';
+import png15 from '@/assets/img/home/15.png';
+import png16 from '@/assets/img/home/16.png';
+import png17 from '@/assets/img/home/17.png';
+import png18 from '@/assets/img/home/18.png';
+import png31 from '@/assets/img/home/31.png';
+import { showDialog, showFailToast, showSuccessToast } from 'vant';
+import { finish } from '@/api/survey';
+import { copySurveys } from '@/api/home';
+import { useRouter } from 'vue-router';
+import { form, fetchSurveys, deleteItem, saveTemplate, currentSurvey } from '@/views/Survey/hooks/useSurveyData';
+
+// router
+const router = useRouter();
+
+const survey = defineModel<SurveyItem>('survey', { required: true });
+const isAnalysis = defineModel('isAnalysis', { default: false, type: Boolean });
+
+function setImg(code: number) {
+  const imageMap: { [key: number]: string } = {
+    11: png11,
+    13: png13,
+    14: png14,
+    15: png15,
+    16: png16,
+    17: png17,
+    18: png18,
+    31: png31
+  };
+  // 默认返回 png11 如果 code 不存在
+  return imageMap[code] || png11;
+};
+
+function editItem(item: SurveyItem) {
+  router.push({
+    path: '/create',
+    query: {
+      sn: item.sn
+    }
+  });
+};
+
+function toPreview(item: SurveyItem) {
+  router.push({
+    path: '/preview',
+    query: {
+      sn: item.sn,
+      name: item.project_name,
+      source: 0
+    }
+  });
+}
+
+/**
+ * 跳转 统计分析 页面
+ * @param item
+ */
+function toAnalysis(item: SurveyItem) {
+  // 设置当前的节点信息
+  currentSurvey.value = item;
+  // 跳转
+  router.push({
+    path: '/analysis',
+    query: {
+      sn: item.sn
+    }
+  });
+}
+
+function toPublish(item: SurveyItem) {
+  if (item.status === 1) {
+    showDialog({
+      title: `确定要取消投放${item.project_name}?`,
+      showCancelButton: true
+    })
+      .then(() => {
+        finish(item.sn).then((res) => {
+          if (res.data) {
+            // 把数据改掉
+            item.status = 2;
+          }
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+  } else {
+    router.push({
+      path: '/publish',
+      query: {
+        sn: item.sn
+      }
+    });
+  }
+};
+
+function copyItem(item: SurveyItem) {
+  showDialog({
+    title: `确认复制问卷${item.project_name} ?`,
+    showCancelButton: true,
+    confirmButtonColor: '#03B03C'
+  })
+    .then(async () => {
+      const res = await copySurveys(item.sn);
+      if (res.data.code === 200 || res.data.code === 201) {
+        showSuccessToast('复制成功');
+        form.value.page = 1;
+        survey.value = [];
+        await fetchSurveys();
+      } else {
+        showFailToast(res.data);
+      }
+    })
+    .catch(() => {
+      // on cancel
+    });
+}
+
+
+</script>
+
+<template>
+  <section>
+    <!--  问卷详情    -->
+    <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>
+
+          <el-button v-if="isAnalysis" type="primary" size="small" @click="">AI 洞察</el-button>
+        </div>
+        <div class="survey_item_info_status">
+          <el-space spacer="|">
+            <!--报名签到-->
+            <div class="flex align-center">
+              <img
+                :src="setImg(survey.scene_code_info as number)"
+                alt="Content Icon"
+                style="width: 15px; height: 15px"
+              />
+              <el-text size="small">{{ survey.owner }}</el-text>
+            </div>
+            <!-- 问卷来源 -->
+            <div class="flex align-center">
+              <img
+                v-if="survey.source === 1"
+                src="@/assets/img/publish/phone.png"
+                alt=""
+              />
+              <img v-else src="@/assets/img/publish/pc.png" alt="" />
+              <el-text size="small">
+                {{ survey.source === 1 ? '移动端' : 'PC端' }}
+              </el-text>
+            </div>
+            <!-- 问卷时间 -->
+            <div class="flex align-center">
+              <img src="@/assets/img/publish/time.png" alt="" />
+              <el-text size="small">{{ survey.created_at }}</el-text>
+            </div>
+          </el-space>
+        </div>
+        <div class="survey_item_status" v-if="!isAnalysis">
+          <img
+            v-if="survey.status === 0"
+            src="@/assets/img/publish/edit.png"
+            alt=""
+          />
+          <img
+            v-else-if="survey.status === 1"
+            src="@/assets/img/publish/publish.png"
+            alt=""
+          />
+          <img
+            v-else-if="survey.status === 2"
+            src="@/assets/img/publish/end.png"
+            alt=""
+          />
+        </div>
+      </div>
+      <!--问卷描述-->
+      <el-space class="survey_item_info_desc" spacer="|">
+        <section>
+          <el-text size="small">回收数量</el-text>
+          <el-text> {{ survey.answer_num }}</el-text>
+        </section>
+        <section>
+          <el-text size="small">回收数量进度</el-text>
+          <el-text>{{ survey.recycle_progress }}</el-text>
+        </section>
+        <section>
+          <el-text size="small">投放时间进度</el-text>
+          <el-text> {{ survey.recycle_time }}</el-text>
+        </section>
+      </el-space>
+    </div>
+    <!-- action 功能位置 -->
+    <div class="survey_item_action" v-if="!isAnalysis">
+      <div>
+        <el-button :disabled="survey.source === 0" @click="editItem(survey)">
+          编辑
+        </el-button>
+        <!--        <el-button-->
+        <!--          style="border: 1px solid #71b73c"-->
+        <!--          @click="toPreview(survey)"-->
+        <!--        >-->
+        <!--          <el-text style="color: #71b73c">预览</el-text>-->
+        <!--        </el-button>-->
+        <el-button
+          style="border: 1px solid #71b73c"
+          @click="toAnalysis(survey)"
+        >
+          <el-text style="color: #71b73c">统计</el-text>
+        </el-button>
+
+        <el-button color="#6fb937" @click="toPublish(survey)">
+          <el-text style="color: white">
+            {{ survey.status === 1 ? '结束投放' : '开启投放' }}
+          </el-text>
+        </el-button>
+      </div>
+      <el-dropdown
+        v-if="survey.source === 1"
+        placement="top-end"
+        trigger="click"
+        active-color="#71b73c"
+      >
+        <van-icon
+          class-prefix="mobilefont"
+          name="gengduo"
+          size="0.7rem"
+        ></van-icon>
+        <template #dropdown>
+          <el-dropdown-menu
+            active-color="#71b73c"
+            :close-on-click-overlay="false"
+            :close-on-click-outside="false"
+          >
+            <el-dropdown-item @click="copyItem(survey)">
+              复制
+            </el-dropdown-item>
+            <el-dropdown-item @click="deleteItem(survey)">
+              删除
+            </el-dropdown-item>
+            <el-dropdown-item @click="saveTemplate(survey)">
+              保存为模板
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+@import "@/assets/css/base";
+@import "@/assets/css/main";
+
+.survey_item_info {
+  .survey_item_info_status {
+    display: flex;
+    margin-bottom: 15px;
+
+    img {
+      height: 12px;
+      margin-right: 3px;
+    }
+  }
+
+  .survey_item_status {
+    position: absolute;
+    top: -16px;
+    right: -10px;
+  }
+
+  .survey_item_info_title {
+    display: flex;
+
+    .el-text {
+      font-size: 15px;
+
+      &:first-child {
+        display: inline-block;
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    & > :nth-child(2) {
+      position: relative;
+      left: 10px;
+      padding: 1px 3px;
+      border: 2px solid #f5f5f5;
+      border-radius: 6px;
+      font-size: 12px;
+    }
+  }
+
+  .survey_item_info_desc {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-around;
+    border-radius: 8px;
+    background-color: #f6f7f8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 10px 15px;
+    box-sizing: border-box;
+    margin: 0 10px 10px 10px;
+    color: #828282;
+    font-weight: 400;
+    font-size: 12px;
+
+    section {
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+      justify-content: center;
+
+      & > :nth-last-child(-n+1) {
+        font-size: 20px;
+        font-weight: bold;
+        color: $theme-color;
+      }
+    }
+  }
+}
+
+.survey_item_action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  border-top: 1px dashed #f5f5f5;
+
+  .el-button {
+    width: 18vw;
+    border-radius: 8px;
+  }
+
+  .el-space {
+    display: flex;
+    justify-content: space-evenly;
+  }
+}
+</style>

src/views/Survey/components/SurveyItem.vue~

@@ -11,12 +11,13 @@ import { showDialog, showFailToast, showSuccessToast } from 'vant';
 import { finish } from '@/api/survey';
 import { copySurveys } from '@/api/home';
 import { useRouter } from 'vue-router';
-import { form, fetchSurveys, deleteItem, saveTemplate } from '@/views/Survey/hooks/useSurveyData';
+import { form, fetchSurveys, deleteItem, saveTemplate, currentSurvey } from '@/views/Survey/hooks/useSurveyData';
 
 // router
 const router = useRouter();
 
 const survey = defineModel<SurveyItem>('survey', { required: true });
+const isAnalysis = defineModel('isAnalysis', { default: true, type: Boolean });
 
 function setImg(code: number) {
   const imageMap: { [key: number]: string } = {
@@ -33,7 +34,7 @@ function setImg(code: number) {
   return imageMap[code] || png11;
 };
 
-function editItem(item) {
+function editItem(item: SurveyItem) {
   router.push({
     path: '/create',
     query: {
@@ -42,7 +43,7 @@ function editItem(item) {
   });
 };
 
-function toPreview(item) {
+function toPreview(item: SurveyItem) {
   router.push({
     path: '/preview',
     query: {
@@ -51,9 +52,25 @@ function toPreview(item) {
       source: 0
     }
   });
-};
+}
 
-function toPublish(item) {
+/**
+ * 跳转 统计分析 页面
+ * @param item
+ */
+function toAnalysis(item: SurveyItem) {
+  // 设置当前的节点信息
+  currentSurvey.value = item;
+  // 跳转
+  router.push({
+    path: '/analysis',
+    query: {
+      sn: item.sn
+    }
+  });
+}
+
+function toPublish(item: SurveyItem) {
   if (item.status === 1) {
     showDialog({
       title: `确定要取消投放${item.project_name}?`,
@@ -80,7 +97,7 @@ function toPublish(item) {
   }
 };
 
-function copyItem(item) {
+function copyItem(item: SurveyItem) {
   showDialog({
     title: `确认复制问卷${item.project_name} ?`,
     showCancelButton: true,
@@ -100,7 +117,7 @@ function copyItem(item) {
     .catch(() => {
       // on cancel
     });
-};
+}
 
 
 </script>
@@ -118,13 +135,15 @@ function copyItem(item) {
           <el-text v-if="survey.is_time" size="small">
             {{ `${survey.start_time} 至 ${survey.end_time ?? '无限期'}` }}
           </el-text>
+
+          <el-button v-if="isAnalysis" type="primary" size="small" @click="">AI 洞察</el-button>
         </div>
         <div class="survey_item_info_status">
           <el-space spacer="|">
             <!--报名签到-->
             <div class="flex align-center">
               <img
-                :src="setImg(survey.scene_code_info)"
+                :src="setImg(survey.scene_code_info as number)"
                 alt="Content Icon"
                 style="width: 15px; height: 15px"
               />
@@ -134,35 +153,35 @@ function copyItem(item) {
             <div class="flex align-center">
               <img
                 v-if="survey.source === 1"
-                src="../../assets/img/publish/phone.png"
+                src="@/assets/img/publish/phone.png"
                 alt=""
               />
-              <img v-else src="../../assets/img/publish/pc.png" alt="" />
+              <img v-else src="@/assets/img/publish/pc.png" alt="" />
               <el-text size="small">
                 {{ survey.source === 1 ? '移动端' : 'PC端' }}
               </el-text>
             </div>
             <!-- 问卷时间 -->
             <div class="flex align-center">
-              <img src="../../assets/img/publish/time.png" alt="" />
+              <img src="@/assets/img/publish/time.png" alt="" />
               <el-text size="small">{{ survey.created_at }}</el-text>
             </div>
           </el-space>
         </div>
-        <div class="survey_item_status">
+        <div class="survey_item_status" v-if="!isAnalysis">
           <img
             v-if="survey.status === 0"
-            src="../../assets/img/publish/edit.png"
+            src="@/assets/img/publish/edit.png"
             alt=""
           />
           <img
             v-else-if="survey.status === 1"
-            src="../../assets/img/publish/publish.png"
+            src="@/assets/img/publish/publish.png"
             alt=""
           />
           <img
             v-else-if="survey.status === 2"
-            src="../../assets/img/publish/end.png"
+            src="@/assets/img/publish/end.png"
             alt=""
           />
         </div>
@@ -184,25 +203,24 @@ function copyItem(item) {
       </el-space>
     </div>
     <!-- action 功能位置 -->
-    <div class="survey_item_action">
+    <div class="survey_item_action" v-if="!isAnalysis">
       <div>
         <el-button :disabled="survey.source === 0" @click="editItem(survey)">
           编辑
         </el-button>
-
         <!--        <el-button-->
         <!--          style="border: 1px solid #71b73c"-->
-        <!--                @click="toPreview(item)"-->
+        <!--          @click="toPreview(survey)"-->
         <!--        >-->
-        <!--                <el-text style="color: #71b73c">复制</el-text>-->
+        <!--          <el-text style="color: #71b73c">预览</el-text>-->
         <!--        </el-button>-->
-
         <el-button
           style="border: 1px solid #71b73c"
-          @click="toPreview(survey)"
+          @click="toAnalysis(survey)"
         >
-          <el-text style="color: #71b73c">预览</el-text>
+          <el-text style="color: #71b73c">统计</el-text>
         </el-button>
+
         <el-button color="#6fb937" @click="toPublish(survey)">
           <el-text style="color: white">
             {{ survey.status === 1 ? '结束投放' : '开启投放' }}

src/views/Survey/hooks/useSurveyData.ts

@@ -9,6 +9,7 @@ import {
   showFailToast,
   showToast
 } from 'vant';
+import { getSurveysDetail } from '@/api/design';
 
 const form = ref({
   page: 0,
@@ -21,6 +22,15 @@ const survey = ref<SurveyItem[]>([]);
 const total = ref(0);
 const loading = ref(false);
 const finished = ref(false);
+const currentSurvey = ref<SurveyItem>();
+
+async function fetchSingleSurvey(sn: string) {
+  const res = await getSurveysDetail(sn);
+  // console.log(res);
+  if (res.data.code === 0) {
+    currentSurvey.value = res.data.data;
+  }
+}
 
 async function fetchSurveys() {
   const params = {
@@ -53,9 +63,9 @@ async function fetchSurveys() {
   } else {
     // Toast()
   }
-};
+}
 
-function deleteItem(item) {
+function deleteItem(item: SurveyItem) {
   showDialog({
     title: `确认删除问卷${item.project_name} ?`,
     showCancelButton: true,
@@ -78,7 +88,7 @@ function deleteItem(item) {
 };
 
 // 保存为模板
-async function saveTemplate(item) {
+async function saveTemplate(item: SurveyItem) {
   const data = JSON.parse(JSON.stringify(item));
   const res = await saveTemplates(item.sn, data);
   if (res.data.code === 200 || res.data.code === 201) {
@@ -90,6 +100,18 @@ async function saveTemplate(item) {
     showFailToast(res.data);
   }
 }
-;
 
-export { form, fetchSurveys, loading, finished, survey, total, searchValue, deleteItem, saveTemplate };
+export {
+  form,
+  fetchSurveys,
+  loading,
+  finished,
+  survey,
+  total,
+  searchValue,
+  deleteItem,
+  saveTemplate,
+  currentSurvey,
+  fetchSingleSurvey
+}
+  ;

src/views/Survey/views/Analysis/Index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { currentSurvey, fetchSingleSurvey } from '@/views/Survey/Hooks/useSurveyData';
+import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
+import LogicInfo from '@/views/Survey/views/Analysis/components/LogicInfo.vue';
+import { useRoute } from 'vue-router';
+import { useFetchAnalysis } from '@/views/Survey/views/Analysis/hooks/useAnalysis';
+
+const route = useRoute();
+/**
+ * 如果当前问卷的数据不存在，重新获取数据
+ */
+if (!currentSurvey.value) fetchSingleSurvey(<string>route.query.sn);
+
+useFetchAnalysis(<string>route.query.sn);
+</script>
+
+<template>
+  <section v-if="currentSurvey" class="survey-container">
+    <!--  问卷详情部分  -->
+    <van-cell class="survey-item">
+      <template #extra>
+        <survey-item :is-analysis="true" :survey="<SurveyItem>currentSurvey" />
+      </template>
+    </van-cell>
+    <!-- 逻辑配额、随机题组配额、循环体配额 表格部分-->
+    <van-cell class="logic-info">
+      <template #extra>
+        <logic-info />
+      </template>
+    </van-cell>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+@use "@/assets/css/theme";
+
+.survey-container {
+  padding: theme.$gap;
+  width: 100%;
+
+  .survey-item, .logic-info {
+    border-radius: theme.$card-radius;
+    margin-bottom: theme.$gap;
+  }
+}
+</style>

src/views/Survey/views/Analysis/components/LogicInfo.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Analysis from '@/components/Analysis/Index.vue';
+import { questionAnalysis } from '@/views/Survey/views/Analysis/hooks/useAnalysis';
+
+const activeTab = ref();
+const tabs = ref<LogicInfoTab[]>([{
+  title: '逻辑配额'
+}, {
+  title: '随机题组配额'
+}, {
+  title: '循环题组配额'
+}]);
+</script>
+
+<template>
+  <section>
+    <!--  tabs 选项列表    -->
+    <van-tabs v-model:active="activeTab">
+      <van-tab v-for="tab in tabs">
+        <template #title>
+          <el-text size="small">{{ tab.title }}</el-text>
+        </template>
+      </van-tab>
+    </van-tabs>
+    <!--  图表分析部分   -->
+    <analysis />
+  </section>
+</template>

src/views/Survey/views/Analysis/components/types/logicInfo.d.ts

@@ -0,0 +1,3 @@
+type LogicInfoTab = {
+  title: string,
+}

src/views/Survey/views/Analysis/hooks/useAnalysis.ts

@@ -0,0 +1,17 @@
+import { surveyAnalysis } from '@/api/survey';
+import {ref} from 'vue';
+
+const questionAnalysis = ref()
+const params: AnalysisParam = {
+  page: 1,
+  per_page: 30,
+  source: 1
+};
+
+async function useFetchAnalysis(sn:string) {
+  const res = await surveyAnalysis(sn, params);
+  questionAnalysis.value = res.data.data
+  console.log(`question analysis`,questionAnalysis.value);
+}
+
+export { useFetchAnalysis, questionAnalysis };