Skip to content

W
web-monitor
Commit 28f8fc6c authored by yanzhongrong's avatar yanzhongrong
Browse files
Options

left tree alarm

parent 0865ac3b
Show whitespace changes
Inline Side-by-side
Showing with 227 additions and 238 deletions
src/api/baseData.js
View file @ 28f8fc6c
......@@ -3,6 +3,7 @@ import request from '@/utils/request'
const path = {
deptList: '/dict/selectDeptItem',
fsuList: '/dict/selectFsuItem',
getTree: '/home/getTree',
}
export function deptList() {
......@@ -13,3 +14,7 @@ export function fsuList() {
return request.post(path.fsuList, ...arguments)
}
export function getTree() {
return request.post(path.getTree, ...arguments)
}
src/components/orgTree.vue
View file @ 28f8fc6c
......@@ -49,6 +49,7 @@
<script>
import { mapGetters } from "vuex";
import { getTree } from '@/api/baseData'
export default {
data() {
......@@ -66,133 +67,7 @@ export default {
label: "自动监控",
},
],
data: [
{
type: 1,
id: 0,
iconName: "level1_Z",
label: "张呼铁路客运专线",
children: [
{
id: 1,
type: 2,
iconName: "level2_R",
label: "STATION1未开通",
children: [],
},
{
id: 2,
type: 2,
iconName: "level2_R",
label: "STATION2未开通",
children: [],
},
{
id: 3,
type: 2,
iconName: "level2_R",
label: "STATION3未开通",
children: [],
},
{
id: 4,
type: 2,
iconName: "level2_R",
label: "STATION4未开通",
children: [],
},
{
id: 5,
type: 2,
iconName: "level2_R",
label: "STATION5未开通",
children: [],
},
{
id: 6,
type: 2,
iconName: "level2_R",
label: "STATION6未开通",
children: [],
},
{
id: 7,
type: 2,
iconName: "level2_Z",
label: "(7)VLCB-ZZT02",
children: [
{
id: 4,
type: 4,
iconName: "level3_R",
label: "PSU(现场管理单元7)",
children: [
{
id: 5,
type: 4,
iconName: "level4_R",
label: "故障定位单位_K362",
children: [
{
id: 1,
type: 5,
iconName: "level5_R",
label: "漏缆K362+784张家...",
},
{
id: 2,
type: 5,
iconName: "level5_R",
label: "漏缆K362+7呼和浩...",
},
],
},
{
type: 5,
id: 6,
iconName: "level4_R",
label: "故障定位单位_K365",
},
{
type: 5,
id: 7,
iconName: "level4_R",
label: "故障定位单位_K368",
},
],
},
{
id: 7,
type: 2,
iconName: "level3_R",
label: "故障定位单位_K3...",
children: [
{
id: 8,
type: 3,
iconName: "level4_R",
label: "漏缆K362+784张...",
},
{
id: 9,
type: 2,
iconName: "level4_R",
label: "漏缆K362+784张...",
},
],
},
],
},
{
id: 8,
type: 2,
iconName: "level2_R",
label: "(8)VLCB-ZZT02",
children: [],
},
],
},
],
data: [],
defaultProps: {
children: "children",
label: "label",
......@@ -204,10 +79,19 @@ export default {
computed: {
...mapGetters("tree", ["treeData"]),
},
mounted() {
this.getInit()
},
methods: {
handleClick(data) {
console.log(data);
},
getInit() {
getTree().then(res => {
let list = res || []
this.data = list
})
},
renderContent(h, { node, data, store }) {
return (
<div>
......
src/views/alarm/api.js 0 → 100644
View file @ 28f8fc6c
import request from '@/utils/request'
const path = {
cableTimeList: 'sysMonitorAlarm/selectPage',
cableExport: 'sysMonitorAlarm/export',
cableConfirm: 'sysMonitorAlarm/confirm',
deviceList: 'sysConnectAlarm/selectPage',
deviceExport: 'sysConnectAlarm/export'
}
export function cableTimeList() {
return request.post(path.cableTimeList, ...arguments)
}
export function cableExport() {
return request.post(path.cableExport, ...arguments)
}
export function cableConfirm() {
return request.post(path.cableConfirm, ...arguments)
}
export function deviceList() {
return request.post(path.deviceList, ...arguments)
}
export function deviceExport() {
return request.post(path.deviceExport, ...arguments)
}
src/views/alarm/cableTime/index.vue
View file @ 28f8fc6c
<template>
<!-- 漏缆监测告警 -->
<div class="leakage-cable"><el-button-group>
<el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
<div class="leakage-cable">
<el-button-group>
<el-button
v-for="item in tabs"
:key="item.key"
:type="confirmStatus === item.key ? 'primary' : ''"
@click="changeType(item)"
>{{ item.label }}</el-button
>
</el-button-group>
<div class="leakage-top">
<div style="color: #666666">
</div>
<div style="color: #666666"></div>
<div class="operate-btn">
<el-button type="primary">刷新</el-button>
<el-button type="primary" @click="getTableData">刷新</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button>
<el-button type="primary" @click="exportList">导出</el-button>
</div>
</div>
<el-table :data="tableData2" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}">
<el-table
:data="tableData"
style="width: 100%"
:cell-class-name="cellClassFn"
:header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
>
<el-table-column type="index" label="序列号" width="100" align="center" />
<el-table-column prop="name" label="基站名称" width="180" align="center" />
<el-table-column prop="object" label="告警对象" width="180" align="center" />
<el-table-column prop="level" label="告警级别" width="150" align="center">
<template slot-scope="scope">
<div>
{{ scope.row.level }}
</div>
</template>
<el-table-column
prop="siteName"
label="基站名称"
width="180"
align="center"
/>
<el-table-column
prop="alarmTarget"
label="告警对象"
width="180"
align="center"
/>
<el-table-column prop="alarmLevelName" label="告警级别" width="150" align="center">
</el-table-column>
<el-table-column prop="message" label="告警信息" align="center" width="300">
<template slot-scope="scope">
<div v-for="(item, index) in scope.row.message.red" :key="index+'red'" class="red message">
<el-table-column
prop="alarmInfo"
label="告警信息"
align="center"
width="300"
>
<!-- <template slot-scope="scope">
<div
v-for="(item, index) in scope.row.message.red"
:key="index + 'red'"
class="red message"
>
{{ item }}
</div>
<div v-for="(item, index) in scope.row.message.green" :key="index+'green'" class="green message">
<div
v-for="(item, index) in scope.row.message.green"
:key="index + 'green'"
class="green message"
>
{{ item }}
</div>
<div v-for="(item, index) in scope.row.message.black" :key="index+'black'" class="black message">
<div
v-for="(item, index) in scope.row.message.black"
:key="index + 'black'"
class="black message"
>
{{ item }}
</div>
</template>
</template> -->
</el-table-column>
<el-table-column prop="uploadDate" label="最新上传时间" align="center" width="105"/>
<el-table-column prop="updateDate" label="状态变化时间" align="center" width="105"/>
<el-table-column prop="confirmUser" label="确认人" align="center" />
<el-table-column prop="confirmTime" label="确认时间" align="center" />
<el-table-column
label="操作"
prop="lateUploadTime"
label="最新上传时间"
align="center"
width="100">
width="105"
/>
<el-table-column
prop="statusTimeChange"
label="状态变化时间"
align="center"
width="105"
/>
<el-table-column prop="confirmPerson" label="确认人" align="center" />
<el-table-column prop="confirmTime" label="确认时间" align="center" />
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text" >确认</el-button>
<el-button type="text" v-if="scope.row.confirmStatus === 1">取消</el-button>
<el-button type="text" v-else>确认</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:limit="searchForm.pageSize"
:page="searchForm.pageNum"
<Pagination
:limit="params.size"
:page="params.current"
:total="total"
class="pagination"
@pagination="handlePageChange"
......@@ -63,62 +102,74 @@
</template>
<script>
import Pagination from '@/components/Pagination'
import { tableData } from './const'
import { cableTimeList, cableExport } from '../api'
export default {
components: { Pagination },
data() {
return {
activeName: '0',
searchForm: {
pageNum: 1,
pageSize: 10
confirmStatus: 2,
params: {
current: 1,
size: 10
},
total: 10,
tableData,
tableData2:[],
tabs: [
tableData: [],
tabs: [ // 1:已确认，0:未确认
{
label: '全部',
key: '0'
key: 2
},
{
label: '已确认',
key: '1'
key: 1
},
{
label: '未确认',
key: '2'
key: 0
}
],
};
},
methods: {
// 表格背景图颜色
cellClassFn({row, column, rowIndex, columnIndex}) {
cellClassFn({ row, column, rowIndex, columnIndex }) {
if (row.level == '紧急' && column.label == '告警级别') {
return 'emergency'
} else if (row.level == '重要' && column.label == '告警级别') {
return 'important'
}
if (rowIndex%2 == 1) {
if (rowIndex % 2 == 1) {
return 'stripe'
}
},
handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size
this.searchForm.pageNum = pageData.page
this.params.size = pageData.size
this.params.current = pageData.page
this.getTableData()
},
getTableData() {
this.tableData2 = this.tableData.slice(( this.searchForm.pageNum - 1) * this.searchForm.pageSize,
this.searchForm.pageNum * this.searchForm.pageSize
);
this.total = this.tableData.length
getTableData(type) {
let param = {
confirmStatus: type,
...this.params
}
cableTimeList(param).then(res => {
let list = res.records || []
this.tableData = list
this.total = res.total
})
},
changeType(item) {
this.activeName = item.key
this.confirmStatus = item.key
if(item.key == 2) {
this.getTableData('')
} else {
this.getTableData(item.key)
}
},
exportList() {
cableExport({confirmStatus: this.confirmStatus}).then(res => {
})
},
},
mounted() {
......@@ -151,7 +202,7 @@ export default {
color: black;
}
& ::v-deep .stripe {
background-color: #EAF1FE;
background-color: #eaf1fe;
}
& ::v-deep .emergency {
background-color: #f00;
......
src/views/alarm/device/index.vue
View file @ 28f8fc6c
......@@ -2,38 +2,45 @@
<!-- 设备连接告警 -->
<div class="leakage-cable">
<el-button-group>
<el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button>
<el-button
v-for="item in tabs"
:key="item.key"
:type="confirmStatus === item.key ? 'primary' : ''"
@click="changeType(item)"
>{{ item.label }}</el-button
>
</el-button-group>
<div class="leakage-top">
<div style="color: #666666"></div>
<div class="operate-btn">
<el-button type="primary">刷新</el-button>
<el-button type="primary" @click="getTableData">刷新</el-button>
<el-button type="primary">查询</el-button>
<el-button type="primary">导出</el-button>
<el-button type="primary" @click="exportList">导出</el-button>
</div>
</div>
<el-table :data="tableData2" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}">
<el-table-column prop="equipment1" label="网元设备" align="center" />
<el-table-column prop="state1" label="连接状态" align="center" />
<el-table-column prop="equipment2" label="网元设备" align="center" />
<el-table-column prop="uploadDate" label="上传时间" align="center" />
<el-table-column prop="confirmUser" label="确认人" align="center" />
<el-table
:data="tableData"
style="width: 100%"
:cell-class-name="cellClassFn"
:header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
>
<el-table-column prop="startPointDeviceName" label="网元设备" align="center" />
<el-table-column prop="endPointConnectStatus " label="连接状态" align="center" />
<el-table-column prop="endPointDeviceName" label="网元设备" align="center" />
<el-table-column prop="uploadTime" label="上传时间" align="center" />
<el-table-column prop="confirmPerson" label="确认人" align="center" />
<el-table-column prop="confirmTime" label="确认时间" align="center" />
<el-table-column
fixed="right"
label="操作"
align="center"
width="100">
<el-table-column fixed="right" label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="text">确认</el-button>
<el-button type="text" v-if="scope.row.confirmStatus === 1">取消</el-button>
<el-button type="text" v-else>确认</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:limit="searchForm.pageSize"
:page="searchForm.pageNum"
<Pagination
:limit="params.size"
:page="params.current"
:total="total"
class="pagination"
@pagination="handlePageChange"
......@@ -42,39 +49,37 @@
</template>
<script>
import Pagination from '@/components/Pagination'
import { tableData } from './const'
import { deviceList, deviceExport } from '../api'
export default {
components: { Pagination },
data() {
return {
searchForm: {
pageNum: 1,
pageSize: 10
confirmStatus: 2,
params: {
current: 1,
size: 10
},
total: 10,
tableData2:[],
tableData,
activeName: '0',
tableData: [],
tabs: [
{
label: '全部',
key: '0'
key: 2
},
{
label: '已确认',
key: '1'
key: 1
},
{
label: '未确认',
key: '2'
key: 0
}
],
};
},
methods: {
// 表格背景图颜色
cellClassFn({row, column, rowIndex, columnIndex}) {
cellClassFn({ row, column, rowIndex, columnIndex }) {
if ((row.state1 == '连接正常' && column.property == 'state1')) {
return 'green'
}
......@@ -86,24 +91,38 @@ export default {
} else if ((row.state2 == '连接异常' && column.property == 'state2')) {
return 'red'
}
if (rowIndex%2 == 1) {
if (rowIndex % 2 == 1) {
return 'stripe'
}
},
handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size
this.searchForm.pageNum = pageData.page
this.params.size = pageData.size
this.params.current = pageData.page
this.getTableData()
},
getTableData() {
this.tableData2 = this.tableData.slice(( this.searchForm.pageNum - 1) * this.searchForm.pageSize,
this.searchForm.pageNum * this.searchForm.pageSize
);
this.total = this.tableData.length
getTableData(type) {
let param = {
confirmStatus: type,
...this.params
}
deviceList(param).then(res => {
let list = res.records || []
this.tableData = list
this.total = res.total
})
},
changeType(item) {
this.activeName = item.key
this.confirmStatus = item.key
if(item.key == 2) {
this.getTableData('')
} else {
this.getTableData(item.key)
}
},
exportList() {
deviceExport({confirmStatus: this.confirmStatus}).then(res => {
})
},
},
mounted() {
......@@ -124,7 +143,7 @@ export default {
color: #333333;
}
& ::v-deep .stripe {
background-color: #EAF1FE;
background-color: #eaf1fe;
}
& ::v-deep .red {
background-color: #f00;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment