You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
3.1 KiB
176 lines
3.1 KiB
<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>
|
|
|