email monitor 模块 instances 页面创建
This commit is contained in:
parent
bd886ba220
commit
99c01e55ab
BIN
src/assets/images/abnormalAlarm/email-icon0.png
Normal file
BIN
src/assets/images/abnormalAlarm/email-icon0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/images/abnormalAlarm/email-icon1.png
Normal file
BIN
src/assets/images/abnormalAlarm/email-icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/abnormalAlarm/email-icon2.png
Normal file
BIN
src/assets/images/abnormalAlarm/email-icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/abnormalAlarm/email-icon3.png
Normal file
BIN
src/assets/images/abnormalAlarm/email-icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/abnormalAlarm/email-split.png
Normal file
BIN
src/assets/images/abnormalAlarm/email-split.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1014 B |
|
|
@ -1,15 +1,756 @@
|
|||
<template>
|
||||
<div>
|
||||
instances
|
||||
<div style="height: 100%;">
|
||||
<div class="email-top">
|
||||
<BoxTitle title="Receiving information">
|
||||
<template slot="right">
|
||||
<div>
|
||||
<span class="item-label">Email</span>
|
||||
<a-select style="width:160px"
|
||||
v-model="email"
|
||||
placeholder="select..."
|
||||
:filter-option="filterOption"
|
||||
show-arrow
|
||||
:options="emailOptions"
|
||||
@change="onEmailChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</div>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="email-top-content">
|
||||
<div class="email-top-content-li email-top-content-item0">
|
||||
<div class="email-top-content-li-left">
|
||||
<div class="email-top-content-li-left-icon">
|
||||
<img src="@/assets/images/abnormalAlarm/email-icon0.png" alt="">
|
||||
</div>
|
||||
<img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
|
||||
</div>
|
||||
<div class="email-top-content-li-right">
|
||||
<div class="email-top-content-li-right-title">Mailbox connection status</div>
|
||||
<div class="email-top-content-li-right-val">{{ emailStatus?"NORMAL":"ABNORMAL" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-top-content-li email-top-content-item1">
|
||||
<div class="email-top-content-li-left">
|
||||
<div class="email-top-content-li-left-icon">
|
||||
<img src="@/assets/images/abnormalAlarm/email-icon1.png" alt="">
|
||||
</div>
|
||||
<img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
|
||||
</div>
|
||||
<div class="email-top-content-li-right">
|
||||
<div class="email-top-content-li-right-title">Total mail volume for today</div>
|
||||
<div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.today||0}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-top-content-li email-top-content-item2">
|
||||
<div class="email-top-content-li-left">
|
||||
<div class="email-top-content-li-left-icon">
|
||||
<img src="@/assets/images/abnormalAlarm/email-icon2.png" alt="">
|
||||
</div>
|
||||
<img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
|
||||
</div>
|
||||
<div class="email-top-content-li-right">
|
||||
<div class="email-top-content-li-right-title">Total mail volume of yesterday</div>
|
||||
<div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.yesterday||0}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-top-content-li email-top-content-item3">
|
||||
<div class="email-top-content-li-left">
|
||||
<div class="email-top-content-li-left-icon">
|
||||
<img src="@/assets/images/abnormalAlarm/email-icon3.png" alt="">
|
||||
</div>
|
||||
<img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
|
||||
</div>
|
||||
<div class="email-top-content-li-right">
|
||||
<div class="email-top-content-li-right-title">Total mail volume of the past week</div>
|
||||
<div class="email-top-content-li-right-val" style="color: #ade6ee;font-size: 30px;">{{emailTotal.week||0}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-top-content-li email-top-content-item4">
|
||||
<div class="email-top-content-item4-left">
|
||||
<div class="email-top-content-item4-left-info">
|
||||
<div class="email-top-content-item4-left-info-title">Store capacity</div>
|
||||
<div class="email-top-content-item4-left-info-val">
|
||||
<h3>total：<span>{{ emailSpace.total||0 }}</span></h3>
|
||||
<h3>residue：<span>{{ emailSpace.residue||0 }}</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/images/abnormalAlarm/email-split.png" alt="">
|
||||
</div>
|
||||
<div class="email-top-content-item4-right">
|
||||
<div class="email-top-content-item4-right-chart" id="store"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-center">
|
||||
<BoxTitle title="Mail reception today"></BoxTitle>
|
||||
<div class="line-bg"></div>
|
||||
<div class="time-line" id="timeLine"></div>
|
||||
</div>
|
||||
<div class="email-footer">
|
||||
<BoxTitle title="Mail reception statistics">
|
||||
<template slot="right">
|
||||
<div>
|
||||
<a-select style="width:160px"
|
||||
v-model="date"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
:options="dateOptions"
|
||||
@change="onDateChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
<a-range-picker
|
||||
style="width: 270px;"
|
||||
:default-value="[moment(startDate), moment(endDate)]"
|
||||
@change="onRangeDateChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="email-footer-content" id="mail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
var data1 = [];
|
||||
var dataCount = 1;
|
||||
var startTime = +new Date();
|
||||
console.log("startTime",startTime);
|
||||
var categories = ['cpu'];
|
||||
var types = [
|
||||
{ name: 'Halt', color: '#0aaf25' },
|
||||
];
|
||||
var legendData = types.map(item=>{
|
||||
return item.name
|
||||
})
|
||||
// Generate mock data
|
||||
categories.forEach((category, index) => {
|
||||
var baseTime = startTime;
|
||||
for (var i = 0; i < dataCount; i++) {
|
||||
var typeItem = types[i];
|
||||
var duration = Math.round(Math.random() * 10000);
|
||||
data1.push({
|
||||
name: typeItem.name,
|
||||
value: [index, baseTime, (baseTime += duration), duration],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: typeItem.color
|
||||
}
|
||||
}
|
||||
});
|
||||
baseTime += Math.round(Math.random() * 2000);
|
||||
}
|
||||
});
|
||||
function renderItem1(params, api) {
|
||||
var categoryIndex = api.value(0);
|
||||
var start = api.coord([api.value(1), categoryIndex]);
|
||||
var end = api.coord([api.value(2), categoryIndex]);
|
||||
var height = api.size([0, 1])[1] * 1;
|
||||
var rectShape = echarts.graphic.clipRectByRect(
|
||||
{
|
||||
x: start[0],
|
||||
y: start[1] - height / 2,
|
||||
width: end[0] - start[0],
|
||||
height: height
|
||||
},
|
||||
{
|
||||
x: params.coordSys.x,
|
||||
y: params.coordSys.y,
|
||||
width: params.coordSys.width,
|
||||
height: params.coordSys.height
|
||||
}
|
||||
);
|
||||
return (
|
||||
rectShape && {
|
||||
type: 'rect',
|
||||
transition: ['shape'],
|
||||
shape: rectShape,
|
||||
style: api.style()
|
||||
}
|
||||
);
|
||||
}
|
||||
import moment from 'moment';
|
||||
import * as echarts from 'echarts'
|
||||
import BoxTitle from '../../components/boxTitle.vue';
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
emailStatus: null,
|
||||
emailTotal: {},
|
||||
emailSpace: {},
|
||||
email: undefined,
|
||||
emailOptions: [],
|
||||
date: 7,
|
||||
dateOptions: [
|
||||
{
|
||||
label: "Last To 7 Days",
|
||||
value: 7,
|
||||
},{
|
||||
label: "Last To 30 Days",
|
||||
value: 30,
|
||||
},{
|
||||
label: "Last To 180 Days",
|
||||
value: 180,
|
||||
},{
|
||||
label: "Last To 365 Days",
|
||||
value: 365,
|
||||
},
|
||||
],
|
||||
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||
endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||
guageStore: null,
|
||||
timeLine: null,
|
||||
xData: [],
|
||||
yData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getServerList()
|
||||
this.getEmailStatus()
|
||||
this.getEmailTotal()
|
||||
this.getEmailSpace()
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.drawTimeline ()
|
||||
// this.drawAreaMail ()
|
||||
},0)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
filterOption(input, option) {
|
||||
return (
|
||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
);
|
||||
},
|
||||
getServerList() {
|
||||
getAction("/sysServer/sourceList").then(res => {
|
||||
if (res.success) {
|
||||
this.serverOptions = res.result.map(item => {
|
||||
return {
|
||||
label: item.sourceName,
|
||||
value: item.sourceId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
onEmailChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
onDateChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
onRangeDateChange(date, dateString) {
|
||||
this.startDate = dateString[0]
|
||||
this.endDate = dateString[1]
|
||||
},
|
||||
getEmailStatus() {
|
||||
// getAction("/sysEmailLog/status",{emailId:this.$route.query.emailId}).then(res => {
|
||||
getAction("/sysEmailLog/status",{emailId:"1668823404678311937"}).then(res => {
|
||||
if (res.success) {
|
||||
this.emailStatus = res.result
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
getEmailTotal() {
|
||||
// getAction("/sysEmailLog/total",{emailId:this.$route.query.emailId}).then(res => {
|
||||
getAction("/sysEmailLog/total",{emailId:"1668823404678311937"}).then(res => {
|
||||
if (res.success) {
|
||||
this.emailTotal = res.result
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
getEmailSpace() {
|
||||
// getAction("/sysEmailLog/space",{emailId:this.$route.query.emailId}).then(res => {
|
||||
getAction("/sysEmailLog/space",{emailId:"1668823404678311937"}).then(res => {
|
||||
if (res.success) {
|
||||
let s = res.result.usage
|
||||
s = s.substring(0, s.length - 1)
|
||||
res.result.usage = s
|
||||
this.emailSpace = res.result
|
||||
this.drawGuageStore()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
getEmailToday() {
|
||||
// getAction("/sysEmailLog/space",{emailId:this.$route.query.emailId}).then(res => {
|
||||
getAction("/sysEmailLog/today",{emailId:"1668823404678311937"}).then(res => {
|
||||
if (res.success) {
|
||||
this.emailToday = res.result
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
getEmailStatistics() {
|
||||
let params = {
|
||||
emailId: "1668823404678311937",
|
||||
startDate: "2022-12-30",
|
||||
endDate:"2023-01-02"
|
||||
}
|
||||
getAction("/sysEmailLog/analysis",params).then(res => {
|
||||
if (res.success) {
|
||||
this.xData = res.result.xData
|
||||
this.yData = res.result.yData
|
||||
this.drawAreaMail()
|
||||
} else {
|
||||
this.$message.warning("This operation fails. Contact your system administrator")
|
||||
}
|
||||
})
|
||||
},
|
||||
drawGuageStore() {
|
||||
this.guageStore = echarts.init(document.getElementById("store"))
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '88%'],
|
||||
radius: 80,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
itemStyle:{
|
||||
color: "#b94713"
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 20
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color:[[1, '#162b39']],
|
||||
width: 20
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show:false,
|
||||
},
|
||||
splitLine: {
|
||||
show:false,
|
||||
},
|
||||
axisLabel: {
|
||||
show:false,
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontFamily: "MicrogrammaD-MediExte",
|
||||
fontSize: 24,
|
||||
lineHeight: 28,
|
||||
offsetCenter: [0, '-16%'],
|
||||
formatter: '{value} %',
|
||||
color: '#ade6ee'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.emailSpace.usage
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'gauge',
|
||||
center: ['50%', '88%'],
|
||||
radius: 90,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#9b3709' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#df660d' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 2
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.guageStore.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.guageStore.resize();
|
||||
});
|
||||
},
|
||||
drawTimeline() {
|
||||
this.timeLine = echarts.init(document.getElementById("timeLine"))
|
||||
let option = {
|
||||
color:['#0aaf25'],
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
return params.marker + params.name + ': ' + params.value[3] + ' ms';
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0',
|
||||
top:15,
|
||||
height: 32,
|
||||
containLabel: false,
|
||||
show: true
|
||||
},
|
||||
xAxis: {
|
||||
min: startTime,
|
||||
axisLabel: {
|
||||
color: "#ade6ee",
|
||||
fontSize: 14,
|
||||
formatter: function (val) {
|
||||
console.log("valvalvalval",val);
|
||||
return Math.max(0, val - startTime) + ' ms';
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
show:false,
|
||||
data: categories
|
||||
},
|
||||
series: [
|
||||
{ name: legendData[0], type: 'bar', data: [] },
|
||||
{
|
||||
type: 'custom',
|
||||
renderItem: renderItem1,
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0
|
||||
},
|
||||
data: data1
|
||||
}
|
||||
]
|
||||
}
|
||||
this.timeLine.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.timeLine.resize();
|
||||
});
|
||||
},
|
||||
drawAreaMail() {
|
||||
let myLine = echarts.init(document.getElementById("mail"))
|
||||
this.option1 = {
|
||||
color:["#0096ff"],
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
top: 15,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show:false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)",
|
||||
formatter: (value,index)=>{
|
||||
if(index === 0) {
|
||||
return ' ' + value;
|
||||
}
|
||||
if(index === this.xData.length -1) {
|
||||
return value + ' ';
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: this.xData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "number",
|
||||
nameLocation: "middle",
|
||||
nameTextStyle: {
|
||||
color: "#5b9cba",
|
||||
fontFamily: "ArialMT",
|
||||
fontSize: 14
|
||||
},
|
||||
nameGap: 30,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.2)"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: "rgba(115, 191, 255, 0.5)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(173, 230, 238, 1)"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#0096ff" },
|
||||
{ offset: 1, color: "rgba(0, 150, 255,0.2)" },
|
||||
])
|
||||
},
|
||||
data: this.yData
|
||||
}
|
||||
]
|
||||
};
|
||||
myLine.setOption(this.option1)
|
||||
window.addEventListener("resize", function () {
|
||||
myLine.resize();
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.email-top{
|
||||
margin-left: 20px;
|
||||
&-content{
|
||||
height: 155px;
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-li{
|
||||
width: 270px;
|
||||
height: 125px;
|
||||
background: #07282b;
|
||||
&-left{
|
||||
width: 92px;
|
||||
height: 100%;
|
||||
padding: 12px 0;
|
||||
float: left;
|
||||
&-icon{
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
&-right{
|
||||
width: 175px;
|
||||
height: 100%;
|
||||
padding: 0 15px;
|
||||
float: left;
|
||||
&-title{
|
||||
font-family: ArialMT;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: #4fd3c8;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&-val{
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
color: #24d870;
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-item0{
|
||||
border-left: 3px solid rgba(36, 216, 112,.8);
|
||||
}
|
||||
&-item1{
|
||||
border-left: 3px solid rgba(0, 221, 254,.8);
|
||||
}
|
||||
&-item2{
|
||||
border-left: 3px solid rgba(124, 157, 162,.8);
|
||||
}
|
||||
&-item3{
|
||||
border-left: 3px solid rgba(204, 168, 23,.8);
|
||||
}
|
||||
&-item4{
|
||||
width: 380px;
|
||||
border-left: 3px solid rgba(229, 79, 13,.8);
|
||||
&-left{
|
||||
width: 172px;
|
||||
height: 100%;
|
||||
padding: 12px 15px;
|
||||
float: left;
|
||||
&-info{
|
||||
width: 140px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
&-title{
|
||||
font-family: ArialMT;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: #4fd3c8;
|
||||
margin-top: 10px;
|
||||
}
|
||||
&-val{
|
||||
font-family: ArialMT;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 24px;
|
||||
margin-top: 20px;
|
||||
h3{
|
||||
color: #ade6ee;
|
||||
margin: 0;
|
||||
span{
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-right{
|
||||
width: 205px;
|
||||
height: 100%;
|
||||
padding: 0 15px 0 0;
|
||||
float: left;
|
||||
&-chart{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.email-center{
|
||||
width: 100%;
|
||||
height: 115px;
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
.line-bg{
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 55px;
|
||||
background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
|
||||
}
|
||||
.time-line{
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.email-footer{
|
||||
height: calc(100% - 310px);
|
||||
margin-left: 20px;
|
||||
&-content{
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
.item-label{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-family: ArialMT;
|
||||
font-weight: normal;
|
||||
color: #5b9cba;
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
margin-right: 10px;
|
||||
letter-spacing: 0px;
|
||||
background-color: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
/deep/.ant-select-selection--single{
|
||||
height: 26px;
|
||||
}
|
||||
/deep/.ant-select-selection__rendered{
|
||||
line-height: 22px;
|
||||
}
|
||||
/deep/.ant-select-selection__placeholder{
|
||||
font-family: ArialMT;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
/deep/.ant-select-selection-selected-value{
|
||||
font-family: ArialMT;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
/deep/.ant-calendar-picker-input.ant-input{
|
||||
font-size: 12px;
|
||||
height: 26px;
|
||||
font-family: ArialMT;
|
||||
}
|
||||
/deep/.ant-calendar-range-picker-separator{
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -413,8 +413,14 @@ export default {
|
|||
this.form.resetFields()
|
||||
this.visible = false
|
||||
},
|
||||
onRowDbclick() {
|
||||
this.$router.push("/alarm/emailMonitor/instances")
|
||||
onRowDbclick(record) {
|
||||
let query = {
|
||||
emailId:record.id
|
||||
}
|
||||
this.$router.push({
|
||||
path: '/alarm/emailMonitor/instances',
|
||||
query
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -217,24 +217,6 @@ export default {
|
|||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: "roundRect",
|
||||
itemHeight: 12, // 图例icon高度
|
||||
itemWidth: 12, // 图例icon宽度
|
||||
top: 0,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: "#ade6ee",
|
||||
lineHeight: 12,
|
||||
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
},
|
||||
padding:[0,-2,-4,0],
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
|
|
@ -317,24 +299,6 @@ export default {
|
|||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: "roundRect",
|
||||
itemHeight: 12, // 图例icon高度
|
||||
itemWidth: 12, // 图例icon宽度
|
||||
top: 0,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: "#ade6ee",
|
||||
lineHeight: 12,
|
||||
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
},
|
||||
padding:[0,-2,-4,0],
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user