<template>
|
<div class="YunweiBlock-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="M346.724,718.500 L29.788,718.500 L6.000,695.703 L6.000,20.881 L24.574,1.500 L349.320,1.500 L366.000,17.485 L366.000,698.386 L346.724,718.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="datePicker-box">
|
<el-date-picker
|
@change="changePicker"
|
v-model="value1"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
<div class="YunweiBlock-table">
|
<dv-scroll-board :key="key" class="yunwei-scroll" @click="handleClickRow" :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>
|
<YunweiBlockForm ref="YunweiBlockForm" v-if="YunweiBlockVisable"></YunweiBlockForm>
|
</div>
|
</template>
|
|
<script>
|
import {getTaskByDate} from '@/api/daping'
|
import {animateShanFlash} from '@/utils/animateShanFlash'
|
import YunweiBlockForm from "./YunweiBlock/YunweiBlockForm";
|
export default {
|
name: "YunweiBlock",
|
components: {
|
YunweiBlockForm
|
},
|
data() {
|
return {
|
key:1,
|
value1:'',
|
startDate:'',
|
endDate:'',
|
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: ['70%','30%','0'],
|
data: [
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
// ['3号服务器异常，报警错误', '2023-03-06',],
|
],
|
rowNum: 14
|
},
|
tableData: [{
|
content1:'3号服务器异常，报警错误',
|
data:'2023-03-06'
|
},{
|
content1:'3号服务器异常，报警错误',
|
data:'2023-03-06'
|
},{
|
content1:'3号服务器异常，报警错误',
|
data:'2023-03-06'
|
}],
|
YunweiBlockVisable: false,
|
timer: null
|
}
|
},
|
destroyed() {
|
clearInterval(this.timer)
|
},
|
mounted() {
|
this.loading()
|
this.resizeLsit()
|
this.timer = setInterval(() => {
|
this.getTaskByDate()
|
},300000)
|
},
|
watch: {
|
|
},
|
methods: {
|
resizeLsit() {
|
this.key ++
|
let rows = document.querySelector('.yunwei-scroll')
|
let height = rows.clientHeight
|
this.ywTableConfig.rowNum = Math.floor(height/38)
|
this.getTaskByDate()
|
},
|
handleClickRow(config) { //碘酒行信息
|
console.log(config.row[2],'config===')
|
console.log(document.querySelector('.configSpan').innerHTML,'document.querySelector(\'.configSpan\')')
|
|
this.YunweiBlockVisable = true
|
this.$nextTick(() => {
|
this.$refs.YunweiBlockForm.init(document.querySelector('.configSpan').innerHTML)
|
})
|
|
},
|
changePicker(val) { //日期change
|
if(val) {
|
this.startDate = val[0]
|
this.endDate = val[1]
|
}else {
|
this.startDate = ''
|
this.endDate = ''
|
}
|
this.getTaskByDate()
|
},
|
getTaskByDate() { //运维日志
|
getTaskByDate({startDate:this.startDate,endDate:this.endDate}).then(res => {
|
if(res.code == 0) {
|
this.ywTableConfig = {
|
header : ['内容','日期'],
|
headerBGC: 'rgba(255, 255, 255, 0)',
|
oddRowBGC: 'rgba(0,213,255,0.08)',
|
evenRowBGC: 'rgba(255, 255, 255, 0)',
|
// indexHeader: '#',
|
// index: 'true',
|
rowNum:this.ywTableConfig.rowNum,
|
align:'center',
|
hoverPause: 'true',
|
columnWidth: [180,120,0],
|
data:[]
|
}
|
let data = res.data.map(item => {
|
let tempStr = `<span class="configSpan" style="display:none">${item.id}</span>`
|
return [`${item.title}`,`${item.startDate}`,tempStr]
|
})
|
this.$set(this.ywTableConfig,'data',data)
|
}
|
})
|
},
|
loading() {
|
const tl = this.gsap.timeline({defaults: {duration: 0.8}})
|
animateShanFlash('.zhuangshi span',{
|
duration: 1,
|
})
|
tl.from('.YunweiBlock-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">
|
.datePicker-box{
|
width: 100%;
|
margin: 0.078125rem /* 15/192 */ 0 0.0521rem /* 10/192 */ 0;
|
height: 0.1771rem /* 34/192 */;
|
.el-range-input{
|
background: transparent;
|
border: 1px solid #2f5a8b;
|
width: 0.625rem /* 120/192 */;
|
}
|
.el-date-editor .el-range-input{
|
color: #fff;
|
}
|
.el-icon-circle-close:before{
|
content: "\E78D";
|
color: #1ee3f3 ;
|
font-size: 0.1042rem /* 20/192 */;
|
}
|
.el-range-separator{
|
color: #fff;
|
padding: 0;
|
font-size: 0.0521rem /* 10/192 */;
|
}
|
.el-input{
|
background-color: transparent;
|
border: 1px solid #1681af;
|
color: #fff;
|
height: 100%;
|
}
|
.el-input__icon{
|
line-height: 0.1771rem /* 34/192 */;
|
}
|
.el-input__inner{
|
background-color: transparent;
|
border:0;
|
height: 100%;
|
color: #fff;
|
}
|
.el-date-editor.el-input{
|
width: 100% !important;
|
}
|
|
}
|
.YunweiBlock-table{
|
width: 100%;
|
height: calc(100% - 0.3125rem /* 60/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 */;
|
}
|
.el-table__fixed-right-patch{
|
background-color: transparent;
|
border-bottom:none;
|
}
|
.el-table__fixed-right::before, .el-table__fixed::before{
|
height: 0;
|
}
|
.el-table, .el-table__expanded-cell{
|
background-color: transparent;
|
}
|
.el-table tr,.el-table th.el-table__cell{
|
background-color: transparent;
|
}
|
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
border-bottom: 0;
|
}
|
.el-table::before{
|
height: 0;
|
}
|
.el-table td.el-table__cell div{
|
color: #fff;
|
font-size: 0.0729rem /* 14/192 */;
|
}
|
.el-table_1_column_1{
|
.cell{
|
color: #fff!important;
|
}
|
}
|
.el-table tr:hover,.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
background: rgba(0,213,255,0.08);
|
}
|
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
|
background: rgba(0,213,255,0.08);
|
}
|
.el-table th.el-table__cell>.cell{
|
color: #fff;
|
}
|
.el-table__row{
|
cursor: pointer;
|
}
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
h1,h2,h3,h4{
|
margin:0;
|
padding:0;
|
}
|
.YunweiBlock-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 */);
|
}
|
}
|
</style>
|
