yvan-rcs-web/src/designer/viewWidgets/monitor/MonitorView.vue

<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('hideLeft')">
      <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 { renderIcon } from '@/utils/webutils.js'

export default {
  name: 'MonitorView',
  emits: ['close'],
  data() {
    return {
      searchKeyword: '',
      total: 0,
      online: 0,
      offline: 0,
      running: 0,
      idle: 0
    }
  },
  methods: {
    renderIcon,
    closeMe(name) {
      this.$emit('close', name)
    }
  }
}
</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>