Skip to content

X
x-training-new
提交 24b0b1ff authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

feat: 产品分析开发完成

上级 b59f8946
显示空白字符变更
内嵌 并排
正在显示 包含 246 行增加 和 107 行删除
src/modules/product-analysis/api.js
浏览文件 @ 24b0b1ff
......@@ -16,3 +16,20 @@ export function getCasesList(id) {
export function selectCase(id) {
return httpRequest.post(`/api/xtraining/api/v1/${id}/select-case`, {})
}
// 获取产品分析填空题
export function caseCompletions(id) {
return httpRequest.get(`/api/xtraining/api/v1/${id}/case-completions`, {})
}
// 提交案例（产品）分析报告
export function commitCase(data) {
return httpRequest.post('/api/xtraining/api/v1/commit-case', data, {
headers: { 'Content-Type': 'application/json' }
})
}
// 获取案例（产品）分析结答题结果
export function getCommitCase() {
return httpRequest.get('/api/xtraining/api/v1/commit-case-detail', {})
}
src/modules/product-analysis/components/Compares.vue
浏览文件 @ 24b0b1ff
......@@ -21,6 +21,9 @@
<script>
import Box from './Box.vue'
export default {
props: {
data: { type: Object }
},
components: { Box },
data() {
return {
......@@ -41,6 +44,16 @@ export default {
}
this.inputList.splice(index, 1)
}
},
created() {
console.log(this.data.completions[0])
if (this.data.completions[0].commit_answer !== '') {
this.inputList = []
this.data.completions[0].commit_answer.split(';').forEach(item => {
const val = item.split(',')
this.inputList.push({ input1: val[0], input2: val[1] })
})
}
}
}
</script>
......
src/modules/product-analysis/components/Cost.vue
浏览文件 @ 24b0b1ff
......@@ -5,7 +5,7 @@
<img src="https://webapp-pub.ezijing.com/x-training-new/cost-i1.png" class="icon">
<div class="right-con">
<div class="num">
<input v-model="form.input1" type="text">
<input v-model="data.completions[0].commit_answer" type="text" placeholder="请输入">
<span>%</span>
</div>
<div class="name">托管费</div>
......@@ -15,7 +15,7 @@
<img src="https://webapp-pub.ezijing.com/x-training-new/cost-i2.png" class="icon">
<div class="right-con col-blue">
<div class="num">
<input v-model="form.input2" type="text">
<input v-model="data.completions[1].commit_answer" type="text" placeholder="请输入">
<span>%</span>
</div>
<div class="name">管理费</div>
......@@ -29,13 +29,11 @@
import Box from './Box.vue'
export default {
components: { Box },
props: {
data: { type: Object }
},
data() {
return {
form: {
input1: '',
input2: ''
}
}
return {}
}
}
</script>
......@@ -85,6 +83,9 @@ export default {
height: 28px;
width: 65px;
text-align: right;
&::-webkit-input-placeholder{
font-size: 16px;
}
}
span{
font-size: 14px;
......
src/modules/product-analysis/components/Features.vue
浏览文件 @ 24b0b1ff
<template>
<box title="风险收益特征">
<div class="content-box">
<input type="text" class="input-id1" placeholder="请输入基金类型">
<input type="text" class="input-id2" placeholder="请输入基金类型">
<input type="text" class="input-id3" placeholder="请输入基金类型">
<input type="text" class="input-id4" placeholder="请输入基金类型">
<input v-for="(item, index) in data.completions" :key="index" v-model="item.commit_answer" type="text" :class="`input-id${index + 1}`" placeholder="请输入基金类型">
</div>
</box>
</template>
......@@ -12,7 +9,13 @@
<script>
import Box from './Box.vue'
export default {
components: { Box }
components: { Box },
props: {
data: { type: Object }
},
mounted() {
console.log(this.data)
}
}
</script>
......
src/modules/product-analysis/components/InvestTarget.vue
浏览文件 @ 24b0b1ff
<template>
<box title="投资目标">
<textarea></textarea>
<textarea v-for="(item, index) in data.completions" v-model="item.commit_answer" :key="index"></textarea>
</box>
</template>
......@@ -9,15 +9,23 @@ import Box from './Box.vue'
export default {
components: {
Box
},
props: {
data: {
type: Object
}
},
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
textarea{
textarea {
width: 603px;
height: 150px;
background: #ECECEC;
background: #ececec;
border-radius: 10px;
outline: none;
resize: none;
......
src/modules/product-analysis/components/Products.vue
浏览文件 @ 24b0b1ff
<template>
<box title="产品概括">
<ul>
<li v-for="(item, index) in productList" :key="index">
<img :src="item.icon" class="icon">
<div class="tag">{{ item.tag }}</div>
<textarea placeholder="请输入"></textarea>
<li v-for="(item, index) in data.completions" :key="index">
<img :src="`https://webapp-pub.ezijing.com/x-training-new/products${index + 1}.png`" class="icon" />
<div class="tag">{{ item.subject }}</div>
<textarea placeholder="请输入" v-model="item.commit_answer"></textarea>
</li>
</ul>
</box>
......@@ -14,121 +14,99 @@
import Box from './Box.vue'
export default {
components: { Box },
data() {
return {
productList: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products1.png',
tag: '基金类型'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products2.png',
tag: '运作方式'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products3.png',
tag: '开放频率'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products4.png',
tag: '交易币种'
props: {
data: { type: Object }
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products5.png',
tag: '基金管理人'
data() {
return {}
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products6.png',
tag: '基金委托人'
}
]
}
created() {
}
}
</script>
<style lang="scss" scoped>
ul{
ul {
padding-top: 27px;
display: flex;
flex-wrap: wrap;
margin-right: -24px;
li{
li {
margin-right: 18px;
margin-bottom: 13px;
width: 198px;
height: 240px;
background: #F1FCF9;
border: 1px solid #B8EBDE;
background: #f1fcf9;
border: 1px solid #b8ebde;
border-radius: 12px;
&:nth-child(2){
background: #ECFAFC;
border: 1px solid #B5EBEB;
textarea{
border-bottom: 1px solid #A5E1E9;
color: #62C2D0;
&:nth-child(2) {
background: #ecfafc;
border: 1px solid #b5ebeb;
textarea {
border-bottom: 1px solid #a5e1e9;
color: #62c2d0;
}
}
&:nth-child(3){
background: #FFFDF0;
border: 1px solid #F0ECCB;
&:nth-child(3) {
background: #fffdf0;
border: 1px solid #f0eccb;
margin-right: 0;
textarea{
border-bottom: 1px solid #DAD396;
color: #D9D292;
textarea {
border-bottom: 1px solid #dad396;
color: #d9d292;
}
}
&:nth-child(4){
background: #FDF8EE;
border: 1px solid #ECD7AA;
textarea{
border-bottom: 1px solid #E2C485;
color: #E2C485;
&:nth-child(4) {
background: #fdf8ee;
border: 1px solid #ecd7aa;
textarea {
border-bottom: 1px solid #e2c485;
color: #e2c485;
}
}
&:nth-child(5){
background: #FCEDE9;
border: 1px solid #F2C1B6;
textarea{
border-bottom: 1px solid #DE9888;
color: #DE9888;
&:nth-child(5) {
background: #fcede9;
border: 1px solid #f2c1b6;
textarea {
border-bottom: 1px solid #de9888;
color: #de9888;
}
}
&:nth-child(6){
background: #F1FCF9;
border: 1px solid #B8EBDE;
&:nth-child(6) {
background: #f1fcf9;
border: 1px solid #b8ebde;
margin-right: 0;
textarea{
border-bottom: 1px solid #7BC1AF;
color: #7BC1AF;
textarea {
border-bottom: 1px solid #7bc1af;
color: #7bc1af;
}
}
.icon{
.icon {
width: 82px;
display: block;
margin: 36px auto 18px;
}
.tag{
.tag {
text-align: center;
font-size: 16px;
color: #8E8E8E;
color: #8e8e8e;
line-height: 100%;
}
textarea{
textarea {
width: 150px;
height: 43px;
outline: none;
resize: none;
margin: 15px auto 0;
display: block;
border-bottom: 1px solid #7BC1AF;
border-bottom: 1px solid #7bc1af;
background: none;
color: #68B8A4;
color: #68b8a4;
text-align: center;
padding-top: 10px;
&::-webkit-input-placeholder{
&::-webkit-input-placeholder {
font-size: 18px;
color: #CACACA;
color: #cacaca;
}
}
}
......
src/modules/product-analysis/views/Report.vue
浏览文件 @ 24b0b1ff
......@@ -2,29 +2,32 @@
<div class="product-analysis-report">
<div class="page-mian">
<div class="pdf-left">
<embed class="embed" width="100%" height="100%" src="https://test-certificate-frontend-api.ezijing.com/files/6816543487312265216.pdf" />
<embed class="embed" width="100%" height="100%" :src="cases.pdf_uris[0]" />
</div>
<div class="right-content">
<input type="text" class="code" placeholder="请输入基金简称+基金代码" />
<input type="text" class="code" placeholder="请输入基金简称+基金代码" v-model="titleValue"/>
<div class="title">产品分析报告</div>
<div v-for="(item, index) in completions" :key="index">
<!-- 产品概括 -->
<product></product>
<product ref="product" v-if="item.tag === 'product_overview'" :data="item"></product>
<!-- 投资目标 -->
<invest-target></invest-target>
<invest-target ref="investTarget" v-if="item.tag === 'investment_objectives'" :data="item"></invest-target>
<!-- 业绩比较基准 -->
<compares></compares>
<compares ref="compares" v-if="item.tag === 'performance_benchmark'" :data="item"></compares>
<!-- 风险收益特征 -->
<features></features>
<features ref="features" v-if="item.tag === 'risk_return_characteristics'" :data="item"></features>
<!-- 基金涉及费用 -->
<cost ref="cost"></cost>
<cost ref="cost" v-if="item.tag === 'fund_related_expenses'" :data="item"></cost>
</div>
<!-- 提交 -->
<div class="submit-btn" @click="submit">提交报告</div>
<div class="submit-btn" @click="commitCase">提交报告</div>
</div>
</div>
</div>
</template>
<script>
import { caseCompletions, getCommitCase, commitCase } from '../api'
import Product from '../components/Products.vue'
import InvestTarget from '../components/InvestTarget.vue'
import Compares from '../components/Compares.vue'
......@@ -38,9 +41,100 @@ export default {
Features,
Cost
},
data() {
return {
completions: [],
resultCompletions: [],
titleValue: ''
}
},
computed: {
cases() {
return this.$store.state.case
}
},
mounted() {
this.getCommitCase()
},
methods: {
submit() {
console.log(this.$refs.cost.form)
// 模板 数据回显
caseCompletions(id) {
caseCompletions(id).then(res => {
res.data.items.map(item => {
return item.completions.map(cItem => {
if (!Array.isArray(this.resultCompletions)) {
const findData = this.resultCompletions.answer.find(fItem => { return fItem.id === cItem.id })
findData ? cItem.commit_answer = findData.commit_answer : cItem.commit_answer = ''
} else {
cItem.commit_answer = ''
}
return cItem
})
})
this.completions = res.data.items
// 标题回显
this.titleValue = this.completions.find(item => { return item.tag === 'product_title' }).completions[0].commit_answer
})
},
// 结果
getCommitCase() {
getCommitCase().then(res => {
this.resultCompletions = res.data.records
this.caseCompletions(this.cases.id)
})
},
// 提交
commitCase() {
// 产品概括数据
const productCount = []
this.$refs.product[0].data.completions.forEach(item => {
productCount.push({ id: item.id, commit_answer: item.commit_answer })
})
// 投资目标
const originalData = this.$refs.investTarget[0].data.completions[0]
const investTargetCount = [{ id: originalData.id, commit_answer: originalData.commit_answer }]
// 业绩比较基准数据
const comparesCount = []
this.$refs.compares[0].inputList.forEach(item => {
comparesCount.push(`${item.input1},${item.input2}`)
})
const comparesData = {
id: this.$refs.compares[0].data.completions[0].id,
commit_answer: comparesCount.join(';')
}
// 风险收益特征数据
const featuresCount = []
this.$refs.features[0].data.completions.forEach(item => {
featuresCount.push({ id: item.id, commit_answer: item.commit_answer })
})
// 基金涉及费用数据
const costCount = []
this.$refs.cost[0].data.completions.forEach(item => {
costCount.push({ id: item.id, commit_answer: item.commit_answer })
})
// 标题数据
const findTitleData = this.completions.find(item => { return item.tag === 'product_title' }).completions[0]
const titCount = [{ id: findTitleData.id, commit_answer: this.titleValue }]
const allData = [...productCount, ...investTargetCount, ...[comparesData], ...featuresCount, ...costCount, ...titCount]
if (allData.findIndex(item => { return item.commit_answer === '' }) === -1) {
commitCase({ answers: JSON.stringify(allData) }).then(res => {
const data = {
score: res.data.score,
data: [
this.$refs.product[0].data,
this.$refs.investTarget[0].data,
this.$refs.compares[0].data,
this.$refs.features[0].data,
this.$refs.cost[0].data,
{ tag: 'title', value: this.titleValue }
]
}
window.localStorage.reportData = JSON.stringify(data)
this.$router.push({ path: '/product-analysis/result' })
})
} else {
this.$message('请填写完整')
}
}
}
}
......@@ -53,7 +147,7 @@ input {
outline: none;
}
.product-analysis-report {
padding: 33px 100px;
padding: 33px 50px;
.page-mian {
overflow: hidden;
background: #fff;
......
src/modules/product-analysis/views/Result.vue
浏览文件 @ 24b0b1ff
<template>
<div class="result-box">
<div class="pop-layer"></div>
<div class="trophy-box">
<img src="https://webapp-pub.ezijing.com/x-training-new/trophy.png">
<div class="text">你的得分是<span>98</span>分</div>
<div class="text">你的得分是<span>{{ score }}</span>分</div>
</div>
<div class="title-box">
<div class="title">产品分析报告</div>
<div class="code">广发资源优选股票053476</div>
<div class="code">{{ title }}</div>
</div>
<div v-for="(item, index) in completions" :key="index">
<!-- 产品概括 -->
<product></product>
<product ref="product" v-if="item.tag === 'product_overview'" :data="item"></product>
<!-- 投资目标 -->
<invest-target></invest-target>
<invest-target ref="investTarget" v-if="item.tag === 'investment_objectives'" :data="item"></invest-target>
<!-- 业绩比较基准 -->
<compares></compares>
<compares ref="compares" v-if="item.tag === 'performance_benchmark'" :data="item"></compares>
<!-- 风险收益特征 -->
<features></features>
<features ref="features" v-if="item.tag === 'risk_return_characteristics'" :data="item"></features>
<!-- 基金涉及费用 -->
<cost ref="cost"></cost>
<cost ref="cost" v-if="item.tag === 'fund_related_expenses'" :data="item"></cost>
</div>
</div>
</template>
......@@ -34,6 +37,19 @@ export default {
Compares,
Features,
Cost
},
data() {
return {
completions: [],
score: '',
title: ''
}
},
created() {
const localData = JSON.parse(window.localStorage.reportData)
this.completions = localData.data
this.score = localData.score
this.title = this.completions.find(item => { return item.tag === 'title' }).value
}
}
</script>
......@@ -47,6 +63,15 @@ export default {
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
position: relative;
.pop-layer{
position: absolute;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
}
.trophy-box{
padding: 50px 0 38px 0;
position: relative;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论