Skip to content

C
civil-front
Commit f0c0d186 by 苏咏卓
Options

更新

parent fcd18c76
Showing with 64 additions and 36 deletions
src/api/population/population.js
...@@ -2,9 +2,9 @@ import request from '@/utils/request' ...@@ -2,9 +2,9 @@ import request from '@/utils/request'
//获取近5年结婚离婚走势 //获取近5年结婚离婚走势
export const getMarryPerYear = data => { export const getFivesYearMarriageLine = data => {
return request({ return request({
url: 'portal/admin/stats/getMarryPerYear', url: 'portal/admin/stats/getFivesYearMarriageLine',
method: 'POST', method: 'POST',
data data
}) })
......
src/views/population/population.vue
...@@ -25,28 +25,35 @@ ...@@ -25,28 +25,35 @@
<div class="imgBox"></div> <div class="imgBox"></div>
<div> <div>
<div class="marriedNum">结婚总数(对)</div> <div class="marriedNum">结婚总数(对)</div>
<div class="yellowNum">{{marriageStatistics.marryNum}}</div> <div class="yellowNum">{{ marriageStatistics.marryNum }}</div>
</div> </div>
</div> </div>
<div class="flexBox"> <div class="flexBox">
<div class="imgBox"></div> <div class="imgBox"></div>
<div> <div>
<div class="marriedNum">申请离婚(对)</div> <div class="marriedNum">申请离婚(对)</div>
<div class="yellowNum">{{marriageStatistics.inDivorceNum}}</div> <div class="yellowNum">
{{ marriageStatistics.inDivorceNum }}
</div>
</div> </div>
</div> </div>
<div class="flexBox"> <div class="flexBox">
<div class="imgBox"></div> <div class="imgBox"></div>
<div> <div>
<div class="marriedNum">成功离婚(对)</div> <div class="marriedNum">成功离婚(对)</div>
<div class="yellowNum">{{marriageStatistics.divorceNum}}</div> <div class="yellowNum">
{{ marriageStatistics.divorceNum }}
</div>
</div> </div>
</div> </div>
<div class="flexBox"> <div class="flexBox">
<div class="imgBox"></div> <div class="imgBox"></div>
<div> <div>
<div class="marriedNum">跨地区结婚/离婚</div> <div class="marriedNum">跨地区结婚/离婚</div>
<div class="yellowNum">{{marriageStatistics.crossMarryNum}} / {{marriageStatistics.crossDivorceNum}}</div> <div class="yellowNum">
{{ marriageStatistics.crossMarryNum }} /
{{ marriageStatistics.crossDivorceNum }}
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -124,7 +131,11 @@ ...@@ -124,7 +131,11 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import { getMarryPerYear,getMarriageStats,getDemographicsLineData } from "@/api/population/population"; import {
getFivesYearMarriageLine,
getMarriageStats,
getDemographicsLineData,
} from "@/api/population/population";
export default { export default {
data() { data() {
return { return {
...@@ -143,39 +154,42 @@ export default { ...@@ -143,39 +154,42 @@ export default {
}, },
], ],
value: "", value: "",
marriageMovements:[], marriageMovements: [],
marriageStatistics:{}, marriageStatistics: {},
}; };
}, },
created() { created() {
this.getMarryPerYearFun() this.getFivesYearMarriageLineFun();
this.getMarriageStatsFun() this.getMarriageStatsFun();
this.getDemographicsLineDataFun() this.getDemographicsLineDataFun();
}, },
methods: { methods: {
getMarryPerYearFun(){ getFivesYearMarriageLineFun() {
getMarryPerYear({ areaCode: 450000000000 }).then(res =>{ getFivesYearMarriageLine({ areaCode: 450000000000 }).then((res) => {
console.log(res,'获取近5年结婚离婚走势') console.log(res, "获取近5年结婚离婚走势");
this.marriageMovements = res.data this.marriageMovements = res.data.admin;
}) this.married(res.data.admin);
this.divorce(res.data.admin);
});
}, },
getMarriageStatsFun(){ getMarriageStatsFun() {
getMarriageStats({}).then(res =>{ getMarriageStats({}).then((res) => {
console.log(res,'获取结婚离婚人数') console.log(res, "获取结婚离婚人数");
this.marriageStatistics = res.data this.marriageStatistics = res.data;
}) });
}, },
getDemographicsLineDataFun(){ getDemographicsLineDataFun() {
getDemographicsLineData().then(res =>{ getDemographicsLineData().then((res) => {
console.log(res,'获取人口统计走势图') console.log(res, "获取人口统计走势图");
this.demographicNum = res.data this.demographicNum = res.data;
}) });
}, },
// 结婚 // 结婚
married() { married(data) {
console.log(data, "====================== ");
var chartDom = document.getElementById("married"); var chartDom = document.getElementById("married");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom, "dark");
var option; var option;
...@@ -187,16 +201,22 @@ export default { ...@@ -187,16 +201,22 @@ export default {
left: "3%", left: "3%",
text: "近五年结婚走向", text: "近五年结婚走向",
}, },
grid: {
left: "4%",
right: "1%",
bottom: "3%",
containLabel: true,
},
xAxis: { xAxis: {
type: "category", type: "category",
data: this.marriageMovements.iaLineData.dateList, data: data.iaLineData.dateList,
}, },
yAxis: { yAxis: {
type: "value", type: "value",
}, },
series: [ series: [
{ {
data: this.marriageMovements.iaLineData.amountList, data: data.iaLineData.amountList,
type: "line", type: "line",
}, },
], ],
...@@ -206,7 +226,8 @@ export default { ...@@ -206,7 +226,8 @@ export default {
}, },
// 离婚 // 离婚
divorce() { divorce(data) {
console.log(data, "====================== ");
var chartDom = document.getElementById("divorce"); var chartDom = document.getElementById("divorce");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom, "dark");
var option; var option;
...@@ -218,16 +239,22 @@ export default { ...@@ -218,16 +239,22 @@ export default {
left: "3%", left: "3%",
text: "近五年离婚走向", text: "近五年离婚走向",
}, },
grid: {
left: "4%",
right: "1%",
bottom: "3%",
containLabel: true,
},
xAxis: { xAxis: {
type: "category", type: "category",
data: this.marriageMovements.ibLineData.dateList, data: data.ibLineData.dateList,
}, },
yAxis: { yAxis: {
type: "value", type: "value",
}, },
series: [ series: [
{ {
data: this.marriageMovements.ibLineData.amountList, data: data.ibLineData.amountList,
type: "line", type: "line",
}, },
], ],
...@@ -486,8 +513,7 @@ export default { ...@@ -486,8 +513,7 @@ export default {
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.married(); this.getFivesYearMarriageLineFun();
this.divorce();
this.socialAssistance(); this.socialAssistance();
this.childWelfare(); this.childWelfare();
this.funeral(); this.funeral();
...@@ -502,6 +528,7 @@ export default { ...@@ -502,6 +528,7 @@ export default {
width: 100%; width: 100%;
height: 1120px; height: 1120px;
background-color: #0b0f4e; background-color: #0b0f4e;
padding: 10px 20px 0 20px;
} }
.top { .top {
...@@ -606,7 +633,8 @@ export default { ...@@ -606,7 +633,8 @@ export default {
} }
.marriageStatistics { .marriageStatistics {
width: 100%;
height: 300px; height: 300px;
border: 2px solid red; background-color: #071453;
} }
</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