feat:总览-弹窗

app/src/views/Home/components/BasicInfoModalContent.vue

@@ -1,6 +1,6 @@
 <script>
 import { getJdjcUnit, getGcjztjUnit } from "@/api/index.js";
-import { area } from '@/api/area'
+import { area } from "@/api/area";
 export default {
   name: "BasicInfoModalContent",
   data() {
@@ -28,6 +28,13 @@ export default {
       },
       total: 0,
       search: "",
+      Unittype: "", // 建筑分类
+      year: "", // 年代
+      hnum: "", //高度
+      management: "", //管理形式
+      subject: "", //管理主体
+      maintenance: "", //维保形式
+      risklevel: "", //风险等级
     };
   },
   props: {
@@ -51,7 +58,8 @@ export default {
     funUnitList() {
       getJdjcUnit({
         ...this.params,
-        qx: this.value === "重庆市" ? "" : this.value,gcjzmc:this.search
+        qx: this.value === "重庆市" ? "" : this.value,
+        gcjzmc: this.search,
       }).then((res) => {
         this.tableData = res.data.rows;
         this.total = res.data.total;
@@ -68,7 +76,7 @@ export default {
     handUnitList() {
       getGcjztjUnit({
         ...this.params,
-        qy: this.value === "重庆市" ? "" : this.value
+        qy: this.value === "重庆市" ? "" : this.value,
       }).then((res) => {
         const list = res.data.rows[0];
         this.unitList = [
@@ -95,29 +103,29 @@ export default {
         ];
       });
     },
-    resetForm(){
-      this.value=''
-      this.search=''
-      this.funUnitList()
-    }
+    resetForm() {
+      this.value = "";
+      this.search = "";
+      this.funUnitList();
+    },
   },
   created() {
     this.funUnitList();
     this.handUnitList();
     area({
       pageNum: 1,
-      pageSize: 100
-    }).then(res => {
-      this.options = res.data.rows
-    })
+      pageSize: 100,
+    }).then((res) => {
+      this.options = res.data.rows;
+    });
   },
 };
 </script>
 
 <template>
   <div>
-      <!-- 建筑数 -->
-      <div class="unit-bulid">
+    <!-- 建筑数 -->
+    <div class="unit-bulid">
       <div class="unit-num" v-for="(item, index) in unitList" :key="index">
         <span>{{ item.title }}</span>
         <!-- <span class="build-num">{{ item.unitNum }}</span> -->
@@ -131,10 +139,97 @@ export default {
     <!-- 搜索 -->
     <div class="maintenance-supervision">
       <div class="maintenance-supervision_header">
-        <div>
+        <div class="select-item">
           <el-select v-model="value" placeholder="请选择">
             <el-option
-            :value="item.areaTitle" :label="item.areaTitle" v-for="(item,index) in options" :key="index"
+              :value="item.areaTitle"
+              :label="item.areaTitle"
+              v-for="(item, index) in options"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 建筑分类 -->
+        <div>
+          <el-select v-model="Unittype" placeholder="请选择">
+            <el-option
+              :value="item.areaTitle"
+              :label="item.areaTitle"
+              v-for="(item, index) in options"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 年代 -->
+        <div>
+          <el-select v-model="year" placeholder="请选择">
+            <el-option
+              :value="item.areaTitle"
+              :label="item.areaTitle"
+              v-for="(item, index) in options"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 高度 -->
+        <div>
+          <el-select v-model="hnum" placeholder="请选择">
+            <el-option
+              :value="item.areaTitle"
+              :label="item.areaTitle"
+              v-for="(item, index) in options"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+         <!-- 管理形式 -->
+         <div>
+          <el-select v-model="management" placeholder="请选择">
+            <el-option
+              :value="item.areaTitle"
+              :label="item.areaTitle"
+              v-for="(item, index) in options"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+         <!-- 管理主体 -->
+         <div>
+          <el-select v-model="subject" placeholder="请选择">
+            <el-option
+              :value="item.areaTitle"
+              :label="item.areaTitle"
+              v-for="(item, index) in options"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+         <!-- 维保形式 -->
+         <div>
+          <el-select v-model="maintenance" placeholder="请选择">
+            <el-option
+              :value="item.areaTitle"
+              :label="item.areaTitle"
+              v-for="(item, index) in options"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+         <!-- 风险等级 -->
+         <div>
+          <el-select v-model="risklevel" placeholder="请选择">
+            <el-option
+              :value="item.areaTitle"
+              :label="item.areaTitle"
+              v-for="(item, index) in options"
+              :key="index"
             >
             </el-option>
           </el-select>
@@ -142,11 +237,14 @@ export default {
         <div class="inp">
           <el-input v-model="search" placeholder="请输入建筑名称"></el-input>
         </div>
-        <el-button @click="funUnitList">搜索</el-button>
-        <el-button @click="resetForm">重置</el-button>
+       
       </div>
+     <div class="btn-item">
+      <el-button @click="funUnitList">搜索</el-button>
+        <el-button @click="resetForm">重置</el-button>
+     </div>
     </div>
-  
+
     <basic-table :data="tableData" @row-click="rowClickHandler">
       <el-table-column type="index" label="序号" width="180"> </el-table-column>
       <el-table-column prop="qx" label="区域" width="180"> </el-table-column>
@@ -187,11 +285,18 @@ export default {
   }
   .maintenance-supervision_header {
     display: flex;
-    // justify-content: space-around;
+    flex-wrap: wrap;
+    justify-content: space-around;
     // border-bottom: 1px solid #154956;
-    padding-bottom: 16px;
+    padding-bottom: 10px;
     font-size: 12px;
     color: rgb(79, 149, 186);
+    // .select-item{
+    //   margin-right: 20px;
+    // }
+  }
+  .btn-item{
+    margin-bottom: 10px;
   }
 
   .warp {
@@ -216,18 +321,14 @@ export default {
     height: 32px;
     font-size: 14px;
     line-height: 2px;
-    background: #184254;
-    margin: 0 20px 0 30px;
+    // margin: 0 20px 0 30px;
     color: #fff;
     border-radius: 5px;
     border: none;
   }
-  // /deep/.el-select-dropdown{
-
-  //     background-color:#184254 !important;
-  //     position: fixed;
-
-  //   }
+  /deep/.el-button:hover{
+    color: rgb(80, 147, 224);
+  }
   /deep/.select_btn {
     position: absolute;
     top: 225px;