Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
civil-front
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
civil
civil-front
Commits
0ed15335
Commit
0ed15335
authored
Jun 29, 2021
by
苏咏卓
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
更新地图
parent
cedaec7b
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
728 additions
and
93 deletions
+728
-93
src/api/unified/unified.js
+10
-0
src/views/unified/tapSwitch/marriage.vue
+164
-13
src/views/unified/tapSwitch/mechanism.vue
+194
-37
src/views/unified/tapSwitch/population.vue
+192
-25
src/views/unified/tapSwitch/socialAssistance.vue
+168
-18
No files found.
src/api/unified/unified.js
View file @
0ed15335
...
@@ -203,4 +203,13 @@ export const getAreaNursingStatsList = data => {
...
@@ -203,4 +203,13 @@ export const getAreaNursingStatsList = data => {
data
data
})
})
}
/** -------------------- 地图 -------------------- **/
//获取地图数据
export
const
getMapData
=
(
areaId
)
=>
{
return
request
({
url
:
`portal/static/map/
${
areaId
}
.json`
,
method
:
'get'
})
}
}
\ No newline at end of file
src/views/unified/tapSwitch/marriage.vue
View file @
0ed15335
...
@@ -60,7 +60,13 @@
...
@@ -60,7 +60,13 @@
<!-- 中 -->
<!-- 中 -->
<el-col
:span=
"12"
>
<el-col
:span=
"12"
>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"24"
><div
class=
"wians"
></div>
</el-col>
<el-col
:span=
"24"
><div
class=
"wians"
>
<div
class=
"title"
>
当前选择:广西全区
</div>
<div
class=
"title"
@
click=
"returnInfo"
>
返回上一级
</div>
<div
class=
"marriageMap"
id=
"marriageMap"
></div>
</div>
</el-col>
</el-row>
</el-row>
<br
/>
<br
/>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
...
@@ -117,11 +123,13 @@ import * as echarts from "echarts";
...
@@ -117,11 +123,13 @@ import * as echarts from "echarts";
import
{
import
{
getFivesYearMarriageLine
,
getFivesYearMarriageLine
,
getMarriageStats
,
getMarriageStats
,
getAreaUnderMarriageStatsList
getAreaUnderMarriageStatsList
,
getMapData
,
}
from
"@/api/unified/unified"
;
}
from
"@/api/unified/unified"
;
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
num
:
0
,
tableData
:
[
tableData
:
[
{
{
date
:
"1"
,
date
:
"1"
,
...
@@ -136,35 +144,172 @@ export default {
...
@@ -136,35 +144,172 @@ export default {
],
],
marriageLine
:
{},
marriageLine
:
{},
marriageStats
:
{},
marriageStats
:
{},
areaUnderMarriageStatsList
:
{}
areaUnderMarriageStatsList
:
{},
};
};
},
},
created
()
{
created
()
{
this
.
getFivesYearMarriageLineFun
();
this
.
getFivesYearMarriageLineFun
();
this
.
getMarriageStatsFun
();
this
.
getMarriageStatsFun
();
this
.
getAreaUnderMarriageStatsListFun
()
this
.
getAreaUnderMarriageStatsListFun
();
this
.
getMapData
(
"g450000"
);
//默认展示广西 g450000
},
},
methods
:
{
methods
:
{
getFivesYearMarriageLineFun
()
{
getFivesYearMarriageLineFun
(
data
)
{
getFivesYearMarriageLine
({}).
then
((
res
)
=>
{
getFivesYearMarriageLine
({
areaCode
:
data
,
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取近5年结婚走势"
);
console
.
log
(
res
,
"获取近5年结婚走势"
);
this
.
marriageLine
=
res
.
data
.
admin
;
this
.
marriageLine
=
res
.
data
.
admin
;
this
.
mainInfo
(
res
.
data
.
admin
);
this
.
mainInfo
(
res
.
data
.
admin
);
});
});
},
},
getMarriageStatsFun
()
{
getMarriageStatsFun
(
data
)
{
getMarriageStats
({}).
then
((
res
)
=>
{
getMarriageStats
({
areaCode
:
data
,
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取结婚离婚人数"
);
console
.
log
(
res
,
"获取结婚离婚人数"
);
this
.
marriageStats
=
res
.
data
;
this
.
marriageStats
=
res
.
data
;
});
});
},
},
getAreaUnderMarriageStatsListFun
(){
getAreaUnderMarriageStatsListFun
(
data
)
{
getAreaUnderMarriageStatsList
({}).
then
(
res
=>
{
getAreaUnderMarriageStatsList
({
console
.
log
(
res
,
'获取地区结婚离婚人数列表'
)
areaCode
:
data
,
this
.
areaUnderMarriageStatsList
=
res
.
data
}).
then
((
res
)
=>
{
})
console
.
log
(
res
,
"获取地区结婚离婚人数列表"
);
this
.
areaUnderMarriageStatsList
=
res
.
data
;
this
.
annualStatisticsFun
();
});
},
//获取地图数据
getMapData
(
areaId
)
{
getMapData
(
areaId
).
then
((
res
)
=>
{
console
.
log
(
"map"
,
res
);
this
.
marriageMap
([],
res
);
});
},
returnInfo
()
{
this
.
num
=
0
;
this
.
getMapData
(
"g450000"
);
this
.
getFivesYearMarriageLineFun
(
"450000"
);
this
.
getMarriageStatsFun
(
"450000"
);
this
.
getAreaUnderMarriageStatsListFun
(
"450000"
);
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
marriageMap
(
dataList
,
mapList
,
max
,
min
)
{
console
.
log
(
dataList
,
mapList
);
let
map
=
echarts
.
init
(
document
.
getElementById
(
"marriageMap"
));
echarts
.
registerMap
(
"GX"
,
mapList
);
map
.
setOption
({
tooltip
:
{
trigger
:
"item"
,
// formatter: '{b}
<
br
/>
{
c
}
%
(
完成数
/
指标数
)
'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
//text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
//name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#fff" },
borderWidth: 1, //区域边框宽度
borderColor: "#fff", //区域边框颜色
areaColor: "#0070BC", //默认区域颜色
},
emphasis: {
show: true,
areaColor: "#3066ba", //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
this.num++;
console.log(this.num, "点击数字,2不执行");
if (this.num >= 2) {
//不执行
} else {
console.log("点击取值", res);
console.log("地图数组", mapList.features);
console.log("地区下标", res.dataIndex);
console.log("区域信息", mapList.features[res.dataIndex].properties);
console.log(
"区域信息地区码",
mapList.features[res.dataIndex].properties.adcode
);
this.getMapData(
"g" + mapList.features[res.dataIndex].properties.adcode
);
this.getFivesYearMarriageLineFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getMarriageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaUnderMarriageStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
},
//婚姻5年趋势
//婚姻5年趋势
...
@@ -537,6 +682,12 @@ export default {
...
@@ -537,6 +682,12 @@ export default {
margin-left
:
20px
;
margin-left
:
20px
;
}
}
.marriageMap
{
width
:
100%
;
height
:
500px
;
background-color
:
#082c61
;
}
.wian
{
.wian
{
width
:
100%
;
width
:
100%
;
height
:
400px
;
height
:
400px
;
...
...
src/views/unified/tapSwitch/mechanism.vue
View file @
0ed15335
...
@@ -30,7 +30,11 @@
...
@@ -30,7 +30,11 @@
<el-col
:span=
"18"
>
<el-col
:span=
"18"
>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"16"
>
<el-col
:span=
"16"
>
<div
class=
"wians"
></div>
<div
class=
"wians"
>
<div
class=
"title"
>
当前选择:广西全区
</div>
<div
class=
"title"
@
click=
"returnInfo"
>
返回上一级
</div>
<div
class=
"mechanismMap"
id=
"mechanismMap"
></div>
</div>
</el-col>
</el-col>
<el-col
:span=
"8"
>
<el-col
:span=
"8"
>
...
@@ -42,9 +46,9 @@
...
@@ -42,9 +46,9 @@
:data=
"tableData"
:data=
"tableData"
stripe
stripe
height=
"400"
height=
"400"
:header-cell-style=
"
{ background: '#042465', color: '#fff'}"
:header-cell-style=
"
{ background: '#042465', color: '#fff'
}"
:cell-style="{ background: '#022872', color: '#fff'}"
:cell-style="{ background: '#022872', color: '#fff'
}"
style="width: 300px;
margib-left:
10px"
style="width: 300px;
margib-left:
10px"
>
>
<el-table-column
prop=
"date"
label=
"排名"
align=
"center"
>
<el-table-column
prop=
"date"
label=
"排名"
align=
"center"
>
</el-table-column>
</el-table-column>
...
@@ -54,7 +58,6 @@
...
@@ -54,7 +58,6 @@
</el-table-column>
</el-table-column>
</el-table>
</el-table>
</div>
</div>
</div>
</div>
</el-col>
</el-col>
...
@@ -103,10 +106,17 @@
...
@@ -103,10 +106,17 @@
<
script
>
<
script
>
import
*
as
echarts
from
"echarts"
;
import
*
as
echarts
from
"echarts"
;
import
{
getSoorganStats
,
getAreaUnderSoorganStatsList
,
getAreaNursingStatsList
,
getAgencyPercentageStats
}
from
"@/api/unified/unified"
;
import
{
getSoorganStats
,
getAreaUnderSoorganStatsList
,
getAreaNursingStatsList
,
getAgencyPercentageStats
,
getMapData
,
}
from
"@/api/unified/unified"
;
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
num
:
0
,
tableData
:
[
tableData
:
[
{
{
date
:
"1"
,
date
:
"1"
,
...
@@ -171,42 +181,53 @@ export default {
...
@@ -171,42 +181,53 @@ export default {
},
},
],
],
soorganStats
:
{},
soorganStats
:
{},
areaUnderSoorganStatsList
:{},
areaUnderSoorganStatsList
:
{},
areaNursingStatsList
:{},
areaNursingStatsList
:
{},
agencyPercentageStats
:[],
agencyPercentageStats
:
[],
welfareHomeName
:
[],
welfareHomeName
:
[],
};
};
},
},
created
()
{
created
()
{
this
.
getSoorganStatsFun
();
this
.
getSoorganStatsFun
();
this
.
getAreaUnderSoorganStatsListFun
()
this
.
getAreaUnderSoorganStatsListFun
();
this
.
getAreaNursingStatsListFun
()
this
.
getAreaNursingStatsListFun
();
this
.
getAgencyPercentageStatsFun
()
this
.
getAgencyPercentageStatsFun
();
this
.
getMapData
(
"g450000"
);
//默认展示广西 g450000
},
},
methods
:
{
methods
:
{
getSoorganStatsFun
()
{
getSoorganStatsFun
(
data
)
{
getSoorganStats
({}).
then
((
res
)
=>
{
getSoorganStats
({
areaCode
:
data
,
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取社会机构统计"
);
console
.
log
(
res
,
"获取社会机构统计"
);
this
.
soorganStats
=
res
.
data
;
this
.
soorganStats
=
res
.
data
;
});
});
},
},
getAreaUnderSoorganStatsListFun
(){
getAreaUnderSoorganStatsListFun
(
data
)
{
getAreaUnderSoorganStatsList
({}).
then
(
res
=>
{
getAreaUnderSoorganStatsList
({
console
.
log
(
res
,
'获取地区下面社会机构统计列表'
)
areaCode
:
data
,
this
.
areaUnderSoorganStatsList
=
res
.
data
}).
then
((
res
)
=>
{
})
console
.
log
(
res
,
"获取地区下面社会机构统计列表"
);
this
.
areaUnderSoorganStatsList
=
res
.
data
;
this
.
sociologyFun
();
});
},
},
getAreaNursingStatsListFun
(){
getAreaNursingStatsListFun
(
data
)
{
getAreaNursingStatsList
({}).
then
(
res
=>
{
getAreaNursingStatsList
({
console
.
log
(
res
,
'获取区域养老院统计列表'
)
areaCode
:
data
,
this
.
areaNursingStatsList
=
res
.
data
}).
then
((
res
)
=>
{
})
console
.
log
(
res
,
"获取区域养老院统计列表"
);
this
.
areaNursingStatsList
=
res
.
data
;
this
.
pensionFun
();
});
},
},
getAgencyPercentageStatsFun
()
{
getAgencyPercentageStatsFun
(
data
)
{
getAgencyPercentageStats
({}).
then
((
res
)
=>
{
getAgencyPercentageStats
({
areaCode
:
data
,
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取区域机构占比"
);
console
.
log
(
res
,
"获取区域机构占比"
);
this
.
agencyPercentageStats
=
res
.
data
;
this
.
agencyPercentageStats
=
res
.
data
;
res
.
data
.
forEach
((
item
)
=>
{
res
.
data
.
forEach
((
item
)
=>
{
...
@@ -217,6 +238,139 @@ export default {
...
@@ -217,6 +238,139 @@ export default {
});
});
},
},
//获取地图数据
getMapData
(
areaId
)
{
getMapData
(
areaId
).
then
((
res
)
=>
{
console
.
log
(
"map"
,
res
);
this
.
mechanismMap
([],
res
);
});
},
returnInfo
()
{
this
.
num
=
0
;
this
.
getMapData
(
"g450000"
);
this
.
getSoorganStatsFun
(
"450000"
);
this
.
getAreaUnderSoorganStatsListFun
(
"450000"
);
this
.
getAreaNursingStatsListFun
(
"450000"
);
this
.
getAgencyPercentageStatsFun
(
"450000"
);
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
mechanismMap
(
dataList
,
mapList
,
max
,
min
)
{
console
.
log
(
dataList
,
mapList
);
let
map
=
echarts
.
init
(
document
.
getElementById
(
"mechanismMap"
));
echarts
.
registerMap
(
"GX"
,
mapList
);
map
.
setOption
({
tooltip
:
{
trigger
:
"item"
,
// formatter: '{b}
<
br
/>
{
c
}
%
(
完成数
/
指标数
)
'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
//text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
//name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#fff" },
borderWidth: 1, //区域边框宽度
borderColor: "#fff", //区域边框颜色
areaColor: "#0070BC", //默认区域颜色
},
emphasis: {
show: true,
areaColor: "#3066ba", //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
this.num++;
console.log(this.num, "点击数字,2不执行");
if (this.num >= 2) {
//不执行
} else {
console.log("点击取值", res);
console.log("地图数组", mapList.features);
console.log("地区下标", res.dataIndex);
console.log("区域信息", mapList.features[res.dataIndex].properties);
console.log(
"区域信息地区码",
mapList.features[res.dataIndex].properties.adcode
);
this.getMapData(
"g" + mapList.features[res.dataIndex].properties.adcode
);
this.getSoorganStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaUnderSoorganStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaNursingStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAgencyPercentageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
//社会组织柱形图
//社会组织柱形图
sociologyFun() {
sociologyFun() {
var chartDom = document.getElementById("sociology");
var chartDom = document.getElementById("sociology");
...
@@ -568,24 +722,21 @@ export default {
...
@@ -568,24 +722,21 @@ export default {
},
},
},
},
mounted() {
mounted() {
setTimeout
(()
=>
{
setTimeout(() => {}, 1000);
this
.
sociologyFun
();
this
.
pensionFun
();
},
1000
);
},
},
};
};
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.el-table
th
{
.el-table
th
{
overflow
:
hidden
;
overflow
:
hidden
;
background-color
:
#082C
61
;
background-color
:
#082c
61
;
}
}
.el-table--small
{
.el-table--small
{
background-color
:
#082C
61
;
background-color
:
#082c
61
;
}
}
::v-deep
{
::v-deep
{
.
el-table__body-wrapper
::
-webkit-scrollbar-thumb
{
.
el-table__body-wrapper
::
-webkit-scrollbar-thumb
{
background-color
:
#ddd
;
background-color
:
#ddd
;
border-radius
:
3px
;
border-radius
:
3px
;
...
@@ -600,7 +751,7 @@ export default {
...
@@ -600,7 +751,7 @@ export default {
z-index
:
99
;
z-index
:
99
;
width
:
300px
;
width
:
300px
;
overflow
:
hidden
;
overflow
:
hidden
;
margin
:
auto
;
margin
:
auto
;
}
}
.classification
{
.classification
{
...
@@ -617,7 +768,7 @@ export default {
...
@@ -617,7 +768,7 @@ export default {
.numText
{
.numText
{
font-size
:
20px
;
font-size
:
20px
;
color
:
#3
A92F
1
;
color
:
#3
a92f
1
;
text-align
:
center
;
text-align
:
center
;
}
}
.sociology
{
.sociology
{
...
@@ -664,6 +815,12 @@ export default {
...
@@ -664,6 +815,12 @@ export default {
display
:
flex
;
display
:
flex
;
}
}
.mechanismMap
{
width
:
100%
;
height
:
500px
;
background-color
:
#082c61
;
}
.wian
{
.wian
{
width
:
100%
;
width
:
100%
;
height
:
400px
;
height
:
400px
;
...
...
src/views/unified/tapSwitch/population.vue
View file @
0ed15335
...
@@ -71,7 +71,13 @@
...
@@ -71,7 +71,13 @@
<!-- 中 -->
<!-- 中 -->
<el-col
:span=
"12"
>
<el-col
:span=
"12"
>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"24"
><div
class=
"wians"
></div>
</el-col>
<el-col
:span=
"24"
><div
class=
"wians"
>
<div
class=
"title"
>
当前选择:广西全区
</div>
<div
class=
"title"
@
click=
"returnInfo"
>
返回上一级
</div>
<div
class=
"populationMap"
id=
"populationMap"
></div>
</div>
</el-col>
</el-row>
</el-row>
<br
/>
<br
/>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
...
@@ -93,13 +99,17 @@
...
@@ -93,13 +99,17 @@
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"12"
>
<el-col
:span=
"12"
>
<div
class=
"rescue"
>
<div
class=
"rescue"
>
<div
class=
"size24"
>
{{
threeYeartTotalData
.
cityToatlNum
}}
</div>
<div
class=
"size24"
>
{{
threeYeartTotalData
.
cityToatlNum
}}
</div>
<div
class=
"size16"
>
城市
</div>
<div
class=
"size16"
>
城市
</div>
</div>
</div>
</el-col>
</el-col>
<el-col
:span=
"12"
>
<el-col
:span=
"12"
>
<div
class=
"rescue"
>
<div
class=
"rescue"
>
<div
class=
"size24"
>
{{
threeYeartTotalData
.
villageToatlNum
}}
</div>
<div
class=
"size24"
>
{{
threeYeartTotalData
.
villageToatlNum
}}
</div>
<div
class=
"size16"
>
农村
</div>
<div
class=
"size16"
>
农村
</div>
</div>
</div>
</el-col>
</el-col>
...
@@ -133,16 +143,18 @@ import {
...
@@ -133,16 +143,18 @@ import {
getMarriageStats
,
getMarriageStats
,
getAgencyChildStatsList
,
getAgencyChildStatsList
,
getThreeYearShjzAchieveStats
,
getThreeYearShjzAchieveStats
,
getAreaDisabledIssueStats
getAreaDisabledIssueStats
,
getMapData
,
}
from
"@/api/unified/unified"
;
}
from
"@/api/unified/unified"
;
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
num
:
0
,
marriageLine
:
{},
marriageLine
:
{},
marriageStats
:
{},
marriageStats
:
{},
threeYearShjzAchieveStats
:
{},
threeYearShjzAchieveStats
:
{},
threeYeartTotalData
:
{},
threeYeartTotalData
:
{},
areaDisabledIssueStats
:
{}
areaDisabledIssueStats
:
{},
};
};
},
},
created
()
{
created
()
{
...
@@ -150,33 +162,44 @@ export default {
...
@@ -150,33 +162,44 @@ export default {
this
.
getMarriageStatsFun
();
this
.
getMarriageStatsFun
();
this
.
getAgencyChildStatsListFun
();
this
.
getAgencyChildStatsListFun
();
this
.
getThreeYearShjzAchieveStatsFun
();
this
.
getThreeYearShjzAchieveStatsFun
();
this
.
getAreaDisabledIssueStatsFun
()
this
.
getAreaDisabledIssueStatsFun
();
this
.
getMapData
(
"g450000"
);
//默认展示广西 g450000
},
},
methods
:
{
methods
:
{
getFivesYearMarriageLineFun
()
{
getFivesYearMarriageLineFun
(
data
)
{
getFivesYearMarriageLine
({}).
then
((
res
)
=>
{
console
.
log
(
data
);
getFivesYearMarriageLine
({
areaCode
:
data
,
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取近5年结婚走势"
);
console
.
log
(
res
,
"获取近5年结婚走势"
);
this
.
marriageLine
=
res
.
data
.
admin
;
this
.
marriageLine
=
res
.
data
.
admin
;
this
.
mainInfo
(
res
.
data
.
admin
);
this
.
mainInfo
(
res
.
data
.
admin
);
});
});
},
},
getMarriageStatsFun
()
{
getMarriageStatsFun
(
data
)
{
getMarriageStats
({}).
then
((
res
)
=>
{
getMarriageStats
({
areaCode
:
data
,
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取结婚离婚人数"
);
console
.
log
(
res
,
"获取结婚离婚人数"
);
this
.
marriageStats
=
res
.
data
;
this
.
marriageStats
=
res
.
data
;
});
});
},
},
getAgencyChildStatsListFun
()
{
getAgencyChildStatsListFun
(
data
)
{
getAgencyChildStatsList
({}).
then
((
res
)
=>
{
getAgencyChildStatsList
({
areaCode
:
data
,
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"儿童福利统计"
);
console
.
log
(
res
,
"儿童福利统计"
);
this
.
agencyChildStatsList
=
res
.
data
;
this
.
agencyChildStatsList
=
res
.
data
;
this
.
orphanFun
()
});
});
},
},
getThreeYearShjzAchieveStatsFun
()
{
getThreeYearShjzAchieveStatsFun
(
data
)
{
getThreeYearShjzAchieveStats
({}).
then
((
res
)
=>
{
getThreeYearShjzAchieveStats
({
areaCode
:
data
,
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取近三年城市农村低保发放人数统计"
);
console
.
log
(
res
,
"获取近三年城市农村低保发放人数统计"
);
this
.
threeYearShjzAchieveStats
=
res
.
data
.
admin
;
this
.
threeYearShjzAchieveStats
=
res
.
data
.
admin
;
this
.
threeYeartTotalData
=
res
.
data
.
totalData
;
this
.
threeYeartTotalData
=
res
.
data
.
totalData
;
...
@@ -184,14 +207,152 @@ export default {
...
@@ -184,14 +207,152 @@ export default {
});
});
},
},
getAreaDisabledIssueStatsFun
(
)
{
getAreaDisabledIssueStatsFun
(
data
)
{
getAreaDisabledIssueStats
({
getAreaDisabledIssueStats
({
year
:
2021
year
:
2021
,
}).
then
(
res
=>
{
areaCode
:
data
,
console
.
log
(
res
,
'残疾人两项补贴'
)
}).
then
((
res
)
=>
{
this
.
areaDisabledIssueStats
=
res
.
data
console
.
log
(
res
,
"残疾人两项补贴"
);
this
.
annualStatisticsFun
(
res
.
data
)
this
.
areaDisabledIssueStats
=
res
.
data
;
})
this
.
annualStatisticsFun
(
res
.
data
);
});
},
//获取地图数据
getMapData
(
areaId
)
{
getMapData
(
areaId
).
then
((
res
)
=>
{
console
.
log
(
"map"
,
res
);
this
.
populationMap
([],
res
);
});
},
returnInfo
()
{
this
.
num
=
0
this
.
getMapData
(
"g450000"
);
this
.
getFivesYearMarriageLineFun
(
"450000"
);
this
.
getMarriageStatsFun
(
"450000"
);
this
.
getAgencyChildStatsListFun
(
"450000"
);
this
.
getThreeYearShjzAchieveStatsFun
(
"450000"
);
this
.
getAreaDisabledIssueStatsFun
(
"450000"
);
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
populationMap
(
dataList
,
mapList
,
max
,
min
)
{
console
.
log
(
dataList
,
mapList
);
let
map
=
echarts
.
init
(
document
.
getElementById
(
"populationMap"
));
echarts
.
registerMap
(
"GX"
,
mapList
);
map
.
setOption
({
tooltip
:
{
trigger
:
"item"
,
// formatter: '{b}
<
br
/>
{
c
}
%
(
完成数
/
指标数
)
'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
//text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
//name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#fff" },
borderWidth: 1, //区域边框宽度
borderColor: "#fff", //区域边框颜色
areaColor: "#0070BC", //默认区域颜色
},
emphasis: {
show: true,
areaColor: "#3066ba", //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
this.num++;
console.log(this.num,'
点击数字
,
2
不执行
');
if (this.num >= 2) {
//不执行
} else {
console.log("点击取值", res);
console.log("地图数组", mapList.features);
console.log("地区下标", res.dataIndex);
console.log("区域信息", mapList.features[res.dataIndex].properties);
console.log(
"区域信息地区码",
mapList.features[res.dataIndex].properties.adcode
);
this.getMapData(
"g" + mapList.features[res.dataIndex].properties.adcode
);
this.getFivesYearMarriageLineFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getMarriageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAgencyChildStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getThreeYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaDisabledIssueStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
},
//儿童福利统计
//儿童福利统计
...
@@ -559,7 +720,7 @@ export default {
...
@@ -559,7 +720,7 @@ export default {
},
},
// 残疾人两项补贴
// 残疾人两项补贴
annualStatisticsFun(data) {
annualStatisticsFun(data) {
console
.
log
(
data
)
console.log(data)
;
var chartDom = document.getElementById("annualStatistics");
var chartDom = document.getElementById("annualStatistics");
var myChart = echarts.init(chartDom, "dark");
var myChart = echarts.init(chartDom, "dark");
var option;
var option;
...
@@ -669,7 +830,7 @@ export default {
...
@@ -669,7 +830,7 @@ export default {
},
},
},
},
legend: {
legend: {
data
:
[
'贫困残疾人'
,
'重度残疾人'
],
data: [
"贫困残疾人", "重度残疾人"
],
},
},
toolbox: {
toolbox: {
show: true,
show: true,
...
@@ -793,11 +954,11 @@ export default {
...
@@ -793,11 +954,11 @@ export default {
}
}
.size24Info
{
.size24Info
{
font-size
:
24px
;
font-size
:
24px
;
color
:
#
C1BDBD
;
color
:
#
c1bdbd
;
}
}
.size16Info
{
.size16Info
{
font-size
:
16
;
font-size
:
16
;
color
:
#
C1BDBD
;
color
:
#
c1bdbd
;
}
}
.rescue
{
.rescue
{
text-align
:
center
;
text-align
:
center
;
...
@@ -842,6 +1003,12 @@ export default {
...
@@ -842,6 +1003,12 @@ export default {
display
:
flex
;
display
:
flex
;
}
}
.populationMap
{
width
:
100%
;
height
:
500px
;
background-color
:
#082c61
;
}
.wian
{
.wian
{
width
:
100%
;
width
:
100%
;
height
:
400px
;
height
:
400px
;
...
...
src/views/unified/tapSwitch/socialAssistance.vue
View file @
0ed15335
...
@@ -75,7 +75,13 @@
...
@@ -75,7 +75,13 @@
<!-- 中 -->
<!-- 中 -->
<el-col
:span=
"12"
>
<el-col
:span=
"12"
>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
<el-col
:span=
"24"
><div
class=
"wians"
></div>
</el-col>
<el-col
:span=
"24"
><div
class=
"wians"
>
<div
class=
"title"
>
当前选择:广西全区
</div>
<div
class=
"title"
@
click=
"returnInfo"
>
返回上一级
</div>
<div
class=
"socialAssistanceMap"
id=
"socialAssistanceMap"
></div>
</div>
</el-col>
</el-row>
</el-row>
<br
/>
<br
/>
<el-row
:gutter=
"20"
>
<el-row
:gutter=
"20"
>
...
@@ -126,10 +132,12 @@ import {
...
@@ -126,10 +132,12 @@ import {
getThreeYearShjzProvideStats
,
getThreeYearShjzProvideStats
,
getFivesYearShjzAchieveStats
,
getFivesYearShjzAchieveStats
,
getAreaYearShjzAchieveStats
,
getAreaYearShjzAchieveStats
,
getMapData
,
}
from
"@/api/unified/unified"
;
}
from
"@/api/unified/unified"
;
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
num
:
0
,
tableData
:
[
tableData
:
[
{
{
date
:
"2016-05-02"
,
date
:
"2016-05-02"
,
...
@@ -146,7 +154,7 @@ export default {
...
@@ -146,7 +154,7 @@ export default {
threeYearShjzProvideStats
:
{},
threeYearShjzProvideStats
:
{},
fivesYearShjzAchieveStats
:
{},
fivesYearShjzAchieveStats
:
{},
areaYearShjzAchieveStats
:
{},
areaYearShjzAchieveStats
:
{},
cityNames
:[],
cityNames
:
[],
cityAndvillagePeople
:
{},
// 五年享受低保资金人数
cityAndvillagePeople
:
{},
// 五年享受低保资金人数
cityAndvillageNum
:
{},
// 五年享受低保资金总数
cityAndvillageNum
:
{},
// 五年享受低保资金总数
};
};
...
@@ -156,10 +164,13 @@ export default {
...
@@ -156,10 +164,13 @@ export default {
this
.
getThreeYearShjzProvideStatsFun
();
this
.
getThreeYearShjzProvideStatsFun
();
this
.
getFivesYearShjzAchieveStatsFun
();
this
.
getFivesYearShjzAchieveStatsFun
();
this
.
getAreaYearShjzAchieveStatsFun
();
this
.
getAreaYearShjzAchieveStatsFun
();
this
.
getMapData
(
"g450000"
);
//默认展示广西 g450000
},
},
methods
:
{
methods
:
{
getThreeYearShjzAchieveStatsFun
()
{
getThreeYearShjzAchieveStatsFun
(
data
)
{
getThreeYearShjzAchieveStats
({}).
then
((
res
)
=>
{
getThreeYearShjzAchieveStats
({
areaCode
:
data
,
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取近三年城市农村低保发放人数统计"
);
console
.
log
(
res
,
"获取近三年城市农村低保发放人数统计"
);
this
.
threeYearShjzAchieveStats
=
res
.
data
.
admin
;
this
.
threeYearShjzAchieveStats
=
res
.
data
.
admin
;
this
.
cityAndvillagePeople
=
res
.
data
.
totalData
;
this
.
cityAndvillagePeople
=
res
.
data
.
totalData
;
...
@@ -167,8 +178,8 @@ export default {
...
@@ -167,8 +178,8 @@ export default {
});
});
},
},
getThreeYearShjzProvideStatsFun
()
{
getThreeYearShjzProvideStatsFun
(
data
)
{
getThreeYearShjzProvideStats
({}).
then
((
res
)
=>
{
getThreeYearShjzProvideStats
({
areaCode
:
data
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取近三年城市农村低保发放金额统计"
);
console
.
log
(
res
,
"获取近三年城市农村低保发放金额统计"
);
this
.
threeYearShjzProvideStats
=
res
.
data
.
admin
;
this
.
threeYearShjzProvideStats
=
res
.
data
.
admin
;
this
.
cityAndvillageNum
=
res
.
data
.
totalData
;
this
.
cityAndvillageNum
=
res
.
data
.
totalData
;
...
@@ -176,24 +187,157 @@ export default {
...
@@ -176,24 +187,157 @@ export default {
});
});
},
},
getFivesYearShjzAchieveStatsFun
()
{
getFivesYearShjzAchieveStatsFun
(
data
)
{
getFivesYearShjzAchieveStats
({}).
then
((
res
)
=>
{
getFivesYearShjzAchieveStats
({
areaCode
:
data
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"农村城市低保人数统计"
);
console
.
log
(
res
,
"农村城市低保人数统计"
);
this
.
fivesYearShjzAchieveStats
=
res
.
data
.
admin
;
this
.
fivesYearShjzAchieveStats
=
res
.
data
.
admin
;
});
});
},
},
getAreaYearShjzAchieveStatsFun
()
{
getAreaYearShjzAchieveStatsFun
(
data
)
{
getAreaYearShjzAchieveStats
({}).
then
((
res
)
=>
{
getAreaYearShjzAchieveStats
({
areaCode
:
data
}).
then
((
res
)
=>
{
console
.
log
(
res
,
"获取近三年城市农村低保发放人数统计 城市柱形图"
);
console
.
log
(
res
,
"获取近三年城市农村低保发放人数统计 城市柱形图"
);
this
.
areaYearShjzAchieveStats
=
res
.
data
;
this
.
areaYearShjzAchieveStats
=
res
.
data
;
res
.
data
.
areaList
.
forEach
(
item
=>
{
// res.data.areaList.forEach(item => {
this
.
cityNames
.
push
(
// this.cityNames.push(
item
.
name
// item.name
)
// )
});
// });
console
.
log
(
this
.
cityNames
);
// console.log(this.cityNames);
this
.
ruralAndcityFun
()
this
.
ruralAndcityFun
();
});
},
//获取地图数据
getMapData
(
areaId
)
{
getMapData
(
areaId
).
then
((
res
)
=>
{
console
.
log
(
"map"
,
res
);
this
.
socialAssistanceMap
([],
res
);
});
},
returnInfo
()
{
this
.
num
=
0
;
this
.
getMapData
(
"g450000"
);
this
.
getThreeYearShjzAchieveStatsFun
(
"450000"
);
this
.
getThreeYearShjzProvideStatsFun
(
"450000"
);
this
.
getFivesYearShjzAchieveStatsFun
(
"450000"
);
this
.
getAreaYearShjzAchieveStatsFun
(
"450000"
);
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
socialAssistanceMap
(
dataList
,
mapList
,
max
,
min
)
{
console
.
log
(
dataList
,
mapList
);
let
map
=
echarts
.
init
(
document
.
getElementById
(
"socialAssistanceMap"
));
echarts
.
registerMap
(
"GX"
,
mapList
);
map
.
setOption
({
tooltip
:
{
trigger
:
"item"
,
// formatter: '{b}
<
br
/>
{
c
}
%
(
完成数
/
指标数
)
'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
//text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
//name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#fff" },
borderWidth: 1, //区域边框宽度
borderColor: "#fff", //区域边框颜色
areaColor: "#0070BC", //默认区域颜色
},
emphasis: {
show: true,
areaColor: "#3066ba", //鼠标滑过区域颜色
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
this.num++;
console.log(this.num, "点击数字,2不执行");
if (this.num >= 2) {
//不执行
} else {
console.log("点击取值", res);
console.log("地图数组", mapList.features);
console.log("地区下标", res.dataIndex);
console.log("区域信息", mapList.features[res.dataIndex].properties);
console.log(
"区域信息地区码",
mapList.features[res.dataIndex].properties.adcode
);
this.getMapData(
"g" + mapList.features[res.dataIndex].properties.adcode
);
this.getThreeYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getThreeYearShjzProvideStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getFivesYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
});
},
},
...
@@ -526,7 +670,7 @@ export default {
...
@@ -526,7 +670,7 @@ export default {
{
{
type: "category",
type: "category",
axisTick: { show: false },
axisTick: { show: false },
data
:
this
.
cityNames
,
data: this.
areaYearShjzAchieveStats.areaList
,
axisLabel: {
axisLabel: {
textStyle: {
textStyle: {
color: "#FFFFFF",
color: "#FFFFFF",
...
@@ -665,6 +809,12 @@ export default {
...
@@ -665,6 +809,12 @@ export default {
margin-left
:
20px
;
margin-left
:
20px
;
}
}
.socialAssistanceMap
{
width
:
100%
;
height
:
500px
;
background-color
:
#082c61
;
}
.wian
{
.wian
{
width
:
100%
;
width
:
100%
;
height
:
416px
;
height
:
416px
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment