Skip to content

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

产品分析1.1开发

上级 10567d42
隐藏空白字符变更
内嵌 并排
正在显示 包含 633 行增加 和 129 行删除
package-lock.json
浏览文件 @ 5234ee62
......@@ -11,10 +11,12 @@
"blueimp-md5": "^2.18.0",
"echarts": "^5.2.0",
"element-ui": "^2.15.6",
"jquery": "^3.6.0",
"query-string": "^7.0.1",
"vue": "^2.6.14",
"vue-codemirror": "^4.0.6",
"vue-router": "^3.5.2",
"vue-slicksort": "^1.2.0",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
},
......@@ -3895,6 +3897,11 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true
},
"node_modules/jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
},
"node_modules/js-base64": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
......@@ -5798,6 +5805,14 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
"integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ=="
},
"node_modules/vue-slicksort": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/vue-slicksort/-/vue-slicksort-1.2.0.tgz",
"integrity": "sha512-k1324l+AnYy6MrpySN7PYL165z2EkvZmMe+BS7H/EugzS8IrZYRtoqa3QxSSWB34C7cplV1hj3c+7peKpxpYxg==",
"peerDependencies": {
"vue": ">=2.2.0"
}
},
"node_modules/vue-template-compiler": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
......@@ -9028,6 +9043,11 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true
},
"jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
},
"js-base64": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
......@@ -10533,6 +10553,12 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
"integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ=="
},
"vue-slicksort": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/vue-slicksort/-/vue-slicksort-1.2.0.tgz",
"integrity": "sha512-k1324l+AnYy6MrpySN7PYL165z2EkvZmMe+BS7H/EugzS8IrZYRtoqa3QxSSWB34C7cplV1hj3c+7peKpxpYxg==",
"requires": {}
},
"vue-template-compiler": {
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
......
package.json
浏览文件 @ 5234ee62
......@@ -14,10 +14,12 @@
"blueimp-md5": "^2.18.0",
"echarts": "^5.2.0",
"element-ui": "^2.15.6",
"jquery": "^3.6.0",
"query-string": "^7.0.1",
"vue": "^2.6.14",
"vue-codemirror": "^4.0.6",
"vue-router": "^3.5.2",
"vue-slicksort": "^1.2.0",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
},
......
src/modules/market-tools/components/DouYin.vue
浏览文件 @ 5234ee62
......@@ -9,7 +9,7 @@
<div class="step-content1" v-if="stepsIndex === 0">
<div class="video-box">
<div class="dy-box" v-if="!registerIndex">
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
<img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
<div class="works-title">{{ form.title }}</div>
<div class="works-dec">{{ form.dec }}</div>
<video :src="form.url" width="375px" class="video"></video>
......@@ -32,7 +32,7 @@
</el-form-item>
<el-form-item label="视频">
<upload-video v-model="form.url" @input="input"></upload-video>
</el-form-item>
ddd'd'd'd'd'd'd'd </el-form-item>
</el-form>
</div>
<div class="dy-box">
......@@ -59,8 +59,8 @@
</div>
<div class="mian-btn">
<el-button type="primary" @click="stepsIndex--" v-if="stepsIndex != 0">上一步</el-button>
<el-button v-if="stepsIndex == 0" type="primary" @click="registerNextBtn">下一步</el-button>
<el-button v-if="stepsIndex == 1" type="primary" @click="formNextBtn">下一步</el-button>
<el-button v-if="stepsIndex == 0" type="primary" @click="registerNextBtn">下一步</el-button>
<el-button v-if="stepsIndex == 1" type="primary" @click="formNextBtn">下一步</el-button>
<el-button type="primary" @click="submitReport" v-if="stepsIndex == 2">完成</el-button>
</div>
</div>
......@@ -99,7 +99,9 @@ export default {
}
},
formNextBtn() {
const isNull = Object.values(this.form).findIndex(item => { return item === '' })
const isNull = Object.values(this.form).findIndex(item => {
return item === ''
})
if (isNull === -1) {
this.stepsIndex++
} else {
......@@ -108,7 +110,9 @@ export default {
},
// 提交报告
submitReport() {
const isNull = Object.values(this.form).findIndex(item => { return item === '' })
const isNull = Object.values(this.form).findIndex(item => {
return item === ''
})
if (isNull !== -1) {
this.$message({ message: '请在发布视频完善信息', type: 'warning' })
return false
......@@ -119,17 +123,19 @@ export default {
return false
}
const params = [{ type: 1, commit_report: this.form }]
submitReport({ reports: JSON.stringify(params) }).then(res => {
this.$message({
message: '保存成功！你可以在作品展示中查看/编辑报告，查看成绩',
type: 'success'
submitReport({ reports: JSON.stringify(params) })
.then(res => {
this.$message({
message: '保存成功！你可以在作品展示中查看/编辑报告，查看成绩',
type: 'success'
})
setTimeout(() => {
this.$router.push({ path: '/works-show' })
}, 3000)
})
.catch(err => {
this.$message.error(err.message || '稍后再试')
})
setTimeout(() => {
this.$router.push({ path: '/works-show' })
}, 3000)
}).catch(err => {
this.$message.error(err.message || '稍后再试')
})
},
// 获取报告
getReport() {
......
src/modules/product-analysis/api.js
浏览文件 @ 5234ee62
......@@ -29,7 +29,19 @@ export function commitCase(data) {
})
}
// // 获取案例（产品）分析结答题结果
// export function getCommitCase() {
// return httpRequest.get('/api/xtraining/api/v1/commit-case-detail', {})
// }
// 获取案例（产品）分析结答题结果
export function getCommitCase() {
return httpRequest.get('/api/xtraining/api/v1/commit-case-detail', {})
export function getCommitCase(id) {
return httpRequest.get(`/api/xtraining/api/v1/answer/${id}/case-report`, {})
}
// 产品分析保存答案
export function cacheCaseAnswer(id, data) {
return httpRequest.post(`/api/xtraining/api/v1/answer/${id}/save-case-record`, data, {
headers: { 'Content-Type': 'application/json' }
})
}
src/modules/product-analysis/components/Box.vue
浏览文件 @ 5234ee62
<template>
<div class="box-card">
<div>
<div class="tit-box">
<span class="title">{{ title }}</span>
<span class="err-btn" v-if="isErrorBtn && $route.path !== '/product-analysis/report'" @click="$emit('errorResolution')">错误解析</span>
</div>
<slot></slot>
</div>
......@@ -10,39 +11,50 @@
<script>
export default {
props: {
title: { type: String }
title: { type: String },
isErrorBtn: { type: Number, default: 0 }
}
}
</script>
<style lang="scss" scoped>
.box-card{
.box-card {
padding: 0 22px 30px;
position: relative;
margin-bottom: 30px;
&::after{
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 620px;
border-bottom: 1px dashed #C0C0C0;
border-bottom: 1px dashed #c0c0c0;
}
.title{
.tit-box {
display: flex;
justify-content: space-between;
color: #4cac94;
cursor: pointer;
}
.err-btn {
position: relative;
z-index: 9999;
}
.title {
font-size: 18px;
font-weight: bold;
color: #666666;
line-height: 100%;
position: relative;
&::after{
&::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: 5px;
background: rgba(104, 184, 164, .8)
background: rgba(104, 184, 164, 0.8);
}
}
}
......
src/modules/product-analysis/components/Compares.vue
浏览文件 @ 5234ee62
<template>
<box title="业绩比较基准" class="compares-box" :id="firstItem.id">
<box title="业绩比较基准" class="compares-box" :id="firstItem.id" :isErrorBtn="isErrorBtn()" @errorResolution="errorResolution">
<ul>
<li v-for="(item, index) in inputList" :key="index">
<div class="input-box">
<input type="text" class="input1" placeholder="请输入" v-model="item.input1" />
<input type="text" :class="`input1 isDomActive ${isClass()}`" placeholder="请输入" v-model="item.input1" />
<div class="icon-x"></div>
<div class="character-input">
<div class="character">%</div>
<input type="text" class="input2" placeholder="请输入" v-model="item.input2" />
<input type="text" :class="`input2 isDomActive ${isClass()}`" placeholder="请输入" v-model="item.input2" />
</div>
<div class="el-icon-remove" @click="inputRemove(index)"></div>
</div>
......@@ -37,6 +37,19 @@ export default {
}
},
methods: {
isErrorBtn() {
const findErr = this.data.completions.findIndex(item => !item.is_correct)
return findErr + 1
},
errorResolution() {
this.$emit('errorResolution', this.data)
},
isClass() {
if (this.$route.path === '/product-analysis/result') {
return this.data.completions[0].is_correct ? '' : 'active'
}
return ''
},
inputAdd() {
this.inputList.push({ input1: '', input2: '' })
},
......@@ -49,6 +62,7 @@ export default {
}
},
created() {
console.log(this.data.completions[0].is_correct, '=123456')
if (this.firstItem.commit_answer !== '') {
this.inputList = []
this.firstItem.commit_answer.split(';').forEach(item => {
......@@ -91,10 +105,28 @@ ul {
}
.input1 {
width: 263px;
&.active{
background: #FFFFFF;
border: 1px solid #CF4C4C;
box-shadow: none;
color: rgba(102, 102, 102, 1);
&::-webkit-input-placeholder{
color: rgba(207, 25, 25, 1);
}
}
}
.input2 {
width: 210px;
padding-right: 38px;
&.active{
background: #FFFFFF;
border: 1px solid #CF4C4C;
box-shadow: none;
color: rgba(102, 102, 102, 1);
&::-webkit-input-placeholder{
color: rgba(207, 25, 25, 1);
}
}
}
.character-input {
position: relative;
......
src/modules/product-analysis/components/Cost.vue
浏览文件 @ 5234ee62
<template>
<box title="基金涉及费用">
<box title="基金涉及费用" :isErrorBtn="isErrorBtn()" @errorResolution="errorResolution">
<div class="cost-box">
<div class="li" v-for="item in data.completions" :key="item.id">
<div :class="`li isDomActive ${isClass(item)}`" v-for="item in data.completions" :key="item.id">
<img
src="https://webapp-pub.ezijing.com/x-training-new/cost-i2.png"
class="icon"
......@@ -29,6 +29,21 @@ export default {
},
data() {
return {}
},
methods: {
isErrorBtn() {
const findErr = this.data.completions.findIndex(item => !item.is_correct)
return findErr + 1
},
errorResolution() {
this.$emit('errorResolution', this.data)
},
isClass(item) {
if (this.$route.path === '/product-analysis/result') {
return item.is_correct ? '' : 'active'
}
return ''
}
}
}
</script>
......@@ -49,6 +64,9 @@ export default {
border-radius: 10px;
display: flex;
align-items: center;
&.active{
border: 1px solid #C11818;
}
.icon {
width: 53px;
height: 53px;
......
src/modules/product-analysis/components/Features.vue
浏览文件 @ 5234ee62
<template>
<box title="风险收益特征">
<box title="风险收益特征" :isErrorBtn="isErrorBtn()" @errorResolution="errorResolution">
<div class="tag-box">
<slick-list :transitionDuration="transitiTime" @sort-start="dragStart" @sort-end="dragEnd" axis="x" v-model="dragList" class="tag-flex">
<slick-item v-for="(item, index) in dragList" :key="index" :index="index">
<div class="tag" v-if="item">{{ item }}</div>
</slick-item>
</slick-list>
</div>
<div class="content-box">
<input
v-for="(item, index) in data.completions"
:key="index"
v-model="item.commit_answer"
type="text"
:class="`input-id${index + 1}`"
placeholder="请输入基金类型"
:id="item.id"
/>
<div class="answer-tag">
<slick-list :transitionDuration="transitiTime" v-model="dragTagList" @input="dragInput" @sort-start="dragListStart" @sort-end="dragListEnd">
<slick-item v-for="(item, index) in dragTagList" :key="index" :index="index" :class="isTagShow[index].show ? '' : 'hide'" :id="data.completions[index].id">
<div class="height-box">
<div :class="`input-id${index + 1} ${item ? 'tag-input2' : 'tag-input'} client-dom ${isClass(data.completions[index].is_correct)}`">
{{ item || '请拖拽标签到此处' }}
</div>
</div>
</slick-item>
</slick-list>
</div>
</div>
</box>
</template>
<script>
import $ from 'jquery'
import { SlickList, SlickItem } from 'vue-slicksort'
import Box from './Box.vue'
export default {
components: { Box },
components: { Box, SlickList, SlickItem },
props: {
data: { type: Object }
},
mounted() {
console.log(this.data)
data() {
return {
isTagShow: [
{ show: true },
{ show: true },
{ show: true },
{ show: true }
],
isShow: true,
value: '',
dragList: ['股票型基金', '混合型基金', '债券型基金', '货币型基金'],
dragTagText: '',
dragTagList: ['', '', '', ''],
transitiTime: 0,
True: true,
False: false
}
},
created() {
this.data.completions.forEach((item, index) => {
this.dragTagList[index] = item.commit_answer
// item.commit_answer
const cIndex = this.dragList.findIndex(cItem => { return cItem === item.commit_answer })
this.dragList[cIndex] = ''
})
},
methods: {
isErrorBtn() {
const findErr = this.data.completions.findIndex(item => !item.is_correct)
return findErr + 1
},
errorResolution() {
this.$emit('errorResolution', this.data)
},
isClass(item) {
if (this.$route.path === '/product-analysis/result') {
return item ? '' : 'active-red'
}
return ''
},
dragStart(event) {
// 记录被拖的name
this.dragTagText = this.dragList[event.index]
},
dragEnd(event) {
// 记录竖排tag位置
const domInfo = []
$('.client-dom').each(function (index) {
domInfo.push({
index: index,
top: $(this).offset().top - $(window).scrollTop()
})
})
// 查找横排tag被拽到竖排的那个框里
const clientData = this.findNearestNumber(domInfo, event.event.clientY)
// 判断tag是否拖到指定的区域内 x
const isItemClientX = $('.client-dom').eq(clientData.index).offset().left < event.event.clientX
if (isItemClientX) {
// 判断拖拽 终点位置有没有tag
const isDragEndVal = this.dragTagList[clientData.index]
// 横排tag被拽的索引
const dragTagIndex = this.dragList.findIndex(item => { return item === this.dragTagText })
if (isDragEndVal === '') {
// 没有tag的情况，横排减少一个tag，竖排增加一个
this.dragList[dragTagIndex] = ''
this.dragTagList[clientData.index] = this.dragTagText
} else {
// 有tag的情况，互换tag位置
this.dragList[dragTagIndex] = this.dragTagList[clientData.index]
this.dragTagList[clientData.index] = this.dragTagText
}
}
this.data.completions.map((item, index) => {
item.commit_answer = this.dragTagList[index]
return item
})
},
dragInput() {
this.data.completions.map((item, index) => {
item.commit_answer = this.dragTagList[index]
return item
})
},
dragListStart(event) {
this.isTagShow.map(item => {
item.show = false
return item
})
this.isTagShow[event.index].show = true
},
dragListEnd() {
this.isTagShow.map(item => {
item.show = true
return item
})
},
findNearestNumber(arr, target) {
return arr.reduce((pre, curr) => {
return Math.abs(pre.top - target) > Math.abs(curr.top - target) ? curr : pre
})
}
}
}
</script>
<style lang="scss" scoped>
.tag-box {
margin-top: 5px;
height: 32px;
.tag-flex {
display: flex;
justify-content: right;
}
}
.tag {
font-size: 14px;
line-height: 100%;
color: #666666;
padding: 9px 12px;
border: 1px solid #cbcbcb;
border-radius: 20px;
margin-left: 5px;
}
.content-box {
position: relative;
margin: 29px 0 0 19px;
margin: 22px 0 0 19px;
width: 491px;
height: 325px;
background: url(https://webapp-pub.ezijing.com/x-training-new/features-bg.png);
background-size: 100% 100%;
input {
width: 110px;
font-size: 16px;
color: #666666;
background: none;
outline: none;
}
.input-id1 {
position: absolute;
top: 45px;
right: -10px;
}
.input-id2 {
position: absolute;
top: 106px;
right: -45px;
}
.input-id3 {
position: absolute;
top: 170px;
right: -80px;
}
.input-id4 {
position: absolute;
top: 238px;
right: -118px;
}
.answer-tag{
position: absolute;
top: 30px;
left: 350px;
width: 300px;
height: 280px;
}
.tag-input {
font-size: 16px;
background: none;
outline: none;
font-size: 12px;
line-height: 32px;
height: 32px;
color: #b7b7b7;
border-bottom: 1px solid #72b5a4;
}
.hide{
opacity: 0;
}
.tag-input2{
height: 32px;
background: rgba(48,153,127, .1);
border: 1px solid #68B8A4 !important;
border-radius: 16px;
font-size: 14px;
color: #30997F;
opacity: 1;
line-height: 32px;
padding: 0 12px;
box-sizing: border-box;
&.active-red{
color: rgba(219, 38, 38, 1);
border: 1px solid #D95D5D !important;
background: rgba(219, 38, 38, .1);
}
}
.input-id1 {
margin-left: 40px;
}
.input-id2 {
margin-left: 75px;
}
.input-id3 {
margin-left: 110px;
}
.input-id4 {
margin-left: 150px;
}
.height-box{
// background: #000;
display: flex;
padding: 15px 0;
}
</style>
src/modules/product-analysis/components/InvestStrategy.vue 0 → 100644
浏览文件 @ 5234ee62
<template>
<box title="投资策略" :isErrorBtn="isErrorBtn()" @errorResolution="errorResolution">
<textarea :class="`isDomActive ${isClass(item)}`" v-for="(item, index) in data.completions" v-model="item.commit_answer" :key="index" :id="item.id"></textarea>
</box>
</template>
<script>
import Box from './Box.vue'
export default {
components: {
Box
},
props: {
data: {
type: Object
}
},
methods: {
isErrorBtn() {
const findErr = this.data.completions.findIndex(item => !item.is_correct)
return findErr + 1
},
errorResolution() {
this.$emit('errorResolution', this.data)
},
isClass(item) {
if (this.$route.path === '/product-analysis/result') {
return item.is_correct ? '' : 'active'
}
return ''
}
}
}
</script>
<style lang="scss" scoped>
textarea {
width: 603px;
height: 150px;
background: #ececec;
border-radius: 10px;
outline: none;
resize: none;
margin: 20px auto 0;
display: block;
padding: 15px;
box-sizing: border-box;
&.active{
background: #FFFFFF;
border: 1px solid #C11818;
}
}
</style>
src/modules/product-analysis/components/InvestTarget.vue
浏览文件 @ 5234ee62
<template>
<box title="投资目标">
<textarea v-for="(item, index) in data.completions" v-model="item.commit_answer" :key="index" :id="item.id"></textarea>
<box title="投资目标" :isErrorBtn="isErrorBtn()" @errorResolution="errorResolution">
<textarea :class="`isDomActive ${isClass(item)}`" v-for="(item, index) in data.completions" v-model="item.commit_answer" :key="index" :id="item.id"></textarea>
</box>
</template>
......@@ -15,8 +15,20 @@ export default {
type: Object
}
},
data() {
return {}
methods: {
isErrorBtn() {
const findErr = this.data.completions.findIndex(item => !item.is_correct)
return findErr + 1
},
errorResolution() {
this.$emit('errorResolution', this.data)
},
isClass(item) {
if (this.$route.path === '/product-analysis/result') {
return item.is_correct ? '' : 'active'
}
return ''
}
}
}
</script>
......@@ -33,5 +45,9 @@ textarea {
display: block;
padding: 15px;
box-sizing: border-box;
&.active{
background: #FFFFFF;
border: 1px solid #C11818;
}
}
</style>
src/modules/product-analysis/components/Products.vue
浏览文件 @ 5234ee62
<template>
<box title="产品概括">
<box title="产品概括" :isErrorBtn="isErrorBtn()" @errorResolution="errorResolution">
<ul>
<li v-for="(item, index) in data.completions" :key="index" :id="item.id" :class="item.tag">
<li v-for="(item, index) in data.completions" :key="index" :id="item.id" :class="`${item.tag} isDomActive ${isClass(item)}`">
<img :src="iconUrl(item)" class="icon" />
<div class="tag">{{ item.subject }}</div>
<div class="text" v-if="$route.path === '/product-analysis/result'">{{ item.commit_answer }}</div>
......@@ -19,6 +19,10 @@ export default {
data: { type: Object }
},
methods: {
isErrorBtn() {
const findErr = this.data.completions.findIndex(item => !item.is_correct)
return findErr + 1
},
iconUrl(item) {
const map = {
product_overview_completion: 'https://webapp-pub.ezijing.com/x-training-new/products1.png',
......@@ -29,10 +33,18 @@ export default {
fund_principal_completion: 'https://webapp-pub.ezijing.com/x-training-new/products6.png'
}
return map[item.tag]
},
isClass(item) {
if (this.$route.path === '/product-analysis/result') {
return item.is_correct ? '' : 'active'
}
return ''
},
errorResolution() {
this.$emit('errorResolution', this.data)
}
},
mounted() {
console.log(this.data, '123=-=')
}
}
</script>
......@@ -51,6 +63,14 @@ ul {
background: #f1fcf9;
border: 1px solid #b8ebde;
border-radius: 12px;
&.active{
background: #FFFFFF !important;
border: 1px solid #C11818 !important;
box-shadow: 5px 6px 13px rgba(4, 0, 0, 0.18);
textarea{
border-bottom: 1px solid #C11818 !important;
}
}
.text {
width: 151px;
font-size: 22px;
......
src/modules/product-analysis/components/Report.vue
浏览文件 @ 5234ee62
<template>
<div>
<slot></slot>
<div class="title">产品分析报告</div>
<input type="text" class="code" placeholder="请输入基金简称+基金代码" v-model="titleValue" />
<div v-for="(item, index) in completions" :key="index">
<!-- 产品概括 -->
<product ref="product" v-if="item.tag === 'product_overview'" :data="item"></product>
<!-- 投资目标 -->
<invest-target ref="investTarget" v-if="item.tag === 'investment_objectives'" :data="item"></invest-target>
<!-- 业绩比较基准 -->
<compares ref="compares" v-if="item.tag === 'performance_benchmark'" :data="item"></compares>
<!-- 风险收益特征 -->
<features ref="features" v-if="item.tag === 'risk_return_characteristics'" :data="item"></features>
<!-- 基金涉及费用 -->
<cost ref="cost" v-if="item.tag === 'fund_related_expenses'" :data="item"></cost>
</div>
<!-- 提交 -->
<div class="report-box">
<slot></slot>
<div class="title">产品分析报告<span @click="errorResolutionTit" v-if="$route.path !== '/product-analysis/report'">错误解析</span></div>
<template v-if="Object.keys(titleData).length">
<input v-if="$route.path !== '/product-analysis/result'" type="text" class="code isDomActive" placeholder="请输入基金简称+基金代码" v-model="titleValue"/>
<input v-else type="text" :class="`code isDomActive ${titleData.completions[0].is_correct ? '' : 'active'}`" placeholder="请输入基金简称+基金代码" v-model="titleValue"/>
</template>
<div v-for="(item, index) in completions" :key="index">
<!-- 产品概括 -->
<product @errorResolution="errorResolution" ref="product" v-if="item.tag === 'product_overview'" :data="item"></product>
<!-- 投资目标 -->
<invest-target @errorResolution="errorResolution" ref="investTarget" v-if="item.tag === 'investment_objectives'" :data="item"></invest-target>
<!-- 投资目标 -->
<invest-strategy @errorResolution="errorResolution" ref="investStrategy" v-if="item.tag === 'investment_strategy'" :data="item"></invest-strategy>
<!-- 业绩比较基准 -->
<compares @errorResolution="errorResolution" ref="compares" v-if="item.tag === 'performance_benchmark'" :data="item"></compares>
<!-- 风险收益特征 -->
<features @errorResolution="errorResolution" ref="features" v-if="item.tag === 'risk_return_characteristics'" :data="item"></features>
<!-- 基金涉及费用 -->
<cost @errorResolution="errorResolution" ref="cost" v-if="item.tag === 'fund_related_expenses'" :data="item"></cost>
</div>
<!-- 提交 -->
<div class="tool-btn">
<div class="submit-btn" @click="commitCase" v-if="$route.path !== '/product-analysis/result'">提交报告</div>
<div class="submit-btn" @click="cacheCaseAnswer" v-if="$route.path !== '/product-analysis/result'">保存</div>
</div>
</div>
</template>
<script>
import { caseCompletions, getCommitCase, commitCase } from '../api'
import $ from 'jquery'
import { caseCompletions, getCommitCase, commitCase, cacheCaseAnswer } from '../api'
import Product from './Products.vue'
import InvestTarget from './InvestTarget.vue'
import InvestStrategy from './InvestStrategy.vue'
import Compares from './Compares.vue'
import Features from './Features.vue'
import Cost from './Cost.vue'
......@@ -33,13 +43,16 @@ export default {
InvestTarget,
Compares,
Features,
Cost
Cost,
InvestStrategy
},
data() {
return {
completions: [],
resultCompletions: [],
titleValue: ''
titleValue: '',
titleData: {},
isCommitCase: false
}
},
computed: {
......@@ -51,6 +64,18 @@ export default {
this.getCommitCase()
},
methods: {
errorResolution(data) {
this.$emit('errorResolution', data)
},
errorResolutionTit() {
this.$emit('errorResolution', this.titleData)
},
// 保存答案
cacheCaseAnswer() {
cacheCaseAnswer(this.cases.id, { answers: JSON.stringify(this.getAnswer(1)) })
.then(res => { this.$message({ type: 'success', message: '保存成功' }) })
.catch(err => { this.$message.error(err.message || '稍后再试') })
},
// 模板 数据回显
caseCompletions(id) {
caseCompletions(id).then(res => {
......@@ -60,7 +85,7 @@ export default {
const findData = this.resultCompletions.answer.find(fItem => {
return fItem.id === cItem.id
})
findData ? (cItem.commit_answer = findData.commit_answer) : (cItem.commit_answer = '')
findData ? cItem = Object.assign(cItem, findData) : cItem.commit_answer = ''
} else {
cItem.commit_answer = ''
}
......@@ -69,21 +94,30 @@ export default {
})
this.completions = res.data.items
// 标题回显
this.titleValue = this.completions.find(item => {
this.titleData = this.completions.find(item => {
return item.tag === 'product_title'
}).completions[0].commit_answer
})
if (this.titleData) this.titleValue = this.titleData.completions[0].commit_answer
})
},
// 结果
getCommitCase() {
getCommitCase().then(res => {
this.resultCompletions = res.data.records
const id = this.$route.query.id
if (id) {
getCommitCase(id).then(res => {
this.resultCompletions = res.data.detail
this.caseCompletions(this.cases.id)
this.$emit('getScore', this.resultCompletions)
})
} else {
this.caseCompletions(this.cases.id)
this.$emit('getScore', this.resultCompletions)
})
}
},
// 提交
commitCase() {
input() {
this.isCommitCase = false
},
// 获取填写的答案
getAnswer(isCache) {
// 产品概括数据
const productCount = []
this.$refs.product[0].data.completions.forEach(item => {
......@@ -92,6 +126,9 @@ export default {
// 投资目标
const originalData = this.$refs.investTarget[0].data.completions[0]
const investTargetCount = [{ id: originalData.id, commit_answer: originalData.commit_answer }]
// 投资目标
const strategyData = this.$refs.investStrategy[0].data.completions[0]
const investStrategyCount = [{ id: strategyData.id, commit_answer: strategyData.commit_answer }]
// 业绩比较基准数据
const comparesCount = []
this.$refs.compares[0].inputList.forEach(item => {
......@@ -117,46 +154,42 @@ export default {
return item.tag === 'product_title'
}).completions[0]
const titCount = [{ id: findTitleData.id, commit_answer: this.titleValue }]
const allData = [
let allAnswer = [
...titCount,
...productCount,
...investTargetCount,
...[comparesData],
...featuresCount,
...costCount
...costCount,
...investStrategyCount
]
if (isCache) {
allAnswer = allAnswer.filter(item => item.commit_answer !== '')
}
return allAnswer
},
// 提交
commitCase() {
// 空数据的索引
let emptyDataIndex = allData.findIndex(item => item.commit_answer === '')
let emptyDataIndex = this.getAnswer().findIndex(item => item.commit_answer === '')
// 判断业绩比较基准是否为空
const hasEmptyInput = !!this.$refs.compares[0].inputList.find(item => {
return item.input1 === '' || item.input2 === ''
})
if (hasEmptyInput) {
const dataId = this.$refs.compares[0].data.completions[0].id
const dataIndex = allData.findIndex(item => item.id === dataId)
const dataIndex = this.getAnswer().findIndex(item => item.id === dataId)
emptyDataIndex = emptyDataIndex > dataIndex && emptyDataIndex !== -1 ? dataIndex : emptyDataIndex
}
if (emptyDataIndex === -1) {
commitCase({ answers: JSON.stringify(allData) })
commitCase({ answers: JSON.stringify(this.getAnswer()) })
.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.$message({
message: '保存成功！你可以在作品展示中查看/编辑报告，查看成绩',
type: 'success'
})
setTimeout(() => {
this.$router.push({ path: '/product-analysis/result' })
this.$router.push({ path: '/product-analysis/result', query: { id: res.data.answers.id } })
}, 2000)
})
.catch(err => {
......@@ -164,11 +197,29 @@ export default {
})
} else {
// 空数据的元素
const emptyElement = document.querySelector(`[id="${allData[emptyDataIndex].id}"]`)
const emptyElement = document.querySelector(`[id="${this.getAnswer()[emptyDataIndex].id}"]`)
// 空的情况，所有的高亮
$('.isDomActive').each(function() {
$(this).removeClass('active')
if (this.tagName === 'INPUT' || this.tagName === 'TEXTAREA') {
if ($(this).val() === '') $(this).addClass('active')
} else {
if ($(this).find('textarea').val() === '') $(this).addClass('active')
if ($(this).find('input').val() === '') $(this).addClass('active')
}
})
$('.tag-input').css('border-bottom', '1px solid rgba(219, 38, 38, 1)')
// 监听输入，去掉高亮
$('.isDomActive').bind('input propertychange', function() {
$(this).removeClass('active')
})
let top = 140
if (emptyElement) {
// 空数据元素的位置
top = emptyElement.getBoundingClientRect().top + document.documentElement.scrollTop
// emptyElement.classList.add('active')
} else {
this.isCommitCase = true
}
window.scrollTo(0, top)
this.$message('请填写完整')
......@@ -183,6 +234,9 @@ input {
background: none;
border: none;
outline: none;
&.active{
border-bottom: 1px solid #C11818 !important;
}
}
.code {
width: 370px;
......@@ -200,7 +254,7 @@ input {
background: #68b8a4;
border-radius: 16px;
text-align: center;
margin: 42px auto;
margin: 42px 20px;
line-height: 32px;
color: #fff;
font-size: 18px;
......@@ -213,5 +267,19 @@ input {
line-height: 100%;
text-align: center;
margin-top: 27px;
position: relative;
span{
position: absolute;
right: 25px;
top: 0;
font-weight: normal;
font-size: 16px;
cursor: pointer;
z-index: 999;
}
}
.tool-btn{
display: flex;
justify-content: center;
}
</style>
src/modules/product-analysis/views/Result.vue
浏览文件 @ 5234ee62
<template>
<div class="result-box">
<div class="pop-layer"></div>
<report @getScore="getScore">
<report @getScore="getScore" @errorResolution="errorResolution">
<div class="trophy-box">
<img src="https://webapp-pub.ezijing.com/x-training-new/trophy.png" />
<div class="text">
......@@ -10,6 +10,19 @@
</div>
</div>
</report>
<div class="analysis-box" v-if="isShow">
<div class="content">
<div class="close" @click="close">×</div>
<div class="tit">查看答案</div>
<ul>
<li v-for="(item, index) in answerList" :key="index">
<div class="title">{{ `${index + 1}.${item.subject}` }}</div>
<div class="my">我的答案：{{ item.commit_answer }}</div>
<div class="answer">正确答案：{{ item.answer }}</div>
</li>
</ul>
</div>
</div>
</div>
</template>
......@@ -19,21 +32,93 @@ export default {
components: { Report },
data() {
return {
score: ''
score: '',
isShow: false,
answerList: []
}
},
created() {
document.body.scrollTop = document.documentElement.scrollTop = 0
},
methods: {
errorResolution(data) {
console.log(data)
if (data.tag === 'performance_benchmark') {
const replaceData = data.completions[0].commit_answer.replace(/,/g, '×').replace(/;/g, '+')
data.completions[0].commit_answer = replaceData
}
this.answerList = data.completions
this.isShow = true
},
getScore(res) {
this.score = res.score
},
close() {
this.isShow = false
}
}
}
</script>
<style lang="scss" scoped>
.analysis-box{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
z-index: 99999;
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 824px;
padding: 40px 40px 100px;
background: #FFFFFF;
opacity: 1;
border-radius: 16px;
.close{
position: absolute;
top: 10px;
right: 28px;
width: 20px;
height: 20px;
font-size: 40px;
color: #999999;
line-height: 100%;
cursor: pointer;
}
.tit{
font-size: 20px;
line-height: 100%;
color: #333333;
}
ul{
li{
margin-top: 38px;
div{
line-height: 100%;
}
.title{
font-size: 16px;
color: #999999;
margin-bottom: 18px;
}
.my{
font-size: 16px;
color: #333333;
margin-bottom: 12px;
}
.answer{
font-size: 16px;
color: #4DB299;
}
}
}
}
}
.result-box {
margin: 66px auto;
width: 714px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论