<template>
|
<TableLayout1 class="menu-layout" :permissions="['system:menu:query']">
|
<template v-slot:menu>
|
<div
|
style="width: 100%; height: 50px; background: rgba(242, 242, 242, 1); line-height: 50px; text-align: center; font-size: 14px;">
|
区域信息</div>
|
<div style="width: 100%; height: calc(100vh - 170px); overflow-y: scroll;">
|
<Tree :list="regionList" :defaultProps="{ name: 'name', status: 'fsStatus', children: 'childList', id: 'indexCode' }" @callback="callback" />
|
</div>
|
</template>
|
<!-- 表格和分页 -->
|
<template v-slot:table-wrap>
|
<ul class="toolbar" >
|
<li><el-button type="primary" icon="el-icon-refresh" :loading="isWorking.sort" @click="refreshRegionData()">刷新缓存</el-button></li>
|
</ul>
|
<el-form ref="searchForm" slot="search-form" label-width="100px" inline>
|
<div class="platgroup_tabs">
|
<div class="tab" :class="{ active: activeGroup === item.id }" @click="groupClick(item)"
|
v-for="(item, i) in groupList" :key="i">
|
{{ item.name }}
|
</div>
|
</div>
|
</el-form>
|
<el-table :height="tableHeightNew" v-loading="isWorking.search" :data="currentList" stripe @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column prop="name" label="设备名称" min-width="120px"> </el-table-column>
|
<el-table-column prop="indexCode" label="设备indexCode" min-width="200px"></el-table-column>
|
<el-table-column prop="regionName" label="区域名称" min-width="200px"></el-table-column>
|
</el-table>
|
<!-- 查看人员开卡记录 -->
|
</template>
|
</TableLayout1>
|
</template>
|
|
<script>
|
import TableLayout1 from '@/layouts/TableLayout1'
|
import BaseTable from '@/components/base/BaseTable'
|
import Tree from '@/components/common/Tree'
|
import { refreshRegionData, regionList } from '@/api/business/warning'
|
export default {
|
name: 'regionDevice',
|
extends: BaseTable,
|
components: { TableLayout1, Tree },
|
data: function () {
|
return {
|
regionList: [],
|
curentReg: {},
|
activeType: 0,
|
activeGroup: 0,
|
currentList: [],
|
groupList: [{ id: 0, name: '监控点', type: 0 }, { id: 1, name: '消防设备', type: 1 }, { id: 2, name: '消防传感器', type: 2 }],
|
isWorking: {
|
sort: false
|
}
|
}
|
},
|
methods: {
|
currentDataList () {
|
this.currentList = []
|
if (this.activeGroup === 0) {
|
this.currentList = this.curentReg.carmeraList || []
|
} else if (this.activeGroup === 1) {
|
this.currentList = this.curentReg.deviceList || []
|
} else if (this.activeGroup === 2) {
|
this.currentList = this.curentReg.sensorList || []
|
}
|
},
|
groupClick (item) {
|
this.activeGroup = item.id
|
this.activeType = item.type
|
this.currentDataList()
|
this.handlePageChange()
|
},
|
// 查询数据
|
handlePageChange () {
|
},
|
// 排序
|
refreshRegionData () {
|
if (this.isWorking.sort) {
|
return
|
}
|
this.isWorking.sort = true
|
refreshRegionData({})
|
.then(() => {
|
this.loadRegions()
|
this.$tip.apiSuccess('刷新成功！')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.sort = false
|
})
|
},
|
loadRegions () {
|
if (this.isWorking.loading) {
|
return
|
}
|
this.isWorking.loading =true
|
this.regionList = []
|
this.curentReg = {}
|
this.currentList = []
|
regionList(1)
|
.then(res => {
|
if (res && res.length > 0) {
|
res[0].fsStatus = 1
|
this.regionList = res
|
this.curentReg = res[0]
|
this.currentDataList()
|
}
|
}) .catch(e => {
|
})
|
.finally(() => {
|
this.isWorking.loading = false
|
})
|
},
|
getDepartmentTree (tree) {
|
if (tree == null) {
|
return []
|
}
|
return tree.map(item => {
|
const newItem = { ...item }
|
if (newItem) {
|
newItem.children = newItem.childList
|
}
|
if (item.children && item.children.length == 0) {
|
this.$delete(newItem, 'children')
|
} else {
|
newItem.children = this.getDepartmentTree(newItem.children)
|
}
|
|
if (newItem.type === this.searchForm.companyType) {
|
// newItem.disabled =false
|
} else {
|
newItem.disabled = true
|
}
|
return newItem
|
})
|
},
|
callback (row) {
|
console.log(row)
|
this.curentReg = row
|
this.currentDataList()
|
}
|
},
|
created () {
|
this.config({
|
module: '菜单',
|
api: '/system/menu'
|
})
|
this.loadRegions()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
.platgroup_tabs {
|
flex: 1;
|
display: flex;
|
border-bottom: 1px solid #dfe2e8;
|
|
.tab {
|
color: #666666;
|
margin-right: 40px;
|
cursor: pointer;
|
padding-bottom: 18px;
|
border-bottom: 2px solid #fff;
|
}
|
|
.active {
|
font-weight: 500;
|
font-size: 15px;
|
color: #222222;
|
border-bottom: 2px solid $primary-color;
|
}
|
}
|
.menu-layout {
|
/deep/ .table-content {
|
margin-top: 0px;
|
}
|
}
|
// 图标列
|
.table-column-icon {
|
// element-ui图标
|
i {
|
background-color: $primary-color;
|
opacity: 0.72;
|
font-size: 20px;
|
color: #fff;
|
padding: 4px;
|
border-radius: 50%;
|
}
|
// 自定义图标
|
[class^="eva-icon-"] {
|
width: 20px;
|
height: 20px;
|
background-size: 16px;
|
vertical-align: middle;
|
}
|
}
|
</style>
|
