Cold_offline_web/src/views/report/create/index.vue

<template>
  <div class="h-full flex flex-col gap-y-3">
    <n-page-header @back="$router.back">
      <template #title> 报告生成 </template>
      <template #extra>
        <n-space>
          <n-popconfirm @positive-click="putTemplateData('数据自检')">
            <template #trigger>
              <n-button type="primary">数据自检</n-button>
            </template>
            确认数据质检？
          </n-popconfirm>
          <n-popconfirm @positive-click="putTemplateData('生成报告')">
            <template #trigger>
              <n-button type="primary">生成报告</n-button>
            </template>
            确认生成报告？
          </n-popconfirm>
          <n-button type="primary" @click="showUploadModal">上传验证报告</n-button>
          <n-button type="primary" @click="setCopy">复制</n-button>
          <n-button type="primary" @click="setPaste">粘贴</n-button>
        </n-space>
      </template>
    </n-page-header> 
    <n-scrollbar :style="{ maxHeight: `${height - 150}px` }" trigger="none">
      <FormList ref="FormListRef" :form-list="formValue.formList" />
      <!-- <n-button @click="handleClick">button</n-button> -->
    </n-scrollbar>
  </div>
  <n-modal style="width: 60%" v-model:show="modal.showModal" :on-after-leave="afterLeave" :show-icon="false" preset="dialog" :mask-closable="false"
    :title="modal.title" @close="onCloseModal">
    <div>{{ formValue.pdf }}</div>
    <n-upload class="w-full" list-type="image-card" :default-upload="false" :max="1" @change="handleChange"
      v-if="modal.title === '上传验证'">
      上传文件
    </n-upload>
    
    <template v-else>
      <n-card embedded :bordered="false">
        <template #header>
          <div class="flex justify-center">
            <n-progress :indicator-placement="'inside'" :status="keyInfo.Code === 600
                ? 'default'
                : keyInfo.Code === 601
                  ? 'success'
                  : 'error'
              " type="line" gap-position="bottom" :percentage="keyInfo.Schedule" />
          </div>
        </template>
        <div class="pis" v-show="loadingFun==false" style="overflow:auto;height:400px;" ref="scrollbarRef">
          <div class="flex" v-for="(item, index) of items" :key="index"> <!-- items -->
            <n-badge class="mr-5" type="info" :value="index + 1" />
            <span>{{ item }}</span>
          </div>
        </div>
        <n-spin v-show="loadingFun==true" :show="true">
          <n-alert title="请等待..." type="success">
            服务器正在处理中，请等待...
          </n-alert>
        </n-spin>
      </n-card>
    </template>
    <template #action>
      <n-space v-if="modal.title === '上传验证'">
        <n-button @click="modal.showModal = false">取消</n-button>
        <n-button type="primary" @click="editTaskInfo" :disabled="formValue.pdf==''?true:false">{{btnTips}}</n-button>
      </n-space>
      <template v-else>
        <n-button v-if="modal.title === '生成报告'" type="primary" :disabled="keyInfo.Code !== 601" @click="handleDownload">下载文件</n-button>
        <n-button v-else type="primary" :disabled="keyInfo.Code !== 601" @click="handleDownload">查看文档</n-button>
      </template>
    </template>
  </n-modal>
</template>

<script setup>
import {
  putVerifyTemplateMapData,
  editTask,
  getTaskDataClassList,
  getVerifyTemplateMapDataList,
  generateReport,generateReportinspect,
  generateKey, TempCopy
} from '@/api';
import * as qiniu from 'qiniu-js';
import { getToken } from '@/utils/storage/sessionToken';
import { getFileToken } from '@/common';
import { useWindowSize } from '@vueuse/core';
import { NButton } from 'naive-ui';
import { nextTick, onBeforeUnmount, onUpdated, reactive, ref, watch } from 'vue';
import FormList from '@/components/FormList.vue';
import { useStore } from 'vuex';
const { height } = useWindowSize();
const message = useMessage();

const scrollbarRef = ref(null);
const loadingFun = ref(false)
const task = window.sessionStorage.getItem('task')
  ? JSON.parse(window.sessionStorage.getItem('task'))
  : {};


// 表单对象
const formValue = reactive({
  pdf: '',
  formList: [],
});

const handleClick = () => {
  console.log(formValue.formList);
};
const btnTips = ref('请选择')
const afterLeave = async ()=>{
 formValue.pdf = ''
 btnTips.value = '请选择'
}
// 查询数据
const queryData = reactive({
  T_source: 2,
  T_task_id: task.T_task_id,
  T_VerifyTemplate_id: task.T_VerifyTemplate_id,
});

//
const classList = ref([]);
const store = useStore()
//复制
const setCopy = () => {
  message.success("复制成功")
  store.commit('setTaskId', queryData.T_task_id)

}
//粘贴
const setPaste = async () => {
  console.log('粘贴', store.state.TaskId, queryData.T_task_id)
  if (store.state.TaskId == '') {
    message.error('请先复制模板，在进行粘贴哦')
    return
  }
  const resIt = await TempCopy({
    T_copy_task_id: store.state.TaskId,
    T_paste_task_id: queryData.T_task_id,
    T_source: 2
  })
  if (resIt.data.Code == 200) {
    message.success('粘贴成功')
    getTemplateList()
  }
}
// 模态框数据源
const modal = reactive({
  showModal: false,
  title: '',
});
const times = ref()
watch(()=>modal.showModal,(newData)=>{
  if(!newData){//model为false结束全部请求
      clearTimeout(times.value);
  }
  console.log('显示q',newData)
})
//
const handleChange = async ({ file }) => {
  const token = await getFileToken(file.name.split('.')[1]);
  btnTips.value = '上传中'
  const observable = qiniu.upload(
    file.file,
    file.name,
    token,
    {},
    {
      useCdnDomain: true,
    }
  );
  observable.subscribe({
    next: (result) => {
      // 主要用来展示进度
      console.warn(result);
    },
    error: () => {
      message.error('上传失败');
    },
    complete: (res) => {
      formValue.pdf = res.key;
      btnTips.value = '提交'
    },
  });
};
// 显示上传验证对话框
const showUploadModal = () => {
  modal.title = '上传验证';
  modal.showModal = true;
};

// 上传验证
const editTaskInfo = async () => {
  try {
    const { data: res } = await editTask({
      T_task_id: queryData.T_task_id,
      T_pdf2: formValue.pdf,
    });
    if (res.Code === 200) {
      message.success(res.Msg);
      modal.showModal = false;
    }
  } catch (e) {
    console.log(e);
  }
};

const obsData = reactive({
  obj: {}
})

// 验证报告生成 报告
const generateReportInfo = async (obj) => {
  obsData.obj = obj
  console.log(obj)
  if(modal.title=='生成报告'){
    const { data: res } = await generateReport({
      T_task_id: task.T_task_id,
      T_VerifyTemplate_id: task.T_VerifyTemplate_id,
      ...obj,
    })
  
    if (res.Code === 200) {
      loadingFun.value = false
      generateKeyInfo(res.Data);
    } else if (res.Code == 501) {
      loadingFun.value = true
      times.value = setTimeout(() => {
        generateReportInfo(obsData.obj);
      }, 1000);
    } else {
      loadingFun.value = true
      clearTimeout(times.value);
    }
  }else{
    const { data: res } = await generateReportinspect({
      T_task_id: task.T_task_id,
      T_VerifyTemplate_id: task.T_VerifyTemplate_id,
      ...obj,
    })
    if (res.Code === 200) {
      loadingFun.value = false
      generateKeyInfo(res.Data);
    } else if (res.Code == 501) {
      loadingFun.value = true
      times.value = setTimeout(() => {
        generateReportInfo(obsData.obj);
      }, 1000);
    } else {
      loadingFun.value = true
      clearTimeout(times.value);
    }
  }
};

let timer = 0;
const keyInfo = ref({});
const items = computed(() => {
  if (keyInfo.value.Item) {
    nextTick(() => {
      scrollbarRef.value.scrollTop = scrollbarRef.value.scrollHeight
    })
    return keyInfo.value.Item.split('\n').filter((item) => item)
  } else {
    return [];
  }



});


// 验证报告生成 获取生成结果
const generateKeyInfo = async (key) => {
  const { data: res } = await generateKey({
    key,
  }).catch(function (error) {
    console.log('报错',error)
    generateKeyInfo(key);
  })
  if (res.Code === 600) {
    timer = setTimeout(() => {
      generateKeyInfo(key);
    }, 3000);
  } else {
    console.log('其他',res)
    if(res.Schedule==100){
      message.success('生成成功')
    }
    // clearTimeout(timer);
  }
  keyInfo.value = res;
};

// 关闭对话框时触发
const onCloseModal = () => {
  keyInfo.value = {};
  clearTimeout(timer);
};

// 下载文件
const handleDownload = () => {
  if (modal.title=='生成报告') {
    window.open(keyInfo.value.Data);
  } else {
    const a = document.createElement('a');  
    a.href = keyInfo.value.Data;  
    a.target = '_blank';  
    a.click();  
  }
};
// 提交生成报告
const putTemplateData = async (titles) => {
    let {picker1,picker2,...objs} = FormListRef.value.person
    await editTask(objs);//提交验证设备数据时间范围，绑定设备数据时间范围
  try {
    const arr = toRaw(formValue.formList);
    //  return
    const VerifyTemplateMapData = arr.map((item, i) => {
      if (item.T_label === 3) {
        return {
          T_VerifyTemplateMap_id: item.T_VerifyTemplateMap_id,
          T_value: item.T_value.length != 0 ? item.T_value.join('|') : '',
          T_source: item.T_source,
          T_flow_sort: item.T_flow_sort,
          T_max_time: item.T_max_time,
          T_min_time: item.T_min_time,
        };
      } else if (item.T_label === 9) {
        // console.log('等于9',item.T_value,item.T_label,i)
        return {
          T_VerifyTemplateMap_id: item.T_VerifyTemplateMap_id,
          T_value: item.T_value != null ? item.T_value.join('|') : '',
          T_source: item.T_source,
          T_flow_sort: item.T_flow_sort,
          T_max_time: item.T_max_time,
          T_min_time: item.T_min_time,
        };
      } else if (item.T_label === 12) {
        // console.log('等于12',item.T_value,item.T_label,i)
        if (item.T_value[0] == null && item.T_value[1] == null) {
          return {
            T_VerifyTemplateMap_id: item.T_VerifyTemplateMap_id,
            T_value: '',
            T_source: item.T_source,
            T_flow_sort: item.T_flow_sort,
            T_max_time: item.T_max_time,
            T_min_time: item.T_min_time,
          };
        } else {
          if (item.T_value[0] != null) {
            return {
              T_VerifyTemplateMap_id: item.T_VerifyTemplateMap_id,
              T_value: `${item.T_value[0]}/${item.T_value[1]}`,
              T_source: item.T_source,
              T_flow_sort: item.T_flow_sort,
              T_max_time: item.T_max_time,
              T_min_time: item.T_min_time,
            };
          } else {
            return {
              T_VerifyTemplateMap_id: item.T_VerifyTemplateMap_id,
              T_value: `/${item.T_value[1]}`,
              T_source: item.T_source,
              T_flow_sort: item.T_flow_sort,
              T_max_time: item.T_max_time,
              T_min_time: item.T_min_time,
            };
          }

        }
      } else if (item.T_label === 13) {
        // console.log('等于13',item.T_value,item.T_label,i)
        if (item.T_value[0] == null && item.T_value[1] == null) {
          return {
            T_VerifyTemplateMap_id: item.T_VerifyTemplateMap_id,
            T_value: '',
            T_source: item.T_source,
            T_flow_sort: item.T_flow_sort,
            T_max_time: item.T_max_time,
            T_min_time: item.T_min_time,
          };
        } else {
          if (item.T_value[0] != null) {
            return {
              T_VerifyTemplateMap_id: item.T_VerifyTemplateMap_id,
              T_value: `${item.T_value[0].join('|')}/${item.T_value[1]}`,
              T_source: item.T_source,
              T_flow_sort: item.T_flow_sort,
              T_max_time: item.T_max_time,
              T_min_time: item.T_min_time,
            }
          } else {
            return {
              T_VerifyTemplateMap_id: item.T_VerifyTemplateMap_id,
              T_value: `/${item.T_value[1]}`,
              T_source: item.T_source,
              T_flow_sort: item.T_flow_sort,
              T_max_time: item.T_max_time,
              T_min_time: item.T_min_time,
            }
          }

        }
      } else {
        // console.log('等于其他',item.T_value,item.T_label,i)
        return {
          T_VerifyTemplateMap_id: item.T_VerifyTemplateMap_id,
          T_value: item.T_value != null ? item.T_value + '' : '',
          T_source: item.T_source,
          T_flow_sort: item.T_flow_sort,
          T_max_time: item.T_max_time,
          T_min_time: item.T_min_time,
        };
      }
    });
    // console.log('提交参数',VerifyTemplateMapData)
    // return
    const token = getToken();
    const { data: res } = await putVerifyTemplateMapData({
      User_tokey: token,
      T_source: queryData.T_source,
      T_task_id: queryData.T_task_id,
      T_VerifyTemplate_id: queryData.T_VerifyTemplate_id,
      VerifyTemplateMapData,
    });
    console.log('sdsd', res.Code)
    const obj = {};
    if (res.Code == 200) {
      for (let i of arr) {
        // console.log('打印arr',i)   
        if (i.T_label === 3 || i.T_label === 9) {
          obj[i.T_name] = i.T_value != null ? i.T_value.join('|') : '';
        } else if (i.T_label === 12) {
          console.log('打印12', i.T_value)
          if (i.T_value[0] == null && i.T_value[1] == '') {
            console.log('12', i.T_value)
            obj[i.T_name] = ''
          } else {
            if (i.T_value[0] == null && i.T_value[1] != null) {
              obj[i.T_name] = '' + '/' + i.T_value[1]
            } else if (i.T_value[0] != null && i.T_value[1] == null) {
              obj[i.T_name] = i.T_value[0] + '/' + ''
            } else {
              obj[i.T_name] = i.T_value[0] + '/' + i.T_value[1]
            }
            console.log('打印arr22222', obj[i.T_name])
          }
        } else if (i.T_label === 13) {
          console.log('等于时间', i.T_value[0] != null, i.T_value[1] != null)
          if (i.T_value[0] != null && i.T_value[1] != null) {//两个都有值
            obj[i.T_name] = `${i.T_value[0].join('|') + '/' + i.T_value[1]}`;
          } else if (i.T_value[0] != null && i.T_value[1] == null) {//选择了时间-没文本
            obj[i.T_name] = `${i.T_value[0].join('|') + '/'}`;
          } else if (i.T_value[0] == null && i.T_value[1] != null) {
            obj[i.T_name] = `${'/' + i.T_value[1]}`;
          } else {//都没选
            obj[i.T_name] = ''
          }
        } else {
          obj[i.T_name] = i.T_value;
        }
      }
      modal.title = titles;
      modal.showModal = true;
      // obsData = obj
      // setInterval(() => {
      //   generateReportInfo(obj);
      // }, 1000);
      generateReportInfo(obj);
    }
  } catch (e) {
    console.log(e);
  }
};
// 获取设备列表
const getClassList = async () => {
  try {
    const { data: res } = await getTaskDataClassList({
      T_task_id: queryData.T_task_id,
    });
    classList.value = res.Data || [];
  } catch (e) {
    console.log(e);
  }
};

const FormListRef = ref()

// 获取模板标签数据（列表）
const getTemplateList = async () => {
  try {
    const { data: res } = await getVerifyTemplateMapDataList(queryData);
    let b = res.Data;

    b.forEach(item => {
      if (item.T_label === 3) {
        if (item.T_value == '' || item.T_value == null) {
          item.T_value = []
        } else {
          item.T_value = item.T_value.split('|')
          item.T_value.push('123EFCF') 
        }
      } else if (item.T_label == 9) {
        if (item.T_value == '' || item.T_value == null) {
          item.T_value = null
        } else {
          item.T_value = item.T_value.split('|')
        }
      } else if (item.T_label === 12) {
        if (item.T_value == '' || item.T_value == null) {
          item.T_value = [null, null]
        } else {
          if (item.T_value.split('/')[0] == "") {
            item.T_value = [null, item.T_value.split('/')[1]]
          } else {
            item.T_value = [item.T_value.split('/')[0], item.T_value.split('/')[1]]
          }

        }
      } else if (item.T_label === 13) {
        if (item.T_value == '' || item.T_value == null) {
          item.T_value = [null, null]
        } else {
          if (item.T_value.split('/')[0] == "") {//前面时间区间没选
            item.T_value = [null, item.T_value.split('/')[1]]
          } else {//前面时间区间已经选
            item.T_value = [item.T_value.split('/')[0].split('|'), item.T_value.split('/')[1]]
          }
        }
      } else {
        item.T_value = item.T_value ? item.T_value : null;
      }
    });
    formValue.formList = filterFun(b)
    // console.log('999999999999999',  formValue.formList)
    
  } catch (e) {
    console.log(e);
  }
};

const filterFun = (arrs)=>{
    for (const key of arrs) {
        // console.log('循环33',key,FormListRef.value.classList)
        if(key.T_label==3){
            // console.log('循环3',[...key.T_value])
            key.T_value =  key.T_value.filter(item => FormListRef.value.classList.some(obj => obj.T_sn === item))
        }
        if(key.T_label==4){
            // console.log('循环4',key)
            let found = FormListRef.value.classList.some(item => item.T_sn === key.T_value);  
            if(!found) key.T_value = ''
        }
    }
    return arrs
}

onBeforeUnmount(() => {
  // 取消订阅
  clearTimeout(timer);
});

// getClassList();
getTemplateList();
</script>

<style scoped></style>