Skip to content

R
report-html-template
Commit 00178db7 by ChenXiHi
Options

Merge branch 'main' of http://47.108.78.218:28999/frontend/report-html-template

parents 921b37f8 c2e217e2
正在显示 包含 451 行增加 和 151 行删除
period-report/report-ioc.css
...@@ -254,7 +254,27 @@ body { ...@@ -254,7 +254,27 @@ body {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
/* margin-bottom: 10px; */ /* 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 { .operator-wrapper-content-box-chart {
/* width: 472px; */ /* width: 472px; */
...@@ -312,8 +332,8 @@ body { ...@@ -312,8 +332,8 @@ body {
opacity: 0.7; opacity: 0.7;
} }
.chart-area { .chart-area {
width: 102px; width: 90px;
height: 102px; height: 90px;
margin: 12px 10px 14px 19px; margin: 12px 10px 14px 19px;
padding: 14px 14px; padding: 14px 14px;
box-sizing: border-box; box-sizing: border-box;
...@@ -324,10 +344,12 @@ body { ...@@ -324,10 +344,12 @@ body {
font-size: 200px; font-size: 200px;
width: 76px; width: 76px;
height: 76px; height: 76px;
/* position: relative; */
position: relative;
/* background-color: #333; */ /* background-color: #333; */
background: linear-gradient(#35e5cd, #15e9ee); background: linear-gradient(#35e5cd, #15e9ee);
position: absolute;
top: 23px;
left: 26px;
} }
.circle-bar-left, .circle-bar-left,
.circle-bar-right { .circle-bar-right {
...@@ -403,8 +425,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -403,8 +425,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
font-size: 200px; font-size: 200px;
width: 76px; width: 76px;
height: 76px; height: 76px;
position: relative; /* position: relative; */
background: #f3be28 !important; background: #f3be28 !important;
position: absolute;
top: 23px;
left: 26px;
} }
/*所有的后代都水平垂直居中，这样就是同心圆了*/ /*所有的后代都水平垂直居中，这样就是同心圆了*/
...@@ -490,13 +515,13 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -490,13 +515,13 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
left: 0; left: 0;
} }
.chart-desc-other { .chart-desc-other {
width: 175px !important; width: 172px !important;
height: 18px; height: 18px;
} }
.chart-desc-task { .chart-desc-task {
position: relative; position: relative;
display: flex; display: flex;
margin-top: 10px; margin-top: 26px;
width: 160px; width: 160px;
} }
.chart-desc-text { .chart-desc-text {
...@@ -514,7 +539,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -514,7 +539,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
font-family: DIN Alternate-Bold; font-family: DIN Alternate-Bold;
} }
.chart-desc-unfinished { .chart-desc-unfinished {
margin-top: 10px; margin-top: 6px;
} }
.chart-desc-unfinished-value { .chart-desc-unfinished-value {
color: #ff6464; color: #ff6464;
...@@ -552,28 +577,63 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -552,28 +577,63 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
height: 8px; height: 8px;
} }
.desc-contract { .desc-contract {
margin-top: 4px; margin-top: -6px;
} }
.repair-require-chart { .repair-require-chart {
background: url("./assets/repair-require-bg.png") no-repeat; /* background: url("./assets/repair-require-bg.png") no-repeat; */
width: 115px; /* width: 115px;
height: 115px; height: 115px; */
background-size: cover; width: 100px;
height: 100px;
position: relative;
margin-left: 16px;
margin-right: 3px;
/* background-size: cover; */
}
.repair-require-chart img {
width: 145px;
height: 145px;
position: absolute;
top: -22px;
left: -23px;
} }
.repair-require-chart-wrapper { .repair-require-chart-wrapper {
width: 115px; /* width: 115px;
height: 115px; height: 115px; */
width: 100px;
height: 100px;
} }
.contract-chart { .contract-chart {
background: url("./assets/contract-bg.png") no-repeat; /* background: url("./assets/contract-bg.png") no-repeat; */
width: 115px; /* width: 115px;
height: 115px; height: 115px; */
width: 100px;
background-size: cover; height: 100px;
position: relative;
margin-left: 4px;
margin-right: 3px;
/* background-size: cover; */
}
.contract-chart-first {
margin-left: 16px !important;
margin-right: 3px;
}
.contract-title-first {
width: 130px;
text-align: center;
}
.contract-chart img {
width: 145px;
height: 145px;
position: absolute;
top: -22px;
left: -23px;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
width: 115px; /* width: 115px;
height: 115px; height: 115px; */
width: 100px;
height: 100px;
} }
.top-left { .top-left {
...@@ -619,9 +679,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -619,9 +679,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.repair-require-info-text { .repair-require-info-text {
color: #fff; color: #fff;
margin-left: 8px; /* margin-left: 8px; */
/* margin: 0 auto; */
display: flex;
justify-content: center;
} }
.repair-require-info-text span { .repair-require-info-text > div:first-child {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
...@@ -629,10 +692,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -629,10 +692,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.electricity-info-text { .electricity-info-text {
color: #ff6464; color: #ff6464;
margin-left: 8px; /* margin-left: 8px; */
display: flex; display: flex;
/* margin: 0 auto; */
justify-content: center;
} }
.electricity-info-text div { .electricity-info-text > div:first-child {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
...@@ -644,20 +709,20 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -644,20 +709,20 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
} }
.chart-data { .chart-data {
position: relative; position: relative;
margin-top: 20px; margin-top: 10px;
width: 180px; width: 180px;
margin-left: 20px; margin-left: 20px;
} }
.bar-data { .bar-data {
position: relative; position: relative;
margin-left: 20px; margin-left: 20px;
margin-top: -20px; margin-top: -26px;
width: 180px; width: 180px;
} }
.bar-data-2 { .bar-data-2 {
position: relative; position: relative;
margin-left: 20px; margin-left: 20px;
margin-top: 10px; margin-top: 4px;
width: 180px; width: 180px;
} }
.chart-data-text { .chart-data-text {
......
period-report/report-ioc.html
...@@ -144,11 +144,13 @@ ...@@ -144,11 +144,13 @@
</div> </div>
<div class="operator-wrapper-content"> <div class="operator-wrapper-content">
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
<div class="circle-bar"> <div class="circle-bar">
...@@ -176,11 +178,13 @@ ...@@ -176,11 +178,13 @@
</div> </div>
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
<div class="circle-bar"> <div class="circle-bar">
...@@ -208,11 +212,13 @@ ...@@ -208,11 +212,13 @@
</div> </div>
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
<div class="circle-bar-3"> <div class="circle-bar-3">
...@@ -241,13 +247,16 @@ ...@@ -241,13 +247,16 @@
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<!--日报， 周报， --> <!--日报， 周报， -->
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-chart">
<div class="pie-chart-area repair-require-chart"> <div class="pie-chart-area repair-require-chart">
<img src="./assets/repair-require-bg.png" />
<div <div
id="repair-require" id="repair-require"
class="repair-require-chart-wrapper" class="repair-require-chart-wrapper"
...@@ -271,14 +280,19 @@ ...@@ -271,14 +280,19 @@
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<!--日报， 周报，月报， 半年报，年报--> <!--日报， 周报，月报， 半年报，年报-->
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></div> <div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">合同</div> <div
class="operator-wrapper-content-box-title contract-title contract-title-first"
>
合同
</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
<div class="pie-chart-area contract-chart"> <div class="pie-chart-area contract-chart contract-chart-first">
<img src="./assets/contract-bg.png" />
<div id="contract" class="contract-chart-wrapper"></div> <div id="contract" class="contract-chart-wrapper"></div>
</div> </div>
<div class="chart-desc chart-desc-other"> <div class="chart-desc chart-desc-other">
...@@ -295,7 +309,7 @@ ...@@ -295,7 +309,7 @@
<img src="./assets/desc-line.png" /> <img src="./assets/desc-line.png" />
</div> </div>
<div class="chart-desc-task chart-desc-unfinished"> <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-text">即将到期</div>
<div class="chart-desc-unfinished-value">7</div> <div class="chart-desc-unfinished-value">7</div>
<img src="./assets/desc-line.png" /> <img src="./assets/desc-line.png" />
...@@ -305,16 +319,21 @@ ...@@ -305,16 +319,21 @@
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<!--月报，季报， 半年报，年报--> <!--月报，季报， 半年报，年报-->
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-progress">
<div class="pie-chart-area repair-require-info"> <div class="pie-chart-area repair-require-info">
<img src="./assets/repair-requir-icon.png" /> <img src="./assets/repair-requir-icon.png" />
<div class="repair-require-info-text"><span>389</span>个</div> <div class="repair-require-info-text">
<div>389</div>
<div>个</div>
</div>
</div> </div>
<div class="chart-desc"> <div class="chart-desc">
<div class="chart-data"> <div class="chart-data">
...@@ -352,18 +371,20 @@ ...@@ -352,18 +371,20 @@
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<!--月报，季报，半年报，年报--> <!--月报，季报，半年报，年报-->
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="electricity-box-progress">
<div class="pie-chart-area repair-require-info"> <div class="pie-chart-area repair-require-info">
<img src="./assets/electricity-icon.png" /> <img src="./assets/electricity-icon.png" />
<div class="electricity-info-text"> <div class="electricity-info-text">
<div>3.09</div> <div>3.09</div>
万元 <div>万元</div>
</div> </div>
</div> </div>
<div class="chart-desc"> <div class="chart-desc">
...@@ -511,7 +532,7 @@ ...@@ -511,7 +532,7 @@
{ {
name: "", name: "",
type: "pie", type: "pie",
radius: ["50%", "60%"], radius: ["75%", "88%"],
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
...@@ -558,7 +579,7 @@ ...@@ -558,7 +579,7 @@
{ {
name: "", name: "",
type: "pie", type: "pie",
radius: ["50%", "60%"], radius: ["75%", "88%"],
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
......
period-report/report.css
...@@ -42,6 +42,9 @@ ...@@ -42,6 +42,9 @@
.invest-wrapper-content-last-text { .invest-wrapper-content-last-text {
margin-right: 0.14rem; margin-right: 0.14rem;
} }
br {
display: none;
}
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
font-size: 1.5rem; font-size: 1.5rem;
} }
...@@ -106,13 +109,38 @@ ...@@ -106,13 +109,38 @@
} }
.operator-wrapper-content-box { .operator-wrapper-content-box {
margin-right: 1.07rem; margin-right: 1.07rem;
margin-bottom: 0.64rem; margin-bottom: 1.79rem;
} }
.operator-wrapper-content-box-title { .operator-wrapper-content-box-title {
font-size: 0.86rem; 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: 7rem;
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 { .operator-wrapper-content-box-chart {
height: 7.43rem; /* height: 7.43rem; */
} }
.operator-wrapper-content-box-progress { .operator-wrapper-content-box-progress {
height: 12rem; height: 12rem;
...@@ -125,7 +153,8 @@ ...@@ -125,7 +153,8 @@
} }
.advise-wrapper { .advise-wrapper {
margin-left: 1.6rem !important; margin-left: 1.6rem !important;
margin-top: 0.5rem !important; margin-top: 0 !important;
margin-bottom: 3.57rem !important;
} }
.advise-wrapper-title img { .advise-wrapper-title img {
width: 9.18rem; width: 9.18rem;
...@@ -144,92 +173,118 @@ ...@@ -144,92 +173,118 @@
font-size: 1rem; font-size: 1rem;
} }
.chart-area { .chart-area {
/* width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
margin: 0.43rem 0.86rem 0.71rem 1rem; */ margin: 0.43rem 0.86rem 0.71rem 1rem;
width: 100px; /* width: 100px;
height: 100px; height: 100px;
margin: 12px 10px 14px 19px; margin: 12px 10px 14px 19px; */
} }
.circle-bar { .circle-bar {
/* width: 4rem; width: 4rem;
height: 4rem; */ height: 4rem;
width: 72px; /* width: 72px;
height: 72px; height: 72px; */
position: absolute;
top: -0.38rem;
left: -0.38rem;
} }
.circle-bar-left, .circle-bar-left,
.circle-bar-right { .circle-bar-right {
/* width: 4rem; width: 4rem;
height: 4rem; */ height: 4rem;
width: 72px; /* width: 72px;
height: 72px; height: 72px; */
} }
.circle-bar-right { .circle-bar-right {
/* clip: rect(0, auto, auto, 2rem); */ clip: rect(0, auto, auto, 2rem);
clip: rect(0, auto, auto, 35px); /* clip: rect(0, auto, auto, 35px); */
} }
.circle-bar-left { .circle-bar-left {
/* clip: rect(0, 2rem, auto, 0); */ clip: rect(0, 2rem, auto, 0);
clip: rect(0, 35px, auto, 0); /* clip: rect(0, 35px, auto, 0); */
} }
.mask { .mask {
/* width: 3.2rem; width: 3.2rem;
height: 3.2rem; */ height: 3.2rem;
width: 60px; /* width: 60px;
height: 60px; height: 60px; */
position: relative; position: relative;
} }
.mask :first-child { .mask :first-child {
/* font-size: 1.2rem; font-size: 1.2rem;
height: 3.2rem; height: 3.2rem;
line-height: 2.5rem; */ line-height: 2.5rem;
font-size: 22px; /* font-size: 22px;
height: 30px; height: 30px;
line-height: 10px; line-height: 10px; */
} }
.circle-bar-left-2, .circle-bar-left-2,
.circle-bar-right-2 { .circle-bar-right-2 {
width: 72px; /* width: 72px;
height: 72px; height: 72px; */
width: 4rem;
height: 4rem;
} }
.circle-bar-right-2 { .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 { .circle-bar-left-2 {
clip: rect(0, 35px, auto, 0); /* clip: rect(0, 35px, auto, 0); */
clip: rect(0, 2rem, auto, 0);
} }
.second-mask { .second-mask {
width: 60px; /* width: 60px;
height: 60px; height: 60px; */
width: 3.2rem;
height: 3.2rem;
} }
.second-mask :first-child { .second-mask :first-child {
font-size: 22px; /* font-size: 22px;
height: 30px; height: 30px;
line-height: 10px; line-height: 10px; */
font-size: 1.2rem;
height: 3.2rem;
line-height: 2.5rem;
} }
.circle-bar-3 { .circle-bar-3 {
width: 72px; /* width: 72px;
height: 72px; height: 72px; */
width: 4rem;
height: 4rem;
position: absolute;
top: -0.38rem;
left: -0.38rem;
} }
.circle-bar-left-3, .circle-bar-left-3,
.circle-bar-right-3 { .circle-bar-right-3 {
width: 72px; /* width: 72px;
height: 72px; height: 72px; */
width: 4rem;
height: 4rem;
} }
.circle-bar-right-3 { .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 { .circle-bar-left-3 {
clip: rect(0, 35px, auto, 0); /* clip: rect(0, 35px, auto, 0); */
clip: rect(0, 2rem, auto, 0);
} }
.third-mask { .third-mask {
width: 60px; /* width: 60px;
height: 60px; height: 60px; */
width: 3.2rem;
height: 3.2rem;
} }
.third-mask :first-child { .third-mask :first-child {
font-size: 22px; /* font-size: 22px;
height: 30px; height: 30px;
line-height: 10px; line-height: 10px; */
font-size: 1.2rem;
height: 3.2rem;
line-height: 2.5rem;
} }
.percent-text { .percent-text {
font-size: 0.79rem; font-size: 0.79rem;
...@@ -249,6 +304,10 @@ ...@@ -249,6 +304,10 @@
margin-top: 1.07rem; margin-top: 1.07rem;
width: 9.29rem; width: 9.29rem;
} }
.echart-desc {
/* margin-left: 0.2rem; */
margin-top: 0.45rem !important;
}
.chart-desc-text { .chart-desc-text {
font-size: 1rem; font-size: 1rem;
margin-left: 0.71rem; margin-left: 0.71rem;
...@@ -257,6 +316,12 @@ ...@@ -257,6 +316,12 @@
.chart-desc-value { .chart-desc-value {
font-size: 1.21rem; font-size: 1.21rem;
} }
.contract-new {
margin-top: -0.8rem !important;
}
.contract-unfinished {
margin-top: 0 !important;
}
.chart-desc-unfinished-value { .chart-desc-unfinished-value {
font-size: 1.21rem; font-size: 1.21rem;
} }
...@@ -275,26 +340,52 @@ ...@@ -275,26 +340,52 @@
.repair-require-chart { .repair-require-chart {
/* width: 4.11rem; /* width: 4.11rem;
height: 4.11rem; */ height: 4.11rem; */
/* width: 7rem;
height: 7rem; */
width: 5rem;
height: 5rem;
position: relative;
margin-left: 1rem;
margin-right: 0.9rem;
/* width: 10rem;
height: 10rem; */
}
.repair-require-chart img {
width: 7rem; width: 7rem;
height: 7rem; height: 7rem;
position: absolute;
top: -1rem;
left: -1rem;
} }
.repair-require-chart-wrapper { .repair-require-chart-wrapper {
/* width: 4.11rem; /* width: 4.11rem;
height: 4.11rem; */ height: 4.11rem; */
width: 7rem; /* width: 7rem;
height: 7rem; height: 7rem; */
width: 5rem;
height: 5rem;
} }
.contract-chart { .contract-chart {
/* width: 4.11rem; /* width: 4.11rem;
height: 4.11rem; */ height: 4.11rem; */
width: 5rem;
height: 5rem;
position: relative;
margin-left: 1rem;
margin-right: 0.9rem;
}
.contract-chart img {
width: 7rem; width: 7rem;
height: 7rem; height: 7rem;
position: absolute;
top: -1rem;
left: -1rem;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
/* width: 4.11rem; /* width: 4.11rem;
height: 4.11rem; */ height: 4.11rem; */
width: 7rem; width: 5rem;
height: 7rem; height: 5rem;
} }
.repair-require-info { .repair-require-info {
margin-left: 0.71rem; margin-left: 0.71rem;
...@@ -315,24 +406,26 @@ ...@@ -315,24 +406,26 @@
.electricity-info-text span { .electricity-info-text span {
font-size: 1.21rem; font-size: 1.21rem;
font-family: DIN Alternate-Bold; font-family: DIN Alternate-Bold;
margin-left: 0.5rem;
margin-top: -0.1rem;
} }
.chart-data { .chart-data {
width: 10.55rem; width: 10rem;
margin-left: 1.39rem; margin-left: 1.39rem;
margin-top: 0.36rem; margin-top: 0.36rem;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} }
.chart-data img { .chart-data img {
width: 11rem; width: 10rem;
height: 0.96rem; height: 0.96rem;
} }
.bar-data { .bar-data {
margin-left: 1.96rem; margin-left: 1.45rem;
margin-top: -1.25rem; margin-top: -1.25rem;
width: 10.1rem; width: 10.1rem;
} }
.bar-data-2 { .bar-data-2 {
margin-left: 1.96rem; margin-left: 1.45rem;
margin-top: 0.35rem; margin-top: 0.35rem;
width: 10.1rem; width: 10.1rem;
} }
...@@ -345,7 +438,7 @@ ...@@ -345,7 +438,7 @@
} }
.chart-data-text-num { .chart-data-text-num {
font-size: 1.21rem; font-size: 1.21rem;
margin-right: 2rem; margin-right: 0.9rem;
} }
.g-progress { .g-progress {
margin: 0; margin: 0;
...@@ -402,6 +495,9 @@ ...@@ -402,6 +495,9 @@
.invest-wrapper-content-last-text { .invest-wrapper-content-last-text {
margin-right: 10px; margin-right: 10px;
} }
br {
display: block;
}
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
font-size: 24px; font-size: 24px;
} }
...@@ -467,6 +563,26 @@ ...@@ -467,6 +563,26 @@
.operator-wrapper-content-box-title { .operator-wrapper-content-box-title {
font-size: 16px; 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 { .operator-wrapper-content-box-chart {
height: 120px; height: 120px;
} }
...@@ -581,7 +697,7 @@ ...@@ -581,7 +697,7 @@
height: 18px; height: 18px;
} }
.chart-desc-other { .chart-desc-other {
width: 175px !important; width: 172px !important;
height: 18px; height: 18px;
} }
.chart-desc-task { .chart-desc-task {
...@@ -614,6 +730,15 @@ ...@@ -614,6 +730,15 @@
.repair-require-chart { .repair-require-chart {
width: 115px; width: 115px;
height: 115px; height: 115px;
position: relative;
margin-left: 15px;
}
.repair-require-chart img {
width: 160px;
height: 160px;
position: absolute;
top: -23px;
left: -23px;
} }
.repair-require-chart-wrapper { .repair-require-chart-wrapper {
width: 115px; width: 115px;
...@@ -622,6 +747,15 @@ ...@@ -622,6 +747,15 @@
.contract-chart { .contract-chart {
width: 115px; width: 115px;
height: 115px; height: 115px;
position: relative;
margin-left: 15px;
}
.contract-chart img {
width: 160px;
height: 160px;
position: absolute;
top: -23px;
left: -23px;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
width: 115px; width: 115px;
...@@ -635,16 +769,17 @@ ...@@ -635,16 +769,17 @@
height: 60px; height: 60px;
} }
.repair-require-info-text { .repair-require-info-text {
margin-left: 8px; /* margin-left: 8px; */
} }
.repair-require-info-text span { .repair-require-info-text span {
font-size: 18px; font-size: 18px;
} }
.electricity-info-text { .electricity-info-text {
margin-left: 8px; /* margin-left: 8px; */
} }
.electricity-info-text span { .electricity-info-text span {
font-size: 18px; font-size: 18px;
margin-top: -4px;
} }
.chart-data { .chart-data {
width: 180px; width: 180px;
...@@ -727,6 +862,9 @@ ...@@ -727,6 +862,9 @@
.invest-wrapper-content-last-text { .invest-wrapper-content-last-text {
margin-right: 20px; margin-right: 20px;
} }
br {
display: block;
}
.invest-wrapper-content-customers { .invest-wrapper-content-customers {
font-size: 42px; font-size: 42px;
} }
...@@ -792,6 +930,30 @@ ...@@ -792,6 +930,30 @@
.operator-wrapper-content-box-title { .operator-wrapper-content-box-title {
font-size: 24px; font-size: 24px;
} }
.circle-title {
width: 200px;
text-align: center;
}
.repair-title {
width: 200px;
text-align: center;
}
.contract-title {
width: 160px;
text-align: center;
}
.contract-title-first {
width: 200px;
text-align: center;
}
.repair-title-2 {
width: 150px;
text-align: center;
}
.ele-title {
width: 140px;
text-align: center;
}
.operator-wrapper-content-box-chart { .operator-wrapper-content-box-chart {
height: 170px; height: 170px;
} }
...@@ -912,6 +1074,7 @@ ...@@ -912,6 +1074,7 @@
.chart-desc-task { .chart-desc-task {
margin-top: 30px; margin-top: 30px;
width: 260px; width: 260px;
height: 42px;
} }
.chart-desc-text { .chart-desc-text {
font-size: 28px; font-size: 28px;
...@@ -938,6 +1101,15 @@ ...@@ -938,6 +1101,15 @@
.repair-require-chart { .repair-require-chart {
width: 160px; width: 160px;
height: 160px; height: 160px;
position: relative;
margin-left: 20px;
}
.repair-require-chart img {
width: 220px;
height: 220px;
position: absolute;
top: -30px;
left: -30px;
} }
.repair-require-chart-wrapper { .repair-require-chart-wrapper {
width: 160px; width: 160px;
...@@ -946,6 +1118,19 @@ ...@@ -946,6 +1118,19 @@
.contract-chart { .contract-chart {
width: 160px; width: 160px;
height: 160px; height: 160px;
position: relative;
/* margin-left: 20px; */
margin-right: 10px;
}
.contract-chart img {
width: 220px;
height: 220px;
position: absolute;
top: -30px;
left: -30px;
}
.contract-chart-first {
margin-left: 20px !important;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
width: 160px; width: 160px;
...@@ -959,16 +1144,18 @@ ...@@ -959,16 +1144,18 @@
height: 92px; height: 92px;
} }
.repair-require-info-text { .repair-require-info-text {
margin-left: 20px; /* margin-left: 20px; */
} }
.repair-require-info-text span { .repair-require-info-text span {
font-size: 34px; font-size: 34px;
} }
.electricity-info-text { .electricity-info-text {
margin-left: 20px; /* margin-left: 10px; */
margin: 0 auto;
} }
.electricity-info-text span { .electricity-info-text span {
font-size: 34px; font-size: 34px;
margin-top: -4px;
} }
.chart-data { .chart-data {
width: 260px; width: 260px;
...@@ -1198,7 +1385,7 @@ body { ...@@ -1198,7 +1385,7 @@ body {
} }
.operator-wrapper-content-box-title { .operator-wrapper-content-box-title {
color: #fff; color: #fff;
margin-left: 28px; /* margin-left: 28px; */
} }
.operator-wrapper-content-box-chart { .operator-wrapper-content-box-chart {
position: relative; position: relative;
...@@ -1422,11 +1609,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1422,11 +1609,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-top: 4px; margin-top: 4px;
} }
.repair-require-chart { .repair-require-chart {
background: url("./assets/repair-require-bg.png") no-repeat; /* background: url("./assets/repair-require-bg.png") no-repeat; */
background-size: cover; background-size: cover;
} }
.contract-chart { .contract-chart {
background: url("./assets/contract-bg.png") no-repeat; /* background: url("./assets/contract-bg.png") no-repeat; */
background-size: cover; background-size: cover;
} }
...@@ -1469,6 +1656,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1469,6 +1656,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.repair-require-info-text { .repair-require-info-text {
color: #fff; color: #fff;
text-align: center; text-align: center;
margin: 0 auto !important;
} }
.repair-require-info-text span { .repair-require-info-text span {
font-weight: 700; font-weight: 700;
...@@ -1479,6 +1667,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1479,6 +1667,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color: #ff6464; color: #ff6464;
display: flex; display: flex;
text-align: center; text-align: center;
margin: 0 auto !important;
} }
.electricity-info-text span { .electricity-info-text span {
font-weight: 700; font-weight: 700;
...@@ -1488,7 +1677,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1488,7 +1677,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-top: -5px; /* margin-top: -5px; */
} }
.chart-data { .chart-data {
......
period-report/report.html
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
<div class="invest-wrapper-content-second-text">人，客户信息更新</div> <div class="invest-wrapper-content-second-text">人，客户信息更新</div>
<span class="invest-wrapper-content-customers">9</span> <span class="invest-wrapper-content-customers">9</span>
<div class="invest-wrapper-content-last-text">份</div> <div class="invest-wrapper-content-last-text">份</div>
<!-- <br /> --> <br />
<!--月报，季报，半年报，年报--> <!--月报，季报，半年报，年报-->
<div class="invest-wrapper-content-first-text">去化率</div> <div class="invest-wrapper-content-first-text">去化率</div>
<span class="invest-wrapper-content-customers">93%</span> <span class="invest-wrapper-content-customers">93%</span>
...@@ -148,11 +148,13 @@ ...@@ -148,11 +148,13 @@
</div> </div>
<div class="operator-wrapper-content"> <div class="operator-wrapper-content">
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
<div class="circle-bar"> <div class="circle-bar">
...@@ -180,11 +182,13 @@ ...@@ -180,11 +182,13 @@
</div> </div>
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
<div class="circle-bar"> <div class="circle-bar">
...@@ -212,11 +216,13 @@ ...@@ -212,11 +216,13 @@
</div> </div>
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
<div class="circle-bar-3"> <div class="circle-bar-3">
...@@ -245,26 +251,29 @@ ...@@ -245,26 +251,29 @@
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<!--日报， 周报， --> <!--日报， 周报， -->
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-chart">
<div class="pie-chart-area repair-require-chart"> <div class="pie-chart-area repair-require-chart">
<image src="./assets/repair-require-bg.png" />
<div <div
id="repair-require" id="repair-require"
class="repair-require-chart-wrapper" class="repair-require-chart-wrapper"
></div> ></div>
</div> </div>
<div class="chart-desc chart-desc-other"> <div class="chart-desc chart-desc-other">
<div class="chart-desc-task"> <div class="chart-desc-task echart-desc">
<div class="chart-desc-daily-legend"></div> <div class="chart-desc-daily-legend"></div>
<div class="chart-desc-text">今日新增</div> <div class="chart-desc-text">今日新增</div>
<div class="chart-desc-value">18</div> <div class="chart-desc-value">18</div>
<img src="./assets/desc-line.png" /> <img src="./assets/desc-line.png" />
</div> </div>
<div class="chart-desc-task chart-desc-unfinished"> <div class="chart-desc-task chart-desc-unfinished echart-desc">
<div class="chart-desc-handle-legend"></div> <div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">处理中</div> <div class="chart-desc-text">处理中</div>
<div class="chart-desc-unfinished-value">5</div> <div class="chart-desc-unfinished-value">5</div>
...@@ -275,33 +284,42 @@ ...@@ -275,33 +284,42 @@
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<!--日报， 周报，月报， 半年报，年报--> <!--日报， 周报，月报， 半年报，年报-->
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></div> <div class="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title">合同</div> <div
class="operator-wrapper-content-box-title contract-title contract-title-first"
>
合同
</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
<!-- <div class="pie-chart-area contract-chart"> <!-- <div class="pie-chart-area contract-chart">
<div id="contract" class="contract-chart-wrapper"></div> <div id="contract" class="contract-chart-wrapper"></div>
</div> --> </div> -->
<div class="pie-chart-area contract-chart"> <div class="pie-chart-area contract-chart contract-chart-first">
<div id="contract" class="repair-require-chart-wrapper"></div> <img src="./assets/contract-bg.png" />
<div id="contract" class="contract-chart-wrapper"></div>
</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-task desc-contract">
<div class="chart-desc-daily-legend"></div> <div class="chart-desc-daily-legend"></div>
<div class="chart-desc-text">新增合同</div> <div class="chart-desc-text">新增合同</div>
<div class="chart-desc-value">18</div> <div class="chart-desc-value">18</div>
<img src="./assets/desc-line.png" /> <img src="./assets/desc-line.png" />
</div> </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-handle-legend"></div>
<div class="chart-desc-text">到期合同</div> <div class="chart-desc-text">到期合同</div>
<div class="chart-desc-unfinished-value">5</div> <div class="chart-desc-unfinished-value">5</div>
<img src="./assets/desc-line.png" /> <img src="./assets/desc-line.png" />
</div> </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="will-finished"></div>
<div class="chart-desc-text">即将到期</div> <div class="chart-desc-text">即将到期</div>
<div class="chart-desc-unfinished-value">7</div> <div class="chart-desc-unfinished-value">7</div>
...@@ -312,11 +330,13 @@ ...@@ -312,11 +330,13 @@
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<!--月报，季报， 半年报，年报--> <!--月报，季报， 半年报，年报-->
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="operator-wrapper-content-box-progress">
<div class="pie-chart-area repair-require-info"> <div class="pie-chart-area repair-require-info">
...@@ -361,11 +381,13 @@ ...@@ -361,11 +381,13 @@
</div> </div>
<div class="operator-wrapper-content-box"> <div class="operator-wrapper-content-box">
<!--月报，季报，半年报，年报--> <!--月报，季报，半年报，年报-->
<div class="top-left"></div> <!-- <div class="top-left"></div>
<div class="top-right"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-left"></div>
<div class="bottom-right"></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="electricity-box-progress">
<div class="pie-chart-area repair-require-info"> <div class="pie-chart-area repair-require-info">
...@@ -512,13 +534,16 @@ ...@@ -512,13 +534,16 @@
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
grid: {
left: 30,
},
legend: false, legend: false,
color: ["#5CB3FF", "#FF6464"], color: ["#5CB3FF", "#FF6464"],
series: [ series: [
{ {
name: "", name: "",
type: "pie", type: "pie",
radius: ["50%", "60%"], radius: ["75%", "88%"],
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
...@@ -565,7 +590,7 @@ ...@@ -565,7 +590,7 @@
{ {
name: "", name: "",
type: "pie", type: "pie",
radius: ["50%", "60%"], radius: ["75%", "88%"],
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论