<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 label="所在地址" prop="deviceAddr">--> <!-- <el-input--> <!-- v-model="queryParams.deviceAddr"--> <!-- 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" v-hasPermi="['device:device:add']" >新增</el-button > </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['device:device:edit']" >修改</el-button > </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['device:device:remove']" >删除</el-button > </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['device:device:export']" >导出</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"> <template slot-scope="List"> <img :src="List.row.iconUrl" width="100px" /> </template> </el-table-column> <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"> <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)" v-hasPermi="['device:device:edit']" >修改</el-button > <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:device:remove']" >删除</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" v-hasPermi="['device:device:add']" >新增</el-button > </el-col> <!-- <el-col :span="1.5">--> <!-- <el-button--> <!-- type="success"--> <!-- plain--> <!-- icon="el-icon-edit"--> <!-- size="mini"--> <!-- :disabled="single"--> <!-- @click="handleUpdate"--> <!-- v-hasPermi="['device:device:edit']"--> <!-- >修改</el-button>--> <!-- </el-col>--> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="deleteListDetailInfo" v-hasPermi="['device:device:remove']" >删除</el-button > </el-col> <!-- <el-col :span="1.5">--> <!-- <el-button--> <!-- type="warning"--> <!-- plain--> <!-- icon="el-icon-download"--> <!-- size="mini"--> <!-- :loading="exportLoading"--> <!-- @click="handleExport"--> <!-- v-hasPermi="['device:device:export']"--> <!-- >导出</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)" v-hasPermi="['device:device:remove']" >删除</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)" v-hasPermi="['device:device:remove']" >删除</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: [], /**弹出层*/ //下级设备数据数组 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.form.dealPlan = res.fileName; this.form.iconUrl = res.url; 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 = ""; 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.reset(); this.open = true; this.title = "添加设备信息"; }, /** 修改按钮操作 */ handleUpdate(row) { //查询企业名称下拉框数据 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) { this.fileList.push({ name: "照片", url: this.form.iconUrl, }); } 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( '是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", { 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) { //修改 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>