<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">
|
<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 label="通讯设备" name="1">
|
<div class="tag-block">
|
<h1>通讯设备</h1>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="服务器" name="2">服务器</el-tab-pane>
|
<el-tab-pane label="门禁" name="3">门禁</el-tab-pane>
|
<el-tab-pane label="通讯设备" name="4">通讯设备</el-tab-pane>
|
<el-tab-pane label="服务器" name="5">服务器</el-tab-pane>
|
<el-tab-pane label="门禁" name="5">门禁</el-tab-pane>
|
</el-tabs>-->
|
|
<div class="tag-block">
|
<h1>服务器</h1>
|
</div>
|
<div class="tag-block">
|
<h1>门禁</h1>
|
</div>
|
<div class="tag-block">
|
<h1>通讯设备</h1>
|
</div>
|
<div class="tag-block">
|
<h1>服务器</h1>
|
</div>
|
<div class="tag-block">
|
<h1>门禁</h1>
|
</div>
|
</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 {getWarn} from '@/api/daping'
|
export default {
|
name: "TimesLogs",
|
data() {
|
return {
|
value1:'',
|
ywTableConfig: {
|
header: ['时间','设备名称','原因'],
|
headerBGC: 'rgba(255, 255, 255, 0)',
|
oddRowBGC: 'rgba(0,213,255,0.08)',
|
evenRowBGC: 'rgba(255, 255, 255, 0)',
|
// indexHeader: '#',
|
// index: 'true',
|
align:'center',
|
hoverPause: 'true',
|
columnWidth: [100,140],
|
data: [
|
['2023-04-06','3号服务器异常，报警错误', '异常错误'],
|
['2023-04-06','3号服务器异常，报警错误', '异常错误'],
|
['2023-04-06','3号服务器异常，报警错误', '异常错误'],
|
['2023-04-03','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
['2023-03-02','3号服务器异常，报警错误', '异常错误'],
|
],
|
rowNum: 14
|
},
|
activeName:'1'
|
}
|
},
|
mounted() {
|
this.loading()
|
},
|
methods: {
|
getWarn(){
|
getWarn().then(res => {
|
res.data;
|
})
|
},
|
loading() {
|
const tl = this.gsap.timeline({defaults: {duration: 0.8}})
|
animateShanFlash('.zhuangshi span',{
|
duration: 1,
|
})
|
tl.from('.TimesLogs-wrap',{
|
x: '200',
|
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-table{
|
width: 100%;
|
height: calc(100% - 0.4792rem /* 92/192 */);
|
.dv-scroll-board{
|
width: 100% !important;
|
height: 100%!important;
|
}
|
.header-item{
|
width: 50%;
|
display: flex;
|
justify-content: center;
|
}
|
.dv-scroll-board .rows .ceil{
|
font-size: 0.0677rem /* 13/192 */;
|
}
|
}
|
.YunweiBlock-wrap-inside{
|
.el-tabs__active-bar,.el-tabs__nav-wrap::after{
|
height: 0!important;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
h1,h2,h3,h4{
|
margin:0;
|
padding:0;
|
}
|
.TimesLogs-wrap{
|
width: 1.8229rem /* 350/192 */;
|
height: 100%;
|
.yunweiSvg{
|
width: 100%;
|
height: 100%;
|
}
|
.YunweiBlock-wrap-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%;
|
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>
|
