<template>
<div id="AlarmConfiguration">
<div id="ACTopSearchBox">
<el-select
v-model="ProjectNo"
filterable
placeholder="请选择"
@change="selectV()"
>
<el-option
v-for="item in SiteOptions"
:key="item.index"
:label="item.name"
:value="item.platformCode"
></el-option>
</el-select>
<el-input
placeholder="请输入站点名称"
v-model="ACValue"
clearable
></el-input>
<el-button type="primary" icon="el-icon-search" @click="loadGridData()"
>搜索</el-button
>
</div>
<div
id="ACContent"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.3)"
>
<el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)">
<el-table-column prop="stCode" label="站点编号"></el-table-column>
<el-table-column prop="stName" label="名称"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="details(scope.$index, scope.row)"
>查看详情</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="ACSizeChange"
@current-change="ACCurrentChange"
:current-page="ACPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="ACSize"
layout="total, sizes, prev, pager, next, jumper"
:total="ACDatagridDataLength"
style="margin-top:10px;"
></el-pagination>
</div>
<el-dialog :visible.sync="dialogVisible" width="60%">
<div id="DialogSearch">
<el-input
placeholder="请输入因子名"
v-model="YZValue"
clearable
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="loadGridDataYZ()"
>搜索</el-button
>
<el-button type="primary" icon="el-icon-plus" @click="AddJinJieXian()"
>新增警戒线</el-button
>
</div>
<div id="DialogCentent">
<el-table
:data="YZTableData"
style="width: 100%;height:calc(100% - 45px)"
>
<el-table-column
prop="factorsAscii"
label="因子编号"
></el-table-column>
<el-table-column
prop="factorsName"
label="因子名称"
></el-table-column>
<el-table-column
prop="compareWayDesc"
label="运算符"
></el-table-column>
<el-table-column prop="warnValue" label="线值"></el-table-column>
<el-table-column prop="warnTypeDesc" label="警戒类型">
<template slot-scope="scope">
<span v-if="scope.row.warnType == 2" style="color:red">{{
scope.row.warnTypeDesc
}}</span>
<span v-else style="color: yellow">{{
scope.row.warnTypeDesc
}}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="Edit(scope.$index, scope.row)"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="Del(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="YZSizeChange"
@current-change="YZCurrentChange"
:current-page="YZPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="YZSize"
layout="total, sizes, prev, pager, next, jumper"
:total="YZDatagridDataLength"
style="margin-top:10px;"
></el-pagination>
</div>
<el-dialog
:visible.sync="dialogVisible2"
width="400px"
append-to-body
top="20%"
>
<div class="Dialog2List">
<span class="Dialog2ListName">级 别:</span>
<el-select
v-model="Dialog2warnType"
filterable
placeholder="请选择级别"
:disabled="!isAdd"
>
<el-option
v-for="item in Dialog2JB"
:key="item.warnType"
:label="item.warnTypeDesc"
:value="item.warnType"
></el-option>
</el-select>
</div>
<div class="Dialog2List">
<span class="Dialog2ListName">因 子:</span>
<el-select
v-model="Dialog2factors"
filterable
placeholder="请选择因子"
:disabled="!isAdd"
@change="Dialog2factorsChange"
>
<el-option
v-for="item in Dialog2YZ"
:key="item.index"
:label="item.factorsName"
:value="item.factorsAscii"
></el-option>
</el-select>
</div>
<div class="Dialog2List">
<span class="Dialog2ListName">运算符:</span>
<el-select
v-model="Dialog2compareWay"
filterable
placeholder="请选择运算符"
>
<el-option
v-for="item in Dialog2YSF"
:key="item.index"
:label="item.name"
:value="item.compareWay"
></el-option>
</el-select>
</div>
<div class="Dialog2List">
<span class="Dialog2ListName">线 值:</span>
<el-input
placeholder="请输入线值"
v-model="warnValue"
clearable
type="number"
></el-input>
</div>
<div class="Dialog2List">
<a
href="javascript:void(0)"
class="Dialog2ListButton"
@click="dialogVisible2 = false"
>取 消</a
>
<a
href="javascript:void(0)"
class="Dialog2ListButton2"
@click="EditAndAdd"
>确 定</a
>
</div>
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import { message } from "./../../util/item";
export default {
name: "AlarmConfiguration",
data: function() {
return {
SiteOptions: [
{
//数据格式
name: "全部项目",
shortName: "全部项目",
latitude: "定位坐标",
longitude: "定位坐标",
zoomLevel: "8",
platformCode: ""
}
], //渲染项目下拉框的数据
ProjectNo: "", //所选择的项目的项目编号
ACValue: "", //顶部模糊搜索
TableData: [], //表格数据
ACPage: 1, //分页默认显示页
ACDatagridDataLength: 0, //分页上显示的数据总条数
ACSize: 10, //分页上显示的每页的条数
dialogVisible: false, //一级弹窗的默认状态，
SiteSel: "", //点击的站点
YZValue: "", //因子模糊搜索
YZTableData: [], //表格数据
YZPage: 1, //分页默认显示页
YZDatagridDataLength: 0, //分页上显示的数据总条数
YZSize: 10, //分页上显示的每页的条数
dialogVisible2: false, //二级弹窗的状态
Dialog2warnType: "", //级别
Dialog2JB: [
{ warnType: 1, warnTypeDesc: "预警" },
{ warnType: 2, warnTypeDesc: "报警" }
], //级别选项
Dialog2compareWay: "", //级别
Dialog2YSF: [
{ compareWay: ">", name: "大于" },
{ compareWay: "<", name: "小于" }
], //级别选项
Dialog2factors: "", //因子
Dialog2YZ: [], //因子选项
warnValue: "", //线值
isAdd: true, //新增为true,修改为false
clickplatformCode: "", //点击站点时 保存当前站点所属得平台编号
clicksiteName: "", //点击站点时 保存当前站点名称
clickYinZiName: "", //选择因子时保存因子名称
loading: false
};
},
methods: {
selectV() {
this.LoadAllProject();
},
//分页
ACSizeChange(val) {
// 改变每页的条数
this.ACSize = val;
this.loadGridData();
},
ACCurrentChange(val) {
//改变页数
this.ACPage = val;
this.loadGridData();
},
// 获取所有平台
LoadAllProject() {
this.$http
.post(this.nozzle.sysPlatformListPlatform, {
data: {}
})
.then(response => {
if (response.data.code === 200) {
this.SiteOptions = this.SiteOptions.concat(
response.data.data.records
);
this.loadGridData();
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 根据平台获取已配置的预警报警线 可选填站点
loadGridData() {
this.loading = true;
this.TableData = [];
let params = {
current: this.ACPage,
size: this.ACSize,
data: {
platformCode: this.ProjectNo, //平台编号，可不传
stName: this.ACValue //模糊查询，可不传
}
};
this.$http
.post(this.nozzle.sysSiteListStationBaseWithPage, params)
.then(response => {
this.loading = false;
if (response.data.code === 200) {
this.TableData = response.data.data.records;
this.ACDatagridDataLength = response.data.data.total;
} else {
message(response);
}
})
.catch(response => {
this.loading = false;
message(response);
});
},
// 查看详情
details(index, rows) {
this.dialogVisible = true;
// 保存当前站点编号
this.SiteSel = rows.stCode;
// 保存当前站点名称
this.clicksiteName = rows.stName;
// 保存当前站点所属得平台编号
this.clickplatformCode = rows.platformCode;
this.loadGridDataYZ();
},
//分页
YZSizeChange(val) {
// 改变每页的条数
this.YZSize = val;
this.loadGridDataYZ();
},
YZCurrentChange(val) {
//改变页数
this.YZPage = val;
this.loadGridDataYZ();
},
// 加载因子数据
loadGridDataYZ() {
this.YZTableData = [];
let params = {
current: this.YZPage,
size: this.YZSize,
data: {
siteNo: this.SiteSel, //站点编号，可不传
fuzzyQuery: this.YZValue //模糊搜索
}
};
this.$http
.post(this.nozzle.warnConfigListWarnConfig, params)
.then(response => {
if (response.data.code === 200) {
this.YZTableData = response.data.data.records;
this.YZDatagridDataLength = response.data.data.total;
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 点击编辑因子状态
Edit(index, rows) {
this.dialogVisible2 = true;
this.isAdd = false;
// 默认值回显
this.Dialog2warnType = rows.warnType;
this.Dialog2compareWay = rows.compareWay;
this.warnValue = rows.warnValue;
this.Dialog2YZ = [
{ factorsName: rows.factorsName, factorsAscii: rows.factorsAscii }
];
this.Dialog2factors = rows.factorsAscii;
},
// 删除
Del(index, rows) {
this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
var DelID = [];
DelID.push(rows.id);
this.$http
.post(this.nozzle.warnConfigDeleteWarnConfig, DelID)
.then(response => {
message(response);
this.dialogVisible2 = false;
this.loadGridDataYZ();
})
.catch(response => {
message(response);
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
},
// 选择因子
Dialog2factorsChange(vId) {
let obj = {};
obj = this.Dialog2YZ.find(item => {
//这里的userList就是上面遍历的数据源
return item.factorsAscii === vId; //筛选出匹配数据
});
this.clickYinZiName = obj.factorsName; //我这边的name就是对应label的
},
// 请求未分配的因子
loadSiteNoYinz() {
this.Dialog2YZ = [];
let params = {
data: {
siteNo: this.SiteSel //站点编号，可不传
}
};
this.$http
.post(this.nozzle.warnConfigListNonConfig, params)
.then(response => {
if (response.data.code === 200) {
this.Dialog2YZ = response.data.data;
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 新增警戒线
AddJinJieXian() {
this.dialogVisible2 = true;
this.Dialog2warnType = "";
this.Dialog2compareWay = "";
this.Dialog2factors = "";
this.Dialog2YZ = [];
this.clickYinZiName = "";
this.warnValue = "";
this.isAdd = true;
this.loadSiteNoYinz();
},
//确认
EditAndAdd() {
var params2;
if (this.isAdd) {
// 新增
var URL = this.nozzle.warnConfigInsertWarnConfig;
params2 = {
data: {
siteNo: this.SiteSel, //站点编号
siteName: this.clicksiteName, //站点名称
platForm: this.clickplatformCode, //平台编号
factorsAscii: this.Dialog2factors, //因子ASCII
factorsName: this.clickYinZiName, //因子中文名
warnValue: this.warnValue, //警戒线值
warnType: this.Dialog2warnType, //警戒等级1：预警，2：报警
compareWay: this.Dialog2compareWay //比较方式>：大于，<：小于
}
};
} else {
// 修改
var URL = this.nozzle.warnConfigUpdateWarnConfig;
params2 = {
data: {
siteNo: this.SiteSel, //站点编号
factorsAscii: this.Dialog2factors, //因子ASCII
warnType: this.Dialog2warnType, //警戒等级1：预警，2：报警
// siteName: this.clicksiteName, //站点名称
// platForm: this.clickplatformCode, //平台编号
/**上三个参数固定，不让修改，但是要传给后台*/
warnValue: this.warnValue, //警戒线值
compareWay: this.Dialog2compareWay //比较方式>：大于，<：小于
}
};
}
this.$http
.post(URL, params2)
.then(response => {
message(response);
this.dialogVisible2 = false;
this.loadGridDataYZ();
})
.catch(response => {
message(response);
});
}
},
mounted: function() {
this.LoadAllProject();
}
};
</script>
<style scoped>
#AlarmConfiguration {
width: 100%;
height: 100%;
}
/* 顶部搜索 */
#ACTopSearchBox {
width: 100%;
height: 60px;
line-height: 60px;
text-align: left;
}
#ACTopSearchBox .el-input {
width: 250px;
margin: 0 10px;
}
/* 表格 */
#ACContent {
width: 100%;
height: calc(100% - 70px);
margin-top: 10px;
/* background: rgba(53, 53, 53, 0.5); */
}
/* 弹窗 */
#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;
}
/* 内层弹窗 */
.Dialog2List {
width: 100%;
height: 60px;
line-height: 60px;
box-sizing: border-box;
text-align: center;
}
.Dialog2List .el-input {
width: 217px;
}
.Dialog2ListName {
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
color: white;
text-align: center;
}
.Dialog2ListButton {
height: 40px;
width: 100px;
display: inline-block;
line-height: 40px;
border-radius: 2px;
text-decoration: none;
color: rgb(0, 111, 255);
background: rgba(255, 255, 255, 0);
border: 1px solid rgb(0, 111, 255);
margin: 0 30px;
}
.Dialog2ListButton2 {
height: 40px;
width: 100px;
display: inline-block;
line-height: 40px;
border-radius: 2px;
text-decoration: none;
color: white;
background: rgb(0, 111, 255);
border: 1px solid rgb(0, 111, 255);
margin: 0 30px;
}
</style>
<style>
.el-dialog__body {
padding-top: 0 !important;
}
</style>
