From a231bb9520bd58b49b9866a5a790aa2560c3312a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E5=90=AF=E9=BE=99?= <shiqilong@beyondcent.com>
Date: Thu, 25 Jul 2024 12:22:54 +0800
Subject: [PATCH] fix: m

---
 src/views/screen/RealTimeUsed.vue             |  18 +++++--
 src/views/screen/UsedTrend.vue                |  49 ++---------------
 src/views/screen/api.js                       |  50 ++++--------------
 .../screen/components/ScrollTable/index.vue   |   7 +--
 src/views/screen/images/table-row2.png        | Bin 0 -> 793 bytes
 src/views/screen/index.vue                    |  17 ++++--
 src/views/screen/util.js                      |  35 ++++++++++++
 7 files changed, 82 insertions(+), 94 deletions(-)
 create mode 100644 src/views/screen/images/table-row2.png
 create mode 100644 src/views/screen/util.js

diff --git a/src/views/screen/RealTimeUsed.vue b/src/views/screen/RealTimeUsed.vue
index cdcb3b6..9e27890 100644
--- a/src/views/screen/RealTimeUsed.vue
+++ b/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() {
diff --git a/src/views/screen/UsedTrend.vue b/src/views/screen/UsedTrend.vue
index 9ed8210..4840479 100644
--- a/src/views/screen/UsedTrend.vue
+++ b/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,
-          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
         }
       ]
     }
diff --git a/src/views/screen/api.js b/src/views/screen/api.js
index e0bb956..50226b7 100644
--- a/src/views/screen/api.js
+++ b/src/views/screen/api.js
@@ -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
     })
diff --git a/src/views/screen/components/ScrollTable/index.vue b/src/views/screen/components/ScrollTable/index.vue
index ac4ebe1..efd5b5e 100644
--- a/src/views/screen/components/ScrollTable/index.vue
+++ b/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 {
diff --git a/src/views/screen/images/table-row2.png b/src/views/screen/images/table-row2.png
new file mode 100644
index 0000000000000000000000000000000000000000..c8b6af5483a57ebb475663fe972391d9dc90588a
GIT binary patch
literal 793
zcmeAS@N?(olHy`uVBq!ia0y~yVCn<16*$;{<ec`O;XsP9ILO_JVcj{Imq6Leo-U3d
z6>)Fx?(~y!6k)ya{X{}l9dqUOjc2z%kgYWT{JKTgP{?D-RqtD|bFa^ASu)9L*TJiE
zg(mO*y!y7##_orcKU)0zs_4+bz{teHA)p`-c&shrk&5!W&u{*`(lhouDWCw8ixAQf
z<gfhp#Cg7;tQuG`Sf=~v#v_4+Q}|&bjjJ4Hc0G3QPM&%SVx&WZ!)>PE!kSeU+hm!y
zt3!>u!ussdkCTrgwih))t-i43K#0tI%|74d2cB|5t(9g0s=E1T2jgi$sQC`3nUV|N
z%&ULdU4Q&?5#OD;P~96`6SVpkTI3xpYJ-`##-TH@u;ycEVU8J-o*&eQH`ENokLPzi
zHq&1Y^e)&jXSsZieta4rbJ?HIOqy97*@YFkg=?ZM9ie(Nq82>aV6pGlJ$I4r<ja8t
zl~6Yw*mYow#Xh;NWR1Q{POy;NpaHZ<zH9LWcnGfHnxb+1&AmS%GOVpoH##JE7yfzL
zyLbUYk@)d5$z|fsg<p;ZhQVCOGL3bad7t=xQFl#vRISkIOD_C#**!`o6>i#sO&0I&
z|ND9@&<n0pt2<e)Sf@|SJrJ%lLQvv9P~G3p#{zwj)IE-n$^YeHZ>gaTN(kVPInAWn
zwtm(9`w=orTi`CPEtJ{6O0H|MdEX+0XO#@}``C{nnfIzYxx8}6>5kwqxM?iYSiFun
zztiX6u3Bs^bE@OG#sQc`EF3*gH@I}_NUBQ~{+DNLZkPRKo$(Hs))_oq{an^LB{Ts5
DAjb<N

literal 0
HcmV?d00001

diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index 3486ea7..d320c66 100644
--- a/src/views/screen/index.vue
+++ b/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
     }
   }
 }
diff --git a/src/views/screen/util.js b/src/views/screen/util.js
new file mode 100644
index 0000000..2ba4f09
--- /dev/null
+++ b/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)
+  }
+}