archives/src/views/custody/backup.vue

<template>
    <div class="hc-page-box">
        <HcCard ui="hc-backup-bg-white">
            <template #header>
                <div class="hc-card-header-project-alias">安康至来凤国家高速公路奉节至巫山段</div>
            </template>
            <div class="hc-backup-box">
                <div class="hc-backup-tab-box">
                    <template v-for="item in backupTabData" :key="item.num">
                        <div class="hc-backup-tab" :class="item.num === backupTabKey ? 'cut':''" @click="backupTabClick(item.num)">
                            <span class="font-FZGongYHJW num">{{item.num}}</span>
                            <span class="text">{{item.name}}</span>
                        </div>
                    </template>
                </div>
                <div class="hc-backup-card-box">
                    <el-scrollbar>
                        <div class="hc-backup-card-body" v-if="backupTabKey === 1">
                            <div class="hc-backup-table-box">
                                <div class="tr-left">OSS当前存储内容</div>
                                <div class="tr-body">
                                    <div class="tr-item">
                                        <div class="td-name">阿里云</div>
                                        <div class="td-item-tr">
                                            <div class="td-item">对象最小计量大小</div>
                                            <div class="td-item">存储时间要求</div>
                                            <div class="td-item">数据访问特点</div>
                                            <div class="td-item">存储空间价格</div>
                                            <div class="td-item">数据取回费用</div>
                                        </div>
                                        <div class="td-item-tr">
                                            <div class="td-item">-</div>
                                            <div class="td-item">-</div>
                                            <div class="td-item">-</div>
                                            <div class="td-item">-</div>
                                            <div class="td-item">-</div>
                                        </div>
                                    </div>
                                    <div class="tr-item">
                                        <div class="td-name">备份云</div>
                                        <div class="td-item-tr">
                                            <div class="td-item">对象最小计量大小</div>
                                            <div class="td-item">存储时间要求</div>
                                            <div class="td-item">数据访问特点</div>
                                            <div class="td-item">存储空间价格</div>
                                            <div class="td-item">数据取回费用</div>
                                        </div>
                                        <div class="td-item-tr">
                                            <div class="td-item">-</div>
                                            <div class="td-item">-</div>
                                            <div class="td-item">-</div>
                                            <div class="td-item">-</div>
                                            <div class="td-item">-</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hc-backup-card-tip">
                                <div>云存储优点：</div>
                                <div>1、提供企业级多层次安全防护，包括服务端加密、客户端加密、防盗链、IP黑白名单、细粒度权限管控、日志审计、WORM特性等。</div>
                                <div> 多用户资源隔离机制，支持异地容灾机制。获得多项合规认证，包括SEC和FINRA 等，满足企业数据安全与合规要求。</div>
                                <div>2、提供多种数据处理能力，如图片处理、视频截帧、文档预览、图片场景识别、人脸识别、SQL就地查询</div>
                            </div>
                        </div>
                        <div class="hc-backup-card-body" v-if="backupTabKey === 2">
                            <div class="hc-backup-card-btn">
                                <el-button type="primary" hc-btn @click="balenewDataClick" :loading="balenewDataClickLoading">

                                    <span>打包最新数据</span>
                                </el-button>
                                <el-button type="primary" hc-btn  @click="downUtilsClick" :loading="downUtilsClickLoading">
                                    <HcIcon name="download-2"/>
                                    <span>下载脱机载体工具</span>
                                </el-button>

                            </div>
                            <HcTable :column="tableBasicColumn" :datas="tableBasicData" :isIndex="false" border/>
                            <div class="mt-5 hc-backup-table-box">
                                <div class="tr-left">功能描述</div>
                                <div class="tr-body">
                                    <div class="tr-item">
                                        <div class="td-name">档案存储</div>
                                        <div class="td-item-tr">
                                            <div class="td-item">离线存储</div>
                                            <div class="td-item">离线导入</div>
                                        </div>
                                    </div>
                                    <div class="tr-item">
                                        <div class="td-name">档案查询</div>
                                        <div class="td-item-tr">
                                            <div class="td-item">多条件检索查询</div>
                                            <div class="td-item">预览</div>
                                            <div class="td-item">下载</div>
                                            <div class="td-item">打印</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="hc-backup-card-tip">
                                <div>脱机储优点：</div>
                                <div>1、支持为运营阶段移交整套数据。</div>
                                <div>2、为企业单位提供本地备份的可视化工具，直接点击下载即可将整个项目数据打包下载到本地软件存储</div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </HcCard>
    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useAppStore} from "~src/store";
import backupApi from "~api/backup/backupApi.js";
import { Loading } from "element-plus/es/components/loading/src/service";

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);

//渲染完成
onMounted(() => {
    getFileData()
})

//tab数据
const backupTabKey = ref(1)
const backupTabData = ref([
    {num: 1, name: 'OSS云存储'},
    {num: 2, name: '脱机软件存储'},
])
const backupTabClick = (num) => {
    backupTabKey.value = num
}
//下载脱机载体工具
const downUtilsClickLoading = ref(false)
const downFileUrl=ref('')
const getFileData=async()=>{
      const { error,response,data, res} = await backupApi.DownloadVersionInfo({
          projectId:projectId.value

    })
    if (!error) {
        downFileUrl.value=data.fileUrl
        tableBasicData.value[0].size=data.fileSize
        tableBasicData.value[0].num=data.fileSize
        tableBasicData.value[0].baledate=data.uploadDate

    }else{
        downUtilsClickLoading.value=false
    }
}
const downUtilsClick = () => {
    if (downFileUrl.value) {
         window.open(downFileUrl.value, '_blank')
    }


}

//打包最新数据
const balenewDataClickLoading = ref(false)
const balenewDataClick = async() => {
     balenewDataClickLoading.value=true
      const { error,response, res,data} = await backupApi.getpackData({
          projectId:projectId.value

    })
    if (!error) {
           window.$message?.success(data)
         balenewDataClickLoading.value=false
    }else{
        balenewDataClickLoading.value=false
    }

}

//表格
const tableBasicColumn = [
    {key:'name', name: '软件名称', align: 'center'},
    {key:'type', name: '软件打开方式', align: 'center'},
    {key:'size', name: '软件包大小', align: 'center'},
    {key:'num', name: '目前存储量', align: 'center'},
    {key:'baledate', name: '打包日期', align: 'center'}
]
const tableBasicData = ref([
    {name:'工程档案离线存储软件', type: '桌面、U盘、硬盘皆可支持安装存放', size: '2.3G', num: '331G',baledate:'2020.03.03'}
])

</script>

<style lang="scss" scoped>
@import '~style/custody/scoped/backup.scss';
</style>

<style lang="scss" >
.hc-backup-card-body .hc-table-ref-box {
    border: 0;
}
</style>