parent
21ec322f7c
commit
af7f97ecf3
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<dv-border-box-12>
|
||||
<div class="border-info-style" style="pointer-events: auto">
|
||||
<div class="teacher-info-title-style">{{title}}</div>
|
||||
<div class="data-info-style">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box-12>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
props:['title'],
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.dv-border-box-12 {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
.border-info-style {
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
.teacher-info-title-style {
|
||||
width: 50px;
|
||||
height: 90%;
|
||||
line-height: 25px;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-right: 1px solid #7ce7fd;
|
||||
}
|
||||
.data-info-style {
|
||||
width: 350px;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,20 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
动态模式
|
||||
<div id="dynamicMode" class="dynamic-mode-style">
|
||||
<div v-if="!loading" class="content-left-style">
|
||||
<div class="content-title-style">
|
||||
校园简报
|
||||
</div>
|
||||
<BorderBox12 title="教师情况">
|
||||
<TeacherStudentInfo :dataInfo="teacherInfo"/>
|
||||
</BorderBox12>
|
||||
<BorderBox12 title="学生情况">
|
||||
<TeacherStudentInfo :dataInfo="studentInfo"/>
|
||||
</BorderBox12>
|
||||
<BorderBox12 class="school-activity-box-style" title="校园活动">
|
||||
<SchoolActivity/>
|
||||
</BorderBox12>
|
||||
</div>
|
||||
<div v-if="!loading" class="content-right-style">
|
||||
<div class="content-title-style school-safe-style">
|
||||
校园安防
|
||||
</div>
|
||||
<BorderBox12 title="食品安全">
|
||||
<FoodSafe :dataInfo="safeWarning"/>
|
||||
</BorderBox12>
|
||||
<BorderBox12 title="设备情况">
|
||||
<EquipmentCondition :dataInfo="equipmentCondition"/>
|
||||
</BorderBox12>
|
||||
<BorderBox12 class="energy-condition-box-style" title="能耗情况">
|
||||
<EnergyCondition :dataInfo="energyCondition"/>
|
||||
</BorderBox12>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
/*
|
||||
* 动态模式
|
||||
* */
|
||||
import BorderBox12 from '../../common/borderBox12.vue';
|
||||
import TeacherStudentInfo from '../threeDimensionalSchoolModel/teacherStudentInfo.vue';
|
||||
import SchoolActivity from '../threeDimensionalSchoolModel/schoolActivity.vue';
|
||||
import FoodSafe from './foodSafe.vue';
|
||||
import EquipmentCondition from './equipmentCondition.vue';
|
||||
import EnergyCondition from './energyCondition.vue';
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
return {
|
||||
loading:true,
|
||||
teacherInfo:{
|
||||
shouldNum:162,
|
||||
realNum:156,
|
||||
lateNum:3,
|
||||
missNum:6
|
||||
},
|
||||
studentInfo:{
|
||||
shouldNum:1053,
|
||||
realNum:1051,
|
||||
lateNum:8,
|
||||
missNum:2
|
||||
},
|
||||
safeWarning:{
|
||||
disinfectWarning:6,
|
||||
overdueWarning:1,
|
||||
stockWarning:0,
|
||||
},
|
||||
equipmentCondition:{
|
||||
totalNum: 38,
|
||||
normalNum: 36,
|
||||
faultNum: 2,
|
||||
warningNum: 0
|
||||
},
|
||||
energyCondition:{
|
||||
totalEnergy: 4856,
|
||||
airConditionerEnergy: 133,
|
||||
socketEnergy: 98,
|
||||
lightingEnergy: 58,
|
||||
otherEnergy: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.cancelLoading();
|
||||
},
|
||||
methods:{
|
||||
cancelLoading() {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
},
|
||||
},
|
||||
components:{
|
||||
BorderBox12,
|
||||
TeacherStudentInfo,
|
||||
SchoolActivity,
|
||||
FoodSafe,
|
||||
EquipmentCondition,
|
||||
EnergyCondition
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
.dynamic-mode-style{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.content-left-style{
|
||||
width: 400px;
|
||||
height: auto;
|
||||
.content-title-style{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px 16px 30px 16px;
|
||||
font-size: 20px;
|
||||
color: #31a8fa;
|
||||
border-bottom: 2px solid #e49543;
|
||||
}
|
||||
.school-activity-box-style{
|
||||
height: 200px !important;
|
||||
}
|
||||
}
|
||||
.content-right-style{
|
||||
width: 400px;
|
||||
height: auto;
|
||||
.content-title-style{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px 16px 30px 16px;
|
||||
font-size: 20px;
|
||||
color: #31a8fa;
|
||||
border-bottom: 2px solid #3eceb1;
|
||||
}
|
||||
.energy-condition-box-style{
|
||||
height: 200px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div :style="{width:pageWeight + 'px',height:pageHeight + 'px',backgroundImage:'url('+require('../assets/background-2.png')+')',backgroundSize:'100%'}" class="main-screen-style">
|
||||
<div class="title-style" :style="{color:'white',fontSize:16 * fontSize + 'px'}">电商618数据大屏</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BackImg from '../assets/background-1.png';
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
rate: "",//页面宽高比例
|
||||
fontSize:1,
|
||||
pageHeight: document.documentElement.clientHeight,//实时屏幕高度
|
||||
pageWeight: document.documentElement.clientHeight * this.rate,//实时屏幕宽度
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.rate = (document.documentElement.clientWidth/document.documentElement.clientHeight).toFixed(2);
|
||||
let deviceWidth = document.documentElement.clientWidth;
|
||||
if(deviceWidth > 640){
|
||||
deviceWidth = 640;
|
||||
}
|
||||
this.fontSize = deviceWidth / 7.5;
|
||||
|
||||
|
||||
console.log(this.rate)
|
||||
this.handle()
|
||||
},
|
||||
mounted(){
|
||||
document.body.style.backgroundImage = 'url(' +require('../assets/background-2.png')+ ')';
|
||||
document.body.style.backgroundSize = '100%';
|
||||
window.addEventListener("resize", this.screenResize(this.handle, 1000))
|
||||
},
|
||||
methods: {
|
||||
screenResize: function (fn, wait) {
|
||||
var timer = null;
|
||||
return function () {
|
||||
if (timer !== null) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(fn, wait)
|
||||
}
|
||||
},
|
||||
handle: function () {
|
||||
let windowWidth = document.documentElement.clientWidth;//实时屏幕宽度
|
||||
let windowHeight = document.body.clientHeight;//实时屏幕高度
|
||||
console.log(windowWidth,windowHeight)
|
||||
if(windowHeight * this.rate > windowWidth){
|
||||
this.pageWeight = windowWidth;
|
||||
this.pageHeight = windowWidth/this.rate;
|
||||
}else if(windowHeight * this.rate < windowWidth){
|
||||
this.pageHeight = windowHeight;
|
||||
this.pageWeight = windowHeight * this.rate;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.main-screen-style {
|
||||
border: 1px solid #31a8fa;
|
||||
margin: auto;
|
||||
.title-style{
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="menu-item-style">
|
||||
<dv-border-box-9>
|
||||
<div class="menu-icon-style">
|
||||
<my-icon :type="iconType" class="icon-style" style="font-size: 50px;"></my-icon>
|
||||
</div>
|
||||
</dv-border-box-9>
|
||||
<div class="menu-name-style">{{name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
props:["name","iconType"]
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.menu-item-style{
|
||||
width: 120px;
|
||||
height: 130px;
|
||||
margin: 50px auto 0;
|
||||
cursor: pointer;
|
||||
.dv-border-box-9{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.menu-icon-style{
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.menu-name-style{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #31a8fa;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<dv-border-box-13>
|
||||
<div class="menu-right-style" style="pointer-events: auto">
|
||||
<vue-scroll :ops="listScroll" style="height:800px">
|
||||
<menu-item v-for="item in menuAry" :key="item.id" :name="item.name" :iconType="item.iconType"/>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
* 右侧菜单导航
|
||||
* */
|
||||
import Vue from 'vue'
|
||||
import MenuConfig from '../../menuConfig';
|
||||
import MenuItem from './menuItem.vue';
|
||||
import {Icon} from 'ant-design-vue';
|
||||
import vueScroll from "vuescroll";//引入vuescroll
|
||||
import "vuescroll/dist/vuescroll.css";//引入vuescroll样式
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
listScroll:this.StaticParams.scrollOption,
|
||||
menuAry: MenuConfig,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MenuItem,
|
||||
AIcon: Icon,
|
||||
vueScroll
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.menu-right-style {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="school-activity-style">
|
||||
<div class="activity-type-style">
|
||||
<div class="data-row-style activity-title-style">学生活动</div>
|
||||
<div class="data-row-style">
|
||||
<span class="info-title-style">[小学] 社团活动</span>
|
||||
<span class="info-data-style">6</span>
|
||||
</div>
|
||||
<div class="data-row-style">
|
||||
<span class="info-title-style">[初中] 读书日</span>
|
||||
<span class="info-data-style">3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-type-style">
|
||||
<div class="data-row-style activity-title-style">教师活动</div>
|
||||
<div class="data-row-style">
|
||||
<span class="info-title-style">[小学] 教研活动</span>
|
||||
<span class="info-data-style">1</span>
|
||||
</div>
|
||||
<div class="data-row-style">
|
||||
<span class="info-title-style">[初中] 教师培训</span>
|
||||
<span class="info-data-style">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
* 校园活动
|
||||
* */
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.school-activity-style{
|
||||
width: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.activity-type-style{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 10px;
|
||||
.data-row-style{
|
||||
height:25px;
|
||||
line-height: 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.info-data-style{
|
||||
color: #7ce7fd;
|
||||
}
|
||||
}
|
||||
.activity-title-style{
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue