huoran
/
FE_huoran_data
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

fix

Browse Source
master
yujialong 9 months ago
parent 84c8412fe9
commit 3bf5c1b98a
2 changed files with 1146 additions and 1110 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 166
      src/pages/screen/list/index.vue
  2. 2
      src/setting.js

166
src/pages/screen/list/index.vue
Unescape View File

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

2
src/setting.js
Unescape View File

@ -12,7 +12,7 @@ const dev = process.env.NODE_ENV === 'development' // 本地
let host = `${location.origin}/` let host = `${location.origin}/`
if (dev) { if (dev) {
host = 'http://121.37.12.51/' host = 'http://121.37.12.51/'
// host = 'http://192.168.31.51:9000/' host = 'http://192.168.31.217:9000/'
} }
const Setting = { const Setting = {

Write Preview
Loading…
Cancel
Save