Skip to content

R
report-html-template
Commit 941000f0 by Tippi.Rao
Options

样式修改

parent 0e701f29
正在显示 包含 127 行增加 和 44 行删除
period-report/report-ioc.css
...@@ -555,21 +555,37 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -555,21 +555,37 @@ 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; */
width: 115px; width: 115px;
height: 115px; height: 115px;
background-size: cover; position: relative;
margin-left: 15px;
/* background-size: cover; */
}
.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;
height: 115px; height: 115px;
} }
.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;
position: relative;
background-size: cover; /* background-size: cover; */
}
.contract-chart img {
width: 160px;
height: 160px;
position: absolute;
top: -23px;
left: -23px;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
width: 115px; width: 115px;
......
period-report/report-ioc.html
...@@ -144,10 +144,10 @@ ...@@ -144,10 +144,10 @@
</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">秩序维护部</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
...@@ -176,10 +176,10 @@ ...@@ -176,10 +176,10 @@
</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">安防部</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
...@@ -208,10 +208,10 @@ ...@@ -208,10 +208,10 @@
</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">设备告警工单</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
...@@ -241,13 +241,14 @@ ...@@ -241,13 +241,14 @@
</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">报事报修</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 +272,15 @@ ...@@ -271,14 +272,15 @@
</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">合同</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">
<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">
...@@ -305,10 +307,10 @@ ...@@ -305,10 +307,10 @@
</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">报事报修</div>
<div class="operator-wrapper-content-box-progress"> <div class="operator-wrapper-content-box-progress">
...@@ -352,10 +354,10 @@ ...@@ -352,10 +354,10 @@
</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">水电费单</div>
<div class="electricity-box-progress"> <div class="electricity-box-progress">
...@@ -511,7 +513,7 @@ ...@@ -511,7 +513,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 +560,7 @@ ...@@ -558,7 +560,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
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
} }
.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;
...@@ -126,6 +126,7 @@ ...@@ -126,6 +126,7 @@
.advise-wrapper { .advise-wrapper {
margin-left: 1.6rem !important; margin-left: 1.6rem !important;
margin-top: 0.5rem !important; margin-top: 0.5rem !important;
margin-bottom: 2.14rem !important;
} }
.advise-wrapper-title img { .advise-wrapper-title img {
width: 9.18rem; width: 9.18rem;
...@@ -249,6 +250,9 @@ ...@@ -249,6 +250,9 @@
margin-top: 1.07rem; margin-top: 1.07rem;
width: 9.29rem; width: 9.29rem;
} }
.echart-desc {
/* margin-left: 0.2rem; */
}
.chart-desc-text { .chart-desc-text {
font-size: 1rem; font-size: 1rem;
margin-left: 0.71rem; margin-left: 0.71rem;
...@@ -277,6 +281,17 @@ ...@@ -277,6 +281,17 @@
height: 4.11rem; */ height: 4.11rem; */
width: 7rem; width: 7rem;
height: 7rem; height: 7rem;
position: relative;
margin-left: 0.8rem;
/* width: 10rem;
height: 10rem; */
}
.repair-require-chart img {
width: 9.8rem;
height: 9.8rem;
position: absolute;
top: -1.4rem;
left: -1.4rem;
} }
.repair-require-chart-wrapper { .repair-require-chart-wrapper {
/* width: 4.11rem; /* width: 4.11rem;
...@@ -289,6 +304,15 @@ ...@@ -289,6 +304,15 @@
height: 4.11rem; */ height: 4.11rem; */
width: 7rem; width: 7rem;
height: 7rem; height: 7rem;
position: relative;
margin-left: 0.8rem;
}
.contract-chart img {
width: 9.8rem;
height: 9.8rem;
position: absolute;
top: -1.4rem;
left: -1.4rem;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
/* width: 4.11rem; /* width: 4.11rem;
...@@ -345,7 +369,7 @@ ...@@ -345,7 +369,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;
...@@ -614,6 +638,15 @@ ...@@ -614,6 +638,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 +655,15 @@ ...@@ -622,6 +655,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;
...@@ -938,6 +980,15 @@ ...@@ -938,6 +980,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 +997,15 @@ ...@@ -946,6 +997,15 @@
.contract-chart { .contract-chart {
width: 160px; width: 160px;
height: 160px; height: 160px;
position: relative;
margin-left: 20px;
}
.contract-chart img {
width: 220px;
height: 220px;
position: absolute;
top: -30px;
left: -30px;
} }
.contract-chart-wrapper { .contract-chart-wrapper {
width: 160px; width: 160px;
...@@ -1422,11 +1482,11 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1422,11 +1482,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;
} }
...@@ -1488,7 +1548,7 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp ...@@ -1488,7 +1548,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
...@@ -148,10 +148,10 @@ ...@@ -148,10 +148,10 @@
</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">秩序维护部</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
...@@ -180,10 +180,10 @@ ...@@ -180,10 +180,10 @@
</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">安防部</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
...@@ -212,10 +212,10 @@ ...@@ -212,10 +212,10 @@
</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">设备告警工单</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
<div class="chart-area"> <div class="chart-area">
...@@ -245,26 +245,27 @@ ...@@ -245,26 +245,27 @@
</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">报事报修</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,10 +276,10 @@ ...@@ -275,10 +276,10 @@
</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">合同</div>
<div class="operator-wrapper-content-box-chart"> <div class="operator-wrapper-content-box-chart">
...@@ -286,6 +287,7 @@ ...@@ -286,6 +287,7 @@
<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">
<img src="./assets/contract-bg.png" />
<div id="contract" class="repair-require-chart-wrapper"></div> <div id="contract" class="repair-require-chart-wrapper"></div>
</div> </div>
<div class="chart-desc chart-desc-other"> <div class="chart-desc chart-desc-other">
...@@ -312,10 +314,10 @@ ...@@ -312,10 +314,10 @@
</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">报事报修</div>
<div class="operator-wrapper-content-box-progress"> <div class="operator-wrapper-content-box-progress">
...@@ -361,10 +363,10 @@ ...@@ -361,10 +363,10 @@
</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">水电费单</div>
<div class="electricity-box-progress"> <div class="electricity-box-progress">
...@@ -512,13 +514,16 @@ ...@@ -512,13 +514,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 +570,7 @@ ...@@ -565,7 +570,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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论