增加列表显示

gaoshp

2024-11-04 eef1ef0be935d4a3d8fc691b2666f41796b2d4a5

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

@@ -1,651 +1,655 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-18 18:14:08
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue
 * @LastEditTime: 2024-11-04 11:19:09
 * @FilePath: /cps-web/src/views/mdc/realtime-status/index.vue
 实时看板
-->
<template>
    <div class="realtime-main">
       <div>
          <el-radio-group v-model="station" @change="changestatus">
            <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" 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>
              <span>{{item.statusName}}</span>
              <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': (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': 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: #ccc;">
                       <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">{{item.code}}</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" @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.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>
    </div>
   <div class="realtime-main">
      <div>
         <el-radio-group v-model="station" @change="changestatus">
            <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" 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>
            <span>{{ item.statusName }}</span>
            <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, index) 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 class="status-card-detail-name" :title="item.name">{{ item.name }}</div>
                     <div class="status-card-detail-status">
                        <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: #ccc;">
                     <div class="status-card-machine-img">
                        <img :src="item.avatar" 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">{{ item.code }}</div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="status-card-bottom">
                  <div class="status-card-bottom-realtime" @click="showvisible(item, index)"><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" v-if="visible">
         <div class="dialogstyle">
            <el-table :data="timestatus[clickIndex].properties" style="width: 100%" border>
               <el-table-column prop="name" label="数据点"></el-table-column>
               <el-table-column prop="code" label="值"></el-table-column>
               <el-table-column prop="moment" label="采集时间"></el-table-column>
            </el-table>
         </div>
      </el-dialog>
   </div>
</template>

<script>
   import moment from 'moment';
   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 {
              allwcs: [],
              statusStyle: "#ccc",
              titleMap: "",
              visible: false,
              visibleList: [],
              devicestatus: [],
              timestatus: [],
              station: "状态视图",
              stationlabel: "",
              stationlabelList: [],
              current: "1",
            size: "9",
              total: 0,
              deviceStatus: [],
              workStationGroupIdList: [],
              line: "",
              column: ""
           }
        },
        mounted() {
         this.getstationlabelList();  //获取标签视图下的list
         this.setIntervalTime();   //十秒增加时间
         this.getSetting(); //设置几行几列 ==》获取顶部title
         //this.getprocess(); //获取颜色，获取机器
         this.gettimestatus();  //ws
import station from "./station1.jpg";
import moment from 'moment';
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 {
         station: station,
         clickIndex: 0,
         allwcs: [],
         statusStyle: "#ccc",
         titleMap: "",
         visible: false,
         visibleList: [],
         devicestatus: [],
         timestatus: [],
         station: "状态视图",
         stationlabel: "",
         stationlabelList: [],
         current: "1",
         size: "9",
         total: 0,
         workStationGroupIdList: [],
         line: "",
         column: ""
      }
   },
   mounted() {
      this.deviceStatus = this.$route.query.currentTag ? [...this.$route.query.currentTag] : [];
      this.getstationlabelList();  //获取标签视图下的list
      this.getprocess(); //获取颜色==》获取顶部title==》设置几行几列==》ws
   },
   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.gettimestatus();  //ws
            }
         })
      },
        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 && 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; // 小时转换为毫秒  
                  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;
      changestationlabel(name) {
         this.stationlabel = name;
         this.stationlabelList.forEach(item => {
            if (item.groupName == name) {
               this.workStationGroupIdList = [item.groupId];
            }
         })
         this.gettimestatus();  //查询列表
      },
      getstationlabelList() {
         this.$HTTP.get("/api/smis/group/get-mdc-group").then(res => {
            if (res.code == 200) {
               this.stationlabelList = res.data;
               if (res.data.length != 0) {
                  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 || item.properties.length == 0) {
                 this.$message({
                   message: '请配置采集项',
                   type: 'warning'
                 });
                 return;
              }
              var visibleList = JSON.parse(JSON.stringify(item.properties));
              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.current * this.line) < this.total/this.column) {
                 this.current = Number(this.current) + 1;
                 this.gettimestatus();
              }
           },
           goSet() {
              this.$router.push('/mdc/configuration');
           },
           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;
         })
      },
      changestatus(name) {
         if (this.stationlabelList.length == 0) {
            this.station = "状态视图";
            this.$message.error('未选定实时看板查询组，请到"分析设置 -> 实时看板查询组设置"中选择工位组');
            return;
         }
         this.station = name;
         if (this.station == '状态视图') {
            this.workStationGroupIdList = [];
         } else {
            this.stationlabel = this.stationlabelList[0].groupName;
            this.workStationGroupIdList = [this.stationlabelList[0].groupId];
         }
         this.clickIndex = 0;
         this.gettimestatus();  //查询列表
      },
      showvisible(item, index) {
         if(item.properties.length == 0) {
            this.$message({
               message: '该工位没有配置数据点',
               type: 'warning'
            });
            return;
         }
         this.clickIndex = index;
         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.current * this.line) < this.total / this.column) {
            this.current = Number(this.current) + 1;
            this.gettimestatus();
         }
      },
      goSet() {
         this.$router.push('/mdc/configuration?isShowSearch=1');  //分析设置(isShowSearch表示即时信息来)
      },
      gostatus(item) {
         this.$router.push('/mdc/station-live?code=' + item.id);
      },
      getprocess() {  //颜色状态
         this.$HTTP.get(`/api/smis/global_wcs/list?code=&name=`).then(res => {
            if (res.code == 200) {
               this.allwcs = res.data;
               this.getdevicestatus();  //获取顶部title/具体数据
               this.getSetting();   //获取几行几列
            }
         })
      },
      changeTime(time,diffTime) {
         // 使用Moment.js解析这两个日期字符串  
         var date1 = moment(time);
         var date2 = moment(diffTime);
         // 计算两个日期之间的差异（毫秒）  
         var differenceInMilliseconds = date1.diff(date2); // 注意：date1 - date2 给出正数差异  
         // 使用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.timestatus = [];
         this.$HTTP.post(`/api/smis/workstation/real-time-status?current=${this.current || 0}&size=${this.size || 6}`, obj).then(res => {
            if (res.code == 200) {
               var ids = [];
               res.data.records.forEach(item => {
                  if(item.avatar == "") {
                     item.avatar = station;
                  }
                  ids.push(item.id);
               })
               this.timestatus = res.data.records;
               this.total = res.data.total;
               //发送websocket
               var obj = {
                  type: "realTimeData",
                  workstationIdList: ids
               }
            })
         },
         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.timestatus = [];
              this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=${this.size}`,obj).then(res=> {
               if(res.code == 200) {
                  this.timestatus = res.data.records;
                  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;
                           //    }
                           // })
                           if(item1.value == 1) {
                              item.statusName = '报警';
                              item1.statusName = '报警';
                              item.statusStyle = "#370C0D";
               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);
               this.$TOOL.socket.websocket.onmessage = function (event) {
                  var eventData = JSON.parse(event.data);
                  if (that.timestatus.length == 0) return;  //没值不用循环
                  that.timestatus.forEach((item, index) => {  //第一步把v放到code里
                     if (eventData.id == item.id) {
                        if (item.properties == null) {
                           item.properties = [];
                           return;
                        }
                        if (eventData.data.DeviceStatus) {
                           var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
                           var preT = moment(eventData.data.DeviceStatus.preT).format('YYYY-MM-DD HH:mm:ss');
                           var diffTime = that.changeTime(time,preT);  //转换成差值（时分秒）
                           var diffTime = diffTime;
                           item.time = diffTime;
                           that.allwcs.forEach(item1 => {
                              if (item1.code == eventData.data.DeviceStatus.v) {
                                 item.statusName = item1.name;
                                 item.statusStyle = item1.color;
                              }
                           })
                        } else {
                           if (item.time == undefined || item.time == "--") {
                              item.time = "--";
                              item.statusName = "未知";
                              item.statusStyle = '#ccc';
                           }
                           if(item1.value == 2) {
                              item.statusName = '运行';
                              item1.statusName = '运行';
                              item.statusStyle = "#73D13D";
                        }
                        item.properties.forEach((item1, index1) => {
                           if (item1.key == "DeviceStatus") {  //机器状态
                              that.allwcs.forEach(item2 => {
                                 if(eventData.data.DeviceStatus && item2.code == eventData.data.DeviceStatus.v) {
                                    item1.value = item2.code;
                                    item1.code = item2.name;
                                    item1.moment = that.timestampChangeTime(eventData.data[item1.key].t);  //时间戳转化成日期
                                 }
                              })
                              if (Object.keys(eventData.data).length == 0) {  //ws没有data数据，给默认值
                                 item1.code = "";
                                 item1.moment = "";
                              };
                           } else {
                              if(eventData.data[item1.key]) {
                                 if(item1.key == "Alarm") {
                                    var vJson = JSON.parse(eventData.data[item1.key].v);
                                    item1.code = JSON.stringify(vJson[0]);
                                 }else {
                                    item1.code = eventData.data[item1.key].v;
                                 }
                                 item1.moment = that.timestampChangeTime(eventData.data[item1.key].t);  //时间戳转化成日期
                              }else {
                                 item1.code = "";
                                 item1.moment = "";
                              }
                           }
                           if(item1.value == 3) {
                              item.statusName = "待机";
                              item1.statusName = "待机";
                              item.statusStyle = "#FFC53D";
                           }
                           if(item1.value == 4) {
                              item.statusName = "离线";
                              item1.statusName = "离线";
                              item.statusStyle = "#595959";
                           }
                           if(item1.value == 5) {
                              item.statusName = "调试";
                              item1.statusName = "调试";
                              item.statusStyle = "#40A9FF";
                           }

                        })
                     }
                  })
                  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 = "--";
                  });
               };
            }
         })
      },
      timestampChangeTime(timestamp) {  //时间戳转换成时间
         var date = new Date(timestamp);
         //提取年月日小时分钟秒 
         var year = date.getFullYear();  
         var month = date.getMonth() + 1; // 月份从0开始，所以要加1  
         var day = date.getDate();  
         var hours = date.getHours();  
         var minutes = date.getMinutes();  
         var seconds = date.getSeconds();  
         // 格式化日期字符串  
         var formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
         return formattedDate;
      },
      getdevicestatus() {
         this.$HTTP.get(`/api/mdc/work-station-analysis/device-status-statistics`).then(res => {
            if (res.code == 200) {
               res.data.forEach(item => {
                  item.active = false;
                  this.allwcs.forEach(item1 => {
                     if (item.status == item1.code) {
                        item.color = item1.color;
                     }
                     if(that.timestatus.length == 0) return;  //没值不用循环
                       that.timestatus.forEach((item,index)=> {  //第一步把v放到code里
                          if(eventData.id == item.id) {
                             if(item.properties == null) {
                                item.properties = [];
                                return;
                             }
                             item.time = diffTime;
                             item.properties.forEach((item1,index1)=> {
                                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') {  //报警
                                    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 {
                                    if(eventData.data[item1.key]) {
                                       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);
               }
            })
           },
           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 = "#370C0D";
                  res.data[1].color = "#73D13D";
                  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;
               }
            })
           }
        }
    }
                  if (this.$route.query.currentTag == item.status) {
                     item.active = true;
                  }
               })
               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 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;
       position: relative;
   }
   .status-content-cardBox:hover .status-next,.status-content-cardBox:hover .status-prev {
      display: block;
   }
   .status-content-cardp {
       height: 50%;
       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: #409eff;
       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;
   }
   .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;
   }
   .card-value-bg1 {
      background-color: rgba(115, 209, 61, 0.14);
   }
   .card-value-bg2 {
      background-color: rgba(55, 12, 13, 0.14);
   }
.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;
   position: relative;
}

.status-content-cardBox:hover .status-next,
.status-content-cardBox:hover .status-prev {
   display: block;
}

.status-content-cardp {
   height: 50%;
   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;
   max-width: 37%;
   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: 2px;
}

.status-card-detail-time {
   line-height: 12px;
   margin-left: 2px;
}

.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: #409eff;
   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;
   cursor: pointer;
}

.status-card-bottom-detail,
.status-card-bottom-realtime {
   width: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.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;
}

.card-value-bg1 {
   background-color: rgba(115, 209, 61, 0.14);
}

.card-value-bg2 {
   background-color: rgba(55, 12, 13, 0.14);
}
</style>