<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-11-08 18:11:39
|
* @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 style="height: 100%;">
|
<el-card shadow="never" style="height: 100%;" body-style="height: 100%;padding: 0;">
|
<el-container style="height: 100%;">
|
<el-aside width="300px" style="height: 100%;">
|
<el-container style="flex-direction: column;">
|
<div class="aposcope-left">
|
<el-row style="margin: 8px;font-size: 14px;">工位</el-row>
|
<MYTree v-model="treeChecked" @loaded="query"></MYTree>
|
</div>
|
</el-container>
|
</el-aside>
|
<el-container>
|
<el-main>
|
<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 style="margin-top: 120px;font-size: 16px;color: #666;">
|
<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>
|
</el-main>
|
</el-container>
|
</el-container>
|
</el-card>
|
</el-main>
|
<save-dialog v-if="dialog.save" ref="saveDialog" :feedBackStatusList="feedBackStatusList" :workstationId="treeChecked.toString()" @success="addfeedbackSuccess" @closed="dialog.save=false"></save-dialog>
|
</template>
|
<script>
|
import { useTransitionFallthroughEmits } from 'element-plus';
|
import MYTree from './MYTree.vue'
|
import saveDialog from './add-feedback'
|
export default {
|
name: "state-feedback",
|
data(){
|
return {
|
treeChecked: [],
|
dialog: {
|
save: false
|
},
|
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.getfeedBackStatusList(); //获取状态list
|
},
|
components: {
|
saveDialog,MYTree
|
},
|
watch: {
|
treeChecked() {
|
this.query()
|
}
|
},
|
methods: {
|
table_del(row) {
|
this.$confirm(`确定将选择数据删除?`, '', {
|
type: 'warning'
|
}).then(() => {
|
var arr = [row.id]
|
this.$HTTP.delete("/api/mdc/workstation-wcs-feedback",arr).then(res=> {
|
if(res.code == 200) {
|
this.$message.success("操作成功");
|
this.getlist();
|
}
|
})
|
}).catch(() => {
|
|
})
|
},
|
addfeedbackSuccess() {
|
this.getlist();
|
},
|
getfeedBackStatusList() {
|
this.$HTTP.get("/api/smis/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 + "秒"
|
},
|
query() {
|
if (!this.treeChecked.toString()) return;
|
var obj = {
|
workstationId: this.treeChecked.toString(),
|
}
|
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/mdc/workstation-wcs-feedback/page?current=1&size=15",obj).then(res=> {
|
if(res.code == 200) {
|
this.searchDataList = res.data.records;
|
}
|
})
|
},
|
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;
|
},
|
getlist() {
|
var obj = {
|
workstationId: this.treeChecked.toString(),
|
}
|
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/mdc/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/mdc/workstation-wcs-feedback",sel).then(res=> {
|
if(res.code == 200) {
|
this.$message.success("操作成功");
|
this.getlist();
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.aposcope-main {
|
display: flex;
|
min-height: 100%;
|
margin: 8px;
|
}
|
.aposcope-left {
|
margin-right: 8px;
|
padding: 20px;
|
background-color: #fff;
|
padding-top: 20px;
|
}
|
.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>
|
