1

lzhe

2024-11-08 4f17438e8199eb44c98d6fcc888dc08ece3bab19

 src/views/mdc/station-live.vue

@@ -2,19 +2,19 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-05-15 16:25:52
 * @LastEditTime: 2024-11-08 15:55:24
 * @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
-->
<template>
   <div class="aposcope-main">
      <div class="aposcope-left">
         <div class="left-title">查询条件</div>
         <el-tree :data="tableData" node-key="id" default-expand-all :expand-on-click-node="false" :props="defalutProps" @node-click="handleNodeClick" ref="treeRef" highlight-current />
         <el-row style="margin: 8px;font-size: 14px;">工位</el-row>
         <MYTree v-model="treeChecked" @loaded="query"></MYTree>
      </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,15 +38,15 @@
         <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': item.color}">{{item.description}}</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>
@@ -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>
@@ -121,19 +121,22 @@
          </el-tabs>
      </div>
   </div>
   <save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" :workstationId="lastLevelId" @closed="dialog.save=false"></save-dialog>
   <save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" :workstationId="treeChecked.toString()" @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'
   import saveDialog from './add-station-status';
   import MYTree from './MYTree.vue';
   export default {
      name: "state-feedback",
      data(){
         return {
            treeChecked: [],
            achievements: [],
            collectionstatus: [],
            checked1: "",
            humanFeedback: "",
            alarmtotal: 0,
            alarmtableData: [],
            wcsDate: "",
@@ -260,7 +263,6 @@
            dialog: {
               save: false
            },
            lastLevelId: "",
            current: "1",
            size: "15",
            searchData: {
@@ -293,18 +295,22 @@
      created(){
         
      },
      watch: {
         treeChecked() {
            this.query()
         }
      },
      mounted(){
         this.newDate();  //获取当前日期
         this.getTreeList(this.$route.query.code);
      },
      components: {
         saveDialog
         saveDialog,MYTree
       },
      methods: {
         table_edit(){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open('edit').setData(this.lastLevelId);
               this.$refs.saveDialog.open('edit').setData(this.treeChecked.toString());
            })
         },
         alarmSizeChange(val) {
@@ -319,7 +325,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.treeChecked.toString()}?current=${this.alarmsearchData.current}&size=${this.alarmsearchData.size}`).then(res=> {
               if(res.code == 200) {
                  this.alarmtableData = res.data.records;
                  this.alarmtotal = res.data.total;
@@ -336,10 +342,10 @@
         getrecord() {  //班次状态记录table
            var obj = {
               date: this.wcsDate,
               humanFeedback: true,
               workstationId: this.lastLevelId
               humanFeedback: this.humanFeedback,
               workstationId: this.treeChecked.toString()
            }
            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) {
                  var defaultValues = {  
                     oee: 0,  
@@ -412,10 +418,10 @@
            var obj = {
               date: this.wcsDate,
               //date : "2024-05-15",
               humanFeedback: true,
               workstationId: this.lastLevelId
               humanFeedback: this.humanFeedback,
               workstationId: this.treeChecked.toString()
            }
            this.$HTTP.post(`/api/blade-mdc/status-record/shift-index-status-record-chart`,obj).then(res=> {
            this.$HTTP.post(`/api/mdc/status-record/shift-index-status-record-chart`,obj).then(res=> {
               if(res.code == 200) {
                  var yAxisData = [];
                  var newData = [];
@@ -505,7 +511,6 @@
                  interval: 1440/6,  //每隔多少分钟显示一个刻度
                  axisLabel: {
                     formatter: (value)=> {
                        //console.log(value,111)
                        if(value == 0) {
                           return "00:00:00";
                        }else if(value == 240) {
@@ -561,10 +566,10 @@
         getwscLvalue() {
            var obj = {
               date: this.wcsDate,
               humanFeedback: true,
               workstationId: this.lastLevelId
               humanFeedback: this.humanFeedback,
               workstationId: this.treeChecked.toString()
            }
            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));
@@ -587,7 +592,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};
@@ -600,10 +605,10 @@
         getwcsR() {
            var obj = {
               date: this.wcsDate,
               humanFeedback: true,
               workstationId: this.lastLevelId
               humanFeedback: this.humanFeedback,
               workstationId: this.treeChecked.toString()
            }
            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) {
                  var myChart = echarts.init(document.getElementById('wcs-right')); 
                  res.data.forEach(item=> {
@@ -627,90 +632,88 @@
         addfeedbackSuccess() {
            
         },
         handleNodeClick(data) {
            if(data.code) {
               this.lastLevelId = data.id;
               this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
                  if(res.code == 200) {
                     this.stationForm = res.data;
                     this.getdmp(this.lastLevelId,this.stationForm.machineId);
                     this.newDate();  //获取当前日期
                     this.getwcsR();
                     this.getwscLvalue();  //左侧图表
                     this.alarmsearchBtn();  //机器履历
                     this.getrecord();  //班次状态记录table
                     this.getlogcart();  //班次状态记录chart
         query() {
            if (!this.treeChecked.toString()) return;
            this.$HTTP.get(`/api/smis/workstation/get?workstationId=${this.treeChecked.toString()}`).then(res=> {
               if(res.code == 200) {
                  if(res.data.avatar == "") {
                     res.data.avatar = station;
                  }
               })
            }
                  this.stationForm = res.data;
                  this.getdmp(this.stationForm.machineId);
                  //this.newDate();  //获取当前日期
                  this.getwcsR();
                  this.getwcsLcolor();  //左侧图表
                  this.alarmsearchBtn();  //机器履历
                  this.getrecord();  //班次状态记录table
                  this.getlogcart();  //班次状态记录chart
               }
            })
         },
         getdmp(lastLevelId,machineId) {
            console.log(lastLevelId,machineId)
            this.$HTTP.get(`/api/blade-cps/workstation/get-dmp-variables?machineId=${machineId}&workstationId=${lastLevelId}`).then(res=> {
         getdmp(machineId) {
            this.$HTTP.get(`/api/smis/workstation/listDatapointsByWorkstationId?machineId=${machineId}&workstationId=${this.treeChecked.toString()}`).then(res=> {
               if(res.code == 200) {
                  this.dmpList = [];
                  var that = this;
                  //发送websocket
                  var obj = {
                     type: "realTimeData",
                     workstationIdList: [lastLevelId]
                     workstationIdList: this.treeChecked
                  }
                  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) {  
                     if(res.data.length == 0) return;  //没值不用循环
                       res.data.forEach(item=> {  //第一步把v放到code里
                          var eventData = JSON.parse(event.data);
                         if(item.name == "DeviceStatus") {  //机器状态
                             item.code = eventData.data[item.name].v;
                             that.allwcs.forEach(item1=> {
                     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和运行对应
                                   if(item.code == "2") {
                                      item.color = "#73D13D";
                                   }else {
                                      item.color = "#75C0C0";
                                   }
                                   item.color = item1.color;
                                }
                             })
                         }else {
                            if(item.name == 'Alarm') {  //报警
                               var v = JSON.parse(eventData.data[item.name].v);
                               item.description = v.code;
                               item.codeName = v.msg;
                               item.color = "#370C0D";
                            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 {
                               item.codeName = eventData.data[item.name].v;
                                item.color = "#75C0C0";
                              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 = res.data;
                     that.dmpList = JSONData;
                   };
               }
            })
         },
         getLastLevelIds(tree) {  
            if (tree.length === 0) return ""; // 如果没有根节点，返回空 
            const lastLevelIds = []; 
            const lastLevelCodes = [];
            function traverseTree(node) {  
               if(!node.code) {
                  lastLevelCodes.push(node.id);
               }
               if (node.children.length > 0) {  
                  node.children.forEach(traverseTree); // 递归遍历子节点  
               } else {  
                  if(node.code) {
                     lastLevelIds.push(node.id); // 有code才行 
                  }
               }
            }  	
            // 只遍历第一个根节点  
            traverseTree(tree[0]);  
            return {lastLevelCodes,lastLevelId:lastLevelIds[0]}; // 返回lastLevelCodes：没有code的数组。lastLevelId：有code的第一个id
         },
         buildTree(items) {  
           const idMap = {};  
@@ -747,38 +750,8 @@
            })
            return tree;
         },
         getTreeList(id) {
            var obj = {
               groupCategory: 1,
               groupType: "group_workstation"
            }
            this.$HTTP.post("/api/blade-cps/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(()=> {
                        if(id) {
                           this.lastLevelId = id;  //指定id
                        }else {
                           this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
                        }
                        this.$refs.treeRef.setCurrentKey(this.lastLevelId);  //第一个节点的第一个子节点最后一级默认选中
                        //以下是初始化数据
                        this.getlist();  //渲染详情和(状态list)
                        this.getwcsLcolor();  //左侧图表
                        this.getwcsR();  //右侧图标
                        this.getachievements();  //班次状态记录采集状态
                        this.getrecord();  //班次状态记录table
                        this.getlogcart();  //班次状态记录chart
                     })
							
                  }
               }
            })
         },
         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 = [];  //人工反馈状态
@@ -793,14 +766,6 @@
                  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.stationForm = res.data;
                  this.getdmp(this.lastLevelId,this.stationForm.machineId);
               }
            })
         }
@@ -818,6 +783,7 @@
   margin-right: 8px;
   padding: 4px;
   background-color: #fff;
   padding-top: 20px;
}
.aposcope-right {
   flex: 1;