|
@@ -1,397 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="container">
|
|
|
- <div class="infobox">
|
|
|
- <div class="header">
|
|
|
- <div class="item">
|
|
|
- <div class="text">产品型号:</div>
|
|
|
- <el-select v-model="value" size="small" placeholder="Select">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="text">工序名称:</div>
|
|
|
- <el-select v-model="value" size="small" placeholder="Select">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="text">控制参数:</div>
|
|
|
- <el-select v-model="value" size="small" placeholder="Select">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="body">
|
|
|
- <el-scrollbar>
|
|
|
- <div class="text">规格上限:1%</div>
|
|
|
- <div class="text">规格下限:-</div>
|
|
|
- <div class="text">计量单位:%</div>
|
|
|
- <div class="text">Xbar-UCL:0.3096</div>
|
|
|
- <div class="text">Xbar-LCL:0.0071</div>
|
|
|
- <div class="text">R-UCL:0.5543</div>
|
|
|
- <div class="text">R-LCL:0</div>
|
|
|
- <div class="text">规格上限:1%</div>
|
|
|
- <div class="text">规格下限:-</div>
|
|
|
- <div class="text">计量单位:%</div>
|
|
|
- <div class="text">Xbar-UCL:0.3096</div>
|
|
|
- <div class="text">Xbar-LCL:0.0071</div>
|
|
|
- <div class="text">R-UCL:0.5543</div>
|
|
|
- <div class="text">R-LCL:0</div>
|
|
|
- <div class="text">规格上限:1%</div>
|
|
|
- <div class="text">规格下限:-</div>
|
|
|
- <div class="text">计量单位:%</div>
|
|
|
- <div class="text">Xbar-UCL:0.3096</div>
|
|
|
- <div class="text">Xbar-LCL:0.0071</div>
|
|
|
- <div class="text">R-UCL:0.5543</div>
|
|
|
- <div class="text">R-LCL:0</div>
|
|
|
- <div class="text">规格上限:1%</div>
|
|
|
- <div class="text">规格下限:-</div>
|
|
|
- <div class="text">计量单位:%</div>
|
|
|
- <div class="text">Xbar-UCL:0.3096</div>
|
|
|
- <div class="text">Xbar-LCL:0.0071</div>
|
|
|
- <div class="text">R-UCL:0.5543</div>
|
|
|
- <div class="text">R-LCL:0</div>
|
|
|
- <div class="text">规格上限:1%</div>
|
|
|
- <div class="text">规格下限:-</div>
|
|
|
- <div class="text">计量单位:%</div>
|
|
|
- <div class="text">Xbar-UCL:0.3096</div>
|
|
|
- <div class="text">Xbar-LCL:0.0071</div>
|
|
|
- <div class="text">R-UCL:0.5543</div>
|
|
|
- <div class="text">R-LCL:0</div>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="databox">
|
|
|
- <div class="boxstitle">
|
|
|
- <div class="boxtitle">
|
|
|
- <div class="bg"></div>
|
|
|
- 手工录入
|
|
|
- </div>
|
|
|
- <div class="boxinfo">
|
|
|
- <div class="item">
|
|
|
- <div class="lable">组数:</div>
|
|
|
- <el-input placeholder="Please input" size="small" />
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="lable">样本数:</div>
|
|
|
- <el-input placeholder="Please input" size="small" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box">
|
|
|
- <div class="title">
|
|
|
- <div class="bg"></div>
|
|
|
- 样本数据录入
|
|
|
- </div>
|
|
|
- <div class="info">
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- :style="{ height: maxHeight + 'px' }"
|
|
|
- >
|
|
|
- <el-table-column prop="date" label="Date" width="180" />
|
|
|
- <el-table-column prop="name" label="Name" width="180" />
|
|
|
- <el-table-column prop="address" label="Address" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box">
|
|
|
- <div class="title">
|
|
|
- <div class="bg"></div>
|
|
|
- 控制图绘制
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- v-print="'#charts'"
|
|
|
- style="margin-left: 10px; height: 25px"
|
|
|
- >打 印</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="info">
|
|
|
- <div
|
|
|
- id="charts"
|
|
|
- :style="{ height: maxHeight + 'px', width: maxWidth + 'px' }"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import * as echarts from "echarts";
|
|
|
-const value = ref("");
|
|
|
-const options = [
|
|
|
- {
|
|
|
- value: "1",
|
|
|
- label: "调阻1",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "23",
|
|
|
- label: "调阻2",
|
|
|
- },
|
|
|
-];
|
|
|
-const maxHeight = ref(null);
|
|
|
-const maxWidth = ref(null);
|
|
|
-const charts = shallowRef(null);
|
|
|
-const tableData = [
|
|
|
- {
|
|
|
- date: "2016-05-03",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-02",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-04",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-01",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-02",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-04",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-01",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-02",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-04",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-01",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-02",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-04",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-01",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-02",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-04",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-01",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-02",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-04",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2016-05-01",
|
|
|
- name: "Tom",
|
|
|
- address: "No. 189, Grove St, Los Angeles",
|
|
|
- },
|
|
|
-];
|
|
|
-const chartsOption = ref({
|
|
|
- title: [
|
|
|
- {
|
|
|
- text: "调阻精度的Xbar-R控制图",
|
|
|
- left: "40%",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "样",
|
|
|
- left: "4%",
|
|
|
- top: "28%",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "本",
|
|
|
- left: "4%",
|
|
|
- top: "35%",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "均",
|
|
|
- left: "4%",
|
|
|
- top: "42%",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "值",
|
|
|
- left: "4%",
|
|
|
- top: "49%",
|
|
|
- },
|
|
|
- ],
|
|
|
- toolbox: {
|
|
|
- feature: {
|
|
|
- saveAsImage: {},
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- boundaryGap: false,
|
|
|
- data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
- },
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
- type: "line",
|
|
|
- endLabel: {
|
|
|
- show: true,
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
-});
|
|
|
-defineOptions({
|
|
|
- name: "Dashboard",
|
|
|
- inheritAttrs: false,
|
|
|
-});
|
|
|
-const setHeight = () => {
|
|
|
- maxHeight.value = document.querySelector(".info").clientHeight;
|
|
|
- maxWidth.value = document.querySelector(".info").clientWidth;
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- setHeight();
|
|
|
- nextTick(() => {
|
|
|
- charts.value = echarts.init(document.getElementById("charts"));
|
|
|
- charts.value.setOption(chartsOption.value);
|
|
|
- });
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- background-color: white;
|
|
|
- .infobox {
|
|
|
- width: 200px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .header {
|
|
|
- border-bottom: 2px solid #00000010;
|
|
|
- padding: 20px;
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- .text {
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 100%;
|
|
|
- display: inline-block;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .body {
|
|
|
- padding: 20px;
|
|
|
- flex: 1;
|
|
|
- height: calc(100% - 300px);
|
|
|
- }
|
|
|
- }
|
|
|
- .databox {
|
|
|
- flex: 1;
|
|
|
- border-left: 2px solid #00000010;
|
|
|
- height: 100%;
|
|
|
- .box {
|
|
|
- height: calc(50% - 40px);
|
|
|
- padding: 5px 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .title {
|
|
|
- height: 30px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .info {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- .boxstitle {
|
|
|
- height: 80px;
|
|
|
- padding: 5px 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .boxtitle {
|
|
|
- height: 30px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .boxinfo {
|
|
|
- display: flex;
|
|
|
- .item {
|
|
|
- width: 260px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 10px;
|
|
|
-
|
|
|
- .lable {
|
|
|
- margin-right: 5px;
|
|
|
- white-space: nowrap;
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|