加密货币行情等

src/pages/screen/list/index.vue

@@ -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="main_table">
-                    <div class="linshi_zdy">
+                      <table>
-                        <ul>
+                        <thead>
-                            <li><span></span>2015批(8个)</li>
+                          <tr>
-                            <li><span></span>2016批(15个)</li>
+                            <th width="30%">币种</th>
-                            <li><span></span>2017批(13个)</li>
+                            <th width="25%">最新价</th>
-                            <li><span></span>2018批(11个)</li>
+                            <th width="25%">24H成交量</th>
-                        </ul>
+                            <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 SockJS from 'sockjs-client'
-import Stomp from 'stompjs';
+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);
+            const quo = JSON.parse(data.body)
-            console.log(subData);
+            const list = this.cryptoList
-
+            const coin = list.findIndex(e => e.currencyPair === quo.currencyPair)
-            for (let i = 0; i < this_.rangeList.length; i++) {
+            if (coin === -1) {
-              if (subData.currencyPair == this_.rangeList[i].currencyPair) {
+              list.push(quo)
-                // this_.initRange();
+            } else {
-                this_.rangeList[i] = subData;
+              list[coin] = quo
-                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;
-                  }
-                }
-              }
             }
+            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%;

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;

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: {