区域分布

src/style/business.scss

@@ -0,0 +1,7 @@
+.__power-qyfb-popper {
+  padding: 6px 8px !important;
+  opacity: 0.7;
+  >div {
+    line-height: 18px;
+  }
+}

src/style/index.scss

@@ -1,6 +1,7 @@
 @import './webkit-scrollbar';
 @import './cus';
 @import './font';
+@import './business';
 
 * {
   outline: none;  // dom元素选中带边框

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

@@ -40,10 +40,20 @@
                 <div class="name">
                   <CusEllipsis :value="item.name"/>
                 </div>
-                <div class="bar">
-                  <div class="bar-able" :style="`width: calc(100% * ${(item.able / (qyfb[0].able + qyfb[0].unable)).toFixed(1)})`">{{item.able}}</div>
-                  <div class="bar-unable" :style="`width: calc(100% * ${(item.unable / (qyfb[0].able + qyfb[0].unable)).toFixed(1)})`">{{item.unable}}</div>
-                </div>
+                <el-popover placement="right" trigger="hover" effect="dark" popper-class="__power-qyfb-popper">
+                  <template #reference>
+                    <div class="bar __hover">
+                      <div class="bar-able" :style="`width: calc(100% * ${(item.able / (qyfb[0].able + qyfb[0].unable)).toFixed(1)})`">{{item.able}}</div>
+                      <div class="bar-unable" :style="`width: calc(100% * ${(item.unable / (qyfb[0].able + qyfb[0].unable)).toFixed(1)})`">{{item.unable}}</div>
+                    </div>
+                  </template>
+                  <div>
+                    {{ item.name }}<br/>
+                    总数：{{item.able + item.unable}}<br/>
+                    可调度：{{item.able}}<br/>
+                    未上线：{{item.unable}}
+                  </div>
+                </el-popover>
               </div>
             </template>
           </div>
@@ -393,8 +403,10 @@ export default defineComponent({
             >div{
               padding: 0 6px;
               font-size: 12px;
-              color: #FFFFFF;
-              min-width: fit-content;
+              //color: #FFFFFF;
+              //min-width: fit-content;
+              color: transparent;
+              min-width: 10px;
             }
             .bar-able {
               height: 100%;