数量统计

src/views/gis/business/power/index.vue

@@ -2,7 +2,27 @@
   <BusinessMainCom title="处置力量一张图">
     <div class="power">
       <div class="__gis-business-main_title">数量统计</div>
-      <FocusContentCom class="one">1</FocusContentCom>
+      <FocusContentCom class="one">
+        <div class="one-main">
+          <div class="one-main-left">
+            <div class="one-main-left-title">
+              <div>总数</div>
+              <div>{{ sltj.able + sltj.unable }}</div>
+            </div>
+            <img src="@/assets/images/gis-business/clue_sh-bg.png" alt=""/>
+          </div>
+          <div class="one-main-right">
+            <div class="one-main-right-bar">
+              <div class="able" :style="`width: calc((100% - 2px) * ${(sltj.able / (sltj.able + sltj.unable)).toFixed(1)})`">{{Number((sltj.able / (sltj.able + sltj.unable) * 100).toFixed(1))}}%</div>
+              <div class="unable" :style="`width: calc((100% - 2px) * ${(sltj.unable / (sltj.able + sltj.unable)).toFixed(1)})`">{{Number((sltj.unable / (sltj.able + sltj.unable) * 100).toFixed(1))}}%</div>
+            </div>
+            <div class="one-main-right-value">
+              <div class="able">可调度&nbsp;{{sltj.able}}</div>
+              <div class="unable">未上线&nbsp;{{sltj.unable}}</div>
+            </div>
+          </div>
+        </div>
+      </FocusContentCom>
       <div class="__gis-business-main_title">区域分布</div>
       <FocusContentCom class="two">2</FocusContentCom>
       <div class="__gis-business-main_title">处置力量列表</div>
@@ -74,10 +94,12 @@ import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
 import BusinessMainCom from '../common/business-main.vue'
 import FocusContentCom from '../common/focus-content.vue'
+import SjslChartCom from "@/views/gis/business/situation/sjsl-chart.vue";
 
 export default defineComponent({
   name: '',
   components: {
+    SjslChartCom,
     BusinessMainCom,
     FocusContentCom,
   },
@@ -107,6 +129,10 @@ export default defineComponent({
           pageSize: 10,
           total: 0
         }
+      },
+      sltj: {
+        able: 1800,
+        unable: 1200
       }
     })
     const onSearch = () => {
@@ -163,6 +189,104 @@ export default defineComponent({
   overflow: hidden;
   .one {
     height: 98px;
+    .one-main {
+      width: 100%;
+      height: 100%;
+      padding: 20px 16px;
+      display: flex;
+      align-items: center;
+      .one-main-left {
+        height: 100%;
+        width: 113px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .one-main-left-title {
+          position: absolute;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          bottom: 26px;
+          >div:nth-child(1) {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 600;
+            background: linear-gradient(180deg, #C1DFFF 0%, #007EFF 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+          >div:nth-child(2) {
+            font-size: 26px;
+            font-family: YouSheBiaoTiHei;
+            font-weight: 400;
+            line-height: 22px;
+            color: #1280F1;
+            margin-top: 2px;
+            >span {
+              font-size: 16px;
+            }
+          }
+        }
+        >img {
+          z-index: -1;
+          position: absolute;
+          height: 48px;
+          width: 100%;
+          bottom: -8px;
+        }
+      }
+      .one-main-right {
+        flex: 1;
+        margin-left: 10px;
+        .one-main-right-bar {
+          width: 100%;
+          height: 22px;
+          display: flex;
+          justify-content: space-between;
+          $minW: 50px;
+          >div {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 600;
+            color: #FFFFFF;
+            min-width: $minW;
+            max-width: calc(100% - 2px - #{$minW});
+          }
+          .able {
+            height: 100%;
+            border-radius: 10px 0 0 10px;
+            background-color: #349CF7;
+            padding-left: 10px;
+          }
+          .unable {
+            display: flex;
+            justify-content: flex-end;
+            height: 100%;
+            border-radius: 0 10px 10px 0;
+            background-color: #FFCB45;
+            padding-right: 10px;
+          }
+        }
+        .one-main-right-value {
+          margin-top: 4px;
+          display: flex;
+          justify-content: space-between;
+          font-size: 12px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          .able {
+            color: #1280F1;
+          }
+          .unable {
+            color: #434343;
+          }
+        }
+      }
+    }
   }
   .two {
     height: 262px;