fix: 首页接口对接

2024-08-27 17:49:54 +08:00 · 2024-08-27 17:49:54 +08:00 · 82fbd9bda3
parent a9d4bbc24d
commit 82fbd9bda3
5 changed files with 115 additions and 37 deletions
--- a/webs/sms-web/src/services/system/dashboard.js
+++ b/webs/sms-web/src/services/system/dashboard.js
@ -109,3 +109,18 @@ export function getAppList(params) {
 export function getStatisticsDisplay(params) {
  return request.get(`${dashboardUrl}/userData/static`, { params })
 }
+
+// 七天告警趋势
+export function getSevenDayWarnTrend(params) {
+  return request.get(`${dashboardUrl}/sevenDayWarnTrend`, { params })
+}
+
+// 告警统计
+export function getOneDayWarnCount(params) {
+  return request.get(`${dashboardUrl}/oneDayWarnCount`, { params })
+}
+
+// 告警列表
+export function getWarnList(params) {
+  return request.get(`${dashboardUrl}/warnList`, { params })
+}
--- a/webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/AlarmHandling.vue
+++ b/webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/AlarmHandling.vue
@ -20,7 +20,7 @@
 import { ref } from 'vue'
 import LineCharts from './echarts/LineCharts.vue'
 import ItemCard from './ItemCard.vue'
-import { getAlarmChart } from 'services/monitor/index'
+import { getOneDayWarnCount, getSevenDayWarnTrend } from 'services/system/dashboard'
 import echarts from '@cmp/cmp-echarts/hooks/echarts'
 export const colorMap = ['rgba(255, 0, 0, 1)', 'rgba(245, 167, 45, 1)', 'rgba(18, 185, 242, 1)', 'rgba(24, 144, 255, 1)']
 const chartSetting = {
@ -34,7 +34,7 @@ const chartSetting = {
 }
 export default {
  components: { ItemCard, LineCharts },
-  setup(props, context) {
+  setup() {
    const countData = ref([
      {
        name: '紧急告警',
@ -54,18 +54,40 @@ export default {
      }
    ])
    ;(async function () {
-      const res = await getAlarmChart({ action: 'pieChart' })
-      countData.value = res.data
+      const res = await getOneDayWarnCount()
+      if (!res.success) return
+      countData.value[0].value = res.data.critical
+      countData.value[1].value = res.data.major
+      countData.value[2].value = res.data.minor
+      countData.value[3].value = res.data.warning
    })()
    const lineData = ref({
      keys: [],
      values: []
    })
    ;(async function () {
-      const end = new Date().setHours(0, 0, 0, 0) / 1000
      // 一天是86400秒
-      const res = await getAlarmChart({ action: 'barChart', start: end - 86400 * 7, end })
-      res.data.values = res.data.values.map((item, index) => {
+      const res = await getSevenDayWarnTrend()
+      if (!res.success) return
+      const names = Object.keys(res.data)
+      const nameMap = {
+        1: '紧急告警',
+        2: '重要告警',
+        3: '次要告警',
+        4: '提示告警'
+      }
+      if (!names.length) return
+
+      const result = {
+        keys: res.data[names[0]].map(({ date }) => date),
+        values: names.map(name => {
+          return {
+            name: nameMap[name],
+            data: res.data[name].map(({ count }) => count)
+          }
+        })
+      }
+      result.values = result.values.map((item, index) => {
        item.series = {
          areaStyle: {
            opacity: 0.1,
@ -83,7 +105,7 @@ export default {
        }
        return item
      })
-      lineData.value = res.data
+      lineData.value = result
    })()
    return {
      colorMap,
--- a/webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/PlatformCapacity.vue
+++ b/webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/PlatformCapacity.vue
@ -23,10 +23,10 @@ export default {
  data() {
    return {
      numList: [
-        { label: '服务器（台）', value: 36, bgImg: 服务器, background: 'rgba(231, 242, 252, 1)' },
-        { label: '虚拟机（台）', value: 20, bgImg: 虚拟机, background: 'rgba(250, 243, 233, 1)' },
-        { label: '网络设备（台）', value: 20, bgImg: 网络设备, background: 'rgba(227, 245, 252, 1)' },
-        { label: '安全设备（台）', value: 20, bgImg: 安全设备, background: 'rgba(235, 246, 239, 1)' }
+        { label: '服务器（台）', value: 0, bgImg: 服务器, background: 'rgba(231, 242, 252, 1)' },
+        { label: '虚拟机（台）', value: 0, bgImg: 虚拟机, background: 'rgba(250, 243, 233, 1)' },
+        { label: '网络设备（台）', value: 0, bgImg: 网络设备, background: 'rgba(227, 245, 252, 1)' },
+        { label: '安全设备（台）', value: 0, bgImg: 安全设备, background: 'rgba(235, 246, 239, 1)' }
      ]
    }
  }
--- a/webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/StatisticsDisplay.vue
+++ b/webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/StatisticsDisplay.vue
@ -30,13 +30,13 @@ export default {
  data() {
    return {
      numList: [
-        { label: '当前用户授权应用数', value: 0, bgImg: 当前用户授权应用数 },
-        { label: '数据权限申请数量', value: 0, bgImg: 数据权限申请数量 }
+        { label: '应用授权个数', value: 0, bgImg: 当前用户授权应用数 },
+        { label: '运维任务个数', value: 0, bgImg: 数据权限申请数量 }
      ],
      statistics: [
-        { label: '数据调度任务量', value: 0 },
-        { label: '运维任务申请表', value: 0 },
-        { label: '日志审计任务量', value: 0 }
+        { label: '云资源申请', value: 0 },
+        { label: '数据调度申请', value: 0 },
+        { label: '数据权限申请', value: 0 }
      ]
    }
  },
@ -48,12 +48,11 @@ export default {
    getItemList() {
      getStatisticsDisplay().then(data => {
        if (data.success) {
-          this.numList[0].value = data.data.userAppCount
-          this.numList[1].value = data.data.userAuthList
-          // 还有两个数据暂时没找到第三方接口
-          // this.statistics[0].value = data.data.
-          this.statistics[1].value = data.data.taskCount
-          // this.statistics[2].value = data.data.
+          this.numList[0].value = data.data.find(item => item.title === '应用授权个数')?.num || 0
+          this.numList[1].value = data.data.find(item => item.title === '运维任务个数')?.num || 0
+          this.statistics[0].value = data.data.find(item => item.title === '云资源申请')?.num || 0
+          this.statistics[1].value = data.data.find(item => item.title === '数据调度申请')?.num || 0
+          this.statistics[2].value = data.data.find(item => item.title === '数据权限申请')?.num || 0
        }
      })
    }
--- a/webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/WarningList.vue
+++ b/webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/WarningList.vue
@ -2,12 +2,16 @@
  <ItemCard title="告警列表" v-bind="$attrs">
    <cb-table :data="tableList" :params="params" :get-list="getItemList" :total="total">
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
-      <el-table-column show-overflow-tooltip label="标题" prop="name"></el-table-column>
-      <el-table-column show-overflow-tooltip label="级别" prop="level"></el-table-column>
-      <el-table-column show-overflow-tooltip label="告警类型" prop="type"></el-table-column>
-      <el-table-column show-overflow-tooltip label="告警来源" prop="time"></el-table-column>
-      <el-table-column show-overflow-tooltip label="时间" prop="time"></el-table-column>
-      <el-table-column show-overflow-tooltip label="操作" width="50">
+      <el-table-column show-overflow-tooltip label="标题" prop="alarmName"></el-table-column>
+      <el-table-column show-overflow-tooltip label="级别">
+        <template slot-scope="scope">
+          <div class="flex"><img :src="getSeverity(scope.row.severity).icon" alt="" /> {{ getSeverity(scope.row.severity).text }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column show-overflow-tooltip label="告警类型" prop="typeName"></el-table-column>
+      <el-table-column show-overflow-tooltip label="告警来源" prop="sourceName"></el-table-column>
+      <el-table-column show-overflow-tooltip label="时间" prop="createTime"></el-table-column>
+      <el-table-column show-overflow-tooltip label="操作" width="80">
        <template slot-scope="scope">
          <cb-link @click="handleWarningOperation(scope.row)">查看工单</cb-link>
        </template>
@ -18,8 +22,12 @@

 <script>
 import ItemCard from './ItemCard.vue'
-// import { mockHttp } from 'services/system/dashboard'
-
+import { getWarnList } from 'services/system/dashboard'
+import 严重 from './images/警告级别-严重.png'
+import 重要 from './images/警告级别-重要.png'
+import 次要 from './images/警告级别-次要.png'
+import 常规 from './images/警告级别-常规.png'
+import dayjs from 'utils/day'
 export default {
  components: { ItemCard },
  data() {
@ -32,14 +40,41 @@ export default {
      total: 0
    }
  },
+  created() {
+    this.getItemList()
+  },
  methods: {
+    getSeverity(val) {
+      const map = {
+        1: {
+          text: '严重告警',
+          icon: 严重
+        },
+        2: {
+          text: '重要告警',
+          icon: 重要
+        },
+        3: {
+          text: '次要告警',
+          icon: 次要
+        },
+        4: {
+          text: '常规告警',
+          icon: 常规
+        }
+      }
+      return map[val] || { text: '未知', icon: '' }
+    },
    getItemList() {
-      // mockHttp(this.params).then(data => {
-      //   if (data.success) {
-      //     this.tableList = data.data.rows
-      //     this.total = data.data.total
-      //   }
-      // })
+      getWarnList(this.params).then(data => {
+        if (data.success) {
+          this.tableList = data.data.map(item => {
+            item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
+            return item
+          })
+          // this.total = data.data.total
+        }
+      })
    },
    handleWarningOperation(row) {
      console.log('处理告警', row)
@ -47,3 +82,10 @@ export default {
  }
 }
 </script>
+<style scoped>
+.flex {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+}
+</style>