提交数据
This commit is contained in:
zouzhibin
parent
e0352e4333
commit
48979c5b31
Binary file not shown.
|
After Width: | Height: | Size: 978 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 895 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -10,6 +10,7 @@ interface extendRoute {
|
|||
//
|
||||
import permissionRouter from './modules/permission'
|
||||
import tableRouter from './modules/table'
|
||||
import dataScreenRouter from './modules/dataScreen'
|
||||
import errorRouter from './modules/error'
|
||||
import excelRouter from './modules/excel'
|
||||
import nestedRouter from './modules/nested'
|
||||
|
|
@ -104,6 +105,7 @@ const zipRoutes = {
|
|||
|
||||
// // 异步组件
|
||||
export const asyncRoutes = [
|
||||
dataScreenRouter,
|
||||
chartsRouter,
|
||||
tableRouter,
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
const dataScreenRouter= {
|
||||
path: "/dataScreen",
|
||||
name: "dataScreen",
|
||||
meta: {
|
||||
title: "可视化大屏",
|
||||
icon:'Histogram'
|
||||
},
|
||||
component: () => import("@/views/dataScreen/index.vue")
|
||||
}
|
||||
;
|
||||
|
||||
export default dataScreenRouter;
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
// console.log('val==========',val)
|
||||
},
|
||||
},
|
||||
backgroundColor: '#001540',
|
||||
// backgroundColor: '#001540',// 设置背景色
|
||||
geo: {
|
||||
show: true,
|
||||
map: 'china',
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: #001540;
|
||||
height: calc(100vh - 93px);
|
||||
position: relative;
|
||||
.info {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div class="m-full-screen-container" >
|
||||
<div ref="domRef" class="inner">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {onBeforeUnmount, onMounted, ref} from "vue";
|
||||
const mounted = ref<boolean>(true)
|
||||
const domRef = ref<HTMLElement>()
|
||||
const autoResizeScreen = ()=>{
|
||||
// const { width, height } = window.screen
|
||||
const { clientWidth, clientHeight } = document.body
|
||||
var width = 1920,
|
||||
height = 1080;
|
||||
let left; let top; let scale;
|
||||
// 获取比例 可视化区域的宽高比与 屏幕的宽高比 来进行对应屏幕的缩放
|
||||
if (clientWidth / clientHeight > width / height) {
|
||||
scale = clientHeight / height;
|
||||
top = 0;
|
||||
left = (clientWidth - width * scale) / 2;
|
||||
} else {
|
||||
scale = clientWidth / width;
|
||||
left = 0;
|
||||
top = (clientHeight - height * scale) / 2;
|
||||
}
|
||||
// 防止组件销毁后还执行设置状态s
|
||||
if(mounted.value){
|
||||
Object.assign(domRef.value.style, {
|
||||
transform: `scale(${scale})`,
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
})
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
mounted.value=true
|
||||
autoResizeScreen()
|
||||
window.addEventListener('resize',autoResizeScreen )
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
mounted.value=false
|
||||
window.removeEventListener('resize', autoResizeScreen)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.m-full-screen-container{
|
||||
background-color: #030409;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
.inner{
|
||||
overflow: hidden;
|
||||
transform-origin: left top;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<template>
|
||||
<full-screen-container>
|
||||
<div class="m-data-screen">
|
||||
<div class="header">
|
||||
<div class="header-bg-title">访问量大数据展示平台</div>
|
||||
<div class="date">{{timeDate}} {{ hourTime }} </div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="item" v-for="item in 5">
|
||||
<div class="item-icon item-icon1">
|
||||
<img src="@/assets/image/circle-bg.png" class="circle-bg" />
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<div class="item-right-inner">
|
||||
<div class="text-title">用户访问量</div>
|
||||
<div class="text-number"
|
||||
><count-to :startVal="0" :endVal="6285" :duration="4000" separator=""></count-to
|
||||
></div>
|
||||
<div class="text-der text-decenter-wrapr">
|
||||
<span class="left">同比昨天</span>
|
||||
<img src="@/assets/image/allow.png" />
|
||||
<span class="right">+78%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<div class="item-complex" style="margin-bottom: 20px">
|
||||
<line-charts width="100%" height="100%" />
|
||||
</div>
|
||||
<div class="item-complex">
|
||||
<bar-charts width="100%" height="100%" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="migration">
|
||||
<migration-charts height="100%" width="100%" id="migration" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item-complex" style="margin-bottom: 20px">
|
||||
<line-charts width="100%" height="100%" />
|
||||
</div>
|
||||
<div class="item-complex">
|
||||
<bar-charts width="100%" height="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</full-screen-container>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {onBeforeUnmount, onMounted, ref} from 'vue'
|
||||
import FullScreenContainer from './components/full-screen-container.vue'
|
||||
import CountTo from '@/components/u-count-to/vue-countTo.vue'
|
||||
import LineCharts from '@/views/charts/components/complex/line/index.vue'
|
||||
import BarCharts from '@/views/charts/components/complex/bar/index.vue'
|
||||
import MigrationCharts from '@/views/charts/components/migration/index.vue'
|
||||
|
||||
const timeDate = ref()
|
||||
const hourTime = ref()
|
||||
const time1 = ref()
|
||||
const getHour = ()=>{
|
||||
let date = new Date()
|
||||
let hour = date.getHours().toString().padStart(2,'00')
|
||||
let minute = date.getMinutes().toString().padStart(2,'00')
|
||||
let second = date.getSeconds().toString().padStart(2,'00')
|
||||
hourTime.value = `${hour}:${minute}:${second}`
|
||||
time1.value = setTimeout(()=>{
|
||||
time1.value&&clearTimeout(time1.value)
|
||||
getHour()
|
||||
},1000)
|
||||
}
|
||||
|
||||
const getNowTime = ()=>{
|
||||
let date = new Date()
|
||||
let year = date.getFullYear()
|
||||
let month = date.getMonth()+1
|
||||
let day = date.getDate()
|
||||
timeDate.value = `${year}年${month}月${day}日`
|
||||
getHour()
|
||||
|
||||
}
|
||||
onMounted(()=>{
|
||||
getNowTime()
|
||||
})
|
||||
|
||||
onBeforeUnmount(()=>{
|
||||
time1.value = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.m-data-screen{
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
box-sizing: border-box;
|
||||
overflow:hidden;
|
||||
background: url("/static/screen/bg.png") no-repeat center center;
|
||||
.header{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 91px;
|
||||
background: url("/static/screen/header-bg.png");
|
||||
background-size:contain ;
|
||||
background-repeat:no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.header-bg-title{
|
||||
font-size: 42px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.date{
|
||||
top: 25px;
|
||||
line-height: 68px;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
letter-spacing: 0px;
|
||||
color: #87caff;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
//.header{
|
||||
// width: 100%;
|
||||
// .header-bg-title{
|
||||
// width: 100%;
|
||||
// }
|
||||
//
|
||||
//}
|
||||
.circle-bg{
|
||||
animation:rotate 5s infinite linear;
|
||||
}
|
||||
@keyframes rotate{
|
||||
0%{transform:rotate(0deg);}
|
||||
100%{transform:rotate(360deg);}
|
||||
}
|
||||
.center{
|
||||
padding-left: 40px;
|
||||
padding-right: 50px;
|
||||
padding-bottom: 40px;
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.circle-bg {
|
||||
animation: rotate 5s infinite linear;
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
/*align-items: center;*/
|
||||
.item-icon {
|
||||
width: 117px;
|
||||
height: 109px;
|
||||
}
|
||||
.item-icon1 {
|
||||
background: url('@/assets/image/center-inner1.png') no-repeat center 43%;
|
||||
}
|
||||
.item-right {
|
||||
margin-left: 20px;
|
||||
.item-right-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.text-title {
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
color: #ffffff;
|
||||
/*margin-bottom: 6px;*/
|
||||
/*height: 20px;*/
|
||||
}
|
||||
.text-number {
|
||||
font-size: 44px;
|
||||
letter-spacing: 2px;
|
||||
color: #00e4ff;
|
||||
}
|
||||
.text-der {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1px;
|
||||
.left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
img {
|
||||
margin-right: 4px;
|
||||
margin-top: 4px;
|
||||
width: 11px;
|
||||
height: 15px;
|
||||
}
|
||||
.right {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
position: relative;
|
||||
padding: 0 30px 0 24px;
|
||||
display: flex;
|
||||
|
||||
.left{
|
||||
box-sizing: border-box;
|
||||
padding: 32px 0;
|
||||
width: 568px;
|
||||
//height: 701px;
|
||||
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.middle{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.migration{
|
||||
left: -18%;
|
||||
top:-15%;
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 568px;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding: 32px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-size:contain ;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
.item-complex {
|
||||
width: 558px;
|
||||
height: 362px;
|
||||
background-image: url('@/assets/image/charts/1-1-bg.png');
|
||||
background-color: #042750;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue