27 changed files with 743 additions and 130 deletions
@ -0,0 +1,39 @@ |
|||||
|
<template> |
||||
|
<div class="early_warning"> |
||||
|
<p @click="onShowCtt"> |
||||
|
<i class="el-icon-message-solid" v-if="isShowCtt"></i> |
||||
|
<i class="el-icon-bell" v-else></i> |
||||
|
</p> |
||||
|
<Dialog v-model="isShowCtt" title="事件预警" width="600px" top="100px" right="30px" noneMask> |
||||
|
<WarningList></WarningList> |
||||
|
</Dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import WarningList from "./WarningList.vue"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
isShowCtt:false |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Dialog, WarningList |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
methods: { |
||||
|
onShowCtt(){ |
||||
|
this.isShowCtt = !this.isShowCtt; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.early_warning{ |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,91 @@ |
|||||
|
<template> |
||||
|
<div class="warning_list"> |
||||
|
<el-tabs v-model="activeTab" @tab-click="onChangeTab"> |
||||
|
<el-tab-pane label="告警事件" name="first" /> |
||||
|
<el-tab-pane label="待确认事件" name="second" /> |
||||
|
</el-tabs> |
||||
|
|
||||
|
<div> |
||||
|
<Table :data="tableData" :show-header="false"> |
||||
|
<ElTableColumn prop="remark" width="280" /> |
||||
|
</Table> |
||||
|
</div> |
||||
|
|
||||
|
<div class="footer"> |
||||
|
<Pagination @current-change="getMainData" @size-change="onSizeChange" width="'100%'" |
||||
|
:page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" |
||||
|
layout="total, sizes, prev, pager, next" :total="total"> |
||||
|
</Pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import request from "@/utils/request"; |
||||
|
import Table from '@screen/components/Table.vue'; |
||||
|
import Pagination from '@screen/components/Pagination.vue'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
activeTab: "first", |
||||
|
tableData: [], |
||||
|
total: 10, |
||||
|
searchData: { |
||||
|
pageSize: 10, |
||||
|
pageNum: 1, |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
Table, |
||||
|
Pagination |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getMainData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
onChangeTab(tab, event) { |
||||
|
console.log(tab, event); |
||||
|
this.getMainData(); |
||||
|
}, |
||||
|
getMainData() { |
||||
|
if (this.activeTab == 'first') { |
||||
|
request({ |
||||
|
url: `perceivedEvents/warning/perceivedEventsList?pageNum=${this.searchData.pageNum}&pageSize=${this.searchData.pageSize}`, |
||||
|
method: "POST", |
||||
|
data: {} |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return; |
||||
|
this.tableData = result.rows; |
||||
|
this.total = result.total; |
||||
|
}) |
||||
|
} else if (this.activeTab == 'second') { |
||||
|
request({ |
||||
|
url: `dc/system/event/list?eventState=0&pageSize=${this.searchData.pageSize}&pageNum=${this.searchData.pageNum}`, |
||||
|
method: "GET", |
||||
|
// params: {} |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
if (result.code != 200) return; |
||||
|
result.rows.forEach(item => { |
||||
|
item.remark = item.occurrenceTime + " " + item.stakeMark + " " + item.direction + " 发生" + item.stringEventType + "( " + item.eventSubclass + ")事件" |
||||
|
}) |
||||
|
this.tableData = result.rows; |
||||
|
this.total = result.total; |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
onSizeChange(pageSize) { |
||||
|
this.searchData.pageSize = pageSize; |
||||
|
this.getMainData(); |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.warning_list {} |
||||
|
</style> |
||||
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
@ -0,0 +1,85 @@ |
|||||
|
<template> |
||||
|
<div class='topolog'> |
||||
|
<div class="list"> |
||||
|
<div v-for="(item,index) in list" class="listItem keep-ratio"> |
||||
|
{{ item.switchName }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card"> |
||||
|
<div class="title"> |
||||
|
<view class="t-left">{{ list[selIndex].switchName }}</view> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import request from '@/utils/request' |
||||
|
import { Message } from "element-ui"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'InDevelopment', |
||||
|
components: { |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
list: [], |
||||
|
selIndex: 0 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.bind() |
||||
|
}, |
||||
|
methods:{ |
||||
|
bind(){ |
||||
|
request({ |
||||
|
url: '/business/switch/list', |
||||
|
method: 'get' |
||||
|
}).then(result=>{ |
||||
|
if (result.code != 200) return Message.error(result?.msg); |
||||
|
this.list = result.data |
||||
|
console.log(this.list) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.topolog { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
p { |
||||
|
font-size: 200px; |
||||
|
} |
||||
|
} |
||||
|
.list{ |
||||
|
width: 20vw; |
||||
|
height: 100%; |
||||
|
color: white; |
||||
|
margin: 0px 20px; |
||||
|
.listItem{ |
||||
|
background-image: url(../topology/left-bg.png); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
height: 44px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
line-height: 44px; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.card{ |
||||
|
flex: 1; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in new issue