<script>
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("log");
|
export default {
|
name: "TodayLog",
|
mixins: [WSMixin],
|
data() {
|
return {
|
list: []
|
}
|
},
|
methods: {
|
onWSMessage(res) {
|
let rs = JSON.parse(res.data);
|
let data = rs.data;
|
this.list = data.map(item=>{
|
return {
|
name: item.name,
|
oprateDay: new Date(item.oprateDay).format("hh:mm"),
|
oprateType: item.oprateType,
|
oprateMsg: item.oprateMsg,
|
operateTypeName: item.operateTypeName
|
};
|
});
|
},
|
goToLogsMore() {
|
this.$router.push({
|
path: "/system/logs"
|
});
|
}
|
},
|
mounted() {
|
}
|
}
|
</script>
|
|
<template>
|
<a-card class="a-flex-card" size="small" title="最新动态">
|
<template #extra>
|
<span class="href-text" @click="goToLogsMore">更多</span>
|
</template>
|
<div class="list-wrapper">
|
<ul class="timeline timeline-tag-left">
|
<li v-for="(item, key) in list" :key="'key'+key">
|
<div>
|
<span class="timeline-tag">{{ item.oprateDay }}</span>
|
<span class="timeline-text">
|
{{ item.name }}
|
<span class="label-action">{{ item.operateTypeName }}</span>
|
<span class="href-text" :title="item.oprateMsg">{{ item.oprateMsg }}</span>
|
</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</a-card>
|
</template>
|
|
<style scoped>
|
.a-flex-card.ant-card {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
}
|
/deep/.ant-card-body {
|
flex: 1;
|
position: relative;
|
overflow: hidden;
|
}
|
.list-wrapper {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
}
|
.timeline-tag-left {
|
padding-left: 50px;
|
}
|
.timeline>li {
|
position: relative;
|
list-style: none;
|
}
|
.timeline > li:before {
|
left: -26px;
|
}
|
.timeline > li:before {
|
position: absolute;
|
display: block;
|
top: 8px;
|
left: -16px;
|
z-index: 3;
|
width: 7px;
|
height: 7px;
|
background-color: #c4c4c4;
|
border: 1px solid #c4c4c4;
|
content: ' ';
|
border-radius: 50%;
|
}
|
.timeline > li > div:after {
|
position: absolute;
|
display: block;
|
content: ' ';
|
top: 11px;
|
left: -27px;
|
z-index: 3;
|
width: 9px;
|
height: 9px;
|
background-color: #2e7fff;
|
border-radius: 50%;
|
opacity: 0;
|
}
|
.timeline-tag {
|
position: absolute;
|
top: 2px;
|
left: -50px;
|
font-size: 12px;
|
}
|
.timeline-text {
|
display: block;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
min-height: 24px;
|
font-size: 14px;
|
}
|
.timeline>li+li:after {
|
position: absolute;
|
top: -8px;
|
bottom: 10px;
|
left: -13px;
|
z-index: 1;
|
display: block;
|
content: ' ';
|
border-left: 1px solid #eee;
|
}
|
.label-action {
|
display: inline-block;
|
padding: 0 2px 0 0;
|
}
|
.list-wrapper {
|
height: 100%;
|
overflow: auto;
|
}
|
.href-text {
|
cursor: pointer;
|
color: #13c2c2;
|
}
|
</style>
|
