From 71f3ffbb296e979f052d501fc44474ac06928149 Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Wed, 16 Mar 2022 14:26:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=AF=86=E8=B4=A7=E5=B8=81=E8=A1=8C?= =?UTF-8?q?=E6=83=85=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/screen/list/index.vue | 269 ++++++++++++++++++++++---------- src/styles/page/screen.scss | 39 +---- vue.config.js | 10 -- 3 files changed, 186 insertions(+), 132 deletions(-) diff --git a/src/pages/screen/list/index.vue b/src/pages/screen/list/index.vue index fbeef37..71be2c1 100644 --- a/src/pages/screen/list/index.vue +++ b/src/pages/screen/list/index.vue @@ -92,15 +92,27 @@ 加密货币行情 -
-
- +
+ + + + + + + + + + + + + + + + + +
币种最新价24H成交量24H涨跌
{{ item.currencyPair }}{{ item.amount }}{{ item.total }}

{{ (item.percent * 100).toFixed(2) + '%' }}

+
@@ -126,9 +138,9 @@ -
+
- 人民币汇率中间价报告 + 全国税收收入
@@ -244,46 +256,9 @@
- 平台活动案例 -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
活动主题活动举办地日期
2018广西特产行销全国南宁2018年
2018壮族三月三电商节南宁2018年
2018灵山荔枝节灵山县2018年
2018年货节广西2018年
2017好讲师大赛南宁2017年
+ 以美元计算进口年率
+
@@ -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%; diff --git a/src/styles/page/screen.scss b/src/styles/page/screen.scss index 51f3864..08d390c 100644 --- a/src/styles/page/screen.scss +++ b/src/styles/page/screen.scss @@ -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; diff --git a/vue.config.js b/vue.config.js index 0d248e6..38dcf1c 100644 --- a/vue.config.js +++ b/vue.config.js @@ -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: {