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