<template>
|
<el-row>
|
<el-col class="super-data-box" :span="16">
|
<div class="container-box">
|
<div class="info-head">
|
<div class="head-left">
|
<div class="ng-binding">基本信息</div>
|
</div>
|
<div class="head-right">
|
<div class="head-list ng-binding">预警</div>
|
<div class="head-list ng-binding">正常</div>
|
<div class="head-list ng-binding">故障</div>
|
<div class="head-list ng-binding">掉线</div>
|
</div>
|
</div>
|
<div class="info-content">
|
<div
|
class="pie-total-container"
|
id="base_information_pie_echarts"
|
></div>
|
<div class="info-active">
|
<div class="info-active-top">
|
<div class="active-list">
|
<div>
|
<span class="dashboard_alarm ng-binding">预警</span>
|
</div>
|
<div>
|
<span class="ng-binding">{{ yj }}</span>
|
</div>
|
<div class="ng-binding">占比 {{ yjper }}</div>
|
</div>
|
<div class="active-list">
|
<div>
|
<span class="dashboard_malfunction ng-binding">故障</span>
|
</div>
|
<div>
|
<span class="ng-binding">{{ gz }}</span>
|
</div>
|
<div class="ng-binding">占比 {{ gzper }}</div>
|
</div>
|
</div>
|
<div class="info-active-bottom">
|
<div class="active-list">
|
<div>
|
<span class="dashboard_normal ng-binding">正常</span>
|
</div>
|
<div>
|
<span class="ng-binding">{{ zx }}</span>
|
</div>
|
<div class="ng-binding">占比 {{ zxper }}</div>
|
</div>
|
<div class="active-list">
|
<div>
|
<span class="dashboard_inactive ng-binding">掉线</span>
|
</div>
|
<div>
|
<span class="ng-binding">{{ dx }}</span>
|
</div>
|
<div class="ng-binding">占比 {{ dxper }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="container-box">
|
<div class="info-head">
|
<div class="head-left">
|
<div class="ng-binding">
|
最近预警事件<span class="ng-binding">最近7天预警事件</span>
|
</div>
|
</div>
|
<div class="head-right offset-right">
|
<a href="/#/realTimePolice/index">预警记录</a>
|
</div>
|
</div>
|
<div class="info-content">
|
<el-table
|
class="info-content-table"
|
:data="tableData"
|
stripe
|
style="width: 100%; margin: 10px"
|
max-height="380px"
|
:resizable="false"
|
>
|
<el-table-column prop="waringType" label="警情类型" width="100">
|
</el-table-column>
|
<el-table-column prop="alarmTime" label="报警时间" width="180">
|
</el-table-column>
|
<el-table-column prop="oneContacts" label="主要负责人" width="160">
|
</el-table-column>
|
<el-table-column prop="onePhone" label="负责人电话" width="180">
|
</el-table-column>
|
<el-table-column prop="galarmPeople" label="报警人" width="160">
|
</el-table-column>
|
<el-table-column prop="alarmPeople" label="接警人" width="160">
|
</el-table-column>
|
<el-table-column prop="jtype" label="警情状态" width="">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-col>
|
<el-col class="super-data-box" :span="8">
|
<div class="container-box week-alarm">
|
<div class="info-head alarm-title">
|
<div class="head-left">
|
<div class="ng-binding">近7天预警趋势</div>
|
</div>
|
<div class="head-right">
|
<div class="head-right offset-right">
|
<a href="/#/realTimePolice/index">预警分析</a>
|
</div>
|
</div>
|
</div>
|
<div class="alarm-content">
|
<div class="alarm-bar">
|
<div class="alarm-bar-title">
|
<div class="title-left ng-binding">日累计预警事件数</div>
|
<div class="title-right week">
|
<span class="ng-binding">0</span
|
><span class="ng-binding">1.00</span>
|
</div>
|
</div>
|
<div class="week-alarm-bar" id="day_warn_echarts"></div>
|
</div>
|
<div class="border-line"></div>
|
<div class="alarm-line">
|
<div class="alarm-bar-title">
|
<div class="title-left change-flex-alarm ng-binding">
|
日累计预警设备数
|
</div>
|
<div class="title-right week">
|
<span class="ng-binding">0</span
|
><span class="ng-binding">1.00</span>
|
</div>
|
</div>
|
<div class="week-device-line" id="day_equipment_echarts"></div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import {
|
getList,
|
getEquipmentList,
|
getDayWarnList,
|
getEquipment,
|
} from "@/api/supervisory/data";
|
|
export default {
|
data() {
|
return {
|
tableData: [],
|
dx: null,
|
zx: null,
|
gz: null,
|
yj: null,
|
dxper: null,
|
zxper: null,
|
gzper: null,
|
yjper: null,
|
};
|
},
|
created() {
|
var that = this;
|
getList().then((res) => {
|
res.data.data.forEach((item) => {
|
that.tableData.push({
|
waringType:
|
item.waringType == "紧急求救" ? "一键求助" : item.waringType,
|
alarmTime: item.alarmTime,
|
oneContacts: item.oneContacts,
|
onePhone: item.onePhone,
|
galarmPeople: item.galarmPeople,
|
jtype:
|
item.jtype == 0 ? "未处理" : item.jtype == 1 ? "处理中" : "已处理",
|
alarmPeople: item.alarmPeople,
|
});
|
});
|
});
|
|
getEquipmentList().then((res) => {
|
that.drawLine(res.data.data);
|
});
|
|
getDayWarnList().then((res) => {
|
that.drawPillar(res.data.data);
|
});
|
|
getEquipment().then((res) => {
|
console.log(res.data.data, 123);
|
|
var total = 0;
|
|
total += res.data.data.zx;
|
total += res.data.data.dx;
|
total += res.data.data.gz;
|
|
console.log(total, 45);
|
|
that.dx = res.data.data.dx;
|
that.zx = res.data.data.zx;
|
that.gz = res.data.data.gz;
|
that.yj = res.data.data.yj;
|
that.dxper = ((res.data.data.dx / total) * 100).toFixed(2) + "%";
|
that.zxper = ((res.data.data.zx / total) * 100).toFixed(2) + "%";
|
that.gzper = ((res.data.data.gz / total) * 100).toFixed(2) + "%";
|
that.yjper = ((res.data.data.yj / total) * 100).toFixed(2) + "%";
|
|
that.drawPie();
|
});
|
},
|
mounted() {},
|
methods: {
|
drawPie() {
|
var that = this;
|
var myChart = this.$echarts.init(
|
document.getElementById("base_information_pie_echarts")
|
);
|
|
var m2R2Data = [
|
{
|
value: that.zx,
|
legendname: "正常",
|
name: "正常",
|
itemStyle: { color: "#29c194" },
|
},
|
{
|
value: that.gz,
|
legendname: "故障",
|
name: "故障",
|
itemStyle: { color: "#b6b6b6" },
|
},
|
{
|
value: that.dx,
|
legendname: "掉线",
|
name: "掉线",
|
itemStyle: { color: "#F48F57" },
|
},
|
];
|
|
var sum = 0;
|
|
m2R2Data.forEach((item) => {
|
sum += item.value;
|
});
|
|
var option = {
|
title: [
|
{
|
text: sum,
|
subtext: "监测点总数",
|
textStyle: {
|
fontSize: 36,
|
fontWeight: "normal",
|
color: "#393939",
|
},
|
subtextStyle: {
|
fontSize: 16,
|
color: "#434343",
|
},
|
textAlign: "center",
|
x: "49%",
|
y: "39%",
|
},
|
],
|
tooltip: {
|
trigger: "item",
|
formatter: function (parms) {
|
var str =
|
parms.marker +
|
"" +
|
parms.data.legendname +
|
"</br>" +
|
"数量：" +
|
parms.data.value +
|
"</br>" +
|
"占比：" +
|
parms.percent +
|
"%";
|
return str;
|
},
|
},
|
series: [
|
{
|
type: "pie",
|
center: ["50%", "50%"],
|
radius: ["66%", "86%"],
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
avoidLabelOverlap: false,
|
label: {
|
normal: {
|
show: false,
|
},
|
},
|
labelLine: {
|
normal: {
|
show: false,
|
},
|
},
|
data: m2R2Data,
|
},
|
],
|
};
|
myChart.setOption(option);
|
},
|
|
drawLine(result) {
|
var myChart = this.$echarts.init(
|
document.getElementById("day_equipment_echarts")
|
);
|
|
var xData = [];
|
var yData = [];
|
|
result.forEach((item) => {
|
xData.push(item.time.substr(5));
|
yData.push(item.Coun);
|
});
|
|
var option = {
|
color: "#A58ABF",
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
label: {
|
show: false,
|
},
|
lineStyle: {
|
width: 0,
|
},
|
},
|
formatter: function (parms) {
|
var str =
|
parms[0].axisValue +
|
"</br>" +
|
parms[0].marker +
|
"设备数：" +
|
parms[0].value;
|
return str;
|
},
|
textStyle: {
|
color: "#fff",
|
},
|
backgroundColor: "rgba(0, 0, 0, 0.7)",
|
borderWidth: 0,
|
},
|
xAxis: {
|
type: "category",
|
data: xData,
|
boundaryGap: false,
|
axisTick: {
|
show: false,
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: "#F0F0F0",
|
},
|
},
|
axisLabel: {
|
color: "#6E6E6E",
|
},
|
},
|
yAxis: {
|
type: "value",
|
show: false,
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
// boundaryGap: [0, "40%"],
|
},
|
series: [
|
{
|
type: "line",
|
smooth: 0.8,
|
// symbol: "none",
|
data: yData,
|
areaStyle: {},
|
},
|
],
|
};
|
myChart.setOption(option);
|
},
|
|
drawPillar(data) {
|
var myChart = this.$echarts.init(
|
document.getElementById("day_warn_echarts")
|
);
|
|
var xData = [];
|
var yData = [];
|
|
data.times.forEach((item) => {
|
xData.push(item.substr(5));
|
});
|
|
data.dataList.forEach((item) => {
|
if (item.name == "一键求助") {
|
yData = item.alarmData;
|
}
|
});
|
|
var option = {
|
color: "#F34A4A",
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
label: {
|
show: false,
|
},
|
lineStyle: {
|
width: 0,
|
},
|
},
|
formatter: function (parms) {
|
var str =
|
parms[0].axisValue +
|
"</br>" +
|
parms[0].marker +
|
"事件数：" +
|
parms[0].value;
|
return str;
|
},
|
textStyle: {
|
color: "#fff",
|
},
|
backgroundColor: "rgba(0, 0, 0, 0.7)",
|
borderWidth: 0,
|
},
|
xAxis: {
|
type: "category",
|
data: xData,
|
boundaryGap: false,
|
axisTick: {
|
show: false,
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: "#F0F0F0",
|
},
|
},
|
axisLabel: {
|
color: "#6E6E6E",
|
},
|
},
|
yAxis: {
|
type: "value",
|
show: false,
|
boundaryGap: [0, "40%"],
|
},
|
series: [
|
{
|
data: yData,
|
type: "bar",
|
},
|
],
|
};
|
myChart.setOption(option);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.super-data-box {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
margin-bottom: 0px !important;
|
height: 100% !important;
|
font-size: 14px;
|
&:nth-child(2) {
|
padding-left: 10px;
|
box-sizing: border-box;
|
}
|
.container-box {
|
flex: 1;
|
background: #fff;
|
.info-head {
|
display: flex;
|
padding-left: 20px;
|
height: 50px;
|
line-height: 50px;
|
box-sizing: border-box;
|
border-bottom: 1px solid #dfdfdf;
|
.head-left {
|
flex: 1;
|
.ng-binding {
|
color: #252525;
|
font-size: 1pc;
|
span {
|
display: inline-block;
|
margin-left: 10px;
|
color: #d1d1d1;
|
font-size: 9pt;
|
}
|
}
|
}
|
.head-right {
|
display: flex;
|
flex: 1 1 auto;
|
.head-list {
|
position: relative;
|
padding-right: 20px;
|
padding-left: 18px;
|
flex: 1;
|
&::before {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
display: block;
|
margin: auto;
|
width: 10px;
|
height: 10px;
|
border-radius: 2px;
|
content: "";
|
}
|
&:nth-child(1)::before {
|
background-color: #f34a4a;
|
}
|
&:nth-child(2)::before {
|
background-color: #29c093;
|
}
|
&:nth-child(3)::before {
|
background-color: #F48F57;
|
}
|
&:nth-child(4)::before {
|
background-color: #dfdfdf;
|
}
|
}
|
a {
|
margin-right: 20px;
|
color: #29c093;
|
}
|
}
|
.head-right.offset-right {
|
justify-content: flex-end;
|
}
|
}
|
.info-content {
|
display: flex;
|
height: calc(100% - 50px);
|
div {
|
flex: 1;
|
}
|
.pie-total-container {
|
display: flex;
|
padding: 20px 0;
|
}
|
.info-active {
|
display: flex;
|
flex-direction: column;
|
.info-active-top {
|
display: flex;
|
margin-right: 30px;
|
border-bottom: 1px solid #e4e4e6;
|
.active-list:nth-child(1) > div:nth-child(1) span {
|
border: 1px solid #f2494a;
|
color: #f2494a;
|
}
|
.active-list:nth-child(2) > div:nth-child(1) span {
|
border: 1px solid #b6b6b6;
|
color: #b6b6b6;
|
}
|
.active-list:nth-child(1) > div:nth-child(1) span:hover {
|
background: rgba(243, 74, 74, 0.15);
|
}
|
.active-list:nth-child(2) > div:nth-child(1) span:hover {
|
background: rgba(181, 181, 181, 0.15);
|
}
|
.active-list:nth-child(1) > div:nth-child(2) span {
|
color: #f2494a;
|
}
|
.active-list:nth-child(2) > div:nth-child(2) span {
|
color: #b6b6b6;
|
}
|
}
|
.info-active-bottom {
|
display: flex;
|
margin-right: 30px;
|
.active-list:nth-child(1) > div:nth-child(1) span {
|
border: 1px solid #29c194;
|
color: #29c194;
|
}
|
.active-list:nth-child(2) > div:nth-child(1) span {
|
border: 1px solid #F48F57;
|
color: #F48F57;
|
}
|
.active-list:nth-child(1) > div:nth-child(1) span:hover {
|
background: rgba(41, 192, 147, 0.15);
|
}
|
.active-list:nth-child(2) > div:nth-child(1) span:hover {
|
background: #f3ab8448;
|
}
|
.active-list:nth-child(1) > div:nth-child(2) span {
|
color: #29c194;
|
}
|
.active-list:nth-child(2) > div:nth-child(2) span {
|
color: #F48F57;
|
}
|
}
|
.info-active-top,
|
.info-active-bottom {
|
.active-list {
|
display: flex;
|
padding: 40px 0 20px;
|
flex: 1;
|
flex-direction: column;
|
& > div:nth-child(1) {
|
flex: 1;
|
span {
|
display: inline-block;
|
padding: 2px 8px;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
}
|
& > div:nth-child(2) {
|
display: flex;
|
flex: 1;
|
align-items: flex-end;
|
span {
|
font-weight: 300;
|
font-size: 28px;
|
}
|
}
|
& > div:nth-child(3) {
|
display: flex;
|
padding-top: 8px;
|
flex: 1;
|
align-items: flex-start;
|
}
|
}
|
}
|
}
|
}
|
&:nth-child(2) {
|
margin-top: 10px;
|
}
|
}
|
}
|
.week-alarm {
|
.alarm-content {
|
display: flex;
|
height: calc(100% - 50px);
|
flex-direction: column;
|
box-sizing: border-box;
|
.alarm-bar,
|
.alarm-line {
|
position: relative;
|
box-sizing: border-box;
|
flex: 1;
|
.alarm-bar-title {
|
position: absolute;
|
top: 10px;
|
display: flex;
|
padding: 0 30px 0 20px;
|
width: 100%;
|
line-height: 24px;
|
box-sizing: border-box;
|
.title-left {
|
flex: 1;
|
}
|
.title-right {
|
position: relative;
|
display: flex;
|
flex: 1;
|
justify-content: flex-end;
|
&.week:after {
|
margin-top: 8px;
|
width: 11px;
|
height: 7px;
|
background: url(/img/red-up.png) no-repeat;
|
background-size: 11px 7px;
|
content: "";
|
}
|
span:first-child {
|
display: inline-block;
|
margin-right: 15px;
|
vertical-align: middle;
|
font-size: 1pc;
|
}
|
span:last-child {
|
display: inline-block;
|
margin-right: 3px;
|
height: 22px;
|
vertical-align: middle;
|
line-height: 22px;
|
}
|
}
|
}
|
.week-alarm-bar {
|
display: flex;
|
margin-top: 44px;
|
height: calc(100% - 54px);
|
// background: pink;
|
}
|
.week-device-line {
|
display: flex;
|
margin-top: 44px;
|
height: calc(100% - 54px);
|
// background: orange;
|
}
|
}
|
.border-line {
|
margin: 0 20px;
|
height: 1px;
|
background-color: #e4e4e6;
|
}
|
}
|
}
|
.info-content-table {
|
&::before {
|
height: 0px;
|
}
|
th,
|
td {
|
border-bottom: 0px !important;
|
}
|
}
|
</style>
|
