<!-- * @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>