|
|
|
|
@ -324,7 +324,52 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="pattern == 3"> |
|
|
|
|
|
|
|
|
|
<div v-for="item in patternFour.reportList" :key="item.id" class="item_wrap"> |
|
|
|
|
<div class="select_wrap"> |
|
|
|
|
{{item.id + 1}} |
|
|
|
|
</div> |
|
|
|
|
<div class="table_wrap"> |
|
|
|
|
<el-table :data="item.tableData" stripe header-align="center" border :span-method="mergeColumn"> |
|
|
|
|
<el-table-column prop="arbitrageDirection" align="center" label="套利方向" ></el-table-column> |
|
|
|
|
<el-table-column prop="futureName" align="center" label="合约" ></el-table-column> |
|
|
|
|
<el-table-column prop="transactionTime" align="center" label="开仓时间" ></el-table-column> |
|
|
|
|
<el-table-column align="center" label="开仓方向" > |
|
|
|
|
<template slot-scope="scope">{{scope.row.tradeDirection == 'BUY'?'买入':'卖出'}}</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column align="center" label="开仓价" > |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{scope.row.price}}元/吨 |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="closeTime" align="center" label="平仓时间" ></el-table-column> |
|
|
|
|
<el-table-column prop="closeType" align="center" label="平仓方式" ></el-table-column> |
|
|
|
|
<el-table-column prop="closePrice" align="center" label="平仓价" ></el-table-column> |
|
|
|
|
<el-table-column prop="count" align="center" label="数量" > |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{scope.row.futureName.includes('现货')? `${scope.row.quantity}(吨)`:`${scope.row.quantity}(手)`}} |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="profit" align="center" label="合约盈亏" ></el-table-column> |
|
|
|
|
<el-table-column prop="closeProfit" align="center" label="持仓成本损益" ></el-table-column> |
|
|
|
|
<el-table-column prop="totalProfit" align="center" label="总盈亏" ></el-table-column> |
|
|
|
|
<el-table-column prop="annualizedRate" align="center" label="年化收益率" ></el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<!-- 折线图区域 --> |
|
|
|
|
<div class="chart_wrap"> |
|
|
|
|
<div class="chart_one"> |
|
|
|
|
<div class="line_wrap"> |
|
|
|
|
<div :id="'line_contentOne' + item.id" class="line_content"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="chart_two"> |
|
|
|
|
<div class="chart_two_title">无套利区间</div> |
|
|
|
|
<div class="line_wrap"> |
|
|
|
|
<div :id="'line_contentTwo' + item.id" class="line_content"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<el-input style="margin-top: 20px" v-model="form.analysis" type="textarea" :disabled="true" rows="5"></el-input> |
|
|
|
|
</div> |
|
|
|
|
@ -370,6 +415,7 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import echarts from 'echarts/lib/echarts'; |
|
|
|
|
import html2Canvas from 'html2canvas' |
|
|
|
|
import JsPDF from 'jspdf' |
|
|
|
|
export default { |
|
|
|
|
@ -425,7 +471,7 @@ |
|
|
|
|
hisPositionData1:[] |
|
|
|
|
}, |
|
|
|
|
patternFour:{ |
|
|
|
|
|
|
|
|
|
reportList:[] |
|
|
|
|
}, |
|
|
|
|
sjData: [], |
|
|
|
|
infoData: [], |
|
|
|
|
@ -437,6 +483,33 @@ |
|
|
|
|
this.getSgin() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
//合并持仓指定列 |
|
|
|
|
mergeColumn({ row, column, rowIndex, columnIndex }){ |
|
|
|
|
if(columnIndex == 0 || columnIndex == 11 || columnIndex == 12){ |
|
|
|
|
if (rowIndex % 2 === 0) { |
|
|
|
|
return { |
|
|
|
|
rowspan: 2, |
|
|
|
|
colspan: 1 |
|
|
|
|
}; |
|
|
|
|
} else { |
|
|
|
|
return { |
|
|
|
|
rowspan: 0, |
|
|
|
|
colspan: 0 |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//渲染echart表单 |
|
|
|
|
drawChart(){ |
|
|
|
|
this.patternFour.reportList.forEach(item =>{ |
|
|
|
|
setTimeout(() => { |
|
|
|
|
let myChart = echarts.init(document.getElementById('line_contentOne' + item.id)); |
|
|
|
|
let myChartTwo = echarts.init(document.getElementById('line_contentTwo' + item.id)); |
|
|
|
|
myChart.setOption(item.option); |
|
|
|
|
myChartTwo.setOption(item.optionTwo); |
|
|
|
|
}, 500); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
getData(){ |
|
|
|
|
let data = { |
|
|
|
|
reportId: this.id, |
|
|
|
|
@ -477,6 +550,18 @@ |
|
|
|
|
this.patternThree.hisPositionData1 = steps9.hisPositionData1 ? steps9.hisPositionData1: [] |
|
|
|
|
} |
|
|
|
|
break; |
|
|
|
|
case 3: |
|
|
|
|
if(report.steps6){ |
|
|
|
|
let steps6 = JSON.parse(report.steps6) |
|
|
|
|
console.log(steps6); |
|
|
|
|
|
|
|
|
|
this.patternFour.reportList = steps6 ? steps6: [] |
|
|
|
|
console.log(this.patternFour.reportList); |
|
|
|
|
|
|
|
|
|
this.drawChart() |
|
|
|
|
} |
|
|
|
|
break |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -609,6 +694,67 @@ |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.chart_two_title{ |
|
|
|
|
height: 60px; |
|
|
|
|
line-height: 60px; |
|
|
|
|
width: 100%; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #3D8BF7; |
|
|
|
|
} |
|
|
|
|
.chart_one{ |
|
|
|
|
padding: 50px 120px; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
.chart_two{ |
|
|
|
|
margin: 20px 40px; |
|
|
|
|
padding: 10px 50px; |
|
|
|
|
border: 3px solid #3D8BF7; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
.chart_wrap{ |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
border: 2px solid #3D8BF7; |
|
|
|
|
border-left: none; |
|
|
|
|
} |
|
|
|
|
.line_wrap{ |
|
|
|
|
height: 400px; |
|
|
|
|
width: 100%; |
|
|
|
|
background: rgb(248, 245, 245); |
|
|
|
|
.line_content{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
.design_chart_empty{ |
|
|
|
|
background: url(../../assets/img/offshelf.png) 58% 50% no-repeat; |
|
|
|
|
background-size: 250px ; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.item_wrap{ |
|
|
|
|
display: flex; |
|
|
|
|
// justify-content: center; |
|
|
|
|
margin-left:60px ; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 0px 20px; |
|
|
|
|
position: relative; |
|
|
|
|
.table_wrap{ |
|
|
|
|
width: 90%; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
margin-left: 80px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.select_wrap{ |
|
|
|
|
text-align: center; |
|
|
|
|
width: 80px; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
position: absolute; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
border: 2px solid #3D8BF7; |
|
|
|
|
} |
|
|
|
|
.mat10{ |
|
|
|
|
margin-top: 10px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
liangliang.Li
3 years ago
