<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
clearable
placeholder="请选择项目"
@change="loadProjectUser(Project)"
class="MiniSel"
>
<el-option
v-for="item in allProject"
:key="item.value"
:label="item.key"
:value="item.value"
></el-option>
</el-select>
<!-- <span class="SelectTitle">用户：</span>
<el-select v-model="User" filterable placeholder="请选择" class="MiniSel">
<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"
class="data"
></el-date-picker>
<el-button
type="primary"
icon="el-icon-search"
@click="loadDataGridData"
v-has="'Search'"
class="button"
>搜索</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(255, 255, 255, 0.3)"
>
<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";
import { mapGetters } from "vuex";
export default {
name: "MessageQuery",
data: function() {
return {
LaiYuan: "1", //来源
LaiYuanOptions: [
{
LaiYuanName: "微信公众号",
LaiYuanNo: "1"
},
{
LaiYuanName: "短信",
LaiYuanNo: "2"
},
{
LaiYuanName: "邮件",
LaiYuanNo: "3"
}
], //来源的数据源
LeiXing: "", //类型
LeiXingOptions: [
{
LeiXingName: "全部",
LeiXingNo: ""
},
{
LeiXingName: "预警",
LeiXingNo: "预警"
},
{
LeiXingName: "报警",
LeiXingNo: "报警"
},
{
LeiXingName: "离线",
LeiXingNo: "离线"
},
{
LeiXingName: "站点设备故障",
LeiXingNo: "站点设备故障"
}
], //类型的数据源
Project: "", //平台
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
};
},
computed: {
...mapGetters(["allProject"])
},
methods: {
// 获取平台的人员
loadProjectUser(CODE) {
// this.UserOptions = [
// {
// nickName: "全部",
// openId: ""
// }
// ];
// this.$http
// .get(
// this.nozzle.StationBaseControllerGetUsers + "?platFromCode=" + CODE
// )
// .then(response => {
// this.UserOptions = this.UserOptions.concat(response.data);
// this.User = this.UserOptions[0].openId;
// this.loadDataGridData();
// })
// .catch(response => {
// this.$message({
// showClose: true,
// message: "请求人员失败",
// type: "warning"
// });
// });
this.loadDataGridData();
},
//分页
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.loadDataGridData();
}
};
</script>
<style scoped>
#MessageQuery {
width: 100%;
height: 100%;
}
/* 顶部搜索 */
#MQTopSearchBox {
width: 100%;
height: 60px;
line-height: 60px;
text-align: left;
color: var(--white);
}
#MQTopSearchBox .el-input {
width: 200px;
margin: 0 10px;
}
.SelectTitle {
display: inline-block;
margin-left: 1%;
text-align: center;
height: 60px;
line-height: 60px;
}
.MiniSel {
width: 9%;
}
.data {
width: 27%;
}
.button {
width: 6%;
text-align: left;
}
/* 主体内容 */
#MQCertent {
width: 100%;
height: calc(100% - 70px);
margin-top: 10px;
/* background: rgba(53, 53, 53, 0.5); */
}
</style>
