1

lzhe

2024-04-19 dd3bb0fcffc294ac9094c17aafbc73c8b6a73eed

 src/views/mdc/realtime-status/index.vue

@@ -3,19 +3,291 @@
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-09 22:12:14
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue
 实时看板
-->
<template>
    <div>
        实时看板
    <div class="realtime-main">
       <div>
          <el-radio-group v-model="station">
            <el-radio-button label="状态视图" value="状态视图" />
            <el-radio-button label="标签视图" value="标签视图" />
          </el-radio-group>
          <span class="setSpan">
             <el-icon class="setIcon"><Setting /></el-icon>
             <span class="setBtn" @click="goSet">设置</span>
          </span>
        </div>
        <ul class="status-view-box">
           <li v-for="item in devicestatus">
              <el-icon :style="{'color': item.color}">
                 <component :is='item.icon'></component>
              </el-icon>
              <span>{{item.statusName}}</span>
              <span class="view-box-num">{{item.deviceNum}}</span>
           </li>
        </ul>
        <div class="status-content-cardBox">
           <div class="status-content-cardp" v-for="item in timestatus" style="width: 33.3333%; height: 50%;">
              <div class="status-card-box" style="border-color: rgb(89, 89, 89);">
                 <div class="status-card-top">
                    <div class="status-card-detail">
                       <div title="461" class="status-card-detail-name">{{item.code}}</div>
                       <div class="status-card-detail-status">
                          <div class="status-card-detail-point" style="background-color: rgb(89, 89, 89);"></div>离线
                          <div class="status-card-detail-time" style="color: rgb(89, 89, 89);">1天10时21分45秒</div>
                       </div>
                    </div>
                    <div class="status-card-machine" style="border-color: rgb(89, 89, 89);">
                       <div class="status-card-machine-img">
                          <img src="./station.png" width="68" height="68">
                       </div>
                       <div class="status-card-machine-mesg">
                          <div class="status-card-machine-mesg-form">
                             <div class="status-card-machine-mesg-label">工位编号</div>
                             <div class="status-card-machine-mesg-value">461</div>
                          </div>
                          <div class="status-card-machine-mesg-form">
                             <div class="status-card-machine-mesg-label">工单</div>
                             <div class="status-card-machine-mesg-value">-</div>
                          </div>
                       </div>
                    </div>
                 </div>
                 <div class="status-card-bottom">
                    <div class="status-card-bottom-realtime"><i class="iconfont saber-xiangqing status-card-bottom-icon"></i> 实时数据</div>
                    <div class="status-card-bottom-detail"><i class="iconfont saber-shuju status-card-bottom-icon"></i> 工位详情</div>
                 </div>
              </div>
          </div>
        </div>
    </div>
</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 {
        
       components: {
           ...ElementPlusIconsVue
       },
        data() {
           return {
              devicestatus: [],
              timestatus: [],
              station: "状态视图"
           }
        },
        mounted() {
         this.getdevicestatus();  //获取顶部title
         this.gettimestatus();  //获取机器
      },
        methods: {
           goSet() {
              this.$router.push('/mdc/configuration')
           },
           gettimestatus() {
              var obj = {
                 deviceStatus: [],
               workStationGroupIdList: []
              }
              this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=1&size=9`,obj).then(res=> {
               if(res.code == 200) {
                  this.timestatus = res.data.records;
               }
            })
           },
           getdevicestatus() {
              this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res=> {
               if(res.code == 200) {
                  res.data[0].color = "#73D13D";
                  res.data[1].color = "#370C0D";
                  res.data[2].color = "#FFC53D";
                  res.data[3].color = "#595959";
                  res.data[4].color = "#40A9FF";
                  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;
               }
            })
           }
        }
    }
</script>

<style lang="scss" scoped>

<style scoped>
   .realtime-main {
      background-color: #fff;
      margin:8px;
      padding: 8px;
   }
   .setSpan {
      vertical-align: sub;
      font-size: 14px;
   }
   .setBtn {
      margin-left:2px;
      color: #409eff;
      margin-left:8px;
      cursor: pointer;
   }
   .setIcon {
      color: #409eff;
       margin-left: 15px;
       vertical-align: -2px;
   }
   .status-view-box {
      display: flex;
      padding: 8px 0 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;
   }
   .status-view-box li i {
      margin-right:6px;
      font-size: 14px;
      font-weight: bold;
   }
   .view-box-num {
      font-size: 25px;
      margin-left:6px;
   }
   .status-content-cardBox {
       display: flex;
       flex-direction: row;
       -ms-flex-wrap: wrap;
       flex-wrap: wrap;
       align-items: flex-start;
       justify-content: flex-start;
       align-content: flex-start;
       height: 100%;
       width: 100%;
       padding: 4px;
       box-sizing: border-box;
   }
   .status-content-cardp {
       min-width: 266px;
       min-height: 170px;
       margin: 0;
       padding: 4px;
       box-sizing: border-box;
   }
   .status-card-box {
       height: 100%;
       border: 1px solid;
       font-size: 14px;
       box-sizing: border-box;
       border-radius: 2px;
   }
   .status-card-top {
       height: calc(100% - 45px);
       padding: 12px;
       box-sizing: border-box;
   }
   .status-card-detail {
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   .status-card-detail-name {
       font-weight: 700;
       font-size: 16px;
       color: #333;
       width: 33%;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
   }
   .status-card-detail-status {
       display: flex;
       align-items: center;
       justify-content: flex-end;
   }
   .status-card-detail-point {
       width: 12px;
       height: 12px;
       border-radius: 6px;
       margin-right: 8px;
   }
   .status-card-detail-time {
       line-height: 12px;
       margin-left: 16px;
   }
   .status-card-machine {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
       -ms-flex-align: center;
       align-items: center;
       -webkit-box-pack: start;
       -ms-flex-pack: start;
       justify-content: flex-start;
       padding-top: 12px;
   }
   .status-card-machine-img {
       width: 68px;
       height: 68px;
       border-radius: 2px;
   }
   .status-card-machine-mesg {
       padding-left: 16px;
   }
   .status-card-machine-mesg-form {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       padding: 8px 0;
   }
   .status-card-machine-mesg-label {
       font-weight: 400;
       font-size: 12px;
       text-align: left;
       color: #666;
       width: 70px;
   }
   .status-card-machine-mesg-value {
       font-weight: 400;
       font-size: 12px;
       text-align: left;
       color: #333;
   }
   .status-card-bottom {
       font-weight: 700;
       font-size: 14px;
       color: #3b8e8e;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       border-top: 1px solid #e1e1e2;
       padding: 12px 0;
   }
   .status-card-bottom-realtime {
       width: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .status-card-bottom-detail, .status-card-bottom-realtime {
       width: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .status-card-bottom-icon {
       margin-right: 8px;
   }
</style>