feature/分析页面添加

package.json

@@ -65,6 +65,7 @@
     "vue-pdf-embed": "^2.0.2",
     "vue-router": "^4.3.0",
     "vue3-pdfjs": "^0.1.6",
+    "vue3-print-nb": "^0.1.4",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/main.ts

@@ -4,6 +4,7 @@ import router from "@/router";
 import { setupStore } from "@/store";
 import { setupDirective } from "@/directive";
 import { setupElIcons, setupI18n, setupPermission } from "@/plugins";
+import print from "vue3-print-nb";
 
 // 本地SVG图标
 import "virtual:svg-icons-register";
@@ -31,4 +32,4 @@ setupPermission();
 
 setupEleAvue(app);
 
-app.use(router).mount("#app");
+app.use(router).use(print).mount("#app");

src/views/analysis/process/index.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="container">
+    <div class="infobox">
+      <div class="header">
+        <div class="text">工序名称：</div>
+        <el-select v-model="value" placeholder="Select">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="body">
+        <div class="text">规格上限：-</div>
+        <div class="text">规格下限：1.33</div>
+        <div class="text">计量单位：%</div>
+      </div>
+    </div>
+    <div class="databox">
+      <div class="box">
+        <div class="title">
+          <div class="bg"></div>
+          样本数据录入
+        </div>
+        <div class="tableTitle">
+          调阻精度一致性检测表
+          <span style="float: right; right: 30px">2024年</span>
+        </div>
+        <div class="info">
+          <el-table
+            :data="tableData"
+            border
+            :style="{ height: maxHeight - 120 + '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 class="illustrate">
+          <div class="text">
+            1)
+            Cpk值为表征调阻精度一致性的参数，通过相应的软件计算得出，调阻精度是否符合要求得判据：Cpk值≥1.33。
+          </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>
+.text {
+  font-size: 15px;
+  margin-bottom: 20px;
+  font-weight: 100;
+}
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: white;
+  .infobox {
+    width: 200px;
+
+    .header {
+      height: 120px;
+      border-bottom: 2px solid #00000010;
+      padding: 20px;
+    }
+    .body {
+      padding: 20px;
+    }
+  }
+  .databox {
+    flex: 1;
+    border-left: 2px solid #00000010;
+    .box {
+      height: 100%;
+      padding: 5px 20px;
+      display: flex;
+      flex-direction: column;
+      .illustrate {
+        padding: 20px 60px;
+      }
+      .tableTitle {
+        text-align: center;
+        margin: 10px 0;
+        padding-right: 40px;
+      }
+      .title {
+        height: 30px;
+        display: flex;
+        align-items: center;
+        .bg {
+          width: 8px;
+          height: 20px;
+          background-color: blue;
+          margin-right: 5px;
+        }
+      }
+      .info {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>

src/views/analysis/spc/index.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="container">
+    <div class="infobox">
+      <div class="header">
+        <div class="text">工序名称：</div>
+        <el-select v-model="value" placeholder="Select">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="body">
+        <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>
+    </div>
+    <div class="databox">
+      <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>
+.text {
+  font-size: 15px;
+  margin-bottom: 20px;
+  font-weight: 100;
+}
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: white;
+  .infobox {
+    width: 200px;
+
+    .header {
+      height: 120px;
+      border-bottom: 2px solid #00000010;
+      padding: 20px;
+    }
+    .body {
+      padding: 20px;
+    }
+  }
+  .databox {
+    flex: 1;
+    border-left: 2px solid #00000010;
+    .box {
+      height: 50%;
+      padding: 5px 20px;
+      display: flex;
+      flex-direction: column;
+      .title {
+        height: 30px;
+        display: flex;
+        align-items: center;
+        .bg {
+          width: 8px;
+          height: 20px;
+          background-color: blue;
+          margin-right: 5px;
+        }
+      }
+      .info {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>