|
|
@@ -1,37 +1,43 @@
|
|
|
<template>
|
|
|
<div class="module-main">
|
|
|
<div class="module-box">
|
|
|
- <!-- <div class="main-box"> -->
|
|
|
- <div class="block2 flex-col">
|
|
|
- <div class="text-wrapper1 flex-row justify-between">
|
|
|
- <span class="text5">{{ info.count1 }}</span>
|
|
|
- <span class="text6">{{ info.count2 }}</span>
|
|
|
- </div>
|
|
|
- <div class="text-wrapper2 flex-row justify-between">
|
|
|
- <span class="text7">消防设施总点位数</span>
|
|
|
- <span class="text8">巡更计划点位数</span>
|
|
|
+ <div class="block2">
|
|
|
+ <!-- 上部 -->
|
|
|
+ <div class="top">
|
|
|
+ <div class="top-item left">
|
|
|
+ <div class="num">{{ info.count1 }}</div>
|
|
|
+ <div class="label">消防设施总点位数</div>
|
|
|
+ </div>
|
|
|
+ <div class="top-item right">
|
|
|
+ <div class="num">{{ info.count2 }}</div>
|
|
|
+ <div class="label">巡更计划点位数</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="box1 flex-row">
|
|
|
- <span class="text9" style="margin-left: 1.5vw;">{{ info.count3 }}</span>
|
|
|
- <span class="text9" style="font-size: 15px;margin-top: 8vh;margin-left: -17vw;">当班人数</span>
|
|
|
+
|
|
|
+ <!-- 中间圆 -->
|
|
|
+ <div class="center">
|
|
|
+ <div class="big-num">{{ info.count3 }}</div>
|
|
|
+ <div class="big-label">当班人数</div>
|
|
|
</div>
|
|
|
- <div class="box2 justify-between">
|
|
|
- <div class="text-group2 justify-between">
|
|
|
- <span class="text11">{{ info.count4 }}</span>
|
|
|
- <span class="text12">消防设施检查完成数</span>
|
|
|
+
|
|
|
+ <!-- 下部 -->
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-item left">
|
|
|
+ <div class="num">{{ info.count4 }}</div>
|
|
|
+ <div class="label">消防设施检查完成数</div>
|
|
|
</div>
|
|
|
- <div class=" justify-between">
|
|
|
- <span class="text13">{{ info.count5 }}<a v-if=" info.count5 > 0 " style="font-size: 30px;">%</a></span>
|
|
|
- <span class="text14">今日巡更完成率</span>
|
|
|
+ <div class="bottom-item right">
|
|
|
+ <div class="num">
|
|
|
+ {{ info.count5 ? Math.round(info.count5) : '' }}<span v-if="info.count5 > 0">%</span>
|
|
|
+ </div>
|
|
|
+ <div class="label">今日巡更完成率</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
- <!-- </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
import Vue from 'vue';
|
|
|
import Component from 'vue-class-component';
|
|
|
@@ -83,164 +89,99 @@ export default class Echarts extends Vue {
|
|
|
}
|
|
|
|
|
|
.block2 {
|
|
|
+ position: relative;
|
|
|
background-image: url(../../images/smodule/smodule103.png);
|
|
|
background-repeat: no-repeat;
|
|
|
- background-size: 100% 80%;
|
|
|
- height: 77vh;
|
|
|
- margin-top: 1.1vh;
|
|
|
-
|
|
|
- .text-wrapper1 {
|
|
|
- width: 18.8vw;
|
|
|
- height: 11vh;
|
|
|
- margin: 4vh 0 0 2.2vw;
|
|
|
-
|
|
|
- .text5 {
|
|
|
- width: 13.9vw;
|
|
|
- height: 11vh;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 3.7vw;
|
|
|
- font-family: AlibabaPuHuiTi-Bold;
|
|
|
- font-weight: 700;
|
|
|
- text-align: left;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 11vh;
|
|
|
- }
|
|
|
-
|
|
|
- .text6 {
|
|
|
- width: 13.9vw;
|
|
|
- height: 11vh;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 3.7vw;
|
|
|
- font-family: AlibabaPuHuiTi-Bold;
|
|
|
- font-weight: 700;
|
|
|
- text-align: right;
|
|
|
- margin-left: 15.8vw;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 11vh;
|
|
|
- }
|
|
|
- }
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 64.8vh;
|
|
|
+}
|
|
|
|
|
|
- .text-wrapper2 {
|
|
|
- width: 26.5vw;
|
|
|
- height: 5vh;
|
|
|
-
|
|
|
- // margin: 0 0 0 2.9vw;
|
|
|
- .text7 {
|
|
|
- width: 9.3vw;
|
|
|
- height: 5vh;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: rgba(11, 226, 223, 1);
|
|
|
- font-size: 18px;
|
|
|
- font-family: AlibabaPuHuiTi-Regular;
|
|
|
- font-weight: NaN;
|
|
|
- text-align: left;
|
|
|
- margin-left: 2.5vw;
|
|
|
- margin-top: -5.5vh;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 11vh;
|
|
|
- }
|
|
|
-
|
|
|
- .text8 {
|
|
|
- width: 9.3vw;
|
|
|
- height: 5vh;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: rgba(11, 226, 223, 1);
|
|
|
- font-size: 18px;
|
|
|
- font-family: AlibabaPuHuiTi-Regular;
|
|
|
- font-weight: NaN;
|
|
|
- text-align: left;
|
|
|
- margin-left: 15.4vw;
|
|
|
- margin-top: -6vh;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 11vh;
|
|
|
- }
|
|
|
- }
|
|
|
+/* ========= 上部分 ========= */
|
|
|
+.top {
|
|
|
+ position: absolute;
|
|
|
+ top: 5%;
|
|
|
+ left: 5%;
|
|
|
+ right: 5%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
|
|
|
- .box1 {
|
|
|
- width: 23.1vw;
|
|
|
- height: 27vh;
|
|
|
- margin: 0 0 0 11.6vw;
|
|
|
- text-align: center;
|
|
|
- .text9 {
|
|
|
- width: 23.1vw;
|
|
|
- height: 16vh;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: rgba(11, 226, 223, 1);
|
|
|
- font-size: 100px;
|
|
|
- font-family: AlibabaPuHuiTi-Heavy;
|
|
|
- font-weight: 900;
|
|
|
- text-align: left;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 20vh;
|
|
|
- }
|
|
|
+.top-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
+.top-item.right {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
|
|
|
- .box2 {
|
|
|
- // width: 71.5vw;
|
|
|
- height: 11.5vw;
|
|
|
- margin: 5vh 0 0 2vw;
|
|
|
- .text-group2{
|
|
|
- .text11 {
|
|
|
- width: 13.9vw;
|
|
|
- height: 11vh;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 3.7vw;
|
|
|
- font-family: AlibabaPuHuiTi-Bold;
|
|
|
- font-weight: 700;
|
|
|
- text-align: left;
|
|
|
- margin-top: -2.5vw;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 49px;
|
|
|
- }
|
|
|
-
|
|
|
- .text12 {
|
|
|
- width: 69px;
|
|
|
- height: 17px;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: rgba(11, 226, 223, 1);
|
|
|
- font-size: 18px;
|
|
|
- font-family: AlibabaPuHuiTi-Regular;
|
|
|
- font-weight: NaN;
|
|
|
- text-align: left;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 48px;
|
|
|
- margin-left: -13.5vw;
|
|
|
- margin-top: 1vh;
|
|
|
- }
|
|
|
- }
|
|
|
- .text13 {
|
|
|
- width: 104px;
|
|
|
- height: 47px;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 3.7vw;
|
|
|
- font-family: AlibabaPuHuiTi-Bold;
|
|
|
- font-weight: 700;
|
|
|
- text-align: left;
|
|
|
- white-space: nowrap;
|
|
|
- margin-top: -4vh;
|
|
|
- margin-left: -9vw;
|
|
|
- line-height: 5vh;
|
|
|
- }
|
|
|
- .text14 {
|
|
|
- position: absolute;
|
|
|
- width: 123px;
|
|
|
- height: 17px;
|
|
|
- overflow-wrap: break-word;
|
|
|
- color: rgba(11, 226, 223, 1);
|
|
|
- font-size: 18px;
|
|
|
- font-family: AlibabaPuHuiTi-Regular;
|
|
|
- font-weight: NaN;
|
|
|
- text-align: left;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 6vh;
|
|
|
- margin-left: -9vw;
|
|
|
- margin-top: 1vh;
|
|
|
- }
|
|
|
- }
|
|
|
+.top .num {
|
|
|
+ font-size: clamp(28px, 3.8vw, 64px);
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.top .label {
|
|
|
+ font-size: clamp(12px, 1.2vw, 18px);
|
|
|
+ color: rgba(11, 226, 223, 1);
|
|
|
+ margin-top: 0.5vh;
|
|
|
+}
|
|
|
+
|
|
|
+/* ========= 中间 ========= */
|
|
|
+.center {
|
|
|
+ position: absolute;
|
|
|
+ top: 48%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.big-num {
|
|
|
+ font-size: clamp(50px, 7vw, 130px);
|
|
|
+ font-weight: 900;
|
|
|
+ color: rgba(11, 226, 223, 1);
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.big-label {
|
|
|
+ font-size: clamp(14px, 1.5vw, 22px);
|
|
|
+ color: rgba(11, 226, 223, 1);
|
|
|
+ margin-top: 1vh;
|
|
|
+}
|
|
|
+
|
|
|
+/* ========= 下部分（关键修复） ========= */
|
|
|
+.bottom {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 6%; /* ⭐关键：固定到底部，保证不消失 */
|
|
|
+ left: 5%;
|
|
|
+ right: 5%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-item.right {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom .num {
|
|
|
+ font-size: clamp(26px, 3.5vw, 60px);
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom .label {
|
|
|
+ font-size: clamp(12px, 1.2vw, 18px);
|
|
|
+ color: rgba(11, 226, 223, 1);
|
|
|
+ margin-top: 0.5vh;
|
|
|
+}
|
|
|
+
|
|
|
+/* 百分号 */
|
|
|
+.bottom span {
|
|
|
+ font-size: clamp(16px, 2vw, 30px);
|
|
|
}
|
|
|
</style>
|
