Skip to content

C
civil-front
Commit f089c18a by 苏咏卓
Options

完成基本页面，对接人口专题接口

parent 05700735
Showing with 346 additions and 81 deletions
src/api/unified/unified.js
......@@ -8,3 +8,43 @@ export const getFivesYearMarriageLine = data => {
data
})
}
//获取结婚离婚人数
export const getMarriageStats = data => {
return request({
url: 'portal/admin/stats/getMarriageStats',
method: 'POST',
data
})
}
//儿童福利统计
export const getAgencyChildStatsList = data => {
return request({
url: 'portal/admin/stats/getAgencyChildStatsList',
method: 'POST',
data
})
}
//获取近三年城市农村低保发放人数统计
export const getThreeYearShjzAchieveStats = data => {
return request({
url: 'portal/admin/stats/getThreeYearShjzAchieveStats',
method: 'POST',
data
})
}
//残疾人两项补贴
export const getAreaDisabledIssueStats = data => {
return request({
url: 'portal/admin/stats/getAreaDisabledIssueStats',
method: 'POST',
data
})
}
\ No newline at end of file
src/views/unified/tapSwitch/population.vue
......@@ -10,14 +10,14 @@
<div class="title">婚姻登记分析</div>
<el-row :gutter="20" justify="center">
<el-col :span="12">
<el-row >
<el-row>
<el-col :span="6" :offset="2">
<div class="marriageImg"></div>
</el-col>
<el-col :span="16">
<div class="marriageNum">
<div class="size16">结婚总数</div>
<div class="size16">2000</div>
<div class="size16">{{ marriageStats.marryNum }}</div>
</div>
</el-col>
</el-row>
......@@ -30,7 +30,9 @@
<el-col :span="18">
<div class="marriageNum">
<div class="size16">结婚总数</div>
<div class="size16">2000</div>
<div class="size16">
{{ marriageStats.inDivorceNum }}
</div>
</div>
</el-col>
</el-row>
......@@ -91,13 +93,13 @@
<el-row :gutter="20">
<el-col :span="12">
<div class="rescue">
<div class="size24">2000</div>
<div class="size24">{{ threeYeartTotalData.cityToatlNum }}</div>
<div class="size16">城市</div>
</div>
</el-col>
<el-col :span="12">
<div class="rescue">
<div class="size24">1000</div>
<div class="size24">{{ threeYeartTotalData.villageToatlNum }}</div>
<div class="size16">农村</div>
</div>
</el-col>
......@@ -126,38 +128,98 @@
<script>
import * as echarts from "echarts";
import {
getFivesYearMarriageLine,
getMarriageStats,
getAgencyChildStatsList,
getThreeYearShjzAchieveStats,
getAreaDisabledIssueStats
} from "@/api/unified/unified";
export default {
data() {
return {};
return {
marriageLine: {},
marriageStats: {},
threeYearShjzAchieveStats: {},
threeYeartTotalData: {},
areaDisabledIssueStats:{}
};
},
created() {
this.getFivesYearMarriageLineFun();
this.getMarriageStatsFun();
this.getAgencyChildStatsListFun();
this.getThreeYearShjzAchieveStatsFun();
this.getAreaDisabledIssueStatsFun()
},
created() {},
methods: {
getFivesYearMarriageLineFun() {
getFivesYearMarriageLine({}).then((res) => {
console.log(res, "获取近5年结婚走势");
this.marriageLine = res.data.admin;
this.mainInfo(res.data.admin);
});
},
getMarriageStatsFun() {
getMarriageStats({}).then((res) => {
console.log(res, "获取结婚离婚人数");
this.marriageStats = res.data;
});
},
getAgencyChildStatsListFun() {
getAgencyChildStatsList({}).then((res) => {
console.log(res, "儿童福利统计");
this.agencyChildStatsList = res.data;
});
},
getThreeYearShjzAchieveStatsFun() {
getThreeYearShjzAchieveStats({}).then((res) => {
console.log(res, "获取近三年城市农村低保发放人数统计");
this.threeYearShjzAchieveStats = res.data.admin;
this.threeYeartTotalData = res.data.totalData;
this.rescueTargetFun(res.data.admin);
});
},
getAreaDisabledIssueStatsFun(){
getAreaDisabledIssueStats({
year:2021
}).then(res =>{
console.log(res,'残疾人两项补贴')
this.areaDisabledIssueStats = res.data
this.annualStatisticsFun(res.data)
})
},
//儿童机构柱形图
orphanFun(){
var chartDom = document.getElementById('orphan');
var myChart = echarts.init(chartDom, "dark");
var option;
orphanFun() {
var chartDom = document.getElementById("orphan");
var myChart = echarts.init(chartDom, "dark");
var option;
option = {
option = {
backgroundColor: "#082C61",
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'shadow'
}
type: "shadow",
},
},
legend: {
data: ['孤儿', '事实无人领养']
data: ["孤儿", "事实无人领养"],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: 'value',
type: "value",
boundaryGap: false,
boundaryGap: [0, 0.01],
axisLabel: {
......@@ -180,8 +242,8 @@ option = {
},
},
yAxis: {
type: 'category',
data: ['巴西', '印尼', '美国', '印度', '桂林', '南宁'],
type: "category",
data: ["巴西", "印尼", "美国", "印度", "桂林", "南宁"],
axisLabel: {
textStyle: {
color: "#FFFFFF",
......@@ -203,8 +265,8 @@ option = {
},
series: [
{
name: '孤儿',
type: 'bar',
name: "孤儿",
type: "bar",
data: [18203, 23489, 29034, 104970, 131744, 63023],
itemStyle: {
normal: {
......@@ -216,8 +278,8 @@ option = {
},
},
{
name: '事实无人领养',
type: 'bar',
name: "事实无人领养",
type: "bar",
data: [19325, 23438, 31000, 121594, 134141, 68180],
itemStyle: {
normal: {
......@@ -227,14 +289,15 @@ option = {
},
},
},
}
]
};
},
],
};
option && myChart.setOption(option);
option && myChart.setOption(option);
},
// 婚姻折线
mainInfo() {
mainInfo(data) {
console.log(data);
var chartDom = document.getElementById("marriage");
var myChart = echarts.init(chartDom, "dark");
var option;
......@@ -259,7 +322,7 @@ option && myChart.setOption(option);
},
grid: {
left: "3%",
right: "4%",
right: "1%",
bottom: "3%",
containLabel: true,
},
......@@ -267,7 +330,7 @@ option && myChart.setOption(option);
xAxis: {
type: "category",
data: ["2016", "2017", "2018", "2019", "2020"],
data: data.iaLineData.dateList,
axisLabel: {
textStyle: {
color: "#FFFFFF",
......@@ -313,7 +376,7 @@ option && myChart.setOption(option);
name: "结婚",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90],
data: data.iaLineData.amountList,
itemStyle: {
normal: {
color: "#3167ff",
......@@ -327,7 +390,7 @@ option && myChart.setOption(option);
name: "离婚",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290],
data: data.ibLineData.amountList,
itemStyle: {
normal: {
color: "#ff4444",
......@@ -342,8 +405,9 @@ option && myChart.setOption(option);
option && myChart.setOption(option);
},
// 救助折线
rescueTargetFun() {
// 社会救助对象统计
rescueTargetFun(data) {
console.log(data);
var chartDom = document.getElementById("rescueTarget");
var myChart = echarts.init(chartDom, "dark");
var option;
......@@ -376,7 +440,7 @@ option && myChart.setOption(option);
xAxis: {
type: "category",
data: ["2018", "2019", "2020"],
data: data.dateData,
axisLabel: {
textStyle: {
color: "#FFFFFF",
......@@ -422,7 +486,7 @@ option && myChart.setOption(option);
name: "城市",
type: "line",
stack: "总量",
data: [101, 134, 90],
data: data.cityData,
itemStyle: {
normal: {
color: "#3167ff",
......@@ -436,7 +500,7 @@ option && myChart.setOption(option);
name: "农村",
type: "line",
stack: "总量",
data: [191, 234, 290],
data: data.villageData,
itemStyle: {
normal: {
color: "#ff4444",
......@@ -493,8 +557,9 @@ option && myChart.setOption(option);
option && myChart.setOption(option);
},
// 柱形图
annualStatisticsFun() {
// 残疾人两项补贴
annualStatisticsFun(data) {
console.log(data)
var chartDom = document.getElementById("annualStatistics");
var myChart = echarts.init(chartDom, "dark");
var option;
......@@ -604,7 +669,7 @@ option && myChart.setOption(option);
},
},
legend: {
data: ["Forest", "Steppe", "Desert", "Wetland"],
data: ['贫困残疾人','重度残疾人'],
},
toolbox: {
show: true,
......@@ -616,7 +681,7 @@ option && myChart.setOption(option);
{
type: "category",
axisTick: { show: false },
data: ["2012", "2013", "2014", "2015", "2016"],
data: data.areaList,
axisLabel: {
textStyle: {
color: "#FFFFFF",
......@@ -662,14 +727,14 @@ option && myChart.setOption(option);
],
series: [
{
name: "Forest",
name: "贫困残疾人",
type: "bar",
barGap: 0,
label: labelOption,
emphasis: {
focus: "series",
},
data: [320, 332, 301, 334, 390],
data: data.difficultIssueNumList,
itemStyle: {
normal: {
color: "#3167ff",
......@@ -680,13 +745,13 @@ option && myChart.setOption(option);
},
},
{
name: "Steppe",
name: "重度残疾人",
type: "bar",
label: labelOption,
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290],
data: data.severeIssueNumList,
itemStyle: {
normal: {
color: "#ff4444",
......@@ -705,9 +770,6 @@ option && myChart.setOption(option);
mounted() {
setTimeout(() => {
this.orphanFun();
this.mainInfo();
this.rescueTargetFun();
this.annualStatisticsFun();
this.proportionFun();
}, 1000);
},
......@@ -715,7 +777,7 @@ option && myChart.setOption(option);
</script>
<style lang="scss" scoped>
.orphan{
.orphan {
width: 100%;
height: 300px;
}
......@@ -735,7 +797,7 @@ option && myChart.setOption(option);
margin-top: 20px;
font-size: 16px;
}
.marriageImg{
.marriageImg {
margin-top: 10px;
width: 50px;
......
src/views/unified/tapSwitch/socialOrganization.vue
......@@ -7,7 +7,43 @@
<el-col :span="24"> </el-col>
<el-col :span="24">
<div class="wian">
<div class="title">婚姻统计</div>
<div class="title">社会组织汇总</div>
<div class="socialOrganizationFlex">
<div class="text">社会组织总数</div>
<div>
<div class="borderBottom"></div>
<div class="yellowNum">40037987</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
</div>
<div class="socialOrganizationFlex">
<div class="textLeft">社团</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">10037987</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
</div>
<div class="socialOrganizationFlex">
<div class="textLeft">民非</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">37987</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
</div>
<div class="socialOrganizationFlex">
<div class="textLefts">基金会</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">67987</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
</div>
</div>
</el-col>
</el-row>
......@@ -34,17 +70,26 @@
<div class="title">年度按月份统计</div>
<el-row :gutter="20">
<el-col :span="6">
<br>
<br><br><br>
<br />
<br /><br /><br />
<el-row :gutter="20">
<el-col :span="18" :offset="6">
<div class="classification">社团：</div>
<div class="classification">
<div class="classificationText">社团：</div>
<div class="numText">123456</div>
</div>
</el-col>
<el-col :span="18" :offset="6">
<div class="classification">民非：</div>
<div class="classification">
<div class="classificationText">民非：</div>
<div class="numText">123456</div>
</div>
</el-col>
<el-col :span="18" :offset="6">
<div class="classification">基金会：</div>
<div class="classification">
<div class="classificationText">基金会：</div>
<div class="numText">123456</div>
</div>
</el-col>
</el-row>
</el-col>
......@@ -66,13 +111,13 @@
<el-table
:data="tableData"
stripe
style="width: 300px; background-color: #051d3f; color: #2177b9"
style="width: 100%; background-color: #051d3f; color: #2177b9"
>
<el-table-column prop="date" label="区域名称" align="center">
<el-table-column prop="date" label="序号" align="center">
</el-table-column>
<el-table-column prop="name" label="结婚总数" align="center">
<el-table-column prop="name" label="地区" align="center">
</el-table-column>
<el-table-column prop="address" label="离婚整数" align="center">
<el-table-column prop="address" label="组织名称/代码" align="center">
</el-table-column>
</el-table>
</div>
......@@ -369,16 +414,93 @@ export default {
</script>
<style lang="scss" scoped>
.classification{
font-size: 18px;
.socialOrganizationFlex {
display: flex;
margin-top: 30px;
margin-left: 20px;
}
.text {
font-size: 12px;
color: #0e62bf;
margin-top: 16px;
}
.textLeft {
font-size: 12px;
color: #0e62bf;
margin-top: 16px;
margin-left: 48px;
}
.textLefts {
font-size: 12px;
color: #0e62bf;
margin-top: 16px;
margin-left: 36px;
}
.textNum {
width: 180px;
font-size: 24px;
text-align: center;
color: #fff;
font-weight: bold;
}
.yellowNum {
width: 180px;
font-size: 24px;
text-align: center;
color: #ffff20;
font-weight: bold;
}
.textNums {
width: 180px;
font-size: 24px;
text-align: center;
color: #c1bdbd;
font-weight: bold;
}
.borderBottom {
width: 180px;
height: 12px;
border: 2px solid #0e62bf;
border-bottom: none;
}
.borderTop {
width: 100%;
height: 12px;
border: 2px solid #0e62bf;
border-top: none;
}
.classification {
display: flex;
margin-top: 20px;
}
.classificationText {
font-size: 12px;
color: #fff;
margin: 10px;
margin-top: 6px;
text-align: center;
}
.numText {
font-size: 20px;
color: #3A92F1;
text-align: center;
}
.proportion {
width: 100%;
height: 350px;
}
.annualStatistics {
margin-top: 10px;
width: 100%;
......
src/views/unified/tapSwitch/subsidies.vue
......@@ -34,8 +34,26 @@
<el-col :span="24">
<div class="wian">
<div class="title">残疾人比例</div>
<div class="subsidiesBox">
<div class="subsidiesText">一级残疾</div>
<div class="subsidiesText">总数299884</div>
<div class="subsidiesText">贫困18%</div>
</div>
<div class="subsidiesBox">
<div class="subsidiesText">二级残疾</div>
<div class="subsidiesText">总数299884</div>
<div class="subsidiesText">贫困28%</div>
</div>
<div class="subsidiesBox">
<div class="subsidiesText">三级残疾</div>
<div class="subsidiesText">总数299884</div>
<div class="subsidiesText">贫困38%</div>
</div>
<div class="subsidiesBox">
<div class="subsidiesText">四级残疾</div>
<div class="subsidiesText">总数299884</div>
<div class="subsidiesText">贫困48%</div>
</div>
</div>
</el-col>
</el-row>
......@@ -74,13 +92,17 @@
<el-table
:data="tableData"
stripe
style="width: 300px; background-color: #051d3f; color: #2177b9"
style="width: 100%; background-color: #051d3f; color: #2177b9"
>
<el-table-column prop="date" label="区域名称" align="center">
<el-table-column prop="date" label="序号" align="center" width="50px">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center" width="50px">
</el-table-column>
<el-table-column prop="name" label="结婚总数" align="center">
<el-table-column prop="address" label="所在地" align="center">
</el-table-column>
<el-table-column prop="address" label="离婚整数" align="center">
<el-table-column prop="date" label="残疾等级" align="center" >
</el-table-column>
<el-table-column prop="date" label="补助标准" align="center">
</el-table-column>
</el-table>
</div>
......@@ -103,12 +125,12 @@ export default {
return {
tableData: [
{
date: "2016-05-02",
date: "1",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
date: "2",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
......@@ -219,10 +241,6 @@ export default {
option && myChart.setOption(option);
},
// 农村城市统计
ruralAndcityFun() {
var chartDom = document.getElementById("ruralAndcity");
......@@ -415,7 +433,10 @@ export default {
emphasis: {
focus: "series",
},
data: [320, 332, 301, 334, 390,220, 182, 191, 234, 290,220, 182, 191, 234, 290,220, 182, 191, 234, 290],
data: [
320, 332, 301, 334, 390, 220, 182, 191, 234, 290, 220, 182, 191,
234, 290, 220, 182, 191, 234, 290,
],
itemStyle: {
normal: {
color: "#3167ff",
......@@ -432,7 +453,10 @@ export default {
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290,220, 182, 191, 234, 290,220, 182, 191,220, 182, 191, 234, 290],
data: [
220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 220, 182, 191,
220, 182, 191, 234, 290,
],
itemStyle: {
normal: {
color: "#ff4444",
......@@ -578,4 +602,19 @@ export default {
width: 100%;
height: 300px;
}
.subsidiesBox {
width: 80%;
display: flex;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid #526787;
margin: 60px 30px;
}
.subsidiesText {
font-size: 16px;
color: #fff;
margin-bottom: 6px;
}
</style>
\ No newline at end of file
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