renren/spc
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新

Browse Source
This commit is contained in:
朱文强
2022-12-13 16:41:37 +08:00
parent c0a5dbac2d
commit f6b3f2f323
60 changed files with 6404 additions and 742 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/process-inspection/Counting/CGraph.vue Normal file
View File

@@ -0,0 +1,85 @@
<!--
* @Author: zwq
* @Date: 2022-09-15 10:22:53
* @LastEditors: zwq
* @LastEditTime: 2022-12-01 10:23:29
* @Description: C图
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<query-form
:page-name="'缺陷数图'"
:data-form="dataForm"
@getDataList="getDataList"
@rawData="rawData"
@exportHandle="exportHandle"
/>
<el-row :gutter="6" v-if="chartVisible">
<el-col :span="24">
<chart-line
ref="CGraph"
:chartLineName="'CGraph'"
:yName="'缺陷数'"
:title="chartTitle"
:data-list="dataList.list"
></chart-line>
</el-col>
</el-row>
</el-card>
</template>
<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-3line.vue";
export default {
mixins: [processPage],
data() {
return {
urlOptions: {
exportUrl: "/basic/unit/export",
},
chartVisible: false,
chartTitle: "缺陷数图",
};
},
components: {
queryForm,
chartLine,
},
methods: {
// 获取数据列表
getDataList() {
this.$http
.post("/processInspection/CGraphTest")
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.dataList = [];
this.rightList = [];
return this.$message.error(res.msg);
}
this.dataList = res.data;
this.chartVisible = true;
this.$nextTick(() => {
this.$refs.CGraph.initChartLine();
});
})
.catch(() => {});
},
rawData() {
console.log("原始数据");
},
},
};
</script>
<style scoped>
.rightDiv {
padding: 8px 16px;
font-size: 16px;
background-color: #fdfdfd;
border-bottom: 1px solid #f5f5f5;
overflow: hidden;
}
</style>

85
src/views/process-inspection/Counting/NPGraph.vue Normal file
View File

@@ -0,0 +1,85 @@
<!--
* @Author: zwq
* @Date: 2022-09-15 10:22:53
* @LastEditors: zwq
* @LastEditTime: 2022-12-01 10:23:34
* @Description: NP图
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<query-form
:page-name="'NP图'"
:data-form="dataForm"
@getDataList="getDataList"
@rawData="rawData"
@exportHandle="exportHandle"
/>
<el-row :gutter="6" v-if="chartVisible">
<el-col :span="24">
<chart-line
ref="CGraph"
:chartLineName="'CGraph'"
:yName="'缺陷数'"
:title="chartTitle"
:data-list="dataList.list"
></chart-line>
</el-col>
</el-row>
</el-card>
</template>
<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-3line.vue";
export default {
mixins: [processPage],
data() {
return {
urlOptions: {
exportUrl: "/basic/unit/export",
},
chartVisible: false,
chartTitle: "NP图",
};
},
components: {
queryForm,
chartLine,
},
methods: {
// 获取数据列表
getDataList() {
this.$http
.post("/processInspection/NPGraphTest")
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.dataList = [];
this.rightList = [];
return this.$message.error(res.msg);
}
this.dataList = res.data;
this.chartVisible = true;
this.$nextTick(() => {
this.$refs.CGraph.initChartLine();
});
})
.catch(() => {});
},
rawData() {
console.log("原始数据");
},
},
};
</script>
<style scoped>
.rightDiv {
padding: 8px 16px;
font-size: 16px;
background-color: #fdfdfd;
border-bottom: 1px solid #f5f5f5;
overflow: hidden;
}
</style>

85
src/views/process-inspection/Counting/PGraph.vue Normal file
View File

@@ -0,0 +1,85 @@
<!--
* @Author: zwq
* @Date: 2022-09-15 10:22:53
* @LastEditors: zwq
* @LastEditTime: 2022-12-01 10:23:38
* @Description: P图
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<query-form
:page-name="'NP图'"
:data-form="dataForm"
@getDataList="getDataList"
@rawData="rawData"
@exportHandle="exportHandle"
/>
<el-row :gutter="6" v-if="chartVisible">
<el-col :span="24">
<chart-line
ref="CGraph"
:chartLineName="'CGraph'"
:yName="'缺陷率'"
:title="chartTitle"
:data-list="dataList.list"
></chart-line>
</el-col>
</el-row>
</el-card>
</template>
<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-3line.vue";
export default {
mixins: [processPage],
data() {
return {
urlOptions: {
exportUrl: "/basic/unit/export",
},
chartVisible: false,
chartTitle: "P图",
};
},
components: {
queryForm,
chartLine,
},
methods: {
// 获取数据列表
getDataList() {
this.$http
.post("/processInspection/PGraphTest")
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.dataList = [];
this.rightList = [];
return this.$message.error(res.msg);
}
this.dataList = res.data;
this.chartVisible = true;
this.$nextTick(() => {
this.$refs.CGraph.initChartLine();
});
})
.catch(() => {});
},
rawData() {
console.log("原始数据");
},
},
};
</script>
<style scoped>
.rightDiv {
padding: 8px 16px;
font-size: 16px;
background-color: #fdfdfd;
border-bottom: 1px solid #f5f5f5;
overflow: hidden;
}
</style>

85
src/views/process-inspection/Counting/UGraph.vue Normal file
View File

@@ -0,0 +1,85 @@
<!--
* @Author: zwq
* @Date: 2022-09-15 10:22:53
* @LastEditors: zwq
* @LastEditTime: 2022-12-01 10:23:43
* @Description: U图
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<query-form
:page-name="'U图'"
:data-form="dataForm"
@getDataList="getDataList"
@rawData="rawData"
@exportHandle="exportHandle"
/>
<el-row :gutter="6" v-if="chartVisible">
<el-col :span="24">
<chart-line
ref="CGraph"
:chartLineName="'CGraph'"
:yName="'单位缺陷'"
:title="chartTitle"
:data-list="dataList.list"
></chart-line>
</el-col>
</el-row>
</el-card>
</template>
<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-3line.vue";
export default {
mixins: [processPage],
data() {
return {
urlOptions: {
exportUrl: "/basic/unit/export",
},
chartVisible: false,
chartTitle: "U图",
};
},
components: {
queryForm,
chartLine,
},
methods: {
// 获取数据列表
getDataList() {
this.$http
.post("/processInspection/UGraphTest")
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.dataList = [];
this.rightList = [];
return this.$message.error(res.msg);
}
this.dataList = res.data;
this.chartVisible = true;
this.$nextTick(() => {
this.$refs.CGraph.initChartLine();
});
})
.catch(() => {});
},
rawData() {
console.log("原始数据");
},
},
};
</script>
<style scoped>
.rightDiv {
padding: 8px 16px;
font-size: 16px;
background-color: #fdfdfd;
border-bottom: 1px solid #f5f5f5;
overflow: hidden;
}
</style>

172
src/views/process-inspection/Metrological/XMRGraph.vue Normal file
View File

@@ -0,0 +1,172 @@
<!--
* @Author: zwq
* @Date: 2022-09-15 10:23:42
* @LastEditors: zwq
* @LastEditTime: 2022-11-29 16:26:58
* @Description: 单值-移动极差 控制图
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<query-form
:page-name="'单值-移动极差控制图'"
:data-form="dataForm"
@getDataList="getDataList"
@rawData="rawData"
@exportHandle="exportHandle"
/>
<el-row :gutter="6" v-if="chartVisible">
<el-col :span="19">
<chart-line
ref="XMRGraph"
:chartLineName="'XMRGraph'"
:lineIndex='2'
:title="chartTitle"
:y-name1="yName1"
:y-name2="yName2"
:mrGraphEntity="dataList.xmrGraphEntity"
:processCapability="dataList.processCapability"
:rcl="dataList.rcl"
:sl="dataList.sl"
:xbarCL="dataList.xbarCL"
></chart-line>
</el-col>
<el-col :span="5" style="margin-top: 20px;">
<el-card>
<div v-for="item in rightList" :key="item.name" class="rightDiv">
{{ item.name }}<span style="float:right">{{ parseFloat(item.value).toFixed(4) }}</span>
</div>
<el-collapse>
<el-collapse-item title="单值数值" name="0">
<div
v-for="(val, key, index) in this.dataList.xbarCL"
:key="index + 'xbar'"
class="rightDiv"
>
{{ key }}<span style="float:right">{{ val.length?val: parseFloat(val).toFixed(4) }}</span>
</div>
</el-collapse-item>
<el-collapse-item title="移动极差数值" name="1">
<div
v-for="(val, key, index) in this.dataList.rcl"
:key="index + 'rcl'"
class="rightDiv"
>
{{ key }}<span style="float:right">{{ val.length?val: parseFloat(val).toFixed(4) }}</span>
</div>
</el-collapse-item>
<el-collapse-item title="waring:" name="2">
<div v-for="item in waring" :key="item" class="rightDiv">{{ item }}</div>
</el-collapse-item>
</el-collapse>
</el-card>
</el-col>
</el-row>
</el-card>
</template>
<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-2line.vue";
export default {
mixins: [processPage],
data() {
return {
urlOptions: {
exportUrl: "/basic/unit/export",
},
chartVisible: false,
chartTitle: "单值-移动极差控制图",
yName1: "单值",
yName2: "移动极差",
rightList: [],
waring: [],
};
},
components: {
queryForm,
chartLine,
},
methods: {
// 获取数据列表
getDataList() {
this.$http
.post("/processInspection/XMRGraphTest")
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.dataList = [];
this.rightList = [];
return this.$message.error(res.msg);
}
this.dataList = res.data;
this.rightList = [];
// this.rightList.push({
// name: "cl(上图)",
// value: res.data.xbarCL.cl,
// });
// this.rightList.push({
// name: "lcl(上图)",
// value: res.data.xbarCL.lcl,
// });
// this.rightList.push({
// name: "ucl(上图)",
// value: res.data.xbarCL.ucl,
// });
Object.keys(res.data.sl).map((key) => {
this.rightList.push({
name: key,
value: res.data.sl[key],
});
});
// this.rightList.push({
// name: "cl(下图)",
// value: res.data.rcl.cl,
// });
// this.rightList.push({
// name: "lcl(下图)",
// value: res.data.rcl.lcl,
// });
// this.rightList.push({
// name: "ucl(下图)",
// value: res.data.rcl.ucl,
// });
Object.keys(res.data.standardDiviation).map((key) => {
this.rightList.push({
name: key,
value: res.data.standardDiviation[key],
});
});
Object.keys(res.data.processCapability).map((key) => {
if (key === "warming") {
this.waring = res.data.processCapability[key];
} else {
this.rightList.push({
name: key,
value: res.data.processCapability[key],
});
}
});
this.chartVisible = true;
this.$nextTick(() => {
this.$refs.XMRGraph.initChartLine();
});
})
.catch(() => {});
},
rawData() {
console.log("原始数据");
},
},
};
</script>
<style scoped>
.rightDiv {
padding: 8px 16px;
font-size: 16px;
background-color: #fdfdfd;
border-bottom: 1px solid #f5f5f5;
overflow: hidden;
}
</style>

184
src/views/process-inspection/Metrological/XbarRGraph.vue Normal file
View File

@@ -0,0 +1,184 @@
<!--
* @Author: zwq
* @Date: 2022-09-15 10:22:12
* @LastEditors: zwq
* @LastEditTime: 2022-12-12 16:40:23
* @Description: 均值极差控制图
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<query-form
ref="queryForm"
:page-name="'均值极差控制图'"
:data-form="dataForm"
@getDataList="getDataList"
@rawData="rawData"
@exportHandle="exportHandle"
/>
<el-row :gutter="6" v-if="chartVisible">
<el-col :span="19">
<chart-line
ref="chartRef"
:chartLineName="'XbarRGraph'"
:lineIndex="0"
:title="chartTitle"
:y-name1="yName1"
:y-name2="yName2"
:mrGraphEntity="dataList.mrGraphEntity"
:processCapability="dataList.processCapability"
:rcl="dataList.rcl"
:sl="dataList.sl"
:xbarCL="dataList.xbarCL"
></chart-line>
</el-col>
<el-col :span="5" style="margin-top: 20px;">
<el-card>
<div v-for="item in rightList" :key="item.name" class="rightDiv">
{{ item.name }}<span style="float:right">{{ parseFloat(item.value).toFixed(4) }}</span>
</div>
<el-collapse>
<el-collapse-item title="均值数值" name="0">
<div
v-for="(val, key, index) in this.dataList.xbarCL"
:key="index + 'xbar'"
class="rightDiv"
>
{{ key
}}<span style="float:right">{{
val.length ? val : parseFloat(val).toFixed(4)
}}</span>
</div>
</el-collapse-item>
<el-collapse-item title="极差数值" name="1">
<div
v-for="(val, key, index) in this.dataList.rcl"
:key="index + 'rcl'"
class="rightDiv"
>
{{ key
}}<span style="float:right">{{
val.length ? val : parseFloat(val).toFixed(4)
}}</span>
</div>
</el-collapse-item>
<el-collapse-item title="waring:" name="2">
<div v-for="item in waring" :key="item" class="rightDiv">{{ item }}</div>
</el-collapse-item>
</el-collapse>
</el-card>
</el-col>
</el-row>
</el-card>
</template>
<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-2line.vue";
export default {
mixins: [processPage],
data() {
return {
urlOptions: {
exportUrl: "/basic/unit/export",
},
chartVisible: false,
chartTitle: "均值极差控制图",
yName1: "均值",
yName2: "极差",
rightList: [],
waring: [],
};
},
components: {
queryForm,
chartLine,
},
created() {
this.$nextTick(() => {
this.$refs.queryForm.getArr();
});
},
methods: {
// 获取数据列表
getDataList() {
this.$http
.post("/processInspection/XbarRGraphTest")
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.dataList = [];
this.rightList = [];
return this.$message.error(res.msg);
}
this.dataList = res.data;
this.rightList = [];
// this.rightList.push({
// name: "cl(上图)",
// value: res.data.xbarCL.cl,
// });
// this.rightList.push({
// name: "lcl(上图)",
// value: res.data.xbarCL.lcl,
// });
// this.rightList.push({
// name: "ucl(上图)",
// value: res.data.xbarCL.ucl,
// });
Object.keys(res.data.sl).map((key) => {
this.rightList.push({
name: key,
value: res.data.sl[key],
});
});
// this.rightList.push({
// name: "cl(下图)",
// value: res.data.rcl.cl,
// });
// this.rightList.push({
// name: "lcl(下图)",
// value: res.data.rcl.lcl,
// });
// this.rightList.push({
// name: "ucl(下图)",
// value: res.data.rcl.ucl,
// });
Object.keys(res.data.standardDiviation).map((key) => {
this.rightList.push({
name: key,
value: res.data.standardDiviation[key],
});
});
Object.keys(res.data.processCapability).map((key) => {
if (key === "warming") {
this.waring = res.data.processCapability[key];
} else {
this.rightList.push({
name: key,
value: res.data.processCapability[key],
});
}
});
this.chartVisible = true;
this.$nextTick(() => {
this.$refs.chartRef.initChartLine();
});
})
.catch(() => {});
},
rawData() {
console.log("原始数据");
},
},
};
</script>
<style scoped>
.rightDiv {
padding: 8px 16px;
font-size: 16px;
background-color: #fdfdfd;
border-bottom: 1px solid #f5f5f5;
overflow: hidden;
}
</style>

172
src/views/process-inspection/Metrological/XbarSGraph.vue Normal file
View File

@@ -0,0 +1,172 @@
<!--
* @Author: zwq
* @Date: 2022-09-15 10:22:53
* @LastEditors: zwq
* @LastEditTime: 2022-11-29 16:26:47
* @Description: 均值标准差控制图
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<query-form
:page-name="'均值标准差控制图'"
:data-form="dataForm"
@getDataList="getDataList"
@rawData="rawData"
@exportHandle="exportHandle"
/>
<el-row :gutter="6" v-if="chartVisible">
<el-col :span="19">
<chart-line
ref="chart1Ref"
:chartLineName="'XbarSGraph'"
:lineIndex='1'
:title="chartTitle"
:y-name1="yName1"
:y-name2="yName2"
:mrGraphEntity="dataList.msdGraphEntity"
:processCapability="dataList.processCapability"
:rcl="dataList.scl"
:sl="dataList.sl"
:xbarCL="dataList.xbarCL"
></chart-line>
</el-col>
<el-col :span="5" style="margin-top: 20px;">
<el-card>
<div v-for="item in rightList" :key="item.name" class="rightDiv">
{{ item.name }}<span style="float:right">{{ parseFloat(item.value).toFixed(4) }}</span>
</div>
<el-collapse>
<el-collapse-item title="均值数值" name="0">
<div
v-for="(val, key, index) in this.dataList.xbarCL"
:key="index + 'xbar'"
class="rightDiv"
>
{{ key }}<span style="float:right">{{ val.length?val: parseFloat(val).toFixed(4) }}</span>
</div>
</el-collapse-item>
<el-collapse-item title="标准差数值" name="1">
<div
v-for="(val, key, index) in this.dataList.scl"
:key="index + 'scl'"
class="rightDiv"
>
{{ key }}<span style="float:right">{{ val.length?val: parseFloat(val).toFixed(4) }}</span>
</div>
</el-collapse-item>
<el-collapse-item title="waring:" name="2">
<div v-for="item in waring" :key="item" class="rightDiv">{{ item }}</div>
</el-collapse-item>
</el-collapse>
</el-card>
</el-col>
</el-row>
</el-card>
</template>
<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-2line.vue";
export default {
mixins: [processPage],
data() {
return {
urlOptions: {
exportUrl: "/basic/unit/export",
},
chartVisible: false,
chartTitle: "均值标准差控制图",
yName1: "均值",
yName2: "标准差",
rightList: [],
waring: [],
};
},
components: {
queryForm,
chartLine,
},
methods: {
// 获取数据列表
getDataList() {
this.$http
.post("/processInspection/XbarSGraphTest")
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.dataList = [];
this.rightList = [];
return this.$message.error(res.msg);
}
this.dataList = res.data;
this.rightList = [];
// this.rightList.push({
// name: "cl(上图)",
// value: res.data.xbarCL.cl,
// });
// this.rightList.push({
// name: "lcl(上图)",
// value: res.data.xbarCL.lcl,
// });
// this.rightList.push({
// name: "ucl(上图)",
// value: res.data.xbarCL.ucl,
// });
Object.keys(res.data.sl).map((key) => {
this.rightList.push({
name: key,
value: res.data.sl[key],
});
});
// this.rightList.push({
// name: "cl(下图)",
// value: res.data.rcl.cl,
// });
// this.rightList.push({
// name: "lcl(下图)",
// value: res.data.rcl.lcl,
// });
// this.rightList.push({
// name: "ucl(下图)",
// value: res.data.rcl.ucl,
// });
Object.keys(res.data.standardDiviation).map((key) => {
this.rightList.push({
name: key,
value: res.data.standardDiviation[key],
});
});
Object.keys(res.data.processCapability).map((key) => {
if (key === "warming") {
this.waring = res.data.processCapability[key];
} else {
this.rightList.push({
name: key,
value: res.data.processCapability[key],
});
}
});
this.chartVisible = true;
this.$nextTick(() => {
this.$refs.chart1Ref.initChartLine();
});
})
.catch(() => {});
},
rawData() {
console.log("原始数据");
},
},
};
</script>
<style scoped>
.rightDiv {
padding: 8px 16px;
font-size: 16px;
background-color: #fdfdfd;
border-bottom: 1px solid #f5f5f5;
overflow: hidden;
}
</style>

618
src/views/process-inspection/charts/echart-2line.vue Normal file
View File

@@ -0,0 +1,618 @@
<template>
<div class="mod-demo-echarts">
<div :id="chartLineName" class="chart-box"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
//import testdata from './testdata'
export default {
props: {
title: {
type: String,
},
chartLineName: {
type:String,
default: 'echartLine',
},
mrGraphEntity: {
type: Object,
default: () => {
return {};
},
},
processCapability: {
type: Object,
default: () => {
return {};
},
},
rcl: {
type: Object,
default: () => {
return {};
},
},
sl: {
type: Object,
default: () => {
return {};
},
},
xbarCL: {
type: Object,
default: () => {
return {};
},
},
yName1: {
type: String,
},
yName2: {
type: String,
},
lineIndex: {
type: Number,
default: 0
}
},
data() {
return {
ruleList: [
"违反规则一：控制图上有 1 个点位于三倍标准差以外",
"违反规则二：连续 9 点落在中心线的用一侧",
"违反规则三：连续 6 点递增或者递减",
"违反规则四：连续 14 点中 相邻点 交替上下",
"违反规则五：连续 3 点中 有 2 点 落在中心线同一侧，B区以外",
"违反规则六：连续 5 点中 有 4点 落在中心线同一侧，C区以外",
"违反规则七：连续 15 点 落在中心线两侧的C区内",
"违反规则八：连续 8 点 落在中心线两侧，且无一点在C区内",
"违反规则九：有 1 点落在规格线以外",
"违反规则十：CPK小于目标值",
],
upLine:[{name:'xbar',
rules:'xbarUnsatisfiedRules'},{name:'xbar',
rules:'xbarUnsatisfiedRules'},{name:'x',
rules:'xUnsatisfiedRules'}],
lowLine:[{name:'r',
rules:'rUnsatisfiedRules'},{name:'s',
rules:'sUnsatisfiedRules'},{name:'rs',
rules:'rsUnsatisfiedRules'}]
//testdata
};
},
mounted() {},
activated() {
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
if (this.chartLine1) {
this.chartLine1.resize();
}
},
methods: {
// 折线图
initChartLine() {
const rclUcl = this.rcl.ucl;
var option = {
title: {
text: this.title,
},
tooltip: {
// 悬浮提示框
trigger: "axis",
boundaryGap: false,
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: (e) => {
let alarmInfo = ''
e[0].data.sRule.forEach(item=>{
alarmInfo += this.ruleList[item - 1]+'<br/>'
})
return `
点位坐标: ${e[0].data.position}<br/>
${e[0].marker} 数值: ${e[0].data.value}<br/>
${e[0].marker} 规格: ${e[0].data.sl}<br/>
${e[0].marker} 异常信息:<br/> ${alarmInfo || "无"}
`;
},
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
color: ["#f8f106", "#fe7576", "#a9b0d3", "#476fd4"],
//多个图，就有多个grid,排序默认0、1、2....
grid: [
//0降雨
{ x: "7%", y: "7%", height: "40%", left: "10%" },
//1水位流量
{ x: "7%", y2: "7%", height: "35%", left: "10%", bottom: "15%" },
],
legend: {
data: [this.yName1, this.yName2],
},
xAxis: [
{
show: false, //隐藏了x轴
type: "category",
gridIndex: 0, //对应前面grid的索引位置（第一个）
axisTick: {
alignWithLabel: true,
},
axisLabel: {
//interval:showNum, //x轴显示的数量，我这里是动态算的
},
},
{
type: "category",
gridIndex: 1, //对应前面grid的索引位置（第二个）
axisTick: {
alignWithLabel: true,
},
axisLabel: {
//interval:showNum,
},
},
],
yAxis: [
{
type: "value",
gridIndex: 1,
nameLocation: "middle",
name: this.yName2,
max: function(value) {
if (rclUcl > value.max + 1) {
return rclUcl + 0.5;
} else {
return value.max + 1;
}
},
splitLine: { show: false },
nameTextStyle: {
padding: 25,
},
position: "left",
axisLine: {
show: true,
lineStyle: {
//color: colors[2]
},
},
axisTick: {
show: true,
},
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
gridIndex: 0,
name: this.yName1,
min: function(value) {
return value.min - 1;
},
max: function(value) {
return value.max + 1;
},
splitLine: { show: false },
nameTextStyle: {
padding: 25,
},
nameLocation: "middle",
position: "left",
//nameLocation: 'start',//y轴name的位置
//inverse: true,
axisLine: {
show: true,
lineStyle: {
//color: colors[1]
},
},
axisTick: {
show: true,
},
axisLabel: {
formatter: "{value}",
textStyle: {
fontSize: 12, //y轴坐标轴上的字体大小
},
},
},
],
visualMap: [
{
// 折线颜色修改
type: "piecewise",
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [],
inRange: {
// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: "blue",
},
outOfRange: {
// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: "blue",
},
},
{
// 折线颜色修改
type: "piecewise",
show: false,
dimension: 0,
seriesIndex: 1,
pieces: [],
inRange: {
// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: "blue",
},
outOfRange: {
// 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: "blue",
},
},
],
dataZoom: [
// 轴放大
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
{
type: "inside",
xAxisIndex: [0, 1],
start: 0,
end: 100,
},
{
show: true,
yAxisIndex: 0,
realtime: true,
left: 6,
start: 0,
end: 100,
},
{
show: true,
yAxisIndex: 1,
realtime: true,
left: 6,
start: 0,
end: 100,
},
],
series: [
{
name: this.yName1,
xAxisIndex: 0,
yAxisIndex: 1,
type: "line",
smooth: true,
symbol: "emptyDiamond", // 设定为实心点
symbolSize: 10,
lineStyle: {
// color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
width: 1,
},
markLine: {
// 最大值最小值均值线
symbol: "none",
label: {
normal: {
show: true,
position: "end",
formatter: "{name|{b}}--{c}",
rich: {
name: {
color: "blue",
fontSize: 16,
fontWeight: 400,
},
},
textStyle: {
color: "black", //标注线终点文字颜色
fontSize: 14,
fontWeight: 400,
},
},
},
data: [
{
lineStyle: {
color: "#990000",
type: "solid",
width: 3,
},
name: "ucl",
yAxis: this.xbarCL.ucl,
},
{
lineStyle: {
color: "#990000",
type: [5, 10],
width: 3,
dashOffset: 5,
},
name: "cl",
yAxis: this.xbarCL.cl,
},
{
lineStyle: {
color: "#990000",
type: "solid",
width: 3,
},
name: "lcl",
yAxis: this.xbarCL.lcl,
},
{
lineStyle: {
color: "#009900",
type: "solid",
width: 3,
},
name: "usl",
yAxis: this.sl.usl,
},
{
lineStyle: {
color: "#009900",
type: "solid",
width: 3,
},
name: "sl",
yAxis: this.sl.sl,
},
{
lineStyle: {
color: "#009900",
width: 3,
type: "solid",
},
name: "lsl",
yAxis: this.sl.lsl,
},
],
},
markPoint: {
// 标记
data: [],
symbolSize: 50, // 标记的大小
label: {
// 标记单位
fontSize: 10,
formatter: "{c}", // 单位
},
},
markArea: {
// 以y轴分割的区域
silent: false,
data: [
[
{
name: "",
itemStyle: {
color: "#fb512c",
opacity: 0.5,
},
yAxis: this.xbarCL.la[0],
},
{
yAxis: this.xbarCL.la[1],
},
],
[
{
name: "",
itemStyle: {
color: "#ffcc33",
opacity: 0.5,
},
yAxis: this.xbarCL.lb[0],
},
{
yAxis: this.xbarCL.lb[1],
},
],
[
{
name: "",
itemStyle: {
color: "#52b854",
opacity: 0.5,
},
yAxis: this.xbarCL.lc[0],
},
{
yAxis: this.xbarCL.uc[1],
},
],
[
{
name: "",
itemStyle: {
color: "#ffcc33",
opacity: 0.5,
},
yAxis: this.xbarCL.ub[0],
},
{
yAxis: this.xbarCL.ub[1],
},
],
[
{
name: "",
itemStyle: {
color: "#fb512c",
opacity: 0.5,
},
yAxis: this.xbarCL.ua[0],
},
{
yAxis: this.xbarCL.ua[1],
},
],
],
},
// areaStyle: {},
data: this.mrGraphEntity.list?.map((item) => {
const obj = {
position: item.position,
value: item[this.upLine[this.lineIndex].name],
sRule: item[this.upLine[this.lineIndex].rules],
sl:`ucl-${this.xbarCL.ucl.toFixed(2)} cl-${this.xbarCL.cl.toFixed(2)} lcl-${this.xbarCL.lcl.toFixed(2)} `
};
return obj;
}),
},
{
name: this.yName2,
type: "line",
xAxisIndex: 1,
yAxisIndex: 0,
type: "line",
smooth: true,
symbol: "emptyDiamond", // 设定为实心点
symbolSize: 10,
lineStyle: {
// color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
width: 1,
},
markLine: {
// 最大值最小值均值线
symbol: "none",
label: {
normal: {
show: true,
position: "end",
formatter: "{name|{b}}--{c}",
rich: {
name: {
color: "blue",
fontSize: 16,
fontWeight: 400,
},
},
textStyle: {
color: "black", //标注线终点文字颜色
fontSize: 14,
fontWeight: 400,
},
},
},
data: [
{
lineStyle: {
color: "#990000",
type: "solid",
width: 3,
},
name: "ucl",
yAxis: this.rcl.ucl,
},
{
lineStyle: {
color: "#990000",
width: 3,
type: [5, 10],
dashOffset: 5,
},
name: "cl",
yAxis: this.rcl.cl,
},
{
lineStyle: {
color: "#990000",
width: 3,
type: "solid",
},
name: "lcl",
yAxis: this.rcl.lcl,
},
],
},
markPoint: {
// 标记
data: [],
symbolSize: 50, // 标记的大小
label: {
// 标记单位
fontSize: 10,
formatter: "{c}", // 单位
},
},
// areaStyle: {},
data: this.mrGraphEntity.list?.map((item) => {
const obj = {
position: item.position,
value: item[this.lowLine[this.lineIndex].name],
sRule: item[this.lowLine[this.lineIndex].rules],
sl:`ucl-${this.rcl.ucl.toFixed(2)} cl-${this.rcl.cl.toFixed(2)} lcl-${this.rcl.lcl.toFixed(2)} `
};
return obj;
}),
},
],
};
this.mrGraphEntity.list?.forEach((item, index) => {
if (item[this.lowLine[this.lineIndex].rules].length) {
option.visualMap[1].pieces.push({
gte: index,
lt: index + 1,
color: "red",
});
option.series[1].markPoint.data.push({
value: item[this.lowLine[this.lineIndex].name],
coord: [index, item[this.lowLine[this.lineIndex].name]],
});
}
});
this.mrGraphEntity.list?.forEach((item, index) => {
if (item[this.upLine[this.lineIndex].rules].length) {
option.visualMap[0].pieces.push({
gte: index,
lt: index + 1,
color: "red",
});
option.series[0].markPoint.data.push({
value: item[this.upLine[this.lineIndex].name],
coord: [index, item[this.upLine[this.lineIndex].name]],
});
}
});
this.chartLine1 = echarts.init(document.getElementById(this.chartLineName));
this.chartLine1.setOption(option);
window.addEventListener("resize", () => {
this.chartLine1.resize();
});
},
},
};
</script>
<style lang="scss">
.mod-demo-echarts {
.chart-box {
min-height: 700px;
margin-top: 20px;
}
}
</style>

239
src/views/process-inspection/charts/echart-3line.vue Normal file
View File

@@ -0,0 +1,239 @@
<template>
<div class="mod-demo-echarts">
<div :id="chartLineName" class="chart-box"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
//import testdata from './testdata'
export default {
props: {
title: {
type: String,
},
chartLineName: {
type: String,
default: "echartLine",
},
yName: {
type: String,
},
dataList: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
ruleList: [
"违反规则一：控制图上有 1 个点位于三倍标准差以外",
"违反规则二：连续 9 点落在中心线的用一侧",
"违反规则三：连续 6 点递增或者递减",
"违反规则四：连续 14 点中 相邻点 交替上下",
"违反规则五：连续 3 点中 有 2 点 落在中心线同一侧，B区以外",
"违反规则六：连续 5 点中 有 4点 落在中心线同一侧，C区以外",
"违反规则七：连续 15 点 落在中心线两侧的C区内",
"违反规则八：连续 8 点 落在中心线两侧，且无一点在C区内",
"违反规则九：有 1 点落在规格线以外",
"违反规则十：CPK小于目标值",
],
//testdata
};
},
mounted() {},
activated() {
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
if (this.chartLine) {
this.chartLine.resize();
}
},
methods: {
// 折线图
initChartLine() {
var option = {
title: {
text: this.title,
},
legend: {
data: [this.title, "LCL", "CL", "UCL"],
},
tooltip: {
// 悬浮提示框
trigger: "axis",
boundaryGap: false,
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
formatter: (e) => {
return `
点位坐标: ${e[0].data.position}<br/>
${e[0].marker} 数值: ${e[0].data.value}<br/>
${e[0].marker} 规格: ${e[0].data.sl}<br/>
${e[0].marker} 名称:${e[0].data.name}
`;
},
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
grid: {
// 折线图内边距
left: "3%",
right: "4%",
bottom: "7%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
},
yAxis: {
type: "value",
name: this.yName,
axisLine: {
show: true,
lineStyle: {
//color: colors[2]
},
},
axisTick: {
show: true,
},
axisLabel: {
formatter: "{value}",
},
},
dataZoom: [
// 轴放大
{
show: true,
realtime: true,
start: 0,
end: 100,
xAxisIndex: 0,
},
{
type: "inside",
realtime: true,
start: 0,
end: 100,
xAxisIndex: 0,
},
],
series: [
{
name: this.title,
type: "line",
lineStyle: {
color: "#5470c6",
},
markArea: {
// 以y轴分割的区域
silent: false,
data: [
],
},
data: this.dataList.map((item) => {
const obj = {
position: item.position,
value: item.value,
name: item.name,
sl:`ucl-${item.controlLimit.ucl.toFixed(2)} cl-${item.controlLimit.cl.toFixed(2)} lcl-${item.controlLimit.lcl.toFixed(2)} `
};
return obj;
}),
},
{
name: "LCL",
type: "line",
step: "middle",
showSymbol: false,
lineStyle: {
color: "#91cc75",
},
endLabel: {
formatter: "LCL",
show: true,
},
data: this.dataList.map((item) => {
const obj = {
position: item.position,
value: item.controlLimit.lcl,
name: item.name,
};
return obj;
}),
},
{
name: "CL",
type: "line",
step: "middle",
showSymbol: false,
lineStyle: {
color: "#ee6666",
},
endLabel: {
formatter: "CL",
show: true,
},
data: this.dataList.map((item) => {
const obj = {
position: item.position,
value: item.controlLimit.cl,
name: item.name,
};
return obj;
}),
},
{
name: "UCL",
type: "line",
step: "middle",
showSymbol: false,
lineStyle: {
color: "#fac858",
},
endLabel: {
formatter: "UCL",
show: true,
},
data: this.dataList.map((item) => {
const obj = {
position: item.position,
value: item.controlLimit.ucl,
name: item.name,
};
return obj;
}),
},
],
};
this.chartLine = echarts.init(document.getElementById(this.chartLineName));
this.chartLine.setOption(option);
window.addEventListener("resize", () => {
this.chartLine.resize();
});
},
},
};
</script>
<style lang="scss">
.mod-demo-echarts {
.chart-box {
min-height: 700px;
margin-top: 20px;
}
}
</style>

274
src/views/process-inspection/components/detail-table.vue Normal file
View File

@@ -0,0 +1,274 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2022-12-13 13:43:23
* @Description:
-->
<template>
<div>
<div style="margin-left:20px">
<el-button size="small" type="primary" @click="addSample()">
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
添加样本组
</el-button>
<el-button size="small" type="primary" @click="Submit()">
提交
</el-button>
</div>
<el-table
:data="dataList"
border
:stripe="true"
:header-cell-style="{
background: '#eef1f6',
color: '#606266',
height: '56px',
}"
:height="'80vh'"
v-loading="dataListLoading"
style="width: 100%;"
>
<el-table-column
v-for="item in tableProps"
:label="item.label"
:key="item.prop"
align="center"
>
<template slot-scope="scope">
<span v-if="scope.$index > 6">
<el-checkbox
v-if="item.fType === 2"
v-model="scope.row[item.prop]"
true-label="1"
false-label="0"
/>
<el-input
v-else
v-model="scope.row[item.prop]"
size="small"
clearable
:readonly="
item.label === '取样时间' || item.label === '样本号' || item.label === '批次号'
"
:placeholder="item.label"
/>
</span>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
featuresList: {
type: Array,
default: () => {
[];
},
},
workingProcedureName: {
type: String,
},
inspectionSheetId: {
type: String,
},
numberOfGroupedSamples: {
type: Number,
default: 1,
},
batchNum: {
type: String,
},
},
data() {
return {
dataListLoading: false,
dataList: [],
tableProps: [],
sampleNum: 1,
};
},
methods: {
init() {
this.dataList.splice(0, this.dataList.length);
this.dataList = [
{
sampleNumber: "工序",
},
{
sampleNumber: "特性类型",
},
{
sampleNumber: "规格下限",
},
{
sampleNumber: "规格上限",
},
{
sampleNumber: "抽样数量",
},
{
sampleNumber: "参数规格",
},
{
sampleNumber: "频率",
},
];
this.tableProps = [
{
prop: "sampleNumber",
label: "样本号",
},
{
prop: "sampleTime",
label: "取样时间",
},
{
prop: "batchNum",
label: "批次号",
},
];
this.featuresList.forEach((item) => {
let obj = {
prop: item.name,
label: item.name,
fType: item.type,
};
this.tableProps.push(obj);
this.dataList[0][item.name] = this.workingProcedureName;
this.dataList[1][item.name] = { 1: "计量型", 2: "计数型" }[item.type];
this.dataList[2][item.name] = item.lsl;
this.dataList[3][item.name] = item.usl;
this.dataList[4][item.name] = item.sampleSize;
this.dataList[5][item.name] = item.specifications;
this.dataList[6][item.name] = item.samplingFrequency;
});
this.getInfluxdb();
this.dataListLoading = false;
this.$nextTick(() => {});
},
getInfluxdb() {
this.$http
.post(
`/processInspection/inspectionSheet/getFluxParamList?inspectionSheetId=${this.inspectionSheetId}`
)
.then((res) => {
res.data.forEach((item) => {
item.sampleTime = this.formatDateTime(item.sampleTime);
// item.events.forEach((item1) => {
// item[item1.argName] = item1.argValue;
// });
Object.assign(item, JSON.parse(item.jsonData));
this.dataList.push(item);
});
this.dataList.concat(res.data);
})
.catch(() => {});
},
addSample() {
let arr = [];
for (let i = 1; i <= parseInt(this.numberOfGroupedSamples); i++) {
let sampleNum = "";
if (i < 10) {
sampleNum = this.getSampleNum("0" + i);
} else {
sampleNum = this.getSampleNum(i);
}
let obj = {
inspectionSheetId: this.inspectionSheetId,
workingProcedureName: this.workingProcedureName,
sampleNumber: sampleNum,
sampleTime: new Date(),
batchNum: this.batchNum,
events: [],
};
this.featuresList.forEach((item) => {
let obj1 = {
time: new Date(),
inspectionSheetId: this.inspectionSheetId,
sampleNumber: sampleNum,
transationId: "",
};
if (item.type === 1) {
obj1.argName = item.name;
obj1.argValue = "";
} else {
obj1.argName = item.name;
obj1.argValue = 1;
}
obj.events.push(obj1);
});
// obj.jsonData = JSON.stringify(obj.jsonData);
arr.push(obj);
}
this.$http
.post("/processInspection/inspectionSheet/saveFluxParamList2", arr)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$nextTick(() => {
this.$emit("refreshDataForm", this.inspectionSheetId);
});
})
.catch(() => {});
},
Submit() {
let arr = JSON.parse(JSON.stringify(this.dataList.slice(7)));
arr.forEach((item) => {
(item.workingProcedureName = this.workingProcedureName),
(item.sampleTime = new Date(item.sampleTime));
item.events=[]
this.featuresList.forEach((item1) => {
let obj1 = {
time: new Date(item.sampleTime),
inspectionSheetId: this.inspectionSheetId,
sampleNumber: item.sampleNumber,
transationId: "",
};
obj1.argName = item1.name;
obj1.argValue = item[item1.name];
item.events.push(obj1);
});
});
this.$http
.post("/processInspection/inspectionSheet/saveFluxParamList2", arr)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.init();
})
.catch(() => {});
},
getSampleNum(num) {
this.sampleNum = Math.ceil(this.dataList.slice(7).length / this.numberOfGroupedSamples) + 1;
return `00${this.sampleNum}${num}`;
},
formatDateTime(val) {
let date = "";
if (val) {
date = new Date(val);
} else {
date = new Date();
}
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? "0" + MM : MM;
let d = date.getDate();
d = d < 10 ? "0" + d : d;
let h = date.getHours();
h = h < 10 ? "0" + h : h;
let m = date.getMinutes();
m = m < 10 ? "0" + m : m;
let s = date.getSeconds();
s = s < 10 ? "0" + s : s;
return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
},
},
};
</script>

83
src/views/process-inspection/components/features-table.vue Normal file
View File

@@ -0,0 +1,83 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2022-12-09 08:59:32
* @Description:
-->
<template>
<el-table
:data="dataList"
:stripe="true"
:header-cell-style="{
background: '#eef1f6',
color: '#606266',
height: '56px',
}"
v-loading="dataListLoading"
style="width: 100%;"
>
<el-table-column type="index" header-align="center" align="center" label="序号" width="50">
</el-table-column>
<el-table-column prop="workingProcedureName" align="center" label="工序"> </el-table-column>
<el-table-column prop="name" align="center" label="特性"> </el-table-column>
<el-table-column prop="defectLevel" align="center" label="缺陷等级">
<template slot-scope="scope">
<span>{{
{ 1: '致命缺陷',2: '严重缺陷',3: '轻微缺陷' }[
scope.row.defectLevel
]
}}</span>
</template> </el-table-column>
<el-table-column prop="type" align="center" label="特性类型">
<template slot-scope="scope">
<span>{{
{ 1: "计量型", 2: "计数型"}[
scope.row.type
]
}}</span>
</template></el-table-column>
<el-table-column prop="measureToolName" align="center" label="量具"> </el-table-column>
<el-table-column prop="usl" align="center" label="USL"> </el-table-column>
<el-table-column prop="sl" align="center" label="SL"> </el-table-column>
<el-table-column prop="lsl" align="center" label="LSL"> </el-table-column>
<el-table-column prop="black1" align="center" label="记录数量"> </el-table-column>
<el-table-column prop="black2" align="center" label="最大值"> </el-table-column>
<el-table-column prop="black3" align="center" label="最小值"> </el-table-column>
<el-table-column prop="black4" align="center" label="均值"> </el-table-column>
<el-table-column prop="black5" align="center" label="检验结果"> </el-table-column>
<el-table-column prop="black6" align="center" label="缺陷数量"> </el-table-column>
</el-table>
</template>
<script>
export default {
props: {
featuresList: {
type: Array,
default: () => {
[];
},
},
workingProcedureName: {
type: String,
},
},
data() {
return {
dataListLoading: false,
dataList: [],
};
},
methods: {
init() {
this.featuresList.forEach((item) => {
item.workingProcedureName = this.workingProcedureName;
});
this.dataList = JSON.parse(JSON.stringify(this.featuresList));
this.dataListLoading = false;
this.$nextTick(() => {});
},
},
};
</script>

432
src/views/process-inspection/components/generalOperation-add.vue Normal file
View File

@@ -0,0 +1,432 @@
<!--
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2022-12-12 11:32:04
* @Description:
-->
<template>
<el-drawer :visible.sync="visible" size="90%" class="drawerClass" :before-close="handleClose">
<template slot="title">
<h3 style="margin:10px 20px">{{ !dataForm.id ? "登记" : "修改" }}</h3>
</template>
<el-collapse value="1" @change="handleChange">
<el-collapse-item name="1">
<template slot="title">
<h3 style="margin-left:20px">检验信息</h3>
</template>
<el-row :gutter="6">
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
:disabled="!dataForm.id ? false : true"
@keyup.enter.native="dataFormSubmit()"
label-width="100px"
>
<el-col :span="6">
<el-form-item label="检验站点" prop="inspectionSite">
<el-input v-model="dataForm.inspectionSite" placeholder="检验站点"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开单时间" prop="createTime">
<el-date-picker
v-model="dataForm.createTime"
type="datetime"
readonly
format="yyyy-MM-dd hh:mm:ss"
value-format="yyyy-MM-dd hh:mm:ss"
placeholder="选择日期时间"
:style="{ width: '100%' }"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="订单号" prop="orderNumber">
<el-input v-model="dataForm.orderNumber" placeholder="订单号"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="批次号" prop="batchNumber">
<el-input v-model="dataForm.batchNumber" placeholder="批次号"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="产品" prop="productId">
<el-select
v-model="dataForm.productId"
@change="getWorkingprocedureByProductId"
placeholder="请选择产品"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="item in optionArr.arr0"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检验阶段" prop="inspectionStage">
<el-select
v-model="dataForm.inspectionStage"
:style="{ width: '100%' }"
@change="$forceUpdate()"
clearable
placeholder="请选择检验阶段"
>
<el-option
v-for="item in inspectionStageArr"
:key="item.name"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="工序" prop="workingProcedureId">
<el-select
v-model="dataForm.workingProcedureId"
@change="$forceUpdate()"
placeholder="请选择工序"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="item in optionArr.arr4"
:key="item.workingProcedureId"
:label="item.workingProcedureName"
:value="item.workingProcedureId"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="机台号" prop="machineId">
<el-select
v-model="dataForm.machineId"
placeholder="请选择机台号"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="item in optionArr.arr1"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="分组样本数" prop="numberOfGroupedSamples">
<el-input
v-model="dataForm.numberOfGroupedSamples"
placeholder="分组样本数"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="样本大小" prop="numberOfSamples">
<el-input
v-model="dataForm.numberOfSamples"
placeholder="样本大小"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="缺陷数量" prop="numberOfDefects">
<el-input
v-model="dataForm.numberOfDefects"
placeholder="缺陷数量"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="不良数量" prop="defectiveQuantity">
<el-input
v-model="dataForm.defectiveQuantity"
placeholder="不良数量"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="班次" prop="shiftId">
<el-select
v-model="dataForm.shiftId"
placeholder="请选择班次"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="item in optionArr.arr2"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产人" prop="producer">
<el-select
:style="{ width: '100%' }"
v-model="dataForm.producer"
placeholder="请选择生产人"
>
<el-option
v-for="item in optionArr.arr3"
:key="item.id"
:label="item.realName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检验人" prop="inspector">
<el-select
:style="{ width: '100%' }"
v-model="dataForm.inspector"
placeholder="请选择检验人"
>
<el-option
v-for="item in optionArr.arr3"
:key="item.id"
:label="item.realName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-row v-if="!dataForm.id">
<span style="margin-left:20px">
<el-button size="medium" type="primary" @click="dataFormSubmit()">开单</el-button>
<el-button size="medium" @click="visible = false">关闭</el-button>
</span>
</el-row>
</el-collapse-item>
<el-collapse-item name="2" v-if="dataForm.id">
<template slot="title">
<h3 style="margin-left:20px">特性信息</h3>
</template>
<features-table
v-if="featuresTableVisible"
:features-list="featuresList"
:workingProcedureName="workingProcedureName"
ref="featuresTable"
></features-table>
</el-collapse-item>
</el-collapse>
<div v-if="dataForm.id">
<el-divider content-position="left"><h3 style="font-size:15px">详情</h3></el-divider>
<detail-table
v-loading="detailLoading"
:inspectionSheetId="dataForm.id"
:batchNum="dataForm.batchNumber"
:numberOfGroupedSamples="dataForm.numberOfGroupedSamples"
:features-list="featuresList"
:workingProcedureName="workingProcedureName"
ref="detailTable"
@refreshDataForm="init"
></detail-table>
</div>
</el-drawer>
</template>
<script>
import basicAdd from "@/mixins/basic-add";
import featuresTable from "./features-table";
import detailTable from "./detail-table";
export default {
mixins: [basicAdd],
props: {
optionArr: {
type: Object,
default: () => {
{
}
},
},
},
data() {
return {
urlOptions: {
infoURL: "/processInspection/inspectionSheet",
},
inspectionStageArr: [],
dataForm: {
id: "",
inspectionSite: "",
createTime: new Date(),
orderNumber: "",
batchNumber: "",
productId: "",
inspectionStage: "",
workingProcedureId: "",
machineId: "",
shiftId: "",
numberOfGroupedSamples: 0,
numberOfSamples: "",
numberOfDefects: "",
defectiveQuantity: "",
producer: "",
inspector: "",
},
featuresTableVisible: false,
featuresList: [],
workingProcedureName: "",
detailLoading: false,
setData: true,
dataRule: {
productId: [{ required: true, message: "产品不能为空", trigger: "change" }],
inspectionStage: [{ required: true, message: "检验阶段不能为空", trigger: "change" }],
workingProcedureId: [{ required: true, message: "工序不能为空", trigger: "change" }],
},
};
},
components: {
featuresTable,
detailTable,
},
methods: {
getWorkingprocedureByProductId(val) {
this.dataForm.inspectionStage = "";
this.dataForm.workingProcedureId = "";
this.getWorkingprocedureArr(val);
},
getWorkingprocedureArr(val) {
if (val) {
const obj = this.optionArr.arr0.find((item) => {
return item.id === val;
});
const obj1 = { 1: "进货检验", 2: "过程检验", 3: "成品检验", 4: "出货检验" };
const inspectionStage = obj.inspectionStage.split(",");
this.inspectionStageArr = [];
inspectionStage.forEach((item) => {
this.inspectionStageArr.push({
value: item,
name: obj1[item],
});
});
this.$http
.get(`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${val}`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$set(this.optionArr, "arr4", res.data);
if (this.dataForm.id) {
this.workingProcedureName = this.optionArr.arr4.find((item) => {
return item.workingProcedureId === this.dataForm.workingProcedureId;
}).workingProcedureName;
this.$nextTick(() => {
this.$refs.detailTable.init();
});
this.detailLoading = false;
}
})
.catch(() => {});
} else {
this.inspectionStageArr = [];
this.$set(this.optionArr, "arr4", []);
}
},
setDataForm() {
this.detailLoading = true;
const obj = {
inspectionStage: this.dataForm.inspectionStage,
productId: this.dataForm.productId,
workingProcedureId: this.dataForm.workingProcedureId,
};
this.$http
.post("/processInspection/inspectionSheet/getInspectionSheetFeaturesList", obj)
.then(({ data: res }) => {
if (res.code !== 0) {
this.featuresList = [];
return this.$message.error(res.msg);
}
this.featuresList = res.data;
})
.catch(() => {});
this.dataForm.inspectionStage = String(this.dataForm.inspectionStage);
this.getWorkingprocedureArr(this.dataForm.productId);
},
handleChange(val) {
if (val.includes("2")) {
this.featuresTableVisible = true;
this.$nextTick(() => {
this.$refs.featuresTable.init();
});
}
},
// 表单提交
dataFormSubmit() {
this.$refs["dataForm"].validate((valid) => {
if (!valid) {
return false;
}
this.$http[!this.dataForm.id ? "post" : "put"](
"/processInspection/inspectionSheet",
this.dataForm
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.init(res.data);
},
});
})
.catch(() => {});
});
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
this.inspectionStageArr = [];
this.$set(this.optionArr, "arr4", []);
done();
this.$emit("refreshDataList");
})
.catch((_) => {});
},
},
};
</script>
<style scoped>
.drawerClass >>> .el-drawer__header {
margin-bottom: 0;
padding: 0;
}
</style>

306
src/views/process-inspection/generalOperation.vue Normal file
View File

@@ -0,0 +1,306 @@
<!--
* @Author: zwq
* @Date: 2022-09-15 10:44:29
* @LastEditors: zwq
* @LastEditTime: 2022-12-09 11:16:58
* @Description:
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<el-row :gutter="6" style="background-color:#e6f7ff;margin:-20px;padding-top:10px;margin-bottom:0">
<el-form ref="dataForm" :model="dataForm" :rules="rules" size="small" label-width="80px">
<el-col :span="6">
<el-form-item label="检验时间" prop="time">
<el-date-picker
type="daterange"
v-model="time"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{ width: '100%' }"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator="-"
clearable
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检验站点" prop="inspectionSite">
<el-input
size="small"
v-model="dataForm.inspectionSite"
clearable
placeholder="请输入检验站点"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="产品" prop="productId">
<el-select
v-model="dataForm.productId"
@change="getWorkingprocedureByProductId"
placeholder="请选择产品"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr0"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="工序" prop="workingProcedureId">
<el-select
v-model="dataForm.workingProcedureId"
placeholder="请选择工序"
filterable
clearable
@change="$forceUpdate()"
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr4"
:key="index"
:label="item.workingProcedureName"
:value="item.workingProcedureId"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="机台号" prop="machineId">
<el-select
v-model="dataForm.machineId"
placeholder="请选择机台号"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr1"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="批次号" prop="batchNumber">
<el-input
size="small"
v-model="dataForm.batchNumber"
clearable
placeholder="请输入批次号"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检验单号" prop="id">
<el-input size="small" v-model="dataForm.id" clearable placeholder="请输入检验单号" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="订单号" prop="orderNumber">
<el-input
size="small"
v-model="dataForm.orderNumber"
clearable
placeholder="请输入订单号"
/>
</el-form-item>
</el-col>
<el-col :span="12" :offset="12">
<el-form-item style="float:right;padding-right:20px">
<el-button size="small" @click="getDataList()">
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
查询
</el-button>
<el-button size="small" type="primary" @click="addOrUpdateHandle()">
<svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
登记
</el-button>
<el-button size="small" type="primary" @click="exportHandle('通用作业')">
<svg class="icon-svg">
<use xlink:href="#导出"></use>
</svg>
导出
</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-table
:data="dataList"
:stripe="true"
:header-cell-style="{
background: '#eef1f6',
color: '#606266',
height: '56px',
}"
v-loading="dataListLoading"
style="width: 100%;"
>
<el-table-column prop="id" align="center" label="检验单号"> </el-table-column>
<el-table-column prop="batchNumber" align="center" label="批次号"> </el-table-column>
<el-table-column prop="inspectionStage" align="center" label="检验阶段">
<template slot-scope="scope">
<span>{{
{ 1: "进货检验", 2: "过程检验", 3: "成品检验", 4: "出货检验" }[
scope.row.inspectionStage
]
}}</span>
</template>
</el-table-column>
<el-table-column prop="productName" align="center" label="产品名称"> </el-table-column>
<el-table-column prop="machineName" align="center" label="机台"> </el-table-column>
<el-table-column prop="workingProcedureName" align="center" label="工序"> </el-table-column>
<el-table-column prop="createTime" align="center" label="检验时间"> </el-table-column>
<el-table-column prop="shiftName" align="center" label="班次"> </el-table-column>
<el-table-column prop="numberOfSamples" align="center" label="抽样数量"> </el-table-column>
<el-table-column prop="numberOfDefects" align="center" label="缺陷数量"> </el-table-column>
<el-table-column prop="defectiveQuantity" align="center" label="不良数量"> </el-table-column>
<el-table-column prop="remark" align="center" label="备注"> </el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
<el-tooltip class="item" effect="dark" content="修改" placement="top">
<svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-编辑"></use></svg>
</el-tooltip>
</el-button>
<el-button
type="text"
style="color:red"
size="small"
@click="deleteHandle(scope.row.id, scope.row.id)"
>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-删除"></use></svg>
</el-tooltip>
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
:optionArr="optionArr"
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</el-card>
</template>
<script>
import processPage from "@/mixins/process-page";
import AddOrUpdate from './components/generalOperation-add'
export default {
mixins: [processPage],
data() {
return {
urlOptions: {
getDataListURL: "/processInspection/inspectionSheet/page",
deleteURL: "/processInspection/inspectionSheet",
exportUrl: "/processInspection/inspectionSheet/export",
},
optionArrUrl: [
"/basic/product/page",
"/basic/machine/page",
"/basic/shift/page",
"/sys/user/page",
],
optionArr: {},
time: [],
rules: {},
};
},
components: {
AddOrUpdate,
},
created() {},
activated() {
this.getArr();
},
methods: {
getArr() {
this.optionArrUrl.forEach((item, index) => {
this.$http
.get(item, {
params: {
page: 1,
limit: 500,
},
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$set(this.optionArr, `arr${index}`, res.data.list);
})
.catch(() => {});
});
},
getWorkingprocedureByProductId(val) {
this.dataForm.workingProcedureId = ''
if (val) {
this.$http
.get(`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${val}`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$set(this.optionArr, "arr4", res.data);
})
.catch(() => {});
}else{
this.$set(this.optionArr, "arr4", []);
}
},
getDataList() {
this.dataListLoading = true;
this.$http
.get(this.urlOptions.getDataListURL, {
params: {
page: this.pageIndex,
limit: this.pageSize,
startTime: this.time && this.time.length > 0 ? this.time[0] : "",
endTime: this.time && this.time.length > 0 ? this.time[1] : "",
...this.dataForm,
},
})
.then(({ data: res }) => {
this.dataListLoading = false;
if (res.code !== 0) {
this.dataList = [];
this.totalPage = 0;
return this.$message.error(res.msg);
}
this.dataList = res.data.list;
this.totalPage = res.data.total;
})
.catch(() => {
this.dataListLoading = false;
});
},
},
};
</script>
<style></style>

255
src/views/process-inspection/query-form.vue Normal file
View File

@@ -0,0 +1,255 @@
<!--
* @Author: zwq
* @Date: 2022-09-15 10:44:29
* @LastEditors: zwq
* @LastEditTime: 2022-12-12 16:42:27
* @Description:
-->
<template>
<el-row :gutter="6" style="background-color:#e6f7ff;margin:-20px;padding-top:10px;margin-bottom:0">
<el-form ref="dataForm" :model="dataForm" :rules="rules" size="small" label-width="80px">
<el-col :span="6">
<el-form-item label="检验时间" prop="field101">
<el-date-picker
type="daterange"
v-model="dataForm.field101"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:style="{ width: '100%' }"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator="-"
clearable
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6" v-if="false">
<el-form-item label="工厂" prop="field102">
<el-select
v-model="dataForm.field102"
placeholder="请选择工厂"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in field102Options"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检验类型" prop="field103">
<el-select
v-model="dataForm.field103"
placeholder="请选择检验类型"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in field103Options"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="产品" prop="productId">
<el-select
v-model="dataForm.productId"
placeholder="请选择产品"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr0"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="工艺流程" prop="field105">
<el-select
v-model="dataForm.field105"
placeholder="请选择工艺流程"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr1"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="特性" prop="field106">
<el-select
v-model="dataForm.field106"
placeholder="请选择特性"
filterable
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in optionArr.arr2"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="样本大小" prop="field111">
<el-input-number
v-model="dataForm.field111"
placeholder="样本大小"
:step="1"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<el-button size="small" @click="getDataList()">
<svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
查询
</el-button>
<el-button size="small" type="primary" @click="rawData()">
<svg class="icon-svg"><use xlink:href="#历史记录"></use></svg>
原始数据
</el-button>
<el-button size="small" type="primary" @click="exportHandle()">
<svg class="icon-svg">
<use xlink:href="#导出"></use>
</svg>
导出
</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
</template>
<script>
export default {
props: {
pageName: {
type: String,
default: () => {
return "";
},
},
dataForm: {
type: Object,
default: () => {
return {};
},
},
},
data() {
return {
optionArrUrl: [
"/basic/product/page",
"/basic/workingProcedure/page",
],
optionArr: {},
rules: {
productId: [
{
required: true,
message: "请选择产品",
trigger: "change",
},
],
field106: [
{
required: true,
message: "请选择特性",
trigger: "change",
},
],
},
field103Options: [
{
label: "进货检验",
value: 1,
},
{
label: "过程检验",
value: 2,
},
{
label: "成品检验",
value: 3,
},
{
label: "出货检验",
value: 4,
},
],
};
},
created(){
},
methods: {
getArr(){
this.optionArrUrl.forEach((item, index) => {
this.$http
.get(item, {
params: {
page: 1,
limit: 500,
},
})
.then(({ data: res }) => {
if (res.code !== 0) {
this.$set(this.optionArr, `arr${index}`, []);
return this.$message.error(res.msg);
}
this.$set(this.optionArr, `arr${index}`, res.data.list);
})
.catch(() => {});
});
this.$http
.post("/processInspection/inspectionSheet/getInspectionSheetFeaturesList")
.then(({ data: res }) => {
if (res.code !== 0) {
this.$set(this.optionArr, 'arr2', []);
return this.$message.error(res.msg);
}
this.$set(this.optionArr, 'arr2', res.data);
})
.catch(() => {});
},
getDataList() {
this.$emit("getDataList");
},
rawData() {
this.$emit("rawData");
},
exportHandle() {
this.$emit("exportHandle", this.pageName);
},
},
};
</script>
<style></style>