Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
civil-front
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
civil
civil-front
Commits
f50a57d6
Commit
f50a57d6
authored
Jun 29, 2021
by
苏咏卓
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
完成地图,查询
parent
0ed15335
Hide whitespace changes
Inline
Side-by-side
Showing
13 changed files
with
1333 additions
and
296 deletions
+1333
-296
.env.development
+3
-2
.env.production
+2
-2
src/api/unified/unified.js
+93
-4
src/layout/components/Sidebar/Logo.vue
+1
-1
src/views/login.vue
+1
-1
src/views/unified/tapSwitch/childWelfare.vue
+221
-33
src/views/unified/tapSwitch/marriage.vue
+129
-31
src/views/unified/tapSwitch/mechanism.vue
+25
-71
src/views/unified/tapSwitch/population.vue
+14
-7
src/views/unified/tapSwitch/provide.vue
+259
-46
src/views/unified/tapSwitch/socialAssistance.vue
+115
-23
src/views/unified/tapSwitch/socialOrganization.vue
+213
-24
src/views/unified/tapSwitch/subsidies.vue
+257
-51
No files found.
.env.development
View file @
f50a57d6
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
View file @
f50a57d6
...
...
@@ -2,6 +2,6 @@ ENV = 'production'
# 如果使用 Nginx 代理后端接口,那么此处需要改为 '/',文件查看 Docker 部署篇,Nginx 配置
# 接口地址,注意协议,如果你没有配置 ssl,需要将 https 改为 http
VUE_APP_BASE_API = 'http
s://el-admin.xin
'
VUE_APP_BASE_API = 'http
://124.227.197.29:8088
'
# 如果接口是 http 形式, wss 需要改为 ws
VUE_APP_WS_API = 'ws
s://el-admin.xin
'
VUE_APP_WS_API = 'ws
://124.227.197.29:8088
'
src/api/unified/unified.js
View file @
f50a57d6
...
...
@@ -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
View file @
f50a57d6
...
...
@@ -25,7 +25,7 @@ export default {
},
data
()
{
return
{
title
:
'
ELADMIN-后台管理
'
,
title
:
'
广西民政决策分析
'
,
logo
:
Logo
}
}
...
...
src/views/login.vue
View file @
f50a57d6
...
...
@@ -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
View file @
f50a57d6
...
...
@@ -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
View file @
f50a57d6
...
...
@@ -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
:
35
0px
;
height
:
28
0px
;
}
.annualStatistics
{
margin-top
:
10px
;
...
...
@@ -684,7 +724,7 @@ export default {
.marriageMap
{
width
:
100%
;
height
:
50
0px
;
height
:
43
0px
;
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
View file @
f50a57d6
...
...
@@ -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
:
50
0px
;
height
:
43
0px
;
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
View file @
f50a57d6
...
...
@@ -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
.
inD
ivorceNum
}}
{{
marriageStats
.
d
ivorceNum
}}
</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
:
50
0px
;
height
:
43
0px
;
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
View file @
f50a57d6
...
...
@@ -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: #082
C
61; color: #2177b9"
style=
"width: 100%; background-color: #082
c
61; 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
View file @
f50a57d6
...
...
@@ -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
:
50
0px
;
height
:
43
0px
;
background-color
:
#082c61
;
}
.wian
{
width
:
100%
;
height
:
41
6
px
;
height
:
41
5
px
;
background-color
:
#082c61
;
}
.wians
{
width
:
100%
;
height
:
500px
;
background-color
:
blanchedalmond
;
background-color
:
#082c61
;
}
.wianss
{
width
:
100%
;
height
:
3
0
0px
;
height
:
3
3
0px
;
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
View file @
f50a57d6
...
...
@@ -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
View file @
f50a57d6
...
...
@@ -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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment