新增工艺分析模块

src/views/calc/gyComper/index.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="产线选择" style="width: 100%">
+      </el-form-item>      
+      <el-form-item >
+        <div v-for="item in lineList" style="width: 390px;margin-right: 10px;">
+          <el-checkbox v-model="item.checked" style="vertical-align: middle;" @change="changeLine"></el-checkbox>
+          <el-label style="margin-left: 2px;margin-right: 5px;vertical-align: middle;">{{ item.name }}</el-label>
+          <el-date-picker
+          style="width: 340px;"
+            v-model="item.daterangeTime"
+            value-format="YYYY-MM-DD HH"
+            date-format="YYYY-MM-DD" 
+            time-format="HH"  
+            format="YYYY-MM-DD HH" 
+            :value-format="'YYYY-MM-DD HH'"
+            type="datetimerange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </div>
+      </el-form-item>
+      <el-form-item style="width: 100%;text-align: center;margin-left: 40%;">
+        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <!--
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['calc:dayYhj:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    -->
+    <el-table v-loading="loading" :data="dayYhjList">
+      <el-table-column label="产线" align="center">
+        <template #default="scope">
+          <span>{{ scope.row.line+'#' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="生产时段" align="center" width="120">
+        <template #default="scope">
+          <span>{{ scope.row.start+' 到 '+scope.row.end }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="前整" align="center">
+        <el-table-column label="定型次数" align="center" prop="qz.dx" />
+        <el-table-column label="高梳次数" align="center" prop="qz.gs" />
+        <el-table-column label="双棍烫光次数" align="center" prop="qz.tg" />
+        <el-table-column label="双棍刷毛次数" align="center" prop="qz.sm" />
+        <el-table-column label="电" align="center" prop="qz.elect" width="50"/>
+        <el-table-column label="导热油" align="center" prop="qz.oil"  width="70"/>
+      </el-table-column>
+      <el-table-column label="印染" align="center">
+        <el-table-column label="印花次数" align="center" prop="yr.yh" />
+      </el-table-column>
+      <el-table-column label="后整" align="center">
+        <el-table-column label="定型次数" align="center" prop="hz.dx" />
+        <el-table-column label="刷毛次数" align="center" prop="hz.sm" />
+        <el-table-column label="高梳次数" align="center" prop="hz.sm" />
+        <el-table-column label="起毛次数" align="center" prop="hz.qm" />
+        <el-table-column label="双棍烫光" align="center" prop="hz.tg" />
+        <el-table-column label="烫剪" align="center" prop="hz.tj" />
+        <el-table-column label="电" align="center" prop="hz.elect"  width="50"/>
+        <el-table-column label="导热油" align="center" prop="hz.oil"  width="70"/>
+      </el-table-column>
+      <el-table-column label="产能" align="center" prop="length" />
+      <el-table-column label="总能耗" align="center">
+        <el-table-column label="电" align="center" prop="elect"  width="50"/>
+        <el-table-column label="导热油" align="center" prop="oil"  width="70"/>
+      </el-table-column>
+      <el-table-column label="工艺配置" align="center" width="140">
+        <template #default="scope">
+          <span @click="lookdetail(scope.row)"><a>查看</a></span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <el-dialog title="工艺配置详情" v-model="openDetail" width="1000px" append-to-body>
+      <el-form style="height:500px;width:100%;">
+        <el-table row-key="id" :data="detailList" :tree-props="{children:'children',hasChildren:'hasChildren'}" style="height:500px;width:100%;">
+          <el-table-column label="产线段/设备" align="left" prop="title" width="360">
+          </el-table-column>
+          <el-table-column label="参数名" align="center" prop="paraname"></el-table-column>
+          <el-table-column label="参数值" align="center">
+            <el-table-column label="工艺设定值" align="center" prop="mes" ></el-table-column>
+            <el-table-column label="实际设定值" align="center" prop="set" ></el-table-column>
+            <el-table-column label="实际值" align="left" prop="act" width="220">
+              <template #default="scope">
+                <div v-for="item in scope.row.act">{{ item.name==''? item.value : item.name+":"+item.value }}</div>
+              </template>
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelDlg">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+</template>
+
+<script setup name="DayYhj_gy">
+import { listDayYhj, getDayYhj, delDayYhj, addDayYhj, updateDayYhj } from "@/api/calc/dayYhj";
+import { ElLoading, ElMessage } from 'element-plus'
+const { proxy } = getCurrentInstance();
+
+const dayYhjList = ref([]);
+const detailList = ref([]);
+const openDetail = ref(false);
+const loading = ref(false);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const lineList=ref([
+  {"no":1,"name":"1#",daterangeTime:"",checked:false},
+  {"no":2,"name":"2#",daterangeTime:"",checked:false},
+  {"no":3,"name":"3#",daterangeTime:"",checked:false},
+  {"no":4,"name":"4#",daterangeTime:"",checked:false},
+  {"no":5,"name":"5#",daterangeTime:"",checked:false},
+  {"no":6,"name":"6#",daterangeTime:"",checked:false},
+  {"no":7,"name":"7#",daterangeTime:"",checked:false},
+  {"no":8,"name":"8#",daterangeTime:"",checked:false},
+]);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    time: null,
+    deviceId: null,
+    dayLength: null,
+    dayWeight: null,
+  },
+  rules: {
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+function changeLine(v){
+  if(v){
+    let tmp = lineList.value.filter(item=>item.checked && item.daterangeTime!="" && item.daterangeTime.length>1);
+    if(tmp.length==0) return;
+    for (let index = 0; index < lineList.value.length; index++) {
+      const element = lineList.value[index];
+      if(element.checked &&  (element.daterangeTime=="" ||  element.daterangeTime.length==0)){
+        element.daterangeTime = tmp[0].daterangeTime;
+      }
+    }
+  }else{
+    for (let index = 0; index < lineList.value.length; index++) {
+      const element = lineList.value[index];
+      if(!element.checked){
+        element.daterangeTime = "";
+      }
+    }
+  }
+}
+
+function lookdetail(item){
+  console.log(item)
+  let tmplst=[];
+  var pid="0";
+  var idIndex = 0;
+  var titlelist={"qz":"前整","hz":"后整","yr":"印染","dxPara":"定型机","gsPara":"高梳机","qmPara":"起毛机","smPara":"刷毛机","tgPara":"双棍烫光机","tjPara":"烫剪机","hgPara":"烘固机"};
+  for (let key in item) {
+    if(titlelist[key]==null) continue;
+    tmplst.push({
+      pid:pid,
+      icon:"el-icon-s-tools",
+      title:titlelist[key],
+      paraname:"",
+      children:[],
+      //hasChildren:true,
+      id:pid+"-"+(idIndex+1),
+      dataKey:key,
+    })
+    idIndex++;
+  }
+  for (let index = 0; index < tmplst.length; index++) {
+    const element = tmplst[index];
+    pid = element.id;
+    let level2 = [];
+    for(let key in  item[element.dataKey]){
+      if(titlelist[key]==null) continue;
+      //提取设备列表
+      var deviceList=[];
+      for (let i2 = 0; i2 < item[element.dataKey][key].length; i2++) {
+        const ele = item[element.dataKey][key][i2];
+        var paraList=[];
+        for (let pk in ele.para) {
+          if(pk=='device'||pk=='online') continue;
+          const ele3 = ele.para[pk];
+          paraList.push({
+            pid:pid+"-"+(idIndex+1)+"-"+i2,
+            icon:"el-icon-s-tools",
+            title:'',
+            paraname:pk,
+            mes:ele3.mes,
+            set:ele3.set,
+            act:ele3.act,
+            children:[],
+            //hasChildren:true,
+            id:pid+"-"+(idIndex+1)+"-"+i2+paraList.length,
+            datatype:"para"
+          })
+        }
+        deviceList.push({
+          pid:pid+"-"+(idIndex+1),
+          icon:"el-icon-s-tools",
+          title:ele.name,
+          paraname:paraList.length==0?'':paraList[0].paraname,
+          mes:paraList.length==0?'':paraList[0].mes,
+          set:paraList.length==0?'':paraList[0].set,
+          act:paraList.length==0?'':paraList[0].act,
+          children:paraList.length>0?paraList.slice(1):[],
+          //hasChildren:true,
+          id:pid+"-"+(idIndex+1)+"-"+i2,
+        })
+      }
+      level2.push({
+        pid:pid,
+        icon:"el-icon-s-tools",
+        title:titlelist[key],
+        paraname:"",
+        mes:"",
+        set:"",
+        act:"",
+        children:deviceList,
+        //hasChildren:true,
+        id:pid+"-"+(idIndex+1),
+        dataKey:key,
+      })
+      idIndex++;
+    }
+    tmplst[index].children = level2;
+  }
+  detailList.value = tmplst;
+  console.log(tmplst)
+  openDetail.value = true;
+}
+function cancelDlg(){
+  openDetail.value = false;
+}
+
+/** 查询印花机日统计数据列表 */
+function getList() {  
+  let v=[];
+  for (let index = 0; index < lineList.value.length; index++) {
+    const element = lineList.value[index];
+    if(element.checked){
+      if(element.daterangeTime=="" || element.daterangeTime.length==0){
+        loading.value = false;
+        ElMessage({
+                        message:"查询的"+element.name+"产线未设置时间段！",
+                        type:'error',
+                        customClass: 'custom-message'
+        });
+        return;
+      }
+      v.push({
+        line:element.no,
+        start:element.daterangeTime[0]+":00:00",
+        end:element.daterangeTime[1]+":00:00",
+      })
+    }
+  }
+  if(v.length==0){
+    ElMessage({
+                        message:"请选择查询的产线及时间段！",
+                        type:'error',
+                        customClass: 'custom-message'
+        });
+    return;
+  }
+  loading.value = true;
+  queryParams.value.params =v;
+  fetch(import.meta.env.VITE_APP_BASE_API+'/api/yr/compare/back', {
+              method: 'POST', // 指定请求方法为POST
+              headers: {
+                'Content-Type': 'application/json', // 设置请求头为JSON格式
+              },
+              body: JSON.stringify(queryParams.value.params) // 将数据转换为JSON字符串作为请求体
+            })
+            .then(response => response.json()) // 解析JSON格式的响应数据
+            .then(res => {
+                loading.value = false;
+                if(res.code!=200 || res.data==null){
+                    ElMessage({
+                        message:res.msg,
+                        type:'error',
+                        customClass: 'custom-message'
+                    });
+                    return;
+                }
+                for (let index = 0; index < res.data.length; index++) {
+                  const element = res.data[index];
+                  element.start = element.start.substring(5).replace(":00:00","")+'时';
+                  element.end = element.end.substring(5).replace(":00:00","")+'时';
+                }
+                dayYhjList.value = res.data;
+  }).catch((error) => {
+    console.error('请求失败:', error);
+  });
+}
+
+function ReplaceNull(v,defaultValue){
+  if(v==null) return defaultValue;
+  return v;
+}
+
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  for (let index = 0; index < lineList.value.length; index++) {
+    const element = lineList.value[index];
+    element.checked=false;
+    element.daterangeTime = "";
+  }
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('calc/dayYhj/export', {
+    ...queryParams.value
+  }, `dayYhj_${new Date().getTime()}.xlsx`)
+}
+
+</script>
+<style>
+.el-time-spinner__wrapper{
+    width: 100% !important;
+}
+
+</style>