fix: m

src/views/screen/RealTimeUsed.vue

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

src/views/screen/UsedTrend.vue

@@ -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,
+          data: 0,
-          name: 1680307200
+          name: getTimestampsBy90day().ninetyDaysAgo
         },
         {
-          data: 60,
+          data: 0,
-          name: 1682899200
+          name: getTimestampsBy90day().today
-        },
-        {
-          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
         }
       ]
     }

src/views/screen/api.js

@@ -1,33 +1,10 @@
 import axios from 'axios'
-// 获取今天以及 90 天之前的日期,以 2024-06-01 的格式返回
+import { getDatesFormattedBy90day, getTimestampsBy90day } from './util.js'
-
-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)
-  }
-}
 
 // 单位机时统计
 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 step = '532800'
-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'
 // 平均利用率趋势
 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
     })

src/views/screen/components/ScrollTable/index.vue

@@ -18,7 +18,7 @@ export default {
   props: {
     options: {
       type: Object,
-      default: function() {
+      default: function () {
         return {}
       }
     },
@@ -27,7 +27,7 @@ export default {
     },
     columnWidth: {
       type: Array,
-      default: function() {
+      default: function () {
         return []
       }
     },
@@ -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 {

src/views/screen/index.vue

@@ -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
     }
   }
 }

src/views/screen/util.js

@@ -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)
+  }
+}