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

加密货币行情等

Browse Source
dev_2022-04-07
yujialong 3 years ago
parent e1ff9a0c76
commit 71f3ffbb29
3 changed files with 186 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 269
      src/pages/screen/list/index.vue
  2. 39
      src/styles/page/screen.scss
  3. 10
      vue.config.js

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

@ -92,15 +92,27 @@
<img src="@/assets/img/screen/t_3.png" alt="">
加密货币行情
</div>
<div id="chart_map" style="width:100%;height:610px;"></div>
<div class="linshi_zdy">
<ul>
<li><span></span>2015批(8个)</li>
<li><span></span>2016批(15个)</li>
<li><span></span>2017批(13个)</li>
<li><span></span>2018批(11个)</li>
</ul>
<div class="main_table">
<table>
<thead>
<tr>
<th width="30%">币种</th>
<th width="25%">最新价</th>
<th width="25%">24H成交量</th>
<th>24H涨跌</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) in cryptoList" :key="i">
<td>{{ item.currencyPair }}</td>
<td>{{ item.amount }}</td>
<td>{{ item.total }}</td>
<td><p :class="['percent', {fall: item.percent < 0}]">{{ (item.percent * 100).toFixed(2) + '%' }}</p></td>
</tr>
</tbody>
</table>
</div>
<!-- <div id="chart_map" style="width:100%;height:610px;"></div> -->
</div>
</div>
@ -126,9 +138,9 @@
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<div class="main_title" style="left: 50%">
<img src="@/assets/img/screen/t_4.png" alt="">
人民币汇率中间价报告
全国税收收入
</div>
<div id="chart3" class="echart t_btn7" style="width:100%;height: 280px;"></div>
</div>
@ -244,46 +256,9 @@
</div>
<div class="main_title">
<img src="@/assets/img/screen/t_7.png" alt="">
平台活动案例
</div>
<div class="main_table t_btn3 table_zdy">
<table>
<thead>
<tr>
<th>活动主题</th>
<th>活动举办地</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/20.html">2018广西特产行销全国</a></td>
<td>南宁</td>
<td>2018年</td>
</tr>
<tr>
<td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/16.html">2018壮族三月三电商节</a></td>
<td>南宁</td>
<td>2018年</td>
</tr>
<tr>
<td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/17.html">2018灵山荔枝节</a></td>
<td>灵山县</td>
<td>2018年</td>
</tr>
<tr>
<td>2018年货节</td>
<td>广西</td>
<td>2018年</td>
</tr>
<tr>
<td>2017好讲师大赛</td>
<td>南宁</td>
<td>2017年</td>
</tr>
</tbody>
</table>
以美元计算进口年率
</div>
<div id="chart6" class="chart" style="width:100%;height: 280px;"></div>
</div>
</div>
</div>
@ -294,18 +269,20 @@
import Setting from '@/setting'
import util from '@/libs/util'
import * as echarts from 'echarts'
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
export default {
data() {
return {
stompClientMarket: null,
stompClient: null,
goodsSell: []
goodsSell: [],
cryptoList: []
}
},
mounted() {
// this.getCrypto()
this.connect()
this.renderChart()
},
methods: {
@ -317,7 +294,7 @@ export default {
},
// 建立websocket连接
connect() {
let socket = new SockJS(`${Setting.cryptoBaseURL}currency/websocket`) //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
const socket = new SockJS(`${Setting.cryptoBaseURL}currency/websocket`) //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
// 获取STOMP子协议的客户端对象
this.stompClientMarket = new Stomp.over(socket)
this.stompClientMarket.debug = null
@ -334,31 +311,22 @@ export default {
},
// 訂閲
subscribeMarket() {
let this_ = this;
const this_ = this
this.subObjMarket = this.stompClientMarket.subscribe(
this_.api.market,
data => {
//订单返回的盘口数据
var subData = JSON.parse(data.body);
console.log(subData);
for (let i = 0; i < this_.rangeList.length; i++) {
if (subData.currencyPair == this_.rangeList[i].currencyPair) {
// this_.initRange();
this_.rangeList[i] = subData;
this_.rangeList.push(subData);
this_.rangeList.pop();
for (let j = 0; j < this_.usdsLsit.length; j++) {
if (subData.currencyPair == this_.usdsLsit[j].currencyPair) {
// this_.initUsdList();
this_.usdsLsit[j] = subData;
this_.usdsLsit.push(subData);
this_.usdsLsit.pop();
return;
}
}
}
const quo = JSON.parse(data.body)
const list = this.cryptoList
const coin = list.findIndex(e => e.currencyPair === quo.currencyPair)
if (coin === -1) {
list.push(quo)
} else {
list[coin] = quo
}
this.cryptoList = list
console.log("🚀 ~ file: index.vue ~ line 328 ~ subscribeMarket ~ list", list)
this.$forceUpdate()
}
);
},
@ -476,6 +444,20 @@ export default {
{
data: data.map(e => e.ttr),
type: 'bar',
barWidth: 11,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#4033F9"
}, {
offset: 0.8,
color: "#516fff"
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
}
},
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
@ -716,15 +698,6 @@ export default {
// 新增信贷数据
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_xinzengxindaishuju&tableId=34`).then(res => {
const { comment, data } = res
const series = []
comment.map(e => {
// id和操作时间不用显示
e.field !== 'id' && e.field !== 'operation_time' && series.push({
name: e.comment,
type: 'line',
data: data.map(n => n[e.field])
})
})
echarts.init(document.querySelector(`#chart5`)).setOption({
title: {
text: '',
@ -780,7 +753,6 @@ export default {
{
type: 'value',
name: '',
// max: maxOrder + parseInt(maxOrder * 0.2),
axisLabel: {
margin: 10,
textStyle: {
@ -854,6 +826,98 @@ export default {
]
})
}).catch(res => {})
// 以美元计算进口年率
this.$get(`${this.api.previewData}?tableName=hg_zg_my_yimeiyuanjisuanjinkounianlv&tableId=22`).then(res => {
const { comment, data } = res
echarts.init(document.querySelector(`#chart6`)).setOption({
tooltip: {
trigger: 'axis',
},
grid: {
left: '12%',
right: '5%',
bottom: '14%'
},
legend: {
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 10,
data: [data[0].merchandise],
left: '10px',
top: '0px',
textStyle: {
fontSize: 12,
color: '#fff'
}
},
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff',
}
},
data: data.map(e => e.date_index)
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12
},
textStyle: {
color: '#fff'
},
formatter: '{value}%'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#25CEF3']
}
}
}],
series: [{
name: '以美元计算进口年率',
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
barBorderRadius: [10, 10, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#009AFD"
}, {
offset: 0.8,
color: "#33DAFF"
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
}
},
data: data.map(e => e.value)
}
]
})
}).catch(res => {})
}
}
};
@ -865,10 +929,47 @@ export default {
width: 100%;
height: auto;
color:#333;
/* overflow: hidden;*/
background: url('../../../assets/img/screen/screen1.jpg') no-repeat;
background-size: 100% 100%;
}
.main_table {
width: 100%;
margin-top: 25px;
table {
width: 100%;
}
tr{
height: 42px;
}
th{
font-size: 12px;
font-weight: 600;
color:#61d2f7;
text-align: center;
}
td{
color:#fff;
font-size: 10px;
text-align: center;
}
tbody tr:nth-child(odd) {
background-color: #072951;
box-shadow:-10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset;
}
.percent {
width: 64px;
margin: 0 auto;
line-height: 24px;
color: #fff;
text-align: center;
background-color: #0faf7d;
border-radius: 2px;
&.fall {
background-color: #db4154;
}
}
}
/*header开始*/
.header{
width: 100%;

39
src/styles/page/screen.scss
Unescape View File

@ -134,7 +134,7 @@
border-radius: 18px;
position: absolute;
top: -17px;
left: 40%;
left: 48%;
margin-left: -90px;
color:#fff;
font-size: 18px;
@ -323,43 +323,6 @@
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_bottom div .main_table tr{
height: 42px;
}
.data_content .data_bottom div .main_table{
width: 100%;
margin-top: 25px;
}
.data_content .data_bottom div .main_table table{
width: 100%;
}
.data_content .data_bottom div .main_table thead tr{
height: 42px;
}
.data_content .data_bottom div .main_table th{
font-size: 12px;
font-weight: 600;
color:#61d2f7;
text-align: center;
}
.data_content .data_bottom div .main_table th:nth-child(1){
}
.data_content .data_bottom div .main_table th:nth-child(2){
}
.data_content .data_bottom div .main_table td{
color:#fff;
font-size: 10px;
text-align: center;
}
.data_content .data_bottom div .main_table tbody tr:nth-child(1),
.data_content .data_bottom div .main_table tbody tr:nth-child(3),
.data_content .data_bottom div .main_table tbody tr:nth-child(5){
background-color: #072951;
box-shadow:-10px 0px 15px #2C58A6 inset, /*左边阴影*/
10px 0px 15px #2C58A6 inset; /*右边阴影*/
}
.t_btn8,.t_btn2,.t_btn3{
position: relative;
z-index: 100;

10
vue.config.js
Unescape View File

@ -1,15 +1,5 @@
const Setting = require('./src/setting.env')
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 16
})
// 使用等比适配插件
module.exports = {
lintOnSave: true,
css: {

Write Preview
Loading…
Cancel
Save