独栋

app/src/views/Detail/components/ZhxfModalContent.vue

@@ -1,366 +1,412 @@
 <script>
-	import {
-		getZhxf
-	} from "@/api/iot.js";
-	import punishmentMixin from "@/mixin/unit.js";
-	import {
-		area
-	} from "@/api/area";
-	import moment from "moment";
-	export default {
-		name: "QhyyModalContent",
-		mixins: [punishmentMixin],
-		data() {
-			return {
-				options1: [{
-						value: '生命通道监测',
-						label: '生命通道监测'
-					},
-					{
-						value: '电气火灾终端',
-						label: '电气火灾终端'
-					},
-					{
-						value: '水压监测终端',
-						label: '水压监测终端'
-					},
-					{
-						value: '火灾报警',
-						label: '火灾报警'
-					},
-					{
-						value: '消防控制室监控',
-						label: '消防控制室监控'
-					},
-				],
-				options2: [{
-						value: '在线',
-						label: '在线'
-					},
-					{
-						value: '离线',
-						label: '离线'
-					},
-				],
-				options: [],
-				fxdjList: [],
-				tableData: [],
-				unitList: [],
-				zqsj: null,
-				params: {
-					pageSize: 10,
-					pageNum: 1,
-					qx: null,
-					sblx: null,
-					zt: null,
-					gcjzmc: null
-				},
-				total: 0,
-				search: "",
-			};
-		},
-		props: {
-			qy: String,
-			default: Object,
-		},
-		watch: {
-			default: {
-				handler() {
-					console.log(this.params);
-					const params = JSON.parse(JSON.stringify(this.params));
-					// params.sblx = this.default.sblx;
-					// params.gcjzmc = this.default.gcjzmc;
-					this.params = params;
-					this.funList();
-				},
-				immediate: true,
-				deep: true,
-			},
-		},
-		methods: {
-			funList() {
-				getZhxf({
-					params,
-				}).then((res) => {
-					this.tableData = res.data.rows;
-					this.total = res.data.total;
-				});
-			},
-			handleSizeChange(val) {
-				this.params.pageSize = val;
-				this.funList();
-			},
-			handleCurrentChange(val) {c
-				this.params.pageNum = val;
-				this.funList();
-			},
-			resetForm() {
-				this.params = {
-					pageSize: 10,
-					pageNum: 1,
-					qx: null,
-					sblx: null,
-					zt: null,
-					gcjzmc: null
-				};
-				this.funList();
-			},
-		},
-		created() {
-			console.log(this.params);
-			const params = JSON.parse(JSON.stringify(this.params));
-			// params.sblx = this.default.sblx;
-			// params.gcjzmc = this.default.gcjzmc;
-			// this.params = params;
+import { getZhxf } from "@/api/iot.js";
+import punishmentMixin from "@/mixin/unit.js";
+import { area } from "@/api/area";
+import moment from "moment";
+export default {
+  name: "QhyyModalContent",
+  mixins: [punishmentMixin],
+  data() {
+    return {
+      options1: [
+        {
+          value: "生命通道监测",
+          label: "生命通道监测",
+        },
+        {
+          value: "电气火灾终端",
+          label: "电气火灾终端",
+        },
+        {
+          value: "水压监测终端",
+          label: "水压监测终端",
+        },
+        {
+          value: "火灾报警",
+          label: "火灾报警",
+        },
+        {
+          value: "消防控制室监控",
+          label: "消防控制室监控",
+        },
+      ],
+      options2: [
+        {
+          value: "在线",
+          label: "在线",
+        },
+        {
+          value: "离线",
+          label: "离线",
+        },
+      ],
+      options: [],
+      fxdjList: [],
+      tableData: [],
+      unitList: [],
+      zqsj: null,
+      params: {
+        pageSize: 10,
+        pageNum: 1,
+        qx: null,
+        sblx: null,
+        zt: null,
+        gcjzmc: null,
+      },
+      total: 0,
+      search: "",
+    };
+  },
+  props: {
+    qy: String,
+    default: Object,
+  },
+  watch: {
+    default: {
+      handler() {
+        console.log(this.default);
+        const params = JSON.parse(JSON.stringify(this.default));
+        // params.sblx = this.default.sblx;
+        // params.gcjzmc = this.default.gcjzmc;
+        this.params = params;
+        this.funList();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    funList() {
+      getZhxf(this.params).then((res) => {
+        this.tableData = res.data.rows;
+        this.total = res.data.total;
+      });
+    },
+    handleSizeChange(val) {
+      this.params.pageSize = val;
+      this.funList();
+    },
+    handleCurrentChange(val) {
+      c;
+      this.params.pageNum = val;
+      this.funList();
+    },
+    resetForm() {
+      this.params = {
+        pageSize: 10,
+        pageNum: 1,
+        qx: null,
+        sblx: null,
+        zt: null,
+        gcjzmc: null,
+      };
+      this.funList();
+    },
+  },
+  created() {
+    console.log(this.default);
+    const params = JSON.parse(JSON.stringify(this.default));
+    // params.sblx = this.default.sblx;
+    // params.gcjzmc = this.default.gcjzmc;
+    // this.params = params;
 
-			// 查询区域
-			area({
-				pageNum: 1,
-				pageSize: 100,
-			}).then((res) => {
-				this.options = res.data.rows;
-			});
-			this.funList();
-		},
-	};
+    // 查询区域
+    area({
+      pageNum: 1,
+      pageSize: 100,
+    }).then((res) => {
+      this.options = res.data.rows;
+    });
+    this.funList();
+  },
+};
 </script>
 
 <template>
-	<div>
-		<!-- 搜索 -->
-		<div class="maintenance-supervision">
-			<div class="maintenance-supervision_header">
-				<el-form class="form" v-model="params">
-					<!-- 区县 -->
-					<el-form-item>
-						<el-select v-model="params.qx" placeholder="请选择">
-							<el-option :value="item.areaTitle" :label="item.areaTitle" v-for="(item, index) in options"
-								:key="index">
-							</el-option>
-						</el-select>
-					</el-form-item>
-					<!-- 建筑名称 -->
-					<el-form-item>
-						<div class="inp">
-							<el-input v-model="params.gcjzmc" placeholder="建筑名称(模糊)"></el-input>
-						</div>
-					</el-form-item>
-					<!-- 火灾报警主机监测 -->
-					<el-form-item>
-						<el-select v-model="params.sblx" placeholder="火灾报警主机监测">
-							<el-option :value="item.value" :label="item.label" v-for="(item, index) in options1"
-								:key="index">
-							</el-option>
-						</el-select>
-					</el-form-item>
-					<!-- 告警状态 -->
-					<el-form-item>
-						<el-select v-model="params.zt" placeholder="告警状态">
-							<el-option :value="item.value" :label="item.label" v-for="(item, index) in options2"
-								:key="index">
-							</el-option>
-						</el-select>
-					</el-form-item>
-				</el-form>
-				<div class="btn-item">
-					<el-button @click="funList">搜索</el-button>
-					<el-button @click="resetForm">重置</el-button>
-				</div>
-			</div>
-		</div>
+  <div>
+    <!-- 搜索 -->
+    <div class="maintenance-supervision">
+      <div class="maintenance-supervision_header">
+        <el-form class="form" v-model="params">
+          <!-- 区县 -->
+          <el-form-item>
+            <el-select v-model="params.qx" placeholder="请选择">
+              <el-option
+                :value="item.areaTitle"
+                :label="item.areaTitle"
+                v-for="(item, index) in options"
+                :key="index"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- 建筑名称 -->
+          <el-form-item>
+            <div class="inp">
+              <el-input
+                v-model="params.gcjzmc"
+                placeholder="建筑名称(模糊)"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <!-- 火灾报警主机监测 -->
+          <el-form-item>
+            <el-select v-model="params.sblx" placeholder="请选择">
+              <el-option
+                :value="item.value"
+                :label="item.label"
+                v-for="(item, index) in options1"
+                :key="index"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- 告警状态 -->
+          <el-form-item>
+            <el-select v-model="params.zt" placeholder="告警状态">
+              <el-option
+                :value="item.value"
+                :label="item.label"
+                v-for="(item, index) in options2"
+                :key="index"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div class="btn-item">
+          <el-button @click="funList">搜索</el-button>
+          <el-button @click="resetForm">重置</el-button>
+        </div>
+      </div>
+    </div>
 
-		<basic-table :data="tableData" style="text-align: center">
-			<el-table-column type="index" label="序号" width="60"> </el-table-column>
-			<el-table-column label="区域" width="100" prop="qx"></el-table-column>
-			<el-table-column prop="gcjzmc" label="建筑名称" min-width="230" show-overflow-tooltip>
-			</el-table-column>
-			<el-table-column prop="sblx" label="设备类型" show-overflow-tooltip min-width="120">
-			</el-table-column>
-			<el-table-column prop="sbmc" label="设备名称" show-overflow-tooltip>
-			</el-table-column>
-			<el-table-column props="ssxt" label="所属系统" show-overflow-tooltip>
-			</el-table-column>
-			<el-table-column props="wz" label="安装位置" show-overflow-tooltip>
-			</el-table-column>
-			<el-table-column props="jkz" label="监测值(%)" show-overflow-tooltip>
-			</el-table-column>
-			<el-table-column prop="ywzt" label="设备状态" show-overflow-tooltip min-width="150">
-			</el-table-column>
-			<el-table-column prop="zt" label="告警状态" show-overflow-tooltip align="center" min-width="100">
-			</el-table-column>
-			<el-table-column prop="cztt" label="处置状态" show-overflow-tooltip align="center" min-width="100">
-			</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>
+    <basic-table :data="tableData" style="text-align: center">
+      <el-table-column type="index" label="序号" width="60"> </el-table-column>
+      <el-table-column label="区域" width="100" prop="qx"></el-table-column>
+      <el-table-column
+        prop="gcjzmc"
+        label="建筑名称"
+        min-width="230"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="sblx"
+        label="设备类型"
+        show-overflow-tooltip
+        min-width="120"
+      >
+      </el-table-column>
+      <el-table-column prop="sbmc" label="设备名称" show-overflow-tooltip min-width="200">
+      </el-table-column>
+      <el-table-column props="ssxt" label="所属系统" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column props="wz" label="安装位置" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column props="jkz" label="监测值" show-overflow-tooltip v-if="params.sblx === '水压监测终端' || params.sblx === '电气火灾终端'">
+      </el-table-column>
+      <el-table-column
+        prop="ywzt"
+        label="设备状态"
+        show-overflow-tooltip
+        min-width="150"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="zt"
+        label="告警状态"
+        show-overflow-tooltip
+        align="center"
+        min-width="100"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="cztt"
+        label="处置状态"
+        show-overflow-tooltip
+        align="center"
+        min-width="100"
+      >
+      </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 {
+.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;
+  }
 
-		// 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-between;
+    // 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-between;
-			// 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: 30px;
+    margin-bottom: 5px;
+  }
 
-		/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 {
-			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/.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;
-	}
+.form {
+  flex-grow: 1;
+  width: 80%;
+  display: flex;
+}
 
-	.form {
-		flex-grow: 1;
-		width: 80%;
-		display: flex;
-	}
+::v-deep(.el-range-separator) {
+  line-height: 24px !important;
+  color: #ffffff !important;
+}
 
-	::v-deep(.el-range-separator) {
-		line-height: 24px !important;
-		color: #ffffff !important;
-	}
+::v-deep(.el-date-editor .el-range-input) {
+  color: #ffffff !important;
+}
 
-	::v-deep(.el-date-editor .el-range-input) {
-		color: #ffffff !important;
-	}
+::v-deep(.el-date-editor .el-range__icon) {
+  line-height: 24px !important;
+}
 
-	::v-deep(.el-date-editor .el-range__icon) {
-		line-height: 24px !important;
-	}
-
-	::v-deep(.el-date-editor .el-range__close-icon) {
-		line-height: 24px !important;
-	}
+::v-deep(.el-date-editor .el-range__close-icon) {
+  line-height: 24px !important;
+}
 </style>

app/src/views/Detail/index.vue

@@ -65,7 +65,11 @@
         style="margin-bottom: 6px"
         title="自查、监督、维保"
       >
-        <maintenance-supervision :detail="detail" v-if="detail" @openModal="openModal" />
+        <maintenance-supervision
+          :detail="detail"
+          v-if="detail"
+          @openModal="openModal"
+        />
       </border-panel>
     </div>
 
@@ -80,13 +84,22 @@
     </basic-modal>
 
     <!-- 风险问号弹窗 -->
-    <basic-modal top="120px" ref="whFxModal" name="安全风险分级预警">
-      <img src="../../assets/images/dd-exp-fx.png" />
+    <basic-modal
+      top="120px"
+      ref="whFxModal"
+      name="安全风险分级预警"
+      width="90%"
+    >
+      <div style="display: flex; justify-content: center">
+        <img src="../../assets/images/dd-exp-fx.png" />
+      </div>
     </basic-modal>
 
     <!-- 隐患问号弹窗 -->
-    <basic-modal top="120px" ref="whYhModal" name="隐患">
-      <img src="../../assets/images/dd-exp-yh.png" />
+    <basic-modal top="120px" ref="whYhModal" name="隐患" width="90%">
+      <div style="display: flex; justify-content: center">
+        <img src="../../assets/images/dd-exp-yh.png" />
+      </div>
     </basic-modal>
 
     <!-- 历史火灾 -->