<template>
|
<div class="clients-wrapper" style="position: initial;" :class="{'clients-sidebox-open': sideboxOpened}">
|
<div class="clients-content clients-scroll container-p-x container-p-y overflow-y">
|
<!-- Header -->
|
<h4 class="d-flex flex-wrap justify-content-between align-items-center font-weight-bold pt-2 mb-2">
|
<div class="mb-2">设备管理</div>
|
<div class="mb-2" style="max-width: 200px;">
|
<fButton
|
type="warning"
|
@click.native="()=>{$router.push({path:'/device/add'})}"
|
authority="sys:device:add"
|
>
|
<span class="fas fa-plus pr10"></span>
|
添加设备
|
</fButton>
|
</div>
|
</h4>
|
<!-- / Header -->
|
|
<!-- 设备列表 -->
|
<b-card no-body>
|
<!-- 检索 start -->
|
<b-card-header header-tag="h4" class="media flex-wrap align-items-center py-4">
|
<b-button-group class="mr10">
|
<b-button
|
v-for="iteam in newDeviceTypeDicts"
|
:key="iteam.id"
|
:variant="deviceType===iteam.value?'primary':'outline-primary'"
|
@click="deviceType=iteam.value;_initData()"
|
>
|
{{iteam.lable}}
|
</b-button>
|
</b-button-group>
|
<b-form-select style="max-width: 10rem;" v-model="authorizationSystem" @change="(e)=>{authorizationSystem = e;_initData()}" text-field="lable" :options="newSysDicts" class="mr10"/>
|
<b-input
|
placeholder="请输入IP地址、设备名称或位置描述..."
|
autocomplete="off"
|
style="max-width: 20rem;"
|
class="mr10"
|
v-model="searchName"
|
@keyup.enter.native="handleSearch"
|
/>
|
<b-btn variant="primary" class="mr10" @click="handleSearch"><span class="fs fas-search"></span>搜索</b-btn>
|
</b-card-header>
|
<!-- 检索 end -->
|
<div class="pl20 pr20 pt10 pb30">
|
<Table
|
:data="newTableList"
|
highlight-current-row
|
@current-change="checkDeviceInfo"
|
ref="leftTable"
|
>
|
<TableColumn
|
type="index"
|
prop="index"
|
label="序号"
|
:index="snMethod"
|
width="50"
|
/>
|
<TableColumn
|
label="类型"
|
prop="type"
|
width="50">
|
<template slot-scope="scope">
|
<img :src="'/static/img/map/'+scope.row.icon+'.png'" width="30" height="30" :onerror="noneImg" :alt="scope.row.icon">
|
</template>
|
</TableColumn>
|
<TableColumn
|
label="设备名称"
|
prop="deviceName"
|
/>
|
<TableColumn
|
label="IP地址"
|
prop="ip"
|
/>
|
<TableColumn
|
label="位置描述"
|
prop="description"
|
/>
|
<TableColumn
|
label="授权系统"
|
prop="authorizationSystemName"
|
/>
|
<TableColumn
|
label="操作"
|
width="180"
|
>
|
<template slot-scope="scope">
|
<div @click.stop>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
@click.native="handleDel(scope.row.id)"
|
authority="sys:device:delete"
|
>
|
删除
|
</fButton>
|
<fButton
|
type="link"
|
style="padding:2px;"
|
authority="sys:device:update"
|
@click.native.self="$router.push({path:'/device/add',query:{id:scope.row.id}})"
|
>
|
编辑
|
</fButton>
|
</div>
|
</template>
|
</TableColumn>
|
</Table>
|
<div class="pt20 pb20">
|
<b-pagination class="justify-content-center justify-content-sm-end m-0"
|
v-if="total"
|
v-model="activePage"
|
:total-rows="total"
|
:per-page="pageSize"
|
/>
|
</div>
|
</div>
|
</b-card>
|
<!-- / 设备列表 -->
|
</div>
|
<!-- 详细信息栏 -->
|
<div class="clients-sidebox">
|
<a @click.prevent="closeSidebox" href="#" class="clients-sidebox-close setCloseBtn text-muted text-xlarge font-weight-light">
|
<i class="fa fa-angle-double-right"></i>
|
</a>
|
<perfect-scrollbar :options="{ suppressScrollX: true, wheelPropagation: true }" class="clients-scroll pl20 pr20">
|
<h5 class="pt30">设备属性 </h5>
|
<b-card no-body class="pt30 pl20 pr20 pb20">
|
<el-collapse v-model="activeCollapse" >
|
<el-collapse-item title="概况" name="basic">
|
<b-form-group horizontal label-class="text-sm-right pt-0" :label-cols="5" label="IP地址："><div>{{deviceInfo&&deviceInfo.ip}}</div></b-form-group>
|
<b-form-group horizontal label-class="text-sm-right pt-0" :label-cols="5" label="端口号："><div>{{deviceInfo&&deviceInfo.port}}</div></b-form-group>
|
</el-collapse-item>
|
<el-collapse-item title="维修记录" name="repair">
|
<div class="text-center">暂无数据</div>
|
</el-collapse-item>
|
</el-collapse>
|
</b-card>
|
</perfect-scrollbar>
|
</div>
|
<!-- / 详细信息栏 -->
|
</div>
|
|
</template>
|
<!-- Page -->
|
<style src="@/vendor/styles/pages/clients.scss" lang="scss"></style>
|
<style>
|
.setCloseBtn {
|
right: 10px;
|
left: auto;
|
top: 1.5rem;
|
}
|
</style>
|
|
<script>
|
import { Table, TableColumn, Collapse, CollapseItem } from 'element-ui'
|
import PerfectScrollbar from '@/vendor/libs/perfect-scrollbar/PerfectScrollbar'
|
import {
|
getDeviceList,
|
delDevice,
|
getDeviceInfo
|
} from '@/server/deviceManagement.js'
|
import { getDeviceType, getSysList } from '@/server/common.js'
|
|
export default {
|
name: 'deviceManagement',
|
metaInfo: {
|
title: '设备管理'
|
},
|
data() {
|
return {
|
noneImg: 'this.src="' + require('@/assets/img/noneImg.png') + '"',
|
userInfo: this.$store.getters.basicUserInfo,
|
|
deviceType: '',
|
deviceTypeDicts: [],
|
authorizationSystem: '',
|
sysDicts: [],
|
|
searchName: '',
|
tableList: [],
|
total: 0,
|
pageSize: 10,
|
activePage: 1,
|
|
/* 右侧侧边栏 */
|
sideboxOpened: false,
|
activeCollapse: 'basic',
|
deviceInfo: null
|
}
|
},
|
computed: {
|
newSysDicts() {
|
return [{ value: '', lable: '全部' }, ...this.sysDicts]
|
},
|
newDeviceTypeDicts() {
|
return [{ value: '', lable: '全部' }, ...this.deviceTypeDicts]
|
},
|
newTableList() {
|
let sysDicts = this.sysDicts
|
let list = this.tableList.map(iteam => {
|
if (iteam.authorizationSystem) {
|
let arr = iteam.authorizationSystem.replace(/^,+|,+$/g, '').split(',')
|
let strName = ''
|
for (let val of arr) {
|
for (let sysIteam of sysDicts) {
|
if (sysIteam.value === val) {
|
strName +=
|
strName === '' ? sysIteam.lable : '，' + sysIteam.lable
|
}
|
}
|
}
|
iteam.authorizationSystemName = strName
|
return iteam
|
}
|
})
|
return list
|
}
|
},
|
methods: {
|
// 关闭侧边栏
|
closeSidebox() {
|
this.sideboxOpened = false
|
/* 取消选择 */
|
this.$refs.leftTable.setCurrentRow(null)
|
},
|
snMethod(index) {
|
return this.activePage > 1
|
? this.pageSize * (this.activePage - 1) + index + 1
|
: index + 1
|
},
|
async getSysDicts() {
|
let res = await getSysList({
|
orgId: this.userInfo.orgId,
|
userId: this.userInfo.id,
|
tags: 'device'
|
})
|
if (res && !res.error) {
|
this.sysDicts = res
|
}
|
},
|
async getDeviceTypeDicts() {
|
let res = await getDeviceType({ orgId: this.userInfo.orgId })
|
if (res) {
|
this.deviceTypeDicts = res
|
}
|
},
|
/* 设备列表初始化 */
|
async _initData() {
|
let res = await getDeviceList({
|
orgId: this.userInfo.orgId,
|
length: this.pageSize,
|
start: this.pageSize * (this.activePage - 1),
|
searchName: this.searchName,
|
deviceType: this.deviceType,
|
authorizationSystem: this.authorizationSystem
|
})
|
if (res) {
|
this.tableList = res.data
|
this.total = res.total
|
}
|
},
|
/* 获取设备信息 */
|
async getDeviceInfo(id) {
|
let res = await getDeviceInfo({ orgId: this.userInfo.orgId, id })
|
if (res) {
|
this.deviceInfo = res
|
/* 打开侧边栏 */
|
this.sideboxOpened = true
|
} else {
|
this.$notify({
|
group: 'foo',
|
type: 'warn',
|
title: '抱歉，这条数据有错误',
|
text: '这条数据有错误，请联系管理员'
|
})
|
}
|
},
|
// 搜索
|
handleSearch() {
|
this._initData()
|
},
|
// 删除
|
handleDel(id) {
|
this.$swal(
|
{
|
title: '确定删除吗？',
|
type: 'warning',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
confirmButtonText: '确定删除！',
|
cancelButtonText: '取消删除！',
|
closeOnConfirm: true
|
},
|
async () => {
|
let res = await delDevice({
|
orgId: this.userInfo.orgId,
|
id
|
})
|
if (res && res.success) {
|
// this.$swal(
|
// '删除成功',
|
// `${res.msg ? res.msg : ''}`,
|
// 'success'
|
// )
|
this.$toast({
|
type: 'success',
|
message: '删除成功'
|
})
|
this._initData()
|
} else {
|
// this.$swal('删除失败', `${res.msg ? res.msg : ''}`, 'error')
|
this.$toast({
|
type: 'error',
|
message: '删除失败'
|
})
|
}
|
}
|
)
|
},
|
// 查看设备详情
|
checkDeviceInfo(row) {
|
if (row && row.id) {
|
this.getDeviceInfo(row.id)
|
}
|
}
|
},
|
watch: {
|
activePage(val, oldVal) {
|
if (val !== oldVal) {
|
this.activePage = val
|
this._initData()
|
}
|
}
|
},
|
created() {
|
/* 查询字典 */
|
this.getSysDicts()
|
this.getDeviceTypeDicts()
|
/* 查询列表 */
|
this._initData()
|
},
|
components: {
|
Table,
|
TableColumn,
|
elCollapse: Collapse,
|
elCollapseItem: CollapseItem,
|
PerfectScrollbar
|
}
|
}
|
</script>
|
