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