Skip to content

C
civil-front
Commit b60b4efc by 苏咏卓
Options

页面更新

parent b7df6775
Showing with 227 additions and 88 deletions
.env.development
ENV = 'development'
# 接口地址
VUE_APP_BASE_API = 'http://192.168.0.21:9888'
VUE_APP_WS_API = 'ws://192.168.0.21:9888'
VUE_APP_BASE_API = 'http://192.168.0.29:9888'
VUE_APP_WS_API = 'ws://192.168.0.29:9888'
# 是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true
src/views/business/business.vue
......@@ -32,7 +32,7 @@
<br />
<el-row>
<el-col>
<el-card shadow="never">
<el-card shadow="hover">
<div>
<el-form :inline="true" size="small">
<el-form-item label="">
......@@ -187,7 +187,7 @@ export default {
};
</script>
<style>
<style lang="scss">
.titles {
font-size: 18px;
color: #222222;
......
src/views/comprehensive/comprehensive.vue
......@@ -51,7 +51,7 @@
<br />
</el-col>
<el-col :span="16">
<el-card shadow="never">
<el-card shadow="hover">
<div>
<el-form :inline="true" size="small">
<el-form-item label="">
......@@ -157,7 +157,7 @@ export default {
};
</script>
<style>
<style lang="scss">
.flexInfo {
display: flex;
justify-content: space-around;
......
src/views/funeral/cremation.vue
......@@ -3,13 +3,15 @@
<el-row :gutter="18">
<el-row :gutter="18"> </el-row>
<el-col :span="5">
<el-card shadow="hover">
<div>
<div class="box" id="1"></div>
<div class="box" id="2"></div>
</div>
</el-card>
</el-col>
<el-col :span="16">
<el-card shadow="never">
<el-card shadow="hover">
<div>
<el-form :inline="true" size="small">
<el-form-item label="">
......@@ -206,9 +208,9 @@ export default {
};
</script>
<style>
<style lang="scss">
.box {
width: 320px;
width: 300px;
height: 300px;
}
</style>
\ No newline at end of file
src/views/funeral/funeral.vue
<template>
<div class="app-container">
<el-row :gutter="18">
<el-col :span="4">
<el-card shadow="hover" class="blue">
<div class="titles">全省殡葬安放设施总数量</div>
<div class="titles">19236</div>
</el-card>
<el-col :span="8">
<el-row :gutter="18">
<el-col :span="24">
<el-card shadow="hover" class="blue">
<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-row>
<br>
<el-row :gutter="6">
<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-col :span="16">
<el-card shadow="hover">
<div class="box" id="1"></div>
</el-card>
</el-col>
</el-row>
<br>
<br />
<el-row>
<el-col>
<el-card shadow="never">
<el-card shadow="hover">
<div>
<el-table
v-loading="loading"
......@@ -106,6 +124,7 @@
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
......@@ -119,6 +138,70 @@ export default {
};
},
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) {
this.pageInfo.size = e;
......@@ -132,13 +215,17 @@ export default {
this.pageImageAlbumFun();
},
},
mounted() {
setTimeout(() => {
this.funeral();
}, 500);
},
};
</script>
<style>
<style lang="scss">
.blue {
width: 554px;
background-color: rgba(16,160,233);
background-color: rgba(16, 160, 233);
}
.purple {
......@@ -146,41 +233,55 @@ export default {
}
.green {
background-color: rgba(237,246,241);
background-color: rgba(237, 246, 241);
}
.shallow {
background-color: rgba(238,249,255);
background-color: rgba(238, 249, 255);
}
.title {
margin-top: 6px;
.box {
width: 100%;
height: 330px;
}
.titles {
.funeralTitles {
font-size: 18px;
text-align: center;
color: #fff;
}
.funeralNum {
font-size: 24px;
text-align: center;
color: #fff;
margin-top: 10px;
}
.tombTitle {
font-size: 18px;
text-align: center;
}
.ashes {
font-size: 14px;
font-size: 18px;
text-align: center;
color: #222222;
margin-bottom: 45px;
margin-bottom: 50px;
}
.facilities {
font-size: 14px;
font-size: 18px;
text-align: center;
color: #222222;
margin-bottom: 45px;
margin-bottom: 50px;
}
.numinfo {
font-size: 24px;
text-align: center;
color: #6148bf;
margin-top: 10px;
}
.flex {
......@@ -196,4 +297,32 @@ export default {
justify-content: space-between;
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>
\ No newline at end of file
src/views/marriage/marriage.vue
......@@ -23,7 +23,7 @@
<br />
<el-row>
<el-col>
<el-card shadow="never">
<el-card shadow="hover">
<div>
<el-form :inline="true" size="small">
<el-form-item label="">
......@@ -132,7 +132,7 @@ export default {
};
</script>
<style>
<style lang="scss">
.titles {
font-size: 18px;
color: #222222;
......
src/views/socialOrganization/socialOrganization.vue
......@@ -2,34 +2,34 @@
<div class="app-container">
<el-row :gutter="18">
<el-col :span="4">
<el-card shadow="hover" class="blueBox">
<div class="numw">93860</div>
<div class="titles">社会组织统计总数量</div>
<el-card shadow="hover" class="white">
<div class="organizationWhite">93860</div>
<div class="statisticalNum">社会组织统计总数量</div>
</el-card>
</el-col>
<el-col :span="2">
<el-card shadow="hover" class="purple">
<div class="num">33174</div>
<div class="title">社会团体</div>
<el-card shadow="hover" class="purples">
<div class="organizationBlue">33174</div>
<div class="organization">社会团体</div>
</el-card>
</el-col>
<el-col :span="3">
<el-card shadow="hover" class="green">
<div class="nums">59778</div>
<div class="title">民办非企业单位</div>
<div class="organizationGreen">59778</div>
<div class="organization">民办非企业单位</div>
</el-card>
</el-col>
<el-col :span="2">
<el-card shadow="hover" class="shallow">
<div class="numx">908</div>
<div class="title">基金会</div>
<div class="organizationOrange">908</div>
<div class="organization">基金会</div>
</el-card>
</el-col>
</el-row>
<br />
<el-row>
<el-col>
<el-card shadow="never">
<el-card shadow="hover">
<div>
<el-form :inline="true" size="small">
<el-form-item label="">
......@@ -134,51 +134,56 @@ export default {
};
</script>
<style>
.blueBox {
background-color: deepskyblue;
<style lang="scss">
.white {
background-color: #fff;
}
.purple {
.purples {
background-color: rgba(242, 235, 253);
}
.green {
background-color: rgba(237,246,241);
background-color: rgba(237, 246, 241);
}
.shallow {
background-color: rgba(238,249,255);
background-color: rgba(238, 249, 255);
}
.titles {
.statisticalNum {
font-size: 16px;
text-align: center;
color: #fff;
color: #000;
}
.numw {
.organization {
font-size: 16px;
color: #000;
}
.organizationWhite {
font-size: 24px;
color: #ffffff;
color: #3c3c3c;
text-align: center;
margin-bottom: 6px;
}
.num {
.organizationBlue {
font-size: 24px;
color: rgba(66,179,247);
color: rgba(66, 179, 247);
margin-bottom: 6px;
}
.nums {
.organizationGreen {
font-size: 24px;
color: rgba(86,199,153);
color: rgba(86, 199, 153);
margin-bottom: 6px;
}
.numx {
.organizationOrange {
font-size: 24px;
color: rgba(250,121,89);
color: rgba(250, 121, 89);
margin-bottom: 6px;
}
</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