|
|
@@ -1,310 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-container v-loading="isLoading" class="hc-home-datav-box relative h-full w-full">
|
|
|
- <div v-if="isBgImg" class="datav-bg">
|
|
|
- <img :src="bgImg" alt="背景图片">
|
|
|
- </div>
|
|
|
- <el-header id="datav-header" class="relative p-0">
|
|
|
- <div class="header-bg relative h-full w-full">
|
|
|
- <img id="datav-header-bg" :src="headerBg" alt="头部图" @load="headerBgLoad">
|
|
|
- </div>
|
|
|
- <div class="header-img absolute">
|
|
|
- <img id="datav-header-img-1" :src="headerImg1" alt="头部装饰1">
|
|
|
- <img ref="fullScreenRef" class="datav-header-img-2" :src="headerImg2" alt="头部装饰2" @click="fullScreenClick">
|
|
|
- <div class="project-name-box absolute">
|
|
|
- <el-popover effect="dark" placement="bottom" :title="project?.projectName" :width="460" trigger="hover" popper-class="hc-datav-project-name-popover">
|
|
|
- <template #reference>
|
|
|
- <span id="project-name" ref="projectNameRef" @click="projectNameClick">
|
|
|
- {{ project.projectAlias?.substring(0, 10) }}
|
|
|
- <i class="ri-arrow-down-s-fill" />
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <div v-if="project?.projectGist" class="hc-datav-project-gist">{{ project?.projectGist }}</div>
|
|
|
- </el-popover>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-header>
|
|
|
- <el-container class="relative">
|
|
|
- <el-aside width="25%" class="relative">
|
|
|
- <hc-body padding="0">
|
|
|
- <datavCard class="aside-charts-1">
|
|
|
- <div class="title" @click="tourOpenClick">档案分类占比统计</div>
|
|
|
- <div class="content">
|
|
|
- <datavClassify :datas="classifyCharts" />
|
|
|
- </div>
|
|
|
- </datavCard>
|
|
|
- <datavCard class="aside-charts-2">
|
|
|
- <div class="title">原生、数字化文件数量（份）</div>
|
|
|
- <div class="content">
|
|
|
- <datavPaper :datas="paperCharts" />
|
|
|
- </div>
|
|
|
- </datavCard>
|
|
|
- </hc-body>
|
|
|
- </el-aside>
|
|
|
- <el-main class="relative">
|
|
|
- <hc-body padding="0">
|
|
|
- <datavBorder class="main-border">
|
|
|
- <div class="main-datav-progress">
|
|
|
- <div class="item">
|
|
|
- <div class="name">内业</div>
|
|
|
- <div class="content">
|
|
|
- <datavProgress :value="projectStat?.inner?.ratio ?? 0" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="name">外业</div>
|
|
|
- <div class="content">
|
|
|
- <datavProgress :value="projectStat?.outer?.ratio ?? 0" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </datavBorder>
|
|
|
- <datavCard class="main-gui">
|
|
|
- <div class="main-gui-header">
|
|
|
- <div class="title">虚拟档案柜</div>
|
|
|
- <div ref="tabsRef" class="extra">
|
|
|
- <template v-for="item in tabs" :key="item.key">
|
|
|
- <div class="tab" :class="tabKey === item.key ? 'cur' : ''" @click="tabsClick(item)">
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="main-gui-content" class="main-gui-content">
|
|
|
- <datavGui :type="tabKey" :project-id="projectId" />
|
|
|
- </div>
|
|
|
- </datavCard>
|
|
|
- </hc-body>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- <el-tour v-model="tourOpen" @close="tourFinishClose">
|
|
|
- <el-tour-step :target="projectNameRef" title="项目名称" description="点击这里，进入档案管理系统" />
|
|
|
- <el-tour-step :target="fullScreenRef" title="是否全屏" description="点击这里切换是否全屏显示" />
|
|
|
- <el-tour-step :target="tabsRef" title="数据类型" description="点击这里切换档案柜的数据类型" />
|
|
|
- </el-tour>
|
|
|
- </el-container>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
-import { useRouter } from 'vue-router'
|
|
|
-import { useAppStore } from '~src/store'
|
|
|
-import { initProjectContract } from '~sto/app'
|
|
|
-import { userConfigSave } from '~api/other'
|
|
|
-import { fullScreen, getArrValue, getObjValue, isNullES } from 'js-fast-way'
|
|
|
-import statsApi from '~api/using/stats'
|
|
|
-
|
|
|
-//图片
|
|
|
-import headerBg from '~ass/datav/header1.png'
|
|
|
-import headerImg1 from '~ass/datav/header2.svg'
|
|
|
-import headerImg2 from '~ass/datav/header3.svg'
|
|
|
-//import bgImg from '~ass/datav/bg15.jpg'
|
|
|
-import bgImg from '~ass/datav/bg.jpg'
|
|
|
-
|
|
|
-//组件
|
|
|
-import datavCard from './components/card.vue'
|
|
|
-import datavBorder from './components/border.vue'
|
|
|
-import datavProgress from './components/progress.vue'
|
|
|
-import datavClassify from './components/classify.vue'
|
|
|
-import datavPaper from './components/paper.vue'
|
|
|
-import datavGui from './components/gui.vue'
|
|
|
-
|
|
|
-//初始化组合式
|
|
|
-const router = useRouter()
|
|
|
-const store = useAppStore()
|
|
|
-
|
|
|
-defineOptions({
|
|
|
- name: 'HcDataV',
|
|
|
-})
|
|
|
-
|
|
|
-const isBgImg = ref(store.isDatavBg)
|
|
|
-
|
|
|
-//渲染完成
|
|
|
-onMounted(() => {
|
|
|
- windowResize()
|
|
|
- setInitData()
|
|
|
- isBgImg.value = store.isDatavBg
|
|
|
- console.log('isBgImg', isBgImg.value)
|
|
|
- if (!isBgImg.value) {
|
|
|
- setTimeout(() => {
|
|
|
- setAppStyle()
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-//设置样式
|
|
|
-const htmlClass = ref('')
|
|
|
-const setAppStyle = () => {
|
|
|
- const appClass = document.documentElement.getAttribute('class')
|
|
|
- htmlClass.value = appClass
|
|
|
- document.documentElement.setAttribute('class', `${appClass} is-no-bg`)
|
|
|
-}
|
|
|
-
|
|
|
-//加载
|
|
|
-const isLoading = ref(false)
|
|
|
-const fullScreenRef = ref()
|
|
|
-const projectNameRef = ref()
|
|
|
-const tabsRef = ref()
|
|
|
-const tourOpen = ref(false)
|
|
|
-
|
|
|
-//获取项目信息
|
|
|
-const project = ref({})
|
|
|
-const projectId = ref(store.projectId)
|
|
|
-const setInitData = async () => {
|
|
|
- isLoading.value = true
|
|
|
- try {
|
|
|
- if (!store.projectContract) {
|
|
|
- await initProjectContract()
|
|
|
- }
|
|
|
- project.value = getObjValue(store.getProjectInfo)
|
|
|
- const project_id = store.projectId
|
|
|
- if (!isNullES(project_id)) {
|
|
|
- projectId.value = project_id
|
|
|
- //获取接口数据
|
|
|
- getClassifyChartsData(project_id)
|
|
|
- getPaperChartsData(project_id)
|
|
|
- getProjectStat(project_id)
|
|
|
- } else {
|
|
|
- window?.$message.warning('项目异常')
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log(error)
|
|
|
- }
|
|
|
- isLoading.value = false
|
|
|
- //是否显示引导提示
|
|
|
- if (store.isDatavTour === 0) {
|
|
|
- setTimeout(() => {
|
|
|
- tourOpen.value = true
|
|
|
- }, 500)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//关闭引导提示
|
|
|
-const tourFinishClose = async () => {
|
|
|
- await userConfigSave({
|
|
|
- isDatavTour: 1,
|
|
|
- })
|
|
|
- store.setIsDatavTour(1)
|
|
|
-}
|
|
|
-
|
|
|
-//监听浏览器窗口变化
|
|
|
-const windowResize = () => {
|
|
|
- window.addEventListener('resize', resizeEvent)
|
|
|
-}
|
|
|
-const resizeEvent = () => {
|
|
|
- window.requestAnimationFrame(() => {
|
|
|
- onWindowResize()
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-//设置尺寸
|
|
|
-const onWindowResize = () => {
|
|
|
- //设置头部背景
|
|
|
- const height = document.getElementById('datav-header-bg').offsetHeight ?? 0
|
|
|
- document.getElementById('datav-header').style.height = `${height}px`
|
|
|
-
|
|
|
- //设置项目名称大小
|
|
|
- const imgHeight = document.getElementById('datav-header').offsetHeight
|
|
|
- const nameHeight = document.getElementById('project-name').clientHeight
|
|
|
- const scale = (imgHeight / (nameHeight + 30)).toFixed(5)
|
|
|
- if (imgHeight && scale < 1) {
|
|
|
- document.getElementById('project-name').style.transform = `scale(${scale}) translateX(-50%)`
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//图片加载完成
|
|
|
-const headerBgLoad = () => {
|
|
|
- onWindowResize()
|
|
|
-}
|
|
|
-
|
|
|
-//档案分类占比统计
|
|
|
-const classifyCharts = ref([
|
|
|
- { value: 0, name: '施工' },
|
|
|
- { value: 0, name: '监理' },
|
|
|
- { value: 0, name: '业主' },
|
|
|
-])
|
|
|
-const getClassifyChartsData = async (projectId) => {
|
|
|
- if (!projectId) {
|
|
|
- window?.$message.warning('项目异常')
|
|
|
- return
|
|
|
- }
|
|
|
- const { data } = await statsApi.getallArchiveByContractType({ projectId })
|
|
|
- const res = getObjValue(data)
|
|
|
- classifyCharts.value = [
|
|
|
- { value: res.key1 ?? 0, name: '施工' },
|
|
|
- { value: res.key2 ?? 0, name: '监理' },
|
|
|
- { value: res.key3 ?? 0, name: '业主' },
|
|
|
- ]
|
|
|
-}
|
|
|
-
|
|
|
-//档案组卷统计
|
|
|
-const paperCharts = ref([
|
|
|
- { title: '施工', key1: 0, key2: 0 },
|
|
|
- { title: '监理', key1: 0, key2: 0 },
|
|
|
- { title: '业主', key1: 0, key2: 0 },
|
|
|
-])
|
|
|
-//获取原生文件数量
|
|
|
-const getPaperChartsData = async (projectId) => {
|
|
|
- if (!projectId) {
|
|
|
- window?.$message.warning('项目异常')
|
|
|
- return
|
|
|
- }
|
|
|
- const { data } = await statsApi.getallnativeChartData({ projectId })
|
|
|
- paperCharts.value = getArrValue(data)
|
|
|
-}
|
|
|
-
|
|
|
-//获取内外业统计
|
|
|
-const projectStat = ref({
|
|
|
- inner: { ratio:0, total:0 },
|
|
|
- outer: { ratio:0, total:0 },
|
|
|
-})
|
|
|
-const getProjectStat = async (projectId) => {
|
|
|
- if (!projectId) {
|
|
|
- window?.$message.warning('项目异常')
|
|
|
- return
|
|
|
- }
|
|
|
- const { data } = await statsApi.getProjectStat({ projectId })
|
|
|
- projectStat.value = getObjValue(data)
|
|
|
-}
|
|
|
-
|
|
|
-//档案柜类型
|
|
|
-const tabKey = ref('2')
|
|
|
-const tabs = ref([
|
|
|
- { label: '业主', key: '1' },
|
|
|
- { label: '监理', key: '3' },
|
|
|
- { label: '施工', key: '2' },
|
|
|
-])
|
|
|
-const tabsClick = (item) => {
|
|
|
- if (tabKey.value === item.key) return
|
|
|
- tabKey.value = item.key
|
|
|
-}
|
|
|
-
|
|
|
-//项目名称被点击
|
|
|
-const projectNameClick = () => {
|
|
|
- router.push({ name: store.homeUrl })
|
|
|
-}
|
|
|
-
|
|
|
-//是否全屏
|
|
|
-const isFullScreen = ref(false)
|
|
|
-const fullScreenClick = () => {
|
|
|
- isFullScreen.value = !isFullScreen.value
|
|
|
- fullScreen(isFullScreen.value)
|
|
|
-}
|
|
|
-
|
|
|
-//被卸载
|
|
|
-onUnmounted(() => {
|
|
|
- window.removeEventListener('resize', resizeEvent)
|
|
|
- if (htmlClass.value) {
|
|
|
- document.documentElement.setAttribute('class', htmlClass.value)
|
|
|
- }
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-@import "~src/styles/view/datav.scss";
|
|
|
-html.is-no-bg {
|
|
|
- background-color: transparent;
|
|
|
- body, #app, .hc-home-datav-box {
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
