gaoshp
2024-06-17 ddbb2bd2691629336faa4491a59fdc3dc3c5934e
src/views/mdc/realtime-status/index.vue
@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-09 22:12:14
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-17 17:26:45
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue
 实时看板
-->
@@ -36,7 +36,7 @@
           <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-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">
@@ -104,22 +104,37 @@
              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) {
               if(timeStr != undefined && timeStr != "--") {
                  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; // 小时转换为毫秒  
@@ -205,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');
@@ -246,7 +262,7 @@
               workStationGroupIdList: this.workStationGroupIdList
              }
              this.timestatus = [];
              this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=9`,obj).then(res=> {
              this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=${this.size}`,obj).then(res=> {
               if(res.code == 200) {
                  var ids = [];
                  res.data.records.forEach(item=> {
@@ -264,7 +280,6 @@
                           })
                        })
                     }
                  })
                  this.total = res.data.total;
                  //发送websocket
@@ -293,14 +308,14 @@
                        var diffTime = "--";
                     }
                     if(res.data.records.length == 0) return;  //没值不用循环
                       res.data.records.forEach(item=> {  //第一步把v放到code里
                       res.data.records.forEach((item,index)=> {  //第一步把v放到code里
                          if(eventData.id == item.id) {
                             if(item.properties == null) {
                                item.properties = [];
                                return;
                             }
                             item.time = diffTime;
                             item.properties.forEach(item1=> {
                             item.properties.forEach((item1,index1)=> {
                                if(item1.key == "DeviceStatus") {  //机器状态
                                   //item1.code = eventData.data[item1.key].v;
                                   if(item1.value == "2") {
@@ -311,13 +326,27 @@
                                   }
                                }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";
                                    if(eventData.data[item1.key]) {
                                       var v = JSON.parse(eventData.data[item1.key].v);
                                       if(Array.isArray(v)) {  //如果是数组,不赋值
                                          if(v.length == 0) {
                                             res.data.records[index].properties.splice(index1,1);
                                          }else {
                                             item1.name = v[0].code;
                                             item1.code = v[0].msg;
                                             item1.color = "#370C0D";
                                          }
                                       }else {
                                          item1.name = v.code;
                                          item1.code = v.msg;
                                          item1.color = "#370C0D";
                                       }
                                    }
                                  }else {
                                     item1.code = eventData.data[item1.key].v;
                                      item1.color = "#75C0C0";
                                    if(eventData.data[item1.key]) {
                                       item1.code = eventData.data[item1.key].v;
                                         item1.color = "#75C0C0";
                                    }
                                  }
                               }
                             })
@@ -422,7 +451,7 @@
      display: block;
   }
   .status-content-cardp {
       min-width: 266px;
       height: 50%;
       min-height: 170px;
       margin: 0;
       padding: 4px;