Skip to content

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

修改

parent bb2fb63f
Show whitespace changes
Inline Side-by-side
Showing with 13717 additions and 63 deletions
dsk-operate-ui/src/assets/json/aptitudeCode.json 0 → 100644
View file @ 079628fa
This source diff could not be displayed because it is too large. You can view the blob instead.
dsk-operate-ui/src/views/macro/economies/component/comparison.vue
View file @ 079628fa
<template> <template>
<div class="regionalEconomy"> <div class="regionalEconomy">
地区经济对比 <div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">指标</span>
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="year">
<el-select v-model="queryParams.year" filterable multiple collapse-tags class="form-content-width" placeholder="请选择">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-form>
</div>
<div class="flex-box query-ability">
<span class="flex-box"><img src="@/assets/images/ability_vs.png">地区经济对比</span>
<span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
</div>
</div>
<div class="table-item">
<div class="table-title">
<span class="title">指标</span>
<span class="title">
<span class="address" v-if="value1">{{addressValue1}}<i class="el-icon-circle-close" @click="handleDelete(1)"></i></span>
<el-cascader
v-else
ref="address1"
:options="addressList"
:props="props"
v-model="value1"
@change="handleChange(1)"
placeholder="添加地区"></el-cascader>
</span>
<span class="title">
<span class="address" v-if="value2">{{addressValue2}}<i class="el-icon-circle-close" @click="handleDelete(2)"></i></span>
<el-cascader
v-else
ref="address2"
:options="addressList"
:props="props"
v-model="value2"
@change="handleChange(2)"
placeholder="添加地区"></el-cascader>
</span>
<span class="title">
<span class="address" v-if="value3">{{addressValue3}}<i class="el-icon-circle-close" @click="handleDelete(3)"></i></span>
<el-cascader
v-else
ref="address3"
:options="addressList"
:props="props"
v-model="value3"
@change="handleChange(3)"
placeholder="添加地区"></el-cascader>
</span>
<span class="title">
<span class="address" v-if="value4">{{addressValue4}}<i class="el-icon-circle-close" @click="handleDelete(4)"></i></span>
<el-cascader
v-else
ref="address2"
:options="addressList"
:props="props"
v-model="value4"
@change="handleChange(4)"
placeholder="添加地区"></el-cascader>
</span>
<span class="title">
<span class="address" v-if="value5">{{addressValue5}}<i class="el-icon-circle-close" @click="handleDelete(5)"></i></span>
<el-cascader
v-else
ref="address5"
:options="addressList"
:props="props"
v-model="value5"
@change="handleChange(5)"
placeholder="添加地区"></el-cascader>
</span>
</div>
<el-table
:data="getValues"
:show-header="false"
border
>
<el-table-column
v-for="(item, index) in getHeaders"
:key="index"
:prop="item"
:label="item"
width="16.7%"
>
</el-table-column>
</el-table>
</div>
</div> </div>
</template> </template>
<script> <script>
import dataRegion from '@/assets/json/dataRegion'
export default { export default {
name: 'comparison', name: 'comparison',
data() { data() {
return { return {
activeName: 'first' queryParams: {
year: '',
},
yearOptions: [
{ name: '2023年', value: '2023' },
{ name: '2022年', value: '2022' },
{ name: '2021年', value: '2021' },
],
tableData: [
{
zb:'',
gdp:'129,118.58',
gdpzs:'124,369.67',
rjgdp:'134,369.67',
},
{
zb:"",
gdp:'129,118.58',
gdpzs:'124,369.67',
rjgdp:'134,369.67',
},
{
zb:"",
gdp:'129,118.58',
gdpzs:'124,369.67',
rjgdp:'134,369.67',
},
{
zb:"",
gdp:'129,118.58',
gdpzs:'124,369.67',
rjgdp:'134,369.67',
},
{
zb:"",
gdp:'129,118.58',
gdpzs:'124,369.67',
rjgdp:'134,369.67',
},
],
headers: [
{
prop: 'name',
label: '经济',
},
{
prop: 'gdp',
label: 'GDP（亿元）',
},
{
prop: 'gdpzs',
label: 'GDP增速',
},
{
prop: 'rjgdp',
label: '人均GDP（元）',
},
{
prop: 'rjgdp',
label: '第一产业增加值（亿元）',
},
{
prop: 'rjgdp',
label: '第二产业增加值（亿元）',
},
{
prop: 'rjgdp',
label: '第三产业增加值（亿元）',
},
{
prop: 'rjgdp',
label: '人口（万人）',
},
{
prop: 'rjgdp',
label: '工业增加值（亿元）',
},
{
prop: 'rjgdp',
label: '工业总产值（亿元）',
},
{
prop: 'rjgdp',
label: '房地产开发投资（亿元）',
},
{
prop: 'rjgdp',
label: '进出口总额（亿美元）',
},
{
prop: 'rjgdp',
label: '社会消费品零售总额（亿元）',
},
{
prop: 'rjgdp',
label: '城镇居民人均可支配收入（元）',
},
{
prop: 'cz',
label: '财政',
},
{
prop: 'rjgdp',
label: '一般公共预算收入（亿元）',
},
{
prop: 'rjgdp',
label: '般公共预算收入增速',
},
{
prop: 'rjgdp',
label: '税收收入（亿元）',
},
{
prop: 'rjgdp',
label: '转移性收入（亿元）',
},
{
prop: 'rjgdp',
label: '上级补助收入（亿元）',
},
{
prop: 'rjgdp',
label: '一般公共预算支出（亿元）',
},
{
prop: 'rjgdp',
label: '政府性基金收入（亿元）',
},
{
prop: 'rjgdp',
label: '土地出让收入（亿元）',
},
{
prop: 'rjgdp',
label: '政府性基金支出（亿元）',
},
{
prop: 'rjgdp',
label: '国有资本经营收入（亿元）',
},
{
prop: 'rjgdp',
label: '国有资本经营支出（亿元）',
},
{
prop: 'zw',
label: '债务',
},
{
prop: 'rjgdp',
label: '地方政府债务余额（亿元）',
},
{
prop: 'rjgdp',
label: '一般债余额（亿元）',
},
{
prop: 'rjgdp',
label: '专项债余额（亿元）',
},
{
prop: 'rjgdp',
label: '地方政府债务限额（亿元）',
},
{
prop: 'rjgdp',
label: '城投平台有息债务（亿元）',
},
{
prop: 'rjgdp',
label: '财政自给率',
},
{
prop: 'rjgdp',
label: '负债率',
},
{
prop: 'rjgdp',
label: '负债率-宽口径',
},
{
prop: 'rjgdp',
label: '债务率',
},
{
prop: 'rjgdp',
label: '债务率-宽口径',
},
],
props: {
value: 'id',
},
addressList: [],
value1:'',
value2:'',
value3:'',
value4:'',
value5:'',
addressValue1:'',
addressValue2:'',
addressValue3:'',
addressValue4:'',
addressValue5:'',
} }
}, },
created() { created() {
this.dataRegion()
},
computed: {
getHeaders() {
return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
},
getValues() {
return this.headers.map(item => {
return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
});
}
}, },
methods: { methods: {
handleClick() { //地区
async dataRegion() {
// await axios.post("https://files.jiansheku.com/file/json/common/dataRegion.json", {}, {
// headers: {
// 'Content-Type': 'application/json'
// }
// }).then(res => {
// if (res.data.code == 200) {
// console.log(res.data.data)
// }
// })
var str = [];
for (let x = 0; x < 3; x++) {
for (let i = 0; i < dataRegion.length; i++) {
if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
str.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
for (let j = 0; j < str.length; j++) {
if (str[j].id == dataRegion[i].parentId) {
str[j].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
}
}
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
for (let j = 0; j < str.length; j++) {
for (let k = 0; k < str[j].children.length; k++) {
if (str[j].children[k].id == dataRegion[i].parentId) {
str[j].children[k].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId
// "children":[]
});
}
}
}
}
}
}
this.addressList = str;
},
handleChange(index) {
let arr = '';
switch (index) {
case 1:
arr = this.$refs.address1.getCheckedNodes()
break;
case 2:
arr = this.$refs.address2.getCheckedNodes()
break;
case 3:
arr = this.$refs.address3.getCheckedNodes()
break;
case 4:
arr = this.$refs.address4.getCheckedNodes()
break;
case 5:
arr = this.$refs.address5.getCheckedNodes()
break;
}
for (var i in arr) {
switch (index) {
case 1:
this.addressValue1=arr[i].pathLabels.join('-')
break;
case 2:
this.addressValue2=arr[i].pathLabels.join('-')
break;
case 3:
this.addressValue3=arr[i].pathLabels.join('-')
break;
case 4:
this.addressValue4=arr[i].pathLabels.join('-')
break;
case 5:
this.addressValue5=arr[i].pathLabels.join('-')
break;
}
}
},
handleDelete(index){
switch (index) {
case 1:
this.addressValue1='';
this.value1='';
break;
case 2:
this.addressValue2='';
this.value2='';
break;
case 3:
this.addressValue3='';
this.value3='';
break;
case 4:
this.addressValue4='';
this.value4='';
break;
case 5:
this.addressValue5='';
this.value5='';
break;
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container{ .regionalEconomy{
padding: 0; width: 100%;
} background: #ffffff;
.eco-header{ padding: 16px 24px 16px 16px;
justify-content: space-between; margin-top: 12px;
height: 48px;
background: #FFFFFF;
border-radius: 4px; border-radius: 4px;
padding:0 16px; .el-form{
color: #232323; margin-left: 20px;
::v-deep .el-tabs{ .el-form-item{
height: 48px; margin: 0 !important;
line-height: 48px; .form-content-width{
.el-tabs__nav-wrap::after { width: 110px;
position: static !important;
} }
.el-tabs__header{
margin: 0;
.el-tabs__item{
padding: 0 16px;
font-size: 16px;
} }
.is-active{
font-weight: bold;
} }
.table-item{
margin-top: 22px;
::v-deep .el-table{
.el-table__body{
width: 100% !important;
/*.el-table__row:first-child{*/
/*.el-table__cell{*/
/*font-weight: bold;*/
/*color: #232323;*/
/*}*/
/*}*/
} }
} }
.location{ .table-title{
font-size: 14px; width: 100%;
color: #0081FF; display: flex;
/*justify-content:space-around;*/
border: 1px solid #E6EAF1;
border-bottom: 0;
.title{
display: inline-block;
width: 16.7%;
height: 50px;
background: #F0F3FA;
color: rgba(35,35,35,0.8);
font-size: 12px;
line-height: 50px;
padding:0 12px;
border-right: 1px solid #E6EAF1;
.address{
color: rgba(35,35,35,0.8);
i{ i{
margin-right: 6px; float: right;
font-size: 16px; color:#606163;
font-size: 15px;
line-height: 50px;
cursor: pointer;
}
}
::v-deep .el-cascader{
width: 120px;
}
}
.title:last-child{
border-right:0;
}
} }
} }
} }
......
dsk-operate-ui/src/views/macro/economies/component/industrialStructure.vue
View file @ 079628fa
...@@ -3,6 +3,13 @@ ...@@ -3,6 +3,13 @@
<div class="flex-box query-box"> <div class="flex-box query-box">
<div class="flex-box query-params"> <div class="flex-box query-params">
<span class="common-title">主要指标</span> <span class="common-title">主要指标</span>
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="year">
<el-select v-model="queryParams.year" filterable class="form-content-width" placeholder="请选择年度">
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-form>
</div> </div>
<div class="flex-box query-ability"> <div class="flex-box query-ability">
<span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span> <span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
...@@ -11,25 +18,27 @@ ...@@ -11,25 +18,27 @@
<div class="content"> <div class="content">
<div class="content-left"> <div class="content-left">
<div id="echarts" style="height: 400px"></div> <div id="echarts" style="height: 400px"></div>
<p class="tips"> 注：数据均来源于统计公报、统计年鉴，实际披露中由于部分地区最新年度数据不全，导致年份间数据差距较大</p>
</div> </div>
<div class="content-right"> <div class="content-right">
<el-table <el-table
v-loading="tableLoading" v-loading="tableLoading"
:data="tableData" :data="tableData"
height="440"
border border
highlight-current-row highlight-current-row
> >
<el-table-column label="序号" width="60" align="left"> <el-table-column label="序号" width="60" align="left">
<template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template> <template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
</el-table-column> </el-table-column>
<el-table-column label="产业类型" prop="type" width="200"></el-table-column> <el-table-column label="产业类型" prop="type"></el-table-column>
<el-table-column label="2022年"> <el-table-column label="2022年">
<el-table-column prop="je" label="金额（亿元）" sortable width="150"> </el-table-column> <el-table-column prop="je" label="金额（亿元）"> </el-table-column>
<el-table-column prop="zb" label="占比" sortable width="100"> </el-table-column> <el-table-column prop="zb" label="占比" sortable> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column label="2021年"> <el-table-column label="2021年">
<el-table-column prop="province" label="金额（亿元）" sortable width="150"> </el-table-column> <el-table-column prop="province" label="金额（亿元）" sortable> </el-table-column>
<el-table-column prop="province" label="占比" sortable width="100"> </el-table-column> <el-table-column prop="province" label="占比" sortable > </el-table-column>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
...@@ -43,12 +52,36 @@ export default { ...@@ -43,12 +52,36 @@ export default {
name: 'industrialStructure', name: 'industrialStructure',
data() { data() {
return { return {
queryParams: {
year: '',
address: ''
},
yearOptions: [
{ name: '2023年', value: '2023' },
{ name: '2022年', value: '2022' },
{ name: '2021年', value: '2021' },
],
tableData:[ tableData:[
{ {
type:'直接控股', type:'房建工程',
je:'29,175.61', je:'29,175.61',
zb:'26%' zb:'26%'
} },
{
type:'市政工程',
je:'29,175.61',
zb:'26%'
},
{
type:'公路工程',
je:'29,175.61',
zb:'26%'
},
{
type:'机电工程',
je:'29,175.61',
zb:'26%'
},
], ],
tableLoading: false, tableLoading: false,
pageIndex: 1, pageIndex: 1,
...@@ -105,12 +138,16 @@ export default { ...@@ -105,12 +138,16 @@ export default {
return result return result
}, },
}, },
legend: {
data: this.data,
},
series: [ series: [
{ {
type: 'treemap', type: 'treemap',
top:'0',
left:'0',
right:'0',
bottom:'20',
breadcrumb: {
show: false // 是否显示下面的面包屑导航
},
data: this.data data: this.data
} }
] ]
...@@ -142,6 +179,13 @@ export default { ...@@ -142,6 +179,13 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.content-left{ .content-left{
width: 46%;
.tips{
color: rgba(35,35,35,0.4);
font-size: 14px;
}
}
.content-right{
width: 50%; width: 50%;
} }
} }
......
dsk-operate-ui/src/views/macro/economies/component/regionalEconomy.vue
View file @ 079628fa
...@@ -3,11 +3,36 @@ ...@@ -3,11 +3,36 @@
<div class="content content1"> <div class="content content1">
<div class="common-title">经济数据</div> <div class="common-title">经济数据</div>
<div class="content-box"> <div class="content-box">
<div>2022年GDP</div> <div class="item">
<div>2022年GDP增速</div> <div class="item-title"><i style="background: #4E8EFF;"></i>2022年GDP</div>
<div>2022年人口</div> <div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_up.png"></div>
<div>2022年一般公共预算收入</div> <div id="echartsGDP" style="height: 75px;"></div>
<div>2000年地方政府债务余额</div> <div class="item-text up">较2021年上升<span>26.7%</span></div>
</div>
<div class="item">
<div class="item-title"><i style="background: #718AFF;"></i>2022年GDP增速</div>
<div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_down.png"></div>
<div id="echartsZS" style="height: 75px;"></div>
<div class="item-text down">较2021年下降<span>26.7%</span></div>
</div>
<div class="item">
<div class="item-title"><i style="background: #3AD0D1;"></i>2022年人口</div>
<div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_down.png"></div>
<div id="echartsRK" style="height: 75px;"></div>
<div class="item-text down">较2021年下降<span>26.7%</span></div>
</div>
<div class="item">
<div class="item-title"><i style="background: #FFBE5D;"></i>2022年一般公共预算收入</div>
<div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_up.png"></div>
<div id="echartsSR" style="height: 75px;"></div>
<div class="item-text up">较2021年上升<span>26.7%</span></div>
</div>
<div class="item">
<div class="item-title"><i style="background: #FF8935;"></i>2000年地方政府债务余额</div>
<div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_up.png"></div>
<div id="echartsYE" style="height: 75px;"></div>
<div class="item-text up">较2021年上升<span>26.7%</span></div>
</div>
</div> </div>
</div> </div>
<div class="content content2"> <div class="content content2">
...@@ -16,7 +41,8 @@ ...@@ -16,7 +41,8 @@
<span><img src="@/assets/images/economies/icon_1.png">下属辖区 <label>38</label><i>个</i></span> <span><img src="@/assets/images/economies/icon_1.png">下属辖区 <label>38</label><i>个</i></span>
<span><img src="@/assets/images/economies/icon_2.png">地方债余额 <label>10,567.32</label><i>亿</i></span> <span><img src="@/assets/images/economies/icon_2.png">地方债余额 <label>10,567.32</label><i>亿</i></span>
<span><img src="@/assets/images/economies/icon_3.png">专项债项目 <label>10</label><i>个</i></span> <span><img src="@/assets/images/economies/icon_3.png">专项债项目 <label>10</label><i>个</i></span>
<span><img src="@/assets/images/economies/icon_4.png">城投平台有息债务 <label>17,710.19</label><i>亿</i></span> <span><img src="@/assets/images/economies/icon_4.png">城投平台 <label>17</label><i>家</i></span>
<span><img src="@/assets/images/economies/icon_5.png">城投平台有息债务 <label>17,710.19</label><i>亿</i></span>
</div> </div>
</div> </div>
<div class="content content3"> <div class="content content3">
...@@ -48,6 +74,7 @@ ...@@ -48,6 +74,7 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts';
export default { export default {
name: 'regionalEconomy', name: 'regionalEconomy',
data() { data() {
...@@ -242,10 +269,19 @@ export default { ...@@ -242,10 +269,19 @@ export default {
tableLoading: false, tableLoading: false,
pageIndex: 1, pageIndex: 1,
pageSize: 10, pageSize: 10,
tableDataTotal: 0 tableDataTotal: 0,
labelData:[2021,2022],
valData:[23201,35201]
} }
}, },
created() { created() {
this.$nextTick(()=>{
this.initChart()
this.initChart1()
this.initChart2()
this.initChart3()
this.initChart4()
})
}, },
computed: { computed: {
getHeaders() { getHeaders() {
...@@ -258,9 +294,303 @@ export default { ...@@ -258,9 +294,303 @@ export default {
} }
}, },
methods: { methods: {
handleClick() { initChart() {
let myChart = echarts.init(document.getElementById("echartsGDP"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
// left:15,
// right:15,
bottom:0,
},
series: [
{
data: this.valData,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: true,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#4E8EFF",
},
itemStyle:{
color: "#4E8EFF",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#DFEAFF",
},
{
offset: 1,
color: "#5895FF",
},
]),
},
}
]
}
myChart.setOption(option);
},
initChart1(){
let myChartZS = echarts.init(document.getElementById("echartsZS"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:0,
},
series: [
{
data: this.valData,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: true,
position: 'top'
},
itemStyle:{
color: "#718AFF",
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#718AFF",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#E3E8FF",
},
{
offset: 1,
color: "#5B76FD",
},
]),
},
}
]
}
myChartZS.setOption(option);
},
initChart2(){
let myChartRK = echarts.init(document.getElementById("echartsRK"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:0,
},
series: [
{
data: this.valData,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: true,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#3AD0D1",
},
itemStyle:{
color: "#3AD0D1",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#D3F3F3",
},
{
offset: 1,
color: "#60D1D1",
},
]),
},
} }
]
}
myChartRK.setOption(option);
},
initChart3(){
let myChartSR = echarts.init(document.getElementById("echartsSR"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:0,
},
series: [
{
data: this.valData,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: true,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#FFAE35",
},
itemStyle:{
color: "#FFBE5D",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FFE9C6",
},
{
offset: 1,
color: "#FFB535",
},
]),
},
}
]
}
myChartSR.setOption(option);
},
initChart4(){
let myChartYE = echarts.init(document.getElementById("echartsYE"))
let option ={
tooltip: {
show:false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.labelData,
show:false,
},
yAxis: {
type: 'value',
show:false,
},
grid: {
top:20,
bottom:0,
},
series: [
{
data: this.valData,
type: 'line',
smooth: true,
emphasis: {
disabled: true,
focus: 'none'
},
label: {
show: true,
position: 'top'
},
//设置折线颜色和粗细
lineStyle: {
width: 1,
color: "#FF8935",
},
itemStyle:{
color: "#FF8935",
},
//设置面积区域为渐变效果
areaStyle: {
color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.2,
color: "#FEE5D2",
},
{
offset: 1,
color: "#FF8935",
},
]),
},
}
]
}
myChartYE.setOption(option);
},
} }
} }
</script> </script>
...@@ -279,8 +609,48 @@ export default { ...@@ -279,8 +609,48 @@ export default {
margin-top: 22px; margin-top: 22px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
div{ .item{
width: 19%; width: 19%;
.item-title{
font-size: 12px;
color: rgba(35,35,35,0.8);
i{
width: 2px;
height: 9px;
background: #718AFF;
display: inline-block;
margin-right: 4px;
}
}
.item-count{
color: #232323;
font-size: 14px;
margin-top: 16px;
margin-bottom: 6px;
span{
font-size: 24px;
}
img{
width: 20px;
height: 20px;
margin-left: 22px;
}
}
.item-text{
font-size: 14px;
margin-top: 8px;
color: rgba(35,35,35,0.8);
}
.up{
span{
color:#0CBC6D;
}
}
.down{
span{
color:#FF3C3C;
}
}
} }
} }
} }
...@@ -297,6 +667,7 @@ export default { ...@@ -297,6 +667,7 @@ export default {
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-right: 4px; margin-right: 4px;
margin-bottom: -1px;
} }
label{ label{
font-weight: 700; font-weight: 700;
......
dsk-operate-ui/src/views/macro/economies/index.vue
View file @ 079628fa
...@@ -4,15 +4,15 @@ ...@@ -4,15 +4,15 @@
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="地区经济" name="first"></el-tab-pane> <el-tab-pane label="地区经济" name="first"></el-tab-pane>
<el-tab-pane label="辖区经济" name="second"></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="third"></el-tab-pane>
<el-tab-pane label="产业结构" name="four"></el-tab-pane> <el-tab-pane label="地区经济对比" name="four"></el-tab-pane>
</el-tabs> </el-tabs>
<div class="location"><i class="el-icon-location"></i>重庆市</div> <div class="location"><i class="el-icon-location"></i>重庆市</div>
</div> </div>
<RegionalEconomy v-if="activeName === 'first'"></RegionalEconomy> <RegionalEconomy v-if="activeName === 'first'"></RegionalEconomy>
<LocalEconomy v-if="activeName === 'second'"></LocalEconomy> <LocalEconomy v-if="activeName === 'second'"></LocalEconomy>
<Comparison v-if="activeName === 'third'"></Comparison> <IndustrialStructure v-if="activeName === 'third'"></IndustrialStructure>
<IndustrialStructure v-if="activeName === 'four'"></IndustrialStructure> <Comparison v-if="activeName === 'four'"></Comparison>
</div> </div>
</template> </template>
......
dsk-operate-ui/src/views/macro/enterprises/index.vue
View file @ 079628fa
<template> <template>
<div class="app-container"> <div class="app-container enterprises">
区域企业 <div class="flex-box eco-header">
<el-tabs v-model="activeName">
<el-tab-pane label="本地企业" name="first"></el-tab-pane>
<el-tab-pane label="异地备案" name="second"></el-tab-pane>
</el-tabs>
<div class="location"><i class="el-icon-location"></i>重庆市</div>
</div>
<div class="content">
<div class="search">
<el-cascader
ref="address"
:options="aptitudeCodeList"
:props="props"
v-model="queryParams.codeStr"
placeholder="资质资格"
collapse-tags
clearable></el-cascader>
<el-input placeholder="输入企业名称关键词" v-model="queryParams.key">
<el-button slot="append">搜索</el-button>
</el-input>
<span class="total">共{{tableDataTotal}}条</span>
</div>
<div class="table-item">
<el-table
v-loading="tableLoading"
:data="tableData"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table-column label="序号" width="50" align="left" fixed>
<template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
</el-table-column>
<el-table-column label="公司名称" align="left" width="300">
<template slot-scope="scope">
<router-link to="" tag="a" class="a-link">{{ scope.row.name}}</router-link>
</template>
</el-table-column>
<el-table-column label="注册地区" prop="address" width="80"/>
<el-table-column label="资质资格" prop="cgfs" sortable width="120" align="right" />
<el-table-column label="专业人员" prop="cgfs" sortable width="130" align="right" />
<el-table-column label="中标业绩" prop="cgfs" sortable width="130" align="right" />
<el-table-column label="最大中标金额（万元）" prop="cgfs" sortable width="160" align="right" />
<el-table-column label="中标总金额（万元）" prop="cgfs" sortable width="160" align="right" />
<el-table-column label="四库业绩" prop="cgfs" sortable width="130" align="right" />
<el-table-column label="公路业绩" prop="cgfs" sortable width="130" align="right" />
<el-table-column label="水利业绩" prop="cgfs" sortable width="130" align="right" />
<el-table-column label="常合作业主" prop="cgfs" width="280" align="right" />
<el-table-column label="客户（个）" prop="cgfs" sortable width="130" align="right" />
<el-table-column label="供应商（个）" prop="cgfs" sortable width="130" align="right" />
<el-table-column label="常合作供应商" prop="cgfs" width="280" align="right" />
</el-table>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import aptitudeCode from '@/assets/json/aptitudeCode'
export default { export default {
name: 'Enterprises', name: 'Enterprises',
data() { data() {
return { return {
activeName: 'first',
queryParams:{
key:'',
codeStr:''
},
props: {
value: 'id',
multiple: true,
checkStrictly:true,
label:'name',
children:'list',
expandTrigger:'hover'
},
tableData: [
{
dataId:'1',
cgrssqy:'100',
cgfs:'200',
address:'江北区',
name:'重庆市江北区国有资本投资运营管理集团有限公司'
}
],
tableLoading: false,
pageIndex: 1,
pageSize: 10,
tableDataTotal: 1,
aptitudeCodeList:[]
} }
}, },
created() { created() {
this.aptitudeCode()
}, },
methods: { methods: {
//资质Json
async aptitudeCode() {
// await axios.post("https://files.jiansheku.com/file/json/common/aptitudeCode.json", {}, {
// headers: {
// 'Content-Type': 'application/json'
// }
// }).then(res => {
// if (res.data.code == 200) {
// console.log(res.data.data)
// }
// })
console.log(aptitudeCode)
this.aptitudeCodeList=aptitudeCode
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container{
padding: 0;
}
.enterprises{
.eco-header{
justify-content: space-between;
height: 48px;
background: #FFFFFF;
border-radius: 4px;
padding:0 16px;
color: #232323;
::v-deep .el-tabs{
height: 48px;
line-height: 48px;
.el-tabs__nav-wrap::after {
position: static !important;
}
.el-tabs__header{
margin: 0;
.el-tabs__item{
padding: 0 16px;
font-size: 16px;
}
.is-active{
font-weight: bold;
}
}
.el-tabs__content{
width: 100%;
}
}
.location{
font-size: 14px;
color: #0081FF;
i{
margin-right: 6px;
font-size: 16px;
}
}
}
.content{
background: #FFFFFF;
border-radius: 4px;
margin-top: 12px;
padding: 16px;
.search{
::v-deep .el-cascader{
width: 130px;
margin-right: 12px;
height: 32px;
.el-input{
width: 100%;
}
}
::v-deep .el-input{
width: 250px;
height: 32px;
.el-input-group__append{
width: 59px;
background: #F5F5F5;
color:#0081FF;
border-left: 0;
}
}
.total{
float: right;
color: #3D3D3D;
font-size: 12px;
line-height: 36px;
}
}
.table-item{
margin-top: 14px;
}
}
}
</style> </style>
dsk-operate-ui/src/views/macro/nationalEconomies/index.vue
View file @ 079628fa
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
<el-table-column label="一般债余额（亿元）" prop="cgfs" width="160" align="left" /> <el-table-column label="一般债余额（亿元）" prop="cgfs" width="160" align="left" />
<el-table-column label="专项债余额（亿元）" prop="cgfs" width="160" align="left" /> <el-table-column label="专项债余额（亿元）" prop="cgfs" width="160" align="left" />
<el-table-column label="地方政府债务限额（亿元）" prop="cgfs" width="160" align="left" /> <el-table-column label="地方政府债务限额（亿元）" prop="cgfs" width="160" align="left" />
<el-table-column label="城投平台有息债务？？（亿元）" prop="cgfs" width="160" align="left" > <el-table-column label="城投平台有息债务（亿元）" prop="cgfs" width="160" align="left" >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span>城投平台有息债务（亿元） <span>城投平台有息债务（亿元）
<el-tooltip popper-class="tips" effect="light" content="城投平台有息债务是该地区行政区划下所有的城投公司的短期债务与长期债务合计。其中，短期债务=短期借款+一年内到期的非流动负债+应付短期债券，长期债务=长期借款+应付长期债券。" placement="top"> <el-tooltip popper-class="tips" effect="light" content="城投平台有息债务是该地区行政区划下所有的城投公司的短期债务与长期债务合计。其中，短期债务=短期借款+一年内到期的非流动负债+应付短期债券，长期债务=长期借款+应付长期债券。" placement="top">
......
dsk-operate-ui/src/views/macro/urban/index.vue
View file @ 079628fa
<template> <template>
<div class="app-container"> <div class="app-container urban">
城投平台 <div class="content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">城投平台</span>
</div>
</div>
<div class="search">
<el-radio v-model="radio" label="1">含下属辖区</el-radio>
<el-radio v-model="radio" label="2">本级</el-radio>
<div class="search-box">
<span style="cursor: pointer;" @click="handleSearch">筛选<i class="el-icon-caret-bottom" style="color:rgba(35,35,35,0.4);margin-left: 5px"></i></span>
<div v-show="searchState" ref="showContent" class="search-main">
<div class="item">
<span class="wrap_label">行政等级</span>
<div class="item_ckquery">
<span :class="{color_text:xzdjCalss == ''}" @click="changeXZDJ('')">全部</span>
<template v-for="(item,index) in xzdj">
<span :class="{color_text:index+1 === xzdjCalss}" @click="changeXZDJ(index+1)">{{item.name}}</span>
</template>
</div>
</div>
<div class="item">
<span class="wrap_label">城投业务类型</span>
<div class="item_ckquery">
<span>全部</span>
<template v-for="(item,index) in typeList">
<span>{{item}}</span>
</template>
</div>
</div>
<div class="item">
<span class="wrap_label">主体评级</span>
<div class="item_ckquery">
<span>全部</span>
<template v-for="(item,index) in ztpj">
<span>{{item}}</span>
</template>
</div>
</div>
<div class="item">
<span class="wrap_label">股东背景</span>
<div class="item_ckquery">
<span>全部</span>
<template v-for="(item,index) in gdbj">
<span>{{item}}</span>
</template>
</div>
</div>
<div class="item">
<span class="wrap_label">股权关系</span>
<div class="item_ckquery">
<span>全部</span>
<template v-for="(item,index) in gqgx">
<span>{{item}}</span>
</template>
</div>
</div>
<div class="item">
<span class="wrap_label">平台重要性</span>
<div class="item_ckquery">
<span>全部</span>
<template v-for="(item,index) in pt">
<span>{{item}}</span>
</template>
</div>
</div>
<div class="item">
<span class="wrap_label" style="width: 78px;">开发区类别</span>
<div class="item_ckquery">
<span>全部</span>
<template v-for="(item,index) in lfqType">
<span>{{item}}</span>
</template>
</div>
</div>
<div class="item">
<span class="wrap_label">更多筛选</span>
<div class="item_ckquery">
<span :class="addresslength>0?'select-active':''">注册地区{{addresslength>0?(addresslength+'项'):''}}</span>
<el-cascader ref="address" class="cascader-region" popper-class='cascader-region-addd'
@input="addressListbtn" v-model="addressType" :options="addressList" :props="props" collapse-tags></el-cascader>
</div>
</div>
</div>
</div>
<el-input class="search-input" placeholder="输入企业名称关键词" v-model="queryParams.key">
<template slot="prepend"><i class="el-icon-search"></i></template>
<el-button slot="append">搜索</el-button>
</el-input>
</div>
<div class="list-box">
<div class="item">
<div class="left">
<p>115<span>家</span></p>
<span>平台家数</span>
</div>
<img src="@/assets/images/urban/img1.png">
</div>
<div class="item">
<div class="left">
<p>18,737.90<span>亿元</span></p>
<span>授信余额</span>
</div>
<img src="@/assets/images/urban/img2.png">
</div>
<div class="item">
<div class="left">
<p>18,737.90<span>亿元</span></p>
<span>资产总额</span>
</div>
<img src="@/assets/images/urban/img3.png">
</div>
<div class="item">
<div class="left">
<p>18,737.90<span>亿元</span></p>
<span>营收账款</span>
</div>
<img src="@/assets/images/urban/img4.png">
</div>
<div class="item">
<div class="left">
<p>18,737.90<span>亿元</span></p>
<span>非标余额</span>
</div>
<img src="@/assets/images/urban/img5.png">
</div>
</div>
</div>
<div class="content">
<div class="flex-box query-box">
<div class="flex-box query-params">
<span class="common-title">主要指标</span>
</div>
<div class="flex-box query-ability">
<span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
</div>
</div>
<div class="table-item">
<el-table
v-loading="tableLoading"
:data="tableData"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table-column label="序号" width="50" align="left" fixed>
<template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="name" label="公司名称" width="250" fixed>
<template slot-scope="scope">{{ scope.row.name }}
<span class="table-span" style="color: #3D3D3D;" v-if="scope.row.state === 0"><img src="@/assets/images/urban/rl_icon1.png"/>认领</span>
<span class="table-span" style="color: rgba(35,35,35,0.4);" v-if="scope.row.state === 1"><img src="@/assets/images/urban/rl_icon2.png"/>已认领</span>
</template>
</el-table-column>
<el-table-column prop="value" label="区域" width="100" />
<el-table-column prop="pm" label="招标数量" sortable width="120" />
<el-table-column prop="bl" label="城投拿地" sortable width="140" />
<el-table-column prop="bl" label="供应商" sortable width="170" />
<el-table-column prop="bl" label="主体评级" sortable width="140" />
<el-table-column prop="bl" label="债券余额（亿元）" sortable width="140" />
<el-table-column prop="bl" label="行政级别" width="140" />
<el-table-column prop="bl" label="股东背景" width="140" />
<el-table-column prop="bl" label="股权关系" width="140" />
<el-table-column prop="bl" label="平台重要性" width="140" />
<el-table-column prop="bl" label="城投业务类型" width="140" >
<template slot="header" slot-scope="scope">
<span>城投业务类型
<el-tooltip popper-class="tips" effect="light" content=" 根据主营业务构成划分为土地开发整理、基础设施建设、交通建设运营、棚改保障房建设、公用事业等8大类型。" placement="top">
<i class="el-icon-warning-outline"></i>
</el-tooltip>
</span>
</template>
</el-table-column>
<el-table-column prop="bl" label="实控人" width="200" />
<el-table-column prop="bl" label="最新报告期" width="120" />
<el-table-column prop="bl" label="总资产（亿元）" sortable width="120" />
<el-table-column prop="bl" label="归母净资产（亿元）" sortable width="160" />
<el-table-column prop="bl" label="货币资金（亿元）" sortable width="160" />
<el-table-column prop="bl" label="土地资产（亿元）" sortable width="160" />
<el-table-column prop="bl" label="受限资产（亿元）" sortable width="160" />
<el-table-column prop="bl" label="应收账款（亿元）" sortable width="160" />
<el-table-column prop="bl" label="其他应收款（亿元）" sortable width="160" />
<el-table-column prop="bl" label="公益性＆准公益性主营占比（%）" width="160" />
<el-table-column prop="bl" label="应收类款项来自政府占比（%）" width="160" />
<el-table-column prop="bl" label="政府补助（亿元）" width="120" />
<el-table-column prop="bl" label="专项应付款（亿元）" width="140" />
<el-table-column prop="bl" label="营业收入（亿元）" width="140" />
<el-table-column prop="bl" label="归母净利润（亿元）" width="140" />
<el-table-column prop="bl" label="净资产收益率（%）" width="140" />
<el-table-column prop="bl" label="经营现金流量净额（亿元）" width="160" />
<el-table-column prop="bl" label="筹资现金流量净额（亿元）" width="160" />
<el-table-column prop="bl" label="投资现金流量净额（亿元）" width="160" />
<el-table-column prop="bl" label="总负债（亿元）" width="160" />
<el-table-column prop="bl" label="有息债务（亿元）" width="160" />
<el-table-column prop="bl" label="有息债务/总负债（%）" width="160" />
<el-table-column prop="bl" label="资产负债率（%）" width="160" />
<el-table-column prop="bl" label="综合融资成本（%）" width="160" />
<el-table-column prop="bl" label="现金比率" width="160" />
<el-table-column prop="bl" label="现金流量比率" width="160" />
<el-table-column prop="bl" label="现金到期债务比" width="160" />
<el-table-column prop="bl" label="授信余额/全部债务（%）" width="160" />
<el-table-column prop="bl" label="EBITDA保障倍数" width="160" />
<el-table-column prop="bl" label="私募债余额占比（%）" width="160" />
<el-table-column prop="bl" label="一年内到期债权占比（%）" width="160" />
<el-table-column prop="bl" label="债券余额/有息债务（%）" width="160" />
<el-table-column prop="bl" label="借款余额（亿元）" width="160" />
<el-table-column prop="bl" label="借款/有息债务（%）" width="160" />
<el-table-column prop="bl" label="非标余额（亿元）" width="160" />
<el-table-column prop="bl" label="非标余额/有息债务（%）" width="160" />
<el-table-column prop="bl" label="对外担保金额（亿元）" width="160" />
<el-table-column prop="bl" label="对外担保比例（%）" width="160" />
<el-table-column prop="bl" label="所属开发区" width="160" />
<el-table-column prop="bl" label="开发区类别" width="160" />
</el-table>
</div>
<div class="pagination-box">
<el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import dataRegion from '@/assets/json/dataRegion'
export default { export default {
name: 'Urban', name: 'Urban',
data() { data() {
return { return {
queryParams:{
key:''
},
tableData:[
{
name:'重庆市江北区国有资本投资运营管理集团有限公司',
pm:'1/306',
value:'江北区',
bl:'129.386',
state:1
},
{
name:'重庆市江北区国有资本投资运营管理集团有限公司',
pm:'1/306',
value:'江北区',
bl:'129.386',
state:0
},
],
tableLoading: false,
pageIndex: 1,
pageSize: 10,
tableDataTotal: 120,
radio:'2',
xzdj:[
{
name:'省级',
key:1,
},
{
name:'地级市',
key:2,
},
{
name:'区县级',
key:3,
}
],
selected:[],
xzdjCalss:'',
typeList:['土地开发整理','基础设施建设','棚改保障房建设','公用事业','文化旅游','交通建设运营','产投平台'],
ztpj:['AAA','AA+','AA','A+','A','A-','BBB+','其他'],
gdbj:['政府','财政','国资委','其他'],
gqgx:['直接控股','间接控股'],
pt:['重要平台','主要平台','一般平台'],
lfqType:['国家级经开','国家级高新区','国家海关监管区域','国家级新区','国家边和区','其他国家级','省级新区','省级开发区'],
props: {
value: 'id',
multiple: true,
},
addressList: [],
addressType: [],
addresslength: 0,
searchState:false,
}
},
watch:{
searchState:{
handler(newVal, olVal) {
if (newVal) {
setTimeout(() => {
document.addEventListener('click', this.handleSearch);
}, 0);
} else {
document.removeEventListener('click', this.handleSearch);
}
}
} }
}, },
created() { created() {
this.dataRegion()
}, },
methods: { methods: {
//地区
async dataRegion() {
// await axios.post("https://files.jiansheku.com/file/json/common/dataRegion.json", {}, {
// headers: {
// 'Content-Type': 'application/json'
// }
// }).then(res => {
// if (res.data.code == 200) {
// console.log(res.data.data)
// }
// })
var str = [];
for (let x = 0; x < 3; x++) {
for (let i = 0; i < dataRegion.length; i++) {
if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
str.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
for (let j = 0; j < str.length; j++) {
if (str[j].id == dataRegion[i].parentId) {
str[j].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
} }
}
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
for (let j = 0; j < str.length; j++) {
for (let k = 0; k < str[j].children.length; k++) {
if (str[j].children[k].id == dataRegion[i].parentId) {
str[j].children[k].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId
// "children":[]
});
}
}
}
}
}
}
this.addressList = str;
},
// 重置页数
handleSizeChange(val) {
this.pageIndex = 1
this.pageSize = val
// this.querySubmit()
},
// 跳转指定页数
handleCurrentChange(val) {
this.pageIndex = val
// this.querySubmit()
},
handleSearch(event){
// this.searchState=!this.searchState;
let dom = this.$refs.showContent;
if (!dom.contains(event.target)) {
this.searchState = !this.searchState;
document.removeEventListener('click', this.handleSearch);
}
},
active(index, item) {
// this.selected.indexOf(item) 判断item下标是否为-1，
// 是-1则数组中匹配不到该数据，添加
// 不是-1则说明匹配到了，抹除
if (this.selected.indexOf(item) !== -1) {
this.selected.splice(this.selected.indexOf(item), 1); //取消
} else {
this.selected.push(item);//选中添加到数组里
}
console.log(JSON.parse(JSON.stringify(this.selected)));
},
changeXZDJ(index) {
this.xzdjCalss = index;
},
addressListbtn() {
let arr = this.$refs.address.getCheckedNodes();
let provinceCode = [],cityCode = [],countyCode = [];
for (var i in arr) {
if (arr[i].parent) {
if (!arr[i].parent.checked) {
arr[i].hasChildren && cityCode.push(arr[i].value);
!arr[i].hasChildren && countyCode.push(arr[i].value);
}
} else {
provinceCode.push(arr[i].value)
}
}
if (provinceCode.length > 0 || cityCode.length > 0 || countyCode.length > 0) {
this.addresslength = provinceCode.length + cityCode.length + countyCode.length;
} else {
this.addresslength = 0;
}
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container{
padding: 0;
}
.urban{
.content{
background: #ffffff;
padding: 16px;
margin-bottom: 16px;
border-radius: 4px;
.search{
margin-top: 22px;
.search-box{
display: inline-block;
margin-right: 32px;
/*cursor: pointer;*/
color:#232323;
position: relative;
.search-main{
background: #ffffff;
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
border-radius: 4px;
width: 880px;
height: 337px;
padding: 16px;
position: absolute;
top: 25px;
left: 0;
z-index: 99;
.item{
margin-bottom: 5px;
display: flex;
/*align-items: center;*/
font-size: 14px;
.wrap_label{
color: rgba(35,35,35,0.8);
margin-right: 12px;
line-height: 30px;
}
.item_ckquery{
position: relative;
span{
color: #232323;
padding: 5px 12px;
display: inline-block;
cursor: pointer;
}
.color_text{
background: #F3F4F5;
border-radius: 4px;
color: #0081FF;
}
.select-active{
color: #0081FF;
}
}
.cascader-region {
position: absolute;
left: 0;
top: -6px;
opacity: 0;
line-height: 22px;
}
}
}
}
::v-deep .search-input{
/*::v-deep .el-input{*/
width: 250px;
height: 32px;
.el-input-group__prepend:first-child{
padding: 0;
background-color:#ffffff;
border-right: 0;
padding-left: 8px;
i{
color:#0081FF;
}
}
.el-input__inner{
border-left: 0;
height: 32px;
line-height: 32px;
}
.el-input-group__append:last-child{
width: 60px;
padding: 0;
text-align: center;
background: #F5F5F5;
color:#0081FF;
border-left: 0;
}
/*}*/
}
}
.table-item{
margin-top: 22px;
}
.table-span{
img{
width: 16px;
height: 16px;
margin-bottom: -4px;
margin-right: 5px;
margin-left: 20px;
}
}
.list-box{
display: flex;
justify-content: space-between;
.item{
margin-top: 24px;
width: 19%;
height: 96px;
background: url("../../../assets/images/urban/icon_bg.png") no-repeat;
background-size: 100%;
.left{
margin-left: 16px;
float: left;
margin-top: 24px;
p{
font-size: 26px;
font-weight: 700;
margin: 0;
span{
margin-left: 3px;
}
}
span{
font-size: 14px;
color: #3D3D3D;
font-weight: 400;
}
}
img{
float: right;
margin-right: 16px;
width: 41px;
height: 42px;
margin-top: 27px;
}
}
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment