易用性修改

master
hanbo 2022-06-09 14:29:03 +08:00
parent 6370b3104c
commit 96493e8b32
1 changed files with 296 additions and 11 deletions

View File

@ -9,9 +9,11 @@
border-bottom: 1px solid;
border-right: 1px solid;
}
.cal-table-left {
display: inline-block;
}
table {
display: block;
border-collapse: collapse;
@ -35,12 +37,219 @@
<li><a href="#tab3">现金流量表</a></li>
</ul>
<div class="am-tabs-bd">
<div class="am-tab-panel am-fade am-in am-active" id="tab1">
<div class="am-scrollable-horizontal">
<table class="am-table table-main" >
<thead class="cal-table-left" style="overflow-x: scroll;"><tr class="cal-table-left"><th class="cal-table-column">类别</th><th style="border-top: 1px solid;" class="cal-table-column">收入--设备类</th><th style="border-top: 1px solid;" class="cal-table-column">收入--施工类</th><th style="border-top: 1px solid;" class="cal-table-column">收入--服务类</th><th style="border-top: 1px solid;" class="cal-table-column">采购成本--设备类</th><th style="border-top: 1px solid;" class="cal-table-column">采购成本--施工类</th><th style="border-top: 1px solid;" class="cal-table-column">采购成本--服务类</th><th style="border-top: 1px solid;" class="cal-table-column">采购成本--其他</th><th style="border-top: 1px solid;" class="cal-table-column">成本--其他</th><th style="border-top: 1px solid;" class="cal-table-column">成本--项目管理成本</th><th style="border-top: 1px solid;" class="cal-table-column">财务费用--资金占用成本</th><th style="border-bottom: 1px solid; border-top: 1px solid;" class="cal-table-column">公司管理费用</th></tr></thead><tbody class="cal-table-left" style="overflow-x: scroll;width: calc(100% - 180px);white-space: nowrap;"><#if (primaryIndicatorList)?exists && (primaryIndicatorList?size>0)><#list primaryIndicatorList as list><tr class="cal-table-left"><td class="cal-table-column">${list.title!}</td><td class="cal-table-column">${(list.incomeDevice!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.incomeEngineer!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.incomeService!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.costPurchaseDevice!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.costPurchaseBuild!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.costPurchaseService!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.costPurchaseOther!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.costOtherOther!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.costProjectManage!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.costExpropriation!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.costCompanyManage!0)?string("#,##0.##")}</td></tr></#list></#if></tbody>
</table>
<div class="am-tab-panel am-fade am-in am-active" id="tab1"><style type="text/css">
.s-table {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
flex-wrap: nowrap;
border: 1px solid #CCC;
}
.stable.fixed-top {
border-bottom: 0;
}
.s-table .table-left {
flex: 0 0 190px;
position: relative;
}
.table-left .table-left-top {
position: sticky;
top: 0;
z-index: 1000;
}
.table-left .table-left-bottom {
height: 100%;
overflow-y: auto;
}
.table-left-bottom::-webkit-scrollbar {
display: none;
}
.table-left .table-left-row {
width: 100%;
height: 40px;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
padding: 0 6px;
display: flex;
align-items: center;
}
.s-table .table-right {
flex: 1;
}
.table-right-top {
display: flex;
width: 100%;
overflow-x: auto;
position: sticky;
top: 0;
z-index: 1000;
}
.table-right-top::-webkit-scrollbar {
display: none;
}
.table-right .table-right-row {
width: 100%;
height: 40px;
display: flex;
}
.table-right-column {
flex: 0 0 160px;
height: 100%;
overflow: hidden;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
}
.table-right-column.td {
padding: 0 6px;
display: flex;
align-items: center;
}
.table-right .table-right-bottom {
overflow: auto;
display: flex;
}
.fixed-top .table-left-row, .fixed-top .table-right-column {
border-bottom: 0
}
</style>
<div class="s-table fixed-top" style="position: sticky;z-index: 1;top:0;background: #FFF;">
<div class="table-left">
<div class="table-left-top table-left-row">类别</div>
</div>
<div class="table-right">
<div id="table1RightTop" class="table-right-top">
<#if (primaryIndicatorList)?exists && (primaryIndicatorList?size>0)><#list primaryIndicatorList as list>
<div class="table-right-column">
<div class="table-right-row">
<div class="table-right-column td">
${list.title!}
</div>
</div>
</div>
</#list></#if>
</div>
</div>
</div>
<div class="s-table">
<div class="table-left">
<#-- <div class="table-left-top table-left-row">类别</div>-->
<div id="table1LeftBottom" class="table-left-bottom">
<div class="table-left-row">收入--设备类</div>
<div class="table-left-row">收入--施工类</div>
<div class="table-left-row">收入--服务类</div>
<div class="table-left-row">采购成本--设备类</div>
<div class="table-left-row">采购成本--施工类</div>
<div class="table-left-row">采购成本--服务类</div>
<div class="table-left-row">采购成本--其他</div>
<div class="table-left-row">成本--其他</div>
<div class="table-left-row">成本--项目管理成本</div>
<div class="table-left-row">财务费用--资金占用成本</div>
<div class="table-left-row">公司管理费用</div>
</div>
</div>
<div class="table-right">
<#-- <div id="table1RightTop" class="table-right-top">-->
<#-- <#if (primaryIndicatorList)?exists && (primaryIndicatorList?size>0)><#list primaryIndicatorList as list>-->
<#-- <div class="table-right-column">-->
<#-- <div class="table-right-row">-->
<#-- <div class="table-right-column">-->
<#-- ${list.title!}-->
<#-- </div>-->
<#-- </div>-->
<#-- </div>-->
<#-- </#list></#if>-->
<#-- </div>-->
<div id="table1RightBottom" class="table-right-bottom">
<#if (primaryIndicatorList)?exists && (primaryIndicatorList?size>0)><#list primaryIndicatorList as list>
<div class="table-right-column">
<div class="table-right-row">
<div class="table-right-column td">${(list.incomeDevice!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.incomeEngineer!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.incomeService!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.costPurchaseDevice!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.costPurchaseBuild!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.costPurchaseService!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.costPurchaseOther!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.costOtherOther!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.costProjectManage!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.costExpropriation!0)?string("#,##0.##")}</div>
</div>
<div class="table-right-row">
<div class="table-right-column td">${(list.costCompanyManage!0)?string("#,##0.##")}</div>
</div>
</div>
</#list></#if>
</div>
</div>
</div>
<script>
var table1LeftBottom = document.getElementById('table1LeftBottom')
var table1RightTop = document.getElementById('table1RightTop')
var table1RightBottom = document.getElementById('table1RightBottom')
table1RightBottom.onscroll = function() {
table1RightTop.scrollLeft = this.scrollLeft
table1LeftBottom.scrollTop = this.scrollTop
}
</script>
<#-- <div class="am-scrollable-horizontal">-->
<#-- <table class="am-table table-main">-->
<#-- <thead class="cal-table-left" style="overflow-x: scroll;">-->
<#-- <tr class="cal-table-left">-->
<#-- <th class="cal-table-column" style="position:sticky;top:0;z-index:1;">类别</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">收入--设备类</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">收入--施工类</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">收入--服务类</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">采购成本--设备类</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">采购成本--施工类</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">采购成本--服务类</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">采购成本--其他</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">成本--其他</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">成本--项目管理成本</th>-->
<#-- <th style="border-top: 1px solid;" class="cal-table-column">财务费用--资金占用成本</th>-->
<#-- <th style="border-bottom: 1px solid; border-top: 1px solid;"-->
<#-- class="cal-table-column">公司管理费用-->
<#-- </th>-->
<#-- </tr>-->
<#-- </thead>-->
<#-- <tbody class="cal-table-left"-->
<#-- style="overflow-x: scroll;width: calc(100% - 180px);white-space: nowrap;"><#if (primaryIndicatorList)?exists && (primaryIndicatorList?size>0)><#list primaryIndicatorList as list>-->
<#-- <tr class="cal-table-left">-->
<#-- <td class="cal-table-column" style="position:sticky;top:0;z-index:1;">${list.title!}</td>-->
<#-- <td class="cal-table-column">${(list.incomeDevice!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.incomeEngineer!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.incomeService!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.costPurchaseDevice!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.costPurchaseBuild!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.costPurchaseService!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.costPurchaseOther!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.costOtherOther!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.costProjectManage!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.costExpropriation!0)?string("#,##0.##")}</td>-->
<#-- <td class="cal-table-column">${(list.costCompanyManage!0)?string("#,##0.##")}</td>-->
<#-- </tr></#list></#if></tbody>-->
<#-- </table>-->
<#-- </div>-->
</div>
</div>
@ -49,7 +258,44 @@
<div class="am-tab-panel am-fade am-in" id="tab2">
<div class="am-scrollable-horizontal">
<table class="am-table table-main">
<thead class="cal-table-left" style="overflow-x: scroll;"><tr class="cal-table-left"><th class="cal-table-column">/</th><th style="border-top: 1px solid;" class="cal-table-column">营业收入</th><th style="border-top: 1px solid;" class="cal-table-column">营业成本</th><th style="border-top: 1px solid;" class="cal-table-column">项目管理成本</th><th style="border-top: 1px solid;" class="cal-table-column">其他</th><th style="border-top: 1px solid;" class="cal-table-column">财务费用</th><th style="border-top: 1px solid;" class="cal-table-column">项目毛利</th><th style="border-top: 1px solid;" class="cal-table-column">项目毛利率</th><th style="border-top: 1px solid;" class="cal-table-column">公司管理费用</th><th style="border-top: 1px solid;" class="cal-table-column">项目贡献利润</th><th style="border-top: 1px solid;" class="cal-table-column">项目贡献利润率</th><th style="border-top: 1px solid;" class="cal-table-column">所得税费用</th><th style="border-top: 1px solid;" class="cal-table-column">项目净利润</th><th style="border-bottom: 1px solid; border-top: 1px solid;" class="cal-table-column">项目净利润率</th></tr></thead><tbody class="cal-table-left" style="overflow-x: scroll;width: calc(100% - 120px);white-space: nowrap;"><#if (profitAndLossList)?exists && (profitAndLossList?size>0)><#list profitAndLossList as list><tr class="cal-table-left"><td class="cal-table-column">${list.title!}</td><td class="cal-table-column">${(list.income!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.cost!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.manageCost!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.other!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.expropriation!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.grossProfit!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.grossProfitProfit!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.companyManage!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.contributionMargin!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.contributionMarginProfit!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.incomeTax!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.netMargin!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.netMarginProfit!0)?string("#,##0.##")}</td></tr></#list></#if></tbody>
<thead class="cal-table-left" style="overflow-x: scroll;">
<tr class="cal-table-left">
<th class="cal-table-column">/</th>
<th style="border-top: 1px solid;" class="cal-table-column">营业收入</th>
<th style="border-top: 1px solid;" class="cal-table-column">营业成本</th>
<th style="border-top: 1px solid;" class="cal-table-column">项目管理成本</th>
<th style="border-top: 1px solid;" class="cal-table-column">其他</th>
<th style="border-top: 1px solid;" class="cal-table-column">财务费用</th>
<th style="border-top: 1px solid;" class="cal-table-column">项目毛利</th>
<th style="border-top: 1px solid;" class="cal-table-column">项目毛利率</th>
<th style="border-top: 1px solid;" class="cal-table-column">公司管理费用</th>
<th style="border-top: 1px solid;" class="cal-table-column">项目贡献利润</th>
<th style="border-top: 1px solid;" class="cal-table-column">项目贡献利润率</th>
<th style="border-top: 1px solid;" class="cal-table-column">所得税费用</th>
<th style="border-top: 1px solid;" class="cal-table-column">项目净利润</th>
<th style="border-bottom: 1px solid; border-top: 1px solid;"
class="cal-table-column">项目净利润率
</th>
</tr>
</thead>
<tbody class="cal-table-left"
style="overflow-x: scroll;width: calc(100% - 120px);white-space: nowrap;"><#if (profitAndLossList)?exists && (profitAndLossList?size>0)><#list profitAndLossList as list>
<tr class="cal-table-left">
<td class="cal-table-column">${list.title!}</td>
<td class="cal-table-column">${(list.income!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.cost!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.manageCost!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.other!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.expropriation!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.grossProfit!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.grossProfitProfit!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.companyManage!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.contributionMargin!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.contributionMarginProfit!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.incomeTax!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.netMargin!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.netMarginProfit!0)?string("#,##0.##")}</td>
</tr></#list></#if></tbody>
</table>
</div>
</div>
@ -59,7 +305,46 @@
<div class="am-tab-panel am-fade am-in" id="tab3">
<div class="am-scrollable-horizontal">
<table class="am-table table-main">
<thead class="cal-table-left" style="overflow-x: scroll;"><tr class="cal-table-left"><th class="cal-table-column">/</th><th style="border-top: 1px solid;" class="cal-table-column">销售商品、提供劳务收到的现金</th><th style="border-top: 1px solid;" class="cal-table-column">收到的税费返还</th><th style="border-top: 1px solid;" class="cal-table-column">收到其他与经营活动有关的现金</th><th style="border-top: 1px solid;" class="cal-table-column">购买商品、接受劳务支付的现金</th><th style="border-top: 1px solid;" class="cal-table-column">支付的各项税费</th><th style="border-top: 1px solid;" class="cal-table-column">支付其他与经营活动有关的现金</th><th style="border-top: 1px solid;" class="cal-table-column">经营活动产生的现金流量净额</th><th style="border-top: 1px solid;" class="cal-table-column">投资活动现金流入</th><th style="border-top: 1px solid;" class="cal-table-column">投资活动现金流出</th><th style="border-top: 1px solid;" class="cal-table-column">投资活动产生的现金流量净额</th><th style="border-top: 1px solid;" class="cal-table-column">借款资金流入</th><th style="border-top: 1px solid;" class="cal-table-column">还款资金流出</th><th style="border-top: 1px solid;" class="cal-table-column">筹资活动产生的现金流量净额</th><th style="border-bottom: 1px solid; border-top: 1px solid;" class="cal-table-column">货币资金净增加额</th></tr></thead><tbody class="cal-table-left" style="overflow-x: scroll;width: calc(100% - 220px);white-space: nowrap;"><#if (cashFlowList)?exists && (cashFlowList?size>0)><#list cashFlowList as list><tr class="cal-table-left"><td class="cal-table-column">${list.title!}</td><td class="cal-table-column">${(list.saleIncomeCash!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.taxReturn!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.earnestMoneyIncome!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.purchaseCost!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.taxCost!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.earnestMoneyCost!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.netCashFlow!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.cashInflowFromInvestingActivities!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.cashOutflowFromInvestingActivities!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.netCashFromInvestingActivities!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.financingCapitalInflow!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.financingCapitalOutflow!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.financingCapitalCashflow!0)?string("#,##0.##")}</td><td class="cal-table-column">${(list.netIncreaseMonetaryFunds!0)?string("#,##0.##")}</td></tr></#list></#if></tbody>
<thead class="cal-table-left" style="overflow-x: scroll;">
<tr class="cal-table-left">
<th class="cal-table-column">/</th>
<th style="border-top: 1px solid;" class="cal-table-column">销售商品、提供劳务收到的现金</th>
<th style="border-top: 1px solid;" class="cal-table-column">收到的税费返还</th>
<th style="border-top: 1px solid;" class="cal-table-column">收到其他与经营活动有关的现金</th>
<th style="border-top: 1px solid;" class="cal-table-column">购买商品、接受劳务支付的现金</th>
<th style="border-top: 1px solid;" class="cal-table-column">支付的各项税费</th>
<th style="border-top: 1px solid;" class="cal-table-column">支付其他与经营活动有关的现金</th>
<th style="border-top: 1px solid;" class="cal-table-column">经营活动产生的现金流量净额</th>
<th style="border-top: 1px solid;" class="cal-table-column">投资活动现金流入</th>
<th style="border-top: 1px solid;" class="cal-table-column">投资活动现金流出</th>
<th style="border-top: 1px solid;" class="cal-table-column">投资活动产生的现金流量净额</th>
<th style="border-top: 1px solid;" class="cal-table-column">借款资金流入</th>
<th style="border-top: 1px solid;" class="cal-table-column">还款资金流出</th>
<th style="border-top: 1px solid;" class="cal-table-column">筹资活动产生的现金流量净额</th>
<th style="border-bottom: 1px solid; border-top: 1px solid;"
class="cal-table-column">货币资金净增加额
</th>
</tr>
</thead>
<tbody class="cal-table-left"
style="overflow-x: scroll;width: calc(100% - 220px);white-space: nowrap;"><#if (cashFlowList)?exists && (cashFlowList?size>0)><#list cashFlowList as list>
<tr class="cal-table-left">
<td class="cal-table-column">${list.title!}</td>
<td class="cal-table-column">${(list.saleIncomeCash!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.taxReturn!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.earnestMoneyIncome!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.purchaseCost!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.taxCost!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.earnestMoneyCost!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.netCashFlow!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.cashInflowFromInvestingActivities!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.cashOutflowFromInvestingActivities!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.netCashFromInvestingActivities!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.financingCapitalInflow!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.financingCapitalOutflow!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.financingCapitalCashflow!0)?string("#,##0.##")}</td>
<td class="cal-table-column">${(list.netIncreaseMonetaryFunds!0)?string("#,##0.##")}</td>
</tr></#list></#if></tbody>
</table>
</div>
</div>