update

gaoshp

2024-04-18 71f58f33a8bd79e66d5cc70e62c1a7daa2861e30

 src/views/mdc/station-live.vue

@@ -1,21 +1,299 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-09 22:11:27
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/state-feedback.vue
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-18 18:35:55
 * @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>
        状态反馈
    </div>
   <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 />
      </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-detail">
               <div class="content-machine-name">461</div>
               <el-form :model="stationForm" ref="dialogForm" label-width="80px" label-position="center" style="width: 100%;">
                  <el-row>
                     <el-col :span="8">
                        <el-form-item label="工位编号">{{stationForm.test}}</el-form-item>
                     </el-col>
                     <el-col :span="8">
                        <el-form-item label="机器品牌">{{stationForm.test}}</el-form-item>
                     </el-col>
                     <el-col :span="8">
                        <el-form-item label="机器编号">{{stationForm.test}}</el-form-item>
                     </el-col>
                     <el-col :span="8">
                        <el-form-item label="机器名称">{{stationForm.test}}</el-form-item>
                     </el-col>
                  </el-row>
               </el-form>
            </div>
         </div>
         <div class="collect-info-panel">
            <div class="fact-analysis-realtim">
               <div class="fact-analysis-card">
                  <div class="card-name" style="background-color: rgb(127, 192, 192);">设备状态</div>
                  <div class="card-value" style="background-color: rgba(127, 192, 192, 0.14);"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <save-dialog v-if="dialog.save" ref="saveDialog"  @success="addfeedbackSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
    export default {
        
    }
import saveDialog from './add-station-status'
   export default {
      name: "state-feedback",
      data(){
         return {
            stationForm: {
               test: ""
            },
            dialog: {
               save: false
            },
            lastLevelId: "",
            current: "1",
            size: "15",
            searchData: {
               feedBackStatus: [],
               date: [],
               endDate: "",
               startDate: ""
            },
            searchDataList: [],  //右侧数据list
            aList: [],
            defalutProps: {
               label: 'title',
                 children: 'children',
               isLeaf: 'hasChildren',
               disabled: 'disabled'
            },
            parentId: "0",
            tableData: [],
            searchSelection: []
         }
      },
      created(){
			
      },
      mounted(){
         this.getTreeList();
      },
      components: {
         saveDialog
       },
      methods: {
         addfeedbackSuccess() {
            this.getlist();
         },
         feedBackStatusChange(val) {
            this.getlist();
         },
         handleNodeClick(data) {
            if(data.code) {
               this.lastLevelId = data.id;
               var obj = {
                  workstationId: this.lastLevelId,
               }
               if(this.searchData.feedBackStatus.length != 0) {
                  obj.feedBackStatus = this.searchData.feedBackStatus;
               }
               if(this.searchData.endDate) {
                  obj.endDate = this.searchData.endDate;
               }
               if(this.searchData.startDate) {
                  obj.startDate = this.searchData.startDate;
               }
               this.$HTTP.post("/api/blade-cps/workstation-wcs-feedback/page?current=1&size=15",obj).then(res=> {
                  if(res.code == 200) {
                     this.searchDataList = res.data.records;
                  }
               })
            }
         },
         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 = {};  
           const tree = [];  
           // 第一步：创建id到对象的映射  
           items.forEach(item => {  
             idMap[item.id] = { ...item, children: [] };  
           }); 
           // 第二步：构建树形结构  
           items.forEach(item => {  
             const currentNode = idMap[item.id];  
             // 如果parentId为0，说明是根节点  
             if (item.parentId === 0) {  
               tree.push(currentNode);  
             } else {  
               // 否则，查找父节点，并将当前节点添加到父节点的children数组中  
               const parentId = item.parentId;  
               if (idMap[parentId]) {  
                 idMap[parentId].children.push(currentNode);  
               }  
             }  
           });  
           return tree;  
         },
         addTreeDisable(treeData) {
            var tree = [];
            treeData.forEach(item=> {
               if(item.code) {
                  item.disabled = false;
               }else {
                  item.disabled = true;
               }
               tree.push(item);
            })
            return tree;
         },
         getTreeList(flag) {
            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(()=> {
                        this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
                        this.$refs.treeRef.setCurrentKey(this.lastLevelId);  //第一个节点的第一个子节点最后一级默认选中
                        this.getlist();  //渲染反馈列表
                     })
							
                  }
               }
            })
         },
         getlist() {
            this.$HTTP.get(`/api/blade-cps/workstation/get?workstationId=${this.lastLevelId}`).then(res=> {
               if(res.code == 200) {
                  console.log(res.data,234)
               }
            })
         }
      }
   }
</script>

<style lang="scss" scoped>

<style scoped>
.aposcope-main {
   display: flex;
   min-height: 100%;
   margin: 8px;
}
.aposcope-left {
   width: 240px;
   margin-right: 8px;
   padding: 4px;
   background-color: #fff;
}
.aposcope-right {
   flex: 1;
   padding: 8px;
   background-color: #fff;
}
.left-title {
   font-size: 16px;
    text-align: center;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #e2e2e2;
    background-color: #409eff;
    color: #fff;
    border-radius: 2px 2px 0 0;
}
.content-machine-box {
   display: flex;
   align-items: center;
}
.content-machine-img {
   margin: 14px;
    padding: 2px;
    border: 1px solid #e8e8e8;
    width: 148px;
    height: 145px;
    justify-content: center;
}
.content-machine-img img {
    width: 135px;
    height: 135px;
}
.content-machine-detail {
    display: flex;
    width: calc(100% - 210px);
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: nowrap;
}
.content-machine-name {
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 700;
}
.collect-info-panel {
    background-color: rgba(59, 142, 142, .06);
    padding: 8px;
    padding-top: 0;
}
.fact-analysis-realtim {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    box-sizing: border-box;
    background: #fff;
}
.fact-analysis-card {
    border-radius: 2px;
    box-sizing: border-box;
    display: flex;
    margin: 8px;
}
.fact-analysis-card .card-name {
    width: 98px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.fact-analysis-card .card-value {
    min-width: 118px;
    max-width: 396px;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
    word-break: break-all;
}
</style>