<template>
<el-dialog :visible.sync="dialogFormVisible" class="editDialog" title="窨井详情" append-to-body @close="cancel">
<el-scrollbar :native="false">
<el-form v-loading="loading" ref="dataForm" :label-position="labelPosition" :model="wellForm" label-width="120px">
<el-row>
<el-col :span="10">
<el-form-item label="窨井名称" prop="wellName">
<el-input v-model="wellForm.wellName" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="窨井编号" prop="wellCode">
<el-input v-model="wellForm.wellCode" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="窨井类型" prop="wellType">
<el-input v-model="wellForm.wellTypeName" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="权属单位" prop="deptid">
<el-input v-model="wellForm.deptName" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<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="10" :offset="1">
<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>
<el-col :span="10">
<el-form-item label="经度" prop="coordinateX">
<el-input v-model="wellForm.coordinateX" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="纬度" prop="coordinateY">
<el-input v-model="wellForm.coordinateY" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="路标图片" prop="images">
<div v-if="imageList.length==0">
无
</div>
<!--<el-image-->
<!--v-for="image in imageList"-->
<!--:src="image"-->
<!--:preview-src-list="imageList"-->
<!--:z-index="4000"-->
<!--style="width: 100px; height: 100px; margin-right:10px"/>-->
<el-upload
v-else
ref="upload"
:file-list="imageList"
:on-preview="handlePictureCardPreview"
class="hide"
multiple
accept=".jpg,.jpeg,.png "
action="string"
list-type="picture-card"
disabled
>
<i class="el-icon-plus"/>
</el-upload>
<el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
<div class="imgBox">
<img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto; height: 400px;">
</div>
</el-dialog>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="1">
<el-form-item label="所在区域" required>
<el-col :span="5">
<el-form-item prop="qu">
<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-form-item>
</el-col>
<el-col :span="1" class="line">区/县</el-col>
<el-col :span="5">
<el-form-item prop="area">
<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-form-item>
</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-row :gutter="20">
<el-col :span="10">
<el-form-item label="窨井维护单位" prop="responsibleDept">
<el-input v-model="wellForm.responsibleDeptName" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="watch-div">
<el-row class="table-title">
<el-col :span="3"><div class="title-header"><i class="el-icon-menu"/>监控数据</div></el-col>
</el-row>
<el-table v-loading="listLoading" :data="dataList" class="table" border>
<el-table-column align="center" type="index"/>
<el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row[column.value] }}
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<el-button type="text" @click="showData(scope.row)">查看历史数据</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-scrollbar>
</el-dialog>
</template>
<script>
import SelectTree from '@/components/SelectTree/singleSelect'
import { getAreaList, getAreaByDept } from '@/api/area'
import { watchDataByWell } from '@/api/well'
import DeptSelect from '@/components/DeptSelect'
export default {
name: 'DetailWell',
components: { SelectTree, DeptSelect },
data() {
return {
dialogFormVisible: false, // 对话框是否显示
wellForm: {
id: null, // 窨井id
wellCode: '', // 窨井编号
wellName: '', // 窨井名称
wellType: '', // 窨井类型
wellTypeName: '', // 窨井类型名称
deptid: '', // 权属单位
deptName: '', // 权属单位名称
bfztName: '', // 布防状态
deep: '', // 井深，
position: '', // 位置描述
coordinateX: '', // 经度
coordinateY: '', // 纬度
photos: '', // 照片路径
notes: '', // 备注,
qu: '',
area: '', // 街道
responsibleDept: '', // 维护人员部门
responsibleDeptName: '' // 维护人员部门名称
}, // 表单
deptProps: {
parent: 'pid',
value: 'id',
label: 'name',
children: 'children'
},
columns: [
{
text: '监控内容',
value: 'watchType'
},
{
text: '设备编号',
value: 'devcode'
},
{
text: '设备安装日期',
value: 'installDate',
width: 110
},
{
text: '最新数据',
value: 'data',
width: 80
},
{
text: '设备状态',
value: 'onlineStateName',
width: 80
},
{
text: '最后上传时间',
value: 'logtime',
width: 170
}
],
hideUpload: false,
imageList: [],
fileList: [],
deptTreeList: null, // 组织树列表数据
secondDeptTreeList: null, // 二级组织树列表
wellTypeList: null,
quList: null,
jiedaoList: null,
dialogImageUrl: '',
dialogVisible: false,
labelPosition: 'right',
listLoading: false, // 监控数据加载动画
dataList: [], // 监控数据
loading: true
}
},
activated() {
this.imageList = []
},
methods: {
// 初始化对话框
initDialog: function(dialogFormVisible, row = null) {
this.loading = true
this.dialogFormVisible = dialogFormVisible
this.wellForm = {
id: row.id, // 窨井id
wellCode: row.wellCode, // 窨井编号
wellName: row.wellName, // 窨井名称
wellType: row.wellType, // 窨井类型
wellTypeName: row.wellTypeName, // 窨井类型
bfztName: row.bfztName,
deptid: row.deptid, // 权属单位
deptName: row.deptName, // 权属单位
deep: row.deep, // 井深，
position: row.position, // 位置描述
coordinateX: row.coordinateX, // 经度
coordinateY: row.coordinateY, // 纬度
photos: row.photos, // 照片路径
notes: row.notes, // 备注,
qu: row.qu,
area: row.area, // 街道
responsibleDept: row.responsibleDept, // 维护人员部门
responsibleDeptName: row.responsibleDeptName // 维护人员部门
}
if (row.deptid && row.deptid !== '') {
this.fetchArea1()
this.fetchArea2()
this.loading = false
} else {
this.loading = false
}
// 处理图片
const urls = row.photos.split(';')
const base_url = process.env.BASE_API + '/static/'
for (const url of urls) {
if (url) {
this.imageList.push({ name: url, url: base_url + url })
}
}
// 获取窨井下监控数据
this.listLoading = true
watchDataByWell(row.id).then(response => {
this.listLoading = false
this.dataList = response.data
})
},
// 获取区域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
})
},
showData(row) {
const devcode = row.devcode
const deviceType = row.type
const params = { devcode: devcode, deviceType: deviceType }
const routeData = this.$router.resolve({
name: 'DataManage',
query: params,
params: params
})
window.open(routeData.href, '_blank')
// this.$router.push({ name: 'DataManage', query: params })
},
// 取消
cancel() {
this.imageList = []
this.dialogFormVisible = false
},
// 图片预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
}
}
}
</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: 410px;
width: 100%;
}
.el-scrollbar__wrap {
/*overflow: scroll;*/
overflow-x: auto;
overflow-y: auto;
}
.el-scrollbar__view{
width: 98%;
}
}
}
.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: 15px;
.table-title {
margin-top: 10px;
.title-header {
height: 40px;
padding: 10px;
border-radius: 4px;
border: solid 1px #F3F3F3;
background-color: #F5F7FA;
color: #606266;
}
}
}
</style>
