parent
ab2cad7a8b
commit
ec3533c146
22 changed files with 1161 additions and 58 deletions
|
After Width: | Height: | Size: 387 B |
|
After Width: | Height: | Size: 230 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 10 MiB |
|
After Width: | Height: | Size: 419 B |
|
After Width: | Height: | Size: 418 B |
|
After Width: | Height: | Size: 388 B |
|
After Width: | Height: | Size: 397 B |
|
After Width: | Height: | Size: 388 B |
|
After Width: | Height: | Size: 225 B |
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
@ -0,0 +1,723 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<!-- 全屏 --> |
||||
<img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen"> |
||||
<!--header--> |
||||
<div class="header"> |
||||
<div class="bg_header"> |
||||
<div class="header_nav fl t_title">平台大数据可视化看板</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!--main--> |
||||
<div class="content"> |
||||
<div class="left"> |
||||
<div class="item"> |
||||
<!--左上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_l_line"></i> |
||||
<i class="l_t_line"></i> |
||||
</div> |
||||
<!--右上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_r_line"></i> |
||||
<i class="r_t_line"></i> |
||||
</div> |
||||
<!--左下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="l_b_line"></i> |
||||
<i class="b_l_line"></i> |
||||
</div> |
||||
<!--右下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="r_b_line"></i> |
||||
<i class="b_r_line"></i> |
||||
</div> |
||||
<div class="main_title"> |
||||
<img src="@/assets/img/screen/t_1.png" alt=""> |
||||
平台考试数据统计 |
||||
</div> |
||||
<ul class="time-switch"> |
||||
<li v-for="(item, i) in times" :key="i" :class="{active: item.id === time}" @click="switchTime(item.id)">{{ item.name }}</li> |
||||
</ul> |
||||
<div id="chart1" class="chart" style="height: 280px;"></div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="t_line_box"> |
||||
<i class="t_l_line"></i> |
||||
<i class="l_t_line"></i> |
||||
</div> |
||||
<div class="t_line_box"> |
||||
<i class="t_r_line"></i> |
||||
<i class="r_t_line"></i> |
||||
</div> |
||||
<div class="t_line_box"> |
||||
<i class="l_b_line"></i> |
||||
<i class="b_l_line"></i> |
||||
</div> |
||||
<div class="t_line_box"> |
||||
<i class="r_b_line"></i> |
||||
<i class="b_r_line"></i> |
||||
</div> |
||||
<div class="main_title"> |
||||
<img src="@/assets/img/screen/t_2.png" alt=""> |
||||
学生成绩分布分析 |
||||
</div> |
||||
<div id="chart2" class="chart t_btn9" style="height: 280px;"></div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="t_line_box"> |
||||
<i class="t_l_line"></i> |
||||
<i class="l_t_line"></i> |
||||
</div> |
||||
<div class="t_line_box"> |
||||
<i class="t_r_line"></i> |
||||
<i class="r_t_line"></i> |
||||
</div> |
||||
<div class="t_line_box"> |
||||
<i class="l_b_line"></i> |
||||
<i class="b_l_line"></i> |
||||
</div> |
||||
<div class="t_line_box"> |
||||
<i class="r_b_line"></i> |
||||
<i class="b_r_line"></i> |
||||
</div> |
||||
<div class="main_title"> |
||||
<img src="@/assets/img/screen/t_7.png" alt=""> |
||||
平台登录人数 |
||||
</div> |
||||
<div id="chart3" class="chart t_btn9" style="height: 280px;"></div> |
||||
</div> |
||||
</div> |
||||
<div class="middle"> |
||||
<div class="item" style="height: 510px"> |
||||
<!--左上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_l_line"></i> |
||||
<i class="l_t_line"></i> |
||||
</div> |
||||
<!--右上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_r_line"></i> |
||||
<i class="r_t_line"></i> |
||||
</div> |
||||
<!--左下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="l_b_line"></i> |
||||
<i class="b_l_line"></i> |
||||
</div> |
||||
<!--右下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="r_b_line"></i> |
||||
<i class="b_r_line"></i> |
||||
</div> |
||||
<video class="video" ref="video" width="100%" height="100%" autoplay muted loop> |
||||
<source src="@/assets/videos/screen.mp4" type="video/mp4"> |
||||
您的浏览器不支持 video 标签。 |
||||
</video> |
||||
<div class="stat-mask"></div> |
||||
<div class="stat-wrap"> |
||||
|
||||
</div> |
||||
<div class="active-number"> |
||||
<p class="val">23124</p> |
||||
<p class="name">当前活跃人数</p> |
||||
</div> |
||||
</div> |
||||
<div class="item" style="height: 360px;"> |
||||
<!--左上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_l_line"></i> |
||||
<i class="l_t_line"></i> |
||||
</div> |
||||
<!--右上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_r_line"></i> |
||||
<i class="r_t_line"></i> |
||||
</div> |
||||
<!--左下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="l_b_line"></i> |
||||
<i class="b_l_line"></i> |
||||
</div> |
||||
<!--右下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="r_b_line"></i> |
||||
<i class="b_r_line"></i> |
||||
</div> |
||||
<div class="main_title"> |
||||
<img src="@/assets/img/screen/t_3.png" alt=""> |
||||
学生实验课程考核成绩趋势图 |
||||
</div> |
||||
<div class="chart" id="chart5" style="height: 350px"></div> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="item" style="height: 160px"> |
||||
<!--左上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_l_line"></i> |
||||
<i class="l_t_line"></i> |
||||
</div> |
||||
<!--右上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_r_line"></i> |
||||
<i class="r_t_line"></i> |
||||
</div> |
||||
<!--左下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="l_b_line"></i> |
||||
<i class="b_l_line"></i> |
||||
</div> |
||||
<!--右下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="r_b_line"></i> |
||||
<i class="b_r_line"></i> |
||||
</div> |
||||
<div class="main_title"> |
||||
<img src="@/assets/img/screen/t_4.png" alt=""> |
||||
本月综合学习积极性最高的实验课程 |
||||
</div> |
||||
<ul class="list"> |
||||
<li v-for="(item, i) in courses" :key="i">{{ item.curriculumName }}</li> |
||||
</ul> |
||||
</div> |
||||
<div class="item" style="height: 200px"> |
||||
<!--左上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_l_line"></i> |
||||
<i class="l_t_line"></i> |
||||
</div> |
||||
<!--右上边框--> |
||||
<div class="t_line_box"> |
||||
<i class="t_r_line"></i> |
||||
<i class="r_t_line"></i> |
||||
</div> |
||||
<!--左下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="l_b_line"></i> |
||||
<i class="b_l_line"></i> |
||||
</div> |
||||
<!--右下边框--> |
||||
<div class="t_line_box"> |
||||
<i class="r_b_line"></i> |
||||
<i class="b_r_line"></i> |
||||
</div> |
||||
<div class="main_title"> |
||||
<img src="@/assets/img/screen/t_5.png" alt=""> |
||||
热门理论课程排行榜 |
||||
</div> |
||||
<!-- <ul class="list"> |
||||
<li v-for="(item, i) in courses" :key="i">{{ item.curriculumName }}</li> |
||||
</ul> --> |
||||
</div> |
||||
<div class="item" style="height: 480px"> |
||||
<div class="t_line_box"> |
||||
<i class="t_l_line"></i> |
||||
<i class="l_t_line"></i> |
||||
</div> |
||||
<div class="t_line_box"> |
||||
<i class="t_r_line"></i> |
||||
<i class="r_t_line"></i> |
||||
</div> |
||||
<div class="t_line_box"> |
||||
<i class="l_b_line"></i> |
||||
<i class="b_l_line"></i> |
||||
</div> |
||||
<div class="t_line_box"> |
||||
<i class="r_b_line"></i> |
||||
<i class="b_r_line"></i> |
||||
</div> |
||||
<div class="main_title"> |
||||
<img src="@/assets/img/screen/t_7.png" alt=""> |
||||
学霸排行榜 |
||||
</div> |
||||
<div class="main_table"> |
||||
<table> |
||||
<thead> |
||||
<tr> |
||||
<th width="20%">名次</th> |
||||
<th width="20%">姓名</th> |
||||
<th width="20%">班级</th> |
||||
<th width="20%">练习次数</th> |
||||
<th width="20%">练习平均分</th> |
||||
</tr> |
||||
</thead> |
||||
</table> |
||||
</div> |
||||
<div class="main_table" ref="tableWrap" style="height: 196px;margin-top: 0;overflow: auto"> |
||||
<table> |
||||
<tbody> |
||||
<tr v-for="(item, i) in achs" :key="i"> |
||||
<td width="20%">{{ i + 1 }}</td> |
||||
<td width="20%">{{ item.userName }}</td> |
||||
<td width="20%">{{ item.className }}</td> |
||||
<td width="20%">{{ item.practiceNumber }}</td> |
||||
<td width="20%">{{ item.avgScore }}</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import * as echarts from 'echarts' |
||||
export default { |
||||
data() { |
||||
return { |
||||
time: 0, |
||||
times: [ |
||||
{ |
||||
id: 0, |
||||
name: '月' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '日' |
||||
} |
||||
], |
||||
stompClientMarket: null, |
||||
stompClient: null, |
||||
goodsSell: [], |
||||
cryptoList: [], |
||||
courses: [], |
||||
achs: [] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.renderExam() |
||||
this.getList() |
||||
this.renderChart() |
||||
}, |
||||
methods: { |
||||
// 全屏 |
||||
fullScreen() { |
||||
// 检测是否全屏 |
||||
if (document.fullscreenElement || |
||||
document.mozFullScreenElement || |
||||
document.msFullScreenElement || |
||||
document.webkitFullscreenElement) { |
||||
const fn = document.exitFullScreen || |
||||
document.mozCancelFullScreen || |
||||
document.webkitExitFullscreen || |
||||
document.msExitFullscreen |
||||
fn.call(document) |
||||
} else { |
||||
const el = document.body |
||||
const fn = el.requestFullscreen || |
||||
el.mozRequestFullScreen || |
||||
el.webkitRequestFullscreen || |
||||
el.msRequestFullscreen |
||||
fn.call(el) |
||||
} |
||||
}, |
||||
// 获取文本表格数据 |
||||
getList() { |
||||
// 本月综合学习积极性最高的实验课程 |
||||
this.$post(this.api.getTheMostUsedCoursesInOurSchool).then(({ data }) => { |
||||
this.courses = data |
||||
}).catch(res => {}) |
||||
|
||||
// 学霸排行榜 |
||||
this.$post(this.api.academicLeadersRanking).then(({ data }) => { |
||||
// 优先排序平均分，然后再排序练习次数 |
||||
data.sort((a, b) => { |
||||
if (a.avgScore == b.avgScore) return b.practiceNumber - a.practiceNumber |
||||
return b.avgScore - a.avgScore |
||||
}) |
||||
this.achs = data |
||||
}).catch(res => {}) |
||||
}, |
||||
// 切换时间单位 |
||||
switchTime(id) { |
||||
this.time = id |
||||
this.renderExam() |
||||
}, |
||||
// 平台考试数据考试统计 |
||||
renderExam() { |
||||
this.$post(`${this.api.examStatistics}?choose=${this.time}`).then(({ data }) => { |
||||
const option = { |
||||
title : { |
||||
text: '考试通过率', |
||||
subtext: data.examPassRate, |
||||
textStyle: { |
||||
fontSize: 16, |
||||
color: '#3adce9', |
||||
}, |
||||
subtextStyle: { |
||||
fontSize: 26, |
||||
color: '#00d5ff', |
||||
}, |
||||
x: 'center', |
||||
y: '41%', |
||||
}, |
||||
tooltip : { |
||||
trigger: 'item', |
||||
formatter: "{b} : {c} ({d}%)" |
||||
// formatter: '{total|' + 100 +'}'+ '\n\r' + '{active|共发布活动}' |
||||
}, |
||||
legend: { |
||||
show:false, |
||||
x : 'center', |
||||
y : 'bottom', |
||||
data:['参考总场次', '参考人数'] |
||||
}, |
||||
toolbox: { |
||||
}, |
||||
label:{ |
||||
normal:{ |
||||
show: true, |
||||
formatter: "{b} \n{d}%" |
||||
} |
||||
}, |
||||
calculable : true, |
||||
color:['#44cfff', '#4388ff'], |
||||
series : [ |
||||
{ |
||||
name:'', |
||||
type:'pie', |
||||
radius : [60, 80], |
||||
center : ['50%', '50%'], |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
formatter: '{b} {c}' |
||||
} |
||||
}, |
||||
data:[ |
||||
{value: data.totalNumberOfExams, name:'参考总场次'}, |
||||
{value: data.referenceNumber, name:'参考人数'}, |
||||
] |
||||
} |
||||
] |
||||
} |
||||
echarts.init(document.querySelector(`#chart1`)).setOption(option) |
||||
}).catch(res => {}) |
||||
}, |
||||
// 获取图标数据并渲染 |
||||
renderChart() { |
||||
const animateChart = (chart, option, data, num = 6) => { |
||||
// 每次向后滚动一个，最后一个从头开始。 |
||||
if (option.dataZoom[0].endValue == data.length ) { |
||||
option.dataZoom[0].endValue = num |
||||
option.dataZoom[0].startValue = 0 |
||||
} |
||||
else { |
||||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1 |
||||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1 |
||||
} |
||||
chart.setOption(option) |
||||
} |
||||
let chart = {} |
||||
|
||||
// 平台考试数据考试统计 |
||||
const year = new Date().getFullYear() |
||||
const times = [] |
||||
// 获取过去五年的上下半年日期 |
||||
for (let i = 0; i < 6; i++) { |
||||
times.push({ |
||||
startTime: (year - i) + '-02-01', |
||||
endTime: (year - i) + '-08-31' |
||||
}) |
||||
times.push({ |
||||
startTime: (year - i) + '-09-01', |
||||
endTime: (year - i + 1) + '-01-31' |
||||
}) |
||||
} |
||||
this.$post(this.api.studentGradeDistribution, times).then(({ data }) => { |
||||
const times = [] |
||||
const data1 = [] |
||||
const data2 = [] |
||||
const data3 = [] |
||||
const data4 = [] |
||||
data.map(e => { |
||||
times.push(e.time) |
||||
data1.push(e.yellow.replace('%', '')) |
||||
data2.push(e.green.replace('%', '')) |
||||
data3.push(e.blue.replace('%', '')) |
||||
data4.push(e.pink.replace('%', '')) |
||||
}) |
||||
const option = { |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'shadow' |
||||
} |
||||
}, |
||||
legend: { |
||||
top: '10%', |
||||
textStyle:{ |
||||
color: '#fff' |
||||
}, |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
color:['#f7ee46', '#56bb29', '#5492ff', '#e51579'], |
||||
xAxis: [ |
||||
{ |
||||
type: 'category', |
||||
data: times, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
} |
||||
} |
||||
], |
||||
yAxis: [ |
||||
{ |
||||
type: 'value', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
margin: 10, |
||||
textStyle: { |
||||
fontSize: 12, |
||||
color: '#fff' |
||||
}, |
||||
formatter: '{value}%' |
||||
}, |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
name: '不及格', |
||||
type: 'bar', |
||||
stack: 'Ad', |
||||
emphasis: { |
||||
focus: 'series' |
||||
}, |
||||
data: data1 |
||||
}, |
||||
{ |
||||
name: '及格', |
||||
type: 'bar', |
||||
stack: 'Ad', |
||||
emphasis: { |
||||
focus: 'series' |
||||
}, |
||||
data: data2 |
||||
}, |
||||
{ |
||||
name: '良', |
||||
type: 'bar', |
||||
stack: 'Ad', |
||||
emphasis: { |
||||
focus: 'series' |
||||
}, |
||||
data: data3 |
||||
}, |
||||
{ |
||||
name: '90-100', |
||||
type: 'bar', |
||||
stack: 'Ad', |
||||
emphasis: { |
||||
focus: 'series' |
||||
}, |
||||
data: data4 |
||||
}, |
||||
] |
||||
} |
||||
chart[0] = echarts.init(document.querySelector(`#chart2`)) |
||||
chart[0].setOption(option) |
||||
|
||||
// setInterval(function () { |
||||
// animateChart(chart[0], option, series) |
||||
// }, 1500) |
||||
}).catch(res => {}) |
||||
|
||||
// 学生实验课程考核成绩趋势图 |
||||
const colors = [ |
||||
{ |
||||
color1: '#0184d5', |
||||
color2: 'rgba(1, 132, 213, 0.4)' |
||||
}, |
||||
{ |
||||
color1: '#00d887', |
||||
color2: 'rgba(0, 216, 135, 0.4)' |
||||
}, |
||||
{ |
||||
color1: '#e71872', |
||||
color2: 'rgba(243, 147, 189, 0.4)' |
||||
}, |
||||
{ |
||||
color1: '#f9d437', |
||||
color2: 'rgba(255, 234, 144, 0.4)' |
||||
} |
||||
] |
||||
this.$post(this.api.studentAssessSchievement, times).then(({ data }) => { |
||||
const times = [] |
||||
const courses = [] |
||||
const series = [] |
||||
const courseData = {} |
||||
data.map(e => { |
||||
times.push(e.time) |
||||
e.assesScoreRespList.map(n => { |
||||
const name = n.curriculumName |
||||
courses.push(n.curriculumName) |
||||
if (courseData[name]) { |
||||
courseData[name].push(+n.avgScore) |
||||
} else { |
||||
courseData[name] = [+n.avgScore] |
||||
} |
||||
}) |
||||
}) |
||||
let index = 0 |
||||
// 生成series |
||||
for (const i in courseData) { |
||||
series.push({ |
||||
name: i, |
||||
type: 'line', |
||||
smooth: true, |
||||
symbol: 'circle', |
||||
symbolSize: 5, |
||||
showSymbol: false, |
||||
lineStyle: { |
||||
normal: { |
||||
color: colors[index].color1, |
||||
width: 2 |
||||
} |
||||
}, |
||||
areaStyle: { |
||||
normal: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||
offset: 0, |
||||
color: colors[index].color2 |
||||
}, { |
||||
offset: 0.8, |
||||
color: colors[index].color2 |
||||
}], false), |
||||
shadowColor: 'rgba(0, 0, 0, 0.1)', |
||||
} |
||||
}, |
||||
itemStyle: { |
||||
normal: { |
||||
color: colors[index].color1, |
||||
borderColor: 'rgba(221, 220, 107, .1)', |
||||
borderWidth: 12 |
||||
} |
||||
}, |
||||
data: courseData[i] |
||||
}) |
||||
++index |
||||
} |
||||
console.log(33, courseData) |
||||
const option = { |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
lineStyle: { |
||||
color: '#dddc6b' |
||||
} |
||||
} |
||||
}, |
||||
legend: { |
||||
top:'8%', |
||||
data: courses, |
||||
textStyle: { |
||||
color: 'rgba(255,255,255,.5)', |
||||
fontSize:'12', |
||||
} |
||||
}, |
||||
grid: { |
||||
left: '30', |
||||
top: '25%', |
||||
right: '10', |
||||
bottom: '5%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: [{ |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
axisLabel: { |
||||
textStyle: { |
||||
color: "rgba(255,255,255,.9)", |
||||
fontSize:12, |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,.2)' |
||||
} |
||||
}, |
||||
data: times |
||||
}, { |
||||
axisPointer: {show: false}, |
||||
axisLine: {show: false}, |
||||
position: 'bottom', |
||||
offset: 20, |
||||
}], |
||||
yAxis: [{ |
||||
type: 'value', |
||||
name: '平均分', |
||||
nameTextStyle: { |
||||
color: '#fff' |
||||
}, |
||||
axisTick: {show: false}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,.1)' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
textStyle: { |
||||
color: "rgba(255,255,255,.9)", |
||||
fontSize:12, |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,.1)' |
||||
} |
||||
} |
||||
}], |
||||
series |
||||
} |
||||
chart[1] = echarts.init(document.querySelector(`#chart5`)) |
||||
chart[1].setOption(option) |
||||
|
||||
// setInterval(function () { |
||||
// animateChart(chart[0], option, series) |
||||
// }, 1500) |
||||
}).catch(res => {}) |
||||
|
||||
// this.scrollTable() |
||||
|
||||
// 监听resize事件，动态改变chart大小 |
||||
// window.addEventListener('resize', () => { |
||||
// for (let i = 0; i < 7; i++) { |
||||
// chart[i] && chart[i].resize() |
||||
// } |
||||
// }) |
||||
}, |
||||
// 表格滚动效果 |
||||
// scrollTable() { |
||||
// const dom = this.$refs.tableWrap |
||||
// const dom1 = this.$refs.gdpList |
||||
// setInterval(() => { |
||||
// dom.scrollTop += 1 |
||||
// if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0 |
||||
|
||||
// dom1.scrollTop += 1 |
||||
// if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0 |
||||
// }, 30) |
||||
// } |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../styles/page/screen.scss"; |
||||
</style> |
||||
@ -0,0 +1,6 @@ |
||||
export default { |
||||
path: `/screen`, |
||||
name: 'screen', |
||||
component: () => import('@/pages/screen'), |
||||
meta: { title: '数据看板' } |
||||
} |
||||
Binary file not shown.
@ -0,0 +1,307 @@ |
||||
@import "../var.scss"; |
||||
::-webkit-scrollbar-thumb { |
||||
display: none; |
||||
} |
||||
.video { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.wrap { |
||||
width: 100%; |
||||
height: 100vh; |
||||
color:#333; |
||||
background: url('../../assets/img/screen/screen1.jpg') no-repeat; |
||||
background-size: 100% 100%; |
||||
overflow: auto; |
||||
.full { |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 20px; |
||||
right: 30px; |
||||
cursor: pointer; |
||||
transition: .5s; |
||||
&:hover { |
||||
transform: scale(1.2); |
||||
} |
||||
} |
||||
.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; |
||||
} |
||||
.earth { |
||||
z-index: 0; |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
img { |
||||
position: absolute; |
||||
top: 52%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
opacity: .4; |
||||
} |
||||
.lbx { |
||||
z-index: 2; |
||||
max-width: 95%; |
||||
max-height: 95%; |
||||
animation: rotate 15s linear infinite; |
||||
} |
||||
.jt { |
||||
z-index: 3; |
||||
max-width: 90%; |
||||
max-height: 90%; |
||||
opacity: .3; |
||||
animation: rotate-reverse 15s linear infinite; |
||||
} |
||||
.map { |
||||
z-index: 1; |
||||
max-width: 85%; |
||||
max-height: 85%; |
||||
} |
||||
} |
||||
@keyframes rotate { |
||||
0% { |
||||
transform: translate(-50%, -50%) rotate(0); |
||||
} |
||||
50% { |
||||
transform: translate(-50%, -50%) rotate(180deg); |
||||
} |
||||
100% { |
||||
transform: translate(-50%, -50%) rotate(360deg); |
||||
} |
||||
} |
||||
@keyframes rotate-reverse { |
||||
0% { |
||||
transform: translate(-50%, -50%) rotate(0360deg); |
||||
} |
||||
50% { |
||||
transform: translate(-50%, -50%) rotate(180deg); |
||||
} |
||||
100% { |
||||
transform: translate(-50%, -50%) rotate(0); |
||||
} |
||||
} |
||||
} |
||||
.time-switch { |
||||
z-index: 2; |
||||
position: absolute; |
||||
display: flex; |
||||
top: 10px; |
||||
right: 10px; |
||||
li { |
||||
padding: 0 14px; |
||||
line-height: 24px; |
||||
color: #fff; |
||||
background-color: #0a111c; |
||||
border-radius: 8px; |
||||
cursor: pointer; |
||||
&.active { |
||||
background-color: #00d8ff; |
||||
} |
||||
} |
||||
} |
||||
.active-number { |
||||
position: absolute; |
||||
top: 10px; |
||||
left: 10px; |
||||
padding: 10px 40px; |
||||
background: url(../../assets/img/screen/title-bg.png) 0 0/cover no-repeat; |
||||
.val { |
||||
font-size: 50px; |
||||
font-family: 'yjsz'; |
||||
color: #00f3ff; |
||||
text-shadow: 0 0 25px #00d8ff; |
||||
} |
||||
.name { |
||||
font-size: 16px; |
||||
color: #fff; |
||||
text-shadow: 0 0 25px #00d8ff; |
||||
} |
||||
} |
||||
.stat-mask { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: rgba(0, 0, 0, .65); |
||||
} |
||||
.stat-wrap { |
||||
position: relative; |
||||
height: 100%; |
||||
background: url(../../assets/img/screen/stat.png) 0 -10px/100% auto no-repeat; |
||||
} |
||||
.main_table { |
||||
width: 100%; |
||||
margin-top: 25px; |
||||
table { |
||||
width: 100%; |
||||
} |
||||
tr{ |
||||
height: 42px; |
||||
} |
||||
th{ |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
color:#61d2f7; |
||||
text-align: center; |
||||
} |
||||
td{ |
||||
color:#fff; |
||||
font-size: 10px; |
||||
text-align: center; |
||||
} |
||||
tbody tr:nth-child(odd) { |
||||
background-color: #072951; |
||||
box-shadow:-10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset; |
||||
} |
||||
.percent { |
||||
width: 64px; |
||||
margin: 0 auto; |
||||
line-height: 24px; |
||||
color: #fff; |
||||
text-align: center; |
||||
background-color: #0faf7d; |
||||
border-radius: 2px; |
||||
&.fall { |
||||
background-color: #db4154; |
||||
} |
||||
} |
||||
} |
||||
.charts { |
||||
display: flex; |
||||
.chart { |
||||
width: 50%; |
||||
height: 220px; |
||||
} |
||||
} |
||||
.header{ |
||||
z-index: 2; |
||||
position: relative; |
||||
width: 100%; |
||||
height: 80px; |
||||
padding:0 20px; |
||||
} |
||||
.bg_header{ |
||||
width: 100%; |
||||
height: 80px; |
||||
background: url(../../assets/img/screen/screen2.png) no-repeat; |
||||
background-size: 100% 100%; |
||||
} |
||||
.t_title{ |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
font-size: 2.5em; |
||||
line-height: 80px; |
||||
color: #fff; |
||||
} |
||||
.content{ |
||||
display: flex; |
||||
padding: 20px; |
||||
.left, .right { |
||||
width: 24%; |
||||
} |
||||
.middle { |
||||
flex: 1; |
||||
margin: 0 30px; |
||||
} |
||||
.item { |
||||
position: relative; |
||||
height: 280px; |
||||
margin-bottom: 30px; |
||||
border: 1px solid #2C58A6; |
||||
box-shadow: 0 0 10px #2C58A6; |
||||
// background-color: #073a7d; |
||||
} |
||||
} |
||||
.list { |
||||
padding: 0 15px; |
||||
margin-top: 25px; |
||||
text-align: center; |
||||
li { |
||||
line-height: 40px; |
||||
color: #61d2f7; |
||||
@include ellipsis; |
||||
} |
||||
} |
||||
.main_title{ |
||||
display: flex; |
||||
align-items: center; |
||||
height: 35px; |
||||
line-height: 33px; |
||||
background-color: #2C58A6; |
||||
border-radius: 18px; |
||||
position: absolute; |
||||
top: -17px; |
||||
left: 50%; |
||||
color:#fff; |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
white-space: nowrap; |
||||
padding: 0 20px; |
||||
z-index: 1000; |
||||
text-align: center; |
||||
transform: translateX(-50%); |
||||
img { |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue