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' ...@@ -3,6 +3,7 @@ import request from '@/utils/request'
const path = { const path = {
deptList: '/dict/selectDeptItem', deptList: '/dict/selectDeptItem',
fsuList: '/dict/selectFsuItem', fsuList: '/dict/selectFsuItem',
getTree: '/home/getTree',
} }
export function deptList() { export function deptList() {
...@@ -13,3 +14,7 @@ export function fsuList() { ...@@ -13,3 +14,7 @@ export function fsuList() {
return request.post(path.fsuList, ...arguments) 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 @@ ...@@ -49,6 +49,7 @@
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { getTree } from '@/api/baseData'
export default { export default {
data() { data() {
...@@ -66,133 +67,7 @@ export default { ...@@ -66,133 +67,7 @@ export default {
label: "自动监控", label: "自动监控",
}, },
], ],
data: [ 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: [],
},
],
},
],
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "label", label: "label",
...@@ -204,10 +79,19 @@ export default { ...@@ -204,10 +79,19 @@ export default {
computed: { computed: {
...mapGetters("tree", ["treeData"]), ...mapGetters("tree", ["treeData"]),
}, },
mounted() {
this.getInit()
},
methods: { methods: {
handleClick(data) { handleClick(data) {
console.log(data); console.log(data);
}, },
getInit() {
getTree().then(res => {
let list = res || []
this.data = list
})
},
renderContent(h, { node, data, store }) { renderContent(h, { node, data, store }) {
return ( return (
<div> <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> <template>
<!-- 漏缆监测告警 --> <!-- 漏缆监测告警 -->
<div class="leakage-cable"><el-button-group> <div class="leakage-cable">
<el-button v-for="item in tabs" :key="item.key" :type="activeName === item.key ? 'primary' : ''" @click="changeType(item)">{{ item.label }}</el-button> <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> </el-button-group>
<div class="leakage-top"> <div class="leakage-top">
<div style="color: #666666"> <div style="color: #666666"></div>
</div>
<div class="operate-btn"> <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">导出</el-button> <el-button type="primary" @click="exportList">导出</el-button>
</div> </div>
</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 type="index" label="序列号" width="100" align="center" />
<el-table-column prop="name" label="基站名称" width="180" align="center" /> <el-table-column
<el-table-column prop="object" label="告警对象" width="180" align="center" /> prop="siteName"
<el-table-column prop="level" label="告警级别" width="150" align="center"> label="基站名称"
<template slot-scope="scope"> width="180"
<div> align="center"
{{ scope.row.level }} />
</div> <el-table-column
</template> prop="alarmTarget"
label="告警对象"
width="180"
align="center"
/>
<el-table-column prop="alarmLevelName" label="告警级别" width="150" align="center">
</el-table-column> </el-table-column>
<el-table-column prop="message" label="告警信息" align="center" width="300"> <el-table-column
<template slot-scope="scope"> prop="alarmInfo"
<div v-for="(item, index) in scope.row.message.red" :key="index+'red'" class="red 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"
>
{{ item }} {{ item }}
</div> </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 }} {{ item }}
</div> </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 }} {{ item }}
</div> </div>
</template> </template> -->
</el-table-column> </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 <el-table-column
prop="lateUploadTime"
label="操作" label="最新上传时间"
align="center" 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"> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <Pagination
:limit="searchForm.pageSize" :limit="params.size"
:page="searchForm.pageNum" :page="params.current"
:total="total" :total="total"
class="pagination" class="pagination"
@pagination="handlePageChange" @pagination="handlePageChange"
...@@ -63,62 +102,74 @@ ...@@ -63,62 +102,74 @@
</template> </template>
<script> <script>
import Pagination from '@/components/Pagination' import { cableTimeList, cableExport } from '../api'
import { tableData } from './const'
export default { export default {
components: { Pagination },
data() { data() {
return { return {
activeName: '0', confirmStatus: 2,
searchForm: { params: {
pageNum: 1, current: 1,
pageSize: 10 size: 10
}, },
total: 10, total: 10,
tableData, tableData: [],
tableData2:[], tabs: [ // 1:已确认，0:未确认
tabs: [
{ {
label: '全部', label: '全部',
key: '0' key: 2
}, },
{ {
label: '已确认', label: '已确认',
key: '1' key: 1
}, },
{ {
label: '未确认', label: '未确认',
key: '2' key: 0
} }
], ],
}; };
}, },
methods: { methods: {
// 表格背景图颜色 // 表格背景图颜色
cellClassFn({row, column, rowIndex, columnIndex}) { cellClassFn({ row, column, rowIndex, columnIndex }) {
if (row.level == '紧急' && column.label == '告警级别') { if (row.level == '紧急' && column.label == '告警级别') {
return 'emergency' return 'emergency'
} else if (row.level == '重要' && column.label == '告警级别') { } else if (row.level == '重要' && column.label == '告警级别') {
return 'important' return 'important'
} }
if (rowIndex%2 == 1) { if (rowIndex % 2 == 1) {
return 'stripe' return 'stripe'
} }
}, },
handlePageChange(pageData) { handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size this.params.size = pageData.size
this.searchForm.pageNum = pageData.page this.params.current = pageData.page
this.getTableData() this.getTableData()
}, },
getTableData() { getTableData(type) {
this.tableData2 = this.tableData.slice(( this.searchForm.pageNum - 1) * this.searchForm.pageSize, let param = {
this.searchForm.pageNum * this.searchForm.pageSize confirmStatus: type,
); ...this.params
this.total = this.tableData.length }
cableTimeList(param).then(res => {
let list = res.records || []
this.tableData = list
this.total = res.total
})
}, },
changeType(item) { 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() { mounted() {
...@@ -151,7 +202,7 @@ export default { ...@@ -151,7 +202,7 @@ export default {
color: black; color: black;
} }
& ::v-deep .stripe { & ::v-deep .stripe {
background-color: #EAF1FE; background-color: #eaf1fe;
} }
& ::v-deep .emergency { & ::v-deep .emergency {
background-color: #f00; background-color: #f00;
......
src/views/alarm/device/index.vue
View file @ 28f8fc6c
...@@ -2,38 +2,45 @@ ...@@ -2,38 +2,45 @@
<!-- 设备连接告警 --> <!-- 设备连接告警 -->
<div class="leakage-cable"> <div class="leakage-cable">
<el-button-group> <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> </el-button-group>
<div class="leakage-top"> <div class="leakage-top">
<div style="color: #666666"></div> <div style="color: #666666"></div>
<div class="operate-btn"> <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">导出</el-button> <el-button type="primary" @click="exportList">导出</el-button>
</div> </div>
</div> </div>
<el-table :data="tableData2" style="width: 100%" :cell-class-name="cellClassFn" :header-cell-style="{background:'#EAF1FE',color:'#666666'}"> <el-table
<el-table-column prop="equipment1" label="网元设备" align="center" /> :data="tableData"
<el-table-column prop="state1" label="连接状态" align="center" /> style="width: 100%"
<el-table-column prop="equipment2" label="网元设备" align="center" /> :cell-class-name="cellClassFn"
<el-table-column prop="uploadDate" label="上传时间" align="center" /> :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
<el-table-column prop="confirmUser" label="确认人" align="center" /> >
<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 prop="confirmTime" label="确认时间" align="center" />
<el-table-column <el-table-column fixed="right" label="操作" align="center" width="100">
fixed="right"
label="操作"
align="center"
width="100">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <Pagination
:limit="searchForm.pageSize" :limit="params.size"
:page="searchForm.pageNum" :page="params.current"
:total="total" :total="total"
class="pagination" class="pagination"
@pagination="handlePageChange" @pagination="handlePageChange"
...@@ -42,39 +49,37 @@ ...@@ -42,39 +49,37 @@
</template> </template>
<script> <script>
import Pagination from '@/components/Pagination' import { deviceList, deviceExport } from '../api'
import { tableData } from './const'
export default { export default {
components: { Pagination },
data() { data() {
return { return {
searchForm: { confirmStatus: 2,
pageNum: 1, params: {
pageSize: 10 current: 1,
size: 10
}, },
total: 10, total: 10,
tableData2:[], tableData: [],
tableData,
activeName: '0',
tabs: [ tabs: [
{ {
label: '全部', label: '全部',
key: '0' key: 2
}, },
{ {
label: '已确认', label: '已确认',
key: '1' key: 1
}, },
{ {
label: '未确认', label: '未确认',
key: '2' key: 0
} }
], ],
}; };
}, },
methods: { methods: {
// 表格背景图颜色 // 表格背景图颜色
cellClassFn({row, column, rowIndex, columnIndex}) { cellClassFn({ row, column, rowIndex, columnIndex }) {
if ((row.state1 == '连接正常' && column.property == 'state1')) { if ((row.state1 == '连接正常' && column.property == 'state1')) {
return 'green' return 'green'
} }
...@@ -86,24 +91,38 @@ export default { ...@@ -86,24 +91,38 @@ export default {
} else if ((row.state2 == '连接异常' && column.property == 'state2')) { } else if ((row.state2 == '连接异常' && column.property == 'state2')) {
return 'red' return 'red'
} }
if (rowIndex%2 == 1) { if (rowIndex % 2 == 1) {
return 'stripe' return 'stripe'
} }
}, },
handlePageChange(pageData) { handlePageChange(pageData) {
this.searchForm.pageSize = pageData.size this.params.size = pageData.size
this.searchForm.pageNum = pageData.page this.params.current = pageData.page
this.getTableData() this.getTableData()
}, },
getTableData() { getTableData(type) {
this.tableData2 = this.tableData.slice(( this.searchForm.pageNum - 1) * this.searchForm.pageSize, let param = {
this.searchForm.pageNum * this.searchForm.pageSize confirmStatus: type,
); ...this.params
this.total = this.tableData.length }
deviceList(param).then(res => {
let list = res.records || []
this.tableData = list
this.total = res.total
})
}, },
changeType(item) { 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() { mounted() {
...@@ -124,7 +143,7 @@ export default { ...@@ -124,7 +143,7 @@ export default {
color: #333333; color: #333333;
} }
& ::v-deep .stripe { & ::v-deep .stripe {
background-color: #EAF1FE; background-color: #eaf1fe;
} }
& ::v-deep .red { & ::v-deep .red {
background-color: #f00; 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