日志

src/api/index.js

@@ -9,6 +9,7 @@ export default {
   market: `/topic/market`,
   getTopList: `${Setting.cryptoBaseURL}currency/market/getTopList`,
 
+  platformLogList: `/nakadai/log/platformLogList`,
   // 公用接口
   queryProvince: `/nakadai/nakadai/province/queryProvince`,
   queryCity: `/nakadai/nakadai/city/queryCity`,

src/layouts/navbar/index.vue

@@ -23,6 +23,9 @@ export default {
       }, {
         index: '/screen',
         title: '数据看板'
+      }, {
+          index: "/log/list",
+          title: "最近更新"
       }],
       // 前台菜单
       dataMenu: {

src/pages/log/list/index.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="wrap index">
+        <div class="top">
+            <img width="450" src="@/assets/img/update.png" alt="">
+            <p>给用户带来更好的服务与体验是我们不断优化和迭代产品的动力。</p>
+        </div>
+        <div class="timeline">
+            <div class="item" v-for="(item, i) in listData" :key="i">
+                <span class="date">{{ item.updateTime }}</span>
+                <div class="right">
+                    <h6>{{ item.versionName }}</h6>
+                    <img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
+                    <ul class="detail">
+                        <li v-for="(item, i) in item.logContents" :key="i">
+                            <p class="name"><img :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')" alt=""> {{ funcList.find(e => e.id === item.type).name }}</p>
+                            <div class="val">
+                                <p class="" v-for="(item, i) in item.content" :key="i">{{ item }}</p>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+export default {
+    name: 'log',
+    data() {
+        return {
+            platformList: Setting.platformList,
+            listData: [],
+            funcList: [
+                {
+                    id: 0,
+                    name: '新功能',
+                    icon: 'func'
+                },
+                {
+                    id: 1,
+                    name: '修复',
+                    icon: 'bug'
+                },
+                {
+                    id: 2,
+                    name: '优化',
+                    icon: 'optimize'
+                }
+            ]
+        }
+    },
+    mounted() {
+        this.getData()
+    },
+    methods: {
+        getData() {
+            this.$get(`${this.api.platformLogList}?platformId=${Setting.platformId}&port=1&versionName=`).then(res => {
+              const { logList } = res
+              logList.map((e, i) => {
+                e.logContents.map(n => {
+                  n.content = n.content.split('\n')
+                })
+              })
+              this.listData = logList
+            }).catch(res => {})
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+    padding: 50px 0 20px !important;
+    background-color: #000 !important;
+    .top {
+        margin-bottom: 100px;
+        text-align: center;
+        img {
+          margin: 30px 0;
+        }
+        p {
+          color: #e9e9e9;
+        }
+    }
+    .timeline {
+        display: flex;
+        flex-direction: column;
+        width: 1000px;
+        margin: 0 auto;
+    }
+    .item {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 30px;
+    }
+    .date {
+        width: 300px;
+        margin-right: 100px;
+        text-align: right;
+        color: #cbcbcb;
+        font-size: 14px;
+    }
+    .right {
+        flex: 1;
+        color: #fff;
+    }
+    h6 {
+        margin-bottom: 15px;
+        font-size: 18px;
+        line-height: 1;
+    }
+    .cover {
+        max-width: 400px;
+        margin: 10px 0 20px;
+    }
+    .detail {
+        li {
+            margin-bottom: 20px;
+        }
+        .name {
+            display: flex;
+            align-items: center;
+            margin-bottom: 5px;
+            font-size: 14px;
+            color: #fff;
+            img {
+                width: 20px;
+                margin-right: 8px;
+            }
+        }
+        .val {
+            font-size: 15px;
+            line-height: 1.8;
+            white-space: pre-wrap;
+            p {
+              position: relative;
+              color: #a3a3a3;
+              &:before {
+                content: '';
+                display: inline-block;
+                width: 5px;
+                height: 5px;
+                margin: 0 15px 0 8px;
+                vertical-align: middle;
+                border-radius: 20px;
+                background-color: $main-color;
+              }
+            }
+        }
+    }
+}
+</style>

src/pages/screen/list/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="wrap">
-    <canvas class="canvas" id="canvas"></canvas>
     <!-- 全屏 -->
     <img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen">
     <!--header-->
@@ -12,10 +11,6 @@
 
     <!--main-->
     <div class="data_content">
-        <!-- <div class="data_time">
-            温馨提示: 点击模块后跳转至详情页面。        
-        </div> -->
-
         <div class="data_main">
             <div class="main_left fl">
                 <div class="left_1 t_btn6" style="cursor: pointer;">
@@ -308,7 +303,6 @@ import util from '@/libs/util'
 import * as echarts from 'echarts'
 import SockJS from 'sockjs-client'
 import Stomp from 'stompjs'
-// import '@/plugins/canvasBg'
 export default {
     data() {
         return {
@@ -322,7 +316,7 @@ export default {
       // this.getCrypto()
       this.connect()
       this.renderChart()
-      require('@/plugins/canvasBg') // 加载canvas背景js
+      // require('@/plugins/canvasBg') // 加载canvas背景js
     },
     methods: {
       // 获取加密货币实时行情
@@ -406,7 +400,7 @@ export default {
           }
           chart.setOption(option)
         }
-
+        let chart = {}
         // 中国宏观杠杆率
         this.$get(`${this.api.visualPreview}?tableName=hg_zg_zhongguohongguanganggan&tableId=14`).then(res => {
           const { comment, data } = res
@@ -477,11 +471,11 @@ export default {
             },
             series
           }
-          const myChart = echarts.init(document.querySelector(`#chart1`))
+          chart[0] = echarts.init(document.querySelector(`#chart1`))
-          myChart.setOption(option)
+          chart[0].setOption(option)
           
           setInterval(function () {
-            animateChart(myChart, option, series)
+            animateChart(chart[0], option, series)
           }, 1500)
         }).catch(res => {})
 
@@ -561,10 +555,10 @@ export default {
               }
             ]
           }
-          const myChart = echarts.init(document.querySelector(`#chart3`))
+          chart[1] = echarts.init(document.querySelector(`#chart3`))
-          myChart.setOption(option)
+          chart[1].setOption(option)
           setInterval(function () {
-            animateChart(myChart, option, data)
+            animateChart(chart[1], option, data)
           }, 1500)
         }).catch(res => {})
       
@@ -585,7 +579,8 @@ export default {
               }
             })
           })
-          echarts.init(document.querySelector(`#chart2`)).setOption({
+          chart[2] = echarts.init(document.querySelector(`#chart2`))
+          chart[2].setOption({
             tooltip: {
                 trigger: 'item',
                 formatter: `${data[0].statistical_annual}年{a} <br/>{b} : {c}亿`
@@ -792,10 +787,10 @@ export default {
               }
             ]
           }
-          const myChart = echarts.init(document.querySelector(`#chart4`))
+          chart[3] = echarts.init(document.querySelector(`#chart4`))
-          myChart.setOption(option)
+          chart[3].setOption(option)
           setInterval(function () {
-            animateChart(myChart, option, data, 3)
+            animateChart(chart[3], option, data, 3)
           }, 1500)
         }).catch(res => {})
 
@@ -952,10 +947,10 @@ export default {
               }
             ]
           }
-          const myChart = echarts.init(document.querySelector(`#chart5`))
+          chart[4] = echarts.init(document.querySelector(`#chart5`))
-          myChart.setOption(option)
+          chart[4].setOption(option)
           setInterval(function () {
-            animateChart(myChart, option, data, 3)
+            animateChart(chart[4], option, data, 3)
           }, 1500)
         }).catch(res => {})
       
@@ -1059,10 +1054,10 @@ export default {
               }
             ]
           }
-          const myChart = echarts.init(document.querySelector(`#chart6`))
+          chart[5] = echarts.init(document.querySelector(`#chart6`))
-          myChart.setOption(option)
+          chart[5].setOption(option)
           setInterval(function () {
-            animateChart(myChart, option, data)
+            animateChart(chart[5], option, data)
           }, 1500)
         }).catch(res => {})
       
@@ -1071,7 +1066,8 @@ export default {
         this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_quanshehuiyongdianfenleiqingkuangbiao&tableId=50`).then(res => {
           const { comment, data } = res
           const item = data[3]
-          echarts.init(document.querySelector(`#chart7`)).setOption({
+          chart[6] = echarts.init(document.querySelector(`#chart7`))
+          chart[6].setOption({
             title: [{
               text: `2021年全社会用电分类情况`,
               top: '11%',
@@ -1131,7 +1127,8 @@ export default {
         this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuikehuoyunshuliang&tableId=51`).then(res => {
           const { comment, data } = res
           if (!data.length) return false
-          echarts.init(document.querySelector(`#chart8`)).setOption({
+          chart[7] = echarts.init(document.querySelector(`#chart8`))
+          chart[7].setOption({
             title: [{
               text: `${data[0].operation_time.substr(0, 4)}年全社会客货运输量`,
               top: '11%',
@@ -1189,6 +1186,13 @@ export default {
         }).catch(res => {})
 
         this.scrollTable()
+
+        // 监听resize事件，动态改变chart大小
+        window.addEventListener('resize', () => {
+          for (let i = 0; i < 8; i++) {
+            chart[i].resize()
+          }
+        })
       },
       // 表格滚动效果
       scrollTable() {

src/router/modules/log.js

@@ -0,0 +1,23 @@
+import BasicLayout from '@/layouts/home';
+
+const meta = {};
+
+const pre = 'log-';
+
+export default {
+    path: '/log',
+    name: 'log',
+    redirect: {
+        name: `${pre}list`
+    },
+    meta,
+    component: BasicLayout,
+    children: [
+        {
+            name: `${pre}list`,
+            path: `list`,
+            component: () => import('@/pages/log/list'),
+            meta: { title: '有什么新功能' }
+        },
+    ]
+};

src/router/permission.js

@@ -3,7 +3,7 @@ import Setting from '@/setting'
 import util from '@/libs/util'
 import store from '@/store'
 const managerPath = ['/stat/list', '/user/list', '/role/list'] // 管理员才能访问的页面路径
-const whiteList = ['/login', '/index/list', '/screen'] // 白名单
+const whiteList = ['/login', '/index/list', '/screen', '/log/list'] // 白名单
 
 router.beforeEach((to, from, next) => {
     document.title = Setting.titleSuffix

src/router/routes.js

@@ -1,5 +1,6 @@
 import index from './modules/index'
 import data from './modules/data'
+import log from './modules/log'
 import stat from './modules/stat'
 import screen from './modules/screen'
 import user from './modules/user'
@@ -21,6 +22,7 @@ const frameIn = [
     },
     index,
     data,
+    log,
     stat,
     user,
     role,

src/setting.js

@@ -25,7 +25,7 @@ const Setting = {
      * 正式：http://www.dataforward.cn:9000
      * */
     // apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : 'http://39.108.250.202:9000',
-    apiBaseURL: env === 'development' ? 'http://39.108.250.202:9000' : `${location.origin}:9000`,
+    apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : `${location.origin}:9000`,
     // 加密货币接口地址
     cryptoBaseURL: `http://159.138.53.111/`,
     // 接口请求返回错误时，弹窗的持续时间，单位：秒

src/styles/page/screen.scss

@@ -17,6 +17,7 @@
   background: url('../../../assets/img/screen/screen1.jpg') no-repeat;
   background-size: 100% 100%;
   .full {
+    z-index: 10;
     position: absolute;
     top: 20px;
     right: 30px;
@@ -78,7 +79,6 @@
     width: 100%;
     height: 80px;
     padding:0 20px;
-    min-width: 1366px;
 }
 .bg_header{
     width: 100%;
@@ -143,7 +143,6 @@
 .content{
     margin: 20px;
     width: calc(100% - 40px);
-    min-width: 1366px;
 }
 .content>.content_title{
     width: 100%;
@@ -264,7 +263,6 @@
     background: #f4a100;
 }
 .data_content{
-  min-width: 1366px;
   padding-top: 20px;
   padding-bottom: 20px;
 }