新增毛高占比统计模块

src/api/calc/calcMaogao.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function GetMaoGao() {
+    return request({
+        url: `/api/formula/total`,
+        method: "get",
+        params: null
+    })
+}
+export function GetMaoGaoDetail(v) {
+    return request({
+        url: `/api/formula/detail/` + v,
+        method: "get",
+        params: null
+    })
+}

src/views/calc/calcMaogao/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div style="padding:10px" @click.stop="void(0)">
+      <div class="" style="text-align: center;top:2%;width: 100%;letter-spacing: 5px;color: #cdd2fb;font-size: 18px;">
+          <span style="position: relative;">
+              <el-button style="margin-left:10px" @click="impquery">刷新</el-button>
+              <el-button style="margin-left:10px" @click="impdata">导出</el-button>
+          </span>                
+      </div>
+      <div style="height: 700px;width: 100%;background-color: rgb(237 237 237 / 23%);margin-top: 10px;display: flex;">          
+          <div style="height: 700px;width: 30%;margin-left: 1%;">
+            <div class="table_caption" style="height: 30px;line-height: 30px;">汇总统计</div>
+            <el-table v-loading="loading" height="750px" :data="datalist">
+                  <el-table-column label="毛高" align="center" prop="height"></el-table-column>
+                  <el-table-column label="设备数量" align="center" prop="num"></el-table-column>
+                  <el-table-column label="占比" align="center" prop="percent"></el-table-column>
+                  <el-table-column label="明细" align="center">
+                    <template #default="scope">
+                      <el-button @click="getDetail(scope.row)">查看明细</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+          </div>
+          <div style="height: 700px;width: 68%;margin-left: 1%;">
+              <div class="table_caption" style="height: 30px;line-height: 30px;">毛高({{detailValue}})明细数据</div>
+              <el-table class="titletable" cellspacing="0" cellpadding="0" height="750px" width="800px" :data="detailDataList">
+                <el-table-column label="设备名" align="center" prop="device"></el-table-column>
+                <el-table-column label="机台号" align="center" prop="formula_data_2"></el-table-column>
+                <el-table-column label="毛高" align="center" prop="formula_data_15"></el-table-column>
+                <el-table-column label="配方号" align="center" prop="formula_data_1"></el-table-column>
+                <el-table-column label="米克重" align="center" prop="formula_data_3"></el-table-column>
+                <el-table-column label="送经量" align="center" >
+                  <el-table-column label="GB1" align="center" prop="formula_data_19"></el-table-column>
+                  <el-table-column label="GB2" align="center" prop="formula_data_20"></el-table-column>
+                  <el-table-column label="GB3" align="center" prop="formula_data_21"></el-table-column>
+                  <el-table-column label="GB4" align="center" prop="formula_data_22"></el-table-column>
+                  <el-table-column label="GB5" align="center" prop="formula_data_23"></el-table-column>
+                </el-table-column>
+                <el-table-column label="线纱规格D" align="center">
+                  <el-table-column label="L1、L5" align="center" prop="formula_data_4"></el-table-column>
+                  <el-table-column label="L2、L4" align="center" prop="formula_data_5"></el-table-column>
+                  <el-table-column label="L3" align="center" prop="formula_data_6"></el-table-column>
+                </el-table-column>
+              </el-table>
+            </div>
+      </div>
+  </div>
+</template>
+<script>
+  import { ref,onMounted,watch } from 'vue';
+  import {GetMaoGao,GetMaoGaoDetail} from "@/api/calc/calcMaogao";
+  import { ElDatePicker,ElMessage } from 'element-plus';
+  import 'element-plus/dist/index.css'; // 确保导入样式文件
+  import * as echarts from 'echarts';
+  export default {
+      props:{
+      },
+      components:{
+          
+      },
+      setup(props,{emit}){
+          const { proxy } = getCurrentInstance();
+          let datalist=ref([]);
+          let detailDataList=ref([]);
+          let detailValue=ref('');
+          const loading=ref(true);
+          function impquery(){
+              detailDataList.value=[];
+              datalist.value=[];
+              const msg = ElMessage({
+                      message:"正在加载数据",
+                      type:"info",
+                      duration:0, //一直显示
+              });
+              loading.value = true;
+              GetMaoGao().then((res)=>{
+                  loading.value = false;
+                  console.log(res)
+                  msg.close();
+                  if(res.code!=0){
+                      return;
+                  }
+                  datalist.value = res.data;
+              }).catch(res=>{
+                  ElMessage({
+                      message:"数据获取失败！",
+                      type:"error",
+                  });
+              });
+          }
+
+          function getDetail(v){
+              detailValue.value = v.height ;
+              detailDataList.value=[];
+              const msg = ElMessage({
+                      message:"正在加载数据",
+                      type:"info",
+                      duration:0, //一直显示
+              });
+              GetMaoGaoDetail(v.height).then((res)=>{
+                  console.log(res)
+                  msg.close();
+                  if(res.code!=0){
+                      return;
+                  }
+                  detailDataList.value = res.data;
+              }).catch(res=>{
+                  ElMessage({
+                      message:"数据获取失败！",
+                      type:"error",
+                  });
+              });
+          }
+
+          function impdata(){
+            if(detailValue.value==null ||detailValue.value==''){
+                ElMessage({
+                      message:"请选择需要导出的毛高明细！",
+                      type:"error",
+                });
+                return;
+            }
+            proxy.download('/api/formula/export/'+detailValue.value, {}, `毛高占比_${new Date().getTime()}.xlsx`)
+          }
+
+          onMounted(()=>{
+              impquery();
+          })
+
+          return{
+              datalist,
+              detailDataList,
+              detailValue,
+              impdata,
+              getDetail,
+              impquery,
+              loading,
+          }
+      }
+  }
+</script>