Skip to content

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

修改

parent 97abc1f1
Hide whitespace changes
Inline Side-by-side
Showing with 1552 additions and 702 deletions
dsk-operate-ui/src/api/macro/macro.js
View file @ 04e53923
......@@ -68,6 +68,14 @@ export function countLandMarketByProvince(param) {
})
}
//全国商机项目分析-全国土地交易项目年份统计
export function countLandMarketByYear() {
return request({
url: '/marketAnalysis/countLandMarketByYear',
method: 'POST',
})
}
//全国商机项目分析-全国各地区招标统计TOP10
export function countNewsBidByProvince(param) {
return request({
......@@ -76,10 +84,13 @@ export function countNewsBidByProvince(param) {
data: param
})
}
//全国商机项目分析-全国土地交易项目年份统计
export function countLandMarketByYear() {
//全国商机项目分析-全国公招项目统计
export function countNewsBidByYear() {
return request({
url: '/marketAnalysis/countLandMarketByYear',
url: '/marketAnalysis/countNewsBidByYear',
method: 'POST',
})
}
......@@ -91,6 +102,14 @@ export function countBidGroupByProvince(param) {
data: param
})
}
//全国商机项目分析-全国各年度招标月份统计
export function countNewsBidByMonth(param) {
return request({
url: '/marketAnalysis/countNewsBidByMonth',
method: 'POST',
data: param
})
}
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/sjxmfx.vue
View file @ 04e53923
......@@ -13,7 +13,7 @@
import * as echarts from 'echarts';
import { countGroupByMonth,countGroupByProvince,getYear } from '@/api/macro/macro'
import Tdjy from './tdjy'
import Zhaobiao from './zhaobiao'
import Zhaobiao from './zhaobiao1'
export default {
name: 'NationalEconomies',
components: {
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/tdjy.vue
View file @ 04e53923
<template>
<div class="tdjy">
<p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的土地交易项目，未公开的不含在内</p>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目供应方式</span>
<el-select v-model="years" @change="handleYears(1)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
<div>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div v-if="!isSkeleton" class="tdjy">
<p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的土地交易项目，未公开的不含在内</p>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目供应方式</span>
<el-select v-model="years" @change="handleYears(1)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
</div>
</div>
</div>
<div class="content_box">
<div class="box-left">
<div id="echarts1" style="height: 280px"></div>
</div>
<div class="box-right">
<el-table
:data="gyfsList"
element-loading-text="Loading"
border
show-summary
max-height="280"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="type" label="供应方式" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="160" />
</el-table>
<div class="content_box">
<div class="box-left">
<div id="echarts1" style="height: 280px"></div>
</div>
<div class="box-right">
<el-table
:data="gyfsList"
element-loading-text="Loading"
border
show-summary
max-height="280"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="type" label="供应方式" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="160" />
</el-table>
</div>
</div>
</div>
</div>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目土地用途</span>
<el-select v-model="years1" @change="handleYears(2)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目土地用途</span>
<el-select v-model="years1" @change="handleYears(2)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
</div>
</div>
</div>
<div class="content_box">
<div class="box-left">
<div id="echarts2" style="height: 280px"></div>
</div>
<div class="box-right">
<el-table
:data="tdytList"
element-loading-text="Loading"
border
show-summary
max-height="280"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="type" label="供应方式" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="160" />
</el-table>
<div class="content_box">
<div class="box-left">
<div id="echarts2" style="height: 280px"></div>
</div>
<div class="box-right">
<el-table
:data="tdytList"
element-loading-text="Loading"
border
show-summary
max-height="280"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="type" label="供应方式" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="160" />
</el-table>
</div>
</div>
</div>
</div>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目地区Top10</span>
<el-select @change="handleYears(3)" style="margin-right: 8px" v-model="address" multiple collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in addressList" :key="index" :label="item.label" :value="item.id" />
</el-select>
<el-select v-model="years2" @change="handleYears(3)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目地区Top10</span>
<el-select @change="handleYears(3)" style="margin-right: 8px" v-model="address" multiple collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in addressList" :key="index" :label="item.label" :value="item.id" />
</el-select>
<el-select v-model="years2" @change="handleYears(3)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
</div>
</div>
</div>
<div class="content_box">
<div class="box-left" style="width: 60%;">
<div id="echarts3" style="height: 300px"></div>
</div>
<div class="box-right">
<el-table
:data="topList"
element-loading-text="Loading"
border
show-summary
max-height="280"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="province" label="地区" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="160" />
</el-table>
</div>
</div>
</div>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目年份统计</span>
<div class="content_box">
<div class="box-left" style="width: 60%;">
<div id="echarts3" style="height: 300px"></div>
</div>
<div class="box-right">
<el-table
:data="topList"
element-loading-text="Loading"
border
show-summary
max-height="280"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="province" label="地区" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="160" />
</el-table>
</div>
</div>
</div>
<div class="content_box">
<div class="box-left" style="width: 60%;">
<div id="echarts4" style="height: 300px"></div>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国土地交易项目年份统计</span>
</div>
</div>
<div class="box-right">
<el-table
:data="nftjList"
element-loading-text="Loading"
border
show-summary
max-height="290"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="type" label="年份" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="rate" label="占比" align="right" :formatter="formatStatus" width="160" />
</el-table>
<div class="content_box">
<div class="box-left" style="width: 60%;">
<div id="echarts4" style="height: 300px"></div>
</div>
<div class="box-right">
<el-table
:data="nftjList"
element-loading-text="Loading"
border
show-summary
max-height="290"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="type" label="年份" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="土地交易项目 (个)" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="160" />
</el-table>
</div>
</div>
</div>
</div>
......@@ -148,8 +151,12 @@
import * as echarts from 'echarts';
import dataRegion from '@/assets/json/dataRegion'
import { countLandMarketByType,countLandMarketByProvince,countLandMarketByYear } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
export default {
name: 'NationalEconomies',
components: {
skeleton
},
data() {
return {
myChart1:'',
......@@ -166,24 +173,32 @@ export default {
tdytList:[],
topList:[],
nftjList:[],
typeName:['住宅用地','工业用地','城镇住宅用地','其他商服用地','公共设施用地','公路用地','城镇村道路用地','公园与绿地',
'工矿仓储用地','零售商业用地','科研用地','街巷用地','机关团体用地','商服用地','商务金融用地']
isSkeleton:true,
// typeName:['住宅用地','工业用地','城镇住宅用地','其他商服用地','公共设施用地','公路用地','城镇村道路用地','公园与绿地',
// '工矿仓储用地','零售商业用地','科研用地','街巷用地','机关团体用地','商服用地','商务金融用地']
}
},
created() {
this.dataRegion()
this.yearsData()
this.getCountLandMarketByType()
this.getCountLandMarketByTypeTd()
this.getCountLandMarketByProvince()
this.getCountLandMarketByYear()
setTimeout(() => {
this.isSkeleton=false;
this.getCountLandMarketByType()
this.getCountLandMarketByTypeTd()
this.getCountLandMarketByProvince()
this.getCountLandMarketByYear()
}, 1500);
},
mounted() {
},
beforeDestroy(){
},
methods: {
getCountLandMarketByType(){
// this.isSkeleton = true
countLandMarketByType({type:'供应方式',yearStr:this.years.join(",")}).then(res => {
// this.isSkeleton = false
this.gyfsList=res.data.provinceDate;
var list=[];
for(var i=0;i<res.data.provinceDate.length;i++){
......@@ -193,11 +208,15 @@ export default {
obj.rate=res.data.provinceDate[i].rate;
list.push(obj)
}
this.initChart1(list)
this.$nextTick(() => {
this.initChart1(list)
})
})
},
getCountLandMarketByTypeTd(){
// this.isSkeleton = true
countLandMarketByType({type:'土地用途',yearStr:this.years1.join(",")}).then(res => {
// this.isSkeleton = false
this.tdytList=res.data.provinceDate;
var list=[];
for(var i=0;i<10;i++){
......@@ -207,7 +226,9 @@ export default {
obj.rate=res.data.provinceDate[i].rate;
list.push(obj)
}
this.initChart2(list)
this.$nextTick(() => {
this.initChart2(list)
})
})
},
getCountLandMarketByProvince(){
......@@ -217,7 +238,9 @@ export default {
if(this.address.length > 0){
params.provinceId=this.address.join(",")
}
// this.isSkeleton = true
countLandMarketByProvince(params).then(res => {
// this.isSkeleton = false
this.topList=res.data.provinceDate;
var list=[];
if(res.data.provinceDate){
......@@ -238,7 +261,6 @@ export default {
getCountLandMarketByYear(){
countLandMarketByYear().then(res => {
this.nftjList=res.data.yearDate;
console.log(this.nftjList)
var list=[];
if(res.data.yearDate){
for(var i=0;i<res.data.yearDate.length;i++){
......@@ -356,7 +378,7 @@ export default {
// console.log(typeList)
let myChart = echarts.init(document.getElementById("echarts3"))
let seriesData=[]
let color=['#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#81D5BC', '#67B3FD', '#BEECFF', '#E9C8FF'];
let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
let typeNameList=data[0].typeList.map(item => item.type);
let item={}
for(var i=0; i<data.length; i++){
......@@ -458,7 +480,7 @@ export default {
right:20,
bottom:60,
},
color:['#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#81D5BC', '#67B3FD', '#BEECFF', '#E9C8FF'],
color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
series: seriesData
}
myChart.setOption(option);
......@@ -471,7 +493,7 @@ export default {
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts4"))
let seriesData=[]
let color=['#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#81D5BC', '#67B3FD', '#BEECFF', '#E9C8FF'];
let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
let typeNameList=data[0].typeList.map(item => item.type);
let item={}
for(var i=0; i<data.length; i++){
......@@ -573,7 +595,7 @@ export default {
right:20,
bottom:60,
},
color:['#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#81D5BC', '#67B3FD', '#BEECFF', '#E9C8FF'],
color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
series: seriesData
}
myChart.setOption(option);
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/zhaobiao.vue
View file @ 04e53923
<template>
<div class="zhaobiao">
<p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的招标项目，未公开的不含在内</p>
<div class="zb-content content1">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国招标数量分析</span>
<div>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div v-if="!isSkeleton" class="tdjy">
<p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的招标项目，未公开的不含在内</p>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国公招项目统计</span>
</div>
</div>
</div>
<div class="text">{{value}}全国项目招标数量达到{{totalCount}}万个，招标数量前五的地区分别是
{{tableData[1].type}}（{{tableData[1].count}}个）、{{tableData[2].type}}（{{tableData[2].count}}个）、{{tableData[3].type}}（{{tableData[3].count}}个）、{{tableData[4].type}}（{{tableData[4].count}}个）、{{tableData[5].type}}（{{tableData[5].count}}个）。</div>
<div class="main1">
<div id="zb-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为{{value}}全国公开的招标项目，未公开的不含在内</p>
</div>
<div class="main2">
<div class="flex-box query-box head">
<span>{{value}}全国招标总数<span class="number"> {{totalCount}} </span>万个</span>
<div class="select-popper" style="position: relative;margin-right:0;">
<el-dropdown
@command="handleDate"
trigger="click"
ref="punishDateShowPopper"
:hide-on-click="false"
<div class="content_box">
<div class="box-left" style="width: 60%;">
<div id="echarts1" style="height: 300px"></div>
</div>
<div class="box-right">
<el-table
:data="xmtjList"
element-loading-text="Loading"
border
show-summary
max-height="280"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<span class="el-dropdown-link" :class="punishDateValue ? 'color_text' : ''">{{punishDateValue}}<i class="el-icon-arrow-down" style="color:#313131;"></i></span>
<div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(item, i) in yearOptions"
:class=" punishDateValue && punishDateValue == item.value? 'color_text': ''"
:key="i"
:command="item.value"
>
<div @mouseenter="hidePoper">{{ item.label }}</div>
</el-dropdown-item>
<el-dropdown-item command="自定义" style="padding: 0; text-indent: 20px">
<div @mouseenter="mouseenter">
<span :class="punishDateValue == '自定义' ? 'color_text' : ''">自定义<i class="el-icon-arrow-right"></i></span>
<el-date-picker
v-if="punishDateShowPopper"
@change="changepunishDate"
class="land_date_picker"
v-model="punishDate"
ref="datePicker"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</div>
</el-dropdown>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="type" label="年份" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="招标数量（个）" align="right" :formatter="formatStatus" sortable width="200" />
</el-table>
</div>
</div>
<div class="table-item">
<el-table
:data="tableData"
border
height="430"
fit
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column label="地区">
<template slot-scope="scope">{{ scope.row.type === '全国'? '未公示地区': scope.row.type}}</template>
</el-table-column>
<el-table-column prop="count" sortable label="招标数量" align="right"/>
<el-table-column prop="rate" sortable label="占比（%）" align="right"/>
</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 class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国各地区招标统计TOP10</span>
<el-select @change="handleYears(1)" style="margin-right: 8px" v-model="address" multiple collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in addressList" :key="index" :label="item.label" :value="item.id" />
</el-select>
<el-select v-model="years1" @change="handleYears(1)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
</div>
</div>
<div class="content_box">
<div class="box-left" style="width: 60%;">
<div id="echarts2" style="height: 300px"></div>
</div>
<div class="box-right">
<el-table
:data="topList"
element-loading-text="Loading"
border
show-summary
max-height="280"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="province" label="地区" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="招标数量 (个)" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="countRate" label="占比（%）" align="right" :formatter="formatStatus" width="160" />
</el-table>
</div>
</div>
</div>
<div class="text">通过对{{year}}全国招标数据进行分析，发现主要集中在{{dataSort[0].label}}（{{dataSort[0].count}}个）、{{dataSort[1].label}}（{{dataSort[1].count}}个）进行招标。</div>
<div class="main1">
<div id="gl-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为{{year}}年全国公开的招标项目，未公开的不含在内</p>
</div>
<div class="main2">
<div class="selectYear">
<el-select v-model="year" filterable class="form-content-width" placeholder="请选择" @change="changeValue()">
<el-option v-for="(item, index) in yearData" :key="index" :label="item.label" :value="item.value" />
</el-select>
<div class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国各年度招标月份统计</span>
<el-select v-model="years2" @change="handleYears(2)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
</el-select>
</div>
</div>
<div class="table-item">
<el-table
:data="dataList"
border
height="430"
fit
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="label" label="月份"/>
<el-table-column prop="count" sortable label="招标数量" align="right"/>
<el-table-column prop="rate" sortable label="占比（%）" align="right"/>
</el-table>
<div class="content_box">
<div class="box-left" style="width: 60%;">
<div id="echarts3" style="height: 300px"></div>
</div>
<div class="box-right">
<el-table
:data="zbyfList"
element-loading-text="Loading"
border
show-summary
max-height="290"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="label" label="时间" width="200" :formatter="formatStatus"/>
<el-table-column prop="count" label="招标数量（个）" align="right" :formatter="formatStatus" sortable width="160" />
<el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="160" />
</el-table>
</div>
</div>
</div>
</div>
......@@ -117,362 +113,528 @@
<script>
import * as echarts from 'echarts';
import { countGroupByMonth,countGroupByProvince,getYear } from '@/api/macro/macro'
export default {
name: 'NationalEconomies',
data() {
return {
year:'近一年',
yearOptions: [
{ label: '近五年', value: '近五年' },
{ label: '近三年', value: '近三年' },
{ label: '近一年', value: '近一年' },
],
tableData:[
{
type:'',
count:'',
},
{
type:'',
count:'',
},
{
type:'',
count:'',
},
{
type:'',
count:'',
},
{
type:'',
count:'',
},
{
type:'',
count:'',
},
],
tableData1:[],
dataList:[],
dataSort:[
{
label:'',
count:''
},
{
label:'',
count:''
},
],
totalCount:'',
punishDateValue: "请选择",
value:'近五年',
punishDateShowPopper: false,
punishDate: "",
yearData:[
{ label: '近一年', value: '近一年' },
{ label: '近二年', value: '近二年' },
{ label: '近三年', value: '近三年' },
],
myChart:'',
myChart1:'',
}
},
created() {
this.getDataByProvince({})
let mydate=new Date();
var startTime, endTime, Year, Month, Day,startyear
Year = mydate.getFullYear();
Month = mydate.getMonth() + 1;
Day = mydate.getDate();
import dataRegion from '@/assets/json/dataRegion'
import { countNewsBidByYear,countBidGroupByProvince,countNewsBidByMonth } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
export default {
name: 'NationalEconomies',
components: {
skeleton
},
data() {
return {
myChart1:'',
myChart2:'',
myChart3:'',
myChart4:'',
addressList:[],
address:[],
years1:[2023],
years2:[2023],
yearOptions:[],
xmtjList:[],
topList:[],
zbyfList:[],
isSkeleton:false,
}
},
created() {
this.dataRegion()
this.yearsData()
setTimeout(() => {
this.isSkeleton=false;
this.getcountNewsBidByYear()
this.getCountBidGroupByProvince()
this.getCountNewsBidByMonth()
}, 1500);
},
mounted() {
},
beforeDestroy(){
Month = Month < 10 ? '0' + Month : Month
Day = Day < 10 ? '0' + Day : Day
startyear=mydate.getFullYear()-1;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
let params={
startDate:startTime,
endDate:endTime
}
this.getDataByMonth(params)
this.$nextTick(()=>{
// this.initChart()
// this.initChart1()
})
window.addEventListener("resize", this.resizeEcharts);
},
beforeDestroy(){
window.removeEventListener("resize", this.resizeEcharts);
},
activated() {
this.resizeEcharts()
},
methods: {
resizeEcharts (){
const self = this
setTimeout(function(){ //图表跟随页面大小变化宽度
self.myChart.resize()
self.myChart1.resize()
}, 10)
},
getDataByProvince(params){
countGroupByProvince(params).then(res => {
this.tableData=res.data.provinceDate;
let arr=[]
for (let i=0; i<res.data.provinceDate.length; i++){
if(res.data.provinceDate[i].type != '全国'){
arr.push(res.data.provinceDate[i])
}
methods: {
getcountNewsBidByYear(){
countNewsBidByYear().then(res => {
this.xmtjList=res.data.provinceDate;
this.$nextTick(() => {
this.initChart1(res.data.provinceDate)
})
})
},
getCountBidGroupByProvince(){
let params={
yearStr:this.years1.join(",")
}
this.dataList=arr;
this.totalCount=res.data.totalCount;
this.initChart()
})
},
getDataByMonth(params){
countGroupByMonth(params).then(res => {
this.tableData1=res.data;
this.dataList=res.data;
let dataList=res.data
let dataArr = JSON.parse(JSON.stringify(dataList))
let arr = dataList.sort((a, b) => {
return b.count - a.count
if(this.address.length > 0){
params.provinceId=this.address.join(",")
}
// this.isSkeleton = true
countBidGroupByProvince(params).then(res => {
// this.isSkeleton = false
this.topList=res.data;
console.log(res.data)
var list=[];
// if(res.data.provinceDate){
// for(var i=0;i<res.data.provinceDate.length;i++){
// var obj={};
// obj.province=res.data.provinceDate[i].province;
// obj.value=res.data.provinceDate[i].count;
// obj.rate=res.data.provinceDate[i].rate;
// obj.typeList=res.data.provinceDate[i].typeList
// list.push(obj)
// }
// this.$nextTick(() => {
// this.initChart3(list)
// })
// }
})
this.dataSort=arr;
this.initChart1()
this.dataList = JSON.parse(JSON.stringify(dataArr))
})
},
initChart() {
this.myChart = echarts.init(document.getElementById("zb-echarts"))
let option = {
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '5',
right: '5',
top: '15',
bottom: '10',
containLabel: true
},
xAxis: {
type: 'category',
data: this.dataList.map(item => item.type),
axisLabel: {
show: true,
// "interval": 0,
"rotate": 40 //X轴倾斜度
},
},
yAxis: {
type: 'value',
},
series: [
{
data: this.dataList.map(item => item.count),
type: 'bar',
barWidth: 16,
itemStyle: {
normal: {
barBorderRadius: [4, 4, 0, 0],
color: '#165DFF',
},
getCountNewsBidByMonth(){
countNewsBidByMonth({yearStr:this.years2.join(",")}).then(res => {
this.zbyfList=res.data.monthDate;
// var list=[];
// if(res.data.yearDate){
// for(var i=0;i<res.data.yearDate.length;i++){
// var obj={};
// obj.type=res.data.yearDate[i].type;
// obj.value=res.data.yearDate[i].count;
// obj.rate=res.data.yearDate[i].rate;
// obj.typeList=res.data.yearDate[i].typeList
// list.push(obj)
// }
// this.$nextTick(() => {
// this.initChart4(list)
// })
// }
})
},
initChart1(data) {
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1"))
let seriesData=[]
let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
let typeNameList=data[0].typeList.map(item => item.type);
let item={}
for(var i=0; i<data.length; i++){
for(var j=0; j<data[i].typeList.length; j++){
item[typeNameList[j]] = [];
}
}
for(var i=0; i<data.length; i++) {
for (var j = 0; j < data[i].typeList.length; j++) {
if(data[i].typeList[j].type === typeNameList[0]){
item[typeNameList[0]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[1]){
item[typeNameList[1]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[2]){
item[typeNameList[2]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[3]){
item[typeNameList[3]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[4]){
item[typeNameList[4]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[5]){
item[typeNameList[5]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[6]){
item[typeNameList[6]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[7]){
item[typeNameList[7]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[8]){
item[typeNameList[8]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[9]){
item[typeNameList[9]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[10]){
item[typeNameList[10]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[11]){
item[typeNameList[11]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[12]){
item[typeNameList[12]].push(data[i].typeList[j].count)
}
}
}
for(var i=0; i<typeNameList.length; i++) {
seriesData.push({
name:typeNameList[i],
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
color: color[i], //图例颜色
borderWidth: 4,
borderColor: color[i],
lineStyle: { color: color[i], width: 2 }
}
},
data:item[typeNameList[i]],
});
}
let option ={
// legend: {
// left: "center",
// bottom: 0,
// itemHeight:8,
// itemWidth:16,
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
show: false, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#165DFF',
fontSize: 16
}
backgroundColor: '#FFFFFF'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
interval: 0
},
// 移入当前的柱状图时改变颜色
emphasis: {
color: '#3384FF',
data: data.map(item => item.type),
},
yAxis: {
type: 'value',
},
grid: {
top:30,
left:100,
right:20,
bottom:60,
},
color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
series: seriesData
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart2(data) {
this.$nextTick(() => {
// console.log(typeList)
let myChart = echarts.init(document.getElementById("echarts2"))
let seriesData=[]
let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
let typeNameList=data[0].typeList.map(item => item.type);
let item={}
for(var i=0; i<data.length; i++){
for(var j=0; j<data[i].typeList.length; j++){
item[typeNameList[j]] = [];
}
}
for(var i=0; i<data.length; i++) {
for (var j = 0; j < data[i].typeList.length; j++) {
if(data[i].typeList[j].type === typeNameList[0]){
item[typeNameList[0]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[1]){
item[typeNameList[1]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[2]){
item[typeNameList[2]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[3]){
item[typeNameList[3]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[4]){
item[typeNameList[4]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[5]){
item[typeNameList[5]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[6]){
item[typeNameList[6]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[7]){
item[typeNameList[7]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[8]){
item[typeNameList[8]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[9]){
item[typeNameList[9]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[10]){
item[typeNameList[10]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[11]){
item[typeNameList[11]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[12]){
item[typeNameList[12]].push(data[i].typeList[j].count)
}
}
}
]
};
this.myChart.setOption(option);
},
initChart1() {
this.myChart1 = echarts.init(document.getElementById("gl-echarts"))
let dataList=this.tableData1;
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.tableData1.map(item => item.label),
axisLabel: {
show: true,
// "interval": 0,
"rotate": this.year === '近二年'|| this.year === '近三年'? 40: 0 //X轴倾斜度
},
},
yAxis: {
type: 'value'
},
series: [
{
data: this.tableData1.map(item => item.count),
type: 'bar',
barWidth: 16,
itemStyle: {
normal: {
barBorderRadius: [4, 4, 0, 0],
// color: '#2ECFCF',
color: function (params) {
var colorList = [] //定义一个存储颜色的数组
//更改前二位柱形颜色
//定义一个变量 保存柱形图数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存
let dataArr = JSON.parse(JSON.stringify(dataList))
let arr = dataList.sort((a, b) => {
return b.count - a.count
})
//将原数组数据赋值回去 保持数据不变
dataList = JSON.parse(JSON.stringify(dataArr))
//遍历数据 将原数组和排序后的数组比较
dataList.map(i => {
if (i.count == arr[0].count) {
colorList.push('#F39F35')
} else if (i.count == arr[1].count) {
colorList.push('#6675A5')
}else{
colorList.push('#2ECFCF')
}
})
//返回一个存储着颜色的数组根据数据index顺序渲染到页面
return colorList[params.dataIndex]
},
for(var i=0; i<typeNameList.length; i++) {
seriesData.push({
name:typeNameList[i],
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
color: color[i], //图例颜色
borderWidth: 4,
borderColor: color[i],
lineStyle: { color: color[i], width: 2 }
}
},
data:item[typeNameList[i]],
});
}
let option ={
// legend: {
// left: "center",
// bottom: 0,
// itemHeight:8,
// itemWidth:16,
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#FFFFFF'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
interval: 0
},
data: data.map(item => item.province),
},
yAxis: {
type: 'value',
},
grid: {
top:30,
left:50,
right:20,
bottom:60,
},
color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
series: seriesData
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart3(data) {
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts3"))
let seriesData=[]
let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
let typeNameList=data[0].typeList.map(item => item.type);
let item={}
for(var i=0; i<data.length; i++){
for(var j=0; j<data[i].typeList.length; j++){
item[typeNameList[j]] = [];
}
}
]
};
this.myChart1.setOption(option);
},
handleDate(command) {
if (command && command != "自定义") {
this.punishDateValue = command;
this.$refs.punishDateShowPopper.hide();
this.value = command;
let mydate=new Date();
var startTime, endTime, Year, Month, Day,startyear
Year = mydate.getFullYear();
Month = mydate.getMonth() + 1;
Day = mydate.getDate();
Month = Month < 10 ? '0' + Month : Month
Day = Day < 10 ? '0' + Day : Day
switch (command) {
case "近五年":
startyear=mydate.getFullYear()-5;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
case "近三年":
startyear=mydate.getFullYear()-3;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
for(var i=0; i<data.length; i++) {
for (var j = 0; j < data[i].typeList.length; j++) {
if(data[i].typeList[j].type === typeNameList[0]){
item[typeNameList[0]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[1]){
item[typeNameList[1]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[2]){
item[typeNameList[2]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[3]){
item[typeNameList[3]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[4]){
item[typeNameList[4]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[5]){
item[typeNameList[5]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[6]){
item[typeNameList[6]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[7]){
item[typeNameList[7]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[8]){
item[typeNameList[8]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[9]){
item[typeNameList[9]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[10]){
item[typeNameList[10]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[11]){
item[typeNameList[11]].push(data[i].typeList[j].count)
}
if(data[i].typeList[j].type === typeNameList[12]){
item[typeNameList[12]].push(data[i].typeList[j].count)
}
}
}
for(var i=0; i<typeNameList.length; i++) {
seriesData.push({
name:typeNameList[i],
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
color: color[i], //图例颜色
borderWidth: 4,
borderColor: color[i],
lineStyle: { color: color[i], width: 2 }
}
},
data:item[typeNameList[i]],
});
}
let option ={
// legend: {
// left: "center",
// bottom: 0,
// itemHeight:8,
// itemWidth:16,
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#FFFFFF'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
interval: 0
},
data: data.map(item => item.type),
},
yAxis: {
type: 'value',
},
grid: {
top:30,
left:50,
right:20,
bottom:60,
},
color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
series: seriesData
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
//地区
async dataRegion() {
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": []
});
}
}
}
this.addressList = str;
},
handleYears(key){
switch (key) {
case 1:
this.getCountBidGroupByProvince()
break;
case "近一年":
startyear=mydate.getFullYear()-1;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
case 2:
this.getCountNewsBidByMonth()
break;
}
let params={
startDate:startTime,
endDate:endTime
}
this.getDataByProvince(params)
} else if (command == "自定义") {
this.$refs.datePicker.pickerVisible = true;
} else {
this.$refs.punishDateShowPopper.hide();
this.punishDateValue = "";
this.punishDate = "";
}
},
changepunishDate() {
if (this.punishDate) {
this.punishDateValue = "自定义";
this.value = this.punishDate[0] +' - '+this.punishDate[1];
let params={
startDate:this.punishDate[0],
endDate:this.punishDate[1]
},
handleSearch(){
// console.log(this.address)
},
yearsData(){
let mydate=new Date();
let Year = mydate.getFullYear();
let startyear=mydate.getFullYear()-4;
let Years=[];
for(var i=startyear;i<=Year;i++){
Years.push(i);
}
this.getDataByProvince(params)
}
},
hidePoper() {
if (this.$refs.datePicker) {
this.$refs.datePicker.pickerVisible = false;
}
},
mouseenter() {
this.punishDateShowPopper = true;
if(this.punishDateValue=='自定义'){
this.$nextTick(() => {
// this.$refs.datePicker.focus()
this.$refs.datePicker.pickerVisible = true;
this.yearOptions=Years.reverse()
},
formatStatus: function(row, column, cellValue) {
return cellValue? cellValue : '-'
},
getSummaries(param){
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
if (index === 1) {
sums[index] = '-';
return;
}
if (index === 3) {
sums[index] = '100';
return;
}
const values = data.map(item => Number(item[column.property]));
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return Number(prev) + Number(curr)
} else {
return prev;
}
}, 0);
if (index === 1) {
sums[index] = Number(sums[index]).toFixed(0);
return;
}
});
}
},
changeValue(){
let mydate=new Date();
var startTime, endTime, Year, Month, Day,startyear
Year = mydate.getFullYear();
Month = mydate.getMonth() + 1;
Day = mydate.getDate();
return sums;
},
Month = Month < 10 ? '0' + Month : Month
Day = Day < 10 ? '0' + Day : Day
switch (this.year) {
case "近三年":
startyear=mydate.getFullYear()-3;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
case "近二年":
startyear=mydate.getFullYear()-2;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
case "近一年":
startyear=mydate.getFullYear()-1;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
}
let params={
startDate:startTime,
endDate:endTime
}
this.getDataByMonth(params)
}
}
}
</script>
<style lang="scss" scoped>
......@@ -490,145 +652,154 @@ export default {
border-radius: 4px;
color: #0081FF;
}
.shangji{
.zb-content{
.tdjy{
.text_p{
color: #999999;
font-size: 14px;
margin: 0;
}
.query-params{
.common-title{
margin-right: 24px;
}
::v-deep .form-content-width{
width: 135px;
.el-select__input{
width: 10px !important;
max-width: 10px !important;
margin-left:0;
}
}
::v-deep .el-cascader{
width: 220px;
.el-cascader__tags{
flex-wrap: inherit;
.el-tag{
max-width: 130px;
}
}
}
}
.td_content{
background: #ffffff;
border-radius: 4px;
margin-top: 12px;
padding: 16px;
padding: 16px 52px 16px 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;
font-size: 14px;
.content_box{
display: flex;
justify-content: space-between;
.box-left{
width: 50%;
}
}
.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;
.box-right{
float: right;
::v-deep .el-table{
.sort-caret.ascending{
border-bottom-color: rgba(0,129,255,0.5);
}
.ascending .sort-caret.ascending{
border-bottom-color: #0081FF;
}
.sort-caret.descending{
border-top-color: rgba(0,129,255,0.5);
}
.descending .sort-caret.descending{
border-top-color: #0081FF;
}
.el-table__header-wrapper{
background: #F0F3FA;
th{
background: #F0F3FA;
/*text-align: left;*/
}
}
.el-dropdown-link{
width: 96px;
height: 32px;
display: inline-block;
line-height: 32px;
text-align: center;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #D9D9D9;
cursor: pointer;
i{
margin-left: 8px;
.el-table__footer-wrapper{
background: #F0F3FA;
}
th {
font-size: 13px !important;
font-weight: 400 !important;
}
.cell {
padding-right: 12px !important;
padding-left: 12px !important;
line-height: 18px;
}
.el-table__fixed-header-wrapper{
th{
background: #F0F3FA;
}
}
}
}
.table-item{
margin-top: 12px;
}
}
.content2{
.main2{
.selectYear{
height: 32px;
float: right;
margin-bottom:16px;
}
::v-deep .el-select{
width: 100px;
height: 32px;
.el-input{
width: 100%;
height: 32px;
td.el-table__cell{
border-bottom: 0;
}
.el-input__inner{
height: 32px !important;
line-height: 32px;
tr{
&.current-row>td{
background-color: initial;
}
&:nth-child(2n) {
background: #F8FBFF;
}
}
}
margin-top: 32px;
}
}
.table-item{
::v-deep .el-table{
.el-table__header-wrapper{
th{
.el-table__cell{
height: 40px;
padding: 0;
line-height: 40px;
}
}
.el-table__cell.is-right{
text-align: right;
}
.has-gutter{
tr{
th:nth-child(4){
border-right:0;
.cell{
padding-right: 24px !important;
.el-table__body tr:hover > td.el-table__cell{
background: #DCEBFF;
}
::-webkit-scrollbar-track-piece {
//滚动条凹槽的颜色，还可以设置边框属性
background-color: #F3F4F5;
height: 16px;
padding: 0 4px;
}
//滚动条的宽度
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #F3F4F5;
border-radius: 6px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
border-radius: 8px;
height: 8px;
margin: 0 4px;
background: rgba(98,110,126,0.2);
border: 4px solid rgba(98,110,126,0.2);;
&:hover{
background: #566380;
}
}
.has-gutter{
tr{
th:nth-child(4){
border-right:0;
}
td:nth-child(4){
border-right:0;
}
}
}
}
.el-table__cell.gutter{
background: #F0F3FA;
width: 16px !important;
}
.el-table__row{
td:last-child{
.cell{
padding-right: 24px !important;
.el-table__cell.gutter{
background: #F0F3FA;
}
.el-table__row{
td:last-child{
.cell{
padding-right: 12px !important;
}
}
}
}
th{
font-size: 12px !important;
font-weight: 400 !important;
}
.el-table__fixed-header-wrapper th{
background: #F0F3FA;
}
td.el-table__cell{
border-bottom: 0;
}
.caret-wrapper{
width: 10px;
}
}
}
::v-deep .el-input--medium{
.el-input__icon{
line-height: 32px;
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/zhaobiao1.vue 0 → 100644
View file @ 04e53923
<template>
<div class="zhaobiao">
<p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的招标项目，未公开的不含在内</p>
<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">{{value}}全国项目招标数量达到{{totalCount}}万个，招标数量前五的地区分别是
{{tableData[1].type}}（{{tableData[1].count}}个）、{{tableData[2].type}}（{{tableData[2].count}}个）、{{tableData[3].type}}（{{tableData[3].count}}个）、{{tableData[4].type}}（{{tableData[4].count}}个）、{{tableData[5].type}}（{{tableData[5].count}}个）。</div>
<div class="main1">
<div id="zb-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为{{value}}全国公开的招标项目，未公开的不含在内</p>
</div>
<div class="main2">
<div class="flex-box query-box head">
<span>{{value}}全国招标总数<span class="number"> {{totalCount}} </span>万个</span>
<div class="select-popper" style="position: relative;margin-right:0;">
<el-dropdown
@command="handleDate"
trigger="click"
ref="punishDateShowPopper"
:hide-on-click="false"
>
<span class="el-dropdown-link" :class="punishDateValue ? 'color_text' : ''">{{punishDateValue}}<i class="el-icon-arrow-down" style="color:#313131;"></i></span>
<div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(item, i) in yearOptions"
:class=" punishDateValue && punishDateValue == item.value? 'color_text': ''"
:key="i"
:command="item.value"
>
<div @mouseenter="hidePoper">{{ item.label }}</div>
</el-dropdown-item>
<el-dropdown-item command="自定义" style="padding: 0; text-indent: 20px">
<div @mouseenter="mouseenter">
<span :class="punishDateValue == '自定义' ? 'color_text' : ''">自定义<i class="el-icon-arrow-right"></i></span>
<el-date-picker
v-if="punishDateShowPopper"
@change="changepunishDate"
class="land_date_picker"
v-model="punishDate"
ref="datePicker"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</div>
</el-dropdown>
</div>
</div>
<div class="table-item">
<el-table
:data="tableData"
border
height="430"
fit
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column label="地区">
<template slot-scope="scope">{{ scope.row.type === '全国'? '未公示地区': scope.row.type}}</template>
</el-table-column>
<el-table-column prop="count" sortable label="招标数量" align="right"/>
<el-table-column prop="rate" sortable label="占比（%）" align="right"/>
</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">通过对{{year}}全国招标数据进行分析，发现主要集中在{{dataSort[0].label}}（{{dataSort[0].count}}个）、{{dataSort[1].label}}（{{dataSort[1].count}}个）进行招标。</div>
<div class="main1">
<div id="gl-echarts" style="height: 250px"></div>
<p class="tips"><i class="el-icon-info"></i>数据来源大司空建筑大数据平台，统计范围为{{year}}年全国公开的招标项目，未公开的不含在内</p>
</div>
<div class="main2">
<div class="selectYear">
<el-select v-model="year" filterable class="form-content-width" placeholder="请选择" @change="changeValue()">
<el-option v-for="(item, index) in yearData" :key="index" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="table-item">
<el-table
:data="dataList"
border
height="430"
fit
highlight-current-row
>
<el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="label" label="月份"/>
<el-table-column prop="count" sortable label="招标数量" align="right"/>
<el-table-column prop="rate" sortable label="占比（%）" align="right"/>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { countGroupByMonth,countGroupByProvince,getYear } from '@/api/macro/macro'
export default {
name: 'NationalEconomies',
data() {
return {
year:'近一年',
yearOptions: [
{ label: '近五年', value: '近五年' },
{ label: '近三年', value: '近三年' },
{ label: '近一年', value: '近一年' },
],
tableData:[
{
type:'',
count:'',
},
{
type:'',
count:'',
},
{
type:'',
count:'',
},
{
type:'',
count:'',
},
{
type:'',
count:'',
},
{
type:'',
count:'',
},
],
tableData1:[],
dataList:[],
dataSort:[
{
label:'',
count:''
},
{
label:'',
count:''
},
],
totalCount:'',
punishDateValue: "请选择",
value:'近五年',
punishDateShowPopper: false,
punishDate: "",
yearData:[
{ label: '近一年', value: '近一年' },
{ label: '近二年', value: '近二年' },
{ label: '近三年', value: '近三年' },
],
myChart:'',
myChart1:'',
}
},
created() {
this.getDataByProvince({})
let mydate=new Date();
var startTime, endTime, Year, Month, Day,startyear
Year = mydate.getFullYear();
Month = mydate.getMonth() + 1;
Day = mydate.getDate();
Month = Month < 10 ? '0' + Month : Month
Day = Day < 10 ? '0' + Day : Day
startyear=mydate.getFullYear()-1;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
let params={
startDate:startTime,
endDate:endTime
}
this.getDataByMonth(params)
this.$nextTick(()=>{
// this.initChart()
// this.initChart1()
})
window.addEventListener("resize", this.resizeEcharts);
},
beforeDestroy(){
window.removeEventListener("resize", this.resizeEcharts);
},
activated() {
this.resizeEcharts()
},
methods: {
resizeEcharts (){
const self = this
setTimeout(function(){ //图表跟随页面大小变化宽度
self.myChart.resize()
self.myChart1.resize()
}, 10)
},
getDataByProvince(params){
countGroupByProvince(params).then(res => {
this.tableData=res.data.provinceDate;
let arr=[]
for (let i=0; i<res.data.provinceDate.length; i++){
if(res.data.provinceDate[i].type != '全国'){
arr.push(res.data.provinceDate[i])
}
}
this.dataList=arr;
this.totalCount=res.data.totalCount;
this.initChart()
})
},
getDataByMonth(params){
countGroupByMonth(params).then(res => {
this.tableData1=res.data;
this.dataList=res.data;
let dataList=res.data
let dataArr = JSON.parse(JSON.stringify(dataList))
let arr = dataList.sort((a, b) => {
return b.count - a.count
})
this.dataSort=arr;
this.initChart1()
this.dataList = JSON.parse(JSON.stringify(dataArr))
})
},
initChart() {
this.myChart = echarts.init(document.getElementById("zb-echarts"))
let option = {
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '5',
right: '5',
top: '15',
bottom: '10',
containLabel: true
},
xAxis: {
type: 'category',
data: this.dataList.map(item => item.type),
axisLabel: {
show: true,
// "interval": 0,
"rotate": 40 //X轴倾斜度
},
},
yAxis: {
type: 'value',
},
series: [
{
data: this.dataList.map(item => item.count),
type: 'bar',
barWidth: 16,
itemStyle: {
normal: {
barBorderRadius: [4, 4, 0, 0],
color: '#165DFF',
label: {
show: false, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#165DFF',
fontSize: 16
}
}
},
// 移入当前的柱状图时改变颜色
emphasis: {
color: '#3384FF',
}
}
}
]
};
this.myChart.setOption(option);
},
initChart1() {
this.myChart1 = echarts.init(document.getElementById("gl-echarts"))
let dataList=this.tableData1;
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.tableData1.map(item => item.label),
axisLabel: {
show: true,
// "interval": 0,
"rotate": this.year === '近二年'|| this.year === '近三年'? 40: 0 //X轴倾斜度
},
},
yAxis: {
type: 'value'
},
series: [
{
data: this.tableData1.map(item => item.count),
type: 'bar',
barWidth: 16,
itemStyle: {
normal: {
barBorderRadius: [4, 4, 0, 0],
// color: '#2ECFCF',
color: function (params) {
var colorList = [] //定义一个存储颜色的数组
//更改前二位柱形颜色
//定义一个变量 保存柱形图数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存
let dataArr = JSON.parse(JSON.stringify(dataList))
let arr = dataList.sort((a, b) => {
return b.count - a.count
})
//将原数组数据赋值回去 保持数据不变
dataList = JSON.parse(JSON.stringify(dataArr))
//遍历数据 将原数组和排序后的数组比较
dataList.map(i => {
if (i.count == arr[0].count) {
colorList.push('#F39F35')
} else if (i.count == arr[1].count) {
colorList.push('#6675A5')
}else{
colorList.push('#2ECFCF')
}
})
//返回一个存储着颜色的数组根据数据index顺序渲染到页面
return colorList[params.dataIndex]
},
},
}
}
]
};
this.myChart1.setOption(option);
},
handleDate(command) {
if (command && command != "自定义") {
this.punishDateValue = command;
this.$refs.punishDateShowPopper.hide();
this.value = command;
let mydate=new Date();
var startTime, endTime, Year, Month, Day,startyear
Year = mydate.getFullYear();
Month = mydate.getMonth() + 1;
Day = mydate.getDate();
Month = Month < 10 ? '0' + Month : Month
Day = Day < 10 ? '0' + Day : Day
switch (command) {
case "近五年":
startyear=mydate.getFullYear()-5;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
case "近三年":
startyear=mydate.getFullYear()-3;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
case "近一年":
startyear=mydate.getFullYear()-1;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
}
let params={
startDate:startTime,
endDate:endTime
}
this.getDataByProvince(params)
} else if (command == "自定义") {
this.$refs.datePicker.pickerVisible = true;
} else {
this.$refs.punishDateShowPopper.hide();
this.punishDateValue = "";
this.punishDate = "";
}
},
changepunishDate() {
if (this.punishDate) {
this.punishDateValue = "自定义";
this.value = this.punishDate[0] +' - '+this.punishDate[1];
let params={
startDate:this.punishDate[0],
endDate:this.punishDate[1]
}
this.getDataByProvince(params)
}
},
hidePoper() {
if (this.$refs.datePicker) {
this.$refs.datePicker.pickerVisible = false;
}
},
mouseenter() {
this.punishDateShowPopper = true;
if(this.punishDateValue=='自定义'){
this.$nextTick(() => {
// this.$refs.datePicker.focus()
this.$refs.datePicker.pickerVisible = true;
});
}
},
changeValue(){
let mydate=new Date();
var startTime, endTime, Year, Month, Day,startyear
Year = mydate.getFullYear();
Month = mydate.getMonth() + 1;
Day = mydate.getDate();
Month = Month < 10 ? '0' + Month : Month
Day = Day < 10 ? '0' + Day : Day
switch (this.year) {
case "近三年":
startyear=mydate.getFullYear()-3;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
case "近二年":
startyear=mydate.getFullYear()-2;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
case "近一年":
startyear=mydate.getFullYear()-1;
startTime = startyear + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day;
break;
}
let params={
startDate:startTime,
endDate:endTime
}
this.getDataByMonth(params)
}
}
}
</script>
<style lang="scss" scoped>
.land_date_picker{
position: absolute!important;
visibility: hidden;
left: -645px;
top: 145px;
}
::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{
display: none;
}
.color_text{
background: #F3F4F5;
border-radius: 4px;
color: #0081FF;
}
.shangji{
.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;
font-size: 14px;
}
}
.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;
}
}
.el-dropdown-link{
width: 96px;
height: 32px;
display: inline-block;
line-height: 32px;
text-align: center;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #D9D9D9;
cursor: pointer;
i{
margin-left: 8px;
}
}
}
}
.table-item{
margin-top: 12px;
}
}
.content2{
.main2{
.selectYear{
height: 32px;
float: right;
margin-bottom:16px;
}
::v-deep .el-select{
width: 100px;
height: 32px;
.el-input{
width: 100%;
height: 32px;
}
.el-input__inner{
height: 32px !important;
line-height: 32px;
}
}
margin-top: 32px;
}
}
.table-item{
::v-deep .el-table{
.el-table__header-wrapper{
th{
padding: 0;
}
}
.el-table__cell.is-right{
text-align: right;
}
.has-gutter{
tr{
th:nth-child(4){
border-right:0;
.cell{
padding-right: 24px !important;
}
}
}
}
.el-table__cell.gutter{
background: #F0F3FA;
width: 16px !important;
}
.el-table__row{
td:last-child{
.cell{
padding-right: 24px !important;
}
}
}
th{
font-size: 12px !important;
font-weight: 400 !important;
}
.el-table__fixed-header-wrapper th{
background: #F0F3FA;
}
td.el-table__cell{
border-bottom: 0;
}
.caret-wrapper{
width: 10px;
}
}
}
::v-deep .el-input--medium{
.el-input__icon{
line-height: 32px;
}
}
}
</style>
dsk-operate-ui/src/views/macro/nationalEconomies/index.vue
View file @ 04e53923
......@@ -28,7 +28,7 @@ export default {
},
data() {
return {
activeName: 'second'
activeName: 'first'
}
},
created() {
......
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