公司大屏数据接口对接
This commit is contained in:
parent
3993712be7
commit
a01331dc43
@ -70,4 +70,9 @@ public class CompanyDashboardController {
|
||||
public AjaxResult countSparePartsNumByCompany(@PathVariable Long deptId) {
|
||||
return AjaxResult.success(factoryDashboardService.countSparePartsNumByCompanyId(deptId));
|
||||
}
|
||||
|
||||
@GetMapping("/companyDeptTree")
|
||||
public AjaxResult companyDeptTree() {
|
||||
return AjaxResult.success(factoryDashboardService.selectCompanyDeptTreeList());
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,6 +62,6 @@ public class FactoryDashboardController {
|
||||
|
||||
@GetMapping("/factoryDeptTree")
|
||||
public AjaxResult factoryDeptTree() {
|
||||
return AjaxResult.success(factoryDashboardService.selectCompanyDeptTreeList(null));
|
||||
return AjaxResult.success(factoryDashboardService.selectFactoryDeptTreeList(null));
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,6 +24,8 @@ public class CompanyDashboardDTO {
|
||||
|
||||
private String time;
|
||||
|
||||
private String rate;
|
||||
|
||||
private List<String> x;
|
||||
|
||||
private List<Object> y;
|
||||
|
||||
@ -2,6 +2,7 @@ package com.inspur.bigscreen.service;
|
||||
|
||||
import com.inspur.bigscreen.dto.CompanyDashboardDTO;
|
||||
import com.inspur.bigscreen.dto.FactoryDashboardDTO;
|
||||
import com.inspur.common.core.domain.TreeSelect;
|
||||
import com.inspur.industrial.domain.IpcAlarmRecord;
|
||||
import org.apache.ibatis.annotations.Param;
|
||||
|
||||
@ -64,4 +65,9 @@ public interface ICompanyDashboardService {
|
||||
* 统计备品备件数据
|
||||
*/
|
||||
public CompanyDashboardDTO countSparePartsNumByCompanyId(Long deptId);
|
||||
|
||||
/**
|
||||
* 获取公司部门列表
|
||||
*/
|
||||
public List<TreeSelect> selectCompanyDeptTreeList();
|
||||
}
|
||||
|
||||
@ -57,5 +57,5 @@ public interface IFactoryDashboardService {
|
||||
/**
|
||||
* 获取厂区部门列表
|
||||
*/
|
||||
public List<TreeSelect> selectCompanyDeptTreeList(Long deptId);
|
||||
public List<TreeSelect> selectFactoryDeptTreeList(Long deptId);
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import com.inspur.bigscreen.constant.EquipInfoStatus;
|
||||
import com.inspur.bigscreen.dto.CompanyDashboardDTO;
|
||||
import com.inspur.bigscreen.mapper.CompanyDashboardMapper;
|
||||
import com.inspur.bigscreen.service.ICompanyDashboardService;
|
||||
import com.inspur.common.core.domain.TreeSelect;
|
||||
import com.inspur.common.core.domain.entity.SysDept;
|
||||
import com.inspur.industrial.domain.IpcAlarmRecord;
|
||||
import com.inspur.industrial.service.IIpcAlarmRecordService;
|
||||
@ -11,6 +12,7 @@ import com.inspur.spareparts.mapper.IpcSparePartsInboundMapper;
|
||||
import com.inspur.spareparts.mapper.IpcSparePartsInfoMapper;
|
||||
import com.inspur.spareparts.mapper.IpcSparePartsOutboundMapper;
|
||||
import com.inspur.system.mapper.SysDeptMapper;
|
||||
import com.inspur.system.service.ISysDeptService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
@ -45,6 +47,9 @@ public class CompanyDashboardServiceImpl implements ICompanyDashboardService {
|
||||
@Autowired
|
||||
private IpcSparePartsOutboundMapper ipcSparePartsOutboundMapper;
|
||||
|
||||
@Autowired
|
||||
private ISysDeptService sysDeptService;
|
||||
|
||||
/**
|
||||
* 统计不同状态公司设备数
|
||||
*/
|
||||
@ -53,6 +58,10 @@ public class CompanyDashboardServiceImpl implements ICompanyDashboardService {
|
||||
CompanyDashboardDTO runData = companyDashboardMapper.countDiffStatusCompanyEquipNumByDeptId(deptId, EquipInfoStatus.RUNNING);
|
||||
CompanyDashboardDTO stopData = companyDashboardMapper.countDiffStatusCompanyEquipNumByDeptId(deptId, EquipInfoStatus.STOP);
|
||||
CompanyDashboardDTO maintainData = companyDashboardMapper.countDiffStatusCompanyEquipNumByDeptId(deptId, EquipInfoStatus.MAINTENANCE);
|
||||
int sum = runData.getData() + stopData.getData() + maintainData.getData();
|
||||
runData.setRate(sum == 0 ? "0%" : String.valueOf((runData.getData() * 100 / sum) + "%"));
|
||||
stopData.setRate(sum == 0 ? "0%" : String.valueOf((stopData.getData() * 100 / sum) + "%"));
|
||||
maintainData.setRate(sum == 0 ? "0%" : String.valueOf((maintainData.getData() * 100 / sum) + "%"));
|
||||
resultList.add(runData);
|
||||
resultList.add(stopData);
|
||||
resultList.add(maintainData);
|
||||
@ -136,15 +145,15 @@ public class CompanyDashboardServiceImpl implements ICompanyDashboardService {
|
||||
public List<CompanyDashboardDTO> countPatrolRecordNumByCompanyDeptId(Long deptId){
|
||||
List<CompanyDashboardDTO> resultList = new ArrayList<>();
|
||||
//根据公司id查询各个厂区id
|
||||
List<SysDept> factoryDeptList = getFactoryDeptListByCompanyId(deptId);
|
||||
for (SysDept sysDept : factoryDeptList) {
|
||||
List<CompanyDashboardDTO> companyDashboardDTOs = getPatrolRecordNumByHalfYear(sysDept.getDeptId());
|
||||
companyDashboardDTOs.get(0).setDeptId(sysDept.getDeptId());
|
||||
companyDashboardDTOs.get(0).setDeptName(sysDept.getDeptName());
|
||||
companyDashboardDTOs.get(1).setDeptId(sysDept.getDeptId());
|
||||
companyDashboardDTOs.get(1).setDeptName(sysDept.getDeptName());
|
||||
// List<SysDept> factoryDeptList = getFactoryDeptListByCompanyId(deptId);
|
||||
// for (SysDept sysDept : factoryDeptList) {
|
||||
List<CompanyDashboardDTO> companyDashboardDTOs = getPatrolRecordNumByHalfYear(deptId);
|
||||
// companyDashboardDTOs.get(0).setDeptId(sysDept.getDeptId());
|
||||
// companyDashboardDTOs.get(0).setDeptName(sysDept.getDeptName());
|
||||
// companyDashboardDTOs.get(1).setDeptId(sysDept.getDeptId());
|
||||
// companyDashboardDTOs.get(1).setDeptName(sysDept.getDeptName());
|
||||
resultList.addAll(companyDashboardDTOs);
|
||||
}
|
||||
// }
|
||||
return resultList;
|
||||
}
|
||||
|
||||
@ -152,7 +161,12 @@ public class CompanyDashboardServiceImpl implements ICompanyDashboardService {
|
||||
* 根据公司id统计报警数量
|
||||
*/
|
||||
public List<CompanyDashboardDTO> countAlarmNumByCompanyId(Long deptId){
|
||||
return companyDashboardMapper.countAlarmNumByCompanyId(deptId);
|
||||
List<CompanyDashboardDTO> dataList = companyDashboardMapper.countAlarmNumByCompanyId(deptId);
|
||||
int sum = dataList.stream().mapToInt(CompanyDashboardDTO::getData).sum();
|
||||
dataList.forEach(data -> {
|
||||
data.setRate(sum == 0 ? "0%" : String.valueOf((data.getData() * 100 / sum) + "%"));
|
||||
});
|
||||
return dataList;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -204,6 +218,16 @@ public class CompanyDashboardServiceImpl implements ICompanyDashboardService {
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取公司部门列表
|
||||
*/
|
||||
@Override
|
||||
public List<TreeSelect> selectCompanyDeptTreeList(){
|
||||
List<SysDept> depts = sysDeptService.selectDeptList(new SysDept());
|
||||
List<SysDept> companyDepts = depts.stream().filter(dept -> dept.getAncestors().split(",").length < 3).collect(Collectors.toList());
|
||||
return sysDeptService.buildDeptTreeSelect(companyDepts);
|
||||
}
|
||||
|
||||
/**
|
||||
* 通过公司id获取厂区部门信息
|
||||
*/
|
||||
|
||||
@ -153,7 +153,7 @@ public class FactoryDashboardServiceImpl implements IFactoryDashboardService {
|
||||
* 获取厂区部门列表
|
||||
*/
|
||||
@Override
|
||||
public List<TreeSelect> selectCompanyDeptTreeList(Long deptId){
|
||||
public List<TreeSelect> selectFactoryDeptTreeList(Long deptId){
|
||||
List<SysDept> depts = sysDeptService.selectDeptList(new SysDept());
|
||||
List<SysDept> factoryDepts = depts.stream().filter(dept -> dept.getAncestors().split(",").length < 4).collect(Collectors.toList());
|
||||
return sysDeptService.buildDeptTreeSelect(factoryDepts);
|
||||
@ -161,7 +161,7 @@ public class FactoryDashboardServiceImpl implements IFactoryDashboardService {
|
||||
|
||||
private FactoryDashboardDTO convertFactoryDashboardData(List<FactoryDashboardDTO> list){
|
||||
FactoryDashboardDTO data = new FactoryDashboardDTO();
|
||||
if(list.get(0) != null) {
|
||||
if(list.size() > 0) {
|
||||
data.setStatus(list.get(0).getStatus());
|
||||
}
|
||||
data.setX(list.stream().map(FactoryDashboardDTO::getDeptName).collect(Collectors.toList()));
|
||||
|
||||
@ -79,3 +79,11 @@ export function getSparePartsNumByCompany(deptId) {
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
//获取厂区部门树
|
||||
export function getCompanyDeptTree() {
|
||||
return request({
|
||||
url: "/bigscreen/company/companyDeptTree",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
@ -8,7 +8,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;">{{equipTotalNum}}</span>
|
||||
<span>{{"设备总数"}}</span>
|
||||
</div>
|
||||
<div class="run-status-des-container">
|
||||
@ -46,9 +46,15 @@
|
||||
</div>
|
||||
<div class="company-column">
|
||||
<div class="main-bg">
|
||||
<el-cascader
|
||||
v-model="value"
|
||||
:options="options"
|
||||
style="border:none;width:20%"
|
||||
@change="handleCompanyChange"
|
||||
></el-cascader>
|
||||
<div
|
||||
id="mapChart"
|
||||
:style="{ height: height }"
|
||||
:style="{ height: height,border:'none' }"
|
||||
></div>
|
||||
<div
|
||||
id="popPanel"
|
||||
@ -88,36 +94,33 @@
|
||||
<div class="item-content alarm-lists">
|
||||
<el-table
|
||||
:data="alarmList"
|
||||
v-loading="loading"
|
||||
:row-style="{height:'50px'}"
|
||||
style="width: 100%; height: 100%; overflow-y: hidden"
|
||||
>
|
||||
<el-table-column
|
||||
prop="equipName"
|
||||
prop="equipInfo.equipName"
|
||||
label="设备名称"
|
||||
align="left"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="equipStatus"
|
||||
prop="status"
|
||||
label="状态"
|
||||
width="60"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.equip_status"
|
||||
:value="scope.row.equipStatus"
|
||||
:value="scope.row.status"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="level"
|
||||
label="严重等级"
|
||||
width="80"
|
||||
prop="alarmValue"
|
||||
label="报警值"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
:options="dict.type.severity_level"
|
||||
:value="scope.row.level"
|
||||
/>
|
||||
<span style="color:red;">{{ scope.row.alarmValue }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@ -134,7 +137,7 @@
|
||||
<div class="item-title">预警信息总览</div>
|
||||
<div class="item-content run-status">
|
||||
<div class="alarm-list-out">
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{50}}</span>
|
||||
<span style=" font-family: 'BIAOTI';font-size:25px;">{{totalAlarmNum}}</span>
|
||||
<span>{{"报警总数"}}</span>
|
||||
</div>
|
||||
<div class="alarm-status-des-container">
|
||||
@ -152,7 +155,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="equ-item">
|
||||
<div class="item-title">厂区巡检工单任务变化</div>
|
||||
<div class="item-title">厂区保养工单任务变化</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
ref="chart5"
|
||||
@ -179,9 +182,28 @@ import * as echarts from "echarts";
|
||||
import _ from "lodash";
|
||||
import axios from "axios";
|
||||
import chinaMap from "../../../assets/map/china.json";
|
||||
import {
|
||||
getEquipNumByCompany,
|
||||
getEquipNumByDiffCompany,
|
||||
getWeeklyEquipNumByCompany,
|
||||
getHYMaintenanceRecordNumByCompany,
|
||||
getHYUpkeepRecordNumByCompany,
|
||||
getHYPatrolRecordNumByCompany,
|
||||
getAlarmNumByCompany,
|
||||
getCompanyLatestAlarmRecord,
|
||||
getWeeklyAlarmNumByCompany,
|
||||
getSparePartsNumByCompany,
|
||||
getCompanyDeptTree,
|
||||
} from "@/api/bigscreen/company";
|
||||
export default {
|
||||
dicts: ["equip_status", "severity_level"],
|
||||
data() {
|
||||
return {
|
||||
value: [100, 101],
|
||||
selectedDeptId: 101,
|
||||
options: [],
|
||||
equipTotalNum: 0,
|
||||
totalAlarmNum: 0,
|
||||
echartList: [
|
||||
{
|
||||
name: "产线1",
|
||||
@ -233,29 +255,142 @@ export default {
|
||||
myChart: "",
|
||||
series: [],
|
||||
showPanel: false,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
// this.initChart();
|
||||
this.initChart1();
|
||||
this.initChart2();
|
||||
this.initChart3();
|
||||
// this.initChart4();
|
||||
this.initChart5();
|
||||
this.initChart6();
|
||||
// this.initMapChart();
|
||||
// const data = JSON.parse(chinaMap);
|
||||
// const data = chinaMap.features; //过滤得到坐标信息
|
||||
const data = chinaMap.features;
|
||||
console.log("data:", data);
|
||||
// console.log(
|
||||
// "999:",
|
||||
// data.filter((data) => {
|
||||
// if (data.properties.name === "北京市") return data;
|
||||
// })
|
||||
// "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();
|
||||
this.getWeeklyCompanyEquNum();
|
||||
this.getMaintenanceRecord();
|
||||
this.getAlarmRecordList();
|
||||
this.getAlarmData();
|
||||
this.getUpkeepRecord();
|
||||
this.getWeeklyAlarmNum();
|
||||
this.mapRender();
|
||||
},
|
||||
methods: {
|
||||
getWeeklyAlarmNum() {
|
||||
let chart6 = echarts.init(this.$refs.chart6);
|
||||
chart6.showLoading();
|
||||
getWeeklyAlarmNumByCompany(this.selectedDeptId).then((res) => {
|
||||
const data = res.data;
|
||||
this.initChart6(data);
|
||||
});
|
||||
},
|
||||
getUpkeepRecord() {
|
||||
let chart5 = echarts.init(this.$refs.chart5);
|
||||
chart5.showLoading();
|
||||
getHYUpkeepRecordNumByCompany(this.selectedDeptId).then((res) => {
|
||||
const data = res.data;
|
||||
this.initChart5(data);
|
||||
});
|
||||
},
|
||||
getAlarmData() {
|
||||
getAlarmNumByCompany(this.selectedDeptId).then((res) => {
|
||||
this.alarmNum = [];
|
||||
const data = res.data;
|
||||
if (data != null || data.length != 0) {
|
||||
data.forEach((e) => {
|
||||
this.totalAlarmNum += e.data;
|
||||
if (e.status === 0) {
|
||||
this.alarmNum.push({
|
||||
name: "未处理",
|
||||
status: e.status,
|
||||
value: e.data,
|
||||
rate: e.rate,
|
||||
});
|
||||
} else {
|
||||
this.alarmNum.push({
|
||||
name: "已处理",
|
||||
status: e.status,
|
||||
value: e.data,
|
||||
rate: e.rate,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// this.initChart3(data);
|
||||
});
|
||||
},
|
||||
getAlarmRecordList() {
|
||||
this.loading = true;
|
||||
getCompanyLatestAlarmRecord(this.selectedDeptId).then((res) => {
|
||||
this.alarmList = res.data;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getMaintenanceRecord() {
|
||||
let chart3 = echarts.init(this.$refs.chart3);
|
||||
chart3.showLoading();
|
||||
getHYMaintenanceRecordNumByCompany(this.selectedDeptId).then((res) => {
|
||||
const data = res.data;
|
||||
this.initChart3(data);
|
||||
});
|
||||
},
|
||||
getWeeklyCompanyEquNum() {
|
||||
let chart2 = echarts.init(this.$refs.chart2);
|
||||
chart2.showLoading();
|
||||
getWeeklyEquipNumByCompany(this.selectedDeptId).then((res) => {
|
||||
const data = res.data;
|
||||
this.initChart2(data);
|
||||
});
|
||||
},
|
||||
getPatrolRecordNum() {
|
||||
let chart1 = echarts.init(this.$refs.chart1);
|
||||
chart1.showLoading();
|
||||
getHYPatrolRecordNumByCompany(this.selectedDeptId).then((res) => {
|
||||
const data = res.data;
|
||||
this.initChart1(data);
|
||||
});
|
||||
},
|
||||
getCompanyEquNum() {
|
||||
this.eqpLineNum = [];
|
||||
getEquipNumByCompany(this.selectedDeptId).then((res) => {
|
||||
const data = res.data;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.equipTotalNum += data[i].data;
|
||||
this.eqpLineNum.push({
|
||||
status: data[i].status,
|
||||
value: data[i].data,
|
||||
rate: data[i].rate,
|
||||
});
|
||||
switch (data[i].status) {
|
||||
case 0:
|
||||
this.eqpLineNum[i].name = "运行中";
|
||||
break;
|
||||
case 1:
|
||||
this.eqpLineNum[i].name = "维修保养";
|
||||
break;
|
||||
case 2:
|
||||
this.eqpLineNum[i].name = "停机";
|
||||
break;
|
||||
default:
|
||||
this.eqpLineNum[i].name = "其它";
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getDeptTree() {
|
||||
getCompanyDeptTree().then((res) => {
|
||||
this.options = res.data;
|
||||
});
|
||||
},
|
||||
handleCompanyChange(dept) {
|
||||
this.selectedDeptId = _.last(dept);
|
||||
},
|
||||
mapRender() {
|
||||
const _this = this;
|
||||
// let mapDom = document.querySelector(".map-wrapper");
|
||||
@ -600,7 +735,7 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
initChart1() {
|
||||
initChart1(data) {
|
||||
let p = new Promise((resolve) => {
|
||||
resolve();
|
||||
});
|
||||
@ -609,7 +744,7 @@ export default {
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.lines,
|
||||
data: data[0] != null ? data[0].x : [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
@ -672,18 +807,34 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "运行",
|
||||
data: [0, 1, 2, 3],
|
||||
name: "定期巡检",
|
||||
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, 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: "rgba(84,165,255,0.7)",
|
||||
},
|
||||
{
|
||||
offset: 0.55,
|
||||
color: "rgba(0,115,255,0.4)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(4,4,26,0.1)",
|
||||
},
|
||||
]),
|
||||
opacity: 0.8, // 透明度
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
@ -698,41 +849,25 @@ export default {
|
||||
barWidth: "30%",
|
||||
},
|
||||
{
|
||||
name: "保养维修",
|
||||
data: [2, 3, 1, 3],
|
||||
name: "专业巡检",
|
||||
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" },
|
||||
]),
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#fff",
|
||||
fontSize: 9,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(235,102,30,0.7)",
|
||||
},
|
||||
{
|
||||
offset: 0.55,
|
||||
color: "rgba(234,139,88,0.4)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(238,192,168,0.1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
barWidth: "30%",
|
||||
},
|
||||
{
|
||||
name: "停止",
|
||||
data: [7, 1, 5, 6],
|
||||
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" },
|
||||
]),
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
@ -750,6 +885,7 @@ export default {
|
||||
],
|
||||
};
|
||||
this.chart1.setOption(option);
|
||||
this.chart1.hideLoading();
|
||||
});
|
||||
},
|
||||
initChart2(data) {
|
||||
@ -759,113 +895,10 @@ export default {
|
||||
p.then(() => {
|
||||
this.chart2 = echarts.init(this.$refs.chart2);
|
||||
let option = {
|
||||
legend: {},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.lines,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
fontSize: "11",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //隐藏x轴刻度
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位：台",
|
||||
nameLocation: "end",
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
fontSize: "9",
|
||||
},
|
||||
axisLine: {
|
||||
show: false, // 必须显示!!!!!!否则name无效
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.5)",
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
type: "dashed", //虚线
|
||||
},
|
||||
show: true, //隐藏
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
x: 24,
|
||||
x2: 10,
|
||||
y: 25,
|
||||
y2: 20,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["异常故障数"],
|
||||
show: true,
|
||||
x: "right",
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
fontSize: "9",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "各产线传感器数量",
|
||||
data: [1, 2, 4, 5],
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "-250%",
|
||||
symbol:
|
||||
"path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#F81616" },
|
||||
{ offset: 0.5, color: "#EF9D9D" },
|
||||
{ offset: 1, color: "#CF0F0F" },
|
||||
]),
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#fff",
|
||||
fontSize: 9,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
barWidth: "30%",
|
||||
},
|
||||
],
|
||||
};
|
||||
this.chart2.setOption(option);
|
||||
});
|
||||
},
|
||||
initChart3(data) {
|
||||
let p = new Promise((resolve) => {
|
||||
resolve();
|
||||
});
|
||||
p.then(() => {
|
||||
this.chart3 = echarts.init(this.$refs.chart3);
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["7-11", "7-12", "7-13"],
|
||||
data: data[0] != null ? data[0].x : [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
@ -908,32 +941,92 @@ export default {
|
||||
y2: 25,
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
data: [1, 2, 3],
|
||||
series: [],
|
||||
};
|
||||
var legendData = [];
|
||||
if (data.length > 0) {
|
||||
data.forEach((element) => {
|
||||
option.series.push({
|
||||
name: element.deptName,
|
||||
data: element.y,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle", //折线点设置为实心点
|
||||
symbolSize: 2, //折线点的大小
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff", //折线点的颜色
|
||||
},
|
||||
},
|
||||
});
|
||||
legendData.push(data.deptName);
|
||||
});
|
||||
option.legend = { data: legendData };
|
||||
}
|
||||
this.chart2.setOption(option);
|
||||
this.chart2.hideLoading();
|
||||
});
|
||||
},
|
||||
initChart3(data) {
|
||||
let p = new Promise((resolve) => {
|
||||
resolve();
|
||||
});
|
||||
p.then(() => {
|
||||
this.chart3 = echarts.init(this.$refs.chart3);
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: data[0] != null ? data[0].x : [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2, //波形图波浪的边框
|
||||
borderWidth: 2,
|
||||
color: "#0E9CFF",
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
color: "#80AEDD",
|
||||
color: "#fff",
|
||||
width: 0, //这里是为了突出显示加上的
|
||||
},
|
||||
},
|
||||
],
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
fontSize: "9",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位：台",
|
||||
nameLocation: "end",
|
||||
interval: 1,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "9",
|
||||
},
|
||||
axisLine: {
|
||||
show: true, // 必须显示!!!!!!否则name无效
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
x: 40,
|
||||
x2: 4,
|
||||
y: 25,
|
||||
y2: 25,
|
||||
},
|
||||
|
||||
series: [],
|
||||
};
|
||||
var legendData = [];
|
||||
if (data.length > 0) {
|
||||
data.forEach((element) => {
|
||||
option.series.push({
|
||||
name: element.deptName,
|
||||
data: element.y,
|
||||
type: "line",
|
||||
});
|
||||
legendData.push(data.deptName);
|
||||
});
|
||||
option.legend = { data: legendData };
|
||||
}
|
||||
this.chart3.setOption(option);
|
||||
this.chart3.hideLoading();
|
||||
});
|
||||
},
|
||||
initChart4(data) {
|
||||
@ -1025,7 +1118,7 @@ export default {
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["7-11", "7-12", "7-13"],
|
||||
data: data[0] != null ? data[0].x : [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
@ -1068,32 +1161,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(data.deptName);
|
||||
});
|
||||
option.legend = { data: legendData };
|
||||
}
|
||||
this.chart5.setOption(option);
|
||||
this.chart5.hideLoading();
|
||||
});
|
||||
},
|
||||
initChart6(data) {
|
||||
@ -1105,7 +1188,7 @@ export default {
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["7-11", "7-12", "7-13"],
|
||||
data: data[0] != null ? data[0].x : [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
@ -1148,32 +1231,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(data.deptName);
|
||||
});
|
||||
option.legend = { data: legendData };
|
||||
}
|
||||
this.chart6.setOption(option);
|
||||
this.chart6.hideLoading();
|
||||
});
|
||||
},
|
||||
//预留
|
||||
|
||||
@ -164,64 +164,10 @@ export default {
|
||||
return {
|
||||
value: [100, 101, 103],
|
||||
selectedDeptId: 103,
|
||||
options: [
|
||||
{
|
||||
value: "shejiyuanze",
|
||||
label: "设计原则",
|
||||
children: [
|
||||
{
|
||||
value: "yizhi",
|
||||
label: "一致",
|
||||
},
|
||||
{
|
||||
value: "fankui",
|
||||
label: "反馈",
|
||||
},
|
||||
{
|
||||
value: "xiaolv",
|
||||
label: "效率",
|
||||
},
|
||||
{
|
||||
value: "kekong",
|
||||
label: "可控",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "daohang",
|
||||
label: "导航",
|
||||
children: [
|
||||
{
|
||||
value: "cexiangdaohang",
|
||||
label: "侧向导航",
|
||||
},
|
||||
{
|
||||
value: "dingbudaohang",
|
||||
label: "顶部导航",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
options: [],
|
||||
echartList: [],
|
||||
totalEquNum: 10,
|
||||
eqpLineNum: [
|
||||
{
|
||||
name: "产线1",
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
name: "产线2",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: "产线3",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
name: "其他",
|
||||
value: 11,
|
||||
},
|
||||
],
|
||||
eqpLineNum: [],
|
||||
height: "100%",
|
||||
lines: ["产线1", "产线2", "产线3", "其他"],
|
||||
alarmList: [],
|
||||
@ -247,6 +193,11 @@ export default {
|
||||
this.getCompanyEquRunData();
|
||||
this.getEquNumByListAndStatus();
|
||||
this.getSensorNum();
|
||||
this.getWeeklyAlarmNum();
|
||||
this.getAlarmRecordList();
|
||||
this.getWeekRunEquNum();
|
||||
this.getMaintenanceNum();
|
||||
this.getUpkeepNum();
|
||||
},
|
||||
getCompanyEquRunData() {
|
||||
getEquipNumByProductionLine(this.selectedDeptId).then((res) => {
|
||||
@ -1476,7 +1427,6 @@ export default {
|
||||
}
|
||||
.equ-item {
|
||||
position: relative;
|
||||
background: linear-gradient(to bottom, #04152a, #0c1e53);
|
||||
&::before {
|
||||
font-family: iconfont; // 一定要这样写
|
||||
content: "\e618";
|
||||
|
||||
@ -447,18 +447,6 @@ import { Loading } from "element-ui";
|
||||
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
|
||||
import { deptTreeSelect } from "@/api/system/user";
|
||||
|
||||
import {
|
||||
getEquipNumByCompany,
|
||||
getEquipNumByDiffCompany,
|
||||
getWeeklyEquipNumByCompany,
|
||||
getHYMaintenanceRecordNumByCompany,
|
||||
getHYUpkeepRecordNumByCompany,
|
||||
getHYPatrolRecordNumByCompany,
|
||||
getAlarmNumByCompany,
|
||||
getCompanyLatestAlarmRecord,
|
||||
getWeeklyAlarmNumByCompany,
|
||||
getSparePartsNumByCompany,
|
||||
} from "@/api/bigscreen/company";
|
||||
import {
|
||||
getCompanyEquipNum,
|
||||
getWeeklyEquipNum,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user