修改首页

src/store/api/core/statistics.js

@@ -28,9 +28,45 @@ export const StatisticsStore = defineStore('statistics', () => {
     const res = await axios.$get(`${url}/resource`, cond)
     return res
   }
-  return {
-    work,
-    user,
-    resource
+  const natural = async (payload) => {
+    const res = await axios.$get(`${url}/natural`, payload)
+    return res
+  }
+  const task = async (payload) => {
+    const res = await axios.$get(`${url}/task`, payload)
+    return res
+  }
+  const total = async (payload) => {
+    const res = await axios.$get(`${url}/total`, payload)
+    return res
+  }
+  const echarts1 = async (payload) => {
+    const res = await axios.$get(`${url}/echarts1`, payload)
+    return res
+  }
+  const echarts2 = async (payload) => {
+    const res = await axios.$get(`${url}/echarts2`, payload)
+    return res
+  }
+  const echarts3 = async (payload) => {
+    const res = await axios.$get(`${url}/echarts3`, payload)
+    return res
+  }
+  const echarts4 = async (payload) => {
+    const res = await axios.$get(`${url}/echarts4`, payload)
+    return res
+  }
+  const echarts5 = async (payload) => {
+    const res = await axios.$get(`${url}/echarts5`, payload)
+    return res
+  }
+  const echarts6 = async (payload) => {
+    const res = await axios.$get(`${url}/echarts6`, payload)
+    return res
+  }
+  const echarts7 = async (payload) => {
+    const res = await axios.$get(`${url}/echarts7`, payload)
+    return res
   }
+  return { echarts1, echarts2, echarts3, echarts4, echarts5, echarts6, echarts7, total, task, natural, work, user, resource }
 })

src/views/control/resource/echarts/echarts1.vue

@@ -8,12 +8,17 @@
 }
 </style>
 <script setup>
+import { get } from 'lodash-es'
 import * as echarts from 'echarts'
 const echarts1 = ref()
+const props = defineProps({
+  data: { type: Array, default: () => [] }
+})
 onMounted(() => {
   echarts1View()
 })
 function echarts1View() {
+  const data = get(props, 'data')
   const myChart1 = echarts.init(echarts1.value)
   const option1 = {
     tooltip: {
@@ -37,10 +42,7 @@ function echarts1View() {
           },
           labelLine: { show: true }
         },
-        data: [
-          { value: 5, name: '满载' },
-          { value: 24, name: '空闲' }
-        ],
+        data,
         emphasis: {
           itemStyle: {
             shadowBlur: 10,

src/views/control/resource/index.vue

@@ -54,7 +54,7 @@
                 </div>
               </template>
               <div class="echarts">
-                <echarts1></echarts1>
+                <echarts1 :data="item.data"></echarts1>
               </div>
             </el-card>
           </el-col>
@@ -71,33 +71,36 @@ import partition from '/images/partition.png'
 import echarts1 from './echarts/echarts1.vue'
 // 接口
 import { PartitionStore } from '@/store/api/core/partition'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const partitionStore = PartitionStore()
 // 路由
 const router = useRouter()
 // 分区总数
-const partition_total = ref(2)
-const cpu = ref({ total: 5464, yes: 1224, n0: 0 })
-const gpu = ref({ total: 0, yes: 0, n0: 0 })
-const statusList = ref([
-  { id: 1, total: 11, name: '满载', type: 'danger' },
-  { id: 2, total: 5, name: '半载', type: 'warning' },
-  { id: 3, total: 33, name: '空闲', type: 'primary' },
-  { id: 4, total: 0, name: '其他', type: 'info' }
-])
-const list = ref([
-  { id: 1, name: 'cu-amd', cpu: '616/1568', gpu: '0/0' },
-  { id: 2, name: 'computerPartion', cpu: '608/3840', gpu: '0/0' }
-])
-
+const partition_total = ref(0)
+const cpu = ref({})
+const gpu = ref({})
+const statusList = ref([])
+const list = ref([])
 // 加载中
 const loading = ref(false)
 
 // 请求
 onMounted(async () => {
   loading.value = true
+  await searchOther()
   await search()
   loading.value = false
 })
+const searchOther = async () => {
+  const res = await statisticsStore.natural()
+  if (res.errcode == '0') {
+    cpu.value = res.data.cpu
+    gpu.value = res.data.gpu
+    statusList.value = res.data.statusList
+    list.value = res.data.list
+  }
+}
 const search = async (query = { skip: 0, limit: 1 }) => {
   const info = { skip: query.skip, limit: query.limit }
   const res = await partitionStore.query(info)

src/views/home/echarts/echarts1.vue

@@ -9,11 +9,17 @@
 </style>
 <script setup>
 import * as echarts from 'echarts'
+import { get } from 'lodash-es'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts1 = ref()
-onMounted(() => {
-  echarts1View()
+onMounted(async () => {
+  const res = await statisticsStore.echarts1()
+  if (res.errcode == '0') await echarts1View(res.data)
 })
-function echarts1View() {
+function echarts1View(info) {
+  const nameList = get(info, 'nameList')
+  const data = get(info, 'data')
   const myChart1 = echarts.init(echarts1.value)
   const option1 = {
     tooltip: {
@@ -50,12 +56,12 @@ function echarts1View() {
           fontSize: 14 //更改坐标轴文字大小
         }
       },
-      data: ['computerPartiton', 'cu-amd']
+      data: nameList
     },
     yAxis: {},
     series: [
       {
-        data: [28, 20],
+        data,
         type: 'bar',
         label: {
           show: true, // 显示标签

src/views/home/echarts/echarts2.vue

@@ -9,11 +9,16 @@
 </style>
 <script setup>
 import * as echarts from 'echarts'
+import { get } from 'lodash-es'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts2 = ref()
-onMounted(() => {
-  echarts2View()
+onMounted(async () => {
+  const res = await statisticsStore.echarts2()
+  if (res.errcode == '0') await echarts2View(res.data)
 })
-function echarts2View() {
+function echarts2View(info) {
+  const data = get(info, 'data')
   const myChart2 = echarts.init(echarts2.value)
   const option2 = {
     tooltip: {
@@ -37,10 +42,7 @@ function echarts2View() {
           },
           labelLine: { show: true }
         },
-        data: [
-          { value: 5, name: 'PENDING' },
-          { value: 24, name: 'RUNNING' }
-        ],
+        data,
         emphasis: {
           itemStyle: {
             shadowBlur: 10,

src/views/home/echarts/echarts3.vue

@@ -9,11 +9,17 @@
 </style>
 <script setup>
 import * as echarts from 'echarts'
+import { get } from 'lodash-es'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts3 = ref()
-onMounted(() => {
-  echarts3View()
+onMounted(async () => {
+  const res = await statisticsStore.echarts3()
+  if (res.errcode == '0') await echarts3View(res.data)
 })
-function echarts3View() {
+function echarts3View(info) {
+  const nameList = get(info, 'nameList')
+  const data = get(info, 'data')
   const myChart3 = echarts.init(echarts3.value)
   const option3 = {
     tooltip: {
@@ -60,7 +66,7 @@ function echarts3View() {
           fontSize: 14 //更改坐标轴文字大小
         }
       },
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      data: nameList
     },
     yAxis: {
       type: 'value',
@@ -115,7 +121,7 @@ function echarts3View() {
           }
         },
         showSymbol: true, //去除面积图节点圆
-        data: [148, 108, 96, 95, 84, 69, 123, 160, 190, 123, 251, 220]
+        data
       }
     ]
   }

src/views/home/echarts/echarts4.vue

@@ -9,11 +9,17 @@
 </style>
 <script setup>
 import * as echarts from 'echarts'
+import { get } from 'lodash-es'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts4 = ref()
-onMounted(() => {
-  echarts4View()
+onMounted(async () => {
+  const res = await statisticsStore.echarts4()
+  if (res.errcode == '0') await echarts4View(res.data)
 })
-function echarts4View() {
+function echarts4View(info) {
+  const nameList = get(info, 'nameList')
+  const data = get(info, 'data')
   const myChart4 = echarts.init(echarts4.value)
   const option4 = {
     tooltip: {
@@ -60,7 +66,7 @@ function echarts4View() {
           fontSize: 14 //更改坐标轴文字大小
         }
       },
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      data: nameList
     },
     yAxis: {
       type: 'value',
@@ -115,7 +121,7 @@ function echarts4View() {
           }
         },
         showSymbol: true, //去除面积图节点圆
-        data: [148, 108, 96, 95, 84, 69, 123, 160, 190, 123, 251, 220]
+        data
       }
     ]
   }

src/views/home/echarts/echarts5.vue

@@ -9,11 +9,17 @@
 </style>
 <script setup>
 import * as echarts from 'echarts'
+import { get } from 'lodash-es'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts5 = ref()
-onMounted(() => {
-  echarts5View()
+onMounted(async () => {
+  const res = await statisticsStore.echarts5()
+  if (res.errcode == '0') await echarts5View(res.data)
 })
-function echarts5View() {
+function echarts5View(info) {
+  const nameList = get(info, 'nameList')
+  const data = get(info, 'data')
   const myChart5 = echarts.init(echarts5.value)
   const option5 = {
     tooltip: {
@@ -60,7 +66,7 @@ function echarts5View() {
           fontSize: 14 //更改坐标轴文字大小
         }
       },
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      data: nameList
     },
     yAxis: {
       type: 'value',
@@ -115,7 +121,7 @@ function echarts5View() {
           }
         },
         showSymbol: true, //去除面积图节点圆
-        data: [148, 108, 96, 95, 84, 69, 123, 160, 190, 123, 251, 220]
+        data
       }
     ]
   }

src/views/home/echarts/echarts6.vue

@@ -9,13 +9,17 @@
 </style>
 <script setup>
 import * as echarts from 'echarts'
+import { get } from 'lodash-es'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts6 = ref()
-onMounted(() => {
-  echarts6View()
+onMounted(async () => {
+  const res = await statisticsStore.echarts6()
+  if (res.errcode == '0') await echarts6View(res.data)
 })
-function echarts6View() {
-  let ydata = ['liuxiao', 'zhangs']
-  let xdata = [12, 13]
+function echarts6View(info) {
+  let xdata = get(info, 'xdata')
+  let ydata = get(info, 'ydata')
   const myChart6 = echarts.init(echarts6.value)
   const option6 = {
     tooltip: {

src/views/home/echarts/echarts7.vue

@@ -9,13 +9,17 @@
 </style>
 <script setup>
 import * as echarts from 'echarts'
+import { get } from 'lodash-es'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts7 = ref()
-onMounted(() => {
-  echarts7View()
+onMounted(async () => {
+  const res = await statisticsStore.echarts7()
+  if (res.errcode == '0') await echarts7View(res.data)
 })
-function echarts7View() {
-  let ydata = ['liuxioa', 'chusod', 'cusnsn', 'quanq', 'iuysk']
-  let xdata = [12, 13, 14, 15, 16]
+function echarts7View(info) {
+  let xdata = get(info, 'xdata')
+  let ydata = get(info, 'ydata')
   const myChart7 = echarts.init(echarts7.value)
   const option7 = {
     tooltip: {

src/views/home/index.vue

@@ -8,17 +8,17 @@
               <div class="one_1">
                 <div class="title">
                   <span>节点</span>
-                  <span>{{ nodeList[0].num || 0 }}</span>
+                  <span>{{ nodeList[0]?.num || 0 }}</span>
                 </div>
                 <el-image class="image" :src="home1" fit="fill" />
               </div>
               <div class="one_2">
                 <el-divider style="margin: 10px 0"></el-divider>
                 <el-switch v-model="value1" disabled />
-                <span>开机({{ nodeList[1].num || 0 }})</span>
+                <span>开机({{ nodeList[1]?.num || 0 }})</span>
                 <el-divider direction="vertical"></el-divider>
                 <el-switch v-model="value2" disabled />
-                <span>关机({{ nodeList[2].num || 0 }})</span>
+                <span>关机({{ nodeList[2]?.num || 0 }})</span>
               </div>
             </el-card>
           </el-col>
@@ -27,17 +27,17 @@
               <div class="one_1">
                 <div class="title">
                   <span>CPU(核)</span>
-                  <span>{{ cpuList[0].num || 0 }}</span>
+                  <span>{{ cpuList[0]?.num || 0 }}</span>
                 </div>
                 <el-image class="image" :src="home2" fit="fill" />
               </div>
               <div class="one_2">
                 <el-divider style="margin: 10px 0"></el-divider>
                 <el-switch v-model="value1" disabled />
-                <span>已用({{ cpuList[1].num || 0 }})</span>
+                <span>已用({{ cpuList[1]?.num || 0 }})</span>
                 <el-divider direction="vertical"></el-divider>
                 <el-switch v-model="value2" disabled />
-                <span>未用({{ cpuList[2].num || 0 }})</span>
+                <span>未用({{ cpuList[2]?.num || 0 }})</span>
               </div>
             </el-card>
           </el-col>
@@ -46,12 +46,12 @@
               <div class="one_1">
                 <div class="title">
                   <span>用户总数</span>
-                  <span>{{ userList[0].num || 0 }}</span>
+                  <span>{{ userList[0]?.num || 0 }}</span>
                 </div>
                 <el-image class="image" :src="home3" fit="fill" />
               </div>
               <div class="one_3">
-                <el-progress :percentage="100" :stroke-width="15" :show-text="false" striped striped-flow :duration="600" />
+                <el-progress :percentage="100" :stroke-width="15" :show-text="false" striped striped-flow :duration="100" />
               </div>
             </el-card>
           </el-col>
@@ -60,7 +60,7 @@
               <div class="one_1">
                 <div class="title">
                   <span>在线人数</span>
-                  <span>{{ userList[1].num || 0 }}</span>
+                  <span>{{ userList[1]?.num || 0 }}</span>
                 </div>
                 <el-image class="image" :src="home4" fit="fill" />
               </div>
@@ -179,35 +179,36 @@ import echarts4 from './echarts/echarts4.vue'
 import echarts5 from './echarts/echarts5.vue'
 import echarts6 from './echarts/echarts6.vue'
 import echarts7 from './echarts/echarts7.vue'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 // 开关状态
 const value1 = ref(true)
 const value2 = ref(false)
 // 节点情况
-const nodeList = ref([
-  { name: '节点总数', num: 49 },
-  { name: '开机总数', num: 0 },
-  { name: '关机总数', num: 49 }
-])
+const nodeList = ref([])
 // CPU情况
-const cpuList = ref([
-  { name: 'CPU总数', num: 5464 },
-  { name: '已用总数', num: 1280 },
-  { name: '未用总数', num: 4184 }
-])
+const cpuList = ref([])
 // 用户数量
-const userList = ref([
-  { name: '用户总数', num: 22 },
-  { name: '在线人数', num: 1 }
-])
+const userList = ref([])
 // 作业总数
-const work_total = ref(29)
+const work_total = ref(0)
 // 加载中
 const loading = ref(false)
 // 请求
 onMounted(async () => {
   loading.value = true
+  await search()
   loading.value = false
 })
+const search = async () => {
+  const res = await statisticsStore.total()
+  if (res.errcode == '0') {
+    nodeList.value = res.data.nodeList
+    cpuList.value = res.data.cpuList
+    userList.value = res.data.userList
+    work_total.value = res.data.work_total
+  }
+}
 </script>
 <style scoped lang="scss">
 .main {

src/views/job/monitor/echarts/echarts1.vue

@@ -8,12 +8,18 @@
 }
 </style>
 <script setup>
+import { get } from 'lodash-es'
 import * as echarts from 'echarts'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts1 = ref()
-onMounted(() => {
-  echarts1View()
+onMounted(async () => {
+  const res = await statisticsStore.task()
+  if (res.errcode == '0') await echarts1View(res.data)
 })
-function echarts1View() {
+function echarts1View(info) {
+  const nameList = get(info, 'nameList1')
+  const data = get(info, 'data1')
   const myChart1 = echarts.init(echarts1.value)
   const option1 = {
     tooltip: {
@@ -32,8 +38,6 @@ function echarts1View() {
         }
       }
     },
-
-    // },
     grid: {
       // 控制图表的位置
       left: '5%',
@@ -50,12 +54,12 @@ function echarts1View() {
           fontSize: 14 //更改坐标轴文字大小
         }
       },
-      data: ['运行', '排队', '挂起', '其他']
+      data: nameList
     },
     yAxis: {},
     series: [
       {
-        data: [23, 5, 0, 0],
+        data,
         type: 'bar',
         label: {
           show: true, // 显示标签

src/views/job/monitor/echarts/echarts2.vue

@@ -8,14 +8,18 @@
 }
 </style>
 <script setup>
+import { get } from 'lodash-es'
 import * as echarts from 'echarts'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts2 = ref()
-onMounted(() => {
-  echarts2View()
+onMounted(async () => {
+  const res = await statisticsStore.task()
+  if (res.errcode == '0') await echarts2View(res.data)
 })
-function echarts2View() {
-  let ydata = ['warp', 'warp', 'warp', 'warp', 'qe-250']
-  let xdata = [10, 11, 12, 13, 50]
+function echarts2View(info) {
+  let xdata = get(info, 'xdata2')
+  let ydata = get(info, 'ydata2')
   const myChart2 = echarts.init(echarts2.value)
   const option2 = {
     tooltip: {

src/views/job/monitor/echarts/echarts3.vue

@@ -8,19 +8,20 @@
 }
 </style>
 <script setup>
+import { get } from 'lodash-es'
 import * as echarts from 'echarts'
+import { StatisticsStore } from '@/store/api/core/statistics'
+const statisticsStore = StatisticsStore()
 const echarts3 = ref()
-onMounted(() => {
-  echarts3View()
+onMounted(async () => {
+  const res = await statisticsStore.task()
+  if (res.errcode == '0') await echarts3View(res.data)
 })
-function echarts3View() {
+function echarts3View(info) {
+  const rawData = get(info, 'rawData3')
+  const nameList = get(info, 'nameList3')
+  const data = get(info, 'data3')
   const myChart3 = echarts.init(echarts3.value)
-  const rawData = [
-    [100, 302, 301, 334, 390, 330, 320],
-    [320, 132, 101, 134, 90, 230, 210],
-    [0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0],
-  ]
   const totalData = []
   for (let i = 0; i < rawData[0].length; ++i) {
     let sum = 0
@@ -29,7 +30,6 @@ function echarts3View() {
     }
     totalData.push(sum)
   }
-
   const grid = {
     left: '15%',
     right: '5%',
@@ -38,7 +38,7 @@ function echarts3View() {
     containLabel: false
   }
 
-  const series = ['运行', '排队', '挂起', '其他'].map((name, sid) => {
+  const series = nameList.map((name, sid) => {
     return {
       name,
       type: 'bar',
@@ -57,7 +57,7 @@ function echarts3View() {
     },
     xAxis: {
       type: 'category',
-      data: ['分区1', '分区2', '分区3', '分区4', '分区5']
+      data
     },
     series
   }