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 | 438 +++++++++++++++++++++++++++---------------------------
1 files changed, 220 insertions(+), 218 deletions(-)
diff --git a/src/views/manageCenter/index.vue b/src/views/manageCenter/index.vue
index 8b5b91a..b629803 100644
--- a/src/views/manageCenter/index.vue
+++ b/src/views/manageCenter/index.vue
@@ -5,7 +5,7 @@
<div class="centerTitle">
<div class="heart">
- <div class="welcome">{{ userName }},娆㈣繋鎮ㄨ礉鎬濈绠＄悊涓績.</div>
+ <div class="welcome">{{ userName }}, 娆㈣繋鎮ㄥ洖鍒扮鐞嗕腑蹇冦��</div>
<div class="time">{{ timeMsg }}</div>
</div>
</div>
@@ -15,20 +15,14 @@
<div class="products">
<div class="title">鍏ㄩ儴浜у搧</div>
<div class="productList">
- <div
- class="productItem"
- v-for="(item, index) in productList"
- :key="index"
- >
- <router-link :to="item.path">
- <img :src="item.icon" alt="" />
- <div class="name">{{ item.name }}</div>
- </router-link>
+ <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>
</div>
</div>
- <div class="equipmentInfo">
+ <!-- <div class="equipmentInfo">
<div class="equipmentCard">
<div class="label">璁惧鎬婚噺</div>
<div class="number">
@@ -36,7 +30,7 @@
<div class="upIcon iconfont"> 2</div>
</div>
- <img src="/images/manageCenter/浠诲姟鎬绘暟.png" alt="" />
+ <img src="/images/manageCenter/total2.png" alt="" />
</div>
<div class="equipmentCard">
@@ -46,7 +40,7 @@
<div class="upIcon iconfont"> 2</div>
</div>
- <img src="/images/manageCenter/鎽勫儚鏈烘�绘暟.png" alt="" />
+ <img src="/images/manageCenter/total3.png" alt="" />
</div>
<div class="equipmentCard">
@@ -56,7 +50,7 @@
<div class="downIcon iconfont"> 2</div>
</div>
- <img src="/images/manageCenter/绠楁硶鎬绘暟.png" alt="" />
+ <img src="/images/manageCenter/total4.png" alt="" />
</div>
<div class="equipmentCard">
@@ -66,7 +60,7 @@
<div class="downIcon iconfont"> 2</div>
</div>
- <img src="/images/manageCenter/浠诲姟鎬绘暟.png" alt="" />
+ <img src="/images/manageCenter/total1.png" alt="" />
</div>
</div>
@@ -117,9 +111,9 @@
</div>
</div>
</div>
- </div>
+ </div> -->
- <div class="performence">
+ <!-- <div class="performence">
<div class="title">璁惧杩愯鐘舵�佺洃娴�</div>
<div class="control">
<div
@@ -208,13 +202,13 @@
></el-pagination>
</div>
</div>
-
+ -->
<div class="map">
- <div class="title">绠楁硶棰勮鏁版嵁鍗犳瘮</div>
+ <div class="title">璁惧鍦板浘鍒嗗竷</div>
<div id="mapChart"></div>
</div>
- <div class="hashRate">
+ <!-- <div class="hashRate">
<div class="left">
<div class="title">绠楁硶棰勮鏁版嵁鍗犳瘮:</div>
<div class="info">
@@ -233,7 +227,7 @@
<div class="title">绠楁硶棰勮鏁版嵁鍗犳瘮</div>
<div id="pieChart"></div>
</div>
- </div>
+ </div> -->
</div>
<!-- 椤靛熬 -->
@@ -242,24 +236,24 @@
</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.initScatter();
- this.initPie();
+ // this.initBar();
+ this.initMap()
+ // this.initScatter();
+ // this.initPie();
},
data() {
return {
@@ -270,21 +264,35 @@
productList: [
{
name: "璁惧绠＄悊",
- icon: "/images/manageCenter/璁惧绠＄悊.png",
- path: "/equipmentManagement",
+ icon: "/images/manageCenter/manage.png",
+ openPath: "/equipmentManagement",
+ path: "/equipmentList",
+ permission: "deviceMng"
},
{
name: "绠楀姏绠＄悊",
- icon: "/images/manageCenter/绠楀姏绠＄悊.png",
- path: "/hashrate",
+ icon: "/images/manageCenter/manage2.png",
+ openPath: "/hashrate",
+ path: "/hashrateDetail",
+ permission: "analysisMng"
},
{
name: "缁熻鏌ヨ",
- icon: "/images/manageCenter/绠楀姏绠＄悊.png",
- path: "/",
+ icon: "/images/manageCenter/search.png",
+ openPath: "/searchOpen",
+ path: "/search",
+ permission: "statisticMng"
},
+
+ {
+ name: "鍛婅绠＄悊",
+ icon: "/images/manageCenter/manage2.png",
+ openPath: "/report",
+ path: "/report",
+ permission: "statisticMng"
+ }
],
timeList: [
{ name: "20.103鏈嶅姟鍣�", time: "9澶�12灏忔椂44鍒�39绉�" },
@@ -297,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: {
@@ -305,7 +313,7 @@
y: "top",
itemHeight: 12,
itemWidth: 12,
- icon: "circle",
+ icon: "circle"
},
tooltip: {},
dataset: {
@@ -322,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.
@@ -369,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",
@@ -398,55 +406,55 @@
{
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: {
left: "right",
min: 0,
- max: 100,
+ max: 10,
inRange: {
- color: ["#FCFDFF", "#0065FF"],
+ color: ["#FCFDFF", "#0065FF"]
},
itemWidth: 56,
itemHeight: 200,
- text: ["100", "0"],
- calculable: false,
+ text: ["10", "0"],
+ 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: {
//鏄剧ず鎮诞绐楀彛
@@ -454,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: [
@@ -475,182 +483,182 @@
import: 10,
compare: 10,
common: 40,
- specail: 20,
+ specail: 20
},
{
name: "鍖椾含",
- value: 99,
+ value: 0
},
{
name: "澶╂触",
- value: 26,
+ value: 0
},
{
name: "涓婃捣",
- value: 44,
+ value: 0
},
{
name: "閲嶅簡",
- value: 0,
+ value: 0
},
{
name: "娌冲寳",
- value: 0,
+ value: 0
},
{
name: "娌冲崡",
- value: 0,
+ value: 0
},
{
name: "浜戝崡",
- value: 55,
+ value: 0
},
{
name: "杈藉畞",
- value: 19,
+ value: 0
},
{
name: "榛戦緳姹�",
- value: 0,
+ value: 0
},
{
name: "婀栧崡",
- value: 0,
+ value: 0
},
{
name: "瀹夊窘",
- value: 60,
+ value: 0
},
{
name: "灞变笢",
- value: 39,
+ value: 4
},
{
name: "鏂扮枂",
- value: 4,
+ value: 0
},
{
name: "姹熻嫃",
- value: 0,
+ value: 0
},
{
name: "娴欐睙",
- value: 0,
+ value: 0
},
{
name: "姹熻タ",
- value: 36,
+ value: 0
},
{
name: "婀栧寳",
- value: 52,
+ value: 0
},
{
name: "骞胯タ",
- value: 0,
+ value: 0
},
{
name: "鐢樿們",
- value: 7,
+ value: 0
},
{
name: "灞辫タ",
- value: 5,
+ value: 0
},
{
name: "鍐呰挋鍙�",
- value: 0,
+ value: 0
},
{
name: "闄曡タ",
- value: 22,
+ value: 0
},
{
name: "鍚夋灄",
- value: 4,
+ value: 0
},
{
name: "绂忓缓",
- value: 18,
+ value: 0
},
{
name: "璐靛窞",
- value: 5,
+ value: 0
},
{
name: "骞夸笢",
- value: 98,
+ value: 0
},
{
name: "闈掓捣",
- value: 1,
+ value: 0
},
{
name: "瑗胯棌",
- value: 0,
+ value: 0
},
{
name: "鍥涘窛",
- value: 44,
+ value: 0
},
{
name: "瀹佸",
- value: 4,
+ value: 0
},
{
name: "娴峰崡",
- value: 22,
+ value: 0
},
{
name: "鍙版咕",
- value: 3,
+ value: 0
},
{
name: "棣欐腐",
- value: 5,
+ value: 0
},
{
name: "婢抽棬",
- value: 555,
- },
- ],
- },
- ],
+ 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: [
@@ -678,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: [
@@ -692,7 +700,7 @@
"rgb(255, 178, 36)",
"rgb(0, 190, 231)",
"rgb(255, 124, 31)",
- "rgb(165, 96, 255)",
+ "rgb(165, 96, 255)"
],
series: [
{
@@ -702,7 +710,7 @@
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
- borderRadius: 8,
+ borderRadius: 8
},
data: [
{ value: 22.45, name: "绂诲矖" },
@@ -710,10 +718,10 @@
{ value: 17.96, name: "杞﹁締璇嗗埆" },
{ value: 15.71, name: "鐫″矖" },
{ value: 12.86, name: "瀹夊叏甯芥娴�" },
- { value: 10.82, name: "涓綋闈欐" },
- ],
- },
- ],
+ { value: 10.82, name: "涓綋闈欐" }
+ ]
+ }
+ ]
},
dataList: [
{
@@ -722,7 +730,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -730,7 +738,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -738,7 +746,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -746,7 +754,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -754,7 +762,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -762,7 +770,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -770,7 +778,7 @@
mem: "78%",
gpu: "60%",
cpu: "23%",
- dist: "10%",
+ dist: "10%"
},
{
name: "2.154",
@@ -778,84 +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 val = userInfo.permissions.find((item) => {
+ return item == route.permission
+ })
+ if (val) {
+ if (route.path === "/search") {
+ const { href } = this.$router.resolve({
+ path: "/search"
+ })
+ window.open(href, "_blank")
+ return
+ }
+ this.$router.push(route.path)
+ } else if (!userInfo.parentId) {
+ this.$router.push(route.openPath)
+ }
},
refrash() {},
- handleSizeChange() {},
- },
-};
+ handleSizeChange() {}
+ }
+}
</script>
<style lang="scss" scoped>
@@ -1007,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%);
}
}
}
@@ -1209,7 +1211,7 @@
.item {
display: flex;
- justify-content: end;
+ justify-content: flex-end;
align-items: center;
.label {
@@ -1226,4 +1228,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0