大屏功能更新
This commit is contained in:
parent
a01331dc43
commit
59c257c8d4
@ -2,6 +2,7 @@ package com.inspur.web.controller.bigscreen;
|
||||
|
||||
import com.inspur.bigscreen.service.ICompanyDashboardService;
|
||||
import com.inspur.common.core.domain.AjaxResult;
|
||||
import com.inspur.system.service.ISysRegionService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
@ -20,6 +21,9 @@ public class CompanyDashboardController {
|
||||
@Autowired
|
||||
private ICompanyDashboardService factoryDashboardService;
|
||||
|
||||
@Autowired
|
||||
private ISysRegionService sysRegionService;
|
||||
|
||||
@GetMapping("/countEquipNumByCompany/{deptId}")
|
||||
public AjaxResult countEquipNumByCompany(@PathVariable Long deptId) {
|
||||
return AjaxResult.success(factoryDashboardService.countEquipNumByStatus(deptId));
|
||||
@ -75,4 +79,14 @@ public class CompanyDashboardController {
|
||||
public AjaxResult companyDeptTree() {
|
||||
return AjaxResult.success(factoryDashboardService.selectCompanyDeptTreeList());
|
||||
}
|
||||
|
||||
@GetMapping("/regionByCompany/{deptId}")
|
||||
public AjaxResult regionByCompany(@PathVariable Long deptId) {
|
||||
return AjaxResult.success(sysRegionService.selectSysRegionByDeptId(deptId));
|
||||
}
|
||||
|
||||
@GetMapping("/getCompanyMapData/{regionId}")
|
||||
public AjaxResult getCompanyMapData(@PathVariable Long regionId) {
|
||||
return AjaxResult.success(factoryDashboardService.getCompanyMapData(regionId));
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import com.inspur.bigscreen.service.IOverallDashboardService;
|
||||
import com.inspur.common.core.domain.AjaxResult;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
@ -52,4 +53,19 @@ public class OverallDashboardController {
|
||||
public AjaxResult countCompanyDetails() {
|
||||
return AjaxResult.success(overallDashboardService.countCompanyDetails());
|
||||
}
|
||||
|
||||
@GetMapping("/listLatestAlarmRecord")
|
||||
public AjaxResult listLatestAlarmRecord() {
|
||||
return AjaxResult.success(overallDashboardService.selectLatestIpcAlarmRecord());
|
||||
}
|
||||
|
||||
@GetMapping("/countCompanyEquipNumByProvince")
|
||||
public AjaxResult countCompanyEquipNumByProvince() {
|
||||
return AjaxResult.success(overallDashboardService.countCompanyEquipNumByProvince());
|
||||
}
|
||||
|
||||
@GetMapping("/countCompanyEquipNumByCity/{provinceName}")
|
||||
public AjaxResult countCompanyEquipNumByCity(@PathVariable String provinceName) {
|
||||
return AjaxResult.success(overallDashboardService.countEquipNumByCity(provinceName));
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,10 @@ public class FactoryDashboardDTO {
|
||||
|
||||
private String time;
|
||||
|
||||
private Integer alarmNum;
|
||||
|
||||
private Integer deptNum;
|
||||
|
||||
private List<String> x;
|
||||
|
||||
private List<Object> y;
|
||||
|
||||
@ -6,6 +6,7 @@ import lombok.NoArgsConstructor;
|
||||
import org.apache.ibatis.annotations.ConstructorArgs;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
/**
|
||||
* @Author zhangjunwen
|
||||
@ -37,10 +38,24 @@ public class OverallDashboardDTO {
|
||||
|
||||
private Integer alarmNum;
|
||||
|
||||
private String rate;
|
||||
|
||||
private Integer total;
|
||||
|
||||
private Long regionId;
|
||||
|
||||
private String regionName;
|
||||
|
||||
private Long provinceId;
|
||||
|
||||
private Map<String, Object> params;
|
||||
|
||||
public OverallDashboardDTO() {}
|
||||
|
||||
public OverallDashboardDTO(Integer status, Integer data) {
|
||||
public OverallDashboardDTO(Integer status, Integer data, String rate, Integer total) {
|
||||
this.status = status;
|
||||
this.data = data;
|
||||
this.rate = rate;
|
||||
this.total = total;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,8 @@ package com.inspur.bigscreen.mapper;
|
||||
|
||||
import com.inspur.bigscreen.dto.OverallDashboardDTO;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* @Author zhangjunwen
|
||||
* @create 2024/7/17
|
||||
@ -17,4 +19,14 @@ public interface OverallDashboardMapper {
|
||||
* 根据公司id统计维修单数量
|
||||
*/
|
||||
public OverallDashboardDTO countMaintenanceNum(Long deptId);
|
||||
|
||||
/**
|
||||
* 统计各个regionid的设备数量
|
||||
*/
|
||||
public List<OverallDashboardDTO> countEquipNumByRegionId();
|
||||
|
||||
/**
|
||||
* 根据省名统计该省各个市的设备数量
|
||||
*/
|
||||
public List<OverallDashboardDTO> countEquipNumByCity(String provinceName);
|
||||
}
|
||||
|
||||
@ -70,4 +70,9 @@ public interface ICompanyDashboardService {
|
||||
* 获取公司部门列表
|
||||
*/
|
||||
public List<TreeSelect> selectCompanyDeptTreeList();
|
||||
|
||||
/**
|
||||
* 获取公司地图数据
|
||||
*/
|
||||
public List<FactoryDashboardDTO> getCompanyMapData(Long regionId);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
package com.inspur.bigscreen.service;
|
||||
|
||||
import com.inspur.bigscreen.dto.OverallDashboardDTO;
|
||||
import com.inspur.industrial.domain.IpcAlarmRecord;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@ -44,4 +45,19 @@ public interface IOverallDashboardService {
|
||||
* 查询各个企业相关展示信息，产线数、设备数，告警数量
|
||||
*/
|
||||
public List<OverallDashboardDTO> countCompanyDetails();
|
||||
|
||||
/**
|
||||
* 查询包含公司名称的最新的报警信息
|
||||
*/
|
||||
public List<IpcAlarmRecord> selectLatestIpcAlarmRecord();
|
||||
|
||||
/**
|
||||
* 根据省来统计省的设备数量
|
||||
*/
|
||||
public List<OverallDashboardDTO> countCompanyEquipNumByProvince();
|
||||
|
||||
/**
|
||||
* 根据省名统计该省各个市的设备数量
|
||||
*/
|
||||
public List<OverallDashboardDTO> countEquipNumByCity(String provinceName);
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ package com.inspur.bigscreen.service.impl;
|
||||
|
||||
import com.inspur.bigscreen.constant.EquipInfoStatus;
|
||||
import com.inspur.bigscreen.dto.CompanyDashboardDTO;
|
||||
import com.inspur.bigscreen.dto.FactoryDashboardDTO;
|
||||
import com.inspur.bigscreen.mapper.CompanyDashboardMapper;
|
||||
import com.inspur.bigscreen.service.ICompanyDashboardService;
|
||||
import com.inspur.common.core.domain.TreeSelect;
|
||||
@ -228,6 +229,26 @@ public class CompanyDashboardServiceImpl implements ICompanyDashboardService {
|
||||
return sysDeptService.buildDeptTreeSelect(companyDepts);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取公司地图数据
|
||||
*/
|
||||
public List<FactoryDashboardDTO> getCompanyMapData(Long regionId){
|
||||
List<FactoryDashboardDTO> resultList = new ArrayList<>();
|
||||
List<SysDept> deptList = sysDeptService.selectDeptByRegionId(regionId);
|
||||
if(deptList.size() == 0){
|
||||
return resultList;
|
||||
}
|
||||
for (SysDept sysDept : deptList) {
|
||||
FactoryDashboardDTO data = new FactoryDashboardDTO();
|
||||
data.setDeptId(sysDept.getDeptId());
|
||||
data.setDeptName(sysDept.getDeptName());
|
||||
data.setAlarmNum(ipcAlarmRecordService.countAllAlarmNumByDeptId(sysDept.getDeptId()));
|
||||
data.setDeptNum(sysDeptService.countChildrenDeptById(sysDept.getDeptId()));
|
||||
resultList.add(data);
|
||||
}
|
||||
return resultList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 通过公司id获取厂区部门信息
|
||||
*/
|
||||
|
||||
@ -9,7 +9,11 @@ import com.inspur.bigscreen.mapper.OverallDashboardMapper;
|
||||
import com.inspur.bigscreen.service.ICompanyDashboardService;
|
||||
import com.inspur.bigscreen.service.IOverallDashboardService;
|
||||
import com.inspur.common.core.domain.entity.SysDept;
|
||||
import com.inspur.industrial.domain.IpcAlarmRecord;
|
||||
import com.inspur.industrial.service.IIpcAlarmRecordService;
|
||||
import com.inspur.system.domain.SysRegion;
|
||||
import com.inspur.system.mapper.SysDeptMapper;
|
||||
import com.inspur.system.service.ISysRegionService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
@ -37,6 +41,11 @@ public class OverallDashboardServiceImpl implements IOverallDashboardService {
|
||||
@Autowired
|
||||
private CompanyDashboardMapper companyDashboardMapper;
|
||||
|
||||
@Autowired
|
||||
private IIpcAlarmRecordService ipcAlarmRecordService;
|
||||
|
||||
@Autowired
|
||||
private ISysRegionService sysRegionService;
|
||||
/**
|
||||
* 查询各个公司的设备（轴承）数量
|
||||
*/
|
||||
@ -75,12 +84,24 @@ public class OverallDashboardServiceImpl implements IOverallDashboardService {
|
||||
public List<OverallDashboardDTO> countMaintenanceNum(){
|
||||
List<SysDept> companyDepts = getCompanyDept();
|
||||
List<OverallDashboardDTO> resultList = new ArrayList<>();
|
||||
int sum = 0;
|
||||
int companyNum = 0;
|
||||
for (SysDept companyDept : companyDepts) {
|
||||
OverallDashboardDTO data = overallDashboardMapper.countMaintenanceNum(companyDept.getDeptId());
|
||||
data.setDeptId(companyDept.getDeptId());
|
||||
data.setDeptName(companyDept.getDeptName());
|
||||
sum += data.getData();
|
||||
resultList.add(data);
|
||||
}
|
||||
if(resultList.size() == 0){
|
||||
return null;
|
||||
}else{
|
||||
int finalSum = sum;
|
||||
resultList.forEach(item -> {
|
||||
item.setRate(finalSum != 0 ? item.getData() * 100 / finalSum + "%" : "0%");
|
||||
item.setTotal(finalSum);
|
||||
});
|
||||
}
|
||||
return resultList;
|
||||
}
|
||||
|
||||
@ -109,11 +130,15 @@ public class OverallDashboardServiceImpl implements IOverallDashboardService {
|
||||
long paperNum = companyDepts.stream().filter(dept -> dept.getIndustryCode().equals(DeptIndustryCode.PAPER)).count();
|
||||
long alchemyNum = companyDepts.stream().filter(dept -> dept.getIndustryCode().equals(DeptIndustryCode.ALCHEMY)).count();
|
||||
long otherNum = companyDepts.stream().filter(dept -> dept.getIndustryCode().equals(DeptIndustryCode.OTHER)).count();
|
||||
long totalNum = paperNum + alchemyNum + otherNum;
|
||||
String paperRate = totalNum != 0L ? paperNum * 100 / totalNum + "%" : "0%";
|
||||
String alchemyRate = totalNum != 0L ? alchemyNum * 100 / totalNum + "%" : "0%";
|
||||
String otherRate = totalNum != 0L ? otherNum * 100 / totalNum + "%" : "0%";
|
||||
|
||||
return Arrays.asList(
|
||||
new OverallDashboardDTO(Integer.valueOf(DeptIndustryCode.PAPER),(int)paperNum),
|
||||
new OverallDashboardDTO(Integer.valueOf(DeptIndustryCode.ALCHEMY),(int)alchemyNum),
|
||||
new OverallDashboardDTO(Integer.valueOf(DeptIndustryCode.OTHER),(int)otherNum)
|
||||
new OverallDashboardDTO(Integer.valueOf(DeptIndustryCode.PAPER),(int)paperNum,paperRate,(int) totalNum),
|
||||
new OverallDashboardDTO(Integer.valueOf(DeptIndustryCode.ALCHEMY),(int)alchemyNum,alchemyRate,(int) totalNum),
|
||||
new OverallDashboardDTO(Integer.valueOf(DeptIndustryCode.OTHER),(int)otherNum,otherRate,(int) totalNum)
|
||||
);
|
||||
|
||||
}
|
||||
@ -159,6 +184,44 @@ public class OverallDashboardServiceImpl implements IOverallDashboardService {
|
||||
return resultList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询包含公司名称的最新的报警信息
|
||||
*/
|
||||
public List<IpcAlarmRecord> selectLatestIpcAlarmRecord(){
|
||||
return ipcAlarmRecordService.selectLatestIpcAlarmRecord();
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据省来统计省的设备数量
|
||||
*/
|
||||
public List<OverallDashboardDTO> countCompanyEquipNumByProvince(){
|
||||
List<OverallDashboardDTO> resultList = new ArrayList<>();
|
||||
List<OverallDashboardDTO> cityEqpNumList = overallDashboardMapper.countEquipNumByRegionId();
|
||||
if(cityEqpNumList.size() == 0){
|
||||
return null;
|
||||
}
|
||||
List<Long> provinceIdList = cityEqpNumList.stream().map(OverallDashboardDTO::getProvinceId).distinct().collect(Collectors.toList());
|
||||
Map<Long, Integer> sumMap = cityEqpNumList.stream()
|
||||
.collect(Collectors.groupingBy(OverallDashboardDTO::getProvinceId, Collectors.summingInt(OverallDashboardDTO::getData)));
|
||||
for (Long providerId : provinceIdList) {
|
||||
OverallDashboardDTO data = new OverallDashboardDTO();
|
||||
SysRegion region = sysRegionService.selectSysRegionById(providerId);
|
||||
data.setDeptName(region.getName());
|
||||
data.setData(sumMap.get(providerId));
|
||||
data.setProvinceId(providerId);
|
||||
|
||||
resultList.add(data);
|
||||
}
|
||||
return resultList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据省名统计该省各个市的设备数量
|
||||
*/
|
||||
public List<OverallDashboardDTO> countEquipNumByCity(String provinceName){
|
||||
return overallDashboardMapper.countEquipNumByCity(provinceName);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询系统重公司部门
|
||||
*/
|
||||
|
||||
@ -2,6 +2,8 @@ package com.inspur.industrial.domain;
|
||||
|
||||
import java.math.BigDecimal;
|
||||
import java.util.Date;
|
||||
import java.util.Map;
|
||||
|
||||
import com.fasterxml.jackson.annotation.JsonFormat;
|
||||
import com.inspur.common.annotation.Excel;
|
||||
import com.inspur.common.core.domain.BaseEntity;
|
||||
@ -76,6 +78,8 @@ public class IpcAlarmRecord extends BaseEntity
|
||||
|
||||
private IpcAlarmRules alarmRules;
|
||||
|
||||
private Map<String, Object> params;
|
||||
|
||||
public void setId(Long id)
|
||||
{
|
||||
this.id = id;
|
||||
@ -207,6 +211,16 @@ public class IpcAlarmRecord extends BaseEntity
|
||||
this.ids = ids;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Map<String, Object> getParams() {
|
||||
return params;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setParams(Map<String, Object> params) {
|
||||
this.params = params;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
|
||||
|
||||
@ -2,6 +2,7 @@ package com.inspur.industrial.mapper;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
import com.inspur.bigscreen.dto.OverallDashboardDTO;
|
||||
import com.inspur.common.annotation.DataSource;
|
||||
import com.inspur.common.enums.DataSourceType;
|
||||
import com.inspur.industrial.domain.IpcAlarmRecord;
|
||||
@ -38,6 +39,16 @@ public interface IpcAlarmRecordMapper
|
||||
*/
|
||||
public List<IpcAlarmRecord> selectLatestIpcAlarmRecordByFactoryId(Long deptId);
|
||||
|
||||
/**
|
||||
* 查询全局看板最新的报警记录
|
||||
*/
|
||||
public List<IpcAlarmRecord> selectLatestIpcAlarmRecord();
|
||||
|
||||
/**
|
||||
* 根据部门id统计报警记录条数
|
||||
*/
|
||||
public int countAllAlarmNumByDeptId(Long deptId);
|
||||
|
||||
/**
|
||||
* 新增报警记录
|
||||
*
|
||||
|
||||
@ -34,6 +34,16 @@ public interface IIpcAlarmRecordService
|
||||
*/
|
||||
public List<IpcAlarmRecord> selectLatestIpcAlarmRecordByFactoryId(Long deptId);
|
||||
|
||||
/**
|
||||
* 查询全局最新报警记录（包含公司名称）
|
||||
*/
|
||||
public List<IpcAlarmRecord> selectLatestIpcAlarmRecord();
|
||||
|
||||
/**
|
||||
* 根据部门id统计报警记录条数
|
||||
*/
|
||||
public int countAllAlarmNumByDeptId(Long deptId);
|
||||
|
||||
/**
|
||||
* 新增报警记录
|
||||
*
|
||||
|
||||
@ -1,11 +1,16 @@
|
||||
package com.inspur.industrial.service.impl;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.concurrent.CompletableFuture;
|
||||
import java.util.concurrent.ExecutionException;
|
||||
|
||||
import com.inspur.common.core.domain.entity.SysDept;
|
||||
import com.inspur.common.utils.SecurityUtils;
|
||||
import com.inspur.industrial.vo.AlarmCountVO;
|
||||
import com.inspur.system.service.ISysDeptService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
import com.inspur.industrial.mapper.IpcAlarmRecordMapper;
|
||||
@ -24,6 +29,9 @@ public class IpcAlarmRecordServiceImpl implements IIpcAlarmRecordService
|
||||
@Autowired
|
||||
private IpcAlarmRecordMapper ipcAlarmRecordMapper;
|
||||
|
||||
@Autowired
|
||||
private ISysDeptService sysDeptService;
|
||||
|
||||
/**
|
||||
* 查询报警记录
|
||||
*
|
||||
@ -55,6 +63,36 @@ public class IpcAlarmRecordServiceImpl implements IIpcAlarmRecordService
|
||||
return ipcAlarmRecordMapper.selectLatestIpcAlarmRecordByFactoryId(deptId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询全局最新报警记录（包含公司名称）
|
||||
*/
|
||||
public List<IpcAlarmRecord> selectLatestIpcAlarmRecord(){
|
||||
List<IpcAlarmRecord> recordList = new ArrayList<>();
|
||||
List<IpcAlarmRecord> ipcAlarmRecordList = ipcAlarmRecordMapper.selectLatestIpcAlarmRecord();
|
||||
for (IpcAlarmRecord ipcAlarmRecord : ipcAlarmRecordList) {
|
||||
Map<String, Object> params = new HashMap<>();
|
||||
Long parentDeptId = ipcAlarmRecord.getEquipInfo().getDeptId();
|
||||
SysDept parentDept = sysDeptService.selectDeptById(parentDeptId);
|
||||
String[] ancestors = parentDept.getAncestors().split(",");
|
||||
if(ancestors.length >= 3) {
|
||||
SysDept companyDept = sysDeptService.selectDeptById(Long.parseLong(parentDept.getAncestors().split(",")[2]));
|
||||
params.put("companyName", companyDept.getDeptName());
|
||||
}else if (ancestors.length == 2) {
|
||||
params.put("companyName", parentDept.getDeptName());
|
||||
}
|
||||
ipcAlarmRecord.setParams(params);
|
||||
recordList.add(ipcAlarmRecord);
|
||||
}
|
||||
return recordList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据部门id统计报警记录条数
|
||||
*/
|
||||
public int countAllAlarmNumByDeptId(Long deptId){
|
||||
return ipcAlarmRecordMapper.countAllAlarmNumByDeptId(deptId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增报警记录
|
||||
*
|
||||
|
||||
@ -49,6 +49,16 @@ public interface SysDeptMapper
|
||||
*/
|
||||
public List<SysDept> selectChildrenDeptById(Long deptId);
|
||||
|
||||
/**
|
||||
* 根据id统计子部门数量
|
||||
*/
|
||||
public int countChildrenDeptById(Long deptId);
|
||||
|
||||
/**
|
||||
* 根据regionId获取区域内的部门
|
||||
*/
|
||||
public List<SysDept> selectDeptByRegionId(Long regionId);
|
||||
|
||||
/**
|
||||
* 根据ID查询所有子部门（正常状态）
|
||||
*
|
||||
|
||||
@ -27,6 +27,11 @@ public interface SysRegionMapper
|
||||
*/
|
||||
public List<SysRegion> selectSysRegionList(SysRegion sysRegion);
|
||||
|
||||
/**
|
||||
* 通过部门id查询部门的行政区信息
|
||||
*/
|
||||
public List<SysRegion> selectSysRegionByDeptId(Long deptId);
|
||||
|
||||
/**
|
||||
* 新增行政区划
|
||||
*
|
||||
|
||||
@ -64,6 +64,17 @@ public interface ISysDeptService
|
||||
*/
|
||||
public SysDept selectDeptById(Long deptId);
|
||||
|
||||
/**
|
||||
* 根据部门ID统计子部门数量
|
||||
*/
|
||||
public int countChildrenDeptById(Long deptId);
|
||||
|
||||
/**
|
||||
* 根据省的id查询厂区部门信息
|
||||
*/
|
||||
public List<SysDept> selectDeptByRegionId(Long regionId);
|
||||
|
||||
|
||||
/**
|
||||
* 根据ID查询所有子部门（正常状态）
|
||||
*
|
||||
@ -72,6 +83,7 @@ public interface ISysDeptService
|
||||
*/
|
||||
public int selectNormalChildrenDeptById(Long deptId);
|
||||
|
||||
|
||||
/**
|
||||
* 是否存在部门子节点
|
||||
*
|
||||
|
||||
@ -27,6 +27,11 @@ public interface ISysRegionService
|
||||
*/
|
||||
public List<SysRegion> selectSysRegionList(SysRegion sysRegion);
|
||||
|
||||
/**
|
||||
* 查询deptId及其子部门所在省的区域信息
|
||||
*/
|
||||
public List<SysRegion> selectSysRegionByDeptId(Long deptId);
|
||||
|
||||
/**
|
||||
* 新增行政区划
|
||||
*
|
||||
|
||||
@ -4,6 +4,9 @@ import java.util.ArrayList;
|
||||
import java.util.Iterator;
|
||||
import java.util.List;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
import com.inspur.system.domain.SysRegion;
|
||||
import com.inspur.system.mapper.SysRegionMapper;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
import com.inspur.common.annotation.DataScope;
|
||||
@ -35,6 +38,9 @@ public class SysDeptServiceImpl implements ISysDeptService
|
||||
@Autowired
|
||||
private SysRoleMapper roleMapper;
|
||||
|
||||
@Autowired
|
||||
private SysRegionMapper regionMapper;
|
||||
|
||||
/**
|
||||
* 查询部门管理数据
|
||||
*
|
||||
@ -138,6 +144,21 @@ public class SysDeptServiceImpl implements ISysDeptService
|
||||
return deptMapper.selectDeptById(deptId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据部门ID统计子部门数量
|
||||
*/
|
||||
public int countChildrenDeptById(Long deptId){
|
||||
return deptMapper.countChildrenDeptById(deptId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据省的id查询厂区部门信息
|
||||
*/
|
||||
public List<SysDept> selectDeptByRegionId(Long regionId){
|
||||
List<SysDept> deptList = deptMapper.selectDeptByRegionId(regionId);
|
||||
return deptList.size() == 0 ? null : deptList.stream().filter(dept -> dept.getAncestors().split(",").length == 3).collect(Collectors.toList());
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据ID查询所有子部门（正常状态）
|
||||
*
|
||||
@ -150,6 +171,7 @@ public class SysDeptServiceImpl implements ISysDeptService
|
||||
return deptMapper.selectNormalChildrenDeptById(deptId);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 是否存在子节点
|
||||
*
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
package com.inspur.system.service.impl;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
@ -43,6 +44,26 @@ public class SysRegionServiceImpl implements ISysRegionService
|
||||
return sysRegionMapper.selectSysRegionList(sysRegion);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询deptId及其子部门所在省的区域信息
|
||||
*/
|
||||
@Override
|
||||
public List<SysRegion> selectSysRegionByDeptId(Long deptId){
|
||||
List<SysRegion> resultList = new ArrayList<>();
|
||||
List<SysRegion> sysRegionList = sysRegionMapper.selectSysRegionByDeptId(deptId);
|
||||
if(sysRegionList != null) {
|
||||
for (SysRegion sysRegion : sysRegionList) {
|
||||
if (sysRegion.getParentId() != 0L) {
|
||||
sysRegion = sysRegionMapper.selectSysRegionById(sysRegion.getParentId());
|
||||
resultList.add(sysRegion);
|
||||
} else {
|
||||
resultList.add(sysRegion);
|
||||
}
|
||||
}
|
||||
}
|
||||
return resultList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增行政区划
|
||||
*
|
||||
|
||||
@ -6,6 +6,9 @@
|
||||
|
||||
<resultMap type="com.inspur.bigscreen.dto.OverallDashboardDTO" id="overallData">
|
||||
<result property="deptId" column="dept_id"/>
|
||||
<result property="regionId" column="region_id"/>
|
||||
<result property="regionName" column="region_name"/>
|
||||
<result property="provinceId" column="province_id"/>
|
||||
<result property="deptName" column="dept_name"/>
|
||||
<result property="data" column="data"/>
|
||||
<result property="type" column="type"/>
|
||||
@ -43,4 +46,43 @@
|
||||
where dept_id in
|
||||
(select dept_id from sys_dept where FIND_IN_SET(#{deptId}, ancestors) or dept_id = #{deptId})
|
||||
</select>
|
||||
|
||||
<!-- 统计各个regionid的设备数量 countEquipNumByRegionId();-->
|
||||
<select id="countEquipNumByRegionId" resultMap="overallData">
|
||||
select
|
||||
sr.parent_id as province_id,
|
||||
sr.name as region_name,
|
||||
b.region_id,
|
||||
COUNT(*) as data
|
||||
from
|
||||
`ipc_equip_info` a
|
||||
left join
|
||||
sys_dept b on a.dept_id = b.dept_id
|
||||
left join
|
||||
sys_region sr on b.region_id = sr.id
|
||||
where
|
||||
b.region_id is not null
|
||||
group by
|
||||
b.region_id ;
|
||||
</select>
|
||||
|
||||
<!-- 根据省名统计该省各个市的设备数量countEquipNumByCity(String provinceName);-->
|
||||
<select id="countEquipNumByCity" parameterType="String" resultMap="overallData">
|
||||
select
|
||||
sr.parent_id,
|
||||
sr.name as region_name,
|
||||
b.region_id,
|
||||
COUNT(*) as data
|
||||
from
|
||||
`ipc_equip_info` a
|
||||
left join
|
||||
sys_dept b on a.dept_id = b.dept_id
|
||||
left join
|
||||
sys_region sr on b.region_id = sr.id
|
||||
where
|
||||
b.region_id in
|
||||
( select sr2.id from sys_region sr1 left join sys_region sr2 on sr1.id = sr2.parent_id where sr1.name = #{provinceName})
|
||||
group by
|
||||
b.region_id;
|
||||
</select>
|
||||
</mapper>
|
||||
@ -28,6 +28,7 @@
|
||||
<result property="equipSerialNum" column="equip_serial_num" />
|
||||
<result property="equipProductionDate" column="equip_production_date" />
|
||||
<result property="deptName" column="dept_name" />
|
||||
<result property="deptId" column="dept_id" />
|
||||
<result property="remark" column="remark" />
|
||||
</resultMap>
|
||||
|
||||
@ -111,6 +112,29 @@
|
||||
limit 5
|
||||
</select>
|
||||
|
||||
<!--查询全局看板最新的报警记录List<IpcAlarmRecord> countLatestIpcAlarmRecord();-->
|
||||
<select id="selectLatestIpcAlarmRecord" resultMap="IpcAlarmRecordResult">
|
||||
select a.content,a.alarm_value,a.alarm_time,a.status,a.alarm_level,b.equip_name,c.dept_name,c.dept_id
|
||||
from `ipc_alarm_record` a
|
||||
left join ipc_equip_info b
|
||||
on a.equip_id = b.id
|
||||
left join sys_dept c
|
||||
on b.dept_id= c.dept_id
|
||||
order by a.alarm_time desc
|
||||
limit 6
|
||||
</select>
|
||||
|
||||
<!--根据部门id统计报警记录条数-->
|
||||
<select id="countAllAlarmNumByDeptId" parameterType="Long" resultType="int">
|
||||
select count(1) from ipc_alarm_record a
|
||||
left join ipc_equip_info b on a.equip_id = b.id
|
||||
where b.dept_id in (
|
||||
select dept_id from sys_dept where
|
||||
find_in_set(#{deptId},ancestors)
|
||||
or dept_id = #{deptId}
|
||||
)
|
||||
</select>
|
||||
|
||||
<insert id="insertIpcAlarmRecord" parameterType="IpcAlarmRecord" useGeneratedKeys="true" keyProperty="id">
|
||||
insert into ipc_alarm_record
|
||||
<trim prefix="(" suffix=")" suffixOverrides=",">
|
||||
|
||||
@ -93,6 +93,20 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
select * from sys_dept where find_in_set(#{deptId}, ancestors)
|
||||
</select>
|
||||
|
||||
<!--根据id统计子部门数量-->
|
||||
<select id="countChildrenDeptById" parameterType="Long" resultType="int">
|
||||
select count(*) from sys_dept where del_flag = '0' and find_in_set(#{deptId}, ancestors)
|
||||
</select>
|
||||
|
||||
<!--根据regionId获取区域内的部门-->
|
||||
<select id="selectDeptByRegionId" parameterType="Long" resultMap="SysDeptResult">
|
||||
select *
|
||||
from sys_dept
|
||||
where region_id in (
|
||||
select id from sys_region where parent_id = #{regionId}
|
||||
)
|
||||
</select>
|
||||
|
||||
<select id="selectNormalChildrenDeptById" parameterType="Long" resultType="int">
|
||||
select count(*) from sys_dept where status = 0 and del_flag = '0' and find_in_set(#{deptId}, ancestors)
|
||||
</select>
|
||||
|
||||
@ -32,7 +32,15 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
<include refid="selectSysRegionVo"/>
|
||||
where id = #{id}
|
||||
</select>
|
||||
|
||||
|
||||
<!--通过部门id查询部门的行政区信息 selectSysRegionByDeptId-->
|
||||
<select id="selectSysRegionByDeptId" parameterType="Long" resultMap="SysRegionResult">
|
||||
<include refid="selectSysRegionVo"/>
|
||||
where id in
|
||||
(select distinct(region_id) from `sys_dept`
|
||||
where id = #{deptId} or find_in_set(#{deptId},ancestors) and region_id is not null)
|
||||
</select>
|
||||
|
||||
<insert id="insertSysRegion" parameterType="SysRegion">
|
||||
insert into sys_region
|
||||
<trim prefix="(" suffix=")" suffixOverrides=",">
|
||||
|
||||
@ -87,3 +87,19 @@ export function getCompanyDeptTree() {
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 通过公司id查询厂区所在省信息
|
||||
export function getRegionByCompany(deptId) {
|
||||
return request({
|
||||
url: "/bigscreen/company/regionByCompany/" + deptId,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
//根据区域id获取地图数据
|
||||
export function getCompanyMapData(regionId) {
|
||||
return request({
|
||||
url: "/bigscreen/company/getCompanyMapData/" + regionId,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
@ -55,3 +55,27 @@ export function getCompanyDetails() {
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 统计最新报警信息
|
||||
export function getLatestAlarmRecord() {
|
||||
return request({
|
||||
url: "/bigscreen/overall/listLatestAlarmRecord",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
//获取各个省设备数
|
||||
export function getEquNumByProvince() {
|
||||
return request({
|
||||
url: "/bigscreen/overall/countCompanyEquipNumByProvince",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
//获取某个省各个市的设备数
|
||||
export function getEquNumByCity(provinceName) {
|
||||
return request({
|
||||
url: "/bigscreen/overall/countCompanyEquipNumByCity/" + provinceName,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
@ -54,18 +54,23 @@
|
||||
></el-cascader>
|
||||
<div
|
||||
id="mapChart"
|
||||
@click="stopClick"
|
||||
:style="{ height: height,border:'none' }"
|
||||
></div>
|
||||
<div
|
||||
id="popPanel"
|
||||
<!-- <div
|
||||
id="popPanel1"
|
||||
class="mainPanel"
|
||||
v-show="showPanel"
|
||||
>
|
||||
<div class="headPanel">{{ "xxx工厂" }}</div>
|
||||
<div class="contentPanel">
|
||||
<div
|
||||
class="contentPanel"
|
||||
v-for="(item, index) in mapTableData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="showdata">{{ item.deptName }}</div>
|
||||
<div class="showdata">
|
||||
<div class="item-name">{{ "产线数：" }}</div>
|
||||
<div class="item-value">{{ 1 }}</div>
|
||||
<div class="item-value">{{ item.deptNum }}</div>
|
||||
<div>{{ "台" }}</div>
|
||||
</div>
|
||||
<div class="showdata">
|
||||
@ -73,10 +78,45 @@
|
||||
<div
|
||||
class="item-value"
|
||||
style="font-weight:bolder;"
|
||||
>{{ 1 }}</div>
|
||||
>{{ item.alarmNum }}</div>
|
||||
<div>{{ "条" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
id="popPanel1"
|
||||
class="mainPanel"
|
||||
v-show="showPanel"
|
||||
>
|
||||
<div class="headPanel">{{ this.showProvinceName }} <el-button
|
||||
style="margin-left:20px"
|
||||
@click="closePanel"
|
||||
type="text"
|
||||
>关闭</el-button></div>
|
||||
<div
|
||||
v-for="(item, index) in mapTableData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="single-contentPanel">
|
||||
<div class="single-showdata">
|
||||
<div>{{ item.deptName }}</div>
|
||||
</div>
|
||||
<div class="single-showdata">
|
||||
<div class="item-name">{{ "产线数：" }}</div>
|
||||
<div
|
||||
class="item-value"
|
||||
style="font-weight:bolder;"
|
||||
>{{ item.deptNum + "台" }}</div>
|
||||
</div>
|
||||
<div class="single-showdata">
|
||||
<div class="item-name">{{ "报警数：" }}</div>
|
||||
<div
|
||||
class="item-value"
|
||||
style="font-weight:bolder;"
|
||||
>{{ item.alarmNum + "条" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-wrap">
|
||||
@ -194,6 +234,8 @@ import {
|
||||
getWeeklyAlarmNumByCompany,
|
||||
getSparePartsNumByCompany,
|
||||
getCompanyDeptTree,
|
||||
getRegionByCompany,
|
||||
getCompanyMapData,
|
||||
} from "@/api/bigscreen/company";
|
||||
export default {
|
||||
dicts: ["equip_status", "severity_level"],
|
||||
@ -255,21 +297,16 @@ export default {
|
||||
myChart: "",
|
||||
series: [],
|
||||
showPanel: false,
|
||||
firstMark: false,
|
||||
loading: false,
|
||||
coordData: [],
|
||||
provinceName: [],
|
||||
showProvinceName: "",
|
||||
mapTableData: [],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
const data = chinaMap.features;
|
||||
console.log("data:", data);
|
||||
// console.log(
|
||||
// "p:",
|
||||
// data.filter((e) => e.properties.adcode > 0)
|
||||
// );
|
||||
data.filter((e) => {
|
||||
console.log("mmm:", e.properties.adcode);
|
||||
return e;
|
||||
});
|
||||
this.getDeptTree();
|
||||
this.getCompanyEquNum();
|
||||
this.getPatrolRecordNum();
|
||||
@ -279,9 +316,48 @@ export default {
|
||||
this.getAlarmData();
|
||||
this.getUpkeepRecord();
|
||||
this.getWeeklyAlarmNum();
|
||||
this.mapRender();
|
||||
this.getCompanyRegionCoord();
|
||||
},
|
||||
created() {
|
||||
// document.addEventListener("click", (event) => {
|
||||
// // var popup =
|
||||
// // this.mapTableData.length > 1
|
||||
// // ? document.getElementById("popPanel1")
|
||||
// // : document.getElementById("popPanel2");
|
||||
// var popup = document.getElementById("popPanel1");
|
||||
// if (this.firstMark) {
|
||||
// console.log("显示");
|
||||
// this.showPanel = true;
|
||||
// this.firstMark = false;
|
||||
// } else {
|
||||
// console.log("验证是否显示");
|
||||
// var isOut = popup.contains(event.target);
|
||||
// this.showPanel = isOut && this.showPanel;
|
||||
// }
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
closePanel() {
|
||||
this.showPanel = false;
|
||||
},
|
||||
stopClick(e) {
|
||||
e.stopPropagation();
|
||||
},
|
||||
getCompanyRegionCoord() {
|
||||
const mapData = chinaMap.features;
|
||||
this.coordData = [];
|
||||
getRegionByCompany(this.selectedDeptId).then((res) => {
|
||||
var reginList = res.data;
|
||||
reginList.forEach((element) => {
|
||||
this.provinceName.push(element.name);
|
||||
const jsonData = mapData.filter(
|
||||
(e) => e.properties.adcode === element.id
|
||||
);
|
||||
this.coordData.push({ value: jsonData[0].properties.center });
|
||||
this.mapRender();
|
||||
});
|
||||
});
|
||||
},
|
||||
getWeeklyAlarmNum() {
|
||||
let chart6 = echarts.init(this.$refs.chart6);
|
||||
chart6.showLoading();
|
||||
@ -393,33 +469,8 @@ export default {
|
||||
},
|
||||
mapRender() {
|
||||
const _this = this;
|
||||
// let mapDom = document.querySelector(".map-wrapper");
|
||||
// this.myChart = this.$echarts.init(mapDom);
|
||||
echarts.registerMap("china", { geoJSON: chinaMap });
|
||||
this.myChart = echarts.init(document.getElementById("mapChart"));
|
||||
let data = [
|
||||
{ name: "上海", value: "90" },
|
||||
{ name: "武汉", value: 90 },
|
||||
];
|
||||
let geoCoordMap = {
|
||||
//可以在地图上显示的城市的坐标信息
|
||||
武汉: [114.31, 30.52],
|
||||
上海: [121.4648, 31.2891],
|
||||
};
|
||||
let convertData = function (data) {
|
||||
//返回[{coord: 极坐标},{coord: 极坐标}]
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
_this.series.push([
|
||||
{
|
||||
name: "项目分布",
|
||||
@ -446,73 +497,7 @@ export default {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: convertData(data),
|
||||
},
|
||||
{
|
||||
// type: "scatter",
|
||||
// z: 5,
|
||||
// roam: false, // 可缩放
|
||||
// coordinateSystem: "geo",
|
||||
// symbolSize: [20, 30], //点的大小
|
||||
// symbolOffset: [0, -15],
|
||||
// color: "#e1ebe3",
|
||||
// showEffectOn: "render",
|
||||
// effectType: "ripple",
|
||||
// itemStyle: {
|
||||
// color: "red",
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false, //是否显示省份
|
||||
// textStyle: {
|
||||
// color: "#00a0c9",
|
||||
// size: "10",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// markLine: {
|
||||
// smooth: true,
|
||||
// symbol: ["pin", "circle"],
|
||||
// symbolSize: 1,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: "#ff0",
|
||||
// borderWidth: 1,
|
||||
// borderColor: "rgba(0,0,0,0)",
|
||||
// },
|
||||
// },
|
||||
// data: [],
|
||||
// },
|
||||
// data: convertData(data),
|
||||
},
|
||||
{
|
||||
// type: "map",
|
||||
// map: "china",
|
||||
// geoIndex: 0,
|
||||
// aspectScale: 0.75, //长宽比
|
||||
// showLegendSymbol: false, // 存在legend时显示
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// emphasis: {
|
||||
// show: false,
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// roam: true,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// areaColor: "#031525",
|
||||
// borderColor: "#FFFFFF",
|
||||
// },
|
||||
// emphasis: {
|
||||
// areaColor: "#2B91B7",
|
||||
// },
|
||||
// },
|
||||
// animation: false,
|
||||
data: this.coordData,
|
||||
},
|
||||
]);
|
||||
// 指定相关的配置项和数据
|
||||
@ -587,34 +572,35 @@ export default {
|
||||
series: _this.series[0],
|
||||
};
|
||||
this.myChart.setOption(mapBoxOption);
|
||||
|
||||
// this.myChart.off("click");
|
||||
this.myChart.on("click", (e) => {
|
||||
//判断该名字在有厂区的省
|
||||
this.showPanel = true;
|
||||
let dx = e.event.offsetX;
|
||||
let dy = e.event.offsetY;
|
||||
var panel = document.getElementById("popPanel");
|
||||
panel.style.left = dx + "px";
|
||||
panel.style.top = dy + "px";
|
||||
// panel.css("left", dx + 30);
|
||||
// $(".mainPanel").css("top", dy - 130);
|
||||
if (this.provinceName.includes(e.name)) {
|
||||
this.showProvinceName = e.name;
|
||||
const mapData = chinaMap.features;
|
||||
const selectData = mapData.filter((md) => {
|
||||
return md.properties.name === e.name;
|
||||
});
|
||||
const regionId = selectData[0].properties.adcode;
|
||||
this.showPanel = true;
|
||||
this.firstMark = true;
|
||||
//获取数据列表
|
||||
let dx = e.event.offsetX;
|
||||
let dy = e.event.offsetY;
|
||||
// var panel =
|
||||
// this.mapTableData.length > 1
|
||||
// ? document.getElementById("popPanel1")
|
||||
// : document.getElementById("popPanel2");
|
||||
var panel = document.getElementById("popPanel1");
|
||||
panel.style.left = dx + "px";
|
||||
panel.style.top = dy + "px";
|
||||
if (regionId != null) {
|
||||
getCompanyMapData(regionId).then((res) => {
|
||||
this.mapTableData = res.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// fixingPositon() {
|
||||
// const e = event || window.event,
|
||||
// top = e.clientY,
|
||||
// left = e.clientX,
|
||||
// boxDom = document.querySelector(".mainPanel");
|
||||
|
||||
// this.$nextTick(function () {
|
||||
// const offsetX = boxDom.clientWidth;
|
||||
// const offsetY = boxDom.clientHeight;
|
||||
// boxDom.style.cssText = `top: ${top - offsetY - 25}px; left: ${
|
||||
// left + offsetX / 3
|
||||
// }px`;
|
||||
// });
|
||||
// },
|
||||
initMapChart() {
|
||||
echarts.registerMap("china", { geoJSON: chinaMap });
|
||||
let myChart = echarts.init(document.getElementById("mapChart"));
|
||||
@ -951,7 +937,7 @@ export default {
|
||||
data: element.y,
|
||||
type: "line",
|
||||
});
|
||||
legendData.push(data.deptName);
|
||||
legendData.push(element.deptName);
|
||||
});
|
||||
option.legend = { data: legendData };
|
||||
}
|
||||
@ -1021,7 +1007,7 @@ export default {
|
||||
data: element.y,
|
||||
type: "line",
|
||||
});
|
||||
legendData.push(data.deptName);
|
||||
legendData.push(element.deptName);
|
||||
});
|
||||
option.legend = { data: legendData };
|
||||
}
|
||||
@ -1171,7 +1157,7 @@ export default {
|
||||
data: element.y,
|
||||
type: "line",
|
||||
});
|
||||
legendData.push(data.deptName);
|
||||
legendData.push(element.deptName);
|
||||
});
|
||||
option.legend = { data: legendData };
|
||||
}
|
||||
@ -1241,7 +1227,7 @@ export default {
|
||||
data: element.y,
|
||||
type: "line",
|
||||
});
|
||||
legendData.push(data.deptName);
|
||||
legendData.push(element.deptName);
|
||||
});
|
||||
option.legend = { data: legendData };
|
||||
}
|
||||
@ -2038,8 +2024,8 @@ export default {
|
||||
background: url(../../../assets/images/bigscreen/company/pop_back.png)
|
||||
no-repeat center center;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
width: 450px;
|
||||
overflow-y: auto;
|
||||
background-size: 100% 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
@ -2054,16 +2040,31 @@ export default {
|
||||
}
|
||||
.contentPanel {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1rf;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 18px;
|
||||
font-weight: lighter;
|
||||
justify-content: space-around;
|
||||
background: rgba(202, 238, 254, 0.1);
|
||||
}
|
||||
.showdata {
|
||||
display: flex;
|
||||
}
|
||||
.single-contentPanel {
|
||||
display: flex;
|
||||
height: 35px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 18px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.single-showdata {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin: 5% 0 2% 0;
|
||||
font-size: 18px;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<div class="item-title">在线轴承运行信息</div>
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
v-loading="loading1"
|
||||
:data="runList"
|
||||
style="width: 100%; height: 100%; overflow-y: hidden"
|
||||
>
|
||||
@ -80,7 +81,7 @@
|
||||
<div class="item-title">维修信息</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="mainten-total">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{50}}</span>
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{this.maintenTotal}}</span>
|
||||
<span>{{"维修总数"}}</span>
|
||||
</div>
|
||||
<div class="run-status-des-container">
|
||||
@ -89,10 +90,10 @@
|
||||
:key="index"
|
||||
class="run-status-des"
|
||||
>
|
||||
<div :class="changeMark(item.order)">
|
||||
<span>{{ item.name }}</span>
|
||||
<div :class="changeMark(index + 1 )">
|
||||
<span>{{ item.deptName }}</span>
|
||||
</div>
|
||||
<div>{{ item.value }} | {{ item.rate }}</div>
|
||||
<div>{{ item.data }} | {{ item.rate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -127,21 +128,21 @@
|
||||
class="mainPanel"
|
||||
v-show="showPanel"
|
||||
>
|
||||
<div class="headPanel">{{ "xxx工厂" }}</div>
|
||||
<div class="contentPanel">
|
||||
<div class="showdata">
|
||||
<div class="item-name">{{ "产线数：" }}</div>
|
||||
<div class="item-value">{{ 1 }}</div>
|
||||
<div>{{ "台" }}</div>
|
||||
</div>
|
||||
<div class="showdata">
|
||||
<div class="item-name">{{ "报警数：" }}</div>
|
||||
<div
|
||||
class="item-value"
|
||||
style="font-weight:bolder;"
|
||||
>{{ 1 }}</div>
|
||||
<div>{{ "条" }}</div>
|
||||
</div>
|
||||
<div class="headPanel">{{ this.provinceName + ":" + this.eqpNums + "台" }} <el-button
|
||||
style="margin-left:20px"
|
||||
@click="closePanel"
|
||||
type="text"
|
||||
>关闭</el-button></div>
|
||||
<div
|
||||
class="contentPanel"
|
||||
v-for="(item, index) in cityEquNumList"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="item-name"
|
||||
style="margin-right: 5%;"
|
||||
>{{ item.name + ":" }}</div>
|
||||
<div class="item-value">{{ item.value + "台" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -150,43 +151,43 @@
|
||||
<div class="item-title">客户告警信息</div>
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
v-loading="loading2"
|
||||
:data="alarmList"
|
||||
style="width: 100%; height: 100%; overflow-y: hidden"
|
||||
:row-style="{height: '30px'}"
|
||||
>
|
||||
<el-table-column
|
||||
prop="equipName"
|
||||
prop="params.companyName"
|
||||
label="公司名称"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="equipInfo.equipName"
|
||||
label="设备名称"
|
||||
align="left"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="equipStatus"
|
||||
label="状态"
|
||||
width="60"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.equip_status"
|
||||
:value="scope.row.equipStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="level"
|
||||
label="严重等级"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.severity_level"
|
||||
:value="scope.row.level"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmTime"
|
||||
label="时间"
|
||||
> </el-table-column>
|
||||
<el-table-column
|
||||
prop="content"
|
||||
label="报警内容"
|
||||
> </el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmValue"
|
||||
label="报警值"
|
||||
> <template slot-scope="scope">
|
||||
<span style="color:red">{{ scope.row.alarmValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmLevel"
|
||||
label="严重等级"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color:yellow">{{ scope.row.alarmLevel + "级" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
@ -197,7 +198,7 @@
|
||||
<div class="item-title">应用行业及占有率</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="equ-run-out">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{50}}</span>
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{this.industryTotal}}</span>
|
||||
<span>{{"设备总数"}}</span>
|
||||
</div>
|
||||
<div class="industry-des-container">
|
||||
@ -242,14 +243,14 @@
|
||||
<div class="online-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">80</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{ 3 }}</div>
|
||||
</div>
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="offline-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">80</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{1}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-title">
|
||||
@ -268,14 +269,14 @@
|
||||
<div class="online-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "正常" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">70</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{7}}</div>
|
||||
</div>
|
||||
<div class="line-status">
|
||||
<div style="display:flex">
|
||||
<div class="offline-label" />
|
||||
<div style="font-size:18px;font-weight:bolder">{{ "离线" }}</div>
|
||||
</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">10</div>
|
||||
<div style="font-size:18px;margin-right: 20%;">{{3}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -288,41 +289,46 @@
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import _ from "lodash";
|
||||
import axios from "axios";
|
||||
import chinaMap from "../../../assets/map/china.json";
|
||||
import {
|
||||
getCompanyEquipNum,
|
||||
getWeeklyEquipNum,
|
||||
getMaintenanceNum,
|
||||
getWeeklyMaintenanceNum,
|
||||
getCompanyDeptNumByIndustry,
|
||||
getEquipNumByStatus,
|
||||
getCompanyDetails,
|
||||
getLatestAlarmRecord,
|
||||
getEquNumByProvince,
|
||||
getEquNumByCity,
|
||||
} from "@/api/bigscreen/overall";
|
||||
export default {
|
||||
dicts: ["equip_status", "severity_level"],
|
||||
data() {
|
||||
return {
|
||||
runList: [
|
||||
{
|
||||
company: "敬业纸业",
|
||||
equNum: 20,
|
||||
status: 0,
|
||||
waveStatus: 1,
|
||||
},
|
||||
],
|
||||
runList: [],
|
||||
echartList: [
|
||||
{
|
||||
name: "正常",
|
||||
value: "80",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: "异常",
|
||||
value: "20",
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
echartList2: [
|
||||
{
|
||||
name: "正常",
|
||||
value: "70",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
name: "异常",
|
||||
value: "30",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
totalEquNum: 100,
|
||||
totalLineNum: 100,
|
||||
totalEquNum: 0,
|
||||
totalLineNum: 0,
|
||||
eqpLineNum: [
|
||||
{
|
||||
name: "运行中",
|
||||
@ -407,213 +413,318 @@ export default {
|
||||
series: [],
|
||||
showPanel: false,
|
||||
firstMark: false,
|
||||
maintenTotal: 0,
|
||||
industryTotal: 0,
|
||||
provinceName: "",
|
||||
eqpNums: 0,
|
||||
cityEquNumList: [
|
||||
{
|
||||
name: "济南市",
|
||||
value: 40,
|
||||
},
|
||||
{
|
||||
name: "青岛市",
|
||||
value: 50,
|
||||
},
|
||||
],
|
||||
provinceName: [],
|
||||
loading1: false,
|
||||
loading2: false,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.initLineChart();
|
||||
this.initEquNumChart();
|
||||
this.initChart1();
|
||||
// this.initChart2();
|
||||
// this.initChart3();
|
||||
// this.initChart4();
|
||||
this.initChart5();
|
||||
// this.initChart6();
|
||||
// this.initMapChart();
|
||||
// const data = JSON.parse(chinaMap);
|
||||
// const data = chinaMap.features; //过滤得到坐标信息
|
||||
// console.log(
|
||||
// "999:",
|
||||
// data.filter((data) => {
|
||||
// if (data.properties.name === "北京市") return data;
|
||||
// })
|
||||
// );
|
||||
this.getEquipInfo();
|
||||
this.getMaintenanceInfo();
|
||||
this.getFaultInfo();
|
||||
this.getIndustryInfo();
|
||||
this.getAlarmRecord();
|
||||
this.getHYMaintenanceInfo();
|
||||
this.getCompanyDetailsInfo();
|
||||
this.mapRender();
|
||||
},
|
||||
created() {
|
||||
document.addEventListener("click", (event) => {
|
||||
console.log("event:", event);
|
||||
var popup = document.getElementById("popPanel");
|
||||
console.log("pop:", popup);
|
||||
console.log("aaaa:", popup.contains(event.target));
|
||||
if (this.firstMark) {
|
||||
this.showPanel = true;
|
||||
this.firstMark = false;
|
||||
} else {
|
||||
var isOut = popup.contains(event.target);
|
||||
this.showPanel = isOut && this.showPanel;
|
||||
}
|
||||
});
|
||||
// document.addEventListener("click", (event) => {
|
||||
// var popup = document.getElementById("popPanel");
|
||||
// if (this.firstMark) {
|
||||
// this.showPanel = true;
|
||||
// this.firstMark = false;
|
||||
// } else {
|
||||
// var isOut = popup.contains(event.target);
|
||||
// this.showPanel = isOut && this.showPanel;
|
||||
// }
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
closePanel() {
|
||||
this.showPanel = false;
|
||||
},
|
||||
getAlarmRecord() {
|
||||
this.loading2 = true;
|
||||
getLatestAlarmRecord().then((res) => {
|
||||
this.alarmList = res.data;
|
||||
this.loading2 = false;
|
||||
});
|
||||
},
|
||||
getCompanyDetailsInfo() {
|
||||
getCompanyDetails().then((res) => {
|
||||
const data = res.data;
|
||||
data.forEach((e) => {
|
||||
this.totalEquNum += e.equipNum;
|
||||
this.totalLineNum += e.lineNum;
|
||||
});
|
||||
this.initLineChart();
|
||||
this.initEquNumChart();
|
||||
});
|
||||
},
|
||||
getHYMaintenanceInfo() {
|
||||
let chart5 = echarts.init(this.$refs.chart5);
|
||||
chart5.showLoading();
|
||||
getWeeklyMaintenanceNum().then((res) => {
|
||||
const data = res.data;
|
||||
this.initChart5(data);
|
||||
});
|
||||
},
|
||||
getIndustryInfo() {
|
||||
getCompanyDeptNumByIndustry().then((res) => {
|
||||
this.industryInfo = [];
|
||||
const data = res.data;
|
||||
this.industryTotal = data[0].total;
|
||||
data.forEach((element) => {
|
||||
this.industryInfo.push({
|
||||
name:
|
||||
element.status == 0
|
||||
? "造纸行业"
|
||||
: element.status == 1
|
||||
? "炼金行业"
|
||||
: "其他行业",
|
||||
value: element.data,
|
||||
rate: element.rate,
|
||||
status: element.status,
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
getMaintenanceInfo() {
|
||||
getMaintenanceNum().then((res) => {
|
||||
const data = res.data;
|
||||
this.maintenTotal = data[0].total;
|
||||
this.maintenList = data.slice(0, 4);
|
||||
});
|
||||
},
|
||||
getFaultInfo() {
|
||||
let chart1 = echarts.init(this.$refs.chart1);
|
||||
chart1.showLoading();
|
||||
getWeeklyEquipNum().then((res) => {
|
||||
this.initChart1(res.data);
|
||||
});
|
||||
},
|
||||
getEquipInfo() {
|
||||
this.loading1 = true;
|
||||
getCompanyEquipNum().then((res) => {
|
||||
const list = res.data;
|
||||
if (list != null && list.length != 0) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
this.runList.push({
|
||||
company: list[i].deptName,
|
||||
equNum: list[i].data,
|
||||
status: this.getRandomBinary(),
|
||||
waveStatus: this.getRandomBinary(),
|
||||
});
|
||||
}
|
||||
}
|
||||
this.loading1 = false;
|
||||
});
|
||||
},
|
||||
getRandomBinary() {
|
||||
return Math.round(Math.random());
|
||||
},
|
||||
mapRender() {
|
||||
const _this = this;
|
||||
echarts.registerMap("china", { geoJSON: chinaMap });
|
||||
this.myChart = echarts.init(document.getElementById("mapChart"));
|
||||
let data = [
|
||||
{ name: "上海", value: 100 },
|
||||
{ name: "武汉", value: 90 },
|
||||
];
|
||||
let geoCoordMap = {
|
||||
//可以在地图上显示的城市的坐标信息
|
||||
武汉: [114.31, 30.52],
|
||||
上海: [121.4648, 31.2891],
|
||||
};
|
||||
let convertData = function (data) {
|
||||
//返回[{coord: 极坐标},{coord: 极坐标}]
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
num: data[i].value,
|
||||
|
||||
getEquNumByProvince().then((res) => {
|
||||
let showdata = [];
|
||||
let provinceData = res.data;
|
||||
if (provinceData != null && provinceData.length > 0) {
|
||||
let mapData = chinaMap.features;
|
||||
provinceData.forEach((e) => {
|
||||
let selectData = mapData.filter(
|
||||
(md) => md.properties.name === e.deptName
|
||||
);
|
||||
showdata.push({
|
||||
name: e.deptName,
|
||||
value: selectData[0].properties.center,
|
||||
num: e.data,
|
||||
});
|
||||
}
|
||||
this.provinceName.push(e.deptName);
|
||||
// console.log("selectData:", selectData);
|
||||
// console.log("showdata:", showdata);
|
||||
});
|
||||
}
|
||||
return res;
|
||||
};
|
||||
_this.series.push([
|
||||
{
|
||||
name: "项目分布",
|
||||
type: "scatter",
|
||||
roam: true, // 可缩放
|
||||
// geoIndex: 'geoMap',
|
||||
z: 2,
|
||||
coordinateSystem: "geo",
|
||||
symbolSize: 50, //点的大小
|
||||
symbol: "pin",
|
||||
color: "red",
|
||||
showEffectOn: "render",
|
||||
effectType: "ripple",
|
||||
rippleEffect: {
|
||||
period: 5,
|
||||
scale: 10,
|
||||
brushType: "stroke",
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: (params) => {
|
||||
return params.data.num;
|
||||
|
||||
// let data = [
|
||||
// { name: "上海", value: 100 },
|
||||
// { name: "武汉", value: 90 },
|
||||
// ];
|
||||
// let geoCoordMap = {
|
||||
// //可以在地图上显示的城市的坐标信息
|
||||
// 武汉: [114.31, 30.52],
|
||||
// 上海: [121.4648, 31.2891],
|
||||
// };
|
||||
// let convertData = function (data) {
|
||||
// //返回[{coord: 极坐标},{coord: 极坐标}]
|
||||
// var res = [];
|
||||
// for (var i = 0; i < data.length; i++) {
|
||||
// var geoCoord = geoCoordMap[data[i].name];
|
||||
// if (geoCoord) {
|
||||
// res.push({
|
||||
// name: data[i].name,
|
||||
// value: geoCoord.concat(data[i].value),
|
||||
// num: data[i].value,
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// return res;
|
||||
// };
|
||||
_this.series.push([
|
||||
{
|
||||
name: "项目分布",
|
||||
type: "scatter",
|
||||
roam: true, // 可缩放
|
||||
// geoIndex: 'geoMap',
|
||||
z: 2,
|
||||
coordinateSystem: "geo",
|
||||
symbolSize: 50, //点的大小
|
||||
symbol: "pin",
|
||||
color: "red",
|
||||
showEffectOn: "render",
|
||||
effectType: "ripple",
|
||||
rippleEffect: {
|
||||
period: 5,
|
||||
scale: 10,
|
||||
brushType: "stroke",
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: (params) => {
|
||||
return params.data.num;
|
||||
},
|
||||
show: true,
|
||||
color: "#fff",
|
||||
borderRadius: 24,
|
||||
padding: 4,
|
||||
width: 16,
|
||||
lineHeight: 16,
|
||||
align: "center",
|
||||
},
|
||||
show: true,
|
||||
color: "#fff",
|
||||
borderRadius: 24,
|
||||
padding: 4,
|
||||
width: 16,
|
||||
lineHeight: 16,
|
||||
align: "center",
|
||||
},
|
||||
itemStyle: {
|
||||
borderType: "solid",
|
||||
borderColor: "#fff",
|
||||
},
|
||||
data: showdata,
|
||||
},
|
||||
]);
|
||||
// 指定相关的配置项和数据
|
||||
let mapBoxOption = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: function (params) {
|
||||
return params.name;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderType: "solid",
|
||||
borderColor: "#fff",
|
||||
},
|
||||
data: convertData(data),
|
||||
},
|
||||
]);
|
||||
// 指定相关的配置项和数据
|
||||
let mapBoxOption = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: function (params) {
|
||||
return params.name;
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: "china",
|
||||
id: "geoMap",
|
||||
roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
|
||||
zoom: 1.5,
|
||||
top: "20%",
|
||||
label: {
|
||||
normal: {
|
||||
show: true, //是否显示省份
|
||||
textStyle: {
|
||||
color: "#00a0c9",
|
||||
size: "8",
|
||||
geo: {
|
||||
map: "china",
|
||||
id: "geoMap",
|
||||
roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
|
||||
zoom: 1.5,
|
||||
top: "20%",
|
||||
label: {
|
||||
normal: {
|
||||
show: true, //是否显示省份
|
||||
textStyle: {
|
||||
color: "#00a0c9",
|
||||
size: "8",
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
// 对应的鼠标悬浮效果
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "blue",
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "rgba(147, 235, 248, 1)", //#D79D3D
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 235, 248, .2)",
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(128, 217, 248, 1)",
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 30,
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
// 对应的鼠标悬浮效果
|
||||
show: true,
|
||||
textStyle: {
|
||||
// 鼠标划入省份的样式
|
||||
itemStyle: {
|
||||
areaColor: "#389BB7",
|
||||
},
|
||||
label: {
|
||||
color: "blue",
|
||||
},
|
||||
},
|
||||
animation: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "rgba(147, 235, 248, 1)", //#D79D3D
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 235, 248, .2)",
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(128, 217, 248, 1)",
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 30,
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
// 鼠标划入省份的样式
|
||||
itemStyle: {
|
||||
areaColor: "#389BB7",
|
||||
},
|
||||
label: {
|
||||
color: "blue",
|
||||
},
|
||||
},
|
||||
animation: false,
|
||||
},
|
||||
series: _this.series[0],
|
||||
};
|
||||
this.myChart.setOption(mapBoxOption);
|
||||
|
||||
// this.myChart.off("click");
|
||||
series: _this.series[0],
|
||||
};
|
||||
this.myChart.setOption(mapBoxOption);
|
||||
});
|
||||
this.myChart.on("click", (e) => {
|
||||
console.log("charts:", e);
|
||||
this.showPanel = true;
|
||||
this.firstMark = true;
|
||||
let dx = e.event.offsetX;
|
||||
let dy = e.event.offsetY;
|
||||
var panel = document.getElementById("popPanel");
|
||||
panel.style.left = dx + "px";
|
||||
panel.style.top = dy + "px";
|
||||
// panel.css("left", dx + 30);
|
||||
// $(".mainPanel").css("top", dy - 130);
|
||||
if (this.provinceName.includes(e.name)) {
|
||||
console.log("ddd:", e);
|
||||
this.cityEquNumList = [];
|
||||
//获取该省的列表
|
||||
this.showPanel = true;
|
||||
this.firstMark = true;
|
||||
let dx = e.event.offsetX;
|
||||
let dy = e.event.offsetY;
|
||||
var panel = document.getElementById("popPanel");
|
||||
panel.style.left = dx + "px";
|
||||
panel.style.top = dy + "px";
|
||||
getEquNumByCity(e.name).then((res) => {
|
||||
let citydata = res.data;
|
||||
citydata.forEach((e) => {
|
||||
this.cityEquNumList.push({
|
||||
name: e.regionName,
|
||||
value: e.data,
|
||||
});
|
||||
this.eqpNums += e.data;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// fixingPositon() {
|
||||
// const e = event || window.event,
|
||||
// top = e.clientY,
|
||||
// left = e.clientX,
|
||||
// boxDom = document.querySelector(".mainPanel");
|
||||
|
||||
// this.$nextTick(function () {
|
||||
// const offsetX = boxDom.clientWidth;
|
||||
// const offsetY = boxDom.clientHeight;
|
||||
// boxDom.style.cssText = `top: ${top - offsetY - 25}px; left: ${
|
||||
// left + offsetX / 3
|
||||
// }px`;
|
||||
// });
|
||||
// },
|
||||
initMapChart() {
|
||||
echarts.registerMap("china", { geoJSON: chinaMap });
|
||||
let myChart = echarts.init(document.getElementById("mapChart"));
|
||||
@ -803,7 +914,7 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
initChart1() {
|
||||
initChart1(data) {
|
||||
let p = new Promise((resolve) => {
|
||||
resolve();
|
||||
});
|
||||
@ -812,7 +923,7 @@ export default {
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.lines,
|
||||
data: data[0].x,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
@ -876,16 +987,16 @@ export default {
|
||||
series: [
|
||||
{
|
||||
name: "运行",
|
||||
data: [0, 1, 2, 3],
|
||||
data: data[0].y,
|
||||
type: "bar",
|
||||
barGap: 0,
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#87E50D" },
|
||||
{ offset: 0.5, color: "#AAE65C" },
|
||||
{ offset: 1, color: "#90F908" },
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "#4F0303" },
|
||||
{ offset: 0.5, color: "#AD2424" },
|
||||
{ offset: 1, color: "#4F0303" },
|
||||
]),
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
@ -902,15 +1013,15 @@ export default {
|
||||
},
|
||||
{
|
||||
name: "保养维修",
|
||||
data: [2, 3, 1, 3],
|
||||
data: data[1].y,
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#83bff6" },
|
||||
{ offset: 0.5, color: "#188df0" },
|
||||
{ offset: 1, color: "#188df0" },
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "#0344B3" },
|
||||
{ offset: 0.5, color: "#8FB4F4" },
|
||||
{ offset: 1, color: "#0344B3" },
|
||||
]),
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
@ -926,16 +1037,16 @@ export default {
|
||||
barWidth: "30%",
|
||||
},
|
||||
{
|
||||
name: "停止",
|
||||
data: [7, 1, 5, 6],
|
||||
name: "停机",
|
||||
data: data[2].y,
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#ED9C81" },
|
||||
{ offset: 0.5, color: "#EC5623" },
|
||||
{ offset: 1, color: "#FD9E7E" },
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "#4A8F03" },
|
||||
{ offset: 0.5, color: "#ABEE67" },
|
||||
{ offset: 1, color: "#4A8F03" },
|
||||
]),
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
@ -953,6 +1064,7 @@ export default {
|
||||
],
|
||||
};
|
||||
this.chart1.setOption(option);
|
||||
this.chart1.hideLoading();
|
||||
});
|
||||
},
|
||||
initChart2(data) {
|
||||
@ -1228,7 +1340,7 @@ export default {
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["7-11", "7-12", "7-13"],
|
||||
data: data[0].x,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
@ -1271,32 +1383,22 @@ export default {
|
||||
y2: 25,
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
data: [1, 2, 3],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle", //折线点设置为实心点
|
||||
symbolSize: 2, //折线点的大小
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff", //折线点的颜色
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2, //波形图波浪的边框
|
||||
borderWidth: 2,
|
||||
color: "#0E9CFF",
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#80AEDD",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [],
|
||||
};
|
||||
var legendData = [];
|
||||
if (data.length > 0) {
|
||||
data.forEach((element) => {
|
||||
option.series.push({
|
||||
name: element.deptName,
|
||||
data: element.y,
|
||||
type: "line",
|
||||
});
|
||||
legendData.push(element.deptName);
|
||||
});
|
||||
option.legend = { data: legendData };
|
||||
}
|
||||
this.chart5.setOption(option);
|
||||
this.chart5.hideLoading();
|
||||
});
|
||||
},
|
||||
initChart6(data) {
|
||||
@ -1987,7 +2089,7 @@ export default {
|
||||
grid-template-columns: 40% 60%;
|
||||
.run-status-des-container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
// grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
.run-status-des {
|
||||
display: grid;
|
||||
@ -2055,7 +2157,7 @@ export default {
|
||||
&.alarm-lists {
|
||||
::v-deep .el-table {
|
||||
font-size: 12px;
|
||||
font-weight: lighter;
|
||||
font-weight: border;
|
||||
.cell {
|
||||
padding: 2px 0;
|
||||
text-align: center;
|
||||
@ -2063,7 +2165,7 @@ export default {
|
||||
th.el-table__cell.is-leaf,
|
||||
td.el-table__cell {
|
||||
padding: 0;
|
||||
height: 20px;
|
||||
height: 50px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-table__header-wrapper th,
|
||||
@ -2186,8 +2288,9 @@ export default {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.contentPanel {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
// display: grid;
|
||||
// grid-template-rows: 1fr 1fr;
|
||||
display: flex;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
@ -446,16 +446,6 @@ import { getToken } from "@/utils/auth";
|
||||
import { Loading } from "element-ui";
|
||||
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
|
||||
import { deptTreeSelect } from "@/api/system/user";
|
||||
|
||||
import {
|
||||
getCompanyEquipNum,
|
||||
getWeeklyEquipNum,
|
||||
getMaintenanceNum,
|
||||
getWeeklyMaintenanceNum,
|
||||
getCompanyDeptNumByIndustry,
|
||||
getEquipNumByStatus,
|
||||
getCompanyDetails,
|
||||
} from "@/api/bigscreen/overall";
|
||||
export default {
|
||||
name: "Category",
|
||||
components: {
|
||||
@ -582,10 +572,6 @@ export default {
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDeptTree();
|
||||
//测试
|
||||
getCompanyDetails().then((response) => {
|
||||
console.log("data:", response.data);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询部门下拉树结构 */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user