zhgkpt-datav/app/src/views/FireCondition/components/hzfxCont.vue

<script>
	import {
		getJdjcUnit,
		getGcjztjUnit
	} from "@/api/index.js";
	import {
		area
	} from "@/api/area";
	import {
		hzfGjzb,
		hzfxQhyy,
		hzfxQhcs
	} from "@/api/hzfx.js";
	import punishmentMixin from "@/mixin/unit.js";
	export default {
		name: "BasicInfoModalContent",
		mixins: [punishmentMixin],
		data() {
			return {
				options: [],
				options1: [],
				options2: [],
				tableData: [],
				tableData1: [],
				tableData2: [],
				unitList: [],
				value: "全市",
				params: {
					pageSize: 10,
					pageNum: 1,
				},
				total: 0,
				search: "",
				showFlag: 1
				// Unittype: "", // 建筑分类
				// year: "", // 年代
				// hnum: "", //高度
				// management: "", //管理形式
				// subject: "", //管理主体
				// maintenance: "", //维保形式
				// risklevel: "", //风险等级
			};
		},
		props: {
			qy: String,
			 idx: Number,
		},
		watch: {
			idx: {
			  handler(val) {
			    this.showFlag = val;
			  },
			  immediate: true,
			  deep:true
			},
			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() {
				hzfGjzb({
					...this.params,
					qx: this.qy === "重庆市" ? "" : this.qy,
				}).then((res) => {
					this.options = [res.data];
					// console.log(this.options,'关键指标');
				});
				hzfxQhyy({
					...this.params,
					qx: this.qy === "重庆市" ? "" : this.qy,
				}).then((res) => {
					this.options1 = [res.data];
					// console.log(this.options1,'火灾分布');
				});
				hzfxQhcs({
					...this.params,
					qx: this.qy === "重庆市" ? "" : this.qy,
				}).then((res) => {
					this.options2 = [res.data];
					// console.log(this.options2,'起火场所');
				});
			},
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.funUnitList();
			},
			handleCurrentChange(val) {
				this.params.pageNum = val;
				this.funUnitList();
			},
			handUnitList() {
				hzfGjzb({
					...this.params,
					qy: this.value === "重庆市" ? "" : this.value,
				}).then((res) => {});
			},
			resetForm() {
				this.value = "";
				this.search = "";
				(this.params = {
					pageSize: 10,
					pageNum: 1,
				}),
				this.funUnitList();
			},
			changeList(val) {
				this.showFlag = val
				this.$emit('callback', val);
			},
			addClass(i) {
				return this.showFlag === i ? 'active' : 'tab-item'
			}
		},
		mounted() {
			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.qx" :label="item.qx" 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="options" @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="hzzs" label="火灾总数（起）" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="wrstb" label="同比（%）" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="wrs" label="亡人(人)" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="ssstb" label="同比（%）" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="sss" label="伤人(人)" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="xxdz" label="同比（%）" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="zjccss" label="直接经济损失（万元）" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="zjccsstb" label="同比（%）" show-overflow-tooltip>
				</el-table-column>
			</basic-table>
		</div>
		<div v-if="showFlag===2">
			<basic-table :data="options1" @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="dqhz" label="电气火灾(起)" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="fh" label="放火（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="jd" label="静电（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="lj" label="雷击（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="rfyhbz" label="燃放烟花爆竹（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="sczy" label="生产作业（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="wh" label="玩火（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="xy" label="吸烟（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="ylhz" label="遗留火种（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="yhbs" label="用火不慎（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="zr" label="自燃（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="bpcyy" label="不排除原因（起）" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="xxdz" label="其他（起）" width="150" show-overflow-tooltip>
				</el-table-column>
			</basic-table>
		</div>
		<div v-if="showFlag===3">
			<basic-table :data="options2" @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="bgsc" label="办公场所" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="gcjzmc" label="宾馆、饭店、招待所" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="cf" label="厂房" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="cy" label="纯餐饮场所" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="fly" label="福利院" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="gd" label="工地" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="ggylcs" label="公共娱乐设施" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="gbdszx" label="广播电视中心" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="hy" label="会议、展览中心" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="jyjq" label="加油加气站充电" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="jtsn" label="交通枢纽站" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="jrjycs" label="金融交易场所" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="jzcs" label="居住场所" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="qck" label="汽车库" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="sy" label="商业场所" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="syhgqy" label="石油化工企业" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="snnfycs" label="室内农副业场所" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="tycg" label="体育场馆" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="txcs" label="通信场所" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="wbg" label="文博馆(图书馆、博物馆、档案馆等)" width="250" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="wwgjz" label="文物古建筑" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="wzcccs" label="物资仓储场所" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="xx" label="学校" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="yly" label="养老院" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="yljg" label="医疗机构" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="zjcs" label="宗教场所" show-overflow-tooltip>
				</el-table-column>
			</basic-table>
		</div>
		<br />
		<basic-pagination layout="total,->,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>