|
|
@@ -39,10 +39,40 @@
|
|
|
<div class="mainContentBox">
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="4" class="boxStyle">
|
|
|
+ <div class="selectOpBox">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ font-size: 500;
|
|
|
+ font-size: 24px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ color: black;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 请选择工位
|
|
|
+ <el-select
|
|
|
+ v-model="opValue"
|
|
|
+ class="m-2"
|
|
|
+ placeholder="请选择工位"
|
|
|
+ style="width: calc(100% - 40px)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="productInfo" @click="openPop">
|
|
|
<template v-if="taskIndex != null">
|
|
|
<div
|
|
|
class="productitleText"
|
|
|
+ @click.stop
|
|
|
style="
|
|
|
font-size: 500;
|
|
|
font-size: 24px;
|
|
|
@@ -52,24 +82,36 @@
|
|
|
text-overflow: ellipsis;
|
|
|
"
|
|
|
>
|
|
|
- {{ taskArray[taskIndex].materialName }}
|
|
|
+ <span @dblclick="fz()">{{
|
|
|
+ taskArray[taskIndex].workOrderCode
|
|
|
+ }}</span>
|
|
|
+ /
|
|
|
+ {{ taskArray[taskIndex].planNum }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="productitleText"
|
|
|
style="
|
|
|
- color: #ffffff60;
|
|
|
+ color: #000000;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
-webkit-line-clamp: 2; /* 限制显示的行数 */
|
|
|
"
|
|
|
>
|
|
|
- {{ taskArray[taskIndex].materialModel }}
|
|
|
+ {{ taskArray[taskIndex].materialName }}
|
|
|
</div>
|
|
|
<div style="display: flex">
|
|
|
- <div class="productitleText" style="color: #ffffff60">S/N</div>
|
|
|
- <div class="productitleText">
|
|
|
- {{ snVal ? snVal : "-" }}
|
|
|
+ <div
|
|
|
+ class="productitleText"
|
|
|
+ style="
|
|
|
+ color: #000000;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2; /* 限制显示的行数 */
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ taskArray[taskIndex].materialModel }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -92,10 +134,24 @@
|
|
|
<!-- 侧边栏盒子 -->
|
|
|
<div
|
|
|
class="commonTitle"
|
|
|
- style="display: flex; justify-content: space-between"
|
|
|
+ style="display: flex; justify-content: space-between; color: black"
|
|
|
>
|
|
|
- 工序
|
|
|
- <div v-if="selectStepIndex !== null">
|
|
|
+ <div>当前工位工序</div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="opShowAllStatus = true"
|
|
|
+ v-if="!opShowAllStatus && opsArray.length > 0"
|
|
|
+ link
|
|
|
+ >全部工序</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="opShowAllStatus = false"
|
|
|
+ v-if="opShowAllStatus && opsArray.length > 0"
|
|
|
+ link
|
|
|
+ >关闭</el-button
|
|
|
+ >
|
|
|
+ <!-- <div v-if="selectStepIndex !== null">
|
|
|
<el-popconfirm
|
|
|
class="box-item"
|
|
|
title="请确认操作：叫料"
|
|
|
@@ -146,15 +202,16 @@
|
|
|
<el-button type="danger" link>缩回</el-button>
|
|
|
</template>
|
|
|
</el-popconfirm>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<el-scrollbar
|
|
|
- style="height: calc(100vh - 220px); padding-bottom: 60px"
|
|
|
+ style="height: calc(100vh - 600px); padding-bottom: 20px"
|
|
|
>
|
|
|
<Steps
|
|
|
v-if="opsArray.length > 0"
|
|
|
- :opsArray="opsArray"
|
|
|
+ :opsArray="setOpsArray"
|
|
|
@init="init"
|
|
|
+ :opShowAllStatus
|
|
|
/>
|
|
|
<template v-else>
|
|
|
<div
|
|
|
@@ -163,18 +220,48 @@
|
|
|
font-size: 500;
|
|
|
font-size: 24px;
|
|
|
display: flex;
|
|
|
- height: calc(100vh - 280px);
|
|
|
+ height: calc(100vh - 630px);
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- background-color: var(--ohos-area-bg);
|
|
|
+ background-color: #d5dade;
|
|
|
border-radius: 16px;
|
|
|
- color: white;
|
|
|
+ color: black;
|
|
|
"
|
|
|
>
|
|
|
暂无工序
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-scrollbar>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" style="width: 100%">切换产品</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <el-button type="primary" style="width: 50%">开工</el-button>
|
|
|
+ <el-button type="primary" style="width: 50%">报工</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <el-button type="primary" style="width: 50%">条码跟踪</el-button>
|
|
|
+ <el-button type="primary" style="width: 50%">叫料</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex">
|
|
|
+ <el-button type="primary" style="width: 50%">图纸资料</el-button>
|
|
|
+ <el-button type="primary" style="width: 50%"
|
|
|
+ >作业指导书</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" style="width: 100%">流程单据</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
<el-col :span="20">
|
|
|
<div class="typeContainer">
|
|
|
@@ -230,17 +317,19 @@
|
|
|
@keyup.enter="console.log(111)"
|
|
|
/>
|
|
|
</div>
|
|
|
- <el-divider class="dark" content-position="center"
|
|
|
+ <el-divider
|
|
|
+ content-position="center"
|
|
|
+ style="border-color: black !important"
|
|
|
><div
|
|
|
style="
|
|
|
- background-color: var(--ohos-area-bg);
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
font-size: 20px;
|
|
|
padding: 0 20px;
|
|
|
- color: white;
|
|
|
font-weight: 500;
|
|
|
+ color: black;
|
|
|
+ background-color: #d5dade;
|
|
|
"
|
|
|
>
|
|
|
选择近期产品
|
|
|
@@ -251,13 +340,13 @@
|
|
|
<div
|
|
|
class="productInfo"
|
|
|
:key="item + index"
|
|
|
- style="background-color: var(--ohos-area-active-bg)"
|
|
|
+ style="background-color: #ffffff80"
|
|
|
v-for="(item, index) in taskArray"
|
|
|
@click="selectProduct(index)"
|
|
|
>
|
|
|
<div
|
|
|
class="productitleText"
|
|
|
- style="font-size: 500; font-size: 24px; color: #000000"
|
|
|
+ style="font-size: 500; font-size: 24px"
|
|
|
>
|
|
|
{{ item.materialName }}
|
|
|
</div>
|
|
|
@@ -300,6 +389,68 @@ import { carCall, carBack, carExtend } from "@/api/process";
|
|
|
defineOptions({
|
|
|
name: "ProSteps",
|
|
|
});
|
|
|
+//true为展示所有
|
|
|
+const opShowAllStatus = ref(false);
|
|
|
+const opValue = ref(null);
|
|
|
+const options = [
|
|
|
+ {
|
|
|
+ value: "Option1",
|
|
|
+ label: "Option1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Option2",
|
|
|
+ label: "Option2",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Option3",
|
|
|
+ label: "Option3",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Option4",
|
|
|
+ label: "Option4",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Option5",
|
|
|
+ label: "Option5",
|
|
|
+ },
|
|
|
+];
|
|
|
+const copyTextUsingTextarea = (text) => {
|
|
|
+ let textArea = document.createElement("textarea");
|
|
|
+ textArea.value = text;
|
|
|
+ textArea.style.position = "absolute";
|
|
|
+ textArea.style.opacity = "0";
|
|
|
+ textArea.style.left = "-9999px";
|
|
|
+ textArea.style.top = "-9999px";
|
|
|
+ document.body.appendChild(textArea);
|
|
|
+ textArea.focus();
|
|
|
+ textArea.select();
|
|
|
+ try {
|
|
|
+ const result = document.execCommand("copy");
|
|
|
+ showCopyMessage(result);
|
|
|
+ } catch (err) {
|
|
|
+ showCopyMessage(false);
|
|
|
+ }
|
|
|
+
|
|
|
+ textArea.remove();
|
|
|
+};
|
|
|
+const showCopyMessage = (success) => {
|
|
|
+ if (success) {
|
|
|
+ ElMessage({
|
|
|
+ type: "success",
|
|
|
+ message: "复制成功!",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ type: "error",
|
|
|
+ message: "复制失败!",
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+const fz = () => {
|
|
|
+ const text = taskArray.value[taskIndex.value].workOrderCode;
|
|
|
+ console.log(taskArray.value[taskIndex.value]);
|
|
|
+ copyTextUsingTextarea(text);
|
|
|
+};
|
|
|
const toCall = async () => {
|
|
|
await carCall();
|
|
|
ElMessage.success("呼叫成功,请等待");
|
|
|
@@ -395,6 +546,17 @@ const getTaskArray = async () => {
|
|
|
taskArray.value = data.records;
|
|
|
};
|
|
|
const opsArray = ref([]);
|
|
|
+const setOpsArray = computed(() => {
|
|
|
+ const array = JSON.parse(JSON.stringify(opsArray.value));
|
|
|
+ array.forEach((item, index) => {
|
|
|
+ if (index < 3) {
|
|
|
+ item.isOp = false;
|
|
|
+ } else {
|
|
|
+ item.isOp = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return array;
|
|
|
+});
|
|
|
const selectStepIndex = ref(null);
|
|
|
provide("selectStepIndex", selectStepIndex);
|
|
|
const key = ref(false);
|
|
|
@@ -408,58 +570,41 @@ const qrCode = ref(null);
|
|
|
const stepComponents = ref([]);
|
|
|
const defaultComponents = [
|
|
|
{
|
|
|
- compentName: "多媒体采集",
|
|
|
- iconName: "duomeiticaiji",
|
|
|
- path: "duomeiticaiji",
|
|
|
- name: "Duomeiticaiji",
|
|
|
- },
|
|
|
- {
|
|
|
compentName: "物料采集",
|
|
|
iconName: "wuliaocaiji",
|
|
|
path: "wuliaocaiji",
|
|
|
name: "Wuliaocaiji",
|
|
|
},
|
|
|
{
|
|
|
- compentName: "记录项",
|
|
|
- iconName: "jiluxiang",
|
|
|
- path: "jiluxiang",
|
|
|
- name: "Jiluxiang",
|
|
|
+ compentName: "图像采集",
|
|
|
+ iconName: "duomeiticaiji",
|
|
|
+ path: "duomeiticaiji",
|
|
|
+ name: "Duomeiticaiji",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compentName: "工序表单",
|
|
|
+ iconName: "mingpai",
|
|
|
+ path: "execl",
|
|
|
+ name: "Excel",
|
|
|
},
|
|
|
+
|
|
|
{
|
|
|
- compentName: "ESOP",
|
|
|
+ compentName: "自动测试",
|
|
|
iconName: "ESOP",
|
|
|
path: "esop",
|
|
|
name: "Esop",
|
|
|
},
|
|
|
{
|
|
|
- compentName: "点检",
|
|
|
- iconName: "dianjian",
|
|
|
- path: "dianjian",
|
|
|
- name: "Dianjian",
|
|
|
- },
|
|
|
- {
|
|
|
- compentName: "设备记录",
|
|
|
+ compentName: "设备确认",
|
|
|
iconName: "shebeijilu",
|
|
|
path: "shebeijilu",
|
|
|
name: "Shebeijilu",
|
|
|
},
|
|
|
{
|
|
|
- compentName: "测试记录",
|
|
|
- iconName: "mingpai",
|
|
|
- path: "ceshijilu",
|
|
|
- name: "Ceshijilu",
|
|
|
- },
|
|
|
- {
|
|
|
- compentName: "工序表单",
|
|
|
- iconName: "mingpai",
|
|
|
- path: "execl",
|
|
|
- name: "Excel",
|
|
|
- },
|
|
|
- {
|
|
|
- compentName: "数据采集",
|
|
|
- iconName: "mingpai",
|
|
|
- path: "screwdriver",
|
|
|
- name: "Screwdriver",
|
|
|
+ compentName: "检验",
|
|
|
+ iconName: "dianjian",
|
|
|
+ path: "dianjian",
|
|
|
+ name: "Dianjian",
|
|
|
},
|
|
|
];
|
|
|
//当前路由在setpComponents中的index
|
|
|
@@ -500,8 +645,8 @@ const setSelectIndex = (index) => {
|
|
|
selectIndex.value = index;
|
|
|
}
|
|
|
};
|
|
|
-const init = async (index) => {
|
|
|
- if (taskIndex.value == null) {
|
|
|
+const init = async (index, status) => {
|
|
|
+ if (taskIndex.value == null || status == true) {
|
|
|
return;
|
|
|
}
|
|
|
selectStepIndex.value = index != null ? index : 0;
|
|
|
@@ -540,8 +685,14 @@ watch(
|
|
|
}
|
|
|
);
|
|
|
</script>
|
|
|
-
|
|
|
+d
|
|
|
<style lang="scss" scoped>
|
|
|
+.selectOpBox {
|
|
|
+ height: 100px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background-color: #d5dade;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
.disabled {
|
|
|
opacity: 0.6 !important;
|
|
|
}
|
|
|
@@ -560,17 +711,17 @@ watch(
|
|
|
width: 100%;
|
|
|
height: 100px;
|
|
|
margin-bottom: 10px;
|
|
|
- border-radius: 16px;
|
|
|
- background-color: var(--ohos-area-bg);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #d5dade;
|
|
|
padding: 10px 20px;
|
|
|
cursor: pointer;
|
|
|
.productitleText {
|
|
|
- color: white;
|
|
|
+ color: black;
|
|
|
}
|
|
|
}
|
|
|
.optionBox {
|
|
|
height: calc(100vh - 150px);
|
|
|
- background-color: var(--ohos-area-bg);
|
|
|
+ background-color: #d5dade;
|
|
|
border-radius: 16px;
|
|
|
}
|
|
|
.headerInfo {
|
|
|
@@ -609,7 +760,7 @@ watch(
|
|
|
width: 135px;
|
|
|
border-radius: 16px;
|
|
|
text-align: center;
|
|
|
- background-color: var(--ohos-box-bg);
|
|
|
+ background-color: #d5dade;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
@@ -662,12 +813,12 @@ watch(
|
|
|
|
|
|
.typeBoxNormal {
|
|
|
background: transparent;
|
|
|
- color: var(--ohos-text);
|
|
|
+ color: black;
|
|
|
}
|
|
|
|
|
|
.typeBoxSelected {
|
|
|
background-color: var(--ohos-area-active-bg);
|
|
|
- color: black !important;
|
|
|
+ color: white !important;
|
|
|
}
|
|
|
:deep(.el-divider__text) {
|
|
|
padding: 0px;
|
|
|
@@ -677,13 +828,13 @@ watch(
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 80%;
|
|
|
- background-color: var(--ohos-area-bg);
|
|
|
+ background-color: #d5dade;
|
|
|
border-radius: 16px;
|
|
|
padding: 20px;
|
|
|
.hang {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- color: white;
|
|
|
+ color: black;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
.taskBox {
|
|
|
@@ -692,4 +843,7 @@ watch(
|
|
|
gap: 20px; /* 设置间距为 20px */
|
|
|
}
|
|
|
}
|
|
|
+:deep(.el-input__wrapper) {
|
|
|
+ background-color: #00000020 !important;
|
|
|
+}
|
|
|
</style>
|
