区域分布

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

@@ -309,10 +309,13 @@ export default defineComponent({
 @import "../main";
 .clue {
   flex: 1;
-  padding: 20px 12px 10px 12px;
+  padding: 20px 0 10px 12px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  >* {
+    padding-right: 12px;
+  }
   .statistic-form {
     :deep(.el-form-item) {
       margin-bottom: 7px;

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

@@ -1,6 +1,6 @@
 <template>
   <BusinessMainCom title="处置力量一张图">
-    <div class="power">
+    <div class="unable">
       <div class="__gis-business-main_title">数量统计</div>
       <FocusContentCom class="one">
         <div class="one-main">
@@ -13,18 +13,42 @@
           </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 class="one-main-right-bar-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="one-main-right-bar-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 class="one-main-right-value-able">可调度&nbsp;{{sltj.able}}</div>
+              <div class="one-main-right-value-unable">未上线&nbsp;{{sltj.unable}}</div>
             </div>
           </div>
         </div>
       </FocusContentCom>
       <div class="__gis-business-main_title">区域分布</div>
-      <FocusContentCom class="two">2</FocusContentCom>
+      <FocusContentCom class="two">
+        <div class="two-main">
+          <div class="two-main-legend">
+            <div class="two-main-legend-able">
+              <div/>可调度
+            </div>
+            <div class="two-main-legend-unable">
+              <div/>未上线
+            </div>
+          </div>
+          <div class="two-main-list">
+            <template v-for="item in qyfb">
+              <div class="two-main-list-item">
+                <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>
+              </div>
+            </template>
+          </div>
+        </div>
+      </FocusContentCom>
       <div class="__gis-business-main_title">处置力量列表</div>
       <div class="form">
         <div class="form-one">
@@ -33,7 +57,7 @@
               :span="24"
               link="select"
               label="区域:"
-              v-model:param="power.tempForm.area"
+              v-model:param="unable.tempForm.area"
               static
               :options="[]"
           />
@@ -42,7 +66,7 @@
               :span="24"
               link="select"
               label="状态:"
-              v-model:param="power.tempForm.status"
+              v-model:param="unable.tempForm.status"
               static
               :options="[]"
           />
@@ -52,7 +76,7 @@
               labelWidth="44"
               :span="24"
               label="搜索:"
-              v-model:param="power.tempForm.text"
+              v-model:param="unable.tempForm.text"
           />
           <div class="__cus-buttons-2">
             <div class="__cus-button-submit __hover" @click="onSearch">搜索</div>
@@ -63,11 +87,11 @@
       <div class="table">
         <CusTable
             ref="ref_cusTable"
-            :tableData="power.table.data"
-            :tableHead="power.table.head"
-            :total="power.table.total"
-            :page="power.table.pageNum"
-            :pageSize="power.table.pageSize"
+            :tableData="unable.table.data"
+            :tableHead="unable.table.head"
+            :total="unable.table.total"
+            :page="unable.table.pageNum"
+            :pageSize="unable.table.pageSize"
             @handlePage="handlePage"
         >
         </CusTable>
@@ -110,7 +134,7 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      power: {
+      unable: {
         form: {},
         tempForm: {
           area: '',
@@ -132,16 +156,37 @@ export default defineComponent({
       },
       sltj: {
         able: 1800,
-        unable: 1200
-      }
+        unable: 1
+      },
+      qyfb: [
+        {name: '海口市1', able: 400, unable: 311},
+        {name: '海口市2', able: 600, unable: 100},
+        {name: '海口市3', able: 110, unable: 500},
+        {name: '海口市4', able: 125, unable: 431},
+        {name: '海口市5', able: 246, unable: 63},
+        {name: '海口市6', able: 257, unable: 3},
+        {name: '海口市7', able: 124, unable: 121},
+        {name: '海口市8', able: 11, unable: 144},
+        {name: '海口市9', able: 11, unable: 32},
+        {name: '海口市10', able: 30, unable: 13},
+        {name: '海口市11', able: 10, unable: 33},
+        {name: '海口市12', able: 20, unable: 10},
+        {name: '海口市13', able: 20, unable: 3},
+        {name: '海口市14', able: 20, unable: 3},
+        {name: '海口市15', able: 20, unable: 3},
+        {name: '海口市16', able: 20, unable: 3},
+        {name: '海口市17', able: 20, unable: 3},
+        {name: '海口市18', able: 20, unable: 3},
+        {name: '海口市19', able: 20, unable: 3},
+      ]
     })
     const onSearch = () => {
-      state.power.table.pageNum = 1
-      state.power.form = JSON.parse(JSON.stringify(state.power.tempForm))
+      state.unable.table.pageNum = 1
+      state.unable.form = JSON.parse(JSON.stringify(state.unable.tempForm))
       handleSearch()
     }
     const onReset = () => {
-      state.power.tempForm = {
+      state.unable.tempForm = {
         area: '',
         status: '',
         text: ''
@@ -149,10 +194,10 @@ export default defineComponent({
       onSearch()
     }
     const handleSearch = () => {
-      state.power.table.data = []
-      state.power.table.total = 100
+      state.unable.table.data = []
+      state.unable.table.total = 100
       for (let i = 0; i < 10; i++) {
-        state.power.table.data.push({
+        state.unable.table.data.push({
           name: '张三',
           phone: '13810101010',
           area: '海口市',
@@ -161,12 +206,12 @@ export default defineComponent({
       }
     }
     const handlePage = ({page, pageSize}: any) => {
-      state.power.table.pageNum = page
-      state.power.table.pageSize = pageSize
+      state.unable.table.pageNum = page
+      state.unable.table.pageSize = pageSize
       handleSearch()
     }
     onMounted(() => {
-      state.power.form = JSON.parse(JSON.stringify(state.power.tempForm))
+      state.unable.form = JSON.parse(JSON.stringify(state.unable.tempForm))
       handleSearch()
     })
     return {
@@ -181,7 +226,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import "../main";
-.power {
+.unable {
   flex: 1;
   padding: 0 12px 10px 12px;
   display: flex;
@@ -253,22 +298,20 @@ export default defineComponent({
             font-family: PingFang SC;
             font-weight: 600;
             color: #FFFFFF;
-            min-width: $minW;
-            max-width: calc(100% - 2px - #{$minW});
+            min-width: fit-content;
+            padding: 0 10px;
           }
-          .able {
+          .one-main-right-bar-able {
             height: 100%;
             border-radius: 10px 0 0 10px;
             background-color: #349CF7;
-            padding-left: 10px;
           }
-          .unable {
+          .one-main-right-bar-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 {
@@ -278,10 +321,10 @@ export default defineComponent({
           font-size: 12px;
           font-family: PingFang SC;
           font-weight: 400;
-          .able {
+          .one-main-right-value-able {
             color: #1280F1;
           }
-          .unable {
+          .one-main-right-value-unable {
             color: #434343;
           }
         }
@@ -290,6 +333,83 @@ export default defineComponent({
   }
   .two {
     height: 262px;
+    .two-main {
+      width: 100%;
+      height: 100%;
+      padding: 16px 6px 16px 16px;
+      display: flex;
+      flex-direction: column;
+      .two-main-legend {
+        display: flex;
+        >div {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #434343;
+          >div {
+            width: 10px;
+            height: 10px;
+            background-color: #4AB1FD;
+            margin-right: 5px;
+          }
+        }
+        .two-main-legend-unable {
+          margin-left: 16px;
+          >div {
+            background-color: #FFCB45;
+          }
+        }
+      }
+      .two-main-list {
+        margin-top: 10px;
+        flex: 1;
+        display: grid;
+        row-gap: 10px;
+        overflow-y: auto;
+        padding-right: 10px;
+        .two-main-list-item {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          height: 20px;
+          .name {
+            width: 70px;
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #434343;
+            line-height: 16px;
+            padding: 0 4px 0 6px;
+          }
+          .bar {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            height: 12px;
+            background-color: rgba(17,116,219,0.1);
+            border-radius: 10px;
+            >div{
+              padding: 0 6px;
+              font-size: 12px;
+              color: #FFFFFF;
+              min-width: fit-content;
+            }
+            .bar-able {
+              height: 100%;
+              background-color: #4AB1FD;
+              border-radius: 10px 0 0 10px;
+            }
+            .bar-unable {
+              height: 100%;
+              background-color: #FFCB45;
+              border-radius: 0 10px 10px 0;
+            }
+          }
+        }
+      }
+    }
   }
   .form {
     :deep(.el-form-item) {

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

@@ -252,10 +252,13 @@ export default defineComponent({
 @import "../main";
 .situation {
   flex: 1;
-  padding: 0 12px 10px 12px;
-    display: flex;
+  padding: 0 0 10px 12px;
+  display: flex;
   flex-direction: column;
   overflow: hidden;
+  >* {
+    padding-right: 12px;
+  }
   .statistic-form {
     :deep(.el-form-item) {
       margin-bottom: 7px;