feat: 首页设备状态、告警通知初始化完成
parent
ed023b30e3
commit
f95eca1731
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 448 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
@ -0,0 +1,20 @@
|
||||
/* 设备详情 */
|
||||
.alarmInfoList_wrap {
|
||||
.alarm_info_list_box {
|
||||
height: 180px;
|
||||
overflow-y: scroll;
|
||||
font-size: 14px;
|
||||
li {
|
||||
padding-bottom: 23px;
|
||||
.level_status_2 {
|
||||
color: #e80d0d;
|
||||
}
|
||||
.level_status_1 {
|
||||
color: #faad14;
|
||||
}
|
||||
.level_status_0 {
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-12 13:27:07
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-02-28 15:48:31
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\views\workbench\components\DeviceStatus.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import deviceStatusOnline from "@/assets/svg/deviceStatus/online.svg?component";
|
||||
import deviceStatusProcess from "@/assets/svg/deviceStatus/process.svg?component";
|
||||
import deviceStatusError from "@/assets/svg/deviceStatus/error.svg?component";
|
||||
import deviceStatusOutline from "@/assets/svg/deviceStatus/outline.svg?component";
|
||||
defineOptions({
|
||||
name: "DeviceStatus"
|
||||
});
|
||||
|
||||
const deviceStatusData = ref<Record<string, any>>({
|
||||
onlineCount: 618,
|
||||
errorCount: 120,
|
||||
processCount: 118,
|
||||
outlineCount: 200
|
||||
});
|
||||
|
||||
const deviceStatusOptions = ref<Record<string, any>[]>([
|
||||
{
|
||||
label: "在线",
|
||||
color: "#52C41A",
|
||||
bgColor: "rgba(82, 196, 26, 1)",
|
||||
valueKey: "onlineCount" // 在线数量
|
||||
},
|
||||
{
|
||||
label: "进行中",
|
||||
color: "#FAAD14",
|
||||
bgColor: "rgba(250, 173, 20, 1)",
|
||||
valueKey: "processCount" // 进行中数量
|
||||
},
|
||||
{
|
||||
label: "故障",
|
||||
color: "#E80D0D",
|
||||
bgColor: "rgba(232, 13, 13, 1)",
|
||||
valueKey: "errorCount" // 故障数量
|
||||
},
|
||||
{
|
||||
label: "离线",
|
||||
color: "#999999",
|
||||
bgColor: "#999999",
|
||||
valueKey: "outlineCount" // 故障数量
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="w-full text-sm deviceStatus_box">
|
||||
<li
|
||||
class="flex items-center justify-between w-full"
|
||||
:style="{
|
||||
marginBottom: '16px'
|
||||
}"
|
||||
v-for="(v, k) in deviceStatusOptions"
|
||||
:key="k"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center"
|
||||
:style="{
|
||||
backgroundColor: v.bgColor,
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '4px',
|
||||
marginRight: '12px'
|
||||
}"
|
||||
>
|
||||
<deviceStatusOnline v-if="v.valueKey === 'onlineCount'" />
|
||||
<deviceStatusProcess v-if="v.valueKey === 'processCount'" />
|
||||
<deviceStatusError v-if="v.valueKey === 'errorCount'" />
|
||||
<deviceStatusOutline v-if="v.valueKey === 'outlineCount'" />
|
||||
</div>
|
||||
<div class="flex flex-col flex-1">
|
||||
<div class="flex justify-between" style="margin-bottom: 4px">
|
||||
<span>{{ v.label }}</span>
|
||||
<span>{{ deviceStatusData[v.valueKey] }}</span>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<el-progress
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:percentage="deviceStatusData[v.valueKey] / 10"
|
||||
:color="v.color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.deviceStatus_box {
|
||||
.el-progress-bar__outer {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue