Commit 306bacd5 by 苏咏卓

更新样式

parent 5c2c836a
......@@ -6,7 +6,7 @@
<el-row :gutter="18">
<el-col :span="24"> </el-col>
<el-col :span="24">
<div class="panel">
<div class="panels">
<div class="wian">
<div class="warningInfo" v-if="ChildStatsLek">暂无下级数据</div>
<div class="titleHead">儿童福利机构汇总</div>
......@@ -915,6 +915,16 @@ export default {
position: relative;
margin-bottom: 0.833rem;
}
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 516px;
}
.wians {
margin-left: -5rem;
margin-right: -1rem;
......@@ -1091,7 +1101,7 @@ export default {
height: 60px;
// background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px;
margin: 20px auto 0 auto;
margin: 60px auto 0 auto;
padding: 5px 0;
}
.gradientTitle {
......
......@@ -214,7 +214,7 @@
</el-col>
<el-col :span="24">
<br />
<div class="panel">
<div class="panels">
<div class="wian">
<div class="warningInfo" v-if="f == true">暂无下级数据</div>
<div class="titleHead">殡葬火化统计</div>
......@@ -1313,7 +1313,7 @@ export default {
height: 60px;
// background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px;
margin: 30px auto ;
margin: 28px auto ;
padding: 5px 0;
}
.gradientBoxs {
......@@ -1376,6 +1376,7 @@ export default {
.proportion {
width: 100%;
height: 380px;
margin-top: 30px;
}
.annualStatistics {
margin-top: 10px;
......@@ -1414,6 +1415,16 @@ export default {
margin-bottom: 0.833rem;
}
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url('./../../../assets/images/img/border.png') 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 574px;
}
.wians {
width: 100%;
height: 580px;
......
......@@ -6,7 +6,7 @@
<el-row :gutter="18">
<el-col :span="24"> </el-col>
<el-col :span="24">
<div class="panel">
<div class="panels">
<div class="wian">
<div class="warningInfo" v-if="tionStats">暂无下级数据</div>
<div class="titleHead">火化量汇总</div>
......@@ -112,7 +112,7 @@
<!-- 右 -->
<el-col :span="6">
<div class="panel">
<div class="panelss">
<div class="wians">
<div class="wiansInfo">
......@@ -868,6 +868,24 @@ export default {
position: relative;
margin-bottom: 0.833rem;
}
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 516px;
}
.panelss {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 1066px;
}
.wians {
margin-left: -5rem;
margin-right: -1rem;
......
......@@ -14,7 +14,9 @@
<div class="gradientBoxs">
<div class="gradientTitle">城市低保人数</div>
<div class="vertical"></div>
<div class="gradientOneNum">{{ getEnjoyNum.cityNum || 0}}</div>
<div class="gradientOneNum">
{{ getEnjoyNum.cityNum || 0 }}
</div>
</div>
<div class="gradientBoxs" v-if="getEnjoyNum.cityNumRate != 0">
<div class="gradientTitle">城市低保人数占比</div>
......@@ -26,7 +28,9 @@
<div class="gradientBoxs">
<div class="gradientTitle">农村低保人数</div>
<div class="vertical"></div>
<div class="gradientTwoNum">{{ getEnjoyNum.villageNum || 0}} </div>
<div class="gradientTwoNum">
{{ getEnjoyNum.villageNum || 0 }}
</div>
</div>
<div
class="gradientBoxs"
......@@ -35,98 +39,31 @@
<div class="gradientTitle">农村低保人数占比</div>
<div class="vertical"></div>
<div class="gradientTwoNum">
{{ getEnjoyNum.villageNumRate || 0}}
{{ getEnjoyNum.villageNumRate || 0 }}
</div>
</div>
<div class="gradientBoxs" v-if="num >= 2">
<div class="gradientTitle">特困人数</div>
<div class="vertical"></div>
<div class="gradientTwoNum">
{{ getEnjoyNum.poorNum || 0}}
{{ getEnjoyNum.poorNum || 0 }}
</div>
</div>
<div class="gradientBoxs" v-if="num >= 2">
<div class="gradientTitle">临时救助人数</div>
<div class="vertical"></div>
<div class="gradientTwoNum">
{{ getEnjoyNum.temporaryNum || 0}}
{{ getEnjoyNum.temporaryNum || 0 }}
</div>
</div>
<div class="gradientBoxs" v-if="num >= 2">
<div class="gradientTitle">边民</div>
<div class="vertical"></div>
<div class="gradientTwoNum">
{{ getEnjoyNum.borderNum || 0}}
</div>
</div>
</div>
<!-- <div class="provideFlex">
<div class="text">城市低保人数</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">343634</div>
<div class="borderTop"></div>
</div>
<div class="text"></div>
</div>
<div class="provideFlex">
<div class="text">农村低保人数</div>
<div>
<div class="borderBottom"></div>
<div class="textNum">2488258</div>
<div class="borderTop"></div>
</div>
<div class="text"></div>
</div> -->
<!-- <div class="display"> -->
<!-- <div>
<div class="flex">
<div class="num">
{{ cityAndvillagePeople.cityToatlNum }}
343634
</div>
<div class="text"></div>
</div>
<div class="rural">城市</div>
</div> -->
<!-- <div>
<div class="flex">
<div class="nums">
{{ cityAndvillagePeople.villageToatlNum }}
2488258
{{ getEnjoyNum.borderNum || 0 }}
</div>
<div class="texts"></div>
</div>
<div class="city">农村</div>
</div> -->
<!-- </div> -->
<!-- <div class="display">
<div>
<div class="flex">
<div class="num">
{{ cityAndvillagePeople.cityToatlNum }}
152435
</div>
<div class="text"></div>
</div>
<div class="rural">城市</div>
</div>
<div>
<div class="flex">
<div class="nums">
{{ cityAndvillagePeople.villageToatlNum }}
864076
</div>
<div class="texts"></div>
</div>
<div class="city">农村</div>
</div>
</div> -->
<!-- <div id="fivePeople" class="trend"></div> -->
</div>
</div>
</el-col>
......@@ -144,14 +81,14 @@
<div class="gradientTitle">城市</div>
<div class="vertical"></div>
<div class="gradientOneNum">
{{ getEnjoyNum.cityNumRate || 0}}
{{ getEnjoyNum.cityNumRate || 0 }}
</div>
</div>
<div class="gradientBox">
<div class="gradientTitle">农村</div>
<div class="vertical"></div>
<div class="gradientTwoNum">
{{ getEnjoyNum.villageNumRate || 0}}
{{ getEnjoyNum.villageNumRate || 0 }}
</div>
</div>
</div>
......@@ -161,13 +98,6 @@
</el-col>
</el-row>
<br />
<!-- <el-row :gutter="20">
<el-col :span="24">
<div class="wian">
</div>
</el-col>
</el-row> -->
</el-col>
<!-- 中 -->
......@@ -216,7 +146,7 @@
<br />
<el-row :gutter="20">
<el-col :span="24">
<div class="panel">
<div class="panels">
<div class="wian">
<div class="warningInfo" v-if="c == true">暂无下级数据</div>
<div class="titleHead matop10">城市农村低保人数统计</div>
......@@ -225,11 +155,23 @@
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<div class="panels">
<div class="wian">
<div class="warningInfo" v-if="c == true">暂无下级数据</div>
<div class="titleHead matop10">城市农村低保人数占比统计</div>
<div id="ruralAndcitys" class="ruralAndcity"></div>
</div>
</div>
</el-col>
</el-row>
</el-col>
<!-- 右 -->
<el-col :span="6">
<div class="panel">
<div class="panelss">
<div class="wians">
<div class="wiansInfo">
<div class="titleHead ma20">
......@@ -341,7 +283,7 @@ export default {
tableData: [],
pageInfo: {
page: 1,
size: 14,
size: 20,
total: 0,
},
loading: true,
......@@ -435,6 +377,7 @@ export default {
}
this.c = false;
this.ruralAndcityFun();
this.ruralAndcitysFun()
});
},
......@@ -613,7 +556,7 @@ export default {
var option;
option = {
backgroundColor:"rgba(128, 128, 128, 0)",
backgroundColor: "rgba(128, 128, 128, 0)",
titleHead: {},
tooltip: {
trigger: "axis",
......@@ -916,6 +859,98 @@ export default {
option && myChart.setOption(option);
},
ruralAndcitysFun() {
var chartDom = document.getElementById("ruralAndcitys");
var myChart = echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "rgba(128, 128, 128, 0)",
title: {
text: "",
},
tooltip: {
trigger: "axis",
},
legend: {
data: [
"城市低保总人数百分比",
"农村低保总人数百分比",
],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
axisTick: { show: false },
data: this.getAreaUnderNumStats.areaList,
axisLabel: {
textStyle: {
color: "#FFFFFF",
fontSize: 10,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#1b3383",
},
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
color: "#FFFFFF",
fontSize: 12,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#1b3383",
},
},
},
],
series: [
{
name: "城市低保总人数百分比",
type: "line",
stack: "总量",
data: this.getAreaUnderNumStats.cityNumRateList,
},
{
name: "农村低保总人数百分比",
type: "line",
stack: "总量",
data: this.getAreaUnderNumStats.villageNumRateList,
},
],
};
option && myChart.setOption(option);
},
},
mounted() {
// setTimeout(() => {
......@@ -977,7 +1012,8 @@ export default {
.trend {
width: 100%;
height: 300px;
height: 340px;
margin-top: 60px;
}
.annualStatistics {
margin-top: 10px;
......@@ -1025,7 +1061,7 @@ export default {
.ma20 {
margin-left: 20px;
}
.matop10{
.matop10 {
margin-bottom: 20px;
}
.wian {
......@@ -1040,6 +1076,27 @@ export default {
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 690px;
}
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 400px;
}
.panelss {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 1412px;
}
.wians {
......@@ -1061,7 +1118,6 @@ export default {
border: 1px solid #1a6295;
}
.wiansInfo {
overflow: hidden;
overflow-y: scroll;
}
......@@ -1118,7 +1174,7 @@ export default {
.ruralAndcity {
width: 100%;
height: 360px;
height: 300px;
}
.returnInfos {
......
......@@ -6,7 +6,7 @@
<el-row :gutter="18">
<el-col :span="24"> </el-col>
<el-col :span="24">
<div class="panel">
<div class="panels">
<div class="wian">
<div class="warningInfo" v-if="ganStats">暂无下级数据</div>
<div class="titleHead">社会组织汇总</div>
......@@ -197,7 +197,7 @@
<!-- 右 -->
<el-col :span="6">
<div class="panel">
<div class="panelss">
<div class="wians">
<div class="wiansInfo">
<div class="titleHead ma20">
......@@ -981,6 +981,24 @@ height: 30px;
position: relative;
margin-bottom: 0.833rem;
}
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 500px;
}
.panelss {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 1056px;
}
.wians {
margin-left: -5rem;
margin-right: -1rem;
......
......@@ -6,7 +6,7 @@
<el-row :gutter="18">
<el-col :span="24"> </el-col>
<el-col :span="24">
<div class="panel">
<div class="panels">
<div class="wian">
<div class="warningInfo" v-if="IssueStats">暂无下级数据</div>
<div class="titleHead">三年贫困残疾资金发放</div>
......@@ -119,7 +119,7 @@
<!-- 右 -->
<el-col :span="6">
<div class="panel">
<div class="panelss">
<div class="wians">
<div class="wiansInfo">
<div class="titleHead ma20">
......@@ -830,7 +830,7 @@ export default {
}
.trend {
width: 100%;
height: 200px;
height: 300px;
}
.annualStatistics {
margin-top: 10px;
......@@ -895,6 +895,24 @@ export default {
position: relative;
margin-bottom: 0.833rem;
}
.panels {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 530px;
}
.panelss {
box-sizing: border-box;
border: 2px solid red;
border-image: url("./../../../assets/images/img/border.png") 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
height: 1076px;
}
.wians {
margin-left: -5rem;
margin-right: -1rem;
......
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