scienceexperimentweb.git

<template>
  <div class="home-container">
    <div style="height: 100%">
      <el-row class="homeCard">
        <div class="basic-line">
          <span>评估计划名称：</span>
          <el-input v-model="identifyState.searchQuery.assessPlanName" clearable filterable class="input-box"
                    placeholder="评估计划名称">
          </el-input>
        </div>
        <div class="basic-line">
          <span>实验名称：</span>
          <el-input v-model="identifyState.searchQuery.experimentName" clearable filterable class="input-box"
                    placeholder="实验名称">
          </el-input>
        </div>
        <div style="padding-bottom: 10px">
          <el-button type="primary" @click="getIdentifyData">查询</el-button>
          <el-button plain @click="reset">重置</el-button>
          <vue3-json-excel
              :json-data="identifyState.allData"
              :fields="fields"
              default-value="--"
              name="风险辨识记录.xls"
              v-if="identifyState.isAdmin"
          >
            <el-button plain :icon="Download" style="margin-left: 12px">导出</el-button>
          </vue3-json-excel>
        </div>
      </el-row>
      <div class="homeCard">
        <div class="main-card">
          <el-row class="cardTop">
            <el-col :span="12" class="mainCardBtn">
              <!--                            <el-button type="primary" :icon="Plus" size="default" @click="openIdentifyQuery('新增', {})">新增</el-button>-->
              <!--                            <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>-->
            </el-col>
            <!--                        <el-button type="primary" :icon="Refresh" size="default" />-->
          </el-row>
          <el-table ref="multipleTableRef" :data="identifyState.identifyData" style="width: 100%"
                    height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
            <el-table-column type="index" label="序号"/>
            <el-table-column prop="assessPlanName" label="评估计划名称"/>
            <el-table-column prop="identificationMethod" label="辨识方法" show-overflow-tooltip>
              <template #default="scope">
                <span>{{ `${identifyState.identificationMethodList.find(item => item.id === scope.row.identificationMethod)?.name}` }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="planUserName" label="计划负责人"/>
            <el-table-column prop="identificationUser" label="辨识专家"/>
            <el-table-column prop="evaluateUser" label="评价专家"/>
            <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="updateTime" label="最后修改时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="planExecStatus" label="执行状态" show-overflow-tooltip>
              <template #default="scope">
                <div>
                  <div v-if="scope.row.planExecStatus === 1">
                    <el-tag :type="'info'">
                      {{ '未开始' }}
                    </el-tag>
                  </div>
                  <div v-if="scope.row.planExecStatus === 2">
                    <el-tag :type="'info'">
                      {{ '辨识阶段' }}
                    </el-tag>
                  </div>
                  <div v-if="scope.row.planExecStatus === 3">
                    <el-tag :type="'primary'">
                      {{ '评价阶段' }}
                    </el-tag>
                  </div>
                  <div v-if="scope.row.planExecStatus === 4">
                    <el-tag :type="'success'">
                      {{ '完成阶段' }}
                    </el-tag>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template #default="scope">
                <el-button size="small" text type="primary"
                           v-if="scope.row.planExecStatus === 2 && scope.row.identityUsers?.find(i=>i.identificationUserId== identifyState.user)"
                           @click="accessIdentify(scope.row)">提交
                </el-button>
                <el-button size="small" text type="primary"
                           v-if="scope.row.planExecStatus === 3 || scope.row.planExecStatus === 4" :icon="View"
                           @click="openIdentifyQuery('查看', scope.row)">查看
                </el-button>
                <el-button size="small" text type="primary"
                           v-if="scope.row.planExecStatus === 2 && scope.row.identityUsers?.find(i=>i.identificationUserId== identifyState.user)"
                           :icon="Edit" @click="openIdentifyQuery('辨识', scope.row)">辨识
                </el-button>
                <!--                                <el-button size="small" text type="primary" v-if="scope.row.planExecStatus === 2" :icon="Edit" @click="openIdentifyQuery('编辑', scope.row)">编辑</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBtn">
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5"
                           :page-sizes="[10, 20, 30]" v-model:current-page="identifyState.searchQuery.pageIndex"
                           background v-model:page-size="identifyState.searchQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="identifyState.total"
                           class="page-position"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <identify-query-dialog ref="identifyQueryDialogRef" @refresh="getIdentifyData"></identify-query-dialog>
  </div>
</template>
 
<script setup lang="ts">
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import {identifyApi} from "/@/api/analyse/identify";
import {ElMessage, ElMessageBox} from "element-plus";
import {Edit, View, Plus, Delete, Download} from '@element-plus/icons-vue';
import {planApi} from "/@/api/analyse/plan";
import {userApi} from "/@/api/systemManage/user";
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";
 
const IdentifyQueryDialog = defineAsyncComponent(() => import('./components/identifyQuery.vue'));
 
const identifyQueryDialogRef = ref();
const userInfo = useUserInfo();
const {userInfos} = storeToRefs(userInfo);
const identifyState = reactive<IdentifyStateType>({
  identifyData: [],
  allData: [],
  isAdmin: false,
  user: null,
  searchQuery: {
    pageIndex: 1,
    pageSize: 10,
    assessPlanName: '',
    experimentName: '',
    tag: 1,
  },
  total: 0,
  planList: [],
  personList: [],
  identificationMethodList: [
    {id: 1, name: 'PHA'},
    {id: 2, name: 'JHA'},
    {id: 3, name: 'SCL'},
    {id: 4, name: 'HAZOP'},
    {id: 5, name: '类比法'},
  ],
  evaluateMethodList: [
    {id: 1, name: 'LEC'},
    {id: 2, name: 'LS'},
    {id: 3, name: 'MES'},
    {id: 4, name: 'RS'},
  ]
  // deviceUnitList: [
  //     {id:1, name: '台'},
  //     {id:2, name: '个'},
  //     {id:3, name: '件'}
  // ]
});
 
// const fields = ref({
//   '评估计划名称': {
//     field: 'assessPlanName',
//     callback: (value:string) => {
//       return value+`&nbsp;`
//     }
//   },
//   '辨识方法': 'methodName',
//   '计划负责人': 'planUserName',
//   '辨识专家': 'identificationUser',
//   '评价专家': 'evaluateUser',
//   '创建时间': 'createTime',
//   '创建人': 'createByUserName',
//   '最后修改时间': 'updateTime',
//   '最后修改人': 'updateByUserName',
//   '执行状态': 'statusName',
//   '风险评价分析单元': {
//     callback: (value) => {
//       if(!value.factorQueryDTOList || value.factorQueryDTOList.length == 0){
//         return '无'
//       }else{
//         let name = ''
//         for(let [index,val] of value.factorQueryDTOList.entries()){
//           if(value.identificationMethod == 1){
//             name = name + `${index + 1}、检查项目：${val.phaCheckItem},存在风险因素：${val.phaRiskFactor},可能存在后果：${val.phaResult},辨识结果：${val.result== 1?'有风险':val.result == 2?'无风险':'--'}\n\n`
//           }
//           if(value.identificationMethod == 2){
//             name = name + `${index + 1}、作业步骤：${val.jhaCheckItem},存在风险因素：${val.jhaRiskFactor},可能存在后果：${val.jhaResult},辨识结果：${val.result== 1?'有风险':val.result == 2?'无风险':'--'}\n\n`
//           }
//           if(value.identificationMethod == 3){
//             name = name + `${index + 1}、作业步骤：${val.sclCheckItem},检查标准：${val.sclCheckStandard},不符合标准情况：${val.sclCheckUnstandard},主要后果：${val.sclCheckResult},辨识结果：${val.result== 1?'有风险':val.result == 2?'无风险':'--'}\n\n`
//           }
//           if(value.identificationMethod == 4){
//             name = name + `${index + 1}、节点：${val.hazopNode},参数：${val.hazopParam},参数描述：${val.hazopParamDesc},引导词：${val.hazopGuide},偏差：${val.hazopDeviation},可能原因：${val.hazopPossibleCauses},可能存在后果：${val.hazopResult},辨识结果：${val.result== 1?'有风险':val.result == 2?'无风险':'--'}\n\n`
//           }
//           if(value.identificationMethod == 5){
//             name = name + `${index + 1}、检查项目：${val.analogyCheckItem},类比参照：${val.analogyReference},存在风险因素：${val.analogyRiskFactor},可能存在后果：${val.analogyResult},辨识结果：${val.result== 1?'有风险':val.result == 2?'无风险':'--'}\n\n`
//           }
//         }
//         return name
//       }
//
//     }
//   }
// });
 
const fields = ref({
  '评估计划名称': {
    field: 'assessPlanName',
    callback: (value:string) => {
      return value+`&nbsp;`
    }
  },
  '辨识方法': 'methodName',
  '计划负责人': 'planUserName',
  '辨识专家': 'identificationUser',
  '评价专家': 'evaluateUser',
  '创建时间': 'createTime',
  '创建人': 'createByUserName',
  '最后修改时间': 'updateTime',
  '最后修改人': 'updateByUserName',
  '执行状态': 'statusName',
  '检查项目': {
      field: 'dataCheckItem',
      callback: (value:string) => {
        return value+`&nbsp;`
      }
  },
  '存在风险因素': {
    field: 'dataRiskFactor',
    callback: (value:string) => {
      return value+`&nbsp;`
    }
  },
  '可能存在后果': {
    field: 'dataResult',
    callback: (value:string) => {
      return value+`&nbsp;`
    }
  },
  '辨识结果': {
    field: 'result',
    callback: (value:number) => {
      return value== 1?'有风险':value == 2?'无风险':'--'
    }
  }
});
 
const getIdentifyData = async () => {
  let res = await identifyApi().getIdentifyByList(identifyState.searchQuery);
  if (res.data.code === 100) {
    identifyState.identifyData = res.data.data.map(i => {
      return {
        ...i,
        methodName: identifyState.identificationMethodList.find(item => item.id === i.identificationMethod)?.name,
        statusName: i.planExecStatus == 1 ? '未开始' : i.planExecStatus == 2 ? '辨识阶段' : i.planExecStatus == 3 ? '评价阶段' : '完成阶段'
      }
    })
    identifyState.total = res.data.total;
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.msg
    });
  }
  await getAllData
};
 
// const getAllData = async () => {
//   const query = JSON.parse(JSON.stringify(identifyState.searchQuery))
//   query.pageIndex = 1
//   query.pageSize = 99999
//   let res = await identifyApi().getIdentifyByList(query);
//   if (res.data.code === 100) {
//     identifyState.allData = res.data.data.map(i => {
//       return {
//         ...i,
//         methodName: identifyState.identificationMethodList.find(item => item.id === i.identificationMethod)?.name,
//         statusName: i.planExecStatus == 1 ? '未开始' : i.planExecStatus == 2 ? '辨识阶段' : i.planExecStatus == 3 ? '评价阶段' : '完成阶段'
//       }
//     })
//   } else {
//     ElMessage({
//       type: 'warning',
//       message: res.data.msg
//     });
//   }
// };
 
const getAllData = async () => {
  let res = await identifyApi().getAssessExport({assessPlanName: '', experimentName: '', tag: 1,pageIndex: 1,pageSize: 10});
  if (res.data.code === 200) {
    identifyState.allData = res.data.data.map(i => {
      return {
        ...i,
        methodName: identifyState.identificationMethodList.find(item => item.id === i.identificationMethod)?.name,
        statusName: i.planExecStatus == 1 ? '未开始' : i.planExecStatus == 2 ? '辨识阶段' : i.planExecStatus == 3 ? '评价阶段' : '完成阶段'
      }
    })
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.msg
    });
  }
};
 
const getAllPlanList = async () => {
  let res = await planApi().getAllPlan();
  if (res.data.code === 100) {
    identifyState.planList = JSON.parse(JSON.stringify(res.data.data));
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.msg
    });
  }
};
 
const getPersonList = async () => {
  let res = await userApi().getUserList({
    pageIndex: 1,
    pageSize: 99999,
    searchParams: {
      roleId: null,
      name: '',
      realName: ''
    }
  });
  if (res.data.code === 100) {
    identifyState.personList = JSON.parse(JSON.stringify(res.data.data));
  } else {
    ElMessage({
      type: 'warning',
      message: res.data.msg
    })
  }
};
 
const openIdentifyQuery = (title: string, value: IdentifyType) => {
  identifyQueryDialogRef.value.showIdentifyQuery(title, value, identifyState.planList, identifyState.personList);
};
 
const onDelIdentify = (val: IdentifyType) => {
  ElMessageBox.confirm(`此操作将永久删除该辨识，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(async () => {
        let res = await identifyApi().deleteIdentifyById({id: val.id});
        if (res.data.code === 100) {
          ElMessage({
            type: 'success',
            duration: 2000,
            message: '删除成功'
          });
          await getIdentifyData();
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      })
      .catch((error) => {
      });
};
 
const accessIdentify = (val: IdentifyType) => {
  if (val.factorQueryDTOList?.length > 0) {
    ElMessageBox.confirm(`此操作将提交该计划：“${val.assessPlanName}”的辨识信息，是否继续?`, '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
        .then(async () => {
          let res = await identifyApi().submitIdentify({id: val.id});
          if (res.data.code === 100) {
            ElMessage({
              type: 'success',
              duration: 2000,
              message: '提交成功'
            });
            await getIdentifyData();
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        })
        .catch((error) => {
        });
  } else {
    ElMessage({
      type: 'warning',
      message: '请先添加辨识信息'
    });
  }
};
 
const onHandleSizeChange = (val: number) => {
  identifyState.searchQuery.pageSize = val;
  getIdentifyData();
};
 
const onHandleCurrentChange = (val: number) => {
  identifyState.searchQuery.pageIndex = val;
  getIdentifyData();
};
 
const reset = () => {
  identifyState.searchQuery = {
    pageIndex: 1,
    pageSize: 10,
    assessPlanName: '',
    experimentName: '',
    tag: 1,
  }
};
 
onMounted(() => {
  getIdentifyData();
  getAllData()
  getAllPlanList();
  getPersonList();
  identifyState.user = Number(userInfos.value.uid)
 
  if(userInfos.value.roles.find(i=>i.roleId == 6 || i.roleId == 7)){
    identifyState.isAdmin = true
  }else{
    identifyState.isAdmin = false
  }
});
 
</script>
 
<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
  height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow: hidden;
 
  .homeCard {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
 
    .main-card {
      width: 100%;
      height: 100%;
 
      .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
 
        .mainCardBtn {
          margin: 0;
        }
      }
 
      .pageBtn {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: right;
 
        .demo-pagination-block + .demo-pagination-block {
          margin-top: 10px;
        }
 
        .demo-pagination-block .demonstration {
          margin-bottom: 16px;
        }
      }
    }
 
    &:last-of-type {
      height: calc(100% - 100px);
    }
  }
 
  .el-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
 
    &:last-child {
      margin-bottom: 0;
    }
 
    .grid-content {
      align-items: center;
      min-height: 36px;
    }
 
    .topInfo {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
 
      & > div {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }
}
 
:deep(.el-date-editor) {
  width: 100%;
}
 
.el-select {
  width: 100%;
}
 
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: var(--el-card-bg-color);
  color: var(--el-input-text-color, var(--el-text-color-regular));
}
 
:deep(.el-input.is-disabled .el-input__inner) {
  color: var(--el-input-text-color, var(--el-text-color-regular));
}
 
:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: var(--el-card-bg-color);
}
 
:deep(.el-range-editor.is-disabled input) {
  background-color: var(--el-card-bg-color);
  color: var(--el-input-text-color, var(--el-text-color-regular));
}
</style>