<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-04-16 15:22:46
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-06-20 21:49:13
|
* @FilePath: /CPSnew/smart-web/src/views/home/widgets/components/mdcDeviceStatus.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<el-card shadow="hover" header="设备状态统计" style="height: 100%;" class="deviceStatus">
|
<ul class="status-view-box">
|
<li v-for="(item,index) in devicestatus" @click="searchstatus(item,index)" :class="{'active': item.active}">
|
<el-icon :style="{'color': item.color}">
|
<component :is='item.icon'></component>
|
</el-icon>
|
<span class="statusName">{{item.statusName}}</span>
|
<span class="view-box-num">{{item.deviceNum}}</span>
|
</li>
|
</ul>
|
</el-card>
|
</template>
|
|
<script>
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
export default {
|
title: "设备状态统计",
|
icon: "el-icon-data-line",
|
description: "快速查看设备状态统计",
|
data() {
|
return {
|
devicestatus: []
|
}
|
},
|
components: {...ElementPlusIconsVue},
|
mounted() {
|
this.getdevicestatus(); //获取具体数据
|
},
|
methods: {
|
getdevicestatus() {
|
this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res=> {
|
if(res.code == 200) {
|
res.data[0].icon = "Position";
|
res.data[1].icon = "Loading";
|
res.data[2].icon = "Clock";
|
res.data[3].icon = "Warning";
|
res.data[4].icon = "Odometer";
|
this.devicestatus = res.data;
|
}
|
})
|
},
|
goPage(item) {
|
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.status-view-box {
|
display: flex;
|
padding: 0;
|
}
|
.status-view-box li {
|
list-style: none;
|
border-radius: 2px;
|
background: #f6f6f6;
|
cursor: pointer;
|
padding: 13px 37px 13px 17px;
|
margin: 0 8px;
|
flex-direction: row;
|
display: flex;
|
align-items: center;
|
flex: 1;
|
height: 90px;
|
}
|
.status-view-box li:nth-child(1) {
|
background-color: rgba(55, 12, 13, 0.14);
|
}
|
.status-view-box li:nth-child(2) {
|
background-color: rgba(255, 197, 61, 0.14);
|
}
|
.status-view-box li:nth-child(3) {
|
background-color: rgba(89, 89, 89, 0.14);
|
}
|
.status-view-box li:nth-child(4) {
|
background-color: rgba(64, 169, 255, 0.14);
|
}
|
.status-view-box li:nth-child(5) {
|
background-color: rgba(115, 209, 61, 0.14);
|
}
|
.status-view-box li i {
|
margin-right:6px;
|
font-size: 14px;
|
font-weight: bold;
|
}
|
.view-box-num {
|
font-weight: bold;
|
font-size: 25px;
|
margin-left:12px;
|
}
|
.deviceStatus .el-card__body {
|
padding: 12px 12px 6px;
|
}
|
.statusName {
|
font-weight: 700;
|
font-size: 15px;
|
color: #666;
|
}
|
</style>
|
