Skip to content

C
civil-front
Commit f50a57d6 by 苏咏卓
Options

完成地图，查询

parent 0ed15335
Showing with 595 additions and 165 deletions
.env.development
ENV = 'development' ENV = 'development'
# 接口地址 # 接口地址
VUE_APP_BASE_API = 'http://172.18.99.141:9888' VUE_APP_BASE_API = 'http://172.18.99.141:9888/'
VUE_APP_WS_API = 'ws://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插件 # 是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true
.env.production
...@@ -2,6 +2,6 @@ ENV = 'production' ...@@ -2,6 +2,6 @@ ENV = 'production'
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置 # 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
VUE_APP_BASE_API = 'https://el-admin.xin' VUE_APP_BASE_API = 'http://124.227.197.29:8088'
# 如果接口是 http 形式， wss 需要改为 ws # 如果接口是 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 => { ...@@ -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 => { export const getSoorganPercentageStats = data => {
...@@ -65,6 +83,17 @@ 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 => { export const getThreeYearShjzAchieveStats = data => {
...@@ -106,6 +135,16 @@ export const getFivesYearShjzProvideStats = 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 => { export const getAreaYearShjzAchieveStats = data => {
return request({ return request({
...@@ -116,6 +155,16 @@ export const getAreaYearShjzAchieveStats = data => { ...@@ -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 => { export const getAgencyChildStats = data => {
...@@ -153,8 +202,27 @@ export const getAgencyUnderChildStatsList = 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 => { export const getCremationStats = data => {
return request({ return request({
url: 'portal/admin/stats/getCremationStats', url: 'portal/admin/stats/getCremationStats',
...@@ -164,6 +232,26 @@ export const getCremationStats = data => { ...@@ -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 => { export const getAreaDisabledIssueStats = data => {
...@@ -207,9 +295,9 @@ export const getAreaNursingStatsList = data => { ...@@ -207,9 +295,9 @@ export const getAreaNursingStatsList = data => {
/** -------------------- 地图 -------------------- **/ /** -------------------- 地图 -------------------- **/
//获取地图数据 //获取地图数据
export const getMapData = (areaId) =>{ export const getMapData = (areaId) => {
return request({ return request({
url:`portal/static/map/${areaId}.json`, url: `portal/static/map/${areaId}.json`,
method: 'get' method: 'get'
}) })
} }
\ No newline at end of file
src/layout/components/Sidebar/Logo.vue
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
}, },
data() { data() {
return { return {
title: 'ELADMIN-后台管理', title: '广西民政决策分析',
logo: Logo logo: Logo
} }
} }
......
src/views/login.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="login" :style="'background-image:url('+ Background +');'"> <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"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
<h3 class="title"> <h3 class="title">
EL-ADMIN 后台管理系统 广西民政决策分析
</h3> </h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
......
src/views/unified/tapSwitch/marriage.vue
...@@ -8,6 +8,15 @@ ...@@ -8,6 +8,15 @@
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="wian">
<div class="title">婚姻统计</div> <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 id="mainInfo" class="trend"></div>
</div> </div>
</el-col> </el-col>
...@@ -19,14 +28,14 @@ ...@@ -19,14 +28,14 @@
<div class="title">婚姻统计</div> <div class="title">婚姻统计</div>
<div class="marriageStatistics"> <div class="marriageStatistics">
<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">{{ marriageStats.marryNum }}</div> <div class="yellowNum">{{ marriageStats.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"> <div class="yellowNum">
...@@ -35,14 +44,14 @@ ...@@ -35,14 +44,14 @@
</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">{{ marriageStats.divorceNum }}</div> <div class="yellowNum">{{ marriageStats.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"> <div class="yellowNum">
...@@ -63,8 +72,8 @@ ...@@ -63,8 +72,8 @@
<el-col :span="24" <el-col :span="24"
><div class="wians"> ><div class="wians">
<div class="title">当前选择：广西全区</div> <div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="marriageMap" id="marriageMap"></div> <div class="marriageMap" id="marriageMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -85,24 +94,49 @@ ...@@ -85,24 +94,49 @@
<el-col :span="24"> <el-col :span="24">
<div class="wiansInfo"> <div class="wiansInfo">
<div class="title">婚姻统计</div> <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 <el-table
:data="tableData" :data="tableData"
stripe stripe
height="0" style="width: 100%; background-color: #051d3f; color: #2177b9"
:row-style="{ height: '10px' }" :header-cell-style="{ background: '#082C61', color: '#DAD7DB' }"
:cell-style="{ height: '10px' }" :cell-style="{ background: '#082C61', color: '#DAD7DB' }"
style="width: 300px" >
<el-table-column
type="index"
label="序号"
align="center"
width="50px"
> >
<el-table-column prop="date" label="序号" align="center">
</el-table-column> </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>
<el-table-column prop="address" label="所在地" align="center"> <el-table-column
prop="manDomicile"
label="所在地"
align="center"
>
</el-table-column> </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>
<el-table-column prop="address" label="时间" align="center"> <el-table-column
prop="registerDate"
label="时间"
align="center"
>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
...@@ -124,27 +158,18 @@ import { ...@@ -124,27 +158,18 @@ import {
getFivesYearMarriageLine, getFivesYearMarriageLine,
getMarriageStats, getMarriageStats,
getAreaUnderMarriageStatsList, getAreaUnderMarriageStatsList,
marriageSearch,
getMapData, getMapData,
} from "@/api/unified/unified"; } from "@/api/unified/unified";
export default { export default {
data() { data() {
return { return {
num: 0, num: 0,
tableData: [ tableData: [],
{
date: "1",
name: "王小虎",
address: "1518",
},
{
date: "2",
name: "王小虎",
address: "1517",
},
],
marriageLine: {}, marriageLine: {},
marriageStats: {}, marriageStats: {},
areaUnderMarriageStatsList: {}, areaUnderMarriageStatsList: {},
value: "",
}; };
}, },
created() { created() {
...@@ -152,8 +177,23 @@ export default { ...@@ -152,8 +177,23 @@ export default {
this.getMarriageStatsFun(); this.getMarriageStatsFun();
this.getAreaUnderMarriageStatsListFun(); this.getAreaUnderMarriageStatsListFun();
this.getMapData("g450000"); //默认展示广西 g450000 this.getMapData("g450000"); //默认展示广西 g450000
this.marriageSearchFun();
}, },
methods: { methods: {
inputBtn() {
console.log(this.value);
this.marriageSearchFun();
},
marriageSearchFun() {
marriageSearch({
keyword: this.value,
}).then((res) => {
console.log(res, "搜索");
this.tableData = res.data;
});
},
getFivesYearMarriageLineFun(data) { getFivesYearMarriageLineFun(data) {
getFivesYearMarriageLine({ getFivesYearMarriageLine({
areaCode: data, areaCode: data,
...@@ -332,7 +372,7 @@ export default { ...@@ -332,7 +372,7 @@ export default {
trigger: "axis", trigger: "axis",
}, },
legend: { legend: {
top: "3%", top: "2%",
data: ["结婚", "离婚"], data: ["结婚", "离婚"],
}, },
grid: { grid: {
...@@ -640,7 +680,7 @@ export default { ...@@ -640,7 +680,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.trend { .trend {
width: 100%; width: 100%;
height: 350px; height: 280px;
} }
.annualStatistics { .annualStatistics {
margin-top: 10px; margin-top: 10px;
...@@ -684,7 +724,7 @@ export default { ...@@ -684,7 +724,7 @@ export default {
.marriageMap { .marriageMap {
width: 100%; width: 100%;
height: 500px; height: 430px;
background-color: #082c61; background-color: #082c61;
} }
...@@ -697,7 +737,7 @@ export default { ...@@ -697,7 +737,7 @@ export default {
.wians { .wians {
width: 100%; width: 100%;
height: 500px; height: 500px;
background-color: blanchedalmond; background-color: #082c61;
} }
.wianss { .wianss {
...@@ -709,6 +749,63 @@ export default { ...@@ -709,6 +749,63 @@ export default {
.wiansInfo { .wiansInfo {
width: 100%; width: 100%;
height: 818px; 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> </style>
\ No newline at end of file
src/views/unified/tapSwitch/mechanism.vue
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
<el-col :span="16"> <el-col :span="16">
<div class="wians"> <div class="wians">
<div class="title">当前选择：广西全区</div> <div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="mechanismMap" id="mechanismMap"></div> <div class="mechanismMap" id="mechanismMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div> </div>
</el-col> </el-col>
...@@ -45,16 +45,18 @@ ...@@ -45,16 +45,18 @@
<el-table <el-table
:data="tableData" :data="tableData"
stripe stripe
height="400" style="width: 100%; background-color: #051d3f; color: #2177b9"
:header-cell-style="{ background: '#042465', color: '#fff' }" :header-cell-style="{
:cell-style="{ background: '#022872', color: '#fff' }" background: '#082C61',
style="width: 300px; margib-left: 10px" 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>
<el-table-column prop="name" label="区域名称" align="center"> <el-table-column prop="name" label="区域名称" align="center">
</el-table-column> </el-table-column>
<el-table-column prop="address" label="数量" align="center"> <el-table-column prop="num" label="数量" align="center">
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
...@@ -117,69 +119,7 @@ export default { ...@@ -117,69 +119,7 @@ export default {
data() { data() {
return { return {
num: 0, num: 0,
tableData: [ 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",
},
],
soorganStats: {}, soorganStats: {},
areaUnderSoorganStatsList: {}, areaUnderSoorganStatsList: {},
areaNursingStatsList: {}, areaNursingStatsList: {},
...@@ -220,6 +160,7 @@ export default { ...@@ -220,6 +160,7 @@ export default {
}).then((res) => { }).then((res) => {
console.log(res, "获取区域养老院统计列表"); console.log(res, "获取区域养老院统计列表");
this.areaNursingStatsList = res.data; this.areaNursingStatsList = res.data;
this.tableData = res.data.statsLst;
this.pensionFun(); this.pensionFun();
}); });
}, },
...@@ -817,7 +758,7 @@ export default { ...@@ -817,7 +758,7 @@ export default {
.mechanismMap { .mechanismMap {
width: 100%; width: 100%;
height: 500px; height: 430px;
background-color: #082c61; background-color: #082c61;
} }
...@@ -835,6 +776,12 @@ export default { ...@@ -835,6 +776,12 @@ export default {
width: 100%; width: 100%;
height: 500px; height: 500px;
background-color: #082c61; background-color: #082c61;
overflow: hidden;
overflow-y: scroll;
}
.wians::-webkit-scrollbar {
display: none;
} }
.wianss { .wianss {
...@@ -848,4 +795,10 @@ export default { ...@@ -848,4 +795,10 @@ export default {
height: 818px; height: 818px;
background-color: #082c61; background-color: #082c61;
} }
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
</style> </style>
\ No newline at end of file
src/views/unified/tapSwitch/population.vue
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
<el-col :span="12"> <el-col :span="12">
<el-row> <el-row>
<el-col :span="6" :offset="2"> <el-col :span="6" :offset="2">
<div class="marriageImg"></div> <!-- <div class="marriageImg"></div> -->
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<div class="marriageNum"> <div class="marriageNum">
<div class="size16">结婚总数</div> <div class="size16">结婚总数(对)</div>
<div class="size16">{{ marriageStats.marryNum }}</div> <div class="size16">{{ marriageStats.marryNum }}</div>
</div> </div>
</el-col> </el-col>
...@@ -25,13 +25,13 @@ ...@@ -25,13 +25,13 @@
<el-col :span="12"> <el-col :span="12">
<el-row justify="center"> <el-row justify="center">
<el-col :span="6"> <el-col :span="6">
<div class="marriageImg"></div> <!-- <div class="marriageImg"></div> -->
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div class="marriageNum"> <div class="marriageNum">
<div class="size16">结婚总数</div> <div class="size16">离婚总数(对)</div>
<div class="size16"> <div class="size16">
{{ marriageStats.inDivorceNum }} {{ marriageStats.divorceNum }}
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -74,8 +74,8 @@ ...@@ -74,8 +74,8 @@
<el-col :span="24" <el-col :span="24"
><div class="wians"> ><div class="wians">
<div class="title">当前选择：广西全区</div> <div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="populationMap" id="populationMap"></div> <div class="populationMap" id="populationMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -1005,7 +1005,7 @@ export default { ...@@ -1005,7 +1005,7 @@ export default {
.populationMap { .populationMap {
width: 100%; width: 100%;
height: 500px; height: 430px;
background-color: #082c61; background-color: #082c61;
} }
...@@ -1032,4 +1032,10 @@ export default { ...@@ -1032,4 +1032,10 @@ export default {
height: 818px; height: 818px;
background-color: #082c61; background-color: #082c61;
} }
.returnInfos {
font-size: 16px;
color: #fff;
margin: 0px 0 0 30px;
}
</style> </style>
\ No newline at end of file
src/views/unified/tapSwitch/socialAssistance.vue
...@@ -78,8 +78,8 @@ ...@@ -78,8 +78,8 @@
<el-col :span="24" <el-col :span="24"
><div class="wians"> ><div class="wians">
<div class="title">当前选择：广西全区</div> <div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="socialAssistanceMap" id="socialAssistanceMap"></div> <div class="socialAssistanceMap" id="socialAssistanceMap"></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -99,17 +99,59 @@ ...@@ -99,17 +99,59 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wiansInfo"> <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 <el-table
:data="tableData" :data="tableData"
stripe 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
type="index"
label="序号"
align="center"
width="50px"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
align="center"
width="50px"
> >
<el-table-column prop="date" label="区域名称" align="center">
</el-table-column> </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>
<el-table-column prop="address" label="离婚整数" align="center"> <!-- <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-column>
</el-table> </el-table>
</div> </div>
...@@ -132,24 +174,15 @@ import { ...@@ -132,24 +174,15 @@ import {
getThreeYearShjzProvideStats, getThreeYearShjzProvideStats,
getFivesYearShjzAchieveStats, getFivesYearShjzAchieveStats,
getAreaYearShjzAchieveStats, getAreaYearShjzAchieveStats,
lowIncomeSearch,
getMapData, getMapData,
} from "@/api/unified/unified"; } from "@/api/unified/unified";
export default { export default {
data() { data() {
return { return {
num: 0, num: 0,
tableData: [ tableData: [],
{ values: "",
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
],
fivesYearShjzAchieveStats: {}, fivesYearShjzAchieveStats: {},
threeYearShjzProvideStats: {}, threeYearShjzProvideStats: {},
fivesYearShjzAchieveStats: {}, fivesYearShjzAchieveStats: {},
...@@ -157,6 +190,7 @@ export default { ...@@ -157,6 +190,7 @@ export default {
cityNames: [], cityNames: [],
cityAndvillagePeople: {}, // 五年享受低保资金人数 cityAndvillagePeople: {}, // 五年享受低保资金人数
cityAndvillageNum: {}, // 五年享受低保资金总数 cityAndvillageNum: {}, // 五年享受低保资金总数
value: {},
}; };
}, },
created() { created() {
...@@ -165,8 +199,31 @@ export default { ...@@ -165,8 +199,31 @@ export default {
this.getFivesYearShjzAchieveStatsFun(); this.getFivesYearShjzAchieveStatsFun();
this.getAreaYearShjzAchieveStatsFun(); this.getAreaYearShjzAchieveStatsFun();
this.getMapData("g450000"); //默认展示广西 g450000 this.getMapData("g450000"); //默认展示广西 g450000
this.lowIncomeSearchFun();
}, },
methods: { 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) { getThreeYearShjzAchieveStatsFun(data) {
getThreeYearShjzAchieveStats({ getThreeYearShjzAchieveStats({
areaCode: data, areaCode: data,
...@@ -811,32 +868,38 @@ export default { ...@@ -811,32 +868,38 @@ export default {
.socialAssistanceMap { .socialAssistanceMap {
width: 100%; width: 100%;
height: 500px; height: 430px;
background-color: #082c61; background-color: #082c61;
} }
.wian { .wian {
width: 100%; width: 100%;
height: 416px; height: 415px;
background-color: #082c61; background-color: #082c61;
} }
.wians { .wians {
width: 100%; width: 100%;
height: 500px; height: 500px;
background-color: blanchedalmond; background-color: #082c61;
} }
.wianss { .wianss {
width: 100%; width: 100%;
height: 300px; height: 330px;
background-color: #082c61; background-color: #082c61;
} }
.wiansInfo { .wiansInfo {
width: 100%; width: 100%;
height: 848px; height: 848px;
background-color: blanchedalmond; background-color: #082c61;
overflow: hidden;
overflow-y: scroll;
}
.wiansInfo::-webkit-scrollbar {
display: none;
} }
.display { .display {
...@@ -888,4 +951,32 @@ export default { ...@@ -888,4 +951,32 @@ export default {
width: 100%; width: 100%;
height: 300px; 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> </style>
\ No newline at end of file
src/views/unified/tapSwitch/socialOrganization.vue
...@@ -61,7 +61,16 @@ ...@@ -61,7 +61,16 @@
<!-- 中 --> <!-- 中 -->
<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="socialOrganizationMap"
id="socialOrganizationMap"
></div>
<a class="returnInfos" @click="returnInfo">返回上一级</a>
</div>
</el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -110,17 +119,27 @@ ...@@ -110,17 +119,27 @@
<el-col :span="24"> <el-col :span="24">
<div class="wiansInfo"> <div class="wiansInfo">
<div class="title">婚姻统计</div> <div class="title">婚姻统计</div>
<el-input
type="text"
placeholder="请输入组织代码或名称查询"
class="input"
v-model="value"
@change="inputBtn"
suffix-icon="el-icon-search"
/>
<el-table <el-table
:data="tableData" :data="tableData"
stripe stripe
style="width: 100%; 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>
<el-table-column prop="name" label="地区" align="center"> <el-table-column prop="name" label="社会组织名称" align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="address" prop="regno"
label="组织名称/代码" label="组织名称/代码"
align="center" align="center"
> >
...@@ -145,57 +164,197 @@ import { ...@@ -145,57 +164,197 @@ import {
getSoorganStats, getSoorganStats,
getSoorganPercentageStats, getSoorganPercentageStats,
getAreaUnderSoorganStatsList, getAreaUnderSoorganStatsList,
soorganSearch,
getMapData,
} from "@/api/unified/unified"; } from "@/api/unified/unified";
export default { export default {
data() { data() {
return { return {
tableData: [ num: 0,
{ tableData: [],
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
],
soorganStats: {}, soorganStats: {},
SoorganPercentageStats: [], SoorganPercentageStats: [],
placeNames: [], placeNames: [],
soorganStats: {}, soorganStats: {},
areaUnderSoorganStatsList: {}, areaUnderSoorganStatsList: {},
value: "",
}; };
}, },
created() { created() {
this.getSoorganStatsFun(); this.getSoorganStatsFun();
this.getSoorganPercentageStatsFun(); this.getSoorganPercentageStatsFun();
this.getAreaUnderSoorganStatsListFun(); this.getAreaUnderSoorganStatsListFun();
this.getMapData("g450000"); //默认展示广西 g450000
this.soorganSearchFun()
}, },
methods: { methods: {
getSoorganStatsFun() { inputBtn() {
getSoorganStats({}).then((res) => { 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, "获取社会机构统计"); console.log(res, "获取社会机构统计");
this.soorganStats = res.data; this.soorganStats = res.data;
}); });
}, },
getSoorganPercentageStatsFun() { getSoorganPercentageStatsFun(data) {
getSoorganPercentageStats({}).then((res) => { getSoorganPercentageStats({ areaCode: data }).then((res) => {
console.log(res.data, "获取社会机构区域占比统计"); console.log(res.data, "获取社会机构区域占比统计");
this.SoorganPercentageStats = res.data; this.SoorganPercentageStats = res.data;
res.data.forEach((item) => { res.data.forEach((item) => {
this.placeNames.push(item.name); this.placeNames.push(item.name);
}); });
console.log(this.placeNames); console.log(this.placeNames);
this.proportionFun();
}); });
}, },
getAreaUnderSoorganStatsListFun() { getAreaUnderSoorganStatsListFun(data) {
getAreaUnderSoorganStatsList({}).then((res) => { getAreaUnderSoorganStatsList({ areaCode: data }).then((res) => {
console.log(res, "获取地区下面社会机构统计列表"); console.log(res, "获取地区下面社会机构统计列表");
this.areaUnderSoorganStatsList = res.data; 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 { ...@@ -576,6 +735,12 @@ export default {
display: flex; display: flex;
} }
.socialOrganizationMap {
width: 100%;
height: 430px;
background-color: #082c61;
}
.wian { .wian {
width: 100%; width: 100%;
height: 400px; height: 400px;
...@@ -585,7 +750,7 @@ export default { ...@@ -585,7 +750,7 @@ export default {
.wians { .wians {
width: 100%; width: 100%;
height: 500px; height: 500px;
background-color: blanchedalmond; background-color: #082c61;
} }
.wianss { .wianss {
...@@ -597,6 +762,29 @@ export default { ...@@ -597,6 +762,29 @@ export default {
.wiansInfo { .wiansInfo {
width: 100%; width: 100%;
height: 818px; 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> </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