|
@@ -56,7 +56,11 @@
|
|
|
</div>
|
|
|
<div>
|
|
|
<el-link type="primary" underline @click="showAllData = true">查看更多</el-link>
|
|
|
- <hc-dialog v-model="showAllData" title="全部数据" is-table :footer="false" widths="1200px">
|
|
|
+ <hc-dialog
|
|
|
+ v-model="showAllData"
|
|
|
+ title="全部数据" is-table :footer="false" widths="1200px"
|
|
|
+ ui="all-dialog"
|
|
|
+ >
|
|
|
<div class="bg-box-card" style="height: 80vh">
|
|
|
<div class="bg-box-card-title flex justify-between">
|
|
|
<div>
|
|
@@ -98,31 +102,45 @@
|
|
|
<div ref="searchRef">
|
|
|
<HcDatavSelect v-model="searchForm.year" :datas="yearArr" :clearable="false" @change="searchChange" />
|
|
|
<HcDatavSelect v-model="searchForm.type" :datas="typeArr1" placeholder="项目类型" @change="searchChange" />
|
|
|
- <HcDatavSelect v-model="searchForm.size" :datas="typeArr2" placeholder="前五名" @change="searchChange" />
|
|
|
</div>
|
|
|
|
|
|
<el-link type="primary" underline @click="handleShowAllData">查看更多</el-link>
|
|
|
- <hc-dialog v-model="showAllData1" title="全部数据" widths="1200px" is-table>
|
|
|
- <div class="bg-box-card" style="height: 100%;">
|
|
|
- <div class="bg-box-card-title flex justify-between">
|
|
|
- <div> <i class="ri-line-chart-line" style="color:#18DD32" /> <span>收益统计</span></div>
|
|
|
-
|
|
|
- <div ref="searchRef">
|
|
|
- <HcDatavSelect v-model="searchForm.year" :datas="yearArr" :clearable="false" @change="searchChange" />
|
|
|
- <HcDatavSelect v-model="searchForm.type" :datas="typeArr1" placeholder="项目类型" @change="searchChange" />
|
|
|
- <HcDatavSelect v-model="searchForm.size" :datas="typeArr2" placeholder="所有" @change="searchChange" />
|
|
|
+ <div class="all-dialog">
|
|
|
+ <hc-dialog v-model="showAllData1" title="全部数据" widths="1200px" is-table height="90vh" :footer="false" ui="all-dialog">
|
|
|
+ <div class="bg-box-card" style="height: 100%; overflow: hidden">
|
|
|
+ <div class="bg-box-card-title mb-4 flex justify-between">
|
|
|
+ <div> <i class="ri-line-chart-line" style="color:#18DD32" /> <span>收益统计</span></div>
|
|
|
+ <div ref="searchRef">
|
|
|
+ <HcDatavSelect v-model="searchForm.year" :datas="yearArr" :clearable="false" @change="searchChange" />
|
|
|
+ <HcDatavSelect v-model="searchForm.type" :datas="typeArr1" placeholder="项目类型" @change="searchChange" />
|
|
|
+ <HcDatavSelect v-model="searchForm.size" :datas="typeArr2" placeholder="所有" @change="searchChange" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hc-full relative" style="height: calc(100% - 60px)">
|
|
|
+ <HcDatavVerticalBarChart
|
|
|
+ :datas="incomeTotal"
|
|
|
+ height="100%"
|
|
|
+ width="100%"
|
|
|
+ :options="{
|
|
|
+ grid: {
|
|
|
+ top: '5%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '15%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ rotate: 45,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="hc-full relative" style="height: 70vh">
|
|
|
- <HcDatavVerticalBarChart
|
|
|
- :datas="incomeTotal"
|
|
|
- height="100%"
|
|
|
- width="100%"
|
|
|
- :options="{ grid: { top: '5%', left: '3%', right: '4%', bottom: '3%', containLabel: true } }"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </hc-dialog>
|
|
|
+ </hc-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="hc-full relative">
|
|
|
<HcDatavVerticalBarChart
|
|
@@ -338,7 +356,7 @@ const fixedChartRef = ref(null)
|
|
|
const incomeTotal = ref([])
|
|
|
const handleShowAllData = () => {
|
|
|
showAllData1.value = true
|
|
|
- searchForm.value.size = null
|
|
|
+ searchForm.value.size = 5
|
|
|
getIncomeTotal()
|
|
|
}
|
|
|
const getIncomeTotal = async ()=>{
|
|
@@ -508,6 +526,8 @@ const handleChartClick = (data) => {
|
|
|
border-radius: 4px;
|
|
|
height: calc(34vh); // 修改固定高度为动态高度
|
|
|
padding: 14px;
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.bg-box-card-1{
|
|
@@ -531,3 +551,23 @@ const handleChartClick = (data) => {
|
|
|
// overflow: hidden;
|
|
|
// }
|
|
|
</style>
|
|
|
+
|
|
|
+<!-- <style lang="scss">
|
|
|
+// .el-dialog{
|
|
|
+// background: #081943!important;
|
|
|
+// }
|
|
|
+.all-dialog {
|
|
|
+ :deep(.el-dialog) {
|
|
|
+ background: #081943!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+.all-dialog {
|
|
|
+
|
|
|
+
|
|
|
+ .el-dialog__title {
|
|
|
+ color: white !important;
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style> -->
|