233 lines
6.7 KiB
Vue
233 lines
6.7 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2022-09-15 10:22:12
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2023-01-09 14:18:18
|
|
* @Description: 均值极差控制图
|
|
-->
|
|
<template>
|
|
<el-card shadow="never" class="aui-card--fill">
|
|
<query-form
|
|
ref="queryForm"
|
|
:f-type="1"
|
|
:page-name="'均值极差控制图'"
|
|
:data-form="dataForm"
|
|
:showRaw="chartVisible"
|
|
@getDataList="getDataList"
|
|
@rawData="rawData"
|
|
@exportHandle="exportHandle"
|
|
/>
|
|
<el-row :gutter="6" v-if="chartVisible">
|
|
<el-col :span="19">
|
|
<chart-line
|
|
v-loading="loading"
|
|
element-loading-text="拼命加载中"
|
|
element-loading-spinner="el-icon-loading"
|
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
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-row :gutter="6" v-else>
|
|
<el-empty description="无数据"></el-empty>
|
|
</el-row>
|
|
<!-- 原始数据 -->
|
|
<raw-data
|
|
:lineIndex="0"
|
|
:dataList="dataList.mrGraphEntity.list"
|
|
v-if="rawDataVisible"
|
|
ref="rawDataRef"
|
|
></raw-data>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import queryForm from "../query-form";
|
|
import processPage from "@/mixins/process-page";
|
|
import chartLine from "../charts/echart-2line.vue";
|
|
import rawData from "../components/rawData";
|
|
export default {
|
|
mixins: [processPage],
|
|
data() {
|
|
return {
|
|
dataForm: {},
|
|
loading: true,
|
|
urlOptions: {
|
|
exportUrl: "/basic/unit/export",
|
|
},
|
|
chartVisible: false,
|
|
rawDataVisible: false,
|
|
chartTitle: "均值极差控制图",
|
|
yName1: "均值",
|
|
yName2: "极差",
|
|
rightList: [],
|
|
waring: [],
|
|
};
|
|
},
|
|
components: {
|
|
queryForm,
|
|
chartLine,
|
|
rawData,
|
|
},
|
|
created() {
|
|
this.$nextTick(() => {
|
|
this.$refs.queryForm.getArr();
|
|
});
|
|
},
|
|
methods: {
|
|
// 获取数据列表
|
|
getDataList() {
|
|
this.$refs.queryForm.$refs["dataForm"].validate((valid) => {
|
|
if (!valid) {
|
|
return false;
|
|
}
|
|
this.loading = true;
|
|
this.$http
|
|
.post("/processInspection/XbarRGraph", {
|
|
...this.dataForm,
|
|
})
|
|
.then(({ data: res }) => {
|
|
this.dataListLoading = false;
|
|
if (res.code !== 0) {
|
|
this.dataList = [];
|
|
this.rightList = [];
|
|
this.loading = false;
|
|
return this.$message.error(res.msg);
|
|
}
|
|
this.loading = false;
|
|
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,
|
|
// });
|
|
if (res.data.sl) {
|
|
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,
|
|
// });
|
|
if (res.data.standardDiviation) {
|
|
Object.keys(res.data.standardDiviation).map((key) => {
|
|
this.rightList.push({
|
|
name: key,
|
|
value: res.data.standardDiviation[key],
|
|
});
|
|
});
|
|
}
|
|
if (res.data.processCapability) {
|
|
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],
|
|
});
|
|
}
|
|
});
|
|
}
|
|
if (res.data.mrGraphEntity) {
|
|
this.chartVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.chartRef.initChartLine();
|
|
});
|
|
} else {
|
|
this.chartVisible = false;
|
|
this.$message({
|
|
message: "没有发现数据",
|
|
type: "warning",
|
|
});
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
});
|
|
},
|
|
rawData() {
|
|
this.rawDataVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.rawDataRef.init();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.rightDiv {
|
|
padding: 8px 16px;
|
|
font-size: 16px;
|
|
background-color: #fdfdfd;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|