1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

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

@@ -17,7 +17,7 @@
             <span class="setBtn" @click="goSet">设置</span>
          </span>
        </div>
        <ul class="status-view-box">
        <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>
@@ -26,6 +26,9 @@
              <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>
@@ -33,17 +36,17 @@
           <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-content-cardp" v-for="item in timestatus" :style="{'width': (100/column) + '%'}">
              <div class="status-card-box" style="border-color: #ccc;">
                 <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>{{item.statusName}}
                          <div class="status-card-detail-time" style="color: rgb(89, 89, 89);">---</div>
                          <div class="status-card-detail-point" :style="{'background-color': item.statusStyle}"></div>{{item.statusName}}
                          <div class="status-card-detail-time" :style="{'color': item.statusStyle}">{{item.time}}</div>
                       </div>
                    </div>
                    <div class="status-card-machine" style="border-color: rgb(89, 89, 89);">
                    <div class="status-card-machine" style="border-color: #ccc;">
                       <div class="status-card-machine-img">
                          <img src="./station.png" width="68" height="68">
                       </div>
@@ -69,8 +72,8 @@
        <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 class="card-name" :style="{'background-color': item.color}">{{item.name}}</div>
                    <div class="card-value" :class="{'card-value': true,'card-value-bg1':item.key != 'Alarm','card-value-bg2':item.key == 'Alarm'}">{{item.code}}</div>
                 </div>
              </div>
        </el-dialog>
@@ -78,6 +81,7 @@
</template>

<script>
   import moment from 'moment';
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
   let icons = []
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -89,27 +93,108 @@
       },
        data() {
           return {
              allwcs: [],
              statusStyle: "#ccc",
              titleMap: "",
              visible: false,
              visibleList: [],
              devicestatus: [],
              timestatus: [],
              station: "状态视图",
              stationlabel: "",
              stationlabelList: [],
              current: "1",
            size: "9",
              total: 0,
              deviceStatus: [],
              workStationGroupIdList: []
              workStationGroupIdList: [],
              line: "",
              column: ""
           }
        },
        mounted() {
         this.getdevicestatus();  //获取顶部title
         this.getstationlabelList();  //获取标签视图下的list
         this.setIntervalTime();   //十秒增加时间
         this.getSetting(); //设置几行几列
      },
        methods: {
           getSetting() {
              this.$HTTP.get(`/api/blade-system/param/detail?paramKey=mdc.realtime.setting`).then(res=> {
               if(res.code == 200) {
                  var paramValue = JSON.parse(res.data.paramValue);
                  this.line = paramValue.line==0?1:paramValue.line;
                  this.column = paramValue.column;
                  this.current = "1";
                  this.size = this.line * this.column;
                  this.getdevicestatus();  //获取顶部title/具体数据
               }
            })
           },
           setIntervalTime() {
              function addTime(timeStr) {
                 var increaseByMilliseconds = 10 * 1000; // 10秒转换为毫秒  
               // 解析时间字符串为天数、小时、分钟和秒  
               if(timeStr != undefined) {
                  var parts = timeStr.match(/(\d+)天(\d+)时(\d+)分(\d+)秒/);  
                  var days = parseInt(parts[1], 10) * 24 * 60 * 60 * 1000; // 天数转换为毫秒  
                  var hours = parseInt(parts[2], 10) * 60 * 60 * 1000; // 小时转换为毫秒  
                  var minutes = parseInt(parts[3], 10) * 60 * 1000; // 分钟转换为毫秒  
                  var seconds = parseInt(parts[4], 10) * 1000; // 秒转换为毫秒    
                  // 创建一个Moment.js的持续时间对象  
                  var duration = moment.duration(days + hours + minutes + seconds);  
                  // 增加时间  
                  duration.add(increaseByMilliseconds); // 增加10秒  
                  // 将持续时间转换回天数、小时、分钟和秒（注意这里可能不完全精确，因为天数可能不是整数）  
                  var totalMilliseconds = duration.asMilliseconds();  
                  var totalDays = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));  
                  var remainingMilliseconds = totalMilliseconds % (1000 * 60 * 60 * 24);  
                  var totalHours = Math.floor(remainingMilliseconds / (1000 * 60 * 60));  
                  remainingMilliseconds %= (1000 * 60 * 60);  
                  var totalMinutes = Math.floor(remainingMilliseconds / (1000 * 60));  
                  remainingMilliseconds %= (1000 * 60);  
                  var totalSeconds = Math.floor(remainingMilliseconds / 1000); 
                  return `${totalDays}天${totalHours}时${totalMinutes}分${totalSeconds}秒`;
               }else {
                  return timeStr;
               }
              }  
              setInterval(()=> {
                 if(this.timestatus.length !=0) {
                    this.timestatus.forEach(item=> {
                       item.time = addTime(item.time);
                    })
                 }
              },1000*10)
           },
           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) {
              console.log(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) {
              if(item.properties == null || item.properties.length == 0) {
                 this.$message({
                   message: '请配置采集项',
                   type: 'warning'
@@ -117,23 +202,11 @@
                 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;
              console.log(this.visibleList)
           },
           searchstatus(item,index) {
              console.log(item)
              this.devicestatus.forEach(item=> {
                 item.active = false;
              })
@@ -147,9 +220,10 @@
              this.gettimestatus();
           },
           next() {
              if((this.total/9 - this.current) < 0) return;
              this.current = Number(this.current) + 1;
              this.gettimestatus();
              if((this.current * this.line) < this.total/this.column) {
                 this.current = Number(this.current) + 1;
                 this.gettimestatus();
              }
           },
           goSet() {
              this.$router.push('/mdc/configuration');
@@ -157,30 +231,122 @@
           gostatus(item) {
              this.$router.push('/mdc/station-live?code='+item.id);
           },
           getprocess() {  //颜色状态
            this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> {
               if(res.code == 200) {
                  this.allwcs = res.data;
                  this.gettimestatus();
               }
            })
         },
         changeTime(time) {
            // 使用Moment.js解析这两个日期字符串  
            var date1 = moment(time);  
            var date2 = moment(moment().format('YYYY-MM-DD HH:mm:ss'));  
            // 计算两个日期之间的差异（毫秒）  
            var differenceInMilliseconds = date2.diff(date1); // 注意：date2 - date1 给出正数差异  
            // 使用duration对象将差异转换为更易于处理的单位  
            var duration = moment.duration(differenceInMilliseconds);  
            // 提取天数、小时数、分钟数和秒数  
            var differenceInDays = duration.asDays();  
            var differenceInHours = duration.hours(); // 直接使用hours()方法获取小时数  
            var differenceInMinutes = duration.minutes(); // 直接使用minutes()方法获取分钟数  
            var differenceInSeconds = duration.seconds(); // 直接使用seconds()方法获取秒数  
            // 输出结果（使用Math.floor确保整数）  
            return Math.floor(differenceInDays) + "天" + Math.floor(differenceInHours) + "时" + Math.floor(differenceInMinutes) + "分" + Math.floor(differenceInSeconds) + "秒";
         },
           gettimestatus() {
              var that = this;
              var obj = {
                 deviceStatus: this.deviceStatus,
               workStationGroupIdList: this.workStationGroupIdList
              }
              this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=9`,obj).then(res=> {
              this.timestatus = [];
              this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=${this.size}`,obj).then(res=> {
               if(res.code == 200) {
                  var records = JSON.parse(JSON.stringify(res.data.records));
                  records.forEach(item=> {
                  var ids = [];
                  res.data.records.forEach(item=> {
                     item.statusName = "未知";
                     item.statusStyle = '#ccc';
                     ids.push(item.id);
                     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;
                                 item.statusStyle = item2.color;
                              }
                           })
                        })
                     }
                     
                  })
                  this.timestatus = records;
                  this.total = res.data.total;	
                  this.total = res.data.total;
                  //发送websocket
                  var obj = {
                     type: "realTimeData",
                     workstationIdList: ids
                  }
                  if(this.$TOOL.socket.websocket == null) {  //没有建立先建立
                     this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN")); 
                  }
                  var intervalId123 = setInterval(function() { 
                      if (that.$TOOL.socket.websocket.readyState == 1) {  
                         clearInterval(intervalId123);  
                         that.$TOOL.socket.sendDataToWebSocket(obj);  //发送
                     }  
                  }, 500);
                  var num = 0;
                  var intervalId;
                  this.$TOOL.socket.websocket.onmessage = function(event) { 
                     num ++;
                     var eventData = JSON.parse(event.data);
                     if(eventData.data.DeviceStatus != undefined) {
                        var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
                        var diffTime = that.changeTime(time);  //转换成差值（时分秒）
                     }else {
                        var diffTime = "--";
                     }
                     if(res.data.records.length == 0) return;  //没值不用循环
                       res.data.records.forEach(item=> {  //第一步把v放到code里
                          if(eventData.id == item.id) {
                             if(item.properties == null) {
                                item.properties = [];
                                return;
                             }
                             item.time = diffTime;
                             item.properties.forEach(item1=> {
                                if(item1.key == "DeviceStatus") {  //机器状态
                                   //item1.code = eventData.data[item1.key].v;
                                   if(item1.value == "2") {
                                      item1.color = "#73D13D";
                                      item1.code = "运行";
                                   }else {
                                      item1.color = "#75C0C0";
                                   }
                                }else {
                                  if(item1.key == 'Alarm') {  //报警
                                     var v = JSON.parse(eventData.data[item1.key].v);
                                     item1.name = v.code;
                                     item1.code = v.msg;
                                     item1.color = "#370C0D";
                                  }else {
                                     item1.code = eventData.data[item1.key].v;
                                      item1.color = "#75C0C0";
                                  }
                               }
                             })
                          }
                     });
                   };
                   var len = res.data.records.length;
                   intervalId = setInterval(function() {  
                      if (num === len) {  
                         clearInterval(intervalId);  
                         that.timestatus = res.data.records;  //等所有socket回来以后赋值
                     }  
                  }, 500);
               }
            })
           },
@@ -201,7 +367,7 @@
                  res.data[3].icon = "Warning";
                  res.data[4].icon = "Odometer";
                  this.devicestatus = res.data;
                  this.gettimestatus();  //获取机器
                  this.getprocess(); //获取颜色，获取机器
               }
            })
           }
@@ -272,7 +438,7 @@
      display: block;
   }
   .status-content-cardp {
       min-width: 266px;
       height: 50%;
       min-height: 170px;
       margin: 0;
       padding: 4px;
@@ -361,7 +527,7 @@
   .status-card-bottom {
       font-weight: 700;
       font-size: 14px;
       color: #3b8e8e;
       color: #409eff;
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -437,4 +603,10 @@
      width: 100%;
       flex-wrap: wrap;
   }
   .card-value-bg1 {
      background-color: rgba(115, 209, 61, 0.14);
   }
   .card-value-bg2 {
      background-color: rgba(55, 12, 13, 0.14);
   }
</style>