<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" > <el-form-item label="设备名称" prop="deviceName"> <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="设备编号" prop="deviceCode"> <el-input v-model="queryParams.deviceCode" placeholder="请输入设备编号" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button > <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button > </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" >修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" >删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" >导出</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <!-- <el-table-column label="设备id" align="center" prop="deviceId" />--> <el-table-column label="设备名称" align="center" prop="deviceName"> <span slot-scope="scope" v-if="scope.row.deviceName">{{scope.row.deviceName}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="设备编号" align="center" prop="deviceCode"> <span slot-scope="scope" v-if="scope.row.deviceCode">{{scope.row.deviceCode}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="所在地址" align="center" prop="deviceAddr"> <span slot-scope="scope" v-if="scope.row.deviceAddr">{{scope.row.deviceAddr}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="设备型号" align="center" prop="deviceModel" > <span slot-scope="scope" v-if="scope.row.deviceModel">{{scope.row.deviceModel}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="设备类型" align="center" prop="deviceType" > <span slot-scope="scope" v-if="scope.row.deviceType">{{scope.row.deviceType}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="权属单位名称" align="center" prop="beyondEnterpriseName" > <span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span> <span v-else>-</span> </el-table-column> <el-table-column label="安装时间" align="center" prop="installationTime" width="180"> <template slot-scope="scope"> <span v-if="scope.row.installationTime">{{ parseTime(scope.row.installationTime, '{y}-{m}-{d}') }}</span> <span v-else>-</span> </template> </el-table-column> <!-- <el-table-column label="照片" align="center" > <template slot-scope="List"> <img :src="List.row.iconUrl" width="100px"> </template> </el-table-column> <el-table-column label="照片" align="center" > <template slot-scope="List"> <span class="dbtn" @click="checkFile(List.row.iconUrl)" v-if="List.row.iconUrl" > <i class="el-icon el-icon-view"></i>查看/下载 </span> <span v-else>-</span> </template> </el-table-column> --> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" >删除</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!--选择关联设备弹出框--> <el-dialog title="选择关联设备" width="1100px" :visible.sync="dialogTableVisible" formLabelWidth="160px"> <template> <el-form :model="dateQueryParams" ref="queryForm" :inline="true" v-show="showSearch" > <el-form-item label="设备名称" prop="deviceName"> <el-input v-model="dateQueryParams.deviceName" placeholder="请输入设备名称" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="设备型号" prop="deviceCode"> <el-input v-model="dateQueryParams.deviceModel" placeholder="请输入设备型号" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="物联网编号" prop="deviceAddr"> <el-input v-model="dateQueryParams.iotNo" placeholder="请输入物联网编号" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryData">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQueryDate">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="dialogFormVisible = true" >新增</el-button> </el-col> <!-- <el-col :span="1.5">--> <!-- <el-button--> <!-- type="success"--> <!-- plain--> <!-- icon="el-icon-edit"--> <!-- size="mini"--> <!-- :disabled="single"--> <!-- @click="handleUpdate"--> <!-- >修改</el-button>--> <!-- </el-col>--> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="deleteListDetailInfo" >删除</el-button> </el-col> <!-- <el-col :span="1.5">--> <!-- <el-button--> <!-- type="warning"--> <!-- plain--> <!-- icon="el-icon-download"--> <!-- size="mini"--> <!-- :loading="exportLoading"--> <!-- @click="handleExport"--> <!-- >导出</el-button>--> <!-- </el-col>--> <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar> </el-row> <el-table v-loading="loadings" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" max-height="250" @selection-change="tableDataSelectionChange"> <el-table-column type="selection" width="55" align="center"></el-table-column> <el-table-column label="设备名称" align="center" prop="deviceName" /> <el-table-column label="设备型号" align="center" prop="deviceModel" /> <el-table-column label="设备类型" align="center" prop="deviceType" /> <el-table-column label="探测介质" align="center" prop="detectionMedium" /> <el-table-column label="物联网编号" align="center" prop="iotNo" /> <el-table-column label="备注" align="center" prop="remarksn" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteDetailInfo(scope.row)" >删除</el-button> </template> </el-table-column> </el-table> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="insertListDetailInfo">提 交</el-button> <el-button @click="dialogTableVisible=false">取 消</el-button> </div> </template> </el-dialog> <!--添加关联设备弹出框--> <el-dialog title="添加关联设备" :visible.sync="dialogFormVisible"> <el-form ref="formDetailInfo" :model="formDetailInfo" :rules="formDetailInfoRules" label-width="95px" style="height: 230px"> <el-row> <el-col :span="11"> <el-form-item label="设备名称" prop="deviceName"> <el-input v-model="formDetailInfo.deviceName" placeholder="请输入设备名称" autocomplete="off"></el-input> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="设备型号" prop="deviceModel"> <el-input v-model="formDetailInfo.deviceModel" placeholder="请输入设备型号" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="设备类型" prop="deviceType"> <el-select v-model="formDetailInfo.deviceType" placeholder="请选择设备类型"> <el-option label="压力表" value="1" /> <el-option label="流量计" value="2" /> <el-option label="探测器" value="3" /> </el-select> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="物联网编号" prop="iotNo" > <el-input v-model="formDetailInfo.iotNo" placeholder="请输入物联网编号" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="22"> <el-form-item label="探测介质" prop="detectionMedium" > <el-input v-model="formDetailInfo.detectionMedium" placeholder="请输入探测介质" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="22"> <el-form-item label="备注" prop="remarksn"> <el-input v-model="formDetailInfo.remarksn" type="textarea" placeholder="请输入备注" /> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="addDetailInfo">提 交</el-button> <el-button @click="dialogFormVisible=false">取 消</el-button> </div> </el-dialog> <!-- 添加或修改设备信息对话框 --> <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-row> <el-col :span="11"> <el-form-item label="设备名称" prop="deviceName"> <el-input v-model="form.deviceName" placeholder="请输入设备名称" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="设备编号" prop="deviceCode"> <el-input v-model="form.deviceCode" placeholder="请输入设备编号" :disabled="true"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="所在地址" prop="deviceAddr"> <el-input v-model="form.deviceAddr" placeholder="请输入所在地址" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="设备型号" prop="deviceModel"> <el-input v-model="form.deviceModel" placeholder="请输入设备型号" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="设备类型" prop="deviceType"> <el-select v-model="form.deviceType" placeholder="请选择设备类型"> <el-option label="阀井" value="1" /> <el-option label="调压箱" value="2" /> </el-select> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="权属单位" prop="beyondEnterpriseId"> <el-select v-model="form.beyondEnterpriseId" placeholder="请在下拉框中选择权属单位" maxlength="255" :disabled="false" clearable> <el-option v-for="item in test" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId"> </el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- <el-row>--> <!-- <el-col :span="11">--> <!-- <el-form-item label="经度" prop="longitude">--> <!-- <el-input v-model="form.longitude" placeholder="请输入经度" />--> <!-- </el-form-item>--> <!-- </el-col>--> <!-- <el-col :span="11">--> <!-- <el-form-item label="纬度" prop="latitude">--> <!-- <el-input v-model="form.latitude" placeholder="请输入纬度" />--> <!-- </el-form-item>--> <!-- </el-col>--> <!-- </el-row>--> <el-row> <el-col :span="21"> <el-form-item label="经纬度坐标" prop="longitude"> <el-col :span="9"> <el-input v-model="form.longitude" placeholder="请输入经度" /> </el-col> <el-col :span="9" style="margin-left: 15px"> <el-input v-model="form.latitude" placeholder="请输入纬度"/> </el-col> <el-col :span="3" style="margin-left: 35px"> <el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button> </el-col> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="22"> <el-form-item label="上传照片"> <FileUpload listType="picture" @resFun="getFileInfo" @remove="listRemove" :fileArr="fileList"> </FileUpload> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="联系人" prop="linkman"> <el-input v-model="form.linkman" placeholder="请输入联系人" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="电话" prop="phone"> <el-input v-model="form.phone" placeholder="请输入电话" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="安装时间" prop="installationTime"> <el-date-picker clearable size="small" v-model="form.installationTime" type="date" value-format="yyyy-MM-dd" placeholder="选择安装时间"> </el-date-picker> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="最后巡检时间" prop="inspectionTime"> <el-date-picker clearable size="small" v-model="form.inspectionTime" type="date" value-format="yyyy-MM-dd" placeholder="选择最后巡检时间"> </el-date-picker> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="22"> <el-form-item label="备注" prop="remarks"> <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" /> </el-form-item> </el-col> </el-row> </el-form> <div class="tableTitle"> <img :src="relationImg" style="width: 24px; height: 25px;position: relative; left: -339px; top: -12px;"/> <span class="midText">关联设备</span> </div> <el-table v-loading="loadings" ref="multipleTable" :data="DetailInfoList" tooltip-effect="dark" style="width: 100%" max-height="250" @selection-change="tableDataSelectionChange"> <el-table-column label="设备名称" align="center" prop="deviceName" /> <el-table-column label="设备型号" align="center" prop="deviceModel" /> <el-table-column label="设备类型" align="center" prop="deviceType" /> <el-table-column label="物联网编号" align="center" prop="iotNo" /> <el-table-column label="备注" align="center" prop="remarksn" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteDataListilInfo(scope.row,scope.$index)" >删除</el-button> </template> </el-table-column> </el-table> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="selectDataListInfo">选择关联设备</el-button> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <GetPos :dialogVisible.sync="dialogTableVisibles" device="" :devicePos="devicePos" @close="dialogcancelFun" @getPath="getPath" /> </div> </template> <script> import { listDevice, getDevice, delDevice, addDevice, updateDevice, exportDevice, selectTEnterprise,getDdeviceDetailInfo,addDetailInfos,deleteDetailInfo,deleteeListDetailInfo,selectDetailInfoList,deleteDeviceDetailInfo,updateDetailInfoLists} from "@/api/regulation/device"; import GetPos from '@/components/GetPos'; import FileUpload from '@/components/FileSuperviseUpload'; export default { name: "Device", components: { GetPos, FileUpload, }, data() { return { relationImg: require('@/assets/project/relation.png'), //头像 fileList: [], pictureUrlList:[], /**弹出层*/ //下级设备数据数组 tableData: [], //存储已被选中的下级数据id DetailInfoListId :[], //存储已经选中的下级关联数据 DetailInfoList:[], multipleSelection: [], dialogTableVisible: false, dialogFormVisible: false, /**--------------地图使用数据---------------*/ dialogTableVisibles: false, devicePos: [], /**--------------地图使用数据---------------*/ form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '', }, formLabelWidth: '120px', /*添加关联设备*/ formDetailInfo:{ relationDeviceDetailId:'', deviceName: '', deviceModel:'', deviceType:'', iotNo:'', detectionMedium:'', remarksn:'' }, /*动态添加输入框*/ dynamicValidateForm: { domains: [{ deviceName: '', deviceModel:'', deviceType:'', iotNo:'', remarksn:'' }], }, // 遮罩层 loading: true, //下级数据的遮罩层 loadings:true, // 导出遮罩层 exportLoading: false, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, //下级关联设备条数 detailTotal:0, // 设备信息表格数据 deviceList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, deviceName: null, deviceCode: null, deviceAddr: null, }, // 查询参数 dateQueryParams: { deviceName: null, deviceModel: null, iotNo: null, }, //下级参数 detailInfoParams:{ pageNum: 1, pageSize: 10, }, // 表单参数 form: {}, // 关联设备表单参数 forms: {}, //下拉列表数据 test: {}, // 表单校验 rules: { deviceName: [ { required: true, message: "请输入设备名称", trigger: "blur" }, // { min: 0, max: 20, message: "长度20位", trigger: "blur" }, ], deviceAddr: [ { required: true, message: "请输入所在地址", trigger: "blur" }, // { min: 0, max: 30, message: "长度30位", trigger: "blur" }, ], deviceType: [ { required: true, message: "请选择设备类型", trigger: "blur" }, ], beyondEnterpriseId: [ { required: true, message: "请选择权属单位", trigger: "blur" }, ], }, //关联设备下级数据 表单校验 formDetailInfoRules:{ deviceName:[ { required: true, message: "请输入设备名称", trigger: "blur" }, { min: 0, max: 20, message: "长度20位", trigger: "blur" }, ], deviceModel:[ { required: true, message: "请输入设备型号", trigger: "blur" }, { min: 0, max: 20, message: "长度20位", trigger: "blur" }, ], deviceType:[ { required: true, message: "请选择设备类型", trigger: "blur" }, ], iotNo:[ { required: true, message: "请输入联网编号", trigger: "blur" }, { min: 0, max: 20, message: "长度20位", trigger: "blur" }, ], }, }; }, created() { this.getList(); }, methods: { /**上传头像*/ getFileInfo(res){ this.pictureUrlList.push(res.url) // this.form.iconUrl = res.url; this.form.iconUrl=this.pictureUrlList.join(","); this.form.burl=res.burl; this.fileList.push({ name: res.fileName, url: uploadfile, burl:res.burl, }); }, checkFile(url) { window.open(url,'_blank'); }, listRemove(e) { this.form.dealPlan = ""; let deleteIndex = -1; for(var i = 0; i < this.fileList.length; i++){ const item = this.fileList[i]; if (item.uid == e.uid) { deleteIndex = i; } } if (deleteIndex > -1) { this.form.iconUrl = ""; this.fileList.splice(deleteIndex,1); this.pictureUrlList = []; if (this.fileList.length > 0) { for(var i = 0; i < this.fileList.length; i++){ const item = this.fileList[i] ; console.log("item.url" + item.url); this.pictureUrlList.push(item.url); this.form.iconUrl=this.pictureUrlList.join(","); } } } console.log("this.form.iconUrl = " + this.form.iconUrl); // this.fileList = []; }, /** 查询设备信息列表 */ getList() { this.loading = true; listDevice(this.queryParams).then(response => { this.deviceList = response.rows; this.total = response.total; this.loading = false; }); }, /**查询下级数据列表方法*/ getDataList(){ this.loadings = true; // console.log(this.dateQueryParams) //查询下级设备数据 getDdeviceDetailInfo(this.dateQueryParams).then(response => { //下级设备数据 到时候换成下级数据 this.tableData = response.rows; this.detailTotal = response.total; this.loadings = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); this.fileList = []; }, // 表单重置 reset() { this.form = { deviceId: null, deviceName: null, deviceCode: null, deviceAddr: null, deviceModel: null, deviceType: null, beyondEnterpriseId: null, beyondEnterpriseName: null, longitude: null, latitude: null, iconUrl: null, linkman: null, phone: null, installationTime: null, inspectionTime: null, createBy: null, createTime: null, updateBy: null, updateTime: null, isDel: null, remarks: null, relationDeviceType:'1', }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 下级数据搜索*/ handleQueryData(){ this.getDataList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, /** 下级数据重置按钮操作 搜索框重置*/ resetQueryDate(){ this.dateQueryParams={ deviceName: null, deviceModel: null, iotNo: null, } this.getDataList(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.deviceId) this.single = selection.length!==1 this.multiple = !selection.length }, //关联数据多选框选中数据 tableDataSelectionChange(selection){ this.ids = selection.map(item => item.relationDeviceDetailId) this.datalist=selection.map(item => item) //按钮 非选中禁用 this.single = selection.length!==1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { //查询企业名称下拉框数据 selectTEnterprise().then(response => { this.test = response.data; }); //清空关联设备数据 this.DetailInfoList='' this.loadings = true; //查询下级设备数据 getDdeviceDetailInfo(this.dateQueryParams).then(response => { //下级设备数据 到时候换成下级数据 this.tableData = response.rows; this.detailTotal = response.total; this.loadings = false; }); // 隐患信息 上传照片清空 this.fileList = []; this.pictureUrlList = []; this.reset(); this.open = true; this.title = "添加设备信息"; }, /** 修改按钮操作 */ handleUpdate(row) { // 隐患信息 上传照片清空 this.fileList = []; this.pictureUrlList = []; //查询企业名称下拉框数据 selectTEnterprise().then(response => { this.test = response.data; }); const deviceId = row.deviceId || this.ids var tDeviceInfon={ id:deviceId, relationDeviceType:'1' } //查询关联设备信息数据 selectDetailInfoList(JSON.stringify(tDeviceInfon)).then(response => { this.DetailInfoList = response.rows; this.loadings = false; }); this.reset(); getDevice(deviceId).then(response => { this.form = response.data; //图片回显 if (this.form.iconUrl) { for(var i = 0; i < this.form.iconUrl.split(',').length; i++){ console.log("this.form.iconUrl.split(',')" + i+ "=== " + this.form.iconUrl.split(',')[i]); this.pictureUrlList.push(this.form.iconUrl.split(',')[i]) this.fileList.push({ name: '照片', url: this.form.iconUrl.split(',')[i], }); } } this.open = true; this.title = "修改设备信息"; this.devicePos = [response.data.longitude, response.data.latitude]; }); }, /** 删除按钮操作 */ handleDelete(row) { const deviceIds = row.deviceId || this.ids; // const deviceIds = row.relationDeviceDetailId || this.ids; this.$confirm('是否确认删除设备名称为"' + row.deviceName + '"的数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function() { return delDevice(deviceIds); }).then(() => { this.getList(); this.msgSuccess("删除成功"); }).catch(() => {}); }, /** 导出按钮操作 */ handleExport() { const queryParams = this.queryParams; this.$confirm('是否确认导出所有设备信息数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { this.exportLoading = true; return exportDevice(queryParams); }).then(response => { this.download(response.msg); this.exportLoading = false; }).catch(() => {}); }, /**动态添加输入框方法*/ addDomain() { this.dynamicValidateForm.domains.push({ deviceName: '', deviceModel:'', deviceType:'', iotNo:'', remarksn:'', }); }, /**动态删除输入框方法*/ removeDomain(item) { var index = this.dynamicValidateForm.domains.indexOf(item) if (index !== -1) { this.dynamicValidateForm.domains.splice(index, 1) } }, /**提交数据方法*/ submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.deviceId != null) { updateDevice(this.form).then(response => { this.msgSuccess("修改成功"); this.open = false; this.getList(); }); if ( this.datalist !=null){ this.form.relationDeviceType='1'; var tDeviceInfon={ tDeviceInfo:this.form, tDeviceInfoS:this.datalist } //重新绑定修改后的关联设备 updateDetailInfoLists(JSON.stringify(tDeviceInfon)).then(response => { this.open = false; this.getList(); }); } } else { if (valid) { //获取已经选中的下级设备id const deviceIds = this.ids; // alert(deviceIds) this.form.relationDeviceType='1'; var tDeviceInfon={ tDeviceInfo:this.form, tDeviceInfoS:this.datalist } addDevice(JSON.stringify(tDeviceInfon)).then(response => { this.msgSuccess("新增成功"); this.open = false; this.getList(); }); } else { console.log('error submit!!'); return false; } } } }); }, /**关联设备添加方法*/ addDetailInfo(){ this.$refs["formDetailInfo"].validate(valid => { if (valid) { addDetailInfos(this.formDetailInfo).then(response => { // this.tableData.push(this.formDetailInfo) //关闭弹出层 this.dialogFormVisible = false; //数据表单重置 this.formDetailInfo={ deviceName: null, deviceModel:null, deviceType:null, iotNo:null, remarksn:null }; this.getDataList(); this.msgSuccess("新增成功"); }); } }); }, /**关联设备单条删除方法*/ deleteDetailInfo(row){ const deviceIds = row.relationDeviceDetailId; this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function() { return deleteDetailInfo(deviceIds); }).then(() => { // this.tableData.splice(index,1); this.getDataList(); this.msgSuccess("删除成功"); }).catch(() => {}); }, /**关联设备已经选中数据删除方法*/ deleteDataListilInfo(row,index){ const deviceIds = row.relationDeviceDetailId; //判断form表单是否有id来验证是修改的删除还是添加的删除 if (this.form.deviceId != null) { deleteDeviceDetailInfo(deviceIds).then(response => { this.msgSuccess("删除成功"); this.DetailInfoList.splice(index,1); }); }else { this.DetailInfoList.splice(index,1); this.msgSuccess("删除成功"); } }, /** * 批量删除关联设备方法 * @param row */ deleteListDetailInfo(row){ const deviceIds = this.ids; this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function() { return deleteeListDetailInfo(deviceIds); }).then(() => { this.getDataList(); this.msgSuccess("删除成功"); }).catch(() => {}); }, /**添加关联设备与设备绑定的数据 (存储到数组中)*/ insertListDetailInfo(row){ //获取已经选中的下级设备id const deviceIds = this.ids; const li=this.datalist; if (this.form.deviceId != null) { console.log("this.DetailInfoList = " + this.DetailInfoList); console.log("this.datalist = " + this.datalist); //修改 this.DetailInfoList=this.DetailInfoList.concat(this.datalist) //添加到数组中 以便下次使用 this.DetailInfoListId.push(deviceIds); // alert(this.DetailInfoListId) this.dialogTableVisible=false this.msgSuccess("添加成功"); }else { //添加 // this.DetailInfoList.push(this.datalist) //清空数组数据 将之前的数据清空 this.DetailInfoListId.splice(row); this.DetailInfoList=this.datalist; //添加到数组中 以便下次使用 this.DetailInfoListId.push(deviceIds); // alert(this.DetailInfoListId) this.dialogTableVisible=false this.msgSuccess("添加成功"); } }, /** * 选择关联设备查询方法 */ selectDataListInfo(){ //查询下级设备数据 getDdeviceDetailInfo(this.dateQueryParams).then(response => { //下级设备数据 到时候换成下级数据 this.tableData = response.rows; this.detailTotal = response.total; this.loadings = false; //打开选择关联设备弹出框 this.dialogTableVisible = true }); }, /** * 经纬度坐标方法 */ MapdialogFun() { this.dialogTableVisibles = true; }, /** * 地图关闭方法 */ dialogcancelFun() { this.dialogTableVisibles = false; }, /** * 经纬度 选择 * @param res */ getPath(res){ console.log("res", res); console.log(this.form.longitude, this.form.latitude); //确认选择经纬度 this.form.longitude = res[0]; this.form.latitude = res[1]; } } }; </script> <style> .dbtn { display: inline-block; line-height: normal; padding-left: 2px; padding-right: 2px; cursor: pointer; border-radius: 3px; border-style: solid; border-width: 0; color: rgb(48, 180, 107); } .dbtn:hover { border-width: 1px; border-color: rgb(48, 180, 107); } .tableTitle { position: relative; margin: 24px auto; width: 600px; height: 2px; background-color: #d4d4d4; text-align: center; font-size: 16px; color: rgba(101, 101, 101, 1); } .midText { position: absolute; left: 3%; background-color: #ffffff; padding: 0 15px; transform: translateX(-50%) translateY(-50%); } </style>