1

lzhe

2024-05-13 f5edc2904945f37b164a7874d502cf002fae024e

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

@@ -8,7 +8,7 @@
<template>
    <div class="realtime-main">
       <div>
          <el-radio-group v-model="station">
          <el-radio-group v-model="station" @change="changestatus">
            <el-radio-button label="状态视图" value="状态视图" />
            <el-radio-button label="标签视图" value="标签视图" />
          </el-radio-group>
@@ -17,8 +17,8 @@
             <span class="setBtn" @click="goSet">设置</span>
          </span>
        </div>
        <ul class="status-view-box">
           <li v-for="item in devicestatus">
        <ul class="status-view-box" v-if="station == '状态视图'">
           <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>
@@ -26,15 +26,24 @@
              <span class="view-box-num">{{item.deviceNum}}</span>
           </li>
        </ul>
        <el-radio-group v-model="stationlabel" @change="changestationlabel" v-if="station == '标签视图'" style="margin-top:8px;">
            <el-radio-button v-for="item in stationlabelList" :label="item.groupName" :value="item.groupId" />
          </el-radio-group>
        <div class="status-content-cardBox">
           <div class="status-prev" @click="prev">
              <el-icon><ArrowLeft /></el-icon>
           </div>
           <div class="status-next" @click="next">
              <el-icon><ArrowRight /></el-icon>
           </div>
           <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 class="status-card-detail-point" style="background-color: rgb(89, 89, 89);"></div>{{item.statusName}}
                          <div class="status-card-detail-time" style="color: rgb(89, 89, 89);">---</div>
                       </div>
                    </div>
                    <div class="status-card-machine" style="border-color: rgb(89, 89, 89);">
@@ -44,7 +53,7 @@
                       <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 class="status-card-machine-mesg-value">{{item.code}}</div>
                          </div>
                          <div class="status-card-machine-mesg-form">
                             <div class="status-card-machine-mesg-label">工单</div>
@@ -54,12 +63,20 @@
                    </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 class="status-card-bottom-realtime" @click="showvisible(item)"><i class="iconfont saber-xiangqing status-card-bottom-icon"></i> 实时数据</div>
                    <div class="status-card-bottom-detail" @click="gostatus(item)"><i class="iconfont saber-shuju status-card-bottom-icon"></i> 工位详情</div>
                 </div>
              </div>
          </div>
        </div>
        <el-dialog :title="titleMap" v-model="visible" :width="740">
              <div class="dialogstyle">
                 <div class="realtime-analysis-card" v-for="item in visibleList">
                    <div class="card-name" :style="{'background-color': item.namecolor}">{{item.name}}</div>
                    <div class="card-value" :style="{'background-color': item.statuscolor}">{{item.statusName}}</div>
                 </div>
              </div>
        </el-dialog>
    </div>
</template>

@@ -75,33 +92,132 @@
       },
        data() {
           return {
              titleMap: "",
              visible: false,
              visibleList: [],
              devicestatus: [],
              timestatus: [],
              station: "状态视图"
              station: "状态视图",
              stationlabel: "",
              stationlabelList: [],
              current: "1",
              total: 0,
              deviceStatus: [],
              workStationGroupIdList: []
           }
        },
        mounted() {
         this.getdevicestatus();  //获取顶部title
         this.gettimestatus();  //获取机器
         this.getstationlabelList();  //获取标签视图下的list
      },
        methods: {
           changestationlabel(name) {
              this.stationlabel = name;
              this.stationlabelList.forEach(item=> {
                 if(item.groupName == name) {
                    this.workStationGroupIdList = [item.groupId];
                 }
              })
              this.gettimestatus();  //查询列表
           },
           getstationlabelList() {
              this.$HTTP.get("/api/blade-cps/group/get-mdc-group").then(res=> {
               if(res.code == 200) {
                  this.stationlabelList = res.data;
                  this.stationlabel = res.data[0].groupName;
               }
            })
           },
           changestatus(name) {
              this.station = name;
              if(this.station == '状态视图') {
               this.workStationGroupIdList = [];
            }else {
               this.stationlabel = this.stationlabelList[0].groupName;
               this.workStationGroupIdList = [this.stationlabelList[0].groupId];
            }
              this.gettimestatus();  //查询列表
           },
           showvisible(item) {
              if(item.properties == null) {
                 this.$message({
                   message: '请配置采集项',
                   type: 'warning'
                 });
                 return;
              }
              var visibleList = JSON.parse(JSON.stringify(item.properties));
              visibleList.forEach(item=> {
                 if(item.statusName) {
                    item.namecolor = "rgb(89, 89, 89)";
                    item.statuscolor = "rgba(89, 89, 89, 0.14)";
                 }else {
                    item.namecolor = "rgb(127, 192, 192)";
                    item.statuscolor = "rgba(127, 192, 192, 0.14)";
                 }
        			
              })
              this.titleMap = "实时数据(" + item.code + ")";
              this.visibleList = visibleList;
              this.visible = true;
           },
           searchstatus(item,index) {
              this.devicestatus.forEach(item=> {
                 item.active = false;
              })
              this.devicestatus[index].active = true;
              this.deviceStatus = [item.status];
              this.gettimestatus();
           },
           prev() {
              if(this.current == "1") return;
              this.current = this.current - 1;
              this.gettimestatus();
           },
           next() {
              if((this.total/9 - this.current) < 0) return;
              this.current = Number(this.current) + 1;
              this.gettimestatus();
           },
           goSet() {
              this.$router.push('/mdc/configuration')
              this.$router.push('/mdc/configuration');
           },
           gostatus(item) {
              this.$router.push('/mdc/station-live?code='+item.id);
           },
           gettimestatus() {
              var obj = {
                 deviceStatus: [],
               workStationGroupIdList: []
                 deviceStatus: this.deviceStatus,
               workStationGroupIdList: this.workStationGroupIdList
              }
              this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=1&size=9`,obj).then(res=> {
              this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=9`,obj).then(res=> {
               if(res.code == 200) {
                  this.timestatus = res.data.records;
                  var records = JSON.parse(JSON.stringify(res.data.records));
                  records.forEach(item=> {
                     item.statusName = "未知";
                     if(item.properties != null) {
                        item.properties.forEach(item1=> {
                           this.devicestatus.forEach(item2=> {
                              if(item2.status == item1.value) {
                                 item.statusName = item2.statusName;
                                 item1.statusName = item2.statusName;
                              }
                           })
                        })
                     }
							
                  })
                  this.timestatus = records;
                  this.total = res.data.total;	
               }
            })
           },
           getdevicestatus() {
              this.$HTTP.get(`/api/blade-mdc/work-station-analysis/device-status-statistics`).then(res=> {
               if(res.code == 200) {
                  res.data.forEach(item=> {
                     item.active = false;
                  })
                  res.data[0].color = "#73D13D";
                  res.data[1].color = "#370C0D";
                  res.data[2].color = "#FFC53D";
@@ -113,6 +229,7 @@
                  res.data[3].icon = "Warning";
                  res.data[4].icon = "Odometer";
                  this.devicestatus = res.data;
                  this.gettimestatus();  //获取机器
               }
            })
           }
@@ -177,6 +294,10 @@
       width: 100%;
       padding: 4px;
       box-sizing: border-box;
       position: relative;
   }
   .status-content-cardBox:hover .status-next,.status-content-cardBox:hover .status-prev {
      display: block;
   }
   .status-content-cardp {
       min-width: 266px;
@@ -268,7 +389,7 @@
   .status-card-bottom {
       font-weight: 700;
       font-size: 14px;
       color: #3b8e8e;
       color: #409eff;
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -290,4 +411,58 @@
   .status-card-bottom-icon {
       margin-right: 8px;
   }
   .status-next,.status-prev {
      position: absolute;
       top: 50%;
       font-size: 36px;
       font-weight: 700;
       width: 48px;
       height: 48px;
       text-align: center;
       line-height: 48px;
       background: hsla(0,0%,100%,.7);
       border-radius: 2px;
       cursor: pointer;
       display: none;
       z-index: 99;
   }
   .status-next {
      right: 0;
   }
   .status-prev {
      left: 0;
   }
   .active {
      border: 1px solid #317d7b!important
   }
   .realtime-analysis-card {
      border-radius: 2px;
       margin: 8px;
       height: 88px;
       display: flex;
   }
   .realtime-analysis-card .card-name, .realtime-analysis-card .card-value{
       display: flex;
       align-items: center;
   }
   .realtime-analysis-card .card-name {
       width: 98px;
       height: 88px;
       justify-content: center;
       color: #fff;
   }
   .realtime-analysis-card .card-value {
       min-width: 118px;
       max-width: 396px;
       height: 100%;
       padding: 0 8px;
       overflow: hidden;
       word-break: break-all;
       box-sizing: border-box;
   }
   .dialogstyle {
      display: flex;
      width: 100%;
       flex-wrap: wrap;
   }
</style>