Skip to content

D
dsk-cr20g
Commit d5391d86 authored by danfuman's avatar danfuman
Browse files
Options

修改

parent 24da7d7f
Hide whitespace changes
Inline Side-by-side
Showing with 661 additions and 47 deletions
dsk-operate-ui/src/router/index.js
View file @ d5391d86
......@@ -87,6 +87,19 @@ export const constantRoutes = [
meta: { title: '个人中心', icon: 'user' }
}
]
},
{
path: '/financing',
component: Layout,
hidden: true,
children: [
{
path: '/macro/financing/details/:id(\\d+)',
component: () => import('@/views/macro/financing/details'),
name: 'financingDetails',
meta: { title: '区域专项债详情' }
}
]
}
]
......@@ -161,7 +174,7 @@ export const dynamicRoutes = [
meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
}
]
}
},
]
// 防止连续点击多次路由报错
......
dsk-operate-ui/src/views/macro/financing/details.vue 0 → 100644
View file @ d5391d86
<template>
<div class="app-container qyzx-details">
<p class="tab">区域专项债 <span>/ 专项债项目详情{{id}}</span></p>
<div class="content main1">
<div class="title"><img src="@/assets/images/financing/head_icon.png" />重庆至黔江高速铁路项目一项目详情</div>
<p>本项目是厦渝高铁通道的重要组成部分，是成渝地区、海西经济区间高速客运交流的主通道;是成渝地区与华南、华东地区间客运交流的辅助通道;是以重庆主城为核心的城际客流的快速客运通道;
是整合区域旅游资源，促进沿线旅游资源开发的黄金旅游通道。线路起自重庆站，经巴南、南川、武隆、彭水，终至江，正线全长265公里，设8座，其中新建6座。
同步建设重庆东动车所动车出入段，重庆枢纽东环联络线。</p>
</div>
<div class="content main2">
<div class="common-title">项目筹资</div>
<div class="main2-box">
<div class="list">
<div class="item color1">
<div class="item-left">
<h4>535.00<span>亿</span></h4>
<p>项目总投资额</p>
</div>
<img class="img" src="@/assets/images/financing/icon1.png" />
</div>
<div class="item color2">
<div class="item-left">
<h4>535.00<span>亿</span></h4>
<p>项目资本金</p>
</div>
<img class="img" src="@/assets/images/financing/icon2.png" />
</div>
<div class="item color3">
<div class="item-left">
<h4>535.00<span>亿</span></h4>
<p>专项债融资</p>
</div>
<img class="img" src="@/assets/images/financing/icon3.png" />
</div>
<div class="item color4">
<div class="item-left">
<h4>535.00<span>亿</span></h4>
<p>专项债用作资本金</p>
</div>
<img class="img" src="@/assets/images/financing/icon4.png" />
</div>
</div>
<div class="list">
<div class="item color4">
<div class="item-left">
<h4>535.00<span>亿</span></h4>
<p>其他资金</p>
</div>
<img class="img" src="@/assets/images/financing/icon5.png" />
</div>
<div class="item color3">
<div class="item-left">
<h4>535.00<span>亿 / 10只</span></h4>
<p>专项债融资额/专项债只数</p>
</div>
<img class="img" src="@/assets/images/financing/icon6.png" />
</div>
<div class="item color4">
<div class="item-left">
<h4>535.00<span>亿</span></h4>
<p>其他融资</p>
</div>
<img class="img" src="@/assets/images/financing/icon7.png" />
</div>
<div class="item color2">
<div class="item-left">
<h4>535.00<span>亿</span></h4>
<p>政府安排资金</p>
</div>
<img class="img" src="@/assets/images/financing/icon8.png" />
</div>
</div>
</div>
</div>
<div class="content main3">
<div class="common-title">项目保障</div>
</div>
<div class="content main4">
<div class="common-title">项目当事人</div>
<div class="main4-box">
<label class="label">项目主体</label>
<span>重庆铁路投资集团有限公司</span>
<label class="label">主管部门</label>
<span>-</span>
<label class="label">实施单位</label>
<span>重庆铁路投资集团有限公司</span>
</div>
</div>
<div class="content main5">
<div class="common-title">专项债</div>
<div class="table-item">
<el-table
:data="tableData"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table-column prop="name" label="债券简称">
<template slot-scope="scope">
<router-link :to="'/macro/financing/details/'+ scope.row.id" tag="a" class="a-link">{{ scope.row.name}}</router-link>
</template>
</el-table-column>
<el-table-column prop="name" label="招标日期" width="220" />
<el-table-column prop="gm" label="专项债规模（亿）" width="260" />
<el-table-column prop="gm" label="用于项目规模(亿)" width="260" />
<el-table-column prop="zj" label="是否资本金" width="200" />
</el-table>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'financingDetails',
data() {
return {
id:'',
tableData:[
{
id:0,
name:'20重庆债14(2005938)',
time:'2020-09-18',
gm:'285.24',
zj:'否',
}
]
}
},
created() {
console.log(this.$route.params)
this.id=this.$route.params.id
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.app-container{
padding: 0;
}
.qyzx-details{
.tab{
font-size: 12px;
color:#A1A1A1;
span{
color:#232323;
}
}
.content{
margin-top: 16px;
background: #FFFFFF;
padding: 16px;
}
.common-title{
margin-bottom: 8px;
}
.main1{
.title{
color: #232323;
font-size: 16px;
line-height: 28px;
font-weight: bold;
margin-bottom: 8px;
text-align: left;
img{
width: 28px;
height: 28px;
margin-bottom: -9px;
margin-right: 17px;
}
}
p{
color: #3D3D3D;
font-size: 14px;
margin: 0;
}
}
.main2{
.list{
display: flex;
margin: 16px 0;
}
.item{
width: 24.5%;
margin-right: 16px;
height: 100px;
display: flex;
justify-content: space-between;
border-radius: 8px;
.item-left{
margin-left: 16px;
margin-top: 24px;
h4{
color: #232323;
font-size: 22px;
line-height: 22px;
font-weight: bold;
margin: 0;
span{
font-weight: 400;
margin-left: 4px;
font-size: 18px;
}
}
p{
margin: 0;
color: #3D3D3D;
font-size: 14px;
padding-top: 8px;
}
}
.img{
width: 56px;
height: 56px;
margin-top: 22px;
margin-right: 12px;
}
}
.color1{
background: rgba(246,190,59,0.08);
border: 1px solid rgba(246,190,59,0.2);
}
.color2{
background: rgba(148,216,196,0.102);
border: 1px solid rgba(73,187,154,0.1);
}
.color3{
background: rgba(57,100,199,0.06);
border: 1px solid rgba(57,100,199,0.1);
}
.color4{
background: rgba(0,129,255,0.04);
border: 1px solid rgba(0,129,255,0.1);
}
}
.main4{
.main4-box{
margin-top: 22px;
.label{
width: 14%;
background: #F0F3FA;
border: 1px solid #E6E9F0;
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 12px;
color: rgba(35,35,35,0.8);
padding-left: 12px;
}
span{
width: 19%;
display: inline-block;
height: 40px;
line-height: 40px;
border-top: 1px solid #E6E9F0;
border-bottom: 1px solid #E6E9F0;
padding-left: 12px;
font-size: 12px;
}
span:last-child{
width: 20%;
border-right: 1px solid #E6E9F0;
}
}
}
}
</style>
dsk-operate-ui/src/views/macro/financing/index.vue
View file @ d5391d86
<template>
<div class="app-container">
<div>
专项债项目
<div class="app-container qyzx">
<div class="content">
<div class="common-title">专项债项目</div>
<div class="content-box">
<div class="box-left">
<div id="echarts" style="height: 400px"></div>
</div>
<div class="box-right">
<el-table
:data="tableData"
element-loading-text="Loading"
border
height="360"
fit
highlight-current-row
>
<el-table-column prop="name" label="项目关系" width="150" />
<el-table-column prop="value" label="项目个数" width="140" />
<el-table-column prop="tz" label="投资额（亿元）" width="140" />
<el-table-column prop="bl" label="比例" width="140" />
</el-table>
</div>
</div>
</div>
<div>
项目明细
<div class="content">
<div class="common-title flex-box">
<div class="flex-box">项目明细</div>
<div class="flex-box query-ability">
<span class="flex-box">共 {{tableDataTotal}} 条</span>
<span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
</div>
</div>
<div class="table-item">
<el-table
:data="listData"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table-column label="序号" width="55" align="left" fixed>
<template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="name" label="项目名称" width="290">
<template slot-scope="scope">
<router-link :to="'/macro/financing/details/'+ scope.row.id" tag="a" class="a-link">{{ scope.row.name}}</router-link>
</template>
</el-table-column>
<el-table-column prop="tz" label="项目总投资（亿）" sortable width="155" />
<el-table-column prop="bj" label="项目资本金（亿）" sortable width="155" />
<el-table-column prop="sy" label="项目收益倍数（倍）" width="150" />
<el-table-column prop="zxz" label="专项债金额（亿）" width="150" />
<el-table-column prop="zxzzj" label="专项债用作资本金（亿）" width="170" />
<el-table-column prop="xmzt" label="项目主体"/>
</el-table>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'Financing',
data() {
return {
tableData:[
{
name:'农业农村',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'乡村振兴',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'农林水利',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'交通',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'轨道交通',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'政府收费公路',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'其他交通基础设施',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'铁路',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'养老',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'生态环保',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'职业教育',
value:'2',
tz:'50.01',
bl:'0.19%'
},
{
name:'能源',
value:'2',
tz:'50.01',
bl:'0.19%'
},
],
listData:[
{
id:1,
name:'涪陵高新产业园区总和配套项目',
tz:'535.00',
bj:'235.00',
sy:'3',
zxz:'230',
zxzzj:'423',
xmzt:'重庆市涪陵区新城区开发 (集团) 有限公司',
},
{
id:2,
name:'涪陵高新产业园区总和配套项目',
tz:'235.00',
bj:'435.00',
sy:'6',
zxz:'530',
zxzzj:'323',
xmzt:'重庆市涪陵区新城区开发 (集团) 有限公司',
}
],
tableLoading: false,
pageIndex: 1,
pageSize: 10,
tableDataTotal: 120
}
},
created() {
this.$nextTick(()=>{
this.initChart()
})
},
methods: {
initChart() {
let myChart = echarts.init(document.getElementById("echarts"))
let option ={
tooltip: {
trigger: 'item',
borderWidth:0,
backgroundColor:"rgba(255, 255, 255, 0.8)",
formatter: function (params) {
var result = ''
result+='<h3 style="color: #232226;padding: 0 0 5px 0;margin: 0;">'+ params.data.name +'</h3>'
result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个</p>'
result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.tz +'亿元</p>'
result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.bl +'%</p>'
return result;
},
extraCssText:'width:150px!important;',
},
legend: {
type: 'scroll',
orient: 'horizontal',
bottom: 20,
data: this.tableData,
pageButtonPosition: 'end',
},
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '40%'],
data: this.tableData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
}
}
}
</script>
<style lang="scss" scoped>
.app-container{
padding: 0;
}
.qyzx{
.content{
background: #ffffff;
padding: 16px;
margin-bottom: 16px;
}
.common-title{
justify-content: space-between;
}
.content-box{
height: 422px;
display: flex;
justify-content: space-between;
.box-left{
width: 55%;
}
.box-right{
float: right;
::v-deep .el-table{
.el-table__cell{
height: 40px;
padding: 0;
line-height: 40px;
}
}
}
}
.table-item{
margin-top: 22px;
}
}
</style>
dsk-operate-ui/src/views/macro/nationalEconomies/component/economies-detail.vue
View file @ d5391d86
<template>
<div class="child-container">
<div class="child-container ndmx-detail">
<el-drawer
:visible.sync="dialogVisible"
direction="rtl"
size="50%"
>
<div slot="title" class="common-title">年度明细</div>
<div slot="title" class="ndmx-title"><img src="@/assets/images/economies/icon.png" class="icon">年度明细</div>
<!--<div class="content">-->
<!--<div class="main-title">-->
<!--<span class="label-200">指标</span>-->
<!--<span>2022年</span>-->
<!--<span>2021年</span>-->
<!--<span>2020年</span>-->
<!--<span>2019年</span>-->
<!--<span>2018年</span>-->
<!--</div>-->
<!--<div class="main-list">-->
<!--<div class="item">-->
<!--<h3></h3>-->
<!--<div class="item-cont">-->
<!--<span>指标</span>-->
<!--<span>2022年</span>-->
<!--<span>2021年</span>-->
<!--<span>2020年</span>-->
<!--<span>2019年</span>-->
<!--<span>2018年</span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="table-item">
<el-table
:data="tableData"
element-loading-text="Loading"
:data="getValues"
:show-header="false"
border
fit
highlight-current-row
>
<el-table-column prop="date" label="指标" width="150" />
<el-table-column prop="name" label="2022年" width="200" />
<el-table-column prop="name" label="2021年" />
<el-table-column prop="name" label="2020年" />
<el-table-column prop="name" label="2019年" />
<el-table-column prop="name" label="2018年" />
<el-table-column
v-for="(item, index) in getHeaders"
:key="index"
:prop="item"
>
</el-table-column>
</el-table>
</div>
</el-drawer>
......@@ -36,28 +57,62 @@ export default {
data() {
return {
dialogVisible: false,
tableData: [{
date: '2016-05-02',
name: '大司空'
}, {
date: '2016-05-04',
name: '大司空'
}, {
date: '2016-05-01',
name: '大司空'
}, {
date: '2016-05-03',
name: '大司空'
}, {
date: '2016-05-03',
name: '大司空'
}, {
date: '2016-05-03',
name: '大司空'
}]
tableData: [
{
zb:"2022年",
gdp:'129,118.58',
gdpzs:'124,369.67',
rjgdp:'134,369.67',
},
{
zb:"2021年",
gdp:'129,118.58',
gdpzs:'124,369.67',
rjgdp:'134,369.67',
},
{
zb:"2020年",
gdp:'129,118.58',
gdpzs:'124,369.67',
rjgdp:'134,369.67',
},
],
headers: [
{
prop: 'zb',
label: '指标',
},
{
prop: 'name',
label: '国民经济核算',
},
{
prop: 'gdp',
label: 'GDP（亿元）',
},
{
prop: 'gdpzs',
label: 'GDP增速',
},
{
prop: 'rjgdp',
label: '人均GDP（元）',
},
],
}
},
created() {
},
computed: {
getHeaders() {
return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
},
getValues() {
return this.headers.map(item => {
return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
});
}
},
methods: {
open(row) {
......@@ -74,6 +129,28 @@ export default {
</script>
<style lang="scss" scoped>
.ndmx-detail{
::v-deep .el-drawer{
.el-drawer__header{
padding:0 0 0 13px;
line-height: 48px;
}
}
.content{
height: 100%;
padding: 0 12px;
}
}
.ndmx-title{
color: #232323;
font-weight: bold;
font-size: 16px;
.icon{
width: 17px;
height: 17px;
margin-right: 8px;
}
}
.table-item{
padding: 16px 10px 16px 16px;
}
......
dsk-operate-ui/src/views/macro/nationalEconomies/index.vue
View file @ d5391d86
......@@ -39,7 +39,7 @@
<el-table-column label="序号" width="50" align="left" fixed>
<template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
</el-table-column>
<el-table-column label="地区" min-width="60" align="left" fixed>
<el-table-column label="地区" min-width="70" align="left" fixed>
<template slot-scope="scope">
<router-link to="" tag="a" class="a-link">{{ scope.row.address || '广东省' }}</router-link>
</template>
......@@ -72,12 +72,13 @@
<el-table-column label="专项债余额（亿元）" prop="cgfs" width="160" align="left" />
<el-table-column label="地方政府债务限额（亿元）" prop="cgfs" width="160" align="left" />
<el-table-column label="城投平台有息债务？？（亿元）" prop="cgfs" width="160" align="left" >
<!--<template slot="header" slot-scope="scope">-->
<!--<el-input-->
<!--v-model="search"-->
<!--size="mini"-->
<!--placeholder="输入关键字搜索"/>-->
<!--</template>-->
<template slot="header" slot-scope="scope">
<span>城投平台有息债务（亿元）
<el-tooltip popper-class="tips" effect="light" content="城投平台有息债务是该地区行政区划下所有的城投公司的短期债务与长期债务合计。其中，短期债务=短期借款+一年内到期的非流动负债+应付短期债券，长期债务=长期借款+应付长期债券。" placement="top">
<i class="el-icon-warning-outline"></i>
</el-tooltip>
</span>
</template>
</el-table-column>
<el-table-column label="负债率（%）" prop="cgfs" width="160" align="left" />
<el-table-column label="负债率（宽口径）（%）" prop="cgfs" width="160" align="left" />
......@@ -128,7 +129,13 @@ export default {
multiple: true,
},
addressList: [],
tableData: [],
tableData: [
{
dataId:'1',
cgrssqy:'100',
cgfs:'200'
}
],
tableLoading: false,
pageIndex: 1,
pageSize: 10,
......@@ -250,8 +257,24 @@ export default {
}
}
</script>
<style lang="scss">
.tips.is-light{
padding: 12px;
width: 318px;
box-sizing: border-box;
font-size: 14px;
line-height: 20px;
color: #333333;
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.08);
.popper__arrow {
border-bottom-color: rgba(0, 0, 0, 0.08) !important;
border-top-color: rgba(0, 0, 0, 0.08) !important;
}
}
</style>
<style lang="scss" scoped>
.query-box{
margin: -8px 0 8px 0;
.query-params{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment