Merge branch 'master' of http://113.204.105.114:10011/TwoKe/zhgkpt-datav

app/src/api/basicInfor.js

@@ -55,4 +55,28 @@ export function getGdfbtj(params) {
 		methods: 'get',
 		params
 	})
+}
+// 获取基础信息-高层建筑统计-弹窗
+export function getGcjztjTc(params) {
+	return request({
+		url: '/system/jcxx/gcjztj/jzlx',
+		methods: 'get',
+		params
+	})
+}
+// 获取基础信息-高层建筑统计-高度弹窗
+export function getGcjztjNdTc(params) {
+	return request({
+		url: 'system/jcxx/gcjztj/nd',
+		methods: 'get',
+		params
+	})
+}
+// 获取基础信息-高层建筑统计-年代弹窗
+export function getGcjztjGdTc(params) {
+	return request({
+		url: '/system/jcxx/gcjztj/gd',
+		methods: 'get',
+		params
+	})
 }

app/src/components/SearchBox.vue

@@ -1,5 +1,7 @@
 <script>
 import { area } from '@/api/area'
+import { getJdjcUnit } from "@/api/index.js";
+import { throttle } from '@zhgkpt/utils'
 
 export default {
   name: "SearchBox",
@@ -28,13 +30,36 @@ export default {
         this.searchValue = val
       },
       immediate: true
+    },
+    searchValue: {
+      handler(val) {
+        throttle(() => {
+          if (val === "") {
+          this.result = []
+          return;
+          }
+          getJdjcUnit({
+          pageNum: 1,
+          pageSize: 10,
+          qx: this.areaValue === "重庆市" ? "" : this.areaValue,
+            gcjzmc: val,
+          }).then((res) => {
+            this.result = res.data.rows;
+            this.total = res.data.total
+            this.activeIndex = -1;
+          });
+        })()
+      },
     }
   },
   data() {
     return {
       areaData: [],
       areaValue: '',
-      searchValue: ''
+      searchValue: '',
+      result: [],
+      total: 0,
+      activeIndex: -1,
     }
   },
   created() {
@@ -55,11 +80,28 @@ export default {
         this.$emit('update:area', value)
       }
     },
-    clickSearchHandler() {
-      this.$emit('search', {
-        value: this.searchValue,
-        area: this.areaDetail
-      })
+    toDetail(item) {
+      this.$router.push(`/detail?id=${item.id}`);
+    },
+    toNextNode() {
+      const temp = this.activeIndex + 1
+      if (temp === this.result.length) {
+        this.activeIndex = 0
+      } else {
+        this.activeIndex++
+      }
+    },
+    toPrevNode() {
+      const temp = this.activeIndex -1
+      if (temp === -1) {
+        this.activeIndex = this.result.length - 1
+      } else {
+        this.activeIndex--
+      }
+    },
+    enterToDetail() {
+      if (this.activeIndex < 0 || this.activeIndex >= this.result.length) return
+      this.toDetail(this.result[this.activeIndex])
     }
   }
 }
@@ -67,11 +109,20 @@ export default {
 
 <template >
   <div class="search-box">
-    <el-select placeholder="区域" :value="areaValue" @change="changeAreaHandler">
+    <el-select style="width: 150px;" placeholder="区域" :value="areaValue" @change="changeAreaHandler">
       <el-option  :value="item.areaTitle" :label="item.areaTitle" v-for="(item,index) in areaData" :key="index" ></el-option>
     </el-select>
-    <el-input v-model="searchValue" class="search-box-input" placeholder="请输入所要搜索的建筑名称"></el-input>
-    <el-button @click="clickSearchHandler">搜索</el-button>
+    <div style="position: relative;">
+      <el-input @keyup.enter.native="enterToDetail()"  @keyup.up.native="toPrevNode" @keyup.down.native="toNextNode" v-model="searchValue" class="search-box-input" placeholder="请输入所要搜索的建筑名称"></el-input>
+      <div class="search-result" v-if="result.length > 0" >
+        <div class="search-result__item" :class="{
+          active: (index === activeIndex)
+        }" @click="toDetail(item)" v-for="(item,index) in result" :key="index">
+          {{ item.gcjzmc }}
+        </div>
+        <div class="search-result__item" v-if="total !== result.length">...</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -112,24 +163,31 @@ export default {
     }
   }
 
+  .search-result {
+    background-size: 100% 100%;
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    color: #9BC3FF;
+    background-color: #132444aa;
+    .search-result__item {
+      padding: 8px;
+      font-size: 18px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:hover,&.active {
+        background-color: rgba(0, 213, 255, 0.3);
+        cursor: pointer;
+        color: #fff;
+      }
+    }
+  }
   ::v-deep(.el-button) {
     border: none;
     width: 120px;
     height: 40px;
     color: #9BC3FF;
-    background: url('../assets/images/border.png') no-repeat;
-    background-size: 100% 100%;
-    background-color: transparent;
-    display: flex;
-    &::after {
-      content: "";
-      display: inline-block;
-      background: url("../assets/images/search-box-icon.png") no-repeat;
-      width: 20px;
-      height: 20px;
-      margin-left: 5px;
-      margin-top: 2px;
-    }
   }
 }
 </style>

app/src/mixin/unit.js

@@ -95,8 +95,8 @@ const punishmentMixin = {
       //高度
       higthList:[
           {
-          value: "30m及以下",
-          label: "30m及以下",
+          value: "30米及以下",
+          label: "30米及以下",
         },
         {
             value: "30-50米（含）",
@@ -107,11 +107,11 @@ const punishmentMixin = {
             label: "50-80米（含）",
           },
           {
-            value: "80-100米",
+            value: "80-100米含）",
             label: "80-100米",
           },
           {
-            value: "100米以上",
+            value: "100米以上含）",
             label: "100米以上",
           },
       ],

app/src/views/Basic/components/ChronologicDistributionStatistics.vue

@@ -28,7 +28,7 @@ export default {
     },
   },
   methods: {
-	  showFlag: 1,
+	  // showFlag: 1,
     initChart(val) {
       const chart = echarts.init(this.$refs.chronologicDistributionChart);
       // const list = [{

app/src/views/Basic/components/jcxxCont.vue

@@ -1,391 +1,526 @@
 <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;
-			});
-		},
-	};
+import { area } from "@/api/area";
+import { getGcjztjTc, getGcjztjNdTc, getGcjztjGdTc } from "@/api/basicInfor.js";
+import { Loading } from "element-ui";
+export default {
+  data() {
+    return {
+      options: [],
+      gdList: [],
+      ndList: [],
+      tableData: [],
+      unitList: [],
+      value: "重庆市",
+      params: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      params2: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      params3: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      total: 0,
+      total2: 0,
+      total3: 0,
+      showFlag: 1,
+      Loading3: false,
+    };
+  },
+  props: {
+    qy: String,
+	flagVal:Number
+  },
+  watch: {
+    qy: {
+      handler(val) {
+        this.value = val;
+        //   this.handUnitList();
+      },
+      immediate: true,
+      deep: true,
+    },
+	flagVal:{
+		handler(nv) {
+        this.showFlag = nv;
+        //   this.handUnitList();
+      },
+      immediate: true,
+      deep: true,
+	}
+  },
+  methods: {
+    resetForm() {
+      this.value = "";
+	  this.search()
+    //   this.params = {
+    //     pageSize: 10,
+    //     pageNum: 1,
+    //   };
+    },
+    //建筑统计
+    funUnitList() {
+      getGcjztjTc({
+        ...this.params,
+        qx: this.value === "重庆市" ? "" : this.value,
+      }).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();
+    },
+    handleSizeChange2(val) {
+      this.params2.pageSize = val;
+      this.funHigthList();
+    },
+    handleCurrentChange2(val) {
+      this.params2.pageNum = val;
+      this.funHigthList();
+    },
+    handleSizeChange3(val) {
+      this.params3.pageSize = val;
+      this.funYearList();
+    },
+    handleCurrentChange3(val) {
+      this.params3.pageNum = val;
+      this.funYearList();
+    },
+    // 高度
+    funYearList() {
+      this.Loading3 = true;
+      getGcjztjNdTc({
+        ...this.params3,
+        qx: this.value === "重庆市" ? "" : this.value,
+      }).then((res) => {
+        this.gdList = res.data.rows;
+        this.Loading3 = false;
+        this.total3 = res.data.total;
+      });
+    },
+    // 年代
+    funHigthList() {
+      getGcjztjGdTc({
+        ...this.params2,
+        qx: this.value === "重庆市" ? "" : this.value,
+      }).then((res) => {
+        this.ndList = res.data.rows;
+        this.total2 = res.data.total;
+      });
+    },
+    changeList(val) {
+      this.showFlag = val;
+      this.search();
+    },
+    addClass(i) {
+      return this.showFlag === i ? "active" : "tab-item";
+    },
+    // 搜索
+    search() {
+      if (this.showFlag == 1) {
+        this.params.pageNum = 1;
+        this.funUnitList();
+      }
+      if (this.showFlag == 2) {
+        this.params2.pageNum = 1;
+        this.funHigthList();
+      }
+      if (this.showFlag == 3) {
+        this.params3.pageNum = 1;
+        this.funYearList();
+      }
+    },
+  },
+  created() {
+    this.funUnitList();
+    this.funYearList();
+    this.funHigthList();
+    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="序号">
-				</el-table-column>
-				<el-table-column prop="qx" label="30m及以下（栋）" show-overflow-tooltip>
-				</el-table-column>
-				<el-table-column prop="gcjzmc" label="30-50米（含）（栋）" show-overflow-tooltip>
-				</el-table-column>
-				<el-table-column prop="xxdz" label="50-80米（含）（栋）" show-overflow-tooltip>
-				</el-table-column>
-				<el-table-column prop="xxdz" label="80-100米（含）" show-overflow-tooltip>
-				</el-table-column>
-				<el-table-column prop="xxdz" label="100米以上" 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="超高层建筑" 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>
-				<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>
-				<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="2000年前（栋）" show-overflow-tooltip>
-				</el-table-column>
-				<el-table-column prop="xxdz" label="2001-2010年（栋）" show-overflow-tooltip>
-				</el-table-column>
-				<el-table-column prop="xxdz" label="2011-2020年（栋）" show-overflow-tooltip>
-				</el-table-column>
-				<el-table-column prop="xxdz" label="2021年后（栋）" 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>
+  <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 class="btn-item">
+          <el-button @click="search">搜索</el-button>
+          <el-button @click="resetForm">重置</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 高度 -->
+    <div v-if="showFlag === 3">
+      <basic-table :data="gdList" 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="type30m及以下"
+          label="30米及以下（栋）"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="type30_50"
+          label="30-50米（含）（栋）"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="type50_80"
+          label="50-80米（含）（栋）"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="type80_100"
+          label="80-100米（含）"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="type100m以上"
+          label="100米以上"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </basic-table>
+    </div>
+    <!-- 建筑类型 -->
+    <div v-if="showFlag === 1">
+      <basic-table :data="tableData" 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="qx" label="高层建筑(栋)" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column
+          prop="超高层建筑"
+          label="超高层建筑"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="高层公共建筑"
+          label="高层公共建筑"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="高层住宅建筑"
+          label="高层住宅建筑"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="一类高层公共建筑"
+          label="一类高层公共建筑"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="二类高层公共建筑"
+          label="二类高层公共建筑"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="一类高层居住建筑"
+          label="一类高层住宅建筑"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="二类高层住宅建筑"
+          label="二类高层住宅建筑"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="高层工业建筑"
+          label="高层工业建筑"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </basic-table>
+    </div>
+    <!-- 年代 -->
+    <div v-if="showFlag === 2">
+      <basic-table :data="ndList" 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="2000年前"
+          label="2000年前（栋）"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="2001_2010年"
+          label="2001-2010年（栋）"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="2011_2020年"
+          label="2011-2020年（栋）"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="2021年后"
+          label="2021年后（栋）"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </basic-table>
+    </div>
+    <br />
+    <!--  -->
+    <div v-if="showFlag === 1">
+      <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>
+    <div v-if="showFlag === 2">
+      <basic-pagination
+        layout="->,prev, pager, next, sizes,jumper"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="params2.pageSize"
+        :current-page="params2.PageNum"
+        :total="total2"
+        @size-change="handleSizeChange2"
+        @current-change="handleCurrentChange2"
+      />
+    </div>
+    <div v-if="showFlag === 3">
+      <basic-pagination
+        layout="->,prev, pager, next, sizes,jumper"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="params3.pageSize"
+        :current-page="params3.PageNum"
+        :total="total3"
+        @size-change="handleSizeChange3"
+        @current-change="handleCurrentChange3"
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped lang="less">
-	.maintenance-supervision {
-		display: flex;
-		align-items: center;
+.maintenance-supervision {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  // 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;
+  }
 
-		// 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;
+  }
 
-		::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;
+    // }
+  }
 
-		.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;
+  }
 
-		.btn-item {
-			margin-bottom: 10px;
-		}
+  .warp {
+    height: 520px;
+    margin: 0 auto;
+    overflow: hidden;
 
-		.warp {
-			height: 520px;
-			margin: 0 auto;
-			overflow: hidden;
+    .item {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+  }
 
-			.item {
-				list-style: none;
-				padding: 0;
-				margin: 0 auto;
-				cursor: pointer;
-			}
-		}
+  /deep/.el-input__inner {
+    background-color: #184254;
+    width: 150px;
+    height: 43px;
+    margin-bottom: 5px;
+    font-size: 16px;
+  }
 
-		/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 {
-			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/.el-button:hover {
-			color: rgb(80, 147, 224);
-		}
+  /deep/.select_btn {
+    position: absolute;
+    top: 225px;
+    right: 320px;
+    //下拉框
+  }
 
-		/deep/.select_btn {
-			position: absolute;
-			top: 225px;
-			right: 320px;
-			//下拉框
-		}
+  /deep/.el-input {
+    width: 150px;
+    // margin-left: 20px;
+  }
 
-		/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;
+  }
 
-		.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);
 
-		.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;
+    }
 
-			.time,
-			.num,
-			.person,
-			.result {
-				flex: 0.33;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
+    .num {
+      flex: 0.15;
+    }
+  }
 
-			.num {
-				flex: 0.15;
-			}
-		}
+  .inp {
+    margin-left: 20px;
+  }
+}
 
-		.inp {
-			margin-left: 20px;
-		}
-	}
+.unit-bulid {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
 
-	.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;
+}
 
-	.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;
+}
 
-	.tab {
-		display: flex;
-	}
-
-	.active {
-		background: #0463a7 !important;
-	}
+.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>
+.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/Basic/index.vue

@@ -1,13 +1,13 @@
 <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="310px" style="margin-bottom: 6px" title="高层建筑统计" @click="openBasicModal">
+			<border-panel height="310px" style="margin-bottom: 6px" title="高层建筑统计" @click="openBasicModal(1)">
 				<BuildNum :list="gcjztjList" :qy="qy" v-if="gcjztjList && gcjztjList.length > 0" />
 			</border-panel>
-			<border-panel height="320px" style="margin-bottom: 6px" title="年代分布统计">
+			<border-panel height="320px" style="margin-bottom: 6px" title="年代分布统计" @click="openBasicModal(2)">
 				<ChronologicDistributionStatistics :list="NdfbtjList" v-if="NdfbtjList && NdfbtjList.length > 0" />
 			</border-panel>
-			<border-panel height="310px" title="高度分布统计">
+			<border-panel height="310px" title="高度分布统计" @click="openBasicModal(3)">
 				<HeightDistribution :list="gdfbtjList" v-if="gdfbtjList && gdfbtjList.length > 0" />
 			</border-panel>
 		</div>
@@ -34,7 +34,7 @@
 			</border-panel>
 		</div>
 		<basic-modal top="120px" ref="basicInfoModal" name="高层基础信息">
-			<jcxxCont :qy="qy" />
+			<jcxxCont :qy="qy" :flagVal="flagVal" />
 		</basic-modal>
 	</div>
 </template>
@@ -57,10 +57,6 @@
 		getGcjztj,
 		getGdfbtj,
 	} from "@/api/basicInfor.js";
-	// import { getQyfbList } from "@/api/basicInfor.js";
-	// import { getNdfbtj } from "@/api/basicInfor.js";
-	// import { getGcjztj } from "@/api/basicInfor.js";
-	// import { getGdfbtj } from "@/api/basicInfor.js";
 	export default {
 		name: "BasicPage",
 		components: {
@@ -85,6 +81,7 @@
 				NdfbtjList: [],
 				gcjztjList: [],
 				gdfbtjList: [],
+				flagVal:1
 			};
 		},
 		watch: {
@@ -93,7 +90,8 @@
 			},
 		},
 		methods: {
-			openBasicModal() {
+			openBasicModal(val) {
+				this.flagVal=val
 				this.showModal("basicInfoModal");
 			},
 			getList() {

app/src/views/Fire/index.vue

@@ -9,8 +9,11 @@
 			</border-panel>
 		</div>
 		<div>
-			<div style="width: 900px; height: 1000px; display: flex;justify-content: center; margin-top: 150px;">
+			<div style="width: 900px; height: 1000px; display: flex;position: relative;justify-content: center; padding-top: 150px;">
 				<MapCharts :qx="qx" @selectArea="area => qx = area" />
+				<div style="position: absolute; width: 500px; top: 10px; left: -20px">
+					<SearchBox :area.sync="qx" />
+				</div>
 			</div>
 		</div>
 		<div>
@@ -30,7 +33,7 @@
 	import Construction from "./components/Construction.vue";
 	import ManagementContent from "./components/ManagementContent.vue";
 	import MapCharts from "../Home/components/MapCharts.vue";
-
+	import SearchBox from '@/components/SearchBox.vue';
 	import {
 		getGlzts,
 		getWbxxs,
@@ -46,7 +49,7 @@
 			Construction,
 			ManagementContent,
 			MapCharts,
-
+			SearchBox
 		},
 		data() {
 			return {
@@ -135,4 +138,4 @@
 	};
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>

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

@@ -40,6 +40,11 @@ export default {
       immediate: true,
       deep: true,
     },
+    value: {
+      handler() {
+        this.handUnitList()
+      }
+    }
   },
   methods: {
     rowClickHandler(val) {
@@ -152,6 +157,9 @@ export default {
             </el-option>
           </el-select>
         </div>
+        <div class="inp">
+          <el-input v-model="search" placeholder="请输入建筑名称"></el-input>
+        </div>
         <!-- 建筑分类 -->
         <div>
           <el-select v-model="params.dl" placeholder="建筑分类">
@@ -201,7 +209,7 @@ export default {
           </el-select>
         </div>
         <!-- 管理主体 -->
-        <div>
+        <!-- <div>
           <el-select v-model="params.glzthztjzd" placeholder="管理主体">
             <el-option
               :value="item.value"
@@ -211,7 +219,7 @@ export default {
             >
             </el-option>
           </el-select>
-        </div>
+        </div> -->
         <!-- 维保形式 -->
         <div>
           <el-select v-model="params.sfywbdw" placeholder="维保形式">
@@ -236,9 +244,7 @@ export default {
             </el-option>
           </el-select>
         </div>
-        <div class="inp">
-          <el-input v-model="search" placeholder="请输入建筑名称"></el-input>
-        </div>
+     
       </div>
       <div class="btn-item">
         <el-button @click="funUnitList">搜索</el-button>

utils/index.js

@@ -40,3 +40,28 @@ export function getState(bn, tq) {
     return 0;
   }
 }
+
+
+export const throttle = (func, wait = 1000, type = 1) => {
+	let previous = 0;
+	let timeout;
+	return function () {
+		let context = this;
+		let args = arguments;
+		if (type === 1) {
+			let now = Date.now();
+
+			if (now - previous > wait) {
+				func.apply(context, args);
+				previous = now;
+			}
+		} else if (type === 2) {
+			if (!timeout) {
+				timeout = setTimeout(() => {
+					timeout = null;
+					func.apply(context, args)
+				}, wait)
+			}
+		}
+	}
+}