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

Alarm 模块中所有的筛选条件中日期选择框都改为默认一周

Browse Source
This commit is contained in:
任珮宇 2023-12-11 17:43:05 +08:00
parent bf2ceff880
commit 9dd2c6b830
8 changed files with 448 additions and 389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<SearchBar type="alarmCenter" @search="handleSearch"></SearchBar> <SearchBar type="alarmCenter" @search="handleSearch"></SearchBar>
<div class="chart-layout" id="alarmChartBar"></div> <div class="chart-layout" id="alarmChartBar"></div>
<a-card :bordered="false" style="height:calc(100% - 280px);margin-left: 20px;"> <a-card :bordered="false" style="height: calc(100% - 280px); margin-left: 20px">
<a-tabs default-active-key="alarmHistory" @change="handleTabChange"> <a-tabs default-active-key="alarmHistory" @change="handleTabChange">
<a-tab-pane class="history_tab" key="alarmHistory" tab="ALARM HISTORY"> <a-tab-pane class="history_tab" key="alarmHistory" tab="ALARM HISTORY">
<div style=" height: calc(100% - 30px);overflow: auto;"> <div style="height: calc(100% - 30px); overflow: auto">
<custom-table <custom-table
size="middle" size="middle"
:rowKey="getUid()" :rowKey="getUid()"
@ -16,7 +16,10 @@
> >
<template slot="info" slot-scope="{ record }"> <template slot="info" slot-scope="{ record }">
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div> <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div> <div>
{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }}
{{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}
</div>
</template> </template>
</custom-table> </custom-table>
</div> </div>
@ -28,7 +31,10 @@
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
(total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
@ -39,14 +45,14 @@
<div class="chart-left"> <div class="chart-left">
<div class="chart-title"> <div class="chart-title">
<span>Monitor Type Alarms</span> <span>Monitor Type Alarms</span>
<img src="@/assets/images/abnormalAlarm/title_right.png" alt=""> <img src="@/assets/images/abnormalAlarm/title_right.png" alt="" />
</div> </div>
<div class="chart-content" id="chartLeft"></div> <div class="chart-content" id="chartLeft"></div>
</div> </div>
<div class="chart-right"> <div class="chart-right">
<div class="chart-title"> <div class="chart-title">
<span>Alarm Rule Top5</span> <span>Alarm Rule Top5</span>
<img src="@/assets/images/abnormalAlarm/title_right.png" alt=""> <img src="@/assets/images/abnormalAlarm/title_right.png" alt="" />
</div> </div>
<div class="chart-content" id="chartRight"></div> <div class="chart-content" id="chartRight"></div>
</div> </div>
@ -58,8 +64,8 @@
</template> </template>
<script> <script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import moment from 'moment'
import SearchBar from '../../components/searchBar'; import SearchBar from '../../components/searchBar'
import { postAction } from '@/api/manage' import { postAction } from '@/api/manage'
import * as echarts from 'echarts' import * as echarts from 'echarts'
@ -108,7 +114,7 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
loading: false, loading: false,
isImmediate: true, isImmediate: true,
@ -122,16 +128,18 @@ export default {
xData_top: [], xData_top: [],
yData_top: [], yData_top: [],
pieData: [], pieData: [],
pieColors:["#d64618","#c99e0d","#b2a927"], pieColors: ['#d64618', '#c99e0d', '#b2a927'],
url: { url: {
list: '/alarmLog/findPage' list: '/alarmLog/findPage',
}, },
pieTotal: 0, pieTotal: 0,
paramsArg: {} paramsArg: {},
} }
}, },
mounted() { mounted() {
this.handleSearch({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')}) let currentTime = moment()
let agoDays = moment().subtract(6, 'days')
this.handleSearch({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
}, },
methods: { methods: {
getUid() { getUid() {
@ -143,29 +151,29 @@ export default {
this.paramsArg = { this.paramsArg = {
startDate, startDate,
endDate, endDate,
types types,
} }
this.getAlarmLogBar({ startDate, endDate, types }) this.getAlarmLogBar({ startDate, endDate, types })
this.getTypeAlarmPie({ startDate, endDate }) this.getTypeAlarmPie({ startDate, endDate })
this.getAlarmLogTable({ startDate, endDate, types }) this.getAlarmLogTable({ startDate, endDate, types })
this.getAlarmTop({ startDate, endDate, types }) this.getAlarmTop({ startDate, endDate, types })
} else { } else {
this.$message.warning("The Start Time Or End Time Cannot Be Empty!") this.$message.warning('The Start Time Or End Time Cannot Be Empty!')
} }
}, },
getAlarmLogBar(obj) { getAlarmLogBar(obj) {
let params = { let params = {
startDate: obj.startDate, startDate: obj.startDate,
endDate: obj.endDate, endDate: obj.endDate,
type: obj.types type: obj.types,
} }
postAction("/alarmLog/viewAll", params).then(res => { postAction('/alarmLog/viewAll', 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.drawAlarmChart_bar() this.drawAlarmChart_bar()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
@ -176,59 +184,59 @@ export default {
pageSize: this.ipagination.pageSize, pageSize: this.ipagination.pageSize,
type: obj.types || null, type: obj.types || null,
startDate: obj.startDate, startDate: obj.startDate,
endDate:obj.endDate endDate: obj.endDate,
} }
postAction("/alarmLog/findPage", params).then(res => { postAction('/alarmLog/findPage', params).then((res) => {
this.loading = false this.loading = false
if (res.success) { if (res.success) {
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
this.dataSource = res.result.records this.dataSource = res.result.records
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
drawAlarmChart_bar() { drawAlarmChart_bar() {
this.alarmBar = echarts.init(document.getElementById("alarmChartBar")) this.alarmBar = echarts.init(document.getElementById('alarmChartBar'))
let options = { let options = {
grid: { grid: {
left: '12', left: '12',
right: '0%', right: '0%',
bottom: '15', bottom: '15',
top: "25", top: '25',
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: { axisTick: {
show:false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(119, 181, 213, 0.5)" color: 'rgba(119, 181, 213, 0.5)',
} },
}, },
axisLabel: { axisLabel: {
color: "rgba(173, 230, 238, 1)" color: 'rgba(173, 230, 238, 1)',
}, },
data: this.xData data: this.xData,
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(119, 181, 213, 0.5)" color: 'rgba(119, 181, 213, 0.5)',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(119, 181, 213, 0.2)" color: 'rgba(119, 181, 213, 0.2)',
} },
}, },
axisLabel: { axisLabel: {
color: "rgba(173, 230, 238, 1)" color: 'rgba(173, 230, 238, 1)',
}, },
}, },
series: [ series: [
@ -236,25 +244,25 @@ export default {
type: 'bar', type: 'bar',
barMaxWidth: 30, barMaxWidth: 30,
itemStyle: { itemStyle: {
color: "#b87b1b" color: '#b87b1b',
}, },
label: { label: {
formatter: (params) => { formatter: (params) => {
return params.value>0?params.value:"" return params.value > 0 ? params.value : ''
}, },
show: true, show: true,
position: "top", position: 'top',
color: "#b87b1b", color: '#b87b1b',
fontFamily: "ArialMT" fontFamily: 'ArialMT',
}, },
data: this.yData, data: this.yData,
} },
] ],
} }
this.alarmBar.setOption(options) this.alarmBar.setOption(options)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
this.alarmBar.resize(); this.alarmBar.resize()
}); })
}, },
getTypeAlarmPie(obj) { getTypeAlarmPie(obj) {
let params = { let params = {
@ -263,13 +271,13 @@ export default {
// startDate:"2023-07-15", // startDate:"2023-07-15",
// endDate:"2023-07-21" // endDate:"2023-07-21"
} }
postAction("/alarmLog/typeAlarms", params).then(res => { postAction('/alarmLog/typeAlarms', params).then((res) => {
if (res.success) { if (res.success) {
this.pieData = res.result.pieData this.pieData = res.result.pieData
this.pieTotal = res.result.pieTotal this.pieTotal = res.result.pieTotal
this.drawAlarmChart_pie() this.drawAlarmChart_pie()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
@ -284,8 +292,8 @@ export default {
this.getAlarmLogTable(this.paramsArg) this.getAlarmLogTable(this.paramsArg)
}, },
handleTabChange(key) { handleTabChange(key) {
console.log(key); console.log(key)
if (key == "alarmAnalysis") { if (key == 'alarmAnalysis') {
this.$nextTick(() => { this.$nextTick(() => {
this.drawAlarmChart_pie() this.drawAlarmChart_pie()
this.drawAlarmChart_top() this.drawAlarmChart_top()
@ -293,33 +301,33 @@ export default {
} }
}, },
drawAlarmChart_pie() { drawAlarmChart_pie() {
this.alarmPie = echarts.init(document.getElementById("chartLeft")) this.alarmPie = echarts.init(document.getElementById('chartLeft'))
let options = { let options = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
}, },
graphic: [ graphic: [
{ {
type: "text", type: 'text',
left: "center", left: 'center',
top: "40%", top: '40%',
style: { style: {
text: this.pieTotal, text: this.pieTotal,
textAlign: "center", textAlign: 'center',
fill: "#ffffff", fill: '#ffffff',
font: '32px "MicrogrammaD-MediExte"' font: '32px "MicrogrammaD-MediExte"',
} },
}, },
{ {
type: "text", type: 'text',
left: "center", left: 'center',
top: "50%", top: '50%',
style: { style: {
text: "Alarm Total", text: 'Alarm Total',
textAlign: "center", textAlign: 'center',
fill: "#ade6ee", fill: '#ade6ee',
font: '24px "ArialMT"' font: '24px "ArialMT"',
} },
}, },
], ],
series: [ series: [
@ -329,17 +337,17 @@ export default {
radius: ['40%', '60%'], radius: ['40%', '60%'],
data: this.pieData.map((item, index) => { data: this.pieData.map((item, index) => {
item.label = { item.label = {
color: this.pieColors[index] color: this.pieColors[index],
} }
return item; return item
}), }),
itemStyle: { itemStyle: {
borderColor: '#02282b', borderColor: '#02282b',
borderWidth: 5, borderWidth: 5,
color: (params) => { color: (params) => {
var index = params.dataIndex; var index = params.dataIndex
return this.pieColors[index]; return this.pieColors[index]
} },
}, },
label: { label: {
formatter: '{q|{b}}\n{q|{c}} {q|({d})%}', formatter: '{q|{b}}\n{q|{c}} {q|({d})%}',
@ -347,113 +355,113 @@ export default {
q: { q: {
fontSize: 16, fontSize: 16,
fontFamily: 'ArialMT', fontFamily: 'ArialMT',
lineHeight: 22 lineHeight: 22,
}, },
}
}, },
} },
] },
],
} }
this.alarmPie.setOption(options) this.alarmPie.setOption(options)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
this.alarmPie.resize(); this.alarmPie.resize()
}); })
}, },
getAlarmTop(obj) { getAlarmTop(obj) {
let params = { let params = {
startDate: obj.startDate, startDate: obj.startDate,
endDate: obj.endDate, endDate: obj.endDate,
type: obj.types type: obj.types,
} }
postAction("/alarmLog/ruleTop", params).then(res => { postAction('/alarmLog/ruleTop', params).then((res) => {
console.log(res); console.log(res)
if (res.success) { if (res.success) {
this.xData_top = res.result.yData this.xData_top = res.result.yData
this.yData_top = res.result.xData this.yData_top = res.result.xData
this.drawAlarmChart_top() this.drawAlarmChart_top()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
drawAlarmChart_top() { drawAlarmChart_top() {
this.alarmTop = echarts.init(document.getElementById("chartRight")) this.alarmTop = echarts.init(document.getElementById('chartRight'))
let options = { let options = {
grid: { grid: {
top:"3%", top: '3%',
left: '0%', left: '0%',
right: '30', right: '30',
bottom: '20', bottom: '20',
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
axisTick: { axisTick: {
show:false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(115, 191, 255, 0.5)" color: 'rgba(115, 191, 255, 0.5)',
} },
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
axisTick: { axisTick: {
show:false show: false,
}, },
axisLabel: { axisLabel: {
color: "#ade6ee", color: '#ade6ee',
fontFamily: "ArialMT" fontFamily: 'ArialMT',
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(115, 191, 255, 0.5)" color: 'rgba(115, 191, 255, 0.5)',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(115, 191, 255, 0.2)" color: 'rgba(115, 191, 255, 0.2)',
}
}, },
data: this.yData_top },
data: this.yData_top,
}, },
series: [ series: [
{ {
type: 'bar', type: 'bar',
barWidth: 30, barWidth: 30,
itemStyle: { itemStyle: {
color: "#80a23e" color: '#80a23e',
}, },
label: { label: {
show: true, show: true,
position: "right", position: 'right',
color: "#a7da44", color: '#a7da44',
fontFamily: "ArialMT" fontFamily: 'ArialMT',
}, },
data: this.xData_top, data: this.xData_top,
} },
] ],
} }
this.alarmTop.setOption(options) this.alarmTop.setOption(options)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
this.alarmTop.resize(); this.alarmTop.resize()
}); })
} },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "~@/assets/less/TabMenu.less"; @import '~@/assets/less/TabMenu.less';
.chart-layout { .chart-layout {
height: 230px; height: 230px;
margin-left: 20px; margin-left: 20px;

163
src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar> <SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
<div class="chart-layout" id="analysisChartBar"></div> <div class="chart-layout" id="analysisChartBar"></div>
<div class="chart-box"> <div class="chart-box">
@ -16,15 +16,16 @@
</template> </template>
<script> <script>
import moment from 'moment'
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import SearchBar from '../../components/searchBar'; import SearchBar from '../../components/searchBar'
import BoxTitle from '../../components/boxTitle.vue'; import BoxTitle from '../../components/boxTitle.vue'
import { getAction, postAction } from '@/api/manage' import { getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts' import * as echarts from 'echarts'
export default { export default {
components: { components: {
SearchBar, SearchBar,
BoxTitle BoxTitle,
}, },
data() { data() {
return { return {
@ -33,19 +34,21 @@ export default {
xData_left: [], xData_left: [],
yData_left: [], yData_left: [],
pieData: [], pieData: [],
pieColors:["#00bcd4","#14b2a3","#97b94b","#47b55d"], pieColors: ['#00bcd4', '#14b2a3', '#97b94b', '#47b55d'],
pieTotal: 0, pieTotal: 0,
} }
}, },
mounted() { mounted() {
this.handleSearch({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')}) let currentTime = moment()
let agoDays = moment().subtract(6, 'days')
this.handleSearch({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
}, },
methods: { methods: {
handleSearch({ startDate, endDate, types }) { handleSearch({ startDate, endDate, types }) {
this.paramsArg = { this.paramsArg = {
startDate, startDate,
endDate, endDate,
types types,
} }
this.getAnalysisLogBar({ startDate, endDate }) this.getAnalysisLogBar({ startDate, endDate })
this.getStationNum({ startDate, endDate }) this.getStationNum({ startDate, endDate })
@ -56,13 +59,13 @@ export default {
startDate: obj.startDate, startDate: obj.startDate,
endDate: obj.endDate, endDate: obj.endDate,
} }
getAction("/alarmAnalysisLog/byTime", params).then(res => { getAction('/alarmAnalysisLog/byTime', 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.drawAnalysis_bar() this.drawAnalysis_bar()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
@ -71,13 +74,13 @@ export default {
startDate: obj.startDate, startDate: obj.startDate,
endDate: obj.endDate, endDate: obj.endDate,
} }
getAction("/alarmAnalysisLog/byStatoin", params).then(res => { getAction('/alarmAnalysisLog/byStatoin', params).then((res) => {
if (res.success) { if (res.success) {
this.xData_left = res.result.xData this.xData_left = res.result.xData
this.yData_left = res.result.yData this.yData_left = res.result.yData
this.drawLeftChart() this.drawLeftChart()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
@ -86,60 +89,60 @@ export default {
startDate: obj.startDate, startDate: obj.startDate,
endDate: obj.endDate, endDate: obj.endDate,
} }
getAction("/alarmAnalysisLog/bySource", params).then(res => { getAction('/alarmAnalysisLog/bySource', params).then((res) => {
if (res.success) { if (res.success) {
this.pieData = res.result.pieData this.pieData = res.result.pieData
this.pieTotal = res.result.pieTotal this.pieTotal = res.result.pieTotal
this.drawRightChart() this.drawRightChart()
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}) })
}, },
drawAnalysis_bar() { drawAnalysis_bar() {
let myChart = echarts.init(document.getElementById("analysisChartBar")) let myChart = echarts.init(document.getElementById('analysisChartBar'))
let options = { let options = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
}, },
grid: { grid: {
left: '12', left: '12',
right: '0%', right: '0%',
bottom: '15', bottom: '15',
top: 15, top: 15,
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: { axisTick: {
show:false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(119, 181, 213, 0.5)" color: 'rgba(119, 181, 213, 0.5)',
} },
}, },
axisLabel: { axisLabel: {
color: "rgba(173, 230, 238, 1)" color: 'rgba(173, 230, 238, 1)',
}, },
data: this.xData data: this.xData,
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(119, 181, 213, 0.5)" color: 'rgba(119, 181, 213, 0.5)',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(119, 181, 213, 0.2)" color: 'rgba(119, 181, 213, 0.2)',
} },
}, },
axisLabel: { axisLabel: {
color: "rgba(173, 230, 238, 1)" color: 'rgba(173, 230, 238, 1)',
}, },
}, },
series: [ series: [
@ -147,61 +150,61 @@ export default {
type: 'bar', type: 'bar',
barMaxWidth: 30, barMaxWidth: 30,
itemStyle: { itemStyle: {
color: "#b87b1b" color: '#b87b1b',
}, },
data: this.yData, data: this.yData,
} },
] ],
} }
myChart.setOption(options) myChart.setOption(options)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize()
}); })
}, },
drawLeftChart() { drawLeftChart() {
let myChart = echarts.init(document.getElementById("chartLeft")) let myChart = echarts.init(document.getElementById('chartLeft'))
let options = { let options = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
}, },
grid: { grid: {
left: '12', left: '12',
right: '0%', right: '0%',
bottom: '15', bottom: '15',
top: 15, top: 15,
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: { axisTick: {
show:false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(119, 181, 213, 0.5)" color: 'rgba(119, 181, 213, 0.5)',
} },
}, },
axisLabel: { axisLabel: {
color: "rgba(173, 230, 238, 1)" color: 'rgba(173, 230, 238, 1)',
}, },
data: this.xData_left data: this.xData_left,
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(119, 181, 213, 0.5)" color: 'rgba(119, 181, 213, 0.5)',
} },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(119, 181, 213, 0.2)" color: 'rgba(119, 181, 213, 0.2)',
} },
}, },
axisLabel: { axisLabel: {
color: "rgba(173, 230, 238, 1)" color: 'rgba(173, 230, 238, 1)',
}, },
}, },
series: [ series: [
@ -209,45 +212,45 @@ export default {
type: 'bar', type: 'bar',
barMaxWidth: 30, barMaxWidth: 30,
itemStyle: { itemStyle: {
color: "#2e83cc" color: '#2e83cc',
}, },
data: this.yData_left, data: this.yData_left,
} },
] ],
} }
myChart.setOption(options) myChart.setOption(options)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize()
}); })
}, },
drawRightChart() { drawRightChart() {
let myChart = echarts.init(document.getElementById("chartRight")) let myChart = echarts.init(document.getElementById('chartRight'))
let options = { let options = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
}, },
graphic: [ graphic: [
{ {
type: "text", type: 'text',
left: "center", left: 'center',
top: "40%", top: '40%',
style: { style: {
text: this.pieTotal, text: this.pieTotal,
textAlign: "center", textAlign: 'center',
fill: "#ffffff", fill: '#ffffff',
font: '32px "MicrogrammaD-MediExte"' font: '32px "MicrogrammaD-MediExte"',
} },
}, },
{ {
type: "text", type: 'text',
left: "center", left: 'center',
top: "50%", top: '50%',
style: { style: {
text: "Alarm Total", text: 'Alarm Total',
textAlign: "center", textAlign: 'center',
fill: "#ade6ee", fill: '#ade6ee',
font: '22px "ArialMT"' font: '22px "ArialMT"',
} },
}, },
], ],
series: [ series: [
@ -257,17 +260,17 @@ export default {
radius: ['50%', '75%'], radius: ['50%', '75%'],
data: this.pieData.map((item, index) => { data: this.pieData.map((item, index) => {
item.label = { item.label = {
color: this.pieColors[index] color: this.pieColors[index],
} }
return item; return item
}), }),
itemStyle: { itemStyle: {
borderColor: '#02282b', borderColor: '#02282b',
borderWidth: 5, borderWidth: 5,
color: (params) => { color: (params) => {
var index = params.dataIndex; var index = params.dataIndex
return this.pieColors[index]; return this.pieColors[index]
} },
}, },
label: { label: {
formatter: '{q|{b}}\n{q|{c}} {q|({d})%}', formatter: '{q|{b}}\n{q|{c}} {q|({d})%}',
@ -275,17 +278,17 @@ export default {
q: { q: {
fontSize: 16, fontSize: 16,
fontFamily: 'ArialMT', fontFamily: 'ArialMT',
lineHeight: 22 lineHeight: 22,
}, },
}
}, },
} },
] },
],
} }
myChart.setOption(options) myChart.setOption(options)
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize()
}); })
}, },
}, },
} }

9
src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
View File

@ -203,6 +203,7 @@
</template> </template>
<script> <script>
import moment from 'moment'
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import SearchBar from '../../components/searchBar' import SearchBar from '../../components/searchBar'
import TableList from '../../components/tableList.vue' import TableList from '../../components/tableList.vue'
@ -311,10 +312,18 @@ export default {
} }
}, },
mounted() { mounted() {
this.getBeforeDate(6)
this.getStationList() this.getStationList()
this.getPageData() this.getPageData()
}, },
methods: { methods: {
// 获取n天前的日期
getBeforeDate(n) {
let currentTime = moment()
let agoDays = moment().subtract(n, 'days')
this.paramsArg.startDate = agoDays.format('YYYY-MM-DD')
this.paramsArg.endDate = currentTime.format('YYYY-MM-DD')
},
handleHoverChange(visible, row) { handleHoverChange(visible, row) {
row.popClicked = false row.popClicked = false
row.popHovered = visible row.popHovered = visible

2
src/views/abnormalAlarm/analysisMonitor/avgNuclide/index.vue
View File

@ -151,7 +151,7 @@ export default {
} }
}, },
created() { created() {
this.queryParams.startDate = this.getBeforeDate(1) this.queryParams.startDate = this.getBeforeDate(6)
}, },
mounted() { mounted() {
this.getNuclideAvgList() this.getNuclideAvgList()

2
src/views/abnormalAlarm/components/searchBar.vue
View File

@ -117,7 +117,7 @@
<a-form-model-item label="Alarm date"> <a-form-model-item label="Alarm date">
<a-range-picker <a-range-picker
dropdownClassName="asd" dropdownClassName="asd"
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]" :default-value="[moment(queryParams.startDate).subtract(6, 'days'), moment(queryParams.endDate)]"
@change="onRangeDateChange" @change="onRangeDateChange"
/> />
</a-form-model-item> </a-form-model-item>

63
src/views/abnormalAlarm/databaseMonitor/alarmHistory/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<SearchBar type="DbMonitor" :options="nameOptions" @search="handleSearch"></SearchBar> <SearchBar type="DbMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
<div class="server-main"> <div class="server-main">
<TableList <TableList
@ -13,7 +13,10 @@
> >
<template slot="info" slot-scope="{ record }"> <template slot="info" slot-scope="{ record }">
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div> <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div> <div>
{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }}
{{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}
</div>
</template> </template>
</TableList> </TableList>
<a-pagination <a-pagination
@ -24,7 +27,10 @@
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
(total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
@ -34,33 +40,36 @@
</template> </template>
<script> <script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import moment from 'moment'
import SearchBar from '../../components/searchBar'; import SearchBar from '../../components/searchBar'
import TableList from '../../components/tableList.vue'; import TableList from '../../components/tableList.vue'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [{ const columns = [
{
title: 'NAME', title: 'NAME',
align: 'center', align: 'center',
dataIndex: 'name', dataIndex: 'name',
width: 250, width: 250,
},{ },
{
title: 'ALARM START DATE', title: 'ALARM START DATE',
align: 'center', align: 'center',
dataIndex: 'alarmStartDate', dataIndex: 'alarmStartDate',
width: 300, width: 300,
},{ },
{
title: 'ALARM INFO', title: 'ALARM INFO',
align: 'left', align: 'left',
dataIndex: 'alarmInfo', dataIndex: 'alarmInfo',
scopedSlots: { scopedSlots: {
customRender: 'info', customRender: 'info',
} },
} },
] ]
export default { export default {
components: { components: {
SearchBar, SearchBar,
TableList TableList,
}, },
data() { data() {
return { return {
@ -75,30 +84,32 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
nameOptions: [], nameOptions: [],
dataSource: [], dataSource: [],
loading: false, loading: false,
paramsArg: {} paramsArg: {},
} }
}, },
mounted() { mounted() {
this.getDbList(); let currentTime = moment()
this.getDbAlarmHistory({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')}) let agoDays = moment().subtract(6, 'days')
this.getDbList()
this.getDbAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
}, },
methods: { methods: {
getDbList() { getDbList() {
getAction("/sysDatabase/sourceList").then(res => { getAction('/sysDatabase/sourceList').then((res) => {
if (res.success) { if (res.success) {
this.nameOptions = res.result.map(item => { this.nameOptions = 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')
} }
}) })
}, },
@ -107,7 +118,7 @@ export default {
this.paramsArg = { this.paramsArg = {
startDate, startDate,
endDate, endDate,
names names,
} }
this.getDbAlarmHistory({ startDate, endDate, names }) this.getDbAlarmHistory({ startDate, endDate, names })
}, },
@ -120,17 +131,19 @@ export default {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize, pageSize: this.ipagination.pageSize,
} }
getAction("/sysDatabase/findAlarmHistory", params).then(res => { getAction('/sysDatabase/findAlarmHistory', params)
.then((res) => {
this.loading = false this.loading = false
if (res.success) { if (res.success) {
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
this.dataSource = res.result.records this.dataSource = res.result.records
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}).catch(err => { })
.catch((err) => {
this.loading = false this.loading = false
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
}) })
}, },
handlePageChange(page, pageSize) { handlePageChange(page, pageSize) {

63
src/views/abnormalAlarm/emailMonitor/alarmHistory/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<SearchBar type="emailMonitor" :options="nameOptions" @search="handleSearch"></SearchBar> <SearchBar type="emailMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
<div class="server-main"> <div class="server-main">
<TableList <TableList
@ -13,7 +13,10 @@
> >
<template slot="info" slot-scope="{ record }"> <template slot="info" slot-scope="{ record }">
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div> <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div> <div>
{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }}
{{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}
</div>
</template> </template>
</TableList> </TableList>
<a-pagination <a-pagination
@ -24,7 +27,10 @@
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
(total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
@ -34,33 +40,36 @@
</template> </template>
<script> <script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import moment from 'moment'
import SearchBar from '../../components/searchBar'; import SearchBar from '../../components/searchBar'
import TableList from '../../components/tableList.vue'; import TableList from '../../components/tableList.vue'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [{ const columns = [
{
title: 'NAME', title: 'NAME',
align: 'center', align: 'center',
dataIndex: 'name', dataIndex: 'name',
width: 250, width: 250,
},{ },
{
title: 'ALARM START DATE', title: 'ALARM START DATE',
align: 'center', align: 'center',
dataIndex: 'alarmStartDate', dataIndex: 'alarmStartDate',
width: 300, width: 300,
},{ },
{
title: 'ALARM INFO', title: 'ALARM INFO',
align: 'left', align: 'left',
dataIndex: 'alarmInfo', dataIndex: 'alarmInfo',
scopedSlots: { scopedSlots: {
customRender: 'info', customRender: 'info',
} },
} },
] ]
export default { export default {
components: { components: {
SearchBar, SearchBar,
TableList TableList,
}, },
data() { data() {
return { return {
@ -75,30 +84,32 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
nameOptions: [], nameOptions: [],
dataSource: [], dataSource: [],
loading: false, loading: false,
paramsArg: {} paramsArg: {},
} }
}, },
mounted() { mounted() {
this.getEmailList(); let currentTime = moment()
this.getEmailAlarmHistory({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')}) let agoDays = moment().subtract(6, 'days')
this.getEmailList()
this.getEmailAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
}, },
methods: { methods: {
getEmailList() { getEmailList() {
getAction("/sysEmail/sourceList").then(res => { getAction('/sysEmail/sourceList').then((res) => {
if (res.success) { if (res.success) {
this.nameOptions = res.result.map(item => { this.nameOptions = 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')
} }
}) })
}, },
@ -107,7 +118,7 @@ export default {
this.paramsArg = { this.paramsArg = {
startDate, startDate,
endDate, endDate,
names names,
} }
this.getEmailAlarmHistory({ startDate, endDate, names }) this.getEmailAlarmHistory({ startDate, endDate, names })
}, },
@ -120,17 +131,19 @@ export default {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize, pageSize: this.ipagination.pageSize,
} }
getAction("/sysEmail/findAlarmHistory", params).then(res => { getAction('/sysEmail/findAlarmHistory', params)
.then((res) => {
this.loading = false this.loading = false
if (res.success) { if (res.success) {
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
this.dataSource = res.result.records this.dataSource = res.result.records
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}).catch(err => { })
.catch((err) => {
this.loading = false this.loading = false
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
}) })
}, },
handlePageChange(page, pageSize) { handlePageChange(page, pageSize) {

63
src/views/abnormalAlarm/serverMonitor/alarmHistory/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<SearchBar type="serverMonitor" :options="nameOptions" @search="handleSearch"></SearchBar> <SearchBar type="serverMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
<div class="server-main"> <div class="server-main">
<TableList <TableList
@ -13,7 +13,10 @@
> >
<template slot="info" slot-scope="{ record }"> <template slot="info" slot-scope="{ record }">
<div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div> <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
<div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div> <div>
{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }}
{{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}
</div>
</template> </template>
</TableList> </TableList>
<a-pagination <a-pagination
@ -24,7 +27,10 @@
show-size-changer show-size-changer
show-quick-jumper show-quick-jumper
:total="ipagination.total" :total="ipagination.total"
:show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`" :show-total="
(total, range) =>
`Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
"
show-less-items show-less-items
@change="handlePageChange" @change="handlePageChange"
@showSizeChange="handleSizeChange" @showSizeChange="handleSizeChange"
@ -34,33 +40,36 @@
</template> </template>
<script> <script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date' import moment from 'moment'
import SearchBar from '../../components/searchBar'; import SearchBar from '../../components/searchBar'
import TableList from '../../components/tableList.vue'; import TableList from '../../components/tableList.vue'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage' import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
const columns = [{ const columns = [
{
title: 'NAME', title: 'NAME',
align: 'center', align: 'center',
dataIndex: 'name', dataIndex: 'name',
width: 250, width: 250,
},{ },
{
title: 'ALARM START DATE', title: 'ALARM START DATE',
align: 'center', align: 'center',
dataIndex: 'alarmStartDate', dataIndex: 'alarmStartDate',
width: 300, width: 300,
},{ },
{
title: 'ALARM INFO', title: 'ALARM INFO',
align: 'left', align: 'left',
dataIndex: 'alarmInfo', dataIndex: 'alarmInfo',
scopedSlots: { scopedSlots: {
customRender: 'info', customRender: 'info',
} },
} },
] ]
export default { export default {
components: { components: {
SearchBar, SearchBar,
TableList TableList,
}, },
data() { data() {
return { return {
@ -75,30 +84,32 @@ export default {
}, },
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
total: 0 total: 0,
}, },
nameOptions: [], nameOptions: [],
dataSource: [], dataSource: [],
loading: false, loading: false,
paramsArg: {} paramsArg: {},
} }
}, },
mounted() { mounted() {
this.getServerList(); let currentTime = moment()
this.getServerAlarmHistory({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')}) let agoDays = moment().subtract(6, 'days')
this.getServerList()
this.getServerAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
}, },
methods: { methods: {
getServerList() { getServerList() {
getAction("/sysServer/sourceList").then(res => { getAction('/sysServer/sourceList').then((res) => {
if (res.success) { if (res.success) {
this.nameOptions = res.result.map(item => { this.nameOptions = 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')
} }
}) })
}, },
@ -107,7 +118,7 @@ export default {
this.paramsArg = { this.paramsArg = {
startDate, startDate,
endDate, endDate,
names names,
} }
this.getServerAlarmHistory({ startDate, endDate, names }) this.getServerAlarmHistory({ startDate, endDate, names })
}, },
@ -120,17 +131,19 @@ export default {
pageNo: this.ipagination.current, pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize, pageSize: this.ipagination.pageSize,
} }
getAction("/sysServer/findAlarmHistory", params).then(res => { getAction('/sysServer/findAlarmHistory', params)
.then((res) => {
this.loading = false this.loading = false
if (res.success) { if (res.success) {
this.ipagination.total = res.result.total this.ipagination.total = res.result.total
this.dataSource = res.result.records this.dataSource = res.result.records
} else { } else {
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
} }
}).catch(err => { })
.catch((err) => {
this.loading = false this.loading = false
this.$message.warning("This operation fails. Contact your system administrator") this.$message.warning('This operation fails. Contact your system administrator')
}) })
}, },
handlePageChange(page, pageSize) { handlePageChange(page, pageSize) {