|
|
|
|
@ -0,0 +1,200 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
|
|
<el-form-item label="交易日期" prop="tradeDate">
|
|
|
|
|
<el-date-picker clearable size="small"
|
|
|
|
|
v-model="queryParams.tradeDate"
|
|
|
|
|
type="date"
|
|
|
|
|
value-format="yyyy-MM-dd"
|
|
|
|
|
placeholder="选择交易日期"
|
|
|
|
|
style="width: 160px"
|
|
|
|
|
@change="dateChanged"
|
|
|
|
|
:editable="false"
|
|
|
|
|
:clearable="false"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="动量周期" prop="momentumType">
|
|
|
|
|
<el-select v-model="queryParams.momentumType"
|
|
|
|
|
placeholder="动量周期"
|
|
|
|
|
clearable
|
|
|
|
|
size="small"
|
|
|
|
|
@change="selectChanged"
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
:clearable="false"
|
|
|
|
|
>
|
|
|
|
|
<el-option key="1" label="1日" :value="'1'" />
|
|
|
|
|
<el-option key="3" label="3日" :value="'3'" />
|
|
|
|
|
<el-option key="5" label="5日" :value="'5'" />
|
|
|
|
|
<el-option key="10" label="10日" :value="'10'" />
|
|
|
|
|
<el-option key="15" label="15日" :value="'15'" />
|
|
|
|
|
<el-option key="20" label="20日" :value="'20'" />
|
|
|
|
|
<el-option key="30" label="30日" :value="'30'" />
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="行业名称" prop="industryName">
|
|
|
|
|
<el-autocomplete
|
|
|
|
|
v-model="queryParams.industryName"
|
|
|
|
|
placeholder="请输入行业名称"
|
|
|
|
|
size="small"
|
|
|
|
|
:fetch-suggestions="querySearchAsync"
|
|
|
|
|
@select="handleSelect"
|
|
|
|
|
@change="dateChanged"
|
|
|
|
|
></el-autocomplete>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24">
|
|
|
|
|
<div style="border-bottom: solid 2px #A9A4A4;margin: 10px 0 10px 0;height: 30px;">
|
|
|
|
|
<span id="lotDistribute">{{ queryParams.type }}日趋势板块</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-tabs type="border-card">
|
|
|
|
|
<el-tab-pane>
|
|
|
|
|
<span slot="label"><el-icon type="primary" plain circle size = "mini" class="el-icon-medal-1" style="border: 0px;"></el-icon> 动量趋势</span>
|
|
|
|
|
<el-table :data="this.lotTrendsList[0].sortDataList"
|
|
|
|
|
height='560'
|
|
|
|
|
style="width: 100%;"
|
|
|
|
|
empty-text="暂无数据"
|
|
|
|
|
tooltip-effect="dark"
|
|
|
|
|
@cell-click="handleClickTable"
|
|
|
|
|
:cell-style="trendCellStyle"
|
|
|
|
|
:key="itemKey"
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
>
|
|
|
|
|
<template v-for="item in this.lotTrendsList">
|
|
|
|
|
<el-table-column
|
|
|
|
|
:label="item.title"
|
|
|
|
|
class="active"
|
|
|
|
|
>
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span>{{ item.sortDataList[scope.$index] }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
|
|
import stockdataApi from '@/api/newstocksystem/stockdata'
|
|
|
|
|
import { listTrends, listTrendsSection } from '@/api/newstocksystem/trends'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "Trends",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 遮罩层
|
|
|
|
|
itemKey: '',//用于强制表格刷新
|
|
|
|
|
loading: true,
|
|
|
|
|
// 显示搜索条件
|
|
|
|
|
showSearch: true,
|
|
|
|
|
// 总条数
|
|
|
|
|
total: 0,
|
|
|
|
|
// 动量结果表格数据,需要初始化,否则第一次加载会报错
|
|
|
|
|
lotTrendsList: [{sortDataList:[]}],
|
|
|
|
|
// 查询参数
|
|
|
|
|
queryParams: {
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
tradeDate: null,
|
|
|
|
|
industryName: null,
|
|
|
|
|
momentumType: "10"
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getLastTradeDate();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
/** 获取最后一个交易日 */
|
|
|
|
|
getLastTradeDate() {
|
|
|
|
|
stockdataApi.getLastTradeDate().then(response => {
|
|
|
|
|
const lastTradeDate = response.msg;
|
|
|
|
|
console.log("getLastTradeDate " , lastTradeDate);
|
|
|
|
|
this.queryParams.tradeDate = lastTradeDate;
|
|
|
|
|
// 在获取到最后交易日后,再调用查询方法,确保日期已经设置
|
|
|
|
|
this.getListSection();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/** 查询动量结果列表 */
|
|
|
|
|
getListSection() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
listTrendsSection(this.queryParams).then(response => {
|
|
|
|
|
this.lotTrendsList = response.rows;
|
|
|
|
|
this.itemKey = Math.random();
|
|
|
|
|
document.getElementById('lotDistribute').innerText = this.queryParams.momentumType + "日趋势板块";
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
resetQuery() {
|
|
|
|
|
this.queryParams.industryName = "";
|
|
|
|
|
this.getLastTradeDate();
|
|
|
|
|
},
|
|
|
|
|
handleClickTable(row, column) {
|
|
|
|
|
console.log("handleClickTable : ",row, column.label);
|
|
|
|
|
},
|
|
|
|
|
dateChanged() {
|
|
|
|
|
this.getListSection();
|
|
|
|
|
},
|
|
|
|
|
selectChanged() {
|
|
|
|
|
this.getListSection();
|
|
|
|
|
},
|
|
|
|
|
querySearchAsync(queryString, cb) {
|
|
|
|
|
// 这里可以实现异步搜索行业名称的逻辑
|
|
|
|
|
// 暂时返回空数组
|
|
|
|
|
cb([]);
|
|
|
|
|
},
|
|
|
|
|
handleSelect(item) {
|
|
|
|
|
console.log("handleSelect : ", item);
|
|
|
|
|
},
|
|
|
|
|
//修改单元格样式
|
|
|
|
|
trendCellStyle({row, column, rowIndex, columnIndex}) {
|
|
|
|
|
if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 3 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 0)
|
|
|
|
|
return 'background:red;color:white;text-align:center;';
|
|
|
|
|
else if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 6 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 3)
|
|
|
|
|
return 'background:#FF9D00;color:white;text-align:center;';
|
|
|
|
|
else if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 10 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 6)
|
|
|
|
|
return 'background:#FFD000;color:white;text-align:center;';
|
|
|
|
|
else
|
|
|
|
|
return 'text-align:center;';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.app-container {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-card {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-red {
|
|
|
|
|
color: #f56c6c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-green {
|
|
|
|
|
color: #67c23a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.clearfix:before,
|
|
|
|
|
.clearfix:after {
|
|
|
|
|
display: table;
|
|
|
|
|
content: "";
|
|
|
|
|
}
|
|
|
|
|
.clearfix:after {
|
|
|
|
|
clear: both;
|
|
|
|
|
}
|
|
|
|
|
</style>
|