|
|
@@ -69,21 +69,119 @@
|
|
|
</el-row>
|
|
|
|
|
|
<HcCardItem ui="hac-card-item mt-4" >
|
|
|
- <template #header>
|
|
|
- <div class="hac-card-title">统计</div>
|
|
|
- </template>
|
|
|
- <div style="position: relative;height:600px;">
|
|
|
+ <div >
|
|
|
<HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
|
|
|
<template #tab-image>
|
|
|
- <div style="position: relative; height: 100%">
|
|
|
- <HcTable :column="tableColumn" :datas="tableData"/>
|
|
|
+ <div style="position: relative; height:600px;">
|
|
|
+ <!-- <HcTable :column="tableColumn" :datas="tableData" v-if="!isProject">
|
|
|
+ <template #name="{row}">
|
|
|
+ <span class="text-blue text-hover" @click="rowNameClick(row)">{{row.name}}</span>
|
|
|
+ </template>
|
|
|
+ </HcTable> -->
|
|
|
+ <el-table :data="tableData" border style="width: 100%" v-if="!isProject" :span-method="objectSpanMethod">
|
|
|
+ <el-table-column prop="name" label="项目名称" />
|
|
|
+ <el-table-column prop="contract" label="合同额（万）" />
|
|
|
+ <el-table-column prop="cost" label="成本预算（万）" />
|
|
|
+ <el-table-column prop="disbursed" label="已支出成本（万）" />
|
|
|
+ <el-table-column prop="receive" label="已回款（万）" />
|
|
|
+ <el-table-column prop="uncollected" label="未回款（万）" />
|
|
|
+ <el-table-column prop="total" label="总计（万）" />
|
|
|
+ </el-table>
|
|
|
+ <div class="project_table" v-else>
|
|
|
+ <div class="project_table_title">
|
|
|
+ <HcIcon name="arrow-left-double" class="goback_icon" @click="showAllexcel" v-if="isShowDetailtable===1"/>
|
|
|
+ <HcIcon name="arrow-left-double" class="goback_icon" @click="showDetail" v-if="isShowDetailtable===2"/>
|
|
|
+ <HcIcon name="arrow-left-double" class="goback_icon" @click="showPrice" v-if="isShowDetailtable===3"/>
|
|
|
+ XXX项目
|
|
|
+ </div>
|
|
|
+ <HcTable :column="protableColumn" :datas="protableData" v-if="isShowDetailtable===1">
|
|
|
+ <template #detail="{row}">
|
|
|
+ <span class="text-blue text-hover" @click="rowDetail(row)">查看明细</span>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+ <HcTable :column="priceColumn" :datas="priceData" v-if="isShowDetailtable===2">
|
|
|
+ <template #detail="{row}">
|
|
|
+ <span class="text-blue text-hover" @click="rowpriceDetail(row)">查看明细</span>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+ <HcTable :column="costColumn" :datas="costData" v-if="isShowDetailtable===3">
|
|
|
+ <template #detail="{row}">
|
|
|
+ <span class="text-blue text-hover">成本明细</span>
|
|
|
+ </template>
|
|
|
+ </HcTable>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
+
|
|
|
+
|
|
|
<template #tab-excel>
|
|
|
- <div style="position: relative; height: 100%">
|
|
|
- <HcTable :column="tableColumn" :datas="tableData"/>
|
|
|
+ <div style="position: relative; padding:20px" v-if="!isProject">
|
|
|
+ <HcCardItem ui="hac-card-item" >
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title">项目回款/未回款统计</div>
|
|
|
+ </template>
|
|
|
+ <div class="hac-card-item-body">
|
|
|
+ <el-row :gutter="14">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="hac-row-total-item">
|
|
|
+ <div class="num">1234.33</div>
|
|
|
+ <div class="text">累计总回款</div>
|
|
|
+ <div class="text">占比34%</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="hac-row-total-item">
|
|
|
+ <div class="num">123456</div>
|
|
|
+ <div class="text">累计剩余回款</div>
|
|
|
+ <div class="text">占比34%</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="hac-row-total-item">
|
|
|
+ <div class="num">3</div>
|
|
|
+ <div class="text">累计总项目</div>
|
|
|
+ <div class="text">占比34%</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </HcCardItem>
|
|
|
+ <div class="hc-main-row" v-if="tabsKey==='excel'">
|
|
|
+ <el-row :gutter="14" class="mt-8" >
|
|
|
+ <el-col :span="12">
|
|
|
+
|
|
|
+ <HcCardItem ui="hac-card-item">
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title">回款排行榜</div>
|
|
|
+ </template>
|
|
|
+ <div class="hc-row-echarts-box" style="height: 360px;" >
|
|
|
+ <WordPopulation isMonth />
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <HcCardItem ui="hac-card-item">
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title">支出回款对比</div>
|
|
|
+ </template>
|
|
|
+ <div class="hc-row-echarts-box" style="height: 360px;">
|
|
|
+ <StackedLine isMonth />
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
+ <div v-else>11111</div>
|
|
|
</template>
|
|
|
|
|
|
</HcTabsSimple>
|
|
|
@@ -101,6 +199,8 @@ import HeImg from "~src/assets/images/he.png";
|
|
|
import ShouImg from "~src/assets/images/shou.png";
|
|
|
import ZhiImg from "~src/assets/images/zhi.png";
|
|
|
import Zhi1Img from "~src/assets/images/zhi1.png";
|
|
|
+import StackedLine from "~com/echarts/StackedLine.vue";
|
|
|
+ import WordPopulation from "~com/echarts/WordPopulation.vue";
|
|
|
import {ref} from "vue";
|
|
|
//类型处理
|
|
|
const tabsKey = ref('image')
|
|
|
@@ -111,18 +211,99 @@ const tabsData = ref([
|
|
|
|
|
|
const tabsClick = (key) => {
|
|
|
tabsKey.value = key
|
|
|
+}
|
|
|
+//合并
|
|
|
+const objectSpanMethod=()=>{
|
|
|
+
|
|
|
}
|
|
|
const tableColumn = [
|
|
|
- {key: 'name', name: '名称'},
|
|
|
- {key: 'text', name: '文本'},
|
|
|
- {key: 'color', name: '颜色'}
|
|
|
+ {key: 'name', name: '项目名称'},
|
|
|
+ {key: 'text', name: '合同额（万）'},
|
|
|
+ {key: 'text', name: '成本预算（万）'},
|
|
|
+ {key: 'text', name: '已支出成本（万）'},
|
|
|
+ {key: 'text', name: '已回款（万）'},
|
|
|
+ {key: 'text', name: '未回款（万）'},
|
|
|
+ {key: 'text', name: '总计（万）'},
|
|
|
]
|
|
|
const tableData = ref([
|
|
|
+ {name: '延长高速公路大蒲柴河至烟筒山段PPP项目', contract: '222', cost: 'red',disbursed:'1111',receive:'1111',uncollected:'2222',total:10000},
|
|
|
+ {name: '延长高速公路大蒲柴河至烟筒山段PPP项目', contract: '222', cost: 'red',disbursed:'1111',receive:'1111',uncollected:'2222',total:10000},
|
|
|
+ {name: '延长高速公路大蒲柴河至烟筒山段PPP项目', contract: '222', cost: 'red',disbursed:'1111',receive:'1111',uncollected:'2222',total:10000},
|
|
|
+])
|
|
|
+const protableColumn = [
|
|
|
+ {key: 'name', name: '项目环节'},
|
|
|
+ {key: 'text', name: '状态'},
|
|
|
+ {key: 'text', name: '成本支出（万）'},
|
|
|
+ {key: 'text', name: '时间成本（工作日）'},
|
|
|
+ {key: 'text', name: '人员投入（万）'},
|
|
|
+ {key: 'detail', name: '明细'},
|
|
|
+
|
|
|
+]
|
|
|
+const protableData = ref([
|
|
|
{name: '名称1', text: '文本1', color: 'red'},
|
|
|
{name: '名称2', text: '文本2', color: 'blue'},
|
|
|
{name: '名称3', text: '文本3', color: '无'}
|
|
|
])
|
|
|
+const isProject=ref(false)
|
|
|
+const rowNameClick=(row)=>{
|
|
|
+ isProject.value=true
|
|
|
+ isShowDetailtable.value=1
|
|
|
+}
|
|
|
+const showAllexcel=()=>{
|
|
|
+ isProject.value=false
|
|
|
+ isShowDetailtable.value=1
|
|
|
+
|
|
|
+}
|
|
|
+const showDetail=()=>{
|
|
|
+ isShowDetailtable.value=1
|
|
|
+}
|
|
|
+const isShowDetailtable=ref(1)
|
|
|
+const rowDetail=()=>{
|
|
|
+ isShowDetailtable.value=2
|
|
|
+}
|
|
|
+
|
|
|
+//费用明细
|
|
|
+
|
|
|
+const priceColumn = [
|
|
|
+ {key: 'name', name: '费用分类'},
|
|
|
+ {key: 'text', name: '费用（元）'},
|
|
|
+ {key: 'detail', name: '费用明细'},
|
|
|
+
|
|
|
+]
|
|
|
+const priceData = ref([
|
|
|
+ {name: '名称1', text: '文本1', color: 'red'},
|
|
|
+ {name: '名称2', text: '文本2', color: 'blue'},
|
|
|
+ {name: '名称3', text: '文本3', color: '无'}
|
|
|
+])
|
|
|
+const rowpriceDetail=()=>{
|
|
|
+ isShowDetailtable.value=3
|
|
|
+}
|
|
|
+const showPrice=()=>{
|
|
|
+ isShowDetailtable.value=2
|
|
|
+}
|
|
|
+//成本明细cost
|
|
|
+const costColumn = [
|
|
|
+ {key: 'name', name: '成本投入对象'},
|
|
|
+ {key: 'text', name: '费用（元）'},
|
|
|
+
|
|
|
+
|
|
|
+]
|
|
|
+const costData = ref([
|
|
|
+ {name: '名称1', text: '文本1', color: 'red'},
|
|
|
+ {name: '名称2', text: '文本2', color: 'blue'},
|
|
|
+
|
|
|
+])
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import "~src/styles/static/project.scss";
|
|
|
+.project_table_title{
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom:15px;
|
|
|
+}
|
|
|
+.goback_icon{
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: bolder;
|
|
|
+ color:var(--el-color-primary);
|
|
|
+}
|
|
|
</style>
|
