feat:基础信息弹窗及总览弹窗

app/src/mixin/unit.js

@@ -0,0 +1,141 @@
+const punishmentMixin = {
+    data() {
+      return {
+        //建筑分类
+        TypeList: [
+        {
+          value: "住宅建筑",
+          label: "住宅建筑",
+        },
+        {
+          value: "工业建筑",
+          label: "工业建筑",
+        },
+        {
+          value: "居民建筑",
+          label: "居民建筑",
+        },
+      ],
+         //管理形式
+      mentList: [
+        {
+          value: "有管理单位(物业)",
+          label: "有管理单位(物业)",
+        },
+        {
+          value: "有管理单位(非物业)",
+          label: "有管理单位(非物业)",
+        },
+        {
+          value: "居民自主管理",
+          label: "居民自主管理",
+        },
+        {
+          value: "街道社区代管",
+          label: "街道社区代管",
+        },
+        {
+          value: "无管理主体",
+          label: "无管理主体",
+        },
+        {
+          value: "其他",
+          label: "其他",
+        },
+      ],
+        // 维保形式
+      wbList: [
+        {
+          value: "专业维保",
+          label: "专业维保",
+        },
+        {
+          value: "自主维保",
+          label: "自主维保",
+        },
+        {
+          value: "无维保",
+          label: "无维保",
+        },
+        {
+          value: "仅消火栓",
+          label: "仅消火栓",
+        },
+      ],
+          //管理主体
+      glList: [
+        {
+          value: "一般单位",
+          label: "一般单位",
+        },
+        {
+          value: "重点单位",
+          label: "重点单位",
+        },
+      ],
+      //年代
+      yearList:[
+        {
+          value: "2000年前",
+          label: "2000年前",
+        },
+          {
+          value: "2001-2010年",
+          label: "2001-2010年",
+        },
+           {
+          value: "2011-2020年",
+          label: "2011-2020年",
+        },
+           {
+          value: "2021年后",
+          label: "2021年后",
+        },
+      ],
+      //高度
+      higthList:[
+          {
+          value: "30m及以下",
+          label: "30m及以下",
+        },
+        {
+            value: "30-50米（含）",
+            label: "30-50米（含）",
+          },
+          {
+            value: "50-80米（含）",
+            label: "50-80米（含）",
+          },
+          {
+            value: "80-100米",
+            label: "80-100米",
+          },
+          {
+            value: "100米以上",
+            label: "100米以上",
+          },
+      ],
+      fxdjLlst:[
+        {
+            value: "重大风险",
+            label: "重大风险",
+          },
+          {
+            value: "较大风险",
+            label: "较大风险",
+          },
+          {
+            value: "一般风险",
+            label: "一般风险",
+          },
+          {
+            value: "低风险",
+            label: "低风险",
+          },
+      ]
+      };
+    },
+}
+  
+  export default punishmentMixin;
+  

app/src/views/Fire/components/Construction.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="unit">
-      <span class="unit-c">管理主体</span>
-      <div class="unit-num" v-for="(item,index) in glztList" :key="index">
+      <span class="unit-c" @click="showHunit">管理主体</span>
+      <div class="unit-num" v-for="(item,index) in glztList" :key="index" @click="showHunit">
         <div >
           <LinearText
             style="display: inline-block"
@@ -67,14 +67,19 @@
         <div>无维保</div>
       </div> -->
     </div>
+    <!-- 弹窗 -->
+    <basic-modal top="120px" ref="higthModal" name="高层建筑管理">
+      <higthList  />
+    </basic-modal>
   </div>
 </template>
 
 <script>
 import unit3D from "@/components/unit3D.vue";
 import { gettotalGlxx } from "@/api/management.js";
+import higthList from "./higthList.vue";
 export default {
-  components: { unit3D },
+  components: { unit3D,higthList },
   props: {
     qx: String,
     glztList:Array,
@@ -106,6 +111,10 @@ export default {
         });
       });
     },
+    // 弹窗
+    showHunit(){
+      this.showModal("higthModal");
+    }
   },
   created() {
     this.manageList();

app/src/views/Fire/components/higthList.vue

@@ -0,0 +1,459 @@
+<script>
+import { getJdjcUnit, getGcjztjUnit } from "@/api/index.js";
+import { area } from "@/api/area";
+import punishmentMixin from "@/mixin/unit.js";
+export default {
+  name: "BasicInfoModalContent",
+  mixins: [punishmentMixin],
+  data() {
+    return {
+      options: [],
+      fxdjList: [],
+      tableData: [],
+      unitList: [],
+      value: "全市",
+      params: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      total: 0,
+      search: "",
+      showFlag:1
+      // Unittype: "", // 建筑分类
+      // year: "", // 年代
+      // hnum: "", //高度
+      // management: "", //管理形式
+      // subject: "", //管理主体
+      // maintenance: "", //维保形式
+      // risklevel: "", //风险等级
+    };
+  },
+  //   props: {
+  //     qy: String,
+  //   },
+  //   watch: {
+  //     qy: {
+  //       handler(val) {
+  //         this.value = val;
+  //         this.funUnitList();
+  //         this.handUnitList();
+  //       },
+  //       immediate: true,
+  //       deep: true,
+  //     },
+  //   },
+  methods: {
+    rowClickHandler(val) {
+      this.$router.push(`/detail?id=${val.id}`);
+    },
+    funUnitList() {
+      getJdjcUnit({
+        ...this.params,
+        qx: this.value === "重庆市" ? "" : this.value,
+        gcjzmc: this.search,
+      }).then((res) => {
+        this.tableData = res.data.rows;
+        this.total = res.data.total;
+      });
+    },
+    handleSizeChange(val) {
+      this.params.pageSize = val;
+      this.funUnitList();
+    },
+    handleCurrentChange(val) {
+      this.params.pageNum = val;
+      this.funUnitList();
+    },
+    handUnitList() {
+      getGcjztjUnit({
+        ...this.params,
+        qy: this.value === "重庆市" ? "" : this.value,
+      }).then((res) => {
+        const list = res.data.rows[0];
+        this.unitList = [
+          {
+            title: "高层建筑总数(栋)",
+            unitNum: list.ggjz + list.gyjz + list.zzjz,
+          },
+          {
+            title: "超高层建筑总数(栋)",
+            unitNum: list.cggjz,
+          },
+          {
+            title: "老旧高层建筑总数(栋)",
+            unitNum: list.ljzzgc,
+          },
+          {
+            title: "公共建筑总数(栋)",
+            unitNum: list.ggjz,
+          },
+          {
+            title: "住宅建筑总数(栋)",
+            unitNum: list.zzjz,
+          },
+        ];
+      });
+    },
+    resetForm() {
+      this.value = "";
+      this.search = "";
+      (this.params = {
+        pageSize: 10,
+        pageNum: 1,
+      }),
+        // this.params.Unittype = ""; // 建筑分类
+        // this.params.year = ""; // 年代
+        // this.params.hnum = ""; //高度
+        // this.params.management = ""; //管理形式
+        // this.params.subject = ""; //管理主体
+        // this.params.maintenance = ""; //维保形式
+        // this.params.risklevel = ""; //风险等级
+        this.funUnitList();
+    },
+    changeList(val){
+        this.showFlag=val
+    },
+    addClass(i){
+       return this.showFlag===i?'active':'tab-item'
+    }
+  },
+  created() {
+    this.funUnitList();
+    this.handUnitList();
+    area({
+      pageNum: 1,
+      pageSize: 100,
+    }).then((res) => {
+      this.options = res.data.rows;
+    });
+  },
+};
+</script>
+
+<template>
+  <div>
+    <!-- 搜索 -->
+    <div class="maintenance-supervision">
+      <div class="tab">
+        <span class="tab-item" @click="changeList(1)" :class="addClass(1)">管理形式</span>
+        <span class="tab-item"  @click="changeList(2)" :class="addClass(2)">维保形式</span>
+        <span class="tab-item" @click="changeList(3)" :class="addClass(3)">管理主体</span>
+      </div>
+      <div class="maintenance-supervision_header">
+        <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"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="btn-item">
+        <el-button @click="funUnitList">搜索</el-button>
+        <el-button @click="resetForm">重置</el-button>
+      </div>
+    </div>
+
+    <div v-if="showFlag===3">
+      <basic-table
+        :data="tableData"
+        @row-click="rowClickHandler"
+        style="text-align: center"
+      >
+        <el-table-column type="index" label="序号" width="180">
+        </el-table-column>
+        <el-table-column
+          prop="qx"
+          label="区县"
+          width="180"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="gcjzmc"
+          label="重点单位(家)"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="一般单位(家)"
+          width="180"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </basic-table>
+    </div>
+    <div v-if="showFlag===1">
+      <basic-table
+        :data="tableData"
+        @row-click="rowClickHandler"
+        style="text-align: center"
+      >
+        <el-table-column type="index" label="序号" >
+        </el-table-column>
+        <el-table-column
+          prop="qx"
+          label="区县"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="gcjzmc"
+          label="有管理单位（物业）（栋）"
+          width="240"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="有管理单位（非物业）（栋）"
+          width="240"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="居民自主管理（栋）"
+          width="220"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="街道社区代管"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="其他"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="无管理主体"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </basic-table>
+    </div>
+    <div v-if="showFlag===2">
+      <basic-table
+        :data="tableData"
+        @row-click="rowClickHandler"
+        style="text-align: center"
+      >
+        <el-table-column type="index" label="序号" >
+        </el-table-column>
+        <el-table-column
+          prop="qx"
+          label="区县"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="gcjzmc"
+          label="专业维保（栋）"
+          width="240"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="自主维保（栋）"
+          width="240"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="无维保（栋）"
+          width="220"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="街道社区代管"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="xxdz"
+          label="仅消火栓"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        
+      </basic-table>
+    </div>
+    <br />
+    <basic-pagination
+      layout="->,prev, pager, next, sizes,jumper"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="params.pageSize"
+      :current-page="params.PageNum"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.maintenance-supervision {
+  display: flex;
+  align-items: center;
+  // padding: 10px 10px 0px 20px;
+  ::v-deep(.el-input__inner) {
+    border: none;
+    background: linear-gradient(
+      360deg,
+      rgba(0, 148, 255, 0.5) 0%,
+      rgba(0, 148, 255, 0.31) 100%
+    );
+    color: #fff;
+  }
+  ::v-deep(.el-button) {
+    border: none;
+    background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
+    color: #fff;
+  }
+  .maintenance-supervision_header {
+    display: flex;
+    // flex-wrap: wrap;
+    justify-content: space-around;
+    // border-bottom: 1px solid #154956;
+    padding-bottom: 10px;
+    font-size: 12px;
+    color: rgb(79, 149, 186);
+    // .select-item{
+    //   margin-right: 20px;
+    // }
+  }
+  .btn-item {
+    margin-bottom: 10px;
+  }
+
+  .warp {
+    height: 520px;
+    margin: 0 auto;
+    overflow: hidden;
+    .item {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+  }
+  /deep/.el-input__inner {
+    background-color: #184254;
+    width: 150px;
+    height: 30px;
+    margin-bottom: 5px;
+  }
+  /deep/.el-button {
+    width: 100px;
+    height: 32px;
+    font-size: 14px;
+    line-height: 2px;
+    // margin: 0 20px 0 30px;
+    color: #fff;
+    border-radius: 5px;
+    border: none;
+    margin-left: 20px;
+  }
+  /deep/.el-button:hover {
+    color: rgb(80, 147, 224);
+  }
+  /deep/.select_btn {
+    position: absolute;
+    top: 225px;
+    right: 320px;
+    //下拉框
+  }
+  /deep/.el-input {
+    width: 150px;
+    // margin-left: 20px;
+  }
+  .header {
+    color: #fff;
+    height: 33px !important;
+    line-height: 33px !important;
+    background-color: rgba(0, 163, 255, 0.3) !important;
+    color: #61dbff;
+    margin-top: 15px;
+    margin-bottom: 6px;
+  }
+
+  .row,
+  li,
+  a {
+    display: block;
+    height: 39px;
+    line-height: 39px;
+    margin-bottom: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+    background-color: rgba(0, 0, 0, 0.2);
+    .time,
+    .num,
+    .person,
+    .result {
+      flex: 0.33;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .num {
+      flex: 0.15;
+    }
+  }
+  .inp {
+    margin-left: 20px;
+  }
+}
+.unit-bulid {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+.unit-num {
+  width: 200px;
+  height: 109px;
+  border: 1px solid #0463a7;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-items: center;
+  line-height: 59px;
+}
+.tab {
+  display: flex;
+}
+.active{
+    background: #0463a7 !important;
+}
+.tab-item {
+  display: inline-block;
+  width: 120px;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+  font-size: 16px;
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  margin-right: 15px;
+  margin-bottom: 15px;
+}
+</style>

app/src/views/Fire/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between; cursor: pointer;">
     <div>
       <border-panel
         height="443px"
         style="margin-bottom: 6px"
         title="高层建筑管理"
       >
-        <Construction :qx="qx" :glztList="glztList" :wbxsList="wbxsList" />
+        <Construction :qx="qx" :glztList="glztList" :wbxsList="wbxsList"  />
       </border-panel>
       <border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
         <ManagementContent />
@@ -33,6 +33,7 @@
         <UnitInfo />
       </border-panel>
     </div>
+   
   </div>
 </template>
 <script>
@@ -41,6 +42,7 @@ import UnitInfo from "./components/UnitInfo.vue";
 import Construction from "./components/Construction.vue";
 import ManagementContent from "./components/ManagementContent.vue";
 import MapCharts from "../Home/components/MapCharts.vue";
+
 import {
   getGlzts,
   getWbxxs,
@@ -55,7 +57,8 @@ export default {
     UnitInfo,
     Construction,
     ManagementContent,
-    MapCharts
+    MapCharts,
+    
   },
   data() {
     return {
@@ -123,6 +126,7 @@ export default {
         this.wbdwList = res.data.rows;
       });
     },
+  
   },
   created() {
     this.unitZt();

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

@@ -1,24 +1,14 @@
 <script>
 import { getJdjcUnit, getGcjztjUnit } from "@/api/index.js";
 import { area } from "@/api/area";
+import punishmentMixin from "@/mixin/unit.js";
 export default {
   name: "BasicInfoModalContent",
+  mixins: [punishmentMixin],
   data() {
     return {
-      options: [
-        {
-          value: "1",
-          label: "1111",
-        },
-        {
-          value: "2",
-          label: "2222",
-        },
-        {
-          value: "3",
-          label: "3333",
-        },
-      ],
+      options: [],
+      fxdjList: [],
       tableData: [],
       unitList: [],
       value: "全市",
@@ -28,13 +18,13 @@ export default {
       },
       total: 0,
       search: "",
-      Unittype: "", // 建筑分类
-      year: "", // 年代
-      hnum: "", //高度
-      management: "", //管理形式
-      subject: "", //管理主体
-      maintenance: "", //维保形式
-      risklevel: "", //风险等级
+      // Unittype: "", // 建筑分类
+      // year: "", // 年代
+      // hnum: "", //高度
+      // management: "", //管理形式
+      // subject: "", //管理主体
+      // maintenance: "", //维保形式
+      // risklevel: "", //风险等级
     };
   },
   props: {
@@ -106,6 +96,17 @@ export default {
     resetForm() {
       this.value = "";
       this.search = "";
+      this.params={
+        pageSize: 10,
+        pageNum: 1,
+      },
+      // this.params.Unittype = ""; // 建筑分类
+      // this.params.year = ""; // 年代
+      // this.params.hnum = ""; //高度
+      // this.params.management = ""; //管理形式
+      // this.params.subject = ""; //管理主体
+      // this.params.maintenance = ""; //维保形式
+      // this.params.risklevel = ""; //风险等级
       this.funUnitList();
     },
   },
@@ -152,11 +153,11 @@ export default {
         </div>
         <!-- 建筑分类 -->
         <div>
-          <el-select v-model="Unittype" placeholder="请选择">
+          <el-select v-model="params.jzdx" placeholder="建筑分类">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.label"
+              v-for="(item, index) in TypeList"
               :key="index"
             >
             </el-option>
@@ -164,11 +165,11 @@ export default {
         </div>
         <!-- 年代 -->
         <div>
-          <el-select v-model="year" placeholder="请选择">
+          <el-select v-model="params.jcnd" placeholder="年代">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in yearList"
               :key="index"
             >
             </el-option>
@@ -176,59 +177,59 @@ export default {
         </div>
         <!-- 高度 -->
         <div>
-          <el-select v-model="hnum" placeholder="请选择">
+          <el-select v-model="params.gd" placeholder="高度">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in higthList"
               :key="index"
             >
             </el-option>
           </el-select>
         </div>
-         <!-- 管理形式 -->
-         <div>
-          <el-select v-model="management" placeholder="请选择">
+        <!-- 管理形式 -->
+        <div>
+          <el-select v-model="params.xfaqglxs" placeholder="管理形式">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in mentList"
               :key="index"
             >
             </el-option>
           </el-select>
         </div>
-         <!-- 管理主体 -->
-         <div>
-          <el-select v-model="subject" placeholder="请选择">
+        <!-- 管理主体 -->
+        <div>
+          <el-select v-model="params.glzthztjzd" placeholder="管理主体">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in glList"
               :key="index"
             >
             </el-option>
           </el-select>
         </div>
-         <!-- 维保形式 -->
-         <div>
-          <el-select v-model="maintenance" placeholder="请选择">
+        <!-- 维保形式 -->
+        <div>
+          <el-select v-model="params.wbxs" placeholder="维保形式">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in wbList"
               :key="index"
             >
             </el-option>
           </el-select>
         </div>
-         <!-- 风险等级 -->
-         <div>
-          <el-select v-model="risklevel" placeholder="请选择">
+        <!-- 风险等级 -->
+        <div>
+          <el-select v-model="params.fxdj" placeholder="风险等级">
             <el-option
-              :value="item.areaTitle"
-              :label="item.areaTitle"
-              v-for="(item, index) in options"
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in fxdjLlst"
               :key="index"
             >
             </el-option>
@@ -237,21 +238,48 @@ export default {
         <div class="inp">
           <el-input v-model="search" placeholder="请输入建筑名称"></el-input>
         </div>
-       
       </div>
-     <div class="btn-item">
-      <el-button @click="funUnitList">搜索</el-button>
+      <div class="btn-item">
+        <el-button @click="funUnitList">搜索</el-button>
         <el-button @click="resetForm">重置</el-button>
-     </div>
+      </div>
     </div>
 
-    <basic-table :data="tableData" @row-click="rowClickHandler">
+    <basic-table
+      :data="tableData"
+      @row-click="rowClickHandler"
+      style="text-align: center"
+    >
       <el-table-column type="index" label="序号" width="180"> </el-table-column>
-      <el-table-column prop="qx" label="区域" width="180"> </el-table-column>
-      <el-table-column prop="gcjzmc" label="建筑名称"> </el-table-column>
-      <el-table-column prop="xxdz" label="地址"> </el-table-column>
-      <el-table-column prop="jcnd" label="年代"> </el-table-column>
+      <el-table-column prop="qx" label="区域" width="180" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column prop="gcjzmc" label="建筑名称" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        prop="xxdz"
+        label="地址"
+        width="180"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <!-- 新增 -->
+      <el-table-column
+        prop="jzdx"
+        label="建筑分类"
+        width="140"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column prop="jznsygn" label="使用功能" show-overflow-tooltip>
+      </el-table-column>
       <el-table-column prop="gd" label="高度（米）"> </el-table-column>
+      <el-table-column prop="jzmj" label="建筑面积" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column prop="jcnd" label="建筑年代"> </el-table-column>
+      <el-table-column prop="gd" label="隐患数"> </el-table-column>
+      <el-table-column prop="fxdj" label="风险等级" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column prop="jcnd" label="物联网"> </el-table-column>
     </basic-table>
     <br />
     <basic-pagination
@@ -295,7 +323,7 @@ export default {
     //   margin-right: 20px;
     // }
   }
-  .btn-item{
+  .btn-item {
     margin-bottom: 10px;
   }
 
@@ -326,7 +354,7 @@ export default {
     border-radius: 5px;
     border: none;
   }
-  /deep/.el-button:hover{
+  /deep/.el-button:hover {
     color: rgb(80, 147, 224);
   }
   /deep/.select_btn {

app/src/views/Home/index.vue

@@ -49,7 +49,7 @@
         </template>
       </border-panel>
     </div>
-    <basic-modal top="120px" ref="basicInfoModal" title="基本信息">
+    <basic-modal top="120px" ref="basicInfoModal" name="基础信息">
       <BasicInfoModalContent :qy="qy" />
     </basic-modal>
   </div>

components/BasicModal/index.vue

@@ -19,6 +19,10 @@ export default {
     width: {
       type: String,
       default: "1456px",
+    }, 
+    name: {
+      type: String,
+      default: "",
     },
   },
   methods: {
@@ -38,6 +42,7 @@ export default {
     :modal-append-to-body="false"
     :visible.sync="visible"
     :top="top"
+    :title="name"
     :width="width"
     v-bind="$attrs"
     v-on="$listeners"