Skip to content

C
civil-front
Commit 349c9fbf by 苏咏卓
Options

接口对接

parent f089c18a
Showing with 304 additions and 119 deletions
src/api/unified/unified.js
import request from '@/utils/request'
/** -------------------- 人口专题 -------------------- **/
//儿童福利统计
export const getAgencyChildStatsList = data => {
return request({
url: 'portal/admin/stats/getAgencyChildStatsList',
method: 'POST',
data
})
}
//残疾人两项补贴
export const getAreaDisabledIssueStats = data => {
return request({
url: 'portal/admin/stats/getAreaDisabledIssueStats',
method: 'POST',
data
})
}
/** -------------------- 机构专题 -------------------- **/
//获取社会机构统计
export const getSoorganStats = data => {
return request({
url: 'portal/admin/stats/getSoorganStats',
method: 'POST',
data
})
}
/** -------------------- 婚姻 -------------------- **/
//获取地区结婚离婚人数列表
export const getAreaUnderMarriageStatsList = data => {
return request({
url: 'portal/admin/stats/getAreaUnderMarriageStatsList',
method: 'POST',
data
})
}
//获取近5年结婚走势
export const getFivesYearMarriageLine = data => {
......@@ -18,16 +60,18 @@ export const getMarriageStats = data => {
})
}
//儿童福利统计
export const getAgencyChildStatsList = data => {
/** -------------------- 社会组织 -------------------- **/
//获取社会机构区域占比统计
export const getSoorganPercentageStats = data => {
return request({
url: 'portal/admin/stats/getAgencyChildStatsList',
url: 'portal/admin/stats/getSoorganPercentageStats',
method: 'POST',
data
})
}
/** -------------------- 社会救助 -------------------- **/
//获取近三年城市农村低保发放人数统计
export const getThreeYearShjzAchieveStats = data => {
return request({
......@@ -38,11 +82,30 @@ export const getThreeYearShjzAchieveStats = data => {
})
}
//获取近三年城市农村低保发放金额统计
export const getThreeYearShjzProvideStats = data => {
return request({
url: 'portal/admin/stats/getThreeYearShjzProvideStats',
method: 'POST',
data
//残疾人两项补贴
export const getAreaDisabledIssueStats = data => {
})
}
//获取近五年城市农村低保发放人数统计
export const getFivesYearShjzAchieveStats = data => {
return request({
url: 'portal/admin/stats/getAreaDisabledIssueStats',
url: 'portal/admin/stats/getFivesYearShjzAchieveStats',
method: 'POST',
data
})
}
//获取近五年城市农村低保发放金额统计
export const getFivesYearShjzProvideStats = data => {
return request({
url: 'portal/admin/stats/getFivesYearShjzProvideStats',
method: 'POST',
data
......
src/views/unified/tapSwitch/marriage.vue
......@@ -22,28 +22,33 @@
<div class="imgBox"></div>
<div>
<div class="marriedNum">结婚总数(对)</div>
<div class="yellowNum">123</div>
<div class="yellowNum">{{ marriageStats.marryNum }}</div>
</div>
</div>
<div class="flexBox">
<div class="imgBox"></div>
<div>
<div class="marriedNum">申请离婚(对)</div>
<div class="yellowNum">123</div>
<div class="yellowNum">
{{ marriageStats.inDivorceNum }}
</div>
</div>
</div>
<div class="flexBox">
<div class="imgBox"></div>
<div>
<div class="marriedNum">成功离婚(对)</div>
<div class="yellowNum">123</div>
<div class="yellowNum">{{ marriageStats.divorceNum }}</div>
</div>
</div>
<div class="flexBox">
<div class="imgBox"></div>
<div>
<div class="marriedNum">跨地区结婚/离婚</div>
<div class="yellowNum">123</div>
<div class="yellowNum">
{{ marriageStats.crossMarryNum }} /
{{ marriageStats.crossDivorceNum }}
</div>
</div>
</div>
</div>
......@@ -74,13 +79,13 @@
<el-col :span="24">
<div class="wiansInfo">
<div class="title">婚姻统计</div>
<el-table
:data="tableData"
stripe
height="0"
:row-style="{ height: '10px' }"
:cell-style="{ height: '10px' }"
:cell-style="{ height: '10px' }"
style="width: 300px"
>
<el-table-column prop="date" label="序号" align="center">
......@@ -94,7 +99,6 @@
<el-table-column prop="address" label="时间" align="center">
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
......@@ -110,6 +114,11 @@
<script>
import * as echarts from "echarts";
import {
getFivesYearMarriageLine,
getMarriageStats,
getAreaUnderMarriageStatsList
} from "@/api/unified/unified";
export default {
data() {
return {
......@@ -125,12 +134,41 @@ export default {
address: "1517",
},
],
marriageLine: {},
marriageStats: {},
areaUnderMarriageStatsList:{}
};
},
created() {},
created() {
this.getFivesYearMarriageLineFun();
this.getMarriageStatsFun();
this.getAreaUnderMarriageStatsListFun()
},
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;
});
},
getAreaUnderMarriageStatsListFun(){
getAreaUnderMarriageStatsList({}).then(res =>{
console.log(res,'获取地区结婚离婚人数列表')
this.areaUnderMarriageStatsList = res.data
})
},
//婚姻5年趋势
mainInfo() {
mainInfo(data) {
var chartDom = document.getElementById("mainInfo");
var myChart = echarts.init(chartDom, "dark");
var option;
......@@ -158,13 +196,11 @@ export default {
bottom: "3%",
containLabel: true,
},
toolbox: {
},
toolbox: {},
xAxis: {
type: "category",
data: ["2016", "2017", "2018", "2019", "2020"],
data: data.iaLineData.dateList,
axisLabel: {
textStyle: {
color: "#FFFFFF",
......@@ -210,7 +246,7 @@ export default {
name: "结婚",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90],
data: data.iaLineData.amountList,
itemStyle: {
normal: {
color: "#3167ff",
......@@ -224,7 +260,7 @@ export default {
name: "离婚",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290],
data: data.ibLineData.amountList,
itemStyle: {
normal: {
color: "#ff4444",
......@@ -342,7 +378,7 @@ export default {
};
option = {
backgroundColor: "#082C61",
backgroundColor: "#082C61",
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -350,73 +386,72 @@ export default {
},
},
legend: {
data: ["Forest", "Steppe", "Desert", "Wetland"],
data: ["结婚", "离婚"],
},
toolbox: {
show: true,
orient: "vertical",
left: "right",
top: "center",
},
xAxis: [
{
type: "category",
axisTick: { show: false },
data: ["2012", "2013", "2014", "2015", "2016"],
data: this.areaUnderMarriageStatsList.cityList,
axisLabel: {
textStyle: {
color: "#FFFFFF",
fontSize: 12,
textStyle: {
color: "#FFFFFF",
fontSize: 12,
},
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#1b3383",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#1b3383",
},
},
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
color: "#FFFFFF",
fontSize: 12,
textStyle: {
color: "#FFFFFF",
fontSize: 12,
},
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#1b3383",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#1b3383",
},
},
},
},
],
series: [
{
name: "Forest",
name: "结婚",
type: "bar",
barGap: 0,
label: labelOption,
emphasis: {
focus: "series",
},
data: [320, 332, 301, 334, 390],
data: this.areaUnderMarriageStatsList.iaList,
itemStyle: {
normal: {
color: "#3167ff",
......@@ -427,13 +462,13 @@ export default {
},
},
{
name: "Steppe",
name: "离婚",
type: "bar",
label: labelOption,
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290],
data: this.areaUnderMarriageStatsList.ibList,
itemStyle: {
normal: {
color: "#ff4444",
......@@ -443,7 +478,6 @@ export default {
},
},
},
],
};
......@@ -453,14 +487,12 @@ export default {
mounted() {
setTimeout(() => {
this.annualStatisticsFun();
this.mainInfo();
}, 1000);
},
};
</script>
<style lang="scss" scoped>
.trend {
width: 100%;
height: 350px;
......@@ -478,7 +510,6 @@ export default {
color: #2177b9;
text-align: center;
background-color: #051d3f;
}
.flexBox {
......
src/views/unified/tapSwitch/mechanism.vue
......@@ -40,7 +40,7 @@
<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>
......@@ -57,18 +57,29 @@
<div class="wiansw">
<div class="title">社会组织</div>
<el-row :gutter="20">
<el-col :span="4">
<el-col :span="6">
<br />
<br /><br /><br />
<el-row :gutter="18">
<el-row :gutter="20">
<el-col :span="18" :offset="6">
<div class="classification">社团：1234</div>
<div class="classification">
<div class="classificationText">社团：</div>
<div class="numText">{{ soorganStats.leagueNum }}</div>
</div>
</el-col>
<el-col :span="18" :offset="6">
<div class="classification">民非：1234</div>
<div class="classification">
<div class="classificationText">民非：</div>
<div class="numText">{{ soorganStats.minFeiNum }}</div>
</div>
</el-col>
<el-col :span="18" :offset="6">
<div class="classification">基金会：1234</div>
<div class="classification">
<div class="classificationText">基金会：</div>
<div class="numText">
{{ soorganStats.foundationNum }}
</div>
</div>
</el-col>
</el-row>
</el-col>
......@@ -86,6 +97,7 @@
<script>
import * as echarts from "echarts";
import { getSoorganStats } from "@/api/unified/unified";
export default {
data() {
return {
......@@ -101,10 +113,20 @@ export default {
address: "上海市普陀区金沙江路 1517 弄",
},
],
soorganStats: {},
};
},
created() {},
created() {
this.getSoorganStatsFun();
},
methods: {
getSoorganStatsFun() {
getSoorganStats({}).then((res) => {
console.log(res, "获取社会机构统计");
this.soorganStats = res.data;
});
},
//社会组织柱形图
sociologyFun() {
var chartDom = document.getElementById("sociology");
......@@ -472,9 +494,20 @@ export default {
<style lang="scss" scoped>
.classification {
font-size: 18px;
color: #fff;
display: flex;
margin-top: 20px;
}
.classificationText {
font-size: 12px;
color: #fff;
margin-top: 6px;
text-align: center;
}
.numText {
font-size: 20px;
color: #3A92F1;
text-align: center;
}
.sociology {
......@@ -496,6 +529,7 @@ export default {
font-size: 24px;
color: #fff;
margin-top: 20px;
margin-bottom: 20px;
}
.proportion {
width: 100%;
......
src/views/unified/tapSwitch/population.vue
......@@ -215,7 +215,7 @@ export default {
grid: {
left: "3%",
right: "4%",
bottom: "3%",
bottom: "1%",
containLabel: true,
},
xAxis: {
......
src/views/unified/tapSwitch/socialAssistance.vue
......@@ -7,18 +7,18 @@
<el-col :span="24"> </el-col>
<el-col :span="24">
<div class="wian">
<div class="title">五年享受低保人数</div>
<div class="title">三年享受低保人数</div>
<div class="display">
<div>
<div class="flex">
<div class="num">2020</div>
<div class="num">{{cityAndvillagePeople.cityToatlNum}}</div>
<div class="text">人</div>
</div>
<div class="rural">农村</div>
</div>
<div>
<div class="flex">
<div class="nums">2020</div>
<div class="nums">{{cityAndvillagePeople.villageToatlNum}}</div>
<div class="texts">人</div>
</div>
<div class="city">城市</div>
......@@ -33,18 +33,18 @@
<el-col :span="24"> </el-col>
<el-col :span="24">
<div class="wian">
<div class="title">五年享受低保资金</div>
<div class="title">三年享受低保资金</div>
<div class="display">
<div>
<div class="flex">
<div class="num">2020</div>
<div class="num">{{cityAndvillageNum.cityToatlAmount}}</div>
<div class="text">万元</div>
</div>
<div class="rural">农村</div>
</div>
<div>
<div class="flex">
<div class="nums">2020</div>
<div class="nums">{{cityAndvillageNum.villageToatlAmount}}</div>
<div class="texts">万元</div>
</div>
<div class="city">城市</div>
......@@ -113,6 +113,7 @@
<script>
import * as echarts from "echarts";
import { getThreeYearShjzAchieveStats,getThreeYearShjzProvideStats,getFivesYearShjzAchieveStats } from "@/api/unified/unified";
export default {
data() {
return {
......@@ -128,12 +129,47 @@ export default {
address: "上海市普陀区金沙江路 1517 弄",
},
],
fivesYearShjzAchieveStats:{},
threeYearShjzProvideStats:{},
fivesYearShjzAchieveStats:{},
cityAndvillagePeople:{}, // 五年享受低保资金人数
cityAndvillageNum:{} // 五年享受低保资金总数
};
},
created() {},
created() {
this.getThreeYearShjzAchieveStatsFun()
this.getThreeYearShjzProvideStatsFun()
this.getFivesYearShjzAchieveStatsFun()
},
methods: {
//5年享受低保人数
fivePeopleFun() {
getThreeYearShjzAchieveStatsFun(){
getThreeYearShjzAchieveStats({}).then(res =>{
console.log(res,'获取近三年城市农村低保发放人数统计')
this.threeYearShjzAchieveStats = res.data.admin
this.cityAndvillagePeople = res.data.totalData
this.fivePeopleFun(res.data.admin)
})
},
getThreeYearShjzProvideStatsFun(){
getThreeYearShjzProvideStats({}).then(res =>{
console.log(res,'获取近三年城市农村低保发放金额统计')
this.threeYearShjzProvideStats = res.data.admin
this.cityAndvillageNum = res.data.totalData
this.fiveCapitalFun(res.data.admin)
})
},
getFivesYearShjzAchieveStatsFun(){
getFivesYearShjzAchieveStats({}).then(res =>{
console.log(res,'农村城市低保人数统计')
this.fivesYearShjzAchieveStats = res.data.admin
})
},
//3年享受低保人数
fivePeopleFun(data) {
console.log(data)
var chartDom = document.getElementById("fivePeople");
var myChart = echarts.init(chartDom, "dark");
var option;
......@@ -150,7 +186,7 @@ export default {
},
grid: {
left: "3%",
right: "0%",
right: "4%",
bottom: "3%",
containLabel: true,
},
......@@ -158,7 +194,7 @@ export default {
xAxis: {
type: "category",
data: ["2016", "2017", "2018", "2019", "2020"],
data: data.dateData,
axisLabel: {
textStyle: {
color: "#FFFFFF",
......@@ -204,7 +240,7 @@ export default {
name: "城市",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90],
data: data.cityData,
itemStyle: {
normal: {
color: "#3167ff",
......@@ -218,7 +254,7 @@ export default {
name: "农村",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290],
data: data.villageData,
itemStyle: {
normal: {
color: "#ff4444",
......@@ -234,8 +270,9 @@ export default {
option && myChart.setOption(option);
},
//5年享受低保资金
fiveCapitalFun() {
//3年享受低保资金
fiveCapitalFun(data) {
console.log(data)
var chartDom = document.getElementById("fiveCapital");
var myChart = echarts.init(chartDom, "dark");
var option;
......@@ -260,7 +297,7 @@ export default {
xAxis: {
type: "category",
data: ["2016", "2017", "2018", "2019", "2020"],
data: data.dateData,
axisLabel: {
textStyle: {
color: "#FFFFFF",
......@@ -306,7 +343,7 @@ export default {
name: "城市",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90],
data: data.cityData,
itemStyle: {
normal: {
color: "#3167ff",
......@@ -320,7 +357,7 @@ export default {
name: "农村",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290],
data: data.villageData,
itemStyle: {
normal: {
color: "#ff4444",
......@@ -563,8 +600,6 @@ export default {
},
mounted() {
setTimeout(() => {
this.fiveCapitalFun();
this.fivePeopleFun();
this.ruralAndcityFun();
}, 1000);
},
......
src/views/unified/tapSwitch/socialOrganization.vue
......@@ -12,7 +12,7 @@
<div class="text">社会组织总数</div>
<div>
<div class="borderBottom"></div>
<div class="yellowNum">40037987</div>
<div class="yellowNum">{{soorganStats.totalNum}}</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
......@@ -21,7 +21,7 @@
<div class="textLeft">社团</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">10037987</div>
<div class="textNum">{{soorganStats.leagueNum}}</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
......@@ -30,7 +30,7 @@
<div class="textLeft">民非</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">37987</div>
<div class="textNum">{{soorganStats.minFeiNum}}</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
......@@ -39,7 +39,7 @@
<div class="textLefts">基金会</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">67987</div>
<div class="textNum">{{soorganStats.foundationNum}}</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
......@@ -48,7 +48,7 @@
</el-col>
</el-row>
<br />
<el-row :gutter="20">
<el-row :gutter="18">
<el-col :span="24">
<div class="wian">
<div class="title">区域占比</div>
......@@ -76,24 +76,24 @@
<el-col :span="18" :offset="6">
<div class="classification">
<div class="classificationText">社团：</div>
<div class="numText">123456</div>
<div class="numText">{{ soorganStats.leagueNum }}</div>
</div>
</el-col>
<el-col :span="18" :offset="6">
<div class="classification">
<div class="classificationText">民非：</div>
<div class="numText">123456</div>
<div class="numText">{{ soorganStats.minFeiNum }}</div>
</div>
</el-col>
<el-col :span="18" :offset="6">
<div class="classification">
<div class="classificationText">基金会：</div>
<div class="numText">123456</div>
<div class="numText">{{ soorganStats.foundationNum }}</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="18">
<el-col :span="16">
<div id="annualStatistics" class="annualStatistics"></div>
</el-col>
</el-row>
......@@ -135,6 +135,7 @@
<script>
import * as echarts from "echarts";
import { getSoorganStats,getSoorganPercentageStats } from "@/api/unified/unified";
export default {
data() {
return {
......@@ -150,10 +151,37 @@ export default {
address: "上海市普陀区金沙江路 1517 弄",
},
],
soorganStats:{},
SoorganPercentageStats:[],
placeNames:[],
soorganStats:{}
};
},
created() {},
created() {
this.getSoorganStatsFun()
this.getSoorganPercentageStatsFun()
},
methods: {
getSoorganStatsFun(){
getSoorganStats({}).then(res =>{
console.log(res,'获取社会机构统计')
this.soorganStats = res.data
})
},
getSoorganPercentageStatsFun(){
getSoorganPercentageStats({}).then(res =>{
console.log(res.data,'获取社会机构区域占比统计')
this.SoorganPercentageStats = res.data
res.data.forEach(item => {
this.placeNames.push(
item.name
)
});
console.log(this.placeNames);
})
},
//机构占比
proportionFun() {
var chartDom = document.getElementById("proportion");
......@@ -165,23 +193,18 @@ export default {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
bottom: 10,
left: "center",
data: ["西凉", "益州", "兖州", "荆州"],
},
// legend: {
// bottom: 10,
// left: "center",
// data: this.placeNames,
// },
series: [
{
type: "pie",
radius: "65%",
radius: "50%",
center: ["50%", "50%"],
selectedMode: "single",
data: [
{ value: 735, name: "荆州" },
{ value: 510, name: "兖州" },
{ value: 434, name: "益州" },
{ value: 335, name: "西凉" },
],
data: this.SoorganPercentageStats,
emphasis: {
itemStyle: {
shadowBlur: 10,
......@@ -467,14 +490,14 @@ export default {
.borderBottom {
width: 180px;
height: 12px;
border: 2px solid #0e62bf;
border: 1px solid #0e62bf;
border-bottom: none;
}
.borderTop {
width: 100%;
height: 12px;
border: 2px solid #0e62bf;
border: 1px solid #0e62bf;
border-top: none;
}
......@@ -502,7 +525,6 @@ export default {
}
.annualStatistics {
margin-top: 10px;
width: 100%;
height: 260px;
}
......
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