Skip to content

C
civil-front
Commit 11bf3b7a by 李耀锟
Options

完成首页 优化ui

parent 0ed15335
Showing with 241 additions and 162 deletions
src/views/home.vue
<template>
<el-row :gutter="18">
<el-col :span="16">
<el-card shadow="hover">
<div id="map"></div>
<el-col :span="16">
<el-card shadow="hover">
<el-card shadow="hover">
<div>
<el-table
v-loading="loading"
:data="tableData"
border
style="width: 100%"
:header-cell-style="{
background: '#eef1f6',
color: '#606266',
}"
>
<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-card>
</el-col>
</el-row>
<div class="homePage">
<img
src="./../assets/images/底层背景元素小.jpg"
alt=""
class="background-image"
/>
<div class="flex-container">
<img src="./../assets/images/标题左边素材.png" alt="" class="about" />
<div class="title-text">
广西民政决策分析
<img src="./../assets/images/标题下划线.png" alt="" class="underline" />
</div>
<img src="./../assets/images/标题右边素材.png" alt="" class="about" />
</div>
<div class="arrow">
<img src="./../assets/images/方向箭头.png" alt="" />
</div>
<div class="Jump-box">
<div class="Jump" v-for="(item, index) in num" :key="index">
<router-link :to="{path:item.path,query:{ params:item.TapId}}">
<div class="content">
<div>
<img :src="item.icon" class="dataList-img" />
</div>
<h2>{{ item.name }}</h2>
</div>
</router-link>
</div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import { getMapData } from "@/api/home";
export default {
data() {
return {
tableData: [],
pageInfo: {
page: 1,
size: 10,
total: 0,
},
loading: false,
};
},
created() {
this.getMapData("g450000"); //默认展示广西 g450000
},
methods: {
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.map([], res, 100, 0);
});
},
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
map(dataList, mapList, max, min) {
let map = echarts.init(document.getElementById("map"));
echarts.registerMap("GX", mapList);
map.setOption({
tooltip: {
trigger: "item",
// formatter: '{b}<br/>{c}%(完成数 / 指标数)'
formatter: function (data) {
return `${data.name}`;
},
num: [
{
name: "人口专题",
path: "/unifiedNanning/entrance",
TapId: "0",
icon: require("@/assets/images/人员专题.png"),
},
{
name: "机构专题",
path: "/unifiedNanning/entrance",
TapId: "1",
icon: require("@/assets/images/机构专题.png"),
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
{
name: "婚姻",
path: "/unifiedNanning/entrance",
TapId: "2",
icon: require("@/assets/images/婚姻.png"),
},
// 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",
},
{
name: "社会救助",
path: "/unifiedNanning/entrance",
TapId: "3",
icon: require("@/assets/images/社会救助.png"),
},
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);
});
},
{
name: "两项补贴",
path: "/unifiedNanning/entrance",
TapId: "7",
icon: require("@/assets/images/两项补贴.png"),
},
{
name: "儿童福利",
path: "/unifiedNanning/entrance",
TapId: "4",
icon: require("@/assets/images/儿童福利.png"),
},
{
name: "社会组织",
path: "/unifiedNanning/entrance",
TapId: "6",
icon: require("@/assets/images/社会组织.png"),
},
{
name: "殡葬",
path: "/unifiedNanning/entrance",
TapId: "5",
icon: require("@/assets/images/殡葬.png"),
},
{ name: "更多...", path: "", TapId: "", icon: "" },
],
};
},
created() {},
methods: {},
};
</script>
<style lang="scss" scoped>
#map {
width: 800px;
height: 800px;
.dataList-img {
width: 50px;
}
h2 {
margin-top: 14px;
margin-left: 10px;
color: #00f9fd;
}
.content {
margin: 16px 30px;
display: flex;
}
.Jump-box {
display: flex;
width: 780px;
flex-wrap: wrap;
margin: auto;
}
.Jump {
width: 218px;
height: 80px;
margin: 20px;
background-image: url("./../assets/images/专题入口背景.png");
}
.arrow {
width: 30px;
margin: auto;
}
.underline {
width: 100%;
}
.homePage {
width: 100%;
height: 86vh;
}
.flex-container {
display: flex;
width: 1300px;
height: 110px;
margin: auto;
}
.title-text {
width: 380px;
line-height: 25px;
margin: 40px 20px -20px 20px;
color: #00f9fd;
font-size: 45px;
}
.about {
margin-top: 20px;
width: 450px;
height: 60px;
}
.background-image {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
</style>
\ No newline at end of file
src/views/unified/entrance.vue
......@@ -24,28 +24,28 @@
<br>
<el-row :gutter="18">
<el-col :span="24" :offset="0">
<div class="hez" v-if="TapId == 0">
<div class="hez" v-if="TapId == '0'">
<population></population>
</div>
<div class="hez" v-if="TapId == 1">
<div class="hez" v-if="TapId == '1'">
<mechanism></mechanism>
</div>
<div class="hez" v-if="TapId == 2">
<div class="hez" v-if="TapId == '2'">
<marriage ref="marriage"></marriage>
</div>
<div class="hez" v-if="TapId == 3">
<div class="hez" v-if="TapId == '3'">
<socialAssistance></socialAssistance>
</div>
<div class="hez" v-if="TapId == 4">
<div class="hez" v-if="TapId == '4'">
<childWelfare></childWelfare>
</div>
<div class="hez" v-if="TapId == 5">
<div class="hez" v-if="TapId == '5'">
<provide></provide>
</div>
<div class="hez" v-if="TapId == 6">
<div class="hez" v-if="TapId == '6'">
<socialOrganization></socialOrganization>
</div>
<div class="hez" v-if="TapId == 7">
<div class="hez" v-if="TapId == '7'">
<subsidies></subsidies>
</div>
</el-col>
......@@ -78,33 +78,42 @@ export default {
activeName: "overall",
switchLiet:[{
name:"人口专题",
id:0,
id:'0',
},
{
name:"机构专题",
id:1,
id:'1',
},{
name:"婚姻",
id:2,
id:'2',
},{
name:"社会救助",
id:3,
id:'3',
},{
name:"儿童福利",
id:4,
id:'4',
},{
name:"殡葬",
id:5,
id:'5',
},{
name:"社会组织",
id:6,
id:'6',
},{
name:"两项补贴",
id:7,
id:'7',
},],
TapId:0,
TapId:'',
};
},
created(){
if (this.$route.query == {}) {
console.log('值',this.$route.query);
this.TapId = this.$route.query.params
}else{
this.TapId = '0'
}
},
methods: {
handleClick(tab, event) {
if(tab.index == 1){
......
src/views/unified/tapSwitch/population.vue
<template>
<div>
<div class="testbox">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<br>
</div>
<el-row :gutter="18">
<!--左 -->
<el-col :span="6">
......@@ -7,6 +15,10 @@
<el-col :span="24"> </el-col>
<el-col :span="24">
<div class="wian">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<div class="title">婚姻登记分析</div>
<el-row :gutter="20" justify="center">
<el-col :span="12">
......@@ -47,6 +59,10 @@
<el-row :gutter="20">
<el-col :span="24">
<div class="wian">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<div class="title">儿童福利统计</div>
<el-row :gutter="20">
<el-col :span="12">
......@@ -73,6 +89,10 @@
<el-row :gutter="20">
<el-col :span="24"
><div class="wians">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<div class="title">当前选择：广西全区</div>
<div class="title" @click="returnInfo">返回上一级</div>
<div class="populationMap" id="populationMap"></div>
......@@ -83,6 +103,10 @@
<el-row :gutter="20">
<el-col :span="24"
><div class="wianss">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<div class="title">残疾人两项补贴</div>
<div id="annualStatistics" class="annualStatistics"></div>
</div>
......@@ -95,6 +119,10 @@
<el-row :gutter="20">
<el-col :span="24">
<div class="wian">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<div class="title">社会救助对象统计</div>
<el-row :gutter="20">
<el-col :span="12">
......@@ -121,6 +149,10 @@
<el-col :span="24">
<br />
<div class="wian">
<img src="./../../../assets/images/01-左上角.png" alt="" class="topLeft">
<img src="./../../../assets/images/02-右上角.png" alt="" class="topRight">
<img src="./../../../assets/images/03-左下角.png" alt="" class="lowerLeft">
<img src="./../../../assets/images/04-右下角.png" alt="" class="lowerRight">
<div class="title">殡葬火化统计</div>
<div id="proportion" class="proportion"></div>
</div>
......@@ -938,6 +970,41 @@ export default {
</script>
<style lang="scss" scoped>
.lowerLeft{
position:absolute;
width: 10px;
height: 10px;
left: -1px;
bottom: -1px;
}
.lowerRight{
position:absolute;
width: 10px;
height: 10px;
right: -1px;
bottom: -1px;
}
.topLeft{
position:absolute;
width: 10px;
height: 10px;
top: -1px;
left: -1px;
}
.topRight{
position:absolute;
width: 10px;
height: 10px;
top: -1px;
right: -1px;
}
.testbox{
position: relative;
border: 1px solid #1A6295;
width: 200px;
height: 200px;
}
.orphan {
width: 100%;
height: 300px;
......@@ -1013,18 +1080,24 @@ export default {
width: 100%;
height: 400px;
background-color: #082c61;
position: relative;
border: 1px solid #1A6295;
}
.wians {
width: 100%;
height: 500px;
background-color: #082c61;
position: relative;
border: 1px solid #1A6295;
}
.wianss {
width: 100%;
height: 300px;
background-color: #082c61;
position: relative;
border: 1px solid #1A6295;
}
.wiansInfo {
......
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