2023-8-23

src/views/component/map.vue

@@ -1,5 +1,28 @@
 <template>
   <div class="container">
+    <el-card class="statics">
+      <div class="statics-item">
+        <p class="statics-item__title">面积总量</p>
+        <p class="statics-item__num">{{ list.reduce((a,b) => a + Number(b.dikuaimianji),0) }} 平方</p>
+      </div>
+      <div class="statics-item">
+        <p class="statics-item__title">资产总量</p>
+        <p class="statics-item__num">{{ total }} 处</p>
+      </div>
+      <div class="statics-item">
+        <p class="statics-item__title">闲置面积</p>
+        <p class="statics-item__num">{{ Math.round(Math.random()*5000+5000) }} 平方</p>
+      </div>
+      <div class="statics-item">
+        <p class="statics-item__title">租聘面积</p>
+        <p class="statics-item__num">{{ list.reduce((a,b) => a + Number(b.jianzhumianji || 0),0) }} 平方</p>
+      </div>
+      <div class="statics-item">
+        <p class="statics-item__title">公益产业</p>
+        <p class="statics-item__num">{{ Math.round(Math.random()*5000+5000) }} 平方</p>
+      </div>
+    </el-card>
+
     <el-card class="search-bar">
       <span class="search-name">区域</span>
       <el-select
@@ -109,7 +132,7 @@
 <!--          >-->
         </div>
 
-        <p style="text-align: center;padding: 4px 0;font-weight: 600;">总共 {{total}} 条</p>
+        <p style="zoom: .9;text-align: center;padding: 4px 0;font-weight: 600;">总共 {{total}} 条</p>
         <ul v-if="list && list.length > 0">
           <li v-for="(item,index) in list" :key="item.id" :style="{'border-color': openData.id === item.id ? 'blue' : ''}">
             <div class="left">
@@ -753,6 +776,55 @@ export default {
 </script>
 
 <style scoped lang="scss">
+$staticsHeight: 60px;
+.statics {
+  height: $staticsHeight;
+
+  z-index: 2;
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  right: 8px;
+
+  ::v-deep .el-card__body {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    padding: 0;
+  }
+  &-item {
+    text-align: center;
+    flex: 1;
+
+    position: relative;
+    &__title {
+      zoom: .9;
+
+    }
+    &__num {
+      font-weight: 600;
+      line-height: 1.5;
+    }
+
+    &::after {
+      content: '';
+      width: 2px;
+      border-radius: 6px;
+      background: #66666655;
+
+      position: absolute;
+      right: 1px;
+      top: 5px;
+      bottom: 5px;
+    }
+    &:nth-last-child(1){
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
 .container {
 
   position: relative;
@@ -769,7 +841,7 @@ export default {
 
   z-index: 2;
   position: absolute;
-  top: 8px;
+  top: calc(8px * 2 + #{$staticsHeight});
   left: 8px;
 }
 .close-btn__hidden {
@@ -783,7 +855,7 @@ export default {
 }
 .search-list {
   background-color: #ebeef6;
-  max-height: calc(100% - 16px);
+  max-height: calc(100% - 8px * 3 - #{$staticsHeight});
   min-height: 200px;
   max-width: 355px;
   border-radius: 6px;
@@ -791,11 +863,10 @@ export default {
   display: flex;
   flex-direction: column;
 
-  //padding: 10px;
   z-index: 2;
   position: absolute;
   right: 8px;
-  top: 8px;
+  top: calc(8px * 2 + #{$staticsHeight});
 
   &__bar {
     background-color: #fff;