efc
/
scr-web
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: m

sqltest
时启龙 2024-07-25 12:22:54 +08:00
parent 5d3c797e5a
commit a231bb9520
7 changed files with 82 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/screen/RealTimeUsed.vue
View File

@ -1,5 +1,11 @@
<template>
<div id="RealTimeUsed"></div>
<!-- 外面拉伸时圆环保持不变 -->
<div
id="RealTimeUsed"
:style="{
transform: `scale(${scale.hRatio},${scale.wRatio})`
}"
></div>
</template>
<script>
@ -7,10 +13,16 @@ import * as echarts from 'echarts'
import { getRealTimeUtilization } from './api.js'
export default {
name: 'UsedTrend',
props: {
scale: {
type: Object,
default: () => ({ wRatio: 1, hRatio: 1 })
}
},
data() {
return {
myChart: null,
used: 25.7,
used: 0,
timer: null
}
},
@ -31,7 +43,7 @@ export default {
async getRealTimeData() {
const res = await getRealTimeUtilization()
if (res?.status !== 'success') return
const value = res.data?.result?.[0]?.value[1] * 100 || 0
const value = res.data?.result?.[0]?.value[1] * 1 || 0
this.used = value.toFixed(2)
},
getRealTimeUesdView() {

49
src/views/screen/UsedTrend.vue
View File

@ -5,6 +5,7 @@
<script>
import * as echarts from 'echarts'
import { getAverageUtilizationTrend } from './api.js'
import { getTimestampsBy90day } from './util.js'
export default {
name: 'UsedTrend',
data() {
@ -13,52 +14,12 @@ export default {
timer: null,
tableData7: [
{
data: 52,
name: 1680307200
data: 0,
name: getTimestampsBy90day().ninetyDaysAgo
},
{
data: 60,
name: 1682899200
},
{
data: 58,
name: 1685577600
},
{
data: 59,
name: 1688169600
},
{
data: 75,
name: 1690848000
},
{
data: 59,
name: 1693526400
},
{
data: 57,
name: 1696118400
},
{
data: 63,
name: 1698796800
},
{
data: 71,
name: 1701388800
},
{
data: 82,
name: 1704067200
},
{
data: 78,
name: 1706745600
},
{
data: 70,
name: 1709251200
data: 0,
name: getTimestampsBy90day().today
}
]
}

50
src/views/screen/api.js
View File

@ -1,33 +1,10 @@
import axios from 'axios'
// 获取今天以及 90 天之前的日期,以 2024-06-01 的格式返回
function getDatesFormatted() {
// 获取今天的日期
const today = new Date()
// 获取90天前的日期
const ninetyDaysAgo = new Date(today)
ninetyDaysAgo.setDate(today.getDate() - 90)
// 格式化日期函数
function formatDate(date) {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
// 返回格式化后的日期
return {
today: formatDate(today),
ninetyDaysAgo: formatDate(ninetyDaysAgo)
}
}
import { getDatesFormattedBy90day, getTimestampsBy90day } from './util.js'
// 单位机时统计
export const getDepartDuration = () =>
axios
.post(`/screen_server/hpc/findTopByOrg?startDate=${getDatesFormatted().ninetyDaysAgo}&endDate=${getDatesFormatted().today}`)
.post(`/screen_server/hpc/findTopByOrg?startDate=${getDatesFormattedBy90day().ninetyDaysAgo}&endDate=${getDatesFormattedBy90day().today}`)
.then(function (response) {
return response.data
})
@ -38,7 +15,7 @@ export const getDepartDuration = () =>
// 软件机时统计
export const getSoftwareDuration = () =>
axios
.post(`/screen_server/hpc/findTopBySoft?startDate=${getDatesFormatted().ninetyDaysAgo}&endDate=${getDatesFormatted().today}`)
.post(`/screen_server/hpc/findTopBySoft?startDate=${getDatesFormattedBy90day().ninetyDaysAgo}&endDate=${getDatesFormattedBy90day().today}`)
.then(function (response) {
return response.data
})
@ -49,7 +26,7 @@ export const getSoftwareDuration = () =>
// 当前在用软件
export const getInUseSoftware = () =>
axios
.post(`/screen_server/hpc/findTopSoftList?startDate=${getDatesFormatted().ninetyDaysAgo}&endDate=${getDatesFormatted().today}`)
.post(`/screen_server/hpc/findTopSoftList?startDate=${getDatesFormattedBy90day().ninetyDaysAgo}&endDate=${getDatesFormattedBy90day().today}`)
.then(function (response) {
return response.data
})
@ -60,7 +37,7 @@ export const getInUseSoftware = () =>
// 用户机时用量
export const getUserUseTrend = () =>
axios
.post(`/screen_server/hpc/findTopByUser?startDate=${getDatesFormatted().ninetyDaysAgo}&endDate=${getDatesFormatted().today}`)
.post(`/screen_server/hpc/findTopByUser?startDate=${getDatesFormattedBy90day().ninetyDaysAgo}&endDate=${getDatesFormattedBy90day().today}`)
.then(function (response) {
return response.data
})
@ -70,7 +47,7 @@ export const getUserUseTrend = () =>
// 软件集成数量
export const getSoftwareIntegrate = () =>
axios
.post(`/screen_server/hpc/findSoftCount?startDate=${getDatesFormatted().ninetyDaysAgo}&endDate=${getDatesFormatted().today}`)
.post(`/screen_server/hpc/findSoftCount?startDate=${getDatesFormattedBy90day().ninetyDaysAgo}&endDate=${getDatesFormattedBy90day().today}`)
.then(function (response) {
return response.data
})
@ -89,28 +66,21 @@ export const getHelp = () =>
console.log(error)
})
// 实时利用率
const query = 'avg(1 - avg(rate(node_cpu_seconds_total{mode="idle"}[2m])) by (instance)) * 100'
export const getRealTimeUtilization = () =>
axios
.get(`/prometheus/api/v1/query?query=${encodeURIComponent(query)}`)
.get(`/prometheus/api/v1/query?query=${encodeURIComponent('avg(1 - avg(rate(node_cpu_seconds_total{mode="idle"}[2m])) by (instance)) * 100')}`)
.then(function (response) {
return response.data
})
.catch(function (error) {
console.log(error)
})
const query2 = 'avg(1 - avg(rate(node_cpu_seconds_total{mode="idle"}[2m]))) * 100'
const todayTimestamp = new Date().getTime()
const oneYearAgo = new Date()
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1)
const oneYearAgoTimestamp = oneYearAgo.getTime()
const start = Math.floor(oneYearAgoTimestamp / 1000)
const end = Math.floor(todayTimestamp / 1000)
const step = '1036800'
const step = '532800'
// 平均利用率趋势
export const getAverageUtilizationTrend = () =>
axios
.get(`/prometheus/api/v1/query_range?query=${encodeURIComponent(query2)}&start=${start}&end=${end}&step=${step}`)
.get(`/prometheus/api/v1/query_range?query=${encodeURIComponent('avg(1 - avg(rate(node_cpu_seconds_total{mode="idle"}[2m]))) * 100')}&start=${getTimestampsBy90day().ninetyDaysAgo}&end=${getTimestampsBy90day().today}&step=${step}`)
.then(function (response) {
return response.data
})

3
src/views/screen/components/ScrollTable/index.vue
View File

@ -36,7 +36,7 @@ export default {
}
},
setup(props) {
const getStyle = index => {
const getStyle = (index) => {
const width = props.columnWidth[index]
return width ? { width: width, flex: 'none' } : {}
}
@ -80,6 +80,7 @@ export default {
display: flex;
background: url('../../images/table-row.png');
background-repeat: no-repeat;
background-size: 100% 32px;
}
}
.table-body::-webkit-scrollbar {

BIN
src/views/screen/images/table-row2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 793 B

17
src/views/screen/index.vue
View File

@ -1,5 +1,5 @@
<template>
<FullScreenContainer :width="1920" :height="1080" :loading="loading">
<FullScreenContainer :width="1920" :height="1080" :loading="loading" @getScale="getScale">
<Header> </Header>
<div class="container">
<el-row class="full" :gutter="10">
@ -7,7 +7,7 @@
<div class="card mini-card card-border1">
<div class="card-title card-title-border1">平台实时利用率</div>
<div class="card-body">
<RealTimeUsed></RealTimeUsed>
<RealTimeUsed :scale="scale"></RealTimeUsed>
</div>
</div>
<div class="card card-border2">
@ -184,8 +184,15 @@ export default {
}
],
userUseTrend: [],
appDemandList: []
appDemandList: [],
scale: {
wRatio: 1,
hRatio: 1
}
})
const getScale = (scale) => {
state.scale = scale
}
const getDepartDurationList = async () => {
const res = await getDepartDuration()
state.departTrend = res.data.map((item, index) => {
@ -206,6 +213,7 @@ export default {
state.inUseApps = res.data.map((item, index) => {
return { ...item, rank: index + 1 }
})
if (state.inUseApps.length > 4) state.inUseApps.length = 4
}
const getUserUseTrendList = async () => {
@ -249,7 +257,8 @@ export default {
}
initData()
return {
...toRefs(state)
...toRefs(state),
getScale
}
}
}

35
src/views/screen/util.js Normal file
View File

@ -0,0 +1,35 @@
// 获取时间戳(秒)
export const getTimestamp = (date) => Math.floor(new Date(date).getTime() / 1000)
// 获取今天与 90 天之前的时间戳(秒)
export const getTimestampsBy90day = () => {
const today = new Date()
const ninetyDaysAgo = new Date(today)
ninetyDaysAgo.setDate(today.getDate() - 90)
return {
today: getTimestamp(today),
ninetyDaysAgo: getTimestamp(ninetyDaysAgo)
}
}
// 获取今天以及 90 天之前的日期,以 2024-06-01 的格式返回
export const getDatesFormattedBy90day = () => {
// 获取今天的日期
const today = new Date()
// 获取90天前的日期
const ninetyDaysAgo = new Date(today)
ninetyDaysAgo.setDate(today.getDate() - 90)
// 格式化日期函数
function formatDate(date) {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
// 返回格式化后的日期
return {
today: formatDate(today),
ninetyDaysAgo: formatDate(ninetyDaysAgo)
}
}