yuliang
/
yvan-rcs-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/master'

master
修宁 7 months ago
parent
d1f4f961d1 ae92a9c4e1
commit
4031aa3421
1 changed files with 215 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 257
      src/designer/viewWidgets/monitor/MonitorView.vue

257
src/designer/viewWidgets/monitor/MonitorView.vue
View File

@ -11,46 +11,99 @@
</span>
</div>
<div class="calc-left-panel">
MonitorView1<br />
MonitorView2<br />
MonitorView3<br />
MonitorView4<br />
MonitorView5<br />
MonitorView6<br />
MonitorView7<br />
MonitorView8<br />
MonitorView9<br />
MonitorView10<br />
MonitorView11<br />
MonitorView12<br />
MonitorView13<br />
MonitorView14<br />
MonitorView15<br />
MonitorView16<br />
MonitorView17<br />
MonitorView18<br />
MonitorView19<br />
MonitorView20<br />
MonitorView21<br />
MonitorView22<br />
MonitorView23<br />
MonitorView24<br />
MonitorView25<br />
MonitorView26<br />
MonitorView27<br />
MonitorView28<br />
MonitorView29<br />
MonitorView30<br />
MonitorView31<br />
MonitorView32<br />
MonitorView33<br />
MonitorView34<br />
MonitorView35<br />
MonitorView36<br />
MonitorView37<br />
MonitorView38<br />
MonitorView39<br />
MonitorView40<br />
<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>
@ -62,9 +115,129 @@ export default {
mixins: [IWidgets],
data() {
return {
searchKeyword: ''
searchKeyword: '',
total: 0,
online: 0,
offline: 0,
running: 0,
idle: 0
}
},
methods: {}
}
</script>
</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>
Write Preview
Loading…
Cancel
Save