Commit 6ea9d19a authored by danfuman's avatar danfuman

修改

parent f55ed098
......@@ -100,7 +100,16 @@ export function countNewsBidByMonth(param) {
data: param
})
}
//全国商机项目分析-全国土地交易项目年份统计
//全国中标市场分析-全国中标项目统计
export function countBidByType(param) {
return request({
url: '/marketAnalysis/countBidByType',
method: 'POST',
data: param
})
}
//全国中标市场分析-全国各地区中标统计TOP10
export function countBidGroupByProvince(param) {
return request({
url: '/marketAnalysis/countBidGroupByProvince',
......@@ -108,6 +117,37 @@ export function countBidGroupByProvince(param) {
data: param
})
}
//全国中标市场分析-全国中标金额分析
export function rangeBidMoney(param) {
return request({
url: '/marketAnalysis/rangeBidMoney',
method: 'POST',
data: param
})
}
//全国中标市场分析-全国中标趋势分析
export function rangeBidFiveYears() {
return request({
url: '/marketAnalysis/rangeBidFiveYears',
method: 'POST',
})
}
//全国中标市场分析-全国中标下浮率分析
export function lowerRateByYear(param) {
return request({
url: '/marketAnalysis/lowerRateByYear',
method: 'POST',
data: param
})
}
//全国中标市场分析-全国中标业绩项目类型下浮率
export function lowerRangeTenderType(param) {
return request({
url: '/marketAnalysis/lowerRangeTenderType',
method: 'POST',
data: param
})
}
......
......@@ -36,7 +36,7 @@
</el-table-column>
<el-table-column prop="gdp" label="GDP(亿元)" sortable width="120" :formatter="formatStatus"/>
<el-table-column prop="gdpGrowth" label="GDP增速(%)" sortable width="100" :formatter="formatStatus"/>
<el-table-column prop="gdpGrowth" label="GDP增速(%)" sortable width="120" :formatter="formatStatus"/>
<el-table-column prop="gdpPerCapita" label="人均GDP(元)" sortable width="130" :formatter="formatStatus"/>
<el-table-column prop="population" label="人口(万人)" sortable width="120" :formatter="formatStatus"/>
<el-table-column prop="fixedInvestment" label="固定资产投资 (亿元) " sortable width="200" :formatter="formatStatus"/>
......@@ -100,7 +100,6 @@ export default {
},
methods: {
getData(){
this.isSkeleton = true
const params = { pageNum: this.pageIndex, pageSize: this.pageSize, year: this.queryParams.year,type:2 }
if(this.queryParams.field){
params.field=this.queryParams.field
......@@ -118,6 +117,7 @@ export default {
params.areaId=[this.provinceId[2]]
}
// params.provinceIds=[this.dataQuery.provinceId]
// this.isSkeleton = true
nationalPage(params).then(res => {
this.isSkeleton = false
this.tableData = res.data.list
......
......@@ -220,7 +220,7 @@
},
// 查询提交
async querySubmit() {
this.isSkeleton = true
// this.isSkeleton = true
const params = { pageNum: this.pageIndex, pageSize: this.pageSize, year: this.queryParams.year,type:1 }
if(this.queryParams.address){
let arr = this.$refs.address.getCheckedNodes();
......
<template>
<div>
<div class="zhongbiao">
<p class="text_p">注:数据来源大司空建筑大数据平台,统计范围为全国公开的中标项目,未公开的不含在内</p>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div v-if="!isSkeleton" 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 v-if="!isSkeleton" 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 class="text">截止{{currentdate}},全国共有{{glDetail.major}}资质的企业{{total}}家,其中特级资质企业{{glDetail.tjCount}}家,占比{{glDetail.tjRate}}%;一级资质企业{{glDetail.tjCount}}家,占比{{glDetail.oneRate}}%;二级资质企业{{glDetail.twoCount}}家,占比{{glDetail.twoRate}}%;三级资质企业{{glDetail.threeCount}}家,占比{{glDetail.threeRate}}%</div>
<div class="main1">
<div style="height: 300px;">
<div class="left">
<div class="item" v-for="(item,index) in glData" :class="typeIndex === index ? 'color':''" @click="handleClick(1,index)">{{item.major}}施工总承包<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="content_box" v-if="gyflState">
<div class="box-left">
<div id="echarts1" style="height: 280px"></div>
</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="60" align="left">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="major" label="资质类型"/>
<el-table-column label="特级" align="right">
<el-table-column prop="tjCount" label="数量(个)" align="right"/>
<el-table-column prop="tjRate" label="占比(%)" align="right"/>
</el-table-column>
<el-table-column label="一级" align="right">
<el-table-column prop="oneCount" label="数量(个)" align="right"/>
<el-table-column prop="oneRate" label="占比(%)" align="right"/>
</el-table-column>
<el-table-column label="二级" align="right">
<el-table-column prop="twoCount" label="数量(个)" align="right"/>
<el-table-column prop="twoRate" label="占比(%)" align="right"/>
</el-table-column>
<el-table-column label="三级" align="right">
<el-table-column prop="threeCount" label="数量(个)" align="right"/>
<el-table-column prop="threeRate" label="占比(%)" align="right"/>
</el-table-column>
</el-table>
</div>
<div class="box-right">
<el-table
:data="xmtjList"
element-loading-text="Loading"
border
show-summary
max-height="300"
: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="项目类型" :formatter="formatStatus" width="100"/>
<el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable width="130"/>
<el-table-column prop="countRate" label="数量占比(%)" align="right" :formatter="formatStatus" sortable width="140"/>
<el-table-column prop="money" label="中标总金额 (万元)" align="right" :formatter="formatStatus" width="150"/>
<el-table-column prop="moneyRate" label="金额占比(%)" align="right" :formatter="formatStatus" width="120"/>
</el-table>
</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 class="empty" v-if="!gyflState">
<img class="img" src="@/assets/images/project/empty.png">
<div class="p1">抱歉,暂无数据展示</div>
</div>
</div>
<div v-if="!isSkeleton" class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国各地区中标统计TOP10</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 class="main1">
<div class="tabs">
<div class="item" v-for="(item,index) in dqData" :class="qydqIndex === index ? 'color':''" @click="handleClick(2,index)">{{item.major}}<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="content_box" v-if="tdytState">
<div class="box-left">
<div id="echarts2" style="height: 280px"></div>
</div>
<div class="table-item">
<div class="box-right">
<el-table
:data="jzdqData"
:data="topList"
element-loading-text="Loading"
border
height="470"
show-summary
max-height="300"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60" align="left">
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="province" label="地区"/>
<el-table-column label="特级" align="right">
<el-table-column prop="tjCount" label="数量(个)" align="right"/>
<el-table-column prop="tjRate" label="占比(%)" align="right"/>
</el-table-column>
<el-table-column label="一级" align="right">
<el-table-column prop="oneCount" label="数量(个)" align="right"/>
<el-table-column prop="oneRate" label="占比(%)" align="right"/>
<el-table-column prop="province" label="地区" :formatter="formatStatus" width="100"/>
<el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable width="130"/>
<el-table-column prop="countRate" label="数量占比(%)" align="right" :formatter="formatStatus" width="120"/>
<el-table-column prop="sumMoney" label="中标总金额 (万元)" align="right" :formatter="formatStatus" width="140"/>
<el-table-column prop="moneyRate" label="金额占比(%)" align="right" :formatter="formatStatus" width="120"/>
</el-table>
</div>
</div>
<div class="empty" v-if="!tdytState">
<img class="img" src="@/assets/images/project/empty.png">
<div class="p1">抱歉,暂无数据展示</div>
</div>
</div>
<div v-if="!isSkeleton" 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(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 class="content_box" v-if="tdytState">
<div class="box-left">
<div id="echarts3" style="height: 280px"></div>
</div>
<div class="box-right">
<el-table
:data="zbjeList"
element-loading-text="Loading"
border
show-summary
max-height="285"
: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 label="二级" align="right">
<el-table-column prop="twoCount" label="数量(个)" align="right"/>
<el-table-column prop="twoRate" label="占比(%)" align="right"/>
<el-table-column prop="rangeName" label="中标金额" :formatter="formatStatus"/>
<el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable/>
<el-table-column prop="rate" label="占比(%)" align="right" :formatter="formatStatus" width="100"/>
</el-table>
</div>
</div>
<div class="empty" v-if="!tdytState">
<img class="img" src="@/assets/images/project/empty.png">
<div class="p1">抱歉,暂无数据展示</div>
</div>
</div>
<div v-if="!isSkeleton" class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国中标趋势分析</span>
</div>
</div>
<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="zbqsList"
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 label="三级" align="right">
<el-table-column prop="threeCount" label="数量(个)" align="right"/>
<el-table-column prop="threeRate" label="占比(%)" align="right"/>
<el-table-column prop="year" label="年份" :formatter="formatStatus" width="100"/>
<el-table-column prop="count" label="中标数量 (个)" align="right" :formatter="formatStatus" sortable/>
<el-table-column prop="sumMoney" label="中标总金额(万元)" align="right" :formatter="formatStatus"/>
</el-table>
</div>
</div>
</div>
<div v-if="!isSkeleton" class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国中标下浮率分析</span>
<el-select v-model="years3" @change="handleYears(5)" 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" v-if="tdytState">
<div class="box-left">
<div id="echarts5" style="height: 280px"></div>
</div>
<div class="box-right">
<el-table
:data="xflList"
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="label" label="时间" :formatter="formatStatus" width="130"/>
<el-table-column prop="rate" label="下浮率(%)" align="right" :formatter="formatStatus" sortable/>
<el-table-column prop="count" label="统计项目数量 (个)" align="right" :formatter="formatStatus"/>
</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 class="empty" v-if="!tdytState">
<img class="img" src="@/assets/images/project/empty.png">
<div class="p1">抱歉,暂无数据展示</div>
</div>
</div>
<div v-if="!isSkeleton" class="td_content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">全国中标业绩项目类型下浮率</span>
<el-select @change="handleYears(6)" style="margin-right: 8px" v-model="address" 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="years4" @change="handleYears(6)" 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 class="text">
通过对全国建筑工程总承包一级及以上资质企业的备案数据分析,我们发现这些优质企业主要去了<span v-for="(item,index) in rankList">{{item.province}}{{ rankList.length === index+1 ? '':'、'}}</span>等地开展经营。</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="content_box" v-if="topList.length > 0 && !isSkeleton">
<div class="box-left" style="width: 60%;">
<div id="echarts6" style="height: 300px"></div>
</div>
<div class="table-item">
<div class="box-right">
<el-table
:data="zbData"
:data="xmxflList"
element-loading-text="Loading"
border
height="430"
show-summary
max-height="280"
:summary-method="getSummaries"
fit
highlight-current-row
:default-sort = "{prop: 'count', order: 'descending'}"
>
<el-table-column label="序号" width="60" align="left">
<el-table-column label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="province" label="地区" />
<el-table-column prop="count" label="企业异地备案数量(个)" sortable align="right"/>
<!--<el-table-column prop="zb" label="占比"/>-->
<el-table-column prop="month" label="时间" :formatter="formatStatus" width="120"/>
<el-table-column prop="sgRate" label="施工类项目下浮率(%)" align="right" :formatter="formatStatus" width="170"/>
<el-table-column prop="kcsjRate" label="勘察设计类项目下浮率(%)" align="right" :formatter="formatStatus" width="200"/>
<el-table-column prop="jlRate" label="监理类项目下浮率(%)" align="right" :formatter="formatStatus" width="170"/>
</el-table>
</div>
</div>
<div class="empty" v-if="topList.length === 0 && !isSkeleton">
<img class="img" src="@/assets/images/project/empty.png">
<div class="p1">抱歉,暂无数据展示</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { certGroupByMajorAndLevel,certGroupByMajorProvinceLevel,areaGroupByProvince } from '@/api/macro/macro'
import dataRegion from '@/assets/json/dataRegion'
import { countBidByType,countBidGroupByProvince,rangeBidMoney,rangeBidFiveYears,lowerRateByYear,lowerRangeTenderType } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
export default {
name: 'NationalEconomies',
components: {
skeleton
},
data() {
return {
typeIndex:0,
glData:[],
jzglData:[],
zzTableData:[],
tableOption:[
{
label:'资质类型',
prop:'major'
},
{
label: '特级',
prop: 'levelValue',
child:[
{
label: '数量(个)',
prop: 'count'
},
{
label: '占比(%)',
prop: 'rate'
},
]
},
{
label: '一级',
prop: 'levelValue',
child:[
{
label: '数量(个)',
prop: 'count'
},
{
label: '占比(%)',
prop: 'rate'
},
]
},
{
label: '二级',
prop: 'levelValue',
child:[
{
label: '数量(个)',
prop: 'count'
},
{
label: '占比(%)',
prop: 'rate'
},
]
},
{
label: '三级',
prop: 'levelValue',
child:[
{
label: '数量(个)',
prop: 'count'
},
{
label: '占比(%)',
prop: 'rate'
},
]
},
],
dqData:[],
qydqIndex:0,
zbData:[],
rankList:[],
jzdqData:[],
currentdate:'',
total:'',
glDetail:{},
isSkeleton:true,
}
},
created() {
setTimeout(() => {
this.isSkeleton=false;
this.getData()
}, 1000);
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()+ 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
this.currentdate=year + '-' +month + '-' + day;
},
methods: {
getData(){
//全国建筑企业概览
certGroupByMajorAndLevel().then(res => {
let list=[];
for (let i=0; i<res.data.length; i++){
res.data[i].levelList=res.data[i].levelList.reverse();
let item={};
item.major=res.data[i].major+'施工总承包';
for (let j=0; j<res.data[i].levelList.length; j++){
if(res.data[i].levelList[j].levelValue === '特级'){
item.tjCount=res.data[i].levelList[j].count;
item.tjRate=res.data[i].levelList[j].rate;
}
if(res.data[i].levelList[j].levelValue === '一级'){
item.oneCount=res.data[i].levelList[j].count;
item.oneRate=res.data[i].levelList[j].rate;
}
if(res.data[i].levelList[j].levelValue === '二级'){
item.twoCount=res.data[i].levelList[j].count;
item.twoRate=res.data[i].levelList[j].rate;
}
if(res.data[i].levelList[j].levelValue === '三级'){
item.threeCount=res.data[i].levelList[j].count;
item.threeRate=res.data[i].levelList[j].rate;
}
export default {
name: 'NationalEconomies',
components: {
skeleton
},
data() {
return {
addressList:[],
address:'',
years:[2023],
years1:[2023],
years2:[2023],
years3:2023,
years4:2023,
yearOptions:[],
xmtjList:[],
topList:[],
zbjeList:[],
zbqsList:[],
xflList :[],
xmxflList :[],
isSkeleton:true,
gyflState:true,
tdytState:true,
topState:true,
}
},
created() {
this.dataRegion()
this.yearsData()
setTimeout(() => {
this.getCountBidByType()
this.getCountBidGroupByProvince()
this.getRangeBidMoney()
this.getRangeBidFiveYears()
this.getLowerRateByYear()
this.getLowerRangeTenderType()
// this.getCountLandMarketByType()
// this.getCountLandMarketByTypeTd()
// this.getCountLandMarketByProvince()
// this.getCountLandMarketByYear()
this.isSkeleton=false;
}, 1500);
},
mounted() {
},
beforeDestroy(){
},
methods: {
getCountBidByType(){
let params={
yearStr:this.years.join(",")
}
countBidByType(params).then(res => {
this.xmtjList=res.data.date;
if(res.data){
this.$nextTick(() => {
this.initChart1(res.data.date)
})
}
// item.levelList=res.data[i].levelList.reverse();
list.push(item)
})
},
getCountBidGroupByProvince(){
let params={
yearStr:this.years1.join(",")
}
this.zzTableData=list;
this.glData=res.data;
this.jzglData=this.glData[0].levelList;
this.glDetail=list[0]
let total=0;
for(let i=0; i<this.jzglData.length; i++){
total=total+this.jzglData[i].count
countBidGroupByProvince(params).then(res => {
this.topList=res.data;
if(res.data){
this.$nextTick(() => {
this.initChart2(res.data)
})
}
})
},
getRangeBidMoney(){
let params={
yearStr:this.years2.join(",")
}
this.total=total;
this.initChart()
})
certGroupByMajorProvinceLevel().then(res => {
this.dqData=res.data;
let data=this.dqData[0].province;
let list=[];
for(let i=0; i<data.length; i++){
let item={};
item.province=data[i].province;
for (let j=0; j<data[i].levelList.length; j++){
if(data[i].levelList[j].levelValue === '特级'){
item.tjCount=data[i].levelList[j].count;
item.tjRate=data[i].levelList[j].rate;
}
if(data[i].levelList[j].levelValue === '一级'){
item.oneCount=data[i].levelList[j].count;
item.oneRate=data[i].levelList[j].rate;
}
if(data[i].levelList[j].levelValue === '二级'){
item.twoCount=data[i].levelList[j].count;
item.twoRate=data[i].levelList[j].rate;
}
if(data[i].levelList[j].levelValue === '三级'){
item.threeCount=data[i].levelList[j].count;
item.threeRate=data[i].levelList[j].rate;
}
rangeBidMoney(params).then(res => {
this.zbjeList=res.data;
var list=[];
for(var i=0;i<res.data.length;i++){
var obj={};
obj.name=res.data[i].rangeName;
obj.value=res.data[i].count;
obj.rate=res.data[i].rate;
list.push(obj)
}
if(res.data){
this.$nextTick(() => {
this.initChart3(list)
})
}
list.push(item)
})
},
getRangeBidFiveYears(){
rangeBidFiveYears().then(res => {
this.zbqsList=res.data;
if(res.data){
this.$nextTick(() => {
this.initChart4(res.data)
})
}
})
},
getLowerRateByYear(){
let params={
yearStr:this.years3
}
this.jzdqData=list
this.initChart1()
})
areaGroupByProvince().then(res => {
this.zbData=res.data;
//定义一个变量 保存数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存
// let dataArr = JSON.parse(JSON.stringify(res.data))
let arr=res.data.sort((old,New)=>{
return New.count - old.count
lowerRateByYear(params).then(res => {
for (var i=0; i<res.data.length; i++){
res.data[i].rate=res.data[i].rate.toFixed(2)
}
this.xflList=res.data;
if(res.data){
this.$nextTick(() => {
this.initChart5(res.data)
})
}
})
let data=[]
for(let i=0; i<5; i++){
data.push(arr[i])
},
getLowerRangeTenderType(){
let params={
yearStr:this.years4,
}
this.rankList=data;
//将原数组数据赋值回去 保持数据不变
// this.zbData = JSON.parse(JSON.stringify(dataArr))
this.initChart2()
})
},
initChart() {
let myChart = echarts.init(document.getElementById("gl-echarts"))
let option ={
tooltip: {
// show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.jzglData.map(item => item.levelValue),
},
yAxis: {
type: 'value',
},
grid: {
top:40,
left:70,
right:40,
bottom:40,
},
series: [
{
data: this.jzglData.map(item => item.count),
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
if(this.address){
params.provinceId=this.address
}
lowerRangeTenderType(params).then(res => {
for (var i=0; i<res.data.length; i++){
for (let j=0; j<res.data[i].typeList.length; j++){
if(res.data[i].typeList[j].tenderType === '施工'){
res.data[i].sgRate=res.data[i].typeList[j].rate.toFixed(2)
}
if(res.data[i].typeList[j].tenderType === '勘察设计'){
res.data[i].kcsjRate=res.data[i].typeList[j].rate.toFixed(2)
}
if(res.data[i].typeList[j].tenderType === '监理'){
res.data[i].jlRate=res.data[i].typeList[j].rate.toFixed(2)
}
}
}
this.xmxflList=res.data;
if(res.data){
this.$nextTick(() => {
this.initChart6(this.xmxflList)
})
}
})
},
initChart1(data) {
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1"))
let list1=[],list2=[]
for(var i=0; i<data.length; i++) {
list1.push(data[i].count)
list2.push(data[i].money)
}
let option ={
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),
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#0081FF",
yAxis: {
type: 'value',
},
itemStyle:{
color: "#4E8EFF",
grid: {
top:30,
left:100,
right:30,
bottom:30,
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#DFEAFF",
color:['#ADC0FF', '#E9C8FF'],
series: [
{
name:'中标数量(个)',
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
borderWidth: 4,
lineStyle: { width: 2 }
}
},
{
offset: 1,
color: "#5895FF",
data:list1,
},
{
name:'中标总金额(万元)',
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
borderWidth: 4,
lineStyle: { width: 2 }
}
},
]),
},
data:list2,
}
]
}
]
}
myChart.clear(); //图表清除
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
initChart1() {
let myChart = echarts.init(document.getElementById("jzqy-echarts"))
let option ={
legend: {
x:'right',
padding:[0,30,0,0],
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#FFFFFF'
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', '#67B3FD', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#FFE48A'];
let typeNameList=data[0].projectType.map(item => item.type);
let item={}
for(var i=0; i<data.length; i++){
for(var j=0; j<data[i].projectType.length; j++){
item[typeNameList[j]] = [];
}
}
for(var i=0; i<data.length; i++) {
for (var j = 0; j < data[i].projectType.length; j++) {
if(data[i].projectType[j].type === typeNameList[0]){
item[typeNameList[0]].push(data[i].projectType[j].count)
}
if(data[i].projectType[j].type === typeNameList[1]){
item[typeNameList[1]].push(data[i].projectType[j].count)
}
if(data[i].projectType[j].type === typeNameList[2]){
item[typeNameList[2]].push(data[i].projectType[j].count)
}
if(data[i].projectType[j].type === typeNameList[3]){
item[typeNameList[3]].push(data[i].projectType[j].count)
}
if(data[i].projectType[j].type === typeNameList[4]){
item[typeNameList[4]].push(data[i].projectType[j].count)
}
if(data[i].projectType[j].type === typeNameList[5]){
item[typeNameList[5]].push(data[i].projectType[j].count)
}
if(data[i].projectType[j].type === typeNameList[6]){
item[typeNameList[6]].push(data[i].projectType[j].count)
}
if(data[i].projectType[j].type === typeNameList[7]){
item[typeNameList[7]].push(data[i].projectType[j].count)
}
if(data[i].projectType[j].type === typeNameList[8]){
item[typeNameList[8]].push(data[i].projectType[j].count)
}
if(data[i].projectType[j].type === typeNameList[9]){
item[typeNameList[9]].push(data[i].projectType[j].count)
}
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.jzdqData.map(item => item.province),
},
yAxis: {
type: 'value',
},
grid: {
top:35,
left:60,
right:30,
bottom:20,
},
series: [
{
data: this.jzdqData.map(item => item.tjCount),
name:'特级',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
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'
}
}
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#0081FF",
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
interval: 0
},
data: data.map(item => item.province),
},
itemStyle:{
color: "#4E8EFF",
yAxis: {
type: 'value',
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#DFEAFF",
},
{
offset: 1,
color: "#5895FF",
},
]),
grid: {
top:30,
left:50,
right:20,
bottom:30,
},
},
{
data: this.jzdqData.map(item => item.oneCount),
name:'一级',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD'],
series: seriesData
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart3(data) {
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts3"))
let option ={
tooltip: {
trigger: 'item',
borderWidth:0,
backgroundColor:"rgba(255, 255, 255, 0.8)",
formatter: function (params) {
var result = ''
result+='<h3 style="color: #232226;padding: 0 0 5px 0;margin: 0;">'+ params.data.name +'</h3>'
result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个 </p>'
return result;
},
extraCssText:'width:150px!important;',
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#FA6C6C",
legend: {
type: 'scroll',
orient: 'horizontal',
bottom: 0,
data: data,
itemHeight:8,
itemWidth:12,
pageButtonPosition: 'end',
},
itemStyle:{
color: "#FA6C6C",
color:['#8A82F3', '#5B9CF7', '#43BBE0','#8ECF95','#FFDC6B','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart4(data) {
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts4"))
let option ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: { //坐标轴刻度标签的相关设置
margin: 15, //刻度标签与轴线之间的距离
color:"#666666"
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data.map(item => item.year),
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.1,
color: "#FDF8F5",
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
{
offset: 1,
color: "#FCD7C8",
name: '单位:个',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, -60], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
]),
},
},
{
data: this.jzdqData.map(item => item.twoCount),
name:'二级',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#8077F2",
},
itemStyle:{
color: "#8077F2",
name: '单位:万元',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, 72], // 四个数字分别为上右下左与原位置距离
color: '#666666',
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#FFFFFF']
}
}
}
],
grid: {
top:30,
left:80,
right:90,
bottom:30,
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.1,
color: "#ECE8FF",
series: [
{
name:'中标金额(万元)',
smooth: false, //平滑
type:"line",
symbolSize: 6,
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '万元'
}
},
{
offset: 1,
color: "#BCC0FF",
itemStyle: {
color: '#14C9C9'
},
]),
},
},
{
data: this.jzdqData.map(item => item.threeCount),
name:'三级',
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
data:data.map(item => item.sumMoney),
},
{
name:'中标总数(个)',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value + '个';
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#56A5FF'
}, {
offset: 1,
color: '#1B8EFF'
}])
}
},
data:data.map(item => item.count),
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart5(data) {
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts5"))
let option ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
//设置折线颜色和粗细
lineStyle: {
width: 2,
color: "#FA936C",
xAxis: {
type: 'category',
axisLabel: { //坐标轴刻度标签的相关设置
margin: 15, //刻度标签与轴线之间的距离
color:"#666666"
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data.map(item => item.label),
},
itemStyle:{
color: "#FA936C",
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位:个',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, -60], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位:%',
nameLocation: 'start',
nameTextStyle: {
padding: [0, 0, 0, 72], // 四个数字分别为上右下左与原位置距离
color: '#666666',
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['#FFFFFF']
}
}
}
],
grid: {
top:30,
left:80,
right:90,
bottom:30,
},
//设置面积区域为渐变效果
areaStyle: {
opacity:0.8,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.1,
color: "#FEFBFA",
series: [
{
name:'下浮率',
smooth: false, //平滑
type:"line",
symbolSize: 6,
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '%'
}
},
itemStyle: {
color: '#14C9C9'
},
{
offset: 1,
color: "#FCD7C8",
data:data.map(item => item.rate),
},
{
name:'统计项目数量',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value + '个';
}
},
]),
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#56A5FF'
}, {
offset: 1,
color: '#1B8EFF'
}])
}
},
data:data.map(item => item.count),
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
})
},
initChart6(data) {
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts6"))
// let list1=[],list2=[]
// for(var i=0; i<data.length; i++) {
// list1.push(data[i].count)
// list2.push(data[i].money)
// }
let option ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#FFFFFF'
}
}
},
},
]
}
myChart.clear();
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
initChart2() {
let myChart = echarts.init(document.getElementById("ba-echarts"))
let option ={
tooltip: {
// show:false
},
legend:{},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.zbData.map(item => item.province),
},
yAxis: {
type: 'value',
},
grid: {
top:20,
left:65,
right:50,
bottom:20,
},
series: [
{
data: this.zbData.map(item => item.count),
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
interval: 0,
},
data: data.map(item => item.month),
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#FFAB44",
yAxis: {
type: 'value',
},
itemStyle:{
color: "#FFAB44",
grid: {
top:30,
left:50,
right:50,
bottom:30,
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FFEDD0",
color:['#D0FAB7', '#E9C8FF', '#81D5BC'],
series: [
{
name:'勘察项目下浮率',
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
borderWidth: 4,
lineStyle: { width: 2 }
}
},
{
offset: 1,
color: "#FFC671",
data:data.map(item => item.kcsjRate),
},
{
name:'施工类项目下浮率',
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
borderWidth: 4,
lineStyle: { width: 2 }
}
},
]),
},
data:data.map(item => item.sgRate),
},
{
name:'监理类项目下浮率',
smooth: false, //平滑
type:"line",
symbolSize: 6, //折线拐点大小
itemStyle: {
normal: {
borderWidth: 4,
lineStyle: { width: 2 }
}
},
data:data.map(item => item.jlRate),
},
]
}
]
}
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
});
},
handleClick(type,index){
if(type === 1){
this.typeIndex=index;
this.jzglData=this.glData[index].levelList;
let total=0
for(let i=0; i<this.jzglData.length; i++){
total=total+this.jzglData[i].count
}
this.total=total;
this.glDetail=this.zzTableData[index]
this.initChart()
}
if(type === 2){
this.qydqIndex=index;
let data=this.dqData[index].province;
let list=[];
for(let i=0; i<data.length; i++){
let item={};
item.province=data[i].province;
for (let j=0; j<data[i].levelList.length; j++){
if(data[i].levelList[j].levelValue === '特级'){
item.tjCount=data[i].levelList[j].count;
item.tjRate=data[i].levelList[j].rate;
}
if(data[i].levelList[j].levelValue === '一级'){
item.oneCount=data[i].levelList[j].count;
item.oneRate=data[i].levelList[j].rate;
}
if(data[i].levelList[j].levelValue === '二级'){
item.twoCount=data[i].levelList[j].count;
item.twoRate=data[i].levelList[j].rate;
}
if(data[i].levelList[j].levelValue === '三级'){
item.threeCount=data[i].levelList[j].count;
item.threeRate=data[i].levelList[j].rate;
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": []
});
}
}
list.push(item)
}
this.jzdqData=list;
this.$nextTick(()=>{
this.initChart1()
})
this.addressList = str;
},
handleYears(key){
switch (key) {
case 1:
this.getCountLandMarketByType()
break;
case 2:
this.getCountLandMarketByTypeTd()
break;
case 3:
this.getCountLandMarketByProvince()
break;
}
},
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.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 || index === 3 || index === 5) {
sums[index] = '-';
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 === 4) {
sums[index] = Number(sums[index]).toFixed(2);
return;
}
});
return sums;
},
}
}
}
</script>
<style lang="scss" scoped>
.zhongbiao{
.zb-content{
padding-top: 16px;
.text_p{
color: #999999;
font-size: 14px;
margin: 0;
}
.empty{
margin: 0 auto;
height: 300px;
text-align: center;
.img{
width: 108px;
height: 108px;
margin-bottom: 24px;
margin-top: 70px;
}
.p1{
color: #333333;
font-size: 16px;
}
}
.query-params{
.common-title{
margin-right: 24px;
}
::v-deep .form-content-width{
width: 150px;
.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;
}
.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;
padding: 16px 52px 16px 16px;
}
.tips{
margin: 0;
padding-top: 16px;
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: 60%;
}
}
.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{
.box-right{
width: 33%;
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;
color:#0081FF;
i{
width: 4px;
height: 29px;
background: #0081FF;
border-radius: 10px;
display: inline-block;
float: right;
margin-top: 22px;
th{
background: #F0F3FA;
/*text-align: left;*/
}
}
}
.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-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;
}
.el-input__inner{
height: 32px !important;
line-height: 32px;
}
td.el-table__cell{
border-bottom: 0;
}
tr{
&.current-row>td{
background-color: initial;
}
&:nth-child(2n) {
background: #F8FBFF;
}
}
}
}
.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);
.el-table__cell{
height: 40px;
padding: 0;
line-height: 40px;
}
.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;
}
}
}
}
.table-item{
margin-top: 32px;
}
}
.content3{
.table-item{
margin-top: 32px;
}
.table-item {
::v-deep .el-table {
.has-gutter{
tr{
th:nth-child(3){
th:nth-child(4){
border-right:0;
}
td:nth-child(4){
border-right:0;
.cell{
padding-right: 24px !important;
}
}
}
}
}
}
}
.table-item{
::v-deep .el-table{
.el-table__header-wrapper{
th{
padding: 0;
.el-table__cell.gutter{
background: #F0F3FA;
}
}
.el-table__cell.is-right{
text-align: right;
}
.has-gutter{
tr{
th:nth-child(6),th:nth-child(8){
border-right:0;
.el-table__row{
td:last-child{
.cell{
padding-right: 24px !important;
padding-right: 12px !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;
}
}
}
......
......@@ -4,14 +4,14 @@
<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-tab-pane label="全国中标市场分析" name="fourth"></el-tab-pane>
<el-tab-pane label="全国中标市场分析" name="third"></el-tab-pane>
<el-tab-pane label="全国建筑企业分析" name="fourth"></el-tab-pane>
</el-tabs>
</div>
<Economic v-if="activeName === 'first'"></Economic>
<Sjxmfx v-if="activeName === 'second'"></Sjxmfx>
<!--<Zhongbiao v-if="activeName === 'third'"></Zhongbiao>-->
<Zhongbiao v-if="activeName === 'third'"></Zhongbiao>
<Jzqyfx v-if="activeName === 'fourth'"></Jzqyfx>
</div>
</template>
......@@ -28,7 +28,7 @@ export default {
},
data() {
return {
activeName: 'first'
activeName: 'third'
}
},
created() {
......
......@@ -130,9 +130,9 @@
state:2,
}
getGZDB(params).then(result=>{
this.datalist = result.code == 200?result:[]
if(this.datalist){
this.yqnum = `已逾期 ${this.datalist.rows.length} 条`;
let datalist = result.code == 200?result:[]
if(datalist){
this.yqnum = `已逾期 ${datalist.rows.length} 条`;
}
})
},
......
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