epmet-oper-gov/src/views/modules/base/communityYantai/cpts/agency-info.vue

<template>
	<div class="m-info">
		<div class="btn-close" @click="off">
			<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
				<use xlink:href="#icon-close"></use>
			</svg>
		</div>

		<div class="info">
			<div class="title">{{ info.agencyName || '--' }}</div>
			<div class="item">
				<div class="field">组织区划：</div>
				<div class="value">{{ info.areaName || '--' }}</div>
			</div>
			<div class="item">
				<div class="field">组织编码：</div>
				<div class="value">{{ info.areaCode || '--' }}</div>
			</div>
			<div class="item">
				<div class="field">负责人：</div>
				<div class="value">{{ info.contacts || '--' }}</div>
			</div>
			<div class="item">
				<div class="field">联系电话：</div>
				<div class="value">{{ info.mobile || '--' }}</div>
			</div>
			<div class="item">
				<div class="field">组织简介：</div>
				<div class="value">{{ info.remark || '--' }}</div>
			</div>
			<div class="item" v-if="mapData">
				<div class="field">管辖范围：</div>
				<div class="value-map">
					<grid-map ref="map" :srcGridData="mapData" :pitch="0" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import gridMap from "./map";

export default {
	components: { gridMap },

	props: {
		agencyId: {
			//显示【显示脱敏信息】按钮
			type: String,
			default: "",
		},
	},

	data() {
		return {
			info: {
				agencyId: "", // 所属组织ID
				level: "",
				agencyName: "",
				areaCode: "",
				areaName: "",
				contacts: "",
				mobile: "",
				remark: "",
			},

			mapData: null,

			displayed: false,
		};
	},

	computed: {},

	mounted() {
		if (this.agencyId) {
			this.getInfo();
			this.getMapData();
		}
	},

	watch: {
		agencyId() {
			this.mapData = null;
			this.getInfo();
			this.getMapData();
		},
	},

	methods: {
		off() {
			this.$emit("close");
		},

		async getInfo() {
			const url = "/gov/org/agency/agencydetail";
			let params = {
				agencyId: this.agencyId,
			};

			const { data, code, msg } = await requestPost(url, params);

			if (code === 0) {
				this.info = data;
			} else {
				this.$message.error(msg);
			}
		},

		async getMapData() {
			const url = "/gov/org/agency/maporg";
			let params = {
				level: "agency",
				orgId: this.agencyId,
			};

			const { data, code, msg } = await requestPost(url, params);

			if (code === 0) {
				if (data.coordinates) {
					this.mapData = data;
				}
			} else {
				this.$message.error(msg);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.m-info {
	position: relative;
	width: 300px;
	background-color: #ffffff;
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
		0px 3px 6px -4px rgba(0, 0, 0, 0.12);
	padding: 15px;
	.btn-close {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 15px;
		color: #aaaaaa;
		padding: 15px;
		cursor: pointer;
		&:hover {
			color: #666666;
		}
	}
	.info {
		.title {
			font-size: 18px;
			font-weight: bold;
			line-height: 30px;
		}
		.item {
			display: flex;
			flex-wrap: wrap;
			line-height: 24px;
			.field {
				width: 30%;
			}
			.value {
				width: 70%;
			}
			.value-map {
				width: 100%;
				height: 200px;
			}
		}
	}
}
</style>