|
|
@@ -1,285 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="hc-layout-box">
|
|
|
- <div v-if="contractInfo?.contractType === 2 || contractInfo?.contractType === 3">
|
|
|
- <hc-new-switch :datas="contractTypeTab" :keys="contractTypeTabKey" size="default" @change="contractTypeTabChange" />
|
|
|
- </div>
|
|
|
- <div v-loading="isProcessLoading" class="hc-round-chart mt-14px">
|
|
|
- <el-row :gutter="30">
|
|
|
- <template v-for="(item, index) in processMaterialList" :key="index">
|
|
|
- <el-col v-if="item.isHide === 0" :span="isProcessSpan">
|
|
|
- <div class="hc-round-chart-card-box">
|
|
|
- <div class="hc-card-content-box">
|
|
|
- <div class="card-title w-100 flex justify-between">
|
|
|
- <div>
|
|
|
- {{ item.title }}
|
|
|
- </div>
|
|
|
- <!-- <div class="eye-icon-container">
|
|
|
- <HcTooltip keys="schedule-data-hide">
|
|
|
- <el-link type="warning" @click="hideData(item)">
|
|
|
- <HcIcon name="eye-off" />
|
|
|
- </el-link>
|
|
|
- </HcTooltip>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div class="card-ratio-box">
|
|
|
- <div class="ratio-num">{{ item.ratio }}</div>
|
|
|
- <div class="ratio-text">
|
|
|
- <div class="unit">%</div>
|
|
|
- <div class="text">完成率</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="card-amount-box">
|
|
|
- <div class="amount-item">
|
|
|
- <div class="text">应填(份)</div>
|
|
|
- <div class="num">{{ item.amount }}</div>
|
|
|
- </div>
|
|
|
- <div class="amount-divider" />
|
|
|
- <div class="amount-item">
|
|
|
- <div class="text">已填(份)</div>
|
|
|
- <div class="num">{{ item.successAmount }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="hc-card-chart-box">
|
|
|
- <RoundChart :ratio="item.ratio" />
|
|
|
- <div class="text-num">{{ item.ratio }}%</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </template>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div class="hc-chart-flex">
|
|
|
- <el-row :gutter="30" class="h-full">
|
|
|
- <el-col :span="18" class="h-full">
|
|
|
- <div class="hc-report-chart-card-box">
|
|
|
- <div class="hc-chart-title">
|
|
|
- <span class="title">报表资料审批统计</span>
|
|
|
- <span class="hc-chart-text">(已审批{{ materialList }}份)</span>
|
|
|
- </div>
|
|
|
- <div class="hc-report-chart-box">
|
|
|
- <ReportChart :datas="processMaterialStatusList" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="h-full">
|
|
|
- <div class="hc-media-chart-card-box">
|
|
|
- <div class="hc-chart-title">
|
|
|
- <span class="title">声像媒体资料统计</span>
|
|
|
- <el-button round size="large" @click="toTableClick">
|
|
|
- <span>WBS节点进度</span>
|
|
|
- <HcIcon name="arrow-right-s" style="margin-right: 0;" ui="ml-2" />
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- <div class="hc-media-chart-box">
|
|
|
- <div class="hc-media-pian-box">
|
|
|
- <div class="item">
|
|
|
- <span class="name">总计</span>
|
|
|
- <span class="num">{{ imageClassInfo.amount }}</span>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="name">图片</span>
|
|
|
- <span class="num c1">{{ imageClassInfo.image }}</span>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <span class="name">视频</span>
|
|
|
- <span class="num c2">{{ imageClassInfo.video }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <MediaChart :datas="contractImageClassificationList" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { onActivated, ref } from 'vue'
|
|
|
-import { useRouter } from 'vue-router'
|
|
|
-import { useAppStore } from '~src/store'
|
|
|
-import { getArrValue, useClick } from 'js-fast-way'
|
|
|
-import RoundChart from './components/echarts/RoundChart.vue'
|
|
|
-import ReportChart from './components/echarts/ReportChart.vue'
|
|
|
-import MediaChart from './components/echarts/MediaChart.vue'
|
|
|
-import DataApi from '~api/schedule/data'
|
|
|
-
|
|
|
-//变量
|
|
|
-const router = useRouter()
|
|
|
-const useAppState = useAppStore()
|
|
|
-const projectId = ref(useAppState.getProjectId)
|
|
|
-const contractId = ref(useAppState.getContractId)
|
|
|
-const contractInfo = ref(useAppState.getContractInfo)
|
|
|
-const isCollapse = ref(useAppState.getCollapse)
|
|
|
-
|
|
|
-//渲染完成
|
|
|
-onActivated(async () => {
|
|
|
- await useClick()
|
|
|
- queryMaterialProgress()
|
|
|
- queryMaterialProgressStatus()
|
|
|
- queryImageClassification()
|
|
|
-})
|
|
|
-
|
|
|
-//结构类型tab数据和相关处理
|
|
|
-const contractTypeTabKey = ref(2)
|
|
|
-const contractTypeTab = ref([
|
|
|
- { key: '1', name: '施工数据' },
|
|
|
- { key: '2', name: '监理数据' },
|
|
|
-])
|
|
|
-const contractTypeTabChange = ({ key }) => {
|
|
|
- contractTypeTabKey.value = key
|
|
|
- queryMaterialProgress()
|
|
|
- queryMaterialProgressStatus()
|
|
|
- queryImageClassification()
|
|
|
-}
|
|
|
-
|
|
|
-//获取合同段类型
|
|
|
-const getContractTypeKey = () => {
|
|
|
- const { contractType } = contractInfo.value
|
|
|
- if (contractType === 2 || contractType === 3) {
|
|
|
- return contractTypeTabKey.value ?? '1'
|
|
|
- } else {
|
|
|
- return null
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//查询内业资料进度
|
|
|
-const isProcessLoading = ref(false)
|
|
|
-const processMaterialList = ref([])
|
|
|
-const isProcessSpan = ref(24)
|
|
|
-const queryMaterialProgress = async () => {
|
|
|
- isProcessLoading.value = true
|
|
|
- const classifyType = getContractTypeKey()
|
|
|
- const { error, code, data } = await DataApi.queryMaterialProgress({
|
|
|
- projectId: projectId.value,
|
|
|
- contractId: contractId.value,
|
|
|
- classifyType: classifyType,
|
|
|
- })
|
|
|
- //处理数据
|
|
|
- isProcessLoading.value = false
|
|
|
- if (!error && code === 200) {
|
|
|
- const newArr = getArrValue(data?.processMaterialList)
|
|
|
- processMaterialList.value = newArr
|
|
|
- if (newArr.length === 4) {
|
|
|
- isProcessSpan.value = 6
|
|
|
- } else if (newArr.length === 3) {
|
|
|
- isProcessSpan.value = 8
|
|
|
- } else if (newArr.length === 2) {
|
|
|
- isProcessSpan.value = 12
|
|
|
- } else if (newArr.length === 1) {
|
|
|
- isProcessSpan.value = 24
|
|
|
- } else if (newArr.length === 0) {
|
|
|
- isProcessSpan.value = 24
|
|
|
- }
|
|
|
- } else {
|
|
|
- processMaterialList.value = []
|
|
|
- isProcessSpan.value = 24
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-//报表资料审批统计
|
|
|
-const materialList = ref(0)
|
|
|
-const isMaterialLoading = ref(false)
|
|
|
-const processMaterialStatusList = ref([])
|
|
|
-const queryMaterialProgressStatus = async () => {
|
|
|
- isMaterialLoading.value = true
|
|
|
- const classifyType = getContractTypeKey()
|
|
|
- const { error, code, data } = await DataApi.queryMaterialProgressStatus({
|
|
|
- projectId: projectId.value,
|
|
|
- contractId: contractId.value,
|
|
|
- classifyType: classifyType,
|
|
|
- })
|
|
|
- //处理数据
|
|
|
- isMaterialLoading.value = false
|
|
|
- if (!error && code === 200) {
|
|
|
- let num = 0
|
|
|
- const listData = getArrValue(data?.processMaterialStatusList)
|
|
|
- for (let i = 0; i < listData.length; i++) {
|
|
|
- const Amount = listData[i]?.approvalAmount || 0
|
|
|
- num += Amount
|
|
|
- }
|
|
|
- materialList.value = num
|
|
|
- processMaterialStatusList.value = listData
|
|
|
- } else {
|
|
|
- materialList.value = 0
|
|
|
- processMaterialStatusList.value = []
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//声像媒体资料统计
|
|
|
-const isImageClassLoading = ref(false)
|
|
|
-const contractImageClassificationList = ref([])
|
|
|
-const imageClassInfo = ref({ amount: 0, image: 0, video: 0 })
|
|
|
-const queryImageClassification = async () => {
|
|
|
- isImageClassLoading.value = true
|
|
|
- const classifyType = getContractTypeKey()
|
|
|
- const { error, code, data } = await DataApi.queryImageClassification({
|
|
|
- projectId: projectId.value,
|
|
|
- contractId: contractId.value,
|
|
|
- classifyType: classifyType,
|
|
|
- })
|
|
|
- //处理数据
|
|
|
- isImageClassLoading.value = false
|
|
|
- if (!error && code === 200) {
|
|
|
- const imageClassList = getArrValue(data?.contractImageClassificationList)
|
|
|
- contractImageClassificationList.value = imageClassList
|
|
|
- //数据显示
|
|
|
- let AxisData = { amount: 0, image: 0, video: 0 }
|
|
|
- for (let i = 0; i < imageClassList.length; i++) {
|
|
|
- AxisData.amount = imageClassList[i].amount
|
|
|
- AxisData.image = imageClassList[i].imageAmount
|
|
|
- AxisData.video = imageClassList[i].videoAmount
|
|
|
- }
|
|
|
- imageClassInfo.value = AxisData
|
|
|
- } else {
|
|
|
- contractImageClassificationList.value = []
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//查看WBS节点进度
|
|
|
-const toTableClick = () => {
|
|
|
- router.push({ path: '/schedule/table' })
|
|
|
-}
|
|
|
-const hideLoad = ref(false)
|
|
|
-const hideData = async (item)=>{
|
|
|
- hideLoad.value = true
|
|
|
- const classifyType = getContractTypeKey()
|
|
|
- const { error, code, msg } = await DataApi.hideProcessMaterial({
|
|
|
- hideType:item.hideType,
|
|
|
- contractId: contractId.value,
|
|
|
- classifyType: classifyType,
|
|
|
- type:1,
|
|
|
- })
|
|
|
- //处理数据
|
|
|
- hideLoad.value = false
|
|
|
- if (!error && code === 200) {
|
|
|
- window.$message.success(msg)
|
|
|
- queryMaterialProgress()
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-/* 默认隐藏闭眼图标容器 */
|
|
|
-.hc-round-chart-card-box .eye-icon-container {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
-/* 鼠标移入卡片时显示闭眼图标 */
|
|
|
-.hc-round-chart-card-box:hover .eye-icon-container {
|
|
|
- display: block;
|
|
|
-}
|
|
|
-
|
|
|
-/* 可选：添加过渡效果让显示更平滑 */
|
|
|
-.eye-icon-container {
|
|
|
- transition: opacity 0.3s ease;
|
|
|
- opacity: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.hc-round-chart-card-box:hover .eye-icon-container {
|
|
|
- opacity: 1;
|
|
|
-}
|
|
|
-@import "../../styles/schedule/hc-data.scss";
|
|
|
-</style>
|
