Skip to content

C
civil-front
Commit 9ee092ed by 苏咏卓
Options

更新

parent b7119885
Showing with 758 additions and 18 deletions
.env.development
ENV = 'development'
# 接口地址
VUE_APP_BASE_API = 'http://192.168.0.29:9888'
VUE_APP_WS_API = 'ws://192.168.0.29:9888'
VUE_APP_BASE_API = 'http://172.18.99.141:9888'
VUE_APP_WS_API = 'ws://172.18.99.141:9888'
# 是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true
.eslintignore
......@@ -2,3 +2,4 @@ build/*.js
src/assets
public
dist
src
\ No newline at end of file
src/api/marriage/marriage.js 0 → 100644
import request from '@/utils/request'
//获取结婚离婚人数
export const getMarriageStats = data =>{
return request({
url:'portal/admin/stats/getMarriageStats',
method: 'POST',
data
})
}
\ No newline at end of file
src/api/population/population.js 0 → 100644
import request from '@/utils/request'
//获取近5年结婚离婚走势
export const getMarryPerYear = data => {
return request({
url: 'portal/admin/stats/getMarryPerYear',
method: 'POST',
data
})
}
//获取结婚离婚人数
export const getMarriageStats = data => {
return request({
url: 'portal/admin/stats/getMarriageStats',
method: 'POST',
data
})
}
//获取人口统计走势图
export const getDemographicsLineData = data => {
return request({
url: 'portal/admin/stats/getDemographicsLineData',
method: 'GET',
data
})
}
\ No newline at end of file
src/views/comprehensive/comprehensive.vue
......@@ -8,17 +8,17 @@
<div class="flexInfo">
<div>
<div class="month">本月农村</div>
<div class="num">547330</div>
<div class="blueNum">547330</div>
<div class="lift">-0.18%</div>
</div>
<div>
<div class="month">本月城镇</div>
<div class="num">61197</div>
<div class="blueNum">61197</div>
<div class="lift">-0.18%</div>
</div>
<div>
<div class="month">本月低边</div>
<div class="num">179368</div>
<div class="blueNum">179368</div>
<div class="lift">-0.18%</div>
</div>
</div>
......@@ -171,7 +171,7 @@ export default {
margin-bottom: 10px;
}
.num {
.blueNum {
font-size: 24px;
color: #3396fb;
text-align: center;
......
src/views/funeral/cremation.vue
......@@ -210,7 +210,7 @@ export default {
<style lang="scss">
.box {
width: 300px;
width: 100%;
height: 300px;
}
</style>
\ No newline at end of file
src/views/marriage/marriage.vue
......@@ -5,7 +5,7 @@
<el-card shadow="hover">
<div class="titles">结婚人数</div>
<div class="flex">
<div class="num">468</div>
<div class="num">{{marriageNum.crossMarryNum}}</div>
<div class="right">对</div>
</div>
</el-card>
......@@ -14,11 +14,16 @@
<el-card shadow="hover">
<div class="titles">离婚人数</div>
<div class="flex">
<div class="num">216</div>
<div class="num">{{marriageNum.crossDivorceNum}}</div>
<div class="right">对</div>
</div>
</el-card>
</el-col>
<el-col :span="16">
<el-card shadow="hover">
<div class="sss" id="1"></div>
</el-card>
</el-col>
</el-row>
<br />
<el-row>
......@@ -102,10 +107,13 @@
</template>
<script>
import * as echarts from "echarts";
import { getMarriageStats,getMarryPerYear } from "@/api/marriage/marriage";
export default {
data() {
return {
tableData: [],
marriageNum: {},
pageInfo: {
page: 1,
size: 10,
......@@ -115,7 +123,72 @@ export default {
value1: "",
};
},
created() {
this.getMarriageStatsFun();
},
methods: {
getMarriageStatsFun() {
getMarriageStats({ areaCode: 450000000000 }).then((res) => {
console.log(res, "获取结婚离婚人数");
this.marriageNum = res.data;
});
},
marriage() {
var chartDom = document.getElementById("1");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "2021年(冷静期对数与离婚期对数)",
},
tooltip: {
trigger: "axis",
},
legend: {
top: "8%",
left: "center",
data: ["冷静期", "离婚期"],
},
grid: {
left: "3%",
right: "4%",
bottom: "1%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["一月", "二月", "三月", "四月", "五月", "六月"],
},
yAxis: {
type: "value",
},
series: [
{
name: "冷静期",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "离婚期",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290, 330, 310],
},
],
};
option && myChart.setOption(option);
},
// 显示数量切换
sizeChange(e) {
this.pageInfo.size = e;
......@@ -129,6 +202,11 @@ export default {
this.pageImageAlbumFun();
},
},
mounted() {
setTimeout(() => {
this.marriage();
}, 500);
},
};
</script>
......@@ -150,8 +228,13 @@ export default {
.right {
font-size: 16px;
color: #F0B37B;
color: #f0b37b;
margin-top: 18px;
margin-left: 6px;
}
.sss {
width: 100%;
height: 300px;
}
</style>
\ No newline at end of file
src/views/population/population.vue 0 → 100644
<template>
<div class="page">
<el-row>
<el-col :span="8">
<div class="horizontal"></div>
</el-col>
<el-col :span="8">
<div class="topTitle">广西民政人口专题分析</div>
</el-col>
<el-col :span="8">
<div class="horizontal"></div>
</el-col>
</el-row>
<br />
<el-row :gutter="18">
<el-col :span="6">
<el-row :gutter="18">
<el-col :span="24">
<div class="marriageStatistics">
<div class="flexBox">
<div class="imgBox"></div>
<div>
<div class="marriedNum">结婚总数(对)</div>
<div class="yellowNum">{{marriageStatistics.marryNum}}</div>
</div>
</div>
<div class="flexBox">
<div class="imgBox"></div>
<div>
<div class="marriedNum">申请离婚(对)</div>
<div class="yellowNum">{{marriageStatistics.inDivorceNum}}</div>
</div>
</div>
<div class="flexBox">
<div class="imgBox"></div>
<div>
<div class="marriedNum">成功离婚(对)</div>
<div class="yellowNum">{{marriageStatistics.divorceNum}}</div>
</div>
</div>
<div class="flexBox">
<div class="imgBox"></div>
<div>
<div class="marriedNum">跨地区结婚/离婚</div>
<div class="yellowNum">{{marriageStatistics.crossMarryNum}} / {{marriageStatistics.crossDivorceNum}}</div>
</div>
</div>
</div>
</el-col>
<el-col :span="24">
<br />
<div class="wian">
<div class="broken" id="married"></div>
</div>
</el-col>
<el-col :span="24">
<br />
<div class="wian">
<div class="broken" id="divorce"></div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-row :gutter="18">
<el-col :span="12">
<div class="wian">
<div class="socialAssistanceInfo">社会救助总数(万)</div>
<div class="socialAssistanceTitle">5,6969</div>
</div>
</el-col>
<el-col :span="12">
<div class="wian">
<el-select v-model="value" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-col>
</el-row>
<br />
<div class="wianws">
<div class="socialAssistance" id="socialAssistance"></div>
</div>
</el-col>
<el-col :span="6">
<el-row :gutter="18">
<el-col :span="24">
<div class="wian">
<div class="childWelfare" id="childWelfare"></div>
</div>
</el-col>
<el-col :span="24">
<br />
<div class="wian">
<div class="funeral" id="funeral"></div>
</div>
</el-col>
<el-col :span="24">
<br />
<div class="wian">
<div class="demographic" id="demographic"></div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from "echarts";
import { getMarryPerYear,getMarriageStats,getDemographicsLineData } from "@/api/population/population";
export default {
data() {
return {
options: [
{
value: "选项1",
label: "南宁市",
},
{
value: "选项2",
label: "柳州市",
},
{
value: "选项3",
label: "桂林市",
},
],
value: "",
marriageMovements:[],
marriageStatistics:{},
};
},
created() {
this.getMarryPerYearFun()
this.getMarriageStatsFun()
this.getDemographicsLineDataFun()
},
methods: {
getMarryPerYearFun(){
getMarryPerYear({ areaCode: 450000000000 }).then(res =>{
console.log(res,'获取近5年结婚离婚走势')
this.marriageMovements = res.data
})
},
getMarriageStatsFun(){
getMarriageStats({}).then(res =>{
console.log(res,'获取结婚离婚人数')
this.marriageStatistics = res.data
})
},
getDemographicsLineDataFun(){
getDemographicsLineData().then(res =>{
console.log(res,'获取人口统计走势图')
this.demographicNum = res.data
})
},
// 结婚
married() {
var chartDom = document.getElementById("married");
var myChart = echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "#071453",
title: {
top: "3%",
left: "3%",
text: "近五年结婚走向",
},
xAxis: {
type: "category",
data: this.marriageMovements.iaLineData.dateList,
},
yAxis: {
type: "value",
},
series: [
{
data: this.marriageMovements.iaLineData.amountList,
type: "line",
},
],
};
option && myChart.setOption(option);
},
// 离婚
divorce() {
var chartDom = document.getElementById("divorce");
var myChart = echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "#071453",
title: {
top: "3%",
left: "3%",
text: "近五年离婚走向",
},
xAxis: {
type: "category",
data: this.marriageMovements.ibLineData.dateList,
},
yAxis: {
type: "value",
},
series: [
{
data: this.marriageMovements.ibLineData.amountList,
type: "line",
},
],
};
option && myChart.setOption(option);
},
// 社会救助走势
socialAssistance() {
var chartDom = document.getElementById("socialAssistance");
var myChart = echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "#071453",
title: {
top: "3%",
left: "3%",
text: "社会救助走势",
},
tooltip: {
trigger: "axis",
},
legend: {
top: "3%",
data: ["城市救助", "农村救助", "临时救助", "紧急救助", "贫困救助"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["2016", "2017", "2018", "2019", "2020"],
},
yAxis: {
type: "value",
},
series: [
{
name: "城市救助",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "农村救助",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "临时救助",
type: "line",
stack: "总量",
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: "紧急救助",
type: "line",
stack: "总量",
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: "贫困救助",
type: "line",
stack: "总量",
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
option && myChart.setOption(option);
},
// 儿童福利统计
childWelfare() {
var chartDom = document.getElementById("childWelfare");
var myChart = echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "#071453",
title: {
text: "儿童福利统计",
left: "center",
top: 20,
textStyle: {
color: "#ccc",
},
},
tooltip: {
trigger: "item",
},
visualMap: {
show: false,
min: 80,
max: 800,
inRange: {
colorLightness: [0, 1],
},
},
series: [
{
name: "儿童福利统计",
type: "pie",
radius: "55%",
center: ["50%", "50%"],
data: [
{ value: 335, name: "No.5" },
{ value: 310, name: "其他" },
{ value: 274, name: "无人抚养" },
{ value: 235, name: "弃养" },
{ value: 400, name: "机构抚养" },
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: "radius",
label: {
color: "rgba(255, 255, 255, 0.3)",
},
labelLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
},
smooth: 0.2,
length: 10,
length2: 20,
},
itemStyle: {
color: "#c23531",
shadowBlur: 200,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
animationType: "scale",
animationEasing: "elasticOut",
animationDelay: function (idx) {
return Math.random() * 200;
},
},
],
};
option && myChart.setOption(option);
},
// 殡葬
funeral() {
var chartDom = document.getElementById("funeral");
var myChart = echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "#071453",
title: {
top: "3%",
left: "3%",
text: "殡葬火化率",
},
xAxis: {
type: "category",
data: ["2016", "2017", "2018", "2019", "2020"],
},
yAxis: {
type: "value",
},
series: [
{
data: [150, 230, 224, 218, 135],
type: "line",
},
],
};
option && myChart.setOption(option);
},
// 人口统计
demographic() {
var chartDom = document.getElementById("demographic");
var myChart = echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "#071453",
title: {
top: "3%",
left: "3%",
text: "人口统计",
},
tooltip: {
trigger: "axis",
},
legend: {
top: "10%",
left: "center",
data: ["总人口", "年出生人口", "年死亡人口"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: this.demographicNum.dateList,
},
yAxis: {
type: "value",
},
series: [
{
name: "总人口",
type: "line",
stack: "总量",
data: this.demographicNum.totalList,
},
{
name: "年出生人口",
type: "line",
stack: "总量",
data: [1999999,1999999],
},
{
name: "年死亡人口",
type: "line",
stack: "总量",
data: [],
},
],
};
option && myChart.setOption(option);
},
},
mounted() {
setTimeout(() => {
this.married();
this.divorce();
this.socialAssistance();
this.childWelfare();
this.funeral();
this.demographic();
}, 500);
},
};
</script>
<style lang="scss" scoped>
.page {
width: 100%;
height: 1120px;
background-color: #0b0f4e;
}
.top {
display: flex;
}
.horizontal {
width: 100%;
height: 25px;
border-bottom: 1px solid #3974c7;
}
.vertical {
height: 32px;
border-left: 1px solid #3974c7;
margin-top: 8px;
}
.topTitle {
text-align: center;
padding: 0 10px;
font-size: 40px;
color: #62b2d2;
// margin: 0 6px;
border-right: 2px solid #2f3a7a;
border-left: 2px solid #2f3a7a;
}
.deepBlue {
background-color: #051957;
border: 1px solid #2f3a7a;
}
.flexBox {
display: flex;
}
.imgBox {
width: 100px;
height: 50px;
background-color: #fff;
margin-top: 20px;
margin-left: 40px;
}
.marriedNum {
font-size: 16px;
color: #fff;
margin-top: 30px;
margin-left: 20px;
}
.yellowNum {
font-size: 16px;
color: #dbf96d;
margin-left: 20px;
}
// .boxInfo {
// background-color: #051957;
// border: 1px solid #2f3a7a;
// }
.broken {
width: 100%;
height: 300px;
}
.socialAssistance {
width: 100%;
height: 618px;
}
.childWelfare {
width: 100%;
height: 300px;
}
.funeral {
width: 100%;
height: 300px;
}
.demographic {
width: 100%;
height: 300px;
}
.socialAssistanceInfo {
font-size: 16px;
color: #fff;
padding-top: 30px;
margin-left: 30px;
}
.socialAssistanceTitle {
font-size: 52px;
//letter-spacing: 6px;
color: #fff;
margin-top: 10px;
margin-left: 30px;
}
.marriageStatistics {
height: 300px;
border: 2px solid red;
}
</style>>
src/views/socialOrganization/socialOrganization.vue
......@@ -7,14 +7,14 @@
<div class="statisticalNum">社会组织统计总数量</div>
</el-card>
</el-col>
<el-col :span="2">
<el-card shadow="hover" class="purples">
<el-col :span="3">
<el-card shadow="hover" class="purplesBox">
<div class="organizationBlue">33174</div>
<div class="organization">社会团体</div>
</el-card>
</el-col>
<el-col :span="3">
<el-card shadow="hover" class="green">
<el-col :span="4">
<el-card shadow="hover" class="greenBox">
<div class="organizationGreen">59778</div>
<div class="organization">民办非企业单位</div>
</el-card>
......@@ -139,11 +139,11 @@ export default {
background-color: #fff;
}
.purples {
.purplesBox {
background-color: rgba(242, 235, 253);
}
.green {
.greenBox {
background-color: rgba(237, 246, 241);
}
......@@ -153,7 +153,7 @@ export default {
.statisticalNum {
font-size: 16px;
text-align: center;
//text-align: center;
color: #000;
}
......@@ -165,7 +165,7 @@ export default {
.organizationWhite {
font-size: 24px;
color: #3c3c3c;
text-align: center;
// text-align: center;
margin-bottom: 6px;
}
......
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