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