<template>
|
<div class="Startjob">
|
<div class="rect">
|
<div class="rect-top">
|
<img src="@/assets/TheCurrentJob/left.png" alt="" />
|
<img
|
style="margin-left: -1.5rem; margin-right: 4rem"
|
src="@/assets/TheCurrentJob/left1.png"
|
alt=""
|
/>
|
<span>开始作业（机械）</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 style="display: flex; justify-content: space-between">
|
<div class="rect-item1">
|
<div>
|
<img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
|
<span style="color: rgba(26, 201, 255, 1); font-size: 0.88rem"
|
>任务作业信息</span
|
>
|
</div>
|
<div style="height: 100%; width: 100%">
|
<div style="width: 100%">
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 0.81rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>任务名称：</span
|
><span>转向架</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 0.81rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>技术员：</span
|
><span>张三</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 0.81rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>检修工厂：</span
|
><span>李四</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 0.81rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>质检员：</span
|
><span>七七</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 0.81rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>力矩作业员：</span
|
><span>王五</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 0.81rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>辅助员：</span
|
><span>小刘</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 0.81rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>任务详情：</span
|
>
|
<span
|
style="color: #1ac2f7; font-size: 0.88rem; cursor: pointer"
|
>查看</span
|
>
|
<!-- <el-popover placement="bottom" :width="600" trigger="click">
|
<template #reference>
|
<span
|
style="
|
color: #1ac2f7;
|
font-size: 0.88rem;
|
cursor: pointer;
|
"
|
>查看</span
|
></template
|
>
|
<el-table
|
:data="gridData"
|
width="100%"
|
:header-cell-style="{
|
color: '#fff',
|
background: '#1AC2F7',
|
}"
|
:cell-style="{
|
height: '3.38rem',
|
color: '#fff',
|
background: '#1373A8',
|
}"
|
>
|
<el-table-column property="date" label="车型" />
|
<el-table-column property="name" label="车组" />
|
<el-table-column property="address" label="股道" />
|
<el-table-column property="address" label="车厢号位置" />
|
<el-table-column property="address" label="转向架位置" />
|
<el-table-column property="address" label="检修班组" />
|
</el-table>
|
</el-popover> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="rect-item2">
|
<div>
|
<span style="color: rgba(26, 200, 254, 1); font-size: 0.75rem"
|
>工艺项点/步骤共<span style="font-size: 1rem; font-weight: bold"
|
>23</span
|
>
|
</span>
|
<span
|
style="
|
margin-left: 1rem;
|
color: rgba(26, 200, 254, 1);
|
font-size: 0.75rem;
|
"
|
>当前作业项点/步骤<span
|
style="font-size: 1rem; font-weight: bold"
|
>3</span
|
>
|
</span>
|
</div>
|
<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="date"
|
label="工艺项点/步骤"
|
min-width="30%"
|
>
|
<template #default="scope">
|
<span
|
style="color: #1ac2f7; font-size: 0.88rem"
|
></span></template
|
></el-table-column>
|
<el-table-column
|
property="name"
|
label="工艺内容"
|
min-width="70%"
|
/>
|
</el-table>
|
</div>
|
</div>
|
<div class="rect-item3">
|
<div>
|
<img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
|
<span style="color: rgba(26, 201, 255, 1); font-size: 0.88rem"
|
>力矩值显示</span
|
>
|
</div>
|
</div>
|
</div>
|
<div class="rect-content">
|
<div
|
style="
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 21.31rem;
|
height: 26.88rem;
|
background-color: rgba(25, 189, 241, 0.1);
|
color: rgba(16, 16, 16, 1);
|
font-size: 0.75rem;
|
border: 0.06rem solid rgba(26, 200, 254, 1);
|
"
|
>
|
<span style="color: rgba(26, 194, 247, 1); font-size: 1.25rem"
|
>爆炸图显示</span
|
>
|
</div>
|
</div>
|
<div
|
style="
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 4.25rem;
|
"
|
>
|
<el-button
|
type="primary"
|
style="
|
width: 5rem;
|
height: 1.88rem;
|
background-color: rgba(164, 173, 179, 1);
|
color: rgba(255, 255, 255, 1);
|
font-size: 0.88rem;
|
"
|
>上一步</el-button
|
>
|
<el-button
|
type="primary"
|
style="
|
width: 5rem;
|
height: 1.88rem;
|
background-color: rgba(26, 194, 247, 1);
|
color: rgba(255, 255, 255, 1);
|
font-size: 0.88rem;
|
"
|
>下一步</el-button
|
>
|
<el-button
|
type="primary"
|
style="
|
height: 1.88rem;
|
width: 5rem;
|
background-color: rgba(164, 173, 179, 1);
|
color: rgba(255, 255, 255, 1);
|
font-size: 0.88rem;
|
"
|
>完成作业</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { color } from "echarts";
|
import { ref } from "vue";
|
|
const gridData = ref([]);
|
</script>
|
<style lang="scss" scoped>
|
.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);
|
.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: 100%;
|
padding: 0.8rem 2.15rem;
|
box-sizing: border-box;
|
.rect-item1 {
|
display: flex;
|
flex-direction: column;
|
width: 11.31rem;
|
height: 12.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: 12.38rem;
|
border: 0.1rem solid #02cde6;
|
padding: 0.69rem 1.44rem;
|
margin-left: 6rem;
|
.el-table :deep(.el-table__header th) {
|
border: solid 1px #1ac0f6;
|
color: white;
|
}
|
}
|
.rect-item3 {
|
display: flex;
|
flex-direction: column;
|
width: 11.31rem;
|
height: 12.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;
|
// }
|
// .el-popper :deep(.el-popper) {
|
// background-color: #ad2525;
|
// }
|
</style>
|
