<template>
<el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="井详情" append-to-body>
<!-- <el-scrollbar height="500px" :native="false">-->
<el-form ref="dataForm" :label-position="labelPosition" :model="wellForm" :v-loading="loading" label-width="120px">
<el-row>
<el-col :span="7">
<el-form-item label="点位名称" prop="wellName">
<el-input v-model="wellForm.wellName" type="text" placeholder="未知" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="点位编号" prop="wellCode">
<el-input v-model="wellForm.wellCode" type="text" placeholder="未知" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="点位类型" prop="wellType">
<el-input v-model="wellForm.wellTypeName" type="text" placeholder="未知" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="权属单位" prop="deptid">
<el-input v-model="wellForm.deptName" type="text" placeholder="未知" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="井深(m)" prop="deep">
<el-input v-model="wellForm.deep" type="text" placeholder="未知" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="布防状态" prop="coordinateX">
<el-input v-model="wellForm.bfztName" type="text" placeholder="未知" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="1">
<el-form-item label="所在区域" required>
<el-col :span="4">
<el-select v-model="wellForm.qu" placeholder="未知" disabled>
<el-option
v-for="item in quList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-col>
<el-col :span="1" class="line">
区/县
</el-col>
<el-col :span="5">
<el-select v-model="wellForm.area" placeholder="未知" disabled>
<el-option
v-for="item in jiedaoList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-col>
<el-col :span="1" class="line">
街道/镇
</el-col>
</el-form-item>
</el-row>
<el-row>
<el-col :span="15">
<el-form-item label="详细地址" prop="position">
<el-input v-model="wellForm.position" type="text" placeholder="未知" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="watch-div">
<a-map-container
ref="map"
:center="center"
:zoom="zoom"
:base-layer="baseLayer"
style="height: 300px"
vid="info-well-map"
class="map-demo"
>
<a-map-marker v-for="marker of markers" :position="marker.position" />
</a-map-container>
</div>
<!-- </el-scrollbar>-->
</el-dialog>
</template>
<script>
import { getAreaList, getAreaByDept } from '@/api/system/area'
import { getWellInfo } from '@/api/well/well'
import AMapContainer from '@/components/Amap/AMapContainer'
import AMapMarker from '@/components/Amap/AMapMarker'
export default {
name: 'InfoWell',
components: { AMapContainer, AMapMarker },
data() {
return {
dialogFormVisible: false, // 对话框是否显示
wellForm: {
id: null, // 井id
wellCode: '', // 点位编号
wellName: '', // 点位名称
wellType: '', // 点位类型
wellTypeName: '', // 点位类型名称
deptid: '', // 权属单位
deptName: '', // 权属单位名称
bfztName: '', // 布防状态
deep: '', // 井深，
position: '', // 位置描述
coordinateX: '',
coordinateY: '',
latBaidu: '',
lngBaidu: '',
latGaode: '',
lngGaode: '',
photos: '', // 照片路径
notes: '', // 备注,
qu: '',
area: '', // 街道
responsibleDept: '' // 维护人员部门
}, // 表单
center: [121.59996, 31.197646],
zoom: 16,
baseLayer: 'gaode_vec', // 底图图层
markers: [],
icon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
quList: null,
jiedaoList: null,
labelPosition: 'right',
loading: true
}
},
computed: {
qu() { // 获取区
return this.wellForm.qu
}
},
watch: {
qu(val) { // 监控区变化
this.fetchArea2()
}
},
mounted: function() {
// this.fetchArea1()
},
methods: {
// 初始化对话框
initDialog: function(wellId) {
this.dialogFormVisible = true
// this.fetchArea1()
// 获取井数据
getWellInfo(wellId).then(response => {
this.markers = []
this.listLoading = false
const row = response.data
this.wellForm = {
id: row.id, // 井id
wellCode: row.wellCode, // 点位编号
wellName: row.wellName, // 点位名称
wellType: row.wellType, // 点位类型
wellTypeName: row.wellTypeName, // 点位类型
deptid: row.deptid, // 权属单位
deptName: row.deptName, // 权属单位
deep: row.deep, // 井深，
bfztName: row.bfztName, // 布防状态
position: row.position, // 位置描述
photos: row.photos, // 照片路径
notes: row.notes, // 备注,
coordinateX: row.coordinateX,
coordinateY: row.coordinateY,
latBaidu: row.latBaidu,
lngBaidu: row.lngBaidu,
latGaode: row.latGaode,
lngGaode: row.lngGaode,
qu: row.qu,
area: row.area, // 街道
responsibleDept: row.responsibleDept // 维护人员部门
}
this.center = [row.lngGaode, row.latGaode]
this.markers.push({ position: [row.lngGaode, row.latGaode] })
if (row.deptid && row.deptid !== '') {
this.fetchArea1()
this.fetchArea2()
} else {
this.loading = false
}
})
},
// 获取区域1
fetchArea1() {
getAreaByDept(this.wellForm.deptid).then(response => {
if (response.code === 200) {
const pid = response.data.area
getAreaList(pid).then(response => {
this.quList = response.data
})
}
})
},
// 获取区域2
fetchArea2() {
getAreaList(this.wellForm.qu).then(response => {
this.jiedaoList = response.data
this.loading = false
})
},
// 取消
cancel() {
this.dialogFormVisible = false
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.hide .el-upload--picture-card {
display: none;
}
.editDialog{
.el-dialog {
width: 900px;
margin-top: 10vh !important;
.el-dialog__body{
}
.el-scrollbar {
height: 450px;
width: 100%;
}
.el-scrollbar__wrap {
/*overflow: scroll;*/
overflow-x: auto;
overflow-y: auto;
}
.el-scrollbar__view{
width: 98%;
}
.el-form-item {
margin-bottom: 12px;
}
}
}
.el-select{
width: 100%;
}
.line{
width: 50px;
margin-left: 5px;
}
.hide .el-upload-–picture-card{
display: none;
}
.imgBox{
width: 100%;
text-align: center;
}
.watch-div {
margin: 0px 15px;
.map-demo{
height: 250px;
}
}
</style>
