archives/src/views/custody/backup.vue

<template>
    <div class="hc-page-box hc-custody-backup">
        <hc-new-card ui="hc-backup-bg-white">
            <template #header>
                <div class="hc-card-header-project-alias">
                    {{ projectInfo?.name }}
                </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 v-if="backupTabKey === 1" class="hc-backup-card-body">
                            <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 v-if="backupTabKey === 2" class="hc-backup-card-body">
                            <div class="hc-backup-card-btn">
                                <el-button type="primary" hc-btn :loading="balenewDataClickLoading" @click="balenewDataClick">
                                    <span>打包最新数据</span>
                                </el-button>
                                <el-button type="primary" hc-btn :loading="downUtilsClickLoading" @click="downUtilsClick">
                                    <HcIcon name="download-2" />
                                    <span>下载脱机载体工具</span>
                                </el-button>
                            </div>
                            <HcTable :column="tableBasicColumn" :datas="tableBasicData" :is-index="false" is-new />
                            <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>
        </hc-new-card>
    </div>
</template>

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

//变量
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')
        // console.log(setUrlHttps(downFileUrl.value), 'setUrlHttps(downFileUrl.value)')
        // window.open( setUrlHttps(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: '', baledate:'' },
])
</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;
}
@import '~src/styles/theme/custody/backup.scss';
</style>