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>{{ statusPercent }}</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" @click="viewDialogTrue(1)">查看</el-link>
                             </div>
                          </div>
                          <div class="statusboxitem_bottom">
                                  <span>开启检测</span>
                                    <el-switch
                                        v-model="openTruevalue"
                                        style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
                                        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" @click="viewDialogTrue(2)">查看</el-link>
                             </div>
                          </div>
                          <div class="statusboxitem_bottom">
                                  <span>开启检测</span>
                                    <el-switch
                                        v-model="openFullvalue"
                                        style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
                                        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" @click="viewDialogTrue(3)">查看</el-link>
                             </div>
                          </div>
                          <div class="statusboxitem_bottom">
                                  <span>检测范围</span>
                                    <el-switch
                                        v-model="openUsevalue"
                                        style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
                                        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" @click="viewDialogTrue(4)">查看</el-link>
                             </div>
                          </div>
                          <div class="statusboxitem_bottom">
                                  <span>开启检测</span>
                                    <el-switch
                                        v-model="openSafevalue"
                                        style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
                                        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 #examiningResult="{row}">
                                    <i class="ri-checkbox-circle-fill" v-if="row.examiningResult===0" style="color:green"> </i>
                                    <i class="ri-error-warning-fill" v-else style="color:rgb(189, 49, 36);"></i>
                                </template>
                            </HcTable1>
                       </div>
                  </div>

             </HcCard1>

             <!-- 查看弹窗 -->
             <HcDialog :show="imageDialog" :title="imageTitle" widths="990px"   :footer="false"  @close="imageDialogClose">
            <div >
                <el-image style="width: 100%; height: 100%" :src="Imageurl"  />
            </div>
        </HcDialog>
     </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, toParse, getObjValue, isArrIndex} from "js-fast-way"
import truePng from '~src/assets/testphoto/true.png';
import fullPng from '~src/assets/testphoto/full.png';
import usePng from '~src/assets/testphoto/use.png';
import safePng from '~src/assets/testphoto/safe.png';

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const openTruevalue = ref(false);
const openFullvalue = ref(true);
const openUsevalue = ref(true);
const openSafevalue = ref(true);
const isStatus = ref(true);
const activeIndex = ref(0);

//表头
const tableRef = ref(null)
const tableColumn = ref([
    {key:'examiningItem', name: '检测项目'},
    {key:'unqualifiedCount', name: '不合格统计',width:150,align:'center'},
    {key:'examiningResult', name: '检测结果',width:150,align:'center'},

])
const tableData = ref([])

//获取数据
const tableLoading = ref(false)
//一键检测
const reportId=ref(0)
const detectionLoad=ref(false)
const detection=async()=>{
    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']
        reportId.value=data['id']
        isStatus.value=false
    } else {
        window?.$message?.error('操作失败')
    }
}
//渲染完成
onMounted(() => {
    getReportData()
    getReportStatusdata()
})
//获取检测报告状态
const getReportStatusdata=async()=>{
    const { error, code, data } = await reportApi.getReportStatus({
        projectId: projectId.value,
    })
    if (!error && code === 200) {
        console.log(data,'data');
        if(data===-1){
            activeIndex.value=0
        }else{
            reportId.value=data
            isStatus.value=false
            // reportId.value=data
        }
    }

}

//消息数量
const props = defineProps(
    {
        msgCount: {
            // type: Object,
            // default: () => ({ })
        },
    }
)
//检测百分比
const statusPercent=ref('25%')
//监听
watch(() => [
        props.msgCount,
        activeIndex
    ], ([val,index]) => {
        const res = toParse(val)
        // console.log(val,'val消息信息');
        if(res) {
            activeIndex.value = res.status;
            tableData.value=res.detailList
        }
        console.log(index.value,'index');
        if(index.value===1){
            statusPercent.value='25%'
        }else if(index.value===2){
            statusPercent.value='50%'
        }else if(index.value===3){
            statusPercent.value='75%'
        }else if(index.value===4){
            statusPercent.value='100%'
        }
       
    }
)
//渲
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)=>{
    console.log(item,'item');
    if(item.reportPdfUrl){
        window.open(item.reportPdfUrl, '_blank')
    }else{
        window.$message.warning('暂无pdf')
    }

}



//查看真实图片
const imageDialog=ref(false)
const Imageurl=ref('')
const imageTitle=ref('')
const viewDialogTrue=(type)=>{
    imageDialog.value=true
    if(type===1){
        Imageurl.value=truePng
        imageTitle.value='真实性检测范围'
    }else if(type===2){
        Imageurl.value=fullPng
        imageTitle.value='完整性检测范围'
    }else if(type===3){
        Imageurl.value=usePng
        imageTitle.value='可以性检测范围'
    }else{
        Imageurl.value=safePng
        imageTitle.value='安全性检测范围'
    }

}
const imageDialogClose=()=>{
    imageDialog.value=false
}
</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>