|
|
<template>
|
|
|
<div class="dashboard-container">
|
|
|
<div class="main_left">
|
|
|
<div class="left_nav">
|
|
|
<div class="nav_market_text">大盘信息</div>
|
|
|
<div class="nav_market_right" @click="marketDetail">
|
|
|
<div>查看详情</div>
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="market_top">
|
|
|
<div class="market_top_nav">
|
|
|
<div class="market_top_nav_text">
|
|
|
<div
|
|
|
v-for="(item, index) in marketTopNav"
|
|
|
:key="index"
|
|
|
:style="{ color: item.is ? '#EC7C00' : '#999999' }"
|
|
|
@click="marketTopNavClick(item.name)"
|
|
|
>
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="market_top_nav_date">
|
|
|
<i class="el-icon-arrow-left" @click="beforeDay(marketTopDate)"></i>
|
|
|
<div style="padding: 0 8px" class="hide_input">
|
|
|
<el-date-picker
|
|
|
@change="dateChenge"
|
|
|
v-model="marketTopDate"
|
|
|
type="date"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
>//日期格式
|
|
|
</el-date-picker>
|
|
|
{{ marketTopDate }}
|
|
|
</div>
|
|
|
<i class="el-icon-arrow-right" @click="afterDay(marketTopDate)"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="columnar" :style="{ width: '100%', height: '300px' }"></div>
|
|
|
<div class="columnar_value">
|
|
|
<span style="color: #d9001b">上涨{{ marketRose }}家</span>
|
|
|
<span style="color: #999999">平盘{{ marketFall }}家</span>
|
|
|
<span style="color: #6fbb60">下跌{{ marketEqual }}家</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="left_suggest_nav">
|
|
|
<div class="suggest_nav_market_text">推荐信息</div>
|
|
|
<div class="suggest_nav_market_right" @click="marketDetail">
|
|
|
<div>我的收藏</div>
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="left_suggest">
|
|
|
<div class="suggest_nav_list">
|
|
|
<div
|
|
|
v-for="(item, index) in suggestTopNav"
|
|
|
:key="index"
|
|
|
:style="{ color: item.is ? '#EC7C00' : '#999999' }"
|
|
|
@click="tendencyNavClick(item.name)"
|
|
|
>
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="list">
|
|
|
<el-table
|
|
|
:data="suggestList"
|
|
|
style="width: 100%"
|
|
|
@row-click="rowClick"
|
|
|
:height="tableHeight"
|
|
|
>
|
|
|
<el-table-column prop="securityCode" label="股票代码">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="securityName" label="股票名称">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="openingPrice" label="开盘价">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="closingPrice" label="收盘价">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="highestPrice" label="最高价">
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="lowestPrice" label="最低价"> </el-table-column>
|
|
|
<el-table-column label="当日涨跌幅">
|
|
|
<template slot-scope="scope">
|
|
|
<div
|
|
|
style="color: #d9001b"
|
|
|
v-if="scope.row.riseLossesCurrentDay > 0"
|
|
|
>
|
|
|
{{ scope.row.riseLossesCurrentDay.toFixed(2) }}%
|
|
|
</div>
|
|
|
<div style="color: #6fbb60" v-else>
|
|
|
-{{ scope.row.riseLossesCurrentDay.toFixed(2) }}%
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="是否涨停">
|
|
|
<!-- riseStop -->
|
|
|
<template slot-scope="scope">
|
|
|
{{ scope.row.riseStop == 1 ? "是" : "否" }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="是否跌停">
|
|
|
<template slot-scope="scope">
|
|
|
{{ scope.row.lossesStop == 1 ? "是" : "否" }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="volume" label="成交量"> </el-table-column>
|
|
|
<el-table-column prop="turnover" label="成交额"> </el-table-column>
|
|
|
<el-table-column prop="freeCapitalization" label="自由流通市值">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="totalInstitutionalPositions"
|
|
|
label="机构持仓合计"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<!-- <el-table-column prop="ban" label="几天几板" width="150"> -->
|
|
|
<!-- </el-table-column> -->
|
|
|
<el-table-column prop="dayAndPlate" width="150">
|
|
|
<template slot="header" slot-scope="scope">
|
|
|
<div class="plate_sift" @click="selectPlateSift">
|
|
|
<div>几天几板</div>
|
|
|
<div class="module_head_icon" v-if="plateSift">
|
|
|
<img
|
|
|
src="../../static/shengxu_true.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
<img
|
|
|
src="../../static/jiangxu_false.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="module_head_icon" v-else>
|
|
|
<img
|
|
|
src="../../static/shengxu_false.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
<img
|
|
|
src="../../static/jiangxu_true.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="dongCaiIndustryIndexLevel2"
|
|
|
label="所属东财行业指数2级"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="pagination" v-if="total > 20" ref="footer">
|
|
|
<el-pagination
|
|
|
layout="prev, pager, next"
|
|
|
:total="total"
|
|
|
background
|
|
|
:page-size="20"
|
|
|
@current-change="currentChange"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="suggest_list_head">
|
|
|
<div class="suggest_head_left">
|
|
|
<div class="suggest_head_date">交易日期</div>
|
|
|
<div class="suggest_head_name">名称</div>
|
|
|
<div class="suggest_head_industry_name">东财行业指数2级</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
v-if="suggestList.length == 0"
|
|
|
style="
|
|
|
font-weight: bold;
|
|
|
color: #999999;
|
|
|
text-align: center;
|
|
|
margin-top: 50px;
|
|
|
"
|
|
|
>
|
|
|
暂无数据
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<div
|
|
|
class="suggest_list"
|
|
|
v-for="(item, index) in suggestList"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div class="trend_list_left">
|
|
|
<div class="trend_list_date">
|
|
|
{{ item.businessDate }}
|
|
|
</div>
|
|
|
<div class="trend_list_name">
|
|
|
{{ item.securityName }}
|
|
|
</div>
|
|
|
<div class="list_plate_box">
|
|
|
<div>{{ item.sort }}</div>
|
|
|
<div>
|
|
|
<div v-if="item.sortChange > 0" class="plate_box_right">
|
|
|
<img
|
|
|
src="../../static/home_paiming_shangsheng.png"
|
|
|
class="liate_box_icon"
|
|
|
/>
|
|
|
<div style="color: #d9001b">{{ item.sortChange }}</div>
|
|
|
</div>
|
|
|
<div v-if="item.sortChange == 0" class="plate_box_right">
|
|
|
<div>-</div>
|
|
|
</div>
|
|
|
<div v-if="item.sortChange < 0" class="plate_box_right">
|
|
|
<img
|
|
|
src="../../static/home_paiming_xiajiang.png"
|
|
|
class="liate_box_icon"
|
|
|
/>
|
|
|
<div style="color: #8fc320">
|
|
|
{{ Math.abs(item.sortChange) }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="trend_list_right">
|
|
|
{{ item.sortChange }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<!-- <div class="market_bottom_nav_text">
|
|
|
<div
|
|
|
v-for="(item, index) in marketBottomNav"
|
|
|
:key="index"
|
|
|
:style="{ color: item.is ? '#EC7C00' : '#999999' }"
|
|
|
@click="marketBottomNavClick(item.name)"
|
|
|
>
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="myChart" :style="{ width: '100%', height: '600px' }"></div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_right">
|
|
|
<div class="main_right_top">
|
|
|
<div class="main_right_top_nav" @click="toMarketDetail">
|
|
|
<div class="main_right_top_text">趋势板块</div>
|
|
|
<div class="main_right_top_right">
|
|
|
<div>查看详情</div>
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="trend_nav_list">
|
|
|
<div
|
|
|
v-for="(item, index) in tendencyNav"
|
|
|
:key="index"
|
|
|
:style="{ color: item.is ? '#EC7C00' : '#999999' }"
|
|
|
@click="tendencyNavClick(item.name)"
|
|
|
>
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="trend_list_head">
|
|
|
<div class="trend_head_left">
|
|
|
<div class="trend__head_date">交易日期</div>
|
|
|
<div class="trend__head_name">东财行业指数2级</div>
|
|
|
<div class="head_plate_box">
|
|
|
<div class="trend__head_plate" @click="selectPlateRank">
|
|
|
板块排名
|
|
|
</div>
|
|
|
<div class="module_head_icon" v-if="plateRank">
|
|
|
<img
|
|
|
src="../../static/shengxu_true.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
<img
|
|
|
src="../../static/jiangxu_false.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="module_head_icon" v-else>
|
|
|
<img
|
|
|
src="../../static/shengxu_false.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
<img
|
|
|
src="../../static/jiangxu_true.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="head_ranking_box" @click="selectRankChange">
|
|
|
<div>排名变化</div>
|
|
|
<div class="module_head_icon" v-if="rankChange">
|
|
|
<img
|
|
|
src="../../static/shengxu_true.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
<img
|
|
|
src="../../static/jiangxu_false.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="module_head_icon" v-else>
|
|
|
<img
|
|
|
src="../../static/shengxu_false.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
<img
|
|
|
src="../../static/jiangxu_true.png"
|
|
|
class="head_icon"
|
|
|
mode="scaleToFill"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
v-if="tendencyList.length == 0"
|
|
|
style="
|
|
|
font-weight: bold;
|
|
|
color: #999999;
|
|
|
text-align: center;
|
|
|
margin-top: 50px;
|
|
|
"
|
|
|
>
|
|
|
暂无数据
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<div
|
|
|
class="trend_list"
|
|
|
v-for="(item, index) in tendencyList"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div class="trend_list_left">
|
|
|
<div class="trend_list_date">
|
|
|
{{ item.businessDate }}
|
|
|
</div>
|
|
|
<div class="trend_list_name">
|
|
|
{{ item.securityName }}
|
|
|
</div>
|
|
|
<div class="list_plate_box">
|
|
|
<div>{{ item.sort }}</div>
|
|
|
<div>
|
|
|
<div v-if="item.sortChange > 0" class="plate_box_right">
|
|
|
<img
|
|
|
src="../../static/home_paiming_shangsheng.png"
|
|
|
class="liate_box_icon"
|
|
|
/>
|
|
|
<div style="color: #d9001b">{{ item.sortChange }}</div>
|
|
|
</div>
|
|
|
<div v-if="item.sortChange == 0" class="plate_box_right">
|
|
|
<div>-</div>
|
|
|
</div>
|
|
|
<div v-if="item.sortChange < 0" class="plate_box_right">
|
|
|
<img
|
|
|
src="../../static/home_paiming_xiajiang.png"
|
|
|
class="liate_box_icon"
|
|
|
/>
|
|
|
<div style="color: #8fc320">
|
|
|
{{ Math.abs(item.sortChange) }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="trend_list_right">
|
|
|
{{ item.sortChange }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main_right_bottom">
|
|
|
<div class="main_right_bottom_nav" @click="toPrivate">
|
|
|
<div class="main_right_bottom_text">个股详情</div>
|
|
|
<div class="main_right_bottom_right">
|
|
|
<div>查看详情</div>
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="private_list_head">
|
|
|
<div class="private_head_left">
|
|
|
<div class="private_head_name">股票名称</div>
|
|
|
<div class="private_head_date">日期</div>
|
|
|
<div class="private_head_price">价格</div>
|
|
|
<div class="private_head_decline">涨跌幅</div>
|
|
|
</div>
|
|
|
<div>所属板块</div>
|
|
|
</div>
|
|
|
<div
|
|
|
v-if="privateList.length == 0"
|
|
|
style="
|
|
|
font-weight: bold;
|
|
|
color: #999999;
|
|
|
text-align: center;
|
|
|
margin-top: 50px;
|
|
|
"
|
|
|
>
|
|
|
暂无数据
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<div
|
|
|
class="private_list"
|
|
|
v-for="(item, index) in privateList"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div class="private_list_left">
|
|
|
<div class="private_list_name">
|
|
|
<div>{{ item.securityName }}</div>
|
|
|
<div class="private_list_code">{{ item.securityCode }}</div>
|
|
|
</div>
|
|
|
<div class="private_list_date">
|
|
|
{{ item.businessDate }}
|
|
|
</div>
|
|
|
<div class="private_list_price">
|
|
|
{{ item.openingPrice }}
|
|
|
</div>
|
|
|
<div class="private_list_decline">
|
|
|
{{ item.riseLossesCurrentDay }}%
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="text-align: center">
|
|
|
{{ item.dongCaiIndustryIndexLevel2 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="more_box" @click="toPrivate">
|
|
|
<div>查看更多</div>
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog :visible.sync="dialogVisible" width="80%">
|
|
|
<!-- <div class="show_head" slot="title"></div> -->
|
|
|
<MarketDetail />
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
trendPlate,
|
|
|
trends,
|
|
|
riseLossesStatistics,
|
|
|
stockDetails,
|
|
|
kLine,
|
|
|
} from "@/api/user";
|
|
|
import Cookies from "js-cookie";
|
|
|
const upColor = "#00da3c";
|
|
|
const downColor = "#ec0000";
|
|
|
export default {
|
|
|
name: "Home",
|
|
|
components: {
|
|
|
MarketDetail: () => import("./components/MarketDetail.vue"),
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
// 大盘信息柱状图导航
|
|
|
marketTopNav: [
|
|
|
{
|
|
|
name: "全部",
|
|
|
is: true,
|
|
|
current: "",
|
|
|
// 是否已缓存
|
|
|
hasMarkedData: false,
|
|
|
// 大盘上涨
|
|
|
marketRose: "",
|
|
|
// 大盘下跌
|
|
|
marketFall: "",
|
|
|
// 大盘平
|
|
|
marketEqual: "",
|
|
|
},
|
|
|
{
|
|
|
name: "上证指数",
|
|
|
is: false,
|
|
|
current: "SH",
|
|
|
code: "000001",
|
|
|
// 是否已缓存
|
|
|
hasMarkedData: false,
|
|
|
// 大盘上涨
|
|
|
marketRose: "",
|
|
|
// 大盘下跌
|
|
|
marketFall: "",
|
|
|
// 大盘平
|
|
|
marketEqual: "",
|
|
|
},
|
|
|
{
|
|
|
name: "深证指数",
|
|
|
is: false,
|
|
|
current: "SZ",
|
|
|
code: "399001",
|
|
|
// 是否已缓存
|
|
|
hasMarkedData: false,
|
|
|
// 大盘上涨
|
|
|
marketRose: "",
|
|
|
// 大盘下跌
|
|
|
marketFall: "",
|
|
|
// 大盘平
|
|
|
marketEqual: "",
|
|
|
},
|
|
|
{
|
|
|
name: "创业板",
|
|
|
is: false,
|
|
|
current: "30",
|
|
|
code: "399006",
|
|
|
// 是否已缓存
|
|
|
hasMarkedData: false,
|
|
|
// 大盘上涨
|
|
|
marketRose: "",
|
|
|
// 大盘下跌
|
|
|
marketFall: "",
|
|
|
// 大盘平
|
|
|
marketEqual: "",
|
|
|
},
|
|
|
{
|
|
|
name: "科创板",
|
|
|
is: false,
|
|
|
current: "688",
|
|
|
code: "000688",
|
|
|
// 是否已缓存
|
|
|
hasMarkedData: false,
|
|
|
// 大盘上涨
|
|
|
marketRose: "",
|
|
|
// 大盘下跌
|
|
|
marketFall: "",
|
|
|
// 大盘平
|
|
|
marketEqual: "",
|
|
|
},
|
|
|
],
|
|
|
//推荐信息导航
|
|
|
suggestTopNav:[
|
|
|
{
|
|
|
name: "版块",
|
|
|
is: true,
|
|
|
// 是否已缓存
|
|
|
hasMarkedData: false
|
|
|
},
|
|
|
{
|
|
|
name: "个股",
|
|
|
is: false,
|
|
|
// 是否已缓存
|
|
|
hasMarkedData: false
|
|
|
},
|
|
|
],
|
|
|
// 大盘信息K线图导航
|
|
|
marketBottomNav: [
|
|
|
{
|
|
|
name: "上证指数",
|
|
|
is: true,
|
|
|
current: "SZ",
|
|
|
},
|
|
|
{
|
|
|
name: "深证指数",
|
|
|
is: false,
|
|
|
current: "SH",
|
|
|
},
|
|
|
{
|
|
|
name: "创业板",
|
|
|
is: false,
|
|
|
current: "30",
|
|
|
},
|
|
|
{
|
|
|
name: "科创板",
|
|
|
is: false,
|
|
|
current: "688",
|
|
|
},
|
|
|
],
|
|
|
marketNavIndex: "SZ",
|
|
|
marketNavCode: "",
|
|
|
// 趋势板块导航
|
|
|
tendencyNav: [
|
|
|
{
|
|
|
name: "当日趋势",
|
|
|
is: true,
|
|
|
current: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "5日趋势",
|
|
|
is: false,
|
|
|
current: 5,
|
|
|
},
|
|
|
{
|
|
|
name: "10日趋势",
|
|
|
is: false,
|
|
|
current: 10,
|
|
|
},
|
|
|
{
|
|
|
name: "15日趋势",
|
|
|
is: false,
|
|
|
current: 15,
|
|
|
},
|
|
|
{
|
|
|
name: "20日趋势",
|
|
|
is: false,
|
|
|
current: 20,
|
|
|
},
|
|
|
{
|
|
|
name: "30日趋势",
|
|
|
is: false,
|
|
|
current: 30,
|
|
|
},
|
|
|
],
|
|
|
// 推荐数据
|
|
|
suggestList:[],
|
|
|
// 趋势板块数据
|
|
|
tendencyList: [
|
|
|
{
|
|
|
name: "半导体",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "电子设备制造",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "电子设备制造",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "电子设备制造",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "电子设备制造",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "电子设备制造",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "电子设备制造",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "电子设备制造",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "电子设备制造",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
{
|
|
|
name: "电子设备制造",
|
|
|
date: "2023-03-27",
|
|
|
plate_rank: 1,
|
|
|
rank_change: 1,
|
|
|
},
|
|
|
],
|
|
|
// 个股数据
|
|
|
privateList: [
|
|
|
{
|
|
|
name: "长城汽车",
|
|
|
code: "601633",
|
|
|
date: "2023-3-27",
|
|
|
price: "33.21",
|
|
|
decline: "10.15%",
|
|
|
belong: "电子设备制造",
|
|
|
},
|
|
|
{
|
|
|
name: "长城汽车",
|
|
|
code: "601633",
|
|
|
date: "2023-3-27",
|
|
|
price: "33.21",
|
|
|
decline: "10.15%",
|
|
|
belong: "电子设备制造",
|
|
|
},
|
|
|
{
|
|
|
name: "长城汽车",
|
|
|
code: "601633",
|
|
|
date: "2023-3-27",
|
|
|
price: "33.21",
|
|
|
decline: "10.15%",
|
|
|
belong: "电子设备制造",
|
|
|
},
|
|
|
],
|
|
|
plateRank: true, // 板块排名升序or降序
|
|
|
rankChange: true, // 排名变化升序or降序
|
|
|
myChart: null, //k线容器
|
|
|
// 大盘信息时间选择
|
|
|
marketTopDate: "2020-12-12",
|
|
|
dialogVisible: false,
|
|
|
collection: true,
|
|
|
tendencyNavIndex: 1,
|
|
|
// 大盘上涨
|
|
|
marketRose: "",
|
|
|
// 大盘下跌
|
|
|
marketFall: "",
|
|
|
// 大盘平
|
|
|
marketEqual: "",
|
|
|
//推荐信息行高
|
|
|
tableHeight: 10,
|
|
|
//推荐信息 分页 总数
|
|
|
total: 20,
|
|
|
// 几天几板筛选
|
|
|
plateSift: true,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
console.log("start created: ", Date.now());
|
|
|
//获取数据redis中最晚的
|
|
|
this.marketTopDate = this.getTime(Date.parse(new Date()));
|
|
|
this.rending();
|
|
|
document.title = "首页";
|
|
|
console.log("finished created: ", Date.now());
|
|
|
},
|
|
|
mounted() {
|
|
|
console.log("start amounted: ", Date.now());
|
|
|
this.$nextTick(() => {
|
|
|
// 执行echarts方法
|
|
|
this.initEcharts();
|
|
|
this.initEchartsK();
|
|
|
});
|
|
|
console.log("finished amounted: ", Date.now());
|
|
|
},
|
|
|
methods: {
|
|
|
rending() {
|
|
|
// trendPlate({
|
|
|
// pageModel: {
|
|
|
// pageNo: 1,
|
|
|
// pageSize: 10,
|
|
|
// sortField: "",
|
|
|
// sortWay: "",
|
|
|
// },
|
|
|
// trendType: 1,
|
|
|
// })
|
|
|
// .then((res) => {
|
|
|
// this.tendencyList = res.data.list;
|
|
|
// console.log(res);
|
|
|
// })
|
|
|
// .catch(() => {
|
|
|
// // this.shareLoading = false;
|
|
|
// });
|
|
|
trends({
|
|
|
pageModel: {
|
|
|
pageNo: 1,
|
|
|
pageSize: 10,
|
|
|
sortField: "sort,sortChange",
|
|
|
sortWay: "asc,asc",
|
|
|
},
|
|
|
trendType: 1,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.tendencyList = res.data.list;
|
|
|
console.log(res);
|
|
|
})
|
|
|
.catch(() => {
|
|
|
// this.shareLoading = false;
|
|
|
});
|
|
|
// 个股
|
|
|
stockDetails({
|
|
|
pageNo: 1,
|
|
|
pageSize: 3,
|
|
|
sortField: "",
|
|
|
sortWay: "",
|
|
|
})
|
|
|
.then((res) => {
|
|
|
// this.tendencyList = res.data.list;
|
|
|
this.privateList = res.data.list;
|
|
|
console.log(res);
|
|
|
})
|
|
|
.catch(() => {
|
|
|
// this.shareLoading = false;
|
|
|
});
|
|
|
},
|
|
|
handleChange(e) {
|
|
|
console.log(e);
|
|
|
},
|
|
|
//获取趋势板块数据，id为类型：5日 10日
|
|
|
getTendencyList(id) {
|
|
|
// trendPlate({
|
|
|
// pageModel: {
|
|
|
// pageNo: 1,
|
|
|
// pageSize: 10,
|
|
|
// sortField: "",
|
|
|
// sortWay: "",
|
|
|
// },
|
|
|
// trendType: id,
|
|
|
// })
|
|
|
// .then((res) => {
|
|
|
// this.tendencyList = res.data.list;
|
|
|
// console.log(res);
|
|
|
// })
|
|
|
// .catch(() => {});
|
|
|
console.log("getTendencyList: " ,this.marketTopDate);
|
|
|
trends({
|
|
|
pageModel: {
|
|
|
pageNo: 1,
|
|
|
pageSize: 10,
|
|
|
sortField: "",
|
|
|
sortWay: "",
|
|
|
},
|
|
|
trendType: id,
|
|
|
businessDate: this.marketTopDate
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.tendencyList = res.data.list;
|
|
|
console.log(res);
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
//
|
|
|
// K线图
|
|
|
splitData(rawData) {
|
|
|
let categoryData = [];
|
|
|
let values = [];
|
|
|
let volumes = [];
|
|
|
for (let i = 0; i < rawData.length; i++) {
|
|
|
categoryData.push(rawData[i].splice(0, 1)[0]);
|
|
|
values.push(rawData[i]);
|
|
|
volumes.push([
|
|
|
i,
|
|
|
rawData[i][4],
|
|
|
rawData[i][0] > rawData[i][1] ? 1 : -1,
|
|
|
]);
|
|
|
}
|
|
|
// volumes.push();
|
|
|
return {
|
|
|
categoryData: categoryData,
|
|
|
values: values,
|
|
|
volumes: volumes,
|
|
|
};
|
|
|
},
|
|
|
calculateMA(dayCount, data) {
|
|
|
var result = [];
|
|
|
for (var i = 0, len = data.values.length; i < len; i++) {
|
|
|
if (i < dayCount) {
|
|
|
result.push("-");
|
|
|
continue;
|
|
|
}
|
|
|
var sum = 0;
|
|
|
for (var j = 0; j < dayCount; j++) {
|
|
|
sum += data.values[i - j][1];
|
|
|
}
|
|
|
result.push(+(sum / dayCount).toFixed(3));
|
|
|
}
|
|
|
// console.log(result);
|
|
|
return result;
|
|
|
},
|
|
|
//
|
|
|
// 大盘信息柱状图选择
|
|
|
marketTopNavClick(name) {
|
|
|
this.marketTopNav.forEach((item) => {
|
|
|
if (item.name == name) {
|
|
|
console.log("marketRose: ",item.marketRose);
|
|
|
item.is = true;
|
|
|
riseLossesStatistics({
|
|
|
businessDate: this.marketTopDate,
|
|
|
securityType: item.current,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
item.marketRose = res.data.riseNum;
|
|
|
item.marketFall = res.data.lossesNum;
|
|
|
item.marketEqual = res.data.equalNum;
|
|
|
|
|
|
this.marketRose = res.data.riseNum;
|
|
|
this.marketFall = res.data.lossesNum;
|
|
|
this.marketEqual = res.data.equalNum;
|
|
|
// this.tendencyList = res.data.list;
|
|
|
var option;
|
|
|
this.columnar = this.$echarts.init(
|
|
|
document.getElementById("columnar")
|
|
|
);
|
|
|
this.columnar.setOption(
|
|
|
(option = {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: [
|
|
|
"≥10%",
|
|
|
"≥7%",
|
|
|
"7-5%",
|
|
|
"5-3%",
|
|
|
"3-0%",
|
|
|
"平",
|
|
|
"-3至-5%",
|
|
|
"-5至-7%",
|
|
|
"≤-7%",
|
|
|
"≤-10%",
|
|
|
],
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: res.data.data,
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
//这里是重点
|
|
|
color: function (params) {
|
|
|
//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
|
|
var colorList = [
|
|
|
"#D9001B",
|
|
|
"#D9001B",
|
|
|
"#D9001B",
|
|
|
"#D9001B",
|
|
|
"#D9001B",
|
|
|
"#999999",
|
|
|
"#6FBB60",
|
|
|
"#6FBB60",
|
|
|
"#6FBB60",
|
|
|
"#6FBB60",
|
|
|
];
|
|
|
return colorList[params.dataIndex];
|
|
|
},
|
|
|
label: {
|
|
|
show: true, //开启显示
|
|
|
position: "top", //在上方显示
|
|
|
textStyle: {
|
|
|
//数值样式
|
|
|
// color: "black",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
}),
|
|
|
true
|
|
|
);
|
|
|
console.log(res);
|
|
|
})
|
|
|
.catch(() => {
|
|
|
// this.shareLoading = false;
|
|
|
});
|
|
|
} else {
|
|
|
item.is = false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 大盘信息K线图选择
|
|
|
marketBottomNavClick(name) {
|
|
|
this.marketBottomNav.forEach((item) => {
|
|
|
if (item.name == name) {
|
|
|
item.is = true;
|
|
|
this.marketNavIndex = item.current;
|
|
|
this.initEchartsK();
|
|
|
} else {
|
|
|
item.is = false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 趋势板块选择
|
|
|
tendencyNavClick(name) {
|
|
|
this.tendencyNav.forEach((item) => {
|
|
|
if (item.name == name) {
|
|
|
item.is = true;
|
|
|
console.log("to getTrendList: " ,this.marketTopDate);
|
|
|
this.getTendencyList(item.current);
|
|
|
this.tendencyNavIndex = item.current;
|
|
|
} else {
|
|
|
item.is = false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 趋势排名变化升序or降序
|
|
|
selectRankChange() {
|
|
|
this.rankChange = !this.rankChange;
|
|
|
console.log(this.rankChange);
|
|
|
// trendPlate({
|
|
|
// pageModel: {
|
|
|
// pageNo: 1,
|
|
|
// pageSize: 10,
|
|
|
// sortField: "sort,sortChange",
|
|
|
// sortWay:
|
|
|
// (this.plateRank ? "asc" : "desc") +
|
|
|
// "," +
|
|
|
// (this.rankChange ? "asc" : "desc"),
|
|
|
// },
|
|
|
// trendType: this.tendencyNavIndex,
|
|
|
// })
|
|
|
// .then((res) => {
|
|
|
// this.tendencyList = res.data.list;
|
|
|
// console.log(res);
|
|
|
// })
|
|
|
// .catch(() => {});
|
|
|
trends({
|
|
|
pageModel: {
|
|
|
pageNo: 1,
|
|
|
pageSize: 10,
|
|
|
sortField: "sort,sortChange",
|
|
|
sortWay:
|
|
|
(this.plateRank ? "asc" : "desc") +
|
|
|
"," +
|
|
|
(this.rankChange ? "asc" : "desc"),
|
|
|
},
|
|
|
trendType: this.tendencyNavIndex,
|
|
|
businessDate: this.marketTopDate
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.tendencyList = res.data.list;
|
|
|
console.log(res);
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
// 趋势板块排名升序or降序
|
|
|
selectPlateRank() {
|
|
|
this.plateRank = !this.plateRank;
|
|
|
// trendPlate({
|
|
|
// pageModel: {
|
|
|
// pageNo: 1,
|
|
|
// pageSize: 10,
|
|
|
// sortField: "sort,sortChange",
|
|
|
// sortWay:
|
|
|
// (this.plateRank ? "asc" : "desc") +
|
|
|
// "," +
|
|
|
// (this.rankChange ? "asc" : "desc"),
|
|
|
// },
|
|
|
// trendType: this.tendencyNavIndex,
|
|
|
// })
|
|
|
// .then((res) => {
|
|
|
// this.tendencyList = res.data.list;
|
|
|
// console.log(res);
|
|
|
// })
|
|
|
// .catch(() => {});
|
|
|
// 动量趋势
|
|
|
trends({
|
|
|
pageModel: {
|
|
|
pageNo: 1,
|
|
|
pageSize: 10,
|
|
|
sortField: "sort,sortChange",
|
|
|
sortWay:
|
|
|
(this.plateRank ? "asc" : "desc") +
|
|
|
"," +
|
|
|
(this.rankChange ? "asc" : "desc"),
|
|
|
},
|
|
|
trendType: this.tendencyNavIndex,
|
|
|
businessDate: this.marketTopDate
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.tendencyList = res.data.list;
|
|
|
console.log(res);
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
// 格式化时间戳
|
|
|
getTime(date) {
|
|
|
let time = new Date(date);
|
|
|
let y = time.getFullYear();
|
|
|
let m = time.getMonth() + 1;
|
|
|
let d = time.getDate();
|
|
|
let h = time.getHours();
|
|
|
let mm = time.getMinutes();
|
|
|
let s = time.getSeconds();
|
|
|
if (s < 10) {
|
|
|
s = "0" + s;
|
|
|
}
|
|
|
if (h < 10) {
|
|
|
h = "0" + h;
|
|
|
}
|
|
|
if (mm < 10) {
|
|
|
mm = "0" + mm;
|
|
|
}
|
|
|
if (m < 10) {
|
|
|
m = "0" + m;
|
|
|
}
|
|
|
if (d < 10) {
|
|
|
d = "0" + d;
|
|
|
}
|
|
|
return `${y}-${m}-${d}`;
|
|
|
},
|
|
|
// 前一日
|
|
|
beforeDay(date) {
|
|
|
this.marketTopDate = this.getTime(
|
|
|
new Date(date).getTime() - 24 * 60 * 60 * 1000
|
|
|
);
|
|
|
this.initEcharts();
|
|
|
},
|
|
|
dateChenge() {
|
|
|
this.initEcharts();
|
|
|
//更新趋势板块数据
|
|
|
this.getTendencyList(this.tendencyNavIndex);
|
|
|
},
|
|
|
// 后一日
|
|
|
afterDay(date) {
|
|
|
this.marketTopDate = this.getTime(
|
|
|
new Date(date).getTime() + 24 * 60 * 60 * 1000
|
|
|
);
|
|
|
this.initEcharts();
|
|
|
},
|
|
|
// 大盘信息查看详情
|
|
|
marketDetail() {
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
// 查看所有趋势板块
|
|
|
toMarketDetail() {
|
|
|
this.$router.push({
|
|
|
path: "/trend/index",
|
|
|
});
|
|
|
this.$store.commit("setCount", 2);
|
|
|
Cookies.set("NavIndex", 2);
|
|
|
},
|
|
|
// 查看所有个股
|
|
|
toPrivate() {
|
|
|
this.$router.push({
|
|
|
path: "/private/index",
|
|
|
});
|
|
|
this.$store.commit("setCount", 3);
|
|
|
Cookies.set("NavIndex", 3);
|
|
|
},
|
|
|
|
|
|
// 初始化柱状图
|
|
|
initEcharts() {
|
|
|
riseLossesStatistics({
|
|
|
businessDate: this.marketTopDate,
|
|
|
securityType: "",
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.marketRose = res.data.riseNum;
|
|
|
this.marketFall = res.data.lossesNum;
|
|
|
this.marketEqual = res.data.equalNum;
|
|
|
// this.tendencyList = res.data.list;
|
|
|
var option;
|
|
|
this.columnar = this.$echarts.init(
|
|
|
document.getElementById("columnar")
|
|
|
);
|
|
|
this.columnar.setOption(
|
|
|
(option = {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: [
|
|
|
"≥10%",
|
|
|
"≥7%",
|
|
|
"7-5%",
|
|
|
"5-3%",
|
|
|
"3-0%",
|
|
|
"平",
|
|
|
"-3至-5%",
|
|
|
"-5至-7%",
|
|
|
"≤-7%",
|
|
|
"≤-10%",
|
|
|
],
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: res.data.data,
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
//这里是重点
|
|
|
color: function (params) {
|
|
|
//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
|
|
var colorList = [
|
|
|
"#D9001B",
|
|
|
"#D9001B",
|
|
|
"#D9001B",
|
|
|
"#D9001B",
|
|
|
"#D9001B",
|
|
|
"#999999",
|
|
|
"#6FBB60",
|
|
|
"#6FBB60",
|
|
|
"#6FBB60",
|
|
|
"#6FBB60",
|
|
|
];
|
|
|
return colorList[params.dataIndex];
|
|
|
},
|
|
|
label: {
|
|
|
show: true, //开启显示
|
|
|
position: "top", //在上方显示
|
|
|
textStyle: {
|
|
|
//数值样式
|
|
|
// color: "black",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
}),
|
|
|
true
|
|
|
);
|
|
|
console.log(res);
|
|
|
})
|
|
|
.catch(() => {
|
|
|
// this.shareLoading = false;
|
|
|
});
|
|
|
},
|
|
|
// 初始化K线图
|
|
|
initEchartsK() {
|
|
|
kLine({
|
|
|
securityCode: "300972",
|
|
|
securityType: "",
|
|
|
})
|
|
|
.then((res) => {
|
|
|
// this.tendencyList = res.data.list;
|
|
|
// this.privateList = res.data.list;
|
|
|
console.log(res);
|
|
|
var option;
|
|
|
this.myChart = this.$echarts.init(document.getElementById("myChart"));
|
|
|
var data = this.splitData(res.data);
|
|
|
// console.log(data);
|
|
|
this.myChart.setOption(
|
|
|
(option = {
|
|
|
animation: false,
|
|
|
legend: {
|
|
|
top: 10,
|
|
|
left: "center",
|
|
|
data: ["日K", "MA5", "MA10", "MA20", "MA30"],
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "cross",
|
|
|
},
|
|
|
formatter: function (param) {
|
|
|
// let param1 = param[1];
|
|
|
if (param[0].data.length < 6) {
|
|
|
param = param[1];
|
|
|
|
|
|
return [
|
|
|
"日期: " +
|
|
|
param.axisValue +
|
|
|
'<hr size=1 style="margin: 3px 0">',
|
|
|
"开盘: " + param.data[1] + "<br/>",
|
|
|
"关盘: " + param.data[2] + "<br/>",
|
|
|
"最低: " + param.data[3] + "<br/>",
|
|
|
"最高: " + param.data[4] + "<br/>",
|
|
|
"成交额: " + param.data[5] + "<br/>",
|
|
|
].join("");
|
|
|
} else {
|
|
|
param = param[0];
|
|
|
return [
|
|
|
"日期: " +
|
|
|
param.axisValue +
|
|
|
'<hr size=1 style="margin: 3px 0">',
|
|
|
"开盘: " + param.data[1] + "<br/>",
|
|
|
"关盘: " + param.data[2] + "<br/>",
|
|
|
"最低: " + param.data[3] + "<br/>",
|
|
|
"最高: " + param.data[4] + "<br/>",
|
|
|
"成交额: " + param.data[5] + "<br/>",
|
|
|
].join("");
|
|
|
}
|
|
|
},
|
|
|
borderWidth: 1,
|
|
|
borderColor: "#ccc",
|
|
|
padding: 10,
|
|
|
textStyle: {
|
|
|
color: "#000",
|
|
|
},
|
|
|
position: function (pos, params, el, elRect, size) {
|
|
|
const obj = {
|
|
|
top: 10,
|
|
|
};
|
|
|
obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
|
|
|
return obj;
|
|
|
},
|
|
|
// extraCssText: 'width: 170px'
|
|
|
},
|
|
|
axisPointer: {
|
|
|
link: [
|
|
|
{
|
|
|
xAxisIndex: "all",
|
|
|
},
|
|
|
],
|
|
|
label: {
|
|
|
backgroundColor: "#777",
|
|
|
},
|
|
|
},
|
|
|
toolbox: {
|
|
|
feature: {
|
|
|
dataZoom: {
|
|
|
yAxisIndex: false,
|
|
|
},
|
|
|
brush: {
|
|
|
type: ["lineX", "clear"],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
brush: {
|
|
|
xAxisIndex: "all",
|
|
|
brushLink: "all",
|
|
|
outOfBrush: {
|
|
|
colorAlpha: 0.1,
|
|
|
},
|
|
|
},
|
|
|
visualMap: {
|
|
|
show: false,
|
|
|
seriesIndex: 5,
|
|
|
dimension: 2,
|
|
|
pieces: [
|
|
|
{
|
|
|
value: 1,
|
|
|
color: upColor,
|
|
|
},
|
|
|
{
|
|
|
value: -1,
|
|
|
color: downColor,
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
grid: [
|
|
|
{
|
|
|
left: "10%",
|
|
|
right: "8%",
|
|
|
height: "50%",
|
|
|
},
|
|
|
{
|
|
|
left: "10%",
|
|
|
right: "8%",
|
|
|
top: "63%",
|
|
|
height: "16%",
|
|
|
},
|
|
|
],
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
data: data.categoryData,
|
|
|
boundaryGap: false,
|
|
|
axisLine: { onZero: false },
|
|
|
splitLine: { show: false },
|
|
|
min: "dataMin",
|
|
|
max: "dataMax",
|
|
|
axisPointer: {
|
|
|
z: 100,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "category",
|
|
|
gridIndex: 1,
|
|
|
data: data.categoryData,
|
|
|
boundaryGap: false,
|
|
|
axisLine: { onZero: false },
|
|
|
axisTick: { show: false },
|
|
|
splitLine: { show: false },
|
|
|
axisLabel: { show: false },
|
|
|
min: "dataMin",
|
|
|
max: "dataMax",
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
scale: true,
|
|
|
splitArea: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
scale: true,
|
|
|
gridIndex: 1,
|
|
|
splitNumber: 2,
|
|
|
axisLabel: { show: false },
|
|
|
axisLine: { show: false },
|
|
|
axisTick: { show: false },
|
|
|
splitLine: { show: false },
|
|
|
},
|
|
|
],
|
|
|
dataZoom: [
|
|
|
{
|
|
|
type: "inside",
|
|
|
xAxisIndex: [0, 1],
|
|
|
start: 0,
|
|
|
end: 100,
|
|
|
},
|
|
|
{
|
|
|
show: false,
|
|
|
xAxisIndex: [0, 1],
|
|
|
type: "slider",
|
|
|
top: "85%",
|
|
|
start: 0,
|
|
|
end: 100,
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "日K",
|
|
|
type: "candlestick",
|
|
|
data: data.values,
|
|
|
itemStyle: {
|
|
|
color: downColor,
|
|
|
color0: upColor,
|
|
|
borderColor: undefined,
|
|
|
borderColor0: undefined,
|
|
|
},
|
|
|
// tooltip: {
|
|
|
// trigger: "axis",
|
|
|
// axisPointer: {
|
|
|
// type: "cross",
|
|
|
// },
|
|
|
// formatter: function (param) {
|
|
|
// console.log(param[0].axisValue, param[1].axisValue);
|
|
|
// param = param[0];
|
|
|
// let param1 = param[1];
|
|
|
// if (param.data.length < 6) {
|
|
|
// return [
|
|
|
// // "日期: " +
|
|
|
// // param1.axisValue +
|
|
|
// // '<hr size=1 style="margin: 3px 0">',
|
|
|
// "开盘: " + param1.data[1] + "<br/>",
|
|
|
// "关盘: " + param1.data[2] + "<br/>",
|
|
|
// "最低: " + param1.data[3] + "<br/>",
|
|
|
// "最高: " + param1.data[4] + "<br/>",
|
|
|
// "成交额: " + param.data[5] + "<br/>",
|
|
|
// ].join("");
|
|
|
// } else {
|
|
|
// return [
|
|
|
// // "日期: " +
|
|
|
// // param.axisValue +
|
|
|
// // '<hr size=1 style="margin: 3px 0">',
|
|
|
// "开盘: " + param.data[1] + "<br/>",
|
|
|
// "关盘: " + param.data[2] + "<br/>",
|
|
|
// "最低: " + param.data[3] + "<br/>",
|
|
|
// "最高: " + param.data[4] + "<br/>",
|
|
|
// "成交额: " + param.data[5] + "<br/>",
|
|
|
// ].join("");
|
|
|
// }
|
|
|
// },
|
|
|
// // extraCssText: 'width: 170px'
|
|
|
// },
|
|
|
// tooltip: {
|
|
|
// formatter: function (param) {
|
|
|
// console.log(param);
|
|
|
// param = param[0];
|
|
|
// return [
|
|
|
// "Date: " +
|
|
|
// param.name +
|
|
|
// '<hr size=1 style="margin: 3px 0">',
|
|
|
// "开盘: " + param.data[0] + "<br/>",
|
|
|
// "Close: " + param.data[1] + "<br/>",
|
|
|
// "Lowest: " + param.data[2] + "<br/>",
|
|
|
// "Highest: " + param.data[3] + "<br/>",
|
|
|
// ].join("");
|
|
|
// },
|
|
|
// },
|
|
|
},
|
|
|
{
|
|
|
name: "MA5",
|
|
|
type: "line",
|
|
|
data: this.calculateMA(5, data),
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
opacity: 0.5,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "MA10",
|
|
|
type: "line",
|
|
|
data: this.calculateMA(10, data),
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
opacity: 0.5,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "MA20",
|
|
|
type: "line",
|
|
|
data: this.calculateMA(20, data),
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
opacity: 0.5,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "MA30",
|
|
|
type: "line",
|
|
|
data: this.calculateMA(30, data),
|
|
|
smooth: true,
|
|
|
lineStyle: {
|
|
|
opacity: 0.5,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "Volume",
|
|
|
type: "bar",
|
|
|
xAxisIndex: 1,
|
|
|
yAxisIndex: 1,
|
|
|
itemStyle: {
|
|
|
// normal: {
|
|
|
// color: function (param) {
|
|
|
// return downColor;
|
|
|
// },
|
|
|
// },
|
|
|
},
|
|
|
data: data.volumes,
|
|
|
},
|
|
|
],
|
|
|
}),
|
|
|
true
|
|
|
);
|
|
|
})
|
|
|
.catch(() => {
|
|
|
// this.shareLoading = false;
|
|
|
});
|
|
|
},
|
|
|
//推荐信息 行点击
|
|
|
rowClick(r) {
|
|
|
},
|
|
|
// 推荐信息 几天几板筛选
|
|
|
selectPlateSift() {
|
|
|
this.plateSift = !this.plateSift;
|
|
|
this.rending();
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.dashboard-container {
|
|
|
padding: 30px;
|
|
|
// padding-bottom: 0;
|
|
|
height: 1100px;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.main_left {
|
|
|
// overflow-y: auto;
|
|
|
width: 70%;
|
|
|
height: 100%;
|
|
|
background-color: #ffffff;
|
|
|
padding: 20px;
|
|
|
border-radius: 8px;
|
|
|
//大盘信息
|
|
|
.left_nav {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
.nav_market_text {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.nav_market_right {
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
display: flex;
|
|
|
// align-items: center;
|
|
|
color: #999999;
|
|
|
}
|
|
|
.el-icon-arrow-right {
|
|
|
margin-left: 5px;
|
|
|
line-height: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.market_top {
|
|
|
margin-top: 20px;
|
|
|
padding: 20px;
|
|
|
border: 1px solid #e8e8e8;
|
|
|
.market_top_nav {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
.market_top_nav_text {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.market_top_nav_text > div {
|
|
|
margin-right: 20px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.market_top_nav_date {
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 10px 16px;
|
|
|
border: 1px solid #dedede;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
}
|
|
|
.columnar_value {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.columnar_value > span {
|
|
|
margin-right: 30px;
|
|
|
}
|
|
|
}
|
|
|
.market_bottom {
|
|
|
padding-top: 20px;
|
|
|
border: 1px solid #e8e8e8;
|
|
|
margin-top: 15px;
|
|
|
.market_bottom_nav_text {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.market_bottom_nav_text > div {
|
|
|
margin-left: 20px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
//推荐
|
|
|
.left_suggest_nav{
|
|
|
margin-top: 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
.suggest_nav_market_text {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.suggest_nav_market_right {
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
display: flex;
|
|
|
// align-items: center;
|
|
|
color: #999999;
|
|
|
}
|
|
|
.el-icon-arrow-right {
|
|
|
margin-left: 5px;
|
|
|
line-height: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.left_suggest {
|
|
|
margin-top: 20px;
|
|
|
// padding: 20px;
|
|
|
border: 1px solid #e8e8e8;
|
|
|
.suggest_nav_list {
|
|
|
padding: 20px 20px 5px 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.suggest_list_head{
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
padding: 12px 20px;
|
|
|
margin-top: 12px;
|
|
|
background-color: #fff9f3;
|
|
|
.suggest_head_left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.suggest_head_date {
|
|
|
width: 90px;
|
|
|
}
|
|
|
.suggest_head_name {
|
|
|
width: 120px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.suggest_head_industry_name{
|
|
|
width: 120px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
::v-deep .el-table td {
|
|
|
text-align: center;
|
|
|
border: 0;
|
|
|
}
|
|
|
::v-deep .el-table th.is-leaf {
|
|
|
text-align: center;
|
|
|
background-color: #fff9f3;
|
|
|
color: #333333;
|
|
|
padding: 13px 0;
|
|
|
}
|
|
|
|
|
|
|
|
|
.columnar_value {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.columnar_value > span {
|
|
|
margin-right: 30px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.main_right {
|
|
|
// background-color: white;
|
|
|
width: 26%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
.main_right_top {
|
|
|
padding: 20px 0;
|
|
|
height: 66%;
|
|
|
border-radius: 8px;
|
|
|
background-color: white;
|
|
|
.main_right_top_nav {
|
|
|
padding: 0 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
.main_right_top_text {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.main_right_top_right {
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
display: flex;
|
|
|
// align-items: center;
|
|
|
color: #999999;
|
|
|
}
|
|
|
.el-icon-arrow-right {
|
|
|
margin-left: 5px;
|
|
|
line-height: 16px;
|
|
|
}
|
|
|
}
|
|
|
.trend_nav_list {
|
|
|
padding: 0 20px;
|
|
|
margin-top: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
font-size: 14px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.trend_nav_list div {
|
|
|
margin-top: 10px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.trend_list_head {
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 12px 20px;
|
|
|
margin-top: 12px;
|
|
|
background-color: #fff9f3;
|
|
|
.trend_head_left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.trend__head_date {
|
|
|
width: 90px;
|
|
|
}
|
|
|
.trend__head_name {
|
|
|
width: 120px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.head_plate_box {
|
|
|
text-align: center;
|
|
|
width: 100px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
.module_head_icon {
|
|
|
margin-left: 4px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
|
|
|
.head_icon {
|
|
|
width: 9px;
|
|
|
height: 5px;
|
|
|
margin-top: 2px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.head_ranking_box {
|
|
|
text-align: center;
|
|
|
width: 100px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
.module_head_icon {
|
|
|
margin-left: 4px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.head_icon {
|
|
|
width: 9px;
|
|
|
height: 5px;
|
|
|
margin-top: 2px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.trend_list {
|
|
|
padding: 19px 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
font-size: 14px;
|
|
|
border-bottom: 1px solid #ececec;
|
|
|
.trend_list_left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.trend_list_date {
|
|
|
width: 90px;
|
|
|
}
|
|
|
.trend_list_name {
|
|
|
width: 120px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.list_plate_box {
|
|
|
text-align: center;
|
|
|
width: 100px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
.plate_box_right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
.liate_box_icon {
|
|
|
width: 9px;
|
|
|
height: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.trend_list_right {
|
|
|
text-align: center;
|
|
|
flex: 1;
|
|
|
}
|
|
|
}
|
|
|
.trend_list:last-child {
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
.main_right_bottom {
|
|
|
background-color: white;
|
|
|
height: 31%;
|
|
|
border-radius: 8px;
|
|
|
padding: 20px 0;
|
|
|
.main_right_bottom_nav {
|
|
|
padding: 0 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
.main_right_bottom_text {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.main_right_bottom_right {
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
display: flex;
|
|
|
// align-items: center;
|
|
|
color: #999999;
|
|
|
}
|
|
|
.el-icon-arrow-right {
|
|
|
margin-left: 5px;
|
|
|
line-height: 16px;
|
|
|
}
|
|
|
}
|
|
|
.private_list_head {
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 12px 20px;
|
|
|
margin-top: 12px;
|
|
|
background-color: #fff9f3;
|
|
|
.private_head_left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.private_head_name {
|
|
|
width: 80px;
|
|
|
}
|
|
|
.private_head_date {
|
|
|
width: 80px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.private_head_price {
|
|
|
width: 60px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.private_head_decline {
|
|
|
width: 70px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.private_list {
|
|
|
padding: 14px 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
font-size: 14px;
|
|
|
border-bottom: 1px solid #ececec;
|
|
|
.private_list_left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.private_list_name {
|
|
|
width: 80px;
|
|
|
.private_list_code {
|
|
|
font-size: 12px;
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
}
|
|
|
.private_list_date {
|
|
|
width: 80px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.private_list_price {
|
|
|
width: 60px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.private_list_decline {
|
|
|
width: 70px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.more_box {
|
|
|
margin-top: 14px;
|
|
|
font-size: 12px;
|
|
|
color: #ec7c00;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
.el-icon-arrow-right {
|
|
|
color: #ec7c00;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.show_head {
|
|
|
font-size: 20px;
|
|
|
display: flex;
|
|
|
font-weight: bold;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
padding-right: 30px;
|
|
|
color: #333333;
|
|
|
cursor: pointer;
|
|
|
.show_head_icon {
|
|
|
margin-left: 10px;
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
}
|
|
|
}
|
|
|
::v-deep .el-dialog__header {
|
|
|
padding: 20px 20px 0 20px;
|
|
|
}
|
|
|
::v-deep .el-dialog__body {
|
|
|
padding: 0px 20px 30px 20px;
|
|
|
}
|
|
|
::v-deep .el-dialog {
|
|
|
margin-top: 5vh !important;
|
|
|
margin-bottom: 5vh !important;
|
|
|
}
|
|
|
.hide_input {
|
|
|
position: relative !important;
|
|
|
}
|
|
|
//修改控件自带的css
|
|
|
.hide_input .el-date-editor {
|
|
|
position: absolute; //绝对定位
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
opacity: 0; //设置完全透明
|
|
|
}
|
|
|
</style>
|
