|
|
@@ -1,34 +1,139 @@
|
|
|
<template>
|
|
|
-<a-card>
|
|
|
- <a-row :gutter="[8, 8]" justify="space-between" >
|
|
|
+ <!-- <a-row :gutter="[8, 8]" justify="space-between" >
|
|
|
<a-col :lg="5" :sm="1" :md="3" v-for="item in state.statsSource" :key="item.key">
|
|
|
<a-card style="width: 300px" :title="item.name" >
|
|
|
<div style="font-size: 18px;" >{{item.value}}</div>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
+ </a-row> -->
|
|
|
+ <a-row :gutter="[8, 8]">
|
|
|
+ <a-col :xl="12" :xs="24" :md="24" >
|
|
|
+ <a-card>
|
|
|
+ <template #title >
|
|
|
+ <upload-outlined /> 数据监控
|
|
|
+ </template>
|
|
|
+ <a-row style="width: 100%;" >
|
|
|
+ <a-col :span="8" >
|
|
|
+ <div class="statis-item" >
|
|
|
+ <div>{{state.statsSource.transportSuccessCounter?.value}}</div>
|
|
|
+ <div><check-circle-two-tone two-tone-color="#52c41a" /> {{state.statsSource.transportSuccessCounter?.name}}</div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8" >
|
|
|
+ <div class="statis-item" >
|
|
|
+ <div>{{state.statsSource.transportFailCounter?.value}}</div>
|
|
|
+ <div> <close-circle-two-tone two-tone-color="#eb2f96" /> {{ state.statsSource.transportFailCounter?.name }}</div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <div class="statis-item" >
|
|
|
+ <div>{{state.statsSource.transportTotalCounter?.value}}</div>
|
|
|
+ <div><pie-chart-two-tone /> {{state.statsSource.transportTotalCounter?.name}}</div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="12" :xs="24" :md="24" >
|
|
|
+ <a-card>
|
|
|
+ <template #title >
|
|
|
+ <pull-request-outlined color="#eb2f96" />设备请求
|
|
|
+ </template>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="8" >
|
|
|
+ <div class="statis-item" >
|
|
|
+ <div>{{state.statsSource.transportReqSuccessCounter?.value}}</div>
|
|
|
+ <div> <check-circle-two-tone two-tone-color="#52c41a"/> {{ state.statsSource.transportReqSuccessCounter?.name }}</div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8" >
|
|
|
+ <div class="statis-item" >
|
|
|
+ <div>{{state.statsSource.transportReqFailCounter?.value}}</div>
|
|
|
+ <div> <close-circle-two-tone two-tone-color="#eb2f96" /> {{ state.statsSource.transportReqFailCounter?.name }}</div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8" >
|
|
|
+ <div class="statis-item" >
|
|
|
+ <div>{{state.statsSource.transportReqFailCounter?.value}}</div>
|
|
|
+ <div><pie-chart-two-tone /> {{state.statsSource.transportReqFailCounter?.name}}</div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
</a-row>
|
|
|
-</a-card>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="12" :xs="24" :md="24" >
|
|
|
+ <a-card>
|
|
|
+ <template #title >
|
|
|
+ <video-camera-add-outlined /> 发送到设备
|
|
|
+ </template>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="8" >
|
|
|
+ <div class="statis-item" >
|
|
|
+ <div>{{ state.statsSource.toTransportSuccessCounter?.value }}</div>
|
|
|
+ <div> <check-circle-two-tone two-tone-color="#52c41a"/> {{ state.statsSource.toTransportSuccessCounter?.name }}</div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8" >
|
|
|
+ <div class="statis-item" >
|
|
|
+ <div>{{ state.statsSource.toTransportFailCounter?.value }}</div>
|
|
|
+ <div> <close-circle-two-tone two-tone-color="#eb2f96" /> {{ state.statsSource.toTransportFailCounter?.name }}</div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8" >
|
|
|
+ <div class="statis-item" >
|
|
|
+ <div>{{ state.statsSource.toTransportTotalCounter?.value }}</div>
|
|
|
+ <div><pie-chart-two-tone /> {{state.statsSource.toTransportTotalCounter?.name}}</div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+<!-- <check-circle-outlined /> -->
|
|
|
+<!-- <close-circle-outlined /> -->
|
|
|
+<!-- <pie-chart-outlined /> -->
|
|
|
+<!-- <check-circle-two-tone /> -->
|
|
|
</template>
|
|
|
<script lang='ts' setup >
|
|
|
import { DevOpsController } from '@/controller/iot/devOps'
|
|
|
import { onMounted, reactive } from 'vue'
|
|
|
+import {
|
|
|
+ UploadOutlined, PullRequestOutlined, VideoCameraAddOutlined,
|
|
|
+ CheckCircleTwoTone, CloseCircleTwoTone, PieChartTwoTone
|
|
|
+} from '@ant-design/icons-vue'
|
|
|
+// {key: string, name: string, value: string}[]
|
|
|
|
|
|
-const state = reactive<{
|
|
|
- statsSource: {key: string, name: string, value: string}[]
|
|
|
-}>({
|
|
|
- statsSource: []
|
|
|
+const state = reactive < {
|
|
|
+ statsSource: Partial<Record<IOT.API.DEVOPS.statsType, {
|
|
|
+ key: string,
|
|
|
+ name: string,
|
|
|
+ value: string
|
|
|
+ }>>
|
|
|
+} > ({
|
|
|
+ statsSource: {}
|
|
|
})
|
|
|
|
|
|
const getStats = async () => {
|
|
|
const { data } = await DevOpsController.pageStats()
|
|
|
- state.statsSource = data.map(item => {
|
|
|
- return {
|
|
|
+ const obj: Record<string, any> = {}
|
|
|
+
|
|
|
+ data.forEach(item => {
|
|
|
+ obj[item.label] = {
|
|
|
key: item.label,
|
|
|
- name: DevOpsController.statsMap.get(item.label)?.name,
|
|
|
+ name: DevOpsController.statsMap.get(item.label)?.aliasName,
|
|
|
value: item.dataValue
|
|
|
}
|
|
|
})
|
|
|
- console.log(state.statsSource)
|
|
|
+
|
|
|
+ state.statsSource = obj
|
|
|
+ // state.statsSource = data.map(item => {
|
|
|
+ // return {
|
|
|
+ // key: item.label,
|
|
|
+ // name: DevOpsController.statsMap.get(item.label)?.name,
|
|
|
+ // value: item.dataValue
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ console.log()
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
@@ -37,4 +142,10 @@ onMounted(() => {
|
|
|
|
|
|
</script>
|
|
|
<style lang='less' scoped >
|
|
|
+.statis-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
</style>
|