chenrui
/
zdxtLawEnforcementCode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

综合统计分析页面

v4
chenrui 2 years ago
parent
5c4c81b067
commit
de5a96741a
4 changed files with 402 additions and 197 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 317
      lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/css/stat1.css
  2. 280
      lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/code/statistical/statisticalPanel.html
  3. 0
      lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/code/statisticsEnterprise/jd
  4. 2
      lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/code/statisticsEnterprise/statisticsEnterprise.html

317
lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/static/css/stat1.css
View File

@ -3,280 +3,276 @@
/* CSS Document */ /* CSS Document */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Microsoft Yahei', Arial, Verdana, sans-serif; font-family: 'Microsoft Yahei', Arial, Verdana, sans-serif;
} }
html { html {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
body { body {
height: 100%; height: 100%;
width: 100%; width: 100%;
color: #4c4c4c; color: #4c4c4c;
font-size: 14px; font-size: 14px;
} }
.statwrap { .statwrap {
padding: 1.5% 1%; padding: 1.5% 1%;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.headtit { .headtit {
height: 3rem; height: 3rem;
} }
.seltime { .seltime {
display: flex; display: flex;
position: absolute; position: absolute;
/*top: 110px;*/ /*top: 110px;*/
right: 1%; right: 1%;
align-items: center; align-items: center;
} }
.seltime > i { .seltime > i {
display: inline-block; display: inline-block;
margin: 0 5px 0 0; margin: 0 5px 0 0;
width: 24px; width: 24px;
height: 24px; height: 24px;
background: url(/img/icon_can.png) no-repeat; background: url(/img/icon_can.png) no-repeat;
background-size: 100%; background-size: 100%;
opacity: .5; opacity: .5;
} }
.seltime > span { .seltime > span {
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
} }
.seltime > span > select { .seltime > span > select {
display: inline-block; display: inline-block;
margin: 0 8px 0 0; margin: 0 8px 0 0;
padding: 6px; padding: 6px;
background: #FFFFFF none; background: #FFFFFF none;
border: 1px solid #e5e6e7; border: 1px solid #e5e6e7;
border-radius: 6px; border-radius: 6px;
} }
.statit { .statit {
display: flex; display: flex;
margin: 0.5% 0 1% 0; margin: 0.5% 0 1% 0;
width: 60%; width: 60%;
} }
.statit > span { .statit > span {
display: inline-block; display: inline-block;
margin: 1% 2% 0 0; margin: 1% 2% 0 0;
min-width: 6%; min-width: 6%;
height: 2.75rem; height: 2.75rem;
line-height: 1.75; line-height: 1.75;
color: rgba(0,0,0,0.4); color: rgba(0, 0, 0, 0.4);
font-size: 1.35rem; font-size: 1.35rem;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.statit>span.actit { .statit > span.actit {
/*background: url(/img/sel_tab.png) no-repeat center bottom;*/ /*background: url(/img/sel_tab.png) no-repeat center bottom;*/
border-bottom: 3px solid rgba(12, 94, 249,1); border-bottom: 3px solid rgba(12, 94, 249, 1);
color: rgb(12, 94, 249); color: rgb(12, 94, 249);
} }
.tab_box { .tab_box {
position: relative; position: relative;
margin: 2rem 0 0; margin: 2rem 0 0;
height: calc(100% - 10rem); height: calc(100% - 10rem);
clear: both; clear: both;
background: #fff; background: #fff;
} }
.tab_item { .tab_item {
position: absolute; position: absolute;
z-index: -999; z-index: -999;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: white background-color: white
} }
.tab_cont { .tab_cont {
float: left; float: left;
width: 50%; width: 50%;
height: 100%; height: 100%;
} }
.desktab { .desktab {
margin: auto; margin: auto;
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom: 0; border-bottom: 0;
border-right: 0; border-right: 0;
table-layout: fixed; table-layout: fixed;
} }
.desktab tr { .desktab tr {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.desktab tr:last-child { .desktab tr:last-child {
border-bottom: 0; border-bottom: 0;
} }
.desktab td, .desktab th, .noborder td { .desktab td, .desktab th, .noborder td {
padding: 8px 20px; padding: 8px 20px;
height: 36px; height: 36px;
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
color: #666; color: #666;
line-height: 20px; line-height: 20px;
word-break: keep-all; word-break: keep-all;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.trodd th { .trodd th {
height: 40px; height: 40px;
background: #F5F5F6; background: #F5F5F6;
color: #4c4c4c; color: #4c4c4c;
text-align: left; text-align: left;
} }
.line-clamp { .line-clamp {
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
text-align: left; text-align: left;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.listhead { .listhead {
width: calc(100% - 6px); width: calc(100% - 6px);
} }
.listbody { .listbody {
position: relative; position: relative;
margin-top: -1px; margin-top: -1px;
width: 100%; width: 100%;
height: calc(100% - 60px); height: calc(100% - 60px);
overflow: hidden; overflow: hidden;
} }
.inner { .inner {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
.chartbox { .chartbox {
float: left; float: left;
margin: 2% 2%; margin: 2% 2%;
width: 45%; width: 45%;
height: 90%; height: 90%;
} }
.tab-content { .tab-content {
display: none; display: none;
width: 100%; width: 100%;
height: calc(100% - 60px); height: calc(100% - 60px);
} }
.tab-content.active { .tab-content.active {
display: block; display: block;
} }
.cont-box { .cont-box {
width: 100%; width: 100%;
height: calc(100% - 60px); height: calc(100% - 60px);
clear: both; clear: both;
overflow-y: auto; overflow-y: auto;
} }
.chart-box { .chart-box {
float: left; float: left;
margin: 1% 5%; margin: 1% 5%;
width: 45%; width: 45%;
height: 45%; height: 45%;
} }
.static-content { .static-content {
float: left; float: left;
clear: both; clear: both;
width: 100%; width: 100%;
} }
.static-content li p { .static-content li p {
min-width: 20px; min-width: 20px;
} }
.static-content li label { .static-content li label {
position: relative; position: relative;
margin: 0 5px; margin: 0 5px;
padding-left: 20px; padding-left: 20px;
} }
.static-content li label:before { .static-content li label:before {
position: absolute; position: absolute;
top: 20%; top: 20%;
left: -5px; left: -5px;
content: "\f111"; content: "\f111";
padding-left: 1rem; padding-left: 1rem;
color: #136efb; color: #136efb;
font-size: 0.85rem; font-size: 0.85rem;
font-family: 'FontAwesome'; font-family: 'FontAwesome';
} }
.static-content li span { .static-content li span {
margin: 0 5px 0 10px; margin: 0 5px 0 10px;
} }
.static-content li b { .static-content li b {
color: #136efb; color: #136efb;
font-size: 1.5rem; font-size: 1.5rem;
} }
h1.page-title {
float: left;
margin: 2.5% 2% 0;
font-size: 2.5rem;
font-weight: 500;
color: #4c4c4c;
}
/** 滚动条样式 **/ /** 滚动条样式 **/
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: #F5F5F5; background-color: #F5F5F5;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 10px; height: 10px;
background-color: #F5F5F5; background-color: #F5F5F5;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 6px; border-radius: 6px;
background-color: #ccc; background-color: #ccc;
} }
.tab_item2 { .tab_item2 {
@ -290,7 +286,8 @@ body {
justify-content: center justify-content: center
} }
.tab_item2 .echarts{
.tab_item2 .echarts {
width: 45%; width: 45%;
height: 45%; height: 45%;
} }

280
lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/code/statistical/statisticalPanel.html
View File

@ -9,55 +9,139 @@
<th:block th:include="zdxtInclude :: datetimepicker-css" /> <th:block th:include="zdxtInclude :: datetimepicker-css" />
<link type="text/css" href="/css/stat1.css" rel="stylesheet"/> <link type="text/css" href="/css/stat1.css" rel="stylesheet"/>
<style type="text/css"> <style type="text/css">
.statwrap .panel-card{ .select-list {
width: 32%; float: right;
height: 35%; margin: 2% 0 1%;
background-color: #dedbd6;
margin: 30px 10px
} }
.statwrap{
.statwrap {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-content: center; padding: 0;
height: calc(100% - 130px);
} }
.panel-card-top{
width: 60%; .statwrap .panel-card {
height: 35%; margin: 0.75%;
padding-left: 8%; width: 31.5%;
padding-top: 2%; height: 47%;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 5px #e2e3e4;
}
.panel-card-top {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-around; justify-content: space-around;
align-items: stretch; align-items: stretch;
width: 60%;
height: 32%;
padding: 3%;
} }
.panel-card-bottom{
.panel-card-bottom {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-end; align-content: flex-end;
justify-content: space-around;
width: 100%; width: 100%;
height: 56%; height: 56%;
justify-content: space-around;
} }
.panel-card-left{
width: 35%; .panel-card-left {
height: 52%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} margin-left: -5%;
.panel-card-right{
width: 35%; width: 35%;
height: 52%; height: 52%;
border-right: 1px solid #eee;
}
.panel-card-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
width: 35%;
height: 52%;
}
.cont-title {
margin: 2% 4%;
color: #333;
font-size: 1.85rem;
font-weight: 550;
white-space: nowrap;
}
.panel-card-bottom .cont-title {
margin: 2% 4%;
color: #333;
font-size: 1.6rem;
font-weight: 550;
}
.cont-total {
margin: 2% 4%;
color: #999;
font-size: 1.25rem;
}
.cont-total b {
margin-right: 0.5rem;
color: #ff8400;
font-size: 4.5rem;
font-weight: 500;
line-height: 1.5;
}
.panel-card-bottom .cont-total b {
margin-right: 0.5rem;
color: #0e83ff;
font-size: 3rem;
font-weight: 500;
line-height: 1.75;
}
.percent-tag {
display: flex;
align-items: center;
margin: 1% 3% 2%;
}
.percent-tag span {
margin: 0.2%;
font-size: 2rem;
}
.percent-tag span span {
margin: 0;
}
.percent-tag span.data-rise, .percent-tag span.data-fall {
margin: 0 2% 0 2.5%;
color: #03a159;
font-size: 1.85rem;
font-weight: 700;
}
.percent-tag span.data-fall {
color: #ff0000;
}
.percent-tag label {
margin: 2px 0 0 5%;
color: #999;
font-size: 1.5rem;
} }
</style> </style>
</head> </head>
<body> <body>
<h1 class="page-title">综合统计分析</h1>
<form id="formId"> <form id="formId">
<div class="select-list"> <div class="select-list">
<ul> <ul>
@ -104,38 +188,162 @@
</div> </div>
</form> </form>
<div class="statwrap"> <div class="statwrap">
<div class="panel-card">
<div class="panel-card-top">
<div class="cont-title">执法部门数量</div>
<div class="cont-total"><b>48</b><span>个</span></div>
<div class="percent-tag">
<span class="data-rise">&#8593</span><span class="data-change">2</span><label>较上年</label></span>
</div>
</div>
<div class="panel-card-bottom">
<div class="panel-card-left">
<div class="cont-title">执法人员数量</div>
<div class="cont-total"><b>1,969</b><span>人</span></div>
<div class="percent-tag">
<span class="data-fall">&#8595</span><span class="data-change">32</span><label>较上年</label>
</div>
</div>
<div class="panel-card-right">
<div class="cont-title">本单位执法人员数量</div>
<div class="cont-total"><b>29</b><span>人</span></div>
<div class="percent-tag">
<span class="data-fall">&#8595</span><span class="data-change">2</span><label>较上年</label>
</div>
</div>
</div>
</div>
<div class="panel-card">
<div class="panel-card-top">
<div class="cont-title">企业数量</div>
<div class="cont-total"><b>4,317,947</b><span>家</span></div>
<div class="percent-tag">
<span class="data-rise">&#8593</span><span class="data-change">1.25万</span><label>较上年</label></span>
</div>
</div>
<div class="panel-card-bottom">
<div class="panel-card-left">
<div class="cont-title">续存企业数量</div>
<div class="cont-total"><b>3,568,481</b><span>家</span></div>
<div class="percent-tag">
<span class="data-rise">&#8593</span><span class="data-change">0.63万</span><label>较上年</label>
</div>
</div>
<div class="panel-card-right">
<div class="cont-title">注销企业数量</div>
<div class="cont-total"><b>79,962</b><span>家</span></div>
<div class="percent-tag">
<span class="data-fall">&#8595</span><span class="data-change">0.39万</span><label>较上年</label>
</div>
</div>
</div>
</div>
<div class="panel-card">
<div class="panel-card-top">
<div class="cont-title">检查计划数量</div>
<div class="cont-total"><b>1,674</b><span>个</span></div>
<div class="percent-tag">
<span class="data-rise">&#8593</span><span class="data-change">35</span><label>较上年</label></span>
</div>
</div>
<div class="panel-card-bottom">
<div class="panel-card-left">
<div class="cont-title">行政检查计划数量</div>
<div class="cont-total"><b>1,005</b><span>个</span></div>
<div class="percent-tag">
<span class="data-fall">&#8595</span><span class="data-change">62</span><label>较上年</label>
</div>
</div>
<div class="panel-card-right">
<div class="cont-title">本单位检查计划数量</div>
<div class="cont-total"><b>597</b><span>个</span></div>
<div class="percent-tag">
<span class="data-rise">&#8593</span><span class="data-change">26</span><label>较上年</label>
</div>
</div>
</div>
</div>
<div class="panel-card">
<div class="panel-card-top">
<div class="cont-title">执法检查数量</div>
<div class="cont-total"><b>14,457</b><span>件</span></div>
<div class="percent-tag">
<span class="data-rise">&#8593</span><span class="data-change">33</span><label>较上年</label></span>
</div>
</div>
<div class="panel-card-bottom">
<div class="panel-card-left">
<div class="cont-title">本单位检查数量</div>
<div class="cont-total"><b>2,356</b><span>件</span></div>
<div class="percent-tag">
<span class="data-rise">&#8593</span><span class="data-change">27</span><label>较上年</label>
</div>
</div>
<div class="panel-card-right">
<div class="cont-title">联合检查数量</div>
<div class="cont-total"><b>1,637</b><span>件</span></div>
<div class="percent-tag">
<span class="data-rise">&#8593</span><span class="data-change">21</span><label>较上年</label>
</div>
</div>
</div>
</div>
<div class="panel-card">
<div class="panel-card-top">
<div class="cont-title">执法预警数量</div>
<div class="cont-total"><b>3,892</b><span>次</span></div>
<div class="percent-tag">
<span class="data-rise">&#8593</span><span class="data-change">199</span><label>较上年</label></span>
</div>
</div>
<div class="panel-card-bottom">
<div class="panel-card-left">
<div class="cont-title">涉事单位数量</div>
<div class="cont-total"><b>737</b><span>家</span></div>
<div class="percent-tag">
<span class="data-fall">&#8595</span><span class="data-change">32</span><label>较上年</label>
</div>
</div>
<div class="panel-card-right">
<div class="cont-title">本单位发布预警数量</div>
<div class="cont-total"><b>629</b><span>次</span></div>
<div class="percent-tag">
<span class="data-fall">&#8595</span><span class="data-change">41</span><label>较上年</label>
</div>
</div>
</div>
</div>
<div class="panel-card"> <div class="panel-card">
<div class="panel-card-top"> <div class="panel-card-top">
<div style="font-size: 17px">执法部门数量</div> <div class="cont-title">执法投诉数量</div>
<div style="font-size: 19px;color: burlywood">48</div> <div class="cont-total"><b>445</b><span>件</span></div>
<div> <div class="percent-tag">
<span>2</span><span>较上年</span> <span class="data-fall">&#8595</span><span class="data-change">26</span><label>较上年</label></span>
</div> </div>
</div> </div>
<div class="panel-card-bottom"> <div class="panel-card-bottom">
<div class="panel-card-left"> <div class="panel-card-left">
<div style="font-size: 17px">执法人员数量</div> <div class="cont-title">入企不扫码投诉数量</div>
<div style="font-size: 19px;color: burlywood">1969</div> <div class="cont-total"><b>79</b><span>件</span></div>
<div> <div class="percent-tag">
<span>32</span><span style="margin-left: 2%">较上年</span> <span class="data-fall">&#8595</span><span class="data-change">11</span><label>较上年</label>
</div> </div>
</div> </div>
<div class="panel-card-right"> <div class="panel-card-right">
<div style="font-size: 17px">本单位执法人员数量</div> <div class="cont-title">被投诉部门数量</div>
<div style="font-size: 19px;color: burlywood">48</div> <div class="cont-total"><b>22</b><span>个</span></div>
<div> <div class="percent-tag">
<span>14</span><span style="margin-left: 2%">较上年</span> <span class="data-fall">&#8595</span><span class="data-change">2</span><label>较上年</label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="panel-card"></div>
<div class="panel-card"></div>
<div class="panel-card"></div>
<div class="panel-card"></div>
<div class="panel-card"></div>
</div> </div>
<th:block th:include="zdxtInclude :: footer" /> <th:block th:include="zdxtInclude :: footer" />
<script th:inline="javascript"> <script th:inline="javascript">

0
lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/code/statisticsEnterprise/jd
View File

2
lib/EmergencyService/zdxtEmergencyBootStart/src/main/resources/templates/project/code/statisticsEnterprise/statisticsEnterprise.html
View File

@ -54,7 +54,7 @@
<div class="static-content"> <div class="static-content">
<ul> <ul>
<li id="fragmentE" th:fragment="fragmentE"> <li id="fragmentE" th:fragment="fragmentE">
<p th:text="全市"></p> <p th:text="|全市:|"></p>
<p><label th:text="企业数量"></label><b th:text="${number}"></b></p> <p><label th:text="企业数量"></label><b th:text="${number}"></b></p>
<p></i><label th:text="续存企业数量"></label><b th:text="${exist}"></b></p> <p></i><label th:text="续存企业数量"></label><b th:text="${exist}"></b></p>
<p></i><label th:text="注销企业数量"></label><b th:text="${logout}"></b></p> <p></i><label th:text="注销企业数量"></label><b th:text="${logout}"></b></p>

Write Preview
Loading…
Cancel
Save