<template> <div id="pagetwo" class="page-data"> <!--搜素框--> <div class="page-filter"> <page-filter :query.sync="siteFilterInfo.query" :filter-list="siteFilterInfo.list" @handleClick="handleClick" /> </div> <div class="page-content"> <!--表格--> <div class="h-100"> <page-table tabIndex pagination :api-url="siteTableInfo.url" :refresh="siteTableInfo.refresh" :data.sync="siteTableInfo.data" :query="siteFilterInfo.query" :page-query="siteTableInfo.pageQuery" :list-type-info="listTypeInfo" :init-curpage="siteTableInfo.initCurpage" :field-list="siteTableInfo.fieldList" :handle="siteTableInfo.handle" @handleClick="handleClick" > <!-- 自定义插槽显示状态 --> <template v-slot:col-equips="scope"> <el-button type="text" size="small" @click="handleClick('look', scope.row)" >查看设备</el-button > </template> </page-table> </div> </div> <!-- 新增/修改的弹出框 --> <el-dialog :visible.sync="yzaddflag" width="1000px" true :title="title" @close="closedialog('ruleForm')" > <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" > <el-form-item label="站点名称" prop="stName" style="width: 100%"> <el-input size="small" v-model="ruleForm.stName" class="selectInput" ></el-input> <span >站点名称命名规则 "[项目名称]" +安装位置关键标识,例如[武昌]湖北大学东门监测站点</span > </el-form-item> <el-form-item label="站点类型" prop="stationType"> <el-select class="selectInput" size="small" v-model="ruleForm.stationType" placeholder="请选择站点类型" > <el-option class="selectOption" v-for="item in siteTypeList" :key="item.code" :label="item.name" :value="item.code" ></el-option> </el-select> <span>按实际设备类型选择站点类型</span> </el-form-item> <el-form-item label="所属项目" prop="platformCode"> <el-select class="selectInput" size="small" filterable value-key="value" @change="handleChange" v-model="projectObj" placeholder="请选择所属项目" > <el-option class="selectOption" v-for="item in projectList" :key="item.id" :label="item.key" :value="item" ></el-option> </el-select> </el-form-item> <!-- <el-form-item label="所属区域" prop="area"> <el-cascader ref="cascader" popper-class="form-cascader" class="selectInput" v-model="ruleForm.area" :options="syscityList" filterable placeholder="请选择所属区域" :props="syscityListProps" @change="handleChange" @visible-change="visiblechange" ></el-cascader> </el-form-item> --> <el-form-item label="站点安装定位" required> <el-col :span="7"> <el-form-item prop="coordinateSystem" ><el-input size="small" v-model="ruleForm.coordinateSystem" ></el-input ></el-form-item> </el-col> <el-col :span="1"> 经度</el-col> <el-col :span="5"> <el-form-item prop="lon" ><el-input size="small" v-model="ruleForm.lon"></el-input ></el-form-item> </el-col> <el-col :span="1"> 纬度</el-col> <el-col :span="5"> <el-form-item prop="lat" ><el-input size="small" v-model="ruleForm.lat"></el-input ></el-form-item> </el-col> <!-- 坐标拾取 --> <el-col :span="5"> <el-button type="primary" @click="pickLngLat()" >坐标拾取</el-button > </el-col> <!-- 坐标拾取 --> </el-form-item> <el-form-item label="站点安装位置" prop="address"> <el-input size="small" v-model="ruleForm.address" class="selectInput" ></el-input> <span >按实际安装位置填写,可填入地图定位软件显示的中文名或自行输入</span > </el-form-item> <el-form-item label="安装负责人" prop="person" style="width: 100%"> <el-input size="small" v-model="ruleForm.person" class="selectInput" ></el-input> <span>填写安装负责人</span> </el-form-item> <el-form-item label="现场安装图片" prop="height"> <!-- 点击上传按钮 --> <el-upload v-loading="loading" element-loading-text="正在上传图片..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.3)" :auto-upload="false" multiple action="#" :on-change="fileChange" > <i class="el-icon-plus">添加图片</i> </el-upload> <!-- 渲染服务器返回给我们的图片列表 --> <div class="imglist"> <div class="imgbox" v-for="(item, index) in ruleForm.fileList" :key="index" > <img class="imgtype" :src="item.fileAbbreviatedCloudStorageKey" @click="handlePictureCardPreview(item)" /> <span class="deleteSpan" @click="deleteImg(item.fileNo)" ><span class="deletex">x</span></span > </div> </div> <!-- 点击图片预览大图的效果 --> <el-dialog :visible.sync="dialogVisible" append-to-body> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </el-form-item> </el-form> </div> <span slot="footer" class="dialog-footer"> <el-button @click="resetField('ruleForm')">取消</el-button> <el-button type="primary" @click="saveOru('ruleForm')">保存</el-button> </span> </el-dialog> <!--关联设备弹窗--> <page-dialog class="page-data-dialog" :title="dialogInfo.title[dialogInfo.type]" :visible.sync="dialogInfo.visible" width="80%" :bt-loading="dialogInfo.btLoading" :bt-list="dialogInfo.btList" @handleClick="handleClick" > <template v-if="dialogInfo.type === 'look'"> <div class="page-filter"> <el-form :inline="true" :model="deviceRelatedQuery" ref="deviceRelatedQuery" size="medium" > <el-form-item label=""> <el-input v-model="deviceRelatedQuery.searchStr" placeholder="请输入设备编号/厂家" clearable ></el-input> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="medium" @click="handleClick('deviceSearch')" >查询</el-button > </el-form-item> </el-form> </div> <div class="page-content"> <el-row :gutter="20" class="h-100"> <el-col :span="10" class="h-100 flex flex-d"> <div class="table-title">未关联设备列表</div> <page-table class="flex-1" checkBox pagination type="unRelated" :api-url="deviceTableInfo.url" :refresh="deviceTableInfo.refresh" :data.sync="unRelatedDeviceTableInfo.data" :query="unRelatedDeviceTableInfo.query" :init-curpage="deviceTableInfo.initCurpage" :field-list="deviceTableInfo.fieldList" @handleClick="handleClick" @handleEvent="handleEvent" /> </el-col> <el-col :span="4" class="h-100"> <div class="btn-group"> <el-button type="primary" size="small" icon="el-icon-d-arrow-right" :disabled="isCanInsertDevice" @click="handleClick('insert')" >添加</el-button > <el-button type="primary" size="small" icon="el-icon-d-arrow-left" :disabled="isCanRemoveDevice" @click="handleClick('remove')" >移除</el-button > </div> </el-col> <el-col :span="10" class="h-100 flex flex-d"> <div class="table-title">已关联设备列表</div> <page-table class="flex-1" checkBox pagination type="isRelated" :api-url="deviceTableInfo.url" :refresh="deviceTableInfo.refresh" :data.sync="isRelatedDeviceTableInfo.data" :query="isRelatedDeviceTableInfo.query" :init-curpage="deviceTableInfo.initCurpage" :field-list="deviceTableInfo.fieldList" @handleClick="handleClick" @handleEvent="handleEvent" /> </el-col> </el-row> </div> </template> </page-dialog> <el-dialog title="坐标拾取" :visible.sync="dialogFormVisible" :append-to-body="true" :before-close="handleDialogClose" customClass="addDialog" > <markMap ref="markMap" v-on:SendLngLat="SendLngLat" style="height: 600px;width:1050px;" /> </el-dialog> </div> </template> <script> import axios from "axios"; import { mapGetters } from "vuex"; import markMap from "./markMap.vue"; export default { components: { markMap }, data() { return { dialogFormVisible: false, //站点搜索相关 siteFilterInfo: { query: { searchStr: "", startDate: "", endDate: "" }, list: [ { type: "input", label: "站点名称/编号", value: "searchStr", hideLabel: true }, { type: "date", label: "开始时间", value: "startDate", dateType: "date", datePickerOptions: "pickerOptionsStart", hideLabel: true }, { type: "date", label: "结束时间", value: "endDate", dateType: "date", datePickerOptions: "pickerOptionsEnd", hideLabel: true }, { type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true }, { type: "button", label: "添加站点", btType: "primary", icon: "el-icon-circle-plus-outline", event: "create", show: true, has: "m11-2-1" } ] }, //站点表格相关 siteTableInfo: { url: this.nozzle.listExtend, //接口地址 refresh: 1, initCurpage: 1, data: [], fieldList: [ { label: "站点编号", value: "stCode", minWidth: 120, tooltip: true }, { label: "站点名称", value: "stName", minWidth: 120, tooltip: true }, { label: "站点类型", value: "stationTypeName", width: 120 }, { label: "站点安装时间", value: "createTime", minWidth: 120, tooltip: true }, { label: "安装人", value: "person", width: 100 }, { label: "关联设备", value: "equips", width: 100, type: "slot" }, { label: "首次数据接入时间", value: "tt", minWidth: 150, tooltip: true } ], handle: { fixed: "right", label: "操作", width: "80", btList: [ { label: "修改", size: "small", type: "text", event: "update", show: true, has: "m11-2-2" } ] } }, //列表相关 listTypeInfo: {}, loadingdelet: undefined, loading: false, timer: null, dialogImageUrl: "", dialogVisible: false, title: "站点管理", siteTypeList: [], //弹框里面站点类型列表 yzaddflag: false, ruleForm: { id: "", //站点ID stName: "", //站点名称 stCode: "", //站点编号 tt: "", area: "", //所属区域 constructionStatus: "", faultStatus: "", taskStatus: "", platformCode: "", lat: "", //维度 lon: "", //经度 isPush: "", createTime: "", status: "", offlineTime: "", stationType: "", //站点类型 // stationTypeName: "", //站点名称 coordinateSystem: "WGS84坐标系", //坐标系(经纬度所对应的的坐标系) address: "", //站点安装位置 person: "", //安装负责人 fileList: [] //现场安装图片 }, rules: { // area: [ // { // required: true, // message: "请选择所属区域", // trigger: "change" // } // ], stationType: [ { required: true, message: "请选择站点类型", trigger: "change" } ], platformCode: [ { required: true, message: "请选择所属项目", trigger: "change" } ], stName: [ { required: true, message: "请填写站点名称", trigger: "blur" } ], lon: [ { required: true, message: "请填写经度", trigger: "blur" } ], lat: [ { required: true, message: "请填写纬度", trigger: "blur" } ], coordinateSystem: [ { required: true, message: "请填写站点坐标系", trigger: "blur" } ], address: [ { required: true, message: "请填写站点安装位置", trigger: "blur" } ], person: [ { required: true, message: "请填写安装负责人", trigger: "blur" } ] }, value: [], // 站点管理/所属区域数组 syscityList: [], syscityListProps: { checkStrictly: true, value: "id", label: "name" }, //当前用户权限内的项目数据 projectList: [], //弹窗相关 dialogInfo: { title: { look: "" }, width: "60%", visible: false, btLoading: false, type: "", btList: [ { label: "关闭", type: "", icon: "", event: "close", show: true } ] }, //设备表格通用相关 deviceTableInfo: { url: this.nozzle.sysEquipRelatedList, //接口地址 refresh: 1, initCurpage: 1, fieldList: [ { label: "设备名称", value: "equipDesc", minWidth: 100, tooltip: true }, { label: "设备厂家", value: "equipFactory", minWidth: 150, tooltip: true } ] }, //已关联设备表格相关 isRelatedDeviceTableInfo: { data: [], query: { sign: "" }, selectList: [] }, //未关联设备表格相关 unRelatedDeviceTableInfo: { data: [], query: { sign: "unbound" }, selectList: [] }, //设备关联过滤相关 deviceRelatedQuery: { searchStr: "", siteCode: "" }, //选中的项目对象 projectObj: {} }; }, mounted() { this.siteTableInfo.refresh = Math.random(); this.getsityType(); this.getCurrentUserProject(); //获取当前用户所绑定的项目 }, computed: { //移除按钮是否可点击 isCanRemoveDevice() { return this.isRelatedDeviceTableInfo.selectList.length ? false : true; }, //添加按钮是否可点击 isCanInsertDevice() { return this.unRelatedDeviceTableInfo.selectList.length ? false : true; }, ...mapGetters(["allDept", "allRole", "allCity"]) }, watch: { "ruleForm.area": { handler(newVal, oldVal) { if (this.$refs.cascader) { let children = this.$refs.cascader.getCheckedNodes(); if ( children.length && children[0].children && children[0].children.length < 1 ) { this.$refs.cascader.dropDownVisible = false; } } }, deep: true // 深度监听 }, dialogVisible: { handler(newVal, oldval) { if (oldval) { this.dialogImageUrl = ""; } } }, "dialogInfo.visible"(val) { if (!val) { this.deviceTableInfo.data = []; this.deviceRelatedQuery.searchStr = ""; this.dialogInfo.btLoading = false; } }, "deviceRelatedQuery.searchStr"(val) { Object.assign( this.isRelatedDeviceTableInfo.query, this.deviceRelatedQuery ); Object.assign( this.unRelatedDeviceTableInfo.query, this.deviceRelatedQuery ); }, platformCode(val) { console.log(777, val); this.ruleForm.platformCode = val; } }, methods: { //响应地图组件的确定,拾取坐标 SendLngLat(lonlat) { this.dialogFormVisible = false; this.ruleForm.lon = lonlat[0]; this.ruleForm.lat = lonlat[1]; }, //坐标拾取地图控件打开 pickLngLat() { this.dialogFormVisible = true; }, //监听面板直接叉叉掉事件 handleDialogClose() { this.dialogFormVisible = false; }, //上传头像 fileChange(file) { this.loading = true; const isLt1M = file.size / 1024 / 1024 < 5; if (file.raw.type != "image/jpeg" && file.raw.type != "image/png") { this.loading = false; this.$message.error("上传图片只能是JPG或PNG格式!"); return; } if (!isLt1M) { this.loading = false; this.$message.error("上传图片大小不能超过 5MB!"); return; } var formdata = new FormData(); formdata.append("files", file.raw); formdata.append("siteNo", this.ruleForm.stCode); formdata.append("username", "admin"); let config = { headers: { "Content-Type": "multipart/form-data" } }; axios .post(this.nozzle.upload, formdata, config) .then(res => { if (res.data.code == 1) { this.loading = false; this.$message({ message: "上传图片成功!", type: "success" }); this.ruleForm.fileList.push(res.data.data[0]); this.siteTableInfo.refresh = Math.random(); } }) .catch(res => { this.loading = false; this.$message({ message: "服务器问题!请重试!", type: "warning" }); }); }, // 删除图片按钮 deleteImg(fileNo) { this.$confirm("此操作将永久删除该图片文件,无法撤回!是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { let fileNos = []; fileNos.push(fileNo); const loadingdelet = this.$loading({ lock: true, text: "正在删除....", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)" }); this.$http .post(this.nozzle.delete, { data: { siteNo: this.ruleForm.stCode, fileNos: fileNos } }) .then(res => { loadingdelet.close(); if (res.data.code === 1) { this.siteTableInfo.refresh = Math.random(); } this.$message({ type: res.data.code === 1 ? "success" : "error", message: res.data.msg }); this.ruleForm.fileList = this.ruleForm.fileList.filter(item => { return item.fileNo != fileNo; }); }) .catch(res => { loadingdelet.close(); this.$message({ type: "info", message: "删除失败,请重试!" }); }); }) .catch(() => { loadingdelet.close(); this.$message({ type: "info", message: "已取消删除" }); }); }, // 点击图片显示图片预览大图 handlePictureCardPreview(file) { this.dialogImageUrl = file.fileCloudStorageKey; this.dialogVisible = true; }, // 弹框提交表单按钮 saveOru(formName) { this.$refs[formName].validate(valid => { if (valid) { this.$http .post(this.nozzle.saveOrupdate, { data: this.ruleForm }) .then(res => { if (res.data.code === 1) { this.siteTableInfo.refresh = Math.random(); this.yzaddflag = false; } this.$message({ message: res.data.msg, type: res.data.code === 1 ? "success" : "error", showClose: true }); }); } }); }, // 弹框取消表单按钮 resetField(formName) { this.yzaddflag = false; // console.log(9999,this.$refs[formName]); // this.$refs[formName].resetFields(); this.closedialog(); }, visiblechange(visible) { let that = this; if (visible) { this.timer = setInterval(() => { NodeList.prototype.forEach = Array.prototype.forEach; document.querySelectorAll(".el-cascader-node__label").forEach(el => { el.onclick = function() { if (this.previousElementSibling) this.previousElementSibling.click(); }; el.ondblclick = function() { if (Array.isArray(that.$refs.cascader)) { that.$refs.cascader[0].dropDownVisible = false; } else { that.$refs.cascader.dropDownVisible = false; } }; }); }, 1000); } else { clearInterval(this.timer); } }, //获取站点类型列表 async getsityType() { const { data } = await this.$http.post(this.nozzle.sityType, { data: { siteType: "site_type" } }); this.siteTypeList = data.data; }, //获取当前用户所绑定的项目 getCurrentUserProject() { this.$http .post(this.nozzle.sysPlatformList, { current: 0, size: 0, data: { searchStr: "", startDate: "", endDate: "" } }) .then(res => { if (res.data.code === 1) { this.projectList = res.data.data.list.map(item => { return { id: item.id, key: item.name, value: item.platformCode, areaId: item.area }; }); } }); }, //表格checkbox选择事件 handleEvent(event, data) { switch (event) { case "isRelated": this.isRelatedDeviceTableInfo.selectList = data; break; case "unRelated": this.unRelatedDeviceTableInfo.selectList = data; break; } }, //点击事件 handleClick(event, data, index) { switch (event) { //站点搜索 case "search": this.siteTableInfo.initCurpage = Math.random(); this.siteTableInfo.refresh = Math.random(); break; //添加站点 case "create": this.yzaddflag = true; this.title = "新增站点"; this.syscityList = this.removeEmptyChild(this.allCity); break; //编辑站点 case "update": this.title = "修改站点"; for (let key in data) { if (key === "stationType") { data[key] = data[key] ? data[key].toString() : ""; } this.projectObj = { value: data.platformCode }; this.ruleForm[key] = data[key]; } this.syscityList = this.removeEmptyChild(this.allCity); this.yzaddflag = true; break; //查看关联设备 case "look": this.dialogInfo.type = event; this.deviceRelatedQuery.siteCode = data.stCode; this.dialogInfo.visible = true; setTimeout(() => { Object.assign( this.isRelatedDeviceTableInfo.query, this.deviceRelatedQuery ); Object.assign( this.unRelatedDeviceTableInfo.query, this.deviceRelatedQuery ); this.deviceTableInfo.refresh = Math.random(); }, 0); break; //关联设备搜索 case "deviceSearch": this.deviceTableInfo.initCurpage = Math.random(); this.deviceTableInfo.refresh = Math.random(); break; //添加设备到站点 case "insert": const insertEquipNoArr = this.unRelatedDeviceTableInfo.selectList.map( item => item.equipNo ); const insertData = { siteCode: this.unRelatedDeviceTableInfo.query.siteCode, equipNos: insertEquipNoArr }; this.$http .post(this.nozzle.sysEquipInsertBatch, { data: insertData }) .then(res => { if (res.data.code === 1) { this.deviceRelatedQuery.searchStr = ""; this.deviceTableInfo.refresh = Math.random(); this.deviceTableInfo.initCurpage = Math.random(); } this.$message({ message: res.data.msg, type: res.data.code === 1 ? "success" : "error", showClose: true }); }); break; //解绑设备与站点 case "remove": const removeEquipNoArr = this.isRelatedDeviceTableInfo.selectList.map( item => item.equipNo ); const removeData = { siteCode: this.isRelatedDeviceTableInfo.query.siteCode, equipNos: removeEquipNoArr }; this.$http .post(this.nozzle.sysEquipRemoveBatch, { data: removeData }) .then(res => { if (res.data.code === 1) { this.deviceRelatedQuery.searchStr = ""; this.deviceTableInfo.refresh = Math.random(); this.deviceTableInfo.initCurpage = Math.random(); } this.$message({ message: res.data.msg, type: res.data.code === 1 ? "success" : "error", showClose: true }); }) .catch(e => { console.log(e); }); break; //关闭 case "close": setTimeout(() => { this.dialogInfo.visible = false; }, 0); break; } }, // 关闭弹框后做的操作 closedialog(formName) { this.$refs["ruleForm"].resetFields(); this.ruleForm = { id: "", //站点ID stName: "", //站点名称 stCode: "", //站点编号 tt: "", area: "", //所属区域 constructionStatus: "", faultStatus: "", taskStatus: "", platformCode: "", lat: "", //维度 lon: "", //经度 isPush: "", createTime: "", status: "", offlineTime: "", stationType: "", //站点类型 // stationTypeName: "", coordinateSystem: "WGS84", //坐标系(经纬度所对应的的坐标系) address: "", //站点安装位置 person: "", //安装负责人 fileList: [] //现场安装图片 }; // this.$refs.cascader.$refs.panel.activePath = []; // this.$refs.cascader.$refs.panel.clearCheckedNodes(); }, handleChange(data) { // 取选中数组的最后一项的id this.ruleForm.platformCode = data.value; this.ruleForm.area = data.areaId; }, //将空的children置为undefined,避免在没有下一级数据的情况下显示暂无数据 removeEmptyChild(arr) { arr.forEach(item => { if (!item.children || item.children.length < 1) { item.children = undefined; } else { this.removeEmptyChild(item.children); } }); return arr; } }, destroyed() { clearInterval(this.timer); } }; </script> <style lang="scss" scoped> .addDialog { width: 1050px; height: 650px; } .imgtype { width: 150px; height: 100px; } /deep/ .el-upload-list { display: none; } .imgbox { display: inline-block; margin: 0 20px 20px 0; position: relative; } .deleteSpan { position: absolute; display: inline-block; right: -6px; top: -8px; cursor: pointer; background: var(--white); color: var(--white); width: 15px; height: 15px; border-radius: 13px; text-align: center; } .deletex { color: var(--black); position: absolute; top: -12px; left: 4px; } .form { display: flex; align-items: center; justify-content: flex-start; height: 50px; text-align: left; color: var(--white); font-size: 14px; box-sizing: border-box; padding-left: 10px; } .form .el-input { width: 200px; margin: 0 10px; } .title, .table-title { @include hl(30px, 30px); color: #409eff; text-align: center; font-size: 16px; margin-bottom: 10px; } .tableSection { padding: 10px; background: rgba(270, 255, 255, 0.05); } /deep/ .el-dialog .el-dialog__body { text-align: left; padding-bottom: 0; } .el-dialog .selectInput { width: 30% !important; } .el-dialog .selectInput .el-select-dropdown__empty { width: 100% !important; } .btn-group { height: 100%; @include fdaj(center, center); /deep/ .el-button + .el-button { margin-left: 0; margin-top: 10px; } } </style>