1

lzhe

2024-06-03 a786409d7f6769f43c107159dd84faf4a2927a9a

 src/views/mdc/state-feedback.vue

@@ -1,24 +1,355 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-13 22:15:38
 * @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-19 18:18:19
 * @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>
    <el-main>
        <el-card shadow="never">
            效率分析
        </el-card>
    </el-main>
   <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="right-top">
            <div>
               <el-button type="primary" @click="addData">反馈</el-button>
               <el-button type="danger" plain @click="delData">批量删除</el-button>
            </div>
            <div>
               <el-select v-model="searchData.feedBackStatus" multiple style="width: 185px;margin-right: 8px;;" @change="feedBackStatusChange">
                  <el-option v-for="item in feedBackStatusList" :key="item.code" :label="item.name" :value="item.code"/>
               </el-select>
               <el-date-picker v-model="searchData.date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" value-format="YYYY-MM-DD HH:mm:ss" @change="dateChange" style="vertical-align: middle;">
               </el-date-picker>
            </div>
         </div>
         <div class="right-content" v-if="searchDataList.length == 0">
            <img src="./quesheng.bd026700.png" />
            <div>
               <span>暂无反馈状态数据</span>
            </div>
         </div>
         <el-table ref="searchDataListRef" v-if="searchDataList.length != 0" :data="searchDataList" border style="width: 100%;margin-top: 20px;" class="multipleTableRef" @selection-change="searchHandleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="workstationName" label="工位名称"></el-table-column>
            <el-table-column prop="wcsDesc" label="状态"></el-table-column>
            <el-table-column prop="feedbackDesc" label="描述"></el-table-column>
            <el-table-column prop="httpMethod" label="持续时长">
               <template #default="scope">
                  <span>{{sumTime(scope.row.startTime,scope.row.endTime)}}</span>
               </template>
            </el-table-column>
            <el-table-column prop="scopePath" label="状态时间">
               <template #default="scope">
                  <span>{{scope.row.startTime}}~{{ scope.row.endTime }}</span>
               </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
               <template #default="scope">
                  <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
               </template>
            </el-table-column>
         </el-table>
      </div>
   </div>
   <save-dialog v-if="dialog.save" ref="saveDialog" :feedBackStatusList="feedBackStatusList" :workstationId="lastLevelId" @success="addfeedbackSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
    export default {
        
    }
   import { useTransitionFallthroughEmits } from 'element-plus';
   import saveDialog from './add-feedback'
   export default {
      name: "state-feedback",
      data(){
         return {
            dialog: {
               save: false
            },
            lastLevelId: "",
            feedBackStatusList: [],
            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();
         this.getfeedBackStatusList();  //获取状态list
      },
      components: {
         saveDialog
       },
      methods: {
         table_del(row) {
            this.$confirm(`确定将选择数据删除?`, '', {
               type: 'warning'
            }).then(() => {
               var arr = [row.id]
               this.$HTTP.delete("/api/blade-cps/workstation-wcs-feedback",arr).then(res=> {
                  if(res.code == 200) {
                     this.$message.success("操作成功");
                     this.getlist();
                  }
               })
            }).catch(() => {

            })
         },
         addfeedbackSuccess() {
            this.getlist();
         },
         getfeedBackStatusList() {
            this.$HTTP.get("/api/blade-cps/global_wcs/wcs-achievements").then(res=> {
               if(res.code == 200) {
                  res.data.forEach(item=> {
                     if(item.type == "4") {
                        this.feedBackStatusList.push(item);
                     }
                  })
               }
            })
         },
         feedBackStatusChange(val) {
            this.getlist();
         },
         dateChange(val) {
            this.searchData.startDate = val[0];
            this.searchData.endDate = val[1];
            this.getlist();
         },
         searchHandleSelectionChange(selection) {
            this.searchSelection = selection;
         },
         handleClose(done) {
              done();
          },
         sumTime(startTime,endTime) {
            // 将字符串转换为Date对象  
            var startDate = new Date(startTime);  
            var endDate = new Date(endTime);  
				
            // 计算时间差（毫秒）  
            var timeDiff = endDate - startDate;  
				
            // 将时间差转换为天数、小时数、分钟数和秒数  
            var diffDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); // 天  
            timeDiff %= 1000 * 60 * 60 * 24; // 剩余毫秒数  
            var diffHours = Math.floor(timeDiff / (1000 * 60 * 60)); // 小时  
            timeDiff %= 1000 * 60 * 60; // 剩余毫秒数  
            var diffMinutes = Math.floor(timeDiff / (1000 * 60)); // 分钟  
            timeDiff %= 1000 * 60; // 剩余毫秒数  
            var diffSeconds = Math.floor(timeDiff / 1000); // 秒
            var d = diffDays == 0?"":diffDays + "天";
            return d + diffHours + "小时 " + diffMinutes + "分钟 " + diffSeconds + "秒"
         },
         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) {
                  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() {
            var obj = {
               workstationId: this.lastLevelId,
            }
            if(this.searchData.feedBackStatus != 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;
               }
            })
         },
         addData() {
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open()
            })
         },
         delData() {
            if(this.searchSelection.length == 0) {
               this.$message({
                   message: '请选择至少一条数据',
                   type: 'warning'
                 });
                 return;
            }
            var sel = [];
            this.searchSelection.map(item=> {
               sel.push(item.id);
            })
            var that = this;
            this.$HTTP.delete("/api/blade-cps/workstation-wcs-feedback",sel).then(res=> {
               if(res.code == 200) {
                  this.$message.success("操作成功");
                  this.getlist();
               }
            })
         }
      }
   }
</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;
}
.right-content {
   text-align: center;
}
.right-content img {
   width: 350px;
   height: 350px;
}
.right-content > div {
   font-size: 14px;;
}
.right-content > div span:nth-child(2) {
   margin-left: 8px;
   color: #409eff;
   cursor: pointer;
}
.right-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
</style>