弹窗

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

@@ -0,0 +1,391 @@
+<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="序号">
+				</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>
+</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/Basic/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
 		<div>
-			<border-panel height="310px" style="margin-bottom: 6px" title="高层建筑统计">
+			<border-panel height="310px" style="margin-bottom: 6px" title="高层建筑统计" @click="openBasicModal">
 				<BuildNum :list="gcjztjList" :qy="qy" v-if="gcjztjList && gcjztjList.length > 0" />
 			</border-panel>
 			<border-panel height="320px" style="margin-bottom: 6px" title="年代分布统计">
@@ -37,6 +37,9 @@
         />
       </border-panel>
     </div>
+	<basic-modal top="120px" ref="basicInfoModal" name="高层基础信息">
+	  <jcxxCont :qy="qy" />
+	</basic-modal>
   </div>
 </template>
 <script>
@@ -47,6 +50,7 @@
 	import ChronologicDistributionStatistics from "./components/ChronologicDistributionStatistics.vue";
 	import MapCharts from "../Home/components/MapCharts.vue";
 	import SearchBox from "@/components/SearchBox.vue";
+	import jcxxCont from "./components/jcxxCont.vue";
 	import {
 		toFirst
 	} from '../../utils'
@@ -71,6 +75,7 @@
 			ChronologicDistributionStatistics,
 			MapCharts,
 			SearchBox,
+			jcxxCont
 		},
 		data() {
 			return {

app/src/views/Fire/index.vue

@@ -1,150 +1,138 @@
 <template>
-  <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"  />
-      </border-panel>
-      <border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
-        <ManagementContent :qx="qx" />
-      </border-panel>
-    </div>
-    <div>
-      <div style="width: 900px; height: 1000px; display: flex;justify-content: center; margin-top: 150px;">
-        <MapCharts :qx="qx" @selectArea="area => qx = area" />
-      </div>
-    </div>
-    <div>
-      <border-panel
-        height="521px"
-        style="margin-bottom: 6px"
-        title="建筑管理单位分布"
-      >
-        <Management :gldListL="gldListL" :JzrzdList="JzrzdList" :wbdwList="wbdwList" />
-      </border-panel>
-      <border-panel
-        height="421px"
-        style="margin-bottom: 6px"
-        title="建筑管理单位信息"
-      >
-        <UnitInfo :qx="qx"/>
-      </border-panel>
-    </div>
-   
-  </div>
+	<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" />
+			</border-panel>
+			<border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
+				<ManagementContent :qx="qx" />
+			</border-panel>
+		</div>
+		<div>
+			<div style="width: 900px; height: 1000px; display: flex;justify-content: center; margin-top: 150px;">
+				<MapCharts :qx="qx" @selectArea="area => qx = area" />
+			</div>
+		</div>
+		<div>
+			<border-panel height="521px" style="margin-bottom: 6px" title="建筑管理单位分布">
+				<Management :gldListL="gldListL" :JzrzdList="JzrzdList" :wbdwList="wbdwList" />
+			</border-panel>
+			<border-panel height="421px" style="margin-bottom: 6px" title="建筑管理单位信息">
+				<UnitInfo :qx="qx" />
+			</border-panel>
+		</div>
+
+	</div>
 </template>
 <script>
-import Management from "./components/Management.vue";
-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 Management from "./components/Management.vue";
+	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,
+		getGldwgljzpm,
+		getJzrzdwpms,
+		getWbdwgljzpm,
+	} from "@/api/management.js";
+	export default {
+		name: "FirePage",
+		components: {
+			Management,
+			UnitInfo,
+			Construction,
+			ManagementContent,
+			MapCharts,
+
+		},
+		data() {
+			return {
+				glztList: [],
+				wbxsList: [],
+				gldListL: [],
+				JzrzdList: [],
+				ZjglList: [],
+				wbdwList: [],
+				qx: "万州区",
+				params: {
+					pageSize: 100,
+					pageNum: 1,
+				},
+			};
+		},
+		watch: {
+			qx() {
+				this.unitZt();
+				this.getWbxsList();
+				this.getDwfbList();
+				this.getDwpmList();
+				this.getWbdwList()
+			}
+		},
+		methods: {
+			// 管理主体
+			unitZt() {
+				getGlzts({
+					pageSize: 100,
+					pageNum: 1,
+					jzszqx: (this.qx === '重庆市' ? '' : this.qx),
+				}).then((res) => {
+					this.glztList = res.data.rows;
+				});
+			},
+			// 维保形式
+			getWbxsList() {
+				getWbxxs({
+					pageSize: 100,
+					pageNum: 1,
+					qx: (this.qx === '重庆市' ? '' : this.qx),
+				}).then((res) => {
+					this.wbxsList = res.data.rows;
+				});
+			},
+			// 单位分布
+			getDwfbList() {
+				getGldwgljzpm({
+					pageSize: 100,
+					pageNum: 1,
+					qx: (this.qx === '重庆市' ? '' : this.qx),
+				}).then((res) => {
+					this.gldListL = res.data.rows;
+				});
+			},
+			//入住单位排名
+			getDwpmList() {
+				getJzrzdwpms({
+					pageSize: 100,
+					pageNum: 1,
+					jzszqx: (this.qx === '重庆市' ? '' : this.qx),
+				}).then((res) => {
+					this.JzrzdList = res.data.rows;
+				});
+			},
+			//维保单位
+			getWbdwList() {
+				getWbdwgljzpm({
+					pageSize: 100,
+					pageNum: 1,
+					qx: (this.qx === '重庆市' ? '' : this.qx),
+				}).then((res) => {
+					this.wbdwList = res.data.rows;
+				});
+			},
 
-import {
-  getGlzts,
-  getWbxxs,
-  getGldwgljzpm,
-  getJzrzdwpms,
-  getWbdwgljzpm,
-} from "@/api/management.js";
-export default {
-  name: "FirePage",
-  components: {
-    Management,
-    UnitInfo,
-    Construction,
-    ManagementContent,
-    MapCharts,
-    
-  },
-  data() {
-    return {
-      glztList: [],
-      wbxsList: [],
-      gldListL: [],
-      JzrzdList: [],
-      ZjglList: [],
-      wbdwList: [],
-      qx: "万州区",
-      params: {
-        pageSize: 100,
-        pageNum: 1,
-      },
-    };
-  },
-  watch: {
-    qx() {
-      this.unitZt();
-      this.getWbxsList();
-      this.getDwfbList();
-      this.getDwpmList();
-      this.getWbdwList()
-    }
-  },
-  methods: {
-    // 管理主体
-    unitZt() {
-      getGlzts({
-        pageSize: 100,
-        pageNum: 1,
-        jzszqx: (this.qx === '重庆市' ? '' : this.qx ),
-      }).then((res) => {
-        this.glztList = res.data.rows;
-      });
-    },
-    // 维保形式
-    getWbxsList() {
-      getWbxxs({
-        pageSize: 100,
-        pageNum: 1,
-        qx: (this.qx === '重庆市' ? '' : this.qx ),
-      }).then((res) => {
-        this.wbxsList = res.data.rows;
-      });
-    },
-    // 单位分布
-    getDwfbList() {
-      getGldwgljzpm({
-        pageSize: 100,
-        pageNum: 1,
-        qx: (this.qx === '重庆市' ? '' : this.qx ),
-      }).then((res) => {
-        this.gldListL = res.data.rows;
-      });
-    },
-    //入住单位排名
-    getDwpmList() {
-      getJzrzdwpms({
-        pageSize: 100,
-        pageNum: 1,
-        jzszqx: (this.qx === '重庆市' ? '' : this.qx ),
-      }).then((res) => {
-        this.JzrzdList = res.data.rows;
-      });
-    },
-    //维保单位
-    getWbdwList() {
-		getWbdwgljzpm({
-        pageSize: 100,
-        pageNum: 1,
-        qx: (this.qx === '重庆市' ? '' : this.qx ),
-      }).then((res) => {
-        this.wbdwList = res.data.rows;
-      });
-    },
-  
-  },
-  created() {
-    this.unitZt();
-    this.getWbxsList();
-    this.getDwfbList();
-    this.getDwpmList();
-	this.getWbdwList()
-  },
-};
+		},
+		created() {
+			this.unitZt();
+			this.getWbxsList();
+			this.getDwfbList();
+			this.getDwpmList();
+			this.getWbdwList()
+		},
+	};
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>

app/src/views/Risk/components/fxfbCont.vue

@@ -0,0 +1,425 @@
+<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: "",
+      // 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();
+    },
+  },
+  created() {
+    this.funUnitList();
+    this.handUnitList();
+    area({
+      pageNum: 1,
+      pageSize: 100,
+    }).then((res) => {
+      this.options = res.data.rows;
+    });
+  },
+};
+</script>
+
+<template>
+  <div>
+    <!-- 建筑数 -->
+    <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> -->
+        <LinearText
+          style="display: inline-block"
+          :text="item.unitNum"
+          fontSize="40px"
+        ></LinearText>
+      </div>
+    </div>
+    <!-- 搜索 -->
+    <div class="maintenance-supervision">
+      <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>
+          <el-select v-model="params.jzdx" placeholder="建筑分类">
+            <el-option
+              :value="item.value"
+              :label="item.label"
+              v-for="(item, index) in TypeList"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 年代 -->
+        <div>
+          <el-select v-model="params.jcnd" placeholder="年代">
+            <el-option
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in yearList"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 高度 -->
+        <div>
+          <el-select v-model="params.gd" placeholder="高度">
+            <el-option
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in higthList"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 管理形式 -->
+        <div>
+          <el-select v-model="params.xfaqglxs" placeholder="管理形式">
+            <el-option
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in mentList"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 管理主体 -->
+        <div>
+          <el-select v-model="params.glzthztjzd" placeholder="管理主体">
+            <el-option
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in glList"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 维保形式 -->
+        <div>
+          <el-select v-model="params.wbxs" placeholder="维保形式">
+            <el-option
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in wbList"
+              :key="index"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- 风险等级 -->
+        <div>
+          <el-select v-model="params.fxdj" placeholder="风险等级">
+            <el-option
+              :value="item.value"
+              :label="item.lable"
+              v-for="(item, index) in fxdjLlst"
+              :key="index"
+            >
+            </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>
+        <el-button @click="resetForm">重置</el-button>
+      </div>
+    </div>
+
+    <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>
+      <!-- 新增 -->
+      <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
+      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 {
+  // 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;
+  }
+  /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;
+}
+</style>

app/src/views/Risk/components/fxyjCont.vue

@@ -0,0 +1,467 @@
+<script>
+	import {
+		getJdjcUnit,
+		getGcjztjUnit
+	} from "@/api/index.js";
+	import {
+		area
+	} from "@/api/area";
+	import punishmentMixin from "@/mixin/unit.js";
+	export default {
+		name: "fxyjCont",
+		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>
+				<span class="tab-item" @click="changeList(4)" :class="addClass(4)">用电用气隐患</span>
+				<span class="tab-item" @click="changeList(5)" :class="addClass(5)">消防管理隐患</span>
+				<span class="tab-item" @click="changeList(6)" :class="addClass(6)">隐患整改</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===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="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>
+			</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="火灾自动报警系统（个）" 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===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="区县" 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>
+			</basic-table>
+		</div>
+		<div v-if="showFlag===4">
+			<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>
+			</basic-table>
+		</div>
+		<div v-if="showFlag===5">
+			<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>
+				<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===6">
+			<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="15日到期隐患数（个）" show-overflow-tooltip>
+				</el-table-column>
+				<el-table-column prop="xxdz" label="30日到期隐患数（个）" show-overflow-tooltip>
+				</el-table-column>
+				<el-table-column prop="xxdz" label="60日到期隐患数（个）" show-overflow-tooltip>
+				</el-table-column>
+				<el-table-column prop="xxdz" label="限期2023年底整改数量（个）" show-overflow-tooltip>
+				</el-table-column>
+				<el-table-column prop="xxdz" label="限期2024年底整改数量（个）" show-overflow-tooltip>
+				</el-table-column>
+				<el-table-column prop="xxdz" label="限期2025年底整改数量（个）" 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/Risk/index.vue

@@ -1,73 +1,80 @@
+<template>
+	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
+		<div>
+			<border-panel height="310px" style="margin-bottom: 6px" title="总体展示" @click="openBasicModal">
+				<Totality :qx="qx" />
+			</border-panel>
+			<border-panel height="320px" style="margin-bottom: 6px" title="排查统计">
+				<Investigation :qx="qx" />
+			</border-panel>
+			<border-panel height="310px" title="整改统计">
+				<Rectification :qx="qx" />
+			</border-panel>
+		</div>
+		<div>
+			<div style="width: 950px; height: 1000px; display: flex; padding-top: 150px;position: relative;">
+				<MapCharts :qx="qx" @selectArea="area => qx = area" />
+				<div style="position: absolute;width: 500px; left: 0px;top: 10px;">
+					<search-box :area.sync="qx" />
+				</div>
+			</div>
+		</div>
+		<div>
+			<border-panel height="521px" style="margin-bottom: 6px" title="风险分布" @click="openBasicModal1">
+				<Riskdistribution :qx="qx" />
+			</border-panel>
+			<border-panel height="421px" style="margin-bottom: 6px" title="风险隐患">
+				<RiskDanger :qx="qx" />
+			</border-panel>
+		</div>
+		<basic-modal top="120px" ref="basicInfoModal" name="风险隐患信息">
+			<fxyjCont :qx="qx" />
+		</basic-modal>
+		<basic-modal top="120px" ref="basicInfoModal1" name="一楼一策隐患整治清单">
+			<fxfbCont :qx="qx" />
+		</basic-modal>
+	</div>
+</template>
+<script>
+	import Totality from './components/Totality.vue'
+	import Investigation from './components/Investigation.vue';
+	import Rectification from './components/Rectification.vue'
+	import Riskdistribution from './components/Riskdistribution.vue';
+	import RiskDanger from './components/RiskDanger.vue';
+	import SearchBox from '@/components/SearchBox.vue';
+	import MapCharts from "../Home/components/MapCharts.vue";
+	import fxyjCont from './components/fxyjCont.vue';
+	import fxfbCont from './components/fxfbCont.vue';
 
-<template >
-    <div style="padding: 0px 35px; display: flex; justify-content: space-between"
-        >
-        <div>
-            <border-panel
-              height="310px"
-              style="margin-bottom: 6px"
-              title="总体展示"
-            >
-            <Totality :qx="qx"/>
-            </border-panel>
-            <border-panel
-              height="320px"
-              style="margin-bottom: 6px"
-              title="排查统计"
-            >
-          <Investigation :qx="qx"/>
-            </border-panel>
-            <border-panel height="310px" title="整改统计">
-           <Rectification :qx="qx"/>
-            </border-panel>
-          </div>
-        <div>
-          <div style="width: 950px; height: 1000px; display: flex; padding-top: 150px;position: relative;">
-            <MapCharts :qx="qx" @selectArea="area => qx = area" />
-            <div style="position: absolute;width: 500px; left: 0px;top: 10px;">
-              <search-box :area.sync="qx"/>
-            </div>
-          </div>
-        </div>
-        <div>
-          <border-panel
-              height="521px"
-              style="margin-bottom: 6px"
-              title="风险分布                "
-            > 
-          <Riskdistribution :qx="qx"/>
-            </border-panel>
-            <border-panel
-              height="421px"
-              style="margin-bottom: 6px"
-              title="风险隐患"
-            >
-              <RiskDanger :qx="qx"/>
-            </border-panel>
-        </div>
-    </div>
-  </template>
-  <script>
-    import Totality from './components/Totality.vue'
-    import Investigation from './components/Investigation.vue';
-    import Rectification from './components/Rectification.vue'
-    import Riskdistribution from './components/Riskdistribution.vue';
-    import RiskDanger from './components/RiskDanger.vue';
-    import SearchBox from '@/components/SearchBox.vue';
-    import MapCharts from "../Home/components/MapCharts.vue";
+	export default {
+		name: 'RiskPage',
+		components: {
+			Totality,
+			Investigation,
+			Rectification,
+			Riskdistribution,
+			RiskDanger,
+			SearchBox,
+			MapCharts,
+			fxyjCont,
+			fxfbCont
+		},
+		data() {
+			return {
+				qx: '重庆市'
+			}
+		},
+		methods: {
+			openBasicModal() {
+				this.showModal("basicInfoModal");
+			},
+			openBasicModal1() {
+				this.showModal("basicInfoModal1");
+			}
+		}
+	}
+</script>
 
-  export default {
-    name: 'RiskPage',
-    components:{Totality,Investigation,Rectification,Riskdistribution,RiskDanger, SearchBox, MapCharts },
-    data() {
-      return {
-        qx: '重庆市'
-      }
-    }
-  }
-  </script>
-  
-  <style scoped lang='less'>
-  
-  </style>
-  
+<style scoped lang='less'>
+
+</style>