|
|
@@ -1,323 +1,255 @@
|
|
|
<template>
|
|
|
- <el-scrollbar class="hc-main-scrollbar">
|
|
|
- <div class="hc-main-row">
|
|
|
- <el-row :gutter="14">
|
|
|
- <el-col :span="6">
|
|
|
- <HcGradientCard color="purple1">
|
|
|
- <div class="hc-card-item-sub">
|
|
|
- <div class="item-sub-content">
|
|
|
- <div class="title">总支出</div>
|
|
|
- <div class="num-box">
|
|
|
- <span class="num">1200</span>
|
|
|
- <span class="text">万</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item-sub-icon">
|
|
|
- <img class="img" :src="HeImg" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </HcGradientCard>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <HcGradientCard color="blue1">
|
|
|
- <div class="hc-card-item-sub">
|
|
|
- <div class="item-sub-content">
|
|
|
- <div class="title">总合同额</div>
|
|
|
- <div class="num-box">
|
|
|
- <span class="num">560</span>
|
|
|
- <span class="text">万</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item-sub-icon">
|
|
|
- <img class="img" :src="ShouImg" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </HcGradientCard>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <HcGradientCard color="red1">
|
|
|
- <div class="hc-card-item-sub">
|
|
|
- <div class="item-sub-content">
|
|
|
- <div class="title">总回款收入</div>
|
|
|
- <div class="num-box">
|
|
|
- <span class="num">90</span>
|
|
|
- <span class="text">万</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item-sub-icon">
|
|
|
- <img class="img" :src="ZhiImg" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </HcGradientCard>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <HcGradientCard color="purple1">
|
|
|
- <div class="hc-card-item-sub">
|
|
|
- <div class="item-sub-content">
|
|
|
- <div class="title">总盈亏</div>
|
|
|
- <div class="num-box">
|
|
|
- <span class="num">125</span>
|
|
|
- <span class="text">万</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item-sub-icon">
|
|
|
- <img class="img" :src="Zhi1Img" alt="">
|
|
|
+ <el-scrollbar class="hc-main-scrollbar">
|
|
|
+ <div class="hc-main-row">
|
|
|
+ <el-row :gutter="14">
|
|
|
+ <el-col :span="6">
|
|
|
+ <HcGradientCard color="purple1">
|
|
|
+ <div class="hc-card-item-sub">
|
|
|
+ <div class="item-sub-title">总支出</div>
|
|
|
+ <div class="item-sub-num">
|
|
|
+ <span class="num">1200</span>
|
|
|
+ <span class="text">万</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcGradientCard>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <HcGradientCard color="blue1">
|
|
|
+ <div class="hc-card-item-sub">
|
|
|
+ <div class="item-sub-title">总合同额</div>
|
|
|
+ <div class="item-sub-num">
|
|
|
+ <span class="num">560</span>
|
|
|
+ <span class="text">万</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcGradientCard>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <HcGradientCard color="red1">
|
|
|
+ <div class="hc-card-item-sub">
|
|
|
+ <div class="item-sub-title">总回款收入</div>
|
|
|
+ <div class="item-sub-num">
|
|
|
+ <span class="num">90</span>
|
|
|
+ <span class="text">万</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcGradientCard>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <HcGradientCard color="purple1">
|
|
|
+ <div class="hc-card-item-sub">
|
|
|
+ <div class="item-sub-title">总盈亏</div>
|
|
|
+ <div class="item-sub-num">
|
|
|
+ <span class="num">125</span>
|
|
|
+ <span class="text">万</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcGradientCard>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick" class="mt-6">
|
|
|
+ <template #tab-image>
|
|
|
+ <div class="bg-white p-2">
|
|
|
+ <el-table :data="tableData" border style="width: 100%"
|
|
|
+ v-if="!isProject"
|
|
|
+ :span-method="spanMethod"
|
|
|
+ :cell-style="columnStyle"
|
|
|
+ :header-cell-style="tableHeaderColor"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="项目名称">
|
|
|
+ <template #default="scope">
|
|
|
+ <div @click='rowNameClick(scope.row)'>
|
|
|
+ <span class="text-blue text-hover" @click="rowNameClick(scope.row)"> {{ scope.row.name }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </HcGradientCard>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <HcCardItem ui="hac-card-item mt-4" >
|
|
|
- <div >
|
|
|
- <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
|
|
|
- <template #tab-image>
|
|
|
- <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="spanMethod"
|
|
|
- :cell-style="columnStyle"
|
|
|
- :header-cell-style="tableHeaderColor"
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="contract" label="合同额（万）" align="center"/>
|
|
|
+ <el-table-column prop="cost" label="成本预算（万）" align="center"/>
|
|
|
+ <el-table-column prop="disbursed" label="已支出成本（万）" align="center"/>
|
|
|
+ <el-table-column prop="receive" label="已回款（万）" align="center"/>
|
|
|
+ <el-table-column prop="uncollected" label="未回款（万）" align="center"/>
|
|
|
+ <el-table-column prop="total" label="总计（万）" align="center"/>
|
|
|
+ </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>
|
|
|
+ <el-table :data="protableData" border style="width: 100%" v-if="isShowDetailtable===1">
|
|
|
+ <el-table-column prop="link" label="项目环节" align="center"/>
|
|
|
+ <el-table-column prop="type" label="状态" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <HcIcon name="checkbox-circle" class="text-green " v-if="scope.row.type==1"/>
|
|
|
+ <HcIcon name="error-warning" class="text-red " v-else/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="cost" label="成本支出（万）" align="center"/>
|
|
|
+ <el-table-column prop="timecost" label="时间成本（工作日）" align="center"/>
|
|
|
+ <el-table-column prop="peoplecost" label="人员投入（人）" align="center"/>
|
|
|
+ <el-table-column prop="detail" label="明细">
|
|
|
+ <template #default="scope">
|
|
|
+ <div @click='rowDetail(scope.row)'>
|
|
|
+ <span class="text-blue text-hover">查看明细</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table :data="priceData" border style="width: 100%"
|
|
|
+ v-if="isShowDetailtable===2"
|
|
|
+ :span-method="pricespanMethod"
|
|
|
+ :cell-style="pricecolumnStyle"
|
|
|
+ :header-cell-style="pricetableHeaderColor"
|
|
|
>
|
|
|
- <el-table-column prop="name" label="项目名称">
|
|
|
- <template #default="scope">
|
|
|
- <div @click='rowNameClick(scope.row)'>
|
|
|
- <span class="text-blue text-hover" @click="rowNameClick(scope.row)"> {{scope.row.name}}</span>
|
|
|
+ <el-table-column prop="pricetype" label="费用分类"/>
|
|
|
+ <el-table-column prop="price" label="费用（元）" align="center"/>
|
|
|
+ <el-table-column prop="detail" label="费用明细" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <div @click='rowpriceDetail(scope.row)'>
|
|
|
+ <span class="text-blue text-hover">查看明细</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="contract" label="合同额（万）" align="center" />
|
|
|
- <el-table-column prop="cost" label="成本预算（万）" align="center" />
|
|
|
- <el-table-column prop="disbursed" label="已支出成本（万）" align="center" />
|
|
|
- <el-table-column prop="receive" label="已回款（万）" align="center" />
|
|
|
- <el-table-column prop="uncollected" label="未回款（万）" align="center" />
|
|
|
- <el-table-column prop="total" label="总计（万）" align="center" />
|
|
|
+ <el-table-column prop="total" label="总计" align="center"/>
|
|
|
</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>
|
|
|
- <el-table :data="protableData" border style="width: 100%"
|
|
|
- v-if="isShowDetailtable===1"
|
|
|
- >
|
|
|
-
|
|
|
- <el-table-column prop="link" label="项目环节" align="center" />
|
|
|
- <el-table-column prop="type" label="状态" align="center" >
|
|
|
- <template #default="scope">
|
|
|
- <HcIcon name="checkbox-circle" class="text-green " v-if="scope.row.type==1"/>
|
|
|
- <HcIcon name="error-warning" class="text-red " v-else/>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="cost" label="成本支出（万）" align="center" />
|
|
|
- <el-table-column prop="timecost" label="时间成本（工作日）" align="center" />
|
|
|
- <el-table-column prop="peoplecost" label="人员投入（人）" align="center" />
|
|
|
-
|
|
|
- <el-table-column prop="detail" label="明细">
|
|
|
- <template #default="scope">
|
|
|
- <div @click='rowDetail(scope.row)'>
|
|
|
- <span class="text-blue text-hover">查看明细</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-table :data="priceData" border style="width: 100%"
|
|
|
- v-if="isShowDetailtable===2"
|
|
|
- :span-method="pricespanMethod"
|
|
|
- :cell-style="pricecolumnStyle"
|
|
|
- :header-cell-style="pricetableHeaderColor"
|
|
|
- >
|
|
|
- <el-table-column prop="pricetype" label="费用分类">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="price" label="费用（元）" align="center" />
|
|
|
-
|
|
|
- <el-table-column prop="detail" label="费用明细" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <div @click='rowpriceDetail(scope.row)'>
|
|
|
- <span class="text-blue text-hover">查看明细</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="total" label="总计" align="center" />
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <el-table :data="costData" border style="width: 100%"
|
|
|
- v-if="isShowDetailtable===3"
|
|
|
- :span-method="costspanMethod"
|
|
|
- :cell-style="costcolumnStyle"
|
|
|
- :header-cell-style="costtableHeaderColor"
|
|
|
- >
|
|
|
- <el-table-column prop="costobject" label="成本投入对象">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="price" label="费用（元）" align="center" />
|
|
|
-
|
|
|
- <el-table-column prop="total" label="总计" align="center" />
|
|
|
- </el-table>
|
|
|
+ <el-table :data="costData" border style="width: 100%"
|
|
|
+ v-if="isShowDetailtable===3"
|
|
|
+ :span-method="costspanMethod"
|
|
|
+ :cell-style="costcolumnStyle"
|
|
|
+ :header-cell-style="costtableHeaderColor"
|
|
|
+ >
|
|
|
+ <el-table-column prop="costobject" label="成本投入对象"/>
|
|
|
+ <el-table-column prop="price" label="费用（元）" align="center"/>
|
|
|
+ <el-table-column prop="total" label="总计" align="center"/>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #tab-excel>
|
|
|
+ <div style="position: relative; background-color: #EBF4F6;" 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>
|
|
|
+ <div class="hc-row-echarts-box" style="height: 300px;margin-top:10px" v-if="tabsKey==='excel'">
|
|
|
+ <StackedDouble isMonth name="已回款" :ydata="costsydata" :xdata="costxdata" :legend="costlegend" unit="元"/>
|
|
|
</div>
|
|
|
-
|
|
|
+ </HcCardItem>
|
|
|
+ <div class="hc-main-row" v-if="tabsKey==='excel'">
|
|
|
+ <el-row :gutter="14" class="mt-4">
|
|
|
+ <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: 300px;">
|
|
|
+ <WordPopulation isMonth name="已回款" :ydata="ydata" :xdata="xdata" unit="元"/>
|
|
|
+ </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: 300px;">
|
|
|
+ <StackedLine isMonth :ydata="sydata" :xdata="sxdata" :legend="slegend"/>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
-
|
|
|
- </template>
|
|
|
-
|
|
|
-
|
|
|
- <template #tab-excel>
|
|
|
- <div style="position: relative; " 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>
|
|
|
- <div class="hc-row-echarts-box" style="height: 300px;margin-top:10px" v-if="tabsKey==='excel'">
|
|
|
- <StackedDouble isMonth name="已回款" :ydata="costsydata" :xdata="costxdata" :legend="costlegend" unit="元"/>
|
|
|
- </div>
|
|
|
- </HcCardItem>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div v-if="isShowDetailtable===1">
|
|
|
<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: 300px;" >
|
|
|
- <WordPopulation isMonth name="已回款" :ydata="ydata" :xdata="xdata" unit="元"/>
|
|
|
- </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: 300px;">
|
|
|
- <StackedLine isMonth :ydata="sydata" :xdata="sxdata" :legend="slegend"/>
|
|
|
- </div>
|
|
|
- </HcCardItem>
|
|
|
- </el-col>
|
|
|
+ <el-row :gutter="14">
|
|
|
+ <el-col :span="24">
|
|
|
+ <HcCardItem ui="hac-card-item">
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title">项目投入环节占比</div>
|
|
|
+ </template>
|
|
|
+ <div class="hc-row-echarts-box" style="height: 300px;width:50%">
|
|
|
+ <SimpleChart :datas="incomeStatisticsDatas " v-if="isShowDetailtable===1"/>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
- <div v-else >
|
|
|
- <div v-if="isShowDetailtable===1">
|
|
|
- <div class="hc-main-row" v-if="tabsKey==='excel'">
|
|
|
- <el-row :gutter="14" >
|
|
|
- <el-col :span="24">
|
|
|
-
|
|
|
- <HcCardItem ui="hac-card-item">
|
|
|
- <template #header>
|
|
|
- <div class="hac-card-title">项目投入环节占比</div>
|
|
|
- </template>
|
|
|
- <div class="hc-row-echarts-box" style="height: 300px;width:50%" >
|
|
|
- <SimpleChart :datas="incomeStatisticsDatas " v-if="isShowDetailtable===1"/>
|
|
|
- </div>
|
|
|
- </HcCardItem>
|
|
|
-
|
|
|
- </el-col>
|
|
|
-
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="isShowDetailtable===2">
|
|
|
- <div class="hc-main-row" v-if="tabsKey==='excel'">
|
|
|
- <el-row :gutter="14" >
|
|
|
- <el-col :span="24">
|
|
|
-
|
|
|
- <HcCardItem ui="hac-card-item">
|
|
|
- <template #header>
|
|
|
- <div class="hac-card-title">费用分类占比统计</div>
|
|
|
- </template>
|
|
|
- <div class="hc-row-echarts-box" style="height: 500px;" >
|
|
|
- <Rose v-if="isShowDetailtable===2"/>
|
|
|
- </div>
|
|
|
- </HcCardItem>
|
|
|
-
|
|
|
- </el-col>
|
|
|
-
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <div v-if="isShowDetailtable===2">
|
|
|
+ <div class="hc-main-row" v-if="tabsKey==='excel'">
|
|
|
+ <el-row :gutter="14">
|
|
|
+ <el-col :span="24">
|
|
|
+ <HcCardItem ui="hac-card-item">
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title">费用分类占比统计</div>
|
|
|
+ </template>
|
|
|
+ <div class="hc-row-echarts-box" style="height: 500px;">
|
|
|
+ <Rose v-if="isShowDetailtable===2"/>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
- <div v-if="isShowDetailtable===3">
|
|
|
- <div class="hc-main-row" v-if="tabsKey==='excel'">
|
|
|
- <el-row :gutter="14" >
|
|
|
- <el-col :span="24">
|
|
|
-
|
|
|
- <HcCardItem ui="hac-card-item">
|
|
|
- <template #header>
|
|
|
- <div class="hac-card-title">投入对象成本</div>
|
|
|
- </template>
|
|
|
- <div class="hc-row-echarts-box" style="height: 300px;" >
|
|
|
- <WordPopulation isMonth name="费用" :ydata="costobjectydata" :xdata="xdata" unit="元"/>
|
|
|
- </div>
|
|
|
- </HcCardItem>
|
|
|
-
|
|
|
- </el-col>
|
|
|
-
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="isShowDetailtable===3">
|
|
|
+ <div class="hc-main-row" v-if="tabsKey==='excel'">
|
|
|
+ <el-row :gutter="14">
|
|
|
+ <el-col :span="24">
|
|
|
+ <HcCardItem ui="hac-card-item">
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title">投入对象成本</div>
|
|
|
+ </template>
|
|
|
+ <div class="hc-row-echarts-box" style="height: 300px;">
|
|
|
+ <WordPopulation isMonth name="费用" :ydata="costobjectydata" :xdata="xdata" unit="元"/>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- </HcTabsSimple>
|
|
|
- </div>
|
|
|
- </HcCardItem>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </HcTabsSimple>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import QImg from "~src/assets/images/q.png";
|
|
|
-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 {ref} from "vue";
|
|
|
import StackedLine from "~com/echarts/StackedLine.vue";
|
|
|
import WordPopulation from "~com/echarts/WordPopulation.vue";
|
|
|
import StackedDouble from "~com/echarts/StackedDouble.vue";
|
|
|
import SimpleChart from "~com/echarts/SimpleChart.vue";
|
|
|
import Rose from "~com/echarts/Rose.vue";
|
|
|
import {getSpanMethod} from "~src/utils/el-table-span-method";
|
|
|
-import {ref} from "vue";
|
|
|
-
|
|
|
|
|
|
//类型处理
|
|
|
const tabsKey = ref('image')
|
|
|
@@ -331,56 +263,79 @@ const tabsClick = (key) => {
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
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},
|
|
|
+ {
|
|
|
+ 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 spanMethod=ref(
|
|
|
- getSpanMethod(tableData.value,['id'],['total'])
|
|
|
+const spanMethod = ref(
|
|
|
+ getSpanMethod(tableData.value, ['id'], ['total'])
|
|
|
)
|
|
|
-const columnStyle = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
- // 状态列字体颜色
|
|
|
- // columnIndex 列下标
|
|
|
- // rowIndex 行下标
|
|
|
- // row 行
|
|
|
- // column 列
|
|
|
- if ( columnIndex === 6) {
|
|
|
- return {background:"rgba(64, 149, 229, 0.44)",fontSize:"24px" };
|
|
|
-
|
|
|
+const columnStyle = ({row, column, rowIndex, columnIndex}) => {
|
|
|
+ // 状态列字体颜色
|
|
|
+ // columnIndex 列下标
|
|
|
+ // rowIndex 行下标
|
|
|
+ // row 行
|
|
|
+ // column 列
|
|
|
+ if (columnIndex === 6) {
|
|
|
+ return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px"};
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
// 更改表头样式
|
|
|
-const tableHeaderColor= ({ row, column, rowIndex, columnIndex })=> {
|
|
|
- if (columnIndex ===6 ) {
|
|
|
- return {background:"rgba(64, 149, 229, 0.44)" };
|
|
|
- }
|
|
|
+const tableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
|
|
|
+ if (columnIndex === 6) {
|
|
|
+ return {background: "rgba(64, 149, 229, 0.44)"};
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const protableData = ref([
|
|
|
- {link: '商机-演示沟通', type: '1', cost: '11111',timecost:'121312',peoplecost:5},
|
|
|
- {link: '商机-演示沟通', type: '2', cost: '11111',timecost:'121312',peoplecost:5},
|
|
|
- {link: '商机-演示沟通', type: '2', cost: '11111',timecost:'121312',peoplecost:5},
|
|
|
- {link: '商机-演示沟通', type: '1', cost: '11111',timecost:'121312',peoplecost:5},
|
|
|
+ {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
|
|
|
+ {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
|
|
|
+ {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
|
|
|
+ {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
|
|
|
])
|
|
|
-const isProject=ref(false)
|
|
|
-const rowNameClick=(row)=>{
|
|
|
- isProject.value=true
|
|
|
- isShowDetailtable.value=1
|
|
|
+const isProject = ref(false)
|
|
|
+const rowNameClick = (row) => {
|
|
|
+ isProject.value = true
|
|
|
+ isShowDetailtable.value = 1
|
|
|
}
|
|
|
-const showAllexcel=()=>{
|
|
|
- isProject.value=false
|
|
|
- isShowDetailtable.value=1
|
|
|
-
|
|
|
+const showAllexcel = () => {
|
|
|
+ isProject.value = false
|
|
|
+ isShowDetailtable.value = 1
|
|
|
+
|
|
|
}
|
|
|
-const showDetail=()=>{
|
|
|
- isShowDetailtable.value=1
|
|
|
+const showDetail = () => {
|
|
|
+ isShowDetailtable.value = 1
|
|
|
}
|
|
|
-const isShowDetailtable=ref()
|
|
|
-const rowDetail=()=>{
|
|
|
- isShowDetailtable.value=2
|
|
|
+const isShowDetailtable = ref()
|
|
|
+const rowDetail = () => {
|
|
|
+ isShowDetailtable.value = 2
|
|
|
}
|
|
|
|
|
|
//费用明细
|
|
|
@@ -394,26 +349,26 @@ const priceData = ref([
|
|
|
])
|
|
|
|
|
|
//合并
|
|
|
-const pricespanMethod=ref(
|
|
|
- getSpanMethod(priceData.value,['id'],['total'])
|
|
|
+const pricespanMethod = ref(
|
|
|
+ getSpanMethod(priceData.value, ['id'], ['total'])
|
|
|
)
|
|
|
-const pricecolumnStyle = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
- if ( columnIndex === 3) {
|
|
|
- return {background:"rgba(64, 149, 229, 0.44)",fontSize:"24px" };
|
|
|
-
|
|
|
+const pricecolumnStyle = ({row, column, rowIndex, columnIndex}) => {
|
|
|
+ if (columnIndex === 3) {
|
|
|
+ return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px"};
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
// 更改表头样式
|
|
|
-const pricetableHeaderColor= ({ row, column, rowIndex, columnIndex })=> {
|
|
|
- if (columnIndex ===3 ) {
|
|
|
- return {background:"rgba(64, 149, 229, 0.44)" };
|
|
|
- }
|
|
|
+const pricetableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
|
|
|
+ if (columnIndex === 3) {
|
|
|
+ return {background: "rgba(64, 149, 229, 0.44)"};
|
|
|
+ }
|
|
|
}
|
|
|
-const rowpriceDetail=()=>{
|
|
|
- isShowDetailtable.value=3
|
|
|
+const rowpriceDetail = () => {
|
|
|
+ isShowDetailtable.value = 3
|
|
|
}
|
|
|
-const showPrice=()=>{
|
|
|
- isShowDetailtable.value=2
|
|
|
+const showPrice = () => {
|
|
|
+ isShowDetailtable.value = 2
|
|
|
}
|
|
|
//成本明细cost
|
|
|
|
|
|
@@ -422,83 +377,81 @@ const costData = ref([
|
|
|
{costobject: '陆秀贤', price: '2222', total: '45689'},
|
|
|
{costobject: '陆秀贤', price: '2222', total: '45689'},
|
|
|
{costobject: '陆秀贤', price: '2222', total: '45689'},
|
|
|
-
|
|
|
+
|
|
|
])
|
|
|
//合并
|
|
|
-const costspanMethod=ref(
|
|
|
- getSpanMethod(costData.value,['id'],['total'])
|
|
|
+const costspanMethod = ref(
|
|
|
+ getSpanMethod(costData.value, ['id'], ['total'])
|
|
|
)
|
|
|
-const costcolumnStyle = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
- if ( columnIndex === 2) {
|
|
|
- return {background:"rgba(64, 149, 229, 0.44)",fontSize:"24px" };
|
|
|
-
|
|
|
+const costcolumnStyle = ({row, column, rowIndex, columnIndex}) => {
|
|
|
+ if (columnIndex === 2) {
|
|
|
+ return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px"};
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
// 更改表头样式
|
|
|
-const costtableHeaderColor= ({ row, column, rowIndex, columnIndex })=> {
|
|
|
- if (columnIndex ===2 ) {
|
|
|
- return {background:"rgba(64, 149, 229, 0.44)" };
|
|
|
- }
|
|
|
+const costtableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
|
|
|
+ if (columnIndex === 2) {
|
|
|
+ return {background: "rgba(64, 149, 229, 0.44)"};
|
|
|
+ }
|
|
|
}
|
|
|
//图表数据
|
|
|
-const ydata=ref( ['西环线', '封建路', '封建路','封建路', '西环线', '西环线'])
|
|
|
-const costobjectydata=ref([ '陆秀贤', '陆秀贤', '陆秀贤', '陆秀贤', '陆秀贤'])
|
|
|
-const xdata=ref( [10000, 2568,5698, 4235, 9963, 7785])
|
|
|
-const sydata=ref( [
|
|
|
+const ydata = ref(['西环线', '封建路', '封建路', '封建路', '西环线', '西环线'])
|
|
|
+const costobjectydata = ref(['陆秀贤', '陆秀贤', '陆秀贤', '陆秀贤', '陆秀贤'])
|
|
|
+const xdata = ref([10000, 2568, 5698, 4235, 9963, 7785])
|
|
|
+const sydata = ref([
|
|
|
{
|
|
|
- name: '已回款',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
+ name: '已回款',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
},
|
|
|
{
|
|
|
- name: '已支出',
|
|
|
- type: 'line',
|
|
|
- stack: 'Total',
|
|
|
- data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
+ name: '已支出',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
},
|
|
|
- ])
|
|
|
-const costxdata=ref(['奉建路', '西环线', '宝北路', '宝北路' , '宝北路', '宝北路', '宝北路',])
|
|
|
-const costlegend=ref( ['已回款', '未回款',])
|
|
|
-const costsydata=ref( [
|
|
|
+])
|
|
|
+const costxdata = ref(['奉建路', '西环线', '宝北路', '宝北路', '宝北路', '宝北路', '宝北路',])
|
|
|
+const costlegend = ref(['已回款', '未回款',])
|
|
|
+const costsydata = ref([
|
|
|
{
|
|
|
- name: '已回款',
|
|
|
- type: 'bar',
|
|
|
- stack: 'Total',
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
+ name: '已回款',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Total',
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
},
|
|
|
{
|
|
|
- name: '未回款',
|
|
|
- type: 'bar',
|
|
|
- stack: 'Total',
|
|
|
- data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
+ name: '未回款',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Total',
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
},
|
|
|
- ])
|
|
|
-const sxdata=ref(['奉建路', '西环线', '宝北路', '宝北路' , '宝北路', '宝北路', '宝北路',])
|
|
|
-const slegend=ref( ['已回款', '未回款',])
|
|
|
-
|
|
|
-
|
|
|
+])
|
|
|
+const sxdata = ref(['奉建路', '西环线', '宝北路', '宝北路', '宝北路', '宝北路', '宝北路',])
|
|
|
+const slegend = ref(['已回款', '未回款',])
|
|
|
|
|
|
|
|
|
//各项目收入占比统计
|
|
|
const incomeStatisticsDatas = ref([
|
|
|
- { value: 1048, name: '商机-沟通演示' },
|
|
|
- { value: 735, name: '合同-服务范围洽谈' },
|
|
|
- { value: 580, name: '产品-研发' },
|
|
|
- { value: 484, name: '产品-配置' },
|
|
|
- { value: 484, name: '产品-测试' },
|
|
|
+ {value: 1048, name: '商机-沟通演示'},
|
|
|
+ {value: 735, name: '合同-服务范围洽谈'},
|
|
|
+ {value: 580, name: '产品-研发'},
|
|
|
+ {value: 484, name: '产品-配置'},
|
|
|
+ {value: 484, name: '产品-测试'},
|
|
|
])
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import "~src/styles/static/project.scss";
|
|
|
-.project_table_title{
|
|
|
- margin-top: 15px;
|
|
|
- margin-bottom:15px;
|
|
|
+.project_table_title {
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
}
|
|
|
-.goback_icon{
|
|
|
+.goback_icon {
|
|
|
font-size: 24px;
|
|
|
cursor: pointer;
|
|
|
font-weight: bolder;
|
|
|
- color:var(--el-color-primary);
|
|
|
+ color: var(--el-color-primary);
|
|
|
}
|
|
|
</style>
|
