<template>
|
<div class="d-flex align-items-stretch flex-grow-1 pr">
|
<div class="bg-white home-sidenav border-right flex-row-top" :class="isOpenTree?'w-20':'w-0'">
|
<!-- style="height: 88.2vh;" -->
|
<div class="pl-2 pr-2" style="width:100%;min-width:200px">
|
<!-- 组织集合 start -->
|
<org-tree
|
ref="tree"
|
:isSearch="true"
|
:data="treeData"
|
@currentNode="_currentOrgNode"
|
:isOpen="isOpenColony"
|
@toggleOpen="isOpenTree = !isOpenTree"
|
@save-org-success="getOrgTree"
|
@del-device-success="deviceDel"
|
@del-org-success="orgDel"
|
@add-device="showDeviceModel"
|
/>
|
<!-- 组织集合 end -->
|
<hr class="mb-0">
|
<!-- 集群设备 start -->
|
<colony-tree
|
:isSearch="false"
|
:data="colonyData"
|
@currentNode="_currentColonyNode"
|
:isOpenAll="false"
|
:isOpen="isOpenColony"
|
@setOpenTree="setOpenTree"
|
@add-colony="showColonyModel"
|
/>
|
<!-- 集群设备 end -->
|
</div>
|
<!-- 弹窗 start -->
|
<add-device-form
|
:item="null"
|
ref="deviceForm"
|
title="新增设备"
|
@submit="deviceSubmit"
|
:isShowFooter="false"
|
/>
|
<add-colony-form
|
:item="null"
|
ref="colonyForm"
|
title="新增集群"
|
@submit="colonySubmit"
|
:isShowFooter="false"
|
/>
|
<!-- 弹窗 end -->
|
</div>
|
<div class="flex-grow-1" :class="isOpenTree?'w-80':''">
|
<!-- 右侧 标题 start -->
|
<div class="pl-2 pr-2 py-3 bg-white border-bottom mb-4 flex-box">
|
<div
|
class="table-switch-btn active"
|
:class="tabType==='map'?'active':''"
|
@click="tabType='map'"
|
v-show="tabType==='table'"
|
>
|
<i class="fas fa-map"></i>
|
</div>
|
<div
|
class="table-switch-btn active"
|
:class="tabType==='table'?'active':''"
|
@click="tabType='table'"
|
v-show="tabType==='map'"
|
>
|
<i class="fas fa-list-ul"></i>
|
</div>
|
<div class="mx-2">
|
<el-input
|
placeholder="请输入IP地址、设备名称或位置描述..."
|
autocomplete="off"
|
style="min-width: 18rem;"
|
v-model="searchName"
|
clearable
|
@keyup.enter.native="handleSearch"
|
/>
|
</div>
|
<div class="mx-2">
|
<b-btn variant="primary" class="mr10" @click="handleSearch">搜索</b-btn>
|
</div>
|
<!-- <div>
|
<b-btn variant="primary" class="btn-circle">
|
<span class="fas fa-lock"></span>
|
<span class="fas fa-lock-open"></span>
|
</b-btn>
|
</div>-->
|
</div>
|
<!-- 右侧 标题 end -->
|
<div class="container-p-x">
|
<div class="row bg-white py-2 px-2 border overflow-auto">
|
<div class="col-md-12 col-lg-12">
|
<!-- 集群按钮 非集群按钮 start -->
|
<div v-if="tabType!=='map'" class="d-flex">
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'local'?'active':'']"
|
@click="tableType='local'"
|
>平台设备</div>
|
<div class="flex-vertical-center px-3">
|
<span class="text-light">|</span>
|
</div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'colony'?'active':'']"
|
@click="tableType='colony'"
|
>集群</div>
|
</div>
|
<!-- 集群按钮 非集群按钮 end -->
|
<div :style="{height: tabType==='map'?'75vh':'70vh'}">
|
<view-map
|
ref="mapDevice"
|
v-if="tabType==='map'"
|
@upTreeData="getOrgTree"
|
:searchName="searchName"
|
:currentColonyItem="currentColonyItem"
|
:currentOrgItem="currentOrgItem"
|
/>
|
<view-table-local
|
ref="viewTableLocal"
|
v-if="tabType==='table' && tableType ==='local'"
|
@add-device="showDeviceModel"
|
:searchName="searchName"
|
:currentOrgItem="currentOrgItem"
|
@del-device-success="deviceDel"
|
/>
|
<view-table-colony
|
ref="viewTableColony"
|
v-if="tabType==='table' && tableType ==='colony'"
|
:searchName="searchName"
|
:analysis="analysis"
|
:currentColonyItem="currentColonyItem"
|
@del-colony-success="colonyDel"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 侧边栏按钮 start -->
|
<div class="toggleOpen-btn bg-dark" :class="!isOpenTree?'isShow':''" v-if="!isOpenTree">
|
<b-button variant="link" class="tree-btn" @click="isOpenTree = !isOpenTree">
|
<i class="ion ion-md-swap f20 text-white"></i>
|
</b-button>
|
</div>
|
<!-- 侧边栏按钮 end -->
|
</div>
|
</template>
|
<script>
|
import OrgTree from './components/OrgTree'
|
import ColonyTree from './components/ColonyTree'
|
import addColonyForm from './components/addColonyForm'
|
import addDeviceForm from './components/addDeviceForm'
|
import ViewMap from './components/mapDeviceList'
|
import ViewTableColony from './components/ViewTableColony'
|
import ViewTableLocal from './components/ViewTableLocal'
|
import { getAllColonyNode } from '@/server/home.js'
|
import { getOrgDeviceTree, getAnalysis } from '@/server/common.js'
|
import { Input } from 'element-ui'
|
export default {
|
name: 'home',
|
metaInfo: {
|
title: '首页'
|
},
|
components: {
|
orgTree: OrgTree,
|
colonyTree: ColonyTree,
|
addDeviceForm,
|
addColonyForm,
|
viewMap: ViewMap,
|
viewTableColony: ViewTableColony,
|
viewTableLocal: ViewTableLocal,
|
elInput: Input
|
},
|
data() {
|
return {
|
userInfo: this.$store.getters.basicUserInfo,
|
tabType: 'map', // table , map
|
tableType: 'local', // colony 集群设备 local 本地设备
|
isOpenTree: true,
|
treeData: [],
|
currentOrgItem: { id: '0', type: 'MENU', name: '平台设备' },
|
/* 集群树 */
|
colonyData: [],
|
currentColonyItem: { id: '0', type: '1', name: '集群设备' },
|
/* 检索条件 */
|
searchName: '',
|
localOrg: '0',
|
colonyOrg: '0',
|
colonyType: '1', // 点击节点类型（1：集群，2：节点，3：设备）
|
analysis: '',
|
isOpenColony: false
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
},
|
userId() {
|
return this.$store.getters.basicUserInfo.id
|
}
|
},
|
methods: {
|
// 获取用户登录分析系统是何种权限
|
async getAnalysis() {
|
let res = await getAnalysis({ userId: this.userId })
|
if (res.success && res.code === 200 && res.data) {
|
console.log(res.data)
|
this.analysis = res.data
|
// this.treeData = res
|
}
|
},
|
// * 获取组织树
|
async getOrgTree() {
|
let res = await getOrgDeviceTree({ orgById: this.orgId })
|
if (res) {
|
this.treeData = res
|
// if (this.$route.query.currentId) {
|
// this.$refs.tree.setCurrentKey(this.$route.query.currentId)
|
// this.currentId = this.$route.query.currentId
|
// this.$nextTick(() => {
|
// this.currentOrgItem = this.$refs.tree.getCurrentNode()
|
// })
|
// } else {
|
// const { child, ...item } = this.treeData[0]
|
// this.currentOrgItem = item
|
// this.$refs.tree.setCurrentKey(item.id)
|
// this.currentId = item.id
|
// }
|
}
|
},
|
/* 查询集群树 */
|
async getAllColonyNode() {
|
let res = await getAllColonyNode({ orgById: this.orgId })
|
if (res) {
|
this.colonyData = res
|
// if (this.$route.query.currentId) {
|
// this.$refs.tree.setCurrentKey(this.$route.query.currentId)
|
// this.currentId = this.$route.query.currentId
|
// this.$nextTick(() => {
|
// this.currentOrgItem = this.$refs.tree.getCurrentNode()
|
// })
|
// } else {
|
// const { child, ...item } = this.treeData[0]
|
// this.currentOrgItem = item
|
// this.$refs.tree.setCurrentKey(item.id)
|
// this.currentId = item.id
|
// }
|
}
|
},
|
/* 搜索框 */
|
handleSearch() {
|
if (this.tabType === 'map') {
|
this.$refs.mapDevice && this.$refs.mapDevice.findDeviceByParams()
|
} else if (this.tableType === 'local') {
|
// 检索 平台设备
|
this.$refs.viewTableLocal && this.$refs.viewTableLocal._initData()
|
} else if (this.tableType === 'colony') {
|
// 检索 集群设备
|
this.$refs.viewTableColony && this.$refs.viewTableColony._initData()
|
}
|
},
|
/* 平台设备操作 */
|
// 点击树
|
_currentOrgNode(node) {
|
this.currentOrgItem = node
|
this.localOrg = node.id ? node.id : '0'
|
console.log(node, 'node---平台设备操作', this.localOrg)
|
},
|
// 删除设备
|
deviceDel() {
|
this.getOrgTree()
|
this.currentOrgItem = { id: '0', type: 'MENU', name: '平台设备' }
|
// 列表或者表格刷新
|
this.handleSearch()
|
this.$refs.mapDevice.findAllDevice()
|
},
|
orgDel() {
|
this.getOrgTree()
|
this.currentOrgItem = { id: '0', type: 'MENU', name: '平台设备' }
|
// 列表或者表格刷新
|
this.handleSearch()
|
},
|
/* 集群设备操作 */
|
// 上下折叠
|
setOpenTree() {
|
this.isOpenColony = !this.isOpenColony
|
console.log(this.isOpenColony, '---isOpenColony----')
|
},
|
// 点击树
|
_currentColonyNode(node) {
|
console.log(node, 'node--集群')
|
this.currentColonyItem = node
|
this.colonyOrg = node.id ? node.id : '0'
|
// colonyType:'1', // 点击节点类型（1：集群，2：节点，3：设备）
|
},
|
/* 弹窗函数 start */
|
showColonyModel() {
|
// 集群添加弹窗
|
this.$refs.colonyForm.showModel()
|
},
|
colonySubmit() {
|
// 保存成功触发
|
this.getAllColonyNode()
|
// 列表或者表格刷新
|
this.handleSearch()
|
this.$refs.mapDevice.findAllDevice()
|
console.log('添加集群保存成功触发')
|
},
|
colonyDel() {
|
// 删除集群成功回调
|
// 保存成功触发
|
this.getAllColonyNode()
|
// 列表或者表格刷新
|
this.handleSearch()
|
this.$refs.mapDevice.findAllDevice()
|
},
|
// 设备添加弹窗
|
showDeviceModel(data) {
|
console.log(data, '添加弹窗')
|
this.$refs.deviceForm.showModel(data)
|
// this.$refs.deviceForm.showModel({ data, type: 'add' })
|
// this.$refs.deviceForm.showModel({data,type:'edit'})
|
},
|
deviceSubmit() {
|
// 保存成功触发
|
this.getOrgTree()
|
// 列表或者表格刷新
|
this.handleSearch()
|
console.log('保存成功触发')
|
this.$refs.mapDevice.findAllDevice()
|
}
|
/* 弹窗函数 end */
|
},
|
created() {
|
this.getAnalysis()
|
// 查询平台设备
|
this.getOrgTree()
|
// 查询集群树
|
this.getAllColonyNode()
|
},
|
watch: {}
|
}
|
</script>
|
<style lang="scss">
|
.ui-icon-lg {
|
font-size: 30px;
|
width: 60px;
|
height: 60px;
|
line-height: 60px !important;
|
}
|
.home-sidenav {
|
transition: all 0.5s;
|
overflow: hidden;
|
}
|
.w-20 {
|
width: 20%;
|
}
|
.w-80 {
|
width: 80%;
|
}
|
.w-0 {
|
width: 0%;
|
}
|
.toggleOpen-btn {
|
border-radius: 5px;
|
position: absolute;
|
left: -8px;
|
top: 3.5rem;
|
transition: all 2s;
|
opacity: 0;
|
}
|
.toggleOpen-btn.isShow {
|
opacity: 1;
|
}
|
|
.table-switch-btn {
|
height: 40px;
|
line-height: 30px;
|
font-size: 30px;
|
padding: 5px 8px;
|
color: #ccc;
|
cursor: pointer;
|
&.active {
|
color: #35bde7;
|
}
|
}
|
.bg-grid {
|
background: #ccc;
|
}
|
.btn-circle {
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
text-align: center;
|
padding: 0;
|
}
|
.table-type-btns {
|
font-size: 22px;
|
padding: 10px 0px;
|
font-weight: 900;
|
color: #868686;
|
transition: all 0.5s;
|
cursor: pointer;
|
// &.btn-link:hover {
|
// color: #3c8ae2;
|
// }
|
&:after {
|
content: '';
|
display: block;
|
background: transparent;
|
width: 0%;
|
height: 2px;
|
transition: all 0.5s;
|
}
|
&.active {
|
color: #35bde7;
|
&:after {
|
background: #35bde7;
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
