Commit 5c7dc9c4 by 李耀琨

改页面边框布局

parent 6ab3d4d9
...@@ -6,27 +6,8 @@ ...@@ -6,27 +6,8 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="ChildStatsLek">暂无下级数据</div> <div class="warningInfo" v-if="ChildStatsLek">暂无下级数据</div>
<div class="titleHead">儿童福利机构汇总</div> <div class="titleHead">儿童福利机构汇总</div>
<div class="xxxBox"> <div class="xxxBox">
...@@ -86,32 +67,14 @@ ...@@ -86,32 +67,14 @@
<div class="text"></div> <div class="text"></div>
</div> --> </div> -->
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="PercentageStats"> <div class="warningInfo" v-if="PercentageStats">
暂无下级数据 暂无下级数据
...@@ -119,6 +82,7 @@ ...@@ -119,6 +82,7 @@
<div class="titleHead">机构占比</div> <div class="titleHead">机构占比</div>
<div id="proportion" class="proportion"></div> <div id="proportion" class="proportion"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
...@@ -160,61 +124,24 @@ ...@@ -160,61 +124,24 @@
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24" <el-col :span="24"
><div class="wianss"> ><div class="panel">
<img <div class="wian">
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="warningInfo" v-if="ChildStats">暂无下级数据</div> <div class="warningInfo" v-if="ChildStats">暂无下级数据</div>
<div class="titleHead">区域统计</div> <div class="titleHead">区域统计</div>
<div id="annualStatistics" class="annualStatistics"></div> <div id="annualStatistics" class="annualStatistics"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="wiansInfoS"> <div class="panel">
<img <div class="wians">
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="wiansInfo"> <div class="wiansInfo">
<div class="titleHead"> <div class="titleHead ma20">
{{ address ? address : "广西全区" }}福利院儿童信息 {{ address ? address : "广西全区" }}福利院儿童信息
</div> </div>
<el-input <el-input
...@@ -264,6 +191,7 @@ ...@@ -264,6 +191,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -630,7 +558,7 @@ export default { ...@@ -630,7 +558,7 @@ export default {
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom, "dark");
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
...@@ -764,7 +692,7 @@ export default { ...@@ -764,7 +692,7 @@ export default {
}; };
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -952,14 +880,16 @@ export default { ...@@ -952,14 +880,16 @@ export default {
width: 100%; width: 100%;
height: 360px; height: 360px;
} }
.ma20 {
margin-left: 20px;
}
.titleHead { .titleHead {
height: 30px; height: 30px;
font-size: 16px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #2177b9; color: #fff;
text-align: center; // text-align: center;
background-color: #051d3f; // background-color: #051d3f;
} }
.flexBox { .flexBox {
...@@ -973,19 +903,22 @@ export default { ...@@ -973,19 +903,22 @@ export default {
} }
.wian { .wian {
border: 1px solid #1a6295; // height: 4.583rem;
margin-left: -50px;
margin-bottom: 20px;
}
.panel {
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; position: relative;
width: 100%; margin-bottom: 0.833rem;
height: 500px;
background-color: #021A56;
} }
.wians { .wians {
border: 1px solid #1a6295; margin-left: -5rem;
position: relative; margin-right: -1rem;
width: 100%; margin-bottom: 20px;
height: 500px;
background-color: #021A56;
} }
.wianss { .wianss {
...@@ -1002,9 +935,9 @@ export default { ...@@ -1002,9 +935,9 @@ export default {
border: 1px solid #1a6295; border: 1px solid #1a6295;
} }
.wiansInfo { .wiansInfo {
width: 100%; // width: 100%;
height: 1015px; // height: 1015px;
background-color: #021A56; // background-color: #021A56;
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -1115,7 +1048,7 @@ export default { ...@@ -1115,7 +1048,7 @@ export default {
width: 90%; width: 90%;
background-color: #082c61; background-color: #082c61;
color: #7f8b9d; color: #7f8b9d;
margin: 10px 20px; margin: 20px;
} }
.el-icon-search { .el-icon-search {
...@@ -1145,7 +1078,7 @@ export default { ...@@ -1145,7 +1078,7 @@ export default {
align-items: center; align-items: center;
width: 180px; width: 180px;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1156,7 +1089,7 @@ export default { ...@@ -1156,7 +1089,7 @@ export default {
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1189,7 +1122,7 @@ export default { ...@@ -1189,7 +1122,7 @@ export default {
.vertical { .vertical {
width: 2px; width: 2px;
height: 100%; height: 100%;
background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1); // background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1);
margin: 0 5px; margin: 0 5px;
} }
</style> </style>
\ No newline at end of file
...@@ -6,142 +6,106 @@ ...@@ -6,142 +6,106 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
src="./../../../assets/images/01-左上角.png" <div class="warningInfo" v-if="a == true">暂无下级数据</div>
alt="" <div class="titleHead">婚姻统计</div>
class="topLeft" <div class="socialOrganizationFlex">
/> <div class="flexBox">
<img <!-- <div class="imgBox"></div> -->
src="./../../../assets/images/02-右上角.png" <img
alt="" src="./../../../assets/images/01-结婚总数.png"
class="topRight" alt=""
/> class="marriageImg"
<img />
src="./../../../assets/images/03-左下角.png" <div>
alt="" <div class="marriedNum">结婚总数(对)</div>
class="lowerLeft" <div class="yellowNum">{{ marriageStats.marryNum }}</div>
/> </div>
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="warningInfo" v-if="a == true">暂无下级数据</div>
<div class="titleHead">婚姻统计</div>
<div class="socialOrganizationFlex">
<div class="flexBox">
<!-- <div class="imgBox"></div> -->
<img
src="./../../../assets/images/01-结婚总数.png"
alt=""
class="marriageImg"
/>
<div>
<div class="marriedNum">结婚总数(对)</div>
<div class="yellowNum">{{ marriageStats.marryNum }}</div>
</div> </div>
</div> <div class="flexBox">
<div class="flexBox"> <!-- <div class="imgBox"></div> -->
<!-- <div class="imgBox"></div> --> <img
<img src="./../../../assets/images/02-离婚总数.png"
src="./../../../assets/images/02-离婚总数.png" alt=""
alt="" class="marriageImg"
class="marriageImg" />
/> <div>
<div> <div class="marriedNum">离婚总数(对)</div>
<div class="marriedNum">离婚总数(对)</div> <div class="yellowNum">
<div class="yellowNum"> {{ marriageStats.divorceNum }}
{{ marriageStats.divorceNum }} </div>
</div> </div>
</div> </div>
</div> </div>
<div id="mainInfo" class="trend"></div>
</div> </div>
<div id="mainInfo" class="trend"></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
src="./../../../assets/images/01-左上角.png" <div class="warningInfo" v-if="b == true">暂无下级数据</div>
alt="" <div class="titleHead">婚姻统计</div>
class="topLeft" <div class="marriageStatistics">
/> <div class="flexBox">
<img <!-- <div class="imgBox"></div> -->
src="./../../../assets/images/02-右上角.png" <img
alt="" src="./../../../assets/images/01-结婚总数.png"
class="topRight" alt=""
/> class="marriageImg"
<img />
src="./../../../assets/images/03-左下角.png" <div>
alt="" <div class="marriedNum">结婚总数(对)</div>
class="lowerLeft" <div class="yellowNum">{{ marriageStats.marryNum }}</div>
/> </div>
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="warningInfo" v-if="b == true">暂无下级数据</div>
<div class="titleHead">婚姻统计</div>
<div class="marriageStatistics">
<div class="flexBox">
<!-- <div class="imgBox"></div> -->
<img
src="./../../../assets/images/01-结婚总数.png"
alt=""
class="marriageImg"
/>
<div>
<div class="marriedNum">结婚总数(对)</div>
<div class="yellowNum">{{ marriageStats.marryNum }}</div>
</div> </div>
</div> <div class="flexBox">
<div class="flexBox"> <!-- <div class="imgBox"></div> -->
<!-- <div class="imgBox"></div> --> <img
<img src="./../../../assets/images/02-离婚总数.png"
src="./../../../assets/images/02-离婚总数.png" alt=""
alt="" class="marriageImg"
class="marriageImg" />
/> <div>
<div> <div class="marriedNum">离婚总数(对)</div>
<div class="marriedNum">离婚总数(对)</div> <div class="yellowNum">
<div class="yellowNum"> {{ marriageStats.divorceNum }}
{{ marriageStats.divorceNum }} </div>
</div> </div>
</div> </div>
</div> <div class="flexBox">
<div class="flexBox"> <!-- <div class="imgBox"></div> -->
<!-- <div class="imgBox"></div> --> <img
<img src="./../../../assets/images/03-申请离婚-确定离婚.png"
src="./../../../assets/images/03-申请离婚-确定离婚.png" alt=""
alt="" class="marriageImg"
class="marriageImg" />
/> <div>
<div> <div class="marriedNum">申请离婚/确定离婚(对)</div>
<div class="marriedNum">申请离婚/确定离婚(对)</div> <div class="yellowNum">
<div class="yellowNum"> {{ marriageStats.inDivorceNum }}/{{
{{ marriageStats.inDivorceNum }}/{{ marriageStats.divorceNum
marriageStats.divorceNum }}
}} </div>
</div> </div>
</div> </div>
</div> <div class="flexBox">
<div class="flexBox"> <!-- <div class="imgBox"></div> -->
<!-- <div class="imgBox"></div> --> <img
<img src="./../../../assets/images/04-跨地区结婚-离婚.png"
src="./../../../assets/images/04-跨地区结婚-离婚.png" alt=""
alt="" class="marriageImg"
class="marriageImg" />
/> <div>
<div> <div class="marriedNum">跨地区结婚/离婚</div>
<div class="marriedNum">跨地区结婚/离婚</div> <div class="yellowNum">
<div class="yellowNum"> {{ marriageStats.crossMarryNum }} /
{{ marriageStats.crossMarryNum }} / {{ marriageStats.crossDivorceNum }}
{{ marriageStats.crossDivorceNum }} </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -156,62 +120,30 @@ ...@@ -156,62 +120,30 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24" <el-col :span="24"
><div> ><div>
<!-- <img
src="./../../../assets/images/01-左上角.png"
alt=""
class="topLeft"
/>
<img <img
src="./../../../assets/images/02-右上角.png" class="returnInfos"
alt="" src="./../../../assets/images/returns.png"
class="topRight" @click="returnInfo"
v-if="num != 0"
/> />
<div class="marriageMap" id="marriageMap"></div>
<img <img
src="./../../../assets/images/03-左下角.png" class="guideIcon"
src="./../../../assets/images/guide.png"
alt="" alt=""
class="lowerLeft"
/> />
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/> -->
<!-- <div class="titleHead">
当前选择:{{ address ? address : "广西全区" }}
</div> -->
<img class="returnInfos" src="./../../../assets/images/returns.png" @click="returnInfo" v-if="num != 0"/>
<div class="marriageMap" id="marriageMap"></div>
<img class="guideIcon" src="./../../../assets/images/guide.png" alt="">
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24" <el-col :span="24">
><div class="wianss"> <div class="panel">
<img <div class="wian">
src="./../../../assets/images/01-左上角.png" <div class="warningInfo" v-if="num >= 2">暂无下级数据</div>
alt="" <div class="titleHead">区域统计</div>
class="topLeft" <div id="annualStatistics" class="annualStatistics"></div>
/> </div>
<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="warningInfo" v-if="num >= 2">暂无下级数据</div>
<div class="titleHead">区域统计</div>
<div id="annualStatistics" class="annualStatistics"></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -219,117 +151,103 @@ ...@@ -219,117 +151,103 @@
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="wiansInfoS"> <div class="panel">
<img <div class="wians">
src="./../../../assets/images/01-左上角.png" <div class="wiansInfo">
alt="" <div class="titleHead ma20">
class="topLeft" {{ address ? address : "广西全区" }}婚姻信息查询
/> </div>
<img <el-input
src="./../../../assets/images/02-右上角.png" type="text"
alt="" placeholder="身份证或者姓名查询"
class="topRight" class="input"
/> v-model="value"
<img @change="inputBtn"
src="./../../../assets/images/03-左下角.png" suffix-icon="el-icon-search"
alt="" clearable
class="lowerLeft" clear="marriageSearchFun"
/> />
<img <!-- <i class="el-icon-search" @click="marriageSearchFun"></i> -->
src="./../../../assets/images/04-右下角.png" <el-table
alt="" :data="tableData"
class="lowerRight" v-loading="loading"
/> element-loading-text="拼命加载中"
<div class="wiansInfo"> element-loading-spinner="el-icon-loading"
<div class="titleHead"> element-loading-background="rgba(0, 0, 0, 0.8)"
{{ address ? address : "广西全区" }}婚姻信息查询 stripe
</div> style="width: 100%; background-color: #082c61; color: #2177b9"
<el-input :header-cell-style="headerCellStyle"
type="text" :cell-style="cellStyle"
placeholder="身份证或者姓名查询"
class="input"
v-model="value"
@change="inputBtn"
suffix-icon="el-icon-search"
clearable
clear="marriageSearchFun"
/>
<!-- <i class="el-icon-search" @click="marriageSearchFun"></i> -->
<el-table
:data="tableData"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
stripe
style="width: 100%; background-color: #000; color: #2177b9"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
>
<el-table-column
type="index"
label="序号"
align="center"
width="50px"
>
</el-table-column>
<el-table-column
prop="manName"
label="男方"
align="center"
width="75px"
>
</el-table-column>
<el-table-column
prop="girlName"
label="女方"
align="center"
width="75px"
>
</el-table-column>
<el-table-column prop="manDomicile" label="所在地" align="center">
</el-table-column>
<el-table-column prop="orgName" label="登记处" align="center">
</el-table-column>
<el-table-column
prop="businessType"
label="婚姻状况"
align="center"
>
<template slot-scope="scope">
{{
scope.row.businessType == "IA"
? "结婚"
: scope.row.businessType == "IB"
? "离婚"
: scope.row.businessType == "ICA"
? "补办结婚证"
: scope.row.businessType == "ICB"
? "补办离婚证"
: "不详"
}}
</template>
</el-table-column>
<el-table-column
prop="registerDate"
label="时间"
align="center"
width="120px"
>
</el-table-column>
</el-table>
<div class="paginationInfo">
<el-pagination
layout="prev, pager, next"
:total="pageInfo.total"
:page-size="pageInfo.size"
:page-sizes="[10, 50, 100, 200]"
:current-page="pageInfo.page"
@size-change="sizeChange"
@current-change="pageChange"
background
> >
</el-pagination> <el-table-column
type="index"
label="序号"
align="center"
width="50px"
>
</el-table-column>
<el-table-column
prop="manName"
label="男方"
align="center"
width="75px"
>
</el-table-column>
<el-table-column
prop="girlName"
label="女方"
align="center"
width="75px"
>
</el-table-column>
<el-table-column
prop="manDomicile"
label="所在地"
align="center"
>
</el-table-column>
<el-table-column prop="orgName" label="登记处" align="center">
</el-table-column>
<el-table-column
prop="businessType"
label="婚姻状况"
align="center"
>
<template slot-scope="scope">
{{
scope.row.businessType == "IA"
? "结婚"
: scope.row.businessType == "IB"
? "离婚"
: scope.row.businessType == "ICA"
? "补办结婚证"
: scope.row.businessType == "ICB"
? "补办离婚证"
: "不详"
}}
</template>
</el-table-column>
<el-table-column
prop="registerDate"
label="时间"
align="center"
width="120px"
>
</el-table-column>
</el-table>
<div class="paginationInfo">
<el-pagination
layout="prev, pager, next"
:total="pageInfo.total"
:page-size="pageInfo.size"
:page-sizes="[10, 50, 100, 200]"
:current-page="pageInfo.page"
@size-change="sizeChange"
@current-change="pageChange"
background
>
</el-pagination>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -367,7 +285,7 @@ export default { ...@@ -367,7 +285,7 @@ export default {
address: "", address: "",
pageInfo: { pageInfo: {
page: 1, page: 1,
size: 10, size: 6,
total: 0, total: 0,
}, },
loading: true, loading: true,
...@@ -647,7 +565,7 @@ export default { ...@@ -647,7 +565,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor: "#082C61", backgroundColor: "rgba(128, 128, 128, 0)",
titleHead: { titleHead: {
left: "3%", left: "3%",
top: "8%", top: "8%",
...@@ -751,11 +669,11 @@ export default { ...@@ -751,11 +669,11 @@ export default {
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
headerCellStyle(){ headerCellStyle() {
return " background:#082C61;color:#DAD7DB;border-bottom:1px solid #04234e; " return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
}, },
cellStyle(){ cellStyle() {
return " background:#082C61;color:#DAD7DB;border-bottom:1px solid #04234e; " return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
}, },
//五年统计 //五年统计
annualStatisticsFun() { annualStatisticsFun() {
...@@ -860,7 +778,7 @@ headerCellStyle(){ ...@@ -860,7 +778,7 @@ headerCellStyle(){
}; };
option = { option = {
backgroundColor: "#082C61", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -976,6 +894,11 @@ headerCellStyle(){ ...@@ -976,6 +894,11 @@ headerCellStyle(){
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
.el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: #051d3f;
}
.el-input__inner { .el-input__inner {
background-color: #051d3f; background-color: #051d3f;
color: #fff; color: #fff;
...@@ -1000,11 +923,13 @@ headerCellStyle(){ ...@@ -1000,11 +923,13 @@ headerCellStyle(){
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: #f0f6ff; background-color: #081f3f;
// border-bottom:1px solid #04234e;
} /*定义滚动条轨道 内阴影+圆角*/ } /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #4c6888; background-color: #215196;
border-radius: 6px; border-radius: 6px;
} /*定义滑块 内阴影+圆角*/ } /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar { .scrollbarHide::-webkit-scrollbar {
...@@ -1012,42 +937,16 @@ headerCellStyle(){ ...@@ -1012,42 +937,16 @@ headerCellStyle(){
} }
.scrollbarShow::-webkit-scrollbar { .scrollbarShow::-webkit-scrollbar {
display: block; display: block;
} }
} }
.ma20 {
margin-left: 20px;
}
.marriageImg { .marriageImg {
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
.lowerLeft {
position: absolute;
width: 10px;
height: 10px;
left: -2px;
bottom: -2px;
}
.lowerRight {
position: absolute;
width: 10px;
height: 10px;
right: -2px;
bottom: -2px;
}
.topLeft {
position: absolute;
width: 10px;
height: 10px;
top: -2px;
left: -2px;
}
.topRight {
position: absolute;
width: 10px;
height: 10px;
top: -2px;
right: -2px;
}
.trend { .trend {
width: 100%; width: 100%;
height: 280px; height: 280px;
...@@ -1056,16 +955,15 @@ headerCellStyle(){ ...@@ -1056,16 +955,15 @@ headerCellStyle(){
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
height: 340px; height: 340px;
} }
.titleHead { .titleHead {
height: 30px; height: 30px;
font-size: 16px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #2177b9; color: #fff;
text-align: center; // text-align: center;
background-color: #051d3f; // background-color: #051d3f;
} }
.flexBox { .flexBox {
...@@ -1102,19 +1000,22 @@ headerCellStyle(){ ...@@ -1102,19 +1000,22 @@ headerCellStyle(){
} }
.wian { .wian {
// height: 4.583rem;
margin-left: -50px;
margin-bottom: 20px;
}
.panel {
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; position: relative;
border: 1px solid #1a6295; margin-bottom: 0.833rem;
width: 100%;
height: 500px;
background-color: #082c61;
} }
.wians { .wians {
position: relative; margin-left: -5rem;
border: 1px solid #1a6295; margin-right: -1rem;
width: 100%; margin-bottom: 20px;
height: 500px;
background-color: #082c61;
} }
.wianss { .wianss {
...@@ -1130,8 +1031,8 @@ headerCellStyle(){ ...@@ -1130,8 +1031,8 @@ headerCellStyle(){
width: 100%; width: 100%;
} }
.wiansInfo { .wiansInfo {
height: 1015px; // height: 1015px;
background-color: #082c61; // background-color: #082c61;
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -1149,7 +1050,7 @@ headerCellStyle(){ ...@@ -1149,7 +1050,7 @@ headerCellStyle(){
width: 25px; width: 25px;
height: 25px; height: 25px;
z-index: 9999; z-index: 9999;
cursor:pointer cursor: pointer;
} }
.returnInfos img { .returnInfos img {
...@@ -1177,7 +1078,7 @@ headerCellStyle(){ ...@@ -1177,7 +1078,7 @@ headerCellStyle(){
width: 90%; width: 90%;
background-color: #082c61; background-color: #082c61;
color: #7f8b9d; color: #7f8b9d;
margin: 10px 20px; margin: 30px 20px;
} }
.el-icon-search { .el-icon-search {
......
...@@ -6,75 +6,39 @@ ...@@ -6,75 +6,39 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
src="./../../../assets/images/01-左上角.png" <div class="warningInfo" v-if="e == true">暂无下级数据</div>
alt="" <div class="titleHead">儿童福利机构</div>
class="topLeft" <div class="displayBox">
/> <div class="gradientBox">
<img <div class="gradientTitle">儿童福利机构</div>
src="./../../../assets/images/02-右上角.png" <div class="vertical"></div>
alt="" <div class="gradientOneNum">{{ childrenNum }}</div>
class="topRight" </div>
/>
<img
src="./../../../assets/images/03-左下角.png"
alt=""
class="lowerLeft"
/>
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="warningInfo" v-if="e == true">暂无下级数据</div>
<div class="titleHead">儿童福利机构</div>
<div class="displayBox">
<div class="gradientBox">
<div class="gradientTitle">儿童福利机构</div>
<div class="vertical"></div>
<div class="gradientOneNum">{{ childrenNum }}</div>
</div> </div>
<div id="children" class="children"></div>
<div></div>
</div> </div>
<div id="children" class="children"></div>
<div></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
src="./../../../assets/images/01-左上角.png" <div class="warningInfo" v-if="d == true">暂无下级数据</div>
alt="" <div class="titleHead">养老机构</div>
class="topLeft" <div class="displayBox">
/> <div class="gradientBox">
<img <div class="gradientTitle">养老机构</div>
src="./../../../assets/images/02-右上角.png" <div class="vertical"></div>
alt="" <div class="gradientOneNum">{{ nursingFacilityNum }}</div>
class="topRight" </div>
/>
<img
src="./../../../assets/images/03-左下角.png"
alt=""
class="lowerLeft"
/>
<img
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="warningInfo" v-if="d == true">暂无下级数据</div>
<div class="titleHead">养老机构</div>
<div class="displayBox">
<div class="gradientBox">
<div class="gradientTitle">养老机构</div>
<div class="vertical"></div>
<div class="gradientOneNum">{{ nursingFacilityNum }}</div>
</div> </div>
<div class="pension" id="pension"></div>
</div> </div>
<div class="pension" id="pension"></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -109,70 +73,58 @@ ...@@ -109,70 +73,58 @@
<!-- <div class="titleHead"> <!-- <div class="titleHead">
当前选择:{{ address ? address : "广西全区" }} 当前选择:{{ address ? address : "广西全区" }}
</div> --> </div> -->
<img class="returnInfos" src="./../../../assets/images/returns.png" @click="returnInfo" v-if="num != 0"/>
<div class="mechanismMap" id="mechanismMap"></div>
<img class="guideIcon" src="./../../../assets/images/guide.png" alt="">
</div>
</el-col>
<el-col :span="8">
<div class="wianstow">
<img
src="./../../../assets/images/01-左上角.png"
alt=""
class="topLeft"
/>
<img <img
src="./../../../assets/images/02-右上角.png" class="returnInfos"
alt="" src="./../../../assets/images/returns.png"
class="topRight" @click="returnInfo"
/> v-if="num != 0"
<img
src="./../../../assets/images/03-左下角.png"
alt=""
class="lowerLeft"
/> />
<div class="mechanismMap" id="mechanismMap"></div>
<img <img
src="./../../../assets/images/04-右下角.png" class="guideIcon"
src="./../../../assets/images/guide.png"
alt="" alt=""
class="lowerRight"
/> />
<div class="warningInfo" v-if="c == true">暂无下级数据</div> </div>
<div class="wians"> </el-col>
<div class="titleHead">敬老院</div>
<div class="displayBox"> <el-col :span="8">
<div class="gradientBox"> <div class="panel">
<div class="gradientTitle">敬老院</div> <div class="wian">
<div class="vertical"></div> <div class="warningInfo" v-if="c == true">暂无下级数据</div>
<div class="gradientOneNum">{{ beadhouseNum }}</div> <div class="wians">
<div class="titleHead">敬老院</div>
<div class="displayBox">
<div class="gradientBox">
<div class="gradientTitle">敬老院</div>
<div class="vertical"></div>
<div class="gradientOneNum">{{ beadhouseNum }}</div>
</div>
</div> </div>
</div> <div class="datalist">
<div class="datalist"> <el-table
<el-table :data="tableData"
:data="tableData" stripe
stripe style="
style=" width: 100%;
width: 100%; background-color: #082c61;
background-color: #051d3f; color: #2177b9;
color: #2177b9; "
" :header-cell-style="headerCellStyle"
:header-cell-style="{ :cell-style="cellStyle"
background: '#082C61',
color: '#DAD7DB',
}"
:cell-style="{ background: '#082C61', color: '#DAD7DB' }"
>
<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 type="index" label="排名" align="center">
<el-table-column prop="num" label="数量" align="center"> </el-table-column>
</el-table-column> <el-table-column
</el-table> prop="name"
label="区域名称"
align="center"
>
</el-table-column>
<el-table-column prop="num" label="数量" align="center">
</el-table-column>
</el-table>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -180,77 +132,59 @@ ...@@ -180,77 +132,59 @@
<el-col :span="24"> <el-col :span="24">
<br /> <br />
<div class="wiansw"> <div class="panel">
<img <div class="wian">
src="./../../../assets/images/01-左上角.png" <div class="warningInfo" v-if="b == true">暂无下级数据</div>
alt="" <div class="titleHead">社会组织</div>
class="topLeft" <el-row :gutter="20">
/> <el-col :span="4">
<img <br />
src="./../../../assets/images/02-右上角.png" <br /><br /><br />
alt="" <el-row :gutter="20">
class="topRight" <el-col :span="18" :offset="6">
/> <div class="displayBox">
<img <div class="gradientBox">
src="./../../../assets/images/03-左下角.png" <div class="gradientTitle">社团</div>
alt="" <div class="vertical"></div>
class="lowerLeft" <div class="gradientOneNum">
/> {{ soorganStats.leagueNum }}
<img </div>
src="./../../../assets/images/04-右下角.png"
alt=""
class="lowerRight"
/>
<div class="warningInfo" v-if="b == true">暂无下级数据</div>
<div class="titleHead">社会组织</div>
<el-row :gutter="20">
<el-col :span="4">
<br />
<br /><br /><br />
<el-row :gutter="20">
<el-col :span="18" :offset="6">
<div class="displayBox">
<div class="gradientBox">
<div class="gradientTitle">社团</div>
<div class="vertical"></div>
<div class="gradientOneNum">
{{ soorganStats.leagueNum }}
</div> </div>
</div> </div>
</div> </el-col>
</el-col> <el-col :span="18" :offset="6">
<el-col :span="18" :offset="6"> <div class="displayBox">
<div class="displayBox"> <div class="gradientBox">
<div class="gradientBox"> <div class="gradientTitle">民非</div>
<div class="gradientTitle">民非</div> <div class="vertical"></div>
<div class="vertical"></div> <div class="gradientTwoNum">
<div class="gradientTwoNum"> {{ soorganStats.minFeiNum }}
{{ soorganStats.minFeiNum }} </div>
</div> </div>
</div> </div>
</div> </el-col>
</el-col> <el-col :span="18" :offset="6">
<el-col :span="18" :offset="6"> <div class="displayBox">
<div class="displayBox"> <div class="gradientBox">
<div class="gradientBox"> <div class="gradientTitle">基金会</div>
<div class="gradientTitle">基金会</div> <div class="vertical"></div>
<div class="vertical"></div> <div class="gradientThreeNum">
<div class="gradientThreeNum"> {{
{{ soorganStats.foundationNum
soorganStats.foundationNum ? soorganStats.foundationNum
? soorganStats.foundationNum : 0
: 0 }}
}} </div>
</div> </div>
</div> </div>
</div> </el-col>
</el-col> </el-row>
</el-row> </el-col>
</el-col> <el-col :span="20">
<el-col :span="20"> <div id="sociology" class="sociology"></div>
<div id="sociology" class="sociology"></div> </el-col>
</el-col> </el-row>
</el-row> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -313,6 +247,12 @@ export default { ...@@ -313,6 +247,12 @@ export default {
this.getMapData("g450000"); //默认展示广西 g450000 this.getMapData("g450000"); //默认展示广西 g450000
}, },
methods: { methods: {
headerCellStyle() {
return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
},
cellStyle() {
return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
},
getSoorganStatsFun(data) { getSoorganStatsFun(data) {
getSoorganStats({ getSoorganStats({
areaCode: data, areaCode: data,
...@@ -661,7 +601,7 @@ export default { ...@@ -661,7 +601,7 @@ export default {
}; };
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -790,7 +730,7 @@ export default { ...@@ -790,7 +730,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -877,7 +817,7 @@ export default { ...@@ -877,7 +817,7 @@ export default {
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom, "dark");
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
...@@ -919,6 +859,11 @@ export default { ...@@ -919,6 +859,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
.el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: #051d3f;
}
.el-input__inner { .el-input__inner {
background-color: #051d3f; background-color: #051d3f;
color: #fff; color: #fff;
...@@ -1038,11 +983,9 @@ export default { ...@@ -1038,11 +983,9 @@ export default {
.titleHead { .titleHead {
height: 30px; height: 30px;
font-size: 16px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #2177b9; color: #fff;
text-align: center;
background-color: #051d3f;
} }
.flexBox { .flexBox {
...@@ -1057,11 +1000,17 @@ export default { ...@@ -1057,11 +1000,17 @@ export default {
} }
.wian { .wian {
// height: 4.583rem;
margin-left: -50px;
margin-bottom: 20px;
}
.panel {
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; position: relative;
border: 1px solid #1a6295; margin-bottom: 0.833rem;
width: 100%;
height: 520px;
background-color: #021a56;
} }
.wiansw { .wiansw {
position: relative; position: relative;
...@@ -1073,7 +1022,7 @@ export default { ...@@ -1073,7 +1022,7 @@ export default {
.wians { .wians {
width: 100%; width: 100%;
height: 578px; height: 578px;
background-color: #021a56; // background-color: #021a56;
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -1110,7 +1059,7 @@ export default { ...@@ -1110,7 +1059,7 @@ export default {
width: 25px; width: 25px;
height: 25px; height: 25px;
z-index: 9999; z-index: 9999;
cursor:pointer cursor: pointer;
} }
.returnInfos img { .returnInfos img {
...@@ -1155,7 +1104,7 @@ export default { ...@@ -1155,7 +1104,7 @@ export default {
align-items: center; align-items: center;
width: 200px; width: 200px;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1188,7 +1137,7 @@ export default { ...@@ -1188,7 +1137,7 @@ export default {
.vertical { .vertical {
width: 2px; width: 2px;
height: 100%; height: 100%;
background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1); // background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1);
margin: 0 5px; margin: 0 5px;
} }
</style> </style>
\ No newline at end of file
...@@ -6,27 +6,9 @@ ...@@ -6,27 +6,9 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="a == true">暂无下级数据</div> <div class="warningInfo" v-if="a == true">暂无下级数据</div>
<div class="titleHead">婚姻登记分析</div> <div class="titleHead">婚姻登记分析</div>
<el-row :gutter="20" justify="center"> <el-row :gutter="20" justify="center">
...@@ -68,32 +50,15 @@ ...@@ -68,32 +50,15 @@
<div id="marriage" class="target"></div> <div id="marriage" class="target"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="c == true">暂无下级数据</div> <div class="warningInfo" v-if="c == true">暂无下级数据</div>
<div class="titleHead">儿童福利统计</div> <div class="titleHead">儿童福利统计</div>
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -116,6 +81,7 @@ ...@@ -116,6 +81,7 @@
</el-row> </el-row>
<div class="orphan" id="orphan"></div> <div class="orphan" id="orphan"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
...@@ -166,27 +132,9 @@ ...@@ -166,27 +132,9 @@
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24" <el-col :span="24"
><div class="wianss"> >
<img <div class="panel">
src="./../../../assets/images/01-左上角.png" <div class="wian">
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="warningInfo" v-if="num != 0">暂无下级数据</div> <div class="warningInfo" v-if="num != 0">暂无下级数据</div>
<div class="titleHead">残疾人两项补贴</div> <div class="titleHead">残疾人两项补贴</div>
<el-row :gutter="20" justify="center"> <el-row :gutter="20" justify="center">
...@@ -225,6 +173,7 @@ ...@@ -225,6 +173,7 @@
</el-row> </el-row>
<div id="annualStatistics" class="annualStatistics"></div> <div id="annualStatistics" class="annualStatistics"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
...@@ -233,34 +182,15 @@ ...@@ -233,34 +182,15 @@
<el-col :span="6"> <el-col :span="6">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="d == true">暂无下级数据</div> <div class="warningInfo" v-if="d == true">暂无下级数据</div>
<div class="titleHead">社会救助对象统计</div> <div class="titleHead">社会救助对象统计</div>
<el-row :gutter="20"> <el-row :gutter="20">
<div class="displayBox"> <div class="displayBox">
<el-col :span="12"> <el-col :span="12">
<div class="gradientBox"> <div class="gradientBox">
<div class="gradientTitle">城市低保对象</div> <div class="gradientTitle">城市低保<br>对象</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientOneNum"> <div class="gradientOneNum">
{{ getEnjoyNum.cityNum }} {{ getEnjoyNum.cityNum }}
...@@ -269,7 +199,7 @@ ...@@ -269,7 +199,7 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="gradientBox"> <div class="gradientBox">
<div class="gradientTitle">农村低保对象</div> <div class="gradientTitle">农村低保<br>对象</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientTwoNum"> <div class="gradientTwoNum">
{{ getEnjoyNum.villageNum }} {{ getEnjoyNum.villageNum }}
...@@ -280,34 +210,17 @@ ...@@ -280,34 +210,17 @@
</el-row> </el-row>
<div id="rescueTarget" class="target"></div> <div id="rescueTarget" class="target"></div>
</div> </div>
</div>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<br /> <br />
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="f == true">暂无下级数据</div> <div class="warningInfo" v-if="f == true">暂无下级数据</div>
<div class="titleHead">殡葬火化统计</div> <div class="titleHead">殡葬火化统计</div>
<div id="proportion" class="proportion"></div> <div id="proportion" class="proportion"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
...@@ -736,7 +649,7 @@ export default { ...@@ -736,7 +649,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: 'rgba(128, 128, 128, 0)',
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -839,7 +752,7 @@ export default { ...@@ -839,7 +752,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: 'rgba(128, 128, 128, 0)',
titleHead: { titleHead: {
left: "3%", left: "3%",
top: "8%", top: "8%",
...@@ -949,7 +862,7 @@ export default { ...@@ -949,7 +862,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: 'rgba(128, 128, 128, 0)',
titleHead: { titleHead: {
left: "3%", left: "3%",
top: "8%", top: "8%",
...@@ -1057,7 +970,7 @@ export default { ...@@ -1057,7 +970,7 @@ export default {
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom, "dark");
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: 'rgba(128, 128, 128, 0)',
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
...@@ -1192,7 +1105,7 @@ export default { ...@@ -1192,7 +1105,7 @@ export default {
}; };
option = { option = {
backgroundColor: "#021A56", backgroundColor: 'rgba(128, 128, 128, 0)',
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -1398,9 +1311,9 @@ export default { ...@@ -1398,9 +1311,9 @@ export default {
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 30px auto ;
padding: 5px 0; padding: 5px 0;
} }
.gradientBoxs { .gradientBoxs {
...@@ -1409,7 +1322,7 @@ export default { ...@@ -1409,7 +1322,7 @@ export default {
align-items: center; align-items: center;
width: 240px; width: 240px;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1417,6 +1330,7 @@ export default { ...@@ -1417,6 +1330,7 @@ export default {
.gradientTitle { .gradientTitle {
font-size: 12px; font-size: 12px;
color: #c5cfdd; color: #c5cfdd;
text-align: center;
} }
.gradientOneNum { .gradientOneNum {
font-size: 24px; font-size: 24px;
...@@ -1449,7 +1363,7 @@ export default { ...@@ -1449,7 +1363,7 @@ export default {
.vertical { .vertical {
width: 2px; width: 2px;
height: 100%; height: 100%;
background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1); // background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1);
margin: 0 5px; margin: 0 5px;
} }
.disabilityPeople { .disabilityPeople {
...@@ -1471,11 +1385,9 @@ export default { ...@@ -1471,11 +1385,9 @@ export default {
.titleHead { .titleHead {
height: 30px; height: 30px;
font-size: 16px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #2177b9; color: #fff;
text-align: center;
background-color: #051d3f;
} }
.flexBox { .flexBox {
...@@ -1489,11 +1401,17 @@ export default { ...@@ -1489,11 +1401,17 @@ export default {
} }
.wian { .wian {
width: 100%; // height: 4.583rem;
height: 520px; margin-left: -50px;
background-color: #021a57; margin-bottom: 20px;
position: relative; }
border: 1px solid #1a6295; .panel {
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;
} }
.wians { .wians {
......
...@@ -6,27 +6,8 @@ ...@@ -6,27 +6,8 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="tionStats">暂无下级数据</div> <div class="warningInfo" v-if="tionStats">暂无下级数据</div>
<div class="titleHead">火化量汇总</div> <div class="titleHead">火化量汇总</div>
<div class="xxxBox"> <div class="xxxBox">
...@@ -64,36 +45,19 @@ ...@@ -64,36 +45,19 @@
<div class="text">%</div> <div class="text">%</div>
</div> --> </div> -->
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="RateStats">暂无下级数据</div> <div class="warningInfo" v-if="RateStats">暂无下级数据</div>
<div class="titleHead">火化率统计</div> <div class="titleHead">火化率统计</div>
<div id="proportion" class="proportion"></div> <div id="proportion" class="proportion"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
...@@ -135,61 +99,24 @@ ...@@ -135,61 +99,24 @@
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24" <el-col :span="24"
><div class="wianss"> ><div class="panel">
<img <div class="wian">
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="warningInfo" v-if="StatsList">暂无下级数据</div> <div class="warningInfo" v-if="StatsList">暂无下级数据</div>
<div class="titleHead">火化区域分析</div> <div class="titleHead">火化区域分析</div>
<div id="annualStatistics" class="annualStatistics"></div> <div id="annualStatistics" class="annualStatistics"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="wiansInfoS"> <div class="panel">
<img <div class="wians">
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="wiansInfo"> <div class="wiansInfo">
<div class="titleHead"> <div class="titleHead ma20">
{{ address ? address : "广西全区" }}火化信息查询 {{ address ? address : "广西全区" }}火化信息查询
</div> </div>
<el-input <el-input
...@@ -262,6 +189,7 @@ ...@@ -262,6 +189,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</el-col> </el-col>
<!-- <br /> <!-- <br />
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -311,11 +239,11 @@ export default { ...@@ -311,11 +239,11 @@ export default {
this.cremationSearchFun(); this.cremationSearchFun();
}, },
methods: { methods: {
headerCellStyle() { headerCellStyle() {
return " background:#082C61;color:#DAD7DB;border-bottom:1px solid #04234e; "; return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
}, },
cellStyle() { cellStyle() {
return " background:#082C61;color:#DAD7DB;border-bottom:1px solid #04234e; "; return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
}, },
inputBtn() { inputBtn() {
console.log(this.value); console.log(this.value);
...@@ -548,7 +476,7 @@ export default { ...@@ -548,7 +476,7 @@ export default {
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom, "dark");
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
...@@ -683,7 +611,7 @@ export default { ...@@ -683,7 +611,7 @@ export default {
}; };
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -907,14 +835,14 @@ export default { ...@@ -907,14 +835,14 @@ export default {
width: 100%; width: 100%;
height: 360px; height: 360px;
} }
.ma20 {
margin-left: 20px;
}
.titleHead { .titleHead {
height: 30px; height: 30px;
font-size: 16px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #2177b9; color: #fff;
text-align: center;
background-color: #051d3f;
} }
.flexBox { .flexBox {
...@@ -928,19 +856,22 @@ export default { ...@@ -928,19 +856,22 @@ export default {
} }
.wian { .wian {
// height: 4.583rem;
margin-left: -50px;
margin-bottom: 20px;
}
.panel {
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; position: relative;
border: 1px solid #1a6295; margin-bottom: 0.833rem;
width: 100%;
height: 500px;
background-color: #021A56;
} }
.wians { .wians {
position: relative; margin-left: -5rem;
border: 1px solid #1a6295; margin-right: -1rem;
width: 100%; margin-bottom: 20px;
height: 500px;
background-color: #021A56;
} }
.wianss { .wianss {
...@@ -952,9 +883,9 @@ export default { ...@@ -952,9 +883,9 @@ export default {
} }
.wiansInfo { .wiansInfo {
width: 100%; // width: 100%;
height: 1015px; // height: 1015px;
background-color: #021A56; // background-color: #021A56;
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -1030,7 +961,7 @@ export default { ...@@ -1030,7 +961,7 @@ export default {
align-items: center; align-items: center;
width: 180px; width: 180px;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1041,7 +972,7 @@ export default { ...@@ -1041,7 +972,7 @@ export default {
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1074,7 +1005,7 @@ export default { ...@@ -1074,7 +1005,7 @@ export default {
.vertical { .vertical {
width: 2px; width: 2px;
height: 100%; height: 100%;
background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1); // background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1);
margin: 0 5px; margin: 0 5px;
} }
</style> </style>
\ No newline at end of file
...@@ -6,27 +6,8 @@ ...@@ -6,27 +6,8 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="a == true">暂无下级数据</div> <div class="warningInfo" v-if="a == true">暂无下级数据</div>
<div class="titleHead">当前享受低保人数</div> <div class="titleHead">当前享受低保人数</div>
<div class="xxxBox"> <div class="xxxBox">
...@@ -147,33 +128,15 @@ ...@@ -147,33 +128,15 @@
</div> --> </div> -->
<!-- <div id="fivePeople" class="trend"></div> --> <!-- <div id="fivePeople" class="trend"></div> -->
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="b == true">暂无下级数据</div> <div class="warningInfo" v-if="b == true">暂无下级数据</div>
<div class="titleHead">城市农村低保人数比例统计</div> <div class="titleHead">城市农村低保人数比例统计</div>
<div class="displayBox"> <div class="displayBox">
...@@ -194,6 +157,7 @@ ...@@ -194,6 +157,7 @@
</div> </div>
<div id="fiveCapital" class="trend"></div> <div id="fiveCapital" class="trend"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
...@@ -252,60 +216,23 @@ ...@@ -252,60 +216,23 @@
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wianss"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="c == true">暂无下级数据</div> <div class="warningInfo" v-if="c == true">暂无下级数据</div>
<div class="titleHead">城市农村低保人数统计</div> <div class="titleHead matop10">城市农村低保人数统计</div>
<div id="ruralAndcity" class="ruralAndcity"></div> <div id="ruralAndcity" class="ruralAndcity"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="wiansInfoS"> <div class="panel">
<img <div class="wians">
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="wiansInfo"> <div class="wiansInfo">
<div class="titleHead"> <div class="titleHead ma20">
{{ address ? address : "广西全区" }}低保对象查询 {{ address ? address : "广西全区" }}低保对象查询
</div> </div>
<el-input <el-input
...@@ -383,6 +310,7 @@ ...@@ -383,6 +310,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</el-col> </el-col>
<!-- <br /> <!-- <br />
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -413,7 +341,7 @@ export default { ...@@ -413,7 +341,7 @@ export default {
tableData: [], tableData: [],
pageInfo: { pageInfo: {
page: 1, page: 1,
size: 15, size: 14,
total: 0, total: 0,
}, },
loading: true, loading: true,
...@@ -435,16 +363,16 @@ export default { ...@@ -435,16 +363,16 @@ export default {
this.getFivesYearEnjoyStatsFun(); this.getFivesYearEnjoyStatsFun();
}, },
methods: { methods: {
headerCellStyle() { headerCellStyle() {
return " background:#082C61;color:#DAD7DB;border-bottom:1px solid #04234e; "; return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
}, },
cellStyle() { cellStyle() {
return " background:#082C61;color:#DAD7DB;border-bottom:1px solid #04234e; "; return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
}, },
rowStyle({ row, rowsIndex }) { rowStyle({ row, rowsIndex }) {
if (row) { if (row) {
return { return {
backgroundColor: "#134880", backgroundColor: "rgba(128, 128, 128, 0)",
}; };
} }
}, },
...@@ -685,7 +613,7 @@ export default { ...@@ -685,7 +613,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor:"rgba(128, 128, 128, 0)",
titleHead: {}, titleHead: {},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -788,7 +716,7 @@ export default { ...@@ -788,7 +716,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
titleHead: {}, titleHead: {},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -889,7 +817,7 @@ export default { ...@@ -889,7 +817,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
title: { title: {
text: "", text: "",
}, },
...@@ -1058,12 +986,10 @@ export default { ...@@ -1058,12 +986,10 @@ export default {
} }
.titleHead { .titleHead {
height: 30px; height: 30px;
font-size: 16px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #2177b9; color: #fff;
text-align: center;
background-color: #051d3f;
} }
.flexBox { .flexBox {
...@@ -1096,21 +1022,30 @@ export default { ...@@ -1096,21 +1022,30 @@ export default {
height: 580px; height: 580px;
//background-color: #082c61; //background-color: #082c61;
} }
.ma20 {
margin-left: 20px;
}
.matop10{
margin-bottom: 20px;
}
.wian { .wian {
// height: 4.583rem;
margin-left: -50px;
margin-bottom: 20px;
}
.panel {
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; position: relative;
border: 1px solid #1a6295; margin-bottom: 0.833rem;
width: 100%;
height: 500px;
background-color: #021a56;
} }
.wians { .wians {
position: relative; margin-left: -5rem;
border: 1px solid #1a6295; margin-right: -1rem;
width: 100%; margin-bottom: 20px;
height: 500px;
background-color: #021a56;
} }
.wianss { .wianss {
...@@ -1126,9 +1061,7 @@ export default { ...@@ -1126,9 +1061,7 @@ export default {
border: 1px solid #1a6295; border: 1px solid #1a6295;
} }
.wiansInfo { .wiansInfo {
width: 100%;
height: 1015px;
background-color: #021a56;
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -1315,7 +1248,7 @@ export default { ...@@ -1315,7 +1248,7 @@ export default {
align-items: center; align-items: center;
width: 180px; width: 180px;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1326,7 +1259,7 @@ export default { ...@@ -1326,7 +1259,7 @@ export default {
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 16px auto 0 auto; margin: 16px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1367,7 +1300,7 @@ export default { ...@@ -1367,7 +1300,7 @@ export default {
.vertical { .vertical {
width: 2px; width: 2px;
height: 100%; height: 100%;
background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1); // background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1);
margin: 0 5px; margin: 0 5px;
} }
</style> </style>
\ No newline at end of file
...@@ -6,27 +6,8 @@ ...@@ -6,27 +6,8 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="ganStats">暂无下级数据</div> <div class="warningInfo" v-if="ganStats">暂无下级数据</div>
<div class="titleHead">社会组织汇总</div> <div class="titleHead">社会组织汇总</div>
<div class="xxxBox"> <div class="xxxBox">
...@@ -110,36 +91,19 @@ ...@@ -110,36 +91,19 @@
<div class="text"></div> <div class="text"></div>
</div> --> </div> -->
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="PercentageStats">暂无下级数据</div> <div class="warningInfo" v-if="PercentageStats">暂无下级数据</div>
<div class="titleHead">区域占比</div> <div class="titleHead">区域占比</div>
<div id="proportion" class="proportion"></div> <div id="proportion" class="proportion"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
...@@ -184,27 +148,8 @@ ...@@ -184,27 +148,8 @@
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wianss"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="SoorganStatsList"> <div class="warningInfo" v-if="SoorganStatsList">
暂无下级数据 暂无下级数据
</div> </div>
...@@ -245,35 +190,17 @@ ...@@ -245,35 +190,17 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="wiansInfoS"> <div class="panel">
<img <div class="wians">
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="wiansInfo"> <div class="wiansInfo">
<div class="titleHead"> <div class="titleHead ma20">
{{ address ? address : "广西全区" }}社会组织查询 {{ address ? address : "广西全区" }}社会组织查询
</div> </div>
<el-input <el-input
...@@ -323,6 +250,7 @@ ...@@ -323,6 +250,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</el-col> </el-col>
<!-- <br /> <!-- <br />
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -342,7 +270,9 @@ import { ...@@ -342,7 +270,9 @@ import {
soorganSearch, soorganSearch,
getMapData, getMapData,
} from "@/api/unified/unified"; } from "@/api/unified/unified";
import Item from '../../../layout/components/Sidebar/Item.vue';
export default { export default {
components: { Item },
data() { data() {
return { return {
num: 0, num: 0,
...@@ -353,7 +283,7 @@ export default { ...@@ -353,7 +283,7 @@ export default {
tableData: [], tableData: [],
pageInfo: { pageInfo: {
page: 1, page: 1,
size: 20, size: 18,
total: 0, total: 0,
}, },
loading: true, loading: true,
...@@ -372,11 +302,11 @@ export default { ...@@ -372,11 +302,11 @@ export default {
this.soorganSearchFun(); this.soorganSearchFun();
}, },
methods: { methods: {
headerCellStyle() { headerCellStyle() {
return " background:#082C61;color:#DAD7DB;border-bottom:1px solid #04234e; "; return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
}, },
cellStyle() { cellStyle() {
return " background:#082C61;color:#DAD7DB;border-bottom:1px solid #04234e; "; return " background:#081F3F;color:#DAD7DB;border-bottom:1px solid #04234e; ";
}, },
inputBtn() { inputBtn() {
console.log(this.value); console.log(this.value);
...@@ -611,7 +541,7 @@ export default { ...@@ -611,7 +541,7 @@ export default {
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom, "dark");
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
...@@ -745,7 +675,7 @@ export default { ...@@ -745,7 +675,7 @@ export default {
}; };
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -1018,14 +948,14 @@ export default { ...@@ -1018,14 +948,14 @@ export default {
width: 100%; width: 100%;
height: 360px; height: 360px;
} }
.ma20 {
margin-left: 20px;
}
.titleHead { .titleHead {
height: 30px; height: 30px;
font-size: 16px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #2177b9; color: #fff;
text-align: center;
background-color: #051d3f;
} }
.flexBox { .flexBox {
...@@ -1039,19 +969,22 @@ export default { ...@@ -1039,19 +969,22 @@ export default {
} }
.wian { .wian {
// height: 4.583rem;
margin-left: -50px;
margin-bottom: 20px;
}
.panel {
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; position: relative;
border: 1px solid #1a6295; margin-bottom: 0.833rem;
width: 100%;
height: 500px;
background-color: #021A56;
} }
.wians { .wians {
position: relative; margin-left: -5rem;
border: 1px solid #1a6295; margin-right: -1rem;
width: 100%; margin-bottom: 20px;
height: 500px;
background-color: #021A56;
} }
.wianss { .wianss {
...@@ -1067,9 +1000,9 @@ export default { ...@@ -1067,9 +1000,9 @@ export default {
width: 100%; width: 100%;
} }
.wiansInfo { .wiansInfo {
width: 100%; // width: 100%;
height: 1015px; // height: 1015px;
background-color: #021A56; // background-color: #021A56;
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -1144,7 +1077,7 @@ export default { ...@@ -1144,7 +1077,7 @@ export default {
align-items: center; align-items: center;
width: 180px; width: 180px;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1155,7 +1088,7 @@ export default { ...@@ -1155,7 +1088,7 @@ export default {
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1196,7 +1129,7 @@ export default { ...@@ -1196,7 +1129,7 @@ export default {
.vertical { .vertical {
width: 2px; width: 2px;
height: 100%; height: 100%;
background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1); // background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1);
margin: 0 5px; margin: 0 5px;
} }
</style> </style>
\ No newline at end of file
...@@ -6,39 +6,20 @@ ...@@ -6,39 +6,20 @@
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="IssueStats">暂无下级数据</div> <div class="warningInfo" v-if="IssueStats">暂无下级数据</div>
<div class="titleHead">三年贫困残疾资金发放</div> <div class="titleHead">三年贫困残疾资金发放</div>
<div class="displayBox"> <div class="displayBox">
<div class="gradientBox"> <div class="gradientBox">
<div class="gradientTitle">贫困残疾救助</div> <div class="gradientTitle">贫困<br>残疾救助</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientOneNum"> <div class="gradientOneNum">
{{ poorDisabledNum.difficultTotalNum }} {{ poorDisabledNum.difficultTotalNum }}
</div> </div>
</div> </div>
<div class="gradientBox"> <div class="gradientBox">
<div class="gradientTitle">重度残疾救助</div> <div class="gradientTitle">重度<br>残疾救助</div>
<div class="vertical"></div> <div class="vertical"></div>
<div class="gradientTwoNum"> <div class="gradientTwoNum">
{{ poorDisabledNum.severeTotalNum }} {{ poorDisabledNum.severeTotalNum }}
...@@ -47,33 +28,15 @@ ...@@ -47,33 +28,15 @@
</div> </div>
<div id="fivePeople" class="trend"></div> <div id="fivePeople" class="trend"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
<el-row :gutter="18"> <el-row :gutter="18">
<el-col :span="24"> </el-col> <el-col :span="24"> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="wian"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="LevelStats">暂无下级数据</div> <div class="warningInfo" v-if="LevelStats">暂无下级数据</div>
<div class="titleHead">残疾人比例</div> <div class="titleHead">残疾人比例</div>
<div class="subsidiesBox"> <div class="subsidiesBox">
...@@ -91,6 +54,7 @@ ...@@ -91,6 +54,7 @@
<div class="subsidiesText">{{ item.percentage }}%</div> <div class="subsidiesText">{{ item.percentage }}%</div>
</div> </div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
<br /> <br />
...@@ -140,62 +104,25 @@ ...@@ -140,62 +104,25 @@
<br /> <br />
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<div class="wianss"> <div class="panel">
<img <div class="wian">
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="warningInfo" v-if="DisabledIssueStats"> <div class="warningInfo" v-if="DisabledIssueStats">
暂无下级数据 暂无下级数据
</div> </div>
<div class="titleHead">城市农村低保人数统计</div> <div class="titleHead matop">城市农村低保人数统计</div>
<div id="ruralAndcity" class="ruralAndcity"></div> <div id="ruralAndcity" class="ruralAndcity"></div>
</div> </div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<!-- 右 --> <!-- 右 -->
<el-col :span="6"> <el-col :span="6">
<div class="wiansInfoS"> <div class="panel">
<img <div class="wians">
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="wiansInfo"> <div class="wiansInfo">
<div class="titleHead"> <div class="titleHead ma20">
{{ address ? address : "广西全区" }}残疾人信息查询 {{ address ? address : "广西全区" }}残疾人信息查询
</div> </div>
<el-input <el-input
...@@ -250,6 +177,7 @@ ...@@ -250,6 +177,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</el-col> </el-col>
<!-- <br /> <!-- <br />
<el-row :gutter="20"> <el-row :gutter="20">
...@@ -269,7 +197,9 @@ import { ...@@ -269,7 +197,9 @@ import {
deformedManSearch, deformedManSearch,
getMapData, getMapData,
} from "@/api/unified/unified"; } from "@/api/unified/unified";
import Item from '../../../layout/components/Sidebar/Item.vue';
export default { export default {
components: { Item },
data() { data() {
return { return {
DisabledIssueStats: false, DisabledIssueStats: false,
...@@ -280,7 +210,7 @@ export default { ...@@ -280,7 +210,7 @@ export default {
tableData: [], tableData: [],
pageInfo: { pageInfo: {
page: 1, page: 1,
size: 20, size: 19,
total: 0, total: 0,
}, },
loading: true, loading: true,
...@@ -538,7 +468,7 @@ export default { ...@@ -538,7 +468,7 @@ export default {
var option; var option;
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
titleHead: {}, titleHead: {},
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -735,7 +665,7 @@ export default { ...@@ -735,7 +665,7 @@ export default {
}; };
option = { option = {
backgroundColor: "#021A56", backgroundColor: "rgba(128, 128, 128, 0)",
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
...@@ -907,14 +837,17 @@ export default { ...@@ -907,14 +837,17 @@ export default {
width: 100%; width: 100%;
height: 260px; height: 260px;
} }
.ma20 {
margin-left: 20px;
}
.matop{
margin-bottom: 20px;
}
.titleHead { .titleHead {
height: 30px; height: 30px;
font-size: 16px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #2177b9; color: #fff;
text-align: center;
background-color: #051d3f;
} }
.flexBox { .flexBox {
...@@ -950,21 +883,25 @@ export default { ...@@ -950,21 +883,25 @@ export default {
} }
.wian { .wian {
// height: 4.583rem;
margin-left: -50px;
margin-bottom: 20px;
}
.panel {
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; position: relative;
border: 1px solid #1a6295; margin-bottom: 0.833rem;
width: 100%;
height: 500px;
background-color: #021A56;
} }
.wians { .wians {
position: relative; margin-left: -5rem;
border: 1px solid #1a6295; margin-right: -1rem;
width: 100%; margin-bottom: 20px;
height: 500px;
background-color: #021A56;
} }
.wianss { .wianss {
position: relative; position: relative;
border: 1px solid #1a6295; border: 1px solid #1a6295;
...@@ -978,9 +915,9 @@ export default { ...@@ -978,9 +915,9 @@ export default {
border: 1px solid #1a6295; border: 1px solid #1a6295;
} }
.wiansInfo { .wiansInfo {
width: 100%; // width: 100%;
height: 1015px; // height: 1015px;
background-color: #021A56; // background-color: #021A56;
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
...@@ -1093,7 +1030,7 @@ export default { ...@@ -1093,7 +1030,7 @@ export default {
width: 90%; width: 90%;
background-color: #082c61; background-color: #082c61;
color: #7f8b9d; color: #7f8b9d;
margin: 10px 20px; margin: 20px;
} }
.el-icon-search { .el-icon-search {
...@@ -1124,7 +1061,7 @@ export default { ...@@ -1124,7 +1061,7 @@ export default {
align-items: center; align-items: center;
width: 200px; width: 200px;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
...@@ -1134,12 +1071,13 @@ export default { ...@@ -1134,12 +1071,13 @@ export default {
align-items: center; align-items: center;
width: 240px; width: 240px;
height: 60px; height: 60px;
background: linear-gradient(to right, #204c81, #09225b, #0e2c63); // background: linear-gradient(to right, #204c81, #09225b, #0e2c63);
border-radius: 8px; border-radius: 8px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding: 5px 0; padding: 5px 0;
} }
.gradientTitle { .gradientTitle {
text-align: center;
font-size: 12px; font-size: 12px;
color: #c5cfdd; color: #c5cfdd;
} }
...@@ -1167,7 +1105,7 @@ export default { ...@@ -1167,7 +1105,7 @@ export default {
.vertical { .vertical {
width: 2px; width: 2px;
height: 100%; height: 100%;
background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1); // background: linear-gradient(to top, #2f6598, #65c5f1, #2f6598, #65c5f1);
margin: 0 5px; margin: 0 5px;
} }
</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