archives/src/views/custody/testing.vue

<template>
     <div class="hc-page-box" style="backgroundcolor:white">
            
              <HcCard1 scrollbar >

                  <div class="bannerbox" :style="`background-image: url(${testBgbig});`"  v-if="isStatus">
                      <div class="infobox">
                          <el-row>
                            <el-col :span="20">
                                <div >
                                    [1]文书档案检测一般要求：DA/T 70-2018
                                </div>
                            </el-col>
                              <!-- <el-col :span="3" :offset="1"><div  style="text-align:right">历史报告</div></el-col> -->
                              <el-col :span="3" :offset="1">
                                <div  style="text-align:right">
                                    <el-tooltip :visible="visible" effect="light"  >
                                        <template #content >
                                          <div class="reportPop" v-if="historyRportlist.length>0" v-loading="reportLoading">
                                            <div class="history_box" v-for="item in historyRportlist">
                                                <el-link type="primary" @click="viewHpdf(item)">{{ item.reportName }}</el-link>
                                                <span class="m15">{{ item.examiningTime }}</span>
                                                
                                            </div>
                                          </div>
                                          <div v-else>暂无数据</div>
                                        </template>
                                        <el-button  type="primary"  @click="showReport">
                                            历史报告
                                        </el-button>

                                    </el-tooltip>
                                </div>
                            </el-col>
                         </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div >
                                    [2]电子档案"四性"检测要求及其实现方法[j].浙江档案
                                </div>
                            </el-col>
                           
                         </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div >
                                   制定系统电子文件归档真实性、完整性、可用性、安全性检测服务
                                </div>
                            </el-col>
                           
                         </el-row>
                      </div>
                           <div class="circlebox" @click="detection" >
                               <span v-loading="detectionLoad"> 一键检测</span>
                            </div>  
                  </div>
                  
                  <div class="bannerbox " :style="`background-image: url(${testBgsamll});  aspect-ratio: 1993/468;`" v-if="!isStatus">
                      <div class="infobox">
                          <el-row > 
                            <el-col :span="20">
                                <div >
                                    [1]文书档案检测一般要求：DA/T 70-2018
                                </div>
                            </el-col>
                            <el-col :span="3" :offset="1">
                                <div  style="text-align:right">
                                    <el-tooltip :visible="visible" effect="light"  >
                                                <template #content >
                                                    <div class="reportPop" v-if="historyRportlist.length>0" v-loading="reportLoading">
                                                        <div class="history_box" v-for="item in historyRportlist">
                                                            <el-link type="primary" @click="viewHpdf(item)">{{ item.reportName }}</el-link>
                                                            <span class="m15">{{ item.examiningTime }}</span>
                                                            
                                                        </div>
                                                    </div>
                                                    <div v-else>暂无数据</div>
                                                </template>
                                                <el-button  type="primary"  @click="showReport">
                                                    历史报告
                                                </el-button>

                                    </el-tooltip>
                                </div>
                          </el-col>
                     
                         </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div >
                                    [2]电子档案"四性"检测要求及其实现方法[j].浙江档案
                                </div>
                            </el-col>
                           
                         </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div >
                                   制定系统电子文件归档真实性、完整性、可用性、安全性检测服务
                                </div>
                            </el-col>
                           
                         </el-row>
                      </div>
                           
                             <el-tooltip
                                class="box-item"
                                effect="light"
                                content="系统正在检测运行中，请勿终止操作"
                                placement="right-start"
                                :visible="activeIndex==2||activeIndex==3"
                            >
                                <div class="circlebox circlebox2" v-if="activeIndex===4">
                                    <span>100%</span>
                                </div>  
                               <div class="circlebox circlebox1" v-else>
                                    <span>26%</span>
                                </div>
                                 
                            </el-tooltip> 
                  </div>
                  
                  <div class="statusbox"   v-if="isStatus">
                      <div class="statusboxitem" :style="`background-image: url(${bgColor});`">
                          <div class="statusboxitem_top">
                             <div  class="statusboxitem_top_first">
                                  
                                <div style=" font-size: 5.25rem;color :white;">
                                   <i class="ri-checkbox-multiple-line"></i>
                                </div>
                                  <div class="title">
                                      真实性检测
                                  </div>
                             </div> 
                             <div  class="statusboxitem_top_second">
                                 <span>检测范围</span>
                                  <el-link  type="success"  :underline="false">查看</el-link>
                             </div>
                          </div>
                          <div class="statusboxitem_bottom">
                                  <span>开启检测</span>
                                    <el-switch
                                        v-model="openvalue"
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                        active-value="100"
                                        inactive-value="0"
                                        />
                          </div>
                      </div>
                        <div class="statusboxitem" :style="`background-image: url(${bgColor});`">
                          <div class="statusboxitem_top">
                             <div  class="statusboxitem_top_first">
                                  
                                <div style=" font-size: 5.25rem;color :white;">
                                   <i class="ri-radio-button-line"></i>
                                </div>
                                  <div class="title">
                                      完整性检测
                                  </div>
                             </div> 
                             <div  class="statusboxitem_top_second">
                                 <span>检测范围</span>
                                  <el-link  type="success"  :underline="false">查看</el-link>
                             </div>
                          </div>
                          <div class="statusboxitem_bottom">
                                  <span>开启检测</span>
                                    <el-switch
                                        v-model="openvalue"
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                        active-value="100"
                                        inactive-value="0"
                                        />
                          </div>
                      </div>
                                     <div class="statusboxitem" :style="`background-image: url(${bgColor});`">
                          <div class="statusboxitem_top">
                             <div  class="statusboxitem_top_first">
                                  
                                <div style=" font-size: 5.25rem;color :white;">
                                    <i class="ri-chat-upload-fill"></i>
                                </div>
                                  <div class="title">
                                      可用性检测
                                  </div>
                             </div> 
                             <div  class="statusboxitem_top_second">
                                 <span>检测范围</span>
                                  <el-link  type="success"  :underline="false">查看</el-link>
                             </div>
                          </div>
                          <div class="statusboxitem_bottom">
                                  <span>检测范围</span>
                                    <el-switch
                                        v-model="openvalue"
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                        active-value="100"
                                        inactive-value="0"
                                        />
                          </div>
                      </div>
                      <div class="statusboxitem" :style="`background-image: url(${bgColor});`">
                          <div class="statusboxitem_top">
                             <div  class="statusboxitem_top_first">
                                  
                                <div style=" font-size: 5.25rem;color :white;">
                                 <i class="ri-shield-cross-line"></i>
                                </div>
                                  <div class="title">
                                      安全性检测
                                  </div>
                             </div> 
                             <div  class="statusboxitem_top_second">
                                 <span>检测范围</span>
                                  <el-link  type="success"  :underline="false">查看</el-link>
                             </div>
                          </div>
                          <div class="statusboxitem_bottom">
                                  <span>开启检测</span>
                                    <el-switch
                                        v-model="openvalue"
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                        active-value="100"
                                        inactive-value="0"
                                        />
                          </div>
                      </div>
                  </div>
                  <div class="progress" v-else>
                      <div class="progressbox">

                            <div class="hc-steps-view"  style="width:100%;display:flex">
                                <el-steps :active="activeIndex" align-center  style="width:90%">
                                    <el-step title="初始化" @click="stepClick(1)"/>
                                    <el-step title="检测中" @click="stepClick(2)"/>
                                    <el-step title="生成报告" @click="stepClick(3)"/>
                                    <el-step title="完成" @click="stepClick(4)"/>
                                </el-steps>
                                <el-button type="success" v-if="activeIndex===4">查看报告</el-button>
                            </div>
                             
                      </div>
                       
                      <div class="tablebox">
                            <HcTable1 ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading">
                               <template #key3="{row}">
                                    <i class="ri-checkbox-circle-fill" v-if="row.key3" style="color:green"> </i>
                                    <i class="ri-error-warning-fill" v-else style="color:rgb(189, 49, 36);"></i>
                                </template>
                            </HcTable1>
                       </div>
                  </div>
                  
             </HcCard1>
     </div>

</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
import bgColor  from '~src/assets/view/bgcolor.svg';
import testBgbig  from '~src/assets/view/testBgbig.png';
import testBgsamll  from '~src/assets/view/testBgsamll.png';
import HcCard1 from './components/hc-card1.vue'
import HcTable1 from './components/hc-table1.vue'
import reportApi from "~api/custody/testing.js";
import {getArrValue, getObjValue, isArrIndex} from "js-fast-way"


//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const openvalue = ref(true);
const isStatus = ref(true);
const activeIndex = ref(2);

//表头
const tableRef = ref(null)
const tableColumn = ref([
    {key:'key1', name: '检测项目'},
    {key:'key2', name: '不合格统计',width:150,align:'center'},
    {key:'key3', name: '检测结果',width:150,align:'center'},
   
])
const tableData = ref([
    {
        id: 1,
        key1: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key2:3,
        key3: true,
        
    },
      {
        id: 1,
        key1: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key2:3,
         key3: true,
        
    },
      {
        id: 1,
        key1: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key2:3,
       key3: true,
        
    },
      {
        id: 1,
        key1: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key2:3,
        key3: true,
        
    },
      {
        id: 1,
        key1: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key2:3,
        key3: false,
        
    },
    ,
      {
        id: 1,
        key1: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key2:3,
        key3: false,
        
    },
    ,
      {
        id: 1,
        key1: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key2:3,
        key3: false,
        
    },
    ,
      {
        id: 1,
        key1: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key2:3,
        key3: false,
        
    },

])

//获取数据
const tableLoading = ref(false)
//一键检测
const reportId=ref(0)
const detectionLoad=ref(false)
const detection=async()=>{
    console.log('一键检测');
   
    detectionLoad.value=true
    const { error, code, data } = await reportApi.getExamining({
        projectId: projectId.value,
        reportId:reportId.value
    })
    detectionLoad.value=false
    if (!error && code === 200) {
        activeIndex.value=data['status']
        isStatus.value=false
      
      
    } else {
      
     
    }
}
//渲染完成
onMounted(() => {
    getReportData()
})
//消息数量
const props = defineProps(
    {
        msgCount: {
            // type: Object,
            // default: () => ({ })
        },
    }
)
const menumsgCount = ref(props.msgCount)
//监听
//监听
watch(() => [
        props.msgCount,
    ], ([val]) => {
        console.log(val,'val');
        menumsgCount.value = val
        activeIndex.value=val.status
    }
)
//渲
const stepClick = (index) => {
    activeIndex.value = index;
    if (index==0) {
         isStatus.value=true
    }
}
//历史报告
const visible = ref(false)
const showReport=()=>{
    visible.value=!visible.value
}
const historyRportlist=ref([])
//获取历史报告列表
const reportLoading = ref(false)
const getReportData = async () => {
    reportLoading.value = true
    const { error, code, data } = await reportApi.getReportList({
        projectId: projectId.value,

    })
    reportLoading.value = false
    if (!error && code === 200) {
        historyRportlist.value = getArrValue(data)
        console.log(data,'data');
      
    } else {
        historyRportlist.value = []
     
    }
   
}
//查看历史报告
const viewHpdf=(item)=>{
    if(item.reportPdfUrl){
        window.open(item.reportPdfUrl, '_blank')
    }else{
        window.$message.warning('暂无pdf')
    }
   
}

</script>

<style lang="scss" scoped>
.statusbox{
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    align-items:flex-end;
    min-height: 280px;
    // height: 28vh;
    // height: 350px;
    width: 80%;
    text-align: center;
    // border: 1px solid red;
    margin: 0 auto;
    .statusboxitem{
        width: 15%;
        
    
        background-size: 100% 100%;
        border-radius: 5px;
        font-size: 14px;
        padding: 10px;
        .statusboxitem_top{
            height: 85%;
            border-bottom: 2px solid white;
            .statusboxitem_top_first{
                height: 80%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
               
              .title{
                  font-weight: bold;
                   color:white;
                   font-size: 1rem;
              }
              
            }
             .statusboxitem_top_second{
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 50px;
                color:black;
            }
        }
        .statusboxitem_bottom{
            display: flex;
            justify-content: space-between;
            align-items: center;
            // line-height: 50px;
            color:black;
        }
    }
}
.bannerbox{
    // height: 50vh;
    width: 100%;
    // border:1px solid  red;
    background-size: 100% 100%;
    border-radius: 5px;
    aspect-ratio: 1993/597;
    //  aspect-ratio: 619/150;
    padding: 20px;
    position: relative;
    margin-bottom: 30px;
   .infobox{
     
       width: 100%;
    //   line-height: 30px;
       color: white;
       font-weight: bold;
    //    position: absolute;
   }
   .circlebox{
        position: absolute;
        top: 31%;
        left:42.2%;
        width:17.5%;
        height: 58.4%;
        // width: 27.5vh;
        // height: 27.5vh;
        z-index: 67;
        border: 2px solid white;
        border-radius: 50%;
        box-shadow: 0 0 10px 15px rgba(255, 255, 255, 0.9); 
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-weight: bolder;
       
        font-size: 30px;
        cursor: pointer;
        box-sizing: border-box;
   }
  
   .circlebox1{
         top: 38%;
         left:45.5%;
        //  width: 20vh;
        //  height: 20vh;
        font-size: 2.55rem;
         width: 12%;
         height: 51.1%;
         background-color:   rgb(189, 49, 36);
   }
   .circlebox2{
       background: rgb(129, 179, 55);
       top: 38%;
       left:45.5%;
        //  width: 20vh;
        //  height: 20vh;
        width: 12%;
        height: 51.1%;
   }
}


.hc-card-box.el-card:not(.is-header) .el-card__body {
    height: 100%;
    background-color: white !important;
}
.progress{
    height: 40vh;
   .progressbox{
       width: 100%;
       display: flex;
   }
   
     .tablebox{
        padding: 20px;
        margin-top: 30px;
        height: 90%;
    
    }
}
    .hc-steps-view .el-steps {
    .el-step.is-horizontal .el-step__line {
        height: 4px;
        top: 14px;
    }
    .el-step__line-inner {
        border-width: 2px !important;
    }
    .el-step__icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .el-step__icon.is-text {
        border: 3px solid;
    }
    .el-step__head.is-finish {
        color: #1ECC95;
        border-color: #1ECC95;
    }
    .el-step__title.is-finish {
        color: #1ECC95;
    }
}
.history_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid gray;
    height: 30px;
    line-height: 30px;
   
}
.m15{
    margin-left: 15px;
}
.reportPop{
    max-height: 280px !important;
    overflow-y: auto;
}
</style>