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; width: calc(100% + 11px) !important;
} }
} }
&-thead { &-thead {
> tr { > tr {
th { th {

View File

@ -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
// urlsourceId // urlsourceId
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;
} }

View File

@ -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() {