diff --git a/src/assets/img/screen/screen1.jpg b/src/assets/img/screen/screen1.jpg new file mode 100644 index 0000000..3262637 Binary files /dev/null and b/src/assets/img/screen/screen1.jpg differ diff --git a/src/assets/img/screen/screen2.png b/src/assets/img/screen/screen2.png new file mode 100644 index 0000000..6ef5276 Binary files /dev/null and b/src/assets/img/screen/screen2.png differ diff --git a/src/assets/img/screen/t_1.png b/src/assets/img/screen/t_1.png new file mode 100644 index 0000000..5991231 Binary files /dev/null and b/src/assets/img/screen/t_1.png differ diff --git a/src/assets/img/screen/t_2.png b/src/assets/img/screen/t_2.png new file mode 100644 index 0000000..a9d03b8 Binary files /dev/null and b/src/assets/img/screen/t_2.png differ diff --git a/src/assets/img/screen/t_3.png b/src/assets/img/screen/t_3.png new file mode 100644 index 0000000..036700d Binary files /dev/null and b/src/assets/img/screen/t_3.png differ diff --git a/src/assets/img/screen/t_4.png b/src/assets/img/screen/t_4.png new file mode 100644 index 0000000..8b64ad9 Binary files /dev/null and b/src/assets/img/screen/t_4.png differ diff --git a/src/assets/img/screen/t_5.png b/src/assets/img/screen/t_5.png new file mode 100644 index 0000000..53dfced Binary files /dev/null and b/src/assets/img/screen/t_5.png differ diff --git a/src/assets/img/screen/t_7.png b/src/assets/img/screen/t_7.png new file mode 100644 index 0000000..118b49d Binary files /dev/null and b/src/assets/img/screen/t_7.png differ diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue index 3836e79..47700b2 100644 --- a/src/layouts/navbar/index.vue +++ b/src/layouts/navbar/index.vue @@ -31,6 +31,9 @@ export default { { index: '/stat/list', title: '数据统计' + }, { + index: '/screen', + title: '大屏展示' }, { index: '/user/list', title: '用户管理' @@ -99,8 +102,13 @@ export default { } }, jump(item) { - this.active = item.index - this.$router.push(item.index).catch(err => { }) + const { index } = item + if (index === '/screen') { + window.open(this.$router.resolve(index).href) + } else { + this.active = item.index + this.$router.push(item.index).catch(err => {}) + } }, toIndex() { this.$router.push('/index') diff --git a/src/pages/screen/list/index.vue b/src/pages/screen/list/index.vue new file mode 100644 index 0000000..922b0fa --- /dev/null +++ b/src/pages/screen/list/index.vue @@ -0,0 +1,956 @@ + + + + + \ No newline at end of file diff --git a/src/router/modules/screen.js b/src/router/modules/screen.js new file mode 100644 index 0000000..863d72c --- /dev/null +++ b/src/router/modules/screen.js @@ -0,0 +1,6 @@ +export default { + path: '/screen', + name: 'screen', + component: () => import('@/pages/screen/list'), + meta: { title: '大屏展示' } +}; diff --git a/src/router/modules/stat.js b/src/router/modules/stat.js index 1382aac..3ed4ac7 100644 --- a/src/router/modules/stat.js +++ b/src/router/modules/stat.js @@ -18,6 +18,6 @@ export default { path: `list`, component: () => import('@/pages/stat/list'), meta: { title: '数据统计' } - }, + } ] }; diff --git a/src/router/permission.js b/src/router/permission.js index eca9919..e9e077b 100644 --- a/src/router/permission.js +++ b/src/router/permission.js @@ -2,7 +2,7 @@ import router from './index' import Setting from '@/setting' import util from '@/libs/util' import store from '@/store' -const managerPath = ['/stat/list','/user/list','/role/list'] // 管理员才能访问的页面路径 +const managerPath = ['/stat/list', '/stat/screen', '/user/list', '/role/list'] // 管理员才能访问的页面路径 router.beforeEach((to, from, next) => { document.title = Setting.titleSuffix @@ -39,7 +39,8 @@ router.beforeEach((to, from, next) => { } } }else{ - if(to.path != '/403'){ + // 如果没有权限访问，并且开启了动态路由，并且访问的页面不是403，则跳到403 + if(to.path !== '/403' && Setting.dynamicRoute){ next('/403') }else{ next() @@ -49,7 +50,7 @@ router.beforeEach((to, from, next) => { next() } }else{// 如果是普通用户，则无法访问上面定义的常量里的3个页面路径 - if(managerPath.includes(toPath)){ + if(managerPath.includes(toPath) && Setting.dynamicRoute){ next('/403') }else{ next() diff --git a/src/router/routes.js b/src/router/routes.js index 7a80835..a974aae 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -1,6 +1,7 @@ import index from './modules/index' import data from './modules/data' import stat from './modules/stat' +import screen from './modules/screen' import user from './modules/user' import role from './modules/role' import setting from './modules/setting' @@ -31,6 +32,7 @@ const frameIn = [ */ const frameOut = [ + screen, // 登录 { path: '/login', diff --git a/src/setting.js b/src/setting.js index fd69b8d..507303c 100644 --- a/src/setting.js +++ b/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://www.dataforward.cn:9000' : `${location.origin}:9000`, // 接口请求返回错误时，弹窗的持续时间，单位：秒 modalDuration: 3, // 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice @@ -71,7 +71,7 @@ const Setting = { // 相同路由，不同参数间进行切换，是否强力更新 sameRouteForceUpdate: false, // 是否使用动态路由 - dynamicRoute: true, + dynamicRoute: false, // 文件上传 upload: { apiURL: 'http://8.134.8.197:8001', diff --git a/src/styles/page/screen.scss b/src/styles/page/screen.scss new file mode 100644 index 0000000..6c115ab --- /dev/null +++ b/src/styles/page/screen.scss @@ -0,0 +1,370 @@ +.data_content{ + /*overflow-x: hidden;*/ + min-width: 1366px; + padding-top: 20px; + padding-bottom: 20px; +} +.data_content .data_time{ + width: 340px; + height: 35px; + background-color: #2C58A6; + line-height: 35px; + color: #fff; + font-size: 12.8px; + position: relative; + margin-bottom: 25px; + margin-left: 20px; + text-align: center; +} +.data_content .data_time img{ + position: absolute; + top: 8px; + left: 15px; +} +.data_content .data_info{ + width: calc(100% - 40px); + margin-bottom: 40px; + height: 110px; + margin-left: 20px; +} +.data_content .data_info .info_1{ + width: 40%; + height: 110px; +} +.data_content .data_info .info_1>.text_1{ + width: calc(100% - 25px); + background-color: #034c6a; + height: 110px; +} + +.data_content .data_info .info_2{ + width: 31%; + height: 110px; +} +.data_content .data_info .info_2>.text_2{ + width: calc(100% - 25px); + background-color: #034c6a; + height: 110px; +} + +.data_content .data_info .info_3{ + width: 29%; + height: 110px; +} +.data_content .data_info .info_3>.text_3{ + width:100%; + background-color: #034c6a; + height: 110px; + +} + +.data_content .data_info>div.info_1>.text_1>div{ + width: 33.333%; + position: relative; +} +.data_content .data_info>div.info_2>div>div, +.data_content .data_info>div.info_3>div>div{ + width: 50%; + position: relative; +} +.data_content .data_info img{ + position: absolute; + top: 35px; + left: 15px; +} +.data_content .data_info>div>div>div>div{ + margin-left:65px; + margin-top: 23px; +} +.data_content .data_info>div.info_2>div>div>div{ + margin-left: 70px; + margin-top: 23px; +} +.data_content .data_info p:nth-child(1){ + color:#fff; + font-size: 12.8px; +} +.data_content .data_info p:nth-child(2){ + font-weight: 600; + font-size: 28px; + color:#ffff43; +} +.data_content .data_info>div.info_2 p:nth-child(2){ + font-weight: 600; + font-size: 28px; + color:#25f3e6; +} +.data_content .data_info>div.info_3 p:nth-child(2){ + font-weight: 600; + font-size: 28px; + color:#ff4e4e; +} + +.data_content .data_main{ + width: calc(100% - 40px); + margin-bottom: 40px; + height: 615px; + margin-left: 20px; +} +.data_content .data_main .main_left{ + width: 24%; +} +.data_content .data_main .main_left>div{ + width: 100%; + height: 280px; + box-sizing: border-box; + border: 1px solid #2C58A6; + position: relative; + box-shadow: 0 0 10px #2C58A6; +} +.data_content .data_main .main_left div.left_1{ + /*background: url("../images/chart_1.png") no-repeat center;*/ +} + +.data_content .data_main .main_left div.left_2{ + /*background: url("../images/chart_2.png") no-repeat center;*/ +} +.data_content .data_main .main_left div:nth-child(1){ + margin-bottom: 50px; +} +.main_title{ + height: 35px; + line-height: 33px; + background-color: #2C58A6; + border-radius: 18px; + position: absolute; + top: -17px; + left: 40%; + margin-left: -90px; + color:#fff; + font-size: 18px; + font-weight: 600; + padding: 0 20px; + z-index: 1000; + text-align: center; + img{ + position: absolute; + top: 8px; + left: 20px; + } +} + +.data_content .data_main .main_center{ + width: 52%; + height: 610px; + +} +.data_content .data_main .main_center .center_text{ + width: calc(100% - 50px); + height: 610px; + margin-left: 25px; + margin-right: 25px; + box-sizing: border-box; + border: 1px solid #2C58A6; + box-shadow: 0px 0px 6px #2C58A6; + position: relative; +} +.l_t_line{ + width: 5px; + height: 24px; + left: -3px; + top: -3px; +} +.t_l_line{ + height: 5px; + width: 26px; + left: -3px; + top: -3px; +} +.t_line_box { + position: absolute; + width: 100%; + height: 100%; +} +.t_line_box i{ + background-color: #4788fb; + box-shadow: 0px 0px 10px #4788fb; + position: absolute; +} +.t_r_line{ + height: 5px; + width: 26px; + right: -3px; + top: -3px; +} +.r_t_line{ + width: 5px; + height: 24px; + right: -3px; + top: -3px; +} +.l_b_line{ + width: 5px; + height: 24px; + left: -3px; + bottom: -3px; +} +.b_l_line{ + height: 5px; + width: 26px; + left: -3px; + bottom: -3px; +} +.r_b_line{ + width: 5px; + height: 24px; + right: -3px; + bottom: -3px; +} +.b_r_line{ + height: 5px; + width: 26px; + right: -3px; + bottom: -3px; +} + +.data_content .data_main .main_right{ + width: 24%; +} +.data_content .data_main .main_right>div{ + width: 100%; + height: 280px; + box-sizing: border-box; + border: 1px solid #2C58A6; + position: relative; + box-shadow: 0 0 10px #2C58A6; +} +.data_content .data_main .main_right div.right_1 .choice{ + position: absolute; + top: 25px; + right: 30px; + z-index: 1000; +} +.data_content .data_main .main_right div.right_1 .choice label{ + color:#fff; +} + +.data_content .data_main .main_right div.right_2{ + /*background: url("../images/chart_4.png") no-repeat center;*/ +} +.data_content .data_main .main_right div.right_2 .chart_text { + width: 18%; + color:#fff; + text-align: center; + margin-top: 12px; +} +.data_content .data_main .main_right div.right_2 .chart_text p{ + margin-top: 21px; +} +.data_content .data_main .main_right div.right_2 .chart_text p img{ + margin-right: 5px; + margin-top: -4px; +} +.data_content .data_main .main_right div.right_2 .chart_text p:nth-child(1){ + font-size: 14px; + font-weight: 600; +} +.data_content .data_main .main_right div.right_2 .text_sum{ + text-align: center; + color:#ffff43; + font-weight: 600; +} +.data_content .data_main .main_right div.right_2 .text_sum div:nth-child(2){ + font-size: 18px; + font-weight: 600; +} +.data_content .data_main .main_right div:nth-child(1){ + margin-bottom: 50px; +} +.data_content .data_bottom{ + width: calc(100% - 40px); + height: 280px; + margin-left: 20px; +} +.data_content .data_bottom div{ + +} +.data_content .data_bottom .bottom_1{ + width: 24%; + height: 280px; + position: relative; + box-sizing: border-box; + border: 1px solid #2C58A6; + box-shadow: 0 0 10px #2C58A6; +} +.data_content .data_bottom .bottom_center{ + width: 52%; + height: 280px; +} +.data_content .data_bottom .bottom_2{ + width: calc(50% - 35px); + height: 280px; + position: relative; + box-sizing: border-box; + border: 1px solid #2C58A6; + margin-left: 25px; + box-shadow: 0 0 10px #2C58A6; +} +.data_content .data_bottom .bottom_3{ + width: calc(50% - 40px); + height: 280px; + position: relative; + box-sizing: border-box; + border: 1px solid #2C58A6; + margin-left:25px; + box-shadow: 0 0 10px #2C58A6; +} +.data_content .data_bottom .bottom_4{ + width: 24%; + height: 280px; + position: relative; + box-sizing: border-box; + border: 1px solid #2C58A6; + 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; + cursor: pointer; +} +.table_zdy a{ + color: #fff; +} \ No newline at end of file