Merge branch 'master-dev' into feature-Beta-dev-renpy
# Conflicts: # src/views/stationOperation/components/MapMarker.vue # src/views/stationOperation/components/MapPane.vue # src/views/stationOperation/index.vue
This commit is contained in:
commit
a1ba381170
|
|
@ -28,6 +28,23 @@ export function postAction(url, parameter) {
|
|||
headers: signHeader
|
||||
})
|
||||
}
|
||||
|
||||
//post
|
||||
export function postActionWithTimeOut(url, parameter, timeout) {
|
||||
let sign = signMd5Utils.getSign(url, parameter);
|
||||
//将签名和时间戳，添加在请求接口 Header
|
||||
// update-begin--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
|
||||
let signHeader = { "X-Sign": sign, "X-TIMESTAMP": signMd5Utils.getTimestamp() };
|
||||
// update-end--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
|
||||
|
||||
return axios({
|
||||
url: url,
|
||||
method: 'post',
|
||||
data: parameter,
|
||||
headers: signHeader,
|
||||
timeout
|
||||
})
|
||||
}
|
||||
export function postFileAction(url, parameter) {
|
||||
let sign = signMd5Utils.getSign(url, parameter);
|
||||
//将签名和时间戳，添加在请求接口 Header
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export const zipFile = async (fileList, zipName) => {
|
|||
result.forEach(res => {
|
||||
zip.file(res.fileName, res.data)
|
||||
})
|
||||
const content = await zip.generateAsync({ type: 'blob' })
|
||||
const content = await zip.generateAsync({ type: 'blob', compression: 'DEFLATE' })
|
||||
return new File([content], zipName, { type: content.type })
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
<template>
|
||||
<div style="height: 100%">
|
||||
<SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
|
||||
<div class="chart-layout" id="analysisChartBar"></div>
|
||||
<div class="chart-box">
|
||||
<div class="chart-box-left">
|
||||
<BoxTitle title="Station Alarm number"></BoxTitle>
|
||||
<div class="chart-box-left-bar" id="chartLeft"></div>
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="chart-layout" id="analysisChartBar"></div>
|
||||
<div class="chart-box">
|
||||
<div class="chart-box-left">
|
||||
<BoxTitle title="Station Alarm number"></BoxTitle>
|
||||
<div class="chart-box-left-bar" id="chartLeft"></div>
|
||||
</div>
|
||||
<div class="chart-box-right">
|
||||
<BoxTitle title="Anaysis Sources Alarms"></BoxTitle>
|
||||
<div class="chart-box-right-pie" id="chartRight"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-box-right">
|
||||
<BoxTitle title="Anaysis Sources Alarms"></BoxTitle>
|
||||
<div class="chart-box-right-pie" id="chartRight"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,6 +31,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
xData: [],
|
||||
yData: [],
|
||||
xData_left: [],
|
||||
|
|
@ -50,6 +53,7 @@ export default {
|
|||
endDate,
|
||||
types,
|
||||
}
|
||||
this.spinning = true
|
||||
this.getAnalysisLogBar({ startDate, endDate })
|
||||
this.getStationNum({ startDate, endDate })
|
||||
this.getAnalysisSource({ startDate, endDate })
|
||||
|
|
@ -59,45 +63,60 @@ export default {
|
|||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
}
|
||||
getAction('/alarmAnalysisLog/byTime', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.xData = res.result.xData
|
||||
this.yData = res.result.yData
|
||||
this.drawAnalysis_bar()
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
getAction('/alarmAnalysisLog/byTime', params)
|
||||
.then((res) => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
this.xData = res.result.xData
|
||||
this.yData = res.result.yData
|
||||
this.drawAnalysis_bar()
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.spinning = false
|
||||
})
|
||||
},
|
||||
getStationNum(obj) {
|
||||
let params = {
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
}
|
||||
getAction('/alarmAnalysisLog/byStatoin', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.xData_left = res.result.xData
|
||||
this.yData_left = res.result.yData
|
||||
this.drawLeftChart()
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
getAction('/alarmAnalysisLog/byStatoin', params)
|
||||
.then((res) => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
this.xData_left = res.result.xData
|
||||
this.yData_left = res.result.yData
|
||||
this.drawLeftChart()
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.spinning = false
|
||||
})
|
||||
},
|
||||
getAnalysisSource(obj) {
|
||||
let params = {
|
||||
startDate: obj.startDate,
|
||||
endDate: obj.endDate,
|
||||
}
|
||||
getAction('/alarmAnalysisLog/bySource', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.pieData = res.result.pieData
|
||||
this.pieTotal = res.result.pieTotal
|
||||
this.drawRightChart()
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
getAction('/alarmAnalysisLog/bySource', params)
|
||||
.then((res) => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
this.pieData = res.result.pieData
|
||||
this.pieTotal = res.result.pieTotal
|
||||
this.drawRightChart()
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.spinning = false
|
||||
})
|
||||
},
|
||||
drawAnalysis_bar() {
|
||||
let myChart = echarts.init(document.getElementById('analysisChartBar'))
|
||||
|
|
|
|||
|
|
@ -2,21 +2,23 @@
|
|||
<div style="height: 100%">
|
||||
<ConditionBox :value="queryParams" @change="getData" @refresh="getData"></ConditionBox>
|
||||
<div class="monitor-content">
|
||||
<a-row :gutter="10" style="height: 100%">
|
||||
<a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i">
|
||||
<div class="monitor-content-item">
|
||||
<AreaChart
|
||||
:title="el.title"
|
||||
:layout="`area${i}`"
|
||||
:color="el.color"
|
||||
:dataSource="el.list"
|
||||
:newUnits="el.newUnits"
|
||||
:units="el.units"
|
||||
>
|
||||
</AreaChart>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-spin :spinning="spinning">
|
||||
<a-row :gutter="10" style="height: 100%">
|
||||
<a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i">
|
||||
<div class="monitor-content-item">
|
||||
<AreaChart
|
||||
:title="el.title"
|
||||
:layout="`area${i}`"
|
||||
:color="el.color"
|
||||
:dataSource="el.list"
|
||||
:newUnits="el.newUnits"
|
||||
:units="el.units"
|
||||
>
|
||||
</AreaChart>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
<!-- <div style="height: auto; margin-top: 15px; padding-right: 10px">
|
||||
<BoxTitle title="Connect List"></BoxTitle>
|
||||
<a-row :gutter="20" style="height: auto; margin-top: 15px">
|
||||
|
|
@ -60,6 +62,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
queryParams: {
|
||||
hostId: '',
|
||||
start: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||
|
|
@ -360,7 +363,8 @@ export default {
|
|||
methods: {
|
||||
// 获取数据
|
||||
async getData() {
|
||||
const hide = this.$message.loading('loading...', 0)
|
||||
// const hide = this.$message.loading('loading...', 0)
|
||||
this.spinning = true
|
||||
try {
|
||||
const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
|
||||
if (success) {
|
||||
|
|
@ -383,8 +387,10 @@ export default {
|
|||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.spinning = false
|
||||
} finally {
|
||||
hide()
|
||||
// hide()
|
||||
this.spinning = false
|
||||
}
|
||||
},
|
||||
//生成图表（运管系统代码）
|
||||
|
|
@ -455,6 +461,14 @@ export default {
|
|||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/deep/.ant-spin-nested-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/deep/.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -193,11 +193,11 @@ const columns = [
|
|||
ellipsis: true,
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: 'SLOW QUERY',
|
||||
align: 'center',
|
||||
dataIndex: 'slowQuery',
|
||||
},
|
||||
// {
|
||||
// title: 'SLOW QUERY',
|
||||
// align: 'center',
|
||||
// dataIndex: 'slowQuery',
|
||||
// },
|
||||
{
|
||||
title: 'ALARMS',
|
||||
align: 'center',
|
||||
|
|
|
|||
|
|
@ -271,18 +271,18 @@ export default {
|
|||
},
|
||||
onEmailChange(val) {
|
||||
this.spinning = true
|
||||
this.guageStore.clear()
|
||||
if (this.guageStore) this.guageStore.clear()
|
||||
this.emailId = val
|
||||
},
|
||||
onDateChange(val) {
|
||||
this.spinning = true
|
||||
this.areaMailLine.clear()
|
||||
if (this.areaMailLine) this.areaMailLine.clear()
|
||||
this.startDate = this.getBeforeDate(val - 1)
|
||||
this.getEmailStatistics()
|
||||
},
|
||||
onRangeDateChange(date, dateString) {
|
||||
this.spinning = true
|
||||
this.areaMailLine.clear()
|
||||
if (this.areaMailLine) this.areaMailLine.clear()
|
||||
this.startDate = dateString[0]
|
||||
this.endDate = dateString[1]
|
||||
this.getEmailStatistics()
|
||||
|
|
@ -315,7 +315,7 @@ export default {
|
|||
s = s.substring(0, s.length - 1)
|
||||
res.result.usage = s
|
||||
this.emailSpace = res.result
|
||||
this.drawGuageStore()
|
||||
// this.drawGuageStore()
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,112 +49,114 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="cpu-content">
|
||||
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="CPU utilizatior">
|
||||
<template slot="right">
|
||||
<ul>
|
||||
<li><span>Avg:</span>{{ cpuUtilization.avg + cpuUtilization.units }}</li>
|
||||
<li><span>Min:</span>{{ cpuUtilization.min + cpuUtilization.units }}</li>
|
||||
<li><span>Max:</span>{{ cpuUtilization.max + cpuUtilization.units }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template slot="other">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('CPU utilizatior', option1)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-chart" id="chart1"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="Percentage of free system space">
|
||||
<template slot="right">
|
||||
<ul>
|
||||
<li><span>Avg:</span>{{ cpuIdleRate.avg + cpuIdleRate.units }}</li>
|
||||
<li><span>Min:</span>{{ cpuIdleRate.min + cpuIdleRate.units }}</li>
|
||||
<li><span>Max:</span>{{ cpuIdleRate.max + cpuIdleRate.units }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template slot="other">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('Percentage of free system space', option2)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-chart" id="chart2"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="Interrupt and episodic switching">
|
||||
<template slot="other">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('Interrupt and episodic switching', option3)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-info">
|
||||
<a-row style="height: 30px" type="flex">
|
||||
<a-col flex="170px">Processor interrupt(s)</a-col>
|
||||
<a-col flex="100px"
|
||||
>Avg:<span>{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Min:<span>{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Max:<span>{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }}</span></a-col
|
||||
>
|
||||
<a-col
|
||||
><div style="background: #00a8ff" class="li-icon"></div>
|
||||
<i>Processor interrupt</i></a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-row style="height: 30px" type="flex">
|
||||
<a-col flex="170px">Situational switching(s)</a-col>
|
||||
<a-col flex="100px"
|
||||
>Avg:<span>{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Min:<span>{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Max:<span>{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }}</span></a-col
|
||||
>
|
||||
<a-col
|
||||
><div style="background: #73b54b" class="li-icon"></div>
|
||||
<i>Situational switching(s)</i></a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-spin :spinning="spinning">
|
||||
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="CPU utilizatior">
|
||||
<template slot="right">
|
||||
<ul>
|
||||
<li><span>Avg:</span>{{ cpuUtilization.avg + cpuUtilization.units }}</li>
|
||||
<li><span>Min:</span>{{ cpuUtilization.min + cpuUtilization.units }}</li>
|
||||
<li><span>Max:</span>{{ cpuUtilization.max + cpuUtilization.units }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template slot="other">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('CPU utilizatior', option1)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-chart" id="chart1"></div>
|
||||
</div>
|
||||
<div class="cpu-content-item-chart3" id="chart3"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="CPU usage of diferent cores">
|
||||
<template slot="other">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('CPU usage of diferent cores', option4)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-chart" id="chart4"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="Percentage of free system space">
|
||||
<template slot="right">
|
||||
<ul>
|
||||
<li><span>Avg:</span>{{ cpuIdleRate.avg + cpuIdleRate.units }}</li>
|
||||
<li><span>Min:</span>{{ cpuIdleRate.min + cpuIdleRate.units }}</li>
|
||||
<li><span>Max:</span>{{ cpuIdleRate.max + cpuIdleRate.units }}</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template slot="other">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('Percentage of free system space', option2)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-chart" id="chart2"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="Interrupt and episodic switching">
|
||||
<template slot="other">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('Interrupt and episodic switching', option3)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-info">
|
||||
<a-row style="height: 30px" type="flex">
|
||||
<a-col flex="170px">Processor interrupt(s)</a-col>
|
||||
<a-col flex="100px"
|
||||
>Avg:<span>{{ multiLine.cpuInterrupt.avg + multiLine.cpuInterrupt.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Min:<span>{{ multiLine.cpuInterrupt.min + multiLine.cpuInterrupt.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Max:<span>{{ multiLine.cpuInterrupt.max + multiLine.cpuInterrupt.units }}</span></a-col
|
||||
>
|
||||
<a-col
|
||||
><div style="background: #00a8ff" class="li-icon"></div>
|
||||
<i>Processor interrupt</i></a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-row style="height: 30px" type="flex">
|
||||
<a-col flex="170px">Situational switching(s)</a-col>
|
||||
<a-col flex="100px"
|
||||
>Avg:<span>{{ multiLine.cpuSwitch.avg + multiLine.cpuSwitch.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Min:<span>{{ multiLine.cpuSwitch.min + multiLine.cpuSwitch.units }}</span></a-col
|
||||
>
|
||||
<a-col flex="100px"
|
||||
>Max:<span>{{ multiLine.cpuSwitch.max + multiLine.cpuSwitch.units }}</span></a-col
|
||||
>
|
||||
<a-col
|
||||
><div style="background: #73b54b" class="li-icon"></div>
|
||||
<i>Situational switching(s)</i></a-col
|
||||
>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="cpu-content-item-chart3" id="chart3"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: calc(50% + 10px)">
|
||||
<div class="cpu-content-item">
|
||||
<BoxTitle title="CPU usage of diferent cores">
|
||||
<template slot="other">
|
||||
<img
|
||||
src="@/assets/images/abnormalAlarm/big.png"
|
||||
@click="handelZoom('CPU usage of diferent cores', option4)"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="cpu-content-item-chart" id="chart4"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</div>
|
||||
<a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel">
|
||||
<div class="modal-content" id="common_cpu"></div>
|
||||
|
|
@ -176,7 +178,7 @@ import * as echarts from 'echarts'
|
|||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import BoxTitle from '../../components/boxTitle.vue'
|
||||
import CreateRules from './createRules.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
|
|
@ -184,6 +186,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
currId: '',
|
||||
visible_rule: false,
|
||||
currLabel: '',
|
||||
|
|
@ -251,58 +254,63 @@ export default {
|
|||
start: this.queryParams.startDate,
|
||||
end: this.queryParams.endDate,
|
||||
}
|
||||
getAction('/systemMonitor/queryHostDetails', params).then((res) => {
|
||||
const data = res.result
|
||||
//CPU utilizatior
|
||||
this.cpuUtilization = data.find((item) => item.name === 'cpuUtilization')
|
||||
this.cpuUtilization_xData = this.cpuUtilization.list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
this.cpuUtilization_data = this.cpuUtilization.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
//Percentage of free system space
|
||||
this.cpuIdleRate = data.find((item) => item.name === 'cpuIdleRate')
|
||||
this.cpuIdleRate_xData = this.cpuIdleRate.list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
this.cpuIdleRate_data = this.cpuIdleRate.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
// Interrupt and episodic switching
|
||||
;(this.multiLine.cpuInterrupt = data.find((item) => item.name === 'cpuInterrupt')),
|
||||
(this.multiLine.cpuSwitch = data.find((item) => item.name === 'cpuSwitch')),
|
||||
(this.multiLine_xData = this.multiLine.cpuInterrupt.list.map((item) => {
|
||||
this.spinning = true
|
||||
getAction('/systemMonitor/queryHostDetails', params)
|
||||
.then((res) => {
|
||||
const data = res.result
|
||||
//CPU utilizatior
|
||||
this.cpuUtilization = data.find((item) => item.name === 'cpuUtilization')
|
||||
this.cpuUtilization_xData = this.cpuUtilization.list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
}))
|
||||
this.cpuInterrupt_data = this.multiLine.cpuInterrupt.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
//总CPU使用率
|
||||
let totalCpu = []
|
||||
data.map((item) => {
|
||||
if (item.name.search('cpuUtilization_') != -1) {
|
||||
totalCpu.push(item)
|
||||
}
|
||||
})
|
||||
this.cpuDiff_xData = totalCpu[0].list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
this.cpuDiff_data = totalCpu.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.list.map((el) => Number(el.value.toFixed(2))),
|
||||
}
|
||||
})
|
||||
})
|
||||
this.cpuUtilization_data = this.cpuUtilization.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
//Percentage of free system space
|
||||
this.cpuIdleRate = data.find((item) => item.name === 'cpuIdleRate')
|
||||
this.cpuIdleRate_xData = this.cpuIdleRate.list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
this.cpuIdleRate_data = this.cpuIdleRate.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
// Interrupt and episodic switching
|
||||
;(this.multiLine.cpuInterrupt = data.find((item) => item.name === 'cpuInterrupt')),
|
||||
(this.multiLine.cpuSwitch = data.find((item) => item.name === 'cpuSwitch')),
|
||||
(this.multiLine_xData = this.multiLine.cpuInterrupt.list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
}))
|
||||
this.cpuInterrupt_data = this.multiLine.cpuInterrupt.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => {
|
||||
return Number(item.value.toFixed(2))
|
||||
})
|
||||
//总CPU使用率
|
||||
let totalCpu = []
|
||||
data.map((item) => {
|
||||
if (item.name.search('cpuUtilization_') != -1) {
|
||||
totalCpu.push(item)
|
||||
}
|
||||
})
|
||||
this.cpuDiff_xData = totalCpu[0].list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
this.cpuDiff_data = totalCpu.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.list.map((el) => Number(el.value.toFixed(2))),
|
||||
}
|
||||
})
|
||||
|
||||
this.drawChart1()
|
||||
this.drawChart2()
|
||||
this.drawChart3()
|
||||
this.drawChart4()
|
||||
})
|
||||
this.drawChart1()
|
||||
this.drawChart2()
|
||||
this.drawChart3()
|
||||
this.drawChart4()
|
||||
})
|
||||
.finally(() => {
|
||||
this.spinning = false
|
||||
})
|
||||
},
|
||||
getBeforeHours(num) {
|
||||
let currentTime = moment()
|
||||
|
|
@ -828,6 +836,14 @@ export default {
|
|||
height: calc(100% - 60px);
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
/deep/.ant-spin-nested-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/deep/.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,364 +1,360 @@
|
|||
<template>
|
||||
<div style="height: 100%">
|
||||
<div class="content-top">
|
||||
<div style="width: calc(100% - 562px)">
|
||||
<BoxTitle title="Basic lnformation"></BoxTitle>
|
||||
<div class="basic-info">
|
||||
<div
|
||||
class="basic-info-list"
|
||||
v-infinite-scroll="handleInfiniteOnLoad"
|
||||
:infinite-scroll-disabled="busy"
|
||||
:infinite-scroll-distance="5"
|
||||
>
|
||||
<a-list :dataSource="dataSource">
|
||||
<a-list-item
|
||||
:class="{ 'ant-list-item-active': index === currIndex }"
|
||||
slot="renderItem"
|
||||
slot-scope="item, index"
|
||||
@click="handleBasicItem(index, item)"
|
||||
>
|
||||
<div>{{ item.sourceName }}</div>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="content-top">
|
||||
<div style="width: calc(100% - 562px)">
|
||||
<BoxTitle title="Basic lnformation"></BoxTitle>
|
||||
<div class="basic-info">
|
||||
<div
|
||||
class="basic-info-list"
|
||||
v-infinite-scroll="handleInfiniteOnLoad"
|
||||
:infinite-scroll-disabled="busy"
|
||||
:infinite-scroll-distance="5"
|
||||
>
|
||||
<a-list :dataSource="dataSource">
|
||||
<a-list-item
|
||||
:class="{ 'ant-list-item-active': index === currIndex }"
|
||||
slot="renderItem"
|
||||
slot-scope="item, index"
|
||||
@click="handleBasicItem(index, item)"
|
||||
>
|
||||
<div>{{ item.sourceName }}</div>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
|
||||
<div v-if="loading && !busy" class="demo-loading-container">
|
||||
<a-spin />
|
||||
<div v-if="loading && !busy" class="demo-loading-container">
|
||||
<a-spin />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="basic-info-detail">
|
||||
<a-row :gutter="10" style="height: 40px">
|
||||
<a-col :span="6" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/running.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">running state</div>
|
||||
<div class="basic-info-detail">
|
||||
<a-row :gutter="10" style="height: 40px">
|
||||
<a-col :span="6" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/running.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num state">
|
||||
{{ `${detailInfo.runningState ? 'NORMAL' : 'ERROR'}` }}
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">running state</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num state">
|
||||
{{ `${detailInfo.runningState ? 'NORMAL' : 'ERROR'}` }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="5" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/alarm.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Alarm SMS</div>
|
||||
</a-col>
|
||||
<a-col :span="5" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/alarm.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmSms }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="6" style="height: 100%; padding-left: 12px">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/email.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Alarm email</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Alarm SMS</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmSms }}</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmEmail }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="7" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/warning.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Number of alarms</div>
|
||||
</a-col>
|
||||
<a-col :span="6" style="height: 100%; padding-left: 12px">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/email.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.alarms }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="10" style="height: 40px; margin-top: 10px">
|
||||
<a-col :span="6" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/times.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Run time</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Alarm email</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.alarmEmail }}</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.runTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="5" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/ram.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">RAM Size</div>
|
||||
</a-col>
|
||||
<a-col :span="7" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/warning.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.ramSize }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="6" style="height: 100%; padding-left: 12px">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/cpu.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">CPU Cores</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Number of alarms</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.alarms }}</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.cpuCores }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="7" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/partition.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Total Disk Partition</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="10" style="height: 40px; margin-top: 10px">
|
||||
<a-col :span="6" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/times.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Run time</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.runTime }}</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.totalDiskPar }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="basic-info-detail-content">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12">
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">Host Name:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.hostName }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
|
||||
<!-- <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
|
||||
</a-col>
|
||||
<a-col :span="5" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/ram.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">RAM Size</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.ramSize }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="6" style="height: 100%; padding-left: 12px">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/cpu.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">CPU Cores</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.cpuCores }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="7" style="height: 100%">
|
||||
<div class="basic-info-detail-col">
|
||||
<div class="basic-info-detail-col-img">
|
||||
<img src="~@/assets/images/abnormalAlarm/partition.png" alt="" />
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg">
|
||||
<div class="basic-info-detail-col-msg-title">
|
||||
<div class="circle"></div>
|
||||
<div class="title">Total Disk Partition</div>
|
||||
</div>
|
||||
<div class="basic-info-detail-col-msg-num">{{ detailInfo.totalDiskPar }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="basic-info-detail-content">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12">
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">Host Name:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.hostName }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
|
||||
<!-- <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osVersion }}</a-col> -->
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">IP Address:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.ip }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">Kernel version:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">2000</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">OS Name:</a-col>
|
||||
<a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
|
||||
{{ detailInfo.osName }}
|
||||
</a-col>
|
||||
<!-- <a-col :span="12" style="height: 26px">
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">IP Address:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.ip }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">Kernel version:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">2000</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">OS Name:</a-col>
|
||||
<a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
|
||||
{{ detailInfo.osName }}
|
||||
</a-col>
|
||||
<!-- <a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">OS Name:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osName }}</a-col>
|
||||
</a-row>
|
||||
</a-col> -->
|
||||
<!-- <a-col :span="12" style="height: 26px">
|
||||
<!-- <a-col :span="12" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
|
||||
<a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
|
||||
</a-row>
|
||||
</a-col> -->
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">CPU:</a-col>
|
||||
<a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
|
||||
{{ detailInfo.cpuType }}
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="6" style="height: 26px" class="basic-info-detail-content-key">Manufacturer:</a-col>
|
||||
<a-col :span="18" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>ASUSTeK COMPUTER INC.</a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="8" style="height: 26px" class="basic-info-detail-content-key"
|
||||
>Server Agent Path:</a-col
|
||||
>
|
||||
<a-col :span="16" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>C:\Agent\Default\Desktop</a-col
|
||||
>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="11" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="18" class="basic-info-detail-content-key">Network Lnterface:</a-col>
|
||||
<a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.network }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="13" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="15" class="basic-info-detail-content-key">Location:</a-col>
|
||||
<a-col :span="9" class="basic-info-detail-content-val">{{ detailInfo.location }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="11" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="18" class="basic-info-detail-content-key">Time Zone:</a-col>
|
||||
<a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.zone }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="13" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="15" class="basic-info-detail-content-key">Server Agent User:</a-col>
|
||||
<a-col :span="9" class="basic-info-detail-content-val">LocalSystem</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">OS Version:</a-col>
|
||||
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>2023-03-01 14:00:01</a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Start Time:</a-col>
|
||||
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val">
|
||||
{{ detailInfo.osVersion }}
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Model Number:</a-col>
|
||||
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>TUF GamingFX705GM_FX86SM</a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Bios Supplier:</a-col>
|
||||
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>American Megatrends lnc.</a-col
|
||||
>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">CPU:</a-col>
|
||||
<a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
|
||||
{{ detailInfo.cpuType }}
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="6" style="height: 26px" class="basic-info-detail-content-key">Manufacturer:</a-col>
|
||||
<a-col :span="18" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>ASUSTeK COMPUTER INC.</a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="8" style="height: 26px" class="basic-info-detail-content-key"
|
||||
>Server Agent Path:</a-col
|
||||
>
|
||||
<a-col :span="16" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>C:\Agent\Default\Desktop</a-col
|
||||
>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="11" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="18" class="basic-info-detail-content-key">Network Lnterface:</a-col>
|
||||
<a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.network }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="13" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="15" class="basic-info-detail-content-key">Location:</a-col>
|
||||
<a-col :span="9" class="basic-info-detail-content-val">{{ detailInfo.location }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="11" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="18" class="basic-info-detail-content-key">Time Zone:</a-col>
|
||||
<a-col :span="6" class="basic-info-detail-content-val">{{ detailInfo.zone }}</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :span="13" style="height: 26px">
|
||||
<a-row style="height: 100%">
|
||||
<a-col :span="15" class="basic-info-detail-content-key">Server Agent User:</a-col>
|
||||
<a-col :span="9" class="basic-info-detail-content-val">LocalSystem</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">OS Version:</a-col>
|
||||
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>2023-03-01 14:00:01</a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Start Time:</a-col>
|
||||
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val">
|
||||
{{ detailInfo.osVersion }}
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Model Number:</a-col>
|
||||
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>TUF GamingFX705GM_FX86SM</a-col
|
||||
>
|
||||
</a-row>
|
||||
<a-row style="height: 26px">
|
||||
<a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Bios Supplier:</a-col>
|
||||
<a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
|
||||
>American Megatrends lnc.</a-col
|
||||
>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarm-info" style="width: 542px">
|
||||
<BoxTitle title="Alarm information"></BoxTitle>
|
||||
<div
|
||||
class="alarm-info-list"
|
||||
v-infinite-scroll="handleInfiniteAlarmInfo"
|
||||
:infinite-scroll-disabled="busy_alarm_info"
|
||||
:infinite-scroll-distance="10"
|
||||
>
|
||||
<a-list :dataSource="dataSource_alarm_info">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
<img class="alarm-info-list-img" src="@/assets/images/abnormalAlarm/icon-r.png" alt="" />
|
||||
<div class="alarm-info-list-info" :title="item.alarmInfo">{{ item.alarmInfo }}</div>
|
||||
<div class="alarm-info-list-date">{{ item.alarmStartDate }}</div>
|
||||
<!-- <a slot="actions" class="alarm-info-list-actions">Detail</a> -->
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
<div v-if="loading_alarm_info && !busy" class="demo-loading-container">
|
||||
<a-spin />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarm-info" style="width: 542px">
|
||||
<BoxTitle title="Alarm information"></BoxTitle>
|
||||
<div
|
||||
class="alarm-info-list"
|
||||
v-infinite-scroll="handleInfiniteAlarmInfo"
|
||||
:infinite-scroll-disabled="busy_alarm_info"
|
||||
:infinite-scroll-distance="10"
|
||||
>
|
||||
<a-list :dataSource="dataSource_alarm_info">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
<img class="alarm-info-list-img" src="@/assets/images/abnormalAlarm/icon-r.png" alt="" />
|
||||
<div class="alarm-info-list-info" :title="item.alarmInfo">{{ item.alarmInfo }}</div>
|
||||
<div class="alarm-info-list-date">{{ item.alarmStartDate }}</div>
|
||||
<!-- <a slot="actions" class="alarm-info-list-actions">Detail</a> -->
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
<div v-if="loading_alarm_info && !busy" class="demo-loading-container">
|
||||
<a-spin />
|
||||
<div class="content-center">
|
||||
<BoxTitle title="Event Timelinen">
|
||||
<template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item, index) in types" :key="index">
|
||||
<div :style="`background:${item.color}`" class="li-icon"></div>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="line-bg"></div>
|
||||
<div class="time-line" id="timeLine"></div>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<div class="content-bottom-left">
|
||||
<div class="content-bottom-left-top">
|
||||
<a-row :gutter="20">
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<BoxTitle title="CPU"></BoxTitle>
|
||||
<div class="gauge-content" id="cpu"></div>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<BoxTitle title="MEMORY"></BoxTitle>
|
||||
<div class="gauge-content" id="memory"></div>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<BoxTitle title="RESPONSE"></BoxTitle>
|
||||
<div class="gauge-content" id="responseSuccessRate"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="content-bottom-left-bottom">
|
||||
<BoxTitle title="CPU utilization">
|
||||
<template slot="right">
|
||||
<div class="right-title">
|
||||
<div class="right-title-item">
|
||||
average value:<i>{{ cpuData.avg }}%</i>
|
||||
</div>
|
||||
<div class="right-title-item">
|
||||
minimum value:<i>{{ cpuData.min }}%</i>
|
||||
</div>
|
||||
<div class="right-title-item">
|
||||
Maximum value:<i>{{ cpuData.max }}%</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="area-cpu" id="areaCpu"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="Timeline">
|
||||
<p>事件时间线</p>
|
||||
<div>
|
||||
<div id="timeL" style="width: 100%; height: 140px"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="content-center">
|
||||
<BoxTitle title="Event Timelinen">
|
||||
<template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item, index) in types" :key="index">
|
||||
<div :style="`background:${item.color}`" class="li-icon"></div>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="line-bg"></div>
|
||||
<div class="time-line" id="timeLine"></div>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<div class="content-bottom-left">
|
||||
<div class="content-bottom-left-top">
|
||||
<a-row :gutter="20">
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<BoxTitle title="CPU"></BoxTitle>
|
||||
<div class="gauge-content" id="cpu"></div>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<BoxTitle title="MEMORY"></BoxTitle>
|
||||
<div class="gauge-content" id="memory"></div>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<BoxTitle title="RESPONSE"></BoxTitle>
|
||||
<div class="gauge-content" id="responseSuccessRate"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="content-bottom-left-bottom">
|
||||
<BoxTitle title="CPU utilization">
|
||||
<template slot="right">
|
||||
<div class="right-title">
|
||||
<div class="right-title-item">
|
||||
average value:<i>{{ cpuData.avg }}%</i>
|
||||
</div>
|
||||
<div class="right-title-item">
|
||||
minimum value:<i>{{ cpuData.min }}%</i>
|
||||
</div>
|
||||
<div class="right-title-item">
|
||||
Maximum value:<i>{{ cpuData.max }}%</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="area-cpu" id="areaCpu"></div>
|
||||
<div style="width: 542px">
|
||||
<BoxTitle title="DISK"></BoxTitle>
|
||||
<div class="bar-disk" id="disk"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 542px">
|
||||
<BoxTitle title="DISK"></BoxTitle>
|
||||
<div class="bar-disk" id="disk"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -417,6 +413,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
types,
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
|
|
@ -496,120 +493,12 @@ export default {
|
|||
// })
|
||||
},
|
||||
methods: {
|
||||
// Echarts (时间线)
|
||||
// EchartsTimeline() {
|
||||
// const params = {
|
||||
// itemId: '37550',
|
||||
// itemType: 0,
|
||||
// start: '2023-09-21 00:00:00',
|
||||
// end: '2023-09-21 18:54:00',
|
||||
// }
|
||||
// getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
|
||||
// let data = res.result
|
||||
// const percentage = 100 / data.length
|
||||
// let indexArr = [[0, 0]]
|
||||
// for (let i = 1; i < data.length; i++) {
|
||||
// const num = i + 1
|
||||
// if (i === data.length - 1) {
|
||||
// indexArr[0][1] = data.length
|
||||
// }
|
||||
// if (data[i - 1].value != data[i].value) {
|
||||
// indexArr[0][1] = i
|
||||
// indexArr.unshift([i, num])
|
||||
// }
|
||||
// }
|
||||
// let objArr = [],
|
||||
// echartData = []
|
||||
// indexArr.map((item) => {
|
||||
// objArr.push(data.slice(item[0], item[1]))
|
||||
// })
|
||||
// const statusConversion = (val) => {
|
||||
// if (val == 1) {
|
||||
// return '正常'
|
||||
// } else if (val == 2) {
|
||||
// return '警告'
|
||||
// } else {
|
||||
// return '离线'
|
||||
// }
|
||||
// }
|
||||
// objArr.map((item, index) => {
|
||||
// let obj = null
|
||||
// if (index === 0) {
|
||||
// const arr = objArr[index + 1]
|
||||
// let timeInterval
|
||||
// if (arr) {
|
||||
// timeInterval = [item[0].date, arr[arr.length - 1].date]
|
||||
// } else {
|
||||
// timeInterval = [item[0].date, item[item.length - 1].date]
|
||||
// }
|
||||
// obj = {
|
||||
// type: 'Cpu',
|
||||
// value: statusConversion(item[0].value),
|
||||
// valueInterval: [0, item.length * percentage],
|
||||
// timeInterval: timeInterval, // 时间区间
|
||||
// }
|
||||
// } else if (index === objArr.length - 1) {
|
||||
// const arr = echartData[echartData.length - 1]
|
||||
// obj = {
|
||||
// type: 'Cpu',
|
||||
// value: statusConversion(item[0].value),
|
||||
// valueInterval: [arr.valueInterval[1], 100],
|
||||
// timeInterval: [arr.timeInterval[1], item[0].date], // 时间区间
|
||||
// }
|
||||
// } else {
|
||||
// const arr = echartData[echartData.length - 1],
|
||||
// arr1 = objArr[index + 1],
|
||||
// num = arr.valueInterval[1],
|
||||
// length = item.length * percentage
|
||||
// obj = {
|
||||
// type: 'Cpu',
|
||||
// value: statusConversion(item[0].value),
|
||||
// valueInterval: [num, length + num],
|
||||
// timeInterval: [arr.timeInterval[1], arr1[arr1.length - 1].date], // 时间区间
|
||||
// }
|
||||
// }
|
||||
// echartData.push(obj)
|
||||
// })
|
||||
// if (this.barPlot) {
|
||||
// this.barPlot.changeData(echartData)
|
||||
// return
|
||||
// }
|
||||
// const timeDateHours = (val) => {
|
||||
// return moment(val).format('HH:mm')
|
||||
// }
|
||||
// this.barPlot = new Bar('timeL', {
|
||||
// data: echartData.reverse(),
|
||||
// xField: 'valueInterval',
|
||||
// yField: 'type',
|
||||
// isRange: true,
|
||||
// seriesField: 'value',
|
||||
// padding: 20,
|
||||
// yAxis: {
|
||||
// label: null,
|
||||
// },
|
||||
// xAxis: {
|
||||
// label: {
|
||||
// formatter: (params) => {
|
||||
// const percentage = params / 100,
|
||||
// index = parseInt((data.length - 1) * percentage)
|
||||
|
||||
// return timeDateHours(data[index].date)
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// legend: {
|
||||
// position: "top-left'",
|
||||
// },
|
||||
// tooltip: false,
|
||||
// })
|
||||
// this.barPlot.render()
|
||||
// })
|
||||
// },
|
||||
moment,
|
||||
// Basic lnformation
|
||||
getBasiclnfo(sourceId) {
|
||||
let params = { hostId: sourceId }
|
||||
getAction('/sysServer/detailsBasicInfo', params).then((res) => {
|
||||
this.spinning = false
|
||||
if (res.success) {
|
||||
this.detailInfo = res.result
|
||||
this.drawGuageCpu()
|
||||
|
|
@ -630,6 +519,7 @@ export default {
|
|||
end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
|
||||
}
|
||||
getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
|
||||
this.spinning = false
|
||||
const arr = res.result.map((x) => x.value)
|
||||
this.cpuData.max = Math.max(...arr).toFixed(2)
|
||||
this.cpuData.min = Math.min(...arr).toFixed(2)
|
||||
|
|
@ -654,6 +544,7 @@ export default {
|
|||
end: `${dateFormat(new Date(), 'yyyy-MM-dd')} 23:59:59`,
|
||||
}
|
||||
getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
|
||||
this.spinning = false
|
||||
let data = res.result
|
||||
startTime = data[0].clock * 1000
|
||||
let indexArr = [[0, 0]]
|
||||
|
|
@ -727,6 +618,7 @@ export default {
|
|||
}
|
||||
},
|
||||
handleBasicItem(i, item) {
|
||||
this.spinning = true
|
||||
this.currIndex = i
|
||||
this.currItemId = item.cpuUsedItemId
|
||||
this.currSourceId = item.sourceId
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div style="height: 100%;">
|
||||
<a-card :bordered="false" style="height:100%;margin-left: 20px;">
|
||||
<div style="height: 100%">
|
||||
<a-card :bordered="false" style="height: 100%; margin-left: 20px">
|
||||
<a-tabs default-active-key="detais" @change="handleTabChange">
|
||||
<a-tab-pane key="detais" tab="DETAILS">
|
||||
<Details></Details>
|
||||
|
|
@ -14,22 +14,22 @@
|
|||
<a-tab-pane key="cpu" tab="CPU">
|
||||
<Cpu></Cpu>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="memory" tab="MEMORY">
|
||||
<!-- <a-tab-pane key="memory" tab="MEMORY">
|
||||
MEMORY
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="disk" tab="DISK">
|
||||
DISK
|
||||
</a-tab-pane>
|
||||
</a-tab-pane> -->
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Details from './details.vue';
|
||||
import ServiceProcess from './serviceProcess.vue';
|
||||
import Monitor from './monitor.vue';
|
||||
import Cpu from './cpu.vue';
|
||||
import Details from './details.vue'
|
||||
import ServiceProcess from './serviceProcess.vue'
|
||||
import Monitor from './monitor.vue'
|
||||
import Cpu from './cpu.vue'
|
||||
export default {
|
||||
components: {
|
||||
Details,
|
||||
|
|
@ -39,13 +39,12 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleTabChange(key) {
|
||||
console.log(key);
|
||||
console.log(key)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/assets/less/TabMenu.less";
|
||||
|
||||
@import '~@/assets/less/TabMenu.less';
|
||||
</style>
|
||||
|
|
@ -49,22 +49,24 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="monitor-content">
|
||||
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||
<a-col v-for="(item, index) in chartDatas" :key="item.title" :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
:title="item.title"
|
||||
:layout="'line' + index"
|
||||
:xData="item.xData"
|
||||
:dataSource="item.data"
|
||||
:newUnits="item.newUnits"
|
||||
:units="item.units"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-spin :spinning="spinning">
|
||||
<a-row :gutter="[20, 15]" style="height: 100%">
|
||||
<a-col v-for="(item, index) in chartDatas" :key="item.title" :span="8" style="height: 34%">
|
||||
<div class="monitor-content-item">
|
||||
<LineChart
|
||||
:title="item.title"
|
||||
:layout="'line' + index"
|
||||
:xData="item.xData"
|
||||
:dataSource="item.data"
|
||||
:newUnits="item.newUnits"
|
||||
:units="item.units"
|
||||
@zoom="handelZoom"
|
||||
>
|
||||
</LineChart>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</div>
|
||||
<a-modal :title="modalTitle" :width="1200" v-model="visible" :maskClosable="false" @cancel="onCancel">
|
||||
<div class="modal-content" id="common"></div>
|
||||
|
|
@ -85,7 +87,7 @@ import moment from 'moment'
|
|||
import * as echarts from 'echarts'
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import BoxTitle from '../../components/boxTitle.vue'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
import LineChart from './lineChart.vue'
|
||||
import CreateRules from './createRules.vue'
|
||||
export default {
|
||||
|
|
@ -94,19 +96,19 @@ export default {
|
|||
LineChart,
|
||||
CreateRules,
|
||||
},
|
||||
computed:{
|
||||
unitConversion(){
|
||||
return function(number,units){
|
||||
if( units === 'Kb') {
|
||||
number = number *1024
|
||||
computed: {
|
||||
unitConversion() {
|
||||
return function (number, units) {
|
||||
if (units === 'Kb') {
|
||||
number = number * 1024
|
||||
}
|
||||
if (number < 1024 ) return "B"
|
||||
if (number < 1024) return 'B'
|
||||
number = number / 1024
|
||||
if (number < 1024) return "KB"
|
||||
if (number < 1024) return 'KB'
|
||||
number = number / 1024
|
||||
if (number < 1024) return "MB"
|
||||
if (number < 1024) return 'MB'
|
||||
number = number / 1024
|
||||
console.log('TB',number)
|
||||
console.log('TB', number)
|
||||
if (number < 1024) return 'GB'
|
||||
number = number / 1024
|
||||
if (number < 1024) return 'TB'
|
||||
|
|
@ -116,23 +118,24 @@ export default {
|
|||
if (number < 1024) return 'EB'
|
||||
}
|
||||
},
|
||||
dataConversion(){
|
||||
return function(number,units){
|
||||
dataConversion() {
|
||||
return function (number, units) {
|
||||
const obj = {
|
||||
KB: 1024,
|
||||
MB: Math.pow(1024,2),
|
||||
GB: Math.pow(1024,3),
|
||||
TB: Math.pow(1024,4),
|
||||
PB: Math.pow(1024,5),
|
||||
EB: Math.pow(1024,6),
|
||||
MB: Math.pow(1024, 2),
|
||||
GB: Math.pow(1024, 3),
|
||||
TB: Math.pow(1024, 4),
|
||||
PB: Math.pow(1024, 5),
|
||||
EB: Math.pow(1024, 6),
|
||||
}
|
||||
// console.log(obj[units],number / obj[units])
|
||||
return (number / obj[units]).toFixed(2)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
currId: '',
|
||||
visible_rule: false,
|
||||
currLabel: '',
|
||||
|
|
@ -176,10 +179,11 @@ export default {
|
|||
sourceType: 'Server',
|
||||
sourceId: this.currId,
|
||||
}
|
||||
this.spinning = true
|
||||
getAction('/alarmRule/getItems', params).then((res) => {
|
||||
if (res.success) {
|
||||
this.MonitorItem = res.result
|
||||
this.chartDatas = this.MonitorItem.map(f=>({
|
||||
this.chartDatas = this.MonitorItem.map((f) => ({
|
||||
title: f.name,
|
||||
value: f.itemId,
|
||||
type: f.valueType,
|
||||
|
|
@ -207,7 +211,8 @@ export default {
|
|||
}
|
||||
try {
|
||||
const res = await this.getMonitorItemData(params)
|
||||
console.log("getMonitorItemData>",res);
|
||||
this.spinning = false
|
||||
console.log('getMonitorItemData>', res)
|
||||
item.xData = res.xData
|
||||
item.data = [
|
||||
{
|
||||
|
|
@ -219,6 +224,7 @@ export default {
|
|||
item.newUnits = res.newUnits
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.spinning = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -234,21 +240,21 @@ export default {
|
|||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
|
||||
let item = res.result;
|
||||
if(item.units === 'B' || item.units === 'Kb'){
|
||||
item.newUnits = this.unitConversion(item.min,item.units)
|
||||
newUnits = item.newUnits
|
||||
item.list.map(val =>{
|
||||
let item = res.result
|
||||
if (item.units === 'B' || item.units === 'Kb') {
|
||||
item.newUnits = this.unitConversion(item.min, item.units)
|
||||
newUnits = item.newUnits
|
||||
item.list.map((val) => {
|
||||
let number = val.value
|
||||
if(item.units ==="Kb"){
|
||||
number = val.value *1024
|
||||
if (item.units === 'Kb') {
|
||||
number = val.value * 1024
|
||||
}
|
||||
val.value = Number(this.dataConversion(number,item.newUnits))
|
||||
data.push({
|
||||
value: Number(val.value),
|
||||
Date: moment(val.date * 1000).format('hh:mm')
|
||||
})
|
||||
val.value = Number(this.dataConversion(number, item.newUnits))
|
||||
data.push({
|
||||
value: Number(val.value),
|
||||
Date: moment(val.date * 1000).format('hh:mm'),
|
||||
})
|
||||
})
|
||||
console.log(item)
|
||||
} else {
|
||||
data = res.result.list.map((item_1) => {
|
||||
|
|
@ -260,7 +266,7 @@ export default {
|
|||
xData,
|
||||
data,
|
||||
units,
|
||||
newUnits
|
||||
newUnits,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -402,6 +408,14 @@ export default {
|
|||
height: calc(100% - 60px);
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
/deep/.ant-spin-nested-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/deep/.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -57,24 +57,25 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<div class="service-content-ranked">
|
||||
<BoxTitle title="Top-ranked processes in the last hour">
|
||||
<template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item, index) in ranked.legend" :key="index">
|
||||
<div :style="`background:${ranked.color[index]}`" class="li-icon"></div>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="service-content-ranked-box" id="ranked"></div>
|
||||
</div>
|
||||
<div class="service-content-center">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="12">
|
||||
<BoxTitle title="Process CPU usage(%)">
|
||||
<!-- <template slot="right">
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="service-content-ranked">
|
||||
<BoxTitle title="Top-ranked processes in the last hour">
|
||||
<template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item, index) in ranked.legend" :key="index">
|
||||
<div :style="`background:${ranked.color[index]}`" class="li-icon"></div>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="service-content-ranked-box" id="ranked"></div>
|
||||
</div>
|
||||
<div class="service-content-center">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="12">
|
||||
<BoxTitle title="Process CPU usage(%)">
|
||||
<!-- <template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item, index) in processCpu.legend" :key="index">
|
||||
<div :style="`background:${processCpu.color[index]}`" class="li-icon"></div>
|
||||
|
|
@ -82,12 +83,12 @@
|
|||
</li>
|
||||
</ul>
|
||||
</template> -->
|
||||
</BoxTitle>
|
||||
<div class="service-content-center-item" id="processCpu"></div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<BoxTitle title="Process memory usage(%)">
|
||||
<!-- <template slot="right">
|
||||
</BoxTitle>
|
||||
<div class="service-content-center-item" id="processCpu"></div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<BoxTitle title="Process memory usage(%)">
|
||||
<!-- <template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item, index) in processMenbry.legend" :key="index">
|
||||
<div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div>
|
||||
|
|
@ -95,25 +96,25 @@
|
|||
</li>
|
||||
</ul>
|
||||
</template> -->
|
||||
</BoxTitle>
|
||||
<div class="service-content-center-item" id="menbry"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="service-content-table">
|
||||
<BoxTitle title="Service"></BoxTitle>
|
||||
<div style="padding-top: 10px">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:canSelect="false"
|
||||
>
|
||||
</TableList>
|
||||
<!-- <a-pagination
|
||||
</BoxTitle>
|
||||
<div class="service-content-center-item" id="menbry"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="service-content-table">
|
||||
<BoxTitle title="Service"></BoxTitle>
|
||||
<div style="padding-top: 10px">
|
||||
<TableList
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:list="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:canSelect="false"
|
||||
>
|
||||
</TableList>
|
||||
<!-- <a-pagination
|
||||
size="small"
|
||||
v-model="ipagination.current"
|
||||
:pageSize="ipagination.pageSize"
|
||||
|
|
@ -129,8 +130,9 @@
|
|||
@change="handlePageChange"
|
||||
@showSizeChange="handleSizeChange"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -140,7 +142,7 @@ import moment from 'moment'
|
|||
import BoxTitle from '../../components/boxTitle.vue'
|
||||
import TableList from '../../components/tableList.vue'
|
||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||
import { getAction } from '@/api/manage'
|
||||
import * as echarts from 'echarts'
|
||||
// const columns = [
|
||||
// {
|
||||
|
|
@ -193,27 +195,33 @@ import * as echarts from 'echarts'
|
|||
// },
|
||||
// ]
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: 'Min(%)',
|
||||
dataIndex: 'min',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: 'Max(%)',
|
||||
dataIndex: 'max',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: 'Avg(%)',
|
||||
dataIndex: 'avg',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: 'Now(%)',
|
||||
dataIndex: 'now',
|
||||
width: '20%'
|
||||
}]
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Min(%)',
|
||||
dataIndex: 'min',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Max(%)',
|
||||
dataIndex: 'max',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Avg(%)',
|
||||
dataIndex: 'avg',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Now(%)',
|
||||
dataIndex: 'now',
|
||||
width: '20%',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
|
|
@ -221,6 +229,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
spinning: false,
|
||||
type: 'cpu',
|
||||
queryParams: {
|
||||
server: undefined,
|
||||
|
|
@ -312,71 +321,75 @@ export default {
|
|||
start: this.queryParams.startDate,
|
||||
end: this.queryParams.endDate,
|
||||
}
|
||||
const hide = this.$message.loading('loading...', 0)
|
||||
getAction('/systemMonitor/queryHostDetails', params).then((res) => {
|
||||
this.list = res.result
|
||||
this.listData = {
|
||||
list: this.num === 0 ? this.list.cpu : this.list.memory,
|
||||
type: this.num === 0 ? 'CPU' : '内存',
|
||||
}
|
||||
|
||||
this.setTableData()
|
||||
|
||||
let cpu_xData = res.result.cpu[0].list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
let cpu_Data = res.result.cpu.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
|
||||
// const hide = this.$message.loading('loading...', 0)
|
||||
this.spinning = true
|
||||
getAction('/systemMonitor/queryHostDetails', params)
|
||||
.then((res) => {
|
||||
this.list = res.result
|
||||
this.listData = {
|
||||
list: this.num === 0 ? this.list.cpu : this.list.memory,
|
||||
type: this.num === 0 ? 'CPU' : '内存',
|
||||
}
|
||||
})
|
||||
let cpu_legend = res.result.cpu.map((item) => {
|
||||
return item.name
|
||||
})
|
||||
let memory_xData = res.result.memory[0].list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
let memory_Data = res.result.memory.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
|
||||
}
|
||||
})
|
||||
let memory_legend = res.result.memory.map((item) => {
|
||||
return item.name
|
||||
})
|
||||
|
||||
this.rankData = {
|
||||
type: this.type === 'cpu' ? 'CPU' : 'Memory',
|
||||
cpu_xData,
|
||||
cpu_Data,
|
||||
memory_xData,
|
||||
memory_Data,
|
||||
}
|
||||
this.ranked.legend = this.type === 'cpu' ? cpu_legend : memory_legend
|
||||
this.processCpu.xData = cpu_xData
|
||||
// this.processCpu.data = res.result.cpu.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// data: item.list.map((el) => el.value),
|
||||
// }
|
||||
// })
|
||||
this.processCpu.data = cpu_Data
|
||||
this.processMenbry.xData = memory_xData
|
||||
// this.processMenbry.data = res.result.memory.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// data: item.list.map((el) => el.value),
|
||||
// }
|
||||
// })
|
||||
this.processMenbry.data = memory_Data
|
||||
this.drawRanked()
|
||||
this.drawProcesCpu()
|
||||
this.drawProcesMenbry()
|
||||
}).finally(() => {
|
||||
hide()
|
||||
})
|
||||
this.setTableData()
|
||||
|
||||
let cpu_xData = res.result.cpu[0].list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
let cpu_Data = res.result.cpu.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
|
||||
}
|
||||
})
|
||||
let cpu_legend = res.result.cpu.map((item) => {
|
||||
return item.name
|
||||
})
|
||||
let memory_xData = res.result.memory[0].list.map((item) => {
|
||||
return dateFormat(new Date(item.date * 1000), 'hh:mm')
|
||||
})
|
||||
let memory_Data = res.result.memory.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: item.list.map((el) => Number((el.value * 100).toFixed(2))),
|
||||
}
|
||||
})
|
||||
let memory_legend = res.result.memory.map((item) => {
|
||||
return item.name
|
||||
})
|
||||
|
||||
this.rankData = {
|
||||
type: this.type === 'cpu' ? 'CPU' : 'Memory',
|
||||
cpu_xData,
|
||||
cpu_Data,
|
||||
memory_xData,
|
||||
memory_Data,
|
||||
}
|
||||
this.ranked.legend = this.type === 'cpu' ? cpu_legend : memory_legend
|
||||
this.processCpu.xData = cpu_xData
|
||||
// this.processCpu.data = res.result.cpu.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// data: item.list.map((el) => el.value),
|
||||
// }
|
||||
// })
|
||||
this.processCpu.data = cpu_Data
|
||||
this.processMenbry.xData = memory_xData
|
||||
// this.processMenbry.data = res.result.memory.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// data: item.list.map((el) => el.value),
|
||||
// }
|
||||
// })
|
||||
this.processMenbry.data = memory_Data
|
||||
this.drawRanked()
|
||||
this.drawProcesCpu()
|
||||
this.drawProcesMenbry()
|
||||
})
|
||||
.finally(() => {
|
||||
// hide()
|
||||
this.spinning = false
|
||||
})
|
||||
},
|
||||
getBeforeHours(num) {
|
||||
let currentTime = moment()
|
||||
|
|
|
|||
|
|
@ -7,24 +7,28 @@
|
|||
:dataSource="list"
|
||||
:list-style="{
|
||||
width: '200px',
|
||||
height: '400px'
|
||||
height: '400px',
|
||||
}"
|
||||
:target-keys="targetKeys"
|
||||
:render="item => item.title"
|
||||
:render="(item) => item.title"
|
||||
:showSearch="true"
|
||||
:showSelectAll="false"
|
||||
@change="handleChange"
|
||||
></a-transfer>
|
||||
|
||||
<div class="config-user-library-btns">
|
||||
<div>
|
||||
<!--<div class="config-user-library-btns">
|
||||
<div>
|
||||
<a-button type="primary" @click="handleDefault">Default</a-button>
|
||||
<a-button type="primary">Load</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a-button type="primary" :loading="isSaving" @click="handleSave">Save</a-button>
|
||||
<a-button type="primary">Apply</a-button>
|
||||
</div>
|
||||
<a-button type="primary" :loading="isSaving" @click="handleSave">Save</a-button>
|
||||
</div>-->
|
||||
<div style="margin-top: 20px; display: flex; justify-content: end">
|
||||
<a-button type="primary" :loading="isSaving" @click="handleSave">Save</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
|
|
@ -43,7 +47,7 @@ export default {
|
|||
return {
|
||||
list: [],
|
||||
targetKeys: [],
|
||||
isSaving: false
|
||||
isSaving: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -58,17 +62,17 @@ export default {
|
|||
const { sampleId, inputFileName: fileName } = this.sampleData
|
||||
const { success, result, message } = await getAction('/gamma/configUserLibrary', {
|
||||
sampleId,
|
||||
fileName
|
||||
fileName,
|
||||
})
|
||||
if (success) {
|
||||
this.isLoading = false
|
||||
const { AllNuclides, UserNuclides } = result
|
||||
this.list = AllNuclides.map(item => ({
|
||||
this.list = AllNuclides.map((item) => ({
|
||||
key: item,
|
||||
title: item
|
||||
title: item,
|
||||
}))
|
||||
|
||||
this.targetKeys = UserNuclides.map(item => item)
|
||||
this.targetKeys = UserNuclides.map((item) => item)
|
||||
|
||||
this.initialTargetKeys = cloneDeep(this.targetKeys)
|
||||
} else {
|
||||
|
|
@ -95,7 +99,7 @@ export default {
|
|||
const { inputFileName: fileName } = this.sampleData
|
||||
const { success, result, message } = await postAction('/gamma/saveUserLibrary', {
|
||||
fileName,
|
||||
userLibraryName: this.targetKeys
|
||||
userLibraryName: this.targetKeys,
|
||||
})
|
||||
if (success) {
|
||||
this.$message.success('Save Success')
|
||||
|
|
@ -107,8 +111,8 @@ export default {
|
|||
} finally {
|
||||
this.isSaving = false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -162,6 +162,11 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
loadData(arg) {
|
||||
debugger
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1
|
||||
}
|
||||
const params = this.getQueryParams() //查询条件
|
||||
const { startDate, endDate, menuTypes } = params
|
||||
if (!menuTypes) {
|
||||
|
|
@ -179,11 +184,6 @@ export default {
|
|||
return
|
||||
}
|
||||
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1
|
||||
}
|
||||
|
||||
params.AllUsers = this.allUsersValue
|
||||
params.CollectStopB = this.collectStopValue
|
||||
params.AcqStartB = this.acqStartValue
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction } from '../../../../api/manage'
|
||||
import { getAction, postActionWithTimeOut } from '../../../../api/manage'
|
||||
import { FilePicker } from '@/utils/FilePicker'
|
||||
import { readFile, zipFile } from '@/utils/file'
|
||||
import { isSample, PHDParser, PHD_DATA_TYPE } from '@/utils/phdHelper'
|
||||
|
|
@ -657,7 +657,7 @@ export default {
|
|||
async uploadZipFile(file) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const res = await postAction('/spectrumFile/upload', formData)
|
||||
const res = await postActionWithTimeOut('/spectrumFile/upload', formData, 0)
|
||||
return res
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -217,7 +217,11 @@ export default {
|
|||
// 获取站点详情
|
||||
async _getStationInfo(stationInfo) {
|
||||
try {
|
||||
<<<<<<< HEAD
|
||||
const { success, result, message } = await getAction('/stationOperation/findInfo', {
|
||||
=======
|
||||
const { success, result, message } = await getAction('/armd-station-operation/stationOperation/findInfo', {
|
||||
>>>>>>> master-dev
|
||||
stationId: stationInfo.stationId,
|
||||
type: stationInfo.stationType,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -695,13 +695,10 @@ export default {
|
|||
try {
|
||||
const stationIds = this.dataStatusCheckedKeys.filter((key) => -1 == key.toString().indexOf('root_'))
|
||||
this.isSavingDataRecieveSettings = true
|
||||
const { success, message } = await postAction(
|
||||
'/sysUserFocusStation/saveUserFocusByUserId',
|
||||
{
|
||||
stationIds,
|
||||
...this.dataRecieveStatusModel,
|
||||
}
|
||||
)
|
||||
const { success, message } = await postAction('/sysUserFocusStation/saveUserFocusByUserId', {
|
||||
stationIds,
|
||||
...this.dataRecieveStatusModel,
|
||||
})
|
||||
if (success) {
|
||||
this.$message.success('Save Success')
|
||||
await this.getDataRecieveSettings()
|
||||
|
|
@ -738,12 +735,9 @@ export default {
|
|||
// 获取数据接收状态配置
|
||||
async getDataRecieveSettings() {
|
||||
try {
|
||||
const { success, result, message } = await getAction(
|
||||
'/sysUserFocusStation/findUserFocusByUserId',
|
||||
{
|
||||
userId: this.$store.getters.userInfo.id,
|
||||
}
|
||||
)
|
||||
const { success, result, message } = await getAction('/sysUserFocusStation/findUserFocusByUserId', {
|
||||
userId: this.$store.getters.userInfo.id,
|
||||
})
|
||||
if (success) {
|
||||
this.initialDataRecieveSettings = result
|
||||
} else {
|
||||
|
|
@ -774,13 +768,10 @@ export default {
|
|||
this.spinLoading = true
|
||||
try {
|
||||
this.isGettingStatusList = true
|
||||
const { success, result, message } = await getAction(
|
||||
'/stationOperation/getDataReceivingStatus',
|
||||
{
|
||||
userId: this.$store.getters.userInfo.id,
|
||||
oneStationId: (this.stationInfo && this.stationInfo.stationId) || '',
|
||||
}
|
||||
)
|
||||
const { success, result, message } = await getAction('/stationOperation/getDataReceivingStatus', {
|
||||
userId: this.$store.getters.userInfo.id,
|
||||
oneStationId: (this.stationInfo && this.stationInfo.stationId) || '',
|
||||
})
|
||||
this.maskVisi = false
|
||||
this.spinLoading = false
|
||||
if (success) {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,11 @@ const legendList = [
|
|||
const initialOption = {
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
return `${params.marker}${params.name}: ${(params.value[3] / 1000 / 60).toFixed()}min`
|
||||
return `
|
||||
<div>${params.marker}${params.name}</div>
|
||||
<div>START：${dayjs(new Date(params.value[1])).format('YYYY-MM-DD HH:mm:ss')}</div>
|
||||
<div>END：${dayjs(new Date(params.value[2])).format('YYYY-MM-DD HH:mm:ss')}</div>
|
||||
`
|
||||
},
|
||||
},
|
||||
grid: [],
|
||||
|
|
|
|||
|
|
@ -253,7 +253,11 @@ export default {
|
|||
async getStationList() {
|
||||
try {
|
||||
this.isGettingDataList = true
|
||||
<<<<<<< HEAD
|
||||
const res = await getAction('/stationOperation/findList')
|
||||
=======
|
||||
const res = await getAction('/armd-station-operation/stationOperation/findList')
|
||||
>>>>>>> master-dev
|
||||
res.forEach((item) => {
|
||||
const { stationId, stationName, stationType } = item
|
||||
item._stationId = `${stationId}${stationName}${stationType}`
|
||||
|
|
@ -364,7 +368,11 @@ export default {
|
|||
async getFollowedStationList() {
|
||||
try {
|
||||
this.isGettingFollowedDataList = true
|
||||
<<<<<<< HEAD
|
||||
const res = await getAction('/sysUserFocusStation/findList')
|
||||
=======
|
||||
const res = await getAction('/armd-station-operation/sysUserFocusStation/findList')
|
||||
>>>>>>> master-dev
|
||||
this.followedDataList = res
|
||||
|
||||
const scrollContainer2Ref = this.$refs.scrollContainer2Ref
|
||||
|
|
@ -383,7 +391,11 @@ export default {
|
|||
// 获取站点类型
|
||||
async getStationTypeList() {
|
||||
try {
|
||||
<<<<<<< HEAD
|
||||
const res = await getAction('/stationOperation/findStationType')
|
||||
=======
|
||||
const res = await getAction('/armd-station-operation/stationOperation/findStationType')
|
||||
>>>>>>> master-dev
|
||||
this.stationTypeList = res.filter((item) => item).map((item) => ({ label: item, value: item }))
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
|
|
|
|||
|
|
@ -1,114 +1,116 @@
|
|||
<template>
|
||||
<div class="scheduling">
|
||||
<!-- 左侧日程列表 -->
|
||||
<a-card class="scheduling-list">
|
||||
<!-- 标题 -->
|
||||
<template slot="title">
|
||||
<div class="card-title">Scheduling</div>
|
||||
<div class="line"></div>
|
||||
</template>
|
||||
<!-- 标题结束 -->
|
||||
<!-- 内容 -->
|
||||
<div class="scheduling-list-content">
|
||||
<div class="scheduling-list-item" v-for="item of schedulingInfo" :key="item.id">
|
||||
<h4 class="title">
|
||||
<span>
|
||||
{{ item.username }}
|
||||
</span>
|
||||
<a-popconfirm title="Do You Want To Delete This Item?" placement="bottom" @confirm="onDel(item)">
|
||||
<a class="del"></a>
|
||||
</a-popconfirm>
|
||||
</h4>
|
||||
<div class="scheduling-list-item-container" @dragover.prevent @drop="onDrop(item)">
|
||||
<!-- 左侧边框 -->
|
||||
<div class="left-border">
|
||||
<div class="left-top-border">
|
||||
<div class="left-top-corner"></div>
|
||||
<a-spin :spinning="spinningMain">
|
||||
<!-- 左侧日程列表 -->
|
||||
<a-card class="scheduling-list">
|
||||
<!-- 标题 -->
|
||||
<template slot="title">
|
||||
<div class="card-title">Scheduling</div>
|
||||
<div class="line"></div>
|
||||
</template>
|
||||
<!-- 标题结束 -->
|
||||
<!-- 内容 -->
|
||||
<div class="scheduling-list-content">
|
||||
<div class="scheduling-list-item" v-for="item of schedulingInfo" :key="item.id">
|
||||
<h4 class="title">
|
||||
<span>
|
||||
{{ item.username }}
|
||||
</span>
|
||||
<a-popconfirm title="Do You Want To Delete This Item?" placement="bottom" @confirm="onDel(item)">
|
||||
<a class="del"></a>
|
||||
</a-popconfirm>
|
||||
</h4>
|
||||
<div class="scheduling-list-item-container" @dragover.prevent @drop="onDrop(item)">
|
||||
<!-- 左侧边框 -->
|
||||
<div class="left-border">
|
||||
<div class="left-top-border">
|
||||
<div class="left-top-corner"></div>
|
||||
</div>
|
||||
<div class="left-bottom-border"></div>
|
||||
</div>
|
||||
<div class="left-bottom-border"></div>
|
||||
<!-- 左侧边框结束 -->
|
||||
<div class="scheduling-list-item-content">
|
||||
<template v-for="(station, index) in item.stationList">
|
||||
<span
|
||||
:key="station.stationId"
|
||||
class="draggable"
|
||||
draggable
|
||||
@dragstart="onDragStart(station, item.userId)"
|
||||
>
|
||||
{{ station.stationName + (index == item.stationList.length - 1 ? '' : '、') }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 右侧边框 -->
|
||||
<div class="right-border">
|
||||
<div class="right-top-border"></div>
|
||||
<div class="right-bottom-border"></div>
|
||||
</div>
|
||||
<!-- 右侧边框结束 -->
|
||||
</div>
|
||||
<!-- 左侧边框结束 -->
|
||||
<div class="scheduling-list-item-content">
|
||||
<template v-for="(station, index) in item.stationList">
|
||||
<span
|
||||
:key="station.stationId"
|
||||
class="draggable"
|
||||
draggable
|
||||
@dragstart="onDragStart(station, item.userId)"
|
||||
>
|
||||
{{ station.stationName + (index == item.stationList.length - 1 ? '' : '、') }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 右侧边框 -->
|
||||
<div class="right-border">
|
||||
<div class="right-top-border"></div>
|
||||
<div class="right-bottom-border"></div>
|
||||
</div>
|
||||
<!-- 右侧边框结束 -->
|
||||
</div>
|
||||
<custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px"></custom-empty>
|
||||
</div>
|
||||
<custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px"></custom-empty>
|
||||
</div>
|
||||
<!-- 内容结束 -->
|
||||
</a-card>
|
||||
<div class="scheduling-calendar">
|
||||
<!-- 日历 -->
|
||||
<a-calendar v-model="currentDate" @select="onSelectDate">
|
||||
<template slot="headerRender">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-form">
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model class="search-form-form">
|
||||
<a-form-model-item label="Month" style="marign-bottom: 0">
|
||||
<custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-col>
|
||||
<a-space class="btn-group">
|
||||
<a-button @click="onAdd" type="primary">
|
||||
<img src="@/assets/images/global/add.png" alt="" />
|
||||
Add
|
||||
</a-button>
|
||||
<a-button @click="onEdit" type="primary">
|
||||
<img src="@/assets/images/global/edit.png" alt="" />
|
||||
Edit
|
||||
</a-button>
|
||||
<a-button type="primary" @click="onDownloadTpl">
|
||||
<img src="@/assets/images/global/export.png" alt="" />
|
||||
Download Template
|
||||
</a-button>
|
||||
<a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false">
|
||||
<a-button type="primary">
|
||||
<img src="@/assets/images/global/import.png" alt="" />
|
||||
Import
|
||||
<!-- 内容结束 -->
|
||||
</a-card>
|
||||
<div class="scheduling-calendar">
|
||||
<!-- 日历 -->
|
||||
<a-calendar v-model="currentDate" @select="onSelectDate">
|
||||
<template slot="headerRender">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-form">
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<a-form-model class="search-form-form">
|
||||
<a-form-model-item label="Month" style="marign-bottom: 0">
|
||||
<custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-col>
|
||||
<a-space class="btn-group">
|
||||
<a-button @click="onAdd" type="primary">
|
||||
<img src="@/assets/images/global/add.png" alt="" />
|
||||
Add
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary" @click="onExport">
|
||||
<img src="@/assets/images/global/export.png" alt="" />
|
||||
Export
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-row>
|
||||
</div>
|
||||
<!-- 搜索栏结束 -->
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
<template slot="dateCellRender" slot-scope="value">
|
||||
<div
|
||||
class="scheduling-calendar-content"
|
||||
v-if="scheduleList[value.format(dateFormat)] && scheduleList[value.format(dateFormat)].length"
|
||||
>
|
||||
<div class="item" v-for="item in scheduleList[value.format(dateFormat)]" :key="item.id">
|
||||
{{ `${item.username}(${item.stationList.length})` }}
|
||||
<a-button @click="onEdit" type="primary">
|
||||
<img src="@/assets/images/global/edit.png" alt="" />
|
||||
Edit
|
||||
</a-button>
|
||||
<a-button type="primary" @click="onDownloadTpl">
|
||||
<img src="@/assets/images/global/export.png" alt="" />
|
||||
Download Template
|
||||
</a-button>
|
||||
<a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false">
|
||||
<a-button :loading="isImport" type="primary">
|
||||
<img src="@/assets/images/global/import.png" alt="" />
|
||||
Import
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-button type="primary" @click="onExport">
|
||||
<img src="@/assets/images/global/export.png" alt="" />
|
||||
Export
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
</a-calendar>
|
||||
<!-- 日历结束 -->
|
||||
</div>
|
||||
<!-- 搜索栏结束 -->
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
<template slot="dateCellRender" slot-scope="value">
|
||||
<div
|
||||
class="scheduling-calendar-content"
|
||||
v-if="scheduleList[value.format(dateFormat)] && scheduleList[value.format(dateFormat)].length"
|
||||
>
|
||||
<div class="item" v-for="item in scheduleList[value.format(dateFormat)]" :key="item.id">
|
||||
{{ `${item.username}(${item.stationList.length})` }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
</a-calendar>
|
||||
<!-- 日历结束 -->
|
||||
</div>
|
||||
</a-spin>
|
||||
|
||||
<!-- 增加/编辑排班弹窗 -->
|
||||
<custom-modal :title="isAdd ? 'Add' : 'Edit'" :width="845" v-model="visible" :okHandler="submit" destroy-on-close>
|
||||
|
|
@ -217,6 +219,8 @@ export default {
|
|||
data() {
|
||||
this.dateFormat = dateFormat
|
||||
return {
|
||||
isImport: false,
|
||||
spinningMain: false,
|
||||
currentMonth: moment(), // 当前月份
|
||||
|
||||
currentDate: moment(), // 当前日期
|
||||
|
|
@ -255,6 +259,7 @@ export default {
|
|||
methods: {
|
||||
// 获取该月日程列表
|
||||
async getList() {
|
||||
this.spinningMain = true
|
||||
try {
|
||||
this.isGettingList = true
|
||||
const { result } = await getAction(`/sysTask/findList?yearMonth=${this.currentMonth.format('YYYY-MM')}`)
|
||||
|
|
@ -262,8 +267,10 @@ export default {
|
|||
this.schedulingInfo = this.scheduleList[this.currentDate.format(dateFormat)]
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.spinningMain = false
|
||||
} finally {
|
||||
this.isGettingList = false
|
||||
this.spinningMain = false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -407,14 +414,17 @@ export default {
|
|||
},
|
||||
|
||||
async onImport({ file }) {
|
||||
this.isImport = true
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const { success, failure } = await postAction('/sysTask/importExcel', formData)
|
||||
this.$message.success(`${success} Success, ${failure} Fail`)
|
||||
this.isImport = false
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
this.isImport = false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -645,7 +655,11 @@ export default {
|
|||
.scheduling {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
//display: flex;
|
||||
/deep/.ant-spin-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
&-list {
|
||||
flex-shrink: 0;
|
||||
width: 350px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user