<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>
