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/report/components/Banner.vue | 55 ++
src/views/report/components/FormArea.vue | 315 +++++++++++++
src/views/manageCenter/index.vue | 390 +++++++--------
src/views/report/components/DevList.vue | 211 ++++++++
src/views/report/components/SettingBox.vue | 89 +++
src/views/report/components/TableArea.vue | 145 ++++++
src/views/report/components/Flow.vue | 68 ++
src/views/report/index.vue | 59 ++
src/router/index.js | 88 +--
9 files changed, 1,155 insertions(+), 265 deletions(-)
diff --git a/src/router/index.js b/src/router/index.js
index a77adb6..5f58e65 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,144 +1,122 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
+import Vue from "vue"
+import VueRouter from "vue-router"
-Vue.use(VueRouter);
+Vue.use(VueRouter)
const routes = [
{
path: "/",
name: "index",
- component: () => import(/* webpackChunkName: "about" */ "../views/index"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/index")
},
{
path: "/register",
name: "register",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/register"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/register")
},
{
path: "/register/success",
- component: () =>
- import(
- /* webpackChunkName: "about" */ "../views/register/registerSuccess"
- ),
+ component: () => import(/* webpackChunkName: "about" */ "../views/register/registerSuccess")
},
{
path: "/register/resetPassword",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/register/resetPassword"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/register/resetPassword")
},
{
path: "/login",
name: "login",
- component: () => import(/* webpackChunkName: "about" */ "../views/login"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/login")
},
{
path: "/equipmentManagement",
name: "equipmentManagement",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/equipmentManagement"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/equipmentManagement")
},
{
path: "/equipmentList",
name: "equipmentList",
- component: () =>
- import(
- /* webpackChunkName: "about" */ "../views/equipmentManagement/equipmentList"
- ),
+ component: () => import(/* webpackChunkName: "about" */ "../views/equipmentManagement/equipmentList")
},
{
path: "/personalCenter",
name: "personalCenter",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/personalCenter"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/personalCenter")
},
{
path: "/equipmentDetail",
name: "equipmentDetail",
- component: () =>
- import(
- /* webpackChunkName: "about" */ "../views/equipmentManagement/equipmentDetail"
- ),
+ component: () => import(/* webpackChunkName: "about" */ "../views/equipmentManagement/equipmentDetail")
},
{
path: "/algorithmDetail",
name: "algorithmDetail",
- component: () =>
- import(
- /* webpackChunkName: "about" */ "../views/equipmentManagement/algorithmDetail"
- ),
+ component: () => import(/* webpackChunkName: "about" */ "../views/equipmentManagement/algorithmDetail")
},
{
path: "/search",
name: "search",
- component: () => import(/* webpackChunkName: "about" */ "../views/search"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/search")
},
{
path: "/searchOpen",
name: "searchOpen",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/search/searchOpen"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/search/searchOpen")
},
{
path: "/GB28181Open",
name: "GB28181Open",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/GB28181/GB28181Open"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/GB28181/GB28181Open")
},
{
path: "/GB28181",
name: "GB28181",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/GB28181/index"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/GB28181/index")
},
{
path: "/product",
name: "product",
- component: () => import(/* webpackChunkName: "about" */ "../views/product"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/product")
},
{
path: "/productDetail",
name: "productDetail",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/productDetail"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/productDetail")
},
{
path: "/trialCenter",
name: "trialCenter",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/trialCenter"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/trialCenter")
},
{
path: "/connectUs",
name: "connectUs",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/connectUs"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/connectUs")
},
{
path: "/hashrate",
name: "hashrate",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/hashrate"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/hashrate")
},
{
path: "/hashrateDetail",
name: "hashrateDetail",
- component: () =>
- import(
- /* webpackChunkName: "about" */ "../views/hashrate/hashrateDetail"
- ),
+ component: () => import(/* webpackChunkName: "about" */ "../views/hashrate/hashrateDetail")
},
{
path: "/manageCenter",
name: "manageCenter",
- component: () =>
- import(/* webpackChunkName: "about" */ "../views/manageCenter"),
+ component: () => import(/* webpackChunkName: "about" */ "../views/manageCenter")
},
-];
+ {
+ path: "/report",
+ name: "report",
+ component: () => import(/* webpackChunkName: "about" */ "../views/report")
+ }
+]
const router = new VueRouter({
- routes,
-});
+ routes
+})
-export default router;
+export default router
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>
diff --git a/src/views/report/components/Banner.vue b/src/views/report/components/Banner.vue
new file mode 100644
index 0000000..7b68487
--- /dev/null
+++ b/src/views/report/components/Banner.vue
@@ -0,0 +1,55 @@
+<template>
+ <div class="Banner">
+ <div class="heart">
+ <div class="title">GB28181閰嶇疆</div>
+ <div class="des">鏀寔鍥芥爣鏈嶅姟锛屾帴鍏ュ浗鏍囨憚鍍忔満銆�</div>
+ <div class="button" @click="jump">绔嬪嵆寮�閫�</div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { enableMenu } from "@/api/user";
+
+export default {
+ methods: {
+ async jump() {
+ /* console.log(JSON.parse(sessionStorage.getItem("userInfo")).id);
+ await enableMenu({
+ userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
+ menuId: "89098e9f-baaa-4a69-9e9b-26444dd69ff6",
+ }); */
+ this.$router.push("/GB28181");
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.Banner {
+ overflow: hidden;
+ height: 480px;
+ background-image: url("/images/hashrate/banner.png");
+ color: #fff;
+
+ .title {
+ margin: 122px 0 10px 0;
+ font-size: 48px;
+ }
+
+ .des {
+ margin-bottom: 82px;
+ width: 560px;
+ font-size: 16px;
+ line-height: 24px;
+ }
+
+ .button {
+ width: 160px;
+ height: 56px;
+ background: #0065ff;
+ text-align: center;
+ line-height: 56px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/components/DevList.vue b/src/views/report/components/DevList.vue
new file mode 100644
index 0000000..ed9afd2
--- /dev/null
+++ b/src/views/report/components/DevList.vue
@@ -0,0 +1,211 @@
+<template>
+ <div class="event-list">
+ <div class="title">鍛婅鎺ㄩ�侀厤缃�</div>
+ <div class="empty" v-if="eventList.length === 0">
+ <img src="/images/search/1.png" alt="" />
+ <div class="des">鎮ㄨ繕鏈坊鍔犳坊鍔犲憡璀︿簨浠舵帹閫佷换鍔�</div>
+ <div class="button add" @click="showSettingBox = true">
+ 绔嬪嵆娣诲姞
+ </div>
+ </div>
+ <div class="list scroll">
+ <el-table :data="eventList" style="width: 100%">
+ <el-table-column label="搴忓彿" width="180"> </el-table-column>
+ <el-table-column label="浜嬩欢鍚嶇О" width="180"> </el-table-column>
+ <el-table-column label="浜嬩欢绛夌骇" width="180"> </el-table-column>
+ <el-table-column label="鍏宠仈鍖哄煙" width="180"> </el-table-column>
+ <el-table-column label="璐ｄ换浜�" width="180"> </el-table-column>
+ <el-table-column label="鎺ㄩ�佹柟寮�" width="180"> </el-table-column>
+ <el-table-column label="鎿嶄綔">
+ <template slot-scope="scope">
+ <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">缂栬緫</el-button>
+ <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- <div class="devItem" v-for="(item, index) in clusterList" :key="index">
+ <div class="mainInfo">
+ <img src="/images/hashrate/cluster.png" alt="" />
+
+ <div class="right">
+ <div class="name">{{ item.cluster_name }}</div>
+ <div class="ip">{{ item.virtual_ip }}</div>
+ <div class="number">璁惧鎬婚噺:{{ item.nodeNum }}</div>
+ </div>
+
+ <div class="button set" @click="setting({ clusterId: item.cluster_id }, item.nodeList)">
+ 閰嶇疆
+ </div>
+ </div>
+ </div>
+ <div class="devItem" v-for="(item, index) in devList" :key="index + 'dev'">
+ <div class="mainInfo">
+ <img src="/images/hashrate/equipment.png" alt="" />
+
+ <div class="right">
+ <div class="name">{{ item.devName }}</div>
+ <div class="ip">{{ item.devIp }}</div>
+ </div>
+
+ <div class="button set" @click="setting({ devId: item.devId })">
+ 閰嶇疆
+ </div>
+ </div>
+ </div> -->
+ </div>
+
+ <SettingBox v-if="showSettingBox" @close="showSettingBox = false" :id="idObj" :nodeList="nodeList"></SettingBox>
+ </div>
+</template>
+
+<script>
+import SettingBox from "@/views/report/components/SettingBox"
+import { getClusterDevList } from "@/api/clusterManage"
+
+export default {
+ components: {
+ SettingBox
+ },
+ created() {
+ this.getClusterDevList()
+ },
+ data() {
+ return {
+ eventList: [],
+ clusterList: [],
+ devList: [],
+ showSettingBox: false,
+ idObj: {},
+ nodeList: []
+ }
+ },
+ methods: {
+ async getClusterDevList() {
+ const res = await getClusterDevList()
+ if (res && res.success) {
+ this.clusterList = res.data.clusterList
+ this.devList = res.data.devList
+ }
+ },
+ setting(id, nodeList) {
+ this.idObj = id
+ this.nodeList = nodeList ? nodeList : []
+ this.showSettingBox = true
+ },
+ handleEdit(idx, row) {},
+ handleDelete(idx, row) {}
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.event-list {
+ position: relative;
+ box-sizing: border-box;
+ padding: 20px;
+ width: 1280px;
+ height: 770px;
+ background-color: #fff;
+ margin: 0 auto;
+
+ .title {
+ margin-bottom: 20px;
+ height: 20px;
+ padding-left: 20px;
+ font-weight: 700;
+ font-size: 16px;
+ border-left: 4px solid #0065ff;
+ }
+
+ .empty {
+ text-align: center;
+
+ img {
+ width: 260px;
+ }
+
+ .des {
+ margin-bottom: 30px;
+ font-size: 14px;
+ }
+
+ .add {
+ margin: 0 auto;
+ width: 112px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ color: #fff;
+ background-color: #0065ff;
+ }
+ }
+
+ .list {
+ display: flex;
+ flex-wrap: wrap;
+ overflow-y: auto;
+ height: 710px;
+
+ .devItem {
+ position: relative;
+ margin: 0 15px 20px 0;
+ width: 295px;
+ height: 150px;
+ border: 1px solid #c0c5cc;
+ border-radius: 5px;
+
+ .mainInfo {
+ display: flex;
+ padding: 20px;
+
+ img {
+ margin-right: 20px;
+ width: 88px;
+ }
+ }
+
+ .right {
+ .name {
+ margin-bottom: 6px;
+ font-size: 16px;
+ font-weight: 700;
+ }
+
+ .ip,
+ .number {
+ margin-bottom: 2px;
+ font-size: 12px;
+ color: #666;
+ }
+ }
+
+ .set {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ border: 1px solid #c0c5cc;
+ font-size: 16px;
+ color: #0065ff;
+ }
+
+ &:nth-child(4n) {
+ margin-right: 0;
+ }
+
+ &:hover {
+ box-shadow: 0px 2px 16px 0px rgba(0, 43, 106, 0.25);
+
+ .set {
+ color: #fff;
+ background-color: #0065ff;
+ border-color: #0065ff;
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/src/views/report/components/Flow.vue b/src/views/report/components/Flow.vue
new file mode 100644
index 0000000..1718c32
--- /dev/null
+++ b/src/views/report/components/Flow.vue
@@ -0,0 +1,68 @@
+<template>
+ <div class="Flow heart">
+ <div class="title">绠楀姏绠＄悊鐨勪娇鐢ㄦ祦绋�</div>
+
+ <div class="flowList">
+ <div class="flowItem" v-for="(item, index) in flowList" :key="index">
+ <img :src="item.img" alt="" />
+ <div class="flowTitle">{{ item.title }}</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ flowList: [
+ {
+ img: "/images/search/1.png",
+ title: "寮�閫氱粺璁℃煡璇�",
+ },
+ { img: "/images/search/3.png", title: "鏁版嵁鏌ョ湅" },
+ {
+ img: "/images/search/2.png",
+ title: "褰曞儚鏌ョ湅",
+ },
+ {
+ img: "/images/search/4.png",
+ title: "鏁版嵁瀹炴椂鐩戞帶",
+ },
+ ],
+ };
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.Flow {
+ overflow: hidden;
+ height: 540px;
+ text-align: center;
+
+ .title {
+ margin: 60px 0;
+ font-size: 28px;
+ color: #3d3d3d;
+ }
+
+ .flowList {
+ display: flex;
+
+ .flowItem {
+ width: 260px;
+ margin-right: 80px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .flowTitle {
+ margin-top: 20px;
+ font-size: 16px;
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/components/FormArea.vue b/src/views/report/components/FormArea.vue
new file mode 100644
index 0000000..7957dda
--- /dev/null
+++ b/src/views/report/components/FormArea.vue
@@ -0,0 +1,315 @@
+<template>
+ <div class="FormArea">
+ <el-form
+ :model="gb28181"
+ :rules="rules"
+ label-position="left"
+ label-width="90px"
+ class="alarmSetting"
+ ref="gb28181"
+ >
+ <el-form-item class="selectItem" label="浜嬩欢鍚嶇О">
+ <el-select class="h32" v-model="locationCity.province" size="small" placeholder="璇烽�夋嫨浜嬩欢">
+ <el-option
+ v-for="item in eventsOptions"
+ :key="item.value"
+ :label="item.label"
+ size="small"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item class="selectItem" label="浜嬩欢绛夌骇">
+ <el-select
+ class="h32"
+ v-model="locationCity.level"
+ size="small"
+ placeholder="璇烽�夋嫨"
+ :disabled="gb28181.idType === 0"
+ >
+ <el-option
+ v-for="item in levelOptions"
+ :key="item.value"
+ :label="item.label"
+ size="small"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+
+ <el-form-item label="鍏宠仈鍖哄煙">
+ <el-input
+ class="h32"
+ v-model="gb28181.PublicId"
+ placeholder="璇疯緭鍏�"
+ size="small"
+ :disabled="gb28181.idType === 1"
+ ></el-input>
+ </el-form-item>
+
+ <el-form-item label="璐ｄ换浜�" prop="GbServerPort">
+ <el-input
+ class="h32"
+ v-model.number="gb28181.GbServerPort"
+ placeholder="璇疯緭鍏�"
+ size="small"
+ style="width: 200px"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="鎵嬫満鍙�" prop="GbServerPort">
+ <el-input
+ class="h32"
+ v-model.number="gb28181.GbServerPort"
+ placeholder="璇疯緭鍏�"
+ size="small"
+ style="width: 200px"
+ ></el-input>
+ </el-form-item>
+
+ <el-form-item label="鎺ㄩ�佹柟寮�">
+ <el-input
+ class="h32"
+ v-model="gb28181.Password"
+ placeholder="璇疯緭鍏�"
+ size="small"
+ :disabled="!gb28181.IsAuth"
+ ></el-input>
+ </el-form-item>
+ </el-form>
+
+ <div class="btnArea">
+ <div class="button cancel" @click="$emit('close')">鍙栨秷</div>
+ <div class="button submit" @click="submitGB28281">淇濆瓨</div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { getGB28181Config, saveGB28181Config, getGb28181AreaList, newGb28181ID } from "@/api/Gb28181"
+import { isPort, isIPv4 } from "@/scripts/validate"
+
+export default {
+ props: {
+ id: {}
+ },
+ created() {
+ this.initGB28181Conf()
+ },
+ data() {
+ return {
+ gb28181: {},
+ rules: {
+ ip: [
+ {
+ required: true,
+ message: "璇疯緭鍏P鍦板潃",
+ trigger: "change"
+ },
+ { validator: isIPv4, trigger: "change" }
+ ],
+ ServerIp: [
+ {
+ required: true,
+ message: "璇疯緭鍏P鍦板潃",
+ trigger: "change"
+ },
+ { validator: isIPv4, trigger: "change" }
+ ],
+ ServerPort: [
+ {
+ required: true,
+ message: "璇疯緭鍏ョ鍙�",
+ trigger: "change"
+ },
+ { validator: isPort, trigger: "change" }
+ ],
+ GbServerPort: [
+ {
+ required: true,
+ message: "璇疯緭鍏ョ鍙�",
+ trigger: "change"
+ },
+ { validator: isPort, trigger: "change" }
+ ]
+ },
+ locationCity: {
+ province: "",
+ city: "",
+ county: "",
+ provinceOptions: [],
+ cityOptions: [],
+ countyOptions: []
+ },
+ eventsOptions: [
+ { value: "fire", label: "鏄� 鐏�" },
+ { value: "smoke", label: "鐑� 闆�" },
+ { value: "work", label: "鏈┛宸ユ湇" },
+ { value: "head", label: "鏈埓瀹夊叏甯�" },
+ { value: "dowork", label: "绂诲矖" },
+ { value: "juji", label: "浜哄憳鑱氶泦" }
+ ],
+ levelOptions: [
+ { value: "1", label: "涓�绾�" },
+ { value: "2", label: "浜岀骇" },
+ { value: "3", label: "涓夌骇" },
+ { value: "4", label: "鍥涚骇" },
+ { value: "5", label: "浜旂骇" }
+ ]
+ }
+ },
+ methods: {
+ initGB28181Conf() {
+ getGB28181Config(this.id).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.gb28181 = rsp.data
+ //this.gb28181.idType = 0;
+
+ this.$set(this.gb28181, "idType", 0)
+ this.$refs["gb28181"].resetFields()
+ }
+ })
+ getGb28181AreaList().then((rsp) => {
+ if (rsp && rsp.success) {
+ this.locationCity.provinceOptions = rsp.data.list
+ }
+ })
+ },
+ submitGB28281() {
+ this.$refs["gb28181"].validate((valid) => {
+ if (valid) {
+ saveGB28181Config(this.gb28181).then((rsp) => {
+ if (rsp && rsp.success) {
+ console.log("1212112")
+ this.$notify({
+ type: "success",
+ message: "GB28181璁剧疆淇濆瓨鎴愬姛"
+ })
+ }
+ })
+ } else {
+ console.log("error submit!!")
+ return false
+ }
+ })
+ },
+ changeProvince() {
+ let pid = this.locationCity.province
+ getGb28181AreaList({ parentId: pid }).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.locationCity.cityOptions = rsp.data.list
+ this.locationCity.city = this.locationCity.cityOptions[0].id
+ this.changeCity()
+ }
+ })
+ },
+ changeCity() {
+ let pid = this.locationCity.city
+ getGb28181AreaList({ parentId: pid }).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.locationCity.countyOptions = rsp.data.list
+ this.locationCity.county = this.locationCity.countyOptions[0].id
+ }
+ })
+ },
+ newGBID() {
+ let cCode = this.locationCity.county + ""
+ newGb28181ID({ code: cCode }).then((rsp) => {
+ if (rsp && rsp.success) {
+ this.gb28181.PublicId = rsp.data.code
+ }
+ })
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.FormArea {
+ position: relative;
+ height: 565px;
+ .el-form {
+ padding: 20px;
+ padding-top: 34px;
+
+ .el-form-item {
+ margin-bottom: 34px;
+ }
+
+ .h32 {
+ border-radius: 3px;
+
+ ::v-deep input {
+ border-radius: 3px;
+ border-color: #c0c5cc;
+ }
+ }
+
+ .el-input {
+ width: 410px;
+ }
+
+ .el-radio-group {
+ margin-bottom: 34px;
+
+ ::v-deep .el-radio__label {
+ color: #3d3d3d;
+ }
+ }
+
+ .selectItem ::v-deep {
+ .el-form-item__content {
+ display: flex;
+
+ .el-select {
+ margin-right: 10px;
+ width: 200px;
+ }
+
+ .button {
+ margin-left: 10px;
+ line-height: 32px;
+ color: #0065ff;
+ }
+ }
+ }
+ }
+
+ .el-form-item.is-required {
+ ::v-deep .el-form-item__label:before {
+ display: none;
+ }
+
+ ::v-deep .el-form-item__label::after {
+ content: "*";
+ color: #f52323;
+ margin-right: 4px;
+ }
+ }
+
+ .btnArea {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 20px 0;
+ border-top: 1px solid #e9ebee;
+ display: flex;
+ justify-content: flex-end;
+ text-align: center;
+
+ .cancel {
+ margin-right: 10px;
+ padding: 6px 16px;
+ border: 1px solid #0065ff;
+ color: #0065ff;
+ }
+
+ .submit {
+ padding: 6px 16px;
+ border: 1px solid #0065ff;
+ color: #fff;
+ background-color: #0065ff;
+ }
+ }
+}
+</style>
diff --git a/src/views/report/components/SettingBox.vue b/src/views/report/components/SettingBox.vue
new file mode 100644
index 0000000..ffc3f54
--- /dev/null
+++ b/src/views/report/components/SettingBox.vue
@@ -0,0 +1,89 @@
+<template>
+ <div class="SettingBox" :class="{ large: activeTab === 2 }">
+ <div class="title">浜嬩欢鎺ㄩ�侀厤缃�</div>
+ <div class="close iconfont" @click="$emit('close')"></div>
+ <div class="content">
+ <FormArea :id="id" @close="$emit('close')" v-if="activeTab === 0"></FormArea>
+ </div>
+ </div>
+</template>
+
+<script>
+import FormArea from "@/views/report/components/FormArea"
+
+export default {
+ components: {
+ FormArea
+ },
+ props: {
+ id: {},
+ nodeList: {}
+ },
+ data() {
+ return {
+ activeTab: 0
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.SettingBox {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-top: -354px;
+ margin-left: -500px;
+ width: 1000px;
+ height: 708px;
+ background-color: #fff;
+ box-shadow: 0px 2px 16px 0px rgba(0, 43, 106, 0.25);
+ z-index: 2;
+
+ &.large {
+ margin-top: -477px;
+ margin-left: -719px;
+ width: 1438px;
+ height: 953px;
+ }
+
+ .title {
+ box-sizing: border-box;
+ padding: 20px;
+ height: 64px;
+ border-bottom: 1px solid #e9ebee;
+ font-size: 18px;
+ font-weight: 700;
+ }
+
+ .close {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ font-size: 12px;
+ color: #666;
+ cursor: pointer;
+ }
+
+ .content {
+ padding: 20px;
+
+ .tabs {
+ display: flex;
+ border-bottom: 1px solid #e9ebee;
+
+ .tab {
+ transform: translateY(1px);
+ padding: 16px 24px;
+ cursor: pointer;
+ border-bottom: 2px solid rgba(255, 255, 255, 0);
+
+ &.active {
+ border-color: #0065ff;
+ color: #0065ff;
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/src/views/report/components/TableArea.vue b/src/views/report/components/TableArea.vue
new file mode 100644
index 0000000..87561d5
--- /dev/null
+++ b/src/views/report/components/TableArea.vue
@@ -0,0 +1,145 @@
+<template>
+ <div class="TableArea">
+ <div class="content">
+ <el-table
+ :data="subDevTable"
+ fit
+ highlight-current-row
+ style="width: 100%"
+ >
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ align="center"
+ width="80"
+ ></el-table-column>
+ <el-table-column
+ prop="name"
+ label="鍚嶇О"
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column
+ prop="publicid"
+ label="ID"
+ show-overflow-tooltip
+ ></el-table-column>
+ <el-table-column prop="ip" label="IP"></el-table-column>
+ <el-table-column prop="status" label="鐘舵��" align="center">
+ <template slot-scope="scope">
+ <span
+ :style="scope.row.alive ? `color:#36B24A` : 'color:#FF4B33;'"
+ >{{ scope.row.alive ? "鍦ㄧ嚎" : "绂荤嚎" }}</span
+ >
+ </template>
+ </el-table-column>
+ <el-table-column prop="corp" label="澶囨敞"></el-table-column>
+ </el-table>
+ </div>
+ </div>
+</template>
+
+<script>
+import { getAllSubServer } from "@/api/Gb28181";
+
+export default {
+ props: {
+ id: {},
+ },
+ created() {
+ this.getList();
+ },
+ data() {
+ return {
+ subDevTable: [],
+ };
+ },
+ methods: {
+ async getList() {
+ let params = {};
+ if (this.id.clusterId) {
+ params = {
+ clusterId: this.id.clusterId,
+ devId: "",
+ };
+ } else {
+ params = {
+ clusterId: "",
+ devId: this.id.devId,
+ };
+ }
+ const res = await getAllSubServer(params);
+ if (res && res.success) {
+ this.subDevTable = res.data;
+ }
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped >
+.TableArea {
+ padding: 30px 0;
+ .content {
+ height: 500px;
+ }
+ .el-table ::v-deep {
+ background-color: rgb(233, 235, 238);
+ padding: 1px;
+
+ &::after {
+ display: none;
+ }
+
+ td.index .cell {
+ padding-left: 16px;
+ padding-right: 4px;
+ }
+
+ .has-gutter tr th {
+ background: #f0f3f5;
+ font-size: 16px;
+ color: #3d3d3d;
+ font-weight: 700;
+ }
+
+ td .cell {
+ color: #3d3d3d;
+ }
+
+ tr:hover > td.el-table__cell {
+ background-color: #fff;
+ }
+
+ .el-table__row--striped .el-table__cell {
+ background-color: #f0f5fa !important;
+ }
+ tr:hover > td.el-table__cell {
+ background-color: #fff;
+ }
+
+ .el-table__row--striped .el-table__cell {
+ background-color: #f0f5fa !important;
+ }
+
+ .status {
+ color: #ff4b33;
+
+ &.green {
+ color: #36b24a;
+ }
+ }
+
+ .option {
+ margin-right: 10px;
+ font-size: 24px;
+ color: rgb(0, 101, 255);
+ cursor: pointer;
+
+ &.disable {
+ color: #666;
+ cursor: default;
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/index.vue b/src/views/report/index.vue
new file mode 100644
index 0000000..82ff39c
--- /dev/null
+++ b/src/views/report/index.vue
@@ -0,0 +1,59 @@
+<template>
+ <div class="GB28181">
+ <!-- 椤靛ご -->
+ <IndexHeader :opacity="false"></IndexHeader>
+ <!-- 闈㈠寘灞� -->
+ <div class="heart">
+ <el-breadcrumb separator=">">
+ <el-breadcrumb-item :to="{ path: '/manageCenter' }">绠＄悊涓績</el-breadcrumb-item>
+ <el-breadcrumb-item>鍛婅绠＄悊</el-breadcrumb-item>
+ </el-breadcrumb>
+ </div>
+
+ <!-- 涓昏鍐呭 -->
+ <DevList></DevList>
+
+ <!-- 椤靛熬 -->
+ <Footer :isBlack="true"></Footer>
+ </div>
+</template>
+
+<script>
+import IndexHeader from "@/components/IndexHeader"
+import DevList from "@/views/report/components/DevList"
+// import SettingBox from "@/views/report/components/SettingBox"
+import Footer from "@/components/Footer"
+
+export default {
+ components: {
+ IndexHeader,
+ DevList,
+ // SettingBox,
+ Footer
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.GB28181 {
+ background-color: rgb(243, 245, 248);
+ position: relative;
+ min-height: 100vh;
+
+ .el-breadcrumb {
+ margin-top: 48px;
+ margin-bottom: 24px;
+
+ ::v-deep span {
+ color: #666;
+ }
+ }
+
+ .Footer {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+}
+</style>
--
Gitblit v1.8.0