YYD-YY 11 months ago
commit 34c8421e1d
  1. 98
      ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/equManagement/EquBaseController.java
  2. 14
      ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertMessageController.java
  3. 2
      ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/exceptionController/AlertRuleController.java
  4. 6
      ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquBase.java
  5. 2
      ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/MonitorLastDto.java
  6. 4
      ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/vo/queryEquBaseVO.java
  7. 6
      ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquBaseMapper.xml
  8. 1
      ALOps_sys_fe/alops-ui/public/index.html
  9. 2
      ALOps_sys_fe/alops-ui/src/api/QandA/knowledge.js
  10. 3
      ALOps_sys_fe/alops-ui/src/api/device/deviceInformation.js
  11. 2
      ALOps_sys_fe/alops-ui/src/api/device/files.js
  12. 49
      ALOps_sys_fe/alops-ui/src/api/device/supplier.js
  13. 58
      ALOps_sys_fe/alops-ui/src/api/inMonitoring/message.js
  14. 58
      ALOps_sys_fe/alops-ui/src/api/inMonitoring/rules.js
  15. 1
      ALOps_sys_fe/alops-ui/src/utils/request.js
  16. 8
      ALOps_sys_fe/alops-ui/src/utils/ruoyi.js
  17. 4
      ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue
  18. 203
      ALOps_sys_fe/alops-ui/src/views/device/deviceInformation/index.vue
  19. 13
      ALOps_sys_fe/alops-ui/src/views/device/deviceManufacturer/index.vue
  20. 4
      ALOps_sys_fe/alops-ui/src/views/device/deviceSupplier/index.vue
  21. 10
      ALOps_sys_fe/alops-ui/src/views/device/deviceType/index.vue
  22. 228
      ALOps_sys_fe/alops-ui/src/views/device/files/index.vue
  23. 280
      ALOps_sys_fe/alops-ui/src/views/device/supplier/index.vue
  24. 4
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/assessment/index.vue
  25. 4
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue
  26. 509
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/earlyWarning/index.vue
  27. 324
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue
  28. 445
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/rules/index.vue
  29. 308
      ALOps_sys_fe/alops-ui/src/views/index copy.vue
  30. 629
      ALOps_sys_fe/alops-ui/src/views/index.vue

@ -86,6 +86,7 @@ public class EquBaseController extends BaseController
// 调用职责单一的 Service 方法
return success(equBaseService.selectLatestEquMonitorInfo(id));
}
/**
* 获取设备指定时间段内的历史监控信息
* @param equBaseQueryDto 查询对象包含设备ID开始时间和结束时间
@ -131,34 +132,35 @@ public class EquBaseController extends BaseController
}
/**
* 根据设备ID返回图片流
* 前端直接 <img src="/equBase/image/{id}">
*/
@PreAuthorize("@ss.hasPermi('device:files:queryimage')")
@GetMapping(value = "/queryimage/{id}")
@ApiOperation("查询单个设备图片")
public void getImage(@PathVariable String id, HttpServletResponse response) throws IOException {
// /**
// * 根据设备ID返回图片流
// * 前端直接 <img src="/equBase/image/{id}">
// */
//
// @PreAuthorize("@ss.hasPermi('device:files:queryimage')")
// @GetMapping(value = "/queryimage/{id}")
// @ApiOperation("查询单个设备图片")
// public void getImage(@PathVariable String id, HttpServletResponse response) throws IOException {
//
// byte[] imgBytes = equBaseService.selectEquBaseImageById(id).getEquImage();
//
//
// if (imgBytes != null && imgBytes.length > 0) {
// // 设置响应类型,可根据实际图片类型动态修改
// response.setContentType("image/png");
// // 可选:缓存图片
// response.setHeader("Cache-Control", "max-age=3600");
// // 输出流写入响应
// ServletOutputStream os = response.getOutputStream();
// os.write(imgBytes);
// os.flush();
// os.close();
// } else {
// // 图片不存在
// response.sendError(HttpServletResponse.SC_NOT_FOUND);
// }
// }
byte[] imgBytes = equBaseService.selectEquBaseImageById(id).getEquImage();
if (imgBytes != null && imgBytes.length > 0) {
// 设置响应类型,可根据实际图片类型动态修改
response.setContentType("image/png");
// 可选:缓存图片
response.setHeader("Cache-Control", "max-age=3600");
// 输出流写入响应
ServletOutputStream os = response.getOutputStream();
os.write(imgBytes);
os.flush();
os.close();
} else {
// 图片不存在
response.sendError(HttpServletResponse.SC_NOT_FOUND);
}
}
//厂商下拉表
@PreAuthorize("@ss.hasPermi('device:files:queryManufacture')")
@GetMapping( "/manufacture")
@ -192,46 +194,44 @@ public class EquBaseController extends BaseController
/**
* 新增设备基本信息
* @ModelAttribute equBase
* @RequestPart(value = "file", required = false) // 使用 @RequestPart
* @ApiParam(value = "设备图片文件", type = "file")
* MultipartFile file
*/
@PreAuthorize("@ss.hasPermi('device:files:add')")
@Log(title = "设备基本信息", businessType = BusinessType.INSERT)
@PostMapping(value = "/add")
@ApiOperation("增加设备档案信息")
public AjaxResult add(
@ModelAttribute EquBase equBase,
@RequestPart(value = "file", required = false) // 使用 @RequestPart
@ApiParam(value = "设备图片文件", type = "file")
MultipartFile file
) throws IOException {
public AjaxResult add( @RequestBody EquBase equBase
) {
// 处理图片
if (file != null && !file.isEmpty()) {
equBase.setEquImage(file.getBytes());
}
// // 处理图片
// if (file != null && !file.isEmpty()) {
// equBase.setEquImage(file.getBytes());
// }
// 调用 Service 插入数据库
return toAjax(equBaseService.insertEquBase(equBase));
}
/**
* @ModelAttribute EquBase equBase, // 自动绑定表单字段
* @RequestPart(value = "file", required = false) // 使用 @RequestPart
* @ApiParam(value = "设备图片文件", type = "file")
* MultipartFile file
* 修改设备基本信息
*/
@PreAuthorize("@ss.hasPermi('device:files:edit')")
@Log(title = "设备基本信息", businessType = BusinessType.UPDATE)
@PutMapping("/modify")
@ApiOperation("修改设备档案信息")
public AjaxResult edit(
@ModelAttribute EquBase equBase, // 自动绑定表单字段
@RequestPart(value = "file", required = false) // 使用 @RequestPart
@ApiParam(value = "设备图片文件", type = "file")
MultipartFile file
) throws IOException {
// 处理图片
if (file != null && !file.isEmpty()) {
equBase.setEquImage(file.getBytes()); // 存数据库 Blob
}
public AjaxResult edit(@RequestBody EquBase equBase){
// // 处理图片
// if (file != null && !file.isEmpty()) {
// equBase.setEquImage(file.getBytes()); // 存数据库 Blob
// }
// 调用 Service 插入数据库
return toAjax(equBaseService.updateEquBase(equBase));

@ -21,14 +21,7 @@ import com.alops.system.service.IAlertMessageService;
import io.swagger.annotations.ApiOperation;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.*;
/**
* 故障统计Controller
@ -92,11 +85,10 @@ public class AlertMessageController extends BaseController
* 查询预警信息统计列表
*/
@PreAuthorize("@ss.hasPermi('inMonitoring:alertMessage:list')")
@PostMapping ("/list")
@GetMapping ("/list")
@ApiOperation("查询预警信息")
@Log(title = "查询预警信息", businessType = BusinessType.UPDATE)
public TableDataInfo list( @RequestBody AlertDto alertMessage)
public TableDataInfo list( AlertDto alertMessage)
{
startPage();
List<AlertMessage> list = alertMessageService.selectAlertMessageList(alertMessage);

@ -69,7 +69,7 @@ public class AlertRuleController extends BaseController {
@PreAuthorize("@ss.hasPermi('inMonitoring:alertRule:edit')")
@ApiOperation("修改预警规则")
@Log(title = "【修改预警规则】", businessType = BusinessType.DELETE)
@PostMapping("/editRule")
@PutMapping("/editRule")
public AjaxResult editRule(@RequestBody AlertRuleAddDto dto) {
try {
AlertRule alertRule = alertRuleService.updateRule(dto);

@ -55,6 +55,8 @@ public class EquBase
@Excel(name = "设备类型 id")
private String equType;
public EquType getEquTypeVO() {
return equTypeVO;
}
@ -114,8 +116,8 @@ public class EquBase
@Excel(name = "采集次数")
private Long createBy ;
@Excel(name = "设备图片")
private byte[] equImage ;
@Excel(name = "设备图片地址")
private String equImage ;
public void setId(String id)

@ -28,7 +28,7 @@ public class MonitorLastDto {
private String inCharge;
private int failureFrequency;
private int warranty;
private Blob equImage;
private String equImage;
// equ_type
private String equType;

@ -88,6 +88,10 @@ public class queryEquBaseVO {
@Excel(name = "累积故障次数")
private String deviceLevel;
@Excel(name = "设备图片")
private String equImage;
public void setId(String id)
{

@ -111,8 +111,8 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
b.create_date AS createDate,
b.status AS status,
b.device_level AS deviceLevel,
g.health AS health
g.health AS health,
b.equ_image AS equImage
</sql>
<select id="selectEquBaseList" parameterType="equBaseQueryDto" resultType="com.alops.system.domain.vo.queryEquBaseVO">
@ -358,7 +358,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<if test="createDate != null">#{createDate},</if>
<if test="equNumber != null">#{equNumber},</if>
COALESCE(#{status,jdbcType=INTEGER}, 0),
<if test="equImage != null">#{equImage,jdbcType=BLOB},</if>
<if test="equImage != null">#{equImage},</if>
COALESCE(#{failureFrequency,jdbcType=BIGINT}, 0),
COALESCE(#{gatherFrequency,jdbcType=BIGINT}, 0),
<if test="deviceLevel != null">#{deviceLevel},</if>

@ -6,6 +6,7 @@
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>

@ -1,5 +1,5 @@
import request from '@/utils/request'
const api = '/device/deviceType/'
const api = '/knowledge/'
// 查询详细
export function getDict() {

@ -6,8 +6,7 @@ export function addRule(data) {
return request({
url: api + 'addRule',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
data: data
})
}
// 查询规则

@ -48,7 +48,7 @@ export function update(data) {
// 删除
export function del(id) {
return request({
url: api + 'delete' + id,
url: api + id,
method: 'delete'
})
}

@ -0,0 +1,49 @@
import request from '@/utils/request'
const api = '/device/supplier/'
// 查询详细
export function getDict() {
return request({
url: '/sys_dict',
method: 'get'
})
}
// 查询列表
export function list(query) {
return request({
url: api + 'query',
method: 'get',
params: query
})
}
// 新增
export function add(data) {
return request({
url: api + 'add',
method: 'post',
data: data
})
}
// 修改
export function update(data) {
return request({
url: api + 'edit',
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/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'
})
}

@ -42,6 +42,7 @@ service.interceptors.request.use(config => {
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
time: new Date().getTime()
}
console.log("%c 🛑: requestObj ", "font-size:16px;background-color:#4408a2;color:white;", requestObj)
const requestSize = Object.keys(JSON.stringify(requestObj)).length // 请求数据大小
const limitSize = 5 * 1024 * 1024 // 限制存放数据5M
if (requestSize >= limitSize) {

@ -52,16 +52,16 @@ export function resetForm(refName) {
}
// 添加日期范围
export function addDateRange(params, dateRange, propName) {
export function addDateRange(params, dateRange, propNameStart, propNameEnd) {
let search = params
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {}
dateRange = Array.isArray(dateRange) ? dateRange : []
if (typeof (propName) === 'undefined') {
if (typeof (propNameStart) === 'undefined') {
search.params['beginTime'] = dateRange[0]
search.params['endTime'] = dateRange[1]
} else {
search.params['begin' + propName] = dateRange[0]
search.params['end' + propName] = dateRange[1]
search.params[propNameStart] = dateRange[0]
search.params[propNameEnd] = dateRange[1]
}
return search
}

@ -164,10 +164,6 @@ export default {
},
created() {
this.getList()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询类型列表 */

@ -5,44 +5,51 @@
<!--用户数据-->
<pane size="84">
<el-col>
<el-form :model="queryParams" ref="form" size="small" :inline="true" v-show="showSearch" label-width="auto">
<el-form :model="queryParams" :rules="rules" ref="form" size="small" :inline="true" v-show="showSearch" label-width="auto">
<el-row>
<el-form-item label="开启定时" prop="queryParams">
<el-radio-group v-model="queryParams.ruleType">
<el-radio :label="1">间隔采集</el-radio>
<el-radio :label="2">固定时间采集</el-radio>
<el-radio :label="3">立即采集</el-radio>
<el-radio :label="0">间隔采集</el-radio>
<el-radio :label="1">固定时间采集</el-radio>
<el-radio :label="2">立即采集</el-radio>
</el-radio-group>
</el-form-item>
</el-row>
<el-row v-show="queryParams.ruleType == 1">
<el-row v-show="queryParams.ruleType == 0">
<el-col :span="24">
<el-form-item label="采集频率" prop="frequency">
<el-input-number v-model="queryParams.frequency" controls-position="right" :min="1"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="采集时间限制">
<el-time-picker
is-range
v-model="dateRange"
<el-form-item label="采集时间限制" prop="dateRange">
<el-date-picker
v-model="queryParams.dateRange"
@change="handleDateRangeChange"
value-format="yyyy-MM-dd hh:mm:ss"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="{ disabledDate: disablePastDate }"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="queryParams.ruleType == 2">
<el-row v-show="queryParams.ruleType == 1">
<el-col :span="24">
<el-form-item label="采集时间限制">
<el-time-picker
<el-date-picker
v-model="queryParams.gatherTime"
:disabledDate="disablePastDate"
value-format="yyyy-MM-dd hh:mm:ss"
type="datetime"
:picker-options="{ disabledDate: disablePastDate }"
placeholder="任意时间点">
</el-time-picker>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
@ -69,7 +76,6 @@ import "splitpanes/dist/splitpanes.css"
export default {
name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { Treeselect, Splitpanes, Pane },
data() {
return {
@ -93,13 +99,15 @@ export default {
title: "",
//
open: false,
//
dateRange: [new Date(), new Date()],
//
queryParams: {
ruleType: 1,
ruleType: 0,
frequency: 1,
gatherTime: null,
startTime: null,
endTime: null,
//
dateRange: [],
},
//
@ -108,28 +116,9 @@ export default {
{ required: true, message: "用户名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
],
nickName: [
dateRange: [
{ 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"
}
]
}
}
},
@ -141,96 +130,22 @@ export default {
},
created() {
this.getList()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true
queryRule(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows
this.total = response.total
queryRule().then(response => {
this.queryParams = {...this.queryParams,...response.data}
this.loading = false
}
)
},
handleTimeChange(val) {
console.log('时间范围:', val); // val [start, end]
const [startTime, endTime] = val;
this.queryParams.startTime = startTime
this.queryParams.endTime = endTime
//
},
//
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
},
//
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")
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
getUser().then(response => {
this.postOptions = response.posts
this.roleOptions = response.roles
this.open = true
this.title = "添加用户"
this.form.password = this.initPassword
})
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
addRule(this.form).then(response => {
addRule(this.queryParams).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
@ -238,47 +153,21 @@ export default {
}
})
},
/** 删除按钮操作 */
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
handleDateRangeChange(value) {
console.log("%c 🐁: handleDateRangeChange -> value ", "font-size:16px;background-color:#dbe986;color:black;", value)
this.queryParams.startTime = value[0]
this.queryParams.endTime = value[1]
},
//
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()
disablePastDate(time) {
//
const today = new Date();
// 00:00:00
today.setHours(0, 0, 0, 0);
// 00:00:00
console.log("%c 🐇: disablePastDate -> time.getTime() < today.getTime() ", "font-size:16px;background-color:#c5c908;color:black;", time.getTime() , today.getTime(), time.getTime() < today.getTime())
return time.getTime() < today.getTime();
}
}
}

@ -52,8 +52,7 @@
</el-table-column>
<el-table-column label="状态" align="center" key="status" prop="status" width="120" >
<template slot-scope="scope">
<span>{{ scope.row.status ? '正常' : '停用' }}</span>
<dict-tag :options="dict.type.device_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
@ -96,8 +95,8 @@
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="介绍" prop="description">
<el-input v-model="form.description" placeholder="请输入介绍" type="textarea" :rows="3" />
<el-form-item label="描述" prop="description">
<el-input v-model="form.description" placeholder="请输入描述" type="textarea" :rows="3" />
</el-form-item>
</el-col>
</el-row>
@ -140,7 +139,7 @@ import "splitpanes/dist/splitpanes.css"
export default {
name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'],
dicts: ['sys_normal_disable', 'sys_user_sex','device_disable'],
components: { Treeselect, Splitpanes, Pane },
data() {
return {
@ -240,10 +239,6 @@ export default {
},
created() {
this.getList()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询用户列表 */

@ -221,10 +221,6 @@ export default {
},
created() {
this.getList()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询用户列表 */

@ -62,7 +62,6 @@
<el-dialog :title="title" :visible.sync="open" width="760px" append-to-body :destroy-on-close="true">
<el-form ref="form" :model="form" :rules="rules" label-width="90px">
<el-row :gutter="20">
<!-- 类型昵称 + 手机号码 -->
<el-col :span="12">
<el-form-item label="设备名称" prop="name">
<el-input v-model="form.name" placeholder="请输入类型昵称" maxlength="30" />
@ -188,10 +187,6 @@ export default {
},
created() {
this.getList()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询类型列表 */
@ -207,8 +202,6 @@ export default {
upImage(fileList){
console.log(fileList)
this.form.image = fileList
},
//
cancel() {
@ -234,10 +227,7 @@ export default {
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = []
this.resetForm("queryForm")
this.queryParams.deptId = undefined
this.$refs.tree.setCurrentKey(null)
this.handleQuery()
},
//

@ -6,27 +6,19 @@
<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="name">
<el-input v-model="queryParams.name" placeholder="请输入设备名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</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 label="设备类型" prop="phonenumber">
<el-input v-model="queryParams.phonenumber" placeholder="请输入设备类型" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</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 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-option v-for="dict in dict.type.device_disable" :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.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
<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>
@ -53,46 +45,43 @@
width="60"
type="index"
></el-table-column>
<el-table-column label="设备编号" align="center" key="id" prop="id" />
<el-table-column label="设备ID" align="center" key="equNumber" prop="equNumber" />
<el-table-column label="设备名称" align="center" key="name" prop="name" :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="equType" prop="EquType" :show-overflow-tooltip="true" />
<el-table-column label="设备级别" align="center" prop="phonenumber" width="120" />
<el-table-column label="设备类型" align="center" key="equType" prop="equType" :show-overflow-tooltip="true" />
<el-table-column label="设备级别" align="center" key="deviceLevel" prop="deviceLevel" width="120" />
<el-table-column label="启用状态" align="center" key="status">
<template slot-scope="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
<dict-tag :options="dict.type.device_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="带外管理IP" align="center" key="Ip" prop="Ip" width="120" />
<el-table-column label="设备厂商" align="center" key="Manufacture" prop="Manufacture" width="120" />
<el-table-column label="带外管理IP" align="center" key="ip" prop="ip" width="120" />
<el-table-column label="安装位置" align="center" key="location" prop="Location" width="120" />
<el-table-column label="安装时间" align="center" prop="InstallDate" width="160">
<el-table-column label="安装时间" align="center" prop="installDate" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.InstallDate) }}</span>
<span>{{ parseTime(scope.row.installDate) }}</span>
</template>
</el-table-column>
<el-table-column label="设备管理员" align="center" prop="inCharge" width="120" />
<el-table-column label="设备厂商" align="center" key="manufacture" prop="manufacture" width="120" />
<el-table-column label="设备供应商" align="center" key="supplierName" prop="supplierName" width="120" />
<el-table-column label="设备管理员" align="center" key="inCharge" prop="inCharge" width="120" />
<el-table-column label="预计年限" align="center" key="lifeCycle" prop="lifeCycle" width="120" />
<el-table-column label="服役年限" align="center" key="serviceTime" prop="serviceTime" width="120" />
<el-table-column label="质保时间" align="center" key="warranty" prop="warranty" width="120" />
<el-table-column label="累计预警次数" align="center" key="failureFrequency" prop="failureFrequency" width="120" />
<el-table-column label="累计维修次数" align="center" key="repairFrequency" prop="repairFrequency" width="120" />
<el-table-column label="累计维修金额" align="center" key="repairCost" prop="repairCost" width="120" />
<el-table-column label="设备添加人" align="center" key="createBy" prop="createBy" width="120" />
<el-table-column label="添加时间" align="center" prop="createDate" width="160">
<el-table-column label="设备图片" align="center" key="image" prop="image" :show-overflow-tooltip="true" >
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
<ImagePreview :src="scope.row.image"/>
</template>
</el-table-column>
<el-table-column label="修改人" align="center" prop="UpdateBy" width="120" />
<el-table-column label="修改时间" align="center" prop="createTime" width="160">
<el-table-column label="设备添加人" align="center" key="createBy" prop="createBy" width="120" />
<el-table-column label="添加日期" align="center" prop="createDate" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
<span>{{ parseTime(scope.row.createDate) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
<template slot-scope="scope" v-if="scope.row.id !== 1">
<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>
@ -109,8 +98,8 @@
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="设备编号" prop="id">
<el-input v-model="form.id" placeholder="请输入设备编号" maxlength="30" />
<el-form-item label="设备编号" prop="equNumber">
<el-input v-model="form.equNumber" placeholder="请输入设备名称" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -129,8 +118,8 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备级别" prop="equLevel">
<el-input v-model="form.equLevel" placeholder="请输入设备级别" maxlength="30" />
<el-form-item label="设备级别" prop="deviceLevel">
<el-input v-model="form.deviceLevel" placeholder="请输入设备级别" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -169,10 +158,9 @@
</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 label="设备图片" prop="image">
<ImageUpload @input="upImage" :value="form.image"/>
</el-form-item>
</el-col>
</el-row>
@ -217,7 +205,7 @@ import "splitpanes/dist/splitpanes.css"
export default {
name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'],
dicts: ['device_disable', 'sys_user_sex'],
components: { Treeselect, Splitpanes, Pane },
data() {
return {
@ -279,19 +267,49 @@ export default {
pageNum: 1,
pageSize: 10,
name: undefined,
phonenumber: undefined,
status: undefined,
deptId: undefined
status: undefined
},
//
rules: {
equNumber: [
{ required: true, message: "设备编号不能为空", trigger: "blur" },
],
name: [
{ required: true, message: "设备名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '设备名称长度必须介于 2 和 20 之间', trigger: 'blur' }
{ required: true, message: "设备名称不能为空", trigger: "blur" }
],
version: [
{ required: true, message: "设备版本不能为空", trigger: "blur" },
],
equType: [
{ required: true, message: "设备类型不能为空", trigger: "blur" }
],
deviceLevel: [
{ required: true, message: "设备级别不能为空", trigger: "blur" },
],
ip: [
{ required: true, message: "带外管理IP不能为空", trigger: "blur" }
],
manufacture: [
{ required: true, message: "设备厂商不能为空", trigger: "blur" },
],
location: [
{ required: true, message: "安装位置不能为空", trigger: "blur" }
],
inCharge: [
{ required: true, message: "设备管理员不能为空", trigger: "blur" },
],
lifeCycle: [
{ required: true, message: "预计年限不能为空", trigger: "blur" }
],
serviceTime: [
{ required: true, message: "服役年限不能为空", trigger: "blur" },
],
warranty: [
{ required: true, message: "质保年限不能为空", trigger: "blur" }
],
image: [
{ required: true, message: "设备图片不能为空", trigger: "blur" }
],
nickName: [
{ required: true, message: "设备昵称不能为空", trigger: "blur" }
]
}
}
},
@ -303,68 +321,21 @@ export default {
},
created() {
this.getList()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询设备列表 */
getDicts() {
getDict().then(response => {
console.log("%c 🗝: getDict -> response ", "font-size:16px;background-color:#796b0d;color:white;", response)
}
)
},
/** 查询设备列表 */
getList() {
this.loading = true
list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
list({minTime:this.dateRange[0],maxTime:this.dateRange[1],...this.queryParams}).then(response => {
this.dataList = 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.name + '"设备吗?').then(function() {
return changeUserStatus(row.id, row.status)
}).then(() => {
this.$modal.msgSuccess(text + "成功")
}).catch(function() {
row.status = row.status === "0" ? "1" : "0"
})
upImage(fileList){
console.log(fileList)
this.form.image = fileList
},
//
cancel() {
@ -397,11 +368,8 @@ export default {
/** 重置按钮操作 */
resetQuery() {
this.dateRange = []
// this.resetForm("queryForm")
// this.queryParams.deptId = undefined
// this.$refs.tree.setCurrentKey(null)
// this.handleQuery()
this.getDicts()
this.resetForm("queryForm")
this.handleQuery()
},
//
handleSelectionChange(selection) {
@ -412,56 +380,20 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset()
// getInfo().then(response => {
// this.postOptions = response.posts
// this.roleOptions = response.roles
// })
this.open = true
this.title = "添加设备"
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getInfo(id).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.form = {...row}
this.open = true
this.title = "修改设备"
this.form.password = ""
})
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.name + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "设备密码长度必须介于 5 和 20 之间",
inputValidator: (value) => {
if (/<|>|"|'|\||\\/.test(value)) {
return "不能包含非法字符:< > \" ' \\\ |"
}
},
}).then(({ value }) => {
resetUserPwd(row.id, value).then(response => {
this.$modal.msgSuccess("修改成功,新密码是:" + value)
})
}).catch(() => {})
this.title = "修改"
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
add(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
if (this.form.id != undefined) {
update(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
@ -481,19 +413,13 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const Ids = row.id || this.ids
this.$modal.confirm('是否确认删除设备编号为"' + Ids + '"的数据项?').then(function() {
this.$modal.confirm('是否确认删除设备ID为"' + Ids + '"的数据项?').then(function() {
return del(Ids)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
}).catch(() => {})
},
/** 导出按钮操作 */
handleExport() {
this.download('system/user/export', {
...this.queryParams
}, `user_${new Date().getTime()}.xlsx`)
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "设备导入"

@ -2,18 +2,14 @@
<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="name">
<el-input v-model="queryParams.name" placeholder="请输入厂商名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="联系人" prop="contactBy">
<el-input v-model="queryParams.contactBy" placeholder="请输入联系人" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="联系电话" prop="contactWay">
<el-input v-model="queryParams.contactWay" placeholder="请输入联系电话" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
<el-form-item label="类型名称" prop="name">
<el-input v-model="queryParams.name" 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>
@ -23,36 +19,38 @@
<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:deviceManufacturer: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:deviceManufacturer: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:deviceManufacturer: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:deviceManufacturer:export']">导出</el-button>
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:deviceType:add']">新增</el-button>
</el-col>
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> -->
</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="ID" align="center" key="Id" prop="Id" />
<el-table-column label="厂商名称" align="center" key="name" prop="name" width="120" />
<el-table-column
label="序号"
width="60"
type="index"
></el-table-column>
<el-table-column label="供应商名称" align="center" key="name" prop="name" width="160" :show-overflow-tooltip="true" />
<el-table-column label="联系人" align="center" key="contactBy" prop="contactBy" width="120" />
<el-table-column label="联系方式" align="center" key="contactWay" prop="contactWay" width="120" />
<el-table-column label="创建人" align="center" key="CreateBy" prop="CreateBy" width="120" />
<el-table-column label="创建日期" align="center" prop="CreateDate" width="160">
<el-table-column label="描述" align="center" key="description" prop="description" width="120" />
<el-table-column label="创建人" align="center" key="createBy" prop="createBy" width="120" />
<el-table-column label="创建日期" align="center" prop="createTime" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.CreateDate) }}</span>
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" key="Status" prop="Status" width="120" />
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
<el-table-column label="状态" align="center" key="status" prop="status" width="120" >
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:deviceManufacturer:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:deviceManufacturer:remove']">删除</el-button>
<span>{{ scope.row.status ? '正常' : '停用' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
<template slot-scope="scope" v-if="scope.row.id !== 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>
@ -63,17 +61,17 @@
</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-dialog :title="title" :visible.sync="open" width="760px" append-to-body :destroy-on-close="true">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="商名称" prop="name">
<el-input v-model="form.name" placeholder="请输入用户昵称" maxlength="30" />
<el-form-item label="供应商名称" prop="name">
<el-input v-model="form.name" placeholder="请输入联系人" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系人" prop="contactBy">
<el-input v-model="form.contactBy" placeholder="请输入手机号码" maxlength="30" />
<el-input v-model="form.contactBy" placeholder="请输入联系人" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
@ -81,38 +79,33 @@
<el-input v-model="form.contactWay" placeholder="请输入手机号码" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="启用状态" clearable>
<el-option v-for="dict in statusSelections" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="描述" prop="description">
<el-input v-model="form.description" 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>
<!-- 用户导入对话框 -->
<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>仅允许导入xlsxlsx格式文件</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, resetUserPwd, changeUserStatus } from "@/api/device/deviceManufacturer"
import { list, del, add, update } from "@/api/device/supplier"
import { getToken } from "@/utils/auth"
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
@ -125,6 +118,7 @@ export default {
components: { Treeselect, Splitpanes, Pane },
data() {
return {
appBase:process.env.VUE_APP_BASE_API,
//
loading: true,
//
@ -137,7 +131,7 @@ export default {
showSearch: true,
//
total: 0,
//
//
userList: null,
//
title: "",
@ -159,19 +153,23 @@ export default {
roleOptions: [],
//
form: {},
statusSelections: [
{ label: "正常", value: 1 },
{ label: "停用", value: 0 }
],
defaultProps: {
children: "children",
label: "label"
},
//
//
upload: {
//
//
open: false,
//
//
title: "",
//
isUploading: false,
//
//
updateSupport: 0,
//
headers: { Authorization: "Bearer " + getToken() },
@ -182,39 +180,29 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 10,
name: undefined,
contactBy: undefined,
status: undefined,
deptId: undefined
name: undefined
},
//
rules: {
name: [
{ 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"]
}
{ required: true, message: "供应商名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '供应商名称长度必须介于 2 和 20 之间', trigger: 'blur' }
],
contactBy: [
{ required: true, message: "联系人不能为空", trigger: "blur" }
],
contactWay: [
{ required: true, message: "联系方式不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
],
status: [
{ required: true, message: "状态不能为空", trigger: "blur" }
],
}
}
},
@ -226,13 +214,9 @@ export default {
},
created() {
this.getList()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询用户列表 */
/** 查询类型列表 */
getList() {
this.loading = true
list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
@ -242,45 +226,11 @@ export default {
}
)
},
// /** */
// 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.name + '"用户吗?').then(function() {
return changeUserStatus(row.Id, row.status)
}).then(() => {
this.$modal.msgSuccess(text + "成功")
}).catch(function() {
row.status = row.status === "0" ? "1" : "0"
})
upImage(fileList){
console.log(fileList)
this.form.image = fileList
},
//
cancel() {
@ -290,18 +240,12 @@ export default {
//
reset() {
this.form = {
Id: undefined,
deptId: undefined,
id: undefined,
name: undefined,
nickName: undefined,
password: undefined,
contactBy: undefined,
email: undefined,
sex: undefined,
status: "0",
remark: undefined,
postIds: [],
roleIds: []
description: undefined,
createBy: undefined,
image: undefined,
createDate: undefined
}
this.resetForm("form")
},
@ -320,78 +264,28 @@ export default {
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.Id)
this.ids = selection.map(item => item.id)
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 Id = row.Id || this.ids
getUser(Id).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)
const id = row.id || this.ids
this.open = true
this.title = "修改用户"
this.form.password = ""
})
},
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.name + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
inputValidator: (value) => {
if (/<|>|"|'|\||\\/.test(value)) {
return "不能包含非法字符:< > \" ' \\\ |"
}
},
}).then(({ value }) => {
resetUserPwd(row.Id, value).then(response => {
this.$modal.msgSuccess("修改成功,新密码是:" + value)
})
}).catch(() => {})
},
/** 分配角色操作 */
handleAuthRole: function(row) {
const Id = row.Id
this.$router.push("/system/user-auth/role/" + Id)
this.title = "修改类型"
this.form = {...row, image: row.image}
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.Id != undefined) {
if (this.form.id != undefined) {
update(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
this.open = false
@ -409,8 +303,8 @@ export default {
},
/** 删除按钮操作 */
handleDelete(row) {
const Ids = row.Id || this.ids
this.$modal.confirm('是否确认删除用户编号为"' + Ids + '"的数据项?').then(function() {
const Ids = row.id || this.ids
this.$modal.confirm('是否确认删除类型编号为"' + Ids + '"的数据项?').then(function() {
return del(Ids)
}).then(() => {
this.getList()
@ -425,7 +319,7 @@ export default {
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "用户导入"
this.upload.title = "类型导入"
this.upload.open = true
},
/** 下载模板操作 */

@ -306,10 +306,6 @@ export default {
},
created() {
this.getList()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询用户列表 */

@ -274,10 +274,6 @@ export default {
},
created() {
this.getList()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
methods: {
/** 查询设备列表 */

@ -1,509 +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>仅允许导入xlsxlsx格式文件</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()
// this.getDeptTree()
this.getConfigKey("sys.user.initPassword").then(response => {
this.initPassword = response.msg
})
},
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>仅允许导入xlsxlsx格式文件</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>

@ -1,94 +1,127 @@
<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 class="body">
<div class="container">
<!-- 上层三个模块并排 -->
<div class="top-section">
<!-- 预警信息统计 -->
<div class="panel">
<div class="card">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-exclamation-triangle"></i> 预警信息统计1</h2>
</div>
<div class="data-item">
<div class="data-label">预警总数</div>
<digital :configData="{number:[111]}" />
<div class="stats-container">
<div class="stat-card">
<div class="stat-label">预警总数</div>
<div class="stat-value">{{ totalAlerts }}</div>
<div class="stat-desc">系统检测到的预警总数</div>
</div>
<div class="data-item">
<div class="data-label">预警总数</div>
<digital :configData="{number:[111]}" />
<div class="stat-card warning">
<div class="stat-label">当前预警</div>
<div class="stat-value">{{ activeAlerts }}</div>
<div class="stat-desc">需要处理的预警数量</div>
</div>
<div class="data-item">
<div class="data-label">预警总数</div>
<digital :configData="{number:[111]}" />
<div class="stat-card normal">
<div class="stat-label">已处理</div>
<div class="stat-value">{{ resolvedAlerts }}</div>
<div class="stat-desc">已解决的预警数量</div>
</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 class="panel">
<div class="card">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-microchip"></i> 检测设备信息</h2>
</div>
<ul class="device-list">
<li class="device-item" v-for="device in devices" :key="device.id" :class="device.status">
<div class="device-icon">
<i :class="device.icon"></i>
</div>
<div class="device-info">
<div class="device-name">{{ device.name }}</div>
<div class="device-details">{{ device.description }}</div>
</div>
<div class="data-item">
<div class="data-label">预警总数</div>
<digital :configData="{number:[111]}" />
<span :class="device.status === 'warning' ? 'alert-badge' : 'normal-badge'">
{{ device.status === 'warning' ? '预警中' : '正常' }}
</span>
</li>
</ul>
</div>
</div>
<!-- 设备预警信息 -->
<div class="panel">
<div class="card">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-bell"></i> 设备预警信息</h2>
</div>
<ul class="device-list">
<li class="device-item" v-for="alert in alerts" :key="alert.id" :class="alert.status">
<div class="device-icon">
<i :class="alert.icon"></i>
</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 class="device-info">
<div class="device-name">{{ alert.deviceName }}</div>
<div class="device-details">
<div>预警时间: {{ alert.time }}</div>
<div>设备位置: {{ alert.location }}</div>
<div>预警信息: {{ alert.message }}</div>
</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>
<span :class="alert.status === 'warning' ? 'alert-badge' : 'normal-badge'">
{{ alert.level === 1 ? '等级1' : '等级0' }}
</span>
</li>
</ul>
</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 class="bottom-section">
<div class="card full-width">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-desktop"></i> 设备状态监控</h2>
<div class="last-update">最后更新: {{ lastUpdate }}</div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th v-for="header in tableHeaders" :key="header">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="device in deviceStatus" :key="device.id">
<td>{{ device.name }}</td>
<td>{{ device.location }}</td>
<td>
<span :class="getCpuStatus(device.cpuUsage)"></span>
{{ device.cpuUsage }}%
</td>
<td>
<span :class="getMemoryStatus(device.memoryUsage)"></span>
{{ device.memoryUsage }}%
</td>
<td>{{ device.temperature }}°C</td>
<td>
<div class="health-bar">
<div class="health-fill" :class="getHealthStatus(device.health)"></div>
</div>
{{ device.health }}%
</td>
<td>{{ device.uptime }}</td>
<td>{{ device.collectionTime }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
@ -100,25 +133,6 @@ 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: {
@ -131,178 +145,395 @@ export default {
},
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']
totalAlerts: 111,
activeAlerts: 42,
resolvedAlerts: 69,
lastUpdate: new Date().toLocaleString(),
devices: [
{ id: 1, name: 'Forecasts', description: '预测分析系统', status: 'normal', icon: 'fas fa-chart-line' },
{ id: 2, name: 'Gold', description: '核心处理单元', status: 'warning', icon: 'fas fa-server' },
{ id: 3, name: 'Industries', description: '工业控制系统', status: 'normal', icon: 'fas fa-industry' }
],
headerBGC:'#f8f8f9',
headerHeight:60,
oddRowBGC:'#f5f7fa',
evenRowBGC:'#fff',
},
alerts: [
{
time: '2021-10-16 14:54:11',
id: 1,
deviceName: 'PLC远程监控系统',
deviceLocation: '污水处理监控系统',
level: 1,
time: '2021-10-16 14:54:11',
location: '污水处理监控系统',
message: '2#电机运行状态等于1',
status: '触发值: 1'
level: 1,
status: 'warning',
icon: 'fas fa-exclamation-circle'
},
{
time: '2021-10-16 14:54:04',
id: 2,
deviceName: 'PLC远程监控系统',
deviceLocation: '污水处理监控系统',
level: 0,
time: '2021-10-16 14:54:04',
location: '污水处理监控系统',
message: '2#电机运行状态报警恢复',
status: '触发值: 0'
level: 0,
status: 'normal',
icon: 'fas fa-check-circle'
}
],
tableHeaders: ['设备名称', '设备位置', 'CPU使用率', '内存使用率', '温度', '健康度', '设备运行时长', '采集时间'],
deviceStatus: [
{
id: 1,
name: 'PLC控制系统',
location: '主控室A区',
cpuUsage: 45,
memoryUsage: 62,
temperature: 42,
health: 85,
uptime: '125天8小时',
collectionTime: '2021-10-16 15:20:00'
},
{
time: '2021-10-16 14:54:11',
deviceName: 'PLC远程监控系统',
deviceLocation: '污水处理监控系统',
level: 1,
message: '2#电机运行状态等于1',
status: '触发值: 1'
id: 2,
name: '数据采集器',
location: '污水处理区',
cpuUsage: 78,
memoryUsage: 85,
temperature: 58,
health: 65,
uptime: '89天12小时',
collectionTime: '2021-10-16 15:22:00'
},
{
time: '2021-10-16 14:54:04',
deviceName: 'PLC远程监控系统',
deviceLocation: '污水处理监控系统',
level: 0,
message: '2#电机运行状态报警恢复',
status: '触发值: 0'
id: 3,
name: '监控服务器',
location: '数据中心',
cpuUsage: 32,
memoryUsage: 45,
temperature: 38,
health: 92,
uptime: '210天3小时',
collectionTime: '2021-10-16 15:25:00'
},
//
{
id: 4,
name: '网络交换机',
location: '通信机房',
cpuUsage: 15,
memoryUsage: 28,
temperature: 35,
health: 95,
uptime: '156天7小时',
collectionTime: '2021-10-16 15:18:00'
}
]
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
getCpuStatus(usage) {
if (usage < 50) return 'status-indicator status-good';
if (usage < 80) return 'status-indicator status-warning';
return 'status-indicator status-critical';
},
getMemoryStatus(usage) {
if (usage < 60) return 'status-indicator status-good';
if (usage < 85) return 'status-indicator status-warning';
return 'status-indicator status-critical';
},
getLevelColor(level) {
const levelColors = {
0: 'green',
1: 'orange',
2: 'red'
};
return levelColors[level] || 'black'; //
getHealthStatus(health) {
if (health >= 80) return 'health-good';
if (health >= 60) return 'health-warning';
return 'health-critical';
}
}
}
</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;
.body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 30px;
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
.header h1 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 28px;
}
.header p {
color: #7f8c8d;
font-size: 16px;
}
.dv-scroll-board{
color: #3d3d3d;
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.card-title {
font-size: 16px;
.top-section {
display: flex;
gap: 20px;
}
.bottom-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.panel {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eaeaea;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #2c3e50;
display: flex;
align-items: center;
color: #3d3d3d;
font-weight: bold;
gap: 8px;
}
.card-title i {
margin-right: 8px;
font-size: 18px;
color: #3498db;
}
.data-overview {
.stats-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 15px;
}
.data-item {
.stat-card {
flex: 1;
min-width: 30%;
background: linear-gradient(135deg, #3498db, #2c3e50);
color: white;
border-radius: 10px;
padding: 20px;
text-align: center;
padding: 15px 10px;
background: #f5f7fa;
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}
.stat-card.warning {
background: linear-gradient(135deg, #e74c3c, #c0392b);
box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}
.data-item:hover {
background: #f1f2f4;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
.stat-card.normal {
background: linear-gradient(135deg, #2ecc71, #27ae60);
box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
}
.data-value {
font-size: 24px;
font-weight: bold;
.stat-value {
font-size: 32px;
font-weight: 700;
margin: 10px 0;
color: #3d3d3d;
}
.data-label {
.stat-label {
font-size: 14px;
color: #3d3d3d;
opacity: 0.9;
}
.alert-list .div0 {
list-style-type: none;
padding: 0;
.device-list {
list-style: none;
}
.device-item {
display: flex;
align-items: center;
padding: 12px 15px;
margin-bottom: 10px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #3498db;
transition: all 0.2s;
}
.device-item:hover {
background: #edf2f7;
transform: translateX(5px);
}
.overflow-auto {
overflow: auto;
.device-item.warning {
border-left-color: #e74c3c;
}
.alert-list {
background-color: #fff;
padding: 16px;
margin-bottom: 32px;
.device-item.normal {
border-left-color: #2ecc71;
}
.alert-list .div1 {
.device-icon {
width: 40px;
height: 40px;
background: #3498db;
border-radius: 50%;
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
margin-right: 15px;
color: white;
}
.div1{
margin-bottom: 5px;
.device-item.warning .device-icon {
background: #e74c3c;
}
.div2{
padding: 20px 16px;
.device-item.normal .device-icon {
background: #2ecc71;
}
.alert-time, .alert-device-name, .alert-device-location, .alert-message, .alert-status {
.device-info {
flex: 1;
}
.alert-level {
flex: 0.5;
text-align: center;
.device-name {
font-weight: 600;
margin-bottom: 5px;
}
.device-details {
font-size: 13px;
color: #666;
}
.alert-badge {
background: #e74c3c;
color: white;
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.normal-badge {
background: #2ecc71;
color: white;
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.table-container {
overflow-x: auto;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
table {
width: 100%;
border-collapse: collapse;
background: white;
}
th {
background: #2c3e50;
color: white;
padding: 15px 12px;
text-align: left;
font-weight: 600;
}
td {
padding: 12px;
border-bottom: 1px solid #eaeaea;
}
tr:hover {
background-color: #f5f7fa;
}
.status-indicator {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
.status-good {
background-color: #2ecc71;
}
.status-warning {
background-color: #f39c12;
}
.status-critical {
background-color: #e74c3c;
}
.health-bar {
height: 6px;
background: #ecf0f1;
border-radius: 3px;
overflow: hidden;
}
.health-fill {
height: 100%;
border-radius: 3px;
}
.health-good {
background: #2ecc71;
width: 85%;
}
.health-warning {
background: #f39c12;
width: 65%;
}
.health-critical {
background: #e74c3c;
width: 40%;
}
.full-width {
width: 100%;
}
@media (max-width: 1024px) {
.top-section {
flex-direction: column;
}
.stats-container {
flex-direction: column;
}
}
</style>

Loading…
Cancel
Save