Skip to content

C
civil-front
Commit 0ed15335 by 苏咏卓
Options

更新地图

parent cedaec7b
Showing with 725 additions and 90 deletions
src/api/unified/unified.js
...@@ -204,3 +204,12 @@ export const getAreaNursingStatsList = data => { ...@@ -204,3 +204,12 @@ export const getAreaNursingStatsList = data => {
}) })
} }
/** -------------------- 地图 -------------------- **/
//获取地图数据
export const getMapData = (areaId) =>{
return request({
url:`portal/static/map/${areaId}.json`,
method: 'get'
})
}
\ No newline at end of file
src/views/unified/tapSwitch/marriage.vue
...@@ -60,7 +60,13 @@ ...@@ -60,7 +60,13 @@
<!-- 中 --> <!-- 中 -->
<el-col :span="12"> <el-col :span="12">
<el-row :gutter="20"> <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="title" @click="returnInfo">返回上一级</div>
<div class="marriageMap" id="marriageMap"></div>
</div>
</el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -117,11 +123,13 @@ import * as echarts from "echarts"; ...@@ -117,11 +123,13 @@ import * as echarts from "echarts";
import { import {
getFivesYearMarriageLine, getFivesYearMarriageLine,
getMarriageStats, getMarriageStats,
getAreaUnderMarriageStatsList getAreaUnderMarriageStatsList,
getMapData,
} from "@/api/unified/unified"; } from "@/api/unified/unified";
export default { export default {
data() { data() {
return { return {
num: 0,
tableData: [ tableData: [
{ {
date: "1", date: "1",
...@@ -136,35 +144,172 @@ export default { ...@@ -136,35 +144,172 @@ export default {
], ],
marriageLine: {}, marriageLine: {},
marriageStats: {}, marriageStats: {},
areaUnderMarriageStatsList:{} areaUnderMarriageStatsList: {},
}; };
}, },
created() { created() {
this.getFivesYearMarriageLineFun(); this.getFivesYearMarriageLineFun();
this.getMarriageStatsFun(); this.getMarriageStatsFun();
this.getAreaUnderMarriageStatsListFun() this.getAreaUnderMarriageStatsListFun();
this.getMapData("g450000"); //默认展示广西 g450000
}, },
methods: { methods: {
getFivesYearMarriageLineFun() { getFivesYearMarriageLineFun(data) {
getFivesYearMarriageLine({}).then((res) => { getFivesYearMarriageLine({
areaCode: data,
}).then((res) => {
console.log(res, "获取近5年结婚走势"); console.log(res, "获取近5年结婚走势");
this.marriageLine = res.data.admin; this.marriageLine = res.data.admin;
this.mainInfo(res.data.admin); this.mainInfo(res.data.admin);
}); });
}, },
getMarriageStatsFun() { getMarriageStatsFun(data) {
getMarriageStats({}).then((res) => { getMarriageStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取结婚离婚人数"); console.log(res, "获取结婚离婚人数");
this.marriageStats = res.data; this.marriageStats = res.data;
}); });
}, },
getAreaUnderMarriageStatsListFun(){ getAreaUnderMarriageStatsListFun(data) {
getAreaUnderMarriageStatsList({}).then(res =>{ getAreaUnderMarriageStatsList({
console.log(res,'获取地区结婚离婚人数列表') areaCode: data,
this.areaUnderMarriageStatsList = res.data }).then((res) => {
}) console.log(res, "获取地区结婚离婚人数列表");
this.areaUnderMarriageStatsList = res.data;
this.annualStatisticsFun();
});
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.marriageMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getFivesYearMarriageLineFun("450000");
this.getMarriageStatsFun("450000");
this.getAreaUnderMarriageStatsListFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
marriageMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("marriageMap"));
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.getFivesYearMarriageLineFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getMarriageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaUnderMarriageStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
}, },
//婚姻5年趋势 //婚姻5年趋势
...@@ -537,6 +682,12 @@ export default { ...@@ -537,6 +682,12 @@ export default {
margin-left: 20px; margin-left: 20px;
} }
.marriageMap {
width: 100%;
height: 500px;
background-color: #082c61;
}
.wian { .wian {
width: 100%; width: 100%;
height: 400px; height: 400px;
......
src/views/unified/tapSwitch/mechanism.vue
...@@ -30,7 +30,11 @@ ...@@ -30,7 +30,11 @@
<el-col :span="18"> <el-col :span="18">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"> <el-col :span="16">
<div class="wians"></div> <div class="wians">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="mechanismMap" id="mechanismMap"></div>
</div>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
...@@ -42,9 +46,9 @@ ...@@ -42,9 +46,9 @@
:data="tableData" :data="tableData"
stripe stripe
height="400" height="400"
:header-cell-style="{ background: '#042465', color: '#fff'}" :header-cell-style="{ background: '#042465', color: '#fff' }"
:cell-style="{ background: '#022872', color: '#fff'}" :cell-style="{ background: '#022872', color: '#fff' }"
style="width: 300px;margib-left:10px" style="width: 300px; margib-left: 10px"
> >
<el-table-column prop="date" label="排名" align="center"> <el-table-column prop="date" label="排名" align="center">
</el-table-column> </el-table-column>
...@@ -54,7 +58,6 @@ ...@@ -54,7 +58,6 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -103,10 +106,17 @@ ...@@ -103,10 +106,17 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import { getSoorganStats,getAreaUnderSoorganStatsList,getAreaNursingStatsList,getAgencyPercentageStats } from "@/api/unified/unified"; import {
getSoorganStats,
getAreaUnderSoorganStatsList,
getAreaNursingStatsList,
getAgencyPercentageStats,
getMapData,
} from "@/api/unified/unified";
export default { export default {
data() { data() {
return { return {
num: 0,
tableData: [ tableData: [
{ {
date: "1", date: "1",
...@@ -171,42 +181,53 @@ export default { ...@@ -171,42 +181,53 @@ export default {
}, },
], ],
soorganStats: {}, soorganStats: {},
areaUnderSoorganStatsList:{}, areaUnderSoorganStatsList: {},
areaNursingStatsList:{}, areaNursingStatsList: {},
agencyPercentageStats:[], agencyPercentageStats: [],
welfareHomeName: [], welfareHomeName: [],
}; };
}, },
created() { created() {
this.getSoorganStatsFun(); this.getSoorganStatsFun();
this.getAreaUnderSoorganStatsListFun() this.getAreaUnderSoorganStatsListFun();
this.getAreaNursingStatsListFun() this.getAreaNursingStatsListFun();
this.getAgencyPercentageStatsFun() this.getAgencyPercentageStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000
}, },
methods: { methods: {
getSoorganStatsFun() { getSoorganStatsFun(data) {
getSoorganStats({}).then((res) => { getSoorganStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取社会机构统计"); console.log(res, "获取社会机构统计");
this.soorganStats = res.data; this.soorganStats = res.data;
}); });
}, },
getAreaUnderSoorganStatsListFun(){ getAreaUnderSoorganStatsListFun(data) {
getAreaUnderSoorganStatsList({}).then(res =>{ getAreaUnderSoorganStatsList({
console.log(res,'获取地区下面社会机构统计列表') areaCode: data,
this.areaUnderSoorganStatsList = res.data }).then((res) => {
}) console.log(res, "获取地区下面社会机构统计列表");
this.areaUnderSoorganStatsList = res.data;
this.sociologyFun();
});
}, },
getAreaNursingStatsListFun(){ getAreaNursingStatsListFun(data) {
getAreaNursingStatsList({}).then(res =>{ getAreaNursingStatsList({
console.log(res,'获取区域养老院统计列表') areaCode: data,
this.areaNursingStatsList = res.data }).then((res) => {
}) console.log(res, "获取区域养老院统计列表");
this.areaNursingStatsList = res.data;
this.pensionFun();
});
}, },
getAgencyPercentageStatsFun() { getAgencyPercentageStatsFun(data) {
getAgencyPercentageStats({}).then((res) => { getAgencyPercentageStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取区域机构占比"); console.log(res, "获取区域机构占比");
this.agencyPercentageStats = res.data; this.agencyPercentageStats = res.data;
res.data.forEach((item) => { res.data.forEach((item) => {
...@@ -217,6 +238,139 @@ export default { ...@@ -217,6 +238,139 @@ export default {
}); });
}, },
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.mechanismMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getSoorganStatsFun("450000");
this.getAreaUnderSoorganStatsListFun("450000");
this.getAreaNursingStatsListFun("450000");
this.getAgencyPercentageStatsFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
mechanismMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("mechanismMap"));
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.getAreaUnderSoorganStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaNursingStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAgencyPercentageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
},
//社会组织柱形图 //社会组织柱形图
sociologyFun() { sociologyFun() {
var chartDom = document.getElementById("sociology"); var chartDom = document.getElementById("sociology");
...@@ -568,10 +722,7 @@ export default { ...@@ -568,10 +722,7 @@ export default {
}, },
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {}, 1000);
this.sociologyFun();
this.pensionFun();
}, 1000);
}, },
}; };
</script> </script>
...@@ -580,12 +731,12 @@ export default { ...@@ -580,12 +731,12 @@ export default {
.el-table th { .el-table th {
overflow: hidden; overflow: hidden;
background-color: #082C61; background-color: #082c61;
} }
.el-table--small { .el-table--small {
background-color: #082C61; background-color: #082c61;
} }
::v-deep{ ::v-deep {
.el-table__body-wrapper::-webkit-scrollbar-thumb { .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd; background-color: #ddd;
border-radius: 3px; border-radius: 3px;
...@@ -600,7 +751,7 @@ export default { ...@@ -600,7 +751,7 @@ export default {
z-index: 99; z-index: 99;
width: 300px; width: 300px;
overflow: hidden; overflow: hidden;
margin:auto; margin: auto;
} }
.classification { .classification {
...@@ -617,7 +768,7 @@ export default { ...@@ -617,7 +768,7 @@ export default {
.numText { .numText {
font-size: 20px; font-size: 20px;
color: #3A92F1; color: #3a92f1;
text-align: center; text-align: center;
} }
.sociology { .sociology {
...@@ -664,6 +815,12 @@ export default { ...@@ -664,6 +815,12 @@ export default {
display: flex; display: flex;
} }
.mechanismMap {
width: 100%;
height: 500px;
background-color: #082c61;
}
.wian { .wian {
width: 100%; width: 100%;
height: 400px; height: 400px;
......
src/views/unified/tapSwitch/population.vue
...@@ -71,7 +71,13 @@ ...@@ -71,7 +71,13 @@
<!-- 中 --> <!-- 中 -->
<el-col :span="12"> <el-col :span="12">
<el-row :gutter="20"> <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="title" @click="returnInfo">返回上一级</div>
<div class="populationMap" id="populationMap"></div>
</div>
</el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -93,13 +99,17 @@ ...@@ -93,13 +99,17 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<div class="rescue"> <div class="rescue">
<div class="size24">{{ threeYeartTotalData.cityToatlNum }}</div> <div class="size24">
{{ threeYeartTotalData.cityToatlNum }}
</div>
<div class="size16">城市</div> <div class="size16">城市</div>
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="rescue"> <div class="rescue">
<div class="size24">{{ threeYeartTotalData.villageToatlNum }}</div> <div class="size24">
{{ threeYeartTotalData.villageToatlNum }}
</div>
<div class="size16">农村</div> <div class="size16">农村</div>
</div> </div>
</el-col> </el-col>
...@@ -133,16 +143,18 @@ import { ...@@ -133,16 +143,18 @@ import {
getMarriageStats, getMarriageStats,
getAgencyChildStatsList, getAgencyChildStatsList,
getThreeYearShjzAchieveStats, getThreeYearShjzAchieveStats,
getAreaDisabledIssueStats getAreaDisabledIssueStats,
getMapData,
} from "@/api/unified/unified"; } from "@/api/unified/unified";
export default { export default {
data() { data() {
return { return {
num:0,
marriageLine: {}, marriageLine: {},
marriageStats: {}, marriageStats: {},
threeYearShjzAchieveStats: {}, threeYearShjzAchieveStats: {},
threeYeartTotalData: {}, threeYeartTotalData: {},
areaDisabledIssueStats:{} areaDisabledIssueStats: {},
}; };
}, },
created() { created() {
...@@ -150,33 +162,44 @@ export default { ...@@ -150,33 +162,44 @@ export default {
this.getMarriageStatsFun(); this.getMarriageStatsFun();
this.getAgencyChildStatsListFun(); this.getAgencyChildStatsListFun();
this.getThreeYearShjzAchieveStatsFun(); this.getThreeYearShjzAchieveStatsFun();
this.getAreaDisabledIssueStatsFun() this.getAreaDisabledIssueStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000
}, },
methods: { methods: {
getFivesYearMarriageLineFun() { getFivesYearMarriageLineFun(data) {
getFivesYearMarriageLine({}).then((res) => { console.log(data);
getFivesYearMarriageLine({
areaCode: data,
}).then((res) => {
console.log(res, "获取近5年结婚走势"); console.log(res, "获取近5年结婚走势");
this.marriageLine = res.data.admin; this.marriageLine = res.data.admin;
this.mainInfo(res.data.admin); this.mainInfo(res.data.admin);
}); });
}, },
getMarriageStatsFun() { getMarriageStatsFun(data) {
getMarriageStats({}).then((res) => { getMarriageStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取结婚离婚人数"); console.log(res, "获取结婚离婚人数");
this.marriageStats = res.data; this.marriageStats = res.data;
}); });
}, },
getAgencyChildStatsListFun() { getAgencyChildStatsListFun(data) {
getAgencyChildStatsList({}).then((res) => { getAgencyChildStatsList({
areaCode: data,
}).then((res) => {
console.log(res, "儿童福利统计"); console.log(res, "儿童福利统计");
this.agencyChildStatsList = res.data; this.agencyChildStatsList = res.data;
this.orphanFun()
}); });
}, },
getThreeYearShjzAchieveStatsFun() { getThreeYearShjzAchieveStatsFun(data) {
getThreeYearShjzAchieveStats({}).then((res) => { getThreeYearShjzAchieveStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取近三年城市农村低保发放人数统计"); console.log(res, "获取近三年城市农村低保发放人数统计");
this.threeYearShjzAchieveStats = res.data.admin; this.threeYearShjzAchieveStats = res.data.admin;
this.threeYeartTotalData = res.data.totalData; this.threeYeartTotalData = res.data.totalData;
...@@ -184,14 +207,152 @@ export default { ...@@ -184,14 +207,152 @@ export default {
}); });
}, },
getAreaDisabledIssueStatsFun(){ getAreaDisabledIssueStatsFun(data) {
getAreaDisabledIssueStats({ getAreaDisabledIssueStats({
year:2021 year: 2021,
}).then(res =>{ areaCode: data,
console.log(res,'残疾人两项补贴') }).then((res) => {
this.areaDisabledIssueStats = res.data console.log(res, "残疾人两项补贴");
this.annualStatisticsFun(res.data) this.areaDisabledIssueStats = res.data;
}) this.annualStatisticsFun(res.data);
});
},
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.populationMap([], res);
});
},
returnInfo() {
this.num = 0
this.getMapData("g450000");
this.getFivesYearMarriageLineFun("450000");
this.getMarriageStatsFun("450000");
this.getAgencyChildStatsListFun("450000");
this.getThreeYearShjzAchieveStatsFun("450000");
this.getAreaDisabledIssueStatsFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
populationMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("populationMap"));
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.getFivesYearMarriageLineFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getMarriageStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAgencyChildStatsListFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getThreeYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaDisabledIssueStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
});
}, },
//儿童福利统计 //儿童福利统计
...@@ -559,7 +720,7 @@ export default { ...@@ -559,7 +720,7 @@ export default {
}, },
// 残疾人两项补贴 // 残疾人两项补贴
annualStatisticsFun(data) { annualStatisticsFun(data) {
console.log(data) console.log(data);
var chartDom = document.getElementById("annualStatistics"); var chartDom = document.getElementById("annualStatistics");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom, "dark");
var option; var option;
...@@ -669,7 +830,7 @@ export default { ...@@ -669,7 +830,7 @@ export default {
}, },
}, },
legend: { legend: {
data: ['贫困残疾人','重度残疾人'], data: ["贫困残疾人", "重度残疾人"],
}, },
toolbox: { toolbox: {
show: true, show: true,
...@@ -793,11 +954,11 @@ export default { ...@@ -793,11 +954,11 @@ export default {
} }
.size24Info { .size24Info {
font-size: 24px; font-size: 24px;
color: #C1BDBD; color: #c1bdbd;
} }
.size16Info { .size16Info {
font-size: 16; font-size: 16;
color: #C1BDBD; color: #c1bdbd;
} }
.rescue { .rescue {
text-align: center; text-align: center;
...@@ -842,6 +1003,12 @@ export default { ...@@ -842,6 +1003,12 @@ export default {
display: flex; display: flex;
} }
.populationMap {
width: 100%;
height: 500px;
background-color: #082c61;
}
.wian { .wian {
width: 100%; width: 100%;
height: 400px; height: 400px;
......
src/views/unified/tapSwitch/socialAssistance.vue
...@@ -75,7 +75,13 @@ ...@@ -75,7 +75,13 @@
<!-- 中 --> <!-- 中 -->
<el-col :span="12"> <el-col :span="12">
<el-row :gutter="20"> <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="title" @click="returnInfo">返回上一级</div>
<div class="socialAssistanceMap" id="socialAssistanceMap"></div>
</div>
</el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -126,10 +132,12 @@ import { ...@@ -126,10 +132,12 @@ import {
getThreeYearShjzProvideStats, getThreeYearShjzProvideStats,
getFivesYearShjzAchieveStats, getFivesYearShjzAchieveStats,
getAreaYearShjzAchieveStats, getAreaYearShjzAchieveStats,
getMapData,
} from "@/api/unified/unified"; } from "@/api/unified/unified";
export default { export default {
data() { data() {
return { return {
num: 0,
tableData: [ tableData: [
{ {
date: "2016-05-02", date: "2016-05-02",
...@@ -146,7 +154,7 @@ export default { ...@@ -146,7 +154,7 @@ export default {
threeYearShjzProvideStats: {}, threeYearShjzProvideStats: {},
fivesYearShjzAchieveStats: {}, fivesYearShjzAchieveStats: {},
areaYearShjzAchieveStats: {}, areaYearShjzAchieveStats: {},
cityNames:[], cityNames: [],
cityAndvillagePeople: {}, // 五年享受低保资金人数 cityAndvillagePeople: {}, // 五年享受低保资金人数
cityAndvillageNum: {}, // 五年享受低保资金总数 cityAndvillageNum: {}, // 五年享受低保资金总数
}; };
...@@ -156,10 +164,13 @@ export default { ...@@ -156,10 +164,13 @@ export default {
this.getThreeYearShjzProvideStatsFun(); this.getThreeYearShjzProvideStatsFun();
this.getFivesYearShjzAchieveStatsFun(); this.getFivesYearShjzAchieveStatsFun();
this.getAreaYearShjzAchieveStatsFun(); this.getAreaYearShjzAchieveStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000
}, },
methods: { methods: {
getThreeYearShjzAchieveStatsFun() { getThreeYearShjzAchieveStatsFun(data) {
getThreeYearShjzAchieveStats({}).then((res) => { getThreeYearShjzAchieveStats({
areaCode: data,
}).then((res) => {
console.log(res, "获取近三年城市农村低保发放人数统计"); console.log(res, "获取近三年城市农村低保发放人数统计");
this.threeYearShjzAchieveStats = res.data.admin; this.threeYearShjzAchieveStats = res.data.admin;
this.cityAndvillagePeople = res.data.totalData; this.cityAndvillagePeople = res.data.totalData;
...@@ -167,8 +178,8 @@ export default { ...@@ -167,8 +178,8 @@ export default {
}); });
}, },
getThreeYearShjzProvideStatsFun() { getThreeYearShjzProvideStatsFun(data) {
getThreeYearShjzProvideStats({}).then((res) => { getThreeYearShjzProvideStats({ areaCode: data }).then((res) => {
console.log(res, "获取近三年城市农村低保发放金额统计"); console.log(res, "获取近三年城市农村低保发放金额统计");
this.threeYearShjzProvideStats = res.data.admin; this.threeYearShjzProvideStats = res.data.admin;
this.cityAndvillageNum = res.data.totalData; this.cityAndvillageNum = res.data.totalData;
...@@ -176,24 +187,157 @@ export default { ...@@ -176,24 +187,157 @@ export default {
}); });
}, },
getFivesYearShjzAchieveStatsFun() { getFivesYearShjzAchieveStatsFun(data) {
getFivesYearShjzAchieveStats({}).then((res) => { getFivesYearShjzAchieveStats({ areaCode: data }).then((res) => {
console.log(res, "农村城市低保人数统计"); console.log(res, "农村城市低保人数统计");
this.fivesYearShjzAchieveStats = res.data.admin; this.fivesYearShjzAchieveStats = res.data.admin;
}); });
}, },
getAreaYearShjzAchieveStatsFun() { getAreaYearShjzAchieveStatsFun(data) {
getAreaYearShjzAchieveStats({}).then((res) => { getAreaYearShjzAchieveStats({ areaCode: data }).then((res) => {
console.log(res, "获取近三年城市农村低保发放人数统计 城市柱形图"); console.log(res, "获取近三年城市农村低保发放人数统计 城市柱形图");
this.areaYearShjzAchieveStats = res.data; this.areaYearShjzAchieveStats = res.data;
res.data.areaList.forEach(item => { // res.data.areaList.forEach(item => {
this.cityNames.push( // this.cityNames.push(
item.name // item.name
) // )
// });
// console.log(this.cityNames);
this.ruralAndcityFun();
}); });
console.log(this.cityNames); },
this.ruralAndcityFun()
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.socialAssistanceMap([], res);
});
},
returnInfo() {
this.num = 0;
this.getMapData("g450000");
this.getThreeYearShjzAchieveStatsFun("450000");
this.getThreeYearShjzProvideStatsFun("450000");
this.getFivesYearShjzAchieveStatsFun("450000");
this.getAreaYearShjzAchieveStatsFun("450000");
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
socialAssistanceMap(dataList, mapList, max, min) {
console.log(dataList, mapList);
let map = echarts.init(document.getElementById("socialAssistanceMap"));
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.getThreeYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getThreeYearShjzProvideStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getFivesYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
this.getAreaYearShjzAchieveStatsFun(
mapList.features[res.dataIndex].properties.adcode
);
}
}); });
}, },
...@@ -526,7 +670,7 @@ export default { ...@@ -526,7 +670,7 @@ export default {
{ {
type: "category", type: "category",
axisTick: { show: false }, axisTick: { show: false },
data: this.cityNames, data: this.areaYearShjzAchieveStats.areaList,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#FFFFFF", color: "#FFFFFF",
...@@ -665,6 +809,12 @@ export default { ...@@ -665,6 +809,12 @@ export default {
margin-left: 20px; margin-left: 20px;
} }
.socialAssistanceMap {
width: 100%;
height: 500px;
background-color: #082c61;
}
.wian { .wian {
width: 100%; width: 100%;
height: 416px; height: 416px;
......
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