<template>
|
<b-card no-body class="mx-4 mt-4 " style="height: 85vh;">
|
<div class="px-4 py-4">
|
<h4 class="font-weight-bold py-3 mb-2">
|
<router-link to="/">
|
<span class="font-weight-bold" style="color:#4E5155">布控任务 /</span>
|
</router-link>
|
<span class="text-muted font-weight-light">布控详情</span>
|
</h4>
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<div class="flex-center">
|
<div
|
class="table-switch-btn active"
|
:class="tabType==='map'?'active':''"
|
@click="tabType='map'"
|
v-show="tabType==='table' || tabType==='list'"
|
>
|
<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>
|
<span class="top-left">{{ctrolObj.name}}</span>
|
</div>
|
<div class="ml20">
|
<span>状态:{{ctrolObj.status === 0?'未布控':'布控中'}}</span>
|
</div>
|
<div class="ml20">
|
<span>对比阈值：{{ctrolObj.threshold}}</span>
|
</div>
|
<div class="ml20">
|
<span>布控时间：</span>
|
{{ctrolObj.startTime}} - {{ctrolObj.endTime}}
|
</div>
|
</div>
|
|
</div>
|
<div class="flex-row-right">
|
<div
|
class="table-switch-btn active"
|
:class="tabType==='list'?'active':''"
|
@click="tabType='list'"
|
v-show="tabType==='table' || tabType==='map'"
|
title="点击切换列表与视图模式"
|
>
|
<i class="fas fa-th-large"></i>
|
</div>
|
<div
|
class="table-switch-btn active"
|
:class="tabType==='table'?'active':''"
|
@click="tabType='table'"
|
v-show="tabType==='list'"
|
>
|
<i class="fas fa-list-ul"></i>
|
</div>
|
<el-button type="primary" @click.native="handleStopCtrlBatch">停止布控</el-button>
|
<el-button type="info" @click.native="handleDelPersonBatch">删除此人</el-button>
|
</div>
|
</div>
|
<div class="mt30">
|
<!-- 布控列表 start -->
|
<div v-show="tabType === 'table'">
|
<detail-table
|
:selectOpts="selectOpts"
|
:selectVal="selectVal"
|
:tableList="newTableList"
|
:total="total"
|
:activePage="activePage"
|
:pageSize="pageSize"
|
@sortChange="handleSortChange"
|
@handleSelectionChange="handleSelectionChange"
|
@stop="handleStopCtrl"
|
@del="handleDelPerson"
|
></detail-table>
|
<div class="pt15 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>
|
<div v-if="tabType === 'map'" style="height:64vh">
|
|
<div class="flex-center">
|
<!-- 侧边栏按钮 start -->
|
<div class="toggleOpen-btn open-tree 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>
|
<div :style="isOpenTree?'width:25%;height:68vh':'width:0%;height:68vh'">
|
<div
|
class="bg-white home-sidenav border-right"
|
:class="isOpenTree?'w-20':'w-0'"
|
style="height:68vh;"
|
>
|
<div class="pl-2 pr-2" style="min-width:200px">
|
<!-- 组织集合 start -->
|
<org-tree
|
ref="tree"
|
:isSearch="true"
|
:data="colonyData"
|
@currentNode="_currentNode"
|
:isOpen="true"
|
@toggleOpen="isOpenTree = !isOpenTree"
|
/>
|
<!-- 组织集合 end -->
|
</div>
|
</div>
|
</div>
|
<div :style="isOpenTree?'width:75%;height:68vh':'width:100%;height:68vh'">
|
<view-map ref="map" :allDevices="allDevices"></view-map>
|
</div>
|
</div>
|
</div>
|
<div v-show="tabType === 'list'" class="overflow-auto" style="height:64vh">
|
<!-- 布控列表 start -->
|
<div class="px-4 py-4 person-list">
|
<div class="row">
|
<div
|
class="col-lg-3 col-md-4 col-sm-6 pb-2"
|
v-for="(item,index) in newTableList"
|
:key="index"
|
>
|
<div class="person-list-item d-flex px-2 py-3 border">
|
<div class="person-list-item-check pr-2">
|
<el-checkbox v-model="item.checked" @change="checkboxChange"/>
|
</div>
|
<div class="person-list-item-img flex-center">
|
<httpImg :src="item.imgUrl" width="100px" height="100px" alt/>
|
</div>
|
<div class="person-list-item-info px-2">
|
<p class="mb-1" title="布控中">{{item.isControl}}</p>
|
<h6 class="mb-1 text-danger" title="吸毒人员">{{item.taskName}}</h6>
|
<p class="mb-1" title="张三/男/18岁">{{item.userInfo}}</p>
|
<div class="btns">
|
<span class="far fa-stop-circle" @click="handleStopCtrl(item)"></span>
|
<span class="ion ion-md-close" @click="handleDelPerson(item)"></span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 布控列表 end -->
|
|
</div>
|
</div>
|
</div>
|
</b-card>
|
</template>
|
<script>
|
import {
|
Table,
|
TableColumn,
|
DatePicker,
|
Select,
|
Option,
|
Row,
|
Col,
|
Button,
|
Input,
|
Checkbox
|
} from 'element-ui'
|
import ViewMap from '../../Home/components/mapDeviceList'
|
import orgTree from './deviceTree'
|
import detailTable from './detailTable'
|
import { getAllColonyNode } from '@/server/home.js'
|
import {getCtrlUserAlreadyList, stopCtrlAlready, delCtrlUserAlready} from '@/server/ctrl.js'
|
import {
|
findScopeDetailByTaskId
|
} from '@/server/task.js'
|
|
export default {
|
props: {
|
|
},
|
components: {
|
elTable: Table,
|
elTableColumn: TableColumn,
|
elSelect: Select,
|
elOption: Option,
|
elInput: Input,
|
elRow: Row,
|
elCol: Col,
|
elDatePicker: DatePicker,
|
elButton: Button,
|
ViewMap: ViewMap,
|
orgTree: orgTree,
|
detailTable: detailTable,
|
elCheckbox: Checkbox
|
},
|
data() {
|
return {
|
userInfo: this.$store.getters.basicUserInfo,
|
tabType: 'table',
|
/** table数据 */
|
newTableList: [],
|
total: 10,
|
pageSize: 10,
|
activePage: 1,
|
/** 排序字段 */
|
sortName: '',
|
sortType: 'desc',
|
/** 地图上设备树是否展开 */
|
isOpenTree: true,
|
/** 树节点 */
|
currentItem: {id: '0', type: '1', name: '集群设备'},
|
/** 设备集群树数据 */
|
colonyData: [],
|
/** 地图上的所有设备集合 */
|
allDevices: [],
|
/** 布控状态数据源 */
|
selectOpts: [
|
{
|
name: '布控状态',
|
value: ''
|
},
|
{
|
name: '未布控',
|
value: '0'
|
},
|
{
|
name: '布控中',
|
value: '1'
|
}
|
],
|
selectVal: '',
|
/** 表格跟列表转换 */
|
tableTolist: 'table',
|
/** 存储布控任务的对象 */
|
ctrolObj: {},
|
/** 勾选table中的 */
|
checkIds: [],
|
checkListIds: []
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
},
|
userId() {
|
return this.$store.getters.basicUserInfo.id
|
}
|
},
|
methods: {
|
/** 当排序发生改变的回调 */
|
sortChange(column, prop, order) {
|
console.log(column, prop, order, 'column, prop, order')
|
},
|
/** 获取序号 */
|
snMethod(index) {
|
return this.activePage > 1
|
? this.pageSize * (this.activePage - 1) + index + 1
|
: index + 1
|
},
|
/** 地图上选择节点后回调 */
|
_currentNode(data) {
|
this.currentItem = data
|
console.log(data, 'node---设备树')
|
if (data) {
|
this.selectDevice(data)
|
}
|
},
|
/** 查询设备树 */
|
async getAllColonyNode() {
|
let res = await getAllColonyNode({ orgById: this.orgId })
|
if (res) {
|
this.colonyData = res
|
}
|
},
|
// 排序
|
handleSortChange(data) {
|
console.log(data, '排序 sortChange')
|
if (data) {
|
if (data.prop === null) {
|
this.sortType = 'desc'
|
this.sortName = ''
|
}
|
if (data.order === 'descending') {
|
this.sortType = 'desc'
|
this.sortName = data.prop
|
}
|
if (data.order === 'ascending') {
|
this.sortType = 'asc'
|
this.sortName = data.prop
|
}
|
this.getCtrlUserAlreadyList(this.ctrolObj)
|
}
|
},
|
// 布控select 选择
|
handleSelectionChange(data) {
|
console.log(data, '选择 handleSelectionChange')
|
this.checkListIds = data.map(item => item.id)
|
},
|
checkboxChange(data) {
|
const ids = this.newTableList
|
.filter(item => item.checked)
|
.map(item => item.id)
|
this.handleTableCheck(ids)
|
console.log(data, 'check', ids)
|
},
|
// 表格 check 事件
|
handleTableCheck(ids) {
|
console.log(ids, 'ids')
|
this.checkListIds = [...ids]
|
},
|
// 停止布控
|
handleStopCtrl({ id }) {
|
this.checkIds = [id]
|
this.stopCtrl(false)
|
},
|
// 批量停止布控
|
handleStopCtrlBatch() {
|
this.checkIds = [...this.checkListIds]
|
this.stopCtrl(true)
|
},
|
async stopCtrlAlready() {
|
const res = await stopCtrlAlready({
|
ids: this.checkIds
|
})
|
return res
|
},
|
stopCtrl(isBatch) {
|
this.$swal(
|
{
|
title: '确定停止布控吗？',
|
text: isBatch
|
? '您所勾选的人员将会停止布控！'
|
: '当前人员将会停止布控！',
|
type: 'warning',
|
showCancelButton: true,
|
confirmButtonColor: '#DD6B55',
|
cancelButtonText: '取消',
|
confirmButtonText: '确定停止！',
|
closeOnConfirm: false
|
},
|
async data => {
|
if (!data) {
|
return false
|
}
|
const res = await this.stopCtrlAlready()
|
if (res && res.success) {
|
this.$swal(
|
'停止布控！',
|
res.msg ? res.msg : '停止布控成功',
|
'success'
|
)
|
// 成功后刷新
|
this.getCtrlUserAlreadyList(this.ctrolObj)
|
} else {
|
this.$swal(
|
'停止布控！',
|
res.msg ? res.msg : '停止布控失败',
|
'error'
|
)
|
}
|
}
|
)
|
},
|
// 删除此人
|
handleDelPerson({ id }) {
|
this.checkIds = [id]
|
this.delPerson(false)
|
},
|
// 删除此人
|
handleDelPersonBatch() {
|
this.checkIds = [...this.checkListIds]
|
this.delPerson(true)
|
},
|
async delCtrlUserAlready() {
|
const list = this.checkIds.map(item => ({ id: item }))
|
const res = await delCtrlUserAlready(list)
|
console.log(res, 'delCtrlUserAlready()')
|
return res
|
},
|
delPerson(isBatch) {
|
this.$swal(
|
{
|
title: '确定删除布控吗？',
|
text: isBatch
|
? '您所勾选的人员将会删除布控！'
|
: '当前人员将会删除布控！',
|
type: 'warning',
|
showCancelButton: true,
|
confirmButtonColor: '#DD6B55',
|
cancelButtonText: '取消',
|
confirmButtonText: '确定删除！',
|
closeOnConfirm: false
|
},
|
async data => {
|
if (!data) {
|
return false
|
}
|
const res = await this.delCtrlUserAlready()
|
if (res && res.success) {
|
this.$swal(
|
'删除布控！',
|
res.msg ? res.msg : '删除布控成功',
|
'success'
|
)
|
// 成功后刷新
|
this.getCtrlUserAlreadyList(this.ctrolObj)
|
} else {
|
this.$swal(
|
'删除布控！',
|
res.msg ? res.msg : '删除布控失败',
|
'error'
|
)
|
}
|
}
|
)
|
},
|
/* 检索事件 */
|
handleSearch() {},
|
/** 查询布控人员列表 */
|
async getCtrlUserAlreadyList(data) {
|
if (data) {
|
let json = {
|
isControl: this.selectVal,
|
groupInformation: '',
|
taskId: data.id,
|
orderBy: this.sortName,
|
sortType: this.sortType,
|
start: this.pageSize * (this.activePage - 1),
|
length: this.pageSize
|
}
|
let res = await getCtrlUserAlreadyList(json)
|
if (res && res.success) {
|
this.total = res.data.total
|
|
this.newTableList = res.data.list.map(item => {
|
// 处理布控状态 语义化
|
for (let s of this.selectOpts) {
|
if (item.isControl === s.value) {
|
item.isControl = s.name
|
}
|
}
|
// userInfo 拼接用户信息
|
if (item.sex > -1) {
|
item.sexName = item.sex ? '男' : '女'
|
}
|
const arr = ['username', 'sexName', 'idCard', 'mobile']
|
let userInfo = ''
|
for (let [index, name] of arr.entries()) {
|
if (item[name]) {
|
userInfo += item[name] + `${index !== arr.length - 1 ? '/' : ''}`
|
}
|
}
|
let baseInfoName = ''
|
for (let [index, name] of item.baseInfo.entries()) {
|
if (name) {
|
baseInfoName += name + `${index !== item.baseInfo.length - 1 ? '\n' : ''}`
|
}
|
}
|
item.baseInfoName = baseInfoName
|
item.userInfo = userInfo
|
return item
|
})
|
console.log(this.newTableList, 'this.newTableList')
|
this.newTableList.forEach(item => {
|
this.$set(item, 'checked', false)
|
})
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '查询布控详情列表失败！'
|
})
|
}
|
}
|
},
|
/** 查询任务的所在的设备 */
|
async findDevices() {
|
console.log(this.ctrolObj, 'this.ctrolObj findDevices')
|
let res = await findScopeDetailByTaskId({taskId: this.ctrolObj.id})
|
console.log(res, 'res findDevices')
|
if (res && res.success) {
|
/** 设置没有子节点的节点不可勾选 */
|
const _setDisabled = data => {
|
if (data.child && data.child !== null) {
|
this.$set(data, 'isDevice', false)
|
data.child.forEach(i => {
|
_setDisabled(i)
|
})
|
} else {
|
this.$set(data, 'isDevice', true)
|
}
|
}
|
res.data.forEach((item) => {
|
_setDisabled(item)
|
})
|
this.colonyData = res.data
|
this.getDevicesToMap()
|
}
|
},
|
/** 获取所有节点的集合 */
|
getTreeNode(obj, arr) {
|
arr.push(obj)
|
if (obj.child && obj.child.length !== 0) {
|
obj.child.forEach((item, index) => {
|
this.getTreeNode(item, arr)
|
})
|
}
|
},
|
/** 筛选所选设备树节点中的设备，传给地图 */
|
getDevicesToMap() {
|
let devices = []
|
this.colonyData.forEach(item => {
|
this.getTreeNode(item, devices)
|
})
|
devices = devices.filter((item) => {
|
return item.isDevice
|
})
|
this.allDevices = devices
|
console.log(this.allDevices, 'devices')
|
},
|
/** 地图上的选择某个设备 */
|
selectDevice(data) {
|
if (data) {
|
this.$refs.map.setActive(data)
|
}
|
},
|
/** 取消高亮 */
|
cancelActive() {
|
this.$refs.map.cancelActive()
|
}
|
|
},
|
created() {
|
if (this.$route.query.rowData) {
|
console.log(this.$route.query.rowData, 'this.$route.query.rowData')
|
this.ctrolObj = this.$route.query.rowData
|
this.getCtrlUserAlreadyList(this.ctrolObj)
|
console.log(this.ctrolObj, 'this.ctrolObj')
|
this.findDevices()
|
}
|
if (this.$route.query.isMap) {
|
this.tabType = 'map'
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.table-switch-btn {
|
height: 40px;
|
line-height: 30px;
|
font-size: 30px;
|
padding: 5px 8px;
|
color: #ccc;
|
cursor: pointer;
|
&.active {
|
color: #35bde7;
|
}
|
}
|
.top-left{
|
color: red;
|
}
|
.el-button--primary {
|
color: #fff;
|
background-color: #35bde7;
|
border-color: #35bde7;
|
}
|
.el-table--border, .el-table--group {
|
border: 1px solid #ebeef5;
|
}
|
.home-sidenav {
|
transition: all 0.5s;
|
overflow: hidden;
|
}
|
.w-20 {
|
width: 100%;
|
}
|
.w-80 {
|
width: 80%;
|
}
|
.w-0 {
|
width: 0%;
|
}
|
.open-tree{
|
position: absolute;
|
left: 5px;
|
z-index: 500;
|
}
|
.person-list {
|
.person-list-item {
|
overflow: auto;
|
.person-list-item-check {
|
display: flex;
|
align-items: center;
|
}
|
.person-list-item-img {
|
flex: 1 1 auto;
|
text-align: center;
|
}
|
.person-list-item-info {
|
flex: 1 1 auto;
|
h6 {
|
font-size: 16px;
|
font-weight: 900;
|
}
|
h6,
|
p {
|
max-width: 100px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin: 0 auto;
|
}
|
p.visibility {
|
visibility: hidden;
|
}
|
p.none {
|
display: none;
|
}
|
.btns {
|
max-width: 100px;
|
margin: 0 auto;
|
}
|
.btns span {
|
padding: 0 2px;
|
font-size: 15px;
|
cursor: pointer;
|
color: #35bde7;
|
-webkit-touch-callout: none;
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
}
|
.person-list-item-close{
|
float: right;
|
}
|
}
|
}
|
</style>
|
