From 8aa3edd56c279100c9053576f3e90fa55459fe77 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Mon, 16 Jan 2023 16:15:55 +0800
Subject: [PATCH] 修改
---
src/views/supervisoryConsole/data.vue | 507 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 421 insertions(+), 86 deletions(-)
diff --git a/src/views/supervisoryConsole/data.vue b/src/views/supervisoryConsole/data.vue
index 79c3f92..5a7aecb 100644
--- a/src/views/supervisoryConsole/data.vue
+++ b/src/views/supervisoryConsole/data.vue
@@ -23,48 +23,56 @@
<div class="active-list">
<div>
<span
- ng-click="menuToDetail(0)"
+ @click.stop="StartEquipment({ dxtype: 2 })"
class="dashboard_alarm ng-binding"
>预警</span
>
</div>
- <div><span class="ng-binding">3</span></div>
- <div class="ng-binding">占比 1.8%</div>
+ <div>
+ <span class="ng-binding">{{ yj }}</span>
+ </div>
+ <div class="ng-binding">占比 {{ yjper }}</div>
</div>
<div class="active-list">
<div>
<span
- ng-click="menuToDetail(4)"
+ @click.stop="StartEquipment({ dxtype: 3 })"
class="dashboard_malfunction ng-binding"
>故障</span
>
</div>
- <div><span class="ng-binding">25</span></div>
- <div class="ng-binding">占比 15%</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
- ng-click="menuToDetail(1)"
+ @click.stop="StartEquipment({ dxtype: 1 })"
class="dashboard_normal ng-binding"
>正常</span
>
</div>
- <div><span class="ng-binding">125</span></div>
- <div class="ng-binding">占比 75%</div>
+ <div>
+ <span class="ng-binding">{{ zx }}</span>
+ </div>
+ <div class="ng-binding">占比 {{ zxper }}</div>
</div>
<div class="active-list">
<div>
<span
- ng-click="menuToDetail(3)"
+ @click.stop="StartEquipment({ dxtype: 0 })"
class="dashboard_inactive ng-binding"
>掉线</span
>
</div>
- <div><span class="ng-binding">15</span></div>
- <div class="ng-binding">占比 10%</div>
+ <div>
+ <span class="ng-binding">{{ dx }}</span>
+ </div>
+ <div class="ng-binding">占比 {{ dxper }}</div>
</div>
</div>
</div>
@@ -86,27 +94,121 @@
class="info-content-table"
:data="tableData"
stripe
- style="width: 100%; margin: 10px"
- max-height="352px"
+ style="width: 100%; margin: 0 15px"
+ max-height="380px"
:resizable="false"
>
- <el-table-column prop="waringType" label="警情类型" width="100">
+ <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">
@@ -116,7 +218,7 @@
</div>
<div class="head-right">
<div class="head-right offset-right">
- <a href="/#/realTimePolice/index">预警分析</a>
+ <a href="/#/alarmManagement/alarmAnalysis">预警分析</a>
</div>
</div>
</div>
@@ -124,16 +226,12 @@
<div class="alarm-bar">
<div class="alarm-bar-title">
<div class="title-left ng-binding">日累计预警事件数</div>
- <div class="title-right week ng-scope" ng-if="$ctrl.barRate >= 1">
- <span class="ng-binding">0</span
- ><span class="ng-binding">1.00</span>
- </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 ng-isolate-scope"
- data="$ctrl.weekAlarm"
- alarm-bar="alarmBarEvent(chart)"
- ></div>
+ <div class="week-alarm-bar" id="day_warn_echarts"></div>
</div>
<div class="border-line"></div>
<div class="alarm-line">
@@ -141,22 +239,12 @@
<div class="title-left change-flex-alarm ng-binding">
日累计预警设备数
</div>
- <!-- ngIf: $ctrl.deviceRate >= 1 -->
- <div
- class="title-right week ng-scope"
- ng-if="$ctrl.deviceRate >= 1"
- >
- <span class="ng-binding">0</span
- ><span class="ng-binding">1.00</span>
- </div>
- <!-- end ngIf: $ctrl.deviceRate >= 1 -->
- <!-- ngIf: $ctrl.deviceRate < 1 -->
+ <!-- <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 ng-isolate-scope"
- data="$ctrl.weekDevice"
- device-line="deviceLineEvent(chart)"
- ></div>
+ <div class="week-device-line" id="day_equipment_echarts"></div>
</div>
</div>
</div>
@@ -165,67 +253,110 @@
</template>
<script>
-import { getList } from "@/api/supervisory/data";
+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) => {
- 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,
- });
+ 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() {
- this.drawPie();
- },
+ mounted() {},
methods: {
drawPie() {
+ var that = this;
var myChart = this.$echarts.init(
document.getElementById("base_information_pie_echarts")
);
var m2R2Data = [
{
- value: 125,
+ value: that.zx,
legendname: "正常",
name: "正常",
itemStyle: { color: "#29c194" },
},
{
- value: 25,
+ value: that.yj,
+ legendname: "预警",
+ name: "预警",
+ itemStyle: { color: "#F34A4A" },
+ },
+ {
+ value: that.gz,
legendname: "故障",
name: "故障",
itemStyle: { color: "#b6b6b6" },
},
{
- value: 15,
+ value: that.dx,
legendname: "掉线",
name: "掉线",
- itemStyle: { color: "#6d5eac" },
+ itemStyle: { color: "#F48F57" },
},
];
var sum = 0;
-
m2R2Data.forEach((item) => {
sum += item.value;
});
+
+ // sum +=that.yj;
var option = {
title: [
@@ -248,26 +379,24 @@
],
tooltip: {
trigger: "item",
- formatter: function (parms) {
- var str =
- parms.seriesName +
- "</br>" +
- parms.marker +
- "" +
- parms.data.legendname +
- "</br>" +
- "数量：" +
- parms.data.value +
- "</br>" +
- "占比：" +
- parms.percent +
- "%";
- return str;
- },
+ // formatter: function (parms) {
+ // var str =
+ // parms.marker +
+ // "" +
+ // parms.data.legendname +
+ // "</br>" +
+ // "数量：" +
+ // parms.data.value +
+ // "</br>" +
+ // "占比：" +
+ // parms.percent +
+ // "%";
+ // return str;
+ // },
+ formatter: "{b}: {c} ({d}%)",
},
series: [
{
- name: "标题",
type: "pie",
center: ["50%", "50%"],
radius: ["66%", "86%"],
@@ -288,6 +417,211 @@
],
};
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 });
+ }
},
},
};
@@ -299,7 +633,7 @@
flex-direction: column;
justify-content: space-between;
margin-bottom: 0px !important;
- height: 96% !important;
+ height: 100% !important;
font-size: 14px;
&:nth-child(2) {
padding-left: 10px;
@@ -355,7 +689,7 @@
background-color: #29c093;
}
&:nth-child(3)::before {
- background-color: #6d5eac;
+ background-color: #f48f57;
}
&:nth-child(4)::before {
background-color: #dfdfdf;
@@ -378,6 +712,7 @@
}
.pie-total-container {
display: flex;
+ border: 1px solid transparent;
padding: 20px 0;
}
.info-active {
@@ -416,20 +751,20 @@
color: #29c194;
}
.active-list:nth-child(2) > div:nth-child(1) span {
- border: 1px solid #6d5eac;
- color: #6d5eac;
+ 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: #e9e7f3;
+ 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: #6d5eac;
+ color: #f48f57;
}
}
.info-active-top,
@@ -526,13 +861,13 @@
display: flex;
margin-top: 44px;
height: calc(100% - 54px);
- background: pink;
+ // background: pink;
}
.week-device-line {
display: flex;
margin-top: 44px;
height: calc(100% - 54px);
- background: orange;
+ // background: orange;
}
}
.border-line {
@@ -551,4 +886,4 @@
border-bottom: 0px !important;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3