Commit 7ce8c29e by wangmin

Merge remote-tracking branch 'origin/main' into feature/branch_wm

# Conflicts:
#	energy-report/index.css
#	energy-report/index.html
parents 57af594b c2e217e2
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="300.6298828125" height="30.1484375" viewBox="0 0 300.6298828125 30.1484375"><defs><linearGradient x1="0.043956007808446884" y1="0.8181852102279663" x2="1.0686804056167603" y2="1.0454567670822144" id="master_svg0_0_53938"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient></defs><g><g style="opacity:0.4000000059604645;"><path d="M9.322225625,30.1498125L276.903015625,30.1498125L276.903015625,28.632112499999998L10.223235625,28.632112499999998L1.332244625,12.3319145L-0.00021337499999996012,13.0587105L9.322225625,30.1498125Z" fill-rule="evenodd" fill="url(#master_svg0_0_53938)" fill-opacity="1"/></g><g style="opacity:0.4000000059604645;"><rect x="296.07666015625" y="0" width="4.553359508514404" height="13.660077095031738" rx="0" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="207.3466796875" height="207.34375" viewBox="0 0 207.3466796875 207.34375"><defs><filter id="master_svg0_19861_76538" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-97.2099609375" y="-97.2099609375" width="255.95180892944336" height="255.9518051147461"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="24.302490234375" result="effect1_foregroundBlur"/></filter></defs><g><g style="opacity:0.4000000059604645;"><ellipse cx="103.6734390258789" cy="103.6714859008789" rx="68.3003921508789" ry="68.3003921508789" fill-opacity="0" stroke-opacity="0.4000000059604645" stroke="#5CB3FF" fill="none" stroke-width="3.0355730056762695"/></g><g style="opacity:0.99755859375;" filter="url(#master_svg0_19861_76538)"><ellipse cx="103.67317008972168" cy="103.67219161987305" rx="30.76594352722168" ry="30.765941619873047" fill="#1D586F" fill-opacity="1"/></g><g><path d="M70.812496875,105.62649375000001L70.812496875,106.92729375L74.498046875,106.92729375L74.498046875,105.62649375000001L70.812496875,105.62649375000001ZM74.498046875,104.22609375L74.498046875,102.90189375L70.812496875,102.90189375L70.812496875,104.22609375L74.498046875,104.22609375ZM70.812496875,108.35109375L70.812496875,111.72609375L69.154296875,111.72609375L69.154296875,101.41949375L76.150386875,101.41949375L76.150386875,109.84519374999999Q76.150386875,111.72609375,74.416016875,111.72609375L73.009766875,111.72609375L72.599606875,110.12649375000001L73.859376875,110.19679375Q74.498046875,110.19679375,74.498046875,109.44089375L74.498046875,108.35109375L70.812496875,108.35109375ZM79.384746875,103.10109375Q77.498046875,103.10109375,77.498046875,101.01519375L77.498046875,95.12648375L79.185546875,95.12648375L79.185546875,97.27101375Q82.121046875,96.81984375,83.744146875,96.36867375L84.300746875,97.88039375Q81.998046875,98.41945375,79.185546875,98.83546375L79.185546875,100.64599375Q79.185546875,101.57179375,79.853546875,101.57179375L81.998046875,101.57179375Q82.425746875,101.57179375,82.607446875,101.29639375Q82.841846875,100.92139375,82.894546875,99.41559375L84.500046875,99.93699375Q84.283246875,102.21629375,83.779246875,102.67919375Q83.275346875,103.10109375,82.320346875,103.10109375L79.384746875,103.10109375ZM79.203146875,109.35309375Q79.203146875,109.85109375,79.835946875,109.85109375L81.998046875,109.85109375Q82.408246875,109.85109375,82.607446875,109.60499375Q82.841846875,109.26519375000001,82.912146875,107.79449375L84.476546875,108.28079375Q84.265646875,110.52489375,83.761746875,110.97609375Q83.292946875,111.38039375,82.320346875,111.38039375L79.367146875,111.38039375Q77.515646875,111.38039375,77.515646875,109.72809375L77.515646875,103.71629375L79.203146875,103.71629375L79.203146875,105.66159375000001Q81.652346875,105.40969375,83.744146875,104.78269374999999L84.300746875,106.30619375Q82.033246875,106.90969375,79.203146875,107.19679375L79.203146875,109.35309375ZM74.861326875,96.33351375Q76.419926875,98.40187375,77.328126875,100.04249375L75.880856875,101.09129375Q75.576166875,100.45849375,75.289066875,99.93699375Q72.505856875,100.36479375,68.597656875,100.58159375L68.128905875,99.15773375Q68.580076875,98.99953375,68.902346875,98.73000375Q70.572266875,96.87257375,71.416016875,95.05617375L73.027346875,95.54250375Q71.925776875,97.72218375,70.525386875,99.08742375Q72.136716875,98.99953375,74.550776875,98.69484375Q74.158206875,98.06789375,73.542966875,97.15968375L74.861326875,96.33351375ZM86.878946875,96.67921375L89.070346875,96.67921375L89.070346875,95.14992375L90.658246875,95.14992375L90.658246875,96.67921375L92.978546875,96.67921375L92.978546875,98.22609375L90.658246875,98.22609375L90.658246875,99.71439375L92.638646875,99.71439375L92.638646875,101.22609375L90.658246875,101.22609375L90.658246875,102.67919375L93.177746875,102.67919375L93.177746875,104.22609375L90.658246875,104.22609375L90.658246875,105.06979375Q91.958946875,106.05419375,93.382846875,107.37839375L92.457046875,108.73779375000001Q91.554646875,107.55419375,90.658246875,106.53469375L90.658246875,111.72609375L89.070346875,111.72609375L89.070346875,106.89209375Q88.132846875,108.66159375000001,86.878946875,110.06199375L86.158246875,108.30419375Q88.115246875,106.53469375,89.070346875,104.30229375L89.070346875,104.22609375L86.498046875,104.22609375L86.498046875,102.67919375L89.070346875,102.67919375L89.070346875,101.22609375L86.966846875,101.22609375L86.966846875,99.71439375L89.070346875,99.71439375L89.070346875,98.22609375L86.878946875,98.22609375L86.878946875,96.67921375ZM98.017546875,111.39209375Q96.488246875,111.39209375,96.488246875,109.68699375L96.488246875,106.22999375L93.177746875,106.83939375L92.925746875,105.22809375L96.488246875,104.56589375L96.488246875,102.14019375L93.746046875,102.64409375L93.488246875,101.06199375L96.488246875,100.50539375L96.488246875,97.95656375Q95.199246875,98.19093375,93.693346875,98.30226375L93.160146875,96.82570375Q97.777346875,96.38625375,100.666046875,95.14992375L101.47464687499999,96.50343375Q99.904246875,97.14796375,98.123046875,97.59914375L98.123046875,100.18309375L101.451146875,99.52099375L101.726546875,101.19089375L98.123046875,101.84719375L98.123046875,104.24369375L102.283246875,103.43509375L102.552746875,105.08739375L98.123046875,105.92529375000001L98.123046875,109.34129375Q98.123046875,109.79249375,98.556646875,109.79249375L100.355446875,109.79249375Q100.77144687500001,109.79249375,100.964846875,109.48779375000001Q101.181646875,109.16559375,101.292946875,107.57179375L102.804646875,108.07569375Q102.587846875,110.46049375,102.101546875,110.94089375Q101.615246875,111.39209375,100.66014687500001,111.39209375L98.017546875,111.39209375ZM110.873046875,95.07961375L112.566446875,95.07961375L112.566446875,97.85109375L120.095746875,97.85109375L120.095746875,99.47409375L112.566446875,99.47409375L112.566446875,102.64989375L118.748046875,102.64989375L118.748046875,111.72609375L117.054646875,111.72609375L117.054646875,110.60699375L107.685546875,110.60699375L107.685546875,111.74369375L105.998046875,111.74369375L105.998046875,102.64989375L110.873046875,102.64989375L110.873046875,95.07961375ZM107.685546875,108.98979375L117.054646875,108.98979375L117.054646875,104.29059375L107.685546875,104.29059375L107.685546875,108.98979375ZM125.123046875,101.77689375L125.123046875,109.18899375000001Q127.46094687499999,108.62649375000001,129.623046875,107.92919375L130.05074687500002,109.52879375Q126.904246875,110.51909375,123.429646875,111.23979375L122.908246875,109.65769374999999Q123.41214687499999,109.30029375000001,123.41214687499999,108.64989375L123.41214687499999,95.34914375L125.123046875,95.34914375L125.123046875,100.10109375L129.67574687500002,100.10109375L129.67574687500002,101.77689375L125.123046875,101.77689375ZM132.658246875,111.12839375Q130.748046875,111.12839375,130.748046875,108.91949375L130.748046875,95.26125375L132.45894687499998,95.26125375L132.45894687499998,100.65769374999999Q134.978546875,99.92529375,137.228546875,98.71242375L138.23634687499998,100.11869375Q135.19534687499998,101.54249375,132.45894687499998,102.28079375L132.45894687499998,108.59129375Q132.45894687499998,109.47609375,133.144546875,109.47609375L135.664046875,109.47609375Q136.080046875,109.47609375,136.419946875,109.14799375Q136.794946875,108.77299375,136.92384687499998,106.14799375L138.558546875,106.68699375Q138.27144687499998,109.94479375,137.714846875,110.51909375Q137.14064687500002,111.09329375,136.097646875,111.12839375L132.658246875,111.12839375Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="876" height="408" viewBox="0 0 876 408"><g><g style="opacity:0.4000000059604645;"><path d="M0,0L9.10672,0L6.07115,3.03557L3.03557,3.03557L3.03557,6.07115L0,9.10672L0,0Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,1,1752,0)" style="opacity:0.4000000059604645;"><path d="M876,0L885.10672,0L882.07115,3.03557L879.03557,3.03557L879.03557,6.07115L876,9.10672L876,0Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,816)" style="opacity:0.4000000059604645;"><path d="M0,408L9.10672,408L6.07115,411.03557L3.03557,411.03557L3.03557,414.07115L0,417.10672L0,408Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,1752,816)" style="opacity:0.4000000059604645;"><path d="M876,408L885.10672,408L882.07115,411.03557L879.03557,411.03557L879.03557,414.07115L876,417.10672L876,408Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="9" height="9" viewBox="0 0 9 9"><g transform="matrix(-1,0,0,1,18,0)" style="opacity:0.4000000059604645;"><path d="M9,0L18,0L14.96443,3.03557L12.03557,3.03557L12.03557,5.96443L9,9L9,0Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="9" height="9" viewBox="0 0 9 9"><g transform="matrix(-1,0,0,-1,18,18)" style="opacity:0.4000000059604645;"><path d="M9,9L18,9L14.96443,12.03557L12.03557,12.03557L12.03557,14.96443L9,18L9,9Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="9" height="9" viewBox="0 0 9 9"><g style="opacity:0.4000000059604645;"><path d="M0,0L9,0L5.96443,3.03557L3.03557,3.03557L3.03557,5.96443L0,9L0,0Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="9" height="9" viewBox="0 0 9 9"><g transform="matrix(1,0,0,-1,0,18)" style="opacity:0.4000000059604645;"><path d="M0,9L9,9L5.96443,12.03557L3.03557,12.03557L3.03557,14.96443L0,18L0,9Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>
\ No newline at end of file
......@@ -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,10 +332,9 @@ 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;
background: url("./assets/chart-bg.png") no-repeat;
......@@ -325,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 {
......@@ -404,8 +425,11 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
font-size: 200px;
width: 76px;
height: 76px;
position: relative;
background: #f3be28;
/* position: relative; */
background: #f3be28 !important;
position: absolute;
top: 23px;
left: 26px;
}
/*所有的后代都水平垂直居中,这样就是同心圆了*/
......@@ -468,10 +492,11 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.percent {
font-family: DIN Alternate-Bold;
font-size: 20px !important;
}
.percent-text {
color: #fff;
font-size: 18px;
font-size: 16px;
margin-top: 30px;
opacity: 0.7;
......@@ -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 {
......@@ -692,7 +757,7 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.g-progress {
margin: auto;
width: 167px;
width: 145px;
height: 9px;
border-radius: 25px;
......@@ -708,7 +773,7 @@ clip的用法参考:http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.assign-progress {
margin: auto;
width: 166px;
width: 145px;
height: 9px;
border-radius: 25px;
......
......@@ -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">
......@@ -188,7 +192,7 @@
<div class="circle-bar-right-2"></div>
<!-- 遮罩层,显示百分比 -->
<div class="second-mask">
<span class="percent">10%</span>
<span class="percent">100%</span>
<span class="percent-text">完成率</span>
</div>
</div>
......@@ -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">
......@@ -220,7 +226,7 @@
<div class="circle-bar-right-3"></div>
<!-- 遮罩层,显示百分比 -->
<div class="third-mask">
<span class="percent">30%</span>
<span class="percent">100%</span>
<span class="percent-text">完成率</span>
</div>
</div>
......@@ -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">
......@@ -475,7 +496,7 @@
}
var percent3 = parseInt($(".third-mask :first-child").text());
var baseColor = $(".circle-bar").css("background");
var baseColor = $(".circle-bar-3").css("background");
console.log("percent3==", percent3);
if (percent3 <= 50) {
$(".circle-bar-right-3").css(
......@@ -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,
......
......@@ -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,17 +381,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 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>
<span>3.09</span>
万元
</div>
</div>
......@@ -485,7 +507,7 @@
}
var percent3 = parseInt($(".third-mask :first-child").text());
var baseColor = $(".circle-bar").css("background");
var baseColor = $(".circle-bar-3").css("background");
console.log("percent3==", percent3);
if (percent3 <= 50) {
$(".circle-bar-right-3").css(
......@@ -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,
......
<html>
<head>
<style>
body {
width: 100vw;
height: 100vh;
}
.wrapper {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
.a {
width: 460px;
height: 100px;
background: red;
}
.b {
width: 1000px;
height: 100px;
background: green;
}
.c {
width: 460px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="a">
<div>
22222222点击咖啡店了解到了考虑到封疆大吏房间里的克劳福德劳动纪律
</div>
</div>
<div class="b">b</div>
<div class="c">
<div>
22222222点击咖啡店了解到了考虑到封疆大吏房间里的克劳福德劳动纪律
</div>
</div>
</div>
</body>
</html>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论