可视化完善

src/layouts/navbar/index.vue

@@ -17,23 +17,23 @@ export default {
       managerStr: this.$route.query.mg, // 判断是否在后台的标识，只有url上带了mg，并且mg的值为编码后的true，才算进入了后台
       isManager: false,
       active: this.$route.path,
-      defaultMenus: [],
-      // 前台菜单
-      dataMenu: [{
+      defaultMenus: [{
         index: '/index/list',
         title: '首页'
       }, {
+        index: '/screen',
+        title: '数据看板'
+      }],
+      // 前台菜单
+      dataMenu: {
         index: '/data/list',
         title: '数据'
-      }],
+      },
       // 后台菜单（下面要根据获取到的该角色拥有的权限来显示哪些菜单）
       managerMenus: [
         {
           index: '/stat/list',
           title: '数据统计'
-        }, {
-          index: '/screen',
-          title: '大屏展示'
         }, {
           index: '/user/list',
           title: '用户管理'
@@ -80,29 +80,23 @@ export default {
       'setManager'
     ]),
     initMenu() {
-      if (this.isManager) {// 该值为true，则表示当前是在后台（是否是后台是通过url上面的mg来判断的）
-        this.defaultMenus = this.managerMenus
+      // 该值为true，则表示当前是在后台（是否是后台是通过url上面的mg来判断的）
+      if (this.isManager) {
+        const managerMenus = this.managerMenus
         if (Setting.dynamicRoute) {
-          let routes = this.routes
-          let menus = []
-          this.defaultMenus.map(e => {
+          const routes = this.routes
+          const menus = []
+          managerMenus.map(e => {
             routes.find(n => n.name == e.index) && menus.push(e)
           })
           this.menus = menus
         } else {
-          this.menus = this.defaultMenus
+          this.menus = managerMenus
         }
       } else {
-        if (Setting.dynamicRoute) {
+        this.menus = this.defaultMenus
           // 如果是在前台,则判断有没有数据列表的权限
-          if (this.routes.find(e => e.name === '/data/list')) {
-            this.menus = this.dataMenu
-          } else {
-            this.menus = this.dataMenu[0]
-          }
-        } else {
-          this.menus = this.dataMenu
-        }
+        if (!Setting.dynamicRoute || this.routes.find(e => e.name === '/data/list')) this.menus.splice(1, 0, this.dataMenu)
       }
     },
     jump(item) {

src/pages/screen/list/index.vue

@@ -5,7 +5,7 @@
     <!--header-->
     <div class="header">
         <div class="bg_header">
-            <div class="header_nav fl t_title">数据前瞻大屏展示</div> 
+            <div class="header_nav fl t_title">Dataforward 数据看板</div> 
         </div>
     </div>
 
@@ -225,14 +225,14 @@
                 </div>
                 <div class="main_title">
                     <img src="@/assets/img/screen/t_7.png" alt="">
-                    商品零售价格指数
+                    {{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}年商品零售价格指数
                 </div>
                 <div class="main_table t_btn8" style="height: 260px;overflow: auto">
                   <table>
                     <thead>
                       <tr>
                         <th>概况名称</th>
-                        <th>详情</th>
+                        <th>指数</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -522,7 +522,8 @@ export default {
         // 国际旅游外汇收入构成
         this.$get(`${this.api.previewData}?tableName=hg_zg_jr_guojilvyouwaihuishourugoucheng&tableId=52`).then(res => {
           const { comment, data } = res
-          const colors = ['#f845f1', '#44aff0', '#ad46f3', '#5045f6', '#4777f5', '#45dbf7', '#f6d54a']
+          if (!data.length) return false
+          const colors = ['rgba(227, 46, 138, .5)', 'rgba(123, 41, 225, .8)', 'rgba(12, 53, 215, .8)', 'rgba(69, 223, 124, .8)', 'rgba(155, 1, 55, .8)', 'rgba(200, 142, 22, .8)']
           const series = []
           data.map((e, i) => {
             series.push({
@@ -538,7 +539,7 @@ export default {
           echarts.init(document.querySelector(`#chart2`)).setOption({
             tooltip: {
                 trigger: 'item',
-                formatter: "{a} <br/>{b} : {c}亿"
+                formatter: `${data[0].statistical_annual}年{a} <br/>{b} : {c}亿`
             },
             legend: {
                 x: 'center',
@@ -565,10 +566,11 @@ export default {
                 // roseType: 'radius',
                 //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
                 // avoidLabelOverlap: false,
+                color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],	
                 label: {
                     normal: {
                         show: true,
-                        formatter: '{b}{c}万件'
+                        formatter: '{b}{c}亿美元'
                     },
                     emphasis: {
                         show: true
@@ -740,6 +742,7 @@ export default {
           const goodsSell = []
           data.map(e => {
             goodsSell.push({
+              operation_time: e.operation_time,
               hct: e.hct,
               rcpi: e.rcpi
             })
@@ -975,10 +978,10 @@ export default {
         // 全社会用电分类情况
         this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuiyongdianfenleiqingkuangbiao&tableId=50`).then(res => {
           const { comment, data } = res
-          const item = data[4]
+          const item = data[3]
           echarts.init(document.querySelector(`#chart7`)).setOption({
             title: [{
-              text: '全社会用电分类情况',
+              text: `2021年全社会用电分类情况`,
               top: '11%',
               left: 'center',
               textStyle: {
@@ -1008,7 +1011,7 @@ export default {
               type: 'pie',
               center: ['50%', '55%'],
               radius: ['40%', '60%'],
-              color: ['#06dcab', '#065aab', '#06f0ab'],
+              color: ['rgba(123, 54, 98, .8)', 'rgba(171, 21, 241, .8)', 'rgba(12, 164, 167, .8)'],
               label: {
                 show: false
               },
@@ -1035,10 +1038,10 @@ export default {
         // 全社会客货运输量
         this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuikehuoyunshuliang&tableId=51`).then(res => {
           const { comment, data } = res
-          const item = data[4]
+          if (!data.length) return false
           echarts.init(document.querySelector(`#chart8`)).setOption({
             title: [{
-              text: '全社会客货运输量',
+              text: `${data[0].operation_time.substr(0, 4)}年全社会客货运输量`,
               top: '11%',
               left: 'center',
               textStyle: {

src/plugins/requests/index.js

@@ -91,10 +91,7 @@ service.interceptors.response.use(
                     util.errorMsg('登录过期，请重新登录')
                     setTimeout(() => {
                         router.replace({
-                            path: '/login',
-                            // query: {
-                            //     redirect: router.currentRoute.fullPath
-                            // }
+                            path: '/login'
                         })
                     }, 1000)
                     break

src/router/permission.js

@@ -2,14 +2,15 @@ import router from './index'
 import Setting from '@/setting'
 import util from '@/libs/util'
 import store from '@/store'
-const managerPath = ['/stat/list', '/screen', '/user/list', '/role/list'] // 管理员才能访问的页面路径
+const managerPath = ['/stat/list', '/user/list', '/role/list'] // 管理员才能访问的页面路径
+const whiteList = ['/login', '/index/list', '/screen'] // 白名单
 
 router.beforeEach((to, from, next) => {
     document.title = Setting.titleSuffix
     const user = store.state.user
     JSON.stringify(user) == '{}' && util.local.clear()
     const role = util.local.get(Setting.tokenKey)
-    if (!role && to.path !== '/login' && to.path !== '/index/list') {
+    if (!role && !whiteList.includes(to.path)) {
         next('/index/list')
     } else if(role && to.path == '/login') {
         next('/index')

src/setting.js

@@ -73,7 +73,7 @@ const Setting = {
     // 相同路由，不同参数间进行切换，是否强力更新
     sameRouteForceUpdate: false,
     // 是否使用动态路由
-    dynamicRoute: false,
+    dynamicRoute: true,
     // 文件上传
     upload: {
         apiURL: 'http://8.134.8.197:8001',

src/styles/page/screen.scss

@@ -1,5 +1,5 @@
 ::-webkit-scrollbar-thumb {
-  background: #7d65f9;
+  background: rgba(77, 97, 207, .45);
 }
 .wrap {
   width: 100%;