Commit 9202bb0b authored by Administrator's avatar Administrator

Merge remote-tracking branch 'origin/V20230915' into V20230915

parents 81772880 9d2d49fb
::v-deep .head-form-new {
margin-bottom: 8px;
padding-bottom: 8px;
.query-box {
.from-item {
display: flex;
......@@ -25,7 +25,7 @@
}
}
.el-cascader__tags {
.el-cascader__tags,.el-select__tags {
.el-tag {
max-width: unset !important;
}
......
<template>
<div :ref="refStr" class="custom-money-select screen-popper" id="custom-money-select">
<div :ref="refStr" class="custom-money-select1 screen-popper" id="custom-money-select">
<div :class="['input-block', isSelectOption?'rote':'']">
<div class="block" @click="isSelectOption=!isSelectOption" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<el-input class="custom-money-input" v-model="value" :placeholder="placeholder" readonly>
......@@ -238,8 +238,8 @@ export default {
</script>
<style lang="scss">
.custom-money-select {
width: 120px;
.custom-money-select1 {
width: 106px;
height: 34px;
position: relative;
.rote {
......
<template>
<div :ref="refStr" class="custom-time-select screen-popper" id="custom-time-select">
<div :ref="refStr" class="custom-time-select1 screen-popper" id="custom-time-select">
<div :class="['input-block', isSelectOption?'rote':'']">
<div class="block" @click="isSelectOption=!isSelectOption" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<el-input class="custom-time-input" v-model="value" :placeholder="placeholder" readonly>
......@@ -244,8 +244,8 @@ export default {
</script>
<style lang="scss">
.custom-time-select {
width: 120px;
.custom-time-select1 {
width: 90px !important;
height: 34px;
.rote {
......
......@@ -845,6 +845,7 @@
padding-top: 16px;
width: 100%;
height: 100%;
.table_search{
::v-deep .el-form{
.el-input{
line-height: 32px;
......@@ -862,6 +863,8 @@
}
}
}
}
.box{
......
......@@ -6,6 +6,7 @@
:form-data="formData"
:query-params="queryParams"
:total="tableDataTotal"
:headerFixed="true"
:isExcel="false"
@handle-search="handleSearch"
>
......@@ -53,6 +54,7 @@
:tableLoading="tableLoading"
:tableData="tableData"
:forData="forData"
:headerFixed="true"
:tableDataTotal="tableDataTotal"
:queryParams="queryParams"
:MaxPage=500
......@@ -456,7 +458,7 @@
font-size: 14px;
font-weight: 400;
line-height: 32px;
color: #999999;
color: rgba(35,35,35,0.8);
margin-right: 8px;
text-align: center;
width: 70px;
......
......@@ -6,6 +6,7 @@
:form-data="formData"
:query-params="queryParams"
:total="tableDataTotal"
:headerFixed="true"
:isExcel="true"
@handle-search="handleSearch"
@handle-excel="clickEXCEL"
......@@ -21,6 +22,7 @@
:tableLoading="tableLoading"
:tableData="tableData"
:forData="forData"
:headerFixed="true"
:MaxPage=500
:tableDataTotal="tableDataTotal"
:queryParams="queryParams"
......
<template>
<div class="performance">
<div class="content">
<head-form
<head-form-new
ref="headForm"
title="集团施工项目最新招标"
:form-data="formData"
......@@ -9,7 +9,7 @@
@handle-search="handleSearch"
:slots="true"
:isExcel="false"
></head-form>
></head-form-new>
<span class="check" @click="check">查看集团招标<i class="el-icon-arrow-right"></i></span>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div class="table-item" v-if="!isSkeleton && tableData.length >0">
......@@ -23,7 +23,7 @@
<el-table-column label="发布日期" prop="issueTime" width="100"></el-table-column>
<el-table-column label="招标成员" prop="tenderee" min-width="220">
<template slot-scope="scope">
<router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.tendereeId)}`:`/company/${encodeStr(scope.row.tendereeId)}`" tag="a" class="a-link" v-if="scope.row.tendereeId&&scope.row.tenderee" v-html="scope.row.tenderee"></router-link>
<span @click="getUipIdByCid(scope.row.tendereeId)" style="cursor: pointer;" class="a-link" v-if="scope.row.tendereeId&&scope.row.tenderee" v-html="scope.row.tenderee"></span>
<div v-else v-html="scope.row.tenderee || '--'"></div>
</template>
</el-table-column>
......@@ -88,7 +88,7 @@
</div>
<div class="content">
<head-form
title="集团施工项目发包金额区间"
title="集团施工项目发包金额"
:form-data="[]"
:query-params="{}"
:slots="true"
......@@ -100,7 +100,7 @@
clearable
@change="changeSelect1"
class="form-content-width"
style="width: 80px">
style="width: 100px">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value"/>
</el-select>
</div>
......@@ -139,7 +139,7 @@
clearable
@change="changeSelect2"
class="form-content-width"
style="width: 80px">
style="width:100px">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value"/>
</el-select>
</div>
......@@ -153,7 +153,7 @@
<div class="table-item">
<el-table class="fixed-table" :data="lxtjList" border max-height="270">
<el-table-column label="项目类型" prop="type" min-width="70"></el-table-column>
<el-table-column label="发包数量" prop="count" width="120">
<el-table-column label="发包数量" prop="count" width="90">
<template slot-scope="scope">
{{scope.row.count}}{{scope.row.count ? '个':''}}
</template>
......@@ -189,7 +189,7 @@
clearable
@change="changeSelect3"
class="form-content-width"
style="width: 80px">
style="width: 100px">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value"/>
</el-select>
</div>
......@@ -216,14 +216,15 @@
</el-row>
</div>
<div class="content">
<head-form
<head-form-new
ref="headForm1"
title="历史发包项目金额TOP10"
:form-data="formData1"
:query-params="queryParams1"
@handle-search="handleSearch1"
:slots="true"
:isExcel="false"
></head-form>
></head-form-new>
<skeleton v-if="isSkeleton6" style="padding: 16px"></skeleton>
<div class="table-item" v-if="!isSkeleton6 && peojectTopData.length > 0">
<el-table class="fixed-table" :data="peojectTopData" border max-height="235">
......@@ -242,7 +243,7 @@
<el-table-column label="项目类型" prop="projectTypeNew" width="100"></el-table-column>
<el-table-column label="招标成员" prop="projectUnit" min-width="250">
<template slot-scope="scope">
<router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.projectUnitId)}`:`/company/${encodeStr(scope.row.projectUnitId)}`" tag="a" class="a-link" v-if="scope.row.projectUnitId&&scope.row.projectUnit" v-html="scope.row.projectUnit"></router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.projectUnitId)}`:`/company/${encodeStr(scope.row.projectUnitId)}`">
<router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.projectUnitId)}`:`/company/${encodeStr(scope.row.projectUnitId)}`" tag="a" class="a-link" v-if="scope.row.projectUnitId&&scope.row.projectUnit" v-html="scope.row.projectUnit"></router-link>
<div v-else v-html="scope.row.projectUnit || '--'"></div>
</template>
</el-table-column>
......@@ -274,6 +275,7 @@
import mixin from '../../party-a/mixins/mixin'
import {recentlyBid,bidByYear,groupByMoney,groupByType,groupByLowerRate,peojectTop} from '@/api/detail/groupAccount/groupAccount'
import { getDictType } from '@/api/main'
import { getUipIdByCid } from '@/api/macro/macro'
export default {
name: 'qualifications',
props: ['customerId'],
......@@ -288,14 +290,14 @@
combineId: this.customerId,
},
formData: [
{ type: 4, fieldName: 'type', value: '', placeholder: '项目类型', options: [],width:150, uid: this.getUid()},
{ type: 4, fieldName: 'type', value: '', placeholder: '项目类型', options: [], uid: this.getUid()},
{ type: 1, fieldName: 'cgbl', value: '', placeholder: '持股比例', options: [],width:110, uid: this.getUid()},
{ type: 1, fieldName: 'year', value: '2023年', placeholder: '年份', options: [],width:100, uid: this.getUid()},
{ type: 1, fieldName: 'year', value: '2023年', placeholder: '选择年份', options: [],width:100, uid: this.getUid()},
],
formData1: [
{ type: 4, fieldName: 'type', value: '', placeholder: '项目类型', options: [],width:150, uid: this.getUid()},
{ type: 4, fieldName: 'type', value: '', placeholder: '项目类型', options: [], uid: this.getUid()},
{ type: 1, fieldName: 'cgbl', value: '', placeholder: '持股比例', options: [],width:110, uid: this.getUid()},
{ type: 1, fieldName: 'year', value: '2023年', placeholder: '年份', options: [],width:100, uid: this.getUid()},
{ type: 1, fieldName: 'year', value: '2023年', placeholder: '选择年份', options: [],width:100, uid: this.getUid()},
],
cgblList: [
{name:'100%',value:'100%'},
......@@ -351,6 +353,21 @@
this.getPeojectTop()
},
methods: {
getUipIdByCid(companyId){
var params=[companyId]
getUipIdByCid(params).then(res=>{
if (res.code==200) {
if(res.data&&res.data.length>0&&res.data[0].uipId){
this.$router.push({path: '/enterprise/'+this.encodeStr(companyId)})
}else{
this.$router.push({path: '/company/'+this.encodeStr(companyId)})
}
}
}).catch(error=>{
});
},
yearsData(){
let mydate=new Date();
let Year = mydate.getFullYear();
......
......@@ -379,6 +379,14 @@
border-radius: 4px;
padding: 16px;
height: calc(100% - 64px);
::v-deep .el-table__header-wrapper {
position: sticky;
top: 64px !important;
z-index: 9;
}
.headForm{
margin-bottom: 14px;
.common-title{
......
<template>
<div class="head-form-new">
<div class="head-form-new" :class="headerFixed ? 'headerFixed':''">
<div class="common-title" v-if="title">{{ title }}</div>
<div class="flex-box query-box">
<div class="flex-box query-params">
......@@ -109,6 +109,10 @@ export default {
type: Number,
default: 0
},
headerFixed: {
type: Boolean,
default: false
},
isExcel: {
type: Boolean,
default: false
......@@ -280,10 +284,17 @@ export default {
::v-deep .el-popper[x-placement^="bottom"] {
margin-top: 5px;
}
.headerFixed{
position: sticky;
top: 0;
z-index: 9;
padding-top: 16px;
margin-top: -16px;
background: #fff;
}
.head-form-new {
display: flex;
flex-direction: column;
margin-bottom: 14px;
.common-title {
margin-bottom: 8px;
}
......@@ -432,7 +443,7 @@ export default {
::v-deep .el-select__tags {
.el-tag {
&:first-child {
//width: 100%;
/*width: 100%;*/
}
}
}
......
<template>
<div id="detailPart" class="sides-container" :style="sideHeight?'height:'+sideHeight+'px':''">
<div id="detailPart" class="sides-container">
<el-input placeholder="搜索" class="side-input" v-model="searchText" clearable @input="handleSearch(true)" @keyup.enter.native="handleSearch()">
<i slot="prefix" class="el-input__icon el-icon-search" @click="handleSearch()"></i>
</el-input>
......
<template>
<div class="Tables">
<div class="table-item">
<el-table v-if="tableDataTotal>0" class="fixed-table"
<el-table v-if="tableDataTotal>0" class="fixed-table" :class="headerFixed ? 'headerFixed':''"
v-loading="tableLoading"
:data="tableData"
element-loading-text="Loading"
ref="tableRef"
v-horizontal-scroll="'hover'"
border
fit
highlight-current-row
......@@ -86,6 +87,10 @@ export default {
type: Boolean,
default: true
},
headerFixed: {
type: Boolean,
default: false
},
indexFixed: {
type: Boolean,
default: false
......@@ -172,14 +177,15 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-table__body tr.current-row > td.el-table__cell{
.Tables{
::v-deep .el-table__body tr.current-row > td.el-table__cell{
background-color: #ffffff;
}
/*::v-deep .el-table__fixed{
}
/*::v-deep .el-table__fixed{
height: calc(100% - 16px) !important;
}*/
}*/
::v-deep .el-table__row{
::v-deep .el-table__row{
&:nth-child(even){
background-color: #F9FCFF;
.more{
......@@ -196,47 +202,61 @@ export default {
}
}
}
}
.table-item{
}
.table-item{
::v-deep .el-table td.el-table__cell{
border-bottom: 0;
}
}
::v-deep .el-table th.el-table__cell.is-leaf,::v-deep .el-table td.el-table__cell {
}
::v-deep .el-table th.el-table__cell.is-leaf,::v-deep .el-table td.el-table__cell {
border-bottom: 1px solid #E6EAF1;
}
::v-deep .el-table--border .el-table__cell {
}
::v-deep .el-table--border .el-table__cell {
border-right: 1px solid #E6EAF1;
}
::v-deep .el-table__body tr.hover-row.current-row>td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped>td,
::v-deep .el-table__body tr.hover-row>td{
}
::v-deep .el-table__body tr.hover-row.current-row>td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
::v-deep .el-table__body tr.hover-row.el-table__row--striped>td,
::v-deep .el-table__body tr.hover-row>td{
background-color:#DCEBFF !important;
.more{
background: #DCEBFF;
}
}
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #DCEBFF;
}
::v-deep .fixed-table{
}
::v-deep .fixed-table{
overflow: visible;
}
::v-deep .el-table__header-wrapper{
}
::v-deep .el-table__header-wrapper{
position: sticky;
top:56px;
top:0;
z-index: 9;
}
::v-deep .el-table__fixed-header-wrapper{
}
::v-deep .el-table__fixed-header-wrapper{
position: sticky;
z-index: 9;
top: 56px;
}
::v-deep .el-table__fixed{
top: 0;
}
.headerFixed{
::v-deep .el-table__header-wrapper{
position: sticky;
top:80px;
z-index: 9;
}
::v-deep .el-table__fixed-header-wrapper{
position: sticky;
z-index: 9;
top:80px;
}
}
::v-deep .el-table__fixed{
overflow-x: clip;
overflow-y: clip;
}
}
}
</style>
......@@ -383,15 +383,31 @@ export default {
}
.part-main {
margin-top: 12px;
width: 100%;
height: calc(100vh - 155px);
overflow-y: auto;
align-items: initial;
}
.part-left {
margin-right: 16px;
padding-bottom: 16px;
position: fixed;
background: #FFFFFF;
width: 144px;
}
.part-right {
min-width: 1088px;
width: 100%;
background: #ffffff;
background: #FFFFFF;
border-radius: 4px;
margin-left: 160px;
::v-deep .el-table__header-wrapper{
position: sticky;
top:0;
z-index: 9;
}
#groupBox{
height: 100%;
}
}
</style>
......@@ -69,15 +69,15 @@
</template>
</el-table-column>
<el-table-column
width="160"
width="140"
align="right"
label="合作次数">
<template slot-scope="scope">
<span style="padding-right: 86px;">{{ scope.row.count }}</span>
<span>{{ scope.row.count }}</span>
</template>
</el-table-column>
<el-table-column
width="160"
width="180"
align="right"
label="合作总金额(万元)">
<template slot-scope="scope">
......
......@@ -116,7 +116,7 @@ export default {
background: #FFFFFF;
border-radius: 4px;
.detail-tab{
margin: -34px 0 0 -16px;
margin: -14px 0 0 -16px;
::v-deep .el-tabs__nav-wrap::after{
display: none;
}
......
......@@ -327,7 +327,7 @@ export default {
.head-form-new {
.common-title {
margin-bottom: 8px;
padding-bottom: 8px;
}
.query-box {
margin: 0px;
......
......@@ -30,12 +30,12 @@
<div class="search">
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="address">
<el-select v-model="queryParams.address" @change="changeSelect1" clearable placeholder="项目地区" style="width: 120px;">
<el-select v-model="queryParams.address" :class="[`select-adaptive-${inputID1}`]" @change="iptAdaptive(inputID1,'','changeSelect1')" clearable placeholder="项目地区">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="type">
<el-select v-model="queryParams.type" @change="changeSelect1" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams.type.length > 1 ? 'selectTag' : ''" style="width: 140px;">
<el-select v-model="queryParams.type" @change="iptAdaptive(inputID2,true,'changeSelect1')" :class="[`select-adaptive-${inputID2}`,queryParams.type.length > 1 ? 'selectTag' : '']" multiple collapse-tags clearable placeholder="项目类型">
<el-option v-for="(item,index) in projectType" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
......@@ -43,9 +43,10 @@
<custom-time-select
:timeList="timeList"
v-model="queryParams.time"
:class="[`select-adaptive-${inputID3}`]"
timeValue="近七天"
placeholder="中标日期"
@handle-search="changeSelect1"/>
@handle-search="iptAdaptive(inputID3,'','changeSelect1')"/>
</el-form-item>
</el-form>
</div>
......@@ -103,16 +104,17 @@
<custom-money-select
:moneyList="moneyList"
v-model="queryParams1.money"
:class="[`select-adaptive-${inputID4}`]"
placeholder="中标金额"
@handle-search="changeSelect2" />
@handle-search="iptAdaptive(inputID4,'','changeSelect2')" />
</el-form-item>
<el-form-item prop="address">
<el-select v-model="queryParams1.address" @change="changeSelect2" clearable placeholder="项目地区" style="width: 120px;">
<el-select v-model="queryParams1.address" :class="[`select-adaptive-${inputID5}`]" @change="iptAdaptive(inputID5,true,'changeSelect2')" clearable placeholder="项目地区">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="type">
<el-select v-model="queryParams1.type" multiple collapse-tags @change="changeSelect2" clearable placeholder="项目类型" :class="queryParams1.type.length > 1 ? 'selectTag' : ''" style="width: 140px;">
<el-select v-model="queryParams1.type" multiple collapse-tags @change="iptAdaptive(inputID6,'','changeSelect2')" :class="[`select-adaptive-${inputID6}`,queryParams1.type.length > 1 ? 'selectTag' : '']" clearable placeholder="项目类型">
<el-option v-for="(item,index) in projectType" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
......@@ -120,9 +122,10 @@
<custom-time-select
:timeList="timeList"
v-model="queryParams1.time"
:class="[`select-adaptive-${inputID7}`]"
timeValue="近七天"
placeholder="中标日期"
@handle-search="changeSelect2"/>
@handle-search="iptAdaptive(inputID7,'','changeSelect2')"/>
</el-form-item>
</el-form>
</div>
......@@ -239,17 +242,18 @@
<custom-money-select
:moneyList="moneyList"
v-model="amount"
:class="[`select-adaptive-${inputID8}`]"
moneyValue="2亿以上"
:placeholder="placeholder"
@handle-search="changeSelect3" />
@handle-search="iptAdaptive(inputID8,'','changeSelect3')" />
</el-form-item>
<el-form-item prop="provinceId">
<el-select v-model="queryParams2.provinceId" @change="changeSelect3" clearable placeholder="项目地区" style="width: 120px;">
<el-select v-model="queryParams2.provinceId" :class="[`select-adaptive-${inputID9}`]" @change="iptAdaptive(inputID9,'','changeSelect3')" clearable placeholder="项目地区">
<el-option v-for="(item,index) in addressList" :key="index" :label="item.label" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="projects">
<el-select v-model="queryParams2.projects" @change="changeSelect3" multiple collapse-tags clearable placeholder="项目类型" :class="queryParams2.projects.length > 1 ? 'selectTag' : ''" style="width: 140px;">
<el-select v-model="queryParams2.projects" @change="iptAdaptive(inputID10,'','changeSelect3')" multiple collapse-tags clearable placeholder="项目类型" :class="[`select-adaptive-${inputID10}`,queryParams2.projects.length > 1 ? 'selectTag' : '']">
<el-option v-for="(item,index) in projectType" :key="index" :label="item" :value="item"></el-option>
</el-select>
</el-form-item>
......@@ -257,9 +261,10 @@
<custom-time-select
:timeList="timeList"
v-model="queryParams2.time"
:class="[`select-adaptive-${inputID11}`]"
timeValue="近七天"
:placeholder="timePlaceholder"
@handle-search="changeSelect3"/>
@handle-search="iptAdaptive(inputID11,'','changeSelect3')"/>
</el-form-item>
</el-form>
</div>
......@@ -474,6 +479,7 @@
import { countByCompany,bidRank,bigWinningBidsPage,bigBidPage,getInfo } from '@/api/index'
import { getUipIdByCid } from '@/api/macro/macro'
import api from '@/api/radar/radar.js';
import { v4 } from "uuid";
export default {
name: "Index",
components: {
......@@ -696,10 +702,22 @@ export default {
{url:'/enterpriseData/Group',name:'集团户',imgUrl:require('@/assets/images/index/icon4.png')},
{url:'/enterpriseData/Owner',name:'查城投平台',imgUrl:require('@/assets/images/index/icon5.png')},
{url:'/radar',name:'商机雷达',imgUrl:require('@/assets/images/index/icon6.png')},
]
],
inputID1:this.getUid(),
inputID2:this.getUid(),
inputID3:this.getUid(),
inputID4:this.getUid(),
inputID5:this.getUid(),
inputID6:this.getUid(),
inputID7:this.getUid(),
inputID8:this.getUid(),
inputID9:this.getUid(),
inputID10:this.getUid(),
inputID11:this.getUid(),
};
},
created() {
this.getPlaceholder();
this.searchDic()
this.getInfo()
this.dataRegion()
......@@ -1477,7 +1495,129 @@ export default {
default:
break;
}
},
handleSearch(name){
if(name === 'changeSelect1'){
this.changeSelect1()
}
if(name === 'changeSelect2'){
this.changeSelect2()
}
if(name === 'changeSelect3'){
this.changeSelect3()
}
},
async getPlaceholder() {
try {
await this.$nextTick();
const doms = document.querySelectorAll("[class*='select-adaptive-']");
if (doms?.length) {
doms.forEach(dom => {
const realStyles = window.getComputedStyle(dom);
const ipt = dom.querySelector("input");
const text = ipt.getAttribute("placeholder");
const textContainer = document.createElement("span");
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
// 加上按钮宽度 以及按钮左外边距
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
});
}
} catch (error) {
}
},
iptAdaptive(uid, multiple = false, name) {
multiple ? this.multipleAdaptiveHandle(uid,name) : this.iptAdaptiveHandle(uid,name);
},
getUid() {
return v4();
},
// 多选处理
async multipleAdaptiveHandle(uid,name) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const iptChild = dom.querySelector(".el-input__inner");
if (dom) {
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
const selectChildren = dom.querySelectorAll(".el-tag");
if (selectChildren.length) {
let width = 0;
selectChildren.forEach(item => {
const text = item.textContent;
const itemInfo = window.getComputedStyle(item);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", itemInfo.padding);
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
textContainer.remove();
});
dom.style.setProperty("width", `${width + 50}px`);
this.handleSearch(name);
return;
}
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", "0px 8px");
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 12 + 8;
// let containerWidth = 130;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
this.handleSearch(name);
}
} catch (error) {
console.log(error);
}
},
// 单选处理
async iptAdaptiveHandle(uid,name) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const realStyles = window.getComputedStyle(dom);
if (dom) {
const iptChild = dom.querySelector(".el-input__inner");
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
}
this.handleSearch(name);
} catch (error) {
}
},
}
};
</script>
......@@ -1492,6 +1632,7 @@ export default {
margin: 0;
}
.home {
@import "@/assets/styles/search-common.scss";
padding-bottom:24px;
::v-deep .el-row{
.el-col:nth-child(1){
......@@ -1505,6 +1646,16 @@ export default {
}
.manage{
::v-deep .el-form {
.el-select{
.el-select__tags {
flex-wrap: inherit;
.el-tag{
/*max-width: 130px;*/
}
}
}
}
.task-wrap{
height: 99px;
background: #FFFFFF;
......@@ -1752,6 +1903,9 @@ export default {
.el-form-item--small.el-form-item {
margin-bottom: 0;
}
.el-select{
width: 108px;
}
}
}
.list{
......@@ -1796,15 +1950,6 @@ export default {
.pagination-box{
padding: 16px;
}
::v-deep .selectTag{
.el-select__tags{
.el-tag{
&:first-child{
width: 65px;
}
}
}
}
}
.empty{
margin: 0 auto;
......
......@@ -253,9 +253,8 @@ export default {
<style lang="scss">
.custom-time-select {
width: 120px;
width: 110px;
height: 34px;
.rote {
.el-input__inner{
background: #F4F6F9;
......
......@@ -653,13 +653,18 @@ export default {
.el-form-item{
margin: 0 !important;
.form-content-width{
width: 110px;
width: 80px;
}
::v-deep .el-input{
.el-input__inner{
border: 0;
}
}
::v-deep .is-focus{
.el-input__inner{
background: #F4F6F9;
}
}
}
}
.table-item{
......
......@@ -348,13 +348,18 @@ export default {
.el-form-item{
margin: 0 !important;
.form-content-width{
width: 100px;
width: 80px;
}
::v-deep .el-input{
.el-input__inner{
border: 0;
}
}
::v-deep .is-focus{
.el-input__inner{
background: #F4F6F9;
}
}
}
}
.content{
......
......@@ -36,18 +36,18 @@
</template>
</el-table-column>
<el-table-column prop="gdp" label="GDP(亿元)" sortable width="120" :formatter="formatStatus"/>
<el-table-column prop="gdpGrowth" label="GDP增速(%)" sortable width="130" :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"/>
<el-table-column prop="gbr" label="一般公共预算收入(亿元)" sortable width="200" :formatter="formatStatus"/>
<el-table-column prop="gbe" label="一般公共预算支出(亿元)" sortable width="200" :formatter="formatStatus"/>
<el-table-column prop="govFundIncome" label="政府性基金收入(亿元)" sortable width="200" :formatter="formatStatus"/>
<el-table-column prop="govDebtBalance" label="地方政府债务余额(亿元)" sortable width="200" :formatter="formatStatus"/>
<el-table-column prop="uipInterestBearingDebt" label="城投平台有息债务(亿元)" sortable width="200" :formatter="formatStatus"/>
<el-table-column prop="fiscalSelfSufficiencyRate" label="财政自给率(%)" sortable width="150" :formatter="formatStatus"/>
<el-table-column prop="govDebtRateWild" label="债务率-宽口径(%)" sortable width="170" :formatter="formatStatus"/>
<el-table-column prop="gdp" label="GDP(亿元)" sortable="custom" width="120" :formatter="formatStatus"/>
<el-table-column prop="gdpGrowth" label="GDP增速(%)" sortable="custom" width="130" :formatter="formatStatus"/>
<el-table-column prop="gdpPerCapita" label="人均GDP(元)" sortable="custom" width="130" :formatter="formatStatus"/>
<el-table-column prop="population" label="人口(万人)" sortable="custom" width="120" :formatter="formatStatus"/>
<el-table-column prop="fixedInvestment" label="固定资产投资 (亿元) " sortable="custom" width="200" :formatter="formatStatus"/>
<el-table-column prop="gbr" label="一般公共预算收入(亿元)" sortable="custom" width="200" :formatter="formatStatus"/>
<el-table-column prop="gbe" label="一般公共预算支出(亿元)" sortable="custom" width="200" :formatter="formatStatus"/>
<el-table-column prop="govFundIncome" label="政府性基金收入(亿元)" sortable="custom" width="200" :formatter="formatStatus"/>
<el-table-column prop="govDebtBalance" label="地方政府债务余额(亿元)" sortable="custom" width="200" :formatter="formatStatus"/>
<el-table-column prop="uipInterestBearingDebt" label="城投平台有息债务(亿元)" sortable="custom" width="200" :formatter="formatStatus"/>
<el-table-column prop="fiscalSelfSufficiencyRate" label="财政自给率(%)" sortable="custom" width="150" :formatter="formatStatus"/>
<el-table-column prop="govDebtRateWild" label="债务率-宽口径(%)" sortable="custom" width="170" :formatter="formatStatus"/>
</el-table>
</div>
<div class="pagination-box" v-if="show_page && tableDataTotal>pageSize">
......@@ -193,17 +193,22 @@ export default {
<style lang="scss" scoped>
.regionalEconomy{
.el-form{
/*margin-left: 24px;*/
margin-left: 16px;
.el-form-item{
margin: 0 !important;
.form-content-width{
width: 100px;
width: 80px;
}
::v-deep .el-input{
.el-input__inner{
border: 0;
}
}
::v-deep .is-focus{
.el-input__inner{
background: #F4F6F9;
}
}
}
}
.content{
......
......@@ -399,7 +399,7 @@ export default {
width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
textContainer.remove();
});
dom.style.setProperty("width", `${width + 60}px`);
dom.style.setProperty("width", `${width + 50}px`);
this.handleSearch(name);
return;
}
......@@ -411,7 +411,7 @@ export default {
textContainer.textContent = iptChild.getAttribute("placeholder");
document.body.append(textContainer);
// let containerWidth = textContainer.offsetWidth + 12 + 8;
let containerWidth = 120;
let containerWidth = 110;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
this.handleSearch(name);
......@@ -509,7 +509,7 @@ export default {
float: left;
}
::v-deep .el-cascader{
width: 120px;
width: 110px;
margin-right: 12px;
height: 34px;
line-height: 34px !important;
......
......@@ -485,10 +485,10 @@
}
.form-content-width{
width: 90px;
width: 80px;
}
::v-deep .el-cascader{
width: 180px;
width: 106px;
.el-cascader__tags{
flex-wrap: inherit;
.el-tag{
......
......@@ -6,7 +6,7 @@
<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-select v-model="years" @change="iptAdaptive(inputID1,true,1)" :class="[`select-adaptive-${inputID1}`]" 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>
......@@ -49,7 +49,7 @@
<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-select v-model="years1" @change="iptAdaptive(inputID2,true,2)" :class="[`select-adaptive-${inputID2}`]" 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>
......@@ -92,10 +92,10 @@
<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-select @change="iptAdaptive(inputID3,true,3)" :class="[`select-adaptive-${inputID3}`]" 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-select v-model="years2" @change="iptAdaptive(inputID3,true,3)" :class="[`select-adaptive-${inputID4}`]" 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>
......@@ -177,6 +177,7 @@
import dataRegion from '@/assets/json/dataRegion'
import { countLandMarketByType,countLandMarketByProvince,countLandMarketByYear } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
import { v4 } from "uuid";
export default {
name: 'NationalEconomies',
components: {
......@@ -203,11 +204,14 @@ export default {
tdytState:true,
topState:true,
nftjState:true,
// typeName:['住宅用地','工业用地','城镇住宅用地','其他商服用地','公共设施用地','公路用地','城镇村道路用地','公园与绿地',
// '工矿仓储用地','零售商业用地','科研用地','街巷用地','机关团体用地','商服用地','商务金融用地']
inputID1:this.getUid(),
inputID2:this.getUid(),
inputID3:this.getUid(),
inputID4:this.getUid(),
}
},
created() {
this.getPlaceholder()
this.dataRegion()
this.yearsData()
......@@ -726,7 +730,116 @@ export default {
});
return sums;
},
async getPlaceholder() {
try {
await this.$nextTick();
const doms = document.querySelectorAll("[class*='select-adaptive-']");
if (doms?.length) {
doms.forEach(dom => {
const realStyles = window.getComputedStyle(dom);
const ipt = dom.querySelector("input");
const text = ipt.getAttribute("placeholder");
const textContainer = document.createElement("span");
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
// 加上按钮宽度 以及按钮左外边距
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
});
}
} catch (error) {
}
},
iptAdaptive(uid, multiple = false, key) {
multiple ? this.multipleAdaptiveHandle(uid,key) : this.iptAdaptiveHandle(uid,key);
},
getUid() {
return v4();
},
// 多选处理
async multipleAdaptiveHandle(uid,key) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const iptChild = dom.querySelector(".el-input__inner");
if (dom) {
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
const selectChildren = dom.querySelectorAll(".el-tag");
if (selectChildren.length) {
let width = 0;
selectChildren.forEach(item => {
const text = item.textContent;
const itemInfo = window.getComputedStyle(item);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", itemInfo.padding);
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
textContainer.remove();
});
dom.style.setProperty("width", `${width + 50}px`);
this.handleYears(key);
return;
}
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", "0px 8px");
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 30;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
this.handleYears(key);
}
} catch (error) {
console.log(error);
}
},
// 单选处理
async iptAdaptiveHandle(uid,key) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const realStyles = window.getComputedStyle(dom);
if (dom) {
const iptChild = dom.querySelector(".el-input__inner");
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
}
this.handleYears(key);
} catch (error) {
}
},
}
}
</script>
......@@ -747,6 +860,7 @@ export default {
color: #0081FF;
}
.tdjy{
@import "@/assets/styles/search-common.scss";
.text_p{
color: #999999;
font-size: 14px;
......@@ -772,7 +886,7 @@ export default {
margin-right: 24px;
}
::v-deep .form-content-width{
width: 135px;
width: 95px;
.el-select__input{
width: 10px !important;
max-width: 10px !important;
......@@ -789,6 +903,12 @@ export default {
background: #F4F6F9;
}
}
.el-select__tags {
flex-wrap: inherit;
.el-tag{
/*max-width: 130px;*/
}
}
}
::v-deep .el-cascader{
width: 220px;
......
......@@ -38,10 +38,10 @@
<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-select @change="iptAdaptive(inputID1,true,1)" style="margin-right: 8px" :class="[`select-adaptive-${inputID1}`]" 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-select v-model="years1" @change="iptAdaptive(inputID2,true,1)" multiple collapse-tags filterable :class="[`select-adaptive-${inputID2}`]" 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>
......@@ -83,7 +83,7 @@
<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)" collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
<el-select v-model="years2" @change="iptAdaptive(inputID3,'',2)" :class="[`select-adaptive-${inputID3}`]" style="width: 80px;" 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>
......@@ -130,6 +130,7 @@
import dataRegion from '@/assets/json/dataRegion'
import { countNewsBidByYear,countNewsBidByProvince,countNewsBidByMonth } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
import { v4 } from "uuid";
export default {
name: 'NationalEconomies',
components: {
......@@ -152,9 +153,13 @@
isSkeleton:true,
gyflState:true,
tdytState:true,
inputID1:this.getUid(),
inputID2:this.getUid(),
inputID3:this.getUid(),
}
},
created() {
this.getPlaceholder()
this.dataRegion()
this.yearsData()
this.getcountNewsBidByYear()
......@@ -613,7 +618,116 @@
});
return sums;
},
async getPlaceholder() {
try {
await this.$nextTick();
const doms = document.querySelectorAll("[class*='select-adaptive-']");
if (doms?.length) {
doms.forEach(dom => {
const realStyles = window.getComputedStyle(dom);
const ipt = dom.querySelector("input");
const text = ipt.getAttribute("placeholder");
const textContainer = document.createElement("span");
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
// 加上按钮宽度 以及按钮左外边距
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
});
}
} catch (error) {
}
},
iptAdaptive(uid, multiple = false, key) {
multiple ? this.multipleAdaptiveHandle(uid,key) : this.iptAdaptiveHandle(uid,key);
},
getUid() {
return v4();
},
// 多选处理
async multipleAdaptiveHandle(uid,key) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const iptChild = dom.querySelector(".el-input__inner");
if (dom) {
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
const selectChildren = dom.querySelectorAll(".el-tag");
if (selectChildren.length) {
let width = 0;
selectChildren.forEach(item => {
const text = item.textContent;
const itemInfo = window.getComputedStyle(item);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", itemInfo.padding);
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
textContainer.remove();
});
dom.style.setProperty("width", `${width + 50}px`);
this.handleYears(key);
return;
}
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", "0px 8px");
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 30;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
this.handleYears(key);
}
} catch (error) {
console.log(error);
}
},
// 单选处理
async iptAdaptiveHandle(uid,key) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const realStyles = window.getComputedStyle(dom);
if (dom) {
const iptChild = dom.querySelector(".el-input__inner");
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
}
this.handleYears(key);
} catch (error) {
}
},
}
}
</script>
......@@ -634,6 +748,7 @@
color: #0081FF;
}
.tdjy{
@import "@/assets/styles/search-common.scss";
.text_p{
color: #999999;
font-size: 14px;
......@@ -659,7 +774,7 @@
margin-right: 24px;
}
::v-deep .form-content-width{
width: 145px;
width: 95px;
.el-select__input{
width: 10px !important;
max-width: 10px !important;
......@@ -675,6 +790,12 @@
background: #F4F6F9;
}
}
.el-select__tags {
flex-wrap: inherit;
.el-tag{
/*max-width: 130px;*/
}
}
}
::v-deep .el-cascader{
width: 220px;
......
......@@ -6,7 +6,7 @@
<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-select v-model="years" @change="iptAdaptive(inputID1,true,1)" :class="[`select-adaptive-${inputID1}`]" 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>
......@@ -54,7 +54,7 @@
<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-select v-model="years1" @change="iptAdaptive(inputID2,true,2)" :class="[`select-adaptive-${inputID2}`]" 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>
......@@ -102,7 +102,7 @@
<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-select v-model="years2" @change="iptAdaptive(inputID3,true,3)" :class="[`select-adaptive-${inputID3}`]" 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>
......@@ -183,7 +183,7 @@
<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-select v-model="years3" @change="iptAdaptive(inputID4,'',5)" :class="[`select-adaptive-${inputID4}`]" 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>
......@@ -226,10 +226,10 @@
<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" clearable collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
<el-select @change="iptAdaptive(inputID5,'',6)" :class="[`select-adaptive-${inputID5}`]" style="margin-right: 8px" v-model="address" clearable 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-select v-model="years4" @change="iptAdaptive(inputID6,'',6)" :class="[`select-adaptive-${inputID6}`]" 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>
......@@ -279,6 +279,7 @@
import dataRegion from '@/assets/json/dataRegion'
import { countBidByType,countBidGroupByProvince,rangeBidMoney,rangeBidFiveYears,lowerRateByYear,lowerRangeTenderType } from '@/api/macro/macro'
import skeleton from '../../component/skeleton'
import { v4 } from "uuid";
export default {
name: 'NationalEconomies',
components: {
......@@ -306,9 +307,16 @@
qsfxState:true,
xflState:true,
xmlxState:true,
inputID1:this.getUid(),
inputID2:this.getUid(),
inputID3:this.getUid(),
inputID4:this.getUid(),
inputID5:this.getUid(),
inputID6:this.getUid(),
}
},
created() {
this.getPlaceholder()
this.dataRegion()
this.yearsData()
this.getCountBidByType()
......@@ -1160,13 +1168,123 @@
});
return sums;
},
async getPlaceholder() {
try {
await this.$nextTick();
const doms = document.querySelectorAll("[class*='select-adaptive-']");
if (doms?.length) {
doms.forEach(dom => {
const realStyles = window.getComputedStyle(dom);
const ipt = dom.querySelector("input");
const text = ipt.getAttribute("placeholder");
const textContainer = document.createElement("span");
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", realStyles.paddingRight) : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
// 加上按钮宽度 以及按钮左外边距
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
});
}
} catch (error) {
}
},
iptAdaptive(uid, multiple = false, key) {
multiple ? this.multipleAdaptiveHandle(uid,key) : this.iptAdaptiveHandle(uid,key);
},
getUid() {
return v4();
},
// 多选处理
async multipleAdaptiveHandle(uid,key) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const iptChild = dom.querySelector(".el-input__inner");
if (dom) {
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
const selectChildren = dom.querySelectorAll(".el-tag");
if (selectChildren.length) {
let width = 0;
selectChildren.forEach(item => {
const text = item.textContent;
const itemInfo = window.getComputedStyle(item);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", itemInfo.padding);
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
textContainer.remove();
});
dom.style.setProperty("width", `${width + 50}px`);
this.handleYears(key);
return;
}
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", "0px 8px");
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 30;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
this.handleYears(key);
}
} catch (error) {
console.log(error);
}
},
// 单选处理
async iptAdaptiveHandle(uid,key) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const realStyles = window.getComputedStyle(dom);
if (dom) {
const iptChild = dom.querySelector(".el-input__inner");
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
}
this.handleYears(key);
} catch (error) {
}
},
}
}
</script>
<style lang="scss" scoped>
.zhongbiao{
@import "@/assets/styles/search-common.scss";
padding-top: 16px;
.text_p{
color: #999999;
......@@ -1193,7 +1311,7 @@
margin-right: 24px;
}
::v-deep .form-content-width{
width: 145px;
width: 95px;
.el-select__input{
width: 10px !important;
max-width: 10px !important;
......@@ -1209,6 +1327,12 @@
background: #F4F6F9;
}
}
.el-select__tags {
flex-wrap: inherit;
.el-tag{
/*max-width: 130px;*/
}
}
}
::v-deep .el-cascader{
width: 220px;
......
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