xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alarm 模块 email overview 断开链接的状态调整

Browse Source 
alarm 模块 instances 断开连接时相关的状态及显示问题
This commit is contained in:
任珮宇 2023-11-27 11:05:00 +08:00
parent b94b11aa9a
commit e88219817f
3 changed files with 345 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/abnormalAlarm/off-link.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

418
src/views/abnormalAlarm/emailMonitor/instances/index.vue
View File

@ -1,12 +1,13 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<a-spin :spinning="spinning"> <a-spin :spinning="spinning">
<div class="email-top"> <div class="email-top">
<BoxTitle title="Receiving information"> <BoxTitle title="Receiving information">
<template slot="right"> <template slot="right">
<div style="display: flex;align-items: center;"> <div style="display: flex; align-items: center">
<span class="item-label">Email</span> <span class="item-label">Email</span>
<a-select style="width:160px" <a-select
style="width: 160px"
v-model="emailId" v-model="emailId"
placeholder="select..." placeholder="select..."
:filter-option="filterOption" :filter-option="filterOption"
@ -21,73 +22,86 @@
</template> </template>
</BoxTitle> </BoxTitle>
<div class="email-top-content"> <div class="email-top-content">
<div class="email-top-content-li email-top-content-item0"> <div :class="['email-top-content-li', emailStatus ? 'email-top-content-item0' : 'email-top-content-item0-0']">
<div class="email-top-content-li-left"> <div class="email-top-content-li-left">
<div class="email-top-content-li-left-icon"> <div class="email-top-content-li-left-icon">
<img src="@/assets/images/abnormalAlarm/email-icon0.png" alt=""> <img v-if="emailStatus" src="@/assets/images/abnormalAlarm/email-icon0.png" alt="" />
<img v-else src="@/assets/images/abnormalAlarm/off-link.png" alt="" />
</div> </div>
<img src="@/assets/images/abnormalAlarm/email-split.png" alt=""> <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
</div> </div>
<div class="email-top-content-li-right"> <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-title">Mailbox connection status</div>
<div class="email-top-content-li-right-val">{{ emailStatus?"NORMAL":"ABNORMAL" }}</div> <div class="email-top-content-li-right-val" :style="{ color: emailStatus ? '#24d870' : '#707070' }">
{{ emailStatus ? 'NORMAL' : 'ABNORMAL' }}
</div> </div>
<div class="email-top-content-li-rect" style="background: #24d870;"></div> </div>
<div class="email-top-content-li-rect" :style="{ background: emailStatus ? '#24d870' : '#707070' }"></div>
</div> </div>
<div class="email-top-content-li email-top-content-item1"> <div class="email-top-content-li email-top-content-item1">
<div class="email-top-content-li-left"> <div class="email-top-content-li-left">
<div class="email-top-content-li-left-icon"> <div class="email-top-content-li-left-icon">
<img src="@/assets/images/abnormalAlarm/email-icon1.png" alt=""> <img src="@/assets/images/abnormalAlarm/email-icon1.png" alt="" />
</div> </div>
<img src="@/assets/images/abnormalAlarm/email-split.png" alt=""> <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
</div> </div>
<div class="email-top-content-li-right"> <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-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 class="email-top-content-li-right-val" style="color: #ade6ee; font-size: 30px">
{{ emailTotal.today || 0 }}
</div> </div>
<div class="email-top-content-li-rect" style="background: #00ddfe;"></div> </div>
<div class="email-top-content-li-rect" style="background: #00ddfe"></div>
</div> </div>
<div class="email-top-content-li email-top-content-item2"> <div class="email-top-content-li email-top-content-item2">
<div class="email-top-content-li-left"> <div class="email-top-content-li-left">
<div class="email-top-content-li-left-icon"> <div class="email-top-content-li-left-icon">
<img src="@/assets/images/abnormalAlarm/email-icon2.png" alt=""> <img src="@/assets/images/abnormalAlarm/email-icon2.png" alt="" />
</div> </div>
<img src="@/assets/images/abnormalAlarm/email-split.png" alt=""> <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
</div> </div>
<div class="email-top-content-li-right"> <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-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 class="email-top-content-li-right-val" style="color: #ade6ee; font-size: 30px">
{{ emailTotal.yesterday || 0 }}
</div> </div>
<div class="email-top-content-li-rect" style="background: #7c9da2;"></div> </div>
<div class="email-top-content-li-rect" style="background: #7c9da2"></div>
</div> </div>
<div class="email-top-content-li email-top-content-item3"> <div class="email-top-content-li email-top-content-item3">
<div class="email-top-content-li-left"> <div class="email-top-content-li-left">
<div class="email-top-content-li-left-icon"> <div class="email-top-content-li-left-icon">
<img src="@/assets/images/abnormalAlarm/email-icon3.png" alt=""> <img src="@/assets/images/abnormalAlarm/email-icon3.png" alt="" />
</div> </div>
<img src="@/assets/images/abnormalAlarm/email-split.png" alt=""> <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
</div> </div>
<div class="email-top-content-li-right"> <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-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 class="email-top-content-li-right-val" style="color: #ade6ee; font-size: 30px">
{{ emailTotal.week || 0 }}
</div> </div>
<div class="email-top-content-li-rect" style="background: #cca817;"></div> </div>
<div class="email-top-content-li-rect" style="background: #cca817"></div>
</div> </div>
<div class="email-top-content-li email-top-content-item4"> <div class="email-top-content-li email-top-content-item4">
<div class="email-top-content-item4-left"> <div class="email-top-content-item4-left">
<div class="email-top-content-item4-left-info"> <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-title">Store capacity</div>
<div class="email-top-content-item4-left-info-val"> <div class="email-top-content-item4-left-info-val">
<h3>total：<span>{{ emailSpace.total||0 }}</span></h3> <h3>
<h3>residue：<span>{{ emailSpace.residue||0 }}</span></h3> total：<span>{{ emailSpace.total || 0 }}</span>
</h3>
<h3>
residue：<span>{{ emailSpace.residue || 0 }}</span>
</h3>
</div> </div>
</div> </div>
<img src="@/assets/images/abnormalAlarm/email-split.png" alt=""> <img src="@/assets/images/abnormalAlarm/email-split.png" alt="" />
</div> </div>
<div class="email-top-content-item4-right"> <div class="email-top-content-item4-right">
<div class="email-top-content-item4-right-chart" id="store"></div> <div class="email-top-content-item4-right-chart" id="store"></div>
</div> </div>
<div class="email-top-content-li-rect" style="background: #e54f0d;"></div> <div class="email-top-content-li-rect" style="background: #e54f0d"></div>
</div> </div>
</div> </div>
</div> </div>
@ -104,8 +118,9 @@
<div class="email-footer"> <div class="email-footer">
<BoxTitle title="Mail reception statistics"> <BoxTitle title="Mail reception statistics">
<template slot="right"> <template slot="right">
<div style="display: flex;align-items: center;"> <div style="display: flex; align-items: center">
<a-select style="width:160px" <a-select
style="width: 160px"
v-model="date" v-model="date"
placeholder="select..." placeholder="select..."
show-arrow show-arrow
@ -116,7 +131,7 @@
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" /> <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
</a-select> </a-select>
<a-range-picker <a-range-picker
style="width: 270px;padding: 0 0 0 15px;" style="width: 270px; padding: 0 0 0 15px"
:value="[moment(startDate), moment(endDate)]" :value="[moment(startDate), moment(endDate)]"
@change="onRangeDateChange" @change="onRangeDateChange"
/> />
@ -130,9 +145,9 @@
</template> </template>
<script> <script>
import moment from 'moment'; import moment from 'moment'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import BoxTitle from '../../components/boxTitle.vue'; import BoxTitle from '../../components/boxTitle.vue'
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
export default { export default {
@ -145,37 +160,62 @@ export default {
emailStatus: null, emailStatus: null,
emailTotal: {}, emailTotal: {},
emailSpace: {}, emailSpace: {},
emailId: "", emailId: '',
emailToday: [], emailToday: [],
emailOptions: [], emailOptions: [],
date: 7, date: 7,
dateOptions: [ dateOptions: [
{ {
label: "Last To 7 Days", label: 'Last To 7 Days',
value: 7, value: 7,
},{ },
label: "Last To 30 Days", {
label: 'Last To 30 Days',
value: 30, value: 30,
},{ },
label: "Last To 180 Days", {
label: 'Last To 180 Days',
value: 180, value: 180,
},{ },
label: "Last To 365 Days", {
label: 'Last To 365 Days',
value: 365, value: 365,
}, },
], ],
startDate: "", startDate: '',
endDate: dateFormat(new Date(), 'yyyy-MM-dd'), endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
guageStore: null, guageStore: null,
timeLine: null, timeLine: null,
areaMailLine: null, areaMailLine: null,
xData: [], xData: [],
yData: [], yData: [],
currId: "", currId: '',
timeList: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", timeList: [
"10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", '00:00',
"20:00","21:00","22:00","23:00" '01:00',
] '02:00',
'03:00',
'04:00',
'05:00',
'06:00',
'07:00',
'08:00',
'09:00',
'10:00',
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00',
],
} }
}, },
created() { created() {
@ -192,27 +232,25 @@ export default {
this.getEmailSpace() this.getEmailSpace()
this.getEmailToday() this.getEmailToday()
this.getEmailStatistics() this.getEmailStatistics()
} },
}, },
methods: { methods: {
moment, moment,
filterOption(input, option) { filterOption(input, option) {
return ( return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
}, },
getEmailList() { getEmailList() {
getAction("/sysEmail/sourceList").then(res => { getAction('/sysEmail/sourceList').then((res) => {
if (res.success) { if (res.success) {
this.emailId = this.$route.query.emailId || res.result[0].sourceId this.emailId = this.$route.query.emailId || res.result[0].sourceId
this.emailOptions = res.result.map(item => { this.emailOptions = res.result.map((item) => {
return { return {
label: item.sourceName, label: item.sourceName,
value: item.sourceId value: item.sourceId,
} }
}) })
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
@ -235,27 +273,27 @@ export default {
this.getEmailStatistics() this.getEmailStatistics()
}, },
getEmailStatus() { getEmailStatus() {
getAction("/sysEmailLog/status",{emailId:this.currId}).then(res => { getAction('/sysEmailLog/status', { emailId: this.currId }).then((res) => {
this.spinning = false this.spinning = false
if (res.success) { if (res.success) {
this.emailStatus = res.result this.emailStatus = res.result
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
getEmailTotal() { getEmailTotal() {
getAction("/sysEmailLog/total", { emailId: this.currId }).then(res => { getAction('/sysEmailLog/total', { emailId: this.currId }).then((res) => {
this.spinning = false this.spinning = false
if (res.success) { if (res.success) {
this.emailTotal = res.result this.emailTotal = res.result
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
getEmailSpace() { getEmailSpace() {
getAction("/sysEmailLog/space", { emailId: this.currId }).then(res => { getAction('/sysEmailLog/space', { emailId: this.currId }).then((res) => {
this.spinning = false this.spinning = false
if (res.success) { if (res.success) {
let s = res.result.usage let s = res.result.usage
@ -264,12 +302,12 @@ export default {
this.emailSpace = res.result this.emailSpace = res.result
this.drawGuageStore() this.drawGuageStore()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
getEmailToday() { getEmailToday() {
getAction("/sysEmailLog/today",{emailId:this.currId}).then(res => { getAction('/sysEmailLog/today', { emailId: this.currId }).then((res) => {
if (res.success) { if (res.success) {
let arr_h1 = [] let arr_h1 = []
let arr_h2 = [] let arr_h2 = []
@ -297,86 +335,108 @@ export default {
let arr_h24 = [] let arr_h24 = []
for (const key in res.result) { for (const key in res.result) {
if (Object.hasOwnProperty.call(res.result, key)) { if (Object.hasOwnProperty.call(res.result, key)) {
if (key.includes("00:")) { if (key.includes('00:')) {
arr_h1.push(res.result[key]) arr_h1.push(res.result[key])
} }
if (key.includes("01:")) { if (key.includes('01:')) {
arr_h2.push(res.result[key]) arr_h2.push(res.result[key])
} }
if (key.includes("02:")) { if (key.includes('02:')) {
arr_h3.push(res.result[key]) arr_h3.push(res.result[key])
} }
if (key.includes("03:")) { if (key.includes('03:')) {
arr_h4.push(res.result[key]) arr_h4.push(res.result[key])
} }
if (key.includes("04:")) { if (key.includes('04:')) {
arr_h5.push(res.result[key]) arr_h5.push(res.result[key])
} }
if (key.includes("05:")) { if (key.includes('05:')) {
arr_h6.push(res.result[key]) arr_h6.push(res.result[key])
} }
if (key.includes("06:")) { if (key.includes('06:')) {
arr_h7.push(res.result[key]) arr_h7.push(res.result[key])
} }
if (key.includes("07:")) { if (key.includes('07:')) {
arr_h8.push(res.result[key]) arr_h8.push(res.result[key])
} }
if (key.includes("08:")) { if (key.includes('08:')) {
arr_h9.push(res.result[key]) arr_h9.push(res.result[key])
} }
if (key.includes("09:")) { if (key.includes('09:')) {
arr_h10.push(res.result[key]) arr_h10.push(res.result[key])
} }
if (key.includes("10:")) { if (key.includes('10:')) {
arr_h11.push(res.result[key]) arr_h11.push(res.result[key])
} }
if (key.includes("11:")) { if (key.includes('11:')) {
arr_h12.push(res.result[key]) arr_h12.push(res.result[key])
} }
if (key.includes("12:")) { if (key.includes('12:')) {
arr_h13.push(res.result[key]) arr_h13.push(res.result[key])
} }
if (key.includes("13:")) { if (key.includes('13:')) {
arr_h14.push(res.result[key]) arr_h14.push(res.result[key])
} }
if (key.includes("14:")) { if (key.includes('14:')) {
arr_h15.push(res.result[key]) arr_h15.push(res.result[key])
} }
if (key.includes("15:")) { if (key.includes('15:')) {
arr_h16.push(res.result[key]) arr_h16.push(res.result[key])
} }
if (key.includes("16:")) { if (key.includes('16:')) {
arr_h17.push(res.result[key]) arr_h17.push(res.result[key])
} }
if (key.includes("17:")) { if (key.includes('17:')) {
arr_h18.push(res.result[key]) arr_h18.push(res.result[key])
} }
if (key.includes("18:")) { if (key.includes('18:')) {
arr_h19.push(res.result[key]) arr_h19.push(res.result[key])
} }
if (key.includes("19:")) { if (key.includes('19:')) {
arr_h20.push(res.result[key]) arr_h20.push(res.result[key])
} }
if (key.includes("20:")) { if (key.includes('20:')) {
arr_h21.push(res.result[key]) arr_h21.push(res.result[key])
} }
if (key.includes("21:")) { if (key.includes('21:')) {
arr_h22.push(res.result[key]) arr_h22.push(res.result[key])
} }
if (key.includes("22:")) { if (key.includes('22:')) {
arr_h23.push(res.result[key]) arr_h23.push(res.result[key])
} }
if (key.includes("23:")) { if (key.includes('23:')) {
arr_h24.push(res.result[key]) arr_h24.push(res.result[key])
} }
} }
} }
this.emailToday = [arr_h1, arr_h2, arr_h3, arr_h4, arr_h5, arr_h6, arr_h7, arr_h8, arr_h9, this.emailToday = [
arr_h10, arr_h11, arr_h12, arr_h13, arr_h14, arr_h15, arr_h16, arr_h17, arr_h18, arr_h19, arr_h1,
arr_h20,arr_h21,arr_h22,arr_h23,arr_h24 arr_h2,
arr_h3,
arr_h4,
arr_h5,
arr_h6,
arr_h7,
arr_h8,
arr_h9,
arr_h10,
arr_h11,
arr_h12,
arr_h13,
arr_h14,
arr_h15,
arr_h16,
arr_h17,
arr_h18,
arr_h19,
arr_h20,
arr_h21,
arr_h22,
arr_h23,
arr_h24,
] ]
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
@ -385,42 +445,42 @@ export default {
let params = { let params = {
emailId: this.currId, emailId: this.currId,
startDate: this.startDate, startDate: this.startDate,
endDate: this.endDate endDate: this.endDate,
} }
getAction("/sysEmailLog/analysis",params).then(res => { getAction('/sysEmailLog/analysis', params).then((res) => {
if (res.success) { if (res.success) {
this.xData = res.result.xData this.xData = res.result.xData
this.yData = res.result.yData this.yData = res.result.yData
this.drawAreaMail() this.drawAreaMail()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
// 获取n天前的日期 // 获取n天前的日期
getBeforeDate(n) { getBeforeDate(n) {
var n = n; var n = n
var d = new Date(); var d = new Date()
var year = d.getFullYear(); var year = d.getFullYear()
var mon=d.getMonth()+1; var mon = d.getMonth() + 1
var day=d.getDate(); var day = d.getDate()
if (day <= n) { if (day <= n) {
if (mon > 1) { if (mon > 1) {
mon=mon-1; mon = mon - 1
} else { } else {
year = year-1; year = year - 1
mon = 12; mon = 12
} }
} }
d.setDate(d.getDate()-n); d.setDate(d.getDate() - n)
year = d.getFullYear(); year = d.getFullYear()
mon=d.getMonth()+1; mon = d.getMonth() + 1
day=d.getDate(); day = d.getDate()
var s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day); var s = year + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day)
return s; return s
}, },
drawGuageStore() { drawGuageStore() {
this.guageStore = echarts.init(document.getElementById("store")) this.guageStore = echarts.init(document.getElementById('store'))
let option = { let option = {
series: [ series: [
{ {
@ -432,20 +492,20 @@ export default {
min: 0, min: 0,
max: 100, max: 100,
itemStyle: { itemStyle: {
color: "#b94713" color: '#b94713',
}, },
progress: { progress: {
show: true, show: true,
width: 20 width: 20,
}, },
pointer: { pointer: {
show: false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: [[1, '#162b39']], color: [[1, '#162b39']],
width: 20 width: 20,
} },
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -457,25 +517,25 @@ export default {
show: false, show: false,
}, },
anchor: { anchor: {
show: false show: false,
}, },
title: { title: {
show: false show: false,
}, },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
fontFamily: "MicrogrammaD-MediExte", fontFamily: 'MicrogrammaD-MediExte',
fontSize: 24, fontSize: 24,
lineHeight: 28, lineHeight: 28,
offsetCenter: [0, '-16%'], offsetCenter: [0, '-16%'],
formatter: '{value} %', formatter: '{value} %',
color: '#ade6ee' color: '#ade6ee',
}, },
data: [ data: [
{ {
value: this.emailSpace.usage value: this.emailSpace.usage,
} },
] ],
}, },
{ {
type: 'gauge', type: 'gauge',
@ -492,112 +552,117 @@ export default {
y: 1, y: 1,
x2: 0, x2: 0,
y2: 0, y2: 0,
colorStops: [{ colorStops: [
offset: 0, color: '#9b3709' // 0% 处的颜色 {
}, { offset: 0,
offset: 1, color: '#df660d' // 100% 处的颜色 color: '#9b3709', // 0% 处的颜色
}], },
global: false // 缺省为 false {
} offset: 1,
color: '#df660d', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
}, },
progress: { progress: {
show: true, show: true,
width: 2 width: 2,
}, },
pointer: { pointer: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
}, },
detail: { detail: {
show: false show: false,
}, },
data: [ data: [
{ {
value: 100 value: 100,
} },
] ],
} },
] ],
} }
this.guageStore.setOption(option) this.guageStore.setOption(option)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
this.guageStore.resize(); this.guageStore.resize()
}); })
}, },
drawAreaMail() { drawAreaMail() {
this.areaMailLine = echarts.init(document.getElementById("mailArea")) this.areaMailLine = echarts.init(document.getElementById('mailArea'))
let option = { let option = {
color: ["#0096ff"], color: ['#0096ff'],
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
}, },
grid: { grid: {
left: 25, left: 25,
right: 0, right: 0,
top: 15, top: 15,
bottom: 0, bottom: 0,
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: { axisTick: {
show:false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(115, 191, 255, 0.2)" color: 'rgba(115, 191, 255, 0.2)',
} },
}, },
axisLabel: { axisLabel: {
color: "rgba(173, 230, 238, 1)", color: 'rgba(173, 230, 238, 1)',
formatter: (value, index) => { formatter: (value, index) => {
if (index === 0) { if (index === 0) {
return ' ' + value; return ' ' + value
} }
if (index === this.xData.length - 1) { if (index === this.xData.length - 1) {
return value + ' '; return value + ' '
} }
return value return value
} },
}, },
boundaryGap: false, boundaryGap: false,
data: this.xData data: this.xData,
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: "count", name: 'count',
nameLocation: "middle", nameLocation: 'middle',
nameTextStyle: { nameTextStyle: {
color: "#5b9cba", color: '#5b9cba',
fontFamily: "ArialMT", fontFamily: 'ArialMT',
fontSize: 14 fontSize: 14,
}, },
nameGap: 30, nameGap: 30,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(115, 191, 255, 0.2)" color: 'rgba(115, 191, 255, 0.2)',
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(115, 191, 255, 0.5)" color: 'rgba(115, 191, 255, 0.5)',
} },
}, },
axisLabel: { axisLabel: {
color: "rgba(173, 230, 238, 1)" color: 'rgba(173, 230, 238, 1)',
}, },
}, },
series: [ series: [
@ -605,22 +670,22 @@ export default {
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
lineStyle: { lineStyle: {
width: 1 width: 1,
}, },
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#0096ff" }, { offset: 0, color: '#0096ff' },
{ offset: 1, color: "rgba(0, 150, 255,0.2)" }, { offset: 1, color: 'rgba(0, 150, 255,0.2)' },
]) ]),
}, },
data: this.yData data: this.yData,
},
],
} }
]
};
this.areaMailLine.setOption(option) this.areaMailLine.setOption(option)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
this.areaMailLine.resize(); this.areaMailLine.resize()
}) })
}, },
}, },
@ -679,26 +744,29 @@ export default {
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
line-height: 25px; line-height: 25px;
color: #24d870; // color: #24d870;
margin-top: 18px; margin-top: 18px;
} }
} }
} }
&-item0 { &-item0 {
border-left: 3px solid rgba(36, 216, 112,.8); border-left: 3px solid rgba(36, 216, 112, 0.8);
}
&-item0-0 {
border-left: 3px solid rgb(112, 112, 112);
} }
&-item1 { &-item1 {
border-left: 3px solid rgba(0, 221, 254,.8); border-left: 3px solid rgba(0, 221, 254, 0.8);
} }
&-item2 { &-item2 {
border-left: 3px solid rgba(124, 157, 162,.8); border-left: 3px solid rgba(124, 157, 162, 0.8);
} }
&-item3 { &-item3 {
border-left: 3px solid rgba(204, 168, 23,.8); border-left: 3px solid rgba(204, 168, 23, 0.8);
} }
&-item4 { &-item4 {
width: 380px; width: 380px;
border-left: 3px solid rgba(229, 79, 13,.8); border-left: 3px solid rgba(229, 79, 13, 0.8);
&-left { &-left {
width: 172px; width: 172px;
height: 100%; height: 100%;

1
src/views/abnormalAlarm/emailMonitor/overview/index.vue
View File

@ -490,6 +490,7 @@ export default {
color: #4bc048; color: #4bc048;
} }
.status-off { .status-off {
margin-left: 10px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #868686; color: #868686;
} }