Skip to content

R
report-html-template
Commit c2f1c360 by Tippi.Rao
Options

样式修改

parent ae308bca
正在显示 包含 305 行增加 和 119 行删除
period-report/report-ioc.css
......@@ -254,7 +254,27 @@ body {
color: #fff;
font-size: 16px;
/* margin-bottom: 10px; */
margin-left: 28px;
/* margin-left: 28px; */
}
.circle-title {
width: 125px;
text-align: center;
}
.repair-title {
width: 130px;
text-align: center;
}
.contract-title {
width: 105px;
text-align: center;
}
.repair-title-2 {
width: 90px;
text-align: center;
}
.ele-title {
width: 90px;
text-align: center;
}
.operator-wrapper-content-box-chart {
/* width: 472px; */
......@@ -312,8 +332,8 @@ body {
opacity: 0.7;
}
.chart-area {
width: 102px;
height: 102px;
width: 90px;
height: 90px;
margin: 12px 10px 14px 19px;
padding: 14px 14px;
box-sizing: border-box;
......@@ -324,10 +344,12 @@ body {
font-size: 200px;
width: 76px;
height: 76px;
position: relative;
/* position: relative; */
/* background-color: #333; */
background: linear-gradient(#35e5cd, #15e9ee);
position: absolute;
top: 23px;
left: 26px;
}
.circle-bar-left,
.circle-bar-right {
......@@ -403,8 +425,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
font-size: 200px;
width: 76px;
height: 76px;
position: relative;
/* position: relative; */
background: #f3be28 !important;
position: absolute;
top: 23px;
left: 26px;
}
/*所有的后代都水平垂直居中，这样就是同心圆了*/
......@@ -514,7 +539,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
font-family: DIN Alternate-Bold;
}
.chart-desc-unfinished {
margin-top: 10px;
margin-top: 6px;
}
.chart-desc-unfinished-value {
color: #ff6464;
......@@ -552,44 +577,54 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
height: 8px;
}
.desc-contract {
margin-top: 4px;
margin-top: -6px;
}
.repair-require-chart {
/* background: url("./assets/repair-require-bg.png") no-repeat; */
width: 115px;
height: 115px;
/* width: 115px;
height: 115px; */
width: 100px;
height: 100px;
position: relative;
margin-left: 15px;
margin-left: 16px;
margin-right: 3px;
/* background-size: cover; */
}
.repair-require-chart img {
width: 160px;
height: 160px;
width: 145px;
height: 145px;
position: absolute;
top: -23px;
top: -22px;
left: -23px;
}
.repair-require-chart-wrapper {
width: 115px;
height: 115px;
/* width: 115px;
height: 115px; */
width: 100px;
height: 100px;
}
.contract-chart {
/* background: url("./assets/contract-bg.png") no-repeat; */
width: 115px;
height: 115px;
/* width: 115px;
height: 115px; */
width: 100px;
height: 100px;
position: relative;
margin-left: 4px;
/* background-size: cover; */
}
.contract-chart img {
width: 160px;
height: 160px;
width: 145px;
height: 145px;
position: absolute;
top: -23px;
top: -22px;
left: -23px;
}
.contract-chart-wrapper {
width: 115px;
height: 115px;
/* width: 115px;
height: 115px; */
width: 100px;
height: 100px;
}
.top-left {
......@@ -660,20 +695,20 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-data {
position: relative;
margin-top: 20px;
margin-top: 10px;
width: 180px;
margin-left: 20px;
}
.bar-data {
position: relative;
margin-left: 20px;
margin-top: -20px;
margin-top: -26px;
width: 180px;
}
.bar-data-2 {
position: relative;
margin-left: 20px;
margin-top: 10px;
margin-top: 4px;
width: 180px;
}
.chart-data-text {
......
period-report/report-ioc.html
......@@ -148,7 +148,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">秩序维护部</div>
<div class="operator-wrapper-content-box-title circle-title">
秩序维护部
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar">
......@@ -180,7 +182,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">安防部</div>
<div class="operator-wrapper-content-box-title circle-title">
安防部
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar">
......@@ -212,7 +216,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">设备告警工单</div>
<div class="operator-wrapper-content-box-title circle-title">
设备告警工单
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar-3">
......@@ -245,7 +251,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">报事报修</div>
<div class="operator-wrapper-content-box-title repair-title">
报事报修
</div>
<div class="operator-wrapper-content-box-chart">
<div class="pie-chart-area repair-require-chart">
<img src="./assets/repair-require-bg.png" />
......@@ -276,7 +284,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">合同</div>
<div class="operator-wrapper-content-box-title contract-title">
合同
</div>
<div class="operator-wrapper-content-box-chart">
<div class="pie-chart-area contract-chart">
......@@ -297,7 +307,7 @@
<img src="./assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div class="chart-desc-handle-legend"></div>
<div class="will-finished"></div>
<div class="chart-desc-text">即将到期</div>
<div class="chart-desc-unfinished-value">7</div>
<img src="./assets/desc-line.png" />
......@@ -311,7 +321,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">报事报修</div>
<div class="operator-wrapper-content-box-title repair-title-2">
报事报修
</div>
<div class="operator-wrapper-content-box-progress">
<div class="pie-chart-area repair-require-info">
......@@ -358,7 +370,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">水电费单</div>
<div class="operator-wrapper-content-box-title ele-title">
水电费单
</div>
<div class="electricity-box-progress">
<div class="pie-chart-area repair-require-info">
......
period-report/report.css
......@@ -42,6 +42,9 @@
.invest-wrapper-content-last-text {
margin-right: 0.14rem;
}
br {
display: none;
}
.invest-wrapper-content-customers {
font-size: 1.5rem;
}
......@@ -111,8 +114,33 @@
.operator-wrapper-content-box-title {
font-size: 0.86rem;
}
.circle-title {
/* width: 136px; */
width: 7rem;
text-align: center;
}
.repair-title {
/* width: 136px; */
width: 7rem;
text-align: center;
}
.contract-title {
/* width: 140px; */
width: 6.5rem;
text-align: center;
}
.repair-title-2 {
/* width: 100px; */
width: 7rem;
text-align: center;
}
.ele-title {
/* width: 100px; */
width: 7rem;
text-align: center;
}
.operator-wrapper-content-box-chart {
height: 7.43rem;
/* height: 7.43rem; */
}
.operator-wrapper-content-box-progress {
height: 12rem;
......@@ -125,8 +153,8 @@
}
.advise-wrapper {
margin-left: 1.6rem !important;
margin-top: 0.5rem !important;
margin-bottom: 2.14rem !important;
margin-top: 0 !important;
margin-bottom: 3.57rem !important;
}
.advise-wrapper-title img {
width: 9.18rem;
......@@ -145,92 +173,118 @@
font-size: 1rem;
}
.chart-area {
/* width: 5rem;
width: 5rem;
height: 5rem;
margin: 0.43rem 0.86rem 0.71rem 1rem; */
width: 100px;
margin: 0.43rem 0.86rem 0.71rem 1rem;
/* width: 100px;
height: 100px;
margin: 12px 10px 14px 19px;
margin: 12px 10px 14px 19px; */
}
.circle-bar {
/* width: 4rem;
height: 4rem; */
width: 72px;
height: 72px;
width: 4rem;
height: 4rem;
/* width: 72px;
height: 72px; */
position: absolute;
top: -0.38rem;
left: -0.38rem;
}
.circle-bar-left,
.circle-bar-right {
/* width: 4rem;
height: 4rem; */
width: 72px;
height: 72px;
width: 4rem;
height: 4rem;
/* width: 72px;
height: 72px; */
}
.circle-bar-right {
/* clip: rect(0, auto, auto, 2rem); */
clip: rect(0, auto, auto, 35px);
clip: rect(0, auto, auto, 2rem);
/* clip: rect(0, auto, auto, 35px); */
}
.circle-bar-left {
/* clip: rect(0, 2rem, auto, 0); */
clip: rect(0, 35px, auto, 0);
clip: rect(0, 2rem, auto, 0);
/* clip: rect(0, 35px, auto, 0); */
}
.mask {
/* width: 3.2rem;
height: 3.2rem; */
width: 60px;
height: 60px;
width: 3.2rem;
height: 3.2rem;
/* width: 60px;
height: 60px; */
position: relative;
}
.mask :first-child {
/* font-size: 1.2rem;
font-size: 1.2rem;
height: 3.2rem;
line-height: 2.5rem; */
font-size: 22px;
line-height: 2.5rem;
/* font-size: 22px;
height: 30px;
line-height: 10px;
line-height: 10px; */
}
.circle-bar-left-2,
.circle-bar-right-2 {
width: 72px;
height: 72px;
/* width: 72px;
height: 72px; */
width: 4rem;
height: 4rem;
}
.circle-bar-right-2 {
clip: rect(0, auto, auto, 35px);
/* clip: rect(0, auto, auto, 35px); */
clip: rect(0, auto, auto, 2rem);
}
.circle-bar-left-2 {
clip: rect(0, 35px, auto, 0);
/* clip: rect(0, 35px, auto, 0); */
clip: rect(0, 2rem, auto, 0);
}
.second-mask {
width: 60px;
height: 60px;
/* width: 60px;
height: 60px; */
width: 3.2rem;
height: 3.2rem;
}
.second-mask :first-child {
font-size: 22px;
/* font-size: 22px;
height: 30px;
line-height: 10px;
line-height: 10px; */
font-size: 1.2rem;
height: 3.2rem;
line-height: 2.5rem;
}
.circle-bar-3 {
width: 72px;
height: 72px;
/* width: 72px;
height: 72px; */
width: 4rem;
height: 4rem;
position: absolute;
top: -0.38rem;
left: -0.38rem;
}
.circle-bar-left-3,
.circle-bar-right-3 {
width: 72px;
height: 72px;
/* width: 72px;
height: 72px; */
width: 4rem;
height: 4rem;
}
.circle-bar-right-3 {
clip: rect(0, auto, auto, 35px);
/* clip: rect(0, auto, auto, 35px); */
clip: rect(0, auto, auto, 2rem);
}
.circle-bar-left-3 {
clip: rect(0, 35px, auto, 0);
/* clip: rect(0, 35px, auto, 0); */
clip: rect(0, 2rem, auto, 0);
}
.third-mask {
width: 60px;
height: 60px;
/* width: 60px;
height: 60px; */
width: 3.2rem;
height: 3.2rem;
}
.third-mask :first-child {
font-size: 22px;
/* font-size: 22px;
height: 30px;
line-height: 10px;
line-height: 10px; */
font-size: 1.2rem;
height: 3.2rem;
line-height: 2.5rem;
}
.percent-text {
font-size: 0.79rem;
......@@ -252,6 +306,7 @@
}
.echart-desc {
/* margin-left: 0.2rem; */
margin-top: 0.45rem !important;
}
.chart-desc-text {
font-size: 1rem;
......@@ -261,6 +316,12 @@
.chart-desc-value {
font-size: 1.21rem;
}
.contract-new {
margin-top: -0.8rem !important;
}
.contract-unfinished {
margin-top: 0 !important;
}
.chart-desc-unfinished-value {
font-size: 1.21rem;
}
......@@ -279,46 +340,52 @@
.repair-require-chart {
/* width: 4.11rem;
height: 4.11rem; */
width: 7rem;
height: 7rem;
/* width: 7rem;
height: 7rem; */
width: 5rem;
height: 5rem;
position: relative;
margin-left: 0.8rem;
margin-left: 1rem;
margin-right: 0.9rem;
/* width: 10rem;
height: 10rem; */
}
.repair-require-chart img {
width: 9.8rem;
height: 9.8rem;
width: 7rem;
height: 7rem;
position: absolute;
top: -1.4rem;
left: -1.4rem;
top: -1rem;
left: -1rem;
}
.repair-require-chart-wrapper {
/* width: 4.11rem;
height: 4.11rem; */
width: 7rem;
height: 7rem;
/* width: 7rem;
height: 7rem; */
width: 5rem;
height: 5rem;
}
.contract-chart {
/* width: 4.11rem;
height: 4.11rem; */
width: 7rem;
height: 7rem;
width: 5rem;
height: 5rem;
position: relative;
margin-left: 0.8rem;
margin-left: 1rem;
margin-right: 0.9rem;
}
.contract-chart img {
width: 9.8rem;
height: 9.8rem;
width: 7rem;
height: 7rem;
position: absolute;
top: -1.4rem;
left: -1.4rem;
top: -1rem;
left: -1rem;
}
.contract-chart-wrapper {
/* width: 4.11rem;
height: 4.11rem; */
width: 7rem;
height: 7rem;
width: 5rem;
height: 5rem;
}
.repair-require-info {
margin-left: 0.71rem;
......@@ -339,24 +406,25 @@
.electricity-info-text span {
font-size: 1.21rem;
font-family: DIN Alternate-Bold;
margin-left: 0.5rem;
}
.chart-data {
width: 10.55rem;
width: 10rem;
margin-left: 1.39rem;
margin-top: 0.36rem;
margin-bottom: 0.8rem;
}
.chart-data img {
width: 11rem;
width: 10rem;
height: 0.96rem;
}
.bar-data {
margin-left: 1.96rem;
margin-left: 1.45rem;
margin-top: -1.25rem;
width: 10.1rem;
}
.bar-data-2 {
margin-left: 1.96rem;
margin-left: 1.45rem;
margin-top: 0.35rem;
width: 10.1rem;
}
......@@ -426,6 +494,9 @@
.invest-wrapper-content-last-text {
margin-right: 10px;
}
br {
display: block;
}
.invest-wrapper-content-customers {
font-size: 24px;
}
......@@ -491,6 +562,26 @@
.operator-wrapper-content-box-title {
font-size: 16px;
}
.circle-title {
width: 125px;
text-align: center;
}
.repair-title {
width: 130px;
text-align: center;
}
.contract-title {
width: 105px;
text-align: center;
}
.repair-title-2 {
width: 90px;
text-align: center;
}
.ele-title {
width: 90px;
text-align: center;
}
.operator-wrapper-content-box-chart {
height: 120px;
}
......@@ -677,13 +768,13 @@
height: 60px;
}
.repair-require-info-text {
margin-left: 8px;
/* margin-left: 8px; */
}
.repair-require-info-text span {
font-size: 18px;
}
.electricity-info-text {
margin-left: 8px;
/* margin-left: 8px; */
}
.electricity-info-text span {
font-size: 18px;
......@@ -769,6 +860,9 @@
.invest-wrapper-content-last-text {
margin-right: 20px;
}
br {
display: block;
}
.invest-wrapper-content-customers {
font-size: 42px;
}
......@@ -834,6 +928,26 @@
.operator-wrapper-content-box-title {
font-size: 24px;
}
.circle-title {
width: 200px;
text-align: center;
}
.repair-title {
width: 200px;
text-align: center;
}
.contract-title {
width: 160px;
text-align: center;
}
.repair-title-2 {
width: 150px;
text-align: center;
}
.ele-title {
width: 140px;
text-align: center;
}
.operator-wrapper-content-box-chart {
height: 170px;
}
......@@ -954,6 +1068,7 @@
.chart-desc-task {
margin-top: 30px;
width: 260px;
height: 42px;
}
.chart-desc-text {
font-size: 28px;
......@@ -998,7 +1113,8 @@
width: 160px;
height: 160px;
position: relative;
margin-left: 20px;
/* margin-left: 20px; */
margin-right: 10px;
}
.contract-chart img {
width: 220px;
......@@ -1019,13 +1135,14 @@
height: 92px;
}
.repair-require-info-text {
margin-left: 20px;
/* margin-left: 20px; */
}
.repair-require-info-text span {
font-size: 34px;
}
.electricity-info-text {
margin-left: 20px;
/* margin-left: 10px; */
margin: 0 auto;
}
.electricity-info-text span {
font-size: 34px;
......@@ -1258,7 +1375,7 @@ body {
}
.operator-wrapper-content-box-title {
color: #fff;
margin-left: 28px;
/* margin-left: 28px; */
}
.operator-wrapper-content-box-chart {
position: relative;
......@@ -1529,6 +1646,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.repair-require-info-text {
color: #fff;
text-align: center;
margin: 0 auto !important;
}
.repair-require-info-text span {
font-weight: 700;
......@@ -1539,6 +1657,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: #ff6464;
display: flex;
text-align: center;
margin: 0 auto !important;
}
.electricity-info-text span {
font-weight: 700;
......
period-report/report.html
......@@ -123,7 +123,7 @@
<div class="invest-wrapper-content-second-text">人，客户信息更新</div>
<span class="invest-wrapper-content-customers">9</span>
<div class="invest-wrapper-content-last-text">份</div>
<!-- <br /> -->
<br />
<!--月报，季报，半年报，年报-->
<div class="invest-wrapper-content-first-text">去化率</div>
<span class="invest-wrapper-content-customers">93%</span>
......@@ -152,7 +152,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">秩序维护部</div>
<div class="operator-wrapper-content-box-title circle-title">
秩序维护部
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar">
......@@ -184,7 +186,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">安防部</div>
<div class="operator-wrapper-content-box-title circle-title">
安防部
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar">
......@@ -216,7 +220,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">设备告警工单</div>
<div class="operator-wrapper-content-box-title circle-title">
设备告警工单
</div>
<div class="operator-wrapper-content-box-chart">
<div class="chart-area">
<div class="circle-bar-3">
......@@ -249,7 +255,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">报事报修</div>
<div class="operator-wrapper-content-box-title repair-title">
报事报修
</div>
<div class="operator-wrapper-content-box-chart">
<div class="pie-chart-area repair-require-chart">
<image src="./assets/repair-require-bg.png" />
......@@ -280,7 +288,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">合同</div>
<div class="operator-wrapper-content-box-title contract-title">
合同
</div>
<div class="operator-wrapper-content-box-chart">
<!-- <div class="pie-chart-area contract-chart">
......@@ -288,22 +298,26 @@
</div> -->
<div class="pie-chart-area contract-chart">
<img src="./assets/contract-bg.png" />
<div id="contract" class="repair-require-chart-wrapper"></div>
<div id="contract" class="contract-chart-wrapper"></div>
</div>
<div class="chart-desc chart-desc-other">
<div class="chart-desc chart-desc-other contract-new">
<div class="chart-desc-task desc-contract">
<div class="chart-desc-daily-legend"></div>
<div class="chart-desc-text">新增合同</div>
<div class="chart-desc-value">18</div>
<img src="./assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div
class="chart-desc-task chart-desc-unfinished contract-unfinished"
>
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">到期合同</div>
<div class="chart-desc-unfinished-value">5</div>
<img src="./assets/desc-line.png" />
</div>
<div class="chart-desc-task chart-desc-unfinished">
<div
class="chart-desc-task chart-desc-unfinished contract-unfinished"
>
<div class="will-finished"></div>
<div class="chart-desc-text">即将到期</div>
<div class="chart-desc-unfinished-value">7</div>
......@@ -318,7 +332,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">报事报修</div>
<div class="operator-wrapper-content-box-title repair-title-2">
报事报修
</div>
<div class="operator-wrapper-content-box-progress">
<div class="pie-chart-area repair-require-info">
......@@ -367,7 +383,9 @@
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">水电费单</div>
<div class="operator-wrapper-content-box-title ele-title">
水电费单
</div>
<div class="electricity-box-progress">
<div class="pie-chart-area repair-require-info">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论