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