<template>
|
<div class="Startjob">
|
<div class="rect">
|
<div class="rect-top" style="position: relative">
|
<img src="@/assets/TheCurrentJob/left.png" alt="" />
|
<img
|
style="margin-left: -1.5rem; margin-right: 4rem"
|
src="@/assets/TheCurrentJob/left1.png"
|
alt=""
|
/>
|
<span>开始作业（{{ title }}）</span>
|
<img
|
style="margin-right: -1.5rem; margin-left: 4rem"
|
src="@/assets/TheCurrentJob/right1.png"
|
alt=""
|
/>
|
<img src="@/assets/TheCurrentJob/right.png" alt="" />
|
</div>
|
<div class="rect-center">
|
<div class="rect-item1">
|
<div style="margin-top: 0.5rem">
|
<img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
|
<span style="color: rgba(26, 201, 255, 1); font-size: 1.5rem"
|
>任务作业信息</span
|
>
|
</div>
|
<div style="height: 100%; width: 100%">
|
<div style="width: 100%; padding-left: 1rem">
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.5rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>任务名称：</span
|
><span>{{ info.takename }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>技术员：</span
|
><span>{{ info.jishuyuan }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>检修工厂：</span
|
><span>{{ info.gonzhang }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>质检员：</span
|
><span>{{ info.zhijianyuan }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>力矩作业员：</span
|
><span>{{ info.lijuzouyeyuan }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>辅助员：</span
|
><span>{{ info.fuzyuan }}</span>
|
</div>
|
<div
|
style="
|
position: absolute;
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>任务详情：</span
|
>
|
<span
|
@click="showDetail(!contentShow1)"
|
style="color: #1ac2f7; font-size: 0.88rem; cursor: pointer"
|
>查看</span
|
>
|
<div
|
v-if="contentShow1"
|
style="
|
position: relative;
|
top: 1.5rem;
|
left: -3rem;
|
width: 49rem;
|
"
|
>
|
<el-table
|
:data="taskData"
|
width="100%"
|
:header-cell-style="{
|
color: '#fff',
|
background: '#1AC2F7',
|
}"
|
:cell-style="{
|
height: '3.38rem',
|
color: '#fff',
|
background: '#1373A8',
|
}"
|
>
|
<el-table-column property="trainKind" label="车型" />
|
<el-table-column property="trainNum" label="车组" />
|
<el-table-column property="track" label="股道" />
|
<el-table-column property="coachNum" label="车厢号位置" />
|
<el-table-column property="bogie" label="转向架位置" />
|
<el-table-column property="processDept" label="检修班组" />
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="rect-item2">
|
<div>
|
<span style="color: rgba(26, 200, 254, 1); font-size: 1.2rem"
|
>工艺项点/步骤共<span
|
style="font-size: 1.5rem; font-weight: bold"
|
>{{ sunNUm }}</span
|
>
|
</span>
|
<span
|
style="
|
margin-left: 1rem;
|
color: rgba(26, 200, 254, 1);
|
font-size: 1.2rem;
|
"
|
>当前作业项点/步骤<span
|
style="font-size: 1.5rem; font-weight: bold"
|
>{{ obj.setpNum }}</span
|
>
|
</span>
|
</div>
|
<div style="position: absolute; width: 47rem; height: 2.5rem">
|
<el-table
|
style="margin-top: 0.88rem"
|
:data="gridData"
|
width="100%"
|
:header-cell-style="{
|
height: '1.61rem',
|
color: '#1AC8FE',
|
background: '#0A5B91',
|
fontSize: '0.88rem',
|
}"
|
:cell-style="{
|
color: '#fff',
|
background: '#147BAF',
|
}"
|
>
|
<el-table-column
|
property="craftsStep"
|
label="工艺项点/步骤"
|
min-width="30%"
|
>
|
<template #default="scope">
|
<span
|
@click="showDetail1(!contentShow)"
|
style="
|
color: #1ac2f7;
|
font-size: 0.88rem;
|
cursor: pointer;
|
text-decoration: underline;
|
"
|
>{{ scope.row.craftsStep }}
|
</span></template
|
></el-table-column
|
>
|
<el-table-column
|
property="craftContent"
|
label="工艺内容"
|
min-width="70%"
|
>
|
<template #default="scope">
|
<span
|
@click="true"
|
style="
|
color: #ffffff;
|
font-size: 0.88rem;
|
display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
|
-webkit-box-orient: vertical; /* 垂直排列 */
|
-webkit-line-clamp: 2; /* 限制显示两行 */
|
overflow: hidden; /* 隐藏超出范围的内容 */
|
text-overflow: ellipsis; /* 使用省略号 */
|
"
|
>{{ scope.row.craftContent }}</span
|
></template
|
></el-table-column
|
>
|
</el-table>
|
<div class="consten" v-if="contentShow">
|
<el-table
|
:data="gridData"
|
width="100%"
|
:header-cell-style="{
|
height: '1.61rem',
|
color: '#fff',
|
background: '#0A5B91',
|
fontSize: '0.88rem',
|
}"
|
:cell-style="{
|
color: '#fff',
|
background: '#147BAF',
|
}"
|
>
|
<el-table-column
|
property="craftsStep"
|
label="工艺内容"
|
min-width="30%"
|
>
|
<template #default="scope">
|
<span @click="true" style="color: #fff; font-size: 0.88rem"
|
>{{ scope.row.craftContent }}
|
</span></template
|
></el-table-column
|
>
|
<el-table-column
|
property="craftsStep"
|
label="工具"
|
min-width="10%"
|
>
|
<template #default="scope">
|
<span style="color: #ffffff">{{
|
scope.row.tools
|
}}</span></template
|
></el-table-column
|
>
|
<el-table-column
|
property="craftsStep"
|
label="物料"
|
min-width="10%"
|
>
|
<template #default="scope">
|
<span style="color: #ffffff">{{
|
scope.row.material
|
}}</span></template
|
></el-table-column
|
>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="rect-item3">
|
<div style="overflow: hidden">
|
<img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
|
<span style="color: rgba(26, 201, 255, 1); font-size: 0.88rem"
|
>力矩值显示</span
|
>
|
|
<el-scrollbar>
|
<div
|
style="
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
padding-left: 1.5rem;
|
padding-top: 0.5rem;
|
padding-bottom: 1.5rem;
|
box-sizing: border-box;
|
"
|
>
|
<span
|
style="color: #ffffff; font-size: 1rem; margin: 0.5rem 0"
|
v-for="(item, index) in Torque"
|
:key="item.id"
|
>{{
|
index + 1 + "、" + item.torqueSize + " " + "N*m"
|
}}</span
|
>
|
</div>
|
</el-scrollbar>
|
</div>
|
</div>
|
</div>
|
<div
|
ref="screenDom"
|
style="
|
margin: 0 auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 999;
|
position: absolute;
|
top: 42%;
|
left: 15%;
|
"
|
>
|
<model-gltf
|
:width="400"
|
:height="400"
|
:backgroundAlpha="0"
|
:backgroundColor="'#000000'"
|
src="ThreeModel/test.gltf"
|
:controlsOptions="{
|
enableZoom,
|
}"
|
/>
|
</div>
|
<div
|
style="
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 30rem;
|
"
|
>
|
<el-button
|
:disabled="obj.setpNum == 1"
|
@click="Previous(false)"
|
type="primary"
|
:style="{
|
width: '5rem',
|
height: '1.88rem',
|
background:
|
obj.setpNum == 1
|
? 'rgba(164, 173, 179, 1)'
|
: 'rgba(26, 194, 247, 1)',
|
color: 'rgba(255, 255, 255, 1)',
|
fontSize: '0.88rem;',
|
}"
|
>上一步</el-button
|
>
|
<el-button
|
:disabled="obj.setpNum == sunNUm"
|
@click="Next(false)"
|
type="primary"
|
:style="{
|
width: '5rem',
|
height: '1.88rem',
|
background:
|
obj.setpNum != sunNUm
|
? 'rgba(26, 194, 247, 1)'
|
: 'rgba(164, 173, 179, 1)',
|
color: ' rgba(255, 255, 255, 1)',
|
fontSize: '0.88rem',
|
}"
|
>下一步</el-button
|
>
|
<el-button
|
:disabled="obj.setpNum != sunNUm"
|
@click="Completee"
|
type="primary"
|
:style="{
|
height: '1.88rem',
|
width: '5rem',
|
background:
|
obj.setpNum == sunNUm
|
? 'rgba(26, 194, 247, 1)'
|
: 'rgba(164, 173, 179, 1)',
|
color: 'rgba(255, 255, 255, 1)',
|
fontSize: '0.88rem',
|
}"
|
>完成作业</el-button
|
>
|
</div>
|
</div>
|
|
<!-- 强制跳转确认框 -->
|
<el-dialog v-model="centerDialogVisible" title="确认" width="300" center>
|
<span> 当前任务未完成，是否强制跳转到下一步？ </span>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button style="width: 5rem" @click="centerDialogVisible = false"
|
>取消</el-button
|
>
|
<el-button style="width: 5rem" type="primary" @click="Next(true)">
|
确认
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import { ref, onMounted } from "vue";
|
import {
|
GetScreenData,
|
GetPre,
|
GetNext,
|
Complete,
|
GetTorque,
|
ChangeStatus,
|
} from "@/api/newapi/Thecurrentjob";
|
import { GetPageData } from "@/api/newapi/NjTask";
|
import { useRouter } from "vue-router";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import { ModelCollada, ModelGltf } from "vue-3d-model";
|
|
const router = useRouter();
|
const gridData = ref([]);
|
const contentShow = ref(false);
|
const contentShow1 = ref(false);
|
const info = ref({});
|
info.value = history.state?.info ? JSON.parse(history.state?.info) : {};
|
const title = ref("");
|
title.value = history.state?.title ? history.state?.title : "机械";
|
const enableZoom = ref(false);
|
const obj = ref({});
|
const sunNUm = ref(0);
|
const Torque = ref("");
|
const showDetail1 = (va1) => {
|
contentShow1.value = false;
|
contentShow.value = va1;
|
};
|
const showDetail = (va1) => {
|
contentShow1.value = va1;
|
contentShow.value = false;
|
checko();
|
};
|
const taskData = ref([]);
|
const centerDialogVisible = ref(false);
|
const from = ref({
|
group: "",
|
takeid: "",
|
setnum: 0,
|
});
|
const flag = ref(false);
|
//上一步
|
const Previous = (val) => {
|
from.value.group = info.value.grouptype;
|
from.value.takeid = info.value.njtakeid;
|
from.value.setnum = obj.value.setpNum;
|
flag.value = val;
|
console.log(from.value, info.value);
|
GetPre(from.value, flag.value).then((res) => {
|
gridData.value = [res.data.nex];
|
obj.value = res.data.nex;
|
queryData.value.setnum = obj.value.setpNum;
|
GetTorque(queryData.value).then((res) => {
|
Torque.value = res.data;
|
});
|
});
|
};
|
//下一步
|
const Next = (val) => {
|
console.log(obj.value);
|
from.value.group = info.value.grouptype;
|
from.value.takeid = info.value.njtakeid;
|
from.value.setnum = obj.value.setpNum;
|
flag.value = val;
|
|
GetNext(from.value, flag.value).then((res) => {
|
if (res.message == "没有完成当前步骤") {
|
gridData.value = res.data.nowdate;
|
obj.value = res.data.nowdate[0];
|
if (res.data.nowdate[0].setpNum == obj.value.setpNum) {
|
centerDialogVisible.value = true;
|
return;
|
}
|
return;
|
}
|
centerDialogVisible.value = false;
|
gridData.value = [res.data.nex];
|
obj.value = res.data.nex;
|
|
queryData.value.setnum = obj.value.setpNum;
|
GetTorque(queryData.value).then((res) => {
|
Torque.value = res.data;
|
});
|
});
|
};
|
//完成
|
const Completee = () => {
|
from.value.gruops = info.value.grouptype;
|
from.value.id = info.value.njtakeid;
|
from.value.creater = info.value.creater;
|
console.log(from.value, info.value);
|
|
ChangeStatus(from.value).then((res) => {
|
ElMessage({
|
message: "操作完成",
|
type: "success",
|
});
|
router.push("/Thecurrentjob");
|
});
|
};
|
//查看数据
|
const checko = () => {
|
console.log(info.value);
|
GetPageData({
|
page: 1,
|
rows: 10,
|
total: 100,
|
tableName: "",
|
sort: "",
|
order: "",
|
wheres: "",
|
export: true,
|
value: "",
|
filter: [
|
{
|
name: "njtaskid",
|
value: info.value.njtakeid,
|
displayType: "String",
|
},
|
],
|
}).then((res) => {
|
console.log(res);
|
taskData.value = res.rows;
|
});
|
};
|
const queryData = ref({
|
grop: info.value.grouptype,
|
takeid: info.value.njtakeid,
|
setnum: "",
|
});
|
const initData = () => {
|
GetScreenData({
|
group: info.value.grouptype,
|
takeid: info.value.njtakeid,
|
}).then((res) => {
|
if (res.message == "返回工艺表中的第一条") {
|
gridData.value = res.data.proNoe;
|
obj.value = res.data.proNoe[0];
|
sunNUm.value = res.data.maxproce;
|
queryData.value.setnum = obj.value.setpNum;
|
GetTorque(queryData.value).then((res) => {
|
Torque.value = res.data;
|
});
|
return;
|
}
|
gridData.value = res.data.maxpro;
|
sunNUm.value = res.data.maxproce;
|
obj.value = res.data.maxpro[0];
|
queryData.value.setnum = obj.value.setpNum;
|
GetTorque(queryData.value).then((res) => {
|
Torque.value = res.data;
|
});
|
});
|
};
|
|
onMounted(() => {
|
initData();
|
});
|
</script>
|
<style lang="scss" scoped>
|
* {
|
padding: 0;
|
margin: 0;
|
box-sizing: border-box;
|
}
|
|
.Startjob {
|
width: 100%;
|
height: 100%;
|
background: linear-gradient(to left, #02cde6, #02cde6) left top no-repeat,
|
linear-gradient(to bottom, #02cde6, #02cde6) left top no-repeat,
|
linear-gradient(to left, #02cde6, #02cde6) right top no-repeat,
|
linear-gradient(to bottom, #02cde6, #02cde6) right top no-repeat,
|
linear-gradient(to left, #02cde6, #02cde6) left bottom no-repeat,
|
linear-gradient(to bottom, #02cde6, #02cde6) left bottom no-repeat,
|
linear-gradient(to left, #02cde6, #02cde6) right bottom no-repeat,
|
linear-gradient(to left, #02cde6, #02cde6) right bottom no-repeat;
|
background-size: 0.3rem 2rem, 2rem 0.3rem, 0.3rem 2rem, 2rem 0.3rem;
|
padding: 0.2rem;
|
box-sizing: border-box;
|
background-color: rgba(0, 0, 0, 0.3);
|
overflow: hidden;
|
|
.rect {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
border: 0.1rem solid #02cde6;
|
box-shadow: 0rem 0rem 0.3rem #02cde6;
|
|
.rect-top {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
height: 3rem;
|
background: #051d3f;
|
text-align: center;
|
|
img {
|
width: 3.75rem;
|
height: 2.81rem;
|
}
|
|
span {
|
color: rgba(26, 194, 247, 1);
|
font-size: 1.25rem;
|
}
|
}
|
|
.rect-center {
|
display: flex;
|
justify-content: space-between;
|
width: 170vh;
|
margin: 0 auto;
|
padding: 0.8rem 2.15rem;
|
box-sizing: border-box;
|
|
.rect-item1 {
|
display: flex;
|
flex-direction: column;
|
width: 14.31rem;
|
height: 15.38rem;
|
background-image: url("../../../assets/TheCurrentJob/bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 0.28rem 0.28rem;
|
box-sizing: border-box;
|
}
|
|
.rect-item2 {
|
width: 49.88rem;
|
height: 15.38rem;
|
border: 0.1rem solid #02cde6;
|
padding: 0.69rem 1.44rem;
|
|
.el-table :deep(.el-table__header th) {
|
border: solid 1px #1ac0f6;
|
color: white;
|
}
|
|
.consten {
|
position: relative;
|
top: 0;
|
z-index: 999;
|
}
|
}
|
|
.rect-item3 {
|
display: flex;
|
flex-direction: column;
|
width: 11.31rem;
|
height: 15.38rem;
|
background-image: url("../../../assets/TheCurrentJob/bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 0.28rem 0.28rem;
|
box-sizing: border-box;
|
}
|
}
|
|
.rect-content {
|
display: flex;
|
justify-content: space-between;
|
width: 100%;
|
padding: 0.8rem 2.15rem;
|
box-sizing: border-box;
|
}
|
}
|
}
|
|
// .el-table :deep(.el-table__header th) {
|
// border-bottom: solid 1px #1ac2f7;
|
// color: white;
|
// }
|
.el-table :deep(.el-table__row td) {
|
border: solid 1px #1ac2f7;
|
color: white;
|
}
|
|
.el-table :deep(.el-table__empty-block) {
|
background-color: #137aaf;
|
color: #1ac2f7;
|
}
|
|
.el-table :deep(.el-table__body-wrapper) {
|
background-color: #1ac2f7;
|
}
|
|
:deep(.el-popper) {
|
background-color: #ad2525;
|
}
|
</style>
|
