Merge branch 'master-dev' into feature-Beta-dev-renpy
# Conflicts: # src/style.less
This commit is contained in:
commit
ed052e34e0
|
@ -81,7 +81,6 @@ body {
|
||||||
width: calc(100% + 11px) !important;
|
width: calc(100% + 11px) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-thead {
|
&-thead {
|
||||||
> tr {
|
> tr {
|
||||||
th {
|
th {
|
||||||
|
|
|
@ -1,118 +1,117 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="monitor-search">
|
<div class="monitor-search">
|
||||||
<a-row type="flex" :gutter="10">
|
<a-row type="flex" :gutter="10">
|
||||||
<a-col flex="335px">
|
<a-col flex="335px">
|
||||||
<span class="item-label">Database name</span>
|
<span class="item-label">Database name</span>
|
||||||
<a-select style="width:180px"
|
<a-select
|
||||||
v-model="value.hostId"
|
style="width: 180px"
|
||||||
placeholder="select..."
|
v-model="value.hostId"
|
||||||
:filter-option="filterOption"
|
placeholder="select..."
|
||||||
show-arrow
|
:filter-option="filterOption"
|
||||||
allowClear
|
show-arrow
|
||||||
:options="DbOptions"
|
allowClear
|
||||||
@change="onDbChange"
|
:options="DbOptions"
|
||||||
>
|
@change="onDbChange"
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
>
|
||||||
</a-select>
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
</a-col>
|
</a-select>
|
||||||
<a-col flex="265px">
|
</a-col>
|
||||||
<span class="item-label">Time</span>
|
<a-col flex="265px">
|
||||||
<a-select style="width:180px"
|
<span class="item-label">Time</span>
|
||||||
v-model="timer"
|
<a-select
|
||||||
placeholder="select..."
|
style="width: 180px"
|
||||||
show-arrow
|
v-model="timer"
|
||||||
allowClear
|
placeholder="select..."
|
||||||
:options="timerOptions"
|
show-arrow
|
||||||
@change="onTimeChange"
|
allowClear
|
||||||
>
|
:options="timerOptions"
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
@change="onTimeChange"
|
||||||
</a-select>
|
>
|
||||||
</a-col>
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
<a-col flex="265px">
|
</a-select>
|
||||||
<a-range-picker
|
</a-col>
|
||||||
:show-time="true"
|
<a-col flex="265px">
|
||||||
:value="[moment(value.start), moment(value.end)]"
|
<a-range-picker
|
||||||
@change="onRangeDateChange"
|
:show-time="true"
|
||||||
/>
|
:value="[moment(value.start), moment(value.end)]"
|
||||||
</a-col>
|
@change="onRangeDateChange"
|
||||||
</a-row>
|
/>
|
||||||
<div class="monitor-search-btns">
|
</a-col>
|
||||||
<a-button class="monitor-search-btns-ant" @click="handleRefresh">
|
</a-row>
|
||||||
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
|
<div class="monitor-search-btns">
|
||||||
<span style="margin-left: 10px;">
|
<a-button class="monitor-search-btns-ant" @click="handleRefresh">
|
||||||
Refresh
|
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
|
||||||
</span>
|
<span style="margin-left: 10px"> Refresh </span>
|
||||||
</a-button>
|
</a-button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import moment from 'moment';
|
import moment from 'moment'
|
||||||
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
||||||
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
timer: 1,
|
timer: 1,
|
||||||
DbOptions: [],
|
DbOptions: [],
|
||||||
timerOptions: [
|
timerOptions: [
|
||||||
{label: "1Hours",value: 1},
|
{ label: '1Hours', value: 1 },
|
||||||
{label: "2Hours",value: 2},
|
{ label: '2Hours', value: 2 },
|
||||||
{label: "3Hours",value: 3},
|
{ label: '3Hours', value: 3 },
|
||||||
{label: "user-defined",value: 0},
|
{ label: 'user-defined', value: 0 },
|
||||||
]
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getBeforeHours(1)
|
this.getBeforeHours(1)
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.getDbList();
|
this.getDbList()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getBeforeHours(num) {
|
getBeforeHours(num) {
|
||||||
let currentTime = moment()
|
let currentTime = moment()
|
||||||
let oneHourAgo = moment().subtract(num, 'hours');
|
let oneHourAgo = moment().subtract(num, 'hours')
|
||||||
this.value.start = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
|
this.value.start = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
|
||||||
this.value.end = currentTime.format('YYYY-MM-DD HH:mm:ss')
|
this.value.end = currentTime.format('YYYY-MM-DD HH:mm:ss')
|
||||||
},
|
},
|
||||||
moment,
|
moment,
|
||||||
filterOption(input, option) {
|
filterOption(input, option) {
|
||||||
return (
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
getDbList() {
|
getDbList() {
|
||||||
getAction("/sysDatabase/sourceList").then(res => {
|
getAction('/sysDatabase/sourceList').then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
const sourceId = this.$route.query.id
|
const sourceId = this.$route.query.id
|
||||||
// 如果url中有sourceId
|
// 如果url中有sourceId
|
||||||
if(sourceId) {
|
if (sourceId) {
|
||||||
const find = res.result.find(item => item.sourceId == sourceId)
|
const find = res.result.find((item) => item.sourceId == sourceId)
|
||||||
if(find) {
|
if (find) {
|
||||||
this.value.hostId = find.hostId
|
this.value.hostId = find.hostId
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(!this.value.hostId) {
|
if (!this.value.hostId) {
|
||||||
this.value.hostId = res.result[0].hostId
|
this.value.hostId = res.result[0].hostId
|
||||||
}
|
}
|
||||||
|
|
||||||
this.DbOptions = res.result.map(item => {
|
this.DbOptions = res.result.map((item, index) => {
|
||||||
|
let str = `my${index}`
|
||||||
return {
|
return {
|
||||||
label: item.sourceName,
|
label: item.sourceName,
|
||||||
value: item.hostId
|
value: item.hostId || str,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.$emit('change')
|
this.$emit('change')
|
||||||
} else {
|
} else {
|
||||||
this.$message.warning("This operation fails. Contact your system administrator")
|
this.$message.warning('This operation fails. Contact your system administrator')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
@ -133,13 +132,13 @@ export default {
|
||||||
|
|
||||||
handleRefresh() {
|
handleRefresh() {
|
||||||
this.$emit('refresh')
|
this.$emit('refresh')
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.monitor-search{
|
.monitor-search {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
||||||
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
||||||
|
@ -148,13 +147,13 @@ export default {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
background: rgba(12, 235, 201, 0.05);
|
background: rgba(12, 235, 201, 0.05);
|
||||||
.ant-row-flex{
|
.ant-row-flex {
|
||||||
flex-flow: nowrap;
|
flex-flow: nowrap;
|
||||||
}
|
}
|
||||||
/deep/ .ant-calendar-range-picker-separator{
|
/deep/ .ant-calendar-range-picker-separator {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.item-label{
|
.item-label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: ArialMT;
|
font-family: ArialMT;
|
||||||
|
@ -163,8 +162,8 @@ export default {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
&-btns{
|
&-btns {
|
||||||
&-ant{
|
&-ant {
|
||||||
background: #1397a3;
|
background: #1397a3;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -363,35 +363,39 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
// 获取数据
|
// 获取数据
|
||||||
async getData() {
|
async getData() {
|
||||||
// const hide = this.$message.loading('loading...', 0)
|
if (!this.queryParams.hostId.includes('my')) {
|
||||||
this.spinning = true
|
this.spinning = true
|
||||||
try {
|
try {
|
||||||
const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
|
const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
|
||||||
if (success) {
|
if (success) {
|
||||||
this.chartData.forEach((chartItem, index) => {
|
this.chartData.forEach((chartItem, index) => {
|
||||||
const item = result[index]
|
const item = result[index]
|
||||||
if (item.units === 'B' || item.units === 'Kb') {
|
if (item.units === 'B' || item.units === 'Kb') {
|
||||||
item.newUnits = this.unitConversion(item.min, item.units)
|
item.newUnits = this.unitConversion(item.min, item.units)
|
||||||
item.list.forEach((val) => {
|
item.list.forEach((val) => {
|
||||||
let number = val.value
|
let number = val.value
|
||||||
if (item.units === 'Kb') {
|
if (item.units === 'Kb') {
|
||||||
number = val.value * 1024
|
number = val.value * 1024
|
||||||
}
|
}
|
||||||
val.value = Number(this.dataConversion(number, item.newUnits))
|
val.value = Number(this.dataConversion(number, item.newUnits))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
Object.assign(chartItem, item)
|
Object.assign(chartItem, item)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(message)
|
this.$message.error(message)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
this.spinning = false
|
||||||
|
} finally {
|
||||||
|
// hide()
|
||||||
|
this.spinning = false
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} else {
|
||||||
console.error(error)
|
this.$message.error('No monitoring information')
|
||||||
this.spinning = false
|
|
||||||
} finally {
|
|
||||||
// hide()
|
|
||||||
this.spinning = false
|
|
||||||
}
|
}
|
||||||
|
// const hide = this.$message.loading('loading...', 0)
|
||||||
},
|
},
|
||||||
//生成图表(运管系统代码)
|
//生成图表(运管系统代码)
|
||||||
generateChart() {
|
generateChart() {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user