Skip to content

X
x-training-new
提交 5b1b656d authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

feat: 用户研究接口调试

上级 84cade2b
显示空白字符变更
内嵌 并排
正在显示 包含 227 行增加 和 42 行删除
src/modules/test/views/Echart.vue
浏览文件 @ 5b1b656d
<template>
<div class="echart">
<svg t="1630856402391" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2386" width="200" height="200"><path d="M0 0m512 0l0 0q512 0 512 512l0 0q0 512-512 512l0 0q-512 0-512-512l0 0q0-512 512-512Z" fill="#0AC013" opacity=".2" p-id="2387"></path><path d="M446.72 595.5712l106.5856-15.36a9.4336 9.4336 0 0 0 7.104-5.12l47.6672-95.3856 47.6544 95.3856a9.4336 9.4336 0 0 0 7.104 5.12l5.6704 0.8192V269.9392a30.4256 30.4256 0 0 0-30.5664-30.208H283.2384a30.4256 30.4256 0 0 0-30.5792 30.208v435.4304a30.4256 30.4256 0 0 0 30.5792 30.208h233.3312l9.984-57.6a9.2544 9.2544 0 0 0-2.7136-8.2304L446.72 595.5712z" fill="#FFFFFF" p-id="2388"></path><path d="M608.0768 732.3264c1.5104 0 3.008 0.3712 4.352 1.0624l4.2496 2.2144 91.0848 47.36-18.176-104.96a9.2544 9.2544 0 0 1 2.7136-8.256l77.12-74.24-100.9024-14.4768-5.6704-0.8192a9.4336 9.4336 0 0 1-7.1168-5.12l-47.7312-95.36-47.616 95.3856a9.4336 9.4336 0 0 1-7.104 5.12L446.72 595.52l77.1328 74.24a9.2544 9.2544 0 0 1 2.7136 8.256l-9.984 57.6-8.2048 47.36 91.0848-47.36 4.2496-2.2144a9.536 9.536 0 0 1 4.3904-1.0624l-0.0256-0.0128z" fill="#F9DB91" p-id="2389"></path><path d="M348.7872 475.6224h197.9264a9.3824 9.3824 0 0 0 9.4336-9.3184 9.3824 9.3824 0 0 0-9.4336-9.3312H348.7872a9.3824 9.3824 0 0 0-9.4336 9.3184 9.3824 9.3824 0 0 0 9.4336 9.3312zM510.3872 500.5568a9.3824 9.3824 0 0 0-9.4464-9.3184H348.7872a9.3824 9.3824 0 0 0-9.4336 9.3184c0.0384 5.1712 4.2624 9.344 9.4336 9.3184h152.1536a9.3824 9.3824 0 0 0 9.4336-9.3184h0.0128zM348.7872 353.216h197.9264a9.3824 9.3824 0 0 0 9.4336-9.3184 9.3824 9.3824 0 0 0-9.4336-9.3312H348.7872a9.3824 9.3824 0 0 0-9.4336 9.3184 9.3824 9.3824 0 0 0 9.4336 9.3312zM510.3872 378.1376a9.3824 9.3824 0 0 0-9.4464-9.3184H348.7872a9.3824 9.3824 0 0 0-9.4336 9.3184c0.0384 5.1712 4.2624 9.344 9.4336 9.3184h152.1536a9.3824 9.3824 0 0 0 9.4336-9.3184h0.0128z" fill="#512C56" p-id="2390"></path><path d="M709.9904 793.6a7.7184 7.7184 0 0 1-3.648-0.9216l-98.2656-51.0208-98.2656 51.0208a7.8464 7.8464 0 0 1-9.6256-1.8304 7.7568 7.7568 0 0 1-1.728-6.3232l6.8864-39.616H283.2128A40 40 0 0 1 243.2 705.3696V269.9264A39.9872 39.9872 0 0 1 283.2128 230.4h354.7264a40 40 0 0 1 40.0128 39.552v303.0272l96.1152 13.7856c2.944 0.384 5.4272 2.432 6.4 5.2352a7.68 7.68 0 0 1-1.9968 7.9488L698.88 676.48l18.7648 108.0832a7.68 7.68 0 0 1-3.0848 7.552 7.808 7.808 0 0 1-4.5696 1.4848z m-101.888-70.6048a19.2 19.2 0 0 1 8.7936 2.1376l78.4 40.7168-14.9632-86.1696a18.5216 18.5216 0 0 1 5.4144-16.512l63.3984-61.056-87.6544-12.5952a18.88 18.88 0 0 1-14.208-10.24l-39.2064-78.4768-39.1936 78.4768a18.88 18.88 0 0 1-14.2208 10.24l-87.6544 12.5952 63.4112 61.0688c4.4416 4.2496 6.4896 10.432 5.44 16.4864L520.96 765.8624l78.4-40.7168a19.2 19.2 0 0 1 8.7424-2.1504z m-324.864-473.9456a21.2224 21.2224 0 0 0-21.1456 20.9024v435.4176a21.184 21.184 0 0 0 21.1328 20.9152h225.3952l8.6528-49.8048-79.5136-76.544a7.68 7.68 0 0 1 4.4288-13.1456l109.8368-15.7696 49.1136-98.3424a7.8464 7.8464 0 0 1 14.0032 0l44.0064 88.0768V269.952a21.2224 21.2224 0 0 0-21.1328-20.9024H283.2384z" fill="#512C56" p-id="2391"></path></svg>
<div id="myChart" :style="{width: '600px', height: '300px'}"></div>
</div>
</template>
......
src/modules/user-study/api.js
浏览文件 @ 5b1b656d
......@@ -16,3 +16,11 @@ export function getChart(params) {
export function submitReport(data) {
return httpRequest.post('/api/xtraining/api/v1/analysis-users/report', data)
}
/** 提交用户分析报告 */
export function clearScore() {
return httpRequest.post('/api/xtraining/api/v1/analysis-users/clear-error-score')
}
/** 获取当前选择题对应的图表数据 */
export function getReport(params) {
return httpRequest.get('/api/xtraining/api/v1/analysis-users/report-detail', { params })
}
src/modules/user-study/components/AnswerList.vue
浏览文件 @ 5b1b656d
......@@ -32,9 +32,6 @@ export default {
data() {
return {}
},
created() {
console.log(this.list)
},
methods: {
handleClick(item) {
this.$emit('select', item)
......
src/modules/user-study/components/EchartBar.vue
浏览文件 @ 5b1b656d
......@@ -69,6 +69,7 @@ export default {
handler(v) {
if (v.id) {
this.options.xAxis.data = v.options.map(item => item.subject)
this.options.title.text = v.subject
this.$nextTick(() => {
this.echart.setOption(this.options)
})
......
src/modules/user-study/components/MultipleChoice.vue
浏览文件 @ 5b1b656d
......@@ -58,6 +58,7 @@ export default {
this.selection.splice(0, 1, item)
}
}
this.$emit('select')
}
}
}
......
src/modules/user-study/components/ScoreSvg.vue 0 → 100644
浏览文件 @ 5b1b656d
<template>
<svg t="1630856402391" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2386" width="200" height="200"><path d="M0 0m512 0l0 0q512 0 512 512l0 0q0 512-512 512l0 0q-512 0-512-512l0 0q0-512 512-512Z" fill="#0AC013" opacity=".2" p-id="2387"></path><path d="M446.72 595.5712l106.5856-15.36a9.4336 9.4336 0 0 0 7.104-5.12l47.6672-95.3856 47.6544 95.3856a9.4336 9.4336 0 0 0 7.104 5.12l5.6704 0.8192V269.9392a30.4256 30.4256 0 0 0-30.5664-30.208H283.2384a30.4256 30.4256 0 0 0-30.5792 30.208v435.4304a30.4256 30.4256 0 0 0 30.5792 30.208h233.3312l9.984-57.6a9.2544 9.2544 0 0 0-2.7136-8.2304L446.72 595.5712z" fill="#FFFFFF" p-id="2388"></path><path d="M608.0768 732.3264c1.5104 0 3.008 0.3712 4.352 1.0624l4.2496 2.2144 91.0848 47.36-18.176-104.96a9.2544 9.2544 0 0 1 2.7136-8.256l77.12-74.24-100.9024-14.4768-5.6704-0.8192a9.4336 9.4336 0 0 1-7.1168-5.12l-47.7312-95.36-47.616 95.3856a9.4336 9.4336 0 0 1-7.104 5.12L446.72 595.52l77.1328 74.24a9.2544 9.2544 0 0 1 2.7136 8.256l-9.984 57.6-8.2048 47.36 91.0848-47.36 4.2496-2.2144a9.536 9.536 0 0 1 4.3904-1.0624l-0.0256-0.0128z" fill="#F9DB91" p-id="2389"></path><path d="M348.7872 475.6224h197.9264a9.3824 9.3824 0 0 0 9.4336-9.3184 9.3824 9.3824 0 0 0-9.4336-9.3312H348.7872a9.3824 9.3824 0 0 0-9.4336 9.3184 9.3824 9.3824 0 0 0 9.4336 9.3312zM510.3872 500.5568a9.3824 9.3824 0 0 0-9.4464-9.3184H348.7872a9.3824 9.3824 0 0 0-9.4336 9.3184c0.0384 5.1712 4.2624 9.344 9.4336 9.3184h152.1536a9.3824 9.3824 0 0 0 9.4336-9.3184h0.0128zM348.7872 353.216h197.9264a9.3824 9.3824 0 0 0 9.4336-9.3184 9.3824 9.3824 0 0 0-9.4336-9.3312H348.7872a9.3824 9.3824 0 0 0-9.4336 9.3184 9.3824 9.3824 0 0 0 9.4336 9.3312zM510.3872 378.1376a9.3824 9.3824 0 0 0-9.4464-9.3184H348.7872a9.3824 9.3824 0 0 0-9.4336 9.3184c0.0384 5.1712 4.2624 9.344 9.4336 9.3184h152.1536a9.3824 9.3824 0 0 0 9.4336-9.3184h0.0128z" fill="#512C56" p-id="2390"></path><path d="M709.9904 793.6a7.7184 7.7184 0 0 1-3.648-0.9216l-98.2656-51.0208-98.2656 51.0208a7.8464 7.8464 0 0 1-9.6256-1.8304 7.7568 7.7568 0 0 1-1.728-6.3232l6.8864-39.616H283.2128A40 40 0 0 1 243.2 705.3696V269.9264A39.9872 39.9872 0 0 1 283.2128 230.4h354.7264a40 40 0 0 1 40.0128 39.552v303.0272l96.1152 13.7856c2.944 0.384 5.4272 2.432 6.4 5.2352a7.68 7.68 0 0 1-1.9968 7.9488L698.88 676.48l18.7648 108.0832a7.68 7.68 0 0 1-3.0848 7.552 7.808 7.808 0 0 1-4.5696 1.4848z m-101.888-70.6048a19.2 19.2 0 0 1 8.7936 2.1376l78.4 40.7168-14.9632-86.1696a18.5216 18.5216 0 0 1 5.4144-16.512l63.3984-61.056-87.6544-12.5952a18.88 18.88 0 0 1-14.208-10.24l-39.2064-78.4768-39.1936 78.4768a18.88 18.88 0 0 1-14.2208 10.24l-87.6544 12.5952 63.4112 61.0688c4.4416 4.2496 6.4896 10.432 5.44 16.4864L520.96 765.8624l78.4-40.7168a19.2 19.2 0 0 1 8.7424-2.1504z m-324.864-473.9456a21.2224 21.2224 0 0 0-21.1456 20.9024v435.4176a21.184 21.184 0 0 0 21.1328 20.9152h225.3952l8.6528-49.8048-79.5136-76.544a7.68 7.68 0 0 1 4.4288-13.1456l109.8368-15.7696 49.1136-98.3424a7.8464 7.8464 0 0 1 14.0032 0l44.0064 88.0768V269.952a21.2224 21.2224 0 0 0-21.1328-20.9024H283.2384z" fill="#512C56" p-id="2391"></path></svg>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
\ No newline at end of file
src/modules/user-study/components/UserTable.vue
浏览文件 @ 5b1b656d
......@@ -4,25 +4,57 @@
<el-table-column prop="name" label="客户姓名" min-width="120" />
<el-table-column prop="id" label="客户编号" min-width="120" />
<el-table-column prop="age" label="年龄" min-width="100" />
<el-table-column prop="gendar" label="性别" min-width="100" />
<el-table-column prop="property" label="可支配资产" min-width="120" />
<el-table-column prop="experience" label="理财经验" min-width="120" />
<el-table-column prop="sex" label="性别" min-width="100" >
<template slot-scope="scope">{{scope.row.sex === 1 ? '男' : '女'}}</template>
</el-table-column>
<el-table-column prop="property" label="可支配资产" min-width="120" >
<template slot-scope="scope">{{scope.row.disposable_assets}}万</template>
</el-table-column>
<el-table-column label="理财经验" min-width="120" >
<template slot-scope="scope">{{scope.row.financial_experience}}年</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination layout="prev, pager, next" :total="total"></el-pagination>
<el-pagination :current-page.sync="page" layout="prev, pager, next" :total="total" @current-change="fetchTableList"></el-pagination>
</div>
</div>
</template>
<script>
import { getUserList } from '../api'
export default {
props: {
params: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
tableData: [
{ name: '某某某', id: '1111', age: 18, gendar: '男', property: '20万', experience: '3年' },
{ name: '张三', id: '2222', age: 22, gendar: '女', property: '5-10万', experience: '5-10年' },
{ name: '李四', id: '3333', age: 19, gendar: '男', property: '30万', experience: '3年以内' }
],
total: 1000
tableData: [],
total: 1000,
page: 1,
limit: 10
}
},
watch: {
params: {
handler(v) {
this.fetchTableList()
},
immediate: true
}
},
methods: {
fetchTableList() {
const params = Object.assign({ page: this.page, limit: 10 }, this.params)
getUserList(params).then(res => {
if (res.code === 0 && res.data) {
this.total = res.data.total
this.tableData = res.data.data
}
})
}
}
}
......
src/modules/user-study/views/Index.vue
浏览文件 @ 5b1b656d
......@@ -8,14 +8,14 @@
<el-button v-show="showTool" type="primary" size="medium" round @click="showTool = false">关闭工具</el-button>
</div>
<div class="questions" v-if="!showTool">
<multiple-choice :choice="current.choice" v-if="status !== 1">
<template #btn-prev v-if="status === 0">
<multiple-choice :choice="current.choice" v-if="['0', '2'].includes(status)" @select="handleChoiceSelect">
<template #btn-prev v-if="status === '0'">
<el-button v-if="current.index !== 0" size="medium" @click="handlePrev" round>上一题</el-button>
</template>
<template #btn-center v-if="status === 2">
<template #btn-center v-if="status === '2'">
<el-button size="medium" @click="handleReturn" round>返回</el-button>
</template>
<template #btn-next v-if="status === 0">
<template #btn-next v-if="status === '0'">
<el-button v-if="current.index < questions.length - 1" type="primary" size="medium" @click="handleNext" round>下一题</el-button>
<el-button v-else type="primary" size="medium" @click="handleComplete" round>完成选择</el-button>
</template>
......@@ -24,7 +24,7 @@
<p>根据您选择的目标人群特征分析，此类受众并不适合当前的金融产品,请重新选择！</p>
<answer-list :list="questions" @select="handleSelect"></answer-list>
<div style="text-align:center;">
<el-button type="primary" size="medium" @click="handleFinish" round>完成报告</el-button>
<el-button v-if="status !== '3'" type="primary" size="medium" @click="handleFinish" round>完成报告</el-button>
</div>
</div>
</div>
......@@ -36,11 +36,17 @@
</div>
</div>
<div class="right">
<div class="score" v-if="status === '3'">
<score-svg></score-svg>
<p>{{score}}分</p>
</div>
<template v-else>
<tabs v-model="tabActive" :list="list" @tab-click="handleTabClick"></tabs>
<div class="echart-cont" v-show="tabActive === '1'">
<echart-bar :value="current.choice"/>
</div>
<user-table v-show="tabActive === '2'" />
<user-table :params="tableFilter" v-show="tabActive === '2'" />
</template>
</div>
</div>
</div>
......@@ -53,10 +59,11 @@ import Tabs from '../components/Tabs.vue'
import AnswerList from '../components/AnswerList.vue'
import UserTable from '../components/UserTable.vue'
import EchartBar from '../components/EchartBar.vue'
import ScoreSvg from '../components/ScoreSvg.vue'
// api
import { getQuestions } from '../api'
import { getQuestions, submitReport, clearScore, getReport } from '../api'
export default {
components: { MultipleChoice, Tabs, AnswerList, UserTable, EchartBar },
components: { MultipleChoice, Tabs, AnswerList, UserTable, EchartBar, ScoreSvg },
data() {
return {
showTool: false,
......@@ -75,27 +82,41 @@ export default {
}
],
selection: [],
tableFilter: {},
current: {
index: 0,
choice: {}
},
status: 0, // 0未完成，1，已完成，2，修改
status: '0', // '0':未完成，'1':已完成，'2':修改, '3':成绩
code: '',
tabActive: '1',
list: [
{ label: '数据展示', value: '1' },
{ label: '数据列表', value: '2' }
]
],
score: 0
}
},
created() {
window.setTimeout(() => {
this.current.index = 0
this.current.choice = this.questions[0]
}, 1000)
this.fetchQuestions()
this.init()
this.status = this.$route.query.type || '0'
},
methods: {
init() {
Promise.all([this.fetchQuestions(), this.fetchGetReport()]).then(res => {
// 组装数据
const questions = res[0]
const selection = res[1].answer.options
if (selection.length > 0 && this.status !== '3') {
this.status = '1'
}
this.initQuestions(questions, selection)
this.score = res[1].answer.score
this.handleChoiceSelect()
}).catch(err => {
console.log(err)
})
},
handlePrev() {
this.current.index--
this.current.choice = this.questions[this.current.index]
......@@ -107,31 +128,135 @@ export default {
}
},
handleComplete() {
console.log(this.questions)
this.status = 1
},
handleTabClick() {},
handleChoiceSelect() {
const tableFilter = {}
this.questions.forEach(item => {
if (item.selection.length) {
tableFilter[item.tag] = item.selection[0].tag
}
})
this.tableFilter = tableFilter
},
handleSelect(val) {
if (this.status !== '3') {
this.current.index = val.index - 1
this.current.choice = val
this.status = 2
this.status = '2'
}
},
handleReturn() {
this.status = 1
this.status = '1'
},
handleFinish() {
const selection = []
const isFinish = true
for (let i = 0; i < this.questions.length; i++) {
const item = this.questions[i]
if (item.selection.length) {
selection.push(item.selection[0].id)
} else {
this.$message.error('请完成全部选题再提交')
this.isFinish = false
break
}
}
if (isFinish) {
this.fetchSubmitReport(selection)
}
},
handleSubmit() {
this.$message.error('暂未开通此功能')
},
initQuestions(questions, selection) {
questions.forEach((item, index) => {
let selectItem
if (selection.length) {
selectItem = selection.find(it => it.question_id === item.id)
}
if (selectItem) {
const opt = item.options.find(it => it.id === selectItem.id)
item.selection = [opt]
} else {
item.selection = []
}
item.index = index + 1
})
this.questions = questions
this.current.index = 0
this.current.choice = this.questions[0]
},
handleFinish() {},
handleSubmit() {},
fetchQuestions() {
// getQuestions().then(res => {
// if (res.code === 0 && res.data && Array.isArray(res.data.items)) {
// const list = res.data.items
// list.forEach((item, index) => {
// item.selection = []
// item.index = index + 1
// })
// this.questions = list
// this.current.index = 0
// this.current.choice = this.questions[0]
// }
// })
return new Promise((resolve, reject) => {
getQuestions().then(res => {
if (res.code === 0 && res.data && Array.isArray(res.data.items)) {
const list = res.data.items
list.forEach((item, index) => {
item.selection = []
item.index = index + 1
resolve(res.data.items)
} else {
reject(res)
}
}).catch((err) => reject(err))
})
this.questions = list
},
fetchSubmitReport(list) {
const params = {
option_ids: JSON.stringify(list)
}
submitReport(params).then(res => {
if (res.data) {
if (res.data.deduct_points > 10) {
this.$alert('您所选的用户标签不符合当前案例的目标客群，选择次数已超3次，您对营销目标客群选择并不熟悉，请加强学习，返回重新开始', '提示', {
confirmButtonText: '重新开始',
showClose: false,
callback: action => {
this.fetchClearScore()
}
})
} else {
this.score = res.data.score
this.status = '3'
}
}
}).catch(err => {
this.$message.error(err.message || '根据您选择的目标人群特征分析，此类受众并不适合当前的金融产品,请重新选择！')
})
},
fetchClearScore() {
clearScore().then(res => {
if (res.code === 0 && res.data && res.data.status) {
this.$message.success('重置成功！')
this.fetchQuestions().then(res => {
this.initQuestions(res, [])
}).catch(err => {
console.log(err)
})
this.status = '0'
}
})
},
fetchGetReport() {
return new Promise((resolve, reject) => {
getReport().then(res => {
if (res.code === 0 && res.data && res.data.records) {
resolve(res.data.records)
} else {
reject(res)
}
}).catch((err) => reject(err))
})
}
}
}
......@@ -213,4 +338,13 @@ h5{
padding:30px 30px 20px;
height:calc(100% - 54px);
}
.score{
text-align:center;
padding-top:100px;
}
.score p{
font-size:40px;
line-height:80px;
font-weight:bold;
}
</style>
src/modules/works-show/views/Index.vue
浏览文件 @ 5b1b656d
......@@ -13,8 +13,8 @@
<div class="user">
用户分析报告
<div class="btn-bar" v-if="user_analysis_status">
<el-button type="primary" size="medium" plain round :disabled="[0, 1, 3].includes(role)" @click="handleGo(3)">编辑</el-button>
<el-button type="primary" size="medium" round :disabled="[0, 1, 3].includes(role)" @click="handleGo(3, 1)">成绩</el-button>
<el-button type="primary" size="medium" plain round :disabled="[0, 1, 3].includes(role)" @click="handleGo(3, 1)">编辑</el-button>
<el-button type="primary" size="medium" round :disabled="[0, 1, 3].includes(role)" @click="handleGo(3, 3)">成绩</el-button>
</div>
<p class="tips" v-else>您还未完成用户分析报告，<br>请先去完成吧！</p>
</div>
......@@ -51,7 +51,7 @@ export default {
}
},
created() {
// this.fetchWorkStatus()
this.fetchWorkStatus()
},
methods: {
handleGo(index, type) {
......@@ -61,7 +61,6 @@ export default {
fetchWorkStatus() {
getWorkStatus().then(res => {
if (res.code === 0 && res.data) {
console.log(res.data)
this.case_status = res.data.case_status
this.marketing_status = res.data.marketing_status
this.user_analysis_status = res.data.user_analysis_status
......@@ -100,6 +99,7 @@ h5{
text-align:center;
color:#777;
display:inline-block;
vertical-align: top;
}
.container .product{
background:url('@/assets/images/works_show_icon1.png') #fff no-repeat center 8px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论