You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
243 lines
6.7 KiB
243 lines
6.7 KiB
<template>
|
|
<div class="title">
|
|
监控
|
|
<el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
|
|
<template #prefix>
|
|
<component :is="renderIcon('element Search')"></component>
|
|
</template>
|
|
</el-input>
|
|
<span class="close" @click="closeMe">
|
|
<component :is="renderIcon('element Close')" />
|
|
</span>
|
|
</div>
|
|
<div class="calc-left-panel">
|
|
<div class="monitor-tool-wrap">
|
|
<div class="infor-row">
|
|
<div class="infor-item">
|
|
总数<span class="num">{{total}}</span>
|
|
</div>
|
|
<div class="infor-item">
|
|
上线<span class="num num-red">{{online}}</span>
|
|
</div>
|
|
<div class="infor-item">
|
|
下线<span class="num num-green">{{offline}}</span>
|
|
</div>
|
|
<div class="infor-item">
|
|
运行中<span class="num num-blue">{{running}}</span>
|
|
</div>
|
|
<div class="infor-item">
|
|
空闲中<span class="num num-orange">{{idle}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="item">
|
|
<div class="title">
|
|
名称 <span class="num">AGV-0</span>
|
|
<component :is="renderIcon('antd WifiOutlined')"></component>
|
|
电量 <span class="num">0%</span>
|
|
<component :is="renderIcon('fa BatteryEmpty')"></component>
|
|
</div>
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="row-icon">
|
|
<component :is="renderIcon('antd CodeSandboxOutlined')"></component>
|
|
</div>
|
|
<div class="row-content">
|
|
<div class="data-infor">状态 <span>空闲</span></div>
|
|
<div class="data-infor">车速 <span>0 m/s</span></div>
|
|
<div class="data-infor">当前地标 <span></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="data-infor">当前坐标<span>x:0 y:0 Yaw:0</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">警告信息</div>
|
|
</div>
|
|
<div class="item selected">
|
|
<div class="title">
|
|
名称 <span class="num">AGV-0</span>
|
|
<component :is="renderIcon('antd WifiOutlined')"></component>
|
|
电量 <span class="num">0%</span>
|
|
<component :is="renderIcon('fa BatteryEmpty')"></component>
|
|
</div>
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="row-icon">
|
|
<component :is="renderIcon('antd CodeSandboxOutlined')"></component>
|
|
</div>
|
|
<div class="row-content">
|
|
<div class="data-infor">状态 <span>空闲</span></div>
|
|
<div class="data-infor">车速 <span>0 m/s</span></div>
|
|
<div class="data-infor">当前地标 <span></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="data-infor">当前坐标<span>x:0 y:0 Yaw:0</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">警告信息</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="title">
|
|
名称 <span class="num">AGV-0</span>
|
|
<component :is="renderIcon('antd WifiOutlined')"></component>
|
|
电量 <span class="num">0%</span>
|
|
<component :is="renderIcon('fa BatteryEmpty')"></component>
|
|
</div>
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="row-icon">
|
|
<component :is="renderIcon('antd CodeSandboxOutlined')"></component>
|
|
</div>
|
|
<div class="row-content">
|
|
<div class="data-infor">状态 <span>空闲</span></div>
|
|
<div class="data-infor">车速 <span>0 m/s</span></div>
|
|
<div class="data-infor">当前地标 <span></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="data-infor">当前坐标<span>x:0 y:0 Yaw:0</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">警告信息</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import IWidgets from '../IWidgets.js'
|
|
|
|
export default {
|
|
name: 'MonitorView',
|
|
webSocketSubscribe: ['deviceStatus'],
|
|
mixins: [IWidgets],
|
|
data() {
|
|
return {
|
|
searchKeyword: '',
|
|
total: 0,
|
|
online: 0,
|
|
offline: 0,
|
|
running: 0,
|
|
idle: 0
|
|
}
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
<style lang="less">
|
|
.monitor-tool-wrap{
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.infor-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
//background: #cdcccc;
|
|
padding:3px 0;
|
|
.infor-item{
|
|
margin:2px 8px;
|
|
font-size: 12px;
|
|
background: #f3e9c0;
|
|
border-radius: 3px;
|
|
padding: 0 5px;
|
|
}
|
|
.num{
|
|
display: inline-block;
|
|
padding:0 3px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
&:first-child{
|
|
margin-left: 0;
|
|
}
|
|
&:last-child{
|
|
margin-right: 0;
|
|
}
|
|
&.num-red{
|
|
color: red;
|
|
}
|
|
&.num-green{
|
|
color: green;
|
|
}
|
|
&.num-blue{
|
|
color: blue;
|
|
}
|
|
&.num-orange{
|
|
color: #d78f0b;
|
|
}
|
|
}
|
|
}
|
|
.list{
|
|
flex:1;
|
|
overflow: auto;
|
|
font-size: 12px;
|
|
color:#fff;
|
|
.item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
border:2px solid #808080;
|
|
margin:5px 5px;
|
|
border-radius: 5px;
|
|
background: #747a80;
|
|
&.selected{
|
|
border-color: #fa9d12;
|
|
}
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
padding:3px 10px;
|
|
border-bottom: 1px solid #81888e;
|
|
margin-bottom: 5px;
|
|
.num{
|
|
font-weight: bold;
|
|
margin-left:5px;
|
|
}
|
|
.el-icon{
|
|
margin: 0 5px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
.content{
|
|
flex:1;
|
|
.row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin:0 5px;
|
|
.row-icon{
|
|
width: 75px;
|
|
height: 75px;
|
|
background: #3e454c;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.el-icon{
|
|
font-size: 70px;
|
|
color: #f4c521;
|
|
}
|
|
}
|
|
.row-content{
|
|
flex:1;
|
|
margin-left:5px;
|
|
}
|
|
}
|
|
.data-infor{
|
|
margin:3px 0;
|
|
span{
|
|
font-weight: bold;
|
|
margin-left:5px;
|
|
}
|
|
}
|
|
}
|
|
.footer{
|
|
border-top:1px solid #656a70;
|
|
background: #747a80;
|
|
padding: 3px 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|