可视化完善

dev_2022-04-07
yujialong 3 years ago
parent 8ac6e25092
commit d3dd4726d7
  1. 38
      src/layouts/navbar/index.vue
  2. 25
      src/pages/screen/list/index.vue
  3. 5
      src/plugins/requests/index.js
  4. 5
      src/router/permission.js
  5. 2
      src/setting.js
  6. 2
      src/styles/page/screen.scss

@ -17,23 +17,23 @@ export default {
managerStr: this.$route.query.mg, // urlmgmgtrue managerStr: this.$route.query.mg, // urlmgmgtrue
isManager: false, isManager: false,
active: this.$route.path, active: this.$route.path,
defaultMenus: [], defaultMenus: [{
//
dataMenu: [{
index: '/index/list', index: '/index/list',
title: '首页' title: '首页'
}, { }, {
index: '/screen',
title: '数据看板'
}],
//
dataMenu: {
index: '/data/list', index: '/data/list',
title: '数据' title: '数据'
}], },
// //
managerMenus: [ managerMenus: [
{ {
index: '/stat/list', index: '/stat/list',
title: '数据统计' title: '数据统计'
}, {
index: '/screen',
title: '大屏展示'
}, { }, {
index: '/user/list', index: '/user/list',
title: '用户管理' title: '用户管理'
@ -80,29 +80,23 @@ export default {
'setManager' 'setManager'
]), ]),
initMenu() { initMenu() {
if (this.isManager) {// trueurlmg // trueurlmg
this.defaultMenus = this.managerMenus if (this.isManager) {
const managerMenus = this.managerMenus
if (Setting.dynamicRoute) { if (Setting.dynamicRoute) {
let routes = this.routes const routes = this.routes
let menus = [] const menus = []
this.defaultMenus.map(e => { managerMenus.map(e => {
routes.find(n => n.name == e.index) && menus.push(e) routes.find(n => n.name == e.index) && menus.push(e)
}) })
this.menus = menus this.menus = menus
} else { } else {
this.menus = this.defaultMenus this.menus = managerMenus
} }
} else { } else {
if (Setting.dynamicRoute) { this.menus = this.defaultMenus
// , // ,
if (this.routes.find(e => e.name === '/data/list')) { if (!Setting.dynamicRoute || this.routes.find(e => e.name === '/data/list')) this.menus.splice(1, 0, this.dataMenu)
this.menus = this.dataMenu
} else {
this.menus = this.dataMenu[0]
}
} else {
this.menus = this.dataMenu
}
} }
}, },
jump(item) { jump(item) {

@ -5,7 +5,7 @@
<!--header--> <!--header-->
<div class="header"> <div class="header">
<div class="bg_header"> <div class="bg_header">
<div class="header_nav fl t_title">数据前瞻大屏展示</div> <div class="header_nav fl t_title">Dataforward 数据看板</div>
</div> </div>
</div> </div>
@ -225,14 +225,14 @@
</div> </div>
<div class="main_title"> <div class="main_title">
<img src="@/assets/img/screen/t_7.png" alt=""> <img src="@/assets/img/screen/t_7.png" alt="">
商品零售价格指数 {{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}商品零售价格指数
</div> </div>
<div class="main_table t_btn8" style="height: 260px;overflow: auto"> <div class="main_table t_btn8" style="height: 260px;overflow: auto">
<table> <table>
<thead> <thead>
<tr> <tr>
<th>概况名称</th> <th>概况名称</th>
<th>详情</th> <th>指数</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -522,7 +522,8 @@ export default {
// //
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_guojilvyouwaihuishourugoucheng&tableId=52`).then(res => { this.$get(`${this.api.previewData}?tableName=hg_zg_jr_guojilvyouwaihuishourugoucheng&tableId=52`).then(res => {
const { comment, data } = 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 = [] const series = []
data.map((e, i) => { data.map((e, i) => {
series.push({ series.push({
@ -538,7 +539,7 @@ export default {
echarts.init(document.querySelector(`#chart2`)).setOption({ echarts.init(document.querySelector(`#chart2`)).setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: "{a} <br/>{b} : {c}亿" formatter: `${data[0].statistical_annual}年{a} <br/>{b} : {c}亿`
}, },
legend: { legend: {
x: 'center', x: 'center',
@ -565,10 +566,11 @@ export default {
// roseType: 'radius', // roseType: 'radius',
// false // false
// avoidLabelOverlap: false, // avoidLabelOverlap: false,
color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
label: { label: {
normal: { normal: {
show: true, show: true,
formatter: '{b}{c}万件' formatter: '{b}{c}亿美元'
}, },
emphasis: { emphasis: {
show: true show: true
@ -740,6 +742,7 @@ export default {
const goodsSell = [] const goodsSell = []
data.map(e => { data.map(e => {
goodsSell.push({ goodsSell.push({
operation_time: e.operation_time,
hct: e.hct, hct: e.hct,
rcpi: e.rcpi rcpi: e.rcpi
}) })
@ -975,10 +978,10 @@ export default {
// //
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuiyongdianfenleiqingkuangbiao&tableId=50`).then(res => { this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuiyongdianfenleiqingkuangbiao&tableId=50`).then(res => {
const { comment, data } = res const { comment, data } = res
const item = data[4] const item = data[3]
echarts.init(document.querySelector(`#chart7`)).setOption({ echarts.init(document.querySelector(`#chart7`)).setOption({
title: [{ title: [{
text: '全社会用电分类情况', text: `2021年全社会用电分类情况`,
top: '11%', top: '11%',
left: 'center', left: 'center',
textStyle: { textStyle: {
@ -1008,7 +1011,7 @@ export default {
type: 'pie', type: 'pie',
center: ['50%', '55%'], center: ['50%', '55%'],
radius: ['40%', '60%'], radius: ['40%', '60%'],
color: ['#06dcab', '#065aab', '#06f0ab'], color: ['rgba(123, 54, 98, .8)', 'rgba(171, 21, 241, .8)', 'rgba(12, 164, 167, .8)'],
label: { label: {
show: false show: false
}, },
@ -1035,10 +1038,10 @@ export default {
// //
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuikehuoyunshuliang&tableId=51`).then(res => { this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuikehuoyunshuliang&tableId=51`).then(res => {
const { comment, data } = res const { comment, data } = res
const item = data[4] if (!data.length) return false
echarts.init(document.querySelector(`#chart8`)).setOption({ echarts.init(document.querySelector(`#chart8`)).setOption({
title: [{ title: [{
text: '全社会客货运输量', text: `${data[0].operation_time.substr(0, 4)}年全社会客货运输量`,
top: '11%', top: '11%',
left: 'center', left: 'center',
textStyle: { textStyle: {

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

@ -2,14 +2,15 @@ import router from './index'
import Setting from '@/setting' import Setting from '@/setting'
import util from '@/libs/util' import util from '@/libs/util'
import store from '@/store' 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) => { router.beforeEach((to, from, next) => {
document.title = Setting.titleSuffix document.title = Setting.titleSuffix
const user = store.state.user const user = store.state.user
JSON.stringify(user) == '{}' && util.local.clear() JSON.stringify(user) == '{}' && util.local.clear()
const role = util.local.get(Setting.tokenKey) 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') next('/index/list')
} else if(role && to.path == '/login') { } else if(role && to.path == '/login') {
next('/index') next('/index')

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

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

Loading…
Cancel
Save