From c746bd5e7640a2e7d0c29134d23ee266d8e68a52 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期四, 04 八月 2022 14:49:16 +0800
Subject: [PATCH] 添加告警推送页面
---
src/views/manageCenter/index.vue | 390 +++++++++++++++++++++++++------------------------------
1 files changed, 180 insertions(+), 210 deletions(-)
diff --git a/src/views/manageCenter/index.vue b/src/views/manageCenter/index.vue
index cb7c434..b629803 100644
--- a/src/views/manageCenter/index.vue
+++ b/src/views/manageCenter/index.vue
@@ -15,12 +15,7 @@
<div class="products">
<div class="title">鍏ㄩ儴浜у搧</div>
<div class="productList">
- <div
- class="productItem"
- v-for="(item, index) in productList"
- :key="index"
- @click="jump(item)"
- >
+ <div class="productItem" v-for="(item, index) in productList" :key="index" @click="jump(item)">
<img :src="item.icon" alt="" />
<div class="name">{{ item.name }}</div>
</div>
@@ -241,22 +236,22 @@
</template>
<script>
-import IndexHeader from "@/components/IndexHeader";
-import Footer from "@/components/Footer";
-import * as echarts from "echarts";
-import "echarts/map/js/china.js";
+import IndexHeader from "@/components/IndexHeader"
+import Footer from "@/components/Footer"
+import * as echarts from "echarts"
+import "echarts/map/js/china.js"
export default {
components: {
IndexHeader,
- Footer,
+ Footer
},
created() {
- this.getInfo();
+ this.getInfo()
},
mounted() {
// this.initBar();
- this.initMap();
+ this.initMap()
// this.initScatter();
// this.initPie();
},
@@ -272,7 +267,7 @@
icon: "/images/manageCenter/manage.png",
openPath: "/equipmentManagement",
path: "/equipmentList",
- permission: "deviceMng",
+ permission: "deviceMng"
},
{
@@ -280,7 +275,7 @@
icon: "/images/manageCenter/manage2.png",
openPath: "/hashrate",
path: "/hashrateDetail",
- permission: "analysisMng",
+ permission: "analysisMng"
},
{
@@ -288,16 +283,16 @@
icon: "/images/manageCenter/search.png",
openPath: "/searchOpen",
path: "/search",
- permission: "statisticMng",
+ permission: "statisticMng"
},
- /* {
- name: "GB28181",
- icon: "/images/manageCenter/search.png",
- openPath: "/GB28181Open",
- path: "/GB28181Open",
- permission: "statisticMng",
- }, */
+ {
+ name: "鍛婅绠＄悊",
+ icon: "/images/manageCenter/manage2.png",
+ openPath: "/report",
+ path: "/report",
+ permission: "statisticMng"
+ }
],
timeList: [
{ name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
@@ -310,7 +305,7 @@
{ name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
{ name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
{ name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
- { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
+ { name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" }
],
barOption: {
legend: {
@@ -318,7 +313,7 @@
y: "top",
itemHeight: 12,
itemWidth: 12,
- icon: "circle",
+ icon: "circle"
},
tooltip: {},
dataset: {
@@ -335,37 +330,37 @@
["16:00", 850, 30],
["18:00", 980, 0],
["20:00", 750, 130],
- ["22:00", 750, 130],
- ],
+ ["22:00", 750, 130]
+ ]
},
xAxis: {
type: "category",
axisTick: {
- show: false,
+ show: false
},
axisLabel: {
- color: "#666",
- },
+ color: "#666"
+ }
},
yAxis: {
axisTick: {
- show: false,
+ show: false
},
axisLine: {
//y杞�
- show: false,
+ show: false
},
axisLabel: {
- color: "#666",
+ color: "#666"
},
splitLine: {
//缃戞牸绾�
lineStyle: {
color: "rgb(230, 230, 230)",
- type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ type: "dashed" //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
},
- show: true, //闅愯棌鎴栨樉绀�
- },
+ show: true //闅愯棌鎴栨樉绀�
+ }
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
@@ -382,22 +377,22 @@
{
offset: 0,
color: "#0066FF", // 0% 澶勭殑棰滆壊
- radius: ["50%", "80%"],
+ radius: ["50%", "80%"]
},
{
offset: 1,
- color: "rgba(0, 102, 255, 0.25)", // 100% 澶勭殑棰滆壊
- },
+ color: "rgba(0, 102, 255, 0.25)" // 100% 澶勭殑棰滆壊
+ }
],
- global: false, // 缂虹渷涓� false
+ global: false // 缂虹渷涓� false
},
itemStyle: {
//鏌卞舰鍥惧渾瑙掞紝榧犳爣绉讳笂鍘绘晥鏋滐紝濡傛灉鍙槸涓�涓暟瀛楀垯璇存槑鍥涗釜鍙傛暟鍏ㄩ儴璁剧疆涓洪偅涔堝
normal: {
//鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
- barBorderRadius: [15, 15, 0, 0],
- },
- },
+ barBorderRadius: [15, 15, 0, 0]
+ }
+ }
},
{
type: "bar",
@@ -411,24 +406,24 @@
{
offset: 0,
color: "#FF4B33", // 0% 澶勭殑棰滆壊
- radius: ["50%", "80%"],
+ radius: ["50%", "80%"]
},
{
offset: 1,
- color: "rgba(255,75,51,0.25)", // 100% 澶勭殑棰滆壊
- },
+ color: "rgba(255,75,51,0.25)" // 100% 澶勭殑棰滆壊
+ }
],
- global: false, // 缂虹渷涓� false
+ global: false // 缂虹渷涓� false
},
itemStyle: {
//鏌卞舰鍥惧渾瑙掞紝榧犳爣绉讳笂鍘绘晥鏋滐紝濡傛灉鍙槸涓�涓暟瀛楀垯璇存槑鍥涗釜鍙傛暟鍏ㄩ儴璁剧疆涓洪偅涔堝
normal: {
//鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
- barBorderRadius: [15, 15, 0, 0],
- },
- },
- },
- ],
+ barBorderRadius: [15, 15, 0, 0]
+ }
+ }
+ }
+ ]
},
mapOption: {
visualMap: {
@@ -436,30 +431,30 @@
min: 0,
max: 10,
inRange: {
- color: ["#FCFDFF", "#0065FF"],
+ color: ["#FCFDFF", "#0065FF"]
},
itemWidth: 56,
itemHeight: 200,
text: ["10", "0"],
- calculable: false,
+ calculable: false
},
geo: {
//涓浗鍦板浘璁剧疆
map: "china",
scaleLimit: {
min: 1,
- max: 2,
+ max: 2
},
zoom: 1,
top: 120,
label: {
normal: {
- show: false,
+ show: false
},
emphasis: {
- show: false,
- },
- },
+ show: false
+ }
+ }
},
tooltip: {
//鏄剧ず鎮诞绐楀彛
@@ -467,12 +462,12 @@
backgroundColor: "#FFFFFF",
textStyle: {
color: "#0064FF",
- fontSize: "14",
+ fontSize: "14"
},
- formatter: function (params) {
- const msg = params.data.name + ":" + params.data.value;
- return msg;
- },
+ formatter: function(params) {
+ const msg = params.data.name + ":" + params.data.value
+ return msg
+ }
},
series: [
@@ -488,182 +483,182 @@
import: 10,
compare: 10,
common: 40,
- specail: 20,
+ specail: 20
},
{
name: "鍖椾含",
- value: 0,
+ value: 0
},
{
name: "澶╂触",
- value: 0,
+ value: 0
},
{
name: "涓婃捣",
- value: 0,
+ value: 0
},
{
name: "閲嶅簡",
- value: 0,
+ value: 0
},
{
name: "娌冲寳",
- value: 0,
+ value: 0
},
{
name: "娌冲崡",
- value: 0,
+ value: 0
},
{
name: "浜戝崡",
- value: 0,
+ value: 0
},
{
name: "杈藉畞",
- value: 0,
+ value: 0
},
{
name: "榛戦緳姹�",
- value: 0,
+ value: 0
},
{
name: "婀栧崡",
- value: 0,
+ value: 0
},
{
name: "瀹夊窘",
- value: 0,
+ value: 0
},
{
name: "灞变笢",
- value: 4,
+ value: 4
},
{
name: "鏂扮枂",
- value: 0,
+ value: 0
},
{
name: "姹熻嫃",
- value: 0,
+ value: 0
},
{
name: "娴欐睙",
- value: 0,
+ value: 0
},
{
name: "姹熻タ",
- value: 0,
+ value: 0
},
{
name: "婀栧寳",
- value: 0,
+ value: 0
},
{
name: "骞胯タ",
- value: 0,
+ value: 0
},
{
name: "鐢樿們",
- value: 0,
+ value: 0
},
{
name: "灞辫タ",
- value: 0,
+ value: 0
},
{
name: "鍐呰挋鍙�",
- value: 0,
+ value: 0
},
{
name: "闄曡タ",
- value: 0,
+ value: 0
},
{
name: "鍚夋灄",
- value: 0,
+ value: 0
},
{
name: "绂忓缓",
- value: 0,
+ value: 0
},
{
name: "璐靛窞",
- value: 0,
+ value: 0
},
{
name: "骞夸笢",
- value: 0,
+ value: 0
},
{
name: "闈掓捣",
- value: 0,
+ value: 0
},
{
name: "瑗胯棌",
- value: 0,
+ value: 0
},
{
name: "鍥涘窛",
- value: 0,
+ value: 0
},
{
name: "瀹佸",
- value: 0,
+ value: 0
},
{
name: "娴峰崡",
- value: 0,
+ value: 0
},
{
name: "鍙版咕",
- value: 0,
+ value: 0
},
{
name: "棣欐腐",
- value: 0,
+ value: 0
},
{
name: "婢抽棬",
- value: 0,
- },
- ],
- },
- ],
+ value: 0
+ }
+ ]
+ }
+ ]
},
scatterOption: {
xAxis: {
axisTick: {
- show: false,
+ show: false
},
axisLine: {
//y杞�
- show: false,
+ show: false
},
splitLine: {
//缃戞牸绾�
lineStyle: {
color: "rgb(230, 230, 230)",
- type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ type: "dashed" //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
},
- show: true, //闅愯棌鎴栨樉绀�
- },
+ show: true //闅愯棌鎴栨樉绀�
+ }
},
yAxis: {
axisTick: {
- show: false,
+ show: false
},
axisLine: {
//y杞�
- show: false,
+ show: false
},
splitLine: {
//缃戞牸绾�
lineStyle: {
color: "rgb(230, 230, 230)",
- type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ type: "dashed" //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
},
- show: true, //闅愯棌鎴栨樉绀�
- },
+ show: true //闅愯棌鎴栨樉绀�
+ }
},
series: [
@@ -691,12 +686,12 @@
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
- [5.02, 5.68],
+ [5.02, 5.68]
],
color: "rgba(0, 101, 255, 0.5)",
- type: "scatter",
- },
- ],
+ type: "scatter"
+ }
+ ]
},
pieOption: {
color: [
@@ -705,7 +700,7 @@
"rgb(255, 178, 36)",
"rgb(0, 190, 231)",
"rgb(255, 124, 31)",
- "rgb(165, 96, 255)",
+ "rgb(165, 96, 255)"
],
series: [
{
@@ -715,7 +710,7 @@
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
- borderRadius: 8,
+ borderRadius: 8
},
data: [
{ value: 22.45, name: "绂诲矖" },
@@ -723,10 +718,10 @@
{ value: 17.96, name: "杞﹁締璇嗗埆" },
{ value: 15.71, name: "鐫″矖" },
{ value: 12.86, name: "瀹夊叏甯芥娴�" },
- { value: 10.82, name: "涓綋闈欐" },
- ],
- },
- ],
+ { value: 10.82, name: "涓綋闈欐" }
+ ]
+ }
+ ]
},
dataList: [
{
@@ -735,7 +730,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -743,7 +738,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -751,7 +746,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -759,7 +754,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -767,7 +762,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -775,7 +770,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -783,7 +778,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -791,103 +786,102 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
- },
+ dist: "10%"
+ }
],
page: 1,
size: 5,
- total: 30,
- };
+ total: 30
+ }
},
methods: {
getInfo() {
if (sessionStorage.getItem("userInfo")) {
- this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username;
+ this.userName = JSON.parse(sessionStorage.getItem("userInfo")).username
}
- let date = new Date();
- let year = date.getFullYear(); //鑾峰彇瀹屾暣鐨勫勾浠�(4浣�)
- let month = date.getMonth() + 1; //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
- let day = date.getDate(); //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
- let weekDay = "";
+ let date = new Date()
+ let year = date.getFullYear() //鑾峰彇瀹屾暣鐨勫勾浠�(4浣�)
+ let month = date.getMonth() + 1 //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
+ let day = date.getDate() //鑾峰彇褰撳墠鏈堜唤(0-11,0浠ｈ〃1鏈�)
+ let weekDay = ""
switch (date.getDay()) {
case 0:
- weekDay = "鏄熸湡鏃�";
- break;
+ weekDay = "鏄熸湡鏃�"
+ break
case 1:
- weekDay = "鏄熸湡涓�";
- break;
+ weekDay = "鏄熸湡涓�"
+ break
case 2:
- weekDay = "鏄熸湡浜�";
- break;
+ weekDay = "鏄熸湡浜�"
+ break
case 3:
- weekDay = "鏄熸湡涓�";
- break;
+ weekDay = "鏄熸湡涓�"
+ break
case 4:
- weekDay = "鏄熸湡鍥�";
- break;
+ weekDay = "鏄熸湡鍥�"
+ break
case 5:
- weekDay = "鏄熸湡浜�";
- break;
+ weekDay = "鏄熸湡浜�"
+ break
case 6:
- weekDay = "鏄熸湡鍏�";
- break;
+ weekDay = "鏄熸湡鍏�"
+ break
}
- this.timeMsg =
- "浠婃棩, " + year + "骞�" + month + "鏈�" + day + "鏃�" + weekDay;
+ this.timeMsg = "浠婃棩, " + year + "骞�" + month + "鏈�" + day + "鏃�" + weekDay
},
select(value, type) {
- this[type] = value;
+ this[type] = value
},
initBar() {
- let bartDom = document.getElementById("bar");
- let myChart = echarts.init(bartDom);
- myChart.setOption(this.barOption);
+ let bartDom = document.getElementById("bar")
+ let myChart = echarts.init(bartDom)
+ myChart.setOption(this.barOption)
},
initMap() {
- let mapDom = document.getElementById("mapChart");
- let myChart = echarts.init(mapDom);
- myChart.setOption(this.mapOption);
+ let mapDom = document.getElementById("mapChart")
+ let myChart = echarts.init(mapDom)
+ myChart.setOption(this.mapOption)
},
initScatter() {
- let scatterDom = document.getElementById("scatterChart");
- let myChart = echarts.init(scatterDom);
- myChart.setOption(this.scatterOption);
+ let scatterDom = document.getElementById("scatterChart")
+ let myChart = echarts.init(scatterDom)
+ myChart.setOption(this.scatterOption)
},
initPie() {
- let pieDom = document.getElementById("pieChart");
- let myChart = echarts.init(pieDom);
- myChart.setOption(this.pieOption);
+ let pieDom = document.getElementById("pieChart")
+ let myChart = echarts.init(pieDom)
+ myChart.setOption(this.pieOption)
},
jump(route) {
- const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
+ const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
const val = userInfo.permissions.find((item) => {
- return item == route.permission;
- });
+ return item == route.permission
+ })
if (val) {
if (route.path === "/search") {
const { href } = this.$router.resolve({
- path: "/search",
- });
- window.open(href, "_blank");
- return;
+ path: "/search"
+ })
+ window.open(href, "_blank")
+ return
}
- this.$router.push(route.path);
+ this.$router.push(route.path)
} else if (!userInfo.parentId) {
- this.$router.push(route.openPath);
+ this.$router.push(route.openPath)
}
},
refrash() {},
- handleSizeChange() {},
- },
-};
+ handleSizeChange() {}
+ }
+}
</script>
<style lang="scss" scoped>
@@ -1039,43 +1033,19 @@
}
&:nth-child(1) {
- background: linear-gradient(
- 108deg,
- #0065ff -8%,
- #0065ff -8%,
- #99cfff 100%,
- #99cfff 100%
- );
+ background: linear-gradient(108deg, #0065ff -8%, #0065ff -8%, #99cfff 100%, #99cfff 100%);
}
&:nth-child(2) {
- background: linear-gradient(
- 108deg,
- #ff6a00 0%,
- #ff6a00 0%,
- #ffb599 100%,
- #ffb599 100%
- );
+ background: linear-gradient(108deg, #ff6a00 0%, #ff6a00 0%, #ffb599 100%, #ffb599 100%);
}
&:nth-child(3) {
- background: linear-gradient(
- 108deg,
- #6d44e5 1%,
- #6d44e5 1%,
- #b299ff 100%,
- #b299ff 100%
- );
+ background: linear-gradient(108deg, #6d44e5 1%, #6d44e5 1%, #b299ff 100%, #b299ff 100%);
}
&:nth-child(4) {
- background: linear-gradient(
- 108deg,
- #40b63a 0%,
- #40b63a 0%,
- #89e5bc 100%,
- #89e5bc 100%
- );
+ background: linear-gradient(108deg, #40b63a 0%, #40b63a 0%, #89e5bc 100%, #89e5bc 100%);
}
}
}
@@ -1258,4 +1228,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0