<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="backpackForm" label-width="120px">
<el-row>
<el-col :span="10">
<el-form-item label="品牌型号" prop="brandModel">
<el-input v-model="backpackForm.brandModel" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="背负式设备编号" prop="backpackCode">
<el-input v-model="backpackForm.backpackCode" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="负责人" prop="chargePerson">
<el-input v-model="backpackForm.chargePerson" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<el-form-item label="负责人电话" prop="chargePhone">
<el-input v-model="backpackForm.chargePhone" 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">
<el-form-item label="删除标记" prop="delflag">
<el-input v-model="backpackForm.delflag" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="使用部门" prop="deptName">
<el-input v-model="backpackForm.deptName" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<!-- <el-col :span="10" :offset="1">-->
<!-- <el-form-item label="使用部门ID" prop="deptid">-->
<!-- <el-input v-model="backpackForm.deptid" 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>-->
<!-- <!–<img width="100%" :src="dialogImageUrl">–>-->
<!-- <div class="imgBox">-->
<!-- <img :src="dialogImageUrl" alt="" style="width:100%; margin: 0 auto;">-->
<!-- </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="10">
<el-form-item label="背负式设备描述" prop="description">
<el-input v-model="backpackForm.description" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="设备ID" prop="deviceId">
<el-input v-model="backpackForm.deviceId" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="电量检测设备编号" prop="electricCode">
<el-input v-model="backpackForm.electricCode" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="10">-->
<!-- <el-form-item label="id" prop="id">-->
<!-- <el-input v-model="backpackForm.id" type="text" placeholder="未知" disabled/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- <el-form-item label="imei" prop="imei">-->
<!-- <el-input v-model="backpackForm.imei" type="text" placeholder="未知" disabled/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="液位检测设备编号" prop="liquidCode">
<el-input v-model="backpackForm.liquidCode" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<!-- <el-col :span="10">-->
<!-- <el-form-item label="iot" prop="iot">-->
<!-- <el-input v-model="backpackForm.iot" type="text" placeholder="未知" disabled/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="购入日期" prop="purchaseDate">
<el-input v-model="backpackForm.purchaseDate" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="登记日期" prop="registerDate">
<el-input v-model="backpackForm.registerDate" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="使用人" prop="userPerson">
<el-input v-model="backpackForm.userPerson" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="使用人电话" prop="userPhone">
<el-input v-model="backpackForm.userPhone" type="text" placeholder="未知" disabled/>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="10">-->
<!-- <el-form-item label="液位检测设备编号" prop="liquidCode">-->
<!-- <el-input v-model="backpackForm.liquidCode" type="text" placeholder="未知" disabled/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="备注" prop="remarks">
<el-input v-model="backpackForm.remarks" 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 { getBackpackInfo } from '@/api/backpack'
import DeptSelect from '@/components/DeptSelect'
// import {getBackpackInfo} from "@/api/backpack";
export default {
name: 'DetailBackpack',
components: { SelectTree, DeptSelect },
data() {
return {
dialogFormVisible: false, // 对话框是否显示
backpackForm: {
backpackInfoId: '3', // 例如backpackInfoId: row.id, 所以对应后面的值填3
description: '111',
deptId: '0',
deptName: '顶级',
userPerson: '',
userPhone: '',
purchaseDate: '',
registerDate: '',
remarks: '',
deviceId: '',
liquidCode: '',
electricCode: '',
brandModel: '111',
backpackCode: '',
chargePerson: '',
chargePhone: '',
delflag: '',
imei: '',
iot: ''
},// 表单
deptProps: {
parent: 'pid',
value: 'id',
label: 'name',
children: 'children'
},
columns: [
{
text: '品牌型号',
value: 'brandModel',
align: 'center'
},
{
text: '背负式设备编号',
value: 'backpackCode',
align: 'center'
},
{
text: '负责人',
value: 'chargePerson',
align: 'center'
},
{
text: '负责人电话',
value: 'chargePhone',
align: 'center'
},
{
text: '删除标记',
value: 'delflag',
align: 'center'
},
{
text: '使用单位ID',
value: 'deptId',
align: 'center'
},
{
text: '使用单位',
value: 'deptName',
align: 'center'
},
{
text: '背负式设备描述',
value: 'description',
align: 'center'
},
{
text: '设备ID',
value: 'deviceId',
align: 'center'
},
{
text: '电量编号',
value: 'electricCode',
align: 'center'
},
{
text: 'id',
value: 'id',
align: 'center'
},
{
text: 'imei',
value: 'imei',
align: 'center'
},
{
text: 'iot',
value: 'iot',
align: 'center'
},
{
text: '液位编号',
value: 'liquidCode',
align: 'center'
},
{
text: '购入日期',
value: 'purchaseDate',
align: 'center'
},
{
text: '登记日期',
value: 'registerDate',
align: 'center'
},
{
text: '备注',
value: 'remarks',
align: 'center'
},
{
text: '使用人',
value: 'userPerson',
align: 'center'
},
{
text: '使用人电话',
value: 'userPhone',
align: 'center'
}
],
hideUpload: false,
imageList: [],
fileList: [],
deptTreeList: null, // 组织树列表数据
secondDeptTreeList: null, // 二级组织树列表
backpackCodeList: null,
quList: null,
jiedaoList: null,
dialogImageUrl: '',
dialogVisible: false,
labelPosition: 'right',
listLoading: false, // 监控数据加载动画
dataList: [], // 监控数据
loading: true
}
},
methods: {
// 初始化对话框
initDialog: function(dialogFormVisible, row = null) {
this.imageList = []
this.loading = true
this.dialogFormVisible = dialogFormVisible
console.log(row,"=======row========");
this.backpackForm = {
id: row.id || row.data.id, // 背负式设备id
backpackCode: row.data.backpackCode || '',
description: row.data.description || '',
deptId: row.data.deptId || '',
deptName: row.data.deptName || '',
brandModel: row.data.brandModel || '',
userPerson: row.data.userPerson || '',
userPhone: row.data.userPhone || '',
chargePerson: row.data.chargePerson || '',
chargePhone: row.data.chargePhone || '',
purchaseDate: row.data.purchaseDate || '',
registerDate: row.data.registerDate || '',
remarks: row.data.remarks || '',
deviceId: row.data.deviceId || '',
liquidCode: row.data.liquidCode || '',
electricCode: row.data.electricCode || '',
iot: row.data.iot || '',
imei: row.data.imei || '',
delflag: row.data.delflag || ''
}
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
// watchDataByBackpack(row.id).then(response => {
// this.listLoading = false
// this.dataList = response.data
// })
getBackpackInfo(row.backpackInfoId).then(response => {
this.listLoading = false
this.dataList = response.data
})
},
// 获取区域1
fetchArea1() {
getAreaByDept(this.backpackForm.deptId).then(response => {
if (response.code === 200) {
const pid = response.data.area
getAreaList(pid).then(response => {
this.quList = response.data
})
}
})
},
// 获取区域2
fetchArea2() {
getAreaList(this.backpackForm.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>
