1527 lines
35 KiB
Vue
1527 lines
35 KiB
Vue
<template>
|
||
<Resize>
|
||
<div style="width:100%;height:100%;">
|
||
<!-- <div class="bgPicture"> -->
|
||
|
||
<div class="mapModuleApp" style="width:100%;height:100%">
|
||
<iframe src="../static/unity/index.html" frameborder="0" style="width: 100%;height: 100%;"
|
||
scrolling="no"></iframe>
|
||
<!-- 标题 -->
|
||
<div class="header">
|
||
<div class="title"></div>
|
||
<div class="titTop">
|
||
<div class="titLeft" v-show="titLeftshow">
|
||
<span @click="goBack(1)">首页</span>
|
||
<span>/</span>
|
||
<span @click="goBack(japIndex)">{{japIndex}}</span>
|
||
</div>
|
||
<div class="titRight">
|
||
<span>{{dateNew}} {{getWeek}} {{time}}</span>
|
||
<span><img :src='weatherImg' alt="" style="width:100%;height:100%"></span>
|
||
<span> 天气 </span>
|
||
<span>{{weatherItem.weather}} {{weatherItem.temperature}}℃</span>
|
||
</div>
|
||
<div class="closeIndex" @click="closeindex">
|
||
<img src="../assets/pic/closeIndex.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- <div @click="disBox" ref="screenBox" :class="!boxNone ? 'screenBox dh1' : 'screenBox dh2'"
|
||
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` }">
|
||
</div> -->
|
||
<!-- 首页 -->
|
||
<ModelScreenComponents v-if="indexShow"/>
|
||
<!-- 人员管理 -->
|
||
<PersonnelComponents v-if="personnelShow"/>
|
||
<!-- 视频监控 -->
|
||
<VideoSurveillanceComponents v-if="videoSurveillanceShow" @transfer="getUser"/>
|
||
<!-- 视频监控子页面 -->
|
||
<VideoViewingComponents v-if="videoViewingShow" :videoName="videoName" :videoId="videoId"/>
|
||
<!-- 进度管理 -->
|
||
<ProgressComponents v-if="progressShow"/>
|
||
<!-- 安全管理 -->
|
||
<ManagementComponents v-if="managementShow"/>
|
||
<!-- 中间1 -->
|
||
|
||
<!-- 中间2 -->
|
||
|
||
<!-- 左侧模块1 -->
|
||
|
||
<!-- 左侧模块2 -->
|
||
</div>
|
||
<div class="container" :style="{ right: !type ? '-10px' : '0' }">
|
||
<div class="box" id="box" :style="{ width: !type ? '267px' : '0' }">
|
||
<div v-if="!type" :class="[menuType === 1 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(1)">
|
||
<span class="icon1"></span>
|
||
<span>人员管理</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
<div v-if="!type" :class="[menuType === 2 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(2)">
|
||
<span class="icon2"></span>
|
||
<span>视频监控</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
<div v-if="!type" :class="[menuType === 3 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(3)">
|
||
<span class="icon3"></span>
|
||
<span>进度管理</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
<div v-if="!type" :class="[menuType === 4 ? 'childBoxChoose' : 'childBox']" @click="childBoxClick(4)">
|
||
<span class="icon4"></span>
|
||
<span>安全管理</span>
|
||
<span class="picture1"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="switchBtn" ref="switchBtn" @click="switchDiv()"></div>
|
||
<div class="closeBtn" :style="{ display: type ? 'none' : 'block' }" @click="switchDiv()"></div>
|
||
</div>
|
||
</Resize>
|
||
</template>
|
||
|
||
<script>
|
||
import BarChart from "@/components/common/BarChart";
|
||
import mdScreenPie from "@/components/common/mdScreenPie";
|
||
import PersonnelComponents from "./personnelComponents";
|
||
import ModelScreenComponents from "./modelScreenComponents";
|
||
import VideoSurveillanceComponents from "./videoSurveillanceComponents";
|
||
import ProgressComponents from "./progressComponents";
|
||
import ManagementComponents from "./managementComponents";
|
||
import VideoViewingComponents from "./videoViewingComponents";
|
||
|
||
import Swiper from "@/components/common/carousel";
|
||
import Resize from '../utils/Resize.vue'
|
||
import axios from 'axios';
|
||
export default {
|
||
name: "report",
|
||
components: {
|
||
mdScreenPie,
|
||
BarChart,
|
||
PersonnelComponents,
|
||
Swiper,
|
||
ModelScreenComponents,
|
||
VideoSurveillanceComponents,
|
||
ProgressComponents,
|
||
ManagementComponents,
|
||
VideoSurveillanceComponents,
|
||
VideoViewingComponents,
|
||
Resize
|
||
},
|
||
data() {
|
||
return {
|
||
weatherImg:require("@/assets/pic/sun.png"),
|
||
videoName:'', //子传父的视频名称
|
||
videoId:'',//子传父的视频Id
|
||
//显示首页
|
||
indexShow:true,
|
||
//人员管理
|
||
personnelShow:false,
|
||
//视频监控
|
||
videoSurveillanceShow:false,
|
||
//视频监控子页面
|
||
videoViewingShow:false,
|
||
//进度管理
|
||
progressShow:false,
|
||
//安全管理
|
||
managementShow:false,
|
||
//左上角
|
||
titLeftshow:false,
|
||
japIndex:'人员管理',
|
||
getWeek:'星期四',
|
||
dateNew:'2023年2月17日',
|
||
time:'14:26',
|
||
temperature:'12',
|
||
weather:'晴',
|
||
weatherItem: {},
|
||
tienum: '',
|
||
showType: true,
|
||
boxList: [{
|
||
c1: '开工',
|
||
c2: "2023-1-4",
|
||
c3: "2023-1-4",
|
||
c4: '正常完成'
|
||
},
|
||
{
|
||
c1: '勘察现场',
|
||
c2: "2023-1-4",
|
||
c3: "2023-1-4",
|
||
c4: '逾期完成'
|
||
},
|
||
{
|
||
c1: '启动会议',
|
||
c2: "2023-1-4",
|
||
c3: "2023-1-4",
|
||
c4: '正常完成'
|
||
}, {
|
||
c1: '结构施工',
|
||
c2: "2023-1-4",
|
||
c3: "--",
|
||
c4: '逾期中'
|
||
}, {
|
||
c1: '水电安装',
|
||
c2: "2023-1-4",
|
||
c3: "--",
|
||
c4: '未开始'
|
||
}, {
|
||
c1: '完工',
|
||
c2: "2023-1-4",
|
||
c3: "--",
|
||
c4: '实施中'
|
||
},
|
||
],
|
||
dataList: [{
|
||
src: '@/assets/pic/23.png'
|
||
}], // 专题数据列表
|
||
iconPicList: [
|
||
{
|
||
icon: "wendu",
|
||
name: "温度",
|
||
val: "19.8",
|
||
tem: "℃"
|
||
},
|
||
{
|
||
icon: "shidu",
|
||
name: "湿度",
|
||
val: "19.8",
|
||
tem: "%"
|
||
},
|
||
{
|
||
icon: "yangqi",
|
||
name: "氧气值",
|
||
val: "19.8",
|
||
tem: "%VOL"
|
||
},
|
||
{
|
||
icon: "co2",
|
||
name: "二氧化碳",
|
||
val: "19.8",
|
||
tem: "%VOL"
|
||
},
|
||
{
|
||
icon: "ch4",
|
||
name: "甲烷",
|
||
val: "19.8",
|
||
tem: "ppm"
|
||
},
|
||
{
|
||
icon: "h2s",
|
||
name: "硫化氢",
|
||
val: "19.8",
|
||
tem: "ppm"
|
||
}
|
||
],
|
||
tableData: [
|
||
{
|
||
entName: "开工建设",
|
||
start: '2021-02-01',
|
||
end: '张三',
|
||
zt: '正常完成'
|
||
},
|
||
{
|
||
entName: "勘察现场",
|
||
start: '2021-02-01',
|
||
end: '张三',
|
||
zt: '未完成'
|
||
},
|
||
{
|
||
entName: "临时设施",
|
||
start: '2021-02-01',
|
||
end: '张三',
|
||
zt: '未完成'
|
||
},
|
||
{
|
||
entName: "桩基工程",
|
||
start: '2021-02-01',
|
||
end: '张三',
|
||
zt: '实施中'
|
||
},
|
||
{
|
||
entName: "水电安装",
|
||
start: '2021-02-01',
|
||
end: '张三',
|
||
zt: '未开始'
|
||
},
|
||
{
|
||
entName: "水电安装",
|
||
start: '2021-02-01',
|
||
end: '张三',
|
||
zt: '实施中'
|
||
},
|
||
{
|
||
entName: "桩基工程",
|
||
start: '2021-02-01',
|
||
end: '张三',
|
||
zt: '实施中'
|
||
},
|
||
{
|
||
entName: "水电安装",
|
||
start: '2021-02-01',
|
||
end: '张三',
|
||
zt: '未开始'
|
||
},
|
||
{
|
||
entName: "完工建设",
|
||
start: '2021-02-01',
|
||
end: '张三',
|
||
zt: '实施中'
|
||
},
|
||
],
|
||
qyList: [
|
||
{
|
||
name: "1月",
|
||
value: 12
|
||
},
|
||
{
|
||
name: "2月",
|
||
value: 21
|
||
},
|
||
{
|
||
name: "3月",
|
||
value: 22
|
||
},
|
||
{
|
||
name: "4月",
|
||
value: 12
|
||
},
|
||
{
|
||
name: "5月",
|
||
value: 10
|
||
},
|
||
{
|
||
name: "6月",
|
||
value: 3
|
||
},
|
||
{
|
||
name: "7月",
|
||
value: 4
|
||
}, {
|
||
name: "8月",
|
||
value: 76
|
||
}, {
|
||
name: "9月",
|
||
value: 22
|
||
}, {
|
||
name: "10月",
|
||
value: 1
|
||
}, {
|
||
name: "11月",
|
||
value: 32
|
||
}, {
|
||
name: "12月",
|
||
value: 12
|
||
}
|
||
],
|
||
xArry: [],
|
||
chartData: [],
|
||
peopleList: [
|
||
{
|
||
name: "姓名",
|
||
value: "：王刚"
|
||
},
|
||
{
|
||
name: "岗位",
|
||
value: "：项目经理"
|
||
},
|
||
{
|
||
name: "入岗时间",
|
||
value: "：2022-11-26 08:22:13"
|
||
}
|
||
],
|
||
vdaH: 0,
|
||
type: false,
|
||
menuType: null,
|
||
numberList: [5, 5],
|
||
boxNone: true,
|
||
topicSends:[]
|
||
};
|
||
},
|
||
created() {
|
||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
this.createMqtt()
|
||
this.getWeather()
|
||
window.setInterval(()=>{
|
||
this.getTime()
|
||
},1000)
|
||
},
|
||
methods: {
|
||
createMqtt() {
|
||
|
||
this.topicSends = ['webdata'];
|
||
console.log("this.topicSends",this.topicSends)
|
||
window.PubScribe(this.topicSends, this.realInfo);
|
||
},
|
||
/** 实时数据分类 */
|
||
realInfo(topic, message) {
|
||
// console.log("topic",topic)
|
||
switch (topic) {
|
||
// 接收托片
|
||
case "webdata":
|
||
try {
|
||
console.log("message",message)
|
||
// const utf8decoder = new TextDecoder()
|
||
// const u8arr = new Uint8Array(message)
|
||
// const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
// const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
// console.log("hert", msg) //msg为转换后的JSON数据
|
||
|
||
} catch (error) {
|
||
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
closeindex(){
|
||
// this.$router.push('/')
|
||
this.$confirm("确定退出登录？", "确认信息", {
|
||
distinguishCancelAndClose: true,
|
||
confirmButtonText: "退出",
|
||
cancelButtonText: "取消",
|
||
})
|
||
.then(() => {
|
||
this.$message({
|
||
type: "info",
|
||
message: "返回登录",
|
||
});
|
||
this.$router.push("/");
|
||
sessionStorage.clear(); //清除所有session值
|
||
})
|
||
.catch((action) => {
|
||
this.$message({
|
||
type: "info",
|
||
message: action === "cancel" ? "取消退出" : "停留在当前页面",
|
||
});
|
||
});
|
||
},
|
||
//获取当前时间
|
||
getTime(){
|
||
let myDate = new Date()
|
||
let wk = myDate.getDay()
|
||
//年
|
||
let year = new Date().getFullYear();
|
||
//月份是从0月开始获取的，所以要+1;
|
||
let month = new Date().getMonth() +1;
|
||
//日
|
||
let day = new Date().getDate();
|
||
//时
|
||
let hour = new Date().getHours();
|
||
//分
|
||
let minute = new Date().getMinutes();
|
||
//秒
|
||
// let second = new Date().getSeconds();
|
||
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
let week = weeks[wk]
|
||
this.getWeek = week;
|
||
this.dateNew = year + '年' + month + '月' + day + '日'
|
||
this.time = hour +':'+ minute
|
||
},
|
||
//获取天气数据
|
||
getWeather () {
|
||
axios({
|
||
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
|
||
methods: ''
|
||
}).then(res => {
|
||
this.weatherItem = res.data.lives[0];
|
||
this.weatherImg = changeWeatherImg(res.data.lives[0].weather)
|
||
});
|
||
},
|
||
changeWeatherImg(weather){
|
||
if(weather=='雾'){
|
||
return require("@/assets/weather/sun.png")
|
||
}
|
||
},
|
||
changeMessage(val) {
|
||
this.tienum = val
|
||
},
|
||
disBox() {
|
||
this.boxNone = !this.boxNone
|
||
this.$refs.screenBox.style.animationPlayState = 'running'
|
||
|
||
|
||
},
|
||
goBack(val) {
|
||
if (val === 1) {
|
||
this.indexShow = true
|
||
this.personnelShow = false
|
||
this.videoSurveillanceShow = false
|
||
this.videoViewingShow = false
|
||
this.managementShow= false
|
||
this.progressShow = false
|
||
this.titLeftshow = false
|
||
} else {
|
||
if(val=='视频监控'&& this.videoViewingShow==true){
|
||
this.indexShow = false
|
||
this.personnelShow = false
|
||
this.videoSurveillanceShow = true
|
||
this.videoViewingShow = false
|
||
this.managementShow= false
|
||
this.progressShow = false
|
||
this.titLeftshow = true
|
||
}
|
||
// this.$router.go(0)
|
||
}
|
||
},
|
||
//获取视频子传父数据
|
||
getUser(msg){
|
||
// this.username= msg
|
||
if(msg != null){
|
||
this.indexShow = false
|
||
this.personnelShow = false
|
||
this.videoSurveillanceShow = false
|
||
this.videoViewingShow = true
|
||
this.managementShow= false
|
||
this.progressShow = false
|
||
this.titLeftshow = true
|
||
this.videoName = msg.videoName
|
||
this.videoId = msg.videoId
|
||
}
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if (rowIndex % 2 === 0) {
|
||
return "success-row";
|
||
} else {
|
||
return "warning-row";
|
||
|
||
}
|
||
},
|
||
// 菜单点击
|
||
childBoxClick(val) {
|
||
this.menuType = val;
|
||
if (val === 3) {
|
||
this.japIndex = '进度管理'
|
||
//进度管理
|
||
this.indexShow = false
|
||
this.personnelShow = false
|
||
this.videoSurveillanceShow = false
|
||
this.videoViewingShow = false
|
||
this.managementShow= false
|
||
this.progressShow = true
|
||
this.titLeftshow = true
|
||
// this.$router.push('/progress')
|
||
} else if (val === 2) {
|
||
//视频监控
|
||
this.japIndex = '视频监控'
|
||
// this.$router.push('/videoSurveillance')
|
||
this.indexShow = false
|
||
this.personnelShow = false
|
||
this.videoSurveillanceShow = true
|
||
this.videoViewingShow = false
|
||
this.managementShow= false
|
||
this.progressShow = false
|
||
this.titLeftshow = true
|
||
} else if (val === 4) {
|
||
//安全管理
|
||
this.japIndex = '安全管理'
|
||
// this.$router.push('/management')
|
||
this.indexShow = false
|
||
this.personnelShow = false
|
||
this.videoSurveillanceShow = false
|
||
this.videoViewingShow = false
|
||
this.managementShow= true
|
||
this.progressShow = false
|
||
this.titLeftshow = true
|
||
} else if (val === 1) {
|
||
//人员管理
|
||
// this.$router.push('/personnel')
|
||
this.japIndex = '人员管理'
|
||
this.indexShow = false
|
||
this.personnelShow = true
|
||
this.videoSurveillanceShow = false
|
||
this.videoViewingShow = false
|
||
this.managementShow= false
|
||
this.progressShow = false
|
||
this.titLeftshow = true
|
||
}
|
||
},
|
||
switchDiv() {
|
||
let that = this
|
||
if (this.type) {
|
||
this.type = false;
|
||
this.$refs.switchBtn.style.display = "none";
|
||
} else {
|
||
this.type = true;
|
||
setTimeout(() => {
|
||
// 俩秒之后让模块消失
|
||
that.$refs.switchBtn.style.display = "block";
|
||
}, 800)
|
||
}
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.switchDiv(); window.onresize = () => {
|
||
return (() => {
|
||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
})()
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.dh1 {
|
||
animation: mytest 0.4s linear;
|
||
animation-fill-mode: forwards;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
animation: mce2st 0.4s linear;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
}
|
||
|
||
@keyframes mce2st {
|
||
1% {
|
||
bottom: 339px
|
||
}
|
||
|
||
100% {
|
||
bottom: 150px
|
||
}
|
||
}
|
||
|
||
@keyframes mcest {
|
||
100% {
|
||
bottom: 339px
|
||
}
|
||
|
||
1% {
|
||
bottom: 150px
|
||
}
|
||
}
|
||
|
||
@keyframes mytest {
|
||
100% {
|
||
bottom: 20px
|
||
}
|
||
|
||
90% {
|
||
bottom: 40px
|
||
}
|
||
|
||
80% {
|
||
bottom: 60px
|
||
}
|
||
|
||
70% {
|
||
bottom: 80px
|
||
}
|
||
|
||
60% {
|
||
bottom: 100px
|
||
}
|
||
|
||
50% {
|
||
bottom: 120px
|
||
}
|
||
|
||
40% {
|
||
bottom: 140px
|
||
}
|
||
|
||
30% {
|
||
bottom: 160px
|
||
}
|
||
|
||
20% {
|
||
bottom: 180px
|
||
}
|
||
|
||
10% {
|
||
bottom: 200px
|
||
}
|
||
|
||
1% {
|
||
bottom: 220px
|
||
}
|
||
}
|
||
|
||
@keyframes myt2est {
|
||
1% {
|
||
bottom: 20px
|
||
}
|
||
|
||
10% {
|
||
bottom: 40px
|
||
}
|
||
|
||
20% {
|
||
bottom: 60px
|
||
}
|
||
|
||
30% {
|
||
bottom: 80px
|
||
}
|
||
|
||
40% {
|
||
bottom: 100px
|
||
}
|
||
|
||
50% {
|
||
bottom: 120px
|
||
}
|
||
|
||
60% {
|
||
bottom: 140px
|
||
}
|
||
|
||
70% {
|
||
bottom: 160px
|
||
}
|
||
|
||
80% {
|
||
bottom: 180px
|
||
}
|
||
|
||
90% {
|
||
bottom: 200px
|
||
}
|
||
|
||
100% {
|
||
bottom: 220px
|
||
}
|
||
}
|
||
|
||
.dh2 {
|
||
animation-fill-mode: forwards;
|
||
animation: myt2est 0.4s linear;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
animation: mcest 0.4s linear;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
}
|
||
|
||
.screenBox {
|
||
width: 46px;
|
||
height: 46px;
|
||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA3RJREFUaENjZMAHGhqYfLVUIv4x/OfBq27AJP+eZcRnt++qJdXvHj0OfHv//oA5EZfFggryDELycrNwesB39ZLcD0+exJ9ZvJzhz+/fg84DynY2DMr2ttg94LtqacLn1y9yTi1cxvD7+/dB53iQg3B6wHfl4uBvHz5UnFywmPHnly+D0vE4PeC7eonbj8+fW07OX8T0/cPHQet4rB7wW7nE+sePb72nFi5l+fr69aB2PIYH/JYvNPz998/k04uXcXx89nzQOx7FA17rVqgx/Pg+69yy1TxvHz4YEo5H8YD3qsVp94+eSLu9b/+QcTyGB+4ePJx299CRUQ/QMwTg9QAoCY3GAD2DHmoXxTEQvWKxMTZ3H+jsvfn0/AWUKtyjpVFNWEWJF58/l0bEniUlHEY9AIuBt3fufX5989ZnWOjd2rPv7efnz38hh6aah5swr6goG0xMWE2ZR1RVlQ9ZzYDFwI2tO56dXbyU6Opb2tiIx7YgR5WZlZVpyHkA2fF/f//+9+7Bgy+wmBj0MYDu+MMTptyW0NLk1fD2kALFBN09IG1oAO4nf3rx8hd6mkcvTbA5/unZc1+MY6MlB8wDxBZ5uBwP0j/oPYDP8SAPgEonJRtrYRB7R039LWIDhS6NOUKOJ8Wx2NRSXJHhcwCtHU+VGAA1D0AG3Tty9O2tHbvewjxED8dTxQOwmhi5IqOX42niAXIczyspycYnIQ5uYqA3AAnlEYrzAHIMvLh2/TOseQCqYUGVFKicJ+SIAS1GYR54ffv2JyEFBR5Q24YUxw94PYDeHyDV8YPOA6CYeHvrLjzZfH79+hdy6QRyMCjNq7k4gSsuEBBVV+OFdXTo3hbC1SODOQ7UT0CvXUHtJ4fyYnVseWPUA6PjQoTKTCrLU1wPUNk9JBs36gGSg4zKGoZ0DLBx8zCYxUUzcAsL1jEOtbFRNm4uBrO4GAYuYZFpW8Nj5g0pD7BxcTGYxUcz8IiITd8cFj0XlCqHjAdAjjeNi2bgEROZsSU0dg4sSw0JD8AczysqMmtzWOws5PJg0HuAlYuTwSw2ioFXXGz25tDYmeiF2aD2ACsnJ4NpXCQDj5j43K1hsdOxlcRgD7x7+Cjt/YOHVC6pKTdOXF2dgU9SfN7m0JhpuExj9F61wJiBgRnrZAXlTqDMBCZGppebQ6M34jMFAIXEIruaoXY4AAAAAElFTkSuQmCC) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
bottom: 210px;
|
||
right: 484px;
|
||
cursor: pointer;
|
||
animation-play-state: paused;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
bottom: 339px;
|
||
animation-play-state: paused;
|
||
}
|
||
}
|
||
|
||
.smallBox {
|
||
width: 105px;
|
||
height: 28px;
|
||
background: rgba(0, 37, 35, 0.5);
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 28px;
|
||
}
|
||
|
||
.swiperBox {
|
||
width: 380px;
|
||
height: 84px;
|
||
position: absolute;
|
||
bottom: 26px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
|
||
.centerBottom2 {
|
||
width: calc(100% - 968px);
|
||
height: 166px;
|
||
position: absolute;
|
||
bottom: -205px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: url("~@/assets/pic/jdin.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
overflow-x: hidden;
|
||
transition: bottom 0.6s;
|
||
overflow-y: hidden; //重点
|
||
@media only screen and (max-height: 1000px) {
|
||
bottom: -64px;
|
||
}
|
||
}
|
||
.centerBottom {
|
||
width: calc(100% - 968px);
|
||
height: 166px;
|
||
position: absolute;
|
||
bottom: 35px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: url("~@/assets/pic/jdin.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
overflow-x: hidden;
|
||
transition: bottom 0.6s;
|
||
overflow-y: hidden; //重点
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
bottom: 164px;
|
||
}
|
||
}
|
||
|
||
.lineBox {
|
||
width: 810px;
|
||
height: 9px;
|
||
background: #ffffff;
|
||
border-radius: 5px;
|
||
opacity: 0.1;
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 80px;
|
||
}
|
||
|
||
.boxChild {
|
||
margin-left: 88px;
|
||
text-align: center;
|
||
|
||
div:nth-child(1) {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #1DFFFA;
|
||
margin-bottom: 12px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
div:nth-child(2) {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #00DAD3;
|
||
}
|
||
|
||
div:nth-child(3) {
|
||
width: 24px;
|
||
height: 24px;
|
||
// background: url("~@/assets/pic/finish.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 6px auto;
|
||
|
||
}
|
||
|
||
div:nth-child(4) {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
margin-bottom: 8px;
|
||
color: #0AFFFC;
|
||
}
|
||
|
||
div:nth-child(5) {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #00FFF6;
|
||
}
|
||
}
|
||
|
||
.chentChild {
|
||
width: 104px;
|
||
margin-left: 14px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.iconPic {
|
||
width: 24px;
|
||
height: 25px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.tempFather {
|
||
margin-left: 10px;
|
||
|
||
span:nth-child(2) {
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #4fece7;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
font-size: 10px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 400;
|
||
color: #e4e4e4;
|
||
}
|
||
}
|
||
|
||
.temperature {
|
||
font-size: 12px;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||
font-weight: 400;
|
||
color: #e4e4e4;
|
||
}
|
||
|
||
.centerTop {
|
||
width: 124px;
|
||
position: absolute;
|
||
top: 124px;
|
||
right: 480px;
|
||
background: url("~@/assets/pic/icas.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
padding-bottom: 22px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
}
|
||
|
||
|
||
.tableBox {
|
||
width: 90%;
|
||
height: 75%;
|
||
bottom: 15px;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.securityCheck {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.spoperBox {
|
||
width: 380px;
|
||
height: 84px;
|
||
position: absolute;
|
||
bottom: 24px;
|
||
left: 34px;
|
||
display: flex;
|
||
|
||
.spoChild {
|
||
margin: auto;
|
||
padding: 1px;
|
||
border: 1px solid #00EBEB;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.videoBox {
|
||
position: absolute;
|
||
bottom: 33px;
|
||
display: flex;
|
||
|
||
.videoFat {
|
||
background: gray;
|
||
flex: 1;
|
||
width: 180px;
|
||
height: 183px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.pieBox {
|
||
width: 100%;
|
||
height: 273px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.passBox {
|
||
position: absolute;
|
||
right: 45px;
|
||
top: 128px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 118px;
|
||
}
|
||
|
||
div:nth-child(1) {
|
||
width: 50px;
|
||
height: 47px;
|
||
background: url("~@/assets/pic/pass.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
div:nth-child(2) {
|
||
font-size: 12px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #7ffffc;
|
||
margin-top: 6px;
|
||
}
|
||
}
|
||
|
||
.nameMessage {
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
margin-top: 10px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 56px;
|
||
text-align-last: justify;
|
||
}
|
||
}
|
||
|
||
.peopleMessage {
|
||
width: 380px;
|
||
height: 106px;
|
||
background: #002725;
|
||
box-shadow: inset 0px 0px 25px 0px rgba(255, 255, 255, 0.7);
|
||
opacity: 0.2;
|
||
position: absolute;
|
||
left: 33px;
|
||
top: 113px;
|
||
border: 1px solid #007B7B;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
height: 86px;
|
||
}
|
||
|
||
.firBox {
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 337px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.numT2otle {
|
||
position: absolute;
|
||
top: 65px;
|
||
right: 62px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
|
||
.num {
|
||
font-family: lcdD;
|
||
display: inline-block;
|
||
background: url("~@/assets/pic/number.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 20px;
|
||
height: 32px;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
margin-right: 2px;
|
||
font-size: 26px;
|
||
letter-spacing: 0.1em;
|
||
color: #4bffdc;
|
||
padding: 0px 0px 0px 3px;
|
||
}
|
||
}
|
||
|
||
.numTotle {
|
||
// width: 100%;
|
||
position: absolute;
|
||
top: 65px;
|
||
left: 58px;
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
|
||
.num {
|
||
font-family: lcdD;
|
||
display: inline-block;
|
||
background: url("~@/assets/pic/number.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 20px;
|
||
height: 32px;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
margin-right: 2px;
|
||
font-size: 26px;
|
||
letter-spacing: 0.1em;
|
||
color: #4bffdc;
|
||
padding: 0px 0px 0px 3px;
|
||
}
|
||
}
|
||
|
||
.concet {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #d6eae9;
|
||
text-indent: 2em;
|
||
width: 90%;
|
||
height: 180px;
|
||
position: absolute;
|
||
top: 72px;
|
||
line-height: 26px;
|
||
overflow: hidden;
|
||
padding: 0 30px 0 22px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 52px;
|
||
}
|
||
}
|
||
|
||
.bgPicture {
|
||
width: 100%;
|
||
background: url("~@/assets/pic/BG.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.header{
|
||
position: absolute;
|
||
top: 0px;
|
||
width: 100%;
|
||
height: 200px;
|
||
}
|
||
.header .titTop {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 9px;
|
||
left: 9px;
|
||
// right: 9px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.titLeft {
|
||
width: 138px;
|
||
height: 40px;
|
||
background: #025A5F;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
span:nth-child(1),
|
||
span:nth-child(2) {
|
||
font-size: 14px;
|
||
color: #3CFFF9;
|
||
letter-spacing: 1px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
font-weight: bold;
|
||
|
||
}
|
||
}
|
||
|
||
.titRight {
|
||
padding-top: 11px;
|
||
padding-right: 25px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #D1FFFE;
|
||
position: absolute;
|
||
right: 80px;
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
position: absolute;
|
||
right: 80px;
|
||
width: 17.5px;
|
||
height: 18px;
|
||
// background: url("~@/assets/pic/sun.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.closeIndex{
|
||
width: 40px;
|
||
height: 40px;
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 22px;
|
||
}
|
||
}
|
||
|
||
.header .title {
|
||
width: 100%;
|
||
height: 168px;
|
||
background: url("~@/assets/pic/title1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
}
|
||
|
||
.titName {
|
||
width: 100%;
|
||
height: 30px;
|
||
position: absolute;
|
||
top: 15px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 18px;
|
||
height: 18px;
|
||
background: url("~@/assets/pic/titleMark.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: 16px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
font-size: 22px;
|
||
font-family: ht2;
|
||
font-weight: bold;
|
||
color: #86eee7;
|
||
margin-right: 7px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 248px;
|
||
height: 12px;
|
||
background: url("~@/assets/pic/4words.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
|
||
.leftOneBox {
|
||
height: 282px;
|
||
width: 444px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 96px;
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
left: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 76px;
|
||
height: 242px;
|
||
}
|
||
}
|
||
|
||
.leftTwoBox {
|
||
width: 444px;
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
height: 342px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 401px;
|
||
left: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 337px;
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
.leftThreeBox {
|
||
overflow-x: hidden;
|
||
transition: left 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
width: 442px;
|
||
height: 279px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 767px;
|
||
left: 27px;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 657px;
|
||
height: 259px;
|
||
}
|
||
}
|
||
|
||
.rightOneBox {
|
||
width: 444px;
|
||
height: 302px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 96px;
|
||
right: 27px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 76px;
|
||
height: 282px;
|
||
}
|
||
}
|
||
|
||
.rightTwoBox {
|
||
width: 442px;
|
||
height: 299px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 422px;
|
||
right: 27px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 378px;
|
||
height: 279px;
|
||
}
|
||
}
|
||
|
||
.rightThreeBox {
|
||
width: 442px;
|
||
height: 299px;
|
||
background: url("~@/assets/pic/rightBox.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 745px;
|
||
right: 27px;
|
||
overflow-x: hidden;
|
||
transition: right 0.8s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 675px;
|
||
height: 239px;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
right: 0px;
|
||
z-index: 999;
|
||
}
|
||
|
||
.box {
|
||
height: 784px;
|
||
overflow-x: hidden;
|
||
transition: width 1s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
background: url("~@/assets/pic/closeMenu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
flex-direction: column;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.childBoxChoose {
|
||
cursor: pointer;
|
||
width: 166px;
|
||
height: 54px;
|
||
margin-bottom: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url("~@/assets/pic/btn1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 19px;
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-left: 20px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 17px;
|
||
margin-left: 10px;
|
||
background: url("~@/assets/pic/enter1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.childBox:hover {
|
||
background: url("~@/assets/pic/btn1.png") no-repeat;
|
||
}
|
||
|
||
.childBox {
|
||
cursor: pointer;
|
||
width: 166px;
|
||
height: 54px;
|
||
margin-bottom: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url("~@/assets/pic/btn2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 19px;
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-left: 20px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 17px;
|
||
margin-left: 10px;
|
||
background: url("~@/assets/pic/enter2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon1 {
|
||
background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon2 {
|
||
background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon3 {
|
||
background: url("~@/assets/pic/jinduguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon4 {
|
||
background: url("~@/assets/pic/anquanguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.closeBtn {
|
||
position: relative;
|
||
top: 343px;
|
||
height: 53px;
|
||
width: 14px;
|
||
cursor: pointer;
|
||
left: -265px;
|
||
}
|
||
|
||
.switchBtn {
|
||
position: absolute;
|
||
transform: rotateY(358deg);
|
||
left: -14px;
|
||
top: 44%;
|
||
height: 53px;
|
||
width: 14px;
|
||
background: url("~@/assets/pic/openMenu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn {
|
||
height: 53px;
|
||
width: 14px;
|
||
}
|
||
|
||
.tabHeader {
|
||
width: 398px;
|
||
height: 35px;
|
||
background: #368d87;
|
||
display: flex;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 13px;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.el-table__footer-wrapper,
|
||
.el-table__header-wrapper {
|
||
display: none !important;
|
||
}
|
||
|
||
.el-table {
|
||
&.el-table--scrollable-y ::-webkit-scrollbar {
|
||
display: none !important; //隐藏滚动条
|
||
}
|
||
}
|
||
|
||
/deep/ .el-table tr {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/deep/ .el-table,
|
||
.el-table__expanded-cell {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/deep/ .el-table th {
|
||
background-color: #2f807d !important;
|
||
border-bottom: none !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/deep/ .el-table--enable-row-transition .el-table__body td,
|
||
/deep/ .el-table .cell {
|
||
// background-color: transparent !important;
|
||
color: rgba(255, 255, 255, 0.7) !important;
|
||
border: none !important;
|
||
padding-left: 0 ;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
/deep/ .el-table th>.cell {
|
||
color: rgba(254, 254, 254, 1) !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
.el-table::before {
|
||
//去除底部白线
|
||
left: 0 !important;
|
||
bottom: 0 !important;
|
||
width: 100% !important;
|
||
height: 0px !important;
|
||
}
|
||
|
||
/deep/ .el-form-item__label {
|
||
color: white !important;
|
||
}
|
||
|
||
//滚动条的宽度
|
||
::-webkit-scrollbar {
|
||
width: 0px;
|
||
height: 0px;
|
||
background-color: #070c4f;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
|
||
background-color: transparent !important;
|
||
/* color: #f19944; */
|
||
/* 设置文字颜色，可以选择不设置 */
|
||
}
|
||
|
||
/deep/ .el-table .warning-row {
|
||
background: rgba(44, 74, 64, 0.5) !important;
|
||
}
|
||
|
||
/deep/ .el-table .success-row {
|
||
background: transparent;
|
||
}
|
||
</style>
|
||
<style>.el-carousel__indicators--outside {
|
||
display: none;
|
||
}
|
||
</style>
|