Browse Source

综合统计分析页面

v4
chenrui 2 years ago
parent
commit
de5a96741a
  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

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

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

@ -9,55 +9,139 @@
<th:block th:include="zdxtInclude :: datetimepicker-css" />
<link type="text/css" href="/css/stat1.css" rel="stylesheet"/>
<style type="text/css">
.statwrap .panel-card{
width: 32%;
height: 35%;
background-color: #dedbd6;
margin: 30px 10px
.select-list {
float: right;
margin: 2% 0 1%;
}
.statwrap{
.statwrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 0;
height: calc(100% - 130px);
}
.panel-card-top{
width: 60%;
height: 35%;
padding-left: 8%;
padding-top: 2%;
.statwrap .panel-card {
margin: 0.75%;
width: 31.5%;
height: 47%;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 5px #e2e3e4;
}
.panel-card-top {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
align-items: stretch;
width: 60%;
height: 32%;
padding: 3%;
}
.panel-card-bottom{
.panel-card-bottom {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
justify-content: space-around;
width: 100%;
height: 56%;
justify-content: space-around;
}
.panel-card-left{
width: 35%;
height: 52%;
.panel-card-left {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.panel-card-right{
margin-left: -5%;
width: 35%;
height: 52%;
border-right: 1px solid #eee;
}
.panel-card-right {
display: flex;
flex-direction: column;
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>
</head>
<body>
<h1 class="page-title">综合统计分析</h1>
<form id="formId">
<div class="select-list">
<ul>
@ -104,38 +188,162 @@
</div>
</form>
<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-top">
<div style="font-size: 17px">执法部门数量</div>
<div style="font-size: 19px;color: burlywood">48</div>
<div>
<span>2</span><span>较上年</span>
<div class="cont-title">执法投诉数量</div>
<div class="cont-total"><b>445</b><span>件</span></div>
<div class="percent-tag">
<span class="data-fall">&#8595</span><span class="data-change">26</span><label>较上年</label></span>
</div>
</div>
<div class="panel-card-bottom">
<div class="panel-card-left">
<div style="font-size: 17px">执法人员数量</div>
<div style="font-size: 19px;color: burlywood">1969</div>
<div>
<span>32</span><span style="margin-left: 2%">较上年</span>
<div class="cont-title">入企不扫码投诉数量</div>
<div class="cont-total"><b>79</b><span>件</span></div>
<div class="percent-tag">
<span class="data-fall">&#8595</span><span class="data-change">11</span><label>较上年</label>
</div>
</div>
<div class="panel-card-right">
<div style="font-size: 17px">本单位执法人员数量</div>
<div style="font-size: 19px;color: burlywood">48</div>
<div>
<span>14</span><span style="margin-left: 2%">较上年</span>
<div class="cont-title">被投诉部门数量</div>
<div class="cont-total"><b>22</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>
<div class="panel-card"></div>
<div class="panel-card"></div>
<div class="panel-card"></div>
<div class="panel-card"></div>
</div>
<th:block th:include="zdxtInclude :: footer" />
<script th:inline="javascript">

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

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

@ -54,7 +54,7 @@
<div class="static-content">
<ul>
<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></i><label th:text="续存企业数量"></label><b th:text="${exist}"></b></p>
<p></i><label th:text="注销企业数量"></label><b th:text="${logout}"></b></p>

Loading…
Cancel
Save