archives/src/views/using/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="item.num === backupTabKey ? 'cut' : ''" class="hc-backup-tab" @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" style="border-bottom: 1px solid #A3D9EA;">阿里云</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" style="border-top: 1px solid #A3D9EA;">对象最小计量大小</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 :loading="balenewDataClickLoading" hc-btn type="primary" @click="balenewDataClick">
                                    <span>打包最新数据</span>
                                </el-button>
                                <el-button hc-btn type="primary" @click="downAppModalShow">
                                    <HcIcon name="download-2" />
                                    <span>下载客户端</span>
                                </el-button>
                                <el-button :loading="downUtilsClickLoading" hc-btn type="primary" @click="downUtilsClick">
                                    <HcIcon name="download-2" />
                                    <span>下载数据包</span>
                                </el-button>
                            </div>
                            <HcTable :column="tableBasicColumn" :datas="tableBasicData" :is-index="false" is-new />
                            <div class="hc-backup-table-box mt-5">
                                <div class="tr-left">功能描述</div>
                                <div class="tr-body">
                                    <div class="tr-item">
                                        <div class="td-name" style="border-bottom: 1px solid #A3D9EA;">档案存储</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" style="border-top: 1px solid #A3D9EA;">多条件检索查询</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>
                        <!-- 信息包 -->
                        <div v-if="backupTabKey === 3" class="hc-backup-card-body">
                            <HcTable :column="tableInfoColumn" :datas="tableInfoData" :is-index="false" is-new />
                            <div class="hc-backup-table-box mt-5">
                                <div class="tr-left">信息包结构</div>
                                <div class="tr-body">
                                    <div class="tr-item">
                                        <div class="td-name" style="border-bottom: 1px solid #A3D9EA;">说明文件</div>
                                        <div class="td-item-tr" style="display: flex; flex-direction: row;">
                                            <div class="td-item" style="flex: 1; display: flex; align-items: center; justify-content: center;" />
                                        </div>
                                    </div>
                                    <div class="tr-item">
                                        <div class="td-name" style="border-bottom: 1px solid #A3D9EA;">管理元数据</div>
                                        <div class="td-item-tr" style="border-left: none;">
                                            <div class="td-item">项目基本信息</div>
                                            <div class="td-item">工程造价信息</div>
                                            <div class="td-item">单位工程信息</div>
                                            <div class="td-item">案卷信息</div>
                                            <div class="td-item" style="border-bottom: 1px solid #A3D9EA;">工程档案单位责任信息</div>
                                        </div>
                                        <div class="td-item-tr">
                                            <div class="td-item" style="height:200px" />
                                        </div>
                                        <div class="td-item-tr" style="border-left: none;">
                                            <div class="td-item" style="height:200px" />
                                        </div>
                                    </div>
                                    <div class="tr-item">
                                        <div class="td-name" style="border-bottom: 1px solid #A3D9EA;">其他</div>
                                        <div class="td-item-tr">
                                            <div class="td-item">案卷目录文件</div>
                                            <div class="td-item" style="border-bottom: 1px solid #A3D9EA;">移交清单</div>
                                        </div>
                                        <div class="td-item-tr">
                                            <div class="td-item" style="height:80px" />
                                        </div>
                                        <div class="td-item-tr" style="border-left: none;">
                                            <div class="td-item" style="height:80px" />
                                        </div>
                                    </div>
                                    <div class="tr-item">
                                        <div class="td-name">案卷1</div>
                                        <div class="td-item-tr">
                                            <div class="td-item">卷内文件目录</div>
                                            <div class="td-item">案卷1通用元数据</div>
                                            <div class="td-item" style="height:240px">卷内文件</div>
                                        </div>
                                        <div class="td-item-tr">
                                            <div class="td-item" style="border:none;height:80px;border-top:0" />
                                            <div class="td-item" style="height:240px">文件1</div>
                                        </div>
                                        <div class="td-item-tr" style="border-left:none;">
                                            <div class="td-item" style="border-left:none;height:80px;border-top:0" />
                                            <div class="td-item" style="border-left:1px solid #E4E7ED">通用元数据</div>
                                            <div class="td-item" style="border-left:1px solid #E4E7ED">案卷元数据</div>
                                            <div class="td-item" style="border-left:1px solid #E4E7ED">内容元数据</div>
                                            <div class="td-item" style="border-left:1px solid #E4E7ED">卷内文件对象1</div>
                                            <div class="td-item" style="border-left:1px solid #E4E7ED">卷内文件对象2</div>
                                            <div class="td-item" style="border-left:1px solid #E4E7ED">卷内文件对象3</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>
        <!-- 下载客户端 -->
        <hc-new-dialog v-model="downAppModal" :footer="false" title="下载客户端软件" widths="54rem" @close="downAppModal = false">
            <el-alert
                :closable="false"
                title="客户端软件是独立的，数据包也是独立，但数据包需要客户端软件打开才能操作。客户端软件也支持多项目（多数据包）使用。"
                type="warning"
                class="mb-14px"
            />
            <template v-for="(item, index) in downAppData" :key="index">
                <div :class="index > 0 ? 'mt-4' : ''" class="hc-down-app-title">{{ item.name }}</div>
                <div v-for="(items, indexs) in item.data" :key="indexs" class="hc-down-app-link-item">
                    <div class="hc-down-app-link-type">{{ items.type }}</div>
                    <div class="hc-down-app-link">
                        <el-link :href="items.url">档案脱机存档-{{ items.arch }}-{{ items.version }}-安装包.{{ item.platform === 'win32' ? 'exe' : 'dmg' }}</el-link>
                    </div>
                    <div class="hc-down-app-time">{{ items.date }}</div>
                </div>
            </template>
        </hc-new-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import backupApi from '~api/backup/backupApi.js'
import { getLocalArchivesApp } from '~api/other'
import { getArrValue } from 'js-fast-way'
import { setUrlHttps } from '~uti/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: '脱机软件存储' },
    { num: 3, name: '信息包存储' },
])
const backupTabClick = (num) => {
    backupTabKey.value = num
}
//下载脱机载体工具
const downUtilsClickLoading = ref(false)
const downFileUrl = ref('')
const getFileData = async () => {
    const { error, data } = 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) {
        //toPdfPage(downFileUrl.value)
        //window.open(downFileUrl.value, '_blank')
        console.log(downFileUrl.value, 'setUrlHttps(downFileUrl.value)')
        // 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: '' },
])

//下载客户端
const downAppModal = ref(false)
const downAppData = ref([])
const downAppModalShow = async () => {
    const { data } = await getLocalArchivesApp()
    downAppData.value = getArrValue(data)
    downAppModal.value = true
}

//信息报
const tableInfoColumn = ref([
    { key: 'size', name: '信息包大小', align: 'center' },
    { key: 'baledate', name: '打包时间', align: 'center' },
])
const tableInfoData = ref([
{ size: '2.3G', baledate: '2025-04-16 16:45:25' },
])
</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>