营销报告

src/modules/market/my/components/Report.vue

@@ -150,7 +150,12 @@ defineExpose({ generateImage, generatePdf })
           <li>指导教师：{{ teacherName }}</li>
         </ul>
       </div>
-      <section id="step1" class="section" :class="{ hide: step !== 1 }" v-element-visibility="state => onElementVisibility(state, 1)">
+      <section
+        id="step1"
+        class="section"
+        :class="{ hide: step !== 1 }"
+        v-element-visibility="state => onElementVisibility(state, 1)"
+      >
         <h2>一、营销背景</h2>
         <h3>（一）当前业务面临的问题及挑战</h3>
         <template v-for="(item, index) in objectiveStore.problems" :key="item.id">
@@ -161,7 +166,12 @@ defineExpose({ generateImage, generatePdf })
           <p>营销目标{{ index + 1 }}：{{ item.content }}</p>
         </template>
       </section>
-      <section id="step2" class="section" :class="{ hide: step !== 2 }" v-element-visibility="state => onElementVisibility(state, 2)">
+      <section
+        id="step2"
+        class="section"
+        :class="{ hide: step !== 2 }"
+        v-element-visibility="state => onElementVisibility(state, 2)"
+      >
         <h2>二、营销渠道</h2>
         <p>本次营销选择的主要渠道为：</p>
         <template v-for="(item, index) in connectionStore.activeConnections" :key="item.id">
@@ -170,7 +180,12 @@ defineExpose({ generateImage, generatePdf })
           <p>选择该渠道的原因为：{{ item.content }}</p>
         </template>
       </section>
-      <section id="step3" class="section" :class="{ hide: step !== 3 }" v-element-visibility="state => onElementVisibility(state, 3)">
+      <section
+        id="step3"
+        class="section"
+        :class="{ hide: step !== 3 }"
+        v-element-visibility="state => onElementVisibility(state, 3)"
+      >
         <h2>三、用户分析</h2>
         <h3>（一）用户性别分析</h3>
         <p>{{ memberStore.member.sex }}</p>
@@ -183,7 +198,12 @@ defineExpose({ generateImage, generatePdf })
           <img :src="memberStore.member.source_file" />
         </div>
       </section>
-      <section id="step4" class="section" :class="{ hide: step !== 4 }" v-element-visibility="state => onElementVisibility(state, 4)">
+      <section
+        id="step4"
+        class="section"
+        :class="{ hide: step !== 4 }"
+        v-element-visibility="state => onElementVisibility(state, 4)"
+      >
         <h2>四、用户标签体系设计</h2>
         <template v-for="(item, index) in labelStore.treeLabels" :key="item.id">
           <h3>（{{ numberToChinese(index + 1) }}）{{ item.name }}</h3>
@@ -195,7 +215,12 @@ defineExpose({ generateImage, generatePdf })
           </template>
         </template>
       </section>
-      <section id="step5" class="section" :class="{ hide: step !== 5 }" v-element-visibility="state => onElementVisibility(state, 5)">
+      <section
+        id="step5"
+        class="section"
+        :class="{ hide: step !== 5 }"
+        v-element-visibility="state => onElementVisibility(state, 5)"
+      >
         <h2>五、用户精准分群设计</h2>
         <h3>（一）静态群组</h3>
         <p>本项目设计如下静态群组：</p>
@@ -214,11 +239,22 @@ defineExpose({ generateImage, generatePdf })
           <p>设计该群组的原因是：{{ item.reason }}</p>
         </template>
       </section>
-      <section id="step6" class="section" :class="{ hide: step !== 6 }" v-element-visibility="state => onElementVisibility(state, 6)">
+      <section
+        id="step6"
+        class="section"
+        :class="{ hide: step !== 6 }"
+        v-element-visibility="state => onElementVisibility(state, 6)"
+      >
         <h2>六、自动化营销旅程设计</h2>
         <h3>（一）一级流程</h3>
         <p>本项目设计一级流程图如下。</p>
-        <Flow :nodes="tripStore.nodes" :edges="tripStore.edges" :nodes-draggable="false" :nodes-connectable="false" style="height: 200px"></Flow>
+        <Flow
+          :nodes="tripStore.nodes"
+          :edges="tripStore.edges"
+          :nodes-draggable="false"
+          :nodes-connectable="false"
+          style="height: 200px"
+        ></Flow>
         <p>相关节点设计说明如下：</p>
         <template v-for="(item, index) in tripStore.nodes" :key="item.id">
           <p>{{ index + 1 }}、{{ item.data.label || item.label }}节点</p>
@@ -229,13 +265,22 @@ defineExpose({ generateImage, generatePdf })
             <template v-else-if="item.type === 'end'">结束节点</template>
             <template v-else>业务节点</template>
           </p>
-          <p v-if="item.type === 'start'">节点配置：触发时机为“{{ item.data.time }}”，触发条件为“{{ item.data.condition }}”。</p>
+          <p v-if="item.type === 'start'">
+            节点配置：触发时机为“{{ item.data.time }}”，触发条件为“{{ item.data.condition }}”。
+          </p>
         </template>
         <h3>（二）二级流程</h3>
         <p>本项目如下一级流程节点设计了二级流程。</p>
         <template v-for="(item, index) in tripStore.node1List" :key="item.id">
           <p>{{ index + 1 }}、{{ item.data.label || item.label }}节点。该节点设计的二级流程图如下：</p>
-          <Flow :process="2" :nodes="item.data.nodes" :edges="item.data.edges" :nodes-draggable="false" :nodes-connectable="false" style="height: 200px"></Flow>
+          <Flow
+            :process="2"
+            :nodes="item.data.nodes"
+            :edges="item.data.edges"
+            :nodes-draggable="false"
+            :nodes-connectable="false"
+            style="height: 200px"
+          ></Flow>
           <p>该二级流程图节点说明如下：</p>
           <template v-for="(item, index) in item.data.nodes" :key="item.id">
             <p>（{{ index + 1 }}）{{ item.data.label || item.label }}节点</p>
@@ -246,19 +291,33 @@ defineExpose({ generateImage, generatePdf })
               <template v-else-if="item.type === 'end'">结束节点</template>
               <template v-else>业务节点</template>
             </p>
-            <p v-if="item.type === 'start'">节点配置：触发时机为“{{ item.data.time }}”，触发条件为“{{ item.data.condition }}”。</p>
+            <p v-if="item.type === 'start'">
+              节点配置：触发时机为“{{ item.data.time }}”，触发条件为“{{ item.data.condition }}”。
+            </p>
             <p v-if="item.type === 'custom'">是否用到营销物料：{{ item.use_material }}</p>
             <p v-if="item.type === 'custom'">营销物料类型：{{ item.material_type }}</p>
           </template>
         </template>
       </section>
-      <section id="step7" class="section" :class="{ hide: step !== 7 }" v-element-visibility="state => onElementVisibility(state, 7)">
+      <section
+        id="step7"
+        class="section"
+        :class="{ hide: step !== 7 }"
+        v-element-visibility="state => onElementVisibility(state, 7)"
+      >
         <h2>七、营销物料设计</h2>
         <p>本项目设计如下营销物料。</p>
         <AppList v-bind="listOptions"></AppList>
       </section>
       <ul class="market-report-step">
-        <li v-for="(item, index) in steps" :key="index" :class="{ 'is-active': index + 1 === step }" @click="handleClick(item)">{{ item.name }}</li>
+        <li
+          v-for="(item, index) in steps"
+          :key="index"
+          :class="{ 'is-active': index + 1 === step }"
+          @click="handleClick(item)"
+        >
+          {{ item.name }}
+        </li>
       </ul>
     </div>
   </div>

src/modules/market/review/api.ts

@@ -11,7 +11,7 @@ export function getSearchCriteria() {
 }
 
 // 获取列表
-export function getRecordList(params?: { name: string, sno_number: string }) {
+export function getRecordList(params?: { name?: string, sno_number?: any }) {
   return httpRequest.get('/api/lab/v1/experiment/marketing-planning/record-list', { params })
 }
 

src/modules/market/review/index.ts

@@ -7,7 +7,8 @@ const routes: RouteRecordRaw[] = [
     component: Layout,
     children: [
       { path: '', component: () => import('./views/Index.vue') },
-      { path: 'score', component: () => import('./views/Score.vue') }
+      { path: 'score', component: () => import('./views/Score.vue') },
+      { path: 'view', component: () => import('./views/View.vue') }
     ]
   }
 ]

src/modules/market/review/views/Index.vue

 <script setup lang="ts">
 import type { ExperimentInfo } from '../types'
 import { getSearchCriteria, getRecordList } from '../api'
+import Report from '@/modules/market/my/components/Report.vue'
 
 const route = useRoute()
 
@@ -79,9 +80,7 @@ const listOptions = computed(() => {
 
 function isComplete(is: Boolean) {
   let n = ''
-  is
-    ? (n = '<div style="color: #009b3b; font-size:20px;">✓</div>')
-    : (n = '<div style="font-size:20px;">-</div>')
+  is ? (n = '<div style="color: #009b3b; font-size:20px;">✓</div>') : (n = '<div style="font-size:20px;">-</div>')
   return n
 }
 </script>
@@ -95,10 +94,27 @@ function isComplete(is: Boolean) {
       <el-form-item label="实验学时">{{ experimentInfo?.length }}</el-form-item>
     </el-form>
     <el-divider />
+    <!-- <Report
+      :experimentName="11"
+      :teacherName="11"
+      :studentName="11"
+      ref="reportRef" /> -->
     <h2 class="h2-title">营销策划</h2>
     <AppList v-bind="listOptions">
       <template #table-x="{ row }">
-        <el-button text type="primary">查看营销策划报告</el-button>
+        <!-- <el-button text type="primary">查看营销策划报告</el-button> -->
+        <router-link
+          target="_blank"
+          :to="{
+            path: '/market/review/view',
+            query: {
+              id: row.id,
+              snoNumber: row.sno_number,
+              experiment_id: route.query.experiment_id
+            }
+          }"
+          ><el-button text type="primary">查看营销策划报告</el-button></router-link
+        >
         <router-link
           target="_blank"
           :to="{
@@ -113,7 +129,6 @@ function isComplete(is: Boolean) {
           }"
           ><el-button text type="primary">评分</el-button></router-link
         >
-        <!-- <el-button text type="primary" @click="">评分</el-button> -->
       </template>
     </AppList>
   </AppCard>

src/modules/market/review/views/View.vue

+<script setup lang="ts">
+import type { ExperimentInfo } from '../types'
+import { getSearchCriteria, getRecordList } from '../api'
+import Report from '@/modules/market/my/components/Report.vue'
+
+const route = useRoute()
+
+let experimentInfo = $ref<ExperimentInfo>()
+getSearchCriteria().then((res: { data: { experiment: ExperimentInfo } }) => {
+  if (res?.data) {
+    const data = res.data.experiment
+    data.teacher_name = data.teacher.reduce((a: any, b: any) => a.push(b.name) && a, []).join(',')
+    experimentInfo = data
+  }
+})
+
+let detail = ref<any>({})
+getRecordList({ sno_number: route.query.snoNumber }).then(res => {
+  if (res.data) {
+    detail.value = res.data.list[0]
+  }
+})
+
+const data = $computed(() => {
+  return detail.value?.details ? JSON.parse(detail.value.details) : {}
+})
+</script>
+
+<template>
+  <AppCard>
+    <el-form label-suffix=":" inline class="info">
+      <el-form-item label="实验名称">{{ experimentInfo?.name }}</el-form-item>
+      <el-form-item label="课程名称">{{ experimentInfo?.course_name }}</el-form-item>
+      <el-form-item label="指导教师">{{ experimentInfo?.teacher_name }}</el-form-item>
+      <el-form-item label="实验学时">{{ experimentInfo?.length }}</el-form-item>
+    </el-form>
+    <el-divider />
+    <Report
+      :detail="data"
+      :experimentName="experimentInfo?.name"
+      :teacherName="experimentInfo?.teacher_name"
+      :studentName="detail?.name"
+      ref="reportRef"
+    />
+  </AppCard>
+</template>
+
+<style lang="scss" scoped>
+.info {
+  display: flex;
+  justify-content: space-between;
+}
+</style>