commit
3870d1c5f2
@ -0,0 +1,41 @@ |
||||
package com.alops.web.controller.exceptionController; |
||||
|
||||
import com.alops.common.annotation.Log; |
||||
import com.alops.common.core.controller.BaseController; |
||||
import com.alops.common.core.page.TableDataInfo; |
||||
import com.alops.common.enums.BusinessType; |
||||
import com.alops.system.domain.vo.equipmentAssessmentVo; |
||||
import com.alops.system.service.IEquBaseService; |
||||
import io.swagger.annotations.ApiOperation; |
||||
import org.springframework.beans.factory.annotation.Autowired; |
||||
import org.springframework.security.access.prepost.PreAuthorize; |
||||
import org.springframework.web.bind.annotation.GetMapping; |
||||
import org.springframework.web.bind.annotation.RequestMapping; |
||||
import org.springframework.web.bind.annotation.RestController; |
||||
|
||||
import java.util.List; |
||||
|
||||
@RestController |
||||
@RequestMapping("/inMonitoring/equAssessment") |
||||
public class equAssessment extends BaseController { |
||||
|
||||
|
||||
|
||||
@Autowired |
||||
public IEquBaseService iEquBaseService; |
||||
/** |
||||
* 设备信息评估表 |
||||
* 获取所有设备id |
||||
*/ |
||||
@PreAuthorize("@ss.hasPermi('inMonitoring:equAssessment:list')") |
||||
@GetMapping("/list") |
||||
@ApiOperation("设备评估信息") |
||||
@Log(title = "设备评估与预测", businessType = BusinessType.UPDATE) |
||||
public TableDataInfo homeList() |
||||
{ |
||||
startPage(); |
||||
List<equipmentAssessmentVo> list = iEquBaseService.getDeviceIAssessmentnfo(); |
||||
return getDataTable(list); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,112 @@ |
||||
package com.alops.system.domain.dto; |
||||
|
||||
import com.alops.common.annotation.Excel; |
||||
import com.alops.system.domain.EquManu; |
||||
import com.alops.system.domain.EquType; |
||||
import com.fasterxml.jackson.annotation.JsonFormat; |
||||
import lombok.Data; |
||||
|
||||
import java.util.Date; |
||||
|
||||
@Data |
||||
public class EquBaseAddDto { |
||||
|
||||
private static final long serialVersionUID = 1L; |
||||
|
||||
/** 设备唯一标识（设备编号） */ |
||||
private String id; |
||||
|
||||
/** （设备编号） */ |
||||
private String equNumber; |
||||
|
||||
/** 设备名称 */ |
||||
@Excel(name = "设备名称") |
||||
private String name; |
||||
|
||||
/** 设备版本 */ |
||||
@Excel(name = "设备版本") |
||||
private String version; |
||||
|
||||
/** 带外管理 IP */ |
||||
@Excel(name = "带外管理 IP") |
||||
private String ip; |
||||
|
||||
/** 设备厂商 id */ |
||||
@Excel(name = "设备厂商 id") |
||||
private String manufacture; |
||||
|
||||
|
||||
private EquManu manufactureVO; |
||||
|
||||
/** 安装位置 */ |
||||
@Excel(name = "安装位置 ") |
||||
private String location; |
||||
|
||||
/** 设备类型 id */ |
||||
@Excel(name = "设备类型 id") |
||||
private String equType; |
||||
|
||||
|
||||
|
||||
public EquType getEquTypeVO() { |
||||
return equTypeVO; |
||||
} |
||||
|
||||
public void setEquTypeVO(EquType equTypeVO) { |
||||
this.equTypeVO = equTypeVO; |
||||
} |
||||
|
||||
private EquType equTypeVO; |
||||
|
||||
|
||||
/** 设备管理员姓名 */ |
||||
@Excel(name = "设备管理员姓名") |
||||
private String inCharge; |
||||
|
||||
|
||||
|
||||
|
||||
/** 安装日期 */ |
||||
@JsonFormat(pattern = "yyyy-MM-dd") |
||||
@Excel(name = "安装日期", width = 30, dateFormat = "yyyy-MM-dd") |
||||
private Date installDate; |
||||
|
||||
/** 预计年限(年) */ |
||||
@Excel(name = "预计年限(年)") |
||||
private Long lifeCycle; |
||||
|
||||
/** 质保时间(年) */ |
||||
@Excel(name = "质保时间(年)") |
||||
private Long warranty; |
||||
|
||||
/** 添加日期 */ |
||||
@JsonFormat(pattern = "yyyy-MM-dd") |
||||
@Excel(name = "添加日期", width = 30, dateFormat = "yyyy-MM-dd") |
||||
private Date createDate; |
||||
|
||||
/** 启用状态（1启用0禁用） */ |
||||
@Excel(name = "启用状态", readConverterExp = "0=启用1禁用") |
||||
private Long status; |
||||
|
||||
/** 累计预警次数 */ |
||||
@Excel(name = "累计预警次数") |
||||
private Long failureFrequency; |
||||
|
||||
/** 设备级别 */ |
||||
@Excel(name = "设备级别") |
||||
private String deviceLevel; |
||||
|
||||
/** 供应商id */ |
||||
@Excel(name = "供应商id") |
||||
private String supplierId; |
||||
|
||||
/** 采集次数 */ |
||||
@Excel(name = "采集次数") |
||||
private Long gatherFrequency; |
||||
|
||||
@Excel(name = "采集次数") |
||||
private Long createBy ; |
||||
|
||||
@Excel(name = "设备图片地址") |
||||
private String equImage ; |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
package com.alops.system.domain.dto; |
||||
|
||||
import lombok.Data; |
||||
|
||||
import java.util.Date; |
||||
|
||||
/** |
||||
* 首页展示：设备监测简要信息 |
||||
*/ |
||||
@Data |
||||
public class EquMonitorHomeDto { |
||||
private String id; |
||||
private String equNumber; //设备编号
|
||||
private String name; // 设备名称
|
||||
private String location; // 设备位置
|
||||
private Float cpuUtilization; // CPU 使用率
|
||||
private Float memoryUtilization; // 内存使用率
|
||||
private Float temperature; // 温度
|
||||
private String health; // 健康度
|
||||
private String contWorkPeriod; // 持续运行时长
|
||||
private Date gatherTime; // 采集时间
|
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
package com.alops.system.domain.dto; |
||||
|
||||
import lombok.Data; |
||||
|
||||
/** |
||||
* 新增供应商 DTO |
||||
* 只包含前端可传的字段 |
||||
*/ |
||||
@Data |
||||
public class EquSupplierAddDto { |
||||
|
||||
private String name; |
||||
private String description; |
||||
private String contactBy; |
||||
private String contactWay; |
||||
private Long status; |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
package com.alops.system.domain.dto; |
||||
|
||||
import lombok.Data; |
||||
|
||||
@Data |
||||
public class EquSupplierUpdateDto { |
||||
private String contactBy; |
||||
private String contactWay; |
||||
private String description; |
||||
private String id; |
||||
private String name; |
||||
private Long status; |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
package com.alops.system.domain.dto; |
||||
|
||||
public class LevelCountDto { |
||||
private String level; |
||||
private Integer count; |
||||
|
||||
// 无参构造器
|
||||
public LevelCountDto() {} |
||||
|
||||
// 带参构造器
|
||||
public LevelCountDto(String level, Integer count) { |
||||
this.level = level; |
||||
this.count = count; |
||||
} |
||||
|
||||
// getter & setter
|
||||
public String getLevel() { return level; } |
||||
public void setLevel(String level) { this.level = level; } |
||||
|
||||
public Integer getCount() { return count; } |
||||
public void setCount(Integer count) { this.count = count; } |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
package com.alops.system.domain.dto; |
||||
|
||||
public class TypeCountDto { |
||||
private String name; |
||||
private Integer count; |
||||
|
||||
public TypeCountDto() {} |
||||
public TypeCountDto(String name, Integer count) { |
||||
this.name = name; |
||||
this.count = count; |
||||
} |
||||
// getter/setter
|
||||
public String getName() { return name; } |
||||
public void setName(String name) { this.name = name; } |
||||
public Integer getCount() { return count; } |
||||
public void setCount(Integer count) { this.count = count; } |
||||
} |
||||
@ -0,0 +1,48 @@ |
||||
package com.alops.system.domain.dto; |
||||
|
||||
import com.alops.common.annotation.Excel; |
||||
import lombok.Data; |
||||
|
||||
import java.math.BigDecimal; |
||||
|
||||
@Data |
||||
public class equipmentAssessmentDto { |
||||
|
||||
/** 设备唯一标识（设备编号） */ |
||||
private String id; |
||||
|
||||
/** （设备编号） */ |
||||
private String equNumber; |
||||
|
||||
/** 设备名称 */ |
||||
@Excel(name = "设备名称") |
||||
private String name; |
||||
|
||||
/** 安装位置 */ |
||||
@Excel(name = "安装位置 ") |
||||
private String location; |
||||
|
||||
/** 设备类型 id */ |
||||
@Excel(name = "设备类型名称") |
||||
private String equType; |
||||
|
||||
/** 设备级别 */ |
||||
@Excel(name = "设备级别") |
||||
private String deviceLevel; |
||||
|
||||
@Excel(name = "综合计算的健康度指标(%)") |
||||
private BigDecimal health; |
||||
|
||||
/** 设备温度 */ |
||||
@Excel(name = "设备温度") |
||||
private BigDecimal temperature; |
||||
|
||||
/** CPU 使用率(%) */ |
||||
@Excel(name = "CPU 使用率(%)") |
||||
private BigDecimal cpuUtilization; |
||||
|
||||
/** 内存使用率(%) */ |
||||
@Excel(name = "内存使用率(%)") |
||||
private BigDecimal memoryUtilization; |
||||
|
||||
} |
||||
@ -0,0 +1,75 @@ |
||||
package com.alops.system.domain.vo; |
||||
|
||||
import com.alops.common.annotation.Excel; |
||||
import com.alops.common.core.domain.BaseEntity; |
||||
import com.fasterxml.jackson.annotation.JsonFormat; |
||||
import com.fasterxml.jackson.annotation.JsonIgnore; |
||||
import lombok.Data; |
||||
|
||||
import java.util.Date; |
||||
|
||||
@Data |
||||
public class AlertRuleVo extends BaseEntity { |
||||
|
||||
private static final long serialVersionUID = 1L; |
||||
|
||||
/** 主键 */ |
||||
private Long id; |
||||
|
||||
/** 预警规则名称 */ |
||||
@Excel(name = "预警规则名称") |
||||
private String ruleName; |
||||
|
||||
/** 预警级别 */ |
||||
@Excel(name = "预警级别") |
||||
private Long severity; |
||||
|
||||
/** 预警方式(email/message) */ |
||||
@Excel(name = "预警方式(email/message)") |
||||
private String alertWay; |
||||
|
||||
/** 预警到站方 */ |
||||
@Excel(name = "预警到站方") |
||||
private String alertStation; |
||||
|
||||
/** 预警规则内容描述 */ |
||||
@Excel(name = "预警规则内容描述") |
||||
private String description; |
||||
|
||||
/** 启用状态（0为启用） */ |
||||
@Excel(name = "启用状态", readConverterExp = "0=为启用") |
||||
private Integer enable; |
||||
|
||||
/** 表格名称 */ |
||||
@Excel(name = "表格名称") |
||||
private String tableName; |
||||
|
||||
/** 预警sql语句查询 */ |
||||
@Excel(name = "预警sql语句查询") |
||||
@JsonIgnore |
||||
private String alertSql; |
||||
|
||||
/** 预警模版（参数用数据库命名法） */ |
||||
@Excel(name = "预警模版", readConverterExp = "参=数用数据库命名法") |
||||
private String alertTemplate; |
||||
|
||||
/** 预警类型 */ |
||||
@Excel(name = "预警类型") |
||||
private String type; |
||||
|
||||
/** 参数名称 */ |
||||
@Excel(name = "参数名称") |
||||
private String paramName; |
||||
|
||||
/** 比较符号 */ |
||||
@Excel(name = "比较符号") |
||||
private String operator; |
||||
|
||||
/** 比较值 */ |
||||
@Excel(name = "比较值") |
||||
private String compareValue; |
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,45 @@ |
||||
package com.alops.system.domain.vo; |
||||
|
||||
import com.alops.common.annotation.Excel; |
||||
import lombok.Data; |
||||
|
||||
@Data |
||||
public class equipmentAssessmentVo { |
||||
|
||||
/** 设备唯一标识（设备编号） */ |
||||
private String id; |
||||
|
||||
/** （设备编号） */ |
||||
private String equNumber; |
||||
|
||||
/** 设备名称 */ |
||||
@Excel(name = "设备名称") |
||||
private String name; |
||||
|
||||
/** 安装位置 */ |
||||
@Excel(name = "安装位置 ") |
||||
private String location; |
||||
|
||||
/** 设备类型 id */ |
||||
@Excel(name = "设备类型名称") |
||||
private String equType; |
||||
|
||||
/** 设备级别 */ |
||||
@Excel(name = "设备级别") |
||||
private String deviceLevel; |
||||
|
||||
/** CPU使用率（%） */ |
||||
private String cpuStatus; |
||||
|
||||
/** 内存使用率（%） */ |
||||
private String memoryStatus; |
||||
|
||||
/** 温度（℃） */ |
||||
private String temperatureStatus; |
||||
|
||||
/** 健康状态（健康、良好、一般、需维护） */ |
||||
private String healthStatus; |
||||
|
||||
/** 风险等级 */ |
||||
private String riskGrade ; |
||||
} |
||||
@ -0,0 +1,37 @@ |
||||
package com.alops.system.domain.vo; |
||||
|
||||
import com.alops.common.annotation.Excel; |
||||
import lombok.Data; |
||||
|
||||
import java.util.Date; |
||||
|
||||
@Data |
||||
public class homeEquAlertMessageVo { |
||||
|
||||
|
||||
/** 预警级别(1-5级) */ |
||||
@Excel(name = "预警级别(1-5级)") |
||||
private Long level; |
||||
|
||||
/** 发生时间 */ |
||||
@Excel(name = "发生时间", width = 30, dateFormat = "yyyy-MM-dd") |
||||
private Date occurTime; |
||||
|
||||
|
||||
@Excel(name = "预警信息") |
||||
private String message; |
||||
|
||||
|
||||
/** 处理状态（open、in_progress_closed） */ |
||||
@Excel(name = "处理状态") |
||||
private String status; |
||||
|
||||
@Excel(name = "处理状态") |
||||
private String name; |
||||
|
||||
@Excel(name = "处理状态") |
||||
private String location; |
||||
|
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,58 @@ |
||||
import request from '@/utils/request' |
||||
import { parseStrEmpty } from "@/utils/ruoyi"; |
||||
const api = '/device/files/' |
||||
|
||||
// 查询详细
|
||||
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 + 'modify', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除
|
||||
export function del(id) { |
||||
return request({ |
||||
url: api + 'delete' + id, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,52 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
// 查询字典数据列表
|
||||
export function listData(query) { |
||||
return request({ |
||||
url: '/system/dict/data/list', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 查询字典数据详细
|
||||
export function getData(dictCode) { |
||||
return request({ |
||||
url: '/system/dict/data/' + dictCode, |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 根据字典类型查询字典数据信息
|
||||
export function getDicts(dictType) { |
||||
return request({ |
||||
url: '/system/dict/data/type/' + dictType, |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 新增字典数据
|
||||
export function addData(data) { |
||||
return request({ |
||||
url: '/system/dict/data', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 修改字典数据
|
||||
export function updateData(data) { |
||||
return request({ |
||||
url: '/system/dict/data', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除字典数据
|
||||
export function delData(dictCode) { |
||||
return request({ |
||||
url: '/system/dict/data/' + dictCode, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
@ -0,0 +1,60 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
// 查询字典类型列表
|
||||
export function listType(query) { |
||||
return request({ |
||||
url: '/system/dict/type/list', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 查询字典类型详细
|
||||
export function getType(dictId) { |
||||
return request({ |
||||
url: '/system/dict/type/' + dictId, |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 新增字典类型
|
||||
export function addType(data) { |
||||
return request({ |
||||
url: '/system/dict/type', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 修改字典类型
|
||||
export function updateType(data) { |
||||
return request({ |
||||
url: '/system/dict/type', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除字典类型
|
||||
export function delType(dictId) { |
||||
return request({ |
||||
url: '/system/dict/type/' + dictId, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
// 刷新字典缓存
|
||||
export function refreshCache() { |
||||
return request({ |
||||
url: '/system/dict/type/refreshCache', |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
// 获取字典选择框列表
|
||||
export function optionselect() { |
||||
return request({ |
||||
url: '/system/dict/type/optionselect', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
@ -0,0 +1,49 @@ |
||||
import request from '@/utils/request' |
||||
const api = '/knowledge/' |
||||
|
||||
// 查询详细
|
||||
export function getDict() { |
||||
return request({ |
||||
url: '/sys_dict', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 查询列表
|
||||
export function list(query) { |
||||
return request({ |
||||
url: '/knowBase/query', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 新增
|
||||
export function add(data) { |
||||
return request({ |
||||
url: '/knowledge/add', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 修改
|
||||
export function update(data) { |
||||
return request({ |
||||
url: '/knowBasemodify', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除
|
||||
export function del(id) { |
||||
return request({ |
||||
url: '/knowBase/delete/' + id, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -1,38 +1,20 @@ |
||||
import request from '@/utils/request' |
||||
import { parseStrEmpty } from "@/utils/ruoyi"; |
||||
const api = '/equipment/' |
||||
const api = '/device/deviceInformation/' |
||||
|
||||
// 立即执行
|
||||
export function protoCollect() { |
||||
export function addRule(data) { |
||||
return request({ |
||||
url: api + 'protoCollect', |
||||
method: 'post' |
||||
}) |
||||
} |
||||
// 定时采集规则添加
|
||||
export function addTimerRule(data) { |
||||
return request({ |
||||
url: api + 'addTimerRule', |
||||
url: api + 'addRule', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
// 查询规则
|
||||
export function queryTimerRule(data) { |
||||
export function queryRule() { |
||||
return request({ |
||||
url: api + 'queryTimerRule', |
||||
method: 'post', |
||||
data: data |
||||
url: api + 'queryRule', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
// 修改规则
|
||||
export function modifyTimerRule(data) { |
||||
return request({ |
||||
url: api + 'modifyTimerRule', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -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' |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,92 @@ |
||||
import request from '@/utils/request' |
||||
import { parseStrEmpty } from "@/utils/ruoyi"; |
||||
const api = '/device/files/' |
||||
|
||||
// 查询详细
|
||||
export function getDict() { |
||||
return request({ |
||||
url: '/sys_dict', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 预警信息统
|
||||
export function statistic(query) { |
||||
return request({ |
||||
url: '/inMonitoring/alertMessage/statistic/list', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 统计预警信息次数
|
||||
export function alertMessageTimes(query) { |
||||
return request({ |
||||
url: 'inMonitoring/alertMessage/times', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 按设备类型分类统计设备信息
|
||||
export function byEquType() { |
||||
return request({ |
||||
url: 'device/files/byEquType', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 设备运行状态
|
||||
export function listMonitor(query) { |
||||
return request({ |
||||
url: 'device/files/monitorById', |
||||
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 + 'modify', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除
|
||||
export function del(id) { |
||||
return request({ |
||||
url: api + id, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 38 KiB |
@ -0,0 +1,348 @@ |
||||
<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="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> |
||||
<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> |
||||
<!-- <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="序号" |
||||
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="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.createTime) }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="状态" align="center" key="status" prop="status" width="120" > |
||||
<template slot-scope="scope"> |
||||
|
||||
<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> |
||||
|
||||
<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 :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> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="联系人" prop="contactBy"> |
||||
<el-input v-model="form.contactBy" placeholder="请输入联系人" maxlength="30" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="联系方式" prop="contactWay"> |
||||
<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> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
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" |
||||
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 { |
||||
appBase:process.env.VUE_APP_BASE_API, |
||||
// 遮罩层 |
||||
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: {}, |
||||
statusSelections: [ |
||||
{ label: "正常", value: 1 }, |
||||
{ label: "停用", value: 0 } |
||||
], |
||||
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, |
||||
name: undefined |
||||
}, |
||||
|
||||
// 表单校验 |
||||
rules: { |
||||
name: [ |
||||
{ 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" } |
||||
], |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
// 根据名称筛选部门树 |
||||
deptName(val) { |
||||
this.$refs.tree.filter(val) |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
}, |
||||
methods: { |
||||
/** 查询类型列表 */ |
||||
getList() { |
||||
this.loading = true |
||||
list(this.addDateRange(this.queryParams, this.dateRange)).then(response => { |
||||
this.userList = 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, |
||||
name: undefined, |
||||
description: undefined, |
||||
createBy: undefined, |
||||
image: undefined, |
||||
createDate: undefined |
||||
} |
||||
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.id) |
||||
this.single = selection.length != 1 |
||||
this.multiple = !selection.length |
||||
}, |
||||
/** 新增按钮操作 */ |
||||
handleAdd() { |
||||
this.reset() |
||||
this.open = true |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset() |
||||
const id = row.id || this.ids |
||||
this.open = true |
||||
this.title = "修改类型" |
||||
this.form = {...row, image: row.image} |
||||
}, |
||||
/** 提交按钮 */ |
||||
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('是否确认删除类型编号为"' + 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 = "类型导入" |
||||
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> |
||||
@ -1,198 +1,679 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-row :gutter="5"> |
||||
<el-col :span="24"> |
||||
<el-card> |
||||
<el-row> |
||||
<el-col :span="4"> |
||||
<h3>交换机</h3> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>持续在线XXXXX小时</h3> |
||||
</el-col> |
||||
</el-row> |
||||
<el-divider></el-divider> |
||||
<div class="body"> |
||||
<div class="dashboard"> |
||||
<!-- 上层：左侧图片，右侧参数 --> |
||||
<div class="top-section0"> |
||||
<div class="card"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title"> |
||||
<i class="fas fa-network-wired"></i> |
||||
设备概览 |
||||
</h2> |
||||
<span class="status-badge status-online"> |
||||
<i class="fas fa-circle"></i> 在线 |
||||
</span> |
||||
</div> |
||||
<div class="top-section-con"> |
||||
<div class="device-image"> |
||||
<i class="fas fa-server"></i> |
||||
</div> |
||||
<!-- 设备基本信息 --> |
||||
<div class="device-info"> |
||||
<div class="info-title">设备基本信息</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-layer-group"></i> 设备级别 |
||||
</span> |
||||
<span class="info-value">A级</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||
</span> |
||||
<span class="info-value">数据中心-主柜</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-tag"></i> 品牌型号 |
||||
</span> |
||||
<span class="info-value">Cisco</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-heartbeat"></i> 运行状态 |
||||
</span> |
||||
<span class="info-value">运行正常</span> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<el-row> |
||||
<el-col :span="8"> |
||||
<h3>交换机</h3> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备基本信息</h3> |
||||
<p> |
||||
<span>设备型号:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>设备级别:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>设备版本:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>设备类型:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备出厂信息</h3> |
||||
<p> |
||||
<span>生产商名称:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>供货商名称:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>出厂日期:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>质保时间:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>联系人:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>联系电话:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备管理信息</h3> |
||||
<p> |
||||
<span>带外IP管理:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>安装位置:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>安装日期:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>服役年限:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>管理员:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备状态信息</h3> |
||||
<p> |
||||
<span>累计预警次数:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>累计维修次数:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
</el-row> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row class="mt10" :gutter="10"> |
||||
<el-col :span="12"> |
||||
<el-card :style="{height: '500px'}"> |
||||
<el-row> |
||||
<el-col :span="24" class="flex alignItems gap10"> |
||||
<h3>设备运行数据</h3> |
||||
<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-col> |
||||
<el-col :span="14"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
</el-row> |
||||
</el-col> |
||||
<el-col :span="10"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<BarChart height="200px" :dateRange="dateRange"></BarChart> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<BarChart height="200px" :dateRange="dateRange"></BarChart> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="8"> |
||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
||||
</el-col> |
||||
</el-row> |
||||
</el-col> |
||||
|
||||
<!-- 设备基本信息 --> |
||||
<div class="device-info"> |
||||
<div class="info-title">设备基本信息</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-layer-group"></i> 设备级别 |
||||
</span> |
||||
<span class="info-value">A级</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||
</span> |
||||
<span class="info-value">数据中心-主柜</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-tag"></i> 品牌型号 |
||||
</span> |
||||
<span class="info-value">Cisco</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-heartbeat"></i> 运行状态 |
||||
</span> |
||||
<span class="info-value">运行正常</span> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</el-row> |
||||
</el-card> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-card :style="{height: '500px'}"> |
||||
<el-tabs v-model="selectedTab"> |
||||
<el-tab-pane label="历史预警" :name="1"> |
||||
历史预警 |
||||
</el-tab-pane> |
||||
<el-tab-pane label="接口信息" :name="2"> |
||||
接口信息 |
||||
</el-tab-pane> |
||||
<el-tab-pane label="其他指标" :name="3"> |
||||
其他指标 |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
|
||||
<!-- 设备基本信息 --> |
||||
<div class="device-info"> |
||||
<div class="info-title">设备基本信息</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-layer-group"></i> 设备级别 |
||||
</span> |
||||
<span class="info-value">A级</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||
</span> |
||||
<span class="info-value">数据中心-主柜</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-tag"></i> 品牌型号 |
||||
</span> |
||||
<span class="info-value">Cisco</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-heartbeat"></i> 运行状态 |
||||
</span> |
||||
<span class="info-value">运行正常</span> |
||||
</div> |
||||
</div> |
||||
<!-- 设备基本信息 --> |
||||
<div class="device-info"> |
||||
<div class="info-title">设备基本信息</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-layer-group"></i> 设备级别 |
||||
</span> |
||||
<span class="info-value">A级</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-map-marker-alt"></i> 安装位置 |
||||
</span> |
||||
<span class="info-value">数据中心-主柜</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-tag"></i> 品牌型号 |
||||
</span> |
||||
<span class="info-value">Cisco</span> |
||||
</div> |
||||
<div class="info-item"> |
||||
<span class="info-label"> |
||||
<i class="fas fa-heartbeat"></i> 运行状态 |
||||
</span> |
||||
<span class="info-value">运行正常</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 下层：图表加参数 --> |
||||
<div class="bottom-section"> |
||||
<!-- 左侧图表 --> |
||||
<div class="card"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title"> |
||||
<i class="fas fa-chart-bar"></i> |
||||
设备运行数据 |
||||
</h2> |
||||
<el-date-picker |
||||
v-model="daterange" |
||||
type="daterange" |
||||
range-separator="至" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期"> |
||||
</el-date-picker> |
||||
</div> |
||||
|
||||
<div class="chart-container" id="performanceChart"></div> |
||||
<div class="chart-container" id="trafficChart"></div> |
||||
</div> |
||||
|
||||
<!-- 右侧参数 --> |
||||
<div class="card"> |
||||
<div class="card-header"> |
||||
<div class="tab-top"> |
||||
<div class="top-item" v-for="(i,k) in tabs" :key="k" :class="k == tabIndex ?'ac':''" @click="tabIndex = k"> |
||||
<span>{{ i.name }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="metrics-grid"> |
||||
<div class="bottom-item" v-if="tabIndex == 0"> |
||||
<History/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import BarChart from './BarChart1.vue' |
||||
import LineChart from './LineChart.vue' |
||||
import BarChart2 from './BarChart2.vue' |
||||
import * as echarts from 'echarts' |
||||
require('echarts/theme/macarons') // echarts theme |
||||
import History from './history.vue' |
||||
export default { |
||||
name: "cardItem", |
||||
components: { BarChart, BarChart2, LineChart }, |
||||
components: { History }, |
||||
data() { |
||||
return { |
||||
dateRange: [], |
||||
selectedTab: 1 |
||||
selectedTab: 1, |
||||
tabs: [ |
||||
{ name: '历史预警' }, |
||||
{ name: '接口信息' }, |
||||
{ name: 'VLAN信息' }, |
||||
{ name: '路由表信息' }, |
||||
], |
||||
tabIndex: 0, |
||||
|
||||
|
||||
|
||||
} |
||||
}, |
||||
created() { |
||||
}, |
||||
mounted() { |
||||
this.initCharts(); |
||||
}, |
||||
methods: { |
||||
initCharts() { |
||||
// 性能图表 |
||||
const performanceChart = echarts.init(document.getElementById('performanceChart')); |
||||
performanceChart.setOption({ |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
legend: { |
||||
data: ['CPU使用率', '内存使用率'], |
||||
textStyle: { |
||||
color: '#718096' |
||||
} |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'], |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#cbd5e0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#718096' |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#cbd5e0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#718096', |
||||
formatter: '{value}%' |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: 'rgba(203, 213, 224, 0.6)' |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: 'CPU使用率', |
||||
type: 'line', |
||||
smooth: true, |
||||
data: [45, 52, 38, 66, 58, 62, 48], |
||||
lineStyle: { |
||||
color: '#ed8936' |
||||
}, |
||||
itemStyle: { |
||||
color: '#ed8936' |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [{ |
||||
offset: 0, color: 'rgba(237, 137, 54, 0.3)' |
||||
}, { |
||||
offset: 1, color: 'rgba(237, 137, 54, 0.1)' |
||||
}] |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
name: '内存使用率', |
||||
type: 'line', |
||||
smooth: true, |
||||
data: [30, 45, 35, 50, 42, 38, 32], |
||||
lineStyle: { |
||||
color: '#4299e1' |
||||
}, |
||||
itemStyle: { |
||||
color: '#4299e1' |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [{ |
||||
offset: 0, color: 'rgba(66, 153, 225, 0.3)' |
||||
}, { |
||||
offset: 1, color: 'rgba(66, 153, 225, 0.1)' |
||||
}] |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
|
||||
|
||||
// 流量图表 |
||||
const trafficChart = echarts.init(document.getElementById('trafficChart')); |
||||
trafficChart.setOption({ |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'shadow' |
||||
} |
||||
}, |
||||
legend: { |
||||
data: ['入站流量', '出站流量'], |
||||
textStyle: { |
||||
color: '#718096' |
||||
} |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#cbd5e0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#718096' |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
name: 'MB/s', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#cbd5e0' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#718096' |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: 'rgba(203, 213, 224, 0.6)' |
||||
} |
||||
} |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '入站流量', |
||||
type: 'bar', |
||||
data: [320, 332, 301, 334, 390, 330, 320], |
||||
itemStyle: { |
||||
color: '#4299e1' |
||||
} |
||||
}, |
||||
{ |
||||
name: '出站流量', |
||||
type: 'bar', |
||||
data: [220, 182, 191, 234, 290, 330, 310], |
||||
itemStyle: { |
||||
color: '#ed8936' |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
|
||||
// 响应窗口大小变化 |
||||
window.addEventListener('resize', function() { |
||||
performanceChart.resize(); |
||||
trafficChart.resize(); |
||||
}); |
||||
} |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
<style scoped> |
||||
|
||||
.body { |
||||
background: linear-gradient(135deg, #f8fafc, #e2e8f0); |
||||
color: #2d3748; |
||||
line-height: 1.6; |
||||
padding: 20px; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
.dashboard { |
||||
max-width: 1400px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.header { |
||||
text-align: center; |
||||
margin-bottom: 40px; |
||||
padding: 25px; |
||||
background: rgba(255, 255, 255, 0.8); |
||||
border-radius: 20px; |
||||
backdrop-filter: blur(10px); |
||||
border: 1px solid rgba(255, 255, 255, 0.9); |
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); |
||||
} |
||||
|
||||
.header h1 { |
||||
color: #2d3748; |
||||
margin-bottom: 10px; |
||||
font-size: 36px; |
||||
font-weight: 700; |
||||
background: linear-gradient(90deg, #4299e1, #38b2ac); |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
} |
||||
|
||||
.header p { |
||||
color: #718096; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.top-section0 { |
||||
margin-bottom: 20px; |
||||
|
||||
} |
||||
.top-section-con { |
||||
display: grid; |
||||
grid-template-columns: 3fr 1fr 1fr 1fr 1fr; |
||||
gap: 30px; |
||||
} |
||||
|
||||
.top-section { |
||||
display: grid; |
||||
grid-template-columns: 1fr 2fr; |
||||
gap: 30px; |
||||
margin-bottom: 30px; |
||||
} |
||||
|
||||
.bottom-section { |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.card { |
||||
background: rgba(255, 255, 255, 0.9); |
||||
border-radius: 20px; |
||||
padding: 30px; |
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); |
||||
backdrop-filter: blur(10px); |
||||
border: 1px solid rgba(255, 255, 255, 0.9); |
||||
transition: all 0.4s ease; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.card::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
height: 4px; |
||||
background: linear-gradient(90deg, #4299e1, #38b2ac); |
||||
} |
||||
|
||||
.card-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 25px; |
||||
padding-bottom: 15px; |
||||
border-bottom: 1px solid rgba(226, 232, 240, 0.8); |
||||
} |
||||
|
||||
.card-title { |
||||
font-size: 18px; |
||||
font-weight: 700; |
||||
color: #2d3748; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 12px; |
||||
} |
||||
|
||||
.card-title i { |
||||
color: #4299e1; |
||||
font-size: 24px; |
||||
} |
||||
|
||||
.status-badge { |
||||
padding: 6px 15px; |
||||
border-radius: 20px; |
||||
font-size: 13px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.status-online { |
||||
background: rgba(72, 187, 120, 0.15); |
||||
color: #38a169; |
||||
border: 1px solid rgba(72, 187, 120, 0.3); |
||||
} |
||||
|
||||
.status-danger { |
||||
background: rgba(245, 101, 101, 0.15); |
||||
color: #e53e3e; |
||||
border: 1px solid rgba(245, 101, 101, 0.3); |
||||
} |
||||
|
||||
.device-image { |
||||
width: 100%; |
||||
height: 400px; |
||||
background: linear-gradient(135deg, #edf2f7, #e2e8f0); |
||||
border-radius: 12px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
/* margin-bottom: 20px; */ |
||||
overflow: hidden; |
||||
border: 1px solid rgba(226, 232, 240, 0.8); |
||||
} |
||||
|
||||
.device-image i { |
||||
font-size: 80px; |
||||
color: #4299e1; |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
.device-info { |
||||
display: grid; |
||||
grid-template-columns: 1fr; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.info-title { |
||||
color: #2d3748; |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
text-align: center; |
||||
} |
||||
|
||||
.info-item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 12px; |
||||
background: rgba(255, 255, 255, 0.7); |
||||
border-radius: 12px; |
||||
border: 1px solid rgba(226, 232, 240, 0.8); |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.info-item:hover { |
||||
background: rgba(255, 255, 255, 0.9); |
||||
border-color: rgba(66, 153, 225, 0.3); |
||||
transform: translateY(-2px); |
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
||||
} |
||||
|
||||
.info-label { |
||||
font-size: 13px; |
||||
color: #718096; |
||||
margin-bottom: 6px; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 6px; |
||||
} |
||||
|
||||
.info-label i { |
||||
font-size: 12px; |
||||
color: #4299e1; |
||||
} |
||||
|
||||
.info-value { |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
color: #2d3748; |
||||
} |
||||
|
||||
.chart-container { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.metrics-grid { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.metric-card { |
||||
padding: 20px; |
||||
background: rgba(255, 255, 255, 0.7); |
||||
border-radius: 12px; |
||||
border: 1px solid rgba(226, 232, 240, 0.8); |
||||
text-align: center; |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.metric-card:hover { |
||||
background: rgba(255, 255, 255, 0.9); |
||||
border-color: rgba(66, 153, 225, 0.3); |
||||
transform: translateY(-3px); |
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
||||
} |
||||
|
||||
.metric-value { |
||||
font-size: 32px; |
||||
font-weight: 700; |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
.metric-label { |
||||
font-size: 14px; |
||||
color: #718096; |
||||
} |
||||
|
||||
.cpu-usage { |
||||
color: #ed8936; |
||||
} |
||||
|
||||
.alert-pending { |
||||
color: #e53e3e; |
||||
} |
||||
|
||||
.alert-total { |
||||
color: #4299e1; |
||||
} |
||||
|
||||
.progress-bar { |
||||
height: 8px; |
||||
background: rgba(226, 232, 240, 0.8); |
||||
border-radius: 4px; |
||||
overflow: hidden; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.progress-fill { |
||||
height: 100%; |
||||
border-radius: 4px; |
||||
transition: width 0.8s ease; |
||||
background: linear-gradient(90deg, #ed8936, #dd6b20); |
||||
box-shadow: 0 0 10px rgba(237, 137, 54, 0.3); |
||||
} |
||||
|
||||
@media (max-width: 1024px) { |
||||
.top-section, .bottom-section { |
||||
grid-template-columns: 1fr; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
.tab-top{ |
||||
display: flex; |
||||
gap: 20px; |
||||
} |
||||
.top-item{ |
||||
color: #2d3748; |
||||
font-weight: 400; |
||||
font-size:18px ; |
||||
cursor: pointer; |
||||
} |
||||
.top-item.ac{ |
||||
font-weight: 600; |
||||
border-bottom: 2px solid #2d3748; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,69 @@ |
||||
<template> |
||||
<div class=""> |
||||
<el-row :gutter="20"> |
||||
|
||||
<el-col> |
||||
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> |
||||
<el-table-column |
||||
label="序号" |
||||
width="60" |
||||
type="index" |
||||
></el-table-column> |
||||
<el-table-column label="预警时间" align="center" key="id" prop="id"/> |
||||
<el-table-column label="预警等级" align="center" key="name" prop="name" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警信息" align="center" key="description" prop="description" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="预警状态" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" /> |
||||
<el-table-column label="处理人" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" /> |
||||
</el-table> |
||||
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { list, del, add, update } from "@/api/device/deviceType" |
||||
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, |
||||
// 总条数 |
||||
total: 0, |
||||
// 类型表格数据 |
||||
userList: null, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
name: undefined |
||||
}, |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
}, |
||||
methods: { |
||||
/** 查询类型列表 */ |
||||
getList() { |
||||
this.loading = true |
||||
list(this.addDateRange(this.queryParams, this.dateRange)).then(response => { |
||||
this.userList = response.rows |
||||
this.total = response.total |
||||
this.loading = false |
||||
} |
||||
) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -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>仅允许导入xls、xlsx格式文件。</span> |
||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> |
||||
</div> |
||||
</el-upload> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button> |
||||
<el-button @click="upload.open = false">取 消</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/inMonitoring/earlyWarning" |
||||
import { getToken } from "@/utils/auth" |
||||
import Treeselect from "@riophae/vue-treeselect" |
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css" |
||||
import { Splitpanes, Pane } from "splitpanes" |
||||
import "splitpanes/dist/splitpanes.css" |
||||
|
||||
export default { |
||||
name: "User", |
||||
dicts: ['sys_normal_disable', 'sys_user_sex'], |
||||
components: { Treeselect, Splitpanes, Pane }, |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 类型表格数据 |
||||
userList: null, |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 所有部门树选项 |
||||
deptOptions: undefined, |
||||
// 过滤掉已禁用部门树选项 |
||||
enabledDeptOptions: undefined, |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 部门名称 |
||||
deptName: undefined, |
||||
// 默认密码 |
||||
initPassword: undefined, |
||||
// 日期范围 |
||||
dateRange: [], |
||||
// 岗位选项 |
||||
postOptions: [], |
||||
// 角色选项 |
||||
roleOptions: [], |
||||
// 表单参数 |
||||
form: {}, |
||||
defaultProps: { |
||||
children: "children", |
||||
label: "label" |
||||
}, |
||||
// 类型导入参数 |
||||
upload: { |
||||
// 是否显示弹出层（类型导入） |
||||
open: false, |
||||
// 弹出层标题（类型导入） |
||||
title: "", |
||||
// 是否禁用上传 |
||||
isUploading: false, |
||||
// 是否更新已经存在的类型数据 |
||||
updateSupport: 0, |
||||
// 设置上传的请求头部 |
||||
headers: { Authorization: "Bearer " + getToken() }, |
||||
// 上传的地址 |
||||
url: process.env.VUE_APP_BASE_API + "/system/user/importData" |
||||
}, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
userName: undefined, |
||||
phonenumber: undefined, |
||||
status: undefined, |
||||
deptId: undefined |
||||
}, |
||||
// 列信息 |
||||
columns: [ |
||||
{ key: 0, label: '类型编号', visible: true, showInSelector: true }, |
||||
{ key: 1, label: '类型名称', visible: true, showInSelector: true }, |
||||
{ key: 2, label: '类型昵称', visible: true, showInSelector: true }, |
||||
{ key: 3, label: '部门', visible: false, showInSelector: false }, // 👈 不在显隐选择器中出现 |
||||
{ key: 4, label: '手机号码', visible: true, showInSelector: true }, |
||||
{ key: 5, label: '状态', visible: true, showInSelector: true }, |
||||
{ key: 6, label: '创建时间', visible: true, showInSelector: true } |
||||
], |
||||
|
||||
// 表单校验 |
||||
rules: { |
||||
userName: [ |
||||
{ required: true, message: "类型名称不能为空", trigger: "blur" }, |
||||
{ min: 2, max: 20, message: '类型名称长度必须介于 2 和 20 之间', trigger: 'blur' } |
||||
], |
||||
nickName: [ |
||||
{ required: true, message: "类型昵称不能为空", trigger: "blur" } |
||||
], |
||||
password: [ |
||||
{ required: true, message: "类型密码不能为空", trigger: "blur" }, |
||||
{ min: 5, max: 20, message: '类型密码长度必须介于 5 和 20 之间', trigger: 'blur' }, |
||||
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" } |
||||
], |
||||
email: [ |
||||
{ |
||||
type: "email", |
||||
message: "请输入正确的邮箱地址", |
||||
trigger: ["blur", "change"] |
||||
} |
||||
], |
||||
phonenumber: [ |
||||
{ |
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, |
||||
message: "请输入正确的手机号码", |
||||
trigger: "blur" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
// 根据名称筛选部门树 |
||||
deptName(val) { |
||||
this.$refs.tree.filter(val) |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
// 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,321 @@ |
||||
<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> |
||||
<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="queryParams.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-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-if="form.alertWay == 'email'"> |
||||
<el-form-item label="邮箱" prop="alertStation"> |
||||
<el-input v-model="form.alertStation" placeholder="请输入邮箱" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
|
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
</span> |
||||
|
||||
</el-dialog> |
||||
|
||||
<!-- 设备导入对话框 --> |
||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> |
||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> |
||||
<i class="el-icon-upload"></i> |
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
||||
<div class="el-upload__tip text-center" slot="tip"> |
||||
<div class="el-upload__tip" slot="tip"> |
||||
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的设备档案 |
||||
</div> |
||||
<span>仅允许导入xls、xlsx格式文件。</span> |
||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> |
||||
</div> |
||||
</el-upload> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button> |
||||
<el-button @click="upload.open = false">取 消</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { list, del, add, update, byTable } from "@/api/inMonitoring/rules" |
||||
import { getToken } from "@/utils/auth" |
||||
import Treeselect from "@riophae/vue-treeselect" |
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css" |
||||
import { Splitpanes, Pane } from "splitpanes" |
||||
import "splitpanes/dist/splitpanes.css" |
||||
|
||||
export default { |
||||
name: "User", |
||||
dicts: ['warning_level', 'device_disable', 'waming_rules'], |
||||
components: { Treeselect, Splitpanes, Pane }, |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 设备表格数据 |
||||
dataList: null, |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 所有部门树选项 |
||||
deptOptions: undefined, |
||||
// 过滤掉已禁用部门树选项 |
||||
enabledDeptOptions: undefined, |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 部门名称 |
||||
deptName: undefined, |
||||
// 默认密码 |
||||
initPassword: undefined, |
||||
// 日期范围 |
||||
dateRange: [], |
||||
// 岗位选项 |
||||
postOptions: [], |
||||
// 角色选项 |
||||
roleOptions: [], |
||||
// 表单参数 |
||||
form: { |
||||
id: undefined, |
||||
ruleName: undefined, |
||||
description: undefined, |
||||
paramName: undefined, |
||||
operator: undefined, |
||||
compareValue1: undefined, |
||||
compareValue2: undefined, |
||||
severity: undefined, |
||||
message: undefined, |
||||
alertWay: 'noemail', |
||||
alertStation: '', |
||||
status: "0" |
||||
}, |
||||
// 校验规则 |
||||
byTableData: [], |
||||
alertWayOptions: [ |
||||
{ |
||||
value: 'noemail', |
||||
label: "否" |
||||
}, |
||||
{ |
||||
value: 'email', |
||||
label: "是" |
||||
} |
||||
], |
||||
|
||||
defaultProps: { |
||||
children: "children", |
||||
label: "label" |
||||
}, |
||||
// 设备导入参数 |
||||
upload: { |
||||
// 是否显示弹出层（设备导入） |
||||
open: false, |
||||
// 弹出层标题（设备导入） |
||||
title: "", |
||||
// 是否禁用上传 |
||||
isUploading: false, |
||||
// 是否更新已经存在的设备档案 |
||||
updateSupport: 0, |
||||
// 设置上传的请求头部 |
||||
headers: { Authorization: "Bearer " + getToken() }, |
||||
// 上传的地址 |
||||
url: process.env.VUE_APP_BASE_API + "/equipment/import" |
||||
}, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
name: undefined, |
||||
status: undefined |
||||
}, |
||||
// 表单校验 |
||||
rules: { |
||||
ruleName: [ |
||||
{ required: true, message: "规则名称不能为空", trigger: "blur" } |
||||
], |
||||
description: [ |
||||
{ required: true, message: "规则描述不能为空", trigger: "blur" }, |
||||
], |
||||
alertWay: [ |
||||
{ required: true, message: "设备类型不能为空", trigger: "blur" } |
||||
], |
||||
severity: [ |
||||
{ required: true, message: "设备级别不能为空", trigger: "blur" }, |
||||
], |
||||
message: [ |
||||
{ required: true, message: "预警消息不能为空", trigger: "blur" } |
||||
], |
||||
status: [ |
||||
{ required: true, message: "状态不能为空", trigger: "blur" }, |
||||
], |
||||
paramName: [ |
||||
{ required: true, message: "请选择", trigger: "blur" }, |
||||
], |
||||
operator: [ |
||||
{ required: true, message: "请选择", trigger: "blur" }, |
||||
], |
||||
compareValue1: [ |
||||
{ required: true, message: "请输入", trigger: "blur" }, |
||||
], |
||||
compareValue2: [ |
||||
{ required: true, message: "请输入", trigger: "blur" }, |
||||
], |
||||
alertStation: [ |
||||
{ required: true, message: "请输入", trigger: "blur" }, |
||||
{ |
||||
pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/, |
||||
message: "请输入正确的邮箱", |
||||
trigger: "blur" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
// 根据名称筛选部门树 |
||||
deptName(val) { |
||||
this.$refs.tree.filter(val) |
||||
} |
||||
}, |
||||
created() { |
||||
this.getList() |
||||
this.getByTable() |
||||
|
||||
}, |
||||
methods: { |
||||
/** 查询设备列表 */ |
||||
getList() { |
||||
this.loading = true |
||||
list({minTime:this.dateRange[0],maxTime:this.dateRange[1],...this.queryParams}).then(response => { |
||||
this.dataList = response.rows |
||||
this.total = response.total |
||||
this.loading = false |
||||
} |
||||
) |
||||
}, |
||||
getByTable() { |
||||
this.loading = true |
||||
byTable().then(response => { |
||||
console.log("%c 🇻🇳: getList -> response ", "font-size:16px;background-color:#c9f364;color:black;", response) |
||||
this.byTableData = response.data |
||||
this.loading = false |
||||
} |
||||
) |
||||
}, |
||||
upImage(fileList){ |
||||
console.log(fileList) |
||||
this.form.image = fileList |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false |
||||
this.reset() |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
email: undefined, |
||||
} |
||||
this.resetForm("form") |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1 |
||||
this.getList() |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.dateRange = [] |
||||
this.resetForm("queryForm") |
||||
this.handleQuery() |
||||
}, |
||||
// 多选框选中数据 |
||||
handleSelectionChange(selection) { |
||||
this.ids = selection.map(item => item.id) |
||||
this.single = selection.length != 1 |
||||
this.multiple = !selection.length |
||||
}, |
||||
/** 新增按钮操作 */ |
||||
handleAdd() { |
||||
this.reset() |
||||
this.open = true |
||||
this.title = "添加设备" |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset() |
||||
this.form = {...row} |
||||
this.open = true |
||||
this.title = "修改" |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function() { |
||||
this.$refs["form"].validate(valid => { |
||||
if (valid) { |
||||
let form = {...this.form} |
||||
this.form.alertRule = { |
||||
ruleName: form.ruleName, |
||||
description: form.description, |
||||
|
||||
alertStation: form.alertStation ? form.alertStation : "", |
||||
alertWay: form.alertWay, |
||||
severity: form.severity, |
||||
enable:0 |
||||
} |
||||
this.form.alertRuleConditionList = [{ |
||||
paramName: form.paramName, |
||||
compareValue: form.compareValue2?form.compareValue1+','+form.compareValue2:form.compareValue1, |
||||
operator: form.operator |
||||
}] |
||||
if (this.form.id != undefined) { |
||||
update(this.form).then(response => { |
||||
this.$modal.msgSuccess("修改成功") |
||||
this.open = false |
||||
this.getList() |
||||
}) |
||||
} else { |
||||
add(this.form).then(response => { |
||||
this.$modal.msgSuccess("新增成功") |
||||
this.open = false |
||||
this.getList() |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
/** 删除按钮操作 */ |
||||
handleDelete(row) { |
||||
const Ids = row.id || this.ids |
||||
this.$modal.confirm('是否确认删除设备ID为"' + Ids + '"的数据项？').then(function() { |
||||
return del(Ids) |
||||
}).then(() => { |
||||
this.getList() |
||||
this.$modal.msgSuccess("删除成功") |
||||
}).catch(() => {}) |
||||
}, |
||||
/** 导入按钮操作 */ |
||||
handleImport() { |
||||
this.upload.title = "设备导入" |
||||
this.upload.open = true |
||||
}, |
||||
/** 下载模板操作 */ |
||||
importTemplate() { |
||||
this.download('system/user/importTemplate', { |
||||
}, `user_template_${new Date().getTime()}.xlsx`) |
||||
}, |
||||
// 文件上传中处理 |
||||
handleFileUploadProgress(event, file, fileList) { |
||||
this.upload.isUploading = true |
||||
}, |
||||
// 文件上传成功处理 |
||||
handleFileSuccess(response, file, fileList) { |
||||
this.upload.open = false |
||||
this.upload.isUploading = false |
||||
this.$refs.upload.clearFiles() |
||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }) |
||||
this.getList() |
||||
}, |
||||
// 提交上传文件 |
||||
submitFileForm() { |
||||
this.$refs.upload.submit() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,308 @@ |
||||
<template> |
||||
<div class="dashboard-editor-container"> |
||||
|
||||
<el-row :gutter="32"> |
||||
<el-col :xs="24" :sm="24" :lg="8"> |
||||
<div class="chart-wrapper"> |
||||
<div class="card-title"><i class="el-icon-data-line"></i>预警信息统计</div> |
||||
<div class="data-overview"> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
<div class="data-item"> |
||||
<div class="data-label">预警总数</div> |
||||
<digital :configData="{number:[111]}" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :xs="24" :sm="24" :lg="8"> |
||||
<div class="chart-wrapper"> |
||||
<div class="card-title"><i class="el-icon-pie-chart"></i>检测设备信息</div> |
||||
<pie-chart /> |
||||
</div> |
||||
</el-col> |
||||
<el-col :xs="24" :sm="24" :lg="8"> |
||||
<div class="chart-wrapper overflow-auto"> |
||||
<div class="card-title"><i class="el-icon-monitor"></i>设备预警信息</div> |
||||
|
||||
<div class="div0"> |
||||
<div class="div1" v-for="(alert, index) in alerts" :key="index" :class="`alert-level-${alert.level}`"> |
||||
<dv-border-box-13 class="div2"> |
||||
<el-row> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">预警时间:{{ alert.time }}</span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">设备名称:{{ alert.deviceName }}</span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">设备位置:{{ alert.deviceLocation }}</span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">预警等级:<span class="alert-lable" :style="{ color: getLevelColor(alert.level) }">{{ alert.level }}</span></span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">预警信息:{{ alert.message }}</span> |
||||
</el-col> |
||||
<el-col span="12"> |
||||
<span class="alert-lable">预警状态:{{ alert.status }}</span> |
||||
</el-col> |
||||
</el-row> |
||||
</dv-border-box-13> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row style="background:#fff;padding:16px;"> |
||||
<div class="card-title"><i class="el-icon-s-data"></i> 设备状态监控</div> |
||||
<dv-scroll-board :config="scrollConfig" style="height:220px;" /> |
||||
</el-row> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import PanelGroup from './dashboard/PanelGroup' |
||||
import LineChart from './dashboard/LineChart' |
||||
import RaddarChart from './dashboard/RaddarChart' |
||||
import PieChart from './dashboard/PieChart' |
||||
import BarChart from './dashboard/BarChart' |
||||
import digital from './dashboard/digital' |
||||
|
||||
const lineChartData = { |
||||
newVisitis: { |
||||
expectedData: [100, 120, 161, 134, 105, 160, 165], |
||||
actualData: [120, 82, 91, 154, 162, 140, 145] |
||||
}, |
||||
messages: { |
||||
expectedData: [200, 192, 120, 144, 160, 130, 140], |
||||
actualData: [180, 160, 151, 106, 145, 150, 130] |
||||
}, |
||||
purchases: { |
||||
expectedData: [80, 100, 121, 104, 105, 90, 100], |
||||
actualData: [120, 90, 100, 138, 142, 130, 130] |
||||
}, |
||||
shoppings: { |
||||
expectedData: [130, 140, 141, 142, 145, 150, 160], |
||||
actualData: [120, 82, 91, 154, 162, 140, 130] |
||||
} |
||||
} |
||||
|
||||
export default { |
||||
name: 'Index', |
||||
components: { |
||||
PanelGroup, |
||||
LineChart, |
||||
RaddarChart, |
||||
PieChart, |
||||
BarChart, |
||||
digital |
||||
}, |
||||
data() { |
||||
return { |
||||
lineChartData: lineChartData.newVisitis, |
||||
scrollConfig:{ |
||||
header: ['设备名称', '设备位置', 'CPU使用率','内存使用率','温度', '健康度', '设备运行时长','采集时间'], |
||||
data: [ |
||||
['行1列1', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6','行1列7', '行1列8'], |
||||
['行2列1', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6','行2列7', '行2列8'], |
||||
['行3列1', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6','行3列7', '行3列8'], |
||||
['行4列1', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6','行4列7', '行4列8'], |
||||
['行5列1', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6','行5列7', '行5列8'], |
||||
['行6列1', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6','行6列7', '行6列8'], |
||||
['行7列1', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6','行7列7', '行7列8'], |
||||
['行8列1', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6','行8列7', '行8列8'], |
||||
['行9列1', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6','行9列7', '行9列8'], |
||||
['行10列1', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6','行10列7', '行10列8'] |
||||
], |
||||
headerBGC:'#f8f8f9', |
||||
headerHeight:60, |
||||
oddRowBGC:'#f5f7fa', |
||||
evenRowBGC:'#fff', |
||||
}, |
||||
alerts: [ |
||||
{ |
||||
time: '2021-10-16 14:54:11', |
||||
deviceName: 'PLC远程监控系统', |
||||
deviceLocation: '污水处理监控系统', |
||||
level: 1, |
||||
message: '2#电机运行状态等于1', |
||||
status: '触发值: 1' |
||||
}, |
||||
{ |
||||
time: '2021-10-16 14:54:04', |
||||
deviceName: 'PLC远程监控系统', |
||||
deviceLocation: '污水处理监控系统', |
||||
level: 0, |
||||
message: '2#电机运行状态报警恢复', |
||||
status: '触发值: 0' |
||||
}, |
||||
{ |
||||
time: '2021-10-16 14:54:11', |
||||
deviceName: 'PLC远程监控系统', |
||||
deviceLocation: '污水处理监控系统', |
||||
level: 1, |
||||
message: '2#电机运行状态等于1', |
||||
status: '触发值: 1' |
||||
}, |
||||
{ |
||||
time: '2021-10-16 14:54:04', |
||||
deviceName: 'PLC远程监控系统', |
||||
deviceLocation: '污水处理监控系统', |
||||
level: 0, |
||||
message: '2#电机运行状态报警恢复', |
||||
status: '触发值: 0' |
||||
}, |
||||
// 可以继续添加更多预警信息 |
||||
] |
||||
} |
||||
}, |
||||
methods: { |
||||
handleSetLineChartData(type) { |
||||
this.lineChartData = lineChartData[type] |
||||
}, |
||||
getLevelColor(level) { |
||||
const levelColors = { |
||||
0: 'green', |
||||
1: 'orange', |
||||
2: 'red' |
||||
}; |
||||
return levelColors[level] || 'black'; // 默认颜色 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.dashboard-editor-container { |
||||
padding: 32px; |
||||
background-color: rgb(240, 242, 245); |
||||
position: relative; |
||||
|
||||
.chart-wrapper { |
||||
background: #fff; |
||||
padding: 16px; |
||||
margin-bottom: 32px; |
||||
height: 420px; |
||||
} |
||||
} |
||||
|
||||
@media (max-width:1024px) { |
||||
.chart-wrapper { |
||||
padding: 8px; |
||||
} |
||||
} |
||||
.dv-scroll-board{ |
||||
color: #3d3d3d; |
||||
} |
||||
.card-title { |
||||
font-size: 16px; |
||||
margin-bottom: 15px; |
||||
display: flex; |
||||
align-items: center; |
||||
color: #3d3d3d; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.card-title i { |
||||
margin-right: 8px; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.data-overview { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 15px; |
||||
} |
||||
|
||||
.data-item { |
||||
flex: 1; |
||||
min-width: 30%; |
||||
text-align: center; |
||||
padding: 15px 10px; |
||||
background: #f5f7fa; |
||||
border-radius: 8px; |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.data-item:hover { |
||||
background: #f1f2f4; |
||||
transform: translateY(-3px); |
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
.data-value { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
margin: 10px 0; |
||||
color: #3d3d3d; |
||||
} |
||||
|
||||
.data-label { |
||||
font-size: 14px; |
||||
color: #3d3d3d; |
||||
} |
||||
.alert-list .div0 { |
||||
list-style-type: none; |
||||
padding: 0; |
||||
} |
||||
.overflow-auto { |
||||
overflow: auto; |
||||
} |
||||
.alert-list { |
||||
background-color: #fff; |
||||
padding: 16px; |
||||
margin-bottom: 32px; |
||||
} |
||||
|
||||
.alert-list .div1 { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.div1{ |
||||
margin-bottom: 5px; |
||||
} |
||||
.div2{ |
||||
padding: 20px 16px; |
||||
} |
||||
|
||||
.alert-time, .alert-device-name, .alert-device-location, .alert-message, .alert-status { |
||||
flex: 1; |
||||
} |
||||
|
||||
.alert-level { |
||||
flex: 0.5; |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,185 @@ |
||||
<template> |
||||
<div class="dashboard"> |
||||
<h1>唐山烟草智能网络设备运维与问答系统</h1> |
||||
|
||||
<el-row :gutter="20"> |
||||
<!-- 设备状态监控 --> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>设备状态监控</h2> |
||||
<!-- 这里可以添加设备状态监控的具体内容，例如表格或图表 --> |
||||
<el-table :data="deviceStatusData" style="width: 100%"> |
||||
<el-table-column prop="name" label="设备名称"></el-table-column> |
||||
<el-table-column prop="location" label="设备位置"></el-table-column> |
||||
<el-table-column prop="cpuUsage" label="CPU使用率"></el-table-column> |
||||
<el-table-column prop="memoryUsage" label="内存使用率"></el-table-column> |
||||
<el-table-column prop="status" label="状态"> |
||||
<template slot-scope="scope"> |
||||
<el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'"> |
||||
{{ scope.row.status }} |
||||
</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<!-- 设备状态统计图表 --> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>检测设备信息 (按状态统计，饼状图)</h2> |
||||
<!-- 这里可以使用echarts或其他图表库来展示饼状图 --> |
||||
<div id="statusChart" style="width: 100%; height: 300px;"></div> |
||||
</el-card> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>检测设备信息 (按设备类型，饼状图)</h2> |
||||
<div id="typeChart" style="width: 100%; height: 300px;"></div> |
||||
</el-card> |
||||
</el-col> |
||||
<!-- 设备预警信息 --> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>设备预警信息</h2> |
||||
<el-table :data="alertData" style="width: 100%"> |
||||
<el-table-column prop="time" label="预警时间"></el-table-column> |
||||
<el-table-column prop="device" label="设备名称"></el-table-column> |
||||
<el-table-column prop="location" label="设备位置"></el-table-column> |
||||
<el-table-column prop="level" label="预警等级"> |
||||
<template slot-scope="scope"> |
||||
<el-tag :type="getTagType(scope.row.level)"> |
||||
{{ scope.row.level }} |
||||
</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<!-- 预警信息统计 --> |
||||
<el-col :span="12"> |
||||
<el-card> |
||||
<h2>预警信息统计</h2> |
||||
<div id="alertStatsChart" style="width: 100%; height: 300px;"></div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from 'echarts' |
||||
require('echarts/theme/macarons') // echarts theme |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
deviceStatusData: [ |
||||
// 示例数据 |
||||
{ name: '设备1', location: '位置1', cpuUsage: '30%', memoryUsage: '40%', status: '正常' }, |
||||
{ name: '设备2', location: '位置2', cpuUsage: '70%', memoryUsage: '80%', status: '异常' }, |
||||
], |
||||
alertData: [ |
||||
// 示例数据 |
||||
{ time: '2023-10-01 10:00:00', device: '设备2', location: '位置2', level: '高' }, |
||||
{ time: '2023-10-01 11:00:00', device: '设备3', location: '位置3', level: '中' }, |
||||
], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initCharts(); |
||||
}, |
||||
methods: { |
||||
getTagType(level) { |
||||
const types = { '高': 'danger', '中': 'warning', '低': 'success' }; |
||||
return types[level] || 'info'; |
||||
}, |
||||
initCharts() { |
||||
// 初始化状态统计图表 |
||||
const statusChart = echarts.init(document.getElementById('statusChart')); |
||||
statusChart.setOption({ |
||||
title: { text: '设备状态统计', subtext: '按状态', left: 'center' }, |
||||
tooltip: { trigger: 'item' }, |
||||
series: [ |
||||
{ |
||||
name: '设备状态', |
||||
type: 'pie', |
||||
radius: '50%', |
||||
data: [ |
||||
{ value: 44, name: '自主房屋' }, |
||||
{ value: 33, name: '出租房屋' }, |
||||
{ value: 11, name: '空置房屋' }, |
||||
{ value: 11, name: '其他' }, |
||||
], |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
// 初始化设备类型统计图表 |
||||
const typeChart = echarts.init(document.getElementById('typeChart')); |
||||
typeChart.setOption({ |
||||
title: { text: '设备类型统计', subtext: '按设备类型', left: 'center' }, |
||||
tooltip: { trigger: 'item' }, |
||||
series: [ |
||||
{ |
||||
name: '设备类型', |
||||
type: 'pie', |
||||
radius: '50%', |
||||
data: [ |
||||
{ value: 44, name: '自主房屋' }, |
||||
{ value: 33, name: '出租房屋' }, |
||||
{ value: 11, name: '空置房屋' }, |
||||
{ value: 11, name: '其他' }, |
||||
], |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
// 初始化预警信息统计图表 |
||||
const alertStatsChart = echarts.init(document.getElementById('alertStatsChart')); |
||||
alertStatsChart.setOption({ |
||||
title: { text: '预警信息统计', left: 'center' }, |
||||
tooltip: {}, |
||||
radar: { |
||||
indicator: [ |
||||
{ name: '火警类', max: 500 }, |
||||
{ name: '冲禁类', max: 500 }, |
||||
{ name: '灾害', max: 500 }, |
||||
{ name: '群体性', max: 500 }, |
||||
{ name: '行政类', max: 500 }, |
||||
{ name: '交通类', max: 500 }, |
||||
{ name: '重大', max: 500 }, |
||||
], |
||||
}, |
||||
series: [{ |
||||
name: '预警统计', |
||||
type: 'radar', |
||||
data: [ |
||||
{ |
||||
value: [75, 452, 64, 94, 44, 0, 29], |
||||
name: '预警次数', |
||||
}, |
||||
], |
||||
}], |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
.dashboard { |
||||
padding: 20px; |
||||
background-color: #f0f2f5; |
||||
min-height: 100vh; |
||||
} |
||||
|
||||
h1, h2 { |
||||
text-align: center; |
||||
} |
||||
|
||||
.el-card { |
||||
margin-bottom: 20px; |
||||
} |
||||
</style> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue