<template>
|
<div class="TimesLogs-wrap">
|
<svg
|
class="yunweiSvg"
|
xmlns="http://www.w3.org/2000/svg"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="369px" height="724.5px"
|
viewBox="0 0 369 724.5">
|
<defs>
|
<linearGradient id="PSgrad_0" x1="69.466%" x2="0%" y1="0%" y2="71.934%">
|
<stop offset="0%" stop-color="rgb(8,95,148)" stop-opacity="1" />
|
<stop offset="92%" stop-color="rgb(9,39,73)" stop-opacity="1" />
|
</linearGradient>
|
<filter id="strong-inner">
|
<feFlood flood-color="rgba(0, 59, 97, 0.3)" floodOpacity="0.2"/>
|
<feComposite operator="out" in2="SourceGraphic" />
|
<feMorphology operator="dilate" radius="1"/>
|
<feGaussianBlur stdDeviation="2" />
|
<feComposite operator="atop" in2="SourceGraphic"/>
|
</filter>
|
</defs>
|
<path
|
filter="url(#strong-inner)"
|
opacity="1" fill="rgba(10, 10, 26, 0.9)"
|
d="M334.724,778.500 L29.788,778.500 L6.000,755.703 L6.000,20.881 L24.574,1.500 L337.320,1.500 L354.000,17.485 L354.000,758.386 L334.724,778.500 Z"/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M6.000,21.500 L24.000,1.500 L53.000,1.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M196.000,1.500 L286.000,1.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M366.000,62.500 L366.000,174.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M8.000,212.500 L8.000,414.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M6.000,661.500 L6.000,696.500 L29.000,718.500 L266.000,718.500 "/>
|
<path fill-rule="evenodd" stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
|
d="M366.000,648.500 L366.000,698.500 L347.000,719.500 L325.000,719.500 "/>
|
|
</svg>
|
<div class="YunweiBlock-wrap-inside shishirizhi-inside">
|
<div class="YunweiBlock-title">
|
<h1>实时日志</h1>
|
<div class="zhuangshi">
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
</div>
|
</div>
|
<div class="YunweiBlock-main">
|
<div class="TimesLogs-tags">
|
<el-tabs v-model="activeName">
|
<el-tab-pane
|
v-for="item in timeLogsData"
|
:key="item.label"
|
:label="item.label">
|
<TimesLogsTable :logType="item.name" :label="item.label" v-if="activeName == item.name"></TimesLogsTable>
|
</el-tab-pane>
|
</el-tabs>
|
|
|
</div>
|
<!--<div class="TimesLogs-table">
|
<dv-scroll-board :config="ywTableConfig" style="width:500px;height:220px" />
|
<!–<el-table
|
style="width: 100%"
|
:header-cell-class-name="headerCellName"
|
stripe
|
:data="tableData">
|
<el-table-column
|
prop="content1"
|
label="内容"
|
show-overflow-tooltip
|
align="right"
|
header-align="center"
|
min-width="60">
|
</el-table-column>
|
<el-table-column
|
prop="data"
|
label="日期"
|
show-overflow-tooltip
|
align="right"
|
header-align="center"
|
min-width="40">
|
</el-table-column>
|
</el-table>–>
|
</div>-->
|
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {animateShanFlash} from '@/utils/animateShanFlash'
|
import TimesLogsTable from "./TimesLogs/TimesLogsTable";
|
|
export default {
|
name: "TimesLogs",
|
components: {
|
TimesLogsTable
|
},
|
data() {
|
return {
|
value1:'',
|
activeName:'0',
|
timeLogsData:[{
|
label: '全部',
|
name:'0'
|
},{
|
label: '主机',
|
name:'1'
|
},{
|
label: '数通设备',
|
name:'2'
|
},{
|
label: 'ups',
|
name:'3'
|
},{
|
label: '空调',
|
name:'4'
|
},{
|
label: '温湿度',
|
name:'5'
|
},{
|
label: '漏水',
|
name:'6'
|
},{
|
label: '其他',
|
name:'7'
|
}],
|
type:null,
|
label:''
|
}
|
},
|
mounted() {
|
//this.loading()
|
},
|
methods: {
|
loading() {
|
const tl = this.gsap.timeline({defaults: {duration: 0.8}})
|
animateShanFlash('.zhuangshi span',{
|
duration: 1,
|
})
|
tl.fromTo('.TimesLogs-wrap',{
|
x:'105%'
|
},{
|
x: '0',
|
autoAlpha: 0,
|
duration:0.8,
|
// ease: 'power2.out',
|
delay:0.5,
|
ease:'back.out(1.7)',
|
})
|
},
|
loading2() {
|
const tl = this.gsap.timeline({defaults: {duration: 0.8}})
|
animateShanFlash('.zhuangshi span',{
|
duration: 1,
|
})
|
tl.fromTo('.TimesLogs-wrap',{
|
x:'0'
|
},{
|
x: '105%',
|
autoAlpha: 0,
|
duration:0.8,
|
// ease: 'power2.out',
|
delay:0.5,
|
ease:'back.out(1.7)',
|
})
|
},
|
headerCellName(obj) {
|
return 'kehuxinxiBox'
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
|
.TimesLogs-wrap{
|
.is-active{
|
border: 1px solid rgba(255,80,80,0.8);
|
box-shadow: 0 0 0.078125rem /* 15/192 */ rgba(255,80,80,0.5) inset!important;
|
color: #fff;
|
&:before,
|
&:after{
|
content: none!important;
|
border: none!important;
|
box-shadow: none!important;
|
}
|
}
|
.el-tabs__active-bar,.el-tabs__nav-wrap::after{
|
height: 0!important;
|
}
|
}
|
.TimesLogs-tags{
|
.el-tabs__nav{
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.el-tabs__item{
|
width: 0.4948rem /* 95/192 */;
|
height: 0.1771rem /* 34/192 */;
|
box-shadow: 0 0 10px rgba(0, 207, 249, 0.5) inset;
|
margin-top: 0.03125rem /* 6/192 */;
|
margin-bottom: 0.03125rem /* 6/192 */;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
color: #fff;
|
font-size: 0.078125rem /* 15/192 */;
|
&:nth-child(3n){
|
margin-right: 0.0521rem /* 10/192 */;
|
margin-left: 0.0521rem /* 10/192 */;
|
}
|
/*&:nth-child(n) {*/
|
/* margin-left: 0;*/
|
/*}*/
|
|
/*&:nth-child(3n) {*/
|
/* margin-right: 0;*/
|
/*}*/
|
&:before,
|
&:after {
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
display: block;
|
box-sizing: border-box;
|
border: 1px solid #00d5ff;
|
transition: clip-path .5s ease-in-out;
|
}
|
|
&:before {
|
clip-path: inset(0 calc(100% - 10px) calc(100% - 10px) 0);
|
}
|
|
&:after {
|
clip-path: inset(calc(100% - 10px) 0 0 calc(100% - 10px));
|
}
|
&:hover{
|
&:before,
|
&:after{
|
clip-path: inset(0 0 0 0);
|
}
|
}
|
}
|
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--top .el-tabs__item.is-top:nth-child(2){
|
padding-left: 20px!important;
|
}
|
.el-tabs--bottom .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child, .el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--top .el-tabs__item.is-top:last-child{
|
padding-right: 20px!important;
|
}
|
.el-tabs__content{
|
width: 100%;
|
height: calc(100% - 0.7292rem /* 140/192 */);
|
}
|
.el-tabs__header{
|
margin: 0 0 5px;
|
}
|
.el-tab-pane{
|
width: 100%;
|
height: 100%;
|
}
|
.el-tabs{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
h1,h2,h3,h4{
|
margin:0;
|
padding:0;
|
}
|
.TimesLogs-wrap{
|
width: 1.875rem /* 360/192 */;
|
height: 100%;
|
.yunweiSvg{
|
width: 100%;
|
height: 100%;
|
}
|
.shishirizhi-inside{
|
position: absolute;
|
left: 0.1042rem /* 20/192 */;
|
top: 0.1042rem /* 20/192 */;
|
right: 0.1042rem /* 20/192 */;
|
bottom: 0.1042rem /* 20/192 */;
|
}
|
.YunweiBlock-title{
|
width: 1.6146rem /* 310/192 */;
|
height: 0.2083rem /* 40/192 */;
|
background: url('../../../assets/img/yunwei-title.png') no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
position: relative;
|
h1{
|
color: #fff;
|
font-size: 0.0833rem /* 16/192 */;
|
margin-left: 0.0521rem /* 10/192 */;
|
}
|
.zhuangshi{
|
position: absolute;
|
left: 1.1458rem /* 220/192 */;
|
top:50%;
|
transform: translateY(-50%);
|
display: flex;
|
span{
|
display: block;
|
width: 0.0521rem /* 10/192 */;
|
height: 2px;
|
background:#3bb4c2;
|
margin:0 2px;
|
}
|
}
|
}
|
.YunweiBlock-main {
|
width: 100%;
|
height: calc(100% - 0.234375rem /* 45/192 */);
|
|
.TimesLogs-tags {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
|
.tag-block {
|
width: 0.4948rem /* 95/192 */;
|
height: 0.1771rem /* 34/192 */;
|
box-shadow: 0 0 10px rgba(0, 207, 249, 0.5) inset;
|
margin: 0.03125rem /* 6/192 */;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
h1 {
|
color: #fff;
|
font-size: 0.078125rem /* 15/192 */;
|
}
|
|
&:nth-child(n) {
|
margin-left: 0;
|
}
|
|
&:nth-child(3n) {
|
margin-right: 0;
|
}
|
|
&:before,
|
&:after {
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
display: block;
|
box-sizing: border-box;
|
border: 1px solid #00d5ff;
|
transition: clip-path .5s ease-in-out;
|
}
|
|
&:before {
|
clip-path: inset(0 calc(100% - 10px) calc(100% - 10px) 0);
|
}
|
|
&:after {
|
clip-path: inset(calc(100% - 10px) 0 0 calc(100% - 10px));
|
}
|
&:hover{
|
&:before,
|
&:after{
|
clip-path: inset(0 0 0 0);
|
}
|
}
|
|
}
|
}
|
}
|
}
|
</style>
|
