Skip to content

C
civil-front
Commit f50a57d6 by 苏咏卓
Options

完成地图，查询

parent 0ed15335
Showing with 1333 additions and 296 deletions
.env.development
ENV = 'development'
# 接口地址
VUE_APP_BASE_API = 'http://172.18.99.141:9888'
VUE_APP_WS_API = 'ws://172.18.99.141:9888'
VUE_APP_BASE_API = 'http://172.18.99.141:9888/'
VUE_APP_WS_API = 'ws://124.227.197.29:8088'
VUE_APP_FILE_API = 'http://124.227.197.29:8088/'
# 是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true
.env.production
......@@ -2,6 +2,6 @@ ENV = 'production'
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
VUE_APP_BASE_API = 'https://el-admin.xin'
VUE_APP_BASE_API = 'http://124.227.197.29:8088'
# 如果接口是 http 形式， wss 需要改为 ws
VUE_APP_WS_API = 'wss://el-admin.xin'
VUE_APP_WS_API = 'ws://124.227.197.29:8088'
src/api/unified/unified.js
......@@ -54,6 +54,24 @@ export const getMarriageStats = data => {
})
}
//婚姻搜索
export const marriageSearch = data => {
return request({
url: 'portal/admin/stats/marriageSearch',
method: 'POST',
data
})
}
//获取人员列表
export const getPersonnelList = data => {
return request({
url: 'portal/admin/stats/getPersonnelList',
method: 'POST',
data
})
}
/** -------------------- 社会组织 -------------------- **/
//获取社会机构区域占比统计
export const getSoorganPercentageStats = data => {
......@@ -65,6 +83,17 @@ export const getSoorganPercentageStats = data => {
})
}
//社会组织搜索
export const soorganSearch = data => {
return request({
url: 'portal/admin/stats/soorganSearch',
method: 'POST',
data
})
}
/** -------------------- 社会救助 -------------------- **/
//获取近三年城市农村低保发放人数统计
export const getThreeYearShjzAchieveStats = data => {
......@@ -106,6 +135,16 @@ export const getFivesYearShjzProvideStats = data => {
})
}
//低保对象搜索
export const lowIncomeSearch = data => {
return request({
url: 'portal/admin/stats/lowIncomeSearch',
method: 'POST',
data
})
}
// 获取近年城市农村低保发放人数统计 城市柱形图
export const getAreaYearShjzAchieveStats = data => {
return request({
......@@ -116,6 +155,16 @@ export const getAreaYearShjzAchieveStats = data => {
})
}
//残疾人搜索
export const deformedManSearch = data => {
return request({
url: 'portal/admin/stats/deformedManSearch',
method: 'POST',
data
})
}
/** -------------------- 儿童福利 -------------------- **/
//统计该区域的机构和儿童数量
export const getAgencyChildStats = data => {
......@@ -153,8 +202,27 @@ export const getAgencyUnderChildStatsList = data => {
})
}
//儿童搜索
export const childSearch = data => {
return request({
url: 'portal/admin/stats/childSearch',
method: 'POST',
data
})
}
/** -------------------- 殡葬 -------------------- **/
//统计该区域的殡葬火化量
//获取区域火化率占比
export const getCremationRateStats = data => {
return request({
url: 'portal/admin/stats/getCremationRateStats',
method: 'POST',
data
})
}
//统计该区域火化量和火化率
export const getCremationStats = data => {
return request({
url: 'portal/admin/stats/getCremationStats',
......@@ -164,6 +232,26 @@ export const getCremationStats = data => {
})
}
//获取区域殡葬火化分析列表
export const getCremationStatsList = data => {
return request({
url: 'portal/admin/stats/getCremationStatsList',
method: 'POST',
data
})
}
//殡葬搜索
export const cremationSearch = data => {
return request({
url: 'portal/admin/stats/cremationSearch',
method: 'POST',
data
})
}
/** -------------------- 两项补贴 -------------------- **/
//获取区域残疾发放统计
export const getAreaDisabledIssueStats = data => {
......@@ -207,9 +295,9 @@ export const getAreaNursingStatsList = data => {
/** -------------------- 地图 -------------------- **/
//获取地图数据
export const getMapData = (areaId) =>{
export const getMapData = (areaId) => {
return request({
url:`portal/static/map/${areaId}.json`,
url: `portal/static/map/${areaId}.json`,
method: 'get'
})
})
}
\ No newline at end of file
src/layout/components/Sidebar/Logo.vue
......@@ -25,7 +25,7 @@ export default {
},
data() {
return {
title: 'ELADMIN-后台管理',
title: '广西民政决策分析',
logo: Logo
}
}
......
src/views/login.vue
......@@ -2,7 +2,7 @@
<div class="login" :style="'background-image:url('+ Background +');'">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
<h3 class="title">
EL-ADMIN 后台管理系统
广西民政决策分析
</h3>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
......
src/views/unified/tapSwitch/childWelfare.vue
......@@ -12,7 +12,9 @@
<div class="textLefts">收养总数</div>
<div>
<div class="borderBottom"></div>
<div class="yellowNum">{{agencyChildStats.adoptChildNum}}</div>
<div class="yellowNum">
{{ agencyChildStats.adoptChildNum }}
</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
......@@ -21,7 +23,7 @@
<div class="textLeft">孤儿</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">{{agencyChildStats.orphanNum}}</div>
<div class="textNum">{{ agencyChildStats.orphanNum }}</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
......@@ -30,7 +32,9 @@
<div class="text">事实无人领养</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">{{agencyChildStats.factUnadoptedNum}}</div>
<div class="textNum">
{{ agencyChildStats.factUnadoptedNum }}
</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
......@@ -52,7 +56,13 @@
<!-- 中 -->
<el-col :span="12">
<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="childWelfareMap" id="childWelfareMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
</el-col>
</el-row>
<br />
<el-row :gutter="20">
......@@ -71,16 +81,28 @@
<el-col :span="24">
<div class="wiansInfo">
<div class="title">婚姻统计</div>
<el-input
type="text"
placeholder="身份证或者姓名查询"
class="input"
v-model="value"
@change="inputBtn"
suffix-icon="el-icon-search"
/>
<el-table
:data="tableData"
stripe
style="width: 300px; background-color: #051d3f; color: #2177b9"
style="width: 100%; background-color: #051d3f; color: #2177b9"
:header-cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
>
<el-table-column prop="date" label="区域名称" align="center">
<el-table-column type="index" label="序号" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</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="address" label="所在福利院" align="center">
</el-table-column>
</el-table>
</div>
......@@ -103,27 +125,20 @@ import {
getAgencyChildStatsList,
getAgencyUnderChildStatsList,
getAgencyPercentageStats,
childSearch,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
],
num: 0,
tableData: [],
agencyChildStats: {},
agencyChildStatsList: {},
agencyUnderChildStatsList: {},
agencyPercentageStats:[],
agencyPercentageStats: [],
welfareHomeName: [],
value:""
};
},
created() {
......@@ -131,24 +146,41 @@ export default {
this.getAgencyChildStatsListFun();
this.getAgencyUnderChildStatsListFun();
this.getAgencyPercentageStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000
this.childSearchFun()
},
methods: {
getAgencyChildStatsFun() {
getAgencyChildStats({}).then((res) => {
inputBtn() {
console.log(this.value);
this.childSearchFun();
},
childSearchFun(){
childSearch({
keyword: this.value,
}).then(res =>{
console.log(res,'儿童搜索')
this.tableData = res.data
})
},
getAgencyChildStatsFun(data) {
getAgencyChildStats({ areaCode: data }).then((res) => {
console.log(res, "统计该区域的机构和儿童数量");
this.agencyChildStats = res.data;
});
},
getAgencyChildStatsListFun() {
getAgencyChildStatsList({}).then((res) => {
getAgencyChildStatsListFun(data) {
getAgencyChildStatsList({ areaCode: data }).then((res) => {
console.log(res, "统计该区域的机构和儿童数量统计列表");
this.agencyChildStatsList = res.data;
this.annualStatisticsFun();
});
},
getAgencyPercentageStatsFun() {
getAgencyPercentageStats({}).then((res) => {
getAgencyPercentageStatsFun(data) {
getAgencyPercentageStats({ areaCode: data }).then((res) => {
console.log(res, "获取区域机构占比");
this.agencyPercentageStats = res.data;
res.data.forEach((item) => {
......@@ -159,13 +191,138 @@ export default {
});
},
getAgencyUnderChildStatsListFun() {
getAgencyUnderChildStatsList({}).then((res) => {
getAgencyUnderChildStatsListFun(data) {
getAgencyUnderChildStatsList({ areaCode: data }).then((res) => {
console.log(res, "获取福利院下的儿童统计");
this.agencyUnderChildStatsList = res.data;
});
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.childWelfareMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getAgencyChildStatsListFun("450000");
this.getAgencyPercentageStatsFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
childWelfareMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("childWelfareMap"));
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.getAgencyChildStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAgencyPercentageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
//机构占比
proportionFun() {
console.log(
......@@ -409,7 +566,8 @@ export default {
},
},
},
},{
},
{
name: "无人领养",
type: "bar",
label: labelOption,
......@@ -425,7 +583,7 @@ export default {
},
},
},
}
},
],
};
......@@ -464,6 +622,12 @@ export default {
display: flex;
}
.childWelfareMap {
width: 100%;
height: 430px;
background-color: #082c61;
}
.wian {
width: 100%;
height: 400px;
......@@ -473,7 +637,7 @@ export default {
.wians {
width: 100%;
height: 500px;
background-color: blanchedalmond;
background-color: #082c61;
}
.wianss {
......@@ -485,7 +649,13 @@ export default {
.wiansInfo {
width: 100%;
height: 818px;
background-color: blanchedalmond;
background-color: #082c61;
overflow: hidden;
overflow-y: scroll;
}
.wiansInfo::-webkit-scrollbar {
display: none;
}
.socialOrganizationFlex {
......@@ -551,4 +721,21 @@ export default {
border: 1px solid #0e62bf;
border-top: none;
}
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
.input {
width: 90%;
background-color: #082c61;
color: #7f8b9d;
margin: 10px 20px;
}
.el-icon-search {
color: #fff;
}
</style>
\ No newline at end of file
src/views/unified/tapSwitch/marriage.vue
......@@ -8,6 +8,15 @@
<el-col :span="24">
<div class="wian">
<div class="title">婚姻统计</div>
<div class="socialOrganizationFlex">
<div class="text">共</div>
<div>
<div class="borderBottom"></div>
<div class="yellowNums">123456</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
</div>
<div id="mainInfo" class="trend"></div>
</div>
</el-col>
......@@ -19,14 +28,14 @@
<div class="title">婚姻统计</div>
<div class="marriageStatistics">
<div class="flexBox">
<div class="imgBox"></div>
<!-- <div class="imgBox"></div> -->
<div>
<div class="marriedNum">结婚总数(对)</div>
<div class="yellowNum">{{ marriageStats.marryNum }}</div>
</div>
</div>
<div class="flexBox">
<div class="imgBox"></div>
<!-- <div class="imgBox"></div> -->
<div>
<div class="marriedNum">申请离婚(对)</div>
<div class="yellowNum">
......@@ -35,14 +44,14 @@
</div>
</div>
<div class="flexBox">
<div class="imgBox"></div>
<!-- <div class="imgBox"></div> -->
<div>
<div class="marriedNum">成功离婚(对)</div>
<div class="yellowNum">{{ marriageStats.divorceNum }}</div>
</div>
</div>
<div class="flexBox">
<div class="imgBox"></div>
<!-- <div class="imgBox"></div> -->
<div>
<div class="marriedNum">跨地区结婚/离婚</div>
<div class="yellowNum">
......@@ -63,8 +72,8 @@
<el-col :span="24"
><div class="wians">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="marriageMap" id="marriageMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
</el-col>
</el-row>
......@@ -85,24 +94,49 @@
<el-col :span="24">
<div class="wiansInfo">
<div class="title">婚姻统计</div>
<el-input
type="text"
placeholder="身份证或者姓名查询"
class="input"
v-model="value"
@change="inputBtn"
suffix-icon="el-icon-search"
/>
<!-- <i class="el-icon-search" @click="marriageSearchFun"></i> -->
<el-table
:data="tableData"
stripe
height="0"
:row-style="{ height: '10px' }"
:cell-style="{ height: '10px' }"
style="width: 300px"
style="width: 100%; background-color: #051d3f; color: #2177b9"
:header-cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
>
<el-table-column prop="date" label="序号" align="center">
<el-table-column
type="index"
label="序号"
align="center"
width="50px"
>
</el-table-column>
<el-table-column prop="name" label="名称" align="center">
<el-table-column
prop="manName"
label="名称"
align="center"
width="50px"
>
</el-table-column>
<el-table-column prop="address" label="所在地" align="center">
<el-table-column
prop="manDomicile"
label="所在地"
align="center"
>
</el-table-column>
<el-table-column prop="address" label="婚姻状况" align="center">
</el-table-column>
<el-table-column prop="address" label="时间" align="center">
<el-table-column
prop="registerDate"
label="时间"
align="center"
>
</el-table-column>
</el-table>
</div>
......@@ -124,27 +158,18 @@ import {
getFivesYearMarriageLine,
getMarriageStats,
getAreaUnderMarriageStatsList,
marriageSearch,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
num: 0,
tableData: [
{
date: "1",
name: "王小虎",
address: "1518",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
],
tableData: [],
marriageLine: {},
marriageStats: {},
areaUnderMarriageStatsList: {},
value: "",
};
},
created() {
......@@ -152,8 +177,23 @@ export default {
this.getMarriageStatsFun();
this.getAreaUnderMarriageStatsListFun();
this.getMapData("g450000"); //默认展示广西 g450000
this.marriageSearchFun();
},
methods: {
inputBtn() {
console.log(this.value);
this.marriageSearchFun();
},
marriageSearchFun() {
marriageSearch({
keyword: this.value,
}).then((res) => {
console.log(res, "搜索");
this.tableData = res.data;
});
},
getFivesYearMarriageLineFun(data) {
getFivesYearMarriageLine({
areaCode: data,
......@@ -332,7 +372,7 @@ export default {
trigger: "axis",
},
legend: {
top: "3%",
top: "2%",
data: ["结婚", "离婚"],
},
grid: {
......@@ -640,7 +680,7 @@ export default {
<style lang="scss" scoped>
.trend {
width: 100%;
height: 350px;
height: 280px;
}
.annualStatistics {
margin-top: 10px;
......@@ -684,7 +724,7 @@ export default {
.marriageMap {
width: 100%;
height: 500px;
height: 430px;
background-color: #082c61;
}
......@@ -697,7 +737,7 @@ export default {
.wians {
width: 100%;
height: 500px;
background-color: blanchedalmond;
background-color: #082c61;
}
.wianss {
......@@ -709,6 +749,63 @@ export default {
.wiansInfo {
width: 100%;
height: 818px;
background-color: blanchedalmond;
background-color: #082c61;
overflow: hidden;
overflow-y: scroll;
}
.wiansInfo::-webkit-scrollbar {
display: none;
}
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
.input {
width: 90%;
background-color: #082c61;
color: #7f8b9d;
margin: 10px 20px;
}
.el-icon-search {
color: #fff;
}
.socialOrganizationFlex {
display: flex;
margin-top: 20px;
margin-left: 60px;
}
.text {
font-size: 12px;
color: #0e62bf;
margin-top: 16px;
}
.yellowNums {
width: 180px;
font-size: 24px;
text-align: center;
color: #ffff20;
font-weight: bold;
}
.borderBottom {
width: 100%;
height: 12px;
border: 1px solid #0e62bf;
border-bottom: none;
}
.borderTop {
width: 100%;
height: 12px;
border: 1px solid #0e62bf;
border-top: none;
}
</style>
\ No newline at end of file
src/views/unified/tapSwitch/mechanism.vue
......@@ -32,8 +32,8 @@
<el-col :span="16">
<div class="wians">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="mechanismMap" id="mechanismMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
</el-col>
......@@ -45,16 +45,18 @@
<el-table
:data="tableData"
stripe
height="400"
:header-cell-style="{ background: '#042465', color: '#fff' }"
:cell-style="{ background: '#022872', color: '#fff' }"
style="width: 300px; margib-left: 10px"
style="width: 100%; background-color: #051d3f; color: #2177b9"
:header-cell-style="{
background: '#082C61',
color: '#DAD7DB',
}"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
>
<el-table-column prop="date" label="排名" align="center">
<el-table-column type="index" label="排名" align="center">
</el-table-column>
<el-table-column prop="name" label="区域名称" align="center">
</el-table-column>
<el-table-column prop="address" label="数量" align="center">
<el-table-column prop="num" label="数量" align="center">
</el-table-column>
</el-table>
</div>
......@@ -117,69 +119,7 @@ export default {
data() {
return {
num: 0,
tableData: [
{
date: "1",
name: "王小虎",
address: "1518",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
],
tableData: [],
soorganStats: {},
areaUnderSoorganStatsList: {},
areaNursingStatsList: {},
......@@ -220,6 +160,7 @@ export default {
}).then((res) => {
console.log(res, "获取区域养老院统计列表");
this.areaNursingStatsList = res.data;
this.tableData = res.data.statsLst;
this.pensionFun();
});
},
......@@ -817,7 +758,7 @@ export default {
.mechanismMap {
width: 100%;
height: 500px;
height: 430px;
background-color: #082c61;
}
......@@ -835,6 +776,12 @@ export default {
width: 100%;
height: 500px;
background-color: #082c61;
overflow: hidden;
overflow-y: scroll;
}
.wians::-webkit-scrollbar {
display: none;
}
.wianss {
......@@ -848,4 +795,10 @@ export default {
height: 818px;
background-color: #082c61;
}
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
</style>
\ No newline at end of file
src/views/unified/tapSwitch/population.vue
......@@ -12,11 +12,11 @@
<el-col :span="12">
<el-row>
<el-col :span="6" :offset="2">
<div class="marriageImg"></div>
<!-- <div class="marriageImg"></div> -->
</el-col>
<el-col :span="16">
<div class="marriageNum">
<div class="size16">结婚总数</div>
<div class="size16">结婚总数(对)</div>
<div class="size16">{{ marriageStats.marryNum }}</div>
</div>
</el-col>
......@@ -25,13 +25,13 @@
<el-col :span="12">
<el-row justify="center">
<el-col :span="6">
<div class="marriageImg"></div>
<!-- <div class="marriageImg"></div> -->
</el-col>
<el-col :span="18">
<div class="marriageNum">
<div class="size16">结婚总数</div>
<div class="size16">离婚总数(对)</div>
<div class="size16">
{{ marriageStats.inDivorceNum }}
{{ marriageStats.divorceNum }}
</div>
</div>
</el-col>
......@@ -74,8 +74,8 @@
<el-col :span="24"
><div class="wians">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="populationMap" id="populationMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
</el-col>
</el-row>
......@@ -1005,7 +1005,7 @@ export default {
.populationMap {
width: 100%;
height: 500px;
height: 430px;
background-color: #082c61;
}
......@@ -1032,4 +1032,10 @@ export default {
height: 818px;
background-color: #082c61;
}
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
</style>
\ No newline at end of file
src/views/unified/tapSwitch/provide.vue
......@@ -12,7 +12,7 @@
<div class="text">火化总数</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">{{cremationStats.cremationSum}}</div>
<div class="textNum">{{ cremationStats.cremationSum }}</div>
<div class="borderTop"></div>
</div>
<div class="text">个</div>
......@@ -21,7 +21,7 @@
<div class="texts">火化率</div>
<div>
<div class="borderBottom"></div>
<div class="textNums">{{cremationStats.cremationRate}}</div>
<div class="textNums">{{ cremationStats.cremationRate }}</div>
<div class="borderTop"></div>
</div>
<div class="text">%</div>
......@@ -43,7 +43,13 @@
<!-- 中 -->
<el-col :span="12">
<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="provideMap" id="provideMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
</el-col>
</el-row>
<br />
<el-row :gutter="20">
......@@ -62,27 +68,47 @@
<el-col :span="24">
<div class="wiansInfo">
<div class="title">火化信息查询</div>
<el-input
type="text"
placeholder="身份证或者姓名查询"
class="input"
v-model="value"
@change="inputBtn"
suffix-icon="el-icon-search"
/>
<el-table
:data="tableData"
stripe
style="width: 100%; background-color: #082C61; color: #2177b9"
style="width: 100%; background-color: #082c61; color: #2177b9"
fit
:header-cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
>
<el-table-column prop="date" label="序号" align="center" width="50px">
<el-table-column
type="index"
label="序号"
align="center"
width="50px"
>
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
<el-table-column prop="siName" label="姓名" align="center" width="60px">
</el-table-column>
<el-table-column
prop="address"
<!-- <el-table-column
prop="siDeathDate"
label="所在地"
align="center"
></el-table-column>
></el-table-column> -->
<el-table-column
prop="address"
prop="organName"
label="殡仪馆"
align="center"
></el-table-column>
<el-table-column prop="dates" label="时间" align="center" width="50px">
<el-table-column
prop="siCremationTime"
label="时间"
align="center"
width="50px"
>
</el-table-column>
</el-table>
</div>
......@@ -100,39 +126,199 @@
<script>
import * as echarts from "echarts";
import { getCremationStats } from "@/api/unified/unified";
import {
getCremationStats,
getCremationStatsList,
getCremationRateStats,
cremationSearch,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
tableData: [
{
date: "1",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
dates:"2020-12-2"
},
{
date: "2",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
dates:"2020-12-2"
},
],
cremationStats:{}
num: 0,
tableData: [],
value: "",
cremationStats: {},
cremationRateStats: {},
cremationStatsList: {},
};
},
created() {
this.getCremationStatsFun()
this.getCremationStatsFun();
this.getCremationRateStatsFun();
this.getCremationStatsListFun();
this.getMapData("g450000"); //默认展示广西 g450000
this.cremationSearchFun()
},
methods: {
getCremationStatsFun(){
getCremationStats({}).then(res =>{
console.log(res,'统计该区域的殡葬火化量')
this.cremationStats = res.data
})
inputBtn() {
console.log(this.value);
this.cremationSearchFun();
},
cremationSearchFun() {
cremationSearch({
keyword: this.values,
}).then((res) => {
console.log(res, "殡葬搜索");
this.tableData = res.data;
});
},
getCremationStatsFun(data) {
getCremationStats({ areaCode: data }).then((res) => {
console.log(res, "统计该区域的殡葬火化量");
this.cremationStats = res.data;
});
},
//机构占比
getCremationRateStatsFun(data) {
getCremationRateStats({ areaCode: data }).then((res) => {
console.log(res, "区域火化率");
this.cremationRateStats = res.data;
this.proportionFun();
});
},
getCremationStatsListFun(data) {
getCremationStatsList({ areaCode: data }).then((res) => {
console.log(res, "获取区域殡葬火化分析列表");
this.cremationStatsList = res.data;
this.annualStatisticsFun();
});
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.provideMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getCremationStatsFun("450000");
this.getCremationRateStatsFun("450000");
this.getCremationStatsListFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
provideMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("provideMap"));
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.getCremationStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getCremationRateStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getCremationStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
//区域火化率
proportionFun() {
var chartDom = document.getElementById("proportion");
var myChart = echarts.init(chartDom, "dark");
......@@ -174,6 +360,7 @@ export default {
option && myChart.setOption(option);
},
//获取区域殡葬火化分析列表
annualStatisticsFun() {
var chartDom = document.getElementById("annualStatistics");
var myChart = echarts.init(chartDom, "dark");
......@@ -284,7 +471,7 @@ export default {
},
},
legend: {
data: ["Forest", "Steppe", "Desert", "Wetland"],
data: ["火化量", "火化率"],
},
toolbox: {
show: true,
......@@ -296,7 +483,7 @@ export default {
{
type: "category",
axisTick: { show: false },
data: ["2012", "2013", "2014", "2015", "2016"],
data: this.cremationStatsList.cityList,
axisLabel: {
textStyle: {
color: "#FFFFFF",
......@@ -342,36 +529,36 @@ export default {
],
series: [
{
name: "Forest",
name: "火化量",
type: "bar",
barGap: 0,
label: labelOption,
emphasis: {
focus: "series",
},
data: [320, 332, 301, 334, 390],
data: this.cremationStatsList.numList,
itemStyle: {
normal: {
color: "#3167ff",
color: "#5470C6",
lineStyle: {
color: "#3167ff",
color: "#5470C6",
},
},
},
},
{
name: "Steppe",
name: "火化率",
type: "bar",
label: labelOption,
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290],
data: this.cremationStatsList.numList,
itemStyle: {
normal: {
color: "#ff4444",
color: "#91CC75",
lineStyle: {
color: "#ff4444",
color: "#91CC75",
},
},
},
......@@ -465,6 +652,12 @@ export default {
display: flex;
}
.provideMap {
width: 100%;
height: 430px;
background-color: #082c61;
}
.wian {
width: 100%;
height: 400px;
......@@ -474,7 +667,7 @@ export default {
.wians {
width: 100%;
height: 500px;
background-color: blanchedalmond;
background-color: #082c61;
}
.wianss {
......@@ -486,6 +679,25 @@ export default {
.wiansInfo {
width: 100%;
height: 818px;
background-color: blanchedalmond;
background-color: #082c61;
overflow: hidden;
overflow-y: scroll;
}
.wiansInfo::-webkit-scrollbar {
display: none;
}
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
.input {
width: 90%;
background-color: #082c61;
color: #7f8b9d;
margin: 10px 20px;
}
</style>
\ No newline at end of file
src/views/unified/tapSwitch/socialAssistance.vue
......@@ -78,8 +78,8 @@
<el-col :span="24"
><div class="wians">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="socialAssistanceMap" id="socialAssistanceMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
</el-col>
</el-row>
......@@ -99,17 +99,59 @@
<el-row :gutter="20">
<el-col :span="24">
<div class="wiansInfo">
<div class="title">婚姻统计</div>
<div class="title">低保对象查询</div>
<el-input
type="text"
placeholder="身份证或者姓名查询"
class="input"
v-model="values"
@change="inputBtn"
suffix-icon="el-icon-search"
/>
<el-table
:data="tableData"
stripe
style="width: 300px; background-color: #051d3f; color: #2177b9"
style="width: 100%; background-color: #051d3f; color: #2177b9"
:header-cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:row-style="rowStyle"
>
<el-table-column prop="date" label="区域名称" align="center">
<el-table-column
type="index"
label="序号"
align="center"
width="50px"
>
</el-table-column>
<el-table-column prop="name" label="结婚总数" align="center">
<el-table-column
prop="name"
label="姓名"
align="center"
width="50px"
>
</el-table-column>
<el-table-column prop="address" label="离婚整数" align="center">
<el-table-column prop="address" label="所在地" align="center" >
</el-table-column>
<!-- <el-table-column
prop="name"
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="createTime"
label="时间"
align="center"
width="70px"
>
</el-table-column>
</el-table>
</div>
......@@ -132,24 +174,15 @@ import {
getThreeYearShjzProvideStats,
getFivesYearShjzAchieveStats,
getAreaYearShjzAchieveStats,
lowIncomeSearch,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
num: 0,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
],
tableData: [],
values: "",
fivesYearShjzAchieveStats: {},
threeYearShjzProvideStats: {},
fivesYearShjzAchieveStats: {},
......@@ -157,6 +190,7 @@ export default {
cityNames: [],
cityAndvillagePeople: {}, // 五年享受低保资金人数
cityAndvillageNum: {}, // 五年享受低保资金总数
value: {},
};
},
created() {
......@@ -165,8 +199,31 @@ export default {
this.getFivesYearShjzAchieveStatsFun();
this.getAreaYearShjzAchieveStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000
this.lowIncomeSearchFun();
},
methods: {
rowStyle({ row, rowsIndex }) {
if (row) {
return {
backgroundColor: "#134880",
};
}
},
inputBtn() {
console.log(this.value);
this.lowIncomeSearchFun();
},
lowIncomeSearchFun() {
lowIncomeSearch({
keyword: this.values,
}).then((res) => {
console.log(res, "低保对象搜索");
this.tableData = res.data;
});
},
getThreeYearShjzAchieveStatsFun(data) {
getThreeYearShjzAchieveStats({
areaCode: data,
......@@ -811,32 +868,38 @@ export default {
.socialAssistanceMap {
width: 100%;
height: 500px;
height: 430px;
background-color: #082c61;
}
.wian {
width: 100%;
height: 416px;
height: 415px;
background-color: #082c61;
}
.wians {
width: 100%;
height: 500px;
background-color: blanchedalmond;
background-color: #082c61;
}
.wianss {
width: 100%;
height: 300px;
height: 330px;
background-color: #082c61;
}
.wiansInfo {
width: 100%;
height: 848px;
background-color: blanchedalmond;
background-color: #082c61;
overflow: hidden;
overflow-y: scroll;
}
.wiansInfo::-webkit-scrollbar {
display: none;
}
.display {
......@@ -888,4 +951,32 @@ export default {
width: 100%;
height: 300px;
}
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
.search {
width: 90%;
height: 30px;
border-radius: 6px;
border: 1px solid #7f8b9d;
display: flex;
justify-content: space-around;
align-items: center;
margin: 10px 20px;
}
.input {
width: 90%;
background-color: #082c61;
color: #7f8b9d;
margin: 10px 20px;
}
.el-icon-search {
color: #fff;
}
</style>
\ No newline at end of file
src/views/unified/tapSwitch/socialOrganization.vue
......@@ -61,7 +61,16 @@
<!-- 中 -->
<el-col :span="12">
<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="socialOrganizationMap"
id="socialOrganizationMap"
></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
</el-col>
</el-row>
<br />
<el-row :gutter="20">
......@@ -110,17 +119,27 @@
<el-col :span="24">
<div class="wiansInfo">
<div class="title">婚姻统计</div>
<el-input
type="text"
placeholder="请输入组织代码或名称查询"
class="input"
v-model="value"
@change="inputBtn"
suffix-icon="el-icon-search"
/>
<el-table
:data="tableData"
stripe
style="width: 100%; background-color: #051d3f; color: #2177b9"
:header-cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
>
<el-table-column prop="date" label="序号" align="center">
<el-table-column type="index" 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"
prop="regno"
label="组织名称/代码"
align="center"
>
......@@ -145,57 +164,197 @@ import {
getSoorganStats,
getSoorganPercentageStats,
getAreaUnderSoorganStatsList,
soorganSearch,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
],
num: 0,
tableData: [],
soorganStats: {},
SoorganPercentageStats: [],
placeNames: [],
soorganStats: {},
areaUnderSoorganStatsList: {},
value: "",
};
},
created() {
this.getSoorganStatsFun();
this.getSoorganPercentageStatsFun();
this.getAreaUnderSoorganStatsListFun();
this.getMapData("g450000"); //默认展示广西 g450000
this.soorganSearchFun()
},
methods: {
getSoorganStatsFun() {
getSoorganStats({}).then((res) => {
inputBtn() {
console.log(this.value);
this.soorganSearchFun();
},
soorganSearchFun() {
soorganSearch({
keyword: this.value,
}).then((res) => {
console.log(res, "社会组织搜索");
this.tableData = res.data;
});
},
getSoorganStatsFun(data) {
getSoorganStats({ areaCode: data }).then((res) => {
console.log(res, "获取社会机构统计");
this.soorganStats = res.data;
});
},
getSoorganPercentageStatsFun() {
getSoorganPercentageStats({}).then((res) => {
getSoorganPercentageStatsFun(data) {
getSoorganPercentageStats({ areaCode: data }).then((res) => {
console.log(res.data, "获取社会机构区域占比统计");
this.SoorganPercentageStats = res.data;
res.data.forEach((item) => {
this.placeNames.push(item.name);
});
console.log(this.placeNames);
this.proportionFun();
});
},
getAreaUnderSoorganStatsListFun() {
getAreaUnderSoorganStatsList({}).then((res) => {
getAreaUnderSoorganStatsListFun(data) {
getAreaUnderSoorganStatsList({ areaCode: data }).then((res) => {
console.log(res, "获取地区下面社会机构统计列表");
this.areaUnderSoorganStatsList = res.data;
this.annualStatisticsFun();
});
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.socialOrganizationMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getSoorganStatsFun("450000");
this.getSoorganPercentageStatsFun("450000");
this.getAreaUnderSoorganStatsListFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
socialOrganizationMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("socialOrganizationMap"));
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.getSoorganPercentageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaUnderSoorganStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
......@@ -576,6 +735,12 @@ export default {
display: flex;
}
.socialOrganizationMap {
width: 100%;
height: 430px;
background-color: #082c61;
}
.wian {
width: 100%;
height: 400px;
......@@ -585,7 +750,7 @@ export default {
.wians {
width: 100%;
height: 500px;
background-color: blanchedalmond;
background-color: #082c61;
}
.wianss {
......@@ -597,6 +762,29 @@ export default {
.wiansInfo {
width: 100%;
height: 818px;
background-color: blanchedalmond;
background-color: #082c61;
overflow: hidden;
overflow-y: scroll;
}
.wiansInfo::-webkit-scrollbar {
display: none;
}
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
.input {
width: 90%;
background-color: #082c61;
color: #7f8b9d;
margin: 10px 20px;
}
.el-icon-search {
color: #fff;
}
</style>
\ No newline at end of file
src/views/unified/tapSwitch/subsidies.vue
......@@ -11,14 +11,16 @@
<div class="display">
<div>
<div class="flex">
<div class="num">2020</div>
<div class="num">
{{ poorDisabledNum.difficultTotalNum }}
</div>
<div class="text">人</div>
</div>
<div class="rural">贫困残疾人</div>
</div>
<div>
<div class="flex">
<div class="nums">2020</div>
<div class="nums">{{ poorDisabledNum.severeTotalNum }}</div>
<div class="texts">人</div>
</div>
<div class="city">重度残疾人</div>
......@@ -34,9 +36,13 @@
<el-col :span="24">
<div class="wian">
<div class="title">残疾人比例</div>
<div class="subsidiesBox" v-for="(item,index) in disabledLevelStats" :key="index">
<div class="subsidiesText">{{item.level}}</div>
<div class="subsidiesText">{{item.num}}</div>
<div
class="subsidiesBox"
v-for="(item, index) in disabledLevelStats"
:key="index"
>
<div class="subsidiesText">{{ item.level }}</div>
<div class="subsidiesText">{{ item.num }}</div>
<div class="subsidiesText">贫困18%</div>
</div>
</div>
......@@ -55,7 +61,13 @@
<!-- 中 -->
<el-col :span="12">
<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="subsidiesMap" id="subsidiesMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
</el-col>
</el-row>
<br />
<el-row :gutter="20">
......@@ -74,21 +86,40 @@
<el-col :span="24">
<div class="wiansInfo">
<div class="title">婚姻统计</div>
<el-input
type="text"
placeholder="身份证或者姓名查询"
class="input"
v-model="value"
@change="inputBtn"
suffix-icon="el-icon-search"
/>
<el-table
:data="tableData"
stripe
style="width: 100%; background-color: #051d3f; color: #2177b9"
:header-cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
>
<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
type="index"
label="序号"
align="center"
width="50px"
>
</el-table-column>
<el-table-column prop="address" label="所在地" align="center">
<el-table-column
prop="name"
label="姓名"
align="center"
>
</el-table-column>
<el-table-column prop="date" label="残疾等级" align="center" >
<el-table-column prop="addressName" label="所在地" align="center">
</el-table-column>
<el-table-column prop="date" label="补助标准" align="center">
<el-table-column prop="levelId" label="残疾等级" align="center" >
</el-table-column>
<!-- <el-table-column prop="date" label="补助标准" align="center">
</el-table-column> -->
</el-table>
</div>
</el-col>
......@@ -105,58 +136,203 @@
<script>
import * as echarts from "echarts";
import { getYearDisabledIssueStats,getDisabledLevelStats,getAreaDisabledIssueStats } from "@/api/unified/unified";
import {
getYearDisabledIssueStats,
getDisabledLevelStats,
getAreaDisabledIssueStats,
deformedManSearch,
getMapData,
} from "@/api/unified/unified";
export default {
data() {
return {
tableData: [
{
date: "1",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
],
yearDisabledIssueStats:{},
disabledLevelStats:{},
areaDisabledIssueStats:{}
num: 0,
tableData: [],
yearDisabledIssueStats: {},
disabledLevelStats: {},
areaDisabledIssueStats: {},
poorDisabledNum: {},
value:""
};
},
created() {
this.getYearDisabledIssueStatsFun()
this.getDisabledLevelStatsFun()
this.getAreaDisabledIssueStatsFun()
this.getYearDisabledIssueStatsFun();
this.getDisabledLevelStatsFun();
this.getAreaDisabledIssueStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000
this.deformedManSearchFun()
},
methods: {
getYearDisabledIssueStatsFun(){
getYearDisabledIssueStats({}).then(res =>{
console.log(res,'近三年发放人数和金额统计')
this.yearDisabledIssueStats = res.data.admin
this.fivePeopleFun(res.data.admin)
})
inputBtn() {
console.log(this.value);
this.deformedManSearchFun();
},
deformedManSearchFun() {
deformedManSearch({
keyword: this.value,
}).then((res) => {
console.log(res, "残疾人搜索");
this.tableData = res.data;
});
},
getDisabledLevelStatsFun(){
getDisabledLevelStats({}).then(res =>{
console.log(res,'获取残疾等级统计')
this.disabledLevelStats = res.data
})
getYearDisabledIssueStatsFun(data) {
getYearDisabledIssueStats({ areaCode: data }).then((res) => {
console.log(res, "近三年发放人数和金额统计");
this.yearDisabledIssueStats = res.data.admin;
this.poorDisabledNum = res.data.totalNumMap;
this.fivePeopleFun(res.data.admin);
});
},
getAreaDisabledIssueStatsFun(){
getAreaDisabledIssueStats({}).then(res =>{
console.log(res,'获取区域残疾发放统计')
this.areaDisabledIssueStats = res.data
})
getDisabledLevelStatsFun(data) {
getDisabledLevelStats({ areaCode: data }).then((res) => {
console.log(res, "获取残疾等级统计");
this.disabledLevelStats = res.data;
});
},
getAreaDisabledIssueStatsFun(data) {
getAreaDisabledIssueStats({ areaCode: data }).then((res) => {
console.log(res, "获取区域残疾发放统计");
this.areaDisabledIssueStats = res.data;
this.ruralAndcityFun();
});
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.subsidiesMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getYearDisabledIssueStatsFun("450000");
this.getDisabledLevelStatsFun("450000");
this.getAreaDisabledIssueStatsFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
subsidiesMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("subsidiesMap"));
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.getYearDisabledIssueStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getDisabledLevelStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaDisabledIssueStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
//3年享受低保人数
fivePeopleFun(data) {
console.log(data)
console.log(data);
var chartDom = document.getElementById("fivePeople");
var myChart = echarts.init(chartDom, "dark");
var option;
......@@ -468,7 +644,7 @@ export default {
},
mounted() {
setTimeout(() => {
this.ruralAndcityFun();
//this.ruralAndcityFun();
}, 1000);
},
};
......@@ -520,6 +696,12 @@ export default {
margin-left: 20px;
}
.subsidiesMap {
width: 100%;
height: 430px;
background-color: #082c61;
}
.wian {
width: 100%;
height: 416px;
......@@ -529,7 +711,7 @@ export default {
.wians {
width: 100%;
height: 500px;
background-color: blanchedalmond;
background-color: #082c61;
}
.wianss {
......@@ -541,7 +723,13 @@ export default {
.wiansInfo {
width: 100%;
height: 848px;
background-color: blanchedalmond;
background-color: #082c61;
overflow: hidden;
overflow-y: scroll;
}
.wiansInfo::-webkit-scrollbar {
display: none;
}
.display {
......@@ -610,4 +798,21 @@ export default {
color: #fff;
margin-bottom: 6px;
}
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
.input {
width: 90%;
background-color: #082c61;
color: #7f8b9d;
margin: 10px 20px;
}
.el-icon-search {
color: #fff;
}
</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