From b4b91ddcd1fab16d8597feef223fbdf407b2878b Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 02 Apr 2021 11:56:26 +0800
Subject: [PATCH] 监控台页面相关
---
src/views/supervisoryConsole/map.vue | 13 +
src/views/supervisoryConsole/data.vue | 554 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/views/supervisoryConsole/card.vue | 13 +
3 files changed, 580 insertions(+), 0 deletions(-)
diff --git a/src/views/supervisoryConsole/card.vue b/src/views/supervisoryConsole/card.vue
new file mode 100644
index 0000000..17bcab3
--- /dev/null
+++ b/src/views/supervisoryConsole/card.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/supervisoryConsole/data.vue b/src/views/supervisoryConsole/data.vue
new file mode 100644
index 0000000..79c3f92
--- /dev/null
+++ b/src/views/supervisoryConsole/data.vue
@@ -0,0 +1,554 @@
+<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
+ ng-click="menuToDetail(0)"
+ class="dashboard_alarm ng-binding"
+ >预警</span
+ >
+ </div>
+ <div><span class="ng-binding">3</span></div>
+ <div class="ng-binding">占比 1.8%</div>
+ </div>
+ <div class="active-list">
+ <div>
+ <span
+ ng-click="menuToDetail(4)"
+ class="dashboard_malfunction ng-binding"
+ >故障</span
+ >
+ </div>
+ <div><span class="ng-binding">25</span></div>
+ <div class="ng-binding">占比 15%</div>
+ </div>
+ </div>
+ <div class="info-active-bottom">
+ <div class="active-list">
+ <div>
+ <span
+ ng-click="menuToDetail(1)"
+ class="dashboard_normal ng-binding"
+ >正常</span
+ >
+ </div>
+ <div><span class="ng-binding">125</span></div>
+ <div class="ng-binding">占比 75%</div>
+ </div>
+ <div class="active-list">
+ <div>
+ <span
+ ng-click="menuToDetail(3)"
+ class="dashboard_inactive ng-binding"
+ >掉线</span
+ >
+ </div>
+ <div><span class="ng-binding">15</span></div>
+ <div class="ng-binding">占比 10%</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="352px"
+ :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 ng-scope" ng-if="$ctrl.barRate >= 1">
+ <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>
+ <div class="border-line"></div>
+ <div class="alarm-line">
+ <div class="alarm-bar-title">
+ <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>
+ <div
+ class="week-device-line ng-isolate-scope"
+ data="$ctrl.weekDevice"
+ device-line="deviceLineEvent(chart)"
+ ></div>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+</template>
+
+<script>
+import { getList } from "@/api/supervisory/data";
+
+export default {
+ data() {
+ return {
+ tableData: [],
+ };
+ },
+ 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,
+ });
+ });
+ });
+ },
+ mounted() {
+ this.drawPie();
+ },
+ methods: {
+ drawPie() {
+ var myChart = this.$echarts.init(
+ document.getElementById("base_information_pie_echarts")
+ );
+
+ var m2R2Data = [
+ {
+ value: 125,
+ legendname: "正常",
+ name: "正常",
+ itemStyle: { color: "#29c194" },
+ },
+ {
+ value: 25,
+ legendname: "故障",
+ name: "故障",
+ itemStyle: { color: "#b6b6b6" },
+ },
+ {
+ value: 15,
+ legendname: "掉线",
+ name: "掉线",
+ itemStyle: { color: "#6d5eac" },
+ },
+ ];
+
+ 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.seriesName +
+ "</br>" +
+ parms.marker +
+ "" +
+ parms.data.legendname +
+ "</br>" +
+ "数量：" +
+ parms.data.value +
+ "</br>" +
+ "占比：" +
+ parms.percent +
+ "%";
+ return str;
+ },
+ },
+ series: [
+ {
+ name: "标题",
+ 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);
+ },
+ },
+};
+</script>
+
+<style lang="scss">
+.super-data-box {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-bottom: 0px !important;
+ height: 96% !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: #6d5eac;
+ }
+ &: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 #6d5eac;
+ color: #6d5eac;
+ }
+ .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;
+ }
+ .active-list:nth-child(1) > div:nth-child(2) span {
+ color: #29c194;
+ }
+ .active-list:nth-child(2) > div:nth-child(2) span {
+ color: #6d5eac;
+ }
+ }
+ .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>
\ No newline at end of file
diff --git a/src/views/supervisoryConsole/map.vue b/src/views/supervisoryConsole/map.vue
new file mode 100644
index 0000000..82e1c4e
--- /dev/null
+++ b/src/views/supervisoryConsole/map.vue
@@ -0,0 +1,13 @@
+<template>
+ <iframe src="" frameborder="0"></iframe>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
--
Gitblit v1.9.3