Merge branch 'master-dev' into feature-Beta-dev-renpy

# Conflicts:
#	src/style.less
This commit is contained in:
任珮宇 2024-02-03 11:24:27 +08:00
commit ed052e34e0
3 changed files with 104 additions and 102 deletions

View File

@ -81,7 +81,6 @@ body {
width: calc(100% + 11px) !important;
}
}
&-thead {
> tr {
th {

View File

@ -1,118 +1,117 @@
<template>
<div class="monitor-search">
<a-row type="flex" :gutter="10">
<a-col flex="335px">
<span class="item-label">Database name</span>
<a-select style="width:180px"
v-model="value.hostId"
placeholder="select..."
:filter-option="filterOption"
show-arrow
allowClear
:options="DbOptions"
@change="onDbChange"
>
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
</a-select>
</a-col>
<a-col flex="265px">
<span class="item-label">Time</span>
<a-select style="width:180px"
v-model="timer"
placeholder="select..."
show-arrow
allowClear
:options="timerOptions"
@change="onTimeChange"
>
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
</a-select>
</a-col>
<a-col flex="265px">
<a-range-picker
:show-time="true"
:value="[moment(value.start), moment(value.end)]"
@change="onRangeDateChange"
/>
</a-col>
</a-row>
<div class="monitor-search-btns">
<a-button class="monitor-search-btns-ant" @click="handleRefresh">
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
<span style="margin-left: 10px;">
Refresh
</span>
</a-button>
</div>
<a-row type="flex" :gutter="10">
<a-col flex="335px">
<span class="item-label">Database name</span>
<a-select
style="width: 180px"
v-model="value.hostId"
placeholder="select..."
:filter-option="filterOption"
show-arrow
allowClear
:options="DbOptions"
@change="onDbChange"
>
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
</a-select>
</a-col>
<a-col flex="265px">
<span class="item-label">Time</span>
<a-select
style="width: 180px"
v-model="timer"
placeholder="select..."
show-arrow
allowClear
:options="timerOptions"
@change="onTimeChange"
>
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
</a-select>
</a-col>
<a-col flex="265px">
<a-range-picker
:show-time="true"
:value="[moment(value.start), moment(value.end)]"
@change="onRangeDateChange"
/>
</a-col>
</a-row>
<div class="monitor-search-btns">
<a-button class="monitor-search-btns-ant" @click="handleRefresh">
<img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
<span style="margin-left: 10px"> Refresh </span>
</a-button>
</div>
</div>
</template>
<script>
import moment from 'moment';
import moment from 'moment'
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
export default {
props: {
value: {
type: Object,
required: true
}
required: true,
},
},
data() {
return {
timer: 1,
DbOptions: [],
timerOptions: [
{label: "1Hours",value: 1},
{label: "2Hours",value: 2},
{label: "3Hours",value: 3},
{label: "user-defined",value: 0},
]
{ label: '1Hours', value: 1 },
{ label: '2Hours', value: 2 },
{ label: '3Hours', value: 3 },
{ label: 'user-defined', value: 0 },
],
}
},
created() {
this.getBeforeHours(1)
},
mounted () {
this.getDbList();
mounted() {
this.getDbList()
},
methods: {
getBeforeHours(num) {
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.end = currentTime.format('YYYY-MM-DD HH:mm:ss')
},
moment,
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
getDbList() {
getAction("/sysDatabase/sourceList").then(res => {
getAction('/sysDatabase/sourceList').then((res) => {
if (res.success) {
const sourceId = this.$route.query.id
// urlsourceId
if(sourceId) {
const find = res.result.find(item => item.sourceId == sourceId)
if(find) {
if (sourceId) {
const find = res.result.find((item) => item.sourceId == sourceId)
if (find) {
this.value.hostId = find.hostId
}
}
if(!this.value.hostId) {
if (!this.value.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 {
label: item.sourceName,
value: item.hostId
value: item.hostId || str,
}
})
this.$emit('change')
} 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() {
this.$emit('refresh')
}
},
},
}
</script>
<style lang="less" scoped>
.monitor-search{
.monitor-search {
height: 50px;
border-top: 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;
padding: 0 10px;
background: rgba(12, 235, 201, 0.05);
.ant-row-flex{
.ant-row-flex {
flex-flow: nowrap;
}
/deep/ .ant-calendar-range-picker-separator{
/deep/ .ant-calendar-range-picker-separator {
color: white;
}
.item-label{
.item-label {
display: inline-block;
font-size: 16px;
font-family: ArialMT;
@ -163,8 +162,8 @@ export default {
height: 32px;
margin-right: 10px;
}
&-btns{
&-ant{
&-btns {
&-ant {
background: #1397a3;
border: none;
}

View File

@ -363,35 +363,39 @@ export default {
methods: {
//
async getData() {
// const hide = this.$message.loading('loading...', 0)
this.spinning = true
try {
const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
if (success) {
this.chartData.forEach((chartItem, index) => {
const item = result[index]
if (item.units === 'B' || item.units === 'Kb') {
item.newUnits = this.unitConversion(item.min, item.units)
item.list.forEach((val) => {
let number = val.value
if (item.units === 'Kb') {
number = val.value * 1024
}
val.value = Number(this.dataConversion(number, item.newUnits))
})
}
Object.assign(chartItem, item)
})
} else {
this.$message.error(message)
if (!this.queryParams.hostId.includes('my')) {
this.spinning = true
try {
const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
if (success) {
this.chartData.forEach((chartItem, index) => {
const item = result[index]
if (item.units === 'B' || item.units === 'Kb') {
item.newUnits = this.unitConversion(item.min, item.units)
item.list.forEach((val) => {
let number = val.value
if (item.units === 'Kb') {
number = val.value * 1024
}
val.value = Number(this.dataConversion(number, item.newUnits))
})
}
Object.assign(chartItem, item)
})
} else {
this.$message.error(message)
}
} catch (error) {
console.error(error)
this.spinning = false
} finally {
// hide()
this.spinning = false
}
} catch (error) {
console.error(error)
this.spinning = false
} finally {
// hide()
this.spinning = false
} else {
this.$message.error('No monitoring information')
}
// const hide = this.$message.loading('loading...', 0)
},
//
generateChart() {