Skip to content

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

修改

parent 01798063
Show whitespace changes
Inline Side-by-side
Showing with 1368 additions and 267 deletions
dsk-operate-ui/src/views/macro/economies/index.vue
View file @ 9ed301fd
......@@ -35,14 +35,14 @@ export default {
}
},
created() {
let name = sessionStorage.getItem('currentTab')
if (name != "undefined" && name){
this.activeName = name;
}
// let name = sessionStorage.getItem('currentTab')
// if (name != "undefined" && name){
// this.activeName = name;
// }
},
methods: {
handleClick() {
sessionStorage.setItem('currentTab', this.activeName)
// sessionStorage.setItem('currentTab', this.activeName)
}
}
}
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/qgjjdq.vue 0 → 100644
View file @ 9ed301fd
<template>
<div class="qgjjdq">
<div class="content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国经济大全</span>
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="year">
<el-select v-model="queryParams.year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择年度" @change="querySubmit">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item prop="area">
<el-cascader
ref="address"
:options="addressList"
:props="props"
v-model="queryParams.address"
@change="querySubmit"
placeholder="地区选择"
collapse-tags
clearable></el-cascader>
</el-form-item>
</el-form>
</div>
<div class="flex-box query-ability">
<span class="flex-box"><img src="@/assets/images/ability_vs.png">地区经济对比</span>
<span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
</div>
</div>
<div class="table-item">
<el-table
v-loading="tableLoading"
:data="tableData"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<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="70" align="left" fixed>
<template slot-scope="scope">
<router-link to="" tag="a" class="a-link">{{ scope.row.address || '广东省' }}</router-link>
</template>
</el-table-column>
<el-table-column label="年度明细" prop="dataId" width="90" align="left" fixed>
<template slot-scope="scope">
<img src="@/assets/images/icon_detailed.png" class="icon-detailed" @click="handleDetail(scope.row)">
</template>
</el-table-column>
<el-table-column label="GDP（元）" prop="dataId" sortable min-width="115" align="right" />
<el-table-column label="GDP增速" prop="cgrdm" sortable min-width="100" align="right" />
<el-table-column label="人均GDP（元）" prop="cgrssqy" sortable width="125" align="right" />
<el-table-column label="人口（万人）" prop="cgrssqy" sortable width="120" align="right" />
<el-table-column label="一般公共预算收入 (亿元)" prop="cgrzyhy" sortable width="170" align="right" />
<el-table-column label="一般公共预算收入增速（%）" prop="cgzzxs" sortable min-width="140" align="right" />
<el-table-column label="一般公共预算支出（亿元）" prop="cgfs" sortable width="140" align="left" />
<el-table-column label="政府性基金收入（亿元）" width="140" sortable align="left">
<template slot-scope="scope">
<router-link to="/purchaserDetail" target="_blank" tag="a" class="a-link">{{ scope.row.zbwj }}</router-link>
</template>
</el-table-column>
<el-table-column label="政府性基金收入：土地出让收入（亿元）" prop="cgfs" sortable width="150" align="left" />
<el-table-column label="政府性基金支出（亿元）" prop="cgfs" width="170" sortable align="left" />
<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" />
<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" />
<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">
<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" />
<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" />
<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" />
<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" />
<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" />
</el-table>
</div>
<div class="pagination-box">
<el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
</div>
<economies-detail ref="economiesDetail" />
</div>
</div>
</template>
<script>
import { browsedIndexPage } from '@/api/nationalEconomies'
import dataRegion from '@/assets/json/dataRegion'
import economiesDetail from './economies-detail'
import axios from 'axios'
export default {
name: 'NationalEconomies',
components: {
economiesDetail
},
data() {
return {
queryParams: {
year: '',
address: ''
},
yearOptions: [
{ name: '2023年', value: '2023' },
{ name: '2022年', value: '2022' },
{ name: '2021年', value: '2021' },
],
props: {
value: 'id',
multiple: true,
},
addressList: [],
tableData: [
{
dataId:'1',
cgrssqy:'100',
cgfs:'200'
}
],
tableLoading: false,
pageIndex: 1,
pageSize: 10,
tableDataTotal: 0,
}
},
created() {
this.querySubmit()
this.dataRegion()
},
methods: {
//地区
async dataRegion() {
// await axios.post("https://files.jiansheku.com/file/json/common/dataRegion.json", {}, {
// headers: {
// 'Content-Type': 'application/json'
// }
// }).then(res => {
// if (res.data.code == 200) {
// console.log(res.data.data)
// }
// })
var str = [];
for (let x = 0; x < 3; x++) {
for (let i = 0; i < dataRegion.length; i++) {
if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
str.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
for (let j = 0; j < str.length; j++) {
if (str[j].id == dataRegion[i].parentId) {
str[j].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
}
}
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
for (let j = 0; j < str.length; j++) {
for (let k = 0; k < str[j].children.length; k++) {
if (str[j].children[k].id == dataRegion[i].parentId) {
str[j].children[k].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId
// "children":[]
});
}
}
}
}
}
}
this.addressList = str;
},
// 查询提交
async querySubmit() {
// this.tableLoading = true
const params = { pageIndex: this.pageIndex, pageSize: this.pageSize, browsedType: 1 }
if(this.queryParams.address){
let arr = this.$refs.address.getCheckedNodes();
let provinceCode = [],cityCode = [],countyCode = [];
for (var i in arr) {
if (arr[i].parent) {
if (!arr[i].parent.checked) {
arr[i].hasChildren && cityCode.push(arr[i].value);
!arr[i].hasChildren && countyCode.push(arr[i].value);
}
} else {
provinceCode.push(arr[i].value)
}
}
if(provinceCode.length > 0){
params.procinceId=provinceCode.join(',')
}
if(cityCode.length > 0){
params.cityId=cityCode.join(',')
}
if(countyCode.length > 0){
params.districtId=countyCode.join(',')
}
}
console.log(params)
// browsedIndexPage(params).then(res => {
// this.tableData = res.data.list
// this.tableDataTotal = res.data.totalCount
// })
// // 延迟关闭加载效果
// setTimeout(() => {
// this.tableLoading = false
// }, 200)
},
// 明细
handleDetail(row) {
this.$refs.economiesDetail.open(row)
},
// 重置页数
handleSizeChange(val) {
this.pageIndex = 1
this.pageSize = val
this.querySubmit()
},
// 跳转指定页数
handleCurrentChange(val) {
this.pageIndex = val
this.querySubmit()
},
}
}
</script>
<style lang="scss" scoped>
.qgjjdq{
.query-box{
margin: -8px 0 8px 0;
.query-params{
.el-form{
margin-left: 24px;
}
}
}
.content{
background: #ffffff;
padding: 16px;
margin-top: 12px;
.table-item{
::v-deep .el-table{
th{
font-size: 12px !important;
font-weight: 400 !important;
}
.el-table__fixed-header-wrapper th{
background: #F0F3FA;
}
.caret-wrapper{
width: 10px;
/*<!--position: absolute;-->*/
/*<!--right: 12px;-->*/
/*<!--top: -3px;-->*/
}
/*.sort-caret{*/
/*position: initial;*/
/*}*/
/*.ascending{*/
/*margin-bottom: 3px;*/
/*}*/
}
}
}
}
</style>
dsk-operate-ui/src/views/macro/nationalEconomies/component/zhaobiao.vue 0 → 100644
View file @ 9ed301fd
<template>
<div class="zhaobiao">
<div class="zb-content content1">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">近五年全国招标数量</span>
</div>
</div>
<div class="text">近五年全国项目招标数量达到10,610,000个，招标数量前五的地区分别是广东（38251个）、江苏（36812个）、山东（32615个）、浙江（26341个）、河南（21621个）。</div>
<div class="main1">
<div id="zb-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为近5年全国公开的招标项目，未公开的不含在内</p>
</div>
<div class="main2">
<div class="flex-box query-box head">
<span>近五年全国招标总数<span class="number">10,610,000 </span>个</span>
<!--<el-select v-model="year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择">-->
<!--<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />-->
<!--</el-select>-->
</div>
<div class="table-item">
<el-table
:data="tableData"
border
height="430"
fit
highlight-current-row
>
<el-table-column label="序号" width="50" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="area" label="地区"/>
<el-table-column prop="number" sortable label="招标数量"/>
<el-table-column prop="zb" sortable label="占比"/>
</el-table>
</div>
</div>
</div>
<div class="zb-content content2">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国招标项目概览</span>
</div>
</div>
<div class="text">通过对近五年全国招标数据进行分析，发现该企业主要集中在3月（230个）、6月（209个）进行招标。</div>
<div class="main1">
<div id="gl-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为近五年全国公开的招标项目，未公开的不含在内</p>
</div>
<div class="table-item">
<el-table
:data="tableData1"
border
height="430"
fit
highlight-current-row
>
<el-table-column label="序号" width="50" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="area" label="月份"/>
<el-table-column prop="number" sortable label="招标数量"/>
<el-table-column prop="zb" sortable label="占比"/>
</el-table>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'NationalEconomies',
data() {
return {
year:'',
yearOptions: [
{ name: '2023年', value: '2023' },
{ name: '2022年', value: '2022' },
{ name: '2021年', value: '2021' },
],
zbData:['广东','江苏','山东','浙江','河南','安徽','河北','四川','湖北','江西','甘肃','重庆','福建','云南','北京','湖南','山西'],
zbData1:[123,156,236,426,412,231,96,105,210,420,213,86,120,230,150,132,196],
tableData:[
{
area:'广东',
number:'123',
zb:'0.19%'
},
{
area:'江苏',
number:'156',
zb:'0.29%'
},
{
area:'山东',
number:'236',
zb:'0.34%'
},
{
area:'浙江',
number:'426',
zb:'0.34%'
},
{
area:'河南',
number:'412',
zb:'0.34%'
},
{
area:'安徽',
number:'231',
zb:'0.34%'
},
{
area:'河北',
number:'96',
zb:'0.34%'
},
{
area:'四川',
number:'105',
zb:'0.34%'
},
{
area:'湖北',
number:'210',
zb:'0.34%'
},
{
area:'江西',
number:'420',
zb:'0.34%'
},
{
area:'甘肃',
number:'213',
zb:'0.34%'
},
],
glData:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
glData1:[103,156,132,186,203,143,189,301,211,195,132,176],
tableData1:[
{
area:'1月',
number:'123',
zb:'0.19%'
},
{
area:'2月',
number:'156',
zb:'0.29%'
},
{
area:'3月',
number:'236',
zb:'0.34%'
},
{
area:'4月',
number:'426',
zb:'0.34%'
},
{
area:'5月',
number:'412',
zb:'0.34%'
},
{
area:'6月',
number:'231',
zb:'0.34%'
},
{
area:'7月',
number:'96',
zb:'0.34%'
},
{
area:'8月',
number:'105',
zb:'0.34%'
},
{
area:'9月',
number:'210',
zb:'0.34%'
},
{
area:'10月',
number:'420',
zb:'0.34%'
},
{
area:'11月',
number:'213',
zb:'0.34%'
},
{
area:'12月',
number:'213',
zb:'0.34%'
},
],
}
},
created() {
this.$nextTick(()=>{
this.initChart()
this.initChart1()
})
},
methods: {
initChart() {
let myChart = echarts.init(document.getElementById("zb-echarts"))
let option = {
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '5',
right: '5',
top: '10',
bottom: '10',
containLabel: true
},
xAxis: {
type: 'category',
data: this.zbData
},
yAxis: {
type: 'value'
},
series: [
{
data: this.zbData1,
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: [4, 4, 0, 0],
color: '#165DFF',
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#165DFF',
fontSize: 16
}
}
},
// 移入当前的柱状图时改变颜色
emphasis: {
color: '#3384FF',
}
}
}
]
};
myChart.setOption(option);
},
initChart1() {
let myChart = echarts.init(document.getElementById("gl-echarts"))
let option = {
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '5',
right: '5',
top: '20',
bottom: '10',
containLabel: true
},
xAxis: {
type: 'category',
data: this.glData
},
yAxis: {
type: 'value'
},
series: [
{
data: this.glData1,
markPoint:{
data:[
{type:'max',name:'最大值'},
]
},
type: 'bar',
barWidth: 20,
itemStyle: {
normal: {
barBorderRadius: [4, 4, 0, 0],
color: '#2ECFCF',
},
}
}
]
};
myChart.setOption(option);
},
}
}
</script>
<style lang="scss" scoped>
.zhaobiao{
.zb-content{
background: #ffffff;
border-radius: 4px;
margin-top: 12px;
padding: 16px;
}
.text{
width: 100%;
line-height: 28px;
padding: 0 16px;
margin-top: 24px;
font-size: 12px;
color: rgba(35,35,35,0.8);
background: #F4F4F5;
border-radius: 2px;
margin-bottom: 24px;
}
.tips{
margin: 0;
font-size: 12px;
color: rgba(35,35,35,0.4);
i{
color:#909399;
margin-right: 9px;
}
}
.content1{
.main2{
margin-top: 30px;
.head{
span{
font-size: 12px;
color: rgba(35,35,35,0.8);
}
.number{
color:#FF3C3C;
}
::v-deep .el-select{
width: 100px;
height: 32px;
.el-input{
width: 100%;
height: 32px;
}
.el-input__inner{
height: 32px !important;
line-height: 32px;
}
}
}
}
.table-item{
margin-top: 12px;
}
}
.content2{
.table-item{
margin-top: 32px;
}
}
.table-item{
::v-deep .el-table{
.el-table__header-wrapper{
th{
padding: 0;
}
}
}
}
}
</style>
dsk-operate-ui/src/views/macro/nationalEconomies/component/zhongbiao.vue 0 → 100644
View file @ 9ed301fd
<template>
<div class="zhongbiao">
<div class="zb-content content1">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国建筑企业概览</span>
</div>
</div>
<div class="text">截止2022年8月1日，全国共有建筑工程施工总承包资质的企业197572家，其中特级资质企业118家，占比0.06%；一级资质企业3879家，占比1.96%；二级资质企业22235家，占比11.25%；三级资质企业171340家，占比86.73%</div>
<div class="main1">
<div style="height: 300px;">
<div class="left">
<div class="item" v-for="(item,index) in typeList" :class="typeIndex === index ? 'color':''" @click="handleClick(1,index)">{{item}}<i></i></div>
</div>
<div class="right">
<div id="gl-echarts" style="height: 260px;background: #ffffff;"></div>
</div>
</div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
</div>
<div class="main2">
<div class="flex-box query-box head">
<span>近五年全国招标总数<span class="number">10,610,000 </span>个</span>
<!--<el-select v-model="year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择">-->
<!--<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />-->
<!--</el-select>-->
</div>
<div class="table-item">
<el-table
:data="zzTableData"
border
fit
highlight-current-row
>
<el-table-column label="序号" width="50" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="name" label="资质类型"/>
<el-table-column label="特级" align="center">
<el-table-column prop="number" label="数量（个）"/>
<el-table-column prop="zb" label="占比（%）"/>
</el-table-column>
<el-table-column label="一级" align="center">
<el-table-column prop="number" label="数量（个）"/>
<el-table-column prop="zb" label="占比（%）"/>
</el-table-column>
<el-table-column label="二级">
<el-table-column prop="number" label="数量（个）"/>
<el-table-column prop="zb" label="占比（%）"/>
</el-table-column>
<el-table-column label="三级">
<el-table-column prop="number" label="数量（个）"/>
<el-table-column prop="zb" label="占比（%）"/>
</el-table-column>
</el-table>
</div>
</div>
</div>
<div class="zb-content content2">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国建筑企业地区分布</span>
</div>
</div>
<div class="main1">
<div class="tabs">
<div class="item" v-for="(item,index) in typeList" :class="qydqIndex === index ? 'color':''" @click="handleClick(2,index)">{{item}}<i></i></div>
</div>
<div id="jzqy-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为有效期内资质，未公开不包含在内</p>
</div>
<div class="table-item">
<el-table
:data="tableData"
border
height="470"
fit
highlight-current-row
>
<el-table-column label="序号" width="50" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="area" label="地区"/>
<el-table-column label="特级" align="center">
<el-table-column prop="number" label="数量（个）"/>
<el-table-column prop="zb" label="占比（%）"/>
</el-table-column>
<el-table-column label="一级" align="center">
<el-table-column prop="number" label="数量（个）"/>
<el-table-column prop="zb" label="占比（%）"/>
</el-table-column>
<el-table-column label="二级">
<el-table-column prop="number" label="数量（个）"/>
<el-table-column prop="zb" label="占比（%）"/>
</el-table-column>
<el-table-column label="三级">
<el-table-column prop="number" label="数量（个）"/>
<el-table-column prop="zb" label="占比（%）"/>
</el-table-column>
</el-table>
</div>
</div>
<div class="zb-content content3">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国建筑企业备案分布</span>
</div>
</div>
<div class="text">通过对全国建筑工程总承包一级及以上资质企业的备案数据分析，我们发现这些优质企业主要去了广东、安徽、江西、福建、湖北、浙江等地开展经营。</div>
<div class="main1">
<div id="ba-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为公开企业备案地数据。</p>
</div>
<div class="table-item">
<el-table
:data="tableData"
border
height="430"
fit
highlight-current-row
>
<el-table-column label="序号" width="50" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="area" label="地区"/>
<el-table-column prop="number" label="企业异地备案数量（个）"/>
<el-table-column prop="zb" label="占比"/>
</el-table>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'NationalEconomies',
data() {
return {
year:'',
yearOptions: [
{ name: '2023年', value: '2023' },
{ name: '2022年', value: '2022' },
{ name: '2021年', value: '2021' },
],
glData:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
glData1:[103,156,132,186,203,143,189,301,211,195,132,176],
tableData1:[
{
area:'1月',
number:'123',
zb:'0.19%'
},
{
area:'2月',
number:'156',
zb:'0.29%'
},
{
area:'3月',
number:'236',
zb:'0.34%'
},
{
area:'4月',
number:'426',
zb:'0.34%'
},
{
area:'5月',
number:'412',
zb:'0.34%'
},
{
area:'6月',
number:'231',
zb:'0.34%'
},
{
area:'7月',
number:'96',
zb:'0.34%'
},
{
area:'8月',
number:'105',
zb:'0.34%'
},
{
area:'9月',
number:'210',
zb:'0.34%'
},
{
area:'10月',
number:'420',
zb:'0.34%'
},
{
area:'11月',
number:'213',
zb:'0.34%'
},
{
area:'12月',
number:'213',
zb:'0.34%'
},
],
typeList:['建筑工程企业','市政工程企业','公路工程企业','水利水电工程企业'],
typeIndex:0,
jzglData:['特级','一级','二级','三级'],
jzglData1:[103,156,132,186],
zzTableData:[
{
name:'建筑工程施工总承包',
number:'123',
zb:'0.19%'
},
{
name:'市政工程施工总承包',
number:'123',
zb:'0.19%'
},
{
name:'公路工程施工总承包',
number:'123',
zb:'0.19%'
},
{
name:'水利水电工程施工总承包',
number:'123',
zb:'0.19%'
},
],
qydqIndex:0,
zbData:['广东','江苏','山东','浙江','河南','安徽','河北','四川','湖北','江西','甘肃','重庆','福建','云南','北京','湖南','山西'],
zbData1:[123,156,236,426,412,231,96,105,210,420,213,86,120,230,150,132,196],
tableData:[
{
area:'广东',
number:'123',
zb:'0.19%'
},
{
area:'江苏',
number:'156',
zb:'0.29%'
},
{
area:'山东',
number:'236',
zb:'0.34%'
},
{
area:'浙江',
number:'426',
zb:'0.34%'
},
{
area:'河南',
number:'412',
zb:'0.34%'
},
{
area:'安徽',
number:'231',
zb:'0.34%'
},
{
area:'河北',
number:'96',
zb:'0.34%'
},
{
area:'四川',
number:'105',
zb:'0.34%'
},
{
area:'湖北',
number:'210',
zb:'0.34%'
},
{
area:'江西',
number:'420',
zb:'0.34%'
},
{
area:'甘肃',
number:'213',
zb:'0.34%'
},
],
}
},
created() {
this.$nextTick(()=>{
this.initChart()
this.initChart1()
this.initChart2()
})
},
methods: {
initChart() {
let myChart = echarts.init(document.getElementById("gl-echarts"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.jzglData,
},
yAxis: {
type: 'value',
},
grid: {
top:40,
left:50,
right:40,
bottom:40,
},
series: [
{
data: this.jzglData1,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#0081FF",
},
itemStyle:{
color: "#4E8EFF",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#DFEAFF",
},
{
offset: 1,
color: "#5895FF",
},
]),
},
}
]
}
myChart.setOption(option);
},
initChart1() {
let myChart = echarts.init(document.getElementById("jzqy-echarts"))
let option = {
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '5',
right: '5',
top: '20',
bottom: '10',
containLabel: true
},
xAxis: {
type: 'category',
data: this.zbData
},
yAxis: {
type: 'value'
},
series: [
{
data: this.zbData1,
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: [4, 4, 0, 0],
color: '#165DFF',
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#165DFF',
fontSize: 16
}
}
},
// 移入当前的柱状图时改变颜色
emphasis: {
color: '#3384FF',
}
}
}
]
};
myChart.setOption(option);
},
initChart2() {
let myChart = echarts.init(document.getElementById("ba-echarts"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.zbData,
},
yAxis: {
type: 'value',
},
grid: {
top:20,
left:30,
right:20,
bottom:20,
},
series: [
{
data: this.zbData1,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#FFAB44",
},
itemStyle:{
color: "#FFAB44",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FFEDD0",
},
{
offset: 1,
color: "#FFC671",
},
]),
},
}
]
}
myChart.setOption(option);
},
handleClick(type,index){
if(type === 1){
this.typeIndex=index;
}
if(type === 2){
this.qydqIndex=index;
}
},
}
}
</script>
<style lang="scss" scoped>
.zhongbiao{
.zb-content{
background: #ffffff;
border-radius: 4px;
margin-top: 12px;
padding: 16px;
}
.text{
width: 100%;
line-height: 28px;
padding: 0 16px;
margin-top: 24px;
font-size: 12px;
color: rgba(35,35,35,0.8);
background: #F4F4F5;
border-radius: 2px;
margin-bottom: 24px;
}
.tips{
margin: 0;
padding-top: 16px;
font-size: 12px;
color: rgba(35,35,35,0.4);
i{
color:#909399;
margin-right: 9px;
}
}
.content1{
.main1{
.left{
width: 20%;
float: left;
.item{
height: 74px;
line-height: 74px;
color: #333333;
font-size: 16px;
padding-left: 30px;
border-top: 1px solid #EAF3FF;
border-left: 1px solid #EAF3FF;
border-right: 1px solid #EAF3FF;
cursor: pointer;
}
.item:last-child{
border-bottom: 1px solid #EAF3FF;
}
.color{
background: #F0F3FA;
color:#0081FF;
i{
width: 4px;
height: 29px;
background: #0081FF;
border-radius: 10px;
display: inline-block;
float: right;
margin-top: 22px;
}
}
}
.right{
width: 79%;
float: right;
background: #F0F3FA;
height: 295px;
padding: 16px;
}
}
.main2{
margin-top: 30px;
.head{
span{
font-size: 12px;
color: rgba(35,35,35,0.8);
}
.number{
color:#FF3C3C;
}
::v-deep .el-select{
width: 100px;
height: 32px;
.el-input{
width: 100%;
height: 32px;
}
.el-input__inner{
height: 32px !important;
line-height: 32px;
}
}
}
}
.table-item{
margin-top: 12px;
}
}
.content2{
.tabs{
margin-top: 32px;
margin-bottom: 24px;
.item{
display: inline-block;
color: #3D3D3D;
font-size: 14px;
margin-right: 24px;
cursor: pointer;
}
.color{
color: #3D3D3D;
font-weight: 700;
position: relative;
i{
width: 42px;
height: 2px;
background: #0081FF;
display: inline-block;
position: absolute;
bottom:-4px;
left: 50%;
transform: translate(-50%,0);
}
}
}
.table-item{
margin-top: 32px;
}
}
.content3{
.table-item{
margin-top: 32px;
}
}
.table-item{
::v-deep .el-table{
.el-table__header-wrapper{
th{
padding: 0;
}
}
}
}
}
</style>
dsk-operate-ui/src/views/macro/nationalEconomies/index.vue
View file @ 9ed301fd
<template>
<div class="app-container container-box nationalEconomies">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国经济大全</span>
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="year">
<el-select v-model="queryParams.year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择年度" @change="querySubmit">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item prop="area">
<el-cascader
ref="address"
:options="addressList"
:props="props"
v-model="queryParams.address"
@change="querySubmit"
placeholder="地区选择"
collapse-tags
clearable></el-cascader>
</el-form-item>
</el-form>
<div class="header">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全国经济大全" name="first"></el-tab-pane>
<el-tab-pane label="全国招标市场分析" name="second"></el-tab-pane>
<el-tab-pane label="全国中标市场分析" name="third"></el-tab-pane>
</el-tabs>
</div>
<div class="flex-box query-ability">
<span class="flex-box"><img src="@/assets/images/ability_vs.png">地区经济对比</span>
<span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
</div>
</div>
<div class="table-item">
<el-table
v-loading="tableLoading"
:data="tableData"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<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="70" align="left" fixed>
<template slot-scope="scope">
<router-link to="" tag="a" class="a-link">{{ scope.row.address || '广东省' }}</router-link>
</template>
</el-table-column>
<el-table-column label="年度明细" prop="dataId" width="90" align="left" fixed>
<template slot-scope="scope">
<img src="@/assets/images/icon_detailed.png" class="icon-detailed" @click="handleDetail(scope.row)">
</template>
</el-table-column>
<el-table-column label="GDP（元）" prop="dataId" sortable min-width="115" align="right" />
<el-table-column label="GDP增速" prop="cgrdm" sortable min-width="100" align="right" />
<el-table-column label="人均GDP（元）" prop="cgrssqy" sortable width="125" align="right" />
<el-table-column label="人口（万人）" prop="cgrssqy" sortable width="120" align="right" />
<el-table-column label="一般公共预算收入 (亿元)" prop="cgrzyhy" sortable width="170" align="right" />
<el-table-column label="一般公共预算收入增速（%）" prop="cgzzxs" sortable min-width="140" align="right" />
<el-table-column label="一般公共预算支出（亿元）" prop="cgfs" sortable width="140" align="left" />
<el-table-column label="政府性基金收入（亿元）" width="140" sortable align="left">
<template slot-scope="scope">
<router-link to="/purchaserDetail" target="_blank" tag="a" class="a-link">{{ scope.row.zbwj }}</router-link>
</template>
</el-table-column>
<el-table-column label="政府性基金收入：土地出让收入（亿元）" prop="cgfs" sortable width="150" align="left" />
<el-table-column label="政府性基金支出（亿元）" prop="cgfs" width="170" sortable align="left" />
<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" />
<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" />
<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">
<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" />
<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" />
<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" />
<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" />
<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" />
</el-table>
</div>
<div class="pagination-box">
<el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
</div>
<economies-detail ref="economiesDetail" />
<Economic v-if="activeName === 'first'"></Economic>
<ZhaoBiao v-if="activeName === 'second'"></ZhaoBiao>
<ZhongBiao v-if="activeName === 'third'"></ZhongBiao>
</div>
</template>
<script>
import { browsedIndexPage } from '@/api/nationalEconomies'
import dataRegion from '@/assets/json/dataRegion'
import economiesDetail from './component/economies-detail'
import axios from 'axios'
import Economic from './component/qgjjdq'
import ZhaoBiao from './component/zhaobiao'
import ZhongBiao from './component/zhongbiao'
export default {
name: 'NationalEconomies',
components: {
economiesDetail
Economic,ZhaoBiao,ZhongBiao
},
data() {
return {
queryParams: {
year: '',
address: ''
},
yearOptions: [
{ name: '2023年', value: '2023' },
{ name: '2022年', value: '2022' },
{ name: '2021年', value: '2021' },
],
props: {
value: 'id',
multiple: true,
},
addressList: [],
tableData: [
{
dataId:'1',
cgrssqy:'100',
cgfs:'200'
}
],
tableLoading: false,
pageIndex: 1,
pageSize: 10,
tableDataTotal: 0
activeName: 'first'
}
},
created() {
this.querySubmit()
this.dataRegion()
},
methods: {
//地区
async dataRegion() {
// await axios.post("https://files.jiansheku.com/file/json/common/dataRegion.json", {}, {
// headers: {
// 'Content-Type': 'application/json'
// }
// }).then(res => {
// if (res.data.code == 200) {
// console.log(res.data.data)
// }
// })
var str = [];
for (let x = 0; x < 3; x++) {
for (let i = 0; i < dataRegion.length; i++) {
if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
str.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
for (let j = 0; j < str.length; j++) {
if (str[j].id == dataRegion[i].parentId) {
str[j].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
}
}
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
for (let j = 0; j < str.length; j++) {
for (let k = 0; k < str[j].children.length; k++) {
if (str[j].children[k].id == dataRegion[i].parentId) {
str[j].children[k].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId
// "children":[]
});
}
}
}
}
}
}
this.addressList = str;
},
// 查询提交
async querySubmit() {
// this.tableLoading = true
const params = { pageIndex: this.pageIndex, pageSize: this.pageSize, browsedType: 1 }
if(this.queryParams.address){
let arr = this.$refs.address.getCheckedNodes();
let provinceCode = [],cityCode = [],countyCode = [];
for (var i in arr) {
if (arr[i].parent) {
if (!arr[i].parent.checked) {
arr[i].hasChildren && cityCode.push(arr[i].value);
!arr[i].hasChildren && countyCode.push(arr[i].value);
}
} else {
provinceCode.push(arr[i].value)
}
}
if(provinceCode.length > 0){
params.procinceId=provinceCode.join(',')
}
if(cityCode.length > 0){
params.cityId=cityCode.join(',')
}
if(countyCode.length > 0){
params.districtId=countyCode.join(',')
}
}
console.log(params)
handleClick() {
// browsedIndexPage(params).then(res => {
// this.tableData = res.data.list
// this.tableDataTotal = res.data.totalCount
// })
// // 延迟关闭加载效果
// setTimeout(() => {
// this.tableLoading = false
// }, 200)
},
// 明细
handleDetail(row) {
this.$refs.economiesDetail.open(row)
},
// 重置页数
handleSizeChange(val) {
this.pageIndex = 1
this.pageSize = val
this.querySubmit()
},
// 跳转指定页数
handleCurrentChange(val) {
this.pageIndex = val
this.querySubmit()
}
}
}
......@@ -274,15 +55,10 @@ export default {
}
</style>
<style lang="scss" scoped>
.query-box{
margin: -8px 0 8px 0;
.query-params{
.el-form{
margin-left: 24px;
}
}
.app-container{
padding: 0;
}
.icon-detailed{
width: 16px;
height: 16px;
......@@ -290,30 +66,42 @@ export default {
}
.nationalEconomies{
background: #ffffff;
border-radius: 4px;
.table-item{
::v-deep .el-table{
th{
font-size: 12px !important;
font-weight: 400 !important;
.header{
justify-content: space-between;
height: 48px;
background: #FFFFFF;
border-radius: 4px;
color: #232323;
::v-deep .el-tabs{
height: 48px;
line-height: 48px;
.el-tabs__nav-wrap::after {
position: static !important;
}
.el-table__fixed-header-wrapper th{
background: #F0F3FA;
.el-tabs__header{
margin: 0;
.el-tabs__item{
padding: 0 16px;
font-size: 16px;
}
.caret-wrapper{
width: 10px;
/*<!--position: absolute;-->*/
/*<!--right: 12px;-->*/
/*<!--top: -3px;-->*/
.is-active{
font-weight: bold;
}
/*.sort-caret{*/
/*position: initial;*/
/*}*/
/*.ascending{*/
/*margin-bottom: 3px;*/
/*}*/
}
.el-tabs__content{
width: 100%;
}
}
.location{
font-size: 14px;
color: #0081FF;
i{
margin-right: 6px;
font-size: 16px;
}
}
}
}
</style>
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