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
正在显示 包含 199 行增加 和 88 行删除
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;
}
/*所有的后代都水平垂直居中，这样就是同心圆了*/
......@@ -490,13 +515,13 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
left: 0;
}
.chart-desc-other {
width: 175px !important;
width: 172px !important;
height: 18px;
}
.chart-desc-task {
position: relative;
display: flex;
margin-top: 10px;
margin-top: 26px;
width: 160px;
}
.chart-desc-text {
......@@ -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,28 +577,63 @@ 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;
background-size: cover;
/* background: url("./assets/repair-require-bg.png") no-repeat; */
/* width: 115px;
height: 115px; */
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 {
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;
background-size: cover;
/* background: url("./assets/contract-bg.png") no-repeat; */
/* width: 115px;
height: 115px; */
width: 100px;
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 {
width: 115px;
height: 115px;
/* width: 115px;
height: 115px; */
width: 100px;
height: 100px;
}
.top-left {
......@@ -619,9 +679,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.repair-require-info-text {
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-size: 18px;
text-align: center;
......@@ -629,10 +692,12 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.electricity-info-text {
color: #ff6464;
margin-left: 8px;
/* margin-left: 8px; */
display: flex;
/* margin: 0 auto; */
justify-content: center;
}
.electricity-info-text div {
.electricity-info-text > div:first-child {
font-weight: 700;
font-size: 18px;
text-align: center;
......@@ -644,20 +709,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
......@@ -144,11 +144,13 @@
</div>
<div class="operator-wrapper-content">
<div class="operator-wrapper-content-box">
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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">
......@@ -176,11 +178,13 @@
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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">
......@@ -208,11 +212,13 @@
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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">
......@@ -241,13 +247,16 @@
</div>
<div class="operator-wrapper-content-box">
<!--日报， 周报， -->
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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" />
<div
id="repair-require"
class="repair-require-chart-wrapper"
......@@ -271,14 +280,19 @@
</div>
<div class="operator-wrapper-content-box">
<!--日报， 周报，月报， 半年报，年报-->
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></div> -->
<div
class="operator-wrapper-content-box-title contract-title contract-title-first"
>
合同
</div>
<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>
<div class="chart-desc chart-desc-other">
......@@ -295,7 +309,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" />
......@@ -305,16 +319,21 @@
</div>
<div class="operator-wrapper-content-box">
<!--月报，季报， 半年报，年报-->
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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">
<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 class="chart-desc">
<div class="chart-data">
......@@ -352,18 +371,20 @@
</div>
<div class="operator-wrapper-content-box">
<!--月报，季报，半年报，年报-->
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title ele-title">
水电费单
</div>
<div class="electricity-box-progress">
<div class="pie-chart-area repair-require-info">
<img src="./assets/electricity-icon.png" />
<div class="electricity-info-text">
<div>3.09</div>
万元
<div>万元</div>
</div>
</div>
<div class="chart-desc">
......@@ -511,7 +532,7 @@
{
name: "",
type: "pie",
radius: ["50%", "60%"],
radius: ["75%", "88%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
......@@ -558,7 +579,7 @@
{
name: "",
type: "pie",
radius: ["50%", "60%"],
radius: ["75%", "88%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
......
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>
......@@ -148,11 +148,13 @@
</div>
<div class="operator-wrapper-content">
<div class="operator-wrapper-content-box">
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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,11 +182,13 @@
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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,11 +216,13 @@
</div>
</div>
<div class="operator-wrapper-content-box">
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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,26 +251,29 @@
</div>
<div class="operator-wrapper-content-box">
<!--日报， 周报， -->
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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" />
<div
id="repair-require"
class="repair-require-chart-wrapper"
></div>
</div>
<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-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 echart-desc">
<div class="chart-desc-handle-legend"></div>
<div class="chart-desc-text">处理中</div>
<div class="chart-desc-unfinished-value">5</div>
......@@ -275,33 +284,42 @@
</div>
<div class="operator-wrapper-content-box">
<!--日报， 周报，月报， 半年报，年报-->
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></div> -->
<div
class="operator-wrapper-content-box-title contract-title contract-title-first"
>
合同
</div>
<div class="operator-wrapper-content-box-chart">
<!-- <div class="pie-chart-area contract-chart">
<div id="contract" class="contract-chart-wrapper"></div>
</div> -->
<div class="pie-chart-area contract-chart">
<div id="contract" class="repair-require-chart-wrapper"></div>
<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>
<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>
......@@ -312,11 +330,13 @@
</div>
<div class="operator-wrapper-content-box">
<!--月报，季报， 半年报，年报-->
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></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">
......@@ -361,11 +381,13 @@
</div>
<div class="operator-wrapper-content-box">
<!--月报，季报，半年报，年报-->
<div class="top-left"></div>
<!-- <div class="top-left"></div>
<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="bottom-right"></div> -->
<div class="operator-wrapper-content-box-title ele-title">
水电费单
</div>
<div class="electricity-box-progress">
<div class="pie-chart-area repair-require-info">
......@@ -512,13 +534,16 @@
tooltip: {
trigger: "item",
},
grid: {
left: 30,
},
legend: false,
color: ["#5CB3FF", "#FF6464"],
series: [
{
name: "",
type: "pie",
radius: ["50%", "60%"],
radius: ["75%", "88%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
......@@ -565,7 +590,7 @@
{
name: "",
type: "pie",
radius: ["50%", "60%"],
radius: ["75%", "88%"],
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论