|
|
|
|
@ -1,7 +1,10 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<!-- 全屏 --> |
|
|
|
|
<img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen"> |
|
|
|
|
<img class="full" |
|
|
|
|
src="@/assets/img/screen/full.png" |
|
|
|
|
alt="" |
|
|
|
|
@click="fullScreen"> |
|
|
|
|
<!--header--> |
|
|
|
|
<div class="header"> |
|
|
|
|
<div class="bg_header"> |
|
|
|
|
@ -34,10 +37,13 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_1.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_1.png" |
|
|
|
|
alt=""> |
|
|
|
|
中国宏观杠杆率 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart1" class="chart" style="height: 280px;"></div> |
|
|
|
|
<div id="chart1" |
|
|
|
|
class="chart" |
|
|
|
|
style="height: 280px;"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
@ -57,10 +63,13 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_2.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_2.png" |
|
|
|
|
alt=""> |
|
|
|
|
新增信贷数据 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart5" class="chart t_btn9" style="height: 280px;"></div> |
|
|
|
|
<div id="chart5" |
|
|
|
|
class="chart t_btn9" |
|
|
|
|
style="height: 280px;"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
@ -80,7 +89,8 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
alt=""> |
|
|
|
|
{{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}年商品零售价格指数 |
|
|
|
|
</div> |
|
|
|
|
<div class="main_table"> |
|
|
|
|
@ -93,10 +103,13 @@ |
|
|
|
|
</thead> |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_table" ref="tableWrap" style="height: 196px;margin-top: 0;overflow: auto"> |
|
|
|
|
<div class="main_table" |
|
|
|
|
ref="tableWrap" |
|
|
|
|
style="height: 196px;margin-top: 0;overflow: auto"> |
|
|
|
|
<table> |
|
|
|
|
<tbody> |
|
|
|
|
<tr v-for="(item, i) in goodsSell" :key="i"> |
|
|
|
|
<tr v-for="(item, i) in goodsSell" |
|
|
|
|
:key="i"> |
|
|
|
|
<td width="70%">{{ item.hct }}</td> |
|
|
|
|
<td>{{ item.rcpi }}</td> |
|
|
|
|
</tr> |
|
|
|
|
@ -106,7 +119,8 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="middle"> |
|
|
|
|
<div class="item" style="height: 350px"> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 350px"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
@ -128,7 +142,8 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_3.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_3.png" |
|
|
|
|
alt=""> |
|
|
|
|
中国GDP年率报告 |
|
|
|
|
</div> |
|
|
|
|
<div class="main_table"> |
|
|
|
|
@ -141,11 +156,14 @@ |
|
|
|
|
</thead> |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_table" ref="gdpList" style="max-height: 260px;margin-top: 0;overflow: auto;"> |
|
|
|
|
<div class="main_table" |
|
|
|
|
ref="gdpList" |
|
|
|
|
style="max-height: 260px;margin-top: 0;overflow: auto;"> |
|
|
|
|
<table> |
|
|
|
|
<tbody> |
|
|
|
|
<template v-for="(item, i) in gdps"> |
|
|
|
|
<tr v-if="item.value != '0'" :key="i"> |
|
|
|
|
<tr v-if="item.value != '0'" |
|
|
|
|
:key="i"> |
|
|
|
|
<td width="50%">{{ item.date_index }}</td> |
|
|
|
|
<td width="50%">${{ item.value }}</td> |
|
|
|
|
</tr> |
|
|
|
|
@ -154,7 +172,8 @@ |
|
|
|
|
</table> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item" style="height: 520px;"> |
|
|
|
|
<div class="item" |
|
|
|
|
style="height: 520px;"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
<i class="t_l_line"></i> |
|
|
|
|
@ -176,15 +195,24 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_3.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_3.png" |
|
|
|
|
alt=""> |
|
|
|
|
主要央行利率 |
|
|
|
|
</div> |
|
|
|
|
<div class="earth"> |
|
|
|
|
<img class="lbx" src="@/assets/img/screen/lbx.png" alt=""> |
|
|
|
|
<img class="jt" src="@/assets/img/screen/jt.png" alt=""> |
|
|
|
|
<img class="map" src="@/assets/img/screen/map.png" alt=""> |
|
|
|
|
<img class="lbx" |
|
|
|
|
src="@/assets/img/screen/lbx.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img class="jt" |
|
|
|
|
src="@/assets/img/screen/jt.png" |
|
|
|
|
alt=""> |
|
|
|
|
<img class="map" |
|
|
|
|
src="@/assets/img/screen/map.png" |
|
|
|
|
alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div class="chart" id="chart7" style="height: 500px"></div> |
|
|
|
|
<div class="chart" |
|
|
|
|
id="chart7" |
|
|
|
|
style="height: 500px"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
@ -210,10 +238,13 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_4.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_4.png" |
|
|
|
|
alt=""> |
|
|
|
|
全国税收收入 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart3" class="echart t_btn7" style="height: 280px;"></div> |
|
|
|
|
<div id="chart3" |
|
|
|
|
class="echart t_btn7" |
|
|
|
|
style="height: 280px;"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<!--左上边框--> |
|
|
|
|
@ -237,10 +268,12 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_5.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_5.png" |
|
|
|
|
alt=""> |
|
|
|
|
央行货币当局资产负债 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart4" style="height: 280px;"></div> |
|
|
|
|
<div id="chart4" |
|
|
|
|
style="height: 280px;"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="t_line_box"> |
|
|
|
|
@ -260,10 +293,13 @@ |
|
|
|
|
<i class="b_r_line"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="main_title"> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" alt=""> |
|
|
|
|
<img src="@/assets/img/screen/t_7.png" |
|
|
|
|
alt=""> |
|
|
|
|
以美元计算进口年率 |
|
|
|
|
</div> |
|
|
|
|
<div id="chart6" class="chart" style="height: 270px;"></div> |
|
|
|
|
<div id="chart6" |
|
|
|
|
class="chart" |
|
|
|
|
style="height: 270px;"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -278,7 +314,7 @@ import SockJS from 'sockjs-client' |
|
|
|
|
import Stomp from 'stompjs' |
|
|
|
|
import map from './map' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
stompClientMarket: null, |
|
|
|
|
stompClient: null, |
|
|
|
|
@ -287,32 +323,32 @@ export default { |
|
|
|
|
gdps: [] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.getList() |
|
|
|
|
this.renderChart() |
|
|
|
|
this.renderMap() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 中国gdp |
|
|
|
|
getList() { |
|
|
|
|
getList () { |
|
|
|
|
this.$get(`${this.api.visualPreview}?tableName=hg_zg_gm_zhongguogdpnianlvbaogao&tableId=17`).then(({ comment, data }) => { |
|
|
|
|
this.gdps = data |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 获取加密货币实时行情 |
|
|
|
|
getCrypto() { |
|
|
|
|
getCrypto () { |
|
|
|
|
this.$get(`${this.api.getTopList}`).then(res => { |
|
|
|
|
this.userCount = res.totalCount |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 建立websocket连接 |
|
|
|
|
connect() { |
|
|
|
|
connect () { |
|
|
|
|
const socket = new SockJS(`${Setting.cryptoBaseURL}currency/websocket`) //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息 |
|
|
|
|
// 获取STOMP子协议的客户端对象 |
|
|
|
|
this.stompClientMarket = new Stomp.over(socket) |
|
|
|
|
this.stompClientMarket.debug = null |
|
|
|
|
var this_ = this |
|
|
|
|
this.stompClientMarket.connect({}, function(event) { |
|
|
|
|
this.stompClientMarket.connect({}, function (event) { |
|
|
|
|
//防止单个用户多次订阅 |
|
|
|
|
if (this_.subObjMarket == null) { |
|
|
|
|
this_.subscribeMarket() |
|
|
|
|
@ -323,7 +359,7 @@ export default { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 訂閲 |
|
|
|
|
subscribeMarket() { |
|
|
|
|
subscribeMarket () { |
|
|
|
|
const this_ = this |
|
|
|
|
this.subObjMarket = this.stompClientMarket.subscribe( |
|
|
|
|
this_.api.market, |
|
|
|
|
@ -342,11 +378,11 @@ export default { |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
disconnect() { |
|
|
|
|
disconnect () { |
|
|
|
|
this.stompClient && this.stompClient.disconnect() |
|
|
|
|
}, |
|
|
|
|
// 全屏 |
|
|
|
|
fullScreen() { |
|
|
|
|
fullScreen () { |
|
|
|
|
// 检测是否全屏 |
|
|
|
|
if (document.fullscreenElement || |
|
|
|
|
document.mozFullScreenElement || |
|
|
|
|
@ -367,10 +403,10 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 获取图标数据并渲染 |
|
|
|
|
renderChart() { |
|
|
|
|
renderChart () { |
|
|
|
|
const animateChart = (chart, option, data, num = 6) => { |
|
|
|
|
// 每次向后滚动一个，最后一个从头开始。 |
|
|
|
|
if (option.dataZoom[0].endValue == data.length ) { |
|
|
|
|
if (option.dataZoom[0].endValue == data.length) { |
|
|
|
|
option.dataZoom[0].endValue = num |
|
|
|
|
option.dataZoom[0].startValue = 0 |
|
|
|
|
} |
|
|
|
|
@ -402,7 +438,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: comment.map(e => e.comment), |
|
|
|
|
textStyle:{ |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
top: '8%' |
|
|
|
|
@ -423,7 +459,7 @@ export default { |
|
|
|
|
endValue: 6 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
color: ['#6188e9','#9032f3','#a57de3','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'], |
|
|
|
|
color: ['#6188e9', '#9032f3', '#a57de3', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'], |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
boundaryGap: ['20%', '20%'], |
|
|
|
|
@ -459,7 +495,7 @@ export default { |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[0], option, series) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 全国税收收入 |
|
|
|
|
this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_quanguoshuishoushouru&tableId=33`).then(res => { |
|
|
|
|
@ -497,10 +533,10 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
color: ['#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'], |
|
|
|
|
color: ['#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'], |
|
|
|
|
legend: { |
|
|
|
|
data: ['税收收入合计'], |
|
|
|
|
textStyle:{ |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
top: '8%' |
|
|
|
|
@ -542,7 +578,7 @@ export default { |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[1], option, data) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 国际旅游外汇收入构成 |
|
|
|
|
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_guojilvyouwaihuishourugoucheng&tableId=52`).then(res => { |
|
|
|
|
@ -583,7 +619,7 @@ export default { |
|
|
|
|
//起始角度，支持范围[0, 360] |
|
|
|
|
// startAngle: 0, |
|
|
|
|
//饼图的半径，数组的第一项是内半径，第二项是外半径 |
|
|
|
|
radius : '45%', |
|
|
|
|
radius: '45%', |
|
|
|
|
//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度 |
|
|
|
|
center: ['50%', '65%'], |
|
|
|
|
//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式： |
|
|
|
|
@ -592,7 +628,7 @@ export default { |
|
|
|
|
// roseType: 'radius', |
|
|
|
|
//是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。 |
|
|
|
|
// avoidLabelOverlap: false, |
|
|
|
|
color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'], |
|
|
|
|
color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'], |
|
|
|
|
label: { |
|
|
|
|
normal: { |
|
|
|
|
show: true, |
|
|
|
|
@ -614,7 +650,7 @@ export default { |
|
|
|
|
data: series |
|
|
|
|
}] |
|
|
|
|
}) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 央行货币当局资产负债 |
|
|
|
|
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_yanghanghuobidangjuzichanfuzhai&tableId=55`).then(res => { |
|
|
|
|
@ -774,7 +810,7 @@ export default { |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[3], option, data, 3) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 商品零售价格指数 |
|
|
|
|
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_shangpinlingshoujiagezhishu&tableId=60`).then(res => { |
|
|
|
|
@ -788,7 +824,7 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
this.goodsSell = [...goodsSell, ...goodsSell] |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 新增信贷数据 |
|
|
|
|
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_xinzengxindaishuju&tableId=34`).then(res => { |
|
|
|
|
@ -934,7 +970,7 @@ export default { |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[4], option, data, 3) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 以美元计算进口年率 |
|
|
|
|
this.$get(`${this.api.visualPreview}?tableName=hg_zg_my_yimeiyuanjisuanjinkounianlv&tableId=22`).then(res => { |
|
|
|
|
@ -1039,7 +1075,7 @@ export default { |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[5], option, data) |
|
|
|
|
}, 1500) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
this.scrollTable() |
|
|
|
|
|
|
|
|
|
@ -1051,20 +1087,20 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 生成世界地图 |
|
|
|
|
async renderMap() { |
|
|
|
|
async renderMap () { |
|
|
|
|
// 利率全部表id和name |
|
|
|
|
const param = [ |
|
|
|
|
{tableId: 2, tableName: 'll_yh_usa'}, |
|
|
|
|
{tableId: 3, tableName: 'll_yh_euro'}, |
|
|
|
|
{tableId: 4, tableName: 'll_yh_newzealand'}, |
|
|
|
|
{tableId: 5, tableName: 'll_yh_china'}, |
|
|
|
|
{tableId: 6, tableName: 'll_yh_switzerland'}, |
|
|
|
|
{tableId: 7, tableName: 'll_yh_english'}, |
|
|
|
|
{tableId: 8, tableName: 'll_yh_australia'}, |
|
|
|
|
{tableId: 9, tableName: 'll_yh_japan'}, |
|
|
|
|
{tableId: 10, tableName: 'll_yh_russia'}, |
|
|
|
|
{tableId: 11, tableName: 'll_yh_india'}, |
|
|
|
|
{tableId: 12, tableName: 'll_yh_brazil'} |
|
|
|
|
{ tableId: 2, tableName: 'll_yh_usa' }, |
|
|
|
|
{ tableId: 3, tableName: 'll_yh_euro' }, |
|
|
|
|
{ tableId: 4, tableName: 'll_yh_newzealand' }, |
|
|
|
|
{ tableId: 5, tableName: 'll_yh_china' }, |
|
|
|
|
{ tableId: 6, tableName: 'll_yh_switzerland' }, |
|
|
|
|
{ tableId: 7, tableName: 'll_yh_english' }, |
|
|
|
|
{ tableId: 8, tableName: 'll_yh_australia' }, |
|
|
|
|
{ tableId: 9, tableName: 'll_yh_japan' }, |
|
|
|
|
{ tableId: 10, tableName: 'll_yh_russia' }, |
|
|
|
|
{ tableId: 11, tableName: 'll_yh_india' }, |
|
|
|
|
{ tableId: 12, tableName: 'll_yh_brazil' } |
|
|
|
|
] |
|
|
|
|
this.$post(this.api.multipleTablePreview, param).then(res => { |
|
|
|
|
// 每个国家的央行利率，因为国家名称无法直接取数据库里的，所以这里固定好 |
|
|
|
|
@ -1219,10 +1255,10 @@ export default { |
|
|
|
|
index = -1 |
|
|
|
|
} |
|
|
|
|
}, 2000) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 表格滚动效果 |
|
|
|
|
scrollTable() { |
|
|
|
|
scrollTable () { |
|
|
|
|
const dom = this.$refs.tableWrap |
|
|
|
|
const dom1 = this.$refs.gdpList |
|
|
|
|
setInterval(() => { |
|
|
|
|
@ -1238,5 +1274,5 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import "../../../styles/page/screen.scss"; |
|
|
|
|
@import '../../../styles/page/screen.scss'; |
|
|
|
|
</style> |
yujialong