update

gaoshp

2024-11-03 3e091224ab26252d8624b42b461ba773ee8bee0f

 src/views/mdc/station-live.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-19 18:26:26
 * @LastEditTime: 2024-10-23 10:34:29
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -14,7 +14,7 @@
      </div>
      <div class="aposcope-right">
         <div class="content-machine-box">
            <div class="content-machine-img"><img src="./station.png" alt=""></div>
            <div class="content-machine-img"><img :src="stationForm.avatar" alt=""></div>
            <div class="content-machine-detail">
               <div class="content-machine-name">{{stationForm.machineName}}</div>
               <el-form :model="stationForm" ref="dialogForm" label-width="80px" label-position="center" style="width: 100%;">
@@ -38,16 +38,16 @@
         <div class="collect-info-panel">
            <div class="fact-analysis-realtim">
               <div class="wimi-empty" style="background-color: rgb(255, 255, 255);" v-if="dmpList.length == 0">
                  <div class="wimi-empty-img" style="width: 150px; height: 150px;">
                  <!-- <div class="wimi-empty-img" style="width: 150px; height: 150px;">
                     <img src="./quesheng.bd026700.png" style="height: auto; width: 100%;">
                  </div>
                  </div> -->
                  <div class="empty-description">
                     <div>暂无数据</div>
                  </div>
               </div>
               <div class="fact-analysis-card" v-for="item in dmpList" v-if="dmpList.length != 0">
                  <div class="card-name" style="background-color: rgb(127, 192, 192);">{{item.description}}</div>
                  <div class="card-value" style="background-color: rgba(127, 192, 192, 0.14);"></div>
                  <div class="card-name" :style="{'background-color': item.color}">{{item.dpLabel}}</div>
                  <div :class="{'card-value': true,'card-value-bg1':item.name != 'Alarm','card-value-bg2':item.name == 'Alarm'}">{{item.codeName}}</div>
               </div>
            </div>
         </div>
@@ -70,7 +70,7 @@
                           <div class="status-box" v-for="item in achievements"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
                        </div>
                        <div class="status-wrap">
                           <el-checkbox v-model="checked1" label="人工反馈状态" size="large" />
                           <el-checkbox v-model="humanFeedback" label="人工反馈状态" size="large" />
                           <div class="status-con">
                              <div class="status-box" v-for="item in collectionstatus"><div class="status-color" :style="{'background-color': item.color}"></div>{{ item.name }}</div>
                           </div>
@@ -81,13 +81,21 @@
                     <div id="wcs-log" style="width: 100%;height:200px;"></div>
                     <el-table ref="multipleTableRef1" :data="recordData" border style="width: 100%;">
                        <el-table-column prop="shiftIndexName" label="班次"></el-table-column>
                        <el-table-column prop="temdata" label="调试"></el-table-column>
                        <el-table-column prop="temdata" label="离线"></el-table-column>
                        <el-table-column prop="temdata" label="待机"></el-table-column>
                        <el-table-column prop="temdata" label="报警"></el-table-column>
                        <el-table-column prop="temdata" label="运行"></el-table-column>
                        <el-table-column prop="perdata" label="稼动率%"></el-table-column>
                        <el-table-column prop="perdata" label="报警率%"></el-table-column>
                        <el-table-column prop="5" label="调试"></el-table-column>
                        <el-table-column prop="4" label="离线"></el-table-column>
                        <el-table-column prop="3" label="待机"></el-table-column>
                        <el-table-column prop="1" label="报警"></el-table-column>
                        <el-table-column prop="2" label="运行"></el-table-column>
                        <el-table-column prop="oee" label="稼动率%">
                           <template #default="scope">
                              <span>{{(Number(scope.row.oee) * 100).toFixed(2)}}</span>
                           </template>
                        </el-table-column>
                        <el-table-column prop="perdata" label="报警率%">
                           <template #default="scope">
                              <span>{{(Number(scope.row.fault) * 100).toFixed(2)}}</span>
                           </template>
                        </el-table-column>
                     </el-table>
                  </div>
               </div>
@@ -116,6 +124,8 @@
   <save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
</template>
<script>
   import station from "./station.png";
   import moment from 'moment'
   import * as echarts from 'echarts';
   import saveDialog from './add-station-status'
   export default {
@@ -124,7 +134,7 @@
         return {
            achievements: [],
            collectionstatus: [],
            checked1: "",
            humanFeedback: "",
            alarmtotal: 0,
            alarmtableData: [],
            wcsDate: "",
@@ -142,7 +152,7 @@
                  tooltip: {  
                      trigger: 'item',  
                      //formatter: '{a} <br/>{b} : {c} ({d}%)'  
                      formatter: '{a} 0分钟'
                      formatter: '{a} {c}分钟'
                  },  
                  legend: {  
                      orient: 'vertical',  
@@ -233,26 +243,13 @@
               },
               xAxis: {
                  type: 'category',
                  data: ['00:00:00', '02:00:00', '04:00:00', '06:00:00', '08:00:00', '10:00:00', '12:00:00', '14:00:00', '18:00:00'],  
                  data: [],  
               },
               yAxis: {
                  type: 'category',
                  data: ['1', '2']
               },
               series: [
                  {	
                          name: 'wcsLog',  
                          type: 'bar',   
                          data: [],  
                          emphasis: {  
                              itemStyle: {  
                                  shadowBlur: 10,  
                                  shadowOffsetX: 0,  
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'  
                              }  
                          }  
                  }
               ]
               series: []
            },
            dmpList: [],
            stationForm: {
@@ -289,7 +286,9 @@
               current: "1",
               size: "15"
            },
            recordData: [] // 班次状态记录table
            records: [],
            recordData: [], // 班次状态记录table
            allwcs: []
         }
      },
      created(){
@@ -297,7 +296,7 @@
      },
      mounted(){
         this.newDate();  //获取当前日期
         this.getTreeList();
         this.getTreeList(this.$route.query.code);
      },
      components: {
         saveDialog
@@ -321,7 +320,7 @@
            this.alarmsearchBtn();
         },
         alarmsearchBtn() {
            this.$HTTP.get(`/api/blade-mdc/work-station-analysis/alarm/${this.lastLevelId}?current=${this.alarmsearchData.current}&size=${this.alarmsearchData.size}`).then(res=> {
            this.$HTTP.get(`/api/mdc/work-station-analysis/alarm/${this.lastLevelId}?current=${this.alarmsearchData.current}&size=${this.alarmsearchData.size}`).then(res=> {
               if(res.code == 200) {
                  this.alarmtableData = res.data.records;
                  this.alarmtotal = res.data.total;
@@ -338,50 +337,240 @@
         getrecord() {  //班次状态记录table
            var obj = {
               date: this.wcsDate,
               humanFeedback: true,
               humanFeedback: this.humanFeedback,
               workstationId: this.lastLevelId
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
            this.$HTTP.post(`/api/mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
               if(res.code == 200) {
                  res.data.forEach(item=> {
                     item.temdata = "00:00:00";
                     item.perdata = "0";
                  })
                  console.log(res.data,980)
                  var defaultValues = {  
                     oee: 0,  
                     fault: 0,  
                     '1': "00:00:00",  
                     '2': "00:00:00",  
                     '3': "00:00:00",  
                     '4': "00:00:00",  
                     '5': "00:00:00"  
                  };  
                  res.data.forEach(item => {  
                     Object.keys(defaultValues).forEach(key => {  
                        if (!item[key]) {  
                        item[key] = defaultValues[key];  
                        }  
                     });  
                  });
                  this.recordData = res.data;
               }
            })
         },
         renderItem(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;
            var rectShape = echarts.graphic.clipRectByRect(
               {
                  x: start[0],
                  y: start[1] - height / 2,
                  width: end[0] - start[0],
                  height: height
               },
               {
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height
               }
            );
            return (
                  rectShape && {
                  type: 'rect',
                  transition: ['shape'],
                  shape: rectShape,
                  style: api.style()
               }
            );
         },
         getColor(name) {
            var color = '';
            this.achievements.forEach(item=> {
               if(item.code == name) {
                  color = item.color;
               }
            })
            return color;
         },
         getStatus(name) {
            var stauts = {};
            this.allwcs.forEach(item=> {
               if(item.code == name) {
                  stauts.name= item.name;
                  stauts.type= item.type;
               }
            })
            return stauts;
         },
         getlogcart() {  //班次状态记录chart
            var obj = {
               date: this.wcsDate,
               humanFeedback: true,
               //date : "2024-05-15",
               humanFeedback: this.humanFeedback,
               workstationId: this.lastLevelId
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-table`,obj).then(res=> {
            this.$HTTP.post(`/api/mdc/status-record/shift-index-status-record-chart`,obj).then(res=> {
               if(res.code == 200) {
                  var myChart = echarts.init(document.getElementById('wcs-log')); 
                  res.data.forEach(item => {
                     item.value = 0;
                  var yAxisData = [];
                  var newData = [];
                  this.records = res.data.reverse();
                  res.data.forEach(item=> {
                     if(item.statusRecordList == null) item.statusRecordList = [];
                     var filterRecordList = [];
                     item.statusRecordList.forEach(item1=> {
                        if(item1.endTime.startsWith(this.wcsDate)) {  //只返回当前结束日期的
                           filterRecordList.push(item1)
                        }
                     })
                     item.statusRecordList = filterRecordList;
                  })
                  this.wcsOptionLog.series[0].data = res.data;
                  res.data.forEach((item,index)=> {
                     yAxisData.push(item.shiftIndex);
                     //计算开始时间，显示时间
                     if(item.statusRecordList == null) item.statusRecordList = [];
                     item.statusRecordList.forEach(item1=> {
                        var initstart = item1.startTime.split(" ")[0];  //根据日期计算差值
                        var startTime = moment(item1.startTime).diff(moment(initstart + " 00:00:00"), 'minutes');
                        var endTime = moment(item1.endTime).diff(moment(initstart + " 00:00:00"), 'minutes');
                        var diff = moment(item1.endTime).diff(moment(item1.startTime), 'minutes') //开始了多久
                        var color = this.getColor(item1.wcs);
                        item1.value = [index,startTime,endTime,diff];
                        item1.itemStyle = {"normal": {"color": color}};
                        item1.statusName = this.getStatus(item1.wcs).name;
                               item1.statusType = this.getStatus(item1.wcs).type;
                     })
                     newData.push(...item.statusRecordList);
                  })
                  //渲染图表
                  this.setCharts(yAxisData,newData);

                  var nowTime = moment().format("HH:mm:ss");  //11:37:54
                  var spaceTime = moment(obj.date + " " + nowTime).diff(moment(obj.date + " 00:00:00"), 'hours');  //离当天00:00:00过了多少小时
                  //console.log(spaceTime,obj.date + " " + nowTime,234)
                  return;
                  //计算时间
                  var startOfDay = moment().startOf('day'); //00:00:00
                  var now = moment();  //当前时间
                  var diffInMilliseconds = now.diff(startOfDay);  //时间差
                  var diffInHours = Math.floor(diffInMilliseconds / (1000 * 60 * 60));  //时间差转换成小时
                  //分割
                  var everTime = Math.ceil(diffInHours/8);
                  var arrData = [];
                  for(var i=0;i<=diffInHours;i+=everTime) {
                     if(i<=10) {
                        var num = '0' + i;
                     }else {
                        var num = i;
                     }
                     arrData.push(num + ':00:00');
                  }
                  //计算时间结束
                  this.wcsOptionLog.xAxis.data = [...arrData,moment().format("HH:mm:ss")];
                  myChart.setOption(this.wcsOptionLog);
               }
            })
         },
         setCharts(yAxisData,data) {
            var option = {
               tooltip: {
                  formatter: function (params) {
                     if(params.data.statusType == 4) {
                        var dom = `<span class="tipdesc">工位:</span>${params.data.name}</br>
                                 <span class="tipdesc">状态:</span>${params.data.wcsDesc}</br>
                                 <span class="tipdesc">描述:</span>${params.data.feedbackDesc}</br>
                                 <span class="tipdesc">状态时间:</span>${params.data.startTime} ～ ${params.data.endTime}</br>
                                 <span class="tipdesc">反馈时间:</span>${params.data.feedbackTime}</br>
                                 <span class="tipdesc">反馈人:</span>${params.data.feedUser}</br>`
                     }else {
                        var dom = `<span class="tipstatus">${params.data.statusName}</span></br>
                                 <span class="tipdesc">时段:</span><span>${params.data.startTime.split(" ")[1]} ～ ${params.data.endTime.split(" ")[1]}</span></br>`
                     }
                     return dom;
                  }
               },
               grid: {
                  top: 10,
                  left: 70,
                  bottom: 120
               },
               xAxis: {
                  min: 0,
                  max: 1440,  // 单位分钟
                  interval: 1440/6,  //每隔多少分钟显示一个刻度
                  axisLabel: {
                     formatter: (value)=> {
                        if(value == 0) {
                           return "00:00:00";
                        }else if(value == 240) {
                           return "04:00:00";
                        }else if(value == 480) {
                           return "08:00:00";
                        }else if(value == 720) {
                           return "12:00:00";
                        }else if(value == 960) {
                           return "16:00:00";
                        }else if(value == 1200) {
                           return "18:00:00";
                        }else if(value == 1440) {
                           return "00:00:00";
                        }
                     }
                  }
               },
               yAxis: {
                  type: 'category',
                  axisLabel: {
                     formatter: function (value) {
                        return value;
                     },
                     rich: {
                        a: {
                           color: '#409eff',
                           cursor: 'pointer',
                           fontSize: '12px'
                        }
                     }
                  },
                  data: yAxisData
               },
               series: [
                  {
                  type: 'custom',
                  renderItem: this.renderItem,
                  itemStyle: {
                     opacity: 0.8
                  },
                  encode: {
                     x: [1, 2],
                     y: 0
                  },
                  data: data
                  }
               ]
            };
            var myChart = echarts.init(document.getElementById('wcs-log')); 
            myChart.setOption(option);
         },
         getwscLvalue() {
            var obj = {
               date: this.wcsDate,
               humanFeedback: true,
               humanFeedback: this.humanFeedback,
               workstationId: this.lastLevelId
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/time-distribution`,obj).then(res=> {
            this.$HTTP.post(`/api/mdc/status-record/time-distribution`,obj).then(res=> {
               if(res.code == 200) {
                  var myChart = echarts.init(document.getElementById('wcs-left')); 
                  var wcsOption = JSON.parse(JSON.stringify(this.wcsBeginOption));
                  if(res.data.length == 0) {
                     wcsOption.forEach(item=> {
                        item.value = 20;
                        item.value = 0;
                     })
                  }else {
                     wcsOption.forEach(item=> {
@@ -398,7 +587,7 @@
            })
         },
         getwcsLcolor() {
            this.$HTTP.get(`/api/blade-cps/global_wcs/list?code=&name=`).then(res=> {
            this.$HTTP.get(`/api/smis/global_wcs/list?code=&name=`).then(res=> {
               if(res.code == 200) {
                  res.data.forEach(item=> {
                     item.itemStyle = {color: item.color};
@@ -411,14 +600,14 @@
         getwcsR() {
            var obj = {
               date: this.wcsDate,
               humanFeedback: true,
               humanFeedback: this.humanFeedback,
               workstationId: this.lastLevelId
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/equipment-efficiency`,obj).then(res=> {
            this.$HTTP.post(`/api/mdc/status-record/equipment-efficiency`,obj).then(res=> {
               if(res.code == 200) {
                  console.log(res.data,98988)
                  var myChart = echarts.init(document.getElementById('wcs-right')); 
                  res.data.forEach(item=> {
                     item.value = (Number(item.value)*100).toFixed(2);
                     if(item.name == "运行率") item.itemStyle = {color: '#73d13d'};
                     if(item.name == "报警率") item.itemStyle = {color: '#ff4d4f'};
                     if(item.name == "稼动率") item.itemStyle = {color: '#40a9ff'};
@@ -441,11 +630,14 @@
         handleNodeClick(data) {
            if(data.code) {
               this.lastLevelId = data.id;
               this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
               this.$HTTP.get(`/api/smis/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
                  if(res.code == 200) {
                     if(res.data.avatar == "") {
                        res.data.avatar = station;
                     }
                     this.stationForm = res.data;
                     this.getdmp(this.lastLevelId,this.stationForm.machineId);
                     this.newDate();  //获取当前日期
                     //this.newDate();  //获取当前日期
                     this.getwcsR();
                     this.getwscLvalue();  //左侧图表
                     this.alarmsearchBtn();  //机器履历
@@ -456,9 +648,67 @@
            }
         },
         getdmp(lastLevelId,machineId) {
            this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> {
            this.$HTTP.get(`/api/smis/workstation/listDatapointsByWorkstationId?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> {
               if(res.code == 200) {
                  this.dmpList = res.data;
                  this.dmpList = [];
                  var that = this;
                  //发送websocket
                  var obj = {
                     type: "realTimeData",
                     workstationIdList: [lastLevelId]
                  }
                  if(res.data.dpConfig == null || res.data.dpConfig.length == 0) return;  //没值不用循环
                  if(this.$TOOL.socket.websocket == null) {  //没有建立先建立
                     this.$TOOL.socket.connectToWebSocket(this.$TOOL.cookie.get("TOKEN")); 
                  }
                  this.$TOOL.socket.sendDataToWebSocket(obj);  //发送
                  this.$TOOL.socket.websocket.onmessage = function(event) {  
                     var JSONData = JSON.parse(res.data.dpConfig);
                     var eventData = JSON.parse(event.data);
                     if(Object.keys(eventData.data).length == 0) return;
                       JSONData.forEach((item,index)=> {  //第一步把v放到code里
                         if(item.dpName == "DeviceStatus") {  //机器状态
                           if(eventData.data[item.dpName]) {
                              item.code = eventData.data[item.dpName].v;
                           }
                             that.allwcs.forEach((item1)=> {
                                if(item.code == item1.code) {
                                   item.codeName = item1.name;    //第二步把v的code和运行对应
                                   item.color = item1.color;
                                }
                             })
                         }else {
                            if(item.dpName == 'Alarm') {  //报警
                              if(eventData.data[item.dpName]) {
                                 var v = JSON.parse(eventData.data[item.dpName].v);
                                 if(Array.isArray(v)) {  //如果是数组，不赋值
                                    if(v.length == 0) {
                                       JSONData.splice(index,1);
                                    }else {
                                       item.codeName = v[0].msg;
                                    }
                                 }else {
                                    item.codeName = v.msg;
                                 }
                              }
                            }else {
                              if(eventData.data[item.dpName]) {
                                 item.codeName = eventData.data[item.dpName].v;
                              }else {
                                 item.codeName = "";
                              }
                            }
                           that.allwcs.forEach((item1)=> {
                                if(item.code == item1.code) {
                                   item.color = item1.color;
                                }else {
                                 item.color = "#7FC0C0";
                              }
                             })
                         }
                     });
                     that.dmpList = JSONData;
                   };
               }
            })
         },
@@ -517,21 +767,25 @@
            })
            return tree;
         },
         getTreeList(flag) {
         getTreeList(id) {
            var obj = {
               groupCategory: 1,
               groupType: "group_workstation"
            }
            this.$HTTP.post("/api/blade-cps/group/groupWorkstation/type",obj).then(res=> {
            this.$HTTP.post("/api/smis/group/groupWorkstation/type",obj).then(res=> {
               if(res.code == 200) {
                  if (res.code == 200) {
                     var treeDisabled = this.addTreeDisable(res.data);
                     this.tableData = this.buildTree(treeDisabled);  //从扁平化变为树状结构
                     this.$nextTick(()=> {
                        this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
                        if(id) {
                           this.lastLevelId = id;  //指定id
                        }else {
                           this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
                        }
                        this.$refs.treeRef.setCurrentKey(this.lastLevelId);  //第一个节点的第一个子节点最后一级默认选中
                        //以下是初始化数据
                        this.getlist();  //渲染反馈列表
                        this.getlist();  //渲染详情和(状态list)
                        this.getwcsLcolor();  //左侧图表
                        this.getwcsR();  //右侧图标
                        this.getachievements();  //班次状态记录采集状态
@@ -544,7 +798,7 @@
            })
         },
         getachievements() { //班次状态记录采集状态
            this.$HTTP.get(`/api/blade-cps/global_wcs/wcs-achievements`).then(res=> {
            this.$HTTP.get(`/api/smis/global_wcs/wcs-achievements`).then(res=> {
               if(res.code == 200) {
                  var achievements = [];//采集状态
                  var collectionstatus = [];  //人工反馈状态
@@ -558,12 +812,16 @@
                  })
                  this.achievements = achievements;
                  this.collectionstatus = collectionstatus;
                  this.allwcs = res.data;
               }
            })
         },
         getlist() {
            this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
               if(res.code == 200) {
            this.$HTTP.get(`/api/smis/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
               if(res.code == 200) { 
                  if(res.data.avatar == "") {
                     res.data.avatar = station;
                  }
                  this.stationForm = res.data;
                  this.getdmp(this.lastLevelId,this.stationForm.machineId);
               }
@@ -669,6 +927,13 @@
    padding: 0 8px;
    overflow: hidden;
    word-break: break-all;
   line-height: 68px;
}
.card-value-bg1 {
   background-color: rgba(115, 209, 61, 0.14);
}
.card-value-bg2 {
   background-color: rgba(55, 12, 13, 0.14);
}
.wcs-main {
   display: flex;
@@ -759,7 +1024,7 @@
   position: absolute;
    right: 10px;
    top: -2px;
    color: #3b8e8e;
    color: #409eff;
    cursor: pointer;
}
.status-wrap.align-left, .status-wrap:first-child {
@@ -772,7 +1037,7 @@
    justify-content: start;
}
.collect-status {
    color: #3b8e8e;
    color: #409eff;
    margin-right: 16px;
   font-size: 14px;
}
@@ -790,10 +1055,7 @@
}
.status-wrap {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}
.status-wrap .status-con {
@@ -802,6 +1064,11 @@
    flex-wrap: wrap;
}
.status-wrap /deep/ .el-checkbox.el-checkbox--large {
    color: #3b8e8e;
    color: #409eff;
}
#record /deep/ .tipstatus {
   width: 100%;
   display: inline-block;
   border-bottom: 1px solid #eee;
}
</style>