<template>
<div id="MessageQuery">
<div id="MQTopSearchBox">
<span class="SelectTitle">来源：</span>
<el-select v-model="LaiYuan" filterable placeholder="请选择" class="MiniSel">
<el-option
v-for="item in LaiYuanOptions"
:key="item.LaiYuanNo"
:label="item.LaiYuanName"
:value="item.LaiYuanNo"
></el-option>
</el-select>
<span class="SelectTitle">平台：</span>
<el-select v-model="Project" filterable placeholder="请选择" @change="loadProjectUser(Project)">
<el-option
v-for="item in ProjectOptions"
:key="item.platform_code"
:label="item.name"
:value="item.platform_code"
></el-option>
</el-select>
<span class="SelectTitle">用户：</span>
<el-select v-model="User" filterable placeholder="请选择">
<el-option
v-for="item in UserOptions"
:key="item.openId"
:label="item.nickName"
:value="item.openId"
></el-option>
</el-select>
<span class="SelectTitle">类型：</span>
<el-select v-model="LeiXing" filterable placeholder="请选择" class="MiniSel">
<el-option
v-for="item in LeiXingOptions"
:key="item.LeiXingNo"
:label="item.LeiXingName"
:value="item.LeiXingNo"
></el-option>
</el-select>
<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" icon="el-icon-search" @click="loadDataGridData">搜索</el-button>
</div>
<div id="MQCertent">
<el-table
:data="HistoryTableData"
style="width: 100%;height:calc(100% - 45px)"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
stripe
>
<el-table-column prop="source" label="信息来源" width="100px"></el-table-column>
<el-table-column prop="platFrom" label="推送平台" width="300px"></el-table-column>
<el-table-column prop="siteName" label="站点名称"></el-table-column>
<el-table-column prop="siteNo" label="站点编号" width="100px"></el-table-column>
<el-table-column prop="warmType" label="告警类型" width="100px"></el-table-column>
<el-table-column prop="warningTime" label="告警时间" width="200px"></el-table-column>
<el-table-column prop="parameterName" label="告警因子" width="100px"></el-table-column>
<el-table-column prop="parameterValue" label="告警值" width="100px"></el-table-column>
<el-table-column label="操作" width="100px">
<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="SizeChange"
@current-change="CurrentChange"
:current-page="Page"
:page-sizes="[10, 20, 50, 100]"
:page-size="Size"
layout="total, sizes, prev, pager, next, jumper"
:total="DataLength"
style="margin-top:10px;"
></el-pagination>
</div>
<el-dialog title="浏览详情" :visible.sync="dialogVisible" width="30%">
<el-table :data="DIalogTableData" style="width: 100%;height:calc(100% - 45px)">
<el-table-column prop="phoneNum" label="联系方式"></el-table-column>
<el-table-column prop="nickName" label="用户昵称"></el-table-column>
<el-table-column prop="state" label="状态" :formatter="NumForState"></el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
import { message } from "./../../util/item";
export default {
name: "MessageQuery",
data: function() {
return {
LaiYuan: "1", //来源
LaiYuanOptions: [
// {
// LaiYuanName: "全部",
// LaiYuanNo: ""
// },
{
LaiYuanName: "微信公众号",
LaiYuanNo: "1"
},
{
LaiYuanName: "短信",
LaiYuanNo: "2"
},
{
LaiYuanName: "邮件",
LaiYuanNo: "3"
}
], //来源的数据源
LeiXing: "", //类型
LeiXingOptions: [
{
LeiXingName: "全部",
LeiXingNo: ""
},
{
LeiXingName: "预警",
LeiXingNo: "预警"
},
{
LeiXingName: "报警",
LeiXingNo: "报警"
},
{
LeiXingName: "离线",
LeiXingNo: "离线"
},
{
LeiXingName: "站点设备故障",
LeiXingNo: "站点设备故障"
}
], //类型的数据源
Project: "", //平台
ProjectOptions: [
{
name: "全部",
platform_code: ""
}
], //平台的数据源
User: "", //用户
UserOptions: [
{
nickName: "全部",
openId: ""
}
], //用户的数据源
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]);
}
}
]
}, //时间快捷选项
HistoryTableData: [], //历史数据表格数据
Page: 1, //分页默认显示页
DataLength: 0, //分页上显示的数据总条数
Size: 10, //分页上显示的每页的条数
dialogVisible: false, //dialog状态
DIalogTableData: [], //dialog表格数据
loading: false
};
},
methods: {
// 获取所有平台
loadAllProject() {
this.$http
.get(this.nozzle.StationBaseControllerQueryPlatform)
.then(response => {
if (response.data.result.list.length > 0) {
this.ProjectOptions = this.ProjectOptions.concat(
response.data.result.list
);
this.Project = this.ProjectOptions[0].platform_code;
this.loadProjectUser(this.ProjectOptions[0].platform_code);
} else {
this.$message({
showClose: true,
message: "无项目",
type: "warning"
});
}
})
.catch(response => {
this.$message({
showClose: true,
message: "请求平台失败",
type: "warning"
});
});
},
// 获取平台的人员
loadProjectUser(CODE) {
this.UserOptions = [
{
nickName: "全部",
openId: ""
}
];
this.$http
.get(
this.nozzle.StationBaseControllerGetUsers + "?platFromCode=" + CODE
)
.then(response => {
// if (response.data.length > 0) {
this.UserOptions = this.UserOptions.concat(response.data);
this.User = this.UserOptions[0].openId;
this.loadDataGridData();
// } else {
// this.$message({
// showClose: true,
// message: "无分配人员",
// type: "warning"
// });
// }
})
.catch(response => {
this.$message({
showClose: true,
message: "请求人员失败",
type: "warning"
});
});
},
//分页
SizeChange(val) {
// 改变每页的条数
this.Size = val;
this.loadDataGridData();
},
CurrentChange(val) {
//改变页数
this.Page = val;
this.loadDataGridData();
},
// 获取表格数据
loadDataGridData() {
this.loading = true;
this.$http
.get(
this.nozzle.alarmLogGetAlarmLogInfo +
"?source=" +
this.LaiYuan +
"&platFromCode=" +
this.Project +
"&alarmType=" +
this.LeiXing +
"&openId=" +
this.User +
"&st=" +
this.TimeValue[0] +
"&et=" +
this.TimeValue[1] +
"&pageNo=" +
this.Page +
"&pageSize=" +
this.Size
)
.then(response => {
this.loading = false;
this.HistoryTableData = response.data.data;
this.DataLength = response.data.total;
})
.catch(response => {
this.loading = false;
this.$message({
showClose: true,
message: "请求日志失败",
type: "warning"
});
});
},
// 点击详情
details(index, rows) {
this.dialogVisible = true;
this.DIalogTableData = [];
this.DIalogTableData = rows.browsingStates;
},
// Dialog表格状态转文字
NumForState(row, column, cellValue, index) {
return row.state === 0 ? "未浏览" : "已浏览";
}
},
mounted: function() {
this.loadAllProject();
}
};
</script>
<style scoped>
#MessageQuery {
width: 100%;
height: 100%;
}
/* 顶部搜索 */
#MQTopSearchBox {
width: 100%;
height: 60px;
line-height: 60px;
text-align: left;
color: white;
}
#MQTopSearchBox .el-input {
width: 200px;
margin: 0 10px;
}
.SelectTitle {
display: inline-block;
margin-left: 5px;
text-align: center;
height: 60px;
line-height: 60px;
}
.MiniSel {
width: 140px;
}
/* 主体内容 */
#MQCertent {
width: 100%;
height: calc(100% - 70px);
margin-top: 10px;
background: rgba(53,53,53,.5);
}
</style>
