<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="'Search'">查询</el-button> <el-button type="primary" @click="addform('ruleForm')" :disabled="NoADD" v-has="'m8-b1'">新增</el-button> <el-button type="primary" @click="FenZu()" v-has="'m8-b2'">分组管理</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="idsAddress" 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="tipsFontSize" label="分区二字体大小"></el-table-column> <el-table-column prop="tipsDisplay" 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)" v-has="'m8-b3'" >推送</el-button> <el-button type="text" size="small" @click="QingPin(scope.$index, scope.row)" v-has="'m8-b4'" >清屏</el-button> <el-button type="text" size="small" @click="update(scope.$index, scope.row)" v-has="'m8-b5'" >修改</el-button> <el-button type="text" size="small" @click="SeeRiZhi(scope.$index, scope.row)" v-has="'m8-b7'" >离线日志</el-button> <el-button type="text" size="small" @click="deletesite(scope.$index, scope.row)" v-has="'m8-b6'" >删除</el-button> </template> </el-table-column> </el-table> </div> <!-- </div> --> <!-- 新增/修改 --> <el-dialog :title="title" :visible.sync="yzaddflag" width="1000px"> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px"> <el-form-item label="设备名称" prop="idsName" style="width:100%"> <el-input size="small" v-model="ruleForm.idsName"></el-input> </el-form-item> <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="siteNo"> <el-input size="small" v-model="ruleForm.siteNo" :readonly="true"></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="siteName"> <el-input size="small" v-model="ruleForm.siteName" :readonly="true"></el-input> </el-form-item> <el-form-item label="屏幕属性(宽)" prop="width"> <el-input size="small" v-model="ruleForm.width" type="number"></el-input> </el-form-item> <el-form-item label="屏幕属性(高)" prop="height"> <el-input size="small" v-model="ruleForm.height" type="number"></el-input> </el-form-item> <div class="leftFormBox"> <p class="FormP">分区一</p> <div class="FormFenQu"> <el-form-item label="字幕内容" prop="display"> <el-input type="small" 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"></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="small" 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="small" v-model="ruleForm.policeDisplay"></el-input> </el-form-item> <el-form-item label="分区X坐标" prop="disX"> <el-input type="number" v-model="ruleForm.disX"></el-input> </el-form-item> <el-form-item label="分区Y坐标" prop="disY"> <el-input type="number" v-model="ruleForm.disY"></el-input> </el-form-item> <el-form-item label="分区宽" prop="disW"> <el-input type="number" v-model="ruleForm.disW"></el-input> </el-form-item> <el-form-item label="分区高" prop="disH"> <el-input type="number" v-model="ruleForm.disH"></el-input> </el-form-item> </div> </div> <div class="RightFormBox"> <p class="FormP">分区二</p> <div class="FormFenQu"> <el-form-item label="字幕内容" prop="tipsDisplay"> <el-input type="small" 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"></el-input> </el-form-item> <el-form-item label="分区X坐标" prop="tipsX"> <el-input type="number" v-model="ruleForm.tipsX"></el-input> </el-form-item> <el-form-item label="分区Y坐标" prop="tipsY"> <el-input type="number" v-model="ruleForm.tipsY"></el-input> </el-form-item> <el-form-item label="分区宽" prop="tipsW"> <el-input type="number" v-model="ruleForm.tipsW"></el-input> </el-form-item> <el-form-item label="分区高" prop="tipsH"> <el-input type="number" v-model="ruleForm.tipsH"></el-input> </el-form-item> </div> </div> </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 class="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 class="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> <!-- 推送 --> <el-dialog title="推送" :visible.sync="TuiSongDialog" width="500px"> <el-input type="number" v-model="ShuiWeiValue" placeholder="调试值(非必填,测试场景使用)"></el-input> <el-input v-model="idsDevValue" v-show="false"></el-input> <span slot="footer" class="dialog-footer"> <el-button @click="TuiSongDialog = false">取 消</el-button> <el-button type="primary" @click="TuiSong()">确 定</el-button> </span> </el-dialog> <!-- 日志 --> <el-dialog title="日志" :visible.sync="RiZhiDialog" width="1000px"> <div class="DialogSearch2" id="RiZhiBOx"> <span class="SelectTitle">时间选择:</span> <el-date-picker v-model="TimeValue" type="datetimerange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" ></el-date-picker> <el-button type="primary" @click="loadRizhi()">搜索</el-button> <span class="SelectTitle">是否监听日志:</span> <el-select v-model="RiZhiJianTingvalue" placeholder="请选择" @change="RiZhiChange"> <el-option v-for="item in RiZhiJianTingOption" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </div> <div class="DialogCentent2"> <el-table :data="RiZhiData" style="width: 100%;height:calc(100% - 45px)" stripe> <el-table-column prop="idsDev" label="设备编号"></el-table-column> <el-table-column prop="idsName" label="设备名称"></el-table-column> <el-table-column prop="createTime" label="离线时间"> <template slot-scope="scope"> <span style="color: red">{{scope.row.createTime}}</span> </template> </el-table-column> </el-table> <el-pagination @size-change="RiZhiPRSizeChange" @current-change="RiZhiPRCurrentChange" :current-page="RiZhiPRPage" :page-sizes="[10, 20, 50, 100]" :page-size="RiZhiPRSize" layout="total, sizes, prev, pager, next, jumper" :total="RiZhiPRDatagridDataLength" style="margin-top:10px;" ></el-pagination> </div> </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: "", width: "256", height: "128", disX: "0", disY: "0", disW: "256", disH: "96", tipsX: "0", tipsY: "96", tipsW: "256", tipsH: "32" }, 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" } ], width: [ { required: true, message: "此项为必填项", trigger: "blur" } ], height: [ { required: true, message: "此项为必填项", trigger: "blur" } ], disX: [ { required: true, message: "此项为必填项", trigger: "blur" } ], disY: [ { required: true, message: "此项为必填项", trigger: "blur" } ], disW: [ { required: true, message: "此项为必填项", trigger: "blur" } ], disH: [ { required: true, message: "此项为必填项", trigger: "blur" } ], tipsX: [ { required: true, message: "此项为必填项", trigger: "blur" } ], tipsY: [ { required: true, message: "此项为必填项", trigger: "blur" } ], tipsW: [ { required: true, message: "此项为必填项", trigger: "blur" } ], tipsH: [ { 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, //当没有站点时 不允许新增 ShuiWeiValue: "", //推送时 的水位 idsDevValue: "", //推送时 的idsDev TuiSongDialog: false, // 推送弹窗 RiZhiDialog: false, //日志弹窗 RiZhiID: "", //点击查看日志的数据id RiZhiData: [], //日志数据 RiZhiPRPage: 1, //分页默认显示页 RiZhiPRDatagridDataLength: 0, //分页上显示的数据总条数 RiZhiPRSize: 10, //分页上显示的每页的条数 TimeValue: [ this.moment() .subtract("days", 3) .format("YYYY-MM-DD HH:mm:ss"), this.moment().format("YYYY-MM-DD HH:mm:ss") ], //时间 pickerOptions: { shortcuts: [ { text: "最近一周", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit("pick", [start, end]); } }, { text: "最近一个月", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit("pick", [start, end]); } }, { text: "最近三个月", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit("pick", [start, end]); } } ] }, //时间快捷选项 RiZhiJianTingOption: [ { label: "是", value: 1 }, { label: "否", value: 0 } ], //监听 RiZhiJianTingvalue: "" //监听 }; }, 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 == 1) { if (res.data.data == null) { this.$message({ message: "暂无数据", type: "warning" }); } else { this.list = res.data.data; } } else { message(response); } }); }, // 推送 sendmsg(index, rows) { this.TuiSongDialog = true; this.idsDevValue = rows.idsDev; this.ShuiWeiValue = ""; }, // 推送功能 TuiSong() { let fd = new FormData(); fd.append("idsDev", this.idsDevValue); fd.append("value", this.ShuiWeiValue); let url = this.nozzle.subtitlesLedSend; this.$http.post(url, fd).then(res => { if (res.data.code == 1) { this.$message({ message: "推送成功", type: "success" }); } else { this.$message({ message: "推送失败", type: "error" }); } this.TuiSongDialog = false; }); }, // 查询未绑定站点设备 getLed() { let url = this.nozzle.subtitlesLedQueryLedNo; this.$http.post(url).then(res => { if (res.data.code == 1) { this.ledlist = res.data.data; } }); }, addform(formName) { this.yzaddflag = true; this.selflag = false; this.getLed(); 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 == 1) { 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)); console.log(gets); gets[0].width = gets[0].programAttribute.split(",")[0]; gets[0].height = gets[0].programAttribute.split(",")[1]; gets[0].disX = gets[0].displayAttribute.split(",")[0]; gets[0].disY = gets[0].displayAttribute.split(",")[1]; gets[0].disW = gets[0].displayAttribute.split(",")[2]; gets[0].disH = gets[0].displayAttribute.split(",")[3]; gets[0].tipsX = gets[0].tipsAttribute.split(",")[0]; gets[0].tipsY = gets[0].tipsAttribute.split(",")[1]; gets[0].tipsW = gets[0].tipsAttribute.split(",")[2]; gets[0].tipsH = gets[0].tipsAttribute.split(",")[3]; 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 == 1) { this.$message({ message: "删除成功", type: "success" }); this.getleddata(); } else { this.$message({ message: "删除失败", type: "error" }); } this.deleteflag = false; }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); }, QingPin(index, rows) { this.idsDevdel = rows.idsDev; console.log(rows); this.$confirm("此操作将清除全部字幕信息, 是否清除?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { let fd = new FormData(); fd.append("idsDev", this.idsDevdel); let url = this.nozzle.subtitlesLedClean; this.$http.post(url, fd).then(res => { if (res.data.code == 1) { this.$message({ message: "清除成功", type: "success" }); this.getleddata(); } else { this.$message({ message: "清除失败", type: "error" }); } this.deleteflag = false; }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); }, SeeRiZhi(index, rows) { this.RiZhiDialog = true; this.RiZhiID = rows.idsDev; this.RiZhiJianTingvalue = rows.logStatus; this.loadRizhi(); }, // 加载日志 loadRizhi() { var params = { startTime: this.TimeValue[0], endTime: this.TimeValue[1], idsDev: this.RiZhiID, page: this.PRPage, rows: this.PRSize }; this.$http .post(this.nozzle.subtitlesledQueryQueryLogs, params) .then(response => { this.RiZhiData = response.data.data.list; this.RiZhiPRDatagridDataLength = response.data.data.totalCount; }) .catch(response => { message(response); }); }, // 日志监听 改变 RiZhiChange() { var params = { idsDev: this.RiZhiID, logStatus: this.RiZhiJianTingvalue }; this.$http .post(this.nozzle.subtitlesLedUpdate, params) .then(response => { this.getleddata(); message(response); }) .catch(response => { message(response); }); }, // 分组管理 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(); }, RiZhiPRSizeChange(val) { // 改变每页的条数 this.RiZhiPRSize = val; this.loadRizhi(); }, RiZhiPRCurrentChange(val) { console.log(val); //改变页数 this.RiZhiPRPage = val; this.loadRizhi(); }, // 多选 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; font-size: 0; } .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; } #RiZhiBOx.el-input, #RiZhiBOx .el-input__inner { width: 400px !important; } .tdbtn { border: 1px solid #ffffff; padding: 2px 10px; cursor: pointer; margin-right: 10px; } .el-form-item { margin-bottom: 14px; width: 49%; display: inline-block; } /* 弹窗 */ #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; height: 520px !important; } .el-dialog__header { text-align: center !important; } .leftFormBox, .RightFormBox { width: calc(50% - 10px); height: 350px; overflow: auto; float: left; margin-left: 10px; } .leftFormBox > .el-form-item { margin-bottom: 14px; width: 100%; display: inline-block; } .FormFenQu > .el-form-item { margin-bottom: 14px; width: 100%; display: inline-block; } .FormP { color: #18ffc9; height: 20px; line-height: 20px; } .FormFenQu { width: 100%; height: calc(100% - 20px); overflow: auto; } </style>