zhgkpt-datav/app/src/views/Iot/components/xfwlw.vue

<script>
	import {
		getJdjcUnit,
		getGcjztjUnit
	} from "@/api/index.js";
	import {
		area
	} from "@/api/area";
		import {
			getXfwlw
		} from "@/api/iot.js";
	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,
				showFlag: 1
			};
		},
		  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() {
				getXfwlw({
					...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();
			},
			handUnitList() {
				getXfwlw({
					...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.params = {
					pageSize: 10,
					pageNum: 1,
				}),
				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>
			<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="ywcwlwjzs" label="已完成物联网建筑数（栋）" width="200" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="zxjzs" label="在线建筑数（栋）" width="180" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="gjjzs" label="告警建筑数（栋）" width="180" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="hzbjzj" label="火灾报警主机（栋）" width="180" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="syjc" label="水压监测（栋）" width="180" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="dqhzjc" label="电气火灾监测（栋）" width="180" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="smtdjc" label="生命通道监测（栋）" width="180" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="xfkzsrylg" label="消防控制室人员离岗监控（栋）" width="220" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="zxgj" label="在线/告警" width="150" 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>