<template> <div id="LEDConfig"> <div class="formBox"> <span class="SelectTitle">LED屏分组:</span> <el-select v-model="Project" filterable placeholder="请选择分组" @change="loadProjectUser(Project)" > <el-option v-for="item in ProjectOptions" :key="item.index" :label="item.groupName" :value="item.id" ></el-option> </el-select> <span class="SelectTitle">选择站点:</span> <el-select v-model="Site" filterable placeholder="请选择站点"> <el-option v-for="item in SiteOptions" :key="item.index" :label="item.field" :value="item.siteNo" ></el-option> </el-select> <!-- <label for>请输入设备编号:</label> <el-input size="small" v-model="query" placeholder="设备编号"></el-input>--> <el-button type="primary" @click="getleddata()" v-has="'RolesAdd'">查询</el-button> <el-button type="primary" @click="addform('ruleForm')" :disabled="NoADD">新增</el-button> <el-button type="primary" @click="FenZu()">分组管理</el-button> </div> <div class="tableBox"> <el-table :data="list" style="width: 100%;height:calc(100% - 45px)"> <el-table-column prop="idsDev" label="设备编号"></el-table-column> <el-table-column prop="idsName" label="设备名称"></el-table-column> <el-table-column prop="siteNo" label="站点编号"></el-table-column> <el-table-column prop="siteName" label="站点名称"></el-table-column> <el-table-column prop="fontSize" label="字体大小"></el-table-column> <el-table-column prop="display" label="显示内容"></el-table-column> <el-table-column prop="tipsDisplay" label="字幕内容"></el-table-column> <el-table-column prop="tipsFontSize" label="字幕字体大小"></el-table-column> <el-table-column prop="idsAddress" label="设备地址"></el-table-column> <el-table-column prop="earlyDisplay" label="预警内容"></el-table-column> <el-table-column prop="policeDisplay" label="报警内容"></el-table-column> <el-table-column prop="onlineType" label="是否在线"> <template slot-scope="scope"> <span v-if="scope.row.onlineType==1" style="color:#03fd03">在线</span> <span v-else style="color: red">离线</span> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="sendmsg(scope.$index, scope.row)">推送</el-button> <el-button type="text" size="small" @click="update(scope.$index, scope.row)">修改</el-button> <el-button type="text" size="small" @click="deletesite(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> <!-- </div> --> <!-- 新增/修改 --> <el-dialog :title="title" :visible.sync="yzaddflag" width="40%"> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px"> <el-form-item label="设备编号" prop="idsDev"> <el-select :disabled="selflag" size="small" v-model="ruleForm.idsDev" placeholder="请选择"> <el-option v-for="item in ledlist" :key="item" :label="item" :value="item"></el-option> </el-select> </el-form-item> <el-form-item label="设备名称" prop="idsName"> <el-input size="small" v-model="ruleForm.idsName"></el-input> </el-form-item> <el-form-item label="设备地址" prop="idsAddress"> <el-input size="small" v-model="ruleForm.idsAddress"></el-input> </el-form-item> <el-form-item label="站点编号" prop="siteNo"> <el-input size="small" v-model="ruleForm.siteNo" :readonly="true"></el-input> </el-form-item> <el-form-item label="站点名称" prop="siteName"> <el-input size="small" v-model="ruleForm.siteName" :readonly="true"></el-input> </el-form-item> <el-form-item label="显示内容" prop="display"> <el-input type="textarea" v-model="ruleForm.display"></el-input> </el-form-item> <el-form-item label="字体大小" prop="fontSize"> <el-input type="number" size="small" v-model="ruleForm.fontSize" min="0" max="40"></el-input> </el-form-item> <el-form-item label="预警值" prop="earlyValue"> <el-input size="small" type="number" v-model="ruleForm.earlyValue"></el-input> </el-form-item> <el-form-item label="预警内容" prop="earlyDisplay"> <el-input type="textarea" v-model="ruleForm.earlyDisplay"></el-input> </el-form-item> <el-form-item label="报警值" prop="policeValue"> <el-input size="small" type="number" v-model="ruleForm.policeValue"></el-input> </el-form-item> <el-form-item label="报警内容" prop="policeDisplay"> <el-input type="textarea" v-model="ruleForm.policeDisplay"></el-input> </el-form-item> <el-form-item label="宣传字幕" prop="tipsDisplay"> <el-input type="textarea" v-model="ruleForm.tipsDisplay"></el-input> </el-form-item> <el-form-item label="宣传字体大小" prop="tipsFontSize"> <el-input type="number" size="small" v-model="ruleForm.tipsFontSize" min="0" max="40"></el-input> </el-form-item> </el-form> </div> <span slot="footer" class="dialog-footer"> <el-button @click="yzaddflag = false">取 消</el-button> <el-button type="primary" @click="confirm('ruleForm')">确 定</el-button> </span> </el-dialog> <!-- 删除 --> <el-dialog title="删除" :visible.sync="deleteflag" width="40%"> <div>确定删除站点信息吗?</div> <span slot="footer" class="dialog-footer"> <el-button @click="deleteflag = false">取 消</el-button> <el-button type="primary" @click="deletesite()">确 定</el-button> </span> </el-dialog> <!-- 分组管理 --> <el-dialog title="分组管理" :visible.sync="FenZuflag" width="600px"> <div id="DialogSearch"> <el-button type="primary" @click="LoadFZData()" size="mini">刷新</el-button> <el-button type="primary" icon="el-icon-plus" @click="AddFenZu()" size="mini">新增分组</el-button> </div> <div id="DialogCentent"> <el-table :data="FZTableData" style="width: 100%;height:calc(100% - 45px)" stripe> <el-table-column prop="groupName" label="分组名称"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="EditFZ(scope.$index, scope.row)" style="margin:0 10px" >修改名称</el-button> <el-button type="text" size="small" @click="DelfZ(scope.$index, scope.row)" style="margin:0 10px" >删除分组</el-button> <el-button type="text" size="small" @click="SiteGuanl(scope.$index, scope.row)" style="margin:0 10px" >站点管理</el-button> </template> </el-table-column> </el-table> </div> <!-- 新增 / 修改 分组名称 --> <el-dialog :visible.sync="FenZuflag2" width="400px" append-to-body top="20%" :title="FenzuTitle" > <el-input placeholder="请输入分组名称" v-model="AddFZInput" clearable></el-input> <el-button type="primary" size="small" @click="AddFenZuUpdata()">确定</el-button> </el-dialog> <!-- 分组分配站点 --> <el-dialog :visible.sync="SiteDialog" width="400px" append-to-body top="10%" title="已分配站点"> <div id="DialogSearch2"> <el-button type="primary" @click="LoadSiteData()" size="mini">刷新</el-button> <el-button type="primary" icon="el-icon-plus" @click="AddSiteu()" size="mini">新增站点</el-button> </div> <div id="DialogCentent2"> <el-table :data="SiteTableData" style="width: 100%;height:calc(100% - 45px)" stripe> <el-table-column prop="siteName" label="站点名称"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="Delsite(scope.$index, scope.row)" style="margin:0 10px" >删除站点</el-button> </template> </el-table-column> </el-table> </div> <el-dialog :visible.sync="NoSiteDialog" width="700px" append-to-body top="10%" title="新增站点"> <div class="DialogSearch2"> <el-input placeholder="请输入内容" v-model="loadNoFPSiteInput" clearable></el-input> <el-button type="primary" @click="loadNoFPSite()" size="mini">搜索</el-button> <el-button type="primary" icon="el-icon-plus" @click="AddNoSiteupdata()" size="mini" >分配已勾选的站点</el-button> </div> <div class="DialogCentent2"> <el-table :data="NoSiteData" style="width: 100%;height:calc(100% - 45px)" stripe @selection-change="handleSelectionChange" tooltip-effect="dark" show-overflow-tooltip="true" > <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="siteName" label="站点名称"></el-table-column> </el-table> <el-pagination @size-change="PRSizeChange" @current-change="PRCurrentChange" :current-page="PRPage" :page-sizes="[10, 20, 50, 100]" :page-size="PRSize" layout="total, sizes, prev, pager, next, jumper" :total="PRDatagridDataLength" style="margin-top:10px;" ></el-pagination> </div> </el-dialog> </el-dialog> </el-dialog> </div> </template> <script> import { message } from "./../../util/item"; export default { name: "LEDConfig", data() { return { query: "", list: [], ledlist: [], // 新增 title: "", selflag: false, yzaddflag: false, ruleForm: { idsDev: "", idsName: "", siteNo: "", siteName: "", display: "", tipsDisplay: "", tipsFontSize: "", earlyValue: "", earlyDisplay: "", fontSize: "", policeValue: "", policeDisplay: "" }, rules: { idsDev: [ { required: true, message: "请选择", trigger: "change" } ], idsName: [ { required: true, message: "此项为必填项", trigger: "blur" } ], idsAddress: [ { required: true, message: "此项为必填项", trigger: "blur" } ], siteNo: [ { required: true, message: "此项为必填项", trigger: "blur" } ], siteName: [ { required: true, message: "此项为必填项", trigger: "blur" } ], display: [ { required: true, message: "此项为必填项", trigger: "blur" } ], tipsDisplay: [ { required: true, message: "此项为必填项", trigger: "blur" } ], earlyValue: [ { required: true, message: "此项为必填项", trigger: "blur" } ], earlyDisplay: [ { required: true, message: "此项为必填项", trigger: "blur" } ], fontSize: [ { required: true, message: "此项为必填项", trigger: "blur" } ], tipsFontSize: [ { required: true, message: "此项为必填项", trigger: "blur" } ], policeValue: [ { required: true, message: "此项为必填项", trigger: "blur" } ], policeDisplay: [ { required: true, message: "此项为必填项", trigger: "blur" } ] }, ProjectOptions: [], //分组的数据源 Project: "", //分组ID Site: "", //站点 SiteNAME: "", //站点名称 SiteOptions: [], //站点的数据源 deleteflag: false, FenZuflag: false, //分组管理弹窗 FZTableData: [], //分组数据 FenZuflag2: false, //新增 / 修改 分组弹窗 FenZuflag2type: 1, //1为新增 2为修改 FenzuTitle: "", //弹窗的title AddFZInput: "", ClickID: "", //点击修改 以及 删除 的分组ID SiteDialog: false, //站点管理弹窗 SiteDialogID: "", //站点管理弹窗 SiteTableData: [], //站点表格数据 NoSiteDialog: false, //未分配的站点弹窗状态 NoSiteData: [], //未分配的站点数据 idList2: [], //记录点击的站点的id PRPage: 1, //分页默认显示页 PRDatagridDataLength: 0, //分页上显示的数据总条数 PRSize: 10, //分页上显示的每页的条数 multipleSelection: [], loadNoFPSiteInput: "", //模糊搜索未分配站点 NoADD: true //当没有站点时 不允许新增 }; }, mounted() { this.LoadFenZu(); // this.getleddata(); this.getLed(); }, methods: { search() {}, // 获取分组信息 LoadFenZu() { this.SiteOptions = []; this.Site = ""; this.ProjectOptions = []; this.Project = ""; this.$http .post(this.nozzle.subtitlesledQuerySiteGroup) .then(response => { if (response.data.data.list.length > 0) { this.ProjectOptions = response.data.data.list; this.Project = this.ProjectOptions[0].id; this.loadProjectUser(this.Project); } else { this.$message({ showClose: true, message: "无分组", type: "warning" }); this.NoADD = true; } }) .catch(response => { // this.$message({ // showClose: true, // message: "请求分组失败", // type: "warning" // }); }); }, // 点积分组 loadProjectUser(vId) { this.SiteOptions = []; this.Site = ""; this.$http .post(this.nozzle.subtitlesledQuerySiteGroup, { parentId: vId }) .then(response => { if (response.data.data.list.length > 0) { this.SiteOptions = response.data.data.list; this.Site = this.SiteOptions[0].siteNo; console.log(); this.getleddata(); this.NoADD = false; } else { this.$message({ showClose: true, message: "无站点", type: "warning" }); this.list = []; this.NoADD = true; } }) .catch(response => { message(response); }); }, // 获取设备信息 getleddata() { this.list = []; let url = this.nozzle.subtitlesLedQuery; this.$http .post(url, { siteNo: this.Site }) .then(res => { if (res.data.code == 200) { if (res.data.data == null) { this.$message({ message: "暂无数据", type: "warning" }); } else { this.list = res.data.data; } } else { message(response); } }); }, // 推送 sendmsg(index, rows) { var idsdev = rows.idsDev; let fd = new FormData(); fd.append("idsDev", idsdev); let url = this.nozzle.subtitlesLedSend; this.$http.post(url, fd).then(res => { if (res.data.code == 200) { this.$message({ message: "推送成功", type: "success" }); } else { this.$message({ message: "推送失败", type: "error" }); } }); }, // 查询未绑定站点设备 getLed() { let url = this.nozzle.subtitlesLedQueryLedNo; this.$http.post(url).then(res => { if (res.data.code == 200) { this.ledlist = res.data.data; } }); }, addform(formName) { this.yzaddflag = true; this.selflag = false; if (this.$refs[formName] !== undefined) { this.$refs[formName].resetFields(); } console.log(this.Site); this.title = "新增"; this.ruleForm.siteNo = this.Site; for (var i = 0; i < this.SiteOptions.length; i++) { if (this.Site == this.SiteOptions[i].siteNo) { this.ruleForm.siteName = this.SiteOptions[i].siteName; } } }, confirm(formName) { this.$refs[formName].validate(valid => { if (valid) { let url; if (this.selflag) { url = this.nozzle.subtitlesLedUpdate; } else { url = this.nozzle.subtitlesLedSave; } this.$http.post(url, this.ruleForm).then(res => { if (res.data.code == 200) { this.$message({ message: res.data.msg, type: "success" }); this.yzaddflag = false; this.getleddata(); } else { this.$message({ message: res.data.msg, type: "error" }); } }); } else { console.log("error submit!!"); return false; } }); }, update(index, rows) { this.title = "修改"; this.yzaddflag = true; this.selflag = true; var idsDev = rows.idsDev; // 解决深度拷贝的问题 let vs = this.list.filter(item => item.idsDev == idsDev); var gets = JSON.parse(JSON.stringify(vs)); this.$nextTick(() => { this.ruleForm = gets[0]; }); }, deletesite(index, rows) { this.idsDevdel = rows.idsDev; console.log(rows); this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { let params = { idsDev: this.idsDevdel }; let url = this.nozzle.subtitlesLedDelete; this.$http.post(url, params).then(res => { if (res.data.code == 0) { this.$message({ message: "删除成功", type: "success" }); this.getleddata(); } else { this.$message({ message: "删除失败", type: "error" }); } this.deleteflag = false; }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); }, // 分组管理 FenZu() { this.FenZuflag = true; this.LoadFZData(); }, // 加载分组信息 LoadFZData() { this.$http .post(this.nozzle.subtitlesledQuerySiteGroup) .then(response => { this.FZTableData = response.data.data.list; }) .catch(response => {}); }, // 分组新增弹窗 AddFenZu() { this.FenZuflag2 = true; this.AddFZInput = ""; this.FenzuTitle = "新增分组"; this.FenZuflag2type = 1; }, // 分组新增/修改 提交 AddFenZuUpdata() { if (this.AddFZInput.length == "") { this.$message({ showClose: true, message: "请输入分组名称后再新增", type: "warning" }); return; } if (this.FenZuflag2type == 1) { // 新增 var params2 = [ { groupName: this.AddFZInput } ]; this.$http .post(this.nozzle.subtitlesledaddSiteGroup, params2) .then(response => { message(response); this.FenZuflag2 = false; this.LoadFZData(); }) .catch(response => {}); } else { // 修改 var params2 = { groupName: this.AddFZInput, id: this.ClickID }; this.$http .post(this.nozzle.subtitlesledUpdateSiteGroup, params2) .then(response => { message(response); this.FenZuflag2 = false; this.LoadFZData(); }) .catch(response => {}); } }, // 分组修改 EditFZ(index, rows) { this.FenZuflag2 = true; this.FenzuTitle = "修改分组"; this.FenZuflag2type = 2; this.AddFZInput = rows.groupName; this.ClickID = rows.id; }, // 删除 DelfZ(index, rows) { this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { var DelID = []; DelID.push(rows.id); this.$http .post(this.nozzle.subtitlesleddeleteSiteGroup, DelID) .then(response => { message(response); this.LoadFZData(); }) .catch(response => { message(response); }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); }, // 分组站点分配 SiteGuanl(index, rows) { this.SiteDialog = true; this.SiteDialogID = rows.id; this.LoadSiteData(); }, // 分组站点分配数据 LoadSiteData() { this.$http .post(this.nozzle.subtitlesledQuerySiteGroup, { parentId: this.SiteDialogID }) .then(response => { this.SiteTableData = response.data.data.list; }) .catch(response => { message(response); }); }, // 删除站点 Delsite(index, rows) { this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { var DelID = []; DelID.push(rows.id); this.$http .post(this.nozzle.subtitlesleddeleteSiteGroup, DelID) .then(response => { message(response); this.LoadSiteData(); }) .catch(response => { message(response); }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); }, // 新增站点 AddSiteu() { this.NoSiteDialog = true; this.loadNoFPSite(); }, // 获取未分配的站点 loadNoFPSite() { var params = { siteName: this.loadNoFPSiteInput, page: this.PRPage, rows: this.PRSize }; this.$http .post(this.nozzle.subtitlesledQuerySiteMes, params) .then(response => { this.NoSiteData = response.data.data.list; this.PRDatagridDataLength = response.data.data.totalCount; }) .catch(response => { message(response); }); }, PRSizeChange(val) { // 改变每页的条数 this.PRSize = val; this.loadNoFPSite(); }, PRCurrentChange(val) { console.log(val); //改变页数 this.PRPage = val; this.loadNoFPSite(); }, // 多选 handleSelectionChange(val) { this.multipleSelection = val; }, AddNoSiteupdata() { if (this.multipleSelection.length == 0) { this.$message({ showClose: true, message: "请勾选站点后再新增", type: "warning" }); return; } for (var i = 0; i < this.multipleSelection.length; i++) { this.multipleSelection[i].parentId = this.SiteDialogID; } this.$http .post(this.nozzle.subtitlesledaddSiteGroup, this.multipleSelection) .then(response => { message(response); this.NoSiteDialog = false; this.LoadSiteData(); }) .catch(response => { message(response); }); } } }; </script> <style scoped> #LEDConfig { box-sizing: border-box; position: relative; padding: 10px; } .SelectTitle { display: inline-block; margin-left: 5px; text-align: center; height: 60px; line-height: 60px; color: white; } .tab { height: 50px; display: flex; justify-content: flex-start; align-items: center; background: rgba(225, 225, 225, 0.1); } .tabbox { color: #18ffc9; font-size: 16px; display: inline-block; width: 150px; text-align: center; font-weight: bold; height: 50px; line-height: 50px; cursor: pointer; box-sizing: border-box; } .tabboxactive { border-bottom: 2px solid #1bbe60; } .formBox { height: 60px; width: 100%; display: flex; align-items: center; background: rgba(53, 53, 53, 0); } .formBox > input { height: 30px; color: #ffffff; padding: 0 10px; background: none; outline: none; border: #17f6c3 1px solid; } .formBox > label { color: #ffffff; margin-left: 20px; } #search { display: inline-block; height: 33px; line-height: 33px; background: #409eff; color: #ffffff; padding: 0 20px; border-radius: 3px; cursor: pointer; font-size: 13px; margin-left: 20px; } .tableBox { height: calc(100% - 60px); width: 100%; overflow: auto; background: rgba(225, 225, 225, 0.1); } table { width: 100%; border-collapse: collapse; } .thead { color: #fff; font-size: 15px; height: 45px; background: rgba(225, 225, 225, 0.1); } .tbody { color: #ffffff; font-size: 14px; text-align: center; height: 40px; border-bottom: 1px solid #0d2027; } .footer { position: fixed; left: 20; right: 20; bottom: 0; height: 35px; } .el-select, .el-input, .el-input__inner { width: 250px !important; } .tdbtn { border: 1px solid #ffffff; padding: 2px 10px; cursor: pointer; margin-right: 10px; } .el-form-item { margin-bottom: 14px; } /* 弹窗 */ #DialogSearch { width: 100%; height: 60px; line-height: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; text-align: left; } #DialogSearch .el-input { width: 250px; margin: 0 10px; } #DialogCentent { width: 100%; height: 600px; } /* 弹窗 */ #DialogSearch2 { width: 100%; height: 60px; line-height: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; text-align: left; } #DialogSearch2 .el-input { width: 250px; margin: 0 10px; } #DialogCentent2 { width: 100%; height: 400px; } .el-dialog__body { padding-top: 0 !important; } .el-dialog__header { text-align: center !important; } </style>