Merge branch 'dev' of https://gitea.wangzhiwen.top/0214/ALOps_sys1 into dev
Conflicts: ALOps_sys_backend/alops-system/src/main/resources/mapper/system/AlertMessageMapper.xmldev
xiaohuo
11 months ago
commit
9e8dd02e8d
@ -0,0 +1,58 @@ |
||||
import request from '@/utils/request' |
||||
import { parseStrEmpty } from "@/utils/ruoyi"; |
||||
const api = '/inMonitoring/alertMessage/' |
||||
|
||||
// 查询详细
|
||||
export function getDict() { |
||||
return request({ |
||||
url: '/sys_dict', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 查询列表
|
||||
export function list(query) { |
||||
return request({ |
||||
url: api + 'list', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 查询详细
|
||||
export function getInfo(id) { |
||||
return request({ |
||||
url: api + '/queryById/' + parseStrEmpty(id), |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 新增
|
||||
export function add(data) { |
||||
return request({ |
||||
url: api + 'add', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 修改
|
||||
export function update(data) { |
||||
return request({ |
||||
url: api + 'editAlertMessage', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除
|
||||
export function del(id) { |
||||
return request({ |
||||
url: api + id, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,58 @@ |
||||
import request from '@/utils/request' |
||||
import { parseStrEmpty } from "@/utils/ruoyi"; |
||||
const api = '/inMonitoring/alertRule/' |
||||
|
||||
// 查询详细
|
||||
export function byTable() { |
||||
return request({ |
||||
url: api + 'byTable', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 查询列表
|
||||
export function list(query) { |
||||
return request({ |
||||
url: api + 'list', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 查询详细
|
||||
export function getInfo(id) { |
||||
return request({ |
||||
url: api + '/queryById/' + parseStrEmpty(id), |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 新增
|
||||
export function add(data) { |
||||
return request({ |
||||
url: api + 'addRule', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 修改
|
||||
export function update(data) { |
||||
return request({ |
||||
url: api + 'editRule', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除
|
||||
export function del(id) { |
||||
return request({ |
||||
url: api + id, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -1,505 +0,0 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-row :gutter="20"> |
||||
<splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme"> |
||||
|
||||
|
||||
<!--类型类型管理--> |
||||
<pane size="84"> |
||||
<el-col> |
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
||||
<el-form-item label="类型名称" prop="userName"> |
||||
<el-input v-model="queryParams.userName" placeholder="请输入类型名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" /> |
||||
</el-form-item> |
||||
<el-form-item label="状态" prop="status"> |
||||
<el-select v-model="queryParams.status" placeholder="类型状态" clearable style="width: 240px"> |
||||
<el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="创建时间"> |
||||
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:deviceType:add']">新增</el-button> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['device:deviceType:import']">导入</el-button> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['device:deviceType:export']">导出</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> |
||||
<el-table-column type="selection" width="50" align="center" /> |
||||
<el-table-column label="编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" /> |
||||
<el-table-column label="名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="描述" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="触发条件" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警等级" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警方式" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警消息" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width"> |
||||
<template slot-scope="scope" v-if="scope.row.userId !== 1"> |
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:deviceType:edit']">修改</el-button> |
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:deviceType:remove']">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> |
||||
</el-col> |
||||
</pane> |
||||
</splitpanes> |
||||
</el-row> |
||||
|
||||
<el-dialog :title="title" :visible.sync="open" width="760px" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="90px"> |
||||
<el-row :gutter="20"> |
||||
<!-- 类型昵称 + 手机号码 --> |
||||
<el-col :span="12"> |
||||
<el-form-item label="类型昵称" prop="nickName"> |
||||
<el-input v-model="form.nickName" placeholder="请输入类型昵称" maxlength="30" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="手机号码" prop="phonenumber"> |
||||
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
|
||||
<!-- 邮箱 + 类型名称 --> |
||||
<el-col :span="12"> |
||||
<el-form-item label="邮箱" prop="email"> |
||||
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item v-if="form.userId == undefined" label="类型名称" prop="userName"> |
||||
<el-input v-model="form.userName" placeholder="请输入类型名称" maxlength="30" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
|
||||
<!-- 类型密码（仅新增）+ 类型性别 --> |
||||
<el-col :span="12"> |
||||
<el-form-item v-if="form.userId == undefined" label="类型密码" prop="password"> |
||||
<el-input v-model="form.password" placeholder="请输入类型密码" type="password" maxlength="20" show-password /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="类型性别"> |
||||
<el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%"> |
||||
<el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
|
||||
<!-- 状态 + 角色 --> |
||||
<el-col :span="12"> |
||||
<el-form-item label="状态"> |
||||
<el-radio-group v-model="form.status"> |
||||
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="角色"> |
||||
<el-select v-model="form.roleIds" multiple placeholder="请选择角色" style="width: 100%"> |
||||
<el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
|
||||
<!-- 备注（单独一行） --> |
||||
<el-col :span="24"> |
||||
<el-form-item label="备注"> |
||||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内容" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
|
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
</span> |
||||
|
||||
</el-dialog> |
||||
|
||||
<!-- 类型导入对话框 --> |
||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> |
||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> |
||||
<i class="el-icon-upload"></i> |
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
||||
<div class="el-upload__tip text-center" slot="tip"> |
||||
<div class="el-upload__tip" slot="tip"> |
||||
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的类型数据 |
||||
</div> |
||||
<span>仅允许导入xls、xlsx格式文件。</span> |
||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> |
||||
</div> |
||||
</el-upload> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button> |
||||
<el-button @click="upload.open = false">取 消</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/inMonitoring/earlyWarning" |
||||
import { getToken } from "@/utils/auth" |
||||
import Treeselect from "@riophae/vue-treeselect" |
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css" |
||||
import { Splitpanes, Pane } from "splitpanes" |
||||
import "splitpanes/dist/splitpanes.css" |
||||
|
||||
export default { |
||||
name: "User", |
||||
dicts: ['sys_normal_disable', 'sys_user_sex'], |
||||
components: { Treeselect, Splitpanes, Pane }, |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 类型表格数据 |
||||
userList: null, |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 所有部门树选项 |
||||
deptOptions: undefined, |
||||
// 过滤掉已禁用部门树选项 |
||||
enabledDeptOptions: undefined, |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 部门名称 |
||||
deptName: undefined, |
||||
// 默认密码 |
||||
initPassword: undefined, |
||||
// 日期范围 |
||||
dateRange: [], |
||||
// 岗位选项 |
||||
postOptions: [], |
||||
// 角色选项 |
||||
roleOptions: [], |
||||
// 表单参数 |
||||
form: {}, |
||||
defaultProps: { |
||||
children: "children", |
||||
label: "label" |
||||
}, |
||||
// 类型导入参数 |
||||
upload: { |
||||
// 是否显示弹出层（类型导入） |
||||
open: false, |
||||
// 弹出层标题（类型导入） |
||||
title: "", |
||||
// 是否禁用上传 |
||||
isUploading: false, |
||||
// 是否更新已经存在的类型数据 |
||||
updateSupport: 0, |
||||
// 设置上传的请求头部 |
||||
headers: { Authorization: "Bearer " + getToken() }, |
||||
// 上传的地址 |
||||
url: process.env.VUE_APP_BASE_API + "/system/user/importData" |
||||
}, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
userName: undefined, |
||||
phonenumber: undefined, |
||||
status: undefined, |
||||
deptId: undefined |
||||
}, |
||||
// 列信息 |
||||
columns: [ |
||||
{ key: 0, label: '类型编号', visible: true, showInSelector: true }, |
||||
{ key: 1, label: '类型名称', visible: true, showInSelector: true }, |
||||
{ key: 2, label: '类型昵称', visible: true, showInSelector: true }, |
||||
{ key: 3, label: '部门', visible: false, showInSelector: false }, // 👈 不在显隐选择器中出现 |
||||
{ key: 4, label: '手机号码', visible: true, showInSelector: true }, |
||||
{ key: 5, label: '状态', visible: true, showInSelector: true }, |
||||
{ key: 6, label: '创建时间', visible: true, showInSelector: true } |
||||
], |
||||
|
||||
// 表单校验 |
||||
rules: { |
||||
userName: [ |
||||
{ required: true, message: "类型名称不能为空", trigger: "blur" }, |
||||
{ min: 2, max: 20, message: '类型名称长度必须介于 2 和 20 之间', trigger: 'blur' } |
||||
], |
||||
nickName: [ |
||||
{ required: true, message: "类型昵称不能为空", trigger: "blur" } |
||||
], |
||||
password: [ |
||||
{ required: true, message: "类型密码不能为空", trigger: "blur" }, |
||||
{ min: 5, max: 20, message: '类型密码长度必须介于 5 和 20 之间', trigger: 'blur' }, |
||||
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" } |
||||
], |
||||
email: [ |
||||
{ |
||||
type: "email", |
||||
message: "请输入正确的邮箱地址", |
||||
trigger: ["blur", "change"] |
||||
} |
||||
], |
||||
phonenumber: [ |
||||
{ |
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, |
||||
message: "请输入正确的手机号码", |
||||
trigger: "blur" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
// 根据名称筛选部门树 |
||||
deptName(val) { |
||||
this.$refs.tree.filter(val) |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
}, |
||||
methods: { |
||||
/** 查询类型列表 */ |
||||
getList() { |
||||
this.loading = true |
||||
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => { |
||||
this.userList = response.rows |
||||
this.total = response.total |
||||
this.loading = false |
||||
} |
||||
) |
||||
}, |
||||
// /** 查询部门下拉树结构 */ |
||||
// getDeptTree() { |
||||
// deptTreeSelect().then(response => { |
||||
// this.deptOptions = response.data |
||||
// this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data))) |
||||
// }) |
||||
// }, |
||||
// 过滤禁用的部门 |
||||
filterDisabledDept(deptList) { |
||||
return deptList.filter(dept => { |
||||
if (dept.disabled) { |
||||
return false |
||||
} |
||||
if (dept.children && dept.children.length) { |
||||
dept.children = this.filterDisabledDept(dept.children) |
||||
} |
||||
return true |
||||
}) |
||||
}, |
||||
// 筛选节点 |
||||
filterNode(value, data) { |
||||
if (!value) return true |
||||
return data.label.indexOf(value) !== -1 |
||||
}, |
||||
// 节点单击事件 |
||||
handleNodeClick(data) { |
||||
this.queryParams.deptId = data.id |
||||
this.handleQuery() |
||||
}, |
||||
// 类型状态修改 |
||||
handleStatusChange(row) { |
||||
let text = row.status === "0" ? "启用" : "停用" |
||||
this.$modal.confirm('确认要"' + text + '""' + row.userName + '"类型吗？').then(function() { |
||||
return changeUserStatus(row.userId, row.status) |
||||
}).then(() => { |
||||
this.$modal.msgSuccess(text + "成功") |
||||
}).catch(function() { |
||||
row.status = row.status === "0" ? "1" : "0" |
||||
}) |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false |
||||
this.reset() |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
userId: undefined, |
||||
deptId: undefined, |
||||
userName: undefined, |
||||
nickName: undefined, |
||||
password: undefined, |
||||
phonenumber: undefined, |
||||
email: undefined, |
||||
sex: undefined, |
||||
status: "0", |
||||
remark: undefined, |
||||
postIds: [], |
||||
roleIds: [] |
||||
} |
||||
this.resetForm("form") |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1 |
||||
this.getList() |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.dateRange = [] |
||||
this.resetForm("queryForm") |
||||
this.queryParams.deptId = undefined |
||||
this.$refs.tree.setCurrentKey(null) |
||||
this.handleQuery() |
||||
}, |
||||
// 多选框选中数据 |
||||
handleSelectionChange(selection) { |
||||
this.ids = selection.map(item => item.userId) |
||||
this.single = selection.length != 1 |
||||
this.multiple = !selection.length |
||||
}, |
||||
// 更多操作触发 |
||||
handleCommand(command, row) { |
||||
switch (command) { |
||||
case "handleResetPwd": |
||||
this.handleResetPwd(row) |
||||
break |
||||
case "handleAuthRole": |
||||
this.handleAuthRole(row) |
||||
break |
||||
default: |
||||
break |
||||
} |
||||
}, |
||||
/** 新增按钮操作 */ |
||||
handleAdd() { |
||||
this.reset() |
||||
getUser().then(response => { |
||||
this.postOptions = response.posts |
||||
this.roleOptions = response.roles |
||||
this.open = true |
||||
this.title = "添加类型" |
||||
this.form.password = this.initPassword |
||||
}) |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset() |
||||
const userId = row.userId || this.ids |
||||
getUser(userId).then(response => { |
||||
this.form = response.data |
||||
this.postOptions = response.posts |
||||
this.roleOptions = response.roles |
||||
this.$set(this.form, "postIds", response.postIds) |
||||
this.$set(this.form, "roleIds", response.roleIds) |
||||
this.open = true |
||||
this.title = "修改类型" |
||||
this.form.password = "" |
||||
}) |
||||
}, |
||||
/** 重置密码按钮操作 */ |
||||
handleResetPwd(row) { |
||||
this.$prompt('请输入"' + row.userName + '"的新密码', "提示", { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
closeOnClickModal: false, |
||||
inputPattern: /^.{5,20}$/, |
||||
inputErrorMessage: "类型密码长度必须介于 5 和 20 之间", |
||||
inputValidator: (value) => { |
||||
if (/<|>|"|'|\||\\/.test(value)) { |
||||
return "不能包含非法字符：< > \" ' \\\ |" |
||||
} |
||||
}, |
||||
}).then(({ value }) => { |
||||
resetUserPwd(row.userId, value).then(response => { |
||||
this.$modal.msgSuccess("修改成功，新密码是：" + value) |
||||
}) |
||||
}).catch(() => {}) |
||||
}, |
||||
/** 分配角色操作 */ |
||||
handleAuthRole: function(row) { |
||||
const userId = row.userId |
||||
this.$router.push("/system/user-auth/role/" + userId) |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function() { |
||||
this.$refs["form"].validate(valid => { |
||||
if (valid) { |
||||
if (this.form.userId != undefined) { |
||||
updateUser(this.form).then(response => { |
||||
this.$modal.msgSuccess("修改成功") |
||||
this.open = false |
||||
this.getList() |
||||
}) |
||||
} else { |
||||
addUser(this.form).then(response => { |
||||
this.$modal.msgSuccess("新增成功") |
||||
this.open = false |
||||
this.getList() |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
/** 删除按钮操作 */ |
||||
handleDelete(row) { |
||||
const userIds = row.userId || this.ids |
||||
this.$modal.confirm('是否确认删除类型编号为"' + userIds + '"的数据项？').then(function() { |
||||
return delUser(userIds) |
||||
}).then(() => { |
||||
this.getList() |
||||
this.$modal.msgSuccess("删除成功") |
||||
}).catch(() => {}) |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.download('system/user/export', { |
||||
...this.queryParams |
||||
}, `user_${new Date().getTime()}.xlsx`) |
||||
}, |
||||
/** 导入按钮操作 */ |
||||
handleImport() { |
||||
this.upload.title = "类型导入" |
||||
this.upload.open = true |
||||
}, |
||||
/** 下载模板操作 */ |
||||
importTemplate() { |
||||
this.download('system/user/importTemplate', { |
||||
}, `user_template_${new Date().getTime()}.xlsx`) |
||||
}, |
||||
// 文件上传中处理 |
||||
handleFileUploadProgress(event, file, fileList) { |
||||
this.upload.isUploading = true |
||||
}, |
||||
// 文件上传成功处理 |
||||
handleFileSuccess(response, file, fileList) { |
||||
this.upload.open = false |
||||
this.upload.isUploading = false |
||||
this.$refs.upload.clearFiles() |
||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) |
||||
this.getList() |
||||
}, |
||||
// 提交上传文件 |
||||
submitFileForm() { |
||||
this.$refs.upload.submit() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,324 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-row :gutter="20"> |
||||
<splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme"> |
||||
<!--设备档案--> |
||||
<pane size="84"> |
||||
<el-col> |
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
||||
<el-form-item label="预警时间"> |
||||
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd hh:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="预警等级" prop="level"> |
||||
<el-select v-model="queryParams.level" placeholder="预警等级" clearable style="width: 240px"> |
||||
<el-option v-for="dict in dict.type.warning_level" :key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="状态" prop="status"> |
||||
<el-select v-model="queryParams.status" placeholder="处理状态" clearable style="width: 240px"> |
||||
<el-option v-for="dict in dict.type.alert_message_status" :key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="位置" prop="location"> |
||||
<el-input v-model="queryParams.phonenumber" placeholder="请输入位置" clearable style="width: 240px" @keyup.enter.native="handleQuery" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<!-- <el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:files:add']">新增</el-button> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['device:files:remove']">删除</el-button> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['device:files:import']">导入</el-button> |
||||
</el-col> |
||||
</el-row> --> |
||||
|
||||
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange"> |
||||
<el-table-column type="selection" width="50" align="center" /> |
||||
<el-table-column |
||||
label="序号" |
||||
width="60" |
||||
type="index" |
||||
></el-table-column> |
||||
<el-table-column label="预警时间" align="center" key="occurTime" prop="occurTime" /> |
||||
<el-table-column label="预警等级" align="center" key="level" prop="level" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警信息" align="center" key="version" prop="version" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警状态" align="center" key="status"> |
||||
<template slot-scope="scope"> |
||||
<dict-tag :options="dict.type.alert_message_status" :value="scope.row.status"/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="处理人" align="center" key="handler" prop="handler" width="120" /> |
||||
<el-table-column label="处理时间" align="center" prop="handleTime" width="160"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ parseTime(scope.row.handleTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="解决方案" align="center" key="solution" prop="solution" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width"> |
||||
<template slot-scope="scope"> |
||||
<el-button size="mini" v-if="scope.row.status == 'UNHANDLED'" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['device:files:edit']">去处理</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> |
||||
</el-col> |
||||
</pane> |
||||
</splitpanes> |
||||
</el-row> |
||||
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false"> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="解决人" prop="handler"> |
||||
<el-input v-model="form.handler" placeholder="请输入解决人" maxlength="30" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24"> |
||||
<el-form-item label="解决方法" prop="solution"> |
||||
<el-input v-model="form.solution" placeholder="请输入解决方法" type="textarea" :rows="3" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
|
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
</span> |
||||
|
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getDict, list, getInfo, del, add, update } from "@/api/inMonitoring/message" |
||||
import { getToken } from "@/utils/auth" |
||||
import Treeselect from "@riophae/vue-treeselect" |
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css" |
||||
import { Splitpanes, Pane } from "splitpanes" |
||||
import "splitpanes/dist/splitpanes.css" |
||||
|
||||
export default { |
||||
name: "User", |
||||
dicts: ['device_disable', 'sys_user_sex', 'warning_level','alert_message_status'], |
||||
components: { Treeselect, Splitpanes, Pane }, |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 设备表格数据 |
||||
dataList: null, |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 所有部门树选项 |
||||
deptOptions: undefined, |
||||
// 过滤掉已禁用部门树选项 |
||||
enabledDeptOptions: undefined, |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 部门名称 |
||||
deptName: undefined, |
||||
// 默认密码 |
||||
initPassword: undefined, |
||||
// 日期范围 |
||||
dateRange: [], |
||||
// 岗位选项 |
||||
postOptions: [], |
||||
// 角色选项 |
||||
roleOptions: [], |
||||
// 表单参数 |
||||
form: {}, |
||||
defaultProps: { |
||||
children: "children", |
||||
label: "label" |
||||
}, |
||||
// 设备导入参数 |
||||
upload: { |
||||
// 是否显示弹出层（设备导入） |
||||
open: false, |
||||
// 弹出层标题（设备导入） |
||||
title: "", |
||||
// 是否禁用上传 |
||||
isUploading: false, |
||||
// 是否更新已经存在的设备档案 |
||||
updateSupport: 0, |
||||
// 设置上传的请求头部 |
||||
headers: { Authorization: "Bearer " + getToken() }, |
||||
// 上传的地址 |
||||
url: process.env.VUE_APP_BASE_API + "/equipment/import" |
||||
}, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
name: undefined, |
||||
status: undefined |
||||
}, |
||||
// 表单校验 |
||||
rules: { |
||||
handler: [ |
||||
{ required: true, message: "解决人不能为空", trigger: "blur" }, |
||||
], |
||||
solution: [ |
||||
{ required: true, message: "解决方法不能为空", trigger: "blur" } |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
// 根据名称筛选部门树 |
||||
deptName(val) { |
||||
this.$refs.tree.filter(val) |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
}, |
||||
methods: { |
||||
/** 查询设备列表 */ |
||||
getList() { |
||||
this.loading = true |
||||
list({minTime:this.dateRange[0],maxTime:this.dateRange[1],...this.queryParams}).then(response => { |
||||
this.dataList = response.rows |
||||
this.total = response.total |
||||
this.loading = false |
||||
} |
||||
) |
||||
}, |
||||
upImage(fileList){ |
||||
console.log(fileList) |
||||
this.form.image = fileList |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false |
||||
this.reset() |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
id: undefined, |
||||
deptId: undefined, |
||||
name: undefined, |
||||
nickName: undefined, |
||||
password: undefined, |
||||
phonenumber: undefined, |
||||
email: undefined, |
||||
sex: undefined, |
||||
status: "0", |
||||
remark: undefined, |
||||
postIds: [], |
||||
roleIds: [] |
||||
} |
||||
this.resetForm("form") |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1 |
||||
this.getList() |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.dateRange = [] |
||||
this.resetForm("queryForm") |
||||
this.handleQuery() |
||||
}, |
||||
// 多选框选中数据 |
||||
handleSelectionChange(selection) { |
||||
this.ids = selection.map(item => item.id) |
||||
this.single = selection.length != 1 |
||||
this.multiple = !selection.length |
||||
}, |
||||
/** 新增按钮操作 */ |
||||
handleAdd() { |
||||
this.reset() |
||||
this.open = true |
||||
this.title = "添加设备" |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset() |
||||
this.form = {...row} |
||||
this.open = true |
||||
this.title = "处理" |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function() { |
||||
this.$refs["form"].validate(valid => { |
||||
if (valid) { |
||||
if (this.form.id != undefined) { |
||||
update(this.form).then(response => { |
||||
this.$modal.msgSuccess("修改成功") |
||||
this.open = false |
||||
this.getList() |
||||
}) |
||||
} else { |
||||
add(this.form).then(response => { |
||||
this.$modal.msgSuccess("新增成功") |
||||
this.open = false |
||||
this.getList() |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
/** 删除按钮操作 */ |
||||
handleDelete(row) { |
||||
const Ids = row.id || this.ids |
||||
this.$modal.confirm('是否确认删除设备ID为"' + Ids + '"的数据项？').then(function() { |
||||
return del(Ids) |
||||
}).then(() => { |
||||
this.getList() |
||||
this.$modal.msgSuccess("删除成功") |
||||
}).catch(() => {}) |
||||
}, |
||||
/** 导入按钮操作 */ |
||||
handleImport() { |
||||
this.upload.title = "设备导入" |
||||
this.upload.open = true |
||||
}, |
||||
/** 下载模板操作 */ |
||||
importTemplate() { |
||||
this.download('system/user/importTemplate', { |
||||
}, `user_template_${new Date().getTime()}.xlsx`) |
||||
}, |
||||
// 文件上传中处理 |
||||
handleFileUploadProgress(event, file, fileList) { |
||||
this.upload.isUploading = true |
||||
}, |
||||
// 文件上传成功处理 |
||||
handleFileSuccess(response, file, fileList) { |
||||
this.upload.open = false |
||||
this.upload.isUploading = false |
||||
this.$refs.upload.clearFiles() |
||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) |
||||
this.getList() |
||||
}, |
||||
// 提交上传文件 |
||||
submitFileForm() { |
||||
this.$refs.upload.submit() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,445 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-row :gutter="20"> |
||||
<splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme"> |
||||
<!--设备档案--> |
||||
<pane size="84"> |
||||
<el-col> |
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
||||
<el-form-item label="预警级别"> |
||||
<el-select v-model="form.sex" placeholder="请选择级别" style="width: 100%"> |
||||
<el-option v-for="dict in dict.type.warning_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:files:add']">新增</el-button> |
||||
</el-col> |
||||
<el-col :span="1.5"> |
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['device:files:remove']">删除</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange"> |
||||
<el-table-column type="selection" width="50" align="center" /> |
||||
<el-table-column |
||||
label="序号" |
||||
width="60" |
||||
type="index" |
||||
></el-table-column> |
||||
<el-table-column label="名称" align="center" key="ruleName" prop="ruleName" width="120"/> |
||||
<el-table-column label="描述" align="center" key="description" prop="description" width="240" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="触发条件" align="center" key="alertTemplate" prop="alertTemplate" width="240" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警级别" align="center" key="severity" prop="severity" width="120" /> |
||||
<el-table-column label="预警方式" align="center" key="alertWay" prop="alertWay" width="120" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警邮箱" align="center" key="alertStation" prop="alertStation" width="200" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width"> |
||||
<template slot-scope="scope"> |
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:files:edit']">修改</el-button> |
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:files:remove']">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> |
||||
</el-col> |
||||
</pane> |
||||
</splitpanes> |
||||
</el-row> |
||||
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false"> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="规则名称" prop="ruleName"> |
||||
<el-input v-model="form.ruleName" placeholder="请输入设备名称" maxlength="30" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24"> |
||||
<el-form-item label="描述" prop="description"> |
||||
<el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入内容" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24"> |
||||
<el-form-item label="触发条件" prop="compareValue1"> |
||||
<el-col :span="6"> |
||||
<el-select v-model="form.paramName" placeholder="请选择" style="width: 100%"> |
||||
<el-option v-for="dict in byTableData" :key="dict.columnName" :label="dict.paramName" :value="dict.columnName"></el-option> |
||||
</el-select> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-select v-model="form.operator" placeholder="请选择" style="width: 100%"> |
||||
<el-option v-for="dict in dict.type.waming_rules" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> |
||||
</el-select> |
||||
</el-col> |
||||
<el-col :span="5"> |
||||
<el-form-item label="" prop="compareValue1" label-width="0"> |
||||
<el-input v-model="form.compareValue1" placeholder="请输入" maxlength="30" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="1" v-if="form.operator == 'between'"> |
||||
<span>~</span> |
||||
</el-col> |
||||
<el-col :span="5" v-if="form.operator == 'between'"> |
||||
<el-form-item label="" prop="compareValue2" label-width="0"> |
||||
<el-input v-model="form.compareValue2" placeholder="请输入" maxlength="30" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24"> |
||||
<el-form-item label="预警级别" prop="severity"> |
||||
<el-select v-model="form.severity" placeholder="请选择级别" style="width: 100%"> |
||||
<el-option v-for="dict in dict.type.warning_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<!-- <el-col :span="24"> |
||||
<el-form-item label="预警消息" prop="message"> |
||||
<el-input v-model="form.message" type="textarea" :rows="3" placeholder="请输入内容" /> |
||||
</el-form-item> |
||||
</el-col> --> |
||||
<el-col :span="24"> |
||||
<el-form-item label="是否邮箱" prop="alertWay"> |
||||
<el-select v-model="form.alertWay" placeholder="启用状态" clearable> |
||||
<el-option v-for="dict in alertWayOptions" :key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24" v-show="form.alertWay == 'email'"> |
||||
<el-form-item label="邮箱" prop="alertStation"> |
||||
<el-input v-model="form.alertStation" placeholder="请输入邮箱" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
|
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
</span> |
||||
|
||||
</el-dialog> |
||||
|
||||
<!-- 设备导入对话框 --> |
||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> |
||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> |
||||
<i class="el-icon-upload"></i> |
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
||||
<div class="el-upload__tip text-center" slot="tip"> |
||||
<div class="el-upload__tip" slot="tip"> |
||||
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的设备档案 |
||||
</div> |
||||
<span>仅允许导入xls、xlsx格式文件。</span> |
||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> |
||||
</div> |
||||
</el-upload> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button> |
||||
<el-button @click="upload.open = false">取 消</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { list, del, add, update, byTable } from "@/api/inMonitoring/rules" |
||||
import { getToken } from "@/utils/auth" |
||||
import Treeselect from "@riophae/vue-treeselect" |
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css" |
||||
import { Splitpanes, Pane } from "splitpanes" |
||||
import "splitpanes/dist/splitpanes.css" |
||||
|
||||
export default { |
||||
name: "User", |
||||
dicts: ['warning_level', 'device_disable', 'waming_rules'], |
||||
components: { Treeselect, Splitpanes, Pane }, |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 设备表格数据 |
||||
dataList: null, |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 所有部门树选项 |
||||
deptOptions: undefined, |
||||
// 过滤掉已禁用部门树选项 |
||||
enabledDeptOptions: undefined, |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 部门名称 |
||||
deptName: undefined, |
||||
// 默认密码 |
||||
initPassword: undefined, |
||||
// 日期范围 |
||||
dateRange: [], |
||||
// 岗位选项 |
||||
postOptions: [], |
||||
// 角色选项 |
||||
roleOptions: [], |
||||
// 表单参数 |
||||
form: { |
||||
id: undefined, |
||||
ruleName: undefined, |
||||
description: undefined, |
||||
paramName: undefined, |
||||
operator: undefined, |
||||
compareValue1: undefined, |
||||
compareValue2: undefined, |
||||
severity: undefined, |
||||
message: undefined, |
||||
alertWay: 'noemail', |
||||
alertStation: '', |
||||
status: "0" |
||||
}, |
||||
// 校验规则 |
||||
byTableData: [], |
||||
alertWayOptions: [ |
||||
{ |
||||
value: 'noemail', |
||||
label: "否" |
||||
}, |
||||
{ |
||||
value: 'email', |
||||
label: "是" |
||||
} |
||||
], |
||||
|
||||
defaultProps: { |
||||
children: "children", |
||||
label: "label" |
||||
}, |
||||
// 设备导入参数 |
||||
upload: { |
||||
// 是否显示弹出层（设备导入） |
||||
open: false, |
||||
// 弹出层标题（设备导入） |
||||
title: "", |
||||
// 是否禁用上传 |
||||
isUploading: false, |
||||
// 是否更新已经存在的设备档案 |
||||
updateSupport: 0, |
||||
// 设置上传的请求头部 |
||||
headers: { Authorization: "Bearer " + getToken() }, |
||||
// 上传的地址 |
||||
url: process.env.VUE_APP_BASE_API + "/equipment/import" |
||||
}, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
name: undefined, |
||||
status: undefined |
||||
}, |
||||
// 表单校验 |
||||
rules: { |
||||
ruleName: [ |
||||
{ required: true, message: "规则名称不能为空", trigger: "blur" } |
||||
], |
||||
description: [ |
||||
{ required: true, message: "规则描述不能为空", trigger: "blur" }, |
||||
], |
||||
alertWay: [ |
||||
{ required: true, message: "设备类型不能为空", trigger: "blur" } |
||||
], |
||||
severity: [ |
||||
{ required: true, message: "设备级别不能为空", trigger: "blur" }, |
||||
], |
||||
message: [ |
||||
{ required: true, message: "预警消息不能为空", trigger: "blur" } |
||||
], |
||||
status: [ |
||||
{ required: true, message: "状态不能为空", trigger: "blur" }, |
||||
], |
||||
paramName: [ |
||||
{ required: true, message: "请选择", trigger: "blur" }, |
||||
], |
||||
operator: [ |
||||
{ required: true, message: "请选择", trigger: "blur" }, |
||||
], |
||||
compareValue1: [ |
||||
{ required: true, message: "请输入", trigger: "blur" }, |
||||
], |
||||
compareValue2: [ |
||||
{ required: true, message: "请输入", trigger: "blur" }, |
||||
], |
||||
alertStation: [ |
||||
{ required: true, message: "请输入", trigger: "blur" }, |
||||
{ |
||||
pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/, |
||||
message: "请输入正确的邮箱", |
||||
trigger: "blur" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
// 根据名称筛选部门树 |
||||
deptName(val) { |
||||
this.$refs.tree.filter(val) |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
this.getByTable() |
||||
|
||||
}, |
||||
methods: { |
||||
/** 查询设备列表 */ |
||||
getList() { |
||||
this.loading = true |
||||
list({minTime:this.dateRange[0],maxTime:this.dateRange[1],...this.queryParams}).then(response => { |
||||
this.dataList = response.rows |
||||
this.total = response.total |
||||
this.loading = false |
||||
} |
||||
) |
||||
}, |
||||
getByTable() { |
||||
this.loading = true |
||||
byTable().then(response => { |
||||
console.log("%c 🇻🇳: getList -> response ", "font-size:16px;background-color:#c9f364;color:black;", response) |
||||
this.byTableData = response.data |
||||
this.loading = false |
||||
} |
||||
) |
||||
}, |
||||
upImage(fileList){ |
||||
console.log(fileList) |
||||
this.form.image = fileList |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false |
||||
this.reset() |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
email: undefined, |
||||
} |
||||
this.resetForm("form") |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1 |
||||
this.getList() |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.dateRange = [] |
||||
this.resetForm("queryForm") |
||||
this.handleQuery() |
||||
}, |
||||
// 多选框选中数据 |
||||
handleSelectionChange(selection) { |
||||
this.ids = selection.map(item => item.id) |
||||
this.single = selection.length != 1 |
||||
this.multiple = !selection.length |
||||
}, |
||||
/** 新增按钮操作 */ |
||||
handleAdd() { |
||||
this.reset() |
||||
this.open = true |
||||
this.title = "添加设备" |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset() |
||||
this.form = {...row} |
||||
this.open = true |
||||
this.title = "修改" |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function() { |
||||
this.$refs["form"].validate(valid => { |
||||
if (valid) { |
||||
let form = {...this.form} |
||||
this.form.alertRule = { |
||||
ruleName: form.ruleName, |
||||
description: form.description, |
||||
|
||||
alertStation: form.alertStation ? form.alertStation : "", |
||||
alertWay: form.alertWay, |
||||
severity: form.severity, |
||||
enable:0 |
||||
} |
||||
this.form.alertRuleConditionList = [{ |
||||
paramName: form.paramName, |
||||
compareValue: form.compareValue2?form.compareValue1+','+form.compareValue2:form.compareValue1, |
||||
operator: form.operator |
||||
}] |
||||
if (this.form.id != undefined) { |
||||
update(this.form).then(response => { |
||||
this.$modal.msgSuccess("修改成功") |
||||
this.open = false |
||||
this.getList() |
||||
}) |
||||
} else { |
||||
add(this.form).then(response => { |
||||
this.$modal.msgSuccess("新增成功") |
||||
this.open = false |
||||
this.getList() |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
/** 删除按钮操作 */ |
||||
handleDelete(row) { |
||||
const Ids = row.id || this.ids |
||||
this.$modal.confirm('是否确认删除设备ID为"' + Ids + '"的数据项？').then(function() { |
||||
return del(Ids) |
||||
}).then(() => { |
||||
this.getList() |
||||
this.$modal.msgSuccess("删除成功") |
||||
}).catch(() => {}) |
||||
}, |
||||
/** 导入按钮操作 */ |
||||
handleImport() { |
||||
this.upload.title = "设备导入" |
||||
this.upload.open = true |
||||
}, |
||||
/** 下载模板操作 */ |
||||
importTemplate() { |
||||
this.download('system/user/importTemplate', { |
||||
}, `user_template_${new Date().getTime()}.xlsx`) |
||||
}, |
||||
// 文件上传中处理 |
||||
handleFileUploadProgress(event, file, fileList) { |
||||
this.upload.isUploading = true |
||||
}, |
||||
// 文件上传成功处理 |
||||
handleFileSuccess(response, file, fileList) { |
||||
this.upload.open = false |
||||
this.upload.isUploading = false |
||||
this.$refs.upload.clearFiles() |
||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) |
||||
this.getList() |
||||
}, |
||||
// 提交上传文件 |
||||
submitFileForm() { |
||||
this.$refs.upload.submit() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,308 @@ |
||||
<template> |
||||
<div class="dashboard-editor-container"> |
||||
|
||||
<el-row :gutter="32"> |
||||
<el-col :xs="24" :sm="24" :lg="8"> |
||||
<div class="chart-wrapper"> |
||||
<div class="card-title"><i class="el-icon-data-line"></i>预警信息统计</div> |
||||
<div class="data-overview"> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :xs="24" :sm="24" :lg="8"> |
||||
<div class="chart-wrapper"> |
||||
<div class="card-title"><i class="el-icon-pie-chart"></i>检测设备信息</div> |
||||
<pie-chart /> |
||||
</div> |
||||
</el-col> |
||||
<el-col :xs="24" :sm="24" :lg="8"> |
||||
<div class="chart-wrapper overflow-auto"> |
||||
<div class="card-title"><i class="el-icon-monitor"></i>设备预警信息</div> |
||||
|
||||
<div class="div0"> |
||||
<div class="div1" v-for="(alert, index) in alerts" :key="index" :class="`alert-level-${alert.level}`"> |
||||
<dv-border-box-13 class="div2"> |
||||
<el-row> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">预警时间:{{ alert.time }}</span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">设备名称:{{ alert.deviceName }}</span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">设备位置:{{ alert.deviceLocation }}</span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">预警等级:<span class="alert-lable" :style="{ color: getLevelColor(alert.level) }">{{ alert.level }}</span></span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">预警信息:{{ alert.message }}</span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">预警状态:{{ alert.status }}</span> |
||||
</el-col> |
||||
</el-row> |
||||
</dv-border-box-13> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="background:#fff;padding:16px;"> |
||||
<div class="card-title"><i class="el-icon-s-data"></i> 设备状态监控</div> |
||||
<dv-scroll-board :config="scrollConfig" style="height:220px;" /> |
||||
</el-row> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import PanelGroup from './dashboard/PanelGroup' |
||||
import LineChart from './dashboard/LineChart' |
||||
import RaddarChart from './dashboard/RaddarChart' |
||||
import PieChart from './dashboard/PieChart' |
||||
import BarChart from './dashboard/BarChart' |
||||
import digital from './dashboard/digital' |
||||
|
||||
const lineChartData = { |
||||
newVisitis: { |
||||
expectedData: [100, 120, 161, 134, 105, 160, 165], |
||||
actualData: [120, 82, 91, 154, 162, 140, 145] |
||||
}, |
||||
messages: { |
||||
expectedData: [200, 192, 120, 144, 160, 130, 140], |
||||
actualData: [180, 160, 151, 106, 145, 150, 130] |
||||
}, |
||||
purchases: { |
||||
expectedData: [80, 100, 121, 104, 105, 90, 100], |
||||
actualData: [120, 90, 100, 138, 142, 130, 130] |
||||
}, |
||||
shoppings: { |
||||
expectedData: [130, 140, 141, 142, 145, 150, 160], |
||||
actualData: [120, 82, 91, 154, 162, 140, 130] |
||||
} |
||||
} |
||||
|
||||
export default { |
||||
name: 'Index', |
||||
components: { |
||||
PanelGroup, |
||||
LineChart, |
||||
RaddarChart, |
||||
PieChart, |
||||
BarChart, |
||||
digital |
||||
}, |
||||
data() { |
||||
return { |
||||
lineChartData: lineChartData.newVisitis, |
||||
scrollConfig:{ |
||||
header: ['设备名称', '设备位置', 'CPU使用率','内存使用率','温度', '健康度', '设备运行时长','采集时间'], |
||||
data: [ |
||||
['行1列1', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6','行1列7', '行1列8'], |
||||
['行2列1', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6','行2列7', '行2列8'], |
||||
['行3列1', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6','行3列7', '行3列8'], |
||||
['行4列1', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6','行4列7', '行4列8'], |
||||
['行5列1', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6','行5列7', '行5列8'], |
||||
['行6列1', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6','行6列7', '行6列8'], |
||||
['行7列1', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6','行7列7', '行7列8'], |
||||
['行8列1', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6','行8列7', '行8列8'], |
||||
['行9列1', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6','行9列7', '行9列8'], |
||||
['行10列1', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6','行10列7', '行10列8'] |
||||
], |
||||
headerBGC:'#f8f8f9', |
||||
headerHeight:60, |
||||
oddRowBGC:'#f5f7fa', |
||||
evenRowBGC:'#fff', |
||||
}, |
||||
alerts: [ |
||||
{ |
||||
time: '2021-10-16 14:54:11', |
||||
deviceName: 'PLC远程监控系统', |
||||
deviceLocation: '污水处理监控系统', |
||||
level: 1, |
||||
message: '2#电机运行状态等于1', |
||||
status: '触发值: 1' |
||||
}, |
||||
{ |
||||
time: '2021-10-16 14:54:04', |
||||
deviceName: 'PLC远程监控系统', |
||||
deviceLocation: '污水处理监控系统', |
||||
level: 0, |
||||
message: '2#电机运行状态报警恢复', |
||||
status: '触发值: 0' |
||||
}, |
||||
{ |
||||
time: '2021-10-16 14:54:11', |
||||
deviceName: 'PLC远程监控系统', |
||||
deviceLocation: '污水处理监控系统', |
||||
level: 1, |
||||
message: '2#电机运行状态等于1', |
||||
status: '触发值: 1' |
||||
}, |
||||
{ |
||||
time: '2021-10-16 14:54:04', |
||||
deviceName: 'PLC远程监控系统', |
||||
deviceLocation: '污水处理监控系统', |
||||
level: 0, |
||||
message: '2#电机运行状态报警恢复', |
||||
status: '触发值: 0' |
||||
}, |
||||
// 可以继续添加更多预警信息 |
||||
] |
||||
} |
||||
}, |
||||
methods: { |
||||
handleSetLineChartData(type) { |
||||
this.lineChartData = lineChartData[type] |
||||
}, |
||||
getLevelColor(level) { |
||||
const levelColors = { |
||||
0: 'green', |
||||
1: 'orange', |
||||
2: 'red' |
||||
}; |
||||
return levelColors[level] || 'black'; // 默认颜色 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.dashboard-editor-container { |
||||
padding: 32px; |
||||
background-color: rgb(240, 242, 245); |
||||
position: relative; |
||||
|
||||
.chart-wrapper { |
||||
background: #fff; |
||||
padding: 16px; |
||||
margin-bottom: 32px; |
||||
height: 420px; |
||||
} |
||||
} |
||||
|
||||
@media (max-width:1024px) { |
||||
.chart-wrapper { |
||||
padding: 8px; |
||||
} |
||||
} |
||||
.dv-scroll-board{ |
||||
color: #3d3d3d; |
||||
} |
||||
.card-title { |
||||
font-size: 16px; |
||||
margin-bottom: 15px; |
||||
display: flex; |
||||
align-items: center; |
||||
color: #3d3d3d; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.card-title i { |
||||
margin-right: 8px; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.data-overview { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.data-item { |
||||
flex: 1; |
||||
min-width: 30%; |
||||
text-align: center; |
||||
padding: 15px 10px; |
||||
background: #f5f7fa; |
||||
border-radius: 8px; |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.data-item:hover { |
||||
background: #f1f2f4; |
||||
transform: translateY(-3px); |
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
.data-value { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
margin: 10px 0; |
||||
color: #3d3d3d; |
||||
} |
||||
|
||||
.data-label { |
||||
font-size: 14px; |
||||
color: #3d3d3d; |
||||
} |
||||
.alert-list .div0 { |
||||
list-style-type: none; |
||||
padding: 0; |
||||
} |
||||
.overflow-auto { |
||||
overflow: auto; |
||||
} |
||||
.alert-list { |
||||
background-color: #fff; |
||||
padding: 16px; |
||||
margin-bottom: 32px; |
||||
} |
||||
|
||||
.alert-list .div1 { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.div1{ |
||||
margin-bottom: 5px; |
||||
} |
||||
.div2{ |
||||
padding: 20px 16px; |
||||
} |
||||
|
||||
.alert-time, .alert-device-name, .alert-device-location, .alert-message, .alert-status { |
||||
flex: 1; |
||||
} |
||||
|
||||
.alert-level { |
||||
flex: 0.5; |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue