<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
|
@click.stop="StartEquipment({ dxtype: 2 })"
|
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
|
@click.stop="StartEquipment({ dxtype: 3 })"
|
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
|
@click.stop="StartEquipment({ dxtype: 1 })"
|
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
|
@click.stop="StartEquipment({ dxtype: 0 })"
|
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: 0 15px"
|
max-height="380px"
|
:resizable="false"
|
>
|
<el-table-column prop="waringType" label="警情类型" width="120">
|
<template scope="scope">
|
<span
|
v-if="scope.row.jtype == 0"
|
style="color: rgb(255, 39, 39)"
|
>{{ scope.row.waringType }}</span
|
>
|
<span
|
v-else-if="scope.row.jtype == 1"
|
style="color: rgb(21, 162, 254)"
|
>{{ scope.row.waringType }}</span
|
>
|
<span v-else>{{ scope.row.waringType }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="alarmTime" label="报警时间" width="180">
|
<template scope="scope">
|
<span
|
v-if="scope.row.jtype == 0"
|
style="color: rgb(255, 39, 39)"
|
>{{ scope.row.alarmTime }}</span
|
>
|
<span
|
v-else-if="scope.row.jtype == 1"
|
style="color: rgb(21, 162, 254)"
|
>{{ scope.row.alarmTime }}</span
|
>
|
<span v-else>{{ scope.row.alarmTime }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="oneContacts" label="主要负责人" width="160">
|
<template scope="scope">
|
<span
|
v-if="scope.row.jtype == 0"
|
style="color: rgb(255, 39, 39)"
|
>{{ scope.row.oneContacts }}</span
|
>
|
<span
|
v-else-if="scope.row.jtype == 1"
|
style="color: rgb(21, 162, 254)"
|
>{{ scope.row.oneContacts }}</span
|
>
|
<span v-else>{{ scope.row.oneContacts }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="onePhone" label="负责人电话" width="180">
|
<template scope="scope">
|
<span
|
v-if="scope.row.jtype == 0"
|
style="color: rgb(255, 39, 39)"
|
>{{ scope.row.onePhone }}</span
|
>
|
<span
|
v-else-if="scope.row.jtype == 1"
|
style="color: rgb(21, 162, 254)"
|
>{{ scope.row.onePhone }}</span
|
>
|
<span v-else>{{ scope.row.onePhone }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="galarmPeople" label="报警人" width="160">
|
<template scope="scope">
|
<span
|
v-if="scope.row.jtype == 0"
|
style="color: rgb(255, 39, 39)"
|
>{{ scope.row.galarmPeople }}</span
|
>
|
<span
|
v-else-if="scope.row.jtype == 1"
|
style="color: rgb(21, 162, 254)"
|
>{{ scope.row.galarmPeople }}</span
|
>
|
<span v-else>{{ scope.row.galarmPeople }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="alarmPeople" label="接警人" width="160">
|
<template scope="scope">
|
<span
|
v-if="scope.row.jtype == 0"
|
style="color: rgb(255, 39, 39)"
|
>{{ scope.row.alarmPeople }}</span
|
>
|
<span
|
v-else-if="scope.row.jtype == 1"
|
style="color: rgb(21, 162, 254)"
|
>{{ scope.row.alarmPeople }}</span
|
>
|
<span v-else>{{ scope.row.alarmPeople }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="jtype" label="警情状态" width="">
|
<template scope="scope">
|
<el-button size="mini" @click.stop="stateHandling(scope.row)">
|
<span
|
v-if="scope.row.jtype == 0"
|
style="color: rgb(255, 39, 39)"
|
>未处理</span
|
>
|
<span
|
v-else-if="scope.row.jtype == 1"
|
style="color: rgb(21, 162, 254)"
|
>处理中</span
|
>
|
<span v-else>已处理</span>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<real-popup ref="realPopupView"> </real-popup>
|
</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="/#/alarmManagement/alarmAnalysis">预警分析</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,
|
getEquipments,
|
} 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) => {
|
if (item.waringType == "一键求助") {
|
that.tableData.push(item);
|
}
|
});
|
});
|
|
getEquipmentList().then((res) => {
|
that.drawLine(res.data.data);
|
});
|
|
getDayWarnList().then((res) => {
|
that.drawPillar(res.data.data);
|
});
|
|
getEquipments().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;
|
total += res.data.data.yj;
|
|
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.yj,
|
legendname: "预警",
|
name: "预警",
|
itemStyle: { color: "#F34A4A" },
|
},
|
{
|
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;
|
});
|
|
// sum +=that.yj;
|
|
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;
|
// },
|
formatter: "{b}: {c} ({d}%)",
|
},
|
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);
|
myChart.on("click", function (params) {
|
if (params.name == "正常") {
|
//跳转在线设备
|
that.StartEquipment({ dxtype: 1 });
|
} else if (params.name == "掉线") {
|
//跳转离线设备
|
that.StartEquipment({ dxtype: 0 });
|
} else if (params.name == "故障") {
|
//跳转故障设备
|
that.StartEquipment({ dxtype: 3 });
|
}
|
});
|
},
|
|
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 that = this;
|
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);
|
myChart.on("click", function (params) {
|
var data = [];
|
var date = new Date();
|
var y = date.getFullYear();
|
data.push({
|
startTime: y + "-" + params.name + " 00:00:00",
|
endTime: y + "-" + params.name + " 23:59:59",
|
waringType: "紧急求救",
|
});
|
that.handleStartAlarm(data);
|
});
|
},
|
//在线设备分页数据
|
StartEquipment(data) {
|
this.$router.push({
|
path: `/clientManagement/index`,
|
query: data,
|
});
|
},
|
//日累计预警数量跳转
|
handleStartAlarm(data) {
|
this.$router.push({
|
path: `/realTimePolice/index`,
|
query: data[0],
|
});
|
},
|
// 点击状态的处理事件
|
stateHandling(row) {
|
console.log(row);
|
if (row.jtype == 0) {
|
this.$refs.realPopupView.onItemGetParentData(row);
|
} else {
|
this.$router.push({ path: "/policeTracking/track", query: row });
|
}
|
},
|
},
|
};
|
</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;
|
border: 1px solid transparent;
|
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>
|
