Skip to content

C
civil-front
Commit b7119885 by 苏咏卓
Options

Merge branch 'master' of http://139.159.239.83:9093/civil/civil-front

parents a6467b1a c21f758c
Showing with 494 additions and 181 deletions
src/api/home.js 0 → 100644
import request from '@/utils/request'
//获取地图数据
export const getMapData = (areaId) =>{
return request({
url:`portal/static/map/${areaId}.json`,
method: 'get'
})
}
\ No newline at end of file
src/views/business/business.vue
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<br /> <br />
<el-row> <el-row>
<el-col> <el-col>
<el-card shadow="never"> <el-card shadow="hover">
<div> <div>
<el-form :inline="true" size="small"> <el-form :inline="true" size="small">
<el-form-item label=""> <el-form-item label="">
...@@ -187,7 +187,7 @@ export default { ...@@ -187,7 +187,7 @@ export default {
}; };
</script> </script>
<style> <style lang="scss">
.titles { .titles {
font-size: 18px; font-size: 18px;
color: #222222; color: #222222;
......
src/views/comprehensive/comprehensive.vue
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<br /> <br />
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<el-card shadow="never"> <el-card shadow="hover">
<div> <div>
<el-form :inline="true" size="small"> <el-form :inline="true" size="small">
<el-form-item label=""> <el-form-item label="">
...@@ -157,7 +157,7 @@ export default { ...@@ -157,7 +157,7 @@ export default {
}; };
</script> </script>
<style> <style lang="scss">
.flexInfo { .flexInfo {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
......
src/views/funeral/cremation.vue
...@@ -3,13 +3,15 @@ ...@@ -3,13 +3,15 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-row :gutter="18"> </el-row> <el-row :gutter="18"> </el-row>
<el-col :span="5"> <el-col :span="5">
<el-card shadow="hover">
<div> <div>
<div class="box" id="1"></div> <div class="box" id="1"></div>
<div class="box" id="2"></div> <div class="box" id="2"></div>
</div> </div>
</el-card>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<el-card shadow="never"> <el-card shadow="hover">
<div> <div>
<el-form :inline="true" size="small"> <el-form :inline="true" size="small">
<el-form-item label=""> <el-form-item label="">
...@@ -206,9 +208,9 @@ export default { ...@@ -206,9 +208,9 @@ export default {
}; };
</script> </script>
<style> <style lang="scss">
.box { .box {
width: 320px; width: 300px;
height: 300px; height: 300px;
} }
</style> </style>
\ No newline at end of file
src/views/funeral/funeral.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="4"> <el-col :span="8">
<el-card shadow="hover" class="blue"> <el-row :gutter="18">
<div class="titles">全省殡葬安放设施总数量</div> <el-col :span="24">
<div class="titles">19236</div> <el-card shadow="hover" class="blue">
</el-card> <div class="funeralTitles">全省殡葬安放设施总数量</div>
<div class="funeralNum">19236</div>
<!-- <div class="tipsWhite"></div> -->
</el-card>
</el-col>
</el-row>
<br />
<el-row :gutter="6">
<el-col :span="24">
<el-card shadow="hover" class="purple">
<div class="tombTitle">公墓数量</div>
<div class="numinfo">19236</div>
<!-- <div class="tipsPurple"></div> -->
</el-card>
</el-col>
</el-row>
<br />
<el-row :gutter="6">
<el-col :span="6">
<el-card shadow="hover" class="green">
<div class="ashes">经营性公墓</div>
<div class="numinfo">936</div>
<!-- <div class="tipsGreen"></div> -->
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="shallow">
<div class="ashes">公益性公墓</div>
<div class="numinfo">936</div>
<!-- <div class="tipsLightblue"></div> -->
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="green">
<div class="ashes">骨灰堂数量</div>
<div class="numinfo">936</div>
<!-- <div class="tipsGreen"></div> -->
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover" class="shallow">
<div class="facilities">其他设施</div>
<div class="numinfo">117</div>
<!-- <div class="tipsLightblue"></div> -->
</el-card>
</el-col>
</el-row>
</el-col> </el-col>
</el-row> <el-col :span="16">
<br> <el-card shadow="hover">
<el-row :gutter="6"> <div class="barCharts" id="1"></div>
<el-col :span="4">
<el-card shadow="hover" class="purple">
<div class="flex">
<div class="title">公墓数量</div>
<div class="numinfo">19236</div>
</div>
<div class="k-flex">
<div>
<div class="title">经营性公墓</div>
<div class="numinfo">261</div>
</div>
<div>
<div class="title">经营性公墓</div>
<div class="numinfo">17863</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="2">
<el-card shadow="hover" class="green">
<div class="ashes">骨灰堂数量</div>
<div class="numinfo">936</div>
</el-card>
</el-col>
<el-col :span="2">
<el-card shadow="hover" class="shallow">
<div class="facilities">其他设施</div>
<div class="numinfo">117</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<br> <br />
<el-row> <el-row>
<el-col> <el-col>
<el-card shadow="never"> <el-card shadow="hover">
<div> <div>
<el-table <el-table
v-loading="loading" v-loading="loading"
...@@ -106,6 +124,7 @@ ...@@ -106,6 +124,7 @@
</template> </template>
<script> <script>
import * as echarts from "echarts";
export default { export default {
data() { data() {
return { return {
...@@ -119,6 +138,70 @@ export default { ...@@ -119,6 +138,70 @@ export default {
}; };
}, },
methods: { methods: {
funeral() {
var chartDom = document.getElementById("1");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "广西各市安放设施数量",
subtext: "",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["2021年"],
},
grid: {
left: "3%",
right: "4%",
bottom: "1%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
},
yAxis: {
type: "category",
data: [
"南宁市",
"柳州市",
"桂林市",
"梧州市",
"北海市",
"防城港市",
"钦州市",
"贵港市",
"玉林市",
"百色市",
"贺州市",
"河池市",
"来宾市",
"崇左市",
"梧州市",
],
},
series: [
{
name: "2021年",
type: "bar",
data: [
119325, 123438, 131000, 1121594, 1134141, 1681807, 119325, 213438,
311000, 1121594, 1314141, 191325, 234138, 310100, 1215194,
],
},
],
};
option && myChart.setOption(option);
},
// 显示数量切换 // 显示数量切换
sizeChange(e) { sizeChange(e) {
this.pageInfo.size = e; this.pageInfo.size = e;
...@@ -132,13 +215,17 @@ export default { ...@@ -132,13 +215,17 @@ export default {
this.pageImageAlbumFun(); this.pageImageAlbumFun();
}, },
}, },
mounted() {
setTimeout(() => {
this.funeral();
}, 500);
},
}; };
</script> </script>
<style> <style lang="scss">
.blue { .blue {
width: 554px; background-color: rgba(16, 160, 233);
background-color: rgba(16,160,233);
} }
.purple { .purple {
...@@ -146,41 +233,55 @@ export default { ...@@ -146,41 +233,55 @@ export default {
} }
.green { .green {
background-color: rgba(237,246,241); background-color: rgba(237, 246, 241);
} }
.shallow { .shallow {
background-color: rgba(238,249,255); background-color: rgba(238, 249, 255);
} }
.title { .barCharts {
margin-top: 6px; width: 100%;
height: 330px;
} }
.titles { .funeralTitles {
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.funeralNum {
font-size: 24px;
text-align: center;
color: #fff;
margin-top: 10px;
}
.tombTitle {
font-size: 18px;
text-align: center;
}
.ashes { .ashes {
font-size: 14px; font-size: 18px;
text-align: center; text-align: center;
color: #222222; color: #222222;
margin-bottom: 45px; margin-bottom: 50px;
} }
.facilities { .facilities {
font-size: 14px; font-size: 18px;
text-align: center; text-align: center;
color: #222222; color: #222222;
margin-bottom: 45px; margin-bottom: 50px;
} }
.numinfo { .numinfo {
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
color: #6148bf; color: #6148bf;
margin-top: 10px;
} }
.flex { .flex {
...@@ -196,4 +297,32 @@ export default { ...@@ -196,4 +297,32 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.tipsWhite {
width: 60px;
height: 3px;
background-color: #fff;
border-radius: 30px;
}
.tipsPurple {
width: 60px;
height: 3px;
background-color: #714AF0;
border-radius: 30px;
}
.tipsGreen {
width: 60px;
height: 3px;
background-color: #36BA5C;
border-radius: 30px;
}
.tipsLightblue {
width: 60px;
height: 3px;
background-color: #56BEE9;
border-radius: 30px;
}
</style> </style>
\ No newline at end of file
src/views/home.vue
<template> <template>
<div class="dashboard-container"> <el-row :gutter="18">
<div class="dashboard-editor-container"> <el-col :span="16">
<github-corner class="github-corner" /> <el-card shadow="hover">
<div id="map"></div>
<panel-group @handleSetLineChartData="handleSetLineChartData" /> <el-col :span="16">
<el-card shadow="hover">
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> <el-card shadow="hover">
<line-chart :chart-data="lineChartData" /> <div>
</el-row> <el-table
<el-row :gutter="32"> v-loading="loading"
<el-col :xs="24" :sm="24" :lg="8"> :data="tableData"
<div class="chart-wrapper"> border
<radar-chart /> style="width: 100%"
</div> :header-cell-style="{
</el-col> background: '#eef1f6',
<el-col :xs="24" :sm="24" :lg="8"> color: '#606266',
<div class="chart-wrapper"> }"
<pie-chart /> >
</div> <el-table-column
prop="albumName"
label="行政区划"
align="center"
/>
<el-table-column
prop="albumName"
label="经营性公墓"
align="center"
/>
<el-table-column
prop="albumName"
label="非营性公墓"
align="center"
/>
<el-table-column
prop="albumName"
label="公益性公墓"
align="center"
/>
</el-table>
</div>
</el-card>
</el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :lg="8"> </el-card>
<div class="chart-wrapper"> </el-col>
<bar-chart /> </el-row>
</div>
</el-col>
</el-row>
</div>
</div>
</template> </template>
<script> <script>
import GithubCorner from '@/components/GithubCorner' import echarts from "echarts";
import PanelGroup from './dashboard/PanelGroup' import { getMapData } from "@/api/home";
import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
export default { export default {
name: 'Dashboard',
components: {
GithubCorner,
PanelGroup,
LineChart,
RadarChart,
PieChart,
BarChart
},
data() { data() {
return { return {
lineChartData: lineChartData.newVisitis tableData: [],
} pageInfo: {
page: 1,
size: 10,
total: 0,
},
loading: false,
};
},
created() {
this.getMapData("g450000"); //默认展示广西 g450000
}, },
methods: { methods: {
handleSetLineChartData(type) { //获取地图数据
this.lineChartData = lineChartData[type] getMapData(areaId) {
} getMapData(areaId).then((res) => {
} console.log("map", res);
} this.map([], res, 100, 0);
</script> });
},
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.github-corner { /**
position: absolute; * 渲染地图
top: 0; * dataList 分布数据
border: 0; * mapList 地图数据
right: 0; * max 最大值
} * min 最小值
*/
.chart-wrapper { map(dataList, mapList, max, min) {
background: #fff; let map = echarts.init(document.getElementById("map"));
padding: 16px 16px 0; echarts.registerMap("GX", mapList);
margin-bottom: 32px; 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: "#333333" },
borderWidth: 1, //区域边框宽度
borderColor: "#0b1940", //区域边框颜色
},
emphasis: { label: { show: true } },
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
console.log("点击取值", res);
});
},
},
};
</script>
@media (max-width:1024px) { <style lang="scss" scoped>
.chart-wrapper { #map {
padding: 8px; width: 800px;
} height: 800px;
} }
</style> </style>
\ No newline at end of file
src/views/home2.vue 0 → 100644
<template>
<div class="dashboard-container">
<div class="dashboard-editor-container">
<github-corner class="github-corner" />
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<radar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
export default {
name: 'Dashboard',
components: {
GithubCorner,
PanelGroup,
LineChart,
RadarChart,
PieChart,
BarChart
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.github-corner {
position: absolute;
top: 0;
border: 0;
right: 0;
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>
src/views/marriage/marriage.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<br /> <br />
<el-row> <el-row>
<el-col> <el-col>
<el-card shadow="never"> <el-card shadow="hover">
<div> <div>
<el-form :inline="true" size="small"> <el-form :inline="true" size="small">
<el-form-item label=""> <el-form-item label="">
...@@ -132,7 +132,7 @@ export default { ...@@ -132,7 +132,7 @@ export default {
}; };
</script> </script>
<style> <style lang="scss">
.titles { .titles {
font-size: 18px; font-size: 18px;
color: #222222; color: #222222;
......
src/views/socialOrganization/socialOrganization.vue
...@@ -2,34 +2,34 @@ ...@@ -2,34 +2,34 @@
<div class="app-container"> <div class="app-container">
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="4"> <el-col :span="4">
<el-card shadow="hover" class="blueBox"> <el-card shadow="hover" class="white">
<div class="numw">93860</div> <div class="organizationWhite">93860</div>
<div class="titles">社会组织统计总数量</div> <div class="statisticalNum">社会组织统计总数量</div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<el-card shadow="hover" class="purple"> <el-card shadow="hover" class="purples">
<div class="num">33174</div> <div class="organizationBlue">33174</div>
<div class="title">社会团体</div> <div class="organization">社会团体</div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-card shadow="hover" class="green"> <el-card shadow="hover" class="green">
<div class="nums">59778</div> <div class="organizationGreen">59778</div>
<div class="title">民办非企业单位</div> <div class="organization">民办非企业单位</div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<el-card shadow="hover" class="shallow"> <el-card shadow="hover" class="shallow">
<div class="numx">908</div> <div class="organizationOrange">908</div>
<div class="title">基金会</div> <div class="organization">基金会</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row> <el-row>
<el-col> <el-col>
<el-card shadow="never"> <el-card shadow="hover">
<div> <div>
<el-form :inline="true" size="small"> <el-form :inline="true" size="small">
<el-form-item label=""> <el-form-item label="">
...@@ -134,51 +134,56 @@ export default { ...@@ -134,51 +134,56 @@ export default {
}; };
</script> </script>
<style> <style lang="scss">
.blueBox { .white {
background-color: deepskyblue; background-color: #fff;
} }
.purple { .purples {
background-color: rgba(242, 235, 253); background-color: rgba(242, 235, 253);
} }
.green { .green {
background-color: rgba(237,246,241); background-color: rgba(237, 246, 241);
} }
.shallow { .shallow {
background-color: rgba(238,249,255); background-color: rgba(238, 249, 255);
} }
.titles { .statisticalNum {
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
color: #fff; color: #000;
} }
.numw { .organization {
font-size: 16px;
color: #000;
}
.organizationWhite {
font-size: 24px; font-size: 24px;
color: #ffffff; color: #3c3c3c;
text-align: center; text-align: center;
margin-bottom: 6px; margin-bottom: 6px;
} }
.num { .organizationBlue {
font-size: 24px; font-size: 24px;
color: rgba(66,179,247); color: rgba(66, 179, 247);
margin-bottom: 6px; margin-bottom: 6px;
} }
.nums { .organizationGreen {
font-size: 24px; font-size: 24px;
color: rgba(86,199,153); color: rgba(86, 199, 153);
margin-bottom: 6px; margin-bottom: 6px;
} }
.numx { .organizationOrange {
font-size: 24px; font-size: 24px;
color: rgba(250,121,89); color: rgba(250, 121, 89);
margin-bottom: 6px; margin-bottom: 6px;
} }
</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