689 lines
18 KiB
Vue
689 lines
18 KiB
Vue
<template>
|
|
<div class="fullHeight">
|
|
<vue-scroll>
|
|
<div class="top whiteBlock">
|
|
<div class="blockInner">
|
|
<div class="pageTitle">
|
|
{{ $t("message.firmEnviron.equipmentGeneralSituation") }}
|
|
</div>
|
|
<div class="chart devStatusChart" ref="devStatusChart"></div>
|
|
<div class="chart" ref="devAlarmChart"></div>
|
|
<div class="chart realTimeChart" ref="realTimeChart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="whiteBlock">
|
|
<div class="blockInner">
|
|
<!-- 历史报警概况-->
|
|
<div class="pageTitle">
|
|
{{ $t("message.firmEnviron.overviewOfHistoricalAlarm") }}
|
|
</div>
|
|
<div class="dateBox">
|
|
<span
|
|
:class="{ active: dateType == 1 }"
|
|
@click="
|
|
dateType = 1;
|
|
selectHistoryEnvironmentAlarmList();
|
|
"
|
|
>{{ $t("message.firmEnviron.nearlyWeek") }}</span>
|
|
<span
|
|
:class="{ active: dateType == 2 }"
|
|
@click="
|
|
dateType = 2;
|
|
selectHistoryEnvironmentAlarmList();
|
|
"
|
|
>{{ $t("message.firmEnviron.inRecentMonth") }}</span
|
|
>
|
|
</div>
|
|
<div class="chart" ref="historyAlarmChart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="whiteBlock">
|
|
<div class="blockInner">
|
|
<div class="pageTitle">
|
|
{{
|
|
$t(
|
|
"message.firmEnviron.environmentalEquipmentInstallationOverview"
|
|
)
|
|
}}
|
|
</div>
|
|
<div class="chart" ref="installChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts4';;
|
|
import {
|
|
selectEnvironmentDevStatisticsApi,
|
|
selectHistoryEnvironmentAlarmListApi,
|
|
} from "@/assets/js/api/company/project";
|
|
export default {
|
|
data() {
|
|
return {
|
|
backArr: [],
|
|
searchsn: "",
|
|
dateType: 1,
|
|
color: ["#5181F6", "#00DBB6", "#F67F51", "#731cd6", "#ffc44c", "#2ccded"],
|
|
color2: ["#4378D8", "#1AA388", "#BC5D12", "#B74F8F", "#731cd6", "#ffc44c","#2ccded"],
|
|
company:'',
|
|
};
|
|
},
|
|
mounted() {
|
|
this.company = COMPANY;
|
|
this.initData();
|
|
// this.createDevStatusChart();
|
|
// this.createInstallChart();
|
|
// this.createdAgeCharts();
|
|
// this.createRealTimeChart();
|
|
},
|
|
methods: {
|
|
initData() {
|
|
this.backArr = this.$store.state.mapBackArr;
|
|
console.log(this.backArr);
|
|
//
|
|
if (this.backArr.length > 0) {
|
|
this.searchsn = this.backArr[this.backArr.length - 1].sn;
|
|
} else {
|
|
switch (this.$store.state.userInfo.accountType) {
|
|
case 2:
|
|
this.searchsn = this.$store.state.userInfo.headquartersSn;
|
|
break;
|
|
case 3:
|
|
this.searchsn = this.$store.state.userInfo.sn;
|
|
break;
|
|
case 4:
|
|
this.searchsn = this.$store.state.userInfo.sn;
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.selectHistoryEnvironmentAlarmList();
|
|
this.selectEnvironmentDevStatistics();
|
|
},
|
|
|
|
selectHistoryEnvironmentAlarmList() {
|
|
selectHistoryEnvironmentAlarmListApi({
|
|
sn: this.searchsn,
|
|
dateType: this.dateType,
|
|
}).then((res) => {
|
|
var list = res.result.list;
|
|
console.log(this.searchsn);
|
|
console.log(this.dateType);
|
|
console.log(list);
|
|
var seriesData = [],
|
|
xData = [];
|
|
const hexToRgba = (hex, opacity) => {
|
|
let rgbaColor = "";
|
|
let reg = /^#[\da-f]{6}$/i;
|
|
if (reg.test(hex)) {
|
|
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
|
"0x" + hex.slice(3, 5)
|
|
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
|
}
|
|
return rgbaColor;
|
|
};
|
|
list.forEach((element, index) => {
|
|
var alarmArr = element.list;
|
|
var yData = [];
|
|
xData = [];
|
|
alarmArr.forEach((element2) => {
|
|
xData.push(element2.titleTime);
|
|
yData.push(element2.num);
|
|
});
|
|
seriesData.push({
|
|
name: element.name,
|
|
type: "line",
|
|
smooth: true,
|
|
// showSymbol: false,/
|
|
symbolSize: 10,
|
|
zlevel: 3,
|
|
lineStyle: {
|
|
normal: {
|
|
color: this.color[index],
|
|
shadowBlur: 3,
|
|
shadowColor: hexToRgba(this.color[index], 0.76),
|
|
shadowOffsetY: 8,
|
|
},
|
|
},
|
|
data: yData,
|
|
});
|
|
});
|
|
this.createHistoryAlarmChart(xData, seriesData);
|
|
});
|
|
},
|
|
selectEnvironmentDevStatistics() {
|
|
selectEnvironmentDevStatisticsApi({ sn: this.searchsn }).then((res) => {
|
|
var devList = res.result.devList;
|
|
var alarmTotal = res.result.alarmTotal;
|
|
var alarmList = res.result.alarmList;
|
|
var xData = [],
|
|
yData1 = [],
|
|
yData2 = [],
|
|
yData3 = [];
|
|
devList.forEach((element) => {
|
|
xData.push(element.name);
|
|
yData1.push(element.devOnline);
|
|
yData2.push(element.devNotOnline);
|
|
yData3.push(element.totalDev);
|
|
});
|
|
this.createDevStatusChart(xData, yData1, yData2);
|
|
this.createInstallChart(xData, yData3);
|
|
|
|
var xData2 = [],
|
|
yData4 = [],
|
|
yData5 = [],
|
|
yData6 = [];
|
|
alarmList.forEach((element) => {
|
|
xData2.push(element.name);
|
|
yData4.push(element.noiseNum);
|
|
yData5.push(element.pm25Num);
|
|
yData6.push(element.pm10Num);
|
|
});
|
|
this.createdAgeCharts(xData2, yData4, yData5, yData6);
|
|
this.createRealTimeChart(alarmTotal);
|
|
});
|
|
},
|
|
createRealTimeChart(alarmTotal) {
|
|
let that = this;
|
|
let monitor = echarts.init(this.$refs.realTimeChart);
|
|
// monitor.clear();
|
|
var option = {
|
|
color: that.company=='longguang'?["#4378D8", "#1AA388", "#BC5D12"]:["#5181F6", "#61D2B9", "#F67F51"],
|
|
title: {
|
|
show: true,
|
|
text: alarmTotal.totalAlarm,
|
|
x: "49%",
|
|
y: "40%",
|
|
z: 8,
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: this.$store.state.chartOptions.labelColor,
|
|
fontSize: 30,
|
|
},
|
|
subtext: that.$t("message.firmEnviron.realTimeTotalNumber"),
|
|
subtextStyle: {
|
|
color: "#9fa2ad",
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
grid: {
|
|
bottom: 40,
|
|
},
|
|
legend: {
|
|
itemWidth: 8,
|
|
itemHeight: 8,
|
|
textStyle: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
borderRadius: 4,
|
|
bottom: 15,
|
|
left: "center",
|
|
},
|
|
tooltip: {
|
|
// data: ['在线', '离线'],
|
|
trigger: "item",
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
},
|
|
series: [
|
|
{
|
|
name: that.$t("message.firmEnviron.realTimeStatistic"),
|
|
type: "pie",
|
|
radius: ["50%", "65%"],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: alarmTotal.noiseNum,
|
|
name: that.$t("message.firmEnviron.noiseAlarm"),
|
|
},
|
|
{
|
|
value: alarmTotal.pm25Num,
|
|
name: that.$t("message.firmEnviron.pm25Alarm"),
|
|
},
|
|
{
|
|
value: alarmTotal.pm10Num,
|
|
name: that.$t("message.firmEnviron.pm10Alarm"),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
monitor.setOption(option);
|
|
},
|
|
//实时报警分布---图表
|
|
createdAgeCharts(xData2, yData4, yData5, yData6) {
|
|
let that = this;
|
|
let ageChart = echarts.init(this.$refs.devAlarmChart);
|
|
// ageChart.clear();
|
|
let option = {
|
|
grid: {
|
|
top: 40,
|
|
left: 0,
|
|
bottom: 20,
|
|
right: 20,
|
|
containLabel: true,
|
|
},
|
|
color: that.company=='longguang'?["#4378D8", "#1AA388", "#BC5D12"]:["#5181F6", "#61D2B9", "#F67F51"],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
align: "left",
|
|
top: 5,
|
|
right: 0,
|
|
itemWidth: 13,
|
|
itemHeight: 5,
|
|
textStyle: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: xData2,
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
],
|
|
|
|
yAxis: {
|
|
name: that.$t("message.firmEnviron.realTimeAlarmDistribution"),
|
|
type: "value",
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(231, 233, 243, 0.5)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
},
|
|
nameTextStyle: {
|
|
color: "rgba(42, 46, 63, 0.56)",
|
|
fontSize: 12,
|
|
lineHeight: 24,
|
|
align: "left",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: that.$t("message.firmEnviron.noiseAlarm"),
|
|
type: "bar",
|
|
data: yData4,
|
|
barWidth: 24,
|
|
},
|
|
{
|
|
name: that.$t("message.firmEnviron.pm25Alarm"),
|
|
type: "bar",
|
|
data: yData5,
|
|
barWidth: 24,
|
|
},
|
|
{
|
|
name: that.$t("message.firmEnviron.pm10Alarm"),
|
|
type: "bar",
|
|
data: yData6,
|
|
barWidth: 24,
|
|
},
|
|
],
|
|
};
|
|
|
|
ageChart.setOption(option);
|
|
},
|
|
createDevStatusChart(xData, yData1, yData2) {
|
|
let that = this;
|
|
let devStatusChart = echarts.init(this.$refs.devStatusChart);
|
|
let option = {
|
|
grid: {
|
|
top: 40,
|
|
left: 0,
|
|
bottom: 20,
|
|
right: 20,
|
|
containLabel: true,
|
|
},
|
|
color: that.company=='longguang'?["#1AA388","#B74F8F"]:["#00DBB6", "#EA3941"],
|
|
legend: {
|
|
show: true,
|
|
align: "left",
|
|
top: 5,
|
|
right: 0,
|
|
itemWidth: 13,
|
|
itemHeight: 5,
|
|
textStyle: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: xData,
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
],
|
|
yAxis: {
|
|
name: that.$t("message.firmEnviron.realTimeStatusOfEquipment"),
|
|
type: "value",
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(231, 233, 243, 0.5)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
},
|
|
nameTextStyle: {
|
|
color: "rgba(42, 46, 63, 0.56)",
|
|
fontSize: 12,
|
|
lineHeight: 24,
|
|
align: "left",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: that.$t("message.firmEnviron.onLineUnit"),
|
|
type: "bar",
|
|
data: yData1,
|
|
barWidth: 26,
|
|
stack: that.$t("message.firmEnviron.gross"),
|
|
},
|
|
{
|
|
name: that.$t("message.firmEnviron.offLineUnit"),
|
|
type: "bar",
|
|
stack: that.$t("message.firmEnviron.gross"),
|
|
data: yData2,
|
|
barWidth: 26,
|
|
},
|
|
],
|
|
};
|
|
|
|
devStatusChart.setOption(option);
|
|
},
|
|
createInstallChart(xData, yData3) {
|
|
let that = this;
|
|
let installChart = echarts.init(this.$refs.installChart);
|
|
let option = {
|
|
grid: {
|
|
top: 30,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 20,
|
|
containLabel: true,
|
|
},
|
|
color: ["#5181F6"],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: xData,
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
],
|
|
yAxis: {
|
|
type: "value",
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(231, 233, 243, 0.5)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: that.$t("message.firmEnviron.installationNumber"),
|
|
type: "bar",
|
|
data: yData3,
|
|
barWidth: 26,
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
fontSize: 12,
|
|
color: "rgba(42, 46, 63, 0.44)",
|
|
// formatter:'{c}\n{c}%'
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
installChart.setOption(option);
|
|
},
|
|
createHistoryAlarmChart(xData, seriesData) {
|
|
let that = this;
|
|
let historyAlarmChart = echarts.init(this.$refs.historyAlarmChart);
|
|
// let bgColor = "#fff";
|
|
var option = {
|
|
// backgroundColor: bgColor,
|
|
color: this.company=='longguang'?this.color2:this.color,
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: function (params) {
|
|
let html = "";
|
|
params.forEach((v) => {
|
|
// console.log(v)
|
|
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
|
that.company=='longguang'?that.color2[v.componentIndex]:that.color[v.componentIndex]
|
|
};"></span>
|
|
${v.seriesName}.${v.name}
|
|
<span style="color:${
|
|
that.company=='longguang'?that.color2[v.componentIndex]:that.color[v.componentIndex]
|
|
};font-weight:700;font-size: 18px">${v.value}</span>
|
|
${that.$t("message.firmEnviron.next")}`;
|
|
});
|
|
return html;
|
|
},
|
|
extraCssText:
|
|
"background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
|
|
// axisPointer: {
|
|
// type: "shadow",
|
|
// shadowStyle: {
|
|
// color: "#ffffff",
|
|
// shadowColor: "rgba(225,225,225,1)",
|
|
// shadowBlur: 5,
|
|
// },
|
|
// },
|
|
},
|
|
grid: {
|
|
top: 35,
|
|
right: 40,
|
|
left: 10,
|
|
bottom: 0,
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
textStyle: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#D9D9D9",
|
|
},
|
|
},
|
|
data: xData,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: that.$t("message.firmEnviron.alerts"),
|
|
// nameLocation:'start',
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
nameTextStyle: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
lineHeight: 24,
|
|
align: "left",
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "rgba(231, 233, 243, 0.5)",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: seriesData,
|
|
};
|
|
historyAlarmChart.setOption(option);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.top {
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
height: 44%;
|
|
.chart {
|
|
// height: 300px;
|
|
height: calc(100% - 37px);
|
|
float: left;
|
|
width: calc(100% - 800px - 40px);
|
|
}
|
|
.realTimeChart {
|
|
width: 400px;
|
|
margin-left: 20px;
|
|
}
|
|
.devStatusChart {
|
|
width: 400px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
.bottom {
|
|
overflow: hidden;
|
|
height: calc(56% - 20px);
|
|
.whiteBlock {
|
|
float: left;
|
|
height: 100%;
|
|
&:first-child {
|
|
margin-right: 20px;
|
|
width: calc(100% - 420px);
|
|
}
|
|
&:last-child {
|
|
width: 400px;
|
|
}
|
|
}
|
|
.chart {
|
|
// height: 350px;
|
|
height: calc(100% - 37px);
|
|
}
|
|
}
|
|
.blockInner {
|
|
padding: 15px;
|
|
position: relative;
|
|
height: calc(100% - 30px);
|
|
}
|
|
.dateBox {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 10px;
|
|
span {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
&.active {
|
|
background-color: @--color-primary;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|