优先

gaoshp

2024-10-09 9ccaa7a607481405ee22519aa49c786a46b95e22

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

@@ -1,8 +1,8 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-10-07 21:48:45
 * @FilePath: /mdc/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-10-09 20:40:22
 * @FilePath: /cps-web/src/views/mdc/realtime-status/index.vue
 实时看板
-->
<template>
@@ -16,7 +16,7 @@
            <el-icon class="setIcon">
               <Setting />
            </el-icon>
            <span class="setBtn" @click="goSet">设置</span>
            <span class="setBtn" @click="goSet">分析设置</span>
         </span>
      </div>
      <ul class="status-view-box" v-if="station == '状态视图'">
@@ -44,7 +44,8 @@
               <ArrowRight />
            </el-icon>
         </div>
         <div class="status-content-cardp" v-for="item in timestatus" :style="{ 'width': (100 / column) + '%' }">
         <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">
@@ -59,22 +60,19 @@
                  </div>
                  <div class="status-card-machine" style="border-color: #ccc;">
                     <div class="status-card-machine-img">
                        <img src="./station.png" width="68" height="68">
                        <img src="./station1.jpg" 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
                  <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>
@@ -84,7 +82,7 @@
      </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="realtime-analysis-card" v-for="item in timestatus[clickIndex].properties">
               <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' }">
@@ -108,6 +106,7 @@
   },
   data() {
      return {
         clickIndex: 0,
         allwcs: [],
         statusStyle: "#ccc",
         titleMap: "",
@@ -127,9 +126,8 @@
      }
   },
   mounted() {
      this.deviceStatus = this.$route.query.currentTag?[...this.$route.query.currentTag]:[];
      this.deviceStatus = this.$route.query.currentTag ? [...this.$route.query.currentTag] : [];
      this.getstationlabelList();  //获取标签视图下的list
      this.setIntervalTime();   //十秒增加时间
      this.getprocess(); //获取颜色==》获取顶部title==》设置几行几列==》ws
   },
   methods: {
@@ -194,16 +192,16 @@
         this.$HTTP.get("/api/blade-cps/group/get-mdc-group").then(res => {
            if (res.code == 200) {
               this.stationlabelList = res.data;
               if(res.data.length != 0) {
               if (res.data.length != 0) {
                  this.stationlabel = res.data[0].groupName;
               }
            }
         })
      },
      changestatus(name) {
         if(this.stationlabelList.length == 0) {
         if (this.stationlabelList.length == 0) {
            this.station = "状态视图";
            //this.$message.error("不能点击");
            this.$message.error('未选定实时看板查询组，请到"分析设置 -> 实时看板查询组设置"中选择工位组');
            return;
         }
         this.station = name;
@@ -215,17 +213,19 @@
         }
         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;
      showvisible(item, index) {
         //clickIndex
         this.clickIndex = index;
         // 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) {
@@ -327,7 +327,7 @@
               this.$TOOL.socket.websocket.onmessage = function (event) {
                  //num++;
                  var eventData = JSON.parse(event.data);
                  if(Object.keys(eventData.data).length == 0) return;
                  if (Object.keys(eventData.data).length == 0) return;
                  if (that.timestatus.length == 0) return;  //没值不用循环
                  that.timestatus.forEach((item, index) => {  //第一步把v放到code里
                     if (eventData.id == item.id) {
@@ -338,6 +338,7 @@
                        if (eventData.data.DeviceStatus) {
                           var time = moment(eventData.data.DeviceStatus.t).format('YYYY-MM-DD HH:mm:ss');
                           var diffTime = that.changeTime(time);  //转换成差值（时分秒）
                           that.setIntervalTime();   //十秒增加时间
                           item.time = diffTime;
                           that.allwcs.forEach(item1 => {
                              if (item1.code == eventData.data.DeviceStatus.v) {
@@ -354,7 +355,8 @@
                        item.properties.forEach((item1, index1) => {
                           if (item1.key == "DeviceStatus") {  //机器状态
                              that.allwcs.forEach(item2 => {
                                 if (item2.code == item1.value) {
                                 if (item2.code == eventData.data.DeviceStatus.v) {
                                    item1.value = item2.code;
                                    item1.color = item2.color;
                                    item1.code = item2.name;
                                 }
@@ -423,7 +425,7 @@
            }
         })
      }
   }
   },
}
</script>